@vtex/faststore 0.0.10 → 0.0.11

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

@@ -1 +1 @@
-{"version":3,"file":"order-progress.js","names":[],"sources":["../../../src/matter/order-progress/order-progress.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderProgressData on Query {\n    customerOrder(id: $orderId) {\n      id\n      completion {\n        view\n        label\n      }\n      progress {\n        stage\n        paymentFailed\n        cancelled\n      }\n    }\n  }\n`;\n\nexport const OrderProgressContent = defineContentType({\n  id: 'order-progress',\n  title: 'Order Progress',\n  description: 'The stage names, the state sentences, and the accessible name of the progress list.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name' },\n      placed: { type: 'string', title: 'Order placed' },\n      payment: { type: 'string', title: 'Payment' },\n      processing: { type: 'string', title: 'Processing' },\n      shipping: { type: 'string', title: 'Shipping' },\n      stateDone: { type: 'string', title: 'Completed' },\n      stateCurrent: { type: 'string', title: 'In progress' },\n      statePending: { type: 'string', title: 'Not started' },\n    },\n  },\n});\n\nexport type OrderProgressContentValue = ContentValue<typeof OrderProgressContent>;\n\nexport type OrderProgressStage = 'placed' | 'payment' | 'processing' | 'shipping';\n\nexport type OrderProgressStageState = 'done' | 'current' | 'failed' | 'not-applicable' | 'pending';\n\nexport type OrderProgressLineState = 'done' | 'pending' | 'not-applicable';\n\nexport type OrderProgressOrder = {\n  id: string;\n  completion: { view: string; label: string };\n  progress: { stage: string; paymentFailed: boolean; cancelled: boolean };\n};\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 OrderProgressData = OrderProgressOrder | null;\n\nexport type OrderProgressProps = Readonly<{\n  $data?: OrderProgressData | null;\n  $content?: OrderProgressContentValue;\n  className?: string;\n  ref?: Ref<HTMLOListElement>;\n}>;\n\nconst STAGES = ['placed', 'payment', 'processing', 'shipping'] as const satisfies readonly OrderProgressStage[];\n\nconst STAGE_LABELS: Record<OrderProgressStage, MessageId> = {\n  placed: 'fs/order.stage.placed',\n  payment: 'fs/order.stage.payment',\n  processing: 'fs/order.stage.processing',\n  shipping: 'fs/order.stage.shipping',\n};\n\nconst STATE_LABELS: Partial<Record<OrderProgressStageState, MessageId>> = {\n  done: 'fs/order.stage-state.done',\n  current: 'fs/order.stage-state.current',\n  pending: 'fs/order.stage-state.pending',\n};\n\nexport const OrderProgressDefinition = defineComponent<OrderProgressProps>({\n  name: 'OrderProgress',\n  importPath: '@vtex/faststore/components',\n  component: OrderProgress,\n  content: OrderProgressContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderProgressSkeleton,\n  editor: { label: 'Order Progress', category: 'content' },\n  schema: {},\n  guideline:\n    'Four stages of one order on the order page: placed, payment, processing, shipping, with a line up to the current one. Stage names and state sentences are content; a blank field keeps the catalogue. Reads the stage the API resolved; style each stage through its state hook.',\n});\n\nfunction authored(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction currentStage(value: string): OrderProgressStage {\n  switch (value) {\n    case 'PAYMENT':\n      return 'payment';\n    case 'PROCESSING':\n      return 'processing';\n    case 'SHIPPING':\n      return 'shipping';\n    default:\n      return 'placed';\n  }\n}\n\ntype StageModel = {\n  stage: OrderProgressStage;\n  state: OrderProgressStageState;\n  line: OrderProgressLineState | null;\n};\n\nfunction stageState(index: number, current: number, order: OrderProgressOrder): OrderProgressStageState {\n  if (order.progress.cancelled) {\n    return STAGES[index] === 'payment' ? 'failed' : 'not-applicable';\n  }\n  if (index < current) {\n    return 'done';\n  }\n  if (index > current) {\n    return 'pending';\n  }\n  if (order.progress.paymentFailed) {\n    return 'failed';\n  }\n  return order.completion.view === 'COMPLETED' ? 'done' : 'current';\n}\n\nfunction lineState(state: OrderProgressStageState, cancelled: boolean): OrderProgressLineState {\n  if (cancelled) {\n    return 'not-applicable';\n  }\n  return state === 'pending' ? 'pending' : 'done';\n}\n\nfunction stageModels(order: OrderProgressOrder): StageModel[] {\n  const current = STAGES.indexOf(currentStage(order.progress.stage));\n  return STAGES.map((stage, index) => {\n    const state = stageState(index, current, order);\n    return { stage, state, line: index === 0 ? null : lineState(state, order.progress.cancelled) };\n  });\n}\n\nexport function OrderProgressSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-progress-skeleton=\"\" aria-hidden=\"true\">\n      {STAGES.map((stage) => (\n        <span key={stage} data-fs-order-progress-skeleton-stage=\"\" />\n      ))}\n    </div>\n  );\n}\n\nfunction stageSentence(stage: OrderProgressStage, content: OrderProgressContentValue | undefined): string | undefined {\n  switch (stage) {\n    case 'placed':\n      return content?.placed;\n    case 'payment':\n      return content?.payment;\n    case 'processing':\n      return content?.processing;\n    case 'shipping':\n      return content?.shipping;\n  }\n}\n\nfunction stateSentence(\n  state: OrderProgressStageState,\n  content: OrderProgressContentValue | undefined,\n): string | undefined {\n  switch (state) {\n    case 'done':\n      return content?.stateDone;\n    case 'current':\n      return content?.stateCurrent;\n    case 'pending':\n      return content?.statePending;\n    default:\n      return undefined;\n  }\n}\n\nexport function OrderProgress({ $data, $content, className, ref }: OrderProgressProps) {\n  const intl = useIntl();\n  const order = $data;\n  if (!order) {\n    return null;\n  }\n\n  const stages = stageModels(order);\n\n  return (\n    <ol\n      ref={ref}\n      aria-label={authored($content?.label, intl.formatMessage({ id: 'fs/order.progress.label' }))}\n      className={className}\n      data-fs-order-progress=\"\"\n      data-fs-order-progress-current={currentStage(order.progress.stage)}\n      data-fs-order-progress-cancelled={order.progress.cancelled ? '' : undefined}\n    >\n      {stages.map(({ stage, state, line }) => {\n        const statusLabel = STATE_LABELS[state];\n        return (\n          <li\n            key={stage}\n            data-fs-order-progress-stage={stage}\n            data-fs-order-progress-stage-state={state}\n            aria-current={state === 'current' ? 'step' : undefined}\n          >\n            <span data-fs-order-progress-track=\"\">\n              {line ? (\n                <span data-fs-order-progress-line=\"\" data-fs-order-progress-line-state={line} aria-hidden=\"true\" />\n              ) : null}\n              <span data-fs-order-progress-marker=\"\" aria-hidden=\"true\" />\n            </span>\n            <span data-fs-order-progress-label=\"\">\n              {authored(stageSentence(stage, $content), intl.formatMessage({ id: STAGE_LABELS[stage] }))}\n            </span>\n            {statusLabel ? (\n              <span data-fs-order-progress-status=\"\">\n                {authored(stateSentence(state, $content), intl.formatMessage({ id: statusLabel }))}\n              </span>\n            ) : null}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-progress.js","names":[],"sources":["../../../src/matter/order-progress/order-progress.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderProgressData on Query {\n    customerOrder(id: $orderId) {\n      id\n      completion {\n        view\n        label\n      }\n      progress {\n        stage\n        paymentFailed\n        cancelled\n      }\n    }\n  }\n`;\n\nexport const OrderProgressContent = defineContentType({\n  id: 'order-progress',\n  title: 'Order Progress',\n  description: 'The stage names, the state sentences, and the accessible name of the progress list.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name', format: 'icu-message', messageSource: 'Order progress' },\n      placed: { type: 'string', title: 'Order placed', format: 'icu-message', messageSource: 'Order placed' },\n      payment: { type: 'string', title: 'Payment', format: 'icu-message', messageSource: 'Payment' },\n      processing: { type: 'string', title: 'Processing', format: 'icu-message', messageSource: 'Processing' },\n      shipping: { type: 'string', title: 'Shipping', format: 'icu-message', messageSource: 'Shipping' },\n      stateDone: { type: 'string', title: 'Completed', format: 'icu-message', messageSource: 'Completed' },\n      stateCurrent: { type: 'string', title: 'In progress', format: 'icu-message', messageSource: 'In progress' },\n      statePending: { type: 'string', title: 'Not started', format: 'icu-message', messageSource: 'Not started' },\n    },\n  },\n});\n\nexport type OrderProgressContentValue = ContentValue<typeof OrderProgressContent>;\n\nexport type OrderProgressStage = 'placed' | 'payment' | 'processing' | 'shipping';\n\nexport type OrderProgressStageState = 'done' | 'current' | 'failed' | 'not-applicable' | 'pending';\n\nexport type OrderProgressLineState = 'done' | 'pending' | 'not-applicable';\n\nexport type OrderProgressOrder = {\n  id: string;\n  completion: { view: string; label: string };\n  progress: { stage: string; paymentFailed: boolean; cancelled: boolean };\n};\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 OrderProgressData = OrderProgressOrder | null;\n\nexport type OrderProgressProps = MessageLocaleProp &\n  Readonly<{\n    $data?: OrderProgressData | null;\n    $content?: OrderProgressContentValue;\n    className?: string;\n    ref?: Ref<HTMLOListElement>;\n  }>;\n\n/** Each stage's name is also the message field that labels it. */\nconst STAGES = ['placed', 'payment', 'processing', 'shipping'] as const satisfies readonly OrderProgressStage[];\n\nconst STATE_FIELDS: Partial<Record<OrderProgressStageState, MessageFieldName<typeof OrderProgressContent>>> = {\n  done: 'stateDone',\n  current: 'stateCurrent',\n  pending: 'statePending',\n};\n\nexport const OrderProgressDefinition = defineComponent<OrderProgressProps>({\n  name: 'OrderProgress',\n  importPath: '@vtex/faststore/components',\n  component: OrderProgress,\n  content: OrderProgressContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderProgressSkeleton,\n  editor: { label: 'Order Progress', category: 'content' },\n  schema: {},\n  guideline:\n    'Four stages of one order on the order page: placed, payment, processing, shipping, with a line up to the current one. Stage names and state sentences are content. Reads the stage the API resolved; style each stage through its state hook.',\n});\n\nfunction currentStage(value: string): OrderProgressStage {\n  switch (value) {\n    case 'PAYMENT':\n      return 'payment';\n    case 'PROCESSING':\n      return 'processing';\n    case 'SHIPPING':\n      return 'shipping';\n    default:\n      return 'placed';\n  }\n}\n\ntype StageModel = {\n  stage: OrderProgressStage;\n  state: OrderProgressStageState;\n  line: OrderProgressLineState | null;\n};\n\nfunction stageState(index: number, current: number, order: OrderProgressOrder): OrderProgressStageState {\n  if (order.progress.cancelled) {\n    return STAGES[index] === 'payment' ? 'failed' : 'not-applicable';\n  }\n  if (index < current) {\n    return 'done';\n  }\n  if (index > current) {\n    return 'pending';\n  }\n  if (order.progress.paymentFailed) {\n    return 'failed';\n  }\n  return order.completion.view === 'COMPLETED' ? 'done' : 'current';\n}\n\nfunction lineState(state: OrderProgressStageState, cancelled: boolean): OrderProgressLineState {\n  if (cancelled) {\n    return 'not-applicable';\n  }\n  return state === 'pending' ? 'pending' : 'done';\n}\n\nfunction stageModels(order: OrderProgressOrder): StageModel[] {\n  const current = STAGES.indexOf(currentStage(order.progress.stage));\n  return STAGES.map((stage, index) => {\n    const state = stageState(index, current, order);\n    return { stage, state, line: index === 0 ? null : lineState(state, order.progress.cancelled) };\n  });\n}\n\nexport function OrderProgressSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-progress-skeleton=\"\" aria-hidden=\"true\">\n      {STAGES.map((stage) => (\n        <span key={stage} data-fs-order-progress-skeleton-stage=\"\" />\n      ))}\n    </div>\n  );\n}\n\nexport function OrderProgress({ $data, $content, className, ref }: OrderProgressProps) {\n  const { format } = useMessageFormatter(OrderProgressContent, $content);\n  const order = $data;\n  if (!order) {\n    return null;\n  }\n\n  const stages = stageModels(order);\n\n  return (\n    <ol\n      ref={ref}\n      aria-label={format('label')}\n      className={className}\n      data-fs-order-progress=\"\"\n      data-fs-order-progress-current={currentStage(order.progress.stage)}\n      data-fs-order-progress-cancelled={order.progress.cancelled ? '' : undefined}\n    >\n      {stages.map(({ stage, state, line }) => {\n        const stateField = STATE_FIELDS[state];\n        return (\n          <li\n            key={stage}\n            data-fs-order-progress-stage={stage}\n            data-fs-order-progress-stage-state={state}\n            aria-current={state === 'current' ? 'step' : undefined}\n          >\n            <span data-fs-order-progress-track=\"\">\n              {line ? (\n                <span data-fs-order-progress-line=\"\" data-fs-order-progress-line-state={line} aria-hidden=\"true\" />\n              ) : null}\n              <span data-fs-order-progress-marker=\"\" aria-hidden=\"true\" />\n            </span>\n            <span data-fs-order-progress-label=\"\">{format(stage)}</span>\n            {stateField ? <span data-fs-order-progress-status=\"\">{format(stateField)}</span> : null}\n          </li>\n        );\n      })}\n    </ol>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-summary/order-summary.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";
@@ -14,34 +14,50 @@ export declare const OrderSummaryContent: {
       readonly heading: {
         readonly type: "string";
         readonly title: "Heading";
+        readonly format: "icu-message";
+        readonly messageSource: "Summary";
       };
       readonly items: {
         readonly type: "string";
         readonly title: "Items";
+        readonly format: "icu-message";
+        readonly messageSource: "Items";
       };
       readonly shipping: {
         readonly type: "string";
         readonly title: "Shipping";
+        readonly format: "icu-message";
+        readonly messageSource: "Shipping";
       };
       readonly discounts: {
         readonly type: "string";
         readonly title: "Discounts";
+        readonly format: "icu-message";
+        readonly messageSource: "Discounts";
       };
       readonly tax: {
         readonly type: "string";
         readonly title: "Tax";
+        readonly format: "icu-message";
+        readonly messageSource: "Tax";
       };
       readonly change: {
         readonly type: "string";
         readonly title: "Change";
+        readonly format: "icu-message";
+        readonly messageSource: "Change";
       };
       readonly interest: {
         readonly type: "string";
         readonly title: "Interest";
+        readonly format: "icu-message";
+        readonly messageSource: "Interest";
       };
       readonly grandTotal: {
         readonly type: "string";
         readonly title: "Total";
+        readonly format: "icu-message";
+        readonly messageSource: "Total";
       };
     };
   };
@@ -61,20 +77,14 @@ export type OrderSummaryData = {
   total: OrderSummaryMoney;
   totals: OrderSummaryTotal[];
 };
-export type OrderSummaryProps = Readonly<{
+export type OrderSummaryProps = MessageLocaleProp & Readonly<{
   /** The `customerOrder` value of the page query. `null` when the read returned no order. */
   $data?: OrderSummaryData | null;
   $content?: OrderSummaryContentValue;
   className?: string;
   ref?: Ref<HTMLElement>;
 }>;
-export declare const OrderSummaryDefinition: ComponentDefinition<Readonly<{
-  /** The `customerOrder` value of the page query. `null` when the read returned no order. */
-  $data?: OrderSummaryData | null;
-  $content?: OrderSummaryContentValue;
-  className?: string;
-  ref?: Ref<HTMLElement>;
-}>>;
+export declare const OrderSummaryDefinition: ComponentDefinition<OrderSummaryProps>;
 export declare function OrderSummarySkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare function OrderSummary({ $data, $content, className, ref }: OrderSummaryProps): import("react/jsx-runtime").JSX.Element | null;
 //#endregion

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

@@ -3,7 +3,7 @@ import { defineComponent } from "../../core/dist/define-component.js";
 import { defineContentType } from "../../core/dist/define-content-type.js";
 import "../../core/dist/index.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 { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/matter/order-summary/order-summary.tsx
@@ -36,65 +36,63 @@ const OrderSummaryContent = defineContentType({
 		properties: {
 			heading: {
 				type: "string",
-				title: "Heading"
+				title: "Heading",
+				format: "icu-message",
+				messageSource: "Summary"
 			},
 			items: {
 				type: "string",
-				title: "Items"
+				title: "Items",
+				format: "icu-message",
+				messageSource: "Items"
 			},
 			shipping: {
 				type: "string",
-				title: "Shipping"
+				title: "Shipping",
+				format: "icu-message",
+				messageSource: "Shipping"
 			},
 			discounts: {
 				type: "string",
-				title: "Discounts"
+				title: "Discounts",
+				format: "icu-message",
+				messageSource: "Discounts"
 			},
 			tax: {
 				type: "string",
-				title: "Tax"
+				title: "Tax",
+				format: "icu-message",
+				messageSource: "Tax"
 			},
 			change: {
 				type: "string",
-				title: "Change"
+				title: "Change",
+				format: "icu-message",
+				messageSource: "Change"
 			},
 			interest: {
 				type: "string",
-				title: "Interest"
+				title: "Interest",
+				format: "icu-message",
+				messageSource: "Interest"
 			},
 			grandTotal: {
 				type: "string",
-				title: "Total"
+				title: "Total",
+				format: "icu-message",
+				messageSource: "Total"
 			}
 		}
 	}
 });
-/** Catalogue labels for the total ids this page knows. Any other id keeps its upstream name. */
-const KNOWN_TOTAL_LABELS = {
-	Items: {
-		message: "fs/order.totals.items",
-		field: "items"
-	},
-	Shipping: {
-		message: "fs/order.totals.shipping",
-		field: "shipping"
-	},
-	Discounts: {
-		message: "fs/order.totals.discounts",
-		field: "discounts"
-	},
-	Tax: {
-		message: "fs/order.totals.tax",
-		field: "tax"
-	},
-	Change: {
-		message: "fs/order.totals.change",
-		field: "change"
-	},
-	Interest: {
-		message: "fs/order.totals.interest",
-		field: "interest"
-	}
+/** The message field labelling each total id this page knows. Any other id keeps its upstream name. */
+const KNOWN_TOTAL_FIELDS = {
+	Items: "items",
+	Shipping: "shipping",
+	Discounts: "discounts",
+	Tax: "tax",
+	Change: "change",
+	Interest: "interest"
 };
 const OrderSummaryDefinition = defineComponent({
 	name: "OrderSummary",
@@ -109,11 +107,8 @@ const OrderSummaryDefinition = defineComponent({
 		category: "content"
 	},
 	schema: {},
-	guideline: "The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; a blank field keeps the catalogue, and an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself."
+	guideline: "The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself."
 });
-function authored(value, fallback) {
-	return value?.trim() || fallback;
-}
 function moneyAmount(amount) {
 	if (typeof amount === "string" && amount.trim() === "") return null;
 	const value = typeof amount === "number" ? amount : Number(amount);
@@ -139,7 +134,7 @@ function OrderSummarySkeleton({ className, ...props }) {
 	});
 }
 function OrderSummary({ $data, $content, className, ref }) {
-	const intl = useIntl();
+	const { format } = useMessageFormatter(OrderSummaryContent, $content);
 	const headingId = useId();
 	const { formatMoney } = useStorefrontFormatters();
 	if (!$data) return null;
@@ -152,13 +147,12 @@ function OrderSummary({ $data, $content, className, ref }) {
 		children: [/* @__PURE__ */ jsx("h2", {
 			id: headingId,
 			"data-fs-order-summary-heading": "",
-			children: authored($content?.heading, intl.formatMessage({ id: "fs/order.totals.heading" }))
+			children: format("heading")
 		}), /* @__PURE__ */ jsxs("dl", {
 			"data-fs-order-summary-lines": "",
 			children: [$data.totals.map((total, index) => {
 				const amount = moneyAmount(total.value.amount);
-				const known = KNOWN_TOTAL_LABELS[total.id];
-				const label = known ? authored($content?.[known.field], intl.formatMessage({ id: known.message })) : total.name;
+				const label = Object.hasOwn(KNOWN_TOTAL_FIELDS, total.id) ? format(KNOWN_TOTAL_FIELDS[total.id]) : total.name;
 				return /* @__PURE__ */ jsxs("div", {
 					"data-fs-order-summary-line": "",
 					"data-fs-order-summary-line-id": total.id,
@@ -176,7 +170,7 @@ function OrderSummary({ $data, $content, className, ref }) {
 				children: [/* @__PURE__ */ jsx("dt", {
 					"data-fs-order-summary-label": "",
 					"data-fs-order-summary-total-label": "",
-					children: authored($content?.grandTotal, intl.formatMessage({ id: "fs/order.totals.grand-total" }))
+					children: format("grandTotal")
 				}), /* @__PURE__ */ jsx("dd", {
 					"data-fs-order-summary-value": "",
 					"data-fs-order-summary-total-value": "",

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

@@ -1 +1 @@
-{"version":3,"file":"order-summary.js","names":[],"sources":["../../../src/matter/order-summary/order-summary.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, type Ref, useId } from 'react';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderSummaryData on Query {\n    customerOrder(id: $orderId) {\n      id\n      total {\n        amount\n        currencyCode\n      }\n      totals {\n        id\n        name\n        value {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\nexport const OrderSummaryContent = defineContentType({\n  id: 'order-summary',\n  title: 'Order Summary',\n  description: 'The heading and the labels of the known total lines. An unknown total id keeps the name the API sent.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      heading: { type: 'string', title: 'Heading' },\n      items: { type: 'string', title: 'Items' },\n      shipping: { type: 'string', title: 'Shipping' },\n      discounts: { type: 'string', title: 'Discounts' },\n      tax: { type: 'string', title: 'Tax' },\n      change: { type: 'string', title: 'Change' },\n      interest: { type: 'string', title: 'Interest' },\n      grandTotal: { type: 'string', title: 'Total' },\n    },\n  },\n});\n\nexport type OrderSummaryContentValue = ContentValue<typeof OrderSummaryContent>;\n\nexport type OrderSummaryMoney = { amount: string | number; currencyCode: string };\n\nexport type OrderSummaryTotal = {\n  id: string;\n  name: string;\n  value: OrderSummaryMoney;\n};\n\nexport type OrderSummaryData = {\n  id: string;\n  total: OrderSummaryMoney;\n  totals: OrderSummaryTotal[];\n};\n\nexport type OrderSummaryProps = Readonly<{\n  /** The `customerOrder` value of the page query. `null` when the read returned no order. */\n  $data?: OrderSummaryData | null;\n  $content?: OrderSummaryContentValue;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\ntype LineSign = 'negative' | 'zero' | 'positive';\n\n/** Catalogue labels for the total ids this page knows. Any other id keeps its upstream name. */\nconst KNOWN_TOTAL_LABELS = {\n  Items: { message: 'fs/order.totals.items', field: 'items' },\n  Shipping: { message: 'fs/order.totals.shipping', field: 'shipping' },\n  Discounts: { message: 'fs/order.totals.discounts', field: 'discounts' },\n  Tax: { message: 'fs/order.totals.tax', field: 'tax' },\n  Change: { message: 'fs/order.totals.change', field: 'change' },\n  Interest: { message: 'fs/order.totals.interest', field: 'interest' },\n} as const satisfies Record<string, { message: MessageId; field: keyof OrderSummaryContentValue }>;\n\nexport const OrderSummaryDefinition = defineComponent<OrderSummaryProps>({\n  name: 'OrderSummary',\n  importPath: '@vtex/faststore/components',\n  component: OrderSummary,\n  content: OrderSummaryContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderSummarySkeleton,\n  editor: { label: 'Order Summary', category: 'content' },\n  schema: {},\n  guideline:\n    'The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; a blank field keeps the catalogue, and an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself.',\n});\n\nfunction authored(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\nfunction lineSign(amount: number | null): LineSign | undefined {\n  if (amount == null) {\n    return undefined;\n  }\n  if (amount < 0) {\n    return 'negative';\n  }\n  return amount === 0 ? 'zero' : 'positive';\n}\n\nexport function OrderSummarySkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-summary-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-total=\"\" />\n    </div>\n  );\n}\n\nexport function OrderSummary({ $data, $content, className, ref }: OrderSummaryProps) {\n  const intl = useIntl();\n  const headingId = useId();\n  const { formatMoney } = useStorefrontFormatters();\n\n  if (!$data) {\n    return null;\n  }\n\n  const totalAmount = moneyAmount($data.total.amount);\n\n  return (\n    <section ref={ref} aria-labelledby={headingId} className={className} data-fs-order-summary=\"\">\n      <h2 id={headingId} data-fs-order-summary-heading=\"\">\n        {authored($content?.heading, intl.formatMessage({ id: 'fs/order.totals.heading' }))}\n      </h2>\n      <dl data-fs-order-summary-lines=\"\">\n        {$data.totals.map((total, index) => {\n          const amount = moneyAmount(total.value.amount);\n          const known = KNOWN_TOTAL_LABELS[total.id as keyof typeof KNOWN_TOTAL_LABELS];\n          const label = known\n            ? authored($content?.[known.field], intl.formatMessage({ id: known.message }))\n            : total.name;\n          return (\n            <div\n              key={`${total.id}-${index}`}\n              data-fs-order-summary-line=\"\"\n              data-fs-order-summary-line-id={total.id}\n              data-fs-order-summary-line-sign={lineSign(amount)}\n            >\n              <dt data-fs-order-summary-label=\"\">{label}</dt>\n              <dd data-fs-order-summary-value=\"\">\n                {amount == null ? null : formatMoney(amount, { currency: total.value.currencyCode })}\n              </dd>\n            </div>\n          );\n        })}\n        <div data-fs-order-summary-total=\"\">\n          <dt data-fs-order-summary-label=\"\" data-fs-order-summary-total-label=\"\">\n            {authored($content?.grandTotal, intl.formatMessage({ id: 'fs/order.totals.grand-total' }))}\n          </dt>\n          <dd data-fs-order-summary-value=\"\" data-fs-order-summary-total-value=\"\">\n            {totalAmount == null ? null : formatMoney(totalAmount, { currency: $data.total.currencyCode })}\n          </dd>\n        </div>\n      </dl>\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"order-summary.js","names":[],"sources":["../../../src/matter/order-summary/order-summary.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ContentValue,\n  defineComponent,\n  defineContentType,\n  type MessageFieldName,\n  type MessageLocaleProp,\n} from '@vtex/fs-core';\nimport { type ComponentPropsWithRef, type Ref, useId } from 'react';\nimport { useStorefrontFormatters } from '../../sdk/format/client.js';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderSummaryData on Query {\n    customerOrder(id: $orderId) {\n      id\n      total {\n        amount\n        currencyCode\n      }\n      totals {\n        id\n        name\n        value {\n          amount\n          currencyCode\n        }\n      }\n    }\n  }\n`;\n\nexport const OrderSummaryContent = defineContentType({\n  id: 'order-summary',\n  title: 'Order Summary',\n  description: 'The heading and the labels of the known total lines. An unknown total id keeps the name the API sent.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      heading: { type: 'string', title: 'Heading', format: 'icu-message', messageSource: 'Summary' },\n      items: { type: 'string', title: 'Items', format: 'icu-message', messageSource: 'Items' },\n      shipping: { type: 'string', title: 'Shipping', format: 'icu-message', messageSource: 'Shipping' },\n      discounts: { type: 'string', title: 'Discounts', format: 'icu-message', messageSource: 'Discounts' },\n      tax: { type: 'string', title: 'Tax', format: 'icu-message', messageSource: 'Tax' },\n      change: { type: 'string', title: 'Change', format: 'icu-message', messageSource: 'Change' },\n      interest: { type: 'string', title: 'Interest', format: 'icu-message', messageSource: 'Interest' },\n      grandTotal: { type: 'string', title: 'Total', format: 'icu-message', messageSource: 'Total' },\n    },\n  },\n});\n\nexport type OrderSummaryContentValue = ContentValue<typeof OrderSummaryContent>;\n\nexport type OrderSummaryMoney = { amount: string | number; currencyCode: string };\n\nexport type OrderSummaryTotal = {\n  id: string;\n  name: string;\n  value: OrderSummaryMoney;\n};\n\nexport type OrderSummaryData = {\n  id: string;\n  total: OrderSummaryMoney;\n  totals: OrderSummaryTotal[];\n};\n\nexport type OrderSummaryProps = MessageLocaleProp &\n  Readonly<{\n    /** The `customerOrder` value of the page query. `null` when the read returned no order. */\n    $data?: OrderSummaryData | null;\n    $content?: OrderSummaryContentValue;\n    className?: string;\n    ref?: Ref<HTMLElement>;\n  }>;\n\ntype LineSign = 'negative' | 'zero' | 'positive';\n\n/** The message field labelling each total id this page knows. Any other id keeps its upstream name. */\nconst KNOWN_TOTAL_FIELDS = {\n  Items: 'items',\n  Shipping: 'shipping',\n  Discounts: 'discounts',\n  Tax: 'tax',\n  Change: 'change',\n  Interest: 'interest',\n} as const satisfies Record<string, MessageFieldName<typeof OrderSummaryContent>>;\n\nexport const OrderSummaryDefinition = defineComponent<OrderSummaryProps>({\n  name: 'OrderSummary',\n  importPath: '@vtex/faststore/components',\n  component: OrderSummary,\n  content: OrderSummaryContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderSummarySkeleton,\n  editor: { label: 'Order Summary', category: 'content' },\n  schema: {},\n  guideline:\n    'The total lines of one placed order (items, shipping, discounts, and any other line OMS recorded, zero and negative included) followed by the grand total the API returns. Known labels are content; an unknown total id keeps the name the API sent. Place it on the order page; it never adds the lines up itself.',\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\nfunction lineSign(amount: number | null): LineSign | undefined {\n  if (amount == null) {\n    return undefined;\n  }\n  if (amount < 0) {\n    return 'negative';\n  }\n  return amount === 0 ? 'zero' : 'positive';\n}\n\nexport function OrderSummarySkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-summary-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-line=\"\" />\n      <span data-fs-order-summary-skeleton-total=\"\" />\n    </div>\n  );\n}\n\nexport function OrderSummary({ $data, $content, className, ref }: OrderSummaryProps) {\n  const { format } = useMessageFormatter(OrderSummaryContent, $content);\n  const headingId = useId();\n  const { formatMoney } = useStorefrontFormatters();\n\n  if (!$data) {\n    return null;\n  }\n\n  const totalAmount = moneyAmount($data.total.amount);\n\n  return (\n    <section ref={ref} aria-labelledby={headingId} className={className} data-fs-order-summary=\"\">\n      <h2 id={headingId} data-fs-order-summary-heading=\"\">\n        {format('heading')}\n      </h2>\n      <dl data-fs-order-summary-lines=\"\">\n        {$data.totals.map((total, index) => {\n          const amount = moneyAmount(total.value.amount);\n          // Bracket access walks Object.prototype, so \"constructor\" would not keep its upstream name.\n          const label = Object.hasOwn(KNOWN_TOTAL_FIELDS, total.id)\n            ? format(KNOWN_TOTAL_FIELDS[total.id as keyof typeof KNOWN_TOTAL_FIELDS])\n            : total.name;\n          return (\n            <div\n              key={`${total.id}-${index}`}\n              data-fs-order-summary-line=\"\"\n              data-fs-order-summary-line-id={total.id}\n              data-fs-order-summary-line-sign={lineSign(amount)}\n            >\n              <dt data-fs-order-summary-label=\"\">{label}</dt>\n              <dd data-fs-order-summary-value=\"\">\n                {amount == null ? null : formatMoney(amount, { currency: total.value.currencyCode })}\n              </dd>\n            </div>\n          );\n        })}\n        <div data-fs-order-summary-total=\"\">\n          <dt data-fs-order-summary-label=\"\" data-fs-order-summary-total-label=\"\">\n            {format('grandTotal')}\n          </dt>\n          <dd data-fs-order-summary-value=\"\" data-fs-order-summary-total-value=\"\">\n            {totalAmount == null ? null : formatMoney(totalAmount, { currency: $data.total.currencyCode })}\n          </dd>\n        </div>\n      </dl>\n    </section>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-tracking-link/order-tracking-link.d.ts

@@ -0,0 +1,43 @@
+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-tracking-link/order-tracking-link.d.ts
+export declare const OrderTrackingLinkContent: {
+  readonly id: "order-tracking-link";
+  readonly title: "Order Tracking Link";
+  readonly description: "The tracking links on each delivery of the order page.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly label: {
+        readonly type: "string";
+        readonly title: "Label";
+        readonly format: "icu-message";
+        readonly messageSource: "Track package";
+      };
+    };
+  };
+};
+export type OrderTrackingLinkContentValue = ContentValue<typeof OrderTrackingLinkContent>;
+export type OrderTrackingLinkOption = {
+  trackingLinks: string[];
+};
+export type OrderTrackingLinkData = {
+  progress: {
+    cancelled: boolean;
+  };
+  deliveryOptions: OrderTrackingLinkOption[];
+} | null;
+export type OrderTrackingLinkProps = MessageLocaleProp & Readonly<{
+  $data?: OrderTrackingLinkData | null;
+  $content?: OrderTrackingLinkContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>;
+export declare const OrderTrackingLinkDefinition: ComponentDefinition<OrderTrackingLinkProps>;
+export declare function OrderTrackingLinkSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderTrackingLink({ $data, $content, className, ref }: OrderTrackingLinkProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-tracking-link.d.ts.map

package/dist/matter/order-tracking-link/order-tracking-link.js

@@ -0,0 +1,107 @@
+"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 { useOrderDeliveryOption } from "../order-delivery-group/order-delivery-group.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/matter/order-tracking-link/order-tracking-link.tsx
+const fragment = `
+  fragment OrderTrackingLinkData on Query {
+    customerOrder(id: $orderId) {
+      progress {
+        cancelled
+      }
+      deliveryOptions {
+        trackingLinks
+      }
+    }
+  }
+`;
+const OrderTrackingLinkContent = defineContentType({
+	id: "order-tracking-link",
+	title: "Order Tracking Link",
+	description: "The tracking links on each delivery of the order page.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Label",
+			format: "icu-message",
+			messageSource: "Track package"
+		} }
+	}
+});
+const OrderTrackingLinkDefinition = defineComponent({
+	name: "OrderTrackingLink",
+	importPath: "@vtex/faststore/components",
+	component: OrderTrackingLink,
+	content: OrderTrackingLinkContent,
+	fragment,
+	fetchStrategy: "static",
+	skeleton: OrderTrackingLinkSkeleton,
+	editor: {
+		label: "Order Tracking Link",
+		category: "navigation"
+	},
+	schema: {},
+	guideline: "Offers each tracking address the order read kept. Inside a delivery group it shows only that option. Outside the group it shows one group per option. One address uses the label. Several add a number. Each address opens in a new tab. Renders nothing when no address remains. A cancelled order still shows the addresses. The label is a content message. It does not choose its place on the page."
+});
+function linkLabel(label, position, total) {
+	if (total === 1) return label;
+	return `${label} ${position}`;
+}
+function safeLinks(links) {
+	return links.flatMap((url) => {
+		const destination = resolveNavigableHref(url);
+		return destination.safe ? [destination.href] : [];
+	});
+}
+function visibleGroups(options, onlyIndex) {
+	return options.flatMap((option, index) => {
+		if (onlyIndex !== null && index !== onlyIndex) return [];
+		const links = safeLinks(option.trackingLinks);
+		if (links.length === 0) return [];
+		return [{
+			index,
+			links
+		}];
+	});
+}
+function OrderTrackingLinkSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-order-tracking-link-skeleton": "",
+		"aria-hidden": "true"
+	});
+}
+function OrderTrackingLink({ $data, $content, className, ref }) {
+	const inGroup = useOrderDeliveryOption();
+	const messages = useMessageFormatter(OrderTrackingLinkContent, $content);
+	if (!$data) return null;
+	const groups = visibleGroups($data.deliveryOptions, inGroup?.index ?? null);
+	if (groups.length === 0) return null;
+	const label = messages.format("label");
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className,
+		"data-fs-order-tracking-link": "",
+		children: groups.map((group) => /* @__PURE__ */ jsx("ul", {
+			"data-fs-order-tracking-link-group": "",
+			children: group.links.map((address, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+				href: address,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				"data-fs-order-tracking-link-anchor": "",
+				children: linkLabel(label, index + 1, group.links.length)
+			}) }, `${address}:${index}`))
+		}, `${group.index}:${group.links.join("\0")}`))
+	});
+}
+//#endregion
+export { OrderTrackingLink, OrderTrackingLinkContent, OrderTrackingLinkDefinition, OrderTrackingLinkSkeleton };
+
+//# sourceMappingURL=order-tracking-link.js.map

package/dist/matter/order-tracking-link/order-tracking-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"order-tracking-link.js","names":[],"sources":["../../../src/matter/order-tracking-link/order-tracking-link.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType, type MessageLocaleProp } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, Ref } from 'react';\nimport { useMessageFormatter } from '../../sdk/i18n/use-message-formatter.js';\nimport { resolveNavigableHref } from '../../utils/safe-href.js';\nimport { useOrderDeliveryOption } from '../order-delivery-group/order-delivery-group.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderTrackingLinkData on Query {\n    customerOrder(id: $orderId) {\n      progress {\n        cancelled\n      }\n      deliveryOptions {\n        trackingLinks\n      }\n    }\n  }\n`;\n\nexport const OrderTrackingLinkContent = defineContentType({\n  id: 'order-tracking-link',\n  title: 'Order Tracking Link',\n  description: 'The tracking links on each delivery of the order page.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: {\n        type: 'string',\n        title: 'Label',\n        format: 'icu-message',\n        messageSource: 'Track package',\n      },\n    },\n  },\n});\n\nexport type OrderTrackingLinkContentValue = ContentValue<typeof OrderTrackingLinkContent>;\n\nexport type OrderTrackingLinkOption = {\n  trackingLinks: string[];\n};\n\nexport type OrderTrackingLinkData = {\n  progress: { cancelled: boolean };\n  deliveryOptions: OrderTrackingLinkOption[];\n} | null;\n\nexport type OrderTrackingLinkProps = MessageLocaleProp &\n  Readonly<{\n    $data?: OrderTrackingLinkData | null;\n    $content?: OrderTrackingLinkContentValue;\n    className?: string;\n    ref?: Ref<HTMLDivElement>;\n  }>;\n\nexport const OrderTrackingLinkDefinition = defineComponent<OrderTrackingLinkProps>({\n  name: 'OrderTrackingLink',\n  importPath: '@vtex/faststore/components',\n  component: OrderTrackingLink,\n  content: OrderTrackingLinkContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderTrackingLinkSkeleton,\n  editor: { label: 'Order Tracking Link', category: 'navigation' },\n  schema: {},\n  guideline:\n    'Offers each tracking address the order read kept. Inside a delivery group it shows only that option. Outside the group it shows one group per option. One address uses the label. Several add a number. Each address opens in a new tab. Renders nothing when no address remains. A cancelled order still shows the addresses. The label is a content message. It does not choose its place on the page.',\n});\n\nfunction linkLabel(label: string, position: number, total: number): string {\n  if (total === 1) return label;\n  return `${label} ${position}`;\n}\n\nfunction safeLinks(links: string[]): string[] {\n  return links.flatMap((url) => {\n    const destination = resolveNavigableHref(url);\n    return destination.safe ? [destination.href] : [];\n  });\n}\n\nfunction visibleGroups(options: OrderTrackingLinkOption[], onlyIndex: number | null) {\n  return options.flatMap((option, index) => {\n    if (onlyIndex !== null && index !== onlyIndex) return [];\n    const links = safeLinks(option.trackingLinks);\n    if (links.length === 0) return [];\n    return [{ index, links }];\n  });\n}\n\nexport function OrderTrackingLinkSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return <div {...props} className={className} data-fs-order-tracking-link-skeleton=\"\" aria-hidden=\"true\" />;\n}\n\nexport function OrderTrackingLink({ $data, $content, className, ref }: OrderTrackingLinkProps) {\n  const inGroup = useOrderDeliveryOption();\n  const messages = useMessageFormatter(OrderTrackingLinkContent, $content);\n  if (!$data) return null;\n\n  const groups = visibleGroups($data.deliveryOptions, inGroup?.index ?? null);\n  if (groups.length === 0) return null;\n\n  const label = messages.format('label');\n\n  return (\n    <div ref={ref} className={className} data-fs-order-tracking-link=\"\">\n      {groups.map((group) => (\n        <ul key={`${group.index}:${group.links.join('\\0')}`} data-fs-order-tracking-link-group=\"\">\n          {group.links.map((address, index) => (\n            <li key={`${address}:${index}`}>\n              <a href={address} target=\"_blank\" rel=\"noopener noreferrer\" data-fs-order-tracking-link-anchor=\"\">\n                {linkLabel(label, index + 1, group.links.length)}\n              </a>\n            </li>\n          ))}\n        </ul>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AAQA,MAAM,WAAyB;;;;;;;;;;;;AAa/B,MAAa,2BAA2B,kBAAkB;CACxD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY,EACV,OAAO;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,eAAe;EACjB,EACF;CACF;AACF,CAAC;AAqBD,MAAa,8BAA8B,gBAAwC;CACjF,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT;CACA,eAAe;CACf,UAAU;CACV,QAAQ;EAAE,OAAO;EAAuB,UAAU;CAAa;CAC/D,QAAQ,CAAC;CACT,WACE;AACJ,CAAC;AAED,SAAS,UAAU,OAAe,UAAkB,OAAuB;CACzE,IAAI,UAAU,GAAG,OAAO;CACxB,OAAO,GAAG,MAAM,GAAG;AACrB;AAEA,SAAS,UAAU,OAA2B;CAC5C,OAAO,MAAM,SAAS,QAAQ;EAC5B,MAAM,cAAc,qBAAqB,GAAG;EAC5C,OAAO,YAAY,OAAO,CAAC,YAAY,IAAI,IAAI,CAAC;CAClD,CAAC;AACH;AAEA,SAAS,cAAc,SAAoC,WAA0B;CACnF,OAAO,QAAQ,SAAS,QAAQ,UAAU;EACxC,IAAI,cAAc,QAAQ,UAAU,WAAW,OAAO,CAAC;EACvD,MAAM,QAAQ,UAAU,OAAO,aAAa;EAC5C,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC;EAChC,OAAO,CAAC;GAAE;GAAO;EAAM,CAAC;CAC1B,CAAC;AACH;AAEA,SAAgB,0BAA0B,EAAE,WAAW,GAAG,SAAuC;CAC/F,OAAO,oBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,wCAAqC;EAAG,eAAY;CAAQ,CAAA;AAC3G;AAEA,SAAgB,kBAAkB,EAAE,OAAO,UAAU,WAAW,OAA+B;CAC7F,MAAM,UAAU,uBAAuB;CACvC,MAAM,WAAW,oBAAoB,0BAA0B,QAAQ;CACvE,IAAI,CAAC,OAAO,OAAO;CAEnB,MAAM,SAAS,cAAc,MAAM,iBAAiB,SAAS,SAAS,IAAI;CAC1E,IAAI,OAAO,WAAW,GAAG,OAAO;CAEhC,MAAM,QAAQ,SAAS,OAAO,OAAO;CAErC,OACE,oBAAC,OAAD;EAAU;EAAgB;EAAW,+BAA4B;EAC9D,UAAA,OAAO,KAAK,UACX,oBAAC,MAAD;GAAqD,qCAAkC;GACpF,UAAA,MAAM,MAAM,KAAK,SAAS,UACzB,oBAAC,MAAD,EAAA,UACE,oBAAC,KAAD;IAAG,MAAM;IAAS,QAAO;IAAS,KAAI;IAAsB,sCAAmC;IAC5F,UAAA,UAAU,OAAO,QAAQ,GAAG,MAAM,MAAM,MAAM;GAC9C,CAAA,EACD,GAJK,GAAG,QAAQ,GAAG,OAInB,CACL;EACC,GARK,GAAG,MAAM,MAAM,GAAG,MAAM,MAAM,KAAK,IAAI,GAQ5C,CACL;CACE,CAAA;AAET"}

package/dist/matter/payment/payment-card-capture.js

@@ -1,5 +1,6 @@
 "use client";
 import { usePaymentSubmission } from "../../sdk/payment/submission-registry.js";
+import { lastFourOf, rememberConfirmationLastFour } from "../../sdk/payment/confirmation-last-four.js";
 import { PAYMENT_NETWORK_ERROR_CODE } from "../../sdk/payment/operations.js";
 import { CardCaptureContext } from "../card-entry/card-capture.js";
 import { resolveCardholderDocument } from "./cardholder-document-rule.js";
@@ -7,12 +8,12 @@ import { isCardMethod } from "./use-payment-method-selection.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/matter/payment/payment-card-capture.tsx
-/** The `add_payment_info` payment type for a card group; `undefined` for any other group (T140). */
-function paymentTypeOf(groupName) {
-	if (groupName === "creditCardPaymentGroup") return "Credit Card";
-	if (groupName === "debitCardPaymentGroup") return "Debit Card";
+/** The `add_payment_info` payment type for a card kind; `undefined` for any other kind (T140; read off `type` since T230). */
+function paymentTypeOf(type) {
+	if (type === "CREDIT_CARD") return "Credit Card";
+	if (type === "DEBIT_CARD") return "Debit Card";
 }
-/** Mirrors `usePaymentActions`' own infrastructure-failure code for the same underlying meaning. */
+/** Mirrors `usePaymentActions`' own infrastructure-failure code. Its `message` is diagnostic; `PlaceOrder` words the code. */
 const MISSING_GATEWAY_ACTION_ERROR = {
 	code: PAYMENT_NETWORK_ERROR_CODE,
 	message: "Unable to complete the request. Please try again."
@@ -35,7 +36,8 @@ async function sendNewCard({ selection, $actions }, transaction, card) {
 		method: allMethods.find((method) => method.id === persistedMethodId) ?? null,
 		countryDocumentType
 	});
-	return sendPayments({
+	const lastFour = lastFourOf(card.number);
+	const result = await sendPayments({
 		transaction,
 		card: {
 			kind: "new",
@@ -45,6 +47,8 @@ async function sendNewCard({ selection, $actions }, transaction, card) {
 			saveCard: draft.saveCard ?? void 0
 		}
 	});
+	if (lastFour && result.userErrors.length === 0) rememberConfirmationLastFour(transaction.orderGroup, lastFour);
+	return result;
 }
 function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 	const { register } = usePaymentSubmission();
@@ -68,7 +72,7 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 		const track = latest.current.$actions?.analytics?.track;
 		if (!track) return;
 		const { methods, selectedMethodId } = latest.current.selection;
-		const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.groupName);
+		const paymentType = paymentTypeOf(methods.find((method) => method.id === selectedMethodId)?.type);
 		track({
 			name: "add_payment_info",
 			value: {
@@ -91,13 +95,12 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 		const submit = (transaction) => capture((card) => sendNewCard(latest.current, transaction, card));
 		const unregister = register("new-card", submit, preflight, explainMissingMethod);
 		activeCaptures.current += 1;
-		dispatchAddPaymentInfo();
 		return () => {
 			activeCaptures.current -= 1;
 			unregister();
 		};
-	}, [register, dispatchAddPaymentInfo]);
-	const { methods, placing, attempt, selectMethod, selectNewCard, setDraftBin, draft, cardPaymentCollapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectedMethod } = selection;
+	}, [register]);
+	const { methods, placing, attempt, selectMethod, selectNewCard, setDraftBin, setDraftEntryValid, draft, cardPaymentCollapsed, cardModeActive, selectedMethodId, selectionOutOfScope, selectedMethod } = selection;
 	const locked = attempt?.phase === "sent" || attempt?.phase === "unresolved";
 	const selectionNonCard = selectedMethod !== null && !isCardMethod(selectedMethod);
 	const value = useMemo(() => ({
@@ -105,10 +108,12 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 		busy: placing || locked,
 		clearOn: "any-outcome",
 		registerCapture,
+		onCaptureMounted: dispatchAddPaymentInfo,
 		selection: {
 			selectMethod,
 			selectNewCard,
 			setDraftBin,
+			setDraftEntryValid,
 			path: draft.path,
 			bin: draft.bin,
 			collapsed: cardPaymentCollapsed,
@@ -122,9 +127,11 @@ function PaymentCardCaptureProvider({ selection, cart, $actions, children }) {
 		placing,
 		locked,
 		registerCapture,
+		dispatchAddPaymentInfo,
 		selectMethod,
 		selectNewCard,
 		setDraftBin,
+		setDraftEntryValid,
 		draft.path,
 		draft.bin,
 		cardPaymentCollapsed,