@12-apps/payments-frontend 3.49.0 → 3.49.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.49.0",
+  "version": "3.49.1",
   "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>
   );
 }