From 668a183123de57f7ea94b110ee1c50fddf1837a4 Mon Sep 17 00:00:00 2001 From: aryabenade Date: Fri, 24 Apr 2026 16:44:43 +0530 Subject: [PATCH] enable the download itinerary feature in itinerary summary page --- src/pages/ItinerarySummaryPage.tsx | 599 +++++++++++++++-------------- 1 file changed, 319 insertions(+), 280 deletions(-) diff --git a/src/pages/ItinerarySummaryPage.tsx b/src/pages/ItinerarySummaryPage.tsx index b52f9e6..4b69ffb 100644 --- a/src/pages/ItinerarySummaryPage.tsx +++ b/src/pages/ItinerarySummaryPage.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { motion, AnimatePresence } from 'motion/react'; import { MapPin, @@ -7,11 +7,12 @@ import { Share2, Download, ChevronRight, + Loader2, } from 'lucide-react'; import { Button } from '../components/ui/button'; import { Card, CardContent } from '../components/ui/card'; import { ImageWithFallback } from '../components/figma/ImageWithFallback'; -import { useCreateMagicItineraryMutation, useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service'; +import { useDownloadItineraryQuery, useGetItineraryDetailsByIdQuery } from '../Redux/services/itinerary.service'; import { toast } from 'sonner'; import { useNavigate, useParams } from 'react-router-dom'; import Navbar from '../components/Navbar'; @@ -26,6 +27,37 @@ const ItinerarySummaryPage = () => { const { itineraryId } = useParams() const { data: itineraryDetails, isLoading: itineraryDetailsLoading } = 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 ?? []; @@ -35,305 +67,312 @@ const ItinerarySummaryPage = () => { return ( -
- {/* Navbar */} - - - {/* Title */} -
-

- Your -

-

- {generatedItinerary?.title} -

-
+
+ {/* Navbar */} + + + {/* Title */} +
+

+ Your +

+

+ {generatedItinerary?.title} +

+
- {/* Trip Details Card */} -
- {/* Background Image */} -
- -
-
-

Your Trip

-

{generatedItinerary?.city}

+ {/* Trip Details Card */} +
+ {/* Background Image */} +
+ +
+
+

Your Trip

+

{generatedItinerary?.city}

+
+
+ {/* Stats Row */} +
+
+ {generatedItinerary?.totalDays} + Days +
+
+ {generatedItinerary?.totalStops} + Stops +
+
+ {generatedItinerary?.days[0]?.date} + Start Date +
- {/* Stats Row */} -
-
- {generatedItinerary?.totalDays} - Days -
-
- {generatedItinerary?.totalStops} - Stops -
-
- {generatedItinerary?.days[0]?.date} - Start Date -
-
-
- {/* Share & Download Buttons */} -
- - -
- - {/* View Toggle */} -
-
- - + -
-
- - {/* Daily View */} - {viewMode === 'daily' && ( -
- {/* Day Tabs */} -
- {days?.map((day: any) => ( - - ))} - {days?.length > 4 && ( - + {isDownloading ? ( + + ) : ( + )} -
- {/* Activities for selected day */} - {selectedDayPlan && ( - - - {selectedDayPlan?.items?.map((activity: any, actIndex: number) => { - const activityKey = `day${selectedDayPlan.day}-act${actIndex}`; - - return ( - - {/* Time Label */} -

- {activity.timeSlot} -

- - {/* Activity Card */} - - - {/* Image */} -
- - - {/* TODO: Get Directions Badge redirect it to lat,long */} -
- -
-
- - {/* Content */} -
-

- {activity.title} -

-

- {activity.locationName} -

- - {/* Category Tags */} -
- {activity.categories?.map((cat: string, ci: number) => ( - - {cat} - - ))} -
- - {/* Bullet Points */} -
- -
- • - {activity.description} -
- -
-
- - - - ); - })} - - - )} + Download +
- )} - {/* Summary View */} - {viewMode === 'summary' && ( -
- {days?.map((day: any, dayIndex: number) => { - const dayDate = days[0]?.date - ? new Date( - new Date(days[0].date).setDate( - new Date(days[0].date).getDate() + dayIndex - ) - ).toLocaleDateString('en-AU', { - day: '2-digit', - month: '2-digit', - year: 'numeric', - }) - : ''; + {/* View Toggle */} +
+
+ + +
+
- // ✅ Find the matching summary for this day - const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber); + {/* Daily View */} + {viewMode === 'daily' && ( +
+ {/* Day Tabs */} +
+ {days?.map((day: any) => ( + + ))} + {days?.length > 4 && ( + + )} +
- return ( -
- {/* Day Header */} -
-

- Day {day.dayNumber}: -

-
- - {dayDate} -
-
- - {/* Activity List */} -
- {daySummary?.items?.map((item: any, actIndex: number) => { - const activityKey = `summary-day${day.dayNumber}-act${actIndex}`; - const isExpanded = selectedActivity === activityKey; + {/* Activities for selected day */} + {selectedDayPlan && ( + + + {selectedDayPlan?.items?.map((activity: any, actIndex: number) => { + const activityKey = `day${selectedDayPlan.day}-act${actIndex}`; return ( -
-
- setSelectedActivity(isExpanded ? null : activityKey) - } - > -

- {item.timeSlot}: {item.title} -

- -
+ + {/* Time Label */} +

+ {activity.timeSlot} +

- - {isExpanded && ( - -
-
- • - - {item.description} - -
-
- - )} - -
+
+ + {/* Content */} +
+

+ {activity.title} +

+

+ {activity.locationName} +

+ + {/* Category Tags */} +
+ {activity.categories?.map((cat: string, ci: number) => ( + + {cat} + + ))} +
+ + {/* Bullet Points */} +
+ +
+ • + {activity.description} +
+ +
+
+ + + ); })} -
-
- ); - })} -
- )} + + + )} +
+ )} - {/* Bottom Action */} -
- -
- -
-
+ {/* Summary View */} + {viewMode === 'summary' && ( +
+ {days?.map((day: any, dayIndex: number) => { + const dayDate = days[0]?.date + ? new Date( + new Date(days[0].date).setDate( + new Date(days[0].date).getDate() + dayIndex + ) + ).toLocaleDateString('en-AU', { + day: '2-digit', + month: '2-digit', + year: 'numeric', + }) + : ''; + + // ✅ Find the matching summary for this day + const daySummary = summaries.find((s: any) => s.dayNumber === day.dayNumber); + + return ( +
+ {/* Day Header */} +
+

+ Day {day.dayNumber}: +

+
+ + {dayDate} +
+
+ + {/* Activity List */} +
+ {daySummary?.items?.map((item: any, actIndex: number) => { + const activityKey = `summary-day${day.dayNumber}-act${actIndex}`; + const isExpanded = selectedActivity === activityKey; + + return ( +
+
+ setSelectedActivity(isExpanded ? null : activityKey) + } + > +

+ {item.timeSlot}: {item.title} +

+ +
+ + + {isExpanded && ( + +
+
+ • + + {item.description} + +
+ +
+ + )} + +
+ ); + })} +
+
+ ); + })} +
+ )} + + {/* Bottom Action */} +
+ +
+ +
); }