@cimplify/sdk 0.20.1 → 0.21.0

package/dist/react.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { getVariantDisplayName, createCimplifyClient } from './chunk-676BJ3EU.mjs';
-export { getVariantDisplayName } from './chunk-676BJ3EU.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-7KH2XJIW.mjs';
-import { isSupportedCurrency, formatPrice, parsePrice, isOnSale, getDiscountPercentage, getBasePrice } from './chunk-HG7GG3TT.mjs';
+import { getVariantDisplayName, createCimplifyClient } from './chunk-W3DMONZR.mjs';
+export { getVariantDisplayName } from './chunk-W3DMONZR.mjs';
+import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-R4EYMPSN.mjs';
+import { isSupportedCurrency, formatPrice, parsePrice, isOnSale, getDiscountPercentage, getBasePrice } from './chunk-JFT63H34.mjs';
 import React3, { createContext, useContext, useState, useEffect, useRef, useMemo, useSyncExternalStore, useCallback, useId } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { NumberField } from '@base-ui/react/number-field';
@@ -374,7 +374,7 @@ function transformToCheckoutCart(cart, fx) {
   };
 }
 var CART_STORAGE_PREFIX = "cimplify:cart:v2";
-var DEFAULT_TAX_RATE = 0.08875;
+var DEFAULT_TAX_RATE = 0;
 var cartStores = /* @__PURE__ */ new Map();
 function clearAllCartStores() {
   for (const [, store] of cartStores) {
@@ -887,6 +887,14 @@ function createCartStore(params) {
     await initializePromise;
     initializePromise = null;
   }
+  async function reorder(orderId) {
+    const result = await client.cart.reorderFromOrder(orderId);
+    if (!result.ok) {
+      throw result.error;
+    }
+    await sync();
+    return result.value;
+  }
   return {
     subscribe(listener) {
       listeners.add(listener);
@@ -902,7 +910,8 @@ function createCartStore(params) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 function getStoreKey(client, locationId, isDemoMode) {
@@ -983,6 +992,12 @@ function useCart(options = {}) {
       throw syncError;
     }
   }, [store]);
+  const reorder = useCallback(
+    async (orderId) => {
+      return store.reorder(orderId);
+    },
+    [store]
+  );
   const itemCount = useMemo(
     () => snapshot.items.reduce((sum, item) => sum + item.quantity, 0),
     [snapshot.items]
@@ -1000,7 +1015,8 @@ function useCart(options = {}) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
@@ -1691,6 +1707,7 @@ function useProducts(options = {}) {
   const previousLocationIdRef = useRef(locationId);
   const requestIdRef = useRef(0);
   const tagsSignature = options.tags?.join(",") ?? "";
+  const propertiesSignature = options.properties ? JSON.stringify(options.properties) : "";
   const queryOptions = useMemo(
     () => ({
       category: options.category,
@@ -1720,7 +1737,7 @@ function useProducts(options = {}) {
       options.min_price,
       options.max_price,
       options.page,
-      options.properties
+      propertiesSignature
     ]
   );
   const cacheKey = useMemo(
@@ -2002,6 +2019,7 @@ function useCategories(options = {}) {
   }, [cacheKey, load]);
   return { categories, isLoading, error, refetch };
 }
+var TERMINAL_STATUSES = /* @__PURE__ */ new Set(["completed", "cancelled", "refunded"]);
 var orderCache = /* @__PURE__ */ new Map();
 var orderInflight = /* @__PURE__ */ new Map();
 function buildOrderCacheKey(client, orderId) {
@@ -2018,6 +2036,9 @@ function useOrder(orderId, options = {}) {
   const poll = options.poll ?? false;
   const pollInterval = options.pollInterval ?? 5e3;
   const requestIdRef = useRef(0);
+  const previousStatusRef = useRef(null);
+  const onStatusChangeRef = useRef(options.onStatusChange);
+  onStatusChangeRef.current = options.onStatusChange;
   const cacheKey = useMemo(
     () => buildOrderCacheKey(client, normalizedOrderId),
     [client, normalizedOrderId]
@@ -2068,6 +2089,12 @@ function useOrder(orderId, options = {}) {
         if (nextRequestId === requestIdRef.current) {
           setOrder(value);
           setError(null);
+          if (value && previousStatusRef.current !== null && previousStatusRef.current !== value.status) {
+            onStatusChangeRef.current?.(previousStatusRef.current, value.status, value);
+          }
+          if (value) {
+            previousStatusRef.current = value.status;
+          }
         }
       } catch (loadError) {
         if (nextRequestId === requestIdRef.current) {
@@ -2084,8 +2111,9 @@ function useOrder(orderId, options = {}) {
   useEffect(() => {
     void load(false);
   }, [load]);
+  const isTerminal = order ? TERMINAL_STATUSES.has(order.status) : false;
   useEffect(() => {
-    if (!poll || !enabled || normalizedOrderId.length === 0) {
+    if (!poll || !enabled || normalizedOrderId.length === 0 || isTerminal) {
       return;
     }
     const timer = window.setInterval(() => {
@@ -2094,12 +2122,12 @@ function useOrder(orderId, options = {}) {
     return () => {
       window.clearInterval(timer);
     };
-  }, [enabled, load, normalizedOrderId, poll, pollInterval]);
+  }, [enabled, isTerminal, load, normalizedOrderId, poll, pollInterval]);
   const refetch = useCallback(async () => {
     orderCache.delete(cacheKey);
     await load(true);
   }, [cacheKey, load]);
-  return { order, isLoading, error, refetch };
+  return { order, isLoading, error, refetch, isTerminal };
 }
 var LOCATION_STORAGE_KEY2 = "cimplify_location_id";
 function readStoredLocationId() {
@@ -7517,12 +7545,15 @@ function OrderSummary({
   orderId,
   poll = false,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   className,
   classNames
 }) {
   const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {
     enabled: !orderProp && !!orderId,
-    poll
+    poll,
+    onStatusChange
   });
   const order = orderProp ?? fetched;
   if (isLoading && !order) {
@@ -7688,6 +7719,16 @@ function OrderSummary({
         className: classNames?.trackingLink,
         children: "Track your order"
       }
+    ),
+    onReorder && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onReorder(order),
+        "data-cimplify-order-reorder": true,
+        className: classNames?.reorderButton,
+        children: "Reorder"
+      }
     )
   ] });
 }
@@ -7711,6 +7752,7 @@ function OrderHistory({
   limit,
   onOrderClick,
   renderOrder,
+  onReorder,
   emptyMessage = "No orders yet",
   className,
   classNames
@@ -7782,7 +7824,20 @@ function OrderHistory({
             order.total_quantity === 1 ? "item" : "items"
           ] }),
           /* @__PURE__ */ jsx("span", { "data-cimplify-order-history-total": true, className: classNames?.total, children: /* @__PURE__ */ jsx(Price, { amount: order.total_price }) })
-        ] })
+        ] }),
+        onReorder && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onReorder(order);
+            },
+            "data-cimplify-order-reorder": true,
+            className: classNames?.reorderButton,
+            children: "Reorder"
+          }
+        )
       ] })
     },
     order.id
