product-variant-02-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 { Separator } from "@/components/ui/separator";
11import { Clock } from "lucide-react";
12import Link from "next/link";
13import { useState } from "react";
14 
15interface VariantItem extends BaseVariantItem {
16  price: number;
17  salePrice?: number;
18  imageUrl?: string;
19  isInStock?: boolean; // Added stock status per variant
20  availableQuantity?: number | null; // Added quantity per variant
21}
22 
23interface VariantSelectionPayload {
24  variantId: string;
25  variantLabel: string;
26  quantity: number;
27  price: number;
28  originalPrice?: number;
29  salePrice?: number;
30  totalPrice: number;
31  isOnSale: boolean;
32}
33 
34interface ProductVariant02Props {
35  title?: string;
36  description?: string;
37  badge?: string | null;
38  shippingInfo?: string;
39  variants: VariantItem[];
40  defaultImage?: string;
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  sellerName?: string;
52  marketplaceName?: string;
53  returnPolicyUrl?: string;
54}
55 
56function ProductVariant_02({
57  badge = "New",
58  defaultImage,
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  marketplaceName = "Lorem Marketplace",
64  onAddToCart = () => {},
65  onBuyNow = () => {},
66  onQuantityChange,
67  onVariantChange,
68  quantity: controlledQuantity,
69  returnPolicyUrl = "/",
70  selectedVariant: controlledVariant,
71  sellerName = "Seller Name",
72  shippingInfo = "Free shipping",
73  title = "Product Variant Title",
74  variantLabel = "Variant",
75  variants = [],
76}: ProductVariant02Props) {
77  // Ensure variants array is not empty
78  if (!variants.length) {
79    throw new Error("At least one variant must be provided");
80  }
81 
82// … truncated