@12-apps/payments-frontend 1.3.1 → 1.4.1

package/src/__tests__/initial-provider.test.tsx

@@ -1,81 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import type { MerchantSettingsView } from '@12-apps/payments-backend';
-
-import type { PaymentsSettingsClient } from '../client';
-import { PaymentProviderSettings } from '../components/PaymentProviderSettings';
-
-/**
- * Landing after an OAuth connect.
- *
- * This shipped broken TWICE, and the second time only because the test was
- * shaped around the code instead of the failure. The host reads the connected
- * provider from the callback's query string in an EFFECT, so it is null on
- * first render and arrives a tick later — and `useState(initialProvider)` keeps
- * the null forever. A test that renders with the prop already set passes
- * happily and proves nothing; the prop has to ARRIVE.
- */
-
-const VIEW: MerchantSettingsView = {
-  providers: [
-    { name: 'pagbank', displayName: 'PagBank', authMode: 'oauth', credentialSchema: [] },
-    { name: 'stripe', displayName: 'Stripe', authMode: 'credentials', credentialSchema: [] },
-  ],
-  configs: [],
-  activeProvider: null,
-} as unknown as MerchantSettingsView;
-
-function fakeClient(): PaymentsSettingsClient {
-  return {
-    getSettings: vi.fn().mockResolvedValue(VIEW),
-    getSetupGuide: vi.fn().mockResolvedValue(null),
-    setEnabled: vi.fn(),
-    saveCredentials: vi.fn(),
-  } as unknown as PaymentsSettingsClient;
-}
-
-describe('PaymentProviderSettings — landing after a connect', () => {
-  it('lands on the provider list when nothing was just connected', async () => {
-    render(<PaymentProviderSettings client={fakeClient()} />);
-    expect(await screen.findByTestId('payments-provider-picker')).toBeDefined();
-  });
-
-  /**
-   * The regression: the prop is null at mount and supplied afterwards, exactly
-   * as the host does it. Seeding `useState` with it passes the OTHER test and
-   * fails this one.
-   */
-  it('opens the provider when the host supplies it AFTER mount', async () => {
-    const client = fakeClient();
-    const { rerender } = render(<PaymentProviderSettings client={client} initialProvider={null} />);
-    await screen.findByTestId('payments-provider-picker');
-
-    rerender(<PaymentProviderSettings client={client} initialProvider="pagbank" />);
-
-    // The picker is replaced by that provider's own panel.
-    await waitFor(() => expect(screen.queryByTestId('payments-provider-picker')).toBeNull());
-    expect(screen.getByTestId('payments-provider-back')).toBeDefined();
-  });
-
-  /**
-   * Applied once, not on every render: the host holds the outcome for the
-   * page's lifetime, so re-applying would make "Voltar aos provedores" bounce
-   * straight back into the provider and trap the owner on one screen.
-   */
-  it('does not re-open the provider after the owner goes back', async () => {
-    const client = fakeClient();
-    const { rerender } = render(<PaymentProviderSettings client={client} initialProvider={null} />);
-    await screen.findByTestId('payments-provider-picker');
-
-    rerender(<PaymentProviderSettings client={client} initialProvider="pagbank" />);
-    const back = await screen.findByTestId('payments-provider-back');
-
-    back.click();
-
-    // A rerender with the SAME still-set prop must not drag them back in.
-    rerender(<PaymentProviderSettings client={client} initialProvider="pagbank" />);
-    expect(await screen.findByTestId('payments-provider-picker')).toBeDefined();
-  });
-});

package/src/__tests__/provider-priority-list.test.tsx

