invoice otp

src/pages/receipts/components/ApproveInvoice.tsx

@@ -2,11 +2,14 @@ import { Fragment, FC, useState } from 'react'
 import Button from '../../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
-import ModalConfrim from '../../../components/ModalConfrim'
+import { useApproveInvoice, useRequestApprove } from '../hooks/useReceiptData'
-import { useApproveInvoice } from '../hooks/useReceiptData'
 import { ErrorType } from '../../../helpers/types'
 import { toast } from 'react-toastify'
 import { clx } from '../../../helpers/utils'
+import { useGetProfile } from '../../profile/hooks/useProfileData'
+import { RequestApproveInvoiceType } from '../types/ReceiptTypes'
+import DefaulModal from '../../../components/DefaulModal'
+import OTPInput from 'react-otp-input'
 
 type Props = {
     id: string,
@@ -17,11 +20,14 @@ type Props = {
 const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
 
     const approveInvoce = useApproveInvoice()
+    const requestApprove = useRequestApprove()
+    const getProfile = useGetProfile()
     const [showModal, setShowModal] = useState<boolean>(false)
     const { t } = useTranslation('global')
+    const [code, setCode] = useState<string>('')
 
     const handleConfrim = () => {
-        approveInvoce.mutate(id, {
+        approveInvoce.mutate({ code: code, id: id, phone: getProfile.data?.data?.user?.phone }, {
             onSuccess: () => {
                 toast.success(t('success'))
                 refetch()
@@ -33,11 +39,27 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
         })
     }
 
-    if (status === 'PENDING' || status === 'APPROVED')
+    const handleShowModal = () => {
+        const params: RequestApproveInvoiceType = {
+            id: id,
+            phone: getProfile.data?.data?.user?.phone
+        }
+        requestApprove.mutate(params, {
+            onSuccess: () => {
+                setShowModal(true)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    if (status === 'PENDING' || status === 'APPROVED' && getProfile.isSuccess)
         return (
             <Fragment>
                 <Button
-                    onClick={() => status === 'PENDING' ? setShowModal(true) : null}
+                    isLoading={approveInvoce.isPending || requestApprove.isPending}
+                    onClick={() => status === 'PENDING' ? handleShowModal() : null}
                     className={clx(
                         'px-9 w-fit bg-white bg-opacity-70 text-description',
                         status === 'APPROVED' && 'bg-green-300 text-[#00BA4B] bg-opacity-10'
@@ -59,13 +81,60 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                     </div>
                 </Button>
 
-                <ModalConfrim
+                <DefaulModal
-                    isOpen={showModal}
+                    open={showModal}
                     close={() => setShowModal(false)}
-                    onConfrim={handleConfrim}
+                    isHeader
-                    label={t('receip.sure_confrim_pay')}
+                    title_header={t('profile.confrim_email')}
-                    isLoading={approveInvoce.isPending}
+                >
-                />
+                    <div className='mt-7'>
+                        <div className='text-xs text-center'>
+                            کد تایید به شماره {getProfile.data?.data?.user?.phone} ارسال شده است.برای تایید  کد مربوطه را وارد کنید.
+                        </div>
+
+                        <div className='mt-10'>کد تایید</div>
+                        <div className='mt-2 w-full flex justify-center dltr otp'>
+                            <OTPInput
+                                value={code}
+                                onChange={setCode}
+                                shouldAutoFocus
+                                numInputs={5}
+                                renderInput={(props) =>
+                                    <input
+                                        {...props}
+                                        type='tel'
+                                        autoComplete="one-time-code"
+                                        inputMode="numeric"
+                                        className='w-full h-[50px] flex-1 mx-2  bg-white bg-opacity-30 border rounded-2.5' />
+                                }
+                            />
+                        </div>
+
+                        <div className='mt-14 flex justify-end border-t border-border pt-8'>
+                            <div className='flex gap-5'>
+                                <Button
+                                    className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
+                                    label='لغو'
+                                    onClick={() => setShowModal(false)}
+                                />
+                                <Button
+                                    className='w-[150px] text-xs'
+                                    onClick={handleConfrim}
+                                    disabled={code.length !== 5}
+                                >
+                                    <div className='flex gap-2 items-center'>
+                                        <TickCircle
+                                            size={20}
+                                            color='white'
+                                        />
+                                        <div>{t('save')}</div>
+                                    </div>
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
+                </DefaulModal>
             </Fragment>
         )
     else return null

src/pages/receipts/hooks/useReceiptData.ts

@@ -1,5 +1,9 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ReceiptService";
+import {
+  ApproveInvoiceType,
+  RequestApproveInvoiceType,
+} from "../types/ReceiptTypes";
 
 export const useGetInvoices = (status: string) => {
   return useQuery({
@@ -18,7 +22,8 @@ export const useGetInvoiceDetail = (id: string) => {
 
 export const useApproveInvoice = () => {
   return useMutation({
-    mutationFn: (variables: string) => api.approveInvoice(variables),
+    mutationFn: (variables: ApproveInvoiceType) =>
+      api.approveInvoice(variables),
   });
 };
 
@@ -30,6 +35,7 @@ export const usePayInvoice = () => {
 
 export const useRequestApprove = () => {
   return useMutation({
-    mutationFn: (variables: string) => api.requestApprove(variables),
+    mutationFn: (variables: RequestApproveInvoiceType) =>
+      api.requestApprove(variables),
   });
 };

src/pages/receipts/service/ReceiptService.ts

@@ -1,4 +1,8 @@
 import axios from "../../../config/axios";
+import {
+  ApproveInvoiceType,
+  RequestApproveInvoiceType,
+} from "../types/ReceiptTypes";
 
 export const getInvoice = async (status: string) => {
   const { data } = await axios.get(`/invoices/user?status=${status}`);
@@ -10,13 +14,16 @@ export const getInvoiceDetail = async (id: string) => {
   return data;
 };
 
-export const requestApprove = async (id: string) => {
+export const requestApprove = async (params: RequestApproveInvoiceType) => {
-  const { data } = await axios.patch(`/invoices/${id}/approve/request`);
+  const { data } = await axios.post(
+    `/invoices/${params.id}/approve/request`,
+    params
+  );
   return data;
 };
 
-export const approveInvoice = async (id: string) => {
+export const approveInvoice = async (params: ApproveInvoiceType) => {
-  const { data } = await axios.patch(`/invoices/${id}/approve`);
+  const { data } = await axios.patch(`/invoices/${params.id}/approve`, params);
   return data;
 };