@cimplify/sdk 0.20.2 → 0.22.0

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';
@@ -439,6 +439,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) {
@@ -756,7 +759,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;
@@ -887,6 +891,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 +914,8 @@ function createCartStore(params) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 function getStoreKey(client, locationId, isDemoMode) {
@@ -983,6 +996,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 +1019,8 @@ function useCart(options = {}) {
     removeItem,
     updateQuantity,
     clearCart,
-    sync
+    sync,
+    reorder
   };
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
@@ -2003,6 +2023,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 +2040,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 +2093,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 +2115,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 +2126,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() {
@@ -4457,6 +4488,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(),
@@ -4500,13 +4532,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);
@@ -6850,11 +6895,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,
@@ -6864,8 +6906,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
           }
         )
@@ -6875,13 +6916,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__ */ jsx(
             "span",
             {
               "data-cimplify-product-card-name": true,
-              className: classNames?.name,
+              className: cn("font-semibold text-foreground leading-tight", classNames?.name),
               children: product.name
             }
           ),
@@ -6889,13 +6930,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
             }
           ),
@@ -6903,7 +6938,7 @@ function ProductCard({
             Price,
             {
               amount: product.default_price,
-              className: classNames?.price
+              className: cn("text-sm font-medium text-foreground mt-1", classNames?.price)
             }
           )
         ]
@@ -6912,7 +6947,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 });
     }
@@ -6935,7 +6970,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
         ),
@@ -7518,12 +7553,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 +7727,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 +7760,7 @@ function OrderHistory({
   limit,
   onOrderClick,
   renderOrder,
+  onReorder,
   emptyMessage = "No orders yet",
   className,
   classNames
@@ -7783,7 +7832,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
@@ -8242,10 +8304,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__ */ jsxs("div", { "data-cimplify-booking-main": true, children: [
-          /* @__PURE__ */ jsxs("span", { "data-cimplify-booking-service": true, className: classNames?.service, children: [
+        /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-main": true, className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { "data-cimplify-booking-service": true, className: cn("font-semibold text-foreground", classNames?.service), children: [
             "Booking #",
             booking.order_id.slice(0, 8)
           ] }),
@@ -8254,22 +8320,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__ */ jsx("span", { "data-cimplify-booking-code": true, className: classNames?.confirmationCode, children: firstItem.confirmation_code }),
-        scheduledTime && /* @__PURE__ */ jsx("time", { "data-cimplify-booking-time": true, className: classNames?.time, children: scheduledTime }),
-        /* @__PURE__ */ jsx("span", { "data-cimplify-booking-total": true, className: classNames?.total, children: /* @__PURE__ */ jsx(Price, { amount: booking.total_price }) }),
-        active && (onCancel || onReschedule) && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-actions": true, className: classNames?.actions, children: [
+        firstItem?.confirmation_code && /* @__PURE__ */ 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__ */ jsx(
+          "time",
+          {
+            "data-cimplify-booking-time": true,
+            dateTime: firstItem?.scheduled_start ?? void 0,
+            className: cn("text-sm text-foreground", classNames?.time),
+            children: scheduledTime
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "data-cimplify-booking-total": true, className: cn("text-sm font-medium text-foreground", classNames?.total), children: /* @__PURE__ */ jsx(Price, { amount: booking.total_price }) }),
+        active && (onCancel || onReschedule) && /* @__PURE__ */ 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__ */ 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"
             }
           ),
@@ -8279,7 +8360,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"
             }
           )
@@ -8392,11 +8476,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,
@@ -8406,36 +8487,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__ */ jsxs("div", { "data-cimplify-service-card-body": true, className: classNames?.body, children: [
-      /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-name": true, className: classNames?.name, children: service.name }),
+    /* @__PURE__ */ jsxs("div", { "data-cimplify-service-card-body": true, className: cn("p-4 flex flex-col gap-1.5", classNames?.body), children: [
+      /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: service.name }),
       service.description && /* @__PURE__ */ 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__ */ jsxs("div", { "data-cimplify-service-card-meta": true, className: classNames?.meta, children: [
-        /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-duration": true, className: classNames?.duration, children: formatDuration2(service.duration_minutes, service.duration_unit) }),
-        service.price && /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-price": true, className: classNames?.price, children: /* @__PURE__ */ jsx(Price, { amount: service.price }) })
+      /* @__PURE__ */ jsxs("div", { "data-cimplify-service-card-meta": true, className: cn("flex items-center gap-2 mt-1 text-sm", classNames?.meta), children: [
+        /* @__PURE__ */ 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__ */ jsx("span", { "data-cimplify-service-card-price": true, className: cn("font-medium text-foreground", classNames?.price), children: /* @__PURE__ */ jsx(Price, { amount: service.price }) })
       ] })
     ] }),
-    !href && onBook && /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-action": true, className: classNames?.action, children: actionLabel })
+    !href && onBook && /* @__PURE__ */ 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__ */ jsx(
       "a",
@@ -8443,8 +8523,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
       }
     );
@@ -8457,18 +8536,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
     }
   );
@@ -8975,6 +9043,8 @@ function OrderDetailPage({
   poll = true,
   onBack,
   renderLineItem,
+  onReorder,
+  onStatusChange,
   backLabel = "Back to orders",
   className,
   classNames
@@ -8999,7 +9069,9 @@ function OrderDetailPage({
         order,
         orderId: order ? void 0 : orderId,
         poll,
-        renderLineItem
+        renderLineItem,
+        onReorder,
+        onStatusChange
       }
     ) })
   ] });
