cart-01-block

1"use client";
2 
3import PriceFormat from "@/components/commerce-ui/price-format-basic";
4import QuantityInputBasic from "@/components/commerce-ui/quantity-input-basic";
5import { Button } from "@/components/ui/button";
6import { Loader2, ShoppingCart } from "lucide-react";
7 
8// Default logo placeholder
9const DEFAULT_LOGO =
10  "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/logo-placeholder.png";
11 
12// Product item interface
13interface CartProduct {
14  id: string;
15  name: string;
16  price: number;
17  quantity: number;
18  imageUrl: string;
19}
20 
21// Cart checkout payload interface
22interface CartCheckoutPayload {
23  products: CartProduct[];
24  subtotal: number;
25  shippingCost: number;
26  vatAmount: number;
27  vatRate: number;
28  totalAmount: number;
29  currencyPrefix: string;
30}
31 
32// Cart component props
33interface CartProps {
34  storeName?: string;
35  logoUrl?: string;
36  products?: CartProduct[];
37  subtotal?: number;
38  shippingCost?: number;
39  vatRate?: number;
40  currencyPrefix?: string;
41  isLoading?: boolean;
42  errorMessage?: string;
43  onCheckout?: (payload: CartCheckoutPayload) => void;
44  onContinueShopping?: (payload: CartCheckoutPayload) => void;
45  onUpdateQuantity?: (productId: string, newQuantity: number) => void;
46  onRemoveProduct?: (productId: string) => void;
47}
48 
49// Default products for demo purposes
50const DEFAULT_PRODUCTS: CartProduct[] = [
51  {
52    id: "prod-1",
53    imageUrl:
54      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg",
55    name: "Wireless Headphones",
56    price: 98.96,
57    quantity: 1,
58  },
59  {
60    id: "prod-2",
61    imageUrl:
62      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/watch-1.jpg",
63    name: "Smart Watch",
64    price: 129.99,
65    quantity: 2,
66  },
67];
68 
69function Cart_01({
70  currencyPrefix = "$",
71  errorMessage = "",
72  isLoading = false,
73  logoUrl = DEFAULT_LOGO,
74  onCheckout = () => {},
75  onContinueShopping = () => {},
76  onRemoveProduct = () => {},
77  onUpdateQuantity = () => {},
78  products = DEFAULT_PRODUCTS,
79  shippingCost = 15.99,
80  storeName = "TechGadgets",
81  subtotal = 358.94, // This would typically be calculated from products
82  vatRate = 0.2, // 20% VAT
83}: CartProps = {}) {
84  // Calculate VAT and total
85  const vatAmount = subtotal * vatRate;
86  const totalAmount = subtotal + shippingCost + vatAmount;
87 
88  const isCartEmpty = !products || products.length === 0;
89 
90  // Create the checkout payload
91// … truncated