/**
* @module Betslip/BetslipView
*/
import React from 'react';
import Constants, { GAME_TYPE, MINIMUM_MULTIPLE_ODDS_LENGTH } from '../../constants';
import RenderMethods from './RenderMethods';
/**
* @class
* @augments RenderMethods
* @property {Array} markets
* @property {number} numberOfSelections not in use
* @property {object} betslipSettings
* @property {Array} singleStakes
* @property {string} multipleStake
* @property {string} otherStake
* @property {Array} combiStakes
* @property {Array} matches
* @property {string} placeBetErrorMgs
* @property {boolean} isLoadingPlaceBet
* @property {boolean} betSlipConfimation
* @property {boolean} placebetDisabled
* @property {number} bonusPercentages not in use
* @property {string} bonusOddsThreshold not in use
* @property {object} config
* @property {object} odds
* @property {Array} freeBets
*
* @property {string} type
* @property {number} numOfSplitBets not in use
* @property {Array} maxOdd
* @property {Array} minOdd
* @property {Array} maxPotWin
* @property {Array} minPotWin
* @property {boolean} error not in use
* @property {number} stakeInFocus not in use
* @property {boolean} rerender not in use
* @property {boolean} showButtons
* @property {boolean} openNewPlacedBetsModal not in use
* @property {object} systemManager not in use
* @property {Array<string>} combinationTypes
* @property {string} potWin
* @property {number} totalStake
* @property {number} bonusAmt
* @property {number} percentage
* @property {string} gameType
*
* @property {Function} placebet
* @property {Function} changeStakeInput
* @property {Function} addButton
* @property {Function} openOtherTypes
* @property {Function} openFreeBetType
* @property {Function} selectSingleBet
* @property {Function} selectMultipleBet
* @property {Function} setInputInFocus
* @property {Function} setInputOutOfFocus
* @property {Function} clearAllSelections
* @property {Function} closeConfirmation
* @property {Function} clearSelection
* @property {Function} closeError
* @property {Function} toggleBetslipModal
* @property {Function} clearStake
* @property {Function} getFreeBetsAmount
*
* @property {Function} toggleBetslip
* @property {Function} placebetRequest not in use
* @property {Function} toggleSelectedOdds not in use
* @property {Function} openModal not in use
* @property {Function} setStakes not in use
* @property {Function} closePlaceBetErrorMessage not in use
* @property {Function} closeSlipConfirmation not in use
* @property {Function} kickOff
*/
class BetslipView extends RenderMethods {
/**
* Recalculate free bets amounts
*
* @param {object} prevProps
* @returns {void}
*/
componentDidUpdate(prevProps) {
if (prevProps.freeBets.length !== this.props.freeBets.length) {
this.freeBetsAmounts = null;
}
}
/**
* Return css class name for active/inactive single tab from bottom navigation menu
*
* @function
* @returns {string}
*/
getSingleActivityStatus = () => {
if (this.props.selectedOdds?.length === 0 || !this.props.selectedOdds) {
return 'inactive'; // gray => disabled
}
if (this.props.selectedBetType === Constants.BET_TYPE.SINGLE) {
return 'active'; // white => selected
}
return ''; // green => enabled
};
/**
* Return css class name for active/inactive multiple tab from bottom navigation menu
*
* @function
* @returns {string}
*/
getMultipleActivityStatus = () => {
if (this.props.selectedOdds.length < MINIMUM_MULTIPLE_ODDS_LENGTH
|| this.hasSameMatchOdds(this.props.selectedOdds)) {
return 'inactive'; // gray => disabled
}
if (this.props.selectedBetType === Constants.BET_TYPE.MULTIPLE) {
return 'active'; // white => selected
}
return ''; // green => enabled
}
/**
* Return TRUE/FALSE depending if in the odds we have multiple selections for one match
*
* @function
* @param {Array} odds List of selected odds
* @returns {string}
*/
hasSameMatchOdds = (odds) => this.numberOfDifferentMatches(odds) !== odds.length;
/**
* Return number of different matches in selected odds
*
* @function
* @param {Array} odds List of selected odds
* @returns {string}
*/
numberOfDifferentMatches = (odds) => {
const matches = {};
for (let i = 0; i < odds.length; i += 1) {
const odd = odds[i];
const key = `${odd.league}-${odd.matchId}`;
matches[key] = true;
}
return Object.keys(matches).length;
}
/**
* Return css class name for active/inactive combination tab from bottom navigation menu
*
* @function
* @returns {string}
*/
getCombiActivityStatus = () => {
if (this.props.selectedOdds.length < MINIMUM_MULTIPLE_ODDS_LENGTH
|| this.numberOfDifferentMatches(this.props.selectedOdds) < 2) {
return 'inactive'; // gray => disabled
}
if (this.props.selectedBetType === Constants.BET_TYPE.COMBINATION
|| this.props.selectedBetType === Constants.BET_TYPE.SPLIT_COLUMN) {
return 'active'; // white => selected
}
return ''; // green => enabled
}
/**
* Return css class name for active/inactive free bet tab from bottom navigation menu
*
* @function
* @returns {string}
*/
getFreeBetsActivityStatus = () => {
if (this.hasSameMatchOdds(this.props.selectedOdds) || this.props.selectedOdds.length === 0) {
return 'inactive'; // gray => disabled
}
if (this.props.selectedBetType === Constants.BET_TYPE.FREEBET) {
return 'active'; // white => selected
}
return ''; // green => enabled
}
/**
* Check is single tab selected
*
* @function
* @returns {boolean}
*/
isSingle = () => this.props.selectedBetType === Constants.BET_TYPE.SINGLE;
/**
* Check is NO_BET type
*
* @function
* @returns {boolean}
*/
isNobet = () => (this.props.selectedBetType === Constants.BET_TYPE.NO_BET);
/**
* Check is Free bets tab selected
*
* @function
* @returns {boolean}
*/
isFreeBet = () => this.props.selectedBetType === Constants.BET_TYPE.FREEBET;
/**
* Render content
*
* @function
* @returns {view}
*/
renderContent = () => {
const selectedType = this.props.selectedBetType;
if (this.props.betSlipConfimation === true) {
return this.props.gameType === GAME_TYPE.TURBO
? this.renderTurboBetSlipConfimation()
: this.renderBetSlipConfimation();
}
switch (selectedType) {
case Constants.BET_TYPE.SINGLE:
return this.renderSingle();
case Constants.BET_TYPE.MULTIPLE:
return this.renderMultiple();
case Constants.BET_TYPE.COMBINATION:
return this.renderCombinations();
case Constants.BET_TYPE.SPLIT_COLUMN:
return this.renderSplit();
case Constants.BET_TYPE.FREEBET:
return this.renderFreeBet();
default:
return null;
}
};
/**
* MULTIPLE AND OTHER ARE DISABLED IF IS SINGLE BET
* MULTIPLE IS DISABLED IF IS SPLIT COLUMN
* IF IS MULTIPLE YOU CAN CHOSE COMBINATION
* FREE BET IS DESABLED ON SPLIT COLUMN
* Render
*
* @returns {view}
*/
render() {
const selectedTypeStatus = this.isSingle() || this.isNobet();
return (
<div className="betslip">
{this.shouldCap(this.props.potWin, this.props.winCap) && this.renderWinCapAlert()}
{!this.isSingle() && !this.isNobet() && this.renderChoosenSelection()}
<div className={`betslip__wrap ${this.isSingle() || this.isNobet() ? 'bt-green' : 'r-4'}`}>
<div className="betslip__heading">
<span>{this.props.selectedBetType}</span>
{this.isSingle() && this.renderRemoveAll()}
{selectedTypeStatus && this.renderCloseBetslip()}
</div>
{this.renderContent()}
</div>
<div className="betslip__controls">
{this.props.placeBetErrorMgs ? this.renderErrorMessage() : this.renderChips()}
{this.renderPlacebetContent(this.props.winCap)}
{this.renderBottomNav()}
</div>
<div className="betslip-mask" onClick={this.props.toggleBetslip} />
</div>
);
}
}
export default BetslipView;