@@ -8974,6 +9029,8 @@ function OrderDetailPage({
   poll = true,
   onBack,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   backLabel = "Back to orders",
   className,
   classNames
@@ -8998,7 +9055,9 @@ function OrderDetailPage({
         order,
         orderId: order ? void 0 : orderId,
         poll,
-        renderLineItem
+        renderLineItem,
+        onReorder,
+        onStatusChange
       }
     ) })
   ] });
@@ -9014,6 +9073,7 @@ function OrderHistoryPage({
   orders: ordersProp,
   limit = 20,
   onOrderNavigate,
+  onReorder,
   showFilters = true,
   renderOrder,
   className,
@@ -9051,7 +9111,7 @@ function OrderHistoryPage({
           children: "Back to orders"
         }
       ),
-      /* @__PURE__ */ jsx(OrderSummary, { order: selectedOrder })
+      /* @__PURE__ */ jsx(OrderSummary, { order: selectedOrder, onReorder })
     ] }) });
   }
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: [
@@ -9074,7 +9134,8 @@ function OrderHistoryPage({
         status: statusFilter,
         limit,
         onOrderClick: handleOrderClick,
-        renderOrder
+        renderOrder,
+        onReorder
       }
     ) })
   ] });

package/dist/utils.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkS6TU55KP_js = require('./chunk-S6TU55KP.js');
-var chunk2BSYTQAY_js = require('./chunk-2BSYTQAY.js');
+var chunk64OCG2TJ_js = require('./chunk-64OCG2TJ.js');
 
 
 
@@ -19,109 +19,109 @@ Object.defineProperty(exports, "resolvePhoneCountryCode", {
 });
 Object.defineProperty(exports, "CURRENCY_SYMBOLS", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.CURRENCY_SYMBOLS; }
+  get: function () { return chunk64OCG2TJ_js.CURRENCY_SYMBOLS; }
 });
 Object.defineProperty(exports, "MOBILE_MONEY_PROVIDERS", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.MOBILE_MONEY_PROVIDERS; }
+  get: function () { return chunk64OCG2TJ_js.MOBILE_MONEY_PROVIDERS; }
 });
 Object.defineProperty(exports, "categorizePaymentError", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.categorizePaymentError; }
+  get: function () { return chunk64OCG2TJ_js.categorizePaymentError; }
 });
 Object.defineProperty(exports, "detectMobileMoneyProvider", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.detectMobileMoneyProvider; }
+  get: function () { return chunk64OCG2TJ_js.detectMobileMoneyProvider; }
 });
 Object.defineProperty(exports, "formatMoney", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatMoney; }
+  get: function () { return chunk64OCG2TJ_js.formatMoney; }
 });
 Object.defineProperty(exports, "formatNumberCompact", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatNumberCompact; }
+  get: function () { return chunk64OCG2TJ_js.formatNumberCompact; }
 });
 Object.defineProperty(exports, "formatPrice", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatPrice; }
+  get: function () { return chunk64OCG2TJ_js.formatPrice; }
 });
 Object.defineProperty(exports, "formatPriceAdjustment", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatPriceAdjustment; }
+  get: function () { return chunk64OCG2TJ_js.formatPriceAdjustment; }
 });
 Object.defineProperty(exports, "formatPriceCompact", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatPriceCompact; }
+  get: function () { return chunk64OCG2TJ_js.formatPriceCompact; }
 });
 Object.defineProperty(exports, "formatPriceWithTax", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatPriceWithTax; }
+  get: function () { return chunk64OCG2TJ_js.formatPriceWithTax; }
 });
 Object.defineProperty(exports, "formatProductPrice", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.formatProductPrice; }
+  get: function () { return chunk64OCG2TJ_js.formatProductPrice; }
 });
 Object.defineProperty(exports, "getBasePrice", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getBasePrice; }
+  get: function () { return chunk64OCG2TJ_js.getBasePrice; }
 });
 Object.defineProperty(exports, "getCurrencySymbol", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getCurrencySymbol; }
+  get: function () { return chunk64OCG2TJ_js.getCurrencySymbol; }
 });
 Object.defineProperty(exports, "getDiscountPercentage", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getDiscountPercentage; }
+  get: function () { return chunk64OCG2TJ_js.getDiscountPercentage; }
 });
 Object.defineProperty(exports, "getDisplayPrice", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getDisplayPrice; }
+  get: function () { return chunk64OCG2TJ_js.getDisplayPrice; }
 });
 Object.defineProperty(exports, "getMarkupPercentage", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getMarkupPercentage; }
+  get: function () { return chunk64OCG2TJ_js.getMarkupPercentage; }
 });
 Object.defineProperty(exports, "getProductCurrency", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getProductCurrency; }
+  get: function () { return chunk64OCG2TJ_js.getProductCurrency; }
 });
 Object.defineProperty(exports, "getTaxAmount", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.getTaxAmount; }
