CityCards/CityCards-Website
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main #7

Merged
Hemant.Vishwakarma merged 24 commits from main into testing 2026-04-22 11:23:27 +00:00
Conversation 0 Commits 24 Files Changed 26 +44 -21
2 changed files with 44 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c490a820e4 - Show all commits

10
src/Redux/services/cards.service.ts
View File

@@ -34,6 +34,13 @@ export const cardsApi = createApi({
body: recipientDetails
}),
}),
addCardToCart: builder.mutation({
query: (cardBookingDetails) => ({ // keep the name of the variables being passed here same as when calling the mutation hook
url: `/website/passes/add-to-cart`,
method: "POST",
body: cardBookingDetails
}),
}),
})
});
@@ -41,5 +48,6 @@ export const {
useGetCardsinCartQuery,
useGetCheckoutPageDataQuery,
useGetCardBookingDetailsQuery,
useStoreRecipientDetailsMutation
useStoreRecipientDetailsMutation,
useAddCardToCartMutation
} = cardsApi;

55
src/pages/CheckoutPage2.tsx
View File

@@ -7,8 +7,9 @@ import Navbar from '../components/Navbar';
import { Footer } from '../components/Footer';
import { ImageWithFallback } from '../components/figma/ImageWithFallback';
import { useNavigate } from 'react-router-dom';
import { useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
import { useAddCardToCartMutation, useGetCheckoutPageDataQuery } from '../Redux/services/cards.service';
import LoadingSpinner from '../components/LoadingSpinner';
import { toast } from 'sonner';
/* ─── Types ─── */
export interface CartItem {
@@ -202,15 +203,17 @@ function CheckoutConfigCard({
const [noOfDays, setNoOfDays] = useState(item?.minNumber)
const cityId = localStorage.getItem("cityId")
const cityName = localStorage.getItem("cityName")
const cardTypeId = item?.cardType?.id
const cardId = item?.id
const cardMode = item?.cardType?.name === "selective_pass" ? "flexi" : "unlimited"
const adultPrice = item?.adultPrice * noOfAdults
const childPrice = item?.childPrice * noOfChildren
const basePrice = adultPrice + childPrice
const taxAmount = 10
const strikedPrice = basePrice - 20
const taxAmount = basePrice * 0.1
const strikedPrice = basePrice + 20
const [addCardToCart] = useAddCardToCartMutation()
useEffect(() => {
setNoOfAttractions(item?.minNumber)
@@ -224,23 +227,35 @@ function CheckoutConfigCard({
const navigate = useNavigate();
const cardBookingDetails = {
cityId,
cardTypeId,
cardId,
noOfAdults,
cardMode,
noOfChildren,
cityXid: cityId,
cardTypeXid: cardTypeId,
cardXid: cardId,
cardMode, // stays as-is
totalAdult: noOfAdults,
baseAmount: basePrice, // static value
taxAmount,
totalChild: noOfChildren,
noOfAttractions,
noOfDays
};
const handleProceedToPayment = async () => {
try {
console.log("Adding card to cart", cardBookingDetails);
const response = await addCardToCart(cardBookingDetails);
console.log(response)
const bookingId = response?.data?.id
navigate(`/payment/${bookingId}`)
} catch (error) {
console.error("Error adding card to cart:", error);
toast.error("Failed to move forward. Please try again.");
}
}
return (
<div className="bg-white rounded-2xl shadow-[0px_4px_24px_0px_rgba(0,0,0,0.06)] overflow-hidden w-full max-w-[400px]">
<div className="pt-6 pb-2 text-center">
<h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{item?.city}</h4>
<h4 className="font-poppins text-lg leading-snug font-medium text-[#2a2a2a]">{cityName}</h4>
<div className="mt-2 flex justify-center">
<span className={`inline-flex items-center px-4 py-1 rounded-full font-poppins text-xs font-medium ${item?.cardType?.name === 'selective_pass' ? 'bg-[#f95faf]/10 text-[#f95faf]' : 'bg-[#f95f62]/10 text-[#f95f62]'}`}>
{item?.cardType?.displayName}
@@ -296,12 +311,12 @@ function CheckoutConfigCard({
<button
key={i}
onClick={() => {
cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i); // 👈 update attractions state
cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i);
setDropdownOpen(false);
}}
className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${(cardMode === "flexi" ? noOfAttractions === i : noOfDays === i)
? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
: "text-[#2a2a2a] hover:bg-gray-50 font-normal"
? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
: "text-[#2a2a2a] hover:bg-gray-50 font-normal"
}`}
>
@@ -317,14 +332,14 @@ function CheckoutConfigCard({
<div className="flex items-center justify-between py-5">
<span className="font-poppins text-sm font-normal text-[#2a2a2a]">You Pay</span>
<div className="flex items-center gap-2">
<span className="font-poppins text-sm font-normal text-[#aaa] line-through">${basePrice}</span>
<span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${strikedPrice}</span>
<span className="font-poppins text-sm font-normal text-[#aaa] line-through">${strikedPrice}</span>
<span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${basePrice}</span>
</div>
</div>
</div>
<div className="px-6 pb-6">
<motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={() => navigate(`/payment/390`)} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20">
<motion.button whileHover={{ scale: 1.01 }} whileTap={{ scale: 0.98 }} onClick={handleProceedToPayment} className="w-full py-4 rounded-full bg-[#f95f62] text-white font-poppins text-base font-medium hover:bg-[#e8545a] transition-colors shadow-lg shadow-[#f95f62]/20 cursor-pointer">
Proceed to Pay
</motion.button>
</div>
@@ -414,7 +429,7 @@ export function CheckoutPage2({
<div className="w-full px-4 sm:px-6 lg:px-10 xl:px-16 pt-32 pb-24 max-w-[1440px] mx-auto">
<button onClick={() => navigate(-1)} className="flex items-center gap-2 text-[#8e8e8e] hover:text-[#2a2a2a] transition-colors font-poppins text-sm font-normal mb-8">
<ArrowLeft className="w-4 h-4" />Back to Cart
<ArrowLeft className="w-4 h-4" />Back
</button>
<div className="mb-10">