components/MenuItems/Bonus/FreeBetsTable.js

import React from 'react';
import { Link } from 'react-router-dom';

import { getCountryDateTime, parseAmount } from '../../../utils/common';
import TableNoResult from '../../TableNoResult';
import { PAGES } from '../../../constants';
/**
 * @module MI-Bonus/FreeBetsTable
 */
/**
 * @typedef {object} props
 * @property {Array} freeBets
 * @property {Array} freeBetStatuses
 * @property {Array} currency
 */
/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const FreeBetsTable = (props) => (
  <>
    <table className="table-style table-s" id="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Client ID</th>
          <th>Stake</th>
          <th>
            Assignment Date
            <i className="table-arrow ml-1" />
          </th>
          <th>Expiration Date</th>
          <th>Status</th>
          <th>Used Date</th>
          <th>Assigner User</th>
          <th>Coupon ID</th>
          <th>Game</th>
          {props.cancel && <th> </th>}
        </tr>
      </thead>
      <tbody>
        {props.freeBets.map((freebet) => {
          const status = props.freeBetStatuses.find((b) => parseInt(b.id) === parseInt(freebet.status));
          const gameStatusLabel =
            props.gameStatuses.find((game) => parseInt(game.id) === parseInt(freebet.game))?.label || '';
          return (
            <tr className="table-style-row" key={freebet.id}>
              <td>{freebet.id}</td>
              <td>{freebet.userId}</td>
              <td>
                {parseAmount(freebet.stake, 100)} {props.currency}
              </td>
              <td>{getCountryDateTime(freebet.assignmentDate, props.selectedTimezone)}</td>
              <td>{getCountryDateTime(freebet.expirationDate, props.selectedTimezone)}</td>
              <td>{status ? status.label : freebet.status}</td>
              <td>{getCountryDateTime(freebet.usedDate, props.selectedTimezone)}</td>
              <td>{freebet.assigner}</td>
              <td>
                {freebet.couponId && (
                  <Link
                    to={PAGES.COUPONS_SETTLED_VIEW}
                    className="table-style-link"
                    onClick={props.showCoupon.bind(this, freebet)}
                  >
                    {freebet.couponId}
                  </Link>
                )}
              </td>
              <td>{gameStatusLabel}</td>
              <td>
                {props.cancel && freebet.status === 1 && (
                  <button
                    type="button"
                    className="btn btn-delete"
                    onClick={props.handleConfirmDeleteModal.bind(this, freebet.id)}
                  >
                    Delete
                  </button>
                )}
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
    {!props.hasRecord && props.freeBets.length < 1 && <TableNoResult />}
  </>
);

export default FreeBetsTable;