diff --git a/src/components/collections/AddPayment.jsx b/src/components/collections/AddPayment.jsx index 71b87edf..2bc97494 100644 --- a/src/components/collections/AddPayment.jsx +++ b/src/components/collections/AddPayment.jsx @@ -1,11 +1,179 @@ -import React from 'react' +import { zodResolver } from "@hookform/resolvers/zod"; +import React, { useState } from "react"; +import { FormProvider, useForm } from "react-hook-form"; +import { defaultPayment, paymentSchema } from "./collectionSchema"; +import Label from "../common/Label"; +import DatePicker from "../common/DatePicker"; +import { formatDate } from "date-fns"; +import { useCollectionContext } from "../../pages/collections/CollectionPage"; +import { useAddPayment, useCollection } from "../../hooks/useCollections"; +import { formatFigure, localToUtc } from "../../utils/appUtils"; +import { formatUTCToLocalTime } from "../../utils/dateUtils"; +import Avatar from "../common/Avatar"; +import { PaymentHistorySkeleton } from "./CollectionSkeleton"; + +const AddPayment = ({ onClose }) => { + const { addPayment } = useCollectionContext(); + const { data, isLoading, isError, error } = useCollection( + addPayment?.invoiceId + ); + const methods = useForm({ + resolver: zodResolver(paymentSchema), + defaultValues: defaultPayment, + }); + const { + control, + register, + handleSubmit, + reset, + formState: { errors }, + } = methods; + const { mutate: AddPayment, isPending } = useAddPayment(() => { + handleClose(); + }); + const onSubmit = (formData) => { + const payload = { + ...formData, + paymentReceivedDate: localToUtc(formData.paymentReceivedDate), + invoiceId: addPayment.invoiceId, + }; + + AddPayment(payload); + }; + const handleClose = (formData) => { + reset(defaultPayment); + onClose(); + }; -const AddPayment = () => { return ( -
- -
- ) -} +
+
Add Payment
+ +
+
+
+ + + {errors.transactionId && ( + + {errors.transactionId.message} + + )} +
-export default AddPayment +
+ + + {errors.paymentReceivedDate && ( + + {errors.paymentReceivedDate.message} + + )} +
+ +
+ + + {errors.amount && ( + {errors.amount.message} + )} +
+ +
+ {" "} + + +
+
+
+
+ + {isLoading ? ( + + ) : ( + data?.receivedInvoicePayments?.length > 0 && ( +
+
+ History +
+ +
+ {data.receivedInvoicePayments.map((payment, index) => ( +
+
+
+

+ Date:{" "} + {formatUTCToLocalTime(payment.paymentReceivedDate)} +

{" "} + + {formatFigure(payment.amount, { + type: "currency", + currency: "INR", + })} + +
+ +
+
+

+ Transaction ID:{" "} + {payment.transactionId} +

+
+
+
+ Received By:{" "} + {" "} + {payment?.createdBy?.firstName}{" "} + {payment.createdBy?.lastName} +
+
+
+
+
+ ))} +
+
+ ) + )} +
+ ); +}; + +export default AddPayment; diff --git a/src/components/collections/CollectionList.jsx b/src/components/collections/CollectionList.jsx index 72ef34b1..ad4c06ae 100644 --- a/src/components/collections/CollectionList.jsx +++ b/src/components/collections/CollectionList.jsx @@ -19,7 +19,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => { true, searchDebounce ); - const {setProcessedPayment} = useCollectionContext() + const {setProcessedPayment,setAddPayment,setViewCollection} = useCollectionContext() const paginate = (page) => { if (page >= 1 && page <= (data?.totalPages ?? 1)) { @@ -183,7 +183,7 @@ const CollectionList = ({ fromDate, toDate, isPending, searchString }) => {