@12-apps/payments-frontend 1.0.0

package/src/components/ProviderList.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { Box, Chip, Typography } from '@mui/material';
+
+import type { MaskedProviderConfig, MerchantSettingsView, ProviderDescriptor } from '@12-apps/payments-backend';
+
+import type { PaymentsSettingsClient } from '../client';
+import { connectionBadge } from './connection-state';
+import { ProviderPriorityList, chainOf } from './ProviderPriorityList';
+
+/**
+ * Provider picker — one card per provider, click to open it.
+ *
+ * Replaces a `<select>`, which hid both how many providers exist and which of
+ * them actually work. The card carries that state, so the failing one is
+ * visible without opening anything.
+ */
+function ProviderPicker({
+  providers,
+  configs,
+  activeName,
+  onSelect,
+}: {
+  providers: ProviderDescriptor[];
+  configs: MaskedProviderConfig[];
+  activeName: string | null;
+  onSelect: (name: string) => void;
+}) {
+  return (
+    <Box
+      data-testid="payments-provider-picker"
+      sx={{
+        display: 'grid',
+        gap: 2,
+        gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
+        mb: 3,
+      }}
+    >
+      {providers.map((provider) => {
+        const config = configs.find((c) => c.provider === provider.name) ?? null;
+        const badge = connectionBadge(config);
+        const selected = provider.name === activeName;
+        return (
+          <Box
+            key={provider.name}
+            component="button"
+            type="button"
+            aria-pressed={selected}
+            data-testid={`payments-provider-card-${provider.name}`}
+            onClick={() => onSelect(provider.name)}
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 1,
+              width: '100%',
+              p: 2,
+              cursor: 'pointer',
+              textAlign: 'left',
+              font: 'inherit',
+              borderRadius: 1,
+              border: 2,
+              borderColor: selected ? 'primary.main' : 'divider',
+              bgcolor: selected ? 'action.selected' : 'background.paper',
+            }}
+          >
+            <Typography variant="subtitle1">{provider.displayName}</Typography>
+            <Chip
+              size="small"
+              data-testid={`payments-provider-badge-${provider.name}`}
+              label={badge.label}
+              color={badge.color}
+            />
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
+/**
+ * The landing view: choose a provider. Nothing is configured until one is
+ * picked, so this screen carries only the choice.
+ */
+export function ProviderList({
+  view,
+  client,
+  reload,
+  onSelect,
+}: {
+  view: MerchantSettingsView;
+  client: PaymentsSettingsClient;
+  reload: () => Promise<void>;
+  onSelect: (name: string) => void;
+}) {
+  return (
+    <Box data-testid="payments-provider-settings">
+      {/*
+        The failover chain orders providers BETWEEN each other, so it belongs on
+        the list — but only once there is an order to argue about. On a first
+        visit it would be an empty box above the only thing that matters.
+        Remounted on chain change so drag state starts from server truth.
+      */}
+      {chainOf(view).length > 1 ? (
+        <Box sx={{ mb: 3 }}>
+          <ProviderPriorityList
+            key={chainOf(view).join(',')}
+            view={view}
+            client={client}
+            onReordered={() => void reload()}
+          />
+        </Box>
+      ) : null}
+      <Typography variant="subtitle1">Escolha o provedor de pagamento</Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        Selecione onde sua loja recebe — a configuração é feita sob medida para ele.
+      </Typography>
+      <ProviderPicker
+        providers={view.providers}
+        configs={view.configs}
+        activeName={null}
+        onSelect={onSelect}
+      />
+    </Box>
+  );
+}

package/src/components/ProviderPanel.tsx

@@ -0,0 +1,300 @@
+'use client';
+
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert,
+  Box,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useCallback, useState, type ReactNode } from 'react';
+
+import type {
+  MaskedProviderConfig,
+  PaymentEnvironment,
+  ProviderDescriptor,
+} from '@12-apps/payments-backend';
+
+import type { PaymentsSettingsClient } from '../client';
+import { EnvironmentNotice, EnvironmentSelector } from './EnvironmentTabs';
+import { ProviderConnection } from './ProviderConnection';
+import { ProviderForm } from './ProviderCredentialForm';
+import { ProviderStatusBar } from './ProviderStatusBar';
+
+/**
+ * One provider's configuration panel: the Ativo bar, the connect card or the
+ * credential form (per the provider's authMode), the host's activation step,
+ * and the manual-credentials fallback.
+ *
+ * Split out of `PaymentProviderSettings` so that file stays about WHICH
+ * provider is open; this one is about what an open provider looks like.
+ */
+
+/**
+ * Host endpoint that mints and persists the CSRF state against the admin
+ * session and returns it with the callback URL to come back to.
+ */
+export type PrepareConnect = (
+  provider: string,
+  environment: PaymentEnvironment,
+) => Promise<{ state: string; redirectUri: string; environment?: PaymentEnvironment }>;
+
+export interface ActivePanelProps {
+  descriptor: ProviderDescriptor;
+  config: MaskedProviderConfig | null;
+  client: PaymentsSettingsClient;
+  onChanged?: (config: MaskedProviderConfig) => void;
+  reload: () => void;
+  prepareConnect?: PrepareConnect;
+  /**
+   * The provider's walkthrough, as a function of the form's own pieces.
+   *
+   * It LEADS on the credentials path — the stepper and the step still owed both
+   * answer "where am I", which is a question you ask before typing — and it
+   * physically contains the field for that step, because "informe sua
+   * InfiniteTag" and the box you type it into are one thing.
+   *
+   * On the OAUTH path the whole assembly stays inside the manual disclosure. It
+   * is written for someone pasting credentials by hand, so there it is a wall
+   * of instructions contradicting the card above it, which says no key needs
+   * copying. Reachable, just not the first thing read.
+   */
+  guide?: (slots: {
+    rows: ReactNode;
+    sectionFooter: ReactNode;
+    editing: boolean;
+    /** The environment on screen holds its credentials — see `renderGuide`. */
+    stored: boolean;
+  }) => ReactNode;
+  /** The host's activation step (see `renderVerification`), already resolved. */
+  verification?: ReactNode;
+  /** The stored credentials were replaced — see `ProviderForm`. */
+  onCredentialsReplaced?: () => void;
+}
+
+/**
+ * Credential form or OAuth connection card, per the provider's authMode.
+ *
+ * An OAuth provider gets BOTH: the connect button as the happy path, plus the
+ * credential form tucked behind a disclosure. That fallback is not decoration
+ * — stores connected before Connect existed still hold a pasted token, and a
+ * deployment with no registered provider application has no working connect
+ * button at all. Hiding the form outright would strand both.
+ */
+/**
+ * The status chip + "Ativo" switch, owning its own in-flight state.
+ *
+ * Rendered above BOTH branches of {@link ActivePanel}, never inside the
+ * manual-credentials disclosure: this is the control that decides whether
+ * checkout can charge, and an OAuth-connected store — told on the card above
+ * that no key needs copying — has no reason to open that disclosure at all.
+ */
+function EnableBar({ descriptor, config, client, onChanged, reload }: ActivePanelProps) {
+  const [toggling, setToggling] = useState(false);
+  const toggle = useCallback(
+    async (enabled: boolean) => {
+      setToggling(true);
+      try {
+        const next = await client.setEnabled(descriptor.name, enabled);
+        onChanged?.(next);
+        reload();
+      } finally {
+        setToggling(false);
+      }
+    },
+    [client, descriptor.name, onChanged, reload],
+  );
+
+  return (
+    <ProviderStatusBar
+      descriptor={descriptor}
+      config={config}
+      busy={toggling}
+      onToggle={(enabled) => void toggle(enabled)}
+    />
+  );
+}
+
+/**
+ * One provider, one card — in three bands.
+ *
+ * The screen used to be a column of loose blocks on the page background, and
+ * with the environment tabs halfway down it it was genuinely ambiguous what
+ * they governed: the fields under them, or everything. Bounding the provider
+ * makes the answer structural — inside this card, one provider, one
+ * environment.
+ *
+ * The three bands exist for the middle one. The environment banner has to run
+ * EDGE TO EDGE, because a strip that spans the card reads as a property of
+ * everything below it while the same words inset by the card's padding read as
+ * one more paragraph of content. That is not achievable inside a single padded
+ * container, so the header and the body carry the padding and the band between
+ * them carries none.
+ */
+function ProviderCard({
+  header,
+  band,
+  children,
+}: {
+  header: ReactNode;
+  band?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Paper variant="outlined">
+      <Box sx={{ px: 3, pt: 3 }}>{header}</Box>
+      {band}
+      <Box sx={{ p: 3 }}>
+        <Stack spacing={2}>{children}</Stack>
+      </Box>
+    </Paper>
+  );
+}
+
+/** Every REQUIRED credential is on record for this environment specifically. */
+function requiredStored(
+  descriptor: ProviderDescriptor,
+  config: MaskedProviderConfig | null,
+  environment: PaymentEnvironment,
+): boolean {
+  const stored = config?.environments[environment] ?? {};
+  return descriptor.credentialSchema
+    .filter((spec) => spec.required)
+    .every((spec) => stored[spec.key]?.configured === true);
+}
+
+export function ActivePanel(props: ActivePanelProps) {
+  const { descriptor, config, client, onChanged, reload, guide, verification } = props;
+  const statusBar = <EnableBar {...props} />;
+  // The environment frames everything below it, so the PANEL owns the choice
+  // and puts the tabs at the top — not the form, halfway down its own column.
+  const [environment, setEnvironment] = useState<PaymentEnvironment>(
+    config?.environment ?? 'SANDBOX',
+  );
+  // Lifted out of the form because it decides more than the form: reopening
+  // step 1 must also take step 3 off the screen. A card offering to charge
+  // R$ 1,01 under a heading about typing your InfiniteTag is two steps at once,
+  // and the one that costs money is the one you did not ask for.
+  const [editing, setEditing] = useState(false);
+
+  const credentials = (
+    <ProviderForm
+      descriptor={descriptor}
+      config={config}
+      client={client}
+      environment={environment}
+      editing={editing}
+      onEditingChange={setEditing}
+      onChanged={onChanged}
+      onSaved={reload}
+      onCredentialsReplaced={props.onCredentialsReplaced}
+      renderGuide={guide}
+    />
+  );
+
+  const selector = <EnvironmentSelector environment={environment} onChange={setEnvironment} />;
+  const band = <EnvironmentNotice environment={environment} active={config?.environment ?? null} />;
+
+  // The activation step charges through the credentials of the environment it
+  // is under. Shown on a tab that stores none, it offers to charge an account
+  // that is not there — on the screen whose entire subject is which account
+  // receives the store's money. `config.environment` is the ACTIVE one, so it
+  // cannot answer this; the fields on screen can.
+  const storedHere = requiredStored(descriptor, config, environment);
+
+  if (descriptor.authMode !== 'oauth') {
+    return (
+      <ProviderCard
+        header={
+          <Stack spacing={2}>
+            {statusBar}
+            {selector}
+          </Stack>
+        }
+        band={band}
+      >
+        {credentials}
+        {editing || !storedHere ? null : verification}
+      </ProviderCard>
+    );
+  }
+
+  return (
+    <OAuthPanel
+      {...props}
+      statusBar={statusBar}
+      form={
+        <Stack spacing={2}>
+          {selector}
+          {band}
+          {credentials}
+        </Stack>
+      }
+    />
+  );
+}
+
+/**
+ * The OAuth path: a connect button as the happy path, with the credential form
+ * kept behind a disclosure.
+ *
+ * That fallback is not decoration — stores connected before Connect existed
+ * still hold a pasted token, and a deployment with no registered provider
+ * application has no working connect button at all. Hiding the form outright
+ * would strand both.
+ */
+function OAuthPanel({
+  descriptor,
+  config,
+  client,
+  reload,
+  prepareConnect,
+  verification,
+  statusBar,
+  form,
+}: ActivePanelProps & { statusBar: ReactNode; form: ReactNode }) {
+  if (!prepareConnect) {
+    return (
+      <ProviderCard header={statusBar}>
+        <Alert severity="info">
+          Este provedor conecta por autorização, mas o botão de conexão não está disponível nesta
+          instalação. Você ainda pode conectar informando as credenciais manualmente.
+        </Alert>
+        {form}
+        {verification}
+      </ProviderCard>
+    );
+  }
+
+  return (
+    <ProviderCard header={statusBar}>
+      <ProviderConnection
+        descriptor={descriptor}
+        config={config}
+        client={client}
+        prepareConnect={prepareConnect}
+        onChanged={reload}
+      />
+      {/*
+        Directly under the connect card, ABOVE the manual disclosure: this is
+        the step that actually turns the store on, and an owner who just
+        authorized has no reason to open "prefiro informar as credenciais
+        manualmente" to find it.
+      */}
+      {verification}
+      {descriptor.credentialSchema.length > 0 ? (
+        <Accordion disableGutters data-testid="payments-manual-fallback">
+          <AccordionSummary expandIcon={<span aria-hidden>▾</span>}>
+            <Typography variant="body2" color="text.secondary">
+              Prefiro informar as credenciais manualmente
+            </Typography>
+          </AccordionSummary>
+          <AccordionDetails>{form}</AccordionDetails>
+        </Accordion>
+      ) : null}
+    </ProviderCard>
+  );
+}