Merge pull request 'main' (#24) from main into testing

Reviewed-on: #24

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<typeof store.getState>;

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;

src/Redux/services/itinerary.service.ts

@@ -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;

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 (
     <section
@@ -145,29 +158,42 @@ export function MelbourneBlogs() {
           viewport={{ once: true }}
           className="flex flex-wrap justify-center gap-3 mb-16"
         >
-          {categories.map((category, index) => (
           <motion.button
-              key={category.name}
+            initial={{ opacity: 0, scale: 0.9 }}
+            whileInView={{ opacity: 1, scale: 1 }}
+            viewport={{ once: true }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={() => 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"}`}
+          >
+            <span className="flex items-center gap-2">All</span>
+          </motion.button>
+
+          {categoriess.map((category: any, index) => (
+            <motion.button
+              key={category.id}
               initial={{ opacity: 0, scale: 0.9 }}
               whileInView={{ opacity: 1, scale: 1 }}
               transition={{ duration: 0.4, delay: 0.2 + index * 0.05 }}
               viewport={{ once: true }}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
-              className={`px-6 py-3 rounded-full bg-gradient-to-r ${category.color} text-white font-medium shadow-lg hover:shadow-xl transition-all duration-300 group`}
+              onClick={() => 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"}`}
             >
               <span className="flex items-center gap-2">
-                {category.name}
-                <span className="text-xs bg-white/20 px-2 py-1 rounded-full group-hover:bg-white/30 transition-colors duration-200">
-                  {category.count}
-                </span>
+                {category.categoryName}
               </span>
             </motion.button>
           ))}
         </motion.div>
 
+
         {/* Featured Post */}
-        {featuredPost && (
+        {/* {featuredPost && (
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -177,13 +203,13 @@ export function MelbourneBlogs() {
           >
 
           </motion.div>
-        )}
+        )} */}
 
         {/* Regular Blog Posts Grid */}
         <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {regularPosts.map((post, index) => (
+          {blogss && blogss?.map((blog: any, index) => (
             <motion.article
-              key={post.id}
+              key={blog.id}
               initial={{ opacity: 0, y: 30 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
@@ -193,47 +219,52 @@ export function MelbourneBlogs() {
               {/* Post Image */}
               <div className="relative overflow-hidden h-48">
                 <ImageWithFallback
-                  src={post.image}
-                  alt={post.title}
+                  src={`${baseUrl}${blog?.coverImage}`}
+                  alt={blog?.blogTitle}
                   className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
 
                 {/* Category Badge */}
                 <div className="absolute top-4 left-4 bg-white/95 backdrop-blur-sm text-gray-900 px-3 py-1 rounded-full text-xs font-medium">
-                  {post.category}
+                  {blog?.category?.categoryName}
                 </div>
               </div>
 
               {/* Post Content */}
               <div className="p-6 flex-1 flex flex-col justify-between">
                 <div className="flex items-center gap-3 text-xs text-gray-500 mb-3">
-                  <div className="flex items-center gap-1">
+                  {/* <div className="flex items-center gap-1">
                     <User className="w-3 h-3" />
-                    {post.author}
-                  </div>
+                    {blog?.author}
+                  </div> */}
                   <div className="flex items-center gap-1">
                     <Calendar className="w-3 h-3" />
-                    {post.date}
+                    {blog?.createdAt && new Date(blog.createdAt).toLocaleDateString(
+                      'en-US',
+                      { month: 'short', day: 'numeric', year: 'numeric' }
+                    )}
                   </div>
                   <div className="flex items-center gap-1">
                     <Clock className="w-3 h-3" />
-                    {post.readTime}
+                    5 min read
                   </div>
                 </div>
 
                 <div className="flex-1 flex flex-col">
                   <h3 className="font-merchant text-xl font-semibold text-gray-900 mb-3 leading-tight group-hover:text-primary transition-colors duration-200 line-clamp-2">
-                    {post.title}
+                    {blog?.blogTitle}
                   </h3>
 
-                  <p className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3">
-                    {post.excerpt}
-                  </p>
+                  <p
+                    className="text-gray-600 leading-relaxed mb-4 text-sm flex-1 line-clamp-3"
+                    dangerouslySetInnerHTML={{ __html: blog?.content }}
+                  />
+
 
                   {/* Tags */}
-                  <div className="flex flex-wrap gap-1 mb-4">
-                    {post.tags.slice(0, 2).map((tag, tagIndex) => (
+                  {/* <div className="flex flex-wrap gap-1 mb-4">
+                    {blog?.tags?.slice(0, 2).map((tag, tagIndex) => (
                       <span
                         key={tagIndex}
                         className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium"
@@ -241,12 +272,12 @@ export function MelbourneBlogs() {
                         {tag}
                       </span>
                     ))}
-                    {post.tags.length > 2 && (
+                    {blog?.tags?.length > 2 && (
                       <span className="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs">
-                        +{post.tags.length - 2}
+                        +{blog?.tags?.length - 2}
                       </span>
                     )}
-                  </div>
+                  </div> */}
                 </div>
 
                 <div className="flex items-center justify-between mt-auto">

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<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,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(
@@ -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">
+
+              <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