cart-01-block-ex

1"use client";
2 
3import Cart_01, {
4  CartCheckoutPayload,
5  CartProduct,
6} from "@/components/commerce-ui/cart-01";
7import { Button } from "@/components/ui/button";
8import { useEffect, useState } from "react";
9 
10export default function CartExample_01() {
11  // Initial products for the demo
12  const initialProducts: CartProduct[] = [
13    {
14      id: "prod-1",
15      imageUrl:
16        "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg",
17      name: "Wireless Headphones",
18      price: 98.96,
19      quantity: 1,
20    },
21    {
22      id: "prod-2",
23      imageUrl:
24        "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/smartwatch-01.jpg",
25      name: "Smart Watch",
26      price: 129.99,
27      quantity: 2,
28    },
29    {
30      id: "prod-3",
31      imageUrl:
32        "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/speaker-01.jpg",
33      name: "Bluetooth Speaker",
34      price: 79.95,
35      quantity: 1,
36    },
37  ];
38 
39  // State management
40  const [products, setProducts] = useState<CartProduct[]>(initialProducts);
41  const [subtotal, setSubtotal] = useState<number>(0);
42  const [shippingCost] = useState<number>(15.99);
43  const [vatRate] = useState<number>(0.2); // 20% VAT rate
44  const [isLoading, setIsLoading] = useState<boolean>(false);
45  const [errorMessage, setErrorMessage] = useState<string>("");
46 
47  // Calculate subtotal whenever the products change
48  useEffect(() => {
49    const newSubtotal = products.reduce(
50      (total, product) => total + product.price * product.quantity,
51      0
52    );
53    setSubtotal(newSubtotal);
54  }, [products]);
55 
56  // Handler to update product quantity
57  const handleUpdateQuantity = (productId: string, newQuantity: number) => {
58    setProducts(
59      products.map((product) =>
60        product.id === productId
61          ? { ...product, quantity: newQuantity }
62          : product
63      )
64    );
65  };
66 
67  // Handler to remove a product
68  const handleRemoveProduct = (productId: string) => {
69    setProducts(products.filter((product) => product.id !== productId));
70  };
71 
72  // Handler for checkout
73  const handleCheckout = (payload: CartCheckoutPayload) => {
74    const itemCount = payload.products.reduce((sum, p) => sum + p.quantity, 0);
75    window.alert(
76      `Proceeding to checkout with ${itemCount} items.\nTotal: ${payload.currencyPrefix}${payload.totalAmount.toFixed(2)}
77      `
78    );
79  };
80 
81  // Handler for continue shopping
82// … truncated