containers/Bonus/FreeBets.js

/* eslint-disable sonarjs/no-duplicate-string */
import React, { Component } from 'react';
import { connect } from 'react-redux';

import {
  getCurrency,
  checkPermisson,
  getActiveModal,
  getModalData,
  isFetched,
  getFilterData,
  isLastRecord,
  hasRecord,
  getSelectedTimezone,
} from '../../selectors/common';
import { getFreeBetStatuses, getFreeBets } from '../../selectors/bonus';
import Filter from '../../components/Filter';
import FreeBetsTable from '../../components/MenuItems/Bonus/FreeBetsTable';
import { PERMISSIONS, MODALS, CONFIRM_MODAL_CONTENT } from '../../constants';
import AddFreeBet from '../../components/MenuItems/Bonus/AddFreeBet';
import ConfirmationModal from '../../components/Modals/ConfirmationModal';
import ScrollTable from '../../components/ScrollTable';
import { aClearFilterData } from '../../reducers/cashier';
import { aSetFilters, aSetOpenModal, aShowFilteredRound } from '../../reducers/common';
import { aAddFreeBets, aDeleteFreeBets, aGetFreeBets } from '../../reducers/actions';
import { getGameStatuses } from '../../selectors/coupons';

const mapToProps = (state) => ({
  currency: getCurrency(state),
  freeBetStatuses: getFreeBetStatuses(state),
  freeBets: getFreeBets(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
  activeModal: getActiveModal(state),
  modalData: getModalData(state),
  gameStatuses: getGameStatuses(state),
  isFetched: isFetched(state),
  filters: getFilterData(state),
  isLastRecord: isLastRecord(state),
  hasRecord: hasRecord(state),
  selectedTimezone: getSelectedTimezone(state),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getFreeBets: (payload) => dispatch(aGetFreeBets(payload)),
  deleteFreeBet: (payload) => dispatch(aDeleteFreeBets(payload)),
  setOpenModal: (payload) => dispatch(aSetOpenModal(payload)),
  addFreeBet: (payload) => dispatch(aAddFreeBets(payload)),
  showFilteredRound: (payload) => dispatch(aShowFilteredRound(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
});

/**
 * @class
 * @property {object} props
 * @property {Array} props.currency Currency Sign
 * @property {Array} props.freeBetStatuses All statuses for bonus
 * @property {Array} props.freeBets All Free Bets for bonus
 * @property {boolean} props.checkPermisson Check if User has permission to add or delete
 * @property {string} props.activeModal Indicate active modal
 * @property {object} props.modalData Modal data
 * @property {boolean} props.isFetched Is API fetched
 * @property {Array} props.filters Filters data
 * @property {Function} props.setFilterData Filter Free Bets
 * @property {Function} props.getFreeBets Call API for Free Bets
 * @property {Function} props.deleteFreeBet Call API to delete free bet
 * @property {Function} props.setOpenModal Open modal
 * @property {Function} props.addFreeBet Call API to add new bet
 * @property {Function} props.clearFilterData Clear Filter Data
 */
class FreeBets extends Component {
  constructor(props) {
    super(props);

    /**
     * @member {object}
     * @property {string} selectedFreeBetId
     */
    this.state = {
      selectedFreeBetId: '',
    };

    /**
     * @member {Array}
     * @description Filtering Fields Settings
     */
    this.filterFields = [
      {
        text: 'ID',
        field: 'filter.id',
      },
      {
        text: 'Client ID',
        field: 'filter.userId',
      },
      {
        text: 'Status',
        field: 'filter.status',
        dropdown: props.freeBetStatuses,
      },
      {
        text: 'Assignment Date',
        fields: ['filter.startAssignmentDate', 'filter.endAssignmentDate'],
        dateInterval: true,
      },
      {
        text: 'Assigner User',
        field: 'filter.assigner',
      },
      {
        text: 'Coupon ID',
        field: 'filter.couponId',
      },
    ];

    /**
     * @member {Array}
     * @description Filters that are not mandatory
     */
    this.notMandatoryFilters = ['filter.assigner', 'filter.status'];

    /**
     * @member {object}
     */
    this.defaultFilter = {
      'filter.startAssignmentDate': '',
      'filter.endAssignmentDate': '',
    };
    /**
     * @member {object}
     */
    this.filters = props.filters ? { ...props.filters } : this.defaultFilter;

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

    /**
     * @member {object}
     */
    this.selectedItem = {
      2:
        props.filters && props.freeBetStatuses.find((x) => parseInt(x.id) === parseInt(props.filters['filter.status'])),
    };
    /**
     * @member {boolean}
     */
    this.add = props.checkPermisson(PERMISSIONS.FREE_BETS_ASSIGN);

    /**
     * @member {boolean}
     */
    this.cancel = props.checkPermisson(PERMISSIONS.FREE_BETS_CANCEL);
  }

  /**
   * Handle Click to delete free bet
   *
   * @function
   * @returns {void}
   */
  handleDeleteFreeBet = () => {
    this.props.deleteFreeBet({
      userId: this.state.selectedFreeBetId,
    });
  };

  /**
   * Handle Click Confirmation Delete
   *
   * @function
   * @param {string} freebetid
   * @returns {void}
   */
  handleConfirmDeleteModal = (freebetid) => {
    this.props.setOpenModal({ modal: MODALS.FREE_BETS_DELETE });
    this.setState({ selectedFreeBetId: freebetid });
  };

  /**
   * Load more free bets
   *
   * @function
   * @returns {void}
   */
  loadMore = () => {
    const filters = this.props.filters || this.filters;
    this.props.getFreeBets(filters);
  };

  /**
   * Go to Coupons Page
   *
   * @param {object} freeBet
   * @returns {void}
   */
  showCoupon = (freeBet) => {
    this.props.showFilteredRound({
      filter: { 'filter.couponId': freeBet.couponId },
    });
  };

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getFreeBets}
          filters={this.filters}
          selectedItem={this.selectedItem}
          defaultFilter={{ ...this.filters }}
          filtersProps={this.props.filters}
          initialApiCall={this.initialApiCall}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
          notMandatoryFilters={this.notMandatoryFilters}
          dateFilterFields={this.filterFields[3]?.fields}
        >
          {this.add && (
            <button
              id="addFreeBetBtn_freebets"
              type="button"
              className="btn btn-secondary"
              onClick={this.props.setOpenModal.bind(this, { modal: MODALS.FREE_BETS_ADD })}
            >
              Add free bet
            </button>
          )}
        </Filter>
        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <FreeBetsTable
            freeBets={this.props.freeBets}
            gameStatuses={this.props.gameStatuses}
            currency={this.props.currency}
            freeBetStatuses={this.props.freeBetStatuses}
            handleConfirmDeleteModal={this.handleConfirmDeleteModal}
            cancel={this.cancel}
            showCoupon={this.showCoupon}
            hasRecord={this.props.hasRecord}
            selectedTimezone={this.props.selectedTimezone}
          />
        </ScrollTable>
        {this.props.activeModal === MODALS.FREE_BETS_ADD && (
          <AddFreeBet
            setOpenModal={this.props.setOpenModal}
            addFreeBet={this.props.addFreeBet}
            currency={this.props.currency}
          />
        )}
        {this.props.activeModal === MODALS.FREE_BETS_DELETE && (
          <ConfirmationModal
            modalData={CONFIRM_MODAL_CONTENT.DELETE_FREE_BET}
            cancel={this.props.setOpenModal.bind(this, { modal: '' })}
            confirmation={this.handleDeleteFreeBet}
          />
        )}
      </div>
    );
  }
}

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