@resira/ui 0.4.18 → 0.4.20

package/dist/index.cjs

@@ -62,7 +62,10 @@ var DEFAULT_LOCALE = {
   contactHint: "Please provide at least a phone number or email",
   restaurantNotesPlaceholder: "Allergies, special requests...",
   reserveTable: "Reserve a table",
-  reservationFor: "Reservation for"
+  reservationFor: "Reservation for",
+  slotHoldReserved: "Reserved for you",
+  slotSoldOut: "This slot just sold out. Pick another time.",
+  slotHoldExpired: "Your hold expired. Please choose a time again."
 };
 
 // src/theme.ts
@@ -240,6 +243,7 @@ function ResiraProvider({
     () => ({ ...DEFAULT_PROMOTER_MODE, ...config?.promoterMode }),
     [config?.promoterMode]
   );
+  const slotHoldsEnabled = config?.slotHoldsEnabled ?? true;
   const showStepIndicator = config?.showStepIndicator ?? (promoterMode.enabled ? promoterMode.showStepIndicator : true);
   const deeplink = config?.deeplink;
   const deeplinkGuest = config?.deeplinkGuest;
@@ -280,9 +284,10 @@ function ResiraProvider({
       onBookingComplete,
       onError,
       checkoutSessionToken,
-      promoterMode
+      promoterMode,
+      slotHoldsEnabled
     }),
-    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError, checkoutSessionToken, promoterMode]
+    [client, resourceId, activeResourceId, setActiveResourceId, catalogMode, allowMultiSelect, domain, theme, locale, domainConfig, stripePublishableKey, termsText, waiverText, showWaiver, showTerms, showRemainingSpots, depositPercent, refundPolicy, onClose, classNames, serviceLayout, visibleServiceCount, groupServicesByCategory, renderServiceCard, showStepIndicator, deeplink, deeplinkGuest, onStepChange, onBookingComplete, onError, checkoutSessionToken, promoterMode, slotHoldsEnabled]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ResiraContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-root", style: cssVars, children }) });
 }
@@ -3203,6 +3208,175 @@ function clampPartySize(value, bounds) {
   if (!Number.isFinite(value)) return bounds.min;
   return Math.min(bounds.max, Math.max(bounds.min, Math.round(value)));
 }
