@cimplify/sdk 0.21.0 → 0.22.0

package/dist/react.js

@@ -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;
@@ -4489,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(),
@@ -4532,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);
@@ -6882,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,
@@ -6896,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
           }
         )
@@ -6907,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
             }
           ),
@@ -6921,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
             }
           ),
@@ -6935,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)
             }
           )
         ]
@@ -6944,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 });
     }
@@ -6967,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
         ),
@@ -8301,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)
           ] }),
@@ -8313,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"
             }
           ),
@@ -8338,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"
             }
           )
@@ -8451,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,
@@ -8465,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",
@@ -8502,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
       }
     );
@@ -8516,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
     }
   );
@@ -9263,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,
@@ -9280,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;
@@ -9297,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);
@@ -9358,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);
       }
@@ -9371,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",
@@ -9381,7 +9519,7 @@ function BookingPage({
           children: "Back"
         }
       ),
-      step !== "select-slot" && /* @__PURE__ */ jsxRuntime.jsx(
+      step !== STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
@@ -9416,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,
@@ -9429,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,
@@ -9440,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: [
@@ -9462,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" })
@@ -10079,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;
@@ -10090,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;