import React, { useState } from 'react';
import { parseAmount, getCountryDateTime } from '../../../utils/common';
import { BET_STATUS, MODALS, PERMISSIONS, SETTLED_COUPON_PAID_STATUS, SVG_ICONS } from '../../../constants';
import TableNoResult from '../../TableNoResult';
import SVGComponent from '../../SVG/SVGComponent';
import ConfirmationModal from '../../Modals/ConfirmationModal';
import { SETTLED_COUPONS_SORT_FIELDS, SORT_DIRECTION } from '../../../utils/sort';
/**
* @module MI-Coupons/SettledCoupons
*/
/**
* @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}
*/
// eslint-disable-next-line sonarjs/cognitive-complexity
const SettledCoupons = (props) => {
const [couponToVoidDetails, updateCouponToVoidDetails] = useState(null);
const [couponDetails, updateCouponDetails] = useState(null);
const hasVoidCouponPermission = props.checkPermisson(PERMISSIONS.COUPONS_SETTLED_VOID_COUPON);
const hasSetStatusPaidCouponPermission = props.checkPermisson(PERMISSIONS.COUPONS_SETTLED_SET_COUPON_TO_WONT_PAY);
const hasVoidLosingCouponPermission = props.checkPermisson(PERMISSIONS.COUPONS_SETTLED_VOID_LOSING_COUPON);
const updateContextMenuState = (coupon) => {
if (couponToVoidDetails?.id === coupon.id) {
updateCouponToVoidDetails(null);
} else {
updateCouponToVoidDetails(coupon);
}
};
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;
};
const closeModal = () => {
props.setOpenModal({ modal: '' });
updateCouponDetails(null);
};
const confirmVoidCouponClick = (couponId) => {
props.voidCouponRequest({
couponId,
hasVoidCouponPermission,
hasVoidLosingCouponPermission,
});
};
const confirmSetCouponClick = (couponId) => {
props.setCouponToWontpayRequest({
couponId,
});
};
const sortColumn = (selectedColumn, column, currentDirection) => {
const direction =
selectedColumn === column && currentDirection === SORT_DIRECTION.DESC ? SORT_DIRECTION.ASC : SORT_DIRECTION.DESC;
props.onSortColumn(column, direction);
};
const getTableHeaderClass = (sortDirection, column, selectedColumn) => {
if (column === selectedColumn) {
return sortDirection === SORT_DIRECTION.ASC ? 'asc' : 'desc';
}
return '';
};
return (
<>
<table className="table-style click-row" id="data-table1">
<thead>
<tr>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.COUPON_ID,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.COUPON_ID,
props.sort.direction
)}
>
Coupon ID
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.CLIENT_ID,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.CLIENT_ID,
props.sort.direction
)}
>
Client ID
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.AGENT_ID,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.AGENT_ID,
props.sort.direction
)}
>
Agent ID
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.PLACED_DATE,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.PLACED_DATE,
props.sort.direction
)}
>
Placed Date
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.ROUND_ID,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.ROUND_ID,
props.sort.direction
)}
>
Round ID
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.STATUS,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.STATUS,
props.sort.direction
)}
>
Status
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.BONUS,
props.sort.field
)}`}
onClick={sortColumn.bind(null, props.sort.field, SETTLED_COUPONS_SORT_FIELDS.BONUS, props.sort.direction)}
>
Bonus
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.GAME,
props.sort.field
)}`}
onClick={sortColumn.bind(null, props.sort.field, SETTLED_COUPONS_SORT_FIELDS.GAME, props.sort.direction)}
>
Game
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.STAKE,
props.sort.field
)}`}
onClick={sortColumn.bind(null, props.sort.field, SETTLED_COUPONS_SORT_FIELDS.STAKE, props.sort.direction)}
>
Stake
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.WON_AMOUNT,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.WON_AMOUNT,
props.sort.direction
)}
>
Won Amount
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.SETTLED_DATE,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.SETTLED_DATE,
props.sort.direction
)}
>
Settlement Date
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.PAID,
props.sort.field
)}`}
onClick={sortColumn.bind(null, props.sort.field, SETTLED_COUPONS_SORT_FIELDS.PAID, props.sort.direction)}
>
Paid
<span>
<i className="table-arrow ml-1" />
</span>
</th>
<th
className={`sort ${getTableHeaderClass(
props.sort.direction,
SETTLED_COUPONS_SORT_FIELDS.LAST_UPDATE_DATE,
props.sort.field
)}`}
onClick={sortColumn.bind(
null,
props.sort.field,
SETTLED_COUPONS_SORT_FIELDS.LAST_UPDATE_DATE,
props.sort.direction
)}
>
Last Update Date
<span>
<i className="table-arrow ml-1" />
</span>
</th>
</tr>
</thead>
<tbody>
{props.placedCoupons.map((coupon, index) => (
<tr
className={`table-style-row ${props.selectedCouponId === coupon.id ? 'active' : ''}
${couponToVoidDetails?.id === coupon.id ? 'active open' : ''}`}
onClick={props.selectCoupon.bind(this, { coupon })}
key={`${index}-${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>{props.betStatus?.find((status) => parseInt(status.id) === parseInt(coupon?.status))?.label}</td>
<td>{coupon.bonus ? 'Yes' : 'No'}</td>
<td>{getGameType(coupon)}</td>
<td>
{parseAmount(coupon.stake, 100)} {props.currency}
</td>
<td>
{parseAmount(coupon.wonAmount, 100)} {props.currency}
</td>
<td>{getCountryDateTime(coupon.settlementDate, props.selectedTimezone)}</td>
<td>{SETTLED_COUPON_PAID_STATUS[coupon?.paid]}</td>
<td>{coupon.paidDate ? getCountryDateTime(coupon.paidDate, props.selectedTimezone) : '-'}</td>
{!props.isShop && (
<td
className="table-style-icon"
onClick={(e) => {
e.stopPropagation();
updateContextMenuState(coupon);
}}
>
<SVGComponent className="icon-xs" src={`${SVG_ICONS.utility}#dots`} />
<div className="table-style-option">
<div
className="table-style-option-item"
onClick={(e) => {
e.stopPropagation();
props.setOpenModal({
modal: MODALS.PROMPT_CONFIRMATION,
});
updateContextMenuState(coupon);
updateCouponDetails({
...coupon,
heading: 'Void Coupon',
title: 'Are you sure you want to void the following coupon:',
isVoidBetMenu: true,
confirmation: confirmVoidCouponClick,
});
}}
disabled={
(!hasVoidCouponPermission && !hasVoidLosingCouponPermission) ||
coupon.status === BET_STATUS.VOIDED ||
!coupon.voidable
}
>
Void bet
</div>
<div
className="table-style-option-item"
onClick={(e) => {
e.stopPropagation();
props.setOpenModal({
modal: MODALS.PROMPT_CONFIRMATION,
});
updateContextMenuState(coupon);
updateCouponDetails({
...coupon,
heading: "Set Coupon as Won't Pay",
title: "Are you sure you want to proceed? The following coupon won't be paid:",
confirmation: confirmSetCouponClick,
});
}}
disabled={
!(hasSetStatusPaidCouponPermission && coupon?.paid === SETTLED_COUPON_PAID_STATUS.PAYMENT_ERROR)
}
>
Set coupon as Won't Pay
</div>
</div>
</td>
)}
</tr>
))}
</tbody>
</table>
{couponToVoidDetails !== null && <div className="overlay-mask bg-grey open" />}
{!props.hasRecord && props.placedCoupons.length < 1 && <TableNoResult />}
{props.activeModal === MODALS.PROMPT_CONFIRMATION && (
<ConfirmationModal
modalData={{
heading: couponDetails?.heading || '',
title: couponDetails?.title || '',
additionalMessages: [
`${'Coupon ID: '} ${couponDetails?.id}`,
couponDetails?.isVoidBetMenu
? `${'Stake: '} ${parseAmount(couponDetails?.stake, 100)} ${props.currency}`
: `${'Won Amount: '} ${parseAmount(couponDetails?.wonAmount, 100)} ${props.currency}`,
`${'Placed Date: '} ${getCountryDateTime(couponDetails?.placedDate, props.selectedTimezone)}`,
],
}}
cancel={closeModal}
confirmation={couponDetails?.confirmation?.bind(this, couponDetails?.id)}
/>
)}
</>
);
};
export default SettledCoupons;