@12-apps/payments-frontend 1.7.1 → 1.8.1

package/src/flows/create-payment-flows.tsx

@@ -0,0 +1,196 @@
+/**
+ * `createPaymentFlows` — the buyer checkout, mounted rather than composed
+ * (FUT-741).
+ *
+ * Called ONCE at module scope; the host mounts what comes back. See
+ * `./types.ts` for the config vocabulary and why none of it names a vendor.
+ *
+ * ## Why the scope arrives as HOOKS
+ *
+ * `useScope`, `useCart`, `useBuyerDefaults`, `useComanda` and
+ * `ports.useAvailability` are hooks, not values, and they are invoked in a
+ * component BODY — never read at factory time. The factory runs once, at module
+ * evaluation, so a value-shaped config would freeze the first store's slug and
+ * one moment's cart total onto every checkout the page ever renders. Naming
+ * them `use*` also keeps rules-of-hooks lint able to see them.
+ */
+import { useCallback, type JSX, type ReactNode } from "react";
+
+import { buyerFieldsFor } from "../components/checkout/buyer-fields";
+import { CheckoutFlow } from "../components/checkout/checkout-flow";
+import { createCheckoutClient } from "../components/checkout/transport";
+import type { CheckoutProviderConfig, ComandaCheckout } from "../components/checkout/types";
+import { useCheckoutController } from "../components/checkout/use-checkout-controller";
+
+import { DEFAULT_CHECKOUT_COPY_FE } from "./copy";
+import { FlowsProvider, useResolvedConfig, type FlowsRuntime } from "./runtime";
+import { buyerScreens } from "./screens-buyer";
+import { hostedScreens } from "./screens-hosted";
+import { payScreens, storeCannotCharge } from "./screens-pay";
+import type {
+  CheckoutAvailability,
+  CheckoutController,
+  CheckoutScreens,
+  PaymentFlows,
+  PaymentFlowsConfig,
+} from "./types";
+
+/** A store that is always payable — what a host with no veto to cast means. */
+const ALWAYS_PAYABLE: CheckoutAvailability = { payable: true };
+
+/** Build the runtime every screen closes over. */
+function buildRuntime(config: PaymentFlowsConfig): FlowsRuntime {
+  const client = createCheckoutClient(config.transport);
+  const navigate =
+    config.ports.navigate ??
+    ((url: string) => {
+      window.location.assign(url);
+    });
+  return {
+    config,
+    client,
+    copy: { ...DEFAULT_CHECKOUT_COPY_FE, ...config.copy },
+    navigate,
+    // Both of these are HOOKS. They are called from a component body on every
+    // render, so the slug follows the host's router and the availability vote
+    // follows whatever the host currently knows.
+    useTenantSlug: () => config.useScope?.().tenantSlug,
+    useAvailability: () => config.ports.useAvailability?.() ?? ALWAYS_PAYABLE,
+  };
+}
+
+/** The whole three-step flow, with the config fetched and availability decided. */
+function buildCheckout(
+  runtime: FlowsRuntime,
+  screens: CheckoutScreens,
+): PaymentFlows["Checkout"] {
+  const { ports } = runtime.config;
+  const Unavailable = screens.PaymentsUnavailable;
+
+  function CheckoutBody({ comanda }: { comanda?: ComandaCheckout | null }): JSX.Element {
+    const cart = runtime.config.useCart();
+    const defaults = runtime.config.useBuyerDefaults?.() ?? {};
+    const hostComanda = runtime.config.useComanda?.() ?? null;
+    const { config, pending } = useResolvedConfig(runtime);
+    const availability = runtime.useAvailability();
+    const tenantSlug = runtime.useTenantSlug();
+    // Adapts the port to the package's older, prop-shaped contract. Memoised so
+    // the controller does not see a fresh `createOrder` identity each render.
+    const createOrder = useCallback(
+      (input: Parameters<typeof ports.createPayable>[0]) => ports.createPayable(input),
+      [],
+    );
+
+    if (storeCannotCharge(config, pending, availability.payable)) return <Unavailable />;
+
+    return (
+      <CheckoutFlow
+        cart={cart}
+        createOrder={createOrder}
+        saveBuyerContact={ports.saveBuyerContact}
+        onExitToMenu={ports.exitToCatalog}
+        onPaid={ports.onPaid}
+        defaultBuyer={defaults.buyer}
+        taxIdOnFile={defaults.taxIdOnFile ?? false}
+        comanda={comanda ?? hostComanda}
+        providerConfig={config}
+        tenantSlug={tenantSlug}
+        confirmationExtra={runtime.config.confirmation?.extra}
+      />
+    );
+  }
+
+  return function Checkout(props) {
+    // Its OWN provider, so the one-line mount really is one line: `/config` is
+    // fetched here and every nested screen reads that answer.
+    //
+    // The design-system slots come from the `FlowsShell` inside it, and the
+    // `CheckoutComponentsProvider` that `CheckoutFlow` opens one level down
+    // INHERITS them (see `ui.tsx`) rather than resetting to raw MUI — which is
+    // why nothing here re-threads `components`.
+    return (
+      <FlowsProvider runtime={runtime}>
+        <CheckoutBody {...props} />
+      </FlowsProvider>
+    );
+  };
+}
+
+/** Assemble the eleven screens from their builders. */
+function buildScreens(runtime: FlowsRuntime): CheckoutScreens {
+  return {
+    MethodChoice: buyerScreens.buildMethodChoice(runtime),
+    BuyerDetails: buyerScreens.buildBuyerDetails(runtime),
+    CardEntry: payScreens.buildCardEntry(runtime),
+    PixPayment: payScreens.buildPixPayment(runtime),
+    HostedHandoff: hostedScreens.buildHostedHandoff(runtime),
+    HostedReturn: hostedScreens.buildHostedReturn(runtime),
+    PaymentStatus: payScreens.buildPaymentStatus(runtime),
+    PaymentsUnavailable: payScreens.buildPaymentsUnavailable(runtime),
+    PayerSummary: buyerScreens.buildPayerSummary(runtime),
+    SavedCards: buyerScreens.buildSavedCards(runtime),
+    EmptyCart: buyerScreens.buildEmptyCart(runtime),
+  };
+}
+
+/** The flow controller, pre-bound to the ports and the chain's declaration. */
+function buildUseCheckout(runtime: FlowsRuntime): () => CheckoutController {
+  const { ports } = runtime.config;
+  return function useCheckout(): CheckoutController {
+    const { config } = useResolvedConfig(runtime);
+    const defaults = runtime.config.useBuyerDefaults?.() ?? {};
+    return useCheckoutController(
+      {
+        createOrder: ports.createPayable,
+        saveBuyerContact: ports.saveBuyerContact,
+        onExitToMenu: ports.exitToCatalog,
+        onPaid: ports.onPaid,
+      },
+      defaults.buyer,
+      defaults.taxIdOnFile ?? false,
+      // Resolved for NO method: the gate runs on the Dados step, before the
+      // picker, and FUT-595's rule is to collect the union up front.
+      buyerFieldsFor(config?.chain, null),
+    );
+  };
+}
+
+/**
+ * The buyer checkout, pre-bound.
+ *
+ * ```ts
+ * export const components = createPaymentFlows({ useCart, ports: { … } });
+ * // …and in the page:  <components.Checkout />
+ * ```
+ *
+ * The flat exports (`CheckoutFlow`, the hooks, the fetch clients) are
+ * unchanged and remain the escape hatch for a host that wants its own
+ * composition — nothing here replaces them.
+ */
+export function createPaymentFlows(config: PaymentFlowsConfig): PaymentFlows {
+  const runtime = buildRuntime(config);
+  const screens = buildScreens(runtime);
+
+  function Provider({
+    children,
+    config: provided,
+  }: {
+    children: ReactNode;
+    config?: CheckoutProviderConfig | null;
+  }): JSX.Element {
+    return (
+      <FlowsProvider runtime={runtime} config={provided}>
+        {children}
+      </FlowsProvider>
+    );
+  }
+
+  return {
+    Checkout: buildCheckout(runtime, screens),
+    Provider,
+    screens,
+    useCheckout: buildUseCheckout(runtime),
+    useCheckoutConfig: () => useResolvedConfig(runtime),
+    client: runtime.client,
+  };
+}

