product-variant-01-block-ex

1"use client";
2 
3// Example usage of ProductVariant_01 component
4 
5import { useState } from "react";
6import ProductVariant_01, {
7  VariantItem,
8  VariantSelectionPayload,
9} from "@/components/commerce-ui/product-variants-01";
10 
11const EXAMPLE_VARIANTS: VariantItem[] = [
12  {
13    availableQuantity: 5,
14    id: "variant-sport",
15    imageUrl:
16      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-1.jpg",
17    isInStock: true,
18    label: "Sport",
19    price: 109.99,
20    value: "variant-sport",
21  },
22  {
23    availableQuantity: 10,
24    id: "variant-prosound",
25    imageUrl:
26      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-2.jpg",
27    isInStock: true,
28    label: "ProSound",
29    price: 99.99,
30    salePrice: 89.99,
31    value: "variant-prosound",
32  },
33  {
34    availableQuantity: 0,
35    id: "variant-ultraquiet",
36    imageUrl:
37      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-3.jpg",
38    isInStock: false,
39    label: "UltraQuiet™",
40    price: 89.99,
41    value: "variant-ultraquiet",
42  },
43  {
44    availableQuantity: 2,
45    id: "variant-extremesilence",
46    imageUrl:
47      "https://raw.githubusercontent.com/stackzero-labs/ui/refs/heads/main/public/placeholders/headphone-4.jpg",
48    isInStock: true,
49    label: "ExtremeSilence™",
50    price: 119.99,
51    salePrice: 99.99,
52    value: "variant-extremesilence",
53  },
54];
55 
56export default function ProductVariantExample() {
57  const [selectedVariant, setSelectedVariant] = useState<string>(
58    EXAMPLE_VARIANTS[0].value
59  );
60  const [quantity, setQuantity] = useState<number>(1);
61 
62  // Adjust quantity if it exceeds available stock when variant changes
63  const handleVariantChange = (value: string) => {
64    setSelectedVariant(value);
65    const newVariant = EXAMPLE_VARIANTS.find((v) => v.value === value);
66    if (
67      newVariant &&
68      newVariant.isInStock &&
69      newVariant.availableQuantity !== undefined &&
70      newVariant.availableQuantity !== null &&
71      quantity > newVariant.availableQuantity
72    ) {
73      setQuantity(Math.max(1, newVariant.availableQuantity));
74    }
75  };
76 
77  const handleAddToCart = (payload: VariantSelectionPayload) => {
78    const variant = EXAMPLE_VARIANTS.find((v) => v.value === payload.variantId);
79    const stockStatus = variant?.isInStock ? "In Stock" : "Out of Stock";
80    window.alert(
81// … truncated