main #31
@@ -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">
|
||||
@@ -125,7 +147,7 @@ export function ItineraryViewPage({
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
onClick={() => navigate(-1) }
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-6 hover:bg-primary/5 font-poppins font-medium cursor-pointer"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
@@ -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,109 +293,92 @@ 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 (
|
||||
<motion.div
|
||||
key={actIndex}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + dayIndex * 0.1 + actIndex * 0.05 }}
|
||||
className="flex gap-6"
|
||||
>
|
||||
{/* Time Column */}
|
||||
<div className="flex-shrink-0 w-24 pt-2">
|
||||
<div className="font-poppins text-base font-medium text-gray-700">
|
||||
{activity.timeSlot}
|
||||
</div>
|
||||
{day.items?.map((activity: any, actIndex: number) => (
|
||||
<motion.div
|
||||
key={actIndex}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.6 + dayIndex * 0.1 + actIndex * 0.05 }}
|
||||
className="flex gap-6"
|
||||
>
|
||||
{/* Time Column */}
|
||||
<div className="flex-shrink-0 w-24 pt-2">
|
||||
<div className="font-poppins text-base font-medium text-gray-700">
|
||||
{activity.timeSlot}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Card */}
|
||||
<div className="flex-1">
|
||||
<Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 border-2 border-gray-100">
|
||||
<CardContent className="p-0">
|
||||
{/* Hero Image */}
|
||||
<div className="relative h-64 md:h-72 bg-gray-200">
|
||||
<ImageWithFallback
|
||||
src={activity.imageUrl}
|
||||
alt={activity.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
{/* Activity Card */}
|
||||
<div className="flex-1">
|
||||
<Card className="overflow-hidden hover:shadow-xl transition-shadow duration-300 border-2 border-gray-100">
|
||||
<CardContent className="p-0">
|
||||
{/* Hero Image */}
|
||||
<div className="relative h-64 md:h-72 bg-gray-200">
|
||||
<ImageWithFallback
|
||||
src={activity.imageUrl}
|
||||
alt={activity.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
{/* Favourite Button */}
|
||||
{/* <div className="absolute top-4 right-4">
|
||||
<Button
|
||||
size="icon"
|
||||
{/* 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"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`https://www.google.com/maps?q=${activity.latitude},${activity.longitude}`,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Navigation className="w-4 h-4 mr-2" />
|
||||
Get Directions
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
|
||||
{activity.title}
|
||||
</h4>
|
||||
<div className="flex items-start gap-2 text-gray-600">
|
||||
<MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-primary" />
|
||||
<span className="font-poppins text-sm font-normal leading-relaxed">
|
||||
{activity.locationName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Badges */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activity.categories?.map((cat: string, ci: number) => (
|
||||
<Badge
|
||||
key={ci}
|
||||
variant="secondary"
|
||||
className="bg-white/95 hover:bg-white shadow-lg backdrop-blur-sm rounded-full w-12 h-12"
|
||||
onClick={() => toggleFavorite(activityKey)}
|
||||
className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
|
||||
>
|
||||
<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 */}
|
||||
<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"
|
||||
onClick={() =>
|
||||
window.open(
|
||||
`https://www.google.com/maps?q=${activity.latitude},${activity.longitude}`,
|
||||
'_blank'
|
||||
)
|
||||
}
|
||||
>
|
||||
<Navigation className="w-4 h-4 mr-2" />
|
||||
Get Directions
|
||||
</Button>
|
||||
</div>
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<h4 className="font-merchant text-xl md:text-2xl leading-snug font-semibold text-gray-900">
|
||||
{activity.title}
|
||||
</h4>
|
||||
<div className="flex items-start gap-2 text-gray-600">
|
||||
<MapPin className="w-4 h-4 mt-1 flex-shrink-0 text-primary" />
|
||||
<span className="font-poppins text-sm font-normal leading-relaxed">
|
||||
{activity.locationName}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Category Badges */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{activity.categories?.map((cat: string, ci: number) => (
|
||||
<Badge
|
||||
key={ci}
|
||||
variant="secondary"
|
||||
className="font-poppins font-normal text-sm bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1"
|
||||
>
|
||||
{cat}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary font-semibold mt-1 flex-shrink-0">•</span>
|
||||
<span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
|
||||
{activity.description}
|
||||
</span>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<div className="space-y-2 pt-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-primary font-semibold mt-1 flex-shrink-0">•</span>
|
||||
<span className="font-poppins text-sm font-normal text-gray-600 leading-relaxed">
|
||||
{activity.description}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</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(
|
||||
@@ -454,16 +456,26 @@ export function ItineraryViewPage({
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={()=>navigate(`/create-itinerary`)}
|
||||
onClick={() => navigate(`/create-itinerary`)}
|
||||
className="font-poppins font-medium px-8 py-3 text-lg"
|
||||
>
|
||||
<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">
|
||||
<Download className="w-5 h-5 mr-2" />
|
||||
|
||||
<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