diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx index 1841d8e..26f7948 100644 --- a/src/app/cart/page.tsx +++ b/src/app/cart/page.tsx @@ -1,73 +1,90 @@ 'use client'; -import React from 'react'; -import { ThemeProvider } from '@/components/theme/ThemeProvider'; +import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; -import { CartProvider, useCart } from '@/components/cart/CartProvider'; -import { CartItem } from '@/components/cart/CartItem'; -import { CartProgress } from '@/components/cart/CartProgress'; -import Link from 'next/link'; -import { ShoppingCart } from 'lucide-react'; +import FooterCard from '@/components/sections/footer/FooterCard'; +import { useCart } from '@/components/cart/CartProvider'; +import { ShoppingCart, Trash2, Facebook, Twitter, Instagram } from 'lucide-react'; const CartPageContent = () => { - const { cartItems, updateQuantity, removeFromCart, getCartTotal } = useCart(); - const cartTotal = getCartTotal(); + const { cartItems, removeFromCart, updateQuantity, getTotalPrice } = useCart(); + + const navItems = [ + { name: 'Products', id: '/products' }, + { name: 'Cart', id: '/cart' }, + { name: 'Checkout', id: '/checkout' }, + ]; return ( -
-

- - Your Cart -

+ <> + +
+

+ Your Cart +

- {cartItems.length === 0 ? ( -
-

Your cart is empty.

- - Go to Products - -
- ) : ( -
- -
+ {cartItems.length === 0 ? ( +

Your cart is empty. Start shopping!

+ ) : ( +
{cartItems.map((item) => ( - +
+
+ {item.imageAlt} +
+

{item.name}

+

${item.price}

+
+
+
+ updateQuantity(item.id, parseInt(e.target.value))} + className="w-16 p-2 border rounded-md text-center mr-4" + /> + +
+
))} +
+ Total: ${getTotalPrice().toFixed(2)} +
+
-
-

Total:

- ${cartTotal.toFixed(2)} -
-
- - Proceed to Checkout - -
-
- )} -
+ )} +
+ + ); }; export default function CartPage() { return ( - - - - + ); } diff --git a/src/app/checkout/page.tsx b/src/app/checkout/page.tsx index 938e0bb..f78de94 100644 --- a/src/app/checkout/page.tsx +++ b/src/app/checkout/page.tsx @@ -1,154 +1,210 @@ 'use client'; -import React, { useState } from 'react'; -import { ThemeProvider } from '@/components/theme/ThemeProvider'; +import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider'; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; -import { CartProvider, useCart } from '@/components/cart/CartProvider'; -import { useRouter } from 'next/navigation'; -import { Package, CreditCard } from 'lucide-react'; -import Link from 'next/link'; +import FooterCard from '@/components/sections/footer/FooterCard'; +import { useCart } from '@/components/cart/CartProvider'; +import { CreditCard, Truck, Receipt, Facebook, Twitter, Instagram } from 'lucide-react'; +import React, { useState } from 'react'; const CheckoutPageContent = () => { - const { cartItems, getCartTotal, clearCart } = useCart(); - const router = useRouter(); - const cartTotal = getCartTotal(); - - const [shippingInfo, setShippingInfo] = useState({ - fullName: '', + const { cartItems, getTotalPrice, clearCart } = useCart(); + const [formData, setFormData] = useState({ + name: '', + email: '', address: '', city: '', zip: '', - country: '', + cardNumber: '', + cardExpiry: '', + cardCVC: '', }); + const [orderConfirmed, setOrderConfirmed] = useState(false); - const handleInputChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setShippingInfo((prev) => ({ ...prev, [name]: value })); + const handleChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); }; - const handlePlaceOrder = (paymentMethod: string) => { - if (cartItems.length === 0) { - alert('Your cart is empty. Please add items before checking out.'); - router.push('/products'); - return; - } - - if (!shippingInfo.fullName || !shippingInfo.address || !shippingInfo.city || !shippingInfo.zip || !shippingInfo.country) { - alert('Please fill in all shipping information.'); - return; - } - - alert(`Order placed successfully with ${paymentMethod}! Total: $${cartTotal.toFixed(2)}`); - clearCart(); - router.push('/products'); // Redirect to products after checkout + const handleSubmit = (e) => { + e.preventDefault(); + // Simulate order processing + console.log('Order submitted:', formData, 'Items:', cartItems); + setOrderConfirmed(true); + clearCart(); // Clear cart after successful order }; - if (cartItems.length === 0) { + const navItems = [ + { name: 'Products', id: '/products' }, + { name: 'Cart', id: '/cart' }, + { name: 'Checkout', id: '/checkout' }, + ]; + + if (orderConfirmed) { return ( -
-

- - Checkout -

-
-

Your cart is empty. Nothing to checkout.

- - Go to Products - + <> + +
+ +

Order Confirmed!

+

Thank you for your purchase. Your order will be shipped soon.

+ Continue Shopping +
+ -
+ ); } return ( -
-

- - Checkout -

+ <> + +
+

+ Checkout +

-
-
-

- - Shipping Information -

-
+ {cartItems.length === 0 ? ( +

Your cart is empty. Please add items before checking out.

+ ) : ( +
- - -
-
- - -
-
-
- - -
-
- - -
-
-
- - -
- -
+

Shipping Information

+
+ + + +
+ + +
-
-

- - Order Summary -

-
- {cartItems.map((item) => ( -
- {item.name} x {item.quantity} - ${(item.price * item.quantity).toFixed(2)} +

Payment Information

+ +
+ + +
+ + + +
+ +
+

Order Summary

+
+ {cartItems.map((item) => ( +
+ {item.name} (x{item.quantity}) + ${(parseFloat(item.price) * item.quantity).toFixed(2)} +
+ ))} +
+ Total: + ${getTotalPrice().toFixed(2)} +
- ))} -
- Total: - ${cartTotal.toFixed(2)}
-
- - -
-
+ )} +
+ -
+ ); }; export default function CheckoutPage() { return ( - - - - + ); }