@cimplify/sdk 0.72.0 → 0.74.0

package/dist/react.js

@@ -6255,6 +6255,36 @@ function VariantSelector({
             className: cn("flex flex-wrap gap-2", classNames?.axisOptions),
             children: axis.values.map((value) => {
               const isSelected = axisSelections[axis.id] === value.id;
+              if (value.image_url || value.color_hex) {
+                const isImage = Boolean(value.image_url);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  radio.Radio.Root,
+                  {
+                    value: value.id,
+                    "data-cimplify-variant-option": true,
+                    "data-cimplify-variant-swatch": true,
+                    "data-selected": isSelected || void 0,
+                    "aria-label": value.name,
+                    title: value.name,
+                    style: isImage ? void 0 : { backgroundColor: value.color_hex },
+                    className: cn(
+                      "relative overflow-hidden border border-border transition-shadow",
+                      isImage ? "h-12 w-12 rounded-md" : "h-9 w-9 rounded-full",
+                      isSelected && "ring-2 ring-foreground ring-offset-2 ring-offset-background border-transparent",
+                      isSelected ? classNames?.swatchSelected : classNames?.swatch
+                    ),
+                    children: isImage && /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: value.image_url,
+                        alt: "",
+                        className: "h-full w-full object-cover"
+                      }
+                    )
+                  },
+                  value.id
+                );
+              }
               return /* @__PURE__ */ jsxRuntime.jsx(
                 radio.Radio.Root,
                 {
@@ -7281,6 +7311,144 @@ function formatDuration2(value, unit) {
   const label = value === 1 ? labels.singular : labels.plural;
   return `${value} ${label}`;
 }
+var ANY_VALUE = "__any__";
+function StaffPicker({
+  staff,
+  selectedStaffId,
+  onStaffSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  className,
+  classNames
+}) {
+  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-staff-picker": true,
+      className: cn(className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onStaffSelect?.(value === ANY_VALUE ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === null || void 0,
+            "data-any": true,
+            className: classNames?.option,
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
+          }
+        ),
+        staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
+          radio.Radio.Root,
+          {
+            value: member.id,
+            "data-cimplify-staff-option": true,
+            "data-selected": selectedStaffId === member.id || void 0,
+            className: classNames?.option,
+            children: [
+              member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: member.avatar_url,
+                  alt: member.name,
+                  "data-cimplify-staff-avatar": true,
+                  className: classNames?.avatar
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
+              member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
+            ]
+          },
+          member.id
+        ))
+      ]
+    }
+  );
+}
+function formatDate(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric"
+  });
+}
+function formatTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
+}
+function BookingSummary({
+  slot,
+  total,
+  staffName,
+  durationMinutes,
+  depositType,
+  depositAmount,
+  currency,
+  className,
+  classNames
+}) {
+  const depositValue = depositAmount != null ? chunk7Y2O3E4D_js.parsePrice(depositAmount) : 0;
+  const depositDue = depositType === "percentage" ? total * depositValue / 100 : depositType === "fixed" ? depositValue : 0;
+  const hasDeposit = depositDue > 0;
+  const balance = Math.max(0, total - depositDue);
+  const rowClass = cn("flex items-center justify-between", classNames?.row);
+  const labelClass = cn("text-muted-foreground", classNames?.label);
+  const valueClass = cn("font-medium", classNames?.value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-cimplify-booking-summary": true,
+      className: cn("rounded-lg border border-border p-4 space-y-3", className, classNames?.root),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between", classNames?.header), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Your booking" }),
+          durationMinutes != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            durationMinutes,
+            " min"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 text-sm", children: [
+          staffName && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "With" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: staffName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Date" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: formatDate(slot.start_time) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Time" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClass, children: formatTime(slot.start_time) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("border-t border-border pt-3 space-y-1.5 text-sm", classNames?.totals), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rowClass, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Subtotal" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: total, currency }) })
+          ] }),
+          hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(rowClass, classNames?.deposit), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: labelClass, children: "Due now (deposit)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositDue, currency }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(rowClass, "text-xs text-muted-foreground", classNames?.balance), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Balance at appointment" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: balance, currency })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 var FREQUENCY_LABELS = {
   weekly: "Weekly",
   biweekly: "Biweekly",
@@ -8645,7 +8813,7 @@ function groupSlots(slots) {
   }
   return ["morning", "afternoon", "evening"].filter((tod) => groups[tod]?.length).map((tod) => ({ label: TIME_OF_DAY_LABELS[tod], slots: groups[tod] }));
 }
