@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/order-list-row/order-list-row.js

@@ -77,7 +77,7 @@ function orderTarget(href, orderId) {
 	const tail = cut === -1 ? "" : href.slice(cut);
 	return `${path.replace(/\/+$/, "")}/${encodeURIComponent(orderId)}${tail}`;
 }
-function OrderListRow({ $data, href = ORDER_PAGE, className, ref }) {
+function OrderListRow({ $data, href = ORDER_PAGE, statusMessages, className, ref }) {
 	const { formatMoney, formatDate } = useStorefrontFormatters();
 	const badge = completionBadgeModel($data.completion);
 	const placed = instant($data.placedAt);
@@ -111,7 +111,8 @@ function OrderListRow({ $data, href = ORDER_PAGE, className, ref }) {
 			badge ? /* @__PURE__ */ jsx(OrderStatusBadge, {
 				state: badge.state,
 				tone: badge.tone,
-				label: badge.label
+				label: badge.label,
+				messages: statusMessages
 			}) : null,
 			estimate ? /* @__PURE__ */ jsx("time", {
 				dateTime: estimateValue($data) ?? void 0,

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

@@ -1 +1 @@
-{"version":3,"file":"order-list-row.js","names":[],"sources":["../../../src/matter/order-list-row/order-list-row.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { OrderStatusBadge } from '../../particles/order-status-badge/order-status-badge.js';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { StorefrontLink } from '../../sdk/navigation/storefront-link.js';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { completionBadgeModel } from '../../sdk/orders/completion-badge.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderListRowData on CustomerOrderListItem {\n    id\n    placedAt\n    total {\n      amount\n      currencyCode\n    }\n    itemCount\n    completion {\n      view\n      label\n    }\n    shippingEstimatedDateMin\n    shippingEstimatedDateMax\n  }\n`;\n\nexport type OrderListItemData = {\n  id: string;\n  placedAt: string | null;\n  total: { amount: string | number; currencyCode: string } | null;\n  itemCount: number | null;\n  completion: { view: string; label: string };\n  shippingEstimatedDateMin: string | null;\n  shippingEstimatedDateMax: string | null;\n};\n\nexport type OrderListRowProps = Readonly<{\n  $data: OrderListItemData;\n  /**\n   * The order page; the row fills `orderId`. A string is the path the orders live under, and the row\n   * appends its id. `OrderList` passes its `orderHref`.\n   */\n  href?: PageRef | string;\n  className?: string;\n  ref?: Ref<HTMLAnchorElement>;\n}>;\n\nexport const OrderListRowDefinition = defineComponent<OrderListRowProps>({\n  name: 'OrderListRow',\n  importPath: '@vtex/faststore/components',\n  component: OrderListRow,\n  fragment,\n  skeleton: OrderListRowSkeleton,\n  editor: { label: 'Order List Row', category: 'content' },\n  schema: {},\n  guideline:\n    'One order as a link to that order, showing its number, placed date, total, item count, and status badge, plus a delivery estimate while it is ongoing. The list renders it; do not place it on a page alone.',\n});\n\nfunction instant(value: string | null): Date | null {\n  if (!value) {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\nfunction moneyAmount(amount: string | number): number | null {\n  const value = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(value) ? value : null;\n}\n\nfunction estimateValue(item: OrderListItemData): string | null {\n  if (item.completion.view !== 'ONGOING') {\n    return null;\n  }\n  const max = item.shippingEstimatedDateMax?.trim();\n  if (max) {\n    return max;\n  }\n  const min = item.shippingEstimatedDateMin?.trim();\n  return min || null;\n}\n\nexport function OrderListRowSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-list-row-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-list-row-skeleton-fact=\"\" />\n      <span data-fs-order-list-row-skeleton-fact=\"\" />\n    </div>\n  );\n}\n\nconst ORDER_PAGE: PageRef = { standard: 'order' };\n\n/**\n * The row's own order: a reference gets `orderId` as a param, and a string is the path the orders\n * live under, which gets the encoded id as its last segment (before any query or hash).\n */\nfunction orderTarget(href: PageRef | string, orderId: string): PageRef | string {\n  if (typeof href !== 'string') return { ...href, params: { ...href.params, orderId } };\n  const cut = href.search(/[?#]/);\n  const path = cut === -1 ? href : href.slice(0, cut);\n  const tail = cut === -1 ? '' : href.slice(cut);\n  return `${path.replace(/\\/+$/, '')}/${encodeURIComponent(orderId)}${tail}`;\n}\n\nexport function OrderListRow({ $data, href = ORDER_PAGE, className, ref }: OrderListRowProps) {\n  const { formatMoney, formatDate } = useStorefrontFormatters();\n  const badge = completionBadgeModel($data.completion);\n  const placed = instant($data.placedAt);\n  const amount = $data.total ? moneyAmount($data.total.amount) : null;\n  const estimate = instant(estimateValue($data));\n\n  return (\n    <StorefrontLink\n      ref={ref}\n      href={orderTarget(href, $data.id)}\n      aria-label={$data.id}\n      className={className}\n      data-fs-order-list-row=\"\"\n      data-fs-order-list-row-state={badge?.state}\n    >\n      <span data-fs-order-list-row-id=\"\">{$data.id}</span>\n      {placed ? (\n        <time dateTime={$data.placedAt ?? undefined} data-fs-order-list-row-placed=\"\">\n          {formatDate(placed)}\n        </time>\n      ) : null}\n      {amount != null && $data.total ? (\n        <span data-fs-order-list-row-total=\"\">{formatMoney(amount, { currency: $data.total.currencyCode })}</span>\n      ) : null}\n      {$data.itemCount == null ? null : <span data-fs-order-list-row-count=\"\">{$data.itemCount}</span>}\n      {badge ? <OrderStatusBadge state={badge.state} tone={badge.tone} label={badge.label} /> : null}\n      {estimate ? (\n        <time dateTime={estimateValue($data) ?? undefined} data-fs-order-list-row-estimate=\"\">\n          {formatDate(estimate)}\n        </time>\n      ) : null}\n    </StorefrontLink>\n  );\n}\n"],"mappings":";;;;;;;;AAiDA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;CACA,UAAU;CACV,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAU;CACvD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,QAAQ,OAAmC;CAClD,IAAI,CAAC,OACH,OAAO;CAET,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAAI,OAAO;AAC/C;AAEA,SAAS,YAAY,QAAwC;CAC3D,MAAM,QAAQ,OAAO,WAAW,WAAW,SAAS,OAAO,MAAM;CACjE,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;AAEA,SAAS,cAAc,MAAwC;CAC7D,IAAI,KAAK,WAAW,SAAS,WAC3B,OAAO;CAET,MAAM,MAAM,KAAK,0BAA0B,KAAK;CAChD,IAAI,KACF,OAAO;CAGT,OADY,KAAK,0BAA0B,KAAK,KAClC;AAChB;AAEA,SAAgB,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CAC1F,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,mCAAgC;EAAG,eAAY;EAArF,UAAA,CACE,oBAAC,QAAD,EAAM,wCAAqC,GAAI,CAAA,GAC/C,oBAAC,QAAD,EAAM,wCAAqC,GAAI,CAAA,CAC5C;;AAET;AAEA,MAAM,aAAsB,EAAE,UAAU,QAAQ;;;;;AAMhD,SAAS,YAAY,MAAwB,SAAmC;CAC9E,IAAI,OAAO,SAAS,UAAU,OAAO;EAAE,GAAG;EAAM,QAAQ;GAAE,GAAG,KAAK;GAAQ;EAAQ;CAAE;CACpF,MAAM,MAAM,KAAK,OAAO,MAAM;CAC9B,MAAM,OAAO,QAAQ,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;CAClD,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,MAAM,GAAG;CAC7C,OAAO,GAAG,KAAK,QAAQ,QAAQ,EAAE,EAAE,GAAG,mBAAmB,OAAO,IAAI;AACtE;AAEA,SAAgB,aAAa,EAAE,OAAO,OAAO,YAAY,WAAW,OAA0B;CAC5F,MAAM,EAAE,aAAa,eAAe,wBAAwB;CAC5D,MAAM,QAAQ,qBAAqB,MAAM,UAAU;CACnD,MAAM,SAAS,QAAQ,MAAM,QAAQ;CACrC,MAAM,SAAS,MAAM,QAAQ,YAAY,MAAM,MAAM,MAAM,IAAI;CAC/D,MAAM,WAAW,QAAQ,cAAc,KAAK,CAAC;CAE7C,OACE,qBAAC,gBAAD;EACO;EACL,MAAM,YAAY,MAAM,MAAM,EAAE;EAChC,cAAY,MAAM;EACP;EACX,0BAAuB;EACvB,gCAA8B,OAAO;EANvC,UAAA;GAQE,oBAAC,QAAD;IAAM,6BAA0B;IAAI,UAAA,MAAM;GAAS,CAAA;GAClD,SACC,oBAAC,QAAD;IAAM,UAAU,MAAM,YAAY,KAAA;IAAW,iCAA8B;IACxE,UAAA,WAAW,MAAM;GACd,CAAA,IACJ;GACH,UAAU,QAAQ,MAAM,QACvB,oBAAC,QAAD;IAAM,gCAA6B;IAAI,UAAA,YAAY,QAAQ,EAAE,UAAU,MAAM,MAAM,aAAa,CAAC;GAAQ,CAAA,IACvG;GACH,MAAM,aAAa,OAAO,OAAO,oBAAC,QAAD;IAAM,gCAA6B;IAAI,UAAA,MAAM;GAAgB,CAAA;GAC9F,QAAQ,oBAAC,kBAAD;IAAkB,OAAO,MAAM;IAAO,MAAM,MAAM;IAAM,OAAO,MAAM;GAAQ,CAAA,IAAI;GACzF,WACC,oBAAC,QAAD;IAAM,UAAU,cAAc,KAAK,KAAK,KAAA;IAAW,mCAAgC;IAChF,UAAA,WAAW,QAAQ;GAChB,CAAA,IACJ;EACU;;AAEpB"}
+{"version":3,"file":"order-list-row.js","names":[],"sources":["../../../src/matter/order-list-row/order-list-row.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { OrderStatusBadge, type OrderStatusMessages } from '../../particles/order-status-badge/order-status-badge.js';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { StorefrontLink } from '../../sdk/navigation/storefront-link.js';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { completionBadgeModel } from '../../sdk/orders/completion-badge.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderListRowData on CustomerOrderListItem {\n    id\n    placedAt\n    total {\n      amount\n      currencyCode\n    }\n    itemCount\n    completion {\n      view\n      label\n    }\n    shippingEstimatedDateMin\n    shippingEstimatedDateMax\n  }\n`;\n\nexport type OrderListItemData = {\n  id: string;\n  placedAt: string | null;\n  total: { amount: string | number; currencyCode: string } | null;\n  itemCount: number | null;\n  completion: { view: string; label: string };\n  shippingEstimatedDateMin: string | null;\n  shippingEstimatedDateMax: string | null;\n};\n\nexport type OrderListRowProps = Readonly<{\n  $data: OrderListItemData;\n  /**\n   * The order page; the row fills `orderId`. A string is the path the orders live under, and the row\n   * appends its id. `OrderList` passes its `orderHref`.\n   */\n  href?: PageRef | string;\n  /** The formatted status sentences. `OrderList` passes its own `status*` messages. */\n  statusMessages: OrderStatusMessages;\n  className?: string;\n  ref?: Ref<HTMLAnchorElement>;\n}>;\n\nexport const OrderListRowDefinition = defineComponent<OrderListRowProps>({\n  name: 'OrderListRow',\n  importPath: '@vtex/faststore/components',\n  component: OrderListRow,\n  fragment,\n  skeleton: OrderListRowSkeleton,\n  editor: { label: 'Order List Row', category: 'content' },\n  schema: {},\n  guideline:\n    'One order as a link to that order, showing its number, placed date, total, item count, and status badge, plus a delivery estimate while it is ongoing. The list renders it; do not place it on a page alone.',\n});\n\nfunction instant(value: string | null): Date | null {\n  if (!value) {\n    return null;\n  }\n  const date = new Date(value);\n  return Number.isNaN(date.getTime()) ? null : date;\n}\n\nfunction moneyAmount(amount: string | number): number | null {\n  const value = typeof amount === 'number' ? amount : Number(amount);\n  return Number.isFinite(value) ? value : null;\n}\n\nfunction estimateValue(item: OrderListItemData): string | null {\n  if (item.completion.view !== 'ONGOING') {\n    return null;\n  }\n  const max = item.shippingEstimatedDateMax?.trim();\n  if (max) {\n    return max;\n  }\n  const min = item.shippingEstimatedDateMin?.trim();\n  return min || null;\n}\n\nexport function OrderListRowSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-list-row-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-list-row-skeleton-fact=\"\" />\n      <span data-fs-order-list-row-skeleton-fact=\"\" />\n    </div>\n  );\n}\n\nconst ORDER_PAGE: PageRef = { standard: 'order' };\n\n/**\n * The row's own order: a reference gets `orderId` as a param, and a string is the path the orders\n * live under, which gets the encoded id as its last segment (before any query or hash).\n */\nfunction orderTarget(href: PageRef | string, orderId: string): PageRef | string {\n  if (typeof href !== 'string') return { ...href, params: { ...href.params, orderId } };\n  const cut = href.search(/[?#]/);\n  const path = cut === -1 ? href : href.slice(0, cut);\n  const tail = cut === -1 ? '' : href.slice(cut);\n  return `${path.replace(/\\/+$/, '')}/${encodeURIComponent(orderId)}${tail}`;\n}\n\nexport function OrderListRow({ $data, href = ORDER_PAGE, statusMessages, className, ref }: OrderListRowProps) {\n  const { formatMoney, formatDate } = useStorefrontFormatters();\n  const badge = completionBadgeModel($data.completion);\n  const placed = instant($data.placedAt);\n  const amount = $data.total ? moneyAmount($data.total.amount) : null;\n  const estimate = instant(estimateValue($data));\n\n  return (\n    <StorefrontLink\n      ref={ref}\n      href={orderTarget(href, $data.id)}\n      aria-label={$data.id}\n      className={className}\n      data-fs-order-list-row=\"\"\n      data-fs-order-list-row-state={badge?.state}\n    >\n      <span data-fs-order-list-row-id=\"\">{$data.id}</span>\n      {placed ? (\n        <time dateTime={$data.placedAt ?? undefined} data-fs-order-list-row-placed=\"\">\n          {formatDate(placed)}\n        </time>\n      ) : null}\n      {amount != null && $data.total ? (\n        <span data-fs-order-list-row-total=\"\">{formatMoney(amount, { currency: $data.total.currencyCode })}</span>\n      ) : null}\n      {$data.itemCount == null ? null : <span data-fs-order-list-row-count=\"\">{$data.itemCount}</span>}\n      {badge ? (\n        <OrderStatusBadge state={badge.state} tone={badge.tone} label={badge.label} messages={statusMessages} />\n      ) : null}\n      {estimate ? (\n        <time dateTime={estimateValue($data) ?? undefined} data-fs-order-list-row-estimate=\"\">\n          {formatDate(estimate)}\n        </time>\n      ) : null}\n    </StorefrontLink>\n  );\n}\n"],"mappings":";;;;;;;;AAmDA,MAAa,yBAAyB,gBAAmC;CACvE,MAAM;CACN,YAAY;CACZ,WAAW;CACX;;;;;;;;;;;;;;;;;CACA,UAAU;CACV,QAAQ;EAAE,OAAO;EAAkB,UAAU;CAAU;CACvD,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,QAAQ,OAAmC;CAClD,IAAI,CAAC,OACH,OAAO;CAET,MAAM,OAAO,IAAI,KAAK,KAAK;CAC3B,OAAO,OAAO,MAAM,KAAK,QAAQ,CAAC,IAAI,OAAO;AAC/C;AAEA,SAAS,YAAY,QAAwC;CAC3D,MAAM,QAAQ,OAAO,WAAW,WAAW,SAAS,OAAO,MAAM;CACjE,OAAO,OAAO,SAAS,KAAK,IAAI,QAAQ;AAC1C;AAEA,SAAS,cAAc,MAAwC;CAC7D,IAAI,KAAK,WAAW,SAAS,WAC3B,OAAO;CAET,MAAM,MAAM,KAAK,0BAA0B,KAAK;CAChD,IAAI,KACF,OAAO;CAGT,OADY,KAAK,0BAA0B,KAAK,KAClC;AAChB;AAEA,SAAgB,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CAC1F,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,mCAAgC;EAAG,eAAY;EAArF,UAAA,CACE,oBAAC,QAAD,EAAM,wCAAqC,GAAI,CAAA,GAC/C,oBAAC,QAAD,EAAM,wCAAqC,GAAI,CAAA,CAC5C;;AAET;AAEA,MAAM,aAAsB,EAAE,UAAU,QAAQ;;;;;AAMhD,SAAS,YAAY,MAAwB,SAAmC;CAC9E,IAAI,OAAO,SAAS,UAAU,OAAO;EAAE,GAAG;EAAM,QAAQ;GAAE,GAAG,KAAK;GAAQ;EAAQ;CAAE;CACpF,MAAM,MAAM,KAAK,OAAO,MAAM;CAC9B,MAAM,OAAO,QAAQ,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;CAClD,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,MAAM,GAAG;CAC7C,OAAO,GAAG,KAAK,QAAQ,QAAQ,EAAE,EAAE,GAAG,mBAAmB,OAAO,IAAI;AACtE;AAEA,SAAgB,aAAa,EAAE,OAAO,OAAO,YAAY,gBAAgB,WAAW,OAA0B;CAC5G,MAAM,EAAE,aAAa,eAAe,wBAAwB;CAC5D,MAAM,QAAQ,qBAAqB,MAAM,UAAU;CACnD,MAAM,SAAS,QAAQ,MAAM,QAAQ;CACrC,MAAM,SAAS,MAAM,QAAQ,YAAY,MAAM,MAAM,MAAM,IAAI;CAC/D,MAAM,WAAW,QAAQ,cAAc,KAAK,CAAC;CAE7C,OACE,qBAAC,gBAAD;EACO;EACL,MAAM,YAAY,MAAM,MAAM,EAAE;EAChC,cAAY,MAAM;EACP;EACX,0BAAuB;EACvB,gCAA8B,OAAO;EANvC,UAAA;GAQE,oBAAC,QAAD;IAAM,6BAA0B;IAAI,UAAA,MAAM;GAAS,CAAA;GAClD,SACC,oBAAC,QAAD;IAAM,UAAU,MAAM,YAAY,KAAA;IAAW,iCAA8B;IACxE,UAAA,WAAW,MAAM;GACd,CAAA,IACJ;GACH,UAAU,QAAQ,MAAM,QACvB,oBAAC,QAAD;IAAM,gCAA6B;IAAI,UAAA,YAAY,QAAQ,EAAE,UAAU,MAAM,MAAM,aAAa,CAAC;GAAQ,CAAA,IACvG;GACH,MAAM,aAAa,OAAO,OAAO,oBAAC,QAAD;IAAM,gCAA6B;IAAI,UAAA,MAAM;GAAgB,CAAA;GAC9F,QACC,oBAAC,kBAAD;IAAkB,OAAO,MAAM;IAAO,MAAM,MAAM;IAAM,OAAO,MAAM;IAAO,UAAU;GAAiB,CAAA,IACrG;GACH,WACC,oBAAC,QAAD;IAAM,UAAU,cAAc,KAAK,KAAK,KAAA;IAAW,mCAAgC;IAChF,UAAA,WAAW,QAAQ;GAChB,CAAA,IACJ;EACU;;AAEpB"}

package/dist/matter/order-list-search/order-list-search.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 { Ref } from "react";
@@ -14,59 +14,51 @@ export declare const OrderListSearchContent: {
       readonly label: {
         readonly type: "string";
         readonly title: "Order number";
+        readonly format: "icu-message";
+        readonly messageSource: "Order number";
       };
       readonly from: {
         readonly type: "string";
         readonly title: "Placed from";
+        readonly format: "icu-message";
+        readonly messageSource: "Placed from";
       };
       readonly to: {
         readonly type: "string";
         readonly title: "Placed to";
+        readonly format: "icu-message";
+        readonly messageSource: "Placed to";
       };
       readonly submit: {
         readonly type: "string";
         readonly title: "Search";
+        readonly format: "icu-message";
+        readonly messageSource: "Search";
       };
       readonly clear: {
         readonly type: "string";
         readonly title: "Clear search";
+        readonly format: "icu-message";
+        readonly messageSource: "Clear search";
       };
       readonly invalidRange: {
         readonly type: "string";
         readonly title: "Invalid range";
+        readonly description: "Shown when the from day is after the to day.";
+        readonly format: "icu-message";
+        readonly messageSource: "The start date is after the end date.";
       };
     };
   };
 };
 export type OrderListSearchContentValue = ContentValue<typeof OrderListSearchContent>;
-export type OrderListSearchProps = Readonly<{
-  /** Visible label of the text field. */
-  label?: string;
-  fromLabel?: string;
-  toLabel?: string;
-  submitLabel?: string;
-  clearLabel?: string;
-  /** Shown when the from day is after the to day. */
-  invalidRangeMessage?: string;
-  /** Injected by the compiler from the page content entry. */
+export type OrderListSearchProps = MessageLocaleProp & Readonly<{
+  /** The field labels, the button labels and the invalid-range message. */
   $content?: OrderListSearchContentValue;
   className?: string;
   ref?: Ref<HTMLFormElement>;
 }>;
-export declare const OrderListSearchDefinition: ComponentDefinition<Readonly<{
-  /** Visible label of the text field. */
-  label?: string;
-  fromLabel?: string;
-  toLabel?: string;
-  submitLabel?: string;
-  clearLabel?: string;
-  /** Shown when the from day is after the to day. */
-  invalidRangeMessage?: string;
-  /** Injected by the compiler from the page content entry. */
-  $content?: OrderListSearchContentValue;
-  className?: string;
-  ref?: Ref<HTMLFormElement>;
-}>>;
-export declare function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, invalidRangeMessage, $content, className, ref }: OrderListSearchProps): import("react/jsx-runtime").JSX.Element;
+export declare const OrderListSearchDefinition: ComponentDefinition<OrderListSearchProps>;
+export declare function OrderListSearch({ $content, $locale, className, ref }: OrderListSearchProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=order-list-search.d.ts.map

package/dist/matter/order-list-search/order-list-search.js

@@ -2,6 +2,7 @@
 import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { useStorefrontNavigation } from "../../sdk/navigation/use-storefront-navigation.js";
 import { StorefrontLink } from "../../sdk/navigation/storefront-link.js";
 import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
@@ -23,41 +24,46 @@ const OrderListSearchContent = defineContentType({
 		properties: {
 			label: {
 				type: "string",
-				title: "Order number"
+				title: "Order number",
+				format: "icu-message",
+				messageSource: "Order number"
 			},
 			from: {
 				type: "string",
-				title: "Placed from"
+				title: "Placed from",
+				format: "icu-message",
+				messageSource: "Placed from"
 			},
 			to: {
 				type: "string",
-				title: "Placed to"
+				title: "Placed to",
+				format: "icu-message",
+				messageSource: "Placed to"
 			},
 			submit: {
 				type: "string",
-				title: "Search"
+				title: "Search",
+				format: "icu-message",
+				messageSource: "Search"
 			},
 			clear: {
 				type: "string",
-				title: "Clear search"
+				title: "Clear search",
+				format: "icu-message",
+				messageSource: "Clear search"
 			},
 			invalidRange: {
 				type: "string",
-				title: "Invalid range"
+				title: "Invalid range",
+				description: "Shown when the from day is after the to day.",
+				format: "icu-message",
+				messageSource: "The start date is after the end date."
 			}
 		}
 	}
 });
 const DAY = /^(\d{4})-(\d{2})-(\d{2})$/;
 const INSTANT = /^(\d{4})-(\d{2})-(\d{2})T\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:Z|[+-]\d{2}:\d{2})$/;
-const DEFAULTS = {
-	label: "Order number",
-	from: "Placed from",
-	to: "Placed to",
-	submit: "Search",
-	clear: "Clear search",
-	invalidRange: "The start date is after the end date."
-};
 const OrderListSearchDefinition = defineComponent({
 	name: "OrderListSearch",
 	importPath: "@vtex/faststore/components",
@@ -67,47 +73,9 @@ const OrderListSearchDefinition = defineComponent({
 		label: "Order List Search",
 		category: "action"
 	},
-	schema: {
-		label: {
-			type: "string",
-			default: "Order number",
-			label: "Order number"
-		},
-		fromLabel: {
-			type: "string",
-			default: "Placed from",
-			label: "Placed from"
-		},
-		toLabel: {
-			type: "string",
-			default: "Placed to",
-			label: "Placed to"
-		},
-		submitLabel: {
-			type: "string",
-			default: "Search",
-			label: "Search"
-		},
-		clearLabel: {
-			type: "string",
-			default: "Clear search",
-			label: "Clear search"
-		},
-		invalidRangeMessage: {
-			type: "string",
-			default: "The start date is after the end date.",
-			label: "Invalid range"
-		}
-	},
-	guideline: "A text field and a placed-date range that write search, placedFrom, and placedTo, keep the current view, and drop the cursor. An inverted range is not written."
+	schema: {},
+	guideline: "A text field and a placed-date range that write search, placedFrom, and placedTo, keep the current view, and drop the cursor. An inverted range is not written. Its copy is the $content fields label, from, to, submit, clear and invalidRange."
 });
-function resolveText(content, prop, fallback) {
-	const fromContent = content?.trim();
-	if (fromContent) return fromContent;
-	const fromProp = prop?.trim();
-	if (fromProp) return fromProp;
-	return fallback;
-}
 function calendarDay(value) {
 	if (value == null) return "";
 	const trimmed = value.trim();
@@ -193,7 +161,7 @@ function readFields(params) {
 		to: calendarDay(params.get("placedTo"))
 	};
 }
-function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, invalidRangeMessage, $content, className, ref }) {
+function OrderListSearch({ $content, $locale, className, ref }) {
 	const route = useStorefrontRoute();
 	const searchParams = useStorefrontSearchParams();
 	const { push } = useStorefrontNavigation();
@@ -205,14 +173,7 @@ function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, i
 		setSeenCriteria(criteria);
 		setFields(readFields(searchParams));
 	}
-	const texts = {
-		label: resolveText($content?.label, label, DEFAULTS.label),
-		from: resolveText($content?.from, fromLabel, DEFAULTS.from),
-		to: resolveText($content?.to, toLabel, DEFAULTS.to),
-		submit: resolveText($content?.submit, submitLabel, DEFAULTS.submit),
-		clear: resolveText($content?.clear, clearLabel, DEFAULTS.clear),
-		invalidRange: resolveText($content?.invalidRange, invalidRangeMessage, DEFAULTS.invalidRange)
-	};
+	const { format } = useMessageFormatter(OrderListSearchContent, $content);
 	const rangeInvalid = inverted(fields.from, fields.to);
 	const showClear = applied(searchParams);
 	function onSubmit(event) {
@@ -228,7 +189,7 @@ function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, i
 		"data-fs-order-list-search-invalid": rangeInvalid ? "" : void 0,
 		onSubmit,
 		children: [
-			/* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: texts.label }), /* @__PURE__ */ jsx(Input, {
+			/* @__PURE__ */ jsxs(Field.Root, { children: [/* @__PURE__ */ jsx(Field.Label, { children: format("label") }), /* @__PURE__ */ jsx(Input, {
 				type: "text",
 				value: fields.term,
 				"data-fs-order-list-search-term": "",
@@ -242,7 +203,7 @@ function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, i
 			})] }),
 			/* @__PURE__ */ jsxs(Field.Root, {
 				invalid: rangeInvalid,
-				children: [/* @__PURE__ */ jsx(Field.Label, { children: texts.from }), /* @__PURE__ */ jsx(Input, {
+				children: [/* @__PURE__ */ jsx(Field.Label, { children: format("from") }), /* @__PURE__ */ jsx(Input, {
 					type: "date",
 					value: fields.from,
 					"aria-invalid": rangeInvalid || void 0,
@@ -259,7 +220,7 @@ function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, i
 			}),
 			/* @__PURE__ */ jsxs(Field.Root, {
 				invalid: rangeInvalid,
-				children: [/* @__PURE__ */ jsx(Field.Label, { children: texts.to }), /* @__PURE__ */ jsx(Input, {
+				children: [/* @__PURE__ */ jsx(Field.Label, { children: format("to") }), /* @__PURE__ */ jsx(Input, {
 					type: "date",
 					value: fields.to,
 					"aria-invalid": rangeInvalid || void 0,
@@ -276,16 +237,16 @@ function OrderListSearch({ label, fromLabel, toLabel, submitLabel, clearLabel, i
 			}),
 			rangeInvalid ? /* @__PURE__ */ jsx("p", {
 				id: messageId,
-				children: texts.invalidRange
+				children: format("invalidRange")
 			}) : null,
 			/* @__PURE__ */ jsx(Button, {
 				type: "submit",
-				children: texts.submit
+				children: format("submit")
 			}),
 			showClear ? /* @__PURE__ */ jsx(StorefrontLink, {
 				href: clearHref(route, searchParams),
 				"data-fs-order-list-search-clear": "",
-				children: texts.clear
+				children: format("clear")
 			}) : null
 		]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"order-list-search.js","names":[],"sources":["../../../src/matter/order-list-search/order-list-search.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { type Ref, type SubmitEvent, useId, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { Field } from '../../particles/field/field.js';\nimport { Input } from '../../particles/input/input.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 { useStorefrontNavigation } from '../../sdk/navigation/use-storefront-navigation.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { useStorefrontSearchParams } from '../../sdk/navigation/use-storefront-search-params.js';\n\nexport const OrderListSearchContent = defineContentType({\n  id: 'order-list-search',\n  title: 'Order List Search',\n  description: 'The order-number label, the placed-date labels, and the invalid-range message.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Order number' },\n      from: { type: 'string', title: 'Placed from' },\n      to: { type: 'string', title: 'Placed to' },\n      submit: { type: 'string', title: 'Search' },\n      clear: { type: 'string', title: 'Clear search' },\n      invalidRange: { type: 'string', title: 'Invalid range' },\n    },\n  },\n});\n\nexport type OrderListSearchContentValue = ContentValue<typeof OrderListSearchContent>;\n\nexport type OrderListSearchProps = Readonly<{\n  /** Visible label of the text field. */\n  label?: string;\n  fromLabel?: string;\n  toLabel?: string;\n  submitLabel?: string;\n  clearLabel?: string;\n  /** Shown when the from day is after the to day. */\n  invalidRangeMessage?: string;\n  /** Injected by the compiler from the page content entry. */\n  $content?: OrderListSearchContentValue;\n  className?: string;\n  ref?: Ref<HTMLFormElement>;\n}>;\n\ntype Fields = {\n  term: string;\n  from: string;\n  to: string;\n};\n\nconst DAY = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\nconst INSTANT = /^(\\d{4})-(\\d{2})-(\\d{2})T\\d{2}:\\d{2}:\\d{2}(?:\\.\\d+)?(?:Z|[+-]\\d{2}:\\d{2})$/;\n\nconst DEFAULTS = {\n  label: 'Order number',\n  from: 'Placed from',\n  to: 'Placed to',\n  submit: 'Search',\n  clear: 'Clear search',\n  invalidRange: 'The start date is after the end date.',\n} as const;\n\nexport const OrderListSearchDefinition = defineComponent<OrderListSearchProps>({\n  name: 'OrderListSearch',\n  importPath: '@vtex/faststore/components',\n  component: OrderListSearch,\n  content: OrderListSearchContent,\n  editor: { label: 'Order List Search', category: 'action' },\n  schema: {\n    label: { type: 'string', default: 'Order number', label: 'Order number' },\n    fromLabel: { type: 'string', default: 'Placed from', label: 'Placed from' },\n    toLabel: { type: 'string', default: 'Placed to', label: 'Placed to' },\n    submitLabel: { type: 'string', default: 'Search', label: 'Search' },\n    clearLabel: { type: 'string', default: 'Clear search', label: 'Clear search' },\n    invalidRangeMessage: {\n      type: 'string',\n      default: 'The start date is after the end date.',\n      label: 'Invalid range',\n    },\n  },\n  guideline:\n    'A text field and a placed-date range that write search, placedFrom, and placedTo, keep the current view, and drop the cursor. An inverted range is not written.',\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 calendarDay(value: string | null): string {\n  if (value == null) {\n    return '';\n  }\n  const trimmed = value.trim();\n  const match = INSTANT.exec(trimmed);\n  if (!match) {\n    return '';\n  }\n  const year = Number(match[1]);\n  const monthIndex = Number(match[2]) - 1;\n  const utcDay = Number(match[3]);\n  const probe = new Date(Date.UTC(year, monthIndex, utcDay));\n  if (probe.getUTCFullYear() !== year || probe.getUTCMonth() !== monthIndex || probe.getUTCDate() !== utcDay) {\n    return '';\n  }\n  const date = new Date(trimmed);\n  if (Number.isNaN(date.getTime())) {\n    return '';\n  }\n  const month = String(date.getMonth() + 1).padStart(2, '0');\n  const day = String(date.getDate()).padStart(2, '0');\n  return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction dayParts(day: string): { year: number; month: number; date: number } | null {\n  const match = DAY.exec(day);\n  if (!match) {\n    return null;\n  }\n  const year = Number(match[1]);\n  const month = Number(match[2]);\n  const date = Number(match[3]);\n  const probe = new Date(year, month - 1, date);\n  if (probe.getFullYear() !== year || probe.getMonth() !== month - 1 || probe.getDate() !== date) {\n    return null;\n  }\n  return { year, month, date };\n}\n\nfunction instant(day: string, end: boolean): string | null {\n  const parts = dayParts(day);\n  if (!parts) {\n    return null;\n  }\n  const date = end\n    ? new Date(parts.year, parts.month - 1, parts.date, 23, 59, 59, 0)\n    : new Date(parts.year, parts.month - 1, parts.date, 0, 0, 0, 0);\n  return date.toISOString();\n}\n\nfunction inverted(from: string, to: string): boolean {\n  if (!dayParts(from) || !dayParts(to)) {\n    return false;\n  }\n  return from > to;\n}\n\nfunction submitHref(route: CurrentRoute, current: URLSearchParams, fields: Fields): PageRef | string | null {\n  if (inverted(fields.from, fields.to)) {\n    return null;\n  }\n  const next = new URLSearchParams(current);\n  next.delete('search');\n  next.delete('placedFrom');\n  next.delete('placedTo');\n  next.delete('after');\n  const term = fields.term.trim();\n  if (term.length > 0) {\n    next.set('search', term);\n  }\n  const from = instant(fields.from, false);\n  const to = instant(fields.to, true);\n  if (from) {\n    next.set('placedFrom', from);\n  }\n  if (to) {\n    next.set('placedTo', to);\n  }\n  return currentPageWith(route, next);\n}\n\nfunction clearHref(route: CurrentRoute, current: URLSearchParams): PageRef | string {\n  const next = new URLSearchParams(current);\n  next.delete('search');\n  next.delete('placedFrom');\n  next.delete('placedTo');\n  next.delete('after');\n  return currentPageWith(route, next);\n}\n\nconst CRITERIA = ['search', 'placedFrom', 'placedTo'] as const;\n\nfunction applied(params: URLSearchParams): boolean {\n  return CRITERIA.some((key) => (params.get(key) ?? '').trim().length > 0);\n}\n\nfunction criteriaKey(params: URLSearchParams): string {\n  const next = new URLSearchParams();\n  for (const key of CRITERIA) {\n    const value = params.get(key);\n    if (value != null) {\n      next.set(key, value);\n    }\n  }\n  return next.toString();\n}\n\nfunction readFields(params: URLSearchParams): Fields {\n  return {\n    term: params.get('search') ?? '',\n    from: calendarDay(params.get('placedFrom')),\n    to: calendarDay(params.get('placedTo')),\n  };\n}\n\nexport function OrderListSearch({\n  label,\n  fromLabel,\n  toLabel,\n  submitLabel,\n  clearLabel,\n  invalidRangeMessage,\n  $content,\n  className,\n  ref,\n}: OrderListSearchProps) {\n  const route = useStorefrontRoute();\n  const searchParams = useStorefrontSearchParams();\n  const { push } = useStorefrontNavigation();\n  const messageId = useId();\n  const criteria = criteriaKey(searchParams);\n  const [fields, setFields] = useState(() => readFields(searchParams));\n  const [seenCriteria, setSeenCriteria] = useState(criteria);\n  if (criteria !== seenCriteria) {\n    setSeenCriteria(criteria);\n    setFields(readFields(searchParams));\n  }\n\n  const texts = {\n    label: resolveText($content?.label, label, DEFAULTS.label),\n    from: resolveText($content?.from, fromLabel, DEFAULTS.from),\n    to: resolveText($content?.to, toLabel, DEFAULTS.to),\n    submit: resolveText($content?.submit, submitLabel, DEFAULTS.submit),\n    clear: resolveText($content?.clear, clearLabel, DEFAULTS.clear),\n    invalidRange: resolveText($content?.invalidRange, invalidRangeMessage, DEFAULTS.invalidRange),\n  };\n  const rangeInvalid = inverted(fields.from, fields.to);\n  const showClear = applied(searchParams);\n\n  function onSubmit(event: SubmitEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const href = submitHref(route, searchParams, fields);\n    if (!href) {\n      return;\n    }\n    push(href);\n  }\n\n  return (\n    <form\n      ref={ref}\n      className={className}\n      data-fs-order-list-search=\"\"\n      data-fs-order-list-search-invalid={rangeInvalid ? '' : undefined}\n      onSubmit={onSubmit}\n    >\n      <Field.Root>\n        <Field.Label>{texts.label}</Field.Label>\n        <Input\n          type=\"text\"\n          value={fields.term}\n          data-fs-order-list-search-term=\"\"\n          onChange={(event) => {\n            const term = event.target.value;\n            setFields((current) => ({ ...current, term }));\n          }}\n        />\n      </Field.Root>\n      <Field.Root invalid={rangeInvalid}>\n        <Field.Label>{texts.from}</Field.Label>\n        <Input\n          type=\"date\"\n          value={fields.from}\n          aria-invalid={rangeInvalid || undefined}\n          aria-describedby={rangeInvalid ? messageId : undefined}\n          data-fs-order-list-search-from=\"\"\n          onChange={(event) => {\n            const from = event.target.value;\n            setFields((current) => ({ ...current, from }));\n          }}\n        />\n      </Field.Root>\n      <Field.Root invalid={rangeInvalid}>\n        <Field.Label>{texts.to}</Field.Label>\n        <Input\n          type=\"date\"\n          value={fields.to}\n          aria-invalid={rangeInvalid || undefined}\n          aria-describedby={rangeInvalid ? messageId : undefined}\n          data-fs-order-list-search-to=\"\"\n          onChange={(event) => {\n            const to = event.target.value;\n            setFields((current) => ({ ...current, to }));\n          }}\n        />\n      </Field.Root>\n      {rangeInvalid ? <p id={messageId}>{texts.invalidRange}</p> : null}\n      <Button type=\"submit\">{texts.submit}</Button>\n      {showClear ? (\n        <StorefrontLink href={clearHref(route, searchParams)} data-fs-order-list-search-clear=\"\">\n          {texts.clear}\n        </StorefrontLink>\n      ) : null}\n    </form>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-list-search.js","names":[],"sources":["../../../src/matter/order-list-search/order-list-search.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport { type Ref, type SubmitEvent, useId, useState } from 'react';\nimport { Button } from '../../particles/button/button.js';\nimport { Field } from '../../particles/field/field.js';\nimport { Input } from '../../particles/input/input.js';\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 { useStorefrontNavigation } from '../../sdk/navigation/use-storefront-navigation.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { useStorefrontSearchParams } from '../../sdk/navigation/use-storefront-search-params.js';\n\nexport const OrderListSearchContent = defineContentType({\n  id: 'order-list-search',\n  title: 'Order List Search',\n  description: 'The order-number label, the placed-date labels, and the invalid-range message.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Order number', format: 'icu-message', messageSource: 'Order number' },\n      from: { type: 'string', title: 'Placed from', format: 'icu-message', messageSource: 'Placed from' },\n      to: { type: 'string', title: 'Placed to', format: 'icu-message', messageSource: 'Placed to' },\n      submit: { type: 'string', title: 'Search', format: 'icu-message', messageSource: 'Search' },\n      clear: { type: 'string', title: 'Clear search', format: 'icu-message', messageSource: 'Clear search' },\n      invalidRange: {\n        type: 'string',\n        title: 'Invalid range',\n        description: 'Shown when the from day is after the to day.',\n        format: 'icu-message',\n        messageSource: 'The start date is after the end date.',\n      },\n    },\n  },\n});\n\nexport type OrderListSearchContentValue = ContentValue<typeof OrderListSearchContent>;\n\nexport type OrderListSearchProps = MessageLocaleProp &\n  Readonly<{\n    /** The field labels, the button labels and the invalid-range message. */\n    $content?: OrderListSearchContentValue;\n    className?: string;\n    ref?: Ref<HTMLFormElement>;\n  }>;\n\ntype Fields = {\n  term: string;\n  from: string;\n  to: string;\n};\n\nconst DAY = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\nconst INSTANT = /^(\\d{4})-(\\d{2})-(\\d{2})T\\d{2}:\\d{2}:\\d{2}(?:\\.\\d+)?(?:Z|[+-]\\d{2}:\\d{2})$/;\n\nexport const OrderListSearchDefinition = defineComponent<OrderListSearchProps>({\n  name: 'OrderListSearch',\n  importPath: '@vtex/faststore/components',\n  component: OrderListSearch,\n  content: OrderListSearchContent,\n  editor: { label: 'Order List Search', category: 'action' },\n  schema: {},\n  guideline:\n    'A text field and a placed-date range that write search, placedFrom, and placedTo, keep the current view, and drop the cursor. An inverted range is not written. Its copy is the $content fields label, from, to, submit, clear and invalidRange.',\n});\n\nfunction calendarDay(value: string | null): string {\n  if (value == null) {\n    return '';\n  }\n  const trimmed = value.trim();\n  const match = INSTANT.exec(trimmed);\n  if (!match) {\n    return '';\n  }\n  const year = Number(match[1]);\n  const monthIndex = Number(match[2]) - 1;\n  const utcDay = Number(match[3]);\n  const probe = new Date(Date.UTC(year, monthIndex, utcDay));\n  if (probe.getUTCFullYear() !== year || probe.getUTCMonth() !== monthIndex || probe.getUTCDate() !== utcDay) {\n    return '';\n  }\n  const date = new Date(trimmed);\n  if (Number.isNaN(date.getTime())) {\n    return '';\n  }\n  const month = String(date.getMonth() + 1).padStart(2, '0');\n  const day = String(date.getDate()).padStart(2, '0');\n  return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction dayParts(day: string): { year: number; month: number; date: number } | null {\n  const match = DAY.exec(day);\n  if (!match) {\n    return null;\n  }\n  const year = Number(match[1]);\n  const month = Number(match[2]);\n  const date = Number(match[3]);\n  const probe = new Date(year, month - 1, date);\n  if (probe.getFullYear() !== year || probe.getMonth() !== month - 1 || probe.getDate() !== date) {\n    return null;\n  }\n  return { year, month, date };\n}\n\nfunction instant(day: string, end: boolean): string | null {\n  const parts = dayParts(day);\n  if (!parts) {\n    return null;\n  }\n  const date = end\n    ? new Date(parts.year, parts.month - 1, parts.date, 23, 59, 59, 0)\n    : new Date(parts.year, parts.month - 1, parts.date, 0, 0, 0, 0);\n  return date.toISOString();\n}\n\nfunction inverted(from: string, to: string): boolean {\n  if (!dayParts(from) || !dayParts(to)) {\n    return false;\n  }\n  return from > to;\n}\n\nfunction submitHref(route: CurrentRoute, current: URLSearchParams, fields: Fields): PageRef | string | null {\n  if (inverted(fields.from, fields.to)) {\n    return null;\n  }\n  const next = new URLSearchParams(current);\n  next.delete('search');\n  next.delete('placedFrom');\n  next.delete('placedTo');\n  next.delete('after');\n  const term = fields.term.trim();\n  if (term.length > 0) {\n    next.set('search', term);\n  }\n  const from = instant(fields.from, false);\n  const to = instant(fields.to, true);\n  if (from) {\n    next.set('placedFrom', from);\n  }\n  if (to) {\n    next.set('placedTo', to);\n  }\n  return currentPageWith(route, next);\n}\n\nfunction clearHref(route: CurrentRoute, current: URLSearchParams): PageRef | string {\n  const next = new URLSearchParams(current);\n  next.delete('search');\n  next.delete('placedFrom');\n  next.delete('placedTo');\n  next.delete('after');\n  return currentPageWith(route, next);\n}\n\nconst CRITERIA = ['search', 'placedFrom', 'placedTo'] as const;\n\nfunction applied(params: URLSearchParams): boolean {\n  return CRITERIA.some((key) => (params.get(key) ?? '').trim().length > 0);\n}\n\nfunction criteriaKey(params: URLSearchParams): string {\n  const next = new URLSearchParams();\n  for (const key of CRITERIA) {\n    const value = params.get(key);\n    if (value != null) {\n      next.set(key, value);\n    }\n  }\n  return next.toString();\n}\n\nfunction readFields(params: URLSearchParams): Fields {\n  return {\n    term: params.get('search') ?? '',\n    from: calendarDay(params.get('placedFrom')),\n    to: calendarDay(params.get('placedTo')),\n  };\n}\n\nexport function OrderListSearch({ $content, $locale, className, ref }: OrderListSearchProps) {\n  const route = useStorefrontRoute();\n  const searchParams = useStorefrontSearchParams();\n  const { push } = useStorefrontNavigation();\n  const messageId = useId();\n  const criteria = criteriaKey(searchParams);\n  const [fields, setFields] = useState(() => readFields(searchParams));\n  const [seenCriteria, setSeenCriteria] = useState(criteria);\n  if (criteria !== seenCriteria) {\n    setSeenCriteria(criteria);\n    setFields(readFields(searchParams));\n  }\n\n  const { format } = useMessageFormatter(OrderListSearchContent, $content);\n  const rangeInvalid = inverted(fields.from, fields.to);\n  const showClear = applied(searchParams);\n\n  function onSubmit(event: SubmitEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const href = submitHref(route, searchParams, fields);\n    if (!href) {\n      return;\n    }\n    push(href);\n  }\n\n  return (\n    <form\n      ref={ref}\n      className={className}\n      data-fs-order-list-search=\"\"\n      data-fs-order-list-search-invalid={rangeInvalid ? '' : undefined}\n      onSubmit={onSubmit}\n    >\n      <Field.Root>\n        <Field.Label>{format('label')}</Field.Label>\n        <Input\n          type=\"text\"\n          value={fields.term}\n          data-fs-order-list-search-term=\"\"\n          onChange={(event) => {\n            const term = event.target.value;\n            setFields((current) => ({ ...current, term }));\n          }}\n        />\n      </Field.Root>\n      <Field.Root invalid={rangeInvalid}>\n        <Field.Label>{format('from')}</Field.Label>\n        <Input\n          type=\"date\"\n          value={fields.from}\n          aria-invalid={rangeInvalid || undefined}\n          aria-describedby={rangeInvalid ? messageId : undefined}\n          data-fs-order-list-search-from=\"\"\n          onChange={(event) => {\n            const from = event.target.value;\n            setFields((current) => ({ ...current, from }));\n          }}\n        />\n      </Field.Root>\n      <Field.Root invalid={rangeInvalid}>\n        <Field.Label>{format('to')}</Field.Label>\n        <Input\n          type=\"date\"\n          value={fields.to}\n          aria-invalid={rangeInvalid || undefined}\n          aria-describedby={rangeInvalid ? messageId : undefined}\n          data-fs-order-list-search-to=\"\"\n          onChange={(event) => {\n            const to = event.target.value;\n            setFields((current) => ({ ...current, to }));\n          }}\n        />\n      </Field.Root>\n      {rangeInvalid ? <p id={messageId}>{format('invalidRange')}</p> : null}\n      <Button type=\"submit\">{format('submit')}</Button>\n      {showClear ? (\n        <StorefrontLink href={clearHref(route, searchParams)} data-fs-order-list-search-clear=\"\">\n          {format('clear')}\n        </StorefrontLink>\n      ) : null}\n    </form>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-list-views/order-list-views.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 { Ref } from "react";
@@ -14,52 +14,45 @@ export declare const OrderListViewsContent: {
       readonly label: {
         readonly type: "string";
         readonly title: "Accessible name";
+        readonly format: "icu-message";
+        readonly messageSource: "Order views";
       };
       readonly all: {
         readonly type: "string";
         readonly title: "All orders";
+        readonly format: "icu-message";
+        readonly messageSource: "All orders";
       };
       readonly ongoing: {
         readonly type: "string";
         readonly title: "Ongoing";
+        readonly format: "icu-message";
+        readonly messageSource: "Ongoing";
       };
       readonly completed: {
         readonly type: "string";
         readonly title: "Completed";
+        readonly format: "icu-message";
+        readonly messageSource: "Completed";
       };
       readonly cancelled: {
         readonly type: "string";
         readonly title: "Cancelled";
+        readonly format: "icu-message";
+        readonly messageSource: "Cancelled";
       };
     };
   };
 };
 export type OrderListView = 'all' | 'ongoing' | 'completed' | 'cancelled';
 export type OrderListViewsContentValue = ContentValue<typeof OrderListViewsContent>;
-export type OrderListViewsProps = Readonly<{
-  /** Accessible name of the navigation landmark. */
-  label?: string;
-  allLabel?: string;
-  ongoingLabel?: string;
-  completedLabel?: string;
-  cancelledLabel?: string;
-  /** Injected by the compiler from the page content entry. */
+export type OrderListViewsProps = MessageLocaleProp & Readonly<{
+  /** The accessible name of the landmark and the four view names. */
   $content?: OrderListViewsContentValue;
   className?: string;
   ref?: Ref<HTMLElement>;
 }>;
-export declare const OrderListViewsDefinition: ComponentDefinition<Readonly<{
-  /** Accessible name of the navigation landmark. */
-  label?: string;
-  allLabel?: string;
-  ongoingLabel?: string;
-  completedLabel?: string;
-  cancelledLabel?: string;
-  /** Injected by the compiler from the page content entry. */
-  $content?: OrderListViewsContentValue;
-  className?: string;
-  ref?: Ref<HTMLElement>;
-}>>;
-export declare function OrderListViews({ label, allLabel, ongoingLabel, completedLabel, cancelledLabel, $content, className, ref }: OrderListViewsProps): import("react/jsx-runtime").JSX.Element;
+export declare const OrderListViewsDefinition: ComponentDefinition<OrderListViewsProps>;
+export declare function OrderListViews({ $content, $locale, className, ref }: OrderListViewsProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=order-list-views.d.ts.map

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

@@ -2,6 +2,7 @@
 import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { StorefrontLink } from "../../sdk/navigation/storefront-link.js";
 import { useStorefrontRoute } from "../../sdk/navigation/use-storefront-route.js";
 import { useStorefrontSearchParams } from "../../sdk/navigation/use-storefront-search-params.js";
@@ -18,23 +19,33 @@ const OrderListViewsContent = defineContentType({
 		properties: {
 			label: {
 				type: "string",
-				title: "Accessible name"
+				title: "Accessible name",
+				format: "icu-message",
+				messageSource: "Order views"
 			},
 			all: {
 				type: "string",
-				title: "All orders"
+				title: "All orders",
+				format: "icu-message",
+				messageSource: "All orders"
 			},
 			ongoing: {
 				type: "string",
-				title: "Ongoing"
+				title: "Ongoing",
+				format: "icu-message",
+				messageSource: "Ongoing"
 			},
 			completed: {
 				type: "string",
-				title: "Completed"
+				title: "Completed",
+				format: "icu-message",
+				messageSource: "Completed"
 			},
 			cancelled: {
 				type: "string",
-				title: "Cancelled"
+				title: "Cancelled",
+				format: "icu-message",
+				messageSource: "Cancelled"
 			}
 		}
 	}
@@ -45,13 +56,6 @@ const CHOICES = [
 	"completed",
 	"cancelled"
 ];
-const DEFAULT_GROUP_LABEL = "Order views";
-const DEFAULT_LABELS = {
-	all: "All orders",
-	ongoing: "Ongoing",
-	completed: "Completed",
-	cancelled: "Cancelled"
-};
 const OrderListViewsDefinition = defineComponent({
 	name: "OrderListViews",
 	importPath: "@vtex/faststore/components",
@@ -61,50 +65,9 @@ const OrderListViewsDefinition = defineComponent({
 		label: "Order List Views",
 		category: "navigation"
 	},
-	schema: {
-		label: {
-			type: "string",
-			default: "Order views",
-			label: "Accessible name"
-		},
-		allLabel: {
-			type: "string",
-			default: "All orders",
-			label: "All orders"
-		},
-		ongoingLabel: {
-			type: "string",
-			default: "Ongoing",
-			label: "Ongoing"
-		},
-		completedLabel: {
-			type: "string",
-			default: "Completed",
-			label: "Completed"
-		},
-		cancelledLabel: {
-			type: "string",
-			default: "Cancelled",
-			label: "Cancelled"
-		}
-	},
-	guideline: "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."
+	schema: {},
+	guideline: "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."
 });
-function resolveText(content, prop, fallback) {
-	const fromContent = content?.trim();
-	if (fromContent) return fromContent;
-	const fromProp = prop?.trim();
-	if (fromProp) return fromProp;
-	return fallback;
-}
-function authoredLabel(view, props) {
-	switch (view) {
-		case "all": return props.allLabel;
-		case "ongoing": return props.ongoingLabel;
-		case "completed": return props.completedLabel;
-		case "cancelled": return props.cancelledLabel;
-	}
-}
 function currentView(value) {
 	if (value === "ongoing" || value === "completed" || value === "cancelled") return value;
 	return "all";
@@ -116,34 +79,25 @@ function choiceHref(route, searchParams, view) {
 	if (view !== "all") next.set("view", view);
 	return currentPageWith(route, next);
 }
-function OrderListViews({ label, allLabel, ongoingLabel, completedLabel, cancelledLabel, $content, className, ref }) {
+function OrderListViews({ $content, $locale, className, ref }) {
 	const route = useStorefrontRoute();
 	const searchParams = useStorefrontSearchParams();
+	const { format } = useMessageFormatter(OrderListViewsContent, $content);
 	const current = currentView(searchParams.get("view"));
-	const props = {
-		label,
-		allLabel,
-		ongoingLabel,
-		completedLabel,
-		cancelledLabel,
-		$content
-	};
-	const groupLabel = resolveText($content?.label, label, DEFAULT_GROUP_LABEL);
 	return /* @__PURE__ */ jsx("nav", {
 		ref,
-		"aria-label": groupLabel,
+		"aria-label": format("label"),
 		className,
 		"data-fs-order-list-views": "",
 		"data-fs-order-list-views-current": current,
 		children: CHOICES.map((view) => {
-			const text = resolveText($content?.[view], authoredLabel(view, props), DEFAULT_LABELS[view]);
 			const selected = view === current;
 			return /* @__PURE__ */ jsx(StorefrontLink, {
 				href: choiceHref(route, searchParams, view),
 				"aria-current": selected ? "page" : void 0,
 				"data-fs-order-list-views-choice": view,
 				"data-fs-order-list-views-choice-current": selected ? "" : void 0,
-				children: text
+				children: format(view)
 			}, view);
 		})
 	});