fix(wallet-admin): disable editing amount and release date if payment is being cancelled

Signed-off-by: Rakib Ansary <rakibansary@topcoder.com>

Author: rakibansary

src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx

@@ -208,8 +208,10 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
         }
 
         if (paymentStatus) updates.paymentStatus = paymentStatus
-        if (updateObj.releaseDate !== undefined) updates.releaseDate = updateObj.releaseDate.toISOString()
-        if (updateObj.netAmount !== undefined) updates.paymentAmount = updateObj.netAmount
+        if (paymentStatus !== 'CANCELLED') {
+            if (updateObj.releaseDate !== undefined) updates.releaseDate = updateObj.releaseDate.toISOString()
+            if (updateObj.netAmount !== undefined) updates.paymentAmount = updateObj.netAmount
+        }
 
         toast.success('Updating payment', { position: toast.POSITION.BOTTOM_RIGHT })
         try {

src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.tsx

@@ -31,6 +31,7 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
     const [netAmountErrorString, setNetAmountErrorString] = useState('')
     const [auditNote, setAuditNote] = useState('')
     const [dirty, setDirty] = useState(false)
+    const [disableEdits, setDisableEdits] = useState(false)
 
     const initialValues = useMemo(() => ({
         auditNote: '',
@@ -184,6 +185,7 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                     name='netPayment'
                     label='Net Payment'
                     type='number'
+                    disabled={disableEdits}
                     placeholder='Modify Net Payment'
                     dirty
                     tabIndex={0}
@@ -203,11 +205,14 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                         { label: 'Cancel', value: 'Cancel' },
                     ]}
                     value={paymentStatus}
-                    onChange={e => handleInputChange('paymentStatus', e.target.value)}
+                    onChange={e => {
+                        setDisableEdits(e.target.value === 'Cancel')
+                        handleInputChange('paymentStatus', e.target.value)
+                    }}
                 />
                 <InputDatePicker
                     tabIndex={-2}
-                    disabled={false}
+                    disabled={disableEdits}
                     error='Something wrong'
                     label='Release Date'
                     minDate={min([new Date(), new Date(props.payment.releaseDateObj)])}