invoice pay approve , ...

src/pages/receipts/Detail.tsx

@@ -11,6 +11,9 @@ import LegalInfo from './components/LegalInfo'
 import RealInfo from './components/RealInfo'
 import RegisterInfo from './components/RegisterInfo'
 import { clx } from '../../helpers/utils'
+import Button from '../../components/Button'
+import ApproveInvoice from './components/ApproveInvoice'
+import PayInvoice from './components/PayInvoice'
 
 const ReceiptsDetail: FC = () => {
 
@@ -21,8 +24,10 @@ const ReceiptsDetail: FC = () => {
 
     return (
         <div className='mt-4'>
-            <div>
-                {t('receip.detail_account')}
+            <div className='flex gap-6 items-center'>
+                <div>{t('receip.detail_account')}</div>
+
+                <ApproveInvoice status={getInvoce.data?.data?.invoice?.status} id={id ? id : ''} refetch={getInvoce.refetch} />
             </div>
 
             {
@@ -107,13 +112,17 @@ const ReceiptsDetail: FC = () => {
                         </div>
 
                         <div className='bg-white xl:w-sidebar text-sm h-fit rounded-3xl p-8'>
+                            <div className='p-6 bg-green-50 rounded-2xl text-green-400 text-xs mb-6'>
+                                <p>{t('receip.thank_pay_1')}</p>
+                                <p className='mt-1'>{t('receip.thank_pay_2')}</p>
+                            </div>
                             <div className='flex justify-between items-center'>
                                 <div>
                                     {t('receip.receip_information')}
                                 </div>
                                 <div className={clx(
                                     'border border-orange-400 text-orange-400 rounded-lg text-[9px] h-6 flex items-center px-1',
-                                    getInvoce.data?.data?.invoice?.status === 'PAID' ? 'border-green-400 text-green-400' : getInvoce.data?.data?.invoice?.status !== 'PENDING' ? 'border-red-400 text-red-400' : 'border-orange-400 text-orange-400'
+                                    getInvoce.data?.data?.invoice?.status === 'PAID' || getInvoce.data?.data?.invoice?.status === 'APPROVED' ? 'border-green-400 text-green-400' : getInvoce.data?.data?.invoice?.status !== 'PENDING' ? 'border-red-400 text-red-400' : 'border-orange-400 text-orange-400'
                                 )}>
                                     <div>{t(`receip.${getInvoce.data?.data?.invoice?.status}`)}</div>
                                 </div>
@@ -152,6 +161,20 @@ const ReceiptsDetail: FC = () => {
                                         {t(`receip.${getInvoce.data?.data?.invoice?.status}`)}
                                     </div>
                                 </div>
+
+                                {
+                                    getInvoce.data?.data?.invoice?.status === 'APPROVED' &&
+                                    <div className='flex gap-4 items-center mt-8'>
+                                        <Button
+                                            label={t('receip.get_factor')}
+                                            className='bg-[#E8E8E8] text-description text-xs'
+                                        />
+                                        <PayInvoice
+                                            id={id ? id : ''}
+                                            refetch={getInvoce.refetch}
+                                        />
+                                    </div>
+                                }
                             </div>
 
 

src/pages/receipts/components/ApproveInvoice.tsx

@@ -0,0 +1,74 @@
+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 } from '../hooks/useReceiptData'
+import { ErrorType } from '../../../helpers/types'
+import { toast } from 'react-toastify'
+import { clx } from '../../../helpers/utils'
+
+type Props = {
+    id: string,
+    refetch: () => void,
+    status: string
+}
+
+const ApproveInvoice: FC<Props> = ({ id, refetch, status }) => {
+
+    const approveInvoce = useApproveInvoice()
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const { t } = useTranslation('global')
+
+    const handleConfrim = () => {
+        approveInvoce.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                refetch()
+                setShowModal(false)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    if (status === 'PENDING' || status === 'APPROVED')
+        return (
+            <Fragment>
+                <Button
+                    onClick={() => status === 'PENDING' ? setShowModal(true) : null}
+                    className={clx(
+                        'px-9 w-fit bg-white bg-opacity-70 text-description',
+                        status === 'APPROVED' && 'bg-green-300 text-[#00BA4B] bg-opacity-10'
+                    )}
+                >
+                    <div className='flex gap-2.5'>
+                        <TickCircle
+                            size={20}
+                            color={status === 'PENDING' ? '#888888' : '#00BA4B'}
+                        />
+                        <div>
+                            {
+                                status === 'APPROVED' ?
+                                    t('receip.accepted')
+                                    :
+                                    t('receip.confrim_factor')
+                            }
+                        </div>
+                    </div>
+                </Button>
+
+                <ModalConfrim
+                    isOpen={showModal}
+                    close={() => setShowModal(false)}
+                    onConfrim={handleConfrim}
+                    label={t('receip.sure_confrim_pay')}
+                    isLoading={approveInvoce.isPending}
+                />
+            </Fragment>
+        )
+    else return null
+}
+
+export default ApproveInvoice

src/pages/receipts/components/PayInvoice.tsx

@@ -0,0 +1,52 @@
+import { FC, Fragment, useState } from 'react'
+import Button from '../../../components/Button'
+import { useTranslation } from 'react-i18next'
+import { usePayInvoice } from '../hooks/useReceiptData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+import ModalConfrim from '../../../components/ModalConfrim'
+
+type Props = {
+    id: string,
+    refetch: () => void,
+}
+
+const PayInvoice: FC<Props> = ({ id, refetch }) => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const payInvoice = usePayInvoice()
+
+
+    const handleConfrim = () => {
+        payInvoice.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                refetch()
+                setShowModal(false)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error.message[0])
+            }
+        })
+    }
+
+    return (
+        <Fragment>
+            <Button
+                label={t('receip.pay')}
+                onClick={() => setShowModal(true)}
+            />
+
+            <ModalConfrim
+                isOpen={showModal}
+                close={() => setShowModal(false)}
+                onConfrim={handleConfrim}
+                label={t('receip.sure_confrim_pay')}
+                isLoading={payInvoice.isPending}
+            />
+        </Fragment>
+    )
+}
+
+export default PayInvoice

src/pages/receipts/hooks/useReceiptData.ts

@@ -1,4 +1,4 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ReceiptService";
 
 export const useGetInvoices = (status: string) => {
@@ -15,3 +15,15 @@ export const useGetInvoiceDetail = (id: string) => {
     enabled: !!id,
   });
 };
+
+export const useApproveInvoice = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.approveInvoice(variables),
+  });
+};
+
+export const usePayInvoice = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.payInvoice(variables),
+  });
+};

src/pages/receipts/service/ReceiptService.ts

@@ -9,3 +9,13 @@ export const getInvoiceDetail = async (id: string) => {
   const { data } = await axios.get(`/invoices/${id}`);
   return data;
 };
+
+export const approveInvoice = async (id: string) => {
+  const { data } = await axios.patch(`/invoices/${id}/approve`);
+  return data;
+};
+
+export const payInvoice = async (id: string) => {
+  const { data } = await axios.post(`/invoices/${id}/pay`);
+  return data;
+};