Config.ts
import { Module, registerModule } from ‘@txp-core/runtime’; import { totalAmountSideEffectPattern } from ‘./totalAmountSideEffectPatterns’; import { totalAmountHandler } from ‘./totalAmountSaga’; export const totalAmountModule: Module = registerModule({ id: ‘totalAmount’, sideEffects: [ { id: ‘totalAmount’, description: ‘update total amount when line item gets updated/added’, pattern: totalAmountSideEffectPattern, handler: totalAmountHandler } ], withModuleDependencies: [‘coreTransactionState’, ‘coreUIState’] });

Totlamount.tsx
import React from ‘react’; import { useFormatMessage } from ‘@txp-core/intl’; import { useTXPStateRead } from ‘@txp-core/runtime’; import { getMoney } from ‘@txp-core/basic-utils’; import { Demi } from ‘@ids-ts/typography’; import styles from ‘src/js/modules/TotalAmount/TotalAmount.module.css’; import { TotalsSelectors } from ‘@txp-core/transactions-calculations’; const TotalAmount = () => { const total = useTXPStateRead(TotalsSelectors.getSubTotal); const formatMessage = useFormatMessage(); const localizedTotalAmount = getMoney(total).toCurrencyString(); const totalLabel = formatMessage({ id: ‘total’, defaultMessage: ‘Total’ }); return ( <> <div className={styles.totalRow}> <Demi data-automation-id=‘total-lable’ className={styles.totalRowLabel}> {totalLabel} </Demi> <Demi data-testid=‘total-amount-text’ className={styles.totalRowAmount}> {localizedTotalAmount} </Demi> </div> </> ); };export default TotalAmount;

Total amountsaga.ts
import { ResultType, StepResponse } from ‘@txp-core/runtime’; import { Effect, select, put } from ‘redux-saga/effects’; import { TotalsSelectors } from ‘@txp-core/transactions-calculations’; import { genericTxnUpdate } from ‘@txp-core/transactions-core’; export function* totalAmountHandler(): Generator<Effect, StepResponse, string> { const totalAmount = yield select(TotalsSelectors.getSubTotal); yield put(genericTxnUpdate({ amount: totalAmount }, true)); return { result: ResultType.SUCCESS }; }

Totalamountsideeffectpatterns.ts
import { genericLineUpdated, itemLineAdded, ITEM_LINE_ADDED, lineTouched, LINE_TOUCHED, LINE_UPDATED, AllActions, ACCOUNT_LINES_ADDED } from ‘@txp-core/transactions-core’; type TotalAmountSideEffectTypes = | ReturnType<typeof lineTouched> | ReturnType<typeof genericLineUpdated> | ReturnType<typeof itemLineAdded>; export const totalAmountSideEffectPattern = (action: AllActions | TotalAmountSideEffectTypes) => { switch (action.type) { case ITEM_LINE_ADDED: case ACCOUNT_LINES_ADDED: case LINE_UPDATED: case LINE_TOUCHED: return true; default: return false; } };

The above codes are totalamouunt component implementation done by side effect and more…

