@cimplify/sdk 0.73.0 → 0.75.0

package/dist/react.js

@@ -7311,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",
@@ -8675,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())) {
@@ -8850,7 +8988,7 @@ function SlotPicker({
                         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",
                           {
@@ -8884,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" });
 }
@@ -9029,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
               );
@@ -9089,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";
@@ -9116,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 = [];
@@ -9228,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,
@@ -9250,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,
@@ -9282,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,
       {
@@ -9371,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",
       {
@@ -12486,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",
@@ -16668,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;