+  get: function () { return chunk64OCG2TJ_js.getTaxAmount; }
 });
 Object.defineProperty(exports, "hasTaxInfo", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.hasTaxInfo; }
+  get: function () { return chunk64OCG2TJ_js.hasTaxInfo; }
 });
 Object.defineProperty(exports, "isOnSale", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.isOnSale; }
+  get: function () { return chunk64OCG2TJ_js.isOnSale; }
 });
 Object.defineProperty(exports, "isPaymentStatusFailure", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.isPaymentStatusFailure; }
+  get: function () { return chunk64OCG2TJ_js.isPaymentStatusFailure; }
 });
 Object.defineProperty(exports, "isPaymentStatusRequiresAction", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.isPaymentStatusRequiresAction; }
+  get: function () { return chunk64OCG2TJ_js.isPaymentStatusRequiresAction; }
 });
 Object.defineProperty(exports, "isPaymentStatusSuccess", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.isPaymentStatusSuccess; }
+  get: function () { return chunk64OCG2TJ_js.isPaymentStatusSuccess; }
 });
 Object.defineProperty(exports, "isTaxInclusive", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.isTaxInclusive; }
+  get: function () { return chunk64OCG2TJ_js.isTaxInclusive; }
 });
 Object.defineProperty(exports, "normalizePaymentResponse", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.normalizePaymentResponse; }
+  get: function () { return chunk64OCG2TJ_js.normalizePaymentResponse; }
 });
 Object.defineProperty(exports, "normalizeStatusResponse", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.normalizeStatusResponse; }
+  get: function () { return chunk64OCG2TJ_js.normalizeStatusResponse; }
 });
 Object.defineProperty(exports, "parsePrice", {
   enumerable: true,
-  get: function () { return chunk2BSYTQAY_js.parsePrice; }
+  get: function () { return chunk64OCG2TJ_js.parsePrice; }
 });

package/dist/utils.mjs

@@ -1,2 +1,2 @@
 export { isValidPhoneForContext, normalizePhoneToE164, resolvePhoneCountryCode } from './chunk-WDIMISRC.mjs';
-export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-HG7GG3TT.mjs';
+export { CURRENCY_SYMBOLS, MOBILE_MONEY_PROVIDERS, categorizePaymentError, detectMobileMoneyProvider, formatMoney, formatNumberCompact, formatPrice, formatPriceAdjustment, formatPriceCompact, formatPriceWithTax, formatProductPrice, getBasePrice, getCurrencySymbol, getDiscountPercentage, getDisplayPrice, getMarkupPercentage, getProductCurrency, getTaxAmount, hasTaxInfo, isOnSale, isPaymentStatusFailure, isPaymentStatusRequiresAction, isPaymentStatusSuccess, isTaxInclusive, normalizePaymentResponse, normalizeStatusResponse, parsePrice } from './chunk-JFT63H34.mjs';

package/package.json

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

