@cimplify/sdk 0.20.2 → 0.22.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');
@@ -444,6 +444,9 @@ function buildLineKey(productId, options) {
   if (options.staffId) {
     parts.push(`st:${options.staffId}`);
   }
+  if (options.resourceId) {
+    parts.push(`r:${options.resourceId}`);
+  }
   return parts.join("|");
 }
 function calculateLineSubtotal(item) {
@@ -761,7 +764,8 @@ function createCartStore(params) {
         composite_selections: normalizedOptions.compositeSelections,
         scheduled_start: normalizedOptions.scheduledStart,
         scheduled_end: normalizedOptions.scheduledEnd,
-        staff_id: normalizedOptions.staffId
+        staff_id: normalizedOptions.staffId,
+        resource_id: normalizedOptions.resourceId
       });
       if (!result.ok) {
         throw result.error;
@@ -892,6 +896,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 +919,8 @@ function createCartStore(params) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 function getStoreKey(client, locationId, isDemoMode) {
@@ -988,6 +1001,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 +1024,8 @@ function useCart(options = {}) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
@@ -1016,7 +1036,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 +2028,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 +2045,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 +2098,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 +2120,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 +2131,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() {
@@ -4462,6 +4493,7 @@ function useRecommendations(options = {}) {
   return { recommendations, intent, isLoading, error, refetch };
 }
 var deliveryFeeCache = /* @__PURE__ */ new Map();
+var deliveryFeeInflight = /* @__PURE__ */ new Map();
 function buildDeliveryFeeCacheKey(client, latitude, longitude, country) {
   return JSON.stringify({
     key: client.getPublicKey(),
@@ -4505,13 +4537,26 @@ function useDeliveryFee(options) {
       setIsLoading(true);
       const currentRequestId = ++requestIdRef.current;
       try {
-        const result = await client.delivery.getFee(latitude, longitude, country);
-        if (currentRequestId !== requestIdRef.current) return;
-        if (!result.ok) {
-          throw result.error;
+        const existing = deliveryFeeInflight.get(cacheKey);
+        const promise = existing ?? (async () => {
+          const result = await client.delivery.getFee(latitude, longitude, country);
+          if (!result.ok) {
+            throw result.error;
+          }
+          return result.value;
+        })();
+        if (!existing) {
+          deliveryFeeInflight.set(
+            cacheKey,
+            promise.finally(() => {
+              deliveryFeeInflight.delete(cacheKey);
+            })
+          );
         }
-        deliveryFeeCache.set(cacheKey, result.value);
-        setFee(result.value);
+        const value = await promise;
+        if (currentRequestId !== requestIdRef.current) return;
+        deliveryFeeCache.set(cacheKey, value);
+        setFee(value);
       } catch (loadError) {
         if (currentRequestId !== requestIdRef.current) return;
         setError(loadError);
@@ -4751,19 +4796,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 +4837,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 +4875,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 +5146,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 +6460,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(", ")
@@ -6855,11 +6900,8 @@ function ProductCard({
       "div",
       {
         "data-cimplify-product-card-image-container": true,
-        className: classNames?.imageContainer,
-        style: {
-          overflow: "hidden",
-          ...ASPECT_STYLES2[aspectRatio]
-        },
+        className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
+        style: ASPECT_STYLES2[aspectRatio],
         children: renderImage ? renderImage({
           src: imageUrl,
           alt: product.name,
@@ -6869,8 +6911,7 @@ function ProductCard({
           {
             src: imageUrl,
             alt: product.name,
-            className: classNames?.image,
-            style: { width: "100%", height: "100%", objectFit: "cover" },
+            className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
             "data-cimplify-product-card-image": true
           }
         )
@@ -6880,13 +6921,13 @@ function ProductCard({
       "div",
       {
         "data-cimplify-product-card-body": true,
-        className: classNames?.body,
+        className: cn("p-4 flex flex-col gap-1", classNames?.body),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
               "data-cimplify-product-card-name": true,
-              className: classNames?.name,
+              className: cn("font-semibold text-foreground leading-tight", classNames?.name),
               children: product.name
             }
           ),
@@ -6894,13 +6935,7 @@ function ProductCard({
             "span",
             {
               "data-cimplify-product-card-description": true,
-              className: classNames?.description,
-              style: {
-                display: "-webkit-box",
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden"
-              },
+              className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
               children: product.description
             }
           ),
@@ -6908,7 +6943,7 @@ function ProductCard({
             Price,
             {
               amount: product.default_price,
-              className: classNames?.price
+              className: cn("text-sm font-medium text-foreground mt-1", classNames?.price)
             }
           )
         ]
@@ -6917,7 +6952,7 @@ function ProductCard({
   ] });
   if (mode === "page") {
     const linkHref = href ?? `/menu/${product.slug}`;
-    const linkClassName = cn("block no-underline text-[inherit]", className, classNames?.root);
+    const linkClassName = cn("group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md", className, classNames?.root);
     if (renderLink) {
       return renderLink({ href: linkHref, className: linkClassName, children: cardBody });
     }
@@ -6940,7 +6975,7 @@ function ProductCard({
         "data-cimplify-product-card": true,
         "data-display-mode": "card",
         className: cn(
-          "block w-full text-left bg-transparent border-none p-0 cursor-pointer font-[inherit] text-[inherit]",
+          "group block w-full text-left p-0 cursor-pointer font-[inherit] text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md",
           className,
           classNames?.root
         ),
@@ -7523,12 +7558,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 +7732,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 +7765,7 @@ function OrderHistory({
   limit,
   onOrderClick,
   renderOrder,
+  onReorder,
   emptyMessage = "No orders yet",
   className,
   classNames
@@ -7788,7 +7837,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
@@ -8247,10 +8309,14 @@ function BookingCard({
     {
       "data-cimplify-booking-card": true,
       "data-status": booking.status,
-      className: cn(className, classNames?.root),
+      className: cn(
+        "rounded-xl border border-border bg-background p-4 flex flex-col gap-3",
+        className,
+        classNames?.root
+      ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-main": true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-service": true, className: classNames?.service, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-main": true, className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-service": true, className: cn("font-semibold text-foreground", classNames?.service), children: [
             "Booking #",
             booking.order_id.slice(0, 8)
           ] }),
@@ -8259,22 +8325,37 @@ function BookingCard({
             {
               "data-cimplify-booking-status": true,
               "data-status": booking.status,
-              className: classNames?.status,
+              className: cn(
+                "text-xs font-medium px-2 py-0.5 rounded-full",
+                active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
+                classNames?.status
+              ),
               children: STATUS_LABELS3[booking.status] ?? booking.status
             }
           )
         ] }),
-        firstItem?.confirmation_code && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-code": true, className: classNames?.confirmationCode, children: firstItem.confirmation_code }),
-        scheduledTime && /* @__PURE__ */ jsxRuntime.jsx("time", { "data-cimplify-booking-time": true, className: classNames?.time, children: scheduledTime }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-total": true, className: classNames?.total, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: booking.total_price }) }),
-        active && (onCancel || onReschedule) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-actions": true, className: classNames?.actions, children: [
+        firstItem?.confirmation_code && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-code": true, className: cn("text-xs font-mono text-muted-foreground tracking-wide", classNames?.confirmationCode), children: firstItem.confirmation_code }),
+        scheduledTime && /* @__PURE__ */ jsxRuntime.jsx(
+          "time",
+          {
+            "data-cimplify-booking-time": true,
+            dateTime: firstItem?.scheduled_start ?? void 0,
+            className: cn("text-sm text-foreground", classNames?.time),
+            children: scheduledTime
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-total": true, className: cn("text-sm font-medium text-foreground", classNames?.total), children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: booking.total_price }) }),
+        active && (onCancel || onReschedule) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-actions": true, className: cn("flex gap-2 pt-1 border-t border-border mt-1", classNames?.actions), children: [
           onReschedule && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
               onClick: () => onReschedule(booking),
               "data-cimplify-booking-reschedule": true,
-              className: classNames?.rescheduleButton,
+              className: cn(
+                "flex-1 text-sm font-medium py-2 rounded-lg border border-border bg-background text-foreground transition-colors hover:bg-muted cursor-pointer",
+                classNames?.rescheduleButton
+              ),
               children: "Reschedule"
             }
           ),
@@ -8284,7 +8365,10 @@ function BookingCard({
               type: "button",
               onClick: () => onCancel(booking),
               "data-cimplify-booking-cancel": true,
-              className: classNames?.cancelButton,
+              className: cn(
+                "flex-1 text-sm font-medium py-2 rounded-lg border border-border bg-background text-destructive transition-colors hover:bg-destructive/10 cursor-pointer",
+                classNames?.cancelButton
+              ),
               children: "Cancel"
             }
           )
@@ -8397,11 +8481,8 @@ function ServiceCard({
       "div",
       {
         "data-cimplify-service-card-image-container": true,
-        className: classNames?.imageContainer,
-        style: {
-          overflow: "hidden",
-          ...ASPECT_STYLES3[aspectRatio]
-        },
+        className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
+        style: ASPECT_STYLES3[aspectRatio],
         children: renderImage ? renderImage({
           src: imageUrl,
           alt: service.name,
@@ -8411,36 +8492,35 @@ function ServiceCard({
           {
             src: imageUrl,
             alt: service.name,
-            className: classNames?.image,
-            style: { width: "100%", height: "100%", objectFit: "cover" },
+            className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
             "data-cimplify-service-card-image": true
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-body": true, className: classNames?.body, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-name": true, className: classNames?.name, children: service.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-body": true, className: cn("p-4 flex flex-col gap-1.5", classNames?.body), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: service.name }),
       service.description && /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
           "data-cimplify-service-card-description": true,
-          className: classNames?.description,
-          style: {
-            display: "-webkit-box",
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: "vertical",
-            overflow: "hidden"
-          },
+          className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
           children: service.description
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-meta": true, className: classNames?.meta, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-duration": true, className: classNames?.duration, children: formatDuration2(service.duration_minutes, service.duration_unit) }),
-        service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-price": true, className: classNames?.price, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-meta": true, className: cn("flex items-center gap-2 mt-1 text-sm", classNames?.meta), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-duration": true, className: cn("text-muted-foreground", classNames?.duration), children: formatDuration2(service.duration_minutes, service.duration_unit) }),
+        service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-price": true, className: cn("font-medium text-foreground", classNames?.price), children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) })
       ] })
     ] }),
-    !href && onBook && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-action": true, className: classNames?.action, children: actionLabel })
+    !href && onBook && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-action": true, className: cn("px-4 pb-4 pt-1 text-sm font-medium text-primary", classNames?.action), children: actionLabel })
   ] });
+  const cardClasses = cn(
+    "group block w-full rounded-xl border border-border bg-background text-left transition-shadow duration-200 hover:shadow-md",
+    !service.is_available && "opacity-60",
+    className,
+    classNames?.root
+  );
   if (href) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "a",
@@ -8448,8 +8528,7 @@ function ServiceCard({
         href,
         "data-cimplify-service-card": true,
         "data-available": service.is_available || void 0,
-        className: cn(className, classNames?.root),
-        style: { display: "block", textDecoration: "none", color: "inherit" },
+        className: cn(cardClasses, "no-underline text-[inherit]"),
         children: cardBody
       }
     );
@@ -8462,18 +8541,7 @@ function ServiceCard({
       disabled: !service.is_available,
       "data-cimplify-service-card": true,
       "data-available": service.is_available || void 0,
-      className: cn(className, classNames?.root),
-      style: {
-        display: "block",
-        width: "100%",
-        textAlign: "inherit",
-        background: "none",
-        border: "none",
-        padding: 0,
-        cursor: service.is_available ? "pointer" : "default",
-        font: "inherit",
-        color: "inherit"
-      },
+      className: cn(cardClasses, "cursor-pointer font-[inherit] p-0 border-border"),
       children: cardBody
     }
   );
@@ -8980,6 +9048,8 @@ function OrderDetailPage({
   poll = true,
   onBack,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   backLabel = "Back to orders",
   className,
   classNames
@@ -9004,7 +9074,9 @@ function OrderDetailPage({
         order,
         orderId: order ? void 0 : orderId,
         poll,
-        renderLineItem
+        renderLineItem,
+        onReorder,
+        onStatusChange
       }
     ) })
   ] });
@@ -9020,6 +9092,7 @@ function OrderHistoryPage({
   orders: ordersProp,
   limit = 20,
   onOrderNavigate,
+  onReorder,
   showFilters = true,
   renderOrder,
   className,
@@ -9057,7 +9130,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 +9153,8 @@ function OrderHistoryPage({
         status: statusFilter,
         limit,
         onOrderClick: handleOrderClick,
-        renderOrder
+        renderOrder,
+        onReorder
       }
     ) })
   ] });
@@ -9203,10 +9277,114 @@ function DealsPage({
     isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No deals available right now. Check back soon!" }) })
   ] });
 }
+var ANY_VALUE2 = "__any__";
+function roomToResource(room) {
+  return {
+    id: room.id,
+    name: room.name,
+    capacity: room.capacity,
+    floor: room.floor,
+    is_available: room.status === "available"
+  };
+}
+function ResourcePicker({
+  resources,
+  selectedResourceId,
+  onResourceSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  renderImage,
+  className,
+  classNames
+}) {
+  const groupValue = selectedResourceId === null ? ANY_VALUE2 : selectedResourceId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-resource-picker": true,
+      className: cn("flex flex-col gap-2", className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onResourceSelect?.(value === ANY_VALUE2 ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE2,
+            "data-cimplify-resource-option": true,
+            "data-selected": selectedResourceId === null || void 0,
+            "data-any": true,
+            className: cn(
+              "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+              "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+              classNames?.option
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: anyLabel })
+          }
+        ),
+        resources.map((resource) => {
+          const unavailable = resource.is_available === false;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value: resource.id,
+              disabled: unavailable,
+              "data-cimplify-resource-option": true,
+              "data-selected": selectedResourceId === resource.id || void 0,
+              "data-unavailable": unavailable || void 0,
+              className: cn(
+                "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+                "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+                unavailable && "opacity-50 cursor-not-allowed",
+                classNames?.option,
+                unavailable ? classNames?.unavailable : void 0
+              ),
+              children: [
+                resource.image_url && (renderImage ? renderImage({
+                  src: resource.image_url,
+                  alt: resource.name,
+                  className: classNames?.image
+                }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: resource.image_url,
+                    alt: resource.name,
+                    "data-cimplify-resource-image": true,
+                    className: cn("w-10 h-10 rounded-lg object-cover", classNames?.image)
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
+                  resource.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-resource-meta": true, className: cn("flex items-center gap-2 text-xs text-muted-foreground", classNames?.meta), children: [
+                    resource.capacity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
+                      "Up to ",
+                      resource.capacity
+                    ] }),
+                    resource.floor && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-floor": true, className: classNames?.floor, children: resource.floor })
+                  ] })
+                ] })
+              ]
+            },
+            resource.id
+          );
+        })
+      ]
+    }
+  );
+}
+var STEP = {
+  SELECT_SLOT: "select-slot",
+  SELECT_RESOURCE: "select-resource",
+  SELECT_STAFF: "select-staff",
+  CONFIRM: "confirm"
+};
 function BookingPage({
   service,
   product,
   staff,
+  resources,
   participantCount,
   title,
   onBooked,
@@ -9220,12 +9398,14 @@ function BookingPage({
   const { addItem } = useCart();
   const { client } = useCimplifyClient();
   const isReschedule = existingBooking !== void 0;
-  const [step, setStep] = React3.useState("select-slot");
+  const [step, setStep] = React3.useState(STEP.SELECT_SLOT);
   const [selectedSlot, setSelectedSlot] = React3.useState(null);
   const [selectedDate, setSelectedDate] = React3.useState(null);
   const [selectedStaffId, setSelectedStaffId] = React3.useState(null);
+  const [selectedResourceId, setSelectedResourceId] = React3.useState(null);
   const [isSubmitting, setIsSubmitting] = React3.useState(false);
   const [error, setError] = React3.useState(null);
+  const hasResourceStep = resources && resources.length > 0;
   const hasStaffStep = staff && staff.length > 0;
   const depositType = product?.deposit_type;
   const depositAmount = product?.deposit_amount;
@@ -9237,28 +9417,45 @@ function BookingPage({
       setSelectedSlot(slot);
       setSelectedDate(date);
       setError(null);
+      if (hasResourceStep) {
+        setStep(STEP.SELECT_RESOURCE);
+      } else if (hasStaffStep) {
+        setStep(STEP.SELECT_STAFF);
+      } else {
+        setStep(STEP.CONFIRM);
+      }
+    },
+    [hasResourceStep, hasStaffStep]
+  );
+  const handleResourceSelect = React3.useCallback(
+    (resourceId) => {
+      setSelectedResourceId(resourceId);
       if (hasStaffStep) {
-        setStep("select-staff");
+        setStep(STEP.SELECT_STAFF);
       } else {
-        setStep("confirm");
+        setStep(STEP.CONFIRM);
       }
     },
     [hasStaffStep]
   );
   const handleStaffSelect = React3.useCallback((staffId) => {
     setSelectedStaffId(staffId);
-    setStep("confirm");
+    setStep(STEP.CONFIRM);
   }, []);
   const handleBack = React3.useCallback(() => {
     setError(null);
-    if (step === "confirm" && hasStaffStep) {
-      setStep("select-staff");
-    } else if (step === "confirm" || step === "select-staff") {
-      setStep("select-slot");
+    if (step === STEP.CONFIRM && hasStaffStep) {
+      setStep(STEP.SELECT_STAFF);
+    } else if (step === STEP.CONFIRM && hasResourceStep) {
+      setStep(STEP.SELECT_RESOURCE);
+    } else if (step === STEP.SELECT_STAFF && hasResourceStep) {
+      setStep(STEP.SELECT_RESOURCE);
+    } else if (step === STEP.CONFIRM || step === STEP.SELECT_STAFF || step === STEP.SELECT_RESOURCE) {
+      setStep(STEP.SELECT_SLOT);
     } else {
       onBack?.();
     }
-  }, [step, hasStaffStep, onBack]);
+  }, [step, hasStaffStep, hasResourceStep, onBack]);
   const handleConfirm = React3.useCallback(async () => {
     if (!selectedSlot || !selectedDate) return;
     setIsSubmitting(true);
@@ -9298,7 +9495,8 @@ function BookingPage({
         await addItem(serviceProduct, 1, {
           scheduledStart: selectedSlot.start_time,
           scheduledEnd: selectedSlot.end_time,
-          staffId: selectedStaffId || void 0
+          staffId: selectedStaffId || void 0,
+          resourceId: selectedResourceId || void 0
         });
         onBooked?.(selectedSlot, selectedStaffId);
       }
@@ -9311,7 +9509,7 @@ function BookingPage({
   }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page-header": true, className: classNames?.header, children: [
-      onBack && step === "select-slot" && /* @__PURE__ */ jsxRuntime.jsx(
+      onBack && step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -9321,7 +9519,7 @@ function BookingPage({
           children: "Back"
         }
       ),
-      step !== "select-slot" && /* @__PURE__ */ jsxRuntime.jsx(
+      step !== STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -9356,7 +9554,7 @@ function BookingPage({
       ] })
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-error": true, className: classNames?.error, children: error }),
-    step === "select-slot" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
+    step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Select a date & time" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         DateSlotPicker,
@@ -9369,7 +9567,18 @@ function BookingPage({
         }
       )
     ] }),
-    step === "select-staff" && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
+    step === STEP.SELECT_RESOURCE && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-resource", className: cn(classNames?.step, classNames?.resourceStep), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a room" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ResourcePicker,
+        {
+          resources,
+          selectedResourceId,
+          onResourceSelect: handleResourceSelect
+        }
+      )
+    ] }),
+    step === STEP.SELECT_STAFF && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a provider" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         StaffPicker,
@@ -9380,7 +9589,7 @@ function BookingPage({
         }
       )
     ] }),
