@12-apps/payments-frontend 3.20.1 → 3.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.20.1",
+  "version": "3.21.1",
   "type": "module",
   "sideEffects": false,
   "description": "Browser half of the vendor-agnostic payments platform: plug-and-play MUI components for the per-provider settings page (credential form from each provider's schema, masked hints, verify/enable) and the checkout page (PIX QR + polling, card tokenization, hosted-checkout redirect), plus the headless hooks and fetch clients they build on. Talks only to the host's payments HTTP surface — never to a provider directly. Microfrontend-ready: no app coupling, host injects theme and auth.",

package/src/activation/screens/activation-step.tsx

@@ -158,6 +158,7 @@ function ActivationBody({
     <CardVerification
       verifyChargeUrl={config.verifyChargeUrl(provider)}
       provider={provider}
+      displayName={displayName}
       ownerEmail={ownerEmail}
       onVerified={onVerified}
       CardSurface={config.CardSurface}

package/src/activation/screens/card-verification.tsx

@@ -35,10 +35,13 @@ export type CardSurface = ComponentType<{ children: ReactNode }>;
 function ChargeForm({
   verification,
   amountLabel,
+  displayName,
   validateTaxId,
 }: {
   verification: ActivationCharge;
   amountLabel: string | null;
+  /** The provider being activated, as the owner knows it. */
+  displayName: string;
   validateTaxId: (value: string) => string | undefined;
 }): JSX.Element {
   const { taxId, actions } = useActivationCopy();
@@ -65,7 +68,7 @@ function ChargeForm({
         placeholder={taxId.placeholder}
         value={formatCpf(cpf)}
         error={Boolean(cpfError)}
-        helperText={cpfError ?? taxId.hint}
+        helperText={cpfError ?? taxId.hint(displayName)}
         onChange={(event) => setCpf(onlyDigits(event.target.value))}
         onBlur={() => validateTaxId(cpf)}
         data-testid="verify-charge-cpf"
@@ -110,6 +113,7 @@ function CardOutcome({
 export function CardVerification({
   verifyChargeUrl,
   provider,
+  displayName,
   ownerEmail,
   onVerified,
   CardSurface: Surface,
@@ -118,6 +122,8 @@ export function CardVerification({
 }: {
   verifyChargeUrl: string;
   provider: string;
+  /** The name the OWNER reads; `provider` beside it is the machine key. */
+  displayName: string;
   /** Who is paying — the signed-in owner. The host reads its own session. */
   ownerEmail: string;
   onVerified: () => void;
@@ -173,6 +179,7 @@ export function CardVerification({
           <ChargeForm
             verification={verification}
             amountLabel={amountLabel}
+            displayName={displayName}
             validateTaxId={validateTaxId}
           />
         </Surface>

package/src/activation/screens/copy-en-US.ts

@@ -88,7 +88,7 @@ export const EN_US_ACTIVATION_STEP_COPY: ActivationStepCopy = {
   },
   taxId: {
     label: "Cardholder's CPF",
-    hint: 'PagBank requires it on every card charge.',
+    hint: (displayName) => `${displayName} requires it on every card charge.`,
     placeholder: '000.000.000-00',
   },
   charge: {

package/src/activation/screens/copy-pt-BR.ts

@@ -25,8 +25,10 @@ import type { ActivationStepCopy } from './copy';
  * sent looking for "Integrated Checkout" is looking for a screen that does not
  * exist. **CPF** and its `000.000.000-00` mask are a Brazilian document and a
  * FORMAT — a translated mask shows a shape the field refuses. **PagBank** and
- * **InfinitePay** are names. `{provider}` is this package's own placeholder,
- * substituted after the sentence is chosen.
+ * **InfinitePay** are names — PagBank now only as the console label above, since
+ * the tax-id hint takes the provider as an ARGUMENT rather than naming one
+ * (FUT-675). `{provider}` is this package's own placeholder, substituted after
+ * the sentence is chosen.
  */
 export const PT_BR_ACTIVATION_STEP_COPY: ActivationStepCopy = {
   intro: {
@@ -104,7 +106,22 @@ export const PT_BR_ACTIVATION_STEP_COPY: ActivationStepCopy = {
   },
   taxId: {
     label: 'CPF do titular',
-    hint: 'Exigido pelo PagBank em qualquer cobrança no cartão.',
+    // No article, deliberately (FUT-675). This field renders from the CARD
+    // flow only — pagbank, stone, stripe — and no single article fits all
+    // three: "a Stone" and "a Stripe" are natural where PagBank is
+    // conventionally "o PagBank", so the previous round's "A ${displayName}
+    // exige" bought Stone's grammar with PagBank's. `por` takes no
+    // contraction, so one string is correct for every name.
+    //
+    // The refusal sentences above still take an article ("A ${displayName}
+    // recusou") and are NOT covered by that argument — they belong to the
+    // redirect flow, which today renders for InfinitePay alone because
+    // `card/tokenize.ts` has a tokenizer for exactly the three names above and
+    // everything else FALLS BACK to redirect. That is a default, not a rule, so
+    // the second redirect provider ever added inherits this same bug — along
+    // with `settledBody`, which takes no `displayName` at all and so tells any
+    // such provider's owner that refunds happen in InfinitePay's app.
+    hint: (displayName) => `Exigido por ${displayName} em qualquer cobrança no cartão.`,
     placeholder: '000.000.000-00',
   },
   charge: {

package/src/activation/screens/copy.ts

@@ -126,7 +126,14 @@ export interface ActivationOutcomeCopy {
 /** The CPF field the card flow asks for beside the card. */
 export interface ActivationTaxIdCopy {
   readonly label: string;
-  readonly hint: string;
+  /**
+   * WHO is asking for the document, by name. A parameter rather than a
+   * sentence, for the reason the setup guide's `credentials` takes one: the
+   * provider is a fact about the connection being activated, not about the
+   * language. Both packs had spelled one provider's name into the string, so a
+   * Stone activation told the owner PagBank required their CPF (FUT-675).
+   */
+  readonly hint: (displayName: string) => string;
   readonly placeholder: string;
 }