product-variant-05-block

1"use client";
2 
3import ImageCarouselBasic, {
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 StarRating_Fractions from "@/components/commerce-ui/star-rating-fractions";
9import VariantSelectorMultiple, {
10  VariantItem as BaseVariantItem,
11} from "@/components/commerce-ui/variant-selector-multiple";
12import { Button } from "@/components/ui/button";
13import { ShieldCheck, Users } from "lucide-react";
14import { useState } from "react";
15 
16interface AccessoryVariant extends BaseVariantItem {
17  price: number;
18  salePrice?: number;
19  isInStock?: boolean;
20  availableQuantity?: number | null;
21}
22 
23interface ServiceVariant extends BaseVariantItem {
24  price: number;
25  salePrice?: number;
26}
27 
28interface Benefit {
29  icon?: React.ReactNode;
30  title: string;
31  description: string;
32}
33 
34interface FeaturedReview {
35  rating: number;
36  reviewDate: string;
37  reviewText: string;
38  avatarUrl: string;
39  reviewerName: string;
40  reviewerTitle: string;
41}
42 
43interface VariantSelectionPayload {
44  productPrice: number;
45  accessoryIds: string[];
46  accessoryLabels: string[];
47  accessoriesPrice: number;
48  serviceIds: string[];
49  serviceLabels: string[];
50  servicesPrice: number;
51  quantity: number;
52  totalPrice: number;
53}
54 
55interface ProductVariant05Props {
56  title?: string;
57  description?: string;
58  price?: number;
59  badge?: string | null;
60  rating?: number;
61  reviewCount?: number;
62  warranty?: string;
63  images?: CarouselImage[];
64  defaultImages?: CarouselImage[];
65  benefits?: Benefit[];
66  accessoryVariants?: AccessoryVariant[];
67  serviceVariants?: ServiceVariant[];
68  initialAccessories?: string[];
69  initialServices?: string[];
70  selectedAccessories?: string[];
71  onAccessoriesChange?: (accessories: string[]) => void;
72  selectedServices?: string[];
73  onServicesChange?: (services: string[]) => void;
74  quantity?: number;
75  onQuantityChange?: (quantity: number) => void;
76  onAddToCart?: (payload: VariantSelectionPayload) => void;
77  onBuyNow?: (payload: VariantSelectionPayload) => void;
78  isLoading?: boolean;
79  errorMessage?: string | null;
80  currencyPrefix?: string;
81  featuredReview?: FeaturedReview;
82}
83 
84// Default accessory options
85const DEFAULT_ACCESSORY_VARIANTS: AccessoryVariant[] = [
86  {
87    id: "acc-1",
88    isInStock: true,
89    label: "Accessory 1",
90    price: 10.99,
91    value: "acc-1",
92  },
93  {
94    id: "acc-2",
95// … truncated