diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx new file mode 100644 index 0000000..515e0e8 --- /dev/null +++ b/src/app/checkout/page.tsx @@ -0,0 +1,203 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal'; +import TextBox from '@/components/Textbox'; +import { ShoppingCart, Trash2, ArrowRight } from 'lucide-react'; +import { useState, useEffect } from 'react'; +import Link from 'next/link'; + +export default function CheckoutPage() { + const [cartItems, setCartItems] = useState([]); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const storedCart = localStorage.getItem('cart'); + if (storedCart) { + try { + setCartItems(JSON.parse(storedCart)); + } catch (error) { + console.error('Error parsing cart:', error); + } + } + setIsLoading(false); + }, []); + + const handleRemoveItem = (id) => { + const updatedCart = cartItems.filter(item => item.id !== id); + setCartItems(updatedCart); + localStorage.setItem('cart', JSON.stringify(updatedCart)); + }; + + const handleUpdateQuantity = (id, quantity) => { + if (quantity <= 0) { + handleRemoveItem(id); + } else { + const updatedCart = cartItems.map(item => + item.id === id ? { ...item, quantity } : item + ); + setCartItems(updatedCart); + localStorage.setItem('cart', JSON.stringify(updatedCart)); + } + }; + + const subtotal = cartItems.reduce((sum, item) => sum + (parseFloat(item.price.replace('$', '')) * item.quantity), 0); + const tax = subtotal * 0.08; + const delivery = subtotal > 30 ? 0 : 4.99; + const total = subtotal + tax + delivery; + + return ( + + + +
+
+ + + {isLoading ? ( +
+

Loading cart...

+
+ ) : cartItems.length === 0 ? ( +
+ +

Your cart is empty

+ + Continue Shopping + + +
+ ) : ( +
+ {/* Cart Items */} +
+
+ {cartItems.map((item) => ( +
+
+ {item.imageSrc && ( + {item.name} + )} +
+

{item.name}

+

{item.variant}

+

{item.price}

+
+
+
+
+ + {item.quantity} + +
+ +
+
+ ))} +
+ + ← Continue Shopping + +
+ + {/* Order Summary */} +
+
+

Order Total

+
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Tax (8%) + ${tax.toFixed(2)} +
+
+ Delivery + {delivery === 0 ? 'FREE' : `$${delivery.toFixed(2)}`} +
+
+
+ Total + ${total.toFixed(2)} +
+ {delivery === 0 && ( +

Free delivery on orders over $30!

+ )} + +
+
+
+ )} +
+
+ + + + ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index a3f3c3b..494db18 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -30,7 +30,7 @@ export default function LandingPage() { + + + + + + + ); +} \ No newline at end of file