@12-apps/payments-frontend 3.31.0 → 3.31.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.31.0",
+  "version": "3.31.2",
   "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/components/checkout/checkout-steps.tsx

@@ -289,6 +289,7 @@ export function PaymentStep({
           onChange={onMethodChange}
           cardUnavailable={choice.cardUnavailable}
           offered={choice.offered}
+          pixByStore={config?.chain?.find((link) => link.methods.includes("PIX"))?.confirmation === "MANUAL"}
         />
       )}
 

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

@@ -22,9 +22,11 @@ interface MethodOption {
  * host's Portuguese. The order and the icons are still ours — that is layout,
  * not language.
  */
-function methodOptions(copy: MethodPickerCopy): MethodOption[] {
+function methodOptions(copy: MethodPickerCopy, pixByStore: boolean): MethodOption[] {
+  // A Pix the store confirms by hand is not "aprovação imediata" (FUT-3232).
+  const pixDescription = (pixByStore ? copy.pixManualDescription : undefined) ?? copy.pixDescription;
   return [
-    { value: "PIX", label: copy.pixLabel, description: copy.pixDescription, icon: <PixIcon /> },
+    { value: "PIX", label: copy.pixLabel, description: pixDescription, icon: <PixIcon /> },
     {
       value: "CARD",
       label: copy.cardLabel,
@@ -125,8 +127,9 @@ function MethodTile({
 function visibleOptions(
   copy: MethodPickerCopy,
   offered: PaymentMethod[] | null,
+  pixByStore: boolean,
 ): MethodOption[] {
-  return methodOptions(copy).filter(
+  return methodOptions(copy, pixByStore).filter(
     (option) => offered === null || offered.includes(option.value),
   );
 }
@@ -136,6 +139,7 @@ export function MethodPicker({
   onChange,
   cardUnavailable = false,
   offered = null,
+  pixByStore = false,
 }: {
   /** The chosen method, or `null` before the buyer has picked one. */
   value: PaymentMethod | null;
@@ -144,10 +148,12 @@ export function MethodPicker({
   cardUnavailable?: boolean;
   /** Methods the store's chain can charge, or `null` while unknown (fail open). */
   offered?: PaymentMethod[] | null;
+  /** True ⇒ the chain's first PIX provider is one the STORE confirms by hand. */
+  pixByStore?: boolean;
 }): JSX.Element {
   const { Text } = useCheckoutComponents();
   const copy = useCheckoutCopy().screens.method;
-  const options = visibleOptions(copy, offered);
+  const options = visibleOptions(copy, offered, pixByStore);
   return (
     <Box>
       <Text variant="body" size="sm" weight="bold" as="p" style={{ marginBottom: 8 }}>

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

@@ -254,11 +254,9 @@ export function PixView({
   // 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",
-  });
-  const sentences = pixSentences(copy, pix.confirmation === "MANUAL");
+  const validUntil = new Date(pix.expiresAt).toLocaleTimeString(copy.expiryLocale, { hour: "2-digit", minute: "2-digit" });
+  const manual = pix.confirmation === "MANUAL";
+  const sentences = pixSentences(copy, manual);
 
   return (
     <Box
@@ -287,7 +285,7 @@ export function PixView({
         {sentences.validUntil(validUntil)}
       </Text>
 
-      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} manual={sentences !== copy} />
+      <PixPollFooter error={error} timedOut={timedOut} onCheckAgain={checkAgain} manual={manual} />
     </Box>
   );
 }

package/src/components/checkout/screens-copy.ts

@@ -32,6 +32,12 @@ export interface MethodPickerCopy {
   cardLabel: string;
   /** What each method is like to use — shown under its name. */
   pixDescription: string;
+  /**
+   * PIX's line when the store confirms it by hand (the chain's first PIX
+   * provider declares `confirmation: 'MANUAL'`). Optional; absent falls back
+   * to `pixDescription`, so a host enabling such a provider should set it.
+   */
+  pixManualDescription?: string;
   cardDescription: string;
   /** This store's providers cannot take that method. */
   unavailableHere: string;

package/src/components/checkout/screens-en-US.ts

@@ -22,6 +22,7 @@ export const EN_US_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     pixLabel: 'PIX',
     cardLabel: 'Card',
     pixDescription: 'Approved instantly',
+    pixManualDescription: 'Confirmed by the store',
     cardDescription: 'Credit, paid in full',
     unavailableHere: 'Unavailable in this store',
   },

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

@@ -15,6 +15,7 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     pixLabel: 'PIX',
     cardLabel: 'Cartão',
     pixDescription: 'Aprovação imediata',
+    pixManualDescription: 'Confirmado pela loja',
     cardDescription: 'Crédito à vista',
     unavailableHere: 'Indisponível nesta loja',
   },
@@ -44,7 +45,7 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
       instructions: (totalLabel) =>
         `Pague ${totalLabel} com o QR code ou o código abaixo. A loja confere o recebimento e confirma o seu pedido.`,
       validUntil: (time) => `A loja confirma o pagamento até ${time}.`,
-      awaiting: 'Aguardando a loja confirmar o pagamento…',
+      awaiting: 'Aguardando confirmação do pagamento pela loja…',
     },
   },
   card: {

package/src/components/checkout/types.ts

@@ -275,15 +275,15 @@ export interface CheckoutChainLink {
   provider: string;
   /**
    * The provider's own name as a BUYER should read it ("InfinitePay"), which
-   * `GET /api/checkout/config` publishes per entry.
-   *
-   * Optional, and the DEGRADE DIRECTION IS "SAY NOTHING": an older host serves
-   * no name, and a hand-off screen then describes where the buyer is going
-   * without naming it, rather than printing the internal `provider` id — a
-   * buyer shown "infinitepay" learns less than one shown nothing, and learns
-   * it in a vocabulary that is ours rather than theirs.
+   * `GET /api/checkout/config` publishes per entry. Optional, and the DEGRADE
+   * DIRECTION IS "SAY NOTHING": an older host serves no name, and a hand-off
+   * screen then describes where the buyer is going without naming it, rather
+   * than printing the internal `provider` id — a buyer shown "infinitepay"
+   * learns less than one shown nothing, in a vocabulary ours rather than theirs.
    */
   displayName?: string | null;
+  /** `MANUAL`: only the store confirms this entry's charges (`pixmanual`); absent is automatic. */
+  confirmation?: "AUTOMATIC" | "MANUAL";
   tokenization: "NONE" | "PUBLIC_KEY" | "SDK" | "REDIRECT";
   publicKey: string | null;
   mockTokenization: boolean;