@ecomiq/storefront 3.0.2 → 3.1.0

package/dist/personalization-fields-CwBR8oGr.js

@@ -0,0 +1,363 @@
+import { modifierOptionField, modifierQuantityField, modifierValueField } from "./personalization-BSVlktZP.js";
+import { useStorefrontText } from "./storefront-language-Bnt-TU2F.js";
+import { modifierLabel } from "@ecomiq/core";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/personalization-fields.tsx
+const MAX_VALUE_LENGTH = 500;
+const SAFE_FONT_URL = /^https:\/\/[\w\-.~:/?#[\]@!$*+,;=%]+$/;
+const FIELD = "h-11 w-full rounded-md border border-input bg-background px-3 text-base text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring md:text-sm";
+const TILE = "peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-focus-visible:ring-2 peer-focus-visible:ring-ring";
+const STEP = "grid size-8 place-items-center rounded-md border border-input bg-background text-base leading-none disabled:opacity-40";
+function initialState(key, groups) {
+	const chosen = {};
+	for (const group of groups) {
+		if (group.selectionType === "text") continue;
+		const marked = group.options.filter((option) => option.isDefault);
+		const picked = group.selectionType === "single" ? marked.slice(0, 1) : marked;
+		chosen[group.id] = Object.fromEntries(picked.map((option) => [option.id, 1]));
+	}
+	return {
+		key,
+		values: {},
+		chosen
+	};
+}
+function extraOf(groups, { values, chosen }) {
+	let extra = 0;
+	for (const group of groups) {
+		if (group.selectionType === "text") {
+			if ((values[group.id] ?? "").trim() !== "") extra += group.priceDelta;
+			continue;
+		}
+		for (const option of group.options) extra += option.priceDelta * (chosen[group.id]?.[option.id] ?? 0);
+	}
+	return Math.round(extra * 100) / 100;
+}
+function minimum(group) {
+	return group.isRequired ? Math.max(1, group.minSelections) : group.minSelections;
+}
+function fontFamily(option) {
+	return `ecomiq-modifier-${option.id}`;
+}
+function FontFaces({ groups }) {
+	const rules = groups.filter((group) => group.display === "font").flatMap((group) => group.options).filter((option) => option.fileUrl !== null && SAFE_FONT_URL.test(option.fileUrl)).map((option) => `@font-face{font-family:"${fontFamily(option)}";src:url("${option.fileUrl}");font-display:swap}`);
+	if (rules.length === 0) return null;
+	return /* @__PURE__ */ jsx("style", { children: rules.join("") });
+}
+function OptionName({ group, option }) {
+	return /* @__PURE__ */ jsx("span", {
+		style: group.display === "font" ? { fontFamily: fontFamily(option) } : void 0,
+		children: option.name
+	});
+}
+function Tile({ group, option, children }) {
+	if (option !== null && group.display === "color" && option.color !== null) return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: `block size-8 rounded-full border border-input ${TILE}`,
+		style: { background: option.color }
+	});
+	if (option !== null && group.display === "image" && option.fileUrl !== null) return /* @__PURE__ */ jsx("img", {
+		src: option.fileUrl,
+		alt: "",
+		width: 56,
+		height: 56,
+		loading: "lazy",
+		decoding: "async",
+		className: `block size-14 rounded-md border border-input object-cover ${TILE}`
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: `flex h-10 items-center rounded-md border border-input bg-background px-3 text-sm ${TILE}`,
+		children
+	});
+}
+/** Fields for the product's customizations, with the names `cartAction` reads. Render them inside the `CartForm` or pass its `id` in `form`. */
+function PersonalizationFields({ groups, form, formatPrice, className = "" }) {
+	const storefrontTranslate = useStorefrontText();
+	const prefix = useId();
+	const key = groups.map((group) => group.id).join(" ");
+	const [state, setState] = useState(() => initialState(key, groups));
+	if (state.key !== key) setState(initialState(key, groups));
+	if (groups.length === 0) return null;
+	const write = (groupId, value) => setState({
+		...state,
+		values: {
+			...state.values,
+			[groupId]: value
+		}
+	});
+	const choose = (groupId, options) => setState({
+		...state,
+		chosen: {
+			...state.chosen,
+			[groupId]: options
+		}
+	});
+	const plus = (value) => formatPrice && value > 0 ? `+ ${formatPrice(value)}` : "";
+	const extra = extraOf(groups, state);
+	const rules = (group) => {
+		const notes = [];
+		if (minimum(group) === 0) notes.push(storefrontTranslate("Opcional"));
+		if (group.selectionType === "multiple" && minimum(group) > 1) notes.push(storefrontTranslate("Elige al menos {value0}", { value0: minimum(group) }));
+		if (group.selectionType === "multiple" && group.maxSelections !== null) notes.push(storefrontTranslate("Elige hasta {value0}", { value0: group.maxSelections }));
+		return notes.length === 0 ? null : /* @__PURE__ */ jsxs("span", {
+			className: "font-normal text-muted-foreground",
+			children: [" · ", notes.join(" · ")]
+		});
+	};
+	const help = (group) => group.description ? /* @__PURE__ */ jsx("p", {
+		className: "text-xs text-muted-foreground",
+		children: group.description
+	}) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `grid gap-5 ${className}`,
+		children: [
+			/* @__PURE__ */ jsx(FontFaces, { groups }),
+			groups.map((group) => {
+				if (group.selectionType === "text") {
+					const id = `${prefix}-${group.id}`;
+					const value = state.values[group.id] ?? "";
+					const meta = [group.maxLength === null ? "" : `${value.length}/${group.maxLength}`, plus(group.priceDelta)].filter(Boolean).join(" · ");
+					return /* @__PURE__ */ jsxs("div", {
+						className: "grid gap-1.5",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex items-baseline justify-between gap-3",
+								children: [/* @__PURE__ */ jsxs("label", {
+									htmlFor: id,
+									className: "text-sm font-medium",
+									children: [group.name, rules(group)]
+								}), meta ? /* @__PURE__ */ jsx("span", {
+									className: "shrink-0 text-xs tabular-nums text-muted-foreground",
+									children: meta
+								}) : null]
+							}),
+							/* @__PURE__ */ jsx("input", {
+								id,
+								name: modifierValueField(group.id),
+								form,
+								value,
+								required: group.isRequired,
+								maxLength: group.maxLength ?? MAX_VALUE_LENGTH,
+								autoComplete: "off",
+								onChange: (event) => write(group.id, event.currentTarget.value),
+								className: FIELD
+							}),
+							help(group)
+						]
+					}, group.id);
+				}
+				const picked = state.chosen[group.id] ?? {};
+				if (group.selectionType === "single") {
+					const current = Object.keys(picked)[0] ?? "";
+					const tiles = group.display === "color" || group.display === "image";
+					const name = group.options.find((option) => option.id === current)?.name;
+					const radio = (option) => /* @__PURE__ */ jsx("input", {
+						type: "radio",
+						name: modifierOptionField(group.id),
+						value: option?.id ?? "",
+						form,
+						required: option !== null && minimum(group) > 0,
+						checked: current === (option?.id ?? ""),
+						onChange: () => choose(group.id, option === null ? {} : { [option.id]: 1 }),
+						className: tiles ? "peer sr-only" : "accent-primary"
+					});
+					return /* @__PURE__ */ jsxs("fieldset", {
+						className: "grid gap-2",
+						children: [
+							/* @__PURE__ */ jsxs("legend", {
+								className: "mb-2 text-sm font-medium",
+								children: [group.name, tiles && name ? /* @__PURE__ */ jsxs("span", {
+									className: "font-normal text-muted-foreground",
+									children: [": ", name]
+								}) : rules(group)]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: tiles ? "flex flex-wrap gap-2" : "grid gap-2",
+								children: [minimum(group) > 0 ? null : tiles ? /* @__PURE__ */ jsxs("label", {
+									className: "cursor-pointer",
+									children: [radio(null), /* @__PURE__ */ jsx(Tile, {
+										group,
+										option: null,
+										children: storefrontTranslate("Sin elegir")
+									})]
+								}) : /* @__PURE__ */ jsxs("label", {
+									className: "flex items-center gap-2 text-sm",
+									children: [radio(null), storefrontTranslate("Sin elegir")]
+								}), group.options.map((option) => tiles ? /* @__PURE__ */ jsxs("label", {
+									title: [option.name, plus(option.priceDelta)].filter(Boolean).join(" "),
+									className: "cursor-pointer",
+									children: [
+										radio(option),
+										/* @__PURE__ */ jsx(Tile, {
+											group,
+											option,
+											children: option.name
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "sr-only",
+											children: option.name
+										})
+									]
+								}, option.id) : /* @__PURE__ */ jsxs("label", {
+									className: "flex items-center gap-2 text-sm",
+									children: [
+										radio(option),
+										/* @__PURE__ */ jsx(OptionName, {
+											group,
+											option
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: plus(option.priceDelta)
+										})
+									]
+								}, option.id))]
+							}),
+							help(group)
+						]
+					}, group.id);
+				}
+				const full = group.maxSelections !== null && Object.keys(picked).length >= group.maxSelections;
+				return /* @__PURE__ */ jsxs("fieldset", {
+					className: "grid gap-2",
+					children: [
+						/* @__PURE__ */ jsxs("legend", {
+							className: "mb-2 text-sm font-medium",
+							children: [group.name, rules(group)]
+						}),
+						group.options.map((option) => {
+							const quantity = picked[option.id];
+							const others = Object.fromEntries(Object.entries(picked).filter(([optionId]) => optionId !== option.id));
+							const swatch = group.display === "color" && option.color !== null;
+							const image = group.display === "image" && option.fileUrl !== null;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex min-h-9 items-center gap-3",
+								children: [/* @__PURE__ */ jsxs("label", {
+									className: "flex flex-1 items-center gap-2 text-sm has-[:disabled]:opacity-50",
+									children: [
+										/* @__PURE__ */ jsx("input", {
+											type: "checkbox",
+											name: modifierOptionField(group.id),
+											value: option.id,
+											form,
+											checked: quantity !== void 0,
+											disabled: quantity === void 0 && full,
+											onChange: (event) => choose(group.id, event.currentTarget.checked ? {
+												...others,
+												[option.id]: 1
+											} : others),
+											className: "size-4 accent-primary"
+										}),
+										swatch ? /* @__PURE__ */ jsx("span", {
+											"aria-hidden": true,
+											className: "size-5 rounded-full border border-input",
+											style: { background: option.color ?? void 0 }
+										}) : null,
+										image ? /* @__PURE__ */ jsx("img", {
+											src: option.fileUrl ?? void 0,
+											alt: "",
+											width: 32,
+											height: 32,
+											loading: "lazy",
+											decoding: "async",
+											className: "size-8 rounded border border-input object-cover"
+										}) : null,
+										/* @__PURE__ */ jsx(OptionName, {
+											group,
+											option
+										}),
+										/* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: plus(option.priceDelta)
+										})
+									]
+								}), quantity !== void 0 && option.maxQuantity > 1 ? /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-1.5",
+									children: [
+										/* @__PURE__ */ jsx("input", {
+											type: "hidden",
+											name: modifierQuantityField(group.id, option.id),
+											form,
+											value: quantity
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": storefrontTranslate("Quitar uno de {value0}", { value0: option.name }),
+											disabled: quantity <= 1,
+											onClick: () => choose(group.id, {
+												...picked,
+												[option.id]: quantity - 1
+											}),
+											className: STEP,
+											children: "−"
+										}),
+										/* @__PURE__ */ jsx("span", {
+											"aria-live": "polite",
+											className: "w-6 text-center text-sm tabular-nums",
+											children: quantity
+										}),
+										/* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": storefrontTranslate("Agregar uno de {value0}", { value0: option.name }),
+											disabled: quantity >= option.maxQuantity,
+											onClick: () => choose(group.id, {
+												...picked,
+												[option.id]: quantity + 1
+											}),
+											className: STEP,
+											children: "+"
+										})
+									]
+								}) : null]
+							}, option.id);
+						}),
+						help(group)
+					]
+				}, group.id);
+			}),
+			formatPrice && extra > 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "flex items-baseline justify-between gap-3 text-sm",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: storefrontTranslate("Personalización")
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "font-medium tabular-nums",
+					children: ["+ ", formatPrice(extra)]
+				})]
+			}) : null
+		]
+	});
+}
+/** What the buyer chose for a cart, order or draft line: one row per customization, with its extra. */
+function ItemPersonalization({ modifiers, formatPrice, className = "" }) {
+	if (modifiers.length === 0) return null;
+	return /* @__PURE__ */ jsx("dl", {
+		className: `grid gap-0.5 text-xs ${className}`,
+		children: modifiers.map((modifier, index) => {
+			const extra = Math.round(modifier.priceDelta * modifier.quantity * 100) / 100;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-x-1",
+				children: [
+					/* @__PURE__ */ jsxs("dt", {
+						className: "text-muted-foreground",
+						children: [modifier.modifierGroupName, ":"]
+					}),
+					/* @__PURE__ */ jsx("dd", {
+						className: "font-medium break-words",
+						children: modifierLabel(modifier)
+					}),
+					formatPrice && extra > 0 ? /* @__PURE__ */ jsxs("dd", {
+						className: "text-muted-foreground tabular-nums",
+						children: [
+							"(+ ",
+							formatPrice(extra),
+							")"
+						]
+					}) : null
+				]
+			}, `${modifier.modifierGroupId}-${modifier.modifierOptionId ?? index}`);
+		})
+	});
+}
+export { ItemPersonalization, PersonalizationFields };

package/dist/personalization-fields.d.ts

@@ -0,0 +1,17 @@
+import { ItemModifier, ModifierGroupItem } from "@ecomiq/core";
+export type PersonalizationFieldsProps = {
+  groups: readonly ModifierGroupItem[];
+  /** `id` of the `CartForm` when the fields are rendered outside it. */
+  form?: string;
+  /** Formats the extras. Without it, no prices are shown. */
+  formatPrice?: (value: number) => string;
+  className?: string;
+};
+/** Fields for the product's customizations, with the names `cartAction` reads. Render them inside the `CartForm` or pass its `id` in `form`. */
+export declare function PersonalizationFields({ groups, form, formatPrice, className }: PersonalizationFieldsProps): import("react").JSX.Element | null;
+/** What the buyer chose for a cart, order or draft line: one row per customization, with its extra. */
+export declare function ItemPersonalization({ modifiers, formatPrice, className }: {
+  modifiers: readonly ItemModifier[];
+  formatPrice?: (value: number) => string;
+  className?: string;
+}): import("react").JSX.Element | null;

package/dist/{preview-C3sqXLu7.js → preview-JWdMO6kX.js}

@@ -1,5 +1,5 @@
-import { previewAddress } from "./preview-address-BQLjWNrr.js";
-import { paymentMethods, previewCart } from "./preview-cart-D1tZo7HE.js";
+import { previewAddress } from "./preview-address-bvieGEKb.js";
+import { paymentMethods, previewCart } from "./preview-cart-COIP3Vfh.js";
 // src/preview.ts
 const PREVIEW_TOKEN = "ecomiq-editor-preview";
 const PREVIEW_REVIEW = "preview-review";
@@ -138,7 +138,8 @@ function items(orderId, products, sample) {
 		trackingLink: null,
 		shippedAt: sample.step === "confirmed" ? null : days(3),
 		deliveredAt: sample.step === "delivered" ? days(1) : null,
-		returnableQuantity: sample.step === "delivered" ? index + 1 : 0
+		returnableQuantity: sample.step === "delivered" ? index + 1 : 0,
+		modifiers: []
 	}));
 }
 async function orders(client) {
@@ -299,7 +300,8 @@ async function draft(client) {
 		subTotal: item.total,
 		discount: 0,
 		total: item.total,
-		requiresShipping: true
+		requiresShipping: true,
+		modifiers: []
 	}));
 	const subTotal = items.reduce((sum, item) => sum + item.total, 0);
 	return {

package/dist/{preview-address-BQLjWNrr.js → preview-address-bvieGEKb.js}

@@ -1,4 +1,4 @@
-import { loadStorefrontTranslations, storefrontText } from "./storefront-text-Cdo69zlx.js";
+import { loadStorefrontTranslations, storefrontText } from "./storefront-text-Co7iUnLM.js";
 // src/preview-address.ts
 async function previewAddress(store) {
 	const translations = await loadStorefrontTranslations(store.language);

package/dist/{preview-cart-D1tZo7HE.js → preview-cart-COIP3Vfh.js}

@@ -1,4 +1,4 @@
-import { previewAddress } from "./preview-address-BQLjWNrr.js";
+import { previewAddress } from "./preview-address-bvieGEKb.js";
 // src/preview-cart.ts
 const PREVIEW_CART_TOKEN = "ecomiq-editor-preview-cart";
 const BUYER = {
@@ -101,7 +101,8 @@ function line(id, product, quantity) {
 		requiresShipping: true,
 		sellerId: null,
 		sellerName: null,
-		orderBumpId: null
+		orderBumpId: null,
+		modifiers: []
 	};
 }
 function rememberProduct(product) {

package/dist/{public-pages-BH4jw2xh.js → public-pages-Byh01h-6.js}

@@ -1,6 +1,6 @@
 import { text } from "./form-BtQcbXlJ.js";
-import { customer, customerHeaders } from "./session-l0xbh3uY.js";
-import { found, store, storeHeaders } from "./store-CuxOWbsb.js";
+import { customer, customerHeaders } from "./session-DR_9-bcf.js";
+import { found, store, storeHeaders } from "./store-uU2gWdMY.js";
 import { data, redirect } from "react-router";
 import { ApiError, getOrderReviewContext, getOrderTracking, sanitizeHtml } from "@ecomiq/core";
 import { z } from "zod";

package/dist/{registration-B99Qz9FK.js → registration-h_00PAhj.js}

@@ -1,8 +1,8 @@
 import { safeNext, text } from "./form-BtQcbXlJ.js";
 import { rejectCrossOriginAction, rejectCustomerCsrf } from "./request-security-CRsRMgwj.js";
-import { customer, customerHeaders } from "./session-l0xbh3uY.js";
-import { store } from "./store-CuxOWbsb.js";
-import { worker } from "./worker-xF0YKH8T.js";
+import { customer, customerHeaders } from "./session-DR_9-bcf.js";
+import { store } from "./store-uU2gWdMY.js";
+import { worker } from "./worker-cbXmLvfR.js";
 import { data, redirect } from "react-router";
 import { ApiError, CustomerRegistrationInputSchema } from "@ecomiq/core";
 // src/registration.ts

package/dist/{route-text-TU3xed68.js → route-text-B6pWdevi.js}

@@ -1,4 +1,4 @@
-import { storefrontText } from "./storefront-text-Cdo69zlx.js";
+import { storefrontText } from "./storefront-text-Co7iUnLM.js";
 import { z } from "zod";
 // src/route-text.ts
 const RootLanguage = z.object({ shop: z.object({ translations: z.record(z.string(), z.string()).default({}) }) });

package/dist/{section-preview-NzNw6sAL.js → section-preview-BiYfeE-d.js}

@@ -1,5 +1,5 @@
-import { loadSections, withSections } from "./sections-DyCN6unE.js";
-import { worker } from "./worker-xF0YKH8T.js";
+import { loadSections, withSections } from "./sections-CgpjubkB.js";
+import { worker } from "./worker-cbXmLvfR.js";
 import { data, useLoaderData } from "react-router";
 import { createElement, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/sections/account-addresses.js

@@ -1,7 +1,7 @@
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
 import { AddressForm } from "../account-forms-AVk71ko7.js";
 import { addressDefaults } from "../address-defaults-BqjRhS82.js";
-import { placeValue, useGeoCascade } from "../catalog-hooks-CV6zETMZ.js";
+import { placeValue, useGeoCascade } from "../catalog-hooks-DjmpXROv.js";
 import { useNavigation } from "react-router";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/sections/account-order.js

@@ -1,12 +1,13 @@
 import { CustomerCsrfField } from "../customer-csrf-C1oDX-Py.js";
 import { money } from "../money-DtGOtDri.js";
-import { orderProgress } from "../order-status-YIcJmCVH.js";
-import { useStorefrontLocale, useStorefrontText } from "../storefront-language-3jED0mSM.js";
-import { PayButton, PaymentPreview, ReorderButton, useOrderStepDetail } from "../order-display-NqS81m9p.js";
+import { orderProgress } from "../order-status-QsmEO-89.js";
+import { useStorefrontLocale, useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
+import { PayButton, PaymentPreview, ReorderButton, useOrderStepDetail } from "../order-display-CUXVESaF.js";
 import { orderStepLabel, orderStepOf, paymentStatusLabel } from "../order-view-9IlBg5AF.js";
-import { orderSummaryLines } from "../cart-summary-ur2VWKr-.js";
+import { orderSummaryLines } from "../cart-summary-B6vtRGBO.js";
+import { ItemPersonalization } from "../personalization-fields-CwBR8oGr.js";
 import { Form, Link, useNavigation } from "react-router";
-import { formatOrderDate } from "@ecomiq/core";
+import { formatOrderDate, lineUnitPrice } from "@ecomiq/core";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@theme/ui/button";
@@ -129,10 +130,14 @@ function ShipmentCard({ shipment, currency }) {
 									className: "text-sm text-muted-foreground",
 									children: item.variantTitle
 								}) : null,
+								/* @__PURE__ */ jsx(ItemPersonalization, {
+									modifiers: item.modifiers,
+									formatPrice: (value) => money(value, currency, locale)
+								}),
 								/* @__PURE__ */ jsxs("p", {
 									className: "text-sm text-muted-foreground",
 									children: [
-										money(item.unitPrice, currency, locale),
+										money(lineUnitPrice(item), currency, locale),
 										" × ",
 										item.quantity
 									]

package/dist/sections/account-orders.js

@@ -1,8 +1,8 @@
 import { money } from "../money-DtGOtDri.js";
-import { useStorefrontLocale, useStorefrontText } from "../storefront-language-3jED0mSM.js";
-import { PayButton, PaymentPreview, ReorderButton, useOrderHeadline, useOrderStepDetail } from "../order-display-NqS81m9p.js";
+import { useStorefrontLocale, useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
+import { PayButton, PaymentPreview, ReorderButton, useOrderHeadline, useOrderStepDetail } from "../order-display-CUXVESaF.js";
 import { mainPayment, orderStepLabel, orderStepOf } from "../order-view-9IlBg5AF.js";
-import { orderFiltersQuery } from "../account-DTahJyuQ.js";
+import { orderFiltersQuery } from "../account-CZZ-ku6L.js";
 import { useOrderPages } from "../order-pages-Dm6l5m0m.js";
 import { Form, Link, useLocation, useNavigate } from "react-router";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/sections/account-profile.js

@@ -1,5 +1,5 @@
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
-import { CustomerDocumentFields } from "../customer-document-fields-B4RtDYe-.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
+import { CustomerDocumentFields } from "../customer-document-fields-BzLdztjM.js";
 import { ProfileForm } from "../account-forms-AVk71ko7.js";
 import { useNavigation } from "react-router";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/sections/checkout.js

@@ -1,19 +1,21 @@
-import { BankAccountList } from "../bank-accounts-8PuqC0GW.js";
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
+import { BankAccountList } from "../bank-accounts-MpKIxHaX.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
 import { PaymentLogo } from "../payment-logo-BoPaGJc_.js";
 import { money } from "../money-DtGOtDri.js";
 import { section, setting } from "../settings-B0NO2A6Y.js";
-import { placeValue, useGeoCascade } from "../catalog-hooks-CV6zETMZ.js";
+import { placeValue, useGeoCascade } from "../catalog-hooks-DjmpXROv.js";
 import { CheckoutForm, OrderBumpForm, PromoCodeForm } from "../checkout-form-CbOIdENC.js";
-import { CulqiAuthentication } from "../culqi-authentication-Ckq_e5B7.js";
-import { InvoiceFields } from "../invoice-fields-BmAF1Bdv.js";
-import { MercadoPagoDialog } from "../mercadopago-dialog-BzboyTG1.js";
+import { CulqiAuthentication } from "../culqi-authentication-DHxjPJRE.js";
+import { InvoiceFields } from "../invoice-fields-BzDfV1nR.js";
+import { MercadoPagoDialog } from "../mercadopago-dialog-CpGlgKBl.js";
 import { PaymentMethods } from "../payment-methods-B8ocTgFZ.js";
-import { StripeAuthentication, StripeDialog, findStripeWallet, useAvailableStripeWallets } from "../stripe-dialog-C7WM3gEI.js";
-import { summaryLines } from "../cart-summary-ur2VWKr-.js";
-import { useCheckout } from "../use-checkout-C7IG5Xnz.js";
-import { useCheckoutPayment } from "../use-checkout-payment-t1R-GdW1.js";
+import { StripeAuthentication, StripeDialog, findStripeWallet, useAvailableStripeWallets } from "../stripe-dialog-D88qfkUS.js";
+import { summaryLines } from "../cart-summary-B6vtRGBO.js";
+import { useCheckout } from "../use-checkout-Jdk8P12A.js";
+import { useCheckoutPayment } from "../use-checkout-payment-BGX-BE6D.js";
+import { ItemPersonalization } from "../personalization-fields-CwBR8oGr.js";
 import { Link, useRouteLoaderData } from "react-router";
+import { lineTotal } from "@ecomiq/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@theme/ui/button";
 // src/sections/checkout.tsx
@@ -375,6 +377,11 @@ function Checkout({ data, result, ...root }) {
 							className: "text-xs text-muted-foreground",
 							children: item.variantLabel
 						}) : null,
+						/* @__PURE__ */ jsx(ItemPersonalization, {
+							modifiers: item.modifiers,
+							formatPrice: format,
+							className: "mt-0.5"
+						}),
 						item.sellerName ? /* @__PURE__ */ jsxs("span", {
 							className: "text-xs text-muted-foreground",
 							children: [
@@ -387,7 +394,7 @@ function Checkout({ data, result, ...root }) {
 				}),
 				/* @__PURE__ */ jsx("span", {
 					className: "tabular-nums",
-					children: format(item.unitPrice * item.quantity)
+					children: format(lineTotal(item))
 				})
 			]
 		}, item.id))

package/dist/sections/complaint-book.js

@@ -1,7 +1,7 @@
-import { Captcha } from "../captcha-CsBwlX74.js";
+import { Captcha } from "../captcha-CZkpghTO.js";
 import { COMPLAINT_DOCUMENT_TYPES, identityDocumentRule } from "../documents-T1mzc_j8.js";
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
-import { complaintBookAttachmentError, complaintBookNumber } from "../complaint-book-CQkiQ0M-.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
+import { complaintBookAttachmentError, complaintBookNumber } from "../complaint-book-aAQfGBvo.js";
 import { CustomerCsrfField } from "../customer-csrf-C1oDX-Py.js";
 import { money } from "../money-DtGOtDri.js";
 import { Form, useNavigation } from "react-router";

package/dist/sections/design-system.js

@@ -1,4 +1,4 @@
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@theme/ui/button";
 import { Input } from "@theme/ui/input";

package/dist/sections/draft-invoice.js

@@ -1,8 +1,9 @@
-import { useStorefrontText } from "../storefront-language-3jED0mSM.js";
+import { useStorefrontText } from "../storefront-language-Bnt-TU2F.js";
 import { CustomerCsrfField } from "../customer-csrf-C1oDX-Py.js";
 import { money } from "../money-DtGOtDri.js";
 import { setting } from "../settings-B0NO2A6Y.js";
-import { orderSummaryLines } from "../cart-summary-ur2VWKr-.js";
+import { orderSummaryLines } from "../cart-summary-B6vtRGBO.js";
+import { ItemPersonalization } from "../personalization-fields-CwBR8oGr.js";
 import { Form, Link, useNavigation } from "react-router";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@theme/ui/button";
@@ -79,6 +80,10 @@ function DraftInvoice({ loaderData, actionData, ...root }) {
 									className: "text-sm text-muted-foreground",
 									children: item.subtitle
 								}) : null,
+								/* @__PURE__ */ jsx(ItemPersonalization, {
+									modifiers: item.modifiers,
+									formatPrice: price
+								}),
 								/* @__PURE__ */ jsxs("span", {
 									className: "text-sm text-muted-foreground tabular-nums",
 									children: ["×", item.quantity]

package/dist/{sections-DyCN6unE.js → sections-CgpjubkB.js}

@@ -1,5 +1,5 @@
 import "./source-marker-DhqSkW7n.js";
-import { store } from "./store-CuxOWbsb.js";
+import { store } from "./store-uU2gWdMY.js";
 import { data, useLoaderData } from "react-router";
 import { Suspense, createElement, use } from "react";
 // src/sections.ts

package/dist/{seo-CXnoXxGZ.js → seo-D9UdUMg9.js}

@@ -1,5 +1,5 @@
-import { store } from "./store-CuxOWbsb.js";
-import { absoluteUrl, canonicalOrigin } from "./urls-wCZ6LnmG.js";
+import { store } from "./store-uU2gWdMY.js";
+import { absoluteUrl, canonicalOrigin } from "./urls-D4uinJVd.js";
 // src/seo.ts
 const PRIVATE_PATHS = [
 	"/cart",