@loczer/storefront-sdk 0.198.0 → 0.200.0

package/dist/components/BookingBikeVariantDialog/index.js

@@ -1,188 +1,201 @@
-import { getProductVariantAttributeValue as e, getStorefrontProductVariantDisplay as t } from "../../lib/productVariants.js";
-import { getAvailabilityVariant as n } from "../../lib/utils.js";
+import { getProductVariantAttributeValue as e, getStorefrontProductVariantDisplay as t, getStorefrontProductVariantHeightRange as n } from "../../lib/productVariants.js";
 import { getLocalizedValue as r } from "../../localization.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 { ProductWarningNotice as h } from "../ProductWarningNotice/index.js";
-import { ProductPriceBadge as g } from "../ProductPriceBadge/index.js";
-import { resolveProductImageContainerStyle as _ } from "../../lib/productImageStyles.js";
-import { useEffect as v, useState as y } from "react";
-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, Package as D, Plus as O } from "lucide-react";
+import { getAvailabilityVariant as i } from "../../lib/utils.js";
+import { Badge as a } from "../../ui/badge.js";
+import { Button as o } from "../../ui/button.js";
+import { RESPONSIVE_DIALOG_MOBILE_MEDIA_QUERY as s, ResponsiveDialog as c, ResponsiveDialogContent as l, ResponsiveDialogDescription as u, ResponsiveDialogFooter as d, ResponsiveDialogHeader as f, ResponsiveDialogTitle as p } from "../../chunks/pkg/ui/dist/ResponsiveDialog-BVwhTZQo.js";
+import { Input as m } from "../../ui/input.js";
+import { useStorefrontWorkspaceLanguage as h } from "../../StorefrontContext.js";
+import { ProductWarningNotice as g } from "../ProductWarningNotice/index.js";
+import { ProductPriceBadge as _ } from "../ProductPriceBadge/index.js";
+import { resolveProductImageContainerStyle as v } from "../../lib/productImageStyles.js";
+import { useEffect as y, useState as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { useMediaQuery as C } from "@rpcbase/client";
+import { useTranslation as w } from "react-i18next";
+import { cn as T } from "@rpcbase/ui";
+import { Bike as E, CheckCircle2 as D, Package as O, Plus as k } from "lucide-react";
 //#region src/components/BookingBikeVariantDialog/index.tsx
-var k = (e) => {
+var A = (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(() => {
-		!A || !p || H((A.productVariants ?? []).reduce((e, t) => (e[t.id] = "1", e), {}));
-	}, [p, A]), !A) return null;
-	let U = (e, t) => {
-		H((n) => ({
+function j({ open: m, product: j, onOpenChange: N, getVariantAvailabilityLabel: P, isVariantOutOfCapacity: F, addDisabled: I = !1, onAddVariant: L }) {
+	let { t: R, i18n: z } = w(), B = C(s), V = h(), [H, U] = b({});
+	if (y(() => {
+		!j || !m || U((j.productVariants ?? []).reduce((e, t) => (e[t.id] = "1", e), {}));
+	}, [m, j]), !j) return null;
+	let W = (e, t) => {
+		U((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, W = r(A.name, R.language, B), G = r(A.description, R.language, B), K = r(A.warning, R.language, B), q = typeof A.images?.[0] == "string" ? A.images[0].trim() : "", J = _(A.primaryImageStyle), Y = n(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: M,
-		children: /* @__PURE__ */ b(c, {
+	}, G = r(j.name, z.language, V), K = r(j.description, z.language, V), q = r(j.warning, z.language, V), J = typeof j.images?.[0] == "string" ? j.images[0].trim() : "", Y = v(j.primaryImageStyle), X = i(j.availabilityStatus), Z = j.features?.slice(0, 4) ?? [], Q = j.productVariants ?? [], $ = Q.some((t) => !!e(t, "size")) ? R("product_size_label") : R("product_variant_label");
+	return /* @__PURE__ */ x(c, {
+		open: m,
+		onOpenChange: N,
+		children: /* @__PURE__ */ x(l, {
 			"data-testid": "storefront-booking-bike-dialog-content",
 			className: "overflow-hidden border-slate-200 bg-white p-0",
 			desktopClassName: "max-w-4xl gap-0",
 			mobileClassName: "max-h-[95dvh] gap-0",
-			children: /* @__PURE__ */ x("div", {
+			children: /* @__PURE__ */ S("div", {
 				"data-testid": "storefront-booking-bike-dialog",
 				className: "flex max-h-[92dvh] flex-col",
 				children: [
-					/* @__PURE__ */ x(d, {
+					/* @__PURE__ */ S(f, {
 						className: "border-b border-slate-200 px-5 py-4 text-left sm:px-6",
-						children: [/* @__PURE__ */ b(f, {
+						children: [/* @__PURE__ */ x(p, {
 							className: "text-left text-lg font-semibold text-slate-950",
-							children: /* @__PURE__ */ b("span", { children: W })
-						}), /* @__PURE__ */ b(l, {
+							children: /* @__PURE__ */ x("span", { children: G })
+						}), /* @__PURE__ */ x(u, {
 							className: "line-clamp-2 text-left text-sm text-slate-600",
-							children: /* @__PURE__ */ b("span", { children: G })
+							children: /* @__PURE__ */ x("span", { children: K })
 						})]
 					}),
-					/* @__PURE__ */ b("div", {
+					/* @__PURE__ */ x("div", {
 						className: "overflow-y-auto",
-						children: /* @__PURE__ */ x("div", {
+						children: /* @__PURE__ */ S("div", {
 							className: "grid gap-5 px-5 py-5 sm:grid-cols-[minmax(0,0.92fr)_minmax(0,1.08fr)] sm:px-6",
-							children: [/* @__PURE__ */ x("div", {
+							children: [/* @__PURE__ */ S("div", {
 								className: "grid gap-4",
 								children: [
-									/* @__PURE__ */ b("div", {
-										className: w("relative aspect-[1618/1000] overflow-hidden rounded-2xl", J.className),
-										style: J.style,
-										children: q ? /* @__PURE__ */ b("img", {
-											src: q,
-											alt: W,
+									/* @__PURE__ */ x("div", {
+										className: T("relative aspect-[1618/1000] overflow-hidden rounded-2xl", Y.className),
+										style: Y.style,
+										children: J ? /* @__PURE__ */ x("img", {
+											src: J,
+											alt: G,
 											className: "absolute inset-0 h-full w-full object-contain p-2",
 											loading: "lazy"
-										}) : /* @__PURE__ */ b("div", {
+										}) : /* @__PURE__ */ x("div", {
 											className: "absolute inset-0 flex items-center justify-center text-slate-400",
-											children: A.kind === "accessory" ? /* @__PURE__ */ b(D, {
+											children: j.kind === "accessory" ? /* @__PURE__ */ x(O, {
 												className: "h-12 w-12",
 												"aria-hidden": "true"
-											}) : /* @__PURE__ */ b(T, {
+											}) : /* @__PURE__ */ x(E, {
 												className: "h-12 w-12",
 												"aria-hidden": "true"
 											})
 										})
 									}),
-									z ? null : /* @__PURE__ */ x("div", {
+									B ? null : /* @__PURE__ */ S("div", {
 										className: "flex flex-wrap items-center gap-2",
-										children: [/* @__PURE__ */ b(i, {
-											variant: Y.variant,
-											children: /* @__PURE__ */ b("span", { children: L(Y.labelKey) })
-										}), /* @__PURE__ */ b(g, { prices: A.prices })]
+										children: [/* @__PURE__ */ x(a, {
+											variant: X.variant,
+											children: /* @__PURE__ */ x("span", { children: R(X.labelKey) })
+										}), /* @__PURE__ */ x(_, {
+											prices: j.prices,
+											openOnHover: j.kind !== "accessory"
+										})]
 									}),
-									!z && X.length > 0 ? /* @__PURE__ */ x("div", {
+									!B && Z.length > 0 ? /* @__PURE__ */ S("div", {
 										className: "grid gap-2",
-										children: [/* @__PURE__ */ b("p", {
+										children: [/* @__PURE__ */ x("p", {
 											className: "text-sm font-semibold text-slate-950",
-											children: /* @__PURE__ */ b("span", { children: L("product_features_title") })
-										}), /* @__PURE__ */ b("ul", {
+											children: /* @__PURE__ */ x("span", { children: R("product_features_title") })
+										}), /* @__PURE__ */ x("ul", {
 											className: "grid gap-1.5 text-sm text-slate-700",
-											children: X.map((e, t) => /* @__PURE__ */ x("li", {
+											children: Z.map((e, t) => /* @__PURE__ */ S("li", {
 												className: "inline-flex items-start gap-2",
-												children: [/* @__PURE__ */ b(E, {
+												children: [/* @__PURE__ */ x(D, {
 													className: "mt-0.5 h-4 w-4 text-success",
 													"aria-hidden": "true"
-												}), /* @__PURE__ */ b("span", { children: r(e, R.language, B) })]
-											}, `${A.id}-${t}`))
+												}), /* @__PURE__ */ x("span", { children: r(e, z.language, V) })]
+											}, `${j.id}-${t}`))
 										})]
 									}) : null,
-									z ? null : /* @__PURE__ */ b(h, { warning: K })
+									B ? null : /* @__PURE__ */ x(g, { warning: q })
 								]
-							}), /* @__PURE__ */ x("div", {
+							}), /* @__PURE__ */ S("div", {
 								className: "grid content-start gap-3",
 								children: [
-									z ? /* @__PURE__ */ x("div", {
+									B ? /* @__PURE__ */ S("div", {
 										className: "flex flex-wrap items-center gap-2",
-										children: [/* @__PURE__ */ b(i, {
-											variant: Y.variant,
-											children: /* @__PURE__ */ b("span", { children: L(Y.labelKey) })
-										}), /* @__PURE__ */ b(g, { prices: A.prices })]
+										children: [/* @__PURE__ */ x(a, {
+											variant: X.variant,
+											children: /* @__PURE__ */ x("span", { children: R(X.labelKey) })
+										}), /* @__PURE__ */ x(_, {
+											prices: j.prices,
+											openOnHover: j.kind !== "accessory"
+										})]
 									}) : null,
-									z && X.length > 0 ? /* @__PURE__ */ x("details", {
+									B && Z.length > 0 ? /* @__PURE__ */ S("details", {
 										className: "group rounded-2xl border border-slate-200 bg-slate-50",
-										children: [/* @__PURE__ */ x("summary", {
+										children: [/* @__PURE__ */ S("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: L("product_features_title") }), /* @__PURE__ */ b(O, {
+											children: [/* @__PURE__ */ x("span", { children: R("product_features_title") }), /* @__PURE__ */ x(k, {
 												className: "h-4 w-4 shrink-0 transition-transform group-open:rotate-45",
 												"aria-hidden": "true"
 											})]
-										}), /* @__PURE__ */ b("div", {
+										}), /* @__PURE__ */ x("div", {
 											className: "border-t border-slate-200 px-3 py-3",
-											children: /* @__PURE__ */ b("ul", {
+											children: /* @__PURE__ */ x("ul", {
 												className: "grid gap-1.5 text-sm text-slate-700",
-												children: X.map((e, t) => /* @__PURE__ */ x("li", {
+												children: Z.map((e, t) => /* @__PURE__ */ S("li", {
 													className: "inline-flex items-start gap-2",
-													children: [/* @__PURE__ */ b(E, {
+													children: [/* @__PURE__ */ x(D, {
 														className: "mt-0.5 h-4 w-4 text-success",
 														"aria-hidden": "true"
-													}), /* @__PURE__ */ b("span", { children: r(e, R.language, B) })]
-												}, `${A.id}-mobile-${t}`))
+													}), /* @__PURE__ */ x("span", { children: r(e, z.language, V) })]
+												}, `${j.id}-mobile-${t}`))
 											})
 										})]
 									}) : null,
-									z ? /* @__PURE__ */ b(h, { warning: K }) : null,
-									/* @__PURE__ */ b("p", {
+									B ? /* @__PURE__ */ x(g, { warning: q }) : null,
+									/* @__PURE__ */ x("p", {
 										className: "text-2xs font-medium uppercase tracking-[0.18em] text-slate-500",
-										children: /* @__PURE__ */ b("span", { children: Q })
+										children: /* @__PURE__ */ x("span", { children: $ })
 									}),
-									/* @__PURE__ */ b("div", {
+									/* @__PURE__ */ x("div", {
 										className: "grid gap-2",
-										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"),
-												children: [/* @__PURE__ */ x("div", {
+										children: Q.map((e) => {
+											let r = `storefront-booking-bike-dialog-variant-option-${j.id}-${e.id}`.toLowerCase(), { label: i, description: s } = t(e), c = n(e), l = H[e.id] ?? "1", u = F?.(e.id) === !0, d = P?.(e.id) ?? null;
+											return /* @__PURE__ */ S("div", {
+												"data-testid": r,
+												className: T("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"),
+												children: [/* @__PURE__ */ S("div", {
 													className: "flex min-w-0 flex-1 flex-col gap-0.5",
 													children: [
-														/* @__PURE__ */ b("span", {
-															className: "text-sm font-medium text-slate-950",
-															children: r
+														/* @__PURE__ */ S("div", {
+															className: "flex min-w-0 items-baseline gap-2",
+															children: [/* @__PURE__ */ x("span", {
+																className: "min-w-0 truncate text-sm font-medium text-slate-950",
+																title: i,
+																children: i
+															}), c ? /* @__PURE__ */ x("span", {
+																className: "truncate text-xs text-slate-500",
+																children: c
+															}) : null]
 														}),
-														o ? /* @__PURE__ */ b("span", {
+														s ? /* @__PURE__ */ x("span", {
 															className: "text-xs text-slate-600",
-															children: o
+															children: s
 														}) : null,
-														l ? /* @__PURE__ */ b("span", {
+														d ? /* @__PURE__ */ x("span", {
 															className: "pt-1",
-															children: /* @__PURE__ */ b(i, {
-																variant: c ? "destructive" : "outline",
-																children: /* @__PURE__ */ b("span", { children: l })
+															children: /* @__PURE__ */ x(a, {
+																variant: u ? "destructive" : "outline",
+																children: /* @__PURE__ */ x("span", { children: d })
 															})
 														}) : null
 													]
-												}), /* @__PURE__ */ x("div", {
+												}), /* @__PURE__ */ S("div", {
 													className: "flex flex-wrap items-center gap-2 sm:justify-end",
-													children: [/* @__PURE__ */ b(j, {
-														quantity: s,
-														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, {
+													children: [/* @__PURE__ */ x(M, {
+														quantity: l,
+														ariaLabel: R("quantity_label"),
+														onQuantityChange: (t) => W(e.id, t),
+														testIdPrefix: `storefront-booking-bike-dialog-variant-quantity-${j.id}-${e.id}`.toLowerCase()
+													}), /* @__PURE__ */ S(o, {
 														type: "button",
 														className: "gap-1.5 rounded-xl",
-														"data-testid": `storefront-booking-bike-dialog-variant-add-${A.id}-${e.id}`.toLowerCase(),
-														disabled: F,
+														"data-testid": `storefront-booking-bike-dialog-variant-add-${j.id}-${e.id}`.toLowerCase(),
+														disabled: I,
 														onClick: () => {
-															I(e.id, k(s));
+															L(e.id, A(l));
 														},
-														children: [/* @__PURE__ */ b("span", { children: L("add_short") }), /* @__PURE__ */ b(O, {
+														children: [/* @__PURE__ */ x("span", { children: R("add_short") }), /* @__PURE__ */ x(k, {
 															className: "h-4 w-4",
 															"aria-hidden": "true"
 														})]
@@ -195,14 +208,14 @@ function A({ open: p, product: A, onOpenChange: M, getVariantAvailabilityLabel:
 							})]
 						})
 					}),
-					/* @__PURE__ */ b(u, {
+					/* @__PURE__ */ x(d, {
 						className: "border-t border-slate-200 px-5 py-4 sm:px-6",
-						children: /* @__PURE__ */ b(a, {
+						children: /* @__PURE__ */ x(o, {
 							type: "button",
 							variant: "outline",
 							className: "h-11 w-full rounded-xl sm:w-auto",
-							onClick: () => M(!1),
-							children: /* @__PURE__ */ b("span", { children: L("close_modal") })
+							onClick: () => N(!1),
+							children: /* @__PURE__ */ x("span", { children: R("close_modal") })
 						})
 					})
 				]
@@ -210,19 +223,19 @@ function A({ open: p, product: A, onOpenChange: M, getVariantAvailabilityLabel:
 		})
 	});
 }
-function j({ ariaLabel: e, onQuantityChange: t, quantity: n, testIdPrefix: r }) {
-	return /* @__PURE__ */ b("div", {
+function M({ ariaLabel: e, onQuantityChange: t, quantity: n, testIdPrefix: r }) {
+	return /* @__PURE__ */ x("div", {
 		className: "flex items-center",
-		children: /* @__PURE__ */ b(p, {
+		children: /* @__PURE__ */ x(m, {
 			type: "text",
 			inputMode: "numeric",
 			pattern: "[0-9]*",
 			value: n,
 			onChange: (e) => {
 				let n = e.target.value.replace(/\D/g, "");
-				t(n ? String(k(n)) : "");
+				t(n ? String(A(n)) : "");
 			},
-			onBlur: () => t(String(k(n))),
+			onBlur: () => t(String(A(n))),
 			className: "h-9 w-16 text-center",
 			"aria-label": e,
 			"data-testid": `${r}-value`
@@ -230,4 +243,4 @@ function j({ ariaLabel: e, onQuantityChange: t, quantity: n, testIdPrefix: r })
 	});
 }
 //#endregion
-export { A as BookingBikeVariantDialog };
+export { j as BookingBikeVariantDialog };