package/registry/order-detail-page.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-detail-page.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem } from \"@cimplify/sdk\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderDetailPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  backButton?: string;\n  summary?: string;\n}\n\nexport interface OrderDetailPageProps {\n  /** Order ID to display. */\n  orderId: string;\n  /** Pre-fetched order for SSR. */\n  order?: Order;\n  /** Poll for status updates. Default: true. */\n  poll?: boolean;\n  /** Called when back button is clicked. */\n  onBack?: () => void;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Back button label. */\n  backLabel?: string;\n  className?: string;\n  classNames?: OrderDetailPageClassNames;\n}\n\n/**\n * OrderDetailPage — single order detail view with live status polling.\n *\n * SSR-friendly: pass `order` prop for server rendering.\n */\nexport function OrderDetailPage({\n  orderId,\n  order,\n  poll = true,\n  onBack,\n  renderLineItem,\n  backLabel = \"Back to orders\",\n  className,\n  classNames,\n}: OrderDetailPageProps): React.ReactElement {\n  return (\n    <div data-cimplify-order-detail-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-detail-header className={classNames?.header}>\n        {onBack && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-order-detail-back\n            className={classNames?.backButton}\n          >\n            {backLabel}\n          </button>\n        )}\n        <h1 data-cimplify-order-detail-title className={classNames?.title}>\n          Order Details\n        </h1>\n      </div>\n\n      {/* Order summary */}\n      <div data-cimplify-order-detail-content className={classNames?.summary}>\n        <OrderSummary\n          order={order}\n          orderId={order ? undefined : orderId}\n          poll={poll}\n          renderLineItem={renderLineItem}\n        />\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus } from \"@cimplify/sdk\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderDetailPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  backButton?: string;\n  summary?: string;\n}\n\nexport interface OrderDetailPageProps {\n  /** Order ID to display. */\n  orderId: string;\n  /** Pre-fetched order for SSR. */\n  order?: Order;\n  /** Poll for status updates. Default: true. */\n  poll?: boolean;\n  /** Called when back button is clicked. */\n  onBack?: () => void;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Called when the order status changes during polling. */\n  onStatusChange?: (previousStatus: OrderStatus, newStatus: OrderStatus, order: Order) => void;\n  /** Back button label. */\n  backLabel?: string;\n  className?: string;\n  classNames?: OrderDetailPageClassNames;\n}\n\n/**\n * OrderDetailPage — single order detail view with live status polling.\n *\n * SSR-friendly: pass `order` prop for server rendering.\n */\nexport function OrderDetailPage({\n  orderId,\n  order,\n  poll = true,\n  onBack,\n  renderLineItem,\n  onReorder,\n  onStatusChange,\n  backLabel = \"Back to orders\",\n  className,\n  classNames,\n}: OrderDetailPageProps): React.ReactElement {\n  return (\n    <div data-cimplify-order-detail-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-detail-header className={classNames?.header}>\n        {onBack && (\n          <button\n            type=\"button\"\n            onClick={onBack}\n            data-cimplify-order-detail-back\n            className={classNames?.backButton}\n          >\n            {backLabel}\n          </button>\n        )}\n        <h1 data-cimplify-order-detail-title className={classNames?.title}>\n          Order Details\n        </h1>\n      </div>\n\n      {/* Order summary */}\n      <div data-cimplify-order-detail-content className={classNames?.summary}>\n        <OrderSummary\n          order={order}\n          orderId={order ? undefined : orderId}\n          poll={poll}\n          renderLineItem={renderLineItem}\n          onReorder={onReorder}\n          onStatusChange={onStatusChange}\n        />\n      </div>\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/order-history-page.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "order-history-page.tsx",
-      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { OrderHistory } from \"@cimplify/sdk/react\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  filters?: string;\n  filterButton?: string;\n  list?: string;\n  detail?: string;\n  backButton?: string;\n}\n\nexport interface OrderHistoryPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched orders for SSR. */\n  orders?: Order[];\n  /** Max orders to show per page. */\n  limit?: number;\n  /** Called when navigating to an order detail (e.g. for routing). */\n  onOrderNavigate?: (order: Order) => void;\n  /** Show status filter tabs. Default: true. */\n  showFilters?: boolean;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  className?: string;\n  classNames?: OrderHistoryPageClassNames;\n}\n\nconst STATUS_FILTERS: { label: string; value: OrderStatus | undefined; tabValue: string }[] = [\n  { label: \"All\", value: undefined, tabValue: \"all\" },\n  { label: \"Active\", value: \"confirmed\", tabValue: \"confirmed\" },\n  { label: \"Completed\", value: \"completed\", tabValue: \"completed\" },\n  { label: \"Cancelled\", value: \"cancelled\", tabValue: \"cancelled\" },\n];\n\n/**\n * OrderHistoryPage — order list with inline detail view and status filtering.\n *\n * SSR-friendly: pass `orders` prop for server rendering.\n * Supports both inline detail view and external navigation via `onOrderNavigate`.\n */\nexport function OrderHistoryPage({\n  title = \"Order History\",\n  orders: ordersProp,\n  limit = 20,\n  onOrderNavigate,\n  showFilters = true,\n  renderOrder,\n  className,\n  classNames,\n}: OrderHistoryPageProps): React.ReactElement {\n  const [statusFilter, setStatusFilter] = useState<OrderStatus | undefined>(undefined);\n  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);\n\n  const handleTabChange = useCallback((value: string | number | null) => {\n    const filter = STATUS_FILTERS.find((f) => f.tabValue === value);\n    setStatusFilter(filter?.value);\n  }, []);\n\n  const handleOrderClick = useCallback(\n    (order: Order) => {\n      if (onOrderNavigate) {\n        onOrderNavigate(order);\n      } else {\n        setSelectedOrder(order);\n      }\n    },\n    [onOrderNavigate],\n  );\n\n  const handleBack = useCallback(() => {\n    setSelectedOrder(null);\n  }, []);\n\n  const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? \"all\";\n\n  // Inline detail view\n  if (selectedOrder && !onOrderNavigate) {\n    return (\n      <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n        <div data-cimplify-order-history-detail className={classNames?.detail}>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-order-history-back\n            className={classNames?.backButton}\n          >\n            Back to orders\n          </button>\n          <OrderSummary order={selectedOrder} />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-history-header className={classNames?.header}>\n        <h1 data-cimplify-order-history-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {/* Status filter */}\n      {showFilters && (\n        <Tabs.Root value={activeTabValue} onValueChange={handleTabChange}>\n          <Tabs.List data-cimplify-order-history-filters className={classNames?.filters}>\n            {STATUS_FILTERS.map((filter) => (\n              <Tabs.Tab\n                key={filter.tabValue}\n                value={filter.tabValue}\n                data-cimplify-order-filter\n                data-selected={statusFilter === filter.value || undefined}\n                className={classNames?.filterButton}\n              >\n                {filter.label}\n              </Tabs.Tab>\n            ))}\n          </Tabs.List>\n        </Tabs.Root>\n      )}\n\n      {/* Order list */}\n      <div data-cimplify-order-history-list className={classNames?.list}>\n        <OrderHistory\n          orders={ordersProp}\n          status={statusFilter}\n          limit={limit}\n          onOrderClick={handleOrderClick}\n          renderOrder={renderOrder}\n        />\n      </div>\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React, { useState, useCallback } from \"react\";\nimport { Tabs } from \"@base-ui/react/tabs\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { OrderHistory } from \"@cimplify/sdk/react\";\nimport { OrderSummary } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryPageClassNames {\n  root?: string;\n  header?: string;\n  title?: string;\n  filters?: string;\n  filterButton?: string;\n  list?: string;\n  detail?: string;\n  backButton?: string;\n}\n\nexport interface OrderHistoryPageProps {\n  /** Page title. */\n  title?: string;\n  /** Pre-fetched orders for SSR. */\n  orders?: Order[];\n  /** Max orders to show per page. */\n  limit?: number;\n  /** Called when navigating to an order detail (e.g. for routing). */\n  onOrderNavigate?: (order: Order) => void;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Show status filter tabs. Default: true. */\n  showFilters?: boolean;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  className?: string;\n  classNames?: OrderHistoryPageClassNames;\n}\n\nconst STATUS_FILTERS: { label: string; value: OrderStatus | undefined; tabValue: string }[] = [\n  { label: \"All\", value: undefined, tabValue: \"all\" },\n  { label: \"Active\", value: \"confirmed\", tabValue: \"confirmed\" },\n  { label: \"Completed\", value: \"completed\", tabValue: \"completed\" },\n  { label: \"Cancelled\", value: \"cancelled\", tabValue: \"cancelled\" },\n];\n\n/**\n * OrderHistoryPage — order list with inline detail view and status filtering.\n *\n * SSR-friendly: pass `orders` prop for server rendering.\n * Supports both inline detail view and external navigation via `onOrderNavigate`.\n */\nexport function OrderHistoryPage({\n  title = \"Order History\",\n  orders: ordersProp,\n  limit = 20,\n  onOrderNavigate,\n  onReorder,\n  showFilters = true,\n  renderOrder,\n  className,\n  classNames,\n}: OrderHistoryPageProps): React.ReactElement {\n  const [statusFilter, setStatusFilter] = useState<OrderStatus | undefined>(undefined);\n  const [selectedOrder, setSelectedOrder] = useState<Order | null>(null);\n\n  const handleTabChange = useCallback((value: string | number | null) => {\n    const filter = STATUS_FILTERS.find((f) => f.tabValue === value);\n    setStatusFilter(filter?.value);\n  }, []);\n\n  const handleOrderClick = useCallback(\n    (order: Order) => {\n      if (onOrderNavigate) {\n        onOrderNavigate(order);\n      } else {\n        setSelectedOrder(order);\n      }\n    },\n    [onOrderNavigate],\n  );\n\n  const handleBack = useCallback(() => {\n    setSelectedOrder(null);\n  }, []);\n\n  const activeTabValue = STATUS_FILTERS.find((f) => f.value === statusFilter)?.tabValue ?? \"all\";\n\n  // Inline detail view\n  if (selectedOrder && !onOrderNavigate) {\n    return (\n      <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n        <div data-cimplify-order-history-detail className={classNames?.detail}>\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            data-cimplify-order-history-back\n            className={classNames?.backButton}\n          >\n            Back to orders\n          </button>\n          <OrderSummary order={selectedOrder} onReorder={onReorder} />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history-page className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-history-header className={classNames?.header}>\n        <h1 data-cimplify-order-history-title className={classNames?.title}>\n          {title}\n        </h1>\n      </div>\n\n      {/* Status filter */}\n      {showFilters && (\n        <Tabs.Root value={activeTabValue} onValueChange={handleTabChange}>\n          <Tabs.List data-cimplify-order-history-filters className={classNames?.filters}>\n            {STATUS_FILTERS.map((filter) => (\n              <Tabs.Tab\n                key={filter.tabValue}\n                value={filter.tabValue}\n                data-cimplify-order-filter\n                data-selected={statusFilter === filter.value || undefined}\n                className={classNames?.filterButton}\n              >\n                {filter.label}\n              </Tabs.Tab>\n            ))}\n          </Tabs.List>\n        </Tabs.Root>\n      )}\n\n      {/* Order list */}\n      <div data-cimplify-order-history-list className={classNames?.list}>\n        <OrderHistory\n          orders={ordersProp}\n          status={statusFilter}\n          limit={limit}\n          onOrderClick={handleOrderClick}\n          renderOrder={renderOrder}\n          onReorder={onReorder}\n        />\n      </div>\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/order-history.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-history.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrders } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryClassNames {\n  root?: string;\n  item?: string;\n  orderId?: string;\n  status?: string;\n  date?: string;\n  total?: string;\n  empty?: string;\n  loading?: string;\n}\n\nexport interface OrderHistoryProps {\n  /** Override orders (skips fetch). For SSR, pass pre-fetched orders. */\n  orders?: Order[];\n  /** Filter by status. */\n  status?: OrderStatus;\n  /** Max orders to display. */\n  limit?: number;\n  /** Called when an order row is clicked. */\n  onOrderClick?: (order: Order) => void;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: OrderHistoryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderHistory — list of past orders with status and totals.\n *\n * Fetches via `useOrders` unless pre-loaded orders are passed.\n */\nexport function OrderHistory({\n  orders: ordersProp,\n  status,\n  limit,\n  onOrderClick,\n  renderOrder,\n  emptyMessage = \"No orders yet\",\n  className,\n  classNames,\n}: OrderHistoryProps): React.ReactElement {\n  const { orders: fetched, isLoading } = useOrders({\n    status,\n    limit,\n    enabled: ordersProp === undefined,\n  });\n\n  const orders = ordersProp ?? fetched;\n\n  if (isLoading && orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history className={cn(className, classNames?.root)}>\n      {orders.map((order) => (\n        <button\n          key={order.id}\n          type=\"button\"\n          onClick={() => onOrderClick?.(order)}\n          data-cimplify-order-history-item\n          data-status={order.status}\n          className={classNames?.item}\n        >\n          {renderOrder ? (\n            renderOrder(order)\n          ) : (\n            <>\n              <div data-cimplify-order-history-main>\n                <span data-cimplify-order-history-id className={classNames?.orderId}>\n                  #{order.user_friendly_id}\n                </span>\n                <span\n                  data-cimplify-order-history-status\n                  data-status={order.status}\n                  className={classNames?.status}\n                >\n                  {STATUS_LABELS[order.status] ?? order.status}\n                </span>\n              </div>\n              <div data-cimplify-order-history-details>\n                <time\n                  data-cimplify-order-history-date\n                  dateTime={order.created_at}\n                  className={classNames?.date}\n                >\n                  {new Date(order.created_at).toLocaleDateString()}\n                </time>\n                <span data-cimplify-order-history-items>\n                  {order.total_quantity} {order.total_quantity === 1 ? \"item\" : \"items\"}\n                </span>\n                <span data-cimplify-order-history-total className={classNames?.total}>\n                  <Price amount={order.total_price} />\n                </span>\n              </div>\n            </>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, OrderStatus } from \"@cimplify/sdk\";\nimport { useOrders } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderHistoryClassNames {\n  root?: string;\n  item?: string;\n  orderId?: string;\n  status?: string;\n  date?: string;\n  total?: string;\n  empty?: string;\n  loading?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderHistoryProps {\n  /** Override orders (skips fetch). For SSR, pass pre-fetched orders. */\n  orders?: Order[];\n  /** Filter by status. */\n  status?: OrderStatus;\n  /** Max orders to display. */\n  limit?: number;\n  /** Called when an order row is clicked. */\n  onOrderClick?: (order: Order) => void;\n  /** Custom order row renderer. */\n  renderOrder?: (order: Order) => React.ReactNode;\n  /** Called when the reorder button is clicked. If provided, a reorder button is rendered. */\n  onReorder?: (order: Order) => void;\n  /** Text shown when empty. */\n  emptyMessage?: string;\n  className?: string;\n  classNames?: OrderHistoryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderHistory — list of past orders with status and totals.\n *\n * Fetches via `useOrders` unless pre-loaded orders are passed.\n */\nexport function OrderHistory({\n  orders: ordersProp,\n  status,\n  limit,\n  onOrderClick,\n  renderOrder,\n  onReorder,\n  emptyMessage = \"No orders yet\",\n  className,\n  classNames,\n}: OrderHistoryProps): React.ReactElement {\n  const { orders: fetched, isLoading } = useOrders({\n    status,\n    limit,\n    enabled: ordersProp === undefined,\n  });\n\n  const orders = ordersProp ?? fetched;\n\n  if (isLoading && orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      />\n    );\n  }\n\n  if (orders.length === 0) {\n    return (\n      <div\n        data-cimplify-order-history\n        data-empty\n        className={cn(className, classNames?.root, classNames?.empty)}\n      >\n        <p>{emptyMessage}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-history className={cn(className, classNames?.root)}>\n      {orders.map((order) => (\n        <button\n          key={order.id}\n          type=\"button\"\n          onClick={() => onOrderClick?.(order)}\n          data-cimplify-order-history-item\n          data-status={order.status}\n          className={classNames?.item}\n        >\n          {renderOrder ? (\n            renderOrder(order)\n          ) : (\n            <>\n              <div data-cimplify-order-history-main>\n                <span data-cimplify-order-history-id className={classNames?.orderId}>\n                  #{order.user_friendly_id}\n                </span>\n                <span\n                  data-cimplify-order-history-status\n                  data-status={order.status}\n                  className={classNames?.status}\n                >\n                  {STATUS_LABELS[order.status] ?? order.status}\n                </span>\n              </div>\n              <div data-cimplify-order-history-details>\n                <time\n                  data-cimplify-order-history-date\n                  dateTime={order.created_at}\n                  className={classNames?.date}\n                >\n                  {new Date(order.created_at).toLocaleDateString()}\n                </time>\n                <span data-cimplify-order-history-items>\n                  {order.total_quantity} {order.total_quantity === 1 ? \"item\" : \"items\"}\n                </span>\n                <span data-cimplify-order-history-total className={classNames?.total}>\n                  <Price amount={order.total_price} />\n                </span>\n              </div>\n              {onReorder && (\n                <button\n                  type=\"button\"\n                  onClick={(e) => {\n                    e.stopPropagation();\n                    onReorder(order);\n                  }}\n                  data-cimplify-order-reorder\n                  className={classNames?.reorderButton}\n                >\n                  Reorder\n                </button>\n              )}\n            </>\n          )}\n        </button>\n      ))}\n    </div>\n  );\n}\n"
     }
   ]
 }

