components/Account/MyAccountWrap.js

/**
 * @module Account/MyAccountWrap
 */
import React, { Component } from 'react';

import Constants, { GET_USER_BALANCE_SECONDS_ALLOWANCE } from '../../constants';
/**
 * @typedef {object} props
 * @property {object} user
 * @property {boolean} isAccountOpen
 * @property {number} totalBetCount
 * @property {string} gameType
 * @property {Function} changePage
 * @property {Function} toggleAccount
 * @property {Function} getBalanceAndBonus
 * @property {Function} logout
 * @property {Function} goToMyAccountMenu
 * @property {Date} lastReqBalanceDateTime
 */
export default class MyAccountWrap extends Component {
  constructor() {
    super();
    this.fisrtTimeGetBalanceAndBonus = true;
  }

  /**
   * Redirect to DEPOSIT page
   *
   * @function
   * @returns {void}
   */
  goToDeposit = () => {
    this.props.goToMyAccountMenu({ destination: Constants.ACCOUNT_MENU_ITEMS.DEPOSIT });
    this.props.toggleAccount();
  }

  /**
   * Redirect to CASHIER page
   *
   * @function
   * @returns {void}
   */
  goToCashier = () => {
    this.props.goToMyAccountMenu({ destination: Constants.ACCOUNT_MENU_ITEMS.CASHIER });
    this.props.toggleAccount();
  }

  /**
   * Redirect to MY ACCOUNT MENU page
   *
   * @function
   * @returns {void}
   */
  goToMyAccountMenu = () => {
    this.props.goToMyAccountMenu({ destination: Constants.ACCOUNT_MENU_ITEMS.MY_ACCOUNT });
    this.props.toggleAccount();
  }

  /**
   * Redirect to TICKETS page
   *
   * @function
   * @returns {void}
   */
  goMyBets = () => {
    this.props.changePage({ page: Constants.PAGES.TICKETS });
    this.props.toggleAccount();
  }

  /**
   * Logout user
   *
   * @function
   * @returns {void}
   */
  logout = () => {
    this.props.toggleAccount();
    this.props.logout({ gameType: this.props.gameType });
  }

  /**
   * allow user to get balance amount only one time in 30 seconds
   *
   * @function
   * @returns {void}
   */
  getBalanceAndBonus = () => {
    const lastReqDate = this.props.lastReqBalanceDateTime
      ? this.props.lastReqBalanceDateTime.date : 0;
    const diff = lastReqDate > 0
      ? (new Date().getTime() - new Date(lastReqDate).getTime()) / 1000
      : 0;
    if (this.fisrtTimeGetBalanceAndBonus
      || (!this.props.isBalanceLoading && diff > GET_USER_BALANCE_SECONDS_ALLOWANCE)) {
      this.props.getBalanceAndBonus();
      this.fisrtTimeGetBalanceAndBonus = false;
    }
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className={`myacc-s__wrap ${this.props.isAccountOpen ? 'open' : ''}`}>
        <div className="myacc-ddmenu-s">
          <div className="myacc-ddmenu-s__balance ">
            <div className="myacc-ddmenu-s__balance-element">
              <div className="myacc-ddmenu-s__balance-refresh" onClick={this.getBalanceAndBonus} />
              <div className="myacc-ddmenu-s__balance-hold">
                <div className="myacc-ddmenu-s__balance-head"> Withdrawable </div>
                <div className="myacc-ddmenu-s__balance-amount">
                  {this.props.user && `${this.props.user.balance.amount} ${this.props.currencySymbol}`}
                </div>
              </div>
            </div>
            <div className="myacc-ddmenu-s__balance-element justify-content-between">
              <div className="myacc-ddmenu-s__balance-bonus">
                <div className="myacc-ddmenu-s__balance-head"> Bonus </div>
                <div className="myacc-ddmenu-s__balance-amount txt-y">
                  {this.props.user && this.props.user.balance.bonusAmount}
                </div>
              </div>
              <div className="myacc-ddmenu-s__balance-deposit" onClick={this.goToDeposit}> Deposit </div>
            </div>
          </div>
          <table className="myacc-ddmenu-s-table">
            <tbody>
              <tr>
                <td className="myacc-ddmenu-s-table__td n-bl n-br" onClick={this.goToMyAccountMenu}>
                  My Account
                </td>
                <td
                  className="myacc-ddmenu-s-table__td n-br"
                  onClick={this.goMyBets}
                >
                  <div className="myacc-ddmenu-s-table__td-txt">
                    My Bets
                    {this.props.totalBetCount ? (
                      <span className="myacc-ddmenu-s-table__notifs">
                        {this.props.totalBetCount}
                      </span>
                    ) : ''}
                  </div>
                </td>
              </tr>
              <tr>
                <td className="myacc-ddmenu-s-table__td n-bl n-br" onClick={this.goToCashier}> Cashier </td>
                <td
                  className="myacc-ddmenu-s-table__td n-br"
                  onClick={this.logout}
                >
                  Logout
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="myacc-ddmenu-s-user">
          <div className="myacc-ddmenu-s-user__wrap">
            <div>
              <div className="myacc-ddmenu-s-user__head mb-1"> Account ID: </div>
              <div className="myacc-ddmenu-s-user__val mb-4">
                {this.props.user && this.props.user.id}
              </div>
              <div className="myacc-ddmenu-s-user__head mb-1"> Username: </div>
              <div className="myacc-ddmenu-s-user__val">
                {this.props.user && this.props.user.username}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}