@12-apps/payments-frontend 1.4.0 → 1.4.2

package/src/components/checkout/__tests__/provider-chain.test.ts

@@ -1,161 +0,0 @@
-// @vitest-environment jsdom
-/**
- * FUT-563 — the browser mints ONE instrument PER PROVIDER, so a card charge
- * can walk the merchant's chain.
- *
- * A card token is bound to whoever minted it: the gateway refuses to hand
- * provider #2 provider #1's blob and skips it instead. So the checkout's whole
- * contribution to failover is this — take the card the buyer typed ONCE, and
- * produce an instrument for each entry of the chain the server published.
- *
- * The scenarios the browser journey cannot reach live here: a chain entry with
- * no in-browser scheme (a hosted page needs no instrument), a chain the host
- * never published (an older server, or a fetch blip), and an entry whose
- * tokenization fails while the others succeed.
- */
-import { describe, expect, it } from "vitest";
-
-import { cardChain, cardPathAvailable, cardTokenization } from "../method-capability";
-import type { CheckoutProviderConfig } from "../types";
-
-function link(
-  provider: string,
-  tokenization: CheckoutProviderConfig["tokenization"],
-  publicKey: string | null = null,
-) {
-  return {
-    provider,
-    tokenization: tokenization as "NONE" | "PUBLIC_KEY" | "SDK" | "REDIRECT",
-    publicKey,
-    mockTokenization: false,
-    methods: ["PIX" as const, "CARD" as const],
-  };
-}
-
-function config(over: Partial<CheckoutProviderConfig> = {}): CheckoutProviderConfig {
-  return {
-    provider: "pagbank",
-    tokenization: "PUBLIC_KEY",
-    publicKey: "pk_pagbank",
-    mockTokenization: false,
-    methods: ["PIX", "CARD"],
-    ...over,
-  };
-}
-
-describe("cardChain", () => {
-  it("gives one tokenization config per entry, in the merchant's order", async () => {
-    const chain = cardChain(
-      config({
-        chain: [link("pagbank", "PUBLIC_KEY", "pk_pagbank"), link("stone", "PUBLIC_KEY", "pk_stone")],
-      }),
-    );
-
-    expect(chain.map((entry) => entry.provider)).toEqual(["pagbank", "stone"]);
-    expect(chain.map((entry) => entry.publicKey)).toEqual(["pk_pagbank", "pk_stone"]);
-  });
-
-  it("marks entries with no in-browser scheme unmintable instead of dropping them", async () => {
-    // A REDIRECT provider's own page takes the card, and a NONE one asks for no
-    // instrument. Minting for either would produce a fake token under stub mode
-    // and an error everywhere else — and the gateway passes an unattributed
-    // charge straight through to them anyway.
-    //
-    // They stay in the LIST because the charge walks them: the card path counts
-    // this list to decide whether `tokensByProvider` has to travel at all, and
-    // a chain counted by "who minted" hides the hosted page from the server.
-    const chain = cardChain(
-      config({
-        chain: [
-          link("pagbank", "PUBLIC_KEY", "pk_pagbank"),
-          link("infinitepay", "REDIRECT"),
-          link("nothing", "NONE"),
-        ],
-      }),
-    );
-
-    expect(chain.map((entry) => entry.provider)).toEqual(["pagbank", "infinitepay", "nothing"]);
-    expect(chain.map((entry) => entry.mintable)).toEqual([true, false, false]);
-  });
-
-  it("falls back to the HEAD alone when the host published no chain", async () => {
-    // Exactly the pre-FUT-563 behaviour: one instrument, for the active
-    // provider. A server that does not answer a chain must not break checkout.
-    expect(cardChain(config())).toEqual([{ ...cardTokenization(config()), mintable: true }]);
-  });
-
-  it("has nothing to mint for a store with no provider at all", async () => {
-    expect(cardChain(null)).toEqual([]);
-  });
-
-  it("never re-heads or reorders the merchant's list", async () => {
-    // The storefront is a READER of the priority list. Preferring the entry
-    // with a key, or sorting by anything, would silently override the order the
-    // owner set and the plan ceiling already truncated.
-    const chain = cardChain(
-      config({
-        provider: "stone",
-        chain: [link("stone", "PUBLIC_KEY", null), link("pagbank", "PUBLIC_KEY", "pk_pagbank")],
-      }),
-    );
-
-    expect(chain.map((entry) => entry.provider)).toEqual(["stone", "pagbank"]);
-  });
-
-  it("counts the whole chain, hosted entries included", async () => {
-    // What `tokensByProvider`'s presence is decided on. A card acquirer plus a
-    // hosted-page fallback is TWO providers the walk may reach, even though
-    // only one of them is ever minted for.
-    const chain = cardChain(
-      config({ chain: [link("pagbank", "PUBLIC_KEY", "pk_pagbank"), link("infinitepay", "REDIRECT")] }),
-    );
-
-    expect(chain).toHaveLength(2);
-    expect(chain.filter((entry) => entry.mintable)).toHaveLength(1);
-  });
-});
-
-/**
- * FUT-563 — the picker and the SERVER must answer the same question.
- *
- * `usesHostedCheckout` asks the WHOLE chain whether anybody tokenizes in the
- * browser, so a REDIRECT head no longer means "the buyer is handed over". A
- * client that still read the head alone offered a card the submit could not
- * mint, and a store whose only mintable entry has no key offered one nobody
- * could pay.
- */
-describe("cardPathAvailable", () => {
-  it("offers CARD for a hosted-page store: its own site takes the card", async () => {
-    expect(cardPathAvailable(config({ chain: [link("infinitepay", "REDIRECT")] }))).toBe(true);
-  });
-
-  it("offers CARD when a LATER entry can be minted for, not just the head", async () => {
-    // The server shows our form for exactly this chain, so the picker must
-    // agree — and the submit mints against the tail.
-    const mixed = config({
-      provider: "infinitepay",
-      tokenization: "REDIRECT",
-      publicKey: null,
-      chain: [link("infinitepay", "REDIRECT"), link("pagbank", "PUBLIC_KEY", "pk_pagbank")],
-    });
-
-    expect(cardPathAvailable(mixed)).toBe(true);
-  });
-
-  it("refuses CARD when the only mintable entry has no key this browser can use", async () => {
-    // Stone with no publishable key: the form would render and the submit
-    // would die. Better a disabled tile that says so.
-    const unusable = config({
-      provider: "infinitepay",
-      tokenization: "REDIRECT",
-      publicKey: null,
-      chain: [link("infinitepay", "REDIRECT"), link("stone", "PUBLIC_KEY", null)],
-    });
-
-    expect(cardPathAvailable(unusable)).toBe(false);
-  });
-
-  it("still fails OPEN while the config has not answered", async () => {
-    expect(cardPathAvailable(null)).toBe(true);
-  });
-});