package/registry/order-summary.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "order-summary.tsx",
-      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus, PaymentState } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  paymentState?: string;\n  fulfillmentDetails?: string;\n  deliveryAddress?: string;\n  items?: string;\n  lineItem?: string;\n  notes?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  trackingLink?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\nconst PAYMENT_STATE_LABELS: Record<PaymentState, string> = {\n  not_paid: \"Not Paid\",\n  paid: \"Paid\",\n  partially_refunded: \"Partially Refunded\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n        {order.payment_state && (\n          <span\n            data-cimplify-order-payment-state\n            data-payment-state={order.payment_state}\n            className={classNames?.paymentState}\n          >\n            {PAYMENT_STATE_LABELS[order.payment_state] ?? order.payment_state}\n          </span>\n        )}\n      </div>\n\n      {/* Fulfillment details */}\n      {order.order_type === \"pickup\" && order.pickup_time && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Pickup time: {new Date(order.pickup_time).toLocaleString()}</span>\n        </div>\n      )}\n      {order.order_type === \"dine-in\" && order.table_number && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Table: {order.table_number}</span>\n        </div>\n      )}\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Delivery address */}\n      {order.delivery_address && (\n        <div data-cimplify-order-delivery-address className={classNames?.deliveryAddress}>\n          <span>Delivery address</span>\n          <p>{order.delivery_address}</p>\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n              {item.fulfillment_type === \"digital\" && item.fulfillment_id && (\n                <a\n                  href={item.fulfillment_id}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  data-cimplify-order-line-download\n                  className=\"text-sm text-primary underline\"\n                >\n                  Download\n                </a>\n              )}\n\n              {/* Service items: show scheduling and confirmation details */}\n              {item.configuration.type === \"service\" && (\n                <div data-cimplify-order-service-info className={classNames?.serviceInfo}>\n                  {item.configuration.scheduled_start && (\n                    <span>{\"\\u{1F4C5}\"} {new Date(item.configuration.scheduled_start).toLocaleDateString()} at {new Date(item.configuration.scheduled_start).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}</span>\n                  )}\n                  {item.configuration.confirmation_code && (\n                    <span>Confirmation: {item.configuration.confirmation_code}</span>\n                  )}\n                  {item.configuration.service_status && (\n                    <span data-status={item.configuration.service_status}>{item.configuration.service_status}</span>\n                  )}\n                </div>\n              )}\n\n              {/* Digital items: instant delivery badge */}\n              {item.configuration.type === \"digital\" && (\n                <div data-cimplify-order-digital-info className={classNames?.digitalInfo}>\n                  <span>{\"\\u26A1\"} Instant digital delivery</span>\n                </div>\n              )}\n\n              {/* Bundle items: component breakdown */}\n              {item.configuration.type === \"bundle\" && item.configuration.resolved && (\n                <div data-cimplify-order-bundle-breakdown className={classNames?.bundleBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.product_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      {sel.product_type === \"digital\" && <span> &mdash; Digital</span>}\n                    </div>\n                  ))}\n                </div>\n              )}\n\n              {/* Composite items: component breakdown with pricing */}\n              {item.configuration.type === \"composite\" && item.configuration.resolved && (\n                <div data-cimplify-order-composite-breakdown className={classNames?.compositeBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.component_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      <Price amount={sel.unit_price} />\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Customer notes / special instructions */}\n      {order.customer_notes && order.customer_notes.length > 0 && (\n        <div data-cimplify-order-notes className={classNames?.notes}>\n          <span>Notes</span>\n          {order.customer_notes.map((note, index) => (\n            <p key={index} data-cimplify-order-note>{note}</p>\n          ))}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && parsePrice(order.total_discount) !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.delivery_fee != null && parsePrice(order.delivery_fee) > 0 && (\n          <div data-cimplify-order-delivery-fee>\n            <span>Delivery fee</span>\n            <Price amount={order.delivery_fee} />\n          </div>\n        )}\n        {order.service_charge != null && parsePrice(order.service_charge) !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && parsePrice(order.tax) !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n          className={classNames?.trackingLink}\n        >\n          Track your order\n        </a>\n      )}\n    </div>\n  );\n}\n"
+      "content": "\"use client\";\n\nimport React from \"react\";\nimport type { Order, LineItem, OrderStatus, PaymentState } from \"@cimplify/sdk\";\nimport { useOrder } from \"@cimplify/sdk/react\";\nimport { Price } from \"@cimplify/sdk/react\";\nimport { parsePrice } from \"@cimplify/sdk\";\nimport { cn } from \"@cimplify/sdk/react\";\n\nexport interface OrderSummaryClassNames {\n  root?: string;\n  header?: string;\n  orderId?: string;\n  status?: string;\n  paymentState?: string;\n  fulfillmentDetails?: string;\n  deliveryAddress?: string;\n  items?: string;\n  lineItem?: string;\n  notes?: string;\n  totals?: string;\n  customer?: string;\n  loading?: string;\n  serviceInfo?: string;\n  digitalInfo?: string;\n  bundleBreakdown?: string;\n  compositeBreakdown?: string;\n  trackingLink?: string;\n  reorderButton?: string;\n}\n\nexport interface OrderSummaryProps {\n  /** Pass an Order object directly (skips fetch). */\n  order?: Order;\n  /** Or pass an order ID to fetch via useOrder. */\n  orderId?: string;\n  /** Poll for status updates. */\n  poll?: boolean;\n  /** Custom line item renderer. */\n  renderLineItem?: (item: LineItem) => React.ReactNode;\n  /** Called when the reorder button is clicked. */\n  onReorder?: (order: Order) => void;\n  /** Called when the order status changes during polling. */\n  onStatusChange?: (previousStatus: OrderStatus, newStatus: OrderStatus, order: Order) => void;\n  className?: string;\n  classNames?: OrderSummaryClassNames;\n}\n\nconst STATUS_LABELS: Record<OrderStatus, string> = {\n  pending: \"Pending\",\n  created: \"Created\",\n  confirmed: \"Confirmed\",\n  in_preparation: \"In Preparation\",\n  ready_to_serve: \"Ready\",\n  partially_served: \"Partially Served\",\n  served: \"Served\",\n  delivered: \"Delivered\",\n  picked_up: \"Picked Up\",\n  completed: \"Completed\",\n  cancelled: \"Cancelled\",\n  refunded: \"Refunded\",\n};\n\nconst PAYMENT_STATE_LABELS: Record<PaymentState, string> = {\n  not_paid: \"Not Paid\",\n  paid: \"Paid\",\n  partially_refunded: \"Partially Refunded\",\n  refunded: \"Refunded\",\n};\n\n/**\n * OrderSummary — displays a single order's details, line items, and totals.\n *\n * Accepts either a pre-loaded `order` object or an `orderId` to fetch.\n * Supports polling for live status updates.\n */\nexport function OrderSummary({\n  order: orderProp,\n  orderId,\n  poll = false,\n  renderLineItem,\n  onReorder,\n  onStatusChange,\n  className,\n  classNames,\n}: OrderSummaryProps): React.ReactElement {\n  const { order: fetched, isLoading } = useOrder(orderProp ? null : orderId, {\n    enabled: !orderProp && !!orderId,\n    poll,\n    onStatusChange,\n  });\n\n  const order = orderProp ?? fetched;\n\n  if (isLoading && !order) {\n    return (\n      <div\n        data-cimplify-order-summary\n        aria-busy=\"true\"\n        className={cn(className, classNames?.root, classNames?.loading)}\n      >\n        <div data-cimplify-order-summary-skeleton />\n      </div>\n    );\n  }\n\n  if (!order) {\n    return (\n      <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n        <p>Order not found.</p>\n      </div>\n    );\n  }\n\n  return (\n    <div data-cimplify-order-summary className={cn(className, classNames?.root)}>\n      {/* Header */}\n      <div data-cimplify-order-header className={classNames?.header}>\n        <span data-cimplify-order-id className={classNames?.orderId}>\n          Order #{order.user_friendly_id}\n        </span>\n        <span\n          data-cimplify-order-status\n          data-status={order.status}\n          className={classNames?.status}\n        >\n          {STATUS_LABELS[order.status] ?? order.status}\n        </span>\n        {order.payment_state && (\n          <span\n            data-cimplify-order-payment-state\n            data-payment-state={order.payment_state}\n            className={classNames?.paymentState}\n          >\n            {PAYMENT_STATE_LABELS[order.payment_state] ?? order.payment_state}\n          </span>\n        )}\n      </div>\n\n      {/* Fulfillment details */}\n      {order.order_type === \"pickup\" && order.pickup_time && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Pickup time: {new Date(order.pickup_time).toLocaleString()}</span>\n        </div>\n      )}\n      {order.order_type === \"dine-in\" && order.table_number && (\n        <div data-cimplify-order-fulfillment className={classNames?.fulfillmentDetails}>\n          <span>Table: {order.table_number}</span>\n        </div>\n      )}\n\n      {/* Date */}\n      <time data-cimplify-order-date dateTime={order.created_at}>\n        {new Date(order.created_at).toLocaleDateString(undefined, {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          hour: \"2-digit\",\n          minute: \"2-digit\",\n        })}\n      </time>\n\n      {/* Customer info */}\n      {(order.customer_name || order.customer_email) && (\n        <div data-cimplify-order-customer className={classNames?.customer}>\n          {order.customer_name && (\n            <span data-cimplify-order-customer-name>{order.customer_name}</span>\n          )}\n          {order.customer_email && (\n            <span data-cimplify-order-customer-email>{order.customer_email}</span>\n          )}\n        </div>\n      )}\n\n      {/* Delivery address */}\n      {order.delivery_address && (\n        <div data-cimplify-order-delivery-address className={classNames?.deliveryAddress}>\n          <span>Delivery address</span>\n          <p>{order.delivery_address}</p>\n        </div>\n      )}\n\n      {/* Line items */}\n      <div data-cimplify-order-items className={classNames?.items}>\n        {order.items.map((item) =>\n          renderLineItem ? (\n            <React.Fragment key={item.id}>{renderLineItem(item)}</React.Fragment>\n          ) : (\n            <div key={item.id} data-cimplify-order-line-item className={classNames?.lineItem}>\n              <div data-cimplify-order-line-info>\n                <span data-cimplify-order-line-qty>{item.quantity}&times;</span>\n                <span data-cimplify-order-line-key>{item.line_key}</span>\n              </div>\n              <Price amount={item.price} />\n              {item.fulfillment_type === \"digital\" && item.fulfillment_id && (\n                <a\n                  href={item.fulfillment_id}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  data-cimplify-order-line-download\n                  className=\"text-sm text-primary underline\"\n                >\n                  Download\n                </a>\n              )}\n\n              {/* Service items: show scheduling and confirmation details */}\n              {item.configuration.type === \"service\" && (\n                <div data-cimplify-order-service-info className={classNames?.serviceInfo}>\n                  {item.configuration.scheduled_start && (\n                    <span>{\"\\u{1F4C5}\"} {new Date(item.configuration.scheduled_start).toLocaleDateString()} at {new Date(item.configuration.scheduled_start).toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" })}</span>\n                  )}\n                  {item.configuration.confirmation_code && (\n                    <span>Confirmation: {item.configuration.confirmation_code}</span>\n                  )}\n                  {item.configuration.service_status && (\n                    <span data-status={item.configuration.service_status}>{item.configuration.service_status}</span>\n                  )}\n                </div>\n              )}\n\n              {/* Digital items: instant delivery badge */}\n              {item.configuration.type === \"digital\" && (\n                <div data-cimplify-order-digital-info className={classNames?.digitalInfo}>\n                  <span>{\"\\u26A1\"} Instant digital delivery</span>\n                </div>\n              )}\n\n              {/* Bundle items: component breakdown */}\n              {item.configuration.type === \"bundle\" && item.configuration.resolved && (\n                <div data-cimplify-order-bundle-breakdown className={classNames?.bundleBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.product_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      {sel.product_type === \"digital\" && <span> &mdash; Digital</span>}\n                    </div>\n                  ))}\n                </div>\n              )}\n\n              {/* Composite items: component breakdown with pricing */}\n              {item.configuration.type === \"composite\" && item.configuration.resolved && (\n                <div data-cimplify-order-composite-breakdown className={classNames?.compositeBreakdown}>\n                  {item.configuration.resolved.selections.map((sel) => (\n                    <div key={sel.component_id} data-product-type={sel.product_type}>\n                      <span>{sel.quantity}&times; {sel.component_name}</span>\n                      {sel.product_type === \"service\" && sel.scheduling?.scheduled_start && (\n                        <span> &mdash; {new Date(sel.scheduling.scheduled_start).toLocaleDateString()}</span>\n                      )}\n                      <Price amount={sel.unit_price} />\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          ),\n        )}\n      </div>\n\n      {/* Customer notes / special instructions */}\n      {order.customer_notes && order.customer_notes.length > 0 && (\n        <div data-cimplify-order-notes className={classNames?.notes}>\n          <span>Notes</span>\n          {order.customer_notes.map((note, index) => (\n            <p key={index} data-cimplify-order-note>{note}</p>\n          ))}\n        </div>\n      )}\n\n      {/* Totals */}\n      <div data-cimplify-order-totals className={classNames?.totals}>\n        {order.total_discount != null && parsePrice(order.total_discount) !== 0 && (\n          <div data-cimplify-order-discount>\n            <span>Discount</span>\n            <Price amount={order.total_discount} prefix=\"-\" />\n          </div>\n        )}\n        {order.delivery_fee != null && parsePrice(order.delivery_fee) > 0 && (\n          <div data-cimplify-order-delivery-fee>\n            <span>Delivery fee</span>\n            <Price amount={order.delivery_fee} />\n          </div>\n        )}\n        {order.service_charge != null && parsePrice(order.service_charge) !== 0 && (\n          <div data-cimplify-order-service-charge>\n            <span>Service charge</span>\n            <Price amount={order.service_charge} />\n          </div>\n        )}\n        {order.tax != null && parsePrice(order.tax) !== 0 && (\n          <div data-cimplify-order-tax>\n            <span>Tax</span>\n            <Price amount={order.tax} />\n          </div>\n        )}\n        <div data-cimplify-order-total>\n          <span>Total</span>\n          <Price amount={order.total_price} />\n        </div>\n      </div>\n\n      {/* Tracking */}\n      {order.tracking_link && (\n        <a\n          href={order.tracking_link}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          data-cimplify-order-tracking\n          className={classNames?.trackingLink}\n        >\n          Track your order\n        </a>\n      )}\n\n      {onReorder && (\n        <button\n          type=\"button\"\n          onClick={() => onReorder(order)}\n          data-cimplify-order-reorder\n          className={classNames?.reorderButton}\n        >\n          Reorder\n        </button>\n      )}\n    </div>\n  );\n}\n"
     }
   ]
 }