@loczer/storefront-sdk 0.197.0 → 0.199.0

package/dist/components/BookingBikeVariantDialog/index.js

@@ -1,11 +1,11 @@
 import { getProductVariantAttributeValue as e, getStorefrontProductVariantDisplay as t } from "../../lib/productVariants.js";
-import { getAvailabilityVariant as n } from "../../lib/utils.js";
-import { getLocalizedValue as r } from "../../localization.js";
+import { getLocalizedValue as n } from "../../localization.js";
+import { getAvailabilityVariant as r } from "../../lib/utils.js";
 import { Badge as i } from "../../ui/badge.js";
 import { Button as a } from "../../ui/button.js";
 import { RESPONSIVE_DIALOG_MOBILE_MEDIA_QUERY as o, ResponsiveDialog as s, ResponsiveDialogContent as c, ResponsiveDialogDescription as l, ResponsiveDialogFooter as u, ResponsiveDialogHeader as d, ResponsiveDialogTitle as f } from "../../chunks/pkg/ui/dist/ResponsiveDialog-BVwhTZQo.js";
 import { Input as p } from "../../ui/input.js";
-import { useStorefrontWorkspaceLanguage as m } from "../../StorefrontProvider.js";
+import { useStorefrontWorkspaceLanguage as m } from "../../StorefrontContext.js";
 import { ProductWarningNotice as h } from "../ProductWarningNotice/index.js";
 import { ProductPriceBadge as g } from "../ProductPriceBadge/index.js";
 import { resolveProductImageContainerStyle as _ } from "../../lib/productImageStyles.js";
@@ -14,22 +14,26 @@ import { jsx as b, jsxs as x } from "react/jsx-runtime";
 import { useMediaQuery as S } from "@rpcbase/client";
 import { useTranslation as C } from "react-i18next";
 import { cn as w } from "@rpcbase/ui";
-import { Bike as T, CheckCircle2 as E, Plus as D } from "lucide-react";
+import { Bike as T, CheckCircle2 as E, Package as D, Plus as O } from "lucide-react";
 //#region src/components/BookingBikeVariantDialog/index.tsx
