@resira/ui 0.4.17 → 0.4.18

package/dist/index.cjs

@@ -304,6 +304,45 @@ function writeCache(cache, key, value, ttlMs) {
     expiresAt: Date.now() + Math.max(1e3, ttlMs)
   });
 }
+function normalizePositiveInt(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return null;
+  const rounded = Math.round(value);
+  return rounded > 0 ? rounded : null;
+}
+function toIsoOrNull(value) {
+  if (typeof value !== "string" || !value.trim()) return null;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  return date.toISOString();
+}
+function withCanonicalPaymentWindow(payload) {
+  const next = { ...payload };
+  const durationMinutes = normalizePositiveInt(next.durationMinutes);
+  if (next.durationMinutes != null && !durationMinutes) {
+    throw new Error("Invalid duration selected.");
+  }
+  if (durationMinutes) {
+    next.durationMinutes = durationMinutes;
+    next.durationHours = Number((durationMinutes / 60).toFixed(6));
+  }
+  const startIso = toIsoOrNull(next.startTime);
+  const endIso = toIsoOrNull(next.endTime);
+  if (startIso) next.startTime = startIso;
+  if (durationMinutes && startIso) {
+    const computedEnd = new Date(
+      new Date(startIso).getTime() + durationMinutes * 6e4
+    ).toISOString();
+    if (!endIso) {
+      next.endTime = computedEnd;
+    } else {
+      const matchesDuration = new Date(endIso).getTime() - new Date(startIso).getTime() === durationMinutes * 6e4;
+      next.endTime = matchesDuration ? endIso : computedEnd;
+    }
+  } else if (endIso) {
+    next.endTime = endIso;
+  }
+  return next;
+}
 async function getDishCompat(client, dishId) {
   const maybeClient = client;
   if (typeof maybeClient.getDish === "function") {
@@ -616,7 +655,8 @@ function usePaymentIntent() {
       setCreating(true);
       setError(null);
       try {
-        const response = await client.createPaymentIntent(data);
+        const payload = withCanonicalPaymentWindow(data);
+        const response = await client.createPaymentIntent(payload);
         setPaymentIntent(response);
         return response;
       } catch (err) {
@@ -2955,6 +2995,15 @@ function formatTime(isoStr) {
     return isoStr;
   }
 }
+function renderTimeRange(start, end) {
+  if (start && end) {
+    return `${formatTime(start)} \u2013 ${formatTime(end)}`;
+  }
+  if (start || end) {
+    return "Time unavailable";
+  }
+  return "Time unavailable";
+}
 function formatPrice4(cents, currency) {
   return new Intl.NumberFormat("default", {
     style: "currency",
@@ -3008,14 +3057,11 @@ function SummaryPreview({
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-value", children: formatDate(selection.startDate) })
           ] })
         ] }),
-        !isDateBased && selection.startTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
+        !isDateBased && (selection.startTime || selection.endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 14 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item-content", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-label", children: "Time" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-summary-item-value", children: [
-              formatTime(selection.startTime),
-              selection.endTime && ` \u2013 ${formatTime(selection.endTime)}`
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-value", children: renderTimeRange(selection.startTime, selection.endTime) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
@@ -3085,14 +3131,11 @@ function ConfirmationView({ reservation }) {
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-value", children: formatDate(reservation.endDate) })
           ] })
         ] }),
-        reservation.startTime && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
+        (reservation.startTime || reservation.endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
           /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { size: 14 }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item-content", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-label", children: "Time" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "resira-summary-item-value", children: [
-              formatTime(reservation.startTime),
-              reservation.endTime && ` \u2013 ${formatTime(reservation.endTime)}`
-            ] })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "resira-summary-item-value", children: renderTimeRange(reservation.startTime, reservation.endTime) })
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "resira-summary-item", children: [
@@ -3280,6 +3323,9 @@ function ResiraBookingWidget() {
     duration: domainConfig.defaultDuration
   });
   const [partySizeByProductId, setPartySizeByProductId] = react.useState({});
