@develemit/storefront 0.3.0 → 0.6.0

package/dist/index.js

@@ -399,7 +399,7 @@ function F(e = "sf-cart") {
 }
 // src/cart/cart-provider.tsx
 var I = n(null), L = F();
-function R({ storage: e = L, children: t }) {
+function ee({ storage: e = L, children: t }) {
 	let [n, i] = s(M, A), [u, f] = l(!1), [p, m] = l(!1), h = c(n);
 	a(() => {
 		h.current = n;
@@ -457,20 +457,81 @@ function R({ storage: e = L, children: t }) {
 		children: t
 	});
 }
-function z() {
+function R() {
 	let e = i(I);
 	if (!e) throw Error("useCart must be used inside <CartProvider>");
 	return e;
 }
+// src/components/cart-summary/discount-types.ts
+var z = {
+	toggle: "Have a code?",
+	field: "Discount code",
+	apply: "Apply",
+	remove: "Remove",
+	line: "Discount",
+	unavailable: "We could not check that code. Please try again.",
+	reasons: {
+		not_found: "That code is not valid.",
+		inactive: "That code is not valid.",
+		not_started: "That code is not active yet.",
+		expired: "That code has expired.",
+		min_subtotal: "Your cart is below the minimum for that code.",
+		exhausted: "That code is no longer available.",
+		currency: "That code does not apply to this cart."
+	}
+};
+function B(e, t) {
+	return t?.[e] ?? z.reasons[e];
+}
+// src/cart/use-checkout.ts
+var V = {
+	outOfStock: "Some items just sold or are on hold, so we removed them from your cart.",
+	unavailable: "Checkout is unavailable right now. Please try again."
+}, te = (e) => window.location.assign(e);
+function ne({ startCheckout: e, onRedirect: t = te, onDiscountInvalid: n, labels: i }) {
+	let a = R(), [o, s] = l(!1), [c, u] = l(null), { lines: d, remove: f } = a, p = {
+		...V,
+		...i
+	};
+	return {
+		checkout: r(async (r = {}) => {
+			s(!0), u(null);
+			try {
+				let i = await e(d.map((e) => ({
+					productId: e.productId,
+					quantity: e.quantity
+				})), r);
+				if ("url" in i) {
+					t(i.url);
+					return;
+				}
+				i.error === "discount_invalid" ? (u(B(i.reason, p.discountReasons)), n?.(i.reason)) : (i.productIds.forEach(f), u(p.outOfStock));
+			} catch {
+				u(p.unavailable);
+			}
+			s(!1);
+		}, [
+			e,
+			t,
+			n,
+			d,
+			f,
+			i
+		]),
+		busy: o,
+		message: c,
+		clearMessage: r(() => u(null), [])
+	};
+}
 // src/components/add-to-cart-button/add-to-cart-button.tsx
-var B = {
+var H = {
 	add: "Add to cart",
 	inCart: "In your cart",
 	unavailable: "Unavailable"
 };
-function V({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
-	let i = z(), a = {
-		...B,
+function U({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
+	let i = R(), a = {
+		...H,
 		...t
 	}, o = i.lines.find((t) => t.productId === e.id)?.quantity ?? 0, s = e.availability !== "available", c = o >= e.quantity, l = !i.hydrated || s || c, u = s ? a.unavailable : c ? a.inCart : a.add;
 	function f() {
@@ -494,13 +555,13 @@ function V({ product: e, labels: t, openOnAdd: n = !0, className: r }) {
 	});
 }
 // src/components/cart-line-item/cart-line-item.tsx
-var H = {
+var W = {
 	remove: "Remove",
 	quantity: "Quantity"
 };
-function U({ line: t, labels: n }) {
-	let { remove: r, setQuantity: i } = z(), { locale: a, renderLink: o, renderImage: s, hrefs: c } = y(), l = {
-		...H,
+function G({ line: t, labels: n }) {
+	let { remove: r, setQuantity: i } = R(), { locale: a, renderLink: o, renderImage: s, hrefs: c } = y(), l = {
+		...W,
 		...n
 	}, u = t.maxQuantity > 1;
 	return /* @__PURE__ */ f("li", {
@@ -544,17 +605,17 @@ function U({ line: t, labels: n }) {
 	});
 }
 // src/lib/parse-duration.ts
-function W(e) {
+function K(e) {
 	let t = /^\s*(-?\d*\.?\d+)\s*(ms|s)\s*$/.exec(e);
 	if (!t) return 0;
 	let n = Number(t[1]);
 	return Math.max(0, t[2] === "s" ? n * 1e3 : n);
 }
 // src/components/cart-drawer/use-drawer-presence.ts
-function G(e, t) {
+function q(e, t) {
 	let [n, r] = l(0), [i, o] = l(e), [s, c] = l(!1);
 	return i !== e && (o(e), c(!e && n > 0)), a(() => {
-		e && t.current && r(W(getComputedStyle(t.current).getPropertyValue("--sf-motion-duration")));
+		e && t.current && r(K(getComputedStyle(t.current).getPropertyValue("--sf-motion-duration")));
 	}, [e, t]), a(() => {
 		if (!s) return;
 		let e = setTimeout(() => c(!1), n);
@@ -564,41 +625,179 @@ function G(e, t) {
 		state: e ? "open" : "closed"
 	};
 }
-// src/components/cart-summary/cart-summary.tsx
-function K({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r = !1, labels: i }) {
-	let a = z(), { locale: o } = y(), s = i?.subtotal ?? "Subtotal";
+// src/components/cart-summary/discount-field.tsx
+function J({ labels: t, applied: n, error: r, pending: i, currency: a, locale: o, onApply: s, onRemove: c }) {
+	let [u, p] = l(!1), [m, h] = l("");
+	function g(e) {
+		e.preventDefault();
+		let t = m.trim();
+		t && s(t);
+	}
+	if (n) return /* @__PURE__ */ f("p", {
+		className: "sf-cart-summary__row sf-cart-summary__discount",
+		children: [/* @__PURE__ */ f("span", { children: [
+			t.line,
+			" (",
+			n.code,
+			")",
+			" ",
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				className: "sf-link-button",
+				onClick: c,
+				children: t.remove
+			})
+		] }), /* @__PURE__ */ f("span", {
+			className: "sf-price",
+			children: ["−", e(n.discountCents, a, o)]
+		})]
+	});
+	let _ = r === "unavailable" ? t.unavailable : r ? t.reasons[r] : null;
 	return /* @__PURE__ */ f("div", {
-		className: "sf-cart-summary",
-		children: [/* @__PURE__ */ f("p", {
-			className: "sf-cart-summary__row",
-			children: [/* @__PURE__ */ d("span", { children: s }), /* @__PURE__ */ d("span", {
-				className: "sf-price",
-				children: e(a.subtotalCents, a.currency ?? "USD", o)
+		className: "sf-cart-summary__code",
+		children: [u ? /* @__PURE__ */ f("form", {
+			onSubmit: g,
+			className: "sf-cart-summary__code-form",
+			children: [/* @__PURE__ */ d("input", {
+				"aria-label": t.field,
+				value: m,
+				onChange: (e) => h(e.target.value),
+				autoCapitalize: "characters",
+				autoComplete: "off"
+			}), /* @__PURE__ */ d("button", {
+				type: "submit",
+				className: "sf-button",
+				disabled: i,
+				children: t.apply
 			})]
-		}), /* @__PURE__ */ d("button", {
+		}) : /* @__PURE__ */ d("button", {
 			type: "button",
-			className: "sf-button",
-			disabled: r || !t || a.lines.length === 0,
-			onClick: t,
-			children: n
+			className: "sf-link-button",
+			"aria-expanded": !1,
+			onClick: () => p(!0),
+			children: t.toggle
+		}), _ && /* @__PURE__ */ d("p", {
+			role: "alert",
+			className: "sf-cart-summary__code-error",
+			children: _
 		})]
 	});
 }
+// src/components/cart-summary/use-discount.ts
+function Y(e) {
+	let { lines: t } = R(), n = t.map((e) => ({
+		productId: e.productId,
+		quantity: e.quantity
+	})), i = n.map((e) => `${e.productId}:${e.quantity}`).join(","), [o, s] = l(null), [u, d] = l(null), [f, p] = l(!1), m = c({
+		discount: e,
+		items: n
+	});
+	a(() => {
+		m.current = {
+			discount: e,
+			items: n
+		};
+	});
+	let h = c(0), g = c(i), _ = r(() => {
+		h.current += 1, s(null), m.current.discount?.onApply?.(null);
+	}, []), v = r(async (e, t) => {
+		let n = m.current;
+		if (!n.discount) return;
+		let r = ++h.current;
+		g.current = n.items.map((e) => `${e.productId}:${e.quantity}`).join(","), p(!0);
+		let i;
+		try {
+			i = await n.discount.onPreview(e, n.items);
+		} catch {
+			i = {
+				ok: !1,
+				reason: "unavailable"
+			};
+		}
+		r === h.current && (p(!1), i.ok ? (d(null), s({
+			code: i.code,
+			discountCents: i.discountCents
+		}), n.discount.onApply?.(i.code)) : t(i.reason));
+	}, []), y = r((e) => v(e, (e) => d(e)), [v]), b = r(() => {
+		d(null), p(!1), _();
+	}, [_]), x = o?.code, S = e?.debounceMs ?? 300;
+	return a(() => {
+		if (!x || i === g.current) return;
+		let e = setTimeout(() => {
+			m.current.items.length === 0 ? _() : v(x, (e) => {
+				d(e), _();
+			});
+		}, S);
+		return () => clearTimeout(e);
+	}, [
+		x,
+		i,
+		S,
+		v,
+		_
+	]), {
+		applied: o,
+		error: u,
+		pending: f,
+		apply: y,
+		remove: b
+	};
+}
+// src/components/cart-summary/cart-summary.tsx
+function X({ onCheckout: t, checkoutLabel: n = "Checkout", checkoutDisabled: r = !1, labels: i, discount: a }) {
+	let o = R(), { locale: s } = y(), c = i?.subtotal ?? "Subtotal", l = Y(a), u = {
+		...z,
+		...i?.discount,
+		reasons: {
+			...z.reasons,
+			...i?.discount?.reasons
+		}
+	};
+	return /* @__PURE__ */ f("div", {
+		className: "sf-cart-summary",
+		children: [
+			/* @__PURE__ */ f("p", {
+				className: "sf-cart-summary__row",
+				children: [/* @__PURE__ */ d("span", { children: c }), /* @__PURE__ */ d("span", {
+					className: "sf-price",
+					children: e(o.subtotalCents, o.currency ?? "USD", s)
+				})]
+			}),
+			a && o.lines.length > 0 && /* @__PURE__ */ d(J, {
+				labels: u,
+				currency: o.currency ?? "USD",
+				locale: s,
+				onApply: (e) => void l.apply(e),
+				onRemove: l.remove,
+				applied: l.applied,
+				error: l.error,
+				pending: l.pending
+			}),
+			/* @__PURE__ */ d("button", {
+				type: "button",
+				className: "sf-button",
+				disabled: r || !t || o.lines.length === 0,
+				onClick: t,
+				children: n
+			})
+		]
+	});
+}
 // src/components/cart-drawer/cart-drawer.tsx
-var q = {
+var Z = {
 	title: "Your cart",
 	close: "Close",
 	empty: "Your cart is empty."
-}, J = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
-function Y({ labels: e, summary: t, slots: n }) {
-	let r = z(), i = {
-		...q,
+}, Q = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function re({ labels: e, summary: t, slots: n }) {
+	let r = R(), i = {
+		...Z,
 		...e
-	}, o = c(null), s = c(null), { isOpen: l } = r, p = G(l, s);
+	}, o = c(null), s = c(null), { isOpen: l } = r, p = q(l, s);
 	if (a(() => {
 		if (!l) return;
 		let e = document.activeElement;
-		return o.current?.querySelector(J)?.focus(), () => e?.focus();
+		return o.current?.querySelector(Q)?.focus(), () => e?.focus();
 	}, [l]), !p.mounted) return null;
 	function m(e) {
 		if (e.key === "Escape") {
@@ -606,7 +805,7 @@ function Y({ labels: e, summary: t, slots: n }) {
 			return;
 		}
 		if (e.key !== "Tab") return;
-		let t = Array.from(o.current?.querySelectorAll(J) ?? []);
+		let t = Array.from(o.current?.querySelectorAll(Q) ?? []);
 		if (t.length === 0) return;
 		let n = t[0], i = t[t.length - 1];
 		e.shiftKey && document.activeElement === n ? (e.preventDefault(), i.focus()) : !e.shiftKey && document.activeElement === i && (e.preventDefault(), n.focus());
@@ -647,9 +846,9 @@ function Y({ labels: e, summary: t, slots: n }) {
 			}) : /* @__PURE__ */ f(u, { children: [
 				/* @__PURE__ */ d("ul", {
 					className: "sf-drawer__lines",
-					children: r.lines.map((e) => /* @__PURE__ */ d(U, { line: e }, e.productId))
+					children: r.lines.map((e) => /* @__PURE__ */ d(G, { line: e }, e.productId))
 				}),
-				/* @__PURE__ */ d(K, { ...t }),
+				/* @__PURE__ */ d(X, { ...t }),
 				n?.summaryNote && /* @__PURE__ */ d("div", {
 					className: "sf-drawer__note",
 					children: n.summaryNote
@@ -659,8 +858,8 @@ function Y({ labels: e, summary: t, slots: n }) {
 	});
 }
 // src/components/cart-button/cart-button.tsx
-function X({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hideZeroCount: i = !1 }) {
-	let a = z(), o = a.hydrated ? a.itemCount : 0, s = !(i && o === 0), c = s ? r ? `${e}, ${a.itemCount} items` : void 0 : `${e}, empty`;
+function ie({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hideZeroCount: i = !1 }) {
+	let a = R(), o = a.hydrated ? a.itemCount : 0, s = !(i && o === 0), c = s ? r ? `${e}, ${a.itemCount} items` : void 0 : `${e}, empty`;
 	return /* @__PURE__ */ f("button", {
 		type: "button",
 		className: ["sf-cart-button", t].filter(Boolean).join(" "),
@@ -681,6 +880,124 @@ function X({ label: e = "Cart", className: t, icon: n, labelHidden: r = !1, hide
 		]
 	});
 }
-export { V as AddToCartButton, S as AvailabilityBadge, X as CartButton, Y as CartDrawer, U as CartLineItem, R as CartProvider, K as CartSummary, T as CategoryFilter, k as FeaturedProducts, b as PriceTag, C as ProductCard, O as ProductDetailView, E as ProductGallery, w as ProductGrid, D as ShopView, v as StorefrontProvider, j as addLine, M as cartReducer, B as defaultAddToCartLabels, x as defaultAvailabilityLabels, q as defaultCartDrawerLabels, H as defaultCartLineItemLabels, A as emptyCart, e as formatPrice, P as itemCount, F as localStorageCartStorage, t as sortForDisplay, N as subtotalCents, h as themeToCssVars, z as useCart, y as useStorefront };
+// src/components/checkout-success/labels.ts
+var $ = {
+	heading: "Order received",
+	subtotal: "Subtotal",
+	discount: "Discount",
+	shipping: "Shipping",
+	total: "Total",
+	shipTo: "Ship to",
+	tracking: "Track",
+	status: {
+		pending: "We're confirming your payment and will email you once it's done.",
+		paid: "Payment received. Thank you!",
+		shipped: "Your order is on its way.",
+		cancelled: "This checkout was cancelled.",
+		expired: "This checkout expired before payment.",
+		refunded: "This order has been refunded.",
+		needs_attention: "We couldn't confirm one of your items. We'll be in touch about a refund."
+	}
+};
+// src/components/checkout-success/checkout-success-view.tsx
+function ae(e) {
+	let t = [
+		e.city,
+		e.state,
+		e.postalCode
+	].filter(Boolean).join(" ");
+	return [
+		e.name,
+		e.line1,
+		e.line2,
+		t,
+		e.country
+	].filter((e) => !!e);
+}
+function oe({ order: t, locale: n, labels: r, className: i }) {
+	let a = {
+		...$,
+		...r,
+		status: {
+			...$.status,
+			...r?.status
+		}
+	}, o = (r) => e(r, t.currency, n), s = t.shippingAddress ? ae(t.shippingAddress) : [], { fulfillment: c } = t;
+	return /* @__PURE__ */ f("section", {
+		className: ["sf-checkout-success", i].filter(Boolean).join(" "),
+		"data-status": t.status,
+		children: [
+			/* @__PURE__ */ d("h1", {
+				className: "sf-checkout-success__heading",
+				children: a.heading
+			}),
+			/* @__PURE__ */ d("p", {
+				className: "sf-checkout-success__status",
+				children: a.status[t.status]
+			}),
+			/* @__PURE__ */ d("ul", {
+				className: "sf-checkout-success__lines",
+				children: t.items.map((e) => /* @__PURE__ */ f("li", {
+					className: "sf-checkout-success__line",
+					children: [/* @__PURE__ */ f("span", { children: [
+						e.name,
+						" × ",
+						e.quantity
+					] }), /* @__PURE__ */ d("span", { children: o(e.priceCents * e.quantity) })]
+				}, e.productId))
+			}),
+			/* @__PURE__ */ f("dl", {
+				className: "sf-checkout-success__totals",
+				children: [
+					/* @__PURE__ */ f("div", {
+						className: "sf-checkout-success__row",
+						children: [/* @__PURE__ */ d("dt", { children: a.subtotal }), /* @__PURE__ */ d("dd", { children: o(t.subtotalCents) })]
+					}),
+					t.discountCents > 0 && /* @__PURE__ */ f("div", {
+						className: "sf-checkout-success__row sf-checkout-success__row--discount",
+						"data-discount": !0,
+						children: [/* @__PURE__ */ f("dt", { children: [a.discount, t.discountCode && ` (${t.discountCode})`] }), /* @__PURE__ */ f("dd", { children: ["−", o(t.discountCents)] })]
+					}),
+					t.shippingLabel && /* @__PURE__ */ f("div", {
+						className: "sf-checkout-success__row",
+						children: [/* @__PURE__ */ f("dt", { children: [
+							a.shipping,
+							" (",
+							t.shippingLabel,
+							")"
+						] }), /* @__PURE__ */ d("dd", { children: o(t.shippingCents) })]
+					}),
+					/* @__PURE__ */ f("div", {
+						className: "sf-checkout-success__row sf-checkout-success__row--total",
+						children: [/* @__PURE__ */ d("dt", { children: a.total }), /* @__PURE__ */ d("dd", { children: o(t.totalCents) })]
+					})
+				]
+			}),
+			s.length > 0 && /* @__PURE__ */ f("address", {
+				className: "sf-checkout-success__address",
+				children: [/* @__PURE__ */ d("strong", { children: a.shipTo }), s.map((e) => /* @__PURE__ */ d("span", { children: e }, e))]
+			}),
+			c?.trackingNumber && /* @__PURE__ */ f("p", {
+				className: "sf-checkout-success__tracking",
+				children: [c.carrier && `${c.carrier} · `, c.trackingUrl ? /* @__PURE__ */ f("a", {
+					href: c.trackingUrl,
+					children: [
+						a.tracking,
+						" ",
+						c.trackingNumber
+					]
+				}) : c.trackingNumber]
+			})
+		]
+	});
+}
+// src/cart/clear-cart-on-mount.tsx
+function se() {
+	let { hydrated: e, clear: t } = R(), n = c(!1);
+	return a(() => {
+		e && !n.current && (n.current = !0, t());
+	}, [e, t]), null;
+}
+export { U as AddToCartButton, S as AvailabilityBadge, ie as CartButton, re as CartDrawer, G as CartLineItem, ee as CartProvider, X as CartSummary, T as CategoryFilter, oe as CheckoutSuccessView, se as ClearCartOnMount, k as FeaturedProducts, b as PriceTag, C as ProductCard, O as ProductDetailView, E as ProductGallery, w as ProductGrid, D as ShopView, v as StorefrontProvider, j as addLine, M as cartReducer, H as defaultAddToCartLabels, x as defaultAvailabilityLabels, Z as defaultCartDrawerLabels, W as defaultCartLineItemLabels, V as defaultCheckoutLabels, $ as defaultCheckoutSuccessLabels, B as discountReasonMessage, A as emptyCart, e as formatPrice, P as itemCount, F as localStorageCartStorage, t as sortForDisplay, N as subtotalCents, h as themeToCssVars, R as useCart, ne as useCheckout, y as useStorefront };
 
 //# sourceMappingURL=index.js.map