@@ -1,159 +0,0 @@
-// @vitest-environment jsdom
-// fireEvent/render from @testing-library/react (act()-wrapped) — same choice
-// and reasoning as the context tests: user-event is not a dependency here.
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import type { MaskedProviderConfig, MerchantSettingsView } from '@12-apps/payments-backend';
-
-import type { PaymentsSettingsClient } from '../client';
-import { ProviderPriorityList, chainOf } from '../components/ProviderPriorityList';
-
-/**
- * The failover-chain editor. What matters here is not the drag mechanics but
- * that the order the merchant sees is the order checkout will use, and that a
- * failed save never leaves the screen claiming an order the server rejected.
- */
-
-function config(provider: string, enabled: boolean, priority: number): MaskedProviderConfig {
-  return {
-    provider,
-    enabled,
-    priority,
-    environment: 'SANDBOX',
-    status: 'VERIFIED',
-    lastVerifiedAt: null,
-    // Every row in the chain editor is by definition already proven — only a
-    // successful charge can put a provider in the chain at all.
-    chargeVerifiedAt: '2026-07-30T12:00:00.000Z',
-    expiresAt: null,
-    stub: false,
-    environments: { SANDBOX: {}, PRODUCTION: {} },
-  };
-}
-
-function viewOf(configs: MaskedProviderConfig[]): MerchantSettingsView {
-  const chain = configs.filter((c) => c.enabled).map((c) => c.provider);
-  return {
-    providers: [
-      { name: 'stone', displayName: 'Stone', urlSlug: 'stone', authMode: 'credentials', capabilities: CAPS, credentialSchema: [] },
-      { name: 'stripe', displayName: 'Stripe', urlSlug: 'stripe', authMode: 'oauth', capabilities: CAPS, credentialSchema: [] },
-    ],
-    configs,
-    providerChain: chain,
-    activeProvider: chain[0] ?? null,
-    failoverPolicy: 'TECHNICAL',
-  };
-}
-
-const CAPS = {
-  methods: ['PIX'] as const,
-  savedCards: false,
-  refunds: false,
-  partialRefunds: false,
-  splits: false,
-  webhooks: true,
-  tokenization: 'NONE' as const,
-};
-
-function fakeClient(overrides: Partial<PaymentsSettingsClient> = {}): PaymentsSettingsClient {
-  return {
-    getSettings: vi.fn(),
-    saveCredentials: vi.fn(),
-    setEnabled: vi.fn(),
-    setPriorities: vi.fn(),
-    setFailoverPolicy: vi.fn(),
-    verify: vi.fn(),
-    getSetupGuide: vi.fn(),
-    beginOAuth: vi.fn(),
-    disconnectOAuth: vi.fn(),
-    ...overrides,
-  } as PaymentsSettingsClient;
-}
-
-/** The rendered chain order, read off the list rows. */
-function rowOrder(): string[] {
-  return Array.from(document.querySelectorAll('[data-testid^="payments-priority-item-"]')).map(
-    (el) => el.getAttribute('data-testid')!.replace('payments-priority-item-', ''),
-  );
-}
-
-describe('chainOf', () => {
-  it('derives the chain from configs, ordered by rank', () => {
-    const view = viewOf([config('stripe', true, 1), config('stone', true, 0)]);
-    expect(chainOf(view)).toEqual(['stone', 'stripe']);
-  });
-
-  it('ignores providers that are configured but out of rotation', () => {
-    const view = viewOf([config('stone', true, 0), config('stripe', false, 0)]);
-    expect(chainOf(view)).toEqual(['stone']);
-  });
-});
-
-describe('ProviderPriorityList', () => {
-  it('names the provider checkout will try first', () => {
-    render(
-      <ProviderPriorityList
-        view={viewOf([config('stone', true, 0), config('stripe', true, 1)])}
-        client={fakeClient()}
-      />,
-    );
-    // The intro names it in prose AND the row is first in the list; assert on
-    // the list, which is the thing that actually encodes routing order.
-    expect(screen.getByTestId('payments-priority-first')).toBeTruthy();
-    expect(rowOrder()).toEqual(['stone', 'stripe']);
-  });
-
-  it('warns when nothing is in rotation, because checkout cannot charge', () => {
-    render(<ProviderPriorityList view={viewOf([config('stone', false, 0)])} client={fakeClient()} />);
-    expect(screen.getByTestId('payments-priority-empty')).toBeTruthy();
-  });
-
-  it('saves the WHOLE reordered chain, not a per-provider delta', async () => {
-    const reordered = viewOf([config('stripe', true, 0), config('stone', true, 1)]);
-    const setPriorities = vi.fn().mockResolvedValue(reordered);
-    render(
-      <ProviderPriorityList
-        view={viewOf([config('stone', true, 0), config('stripe', true, 1)])}
-        client={fakeClient({ setPriorities })}
-      />,
-    );
-
-    fireEvent.click(screen.getByLabelText('Mover Stone para baixo'));
-
-    await waitFor(() => {
-      expect(setPriorities).toHaveBeenCalledWith(['stripe', 'stone']);
-    });
-  });
-
-  it('rolls the list back when the save fails, and says why', async () => {
-    const setPriorities = vi.fn().mockRejectedValue(new Error('conflito de ordem'));
-    render(
-      <ProviderPriorityList
-        view={viewOf([config('stone', true, 0), config('stripe', true, 1)])}
-        client={fakeClient({ setPriorities })}
-      />,
-    );
-
-    fireEvent.click(screen.getByLabelText('Mover Stone para baixo'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('payments-priority-error').textContent).toContain(
-        'conflito de ordem',
-      );
-    });
-    // The screen must not keep showing an order the server refused.
-    expect(rowOrder()).toEqual(['stone', 'stripe']);
-  });
-
-  it('cannot move the first provider up or the last one down', () => {
-    render(
-      <ProviderPriorityList
-        view={viewOf([config('stone', true, 0), config('stripe', true, 1)])}
-        client={fakeClient()}
-      />,
-    );
-    expect(screen.getByLabelText('Mover Stone para cima').hasAttribute('disabled')).toBe(true);
-    expect(screen.getByLabelText('Mover Stripe para baixo').hasAttribute('disabled')).toBe(true);
-  });
-});

