@vtex/faststore 0.0.6 → 0.0.8

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

@@ -0,0 +1,395 @@
+"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 { resolveSafeHref } from "../../utils/safe-href.js";
+import { useIntl } from "../../sdk/i18n/client.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";
+import { currentPageWith } from "../../sdk/navigation/current-page.js";
+import { OrderListRow } from "../order-list-row/order-list-row.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/order-list/order-list.tsx
+const fragment = `
+  fragment OrderListData on Query {
+    customerOrders(first: 25, after: $after, filter: $filter) {
+      edges {
+        node {
+          ...OrderListRowData
+        }
+      }
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
+      totalCount
+      totalIncomplete
+    }
+  }
+
+  fragment OrderListRowData on CustomerOrderListItem {
+    id
+    placedAt
+    total {
+      amount
+      currencyCode
+    }
+    itemCount
+    completion {
+      view
+      label
+    }
+    shippingEstimatedDateMin
+    shippingEstimatedDateMax
+  }
+`;
+const OrderListContent = defineContentType({
+	id: "order-list",
+	title: "Order List",
+	description: "The count, empty, error, and advance sentences for the orders list.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Accessible name"
+			},
+			count: {
+				type: "string",
+				title: "Count"
+			},
+			countIncomplete: {
+				type: "string",
+				title: "Incomplete count"
+			},
+			emptyAccount: {
+				type: "string",
+				title: "Empty account"
+			},
+			emptyView: {
+				type: "string",
+				title: "Empty view"
+			},
+			emptySearch: {
+				type: "string",
+				title: "Empty search"
+			},
+			pastEnd: {
+				type: "string",
+				title: "Past the end"
+			},
+			walkStopped: {
+				type: "string",
+				title: "Walk stopped"
+			},
+			error: {
+				type: "string",
+				title: "Error"
+			},
+			retry: {
+				type: "string",
+				title: "Retry"
+			},
+			next: {
+				type: "string",
+				title: "Next page"
+			},
+			loadMore: {
+				type: "string",
+				title: "Load more"
+			},
+			firstPage: {
+				type: "string",
+				title: "First page"
+			},
+			clear: {
+				type: "string",
+				title: "Clear search"
+			},
+			startShopping: {
+				type: "string",
+				title: "Start shopping"
+			}
+		}
+	}
+});
+const DEFAULTS = {
+	label: "Orders",
+	count: "{count} of {total}",
+	countIncomplete: "{count} of {total}, count incomplete",
+	emptyAccount: "You have no orders yet",
+	emptyView: "No orders in this view",
+	emptySearch: "No orders match this search",
+	pastEnd: "This page has no orders",
+	walkStopped: "More orders may exist",
+	error: "Could not load orders",
+	retry: "Try again",
+	next: "Next page",
+	loadMore: "Load more",
+	firstPage: "First page",
+	clear: "Clear search",
+	startShopping: "Start shopping"
+};
+const COLUMNS = [
+	["id", "fs/order-list.column.id"],
+	["placed", "fs/order-list.column.placed"],
+	["total", "fs/order-list.column.total"],
+	["items", "fs/order-list.column.items"],
+	["status", "fs/order-list.column.status"],
+	["estimate", "fs/order-list.column.estimate"]
+];
+const CRITERIA = [
+	"search",
+	"placedFrom",
+	"placedTo"
+];
+const OrderListDefinition = defineComponent({
+	name: "OrderList",
+	importPath: "@vtex/faststore/components",
+	component: OrderList,
+	content: OrderListContent,
+	fragment,
+	fetchStrategy: "static",
+	skeleton: OrderListSkeleton,
+	editor: {
+		label: "Order List",
+		category: "content"
+	},
+	schema: {
+		label: {
+			type: "string",
+			default: "Orders",
+			label: "Accessible name"
+		},
+		advance: {
+			type: ["pages", "load-more"],
+			default: "pages",
+			label: "Advance"
+		},
+		startShoppingHref: {
+			type: "link",
+			default: { standard: "home" },
+			label: "Start shopping link"
+		},
+		orderHref: {
+			type: "link",
+			default: { standard: "order" },
+			fills: ["orderId"],
+			label: "Order link"
+		}
+	},
+	guideline: "One page of the shopper orders. The read is fixed at 25 and the cursor, view, search, and placed dates come from the page URL. Pages and load-more both link to the next cursor and load that page again."
+});
+function copy(value, fallback) {
+	return value?.trim() || fallback;
+}
+function advanceMode(value) {
+	return value === "load-more" ? "load-more" : "pages";
+}
+function listView(value) {
+	if (value === "ongoing" || value === "completed" || value === "cancelled") return value;
+	return null;
+}
+function appliedCriteria(params) {
+	const found = [];
+	for (const key of CRITERIA) {
+		const value = params.get(key)?.trim() ?? "";
+		if (value.length > 0) found.push({
+			key,
+			value
+		});
+	}
+	return found;
+}
+function withParams(route, params, edit) {
+	const next = new URLSearchParams(params);
+	edit?.(next);
+	return currentPageWith(route, next);
+}
+function fillCount(template, count, total) {
+	return template.replaceAll("{count}", String(count)).replaceAll("{total}", String(total));
+}
+const HOME_PAGE = { standard: "home" };
+const ORDER_PAGE = { standard: "order" };
+function shoppingHref(value) {
+	if (typeof value !== "string") return value ?? HOME_PAGE;
+	const authored = value.trim();
+	const destination = resolveSafeHref(authored);
+	return authored.length > 0 && destination.safe ? destination.href : HOME_PAGE;
+}
+function connectionOf(data) {
+	if (!data || !Array.isArray(data.edges) || data.pageInfo == null) return null;
+	if (typeof data.totalCount !== "number" || typeof data.totalIncomplete !== "boolean") return null;
+	return data;
+}
+function emptyKind(data, params) {
+	if (data.totalIncomplete) return "walk-stopped";
+	if (data.totalCount > 0) return "past-end";
+	if (appliedCriteria(params).length > 0) return "search";
+	if (listView(params.get("view"))) return "view";
+	return "account";
+}
+function OrderListSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-order-list-skeleton": "",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("span", { "data-fs-order-list-skeleton-row": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-order-list-skeleton-row": "" }),
+			/* @__PURE__ */ jsx("span", { "data-fs-order-list-skeleton-row": "" })
+		]
+	});
+}
+function listLinks(route, searchParams, connection, mode, content) {
+	const nextCursor = connection?.pageInfo.hasNextPage ? connection.pageInfo.endCursor : null;
+	return {
+		nextHref: nextCursor && nextCursor.length > 0 ? withParams(route, searchParams, (next) => {
+			next.set("after", nextCursor);
+		}) : null,
+		firstHref: (searchParams.get("after") ?? "").trim().length > 0 ? withParams(route, searchParams, (next) => {
+			next.delete("after");
+		}) : null,
+		clearHref: withParams(route, searchParams, (next) => {
+			next.delete("search");
+			next.delete("placedFrom");
+			next.delete("placedTo");
+			next.delete("after");
+		}),
+		retryHref: withParams(route, searchParams),
+		advanceLabel: copy(mode === "load-more" ? content?.loadMore : content?.next, mode === "load-more" ? DEFAULTS.loadMore : DEFAULTS.next)
+	};
+}
+function countSentence(connection, content) {
+	return copy(connection.totalIncomplete ? content?.countIncomplete : content?.count, connection.totalIncomplete ? DEFAULTS.countIncomplete : DEFAULTS.count);
+}
+function OrderList({ label, advance, startShoppingHref, orderHref = ORDER_PAGE, $content, $data, className, ref }) {
+	const route = useStorefrontRoute();
+	const searchParams = useStorefrontSearchParams();
+	const mode = advanceMode(advance);
+	const regionLabel = copy($content?.label, copy(label, DEFAULTS.label));
+	const connection = connectionOf($data);
+	const links = listLinks(route, searchParams, connection, mode, $content);
+	return /* @__PURE__ */ jsx("section", {
+		ref,
+		"aria-label": regionLabel,
+		className,
+		"data-fs-order-list": "",
+		"data-fs-order-list-advance": mode,
+		children: connection && connection.edges.length > 0 ? /* @__PURE__ */ jsx(OrderPage, {
+			connection,
+			countLabel: countSentence(connection, $content),
+			advanceLabel: links.advanceLabel,
+			firstLabel: copy($content?.firstPage, DEFAULTS.firstPage),
+			nextHref: links.nextHref,
+			firstHref: links.firstHref,
+			orderHref
+		}) : /* @__PURE__ */ jsx(OrderEmpty, {
+			kind: connection ? emptyKind(connection, searchParams) : "error",
+			content: $content,
+			criteria: appliedCriteria(searchParams),
+			advanceLabel: links.advanceLabel,
+			nextHref: links.nextHref,
+			firstHref: links.firstHref,
+			clearHref: links.clearHref,
+			retryHref: links.retryHref,
+			startHref: shoppingHref(startShoppingHref)
+		})
+	});
+}
+function OrderColumns() {
+	const intl = useIntl();
+	return /* @__PURE__ */ jsx("div", {
+		"data-fs-order-list-columns": "",
+		children: COLUMNS.map(([name, id]) => /* @__PURE__ */ jsx("span", {
+			"data-fs-order-list-column": name,
+			children: intl.formatMessage({ id })
+		}, name))
+	});
+}
+function OrderPage({ connection, countLabel, advanceLabel, firstLabel, nextHref, firstHref, orderHref }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("p", {
+			"data-fs-order-list-count": "",
+			"data-fs-order-list-count-incomplete": connection.totalIncomplete ? "" : void 0,
+			children: fillCount(countLabel, connection.edges.length, connection.totalCount)
+		}),
+		/* @__PURE__ */ jsx(OrderColumns, {}),
+		connection.edges.map((edge) => /* @__PURE__ */ jsx(OrderListRow, {
+			$data: edge.node,
+			href: orderHref
+		}, edge.node.id)),
+		firstHref ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: firstHref,
+			"data-fs-order-list-first": "",
+			children: firstLabel
+		}) : null,
+		nextHref ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: nextHref,
+			"data-fs-order-list-next": "",
+			children: advanceLabel
+		}) : null
+	] });
+}
+function OrderEmpty({ kind, content, criteria, advanceLabel, nextHref, firstHref, clearHref, retryHref, startHref }) {
+	if (kind === "error") return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+		"data-fs-order-list-error": "",
+		children: copy(content?.error, DEFAULTS.error)
+	}), /* @__PURE__ */ jsx(StorefrontLink, {
+		href: retryHref,
+		"data-fs-order-list-retry": "",
+		children: copy(content?.retry, DEFAULTS.retry)
+	})] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("p", {
+			"data-fs-order-list-empty": kind,
+			children: emptySentence(kind, content)
+		}),
+		kind === "search" ? /* @__PURE__ */ jsx(Criteria, { criteria }) : null,
+		kind === "search" ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: clearHref,
+			"data-fs-order-list-clear": "",
+			children: copy(content?.clear, DEFAULTS.clear)
+		}) : null,
+		kind === "account" ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: startHref,
+			"data-fs-order-list-start": "",
+			children: copy(content?.startShopping, DEFAULTS.startShopping)
+		}) : null,
+		kind === "past-end" && firstHref ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: firstHref,
+			"data-fs-order-list-first": "",
+			children: copy(content?.firstPage, DEFAULTS.firstPage)
+		}) : null,
+		kind === "walk-stopped" && nextHref ? /* @__PURE__ */ jsx(StorefrontLink, {
+			href: nextHref,
+			"data-fs-order-list-next": "",
+			children: advanceLabel
+		}) : null
+	] });
+}
+function emptySentence(kind, content) {
+	switch (kind) {
+		case "account": return copy(content?.emptyAccount, DEFAULTS.emptyAccount);
+		case "view": return copy(content?.emptyView, DEFAULTS.emptyView);
+		case "search": return copy(content?.emptySearch, DEFAULTS.emptySearch);
+		case "past-end": return copy(content?.pastEnd, DEFAULTS.pastEnd);
+		case "walk-stopped": return copy(content?.walkStopped, DEFAULTS.walkStopped);
+	}
+}
+function Criteria({ criteria }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-fs-order-list-criteria": "",
+		children: criteria.map((item) => /* @__PURE__ */ jsx("li", {
+			"data-fs-order-list-criterion": item.key,
+			children: item.value
+		}, item.key))
+	});
+}
+//#endregion
+export { OrderList, OrderListContent, OrderListDefinition, OrderListSkeleton };
+
+//# sourceMappingURL=order-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"order-list.js","names":[],"sources":["../../../src/matter/order-list/order-list.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\nimport { type CurrentRoute, currentPageWith } from '../../sdk/navigation/current-page.js';\nimport { StorefrontLink } from '../../sdk/navigation/storefront-link.js';\nimport type { PageRef } from '../../sdk/navigation/types.js';\nimport { useStorefrontRoute } from '../../sdk/navigation/use-storefront-route.js';\nimport { useStorefrontSearchParams } from '../../sdk/navigation/use-storefront-search-params.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { type OrderListItemData, OrderListRow } from '../order-list-row/order-list-row.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderListData on Query {\n    customerOrders(first: 25, after: $after, filter: $filter) {\n      edges {\n        node {\n          ...OrderListRowData\n        }\n      }\n      pageInfo {\n        hasNextPage\n        endCursor\n      }\n      totalCount\n      totalIncomplete\n    }\n  }\n\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 const OrderListContent = defineContentType({\n  id: 'order-list',\n  title: 'Order List',\n  description: 'The count, empty, error, and advance sentences for the orders list.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      label: { type: 'string', title: 'Accessible name' },\n      count: { type: 'string', title: 'Count' },\n      countIncomplete: { type: 'string', title: 'Incomplete count' },\n      emptyAccount: { type: 'string', title: 'Empty account' },\n      emptyView: { type: 'string', title: 'Empty view' },\n      emptySearch: { type: 'string', title: 'Empty search' },\n      pastEnd: { type: 'string', title: 'Past the end' },\n      walkStopped: { type: 'string', title: 'Walk stopped' },\n      error: { type: 'string', title: 'Error' },\n      retry: { type: 'string', title: 'Retry' },\n      next: { type: 'string', title: 'Next page' },\n      loadMore: { type: 'string', title: 'Load more' },\n      firstPage: { type: 'string', title: 'First page' },\n      clear: { type: 'string', title: 'Clear search' },\n      startShopping: { type: 'string', title: 'Start shopping' },\n    },\n  },\n});\n\nexport type OrderListAdvance = 'pages' | 'load-more';\n\nexport type OrderListContentValue = ContentValue<typeof OrderListContent>;\n\nexport type OrderListData = {\n  edges: Array<{ node: OrderListItemData }>;\n  pageInfo: { hasNextPage: boolean; endCursor: string | null };\n  totalCount: number;\n  totalIncomplete: boolean;\n};\n\nexport type OrderListProps = Readonly<{\n  /** Accessible name of the list region. */\n  label?: string;\n  advance?: OrderListAdvance;\n  /** Link offered when the account has no orders. */\n  startShoppingHref?: PageRef | string;\n  /** The order page each row links to; the row fills `orderId`, or appends it to a string path. */\n  orderHref?: PageRef | string;\n  $content?: OrderListContentValue;\n  $data?: OrderListData | null;\n  className?: string;\n  ref?: Ref<HTMLElement>;\n}>;\n\nconst DEFAULTS = {\n  label: 'Orders',\n  count: '{count} of {total}',\n  countIncomplete: '{count} of {total}, count incomplete',\n  emptyAccount: 'You have no orders yet',\n  emptyView: 'No orders in this view',\n  emptySearch: 'No orders match this search',\n  pastEnd: 'This page has no orders',\n  walkStopped: 'More orders may exist',\n  error: 'Could not load orders',\n  retry: 'Try again',\n  next: 'Next page',\n  loadMore: 'Load more',\n  firstPage: 'First page',\n  clear: 'Clear search',\n  startShopping: 'Start shopping',\n} as const;\n\nconst COLUMNS = [\n  ['id', 'fs/order-list.column.id'],\n  ['placed', 'fs/order-list.column.placed'],\n  ['total', 'fs/order-list.column.total'],\n  ['items', 'fs/order-list.column.items'],\n  ['status', 'fs/order-list.column.status'],\n  ['estimate', 'fs/order-list.column.estimate'],\n] as const satisfies ReadonlyArray<readonly [string, MessageId]>;\n\nconst CRITERIA = ['search', 'placedFrom', 'placedTo'] as const;\n\ntype CriterionKey = (typeof CRITERIA)[number];\n\ntype EmptyKind = 'account' | 'view' | 'search' | 'past-end' | 'walk-stopped';\n\nexport const OrderListDefinition = defineComponent<OrderListProps>({\n  name: 'OrderList',\n  importPath: '@vtex/faststore/components',\n  component: OrderList,\n  content: OrderListContent,\n  fragment,\n  fetchStrategy: 'static',\n  skeleton: OrderListSkeleton,\n  editor: { label: 'Order List', category: 'content' },\n  schema: {\n    label: { type: 'string', default: 'Orders', label: 'Accessible name' },\n    advance: { type: ['pages', 'load-more'] as const, default: 'pages', label: 'Advance' },\n    startShoppingHref: { type: 'link', default: { standard: 'home' }, label: 'Start shopping link' },\n    orderHref: { type: 'link', default: { standard: 'order' }, fills: ['orderId'], label: 'Order link' },\n  },\n  guideline:\n    'One page of the shopper orders. The read is fixed at 25 and the cursor, view, search, and placed dates come from the page URL. Pages and load-more both link to the next cursor and load that page again.',\n});\n\nfunction copy(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction advanceMode(value: string | undefined): OrderListAdvance {\n  return value === 'load-more' ? 'load-more' : 'pages';\n}\n\nfunction listView(value: string | null): 'ongoing' | 'completed' | 'cancelled' | null {\n  if (value === 'ongoing' || value === 'completed' || value === 'cancelled') {\n    return value;\n  }\n  return null;\n}\n\nfunction appliedCriteria(params: URLSearchParams): Array<{ key: CriterionKey; value: string }> {\n  const found: Array<{ key: CriterionKey; value: string }> = [];\n  for (const key of CRITERIA) {\n    const value = params.get(key)?.trim() ?? '';\n    if (value.length > 0) {\n      found.push({ key, value });\n    }\n  }\n  return found;\n}\n\nfunction withParams(\n  route: CurrentRoute,\n  params: URLSearchParams,\n  edit?: (next: URLSearchParams) => void,\n): PageRef | string {\n  const next = new URLSearchParams(params);\n  edit?.(next);\n  return currentPageWith(route, next);\n}\n\nfunction fillCount(template: string, count: number, total: number): string {\n  return template.replaceAll('{count}', String(count)).replaceAll('{total}', String(total));\n}\n\nconst HOME_PAGE: PageRef = { standard: 'home' };\nconst ORDER_PAGE: PageRef = { standard: 'order' };\n\nfunction shoppingHref(value: PageRef | string | undefined): PageRef | string {\n  if (typeof value !== 'string') {\n    return value ?? HOME_PAGE;\n  }\n  const authored = value.trim();\n  const destination = resolveSafeHref(authored);\n  return authored.length > 0 && destination.safe ? destination.href : HOME_PAGE;\n}\n\nfunction connectionOf(data: OrderListData | null | undefined): OrderListData | null {\n  if (!data || !Array.isArray(data.edges) || data.pageInfo == null) {\n    return null;\n  }\n  if (typeof data.totalCount !== 'number' || typeof data.totalIncomplete !== 'boolean') {\n    return null;\n  }\n  return data;\n}\n\nfunction emptyKind(data: OrderListData, params: URLSearchParams): EmptyKind {\n  if (data.totalIncomplete) {\n    return 'walk-stopped';\n  }\n  if (data.totalCount > 0) {\n    return 'past-end';\n  }\n  if (appliedCriteria(params).length > 0) {\n    return 'search';\n  }\n  if (listView(params.get('view'))) {\n    return 'view';\n  }\n  return 'account';\n}\n\nexport function OrderListSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>) {\n  return (\n    <div {...props} className={className} data-fs-order-list-skeleton=\"\" aria-hidden=\"true\">\n      <span data-fs-order-list-skeleton-row=\"\" />\n      <span data-fs-order-list-skeleton-row=\"\" />\n      <span data-fs-order-list-skeleton-row=\"\" />\n    </div>\n  );\n}\n\ntype ListLinks = {\n  nextHref: PageRef | string | null;\n  firstHref: PageRef | string | null;\n  clearHref: PageRef | string;\n  retryHref: PageRef | string;\n  advanceLabel: string;\n};\n\nfunction listLinks(\n  route: CurrentRoute,\n  searchParams: URLSearchParams,\n  connection: OrderListData | null,\n  mode: OrderListAdvance,\n  content: OrderListContentValue | undefined,\n): ListLinks {\n  const nextCursor = connection?.pageInfo.hasNextPage ? connection.pageInfo.endCursor : null;\n  const nextHref =\n    nextCursor && nextCursor.length > 0\n      ? withParams(route, searchParams, (next) => {\n          next.set('after', nextCursor);\n        })\n      : null;\n  const showFirst = (searchParams.get('after') ?? '').trim().length > 0;\n  const firstHref = showFirst\n    ? withParams(route, searchParams, (next) => {\n        next.delete('after');\n      })\n    : null;\n  const clearHref = withParams(route, searchParams, (next) => {\n    next.delete('search');\n    next.delete('placedFrom');\n    next.delete('placedTo');\n    next.delete('after');\n  });\n  return {\n    nextHref,\n    firstHref,\n    clearHref,\n    retryHref: withParams(route, searchParams),\n    advanceLabel: copy(\n      mode === 'load-more' ? content?.loadMore : content?.next,\n      mode === 'load-more' ? DEFAULTS.loadMore : DEFAULTS.next,\n    ),\n  };\n}\n\nfunction countSentence(connection: OrderListData, content: OrderListContentValue | undefined): string {\n  return copy(\n    connection.totalIncomplete ? content?.countIncomplete : content?.count,\n    connection.totalIncomplete ? DEFAULTS.countIncomplete : DEFAULTS.count,\n  );\n}\n\nexport function OrderList({\n  label,\n  advance,\n  startShoppingHref,\n  orderHref = ORDER_PAGE,\n  $content,\n  $data,\n  className,\n  ref,\n}: OrderListProps) {\n  const route = useStorefrontRoute();\n  const searchParams = useStorefrontSearchParams();\n  const mode = advanceMode(advance);\n  const regionLabel = copy($content?.label, copy(label, DEFAULTS.label));\n  const connection = connectionOf($data);\n  const links = listLinks(route, searchParams, connection, mode, $content);\n\n  return (\n    <section\n      ref={ref}\n      aria-label={regionLabel}\n      className={className}\n      data-fs-order-list=\"\"\n      data-fs-order-list-advance={mode}\n    >\n      {connection && connection.edges.length > 0 ? (\n        <OrderPage\n          connection={connection}\n          countLabel={countSentence(connection, $content)}\n          advanceLabel={links.advanceLabel}\n          firstLabel={copy($content?.firstPage, DEFAULTS.firstPage)}\n          nextHref={links.nextHref}\n          firstHref={links.firstHref}\n          orderHref={orderHref}\n        />\n      ) : (\n        <OrderEmpty\n          kind={connection ? emptyKind(connection, searchParams) : 'error'}\n          content={$content}\n          criteria={appliedCriteria(searchParams)}\n          advanceLabel={links.advanceLabel}\n          nextHref={links.nextHref}\n          firstHref={links.firstHref}\n          clearHref={links.clearHref}\n          retryHref={links.retryHref}\n          startHref={shoppingHref(startShoppingHref)}\n        />\n      )}\n    </section>\n  );\n}\n\ntype OrderPageProps = Readonly<{\n  connection: OrderListData;\n  countLabel: string;\n  advanceLabel: string;\n  firstLabel: string;\n  nextHref: PageRef | string | null;\n  firstHref: PageRef | string | null;\n  orderHref: PageRef | string;\n}>;\n\nfunction OrderColumns() {\n  const intl = useIntl();\n\n  return (\n    <div data-fs-order-list-columns=\"\">\n      {COLUMNS.map(([name, id]) => (\n        <span key={name} data-fs-order-list-column={name}>\n          {intl.formatMessage({ id })}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction OrderPage({\n  connection,\n  countLabel,\n  advanceLabel,\n  firstLabel,\n  nextHref,\n  firstHref,\n  orderHref,\n}: OrderPageProps) {\n  return (\n    <>\n      <p data-fs-order-list-count=\"\" data-fs-order-list-count-incomplete={connection.totalIncomplete ? '' : undefined}>\n        {fillCount(countLabel, connection.edges.length, connection.totalCount)}\n      </p>\n      <OrderColumns />\n      {connection.edges.map((edge) => (\n        <OrderListRow key={edge.node.id} $data={edge.node} href={orderHref} />\n      ))}\n      {firstHref ? (\n        <StorefrontLink href={firstHref} data-fs-order-list-first=\"\">\n          {firstLabel}\n        </StorefrontLink>\n      ) : null}\n      {nextHref ? (\n        <StorefrontLink href={nextHref} data-fs-order-list-next=\"\">\n          {advanceLabel}\n        </StorefrontLink>\n      ) : null}\n    </>\n  );\n}\n\ntype OrderEmptyProps = Readonly<{\n  kind: EmptyKind | 'error';\n  content: OrderListContentValue | undefined;\n  criteria: Array<{ key: CriterionKey; value: string }>;\n  advanceLabel: string;\n  nextHref: PageRef | string | null;\n  firstHref: PageRef | string | null;\n  clearHref: PageRef | string;\n  retryHref: PageRef | string;\n  startHref: PageRef | string;\n}>;\n\nfunction OrderEmpty({\n  kind,\n  content,\n  criteria,\n  advanceLabel,\n  nextHref,\n  firstHref,\n  clearHref,\n  retryHref,\n  startHref,\n}: OrderEmptyProps) {\n  if (kind === 'error') {\n    return (\n      <>\n        <p data-fs-order-list-error=\"\">{copy(content?.error, DEFAULTS.error)}</p>\n        <StorefrontLink href={retryHref} data-fs-order-list-retry=\"\">\n          {copy(content?.retry, DEFAULTS.retry)}\n        </StorefrontLink>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <p data-fs-order-list-empty={kind}>{emptySentence(kind, content)}</p>\n      {kind === 'search' ? <Criteria criteria={criteria} /> : null}\n      {kind === 'search' ? (\n        <StorefrontLink href={clearHref} data-fs-order-list-clear=\"\">\n          {copy(content?.clear, DEFAULTS.clear)}\n        </StorefrontLink>\n      ) : null}\n      {kind === 'account' ? (\n        <StorefrontLink href={startHref} data-fs-order-list-start=\"\">\n          {copy(content?.startShopping, DEFAULTS.startShopping)}\n        </StorefrontLink>\n      ) : null}\n      {kind === 'past-end' && firstHref ? (\n        <StorefrontLink href={firstHref} data-fs-order-list-first=\"\">\n          {copy(content?.firstPage, DEFAULTS.firstPage)}\n        </StorefrontLink>\n      ) : null}\n      {kind === 'walk-stopped' && nextHref ? (\n        <StorefrontLink href={nextHref} data-fs-order-list-next=\"\">\n          {advanceLabel}\n        </StorefrontLink>\n      ) : null}\n    </>\n  );\n}\n\nfunction emptySentence(kind: EmptyKind, content: OrderListContentValue | undefined): string {\n  switch (kind) {\n    case 'account':\n      return copy(content?.emptyAccount, DEFAULTS.emptyAccount);\n    case 'view':\n      return copy(content?.emptyView, DEFAULTS.emptyView);\n    case 'search':\n      return copy(content?.emptySearch, DEFAULTS.emptySearch);\n    case 'past-end':\n      return copy(content?.pastEnd, DEFAULTS.pastEnd);\n    case 'walk-stopped':\n      return copy(content?.walkStopped, DEFAULTS.walkStopped);\n  }\n}\n\nfunction Criteria({ criteria }: Readonly<{ criteria: Array<{ key: CriterionKey; value: string }> }>): ReactNode {\n  return (\n    <ul data-fs-order-list-criteria=\"\">\n      {criteria.map((item) => (\n        <li key={item.key} data-fs-order-list-criterion={item.key}>\n          {item.value}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,WAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkC/B,MAAa,mBAAmB,kBAAkB;CAChD,IAAI;CACJ,OAAO;CACP,aAAa;CACb,QAAQ;EACN,MAAM;EACN,sBAAsB;EACtB,YAAY;GACV,OAAO;IAAE,MAAM;IAAU,OAAO;GAAkB;GAClD,OAAO;IAAE,MAAM;IAAU,OAAO;GAAQ;GACxC,iBAAiB;IAAE,MAAM;IAAU,OAAO;GAAmB;GAC7D,cAAc;IAAE,MAAM;IAAU,OAAO;GAAgB;GACvD,WAAW;IAAE,MAAM;IAAU,OAAO;GAAa;GACjD,aAAa;IAAE,MAAM;IAAU,OAAO;GAAe;GACrD,SAAS;IAAE,MAAM;IAAU,OAAO;GAAe;GACjD,aAAa;IAAE,MAAM;IAAU,OAAO;GAAe;GACrD,OAAO;IAAE,MAAM;IAAU,OAAO;GAAQ;GACxC,OAAO;IAAE,MAAM;IAAU,OAAO;GAAQ;GACxC,MAAM;IAAE,MAAM;IAAU,OAAO;GAAY;GAC3C,UAAU;IAAE,MAAM;IAAU,OAAO;GAAY;GAC/C,WAAW;IAAE,MAAM;IAAU,OAAO;GAAa;GACjD,OAAO;IAAE,MAAM;IAAU,OAAO;GAAe;GAC/C,eAAe;IAAE,MAAM;IAAU,OAAO;GAAiB;EAC3D;CACF;AACF,CAAC;AA2BD,MAAM,WAAW;CACf,OAAO;CACP,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,WAAW;CACX,aAAa;CACb,SAAS;CACT,aAAa;CACb,OAAO;CACP,OAAO;CACP,MAAM;CACN,UAAU;CACV,WAAW;CACX,OAAO;CACP,eAAe;AACjB;AAEA,MAAM,UAAU;CACd,CAAC,MAAM,yBAAyB;CAChC,CAAC,UAAU,6BAA6B;CACxC,CAAC,SAAS,4BAA4B;CACtC,CAAC,SAAS,4BAA4B;CACtC,CAAC,UAAU,6BAA6B;CACxC,CAAC,YAAY,+BAA+B;AAC9C;AAEA,MAAM,WAAW;CAAC;CAAU;CAAc;AAAU;AAMpD,MAAa,sBAAsB,gBAAgC;CACjE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,SAAS;CACT;CACA,eAAe;CACf,UAAU;CACV,QAAQ;EAAE,OAAO;EAAc,UAAU;CAAU;CACnD,QAAQ;EACN,OAAO;GAAE,MAAM;GAAU,SAAS;GAAU,OAAO;EAAkB;EACrE,SAAS;GAAE,MAAM,CAAC,SAAS,WAAW;GAAY,SAAS;GAAS,OAAO;EAAU;EACrF,mBAAmB;GAAE,MAAM;GAAQ,SAAS,EAAE,UAAU,OAAO;GAAG,OAAO;EAAsB;EAC/F,WAAW;GAAE,MAAM;GAAQ,SAAS,EAAE,UAAU,QAAQ;GAAG,OAAO,CAAC,SAAS;GAAG,OAAO;EAAa;CACrG;CACA,WACE;AACJ,CAAC;AAED,SAAS,KAAK,OAA2B,UAA0B;CAEjE,OADgB,OAAO,KAAK,KACV;AACpB;AAEA,SAAS,YAAY,OAA6C;CAChE,OAAO,UAAU,cAAc,cAAc;AAC/C;AAEA,SAAS,SAAS,OAAoE;CACpF,IAAI,UAAU,aAAa,UAAU,eAAe,UAAU,aAC5D,OAAO;CAET,OAAO;AACT;AAEA,SAAS,gBAAgB,QAAsE;CAC7F,MAAM,QAAqD,CAAC;CAC5D,KAAK,MAAM,OAAO,UAAU;EAC1B,MAAM,QAAQ,OAAO,IAAI,GAAG,CAAC,EAAE,KAAK,KAAK;EACzC,IAAI,MAAM,SAAS,GACjB,MAAM,KAAK;GAAE;GAAK;EAAM,CAAC;CAE7B;CACA,OAAO;AACT;AAEA,SAAS,WACP,OACA,QACA,MACkB;CAClB,MAAM,OAAO,IAAI,gBAAgB,MAAM;CACvC,OAAO,IAAI;CACX,OAAO,gBAAgB,OAAO,IAAI;AACpC;AAEA,SAAS,UAAU,UAAkB,OAAe,OAAuB;CACzE,OAAO,SAAS,WAAW,WAAW,OAAO,KAAK,CAAC,CAAC,CAAC,WAAW,WAAW,OAAO,KAAK,CAAC;AAC1F;AAEA,MAAM,YAAqB,EAAE,UAAU,OAAO;AAC9C,MAAM,aAAsB,EAAE,UAAU,QAAQ;AAEhD,SAAS,aAAa,OAAuD;CAC3E,IAAI,OAAO,UAAU,UACnB,OAAO,SAAS;CAElB,MAAM,WAAW,MAAM,KAAK;CAC5B,MAAM,cAAc,gBAAgB,QAAQ;CAC5C,OAAO,SAAS,SAAS,KAAK,YAAY,OAAO,YAAY,OAAO;AACtE;AAEA,SAAS,aAAa,MAA8D;CAClF,IAAI,CAAC,QAAQ,CAAC,MAAM,QAAQ,KAAK,KAAK,KAAK,KAAK,YAAY,MAC1D,OAAO;CAET,IAAI,OAAO,KAAK,eAAe,YAAY,OAAO,KAAK,oBAAoB,WACzE,OAAO;CAET,OAAO;AACT;AAEA,SAAS,UAAU,MAAqB,QAAoC;CAC1E,IAAI,KAAK,iBACP,OAAO;CAET,IAAI,KAAK,aAAa,GACpB,OAAO;CAET,IAAI,gBAAgB,MAAM,CAAC,CAAC,SAAS,GACnC,OAAO;CAET,IAAI,SAAS,OAAO,IAAI,MAAM,CAAC,GAC7B,OAAO;CAET,OAAO;AACT;AAEA,SAAgB,kBAAkB,EAAE,WAAW,GAAG,SAAuC;CACvF,OACE,qBAAC,OAAD;EAAK,GAAI;EAAkB;EAAW,+BAA4B;EAAG,eAAY;EAAjF,UAAA;GACE,oBAAC,QAAD,EAAM,mCAAgC,GAAI,CAAA;GAC1C,oBAAC,QAAD,EAAM,mCAAgC,GAAI,CAAA;GAC1C,oBAAC,QAAD,EAAM,mCAAgC,GAAI,CAAA;EACvC;;AAET;AAUA,SAAS,UACP,OACA,cACA,YACA,MACA,SACW;CACX,MAAM,aAAa,YAAY,SAAS,cAAc,WAAW,SAAS,YAAY;CAmBtF,OAAO;EACL,UAlBA,cAAc,WAAW,SAAS,IAC9B,WAAW,OAAO,eAAe,SAAS;GACxC,KAAK,IAAI,SAAS,UAAU;EAC9B,CAAC,IACD;EAeJ,YAdiB,aAAa,IAAI,OAAO,KAAK,GAAA,CAAI,KAAK,CAAC,CAAC,SAAS,IAEhE,WAAW,OAAO,eAAe,SAAS;GACxC,KAAK,OAAO,OAAO;EACrB,CAAC,IACD;EAUF,WATgB,WAAW,OAAO,eAAe,SAAS;GAC1D,KAAK,OAAO,QAAQ;GACpB,KAAK,OAAO,YAAY;GACxB,KAAK,OAAO,UAAU;GACtB,KAAK,OAAO,OAAO;EACrB,CAIU;EACR,WAAW,WAAW,OAAO,YAAY;EACzC,cAAc,KACZ,SAAS,cAAc,SAAS,WAAW,SAAS,MACpD,SAAS,cAAc,SAAS,WAAW,SAAS,IACtD;CACF;AACF;AAEA,SAAS,cAAc,YAA2B,SAAoD;CACpG,OAAO,KACL,WAAW,kBAAkB,SAAS,kBAAkB,SAAS,OACjE,WAAW,kBAAkB,SAAS,kBAAkB,SAAS,KACnE;AACF;AAEA,SAAgB,UAAU,EACxB,OACA,SACA,mBACA,YAAY,YACZ,UACA,OACA,WACA,OACiB;CACjB,MAAM,QAAQ,mBAAmB;CACjC,MAAM,eAAe,0BAA0B;CAC/C,MAAM,OAAO,YAAY,OAAO;CAChC,MAAM,cAAc,KAAK,UAAU,OAAO,KAAK,OAAO,SAAS,KAAK,CAAC;CACrE,MAAM,aAAa,aAAa,KAAK;CACrC,MAAM,QAAQ,UAAU,OAAO,cAAc,YAAY,MAAM,QAAQ;CAEvE,OACE,oBAAC,WAAD;EACO;EACL,cAAY;EACD;EACX,sBAAmB;EACnB,8BAA4B;EAE3B,UAAA,cAAc,WAAW,MAAM,SAAS,IACvC,oBAAC,WAAD;GACc;GACZ,YAAY,cAAc,YAAY,QAAQ;GAC9C,cAAc,MAAM;GACpB,YAAY,KAAK,UAAU,WAAW,SAAS,SAAS;GACxD,UAAU,MAAM;GAChB,WAAW,MAAM;GACN;EACZ,CAAA,IAED,oBAAC,YAAD;GACE,MAAM,aAAa,UAAU,YAAY,YAAY,IAAI;GACzD,SAAS;GACT,UAAU,gBAAgB,YAAY;GACtC,cAAc,MAAM;GACpB,UAAU,MAAM;GAChB,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,WAAW,MAAM;GACjB,WAAW,aAAa,iBAAiB;EAC1C,CAAA;CAEI,CAAA;AAEb;AAYA,SAAS,eAAe;CACtB,MAAM,OAAO,QAAQ;CAErB,OACE,oBAAC,OAAD;EAAK,8BAA2B;EAC7B,UAAA,QAAQ,KAAK,CAAC,MAAM,QACnB,oBAAC,QAAD;GAAiB,6BAA2B;GACzC,UAAA,KAAK,cAAc,EAAE,GAAG,CAAC;EACtB,GAFK,IAEL,CACP;CACE,CAAA;AAET;AAEA,SAAS,UAAU,EACjB,YACA,YACA,cACA,YACA,UACA,WACA,aACiB;CACjB,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,KAAD;GAAG,4BAAyB;GAAG,uCAAqC,WAAW,kBAAkB,KAAK,KAAA;GACnG,UAAA,UAAU,YAAY,WAAW,MAAM,QAAQ,WAAW,UAAU;EACpE,CAAA;EACH,oBAAC,cAAD,CAAe,CAAA;EACd,WAAW,MAAM,KAAK,SACrB,oBAAC,cAAD;GAAiC,OAAO,KAAK;GAAM,MAAM;EAAY,GAAlD,KAAK,KAAK,EAAwC,CACtE;EACA,YACC,oBAAC,gBAAD;GAAgB,MAAM;GAAW,4BAAyB;GACvD,UAAA;EACa,CAAA,IACd;EACH,WACC,oBAAC,gBAAD;GAAgB,MAAM;GAAU,2BAAwB;GACrD,UAAA;EACa,CAAA,IACd;CACJ,EAAA,CAAA;AAEN;AAcA,SAAS,WAAW,EAClB,MACA,SACA,UACA,cACA,UACA,WACA,WACA,WACA,aACkB;CAClB,IAAI,SAAS,SACX,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EAAG,4BAAyB;EAAI,UAAA,KAAK,SAAS,OAAO,SAAS,KAAK;CAAK,CAAA,GACxE,oBAAC,gBAAD;EAAgB,MAAM;EAAW,4BAAyB;EACvD,UAAA,KAAK,SAAS,OAAO,SAAS,KAAK;CACtB,CAAA,CAChB,EAAA,CAAA;CAIN,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,KAAD;GAAG,4BAA0B;GAAO,UAAA,cAAc,MAAM,OAAO;EAAK,CAAA;EACnE,SAAS,WAAW,oBAAC,UAAD,EAAoB,SAAW,CAAA,IAAI;EACvD,SAAS,WACR,oBAAC,gBAAD;GAAgB,MAAM;GAAW,4BAAyB;GACvD,UAAA,KAAK,SAAS,OAAO,SAAS,KAAK;EACtB,CAAA,IACd;EACH,SAAS,YACR,oBAAC,gBAAD;GAAgB,MAAM;GAAW,4BAAyB;GACvD,UAAA,KAAK,SAAS,eAAe,SAAS,aAAa;EACtC,CAAA,IACd;EACH,SAAS,cAAc,YACtB,oBAAC,gBAAD;GAAgB,MAAM;GAAW,4BAAyB;GACvD,UAAA,KAAK,SAAS,WAAW,SAAS,SAAS;EAC9B,CAAA,IACd;EACH,SAAS,kBAAkB,WAC1B,oBAAC,gBAAD;GAAgB,MAAM;GAAU,2BAAwB;GACrD,UAAA;EACa,CAAA,IACd;CACJ,EAAA,CAAA;AAEN;AAEA,SAAS,cAAc,MAAiB,SAAoD;CAC1F,QAAQ,MAAR;EACE,KAAK,WACH,OAAO,KAAK,SAAS,cAAc,SAAS,YAAY;EAC1D,KAAK,QACH,OAAO,KAAK,SAAS,WAAW,SAAS,SAAS;EACpD,KAAK,UACH,OAAO,KAAK,SAAS,aAAa,SAAS,WAAW;EACxD,KAAK,YACH,OAAO,KAAK,SAAS,SAAS,SAAS,OAAO;EAChD,KAAK,gBACH,OAAO,KAAK,SAAS,aAAa,SAAS,WAAW;CAC1D;AACF;AAEA,SAAS,SAAS,EAAE,YAA4F;CAC9G,OACE,oBAAC,MAAD;EAAI,+BAA4B;EAC7B,UAAA,SAAS,KAAK,SACb,oBAAC,MAAD;GAAmB,gCAA8B,KAAK;GACnD,UAAA,KAAK;EACJ,GAFK,KAAK,GAEV,CACL;CACC,CAAA;AAER"}

