ccredit user

src/components/Select.tsx

@@ -5,6 +5,7 @@ import { ArrowDown2 } from 'iconsax-react'
 export type ItemsSelectType = {
     value: string,
     label: string,
+    disabled?: boolean,
 }
 type Props = {
     className?: string,
@@ -38,7 +39,7 @@ const Select: FC<Props> = (props: Props) => {
                     {
                         props.items?.map((item) => {
                             return (
-                                <option key={item.value} value={item.value}>
+                                <option key={item.value} value={item.value} disabled={item.disabled}>
                                     {item.label}
                                 </option>
                             )

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>
 

src/pages/user/hooks/useUserData.ts

@@ -0,0 +1,9 @@
+import { useQuery } from "@tanstack/react-query";
+import * as api from "../service/UserService";
+
+export const useGetMe = () => {
+  return useQuery({
+    queryKey: ["me"],
+    queryFn: api.getMe,
+  });
+};

src/pages/user/service/UserService.ts

@@ -0,0 +1,7 @@
+import axios from "@/config/axios";
+import type { GetMeResponseType } from "@/pages/user/types/Types";
+
+export const getMe = async (): Promise<GetMeResponseType["data"]> => {
+  const { data } = await axios.get<GetMeResponseType>("/public/users/me");
+  return data.data;
+};

src/pages/user/types/Types.ts

@@ -0,0 +1,16 @@
+import type { BaseResponse } from "@/shared/types/Types";
+
+export interface UserMeType {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  isActive: boolean;
+  gender: boolean;
+  maxCredit: number;
+  addresse: string | null;
+  phone: string;
+}
+
+export type GetMeResponseType = BaseResponse<UserMeType>;