ccredit user

src/pages/payment/PayInvoice.tsx

@@ -1,4 +1,4 @@
-import { type FC, useState } from 'react'
+import { type FC, useState, useMemo, useEffect } from 'react'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 import { useParams } from 'react-router-dom'
@@ -17,10 +17,16 @@ import { toast } from '@/shared/toast'
 import type { ErrorType } from '@/helpers/types'
 import type { PayInvoiceParamsType } from './types/Types'
 import { PaymentGatewayEnum, PaymentMethodEnum } from './enum/Enum'
-const methodItems: ItemsSelectType[] = [
+import { useGetMe } from '../user/hooks/useUserData'
+
+const getMethodItems = (userCredit: number): ItemsSelectType[] => [
     { value: PaymentMethodEnum.Online, label: 'آنلاین' },
     { value: PaymentMethodEnum.Cash, label: 'نقد' },
-    { value: PaymentMethodEnum.Credit, label: 'اعتباری' },
+    {
+        value: PaymentMethodEnum.Credit,
+        label: 'اعتباری',
+        disabled: userCredit <= 0,
+    },
 ]
 
 const gatewayItems: ItemsSelectType[] = [
@@ -30,14 +36,26 @@ const gatewayItems: ItemsSelectType[] = [
 const formatPrice = (num: number) => `${NumberFormat(num)} تومان`
 
 const PayInvoice: FC = () => {
+
+    const { data: user } = useGetMe()
     const { id } = useParams()
     const { data, isPending } = useGetInvoiceDetail(id ?? '')
     const { mutate: payInvoice, isPending: isPaying } = usePayInvoice()
     const multiUpload = useMultiUpload()
     const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
 
+    const userCredit = user?.maxCredit ?? 0
+    const methodItems = useMemo(() => getMethodItems(userCredit), [userCredit])
+
     const invoice = data?.data
 
+    useEffect(() => {
+        if (userCredit <= 0 && formik.values.method === PaymentMethodEnum.Credit) {
+            formik.setFieldValue('method', PaymentMethodEnum.Online)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- only run when userCredit is known
+    }, [userCredit])
+
     const formik = useFormik<PayInvoiceParamsType>({
         initialValues: {
             amount: invoice?.balance ?? 0,
@@ -145,6 +163,10 @@ const PayInvoice: FC = () => {
                         <span className="text-[#8C90A3]">مانده:</span>
                         <span className="text-black font-medium">{formatPrice(invoice.balance)}</span>
                     </div>
+                    <div className="flex gap-1.5">
+                        <span className="text-[#8C90A3]">اعتبار:</span>
+                        <span className="text-black">{formatPrice(userCredit)}</span>
+                    </div>
                 </div>
             </div>