@cimplify/sdk 0.27.0 → 0.28.0

package/dist/react.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { DURATION_UNIT, getVariantDisplayName, PRODUCT_TYPE, createCimplifyClient, RENDER_HINT } from './chunk-MISITC47.mjs';
-export { getVariantDisplayName } from './chunk-MISITC47.mjs';
+import { DURATION_UNIT, getVariantDisplayName, PRODUCT_TYPE, createCimplifyClient, RENDER_HINT } from './chunk-FFUCCUG4.mjs';
+export { getVariantDisplayName } from './chunk-FFUCCUG4.mjs';
 import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-3J4PPSMI.mjs';
 import { isSupportedCurrency, formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-E3HC2YAE.mjs';
 import React3, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
@@ -2847,6 +2847,84 @@ function useOrders(options = {}) {
   const { data, isLoading, error, refetch } = ordersQuery(options);
   return { orders: data ?? [], isLoading, error, refetch };
 }
+function useSubscriptions(options = {}) {
+  const { client } = useCimplifyClient();
+  const { status, enabled = true } = options;
+  const [subscriptions, setSubscriptions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetch2 = useCallback(async () => {
+    if (!enabled) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await client.subscriptions.list();
+      if (result.ok) {
+        const filtered = status ? result.value.filter((s) => s.status === status) : result.value;
+        setSubscriptions(filtered);
+      } else {
+        setError(result.error);
+      }
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, enabled, status]);
+  useEffect(() => {
+    void fetch2();
+  }, [fetch2]);
+  return { subscriptions, isLoading, error, refetch: fetch2 };
+}
+function useSubscription(id, options = {}) {
+  const { client } = useCimplifyClient();
+  const { enabled = true } = options;
+  const normalizedId = (id || "").trim();
+  const [subscription, setSubscription] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetch2 = useCallback(async () => {
+    if (!enabled || !normalizedId) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await client.subscriptions.get(normalizedId);
+      if (result.ok) {
+        setSubscription(result.value);
+      } else {
+        setError(result.error);
+      }
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, enabled, normalizedId]);
+  useEffect(() => {
+    void fetch2();
+  }, [fetch2]);
+  const cancel = useCallback(async (reason) => {
+    if (!normalizedId) return;
+    await client.subscriptions.cancel(normalizedId, reason);
+    void fetch2();
+  }, [client, normalizedId, fetch2]);
+  const pause = useCallback(async () => {
+    if (!normalizedId) return;
+    await client.subscriptions.pause(normalizedId);
+    void fetch2();
+  }, [client, normalizedId, fetch2]);
+  const resume = useCallback(async () => {
+    if (!normalizedId) return;
+    await client.subscriptions.resume(normalizedId);
+    void fetch2();
+  }, [client, normalizedId, fetch2]);
+  const skipNext = useCallback(async () => {
+    if (!normalizedId) return;
+    await client.subscriptions.skipNextRenewal(normalizedId);
+    void fetch2();
+  }, [client, normalizedId, fetch2]);
+  return { subscription, isLoading, error, cancel, pause, resume, skipNext, refetch: fetch2 };
+}
 
 // src/react/hooks/use-services.ts
 var servicesQuery = createCachedQuery({
@@ -5882,6 +5960,98 @@ function DigitalProductCard({
     ] })
   ] });
 }
