@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/order-list-views/order-list-views.js.map

@@ -1 +1 @@
-{"version":3,"file":"order-list-views.js","names":[],"sources":["../../../src/matter/order-list-views/order-list-views.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { Ref } from 'react';\nimport { type CurrentRoute, currentPageWith } from '../../sdk/navigation/current-page.js';\nimport { StorefrontLink } from '../../sdk/navigation/storefront-link.js';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { useStorefrontSearchParams } from '../../sdk/navigation/use-storefront-search-params.js';\n\nexport const OrderListViewsContent = defineContentType({\n  id: 'order-list-views',\n  title: 'Order List Views',\n  description: 'The names of the four order views and the accessible name of the switch.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name' },\n      all: { type: 'string', title: 'All orders' },\n      ongoing: { type: 'string', title: 'Ongoing' },\n      completed: { type: 'string', title: 'Completed' },\n      cancelled: { type: 'string', title: 'Cancelled' },\n    },\n  },\n});\n\nexport type OrderListView = 'all' | 'ongoing' | 'completed' | 'cancelled';\n\nexport type OrderListViewsContentValue = ContentValue<typeof OrderListViewsContent>;\n\nexport type OrderListViewsProps = Readonly<{\n  /** Accessible name of the navigation landmark. */\n  label?: string;\n  allLabel?: string;\n  ongoingLabel?: string;\n  completedLabel?: string;\n  cancelledLabel?: string;\n  /** Injected by the compiler from the page content entry. */\n  $content?: OrderListViewsContentValue;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\nconst CHOICES: readonly OrderListView[] = ['all', 'ongoing', 'completed', 'cancelled'];\n\nconst DEFAULT_GROUP_LABEL = 'Order views';\n\nconst DEFAULT_LABELS: Record<OrderListView, string> = {\n  all: 'All orders',\n  ongoing: 'Ongoing',\n  completed: 'Completed',\n  cancelled: 'Cancelled',\n};\n\nexport const OrderListViewsDefinition = defineComponent<OrderListViewsProps>({\n  name: 'OrderListViews',\n  importPath: '@vtex/faststore/components',\n  component: OrderListViews,\n  content: OrderListViewsContent,\n  editor: { label: 'Order List Views', category: 'navigation' },\n  schema: {\n    label: { type: 'string', default: 'Order views', label: 'Accessible name' },\n    allLabel: { type: 'string', default: 'All orders', label: 'All orders' },\n    ongoingLabel: { type: 'string', default: 'Ongoing', label: 'Ongoing' },\n    completedLabel: { type: 'string', default: 'Completed', label: 'Completed' },\n    cancelledLabel: { type: 'string', default: 'Cancelled', label: 'Cancelled' },\n  },\n  guideline:\n    'Four links that switch the orders page among all orders, ongoing, completed, and cancelled. Choosing one writes the view search param and keeps an existing search and placed-date range. It does not filter the orders already on the page.',\n});\n\nfunction resolveText(content: string | undefined, prop: string | undefined, fallback: string): string {\n  const fromContent = content?.trim();\n  if (fromContent) {\n    return fromContent;\n  }\n  const fromProp = prop?.trim();\n  if (fromProp) {\n    return fromProp;\n  }\n  return fallback;\n}\n\nfunction authoredLabel(view: OrderListView, props: OrderListViewsProps): string | undefined {\n  switch (view) {\n    case 'all':\n      return props.allLabel;\n    case 'ongoing':\n      return props.ongoingLabel;\n    case 'completed':\n      return props.completedLabel;\n    case 'cancelled':\n      return props.cancelledLabel;\n  }\n}\n\nfunction currentView(value: string | null): OrderListView {\n  if (value === 'ongoing' || value === 'completed' || value === 'cancelled') {\n    return value;\n  }\n  return 'all';\n}\n\nfunction choiceHref(route: CurrentRoute, searchParams: URLSearchParams, view: OrderListView): PageRef | string {\n  const next = new URLSearchParams(searchParams);\n  next.delete('view');\n  next.delete('after');\n  if (view !== 'all') {\n    next.set('view', view);\n  }\n  return currentPageWith(route, next);\n}\n\nexport function OrderListViews({\n  label,\n  allLabel,\n  ongoingLabel,\n  completedLabel,\n  cancelledLabel,\n  $content,\n  className,\n  ref,\n}: OrderListViewsProps) {\n  const route = useStorefrontRoute();\n  const searchParams = useStorefrontSearchParams();\n  const current = currentView(searchParams.get('view'));\n  const props: OrderListViewsProps = { label, allLabel, ongoingLabel, completedLabel, cancelledLabel, $content };\n  const groupLabel = resolveText($content?.label, label, DEFAULT_GROUP_LABEL);\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={groupLabel}\n      className={className}\n      data-fs-order-list-views=\"\"\n      data-fs-order-list-views-current={current}\n    >\n      {CHOICES.map((view) => {\n        const text = resolveText($content?.[view], authoredLabel(view, props), DEFAULT_LABELS[view]);\n        const selected = view === current;\n        return (\n          <StorefrontLink\n            key={view}\n            href={choiceHref(route, searchParams, view)}\n            aria-current={selected ? 'page' : undefined}\n            data-fs-order-list-views-choice={view}\n            data-fs-order-list-views-choice-current={selected ? '' : undefined}\n          >\n            {text}\n          </StorefrontLink>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAU,OAAO;GAAkB;GAClD,KAAK;IAAE,MAAM;IAAU,OAAO;GAAa;GAC3C,SAAS;IAAE,MAAM;IAAU,OAAO;GAAU;GAC5C,WAAW;IAAE,MAAM;IAAU,OAAO;GAAY;GAChD,WAAW;IAAE,MAAM;IAAU,OAAO;GAAY;EAClD;CACF;AACF,CAAC;AAmBD,MAAM,UAAoC;CAAC;CAAO;CAAW;CAAa;AAAW;AAErF,MAAM,sBAAsB;AAE5B,MAAM,iBAAgD;CACpD,KAAK;CACL,SAAS;CACT,WAAW;CACX,WAAW;AACb;AAEA,MAAa,2BAA2B,gBAAqC;CAC3E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAa;CAC5D,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,SAAS;GAAe,OAAO;EAAkB;EAC1E,UAAU;GAAE,MAAM;GAAU,SAAS;GAAc,OAAO;EAAa;EACvE,cAAc;GAAE,MAAM;GAAU,SAAS;GAAW,OAAO;EAAU;EACrE,gBAAgB;GAAE,MAAM;GAAU,SAAS;GAAa,OAAO;EAAY;EAC3E,gBAAgB;GAAE,MAAM;GAAU,SAAS;GAAa,OAAO;EAAY;CAC7E;CACA,WACE;AACJ,CAAC;AAED,SAAS,YAAY,SAA6B,MAA0B,UAA0B;CACpG,MAAM,cAAc,SAAS,KAAK;CAClC,IAAI,aACF,OAAO;CAET,MAAM,WAAW,MAAM,KAAK;CAC5B,IAAI,UACF,OAAO;CAET,OAAO;AACT;AAEA,SAAS,cAAc,MAAqB,OAAgD;CAC1F,QAAQ,MAAR;EACE,KAAK,OACH,OAAO,MAAM;EACf,KAAK,WACH,OAAO,MAAM;EACf,KAAK,aACH,OAAO,MAAM;EACf,KAAK,aACH,OAAO,MAAM;CACjB;AACF;AAEA,SAAS,YAAY,OAAqC;CACxD,IAAI,UAAU,aAAa,UAAU,eAAe,UAAU,aAC5D,OAAO;CAET,OAAO;AACT;AAEA,SAAS,WAAW,OAAqB,cAA+B,MAAuC;CAC7G,MAAM,OAAO,IAAI,gBAAgB,YAAY;CAC7C,KAAK,OAAO,MAAM;CAClB,KAAK,OAAO,OAAO;CACnB,IAAI,SAAS,OACX,KAAK,IAAI,QAAQ,IAAI;CAEvB,OAAO,gBAAgB,OAAO,IAAI;AACpC;AAEA,SAAgB,eAAe,EAC7B,OACA,UACA,cACA,gBACA,gBACA,UACA,WACA,OACsB;CACtB,MAAM,QAAQ,mBAAmB;CACjC,MAAM,eAAe,0BAA0B;CAC/C,MAAM,UAAU,YAAY,aAAa,IAAI,MAAM,CAAC;CACpD,MAAM,QAA6B;EAAE;EAAO;EAAU;EAAc;EAAgB;EAAgB;CAAS;CAC7G,MAAM,aAAa,YAAY,UAAU,OAAO,OAAO,mBAAmB;CAE1E,OACE,oBAAC,OAAD;EACO;EACL,cAAY;EACD;EACX,4BAAyB;EACzB,oCAAkC;EAEjC,UAAA,QAAQ,KAAK,SAAS;GACrB,MAAM,OAAO,YAAY,WAAW,OAAO,cAAc,MAAM,KAAK,GAAG,eAAe,KAAK;GAC3F,MAAM,WAAW,SAAS;GAC1B,OACE,oBAAC,gBAAD;IAEE,MAAM,WAAW,OAAO,cAAc,IAAI;IAC1C,gBAAc,WAAW,SAAS,KAAA;IAClC,mCAAiC;IACjC,2CAAyC,WAAW,KAAK,KAAA;IAExD,UAAA;GACa,GAPT,IAOS;EAEpB,CAAC;CACE,CAAA;AAET"}
+{"version":3,"file":"order-list-views.js","names":[],"sources":["../../../src/matter/order-list-views/order-list-views.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { Ref } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { type CurrentRoute, currentPageWith } from '../../sdk/navigation/current-page.js';\nimport { StorefrontLink } from '../../sdk/navigation/storefront-link.js';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { useStorefrontSearchParams } from '../../sdk/navigation/use-storefront-search-params.js';\n\nexport const OrderListViewsContent = defineContentType({\n  id: 'order-list-views',\n  title: 'Order List Views',\n  description: 'The names of the four order views and the accessible name of the switch.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name', format: 'icu-message', messageSource: 'Order views' },\n      all: { type: 'string', title: 'All orders', format: 'icu-message', messageSource: 'All orders' },\n      ongoing: { type: 'string', title: 'Ongoing', format: 'icu-message', messageSource: 'Ongoing' },\n      completed: { type: 'string', title: 'Completed', format: 'icu-message', messageSource: 'Completed' },\n      cancelled: { type: 'string', title: 'Cancelled', format: 'icu-message', messageSource: 'Cancelled' },\n    },\n  },\n});\n\nexport type OrderListView = 'all' | 'ongoing' | 'completed' | 'cancelled';\n\nexport type OrderListViewsContentValue = ContentValue<typeof OrderListViewsContent>;\n\nexport type OrderListViewsProps = MessageLocaleProp &\n  Readonly<{\n    /** The accessible name of the landmark and the four view names. */\n    $content?: OrderListViewsContentValue;\n    className?: string;\n    ref?: Ref<HTMLElement>;\n  }>;\n\nconst CHOICES: readonly OrderListView[] = ['all', 'ongoing', 'completed', 'cancelled'];\n\nexport const OrderListViewsDefinition = defineComponent<OrderListViewsProps>({\n  name: 'OrderListViews',\n  importPath: '@vtex/faststore/components',\n  component: OrderListViews,\n  content: OrderListViewsContent,\n  editor: { label: 'Order List Views', category: 'navigation' },\n  schema: {},\n  guideline:\n    'Four links that switch the orders page among all orders, ongoing, completed, and cancelled. Their names are the $content fields all, ongoing, completed and cancelled; label is the landmark name. Choosing one writes the view search param and keeps an existing search and placed-date range. It does not filter the orders already on the page.',\n});\n\nfunction currentView(value: string | null): OrderListView {\n  if (value === 'ongoing' || value === 'completed' || value === 'cancelled') {\n    return value;\n  }\n  return 'all';\n}\n\nfunction choiceHref(route: CurrentRoute, searchParams: URLSearchParams, view: OrderListView): PageRef | string {\n  const next = new URLSearchParams(searchParams);\n  next.delete('view');\n  next.delete('after');\n  if (view !== 'all') {\n    next.set('view', view);\n  }\n  return currentPageWith(route, next);\n}\n\nexport function OrderListViews({ $content, $locale, className, ref }: OrderListViewsProps) {\n  const route = useStorefrontRoute();\n  const searchParams = useStorefrontSearchParams();\n  const { format } = useMessageFormatter(OrderListViewsContent, $content);\n  const current = currentView(searchParams.get('view'));\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={format('label')}\n      className={className}\n      data-fs-order-list-views=\"\"\n      data-fs-order-list-views-current={current}\n    >\n      {CHOICES.map((view) => {\n        const selected = view === current;\n        return (\n          <StorefrontLink\n            key={view}\n            href={choiceHref(route, searchParams, view)}\n            aria-current={selected ? 'page' : undefined}\n            data-fs-order-list-views-choice={view}\n            data-fs-order-list-views-choice-current={selected ? '' : undefined}\n          >\n            {format(view)}\n          </StorefrontLink>\n        );\n      })}\n    </nav>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,wBAAwB,kBAAkB;CACrD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAU,OAAO;IAAmB,QAAQ;IAAe,eAAe;GAAc;GACvG,KAAK;IAAE,MAAM;IAAU,OAAO;IAAc,QAAQ;IAAe,eAAe;GAAa;GAC/F,SAAS;IAAE,MAAM;IAAU,OAAO;IAAW,QAAQ;IAAe,eAAe;GAAU;GAC7F,WAAW;IAAE,MAAM;IAAU,OAAO;IAAa,QAAQ;IAAe,eAAe;GAAY;GACnG,WAAW;IAAE,MAAM;IAAU,OAAO;IAAa,QAAQ;IAAe,eAAe;GAAY;EACrG;CACF;AACF,CAAC;AAcD,MAAM,UAAoC;CAAC;CAAO;CAAW;CAAa;AAAW;AAErF,MAAa,2BAA2B,gBAAqC;CAC3E,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT,QAAQ;EAAE,OAAO;EAAoB,UAAU;CAAa;CAC5D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,YAAY,OAAqC;CACxD,IAAI,UAAU,aAAa,UAAU,eAAe,UAAU,aAC5D,OAAO;CAET,OAAO;AACT;AAEA,SAAS,WAAW,OAAqB,cAA+B,MAAuC;CAC7G,MAAM,OAAO,IAAI,gBAAgB,YAAY;CAC7C,KAAK,OAAO,MAAM;CAClB,KAAK,OAAO,OAAO;CACnB,IAAI,SAAS,OACX,KAAK,IAAI,QAAQ,IAAI;CAEvB,OAAO,gBAAgB,OAAO,IAAI;AACpC;AAEA,SAAgB,eAAe,EAAE,UAAU,SAAS,WAAW,OAA4B;CACzF,MAAM,QAAQ,mBAAmB;CACjC,MAAM,eAAe,0BAA0B;CAC/C,MAAM,EAAE,WAAW,oBAAoB,uBAAuB,QAAQ;CACtE,MAAM,UAAU,YAAY,aAAa,IAAI,MAAM,CAAC;CAEpD,OACE,oBAAC,OAAD;EACO;EACL,cAAY,OAAO,OAAO;EACf;EACX,4BAAyB;EACzB,oCAAkC;EAEjC,UAAA,QAAQ,KAAK,SAAS;GACrB,MAAM,WAAW,SAAS;GAC1B,OACE,oBAAC,gBAAD;IAEE,MAAM,WAAW,OAAO,cAAc,IAAI;IAC1C,gBAAc,WAAW,SAAS,KAAA;IAClC,mCAAiC;IACjC,2CAAyC,WAAW,KAAK,KAAA;IAExD,UAAA,OAAO,IAAI;GACE,GAPT,IAOS;EAEpB,CAAC;CACE,CAAA;AAET"}

package/dist/matter/order-payment/order-payment.d.ts

@@ -1,4 +1,4 @@
-import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
 import { ComponentPropsWithRef, Ref } from "react";
@@ -6,7 +6,7 @@ import { ComponentPropsWithRef, Ref } from "react";
 export declare const OrderPaymentContent: {
   readonly id: "order-payment";
   readonly title: "Order Payment";
-  readonly description: "The heading, the bank-invoice name, and the fixed labels of the payment section. The installment line keeps {count} and {amount}.";
+  readonly description: "The heading, the bank-invoice name, and the fixed labels of the payment section.";
   readonly schema: {
     readonly type: "object";
     readonly additionalProperties: false;
@@ -14,6 +14,8 @@ export declare const OrderPaymentContent: {
       readonly heading: {
         readonly type: "string";
         readonly title: "Heading";
+        readonly format: "icu-message";
+        readonly messageSource: "Payment";
       };
       readonly bankInvoiceName: {
         readonly type: "string";
@@ -22,27 +24,53 @@ export declare const OrderPaymentContent: {
       readonly empty: {
         readonly type: "string";
         readonly title: "Empty";
+        readonly format: "icu-message";
+        readonly messageSource: "No payment recorded";
       };
       readonly methodPlaceholder: {
         readonly type: "string";
         readonly title: "Method unavailable";
+        readonly format: "icu-message";
+        readonly messageSource: "Payment method unavailable";
       };
       readonly installments: {
         readonly type: "string";
         readonly title: "Installments";
-        readonly description: "Keep the placeholders {count} and {amount}.";
+        readonly format: "icu-message";
+        readonly messageSource: "{count}x {amount}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly count: {
+              readonly type: "integer";
+            };
+            readonly amount: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly count: 3;
+          readonly amount: "$33.33";
+        };
       };
       readonly redemptionCode: {
         readonly type: "string";
         readonly title: "Gift card code";
+        readonly format: "icu-message";
+        readonly messageSource: "Gift card code";
       };
       readonly bankInvoiceNumber: {
         readonly type: "string";
         readonly title: "Bank invoice number";
+        readonly format: "icu-message";
+        readonly messageSource: "Bank invoice number";
       };
       readonly bankInvoicePrint: {
         readonly type: "string";
         readonly title: "Print bank invoice";
+        readonly format: "icu-message";
+        readonly messageSource: "Print bank invoice";
       };
     };
   };
@@ -65,18 +93,13 @@ export type OrderPaymentData = {
   allowCancellation: boolean;
   payments: OrderPaymentRecord[];
 };
-export type OrderPaymentProps = Readonly<{
+export type OrderPaymentProps = MessageLocaleProp & Readonly<{
   $content?: OrderPaymentContentValue;
   $data?: OrderPaymentData | null;
   className?: string;
   ref?: Ref<HTMLElement>;
 }>;
-export declare const OrderPaymentDefinition: ComponentDefinition<Readonly<{
-  $content?: OrderPaymentContentValue;
-  $data?: OrderPaymentData | null;
-  className?: string;
-  ref?: Ref<HTMLElement>;
-}>>;
+export declare const OrderPaymentDefinition: ComponentDefinition<OrderPaymentProps>;
 export declare function OrderPaymentSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function OrderPayment({ $content, $data, className, ref }: OrderPaymentProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion

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

@@ -4,7 +4,7 @@ import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
 import { resolveSafeHref } from "../../utils/safe-href.js";
 import { useStorefrontFormatters } from "../../sdk/format/client.js";
-import { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { Icon } from "../../particles/icon/icon.js";
 import { paymentMethodIconName } from "../payment/payment-method-badges.js";
 import { useId } from "react";
@@ -33,14 +33,16 @@ const fragment = `
 const OrderPaymentContent = defineContentType({
 	id: "order-payment",
 	title: "Order Payment",
-	description: "The heading, the bank-invoice name, and the fixed labels of the payment section. The installment line keeps {count} and {amount}.",
+	description: "The heading, the bank-invoice name, and the fixed labels of the payment section.",
 	schema: {
 		type: "object",
 		additionalProperties: false,
 		properties: {
 			heading: {
 				type: "string",
-				title: "Heading"
+				title: "Heading",
+				format: "icu-message",
+				messageSource: "Payment"
 			},
 			bankInvoiceName: {
 				type: "string",
@@ -48,28 +50,50 @@ const OrderPaymentContent = defineContentType({
 			},
 			empty: {
 				type: "string",
-				title: "Empty"
+				title: "Empty",
+				format: "icu-message",
+				messageSource: "No payment recorded"
 			},
 			methodPlaceholder: {
 				type: "string",
-				title: "Method unavailable"
+				title: "Method unavailable",
+				format: "icu-message",
+				messageSource: "Payment method unavailable"
 			},
 			installments: {
 				type: "string",
 				title: "Installments",
-				description: "Keep the placeholders {count} and {amount}."
+				format: "icu-message",
+				messageSource: "{count}x {amount}",
+				messageArguments: {
+					type: "object",
+					properties: {
+						count: { type: "integer" },
+						amount: { type: "string" }
+					}
+				},
+				messageExample: {
+					count: 3,
+					amount: "$33.33"
+				}
 			},
 			redemptionCode: {
 				type: "string",
-				title: "Gift card code"
+				title: "Gift card code",
+				format: "icu-message",
+				messageSource: "Gift card code"
 			},
 			bankInvoiceNumber: {
 				type: "string",
-				title: "Bank invoice number"
+				title: "Bank invoice number",
+				format: "icu-message",
+				messageSource: "Bank invoice number"
 			},
 			bankInvoicePrint: {
 				type: "string",
-				title: "Print bank invoice"
+				title: "Print bank invoice",
+				format: "icu-message",
+				messageSource: "Print bank invoice"
 			}
 		}
 	}
@@ -87,21 +111,8 @@ const OrderPaymentDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "The payments recorded on one of the shopper orders: method, last four digits when recorded, brand icon when known, amount, installments, gift-card code, and bank-invoice number. Labels are content; a blank field keeps the catalogue. The print link shows only while the order can still be cancelled. Place it on the order details page."
+	guideline: "The payments recorded on one of the shopper orders: method, last four digits when recorded, brand icon when known, amount, installments, gift-card code, and bank-invoice number. Labels are content. The print link shows only while the order can still be cancelled. Place it on the order details page."
 });
-function fill(template, values) {
-	return template.replaceAll(/\{(count|amount)\}/g, (_, key) => String(values[key] ?? ""));
-}
-function paymentLabels(content, intl) {
-	return {
-		empty: copy(content?.empty, intl.formatMessage({ id: "fs/order-payment.empty" })),
-		methodPlaceholder: copy(content?.methodPlaceholder, intl.formatMessage({ id: "fs/order-payment.method.placeholder" })),
-		installments: content?.installments?.trim() || void 0,
-		redemptionCode: copy(content?.redemptionCode, intl.formatMessage({ id: "fs/order-payment.redemption-code" })),
-		bankInvoiceNumber: copy(content?.bankInvoiceNumber, intl.formatMessage({ id: "fs/order-payment.bank-invoice.number" })),
-		bankInvoicePrint: copy(content?.bankInvoicePrint, intl.formatMessage({ id: "fs/order-payment.bank-invoice.print" }))
-	};
-}
 function copy(value, fallback) {
 	return value?.trim() || fallback;
 }
@@ -145,11 +156,9 @@ function OrderPaymentSkeleton({ className, ...props }) {
 	});
 }
 function OrderPayment({ $content, $data, className, ref }) {
-	const intl = useIntl();
+	const messages = useMessageFormatter(OrderPaymentContent, $content);
 	const headingId = useId();
 	if (!$data) return null;
-	const heading = copy($content?.heading, intl.formatMessage({ id: "fs/order-payment.heading" }));
-	const labels = paymentLabels($content, intl);
 	const keys = paymentKeys($data.payments);
 	return /* @__PURE__ */ jsxs("section", {
 		ref,
@@ -159,23 +168,22 @@ function OrderPayment({ $content, $data, className, ref }) {
 		children: [/* @__PURE__ */ jsx("h2", {
 			id: headingId,
 			"data-fs-order-payment-heading": "",
-			children: heading
+			children: messages.format("heading")
 		}), $data.payments.length === 0 ? /* @__PURE__ */ jsx("p", {
 			"data-fs-order-payment-empty": "",
-			children: labels.empty
+			children: messages.format("empty")
 		}) : /* @__PURE__ */ jsx("ul", {
 			"data-fs-order-payment-list": "",
 			children: $data.payments.map((record, index) => /* @__PURE__ */ jsx(OrderPaymentItem, {
 				record,
 				allowCancellation: $data.allowCancellation,
 				bankInvoiceName: $content?.bankInvoiceName,
-				labels
+				messages
 			}, keys[index]))
 		})]
 	});
 }
-function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }) {
-	const intl = useIntl();
+function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, messages }) {
 	const { formatMoney } = useStorefrontFormatters();
 	const bankInvoice = isBankInvoice(record);
 	const methodName = record.methodName?.trim() || null;
@@ -200,7 +208,7 @@ function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }
 					}) : null,
 					/* @__PURE__ */ jsx("span", {
 						"data-fs-order-payment-method-name": "",
-						children: name || labels.methodPlaceholder
+						children: name || messages.format("methodPlaceholder")
 					}),
 					lastDigits ? /* @__PURE__ */ jsx("span", {
 						"data-fs-order-payment-last-digits": "",
@@ -214,10 +222,7 @@ function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }
 			}),
 			amount != null && installments ? /* @__PURE__ */ jsx("span", {
 				"data-fs-order-payment-installments": "",
-				children: labels.installments ? fill(labels.installments, {
-					count: installments,
-					amount: formatMoney(amount / installments, { currency })
-				}) : intl.formatMessage({ id: "fs/order-payment.installments" }, {
+				children: messages.format("installments", {
 					count: installments,
 					amount: formatMoney(amount / installments, { currency })
 				})
@@ -226,7 +231,7 @@ function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }
 				"data-fs-order-payment-redemption-code": "",
 				children: [/* @__PURE__ */ jsx("span", {
 					"data-fs-order-payment-label": "",
-					children: labels.redemptionCode
+					children: messages.format("redemptionCode")
 				}), /* @__PURE__ */ jsx("span", {
 					"data-fs-order-payment-value": "",
 					children: record.redemptionCode
@@ -236,7 +241,7 @@ function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }
 				"data-fs-order-payment-bank-invoice-number": "",
 				children: [/* @__PURE__ */ jsx("span", {
 					"data-fs-order-payment-label": "",
-					children: labels.bankInvoiceNumber
+					children: messages.format("bankInvoiceNumber")
 				}), /* @__PURE__ */ jsx("span", {
 					"data-fs-order-payment-value": "",
 					children: record.bankInvoiceNumber
@@ -247,7 +252,7 @@ function OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }
 				target: "_blank",
 				rel: "noopener noreferrer",
 				"data-fs-order-payment-print": "",
-				children: labels.bankInvoicePrint
+				children: messages.format("bankInvoicePrint")
 			}) : null
 		]
 	});

package/dist/matter/order-payment/order-payment.js.map

@@ -1 +1 @@
-{"version":3,"file":"order-payment.js","names":[],"sources":["../../../src/matter/order-payment/order-payment.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, type Ref, useId } from 'react';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { paymentMethodIconName } from '../payment/payment-method-badges.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderPaymentData on Query {\n    customerOrder(id: $orderId) {\n      id\n      allowCancellation\n      payments {\n        methodName\n        lastDigits\n        amount {\n          amount\n          currencyCode\n        }\n        installments\n        redemptionCode\n        bankInvoiceNumber\n        bankInvoicePrintUrl\n      }\n    }\n  }\n`;\n\nexport const OrderPaymentContent = defineContentType({\n  id: 'order-payment',\n  title: 'Order Payment',\n  description:\n    'The heading, the bank-invoice name, and the fixed labels of the payment section. The installment line keeps {count} and {amount}.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      bankInvoiceName: { type: 'string', title: 'Bank invoice name' },\n      empty: { type: 'string', title: 'Empty' },\n      methodPlaceholder: { type: 'string', title: 'Method unavailable' },\n      installments: {\n        type: 'string',\n        title: 'Installments',\n        description: 'Keep the placeholders {count} and {amount}.',\n      },\n      redemptionCode: { type: 'string', title: 'Gift card code' },\n      bankInvoiceNumber: { type: 'string', title: 'Bank invoice number' },\n      bankInvoicePrint: { type: 'string', title: 'Print bank invoice' },\n    },\n  },\n});\n\nexport type OrderPaymentContentValue = ContentValue<typeof OrderPaymentContent>;\n\nexport type OrderPaymentRecord = {\n  methodName: string | null;\n  lastDigits: string | null;\n  amount: { amount: string | number; currencyCode: string };\n  installments: number | null;\n  redemptionCode: string | null;\n  bankInvoiceNumber: string | null;\n  bankInvoicePrintUrl: string | null;\n};\n\nexport type OrderPaymentData = {\n  id: string;\n  allowCancellation: boolean;\n  payments: OrderPaymentRecord[];\n};\n\nexport type OrderPaymentProps = Readonly<{\n  $content?: OrderPaymentContentValue;\n  $data?: OrderPaymentData | null;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\nexport const OrderPaymentDefinition = defineComponent<OrderPaymentProps>({\n  name: 'OrderPayment',\n  importPath: '@vtex/faststore/components',\n  component: OrderPayment,\n  content: OrderPaymentContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderPaymentSkeleton,\n  editor: { label: 'Order Payment', category: 'content' },\n  schema: {},\n  guideline:\n    'The payments recorded on one of the shopper orders: method, last four digits when recorded, brand icon when known, amount, installments, gift-card code, and bank-invoice number. Labels are content; a blank field keeps the catalogue. The print link shows only while the order can still be cancelled. Place it on the order details page.',\n});\n\nfunction fill(template: string, values: Record<string, string | number>): string {\n  return template.replaceAll(/\\{(count|amount)\\}/g, (_, key: string) => String(values[key] ?? ''));\n}\n\ntype PaymentLabels = {\n  empty: string;\n  methodPlaceholder: string;\n  installments: string | undefined;\n  redemptionCode: string;\n  bankInvoiceNumber: string;\n  bankInvoicePrint: string;\n};\n\nfunction paymentLabels(content: OrderPaymentContentValue | undefined, intl: ReturnType<typeof useIntl>): PaymentLabels {\n  return {\n    empty: copy(content?.empty, intl.formatMessage({ id: 'fs/order-payment.empty' })),\n    methodPlaceholder: copy(\n      content?.methodPlaceholder,\n      intl.formatMessage({ id: 'fs/order-payment.method.placeholder' }),\n    ),\n    installments: content?.installments?.trim() || undefined,\n    redemptionCode: copy(content?.redemptionCode, intl.formatMessage({ id: 'fs/order-payment.redemption-code' })),\n    bankInvoiceNumber: copy(\n      content?.bankInvoiceNumber,\n      intl.formatMessage({ id: 'fs/order-payment.bank-invoice.number' }),\n    ),\n    bankInvoicePrint: copy(\n      content?.bankInvoicePrint,\n      intl.formatMessage({ id: 'fs/order-payment.bank-invoice.print' }),\n    ),\n  };\n}\n\nfunction copy(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction moneyAmount(amount: string | number): number | null {\n  // Number('') and Number('  ') are 0, which would print a blank upstream amount as a real zero.\n  if (typeof amount === 'string' && amount.trim() === '') {\n    return null;\n  }\n  const value = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(value) ? value : null;\n}\n\n// Payments carry no identifier, so the key is the record's own values; a repeated record (two\n// identical card charges) gets a counter so React still sees distinct keys.\nfunction paymentKeys(payments: readonly OrderPaymentRecord[]): string[] {\n  const seen = new Map<string, number>();\n  return payments.map((record) => {\n    const base = [\n      record.methodName,\n      record.lastDigits,\n      record.amount.amount,\n      record.amount.currencyCode,\n      record.installments,\n      record.redemptionCode,\n      record.bankInvoiceNumber,\n    ]\n      .map((value) => value ?? '')\n      .join(':');\n    const repeats = seen.get(base) ?? 0;\n    seen.set(base, repeats + 1);\n    return repeats === 0 ? base : `${base}#${repeats}`;\n  });\n}\n\nfunction isBankInvoice(record: OrderPaymentRecord): boolean {\n  return Boolean(record.bankInvoiceNumber || record.bankInvoicePrintUrl);\n}\n\nfunction printHref(record: OrderPaymentRecord, allowCancellation: boolean): string | null {\n  if (!allowCancellation || !record.bankInvoicePrintUrl) {\n    return null;\n  }\n  const destination = resolveSafeHref(record.bankInvoicePrintUrl);\n  return destination.safe ? destination.href : null;\n}\n\nexport function OrderPaymentSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-payment-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-payment-skeleton-row=\"\" />\n      <span data-fs-order-payment-skeleton-row=\"\" />\n    </div>\n  );\n}\n\nexport function OrderPayment({ $content, $data, className, ref }: OrderPaymentProps) {\n  const intl = useIntl();\n  const headingId = useId();\n\n  if (!$data) {\n    return null;\n  }\n\n  const heading = copy($content?.heading, intl.formatMessage({ id: 'fs/order-payment.heading' }));\n  const labels = paymentLabels($content, intl);\n  const keys = paymentKeys($data.payments);\n\n  return (\n    <section ref={ref} aria-labelledby={headingId} className={className} data-fs-order-payment=\"\">\n      <h2 id={headingId} data-fs-order-payment-heading=\"\">\n        {heading}\n      </h2>\n      {$data.payments.length === 0 ? (\n        <p data-fs-order-payment-empty=\"\">{labels.empty}</p>\n      ) : (\n        <ul data-fs-order-payment-list=\"\">\n          {$data.payments.map((record, index) => (\n            <OrderPaymentItem\n              key={keys[index]}\n              record={record}\n              allowCancellation={$data.allowCancellation}\n              bankInvoiceName={$content?.bankInvoiceName}\n              labels={labels}\n            />\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n\ntype OrderPaymentItemProps = Readonly<{\n  record: OrderPaymentRecord;\n  allowCancellation: boolean;\n  bankInvoiceName: string | undefined;\n  labels: PaymentLabels;\n}>;\n\nfunction OrderPaymentItem({ record, allowCancellation, bankInvoiceName, labels }: OrderPaymentItemProps) {\n  const intl = useIntl();\n  const { formatMoney } = useStorefrontFormatters();\n  const bankInvoice = isBankInvoice(record);\n  const methodName = record.methodName?.trim() || null;\n  const name = bankInvoice ? copy(bankInvoiceName, methodName ?? '') : (methodName ?? '');\n  const lastDigits = record.lastDigits?.trim() || null;\n  const icon = methodName ? paymentMethodIconName(methodName) : null;\n  const amount = moneyAmount(record.amount.amount);\n  const currency = record.amount.currencyCode;\n  const installments = record.installments != null && record.installments > 1 ? record.installments : null;\n  const href = printHref(record, allowCancellation);\n\n  return (\n    <li data-fs-order-payment-item=\"\" data-fs-order-payment-item-bank-invoice={bankInvoice ? '' : undefined}>\n      <span data-fs-order-payment-method=\"\">\n        {icon ? <Icon name={icon} aria-hidden=\"true\" data-fs-order-payment-icon=\"\" /> : null}\n        <span data-fs-order-payment-method-name=\"\">{name || labels.methodPlaceholder}</span>\n        {lastDigits ? <span data-fs-order-payment-last-digits=\"\">{`•••• ${lastDigits}`}</span> : null}\n      </span>\n      {amount == null ? null : <span data-fs-order-payment-amount=\"\">{formatMoney(amount, { currency })}</span>}\n      {amount != null && installments ? (\n        <span data-fs-order-payment-installments=\"\">\n          {labels.installments\n            ? fill(labels.installments, {\n                count: installments,\n                amount: formatMoney(amount / installments, { currency }),\n              })\n            : intl.formatMessage(\n                { id: 'fs/order-payment.installments' },\n                { count: installments, amount: formatMoney(amount / installments, { currency }) },\n              )}\n        </span>\n      ) : null}\n      {record.redemptionCode ? (\n        <span data-fs-order-payment-redemption-code=\"\">\n          <span data-fs-order-payment-label=\"\">{labels.redemptionCode}</span>\n          <span data-fs-order-payment-value=\"\">{record.redemptionCode}</span>\n        </span>\n      ) : null}\n      {record.bankInvoiceNumber ? (\n        <span data-fs-order-payment-bank-invoice-number=\"\">\n          <span data-fs-order-payment-label=\"\">{labels.bankInvoiceNumber}</span>\n          <span data-fs-order-payment-value=\"\">{record.bankInvoiceNumber}</span>\n        </span>\n      ) : null}\n      {href ? (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" data-fs-order-payment-print=\"\">\n          {labels.bankInvoicePrint}\n        </a>\n      ) : null}\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-payment.js","names":[],"sources":["../../../src/matter/order-payment/order-payment.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, type Ref, useId } from 'react';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport type { MessageFormatter } from '../../sdk/i18n/message-formatter.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { paymentMethodIconName } from '../payment/payment-method-badges.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderPaymentData on Query {\n    customerOrder(id: $orderId) {\n      id\n      allowCancellation\n      payments {\n        methodName\n        lastDigits\n        amount {\n          amount\n          currencyCode\n        }\n        installments\n        redemptionCode\n        bankInvoiceNumber\n        bankInvoicePrintUrl\n      }\n    }\n  }\n`;\n\nexport const OrderPaymentContent = defineContentType({\n  id: 'order-payment',\n  title: 'Order Payment',\n  description: 'The heading, the bank-invoice name, and the fixed labels of the payment section.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      heading: { type: 'string', title: 'Heading', format: 'icu-message', messageSource: 'Payment' },\n      bankInvoiceName: { type: 'string', title: 'Bank invoice name' },\n      empty: { type: 'string', title: 'Empty', format: 'icu-message', messageSource: 'No payment recorded' },\n      methodPlaceholder: {\n        type: 'string',\n        title: 'Method unavailable',\n        format: 'icu-message',\n        messageSource: 'Payment method unavailable',\n      },\n      installments: {\n        type: 'string',\n        title: 'Installments',\n        format: 'icu-message',\n        messageSource: '{count}x {amount}',\n        messageArguments: {\n          type: 'object',\n          properties: { count: { type: 'integer' }, amount: { type: 'string' } },\n        },\n        messageExample: { count: 3, amount: '$33.33' },\n      },\n      redemptionCode: {\n        type: 'string',\n        title: 'Gift card code',\n        format: 'icu-message',\n        messageSource: 'Gift card code',\n      },\n      bankInvoiceNumber: {\n        type: 'string',\n        title: 'Bank invoice number',\n        format: 'icu-message',\n        messageSource: 'Bank invoice number',\n      },\n      bankInvoicePrint: {\n        type: 'string',\n        title: 'Print bank invoice',\n        format: 'icu-message',\n        messageSource: 'Print bank invoice',\n      },\n    },\n  },\n});\n\nexport type OrderPaymentContentValue = ContentValue<typeof OrderPaymentContent>;\n\nexport type OrderPaymentRecord = {\n  methodName: string | null;\n  lastDigits: string | null;\n  amount: { amount: string | number; currencyCode: string };\n  installments: number | null;\n  redemptionCode: string | null;\n  bankInvoiceNumber: string | null;\n  bankInvoicePrintUrl: string | null;\n};\n\nexport type OrderPaymentData = {\n  id: string;\n  allowCancellation: boolean;\n  payments: OrderPaymentRecord[];\n};\n\nexport type OrderPaymentProps = MessageLocaleProp &\n  Readonly<{\n    $content?: OrderPaymentContentValue;\n    $data?: OrderPaymentData | null;\n    className?: string;\n    ref?: Ref<HTMLElement>;\n  }>;\n\nexport const OrderPaymentDefinition = defineComponent<OrderPaymentProps>({\n  name: 'OrderPayment',\n  importPath: '@vtex/faststore/components',\n  component: OrderPayment,\n  content: OrderPaymentContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderPaymentSkeleton,\n  editor: { label: 'Order Payment', category: 'content' },\n  schema: {},\n  guideline:\n    'The payments recorded on one of the shopper orders: method, last four digits when recorded, brand icon when known, amount, installments, gift-card code, and bank-invoice number. Labels are content. The print link shows only while the order can still be cancelled. Place it on the order details page.',\n});\n\nfunction copy(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction moneyAmount(amount: string | number): number | null {\n  // Number('') and Number('  ') are 0, which would print a blank upstream amount as a real zero.\n  if (typeof amount === 'string' && amount.trim() === '') {\n    return null;\n  }\n  const value = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(value) ? value : null;\n}\n\n// Payments carry no identifier, so the key is the record's own values; a repeated record (two\n// identical card charges) gets a counter so React still sees distinct keys.\nfunction paymentKeys(payments: readonly OrderPaymentRecord[]): string[] {\n  const seen = new Map<string, number>();\n  return payments.map((record) => {\n    const base = [\n      record.methodName,\n      record.lastDigits,\n      record.amount.amount,\n      record.amount.currencyCode,\n      record.installments,\n      record.redemptionCode,\n      record.bankInvoiceNumber,\n    ]\n      .map((value) => value ?? '')\n      .join(':');\n    const repeats = seen.get(base) ?? 0;\n    seen.set(base, repeats + 1);\n    return repeats === 0 ? base : `${base}#${repeats}`;\n  });\n}\n\nfunction isBankInvoice(record: OrderPaymentRecord): boolean {\n  return Boolean(record.bankInvoiceNumber || record.bankInvoicePrintUrl);\n}\n\nfunction printHref(record: OrderPaymentRecord, allowCancellation: boolean): string | null {\n  if (!allowCancellation || !record.bankInvoicePrintUrl) {\n    return null;\n  }\n  const destination = resolveSafeHref(record.bankInvoicePrintUrl);\n  return destination.safe ? destination.href : null;\n}\n\nexport function OrderPaymentSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-payment-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-payment-skeleton-row=\"\" />\n      <span data-fs-order-payment-skeleton-row=\"\" />\n    </div>\n  );\n}\n\nexport function OrderPayment({ $content, $data, className, ref }: OrderPaymentProps) {\n  const messages = useMessageFormatter(OrderPaymentContent, $content);\n  const headingId = useId();\n\n  if (!$data) {\n    return null;\n  }\n\n  const keys = paymentKeys($data.payments);\n\n  return (\n    <section ref={ref} aria-labelledby={headingId} className={className} data-fs-order-payment=\"\">\n      <h2 id={headingId} data-fs-order-payment-heading=\"\">\n        {messages.format('heading')}\n      </h2>\n      {$data.payments.length === 0 ? (\n        <p data-fs-order-payment-empty=\"\">{messages.format('empty')}</p>\n      ) : (\n        <ul data-fs-order-payment-list=\"\">\n          {$data.payments.map((record, index) => (\n            <OrderPaymentItem\n              key={keys[index]}\n              record={record}\n              allowCancellation={$data.allowCancellation}\n              bankInvoiceName={$content?.bankInvoiceName}\n              messages={messages}\n            />\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n\ntype OrderPaymentItemProps = Readonly<{\n  record: OrderPaymentRecord;\n  allowCancellation: boolean;\n  bankInvoiceName: string | undefined;\n  messages: MessageFormatter<typeof OrderPaymentContent>;\n}>;\n\nfunction OrderPaymentItem({ record, allowCancellation, bankInvoiceName, messages }: OrderPaymentItemProps) {\n  const { formatMoney } = useStorefrontFormatters();\n  const bankInvoice = isBankInvoice(record);\n  const methodName = record.methodName?.trim() || null;\n  const name = bankInvoice ? copy(bankInvoiceName, methodName ?? '') : (methodName ?? '');\n  const lastDigits = record.lastDigits?.trim() || null;\n  const icon = methodName ? paymentMethodIconName(methodName) : null;\n  const amount = moneyAmount(record.amount.amount);\n  const currency = record.amount.currencyCode;\n  const installments = record.installments != null && record.installments > 1 ? record.installments : null;\n  const href = printHref(record, allowCancellation);\n\n  return (\n    <li data-fs-order-payment-item=\"\" data-fs-order-payment-item-bank-invoice={bankInvoice ? '' : undefined}>\n      <span data-fs-order-payment-method=\"\">\n        {icon ? <Icon name={icon} aria-hidden=\"true\" data-fs-order-payment-icon=\"\" /> : null}\n        <span data-fs-order-payment-method-name=\"\">{name || messages.format('methodPlaceholder')}</span>\n        {lastDigits ? <span data-fs-order-payment-last-digits=\"\">{`•••• ${lastDigits}`}</span> : null}\n      </span>\n      {amount == null ? null : <span data-fs-order-payment-amount=\"\">{formatMoney(amount, { currency })}</span>}\n      {amount != null && installments ? (\n        <span data-fs-order-payment-installments=\"\">\n          {messages.format('installments', {\n            count: installments,\n            amount: formatMoney(amount / installments, { currency }),\n          })}\n        </span>\n      ) : null}\n      {record.redemptionCode ? (\n        <span data-fs-order-payment-redemption-code=\"\">\n          <span data-fs-order-payment-label=\"\">{messages.format('redemptionCode')}</span>\n          <span data-fs-order-payment-value=\"\">{record.redemptionCode}</span>\n        </span>\n      ) : null}\n      {record.bankInvoiceNumber ? (\n        <span data-fs-order-payment-bank-invoice-number=\"\">\n          <span data-fs-order-payment-label=\"\">{messages.format('bankInvoiceNumber')}</span>\n          <span data-fs-order-payment-value=\"\">{record.bankInvoiceNumber}</span>\n        </span>\n      ) : null}\n      {href ? (\n        <a href={href} target=\"_blank\" rel=\"noopener noreferrer\" data-fs-order-payment-print=\"\">\n          {messages.format('bankInvoicePrint')}\n        </a>\n      ) : null}\n    </li>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-placed/order-placed-deliveries.d.ts

@@ -1,8 +1,9 @@
+import { ContentValue, MessageLocaleProp } from "../../core/dist/define-content-type.js";
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
-import { ShippingEstimateUnit } from "../shipping-simulator/shipping-simulator.js";
-import { OrderPlacedMoney } from "./order-placed.js";
 import { AddressSummaryFields } from "../../particles/address-summary/address-summary.js";
+import { OrderPlacedMoney } from "./order-placed.js";
+import { ShippingEstimateUnit } from "../shipping-simulator/shipping-simulator.js";
 import { ReactNode } from "react";
 //#region src/matter/order-placed/order-placed-deliveries.d.ts
 export type OrderPlacedShippingEstimateUnit = ShippingEstimateUnit;
@@ -93,17 +94,10 @@ export type OrderPlacedDeliveryListProps = {
   children?: ReactNode;
   $data?: OrderPlacedDeliveryListData;
 };
-export type OrderPlacedDeliveryGroupProps = {
+export type OrderPlacedDeliveryGroupProps = MessageLocaleProp & {
+  $content?: ContentValue<typeof OrderPlacedDeliveryGroupContent>;
   className?: string;
   children?: ReactNode;
-  /** The dated promise; `{date}` placeholder. */
-  dateTemplate?: string;
-  /** `{count}` placeholder, for any count but one. */
-  itemCountTemplate?: string;
-  /** `{count}` placeholder, for a count of one. */
-  itemCountOneTemplate?: string;
-  /** `{name}` placeholder, shown when the delivery is picked up. */
-  pickupPointTemplate?: string;
 };
 export type OrderPlacedItemRowProps = {
   className?: string;
@@ -117,6 +111,144 @@ export declare function useOrderDelivery(): OrderPlacedDelivery;
 /** The item the nearest OrderPlacedItemRow renders this subtree for. */
 export declare function useOrderPlacedItem(): OrderPlacedItem;
 export declare const OrderPlacedDeliveryListDefinition: ComponentDefinition<OrderPlacedDeliveryListProps>;
+export declare const OrderPlacedDeliveryGroupContent: {
+  readonly id: "order-placed-delivery-group";
+  readonly title: "Order Placed Delivery Group";
+  readonly description: "The dated promise, the relative estimate sentences (one per unit), the item count and the pickup point of a placed order's delivery.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly dateTemplate: {
+        readonly type: "string";
+        readonly title: "Dated promise";
+        readonly description: "`date` is the formatted estimated date.";
+        readonly format: "icu-message";
+        readonly messageSource: "Arrives by {date}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly date: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly date: "Mar 12, 2026";
+        };
+      };
+      readonly itemCountTemplate: {
+        readonly type: "string";
+        readonly title: "Item count";
+        readonly format: "icu-message";
+        readonly messageSource: "{count, plural, one {# item} other {# items}}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly count: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly count: 3;
+        };
+      };
+      readonly pickupPointTemplate: {
+        readonly type: "string";
+        readonly title: "Pickup point";
+        readonly description: "`name` is the pickup point name.";
+        readonly format: "icu-message";
+        readonly messageSource: "Pickup at {name}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly name: {
+              readonly type: "string";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly name: "Downtown store";
+        };
+      };
+      readonly today: {
+        readonly type: "string";
+        readonly title: "Arrives today";
+        readonly format: "icu-message";
+        readonly messageSource: "arrives today";
+      };
+      readonly inBusinessDays: {
+        readonly type: "string";
+        readonly title: "In business days";
+        readonly format: "icu-message";
+        readonly messageSource: "in {days, plural, one {# business day} other {# business days}}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly days: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly days: 3;
+        };
+      };
+      readonly inDays: {
+        readonly type: "string";
+        readonly title: "In days";
+        readonly format: "icu-message";
+        readonly messageSource: "in {days, plural, one {# day} other {# days}}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly days: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly days: 3;
+        };
+      };
+      readonly inHours: {
+        readonly type: "string";
+        readonly title: "In hours";
+        readonly format: "icu-message";
+        readonly messageSource: "in {hours, plural, one {# hour} other {# hours}}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly hours: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly hours: 4;
+        };
+      };
+      readonly inMinutes: {
+        readonly type: "string";
+        readonly title: "In minutes";
+        readonly format: "icu-message";
+        readonly messageSource: "in {minutes, plural, one {# minute} other {# minutes}}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly minutes: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly minutes: 30;
+        };
+      };
+    };
+  };
+};
 export declare const OrderPlacedDeliveryGroupDefinition: ComponentDefinition<OrderPlacedDeliveryGroupProps>;
 export declare const OrderPlacedItemRowDefinition: ComponentDefinition<OrderPlacedItemRowProps>;
 export declare const OrderPlacedItemCompositionsDefinition: ComponentDefinition<OrderPlacedItemCompositionsProps>;
@@ -127,7 +259,7 @@ export declare function OrderPlacedDeliveryList({ className, children, $data: $d
  * `AddressSummary*` children. The dated promise wins when the order carries one; otherwise the relative
  * estimate. A delivery with neither a method nor a date still shows its items and count.
  */
-export declare function OrderPlacedDeliveryGroup({ className, children, dateTemplate, itemCountTemplate, itemCountOneTemplate, pickupPointTemplate }: Readonly<OrderPlacedDeliveryGroupProps>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderPlacedDeliveryGroup({ $content, $locale, className, children }: Readonly<OrderPlacedDeliveryGroupProps>): import("react/jsx-runtime").JSX.Element;
 /**
  * Each item of the nearest delivery, through the cart's own `CartItemRoot`: the row publishes the
  * order item on `DataOverrideContext`, the seam `CartItemRoot` reads before its `$data`, so the cart's