-function formatTime(timeStr) {
+function formatTime2(timeStr) {
   try {
     const date = new Date(timeStr);
     if (!isNaN(date.getTime())) {
@@ -8708,6 +8876,7 @@ function SlotPicker({
   onSlotSelect,
   groupByTimeOfDay = true,
   showPrice = true,
+  lowCapacityThreshold = 3,
   currency,
   schedulingMode = "intraday",
   durationUnit,
@@ -8801,21 +8970,25 @@ function SlotPicker({
                 children: group.slots.map((slot) => {
                   const value = slotToValue(slot);
                   const isSelected = selectedSlot?.start_time === slot.start_time && selectedSlot?.end_time === slot.end_time;
+                  const capacity = slot.capacity_available ?? slot.remaining_capacity;
+                  const soldOut = capacity === 0;
+                  const unavailable = slot.is_available === false || soldOut;
+                  const lowCapacity = lowCapacityThreshold > 0 && capacity != null && capacity > 0 && capacity <= lowCapacityThreshold;
                   return /* @__PURE__ */ jsxRuntime.jsxs(
                     radio.Radio.Root,
                     {
                       value,
-                      disabled: slot.is_available === false,
+                      disabled: unavailable,
                       "data-cimplify-slot": true,
                       "data-selected": isSelected || void 0,
-                      "data-unavailable": slot.is_available === false || void 0,
+                      "data-unavailable": unavailable || void 0,
                       className: cn(
                         "inline-flex items-center justify-center gap-2 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[unavailable]:cursor-not-allowed data-[unavailable]:opacity-40 data-[unavailable]:line-through",
                         isMultiDay && "justify-between text-left",
                         classNames?.slot
                       ),
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime(slot.start_time) }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-slot-time": true, className: classNames?.slotTime, children: isMultiDay ? formatStaySummary(slot, durationUnit, durationValue) : formatTime2(slot.start_time) }),
                         showPrice && slot.price && /* @__PURE__ */ jsxRuntime.jsx(
                           "span",
                           {
@@ -8823,6 +8996,17 @@ function SlotPicker({
                             className: cn("text-xs opacity-70", classNames?.slotPrice),
                             children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: slot.price, currency })
                           }
+                        ),
+                        lowCapacity && /* @__PURE__ */ jsxRuntime.jsxs(
+                          "span",
+                          {
+                            "data-cimplify-slot-scarcity": true,
+                            className: cn("text-xs font-medium text-amber-600", classNames?.slotScarcity),
+                            children: [
+                              capacity,
+                              " left"
+                            ]
+                          }
                         )
                       ]
                     },
@@ -8838,7 +9022,7 @@ function SlotPicker({
     }
   );
 }
-function formatDate(dateStr) {
+function formatDate2(dateStr) {
   const date = /* @__PURE__ */ new Date(dateStr + "T00:00:00");
   return date.toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" });
 }
@@ -8983,7 +9167,7 @@ function DateSlotPicker({
                     "flex flex-col items-center justify-center rounded-md border border-border bg-background px-1 py-2 text-center text-xs font-medium text-foreground transition-colors hover:border-foreground/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background data-[fully-booked]:cursor-not-allowed data-[fully-booked]:opacity-40",
                     classNames?.dateButton
                   ),
-                  children: formatDate(date)
+                  children: formatDate2(date)
                 },
                 date
               );
@@ -9043,6 +9227,7 @@ function ProductCustomizer({
   const [customerInputValues, setCustomerInputValues] = React14.useState({});
   const [specialInstructions, setSpecialInstructions] = React14.useState("");
   const [selectedSlot, setSelectedSlot] = React14.useState(null);
+  const [selectedStaffId, setSelectedStaffId] = React14.useState(null);
   const cart = useCart();
   const currency = chunk7Y2O3E4D_js.getProductCurrency(product);
   const productType = product.type || "product";
@@ -9070,7 +9255,16 @@ function ProductCustomizer({
     setCustomerInputValues({});
     setSpecialInstructions("");
     setSelectedSlot(null);
+    setSelectedStaffId(null);
   }, [product.id, product.min_order_quantity]);
+  const slotStaff = React14.useMemo(
+    () => (selectedSlot?.available_staff ?? []).map((member) => ({
+      id: member.staff_id,
+      name: member.name
+    })),
+    [selectedSlot]
+  );
+  const selectedStaffName = selectedStaffId ? slotStaff.find((member) => member.id === selectedStaffId)?.name ?? null : null;
   const selectedAddOnOptions = React14.useMemo(() => {
     if (!product.add_ons) return [];
     const options = [];
@@ -9182,7 +9376,7 @@ function ProductCustomizer({
       ...isService && selectedSlot ? {
         scheduledStart: selectedSlot.start_time,
         scheduledEnd: selectedSlot.end_time,
-        staffId: selectedSlot.available_staff?.[0]?.staff_id,
+        staffId: selectedStaffId ?? selectedSlot.available_staff?.[0]?.staff_id,
         resourceId: selectedSlot.available_resources?.[0]?.resource_id
       } : {},
       customerInputs: Object.keys(customerInputValues).length > 0 ? Object.entries(customerInputValues).filter(([, v]) => v !== void 0 && v !== "").map(([fieldId, value]) => ({ field_id: fieldId, value })) : void 0,
@@ -9204,7 +9398,7 @@ function ProductCustomizer({
     } finally {
       setIsSubmitting(false);
     }
-  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, isSubmitting, onAddToCart, cart]);
+  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, customerInputValues, specialInstructions, isService, selectedSlot, selectedStaffId, isSubmitting, onAddToCart, cart]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsxRuntime.jsx(
       CompositeSelector,
@@ -9236,11 +9430,30 @@ function ProductCustomizer({
       {
         serviceId: product.id,
         selectedSlot,
-        onSlotSelect: (slot) => setSelectedSlot(slot),
+        onSlotSelect: (slot) => {
+          setSelectedSlot(slot);
+          setSelectedStaffId(null);
+        },
         participantCount: quantity,
         currency
       }
     ),
+    isService && slotStaff.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-customizer-staff": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium uppercase tracking-wider text-muted-foreground mb-3", children: "Choose your specialist" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        StaffPicker,
+        {
+          staff: slotStaff,
+          selectedStaffId,
+          onStaffSelect: setSelectedStaffId,
+          className: "flex flex-wrap gap-2",
+          classNames: {
+            option: "inline-flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:border-foreground/40 cursor-pointer data-[selected]:border-foreground data-[selected]:bg-foreground data-[selected]:text-background",
+            avatar: "w-6 h-6 rounded-full object-cover"
+          }
+        }
+      )
+    ] }),
     hasVariants && /* @__PURE__ */ jsxRuntime.jsx(
       VariantSelector,
       {
@@ -9325,6 +9538,18 @@ function ProductCustomizer({
         )
       }
     ) }),
+    isService && selectedSlot && /* @__PURE__ */ jsxRuntime.jsx(
+      BookingSummary,
+      {
+        slot: selectedSlot,
+        total: displayTotalPrice,
+        staffName: selectedStaffName,
+        durationMinutes: product.duration_minutes,
+        depositType: product.deposit_type,
+        depositAmount: product.deposit_amount,
+        currency
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -9402,9 +9627,15 @@ function ProductImageGallery({
     [images]
   );
   const [selectedImage, setSelectedImage] = React14.useState(0);
+  const [fadeIn, setFadeIn] = React14.useState(true);
   React14.useEffect(() => {
     setSelectedImage(0);
   }, [normalizedImages.length, productName]);
+  React14.useEffect(() => {
+    setFadeIn(false);
+    const id = requestAnimationFrame(() => setFadeIn(true));
+    return () => cancelAnimationFrame(id);
+  }, [selectedImage]);
   if (normalizedImages.length === 0) {
     return null;
   }
@@ -9420,7 +9651,13 @@ function ProductImageGallery({
           {
             src: activeImage,
             alt: productName,
-            style: { width: "100%", height: "100%", objectFit: "cover" },
+            style: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: fadeIn ? 1 : 0,
+              transition: "opacity 300ms ease"
+            },
             "data-cimplify-image-gallery-active": true
           }
         )
@@ -12428,65 +12665,6 @@ function StoreNav({
     ] })
   ] });
 }
-var ANY_VALUE = "__any__";
-function StaffPicker({
-  staff,
-  selectedStaffId,
-  onStaffSelect,
-  showAnyOption = true,
-  anyLabel = "Any available",
-  className,
-  classNames
-}) {
-  const groupValue = selectedStaffId === null ? ANY_VALUE : selectedStaffId ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radioGroup.RadioGroup,
-    {
-      "data-cimplify-staff-picker": true,
-      className: cn(className, classNames?.root),
-      value: groupValue,
-      onValueChange: (value) => {
-        onStaffSelect?.(value === ANY_VALUE ? null : value);
-      },
-      children: [
-        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
-          radio.Radio.Root,
-          {
-            value: ANY_VALUE,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === null || void 0,
-            "data-any": true,
-            className: classNames?.option,
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: anyLabel })
-          }
-        ),
-        staff.map((member) => /* @__PURE__ */ jsxRuntime.jsxs(
-          radio.Radio.Root,
-          {
-            value: member.id,
-            "data-cimplify-staff-option": true,
-            "data-selected": selectedStaffId === member.id || void 0,
-            className: classNames?.option,
-            children: [
-              member.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: member.avatar_url,
-                  alt: member.name,
-                  "data-cimplify-staff-avatar": true,
-                  className: classNames?.avatar
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-name": true, className: classNames?.name, children: member.name }),
-              member.bio && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-staff-bio": true, className: classNames?.bio, children: member.bio })
-            ]
-          },
-          member.id
-        ))
-      ]
-    }
-  );
-}
 var STATUS_LABELS3 = {
   pending: "Pending",
   confirmed: "Confirmed",
@@ -16610,6 +16788,7 @@ exports.BillingPlanSelector = BillingPlanSelector;
 exports.BookingCard = BookingCard;
 exports.BookingList = BookingList;
 exports.BookingPage = BookingPage;
+exports.BookingSummary = BookingSummary;
 exports.BookingsPage = BookingsPage;
 exports.BoxIcon24 = BoxIcon24;
 exports.BundleProductCard = BundleProductCard;