ticket

2025-05-19 16:13:42 +03:30
parent f7e4548c96
commit 3d3ffd05f4
34 changed files with 1809 additions and 408 deletions
@@ -0,0 +1,165 @@
+import { Fragment, FC, useState } from 'react'
+import Button from '../../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useApproveInvoice, useRequestApprove } 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'
+import { useCountDown } from '../../../hooks/useCountDown'
+
+type Props = {
+    id: string,
+    refetch: () => void,
+    status: string
+}
+
+const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
+
+    const approveInvoce = useApproveInvoice()
+    const requestApprove = useRequestApprove()
+    const getProfile = useGetProfile()
+    const { value, reset } = useCountDown(2, true)
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const { t } = useTranslation('global')
+    const [code, setCode] = useState<string>('')
+
+    const handleConfrim = () => {
+        approveInvoce.mutate({ code: code, id: id, phone: getProfile.data?.data?.user?.phone }, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                refetch()
+                setShowModal(false)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    const handleShowModal = () => {
+        const params: RequestApproveInvoiceType = {
+            id: id,
+            phone: getProfile.data?.data?.user?.phone
+        }
+        requestApprove.mutate(params, {
+            onSuccess: () => {
+                setShowModal(true)
+                reset()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    if (status === 'PENDING' || status === 'WAIT_PAYMENT' && getProfile.isSuccess)
+        return (
+            <Fragment>
+                <Button
+                    disabled={approveInvoce.isPending || requestApprove.isPending}
+                    onClick={() => status === 'PENDING' ? handleShowModal() : null}
+                    className={clx(
+                        'px-9 w-fit bg-white bg-opacity-70 text-description',
+                        status === 'WAIT_PAYMENT' && 'bg-green-300 text-[#00BA4B] bg-opacity-10'
+                    )}
+                >
+                    <div className='flex gap-2.5'>
+                        <TickCircle
+                            size={20}
+                            color={status === 'PENDING' ? '#888888' : '#00BA4B'}
+                        />
+                        <div className='whitespace-nowrap'>
+                            {
+                                status === 'WAIT_PAYMENT' ?
+                                    t('receip.accepted')
+                                    :
+                                    t('receip.confrim_factor')
+                            }
+                        </div>
+                    </div>
+                </Button>
+
+                <DefaulModal
+                    open={showModal}
+                    close={() => setShowModal(false)}
+                    isHeader
+                    title_header={t('profile.confrim')}
+                >
+                    <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='flex mt-7 justify-center'>
+                            {
+                                value !== '00:00' ?
+                                    <div className='flex gap-1 text-description text-xs'>
+                                        <div>{value}</div>
+                                        <div>{t('auth.counter_otp')}</div>
+                                    </div>
+                                    :
+                                    <div onClick={handleShowModal} className='flex cursor-pointer gap-1 pl-2  text-black text-sm'>
+                                        <div className=''>
+                                            {t('auth.try_again')}
+                                        </div>
+                                    </div>
+
+                            }
+
+                        </div>
+
+                        <div className='mt-10 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}
+                                    isLoading={approveInvoce.isPending || requestApprove.isPending}
+                                >
+                                    <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
+}
+
+export default ApproveInvoice