From b3e1c0faf495564ca209802ec729e9e4e16dea4f Mon Sep 17 00:00:00 2001 From: aryabenade Date: Thu, 19 Mar 2026 19:21:39 +0530 Subject: [PATCH] show AttractionDetails from backend on AttractionDetails page --- src/AppRouter.tsx | 2 +- src/components/AttractionDetailsPage.tsx | 227 +++++++++++------------ src/components/AttractionsPage.tsx | 8 +- 3 files changed, 111 insertions(+), 126 deletions(-) diff --git a/src/AppRouter.tsx b/src/AppRouter.tsx index 9769ff2..1a3c767 100644 --- a/src/AppRouter.tsx +++ b/src/AppRouter.tsx @@ -117,7 +117,7 @@ export function AppRouter({ navigate(-1)} onCheckoutClick={() => navigate('/checkout')} diff --git a/src/components/AttractionDetailsPage.tsx b/src/components/AttractionDetailsPage.tsx index ceac7f1..d92c3b1 100644 --- a/src/components/AttractionDetailsPage.tsx +++ b/src/components/AttractionDetailsPage.tsx @@ -6,6 +6,8 @@ import { Badge } from './ui/badge'; import { Card, } from './ui/card'; import { ImageWithFallback } from './figma/ImageWithFallback'; import { Layout } from '../Layout'; +import { useParams } from 'react-router-dom'; +import { useGetAttractionDetailsByIdQuery } from '../Redux/services/attractions.service'; interface AttractionDetailsPageProps { onBackClick: () => void; @@ -13,7 +15,7 @@ interface AttractionDetailsPageProps { onSignInClick: () => void; onSignOutClick?: () => void; user?: { email: string; name: string } | null; - attractionId: string; + // attractionId: string; } export function AttractionDetailsPage({ @@ -23,74 +25,33 @@ export function AttractionDetailsPage({ onSignOutClick, user, }: AttractionDetailsPageProps) { - const [date, setDate] = useState(new Date()); - // Featured attraction for the main display - const featuredAttraction = { - id: 'phi-phi', - name: 'Phi Phi Islands Adventure Day Trip with Seaview Lunch by V. Marine Tour', - badges: ['Bestseller', 'Free cancellation', 'Reservation Required'], - images: { - main: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', - gallery: [ - 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzbm9ya2VsaW5nJTIwdHVydGxlJTIwYWR2ZW50dXJlfGVufDF8fHx8MTc1ODEwNDkwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', - 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxpc2xhbmQlMjB0b3VyJTIwYWRvJTIwdHJvcGljYWx8ZW58MXx8fHwxNzU4MTA0OTEwfDA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', - 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxncmVhdCUyMG9jZWFuJTIwcm9hZCUyMGF1c3RyYWxpYXxlbnwxfHx8fDE3NTgxMDQ5Mzd8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral', - 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxhdHYlMjBkZXNlcnQlMjB0b3VyfGVufDF8fHx8MTc1ODEwNDg5Nnww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' - ] - }, - overview: { - duration: '3 days', - groupSize: '10 people', - ages: '18-99 yrs', - languages: 'English, Japanese' - }, - description: 'The Phi Phi archipelago is a must-visit while in Phuket, and this speedboat trip whisks you around the islands in one day. Swim over the coral reefs of Pileh Lagoon, have lunch at Phi Phi Leh, snorkel at Bamboo Island, and visit Monkey Beach and Maya Bay, immortalized in "The Beach." Boat transfers, snacks, buffet lunch, snorkeling equipment, and Phuket hotel pickup and drop-off all included.', - highlights: [ - 'Experience the thrill of a speedboat to the stunning Phi Phi Islands', - 'Be amazed by the variety of marine life in the archepelago', - 'Enjoy relaxing in paradise with white sand beaches and azure turquoise water', - 'Feel the comfort of a tour limited to 35 passengers', - 'Catch a glimpse of the wild monkeys around Monkey Beach' - ], - included: [ - 'Beverages, drinking water, morning tea and buffet lunch', - 'Local taxes', - 'Hotel pickup and drop-off by air-conditioned minivan', - 'Insurance Transfer to a private pier', - 'Soft drinks', - 'Tour Guide' - ], - notIncluded: [ - 'Towel', - 'Tips', - 'Alcoholic Beverages' - ], - bookingOptions: [ - 'By Calling on 022 2645675', - 'Email your details at islands.booking@mail.com', - 'Via CityCards Portal' - ] - }; + const { attractionId } = useParams() + + const { data: attraction, isLoading } = useGetAttractionDetailsByIdQuery(Number(attractionId)); + + if (isLoading) { + return
loading...
+ } return ( + activeCity="" + onSignInClick={onSignInClick} + onSignOutClick={onSignOutClick} + user={user} + // showCitySubmenu={false} + >
{/* Back Button */} - -
    - {featuredAttraction.highlights.map((highlight, index) => ( -
  • + {attraction.attractionHighlights.map((highlight: any) => ( +
  • - {highlight} + {highlight.title}
    • ))}
@@ -220,30 +203,32 @@ export function AttractionDetailsPage({ Included - {featuredAttraction.included.map((item, index) => ( -
-
- + {attraction.attractionInclusions.filter((inclusion: any) => inclusion.isInclusion === true) + .map((inclusion: any) => ( +
+
+ +
+ {inclusion.title}
- {item} -
- ))} + ))}
- + {/* Not Included */}

Not Included

- {featuredAttraction.notIncluded.map((item, index) => ( -
-
- + {attraction.attractionInclusions.filter((inclusion: any) => inclusion.isInclusion === false) + .map((inclusion: any) => ( +
+
+ +
+ {inclusion.title}
- {item} -
- ))} + ))}
@@ -262,7 +247,8 @@ export function AttractionDetailsPage({

Interactive Map

-

Phi Phi Islands, Thailand

+

{attraction.title}

+

{attraction.address}

@@ -276,7 +262,7 @@ export function AttractionDetailsPage({

Select Date

Choose your preferred visit date

- + {/* Custom Calendar Design */}
{/* Calendar Header */} @@ -305,7 +291,7 @@ export function AttractionDetailsPage({
{/* Previous month */} - + {/* Current month */} {Array.from({ length: 30 }, (_, i) => { const day = i + 1; @@ -314,13 +300,12 @@ export function AttractionDetailsPage({ return ( @@ -356,7 +341,7 @@ export function AttractionDetailsPage({
Adult Ticket - $89 + {attraction.ticketPriceAdult}
Service Fee @@ -365,14 +350,14 @@ export function AttractionDetailsPage({
Total - $94 + ${attraction.ticketPriceAdult + 5}
{/* Confirm Booking Button */} -
- + ); } \ No newline at end of file diff --git a/src/components/AttractionsPage.tsx b/src/components/AttractionsPage.tsx index c7a97a8..7df14cb 100644 --- a/src/components/AttractionsPage.tsx +++ b/src/components/AttractionsPage.tsx @@ -403,7 +403,7 @@ export function AttractionsPage({ htmlFor={key} className="font-poppins text-sm text-[#414141] cursor-pointer flex-1 font-normal" > - {key} ({count as number}) + {key==="selective_pass" ?"Selective":"Unlimited"} ({count as number})
))} @@ -460,9 +460,9 @@ export function AttractionsPage({ -
- {/* {attraction.location} */} -
+ {/*
+ {attraction.location} +
*/}

{attraction.title}