@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/cart-item/cart-item.js

@@ -1,19 +1,123 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { resolveSafeHref } from "../../utils/safe-href.js";
 import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { graphql } from "../../sdk/generated/gql.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
-import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
 import { loggableErrorName } from "../../utils/loggable-error-name.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
 import { useOptionalToast } from "../../particles/toast/toast.js";
 import { formatPrice, isFiniteAmount } from "../cart/cart.js";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
 //#region src/matter/cart-item/cart-item.tsx
+const CartItemDiscountPercentageContent = defineContentType({
+	id: "cart-item-discount-percentage",
+	title: "Cart Item Discount Percentage",
+	description: "The per-line discount badge.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { template: {
+			type: "string",
+			title: "Badge text",
+			description: "percentage is the integer percent off the list price.",
+			format: "icu-message",
+			messageSource: "-{percentage}%",
+			messageArguments: {
+				type: "object",
+				properties: { percentage: { type: "integer" } }
+			},
+			messageExample: { percentage: 20 }
+		} }
+	}
+});
+const CartItemQuantityContent = defineContentType({
+	id: "cart-item-quantity",
+	title: "Cart Item Quantity",
+	description: "The notice shown when a typed quantity is corrected.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { validationMessage: {
+			type: "string",
+			title: "Adjusted quantity notice",
+			description: "value is the corrected amount, in the unit shown to the shopper.",
+			format: "icu-message",
+			messageSource: "Quantity adjusted to {value}.",
+			messageArguments: {
+				type: "object",
+				properties: { value: { type: "number" } }
+			},
+			messageExample: { value: 3 }
+		} }
+	}
+});
+const CartItemRemoveContent = defineContentType({
+	id: "cart-item-remove",
+	title: "Cart Item Remove",
+	description: "The toast raised after a line is removed.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { removedMessage: {
+			type: "string",
+			title: "Removed message",
+			format: "icu-message",
+			messageSource: "Item removed"
+		} }
+	}
+});
+const CartItemUnavailableContent = defineContentType({
+	id: "cart-item-unavailable",
+	title: "Cart Item Unavailable",
+	description: "The status label of a line that cannot be bought, one per availability state.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			outOfStockLabel: {
+				type: "string",
+				title: "Out of stock label",
+				format: "icu-message",
+				messageSource: "Out of stock"
+			},
+			cannotBeDeliveredLabel: {
+				type: "string",
+				title: "Cannot be delivered label",
+				format: "icu-message",
+				messageSource: "Cannot be delivered"
+			},
+			unavailableLabel: {
+				type: "string",
+				title: "Unavailable label",
+				description: "Any other state the line cannot be bought in.",
+				format: "icu-message",
+				messageSource: "Unavailable"
+			}
+		}
+	}
+});
+const CartItemGiftContent = defineContentType({
+	id: "cart-item-gift",
+	title: "Cart Item Gift",
+	description: "The marker of a promotional gift line.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Gift label",
+			format: "icu-message",
+			messageSource: "Free"
+		} }
+	}
+});
 const fragment = graphql(`
   fragment CartItemRootData on Query {
     cart {
@@ -103,7 +207,7 @@ const CartItemRootDefinition = defineComponent({
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Per-line data provider for the cart line-item template: place it directly inside CartList, wrapping the CartItem* particles (CartItemImage, CartItemName, CartItemPrice, the CartItemQuantity stepper, CartItemRemove, …). It owns the core per-item fields and delivers each line its own slice, so the core particles must sit inside it. Must be inside CartList. See cart-item.md."
+	guideline: "Per-line data provider for the cart line-item template: place it directly inside CartList, CartAvailableItems or CartUnavailableItems, wrapping the CartItem* particles (CartItemImage, CartItemName, CartItemPrice, the CartItemQuantity stepper, CartItemRemove, …). It owns the core per-item fields and delivers each line its own slice, so the core particles must sit inside it. Must be inside CartList, CartAvailableItems or CartUnavailableItems. See cart-item.md."
 });
 const CartItemImageDefinition = defineComponent({
 	name: "CartItemImage",
@@ -202,17 +306,14 @@ const CartItemDiscountPercentageDefinition = defineComponent({
 	name: "CartItemDiscountPercentage",
 	importPath: "@vtex/faststore/components",
 	component: CartItemDiscountPercentage,
+	content: CartItemDiscountPercentageContent,
 	requiresContext: "cart-item-data",
 	editor: {
 		label: "Cart Item Discount %",
 		category: "commerce"
 	},
-	schema: { template: {
-		type: "string",
-		default: "-{percentage}%",
-		label: "Template"
-	} },
-	guideline: "Per-line discount badge showing the integer listPrice-vs-sellingPrice percentage (e.g. \"-20%\"); use the template prop to customize the format ({percentage} is the integer percent). Renders null when the line has no discount (sellingPrice >= listPrice), so it only appears on promotional lines. Place alongside CartItemPrice/CartItemListPrice. Must be inside CartItemRoot."
+	schema: {},
+	guideline: "Per-line discount badge showing the integer listPrice-vs-sellingPrice percentage (e.g. \"-20%\"); the $content field template is an ICU message whose percentage argument is the integer percent. Renders null when the line has no discount (sellingPrice >= listPrice), so it only appears on promotional lines. Place alongside CartItemPrice/CartItemListPrice. Must be inside CartItemRoot."
 });
 const CartItemLineTotalDefinition = defineComponent({
 	name: "CartItemLineTotal",
@@ -254,6 +355,7 @@ const CartItemQuantityDefinition = defineComponent({
 	name: "CartItemQuantity",
 	importPath: "@vtex/faststore/components",
 	component: CartItemQuantity,
+	content: CartItemQuantityContent,
 	fragment: cartItemQuantityFragment,
 	fetchStrategy: "reactive-list-item",
 	requiresContext: "cart-item-data",
@@ -280,11 +382,6 @@ const CartItemQuantityDefinition = defineComponent({
 			type: "boolean",
 			default: false,
 			label: "Remove On Decrement"
-		},
-		validationMessage: {
-			type: "string",
-			default: "Quantity adjusted to {value}.",
-			label: "Validation Message"
 		}
 	},
 	actions: { cart: [
@@ -292,7 +389,7 @@ const CartItemQuantityDefinition = defineComponent({
 		"decreaseQuantity",
 		"removeItem"
 	] },
-	guideline: "Quantity stepper for a cart item, shown in the unit the merchant sells in: the displayed amount is the line's quantity times its unit multiplier, so a SKU sold in 500 g portions reads 1.5 rather than 3. min, max, and step are configured in purchasable units and converted for display, so one template serves SKUs with different multipliers. A typed amount that is out of bounds or off the multiplier grid snaps to the nearest valid value on commit and renders validationMessage. Set removeOnDecrement=true to remove the item when quantity reaches the minimum. Renders nothing on a gift line — a gift's quantity is promotion-controlled and cannot be stepped or removed, so use CartItemQuantityValue to show a gift's fixed quantity. Must be inside CartItemRoot. See cart-item.md."
+	guideline: "Quantity stepper for a cart item, shown in the unit the merchant sells in: the displayed amount is the line's quantity times its unit multiplier, so a SKU sold in 500 g portions reads 1.5 rather than 3. min, max, and step are configured in purchasable units and converted for display, so one template serves SKUs with different multipliers. A typed amount that is out of bounds or off the multiplier grid snaps to the nearest valid value on commit and renders the $content field validationMessage, which also shows when the platform stores a lower quantity than the stepper asked for, such as when stock runs out. Set removeOnDecrement=true to remove the item when quantity reaches the minimum. Renders nothing on a gift line — a gift's quantity is promotion-controlled and cannot be stepped or removed, so use CartItemQuantityValue to show a gift's fixed quantity. Must be inside CartItemRoot. See cart-item.md."
 });
 const CartItemQuantityValueDefinition = defineComponent({
 	name: "CartItemQuantityValue",
@@ -310,18 +407,15 @@ const CartItemRemoveDefinition = defineComponent({
 	name: "CartItemRemove",
 	importPath: "@vtex/faststore/components",
 	component: CartItemRemove,
+	content: CartItemRemoveContent,
 	requiresContext: "cart-item-data",
 	editor: {
 		label: "Cart Item Remove",
 		category: "commerce"
 	},
-	schema: { removedMessage: {
-		type: "string",
-		default: "Item removed",
-		label: "Removed message"
-	} },
+	schema: {},
 	actions: { cart: ["removeItem"] },
-	guideline: "Button that removes the current line item from the cart. Disabled while the removal is in flight; when the removal returns no errors it raises a toast titled removedMessage (needs a ToastProvider with a ToastList in the layout; with none, no toast shows and removal still works). Must be inside CartItemRoot. Also composes inside CartItemUnavailable as a remove-on-alert control. See cart-item.md."
+	guideline: "Button that removes the current line item from the cart. Disabled while the removal is in flight; when the removal returns no errors it raises a toast titled by the $content field removedMessage (needs a ToastProvider with a ToastList in the layout; with none, no toast shows and removal still works). Must be inside CartItemRoot. Also composes inside CartItemUnavailable as a remove-on-alert control. See cart-item.md."
 });
 const CartItemAvailableDefinition = defineComponent({
 	name: "CartItemAvailable",
@@ -339,25 +433,27 @@ const CartItemUnavailableDefinition = defineComponent({
 	name: "CartItemUnavailable",
 	importPath: "@vtex/faststore/components",
 	component: CartItemUnavailable,
+	content: CartItemUnavailableContent,
 	requiresContext: "cart-item-data",
 	editor: {
 		label: "Cart Item Unavailable",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Status badge shown only when the current cart item is NOT available. Renders a built-in English label per state (OUT_OF_STOCK → \"Out of stock\", UNAVAILABLE → \"Cannot be delivered\", otherwise \"Unavailable\"); pass children to override the text — children REPLACE the label, so a remove-on-alert composition nests an explicit label plus a CartItemRemove. Emits data-fs-cart-item-unavailable-state for per-state styling. Must be inside CartItemRoot. See cart-item.md."
+	guideline: "Status badge shown only when the current cart item is NOT available. Renders one $content message per state (OUT_OF_STOCK → outOfStockLabel, UNAVAILABLE → cannotBeDeliveredLabel, otherwise unavailableLabel); pass children to override the text — children REPLACE the label, so a remove-on-alert composition nests an explicit label plus a CartItemRemove. Emits data-fs-cart-item-unavailable-state for per-state styling. Must be inside CartItemRoot. See cart-item.md."
 });
 const CartItemGiftDefinition = defineComponent({
 	name: "CartItemGift",
 	importPath: "@vtex/faststore/components",
 	component: CartItemGift,
+	content: CartItemGiftContent,
 	requiresContext: "cart-item-data",
 	editor: {
 		label: "Cart Item Gift",
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Free marker for a promotional gift line: renders only when the current cart item is a gift, showing a built-in \"Free\" label; pass children to override the text — children REPLACE the label. Place it beside CartItemPrice/CartItemListPrice, whose struck-through list price it complements. It is an inline marker, not a wrapper for a gift-only subtree. On a gift line CartItemRemove suppresses itself and CartItemRoot marks the row with data-fs-cart-item-gift-line, so neither needs composing differently. Must be inside CartItemRoot. See cart-item.md."
+	guideline: "Free marker for a promotional gift line: renders only when the current cart item is a gift, showing the $content field label; pass children to override the text — children REPLACE the label. Place it beside CartItemPrice/CartItemListPrice, whose struck-through list price it complements. It is an inline marker, not a wrapper for a gift-only subtree. On a gift line CartItemRemove suppresses itself and CartItemRoot marks the row with data-fs-cart-item-gift-line, so neither needs composing differently. Must be inside CartItemRoot. See cart-item.md."
 });
 function CartItemRoot({ $data: $dataProp, className, children, ...props }) {
 	const slice = useDataOverride($dataProp) ?? null;
@@ -491,19 +587,19 @@ function CartItemListPrice({ className, children, ...props }) {
 		children: children ?? formatPrice(listPrice, locale, currency)
 	});
 }
-function CartItemDiscountPercentage({ template = "-{percentage}%", className, children, ...props }) {
+function CartItemDiscountPercentage({ $content, $locale, className, children, ...props }) {
 	const item = useCartItem();
+	const { format } = useMessageFormatter(CartItemDiscountPercentageContent, $content);
 	const listPrice = Number(item.listPrice.amount);
 	const sellingPrice = Number(item.sellingPrice.amount);
 	if (listPrice <= sellingPrice) return null;
 	const percent = Math.round((listPrice - sellingPrice) / listPrice * 100);
-	const text = template.replaceAll("{percentage}", String(percent));
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		className,
 		"data-fs-cart-item-discount-percentage": "",
 		"data-fs-text": "",
-		children: children ?? text
+		children: children ?? format("template", { percentage: percent })
 	});
 }
 function CartItemLineTotal({ className, children, ...props }) {
@@ -578,11 +674,14 @@ function resolveAdjustment(entered, snappedDisplay, multiplier, minDisplay, maxD
 	};
 	return null;
 }
-function CartItemQuantity({ className, children, min = 1, max, step, removeOnDecrement, validationMessage = "Quantity adjusted to {value}.", $data: $dataProp, $actions: $actionsProp, ...props }) {
+function CartItemQuantity({ className, children, min = 1, max, step, removeOnDecrement, $data: $dataProp, $actions: $actionsProp, $content, $locale, ...props }) {
 	const item = useCartItem();
 	const slice = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
 	const [adjustment, setAdjustment] = useState(null);
+	const [requestedUnits, setRequestedUnits] = useState(null);
+	const latestRequest = useRef(0);
+	const { format } = useMessageFormatter(CartItemQuantityContent, $content);
 	if (item.gift) return null;
 	const cart = $actions?.cart;
 	const multiplier = effectiveMultiplier(slice);
@@ -595,6 +694,9 @@ function CartItemQuantity({ className, children, min = 1, max, step, removeOnDec
 	const maxDisplay = maxUnits == null ? void 0 : roundTo(maxUnits * multiplier, decimals);
 	function handleValueCommitted(value) {
 		if (value == null) return;
+		latestRequest.current += 1;
+		const request = latestRequest.current;
+		setRequestedUnits(null);
 		if (removeOnDecrement && value < minDisplay) {
 			setAdjustment(null);
 			cart?.removeItem?.({ id: item.id });
@@ -604,15 +706,23 @@ function CartItemQuantity({ className, children, min = 1, max, step, removeOnDec
 		const snappedDisplay = roundTo(snapped * multiplier, decimals);
 		setAdjustment(resolveAdjustment(value, snappedDisplay, multiplier, minDisplay, maxDisplay));
 		const delta = snapped - item.quantity;
-		if (delta > 0) cart?.increaseQuantity?.({
+		let write;
+		if (delta > 0) write = cart?.increaseQuantity?.({
 			id: item.id,
 			by: delta
 		});
-		else if (delta < 0) cart?.decreaseQuantity?.({
+		else if (delta < 0) write = cart?.decreaseQuantity?.({
 			id: item.id,
 			by: -delta
 		});
+		write?.then((errors) => {
+			if (errors.length === 0 && latestRequest.current === request) setRequestedUnits(snapped);
+		});
 	}
+	const shown = requestedUnits != null && item.quantity < requestedUnits ? {
+		reason: "platform",
+		value: roundTo(item.quantity * multiplier, decimals)
+	} : adjustment;
 	const effectiveMin = removeOnDecrement ? 0 : minDisplay;
 	const computedClassName = removeOnDecrement ? className ? `group ${className}` : "group" : className;
 	return /* @__PURE__ */ jsxs(NumberField.Root, {
@@ -620,7 +730,11 @@ function CartItemQuantity({ className, children, min = 1, max, step, removeOnDec
 		value: roundTo(item.quantity * multiplier, decimals),
 		onValueCommitted: handleValueCommitted,
 		onValueChange: (_value, details) => {
-			if (details.reason === "input-change" || details.reason === "input-paste" || details.reason === "input-clear") setAdjustment(null);
+			if (details.reason === "input-change" || details.reason === "input-paste" || details.reason === "input-clear") {
+				latestRequest.current += 1;
+				setAdjustment(null);
+				setRequestedUnits(null);
+			}
 		},
 		min: effectiveMin,
 		max: maxDisplay,
@@ -632,15 +746,15 @@ function CartItemQuantity({ className, children, min = 1, max, step, removeOnDec
 		className: computedClassName,
 		"data-fs-cart-item-quantity": "",
 		...multiplier === 1 ? {} : { "data-fs-cart-item-quantity-multiplier": String(multiplier) },
-		...adjustment ? {
+		...shown ? {
 			"data-fs-cart-item-quantity-adjusted": "",
-			"data-fs-cart-item-quantity-adjusted-reason": adjustment.reason
+			"data-fs-cart-item-quantity-adjusted-reason": shown.reason
 		} : {},
 		...removeOnDecrement && item.quantity <= minUnits ? { "data-fs-cart-item-at-min": "" } : {},
-		children: [children, adjustment ? /* @__PURE__ */ jsx("div", {
+		children: [children, shown ? /* @__PURE__ */ jsx("div", {
 			role: "alert",
 			"data-fs-cart-item-quantity-validation": "",
-			children: validationMessage.replaceAll("{value}", String(adjustment.value))
+			children: format("validationMessage", { value: shown.value })
 		}) : null]
 	});
 }
@@ -653,11 +767,12 @@ function CartItemQuantityValue({ className, children, ...props }) {
 		children: children ?? String(item.quantity)
 	});
 }
-function CartItemRemove({ className, children, onClick, disabled, removedMessage = "Item removed", $actions: $actionsProp, ...props }) {
+function CartItemRemove({ className, children, onClick, disabled, $actions: $actionsProp, $content, $locale, ...props }) {
 	const $actions = useActionsOverride($actionsProp);
 	const item = useCartItem();
 	const toast = useOptionalToast();
 	const [pending, setPending] = useState(false);
+	const { format } = useMessageFormatter(CartItemRemoveContent, $content);
 	if (item.gift) return null;
 	async function handleClick(e) {
 		if (pending) return;
@@ -671,7 +786,7 @@ function CartItemRemove({ className, children, onClick, disabled, removedMessage
 		try {
 			const userErrors = await removeItem({ id: item.id });
 			if (Array.isArray(userErrors) && userErrors.length === 0) toast?.add({
-				title: removedMessage,
+				title: format("removedMessage"),
 				type: "success"
 			});
 		} catch (error) {
@@ -691,12 +806,10 @@ function CartItemRemove({ className, children, onClick, disabled, removedMessage
 		children
 	});
 }
-const UNAVAILABLE_LABELS = {
-	OUT_OF_STOCK: "Out of stock",
-	UNAVAILABLE: "Cannot be delivered"
-};
-function unavailableLabel(availability) {
-	return UNAVAILABLE_LABELS[availability] ?? "Unavailable";
+function unavailableField(availability) {
+	if (availability === "OUT_OF_STOCK") return "outOfStockLabel";
+	if (availability === "UNAVAILABLE") return "cannotBeDeliveredLabel";
+	return "unavailableLabel";
 }
 function CartItemAvailable({ className, children, ...props }) {
 	if (useCartItem().variant.availability !== "AVAILABLE") return null;
@@ -707,28 +820,32 @@ function CartItemAvailable({ className, children, ...props }) {
 		children
 	});
 }
-function CartItemUnavailable({ className, children, ...props }) {
-	const { availability } = useCartItem().variant;
+function CartItemUnavailable({ $content, $locale, className, children, ...props }) {
+	const item = useCartItem();
+	const { format } = useMessageFormatter(CartItemUnavailableContent, $content);
+	const { availability } = item.variant;
 	if (availability === "AVAILABLE") return null;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className,
 		"data-fs-cart-item-unavailable": "",
 		"data-fs-cart-item-unavailable-state": availability.toLowerCase(),
-		children: children ?? unavailableLabel(availability)
+		children: children ?? format(unavailableField(availability))
 	});
 }
-function CartItemGift({ className, children, ...props }) {
-	if (!useCartItem().gift) return null;
+function CartItemGift({ $content, $locale, className, children, ...props }) {
+	const item = useCartItem();
+	const { format } = useMessageFormatter(CartItemGiftContent, $content);
+	if (!item.gift) return null;
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		className,
 		"data-fs-cart-item-gift": "",
 		"data-fs-text": "",
-		children: children ?? "Free"
+		children: children ?? format("label")
 	});
 }
 //#endregion
-export { CartItemAggregateTotal, CartItemAggregateTotalDefinition, CartItemAvailable, CartItemAvailableDefinition, CartItemDiscountPercentage, CartItemDiscountPercentageDefinition, CartItemGift, CartItemGiftDefinition, CartItemImage, CartItemImageDefinition, CartItemLineTotal, CartItemLineTotalDefinition, CartItemListPrice, CartItemListPriceDefinition, CartItemName, CartItemNameDefinition, CartItemOwnTotal, CartItemOwnTotalDefinition, CartItemPrice, CartItemPriceDefinition, CartItemProductLink, CartItemProductLinkDefinition, CartItemQuantity, CartItemQuantityDefinition, CartItemQuantityValue, CartItemQuantityValueDefinition, CartItemRemove, CartItemRemoveDefinition, CartItemRoot, CartItemRootDefinition, CartItemSku, CartItemSkuDefinition, CartItemUnavailable, CartItemUnavailableDefinition, CartItemVariant, CartItemVariantDefinition };
+export { CartItemAggregateTotal, CartItemAggregateTotalDefinition, CartItemAvailable, CartItemAvailableDefinition, CartItemDiscountPercentage, CartItemDiscountPercentageContent, CartItemDiscountPercentageDefinition, CartItemGift, CartItemGiftContent, CartItemGiftDefinition, CartItemImage, CartItemImageDefinition, CartItemLineTotal, CartItemLineTotalDefinition, CartItemListPrice, CartItemListPriceDefinition, CartItemName, CartItemNameDefinition, CartItemOwnTotal, CartItemOwnTotalDefinition, CartItemPrice, CartItemPriceDefinition, CartItemProductLink, CartItemProductLinkDefinition, CartItemQuantity, CartItemQuantityContent, CartItemQuantityDefinition, CartItemQuantityValue, CartItemQuantityValueDefinition, CartItemRemove, CartItemRemoveContent, CartItemRemoveDefinition, CartItemRoot, CartItemRootDefinition, CartItemSku, CartItemSkuDefinition, CartItemUnavailable, CartItemUnavailableContent, CartItemUnavailableDefinition, CartItemVariant, CartItemVariantDefinition };
 
 //# sourceMappingURL=cart-item.js.map