package/dist/matter/order-list-row/order-list-row.d.ts

@@ -0,0 +1,44 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { PageRef } from "../../sdk/navigation/types.js";
+import { ComponentPropsWithRef, Ref } from "react";
+//#region src/matter/order-list-row/order-list-row.d.ts
+export type OrderListItemData = {
+  id: string;
+  placedAt: string | null;
+  total: {
+    amount: string | number;
+    currencyCode: string;
+  } | null;
+  itemCount: number | null;
+  completion: {
+    view: string;
+    label: string;
+  };
+  shippingEstimatedDateMin: string | null;
+  shippingEstimatedDateMax: string | null;
+};
+export type OrderListRowProps = Readonly<{
+  $data: OrderListItemData;
+  /**
+   * The order page; the row fills `orderId`. A string is the path the orders live under, and the row
+   * appends its id. `OrderList` passes its `orderHref`.
+   */
+  href?: PageRef | string;
+  className?: string;
+  ref?: Ref<HTMLAnchorElement>;
+}>;
+export declare const OrderListRowDefinition: ComponentDefinition<Readonly<{
+  $data: OrderListItemData;
+  /**
+   * The order page; the row fills `orderId`. A string is the path the orders live under, and the row
+   * appends its id. `OrderList` passes its `orderHref`.
+   */
+  href?: PageRef | string;
+  className?: string;
+  ref?: Ref<HTMLAnchorElement>;
+}>>;
+export declare function OrderListRowSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderListRow({ $data, href, className, ref }: OrderListRowProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=order-list-row.d.ts.map

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

@@ -0,0 +1,127 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useStorefrontFormatters } from "../../sdk/format/client.js";
+import { StorefrontLink } from "../../sdk/navigation/storefront-link.js";
+import { OrderStatusBadge } from "../../particles/order-status-badge/order-status-badge.js";
+import { completionBadgeModel } from "../../sdk/orders/completion-badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const OrderListRowDefinition = defineComponent({
+	name: "OrderListRow",
+	importPath: "@vtex/faststore/components",
+	component: OrderListRow,
+	fragment: `
+  fragment OrderListRowData on CustomerOrderListItem {
+    id
+    placedAt
+    total {
+      amount
+      currencyCode
+    }
+    itemCount
+    completion {
+      view
+      label
+    }
+    shippingEstimatedDateMin
+    shippingEstimatedDateMax
+  }
+`,
+	skeleton: OrderListRowSkeleton,
+	editor: {
+		label: "Order List Row",
+		category: "content"
+	},
+	schema: {},
+	guideline: "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."
+});
+function instant(value) {
+	if (!value) return null;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? null : date;
+}
+function moneyAmount(amount) {
+	const value = typeof amount === "number" ? amount : Number(amount);
+	return Number.isFinite(value) ? value : null;
+}
+function estimateValue(item) {
+	if (item.completion.view !== "ONGOING") return null;
+	const max = item.shippingEstimatedDateMax?.trim();
+	if (max) return max;
+	return item.shippingEstimatedDateMin?.trim() || null;
+}
+function OrderListRowSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-order-list-row-skeleton": "",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", { "data-fs-order-list-row-skeleton-fact": "" }), /* @__PURE__ */ jsx("span", { "data-fs-order-list-row-skeleton-fact": "" })]
+	});
+}
+const ORDER_PAGE = { standard: "order" };
+/**
+* The row's own order: a reference gets `orderId` as a param, and a string is the path the orders
+* live under, which gets the encoded id as its last segment (before any query or hash).
+*/
+function orderTarget(href, orderId) {
+	if (typeof href !== "string") return {
+		...href,
+		params: {
+			...href.params,
+			orderId
+		}
+	};
+	const cut = href.search(/[?#]/);
+	const path = cut === -1 ? href : href.slice(0, cut);
+	const tail = cut === -1 ? "" : href.slice(cut);
+	return `${path.replace(/\/+$/, "")}/${encodeURIComponent(orderId)}${tail}`;
+}
+function OrderListRow({ $data, href = ORDER_PAGE, className, ref }) {
+	const { formatMoney, formatDate } = useStorefrontFormatters();
+	const badge = completionBadgeModel($data.completion);
+	const placed = instant($data.placedAt);
+	const amount = $data.total ? moneyAmount($data.total.amount) : null;
+	const estimate = instant(estimateValue($data));
+	return /* @__PURE__ */ jsxs(StorefrontLink, {
+		ref,
+		href: orderTarget(href, $data.id),
+		"aria-label": $data.id,
+		className,
+		"data-fs-order-list-row": "",
+		"data-fs-order-list-row-state": badge?.state,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-fs-order-list-row-id": "",
+				children: $data.id
+			}),
+			placed ? /* @__PURE__ */ jsx("time", {
+				dateTime: $data.placedAt ?? void 0,
+				"data-fs-order-list-row-placed": "",
+				children: formatDate(placed)
+			}) : null,
+			amount != null && $data.total ? /* @__PURE__ */ jsx("span", {
+				"data-fs-order-list-row-total": "",
+				children: formatMoney(amount, { currency: $data.total.currencyCode })
+			}) : null,
+			$data.itemCount == null ? null : /* @__PURE__ */ jsx("span", {
+				"data-fs-order-list-row-count": "",
+				children: $data.itemCount
+			}),
+			badge ? /* @__PURE__ */ jsx(OrderStatusBadge, {
+				state: badge.state,
+				tone: badge.tone,
+				label: badge.label
+			}) : null,
+			estimate ? /* @__PURE__ */ jsx("time", {
+				dateTime: estimateValue($data) ?? void 0,
+				"data-fs-order-list-row-estimate": "",
+				children: formatDate(estimate)
+			}) : null
+		]
+	});
+}
+//#endregion
+export { OrderListRow, OrderListRowDefinition, OrderListRowSkeleton };
+
+//# sourceMappingURL=order-list-row.js.map

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

@@ -0,0 +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"}