package/src/flows/runtime.tsx

@@ -0,0 +1,149 @@
+/**
+ * The factory's shared runtime (FUT-741): the fetched store protocol, and the
+ * providers that stop every nested screen re-fetching it.
+ *
+ * Two layers, on purpose:
+ *
+ *   - {@link FlowsShell} supplies the things a screen cannot work WITHOUT —
+ *     the design-system slots, the bound transport, the navigate port. Every
+ *     returned screen wraps itself in one, which is what makes "every
+ *     `screens.*` member already works standalone" true rather than
+ *     aspirational. Re-supplying them under a `Provider` is a no-op.
+ *   - {@link FlowsProvider} adds the one thing that is worth NOT repeating: the
+ *     fetched `/config`. A screen under it reads that answer; a screen standing
+ *     alone fetches its own.
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type JSX,
+  type ReactNode,
+} from "react";
+
+import { CheckoutClientProvider } from "../components/checkout/client-context";
+import { CheckoutNavigateProvider } from "../components/checkout/navigate-context";
+import type { CheckoutClient } from "../components/checkout/transport";
+import type { CheckoutProviderConfig } from "../components/checkout/types";
+import { CheckoutComponentsProvider } from "../components/checkout/ui";
+
+import type { CheckoutCopyFE } from "./copy";
+import type { CheckoutAvailability, CheckoutConfigState, PaymentFlowsConfig } from "./types";
+
+/** Supplied by a `Provider`; `null` means "nobody above me fetched it". */
+const FetchedConfigContext = createContext<CheckoutConfigState | null>(null);
+
+/** Everything one factory hands the screens it built. */
+export interface FlowsRuntime {
+  config: PaymentFlowsConfig;
+  client: CheckoutClient;
+  copy: CheckoutCopyFE;
+  navigate: (url: string) => void;
+  /** The store slug for THIS render — read from the host's hook, never frozen. */
+  useTenantSlug(): string | undefined;
+  /** The host's availability vote for THIS render. Defaults to "payable". */
+  useAvailability(): CheckoutAvailability;
+}
+
+/**
+ * Fetch the store protocol for one slug.
+ *
+ * A failure is NOT retried into a loop and NOT surfaced as an error state: the
+ * config read fails OPEN for the UI (`null` renders both method tiles) and the
+ * server still fails the charge CLOSED. Nothing about a blip here may hide a
+ * working checkout, and nothing about it may invent permission to mock.
+ */
+function useFetchedConfig(
+  runtime: FlowsRuntime,
+  enabled: boolean,
+): CheckoutConfigState {
+  const { client } = runtime;
+  const onWarning = runtime.config.onWarning;
+  const tenantSlug = runtime.useTenantSlug();
+  const [state, setState] = useState<CheckoutConfigState>({ config: null, pending: enabled });
+
+  useEffect(() => {
+    if (!enabled || !tenantSlug) {
+      setState({ config: null, pending: false });
+      return undefined;
+    }
+    let active = true;
+    setState({ config: null, pending: true });
+    void client.getConfig(tenantSlug).then((result) => {
+      if (!active) return;
+      if (!result.ok) {
+        // Reported, never logged: a `console.error` in a buyer's browser tells
+        // nobody. Silent by default is the honest alternative.
+        onWarning?.("checkout config read failed", { tenantSlug, error: result.error });
+        setState({ config: null, pending: false });
+        return;
+      }
+      setState({ config: result.data, pending: false });
+    });
+    return () => {
+      active = false;
+    };
+  }, [client, tenantSlug, enabled, onWarning]);
+
+  return state;
+}
+
+/**
+ * The store protocol, from the nearest `Provider` or fetched here.
+ *
+ * Both branches always run their hooks; the self-fetch is merely disabled when
+ * somebody above already has the answer, which keeps the rule of hooks honest.
+ */
+export function useResolvedConfig(runtime: FlowsRuntime): CheckoutConfigState {
+  const provided = useContext(FetchedConfigContext);
+  const own = useFetchedConfig(runtime, provided === null);
+  return provided ?? own;
+}
+
+/** Slots, transport and the navigate port — what a screen cannot work without. */
+export function FlowsShell({
+  runtime,
+  children,
+}: {
+  runtime: FlowsRuntime;
+  children: ReactNode;
+}): JSX.Element {
+  return (
+    <CheckoutComponentsProvider components={runtime.config.components}>
+      <CheckoutClientProvider client={runtime.client}>
+        <CheckoutNavigateProvider navigate={runtime.navigate}>{children}</CheckoutNavigateProvider>
+      </CheckoutClientProvider>
+    </CheckoutComponentsProvider>
+  );
+}
+
+/**
+ * The shell plus the fetched `/config`, supplied once for a host that nests
+ * individual screens in its own layout.
+ *
+ * A host that passes its own `config` skips the fetch entirely — that is the
+ * seam a story, a harness page or a server-rendered host uses to STATE the
+ * protocol rather than round-trip for it.
+ */
+export function FlowsProvider({
+  runtime,
+  config,
+  children,
+}: {
+  runtime: FlowsRuntime;
+  config?: CheckoutProviderConfig | null;
+  children: ReactNode;
+}): JSX.Element {
+  const fetched = useFetchedConfig(runtime, config === undefined);
+  const value = useMemo<CheckoutConfigState>(
+    () => (config === undefined ? fetched : { config, pending: false }),
+    [config, fetched],
+  );
+  return (
+    <FlowsShell runtime={runtime}>
+      <FetchedConfigContext.Provider value={value}>{children}</FetchedConfigContext.Provider>
+    </FlowsShell>
+  );
+}

