@vtex/faststore 0.0.8 → 0.0.11

package/dist/matter/order-details-header/order-details-header.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 { OrderCompletionData } from "../../sdk/orders/completion-badge.js";
@@ -15,58 +15,86 @@ export declare const OrderDetailsHeaderContent: {
       readonly prefix: {
         readonly type: "string";
         readonly title: "Prefix";
+        readonly format: "icu-message";
+        readonly messageSource: "Order #";
       };
       readonly copyLabel: {
         readonly type: "string";
         readonly title: "Copy label";
+        readonly format: "icu-message";
+        readonly messageSource: "Copy";
       };
       readonly copyAccessibleName: {
         readonly type: "string";
         readonly title: "Copy accessible name";
+        readonly format: "icu-message";
+        readonly messageSource: "Copy order number";
       };
       readonly copyCopied: {
         readonly type: "string";
         readonly title: "Copied";
+        readonly format: "icu-message";
+        readonly messageSource: "Copied";
       };
       readonly copyFailure: {
         readonly type: "string";
         readonly title: "Copy failure";
+        readonly format: "icu-message";
+        readonly messageSource: "Could not copy";
       };
       readonly copyDismiss: {
         readonly type: "string";
         readonly title: "Dismiss copy";
+        readonly format: "icu-message";
+        readonly messageSource: "Dismiss";
       };
       readonly statusInProgress: {
         readonly type: "string";
         readonly title: "In progress";
+        readonly format: "icu-message";
+        readonly messageSource: "In progress";
       };
       readonly statusCancellationRequested: {
         readonly type: "string";
         readonly title: "Cancellation requested";
+        readonly format: "icu-message";
+        readonly messageSource: "Cancellation requested";
       };
       readonly statusCancelled: {
         readonly type: "string";
         readonly title: "Cancelled";
+        readonly format: "icu-message";
+        readonly messageSource: "Canceled";
       };
       readonly statusDelivered: {
         readonly type: "string";
         readonly title: "Delivered";
+        readonly format: "icu-message";
+        readonly messageSource: "Delivered";
       };
       readonly statusShipped: {
         readonly type: "string";
         readonly title: "Shipped";
+        readonly format: "icu-message";
+        readonly messageSource: "Shipped";
       };
       readonly statusReadyForPickup: {
         readonly type: "string";
         readonly title: "Ready for pickup";
+        readonly format: "icu-message";
+        readonly messageSource: "Ready for pickup";
       };
       readonly statusCollected: {
         readonly type: "string";
         readonly title: "Collected";
+        readonly format: "icu-message";
+        readonly messageSource: "Collected";
       };
       readonly statusPlaceholder: {
         readonly type: "string";
         readonly title: "Status unavailable";
+        readonly format: "icu-message";
+        readonly messageSource: "Status unavailable";
       };
     };
   };
@@ -80,25 +108,14 @@ export type OrderDetailsHeaderData = {
   orderNumber: string;
   completion: OrderCompletionData;
 } | null;
