From b7767053e70339dc605f7a0cf6ca0d84139e24cb Mon Sep 17 00:00:00 2001 From: Hemant Vishwakarma Date: Wed, 22 Apr 2026 17:50:30 +0530 Subject: [PATCH] Stripe again changes --- src/pages/PaymentCancelPage.tsx | 1 + src/pages/PaymentDetailsPage.tsx | 44 +++++++------ src/pages/PaymentSuccessPage.tsx | 103 +++++++++++++++++++++++++------ 3 files changed, 109 insertions(+), 39 deletions(-) diff --git a/src/pages/PaymentCancelPage.tsx b/src/pages/PaymentCancelPage.tsx index 8c37f8b..99dd51e 100644 --- a/src/pages/PaymentCancelPage.tsx +++ b/src/pages/PaymentCancelPage.tsx @@ -27,6 +27,7 @@ export function PaymentCancelPage({ useEffect(() => { localStorage.removeItem('pendingBookingId'); sessionStorage.removeItem('pendingBookingId'); + document.cookie = 'pendingBookingId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; }, []); return ( diff --git a/src/pages/PaymentDetailsPage.tsx b/src/pages/PaymentDetailsPage.tsx index 2d6950b..59961d3 100644 --- a/src/pages/PaymentDetailsPage.tsx +++ b/src/pages/PaymentDetailsPage.tsx @@ -289,6 +289,13 @@ export function PaymentDetailsPage({ const { checkoutPageUrl } = payResponse; + + const setCookie = (name: string, value: string, days = 1) => { + const expires = new Date(); + expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000); + document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/;SameSite=Lax`; + }; + setCookie('pendingBookingId', bookingId); localStorage.setItem('pendingBookingId', bookingId); sessionStorage.setItem('pendingBookingId', bookingId); @@ -317,7 +324,7 @@ export function PaymentDetailsPage({
{}} + onCityChange={() => { }} onSignInClick={onSignInClick} onSignOutClick={onSignOutClick} onPassesClick={onPassesClick} @@ -373,22 +380,20 @@ export function PaymentDetailsPage({
- {}} prefilled disabled /> - {}} prefilled disabled /> + { }} prefilled disabled /> + { }} prefilled disabled />
- {}} type="email" prefilled disabled /> - {}} type="tel" prefilled disabled /> + { }} type="email" prefilled disabled /> + { }} type="tel" prefilled disabled />
@@ -524,15 +529,15 @@ export function PaymentDetailsPage({

Billing Address

- {}} prefilled disabled /> - {}} prefilled disabled /> + { }} prefilled disabled /> + { }} prefilled disabled />
- {}} prefilled disabled /> - {}} prefilled disabled /> + { }} prefilled disabled /> + { }} prefilled disabled />
- {}} inputMode="numeric" prefilled disabled /> - {}} prefilled disabled /> + { }} inputMode="numeric" prefilled disabled /> + { }} prefilled disabled />
@@ -551,11 +556,10 @@ export function PaymentDetailsPage({
{bookingDetails?.cardMode}
diff --git a/src/pages/PaymentSuccessPage.tsx b/src/pages/PaymentSuccessPage.tsx index bf1967f..97acade 100644 --- a/src/pages/PaymentSuccessPage.tsx +++ b/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 } from 'lucide-react'; +import { CheckCircle, XCircle, Loader2, AlertCircle } from 'lucide-react'; import { useConfirmCardPaymentMutation } from '../Redux/services/cards.service'; import { toast } from 'sonner'; import Navbar from '../components/Navbar'; @@ -15,6 +15,14 @@ interface PaymentSuccessPageProps { user?: { email: string; name: string } | null; } +// Helper to get cookie value +const getCookie = (name: string): string | null => { + const value = `; ${document.cookie}`; + const parts = value.split(`; ${name}=`); + if (parts.length === 2) return parts.pop()?.split(';').shift() || null; + return null; +}; + export function PaymentSuccessPage({ onHomeClick, onPassesClick, @@ -25,34 +33,38 @@ export function PaymentSuccessPage({ }: PaymentSuccessPageProps) { const [searchParams] = useSearchParams(); const [confirmPayment, { isLoading }] = useConfirmCardPaymentMutation(); - const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading'); + const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'manual'>('loading'); const [errorMsg, setErrorMsg] = useState(''); + const [manualBookingId, setManualBookingId] = useState(''); const navigate = useNavigate(); useEffect(() => { - const confirm = async () => { - // Try multiple sources to get bookingId - let bookingId = localStorage.getItem('pendingBookingId'); + const retrieveBookingId = async () => { + // Try all possible sources + let bookingId = getCookie('pendingBookingId'); + if (!bookingId) bookingId = localStorage.getItem('pendingBookingId'); if (!bookingId) bookingId = sessionStorage.getItem('pendingBookingId'); - if (!bookingId) bookingId = searchParams.get('bookingId'); // URL query param - - console.log('Retrieved bookingId:', bookingId); + if (!bookingId) bookingId = searchParams.get('bookingId'); + + console.log('Retrieved bookingId from sources:', { + cookie: getCookie('pendingBookingId'), + localStorage: localStorage.getItem('pendingBookingId'), + sessionStorage: sessionStorage.getItem('pendingBookingId'), + queryParam: searchParams.get('bookingId'), + final: bookingId, + }); if (!bookingId) { - 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.' - ); + setStatus('manual'); // show manual entry form return; } try { - // ✅ Call confirm API with only bookingId await confirmPayment(bookingId).unwrap(); setStatus('success'); toast.success('Payment confirmed! Your order is complete.'); - // Clean up storage + // Clean up + document.cookie = 'pendingBookingId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'; localStorage.removeItem('pendingBookingId'); sessionStorage.removeItem('pendingBookingId'); } catch (err: any) { @@ -60,15 +72,34 @@ 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 - localStorage.removeItem('pendingBookingId'); - sessionStorage.removeItem('pendingBookingId'); } }; - confirm(); + retrieveBookingId(); }, [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 (
)} + + {status === 'manual' && ( + <> + +

Booking ID Not Found

+

+ We couldn't automatically retrieve your booking ID. Please enter it below to confirm your payment. +
+ (Check your email or order history for the Booking ID) +

+
+ 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]" + /> + +
+ + + )}
-- 2.34.1