Merge pull request 'main' (#8) from main into testing

Reviewed-on: #8

src/pages/PaymentDetailsPage.tsx

@@ -290,6 +290,7 @@ export function PaymentDetailsPage({
       const { checkoutPageUrl } = payResponse;
 
       localStorage.setItem('pendingBookingId', bookingId);
+      sessionStorage.setItem('pendingBookingId', bookingId);
 
       if (!checkoutPageUrl || typeof checkoutPageUrl !== 'string') {
         throw new Error('Invalid checkout URL received from server');

src/pages/PaymentSuccessPage.tsx

@@ -13,7 +13,6 @@ interface PaymentSuccessPageProps {
   onSignOutClick?: () => void;
   currentPage?: string;
   user?: { email: string; name: string } | null;
-  // Add other handlers if needed (optional)
 }
 
 export function PaymentSuccessPage({
@@ -33,12 +32,26 @@ export function PaymentSuccessPage({
 
   useEffect(() => {
     const confirm = async () => {
-      // Retrieve bookingId from localStorage (set before redirect)
+      //  Try multiple sources for bookingId
-      const bookingId = localStorage.getItem('pendingBookingId');
+      let bookingId = localStorage.getItem('pendingBookingId');
+      if (!bookingId) {
+        bookingId = sessionStorage.getItem('pendingBookingId');
+      }
+      // Optional: if you have bookingId in URL query param (e.g., ?bookingId=123)
+      const urlBookingId = searchParams.get('bookingId');
+      if (!bookingId && urlBookingId) {
+        bookingId = urlBookingId;
+      }
+
+      console.log('Retrieved bookingId:', bookingId);
+      console.log('SessionId from URL:', sessionId);
 
       if (!bookingId) {
         setStatus('error');
-        setErrorMsg('Missing booking information. Please contact support.');
+        setErrorMsg(
+          'Missing booking information. Please contact support with your order reference. ' +
+          'If you just completed payment, your order may still be processing.'
+        );
         return;
       }
 
@@ -49,24 +62,25 @@ export function PaymentSuccessPage({
       }
 
       try {
-        // ✅ Send both bookingId and sessionId to backend
         await confirmPayment({ bookingId, sessionId }).unwrap();
         setStatus('success');
         toast.success('Payment confirmed! Your order is complete.');
-        // Clear the stored bookingId
+        // Clean up storage
         localStorage.removeItem('pendingBookingId');
+        sessionStorage.removeItem('pendingBookingId');
       } catch (err: any) {
         console.error('Payment confirmation error:', err);
         setStatus('error');
         setErrorMsg(err?.data?.message || 'Payment could not be confirmed. Please contact support.');
         toast.error('Payment confirmation failed');
-        // Optionally clear pending booking on error to avoid infinite loops
+        // Clean up storage to avoid infinite loops
         localStorage.removeItem('pendingBookingId');
+        sessionStorage.removeItem('pendingBookingId');
       }
     };
 
     confirm();
-  }, [sessionId, confirmPayment]);
+  }, [sessionId, confirmPayment, searchParams]);
 
   return (
     <div className="min-h-screen bg-[#fafafa] font-poppins">
@@ -113,7 +127,7 @@ 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')} // adjust to your orders page route
+                onClick={() => navigate('/my-orders')}
                 className="mt-6 px-6 py-3 bg-[#F95F62] text-white rounded-xl font-medium hover:bg-[#e8545a] transition"
               >
                 View My Orders