package/src/components/checkout/__tests__/save-on-continue.test.tsx

@@ -1,165 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The buyer's details must be persisted when they press "Continuar" on the
- * "Dados" step — NOT when a payment is raised.
- *
- * This is a regression test with a history: the save used to live only in the
- * order-creation path, which runs a whole step later, only once a payment
- * method is chosen, and which deliberately never writes the CPF. A buyer who
- * filled the form and then hit anything at all on the payment screen — no
- * provider configured, a declined card, an abandoned PIX, a closed tab — had
- * nothing stored.
- *
- * Since FUT-564 the write itself belongs to the host (`saveBuyerContact` port;
- * the storefront's implementation owns the wire shape and the blank-CPF-never-
- * clears rule, pinned in its own suite). What THIS suite pins is the flow's
- * side of the contract — TIMING, CONSENT and INDEPENDENCE: the port fires on
- * "Continuar", carries the CPF, respects the LGPD checkbox, and the step
- * advances no matter what the host does with the call.
- */
-import { act, renderHook, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { useCheckoutController, type CheckoutHostPorts } from "../use-checkout-controller";
-import type { BuyerContact } from "../types";
-
-/** A valid CPF (passes the client-side check digits). */
-const VALID_CPF = "52998224725";
-
-/**
- * One test's own port set + recorder. Everything is a local — no module-level
- * mutable state, so the tests carry no order dependency between them
- * (`test-flakiness/no-test-isolation`). The stub only ever PUSHES onto its
- * container, never reassigns a closed-over binding (`no-global-state-mutation`).
- */
-function makePorts(): {
-  ports: CheckoutHostPorts;
-  savedContacts: () => BuyerContact[];
-  orderRequested: () => boolean;
-} {
-  const recorded: BuyerContact[] = [];
-  const createOrder = vi.fn();
-  return {
-    ports: {
-      createOrder,
-      saveBuyerContact: (contact) => {
-        recorded.push(contact);
-      },
-      onExitToMenu: vi.fn(),
-    },
-    savedContacts: () => recorded,
-    orderRequested: () => createOrder.mock.calls.length > 0,
-  };
-}
-
-afterEach(() => {
-  vi.restoreAllMocks();
-});
-
-describe('"Dados" step persists the buyer on Continuar', () => {
-  it("saves name, phone and CPF the moment Continuar is pressed", async () => {
-    const { ports, savedContacts, orderRequested } = makePorts();
-    const { result } = renderHook(() => useCheckoutController(ports));
-
-    act(() => {
-      result.current.setBuyer({ name: "Ana", phone: "11999999999", taxId: VALID_CPF });
-    });
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(savedContacts()).toHaveLength(1));
-    expect(savedContacts()[0]).toEqual({
-      name: "Ana",
-      phone: "11999999999",
-      taxId: VALID_CPF,
-    });
-    // The whole point: no order was created, and none needed to be.
-    expect(orderRequested()).toBe(false);
-  });
-
-  it("advances to Pagamento without waiting on the save", async () => {
-    const { ports, savedContacts } = makePorts();
-    // A host whose save blows up must not trap the buyer on the Dados step —
-    // the port is fire-and-forget, so the flow never sees the failure at all.
-    const { result } = renderHook(() => useCheckoutController(ports));
-
-    act(() => {
-      result.current.setBuyer({ name: "Ana", taxId: VALID_CPF });
-    });
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(savedContacts()).toHaveLength(1));
-    expect(result.current.step).toBe("payment");
-  });
-
-  it("does not save when the buyer declined the consent checkbox", async () => {
-    const { ports, savedContacts } = makePorts();
-    const { result } = renderHook(() => useCheckoutController(ports));
-
-    act(() => {
-      result.current.setBuyer({ name: "Ana", taxId: VALID_CPF });
-      result.current.setSaveProfile(false);
-    });
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(result.current.step).toBe("payment"));
-    expect(savedContacts()).toHaveLength(0);
-  });
-
-  it("does not save — or advance — when the CPF is invalid", async () => {
-    const { ports, savedContacts } = makePorts();
-    const { result } = renderHook(() => useCheckoutController(ports));
-
-    act(() => {
-      result.current.setBuyer({ name: "Ana", taxId: "11111111111" });
-    });
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(result.current.errorField).toBe("cpf"));
-    expect(result.current.step).toBe("dados");
-    expect(savedContacts()).toHaveLength(0);
-  });
-
-  it("lets a buyer with a CPF on file continue without retyping it", async () => {
-    const { ports, savedContacts } = makePorts();
-    // Third argument: the buyer already gave the store a CPF, so Dados was
-    // skipped and they reopened it through "Alterar". The field starts empty
-    // (the client never receives the saved value) — requiring one here stranded
-    // them on a form they had no way to satisfy.
-    const { result } = renderHook(() => useCheckoutController(ports, undefined, true));
-
-    act(() => {
-      result.current.setStep("dados");
-    });
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(result.current.step).toBe("payment"));
-    expect(result.current.errorField).toBeNull();
-    // Nothing typed ⇒ the port carries no values at all. What the HOST must do
-    // with a blank CPF (omit it so it can never clear the stored one) is the
-    // host's contract, pinned beside its `saveBuyerContact` implementation.
-    expect(savedContacts()[0]).toEqual({ name: undefined, phone: undefined, taxId: undefined });
-  });
-
-  it("still demands a CPF from a buyer who has none on file", async () => {
-    const { ports, savedContacts } = makePorts();
-    const { result } = renderHook(() => useCheckoutController(ports));
-
-    act(() => {
-      result.current.goToPayment();
-    });
-
-    await waitFor(() => expect(result.current.errorField).toBe("cpf"));
-    expect(result.current.step).toBe("dados");
-    expect(savedContacts()).toHaveLength(0);
-  });
-});

