feat(wallet-admin): view payout details/response from provider

* allow editing paid payments

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

Author: rakibansary

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

@@ -2,7 +2,7 @@
 /* eslint-disable max-len */
 /* eslint-disable react/jsx-no-bind */
 import { min } from 'date-fns'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { TOPCODER_URL } from '~/config/environments/default.env'
 import { InputDatePicker, InputSelect, InputText } from '~/libs/ui'
@@ -40,8 +40,6 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
         releaseDate: props.payment.releaseDateObj,
     }), [props.payment])
 
-    console.log('Payment status', paymentStatus)
-
     const validateNetAmount = (value: number): boolean => {
         if (Number.isNaN(value)) {
             setNetAmountErrorString('A valid number is required')
@@ -160,6 +158,22 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
 
     const getLink = (externalId: string): string => `${TOPCODER_URL}/challenges/${externalId}`
 
+    const options = useCallback(() => {
+        if (props.payment.status.toUpperCase() !== 'PAID') {
+            return [
+                { label: 'Owed', value: 'Owed' },
+                { label: 'On Hold', value: 'On Hold' },
+                { label: 'Cancel', value: 'Cancel' },
+            ]
+        }
+
+        return [
+            { label: 'Paid', value: 'Paid' },
+            { label: 'Owed', value: 'Owed' },
+        ]
+
+    }, [props.payment.status])
+
     return (
         <div className={styles.formContainer}>
             <div className={styles.inputGroup}>
@@ -201,28 +215,26 @@ const PaymentEdit: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps
                     dirty
                     name='paymentStatus'
                     label='Payment Status'
-                    options={[
-                        { label: 'Owed', value: 'Owed' },
-                        { label: 'On Hold', value: 'On Hold' },
-                        { label: 'Cancel', value: 'Cancel' },
-                    ]}
+                    options={options()}
                     value={paymentStatus}
                     onChange={e => {
                         setDisableEdits(e.target.value === 'Cancel')
                         handleInputChange('paymentStatus', e.target.value)
                     }}
                 />
-                <InputDatePicker
-                    tabIndex={-2}
-                    disabled={disableEdits}
-                    error='Something wrong'
-                    label='Release Date'
-                    minDate={min([new Date(), new Date(props.payment.releaseDateObj)])}
-                    date={releaseDate}
-                    maxDate={new Date(new Date()
-                        .getTime() + 15 * 24 * 60 * 60 * 1000)}
-                    onChange={date => { if (date != null) handleInputChange('releaseDate', date) }}
-                />
+                {props.payment.status.toUpperCase() !== 'PAID' && (
+                    <InputDatePicker
+                        tabIndex={-2}
+                        disabled={disableEdits}
+                        error='Something wrong'
+                        label='Release Date'
+                        minDate={min([new Date(), new Date(props.payment.releaseDateObj)])}
+                        date={releaseDate}
+                        maxDate={new Date(new Date()
+                            .getTime() + 15 * 24 * 60 * 60 * 1000)}
+                        onChange={date => { if (date != null) handleInputChange('releaseDate', date) }}
+                    />
+                )}
                 <InputText
                     tabIndex={-3}
                     type='text'

src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx

@@ -60,7 +60,7 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                                 <td>{payment.releaseDate}</td>
                                 <td>{payment.datePaid}</td>
                                 <td className={styles.actionButtons}>
-                                    {props.canEdit && payment.status.toUpperCase() !== 'PAID' && payment.status.toUpperCase() !== 'CANCELLED' && (
+                                    {props.canEdit && payment.status.toUpperCase() !== 'CANCELLED' && (
                                         <Button
                                             icon={IconOutline.PencilIcon}
                                             size='sm'