@cimplify/sdk 0.20.2 → 0.21.0

package/dist/react.js

@@ -1,8 +1,8 @@
 "use client";
 'use strict';
 
-var chunkWXFEO3LT_js = require('./chunk-WXFEO3LT.js');
-var chunkUVBJDWIV_js = require('./chunk-UVBJDWIV.js');
+var chunkA7IQN5EK_js = require('./chunk-A7IQN5EK.js');
+var chunkVYSXEDBV_js = require('./chunk-VYSXEDBV.js');
 var chunk64OCG2TJ_js = require('./chunk-64OCG2TJ.js');
 var React3 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -892,6 +892,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);
@@ -907,7 +915,8 @@ function createCartStore(params) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 function getStoreKey(client, locationId, isDemoMode) {
@@ -988,6 +997,12 @@ function useCart(options = {}) {
       throw syncError;
     }
   }, [store]);
+  const reorder = React3.useCallback(
+    async (orderId) => {
+      return store.reorder(orderId);
+    },
+    [store]
+  );
   const itemCount = React3.useMemo(
     () => snapshot.items.reduce((sum, item) => sum + item.quantity, 0),
     [snapshot.items]
@@ -1005,7 +1020,8 @@ function useCart(options = {}) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
@@ -1016,7 +1032,7 @@ var DEFAULT_COUNTRY = "US";
 function createDefaultClient() {
   const processRef = globalThis.process;
   const envPublicKey = processRef?.env?.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY || "";
-  return chunkWXFEO3LT_js.createCimplifyClient({ publicKey: envPublicKey });
+  return chunkA7IQN5EK_js.createCimplifyClient({ publicKey: envPublicKey });
 }
 function getStoredLocationId() {
   if (typeof window === "undefined" || !window.localStorage) {
@@ -2008,6 +2024,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) {
@@ -2024,6 +2041,9 @@ function useOrder(orderId, options = {}) {
   const poll = options.poll ?? false;
   const pollInterval = options.pollInterval ?? 5e3;
   const requestIdRef = React3.useRef(0);
+  const previousStatusRef = React3.useRef(null);
+  const onStatusChangeRef = React3.useRef(options.onStatusChange);
+  onStatusChangeRef.current = options.onStatusChange;
   const cacheKey = React3.useMemo(
     () => buildOrderCacheKey(client, normalizedOrderId),
     [client, normalizedOrderId]
@@ -2074,6 +2094,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) {
@@ -2090,8 +2116,9 @@ function useOrder(orderId, options = {}) {
   React3.useEffect(() => {
     void load(false);
   }, [load]);
+  const isTerminal = order ? TERMINAL_STATUSES.has(order.status) : false;
   React3.useEffect(() => {
-    if (!poll || !enabled || normalizedOrderId.length === 0) {
+    if (!poll || !enabled || normalizedOrderId.length === 0 || isTerminal) {
       return;
     }
     const timer = window.setInterval(() => {
@@ -2100,12 +2127,12 @@ function useOrder(orderId, options = {}) {
     return () => {
       window.clearInterval(timer);
     };
-  }, [enabled, load, normalizedOrderId, poll, pollInterval]);
+  }, [enabled, isTerminal, load, normalizedOrderId, poll, pollInterval]);
   const refetch = React3.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() {
@@ -4751,19 +4778,19 @@ function AuthElement({
   }, [onReady, onAuthenticated, onRequiresOtp, onError]);
   React3.useEffect(() => {
     if (!elements || !containerRef.current) return;
-    const element = elements.create(chunkUVBJDWIV_js.ELEMENT_TYPES.AUTH, { prefillEmail });
+    const element = elements.create(chunkVYSXEDBV_js.ELEMENT_TYPES.AUTH, { prefillEmail });
     elementRef.current = element;
-    element.on(chunkUVBJDWIV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(chunkVYSXEDBV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.AUTHENTICATED,
+      chunkVYSXEDBV_js.EVENT_TYPES.AUTHENTICATED,
       (data) => onAuthenticatedRef.current?.(data)
     );
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.REQUIRES_OTP,
+      chunkVYSXEDBV_js.EVENT_TYPES.REQUIRES_OTP,
       (data) => onRequiresOtpRef.current?.(data)
     );
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.ERROR,
+      chunkVYSXEDBV_js.EVENT_TYPES.ERROR,
       (data) => onErrorRef.current?.(data)
     );
     element.mount(containerRef.current);
@@ -4792,15 +4819,15 @@ function AddressElement({
   }, [onReady, onChange, onError]);
   React3.useEffect(() => {
     if (!elements || !containerRef.current) return;
-    const element = elements.create(chunkUVBJDWIV_js.ELEMENT_TYPES.ADDRESS, { mode });
+    const element = elements.create(chunkVYSXEDBV_js.ELEMENT_TYPES.ADDRESS, { mode });
     elementRef.current = element;
-    element.on(chunkUVBJDWIV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(chunkVYSXEDBV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.CHANGE,
+      chunkVYSXEDBV_js.EVENT_TYPES.CHANGE,
       (data) => onChangeRef.current?.(data)
     );
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.ERROR,
+      chunkVYSXEDBV_js.EVENT_TYPES.ERROR,
       (data) => onErrorRef.current?.(data)
     );
     element.mount(containerRef.current);
@@ -4830,15 +4857,15 @@ function PaymentElement({
   }, [onReady, onChange, onError]);
   React3.useEffect(() => {
     if (!elements || !containerRef.current) return;
-    const element = elements.create(chunkUVBJDWIV_js.ELEMENT_TYPES.PAYMENT, { amount, currency });
+    const element = elements.create(chunkVYSXEDBV_js.ELEMENT_TYPES.PAYMENT, { amount, currency });
     elementRef.current = element;
-    element.on(chunkUVBJDWIV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
+    element.on(chunkVYSXEDBV_js.EVENT_TYPES.READY, () => onReadyRef.current?.());
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.CHANGE,
+      chunkVYSXEDBV_js.EVENT_TYPES.CHANGE,
       (data) => onChangeRef.current?.(data)
     );
     element.on(
-      chunkUVBJDWIV_js.EVENT_TYPES.ERROR,
+      chunkVYSXEDBV_js.EVENT_TYPES.ERROR,
       (data) => onErrorRef.current?.(data)
     );
     element.mount(containerRef.current);
@@ -5101,7 +5128,7 @@ function VariantSelector({
                   {
                     "data-cimplify-variant-name": true,
                     className: cn("flex-1 min-w-0 text-sm", classNames?.name),
-                    children: chunkWXFEO3LT_js.getVariantDisplayName(variant, productName)
+                    children: chunkA7IQN5EK_js.getVariantDisplayName(variant, productName)
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm text-muted-foreground", classNames?.pricing), children: [
@@ -6415,7 +6442,7 @@ function CartLineItemRow({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item": true, className: classNames?.item, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item-info": true, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-name": true, className: classNames?.itemName, children: item.product.name }),
-      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunkWXFEO3LT_js.getVariantDisplayName(item.variant, item.product.name) }),
+      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunkA7IQN5EK_js.getVariantDisplayName(item.variant, item.product.name) }),
       item.addOnOptions && item.addOnOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-cart-item-addons": true, children: [
         "+ ",
         item.addOnOptions.map((opt) => opt.name).join(", ")
@@ -7523,12 +7550,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) {
@@ -7694,6 +7724,16 @@ function OrderSummary({
         className: classNames?.trackingLink,
         children: "Track your order"
       }
+    ),
+    onReorder && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onReorder(order),
+        "data-cimplify-order-reorder": true,
+        className: classNames?.reorderButton,
+        children: "Reorder"
+      }
     )
   ] });
 }
@@ -7717,6 +7757,7 @@ function OrderHistory({
   limit,
   onOrderClick,
   renderOrder,
+  onReorder,
   emptyMessage = "No orders yet",
   className,
   classNames
@@ -7788,7 +7829,20 @@ function OrderHistory({
             order.total_quantity === 1 ? "item" : "items"
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-order-history-total": true, className: classNames?.total, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: order.total_price }) })
-        ] })
+        ] }),
+        onReorder && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onReorder(order);
+            },
+            "data-cimplify-order-reorder": true,
+            className: classNames?.reorderButton,
+            children: "Reorder"
+          }
+        )
       ] })
     },
     order.id
