New changes in paymentsuccesspage

src/pages/PaymentSuccessPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { CheckCircle, XCircle, Loader2, AlertCircle } from 'lucide-react';
+import { CheckCircle, XCircle, Loader2 } from 'lucide-react';
 import { useConfirmCardPaymentMutation } from '../Redux/services/cards.service';
 import { toast } from 'sonner';
 import Navbar from '../components/Navbar';
@@ -33,13 +33,12 @@ export function PaymentSuccessPage({
 }: PaymentSuccessPageProps) {
   const [searchParams] = useSearchParams();
   const [confirmPayment, { isLoading }] = useConfirmCardPaymentMutation();
-  const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'manual'>('loading');
+  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
   const [errorMsg, setErrorMsg] = useState<string>('');
-  const [manualBookingId, setManualBookingId] = useState('');
   const navigate = useNavigate();
 
   useEffect(() => {
-    const retrieveBookingId = async () => {
+    const confirm = async () => {
       // Try all possible sources
       let bookingId = getCookie('pendingBookingId');
       if (!bookingId) bookingId = localStorage.getItem('pendingBookingId');
@@ -55,7 +54,11 @@ export function PaymentSuccessPage({
       });
 
       if (!bookingId) {
-        setStatus('manual'); // show manual entry form
+        setStatus('error');
+        setErrorMsg(
+          'Booking ID not found. Please contact support with your order details. ' +
+          'If you just completed payment, your order may still be processing.'
+        );
         return;
       }
 
@@ -63,7 +66,7 @@ export function PaymentSuccessPage({
         await confirmPayment(bookingId).unwrap();
         setStatus('success');
         toast.success('Payment confirmed! Your order is complete.');
-        // Clean up
+        // Clean up all storage
         document.cookie = 'pendingBookingId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
         localStorage.removeItem('pendingBookingId');
         sessionStorage.removeItem('pendingBookingId');
@@ -72,34 +75,16 @@ export function PaymentSuccessPage({
         setStatus('error');
         setErrorMsg(err?.data?.message || 'Failed to confirm payment. Please contact support.');
         toast.error('Confirmation failed');
+        // Clean up to avoid retry loops
+        document.cookie = 'pendingBookingId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+        localStorage.removeItem('pendingBookingId');
+        sessionStorage.removeItem('pendingBookingId');
       }
     };
 
-    retrieveBookingId();
+    confirm();
   }, [confirmPayment, searchParams]);
 
-  const handleManualConfirm = async () => {
-    if (!manualBookingId.trim()) {
-      toast.error('Please enter your Booking ID');
-      return;
-    }
-    setStatus('loading');
-    try {
-      await confirmPayment(manualBookingId).unwrap();
-      setStatus('success');
-      toast.success('Payment confirmed! Your order is complete.');
-      // Clean up
-      document.cookie = 'pendingBookingId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
-      localStorage.removeItem('pendingBookingId');
-      sessionStorage.removeItem('pendingBookingId');
-    } catch (err: any) {
-      console.error('Manual confirmation error:', err);
-      setStatus('error');
-      setErrorMsg(err?.data?.message || 'Failed to confirm payment. Please contact support.');
-      toast.error('Confirmation failed');
-    }
-  };
-
   return (
     <div className="min-h-screen bg-[#fafafa] font-poppins">
       <Navbar
@@ -145,10 +130,10 @@ export function PaymentSuccessPage({
               <h2 className="text-2xl font-semibold text-[#2a2a2a]">Payment Successful!</h2>
               <p className="text-[#555] mt-2">Thank you for your purchase. Your order is now confirmed.</p>
               <button
-                onClick={() => navigate('/my-orders')}
+                onClick={() => navigate('/profile')}
                 className="mt-6 px-6 py-3 bg-[#F95F62] text-white rounded-xl font-medium hover:bg-[#e8545a] transition"
               >
-                View My Orders
+                View My Profile
               </button>
             </>
           )}
@@ -166,40 +151,6 @@ export function PaymentSuccessPage({
               </button>
             </>
           )}
-
-          {status === 'manual' && (
-            <>
-              <AlertCircle className="w-16 h-16 text-yellow-500 mx-auto mb-4" />
-              <h2 className="text-2xl font-semibold text-[#2a2a2a]">Booking ID Not Found</h2>
-              <p className="text-[#555] mt-2">
-                We couldn't automatically retrieve your booking ID. Please enter it below to confirm your payment.
-                <br />
-                <span className="text-sm text-gray-400">(Check your email or order history for the Booking ID)</span>
-              </p>
-              <div className="mt-4">
-                <input
-                  type="text"
-                  value={manualBookingId}
-                  onChange={(e) => setManualBookingId(e.target.value)}
-                  placeholder="Enter Booking ID"
-                  className="w-full border rounded-xl px-4 py-3 font-poppins text-base outline-none focus:border-[#F95F62]"
-                />
-                <button
-                  onClick={handleManualConfirm}
-                  disabled={isLoading}
-                  className="mt-4 w-full px-6 py-3 bg-[#F95F62] text-white rounded-xl font-medium hover:bg-[#e8545a] transition disabled:opacity-50"
-                >
-                  {isLoading ? 'Confirming...' : 'Confirm Payment'}
-                </button>
-              </div>
-              <button
-                onClick={onHomeClick}
-                className="mt-3 text-sm text-gray-500 hover:text-gray-700"
-              >
-                Return to Home
-              </button>
-            </>
-          )}
         </div>
       </div>