package/src/flows/screens-buyer.tsx

@@ -0,0 +1,170 @@
+/**
+ * The buyer-facing screens the factory binds (FUT-741), part one: choosing a
+ * method, stating who is paying, reusing a card, and the empty cart.
+ *
+ * Every one of them is a THIN binding. The behaviour still lives in the
+ * components this package already shipped; what is new is that the config,
+ * the transport, the scope and the slots arrive from the factory instead of
+ * from six props the host had to thread itself.
+ */
+import { Box } from "@mui/material";
+import { useEffect, useMemo, useState, type JSX } from "react";
+
+import { SavedCardsPicker, type SavedCard } from "../card";
+import { buyerFieldsFor } from "../components/checkout/buyer-fields";
+import { BuyerInfoForm } from "../components/checkout/buyer-info-form";
+import { EmptyCart as EmptyCartView } from "../components/checkout/checkout-steps";
+import {
+  cardPathAvailable,
+  offeredMethods,
+  selectableMethods,
+  usePreselectSoleMethod,
+} from "../components/checkout/method-capability";
+import { MethodPicker } from "../components/checkout/method-picker";
+import { PayerSummary as PayerSummaryView } from "../components/checkout/payer-summary";
+import type { BuyerInfo, PaymentMethod } from "../components/checkout/types";
+import { useCheckoutComponents } from "../components/checkout/ui";
+
+import { FlowsShell, useResolvedConfig, type FlowsRuntime } from "./runtime";
+import type { BuyerDetailsProps, CheckoutScreens } from "./types";
+
+function buildMethodChoice(runtime: FlowsRuntime): CheckoutScreens["MethodChoice"] {
+  function MethodChoiceBody({
+    value,
+    onChange,
+  }: {
+    value: PaymentMethod | null;
+    onChange: (method: PaymentMethod) => void;
+  }): JSX.Element {
+    const { config } = useResolvedConfig(runtime);
+    const offered = offeredMethods(config);
+    const cardUnavailable = !cardPathAvailable(config);
+    usePreselectSoleMethod(selectableMethods(offered, cardUnavailable), value, onChange);
+    return (
+      <MethodPicker
+        value={value}
+        onChange={onChange}
+        cardUnavailable={cardUnavailable}
+        offered={offered}
+      />
+    );
+  }
+  return function MethodChoice(props) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <MethodChoiceBody {...props} />
+      </FlowsShell>
+    );
+  };
+}
+
+function buildBuyerDetails(runtime: FlowsRuntime): CheckoutScreens["BuyerDetails"] {
+  function BuyerDetailsBody({
+    value,
+    onChange,
+    method,
+    onContinue,
+    error,
+  }: BuyerDetailsProps): JSX.Element {
+    const { Button, Text } = useCheckoutComponents();
+    const { config } = useResolvedConfig(runtime);
+    // ∩ method (FUT-595). An absent declaration degrades to CPF-required —
+    // never to "ask nothing", which is a 400 the buyer only meets after
+    // finishing the form.
+    const fields = useMemo(() => buyerFieldsFor(config?.chain, method), [config, method]);
+    return (
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 3 }}>
+        <BuyerInfoForm value={value} onChange={onChange} fields={fields} fieldError={error} />
+        <Box>
+          <Button
+            variant="solid"
+            color="primary"
+            size="lg"
+            fullWidth
+            onClick={onContinue}
+            dataTestId="checkout-continue"
+          >
+            {runtime.copy.continueAction}
+          </Button>
+        </Box>
+        <Text variant="caption" size="xs" color="secondary" as="p">
+          Pagamento seguro
+        </Text>
+      </Box>
+    );
+  }
+  return function BuyerDetails(props) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <BuyerDetailsBody {...props} />
+      </FlowsShell>
+    );
+  };
+}
+
+function buildPayerSummary(runtime: FlowsRuntime): CheckoutScreens["PayerSummary"] {
+  return function PayerSummary({ buyer, onEdit }: { buyer: BuyerInfo; onEdit?: () => void }) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <PayerSummaryView name={buyer.name} taxId={buyer.taxId} onEdit={onEdit} />
+      </FlowsShell>
+    );
+  };
+}
+
+/** The vaulted instruments this store can actually charge (FUT-697 scoping). */
+function useScopedInstruments(runtime: FlowsRuntime): SavedCard[] {
+  const tenantSlug = runtime.useTenantSlug();
+  const [cards, setCards] = useState<SavedCard[]>([]);
+  useEffect(() => {
+    let active = true;
+    void runtime.client.listInstruments(tenantSlug).then((list) => {
+      if (active) setCards(list);
+    });
+    return () => {
+      active = false;
+    };
+  }, [runtime, tenantSlug]);
+  return cards;
+}
+
+function buildSavedCards(runtime: FlowsRuntime): CheckoutScreens["SavedCards"] {
+  function SavedCardsBody({
+    selection,
+    onSelect,
+  }: {
+    selection: string;
+    onSelect: (id: string) => void;
+  }): JSX.Element | null {
+    const savedCards = useScopedInstruments(runtime);
+    // Nothing to reuse renders nothing at all — an empty picker is a heading
+    // over a void, and the new-card form below it already says what to do.
+    if (savedCards.length === 0) return null;
+    return <SavedCardsPicker savedCards={savedCards} selection={selection} onSelect={onSelect} />;
+  }
+  return function SavedCards(props) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <SavedCardsBody {...props} />
+      </FlowsShell>
+    );
+  };
+}
+
+function buildEmptyCart(runtime: FlowsRuntime): CheckoutScreens["EmptyCart"] {
+  return function EmptyCart() {
+    return (
+      <FlowsShell runtime={runtime}>
+        <EmptyCartView onBack={runtime.config.ports.exitToCatalog} />
+      </FlowsShell>
+    );
+  };
+}
+
+export const buyerScreens = {
+  buildMethodChoice,
+  buildBuyerDetails,
+  buildPayerSummary,
+  buildSavedCards,
+  buildEmptyCart,
+};