package/src/__tests__/provider-status-bar.test.tsx

@@ -1,152 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments-backend';
-
-import { ProviderStatusBar } from '../components/ProviderStatusBar';
-
-/**
- * "Ativo" decides whether checkout routes real buyers to this provider, so it
- * must not be offerable before there is anything to route to. The screen shipped
- * showing `PagBank [UNVERIFIED] [on] Ativo` — a provider that had never proved
- * it could charge, presented as live.
- */
-
-/** A provider that CAN run the activation charge, so the strict rule applies. */
-const DESCRIPTOR = {
-  name: 'pagbank',
-  displayName: 'PagBank',
-  capabilities: { activationCharge: true },
-} as unknown as ProviderDescriptor;
-
-/**
- * One that cannot: no browser tokenization is written for it, so there is no
- * way to earn `chargeVerifiedAt`. Holding it to the charge would not make
- * "Ativo" honest — it would make the provider permanently unactivatable.
- */
-const NO_CHARGE_PATH = {
-  name: 'stripe',
-  displayName: 'Stripe',
-  capabilities: { activationCharge: false },
-} as unknown as ProviderDescriptor;
-
-function configWith(
-  status: string,
-  enabled = false,
-  chargeVerifiedAt: string | null = null,
-): MaskedProviderConfig {
-  return {
-    provider: 'pagbank',
-    status,
-    enabled,
-    chargeVerifiedAt,
-  } as unknown as MaskedProviderConfig;
-}
-
-const PROVEN = '2026-07-30T12:00:00.000Z';
-
-/**
- * jest-dom is not a dependency here, so assert the DOM property directly. The
- * testid lands on MUI's Switch ROOT; the thing that carries `disabled` is the
- * checkbox input inside it.
- */
-function toggle(): HTMLInputElement {
-  const root = screen.getByTestId('payments-enabled-toggle');
-  const input = root.querySelector('input[type="checkbox"]');
-  if (!input) throw new Error('switch input not found');
-  return input as HTMLInputElement;
-}
-
-afterEach(cleanup);
-
-describe('ProviderStatusBar — the Ativo switch', () => {
-  it('cannot be switched on with no connection at all', () => {
-    render(<ProviderStatusBar descriptor={DESCRIPTOR} config={null} busy={false} onToggle={vi.fn()} />);
-    expect(toggle().disabled).toBe(true);
-  });
-
-  it('cannot be switched on while the provider is UNVERIFIED', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={DESCRIPTOR}
-        config={configWith('UNVERIFIED')}
-        busy={false}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(true);
-  });
-
-  /**
-   * The one this exists for. `VERIFIED` comes from the credential probe, which
-   * only asks whether the keys authenticate — PagBank answers yes to that and
-   * still refuses every real charge until the integration is homologated. A
-   * store sat at `PagBank [VERIFIED] [on] Ativo` while declining every shopper.
-   */
-  it('stays locked at VERIFIED — authenticating is not being able to charge', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={DESCRIPTOR}
-        config={configWith('VERIFIED')}
-        busy={false}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(true);
-  });
-
-  it('unlocks once a real charge has succeeded', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={DESCRIPTOR}
-        config={configWith('VERIFIED', false, PROVEN)}
-        busy={false}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(false);
-  });
-
-  /**
-   * Turning OFF is never gated. A row enabled before this rule existed — or a
-   * store in RECONNECT_REQUIRED that demonstrably worked — must be pullable out
-   * of rotation at once, or the switch traps an owner with a broken provider
-   * live in the chain.
-   */
-  it('lets an enabled-but-unproven provider be switched off', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={DESCRIPTOR}
-        config={configWith('RECONNECT_REQUIRED', true)}
-        busy={false}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(false);
-  });
-
-  it('falls back to VERIFIED for a provider that cannot run the charge', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={NO_CHARGE_PATH}
-        config={configWith('VERIFIED')}
-        busy={false}
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(false);
-  });
-
-  it('is locked while another action is in flight', () => {
-    render(
-      <ProviderStatusBar
-        descriptor={DESCRIPTOR}
-        config={configWith('VERIFIED', false, PROVEN)}
-        busy
-        onToggle={vi.fn()}
-      />,
-    );
-    expect(toggle().disabled).toBe(true);
-  });
-});

