@12-apps/payments-frontend 1.21.1 → 2.1.0

package/src/components/ProviderSetupGuide.tsx

@@ -6,11 +6,14 @@ import {
   Button,
   IconButton,
   Link,
-  Paper,
   Stack,
   Step,
+  StepConnector,
+  stepConnectorClasses,
   StepLabel,
   Stepper,
+  styled,
+  type StepIconProps,
   TextField,
   Typography,
 } from '@mui/material';
@@ -18,6 +21,15 @@ import { useState, type ReactNode } from 'react';
 
 import type { ProviderSetupGuide as Guide, SetupSection, SetupStep } from '@12-apps/payments-backend';
 
+import {
+  BAR_MSG_SX,
+  BAR_SX,
+  BTN_PRIMARY_SX,
+  BTN_SECONDARY_SX,
+  PANEL_SX,
+  T,
+} from './panel-tokens';
+
 import { richText } from './rich-text';
 
 /**
@@ -122,6 +134,39 @@ const BUTTON_SX = { textTransform: 'none' } as const;
 
 type StepActions = ProviderSetupGuideProps['actions'];
 
+/** A step's sentence, with the provider's own reference inline after it. */
+function StepText({ text, link }: { text?: string; link?: SetupStep['link'] }) {
+  if (!text) return null;
+  return (
+    <Typography sx={{ fontSize: '13px', color: T.ink2, lineHeight: 1.5 }}>
+      {richText(text)}{' '}
+      {link ? (
+        <Link href={link.url} target="_blank" rel="noreferrer">
+          {link.label}
+        </Link>
+      ) : null}
+    </Typography>
+  );
+}
+
+/**
+ * The panel's action bar: what this step is asking, and the button that answers.
+ *
+ * The sentence is not decoration. This is the one step no API can report, so
+ * the owner is being asked to vouch for work done somewhere else — and a bare
+ * button gives them nothing to weigh that against.
+ */
+function ConfirmBar({ action }: { action: { label: string; run: () => void } }) {
+  return (
+    <Box sx={BAR_SX} data-testid="payments-setup-confirm-bar">
+      <Typography sx={BAR_MSG_SX}>Confirme quando terminar do lado do provedor.</Typography>
+      <Button variant="contained" disableElevation sx={BTN_PRIMARY_SX} onClick={() => action.run()}>
+        {action.label}
+      </Button>
+    </Box>
+  );
+}
+
 interface StepRowProps {
   step: SetupStep;
   actions: StepActions;
@@ -153,37 +198,21 @@ function WarningRow({ text }: { text: string }) {
 function StepRow({ step, actions }: StepRowProps) {
   const action = step.action ? actions?.[step.action] : undefined;
   if (step.tone === 'warning') return <WarningRow text={step.text ?? ''} />;
+  // An action-only step IS the panel's action bar — see `SectionCard`.
+  if (action && !step.text) return <ConfirmBar action={action} />;
+  // A bordered row with the work on the left and the way to do it on the
+  // right, so a step reads as a thing to tick off rather than as a paragraph.
+  // The instructions on this screen are a CHECKLIST — each one is a piece of
+  // work the owner does somewhere else and comes back from.
   return (
-    <Stack spacing={1}>
-      {step.text ? (
-        <Typography variant="body2">
-          {richText(step.text)}{' '}
-          {step.link ? (
-            <Link href={step.link.url} target="_blank" rel="noreferrer">
-              {step.link.label}
-            </Link>
-          ) : null}
-        </Typography>
-      ) : null}
-      {step.button ? (
-        <Box>
-          <Button
-            variant="outlined"
-            size="small"
-            href={step.button.url}
-            target="_blank"
-            rel="noreferrer"
-            sx={BUTTON_SX}
-            // The mark is the promise: this leaves the store and opens the
-            // provider's site. A button that reads the same as the in-page ones
-            // and then navigates away is a small betrayal, and here it lands on
-            // a screen that can CHANGE the tag.
-            endIcon={<Box component="span" aria-hidden sx={{ fontSize: '0.9em' }}>↗</Box>}
-          >
-            {step.button.label}
-          </Button>
-        </Box>
-      ) : null}
+    <Stack
+      direction="row"
+      gap="12px"
+      alignItems="flex-start"
+      sx={{ border: `1px solid ${T.line}`, borderRadius: '9px', px: '14px', py: '12px' }}
+    >
+      <Stack spacing={1} sx={{ flex: 1, minWidth: 0 }}>
+        <StepText text={step.text} link={step.link} />
       {action ? (
         <Box>
           <Button variant="contained" size="small" sx={BUTTON_SX} onClick={() => void action.run()}>
@@ -191,17 +220,88 @@ function StepRow({ step, actions }: StepRowProps) {
           </Button>
         </Box>
       ) : null}
-      {step.copy ? (
-        <CopyField
-          label={step.copy.label}
-          text={step.copy.text}
-          collapsible={step.copy.collapsible}
-        />
+        {step.copy ? (
+          <CopyField
+            label={step.copy.label}
+            text={step.copy.text}
+            collapsible={step.copy.collapsible}
+          />
+        ) : null}
+      </Stack>
+      {step.button ? (
+        <Button
+          size="small"
+          href={step.button.url}
+          target="_blank"
+          rel="noreferrer"
+          sx={{ ...BTN_SECONDARY_SX, px: '12px', py: '7px', fontSize: '12px', flexShrink: 0 }}
+          // The mark is the promise: this leaves the store and opens the
+          // provider's site. A button that reads the same as the in-page ones
+          // and then navigates away is a small betrayal, and here it lands on
+          // a screen that can CHANGE where the money goes.
+          endIcon={
+            <Box component="span" aria-hidden sx={{ fontSize: '0.9em' }}>
+              ↗
+            </Box>
+          }
+        >
+          {step.button.label}
+        </Button>
       ) : null}
     </Stack>
   );
 }
 
+/**
+ * The numbered dot: 24px, filled once the store is ON or PAST the step.
+ *
+ * MUI's own icon is a 24px circle with the number inside and the same fill for
+ * active and completed, which is nearly the prototype — the differences are the
+ * exact greys and the ✓ on a finished step, and on a screen whose whole job is
+ * "where am I" those are the two things that carry the answer.
+ */
+function StageIcon({ active, completed, icon }: StepIconProps) {
+  const filled = active || completed;
+  return (
+    <Box
+      sx={{
+        width: 24,
+        height: 24,
+        borderRadius: '50%',
+        background: filled ? T.brand : '#d9dbe1',
+        color: '#fff',
+        fontSize: '12px',
+        fontWeight: 700,
+        display: 'grid',
+        placeItems: 'center',
+      }}
+    >
+      {completed ? '✓' : icon}
+    </Box>
+  );
+}
+
+/** A 2px rule that turns brand-coloured behind the steps already passed. */
+const StageConnector = styled(StepConnector)({
+  top: 11,
+  [`& .${stepConnectorClasses.line}`]: { borderTopWidth: 2, borderColor: T.line },
+  [`&.${stepConnectorClasses.active} .${stepConnectorClasses.line}`]: { borderColor: T.brandLine },
+  [`&.${stepConnectorClasses.completed} .${stepConnectorClasses.line}`]: {
+    borderColor: T.brandLine,
+  },
+});
+
+const STAGE_LABEL_SX = {
+  '& .MuiStepLabel-label': {
+    fontSize: '12px',
+    color: T.ink3,
+    lineHeight: 1.25,
+    mt: '7px !important',
+    '&.Mui-active': { color: T.ink, fontWeight: 650 },
+    '&.Mui-completed': { color: T.ink3, fontWeight: 400 },
+  },
+} as const;
+
 export function ProviderSetupGuide({
   guide,
   activeStage = 0,
@@ -210,11 +310,18 @@ export function ProviderSetupGuide({
   sectionFooter,
 }: ProviderSetupGuideProps) {
   return (
-    <Stack spacing={3} data-testid="payments-setup-guide">
-      <Stepper activeStep={activeStage} alternativeLabel>
-        {guide.stages.map((stage) => (
-          <Step key={stage.id}>
-            <StepLabel>{stage.label}</StepLabel>
+    <Stack spacing={0} data-testid="payments-setup-guide">
+      <Stepper
+        activeStep={activeStage}
+        alternativeLabel
+        connector={<StageConnector />}
+        sx={{ px: '20px', pt: '6px', pb: '18px' }}
+      >
+        {guide.stages.map((stage, index) => (
+          <Step key={stage.id} completed={index < activeStage}>
+            <StepLabel slots={{ stepIcon: StageIcon }} sx={STAGE_LABEL_SX}>
+              {stage.label}
+            </StepLabel>
           </Step>
         ))}
       </Stepper>
@@ -235,29 +342,42 @@ function SectionCard({
   actions: StepActions;
   footer?: ReactNode;
 }) {
+  // The step whose completion only the OWNER can report is not a row among the
+  // instructions — it is what this panel is FOR. It moves to the action bar, so
+  // the control the owner is working toward is the last thing in the block and
+  // stays on screen while they read the steps above it.
+  const asks = section.steps.filter((step) => step.action !== undefined);
+  const reads = section.steps.filter((step) => step.action === undefined);
+
   return (
-    <Paper
-      variant="outlined"
-      sx={{ p: 2 }}
+    <Box
+      sx={PANEL_SX}
       // Which section is showing is now a FACT about the store's progress, not
       // a constant, so it needs to be assertable by id rather than by matching
       // the prose inside it.
       data-testid={`payments-setup-section-${section.id}`}
     >
-      <Stack spacing={2}>
-        <Typography variant="subtitle1" fontWeight="bold">
+      <Box sx={{ px: '18px', pt: '15px' }}>
+        <Typography sx={{ fontSize: '14.5px', fontWeight: 700, color: T.ink }}>
           {section.title}
         </Typography>
         {section.intro ? (
-          <Typography variant="body2" color="text.secondary">
+          <Typography sx={{ fontSize: '12.5px', color: T.ink3, mt: '5px', lineHeight: 1.5 }}>
             {richText(section.intro)}
           </Typography>
         ) : null}
-        {section.steps.map((step, index) => (
-          <StepRow key={index} step={step} actions={actions} />
-        ))}
-        {footer}
-      </Stack>
-    </Paper>
+      </Box>
+      <Box sx={{ px: '18px', pt: '14px', pb: '18px' }}>
+        <Stack spacing={1.5}>
+          {reads.map((step, index) => (
+            <StepRow key={index} step={step} actions={actions} />
+          ))}
+          {footer}
+        </Stack>
+      </Box>
+      {asks.map((step, index) => (
+        <StepRow key={`ask-${index}`} step={step} actions={actions} />
+      ))}
+    </Box>
   );
 }

package/src/components/ProviderStatusBar.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { Box, Chip, FormControlLabel, Stack, Switch, Tooltip, Typography } from '@mui/material';
+import { Box, Stack, Switch, Tooltip, Typography } from '@mui/material';
 
 import type { MaskedProviderConfig, ProviderDescriptor } from '@12-apps/payments-backend';
 
 import { isConnected } from './connection-state';
+import { T } from './panel-tokens';
 
 /**
  * The provider's headline: what state it is in, and the switch that decides
@@ -124,6 +125,36 @@ function toggleGate(
   };
 }
 
+/**
+ * The three sentences the header can be saying, chosen once.
+ *
+ * Proven-but-off is its OWN state. "Não está recebendo" is true of a store that
+ * never finished setup AND of one that finished and paused, and those are
+ * opposite situations: the first is a step outstanding, the second a decision
+ * the owner made and can undo in one click.
+ */
+function headline(io: { enabled: boolean; paused: boolean; lockedOff: boolean; hint: string }) {
+  if (io.enabled) {
+    return {
+      state: 'Recebendo vendas',
+      sub: 'Sua loja está recebendo por este provedor.',
+      tone: T.ok,
+    };
+  }
+  if (io.paused) {
+    return {
+      state: 'Pausado',
+      sub: 'Conexão pronta e pausada por você — nenhum pedido novo é cobrado aqui.',
+      tone: T.warn,
+    };
+  }
+  return {
+    state: 'Ainda não está recebendo',
+    sub: io.lockedOff ? io.hint : 'Tudo pronto — ligue a chave para começar a receber.',
+    tone: T.ink3,
+  };
+}
+
 /**
  * Status chip + the "recebendo vendas" switch, hoisted OUT of the credential
  * form.
@@ -142,6 +173,52 @@ function toggleGate(
  * you hover it. The reason is printed underneath instead of hidden in a
  * tooltip, since the owner who most needs it is the one who cannot click.
  */
+/**
+ * The provider's name and its status chip, side by side.
+ *
+ * The name is a REAL heading, not a div sized to look like one: it is what this
+ * screen is about, and it is how a screen reader — and the harness — identifies
+ * the page it landed on. The restyle set the size by hand and took the element
+ * with it, which no unit test could see and the harness caught at once.
+ */
+function ProviderName({
+  displayName,
+  label,
+  proven,
+}: {
+  displayName: string;
+  label: string;
+  proven: boolean;
+}) {
+  return (
+    <Stack direction="row" alignItems="center" gap="9px">
+      <Typography
+        component="h2"
+        sx={{ m: 0, fontSize: '19px', fontWeight: 700, letterSpacing: '-.01em', color: T.ink }}
+      >
+        {displayName}
+      </Typography>
+      <Box
+        component="span"
+        data-testid="payments-status"
+        sx={{
+          fontSize: '10px',
+          fontWeight: 800,
+          letterSpacing: '.06em',
+          textTransform: 'uppercase',
+          borderRadius: '5px',
+          px: '7px',
+          py: '3px',
+          background: proven ? T.okSoft : '#f0f1f4',
+          color: proven ? T.ok : T.ink3,
+        }}
+      >
+        {label}
+      </Box>
+    </Stack>
+  );
+}
+
 export function ProviderStatusBar({
   descriptor,
   config,
@@ -157,37 +234,40 @@ export function ProviderStatusBar({
   const { lockedOff, hint } = toggleGate(descriptor, config, enabled);
   const badge = statusBadge(config, descriptor);
 
+  const proven = Boolean(config?.chargeVerifiedAt);
+  const paused = proven && !enabled;
+  const { state, sub, tone } = headline({ enabled, paused, lockedOff, hint });
+
   return (
-    <Stack spacing={0.5}>
-      <Stack direction="row" spacing={1} alignItems="center">
-        <Typography variant="h6">{descriptor.displayName}</Typography>
-        <Chip size="small" data-testid="payments-status" label={badge.label} color={badge.color} />
-        {/* The switch belongs at the far edge: it is the one control here that
-            changes what buyers experience, and crowding it against the status
-            chip made the two read as one compound widget. */}
-        <Box sx={{ flexGrow: 1 }} />
+    <Stack direction="row" alignItems="flex-start" gap="14px" flexWrap="wrap">
+      <Box>
+        <ProviderName displayName={descriptor.displayName} label={badge.label} proven={proven} />
+        <Typography
+          sx={{ fontSize: '12.5px', color: T.ink3, mt: '5px', maxWidth: '52ch', lineHeight: 1.5 }}
+          data-testid="payments-enable-hint"
+        >
+          {sub}
+        </Typography>
+      </Box>
+      {/* The switch belongs at the far edge: it is the one control here that
+          changes what buyers experience, and crowding it against the status
+          chip made the two read as one compound widget. */}
+      <Stack direction="row" alignItems="center" gap="10px" sx={{ ml: 'auto' }}>
         <Tooltip title={hint}>
           {/* A disabled control fires no events, so the tooltip needs a live wrapper. */}
           <span>
-            <FormControlLabel
-              control={
-                <Switch
-                  data-testid="payments-enabled-toggle"
-                  checked={enabled}
-                  disabled={busy || lockedOff}
-                  onChange={(_, next) => onToggle(next)}
-                />
-              }
-              label={enabled ? 'Recebendo vendas' : 'Não está recebendo'}
+            <Switch
+              data-testid="payments-enabled-toggle"
+              checked={enabled}
+              disabled={busy || lockedOff}
+              onChange={(_, next) => onToggle(next)}
             />
           </span>
         </Tooltip>
-      </Stack>
-      {lockedOff ? (
-        <Typography variant="caption" color="text.secondary" data-testid="payments-enable-hint">
-          {hint}
+        <Typography sx={{ fontSize: '12.5px', fontWeight: tone === T.ink3 ? 400 : 600, color: tone }}>
+          {state}
         </Typography>
-      ) : null}
+      </Stack>
     </Stack>
   );
 }

package/src/components/checkout/checkout-flow.tsx

@@ -5,7 +5,7 @@ import { buyerFieldsFor } from "./buyer-fields";
 import { DadosStep, EmptyCart, PaymentStep } from "./checkout-steps";
 import { ArrowBackIcon } from "./icons";
 import { PaymentStatus } from "./payment-status";
-import type { BuyerInfo, CheckoutProviderConfig, ComandaCheckout } from "./types";
+import type { BuyerInfo, CheckoutProviderConfig, SettlementCheckout } from "./types";
 import { CheckoutComponentsProvider, useCheckoutComponents, type CheckoutComponents } from "./ui";
 import { useCheckoutController, type CheckoutHostPorts } from "./use-checkout-controller";
 
@@ -17,7 +17,7 @@ const STEPPER_STEPS = [
 
 /** What the flow reads off the host's cart — display facts, never money math. */
 export interface CheckoutCartView {
-  /** Nothing to check out (cart mode only; a comanda settlement ignores it). */
+  /** Nothing to check out (cart mode only; a settlement settlement ignores it). */
   empty: boolean;
   totalLabel: string;
   totalItems: number;
@@ -30,7 +30,7 @@ export interface CheckoutCartView {
  * three-step flow — Dados → Pagamento → Confirmação — with the payment step
  * speaking the store's ACTIVE provider protocol (PagBank PIX + card, Stone
  * card, InfinitePay hosted redirect) against the host-mounted `/api/checkout*`
- * surface. Cart, catalog, comanda and order CREATION stay in the host and
+ * surface. Cart, catalog, settlement and order CREATION stay in the host and
  * arrive through {@link CheckoutHostPorts} + {@link CheckoutCartView};
  * pixels render through the slot contract (`components`, see `ui.tsx`).
  */
@@ -38,8 +38,8 @@ export interface CheckoutFlowProps extends CheckoutHostPorts {
   /** The host's cart, reduced to what the flow displays. */
   cart: CheckoutCartView;
   defaultBuyer?: BuyerInfo;
-  /** Present ⇒ this checkout settles a comanda, not the cart (FUT-comandas). */
-  comanda?: ComandaCheckout | null;
+  /** Present ⇒ this checkout settles an open balance, not the cart . */
+  settlement?: SettlementCheckout | null;
   /** The buyer has a CPF saved ⇒ open on Pagamento, skipping Dados (FUT-465). */
   taxIdOnFile?: boolean;
   /** The store's active payment protocol (FUT-697); absent while loading. */
@@ -51,7 +51,7 @@ export interface CheckoutFlowProps extends CheckoutHostPorts {
    * session's `validationURL` for an Apple merchant session, SERVER-SIDE.
    * Optional — without it the Apple Pay sheet cannot start, and the card form
    * remains the way to pay.
-   */
+ */
   validateApplePayMerchant?: (validationURL: string) => Promise<unknown>;
   /** Host content shown on the paid confirmation (the storefront's install invite). */
   confirmationExtra?: ReactNode;
@@ -59,11 +59,11 @@ export interface CheckoutFlowProps extends CheckoutHostPorts {
   components?: Partial<CheckoutComponents>;
 }
 
-/** The pay-bar total override when settling a comanda (else the cart's own totals). */
-function comandaTotalOverride(
-  comanda: ComandaCheckout | null | undefined,
+/** The pay-bar total override when settling a settlement (else the cart's own totals). */
+function settlementTotalOverride(
+  settlement: SettlementCheckout | null | undefined,
 ): { label: string; items: number } | undefined {
-  return comanda ? { label: comanda.totalLabel, items: comanda.totalItems } : undefined;
+  return settlement ? { label: settlement.totalLabel, items: settlement.totalItems } : undefined;
 }
 
 /**
@@ -78,13 +78,13 @@ function confirmationFacts(
   return { orderId: order?.orderId, buyerEmail: buyer.email };
 }
 
-/** The confirmation total: the created order's, else the comanda scope's, else the cart's. */
+/** The confirmation total: the created order's, else the settlement scope's, else the cart's. */
 function statusTotalLabel(
   order: { totalLabel: string } | null,
-  comanda: ComandaCheckout | null | undefined,
+  settlement: SettlementCheckout | null | undefined,
   cart: { totalLabel: string },
 ): string {
-  return order?.totalLabel ?? comanda?.totalLabel ?? cart.totalLabel;
+  return order?.totalLabel ?? settlement?.totalLabel ?? cart.totalLabel;
 }
 
 /**
@@ -125,7 +125,7 @@ function ProgressHeader({ step, completed }: { step: string; completed: Set<stri
  * card public key are loaded lazily by the card path (order-scoped REST).
  */
 function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Element {
-  const { cart, defaultBuyer, comanda, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, ...ports } = props;
+  const { cart, defaultBuyer, settlement, taxIdOnFile = false, providerConfig, tenantSlug, confirmationExtra, validateApplePayMerchant, ...ports } = props;
   // Resolved for NO method on purpose (FUT-595): the Dados step opens before
   // the picker, and the form is filled once — so it asks for the union of what
   // any chain member may need rather than re-opening after the choice. A chain
@@ -133,14 +133,14 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
   const buyerFields = useMemo(() => buyerFieldsFor(providerConfig?.chain, null), [providerConfig]);
   const c = useCheckoutController(ports, defaultBuyer, taxIdOnFile, buyerFields);
 
-  // A comanda settlement pays already-sent kitchen items — the cart is
+  // A settlement settlement pays already-sent kitchen items — the cart is
   // legitimately empty here, so the empty-cart guard only applies to cart mode.
   //
   // The guard cannot key on the Dados step any more: skipping it (FUT-465) makes
   // Pagamento the first screen, so an empty cart would otherwise reach the
   // method picker. It holds until an order exists — once one does, its lines are
   // snapshotted server-side and the cart no longer speaks for it.
-  if (!comanda && cart.empty && !c.order && c.step !== "status") {
+  if (!settlement && cart.empty && !c.order && c.step !== "status") {
     return <EmptyCart onBack={c.goToMenu} />;
   }
 
@@ -162,7 +162,7 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
           cartTotals={cart}
           buyerFields={buyerFields}
           discountLines={cart.discountLines}
-          totalOverride={comandaTotalOverride(comanda)}
+          totalOverride={settlementTotalOverride(settlement)}
         />
       ) : null}
 
@@ -191,7 +191,7 @@ function CheckoutFlowBody(props: Omit<CheckoutFlowProps, "components">): JSX.Ele
       {c.step === "status" ? (
         <PaymentStatus
           status={c.finalStatus}
-          totalLabel={statusTotalLabel(c.order, comanda, cart)}
+          totalLabel={statusTotalLabel(c.order, settlement, cart)}
           {...confirmationFacts(c.order, c.buyer)}
           onRetry={c.retry}
           onRegenerate={() => { c.setStep("payment"); void c.startPayment("PIX"); }}

package/src/components/checkout/checkout-steps.tsx

@@ -113,8 +113,8 @@ export function EmptyCart({ onBack }: { onBack: () => void }): JSX.Element {
 }
 
 /**
- * The totals shown on the pay bar: the comanda scope's when settling a comanda
- * (FUT-comandas), otherwise the cart's own — both supplied by the host, which
+ * The totals shown on the pay bar: the settled balance's when settling a settlement
+ * one, otherwise the cart's own — both supplied by the host, which
  * is the only side that knows either.
  */
 function displayTotals(
@@ -184,9 +184,9 @@ export function DadosStep({
    * (FUT-246) — RENDERED BY THE HOST from its cart (the storefront passes its
    * cart footer's money block), never re-implemented here, so the two surfaces
    * can never word the same discount differently.
-   */
+ */
   discountLines?: ReactNode;
-  /** Comanda settlement (FUT-comandas): totals come from the comanda, not the cart. */
+  /** Settling an open balance: totals come from the settlement, not the cart. */
   totalOverride?: { label: string; items: number };
 }): JSX.Element {
   const { Checkbox } = useCheckoutComponents();
@@ -215,7 +215,7 @@ export function DadosStep({
         createError={createError}
         onContinue={onContinue}
       >
-        {/* Suppressed while settling a comanda: those totals come from the
+        {/* Suppressed while settling a balance: those totals come from the
             frozen ticket, not the cart. */}
         {totalOverride ? null : discountLines}
       </DadosPayBar>
@@ -275,21 +275,21 @@ interface PaymentStepProps {
   /**
    * The refusal's machine code (FUT-563). An UNRESOLVED charge is not a failed
    * one — the panel below must not offer to raise a second.
-   */
+ */
   errorCode?: string | null;
   onGenerate: (method: PaymentMethod) => void;
   onUseEmail: (email: string) => void;
   /**
    * Present ⇒ the buyer reached this step without a Dados step (FUT-465), so
    * the payer block states who is being charged and reopens Dados to change it.
-   */
+ */
   onEditBuyer?: () => void;
   /**
    * The store's active payment protocol (`GET /api/checkout/config`, FUT-697).
    * `null` while loading or on a transient fetch failure — methods then render
    * as before and the card path degrades to the PagBank per-order key refresh,
    * WITHOUT mock permission (fail-open for the UI, fail-closed for the money).
-   */
+ */
   providerConfig?: CheckoutProviderConfig | null;
   /** Scopes the saved-card list to the store being paid (host routing owns it). */
   tenantSlug?: string;