+function BundleProductCard({
+  product,
+  onQuickAdd,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const components = product.components || [];
+  const componentCount = components.length;
+  const onSale = isOnSale(product);
+  const discount = getDiscountPercentage(product);
+  const hasVariantChoice = components.some((c) => c.allow_variant_choice);
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-indigo-50 text-indigo-700 border border-indigo-200/60 px-2 py-0.5 rounded-md", children: "Bundle" }),
+      componentCount > 0 && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 right-3 text-[11px] font-semibold tracking-wide bg-background/90 backdrop-blur text-foreground px-2 py-0.5 rounded-md", children: [
+        componentCount,
+        " item",
+        componentCount !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
+      componentCount > 0 && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground mt-1 truncate", children: [
+        "Includes: ",
+        components.map((c) => c.product_name || c.product_id).join(", ")
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2.5", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        onSale && product.bundle_price && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Price, { amount: getBasePrice(product), className: "text-xs text-muted-foreground line-through" }),
+          discount != null && discount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-semibold text-emerald-600", children: [
+            "Save ",
+            discount,
+            "%"
+          ] })
+        ] })
+      ] }),
+      hasVariantChoice && /* @__PURE__ */ jsx("span", { className: "inline-block mt-2 text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: "Customizable" })
+    ] })
+  ] });
+}
+function CompositeProductCard({
+  product,
+  onQuickAdd,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const groups = product.groups || [];
+  const groupCount = groups.length;
+  groups.reduce((sum, g) => sum + g.components.length, 0);
+  const tags = product.tags || [];
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-violet-50 text-violet-700 border border-violet-200/60 px-2 py-0.5 rounded-md", children: "Build Your Own" }),
+      groupCount > 0 && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 right-3 text-[11px] font-semibold tracking-wide bg-background/90 backdrop-blur text-foreground px-2 py-0.5 rounded-md", children: [
+        groupCount,
+        " choice",
+        groupCount !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      groupCount > 0 && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground mt-1 truncate", children: groups.map((g) => g.name).join(" + ") }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold", children: [
+          "From ",
+          /* @__PURE__ */ jsx(Price, { amount: product.default_price })
+        ] }),
+        tags.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tags[0] })
+      ] })
+    ] })
+  ] });
+}
 function formatDuration2(minutes, unit) {
   if (unit && unit !== "minutes") return `${minutes} ${unit}`;
   if (minutes >= 60) {
@@ -6343,6 +6513,8 @@ var CardVariant = /* @__PURE__ */ ((CardVariant2) => {
   CardVariant2["Retail"] = "retail";
   CardVariant2["Wholesale"] = "wholesale";
   CardVariant2["Digital"] = "digital";
+  CardVariant2["Bundle"] = "bundle";
+  CardVariant2["Composite"] = "composite";
   CardVariant2["Standard"] = "standard";
   CardVariant2["Compact"] = "compact";
   CardVariant2["Schedule"] = "schedule";
@@ -6367,11 +6539,19 @@ var BUILT_IN_CARDS = {
   ["rental" /* Rental */]: RentalServiceCard,
   ["accommodation" /* Accommodation */]: AccommodationCard,
   ["lease" /* Lease */]: LeaseServiceCard,
+  ["bundle" /* Bundle */]: BundleProductCard,
+  ["composite" /* Composite */]: CompositeProductCard,
   ["subscription" /* Subscription */]: SubscriptionCard
 };
 var RENTAL_UNITS = /* @__PURE__ */ new Set([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
 var LEASE_UNITS = /* @__PURE__ */ new Set([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
 function resolveCardVariant(product) {
+  if (product.type === PRODUCT_TYPE.Bundle) {
+    return "bundle" /* Bundle */;
+  }
+  if (product.type === PRODUCT_TYPE.Composite) {
+    return "composite" /* Composite */;
+  }
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
@@ -8994,12 +9174,161 @@ function DigitalProductLayout({
     )
   ] });
 }
+function BundleProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const components = product.components || [];
+  const onSale = isOnSale(product);
+  const discount = getDiscountPercentage(product);
+  const baseTotal = components.reduce(
+    (sum, c) => sum + parsePrice(c.effective_price ?? 0) * (c.quantity ?? 1),
+    0
+  );
+  const bundlePrice = parsePrice(product.default_price);
+  const savings = baseTotal > bundlePrice ? baseTotal - bundlePrice : 0;
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "bundle", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-indigo-700 bg-indigo-50 border border-indigo-200/60 px-2.5 py-1 rounded-md", children: "Bundle" }),
+            savings > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-emerald-700 bg-emerald-50 border border-emerald-200/60 px-2.5 py-1 rounded-md", children: [
+              "Save ",
+              discount,
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 mt-2", children: [
+              /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-bold" }),
+              onSale && baseTotal > 0 && /* @__PURE__ */ jsx(Price, { amount: baseTotal, className: "text-lg text-muted-foreground line-through" })
+            ] })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          components.length > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-components": true, className: "space-y-3", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Included in this bundle" }),
+            /* @__PURE__ */ jsx("div", { className: "divide-y divide-border border border-border rounded-lg overflow-hidden", children: components.map((component) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+              component.product_image_url && /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-lg overflow-hidden bg-muted shrink-0", children: /* @__PURE__ */ jsx("img", { src: component.product_image_url, alt: component.product_name, className: "w-full h-full object-cover" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: component.product_name }),
+                component.quantity > 1 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                  "Qty: ",
+                  component.quantity
+                ] }),
+                component.allow_variant_choice && /* @__PURE__ */ jsx("p", { className: "text-xs text-violet-600 font-medium", children: "Choose variant" })
+              ] }),
+              /* @__PURE__ */ jsx(Price, { amount: component.effective_price ?? 0, className: "text-sm text-muted-foreground shrink-0" })
+            ] }, component.id)) })
+          ] }),
+          savings > 0 && /* @__PURE__ */ jsxs("div", { "data-cimplify-bundle-savings": true, className: "flex items-center gap-2 p-3 bg-emerald-50 border border-emerald-200/60 text-sm text-emerald-800", children: [
+            /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) }),
+            "You save ",
+            /* @__PURE__ */ jsx(Price, { amount: savings, className: "font-semibold" }),
+            " with this bundle"
+          ] }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(RelatedProductsSection, { products: relatedProducts })
+  ] });
+}
+function CompositeProductLayout({
+  product,
+  onAddToCart,
+  renderBreadcrumb,
+  relatedProducts,
+  showRelated = true,
+  className
+}) {
+  const images = product.images || (product.image_url ? [product.image_url] : []);
+  const groups = product.groups || [];
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "composite", className: cn("space-y-8", className), children: [
+    renderBreadcrumb?.(product),
+    /* @__PURE__ */ jsx(
+      TwoColumnGrid,
+      {
+        left: /* @__PURE__ */ jsx(
+          ProductImageGallery,
+          {
+            images,
+            productName: product.name
+          }
+        ),
+        right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-violet-700 bg-violet-50 border border-violet-200/60 px-2.5 py-1 rounded-md", children: "Build Your Own" }),
+            groups.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-muted-foreground bg-muted px-2.5 py-1 rounded-md", children: [
+              groups.length,
+              " choice",
+              groups.length !== 1 ? "s" : ""
+            ] }),
+            /* @__PURE__ */ jsx(TagPills, { tags: product.tags || [] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
+            /* @__PURE__ */ jsxs("p", { className: "text-lg text-muted-foreground mt-2", children: [
+              "From ",
+              /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "font-semibold text-foreground" })
+            ] })
+          ] }),
+          product.description && /* @__PURE__ */ jsx("p", { "data-cimplify-product-layout-description": true, className: "text-muted-foreground leading-relaxed", children: product.description }),
+          groups.length > 0 && /* @__PURE__ */ jsx("div", { "data-cimplify-composite-overview": true, className: "flex flex-wrap gap-2", children: groups.map((group) => {
+            const availableCount = group.components.filter((c) => c.is_available && !c.is_archived).length;
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 bg-muted rounded-lg text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium", children: group.name }),
+              /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+                group.min_selections > 0 ? `Pick ${group.min_selections}` : "Optional",
+                ` \xB7 ${availableCount} option${availableCount !== 1 ? "s" : ""}`
+              ] })
+            ] }, group.id);
+          }) }),
+          /* @__PURE__ */ jsx(CustomAttributesTable, { attributes: product.custom_attributes || [] }),
+          /* @__PURE__ */ jsx(
+            ProductCustomizer,
+            {
+              product,
+              onAddToCart
+            }
+          )
+        ] })
+      }
+    ),
+    showRelated && relatedProducts && relatedProducts.length > 0 && /* @__PURE__ */ jsx(RelatedProductsSection, { products: relatedProducts })
+  ] });
+}
 var ProductTemplate = /* @__PURE__ */ ((ProductTemplate2) => {
   ProductTemplate2["Default"] = "default";
   ProductTemplate2["Food"] = "food";
   ProductTemplate2["Wholesale"] = "wholesale";
   ProductTemplate2["Service"] = "service";
   ProductTemplate2["Digital"] = "digital";
+  ProductTemplate2["Bundle"] = "bundle";
+  ProductTemplate2["Composite"] = "composite";
   ProductTemplate2["Physical"] = "physical";
   return ProductTemplate2;
 })(ProductTemplate || {});
