@vtex/faststore 0.0.10 → 0.0.11

package/dist/matter/order-placed/order-placed.js

@@ -1,25 +1,26 @@
 "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 { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
 import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
 import { formatPrice } from "../cart/cart.js";
-import { substituteTemplate } from "../../utils/substitute-template.js";
 import { createContext, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CombinedGraphQLErrors } from "@apollo/client/errors";
 //#region src/matter/order-placed/order-placed.tsx
 /**
 * Order Placed matters (docs/features/order-placed/rfc-particles.md, Parts, part 2).
-* `OrderPlacedRoot` owns the placed order: it reads `Query.order(orderGroup: $orderGroup)` once through
+* `OrderPlacedRoot` owns the placed order: it reads `Query.order(id: $orderId)` once through
 * its own fragment and provides it as the `order-placed` context, or shows an authored message in
 * place of its children when the read is refused or fails. The leaves read the order's own record,
 * never the live cart or profile, so a confirmation reopened later shows what the purchase carried.
 */
 const rootFragment = `
   fragment OrderPlacedRootData on Query {
-    order(orderGroup: $orderGroup) {
+    order(id: $orderId) {
       __typename
       id
       reference
@@ -41,7 +42,7 @@ const rootFragment = `
 `;
 const customerFragment = `
   fragment OrderPlacedCustomerData on Query {
-    order(orderGroup: $orderGroup) {
+    order(id: $orderId) {
       __typename
       id
       customer {
@@ -54,6 +55,175 @@ const customerFragment = `
     }
   }
 `;
+const OrderPlacedRootContent = defineContentType({
+	id: "order-placed-root",
+	title: "Order Placed Root",
+	description: "Messages shown in place of the order when it cannot be shown.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			refusedOrderLabel: {
+				type: "string",
+				title: "Refused order",
+				description: "Shown when the read is refused: after 15 minutes, or from another browser.",
+				format: "icu-message",
+				messageSource: "This order can no longer be shown here"
+			},
+			unresolvedOrderLabel: {
+				type: "string",
+				title: "Unresolved order",
+				description: "Shown when the read fails or the order group resolves to no order.",
+				format: "icu-message",
+				messageSource: "Could not load this order"
+			}
+		}
+	}
+});
+const OrderPlacedStatusContent = defineContentType({
+	id: "order-placed-status",
+	title: "Order Placed Status",
+	description: "Title and message of each payment outcome.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			approvedTitle: {
+				type: "string",
+				title: "Approved title",
+				format: "icu-message",
+				messageSource: "Your order is confirmed"
+			},
+			approvedMessage: {
+				type: "string",
+				title: "Approved message",
+				format: "icu-message",
+				messageSource: "Your payment was approved."
+			},
+			pendingTitle: {
+				type: "string",
+				title: "Pending title",
+				format: "icu-message",
+				messageSource: "We're confirming your payment"
+			},
+			pendingMessage: {
+				type: "string",
+				title: "Pending message",
+				format: "icu-message",
+				messageSource: "Your order was placed, and its payment is still being processed or reviewed."
+			},
+			deniedTitle: {
+				type: "string",
+				title: "Denied title",
+				format: "icu-message",
+				messageSource: "Your payment was not approved"
+			},
+			deniedMessage: {
+				type: "string",
+				title: "Denied message",
+				format: "icu-message",
+				messageSource: "This purchase did not go through. You can place a new order with another payment method."
+			}
+		}
+	}
+});
+const OrderPlacedReferenceContent = defineContentType({
+	id: "order-placed-reference",
+	title: "Order Placed Reference",
+	description: "Text of the order number.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { template: {
+			type: "string",
+			title: "Reference text",
+			description: "`reference` is the order group.",
+			format: "icu-message",
+			messageSource: "Order #{reference}",
+			messageArguments: {
+				type: "object",
+				properties: { reference: { type: "string" } }
+			},
+			messageExample: { reference: "1335290583288" }
+		} }
+	}
+});
+const OrderPlacedCustomerContent = defineContentType({
+	id: "order-placed-customer",
+	title: "Order Placed Customer",
+	description: "Labels of the customer rows.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			nameLabel: {
+				type: "string",
+				title: "Name label",
+				format: "icu-message",
+				messageSource: "Name"
+			},
+			emailLabel: {
+				type: "string",
+				title: "Email label",
+				format: "icu-message",
+				messageSource: "Email"
+			},
+			phoneLabel: {
+				type: "string",
+				title: "Phone label",
+				format: "icu-message",
+				messageSource: "Phone"
+			},
+			documentLabel: {
+				type: "string",
+				title: "Document label",
+				format: "icu-message",
+				messageSource: "Document"
+			}
+		}
+	}
+});
+const OrderPlacedTotalsContent = defineContentType({
+	id: "order-placed-totals",
+	title: "Order Placed Totals",
+	description: "Labels of the money lines and the total.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			itemsLabel: {
+				type: "string",
+				title: "Items label",
+				format: "icu-message",
+				messageSource: "Subtotal"
+			},
+			shippingLabel: {
+				type: "string",
+				title: "Shipping label",
+				format: "icu-message",
+				messageSource: "Shipping"
+			},
+			discountsLabel: {
+				type: "string",
+				title: "Discounts label",
+				format: "icu-message",
+				messageSource: "Discounts"
+			},
+			taxLabel: {
+				type: "string",
+				title: "Tax label",
+				format: "icu-message",
+				messageSource: "Tax"
+			},
+			totalLabel: {
+				type: "string",
+				title: "Total label",
+				format: "icu-message",
+				messageSource: "Total"
+			}
+		}
+	}
+});
 const ORDER_PLACED_UNSET = Symbol("OrderPlacedContextUnset");
 const OrderPlacedContext = createContext(ORDER_PLACED_UNSET);
 /** The placed order, its loading flag and the root query's error, from the nearest OrderPlacedRoot. */
