/**
* @module Tickets/TicketDetails
*/
import React, { Component } from 'react';
import Constants, { SVG_ICONS } from '../../constants';
import SVGComponent from '../SVG/SVGComponent';
import { handleType, isCombi, getTicketOdds } from '../../utils/common';
import { SystemSplitManager, SystemMatches } from '../../utils/systemManager';
import { parseNum, getCountryDateTime, parseBigNums } from '../../utils/parser';
/**
* @typedef {object} props
* @property {number} bonusPercentages
* @property {number} winCap
* @property {string} bonusOddsThreshold
* @property {Array} leagues
* @property {object} selectedTicket
* @property {Function} changePage
*/
export default class TicketDetails extends Component {
/**
* Calculate number of combinations
*
* @function
* @param {object} ticket
* @returns {SysyemMenager}
*/
getSystemManager = (ticket) => {
const odds = parseInt(ticket.type) === Constants.BET_TYPE_VALUES.SPLIT_COLUMN
? SystemMatches(ticket.bets).oddsPerMatch
: ticket.bets.map((t) => t.odd);
return SystemSplitManager(
odds,
this.props.bonusPercentages,
this.props.bonusOddsThreshold,
parseInt(ticket.type) === Constants.BET_TYPE_VALUES.SPLIT_COLUMN,
this.props.winCap,
);
}
/**
* Render ticket selection view
*
* @function
* @param {object} ticket
* @returns {view}
*/
renderBetSelections = (ticket) => {
const isSingle = parseInt(ticket.type) === Constants.BET_TYPE_VALUES.SINGLE;
return (
<div className="bets-result">
<div className="bets-result__heading">Selections</div>
<div className="bets-result__row heading">
<div className="bets-result__teams">Match</div>
<div className="bets-result__selection">Selection</div>
<div className="bets-result__odds">Odds</div>
<div className="bets-result__score">Results</div>
<div className="bets-result__tiles">Status</div>
</div>
{ticket.bets.map((bet, i) => {
const league = this.props.leagues.find((l) => parseInt(l.id) === parseInt(bet.league));
const stake = ticket.combinations[i + 1];
const winning = stake && ticket.winningData[i + 1];
return (
((isSingle && stake) || !isSingle)
&& (
// eslint-disable-next-line react/no-array-index-key
<div key={i}>
<div className="bets-result__row">
<div className="bets-result__teams">
<SVGComponent
className="bets-result__teams-flag mr-3"
src={`${SVG_ICONS.flags}#${league.flag}`}
/>
<span className="bets-result__teams-name">{bet.match}</span>
</div>
<div className="bets-result__label">{bet.selection.fullName}</div>
<div className="bets-result__odds">{bet.odd}</div>
<div className="bets-result__score">{parseInt(ticket.status) !== 0 ? bet.score : '-'}</div>
<div className="bets-result__tiles">
{parseInt(ticket.status) === 0
? <div className="loading-dots" />
: bet.status > 0
? (
<SVGComponent
className="bets-result__icon__tick"
src={`${SVG_ICONS.utility}#icon__tick`}
/>
)
: (
<SVGComponent
className="bets-result__icon-cancel"
src={`${SVG_ICONS.utility}#cancel`}
/>
)}
</div>
</div>
{isSingle
&& (
<div className="bets-result__row bg-lg">
<div className="bets-result__cell txt-gray">Stake</div>
<div className="bets-result__cell">{`${parseNum(stake)} ${this.props.currencySymbol}`}</div>
<div className="bets-result__cell txt-gray">Winnings</div>
<div className="bets-result__cell">{winning ? `${parseNum(winning)} ${this.props.currencySymbol}` : '-'}</div>
</div>
)}
</div>
)
);
})}
</div>
);
}
/**
* Render ticket combinations view
*
* @function
* @param {object} ticket
* @returns {view}
*/
renderBetCombinations = (ticket) => {
const systemManager = this.getSystemManager(ticket);
const voidStatus = [3, -3, 4];
return (
<div className="bets-odds">
<div className="bets-odds__heading">Combinations</div>
<div className="bets-odds__row">
<div className="bets-odds__bet">Bet</div>
<div className="bets-odds__stake">Stake</div>
<div className="bets-odds__win">Winning</div>
<div className="bets-odds__tile">Status</div>
</div>
<div className="bets-odds__content">
{Object.keys(ticket.combinations).map((type, i) => {
const stake = ticket.combinations[type];
const num = parseInt(ticket.type) === Constants.BET_TYPE_VALUES.SPLIT_COLUMN
? systemManager.NUM
: systemManager[type].NUM;
const winStatus = ticket.winningData[type] !== undefined
? parseInt(ticket.winningData[type]) > 0 ? 1 : -1
: null;
return (
// eslint-disable-next-line react/no-array-index-key
<div className="bets-odds__row" key={i}>
<div className="bets-odds__bet">
{Constants.DIGITS[type - 1]}
{' '}
(
{num}
)
</div>
<div className="bets-odds__stake">{`${parseNum(stake)} ${this.props.currencySymbol}`}</div>
<div className="bets-odds__win">
{ticket.winningData[type] ? `${parseNum(ticket.winningData[type])} ${this.props.currencySymbol}` : '-'}
</div>
<div className="bets-odds__tile">
{winStatus
? voidStatus.indexOf(parseInt(ticket.status)) === -1 ? (
<div className={`tile ${parseInt(ticket.winningData[type]) > 0 ? 'c-green' : 'c-gray'}`}>
{Constants.TICKET_CLASS_STATUS[winStatus]}
</div>
) : (
<div className="tile c-blue">
{Constants.TICKET_CLASS_STATUS['-3']}
</div>
)
: <div className="loading-dots" />}
</div>
</div>
);
})}
</div>
</div>
);
}
/**
* Render
*
* @returns {view}
*/
render() {
const ticket = this.props.selectedTicket;
const parsedDate = getCountryDateTime(ticket.placed);
const ticketDateTime = `${parsedDate.date} ${parsedDate.time}:${parsedDate.seconds}`;
return (
<>
<div className="bet__heading">
<span>Bet Details</span>
<div
className="bet__heading-back"
onClick={() => this.props.changePage({ page: Constants.PAGES.TICKETS })}
>
<SVGComponent
className="icon-s icon-back"
src={`${SVG_ICONS.utility}#icon__arrow-down`}
/>
<div className="ml-3">BACK</div>
</div>
</div>
<div className="scroll-area" id="scroll-area">
<div>
<div className="bet-details">
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Bet Date</div>
</div>
<div className="bet-details__row-date">{ticketDateTime}</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Bet ID</div>
</div>
<div className="bet-details__row-id">{ticket.id}</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Round ID</div>
</div>
<div className="bet-details__row-id">{ticket.round}</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Total Stake</div>
</div>
<div className="bet-details__row-stake">{`${parseNum(ticket.stake)} ${this.props.currencySymbol}`}</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Odds</div>
</div>
<div className="bet-details__row-odd">{parseBigNums(getTicketOdds(ticket))}</div>
</div>
{ticket.win
? (
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Total Win Amount</div>
</div>
<div className="bet-details__row-amount txt-g" id="BetHistoryAmountWon">
{`${parseNum(ticket.win)} ${this.props.currencySymbol}`}
</div>
</div>
)
: null}
{ticket.potwin
? (
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Potential Win</div>
</div>
<div className="bet-details__row-amount txt-g">{`${parseNum(ticket.potwin)} ${this.props.currencySymbol}`}</div>
</div>
)
: null}
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Game</div>
</div>
<div className="bet-details__row-game">{ticket.game}</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
{
ticket.bonus
? <div className="tile mr-3 c-yellow">B</div>
: <div className="tile mr-3" />
/* spacer */
}
<div>Bet Type</div>
</div>
<div className="bet-details__row-bet">
{handleType(ticket)}
</div>
</div>
</div>
<div className="bet-details__row">
<div className="bet-details__row-item">
<div className="tile mr-3" />
{/* spacer */}
<div>Status</div>
</div>
<div className="bet-details__row-status">
{ticket.status !== 0
? (
<div className={`tile mr-3 ${Constants.TICKET_STATUS_COLOR[ticket.status]}`}>
{Constants.TICKET_CLASS_STATUS[ticket.status]}
</div>
)
: <div className="loading-dots" />}
</div>
</div>
{this.renderBetSelections(ticket)}
{(isCombi(ticket.type))
&& this.renderBetCombinations(ticket)}
</div>
</div>
</>
);
}
}