diff --git a/src/Redux/Store.tsx b/src/Redux/Store.tsx index 363baba..2f46957 100644 --- a/src/Redux/Store.tsx +++ b/src/Redux/Store.tsx @@ -5,6 +5,7 @@ import { authApi } from "./services/auth.service"; import { profileApi } from "./services/profile.service"; import { cardsApi } from "./services/cards.service"; import { itineraryApi } from "./services/itinerary.service"; +import { blogsApi } from "./services/blogs.service"; export const store = configureStore({ reducer: { @@ -13,7 +14,8 @@ export const store = configureStore({ [authApi.reducerPath]: authApi.reducer, [profileApi.reducerPath]: profileApi.reducer, [cardsApi.reducerPath]:cardsApi.reducer, - [itineraryApi.reducerPath]:itineraryApi.reducer + [itineraryApi.reducerPath]:itineraryApi.reducer, + [blogsApi.reducerPath]:blogsApi.reducer }, @@ -24,7 +26,8 @@ export const store = configureStore({ authApi.middleware, profileApi.middleware, cardsApi.middleware, - itineraryApi.middleware + itineraryApi.middleware, + blogsApi.middleware ), }); export type RootState = ReturnType; diff --git a/src/Redux/services/blogs.service.ts b/src/Redux/services/blogs.service.ts new file mode 100644 index 0000000..bcc2a40 --- /dev/null +++ b/src/Redux/services/blogs.service.ts @@ -0,0 +1,28 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; +import { baseQuery } from "../baseQuery"; + +export const blogsApi = createApi({ + reducerPath: 'blogsApi', + baseQuery, + endpoints: (builder) => ({ + + getBlogsForCity: builder.query({ + // cityId is required, others optional + query: ({ cityId, categoryId }) => { + const params = new URLSearchParams(); + + // required + params.append('cityXid', cityId); + + // optional + if (categoryId) params.append('categoryXid', categoryId); + + return `/website/list/blogs?${params.toString()}`; + }, + }), + + + }), +}); + +export const { useGetBlogsForCityQuery } = blogsApi; \ No newline at end of file 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/components/MelbourneBlogs.tsx b/src/components/MelbourneBlogs.tsx index 1be345a..4f6fff6 100644 --- a/src/components/MelbourneBlogs.tsx +++ b/src/components/MelbourneBlogs.tsx @@ -2,8 +2,9 @@ import { motion } from 'motion/react'; import { ImageWithFallback } from './figma/ImageWithFallback'; import { Calendar, Clock, User, ArrowRight, Coffee, Camera, MapPin, Star } from 'lucide-react'; import { Button } from './ui/button'; -import { useRef } from "react"; +import { useRef, useState } from "react"; import { useNavigate } from 'react-router-dom'; +import { useGetBlogsForCityQuery } from '../Redux/services/blogs.service'; const blogPosts = [ { @@ -93,10 +94,22 @@ export function MelbourneBlogs() { const sectionRef = useRef(null); const navigate = useNavigate(); + const cityId = localStorage.getItem('cityId'); + const [categoryId, setCategoryId] = useState(""); + const { data: blogsData, error, isLoading } = useGetBlogsForCityQuery({ cityId, categoryId }); const featuredPost = blogPosts.find(post => post.featured); const regularPosts = blogPosts.filter(post => !post.featured); const cityName = localStorage.getItem('cityName'); + const baseUrl = import.meta.env.VITE_BASE_URL; + + const blogss = blogsData?.blogs ?? []; + const categoriess = blogsData?.categories ?? [] + + const handleCategoryClick = (id: string) => { + // toggle logic: if already selected, reset to empty + setCategoryId(prev => (prev === id ? "" : id)); + }; return (
- {categories.map((category, index) => ( + setCategoryId("")} + className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group + ${categoryId === "" ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`} + > + All + + + {categoriess.map((category: any, index) => ( handleCategoryClick(category.id)} + className={`cursor-pointer px-6 py-3 rounded-full font-medium shadow-lg hover:shadow-xl transition-all duration-300 group + ${categoryId === category.id ? "bg-gradient-to-r from-primary to-secondary text-white" : "bg-white text-gray-700"}`} > - {category.name} - - {category.count} - + {category.categoryName} ))} + {/* Featured Post */} - {featuredPost && ( + {/* {featuredPost && ( - )} + )} */} {/* Regular Blog Posts Grid */}
- {regularPosts.map((post, index) => ( + {blogss && blogss?.map((blog: any, index) => (
{/* Category Badge */}
- {post.category} + {blog?.category?.categoryName}
{/* Post Content */}
-
+ {/*
- {post.author} -
+ {blog?.author} +
*/}
- {post.date} + {blog?.createdAt && new Date(blog.createdAt).toLocaleDateString( + 'en-US', + { month: 'short', day: 'numeric', year: 'numeric' } + )}
- {post.readTime} + 5 min read

- {post.title} + {blog?.blogTitle}

-

- {post.excerpt} -

+

+ {/* Tags */} -

- {post.tags.slice(0, 2).map((tag, tagIndex) => ( + {/*
+ {blog?.tags?.slice(0, 2).map((tag, tagIndex) => ( ))} - {post.tags.length > 2 && ( + {blog?.tags?.length > 2 && ( - +{post.tags.length - 2} + +{blog?.tags?.length - 2} )} -
+
*/}
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({ > - +