@vtex/faststore 0.0.8 → 0.0.11

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

@@ -1,23 +1,130 @@
 "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 { loggableErrorName } from "../../utils/loggable-error-name.js";
 import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
-import { formatPrice } from "../cart/cart.js";
-import { createContext, useContext, useState } from "react";
+import { useOptionalToast } from "../../particles/toast/toast.js";
+import { formatPrice, isFiniteAmount } from "../cart/cart.js";
+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 {
       items {
         __typename
         id
+        lineId
         quantity
         price {
           amount
@@ -100,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",
@@ -121,7 +228,7 @@ const CartItemImageDefinition = defineComponent({
 		default: "contain",
 		label: "Object Fit"
 	} },
-	guideline: "Renders the product image from the cart item. Must be inside CartItemRoot."
+	guideline: "Renders the product image from the cart item. When the line has no image, or the image fails to load, it renders a decorative placeholder span in the same slot (same className and style, hidden from assistive technology) carrying data-fs-cart-item-image-broken for a swatch to style. The placeholder keeps the inline-level display of the image (inline-block) so width and height apply, and adds no color, border or background. Must be inside CartItemRoot."
 });
 const CartItemProductLinkDefinition = defineComponent({
 	name: "CartItemProductLink",
@@ -133,7 +240,7 @@ const CartItemProductLinkDefinition = defineComponent({
 		category: "commerce"
 	},
 	schema: {},
-	guideline: "Links the cart line image to its product page, using the product URL the line already carries: place it inside CartItemRoot wrapping CartItemImage. Whether a line links is decided by placing this element, so there is no prop to toggle it — a checkout line simply omits it. Renders its children unwrapped when the line has no image or no usable product URL, so it never leaves an empty or unsafe link. Navigation is same-tab, and the leaf adds no fields to the page query. Must be inside CartItemRoot. See cart-item.md."
+	guideline: "Links the cart line image to its product page, using the product URL the line already carries: place it inside CartItemRoot wrapping CartItemImage. Whether a line links is decided by placing this element, so there is no prop to toggle it — a checkout line simply omits it. Renders its children unwrapped when the line has no image or no usable product URL, so it never leaves an empty or unsafe link. The link names itself with an aria-label taken from the image alt text (or the variant name), so it stays named when the image shows the placeholder; an aria-label passed to the link wins. Navigation is same-tab, and the leaf adds no fields to the page query. Must be inside CartItemRoot. See cart-item.md."
 });
 const CartItemNameDefinition = defineComponent({
 	name: "CartItemName",
@@ -199,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",
@@ -251,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",
@@ -277,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: [
@@ -289,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",
@@ -307,6 +407,7 @@ const CartItemRemoveDefinition = defineComponent({
 	name: "CartItemRemove",
 	importPath: "@vtex/faststore/components",
 	component: CartItemRemove,
+	content: CartItemRemoveContent,
 	requiresContext: "cart-item-data",
 	editor: {
 		label: "Cart Item Remove",
@@ -314,7 +415,7 @@ const CartItemRemoveDefinition = defineComponent({
 	},
 	schema: {},
 	actions: { cart: ["removeItem"] },
-	guideline: "Button that removes the current line item from the cart. 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",
@@ -332,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;
@@ -365,12 +468,39 @@ function CartItemRoot({ $data: $dataProp, className, children, ...props }) {
 		})
 	});
 }
-function CartItemImage({ className, objectFit = "contain", ...props }) {
+function CartItemImage({ className, objectFit = "contain", ref, onError, ...props }) {
 	const item = useCartItem();
 	const image = item.variant.image;
-	if (!image) return null;
+	const url = image?.url ?? "";
+	const [failedUrl, setFailedUrl] = useState(null);
+	if (failedUrl !== null && failedUrl !== url) setFailedUrl(null);
+	const setImageRef = useCallback((node) => {
+		if (node?.complete && node.naturalWidth === 0) setFailedUrl(url);
+		if (typeof ref === "function") return ref(node);
+		if (ref) {
+			ref.current = node;
+			return () => {
+				ref.current = null;
+			};
+		}
+	}, [ref, url]);
+	if (!image || !url.trim() || failedUrl === url) return /* @__PURE__ */ jsx("span", {
+		className,
+		style: {
+			display: "inline-block",
+			...props.style
+		},
+		"aria-hidden": "true",
+		"data-fs-cart-item-image": "",
+		"data-fs-cart-item-image-broken": ""
+	});
+	function handleError(event) {
+		setFailedUrl(url);
+		onError?.(event);
+	}
 	return /* @__PURE__ */ jsx("img", {
 		...props,
+		ref: setImageRef,
 		src: image.url,
 		alt: image.altText ?? item.variant.name,
 		className,
@@ -378,6 +508,7 @@ function CartItemImage({ className, objectFit = "contain", ...props }) {
 			objectFit,
 			...props.style
 		},
+		onError: handleError,
 		"data-fs-cart-item-image": "",
 		"data-fs-image": ""
 	});
@@ -390,8 +521,10 @@ function CartItemProductLink({ className, children, ...props }) {
 		return children;
 	}
 	const image = item.variant.image;
-	if (!image || !(image.altText ?? item.variant.name ?? "").trim()) return children;
+	const name = (image?.altText ?? item.variant.name ?? "").trim();
+	if (!image || !name) return children;
 	return /* @__PURE__ */ jsx(NavigationLink, {
+		"aria-label": name,
 		...props,
 		href: destination.href,
 		className,
@@ -437,34 +570,36 @@ function CartItemPrice({ className, children, ...props }) {
 		className,
 		"data-fs-cart-item-price": "",
 		"data-fs-text": "",
-		children: children ?? formatPrice(item.sellingPrice.amount, locale, currency)
+		children: children ?? formatPrice(Number(item.sellingPrice.amount), locale, currency)
 	});
 }
 function CartItemListPrice({ className, children, ...props }) {
 	const item = useCartItem();
 	const { locale, currency } = useStorefrontContext();
-	if (Number(item.listPrice.amount) <= Number(item.sellingPrice.amount)) return null;
+	if (!isFiniteAmount(item.listPrice.amount) || !isFiniteAmount(item.sellingPrice.amount)) return null;
+	const listPrice = Number(item.listPrice.amount);
+	if (listPrice <= Number(item.sellingPrice.amount)) return null;
 	return /* @__PURE__ */ jsx("span", {
 		...props,
 		className,
 		"data-fs-cart-item-list-price": "",
 		"data-fs-text": "",
-		children: children ?? formatPrice(item.listPrice.amount, locale, currency)
+		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 }) {
@@ -474,7 +609,7 @@ function CartItemLineTotal({ className, children, ...props }) {
 		...props,
 		className,
 		"data-fs-cart-item-line-total": "",
-		children: children ?? formatPrice(item.sellingPrice.amount * item.quantity, locale, currency)
+		children: children ?? formatPrice(Number(item.sellingPrice.amount) * item.quantity, locale, currency)
 	});
 }
 function CartItemOwnTotal({ className, children, ...props }) {
@@ -539,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);
@@ -556,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 });
@@ -565,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, {
@@ -581,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,
@@ -593,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]
 	});
 }
@@ -614,30 +767,49 @@ function CartItemQuantityValue({ className, children, ...props }) {
 		children: children ?? String(item.quantity)
 	});
 }
-function CartItemRemove({ className, children, onClick, $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;
-	function handleClick(e) {
-		$actions?.cart?.removeItem?.({ id: item.id });
+	async function handleClick(e) {
+		if (pending) return;
+		const removeItem = $actions?.cart?.removeItem;
+		if (typeof removeItem !== "function") {
+			onClick?.(e);
+			return;
+		}
+		setPending(true);
 		onClick?.(e);
+		try {
+			const userErrors = await removeItem({ id: item.id });
+			if (Array.isArray(userErrors) && userErrors.length === 0) toast?.add({
+				title: format("removedMessage"),
+				type: "success"
+			});
+		} catch (error) {
+			console.error("[CartItemRemove] removeItem failed", loggableErrorName(error));
+		} finally {
+			setPending(false);
+		}
 	}
 	return /* @__PURE__ */ jsx("button", {
 		...props,
 		type: "button",
 		className,
+		disabled: pending || disabled,
 		onClick: handleClick,
 		"data-fs-cart-item-remove": "",
 		"data-fs-button": "",
 		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;
@@ -648,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