@loczer/storefront-sdk 0.237.0 → 0.238.0

package/dist/pages/CheckoutPage.js

@@ -16,16 +16,17 @@ import { ROUTE as ye, responseSchema as be } from "../lib/checkoutVerifyCoupon.j
 import { CheckoutDetailsCard as xe } from "./checkout/components/CheckoutDetailsCard.js";
 import { CheckoutInsuranceCard as Se } from "./checkout/components/CheckoutInsuranceCard.js";
 import { CheckoutLoadingSkeleton as Ce } from "./checkout/components/CheckoutLoadingSkeleton.js";
-import { CheckoutSummaryColumn as we } from "./checkout/components/CheckoutSummaryColumn.js";
-import { checkoutFormSchema as Te } from "./checkout/types.js";
-import { useEffect as s, useMemo as c, useRef as Ee, useState as l } from "react";
+import { CheckoutMobileSummaryDrawer as we } from "./checkout/components/CheckoutMobileSummaryDrawer.js";
+import { CheckoutSummaryColumn as Te } from "./checkout/components/CheckoutSummaryColumn.js";
+import { checkoutFormSchema as Ee } from "./checkout/types.js";
+import { useEffect as s, useMemo as c, useRef as De, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Link as De, useNavigate as Oe, useParams as ke, useSearchParams as Ae } from "@rpcbase/router";
-import { useTranslation as je } from "react-i18next";
-import { AlertTriangle as Me, ArrowLeft as Ne } from "lucide-react";
-import { useForm as Pe, zodResolver as Fe } from "@rpcbase/form";
+import { Link as Oe, useNavigate as ke, useParams as Ae, useSearchParams as je } from "@rpcbase/router";
+import { useTranslation as Me } from "react-i18next";
+import { AlertTriangle as Ne, ArrowLeft as Pe } from "lucide-react";
+import { useForm as Fe, zodResolver as Ie } from "@rpcbase/form";
 //#region src/pages/CheckoutPage.tsx
