containers/Reports/TurnoverReports.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { getCurrency, hasRecord, getFilterData, getSelectedTimezone, checkPermisson } from '../../selectors/common';
import Filter from '../../components/Filter';
import { getTurnover } from '../../selectors/reports';
import TurnoverReportTable from '../../components/MenuItems/Reports/TurnoverReportTable';
import { aGetTurnoverReports } from '../../reducers/reports';
import { aClearFilterData } from '../../reducers/cashier';
import { aSetFilters } from '../../reducers/common';
import { PERMISSIONS } from '../../constants';

const mapToProps = (state) => ({
  checkPermisson: (payload) => checkPermisson(state, payload),
  currency: getCurrency(state),
  turnover: getTurnover(state),
  hasRecord: hasRecord(state),
  filters: getFilterData(state),
  selectedTimezone: getSelectedTimezone(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getReports: (payload) => dispatch(aGetTurnoverReports(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.currency Currency sign
 * @property {Array} props.turnover All turnover data
 * @property {Function} props.setFilterData Filter rounds
 * @property {Function} props.getReports Get reports API
 * @property {object} props.filters Filters data
 * @property {Function} props.clearFilterData Clear Filter Data
 */
class TurnoverReports extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        text: 'Date Interval',
        fields: ['startDate', 'endDate'],
        dateInterval: true,
      },
    ];
    /**
     * @member {object}
     */
    this.defaultFilter = {
      startDate: '',
      endDate: '',
    };

    /**
     * @member
     */
    this.filters = props.filters ? { ...props.filters } : this.defaultFilter;

    /**
     * @member {boolean}
     */
    this.initialApiCall = !!props.filters;
  }

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getReports}
          filters={this.filters}
          defaultFilter={{ ...this.filters }}
          filtersProps={this.props.filters}
          initialApiCall={this.initialApiCall}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
          dateFilterFields={this.filterFields[0]?.fields}
          restrictSearchTo3Months
        />
        <TurnoverReportTable
          turnover={this.props.turnover}
          currency={this.props.currency}
          hasRecord={this.props.hasRecord}
          tableTitle="Stadium online"
          isMobile
        />
        {this.props.checkPermisson(PERMISSIONS.SHOP_TURNOVER_REPORT_VIEW) && (
          <TurnoverReportTable
            turnover={this.props.turnover}
            currency={this.props.currency}
            hasRecord={this.props.hasRecord}
            tableTitle="League plus"
            isShop
          />
        )}

        <TurnoverReportTable
          turnover={this.props.turnover}
          currency={this.props.currency}
          hasRecord={this.props.hasRecord}
          tableTitle="Grand Total"
          isGrandTotal
        />
        <TurnoverReportTable
          turnover={this.props.turnover}
          currency={this.props.currency}
          hasRecord={this.props.hasRecord}
          tableTitle="Cashed Out Bets"
          isCashout
        />
      </div>
    );
  }
}

export default connect(mapToProps, actionsToProps)(TurnoverReports);