timing approve and quik access

src/pages/home/Home.tsx

@@ -37,7 +37,7 @@ const Home: FC = () => {
                     :
                     <div className='w-full flex gap-6'>
                         <div className='flex-1'>
-                            <Carousel autoplay className="rounded-xl overflow-hidden h-fit dltr z-[1]" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
+                            <Carousel autoplay className="rounded-xl carousel overflow-hidden h-fit dltr z-[1]" placeholder="" onPointerEnterCapture={() => { }} onPointerLeaveCapture={() => { }} >
                                 {
                                     getAds.data?.data?.ads?.map((item: AdsItemType) => {
                                         return (
@@ -129,6 +129,8 @@ const Home: FC = () => {
                                                 key={item.service.id}
                                                 item={item.service}
                                                 className='flex-1 min-w-[40%] xl:!min-w-[20%] xl:p-6 p-4 flex flex-col'
+                                                isQuikAccess
+                                                businessName={item.userSubscription.businessName}
                                             />
                                         )
                                     })

src/pages/home/types/HomeTypes.ts

@@ -8,4 +8,13 @@ export type QuikAccessItemType = {
   author: string;
   createDate: string;
   updatedAt: string;
+  userSubscription: {
+    id: string;
+    userId: string;
+    businessId: string;
+    businessName: string;
+    isActive: boolean;
+    createdAt: string;
+    updatedAt: string;
+  };
 };

src/pages/receipts/Detail.tsx

@@ -40,7 +40,7 @@ const ReceiptsDetail: FC = () => {
 
                 {
                     getInvoce.data?.data?.invoice?.status === 'PENDING' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ?
-                        <div className='flex gap-2 items-center w-full'>
+                        <div className='flex -mt-1 gap-2 items-center w-full'>
                             <div className='w-full xl:w-fit'>
                                 <Input
                                     className='bg-transparent border border-border xl:max-w-40'

src/pages/receipts/components/ApproveInvoice.tsx

@@ -10,6 +10,7 @@ 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,
@@ -22,6 +23,7 @@ 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>('')
@@ -47,6 +49,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
         requestApprove.mutate(params, {
             onSuccess: () => {
                 setShowModal(true)
+                reset()
             },
             onError: (error: ErrorType) => {
                 toast.error(error.response?.data?.error.message[0])
@@ -110,7 +113,25 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                             />
                         </div>
 
-                        <div className='mt-14 flex justify-end border-t border-border pt-8'>
+                        <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'
@@ -121,7 +142,7 @@ const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
                                     className='w-[150px] text-xs'
                                     onClick={handleConfrim}
                                     disabled={code.length !== 5}
-                                    isLoading={approveInvoce.isPending}
+                                    isLoading={approveInvoce.isPending || requestApprove.isPending}
                                 >
                                     <div className='flex gap-2 items-center'>
                                         <TickCircle