@@ -8980,6 +9034,8 @@ function OrderDetailPage({
   poll = true,
   onBack,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   backLabel = "Back to orders",
   className,
   classNames
@@ -9004,7 +9060,9 @@ function OrderDetailPage({
         order,
         orderId: order ? void 0 : orderId,
         poll,
-        renderLineItem
+        renderLineItem,
+        onReorder,
+        onStatusChange
       }
     ) })
   ] });
@@ -9020,6 +9078,7 @@ function OrderHistoryPage({
   orders: ordersProp,
   limit = 20,
   onOrderNavigate,
+  onReorder,
   showFilters = true,
   renderOrder,
   className,
@@ -9057,7 +9116,7 @@ function OrderHistoryPage({
           children: "Back to orders"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(OrderSummary, { order: selectedOrder })
+      /* @__PURE__ */ jsxRuntime.jsx(OrderSummary, { order: selectedOrder, onReorder })
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-order-history-page": true, className: cn(className, classNames?.root), children: [
@@ -9080,7 +9139,8 @@ function OrderHistoryPage({
         status: statusFilter,
         limit,
         onOrderClick: handleOrderClick,
-        renderOrder
+        renderOrder,
+        onReorder
       }
     ) })
   ] });
@@ -9972,7 +10032,7 @@ function CurrencySelector({
 
 Object.defineProperty(exports, "getVariantDisplayName", {
   enumerable: true,
-  get: function () { return chunkWXFEO3LT_js.getVariantDisplayName; }
+  get: function () { return chunkA7IQN5EK_js.getVariantDisplayName; }
 });
 exports.Ad = Ad;
 exports.AdProvider = AdProvider;

package/dist/react.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { getVariantDisplayName, createCimplifyClient } from './chunk-X23RNZAD.mjs';
-export { getVariantDisplayName } from './chunk-X23RNZAD.mjs';
-import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-VTMRPTQ7.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';
@@ -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";
@@ -2003,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) {
@@ -2019,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]
@@ -2069,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) {
@@ -2085,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(() => {
@@ -2095,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() {
@@ -7518,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) {
@@ -7689,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"
+      }
     )
   ] });
 }
@@ -7712,6 +7752,7 @@ function OrderHistory({
   limit,
   onOrderClick,
   renderOrder,
+  onReorder,
   emptyMessage = "No orders yet",
   className,
   classNames
@@ -7783,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
@@ -8975,6 +9029,8 @@ function OrderDetailPage({
   poll = true,
   onBack,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   backLabel = "Back to orders",
   className,
   classNames
@@ -8999,7 +9055,9 @@ function OrderDetailPage({
         order,
         orderId: order ? void 0 : orderId,
         poll,
-        renderLineItem
+        renderLineItem,
+        onReorder,
+        onStatusChange
       }
     ) })
   ] });
@@ -9015,6 +9073,7 @@ function OrderHistoryPage({
   orders: ordersProp,
   limit = 20,
   onOrderNavigate,
+  onReorder,
   showFilters = true,
   renderOrder,
   className,
@@ -9052,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: [
@@ -9075,7 +9134,8 @@ function OrderHistoryPage({
         status: statusFilter,
         limit,
         onOrderClick: handleOrderClick,
-        renderOrder
+        renderOrder,
+        onReorder
       }
     ) })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.20.2",
+  "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"
     }
   ]
 }