-var Ie = .2, f = (e, t, n) => {
+var Le = .2, f = (e, t, n) => {
 	try {
 		return new Intl.NumberFormat(n, {
 			style: "currency",
@@ -34,7 +35,7 @@ var Ie = .2, f = (e, t, n) => {
 	} catch {
 		return `${(e / 100).toFixed(2)} ${t.toUpperCase()}`;
 	}
-}, Le = (e, t) => {
+}, Re = (e, t) => {
 	try {
 		return new Intl.NumberFormat(t, {
 			style: "percent",
@@ -46,60 +47,60 @@ var Ie = .2, f = (e, t, n) => {
 	}
 };
 function p() {
-	let { t: p, i18n: m } = je(), { storefrontConfiguration: h } = fe(), Re = h.workspace?.workspaceLanguage, { bikes: g, accessories: ze } = pe(), { storeSlug: _ } = ke(), [v, Be] = Ae(), Ve = Oe(), { items: He, itemCount: Ue, isReady: We, setQuantity: Ge, removeItem: Ke, beginCheckoutSubmission: qe, confirmCheckoutPaymentSession: Je, clearCheckoutSession: Ye, clear: Xe } = ee(), [y, Ze] = l(!1), b = Ee(!1), [x, S] = l(null), [Qe, C] = l(!1), [w, T] = l(null), $e = v.get("coupon") ?? v.get("code") ?? "", [et, E] = l($e), [tt, nt] = l($e.trim()), [D, O] = l(null), [k, A] = l(null), [j, M] = l(!1), [rt, N] = l(null), [it, P] = l(null), [F, at] = l(!1), [I, ot] = l(!1), st = n(v).toString(), ct = c(() => r(new URLSearchParams(st), _), [st, _]), L = h.settings.fulfillmentModes.includes("delivery"), lt = h.settings.deliveryDisabledReason.trim(), ut = L || lt.length > 0, dt = h.shop.address?.trim() ?? "", R = c(() => {
-		let e = t(ct, {
+	let { t: p, i18n: m } = Me(), { storefrontConfiguration: h } = fe(), ze = h.workspace?.workspaceLanguage, { bikes: g, accessories: Be } = pe(), { storeSlug: _ } = Ae(), [v, Ve] = je(), He = ke(), { items: Ue, itemCount: We, isReady: Ge, setQuantity: Ke, removeItem: qe, beginCheckoutSubmission: Je, confirmCheckoutPaymentSession: Ye, clearCheckoutSession: Xe, clear: Ze } = ee(), [y, Qe] = l(!1), b = De(!1), [x, S] = l(null), [$e, et] = l(!1), [C, w] = l(null), tt = v.get("coupon") ?? v.get("code") ?? "", [nt, T] = l(tt), [rt, it] = l(tt.trim()), [E, D] = l(null), [O, k] = l(null), [A, j] = l(!1), [at, M] = l(null), [ot, N] = l(null), [P, st] = l(!1), [F, ct] = l(!1), lt = n(v).toString(), ut = c(() => r(new URLSearchParams(lt), _), [lt, _]), I = h.settings.fulfillmentModes.includes("delivery"), dt = h.settings.deliveryDisabledReason.trim(), ft = I || dt.length > 0, pt = h.shop.address?.trim() ?? "", L = c(() => {
+		let e = t(ut, {
 			startTime: "",
 			endTime: ""
 		});
-		return e.fulfillment === "delivery" && !L ? {
+		return e.fulfillment === "delivery" && !I ? {
 			...e,
 			fulfillment: "pickup"
 		} : e;
-	}, [ct, L]), z = c(() => le(R), [R]), B = h.bookingEngine.pricing, ft = te(R, B, h.bookingEngine.shop.timeZone), pt = ne(B.baseUnit, p), mt = ft?.billableUnitCount, V = c(() => re({
-		items: He,
+	}, [ut, I]), R = c(() => le(L), [L]), z = h.bookingEngine.pricing, mt = te(L, z, h.bookingEngine.shop.timeZone), ht = ne(z.baseUnit, p), gt = mt?.billableUnitCount, B = c(() => re({
+		items: Ue,
 		language: m.language,
-		fallbackLanguage: Re,
+		fallbackLanguage: ze,
 		products: {
 			bikes: g,
-			accessories: ze
+			accessories: Be
 		},
-		priceUnit: B.baseUnit,
-		billableUnitCount: mt
+		priceUnit: z.baseUnit,
+		billableUnitCount: gt
 	}), [
-		ze,
+		Be,
 		g,
-		mt,
+		gt,
 		m.language,
-		He,
-		B.baseUnit,
-		Re
-	]), H = c(() => V.lines.map((e) => ({
+		Ue,
+		z.baseUnit,
+		ze
+	]), V = c(() => B.lines.map((e) => ({
 		productId: e.checkoutProductId,
 		productVariantId: e.productVariantId,
 		quantity: e.quantity
-	})), [V.lines]), [ht, U] = l([]), [gt, W] = l(!1);
+	})), [B.lines]), [_t, H] = l([]), [U, W] = l(!1);
 	s(() => {
-		if (!_ || H.length === 0) {
-			U([]), W(!1);
+		if (!_ || V.length === 0) {
+			H([]), W(!1);
 			return;
 		}
-		if (!z) {
-			U([]), W(!1);
+		if (!R) {
+			H([]), W(!1);
 			return;
 		}
 		let e = !1;
-		return W(!0), U([]), (async () => {
+		return W(!0), H([]), (async () => {
 			try {
 				let t = await o(oe, {
 					storeSlug: _,
-					schedule: z,
-					products: H
+					schedule: R,
+					products: V
 				}), n = ue.parse(t);
 				if (e) return;
-				U(n.success ? n.availability ?? [] : []);
+				H(n.success ? n.availability ?? [] : []);
 			} catch (t) {
 				if (e) return;
-				console.error("Failed to load checkout cart availability", t), U([]);
+				console.error("Failed to load checkout cart availability", t), H([]);
 			} finally {
 				e || W(!1);
 			}
@@ -107,42 +108,42 @@ function p() {
 			e = !0;
 		};
 	}, [
-		R.endDate,
-		R.endTime,
-		R.startDate,
-		R.startTime,
-		z,
-		H,
+		L.endDate,
+		L.endTime,
+		L.startDate,
+		L.startTime,
+		R,
+		V,
 		_
 	]);
-	let _t = c(() => new Map(ht.map((e) => [se(e.productId, e.productVariantId), e])), [ht]), vt = c(() => ({
-		...V,
-		lines: V.lines.map((e) => {
-			let t = _t.get(se(e.checkoutProductId, e.productVariantId)), n = t ? ce(t) : e.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
+	let vt = c(() => new Map(_t.map((e) => [se(e.productId, e.productVariantId), e])), [_t]), yt = c(() => ({
+		...B,
+		lines: B.lines.map((e) => {
+			let t = vt.get(se(e.checkoutProductId, e.productVariantId)), n = t ? ce(t) : e.availabilityStatus === "OUT_OF_STOCK" ? "unavailable" : void 0;
 			return {
 				...e,
-				insufficientCapacity: !gt && n !== void 0,
-				availabilityIssue: gt ? void 0 : n
+				insufficientCapacity: !U && n !== void 0,
+				availabilityIssue: U ? void 0 : n
 			};
 		})
 	}), [
-		_t,
-		gt,
-		V
-	]), G = c(() => V.lines.map((e) => ({
+		vt,
+		U,
+		B
+	]), G = c(() => B.lines.map((e) => ({
 		kind: e.kind,
 		productId: e.checkoutProductId,
 		productVariantId: e.productVariantId,
 		quantity: e.quantity
-	})), [V.lines]), yt = new Map(g.map((e) => [e.checkoutProductId?.trim() || e.id, e])), bt = V.lines.flatMap((e) => {
-		let t = yt.get(e.checkoutProductId);
+	})), [B.lines]), bt = new Map(g.map((e) => [e.checkoutProductId?.trim() || e.id, e])), K = B.lines.flatMap((e) => {
+		let t = bt.get(e.checkoutProductId);
 		return t?.insurance?.enabled ? [{
 			quantity: e.quantity,
 			pricePerDayMinor: t.insurance.pricePerDayMinor,
 			deductibleAmountMinor: t.insurance.deductibleAmountMinor
 		}] : [];
-	}), K = h.modules?.insurance?.enabled === !0 && bt.length > 0, q = K && I, xt = bt.reduce((e, t) => e + t.pricePerDayMinor * t.quantity, 0), St = bt.reduce((e, t) => Math.max(e, t.deductibleAmountMinor), 0), Ct = V.totalMinor ?? 0, J = k?.totalMinor ?? Ct, Y = k?.insuranceSubtotalMinor ?? 0, wt = D?.discountAmountMinor ?? 0, X = e(new URLSearchParams(), R).toString(), Z = `/${_ ?? ""}/booking${X ? `?${X}` : ""}`, Tt = `/${_ ?? ""}/checkout${X ? `?${X}` : ""}`, Et = Pe({
-		resolver: Fe(Te),
+	}), q = h.modules?.insurance?.enabled === !0 && K.length > 0, J = q && F, xt = K.reduce((e, t) => e + t.pricePerDayMinor * t.quantity, 0), St = K.reduce((e, t) => Math.max(e, t.deductibleAmountMinor), 0), Ct = B.totalMinor ?? 0, Y = O?.totalMinor ?? Ct, X = O?.insuranceSubtotalMinor ?? 0, wt = E?.discountAmountMinor ?? 0, Z = e(new URLSearchParams(), L).toString(), Q = `/${_ ?? ""}/booking${Z ? `?${Z}` : ""}`, Tt = `/${_ ?? ""}/checkout${Z ? `?${Z}` : ""}`, Et = Fe({
+		resolver: Ie(Ee),
 		defaultValues: {
 			fullName: "",
 			email: "",
@@ -151,123 +152,123 @@ function p() {
 		}
 	});
 	s(() => {
-		i(_, R);
-	}, [R, _]), s(() => {
-		!K && I && ot(!1);
-	}, [I, K]);
-	let Q = (t) => {
+		i(_, L);
+	}, [L, _]), s(() => {
+		!q && F && ct(!1);
+	}, [F, q]);
+	let Dt = (t) => {
 		let n = {
-			...R,
+			...L,
 			...t
 		}, r = e(v, n);
-		r.toString() !== v.toString() && (Be(r, { replace: !0 }), i(_, r));
+		r.toString() !== v.toString() && (Ve(r, { replace: !0 }), i(_, r));
 	};
 	s(() => {
-		if (!_ || G.length === 0 || !z) {
-			O(null), A(null), M(!1), N(null), P(null);
+		if (!_ || G.length === 0 || !R) {
+			D(null), k(null), j(!1), M(null), N(null);
 			return;
 		}
-		let e = tt.trim(), t = e.length === 0 && !F, n = !1;
-		return M(!0), P(null), N(null), (async () => {
+		let e = rt.trim(), t = e.length === 0 && !P, n = !1;
+		return j(!0), N(null), M(null), (async () => {
 			try {
 				let r = await o(ye, {
 					storeSlug: _,
-					schedule: z,
+					schedule: R,
 					items: G,
 					couponCode: e || void 0,
 					includeAutoApply: t,
-					insuranceAccepted: q
+					insuranceAccepted: J
 				}), i = be.parse(r);
 				if (n) return;
-				if (A(typeof i.subtotalMinor == "number" && typeof i.totalMinor == "number" ? {
+				if (k(typeof i.subtotalMinor == "number" && typeof i.totalMinor == "number" ? {
 					subtotalMinor: i.subtotalMinor,
 					totalMinor: i.totalMinor,
 					lateReturnSurchargeMinor: i.lateReturnSurchargeMinor,
 					insuranceSubtotalMinor: i.insuranceSubtotalMinor,
 					insuranceBillableDays: i.insuranceBillableDays
 				} : null), !i.success) {
-					O(null), P(i.message || p("checkout_coupon_invalid"));
+					D(null), N(i.message || p("checkout_coupon_invalid"));
 					return;
 				}
-				O(i.coupon ?? null), i.coupon && (i.coupon.autoApplied && e.length === 0 ? (E(i.coupon.code), N(p("checkout_coupon_auto_applied", { code: i.coupon.code }))) : N(p("checkout_coupon_manual_applied")));
+				D(i.coupon ?? null), i.coupon && (i.coupon.autoApplied && e.length === 0 ? (T(i.coupon.code), M(p("checkout_coupon_auto_applied", { code: i.coupon.code }))) : M(p("checkout_coupon_manual_applied")));
 			} catch (e) {
 				if (n) return;
-				console.error("Failed to verify checkout coupon", e), O(null), A(null), P(p("checkout_coupon_error"));
+				console.error("Failed to verify checkout coupon", e), D(null), k(null), N(p("checkout_coupon_error"));
 			} finally {
-				n || M(!1);
+				n || j(!1);
 			}
 		})(), () => {
 			n = !0;
 		};
 	}, [
-		F,
-		R.endDate,
-		R.endTime,
-		R.startDate,
-		R.startTime,
-		z,
+		P,
+		L.endDate,
+		L.endTime,
+		L.startDate,
+		L.startTime,
+		R,
 		G,
-		q,
+		J,
 		_,
-		tt,
+		rt,
 		p
 	]), s(() => {
-		if (!_ || V.lines.length === 0 || !z) {
-			S(null), T(null), C(!1);
+		if (!_ || B.lines.length === 0 || !R) {
+			S(null), w(null), et(!1);
 			return;
 		}
 		let e = !1;
-		return C(!0), T(null), (async () => {
+		return et(!0), w(null), (async () => {
 			try {
 				let t = await o(_e, {
 					storeSlug: _,
-					schedule: z,
-					estimatedTotalMinor: J,
-					insuranceAmountMinor: Y
+					schedule: R,
+					estimatedTotalMinor: Y,
+					insuranceAmountMinor: X
 				}), n = ve.parse(t);
 				if (e) return;
 				if (!n.success || !n.decision) {
-					S(null), T(n.message || p("checkout_payment_error"));
+					S(null), w(n.message || p("checkout_payment_error"));
 					return;
 				}
 				S(n.decision);
 			} catch (t) {
 				if (e) return;
-				console.error("Failed to load checkout payment decision", t), S(null), T(p("checkout_payment_error"));
+				console.error("Failed to load checkout payment decision", t), S(null), w(p("checkout_payment_error"));
 			} finally {
-				e || C(!1);
+				e || et(!1);
 			}
 		})(), () => {
 			e = !0;
 		};
 	}, [
-		R.endDate,
-		R.endTime,
-		R.startDate,
-		R.startTime,
-		z,
-		J,
-		V.lines.length,
+		L.endDate,
+		L.endTime,
+		L.startDate,
+		L.startTime,
+		R,
 		Y,
+		B.lines.length,
+		X,
 		_,
 		p
 	]);
-	let $ = x?.currency ?? "EUR", Dt = f(J, $, m.language), Ot = Math.max(0, J - Y), kt = Math.round(Ot / 1.2), At = kt + Y, jt = Math.max(0, Ot - kt), Mt = f(At, $, m.language), Nt = f(jt, $, m.language), Pt = Le(Ie, m.language), Ft = Y > 0 ? f(Y, $, m.language) : void 0, It = x?.amountToCollectMinor ?? 0, Lt = x?.shouldCollectOnlinePayment === !0 && It > 0, Rt = Et.handleSubmit(async (e) => {
-		if (!_ || G.length === 0 || !z || b.current) return;
-		Ze(!0), b.current = !0;
-		let t = qe();
+	let $ = x?.currency ?? "EUR", Ot = f(Y, $, m.language), kt = Math.max(0, Y - X), At = Math.round(kt / 1.2), jt = At + X, Mt = Math.max(0, kt - At), Nt = f(jt, $, m.language), Pt = f(Mt, $, m.language), Ft = Re(Le, m.language), It = X > 0 ? f(X, $, m.language) : void 0, Lt = x?.amountToCollectMinor ?? 0, Rt = x?.shouldCollectOnlinePayment === !0 && Lt > 0, zt = Et.handleSubmit(async (e) => {
+		if (!_ || G.length === 0 || !R || b.current) return;
+		Qe(!0), b.current = !0;
+		let t = Je();
 		try {
 			let n = await o(ie, {
 				storeSlug: _,
 				checkoutSessionId: t.checkoutSessionId,
 				replacesCheckoutSessionId: t.replacesCheckoutSessionId,
-				schedule: z,
-				fulfillment: R.fulfillment,
-				startAddress: R.fulfillment === "delivery" ? R.startAddress : void 0,
-				endAddress: R.fulfillment === "delivery" ? R.endAddress : void 0,
-				couponCode: D?.code,
-				couponAutoApplied: !F && D?.autoApplied,
-				insuranceAccepted: q,
+				schedule: R,
+				fulfillment: L.fulfillment,
+				startAddress: L.fulfillment === "delivery" ? L.startAddress : void 0,
+				endAddress: L.fulfillment === "delivery" ? L.endAddress : void 0,
+				couponCode: E?.code,
+				couponAutoApplied: !P && E?.autoApplied,
+				insuranceAccepted: J,
 				customer: {
 					name: e.fullName,
 					email: e.email,
@@ -277,17 +278,55 @@ function p() {
 				items: G
 			}), r = ae.parse(n);
 			if (!r.success || !r.checkout) {
-				Ye(), a.error(r.message || p("checkout_payment_error"));
+				Xe(), a.error(r.message || p("checkout_payment_error"));
 				return;
 			}
-			r.checkout.requiresPayment ? Je(r.checkout.checkoutSessionId ?? t.checkoutSessionId) : a.success(p("checkout_success_toast")), await Ve(r.checkout.nextPath), r.checkout.requiresPayment || Xe();
+			r.checkout.requiresPayment ? Ye(r.checkout.checkoutSessionId ?? t.checkoutSessionId) : a.success(p("checkout_success_toast")), await He(r.checkout.nextPath), r.checkout.requiresPayment || Ze();
 		} catch (e) {
 			console.error("Failed to submit storefront checkout", e), a.error(p("checkout_payment_error"));
 		} finally {
-			b.current = !1, Ze(!1);
+			b.current = !1, Qe(!1);
+		}
+	}), Bt = p(Rt ? "checkout_continue_to_payment" : "checkout_submit"), Vt = p(Rt ? "checkout_mobile_continue_to_payment" : "checkout_mobile_submit"), Ht = L.fulfillment === "delivery" && L.startAddress.trim().length === 0, Ut = !y && !$e && !C && !U && !A && !ot && !!x && !!R && !Ht && G.length > 0, Wt = ({ className: e, presentation: t, stickyTopClassName: n } = {}) => /* @__PURE__ */ u(Te, {
+		className: e,
+		lines: yt.lines,
+		itemCount: We,
+		baseUnitLabel: ht,
+		bookingSubtotalLabel: Nt,
+		vatAmountLabel: Pt,
+		vatRateLabel: Ft,
+		bookingTotalLabel: Ot,
+		bookingPeriod: R ? {
+			bookingPath: Q,
+			startDate: R.startDate,
+			startTime: R.startTime,
+			endDate: R.endDate,
+			endTime: R.endTime
+		} : void 0,
+		presentation: t,
+		stickyTopClassName: n,
+		onQuantityChange: Ke,
+		onRemove: qe,
+		coupon: {
+			code: nt,
+			appliedCode: E?.code,
+			discountLabel: E && wt > 0 ? f(wt, $, m.language) : null,
+			message: at,
+			error: ot,
+			loading: A,
+			disabled: y,
+			onCodeChange: (e) => {
+				T(e), N(null), M(null);
+			},
+			onApply: () => {
+				st(!1), it(nt.trim());
+			},
+			onRemove: () => {
+				T(""), it(""), D(null), k(null), N(null), M(null), st(!0);
+			}
 		}
-	}), zt = p(Lt ? "checkout_continue_to_payment" : "checkout_submit"), Bt = R.fulfillment === "delivery" && R.startAddress.trim().length === 0, Vt = !y && !Qe && !w && !j && !it && !!x && !!z && !Bt && G.length > 0;
-	return We ? V.lines.length === 0 ? /* @__PURE__ */ u("div", {
+	});
+	return Ge ? B.lines.length === 0 ? /* @__PURE__ */ u("div", {
 		className: "mx-auto max-w-3xl px-4 py-10 sm:px-6",
 		children: /* @__PURE__ */ d("div", {
 			className: "rounded-xl border border-slate-200 bg-white p-4 shadow-sm",
@@ -302,11 +341,11 @@ function p() {
 				}),
 				/* @__PURE__ */ u("div", {
 					className: "mt-6",
-					children: /* @__PURE__ */ u(De, {
-						to: Z,
+					children: /* @__PURE__ */ u(Oe, {
+						to: Q,
 						children: /* @__PURE__ */ d(de, {
 							className: "gap-2",
-							children: [/* @__PURE__ */ u(Ne, {
+							children: [/* @__PURE__ */ u(Pe, {
 								className: "h-4 w-4",
 								"aria-hidden": "true"
 							}), /* @__PURE__ */ u("span", { children: p("back_to_booking") })]
@@ -315,14 +354,14 @@ function p() {
 				})
 			]
 		})
-	}) : /* @__PURE__ */ u(he, {
+	}) : /* @__PURE__ */ d(he, {
 		currentStep: "checkout",
-		bookingPath: Z,
+		bookingPath: Q,
 		checkoutPath: Tt,
-		backPath: Z,
+		backPath: Q,
 		backLabel: p("back_to_booking"),
-		children: /* @__PURE__ */ d("div", {
-			className: "grid gap-6 lg:grid-cols-12",
+		children: [/* @__PURE__ */ d("div", {
+			className: "grid gap-6 pb-24 lg:grid-cols-12 lg:pb-0",
 			children: [/* @__PURE__ */ d("div", {
 				className: "lg:col-span-7",
 				children: [
@@ -330,7 +369,7 @@ function p() {
 						className: "text-xl font-semibold tracking-tight text-slate-950",
 						children: /* @__PURE__ */ u("span", { children: p("checkout_title") })
 					}),
-					z ? null : /* @__PURE__ */ u("p", {
+					R ? null : /* @__PURE__ */ u("p", {
 						role: "alert",
 						className: "mt-3 text-sm text-destructive",
 						children: /* @__PURE__ */ u("span", { children: p("booking_time_slots_required") })
@@ -338,33 +377,33 @@ function p() {
 					/* @__PURE__ */ d("div", {
 						className: "mt-5 grid gap-4",
 						children: [
-							ut ? /* @__PURE__ */ u("div", {
+							ft ? /* @__PURE__ */ u("div", {
 								className: "rounded-xl border border-slate-200 bg-white p-3 shadow-sm",
 								children: /* @__PURE__ */ u(me, {
-									value: R.fulfillment,
-									onValueChange: (e) => Q({ fulfillment: e }),
-									pickupAddress: dt,
-									deliveryEnabled: L,
-									deliveryDisabledReason: lt,
-									startAddress: R.startAddress,
-									onStartAddressChange: (e) => Q({ startAddress: e }),
-									endAddress: R.endAddress,
-									onEndAddressChange: (e) => Q({ endAddress: e }),
+									value: L.fulfillment,
+									onValueChange: (e) => Dt({ fulfillment: e }),
+									pickupAddress: pt,
+									deliveryEnabled: I,
+									deliveryDisabledReason: dt,
+									startAddress: L.startAddress,
+									onStartAddressChange: (e) => Dt({ startAddress: e }),
+									endAddress: L.endAddress,
+									onEndAddressChange: (e) => Dt({ endAddress: e }),
 									showPickupAddressWhenPickupOnly: !1,
 									testIdPrefix: "storefront-checkout-fulfillment"
 								})
 							}) : null,
 							/* @__PURE__ */ u(xe, { form: Et }),
-							K ? /* @__PURE__ */ u(Se, {
-								accepted: q,
-								disabled: y || j,
+							q ? /* @__PURE__ */ u(Se, {
+								accepted: J,
+								disabled: y || A,
 								dailyAmountLabel: f(xt, $, m.language),
-								totalAmountLabel: Ft,
-								billableDays: k?.insuranceBillableDays,
+								totalAmountLabel: It,
+								billableDays: O?.insuranceBillableDays,
 								deductibleLabel: St > 0 ? f(St, $, m.language) : void 0,
-								onAcceptedChange: ot
+								onAcceptedChange: ct
 							}) : null,
-							Qe ? /* @__PURE__ */ d("div", {
+							$e ? /* @__PURE__ */ d("div", {
 								className: "flex items-center gap-2 text-sm text-slate-600",
 								role: "status",
 								children: [/* @__PURE__ */ u(ge, {
@@ -372,70 +411,45 @@ function p() {
 									"aria-hidden": "true"
 								}), /* @__PURE__ */ u("span", { children: p("checkout_payment_loading") })]
 							}) : null,
-							w ? /* @__PURE__ */ d("div", {
+							C ? /* @__PURE__ */ d("div", {
 								className: "flex items-start gap-2 rounded-md bg-destructive p-3 text-sm text-destructive-foreground shadow-sm",
 								role: "alert",
-								children: [/* @__PURE__ */ u(Me, {
+								children: [/* @__PURE__ */ u(Ne, {
 									className: "mt-0.5 h-4 w-4",
 									"aria-hidden": "true"
-								}), /* @__PURE__ */ u("span", { children: w })]
+								}), /* @__PURE__ */ u("span", { children: C })]
 							}) : null,
 							/* @__PURE__ */ u(de, {
 								type: "button",
 								size: "lg",
 								onClick: () => {
-									Rt();
+									zt();
 								},
-								disabled: !Vt,
-								className: "mt-4 w-fit",
-								children: /* @__PURE__ */ u("span", { children: zt })
+								disabled: !Ut,
+								className: "mt-4 hidden w-fit lg:inline-flex",
+								children: /* @__PURE__ */ u("span", { children: Bt })
 							}),
-							Bt ? /* @__PURE__ */ u("p", {
+							Ht ? /* @__PURE__ */ u("p", {
 								className: "text-sm text-slate-600",
 								children: /* @__PURE__ */ u("span", { children: p("checkout_delivery_address_required") })
 							}) : null
 						]
 					})
 				]
-			}), /* @__PURE__ */ u(we, {
-				lines: vt.lines,
-				itemCount: Ue,
-				baseUnitLabel: pt,
-				bookingSubtotalLabel: Mt,
-				vatAmountLabel: Nt,
-				vatRateLabel: Pt,
-				bookingTotalLabel: Dt,
-				bookingPeriod: z ? {
-					bookingPath: Z,
-					startDate: z.startDate,
-					startTime: z.startTime,
-					endDate: z.endDate,
-					endTime: z.endTime
-				} : void 0,
-				onQuantityChange: Ge,
-				onRemove: Ke,
-				coupon: {
-					code: et,
-					appliedCode: D?.code,
-					discountLabel: D && wt > 0 ? f(wt, $, m.language) : null,
-					message: rt,
-					error: it,
-					loading: j,
-					disabled: y,
-					onCodeChange: (e) => {
-						E(e), P(null), N(null);
-					},
-					onApply: () => {
-						at(!1), nt(et.trim());
-					},
-					onRemove: () => {
-						E(""), nt(""), O(null), A(null), P(null), N(null), at(!0);
-					}
-				}
-			})]
-		})
+			}), Wt({ className: "hidden lg:block" })]
+		}), /* @__PURE__ */ u(we, {
+			canSubmit: Ut,
+			compactSubmitLabel: Vt,
+			itemCount: We,
+			submitLabel: Bt,
+			totalLabel: Ot,
+			onSubmit: () => {
+				zt();
+			},
+			children: Wt({ presentation: "flat" })
+		})]
 	}) : /* @__PURE__ */ u(Ce, {
-		bookingPath: Z,
+		bookingPath: Q,
 		checkoutPath: Tt
 	});
 }

package/dist/pages/checkout/components/CheckoutLoadingSkeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckoutLoadingSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/pages/checkout/components/CheckoutLoadingSkeleton.tsx"],"names":[],"mappings":"AAMA,KAAK,4BAA4B,GAAG;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAMD,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,YAAY,GACb,EAAE,4BAA4B,2CAuF9B"}
+{"version":3,"file":"CheckoutLoadingSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/pages/checkout/components/CheckoutLoadingSkeleton.tsx"],"names":[],"mappings":"AAMA,KAAK,4BAA4B,GAAG;IAClC,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAMD,wBAAgB,uBAAuB,CAAC,EACtC,WAAW,EACX,YAAY,GACb,EAAE,4BAA4B,2CA8F9B"}

package/dist/pages/checkout/components/CheckoutLoadingSkeleton.js

@@ -6,14 +6,14 @@ import { cn as i } from "@rpcbase/ui";
 var a = ({ className: e }) => /* @__PURE__ */ t("div", { className: i("rounded bg-slate-200", e) });
 function o({ bookingPath: i, checkoutPath: o }) {
 	let { t: s } = r();
-	return /* @__PURE__ */ t(e, {
+	return /* @__PURE__ */ n(e, {
 		currentStep: "checkout",
 		bookingPath: i,
 		checkoutPath: o,
 		backPath: i,
 		backLabel: s("back_to_booking"),
-		children: /* @__PURE__ */ n("div", {
-			className: "grid animate-pulse gap-6 lg:grid-cols-12",
+		children: [/* @__PURE__ */ n("div", {
+			className: "grid animate-pulse gap-6 pb-24 lg:grid-cols-12 lg:pb-0",
 			"data-testid": "checkout-cart-skeleton",
 			role: "status",
 			"aria-busy": "true",
@@ -47,11 +47,11 @@ function o({ bookingPath: i, checkoutPath: o }) {
 								})]
 							})]
 						}),
-						/* @__PURE__ */ t(a, { className: "mt-8 h-11 w-52" })
+						/* @__PURE__ */ t(a, { className: "mt-8 hidden h-11 w-52 lg:block" })
 					]
 				}),
 				/* @__PURE__ */ t("div", {
-					className: "lg:col-span-5",
+					className: "hidden lg:col-span-5 lg:block",
 					"aria-hidden": "true",
 					children: /* @__PURE__ */ n("div", {
 						className: "overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm",
@@ -98,7 +98,11 @@ function o({ bookingPath: i, checkoutPath: o }) {
 					})
 				})
 			]
-		})
+		}), /* @__PURE__ */ n("div", {
+			className: "fixed inset-x-0 bottom-0 z-40 flex animate-pulse gap-2 border-t border-slate-200/80 bg-white/95 p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] shadow-[0_-12px_30px_-22px_rgba(15,23,42,0.45)] backdrop-blur-lg lg:hidden",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ t(a, { className: "h-12 min-w-0 flex-1" }), /* @__PURE__ */ t(a, { className: "h-12 min-w-0 flex-1" })]
+		})]
 	});
 }
 //#endregion