withdraw request accept

src/pages/reseller/Withdraw.tsx

@@ -6,10 +6,10 @@ import Td from '../../components/Td'
 import { WithDrawItemType } from './types/Types'
 import { NumberFormat } from '../../config/func'
 import moment from 'moment-jalaali'
-import Button from '../../components/Button'
 import Pagination from '../../components/Pagination'
 import DefaulModal from '../../components/DefaulModal'
 import Input from '../../components/Input'
+import Payment from './components/Payment'
 
 const Withdraw: FC = () => {
 
@@ -49,10 +49,12 @@ const Withdraw: FC = () => {
                                                 <Td text={item?.user?.firstName + ' ' + item.user?.lastName} />
                                                 <Td text={item?.paidAt ? moment(item.paidAt).format('jYYYY-jMM-jDD') : '-'} />
                                                 <Td text=''>
-                                                    <Button
-                                                        className='w-fit px-4'
-                                                        label='پرداخت'
-                                                    />
+                                                    {
+                                                        !item.paidAt ?
+                                                            <Payment id={item.id} refetch={getWithdraw.refetch} />
+                                                            :
+                                                            <span className='text-green-400 font-bold'>پرداخت شده</span>
+                                                    }
                                                 </Td>
                                             </tr>
                                         )

src/pages/reseller/components/Payment.tsx

@@ -1,8 +1,71 @@
-import { type FC } from 'react'
+import { useState, type FC } from 'react'
+import Button from '../../../components/Button'
+import DefaulModal from '../../../components/DefaulModal'
+import { usePayment } from '../hooks/useResellerData'
+import Input from '../../../components/Input'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    id: string,
+    refetch: () => void,
+}
+
+const Payment: FC<Props> = ({ id, refetch }) => {
+
+    const payment = usePayment()
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const [transactionId, setTransactionId] = useState<string>('')
+
+    const handleSubmit = () => {
+        if (transactionId.length > 0) {
+            payment.mutate({ id: id, transactionId: transactionId }, {
+                onSuccess: () => {
+                    toast('با موفقت ثبت شد')
+                    setTransactionId('')
+                    refetch()
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error.message[0])
+                }
+            })
+        } else {
+            toast.error('شماره تراکنش رو پر کنید')
+        }
+    }
 
-const Payment: FC = () => {
     return (
-        <div>Payment</div>
+        <div>
+            <Button
+                className='w-fit px-4'
+                label='پرداخت'
+                onClick={() => setShowModal(true)}
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='پرداخت'
+            >
+                <div className='mt-4'>
+                    <Input
+                        value={transactionId}
+                        onChange={(e) => setTransactionId(e.target.value)}
+                        label='شماره تراکنش'
+                    />
+                </div>
+
+                <div className='mt-5'>
+                    <Button
+                        label='ثبت'
+                        onClick={handleSubmit}
+                        isLoading={payment.isPending}
+                    />
+                </div>
+
+            </DefaulModal>
+        </div>
     )
 }
 

src/pages/reseller/hooks/useResellerData.ts

@@ -20,3 +20,9 @@ export const useGetWithdraws = (page: number) => {
     queryFn: () => api.getWithDraws(page),
   });
 };
+
+export const usePayment = () => {
+  return useMutation({
+    mutationFn: api.payment,
+  });
+};

src/pages/reseller/service/ResellerService.ts

@@ -1,5 +1,5 @@
 import axios from "../../../config/axios";
-import { CreateResellerType } from "../types/Types";
+import { CreateResellerType, PaymentType } from "../types/Types";
 
 export const getResellers = async () => {
   const { data } = await axios.get(`/reseller`);
@@ -17,3 +17,11 @@ export const getWithDraws = async (page: number) => {
   );
   return data;
 };
+
+export const payment = async (params: PaymentType) => {
+  const { data } = await axios.patch(
+    `/reseller/withdraw-request/${params.id}`,
+    params,
+  );
+  return data;
+};

src/pages/reseller/types/Types.ts

@@ -18,3 +18,8 @@ export type WithDrawItemType = {
   requestedAmount: string;
   paidAt: string;
 };
+
+export type PaymentType = {
+  transactionId: string;
+  id: string;
+};