From bf94d68a3d102d326689f6eb25b853c536ed8a18 Mon Sep 17 00:00:00 2001
From: "ALMAZROUEI Shamma (2021) WKIS203"
<shamma.almazrouei.2021@live.rhul.ac.uk>
Date: Thu, 13 Mar 2025 00:36:09 +0530
Subject: [PATCH] Bug fixes and minor improvements
---
golden-crust-bakery/package-lock.json | 11 +
golden-crust-bakery/package.json | 1 +
golden-crust-bakery/src/main.jsx | 5 +
golden-crust-bakery/src/pages/About.jsx | 14 +-
golden-crust-bakery/src/pages/Cart.jsx | 14 +-
golden-crust-bakery/src/pages/Checkout.jsx | 14 +-
.../src/pages/Confirmation.jsx | 193 ++++++++++++++++++
golden-crust-bakery/src/pages/Landing.jsx | 31 +--
golden-crust-bakery/src/pages/Login.jsx | 4 +-
golden-crust-bakery/src/pages/Menu.jsx | 19 +-
golden-crust-bakery/src/pages/MenuItem.jsx | 30 ++-
golden-crust-bakery/src/pages/Orders.jsx | 23 ++-
golden-crust-bakery/src/pages/Register.jsx | 4 +-
13 files changed, 306 insertions(+), 57 deletions(-)
create mode 100644 golden-crust-bakery/src/pages/Confirmation.jsx
diff --git a/golden-crust-bakery/package-lock.json b/golden-crust-bakery/package-lock.json
index 9f0b7ca..4130bbf 100644
--- a/golden-crust-bakery/package-lock.json
+++ b/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",
diff --git a/golden-crust-bakery/package.json b/golden-crust-bakery/package.json
index f043ed5..f016c50 100644
--- a/golden-crust-bakery/package.json
+++ b/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",
diff --git a/golden-crust-bakery/src/main.jsx b/golden-crust-bakery/src/main.jsx
index d681e03..84ec698 100644
--- a/golden-crust-bakery/src/main.jsx
+++ b/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 />,
diff --git a/golden-crust-bakery/src/pages/About.jsx b/golden-crust-bakery/src/pages/About.jsx
index 8e69a83..06c6c1b 100644
--- a/golden-crust-bakery/src/pages/About.jsx
+++ b/golden-crust-bakery/src/pages/About.jsx
@@ -1,11 +1,9 @@
-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>
diff --git a/golden-crust-bakery/src/pages/Cart.jsx b/golden-crust-bakery/src/pages/Cart.jsx
index f289032..a648f28 100644
--- a/golden-crust-bakery/src/pages/Cart.jsx
+++ b/golden-crust-bakery/src/pages/Cart.jsx
@@ -1,5 +1,5 @@
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>
)}
diff --git a/golden-crust-bakery/src/pages/Checkout.jsx b/golden-crust-bakery/src/pages/Checkout.jsx
index db53d4d..5bb093a 100644
--- a/golden-crust-bakery/src/pages/Checkout.jsx
+++ b/golden-crust-bakery/src/pages/Checkout.jsx
@@ -1,6 +1,6 @@
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'
diff --git a/golden-crust-bakery/src/pages/Confirmation.jsx b/golden-crust-bakery/src/pages/Confirmation.jsx
new file mode 100644
index 0000000..c901a83
--- /dev/null
+++ b/golden-crust-bakery/src/pages/Confirmation.jsx
@@ -0,0 +1,193 @@
+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>
+ );
+}
diff --git a/golden-crust-bakery/src/pages/Landing.jsx b/golden-crust-bakery/src/pages/Landing.jsx
index 14e248c..02f52a8 100644
--- a/golden-crust-bakery/src/pages/Landing.jsx
+++ b/golden-crust-bakery/src/pages/Landing.jsx
@@ -1,13 +1,12 @@
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>
diff --git a/golden-crust-bakery/src/pages/Login.jsx b/golden-crust-bakery/src/pages/Login.jsx
index 3bb0e17..7643b7d 100644
--- a/golden-crust-bakery/src/pages/Login.jsx
+++ b/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>
diff --git a/golden-crust-bakery/src/pages/Menu.jsx b/golden-crust-bakery/src/pages/Menu.jsx
index aeadc56..f128bfc 100644
--- a/golden-crust-bakery/src/pages/Menu.jsx
+++ b/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,
diff --git a/golden-crust-bakery/src/pages/MenuItem.jsx b/golden-crust-bakery/src/pages/MenuItem.jsx
index 84d2e84..f16fe76 100644
--- a/golden-crust-bakery/src/pages/MenuItem.jsx
+++ b/golden-crust-bakery/src/pages/MenuItem.jsx
@@ -1,5 +1,5 @@
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>
diff --git a/golden-crust-bakery/src/pages/Orders.jsx b/golden-crust-bakery/src/pages/Orders.jsx
index 17d5886..c146403 100644
--- a/golden-crust-bakery/src/pages/Orders.jsx
+++ b/golden-crust-bakery/src/pages/Orders.jsx
@@ -1,5 +1,5 @@
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>
diff --git a/golden-crust-bakery/src/pages/Register.jsx b/golden-crust-bakery/src/pages/Register.jsx
index e108c1d..20fc152 100644
--- a/golden-crust-bakery/src/pages/Register.jsx
+++ b/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>
--
GitLab