+function parseSlotHoldError(err) {
+  if (err instanceof sdk.ResiraApiError) {
+    const raw = `${err.body.code ?? ""} ${err.body.error ?? ""}`.toUpperCase();
+    const message2 = err.body.error || err.message;
+    if (raw.includes("SLOT_UNAVAILABLE")) return { code: "SLOT_UNAVAILABLE", message: message2 };
+    if (raw.includes("HOLD_EXPIRED")) return { code: "HOLD_EXPIRED", message: message2 };
+    if (raw.includes("HOLD_MISMATCH")) return { code: "HOLD_MISMATCH", message: message2 };
+    if (raw.includes("HOLD_NOT_FOUND")) return { code: "HOLD_NOT_FOUND", message: message2 };
+    if (raw.includes("HOLD_NOT_ACTIVE")) return { code: "HOLD_NOT_ACTIVE", message: message2 };
+    if (err.status === 409) return { code: "SLOT_UNAVAILABLE", message: message2 };
+    return { code: "UNKNOWN", message: message2 };
+  }
+  const message = err instanceof Error ? err.message : "Slot hold failed";
+  return { code: "UNKNOWN", message };
+}
+function useSlotHold(options) {
+  const {
+    client,
+    enabled,
+    productId,
+    startTime,
+    durationMinutes,
+    partySize,
+    resourceId,
+    sessionToken,
+    onSlotUnavailable,
+    onHoldExpired
+  } = options;
+  const [lastHold, setLastHold] = react.useState(null);
+  const [creating, setCreating] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [parsedCode, setParsedCode] = react.useState(null);
+  const [remainingSeconds, setRemainingSeconds] = react.useState(null);
+  const holdIdRef = react.useRef(null);
+  const serverOffsetMs = react.useRef(0);
+  const expiredFired = react.useRef(false);
+  const onHoldExpiredRef = react.useRef(onHoldExpired);
+  onHoldExpiredRef.current = onHoldExpired;
+  const onSlotUnavailableRef = react.useRef(onSlotUnavailable);
+  onSlotUnavailableRef.current = onSlotUnavailable;
+  const slotKey = react.useMemo(
+    () => enabled && productId && startTime && durationMinutes && partySize ? `${productId}|${startTime}|${durationMinutes}|${partySize}|${resourceId ?? ""}|${sessionToken ?? ""}` : "",
+    [enabled, productId, startTime, durationMinutes, partySize, resourceId, sessionToken]
+  );
+  const release = react.useCallback(async () => {
+    const id = holdIdRef.current;
+    if (!id) return;
+    holdIdRef.current = null;
+    try {
+      await client.releaseSlotHold(id);
+    } catch {
+    }
+    setLastHold(null);
+    setRemainingSeconds(null);
+  }, [client]);
+  react.useEffect(() => {
+    expiredFired.current = false;
+    if (!enabled || !slotKey) {
+      void release();
+      setError(null);
+      setParsedCode(null);
+      setCreating(false);
+      return;
+    }
+    let cancelled = false;
+    async function run() {
+      setCreating(true);
+      setError(null);
+      setParsedCode(null);
+      try {
+        if (holdIdRef.current) {
+          const prev = holdIdRef.current;
+          holdIdRef.current = null;
+          try {
+            await client.releaseSlotHold(prev);
+          } catch {
+          }
+        }
+        const res = await client.createSlotHold(
+          productId,
+          {
+            startTime,
+            durationMinutes,
+            partySize,
+            ...resourceId ? { resourceId } : {},
+            ...sessionToken ? { sessionToken } : {}
+          }
+        );
+        if (cancelled) return;
+        holdIdRef.current = res.holdId;
+        serverOffsetMs.current = new Date(res.serverNow).getTime() - Date.now();
+        setLastHold(res);
+        const rem = Math.max(
+          0,
+          Math.floor(
+            (new Date(res.expiresAt).getTime() - (Date.now() + serverOffsetMs.current)) / 1e3
+          )
+        );
+        setRemainingSeconds(rem);
+      } catch (err) {
+        if (cancelled) return;
+        holdIdRef.current = null;
+        setLastHold(null);
+        setRemainingSeconds(null);
+        const parsed = parseSlotHoldError(err);
+        setParsedCode(parsed.code);
+        setError(parsed.message);
+        if (parsed.code === "SLOT_UNAVAILABLE" || err instanceof sdk.ResiraApiError && err.status === 409) {
+          onSlotUnavailableRef.current?.();
+        }
+      } finally {
+        if (!cancelled) setCreating(false);
+      }
+    }
+    void run();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, enabled, slotKey, productId, startTime, durationMinutes, partySize, resourceId, sessionToken, release]);
+  react.useEffect(() => {
+    if (!lastHold?.expiresAt) {
+      setRemainingSeconds(null);
+      return;
+    }
+    const tick = () => {
+      const end = new Date(lastHold.expiresAt).getTime();
+      const now = Date.now() + serverOffsetMs.current;
+      const rem = Math.max(0, Math.floor((end - now) / 1e3));
+      setRemainingSeconds(rem);
+      if (rem <= 0 && !expiredFired.current) {
+        expiredFired.current = true;
+        holdIdRef.current = null;
+        onHoldExpiredRef.current?.();
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, 1e3);
+    return () => window.clearInterval(id);
+  }, [lastHold]);
+  react.useEffect(() => {
+    return () => {
+      const id = holdIdRef.current;
+      if (id) {
+        holdIdRef.current = null;
+        void client.releaseSlotHold(id).catch(() => {
+        });
+      }
+    };
+  }, [client]);
+  const holdReady = react.useMemo(() => {
+    if (!enabled) return true;
+    if (creating) return false;
+    if (error) return false;
+    return !!lastHold?.holdId;
+  }, [enabled, creating, error, lastHold?.holdId]);
+  return {
+    holdId: lastHold?.holdId ?? null,
+    holdExpiresAt: lastHold?.expiresAt ?? null,
+    heldResourceId: lastHold?.resourceId ?? null,
+    remainingSeconds,
+    creating,
+    error,
+    parsedErrorCode: parsedCode,
+    holdReady,
+    release,
+    serverNow: lastHold?.serverNow ?? null,
+    lastHold
+  };
+}
 function todayStr() {
   const d = /* @__PURE__ */ new Date();
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
@@ -3221,6 +3395,12 @@ function normalizeDurationMinutes(value) {
   }
   return void 0;
 }
+function formatHoldCountdown(totalSeconds) {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  const m = Math.floor(s / 60);
+  const r = s % 60;
+  return `${m}:${String(r).padStart(2, "0")}`;
+}
 function buildSteps(domain, hasPayment, catalogMode) {
   const steps = [];
   if (domain === "watersport" || domain === "service" || catalogMode && domain !== "restaurant") {
@@ -3251,6 +3431,7 @@ var STEP_LABELS = {
 };
 function ResiraBookingWidget() {
   const {
+    client,
     domain,
     locale,
     domainConfig,
@@ -3271,7 +3452,8 @@ function ResiraBookingWidget() {
     onBookingComplete,
     onError,
     checkoutSessionToken,
-    promoterMode
+    promoterMode,
+    slotHoldsEnabled
   } = useResira();
   const isDateBased = domain === "rental";
   const isTimeBased = domain === "restaurant" || domain === "watersport" || domain === "service";
@@ -3403,6 +3585,26 @@ function ResiraBookingWidget() {
     confirming: confirmingPayment,
     reset: resetPaymentIntent
   } = usePaymentIntent();
+  const slotHold = useSlotHold({
+    client,
+    enabled: slotHoldsEnabled && isServiceBased && !isCheckoutMode && !!selectedProduct?.id && !!selection.startTime && !!selection.endTime && !!activeDurationMinutes,
+    productId: selectedProduct?.id,
+    startTime: selection.startTime,
+    durationMinutes: activeDurationMinutes ?? void 0,
+    partySize: selection.partySize,
+    resourceId: activeResourceId ?? selectedProduct?.equipmentIds?.[0],
+    onSlotUnavailable: () => {
+      void refetch();
+      setSelection((s) => ({ ...s, startTime: void 0, endTime: void 0 }));
+      onError?.("slot_unavailable", locale.slotSoldOut);
+    },
+    onHoldExpired: () => {
+      setStep("availability");
+      resetPaymentIntent();
+      void refetch();
+      onError?.("hold_expired", locale.slotHoldExpired);
+    }
+  });
   const [paymentSubmitRequestId, setPaymentSubmitRequestId] = react.useState(0);
   const [paymentFormReady, setPaymentFormReady] = react.useState(false);
   const [paymentFormSubmitting, setPaymentFormSubmitting] = react.useState(false);
@@ -3414,7 +3616,8 @@ function ResiraBookingWidget() {
         guestEmail: guest.guestEmail.trim() || checkoutSession.guestEmail || void 0,
         guestPhone: guest.guestPhone.trim() || void 0,
         notes: guest.notes.trim() || void 0,
-        termsAccepted: termsAccepted || void 0
+        termsAccepted: termsAccepted || void 0,
+        ...checkoutSession.holdId ? { holdId: checkoutSession.holdId } : {}
       };
     }
     const resourceId = activeResourceId ?? selectedProduct?.equipmentIds?.[0] ?? "";
@@ -3432,9 +3635,10 @@ function ResiraBookingWidget() {
       notes: guest.notes.trim() || void 0,
       promoCode: discountCode.trim() || void 0,
       termsAccepted: termsAccepted || void 0,
-      waiverAccepted: waiverAccepted || void 0
+      waiverAccepted: waiverAccepted || void 0,
+      ...slotHold.holdId ? { holdId: slotHold.holdId } : {}
     };
-  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted, waiverAccepted, isCheckoutMode, checkoutSession, checkoutSessionToken, activeDurationMinutes]);
+  }, [activeResourceId, selectedProduct, selection, guest, discountCode, termsAccepted, waiverAccepted, isCheckoutMode, checkoutSession, checkoutSessionToken, activeDurationMinutes, slotHold.holdId]);
   const blockedDates = react.useMemo(() => {
     const dates = calendarData?.dates?.blockedDates ?? availability?.dates?.blockedDates ?? [];
     return new Set(dates);
@@ -3523,15 +3727,24 @@ function ResiraBookingWidget() {
     }
     if (step === "availability") {
       if (isDateBased) return !!selection.startDate && !!selection.endDate;
-      return !!selection.startTime && !!selection.endTime;
+      const base = !!selection.startTime && !!selection.endTime;
+      if (!base) return false;
+      if (slotHoldsEnabled && isServiceBased) {
+        return slotHold.holdReady && !slotHold.creating;
+      }
+      return true;
     }
     if (step === "terms") {
       const needTerms = showTerms && !termsAccepted;
       const needWaiver = showWaiver && !waiverAccepted;
-      return !needTerms && !needWaiver;
+      if (needTerms || needWaiver) return false;
+      if (slotHoldsEnabled && isServiceBased && !isCheckoutMode) {
+        return !!slotHold.holdId && slotHold.remainingSeconds != null && slotHold.remainingSeconds > 0;
+      }
+      return true;
     }
     return true;
-  }, [step, isDateBased, isServiceBased, selection, selectedResourceIds, selectedProduct, termsAccepted, waiverAccepted, showTerms, showWaiver]);
+  }, [step, isDateBased, isServiceBased, selection, selectedResourceIds, selectedProduct, termsAccepted, waiverAccepted, showTerms, showWaiver, slotHoldsEnabled, slotHold, isCheckoutMode]);
   const handleDateSelect = react.useCallback(
     (start, end) => {
       setSelection((prev) => ({ ...prev, startDate: start, endDate: end }));
@@ -3562,14 +3775,15 @@ function ResiraBookingWidget() {
         }
         return next;
       });
