components/PushMenu.js

/**
 * @module PushMenu
 */
import React, { Component } from 'react';
import Constants, { SVG_ICONS, GAME_TYPE } from '../constants';
import SVGComponent from './SVG/SVGComponent';
/**
 * @typedef {object} props
 * @property {Array} haveLiveMatches
 * @property {object} numberOfSelections
 * @property {object} user
 * @property {Array} leagues
 * @property {object} destinations
 * @property {Function} toggleBetslip
 * @property {Function} setSelectedLeague
 * @property {Function} togglePM
 * @property {Function} changePage
 * @property {Function} goToMyAccountMenu
 */
export default class PushMenu extends Component {
  constructor() {
    super();
    /**
     * @member {object}
     * @property {boolean} collapseLeagues Indicate is all leagues collapsed/expanded
     */
    this.state = {
      collapseLeagues: false,
    };
  }

  /**
   * Toggle collapse/expand all leagues selection
   *
   * @function
   * @returns {void}
   */
  toggleLeagueSelection = () => {
    this.setState({
      collapseLeagues: !this.state.collapseLeagues,
    });
  }

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <nav className="pml">
        <div className="pml__wrap">
          <div className="pml__nav">
            <span className="pml__nav-title" />
            <span className="pml__nav-icon" onClick={this.props.togglePM}>
              <SVGComponent
                className="icon-xl"
                src={`${SVG_ICONS.utility}#icon__close`}
              />
            </span>
          </div>
          <div className="pml__logo" />
          <div className="pml__scrollable flex-grow-1">
            {this.props.user && (
              <div className="deposit">
                <div className="deposit__head">
                  <div>Account ID</div>
                  <div>{this.props.user.id}</div>
                </div>
                <div className="deposit__row">
                  <div>Withdrawable Balance</div>
                  <div className="txt-cut pl-5">{`${this.props.user.balance.amount} ${this.props.currencySymbol}`}</div>
                </div>
                <div className="deposit__row">
                  <div>Balance</div>
                  <div className="txt-cut pl-5">{`${this.props.user.balance.amount} ${this.props.currencySymbol}`}</div>
                </div>
                <div className="deposit__btn" onClick={this.goToDeposit}>Make deposit</div>
              </div>
            )}
            <div className="accordion-menu" ref={(rr) => { this.scrollableArea = rr; }}>
              <div className="accordion-box " onClick={this.toggleLeagueSelection}>
                <div
                  data-toggle="collapse"
                  href="#accordion-content"
                  role="button"
                  className={`accordion-toggle collapsible ${this.state.collapseLeagues ? 'collapsed' : ''} `}
                >
                  <SVGComponent
                    className="icon-xl mr10"
                    src={`${SVG_ICONS.navbar}#league-select`}
                  />
                  <span>League Select</span>
                </div>
                <div
                  id="accordion-content"
                  className={`collapse ${this.state.collapseLeagues ? 'show' : ''} `}
                >
                  <div className="access-links__title">Stadium</div>
                  <div className="access-links">
                    <div className="access-links__wrap">
                      {this.props.leagues.map((league, index) => (
                        league.enabled ? (
                          <div
                            className="access-links__element"
                            key={`pm-virtual-${league.id}`}
                            onClick={this.props.setSelectedLeague.bind(this,
                              { league, type: GAME_TYPE.CLASSIC, index })}
                          >
                            <span className={`access-links--item ${this.props.gameType === GAME_TYPE.CLASSIC && this.props.selectedLeagueIndex === index ? 'active' : ''}`}>
                              <i className={`${league.flag}_flag`} />
                              <span>
                                {league.name}
                              </span>
                            </span>
                          </div>
                        ) : (null)
                      ))}
                    </div>
                    {this.props.user
                      && this.props.user.turboEnabled && (<div className="access-links__title">Stadium Turbo</div>)}
                    <div className="access-links__wrap">
                      {this.props.user
                        && this.props.user.turboEnabled
                        && this.props.leagues.map((league, index) => (
                          league.enabled ? (
                            <div
                              className="access-links__element"
                              key={`pm-turbo-${league.id}`}
                              onClick={this.props.setSelectedLeague.bind(this,
                                { league, type: GAME_TYPE.TURBO, index })}
                            >
                              <span className={`access-links--item ${this.props.gameType === GAME_TYPE.TURBO && this.props.selectedLeagueIndex === index ? 'active' : ''}`}>
                                <i className={`${league.flag}-turbo_flag`} />
                                <span>
                                  {league.name}
                                  {' '}
                                  Turbo
                                </span>
                              </span>
                            </div>
                          ) : (null)
                        ))}
                    </div>
                  </div>
                </div>
              </div>
              <div className="accordion-box">
                <a className="accordion-toggle" href={this.props.destinations.home}>
                  <SVGComponent
                    className="icon-xl mr10"
                    src={`${SVG_ICONS.navbar}#home-nav`}
                  />
                  <span>Mobile Home</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    );
  }
}