components/MenuItems/Bonus/ClientBonusesTable.js

import React from 'react';

import { getCountryDateTime, parseAmount, parsePoints } from '../../../utils/common';
import SVGComponent from '../../SVG/SVGComponent';
import { SVG_ICONS } from '../../../constants';
import TableNoResult from '../../TableNoResult';
/**
 * @module MI-Bonus/ClientBonusesTable
 */
/**
 * @typedef {object} props
 * @property {Array} clientBonuses
 * @property {Array} bonusStatuses
 * @property {Array} currency
 */
/**
 * Render
 *
 * @param {props} props
 * @returns {view}
 */
const ClientBonusesTable = (props) => (
  <>
    <table className="table-style table-s" id="data-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Client ID</th>
          <th>Bonus ID</th>
          <th>
            Start Date
            <i className="table-arrow ml-1" />
          </th>
          <th>Expiration Date</th>
          <th>Status</th>
          <th>Amount</th>
          <th>Target Points</th>
          <th>Points</th>
          <th>Last Update Date</th>
          <th>Completion Date</th>
          <th>Paid</th>
          <th>Paid Date</th>
        </tr>
      </thead>
      <tbody>
        {props.clientBonuses.map((bonus) => {
          const status = props.bonusStatuses.find((b) => parseInt(b.id) === parseInt(bonus.status));
          return (
            <tr className="table-style-row" key={bonus.id}>
              <td>{bonus.id}</td>
              <td>{bonus.clientId}</td>
              <td>{bonus.bonusId}</td>
              <td>{getCountryDateTime(bonus.startDate, props.selectedTimezone)}</td>
              <td>{getCountryDateTime(bonus.expirationDate, props.selectedTimezone)}</td>
              <td>{status ? status.label : bonus.status}</td>
              <td>
                {parseAmount(bonus.amount, 100)} {props.currency}
              </td>
              <td>{parsePoints(bonus.targetPoints, ',')}</td>
              <td>{parsePoints(bonus.points, ',')}</td>
              <td>{getCountryDateTime(bonus.lastUpdateDate, props.selectedTimezone)}</td>
              <td>{bonus.completionDate ? getCountryDateTime(bonus.completionDate, props.selectedTimezone) : '-'}</td>
              <td>{bonus.paid ? <SVGComponent className="icon-xxs" src={`${SVG_ICONS.utility}#tick`} /> : '-'}</td>
              <td>{bonus.paidDate ? getCountryDateTime(bonus.paidDate, props.selectedTimezone) : '-'}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
    {!props.hasRecord && props.clientBonuses.length < 1 && <TableNoResult />}
  </>
);

export default ClientBonusesTable;