From a6d2009da7c3f25eb1593aef4711111b08efdbf8 Mon Sep 17 00:00:00 2001
From: Rohan Kumar <rohangupta5671@gmail.com>
Date: Thu, 12 Feb 2026 21:56:10 +0530
Subject: [PATCH] Used useBooking Context in services.jsx

---
 backend/src/models/appointment.model.js |   2 +-
 frontend/src/components/ui/Loader.jsx   |   2 +-
 frontend/src/pages/Services.jsx         | 169 +++++++++++++-----------
 frontend/src/pages/Shop.jsx             |  29 ++--
 4 files changed, 114 insertions(+), 88 deletions(-)

diff --git a/backend/src/models/appointment.model.js b/backend/src/models/appointment.model.js
index e30b3db..389d519 100644
--- a/backend/src/models/appointment.model.js
+++ b/backend/src/models/appointment.model.js
@@ -14,7 +14,7 @@ const appointmentSchema = new mongoose.Schema({
   ],
   products: [{ type: mongoose.Schema.Types.ObjectId, ref: "Product" }],
   staff: { type: mongoose.Schema.Types.ObjectId, ref: "Staff" },
-  date: { type: String, required: true }, // Format: YYYY-MM-DD
+  date: { type: Date, required: true }, // Format: YYYY-MM-DD
   timeSlot: { type: String, required: true }, // Format: "10:00 AM"
   totalAmount: { type: Number, required: true }, // Server-Calculated
   paymentStatus: {type: String, enum: ["pending", "paid", "refunded"], default: "pending"},
diff --git a/frontend/src/components/ui/Loader.jsx b/frontend/src/components/ui/Loader.jsx
index 4671f12..59e4f86 100644
--- a/frontend/src/components/ui/Loader.jsx
+++ b/frontend/src/components/ui/Loader.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { motion,AnimatePresence } from "framer-motion";
+import { motion , AnimatePresence } from "framer-motion";
 
 import hairImg from "../../assets/hair_service.png";
 import blowDryImg from "../../assets/blowout_service.png";
diff --git a/frontend/src/pages/Services.jsx b/frontend/src/pages/Services.jsx
index 16611ff..1947063 100644
--- a/frontend/src/pages/Services.jsx
+++ b/frontend/src/pages/Services.jsx
@@ -2,19 +2,16 @@ import { useState, useEffect } from "react";
 import { Check, Plus, Loader2 } from "lucide-react";
 import Navbar from "../components/layout/Navbar";
 import BookingModal from "../components/booking/BookingModal";
-import waxImage from "../assets/wax_service.png";
-import facialImage from "../assets/facial_service.png";
 import api from "../../utils/api.js";
 
 import { useNavigate } from "react-router-dom";
 import { useBooking } from "../context/BookingContext";
 
 const ServicesFull = () => {
+  const { cart, addToCart, removeFromCart, activeBooking } = useBooking();
   const [activeCategory, setActiveCategory] = useState("");
-  const [selectedServices, setSelectedServices] = useState([]);
   const [isBookingOpen, setIsBookingOpen] = useState(false);
 
-  const { activeBooking } = useBooking();
   const navigate = useNavigate();
 
   const [categoryImages, setCategoryImages] = useState({});
@@ -153,24 +150,23 @@ const ServicesFull = () => {
   // Toggle Service Selection
   const toggleService = (item, variant = null, priceOverride = null) => {
     const itemName = variant ? `${item.name} (${variant})` : item.name;
+    // const serviceId = item._id || item.id;
 
-    if (selectedServices.some((s) => s.name === itemName)) {
-      setSelectedServices(selectedServices.filter((s) => s.name !== itemName));
+    if (cart.services.some((s) => s.name === itemName)) {
+      const itemToRemove = cart.services.find(s => s.name === itemName);
+      removeFromCart(itemToRemove._id || itemToRemove.id, "service");
     } else {
-      setSelectedServices([
-        ...selectedServices,
-        {
-          ...item,
-          name: itemName,
-          price: priceOverride || item.price,
-        },
-      ]);
+      addToCart({
+        ...item,
+        name: itemName,
+        price: priceOverride || item.price,
+      }, "service");
     }
   };
 
   const isSelected = (item, variant = null) => {
     const itemName = variant ? `${item.name} (${variant})` : item.name;
-    return selectedServices.some((s) => s.name === itemName);
+    return cart.services.some((s) => s.name === itemName);
   };
 
   if (loading) {
@@ -208,34 +204,43 @@ const ServicesFull = () => {
       <BookingModal
         isOpen={isBookingOpen}
         onClose={() => setIsBookingOpen(false)}
-        selectedServices={selectedServices}
+        selectedServices={cart.services}
+        selectedProducts={cart.products}
       />
 
       {/* Floating Action Bar */}
       <div
-        className={`fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-brown-900/10 p-4 md:p-6 shadow-[0_-10px_40px_-10px_rgba(0,0,0,0.1)] transition-transform duration-500 ease-in-out ${selectedServices.length > 0 ? "translate-y-0" : "translate-y-full"}`}
+        className={`fixed bottom-0 left-0 right-0 z-40 bg-white border-t border-brown-900/10 p-4 md:p-6 shadow-[0_-10px_40px_-10px_rgba(0,0,0,0.1)] transition-transform duration-500 ease-in-out ${cart.services.length > 0 || cart.products.length > 0 ? "translate-y-0" : "translate-y-full"}`}
       >
         <div className="max-w-360 mx-auto flex justify-between items-center gap-4">
           <div className="hidden md:block">
             <span className="text-sm font-bold text-brown-900 uppercase tracking-widest block mb-1">
-              Your Selection
+              Your Selection ({cart.services.length + cart.products.length})
             </span>
             <div className="flex gap-2 overflow-x-auto pb-1 max-w-xl">
-              {selectedServices.map((s, i) => (
+              {cart.services.map((s, i) => (
                 <span
-                  key={i}
+                  key={`service-${i}`}
                   className="text-sm text-brown-600 bg-brown-50 px-2 py-1 rounded inline-block whitespace-nowrap"
                 >
                   {s.name}
                 </span>
               ))}
+              {cart.products.map((p, i) => (
+                <span
+                  key={`product-${i}`}
+                  className="text-sm text-brown-600 bg-brown-50 px-2 py-1 rounded inline-block whitespace-nowrap"
+                >
+                  {p.name}
+                </span>
+              ))}
             </div>
           </div>
 
           <div className="flex items-center gap-4 w-full md:w-auto">
             <div className="md:hidden flex-1">
               <span className="text-sm font-bold text-brown-900 block">
-                {selectedServices.length} Services Selected
+                {cart.services.length + cart.products.length} Services Selected
               </span>
             </div>
             <button
@@ -262,10 +267,11 @@ const ServicesFull = () => {
                 <button
                   key={service.id}
                   onClick={() => scrollToCategory(service.id)}
-                  className={`text-left px-5 py-3 rounded-lg text-base tracking-wide transition-all duration-300 font-serif border border-transparent flex justify-between items-center group ${activeCategory === service.id
-                    ? "bg-brown-900 text-white shadow-md translate-x-2"
-                    : "text-brown-600 hover:bg-brown-900/5 hover:text-brown-900"
-                    }`}
+                  className={`text-left px-5 py-3 rounded-lg text-base tracking-wide transition-all duration-300 font-serif border border-transparent flex justify-between items-center group ${
+                    activeCategory === service.id
+                      ? "bg-brown-900 text-white shadow-md translate-x-2"
+                      : "text-brown-600 hover:bg-brown-900/5 hover:text-brown-900"
+                  }`}
                 >
                   {service.category}
                   {activeCategory === service.id && (
@@ -283,10 +289,11 @@ const ServicesFull = () => {
               <button
                 key={service.id}
                 onClick={() => scrollToCategory(service.id)}
-                className={`whitespace-nowrap px-5 py-2 rounded-full text-xs font-bold tracking-wide border transition-all duration-300 ${activeCategory === service.id
-                  ? "bg-brown-900 text-white border-brown-900 shadow-md"
-                  : "bg-white border-brown-900/10 text-brown-700"
-                  }`}
+                className={`whitespace-nowrap px-5 py-2 rounded-full text-xs font-bold tracking-wide border transition-all duration-300 ${
+                  activeCategory === service.id
+                    ? "bg-brown-900 text-white border-brown-900 shadow-md"
+                    : "bg-white border-brown-900/10 text-brown-700"
+                }`}
               >
                 {service.category}
               </button>
@@ -334,10 +341,11 @@ const ServicesFull = () => {
 
                           {item.price && item.price.includes("/") ? (
                             <div
-                              className={`relative overflow-hidden rounded-full border border-brown-900 group/split w-27.5 h-8.5 cursor-pointer shadow-sm hover:shadow-md transition-all duration-300 ${isSelected(item, "M") || isSelected(item, "F")
-                                ? "bg-brown-900 border-brown-900"
-                                : "bg-transparent border-brown-900 hover:bg-white"
-                                }`}
+                              className={`relative overflow-hidden rounded-full border border-brown-900 group/split w-27.5 h-8.5 cursor-pointer shadow-sm hover:shadow-md transition-all duration-300 ${
+                                isSelected(item, "M") || isSelected(item, "F")
+                                  ? "bg-brown-900 border-brown-900"
+                                  : "bg-transparent border-brown-900 hover:bg-white"
+                              }`}
                             >
                               {/* Default Content: 'Add' */}
                               <div
@@ -364,13 +372,14 @@ const ServicesFull = () => {
                                     );
                                   }}
                                   className={`flex-1 h-full flex items-center justify-center transition-colors hover:bg-brown-100
-                                                                            ${isSelected(
-                                    item,
-                                    "M",
-                                  )
-                                      ? "bg-brown-900 text-white hover:bg-brown-800"
-                                      : "bg-white text-brown-900"
-                                    }`}
+                                                                            ${
+                                                                              isSelected(
+                                                                                item,
+                                                                                "M",
+                                                                              )
+                                                                                ? "bg-brown-900 text-white hover:bg-brown-800"
+                                                                                : "bg-white text-brown-900"
+                                                                            }`}
                                 >
                                   M{" "}
                                   {isSelected(item, "M") && (
@@ -388,13 +397,14 @@ const ServicesFull = () => {
                                     );
                                   }}
                                   className={`flex-1 h-full flex items-center justify-center transition-colors hover:bg-brown-100
-                                                                            ${isSelected(
-                                    item,
-                                    "F",
-                                  )
-                                      ? "bg-brown-900 text-white hover:bg-brown-800"
-                                      : "bg-white text-brown-900"
-                                    }`}
+                                                                            ${
+                                                                              isSelected(
+                                                                                item,
+                                                                                "F",
+                                                                              )
+                                                                                ? "bg-brown-900 text-white hover:bg-brown-800"
+                                                                                : "bg-white text-brown-900"
+                                                                            }`}
                                 >
                                   F{" "}
                                   {isSelected(item, "F") && (
@@ -407,12 +417,13 @@ const ServicesFull = () => {
                             <button
                               onClick={() => toggleService(item)}
                               className={`px-6 py-2 border text-xs tracking-wider uppercase font-bold rounded-full transition-all duration-300 flex items-center gap-2
-                                                                ${isSelected(
-                                item,
-                              )
-                                  ? "bg-brown-900 text-white border-brown-900"
-                                  : "bg-transparent border-brown-900 text-brown-900 hover:bg-brown-900 hover:text-white"
-                                }
+                                                                ${
+                                                                  isSelected(
+                                                                    item,
+                                                                  )
+                                                                    ? "bg-brown-900 text-white border-brown-900"
+                                                                    : "bg-transparent border-brown-900 text-brown-900 hover:bg-brown-900 hover:text-white"
+                                                                }
                                                             `}
                             >
                               {isSelected(item) ? (
@@ -463,11 +474,12 @@ const ServicesFull = () => {
 
                                 {item.price && item.price.includes("/") ? (
                                   <div
-                                    className={`relative overflow-hidden rounded-full border border-brown-900 group/split w-27.5 h-8.5 cursor-pointer shadow-sm hover:shadow-md transition-all duration-300 ${isSelected(item, "M") ||
+                                    className={`relative overflow-hidden rounded-full border border-brown-900 group/split w-27.5 h-8.5 cursor-pointer shadow-sm hover:shadow-md transition-all duration-300 ${
+                                      isSelected(item, "M") ||
                                       isSelected(item, "F")
-                                      ? "bg-brown-900 border-brown-900"
-                                      : "bg-transparent border-brown-900 hover:bg-white"
-                                      }`}
+                                        ? "bg-brown-900 border-brown-900"
+                                        : "bg-transparent border-brown-900 hover:bg-white"
+                                    }`}
                                   >
                                     {/* Default Content: 'Add' */}
                                     <div
@@ -494,13 +506,14 @@ const ServicesFull = () => {
                                           );
                                         }}
                                         className={`flex-1 h-full flex items-center justify-center transition-colors hover:bg-brown-100
-                                                                                    ${isSelected(
-                                          item,
-                                          "M",
-                                        )
-                                            ? "bg-brown-900 text-white hover:bg-brown-800"
-                                            : "bg-white text-brown-900"
-                                          }`}
+                                                                                    ${
+                                                                                      isSelected(
+                                                                                        item,
+                                                                                        "M",
+                                                                                      )
+                                                                                        ? "bg-brown-900 text-white hover:bg-brown-800"
+                                                                                        : "bg-white text-brown-900"
+                                                                                    }`}
                                       >
                                         M{" "}
                                         {isSelected(item, "M") && (
@@ -518,13 +531,14 @@ const ServicesFull = () => {
                                           );
                                         }}
                                         className={`flex-1 h-full flex items-center justify-center transition-colors hover:bg-brown-100
-                                                                                    ${isSelected(
-                                          item,
-                                          "F",
-                                        )
-                                            ? "bg-brown-900 text-white hover:bg-brown-800"
-                                            : "bg-white text-brown-900"
-                                          }`}
+                                                                                    ${
+                                                                                      isSelected(
+                                                                                        item,
+                                                                                        "F",
+                                                                                      )
+                                                                                        ? "bg-brown-900 text-white hover:bg-brown-800"
+                                                                                        : "bg-white text-brown-900"
+                                                                                    }`}
                                       >
                                         F{" "}
                                         {isSelected(item, "F") && (
@@ -537,12 +551,13 @@ const ServicesFull = () => {
                                   <button
                                     onClick={() => toggleService(item)}
                                     className={`px-6 py-2 border text-xs tracking-wider uppercase font-bold rounded-full transition-all duration-300 flex items-center gap-2
-                                                                            ${isSelected(
-                                      item,
-                                    )
-                                        ? "bg-brown-900 text-white border-brown-900"
-                                        : "bg-transparent border-brown-900 text-brown-900 hover:bg-brown-900 hover:text-white"
-                                      }
+                                                                            ${
+                                                                              isSelected(
+                                                                                item,
+                                                                              )
+                                                                                ? "bg-brown-900 text-white border-brown-900"
+                                                                                : "bg-transparent border-brown-900 text-brown-900 hover:bg-brown-900 hover:text-white"
+                                                                            }
                                                                         `}
                                   >
                                     {isSelected(item) ? (
diff --git a/frontend/src/pages/Shop.jsx b/frontend/src/pages/Shop.jsx
index f388363..517297c 100644
--- a/frontend/src/pages/Shop.jsx
+++ b/frontend/src/pages/Shop.jsx
@@ -1,9 +1,10 @@
 import { useState, useEffect } from "react";
 import api from "../../utils/api.js";
-import Navbar from "../components/layout/Navbar";
-import BookingModal from "../components/booking/BookingModal";
+import Navbar from "../components/layout/Navbar.jsx";
+import BookingModal from "../components/booking/BookingModal.jsx";
 import { ShoppingBag, ArrowRight, Search } from "lucide-react";
 import { Link } from "react-router-dom";
+import { useBooking } from "../context/BookingContext.jsx";
 
 const Shop = () => {
   const [isBookingOpen, setIsBookingOpen] = useState(false);
@@ -24,6 +25,8 @@ const Shop = () => {
     return matchesSearch && matchesCategory;
   });
 
+  const { addToCart, cart } = useBooking();
+
   useEffect(() => {
     const fetchProducts = async () => {
       try {
@@ -48,7 +51,8 @@ const Shop = () => {
       <BookingModal
         isOpen={isBookingOpen}
         onClose={() => setIsBookingOpen(false)}
-        selectedServices={[]}
+        selectedServices={cart.services}
+        selectedProducts={cart.products}
       />
 
       {/* Hero Section with Background Image - 50vh */}
@@ -93,10 +97,11 @@ const Shop = () => {
                 <button
                   key={cat}
                   onClick={() => setSelectedCategory(cat)}
-                  className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 backdrop-blur-sm border ${selectedCategory === cat
+                  className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-300 backdrop-blur-sm border ${
+                    selectedCategory === cat
                       ? "bg-white text-brown-900 border-white shadow-lg transform scale-105"
                       : "bg-white/10 text-white border-white/20 hover:bg-white/20 hover:border-white/40"
-                    }`}
+                  }`}
                 >
                   {cat}
                 </button>
@@ -135,7 +140,10 @@ const Shop = () => {
                   />
                   {/* Quick Add Button or Badge */}
                   <div className="absolute bottom-4 right-4 translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 delay-100 z-20">
-                    <button className="bg-white text-brown-900 p-3 rounded-full shadow-lg hover:bg-brown-900 hover:text-white transition-colors">
+                    <button
+                      className="bg-white text-brown-900 p-3 rounded-full shadow-lg hover:bg-brown-900 hover:text-white transition-colors"
+                      onClick={() => addToCart(product, "product")}
+                    >
                       <ShoppingBag size={20} />
                     </button>
                   </div>
@@ -157,10 +165,11 @@ const Shop = () => {
                       </p>
                     </div>
                     <span
-                      className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider ${product.stock > 0
+                      className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider ${
+                        product.stock > 0
                           ? "bg-brown-50 text-brown-800 border border-brown-100"
                           : "bg-red-50 text-red-800 border border-red-100"
-                        }`}
+                      }`}
                     >
                       {product.stock > 0 ? "In Stock" : "Sold Out"}
                     </span>
@@ -175,7 +184,9 @@ const Shop = () => {
               <Search size={64} strokeWidth={1} />
             </div>
             <h3 className="text-3xl font-serif text-brown-900 mb-4">
-              {products.length === 0 ? "Collection Coming Soon" : "No matches found"}
+              {products.length === 0
+                ? "Collection Coming Soon"
+                : "No matches found"}
             </h3>
             <p className="text-brown-500 mb-8 max-w-md mx-auto leading-relaxed">
               {products.length === 0