@@ -9015,6 +9087,7 @@ function OrderHistoryPage({
   orders: ordersProp,
   limit = 20,
   onOrderNavigate,
+  onReorder,
   showFilters = true,
   renderOrder,
   className,
@@ -9052,7 +9125,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 +9148,8 @@ function OrderHistoryPage({
         status: statusFilter,
         limit,
         onOrderClick: handleOrderClick,
-        renderOrder
+        renderOrder,
+        onReorder
       }
     ) })
   ] });
@@ -9198,10 +9272,114 @@ function DealsPage({
     isEmpty && /* @__PURE__ */ jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ 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__ */ jsxs(
+    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__ */ jsx(
+          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__ */ 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__ */ jsxs(
+            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__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
+                  resource.description && /* @__PURE__ */ jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
+                  /* @__PURE__ */ 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__ */ jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
+                      "Up to ",
+                      resource.capacity
+                    ] }),
+                    resource.floor && /* @__PURE__ */ 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,
@@ -9215,12 +9393,14 @@ function BookingPage({
   const { addItem } = useCart();
   const { client } = useCimplifyClient();
   const isReschedule = existingBooking !== void 0;
-  const [step, setStep] = useState("select-slot");
+  const [step, setStep] = useState(STEP.SELECT_SLOT);
   const [selectedSlot, setSelectedSlot] = useState(null);
   const [selectedDate, setSelectedDate] = useState(null);
   const [selectedStaffId, setSelectedStaffId] = useState(null);
+  const [selectedResourceId, setSelectedResourceId] = useState(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState(null);
+  const hasResourceStep = resources && resources.length > 0;
   const hasStaffStep = staff && staff.length > 0;
   const depositType = product?.deposit_type;
   const depositAmount = product?.deposit_amount;
@@ -9232,28 +9412,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 = useCallback(
+    (resourceId) => {
+      setSelectedResourceId(resourceId);
       if (hasStaffStep) {
-        setStep("select-staff");
+        setStep(STEP.SELECT_STAFF);
       } else {
-        setStep("confirm");
+        setStep(STEP.CONFIRM);
       }
     },
     [hasStaffStep]
   );
   const handleStaffSelect = useCallback((staffId) => {
     setSelectedStaffId(staffId);
-    setStep("confirm");
+    setStep(STEP.CONFIRM);
   }, []);
   const handleBack = 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 = useCallback(async () => {
     if (!selectedSlot || !selectedDate) return;
     setIsSubmitting(true);
@@ -9293,7 +9490,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);
       }
@@ -9306,7 +9504,7 @@ function BookingPage({
   }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-page": true, className: cn(className, classNames?.root), children: [
     /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-page-header": true, className: classNames?.header, children: [
-      onBack && step === "select-slot" && /* @__PURE__ */ jsx(
+      onBack && step === STEP.SELECT_SLOT && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -9316,7 +9514,7 @@ function BookingPage({
           children: "Back"
         }
       ),
-      step !== "select-slot" && /* @__PURE__ */ jsx(
+      step !== STEP.SELECT_SLOT && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -9351,7 +9549,7 @@ function BookingPage({
       ] })
     ] }),
     error && /* @__PURE__ */ jsx("div", { "data-cimplify-booking-error": true, className: classNames?.error, children: error }),
-    step === "select-slot" && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
+    step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
       /* @__PURE__ */ jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Select a date & time" }),
       /* @__PURE__ */ jsx(
         DateSlotPicker,
@@ -9364,7 +9562,18 @@ function BookingPage({
         }
       )
     ] }),
-    step === "select-staff" && staff && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
+    step === STEP.SELECT_RESOURCE && resources && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "select-resource", className: cn(classNames?.step, classNames?.resourceStep), children: [
+      /* @__PURE__ */ jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a room" }),
+      /* @__PURE__ */ jsx(
+        ResourcePicker,
+        {
+          resources,
+          selectedResourceId,
+          onResourceSelect: handleResourceSelect
+        }
+      )
+    ] }),
+    step === STEP.SELECT_STAFF && staff && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
       /* @__PURE__ */ jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a provider" }),
       /* @__PURE__ */ jsx(
         StaffPicker,
@@ -9375,7 +9584,7 @@ function BookingPage({
         }
       )
     ] }),
