feat: fail fallback on reservation flow added

src/components/PaymentFailModal.tsx

@@ -0,0 +1,30 @@
+import { createPortal } from 'react-dom'
+import FailIcon from './FailIcon'
+
+interface PaymentFailModalProps {
+  onGoHome: () => void
+}
+
+// covers both a gateway-reported payment failure and a payment that succeeded but
+// whose reservation couldn't be created — same message, same recovery action either way
+export default function PaymentFailModal({ onGoHome }: PaymentFailModalProps) {
+  return createPortal(
+    <>
+      <div className="fixed inset-0 z-1100 bg-black/70" />
+      <div className="fixed inset-0 z-1100 flex items-center justify-center p-4">
+        <div className="w-full max-w-sm rounded-3xl bg-white p-6 text-center shadow-lg">
+          <FailIcon />
+          <p className="mt-6 text-gray-900">رزرو با خطا مواجه شد. لطفا دوباره تلاش کنید.</p>
+          <button
+            type="button"
+            onClick={onGoHome}
+            className="mt-4 w-full rounded-2xl bg-[#223D5D] py-4 text-lg font-semibold text-white"
+          >
+            بازگشت به صفحه اصلی
+          </button>
+        </div>
+      </div>
+    </>,
+    document.body,
+  )
+}

src/pages/PaymentSuccess.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import FailIcon from '../components/FailIcon'
 import InfoIcon from '../components/InfoIcon'
+import PaymentFailModal from '../components/PaymentFailModal'
 import SuccessIcon from '../components/SuccessIcon'
 import { createReservation, ReservationResult } from '../services/campaignApi'
 import { formatPersianNumber } from '../utils/formatNumber'
@@ -26,29 +26,31 @@ export default function PaymentSuccess() {
   const [searchParams] = useSearchParams()
   const isSuccess = searchParams.get('state') === SUCCESS_STATE
   const [reservation, setReservation] = useState<ReservationResult | null>(null)
-  const [error, setError] = useState('')
+  const [hasError, setHasError] = useState(false)
-  // gateway-reported failure, or a successful payment whose reservation couldn't be created
+  // gateway-reported failure, or a successful payment whose reservation couldn't be created —
-  const isFail = !isSuccess || !!error
+  // both land on the same fail modal
+  const isFail = !isSuccess || hasError
 
   useEffect(() => {
     if (!isSuccess) return
     const pending = takePendingReservation()
     if (!pending) {
-      Promise.resolve().then(() => setError('اطلاعات رزرو یافت نشد.'))
+      Promise.resolve().then(() => setHasError(true))
       return
     }
     createReservation(pending)
       .then(setReservation)
-      .catch(() => setError('ثبت رزرو با خطا مواجه شد.'))
+      .catch(() => setHasError(true))
   }, [isSuccess])
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
+    <div className="min-h-screen bg-gray-50">
+      {!isFail && (
+        <div className="flex min-h-screen items-center justify-center p-4">
           <div className="w-full max-w-sm rounded-3xl bg-white p-6 shadow-lg">
-        {isFail ? <FailIcon /> : <SuccessIcon />}
+            <SuccessIcon />
 
-        {isSuccess ? (
+            {reservation ? (
-          reservation ? (
               <>
                 <h2 className="mt-6 text-right font-bold text-gray-900">جزئیات رزرو</h2>
                 <div className="mt-2">
@@ -65,13 +67,8 @@ export default function PaymentSuccess() {
                   </p>
                 </div>
               </>
-          ) : error ? (
-            <p className="mt-6 text-center text-gray-900">{error}</p>
             ) : (
               <p className="mt-6 text-center text-gray-500">در حال ثبت رزرو...</p>
-          )
-        ) : (
-          <p className="mt-6 text-center text-gray-900">پرداخت ناموفق بود. لطفاً دوباره تلاش کنید.</p>
             )}
 
             <button
@@ -83,5 +80,9 @@ export default function PaymentSuccess() {
             </button>
           </div>
         </div>
+      )}
+
+      {isFail && <PaymentFailModal onGoHome={() => navigate('/home')} />}
+    </div>
   )
 }