@@ -9008,6 +9337,8 @@ var BUILT_IN_LAYOUTS2 = {
   ["wholesale" /* Wholesale */]: WholesaleProductLayout,
   ["service" /* Service */]: ServiceProductLayout,
   ["digital" /* Digital */]: DigitalProductLayout,
+  ["bundle" /* Bundle */]: BundleProductLayout,
+  ["composite" /* Composite */]: CompositeProductLayout,
   ["default" /* Default */]: DefaultProductLayout
 };
 function resolveTemplateKey(product) {
@@ -9015,6 +9346,12 @@ function resolveTemplateKey(product) {
   if (typeof metaTemplate === "string" && metaTemplate.trim()) {
     return metaTemplate.trim();
   }
+  if (product.type === PRODUCT_TYPE.Bundle) {
+    return "bundle" /* Bundle */;
+  }
+  if (product.type === PRODUCT_TYPE.Composite) {
+    return "composite" /* Composite */;
+  }
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
@@ -10603,4 +10940,4 @@ function ResourcePicker({
   );
 }
 
-export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BundleSelector, CardImage, CardShell, CardVariant, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeSelector, CurrencySelector, CustomAttributesTable, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FeaturedCollectionLayout, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, SubscriptionCard, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BundleProductCard, BundleProductLayout, BundleSelector, CardImage, CardShell, CardVariant, CartPage, CartSummary, CartTemplate, CatalogueCollectionLayout, CataloguePage, CatalogueTemplate, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyAccount, CimplifyCheckout, CimplifyProvider, CollectionPage, CollectionTemplate, CompactCartLayout, CompactCatalogueLayout, CompactSearchLayout, CompactServiceCard, CompositeProductCard, CompositeProductLayout, CompositeSelector, CurrencySelector, CustomAttributesTable, DateSlotPicker, DealBanner, DealsPage, DefaultCartLayout, DefaultCatalogueLayout, DefaultCollectionLayout, DefaultProductLayout, DefaultSearchLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FeaturedCollectionLayout, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, SearchTemplate, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, SubscriptionCard, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useSubscription, useSubscriptions, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, v as categorizePaymentError, B as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, y as isPaymentStatusFailure, z as isPaymentStatusRequiresAction, A as isPaymentStatusSuccess, i as isTaxInclusive, F as isValidPhoneForContext, w as normalizePaymentResponse, D as normalizePhoneToE164, x as normalizeStatusResponse, p as parsePrice, E as resolvePhoneCountryCode } from './index-2JxW7TuQ.mjs';
-import './payment-5a21yzi7.mjs';
-import './price-CGPMlQUk.mjs';
+export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, v as categorizePaymentError, B as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, y as isPaymentStatusFailure, z as isPaymentStatusRequiresAction, A as isPaymentStatusSuccess, i as isTaxInclusive, F as isValidPhoneForContext, w as normalizePaymentResponse, D as normalizePhoneToE164, x as normalizeStatusResponse, p as parsePrice, E as resolvePhoneCountryCode } from './index-EGhIxwfI.mjs';
+import './payment-k8feV7r8.mjs';
+import './price-Den0zv61.mjs';
 import 'libphonenumber-js';

package/dist/utils.d.ts

@@ -1,4 +1,4 @@
-export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, v as categorizePaymentError, B as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, y as isPaymentStatusFailure, z as isPaymentStatusRequiresAction, A as isPaymentStatusSuccess, i as isTaxInclusive, F as isValidPhoneForContext, w as normalizePaymentResponse, D as normalizePhoneToE164, x as normalizeStatusResponse, p as parsePrice, E as resolvePhoneCountryCode } from './index-DBM89ktY.js';
-import './payment-5a21yzi7.js';
-import './price-BS0Z5Oi9.js';
+export { C as CURRENCY_SYMBOLS, M as MOBILE_MONEY_PROVIDERS, v as categorizePaymentError, B as detectMobileMoneyProvider, c as formatMoney, d as formatNumberCompact, f as formatPrice, a as formatPriceAdjustment, b as formatPriceCompact, j as formatPriceWithTax, e as formatProductPrice, m as getBasePrice, k as getCurrencySymbol, o as getDiscountPercentage, l as getDisplayPrice, q as getMarkupPercentage, r as getProductCurrency, g as getTaxAmount, h as hasTaxInfo, n as isOnSale, y as isPaymentStatusFailure, z as isPaymentStatusRequiresAction, A as isPaymentStatusSuccess, i as isTaxInclusive, F as isValidPhoneForContext, w as normalizePaymentResponse, D as normalizePhoneToE164, x as normalizeStatusResponse, p as parsePrice, E as resolvePhoneCountryCode } from './index-C2U1gHyP.js';
+import './payment-k8feV7r8.js';
+import './price-4EK-0zF5.js';
 import 'libphonenumber-js';

package/package.json

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

