diff --git a/src/Redux/services/itinerary.service.ts b/src/Redux/services/itinerary.service.ts index 899a0b9..364d7dc 100644 --- a/src/Redux/services/itinerary.service.ts +++ b/src/Redux/services/itinerary.service.ts @@ -29,11 +29,22 @@ export const itineraryApi = createApi({ } }), + downloadItinerary: builder.query({ + query: (id) => ({ + url: `/mobile/itinerary/${id}/download`, + method: 'GET', + responseHandler: (response) => response.blob(), + }), + }), + }) }); export const { useCreateMagicItineraryMutation, useGetItineraryDetailsByIdQuery, - useGetUserItinerariesQuery + useGetUserItinerariesQuery, + useDownloadItineraryQuery, + + } = itineraryApi; \ No newline at end of file diff --git a/src/pages/ItineraryViewPage.tsx b/src/pages/ItineraryViewPage.tsx index 39f7d15..9d3226b 100644 --- a/src/pages/ItineraryViewPage.tsx +++ b/src/pages/ItineraryViewPage.tsx @@ -1,15 +1,16 @@ -import React, { useState } from 'react'; +import React, { useState, useCallback, useEffect } from 'react'; import { motion } from 'motion/react'; -import { ArrowLeft, Calendar, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun } from 'lucide-react'; +import { ArrowLeft, Calendar, MapPin, Users, Star, Heart, Share2, Download, CheckCircle, Navigation, Cloud, Sun, Loader2 } from 'lucide-react'; import { Button } from '../components/ui/button'; import { Card, CardContent } from '../components/ui/card'; import { Badge } from '../components/ui/badge'; import Navbar from '../components/Navbar'; import { Footer } from '../components/Footer'; import { ImageWithFallback } from '../components/figma/ImageWithFallback'; -import { useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service'; +import { useGetItineraryDetailsByIdQuery, useDownloadItineraryQuery } from '../Redux/services/itinerary.service'; import { useNavigate, useParams } from 'react-router-dom'; import LoadingSpinner from '../components/LoadingSpinner'; +import { toast } from 'sonner'; // optional, install if not present interface ItineraryViewPageProps { onBackClick: () => void; @@ -39,7 +40,6 @@ interface ItineraryViewPageProps { } export function ItineraryViewPage({ - onBackClick, onHomeClick, onMelbourneClick, onPassesClick, @@ -59,33 +59,55 @@ export function ItineraryViewPage({ onOffersClick, onCreateItineraryClick, onContactUsClick, - onEsimsClick, - onHotelDiscountsClick, currentPage, user }: ItineraryViewPageProps) { const [viewMode, setViewMode] = useState<'daily' | 'summary'>('daily'); const navigate = useNavigate(); - // const [favorites, setFavorites] = useState>(new Set()); // ── API Integration ────────────────────────────────────────────────────────── const { itineraryId } = useParams(); const { data: itineraryDetails, isLoading } = useGetItineraryDetailsByIdQuery(itineraryId); + // Download logic using standard query with manual trigger + const [shouldDownload, setShouldDownload] = useState(false); + const { data: pdfBlob, isFetching: isDownloading, refetch } = useDownloadItineraryQuery(itineraryId!, { + skip: !shouldDownload || !itineraryId, + }); + + useEffect(() => { + if (shouldDownload && pdfBlob) { + // Create download link + const url = window.URL.createObjectURL(pdfBlob); + const link = document.createElement('a'); + link.href = url; + link.download = `itinerary-${itineraryId}.pdf`; + document.body.appendChild(link); + link.click(); + link.remove(); + window.URL.revokeObjectURL(url); + toast.success('Itinerary downloaded successfully!'); + setShouldDownload(false); // reset trigger + } + }, [pdfBlob, shouldDownload, itineraryId]); + + const handleDownloadItinerary = useCallback(() => { + if (!itineraryId) { + toast.error('Itinerary ID not found'); + return; + } + setShouldDownload(true); + refetch(); // manually trigger the download query + }, [itineraryId, refetch]); + const generatedItinerary = itineraryDetails ?? null; const days = generatedItinerary?.days ?? []; const summaries = generatedItinerary?.summary ?? []; - // ───────────────────────────────────────────────────────────────────────────── - - // ── Loading State ───────────────────────────────────────────────────────────── if (isLoading) { - return ( - - ); + return ; } - // ───────────────────────────────────────────────────────────────────────────── return (
@@ -125,7 +147,7 @@ export function ItineraryViewPage({ > +
+ + + {/* Content */} +
+
+

+ {activity.title} +

+
+ + + {activity.locationName} + +
+
+ + {/* Category Badges */} +
+ {activity.categories?.map((cat: string, ci: number) => ( + toggleFavorite(activityKey)} + className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1" > - - -
*/} - - {/* Get Directions — links to Google Maps via lat/lng */} -
- -
+ {cat} + + ))}
- {/* Content */} -
-
-

- {activity.title} -

-
- - - {activity.locationName} - -
-
- - {/* Category Badges */} -
- {activity.categories?.map((cat: string, ci: number) => ( - - {cat} - - ))} -
- - {/* Description */} -
-
- • - - {activity.description} - -
+ {/* Description */} +
+
+ • + + {activity.description} +
- - -
- - ); - })} +
+ + + + + ))} ))} @@ -395,9 +399,7 @@ export function ItineraryViewPage({
{days.map((day: any, dayIndex: number) => { - // ✅ Match summary to the correct day by dayNumber const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber); - const dayDate = days[0]?.date ? new Date( new Date(days[0].date).setDate( @@ -454,16 +456,26 @@ export function ItineraryViewPage({ > - +