@vtex/faststore 0.0.7 → 0.0.10

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

@@ -1,5 +1,6 @@
 import { ComponentDefinition } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
+import { PageRef } from "../../sdk/navigation/types.js";
 import "../../sdk/payment/operations.js";
 import { ComponentActions } from "../../sdk/actions/types.js";
 import { PlaceOrderData } from "../../sdk/payment/use-place-order.js";
@@ -10,6 +11,8 @@ export type PlaceOrderProps = ComponentPropsWithRef<'div'> & {
   label?: string;
   /** CTA label while the three-call sequence is in flight. */
   placingLabel?: string;
+  /** Status message shown beside the button for as long as the order is being placed. Absent or blank renders nothing. */
+  placingMessage?: string;
   /**
    * CTA label while a surviving attempt (T29) offers a resume — the card already left the browser
    * (`sent`) or its fate is unknown (`unresolved`), and the next click finalizes it rather than running
@@ -41,6 +44,8 @@ export type PlaceOrderProps = ComponentPropsWithRef<'div'> & {
   unsavedBillingAddressMessage?: string;
   /** Shown when the new-card draft itself fails validation before ever reaching the gateway. */
   invalidCardDataMessage?: string;
+  /** Shown when the typed card number is well-formed but no payment network the store accepts claims it (T47). */
+  unsupportedNetworkMessage?: string;
   /** Shown when a saved-card submission is refused for a missing or invalid CVV. */
   invalidSecurityCodeMessage?: string;
   /** Shown when the payment gateway itself refuses the submitted card. */
@@ -56,19 +61,19 @@ export type PlaceOrderProps = ComponentPropsWithRef<'div'> & {
    */
   unconfirmedMessage?: string;
   /**
-   * Route template navigated to after a successful placement. The literal `{orderGroup}` is
-   * replaced by the placed order's group, percent-encoded. Absent ⇒ no navigation. Must resolve to
-   * the current page's origin — an absolute, protocol-relative, or non-http(s) template is refused
-   * rather than navigated to (fail closed, dev-only warn; fix pass, finding S1).
-   * e.g. "/reserva/checkout/order-placed/{orderGroup}"
+   * Where the shopper lands after a successful placement. A page reference gets the placed order's
+   * group as its `orderGroup` param. A string is a logical path of this store, navigated as written;
+   * an absolute, protocol-relative, or non-http(s) value, or a `{orderGroup}` template, is refused
+   * rather than navigated to (fail closed, dev-only warn).
+   * e.g. `{ standard: 'order-placed' }`
    */
-  successHref?: string;
+  successHref?: PageRef | string;
   /** `Payment` slice forwarded by the reactive runtime (arity-1, ADR-0015) — `null` until it resolves. */
   $data?: PlaceOrderData;
   /** Compiler-injected action surface; carries `payment.startTransaction`, `payment.gatewayCallback`, `analytics.track`. */
   $actions?: ComponentActions;
 };
 export declare const PlaceOrderDefinition: ComponentDefinition<PlaceOrderProps>;
-export declare function PlaceOrder({ label, placingLabel, resumeLabel, successMessage, missingSubmissionMessage, missingMethodMessage, invalidTransactionMessage, networkErrorMessage, missingDocumentMessage, invalidDocumentMessage, unavailableMethodMessage, unsavedBillingAddressMessage, invalidCardDataMessage, invalidSecurityCodeMessage, gatewayErrorMessage, inFlightMessage, unconfirmedMessage, successHref, $data: $dataProp, $actions: $actionsProp, className, ...props }: PlaceOrderProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlaceOrder({ label, placingLabel, placingMessage, resumeLabel, successMessage, missingSubmissionMessage, missingMethodMessage, invalidTransactionMessage, networkErrorMessage, missingDocumentMessage, invalidDocumentMessage, unavailableMethodMessage, unsavedBillingAddressMessage, invalidCardDataMessage, unsupportedNetworkMessage, invalidSecurityCodeMessage, gatewayErrorMessage, inFlightMessage, unconfirmedMessage, successHref, $data: $dataProp, $actions: $actionsProp, className, ...props }: PlaceOrderProps): import("react/jsx-runtime").JSX.Element;
 //#endregion
 //# sourceMappingURL=place-order.d.ts.map

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

@@ -1,15 +1,16 @@
 "use client";
 import { defineComponent } from "../../core/dist/define-component.js";
 import "../../core/dist/index.js";
+import { resolveSiteRelativeHref } from "../../utils/safe-href.js";
+import { useStorefrontNavigation } from "../../sdk/navigation/use-storefront-navigation.js";
 import { useActionsOverride } from "../../sdk/actions/actions-override-context.js";
 import { useDataOverride } from "../../sdk/data/data-override-context.js";
-import { usePayment } from "../payment/payment.js";
 import { Button } from "../../particles/button/button.js";
-import { usePaymentSubmitGate } from "../payment/use-payment-submit-gate.js";
+import { usePayment } from "../payment/payment.js";
+import { refusalTargetOf, usePaymentSubmitGate } from "../payment/use-payment-submit-gate.js";
 import { usePlaceOrder } from "../../sdk/payment/use-place-order.js";
 import { useEffect, useId, useLayoutEffect, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRouter } from "next/navigation";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 const PlaceOrderDefinition = defineComponent({
 	name: "PlaceOrder",
 	importPath: "@vtex/faststore/components",
@@ -58,6 +59,10 @@ const PlaceOrderDefinition = defineComponent({
 			default: "Placing order...",
 			label: "Button label while placing"
 		},
+		placingMessage: {
+			type: "string",
+			label: "Message shown while placing the order"
+		},
 		resumeLabel: {
 			type: "string",
 			default: "Complete your order",
@@ -113,6 +118,11 @@ const PlaceOrderDefinition = defineComponent({
 			default: "Enter valid card details before placing the order.",
 			label: "Invalid card data message"
 		},
+		unsupportedNetworkMessage: {
+			type: "string",
+			default: "This card is not from a network the store accepts. Use another card or choose another payment method.",
+			label: "Unsupported card network message"
+		},
 		invalidSecurityCodeMessage: {
 			type: "string",
 			default: "Enter a valid security code before placing the order.",
@@ -134,103 +144,80 @@ const PlaceOrderDefinition = defineComponent({
 			label: "Unconfirmed order message"
 		},
 		successHref: {
-			type: "string",
-			label: "Confirmation route template ({orderGroup} token)"
+			type: "link",
+			default: { standard: "order-placed" },
+			fills: ["orderGroup"],
+			label: "Confirmation Page"
 		}
 	},
-	guideline: "The place-order CTA: invokes usePlaceOrder's three-call sequence (start transaction, the registered submission's own direct-to-gateway leg, then the gateway callback) and blocks interaction while it runs. Compose it as a sibling — never a child — of every other payment-entry leaf under the same PaymentSectionRoot or PaymentSectionController, so the one CTA serves every entry path. Renders one inline outcome after settling: the first userError's message, or successMessage on a clean settle. This component reaches no payment-sensitive input. Must be inside a payment root. See place-order.md."
+	guideline: "The place-order CTA: invokes usePlaceOrder's three-call sequence (start transaction, the registered submission's own direct-to-gateway leg, then the gateway callback) and blocks interaction while it runs. Compose it as a sibling — never a child — of every other payment-entry leaf under the same PaymentSectionRoot or PaymentSectionController, so the one CTA serves every entry path. Renders one inline outcome after settling: the first userError's message, or successMessage on a clean settle. While the order is being placed it renders nothing but the button, unless placingMessage is set: then a status message shows beside the button, and the rest of the payment form is blocked for as long as it shows. This component reaches no payment-sensitive input. Must be inside a payment root. See place-order.md."
 });
+/** The default confirmation page. */
+const ORDER_PLACED_PAGE = { standard: "order-placed" };
 /**
-* OQ-6 (2026-08-12 spec gate, `specs/navigate-the-shopper-to-the-order.md`): a `successHref` missing
-* the `{orderGroup}` placeholder is a store-authoring mistake — every order would land on the same
-* literal URL, which then renders unresolved. Fail closed instead of navigating there, and warn in
-* development only, mirroring `variant-selector.tsx`'s `warnUnresolvedAxis`.
-*
-* Named and worded around "token" rather than the spec's own word for this: that word contains
-* `holder` as a substring (the same reason `cardholder` matches), which trips `CARD_FIELD_PATTERN`
-* (`card-field-pattern.ts`) — the pattern `place-order.test.tsx`'s "card-data boundary" suite asserts
-* never matches this file's source text.
+* Fail-closed warning for a string `successHref` that is not a path of this store. Nothing upstream
+* validates a string prop's shape, and an absolute or protocol-relative value would turn this CTA into
+* an open redirect that fires right after a real purchase, carrying the shopper's own order group to
+* another origin. Dev-only, like every other authoring warning in this component.
 */
-function warnMissingOrderGroupToken(successHref) {
+function warnUnsafeSuccessHref(successHref, reason) {
 	if (process.env.NODE_ENV === "production") return;
-	console.warn(`[PlaceOrder] successHref "${successHref}" has no {orderGroup} token; refusing to navigate there rather than sending every order to the same URL.`);
+	console.warn(`[PlaceOrder] successHref "${successHref}" is not a path of this store (${reason}); refusing to navigate there rather than sending the shopper off-site right after a purchase.`);
 }
 /**
-* Fix pass, finding S1 (High, CWE-601 open redirect): nothing upstream validates `successHref`'s
-* shape — the schema field is a bare `{type: 'string'}` with no pattern/format/enum, sukima never
-* inspects prop values, and this runtime's only prior check was the `{orderGroup}` substring test
-* above, which an absolute or protocol-relative template still satisfies
-* (`"https://evil.example/{orderGroup}"`, `"//evil.example/{orderGroup}"`). Left unchecked, a store
-* schema can turn this CTA into an open redirect that fires immediately after a real purchase,
-* carrying the shopper's own order group to an attacker-controlled origin.
-*
-* Resolves the template against the current origin with the same parser Next.js's own router applies
-* internally to decide "external" (`dispatchNavigateAction` -> `new URL(href, location.href)` ->
-* `isExternalURL`), rather than a `startsWith('/')` string check: a prefix check alone is bypassed by
-* a leading backslash or an embedded control character — `new URL('/\\evil.example', origin)` and
-* `new URL('/\t/evil.example', origin)` both resolve to the `evil.example` origin under the WHATWG URL
-* parser (the same parser the browser itself applies before navigating) while starting with a single
-* `/` and not `//`. Asking the parser the same question it is asked again downstream is what makes
-* this bypass-proof; it also rejects `javascript:` and other non-http(s) schemes for free, since their
-* `.origin` is the literal string `"null"`, which never equals a real page origin (finding S2).
+* Fail-closed warning for a string `successHref` that still carries a `{token}`, the template form this
+* prop took before page references. Nothing fills the token any more, so navigating would land the
+* shopper on a literal `%7BorderGroup%7D` 404 right after paying. Dev-only.
 */
-function isSameOriginTemplate(successHref) {
-	try {
-		return new URL(successHref, window.location.origin).origin === window.location.origin;
-	} catch {
-		return false;
-	}
-}
-/** Fail-closed counterpart of `warnMissingOrderGroupToken`, for a `successHref` that resolves off the
-* current origin (finding S1) — same dev-only, non-production channel. */
-function warnUnsafeSuccessHref(successHref) {
+function warnTemplateSuccessHref(successHref) {
 	if (process.env.NODE_ENV === "production") return;
-	console.warn(`[PlaceOrder] successHref "${successHref}" resolves to a different origin than the current page; refusing to navigate there rather than sending the shopper off-site right after a purchase.`);
+	console.warn(`[PlaceOrder] successHref "${successHref}" is a route template; refusing to navigate there. Reference the confirmation page instead: { standard: 'order-placed' }.`);
 }
 /**
-* Fix pass, finding R1 (High): `useRouter()` requires an App Router context, and `PlaceOrder` used to
-* call it unconditionally — so the component could not render at all outside one, even for every
-* composition that never sets `successHref` (`place-order.stories.tsx`'s four stories, which mount
-* under no such context, were the concrete in-repo victim). Splitting the hook into its own child,
-* rendered only while `successHref` is set (see the call site below), means `useRouter()` — and the
-* App Router requirement that comes with it — is invoked only once a store has actually opted into the
-* navigation. This restores INV-4 / NFR-1 / US-3 AC1: with `successHref` absent, `PlaceOrder` neither
-* renders this child nor calls `useRouter()` at all.
+* Navigates once `orderId` transitions to a non-empty value — not on `succeeded` (Decision 4) — so a
+* null or empty order group and every failure path never navigate. `userErrors` is also consulted
+* directly (INV-1): this component does not own `usePlaceOrder`, so it does not rely on that hook never
+* settling an order id beside an error.
 *
-* The effect is otherwise T43's original: navigates once `orderId` transitions to a non-empty value —
-* not on `succeeded` (Decision 4) — so a null or empty order group (fix pass, finding R4) and every
-* failure path never navigate. `userErrors` is also consulted directly (fix pass, finding R3 / INV-1):
-* today's real `usePlaceOrder` never settles a non-empty `orderId` alongside a non-empty `userErrors`,
-* but this component does not own that hook and should not rely on an invariant of it that T29 is
-* about to rework (spec Decision 1) — checking both fields here keeps INV-1 true by this component's
-* own construction, not by inheritance from a hook it does not control.
+* The call site passes `displayOrderId` (`orderId ?? the surviving attempt's own orderId`), not the
+* mount-local `orderId` this type is named for: a remounted CTA whose own `usePlaceOrder()` never ran
+* has an empty local `orderId` forever, and would otherwise leave the shopper on the payment page.
 *
-* Fix pass (Low finding, T29): the call site below passes `displayOrderId` (`orderId ?? the surviving
-* attempt's own orderId`), not the mount-local `orderId` this type is named for — a remounted CTA
-* whose own `usePlaceOrder()` never itself ran (it read an already-`settled` attempt straight from
-* `usePayment()`) has an empty local `orderId` forever, so passing the local value here left a store
-* whose only confirmation surface is `successHref` stuck on the payment page after exactly the remount
-* this task exists to make safe: `succeeded` rendered (from the shared attempt) but `router.replace`
-* never fired (from the mount-local, always-null `orderId`).
+* The effect keys on the serialized `successHref`, not on its identity: a reference authored in a
+* schema arrives as a new object on every server render, and keying on it would navigate again on a
+* `router.refresh()`.
 */
 function PlaceOrderNavigateOnSuccess({ successHref, orderId, userErrors }) {
-	const router = useRouter();
+	const { replace } = useStorefrontNavigation();
+	const successKey = JSON.stringify(successHref);
 	useEffect(() => {
 		if (!orderId || userErrors.length > 0) return;
-		if (!isSameOriginTemplate(successHref)) {
-			warnUnsafeSuccessHref(successHref);
+		const authored = JSON.parse(successKey);
+		if (typeof authored !== "string") {
+			replace({
+				...authored,
+				params: {
+					...authored.params,
+					orderGroup: orderId
+				}
+			});
+			return;
+		}
+		const destination = resolveSiteRelativeHref(authored);
+		if (!destination.safe) {
+			warnUnsafeSuccessHref(authored, destination.reason);
 			return;
 		}
-		if (!successHref.includes("{orderGroup}")) {
-			warnMissingOrderGroupToken(successHref);
+		if (destination.href.includes("{")) {
+			warnTemplateSuccessHref(authored);
 			return;
 		}
-		router.replace(successHref.replaceAll("{orderGroup}", encodeURIComponent(orderId)));
+		replace(destination.href);
 	}, [
 		orderId,
-		successHref,
+		successKey,
 		userErrors,
-		router
+		replace
 	]);
 	return null;
 }
@@ -254,6 +241,7 @@ function buildAuthoredErrorMessages(messages) {
 		INVALID_CARDHOLDER_DOCUMENT: messages.invalidDocumentMessage,
 		UNSAVED_BILLING_ADDRESS: messages.unsavedBillingAddressMessage,
 		INVALID_CARD_DATA: messages.invalidCardDataMessage,
+		UNSUPPORTED_CARD_NETWORK: messages.unsupportedNetworkMessage,
 		INVALID_SECURITY_CODE: messages.invalidSecurityCodeMessage,
 		GATEWAY_ERROR: messages.gatewayErrorMessage,
 		PLACE_ORDER_IN_FLIGHT: messages.inFlightMessage,
@@ -278,11 +266,52 @@ function buildAuthoredErrorMessages(messages) {
 function resolveErrorMessage(error, authored) {
 	return authored[error.code] || error.message;
 }
-function PlaceOrder({ label = "Place order", placingLabel = "Placing order...", resumeLabel = "Complete your order", successMessage = "Order placed successfully.", missingSubmissionMessage = "Enter your payment details before placing the order.", missingMethodMessage = "Choose a payment method before placing the order.", invalidTransactionMessage = "Unable to start the payment. Please try again.", networkErrorMessage = "Unable to complete the request. Please try again.", missingDocumentMessage = "Enter your document before placing the order.", invalidDocumentMessage = "Enter a valid document before placing the order.", unavailableMethodMessage = "Choose another payment method before placing the order.", unsavedBillingAddressMessage = "Save your billing address before placing the order.", invalidCardDataMessage = "Enter valid card details before placing the order.", invalidSecurityCodeMessage = "Enter a valid security code before placing the order.", gatewayErrorMessage = "Unable to complete the payment. Please try again.", inFlightMessage = "This order is already being placed. Please wait.", unconfirmedMessage = "We could not confirm your order yet. Your payment may still be processing, so please do not pay again.", successHref, $data: $dataProp, $actions: $actionsProp, className, ...props }) {
+/**
+* The CTA's feedback nodes: the authored placing message, the alert for a refusal, the status notice for
+* an order that could not be confirmed (T176), and the success line. Rendered as the CTA's own children,
+* so none of them adds a wrapper.
+*/
+function PlaceOrderFeedback({ placing, placingMessage, firstError, unconfirmed, succeeded, successMessage, displayOrderId, authoredErrorMessages }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		placing && placingMessage?.trim() ? /* @__PURE__ */ jsx("output", {
+			"data-fs-place-order-placing": "",
+			children: placingMessage
+		}) : null,
+		firstError && !unconfirmed ? /* @__PURE__ */ jsx("div", {
+			role: "alert",
+			"data-fs-place-order-error": "",
+			children: resolveErrorMessage(firstError, authoredErrorMessages)
+		}) : null,
+		firstError && unconfirmed && !succeeded ? /* @__PURE__ */ jsx("output", {
+			"data-fs-place-order-unconfirmed": "",
+			children: resolveErrorMessage(firstError, authoredErrorMessages)
+		}) : null,
+		succeeded ? /* @__PURE__ */ jsxs("output", {
+			"data-fs-place-order-success": "",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-fs-place-order-success-message": "",
+				children: successMessage
+			}), displayOrderId ? /* @__PURE__ */ jsx("span", {
+				"data-fs-place-order-success-order-id": "",
+				children: displayOrderId
+			}) : null]
+		}) : null
+	] });
+}
+/**
+* T212: where focus moves after a refusal. Only a refusal raised before anything left the browser
+* (`reachedGateway === false`) that names an element the shopper must fix has a target; a result the
+* gateway returned never does, whatever its code.
+*/
+function refusalFocusTarget(refusals, reachedGateway) {
+	const [refusal] = refusals;
+	return reachedGateway === false && refusal ? refusalTargetOf(refusal) : null;
+}
+function PlaceOrder({ label = "Place order", placingLabel = "Placing order...", placingMessage, resumeLabel = "Complete your order", successMessage = "Order placed successfully.", missingSubmissionMessage = "Enter your payment details before placing the order.", missingMethodMessage = "Choose a payment method before placing the order.", invalidTransactionMessage = "Unable to start the payment. Please try again.", networkErrorMessage = "Unable to complete the request. Please try again.", missingDocumentMessage = "Enter your document before placing the order.", invalidDocumentMessage = "Enter a valid document before placing the order.", unavailableMethodMessage = "Choose another payment method before placing the order.", unsavedBillingAddressMessage = "Save your billing address before placing the order.", invalidCardDataMessage = "Enter valid card details before placing the order.", unsupportedNetworkMessage = "This card is not from a network the store accepts. Use another card or choose another payment method.", invalidSecurityCodeMessage = "Enter a valid security code before placing the order.", gatewayErrorMessage = "Unable to complete the payment. Please try again.", inFlightMessage = "This order is already being placed. Please wait.", unconfirmedMessage = "We could not confirm your order yet. Your payment may still be processing, so please do not pay again.", successHref = ORDER_PLACED_PAGE, $data: $dataProp, $actions: $actionsProp, className, ...props }) {
 	const $data = useDataOverride($dataProp);
 	const $actions = useActionsOverride($actionsProp);
 	const instanceKey = useId();
-	const { draft, placing: sectionPlacing, setPlacing, attempt, setAttempt } = usePayment();
+	const { draft, placing: sectionPlacing, setPlacing, attempt, setAttempt, focusRefusal } = usePayment();
 	const submitGate = usePaymentSubmitGate();
 	const { placeOrder, placing, userErrors, orderId } = usePlaceOrder({
 		$data,
@@ -301,6 +330,7 @@ function PlaceOrder({ label = "Place order", placingLabel = "Placing order...",
 		invalidDocumentMessage,
 		unsavedBillingAddressMessage,
 		invalidCardDataMessage,
+		unsupportedNetworkMessage,
 		invalidSecurityCodeMessage,
 		gatewayErrorMessage,
 		inFlightMessage,
@@ -320,7 +350,7 @@ function PlaceOrder({ label = "Place order", placingLabel = "Placing order...",
 		setPlacing
 	]);
 	const [firstError] = userErrors;
-	const settledAttemptOrderId = attempt && attempt.phase === "settled" ? attempt.orderId : null;
+	const settledAttemptOrderId = attempt?.phase === "settled" ? attempt.orderId : null;
 	const succeeded = attempted && !placing && userErrors.length === 0 || attempt?.phase === "settled";
 	const resumable = attempt?.phase === "sent" || attempt?.phase === "unresolved";
 	const displayOrderId = orderId ?? settledAttemptOrderId;
@@ -328,7 +358,11 @@ function PlaceOrder({ label = "Place order", placingLabel = "Placing order...",
 	const blockedByOtherInstance = sectionPlacing && !resumable;
 	function handleClick() {
 		setAttempted(false);
-		placeOrder().then(() => setAttempted(true));
+		placeOrder().then(({ userErrors: refusals, reachedGateway }) => {
+			setAttempted(true);
+			const target = refusalFocusTarget(refusals, reachedGateway);
+			if (target) focusRefusal(target);
+		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
@@ -344,32 +378,21 @@ function PlaceOrder({ label = "Place order", placingLabel = "Placing order...",
 				...placing ? { "data-fs-place-order-button-pending": "" } : {},
 				children: placing ? placingLabel : resumable ? resumeLabel : label
 			}),
-			firstError && !unconfirmed ? /* @__PURE__ */ jsx("div", {
-				role: "alert",
-				"data-fs-place-order-error": "",
-				children: resolveErrorMessage(firstError, authoredErrorMessages)
-			}) : null,
-			firstError && unconfirmed && !succeeded ? /* @__PURE__ */ jsx("div", {
-				role: "status",
-				"data-fs-place-order-unconfirmed": "",
-				children: resolveErrorMessage(firstError, authoredErrorMessages)
-			}) : null,
-			succeeded ? /* @__PURE__ */ jsxs("div", {
-				role: "status",
-				"data-fs-place-order-success": "",
-				children: [/* @__PURE__ */ jsx("span", {
-					"data-fs-place-order-success-message": "",
-					children: successMessage
-				}), displayOrderId ? /* @__PURE__ */ jsx("span", {
-					"data-fs-place-order-success-order-id": "",
-					children: displayOrderId
-				}) : null]
-			}) : null,
-			successHref != null ? /* @__PURE__ */ jsx(PlaceOrderNavigateOnSuccess, {
+			/* @__PURE__ */ jsx(PlaceOrderFeedback, {
+				placing,
+				placingMessage,
+				firstError,
+				unconfirmed,
+				succeeded,
+				successMessage,
+				displayOrderId,
+				authoredErrorMessages
+			}),
+			/* @__PURE__ */ jsx(PlaceOrderNavigateOnSuccess, {
 				successHref,
 				orderId: displayOrderId,
 				userErrors
-			}) : null
+			})
 		]
 	});
 }