product-variant-01-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat_Sale from "@/components/commerce-ui/price-format-sale";
5import QuantityInputBasic from "@/components/commerce-ui/quantity-input-basic";
6import VariantSelectorBasic, {
7  VariantItem as BaseVariantItem,
8} from "@/components/commerce-ui/variant-selector-basic";
9import { Button } from "@/components/ui/button";
10import { Clock } from "lucide-react";
11import { useState } from "react";
12 
13interface VariantItem extends BaseVariantItem {
14  price: number;
15  salePrice?: number;
16  imageUrl?: string;
17  isInStock?: boolean;
18  availableQuantity?: number | null;
19}
20interface VariantSelectionPayload {
21  variantId: string;
22  variantLabel: string;
23  quantity: number;
24  price: number;
25  originalPrice?: number;
26  salePrice?: number;
27  totalPrice: number;
28  isOnSale: boolean;
29}
30interface ProductVariant01Props {
31  title?: string;
32  description?: string;
33  badge?: string | null;
34  shippingInfo?: string;
35  variants: VariantItem[];
36  defaultImage?: string;
37  initialVariant?: string;
38  variantLabel?: string;
39  onAddToCart?: (payload: VariantSelectionPayload) => void;
40  onBuyNow?: (payload: VariantSelectionPayload) => void;
41  selectedVariant?: string;
42  onVariantChange?: (variant: string) => void;
43  quantity?: number;
44  onQuantityChange?: (quantity: number) => void;
45  isLoading?: boolean;
46  errorMessage?: string | null;
47}
48 
49function ProductVariant_01({
50  badge = "New",
51  defaultImage,
52  description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
53  errorMessage = null,
54  initialVariant,
55  isLoading = false,
56  onAddToCart = () => {},
57  onBuyNow = () => {},
58  onQuantityChange,
59  onVariantChange,
60  quantity: controlledQuantity,
61  selectedVariant: controlledVariant,
62  shippingInfo,
63  title = "Product Variant Title",
64  variantLabel = "Variant",
65  variants,
66}: ProductVariant01Props) {
67  // Ensure variants array is not empty
68  if (!variants.length) {
69    throw new Error("At least one variant must be provided");
70  }
71 
72  const defaultInitialVariant = initialVariant || variants[0].value;
73 
74  const [internalSelectedVariant, setInternalSelectedVariant] = useState(
75    defaultInitialVariant
76  );
77  const [internalQuantity, setInternalQuantity] = useState(1);
78 
79  // Determine if we're in controlled or uncontrolled mode
80  const isVariantControlled = controlledVariant !== undefined;
81// … truncated