@12-apps/payments-frontend 3.44.0 → 3.45.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.44.0",
+  "version": "3.45.0",
   "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/list/choice-list.tsx

@@ -85,6 +85,12 @@ function OnlineOptionRow({ row, props }: { row: OnlineRow; props: RowProps }): J
 function DoorOptionRow({ option, props }: { option: CheckoutDoorOption; props: RowProps }): JSX.Element {
   const { choice } = props.state;
   const chosen = choice?.kind === "door" && choice.id === option.id;
+  const choose = (): void => {
+    if (!chosen) props.state.choose({ kind: "door", id: option.id });
+  };
+  // A function content gets the row's own controls (FUT-3715): a chip inside
+  // it can choose the row in the tap that answers it.
+  const content = typeof option.content === "function" ? option.content({ chosen, choose }) : option.content;
   return (
     <OptionRow
       name={props.name}
@@ -92,10 +98,11 @@ function DoorOptionRow({ option, props }: { option: CheckoutDoorOption; props: R
       chosen={chosen}
       label={option.label}
       hint={chosen && option.hideHintWhileChosen ? undefined : option.hint}
-      onChoose={() => props.state.choose({ kind: "door", id: option.id })}
+      onChoose={choose}
       testId={`list-door-${option.id}`}
+      open={option.showContentWhileIdle === true}
     >
-      {option.content}
+      {content}
     </OptionRow>
   );
 }

package/src/components/checkout/list/option-row.tsx

@@ -1,4 +1,4 @@
-import { Box, Radio } from "@mui/material";
+import { Box, Radio, type SxProps } from "@mui/material";
 import { alpha, type Theme } from "@mui/material/styles";
 import type { JSX, ReactNode } from "react";
 
@@ -35,6 +35,48 @@ const FIELDS_ON_SURFACE = {
   },
 } as const;
 
+/** The row's label and its muted hint, beside the radio. */
+function RowWords({ label, hint }: { label: string; hint?: string }): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
+      <Text variant="body" size="md" as="span">
+        {label}
+      </Text>
+      {hint ? (
+        <Text variant="body" size="sm" color="secondary" as="span">
+          {hint}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
+/** What opens inside a row, its fields standing on the surface. */
+function RowContent({ testId, children }: { testId: string; children: ReactNode }): JSX.Element {
+  return (
+    <Box data-testid={`${testId}-content`} sx={{ display: "flex", flexDirection: "column", gap: 1.25, pb: 1.5, ...FIELDS_ON_SURFACE }}>
+      {children}
+    </Box>
+  );
+}
+
+/** The row's frame: tinted and outlined while chosen, dimmed while disabled. */
+function rowFrameSx(chosen: boolean, disabled: boolean): SxProps<Theme> {
+  return {
+    border: "1px solid",
+    borderColor: chosen ? "primary.main" : "divider",
+    bgcolor: chosen ? chosenTint : "background.paper",
+    borderRadius: 2.5,
+    px: 1.5,
+    opacity: disabled ? 0.6 : 1,
+    // The keyboard's place in the group, drawn on the whole row (5.1 item 6)
+    // — for the row's own radio only: a field opened inside draws its own
+    // ring, and a second one around the row doubled it.
+    "&:has(> label input[type='radio']:focus-visible)": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
+  };
+}
+
 export function OptionRow({
   name,
   value,
@@ -44,6 +86,7 @@ export function OptionRow({
   hint,
   onChoose,
   testId,
+  open = false,
   children,
 }: {
   /** The group's name, shared by every row. */
@@ -55,26 +98,16 @@ export function OptionRow({
   hint?: string;
   onChoose: () => void;
   testId: string;
-  /** Rendered only while chosen. */
+  /** Render `children` while NOT chosen too (a door option's `showContentWhileIdle`). */
+  open?: boolean;
+  /** Rendered only while chosen, unless `open`. */
   children?: ReactNode;
 }): JSX.Element {
-  const { Text } = useCheckoutComponents();
   return (
     <Box
       data-testid={testId}
       data-chosen={chosen ? "true" : "false"}
-      sx={{
-        border: "1px solid",
-        borderColor: chosen ? "primary.main" : "divider",
-        bgcolor: chosen ? chosenTint : "background.paper",
-        borderRadius: 2.5,
-        px: 1.5,
-        opacity: disabled ? 0.6 : 1,
-        // The keyboard's place in the group, drawn on the whole row (5.1 item 6)
-        // — for the row's own radio only: a field opened inside draws its own
-        // ring, and a second one around the row doubled it.
-        "&:has(> label input[type='radio']:focus-visible)": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
-      }}
+      sx={rowFrameSx(chosen, disabled)}
     >
       <Box
         component="label"
@@ -94,23 +127,10 @@ export function OptionRow({
           sx={{ p: 0, flex: "none" }}
           inputProps={{ "data-testid": `${testId}-radio` } as Record<string, string>}
         />
-        <Box sx={{ display: "flex", flexDirection: "column", minWidth: 0, flex: 1 }}>
-          <Text variant="body" size="md" as="span">
-            {label}
-          </Text>
-          {hint ? (
-            <Text variant="body" size="sm" color="secondary" as="span">
-              {hint}
-            </Text>
-          ) : null}
-        </Box>
+        <RowWords label={label} hint={hint} />
       </Box>
       {/* Only a row with something to open draws the box for it — no empty band. */}
-      {chosen && children ? (
-        <Box data-testid={`${testId}-content`} sx={{ display: "flex", flexDirection: "column", gap: 1.25, pb: 1.5, ...FIELDS_ON_SURFACE }}>
-          {children}
-        </Box>
-      ) : null}
+      {(chosen || open) && children ? <RowContent testId={testId}>{children}</RowContent> : null}
     </Box>
   );
 }

package/src/components/checkout/list/types.ts

@@ -20,6 +20,22 @@
  */
 import type { ReactNode } from "react";
 
+/**
+ * What a door option's `content` function is handed (FUT-3715).
+ *
+ * `choose` is exactly what the row's radio does; calling it on the chosen row
+ * changes nothing. The list reports the choice through `onChoiceChange` as it
+ * does for the radio — from an effect, after the render — so a host that
+ * answers in the same tap keeps its answer across that render. The list never
+ * moves keyboard focus here: where focus goes is the host's call.
+ */
+export interface CheckoutDoorRowControls {
+  /** This option is the list's current choice. */
+  chosen: boolean;
+  /** Choose this option, as its radio would. */
+  choose: () => void;
+}
+
 /**
  * One of the host's ways to pay at the door — "Dinheiro", "Maquininha".
  *
@@ -41,10 +57,25 @@ export interface CheckoutDoorOption {
   hideHintWhileChosen?: boolean;
   /**
    * What opens INSIDE the row when it is chosen (the troco question, the
-   * tender chips, the brand lines). Rendered only while chosen, with no left
-   * indent: it starts where the row's own content starts.
+   * tender chips, the brand lines). Rendered only while chosen — unless
+   * `showContentWhileIdle` — with no left indent: it starts where the row's own
+   * content starts.
+   *
+   * As a function it is handed the row's own controls, so a control inside the
+   * content can choose the row in the same tap that answers it (the troco
+   * chips, FUT-3715). A plain node behaves exactly as before. The function is
+   * called during the row's render, not mounted as a component: keep it one
+   * shape for the option's life, and return a component of your own if the
+   * content needs hooks.
+   */
+  content?: ReactNode | ((row: CheckoutDoorRowControls) => ReactNode);
+  /**
+   * Render `content` while the option is NOT chosen too — for an option whose
+   * answers are themselves the way to choose it (FUT-3715). The unchosen row
+   * keeps its unchosen frame; the content keeps its box and place in both
+   * states, so choosing the row moves nothing.
    */
-  content?: ReactNode;
+  showContentWhileIdle?: boolean;
   /** The bar button's verb while this option is chosen — "Enviar pedido". */
   action: string;
   /** The amount beside the verb. Absent ⇒ the cart's own total. */

package/src/index.ts

@@ -56,7 +56,7 @@ export { PT_BR_CHECKOUT_PAYMENT_COPY } from './components/checkout-payment-pt-BR
 // ---------------------------------------------------------------------------
 export { CheckoutFlow, type CheckoutCartView, type CheckoutFlowProps } from './components/checkout/checkout-flow';
 // The Pagamento step as ONE list (FUT-3591/3592) — opt-in via `CheckoutFlowProps.paymentList`.
-export type { CheckoutDoorOption, CheckoutListChoice, CheckoutListHold, CheckoutOnlineChoice, CheckoutPaymentList, CheckoutPixBank, PaymentListCopy, PixBankCopy, PixBankId, PixBankName } from './components/checkout/list/types';
+export type { CheckoutDoorOption, CheckoutDoorRowControls, CheckoutListChoice, CheckoutListHold, CheckoutOnlineChoice, CheckoutPaymentList, CheckoutPixBank, PaymentListCopy, PixBankCopy, PixBankId, PixBankName } from './components/checkout/list/types';
 export { PT_BR_PAYMENT_LIST_COPY } from './components/checkout/list/pt-BR';
 export type { BackActionEmphasis } from './components/checkout/payment-status-parts';
 export type { CheckoutDeliverySummary, CheckoutSummaryLine } from './components/checkout/payment-summary';