Merge branch 'hemant' of http://git.wdipl.com/CityCards/CityCards-Website into arya-branch
This commit is contained in:
aryabenade
@@ -29,11 +29,22 @@ export const itineraryApi = createApi({
|
||||
}
|
||||
}),
|
||||
|
||||
downloadItinerary: builder.query<Blob, string>({
|
||||
query: (id) => ({
|
||||
url: `/mobile/itinerary/${id}/download`,
|
||||
method: 'GET',
|
||||
responseHandler: (response) => response.blob(),
|
||||
}),
|
||||
}),
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
export const {
|
||||
useCreateMagicItineraryMutation,
|
||||
useGetItineraryDetailsByIdQuery,
|
||||
useGetUserItinerariesQuery
|
||||
useGetUserItinerariesQuery,
|
||||
useDownloadItineraryQuery,
|
||||
|
||||
|
||||
} = itineraryApi;
|
||||
@@ -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<Set<string>>(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 (
|
||||
<LoadingSpinner/>
|
||||
);
|
||||
return <LoadingSpinner />;
|
||||
}
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
@@ -182,7 +204,6 @@ export function ItineraryViewPage({
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
{/* Banner Image */}
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative h-40 md:h-48">
|
||||
<ImageWithFallback
|
||||
@@ -272,11 +293,7 @@ export function ItineraryViewPage({
|
||||
|
||||
{/* Activity Cards */}
|
||||
<div className="space-y-8">
|
||||
{day.items?.map((activity: any, actIndex: number) => {
|
||||
const activityKey = `day${day.dayNumber}-act${actIndex}`;
|
||||
// const isFavorite = favorites.has(activityKey);
|
||||
|
||||
return (
|
||||
{day.items?.map((activity: any, actIndex: number) => (
|
||||
<motion.div
|
||||
key={actIndex}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -303,19 +320,7 @@ export function ItineraryViewPage({
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Favourite Button */}
|
||||
{/* <div className="absolute top-4 right-4">
|
||||
<Button
|
||||
size="icon"
|
||||
variant="secondary"
|
||||
className="bg-white/95 hover:bg-white shadow-lg backdrop-blur-sm rounded-full w-12 h-12"
|
||||
onClick={() => toggleFavorite(activityKey)}
|
||||
>
|
||||
<Heart className={`w-5 h-5 ${isFavorite ? 'fill-primary text-primary' : 'text-gray-700'}`} />
|
||||
</Button>
|
||||
</div> */}
|
||||
|
||||
{/* Get Directions — links to Google Maps via lat/lng */}
|
||||
{/* Get Directions */}
|
||||
<div className="absolute bottom-4 left-4">
|
||||
<Button
|
||||
className="bg-primary hover:bg-primary/90 text-white font-poppins font-semibold shadow-lg px-6 py-3 rounded-xl"
|
||||
@@ -373,8 +378,7 @@ export function ItineraryViewPage({
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -395,9 +399,7 @@ export function ItineraryViewPage({
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
{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(
|
||||
@@ -460,10 +462,20 @@ export function ItineraryViewPage({
|
||||
<Heart className="w-5 h-5 mr-2" />
|
||||
Create Another
|
||||
</Button>
|
||||
<Button className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg">
|
||||
|
||||
<Button
|
||||
onClick={handleDownloadItinerary}
|
||||
disabled={isDownloading}
|
||||
className="bg-primary hover:bg-primary/90 font-poppins font-semibold px-8 py-3 text-lg"
|
||||
>
|
||||
{isDownloading ? (
|
||||
<Loader2 className="w-5 h-5 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Download className="w-5 h-5 mr-2" />
|
||||
)}
|
||||
Save Itinerary
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" className="font-poppins font-medium px-8 py-3 text-lg">
|
||||
<Share2 className="w-5 h-5 mr-2" />
|
||||
Share Trip
|
||||
|
||||
Reference in New Issue
Block a user