containers/Jackpot/JackpotWon/index.js

import React, { Component } from 'react';

import { connect } from 'react-redux';

import {
  getSelectedMenuItem,
  getFilterData,
  isFetched,
  isLastRecord,
  getSelectedTimezone,
  checkPermisson,
} from '../../../selectors/common';
import Filter from '../../../components/Filter';

import { setFilterFromUrl } from '../../../utils/common';
import ScrollTable from '../../../components/ScrollTable';
import JackpotWonTable from './JackpotWonTable';
import { getJackpotStatuses, getJackpotTypes } from '../../../selectors/jackpot';
import { PERMISSIONS } from '../../../constants';
import { aClearFilterData } from '../../../reducers/cashier';
import { aSetFilters } from '../../../reducers/common';
import { aSetSelectedCoupon } from '../../../reducers/coupons';
import {
  aGetJackpotWon,
  aGetPlacedCoupons,
  aGetPlacedCouponsShop,
  aGetSettledCoupons,
  aGetSettledCouponsShop,
} from '../../../reducers/actions';
import { withRouterHooks } from '../../../utils/router';

const mapToProps = (state) => ({
  selectedMenuItem: getSelectedMenuItem(state),
  filters: getFilterData(state),
  isFetched: isFetched(state),
  isLastRecord: isLastRecord(state),
  selectedTimezone: getSelectedTimezone(state),

  jackpotTypes: getJackpotTypes(state),
  jackpotStatus: getJackpotStatuses(state),
  checkPermisson: (payload) => checkPermisson(state, payload),
});

const actionsToProps = (dispatch) => ({
  setFilterData: (payload) => dispatch(aSetFilters(payload)),
  getPlacedCoupons: (payload) => dispatch(aGetPlacedCoupons(payload)),
  getPlacedCouponsShop: (payload) => dispatch(aGetPlacedCouponsShop(payload)),
  getSettledCoupons: (payload) => dispatch(aGetSettledCoupons(payload)),
  getSettledCouponsShop: (payload) => dispatch(aGetSettledCouponsShop(payload)),
  selectCoupon: (payload) => dispatch(aSetSelectedCoupon(payload)),
  clearFilterData: (payload) => dispatch(aClearFilterData(payload)),
  getJackpots: (payload) => dispatch(aGetJackpotWon(payload)),
});

/**
 * @class
 * @property {object} props
 */

class JackpotWon extends Component {
  constructor(props) {
    super(props);
    /**
     * @member {Array}
     * @description Filtering fields settings
     */
    this.filterFields = [
      {
        className: 'user__username',
        text: 'Coupon ID',
        field: 'couponId',
      },
      {
        text: 'Jackpot Type',
        field: 'jackpotType',
        dropdown: props.jackpotTypes,
      },
      {
        text: 'Jackpot Date',
        fields: ['startJackpotAssignationDate', 'endJackpotAssignationDate'],
        dateInterval: true,
      },
      {
        text: 'Cashier ID',
        field: 'cashierId',
      },
      {
        text: 'Agent ID',
        field: 'agentId',
      },
      {
        text: 'Status',
        field: 'statusId',
        dropdown: props.jackpotStatus,
      },
    ];

    /**
     * @member {object}
     */
    this.defaultFilter = {
      startJackpotAssignationDate: '',
      endJackpotAssignationDate: '',
      couponId: '',
      cashierId: '',
      agentId: '',
      statusId: '',
    };

    /**
     * @member {object}
     */
    this.filters = props.filters
      ? {
          ...props.filters,
          startJackpotAssignationDate: setFilterFromUrl(this.props.location.search, 'startJackpotAssignationDate'),
          endJackpotAssignationDate: setFilterFromUrl(this.props.location.search, 'endJackpotAssignationDate'),
        }
      : this.defaultFilter;

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

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

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

  /**
   * Render
   *
   * @returns {view}
   */
  render() {
    return (
      <div className="user">
        <Filter
          filterFields={this.filterFields}
          info
          setFilterData={this.props.setFilterData}
          search={this.props.getJackpots}
          selectedMenuItem={this.props.selectedMenuItem}
          filters={this.filters}
          defaultFilter={this.defaultFilter}
          initialApiCall
          filtersProps={this.props.filters}
          clearFilterData={this.props.clearFilterData}
          selectedTimezone={this.props.selectedTimezone}
          dateFilterFields={this.filterFields[2]?.fields}
        />
        <span className="error-txt">
          NOTE: Starting from 24/10/2024 00:00 (Nigeria time) the jackpots will have a new management, they will be
          inserted in the feeds only once Paid.
        </span>
        <ScrollTable loadMore={this.loadMore} isFetched={this.props.isFetched} isLastRecord={this.props.isLastRecord}>
          <JackpotWonTable
            statusEditPermission={this.statusEditPermission}
            paymentInvokerPermission={this.paymentInvokerPermission}
          />
        </ScrollTable>
      </div>
    );
  }
}

export default connect(mapToProps, actionsToProps)(withRouterHooks(JackpotWon));