product-variant-03-block

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