-    step === "confirm" && selectedSlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
+    step === STEP.CONFIRM && selectedSlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Confirm your booking" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary": true, className: classNames?.summary, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
@@ -9402,6 +9611,10 @@ function BookingPage({
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Duration" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDuration2(service.duration_minutes, service.duration_unit) })
         ] }),
+        selectedResourceId && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Room" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: resources.find((r) => r.id === selectedResourceId)?.name ?? "Selected" })
+        ] }),
         selectedStaffId && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Provider" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: staff.find((s) => s.id === selectedStaffId)?.name ?? "Selected" })
@@ -9972,7 +10185,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;
@@ -10019,6 +10232,7 @@ exports.ProductSheet = ProductSheet;
 exports.QuantitySelector = QuantitySelector;
 exports.RecentlyViewed = RecentlyViewed;
 exports.RecommendationCarousel = RecommendationCarousel;
+exports.ResourcePicker = ResourcePicker;
 exports.SaleBadge = SaleBadge;
 exports.SearchInput = SearchInput;
 exports.SearchPage = SearchPage;
@@ -10030,6 +10244,7 @@ exports.StaffPicker = StaffPicker;
 exports.StoreNav = StoreNav;
 exports.VariantSelector = VariantSelector;
 exports.cn = cn;
+exports.roomToResource = roomToResource;
 exports.useActivityState = useActivityState;
 exports.useAds = useAds;
 exports.useAttributeDefinitions = useAttributeDefinitions;