@12-apps/payments-frontend 3.39.0 → 3.41.0

package/src/components/checkout/pix-parts.tsx

@@ -82,6 +82,62 @@ export function useClipboardCopy(text: string): { copy: () => Promise<boolean>;
   return { copy, justCopied };
 }
 
+/** A copy opened inside a tap whose text arrives later (FUT-3612) — see {@link deferredCopy}. */
+export interface DeferredCopy {
+  /** The text has arrived: write it. */
+  resolve: (text: string) => void;
+  /** There will be no text (the raise was refused): give the clipboard up. */
+  fail: () => void;
+  /** `true` once the clipboard holds the text; `false` when it refused or there was none. */
+  done: Promise<boolean>;
+}
+
+/**
+ * Open the clipboard NOW, inside the buyer's tap, for a text the server has
+ * not answered yet. Safari lets a page write to the clipboard only inside the
+ * gesture, so the write is started here with a promise of the text
+ * (`ClipboardItem`); where that is missing or refused, the plain write is
+ * tried once the text arrives — Chrome takes it from a focused page.
+ */
+export function deferredCopy(): DeferredCopy {
+  let give: (text: string | null) => void = () => undefined;
+  const text = new Promise<string | null>((resolve) => {
+    give = resolve;
+  });
+  const plain = async (): Promise<boolean> => {
+    const value = await text;
+    if (value === null || !navigator.clipboard) return false;
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+  const Item = typeof window === "undefined" ? undefined : (window as { ClipboardItem?: typeof ClipboardItem }).ClipboardItem;
+  let done: Promise<boolean> = Promise.resolve(false);
+  let opened = false;
+  if (Item && navigator.clipboard && typeof navigator.clipboard.write === "function") {
+    const blob = text.then((value) => {
+      if (value === null) throw new Error("no text");
+      return new Blob([value], { type: "text/plain" });
+    });
+    // An unanswered blob must not surface as an unhandled rejection.
+    blob.catch(() => undefined);
+    try {
+      done = navigator.clipboard.write([new Item({ "text/plain": blob })]).then(
+        () => true,
+        async () => (await text) !== null && plain(),
+      );
+      opened = true;
+    } catch {
+      // A browser whose ClipboardItem takes no promise throws here, in the tap.
+    }
+  }
+  if (!opened) done = plain();
+  return { resolve: (value) => give(value), fail: () => give(null), done };
+}
+
 /**
  * A PIX's QR or code, veiled while the cart has changed under it (FUT-3535):
  * blurred past reading, out of reach of a pointer, a selection and a screen

package/src/components/checkout/pix-view.tsx

@@ -287,6 +287,8 @@ function PixBody({ order, pix, poll }: { order: CheckoutOrder; pix: PixCharge; p
         onShowQr={() => setAfterCopy(false)}
         onPreferCard={stage.preferCard}
         footer={poll.error || poll.timedOut ? footerLine(copy.verifying) : null}
+        writeClipboard={writeClipboard}
+        setAfterCopy={setAfterCopy}
       />
     );
   }

package/src/components/settings-live.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * The host's realtime channel for the settings screen (FUT-648).
+ *
+ * A provider's connection moves while nobody touches this tab: the OAuth grant
+ * completes in the tab the owner sent to the provider, a colleague saves a key
+ * or reorders the chain, a webhook or a sweep settles the activation charge.
+ * The screen read its view once on mount and then sat on it, so all of that
+ * reached the owner only through a reload.
+ *
+ * Nothing here knows what the channel is — the same split as the checkout's
+ * `CheckoutLiveSignal`. A host that can hear "this store's payment settings
+ * moved" passes whether its channel is live and a way to be told when it
+ * fires; the screen re-reads its view on every hint and once each time the
+ * channel (re)opens, because a hint published while it was down reached
+ * nobody. The hint carries nothing and is never trusted as data: the re-read
+ * goes through the same client, which is the only thing that decides what the
+ * owner may see.
+ *
+ * There is no timer, live or not. The screen never polled, so a host without a
+ * channel — or one whose channel is down — keeps exactly the mount read and its
+ * own actions' re-reads, as before.
+ */
+export interface PaymentsSettingsLiveSignal {
+  /** Whether the host's channel is connected right now. */
+  live: boolean;
+  /**
+   * Be told when the channel says this store's payment settings moved.
+   * Returns the unsubscribe. Should be stable across renders: a new function
+   * re-subscribes.
+   */
+  subscribe: (onHint: () => void) => () => void;
+}
+
+/**
+ * Re-read on every hint, and once whenever the channel goes from not-live to
+ * live — the first connect after mount included, since the mount read may
+ * have been answered before the subscription existed.
+ *
+ * `reload` is read through a ref so a host re-rendering with a new function
+ * neither re-subscribes nor re-reads.
+ */
+export function useSettingsLive(
+  signal: PaymentsSettingsLiveSignal | undefined,
+  reload: () => void,
+): void {
+  const latest = useRef(reload);
+  latest.current = reload;
+  const live = signal?.live === true;
+  const wasLive = useRef(live);
+  const subscribe = signal?.subscribe;
+
+  useEffect(() => {
+    const opened = live && !wasLive.current;
+    wasLive.current = live;
+    if (opened) latest.current();
+  }, [live]);
+
+  useEffect(() => {
+    if (!subscribe) return undefined;
+    return subscribe(() => latest.current());
+  }, [subscribe]);
+}

package/src/flows/create-payments-settings.tsx

@@ -18,10 +18,11 @@
  * settings page behind.
  *
  * **`prepareConnect`, `selectedProvider` / `onProviderChange`,
- * `initialProvider`, `onChanged`.** The OAuth CSRF state is minted against
+ * `initialProvider`, `onChanged`, `live`.** The OAuth CSRF state is minted against
  * the host's admin session; which provider is open may live in the host's
  * URL. Both are the host's, per render, and a factory that froze them would
- * make the page uncontrollable.
+ * make the page uncontrollable. `live` is the host's realtime channel, whose
+ * status changes from render to render (FUT-648).
  */
 
 import type { ComponentType, JSX } from "react";
@@ -32,6 +33,9 @@ import {
 } from "../components/PaymentProviderSettings";
 import type { PaymentsSettingsClient } from "../client";
 
+/** The `live` prop's shape — the host's channel, see `../components/settings-live`. */
+export type { PaymentsSettingsLiveSignal } from "../components/settings-live";
+
 /** What a host binds ONCE: the settings port. */
 export interface PaymentsSettingsWebConfig {
   /**

package/src/index.ts

@@ -56,7 +56,7 @@ export { PT_BR_CHECKOUT_PAYMENT_COPY } from './components/checkout-payment-pt-BR
 // ---------------------------------------------------------------------------
 export { CheckoutFlow, type CheckoutCartView, type CheckoutFlowProps } from './components/checkout/checkout-flow';
 // The Pagamento step as ONE list (FUT-3591/3592) — opt-in via `CheckoutFlowProps.paymentList`.
-export type { CheckoutDoorOption, CheckoutListChoice, CheckoutListHold, CheckoutOnlineChoice, CheckoutPaymentList, PaymentListCopy } from './components/checkout/list/types';
+export type { CheckoutDoorOption, CheckoutListChoice, CheckoutListHold, CheckoutOnlineChoice, CheckoutPaymentList, CheckoutPixBank, PaymentListCopy, PixBankCopy, PixBankId, PixBankName } from './components/checkout/list/types';
 export { PT_BR_PAYMENT_LIST_COPY } from './components/checkout/list/pt-BR';
 export type { BackActionEmphasis } from './components/checkout/payment-status-parts';
 export type { CheckoutDeliverySummary, CheckoutSummaryLine } from './components/checkout/payment-summary';
@@ -323,7 +323,7 @@ export {
   type PaymentProviderSettingsProps,
 } from './components/PaymentProviderSettings';
 export { createWebPaymentsSettings } from './flows/create-payments-settings';
-export type { BoundPaymentsSettingsProps, PaymentsSettingsSurface, PaymentsSettingsWebConfig } from './flows/create-payments-settings';
+export type { BoundPaymentsSettingsProps, PaymentsSettingsLiveSignal, PaymentsSettingsSurface, PaymentsSettingsWebConfig } from './flows/create-payments-settings';
 
 // ---------------------------------------------------------------------------
 // The PLATFORM operations screens (FUT-479 / FUT-483, packaged by FUT-573) —

package/src/locales.ts

@@ -22,7 +22,9 @@ import type { CheckoutScreensCopy } from './components/checkout/screens-copy';
 import { PT_BR_CHECKOUT_SCREENS_COPY } from './components/checkout/screens-pt-BR';
 import { EN_US_PAYMENT_LIST_COPY } from './components/checkout/list/en-US';
 import { PT_BR_PAYMENT_LIST_COPY } from './components/checkout/list/pt-BR';
-import type { PaymentListCopy } from './components/checkout/list/types';
+import { EN_US_PIX_BANK_COPY } from './components/checkout/list/bank-en-US';
+import { PT_BR_PIX_BANK_COPY } from './components/checkout/list/bank-pt-BR';
+import type { PaymentListCopy, PixBankCopy } from './components/checkout/list/types';
 import type { CheckoutViewCopy, PaymentStatusCopy } from './components/checkout/view-copy';
 import type { PlatformHomologacaoCopy } from './components/platform/copy';
 import { EN_US_PLATFORM_HOMOLOGACAO_COPY } from './components/platform/en-US';
@@ -88,6 +90,15 @@ export const PAYMENT_LIST_COPY = {
   'en-US': EN_US_PAYMENT_LIST_COPY,
 } as const satisfies LocalePack<PaymentListCopy>;
 
+/**
+ * The Pix-to-bank flow's words (FUT-3612) — `CheckoutFlowProps.paymentList.pixBank.copy`.
+ * Read by the SHOPPER.
+ */
+export const PIX_BANK_COPY = {
+  'pt-BR': PT_BR_PIX_BANK_COPY,
+  'en-US': EN_US_PIX_BANK_COPY,
+} as const satisfies LocalePack<PixBankCopy>;
+
 export const CHECKOUT_COPY = {
   'pt-BR': PT_BR_CHECKOUT_COPY,
   'en-US': EN_US_CHECKOUT_COPY,