package/src/__tests__/slugged-provider.test.tsx

@@ -1,108 +0,0 @@
-// @vitest-environment jsdom
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-import type { MerchantSettingsView } from '@12-apps/payments-backend';
-
-import type { PaymentsSettingsClient } from '../client';
-import { PaymentProviderSettings } from '../components/PaymentProviderSettings';
-
-/**
- * How a provider is spelled in a URL is the ADAPTER's declaration (FUT-557),
- * carried in the catalog as `urlSlug`. A controlled host passes its path
- * segment verbatim and writes back whatever `onProviderChange` reports, so
- * it holds no map of providers: resolution here must accept the slug AND the
- * raw name (old links must not 404), and report the slug on every change.
- */
-
-const VIEW: MerchantSettingsView = {
-  providers: [
-    {
-      name: 'infinitepay',
-      displayName: 'InfinitePay',
-      urlSlug: 'infinite-pay',
-      authMode: 'credentials',
-      credentialSchema: [],
-    },
-    { name: 'pagbank', displayName: 'PagBank', urlSlug: 'pagbank', authMode: 'oauth', credentialSchema: [] },
-  ],
-  configs: [],
-  activeProvider: null,
-} as unknown as MerchantSettingsView;
-
-function fakeClient(): PaymentsSettingsClient {
-  return {
-    getSettings: vi.fn().mockResolvedValue(VIEW),
-    getSetupGuide: vi.fn().mockResolvedValue(null),
-    setEnabled: vi.fn(),
-    saveCredentials: vi.fn(),
-  } as unknown as PaymentsSettingsClient;
-}
-
-describe('PaymentProviderSettings — adapter-declared URL slugs', () => {
-  it('opens the provider a slug segment names', async () => {
-    render(<PaymentProviderSettings client={fakeClient()} selectedProvider="infinite-pay" />);
-
-    expect(await screen.findByTestId('payments-provider-back')).toBeDefined();
-    await waitFor(() => expect(screen.queryByTestId('payments-provider-picker')).toBeNull());
-  });
-
-  it('still resolves the raw name, so a link minted before the slug existed lands', async () => {
-    render(<PaymentProviderSettings client={fakeClient()} selectedProvider="infinitepay" />);
-
-    expect(await screen.findByTestId('payments-provider-back')).toBeDefined();
-  });
-
-  it('reports the slug on selection, for the host to write into its URL verbatim', async () => {
-    const onProviderChange = vi.fn();
-    render(
-      <PaymentProviderSettings
-        client={fakeClient()}
-        selectedProvider={null}
-        onProviderChange={onProviderChange}
-      />,
-    );
-    const card = await screen.findByTestId('payments-provider-card-infinitepay');
-
-    card.click();
-
-    await waitFor(() => expect(onProviderChange).toHaveBeenCalledWith('infinite-pay'));
-  });
-
-  /**
-   * The OAuth callback's `?connected=` carries the raw NAME, and the host
-   * writes it into the URL before the catalog exists — it holds no map. The
-   * screen is right either way (the alias resolves); the ADDRESS BAR is what
-   * would stay wrong, and it is what a reload or a shared link uses. So once
-   * the catalog can spell the provider, the component asks the host to respell
-   * the segment — as a `replace`, so Voltar never revisits the alias.
-   */
-  it('asks the host to respell an alias segment to the canonical slug, as a replace', async () => {
-    const onProviderChange = vi.fn();
-    render(
-      <PaymentProviderSettings
-        client={fakeClient()}
-        selectedProvider="infinitepay"
-        onProviderChange={onProviderChange}
-      />,
-    );
-
-    await waitFor(() =>
-      expect(onProviderChange).toHaveBeenCalledWith('infinite-pay', { replace: true }),
-    );
-  });
-
-  it('leaves a segment already spelled canonically alone', async () => {
-    const onProviderChange = vi.fn();
-    render(
-      <PaymentProviderSettings
-        client={fakeClient()}
-        selectedProvider="infinite-pay"
-        onProviderChange={onProviderChange}
-      />,
-    );
-
-    await screen.findByTestId('payments-provider-back');
-    expect(onProviderChange).not.toHaveBeenCalled();
-  });
-});

package/src/__tests__/verification-slot.test.tsx

