render the offers and attractions in checkoutPage2
This commit is contained in:
aryabenade
@@ -199,23 +199,44 @@ function CheckoutConfigCard({
|
||||
const [noOfAdults, setNoOfAdults] = useState(1)
|
||||
const [noOfChildren, setNoOfChildren] = useState(0)
|
||||
const [noOfAttractions, setNoOfAttractions] = useState(item?.minNumber);
|
||||
const [noOfDays, setNoOfDays] = useState(item?.minNumber)
|
||||
|
||||
const cityId = localStorage.getItem("cityId")
|
||||
|
||||
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 originalPrice = adultPrice + childPrice
|
||||
const totalPrice = originalPrice - 20
|
||||
const basePrice = adultPrice + childPrice
|
||||
const taxAmount = 10
|
||||
const strikedPrice = basePrice - 20
|
||||
|
||||
useEffect(() => {
|
||||
setNoOfAttractions(item?.minNumber)
|
||||
setNoOfDays(item?.minNumber)
|
||||
}, [item])
|
||||
|
||||
const numberArray = Array.from(
|
||||
{ length: item?.maxNumber - item?.minNumber + 1 },
|
||||
(_, i) => item?.minNumber + i
|
||||
);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
const cardBookingDetails = {
|
||||
cityId,
|
||||
cardTypeId,
|
||||
cardId,
|
||||
noOfAdults,
|
||||
cardMode,
|
||||
noOfChildren,
|
||||
taxAmount,
|
||||
noOfAttractions,
|
||||
noOfDays
|
||||
}
|
||||
|
||||
|
||||
|
||||
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">
|
||||
@@ -259,7 +280,7 @@ function CheckoutConfigCard({
|
||||
</span>
|
||||
<div className="relative">
|
||||
<button onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2 border border-[#f95f62]/30 rounded-lg px-3 py-1.5 min-w-[72px] justify-between hover:border-[#f95f62] transition-colors">
|
||||
<span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{noOfAttractions}</span>
|
||||
<span className="font-poppins text-base font-medium text-[#f95f62] tabular-nums">{cardMode === "flexi" ? noOfAttractions : noOfDays}</span>
|
||||
<ChevronDown className={`w-4 h-4 text-[#f95f62] transition-transform ${dropdownOpen ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
<AnimatePresence>
|
||||
@@ -275,13 +296,14 @@ function CheckoutConfigCard({
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => {
|
||||
setNoOfAttractions(i); // 👈 update attractions state
|
||||
cardMode === "flexi" ? setNoOfAttractions(i) : setNoOfDays(i); // 👈 update attractions state
|
||||
setDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full px-3 py-2 text-left font-poppins text-sm transition-colors ${noOfAttractions === i
|
||||
? "bg-[#f95f62]/10 text-[#f95f62] font-medium"
|
||||
: "text-[#2a2a2a] hover:bg-gray-50 font-normal"
|
||||
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"
|
||||
}`}
|
||||
|
||||
>
|
||||
{i}
|
||||
</button>
|
||||
@@ -295,8 +317,8 @@ 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">${originalPrice}</span>
|
||||
<span className="font-poppins text-2xl font-medium text-[#f95f62] tracking-tight">${totalPrice}</span>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -330,6 +352,7 @@ export function CheckoutPage2({
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Default item (you can pass via props later)
|
||||
const baseUrl = import.meta.env.VITE_BASE_URL;
|
||||
|
||||
const cityId = localStorage.getItem("cityId")
|
||||
const { data: checkoutPageData, isLoading } = useGetCheckoutPageDataQuery(cityId)
|
||||
@@ -339,6 +362,7 @@ export function CheckoutPage2({
|
||||
const cards = checkoutPageData?.cards ?? []
|
||||
const flexiCard = checkoutPageData?.cards[0] ?? null
|
||||
const unlimitedCard = checkoutPageData?.cards[1] ?? null
|
||||
const attractions = checkoutPageData?.attractions ?? [];
|
||||
|
||||
const [checkoutItem, setCheckoutItem] = useState(flexiCard);
|
||||
|
||||
@@ -351,15 +375,13 @@ export function CheckoutPage2({
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner />
|
||||
} else {
|
||||
console.log(flexiCard)
|
||||
// console.log(flexiCard)
|
||||
}
|
||||
|
||||
const handleCheckoutItemChange = (cardObject: any) => {
|
||||
setCheckoutItem(cardObject);
|
||||
};
|
||||
|
||||
// const attractions = attractionsData[checkoutItem.city]?.[checkoutItem.cardType] || [];
|
||||
// const offers = offersData[checkoutItem.cardType] || [];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#fafafa] font-poppins">
|
||||
@@ -452,15 +474,15 @@ export function CheckoutPage2({
|
||||
</div>
|
||||
|
||||
{/* Offers Section (Exact) */}
|
||||
{/* <div>
|
||||
<h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem.cardType} Card Offers</h3>
|
||||
<p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem.cardType} pass</p>
|
||||
<div>
|
||||
<h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">{checkoutItem?.cardType?.displayName} Offers</h3>
|
||||
<p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Exclusive deals and discounts included with your {checkoutItem?.cardType.displayName} pass</p>
|
||||
<div className="flex gap-3 overflow-x-auto pb-2 -mx-4 px-4 snap-x snap-mandatory scrollbar-hide">
|
||||
{offers.map((offer, idx) => (
|
||||
<div key={idx} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
|
||||
{checkoutItem?.offers.map((offer: any) => (
|
||||
<div key={offer.id} className="relative bg-white rounded-xl shrink-0 w-[180px] h-[260px] snap-start">
|
||||
<div className="flex flex-col gap-2 items-start overflow-hidden p-3 rounded-xl h-full">
|
||||
<div className="h-[120px] w-full rounded-lg overflow-hidden shrink-0 relative">
|
||||
<ImageWithFallback src={offer.image} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
|
||||
<ImageWithFallback src={`${baseUrl}/${offer.websiteBannerImage}`} alt={offer.title} className="absolute inset-0 w-full h-full object-cover rounded-lg" />
|
||||
</div>
|
||||
<div className="w-full h-[44px] overflow-hidden">
|
||||
<p className="font-['Poppins',sans-serif] font-normal text-[18px] text-black tracking-[-0.72px] leading-[22px] line-clamp-2">{offer.title}</p>
|
||||
@@ -473,32 +495,32 @@ export function CheckoutPage2({
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
{/* Attractions Section (Exact) */}
|
||||
{/* <div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-poppins text-xl md:text-2xl leading-snug font-medium text-[#2a2a2a]">Available Attractions</h3>
|
||||
<span className="font-poppins text-xs font-medium text-[#F95F62] bg-[#F95F62]/10 px-3 py-1 rounded-full">{attractions.length} included</span>
|
||||
</div>
|
||||
<p className="font-poppins text-sm leading-relaxed font-normal text-[#8e8e8e] mt-1 mb-4">Explore all the experiences you can enjoy with your pass</p>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{attractions.map((a) => (
|
||||
{attractions.map((a: any) => (
|
||||
<div key={a.id} className="group relative rounded-xl overflow-hidden">
|
||||
<div className="aspect-[4/3] relative">
|
||||
<ImageWithFallback src={a.image} alt={a.name} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
||||
<ImageWithFallback src={a.thumbnail} alt={a.title} className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent" />
|
||||
<div className="absolute top-2 right-2">
|
||||
<span className="inline-flex px-2 py-0.5 rounded-full bg-white/90 backdrop-blur-sm text-[10px] font-poppins font-medium text-[#555]">{a.category}</span>
|
||||
</div>
|
||||
<div className="absolute bottom-2 left-2 right-2">
|
||||
<h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.name}</h6>
|
||||
<h6 className="font-poppins text-sm leading-snug font-medium text-white drop-shadow-sm">{a.title}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Config Card */}
|
||||
|
||||
Reference in New Issue
Block a user