product-variant-04-block

1"use client";
2 
3import ImageViewer from "@/components/commerce-ui/image-viewer-basic";
4import PriceFormat from "@/components/commerce-ui/price-format-basic";
5import QuantityInputBasic from "@/components/commerce-ui/quantity-input-basic";
6import StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
7import VariantSelectorBasic, {
8  VariantItem as BaseVariantItem,
9} from "@/components/commerce-ui/variant-selector-basic";
10import VariantSelectorMultiple from "@/components/commerce-ui/variant-selector-multiple";
11import { Button } from "@/components/ui/button";
12import {
13  Check,
14  ChevronLeft,
15  ChevronRight,
16  MessageSquareText,
17} from "lucide-react";
18import { useState } from "react";
19 
20interface StorageVariant extends BaseVariantItem {
21  price: number;
22  salePrice?: number;
23  isInStock?: boolean;
24  availableQuantity?: number | null;
25}
26 
27interface AccessoryVariant extends BaseVariantItem {
28  price: number;
29  salePrice?: number;
30}
31 
32interface Testimonial {
33  name: string;
34  role?: string;
35  rating: number;
36  text: string;
37  date?: string;
38}
39 
40interface VariantSelectionPayload {
41  storageVariantId: string;
42  storageVariantLabel: string;
43  storagePrice: number;
44  accessoryIds: string[];
45  accessoryLabels: string[];
46  accessoriesPrice: number;
47  quantity: number;
48  totalPrice: number;
49}
50 
51interface ProductVariant04Props {
52  imageUrl?: string;
53  title?: string;
54  description?: string;
55  badge?: string | null;
56  features?: string[];
57  storageVariants: StorageVariant[];
58  accessoryVariants?: AccessoryVariant[];
59  testimonials?: Testimonial[];
60  initialStorage?: string;
61  initialAccessories?: string[];
62  defaultImage?: string;
63  onAddToCart?: (payload: VariantSelectionPayload) => void;
64  onBuyNow?: (payload: VariantSelectionPayload) => void;
65  selectedStorage?: string;
66  onStorageChange?: (storage: string) => void;
67  selectedAccessories?: string[];
68  onAccessoriesChange?: (accessories: string[]) => void;
69  quantity?: number;
70  onQuantityChange?: (quantity: number) => void;
71  isLoading?: boolean;
72  errorMessage?: string | null;
73  currencyPrefix?: string;
74}
75 
76function ProductVariant_04({
77  accessoryVariants = [],
78  badge = "In Stock",
79  currencyPrefix = "$",
80  defaultImage,
81  description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
82  errorMessage = null,
83  features = ["Feature 1", "Feature 2", "Feature 3", "Feature 4"],
84  imageUrl = defaultImage,
85  initialAccessories = [],
86// … truncated