@vtex/faststore 0.0.6 → 0.0.8

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

@@ -0,0 +1,110 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { Ref } from "react";
+//#region src/matter/order-cancel/order-cancel.d.ts
+export declare const OrderCancelContent: {
+  readonly id: "order-cancel";
+  readonly title: "Order Cancel";
+  readonly description: "Confirmation copy and the optional cancellation reasons for one order.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly trigger: {
+        readonly type: "string";
+        readonly default: "Cancel order";
+        readonly title: "Trigger";
+      };
+      readonly title: {
+        readonly type: "string";
+        readonly default: "Cancel this order?";
+        readonly title: "Title";
+      };
+      readonly description: {
+        readonly type: "string";
+        readonly default: "This cannot be undone.";
+        readonly title: "Description";
+      };
+      readonly confirm: {
+        readonly type: "string";
+        readonly default: "Cancel order";
+        readonly title: "Confirm";
+      };
+      readonly dismiss: {
+        readonly type: "string";
+        readonly default: "Keep order";
+        readonly title: "Dismiss";
+      };
+      readonly other: {
+        readonly type: "string";
+        readonly default: "Other";
+        readonly title: "Other";
+      };
+      readonly otherField: {
+        readonly type: "string";
+        readonly default: "Reason";
+        readonly title: "Other field";
+      };
+      readonly success: {
+        readonly type: "string";
+        readonly default: "Your order was cancelled.";
+        readonly title: "Success";
+      };
+      readonly failure: {
+        readonly type: "string";
+        readonly default: "Unable to cancel the order. Please try again.";
+        readonly title: "Failure";
+      };
+      readonly dismissMessage: {
+        readonly type: "string";
+        readonly default: "Dismiss";
+        readonly title: "Dismiss message";
+      };
+      readonly reasons: {
+        readonly type: "array";
+        readonly title: "Reasons";
+        readonly items: {
+          readonly type: "object";
+          readonly additionalProperties: false;
+          readonly required: readonly ["label"];
+          readonly properties: {
+            readonly label: {
+              readonly type: "string";
+              readonly minLength: 1;
+              readonly title: "Label";
+            };
+          };
+        };
+      };
+    };
+  };
+};
+export type OrderCancelContentValue = ContentValue<typeof OrderCancelContent>;
+/** Unwrapped `customerOrder`. A single-root fragment binds `$data` to that field. */
+export type OrderCancelData = {
+  id: string;
+  status: string;
+  allowCancellation: boolean;
+};
+export type OrderCancelProps = Readonly<{
+  $data?: OrderCancelData | null;
+  $actions?: ComponentActions;
+  $content?: OrderCancelContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>;
+export declare const OrderCancelDefinition: ComponentDefinition<Readonly<{
+  $data?: OrderCancelData | null;
+  $actions?: ComponentActions;
+  $content?: OrderCancelContentValue;
+  className?: string;
+  ref?: Ref<HTMLDivElement>;
+}>>;
+export declare function OrderCancelSkeleton({ className }: Readonly<{
+  className?: string;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderCancel({ $data, $actions: $actionsProp, $content, className, ref }: OrderCancelProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-cancel.d.ts.map

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

@@ -0,0 +1,344 @@
+"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 { useIntl } from "../../sdk/i18n/client.js";
+import { useStorefrontNavigation } from "../../sdk/navigation/use-storefront-navigation.js";
+import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { Button } from "../../particles/button/button.js";
+import { AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogPopup, AlertDialogPortal, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport } from "../../particles/alert-dialog/alert-dialog.js";
+import { Radio } from "../../particles/radio/radio.js";
+import { Input } from "../../particles/input/input.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/order-cancel/order-cancel.tsx
+const fragment = `
+  fragment OrderCancelData on Query {
+    customerOrder(id: $orderId) {
+      id
+      status
+      allowCancellation
+    }
+  }
+`;
+/**
+* OMS statuses that already mean a cancellation was requested or finished.
+* `allowCancellation` can stay true in the intermediate ones, so the flag alone
+* would show the button again.
+*/
+const HIDDEN_STATUSES = /* @__PURE__ */ new Set([
+	"request-cancel",
+	"cancellation-requested",
+	"cancellation-requested-with-ack",
+	"cancel",
+	"canceled"
+]);
+const OTHER = "other";
+/** Matches `CUSTOMER_ORDER_CANCEL_REASON_MAX_LENGTH` in the orders module. */
+const REASON_MAX_LENGTH = 500;
+const REASON_IDS = [
+	"fs/order-cancel.reason.changed-mind",
+	"fs/order-cancel.reason.bought-by-mistake",
+	"fs/order-cancel.reason.better-price",
+	"fs/order-cancel.reason.slow-delivery"
+];
+const OrderCancelContent = defineContentType({
+	id: "order-cancel",
+	title: "Order Cancel",
+	description: "Confirmation copy and the optional cancellation reasons for one order.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			trigger: {
+				type: "string",
+				default: "Cancel order",
+				title: "Trigger"
+			},
+			title: {
+				type: "string",
+				default: "Cancel this order?",
+				title: "Title"
+			},
+			description: {
+				type: "string",
+				default: "This cannot be undone.",
+				title: "Description"
+			},
+			confirm: {
+				type: "string",
+				default: "Cancel order",
+				title: "Confirm"
+			},
+			dismiss: {
+				type: "string",
+				default: "Keep order",
+				title: "Dismiss"
+			},
+			other: {
+				type: "string",
+				default: "Other",
+				title: "Other"
+			},
+			otherField: {
+				type: "string",
+				default: "Reason",
+				title: "Other field"
+			},
+			success: {
+				type: "string",
+				default: "Your order was cancelled.",
+				title: "Success"
+			},
+			failure: {
+				type: "string",
+				default: "Unable to cancel the order. Please try again.",
+				title: "Failure"
+			},
+			dismissMessage: {
+				type: "string",
+				default: "Dismiss",
+				title: "Dismiss message"
+			},
+			reasons: {
+				type: "array",
+				title: "Reasons",
+				items: {
+					type: "object",
+					additionalProperties: false,
+					required: ["label"],
+					properties: { label: {
+						type: "string",
+						minLength: 1,
+						title: "Label"
+					} }
+				}
+			}
+		}
+	}
+});
+const OrderCancelDefinition = defineComponent({
+	name: "OrderCancel",
+	importPath: "@vtex/faststore/components",
+	component: OrderCancel,
+	fragment,
+	skeleton: OrderCancelSkeleton,
+	actions: { order: ["cancel"] },
+	content: OrderCancelContent,
+	editor: {
+		label: "Order Cancel",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Cancels one eligible order after the shopper confirms in an alert dialog. Place it on the order page. It hides when the order cannot be cancelled or a cancellation is already requested. Reasons and the dialog copy are content; a blank field uses the message catalog. Other is always offered. See order-cancel.md."
+});
+function OrderCancelSkeleton({ className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-fs-order-cancel-skeleton": "",
+		"aria-hidden": "true"
+	});
+}
+function text(value, fallback) {
+	return value?.trim() || fallback;
+}
+function copyOf(content, intl) {
+	const authored = content?.reasons?.flatMap((item) => {
+		const label = item.label.trim();
+		return label ? [label] : [];
+	});
+	return {
+		trigger: text(content?.trigger, intl.formatMessage({ id: "fs/order-cancel.trigger" })),
+		title: text(content?.title, intl.formatMessage({ id: "fs/order-cancel.title" })),
+		description: text(content?.description, intl.formatMessage({ id: "fs/order-cancel.description" })),
+		confirm: text(content?.confirm, intl.formatMessage({ id: "fs/order-cancel.confirm" })),
+		dismiss: text(content?.dismiss, intl.formatMessage({ id: "fs/order-cancel.dismiss" })),
+		other: text(content?.other, intl.formatMessage({ id: "fs/order-cancel.other" })),
+		otherField: text(content?.otherField, intl.formatMessage({ id: "fs/order-cancel.other-field" })),
+		success: text(content?.success, intl.formatMessage({ id: "fs/order-cancel.success" })),
+		failure: text(content?.failure, intl.formatMessage({ id: "fs/order-cancel.failure" })),
+		dismissMessage: text(content?.dismissMessage, intl.formatMessage({ id: "fs/order-cancel.dismiss-message" })),
+		reasons: content?.reasons == null ? REASON_IDS.map((id) => intl.formatMessage({ id })) : authored ?? []
+	};
+}
+function chosenReason(selected, reasons, otherText) {
+	if (selected == null) return void 0;
+	if (selected === OTHER) return otherText.trim() || void 0;
+	return reasons[Number(selected)]?.trim() || void 0;
+}
+function OrderCancel({ $data, $actions: $actionsProp, $content, className, ref }) {
+	const $actions = useActionsOverride($actionsProp);
+	const intl = useIntl();
+	const { refresh } = useStorefrontNavigation();
+	const copy = copyOf($content, intl);
+	const [open, setOpen] = useState(false);
+	const [selected, setSelected] = useState(null);
+	const [otherText, setOtherText] = useState("");
+	const [pending, setPending] = useState(false);
+	const [succeeded, setSucceeded] = useState(false);
+	const [outcome, setOutcome] = useState("idle");
+	const [failureMessage, setFailureMessage] = useState(copy.failure);
+	const pendingRef = useRef(false);
+	const requestRef = useRef(0);
+	const messageRef = useRef(null);
+	const portalRoot = useRef(null);
+	useEffect(() => {
+		if (outcome === "success" || outcome === "failure") messageRef.current?.focus();
+	}, [outcome]);
+	const ineligible = !$data?.allowCancellation || $data != null && HIDDEN_STATUSES.has($data.status);
+	function onOpenChange(next) {
+		if (!next && pendingRef.current) return;
+		setOpen(next);
+		if (!next) {
+			requestRef.current += 1;
+			setSelected(null);
+			setOtherText("");
+			setOutcome((current) => current === "failure" ? "idle" : current);
+		}
+	}
+	async function confirm() {
+		if (pendingRef.current || !$data) return;
+		const cancel = $actions?.order?.cancel;
+		if (!cancel) {
+			setFailureMessage(copy.failure);
+			setOutcome("failure");
+			return;
+		}
+		const request = requestRef.current + 1;
+		requestRef.current = request;
+		pendingRef.current = true;
+		setPending(true);
+		try {
+			const reason = chosenReason(selected, copy.reasons, otherText);
+			const result = await cancel(reason == null ? { id: $data.id } : {
+				id: $data.id,
+				reason
+			});
+			if (request !== requestRef.current) return;
+			if (result.userErrors.length === 0) {
+				setSucceeded(true);
+				setOutcome("success");
+				setOpen(false);
+				refresh();
+				return;
+			}
+			setFailureMessage(result.userErrors[0]?.message ?? copy.failure);
+			setOutcome("failure");
+		} finally {
+			pendingRef.current = false;
+			setPending(false);
+		}
+	}
+	function dismissMessage() {
+		setOutcome("idle");
+	}
+	function setRoot(node) {
+		portalRoot.current = node;
+		if (typeof ref === "function") {
+			ref(node);
+			return;
+		}
+		if (ref) ref.current = node;
+	}
+	if (ineligible || succeeded && outcome !== "success") return null;
+	if (succeeded) return /* @__PURE__ */ jsx("div", {
+		ref,
+		className,
+		"data-fs-order-cancel": "",
+		"data-fs-order-cancel-outcome": "success",
+		children: /* @__PURE__ */ jsx(Acknowledgement, {
+			ref: messageRef,
+			message: copy.success,
+			dismissLabel: copy.dismissMessage,
+			onDismiss: dismissMessage
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: setRoot,
+		className,
+		"data-fs-order-cancel": "",
+		"data-fs-order-cancel-outcome": outcome,
+		children: /* @__PURE__ */ jsxs(AlertDialogRoot, {
+			open,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+				"data-fs-order-cancel-action": "",
+				children: copy.trigger
+			}), /* @__PURE__ */ jsxs(AlertDialogPortal, {
+				container: portalRoot,
+				children: [/* @__PURE__ */ jsx(AlertDialogBackdrop, {}), /* @__PURE__ */ jsx(AlertDialogViewport, { children: /* @__PURE__ */ jsxs(AlertDialogPopup, { children: [
+					/* @__PURE__ */ jsx(AlertDialogTitle, { children: copy.title }),
+					/* @__PURE__ */ jsx(AlertDialogDescription, { children: copy.description }),
+					/* @__PURE__ */ jsxs(Radio.Group, {
+						value: selected ?? "",
+						onValueChange: setSelected,
+						"data-fs-order-cancel-reasons": "",
+						disabled: pending,
+						children: [copy.reasons.map((label, index) => /* @__PURE__ */ jsxs(Radio.Root, {
+							value: String(index),
+							children: [/* @__PURE__ */ jsx(Radio.Indicator, {
+								keepMounted: true,
+								children: /* @__PURE__ */ jsx("span", { "data-fs-order-cancel-mark": "" })
+							}), label]
+						}, label)), /* @__PURE__ */ jsxs(Radio.Root, {
+							value: OTHER,
+							children: [/* @__PURE__ */ jsx(Radio.Indicator, {
+								keepMounted: true,
+								children: /* @__PURE__ */ jsx("span", { "data-fs-order-cancel-mark": "" })
+							}), copy.other]
+						})]
+					}),
+					selected === OTHER ? /* @__PURE__ */ jsxs("label", {
+						htmlFor: "order-cancel-other",
+						"data-fs-order-cancel-other": "",
+						children: [/* @__PURE__ */ jsx("span", { children: copy.otherField }), /* @__PURE__ */ jsx(Input, {
+							id: "order-cancel-other",
+							value: otherText,
+							disabled: pending,
+							maxLength: REASON_MAX_LENGTH,
+							onChange: (event) => {
+								setOtherText(event.target.value.slice(0, REASON_MAX_LENGTH));
+							}
+						})]
+					}) : null,
+					outcome === "failure" ? /* @__PURE__ */ jsx(Acknowledgement, {
+						ref: messageRef,
+						message: failureMessage,
+						dismissLabel: copy.dismissMessage,
+						onDismiss: dismissMessage
+					}) : null,
+					/* @__PURE__ */ jsxs("div", {
+						"data-fs-order-cancel-actions": "",
+						children: [/* @__PURE__ */ jsx(Button, {
+							type: "button",
+							"data-fs-order-cancel-confirm": "",
+							disabled: pending,
+							onClick: () => void confirm(),
+							children: copy.confirm
+						}), /* @__PURE__ */ jsx(AlertDialogClose, {
+							"data-fs-order-cancel-dismiss": "",
+							disabled: pending,
+							children: copy.dismiss
+						})]
+					})
+				] }) })]
+			})]
+		})
+	});
+}
+function Acknowledgement({ ref, message, dismissLabel, onDismiss }) {
+	return /* @__PURE__ */ jsxs("output", {
+		"data-fs-order-cancel-message": "",
+		children: [message, /* @__PURE__ */ jsx(Button, {
+			ref,
+			type: "button",
+			"aria-label": dismissLabel,
+			onClick: onDismiss,
+			children: dismissLabel
+		})]
+	});
+}
+//#endregion
+export { OrderCancel, OrderCancelContent, OrderCancelDefinition, OrderCancelSkeleton };
+
+//# sourceMappingURL=order-cancel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"order-cancel.js","names":[],"sources":["../../../src/matter/order-cancel/order-cancel.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport type { Ref } from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport {\n  AlertDialogBackdrop,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogPopup,\n  AlertDialogPortal,\n  AlertDialogRoot,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n  AlertDialogViewport,\n} from '../../particles/alert-dialog/alert-dialog.js';\nimport { Button } from '../../particles/button/button.js';\nimport { Input } from '../../particles/input/input.js';\nimport { Radio } from '../../particles/radio/radio.js';\nimport { useActionsOverride } from '../../sdk/actions/actions-override-context.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useIntl } from '../../sdk/i18n/client.js';\nimport type { MessageId } from '../../sdk/i18n/locales.js';\nimport { useStorefrontNavigation } from '../../sdk/navigation/use-storefront-navigation.js';\n\nconst fragment = /* GraphQL */ `\n  fragment OrderCancelData on Query {\n    customerOrder(id: $orderId) {\n      id\n      status\n      allowCancellation\n    }\n  }\n`;\n\n/**\n * OMS statuses that already mean a cancellation was requested or finished.\n * `allowCancellation` can stay true in the intermediate ones, so the flag alone\n * would show the button again.\n */\nconst HIDDEN_STATUSES = new Set([\n  'request-cancel',\n  'cancellation-requested',\n  'cancellation-requested-with-ack',\n  'cancel',\n  'canceled',\n]);\n\nconst OTHER = 'other';\n\n/** Matches `CUSTOMER_ORDER_CANCEL_REASON_MAX_LENGTH` in the orders module. */\nconst REASON_MAX_LENGTH = 500;\n\nconst REASON_IDS = [\n  'fs/order-cancel.reason.changed-mind',\n  'fs/order-cancel.reason.bought-by-mistake',\n  'fs/order-cancel.reason.better-price',\n  'fs/order-cancel.reason.slow-delivery',\n] as const satisfies readonly MessageId[];\n\nexport const OrderCancelContent = defineContentType({\n  id: 'order-cancel',\n  title: 'Order Cancel',\n  description: 'Confirmation copy and the optional cancellation reasons for one order.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    // Literals, not `COPY.*`: the catalog scanner only evaluates values it can see in the call.\n    properties: {\n      trigger: { type: 'string', default: 'Cancel order', title: 'Trigger' },\n      title: { type: 'string', default: 'Cancel this order?', title: 'Title' },\n      description: { type: 'string', default: 'This cannot be undone.', title: 'Description' },\n      confirm: { type: 'string', default: 'Cancel order', title: 'Confirm' },\n      dismiss: { type: 'string', default: 'Keep order', title: 'Dismiss' },\n      other: { type: 'string', default: 'Other', title: 'Other' },\n      otherField: { type: 'string', default: 'Reason', title: 'Other field' },\n      success: { type: 'string', default: 'Your order was cancelled.', title: 'Success' },\n      failure: { type: 'string', default: 'Unable to cancel the order. Please try again.', title: 'Failure' },\n      dismissMessage: { type: 'string', default: 'Dismiss', title: 'Dismiss message' },\n      reasons: {\n        type: 'array',\n        title: 'Reasons',\n        items: {\n          type: 'object',\n          additionalProperties: false,\n          required: ['label'],\n          properties: {\n            label: { type: 'string', minLength: 1, title: 'Label' },\n          },\n        },\n      },\n    },\n  },\n});\n\nexport type OrderCancelContentValue = ContentValue<typeof OrderCancelContent>;\n\n/** Unwrapped `customerOrder`. A single-root fragment binds `$data` to that field. */\nexport type OrderCancelData = {\n  id: string;\n  status: string;\n  allowCancellation: boolean;\n};\n\nexport type OrderCancelProps = Readonly<{\n  $data?: OrderCancelData | null;\n  $actions?: ComponentActions;\n  $content?: OrderCancelContentValue;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}>;\n\ntype OrderCancelCopy = {\n  trigger: string;\n  title: string;\n  description: string;\n  confirm: string;\n  dismiss: string;\n  other: string;\n  otherField: string;\n  success: string;\n  failure: string;\n  dismissMessage: string;\n  reasons: readonly string[];\n};\n\nexport const OrderCancelDefinition = defineComponent<OrderCancelProps>({\n  name: 'OrderCancel',\n  importPath: '@vtex/faststore/components',\n  component: OrderCancel,\n  fragment,\n  skeleton: OrderCancelSkeleton,\n  actions: { order: ['cancel'] },\n  content: OrderCancelContent,\n  editor: { label: 'Order Cancel', category: 'action' },\n  schema: {},\n  guideline:\n    'Cancels one eligible order after the shopper confirms in an alert dialog. Place it on the order page. It hides when the order cannot be cancelled or a cancellation is already requested. Reasons and the dialog copy are content; a blank field uses the message catalog. Other is always offered. See order-cancel.md.',\n});\n\nexport function OrderCancelSkeleton({ className }: Readonly<{ className?: string }>) {\n  return <div className={className} data-fs-order-cancel-skeleton=\"\" aria-hidden=\"true\" />;\n}\n\nfunction text(value: string | undefined, fallback: string): string {\n  const trimmed = value?.trim();\n  return trimmed || fallback;\n}\n\nfunction copyOf(content: OrderCancelContentValue | undefined, intl: ReturnType<typeof useIntl>): OrderCancelCopy {\n  const authored = content?.reasons?.flatMap((item) => {\n    const label = item.label.trim();\n    return label ? [label] : [];\n  });\n  return {\n    trigger: text(content?.trigger, intl.formatMessage({ id: 'fs/order-cancel.trigger' })),\n    title: text(content?.title, intl.formatMessage({ id: 'fs/order-cancel.title' })),\n    description: text(content?.description, intl.formatMessage({ id: 'fs/order-cancel.description' })),\n    confirm: text(content?.confirm, intl.formatMessage({ id: 'fs/order-cancel.confirm' })),\n    dismiss: text(content?.dismiss, intl.formatMessage({ id: 'fs/order-cancel.dismiss' })),\n    other: text(content?.other, intl.formatMessage({ id: 'fs/order-cancel.other' })),\n    otherField: text(content?.otherField, intl.formatMessage({ id: 'fs/order-cancel.other-field' })),\n    success: text(content?.success, intl.formatMessage({ id: 'fs/order-cancel.success' })),\n    failure: text(content?.failure, intl.formatMessage({ id: 'fs/order-cancel.failure' })),\n    dismissMessage: text(content?.dismissMessage, intl.formatMessage({ id: 'fs/order-cancel.dismiss-message' })),\n    reasons: content?.reasons == null ? REASON_IDS.map((id) => intl.formatMessage({ id })) : (authored ?? []),\n  };\n}\n\nfunction chosenReason(selected: string | null, reasons: readonly string[], otherText: string): string | undefined {\n  if (selected == null) return undefined;\n  if (selected === OTHER) {\n    const trimmed = otherText.trim();\n    return trimmed || undefined;\n  }\n  const label = reasons[Number(selected)]?.trim();\n  return label || undefined;\n}\n\nexport function OrderCancel({ $data, $actions: $actionsProp, $content, className, ref }: OrderCancelProps) {\n  const $actions = useActionsOverride($actionsProp);\n  const intl = useIntl();\n  const { refresh } = useStorefrontNavigation();\n  const copy = copyOf($content, intl);\n  const [open, setOpen] = useState(false);\n  const [selected, setSelected] = useState<string | null>(null);\n  const [otherText, setOtherText] = useState('');\n  const [pending, setPending] = useState(false);\n  const [succeeded, setSucceeded] = useState(false);\n  const [outcome, setOutcome] = useState<'idle' | 'success' | 'failure'>('idle');\n  const [failureMessage, setFailureMessage] = useState(copy.failure);\n  const pendingRef = useRef(false);\n  const requestRef = useRef(0);\n  const messageRef = useRef<HTMLButtonElement>(null);\n  const portalRoot = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (outcome === 'success' || outcome === 'failure') {\n      messageRef.current?.focus();\n    }\n  }, [outcome]);\n\n  const ineligible = !$data?.allowCancellation || ($data != null && HIDDEN_STATUSES.has($data.status));\n\n  function onOpenChange(next: boolean) {\n    if (!next && pendingRef.current) return;\n    setOpen(next);\n    if (!next) {\n      requestRef.current += 1;\n      setSelected(null);\n      setOtherText('');\n      setOutcome((current) => (current === 'failure' ? 'idle' : current));\n    }\n  }\n\n  async function confirm() {\n    if (pendingRef.current || !$data) return;\n    const cancel = $actions?.order?.cancel;\n    if (!cancel) {\n      setFailureMessage(copy.failure);\n      setOutcome('failure');\n      return;\n    }\n\n    const request = requestRef.current + 1;\n    requestRef.current = request;\n    pendingRef.current = true;\n    setPending(true);\n    try {\n      const reason = chosenReason(selected, copy.reasons, otherText);\n      const result = await cancel(reason == null ? { id: $data.id } : { id: $data.id, reason });\n      if (request !== requestRef.current) return;\n      if (result.userErrors.length === 0) {\n        setSucceeded(true);\n        setOutcome('success');\n        setOpen(false);\n        refresh();\n        return;\n      }\n\n      setFailureMessage(result.userErrors[0]?.message ?? copy.failure);\n      setOutcome('failure');\n    } finally {\n      pendingRef.current = false;\n      setPending(false);\n    }\n  }\n\n  function dismissMessage() {\n    setOutcome('idle');\n  }\n\n  function setRoot(node: HTMLDivElement | null) {\n    portalRoot.current = node;\n    if (typeof ref === 'function') {\n      ref(node);\n      return;\n    }\n    if (ref) {\n      ref.current = node;\n    }\n  }\n\n  if (ineligible || (succeeded && outcome !== 'success')) return null;\n\n  if (succeeded) {\n    return (\n      <div ref={ref} className={className} data-fs-order-cancel=\"\" data-fs-order-cancel-outcome=\"success\">\n        <Acknowledgement\n          ref={messageRef}\n          message={copy.success}\n          dismissLabel={copy.dismissMessage}\n          onDismiss={dismissMessage}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div ref={setRoot} className={className} data-fs-order-cancel=\"\" data-fs-order-cancel-outcome={outcome}>\n      <AlertDialogRoot open={open} onOpenChange={onOpenChange}>\n        <AlertDialogTrigger data-fs-order-cancel-action=\"\">{copy.trigger}</AlertDialogTrigger>\n        <AlertDialogPortal container={portalRoot}>\n          <AlertDialogBackdrop />\n          <AlertDialogViewport>\n            <AlertDialogPopup>\n              <AlertDialogTitle>{copy.title}</AlertDialogTitle>\n              <AlertDialogDescription>{copy.description}</AlertDialogDescription>\n              <Radio.Group\n                value={selected ?? ''}\n                onValueChange={setSelected}\n                data-fs-order-cancel-reasons=\"\"\n                disabled={pending}\n              >\n                {copy.reasons.map((label, index) => (\n                  <Radio.Root key={label} value={String(index)}>\n                    <Radio.Indicator keepMounted>\n                      <span data-fs-order-cancel-mark=\"\" />\n                    </Radio.Indicator>\n                    {label}\n                  </Radio.Root>\n                ))}\n                <Radio.Root value={OTHER}>\n                  <Radio.Indicator keepMounted>\n                    <span data-fs-order-cancel-mark=\"\" />\n                  </Radio.Indicator>\n                  {copy.other}\n                </Radio.Root>\n              </Radio.Group>\n              {selected === OTHER ? (\n                <label htmlFor=\"order-cancel-other\" data-fs-order-cancel-other=\"\">\n                  <span>{copy.otherField}</span>\n                  <Input\n                    id=\"order-cancel-other\"\n                    value={otherText}\n                    disabled={pending}\n                    maxLength={REASON_MAX_LENGTH}\n                    onChange={(event) => {\n                      setOtherText(event.target.value.slice(0, REASON_MAX_LENGTH));\n                    }}\n                  />\n                </label>\n              ) : null}\n              {outcome === 'failure' ? (\n                <Acknowledgement\n                  ref={messageRef}\n                  message={failureMessage}\n                  dismissLabel={copy.dismissMessage}\n                  onDismiss={dismissMessage}\n                />\n              ) : null}\n              <div data-fs-order-cancel-actions=\"\">\n                <Button type=\"button\" data-fs-order-cancel-confirm=\"\" disabled={pending} onClick={() => void confirm()}>\n                  {copy.confirm}\n                </Button>\n                <AlertDialogClose data-fs-order-cancel-dismiss=\"\" disabled={pending}>\n                  {copy.dismiss}\n                </AlertDialogClose>\n              </div>\n            </AlertDialogPopup>\n          </AlertDialogViewport>\n        </AlertDialogPortal>\n      </AlertDialogRoot>\n    </div>\n  );\n}\n\nfunction Acknowledgement({\n  ref,\n  message,\n  dismissLabel,\n  onDismiss,\n}: Readonly<{\n  ref: Ref<HTMLButtonElement>;\n  message: string;\n  dismissLabel: string;\n  onDismiss: () => void;\n}>) {\n  return (\n    <output data-fs-order-cancel-message=\"\">\n      {message}\n      <Button ref={ref} type=\"button\" aria-label={dismissLabel} onClick={onDismiss}>\n        {dismissLabel}\n      </Button>\n    </output>\n  );\n}\n"],"mappings":"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"}

