@cimplify/sdk 0.71.0 → 0.72.0

package/dist/testing.d.mts

@@ -54,8 +54,8 @@ declare const CountryCodeSchema: z.ZodString;
 declare const LocaleSchema: z.ZodString;
 declare const PhoneE164Schema: z.ZodString;
 declare const SeedNameSchema: z.ZodEnum<{
-    empty: "empty";
     default: "default";
+    empty: "empty";
     "reesa-storefront": "reesa-storefront";
     restaurant: "restaurant";
     retail: "retail";
@@ -71,11 +71,11 @@ declare const ProductTypeSchema: z.ZodEnum<{
     composite: "composite";
 }>;
 declare const LineTypeSchema: z.ZodEnum<{
-    simple: "simple";
     service: "service";
     digital: "digital";
     bundle: "bundle";
     composite: "composite";
+    simple: "simple";
 }>;
 declare const ServiceStatusSchema: z.ZodEnum<{
     pending: "pending";
@@ -365,8 +365,8 @@ declare const BrandSchema: z.ZodObject<{
     }, z.core.$strip>;
     mock: z.ZodObject<{
         seed: z.ZodEnum<{
-            empty: "empty";
             default: "default";
+            empty: "empty";
             "reesa-storefront": "reesa-storefront";
             restaurant: "restaurant";
             retail: "retail";
@@ -531,7 +531,7 @@ declare const assertBrand: (value: unknown) => asserts value is {
         summary: string;
     };
     mock: {
-        seed: "empty" | "default" | "reesa-storefront" | "restaurant" | "retail" | "services" | "grocery" | "fashion";
+        seed: "default" | "empty" | "reesa-storefront" | "restaurant" | "retail" | "services" | "grocery" | "fashion";
         businessId: string;
     };
     trustItems?: {
@@ -780,11 +780,11 @@ declare const CartItemSchema: z.ZodObject<{
     quantity: z.ZodNumber;
     line_key: z.ZodString;
     line_type: z.ZodEnum<{
-        simple: "simple";
         service: "service";
         digital: "digital";
         bundle: "bundle";
         composite: "composite";
+        simple: "simple";
     }>;
     name: z.ZodString;
     description: z.ZodOptional<z.ZodString>;
@@ -926,7 +926,7 @@ declare const assertCartItem: (value: unknown) => asserts value is {
     item_id: string;
     quantity: number;
     line_key: string;
-    line_type: "simple" | "service" | "digital" | "bundle" | "composite";
+    line_type: "service" | "digital" | "bundle" | "composite" | "simple";
     name: string;
     is_available: boolean;
     base_price: string;
@@ -1076,11 +1076,11 @@ declare const CartSchema: z.ZodObject<{
         quantity: z.ZodNumber;
         line_key: z.ZodString;
         line_type: z.ZodEnum<{
-            simple: "simple";
             service: "service";
             digital: "digital";
             bundle: "bundle";
             composite: "composite";
+            simple: "simple";
         }>;
         name: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
@@ -1249,7 +1249,7 @@ declare const assertCart: (value: unknown) => asserts value is {
         item_id: string;
         quantity: number;
         line_key: string;
-        line_type: "simple" | "service" | "digital" | "bundle" | "composite";
+        line_type: "service" | "digital" | "bundle" | "composite" | "simple";
         name: string;
         is_available: boolean;
         base_price: string;
@@ -1462,10 +1462,10 @@ declare const assertCheckoutBody: (value: unknown) => asserts value is {
 };
 declare const AuthorizationTypeSchema: z.ZodEnum<{
     phone: "phone";
+    address: "address";
     otp: "otp";
     pin: "pin";
     birthday: "birthday";
-    address: "address";
 }>;
 declare const NextActionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"none">;
@@ -1485,10 +1485,10 @@ declare const CheckoutResponseSchema: z.ZodObject<{
     requires_authorization: z.ZodBoolean;
     authorization_type: z.ZodOptional<z.ZodEnum<{
         phone: "phone";
+        address: "address";
         otp: "otp";
         pin: "pin";
         birthday: "birthday";
-        address: "address";
     }>>;
     next_action: z.ZodDiscriminatedUnion<[z.ZodObject<{
         type: z.ZodLiteral<"none">;
@@ -1525,7 +1525,7 @@ declare const assertCheckoutResponse: (value: unknown) => asserts value is {
         display_text?: string | undefined;
     };
     payment_reference?: string | undefined;
-    authorization_type?: "phone" | "otp" | "pin" | "birthday" | "address" | undefined;
+    authorization_type?: "phone" | "address" | "otp" | "pin" | "birthday" | undefined;
     provider?: string | undefined;
     authorization_url?: string | undefined;
     display_text?: string | undefined;
@@ -1724,8 +1724,8 @@ declare const PUBLIC_SCHEMAS: {
         }, z.core.$strip>;
         mock: z.ZodObject<{
             seed: z.ZodEnum<{
-                empty: "empty";
                 default: "default";
+                empty: "empty";
                 "reesa-storefront": "reesa-storefront";
                 restaurant: "restaurant";
                 retail: "retail";
@@ -1785,11 +1785,11 @@ declare const PUBLIC_SCHEMAS: {
             quantity: z.ZodNumber;
             line_key: z.ZodString;
             line_type: z.ZodEnum<{
-                simple: "simple";
                 service: "service";
                 digital: "digital";
                 bundle: "bundle";
                 composite: "composite";
+                simple: "simple";
             }>;
             name: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
@@ -1953,11 +1953,11 @@ declare const PUBLIC_SCHEMAS: {
         quantity: z.ZodNumber;
         line_key: z.ZodString;
         line_type: z.ZodEnum<{
-            simple: "simple";
             service: "service";
             digital: "digital";
             bundle: "bundle";
             composite: "composite";
+            simple: "simple";
         }>;
         name: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
@@ -2131,10 +2131,10 @@ declare const PUBLIC_SCHEMAS: {
         requires_authorization: z.ZodBoolean;
         authorization_type: z.ZodOptional<z.ZodEnum<{
             phone: "phone";
+            address: "address";
             otp: "otp";
             pin: "pin";
             birthday: "birthday";
-            address: "address";
         }>>;
         next_action: z.ZodDiscriminatedUnion<[z.ZodObject<{
             type: z.ZodLiteral<"none">;

package/dist/testing.d.ts

@@ -54,8 +54,8 @@ declare const CountryCodeSchema: z.ZodString;
 declare const LocaleSchema: z.ZodString;
 declare const PhoneE164Schema: z.ZodString;
 declare const SeedNameSchema: z.ZodEnum<{
-    empty: "empty";
     default: "default";
+    empty: "empty";
     "reesa-storefront": "reesa-storefront";
     restaurant: "restaurant";
     retail: "retail";
@@ -71,11 +71,11 @@ declare const ProductTypeSchema: z.ZodEnum<{
     composite: "composite";
 }>;
 declare const LineTypeSchema: z.ZodEnum<{
-    simple: "simple";
     service: "service";
     digital: "digital";
     bundle: "bundle";
     composite: "composite";
+    simple: "simple";
 }>;
 declare const ServiceStatusSchema: z.ZodEnum<{
     pending: "pending";
@@ -365,8 +365,8 @@ declare const BrandSchema: z.ZodObject<{
     }, z.core.$strip>;
     mock: z.ZodObject<{
         seed: z.ZodEnum<{
-            empty: "empty";
             default: "default";
+            empty: "empty";
             "reesa-storefront": "reesa-storefront";
             restaurant: "restaurant";
             retail: "retail";
@@ -531,7 +531,7 @@ declare const assertBrand: (value: unknown) => asserts value is {
         summary: string;
     };
     mock: {
-        seed: "empty" | "default" | "reesa-storefront" | "restaurant" | "retail" | "services" | "grocery" | "fashion";
+        seed: "default" | "empty" | "reesa-storefront" | "restaurant" | "retail" | "services" | "grocery" | "fashion";
         businessId: string;
     };
     trustItems?: {
@@ -780,11 +780,11 @@ declare const CartItemSchema: z.ZodObject<{
     quantity: z.ZodNumber;
     line_key: z.ZodString;
     line_type: z.ZodEnum<{
-        simple: "simple";
         service: "service";
         digital: "digital";
         bundle: "bundle";
         composite: "composite";
+        simple: "simple";
     }>;
     name: z.ZodString;
     description: z.ZodOptional<z.ZodString>;
@@ -926,7 +926,7 @@ declare const assertCartItem: (value: unknown) => asserts value is {
     item_id: string;
     quantity: number;
     line_key: string;
-    line_type: "simple" | "service" | "digital" | "bundle" | "composite";
+    line_type: "service" | "digital" | "bundle" | "composite" | "simple";
     name: string;
     is_available: boolean;
     base_price: string;
@@ -1076,11 +1076,11 @@ declare const CartSchema: z.ZodObject<{
         quantity: z.ZodNumber;
         line_key: z.ZodString;
         line_type: z.ZodEnum<{
-            simple: "simple";
             service: "service";
             digital: "digital";
             bundle: "bundle";
             composite: "composite";
+            simple: "simple";
         }>;
         name: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
@@ -1249,7 +1249,7 @@ declare const assertCart: (value: unknown) => asserts value is {
         item_id: string;
         quantity: number;
         line_key: string;
-        line_type: "simple" | "service" | "digital" | "bundle" | "composite";
+        line_type: "service" | "digital" | "bundle" | "composite" | "simple";
         name: string;
         is_available: boolean;
         base_price: string;
@@ -1462,10 +1462,10 @@ declare const assertCheckoutBody: (value: unknown) => asserts value is {
 };
 declare const AuthorizationTypeSchema: z.ZodEnum<{
     phone: "phone";
+    address: "address";
     otp: "otp";
     pin: "pin";
     birthday: "birthday";
-    address: "address";
 }>;
 declare const NextActionSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
     type: z.ZodLiteral<"none">;
@@ -1485,10 +1485,10 @@ declare const CheckoutResponseSchema: z.ZodObject<{
     requires_authorization: z.ZodBoolean;
     authorization_type: z.ZodOptional<z.ZodEnum<{
         phone: "phone";
+        address: "address";
         otp: "otp";
         pin: "pin";
         birthday: "birthday";
-        address: "address";
     }>>;
     next_action: z.ZodDiscriminatedUnion<[z.ZodObject<{
         type: z.ZodLiteral<"none">;
@@ -1525,7 +1525,7 @@ declare const assertCheckoutResponse: (value: unknown) => asserts value is {
         display_text?: string | undefined;
     };
     payment_reference?: string | undefined;
-    authorization_type?: "phone" | "otp" | "pin" | "birthday" | "address" | undefined;
+    authorization_type?: "phone" | "address" | "otp" | "pin" | "birthday" | undefined;
     provider?: string | undefined;
     authorization_url?: string | undefined;
     display_text?: string | undefined;
@@ -1724,8 +1724,8 @@ declare const PUBLIC_SCHEMAS: {
         }, z.core.$strip>;
         mock: z.ZodObject<{
             seed: z.ZodEnum<{
-                empty: "empty";
                 default: "default";
+                empty: "empty";
                 "reesa-storefront": "reesa-storefront";
                 restaurant: "restaurant";
                 retail: "retail";
@@ -1785,11 +1785,11 @@ declare const PUBLIC_SCHEMAS: {
             quantity: z.ZodNumber;
             line_key: z.ZodString;
             line_type: z.ZodEnum<{
-                simple: "simple";
                 service: "service";
                 digital: "digital";
                 bundle: "bundle";
                 composite: "composite";
+                simple: "simple";
             }>;
             name: z.ZodString;
             description: z.ZodOptional<z.ZodString>;
@@ -1953,11 +1953,11 @@ declare const PUBLIC_SCHEMAS: {
         quantity: z.ZodNumber;
         line_key: z.ZodString;
         line_type: z.ZodEnum<{
-            simple: "simple";
             service: "service";
             digital: "digital";
             bundle: "bundle";
             composite: "composite";
+            simple: "simple";
         }>;
         name: z.ZodString;
         description: z.ZodOptional<z.ZodString>;
@@ -2131,10 +2131,10 @@ declare const PUBLIC_SCHEMAS: {
         requires_authorization: z.ZodBoolean;
         authorization_type: z.ZodOptional<z.ZodEnum<{
             phone: "phone";
+            address: "address";
             otp: "otp";
             pin: "pin";
             birthday: "birthday";
-            address: "address";
         }>>;
         next_action: z.ZodDiscriminatedUnion<[z.ZodObject<{
             type: z.ZodLiteral<"none">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.71.0",
+  "version": "0.72.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",

package/registry/accommodation-card.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "cards/accommodation-card.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function AccommodationCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per night\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} />/night\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Amenity / tag pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Guest capacity */}\n        {product.general_service_capacity != null && (\n          <div className=\"flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0\" />\n            </svg>\n            {product.general_service_capacity} guest{product.general_service_capacity > 1 ? \"s\" : \"\"}\n          </div>\n        )}\n\n        {/* Extended stay pricing */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {cancellationHours != null && (\n              <span className=\"text-emerald-600 font-medium\">\n                Free cancellation {cancellationHours}h\n              </span>\n            )}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <span>Min. {product.min_order_quantity} nights</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book room &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport { stripHtmlToText } from \"@cimplify/sdk/react\";\nimport type { ServiceCardLayoutProps } from \"./standard-service-card\";\nimport { CardShell, CardImage } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { VolumePricing } from \"@cimplify/sdk/react\";\nimport { getProductCurrency } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport function AccommodationCard({\n  product,\n  onBook,\n  renderImage,\n  renderLink,\n  className,\n}: ServiceCardLayoutProps): React.ReactElement {\n  const image = product.image_url || product.images?.[0] || \"\";\n  const currency = getProductCurrency(product);\n  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;\n  const cancellationHours = product.cancellation_window_minutes\n    ? Math.floor(product.cancellation_window_minutes / 60)\n    : null;\n  const tags = product.tags || [];\n\n  return (\n    <CardShell product={product} renderLink={renderLink} className={className}>\n      <CardImage src={image} alt={product.name} aspectRatio=\"16/9\" renderImage={renderImage}>\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none\" />\n\n        <span className=\"absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm\">\n          Per night\n        </span>\n\n        <span className=\"absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm\">\n          <Price amount={product.default_price} currency={currency} />/night\n        </span>\n      </CardImage>\n\n      <div className=\"p-4\">\n        <h3 className=\"text-[14.5px] font-bold text-foreground leading-snug tracking-tight\">\n          {product.name}\n        </h3>\n        {product.description && (\n          <p className=\"text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2\">\n            {stripHtmlToText(product.description)}\n          </p>\n        )}\n\n        {/* Amenity / tag pills */}\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1 mt-2.5\">\n            {tags.slice(0, 4).map((tag) => (\n              <span key={tag} className=\"text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded\">\n                {tag}\n              </span>\n            ))}\n          </div>\n        )}\n\n        {/* Guest capacity */}\n        {product.general_service_capacity != null && (\n          <div className=\"flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground\">\n            <svg className=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0\" />\n            </svg>\n            {product.general_service_capacity} guest{product.general_service_capacity > 1 ? \"s\" : \"\"}\n          </div>\n        )}\n\n        {/* Extended stay pricing */}\n        {hasTiers && (\n          <div className=\"mt-3\">\n            <VolumePricing tiers={product.quantity_pricing!} />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between mt-3 pt-3 border-t border-border\">\n          <div className=\"flex items-center gap-2 text-[11px] text-muted-foreground\">\n            {cancellationHours != null && (\n              <span className=\"text-emerald-600 font-medium\">\n                Free cancellation {cancellationHours}h\n              </span>\n            )}\n            {product.min_order_quantity != null && product.min_order_quantity > 1 && (\n              <span>Min. {product.min_order_quantity} nights</span>\n            )}\n          </div>\n          <button\n            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onBook?.(product); }}\n            className=\"text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors\"\n          >\n            Book room &rarr;\n          </button>\n        </div>\n      </div>\n    </CardShell>\n  );\n}\n"
     }
   ]
 }

package/registry/add-on-selector.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "add-on-selector.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Checkbox } from \"@base-ui/react/checkbox\";\nimport type { AddOnWithOptions } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AddOnSelectorClassNames {\n  root?: string;\n  group?: string;\n  header?: string;\n  name?: string;\n  required?: string;\n  constraint?: string;\n  validation?: string;\n  options?: string;\n  option?: string;\n  optionSelected?: string;\n  optionName?: string;\n  optionDescription?: string;\n}\n\nexport interface AddOnSelectorProps {\n  addOns: AddOnWithOptions[];\n  selectedOptions: string[];\n  onOptionsChange: (optionIds: string[]) => void;\n  className?: string;\n  classNames?: AddOnSelectorClassNames;\n}\n\nexport function AddOnSelector({\n  addOns,\n  selectedOptions,\n  onOptionsChange,\n  className,\n  classNames,\n}: AddOnSelectorProps): React.ReactElement | null {\n  const selectedSet = useMemo(() => new Set(selectedOptions), [selectedOptions]);\n\n  const isOptionSelected = useCallback(\n    (optionId: string) => selectedSet.has(optionId),\n    [selectedSet],\n  );\n\n  const handleCheckedChange = useCallback(\n    (addOn: AddOnWithOptions, optionId: string, checked: boolean) => {\n      const isSelected = selectedSet.has(optionId);\n\n      if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {\n        const groupOptionIds = new Set(addOn.options.map((o) => o.id));\n        const withoutGroup = selectedOptions.filter((id) => !groupOptionIds.has(id));\n\n        if (isSelected) {\n          if (!addOn.is_required) {\n            onOptionsChange(withoutGroup);\n          }\n        } else {\n          onOptionsChange([...withoutGroup, optionId]);\n        }\n      } else {\n        if (isSelected) {\n          onOptionsChange(selectedOptions.filter((id) => id !== optionId));\n        } else {\n          let currentCount = 0;\n          for (const option of addOn.options) {\n            if (selectedSet.has(option.id)) {\n              currentCount += 1;\n            }\n          }\n\n          if (addOn.max_selections && currentCount >= addOn.max_selections) {\n            return;\n          }\n\n          onOptionsChange([...selectedOptions, optionId]);\n        }\n      }\n    },\n    [selectedOptions, selectedSet, onOptionsChange],\n  );\n\n  if (!addOns || addOns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-addon-selector className={cn(\"space-y-6\", className, classNames?.root)}>\n      {addOns.map((addOn) => {\n        let currentSelections = 0;\n        for (const option of addOn.options) {\n          if (selectedSet.has(option.id)) {\n            currentSelections += 1;\n          }\n        }\n        const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;\n        const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;\n\n        return (\n          <div\n            key={addOn.id}\n            data-cimplify-addon-group\n            className={cn(classNames?.group)}\n          >\n            <div\n              data-cimplify-addon-header\n              className={cn(\"flex items-center justify-between py-3\", classNames?.header)}\n            >\n              <div>\n                <span\n                  data-cimplify-addon-name\n                  className={cn(\"text-base font-bold\", classNames?.name)}\n                >\n                  {addOn.name}\n                </span>\n                {(addOn.min_selections || addOn.max_selections) && (\n                  <span\n                    data-cimplify-addon-constraint\n                    className={cn(\"block text-xs text-muted-foreground mt-0.5\", classNames?.constraint)}\n                  >\n                    {addOn.min_selections && addOn.max_selections\n                      ? `Choose ${addOn.min_selections}\\u2013${addOn.max_selections}`\n                      : addOn.min_selections\n                        ? `Choose at least ${addOn.min_selections}`\n                        : `Choose up to ${addOn.max_selections}`}\n                  </span>\n                )}\n              </div>\n              {(addOn.is_required || !minMet) && (\n                <span\n                  data-cimplify-addon-required\n                  className={cn(\n                    \"text-xs font-semibold px-2.5 py-1 rounded\",\n                    !minMet\n                      ? \"text-destructive bg-destructive/10\"\n                      : \"text-destructive bg-destructive/10\",\n                    classNames?.required,\n                  )}\n                >\n                  Required\n                </span>\n              )}\n            </div>\n\n            <div\n              data-cimplify-addon-options\n              className={cn(\"divide-y divide-border\", classNames?.options)}\n            >\n              {addOn.options.map((option) => {\n                const isSelected = isOptionSelected(option.id);\n\n                return (\n                  <Checkbox.Root\n                    key={option.id}\n                    checked={isSelected}\n                    onCheckedChange={(checked) =>\n                      handleCheckedChange(addOn, option.id, checked)\n                    }\n                    value={option.id}\n                    data-cimplify-addon-option\n                    data-selected={isSelected || undefined}\n                    className={cn(\n                      \"w-full flex items-center gap-3 py-4 transition-colors text-left cursor-pointer\",\n                      isSelected ? classNames?.optionSelected : classNames?.option,\n                    )}\n                  >\n                    <Checkbox.Indicator\n                      className=\"hidden\"\n                      keepMounted={false}\n                    />\n\n                    {/* Visual indicator: radio circle for single-select, checkbox square for multi-select */}\n                    {isSingleSelect ? (\n                      <span\n                        data-cimplify-addon-radio\n                        className={cn(\n                          \"w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors\",\n                          isSelected ? \"border-primary\" : \"border-muted-foreground/30\",\n                        )}\n                      >\n                        {isSelected && <span className=\"w-2.5 h-2.5 rounded-full bg-primary\" />}\n                      </span>\n                    ) : (\n                      <span\n                        data-cimplify-addon-checkbox\n                        className={cn(\n                          \"w-5 h-5 rounded-sm border-2 flex items-center justify-center shrink-0 transition-colors\",\n                          isSelected ? \"border-primary bg-primary\" : \"border-muted-foreground/30\",\n                        )}\n                      >\n                        {isSelected && (\n                          <svg viewBox=\"0 0 12 12\" className=\"w-3 h-3 text-primary-foreground\" fill=\"none\">\n                            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    )}\n\n                    <span\n                      data-cimplify-addon-option-name\n                      className={cn(\n                        \"flex-1 min-w-0 text-sm\",\n                        classNames?.optionName,\n                      )}\n                    >\n                      {option.name}\n                    </span>\n\n                    {option.default_price != null && (\n                      <span className=\"text-sm text-muted-foreground\">\n                        +<Price amount={option.default_price} />\n                      </span>\n                    )}\n                  </Checkbox.Root>\n                );\n              })}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { Checkbox } from \"@base-ui/react/checkbox\";\nimport type { AddOnWithOptions } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface AddOnSelectorClassNames {\n  root?: string;\n  group?: string;\n  header?: string;\n  name?: string;\n  required?: string;\n  constraint?: string;\n  validation?: string;\n  options?: string;\n  option?: string;\n  optionSelected?: string;\n  optionName?: string;\n  optionDescription?: string;\n}\n\nexport interface AddOnSelectorProps {\n  addOns: AddOnWithOptions[];\n  selectedOptions: string[];\n  onOptionsChange: (optionIds: string[]) => void;\n  currency?: CurrencyCode;\n  className?: string;\n  classNames?: AddOnSelectorClassNames;\n}\n\nexport function AddOnSelector({\n  addOns,\n  selectedOptions,\n  onOptionsChange,\n  currency,\n  className,\n  classNames,\n}: AddOnSelectorProps): React.ReactElement | null {\n  const selectedSet = useMemo(() => new Set(selectedOptions), [selectedOptions]);\n\n  const isOptionSelected = useCallback(\n    (optionId: string) => selectedSet.has(optionId),\n    [selectedSet],\n  );\n\n  const handleCheckedChange = useCallback(\n    (addOn: AddOnWithOptions, optionId: string, checked: boolean) => {\n      const isSelected = selectedSet.has(optionId);\n\n      if (addOn.is_mutually_exclusive || !addOn.is_multiple_allowed) {\n        const groupOptionIds = new Set(addOn.options.map((o) => o.id));\n        const withoutGroup = selectedOptions.filter((id) => !groupOptionIds.has(id));\n\n        if (isSelected) {\n          if (!addOn.is_required) {\n            onOptionsChange(withoutGroup);\n          }\n        } else {\n          onOptionsChange([...withoutGroup, optionId]);\n        }\n      } else {\n        if (isSelected) {\n          onOptionsChange(selectedOptions.filter((id) => id !== optionId));\n        } else {\n          let currentCount = 0;\n          for (const option of addOn.options) {\n            if (selectedSet.has(option.id)) {\n              currentCount += 1;\n            }\n          }\n\n          if (addOn.max_selections && currentCount >= addOn.max_selections) {\n            return;\n          }\n\n          onOptionsChange([...selectedOptions, optionId]);\n        }\n      }\n    },\n    [selectedOptions, selectedSet, onOptionsChange],\n  );\n\n  if (!addOns || addOns.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-addon-selector className={cn(\"space-y-6\", className, classNames?.root)}>\n      {addOns.map((addOn) => {\n        let currentSelections = 0;\n        for (const option of addOn.options) {\n          if (selectedSet.has(option.id)) {\n            currentSelections += 1;\n          }\n        }\n        const minMet = !addOn.min_selections || currentSelections >= addOn.min_selections;\n        const isSingleSelect = addOn.is_mutually_exclusive || !addOn.is_multiple_allowed;\n\n        return (\n          <div\n            key={addOn.id}\n            data-cimplify-addon-group\n            className={cn(classNames?.group)}\n          >\n            <div\n              data-cimplify-addon-header\n              className={cn(\"flex items-center justify-between py-3\", classNames?.header)}\n            >\n              <div>\n                <span\n                  data-cimplify-addon-name\n                  className={cn(\"text-base font-bold\", classNames?.name)}\n                >\n                  {addOn.name}\n                </span>\n                {(addOn.min_selections || addOn.max_selections) && (\n                  <span\n                    data-cimplify-addon-constraint\n                    className={cn(\"block text-xs text-muted-foreground mt-0.5\", classNames?.constraint)}\n                  >\n                    {addOn.min_selections && addOn.max_selections\n                      ? `Choose ${addOn.min_selections}\\u2013${addOn.max_selections}`\n                      : addOn.min_selections\n                        ? `Choose at least ${addOn.min_selections}`\n                        : `Choose up to ${addOn.max_selections}`}\n                  </span>\n                )}\n              </div>\n              {(addOn.is_required || !minMet) && (\n                <span\n                  data-cimplify-addon-required\n                  className={cn(\n                    \"text-xs font-semibold px-2.5 py-1 rounded\",\n                    !minMet\n                      ? \"text-destructive bg-destructive/10\"\n                      : \"text-destructive bg-destructive/10\",\n                    classNames?.required,\n                  )}\n                >\n                  Required\n                </span>\n              )}\n            </div>\n\n            <div\n              data-cimplify-addon-options\n              className={cn(\"divide-y divide-border\", classNames?.options)}\n            >\n              {addOn.options.map((option) => {\n                const isSelected = isOptionSelected(option.id);\n\n                return (\n                  <Checkbox.Root\n                    key={option.id}\n                    checked={isSelected}\n                    onCheckedChange={(checked) =>\n                      handleCheckedChange(addOn, option.id, checked)\n                    }\n                    value={option.id}\n                    data-cimplify-addon-option\n                    data-selected={isSelected || undefined}\n                    className={cn(\n                      \"w-full flex items-center gap-3 py-4 transition-colors text-left cursor-pointer\",\n                      isSelected ? classNames?.optionSelected : classNames?.option,\n                    )}\n                  >\n                    <Checkbox.Indicator\n                      className=\"hidden\"\n                      keepMounted={false}\n                    />\n\n                    {/* Visual indicator: radio circle for single-select, checkbox square for multi-select */}\n                    {isSingleSelect ? (\n                      <span\n                        data-cimplify-addon-radio\n                        className={cn(\n                          \"w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors\",\n                          isSelected ? \"border-primary\" : \"border-muted-foreground/30\",\n                        )}\n                      >\n                        {isSelected && <span className=\"w-2.5 h-2.5 rounded-full bg-primary\" />}\n                      </span>\n                    ) : (\n                      <span\n                        data-cimplify-addon-checkbox\n                        className={cn(\n                          \"w-5 h-5 rounded-sm border-2 flex items-center justify-center shrink-0 transition-colors\",\n                          isSelected ? \"border-primary bg-primary\" : \"border-muted-foreground/30\",\n                        )}\n                      >\n                        {isSelected && (\n                          <svg viewBox=\"0 0 12 12\" className=\"w-3 h-3 text-primary-foreground\" fill=\"none\">\n                            <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                          </svg>\n                        )}\n                      </span>\n                    )}\n\n                    <span\n                      data-cimplify-addon-option-name\n                      className={cn(\n                        \"flex-1 min-w-0 text-sm\",\n                        classNames?.optionName,\n                      )}\n                    >\n                      {option.name}\n                    </span>\n\n                    {option.default_price != null && (\n                      <span className=\"text-sm text-muted-foreground\">\n                        +<Price amount={option.default_price} currency={currency} />\n                      </span>\n                    )}\n                  </Checkbox.Root>\n                );\n              })}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/billing-plan-selector.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "billing-plan-selector.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductBillingPlan, BillingFrequency } from \"@cimplify/sdk\";\nimport { useBillingPlans } from \"./hooks/use-billing-plans\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BillingPlanSelectorClassNames {\n  root?: string;\n  plan?: string;\n  activePlan?: string;\n  frequency?: string;\n  price?: string;\n  setupFee?: string;\n  trialBadge?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface BillingPlanSelectorProps {\n  /** Product ID to fetch billing plans for. */\n  productId: string;\n  /** Override plans (skips fetch). For SSR, pass pre-fetched plans. */\n  plans?: ProductBillingPlan[];\n  /** Called when a plan is selected. */\n  onPlanSelect?: (plan: ProductBillingPlan | null) => void;\n  /** Currently selected plan ID. */\n  selectedPlanId?: string | null;\n  /** Show a \"One-time purchase\" option at the top. */\n  showOneTimePurchase?: boolean;\n  /** Label for the one-time purchase option. Default: \"One-time purchase\". */\n  oneTimePurchaseLabel?: string;\n  /** Custom plan card renderer. */\n  renderPlan?: (plan: ProductBillingPlan, isActive: boolean) => React.ReactNode;\n  className?: string;\n  classNames?: BillingPlanSelectorClassNames;\n}\n\nconst FREQUENCY_LABELS: Record<BillingFrequency, string> = {\n  weekly: \"Weekly\",\n  biweekly: \"Biweekly\",\n  monthly: \"Monthly\",\n  quarterly: \"Quarterly\",\n  annually: \"Annually\",\n};\n\nfunction formatMarkup(plan: ProductBillingPlan): string | null {\n  if (!plan.markup_type || plan.markup_amount == null) return null;\n  if (plan.markup_type === \"percentage\") return `+${plan.markup_amount}%`;\n  return null;\n}\n\n/**\n * BillingPlanSelector — subscription/installment plan comparison and selection.\n *\n * Renders plan cards with frequency, markup, trial, and setup fee details.\n * Returns `null` when no plans are available (and one-time purchase is hidden).\n */\nexport function BillingPlanSelector({\n  productId,\n  plans: plansProp,\n  onPlanSelect,\n  selectedPlanId,\n  showOneTimePurchase = false,\n  oneTimePurchaseLabel = \"One-time purchase\",\n  renderPlan,\n  className,\n  classNames,\n}: BillingPlanSelectorProps): React.ReactElement | null {\n  const { plans: fetched, isLoading } = useBillingPlans(productId, {\n    enabled: plansProp === undefined,\n  });\n\n  const plans = plansProp ?? fetched;\n\n  if (isLoading && plans.length === 0) {\n    return (\n      <div\n        data-cimplify-billing-plan-selector\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (plans.length === 0 && !showOneTimePurchase) {\n    return null;\n  }\n\n  const isOneTimePurchaseSelected = selectedPlanId === null;\n\n  return (\n    <div data-cimplify-billing-plan-selector className={cn(className, classNames?.root)}>\n      {showOneTimePurchase && (\n        <button\n          type=\"button\"\n          onClick={() => onPlanSelect?.(null)}\n          data-cimplify-billing-plan\n          data-plan-type=\"one-time\"\n          data-active={isOneTimePurchaseSelected || undefined}\n          aria-pressed={isOneTimePurchaseSelected}\n          className={cn(\n            classNames?.plan,\n            isOneTimePurchaseSelected && classNames?.activePlan,\n          )}\n        >\n          <span data-cimplify-billing-frequency className={classNames?.frequency}>\n            {oneTimePurchaseLabel}\n          </span>\n        </button>\n      )}\n\n      {plans.map((plan) => {\n        const isActive = selectedPlanId === plan.id;\n        const markup = formatMarkup(plan);\n\n        return (\n          <button\n            key={plan.id}\n            type=\"button\"\n            onClick={() => onPlanSelect?.(plan)}\n            data-cimplify-billing-plan\n            data-plan-type={plan.plan_type}\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(classNames?.plan, isActive && classNames?.activePlan)}\n          >\n            {renderPlan ? (\n              renderPlan(plan, isActive)\n            ) : (\n              <>\n                <span data-cimplify-billing-frequency className={classNames?.frequency}>\n                  {FREQUENCY_LABELS[plan.frequency]}\n                </span>\n\n                {markup && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    {markup}\n                  </span>\n                )}\n\n                {plan.markup_type === \"fixed\" && plan.markup_amount != null && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    +<Price amount={plan.markup_amount} />\n                  </span>\n                )}\n\n                {plan.trial_days > 0 && (\n                  <span data-cimplify-billing-trial className={classNames?.trialBadge}>\n                    {plan.trial_days}-day trial\n                  </span>\n                )}\n\n                {plan.setup_fee > 0 && (\n                  <span data-cimplify-billing-setup-fee className={classNames?.setupFee}>\n                    Setup fee: <Price amount={plan.setup_fee} />\n                  </span>\n                )}\n\n                {plan.plan_type === \"installment\" && plan.installment_periods != null && (\n                  <span data-cimplify-billing-periods>\n                    {plan.installment_periods} payments\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { ProductBillingPlan, BillingFrequency } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport { useBillingPlans } from \"./hooks/use-billing-plans\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BillingPlanSelectorClassNames {\n  root?: string;\n  plan?: string;\n  activePlan?: string;\n  frequency?: string;\n  price?: string;\n  setupFee?: string;\n  trialBadge?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface BillingPlanSelectorProps {\n  /** Product ID to fetch billing plans for. */\n  productId: string;\n  /** Override plans (skips fetch). For SSR, pass pre-fetched plans. */\n  plans?: ProductBillingPlan[];\n  /** Called when a plan is selected. */\n  onPlanSelect?: (plan: ProductBillingPlan | null) => void;\n  /** Currently selected plan ID. */\n  selectedPlanId?: string | null;\n  /** Currency the plan amounts are denominated in. */\n  currency?: CurrencyCode;\n  /** Show a \"One-time purchase\" option at the top. */\n  showOneTimePurchase?: boolean;\n  /** Label for the one-time purchase option. Default: \"One-time purchase\". */\n  oneTimePurchaseLabel?: string;\n  /** Custom plan card renderer. */\n  renderPlan?: (plan: ProductBillingPlan, isActive: boolean) => React.ReactNode;\n  className?: string;\n  classNames?: BillingPlanSelectorClassNames;\n}\n\nconst FREQUENCY_LABELS: Record<BillingFrequency, string> = {\n  weekly: \"Weekly\",\n  biweekly: \"Biweekly\",\n  monthly: \"Monthly\",\n  quarterly: \"Quarterly\",\n  annually: \"Annually\",\n};\n\nfunction formatMarkup(plan: ProductBillingPlan): string | null {\n  if (!plan.markup_type || plan.markup_amount == null) return null;\n  if (plan.markup_type === \"percentage\") return `+${plan.markup_amount}%`;\n  return null;\n}\n\n/**\n * BillingPlanSelector — subscription/installment plan comparison and selection.\n *\n * Renders plan cards with frequency, markup, trial, and setup fee details.\n * Returns `null` when no plans are available (and one-time purchase is hidden).\n */\nexport function BillingPlanSelector({\n  productId,\n  plans: plansProp,\n  currency,\n  onPlanSelect,\n  selectedPlanId,\n  showOneTimePurchase = false,\n  oneTimePurchaseLabel = \"One-time purchase\",\n  renderPlan,\n  className,\n  classNames,\n}: BillingPlanSelectorProps): React.ReactElement | null {\n  const { plans: fetched, isLoading } = useBillingPlans(productId, {\n    enabled: plansProp === undefined,\n  });\n\n  const plans = plansProp ?? fetched;\n\n  if (isLoading && plans.length === 0) {\n    return (\n      <div\n        data-cimplify-billing-plan-selector\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (plans.length === 0 && !showOneTimePurchase) {\n    return null;\n  }\n\n  const isOneTimePurchaseSelected = selectedPlanId === null;\n\n  return (\n    <div data-cimplify-billing-plan-selector className={cn(className, classNames?.root)}>\n      {showOneTimePurchase && (\n        <button\n          type=\"button\"\n          onClick={() => onPlanSelect?.(null)}\n          data-cimplify-billing-plan\n          data-plan-type=\"one-time\"\n          data-active={isOneTimePurchaseSelected || undefined}\n          aria-pressed={isOneTimePurchaseSelected}\n          className={cn(\n            classNames?.plan,\n            isOneTimePurchaseSelected && classNames?.activePlan,\n          )}\n        >\n          <span data-cimplify-billing-frequency className={classNames?.frequency}>\n            {oneTimePurchaseLabel}\n          </span>\n        </button>\n      )}\n\n      {plans.map((plan) => {\n        const isActive = selectedPlanId === plan.id;\n        const markup = formatMarkup(plan);\n\n        return (\n          <button\n            key={plan.id}\n            type=\"button\"\n            onClick={() => onPlanSelect?.(plan)}\n            data-cimplify-billing-plan\n            data-plan-type={plan.plan_type}\n            data-active={isActive || undefined}\n            aria-pressed={isActive}\n            className={cn(classNames?.plan, isActive && classNames?.activePlan)}\n          >\n            {renderPlan ? (\n              renderPlan(plan, isActive)\n            ) : (\n              <>\n                <span data-cimplify-billing-frequency className={classNames?.frequency}>\n                  {FREQUENCY_LABELS[plan.frequency]}\n                </span>\n\n                {markup && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    {markup}\n                  </span>\n                )}\n\n                {plan.markup_type === \"fixed\" && plan.markup_amount != null && (\n                  <span data-cimplify-billing-markup className={classNames?.price}>\n                    +<Price amount={plan.markup_amount} currency={currency} />\n                  </span>\n                )}\n\n                {plan.trial_days > 0 && (\n                  <span data-cimplify-billing-trial className={classNames?.trialBadge}>\n                    {plan.trial_days}-day trial\n                  </span>\n                )}\n\n                {plan.setup_fee > 0 && (\n                  <span data-cimplify-billing-setup-fee className={classNames?.setupFee}>\n                    Setup fee: <Price amount={plan.setup_fee} currency={currency} />\n                  </span>\n                )}\n\n                {plan.plan_type === \"installment\" && plan.installment_periods != null && (\n                  <span data-cimplify-billing-periods>\n                    {plan.installment_periods} payments\n                  </span>\n                )}\n              </>\n            )}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/booking-page.json

@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "booking-page.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport type { Service, Staff, AvailableSlot, CustomerBooking } from \"@cimplify/sdk\";\nimport type { Resource } from \"./resource-picker\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { useCimplifyClient } from \"@cimplify/sdk/react\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { ResourcePicker } from \"./resource-picker\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { parsePrice } from \"@cimplify/sdk\";\n\nexport interface BookingPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  serviceInfo?: string;\n  step?: string;\n  stepTitle?: string;\n  summary?: string;\n  summaryRow?: string;\n  confirmButton?: string;\n  backButton?: string;\n  error?: string;\n  rescheduleInfo?: string;\n  depositInfo?: string;\n  cancellationPolicy?: string;\n  resourceStep?: string;\n}\n\nexport interface BookingPageProps {\n  /** The service being booked. */\n  service: Service;\n  /** The underlying product (for deposit/cancellation fields). Falls back to service fields. */\n  product?: Product;\n  /** Optional staff list for staff selection step. */\n  staff?: Staff[];\n  /** Optional resources for resource selection step (rooms, equipment, etc.). */\n  resources?: Resource[];\n  /** Number of participants. */\n  participantCount?: number;\n  /** Page title. */\n  title?: string;\n  /** Called after successfully adding to cart. */\n  onBooked?: (slot: AvailableSlot, staffId: string | null) => void;\n  /** Called when user wants to go back. */\n  onBack?: () => void;\n  /** Existing booking for reschedule mode. */\n  existingBooking?: CustomerBooking;\n  /** Called after a successful reschedule. */\n  onRescheduled?: (booking: CustomerBooking, newSlot: AvailableSlot) => void;\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  className?: string;\n  classNames?: BookingPageClassNames;\n}\n\nconst STEP = {\n  SELECT_SLOT: \"select-slot\",\n  SELECT_RESOURCE: \"select-resource\",\n  SELECT_STAFF: \"select-staff\",\n  CONFIRM: \"confirm\",\n} as const;\n\ntype BookingStep = (typeof STEP)[keyof typeof STEP];\n\nexport function BookingPage({\n  service,\n  product,\n  staff,\n  resources,\n  participantCount,\n  title,\n  onBooked,\n  onBack,\n  existingBooking,\n  onRescheduled,\n  showPrice = true,\n  className,\n  classNames,\n}: BookingPageProps): React.ReactElement {\n  const { addItem } = useCart();\n  const { client } = useCimplifyClient();\n\n  const isReschedule = existingBooking !== undefined;\n\n  const [step, setStep] = useState<BookingStep>(STEP.SELECT_SLOT);\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedDate, setSelectedDate] = useState<string | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const hasResourceStep = resources && resources.length > 0;\n  const hasStaffStep = staff && staff.length > 0;\n\n  // Deposit info — prefer product fields, then fall back to service metadata\n  const depositType = product?.deposit_type;\n  const depositAmount = product?.deposit_amount;\n  const hasDeposit = depositType !== undefined && depositType !== \"none\" && depositAmount !== undefined && parsePrice(depositAmount) !== 0;\n\n  // Cancellation policy\n  const cancellationMinutes = product?.cancellation_window_minutes;\n  const noShowFee = product?.no_show_fee;\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot, date: string) => {\n      setSelectedSlot(slot);\n      setSelectedDate(date);\n      setError(null);\n      if (hasResourceStep) {\n        setStep(STEP.SELECT_RESOURCE);\n      } else if (hasStaffStep) {\n        setStep(STEP.SELECT_STAFF);\n      } else {\n        setStep(STEP.CONFIRM);\n      }\n    },\n    [hasResourceStep, hasStaffStep],\n  );\n\n  const handleResourceSelect = useCallback(\n    (resourceId: string | null) => {\n      setSelectedResourceId(resourceId);\n      if (hasStaffStep) {\n        setStep(STEP.SELECT_STAFF);\n      } else {\n        setStep(STEP.CONFIRM);\n      }\n    },\n    [hasStaffStep],\n  );\n\n  const handleStaffSelect = useCallback((staffId: string | null) => {\n    setSelectedStaffId(staffId);\n    setStep(STEP.CONFIRM);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setError(null);\n    if (step === STEP.CONFIRM && hasStaffStep) {\n      setStep(STEP.SELECT_STAFF);\n    } else if (step === STEP.CONFIRM && hasResourceStep) {\n      setStep(STEP.SELECT_RESOURCE);\n    } else if (step === STEP.SELECT_STAFF && hasResourceStep) {\n      setStep(STEP.SELECT_RESOURCE);\n    } else if (step === STEP.CONFIRM || step === STEP.SELECT_STAFF || step === STEP.SELECT_RESOURCE) {\n      setStep(STEP.SELECT_SLOT);\n    } else {\n      onBack?.();\n    }\n  }, [step, hasStaffStep, hasResourceStep, onBack]);\n\n  const handleConfirm = useCallback(async () => {\n    if (!selectedSlot || !selectedDate) return;\n\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      if (isReschedule && existingBooking) {\n        // Reschedule mode — call the scheduling API instead of adding to cart\n        const serviceItem = existingBooking.service_items[0];\n        const result = await client.scheduling.rescheduleBooking({\n          order_id: existingBooking.order_id,\n          line_item_id: serviceItem?.service_id ?? existingBooking.order_id,\n          new_start_time: selectedSlot.start_time,\n          new_end_time: selectedSlot.end_time,\n          new_staff_id: selectedStaffId || undefined,\n          reschedule_type: \"customer\",\n        });\n\n        if (!result.ok) {\n          throw result.error;\n        }\n\n        onRescheduled?.(existingBooking, selectedSlot);\n      } else {\n        // Normal booking mode — add to cart\n        const serviceProduct = {\n          id: service.product_id || service.id,\n          business_id: service.business_id || \"\",\n          category_id: service.category_id || undefined,\n          name: service.name,\n          slug: service.id,\n          description: service.description || undefined,\n          image_url: service.image_url || undefined,\n          default_price: (service.price || \"0\") as Product[\"default_price\"],\n          type: \"service\" as const,\n          inventory_type: \"none\" as const,\n          variant_strategy: \"fetch_all\" as const,\n          is_active: service.is_available,\n          created_at: new Date().toISOString(),\n          updated_at: new Date().toISOString(),\n        };\n\n        await addItem(serviceProduct, 1, {\n          scheduledStart: selectedSlot.start_time,\n          scheduledEnd: selectedSlot.end_time,\n          staffId: selectedStaffId || undefined,\n          resourceId: selectedResourceId || undefined,\n        });\n\n        onBooked?.(selectedSlot, selectedStaffId);\n      }\n    } catch (err) {\n      const fallbackMessage = isReschedule ? \"Failed to reschedule booking\" : \"Failed to add booking to cart\";\n      setError(err instanceof Error ? err.message : fallbackMessage);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);\n\n  return (\n    <div data-cimplify-booking-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-booking-page-header className={classNames?.header}>\n        {onBack && step === STEP.SELECT_SLOT && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        {step !== STEP.SELECT_SLOT && (\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        <h1 data-cimplify-booking-page-title className={classNames?.title}>\n          {title || (isReschedule ? \"Reschedule Booking\" : `Book ${service.name}`)}\n        </h1>\n      </div>\n\n      {isReschedule && existingBooking && (\n        <div data-cimplify-booking-reschedule-info className={classNames?.rescheduleInfo}>\n          <span>Rescheduling booking from {new Date(existingBooking.service_items[0]?.scheduled_start ?? existingBooking.created_at).toLocaleDateString()}</span>\n        </div>\n      )}\n\n      <div data-cimplify-booking-service-info className={classNames?.serviceInfo}>\n        <span data-cimplify-booking-service-name>{service.name}</span>\n        <span data-cimplify-booking-service-duration>{formatDuration(service.duration_minutes, service.duration_unit)}</span>\n        {service.price && (\n          <span data-cimplify-booking-service-price>\n            <Price amount={service.price} />\n          </span>\n        )}\n        {hasDeposit && (\n          <span data-cimplify-booking-deposit-info className={classNames?.depositInfo}>\n            Deposit: {depositType === \"percentage\" ? `${parsePrice(depositAmount!)}%` : <Price amount={depositAmount!} />}\n          </span>\n        )}\n        {cancellationMinutes !== undefined && cancellationMinutes > 0 && (\n          <span data-cimplify-booking-cancellation-policy className={classNames?.cancellationPolicy}>\n            Free cancellation up to {cancellationMinutes >= 60 ? `${Math.floor(cancellationMinutes / 60)} hour${Math.floor(cancellationMinutes / 60) !== 1 ? \"s\" : \"\"}` : `${cancellationMinutes} minute${cancellationMinutes !== 1 ? \"s\" : \"\"}`} before\n          </span>\n        )}\n        {noShowFee !== undefined && parsePrice(noShowFee) !== 0 && (\n          <span data-cimplify-booking-no-show-fee className={classNames?.cancellationPolicy}>\n            No-show fee: <Price amount={noShowFee} />\n          </span>\n        )}\n      </div>\n\n      {error && (\n        <div data-cimplify-booking-error className={classNames?.error}>\n          {error}\n        </div>\n      )}\n\n      {step === STEP.SELECT_SLOT && (\n        <div data-cimplify-booking-step=\"select-slot\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Select a date &amp; time\n          </h2>\n          <DateSlotPicker\n            serviceId={service.id}\n            participantCount={participantCount}\n            selectedSlot={selectedSlot}\n            onSlotSelect={handleSlotSelect}\n            showPrice={showPrice}\n          />\n        </div>\n      )}\n\n      {step === STEP.SELECT_RESOURCE && resources && (\n        <div data-cimplify-booking-step=\"select-resource\" className={cn(classNames?.step, classNames?.resourceStep)}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Choose a room\n          </h2>\n          <ResourcePicker\n            resources={resources}\n            selectedResourceId={selectedResourceId}\n            onResourceSelect={handleResourceSelect}\n          />\n        </div>\n      )}\n\n      {step === STEP.SELECT_STAFF && staff && (\n        <div data-cimplify-booking-step=\"select-staff\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Choose a provider\n          </h2>\n          <StaffPicker\n            staff={staff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={handleStaffSelect}\n          />\n        </div>\n      )}\n\n      {step === STEP.CONFIRM && selectedSlot && (\n        <div data-cimplify-booking-step=\"confirm\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Confirm your booking\n          </h2>\n          <div data-cimplify-booking-summary className={classNames?.summary}>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Service</span>\n              <span>{service.name}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Date</span>\n              <span>{selectedDate}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Time</span>\n              <span>\n                {new Date(selectedSlot.start_time).toLocaleTimeString(undefined, {\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Duration</span>\n              <span>{formatDuration(service.duration_minutes, service.duration_unit)}</span>\n            </div>\n            {selectedResourceId && resources && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Room</span>\n                <span>{resources.find((r) => r.id === selectedResourceId)?.name ?? \"Selected\"}</span>\n              </div>\n            )}\n            {selectedStaffId && staff && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Provider</span>\n                <span>{staff.find((s) => s.id === selectedStaffId)?.name ?? \"Selected\"}</span>\n              </div>\n            )}\n            {(selectedSlot.price || service.price) && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Price</span>\n                <span>\n                  <Price amount={selectedSlot.price || service.price!} />\n                </span>\n              </div>\n            )}\n            {hasDeposit && (\n              <div data-cimplify-booking-summary-row className={cn(classNames?.summaryRow, classNames?.depositInfo)}>\n                <span>Deposit</span>\n                <span>\n                  {depositType === \"percentage\" ? `${parsePrice(depositAmount!)}%` : <Price amount={depositAmount!} />}\n                </span>\n              </div>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isSubmitting}\n            data-cimplify-booking-confirm\n            className={classNames?.confirmButton}\n          >\n            {isSubmitting\n              ? (isReschedule ? \"Rescheduling…\" : \"Adding to cart…\")\n              : (isReschedule ? \"Reschedule\" : \"Confirm Booking\")}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport type { Product } from \"@cimplify/sdk\";\nimport type { CurrencyCode } from \"@cimplify/sdk\";\nimport type { Service, Staff, AvailableSlot, CustomerBooking } from \"@cimplify/sdk\";\nimport type { Resource } from \"./resource-picker\";\nimport { useCart } from \"@cimplify/sdk/react\";\nimport { useCimplifyClient } from \"@cimplify/sdk/react\";\nimport { DateSlotPicker } from \"@cimplify/sdk/react\";\nimport { StaffPicker } from \"@cimplify/sdk/react\";\nimport { ResourcePicker } from \"./resource-picker\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\nimport { formatDuration } from \"./utils/format-duration\";\nimport { parsePrice } from \"@cimplify/sdk\";\n\nexport interface BookingPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  serviceInfo?: string;\n  step?: string;\n  stepTitle?: string;\n  summary?: string;\n  summaryRow?: string;\n  confirmButton?: string;\n  backButton?: string;\n  error?: string;\n  rescheduleInfo?: string;\n  depositInfo?: string;\n  cancellationPolicy?: string;\n  resourceStep?: string;\n}\n\nexport interface BookingPageProps {\n  /** The service being booked. */\n  service: Service;\n  /** The underlying product (for deposit/cancellation fields). Falls back to service fields. */\n  product?: Product;\n  /** Optional staff list for staff selection step. */\n  staff?: Staff[];\n  /** Optional resources for resource selection step (rooms, equipment, etc.). */\n  resources?: Resource[];\n  /** Number of participants. */\n  participantCount?: number;\n  /** Page title. */\n  title?: string;\n  /** Called after successfully adding to cart. */\n  onBooked?: (slot: AvailableSlot, staffId: string | null) => void;\n  /** Called when user wants to go back. */\n  onBack?: () => void;\n  /** Existing booking for reschedule mode. */\n  existingBooking?: CustomerBooking;\n  /** Called after a successful reschedule. */\n  onRescheduled?: (booking: CustomerBooking, newSlot: AvailableSlot) => void;\n  /** Show price on slots. Default: true. */\n  showPrice?: boolean;\n  className?: string;\n  classNames?: BookingPageClassNames;\n}\n\nconst STEP = {\n  SELECT_SLOT: \"select-slot\",\n  SELECT_RESOURCE: \"select-resource\",\n  SELECT_STAFF: \"select-staff\",\n  CONFIRM: \"confirm\",\n} as const;\n\ntype BookingStep = (typeof STEP)[keyof typeof STEP];\n\nexport function BookingPage({\n  service,\n  product,\n  staff,\n  resources,\n  participantCount,\n  title,\n  onBooked,\n  onBack,\n  existingBooking,\n  onRescheduled,\n  showPrice = true,\n  className,\n  classNames,\n}: BookingPageProps): React.ReactElement {\n  const { addItem } = useCart();\n  const { client } = useCimplifyClient();\n\n  const currency = service.currency as CurrencyCode | undefined;\n\n  const isReschedule = existingBooking !== undefined;\n\n  const [step, setStep] = useState<BookingStep>(STEP.SELECT_SLOT);\n  const [selectedSlot, setSelectedSlot] = useState<AvailableSlot | null>(null);\n  const [selectedDate, setSelectedDate] = useState<string | null>(null);\n  const [selectedStaffId, setSelectedStaffId] = useState<string | null>(null);\n  const [selectedResourceId, setSelectedResourceId] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const hasResourceStep = resources && resources.length > 0;\n  const hasStaffStep = staff && staff.length > 0;\n\n  // Deposit info — prefer product fields, then fall back to service metadata\n  const depositType = product?.deposit_type;\n  const depositAmount = product?.deposit_amount;\n  const hasDeposit = depositType !== undefined && depositType !== \"none\" && depositAmount !== undefined && parsePrice(depositAmount) !== 0;\n\n  // Cancellation policy\n  const cancellationMinutes = product?.cancellation_window_minutes;\n  const noShowFee = product?.no_show_fee;\n\n  const handleSlotSelect = useCallback(\n    (slot: AvailableSlot, date: string) => {\n      setSelectedSlot(slot);\n      setSelectedDate(date);\n      setError(null);\n      if (hasResourceStep) {\n        setStep(STEP.SELECT_RESOURCE);\n      } else if (hasStaffStep) {\n        setStep(STEP.SELECT_STAFF);\n      } else {\n        setStep(STEP.CONFIRM);\n      }\n    },\n    [hasResourceStep, hasStaffStep],\n  );\n\n  const handleResourceSelect = useCallback(\n    (resourceId: string | null) => {\n      setSelectedResourceId(resourceId);\n      if (hasStaffStep) {\n        setStep(STEP.SELECT_STAFF);\n      } else {\n        setStep(STEP.CONFIRM);\n      }\n    },\n    [hasStaffStep],\n  );\n\n  const handleStaffSelect = useCallback((staffId: string | null) => {\n    setSelectedStaffId(staffId);\n    setStep(STEP.CONFIRM);\n  }, []);\n\n  const handleBack = useCallback(() => {\n    setError(null);\n    if (step === STEP.CONFIRM && hasStaffStep) {\n      setStep(STEP.SELECT_STAFF);\n    } else if (step === STEP.CONFIRM && hasResourceStep) {\n      setStep(STEP.SELECT_RESOURCE);\n    } else if (step === STEP.SELECT_STAFF && hasResourceStep) {\n      setStep(STEP.SELECT_RESOURCE);\n    } else if (step === STEP.CONFIRM || step === STEP.SELECT_STAFF || step === STEP.SELECT_RESOURCE) {\n      setStep(STEP.SELECT_SLOT);\n    } else {\n      onBack?.();\n    }\n  }, [step, hasStaffStep, hasResourceStep, onBack]);\n\n  const handleConfirm = useCallback(async () => {\n    if (!selectedSlot || !selectedDate) return;\n\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      if (isReschedule && existingBooking) {\n        // Reschedule mode — call the scheduling API instead of adding to cart\n        const serviceItem = existingBooking.service_items[0];\n        const result = await client.scheduling.rescheduleBooking({\n          order_id: existingBooking.order_id,\n          line_item_id: serviceItem?.service_id ?? existingBooking.order_id,\n          new_start_time: selectedSlot.start_time,\n          new_end_time: selectedSlot.end_time,\n          new_staff_id: selectedStaffId || undefined,\n          reschedule_type: \"customer\",\n        });\n\n        if (!result.ok) {\n          throw result.error;\n        }\n\n        onRescheduled?.(existingBooking, selectedSlot);\n      } else {\n        // Normal booking mode — add to cart\n        const serviceProduct = {\n          id: service.product_id || service.id,\n          business_id: service.business_id || \"\",\n          category_id: service.category_id || undefined,\n          name: service.name,\n          slug: service.id,\n          description: service.description || undefined,\n          image_url: service.image_url || undefined,\n          default_price: (service.price || \"0\") as Product[\"default_price\"],\n          type: \"service\" as const,\n          inventory_type: \"none\" as const,\n          variant_strategy: \"fetch_all\" as const,\n          is_active: service.is_available,\n          created_at: new Date().toISOString(),\n          updated_at: new Date().toISOString(),\n        };\n\n        await addItem(serviceProduct, 1, {\n          scheduledStart: selectedSlot.start_time,\n          scheduledEnd: selectedSlot.end_time,\n          staffId: selectedStaffId || undefined,\n          resourceId: selectedResourceId || undefined,\n        });\n\n        onBooked?.(selectedSlot, selectedStaffId);\n      }\n    } catch (err) {\n      const fallbackMessage = isReschedule ? \"Failed to reschedule booking\" : \"Failed to add booking to cart\";\n      setError(err instanceof Error ? err.message : fallbackMessage);\n    } finally {\n      setIsSubmitting(false);\n    }\n  }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);\n\n  return (\n    <div data-cimplify-booking-page className={cn(className, classNames?.root)}>\n      <div data-cimplify-booking-page-header className={classNames?.header}>\n        {onBack && step === STEP.SELECT_SLOT && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        {step !== STEP.SELECT_SLOT && (\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-booking-page-back\n            className={classNames?.backButton}\n          >\n            Back\n          </button>\n        )}\n        <h1 data-cimplify-booking-page-title className={classNames?.title}>\n          {title || (isReschedule ? \"Reschedule Booking\" : `Book ${service.name}`)}\n        </h1>\n      </div>\n\n      {isReschedule && existingBooking && (\n        <div data-cimplify-booking-reschedule-info className={classNames?.rescheduleInfo}>\n          <span>Rescheduling booking from {new Date(existingBooking.service_items[0]?.scheduled_start ?? existingBooking.created_at).toLocaleDateString()}</span>\n        </div>\n      )}\n\n      <div data-cimplify-booking-service-info className={classNames?.serviceInfo}>\n        <span data-cimplify-booking-service-name>{service.name}</span>\n        <span data-cimplify-booking-service-duration>{formatDuration(service.duration_minutes, service.duration_unit)}</span>\n        {service.price && (\n          <span data-cimplify-booking-service-price>\n            <Price amount={service.price} currency={currency} />\n          </span>\n        )}\n        {hasDeposit && (\n          <span data-cimplify-booking-deposit-info className={classNames?.depositInfo}>\n            Deposit: {depositType === \"percentage\" ? `${parsePrice(depositAmount!)}%` : <Price amount={depositAmount!} currency={currency} />}\n          </span>\n        )}\n        {cancellationMinutes !== undefined && cancellationMinutes > 0 && (\n          <span data-cimplify-booking-cancellation-policy className={classNames?.cancellationPolicy}>\n            Free cancellation up to {cancellationMinutes >= 60 ? `${Math.floor(cancellationMinutes / 60)} hour${Math.floor(cancellationMinutes / 60) !== 1 ? \"s\" : \"\"}` : `${cancellationMinutes} minute${cancellationMinutes !== 1 ? \"s\" : \"\"}`} before\n          </span>\n        )}\n        {noShowFee !== undefined && parsePrice(noShowFee) !== 0 && (\n          <span data-cimplify-booking-no-show-fee className={classNames?.cancellationPolicy}>\n            No-show fee: <Price amount={noShowFee} currency={currency} />\n          </span>\n        )}\n      </div>\n\n      {error && (\n        <div data-cimplify-booking-error className={classNames?.error}>\n          {error}\n        </div>\n      )}\n\n      {step === STEP.SELECT_SLOT && (\n        <div data-cimplify-booking-step=\"select-slot\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Select a date &amp; time\n          </h2>\n          <DateSlotPicker\n            serviceId={service.id}\n            participantCount={participantCount}\n            selectedSlot={selectedSlot}\n            onSlotSelect={handleSlotSelect}\n            showPrice={showPrice}\n            currency={currency}\n          />\n        </div>\n      )}\n\n      {step === STEP.SELECT_RESOURCE && resources && (\n        <div data-cimplify-booking-step=\"select-resource\" className={cn(classNames?.step, classNames?.resourceStep)}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Choose a room\n          </h2>\n          <ResourcePicker\n            resources={resources}\n            selectedResourceId={selectedResourceId}\n            onResourceSelect={handleResourceSelect}\n          />\n        </div>\n      )}\n\n      {step === STEP.SELECT_STAFF && staff && (\n        <div data-cimplify-booking-step=\"select-staff\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Choose a provider\n          </h2>\n          <StaffPicker\n            staff={staff}\n            selectedStaffId={selectedStaffId}\n            onStaffSelect={handleStaffSelect}\n          />\n        </div>\n      )}\n\n      {step === STEP.CONFIRM && selectedSlot && (\n        <div data-cimplify-booking-step=\"confirm\" className={classNames?.step}>\n          <h2 data-cimplify-booking-step-title className={classNames?.stepTitle}>\n            Confirm your booking\n          </h2>\n          <div data-cimplify-booking-summary className={classNames?.summary}>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Service</span>\n              <span>{service.name}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Date</span>\n              <span>{selectedDate}</span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Time</span>\n              <span>\n                {new Date(selectedSlot.start_time).toLocaleTimeString(undefined, {\n                  hour: \"numeric\",\n                  minute: \"2-digit\",\n                })}\n              </span>\n            </div>\n            <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n              <span>Duration</span>\n              <span>{formatDuration(service.duration_minutes, service.duration_unit)}</span>\n            </div>\n            {selectedResourceId && resources && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Room</span>\n                <span>{resources.find((r) => r.id === selectedResourceId)?.name ?? \"Selected\"}</span>\n              </div>\n            )}\n            {selectedStaffId && staff && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Provider</span>\n                <span>{staff.find((s) => s.id === selectedStaffId)?.name ?? \"Selected\"}</span>\n              </div>\n            )}\n            {(selectedSlot.price || service.price) && (\n              <div data-cimplify-booking-summary-row className={classNames?.summaryRow}>\n                <span>Price</span>\n                <span>\n                  <Price amount={selectedSlot.price || service.price!} currency={currency} />\n                </span>\n              </div>\n            )}\n            {hasDeposit && (\n              <div data-cimplify-booking-summary-row className={cn(classNames?.summaryRow, classNames?.depositInfo)}>\n                <span>Deposit</span>\n                <span>\n                  {depositType === \"percentage\" ? `${parsePrice(depositAmount!)}%` : <Price amount={depositAmount!} currency={currency} />}\n                </span>\n              </div>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleConfirm}\n            disabled={isSubmitting}\n            data-cimplify-booking-confirm\n            className={classNames?.confirmButton}\n          >\n            {isSubmitting\n              ? (isReschedule ? \"Rescheduling…\" : \"Adding to cart…\")\n              : (isReschedule ? \"Reschedule\" : \"Confirm Booking\")}\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/bundle-selector.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "bundle-selector.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef, useId } from \"react\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"@base-ui/react/radio\";\nimport type { BundleComponentView, BundleComponentVariantView, BundlePriceType, DurationUnit } from \"@cimplify/sdk\";\nimport type { Money } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BundleSelectorClassNames {\n  root?: string;\n  heading?: string;\n  components?: string;\n  component?: string;\n  componentHeader?: string;\n  componentQty?: string;\n  componentName?: string;\n  typeBadge?: string;\n  serviceBadge?: string;\n  digitalBadge?: string;\n  variantPicker?: string;\n  variantOption?: string;\n  variantOptionSelected?: string;\n  variantAdjustment?: string;\n  summary?: string;\n  savings?: string;\n}\n\nexport interface BundleSelectorProps {\n  components: BundleComponentView[];\n  bundlePrice?: Money;\n  discountValue?: Money;\n  pricingType?: BundlePriceType;\n  onSelectionsChange: (selections: BundleSelectionInput[]) => void;\n  onPriceChange?: (price: number) => void;\n  onReady?: (ready: boolean) => void;\n  className?: string;\n  classNames?: BundleSelectorClassNames;\n}\n\nexport function BundleSelector({\n  components,\n  bundlePrice,\n  discountValue,\n  pricingType,\n  onSelectionsChange,\n  onPriceChange,\n  onReady,\n  className,\n  classNames,\n}: BundleSelectorProps): React.ReactElement | null {\n  const [variantChoices, setVariantChoices] = useState<Record<string, string>>({});\n  const lastComponentIds = useRef(\"\");\n\n  useEffect(() => {\n    const ids = components.map((c) => c.id).sort().join();\n    if (ids === lastComponentIds.current) return;\n    lastComponentIds.current = ids;\n\n    const defaults: Record<string, string> = {};\n    for (const comp of components) {\n      if (comp.variant_id) {\n        defaults[comp.id] = comp.variant_id;\n      } else if (comp.available_variants.length > 0) {\n        const defaultVariant =\n          comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];\n        if (defaultVariant) {\n          defaults[comp.id] = defaultVariant.id;\n        }\n      }\n    }\n    setVariantChoices(defaults);\n  }, [components]);\n\n  const selections = useMemo((): BundleSelectionInput[] => {\n    return components.map((comp) => ({\n      component_id: comp.id,\n      variant_id: variantChoices[comp.id],\n      quantity: comp.quantity,\n    }));\n  }, [components, variantChoices]);\n\n  useEffect(() => {\n    onSelectionsChange(selections);\n  }, [selections, onSelectionsChange]);\n\n  useEffect(() => {\n    onReady?.(components.length > 0 && selections.length > 0);\n  }, [components, selections, onReady]);\n\n  const totalPrice = useMemo(() => {\n    if (pricingType === \"fixed\" && bundlePrice) {\n      return parsePrice(bundlePrice);\n    }\n    const componentsTotal = components.reduce((sum, comp) => {\n      return sum + getComponentPrice(comp, variantChoices[comp.id]) * comp.quantity;\n    }, 0);\n    if (pricingType === \"percentage_discount\" && discountValue) {\n      return componentsTotal * (1 - parsePrice(discountValue) / 100);\n    }\n    if (pricingType === \"fixed_discount\" && discountValue) {\n      return componentsTotal - parsePrice(discountValue);\n    }\n    return componentsTotal;\n  }, [components, variantChoices, pricingType, bundlePrice, discountValue]);\n\n  useEffect(() => {\n    onPriceChange?.(totalPrice);\n  }, [totalPrice, onPriceChange]);\n\n  const handleVariantChange = useCallback(\n    (componentId: string, variantId: string) => {\n      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));\n    },\n    [],\n  );\n\n  if (components.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-bundle-selector className={cn(\"space-y-4\", className, classNames?.root)}>\n      <div\n        data-cimplify-bundle-heading\n        className={cn(\"flex items-center justify-between py-3\", classNames?.heading)}\n      >\n        <span className=\"text-base font-bold\">Included in this bundle</span>\n      </div>\n\n      <div data-cimplify-bundle-components className={cn(\"divide-y divide-border\", classNames?.components)}>\n        {components.map((comp) => (\n          <BundleComponentCard\n            key={comp.id}\n            component={comp}\n            selectedVariantId={variantChoices[comp.id]}\n            onVariantChange={(variantId) =>\n              handleVariantChange(comp.id, variantId)\n            }\n            classNames={classNames}\n          />\n        ))}\n      </div>\n\n      {bundlePrice && (\n        <div\n          data-cimplify-bundle-summary\n          className={cn(\"border-t border-border pt-4 flex justify-between text-sm\", classNames?.summary)}\n        >\n          <span className=\"text-muted-foreground\">Bundle price</span>\n          <Price amount={bundlePrice} className=\"font-medium text-primary\" />\n        </div>\n      )}\n      {discountValue && (\n        <div\n          data-cimplify-bundle-savings\n          className={cn(\"flex justify-between text-sm\", classNames?.savings)}\n        >\n          <span className=\"text-muted-foreground\">You save</span>\n          <Price amount={discountValue} className=\"text-green-600 font-medium\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction getComponentPrice(\n  component: BundleComponentView,\n  selectedVariantId: string | undefined,\n): number {\n  if (!selectedVariantId || component.available_variants.length === 0) {\n    return parsePrice(component.effective_price);\n  }\n  if (selectedVariantId === component.variant_id) {\n    return parsePrice(component.effective_price);\n  }\n  const bakedAdj = component.variant_id\n    ? component.available_variants.find((v) => v.id === component.variant_id)\n    : undefined;\n  const selectedAdj = component.available_variants.find((v) => v.id === selectedVariantId);\n  if (!selectedAdj) return parsePrice(component.effective_price);\n  return parsePrice(component.effective_price)\n    - parsePrice(bakedAdj?.price_adjustment ?? \"0\")\n    + parsePrice(selectedAdj.price_adjustment);\n}\n\nfunction formatDuration(minutes: number, unit?: DurationUnit): string {\n  if (unit === \"hours\" || (!unit && minutes >= 60 && minutes % 60 === 0)) {\n    const h = Math.round(minutes / 60);\n    return `${h}h`;\n  }\n  if (unit === \"days\" || unit === \"nights\") {\n    const d = Math.round(minutes / 1440);\n    return `${d}${unit === \"nights\" ? \"n\" : \"d\"}`;\n  }\n  return `${minutes}min`;\n}\n\ninterface BundleComponentCardProps {\n  component: BundleComponentView;\n  selectedVariantId?: string;\n  onVariantChange: (variantId: string) => void;\n  classNames?: BundleSelectorClassNames;\n}\n\nfunction BundleComponentCard({\n  component,\n  selectedVariantId,\n  onVariantChange,\n  classNames,\n}: BundleComponentCardProps): React.ReactElement {\n  const idPrefix = useId();\n  const showVariantPicker =\n    component.allow_variant_choice && component.available_variants.length > 1;\n\n  const displayPrice = useMemo(\n    () => getComponentPrice(component, selectedVariantId),\n    [component, selectedVariantId],\n  );\n\n  const labelId = `${idPrefix}-bundle-component-${component.id}`;\n\n  return (\n    <div\n      data-cimplify-bundle-component\n      className={cn(\"py-4\", classNames?.component)}\n    >\n      <div\n        data-cimplify-bundle-component-header\n        className={cn(\"flex items-center justify-between gap-3\", classNames?.componentHeader)}\n      >\n        <div className=\"flex items-center gap-2\">\n          {component.quantity > 1 && (\n            <span\n              data-cimplify-bundle-component-qty\n              className={cn(\"text-xs font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded\", classNames?.componentQty)}\n            >\n              &times;{component.quantity}\n            </span>\n          )}\n          <span\n            id={labelId}\n            data-cimplify-bundle-component-name\n            className={cn(\"text-sm\", classNames?.componentName)}\n          >\n            {component.product_name}\n          </span>\n          {component.product_type === \"service\" && (\n            <span\n              data-cimplify-bundle-type-badge=\"service\"\n              className={cn(\n                \"text-[10px] uppercase tracking-wider font-medium text-blue-600\",\n                classNames?.typeBadge,\n                classNames?.serviceBadge,\n              )}\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" className=\"inline-block w-3 h-3 mr-0.5 -mt-px\" aria-hidden=\"true\">\n                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\"/>\n                <path d=\"M8 4v4l2.5 1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              Service{component.duration_minutes != null && (\n                <> &middot; {formatDuration(component.duration_minutes, component.duration_unit)}</>\n              )}\n            </span>\n          )}\n          {component.product_type === \"digital\" && (\n            <span\n              data-cimplify-bundle-type-badge=\"digital\"\n              className={cn(\n                \"text-[10px] uppercase tracking-wider font-medium text-violet-600\",\n                classNames?.typeBadge,\n                classNames?.digitalBadge,\n              )}\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" className=\"inline-block w-3 h-3 mr-0.5 -mt-px\" aria-hidden=\"true\">\n                <path d=\"M9 2L4 9h4l-1 5 5-7H8l1-5z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              Digital\n            </span>\n          )}\n        </div>\n        <span className=\"text-sm text-muted-foreground\">\n          <Price amount={displayPrice} />\n        </span>\n      </div>\n\n      {showVariantPicker && (\n        <RadioGroup\n          aria-labelledby={labelId}\n          value={selectedVariantId ?? \"\"}\n          onValueChange={(value) => {\n            onVariantChange(value);\n          }}\n          data-cimplify-bundle-variant-picker\n          className={cn(\"mt-3 divide-y divide-border\", classNames?.variantPicker)}\n        >\n          {component.available_variants.map((variant: BundleComponentVariantView) => {\n            const isSelected = selectedVariantId === variant.id;\n            const adjustment = parsePrice(variant.price_adjustment);\n\n            return (\n              <Radio.Root\n                key={variant.id}\n                value={variant.id}\n                data-cimplify-bundle-variant-option\n                data-selected={isSelected || undefined}\n                className={cn(\n                  \"w-full flex items-center gap-3 py-3 transition-colors cursor-pointer\",\n                  isSelected ? classNames?.variantOptionSelected : classNames?.variantOption,\n                )}\n              >\n                <span\n                  className={cn(\n                    \"w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors\",\n                    isSelected ? \"border-primary\" : \"border-muted-foreground/30\",\n                  )}\n                >\n                  {isSelected && <span className=\"w-2.5 h-2.5 rounded-full bg-primary\" />}\n                </span>\n                <span className=\"flex-1 text-sm\">\n                  {variant.display_name}\n                </span>\n                {adjustment !== 0 && (\n                  <span\n                    data-cimplify-bundle-variant-adjustment\n                    className={cn(\"text-sm text-muted-foreground\", classNames?.variantAdjustment)}\n                  >\n                    {adjustment > 0 ? \"+\" : \"\"}\n                    <Price amount={variant.price_adjustment} />\n                  </span>\n                )}\n              </Radio.Root>\n            );\n          })}\n        </RadioGroup>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback, useMemo, useEffect, useRef, useId } from \"react\";\nimport { RadioGroup } from \"@base-ui/react/radio-group\";\nimport { Radio } from \"@base-ui/react/radio\";\nimport type { BundleComponentView, BundleComponentVariantView, BundlePriceType, DurationUnit } from \"@cimplify/sdk\";\nimport type { Money, CurrencyCode } from \"@cimplify/sdk\";\nimport type { BundleSelectionInput } from \"@cimplify/sdk\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface BundleSelectorClassNames {\n  root?: string;\n  heading?: string;\n  components?: string;\n  component?: string;\n  componentHeader?: string;\n  componentQty?: string;\n  componentName?: string;\n  typeBadge?: string;\n  serviceBadge?: string;\n  digitalBadge?: string;\n  variantPicker?: string;\n  variantOption?: string;\n  variantOptionSelected?: string;\n  variantAdjustment?: string;\n  summary?: string;\n  savings?: string;\n}\n\nexport interface BundleSelectorProps {\n  components: BundleComponentView[];\n  bundlePrice?: Money;\n  discountValue?: Money;\n  pricingType?: BundlePriceType;\n  currency?: CurrencyCode;\n  onSelectionsChange: (selections: BundleSelectionInput[]) => void;\n  onPriceChange?: (price: number) => void;\n  onReady?: (ready: boolean) => void;\n  className?: string;\n  classNames?: BundleSelectorClassNames;\n}\n\nexport function BundleSelector({\n  components,\n  bundlePrice,\n  discountValue,\n  pricingType,\n  currency,\n  onSelectionsChange,\n  onPriceChange,\n  onReady,\n  className,\n  classNames,\n}: BundleSelectorProps): React.ReactElement | null {\n  const [variantChoices, setVariantChoices] = useState<Record<string, string>>({});\n  const lastComponentIds = useRef(\"\");\n\n  useEffect(() => {\n    const ids = components.map((c) => c.id).sort().join();\n    if (ids === lastComponentIds.current) return;\n    lastComponentIds.current = ids;\n\n    const defaults: Record<string, string> = {};\n    for (const comp of components) {\n      if (comp.variant_id) {\n        defaults[comp.id] = comp.variant_id;\n      } else if (comp.available_variants.length > 0) {\n        const defaultVariant =\n          comp.available_variants.find((v) => v.is_default) || comp.available_variants[0];\n        if (defaultVariant) {\n          defaults[comp.id] = defaultVariant.id;\n        }\n      }\n    }\n    setVariantChoices(defaults);\n  }, [components]);\n\n  const selections = useMemo((): BundleSelectionInput[] => {\n    return components.map((comp) => ({\n      component_id: comp.id,\n      variant_id: variantChoices[comp.id],\n      quantity: comp.quantity,\n    }));\n  }, [components, variantChoices]);\n\n  useEffect(() => {\n    onSelectionsChange(selections);\n  }, [selections, onSelectionsChange]);\n\n  useEffect(() => {\n    onReady?.(components.length > 0 && selections.length > 0);\n  }, [components, selections, onReady]);\n\n  const totalPrice = useMemo(() => {\n    if (pricingType === \"fixed\" && bundlePrice) {\n      return parsePrice(bundlePrice);\n    }\n    const componentsTotal = components.reduce((sum, comp) => {\n      return sum + getComponentPrice(comp, variantChoices[comp.id]) * comp.quantity;\n    }, 0);\n    if (pricingType === \"percentage_discount\" && discountValue) {\n      return componentsTotal * (1 - parsePrice(discountValue) / 100);\n    }\n    if (pricingType === \"fixed_discount\" && discountValue) {\n      return componentsTotal - parsePrice(discountValue);\n    }\n    return componentsTotal;\n  }, [components, variantChoices, pricingType, bundlePrice, discountValue]);\n\n  useEffect(() => {\n    onPriceChange?.(totalPrice);\n  }, [totalPrice, onPriceChange]);\n\n  const handleVariantChange = useCallback(\n    (componentId: string, variantId: string) => {\n      setVariantChoices((prev) => ({ ...prev, [componentId]: variantId }));\n    },\n    [],\n  );\n\n  if (components.length === 0) {\n    return null;\n  }\n\n  return (\n    <div data-cimplify-bundle-selector className={cn(\"space-y-4\", className, classNames?.root)}>\n      <div\n        data-cimplify-bundle-heading\n        className={cn(\"flex items-center justify-between py-3\", classNames?.heading)}\n      >\n        <span className=\"text-base font-bold\">Included in this bundle</span>\n      </div>\n\n      <div data-cimplify-bundle-components className={cn(\"divide-y divide-border\", classNames?.components)}>\n        {components.map((comp) => (\n          <BundleComponentCard\n            key={comp.id}\n            component={comp}\n            selectedVariantId={variantChoices[comp.id]}\n            onVariantChange={(variantId) =>\n              handleVariantChange(comp.id, variantId)\n            }\n            currency={currency}\n            classNames={classNames}\n          />\n        ))}\n      </div>\n\n      {bundlePrice && (\n        <div\n          data-cimplify-bundle-summary\n          className={cn(\"border-t border-border pt-4 flex justify-between text-sm\", classNames?.summary)}\n        >\n          <span className=\"text-muted-foreground\">Bundle price</span>\n          <Price amount={bundlePrice} currency={currency} className=\"font-medium text-primary\" />\n        </div>\n      )}\n      {discountValue && (\n        <div\n          data-cimplify-bundle-savings\n          className={cn(\"flex justify-between text-sm\", classNames?.savings)}\n        >\n          <span className=\"text-muted-foreground\">You save</span>\n          <Price amount={discountValue} currency={currency} className=\"text-green-600 font-medium\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction getComponentPrice(\n  component: BundleComponentView,\n  selectedVariantId: string | undefined,\n): number {\n  if (!selectedVariantId || component.available_variants.length === 0) {\n    return parsePrice(component.effective_price);\n  }\n  if (selectedVariantId === component.variant_id) {\n    return parsePrice(component.effective_price);\n  }\n  const bakedAdj = component.variant_id\n    ? component.available_variants.find((v) => v.id === component.variant_id)\n    : undefined;\n  const selectedAdj = component.available_variants.find((v) => v.id === selectedVariantId);\n  if (!selectedAdj) return parsePrice(component.effective_price);\n  return parsePrice(component.effective_price)\n    - parsePrice(bakedAdj?.price_adjustment ?? \"0\")\n    + parsePrice(selectedAdj.price_adjustment);\n}\n\nfunction formatDuration(minutes: number, unit?: DurationUnit): string {\n  if (unit === \"hours\" || (!unit && minutes >= 60 && minutes % 60 === 0)) {\n    const h = Math.round(minutes / 60);\n    return `${h}h`;\n  }\n  if (unit === \"days\" || unit === \"nights\") {\n    const d = Math.round(minutes / 1440);\n    return `${d}${unit === \"nights\" ? \"n\" : \"d\"}`;\n  }\n  return `${minutes}min`;\n}\n\ninterface BundleComponentCardProps {\n  component: BundleComponentView;\n  selectedVariantId?: string;\n  onVariantChange: (variantId: string) => void;\n  currency?: CurrencyCode;\n  classNames?: BundleSelectorClassNames;\n}\n\nfunction BundleComponentCard({\n  component,\n  selectedVariantId,\n  onVariantChange,\n  currency,\n  classNames,\n}: BundleComponentCardProps): React.ReactElement {\n  const idPrefix = useId();\n  const showVariantPicker =\n    component.allow_variant_choice && component.available_variants.length > 1;\n\n  const displayPrice = useMemo(\n    () => getComponentPrice(component, selectedVariantId),\n    [component, selectedVariantId],\n  );\n\n  const labelId = `${idPrefix}-bundle-component-${component.id}`;\n\n  return (\n    <div\n      data-cimplify-bundle-component\n      className={cn(\"py-4\", classNames?.component)}\n    >\n      <div\n        data-cimplify-bundle-component-header\n        className={cn(\"flex items-center justify-between gap-3\", classNames?.componentHeader)}\n      >\n        <div className=\"flex items-center gap-2\">\n          {component.quantity > 1 && (\n            <span\n              data-cimplify-bundle-component-qty\n              className={cn(\"text-xs font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded\", classNames?.componentQty)}\n            >\n              &times;{component.quantity}\n            </span>\n          )}\n          <span\n            id={labelId}\n            data-cimplify-bundle-component-name\n            className={cn(\"text-sm\", classNames?.componentName)}\n          >\n            {component.product_name}\n          </span>\n          {component.product_type === \"service\" && (\n            <span\n              data-cimplify-bundle-type-badge=\"service\"\n              className={cn(\n                \"text-[10px] uppercase tracking-wider font-medium text-blue-600\",\n                classNames?.typeBadge,\n                classNames?.serviceBadge,\n              )}\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" className=\"inline-block w-3 h-3 mr-0.5 -mt-px\" aria-hidden=\"true\">\n                <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.5\"/>\n                <path d=\"M8 4v4l2.5 1.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              Service{component.duration_minutes != null && (\n                <> &middot; {formatDuration(component.duration_minutes, component.duration_unit)}</>\n              )}\n            </span>\n          )}\n          {component.product_type === \"digital\" && (\n            <span\n              data-cimplify-bundle-type-badge=\"digital\"\n              className={cn(\n                \"text-[10px] uppercase tracking-wider font-medium text-violet-600\",\n                classNames?.typeBadge,\n                classNames?.digitalBadge,\n              )}\n            >\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" className=\"inline-block w-3 h-3 mr-0.5 -mt-px\" aria-hidden=\"true\">\n                <path d=\"M9 2L4 9h4l-1 5 5-7H8l1-5z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n              </svg>\n              Digital\n            </span>\n          )}\n        </div>\n        <span className=\"text-sm text-muted-foreground\">\n          <Price amount={displayPrice} currency={currency} />\n        </span>\n      </div>\n\n      {showVariantPicker && (\n        <RadioGroup\n          aria-labelledby={labelId}\n          value={selectedVariantId ?? \"\"}\n          onValueChange={(value) => {\n            onVariantChange(value);\n          }}\n          data-cimplify-bundle-variant-picker\n          className={cn(\"mt-3 divide-y divide-border\", classNames?.variantPicker)}\n        >\n          {component.available_variants.map((variant: BundleComponentVariantView) => {\n            const isSelected = selectedVariantId === variant.id;\n            const adjustment = parsePrice(variant.price_adjustment);\n\n            return (\n              <Radio.Root\n                key={variant.id}\n                value={variant.id}\n                data-cimplify-bundle-variant-option\n                data-selected={isSelected || undefined}\n                className={cn(\n                  \"w-full flex items-center gap-3 py-3 transition-colors cursor-pointer\",\n                  isSelected ? classNames?.variantOptionSelected : classNames?.variantOption,\n                )}\n              >\n                <span\n                  className={cn(\n                    \"w-5 h-5 rounded-full border-2 flex items-center justify-center shrink-0 transition-colors\",\n                    isSelected ? \"border-primary\" : \"border-muted-foreground/30\",\n                  )}\n                >\n                  {isSelected && <span className=\"w-2.5 h-2.5 rounded-full bg-primary\" />}\n                </span>\n                <span className=\"flex-1 text-sm\">\n                  {variant.display_name}\n                </span>\n                {adjustment !== 0 && (\n                  <span\n                    data-cimplify-bundle-variant-adjustment\n                    className={cn(\"text-sm text-muted-foreground\", classNames?.variantAdjustment)}\n                  >\n                    {adjustment > 0 ? \"+\" : \"\"}\n                    <Price amount={variant.price_adjustment} currency={currency} />\n                  </span>\n                )}\n              </Radio.Root>\n            );\n          })}\n        </RadioGroup>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }