@vtex/faststore 0.0.8 → 0.0.10

package/dist/matter/cart-destination/cart-destination.js

@@ -0,0 +1,613 @@
+"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 { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { ReactiveRootContext } from "../../sdk/data/page-reactive-data-root.js";
+import { getCountryDescriptor } from "../shipping-address/country-descriptors.js";
+import { awaitCartWrites } from "../../sdk/cart/write-gate.js";
+import { PostalCodeField, isPostalCodeComplete } from "../../particles/postal-code-field/postal-code-field.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/cart-destination/cart-destination.tsx
+const fragment = `
+  fragment CartDestinationData on Query {
+    shipping {
+      __typename
+      id
+      address {
+        __typename
+        id
+        postalCode
+        country
+        city
+        state
+      }
+    }
+  }
+`;
+const CartDestinationValueContent = defineContentType({
+	id: "cart-destination-value",
+	title: "Cart Destination Value",
+	description: "Copy that precedes the destination in read mode.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { prefix: {
+			type: "string",
+			title: "Prefix"
+		} }
+	}
+});
+const CartDestinationChangeContent = defineContentType({
+	id: "cart-destination-change",
+	title: "Cart Destination Change",
+	description: "Copy for the control that opens edit mode.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label"
+		} }
+	}
+});
+const CartDestinationSubmitContent = defineContentType({
+	id: "cart-destination-submit",
+	title: "Cart Destination Submit",
+	description: "Copy for the control that writes the destination.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			label: {
+				type: "string",
+				title: "Button label"
+			},
+			pendingLabel: {
+				type: "string",
+				title: "Pending label"
+			}
+		}
+	}
+});
+const CartDestinationCancelContent = defineContentType({
+	id: "cart-destination-cancel",
+	title: "Cart Destination Cancel",
+	description: "Copy for the control that closes edit mode without writing.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { label: {
+			type: "string",
+			title: "Button label"
+		} }
+	}
+});
+const CartDestinationErrorContent = defineContentType({
+	id: "cart-destination-error",
+	title: "Cart Destination Error",
+	description: "Message shown when the destination write fails.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: { genericMessage: {
+			type: "string",
+			title: "Failure message"
+		} }
+	}
+});
+const CART_DESTINATION_CONTEXT_UNSET = Symbol("CartDestinationContextUnset");
+const CartDestinationContextInternal = createContext(CART_DESTINATION_CONTEXT_UNSET);
+/**
+* Read the destination and the edit-mode state from the nearest `CartDestinationRoot`. Throws outside
+* one: a misplaced part is a composition bug the author should see at once.
+*/
+function useCartDestination() {
+	const ctx = useContext(CartDestinationContextInternal);
+	if (ctx === CART_DESTINATION_CONTEXT_UNSET) throw new Error("CartDestination components must be used inside a <CartDestinationRoot> subtree.");
+	return ctx;
+}
+/** Whether a `CartDestinationForm` encloses the subtree, so `CartDestinationSubmit` knows its form owner. */
+const CartDestinationFormContext = createContext(false);
+const DEFAULT_COUNTRY = "BRA";
+/** Mask per country; the field's own default (the Brazilian CEP) covers any country not listed. */
+const DEFAULT_MASK = "99999-999";
+const COUNTRY_MASKS = {
+	BRA: DEFAULT_MASK,
+	USA: "99999|99999-9999"
+};
+function maskFor(country) {
+	return COUNTRY_MASKS[country] ?? DEFAULT_MASK;
+}
+/** Letters and digits only, so `01310100` and `01310-100` compare equal. */
+function normalizePostalCode(value) {
+	return value.replaceAll(/[^0-9A-Za-z]/g, "").toUpperCase();
+}
+function isDraftValid(draft, country, mask) {
+	if (!isPostalCodeComplete(draft, mask)) return false;
+	const pattern = getCountryDescriptor(country)?.fields.find((field) => field.name === "postalCode")?.rule?.pattern;
+	if (!pattern) return true;
+	return (pattern instanceof RegExp ? pattern : pattern.value).test(draft);
+}
+const CartDestinationRootDefinition = defineComponent({
+	name: "CartDestinationRoot",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationRoot,
+	fragment,
+	fetchStrategy: "reactive",
+	providesContext: "cartDestination",
+	actions: { shipping: ["setAddress"] },
+	editor: {
+		label: "Cart Destination Root",
+		category: "content"
+	},
+	schema: { defaultCountry: {
+		type: "string",
+		default: "BRA",
+		label: "Default country (ISO alpha-3)"
+	} },
+	guideline: "Where the cart is delivered, with a postal-code-only form that writes the cart destination so the free-shipping bar follows. Compose CartDestinationRead (CartDestinationValue, CartDestinationUnset, CartDestinationChange) for read mode and CartDestinationForm (PostalCodeControl, Submit, Cancel, Error) for edit mode. Starts in read mode; the store cannot open edit mode from outside. See cart-destination.md."
+});
+const CartDestinationReadDefinition = defineComponent({
+	name: "CartDestinationRead",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationRead,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Read",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Wraps what read mode shows: the value, the invitation when no destination is set, and the change control. Renders nothing while edit mode is open. Must be inside CartDestinationRoot."
+});
+const CartDestinationValueDefinition = defineComponent({
+	name: "CartDestinationValue",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationValue,
+	content: CartDestinationValueContent,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Value",
+		category: "content"
+	},
+	schema: { prefix: {
+		type: "string",
+		label: "Prefix"
+	} },
+	guideline: "The cart destination as postal code, city and state, each in its own element. Renders nothing while loading or when no destination is set. Must be inside CartDestinationRoot."
+});
+const CartDestinationUnsetDefinition = defineComponent({
+	name: "CartDestinationUnset",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationUnset,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Unset",
+		category: "content"
+	},
+	schema: {},
+	guideline: "Renders its children only once the destination resolved and none is set. Place the store-authored invitation (for example a Text reading \"Informe seu CEP\") inside it, within CartDestinationRead. Must be inside CartDestinationRoot."
+});
+const CartDestinationChangeDefinition = defineComponent({
+	name: "CartDestinationChange",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationChange,
+	content: CartDestinationChangeContent,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Change",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Button label"
+	} },
+	guideline: "Button that opens edit mode, styled as a link by the store. Place it inside CartDestinationRead. Must be inside CartDestinationRoot."
+});
+const CartDestinationFormDefinition = defineComponent({
+	name: "CartDestinationForm",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationForm,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Form",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Edit mode: renders only while editing and routes Enter to the submit. Holds the postal code control, Submit, Cancel and Error, and any help text the store places. Must be inside CartDestinationRoot."
+});
+const CartDestinationPostalCodeControlDefinition = defineComponent({
+	name: "CartDestinationPostalCodeControl",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationPostalCodeControl,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Postal Code Control",
+		category: "content"
+	},
+	schema: {
+		mask: {
+			type: "string",
+			label: "Mask pattern"
+		},
+		label: {
+			type: "string",
+			label: "Label"
+		},
+		placeholder: {
+			type: "string",
+			label: "Placeholder"
+		},
+		invalidMessage: {
+			type: "string",
+			label: "Invalid-value message"
+		}
+	},
+	guideline: "The postal code input of edit mode, empty each time edit mode opens and focused on open. The mask follows the cart country unless set. Must be inside CartDestinationForm."
+});
+const CartDestinationSubmitDefinition = defineComponent({
+	name: "CartDestinationSubmit",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationSubmit,
+	content: CartDestinationSubmitContent,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Submit",
+		category: "action"
+	},
+	schema: {
+		label: {
+			type: "string",
+			label: "Button label"
+		},
+		pendingLabel: {
+			type: "string",
+			label: "Pending label"
+		}
+	},
+	guideline: "Writes the typed postal code. Disabled until it is complete for the country, valid and different from the current one, and while a write is pending (aria-busy). Must be inside CartDestinationForm."
+});
+const CartDestinationCancelDefinition = defineComponent({
+	name: "CartDestinationCancel",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationCancel,
+	content: CartDestinationCancelContent,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Cancel",
+		category: "action"
+	},
+	schema: { label: {
+		type: "string",
+		label: "Button label"
+	} },
+	guideline: "Closes edit mode, discards what was typed and writes nothing. Disabled while a write is pending. Must be inside CartDestinationForm."
+});
+const CartDestinationErrorDefinition = defineComponent({
+	name: "CartDestinationError",
+	importPath: "@vtex/faststore/components",
+	component: CartDestinationError,
+	content: CartDestinationErrorContent,
+	requiresContext: "cartDestination",
+	editor: {
+		label: "Cart Destination Error",
+		category: "content"
+	},
+	schema: { genericMessage: {
+		type: "string",
+		label: "Failure message"
+	} },
+	guideline: "Announces why the destination write failed, as an alert, and renders nothing otherwise. Author one message covering a refused postal code and a network failure: both reach the client as the same error. Must be inside CartDestinationForm."
+});
+/**
+* Reads the cart destination reactively and publishes it, the edit-mode flag, the draft and the write
+* state as `cartDestination` context.
+*
+* The destination is never copied into state: the Value renders only what `$data` resolves, and a
+* successful write updates it solely by the mutation payload normalizing into the Apollo cache. A
+* rejected write therefore needs no rollback.
+*/
+function CartDestinationRoot({ defaultCountry = DEFAULT_COUNTRY, $data: $dataProp, $actions: $actionsProp, className, children, ...props }) {
+	const $data = useDataOverride($dataProp);
+	const $actions = useActionsOverride($actionsProp);
+	const address = $data?.address ?? null;
+	const { loading: rootLoading } = useContext(ReactiveRootContext);
+	const postalCode = address?.postalCode ?? null;
+	const loading = rootLoading && postalCode == null;
+	const country = address?.country ?? defaultCountry;
+	const [editing, setEditing] = useState(false);
+	const [draft, setDraft] = useState("");
+	const [pending, setPending] = useState(false);
+	const [errors, setErrors] = useState([]);
+	const [invalid, setInvalid] = useState(false);
+	const inFlightRef = useRef(false);
+	const rootRef = useRef(null);
+	const wasEditingRef = useRef(false);
+	/**
+	* Opening edit mode moves focus to the field; leaving it moves focus back to the change control,
+	* which only mounts once read mode renders again, hence an effect on the flag rather than a call at
+	* the event.
+	*/
+	useEffect(() => {
+		if (wasEditingRef.current === editing) return;
+		wasEditingRef.current = editing;
+		const selector = editing ? "[data-fs-postal-code-field-input]" : "[data-fs-cart-destination-change]";
+		rootRef.current?.querySelector(selector)?.focus();
+	}, [editing]);
+	const [registeredMask, setRegisteredMask] = useState(null);
+	const mask = registeredMask ?? maskFor(country);
+	const canSubmit = !pending && isDraftValid(draft, country, mask) && normalizePostalCode(draft) !== normalizePostalCode(postalCode ?? "");
+	const startEditing = useCallback(() => setEditing(true), []);
+	const cancel = useCallback(() => {
+		setEditing(false);
+		setDraft("");
+		setErrors([]);
+		setInvalid(false);
+	}, []);
+	/** Typing is the shopper's answer to a refusal, so the message and the invalid flag go with it. */
+	const updateDraft = useCallback((value) => {
+		setDraft(value);
+		setErrors((current) => current.length === 0 ? current : []);
+		setInvalid(false);
+	}, []);
+	const submit = useCallback(() => {
+		if (inFlightRef.current) return;
+		const setAddress = $actions?.shipping?.setAddress;
+		if (!setAddress) return;
+		if (!canSubmit) {
+			setInvalid(true);
+			return;
+		}
+		inFlightRef.current = true;
+		setPending(true);
+		setErrors([]);
+		setInvalid(false);
+		awaitCartWrites().then(() => setAddress({
+			postalCode: draft,
+			country
+		})).then((writeErrors) => {
+			if (writeErrors.length > 0) {
+				setErrors(writeErrors);
+				return;
+			}
+			setEditing(false);
+			setDraft("");
+		}).finally(() => {
+			inFlightRef.current = false;
+			setPending(false);
+		});
+	}, [
+		$actions,
+		canSubmit,
+		draft,
+		country
+	]);
+	const value = useMemo(() => ({
+		postalCode,
+		city: address?.city ?? null,
+		state: address?.state ?? null,
+		country,
+		loading,
+		editing,
+		startEditing,
+		cancel,
+		draft,
+		setDraft: updateDraft,
+		canSubmit,
+		pending,
+		errors,
+		invalid,
+		submit,
+		registerMask: setRegisteredMask
+	}), [
+		postalCode,
+		address?.city,
+		address?.state,
+		country,
+		loading,
+		editing,
+		startEditing,
+		cancel,
+		draft,
+		updateDraft,
+		canSubmit,
+		pending,
+		errors,
+		invalid,
+		submit
+	]);
+	return /* @__PURE__ */ jsx(CartDestinationContextInternal, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			ref: rootRef,
+			className,
+			"data-fs-cart-destination": "",
+			...pending ? { "data-fs-cart-destination-pending": "" } : {},
+			...editing ? { "data-fs-cart-destination-editing": "" } : {},
+			children
+		})
+	});
+}
+function CartDestinationRead({ className, children, ...props }) {
+	const { editing } = useCartDestination();
+	if (editing) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-destination-read": "",
+		children
+	});
+}
+function pickAuthored(content, prop) {
+	if (content?.trim()) return content;
+	if (prop?.trim()) return prop;
+	return null;
+}
+function CartDestinationValue({ prefix, $content, className, ...props }) {
+	const { postalCode, city, state, loading } = useCartDestination();
+	if (loading || postalCode == null) return null;
+	const resolvedPrefix = pickAuthored($content?.prefix, prefix);
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		className,
+		"data-fs-cart-destination-value": "",
+		children: [
+			resolvedPrefix ? /* @__PURE__ */ jsx("span", {
+				"data-fs-cart-destination-value-prefix": "",
+				children: resolvedPrefix
+			}) : null,
+			resolvedPrefix ? " " : null,
+			/* @__PURE__ */ jsx("span", {
+				"data-fs-cart-destination-value-postal-code": "",
+				children: postalCode
+			}),
+			city || state ? " · " : null,
+			city ? /* @__PURE__ */ jsx("span", {
+				"data-fs-cart-destination-value-city": "",
+				children: city
+			}) : null,
+			city && state ? ", " : null,
+			state ? /* @__PURE__ */ jsx("span", {
+				"data-fs-cart-destination-value-state": "",
+				children: state
+			}) : null
+		]
+	});
+}
+function CartDestinationUnset({ className, children, ...props }) {
+	const { postalCode, loading } = useCartDestination();
+	if (loading || postalCode != null) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-cart-destination-unset": "",
+		children
+	});
+}
+function CartDestinationChange({ label, $content, className, children, ...props }) {
+	const { editing, startEditing } = useCartDestination();
+	const resolvedLabel = pickAuthored($content?.label, label);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		onClick: startEditing,
+		"aria-expanded": editing,
+		className,
+		"data-fs-cart-destination-change": "",
+		children: children ?? resolvedLabel
+	});
+}
+function CartDestinationForm({ className, children, ...props }) {
+	const { editing, submit } = useCartDestination();
+	if (!editing) return null;
+	return /* @__PURE__ */ jsx(CartDestinationFormContext, {
+		value: true,
+		children: /* @__PURE__ */ jsx("form", {
+			...props,
+			className,
+			"data-fs-cart-destination-form": "",
+			onKeyDown: (event) => {
+				if (event.key !== "Enter" || !(event.target instanceof HTMLInputElement)) return;
+				event.preventDefault();
+				submit();
+			},
+			onSubmit: (event) => {
+				event.preventDefault();
+				submit();
+			},
+			children
+		})
+	});
+}
+function CartDestinationPostalCodeControl({ className, mask, label, placeholder, invalidMessage }) {
+	const { country, draft, setDraft, errors, invalid, pending, registerMask } = useCartDestination();
+	const rootRef = useRef(null);
+	const refused = errors.length > 0;
+	const effectiveMask = mask ?? maskFor(country);
+	useEffect(() => {
+		registerMask(effectiveMask);
+		return () => registerMask(null);
+	}, [effectiveMask, registerMask]);
+	/**
+	* Disabling the input while the write is in flight drops focus to the body, so a refusal otherwise
+	* lands with nothing focused. Waits for `pending` to clear: focusing a disabled input is a no-op.
+	*/
+	useEffect(() => {
+		if (!refused || pending) return;
+		rootRef.current?.querySelector("[data-fs-postal-code-field-input]")?.focus();
+	}, [refused, pending]);
+	return /* @__PURE__ */ jsx(PostalCodeField, {
+		ref: rootRef,
+		className,
+		"data-fs-cart-destination-postal-code-control": "",
+		mask: effectiveMask,
+		label,
+		placeholder,
+		errorMessage: refused ? void 0 : invalidMessage,
+		value: draft,
+		onValueChange: setDraft,
+		invalid: invalid || refused,
+		disabled: pending
+	});
+}
+function CartDestinationSubmit({ label, pendingLabel, $content, className, children, ...props }) {
+	const { canSubmit, pending, submit } = useCartDestination();
+	const inForm = useContext(CartDestinationFormContext);
+	const resolvedLabel = pickAuthored($content?.label, label);
+	const resolvedPendingLabel = pickAuthored($content?.pendingLabel, pendingLabel);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: inForm ? "submit" : "button",
+		onClick: inForm ? props.onClick : submit,
+		disabled: !canSubmit || props.disabled,
+		"aria-busy": pending || void 0,
+		className,
+		"data-fs-cart-destination-submit": "",
+		...pending ? { "data-fs-cart-destination-submit-pending": "" } : {},
+		children: children ?? (pending ? resolvedPendingLabel ?? resolvedLabel : resolvedLabel)
+	});
+}
+function CartDestinationCancel({ label, $content, className, children, ...props }) {
+	const { cancel, pending } = useCartDestination();
+	const resolvedLabel = pickAuthored($content?.label, label);
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		onClick: cancel,
+		disabled: pending || props.disabled,
+		className,
+		"data-fs-cart-destination-cancel": "",
+		children: children ?? resolvedLabel
+	});
+}
+function CartDestinationError({ genericMessage, $content, className, ...props }) {
+	const { errors } = useCartDestination();
+	if (errors.length === 0) return null;
+	const authored = pickAuthored($content?.genericMessage, genericMessage);
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "alert",
+		className,
+		"data-fs-cart-destination-error": "",
+		children: authored ?? errors[0]?.message
+	});
+}
+const CartDestination = {
+	Root: CartDestinationRoot,
+	Read: CartDestinationRead,
+	Value: CartDestinationValue,
+	Unset: CartDestinationUnset,
+	Change: CartDestinationChange,
+	Form: CartDestinationForm,
+	PostalCodeControl: CartDestinationPostalCodeControl,
+	Submit: CartDestinationSubmit,
+	Cancel: CartDestinationCancel,
+	Error: CartDestinationError
+};
+//#endregion
+export { CartDestination, CartDestinationCancel, CartDestinationCancelContent, CartDestinationCancelDefinition, CartDestinationChange, CartDestinationChangeContent, CartDestinationChangeDefinition, CartDestinationError, CartDestinationErrorContent, CartDestinationErrorDefinition, CartDestinationForm, CartDestinationFormDefinition, CartDestinationPostalCodeControl, CartDestinationPostalCodeControlDefinition, CartDestinationRead, CartDestinationReadDefinition, CartDestinationRoot, CartDestinationRootDefinition, CartDestinationSubmit, CartDestinationSubmitContent, CartDestinationSubmitDefinition, CartDestinationUnset, CartDestinationUnsetDefinition, CartDestinationValue, CartDestinationValueContent, CartDestinationValueDefinition, useCartDestination };
+
+//# sourceMappingURL=cart-destination.js.map