@loczer/storefront-sdk 0.187.0 → 0.189.0

package/dist/components/BookingPeriodSelector/components/BookingMobileDateDrawer.js

@@ -2,133 +2,134 @@ import { Button as e, buttonVariants as t } from "../../../ui/button.js";
 import { useBookingPeriod as n } from "../BookingPeriodContext.js";
 import { DayPicker as r } from "../../../ui/day-picker.js";
 import { Drawer as i, DrawerContent as a, DrawerHeader as o, DrawerTitle as s } from "../../../ui/drawer.js";
-import { addMonths as c, differenceInCalendarDays as l, endOfMonth as u, isSameDay as d, startOfMonth as f } from "date-fns";
-import { useEffect as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { cn as v } from "@rpcbase/ui";
-import { DayButton as y } from "react-day-picker";
+import { BookingTimeSlotsStatus as c } from "./BookingTimeSlotsStatus.js";
+import { addMonths as l, differenceInCalendarDays as u, endOfMonth as d, isSameDay as f, startOfMonth as p } from "date-fns";
+import { useEffect as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { cn as y } from "@rpcbase/ui";
+import { DayButton as b } from "react-day-picker";
 //#region src/components/BookingPeriodSelector/components/BookingMobileDateDrawer.tsx
-var b = y, x = 1, S = v(t({ variant: "outline" }), "z-10 h-11 w-11 bg-background p-0 opacity-100 shadow-sm [&_svg]:size-5"), C = {
+var x = b, S = 1, C = y(t({ variant: "outline" }), "z-10 h-11 w-11 bg-background p-0 opacity-100 shadow-sm [&_svg]:size-5"), w = {
 	months: "relative flex w-full flex-col",
 	month: "mobile-date-calendar-month w-full space-y-3",
 	month_caption: "flex h-11 items-center justify-center pt-0 relative",
 	caption_label: "mobile-date-calendar-caption text-base font-semibold",
 	nav: "absolute inset-x-0 top-0 flex items-center justify-between",
-	button_previous: S,
-	button_next: S,
+	button_previous: C,
+	button_next: C,
 	month_grid: "w-full border-collapse space-y-1",
 	weekdays: "grid grid-cols-7",
 	weekday: "w-full rounded-md text-muted-foreground font-normal text-xs",
 	week: "grid w-full grid-cols-7 gap-y-2",
 	day: "h-11 w-full overflow-visible p-0 font-normal aria-selected:opacity-100 rounded-md first:aria-selected:rounded-l-md last:aria-selected:rounded-r-md",
 	day_button: "relative inline-flex h-11 w-full items-center justify-center overflow-visible rounded-md p-0 text-base font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
-}, w = (e) => `${e.getFullYear()}-${e.getMonth()}`, T = (e) => {
+}, T = (e) => `${e.getFullYear()}-${e.getMonth()}`, E = (e) => {
 	let [t = "0", n = "0"] = e.split("-");
 	return new Date(Number(t), Number(n), 1);
-}, E = (e, t, n) => e ? d(e, u(e)) ? c(f(e), 1) : f(e) : f(t ?? n), D = (e) => {
-	if (!(!e || !d(e, u(e)))) return c(f(e), 1);
-}, O = () => {
-	let { labels: t, startDate: c, endDate: u, selectStartDate: y, selectEndDate: S, isStartDatePopoverOpen: O, setIsStartDatePopoverOpen: k, isEndDatePopoverOpen: A, setIsEndDatePopoverOpen: j, resetHoveredEndDate: M, dateLocale: N, isMobile: P, withMobileDateDrawer: F, minSelectableDate: I } = n(), L = F && P && (O || A), R = A && !O ? "end" : "start", z = w(I), B = w(E(c, u, I)), [V, H] = h(() => f(I)), [U, W] = h(() => T(B)), G = m(!0), K = m(!1), q = c && (u ?? c) >= c ? l(u ?? c, c) + 1 : null, J = u ?? c;
-	if (p(() => {
-		!L || R !== "start" || H(f(I));
+}, D = (e, t, n) => e ? f(e, d(e)) ? l(p(e), 1) : p(e) : p(t ?? n), O = (e) => {
+	if (!(!e || !f(e, d(e)))) return l(p(e), 1);
+}, k = () => {
+	let { labels: t, startDate: l, endDate: d, selectStartDate: b, selectEndDate: C, isStartDatePopoverOpen: k, setIsStartDatePopoverOpen: A, isEndDatePopoverOpen: j, setIsEndDatePopoverOpen: M, resetHoveredEndDate: N, dateLocale: P, isMobile: F, withMobileDateDrawer: I, minSelectableDate: L, canCommitTimeSlots: R } = n(), z = I && F && (k || j), B = j && !k ? "end" : "start", V = T(L), H = T(D(l, d, L)), [U, W] = g(() => p(L)), [G, K] = g(() => E(H)), q = h(!0), J = h(!1), Y = l && (d ?? l) >= l ? u(d ?? l, l) + 1 : null, X = d ?? l;
+	if (m(() => {
+		!z || B !== "start" || W(p(L));
 	}, [
-		R,
-		L,
-		z
-	]), p(() => {
-		!L || R !== "end" || W(T(B));
+		B,
+		z,
+		V
+	]), m(() => {
+		!z || B !== "end" || K(E(H));
 	}, [
-		R,
 		B,
-		L
-	]), p(() => {
-		if (!L || typeof document > "u") return;
+		H,
+		z
+	]), m(() => {
+		if (!z || typeof document > "u") return;
 		let e = window.scrollY, { body: t, documentElement: n } = document, r = {
 			overflow: t.style.overflow,
 			position: t.style.position,
 			top: t.style.top,
 			width: t.style.width
 		}, i = n.style.overscrollBehavior;
-		return G.current = !0, t.style.overflow = "hidden", t.style.position = "fixed", t.style.top = `-${e}px`, t.style.width = "100%", n.style.overscrollBehavior = "none", () => {
-			t.style.overflow = r.overflow, t.style.position = r.position, t.style.top = r.top, t.style.width = r.width, n.style.overscrollBehavior = i, G.current && window.scrollTo(0, e);
+		return q.current = !0, t.style.overflow = "hidden", t.style.position = "fixed", t.style.top = `-${e}px`, t.style.width = "100%", n.style.overscrollBehavior = "none", () => {
+			t.style.overflow = r.overflow, t.style.position = r.position, t.style.top = r.top, t.style.width = r.width, n.style.overscrollBehavior = i, q.current && window.scrollTo(0, e);
 		};
-	}, [L]), !F || !P) return null;
-	let Y = (e) => {
+	}, [z]), !I || !F) return null;
+	let Z = (e) => {
 		if (e === "end") {
-			let e = D(c);
-			e && !u && !K.current ? (W(f(e)), S(e, {
+			let e = O(l);
+			e && !d && !J.current ? (K(p(e)), C(e, {
 				close: !1,
 				commit: !1
-			})) : W(T(B));
+			})) : K(E(H));
 		}
-		k(e === "start"), j(e === "end");
-	}, X = () => {
-		k(!1), j(!1), M();
+		A(e === "start"), M(e === "end");
+	}, Q = () => {
+		A(!1), M(!1), N();
 	};
-	return /* @__PURE__ */ g(i, {
-		open: L,
+	return /* @__PURE__ */ _(i, {
+		open: z,
 		lockScroll: !1,
 		onOpenChange: (e) => {
-			e || X();
+			e || Q();
 		},
-		children: /* @__PURE__ */ _(a, {
+		children: /* @__PURE__ */ v(a, {
 			className: "overflow-hidden",
 			closeLabel: t.closeDrawer,
 			showCloseButton: !0,
-			children: [/* @__PURE__ */ _(o, {
+			children: [/* @__PURE__ */ v(o, {
 				className: "border-b px-16 pb-3 pt-4 text-left",
-				children: [/* @__PURE__ */ g(s, {
+				children: [/* @__PURE__ */ _(s, {
 					className: "sr-only",
-					children: R === "start" ? t.startDate : t.endDate
-				}), /* @__PURE__ */ _("div", {
+					children: B === "start" ? t.startDate : t.endDate
+				}), /* @__PURE__ */ v("div", {
 					className: "relative grid grid-cols-2 rounded-md bg-muted p-1",
 					"aria-label": t.rentalPeriod,
 					children: [
-						/* @__PURE__ */ g("span", {
+						/* @__PURE__ */ _("span", {
 							"aria-hidden": "true",
-							className: v("absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded bg-background shadow-sm transition-transform duration-300 ease-out", R === "end" && "translate-x-full")
+							className: y("absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded bg-background shadow-sm transition-transform duration-300 ease-out", B === "end" && "translate-x-full")
 						}),
-						/* @__PURE__ */ g("button", {
+						/* @__PURE__ */ _("button", {
 							type: "button",
-							"aria-pressed": R === "start",
-							className: v("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", R === "start" ? "text-foreground" : "text-muted-foreground"),
-							onClick: () => Y("start"),
+							"aria-pressed": B === "start",
+							className: y("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", B === "start" ? "text-foreground" : "text-muted-foreground"),
+							onClick: () => Z("start"),
 							children: t.startDate
 						}),
-						/* @__PURE__ */ g("button", {
+						/* @__PURE__ */ _("button", {
 							type: "button",
-							"aria-pressed": R === "end",
-							className: v("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", R === "end" ? "text-foreground" : "text-muted-foreground"),
-							onClick: () => Y("end"),
+							"aria-pressed": B === "end",
+							className: y("relative z-10 h-9 rounded px-3 text-sm font-medium transition-colors", B === "end" ? "text-foreground" : "text-muted-foreground"),
+							onClick: () => Z("end"),
 							children: t.endDate
 						})
 					]
 				})]
-			}), /* @__PURE__ */ g("div", {
+			}), /* @__PURE__ */ _("div", {
 				className: "overflow-hidden px-4 py-4",
-				children: /* @__PURE__ */ _("div", {
-					className: v("flex w-[200%] transition-transform duration-300 ease-out", R === "end" && "-translate-x-1/2"),
-					children: [/* @__PURE__ */ g("section", {
+				children: /* @__PURE__ */ v("div", {
+					className: y("flex w-[200%] transition-transform duration-300 ease-out", B === "end" && "-translate-x-1/2"),
+					children: [/* @__PURE__ */ _("section", {
 						className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pr-4",
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ v("div", {
 							className: "flex flex-col gap-4",
-							children: [/* @__PURE__ */ g(r, {
+							children: [/* @__PURE__ */ _(r, {
 								id: "start-date-calendar",
 								mode: "single",
-								locale: N,
+								locale: P,
 								showOutsideDays: !1,
-								numberOfMonths: x,
+								numberOfMonths: S,
 								required: !0,
-								selected: c,
-								month: V,
-								onMonthChange: (e) => H(f(e)),
-								disabled: (e) => e < I,
+								selected: l,
+								month: U,
+								onMonthChange: (e) => W(p(e)),
+								disabled: (e) => e < L,
 								onSelect: (e) => {
-									let t = e ?? void 0, n = t != null && (c == null || !d(t, c)), r = D(t);
-									n && (K.current = !1), W(E(t, u, I)), y(t, {
+									let t = e ?? void 0, n = t != null && (l == null || !f(t, l)), r = O(t);
+									n && (J.current = !1), K(D(t, d, L)), b(t, {
 										close: !1,
 										openEndDatePicker: !1
-									}), n && S(r, {
+									}), n && C(r, {
 										close: !1,
 										commit: !1
 									});
@@ -136,70 +137,74 @@ var b = y, x = 1, S = v(t({ variant: "outline" }), "z-10 h-11 w-11 bg-background
 								autoFocus: !0,
 								"data-testid": "start-date-calendar",
 								className: "w-full p-0",
-								classNames: C
-							}), /* @__PURE__ */ g(e, {
+								classNames: w
+							}), /* @__PURE__ */ _(e, {
 								type: "button",
 								className: "h-12 w-full text-base font-semibold",
-								disabled: !c,
+								disabled: !l,
 								"data-testid": "start-date-drawer-next",
 								onClick: () => {
-									c && Y("end");
+									l && Z("end");
 								},
 								children: t.dateDrawerNext
 							})]
 						})
-					}), /* @__PURE__ */ g("section", {
+					}), /* @__PURE__ */ _("section", {
 						className: "max-h-[calc(95dvh-9rem)] w-1/2 shrink-0 overflow-y-auto pl-4",
-						children: /* @__PURE__ */ _("div", {
+						children: /* @__PURE__ */ v("div", {
 							className: "flex flex-col gap-4",
-							children: [/* @__PURE__ */ g(r, {
-								id: "end-date-calendar",
-								mode: "range",
-								locale: N,
-								showOutsideDays: !1,
-								numberOfMonths: x,
-								selected: {
-									from: c,
-									to: u
-								},
-								month: U,
-								onMonthChange: (e) => W(f(e)),
-								disabled: (e) => c && e < c || e < I,
-								onSelect: (e, t) => {
-									K.current = !0, S(t ?? void 0, {
-										close: !1,
-										commit: !1
-									});
-								},
-								autoFocus: !0,
-								"data-testid": "end-date-calendar",
-								className: "w-full p-0",
-								classNames: C,
-								components: { DayButton: (e) => {
-									let n = q != null && J != null && !e.modifiers.disabled && d(e.day.date, J);
-									return /* @__PURE__ */ _(b, {
-										...e,
-										className: v(e.className, "overflow-visible"),
-										children: [e.children, n ? /* @__PURE__ */ g("span", {
-											className: "pointer-events-none absolute left-1/2 top-0 z-[70] -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
-											"data-testid": "mobile-end-date-duration-tooltip",
-											children: t.selectedDaysTooltip?.({ count: q })
-										}) : null]
-									});
-								} }
-							}, B), /* @__PURE__ */ g(e, {
-								type: "button",
-								className: "h-12 w-full text-base font-semibold",
-								disabled: !u,
-								"data-testid": "date-drawer-next",
-								onClick: () => {
-									u && (G.current = !1, S(u, {
-										close: !0,
-										commit: !0
-									}));
-								},
-								children: t.dateDrawerNext
-							})]
+							children: [
+								/* @__PURE__ */ _(r, {
+									id: "end-date-calendar",
+									mode: "range",
+									locale: P,
+									showOutsideDays: !1,
+									numberOfMonths: S,
+									selected: {
+										from: l,
+										to: d
+									},
+									month: G,
+									onMonthChange: (e) => K(p(e)),
+									disabled: (e) => l && e < l || e < L,
+									onSelect: (e, t) => {
+										J.current = !0, C(t ?? void 0, {
+											close: !1,
+											commit: !1
+										});
+									},
+									autoFocus: !0,
+									"data-testid": "end-date-calendar",
+									className: "w-full p-0",
+									classNames: w,
+									components: { DayButton: (e) => {
+										let n = Y != null && X != null && !e.modifiers.disabled && f(e.day.date, X);
+										return /* @__PURE__ */ v(x, {
+											...e,
+											className: y(e.className, "overflow-visible"),
+											children: [e.children, n ? /* @__PURE__ */ _("span", {
+												className: "pointer-events-none absolute left-1/2 top-0 z-[70] -translate-x-1/2 -translate-y-[calc(100%+4px)] whitespace-nowrap rounded-md border bg-popover px-2 py-1 text-xs font-semibold text-primary shadow-md",
+												"data-testid": "mobile-end-date-duration-tooltip",
+												children: t.selectedDaysTooltip?.({ count: Y })
+											}) : null]
+										});
+									} }
+								}, H),
+								/* @__PURE__ */ _(e, {
+									type: "button",
+									className: "h-12 w-full text-base font-semibold",
+									disabled: !d || !R,
+									"data-testid": "date-drawer-next",
+									onClick: () => {
+										d && (q.current = !1, C(d, {
+											close: !0,
+											commit: !0
+										}));
+									},
+									children: t.dateDrawerNext
+								}),
+								/* @__PURE__ */ _(c, { testId: "booking-mobile-time-slots-status" })
+							]
 						})
 					})]
 				})
@@ -208,4 +213,4 @@ var b = y, x = 1, S = v(t({ variant: "outline" }), "z-10 h-11 w-11 bg-background
 	});
 };
 //#endregion
-export { O as BookingMobileDateDrawer };
+export { k as BookingMobileDateDrawer };

package/dist/components/BookingPeriodSelector/components/BookingStartTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BookingStartTimeField.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingStartTimeField.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,qBAAqB,+CAwJjC,CAAA"}
+{"version":3,"file":"BookingStartTimeField.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingStartTimeField.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,qBAAqB,+CAuKjC,CAAA"}

package/dist/components/BookingPeriodSelector/components/BookingStartTimeField.js

@@ -13,8 +13,8 @@ var f = (e, t, n) => new Intl.NumberFormat(t, {
 	minimumFractionDigits: 0,
 	maximumFractionDigits: 0
 }).format(e / 100), p = () => {
-	let { labels: p, localeCode: m, currencyCode: h, startTime: g, selectStartTime: _, startTimeSlots: v, isStartTimeSelectOpen: y, setIsStartTimeSelectOpen: b, labelClassName: x, inputClassName: S, buttonClassName: C, errors: w, isHydrated: T, isStartToday: E, earliestMinutesForToday: D } = e(), O = v.map((e) => {
-		let t = E && D != null && e.startMinutes < D, n = e.isDisabled || t, r = e.disabledReason === "closed" ? p.timeSlotClosedLabel ?? "Closed" : e.disabledReason, i = e.isExtra && e.extraAmount != null ? p.timeSlotExtraFee?.({ amount: f(e.extraAmount, m, h) }) ?? `Extra fee: ${f(e.extraAmount, m, h)}` : null, a = e.isDisabled && r ? r : null, o = i && a ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
+	let { labels: p, localeCode: m, currencyCode: h, startTime: g, selectStartTime: _, startTimeSlots: v, startTimeSlotsStatus: y, isStartTimeSelectOpen: b, setIsStartTimeSelectOpen: x, labelClassName: S, inputClassName: C, buttonClassName: w, errors: T, isHydrated: E, isStartToday: D, earliestMinutesForToday: O } = e(), k = v.map((e) => {
+		let t = D && O != null && e.startMinutes < O, n = e.isDisabled || t, r = e.disabledReason === "closed" ? p.timeSlotClosedLabel ?? "Closed" : e.disabledReason, i = e.isExtra && e.extraAmount != null ? p.timeSlotExtraFee?.({ amount: f(e.extraAmount, m, h) }) ?? `Extra fee: ${f(e.extraAmount, m, h)}` : null, a = e.isDisabled && r ? r : null, o = i && a ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("span", {
 			className: "block",
 			children: i
 		}), /* @__PURE__ */ c("span", {
@@ -27,29 +27,29 @@ var f = (e, t, n) => new Intl.NumberFormat(t, {
 			disabled: n,
 			description: o
 		};
-	}), k = O.find((e) => !e.disabled)?.value, A = o(g ?? k ?? null), j = t(), M = !!j;
+	}), A = k.some((e) => !e.disabled), j = y !== "local" && (y !== "ready" || !A), M = y === "loading" ? p.timeSlotsLoading : y === "error" ? p.timeSlotsLoadError : y === "ready" && !A ? p.timeSlotsUnavailable : p.startTime, N = k.find((e) => !e.disabled)?.value, P = o(g ?? N ?? null), F = t(), I = !!F;
 	return a(() => {
-		y || (A.current = g ?? k ?? null);
+		b || (P.current = g ?? N ?? null);
 	}, [
-		k,
-		y,
+		N,
+		b,
 		g
 	]), a(() => {
 		if (typeof document > "u") return;
 		let e = document.getElementById("start-time-picker");
 		if (!(e instanceof HTMLInputElement)) return;
 		let t = (e) => {
-			if (e.key !== "Enter" || !y) return;
+			if (e.key !== "Enter" || !b) return;
 			e.preventDefault(), e.stopPropagation();
-			let t = A.current ?? g ?? k;
+			let t = P.current ?? g ?? N;
 			t && _(t);
 		};
 		return e.addEventListener("keydown", t, !0), () => {
 			e.removeEventListener("keydown", t, !0);
 		};
 	}, [
-		k,
-		y,
+		N,
+		b,
 		_,
 		g
 	]), /* @__PURE__ */ l("div", {
@@ -57,46 +57,48 @@ var f = (e, t, n) => new Intl.NumberFormat(t, {
 		children: [
 			/* @__PURE__ */ c(n, {
 				htmlFor: "start-time-picker",
-				className: d("mb-1 block text-sm font-medium", x),
+				className: d("mb-1 block text-sm font-medium", S),
 				children: /* @__PURE__ */ c("span", { children: p.startTime })
 			}),
-			M ? /* @__PURE__ */ c(i, {
+			I ? /* @__PURE__ */ c(i, {
 				id: "start-time-picker",
-				placeholder: p.startTime,
+				placeholder: M,
 				value: g ?? null,
 				onValueUpdate: (e) => {
-					e && (A.current = e);
+					e && (P.current = e);
 				},
 				onChange: (e) => {
-					e && (A.current = e, _(e));
+					e && (P.current = e, _(e));
 				},
-				options: O,
-				open: y,
-				onOpenChange: b,
+				options: k,
+				disabled: j,
+				open: b,
+				onOpenChange: x,
 				triggerTestId: "start-time-trigger",
 				contentTestId: "start-time-select-content",
-				isHydrated: T,
-				inputClassName: d(w.startTime && "border-destructive", S, C),
-				portalContainer: j
+				isHydrated: E,
+				inputClassName: d(T.startTime && "border-destructive", C, w),
+				portalContainer: F
 			}) : /* @__PURE__ */ c(u, {
 				id: "start-time-picker",
-				placeholder: p.startTime,
+				placeholder: M,
 				value: g ?? null,
 				onValueUpdate: (e) => {
-					e && (A.current = e);
+					e && (P.current = e);
 				},
 				onChange: (e) => {
-					e && (A.current = e, _(e));
+					e && (P.current = e, _(e));
 				},
-				options: O,
-				open: y,
-				onOpenChange: b,
+				options: k,
+				disabled: j,
+				open: b,
+				onOpenChange: x,
 				triggerTestId: "start-time-trigger",
 				contentTestId: "start-time-select-content",
-				isHydrated: T,
-				inputClassName: d(w.startTime && "border-destructive", S, C)
+				isHydrated: E,
+				inputClassName: d(T.startTime && "border-destructive", C, w)
 			}),
-			w.startTime && /* @__PURE__ */ c(r, { children: w.startTime })
+			T.startTime && /* @__PURE__ */ c(r, { children: T.startTime })
 		]
 	});
 };

package/dist/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.d.ts

@@ -0,0 +1,7 @@
+type BookingTimeSlotsStatusProps = {
+    className?: string;
+    testId?: string;
+};
+export declare const BookingTimeSlotsStatus: ({ className, testId, }: BookingTimeSlotsStatusProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=BookingTimeSlotsStatus.d.ts.map

package/dist/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BookingTimeSlotsStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.tsx"],"names":[],"mappings":"AAMA,KAAK,2BAA2B,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,wBAGpC,2BAA2B,mDA4D7B,CAAA"}

package/dist/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.js

@@ -0,0 +1,29 @@
+import { Button as e } from "../../../ui/button.js";
+import { useBookingPeriod as t } from "../BookingPeriodContext.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as i } from "@rpcbase/ui";
+//#region src/components/BookingPeriodSelector/components/BookingTimeSlotsStatus.tsx
+var a = ({ className: a, testId: o = "booking-time-slots-status" }) => {
+	let { labels: s, startTimeSlotsStatus: c, endTimeSlotsStatus: l, retryStartTimeSlots: u, retryEndTimeSlots: d, canCommitTimeSlots: f } = t();
+	if (c === "local" && l === "local") return null;
+	let p = c === "error" || l === "error", m = c === "loading" || l === "loading";
+	if (!p && !m && f) return null;
+	let h = p ? s.timeSlotsLoadError : m ? s.timeSlotsLoading : s.timeSlotsUnavailable;
+	return /* @__PURE__ */ r("div", {
+		role: p ? "alert" : "status",
+		"data-testid": o,
+		className: i("flex flex-wrap items-center gap-2 rounded-md border px-3 py-2 text-sm", p ? "border-destructive/40 bg-destructive/5 text-destructive" : "border-border bg-muted/40 text-muted-foreground", a),
+		children: [/* @__PURE__ */ n("span", { children: h }), p ? /* @__PURE__ */ n(e, {
+			type: "button",
+			variant: "outline",
+			size: "sm",
+			className: "h-7",
+			onClick: () => {
+				c === "error" && u(), l === "error" && d();
+			},
+			children: /* @__PURE__ */ n("span", { children: s.retryTimeSlots })
+		}) : null]
+	});
+};
+//#endregion
+export { a as BookingTimeSlotsStatus };

package/dist/components/BookingPeriodSelector/index.d.ts

@@ -4,10 +4,11 @@ type BookingPeriodSelectorProps = BookingPeriodControllerOptions & {
 };
 export declare const BookingPeriodSelector: ({ className, ...options }: BookingPeriodSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export { BookingPeriodProvider, useBookingPeriod } from './BookingPeriodContext';
-export type { BookingPeriodChangeMeta, BookingPeriodControllerOptions, BookingPeriodControllerValue, BookingPeriodLabels, BookingPeriodSelectionFlow, BookingPeriodTimeSlotsFetcher, BookingPeriodTranslator, } from './useBookingPeriodController';
+export type { BookingPeriodChangeMeta, BookingPeriodControllerOptions, BookingPeriodControllerValue, BookingPeriodLabels, BookingPeriodSelectionFlow, BookingPeriodTimeSlotsFetcher, BookingPeriodTimeSlotsStatus, BookingPeriodTranslator, } from './useBookingPeriodController';
 export { BookingStartDateField } from './components/BookingStartDateField';
 export { BookingStartTimeField } from './components/BookingStartTimeField';
 export { BookingEndDateField } from './components/BookingEndDateField';
 export { BookingEndTimeField } from './components/BookingEndTimeField';
 export { BookingMobileDateDrawer } from './components/BookingMobileDateDrawer';
+export { BookingTimeSlotsStatus } from './components/BookingTimeSlotsStatus';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/BookingPeriodSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BookingPeriodSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,8BAA8B,EAAE,MAAM,8BAA8B,CAAA;AAQlF,KAAK,0BAA0B,GAAG,8BAA8B,GAAG;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,2BAA2B,0BAA0B,4CAc1F,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAChF,YAAY,EACV,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,0BAA0B,EAC1B,6BAA6B,EAC7B,uBAAuB,GACxB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BookingPeriodSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,8BAA8B,EAAE,MAAM,8BAA8B,CAAA;AASlF,KAAK,0BAA0B,GAAG,8BAA8B,GAAG;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,2BAA2B,0BAA0B,4CAiB1F,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAChF,YAAY,EACV,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,mBAAmB,EACnB,0BAA0B,EAC1B,6BAA6B,EAC7B,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,8BAA8B,CAAA;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAC1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAA;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAA;AAC9E,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAA"}

package/dist/components/BookingPeriodSelector/index.js

@@ -3,26 +3,27 @@ import { BookingStartDateField as n } from "./components/BookingStartDateField.j
 import { BookingStartTimeField as r } from "./components/BookingStartTimeField.js";
 import { BookingEndDateField as i } from "./components/BookingEndDateField.js";
 import { BookingEndTimeField as a } from "./components/BookingEndTimeField.js";
-import { BookingMobileDateDrawer as o } from "./components/BookingMobileDateDrawer.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { cn as l } from "@rpcbase/ui";
+import { BookingTimeSlotsStatus as o } from "./components/BookingTimeSlotsStatus.js";
+import { BookingMobileDateDrawer as s } from "./components/BookingMobileDateDrawer.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { cn as d } from "@rpcbase/ui";
 //#region src/components/BookingPeriodSelector/index.tsx
-var u = ({ className: t, ...u }) => /* @__PURE__ */ s(e, {
-	...u,
-	children: /* @__PURE__ */ c("div", {
-		className: l("grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2", t),
+var f = ({ className: t, ...f }) => /* @__PURE__ */ l(e, {
+	...f,
+	children: /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("div", {
+		className: d("grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2", t),
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex items-start space-x-4",
-				children: [/* @__PURE__ */ s(n, {}), /* @__PURE__ */ s(r, {})]
+				children: [/* @__PURE__ */ l(n, {}), /* @__PURE__ */ l(r, {})]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex items-start space-x-4",
-				children: [/* @__PURE__ */ s(i, {}), /* @__PURE__ */ s(a, {})]
+				children: [/* @__PURE__ */ l(i, {}), /* @__PURE__ */ l(a, {})]
 			}),
-			/* @__PURE__ */ s(o, {})
+			/* @__PURE__ */ l(s, {})
 		]
-	})
+	}), /* @__PURE__ */ l(o, { className: "mt-2" })] })
 });
 //#endregion
-export { i as BookingEndDateField, a as BookingEndTimeField, o as BookingMobileDateDrawer, e as BookingPeriodProvider, u as BookingPeriodSelector, n as BookingStartDateField, r as BookingStartTimeField, t as useBookingPeriod };
+export { i as BookingEndDateField, a as BookingEndTimeField, s as BookingMobileDateDrawer, e as BookingPeriodProvider, f as BookingPeriodSelector, n as BookingStartDateField, r as BookingStartTimeField, o as BookingTimeSlotsStatus, t as useBookingPeriod };

package/dist/components/BookingPeriodSelector/useBookingPeriodController.d.ts

@@ -7,6 +7,7 @@ export type BookingPeriodChangeMeta = {
 };
 export type BookingPeriodTranslator = (key: string, options?: Record<string, unknown>) => string;
 export type BookingPeriodTimeSlotsFetcher = (date: string, journey: JourneyType) => Promise<TimeSlot[] | null>;
+export type BookingPeriodTimeSlotsStatus = "local" | "loading" | "ready" | "error";
 export type BookingPeriodLabels = {
     startDate: string;
     pickStartDate: string;
@@ -24,6 +25,10 @@ export type BookingPeriodLabels = {
     rentalPeriod?: string;
     dateDrawerNext?: string;
     closeDrawer?: string;
+    timeSlotsLoading?: string;
+    timeSlotsUnavailable?: string;
+    timeSlotsLoadError?: string;
+    retryTimeSlots?: string;
 };
 export type BookingPeriodSelectionFlow = "chained-times" | "dates-first";
 export interface BookingPeriodControllerOptions {
@@ -51,6 +56,7 @@ export interface BookingPeriodControllerOptions {
     buttonClassName?: string;
     bookingPeriodConfig?: BookingPeriodConfig;
     fetchTimeSlots?: BookingPeriodTimeSlotsFetcher;
+    onTimeSlotsAvailabilityChange?: (isAvailable: boolean) => void;
     selectionFlow?: BookingPeriodSelectionFlow;
     withMobileDateDrawer?: boolean;
     currencyCode?: string;
@@ -96,6 +102,11 @@ export interface BookingPeriodControllerValue {
     resetHoveredEndDate: () => void;
     startTimeSlots: TimeSlot[];
     availableEndTimeSlots: TimeSlot[];
+    startTimeSlotsStatus: BookingPeriodTimeSlotsStatus;
+    endTimeSlotsStatus: BookingPeriodTimeSlotsStatus;
+    retryStartTimeSlots: () => void;
+    retryEndTimeSlots: () => void;
+    canCommitTimeSlots: boolean;
     isStartToday: boolean;
     isEndToday: boolean;
     minSelectableDate: Date;