package/dist/matter/order-delivery-address/order-delivery-address.d.ts

@@ -0,0 +1,73 @@
+import { ContentValue } 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-delivery-address/order-delivery-address.d.ts
+export declare const OrderDeliveryAddressContent: {
+  readonly id: "order-delivery-address";
+  readonly title: "Order Delivery Address";
+  readonly description: "The labels above a delivery address and above a pickup store address.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly deliveryLabel: {
+        readonly type: "string";
+        readonly title: "Delivery address label";
+      };
+      readonly storeLabel: {
+        readonly type: "string";
+        readonly title: "Store address label";
+      };
+    };
+  };
+};
+export type OrderDeliveryAddressContentValue = ContentValue<typeof OrderDeliveryAddressContent>;
+/** The historical address OMS recorded on one delivery option. */
+export type OrderDeliveryAddressRecord = {
+  receiverName: string | null;
+  street: string | null;
+  number: string | null;
+  complement: string | null;
+  neighborhood: string | null;
+  reference: string | null;
+  city: string | null;
+  state: string | null;
+  postalCode: string | null;
+  country: string | null;
+};
+export type OrderDeliveryAddressOptionData = {
+  addressId: string | null;
+  deliveryChannel: string | null;
+  address: OrderDeliveryAddressRecord | null;
+};
+/** Unwrapped `CustomerOrder` slice. Null when the id does not resolve to the shopper's order. */
+export type OrderDeliveryAddressData = {
+  deliveryOptions: OrderDeliveryAddressOptionData[];
+} | null;
+export type OrderDeliveryAddressProps = Readonly<{
+  /** Label above a delivery address. Content wins, then this prop, then the catalogue. */
+  deliveryLabel?: string;
+  /** Label above a pickup store address. Content wins, then this prop, then the catalogue. */
+  storeLabel?: string;
+  /** Injected by the compiler from the page content entry. */
+  $content?: OrderDeliveryAddressContentValue;
+  $data?: OrderDeliveryAddressData;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+}>;
+export declare const OrderDeliveryAddressDefinition: ComponentDefinition<Readonly<{
+  /** Label above a delivery address. Content wins, then this prop, then the catalogue. */
+  deliveryLabel?: string;
+  /** Label above a pickup store address. Content wins, then this prop, then the catalogue. */
+  storeLabel?: string;
+  /** Injected by the compiler from the page content entry. */
+  $content?: OrderDeliveryAddressContentValue;
+  $data?: OrderDeliveryAddressData;
+  className?: string;
+  ref?: Ref<HTMLElement>;
+}>>;
+export declare function OrderDeliveryAddressSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function OrderDeliveryAddress({ deliveryLabel, storeLabel, $content, $data, className, ref }: OrderDeliveryAddressProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=order-delivery-address.d.ts.map