-      if (promoterEnabled && promoterMode.autoAdvanceAvailability && step === "availability") {
+      const deferPromoterAdvance = slotHoldsEnabled && isServiceBased;
+      if (promoterEnabled && promoterMode.autoAdvanceAvailability && !deferPromoterAdvance && step === "availability") {
         const nextIdx = stepIndex(step, STEPS) + 1;
         if (nextIdx < STEPS.length) {
           setStep(STEPS[nextIdx]);
         }
       }
     },
-    [slotDate, promoterEnabled, promoterMode.autoAdvanceAvailability, step, STEPS, selectedProduct?.id]
+    [slotDate, promoterEnabled, promoterMode.autoAdvanceAvailability, step, STEPS, selectedProduct?.id, slotHoldsEnabled, isServiceBased]
   );
   const handlePartySizeChange = react.useCallback((size) => {
     const clamped = clampPartySize(size, selectedProductPartyBounds);
@@ -3624,11 +3838,14 @@ function ResiraBookingWidget() {
           persistedPartySize ?? prev.partySize,
           bounds
         );
+        const hasSavedSlot = !!saved.startTime && !!saved.endTime;
         const defaultDuration = saved.duration ?? product.durationPricing?.[0]?.durationMinutes ?? product.durationMinutes ?? prev.duration;
         return {
-          ...prev,
-          ...saved,
           productId: product.id,
+          startDate: saved.startDate ?? slotDate,
+          endDate: saved.endDate ?? slotDate,
+          startTime: hasSavedSlot ? saved.startTime : void 0,
+          endTime: hasSavedSlot ? saved.endTime : void 0,
           duration: defaultDuration,
           partySize: nextPartySize
         };
@@ -3649,7 +3866,7 @@ function ResiraBookingWidget() {
         }
       }
     },
