diff --git a/src/Redux/services/cards.service.ts b/src/Redux/services/cards.service.ts index c2850cf..08116c9 100644 --- a/src/Redux/services/cards.service.ts +++ b/src/Redux/services/cards.service.ts @@ -26,11 +26,20 @@ export const cardsApi = createApi({ getCardBookingDetails: builder.query({ query: (bookingId) => `/website/passes/${bookingId}/details`, }), + + storeRecipientDetails: builder.mutation({ + query: ({ recipientDetails, bookingId }) => ({ // keep the name of the variables being passed here same as when calling the mutation hook + url: `/website/passes/${bookingId}/store-gift-details`, + method: "PUT", + body: recipientDetails + }), + }), }) }); export const { useGetCardsinCartQuery, useGetCheckoutPageDataQuery, - useGetCardBookingDetailsQuery + useGetCardBookingDetailsQuery, + useStoreRecipientDetailsMutation } = cardsApi; \ No newline at end of file diff --git a/src/pages/PaymentDetailsPage.tsx b/src/pages/PaymentDetailsPage.tsx index 49c4912..7054559 100644 --- a/src/pages/PaymentDetailsPage.tsx +++ b/src/pages/PaymentDetailsPage.tsx @@ -11,7 +11,8 @@ import { Separator } from '../components/ui/separator'; import { useGetUserProfileDetailsQuery } from '../Redux/services/profile.service'; import LoadingSpinner from '../components/LoadingSpinner'; import { useParams } from 'react-router-dom'; -import { useGetCardBookingDetailsQuery } from '../Redux/services/cards.service'; +import { useGetCardBookingDetailsQuery, useStoreRecepientDetailsMutation, useStoreRecipientDetailsMutation } from '../Redux/services/cards.service'; +import { toast } from 'sonner'; export interface CheckoutOrderItem { city: string; @@ -174,6 +175,8 @@ export function PaymentDetailsPage({ const [giftPhone, setGiftPhone] = useState(''); const [giftCity, setGiftCity] = useState(''); const [giftCountry, setGiftCountry] = useState(''); + const [giftIsd, setGiftIsd] = useState("") + const [giftMessage, setGiftMessage] = useState("") /* ── Profile Data (Same as ProfilePage) ── */ const [formData, setFormData] = useState({ @@ -191,8 +194,10 @@ export function PaymentDetailsPage({ const userId = localStorage.getItem("userId"); const { bookingId } = useParams() const { data: userDetails, isLoading } = useGetUserProfileDetailsQuery(userId); - const { data: bookingDetails } = useGetCardBookingDetailsQuery(bookingId); - console.log(bookingDetails) + const { data } = useGetCardBookingDetailsQuery(bookingId); + const [storeRecipientDetails, { isLoading: savingChanges }] = useStoreRecipientDetailsMutation(); + + const bookingDetails = data?.bookingDetails ?? null // Populate formData from API (exactly like ProfilePage) useEffect(() => { @@ -230,6 +235,8 @@ export function PaymentDetailsPage({ if (selectedTab === 'gift') { if (!giftFirstName.trim()) e.giftFirstName = 'Required'; if (!giftLastName.trim()) e.giftLastName = 'Required'; + if (!giftIsd.trim()) e.giftIsd = 'Required'; + if (!giftMessage.trim()) e.giftMessage = 'Required'; if (!giftEmail.trim() || !/\S+@\S+\.\S+/.test(giftEmail)) { e.giftEmail = 'Valid email required'; @@ -246,17 +253,44 @@ export function PaymentDetailsPage({ return e; }; + const recipientDetails = { + isForSelf: true, + recipientFirstName: giftFirstName, + recipientLastName: giftLastName, + recipientEmail: giftEmail, + recipientIsdCode: `+${giftIsd}`, + recipientPhone: giftPhone, + recipientCity: giftCity, + recipientCountry: giftCountry, + giftMessage: giftMessage, + }; - const handleSubmit = () => { + + const handleSaveProfile = async () => { + try { + console.log("Saving profile...", recipientDetails); + const response = await storeRecipientDetails({ recipientDetails, bookingId }); + console.log(response) + toast.success("gift details saved successfully!"); + } catch (error) { + console.error("Error saving profile:", error); + toast.error("Failed to update profile. Please try again."); + } + }; + + const handleSubmit = async () => { const e = validate(); setErrors(e); if (Object.keys(e).length > 0) return; - - setSubmitting(true); - setTimeout(() => { - setSubmitting(false); - onPaymentComplete(); - }, 1800); + try { + console.log("Saving profile...", recipientDetails); + const response = await storeRecipientDetails({ recipientDetails, bookingId }); + console.log(response) + toast.success("gift details saved successfully!"); + } catch (error) { + console.error("Error saving profile:", error); + toast.error("Failed to update profile. Please try again."); + } }; if (isLoading) { @@ -406,16 +440,15 @@ export function PaymentDetailsPage({ placeholder="Enter recipient's last name" error={errors.giftLastName} /> - + + + + @@ -487,26 +536,26 @@ export function PaymentDetailsPage({
-
- {bookingDetails?.city?.cardMode} + {bookingDetails?.cardMode}
-

{bookingDetails?.city?.name}

- +

{bookingDetails?.name}

+

- {bookingDetails?.city?.cardMode.toLowerCase() === 'flexi' ? `${bookingDetails?.city?.noOfAttractions} Attractions` : `${bookingDetails?.city?.noOfDays} Days`} + {bookingDetails?.cardMode.toLowerCase() === 'flexi' ? `${bookingDetails?.noOfAttractions} Attractions` : `${bookingDetails?.noOfDays} Days`}

{[ - { label: 'Adults', value: bookingDetails?.city?.totalAdult }, - { label: 'Children', value: bookingDetails?.city?.totalChild }, + { label: 'Adults', value: bookingDetails?.totalAdult }, + { label: 'Children', value: bookingDetails?.totalChild }, // { label: 'Qty', value: order.quantity }, ].map(({ label, value }) => (
@@ -521,11 +570,11 @@ export function PaymentDetailsPage({
Subtotal - ${subtotal.toFixed(2)} + ${bookingDetails?.baseAmount}
GST (10%) - ${tax.toFixed(2)} + ${bookingDetails?.totalTaxAmount}
Booking fee @@ -533,7 +582,7 @@ export function PaymentDetailsPage({
Total - ${total.toFixed(2)} + ${bookingDetails?.totalAmount}
@@ -554,7 +603,7 @@ export function PaymentDetailsPage({ ) : ( <> - Complete Payment · ${total.toFixed(2)} + Complete Payment · ${bookingDetails.totalAmount} )}