Bug fixes and minor improvements

golden-crust-bakery/package-lock.json

@@ -17,6 +17,7 @@
         "@radix-ui/react-radio-group": "^1.2.3",
         "@radix-ui/react-select": "^2.1.6",
         "@radix-ui/react-slot": "^1.1.2",
+        "canvas-confetti": "^1.9.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.479.0",
@@ -2600,6 +2601,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.3.tgz",
+      "integrity": "sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",

golden-crust-bakery/package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.479.0",

golden-crust-bakery/src/main.jsx

@@ -19,6 +19,7 @@ import ErrorPage from './pages/Error';
 import Cart from './pages/Cart';
 import Orders from './pages/Orders';
 import Checkout from './pages/Checkout';
+import Confirmation from './pages/Confirmation';
 
 const router = createBrowserRouter([
   {
@@ -58,6 +59,10 @@ const router = createBrowserRouter([
         path: '/checkout',
         element: <Checkout />,
       },
+      {
+        path: '/confirmation',
+        element: <Confirmation />,
+      },
       {
         path: '/menu',
         element: <Menu />,

golden-crust-bakery/src/pages/About.jsx

-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { ArrowRight, Award, Clock, Heart, Users } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 
 export default function About() {
-  const navigate = useNavigate();
-
   const reviews = [
     {
       name: 'Sophia Patel',
@@ -254,17 +252,19 @@ export default function About() {
           </p>
           <div className='flex flex-col sm:flex-row gap-4 justify-center'>
             <Button
-              onClick={() => navigate('/menu')}
+              asChild
               className='bg-pink-500 hover:bg-pink-600 text-white rounded-full'
             >
-              Browse Our Menu <ArrowRight className='ml-2 h-4 w-4' />
+              <Link to='/menu'>
+                Browse Our Menu <ArrowRight className='ml-2 h-4 w-4' />
+              </Link>
             </Button>
             <Button
               variant='outline'
-              onClick={() => navigate('/contact')}
+              asChild
               className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
             >
-              Contact Us
+              <Link to='/contact'>Contact Us</Link>
             </Button>
           </div>
         </div>

golden-crust-bakery/src/pages/Cart.jsx

 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 
@@ -36,7 +36,7 @@ export default function Cart() {
     (total, item) => total + item.price * item.quantity,
     0
   );
-  const tax = subtotal * 0.08; // 8% tax
+  const tax = subtotal * 0.12; // 12% tax
   const total = subtotal + tax;
 
   const handleQuantityChange = (id, newQuantity) => {
@@ -170,7 +170,7 @@ export default function Cart() {
                       </dd>
                     </div>
                     <div className='flex justify-between py-2'>
-                      <dt className='text-sm text-gray-600'>Tax (8%)</dt>
+                      <dt className='text-sm text-gray-600'>Tax (12%)</dt>
                       <dd className='text-sm font-medium text-gray-900'>
                         ${tax.toFixed(2)}
                       </dd>
@@ -194,10 +194,10 @@ export default function Cart() {
                   </Button>
                   <Button
                     variant='outline'
-                    onClick={() => navigate('/menu')}
+                    asChild
                     className='w-full mt-4 border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
                   >
-                    Continue Shopping
+                    <Link to='/menu'>Continue Shopping</Link>
                   </Button>
                   {cart.length > 0 && (
                     <Button
@@ -231,10 +231,10 @@ export default function Cart() {
             Looks like you haven't added any cakes to your cart yet.
           </p>
           <Button
-            onClick={() => navigate('/menu')}
+            asChild
             className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
           >
-            Browse Our Menu
+            <Link to='/menu'>Browse Our Menu</Link>
           </Button>
         </div>
       )}

golden-crust-bakery/src/pages/Checkout.jsx

 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, Link } from 'react-router-dom';
 import { ArrowLeft, CreditCard, HandCoins, Truck } from 'lucide-react';
 
 import { useCartStore } from '@/lib/store';
@@ -143,10 +143,11 @@ export default function Checkout() {
       };
 
       addOrder(order);
-      clearCart();
 
       setIsSubmitting(false);
       navigate(`/confirmation?orderId=${orderId}`);
+
+      clearCart();
     }, 1500);
   };
 
@@ -288,8 +289,7 @@ export default function Checkout() {
                   <div className='flex items-center space-x-2'>
                     <RadioGroupItem value='cash' id='cash' />
                     <Label htmlFor='cash' className='flex items-center'>
-                      <HandCoins className='mr-2 h-4 w-4' /> Credit Card (Pay at
-                      Delivery)
+                      <HandCoins className='mr-2 h-4 w-4' /> Cash on Delivery
                     </Label>
                   </div>
                 </RadioGroup>
@@ -313,10 +313,12 @@ export default function Checkout() {
                 <Button
                   type='button'
                   variant='outline'
-                  onClick={() => navigate('/cart')}
+                  asChild
                   className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
                 >
-                  <ArrowLeft className='mr-2 h-4 w-4' /> Back to Cart
+                  <Link to='/cart'>
+                    <ArrowLeft className='mr-2 h-4 w-4' /> Back to Cart
+                  </Link>
                 </Button>
                 <Button
                   type='submit'

golden-crust-bakery/src/pages/Confirmation.jsx

+import { useEffect, useState } from 'react';
+import { CheckCircle, Home, ShoppingBag } from 'lucide-react';
+import confetti from 'canvas-confetti';
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+
+import { useOrderStore } from '@/lib/orderStore';
+
+import { Button } from '@/components/ui/button';
+
+export default function Confirmation() {
+  const navigate = useNavigate();
+  const [searchParams, _] = useSearchParams();
+  const { orders } = useOrderStore();
+  const [order, setOrder] = useState(null);
+
+  useEffect(() => {
+    const orderId = searchParams.get('orderId');
+    if (!orderId) {
+      navigate('/');
+      return;
+    }
+
+    const foundOrder = orders.find((o) => o.id === orderId);
+    if (foundOrder) {
+      setOrder(foundOrder);
+
+      // Trigger confetti animation
+      confetti({
+        particleCount: 100,
+        spread: 70,
+        origin: { y: 0.6 },
+      });
+    } else {
+      navigate('/');
+    }
+  }, [orders, navigate, searchParams]);
+
+  if (!order) {
+    return (
+      <div className='container mx-auto px-4 py-16 text-center'>
+        <p>Loading order details...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className='container mx-auto px-4 py-8 md:py-12'>
+      <div className='max-w-3xl mx-auto bg-white rounded-xl shadow-sm border overflow-hidden'>
+        <div className='p-8'>
+          <div className='text-center mb-8'>
+            <div className='mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4'>
+              <CheckCircle className='h-10 w-10 text-green-500' />
+            </div>
+            <h1 className='text-3xl font-bold text-gray-800 mb-2'>
+              Order Confirmed!
+            </h1>
+            <p className='text-gray-600'>
+              Thank you for your order. We've received your order and will begin
+              processing it right away.
+            </p>
+          </div>
+
+          <div className='border-t border-b border-gray-200 py-6 mb-6'>
+            <div className='flex justify-between mb-2'>
+              <h2 className='text-lg font-semibold text-gray-800'>
+                Order Details
+              </h2>
+              <p className='text-pink-600 font-medium'>
+                Order #{order.id.split('-')[1]}
+              </p>
+            </div>
+            <p className='text-gray-600 text-sm mb-4'>
+              Placed on {new Date(order.date).toLocaleDateString()} at{' '}
+              {new Date(order.date).toLocaleTimeString()}
+            </p>
+
+            <div className='space-y-4'>
+              <div>
+                <h3 className='text-sm font-medium text-gray-800 mb-2'>
+                  Items Ordered:
+                </h3>
+                <ul className='divide-y divide-gray-200'>
+                  {order.items.map((item) => (
+                    <li key={item.id} className='py-3 flex justify-between'>
+                      <div>
+                        <p className='text-sm font-medium text-gray-900'>
+                          {item.name}
+                        </p>
+                        <p className='text-sm text-gray-500'>
+                          Qty: {item.quantity}
+                        </p>
+                      </div>
+                      <p className='text-sm font-medium text-gray-900'>
+                        ${(item.price * item.quantity).toFixed(2)}
+                      </p>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div className='pt-4'>
+                <div className='flex justify-between py-1'>
+                  <dt className='text-sm text-gray-600'>Subtotal</dt>
+                  <dd className='text-sm font-medium text-gray-900'>
+                    ${order.subtotal.toFixed(2)}
+                  </dd>
+                </div>
+                <div className='flex justify-between py-1'>
+                  <dt className='text-sm text-gray-600'>Tax</dt>
+                  <dd className='text-sm font-medium text-gray-900'>
+                    ${order.tax.toFixed(2)}
+                  </dd>
+                </div>
+                <div className='flex justify-between py-1'>
+                  <dt className='text-sm text-gray-600'>Delivery Fee</dt>
+                  <dd className='text-sm font-medium text-gray-900'>
+                    ${order.deliveryFee.toFixed(2)}
+                  </dd>
+                </div>
+                <div className='flex justify-between py-1 border-t border-gray-200 mt-2 pt-2'>
+                  <dt className='text-base font-medium text-gray-900'>Total</dt>
+                  <dd className='text-base font-medium text-pink-600'>
+                    ${order.total.toFixed(2)}
+                  </dd>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
+            <div>
+              <h3 className='text-sm font-medium text-gray-800 mb-2'>
+                Delivery Information:
+              </h3>
+              <p className='text-sm text-gray-600'>{order.customer.name}</p>
+              <p className='text-sm text-gray-600'>{order.customer.address}</p>
+              <p className='text-sm text-gray-600'>
+                {order.customer.city}, {order.customer.zipCode}
+              </p>
+              <p className='text-sm text-gray-600'>{order.customer.phone}</p>
+              <p className='text-sm text-gray-600'>{order.customer.email}</p>
+            </div>
+
+            <div>
+              <h3 className='text-sm font-medium text-gray-800 mb-2'>
+                Payment Method:
+              </h3>
+              <p className='text-sm text-gray-600 capitalize'>
+                {order.paymentMethod === 'credit-card'
+                  ? 'Credit Card (Pay at Delivery)'
+                  : 'Cash on Delivery'}
+              </p>
+
+              <h3 className='text-sm font-medium text-gray-800 mt-4 mb-2'>
+                Delivery Status:
+              </h3>
+              <div className='inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800'>
+                Processing
+              </div>
+            </div>
+          </div>
+
+          <div className='bg-blue-50 p-4 rounded-lg mb-8'>
+            <p className='text-sm text-blue-800'>
+              You will receive an email confirmation shortly at{' '}
+              {order.customer.email} with your order details.
+            </p>
+          </div>
+
+          <div className='flex flex-col sm:flex-row gap-4 justify-center'>
+            <Button
+              asChild
+              className='bg-pink-500 hover:bg-pink-600 text-white rounded-full'
+            >
+              <Link to='/orders'>
+                <ShoppingBag className='mr-2 h-4 w-4' /> View My Orders
+              </Link>
+            </Button>
+            <Button
+              variant='outline'
+              asChild
+              className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
+            >
+              <Link to='/'>
+                <Home className='mr-2 h-4 w-4' /> Return to Home
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

golden-crust-bakery/src/pages/Landing.jsx

 import { useEffect } from 'react';
 import { ArrowRight, Cake, ShoppingBag, Star } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import { useCartStore } from '@/lib/store';
 
 import { Button } from '@/components/ui/button';
 
 export default function Landing() {
-  const navigate = useNavigate();
   const { initializeCart } = useCartStore();
 
   useEffect(() => {
@@ -81,17 +80,19 @@ export default function Landing() {
                 </p>
                 <div className='flex flex-col sm:flex-row gap-4'>
                   <Button
-                    onClick={() => navigate('/menu')}
+                    asChild
                     className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
                   >
-                    Order Now <ArrowRight className='ml-2 h-5 w-5' />
+                    <Link to='/menu'>
+                      Order Now <ArrowRight className='ml-2 h-5 w-5' />
+                    </Link>
                   </Button>
                   <Button
                     variant='outline'
-                    onClick={() => navigate('/about')}
+                    asChild
                     className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full px-8 py-6 text-lg'
                   >
-                    Our Story
+                    <Link to='/about'>Our Story</Link>
                   </Button>
                 </div>
               </div>
@@ -140,12 +141,10 @@ export default function Landing() {
                     </div>
                     <p className='text-gray-600 mb-4'>{cake.description}</p>
                     <Button
-                      onClick={() => {
-                        navigate('/menu');
-                      }}
+                      asChild
                       className='w-full bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-full'
                     >
-                      View Details
+                      <Link to={`/menu/${cake.id}`}>View Details</Link>
                     </Button>
                   </div>
                 </div>
@@ -153,11 +152,13 @@ export default function Landing() {
             </div>
             <div className='text-center mt-10'>
               <Button
-                onClick={() => navigate('/menu')}
+                asChild
                 variant='outline'
                 className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full px-8 py-6 text-lg'
               >
-                View All Cakes <ArrowRight className='ml-2 h-5 w-5' />
+                <Link to='/menu'>
+                  View All Cakes <ArrowRight className='ml-2 h-5 w-5' />
+                </Link>
               </Button>
             </div>
           </div>
@@ -270,10 +271,12 @@ export default function Landing() {
               occasion even more memorable with a cake from Golden Crust Bakery.
             </p>
             <Button
-              onClick={() => navigate('/menu')}
+              asChild
               className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
             >
-              Order Now <ArrowRight className='ml-2 h-5 w-5' />
+              <Link to='/menu'>
+                Order Now <ArrowRight className='ml-2 h-5 w-5' />
+              </Link>
             </Button>
           </div>
         </section>

golden-crust-bakery/src/pages/Login.jsx

@@ -192,10 +192,10 @@ export default function Login() {
         <div className='mt-8 text-center'>
           <Button
             variant='ghost'
-            onClick={() => navigate('/')}
+            asChild
             className='text-gray-600 hover:text-gray-800'
           >
-            Return to Home
+            <Link to='/'>Return to Home</Link>
           </Button>
         </div>
       </div>

golden-crust-bakery/src/pages/Menu.jsx

@@ -3,20 +3,28 @@ import { toast } from 'sonner';
 import { Search, ShoppingCart } from 'lucide-react';
 
 import { useCartStore } from '@/lib/store';
+import { useAuthStore } from '@/lib/authStore';
 import { cakeData } from '@/lib/data';
 
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 
 export default function Menu() {
+  const { isAuthenticated } = useAuthStore();
+
   const { addToCart, initializeCart } = useCartStore();
   const [searchTerm, setSearchTerm] = useState('');
   const [categoryFilter, setCategoryFilter] = useState('All');
+  const [searchParams, _] = useSearchParams();
 
   useEffect(() => {
+    if (searchParams.get('category')) {
+      setCategoryFilter(searchParams.get('category'));
+    }
+
     initializeCart();
-  }, [initializeCart]);
+  }, [initializeCart, searchParams]);
 
   const categories = [
     'All',
@@ -36,6 +44,13 @@ export default function Menu() {
   });
 
   const handleAddToCart = (cake) => {
+    if (!isAuthenticated) {
+      toast.error('Authentication required!', {
+        description: 'Please sign in to add to your cart.',
+      });
+      return;
+    }
+
     addToCart({
       ...cake,
       quantity: 1,

golden-crust-bakery/src/pages/MenuItem.jsx

 import { useEffect, useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import {
   ArrowLeft,
@@ -11,17 +11,20 @@ import {
 } from 'lucide-react';
 
 import { useCartStore } from '@/lib/store';
+import { useAuthStore } from '@/lib/authStore';
 import { cakeData } from '@/lib/data';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 
 export default function MenuItem() {
+  const { isAuthenticated } = useAuthStore();
   const navigate = useNavigate();
   const { addToCart, initializeCart } = useCartStore();
   const [cake, setCake] = useState(null);
   const [quantity, setQuantity] = useState(1);
   const [isLoading, setIsLoading] = useState(true);
+  const [isFavorite, setIsFavorite] = useState(false);
 
   const cakeId = useLocation().pathname.split('/')[2];
 
@@ -50,6 +53,13 @@ export default function MenuItem() {
   };
 
   const handleAddToCart = () => {
+    if (!isAuthenticated) {
+      toast.error('Authentication required!', {
+        description: 'Please sign in to add to your cart.',
+      });
+      return;
+    }
+
     if (cake) {
       addToCart({
         ...cake,
@@ -85,10 +95,12 @@ export default function MenuItem() {
     <div className='container mx-auto px-4 py-8 md:py-12'>
       <Button
         variant='ghost'
-        onClick={() => navigate('/menu')}
+        asChild
         className='mb-6 text-gray-600 hover:text-gray-800'
       >
-        <ArrowLeft className='mr-2 h-4 w-4' /> Back to Menu
+        <Link to='/menu'>
+          <ArrowLeft className='mr-2 h-4 w-4' /> Back to Menu
+        </Link>
       </Button>
 
       <div className='grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-16 mb-12'>
@@ -157,10 +169,16 @@ export default function MenuItem() {
                 <ShoppingCart className='mr-2 h-5 w-5' /> Add to Cart
               </Button>
               <Button
+                onClick={() => setIsFavorite(!isFavorite)}
                 variant='outline'
                 className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full py-6'
               >
-                <Heart className='mr-2 h-5 w-5' /> Add to Wishlist
+                <Heart
+                  className={`mr-2 h-5 w-5 ${
+                    isFavorite ? 'fill-pink-600' : ''
+                  }`}
+                />{' '}
+                {isFavorite ? 'Remove from Wishlist' : 'Add to Wishlist'}
               </Button>
             </div>
           </div>
@@ -223,10 +241,10 @@ export default function MenuItem() {
                     {relatedCake.description}
                   </p>
                   <Button
-                    onClick={() => navigate(`/menu/${relatedCake.id}`)}
+                    asChild
                     className='w-full bg-yellow-100 hover:bg-yellow-200 text-yellow-800 rounded-full'
                   >
-                    View Details
+                    <Link to={`/menu/${relatedCake.id}`}>View Details</Link>
                   </Button>
                 </CardContent>
               </Card>

golden-crust-bakery/src/pages/Orders.jsx

 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { Home, Package, ShoppingBag, X } from 'lucide-react';
 
@@ -35,10 +35,8 @@ export default function Orders() {
 
     // Redirect to login if not authenticated
     if (!isAuthenticated) {
-      toast({
-        title: 'Authentication Required',
+      toast.error('Authentication Required', {
         description: 'Please sign in to view your orders.',
-        variant: 'destructive',
       });
       navigate('/login');
     }
@@ -51,8 +49,7 @@ export default function Orders() {
 
   const handleCancelOrder = (orderId) => {
     cancelOrder(orderId);
-    toast({
-      title: 'Order Cancelled',
+    toast.success('Order Cancelled', {
       description: 'Your order has been cancelled successfully.',
     });
   };
@@ -90,7 +87,7 @@ export default function Orders() {
               <AccordionItem
                 key={order.id}
                 value={order.id}
-                className='bg-white rounded-xl shadow-md overflow-hidden border-none'
+                className='bg-white rounded-xl shadow-sm border overflow-hidden'
               >
                 <AccordionTrigger className='px-6 py-4 hover:no-underline hover:bg-gray-50'>
                   <div className='flex flex-col md:flex-row w-full items-start md:items-center justify-between text-left'>
@@ -254,10 +251,12 @@ export default function Orders() {
             You haven't placed any orders with us yet.
           </p>
           <Button
-            onClick={() => navigate('/menu')}
+            asChild
             className='bg-pink-500 hover:bg-pink-600 text-white rounded-full px-8 py-6 text-lg'
           >
-            <ShoppingBag className='mr-2 h-5 w-5' /> Start Shopping
+            <Link to='/menu'>
+              <ShoppingBag className='mr-2 h-5 w-5' /> Start Shopping
+            </Link>
           </Button>
         </div>
       )}
@@ -265,10 +264,12 @@ export default function Orders() {
       <div className='text-center mt-8'>
         <Button
           variant='outline'
-          onClick={() => navigate('/')}
+          asChild
           className='border-pink-300 text-pink-600 hover:bg-pink-50 rounded-full'
         >
-          <Home className='mr-2 h-4 w-4' /> Return to Home
+          <Link to='/'>
+            <Home className='mr-2 h-4 w-4' /> Return to Home
+          </Link>
         </Button>
       </div>
     </div>

golden-crust-bakery/src/pages/Register.jsx

@@ -288,10 +288,10 @@ export default function Register() {
         <div className='mt-8 text-center'>
           <Button
             variant='ghost'
-            onClick={() => navigate('/')}
+            asChild
             className='text-gray-600 hover:text-gray-800'
           >
-            Return to Home
+            <Link to='/'>Return to Home</Link>
           </Button>
         </div>
       </div>