@@ -1,125 +0,0 @@
-// @vitest-environment jsdom
-import { cleanup, render, screen, waitFor } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { MerchantSettingsView } from '@12-apps/payments-backend';
-
-import type { PaymentsSettingsClient } from '../client';
-import { PaymentProviderSettings } from '../components/PaymentProviderSettings';
-
-/**
- * The activation step's slot.
- *
- * "Connected" and "can charge" are different facts, and only the HOST can prove
- * the second — it owns the endpoint that puts a real cent through the store's
- * account. This package's job is narrower and worth pinning: place that step
- * where an owner will actually find it, and tell the host which provider is
- * open and whether it is already live.
- */
-
-const PROVIDERS = [
-  { name: 'pagbank', displayName: 'PagBank', authMode: 'oauth', credentialSchema: [] },
-];
-
-function viewWith(config: Record<string, unknown> | null): MerchantSettingsView {
-  return {
-    providers: PROVIDERS,
-    configs: config ? [config] : [],
-    activeProvider: null,
-  } as unknown as MerchantSettingsView;
-}
-
-function fakeClient(view: MerchantSettingsView): PaymentsSettingsClient {
-  return {
-    getSettings: vi.fn().mockResolvedValue(view),
-    getSetupGuide: vi.fn().mockResolvedValue(null),
-    setEnabled: vi.fn(),
-    saveCredentials: vi.fn(),
-  } as unknown as PaymentsSettingsClient;
-}
-
-afterEach(cleanup);
-
-describe('PaymentProviderSettings — the verification slot', () => {
-  it('is not rendered while the owner is still on the provider list', async () => {
-    const renderVerification = vi.fn(() => <div data-testid="slot" />);
-    render(
-      <PaymentProviderSettings
-        client={fakeClient(viewWith(null))}
-        renderVerification={renderVerification}
-      />,
-    );
-
-    await screen.findByTestId('payments-provider-picker');
-    expect(renderVerification).not.toHaveBeenCalled();
-  });
-
-  it('hands the host the open provider and its connection state', async () => {
-    const renderVerification = vi.fn(() => <div data-testid="slot" />);
-    render(
-      <PaymentProviderSettings
-        client={fakeClient(
-          viewWith({ provider: 'pagbank', status: 'VERIFIED', enabled: true, environments: {} }),
-        )}
-        initialProvider="pagbank"
-        renderVerification={renderVerification}
-      />,
-    );
-
-    await screen.findByTestId('slot');
-    expect(renderVerification).toHaveBeenCalledWith(
-      expect.objectContaining({ provider: 'pagbank', connected: true }),
-    );
-    /**
-     * `enabled` is deliberately withheld. The step used it to render a
-     * standing "Provedor ativo" banner, which went on reassuring a store whose
-     * every charge was refused — the banner and the refusal were on screen
-     * together. The step reports what it observes, nothing else.
-     */
-    expect(renderVerification).not.toHaveBeenCalledWith(
-      expect.objectContaining({ enabled: expect.anything() }),
-    );
-  });
-
-  /**
-   * A provider with no stored row yet still renders the slot — the host decides
-   * to show nothing. Reporting `connected: false` is what lets it.
-   */
-  it('reports a provider with no stored connection as not connected', async () => {
-    const renderVerification = vi.fn(() => <div data-testid="slot" />);
-    render(
-      <PaymentProviderSettings
-        client={fakeClient(viewWith(null))}
-        initialProvider="pagbank"
-        renderVerification={renderVerification}
-      />,
-    );
-
-    await screen.findByTestId('slot');
-    expect(renderVerification).toHaveBeenCalledWith(
-      expect.objectContaining({ connected: false }),
-    );
-  });
-
-  /**
-   * Placement, not just presence: the step must sit OUTSIDE the manual
-   * credentials disclosure. An owner who connected by OAuth is told no key
-   * needs copying, so they have no reason to open it — and the step that
-   * actually turns the store on would be hidden in there.
-   */
-  it('places the step outside the manual-credentials disclosure', async () => {
-    render(
-      <PaymentProviderSettings
-        client={fakeClient(
-          viewWith({ provider: 'pagbank', status: 'VERIFIED', enabled: false, environments: {} }),
-        )}
-        initialProvider="pagbank"
-        renderVerification={() => <div data-testid="slot" />}
-      />,
-    );
-
-    const slot = await screen.findByTestId('slot');
-    await waitFor(() => expect(screen.queryByTestId('payments-manual-fallback')).toBeNull());
-    expect(slot.closest('[data-testid="payments-manual-fallback"]')).toBeNull();
-  });
-});