@@ -91,82 +261,39 @@ const OrderPlacedRootDefinition = defineComponent({
 	fetchStrategy: "reactive",
 	skeleton: OrderPlacedRootSkeleton,
 	providesContext: "order-placed",
+	content: OrderPlacedRootContent,
 	editor: {
 		label: "Order Placed Root",
 		category: "commerce"
 	},
-	schema: {
-		refusedOrderLabel: {
-			type: "string",
-			default: "This order can no longer be shown here",
-			label: "Refused order label"
-		},
-		unresolvedOrderLabel: {
-			type: "string",
-			default: "Could not load this order",
-			label: "Unresolved order label"
-		}
-	},
-	guideline: "Owner of an order confirmation page: reads the placed order (Query.order, keyed on the order group from the route) once and provides it as the order-placed context to OrderPlacedStatus, OrderPlacedReference, OrderPlacedCustomer, OrderPlacedTotals and the other order-placed blocks composed as its children. Renders its children only once the order resolves. While the read is in flight it shows a skeleton; when the API refuses the read (after 15 minutes, or from another browser) it shows refusedOrderLabel; when the read fails or the order group resolves to no order it shows unresolvedOrderLabel. Each message replaces every child. Never reads the cart or the live profile. See order-placed.md."
+	schema: {},
+	guideline: "Owner of an order confirmation page: reads the placed order (Query.order, keyed on the order Node id from the route) once and provides it as the order-placed context to OrderPlacedStatus, OrderPlacedReference, OrderPlacedCustomer, OrderPlacedTotals and the other order-placed blocks composed as its children. Renders its children only once the order resolves. While the read is in flight it shows a skeleton; when the API refuses the read (after 15 minutes, or from another browser) it shows the $content message refusedOrderLabel; when the read fails or the order group resolves to no order it shows unresolvedOrderLabel. Each message replaces every child. Never reads the cart or the live profile. See order-placed.md."
 });
 const OrderPlacedStatusDefinition = defineComponent({
 	name: "OrderPlacedStatus",
 	importPath: "@vtex/faststore/components",
 	component: OrderPlacedStatus,
 	requiresContext: "order-placed",
+	content: OrderPlacedStatusContent,
 	editor: {
 		label: "Order Placed Status",
 		category: "commerce"
 	},
-	schema: {
-		approvedTitle: {
-			type: "string",
-			default: "Your order is confirmed",
-			label: "Approved title"
-		},
-		approvedMessage: {
-			type: "string",
-			default: "Your payment was approved.",
-			label: "Approved message"
-		},
-		pendingTitle: {
-			type: "string",
-			default: "We're confirming your payment",
-			label: "Pending title"
-		},
-		pendingMessage: {
-			type: "string",
-			default: "Your order was placed, and its payment is still being processed or reviewed.",
-			label: "Pending message"
-		},
-		deniedTitle: {
-			type: "string",
-			default: "Your payment was not approved",
-			label: "Denied title"
-		},
-		deniedMessage: {
-			type: "string",
-			default: "This purchase did not go through. You can place a new order with another payment method.",
-			label: "Denied message"
-		}
-	},
-	guideline: "The payment outcome of the placed order, as a banner with a title and a message: approved, pending (which also covers a payment under anti-fraud review) or denied. Renders nothing when the outcome is unknown, so the page shows the order without asserting success or failure. Author the title and message of each outcome through the props (approvedTitle, approvedMessage, pendingTitle, pendingMessage, deniedTitle, deniedMessage); a blank value omits its line. Marks the outcome with data-fs-order-placed-status-approved, -pending or -denied, so the page styles each tone. An Icon composed as its child shows on every outcome, so never compose one that implies success. Must be inside OrderPlacedRoot. See order-placed.md."
+	schema: {},
+	guideline: "The payment outcome of the placed order, as a banner with a title and a message: approved, pending (which also covers a payment under anti-fraud review) or denied. Renders nothing when the outcome is unknown, so the page shows the order without asserting success or failure. The title and message of each outcome are $content messages (approvedTitle, approvedMessage, pendingTitle, pendingMessage, deniedTitle, deniedMessage); an unauthored one omits its line and logs. Marks the outcome with data-fs-order-placed-status-approved, -pending or -denied, so the page styles each tone. An Icon composed as its child shows on every outcome, so never compose one that implies success. Must be inside OrderPlacedRoot. See order-placed.md."
 });
 const OrderPlacedReferenceDefinition = defineComponent({
 	name: "OrderPlacedReference",
 	importPath: "@vtex/faststore/components",
 	component: OrderPlacedReference,
 	requiresContext: "order-placed",
+	content: OrderPlacedReferenceContent,
 	editor: {
 		label: "Order Placed Reference",
 		category: "commerce"
 	},
-	schema: { template: {
-		type: "string",
-		default: "Order #{reference}",
-		label: "Template"
-	} },
-	guideline: "The order number the shopper gives support: the order group, one per purchase even when it was split across sellers. Set template with a {reference} placeholder (e.g. \"Order #{reference}\"). Plain text, so it can be selected and copied. Must be inside OrderPlacedRoot. See order-placed.md."
+	schema: {},
+	guideline: "The order number the shopper gives support: the order group, one per purchase even when it was split across sellers. Its $content field template is an ICU message with a reference argument (e.g. \"Order #{reference}\"). Plain text, so it can be selected and copied. Must be inside OrderPlacedRoot. See order-placed.md."
 });
 const OrderPlacedCustomerDefinition = defineComponent({
 	name: "OrderPlacedCustomer",
@@ -175,75 +302,29 @@ const OrderPlacedCustomerDefinition = defineComponent({
 	fragment: customerFragment,
 	fetchStrategy: "reactive",
 	requiresContext: "order-placed",
+	content: OrderPlacedCustomerContent,
 	editor: {
 		label: "Order Placed Customer",
 		category: "commerce"
 	},
-	schema: {
-		nameLabel: {
-			type: "string",
-			default: "Name",
-			label: "Name label"
-		},
-		emailLabel: {
-			type: "string",
-			default: "Email",
-			label: "Email label"
-		},
-		phoneLabel: {
-			type: "string",
-			default: "Phone",
-			label: "Phone label"
-		},
-		documentLabel: {
-			type: "string",
-			default: "Document",
-			label: "Document label"
-		}
-	},
-	guideline: "Who the order is for, as the order recorded them at placement, never the live profile: name, email, phone and document as label/value rows, each left out when empty. Selects the customer through its own fragment, so a page without this block never fetches the customer. Shows the values as the order system returns them, masked included (e.g. \"J*** D***\"). Must be inside OrderPlacedRoot. See order-placed.md."
+	schema: {},
+	guideline: "Who the order is for, as the order recorded them at placement, never the live profile: name, email, phone and document as label/value rows, each left out when empty; the labels are $content messages. Selects the customer through its own fragment, so a page without this block never fetches the customer. Shows the values as the order system returns them, masked included (e.g. \"J*** D***\"). Must be inside OrderPlacedRoot. See order-placed.md."
 });
 const OrderPlacedTotalsDefinition = defineComponent({
 	name: "OrderPlacedTotals",
 	importPath: "@vtex/faststore/components",
 	component: OrderPlacedTotals,
 	requiresContext: "order-placed",
+	content: OrderPlacedTotalsContent,
 	editor: {
 		label: "Order Placed Totals",
 		category: "commerce"
 	},
-	schema: {
-		itemsLabel: {
-			type: "string",
-			default: "Subtotal",
-			label: "Items label"
-		},
-		shippingLabel: {
-			type: "string",
-			default: "Shipping",
-			label: "Shipping label"
-		},
-		discountsLabel: {
-			type: "string",
-			default: "Discounts",
-			label: "Discounts label"
-		},
-		taxLabel: {
-			type: "string",
-			default: "Tax",
-			label: "Tax label"
-		},
-		totalLabel: {
-			type: "string",
-			default: "Total",
-			label: "Total label"
-		},
-		shippingZeroLabel: {
-			type: "string",
-			label: "Shipping zero label"
-		}
-	},
-	guideline: "What the shopper was charged: each money line of the placed order in the order the API returns them (subtotal, discounts, shipping, tax, any custom tax under its own name), then the total, each in the order's own currency. A zero discount line is left out; set shippingZeroLabel (e.g. \"Free\") to show it instead of a zero shipping value. No total row when the order has no total. Reads the order, never the cart, so it composes no CartTotalizerLine. Must be inside OrderPlacedRoot. See order-placed.md."
+	schema: { shippingZeroLabel: {
+		type: "string",
+		label: "Shipping zero label"
+	} },
+	guideline: "What the shopper was charged: each money line of the placed order in the order the API returns them (subtotal, discounts, shipping, tax, any custom tax under its own name), then the total, each in the order's own currency. The line labels are $content messages (itemsLabel, shippingLabel, discountsLabel, taxLabel, totalLabel). A zero discount line is left out; set shippingZeroLabel (e.g. \"Free\") to show it instead of a zero shipping value. No total row when the order has no total. Reads the order, never the cart, so it composes no CartTotalizerLine. Must be inside OrderPlacedRoot. See order-placed.md."
 });
 /** Placeholder for the order's blocks while the read is in flight. */
 function OrderPlacedRootSkeleton() {
@@ -258,7 +339,8 @@ function OrderPlacedRootSkeleton() {
 	});
 }
 /** Provides the placed order to its descendants, or a message in their place. Mirrors CartRoot's read side. */
-function OrderPlacedRoot({ className, children, refusedOrderLabel = "This order can no longer be shown here", unresolvedOrderLabel = "Could not load this order", $data: $dataProp }) {
+function OrderPlacedRoot({ className, children, $content, $locale, $data: $dataProp }) {
+	const { format } = useMessageFormatter(OrderPlacedRootContent, $content);
 	const order = useDataOverride($dataProp) ?? null;
 	const { loading, error } = useContext(ReactiveRootContext);
 	const value = useMemo(() => ({
@@ -282,12 +364,12 @@ function OrderPlacedRoot({ className, children, refusedOrderLabel = "This order
 				state === "refused" ? /* @__PURE__ */ jsx("p", {
 					role: "alert",
 					"data-fs-order-placed-root-refused": "",
-					children: refusedOrderLabel
+					children: format("refusedOrderLabel")
 				}) : null,
 				state === "unresolved" ? /* @__PURE__ */ jsx("p", {
 					role: "alert",
 					"data-fs-order-placed-root-unresolved": "",
-					children: unresolvedOrderLabel
+					children: format("unresolvedOrderLabel")
 				}) : null
 			]
 		})
@@ -302,24 +384,25 @@ const TONE_ATTRIBUTES = {
 * The outcome banner. `UNKNOWN` (seller orders that disagree, or a state the mapping does not
 * classify) renders nothing, so the page shows the order without asserting success or failure.
 */
-function OrderPlacedStatus({ className, children, approvedTitle = "Your order is confirmed", approvedMessage = "Your payment was approved.", pendingTitle = "We're confirming your payment", pendingMessage = "Your order was placed, and its payment is still being processed or reviewed.", deniedTitle = "Your payment was not approved", deniedMessage = "This purchase did not go through. You can place a new order with another payment method." }) {
+function OrderPlacedStatus({ className, children, $content, $locale }) {
 	const { order } = useOrderPlaced();
+	const { format } = useMessageFormatter(OrderPlacedStatusContent, $content);
 	const status = order?.status;
 	let copy;
 	if (status === "APPROVED") copy = {
 		tone: "approved",
-		title: approvedTitle,
-		message: approvedMessage
+		title: format("approvedTitle"),
+		message: format("approvedMessage")
 	};
 	else if (status === "PENDING") copy = {
 		tone: "pending",
-		title: pendingTitle,
-		message: pendingMessage
+		title: format("pendingTitle"),
+		message: format("pendingMessage")
 	};
 	else if (status === "DENIED") copy = {
 		tone: "denied",
-		title: deniedTitle,
-		message: deniedMessage
+		title: format("deniedTitle"),
+		message: format("deniedMessage")
 	};
 	else return null;
 	return /* @__PURE__ */ jsxs("output", {
@@ -328,11 +411,11 @@ function OrderPlacedStatus({ className, children, approvedTitle = "Your order is
 		...TONE_ATTRIBUTES[copy.tone],
 		children: [
 			children,
-			copy.title?.trim() ? /* @__PURE__ */ jsx("span", {
+			copy.title.trim() ? /* @__PURE__ */ jsx("span", {
 				"data-fs-order-placed-status-title": "",
 				children: copy.title
 			}) : null,
-			copy.message?.trim() ? /* @__PURE__ */ jsx("span", {
+			copy.message.trim() ? /* @__PURE__ */ jsx("span", {
 				"data-fs-order-placed-status-message": "",
 				children: copy.message
 			}) : null
@@ -343,45 +426,51 @@ function OrderPlacedStatus({ className, children, approvedTitle = "Your order is
 * The order group, the one reference a split purchase has, so support resolves the whole purchase
 * from it rather than one seller's order.
 */
-function OrderPlacedReference({ className, template = "Order #{reference}" }) {
+function OrderPlacedReference({ className, $content, $locale }) {
 	const { order } = useOrderPlaced();
+	const { format } = useMessageFormatter(OrderPlacedReferenceContent, $content);
 	if (!order) return null;
 	return /* @__PURE__ */ jsx("p", {
 		className,
 		"data-fs-order-placed-reference": "",
-		children: substituteTemplate(template, { reference: order.reference })
+		children: format("template", { reference: order.reference })
 	});
 }
 /**
 * The customer as the order recorded them, never the live profile: masked values show as the order
 * system returns them, and an empty field is left out.
 */
-function OrderPlacedCustomer({ className, nameLabel = "Name", emailLabel = "Email", phoneLabel = "Phone", documentLabel = "Document", $data: $dataProp }) {
+function OrderPlacedCustomer({ className, $content, $locale, $data: $dataProp }) {
 	useOrderPlaced();
+	const { format } = useMessageFormatter(OrderPlacedCustomerContent, $content);
 	const customer = useDataOverride($dataProp)?.customer;
 	if (!customer) return null;
 	const rows = [
 		{
 			key: "name",
-			term: nameLabel,
+			field: "nameLabel",
 			value: [customer.firstName, customer.lastName].map((part) => part?.trim()).filter(Boolean).join(" ")
 		},
 		{
 			key: "email",
-			term: emailLabel,
+			field: "emailLabel",
 			value: customer.email ?? ""
 		},
 		{
 			key: "phone",
-			term: phoneLabel,
+			field: "phoneLabel",
 			value: customer.phone ?? ""
 		},
 		{
 			key: "document",
-			term: documentLabel,
+			field: "documentLabel",
 			value: customer.document ?? ""
 		}
-	].filter((row) => row.value.trim() !== "");
+	].filter((row) => row.value.trim() !== "").map(({ key, field, value }) => ({
+		key,
+		term: format(field),
+		value
+	}));
 	if (rows.length === 0) return null;
 	return /* @__PURE__ */ jsx("dl", {
 		className,
@@ -401,23 +490,25 @@ function OrderPlacedCustomer({ className, nameLabel = "Name", emailLabel = "Emai
 * English; any other line (a custom tax) shows its own name. The API sums lines on id and name, so
 * two custom taxes that share an id are two rows.
 */
-function OrderPlacedTotals({ className, itemsLabel = "Subtotal", shippingLabel = "Shipping", discountsLabel = "Discounts", taxLabel = "Tax", totalLabel = "Total", shippingZeroLabel }) {
+function OrderPlacedTotals({ className, shippingZeroLabel, $content, $locale }) {
 	const { order } = useOrderPlaced();
 	const { locale } = useStorefrontContext();
+	const { format } = useMessageFormatter(OrderPlacedTotalsContent, $content);
 	if (!order) return null;
 	const labels = /* @__PURE__ */ new Map([
-		["Items", itemsLabel],
-		["Shipping", shippingLabel],
-		["Discounts", discountsLabel],
-		["Tax", taxLabel]
+		["Items", "itemsLabel"],
+		["Shipping", "shippingLabel"],
+		["Discounts", "discountsLabel"],
+		["Tax", "taxLabel"]
 	]);
 	const rows = [];
 	order.totals.forEach((line, index) => {
 		if (line.id === "Discounts" && isZero(line.value)) return;
 		const value = line.id === "Shipping" && isZero(line.value) && shippingZeroLabel?.trim() ? shippingZeroLabel : formatMoney(line.value, locale);
+		const field = labels.get(line.id);
 		rows.push({
 			key: `${line.id}:${line.name}:${index}`,
-			term: labels.get(line.id) ?? line.name,
+			term: field ? format(field) : line.name,
 			value,
 			line: line.id
 		});
@@ -438,7 +529,7 @@ function OrderPlacedTotals({ className, itemsLabel = "Subtotal", shippingLabel =
 			"data-fs-order-placed-totals-total": "",
 			children: [/* @__PURE__ */ jsx("dt", {
 				"data-fs-order-placed-totals-term": "",
-				children: totalLabel
+				children: format("totalLabel")
 			}), /* @__PURE__ */ jsx("dd", {
 				"data-fs-order-placed-totals-value": "",
 				children: formatMoney(order.total, locale)
@@ -447,6 +538,6 @@ function OrderPlacedTotals({ className, itemsLabel = "Subtotal", shippingLabel =
 	});
 }
 //#endregion
-export { OrderPlacedCustomer, OrderPlacedCustomerDefinition, OrderPlacedReference, OrderPlacedReferenceDefinition, OrderPlacedRoot, OrderPlacedRootDefinition, OrderPlacedRootSkeleton, OrderPlacedStatus, OrderPlacedStatusDefinition, OrderPlacedTotals, OrderPlacedTotalsDefinition, useOrderPlaced };
+export { OrderPlacedCustomer, OrderPlacedCustomerContent, OrderPlacedCustomerDefinition, OrderPlacedReference, OrderPlacedReferenceContent, OrderPlacedReferenceDefinition, OrderPlacedRoot, OrderPlacedRootContent, OrderPlacedRootDefinition, OrderPlacedRootSkeleton, OrderPlacedStatus, OrderPlacedStatusContent, OrderPlacedStatusDefinition, OrderPlacedTotals, OrderPlacedTotalsContent, OrderPlacedTotalsDefinition, useOrderPlaced };
 
 //# sourceMappingURL=order-placed.js.map