package/registry/product-card.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "product-card.tsx",
-      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from \"@cimplify/sdk\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n  root?: string;\n  imageContainer?: string;\n  image?: string;\n  body?: string;\n  name?: string;\n  description?: string;\n  price?: string;\n  badges?: string;\n  badge?: string;\n  modal?: string;\n  modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n  /** The product to display. */\n  product: Product;\n  /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n  displayMode?: \"card\" | \"page\";\n  /** Explicit card variant. Auto-detected from product data when omitted. */\n  variant?: CardVariant;\n  /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n  cards?: Record<string, React.ComponentType<CardLayoutProps>>;\n  /** Link href for page mode. Default: `/menu/${product.slug}` */\n  href?: string;\n  /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n  renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  /** Custom link renderer for page mode (e.g. Next.js Link). */\n  renderLink?: (props: {\n    href: string;\n    className?: string;\n    children: React.ReactNode;\n  }) => React.ReactElement;\n  /** Called when quick-add button is clicked (if the resolved card supports it). */\n  onQuickAdd?: (product: Product) => void;\n  /** Replace the entire default card body. */\n  children?: React.ReactNode;\n  /** Image aspect ratio. Default: \"4/3\". */\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  className?: string;\n  classNames?: ProductCardClassNames;\n}\n\nconst BUILT_IN_CARDS: Record<string, React.ComponentType<CardLayoutProps>> = {\n  [CardVariant.Food]: FoodProductCard,\n  [CardVariant.Retail]: RetailProductCard,\n  [CardVariant.Wholesale]: WholesaleProductCard,\n  [CardVariant.Digital]: DigitalProductCard,\n  [CardVariant.Standard]: StandardServiceCard,\n  [CardVariant.Rental]: RentalServiceCard,\n  [CardVariant.Accommodation]: AccommodationCard,\n  [CardVariant.Lease]: LeaseServiceCard,\n  [CardVariant.Subscription]: SubscriptionCard,\n};\n\nconst RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);\nconst LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);\n\nfunction resolveCardVariant(product: Product): CardVariant {\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return CardVariant.Wholesale;\n  }\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return CardVariant.Digital;\n  }\n  if (product.type === PRODUCT_TYPE.Service) {\n    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {\n      return CardVariant.Rental;\n    }\n    if (product.duration_unit === DURATION_UNIT.Nights) {\n      return CardVariant.Accommodation;\n    }\n    if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {\n      return CardVariant.Lease;\n    }\n    if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {\n      return CardVariant.Subscription;\n    }\n    return CardVariant.Standard;\n  }\n  if (product.render_hint === RENDER_HINT.Food) {\n    return CardVariant.Food;\n  }\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return CardVariant.Retail;\n  }\n  return CardVariant.Retail;\n}\n\n/**\n * ProductCard — a product display card with two modes:\n *\n * - **card** (default): clickable button that opens a Base UI Dialog modal\n * - **page**: a plain `<a>` link for SEO-friendly product pages\n */\nexport function ProductCard({\n  product,\n  displayMode,\n  variant,\n  cards,\n  href,\n  renderModal,\n  renderImage,\n  renderLink,\n  onQuickAdd,\n  children,\n  aspectRatio = \"4/3\",\n  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [shouldFetch, setShouldFetch] = useState(false);\n\n  // Prefetch on pointer enter, always fetch when open\n  const { product: productDetails } = useProduct(\n    product.slug ?? product.id,\n    { enabled: shouldFetch || isOpen },\n  );\n\n  const handlePrefetch = useCallback(() => {\n    setShouldFetch(true);\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      setShouldFetch(true);\n    }\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const imageUrl = product.image_url || product.images?.[0];\n\n  const cardBody = (() => {\n    if (children) return children;\n\n    // Resolve card variant: slug map → explicit variant → auto-detect\n    const SlugCard = cards?.[product.slug];\n    if (SlugCard) {\n      return <SlugCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    const key = variant ?? resolveCardVariant(product);\n    const ResolvedCard = BUILT_IN_CARDS[key];\n    if (ResolvedCard) {\n      return <ResolvedCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    // Fallback: minimal default\n    return (\n      <>\n        {imageUrl && (\n          <div\n            data-cimplify-product-card-image-container\n            className={cn(\"overflow-hidden rounded-t-xl\", classNames?.imageContainer)}\n            style={ASPECT_STYLES[aspectRatio]}\n          >\n            {renderImage ? (\n              renderImage({ src: imageUrl, alt: product.name, className: classNames?.image })\n            ) : (\n              <img\n                src={imageUrl}\n                alt={product.name}\n                className={cn(\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\", classNames?.image)}\n                data-cimplify-product-card-image\n              />\n            )}\n          </div>\n        )}\n        <div data-cimplify-product-card-body className={cn(\"p-4 flex flex-col gap-1\", classNames?.body)}>\n          <span data-cimplify-product-card-name className={cn(\"font-semibold text-foreground leading-tight\", classNames?.name)}>\n            {product.name}\n          </span>\n          {product.description && (\n            <span data-cimplify-product-card-description className={cn(\"text-sm text-muted-foreground line-clamp-2\", classNames?.description)}>\n              {product.description}\n            </span>\n          )}\n          <Price amount={product.default_price} className={cn(\"text-sm font-medium text-foreground mt-1\", classNames?.price)} />\n        </div>\n      </>\n    );\n  })();\n\n  // Page mode — render as a link\n  if (mode === \"page\") {\n    const linkHref = href ?? `/menu/${product.slug}`;\n    const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n    if (renderLink) {\n      return renderLink({ href: linkHref, className: linkClassName, children: cardBody });\n    }\n\n    return (\n      <a\n        href={linkHref}\n        data-cimplify-product-card\n        data-display-mode=\"page\"\n        className={linkClassName}\n      >\n        {cardBody}\n      </a>\n    );\n  }\n\n  // Card mode — render as Base UI Dialog\n  return (\n    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n      <Dialog.Trigger\n        onPointerEnter={handlePrefetch}\n        data-cimplify-product-card\n        data-display-mode=\"card\"\n        className={cn(\n          \"group block w-full text-left p-0 cursor-pointer font-[inherit] text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\",\n          className,\n          classNames?.root,\n        )}\n      >\n        {cardBody}\n      </Dialog.Trigger>\n\n      <Dialog.Portal>\n        <Dialog.Backdrop\n          data-cimplify-product-card-backdrop\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity\",\n            classNames?.modalOverlay,\n          )}\n        />\n        <Dialog.Popup\n          data-cimplify-product-card-modal\n          className={cn(\n            \"fixed z-50 rounded-2xl p-0 max-w-lg w-full h-fit max-h-[85vh] overflow-auto bg-background shadow-2xl outline-none\",\n            classNames?.modal,\n          )}\n        >\n          {isOpen && (\n            productDetails ? (\n              renderModal ? (\n                renderModal(productDetails, handleClose)\n              ) : (\n                <ProductSheet\n                  product={productDetails}\n                  onClose={handleClose}\n                  renderImage={renderImage}\n                />\n              )\n            ) : (\n              <div\n                data-cimplify-product-card-modal-loading\n                aria-busy=\"true\"\n                className=\"flex flex-col\"\n              >\n                <div className=\"aspect-[5/2] bg-muted animate-pulse\" />\n                <div className=\"p-6 space-y-3\">\n                  <div className=\"h-5 w-3/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-7 w-2/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-4 w-4/5 bg-muted rounded animate-pulse\" />\n                </div>\n                <div className=\"mx-6 border-t border-border pt-4 pb-6\">\n                  <div className=\"h-14 bg-muted rounded-full animate-pulse\" />\n                </div>\n              </div>\n            )\n          )}\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport { Dialog } from \"@base-ui/react/dialog\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { PRODUCT_TYPE, RENDER_HINT, DURATION_UNIT } from \"@cimplify/sdk\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { ProductSheet } from \"@cimplify/sdk/react\";\nimport { CardVariant } from \"@cimplify/sdk/react\";\nimport type { CardLayoutProps } from \"@cimplify/sdk/react\";\nimport { FoodProductCard } from \"@cimplify/sdk/react\";\nimport { RetailProductCard } from \"@cimplify/sdk/react\";\nimport { WholesaleProductCard } from \"@cimplify/sdk/react\";\nimport { DigitalProductCard } from \"@cimplify/sdk/react\";\nimport { StandardServiceCard } from \"@cimplify/sdk/react\";\nimport { RentalServiceCard } from \"@cimplify/sdk/react\";\nimport { AccommodationCard } from \"@cimplify/sdk/react\";\nimport { LeaseServiceCard } from \"@cimplify/sdk/react\";\nimport { SubscriptionCard } from \"@cimplify/sdk/react\";\nimport { BundleProductCard } from \"./cards/bundle-product-card\";\nimport { CompositeProductCard } from \"./cards/composite-product-card\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nconst ASPECT_STYLES: Record<string, React.CSSProperties> = {\n  square: { aspectRatio: \"1/1\" },\n  \"4/3\": { aspectRatio: \"4/3\" },\n  \"16/10\": { aspectRatio: \"16/10\" },\n  \"3/4\": { aspectRatio: \"3/4\" },\n};\n\nexport interface ProductCardClassNames {\n  root?: string;\n  imageContainer?: string;\n  image?: string;\n  body?: string;\n  name?: string;\n  description?: string;\n  price?: string;\n  badges?: string;\n  badge?: string;\n  modal?: string;\n  modalOverlay?: string;\n}\n\nexport interface ProductCardProps {\n  /** The product to display. */\n  product: Product;\n  /** Display mode: \"card\" opens a modal, \"page\" renders as a link. Auto-detected from product.display_mode. */\n  displayMode?: \"card\" | \"page\";\n  /** Explicit card variant. Auto-detected from product data when omitted. */\n  variant?: CardVariant;\n  /** Per-slug card map. Highest priority — maps a product slug to a custom card component. */\n  cards?: Record<string, React.ComponentType<CardLayoutProps>>;\n  /** Link href for page mode. Default: `/menu/${product.slug}` */\n  href?: string;\n  /** Custom modal content renderer. Receives the fully-loaded product and a close callback. */\n  renderModal?: (product: ProductWithDetails, onClose: () => void) => React.ReactNode;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: {\n    src: string;\n    alt: string;\n    className?: string;\n  }) => React.ReactNode;\n  /** Custom link renderer for page mode (e.g. Next.js Link). */\n  renderLink?: (props: {\n    href: string;\n    className?: string;\n    children: React.ReactNode;\n  }) => React.ReactElement;\n  /** Called when quick-add button is clicked (if the resolved card supports it). */\n  onQuickAdd?: (product: Product) => void;\n  /** Replace the entire default card body. */\n  children?: React.ReactNode;\n  /** Image aspect ratio. Default: \"4/3\". */\n  aspectRatio?: \"square\" | \"4/3\" | \"16/10\" | \"3/4\";\n  className?: string;\n  classNames?: ProductCardClassNames;\n}\n\nconst BUILT_IN_CARDS: Record<string, React.ComponentType<CardLayoutProps>> = {\n  [CardVariant.Food]: FoodProductCard,\n  [CardVariant.Retail]: RetailProductCard,\n  [CardVariant.Wholesale]: WholesaleProductCard,\n  [CardVariant.Digital]: DigitalProductCard,\n  [CardVariant.Standard]: StandardServiceCard,\n  [CardVariant.Rental]: RentalServiceCard,\n  [CardVariant.Accommodation]: AccommodationCard,\n  [CardVariant.Lease]: LeaseServiceCard,\n  [CardVariant.Bundle]: BundleProductCard,\n  [CardVariant.Composite]: CompositeProductCard,\n  [CardVariant.Subscription]: SubscriptionCard,\n};\n\nconst RENTAL_UNITS = new Set<string>([DURATION_UNIT.Days, DURATION_UNIT.Hours]);\nconst LEASE_UNITS = new Set<string>([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);\n\nfunction resolveCardVariant(product: Product): CardVariant {\n  if (product.type === PRODUCT_TYPE.Bundle) {\n    return CardVariant.Bundle;\n  }\n  if (product.type === PRODUCT_TYPE.Composite) {\n    return CardVariant.Composite;\n  }\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return CardVariant.Wholesale;\n  }\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return CardVariant.Digital;\n  }\n  if (product.type === PRODUCT_TYPE.Service) {\n    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {\n      return CardVariant.Rental;\n    }\n    if (product.duration_unit === DURATION_UNIT.Nights) {\n      return CardVariant.Accommodation;\n    }\n    if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {\n      return CardVariant.Lease;\n    }\n    if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {\n      return CardVariant.Subscription;\n    }\n    return CardVariant.Standard;\n  }\n  if (product.render_hint === RENDER_HINT.Food) {\n    return CardVariant.Food;\n  }\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return CardVariant.Retail;\n  }\n  return CardVariant.Retail;\n}\n\n/**\n * ProductCard — a product display card with two modes:\n *\n * - **card** (default): clickable button that opens a Base UI Dialog modal\n * - **page**: a plain `<a>` link for SEO-friendly product pages\n */\nexport function ProductCard({\n  product,\n  displayMode,\n  variant,\n  cards,\n  href,\n  renderModal,\n  renderImage,\n  renderLink,\n  onQuickAdd,\n  children,\n  aspectRatio = \"4/3\",\n  className,\n  classNames,\n}: ProductCardProps): React.ReactElement {\n  const mode = displayMode ?? product.display_mode ?? \"card\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [shouldFetch, setShouldFetch] = useState(false);\n\n  // Prefetch on pointer enter, always fetch when open\n  const { product: productDetails } = useProduct(\n    product.slug ?? product.id,\n    { enabled: shouldFetch || isOpen },\n  );\n\n  const handlePrefetch = useCallback(() => {\n    setShouldFetch(true);\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    setIsOpen(open);\n    if (open) {\n      setShouldFetch(true);\n    }\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false);\n  }, []);\n\n  const imageUrl = product.image_url || product.images?.[0];\n\n  const cardBody = (() => {\n    if (children) return children;\n\n    // Resolve card variant: slug map → explicit variant → auto-detect\n    const SlugCard = cards?.[product.slug];\n    if (SlugCard) {\n      return <SlugCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    const key = variant ?? resolveCardVariant(product);\n    const ResolvedCard = BUILT_IN_CARDS[key];\n    if (ResolvedCard) {\n      return <ResolvedCard product={product} onQuickAdd={onQuickAdd} renderImage={renderImage} renderLink={renderLink} />;\n    }\n\n    // Fallback: minimal default\n    return (\n      <>\n        {imageUrl && (\n          <div\n            data-cimplify-product-card-image-container\n            className={cn(\"overflow-hidden rounded-t-xl\", classNames?.imageContainer)}\n            style={ASPECT_STYLES[aspectRatio]}\n          >\n            {renderImage ? (\n              renderImage({ src: imageUrl, alt: product.name, className: classNames?.image })\n            ) : (\n              <img\n                src={imageUrl}\n                alt={product.name}\n                className={cn(\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\", classNames?.image)}\n                data-cimplify-product-card-image\n              />\n            )}\n          </div>\n        )}\n        <div data-cimplify-product-card-body className={cn(\"p-4 flex flex-col gap-1\", classNames?.body)}>\n          <span data-cimplify-product-card-name className={cn(\"font-semibold text-foreground leading-tight\", classNames?.name)}>\n            {product.name}\n          </span>\n          {product.description && (\n            <span data-cimplify-product-card-description className={cn(\"text-sm text-muted-foreground line-clamp-2\", classNames?.description)}>\n              {product.description}\n            </span>\n          )}\n          <Price amount={product.default_price} className={cn(\"text-sm font-medium text-foreground mt-1\", classNames?.price)} />\n        </div>\n      </>\n    );\n  })();\n\n  // Page mode — render as a link\n  if (mode === \"page\") {\n    const linkHref = href ?? `/menu/${product.slug}`;\n    const linkClassName = cn(\"group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\", className, classNames?.root);\n\n    if (renderLink) {\n      return renderLink({ href: linkHref, className: linkClassName, children: cardBody });\n    }\n\n    return (\n      <a\n        href={linkHref}\n        data-cimplify-product-card\n        data-display-mode=\"page\"\n        className={linkClassName}\n      >\n        {cardBody}\n      </a>\n    );\n  }\n\n  // Card mode — render as Base UI Dialog\n  return (\n    <Dialog.Root open={isOpen} onOpenChange={handleOpenChange}>\n      <Dialog.Trigger\n        onPointerEnter={handlePrefetch}\n        data-cimplify-product-card\n        data-display-mode=\"card\"\n        className={cn(\n          \"group block w-full text-left p-0 cursor-pointer font-[inherit] text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md\",\n          className,\n          classNames?.root,\n        )}\n      >\n        {cardBody}\n      </Dialog.Trigger>\n\n      <Dialog.Portal>\n        <Dialog.Backdrop\n          data-cimplify-product-card-backdrop\n          className={cn(\n            \"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-opacity\",\n            classNames?.modalOverlay,\n          )}\n        />\n        <Dialog.Popup\n          data-cimplify-product-card-modal\n          className={cn(\n            \"fixed z-50 rounded-2xl p-0 max-w-lg w-full h-fit max-h-[85vh] overflow-auto bg-background shadow-2xl outline-none\",\n            classNames?.modal,\n          )}\n        >\n          {isOpen && (\n            productDetails ? (\n              renderModal ? (\n                renderModal(productDetails, handleClose)\n              ) : (\n                <ProductSheet\n                  product={productDetails}\n                  onClose={handleClose}\n                  renderImage={renderImage}\n                />\n              )\n            ) : (\n              <div\n                data-cimplify-product-card-modal-loading\n                aria-busy=\"true\"\n                className=\"flex flex-col\"\n              >\n                <div className=\"aspect-[5/2] bg-muted animate-pulse\" />\n                <div className=\"p-6 space-y-3\">\n                  <div className=\"h-5 w-3/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-7 w-2/5 bg-muted rounded animate-pulse\" />\n                  <div className=\"h-4 w-4/5 bg-muted rounded animate-pulse\" />\n                </div>\n                <div className=\"mx-6 border-t border-border pt-4 pb-6\">\n                  <div className=\"h-14 bg-muted rounded-full animate-pulse\" />\n                </div>\n              </div>\n            )\n          )}\n        </Dialog.Popup>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n"
     }
   ]
 }