-    [setActiveResourceId, domainConfig, partySizeByProductId, selection.partySize, step, isServiceBased, STEPS, selectedProduct?.id]
+    [setActiveResourceId, domainConfig, partySizeByProductId, selection.partySize, step, isServiceBased, STEPS, selectedProduct?.id, slotDate]
   );
   const handleResourceSelect = react.useCallback(
     (resourceId) => {
@@ -3965,27 +4182,36 @@ function ResiraBookingWidget() {
             minStay: domainConfig.minStay
           }
         ),
-        isTimeBased && /* @__PURE__ */ jsxRuntime.jsx(
-          TimeSlotPicker,
-          {
-            timeSlots: availability?.timeSlots ?? [],
-            selectedDate: slotDate,
-            onDateChange: handleSlotDateChange,
-            selectedSlot: selection.startTime,
-            onSlotSelect: handleSlotSelect,
-            partySize: selection.partySize,
-            onPartySizeChange: handlePartySizeChange,
-            showPartySize: true,
-            showDuration: domain === "watersport" || domain === "service",
-            selectedDuration: activeDurationMinutes,
-            onDurationChange: handleDurationChange,
-            minPartySizeOverride: selectedProductPartyBounds.min,
-            maxPartySizeOverride: selectedProductPartyBounds.max,
-            durationPricing: activeRiderDurationPricing ?? selectedProduct?.durationPricing,
-            currency,
-            showRemainingSpots
-          }
-        ),
+        isTimeBased && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TimeSlotPicker,
+            {
+              timeSlots: availability?.timeSlots ?? [],
+              selectedDate: slotDate,
+              onDateChange: handleSlotDateChange,
+              selectedSlot: selection.startTime,
+              onSlotSelect: handleSlotSelect,
+              partySize: selection.partySize,
+              onPartySizeChange: handlePartySizeChange,
+              showPartySize: true,
+              showDuration: domain === "watersport" || domain === "service",
+              selectedDuration: activeDurationMinutes,
+              onDurationChange: handleDurationChange,
+              minPartySizeOverride: selectedProductPartyBounds.min,
+              maxPartySizeOverride: selectedProductPartyBounds.max,
+              durationPricing: activeRiderDurationPricing ?? selectedProduct?.durationPricing,
+              currency,
+              showRemainingSpots
+            }
+          ),
+          slotHoldsEnabled && isServiceBased && selection.startTime && selection.endTime && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            slotHold.creating && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: 10, fontSize: 14, opacity: 0.85 }, role: "status", children: locale.loading }),
+            slotHold.error && !slotHold.creating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", style: { marginTop: 10 }, role: "alert", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 18 }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: slotHold.error })
+            ] })
+          ] })
+        ] }),
         isServiceBased && selectedProduct && computedPrice && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-price-preview", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-price-preview-row", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