package/src/components/checkout/__tests__/second-host.test.tsx

@@ -1,86 +0,0 @@
-// @vitest-environment jsdom
-/**
- * The second-host proof (FUT-564 acceptance).
- *
- * This package's dependency graph contains NO `@12-apps/ui` — it is not even
- * resolvable from here — so a green run of this suite IS the proof that a host
- * without this repo's design system can mount the buyer checkout: every pixel
- * below renders through the raw-MUI default slots (`mui-defaults.tsx`),
- * because no `components` prop is passed and no provider sits above the flow.
- *
- * The walk is the buyer's own: Dados (CPF form, consent checkbox, pay bar) →
- * Pagamento (method picker) → the card form, with the order raised through the
- * host port. The load-bearing test ids must survive the default slots too —
- * they are the same hooks the storefront journeys click.
- */
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { CheckoutFlow } from "../checkout-flow";
-import type { CheckoutOrder, CreateOrderRequest, CreateOrderResult } from "../types";
-
-afterEach(cleanup);
-
-const CARD_ORDER: CheckoutOrder = {
-  orderId: "o-2nd-host",
-  status: "AWAITING_PAYMENT",
-  method: "CARD",
-  totalCents: 1000,
-  subtotalCents: 1000,
-  discountTotalCents: 0,
-  appliedDiscounts: [],
-  totalLabel: "R$ 10,00",
-};
-
-/** A valid CPF (passes the client-side check digits). */
-const VALID_CPF = "52998224725";
-
-describe("CheckoutFlow with no design system present (raw-MUI default slots)", () => {
-  it("walks Dados → Pagamento → card form through the default slots", async () => {
-    const createOrder = vi.fn<(input: CreateOrderRequest) => Promise<CreateOrderResult>>(
-      async () => ({ ok: true, data: CARD_ORDER }),
-    );
-
-    render(
-      <CheckoutFlow
-        cart={{ empty: false, totalLabel: "R$ 10,00", totalItems: 1 }}
-        createOrder={createOrder}
-        onExitToMenu={vi.fn()}
-      />,
-    );
-
-    // Dados renders through the defaults: stepper, CPF field, consent, pay bar.
-    expect(screen.getByTestId("checkout-stepper")).toBeTruthy();
-    expect(screen.getByTestId("buyer-save-profile")).toBeTruthy();
-    expect(screen.getByTestId("checkout-pay-bar")).toBeTruthy();
-
-    fireEvent.change(screen.getByTestId("buyer-cpf"), { target: { value: VALID_CPF } });
-    fireEvent.click(screen.getByTestId("checkout-continue"));
-
-    // Pagamento: the method picker, with both in-browser methods on offer.
-    await waitFor(() => expect(screen.getByTestId("checkout-method")).toBeTruthy());
-    expect(screen.getByTestId("checkout-method-PIX")).toBeTruthy();
-
-    // Choosing card auto-raises the order through the HOST port…
-    fireEvent.click(screen.getByTestId("checkout-method-CARD"));
-    await waitFor(() => expect(createOrder).toHaveBeenCalledTimes(1));
-    expect(createOrder.mock.calls[0]?.[0]).toMatchObject({ method: "CARD", saveProfile: true });
-
-    // …and the card form renders, again through the default slots.
-    await waitFor(() => expect(screen.getByTestId("card-number")).toBeTruthy());
-    expect(screen.getByTestId("card-holder")).toBeTruthy();
-    expect(screen.getByTestId("card-pay")).toBeTruthy();
-  });
-
-  it("shows the empty-cart state for a cart with nothing to pay", () => {
-    render(
-      <CheckoutFlow
-        cart={{ empty: true, totalLabel: "R$ 0,00", totalItems: 0 }}
-        createOrder={vi.fn()}
-        onExitToMenu={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByTestId("checkout-empty")).toBeTruthy();
-  });
-});

package/src/components/checkout/__tests__/unresolved-charge.test.tsx

@@ -1,155 +0,0 @@
-// @vitest-environment jsdom
-/**
- * FUT-563 — a charge NOBODY can confirm is not a charge that failed.
- *
- * `PAYMENT_UNRESOLVED` means some provider may be holding the buyer's money and
- * no probe could say. It is the one refusal where inviting a retry is actively
- * harmful, and both checkout surfaces used to do exactly that: the card view
- * put "não pague de novo" under a danger heading reading "Não foi possível
- * pagar", with the live "Pagar R$ …" bar directly beneath it; the Pagamento
- * step gave the same body a solid "Tentar novamente" that mints a SECOND order
- * at a new reference, outside the walk's re-probe of the first.
- *
- * What is pinned here is the presentation, not the words: the code decides it,
- * so a copy edit cannot silently turn the affordance back on.
- */
-import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const client = vi.hoisted(() => ({
-  chargeCard: vi.fn(),
-  listSavedCards: vi.fn(),
-  refreshCardPublicKey: vi.fn(),
-  pollOrderStatus: vi.fn(),
-  fetchCheckoutConfig: vi.fn(),
-}));
-
-vi.mock("../client", () => client);
-
-import { CardView } from "../card-view";
-import { PaymentErrorPanel } from "../payment-error-panel";
-import type { CheckoutOrder } from "../types";
-
-const ORDER: CheckoutOrder = {
-  orderId: "o1",
-  status: "AWAITING_PAYMENT",
-  method: "CARD",
-  totalCents: 1250,
-  subtotalCents: 1250,
-  discountTotalCents: 0,
-  appliedDiscounts: [],
-  totalLabel: "R$ 12,50",
-};
-
-const UNRESOLVED =
-  "Estamos confirmando o seu pagamento com o provedor. NÃO pague de novo — se a cobrança " +
-  "foi feita, ela será confirmada sozinha.";
-
-/**
- * A card already in the vault. Paying with it needs no tokenizer and no typing,
- * which keeps these tests about the RENDERING of the answer.
- */
-const SAVED = {
-  id: "card_1",
-  brand: "visa",
-  last4: "1111",
-  expMonth: 12,
-  expYear: 2034,
-  holder: "VERA CADEIA",
-};
-
-beforeEach(() => {
-  vi.clearAllMocks();
-  client.listSavedCards.mockResolvedValue([SAVED]);
-  client.refreshCardPublicKey.mockResolvedValue({ ok: true, data: { publicKey: null } });
-  client.pollOrderStatus.mockResolvedValue({ ok: true, data: "AWAITING_PAYMENT" });
-});
-
-afterEach(() => {
-  cleanup();
-});
-
-describe("the CARD view", () => {
-  /** Render the card form and drive a submit whose charge comes back `code`d. */
-  async function submitWith(failure: { error: string; code?: string }): Promise<void> {
-    client.chargeCard.mockResolvedValue({ ok: false, ...failure });
-    render(
-      <CardView
-        order={ORDER}
-        providerConfig={{ provider: "pagbank", publicKey: null, mockTokenization: true }}
-        providerChain={[
-          { provider: "pagbank", publicKey: null, mockTokenization: true, mintable: true },
-        ]}
-        onResolved={vi.fn()}
-      />,
-    );
-    // The saved card is preselected once the list lands, so the pay bar is
-    // everything this submit needs.
-    await waitFor(() => {
-      expect(screen.getByTestId("saved-cards")).toBeTruthy();
-    });
-    fireEvent.click(screen.getByTestId("card-pay-bar").querySelector("button") as HTMLElement);
-    await waitFor(() => {
-      expect(client.chargeCard).toHaveBeenCalled();
-    });
-  }
-
-  it("shows an UNRESOLVED charge as a warning, and takes the pay bar away", async () => {
-    await submitWith({ error: UNRESOLVED, code: "PAYMENT_UNRESOLVED" });
-
-    // Not "Não foi possível pagar": the buyer reads the bold title first, and
-    // that one contradicts the body's own instruction. And the one action the
-    // message forbids is not on screen at all.
-    await waitFor(() => {
-      expect(screen.getByTestId("card-unresolved")).toBeTruthy();
-      expect(screen.queryByTestId("card-error")).toBeNull();
-      expect(screen.queryByTestId("card-pay-bar")).toBeNull();
-    });
-    expect(screen.getByText("Estamos confirmando seu pagamento")).toBeTruthy();
-  });
-
-  it("still shows an ordinary failure as a failure, with the pay bar intact", async () => {
-    await submitWith({ error: "Cartão recusado.", code: "PAYMENT_UNAVAILABLE" });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("card-error")).toBeTruthy();
-    });
-    expect(screen.getByTestId("card-pay-bar")).toBeTruthy();
-  });
-});
-
-describe("the Pagamento step's error panel", () => {
-  it("offers NO retry for an unresolved charge", () => {
-    const { container } = render(
-      <PaymentErrorPanel
-        message={UNRESOLVED}
-        emailFlagged={false}
-        code="PAYMENT_UNRESOLVED"
-        onUseEmail={vi.fn()}
-        onRetry={vi.fn()}
-      />,
-    );
-
-    // "Tentar novamente" re-runs createOrder: a new order at a new reference,
-    // which the walk's re-probe of the old one cannot protect.
-    expect(screen.getByTestId("checkout-unresolved")).toBeTruthy();
-    // Asserted on the rendered TEXT: nothing here is asynchronous, so this is
-    // not an element that went away — the affordance was never offered.
-    expect(container.textContent).not.toContain("Tentar novamente");
-  });
-
-  it("keeps the retry for every other refusal", () => {
-    render(
-      <PaymentErrorPanel
-        message="Não foi possível criar o pedido."
-        emailFlagged={false}
-        code="EMPTY_CART"
-        onUseEmail={vi.fn()}
-        onRetry={vi.fn()}
-      />,
-    );
-
-    expect(screen.getByTestId("checkout-error")).toBeTruthy();
-    expect(screen.getByTestId("checkout-retry-payment")).toBeTruthy();
-  });
-});