components/MenuItems/Coupons/PlacedCoupons.js

import React from 'react';

import { getCountryDateTime, parseAmount } from '../../../utils/common';
import TableNoResult from '../../TableNoResult';

/**
 * @module MI-Coupons/PlacedCoupons
 */
/**
 * @typedef {object} props
 * @property {Array} placedCoupons All coupons data
 * @property {string} currency Currency sign
 * @property {number} selectedCouponId
 * @property {Function} getPlacedCoupons
 * @property {Function} selectCoupon
 */
/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const PlacedCoupons = (props) => {
  const getGameType = (coupon) => {
    let gameDetails;
    if (props.isShop) {
      gameDetails = props.shopGameStatuses.find((l) => parseInt(l.id) === coupon.gameId);
    } else {
      gameDetails = props.gameStatuses.find((l) => parseInt(l.id) === coupon.gameId);
    }
    return gameDetails.label;
  };

  return (
    <>
      <table className="table-style click-row" id="data-table1">
        <thead>
          <tr>
            <th>Coupon ID</th>
            <th>Client ID</th>
            <th>Agent ID</th>
            <th>
              Placed Date
              <i className="table-arrow ml-1" />
            </th>
            <th>Round ID</th>
            <th>Stake</th>
            <th>Potential Win</th>
            <th>Bonus</th>
            <th>Game</th>
          </tr>
        </thead>
        <tbody>
          {props.placedCoupons?.map((coupon) => (
            <tr
              className={`table-style-row ${props.selectedCouponId === coupon.id ? 'active' : ''}`}
              onClick={props.selectCoupon.bind(this, { coupon })}
              key={coupon.id}
            >
              <td>{coupon.id}</td>
              <td>{coupon.clientId}</td>
              <td>{coupon.agentId}</td>
              <td>{getCountryDateTime(coupon.placedDate, props.selectedTimezone)}</td>
              <td>#{coupon.roundId}</td>
              <td>
                {parseAmount(coupon.stake, 100)} {props.currency}
              </td>
              <td>
                {parseAmount(coupon.potentialWin, 100)} {props.currency}
              </td>
              <td>{coupon.bonus ? 'Yes' : 'No'}</td>
              <td>{getGameType(coupon)}</td>
            </tr>
          ))}
        </tbody>
      </table>
      {!props.hasRecord && props.placedCoupons?.length < 1 && <TableNoResult />}
    </>
  );
};

export default PlacedCoupons;