package/src/flows/screens-hosted.tsx

@@ -0,0 +1,149 @@
+/**
+ * The hosted handover, as two SCREENS (FUT-741) — the leg of checkout that had
+ * none.
+ *
+ * Today a redirect provider's link (FUT-556) and a 3-DS challenge (FUT-698) are
+ * both a bare `window.location.assign` buried in a hook. When the navigation
+ * works, nobody notices. When it does not — a popup/redirect blocker, a slow
+ * DNS, an in-app webview that refuses cross-origin navigations, a buyer who
+ * taps back — the buyer is left looking at a page that says nothing, offers
+ * nothing, and has already raised a charge.
+ *
+ * So: an interstitial that PARKS the order first, then navigates, and renders
+ * an explicit link as the fallback the assign never had. And the return leg as
+ * a screen of its own, so "rehydrate the parked order and poll it to a terminal
+ * state" is something a host can mount at its return route rather than
+ * something that only happens if the buyer lands back on the exact component
+ * that left.
+ *
+ * ORDERING IS LOAD-BEARING: park, then navigate. The navigation may tear this
+ * SPA down at any point after it starts, and a return trip that finds nothing
+ * parked drops the buyer on a blank confirmation after they have paid.
+ */
+import { Box } from "@mui/material";
+import { useEffect, useState, type JSX } from "react";
+
+import { rememberHostedOrder, takeHostedOrder } from "../components/checkout/hosted-return";
+import type { CheckoutOrder, OrderStatus } from "../components/checkout/types";
+import { useCheckoutComponents } from "../components/checkout/ui";
+import { usePaymentPolling } from "../components/checkout/use-payment-polling";
+
+import { FlowsShell, type FlowsRuntime } from "./runtime";
+import type { CheckoutScreens } from "./types";
+
+/** Park the order, then navigate — exactly once, even under StrictMode. */
+function useHandover(payable: CheckoutOrder, url: string, navigate: (url: string) => void): void {
+  const [done, setDone] = useState(false);
+  useEffect(() => {
+    if (done) return;
+    setDone(true);
+    rememberHostedOrder(payable);
+    navigate(url);
+  }, [done, payable, url, navigate]);
+}
+
+function buildHostedHandoff(runtime: FlowsRuntime): CheckoutScreens["HostedHandoff"] {
+  function HostedHandoffBody({
+    url,
+    payable,
+    onCancel,
+  }: {
+    url: string;
+    payable: CheckoutOrder;
+    onCancel?: () => void;
+  }): JSX.Element {
+    const { Button, LoadingState, Text } = useCheckoutComponents();
+    const copy = runtime.copy;
+    useHandover(payable, url, runtime.navigate);
+    return (
+      <Box
+        data-testid="checkout-hosted-handoff"
+        sx={{ display: "flex", flexDirection: "column", gap: 2, alignItems: "center", py: 4 }}
+      >
+        <Text variant="heading" size="md" weight="bold" as="h2">
+          {copy.handoffTitle}
+        </Text>
+        <Text variant="body" size="sm" color="secondary" as="p">
+          {copy.handoffBody}
+        </Text>
+        <LoadingState variant="spinner" size="md" message="" dataTestId="checkout-hosted-waiting" />
+        {/* A real anchor, not a second scripted navigation: when the scripted
+            one was blocked, another one will be too. This is the affordance a
+            bare `location.assign` never had. */}
+        <a href={url} data-testid="checkout-hosted-link" rel="noreferrer">
+          {copy.handoffLink}
+        </a>
+        {onCancel ? (
+          <Button
+            variant="text"
+            color="neutral"
+            size="sm"
+            onClick={onCancel}
+            dataTestId="checkout-hosted-cancel"
+          >
+            {copy.handoffCancel}
+          </Button>
+        ) : null}
+      </Box>
+    );
+  }
+  return function HostedHandoff(props) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <HostedHandoffBody {...props} />
+      </FlowsShell>
+    );
+  };
+}
+
+function buildHostedReturn(runtime: FlowsRuntime): CheckoutScreens["HostedReturn"] {
+  function HostedReturnBody({
+    onResolved,
+  }: {
+    onResolved: (status: OrderStatus) => void;
+  }): JSX.Element {
+    const { Alert, LoadingState } = useCheckoutComponents();
+    // Read-and-clear, once, on first render: the resumed view belongs to
+    // exactly one return trip.
+    const [parked] = useState(takeHostedOrder);
+    const { status } = usePaymentPolling(parked?.orderId ?? null, {
+      enabled: Boolean(parked),
+      intervalMs: runtime.config.polling?.intervalMs,
+    });
+
+    useEffect(() => {
+      if (status && status !== "AWAITING_PAYMENT") onResolved(status);
+    }, [status, onResolved]);
+
+    if (!parked) {
+      return (
+        <Alert
+          variant="info"
+          title={runtime.copy.returnPending}
+          description={runtime.copy.returnUnknown}
+          showIcon
+          data-testid="checkout-hosted-return-unknown"
+        />
+      );
+    }
+    return (
+      <Box data-testid="checkout-hosted-return" sx={{ py: 4 }}>
+        <LoadingState
+          variant="spinner"
+          size="md"
+          message={runtime.copy.returnPending}
+          dataTestId="checkout-hosted-return-waiting"
+        />
+      </Box>
+    );
+  }
+  return function HostedReturn(props) {
+    return (
+      <FlowsShell runtime={runtime}>
+        <HostedReturnBody {...props} />
+      </FlowsShell>
+    );
+  };
+}
+
+export const hostedScreens = { buildHostedHandoff, buildHostedReturn };