-export type OrderDetailsHeaderProps = Readonly<{
+export type OrderDetailsHeaderProps = MessageLocaleProp & Readonly<{
   $data?: OrderDetailsHeaderData | null;
   $content?: OrderDetailsHeaderContentValue;
-  prefix?: string;
-  copyLabel?: string;
-  copyAccessibleName?: string;
   className?: string;
   ref?: Ref<HTMLElement>;
 }>;
-export declare const OrderDetailsHeaderDefinition: ComponentDefinition<Readonly<{
-  $data?: OrderDetailsHeaderData | null;
-  $content?: OrderDetailsHeaderContentValue;
-  prefix?: string;
-  copyLabel?: string;
-  copyAccessibleName?: string;
-  className?: string;
-  ref?: Ref<HTMLElement>;
-}>>;
+export declare const OrderDetailsHeaderDefinition: ComponentDefinition<OrderDetailsHeaderProps>;
 export declare function OrderDetailsHeaderSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
-export declare function OrderDetailsHeader({ $data, $content, prefix, copyLabel, copyAccessibleName, className, ref }: OrderDetailsHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function OrderDetailsHeader({ $data, $content, className, ref }: OrderDetailsHeaderProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion
 //# sourceMappingURL=order-details-header.d.ts.map

package/dist/matter/order-details-header/order-details-header.js

@@ -2,7 +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 { useIntl } from "../../sdk/i18n/client.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
 import { CopyText } from "../../particles/copy-text/copy-text.js";
 import { OrderStatusBadge } from "../../particles/order-status-badge/order-status-badge.js";
 import { completionBadgeModel } from "../../sdk/orders/completion-badge.js";
@@ -29,59 +29,87 @@ const OrderDetailsHeaderContent = defineContentType({
 		properties: {
 			prefix: {
 				type: "string",
-				title: "Prefix"
+				title: "Prefix",
+				format: "icu-message",
+				messageSource: "Order #"
 			},
 			copyLabel: {
 				type: "string",
-				title: "Copy label"
+				title: "Copy label",
+				format: "icu-message",
+				messageSource: "Copy"
 			},
 			copyAccessibleName: {
 				type: "string",
-				title: "Copy accessible name"
+				title: "Copy accessible name",
+				format: "icu-message",
+				messageSource: "Copy order number"
 			},
 			copyCopied: {
 				type: "string",
-				title: "Copied"
+				title: "Copied",
+				format: "icu-message",
+				messageSource: "Copied"
 			},
 			copyFailure: {
 				type: "string",
-				title: "Copy failure"
+				title: "Copy failure",
+				format: "icu-message",
+				messageSource: "Could not copy"
 			},
 			copyDismiss: {
 				type: "string",
-				title: "Dismiss copy"
+				title: "Dismiss copy",
+				format: "icu-message",
+				messageSource: "Dismiss"
 			},
 			statusInProgress: {
 				type: "string",
-				title: "In progress"
+				title: "In progress",
+				format: "icu-message",
+				messageSource: "In progress"
 			},
 			statusCancellationRequested: {
 				type: "string",
-				title: "Cancellation requested"
+				title: "Cancellation requested",
+				format: "icu-message",
+				messageSource: "Cancellation requested"
 			},
 			statusCancelled: {
 				type: "string",
-				title: "Cancelled"
+				title: "Cancelled",
+				format: "icu-message",
+				messageSource: "Canceled"
 			},
 			statusDelivered: {
 				type: "string",
-				title: "Delivered"
+				title: "Delivered",
+				format: "icu-message",
+				messageSource: "Delivered"
 			},
 			statusShipped: {
 				type: "string",
-				title: "Shipped"
+				title: "Shipped",
+				format: "icu-message",
+				messageSource: "Shipped"
 			},
 			statusReadyForPickup: {
 				type: "string",
-				title: "Ready for pickup"
+				title: "Ready for pickup",
+				format: "icu-message",
+				messageSource: "Ready for pickup"
 			},
 			statusCollected: {
 				type: "string",
-				title: "Collected"
+				title: "Collected",
+				format: "icu-message",
+				messageSource: "Collected"
 			},
 			statusPlaceholder: {
 				type: "string",
-				title: "Status unavailable"
+				title: "Status unavailable",
+				format: "icu-message",
+				messageSource: "Status unavailable"
 			}
 		}
 	}
@@ -98,38 +126,19 @@ const OrderDetailsHeaderDefinition = defineComponent({
 		label: "Order Details Header",
 		category: "content"
 	},
-	schema: {
-		prefix: {
-			type: "string",
-			default: "Order #",
-			label: "Prefix"
-		},
-		copyLabel: {
-			type: "string",
-			default: "Copy",
-			label: "Copy label"
-		},
-		copyAccessibleName: {
-			type: "string",
-			default: "Copy order number",
-			label: "Copy accessible name"
-		}
-	},
-	guideline: "The top of the order details page: the order number as the page h1 beside a prefix, a copy action bound to the number alone, and the shared status badge. Prefix, copy, and status sentences are content; a blank field keeps the catalogue or the schema prop. Place it once, first on the page; it renders nothing when the read returns no order."
+	schema: {},
+	guideline: "The top of the order details page: the order number as the page h1 beside a prefix, a copy action bound to the number alone, and the shared status badge. Prefix, copy, and status sentences are content. Place it once, first on the page; it renders nothing when the read returns no order."
 });
-function authored(value) {
-	return value?.trim() || void 0;
-}
-function statusMessages(content) {
+function statusMessages({ format }) {
 	return {
-		"in-progress": content?.statusInProgress,
-		"cancellation-requested": content?.statusCancellationRequested,
-		cancelled: content?.statusCancelled,
-		delivered: content?.statusDelivered,
-		shipped: content?.statusShipped,
-		"ready-for-pickup": content?.statusReadyForPickup,
-		collected: content?.statusCollected,
-		placeholder: content?.statusPlaceholder
+		"in-progress": format("statusInProgress"),
+		"cancellation-requested": format("statusCancellationRequested"),
+		cancelled: format("statusCancelled"),
+		delivered: format("statusDelivered"),
+		shipped: format("statusShipped"),
+		"ready-for-pickup": format("statusReadyForPickup"),
+		collected: format("statusCollected"),
+		placeholder: format("statusPlaceholder")
 	};
 }
 function OrderDetailsHeaderSkeleton({ className, ...props }) {
@@ -141,12 +150,11 @@ function OrderDetailsHeaderSkeleton({ className, ...props }) {
 		children: [/* @__PURE__ */ jsx("span", { "data-fs-order-details-header-skeleton-fact": "" }), /* @__PURE__ */ jsx("span", { "data-fs-order-details-header-skeleton-fact": "" })]
 	});
 }
-function OrderDetailsHeader({ $data, $content, prefix, copyLabel, copyAccessibleName, className, ref }) {
-	const intl = useIntl();
+function OrderDetailsHeader({ $data, $content, className, ref }) {
+	const messages = useMessageFormatter(OrderDetailsHeaderContent, $content);
 	if (!$data) return null;
-	const prefixText = authored($content?.prefix) ?? prefix ?? intl.formatMessage({ id: "fs/order.number.prefix" });
-	const label = authored($content?.copyLabel) ?? copyLabel ?? intl.formatMessage({ id: "fs/order.copy.action" });
-	const accessibleName = authored($content?.copyAccessibleName) ?? copyAccessibleName ?? intl.formatMessage({ id: "fs/order.number.copy-name" });
+	const { format } = messages;
+	const prefix = format("prefix");
 	const badge = completionBadgeModel($data.completion);
 	return /* @__PURE__ */ jsxs("header", {
 		ref,
@@ -155,9 +163,9 @@ function OrderDetailsHeader({ $data, $content, prefix, copyLabel, copyAccessible
 		children: [
 			/* @__PURE__ */ jsxs("h1", {
 				"data-fs-order-details-header-heading": "",
-				children: [prefixText ? /* @__PURE__ */ jsx("span", {
+				children: [prefix ? /* @__PURE__ */ jsx("span", {
 					"data-fs-order-details-header-prefix": "",
-					children: prefixText
+					children: prefix
 				}) : null, /* @__PURE__ */ jsx("span", {
 					"data-fs-order-details-header-number": "",
 					children: $data.orderNumber
@@ -167,18 +175,18 @@ function OrderDetailsHeader({ $data, $content, prefix, copyLabel, copyAccessible
 				"data-fs-order-details-header-copy": "",
 				children: /* @__PURE__ */ jsx(CopyText, {
 					text: $data.orderNumber,
-					accessibleName,
-					successMessage: authored($content?.copyCopied),
-					failureMessage: authored($content?.copyFailure),
-					dismissLabel: authored($content?.copyDismiss),
-					children: label
+					accessibleName: format("copyAccessibleName"),
+					successMessage: format("copyCopied"),
+					failureMessage: format("copyFailure"),
+					dismissLabel: format("copyDismiss"),
+					children: format("copyLabel")
 				})
 			}),
 			badge ? /* @__PURE__ */ jsx(OrderStatusBadge, {
 				state: badge.state,
 				tone: badge.tone,
 				label: badge.label,
-				messages: statusMessages($content),
+				messages: statusMessages(messages),
 				"data-fs-order-details-header-status": ""
 			}) : null
 		]

package/dist/matter/order-details-header/order-details-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"order-details-header.js","names":[],"sources":["../../../src/matter/order-details-header/order-details-header.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { CopyText } from '../../particles/copy-text/copy-text.js';\nimport { OrderStatusBadge, type OrderStatusMessages } from '../../particles/order-status-badge/order-status-badge.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport { completionBadgeModel, type OrderCompletionData } from '../../sdk/orders/completion-badge.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderDetailsHeaderData on Query {\n    customerOrder(id: $orderId) {\n      orderNumber\n      completion {\n        view\n        label\n      }\n    }\n  }\n`;\n\nexport const OrderDetailsHeaderContent = defineContentType({\n  id: 'order-details-header',\n  title: 'Order Details Header',\n  description: 'The prefix, the copy action, and the status sentences on the order page.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      prefix: { type: 'string', title: 'Prefix' },\n      copyLabel: { type: 'string', title: 'Copy label' },\n      copyAccessibleName: { type: 'string', title: 'Copy accessible name' },\n      copyCopied: { type: 'string', title: 'Copied' },\n      copyFailure: { type: 'string', title: 'Copy failure' },\n      copyDismiss: { type: 'string', title: 'Dismiss copy' },\n      statusInProgress: { type: 'string', title: 'In progress' },\n      statusCancellationRequested: { type: 'string', title: 'Cancellation requested' },\n      statusCancelled: { type: 'string', title: 'Cancelled' },\n      statusDelivered: { type: 'string', title: 'Delivered' },\n      statusShipped: { type: 'string', title: 'Shipped' },\n      statusReadyForPickup: { type: 'string', title: 'Ready for pickup' },\n      statusCollected: { type: 'string', title: 'Collected' },\n      statusPlaceholder: { type: 'string', title: 'Status unavailable' },\n    },\n  },\n});\n\nexport type OrderDetailsHeaderContentValue = ContentValue<typeof OrderDetailsHeaderContent>;\n\n/**\n * The `customerOrder` root the generator passes as `$data`. A single-root fragment is bound to\n * that field's value, so this is the order itself, or null when the read resolves nothing.\n */\nexport type OrderDetailsHeaderData = {\n  orderNumber: string;\n  completion: OrderCompletionData;\n} | null;\n\nexport type OrderDetailsHeaderProps = Readonly<{\n  $data?: OrderDetailsHeaderData | null;\n  $content?: OrderDetailsHeaderContentValue;\n  prefix?: string;\n  copyLabel?: string;\n  copyAccessibleName?: string;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\nexport const OrderDetailsHeaderDefinition = defineComponent<OrderDetailsHeaderProps>({\n  name: 'OrderDetailsHeader',\n  importPath: '@vtex/faststore/components',\n  component: OrderDetailsHeader,\n  content: OrderDetailsHeaderContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderDetailsHeaderSkeleton,\n  editor: { label: 'Order Details Header', category: 'content' },\n  schema: {\n    prefix: { type: 'string', default: 'Order #', label: 'Prefix' },\n    copyLabel: { type: 'string', default: 'Copy', label: 'Copy label' },\n    copyAccessibleName: { type: 'string', default: 'Copy order number', label: 'Copy accessible name' },\n  },\n  guideline:\n    'The top of the order details page: the order number as the page h1 beside a prefix, a copy action bound to the number alone, and the shared status badge. Prefix, copy, and status sentences are content; a blank field keeps the catalogue or the schema prop. Place it once, first on the page; it renders nothing when the read returns no order.',\n});\n\nfunction authored(value: string | undefined): string | undefined {\n  const trimmed = value?.trim();\n  return trimmed || undefined;\n}\n\nfunction statusMessages(content: OrderDetailsHeaderContentValue | undefined): OrderStatusMessages {\n  return {\n    'in-progress': content?.statusInProgress,\n    'cancellation-requested': content?.statusCancellationRequested,\n    cancelled: content?.statusCancelled,\n    delivered: content?.statusDelivered,\n    shipped: content?.statusShipped,\n    'ready-for-pickup': content?.statusReadyForPickup,\n    collected: content?.statusCollected,\n    placeholder: content?.statusPlaceholder,\n  };\n}\n\nexport function OrderDetailsHeaderSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-details-header-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-details-header-skeleton-fact=\"\" />\n      <span data-fs-order-details-header-skeleton-fact=\"\" />\n    </div>\n  );\n}\n\nexport function OrderDetailsHeader({\n  $data,\n  $content,\n  prefix,\n  copyLabel,\n  copyAccessibleName,\n  className,\n  ref,\n}: OrderDetailsHeaderProps) {\n  const intl = useIntl();\n  if (!$data) {\n    return null;\n  }\n\n  const prefixText = authored($content?.prefix) ?? prefix ?? intl.formatMessage({ id: 'fs/order.number.prefix' });\n  const label = authored($content?.copyLabel) ?? copyLabel ?? intl.formatMessage({ id: 'fs/order.copy.action' });\n  const accessibleName =\n    authored($content?.copyAccessibleName) ??\n    copyAccessibleName ??\n    intl.formatMessage({ id: 'fs/order.number.copy-name' });\n\n  const badge = completionBadgeModel($data.completion);\n\n  return (\n    <header ref={ref} className={className} data-fs-order-details-header=\"\">\n      <h1 data-fs-order-details-header-heading=\"\">\n        {prefixText ? <span data-fs-order-details-header-prefix=\"\">{prefixText}</span> : null}\n        <span data-fs-order-details-header-number=\"\">{$data.orderNumber}</span>\n      </h1>\n      <div data-fs-order-details-header-copy=\"\">\n        <CopyText\n          text={$data.orderNumber}\n          accessibleName={accessibleName}\n          successMessage={authored($content?.copyCopied)}\n          failureMessage={authored($content?.copyFailure)}\n          dismissLabel={authored($content?.copyDismiss)}\n        >\n          {label}\n        </CopyText>\n      </div>\n      {badge ? (\n        <OrderStatusBadge\n          state={badge.state}\n          tone={badge.tone}\n          label={badge.label}\n          messages={statusMessages($content)}\n          data-fs-order-details-header-status=\"\"\n        />\n      ) : null}\n    </header>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-details-header.js","names":[],"sources":["../../../src/matter/order-details-header/order-details-header.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { CopyText } from '../../particles/copy-text/copy-text.js';\nimport { OrderStatusBadge, type OrderStatusMessages } from '../../particles/order-status-badge/order-status-badge.js';\nimport type { MessageFormatter } from '../../sdk/i18n/message-formatter.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { completionBadgeModel, type OrderCompletionData } from '../../sdk/orders/completion-badge.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderDetailsHeaderData on Query {\n    customerOrder(id: $orderId) {\n      orderNumber\n      completion {\n        view\n        label\n      }\n    }\n  }\n`;\n\nexport const OrderDetailsHeaderContent = defineContentType({\n  id: 'order-details-header',\n  title: 'Order Details Header',\n  description: 'The prefix, the copy action, and the status sentences on the order page.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      prefix: { type: 'string', title: 'Prefix', format: 'icu-message', messageSource: 'Order #' },\n      copyLabel: { type: 'string', title: 'Copy label', format: 'icu-message', messageSource: 'Copy' },\n      copyAccessibleName: {\n        type: 'string',\n        title: 'Copy accessible name',\n        format: 'icu-message',\n        messageSource: 'Copy order number',\n      },\n      copyCopied: { type: 'string', title: 'Copied', format: 'icu-message', messageSource: 'Copied' },\n      copyFailure: { type: 'string', title: 'Copy failure', format: 'icu-message', messageSource: 'Could not copy' },\n      copyDismiss: { type: 'string', title: 'Dismiss copy', format: 'icu-message', messageSource: 'Dismiss' },\n      statusInProgress: { type: 'string', title: 'In progress', format: 'icu-message', messageSource: 'In progress' },\n      statusCancellationRequested: {\n        type: 'string',\n        title: 'Cancellation requested',\n        format: 'icu-message',\n        messageSource: 'Cancellation requested',\n      },\n      statusCancelled: { type: 'string', title: 'Cancelled', format: 'icu-message', messageSource: 'Canceled' },\n      statusDelivered: { type: 'string', title: 'Delivered', format: 'icu-message', messageSource: 'Delivered' },\n      statusShipped: { type: 'string', title: 'Shipped', format: 'icu-message', messageSource: 'Shipped' },\n      statusReadyForPickup: {\n        type: 'string',\n        title: 'Ready for pickup',\n        format: 'icu-message',\n        messageSource: 'Ready for pickup',\n      },\n      statusCollected: { type: 'string', title: 'Collected', format: 'icu-message', messageSource: 'Collected' },\n      statusPlaceholder: {\n        type: 'string',\n        title: 'Status unavailable',\n        format: 'icu-message',\n        messageSource: 'Status unavailable',\n      },\n    },\n  },\n});\n\nexport type OrderDetailsHeaderContentValue = ContentValue<typeof OrderDetailsHeaderContent>;\n\n/**\n * The `customerOrder` root the generator passes as `$data`. A single-root fragment is bound to\n * that field's value, so this is the order itself, or null when the read resolves nothing.\n */\nexport type OrderDetailsHeaderData = {\n  orderNumber: string;\n  completion: OrderCompletionData;\n} | null;\n\nexport type OrderDetailsHeaderProps = MessageLocaleProp &\n  Readonly<{\n    $data?: OrderDetailsHeaderData | null;\n    $content?: OrderDetailsHeaderContentValue;\n    className?: string;\n    ref?: Ref<HTMLElement>;\n  }>;\n\nexport const OrderDetailsHeaderDefinition = defineComponent<OrderDetailsHeaderProps>({\n  name: 'OrderDetailsHeader',\n  importPath: '@vtex/faststore/components',\n  component: OrderDetailsHeader,\n  content: OrderDetailsHeaderContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderDetailsHeaderSkeleton,\n  editor: { label: 'Order Details Header', category: 'content' },\n  schema: {},\n  guideline:\n    'The top of the order details page: the order number as the page h1 beside a prefix, a copy action bound to the number alone, and the shared status badge. Prefix, copy, and status sentences are content. Place it once, first on the page; it renders nothing when the read returns no order.',\n});\n\nfunction statusMessages({ format }: MessageFormatter<typeof OrderDetailsHeaderContent>): OrderStatusMessages {\n  return {\n    'in-progress': format('statusInProgress'),\n    'cancellation-requested': format('statusCancellationRequested'),\n    cancelled: format('statusCancelled'),\n    delivered: format('statusDelivered'),\n    shipped: format('statusShipped'),\n    'ready-for-pickup': format('statusReadyForPickup'),\n    collected: format('statusCollected'),\n    placeholder: format('statusPlaceholder'),\n  };\n}\n\nexport function OrderDetailsHeaderSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-details-header-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-details-header-skeleton-fact=\"\" />\n      <span data-fs-order-details-header-skeleton-fact=\"\" />\n    </div>\n  );\n}\n\nexport function OrderDetailsHeader({ $data, $content, className, ref }: OrderDetailsHeaderProps) {\n  const messages = useMessageFormatter(OrderDetailsHeaderContent, $content);\n  if (!$data) {\n    return null;\n  }\n\n  const { format } = messages;\n  const prefix = format('prefix');\n  const badge = completionBadgeModel($data.completion);\n\n  return (\n    <header ref={ref} className={className} data-fs-order-details-header=\"\">\n      <h1 data-fs-order-details-header-heading=\"\">\n        {prefix ? <span data-fs-order-details-header-prefix=\"\">{prefix}</span> : null}\n        <span data-fs-order-details-header-number=\"\">{$data.orderNumber}</span>\n      </h1>\n      <div data-fs-order-details-header-copy=\"\">\n        <CopyText\n          text={$data.orderNumber}\n          accessibleName={format('copyAccessibleName')}\n          successMessage={format('copyCopied')}\n          failureMessage={format('copyFailure')}\n          dismissLabel={format('copyDismiss')}\n        >\n          {format('copyLabel')}\n        </CopyText>\n      </div>\n      {badge ? (\n        <OrderStatusBadge\n          state={badge.state}\n          tone={badge.tone}\n          label={badge.label}\n          messages={statusMessages(messages)}\n          data-fs-order-details-header-status=\"\"\n        />\n      ) : null}\n    </header>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-invoice-download/order-invoice-download.d.ts

@@ -0,0 +1,78 @@
+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";
+//#region src/matter/order-invoice-download/order-invoice-download.d.ts
+export declare const OrderInvoiceDownloadContent: {
+  readonly id: "order-invoice-download";
+  readonly title: "Order Invoice Download";
+  readonly description: "The download control and each invoice entry on the order page.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly downloadLabel: {
+        readonly type: "string";
+        readonly title: "Download label";
+        readonly format: "icu-message";
+        readonly messageSource: "Download invoice";
+      };
+      readonly entryLabel: {
+        readonly type: "string";
+        readonly title: "Entry label";
+        readonly format: "icu-message";
+        readonly messageSource: "Invoice {n} of {total}";
+        readonly messageArguments: {
+          readonly type: "object";
+          readonly properties: {
+            readonly n: {
+              readonly type: "integer";
+            };
+            readonly total: {
+              readonly type: "integer";
+            };
+          };
+        };
+        readonly messageExample: {
+          readonly n: 1;
+          readonly total: 2;
+        };
+      };
+      readonly description: {
+        readonly type: "string";
+        readonly title: "Description";
+        readonly format: "icu-message";
+        readonly messageSource: "This order was invoiced in parts. Choose the invoice to download.";
+      };
+      readonly closeLabel: {
+        readonly type: "string";
+        readonly title: "Close label";
+        readonly format: "icu-message";
+        readonly messageSource: "Close";
+      };
+    };
+  };
+};
+export type OrderInvoiceDownloadContentValue = ContentValue<typeof OrderInvoiceDownloadContent>;
+export type OrderInvoiceDownloadInvoice = {
+  url: string;
+  issuedAt: string | null;
+  kind: 'SALE' | 'RETURN';
+};
+export type OrderInvoiceDownloadData = {
+  progress: {
+    cancelled: boolean;
+  };
+  invoices: OrderInvoiceDownloadInvoice[];
+} | null;
+export type OrderInvoiceDownloadProps = MessageLocaleProp & Readonly<{
+  $data?: OrderInvoiceDownloadData | null;
+  $content?: OrderInvoiceDownloadContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>;
+export declare const OrderInvoiceDownloadDefinition: ComponentDefinition<OrderInvoiceDownloadProps>;
+export declare function OrderInvoiceDownloadSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderInvoiceDownload({ $data, $content, className, ref }: OrderInvoiceDownloadProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-invoice-download.d.ts.map

package/dist/matter/order-invoice-download/order-invoice-download.js

@@ -0,0 +1,173 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { resolveNavigableHref } from "../../utils/safe-href.js";
+import { useMessageFormatter } from "../../sdk/i18n/use-message-formatter.js";
+import { DialogBackdrop, DialogClose, DialogDescription, DialogPopup, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, DialogViewport } from "../../particles/dialog/dialog.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/order-invoice-download/order-invoice-download.tsx
+const fragment = `
+  fragment OrderInvoiceDownloadData on Query {
+    customerOrder(id: $orderId) {
+      progress {
+        cancelled
+      }
+      invoices {
+        url
+        issuedAt
+        kind
+      }
+    }
+  }
+`;
+const OrderInvoiceDownloadContent = defineContentType({
+	id: "order-invoice-download",
+	title: "Order Invoice Download",
+	description: "The download control and each invoice entry on the order page.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			downloadLabel: {
+				type: "string",
+				title: "Download label",
+				format: "icu-message",
+				messageSource: "Download invoice"
+			},
+			entryLabel: {
+				type: "string",
+				title: "Entry label",
+				format: "icu-message",
+				messageSource: "Invoice {n} of {total}",
+				messageArguments: {
+					type: "object",
+					properties: {
+						n: { type: "integer" },
+						total: { type: "integer" }
+					}
+				},
+				messageExample: {
+					n: 1,
+					total: 2
+				}
+			},
+			description: {
+				type: "string",
+				title: "Description",
+				format: "icu-message",
+				messageSource: "This order was invoiced in parts. Choose the invoice to download."
+			},
+			closeLabel: {
+				type: "string",
+				title: "Close label",
+				format: "icu-message",
+				messageSource: "Close"
+			}
+		}
+	}
+});
+const OrderInvoiceDownloadDefinition = defineComponent({
+	name: "OrderInvoiceDownload",
+	importPath: "@vtex/faststore/components",
+	component: OrderInvoiceDownload,
+	content: OrderInvoiceDownloadContent,
+	fragment,
+	fetchStrategy: "static",
+	skeleton: OrderInvoiceDownloadSkeleton,
+	editor: {
+		label: "Order Invoice Download",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Offers every invoice file the order read kept. One file navigates to the merchant address. Several open a dialog that stays open after a choice. Renders nothing when the order is cancelled or no file remains. Labels are content messages. It does not choose its place on the page."
+});
+function openAddress(url) {
+	globalThis.location.assign(url);
+}
+function OrderInvoiceDownloadSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-order-invoice-download-skeleton": "",
+		"aria-hidden": "true"
+	});
+}
+function OrderInvoiceDownload({ $data, $content, className, ref }) {
+	const portalRoot = useRef(null);
+	const messages = useMessageFormatter(OrderInvoiceDownloadContent, $content);
+	function setRoot(node) {
+		portalRoot.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	}
+	if (!$data || $data.progress.cancelled || $data.invoices.length === 0) return null;
+	const downloadLabel = messages.format("downloadLabel");
+	const description = messages.format("description");
+	const closeLabel = messages.format("closeLabel");
+	const invoices = $data.invoices.flatMap((invoice) => {
+		const destination = resolveNavigableHref(invoice.url);
+		return destination.safe ? [{
+			...invoice,
+			url: destination.href
+		}] : [];
+	});
+	if (invoices.length === 0) return null;
+	const [only] = invoices;
+	if (invoices.length === 1 && only) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className,
+		"data-fs-order-invoice-download": "",
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-fs-order-invoice-download-control": "",
+			onClick: () => openAddress(only.url),
+			children: downloadLabel
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRoot,
+		className,
+		"data-fs-order-invoice-download": "",
+		children: /* @__PURE__ */ jsxs(DialogRoot, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
+			"data-fs-order-invoice-download-control": "",
+			children: downloadLabel
+		}), /* @__PURE__ */ jsxs(DialogPortal, {
+			container: portalRoot,
+			children: [/* @__PURE__ */ jsx(DialogBackdrop, {}), /* @__PURE__ */ jsx(DialogViewport, { children: /* @__PURE__ */ jsxs(DialogPopup, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					"data-fs-order-invoice-download-header": "",
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: downloadLabel }), /* @__PURE__ */ jsx(DialogClose, {
+						"aria-label": closeLabel,
+						children: /* @__PURE__ */ jsx("span", {
+							"data-fs-order-invoice-download-dismiss": "",
+							"aria-hidden": "true",
+							children: "×"
+						})
+					})]
+				}),
+				/* @__PURE__ */ jsx(DialogDescription, { children: description }),
+				/* @__PURE__ */ jsx("ul", {
+					"data-fs-order-invoice-download-list": "",
+					children: invoices.map((invoice, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"data-fs-order-invoice-download-entry": "",
+						onClick: () => openAddress(invoice.url),
+						children: messages.format("entryLabel", {
+							n: index + 1,
+							total: invoices.length
+						})
+					}) }, `${invoice.url}:${index}`))
+				})
+			] }) })]
+		})] })
+	});
+}
+//#endregion
+export { OrderInvoiceDownload, OrderInvoiceDownloadContent, OrderInvoiceDownloadDefinition, OrderInvoiceDownloadSkeleton };
+
+//# sourceMappingURL=order-invoice-download.js.map