Merge pull request 'enable the download itinerary feature in itinerary summary page' (#25) from arya-branch into main

Reviewed-on: #25

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 ?? [];
@@ -96,10 +128,17 @@ const ItinerarySummaryPage = () => {
                         Share
                     </Button>
                     <Button
+                        onClick={handleDownloadItinerary}
+                        disabled={isDownloading}
                         variant="outline"
                         className="flex-1 border-2 border-primary/20 text-primary hover:bg-primary/5 font-poppins font-medium rounded-xl py-3"
                     >
-                    <Download className="w-4 h-4 mr-2" />
+                        {isDownloading ? (
+                            <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                        ) : (
+                            <Download className="w-5 h-5 mr-2" />
+                        )}
+
                         Download
                     </Button>
                 </div>