-    step === "confirm" && selectedSlot && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
+    step === STEP.CONFIRM && selectedSlot && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
       /* @__PURE__ */ jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Confirm your booking" }),
       /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary": true, className: classNames?.summary, children: [
         /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
@@ -9397,6 +9606,10 @@ function BookingPage({
           /* @__PURE__ */ jsx("span", { children: "Duration" }),
           /* @__PURE__ */ jsx("span", { children: formatDuration2(service.duration_minutes, service.duration_unit) })
         ] }),
+        selectedResourceId && resources && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
+          /* @__PURE__ */ jsx("span", { children: "Room" }),
+          /* @__PURE__ */ jsx("span", { children: resources.find((r) => r.id === selectedResourceId)?.name ?? "Selected" })
+        ] }),
         selectedStaffId && staff && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsx("span", { children: "Provider" }),
           /* @__PURE__ */ jsx("span", { children: staff.find((s) => s.id === selectedStaffId)?.name ?? "Selected" })
@@ -9965,4 +10178,4 @@ function CurrencySelector({
   }) });
 }
 
-export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompositeSelector, CurrencySelector, DateSlotPicker, DealBanner, DealsPage, DeliveryEstimate, DiscountInput, ElementsProvider, LocationPicker, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, QuantitySelector, RecentlyViewed, RecommendationCarousel, SaleBadge, SearchInput, SearchPage, ServiceCard, ServiceGrid, SessionMessageBanner, SlotPicker, StaffPicker, StoreNav, VariantSelector, cn, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompositeSelector, CurrencySelector, DateSlotPicker, DealBanner, DealsPage, DeliveryEstimate, DiscountInput, ElementsProvider, LocationPicker, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, QuantitySelector, RecentlyViewed, RecommendationCarousel, ResourcePicker, SaleBadge, SearchInput, SearchPage, ServiceCard, ServiceGrid, SessionMessageBanner, SlotPicker, StaffPicker, StoreNav, VariantSelector, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };