Merge pull request #968 from topcoder-platform/feat/wallet-admin

fix: filter payment listing by handle

Author: rakibansary

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

@@ -10,6 +10,7 @@ import { Winning, WinningDetail } from '../../../lib/models/WinningDetail'
 import { FilterBar } from '../../../lib'
 import { ConfirmFlowData } from '../../../lib/models/ConfirmFlowData'
 import { PaginationInfo } from '../../../lib/models/PaginationInfo'
+import PaymentEditForm from '../../../lib/components/payment-edit/PaymentEdit'
 import PaymentsTable from '../../../lib/components/payments-table/PaymentTable'
 
 import styles from './Payments.module.scss'
@@ -72,6 +73,7 @@ const formatCurrency = (amountStr: string, currency: string): string => {
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const ListView: FC<ListViewProps> = (props: ListViewProps) => {
     const [confirmFlow, setConfirmFlow] = React.useState<ConfirmFlowData | undefined>(undefined)
+    const [isConfirmFormValid, setIsConfirmFormValid] = React.useState<boolean>(false)
     const [winnings, setWinnings] = React.useState<ReadonlyArray<Winning>>([])
     const [selectedPayments, setSelectedPayments] = React.useState<{ [paymentId: string]: Winning }>({})
     const [isLoading, setIsLoading] = React.useState<boolean>(false)
@@ -106,7 +108,6 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
             }
 
             return {
-                canBeReleased: new Date(payment.releaseDate) <= new Date() && payment.details[0].status === 'OWED',
                 createDate: formatIOSDateString(payment.createdAt),
                 currency: payment.details[0].currency,
                 datePaid: payment.details[0].datePaid ? formatIOSDateString(payment.details[0].datePaid) : '-',
@@ -319,17 +320,21 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                                         currentPage: pageNumber,
                                     })
                                 }}
-                                // onPayMeClick={async function onPayMeClicked(
-                                //     paymentIds: { [paymentId: string]: Winning },
-                                //     totalAmount: string,
-                                // ) {
-                                //     setConfirmFlow({
-                                //         action: 'Yes',
-                                //         callback: () => processPayouts(Object.keys(paymentIds)),
-                                //         content: `You are about to process payments for a total of USD ${totalAmount}`,
-                                //         title: 'Are you sure?',
-                                //     })
-                                // }}
+                                onPaymentEditClick={function onPaymentEditClicked(payment: Winning) {
+                                    setConfirmFlow({
+                                        action: 'Save',
+                                        callback: () => console.log('Edit payment:', payment),
+                                        content: (
+                                            <PaymentEditForm
+                                                payment={payment}
+                                                onErrorStateChanged={function onErrorStateChanged(error: boolean) {
+                                                    setIsConfirmFormValid(!error)
+                                                }}
+                                            />
+                                        ),
+                                        title: 'Edit Payment',
+                                    })
+                                }}
                             />
                         )}
                         {!isLoading && winnings.length === 0 && (
@@ -355,6 +360,7 @@ const ListView: FC<ListViewProps> = (props: ListViewProps) => {
                         confirmFlow.callback?.()
                         setConfirmFlow(undefined)
                     }}
+                    canSave={isConfirmFormValid}
                     open={confirmFlow !== undefined}
                 >
                     <div>{renderConfirmModalContent}</div>

src/apps/wallet-admin/src/lib/components/index.ts

@@ -2,3 +2,4 @@ export * from './setting-section'
 export * from './info-row'
 export * from './chip'
 export * from './filter-bar'
+export * from './payment-edit'

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

@@ -0,0 +1,64 @@
+/* eslint-disable react/jsx-no-bind */
+import React, { useEffect, useState } from 'react'
+
+import { Winning } from '../../models/WinningDetail'
+
+interface PaymentEditFormProps {
+    payment: Winning;
+    onErrorStateChanged: (error: boolean) => void;
+}
+
+const PaymentEditForm: React.FC<PaymentEditFormProps> = (props: PaymentEditFormProps) => {
+    const [formData, setFormData] = useState({
+        description: props.payment.description || '',
+    })
+    const [errors, setErrors] = useState<any>({})
+
+    useEffect(() => {
+        const validateForm = (): boolean => {
+            let formIsValid = true
+            const validationErrors: { [key: string]: string } = {}
+
+            if (!formData.description) {
+                formIsValid = false
+                validationErrors.description = 'Description is required.'
+            }
+
+            setErrors(validationErrors)
+            props.onErrorStateChanged(!formIsValid)
+
+            return formIsValid
+        }
+
+        setFormData({
+            description: props.payment.description || '',
+        })
+
+        validateForm()
+    }, [props.payment, formData, props.onErrorStateChanged, props])
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+        const { name, value } : {
+            name: string;
+            value: string;
+        } = e.target
+
+        setFormData(prevState => ({
+            ...prevState,
+            [name]: value,
+        }))
+    }
+
+    return (
+        <form>
+            <div>
+                <label>Description</label>
+                <input name='description' value={formData.description} onChange={handleChange} />
+                {errors.description && <p>{errors.description}</p>}
+            </div>
+        </form>
+    )
+
+}
+
+export default PaymentEditForm

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

@@ -0,0 +1 @@
+export { default as PaymentEdit } from './PaymentEdit'

src/apps/wallet-admin/src/lib/components/payment-edit/index.ts

@@ -13,6 +13,7 @@ interface PaymentTableProps {
     selectedPayments?: { [paymentId: string]: Winning };
     currentPage: number;
     numPages: number;
+    onPaymentEditClick: (payment: Winning) => void;
     onNextPageClick: () => void;
     onPreviousPageClick: () => void;
     onPageClick: (pageNumber: number) => void;
@@ -58,8 +59,10 @@ const PaymentsTable: React.FC<PaymentTableProps> = (props: PaymentTableProps) =>
                                 <td>
                                     {payment.status.toUpperCase() !== 'PAID' && (
                                         <Button
+                                            disabled
                                             icon={IconOutline.PencilIcon}
                                             size='sm'
+                                            onClick={() => props.onPaymentEditClick(payment)}
                                         />
                                     )}
                                 </td>

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

@@ -19,7 +19,6 @@ export interface Winning {
     status: string
     releaseDate: string
     datePaid: string
-    canBeReleased: boolean
     currency: string
     details: PaymentDetail[]
 }

src/apps/wallet-admin/src/lib/models/WinningDetail.ts

@@ -57,12 +57,18 @@ export async function getPayments(limit: number, offset: number, filters: Record
         }
     }
 
-    const payload = {
+    const payload: {
+        limit: number, offset: number, winnerIds?: string[], [key: string]: string | number | string[] | undefined
+    } = {
         limit,
         offset,
         ...filteredFilters,
     }
 
+    if (filters.winnerIds && filters.winnerIds.length > 0) {
+        payload.winnerIds = filters.winnerIds
+    }
+
     const body = JSON.stringify(payload)
 
     const url = `${baseUrl}/admin/winnings/search`

src/apps/wallet-admin/src/lib/services/wallet.ts

@@ -8,6 +8,7 @@ export interface ConfirmModalProps extends ModalProps {
     action?: string
     onConfirm: () => void
     title: string
+    canSave?: boolean
 }
 
 const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) => (
@@ -24,6 +25,7 @@ const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) => (
                     tabIndex={1}
                 />
                 <Button
+                    disabled={props.canSave === false}
                     primary
                     label={props.action || 'Confirm'}
                     onClick={props.onConfirm}