Implement checkout process

Implement the checkout process to complete a purchase without payment.

Author: lovable-dev[bot]

package-lock.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
+    "@hookform/resolvers": "^4.1.3",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

package.json

@@ -8,6 +8,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Index from "./pages/Index";
 import Products from "./pages/Products";
 import ProductDetail from "./pages/ProductDetail";
+import Checkout from "./pages/Checkout";
 import NotFound from "./pages/NotFound";
 import { CartProvider } from "@/context/CartContext";
 
@@ -27,6 +28,7 @@ const App = () => (
             <Route path="/" element={<Index />} />
             <Route path="/products" element={<Products />} />
             <Route path="/products/:id" element={<ProductDetail />} />
+            <Route path="/checkout" element={<Checkout />} />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>

src/App.tsx

@@ -0,0 +1,75 @@
+
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Product } from "@/lib/products";
+
+interface OrderSummaryProps {
+  items: Array<{
+    product: Product;
+    quantity: number;
+  }>;
+  totalPrice: number;
+}
+
+const OrderSummary = ({ items, totalPrice }: OrderSummaryProps) => {
+  const shippingCost = 0; // Free shipping
+  const taxRate = 0.08; // 8% tax
+  const taxAmount = totalPrice * taxRate;
+  const orderTotal = totalPrice + taxAmount + shippingCost;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-xl">Order Summary</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {/* Items */}
+          <div className="space-y-2">
+            {items.map((item) => (
+              <div key={item.product.id} className="flex justify-between text-sm">
+                <span>
+                  {item.product.name} x {item.quantity}
+                </span>
+                <span className="font-medium">
+                  ${(item.product.price * item.quantity).toFixed(2)}
+                </span>
+              </div>
+            ))}
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-gray-200 my-4"></div>
+
+          {/* Subtotal */}
+          <div className="flex justify-between">
+            <span>Subtotal</span>
+            <span className="font-medium">${totalPrice.toFixed(2)}</span>
+          </div>
+
+          {/* Tax */}
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>Tax (8%)</span>
+            <span>${taxAmount.toFixed(2)}</span>
+          </div>
+
+          {/* Shipping */}
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>Shipping</span>
+            <span>{shippingCost === 0 ? "Free" : `$${shippingCost.toFixed(2)}`}</span>
+          </div>
+
+          {/* Divider */}
+          <div className="border-t border-gray-200 my-4"></div>
+
+          {/* Total */}
+          <div className="flex justify-between font-medium text-lg">
+            <span>Total</span>
+            <span>${orderTotal.toFixed(2)}</span>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OrderSummary;

src/components/checkout/OrderSummary.tsx

@@ -1,5 +1,6 @@
 
 import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
 import { X, ShoppingBag, ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import CartItem from "@/components/ui/CartItem";
@@ -14,6 +15,7 @@ const Cart = () => {
     totalPrice,
     clearCart
   } = useCart();
+  const navigate = useNavigate();
 
   // Prevent body scrolling when cart is open
   useEffect(() => {
@@ -28,6 +30,11 @@ const Cart = () => {
     };
   }, [isCartOpen]);
 
+  const handleCheckout = () => {
+    toggleCart(); // Close the cart
+    navigate("/checkout"); // Navigate to checkout page
+  };
+
   return (
     <>
       {/* Cart Sidebar */}
@@ -92,7 +99,7 @@ const Cart = () => {
               <p className="text-gray-500 text-sm mb-4">
                 Shipping and taxes calculated at checkout
               </p>
-              <Button className="w-full mb-2">
+              <Button className="w-full mb-2" onClick={handleCheckout}>
                 Checkout
                 <ArrowRight className="ml-2 h-4 w-4" />
               </Button>