PM-1304 - allow admin to update payment description

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

@@ -79,6 +79,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     })
     const [editState, setEditState] = React.useState<{
         grossAmount?: number;
+        description?: string;
         releaseDate?: Date;
         paymentStatus?: string;
         auditNote?: string;
@@ -93,6 +94,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
 
     const handleValueUpdated = useCallback((updates: {
         auditNote?: string,
+        description?: string,
         grossAmount?: number,
         paymentStatus?: string,
         releaseDate?: Date,
@@ -205,6 +207,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
         // Send to server only the fields that have changed
         const updateObj = {
             auditNote: currentEditState.auditNote !== undefined ? currentEditState.auditNote : undefined,
+            description: currentEditState.description !== undefined ? currentEditState.description : undefined,
             grossAmount: currentEditState.grossAmount !== undefined ? currentEditState.grossAmount : undefined,
             paymentStatus: currentEditState.paymentStatus !== undefined ? currentEditState.paymentStatus : undefined,
             releaseDate: currentEditState.releaseDate !== undefined ? currentEditState.releaseDate : undefined,
@@ -223,6 +226,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
 
         const updates: {
             auditNote?: string
+            description?: string
             paymentStatus?: 'ON_HOLD_ADMIN' | 'OWED' | 'CANCELLED'
             releaseDate?: string
             paymentAmount?: number
@@ -232,6 +236,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
             winningsId: paymentId,
         }
 
+        if (updateObj.description) updates.description = updateObj.description
         if (paymentStatus) updates.paymentStatus = paymentStatus
         if (paymentStatus !== 'CANCELLED') {
             if (updateObj.releaseDate !== undefined) updates.releaseDate = updateObj.releaseDate.toISOString()

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

@@ -18,13 +18,15 @@ interface PaymentEditFormProps {
         releaseDate, grossAmount, paymentStatus, auditNote,
     }: {
         releaseDate?: Date
+        description?: string
         grossAmount?: number
         paymentStatus?: string
         auditNote?: string
     }) => void
 }
 
 const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps) => {
+    const [description, setDescription] = useState('')
     const [paymentStatus, setPaymentStatus] = useState('')
     const [releaseDate, setReleaseDate] = useState(new Date())
     const [grossAmount, setGrossAmount] = useState(0)
@@ -35,6 +37,7 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
 
     const initialValues = useMemo(() => ({
         auditNote: '',
+        description: props.payment.description,
         grossAmount: props.payment.grossAmountNumber,
         paymentStatus: props.payment.status,
         releaseDate: props.payment.releaseDateObj,
@@ -85,6 +88,15 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                     })
                 }
 
+                break
+            case 'description':
+                setDescription(value as string)
+                if (props.onValueUpdated) {
+                    props.onValueUpdated({
+                        description: value as string,
+                    })
+                }
+
                 break
             case 'releaseDate':
                 setReleaseDate(value as Date)
@@ -110,13 +122,17 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
     }
 
     useEffect(() => {
+        setDescription(props.payment.description)
         setPaymentStatus(props.payment.status)
         setReleaseDate(props.payment.releaseDateObj)
         setGrossAmount(props.payment.grossAmountNumber)
     }, [props.payment])
 
     useEffect(() => {
         const valuesToCheck = [{
+            key: 'description',
+            value: description,
+        }, {
             key: 'grossPayment',
             value: grossAmount,
         }, {
@@ -132,14 +148,17 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
 
         const isDirty = valuesToCheck.some(x => x.value !== initialValues[x.key as keyof typeof initialValues])
         setDirty(isDirty)
-    }, [grossAmount, paymentStatus, releaseDate, auditNote, initialValues])
+    }, [description, grossAmount, paymentStatus, releaseDate, auditNote, initialValues])
 
     useEffect(() => {
         if (props.canSave) {
             if (!dirty) {
                 props.canSave(false)
             } else {
                 const valuesToCheck = [{
+                    key: 'description',
+                    value: description,
+                }, {
                     key: 'grossPayment',
                     value: grossAmount,
                 }, {
@@ -154,7 +173,7 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                 props.canSave(haveChange && grossAmountErrorString.length === 0 && auditNote.length > 0)
             }
         }
-    }, [dirty, auditNote, props, grossAmountErrorString.length, grossAmount, paymentStatus, releaseDate, initialValues])
+    }, [dirty, auditNote, props, grossAmountErrorString.length, description, grossAmount, paymentStatus, releaseDate, initialValues])
 
     const getLink = (externalId: string): string => `${TOPCODER_URL}/challenges/${externalId}`
 
@@ -208,8 +227,21 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                     error={grossAmountErrorString}
                     value={props.payment.grossAmountNumber.toString()}
                     onChange={e => handleInputChange('grossPayment', parseFloat(e.target.value))}
+                />
 
+                <InputText
+                    name='description'
+                    label='Description'
+                    type='text'
+                    disabled={disableEdits}
+                    placeholder='Modify Description'
+                    dirty
+                    tabIndex={0}
+                    error={!description?.length ? 'Description can\'t be empty' : ''}
+                    value={props.payment.description.toString()}
+                    onChange={e => handleInputChange('description', e.target.value)}
                 />
+
                 <InputSelect
                     tabIndex={-1}
                     dirty