-function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel: j, isVariantOutOfCapacity: M, addDisabled: N = !1, onAddVariant: P }) {
-	let { t: F, i18n: I } = C(), L = S(o), R = m(), [z, B] = y({});
+var k = (e) => {
+	let t = Number.parseInt(e, 10);
+	return !Number.isFinite(t) || t < 1 ? 1 : t;
+};
+function A({ open: p, product: A, onOpenChange: M, getVariantAvailabilityLabel: N, isVariantOutOfCapacity: P, addDisabled: F = !1, onAddVariant: I }) {
+	let { t: L, i18n: R } = C(), z = S(o), B = m(), [V, H] = y({});
 	if (v(() => {
-		!O || !p || B((O.productVariants ?? []).reduce((e, t) => (e[t.id] = 1, e), {}));
-	}, [p, O]), !O) return null;
-	let V = (e, t) => {
-		B((n) => ({
+		!A || !p || H((A.productVariants ?? []).reduce((e, t) => (e[t.id] = "1", e), {}));
+	}, [p, A]), !A) return null;
+	let U = (e, t) => {
+		H((n) => ({
 			...n,
-			[e]: Math.max(1, Math.floor(t))
+			[e]: t
 		}));
-	}, H = r(O.name, I.language, R), U = r(O.description, I.language, R), W = r(O.warning, I.language, R), G = typeof O.images?.[0] == "string" ? O.images[0].trim() : "", K = _(O.primaryImageStyle), q = n(O.availabilityStatus), J = O.features?.slice(0, 4) ?? [], Y = O.productVariants ?? [], X = Y.some((t) => !!e(t, "size")) ? F("product_size_label") : F("product_variant_label");
+	}, W = n(A.name, R.language, B), G = n(A.description, R.language, B), K = n(A.warning, R.language, B), q = typeof A.images?.[0] == "string" ? A.images[0].trim() : "", J = _(A.primaryImageStyle), Y = r(A.availabilityStatus), X = A.features?.slice(0, 4) ?? [], Z = A.productVariants ?? [], Q = Z.some((t) => !!e(t, "size")) ? L("product_size_label") : L("product_variant_label");
 	return /* @__PURE__ */ b(s, {
 		open: p,
-		onOpenChange: A,
+		onOpenChange: M,
 		children: /* @__PURE__ */ b(c, {
 			"data-testid": "storefront-booking-bike-dialog-content",
 			className: "overflow-hidden border-slate-200 bg-white p-0",
@@ -43,10 +47,10 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 						className: "border-b border-slate-200 px-5 py-4 text-left sm:px-6",
 						children: [/* @__PURE__ */ b(f, {
 							className: "text-left text-lg font-semibold text-slate-950",
-							children: /* @__PURE__ */ b("span", { children: H })
+							children: /* @__PURE__ */ b("span", { children: W })
 						}), /* @__PURE__ */ b(l, {
 							className: "line-clamp-2 text-left text-sm text-slate-600",
-							children: /* @__PURE__ */ b("span", { children: U })
+							children: /* @__PURE__ */ b("span", { children: G })
 						})]
 					}),
 					/* @__PURE__ */ b("div", {
@@ -57,61 +61,70 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 								className: "grid gap-4",
 								children: [
 									/* @__PURE__ */ b("div", {
-										className: w("relative aspect-[1618/1000] overflow-hidden rounded-2xl", K.className),
-										style: K.style,
-										children: G ? /* @__PURE__ */ b("img", {
-											src: G,
-											alt: H,
+										className: w("relative aspect-[1618/1000] overflow-hidden rounded-2xl", J.className),
+										style: J.style,
+										children: q ? /* @__PURE__ */ b("img", {
+											src: q,
+											alt: W,
 											className: "absolute inset-0 h-full w-full object-contain p-2",
 											loading: "lazy"
 										}) : /* @__PURE__ */ b("div", {
 											className: "absolute inset-0 flex items-center justify-center text-slate-400",
-											children: /* @__PURE__ */ b(T, {
+											children: A.kind === "accessory" ? /* @__PURE__ */ b(D, {
+												className: "h-12 w-12",
+												"aria-hidden": "true"
+											}) : /* @__PURE__ */ b(T, {
 												className: "h-12 w-12",
 												"aria-hidden": "true"
 											})
 										})
 									}),
-									L ? null : /* @__PURE__ */ x("div", {
+									z ? null : /* @__PURE__ */ x("div", {
 										className: "flex flex-wrap items-center gap-2",
 										children: [/* @__PURE__ */ b(i, {
-											variant: q.variant,
-											children: /* @__PURE__ */ b("span", { children: F(q.labelKey) })
-										}), /* @__PURE__ */ b(g, { prices: O.prices })]
+											variant: Y.variant,
+											children: /* @__PURE__ */ b("span", { children: L(Y.labelKey) })
+										}), /* @__PURE__ */ b(g, {
+											prices: A.prices,
+											openOnHover: A.kind !== "accessory"
+										})]
 									}),
-									!L && J.length > 0 ? /* @__PURE__ */ x("div", {
+									!z && X.length > 0 ? /* @__PURE__ */ x("div", {
 										className: "grid gap-2",
 										children: [/* @__PURE__ */ b("p", {
 											className: "text-sm font-semibold text-slate-950",
-											children: /* @__PURE__ */ b("span", { children: F("product_features_title") })
+											children: /* @__PURE__ */ b("span", { children: L("product_features_title") })
 										}), /* @__PURE__ */ b("ul", {
 											className: "grid gap-1.5 text-sm text-slate-700",
-											children: J.map((e, t) => /* @__PURE__ */ x("li", {
+											children: X.map((e, t) => /* @__PURE__ */ x("li", {
 												className: "inline-flex items-start gap-2",
 												children: [/* @__PURE__ */ b(E, {
 													className: "mt-0.5 h-4 w-4 text-success",
 													"aria-hidden": "true"
-												}), /* @__PURE__ */ b("span", { children: r(e, I.language, R) })]
-											}, `${O.id}-${t}`))
+												}), /* @__PURE__ */ b("span", { children: n(e, R.language, B) })]
+											}, `${A.id}-${t}`))
 										})]
 									}) : null,
-									L ? null : /* @__PURE__ */ b(h, { warning: W })
+									z ? null : /* @__PURE__ */ b(h, { warning: K })
 								]
 							}), /* @__PURE__ */ x("div", {
 								className: "grid content-start gap-3",
 								children: [
-									L ? /* @__PURE__ */ x("div", {
+									z ? /* @__PURE__ */ x("div", {
 										className: "flex flex-wrap items-center gap-2",
 										children: [/* @__PURE__ */ b(i, {
-											variant: q.variant,
-											children: /* @__PURE__ */ b("span", { children: F(q.labelKey) })
-										}), /* @__PURE__ */ b(g, { prices: O.prices })]
+											variant: Y.variant,
+											children: /* @__PURE__ */ b("span", { children: L(Y.labelKey) })
+										}), /* @__PURE__ */ b(g, {
+											prices: A.prices,
+											openOnHover: A.kind !== "accessory"
+										})]
 									}) : null,
-									L && J.length > 0 ? /* @__PURE__ */ x("details", {
+									z && X.length > 0 ? /* @__PURE__ */ x("details", {
 										className: "group rounded-2xl border border-slate-200 bg-slate-50",
 										children: [/* @__PURE__ */ x("summary", {
 											className: "flex cursor-pointer list-none items-center justify-between gap-3 px-3 py-2.5 text-sm font-semibold text-slate-950 [&::-webkit-details-marker]:hidden",
-											children: [/* @__PURE__ */ b("span", { children: F("product_features_title") }), /* @__PURE__ */ b(D, {
+											children: [/* @__PURE__ */ b("span", { children: L("product_features_title") }), /* @__PURE__ */ b(O, {
 												className: "h-4 w-4 shrink-0 transition-transform group-open:rotate-45",
 												"aria-hidden": "true"
 											})]
@@ -119,25 +132,25 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 											className: "border-t border-slate-200 px-3 py-3",
 											children: /* @__PURE__ */ b("ul", {
 												className: "grid gap-1.5 text-sm text-slate-700",
-												children: J.map((e, t) => /* @__PURE__ */ x("li", {
+												children: X.map((e, t) => /* @__PURE__ */ x("li", {
 													className: "inline-flex items-start gap-2",
 													children: [/* @__PURE__ */ b(E, {
 														className: "mt-0.5 h-4 w-4 text-success",
 														"aria-hidden": "true"
-													}), /* @__PURE__ */ b("span", { children: r(e, I.language, R) })]
-												}, `${O.id}-mobile-${t}`))
+													}), /* @__PURE__ */ b("span", { children: n(e, R.language, B) })]
+												}, `${A.id}-mobile-${t}`))
 											})
 										})]
 									}) : null,
-									L ? /* @__PURE__ */ b(h, { warning: W }) : null,
+									z ? /* @__PURE__ */ b(h, { warning: K }) : null,
 									/* @__PURE__ */ b("p", {
 										className: "text-2xs font-medium uppercase tracking-[0.18em] text-slate-500",
-										children: /* @__PURE__ */ b("span", { children: X })
+										children: /* @__PURE__ */ b("span", { children: Q })
 									}),
 									/* @__PURE__ */ b("div", {
 										className: "grid gap-2",
-										children: Y.map((e) => {
-											let n = `storefront-booking-bike-dialog-variant-option-${O.id}-${e.id}`.toLowerCase(), { label: r, description: o } = t(e), s = z[e.id] ?? 1, c = M?.(e.id) === !0, l = j?.(e.id) ?? null;
+										children: Z.map((e) => {
+											let n = `storefront-booking-bike-dialog-variant-option-${A.id}-${e.id}`.toLowerCase(), { label: r, description: o } = t(e), s = V[e.id] ?? "1", c = P?.(e.id) === !0, l = N?.(e.id) ?? null;
 											return /* @__PURE__ */ x("div", {
 												"data-testid": n,
 												className: w("flex flex-col gap-3 rounded-2xl border p-3 sm:flex-row sm:items-center sm:justify-between", "border-slate-200 bg-slate-50"),
@@ -162,21 +175,20 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 													]
 												}), /* @__PURE__ */ x("div", {
 													className: "flex flex-wrap items-center gap-2 sm:justify-end",
-													children: [/* @__PURE__ */ b(k, {
+													children: [/* @__PURE__ */ b(j, {
 														quantity: s,
-														decreaseAriaLabel: F("decrease_quantity"),
-														increaseAriaLabel: F("increase_quantity"),
-														onQuantityChange: (t) => V(e.id, t),
-														testIdPrefix: `storefront-booking-bike-dialog-variant-quantity-${O.id}-${e.id}`.toLowerCase()
+														ariaLabel: L("quantity_label"),
+														onQuantityChange: (t) => U(e.id, t),
+														testIdPrefix: `storefront-booking-bike-dialog-variant-quantity-${A.id}-${e.id}`.toLowerCase()
 													}), /* @__PURE__ */ x(a, {
 														type: "button",
 														className: "gap-1.5 rounded-xl",
-														"data-testid": `storefront-booking-bike-dialog-variant-add-${O.id}-${e.id}`.toLowerCase(),
-														disabled: N,
+														"data-testid": `storefront-booking-bike-dialog-variant-add-${A.id}-${e.id}`.toLowerCase(),
+														disabled: F,
 														onClick: () => {
-															P(e.id, s);
+															I(e.id, k(s));
 														},
-														children: [/* @__PURE__ */ b("span", { children: F("add_short") }), /* @__PURE__ */ b(D, {
+														children: [/* @__PURE__ */ b("span", { children: L("add_short") }), /* @__PURE__ */ b(O, {
 															className: "h-4 w-4",
 															"aria-hidden": "true"
 														})]
@@ -195,8 +207,8 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 							type: "button",
 							variant: "outline",
 							className: "h-11 w-full rounded-xl sm:w-auto",
-							onClick: () => A(!1),
-							children: /* @__PURE__ */ b("span", { children: F("close_modal") })
+							onClick: () => M(!1),
+							children: /* @__PURE__ */ b("span", { children: L("close_modal") })
 						})
 					})
 				]
@@ -204,44 +216,24 @@ function O({ open: p, product: O, onOpenChange: A, getVariantAvailabilityLabel:
 		})
 	});
 }
-function k({ decreaseAriaLabel: e, increaseAriaLabel: t, onQuantityChange: n, quantity: r, testIdPrefix: i }) {
-	let o = (e, t) => {
-		let i = t?.metaKey || t?.ctrlKey ? 10 : 1;
-		n(Math.max(1, r + e * i));
-	};
-	return /* @__PURE__ */ x("div", {
-		className: "flex items-center gap-1",
-		children: [
-			/* @__PURE__ */ b(a, {
-				type: "button",
-				variant: "outline",
-				size: "icon",
-				className: "h-9 w-9 font-semibold",
-				"aria-label": e,
-				"data-testid": `${i}-decrement`,
-				onClick: (e) => o(-1, e),
-				children: /* @__PURE__ */ b("span", { children: "-" })
-			}),
-			/* @__PURE__ */ b(p, {
-				type: "text",
-				readOnly: !0,
-				value: r,
-				className: "h-9 w-12 text-center",
-				"aria-live": "polite",
-				"data-testid": `${i}-value`
-			}),
-			/* @__PURE__ */ b(a, {
-				type: "button",
-				variant: "outline",
-				size: "icon",
-				className: "h-9 w-9 font-semibold",
-				"aria-label": t,
-				"data-testid": `${i}-increment`,
-				onClick: (e) => o(1, e),
-				children: /* @__PURE__ */ b("span", { children: "+" })
-			})
-		]
+function j({ ariaLabel: e, onQuantityChange: t, quantity: n, testIdPrefix: r }) {
+	return /* @__PURE__ */ b("div", {
+		className: "flex items-center",
+		children: /* @__PURE__ */ b(p, {
+			type: "text",
+			inputMode: "numeric",
+			pattern: "[0-9]*",
+			value: n,
+			onChange: (e) => {
+				let n = e.target.value.replace(/\D/g, "");
+				t(n ? String(k(n)) : "");
+			},
+			onBlur: () => t(String(k(n))),
+			className: "h-9 w-16 text-center",
+			"aria-label": e,
+			"data-testid": `${r}-value`
+		})
 	});
 }
 //#endregion
-export { O as BookingBikeVariantDialog };
+export { A as BookingBikeVariantDialog };

package/dist/components/BookingPeriodSelector/components/BookingEndDateField.js

@@ -1,6 +1,6 @@
 import { Content as e, Provider as t, Root as n, TooltipTrigger as r } from "../../../ui/tooltip.js";
 import { useBookingPeriod as i } from "../BookingPeriodContext.js";
-import { useMorphingModalWizardOverlayLayer as a } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-j1CgFGLe.js";
+import { useMorphingModalWizardOverlayLayer as a } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-DOH1GYVR.js";
 import { DayPicker as o } from "../../../ui/day-picker.js";
 import { Label as s } from "../../../ui/label.js";
 import { BookingPeriodFieldErrorMessage as c } from "./BookingPeriodFieldErrorMessage.js";

package/dist/components/BookingPeriodSelector/components/BookingEndTimeField.js

@@ -1,5 +1,5 @@
 import { useBookingPeriod as e } from "../BookingPeriodContext.js";
-import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-j1CgFGLe.js";
+import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-DOH1GYVR.js";
 import { Label as n } from "../../../ui/label.js";
 import { BookingPeriodFieldErrorMessage as r } from "./BookingPeriodFieldErrorMessage.js";
 import { BookingHourPickerField as i } from "./internal/BookingHourPickerField.js";

package/dist/components/BookingPeriodSelector/components/BookingStartDateField.js

@@ -1,5 +1,5 @@
 import { useBookingPeriod as e } from "../BookingPeriodContext.js";
-import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-j1CgFGLe.js";
+import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-DOH1GYVR.js";
 import { DayPicker as n } from "../../../ui/day-picker.js";
 import { Label as r } from "../../../ui/label.js";
 import { BookingPeriodFieldErrorMessage as i } from "./BookingPeriodFieldErrorMessage.js";

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

@@ -1,5 +1,5 @@
 import { useBookingPeriod as e } from "../BookingPeriodContext.js";
-import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-j1CgFGLe.js";
+import { useMorphingModalWizardOverlayLayer as t } from "../../../chunks/pkg/ui/dist/MorphingModalWizard-DOH1GYVR.js";
 import { Label as n } from "../../../ui/label.js";
 import { BookingPeriodFieldErrorMessage as r } from "./BookingPeriodFieldErrorMessage.js";
 import { BookingHourPickerField as i } from "./internal/BookingHourPickerField.js";