import React from 'react'; import { CreditsTable, PaymentChargesTableAction, paymentTableSelectors } from '@txp-core/payment-transactions-table'; import { Table } from '@ids-ts/table'; import { useTXPStateRead, useTXPStateWrite } from '@txp-core/runtime'; import { useFormatMessage } from '@txp-core/intl'; import { TransactionSelectors } from '@txp-core/transactions-core'; import { enabled } from '@txp-core/enabled'; import { TransactionTypes, getTxnUrl } from '@txp-core/transactions-utils'; import { toLocalizedMoneyString, toLocalDateFormat } from '@txp-core/basic-utils'; import TransactionsTableHeader from './TransactionTableHeaders'; import styles from 'src/js/staticLayout/Grid.module.css'; import Checkbox, { CheckboxOnChangeEventType } from '@ids-ts/checkbox'; import style from './Tables.module.css'; import LinkButton from '@txp-core/link-button'; import { useTrowserHooks } from '@txp-core/trowser'; import TransactionTableFilter from './TransactionTableFilter'; import PaymentField from 'src/js/billpayment/modules/TransactionTables/PaymentField'; export interface txnType { txnTypeId: number; txnTypeLongName: string; } export interface CreditsTableDataTypes { txnId: number; txnType: txnType; date: string; amount: string; dueDate: string; openBalance: string; referenceNumber: string; linkedPaymentAmount: string; isLinkedPaymentAmount?: boolean; } export const TransactionCreditsTable = () => { const formatMessage = useFormatMessage(); const customerId = useTXPStateRead(TransactionSelectors.getContactId); const creditTableLines = useTXPStateRead(paymentTableSelectors.getCredits) || []; const totalOfChargesTable = useTXPStateRead(paymentTableSelectors.getTotalOfChargesTable); const totalOfCreditsTable = useTXPStateRead(paymentTableSelectors.getTotalOfCreditsTable); const onPaymentFieldUpdate = useTXPStateWrite(PaymentChargesTableAction.creditsTableDataUpdate); const Items = (props: { item: CreditsTableDataTypes; idx: number }) => { const { item, idx } = props; const txnUrl = getTxnUrl(`${item.txnType.txnTypeId}`, item.txnId); const referenceNumber = item.referenceNumber ? `# ${item.referenceNumber}` : ''; const handleCheckboxChange = (event: CheckboxOnChangeEventType, txnId: number) => { if (event.target.checked) { const value = creditTableLines.filter((x) => x.txnId === txnId)[0].openBalance; if (totalOfChargesTable > totalOfCreditsTable) { const creditNeeded = Math.abs(totalOfChargesTable - totalOfCreditsTable); if (creditNeeded <= value) { onPaymentFieldUpdate(txnId, { linkedPaymentAmount: creditNeeded.toString(), isLinkedPaymentAmount: true }); } else { onPaymentFieldUpdate(txnId, { linkedPaymentAmount: value.toString(), isLinkedPaymentAmount: true }); } } else { onPaymentFieldUpdate(txnId, { linkedPaymentAmount: '' }); } } else { onPaymentFieldUpdate(txnId, { linkedPaymentAmount: '' }); } }; const handlePaymentFieldChange = (inputValue: string) => { let value = ''; if (item.linkedPaymentAmount) { value = Number(inputValue) <= Number(item.openBalance) ? inputValue : item.linkedPaymentAmount; } else { value = Number(inputValue) <= Number(item.openBalance) ? inputValue : ''; } const creditNeeded = Math.abs( totalOfChargesTable - (totalOfCreditsTable - Number(item.linkedPaymentAmount)) ); if (Number(value) <= creditNeeded) { onPaymentFieldUpdate(item.txnId, { linkedPaymentAmount: value.toString(), isLinkedPaymentAmount: true }); } if (Number(value) > creditNeeded) { onPaymentFieldUpdate(item.txnId, { linkedPaymentAmount: creditNeeded === 0 ? '' : creditNeeded.toString(), isLinkedPaymentAmount: true }); } }; const { closeTrowser } = useTrowserHooks(); const handleNavigate = () => closeTrowser?.({ navigateTo: txnUrl, skipTrowserCloseDelay: true }); return ( <> <Table.Row key={idx} className='tableRow'> <Table.Cell className={style.checkbox}> <Checkbox aria-label={formatMessage({ id: 'charges_credits_table_select_rows', defaultMessage: 'Select rows' })} style={{ cursor: 'pointer' }} checked={!!item.linkedPaymentAmount} onChange={(event) => handleCheckboxChange(event, item.txnId)} /> </Table.Cell> <Table.Cell className={styles.leftAlign}> <LinkButton onClick={handleNavigate} text={`${item.txnType.txnTypeLongName} ${referenceNumber}`} />{' '} ({toLocalDateFormat(item.date)}) </Table.Cell> <Table.Cell className={styles.rightAlign}> {toLocalizedMoneyString(item.amount)} </Table.Cell> <Table.Cell className={styles.rightAlign}> {toLocalizedMoneyString(item.openBalance)} </Table.Cell> <Table.Cell> <PaymentField paymentAmount={item.linkedPaymentAmount} txnId={item.txnId} rowIndex={idx} handleOnPaymentChange={handlePaymentFieldChange} /> </Table.Cell> </Table.Row> </> ); }; return ( <div className={styles.gridWrapper}> {customerId && ( <CreditsTable header={<TransactionsTableHeader dueDateFlag={false} />} filter={<TransactionTableFilter showOverDueCheck={false} />} > {(item: CreditsTableDataTypes, idx: number) => <Items item={item} idx={idx} />} </CreditsTable> )} </div> ); }; export default enabled( { 'environment.txnType': [TransactionTypes.PURCHASE_BILL_PAYMENT] }, TransactionCreditsTable );
improve code in handleCheckboxChange and handleCheckboxChange handler