@@ -4048,6 +4274,30 @@ function ResiraBookingWidget() {
         ] })
       ] }),
       step === "terms" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        slotHoldsEnabled && isServiceBased && !isCheckoutMode && slotHold.holdId && slotHold.remainingSeconds != null && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginBottom: 14,
+              padding: "10px 12px",
+              borderRadius: 8,
+              fontSize: 14,
+              background: slotHold.remainingSeconds <= 60 ? "rgba(220, 38, 38, 0.08)" : "rgba(59, 130, 246, 0.08)",
+              border: `1px solid ${slotHold.remainingSeconds <= 60 ? "rgba(220, 38, 38, 0.22)" : "rgba(59, 130, 246, 0.2)"}`
+            },
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              locale.slotHoldReserved,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                "(",
+                formatHoldCountdown(slotHold.remainingSeconds),
+                ")"
+              ] })
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           SummaryPreview,
           {
@@ -4167,6 +4417,30 @@ function ResiraBookingWidget() {
         ] })
       ] }),
       step === "payment" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        slotHoldsEnabled && isServiceBased && !isCheckoutMode && slotHold.holdId && slotHold.remainingSeconds != null && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginBottom: 14,
+              padding: "10px 12px",
+              borderRadius: 8,
+              fontSize: 14,
+              background: slotHold.remainingSeconds <= 60 ? "rgba(220, 38, 38, 0.08)" : "rgba(59, 130, 246, 0.08)",
+              border: `1px solid ${slotHold.remainingSeconds <= 60 ? "rgba(220, 38, 38, 0.22)" : "rgba(59, 130, 246, 0.2)"}`
+            },
+            role: "status",
+            "aria-live": "polite",
+            children: [
+              locale.slotHoldReserved,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                "(",
+                formatHoldCountdown(slotHold.remainingSeconds),
+                ")"
+              ] })
+            ]
+          }
+        ),
         paymentError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-error", children: [
           /* @__PURE__ */ jsxRuntime.jsx(AlertCircleIcon, { size: 24 }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "resira-error-message", children: paymentError })
@@ -4337,7 +4611,7 @@ function ResiraBookingWidget() {
           onClick: () => {
             void handleStartPayment();
           },
-          disabled: footerBusy,
+          disabled: footerBusy || slotHoldsEnabled && isServiceBased && !isCheckoutMode && (!slotHold.holdId || (slotHold.remainingSeconds ?? 0) <= 0),
           children: creatingPayment ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "resira-spinner", style: { width: 16, height: 16 } }),
             locale.processingPayment
@@ -4879,6 +5153,7 @@ exports.ViewfinderIcon = ViewfinderIcon;
 exports.WaiverConsent = WaiverConsent;
 exports.XIcon = XIcon;
 exports.fetchServices = fetchServices;
+exports.parseSlotHoldError = parseSlotHoldError;
 exports.resolveServicePrice = resolveServicePrice;
 exports.resolveTheme = resolveTheme;
 exports.themeToCSS = themeToCSS;
@@ -4892,6 +5167,7 @@ exports.useReservation = useReservation;
 exports.useResira = useResira;
 exports.useResources = useResources;
 exports.useServices = useServices;
+exports.useSlotHold = useSlotHold;
 exports.validateGuestForm = validateGuestForm;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map