@12-apps/payments-frontend 3.8.0 → 3.10.0

package/src/components/checkout/google-pay-button.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { useEffect, useRef, useState, type JSX } from "react";
 
+import { useCheckoutCopy } from "./copy-context";
 import type { CheckoutOrder } from "./types";
 
 /**
@@ -219,11 +220,13 @@ export function GooglePayButton({
   onReady,
 }: GooglePayButtonProps): JSX.Element | null {
   const client = useGooglePayClient(api, environment);
+  const copy = useCheckoutCopy().screens.wallet.googlePay;
   const container = useRef<HTMLDivElement | null>(null);
   // The latest handlers/order, so the Google-rendered button — mounted once —
-  // never closes over a stale charge target.
-  const current = useRef({ order, params, onKey, onError, onReady });
-  current.current = { order, params, onKey, onError, onReady };
+  // never closes over a stale charge target. The words ride along for the same
+  // reason: the sheet's failure is reported from inside that one-time closure.
+  const current = useRef({ order, params, onKey, onError, onReady, copy });
+  current.current = { order, params, onKey, onError, onReady, copy };
 
   useEffect(() => {
     if (client) current.current.onReady?.();
@@ -234,23 +237,32 @@ export function GooglePayButton({
     if (!client || !mount) return undefined;
     const button = client.createButton({
       onClick: () => {
-        const { order: forOrder, params: forParams, onKey: emit, onError: fail } = current.current;
+        const {
+          order: forOrder,
+          params: forParams,
+          onKey: emit,
+          onError: fail,
+          copy: words,
+        } = current.current;
         client
           .loadPaymentData(paymentDataRequest(forParams, forOrder))
           .then((data) => emit(data.paymentMethodData.tokenizationData.token))
           .catch((error: unknown) => {
             if (sheetDismissed(error)) return;
-            fail("Não foi possível concluir o pagamento com o Google Pay. Tente novamente ou pague com cartão.");
+            fail(words.cannotComplete);
           });
       },
       buttonSizeMode: "fill",
-      buttonLocale: "pt",
+      // Google draws this button's own label, so the language it draws it in
+      // is the host's say (FUT-760) — a translated checkout with a Portuguese
+      // pay button is two languages on one screen.
+      buttonLocale: copy.buttonLocale,
     });
     mount.replaceChildren(button);
     return () => {
       mount.replaceChildren();
     };
-  }, [client]);
+  }, [client, copy.buttonLocale]);
 
   if (!client) return null;
   return (

package/src/components/checkout/method-picker.tsx

@@ -1,7 +1,9 @@
 import { Box } from "@mui/material";
 import type { JSX } from "react";
 
+import { useCheckoutCopy } from "./copy-context";
 import { CreditCardIcon, PixIcon } from "./icons";
+import type { MethodPickerCopy } from "./screens-copy";
 import type { PaymentMethod } from "./types";
 import { useCheckoutComponents } from "./ui";
 
@@ -12,10 +14,25 @@ interface MethodOption {
   icon: JSX.Element;
 }
 
-const OPTIONS: MethodOption[] = [
-  { value: "PIX", label: "PIX", description: "Aprovação imediata", icon: <PixIcon /> },
-  { value: "CARD", label: "Cartão", description: "Crédito à vista", icon: <CreditCardIcon /> },
-];
+/**
+ * The two tiles, named by the HOST (FUT-760).
+ *
+ * Built per render rather than as a module constant, because the words are no
+ * longer this package's: a frozen `OPTIONS` array could only hold the origin
+ * host's Portuguese. The order and the icons are still ours — that is layout,
+ * not language.
+ */
+function methodOptions(copy: MethodPickerCopy): MethodOption[] {
+  return [
+    { value: "PIX", label: copy.pixLabel, description: copy.pixDescription, icon: <PixIcon /> },
+    {
+      value: "CARD",
+      label: copy.cardLabel,
+      description: copy.cardDescription,
+      icon: <CreditCardIcon />,
+    },
+  ];
+}
 
 /** Text/icon color for a tile's state — one place, so the ternaries stay flat. */
 function tileColor(unavailable: boolean, selected: boolean, muted: string): string {
@@ -36,6 +53,7 @@ function MethodTile({
   onSelect: () => void;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.method;
   const cursor = unavailable ? "not-allowed" : "pointer";
   return (
     <Box
@@ -79,7 +97,7 @@ function MethodTile({
           {option.label}
         </Text>
         <Text variant="caption" size="xs" color="secondary" as="p">
-          {unavailable ? "Indisponível nesta loja" : option.description}
+          {unavailable ? copy.unavailableHere : option.description}
         </Text>
       </Box>
     </Box>
@@ -104,8 +122,13 @@ function MethodTile({
  * leave an unexplained one-option "choice". The caller preselects the sole
  * remaining method, so no extra tap is demanded either.
  */
-function visibleOptions(offered: PaymentMethod[] | null): MethodOption[] {
-  return OPTIONS.filter((option) => offered === null || offered.includes(option.value));
+function visibleOptions(
+  copy: MethodPickerCopy,
+  offered: PaymentMethod[] | null,
+): MethodOption[] {
+  return methodOptions(copy).filter(
+    (option) => offered === null || offered.includes(option.value),
+  );
 }
 
 export function MethodPicker({
@@ -123,15 +146,16 @@ export function MethodPicker({
   offered?: PaymentMethod[] | null;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
-  const options = visibleOptions(offered);
+  const copy = useCheckoutCopy().screens.method;
+  const options = visibleOptions(copy, offered);
   return (
     <Box>
       <Text variant="body" size="sm" weight="bold" as="p" style={{ marginBottom: 8 }}>
-        Forma de pagamento
+        {copy.groupLabel}
       </Text>
       <Box
         role="radiogroup"
-        aria-label="Forma de pagamento"
+        aria-label={copy.groupLabel}
         data-testid="checkout-method"
         sx={{ display: "flex", gap: 1 }}
       >

package/src/components/checkout/payer-summary.tsx

@@ -3,13 +3,14 @@ import type { JSX } from "react";
 
 import { formatCpf } from "../../card";
 
+import { useCheckoutCopy } from "./copy-context";
 import { PersonOutlineIcon } from "./icons";
+import type { PayerSummaryCopy } from "./screens-copy";
 import { useCheckoutComponents } from "./ui";
 
-
 /** What the CPF line reads, given whether the buyer typed one this time. */
-function cpfLabel(taxId: string | undefined): string {
-  return taxId?.trim() ? `CPF ${formatCpf(taxId)}` : "CPF já cadastrado";
+function cpfLabel(copy: PayerSummaryCopy, taxId: string | undefined): string {
+  return taxId?.trim() ? copy.taxId(formatCpf(taxId)) : copy.taxIdAlreadyKnown;
 }
 
 /**
@@ -42,6 +43,7 @@ export function PayerSummary({
   onEdit?: () => void;
 }): JSX.Element | null {
   const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.payer;
   if (!onEdit) return null;
 
   return (
@@ -61,10 +63,10 @@ export function PayerSummary({
       <PersonOutlineIcon sx={{ fontSize: 20, color: "text.secondary", flex: "0 0 auto" }} />
       <Box sx={{ flex: 1, minWidth: 0 }}>
         <Text variant="body" size="sm" as="p" data-testid="checkout-payer-name">
-          {name ? `Pagando como ${name}` : "Pagando com os seus dados salvos"}
+          {name ? copy.payingAs(name) : copy.payingWithSavedDetails}
         </Text>
         <Text variant="caption" size="xs" color="secondary" as="p" data-testid="checkout-payer-cpf">
-          {cpfLabel(taxId)}
+          {cpfLabel(copy, taxId)}
         </Text>
       </Box>
       <Button
@@ -74,7 +76,7 @@ export function PayerSummary({
         onClick={onEdit}
         dataTestId="checkout-payer-edit"
       >
-        Alterar
+        {copy.changeAction}
       </Button>
     </Box>
   );

package/src/components/checkout/payment-error-panel.tsx

@@ -1,6 +1,7 @@
 import { Box } from "@mui/material";
 import { useState, type JSX } from "react";
 
+import { useCheckoutCopy } from "./copy-context";
 import { UNRESOLVED_CODE } from "./failure-codes";
 import { useCheckoutComponents } from "./ui";
 
@@ -35,13 +36,14 @@ export function PaymentErrorPanel({
   onRetry: () => void;
 }): JSX.Element {
   const { Alert } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.error;
   const unresolved = code === UNRESOLVED_CODE;
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       <Alert
         variant={unresolved ? "warning" : "danger"}
-        title={unresolved ? "Estamos confirmando seu pagamento" : "Não foi possível continuar"}
+        title={unresolved ? copy.confirming : copy.cannotContinue}
         description={message}
         showIcon
         data-testid={unresolved ? "checkout-unresolved" : "checkout-error"}
@@ -62,13 +64,14 @@ function RetryAffordance({
   onRetry: () => void;
 }): JSX.Element {
   const { Button, Input } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.error;
   const [altEmail, setAltEmail] = useState("");
 
   if (!emailFlagged) {
     return (
       <Box>
         <Button variant="solid" color="primary" size="md" onClick={onRetry} dataTestId="checkout-retry-payment">
-          Tentar novamente
+          {copy.retryAction}
         </Button>
       </Box>
     );
@@ -76,20 +79,20 @@ function RetryAffordance({
   return (
     <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
       <Input
-        label="E-mail para o pagamento"
+        label={copy.emailLabel}
         type="email"
         variant="outlined"
         size="md"
         fullWidth
         autoComplete="email"
-        placeholder="use um e-mail diferente do da loja"
+        placeholder={copy.emailMustDifferHint}
         value={altEmail}
         onChange={(event) => setAltEmail(event.target.value)}
         data-testid="checkout-alt-email"
       />
       <Box>
         <Button variant="solid" color="primary" size="md" disabled={!altEmail.trim()} onClick={() => onUseEmail(altEmail.trim())} dataTestId="checkout-use-alt-email">
-          Usar este e-mail e continuar
+          {copy.useEmailAction}
         </Button>
       </Box>
     </Box>

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

@@ -2,6 +2,7 @@ import { Box } from "@mui/material";
 import { useEffect, useState, type JSX } from "react";
 import QRCode from "react-qr-code";
 
+import { useCheckoutCopy } from "./copy-context";
 import { ContentCopyIcon } from "./icons";
 import type { CheckoutOrder, OrderStatus, PixCharge } from "./types";
 import { useCheckoutComponents } from "./ui";
@@ -17,6 +18,7 @@ import { usePaymentPolling } from "./use-payment-polling";
 /** The copyable "copia e cola" strip with its copy button. */
 function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
   const [copied, setCopied] = useState(false);
 
   const copyCode = async (): Promise<void> => {
@@ -63,7 +65,7 @@ function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
         }}
         dataTestId="pix-copy"
       >
-        {copied ? "Copiado!" : "Copiar"}
+        {copied ? copy.copiedAction : copy.copyAction}
       </Button>
     </Box>
   );
@@ -72,11 +74,12 @@ function PixCodeBox({ pix }: { pix: PixCharge }): JSX.Element {
 /** The live footer: poll error, or the pulsing "awaiting payment" indicator. */
 function PixPollFooter({ error }: { error: string | null }): JSX.Element {
   const { Alert, Text } = useCheckoutComponents();
+  const { pix, settling } = useCheckoutCopy().screens;
   if (error) {
     return (
       <Alert
         variant="danger"
-        title="Não foi possível confirmar o pagamento"
+        title={settling.cannotConfirm}
         description={error}
         showIcon
         data-testid="pix-poll-error"
@@ -87,7 +90,7 @@ function PixPollFooter({ error }: { error: string | null }): JSX.Element {
     <Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "text.secondary" }}>
       <LoadingDot />
       <Text variant="caption" size="xs" color="secondary" as="span" data-testid="pix-awaiting">
-        Aguardando pagamento…
+        {pix.awaiting}
       </Text>
     </Box>
   );
@@ -103,6 +106,7 @@ export function PixView({
   pollIntervalMs?: number;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.pix;
   const { status, error } = usePaymentPolling(order.orderId, { intervalMs: pollIntervalMs });
 
   // Bubble a terminal status up once, so the parent can advance to the status step.
@@ -116,12 +120,15 @@ export function PixView({
   if (!pix) {
     return (
       <Text variant="body" size="sm" color="danger" as="p" data-testid="pix-missing">
-        Não foi possível gerar o código PIX.
+        {copy.chargeMissing}
       </Text>
     );
   }
 
-  const validUntil = new Date(pix.expiresAt).toLocaleTimeString("pt-BR", {
+  // The locale is the HOST's (FUT-760): it decides what a buyer reads off the
+  // clock, so it travels with the sentence it feeds rather than being frozen
+  // to the origin host's here.
+  const validUntil = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, {
     hour: "2-digit",
     minute: "2-digit",
   });
@@ -132,16 +139,16 @@ export function PixView({
       sx={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2, textAlign: "center" }}
     >
       <Text variant="heading" size="md" weight="bold" as="h2">
-        Pague com PIX
+        {copy.heading}
       </Text>
       <Text variant="body" size="sm" color="secondary" as="p">
-        Escaneie o QR code no app do seu banco ou copie o código. Total {order.totalLabel}.
+        {copy.instructions(order.totalLabel)}
       </Text>
 
       <Box
         data-testid="pix-qr"
         role="img"
-        aria-label="QR Code PIX para pagamento"
+        aria-label={copy.qrAlt}
         sx={{ bgcolor: "background.paper", p: 2, borderRadius: 2, border: "1px solid", borderColor: "divider" }}
       >
         <QRCode value={pix.copyPaste} size={200} />
@@ -150,7 +157,7 @@ export function PixView({
       <PixCodeBox pix={pix} />
 
       <Text variant="caption" size="xs" color="secondary" as="p" data-testid="pix-expiry">
-        Válido até {validUntil}. A confirmação é automática.
+        {copy.validUntil(validUntil)}
       </Text>
 
       <PixPollFooter error={error} />

package/src/components/checkout/providers/hosted-link.tsx

@@ -32,7 +32,9 @@
 import { Box } from "@mui/material";
 import type { JSX } from "react";
 
+import { useCheckoutCopy } from "../copy-context";
 import { offeredMethods } from "../method-capability";
+import type { HostedHandoverCopy } from "../screens-copy";
 import type { CheckoutProviderConfig } from "../types";
 import { useCheckoutComponents } from "../ui";
 
@@ -47,9 +49,9 @@ import type { ProviderCheckoutScreenProps } from "./types";
  * true sentence rather than our internal id ("infinitepay") dressed up as a
  * brand.
  */
-function destinationLabel(config: CheckoutProviderConfig | null): string {
+function destinationLabel(copy: HostedHandoverCopy, config: CheckoutProviderConfig | null): string {
   const name = config?.chain?.[0]?.displayName?.trim();
-  return name ? `à página de pagamento da ${name}` : "à página de pagamento segura do provedor";
+  return name ? copy.destinationNamed(name) : copy.destinationGeneric;
 }
 
 /**
@@ -60,21 +62,27 @@ function destinationLabel(config: CheckoutProviderConfig | null): string {
  * keeps this honest for a provider that takes only one of the two: a hosted
  * PIX-only store must not promise a card.
  */
-function methodsPhrase(config: CheckoutProviderConfig | null): string | null {
+function methodsPhrase(
+  copy: HostedHandoverCopy,
+  config: CheckoutProviderConfig | null,
+): string | null {
   const offered = offeredMethods(config);
   const pix = offered === null || offered.includes("PIX");
   const card = offered === null || offered.includes("CARD");
-  if (pix && card) return "PIX ou cartão";
-  if (pix) return "PIX";
-  if (card) return "cartão";
+  if (pix && card) return copy.pixAndCard;
+  if (pix) return copy.pixOnly;
+  if (card) return copy.cardOnly;
   return null;
 }
 
 /** The full "where you are going and what happens there" sentence. */
-function handoffMessage(config: CheckoutProviderConfig | null): string {
-  const methods = methodsPhrase(config);
-  const choice = methods ? `, onde você escolhe pagar com ${methods}` : "";
-  return `Você será levado ${destinationLabel(config)}${choice}.`;
+function handoffMessage(
+  copy: HostedHandoverCopy,
+  config: CheckoutProviderConfig | null,
+): string {
+  const methods = methodsPhrase(copy, config);
+  const choice = methods ? copy.methodsChoice(methods) : "";
+  return copy.handoff(destinationLabel(copy, config), choice);
 }
 
 /** The invitation: what happens next, and the one button that starts it. */
@@ -86,16 +94,17 @@ function HandOffInvite({
   onStart: () => void;
 }): JSX.Element {
   const { Button, Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.hosted;
   return (
     <Box
       data-testid="checkout-handoff-invite"
       sx={{ display: "flex", flexDirection: "column", gap: 2 }}
     >
       <Text variant="body" size="md" as="p">
-        {handoffMessage(config)}
+        {handoffMessage(copy, config)}
       </Text>
       <Text variant="caption" size="sm" as="p" color="secondary">
-        Assim que o pagamento for concluído, você volta para cá e nós confirmamos o pedido.
+        {copy.afterwards}
       </Text>
       <Button
         variant="solid"
@@ -105,7 +114,7 @@ function HandOffInvite({
         onClick={onStart}
         dataTestId="checkout-handoff-start"
       >
-        Seguir para o pagamento
+        {copy.startAction}
       </Button>
     </Box>
   );
@@ -121,17 +130,18 @@ function HandOffInvite({
  */
 function HandOffPending({ config }: { config: CheckoutProviderConfig | null }): JSX.Element {
   const { Text, LoadingState } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.hosted;
   return (
     <Box
       data-testid="checkout-handoff-pending"
       sx={{ display: "flex", flexDirection: "column", gap: 2, alignItems: "center", py: 4 }}
     >
-      <LoadingState variant="spinner" message="Preparando o pagamento" size="md" />
+      <LoadingState variant="spinner" message={copy.preparing} size="md" />
       <Text variant="body" size="md" as="p">
-        {handoffMessage(config)}
+        {handoffMessage(copy, config)}
       </Text>
       <Text variant="caption" size="sm" as="p" color="secondary">
-        Assim que o pagamento for concluído, você volta para cá e nós confirmamos o pedido.
+        {copy.afterwards}
       </Text>
     </Box>
   );

package/src/components/checkout/pt-BR.ts

@@ -1,3 +1,6 @@
+import { PT_BR_CARD_COPY } from "../../card/pt-BR";
+import { PT_BR_CHECKOUT_SCREENS_COPY } from "./screens-pt-BR";
+import type { CheckoutCopy } from "./copy-context";
 import type { CheckoutViewCopy, PaymentStatusCopy } from "./view-copy";
 
 /**
@@ -39,7 +42,31 @@ export const PT_BR_PAYMENT_STATUS_COPY: PaymentStatusCopy = {
   receiptEmailLabel: "Comprovante enviado para",
 };
 
+/**
+ * The words the checkout's deeper screens read from context — the card form,
+ * its tokenizers, and the buyer-details step's own fields.
+ *
+ * Same rule as everything else in this file: a NAMED pack a host passes by
+ * hand at the mount, never a default the package reaches for.
+ */
+export const PT_BR_CHECKOUT_COPY: CheckoutCopy = {
+  card: PT_BR_CARD_COPY,
+  screens: PT_BR_CHECKOUT_SCREENS_COPY,
+  buyer: {
+    emailInvalid: "E-mail inválido.",
+    emailRequired: "E-mail obrigatório.",
+    nameRequired: "Nome obrigatório.",
+    phoneRequired: "Telefone obrigatório.",
+    fieldsHint: (names) =>
+      names.length === 0
+        ? "Nome, e-mail e telefone são opcionais — usados apenas para o comprovante."
+        : `Informe seu ${names.join(", ")} (${names.length === 1 ? "obrigatório" : "obrigatórios"} ` +
+          "para o pagamento). Os demais campos são opcionais — usados apenas para o comprovante.",
+  },
+};
+
 export const PT_BR_CHECKOUT_VIEW_COPY: CheckoutViewCopy = {
+  screens: PT_BR_CHECKOUT_COPY,
   steps: {
     dados: "Dados",
     payment: "Pagamento",