/**
* @module TopBar/BonusHeader
*/
import React, { Component } from 'react';
import SVGComponent from '../SVG/SVGComponent';
import {
parseNum,
getCountryDateTime,
getCountryDateFromUTC,
getCountryNewDate,
} from '../../utils/parser';
import { SVG_ICONS, COUNTRY_OFFSET } from '../../constants';
/**
* @typedef {object} props
* @property {object} bonus
* @property {Array} bonusLeveling
* @property {boolean} isBonusHeaderOpen
* @property {object} config
* @property {Array} freeBets
* @property {Function} toggleBonusHeader
*/
export default class BonusHeader extends Component {
constructor() {
super();
/**
* @member {object}
* @property {boolean} isInfoOpen Indicate is informations about bonus leveling is open
* @property {object} time Indicate left time untill bonus expire
*/
this.state = {
isInfoOpen: false,
time: {
h: 0,
m: 0,
s: 0,
},
};
}
/**
* Fromatting time string for expanded bonus header
*
* @function
* @returns {string} Return days hours minutes and seconds if they exists
*/
getTime = () => {
let time = '';
if (this.state.time.d > 0) {
time += `${this.state.time.d}d `;
}
if (this.state.time.h > 0) {
time += `${this.state.time.h}h `;
}
const m = this.state.time.m < 10 ? `0${this.state.time.m}` : this.state.time.m;
const s = this.state.time.s < 10 ? `0${this.state.time.s}` : this.state.time.s;
return `${time} ${m}' ${s}"`;
}
/**
* Fromatting time string for collapsed bonus header
*
* @function
* @returns {string} Return days or hours or minutes and seconds
*/
getShortTime = () => {
if (this.state.time.d > 0) {
return this.state.time.d === 1 ? `${this.state.time.d} day` : `${this.state.time.d} days`;
}
if (this.state.time.h > 0) {
return `${this.state.time.h}hr`;
}
if (this.state.time.m > 0 || this.state.time.s > 0) {
const m = this.state.time.m < 10 ? `0${this.state.time.m}` : this.state.time.m;
const s = this.state.time.s < 10 ? `0${this.state.time.s}` : this.state.time.s;
return `${m}' ${s}"`;
}
return '';
}
/**
* Toggle info for bonus leveling
*
* @function
* @returns {void}
*/
toggleInfo = () => {
this.setState({ isInfoOpen: !this.state.isInfoOpen });
}
/**
* Calculate bonus countdown time
*
* @function
* @param {Time} expirationDate
* @returns {void}
*/
calculateBonusTime = (expirationDate) => {
const countryOffset = COUNTRY_OFFSET[process.env.BUNDLE_SKIN.toUpperCase()].OFFSET;
const expDate = new Date(getCountryDateFromUTC(countryOffset, expirationDate));
const countryNow = getCountryNewDate(process.env.BUNDLE_SKIN.toUpperCase());
const diffSec = parseInt((expDate.getTime() - countryNow.getTime()) / 1000);
let d = parseInt(diffSec / (3600 * 24));
let h = parseInt((diffSec % (3600 * 24)) / 3600);
let m = parseInt((diffSec % 3600) / 60);
let s = parseInt(diffSec % 3600 % 60);
if (d <= 0 && h <= 0 && m <= 0 && h <= 0) {
d = 0; h = 0; m = 0; s = 0;
} else {
this.setState({
time: {
d, h, m, s,
},
});
}
}
/**
* Toggle bonus header and close bonus info
*
* @function
* @returns {void}
*/
toggleBonusHeader = () => {
this.props.toggleBonusHeader();
this.setState({ isInfoOpen: false });
}
/**
* Render bonus info
*
* @function
* @returns {view}
*/
renderBonusInfo = () => (
<div className={`c-bonus__info collapse ${this.state.isInfoOpen ? 'show' : ''}`}>
<div className="c-bonus__info-wrap">
<h3>BONUS INFORMATION</h3>
<div className="c-bonus__ranks">
<div className="c-bonus__ranks-info">
The first level of our Bonus is "Star" and proceeding in the levels
you will get to the "Bronze" bonus and so on up to the Diamond level.
If you finish Diamond level, you will start it again.
</div>
<div className="c-bonus__ranks-table">
{this.props.bonusLeveling.map((l) => (
<div className="ranks-row" key={l.name}>
<div className="ranks-item">
<i className={`gem${l.name.toLowerCase()}`} />
<span>{l.name}</span>
</div>
<div className="ranks-item">
<span>
{parseNum(l.amount)}
{' '}
{this.props.config.currencySymbol}
</span>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)
/**
* Render free bets
*
* @function
* @returns {view}
*/
renderFreeBets = () => {
const freeBets = [];
this.props.freeBets.map((bet) => {
if (freeBets.findIndex((b) => (
b.stake === bet.stake && b.expirationDate === bet.expirationDate)) === -1) {
const duplicates = this.props.freeBets.filter((b) => b.expirationDate === bet.expirationDate
&& b.stake === bet.stake);
// eslint-disable-next-line no-param-reassign
bet.numOfSameBet = duplicates.length;
freeBets.push(bet);
}
});
return (
<div className="c-bonus__gift">
<div className="box-left">
<h3>FREE BETS</h3>
<div className="c-bonus__gift-txt mt-3">
Free bets are awarded from time to time.
To use the free bets choose the proper section
in the betslip when you place a bet.
</div>
</div>
<div className="box-right">
<div className="c-bonus__gift-free-bet">
<h3>Bets available</h3>
<div className="c-bonus__gift-icon">
<SVGComponent
className="icon-xl"
src={`${SVG_ICONS.utility}#icon__giftbox-w`}
/>
<span className="icon--giftbox-value">
{this.props.freeBets.length}
</span>
</div>
</div>
<div className="c-bonus__bets mt-3">
{freeBets.map((freeBet, i) => {
const parsedDate = getCountryDateTime(freeBet.expirationDate);
const expirationDate = `${parsedDate.date} ${parsedDate.time}:${parsedDate.seconds}`;
return (
// eslint-disable-next-line react/no-array-index-key
<div className="mt-3" key={i}>
<strong>
{freeBet.numOfSameBet}
{' '}
bet
{' '}
</strong>
with Amount:
<strong>
{` ${parseNum(freeBet.stake)} ${this.props.config.currencySymbol}`}
</strong>
,
<div>
Expiry Date:
{' '}
{expirationDate}
</div>
</div>
);
})}
</div>
</div>
</div>
);
}
/**
* Render bonus expanded
*
* @function
* @param {object} bonus
* @param {string} time
* @returns {view}
*/
renderBonusContext = (bonus, time) => (
<div className="c-bonus__main">
<div className="c-bonus__main-intro">
<div className="text-left">BONUS</div>
<div className="text-center">{bonus.bonusName}</div>
<div className="text-right">{time}</div>
</div>
<div className="c-bonus__progress">
<div className="c-bonus__progress-amount text-center">
{bonus.bonusAmount}
{' '}
{this.props.config.currencySymbol}
</div>
<div className="c-bonus__progress-bar">
<div className="c-bonus__progress-fill" style={{ width: `${bonus.completionPercentage}%` }}>
<div className="c-bonus__progress-percent">
{bonus.completionPercentage}
%
</div>
</div>
</div>
</div>
<div className="c-bonus__help">
<div className="c-bonus__help-text">
Each ticket you place in the above time gets you closer
to your free bonus. Once you claim your bonus your level
moves up and your bonus gets higher.
</div>
<div
className="c-bonus__help-icon"
onClick={this.toggleInfo}
data-toggle="collapse"
data-target="#c-bonus__info"
role="button"
>
<SVGComponent
className="icon-l"
src={`${SVG_ICONS.utility}#icon__info`}
/>
</div>
</div>
</div>
)
/**
* Render
*
* @returns {view}
*/
render() {
const bonus = this.props.bonus;
const time = bonus.active
? this.getTime()
: bonus.maxBonusDuration;
const shortTime = bonus.active
? this.getShortTime()
: bonus.maxBonusDuration;
return (
<>
<div
className={`content-bonus ${!this.props.isBonusHeaderOpen ? 'collapsed' : ''}`}
data-toggle="collapse"
data-target="#c-bonus"
role="button"
onClick={this.toggleBonusHeader}
>
<div className="l-bar__bonus">
<div className="l-bar__bonus-item">
<div className="cell-1">
<h4>
{bonus.bonusAmount}
{' '}
{this.props.config.currencySymbol}
</h4>
</div>
<div className="cell-2">
<div className="icon--giftbox">
<SVGComponent
className="icon-l"
src={`${SVG_ICONS.utility}#icon__giftbox`}
/>
<span className="icon--giftbox-value">
{this.props.freeBets.length}
</span>
</div>
</div>
</div>
<div className="l-bar__bonus-item">
<div className="cell-1">
<h4>{shortTime}</h4>
</div>
<div className="cell-2">
<h4>
{bonus.completionPercentage}
%
</h4>
</div>
</div>
</div>
<div className="bonus-caret">
<SVGComponent
className="icon-m"
src={`${SVG_ICONS.utility}#icon__arrow`}
/>
</div>
</div>
<div
className={`c-bonus collapse ${this.props.isBonusHeaderOpen ? 'show' : ''}`}
id="c-bonus"
data-parent="#market"
>
{this.renderBonusContext(bonus, time)}
{this.renderBonusInfo()}
{this.props.freeBets.length > 0 ? (
this.renderFreeBets()
) : null}
</div>
</>
);
}
}