new UX for new request

src/pages/payment/PayInvoice.tsx

@@ -1,7 +1,9 @@
 import { type FC, useState, useMemo, useEffect } from 'react'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
-import { useParams } from 'react-router-dom'
+import { Link, useParams } from 'react-router-dom'
+import { useQueryClient } from '@tanstack/react-query'
+import { Paths } from '@/config/Paths'
 import Input from '@/components/Input'
 import Select from '@/components/Select'
 import type { ItemsSelectType } from '@/components/Select'
@@ -39,10 +41,12 @@ const PayInvoice: FC = () => {
 
     const { data: user } = useGetMe()
     const { id } = useParams()
+    const queryClient = useQueryClient()
     const { data, isPending } = useGetInvoiceDetail(id ?? '')
     const { mutate: payInvoice, isPending: isPaying } = usePayInvoice()
     const multiUpload = useMultiUpload()
     const [attachmentFiles, setAttachmentFiles] = useState<File[]>([])
+    const [isPaymentDone, setIsPaymentDone] = useState(false)
 
     const userCredit = user?.maxCredit ?? 0
     const methodItems = useMemo(() => getMethodItems(userCredit), [userCredit])
@@ -103,13 +107,25 @@ const PayInvoice: FC = () => {
                     },
                 },
                 {
-                    onSuccess: (res) => {
+                    onSuccess: (res, variables) => {
                         const paymentUrl = res?.data?.paymentUrl
                         if (paymentUrl) {
                             toast('در حال انتقال به درگاه پرداخت', 'success')
                             window.location.href = paymentUrl
                             return
                         }
+
+                        const method = variables.params.method
+                        if (
+                            method === PaymentMethodEnum.Cash ||
+                            method === PaymentMethodEnum.Credit
+                        ) {
+                            queryClient.invalidateQueries({ queryKey: ['invoice', id] })
+                            queryClient.invalidateQueries({ queryKey: ['payment', id] })
+                            setIsPaymentDone(true)
+                            return
+                        }
+
                         toast('پرداخت با موفقیت ثبت شد', 'success')
                     },
                     onError: (error: ErrorType) => {
@@ -139,6 +155,27 @@ const PayInvoice: FC = () => {
         )
     }
 
+    if (isPaymentDone) {
+        return (
+            <div className="mt-4 text-sm">
+                <div className="bg-white rounded-2xl p-8 flex flex-col items-center justify-center min-h-[280px] gap-6">
+                    <TickCircle size={64} color="#22C55E" variant="Bold" />
+                    <div className="text-center">
+                        <div className="text-lg font-medium text-black mb-2">پرداخت انجام شد</div>
+                        <p className="text-xs text-[#8C90A3]">
+                            پرداخت شما با موفقیت ثبت شد.
+                        </p>
+                    </div>
+                    <Link to={`${Paths.proformaInvoice}/${id}`} className="w-full max-w-xs">
+                        <Button type="button" className="w-full">
+                            بازگشت به جزئیات صورت حساب
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+        )
+    }
+
     return (
         <div className="mt-4 text-sm">
             <div className="text-sm mb-6">پرداخت صورت حساب</div>