package/registry/product-page.json

@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "product-page.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { PRODUCT_TYPE, RENDER_HINT } from \"@cimplify/sdk\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport { DefaultProductLayout } from \"@cimplify/sdk/react\";\nimport { FoodProductLayout } from \"@cimplify/sdk/react\";\nimport { WholesaleProductLayout } from \"@cimplify/sdk/react\";\nimport { ServiceProductLayout } from \"@cimplify/sdk/react\";\nimport { DigitalProductLayout } from \"@cimplify/sdk/react\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport type { ProductLayoutProps };\n\nexport enum ProductTemplate {\n  Default = \"default\",\n  Food = \"food\",\n  Wholesale = \"wholesale\",\n  Service = \"service\",\n  Digital = \"digital\",\n  Physical = \"physical\",\n}\n\nexport interface ProductPageClassNames {\n  root?: string;\n  loading?: string;\n}\n\nexport interface ProductPageProps {\n  /** Product slug or ID — used for client-side fetch when `product` is not provided. */\n  productId?: string;\n  /** Pre-fetched product for SSR. Skips client-side fetch when provided. */\n  product?: ProductWithDetails;\n  /** Per-slug page map. Highest priority — maps a product slug to a custom component. */\n  pages?: Record<string, React.ComponentType<ProductLayoutProps>>;\n  /** Per-type template map. Overrides built-in layouts for specific template keys. */\n  templates?: Partial<Record<ProductTemplate | string, React.ComponentType<ProductLayoutProps>>>;\n  /** Override add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Breadcrumb renderer. Receives the product for context. */\n  renderBreadcrumb?: (product: ProductWithDetails) => React.ReactNode;\n  /** Pre-fetched related products. */\n  relatedProducts?: Product[];\n  /** Show related products section. Default: true. */\n  showRelated?: boolean;\n  className?: string;\n  classNames?: ProductPageClassNames;\n}\n\nconst BUILT_IN_LAYOUTS: Record<string, React.ComponentType<ProductLayoutProps>> = {\n  [ProductTemplate.Food]: FoodProductLayout,\n  [ProductTemplate.Wholesale]: WholesaleProductLayout,\n  [ProductTemplate.Service]: ServiceProductLayout,\n  [ProductTemplate.Digital]: DigitalProductLayout,\n  [ProductTemplate.Default]: DefaultProductLayout,\n};\n\nfunction resolveTemplateKey(product: ProductWithDetails): ProductTemplate | string {\n  const metaTemplate = product.metadata?.page_template;\n  if (typeof metaTemplate === \"string\" && metaTemplate.trim()) {\n    return metaTemplate.trim();\n  }\n\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return ProductTemplate.Wholesale;\n  }\n\n  if (product.type === PRODUCT_TYPE.Service) {\n    return ProductTemplate.Service;\n  }\n\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return ProductTemplate.Digital;\n  }\n\n  if (product.render_hint === RENDER_HINT.Food) {\n    return ProductTemplate.Food;\n  }\n\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return ProductTemplate.Physical;\n  }\n\n  return ProductTemplate.Default;\n}\n\nfunction resolveLayout(\n  product: ProductWithDetails,\n  pages?: Record<string, React.ComponentType<ProductLayoutProps>>,\n  templates?: Partial<Record<string, React.ComponentType<ProductLayoutProps>>>,\n): React.ComponentType<ProductLayoutProps> {\n  // 1. Per-slug page (AI-generated, highest priority)\n  if (pages?.[product.slug]) {\n    return pages[product.slug];\n  }\n\n  const key = resolveTemplateKey(product);\n\n  // 2. Consumer-provided template override\n  if (templates?.[key]) {\n    return templates[key];\n  }\n\n  // 3. Built-in layout\n  if (BUILT_IN_LAYOUTS[key]) {\n    return BUILT_IN_LAYOUTS[key];\n  }\n\n  // 4. Fallback\n  return DefaultProductLayout;\n}\n\nexport function ProductPage({\n  productId,\n  product: productProp,\n  pages,\n  templates,\n  onAddToCart,\n  renderImage,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n  classNames,\n}: ProductPageProps): React.ReactElement {\n  const resolvedId = productId || productProp?.slug || productProp?.id || \"\";\n  const { product: fetched, isLoading } = useProduct(resolvedId, {\n    enabled: !productProp && resolvedId.length > 0,\n  });\n  const product = productProp ?? fetched;\n\n  if (isLoading && !product) {\n    return (\n      <div\n        data-cimplify-product-page\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div className=\"grid lg:grid-cols-2 gap-8 lg:gap-12 animate-pulse\">\n          <div className=\"aspect-square bg-muted\" />\n          <div className=\"space-y-4 py-4\">\n            <div className=\"h-8 w-3/5 bg-muted\" />\n            <div className=\"h-6 w-2/5 bg-muted\" />\n            <div className=\"h-4 w-4/5 bg-muted\" />\n            <div className=\"h-4 w-3/5 bg-muted\" />\n            <div className=\"h-14 w-full bg-muted mt-8\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (!product) {\n    return (\n      <div data-cimplify-product-page className={cn(className, classNames?.root)}>\n        <p className=\"text-muted-foreground\">Product not found.</p>\n      </div>\n    );\n  }\n\n  const Layout = resolveLayout(product, pages, templates);\n\n  return (\n    <div data-cimplify-product-page className={cn(className, classNames?.root)}>\n      <Layout\n        product={product}\n        onAddToCart={onAddToCart}\n        renderImage={renderImage}\n        renderBreadcrumb={renderBreadcrumb}\n        relatedProducts={relatedProducts}\n        showRelated={showRelated}\n      />\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Product, ProductWithDetails } from \"@cimplify/sdk\";\nimport { PRODUCT_TYPE, RENDER_HINT } from \"@cimplify/sdk\";\nimport type { ProductLayoutProps } from \"@cimplify/sdk/react\";\nimport { DefaultProductLayout } from \"@cimplify/sdk/react\";\nimport { FoodProductLayout } from \"@cimplify/sdk/react\";\nimport { WholesaleProductLayout } from \"@cimplify/sdk/react\";\nimport { ServiceProductLayout } from \"@cimplify/sdk/react\";\nimport { DigitalProductLayout } from \"@cimplify/sdk/react\";\nimport { BundleProductLayout } from \"./layouts/bundle-product-layout\";\nimport { CompositeProductLayout } from \"./layouts/composite-product-layout\";\nimport type { AddToCartOptions } from \"@cimplify/sdk/react\";\nimport { useProduct } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport type { ProductLayoutProps };\n\nexport enum ProductTemplate {\n  Default = \"default\",\n  Food = \"food\",\n  Wholesale = \"wholesale\",\n  Service = \"service\",\n  Digital = \"digital\",\n  Bundle = \"bundle\",\n  Composite = \"composite\",\n  Physical = \"physical\",\n}\n\nexport interface ProductPageClassNames {\n  root?: string;\n  loading?: string;\n}\n\nexport interface ProductPageProps {\n  /** Product slug or ID — used for client-side fetch when `product` is not provided. */\n  productId?: string;\n  /** Pre-fetched product for SSR. Skips client-side fetch when provided. */\n  product?: ProductWithDetails;\n  /** Per-slug page map. Highest priority — maps a product slug to a custom component. */\n  pages?: Record<string, React.ComponentType<ProductLayoutProps>>;\n  /** Per-type template map. Overrides built-in layouts for specific template keys. */\n  templates?: Partial<Record<ProductTemplate | string, React.ComponentType<ProductLayoutProps>>>;\n  /** Override add-to-cart behavior. */\n  onAddToCart?: (\n    product: ProductWithDetails,\n    quantity: number,\n    options: AddToCartOptions,\n  ) => void | Promise<void>;\n  /** Custom image renderer (e.g. Next.js Image). */\n  renderImage?: (props: { src: string; alt: string; className?: string }) => React.ReactNode;\n  /** Breadcrumb renderer. Receives the product for context. */\n  renderBreadcrumb?: (product: ProductWithDetails) => React.ReactNode;\n  /** Pre-fetched related products. */\n  relatedProducts?: Product[];\n  /** Show related products section. Default: true. */\n  showRelated?: boolean;\n  className?: string;\n  classNames?: ProductPageClassNames;\n}\n\nconst BUILT_IN_LAYOUTS: Record<string, React.ComponentType<ProductLayoutProps>> = {\n  [ProductTemplate.Food]: FoodProductLayout,\n  [ProductTemplate.Wholesale]: WholesaleProductLayout,\n  [ProductTemplate.Service]: ServiceProductLayout,\n  [ProductTemplate.Digital]: DigitalProductLayout,\n  [ProductTemplate.Bundle]: BundleProductLayout,\n  [ProductTemplate.Composite]: CompositeProductLayout,\n  [ProductTemplate.Default]: DefaultProductLayout,\n};\n\nfunction resolveTemplateKey(product: ProductWithDetails): ProductTemplate | string {\n  const metaTemplate = product.metadata?.page_template;\n  if (typeof metaTemplate === \"string\" && metaTemplate.trim()) {\n    return metaTemplate.trim();\n  }\n\n  if (product.type === PRODUCT_TYPE.Bundle) {\n    return ProductTemplate.Bundle;\n  }\n\n  if (product.type === PRODUCT_TYPE.Composite) {\n    return ProductTemplate.Composite;\n  }\n\n  if (product.quantity_pricing && product.quantity_pricing.length > 1) {\n    return ProductTemplate.Wholesale;\n  }\n\n  if (product.type === PRODUCT_TYPE.Service) {\n    return ProductTemplate.Service;\n  }\n\n  if (product.type === PRODUCT_TYPE.Digital) {\n    return ProductTemplate.Digital;\n  }\n\n  if (product.render_hint === RENDER_HINT.Food) {\n    return ProductTemplate.Food;\n  }\n\n  if (product.render_hint === RENDER_HINT.Physical) {\n    return ProductTemplate.Physical;\n  }\n\n  return ProductTemplate.Default;\n}\n\nfunction resolveLayout(\n  product: ProductWithDetails,\n  pages?: Record<string, React.ComponentType<ProductLayoutProps>>,\n  templates?: Partial<Record<string, React.ComponentType<ProductLayoutProps>>>,\n): React.ComponentType<ProductLayoutProps> {\n  // 1. Per-slug page (AI-generated, highest priority)\n  if (pages?.[product.slug]) {\n    return pages[product.slug];\n  }\n\n  const key = resolveTemplateKey(product);\n\n  // 2. Consumer-provided template override\n  if (templates?.[key]) {\n    return templates[key];\n  }\n\n  // 3. Built-in layout\n  if (BUILT_IN_LAYOUTS[key]) {\n    return BUILT_IN_LAYOUTS[key];\n  }\n\n  // 4. Fallback\n  return DefaultProductLayout;\n}\n\nexport function ProductPage({\n  productId,\n  product: productProp,\n  pages,\n  templates,\n  onAddToCart,\n  renderImage,\n  renderBreadcrumb,\n  relatedProducts,\n  showRelated = true,\n  className,\n  classNames,\n}: ProductPageProps): React.ReactElement {\n  const resolvedId = productId || productProp?.slug || productProp?.id || \"\";\n  const { product: fetched, isLoading } = useProduct(resolvedId, {\n    enabled: !productProp && resolvedId.length > 0,\n  });\n  const product = productProp ?? fetched;\n\n  if (isLoading && !product) {\n    return (\n      <div\n        data-cimplify-product-page\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div className=\"grid lg:grid-cols-2 gap-8 lg:gap-12 animate-pulse\">\n          <div className=\"aspect-square bg-muted\" />\n          <div className=\"space-y-4 py-4\">\n            <div className=\"h-8 w-3/5 bg-muted\" />\n            <div className=\"h-6 w-2/5 bg-muted\" />\n            <div className=\"h-4 w-4/5 bg-muted\" />\n            <div className=\"h-4 w-3/5 bg-muted\" />\n            <div className=\"h-14 w-full bg-muted mt-8\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  if (!product) {\n    return (\n      <div data-cimplify-product-page className={cn(className, classNames?.root)}>\n        <p className=\"text-muted-foreground\">Product not found.</p>\n      </div>\n    );\n  }\n\n  const Layout = resolveLayout(product, pages, templates);\n\n  return (\n    <div data-cimplify-product-page className={cn(className, classNames?.root)}>\n      <Layout\n        product={product}\n        onAddToCart={onAddToCart}\n        renderImage={renderImage}\n        renderBreadcrumb={renderBreadcrumb}\n        relatedProducts={relatedProducts}\n        showRelated={showRelated}\n      />\n    </div>\n  );\n}\n"
     }
   ]
 }