invoice charge wallet

src/pages/receipts/Detail.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import { useApplyDiscount, useGetInvoiceDetail, useRemoveDiscount } from './hooks/useReceiptData'
@@ -19,16 +19,21 @@ import { useGetProfile } from '../profile/hooks/useProfileData'
 import { toast } from 'react-toastify'
 import { ErrorType } from '../../helpers/types'
 import PDFGenerator from '../../components/PDFGenerator'
+import { useGetGetWays } from '../wallet/hooks/useWalletData'
+import { GatewayItemType } from '../wallet/types/WalletTypes'
 
 const ReceiptsDetail: FC = () => {
 
     const { id } = useParams()
     const { t } = useTranslation('global')
     const [code, setCode] = useState<string>('')
+    const [gateWayId, setGateWayId] = useState<string>('')
     const getProfile = useGetProfile()
     const getInvoce = useGetInvoiceDetail(id ? id : '')
     const applyDiscount = useApplyDiscount()
     const removeDiscount = useRemoveDiscount()
+    const getWays = useGetGetWays()
+
     const handleApplyDiscount = () => {
         const params: ApplyDiscountType = {
             id: id ? id : '',
@@ -57,6 +62,15 @@ const ReceiptsDetail: FC = () => {
         })
     }
 
+    useEffect(() => {
+
+        if (getWays.data) {
+            setGateWayId(getWays.data?.data?.paymentGateways?.[0]?.id)
+        }
+
+    }, [getWays.data])
+
+
     return (
         <div className='mt-4'>
             <Helmet>
@@ -291,9 +305,30 @@ const ReceiptsDetail: FC = () => {
                                         <PayInvoice
                                             id={id ? id : ''}
                                             refetch={getInvoce.refetch}
+                                            gateWayId={gateWayId}
                                         />
                                     </div>
                                 }
+                                {
+                                    getInvoce.data?.data?.remainingToCharge > 0 &&
+                                    <div className='flex mt-6 justify-center gap-2'>
+                                        {
+                                            getWays.data?.data?.paymentGateways?.map((item: GatewayItemType) => {
+                                                return (
+                                                    <div key={item.id} className={clx(
+                                                        'size-[72px] rounded-xl border border-border flex flex-col justify-center items-center',
+                                                        gateWayId === item.id && 'border-black'
+                                                    )}>
+                                                        <img src={item.logoUrl} className='w-8' />
+                                                        <div className='mt-1 text-[10px]'>
+                                                            {item.name}
+                                                        </div>
+                                                    </div>
+                                                )
+                                            })
+                                        }
+                                    </div>
+                                }
                             </div>