@12-apps/payments-frontend 3.49.0 → 3.49.2

package/package.json

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

@@ -380,7 +380,7 @@ export function ListFace(props: ListFaceProps): JSX.Element {
   return (
     <Box data-testid="payment-list-step" sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
       {shown ? (
-        <TopAndRows rowsShown={rowsShown}>
+        <TopAndRows rowsShown={rowsShown} drawn={state.settled}>
           <ChoiceList copy={list.copy} state={state} door={list.door ?? []} buyer={c.buyer} onBuyerChange={c.setBuyer} provider={props.provider} failure={failure} locked={facts.locked} covered={coveredByHost(list)} top={top} />
         </TopAndRows>
       ) : null}

package/src/components/checkout/list/list-top.tsx

@@ -141,13 +141,23 @@ function RowsShown({ into }: { into: { current: boolean } }): null {
  * The top and the rows under ONE boundary (FUT-3711): a top drawn with the
  * first rows lands with them, so its chunk never pushes a row down. Once the
  * rows have committed, `rowsShown` says so, and a top that appears later
- * suspends on its own instead (`TopWithRetry`).
+ * suspends on its own instead (`TopWithRetry`). `drawn` is false while the
+ * list holds its rows back for the saved cards (FUT-3849): the placeholder
+ * committing is not the rows committing.
  */
-export function TopAndRows({ rowsShown, children }: { rowsShown: { current: boolean }; children: ReactNode }): JSX.Element {
+export function TopAndRows({
+  rowsShown,
+  drawn,
+  children,
+}: {
+  rowsShown: { current: boolean };
+  drawn: boolean;
+  children: ReactNode;
+}): JSX.Element {
   return (
     <Suspense fallback={<TopLoading />}>
       {children}
-      <RowsShown into={rowsShown} />
+      {drawn ? <RowsShown into={rowsShown} /> : null}
     </Suspense>
   );
 }

package/src/components/checkout/payment-status-parts.tsx

@@ -198,17 +198,36 @@ export function OutcomeHero({
   );
 }
 
-/** One label/value row of the paid receipt block. */
-function Fact({ label, value, testId }: { label: string; value: string; testId?: string }): JSX.Element {
+/**
+ * Under this many pixels of the receipt's OWN width, a fact whose value is a
+ * long unbroken word (the e-mail) stands under its label instead of beside it
+ * (FUT-3693): side by side at 390px the e-mail broke mid-word and squeezed
+ * "Comprovante enviado para" into three lines. The amount and the order
+ * reference are short and keep their row. A container measures its content
+ * box: a desktop receipt is ~450px inside its padding, so the line sits below
+ * that and only a phone stacks.
+ */
+export const RECEIPT_STACK_BELOW_PX = 440;
+const STACKED = `@container receipt (max-width: ${RECEIPT_STACK_BELOW_PX - 0.05}px)`;
+
+/** One label/value row of the paid receipt block; `long` lets it stack under {@link RECEIPT_STACK_BELOW_PX}. */
+function Fact({ label, value, testId, long = false }: { label: string; value: string; testId?: string; long?: boolean }): JSX.Element {
   const { Text } = useCheckoutComponents();
   return (
-    <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2 }}>
-      <Text variant="body" size="sm" as="span" style={{ opacity: 0.75 }}>
-        {label}
-      </Text>
+    <Box
+      data-testid={testId ? `${testId}-row` : undefined}
+      sx={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 2,
+        ...(long ? { [STACKED]: { flexDirection: "column", alignItems: "flex-start", gap: 0.25 } } : {}) }}
+    >
+      {/* A long value never squeezes its label: the label is the shorter, and the one read first. */}
+      <Box component="span" sx={long ? { flexShrink: 0 } : undefined}>
+        <Text variant="body" size="sm" as="span" style={{ opacity: 0.75 }}>
+          {label}
+        </Text>
+      </Box>
       {/* A long e-mail breaks rather than pushing the receipt off a 320px
           phone: an address has no spaces to wrap at. */}
-      <Box sx={{ minWidth: 0, textAlign: "right", overflowWrap: "anywhere" }}>
+      <Box sx={{ minWidth: 0, maxWidth: "100%", textAlign: "right", overflowWrap: "anywhere", ...(long ? { [STACKED]: { textAlign: "left" } } : {}) }}>
         <Text
           variant="body"
           size="sm"
@@ -243,6 +262,8 @@ export function PaidFacts({
     <Box
       data-testid="payment-receipt"
       sx={{
+        containerType: "inline-size",
+        containerName: "receipt",
         display: "flex",
         flexDirection: "column",
         gap: 1,
@@ -255,7 +276,7 @@ export function PaidFacts({
       {orderId ? (
         <Fact label={copy.referenceLabel} value={`#${orderReference(orderId)}`} testId="payment-reference" />
       ) : null}
-      {buyerEmail ? <Fact label={copy.receiptEmailLabel} value={buyerEmail} /> : null}
+      {buyerEmail ? <Fact label={copy.receiptEmailLabel} value={buyerEmail} testId="payment-receipt-email" long /> : null}
     </Box>
   );
 }