+  const slotByProductRef = react.useRef({});
+  const selectionRef = react.useRef(selection);
+  selectionRef.current = selection;
   const [guest, setGuest] = react.useState({
     guestName: "",
     guestEmail: "",
@@ -3296,6 +3342,25 @@ function ResiraBookingWidget() {
     setPromoValidation(result);
   }, []);
   const [slotDate, setSlotDate] = react.useState(todayStr());
+  const handleSlotDateChange = react.useCallback(
+    (date) => {
+      setSlotDate(date);
+      setSelection((s) => {
+        const next = { ...s, startDate: date, endDate: date, startTime: void 0, endTime: void 0 };
+        if (selectedProduct?.id) {
+          slotByProductRef.current[selectedProduct.id] = {
+            ...slotByProductRef.current[selectedProduct.id],
+            startDate: date,
+            endDate: date,
+            startTime: void 0,
+            endTime: void 0
+          };
+        }
+        return next;
+      });
+    },
+    [selectedProduct?.id]
+  );
   const activeDurationMinutes = normalizeDurationMinutes(selection.duration);
   const selectedProductPartyBounds = react.useMemo(
     () => getServicePartySizeBounds(selectedProduct, domainConfig),
@@ -3481,13 +3546,22 @@ function ResiraBookingWidget() {
   );
   const handleSlotSelect = react.useCallback(
     (start, end) => {
-      setSelection((prev) => ({
-        ...prev,
-        startDate: slotDate,
-        endDate: slotDate,
-        startTime: start,
-        endTime: end
-      }));
+      setSelection((prev) => {
+        const next = {
+          ...prev,
+          startDate: slotDate,
+          endDate: slotDate,
+          startTime: start,
+          endTime: end
+        };
+        if (selectedProduct?.id) {
+          slotByProductRef.current[selectedProduct.id] = {
+            ...slotByProductRef.current[selectedProduct.id],
+            ...next
+          };
+        }
+        return next;
+      });
       if (promoterEnabled && promoterMode.autoAdvanceAvailability && step === "availability") {
         const nextIdx = stepIndex(step, STEPS) + 1;
         if (nextIdx < STEPS.length) {
@@ -3495,7 +3569,7 @@ function ResiraBookingWidget() {
         }
       }
     },
-    [slotDate, promoterEnabled, promoterMode.autoAdvanceAvailability, step, STEPS]
+    [slotDate, promoterEnabled, promoterMode.autoAdvanceAvailability, step, STEPS, selectedProduct?.id]
   );
   const handlePartySizeChange = react.useCallback((size) => {
     const clamped = clampPartySize(size, selectedProductPartyBounds);
@@ -3505,15 +3579,40 @@ function ResiraBookingWidget() {
     }
   }, [selectedProduct?.id, selectedProductPartyBounds]);
   const handleDurationChange = react.useCallback((minutes) => {
-    setSelection((prev) => ({
-      ...prev,
-      duration: minutes,
-      startTime: void 0,
-      endTime: void 0
-    }));
-  }, []);
+    setSelection((prev) => {
+      const next = {
+        ...prev,
+        duration: minutes,
+        startTime: void 0,
+        endTime: void 0
+      };
+      if (selectedProduct?.id) {
+        slotByProductRef.current[selectedProduct.id] = {
+          ...slotByProductRef.current[selectedProduct.id],
+          duration: minutes,
+          startTime: void 0,
+          endTime: void 0
+        };
+      }
+      return next;
+    });
+  }, [selectedProduct?.id]);
   const handleProductSelect = react.useCallback(
     (product) => {
+      if (selectedProduct?.id) {
+        const s = selectionRef.current;
+        slotByProductRef.current[selectedProduct.id] = {
+          startTime: s.startTime,
+          endTime: s.endTime,
+          startDate: s.startDate,
+          endDate: s.endDate,
+          duration: s.duration
+        };
+      }
+      const saved = slotByProductRef.current[product.id] ?? {};
+      if (saved.startDate && typeof saved.startDate === "string" && saved.startDate.length >= 10) {
+        setSlotDate(saved.startDate.slice(0, 10));
+      }
       setSelectedProduct(product);
       if (product.equipmentIds?.length) {
         setActiveResourceId(product.equipmentIds[0]);
@@ -3525,9 +3624,10 @@ function ResiraBookingWidget() {
           persistedPartySize ?? prev.partySize,
           bounds
         );
-        const defaultDuration = product.durationPricing?.[0]?.durationMinutes ?? product.durationMinutes ?? prev.duration;
+        const defaultDuration = saved.duration ?? product.durationPricing?.[0]?.durationMinutes ?? product.durationMinutes ?? prev.duration;
         return {
           ...prev,
+          ...saved,
           productId: product.id,
           duration: defaultDuration,
           partySize: nextPartySize
@@ -3549,7 +3649,7 @@ function ResiraBookingWidget() {
         }
       }
     },
-    [setActiveResourceId, domainConfig, partySizeByProductId, selection.partySize, step, isServiceBased, STEPS]
+    [setActiveResourceId, domainConfig, partySizeByProductId, selection.partySize, step, isServiceBased, STEPS, selectedProduct?.id]
   );
   const handleResourceSelect = react.useCallback(
     (resourceId) => {
@@ -3870,7 +3970,7 @@ function ResiraBookingWidget() {
           {
             timeSlots: availability?.timeSlots ?? [],
             selectedDate: slotDate,
-            onDateChange: setSlotDate,
+            onDateChange: handleSlotDateChange,
             selectedSlot: selection.startTime,
             onSlotSelect: handleSlotSelect,
             partySize: selection.partySize,