So below code we need to do like above one only how to do, please code it
import React, { useState } from ‘react’; import { ChargesTable, paymentTableSelectors, PaymentChargesTableAction } 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 { TransactionActions, TransactionSelectors } from ‘@txp-core/transactions-core’; import TextField from ‘@ids-ts/text-field’; 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 from ‘@ids-ts/checkbox’; import style from ‘./Tables.module.css’; import { useTrowserHooks } from ‘@txp-core/trowser’; import LinkButton from ‘@txp-core/link-button’; export interface txnType { txnTypeId: number; txnTypeLongName: string; } export interface OutstandingTableDataTypes { txnId: number; txnType: txnType; date: string; amount: string; referenceNumber: number; dueDate: string; openBalance: string; linkedPaymentAmount: string; isLinkedPaymentAmount?: boolean; } export const OutstandingTransactionsTable = () => { const formatMessage = useFormatMessage(); const customerId = useTXPStateRead(TransactionSelectors.getContactId); const outstandingTableLines = useTXPStateRead(paymentTableSelectors.getCharges) || []; const onAmountFieldUpdated = useTXPStateWrite(TransactionActions.genericTxnUpdate); const onPaymentFieldUpdated = useTXPStateWrite( PaymentChargesTableAction.chargesTableDataUpdate ); const Items = (props: { item: OutstandingTableDataTypes; idx: number }) => { const { item, idx } = props; console.log(‘hello’, item, idx); const txnUrl = getTxnUrl(${item.txnType.txnTypeId}, item.txnId); const referenceNumber = item?.referenceNumber ? # ${item?.referenceNumber} : ‘’; const amount = useTXPStateRead(TransactionSelectors.getAmount) || 0; const { closeTrowser } = useTrowserHooks(); const [isCheckedWhenPaymentAmount, setIsCheckedWhenPaymentAmount] = useState( !!item.linkedPaymentAmount ); console.log(‘hello2’, isCheckedWhenPaymentAmount); const [paymentAmount, setPaymentAmount] = useState(item.linkedPaymentAmount); console.log(‘hello3’, paymentAmount); const handleAmountUpdate = (amountValue: string) => { onAmountFieldUpdated({ amount: amountValue }); }; const handleCheckboxClicked = (txnId: number) => { setIsCheckedWhenPaymentAmount(!isCheckedWhenPaymentAmount); console.log(‘hello4’, isCheckedWhenPaymentAmount, !isCheckedWhenPaymentAmount); if (!isCheckedWhenPaymentAmount) { const value = outstandingTableLines.filter((x) => x.txnId === txnId)[0].openBalance; setPaymentAmount(value.toString()); console.log(‘hello8’, paymentAmount); const calcAmount = Number(amount) + Number(value); handleAmountUpdate(calcAmount.toString()); onPaymentFieldUpdated(txnId, { linkedPaymentAmount: value.toString(), isLinkedPaymentAmount: true }); } else { setPaymentAmount(‘’); const value1 = outstandingTableLines.filter((x) => x.txnId === txnId)[0] .isLinkedPaymentAmount; console.log(‘123’, value1); if (value1) { const value = outstandingTableLines.filter((x) => x.txnId === txnId)[0] .linkedPaymentAmount; if (value) { const calcAmount = Number(amount) - Number(value); handleAmountUpdate(calcAmount.toString()); onPaymentFieldUpdated(txnId, { linkedPaymentAmount: ‘’ }); } } } }; const handlePaymentFieldChange = (evt: React.ChangeEvent<HTMLInputElement>) => { const value = evt && evt.target.value; setPaymentAmount(value); }; const handlePaymentOnBlur = () => { setIsCheckedWhenPaymentAmount(!!paymentAmount); const oldValue = outstandingTableLines.filter((x) => x.txnId === item.txnId)[0] .linkedPaymentAmount; onPaymentFieldUpdated(item.txnId, { linkedPaymentAmount: paymentAmount, isLinkedPaymentAmount: true }); const oldPaymentAmount = oldValue ? Number(oldValue) : 0; const newPaymentAmount = paymentAmount ? Number(paymentAmount) : 0; const calcAmount = Number(amount) - oldPaymentAmount + newPaymentAmount; handleAmountUpdate(calcAmount.toString()); }; 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={isCheckedWhenPaymentAmount} onClick={() => handleCheckboxClicked(item.txnId)} title=‘Toggle Row Selected’ /> </Table.Cell> <Table.Cell className={styles.leftAlign}> <LinkButton onClick={handleNavigate} text={${item.txnType.txnTypeLongName} ${referenceNumber}} />{’ '} ({toLocalDateFormat(item.date)}) </Table.Cell> <Table.Cell className={styles.leftAlign}> {toLocalDateFormat(item.dueDate)} </Table.Cell> <Table.Cell className={styles.rightAlign}> {toLocalizedMoneyString(item.amount)} </Table.Cell> <Table.Cell className={styles.rightAlign}> {toLocalizedMoneyString(item.openBalance)} </Table.Cell> <Table.Cell> <TextField autoComplete=‘off’ value={paymentAmount} aria-label={formatMessage({ id: ‘charges_credits_payment_field’, defaultMessage: ‘Payments’ })} className={styles.paymentField} onChange={handlePaymentFieldChange} onBlur={handlePaymentOnBlur} /> </Table.Cell> </Table.Row> </> ); }; return ( <div className={styles.gridWrapper}> {customerId && ( <ChargesTable header={<TransactionsTableHeader dueDateFlag />}> {(item: OutstandingTableDataTypes, idx: number) => ( <Items item={item} idx={idx} /> )} </ChargesTable> )} </div> ); }; export default enabled( { ‘environment.txnType’: [TransactionTypes.PURCHASE_BILL_PAYMENT] }, OutstandingTransactionsTable );