diff --git a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx b/src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx index c608e7e4c..d730a333e 100644 --- a/src/apps/wallet-admin/src/home/tabs/payments/PaymentsTab.tsx +++ b/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 = (props: ListViewProps) => { const [confirmFlow, setConfirmFlow] = React.useState(undefined) + const [isConfirmFormValid, setIsConfirmFormValid] = React.useState(false) const [winnings, setWinnings] = React.useState>([]) const [selectedPayments, setSelectedPayments] = React.useState<{ [paymentId: string]: Winning }>({}) const [isLoading, setIsLoading] = React.useState(false) @@ -106,7 +108,6 @@ const ListView: FC = (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 = (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: ( + + ), + title: 'Edit Payment', + }) + }} /> )} {!isLoading && winnings.length === 0 && ( @@ -355,6 +360,7 @@ const ListView: FC = (props: ListViewProps) => { confirmFlow.callback?.() setConfirmFlow(undefined) }} + canSave={isConfirmFormValid} open={confirmFlow !== undefined} >
{renderConfirmModalContent}
diff --git a/src/apps/wallet-admin/src/lib/components/index.ts b/src/apps/wallet-admin/src/lib/components/index.ts index 6f213563b..0a0a66adc 100644 --- a/src/apps/wallet-admin/src/lib/components/index.ts +++ b/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' diff --git a/src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.module.scss b/src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.tsx b/src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.tsx new file mode 100644 index 000000000..26b71677d --- /dev/null +++ b/src/apps/wallet-admin/src/lib/components/payment-edit/PaymentEdit.tsx @@ -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 = (props: PaymentEditFormProps) => { + const [formData, setFormData] = useState({ + description: props.payment.description || '', + }) + const [errors, setErrors] = useState({}) + + 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): void => { + const { name, value } : { + name: string; + value: string; + } = e.target + + setFormData(prevState => ({ + ...prevState, + [name]: value, + })) + } + + return ( +
+
+ + + {errors.description &&

{errors.description}

} +
+
+ ) + +} + +export default PaymentEditForm diff --git a/src/apps/wallet-admin/src/lib/components/payment-edit/index.ts b/src/apps/wallet-admin/src/lib/components/payment-edit/index.ts new file mode 100644 index 000000000..f6a24d217 --- /dev/null +++ b/src/apps/wallet-admin/src/lib/components/payment-edit/index.ts @@ -0,0 +1 @@ +export { default as PaymentEdit } from './PaymentEdit' diff --git a/src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx b/src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx index 8d0dd2c4d..8bce7a864 100644 --- a/src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx +++ b/src/apps/wallet-admin/src/lib/components/payments-table/PaymentTable.tsx @@ -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 = (props: PaymentTableProps) => {payment.status.toUpperCase() !== 'PAID' && (