@12-apps/payments-frontend 3.34.4 → 3.36.0

package/src/components/checkout/screens-pt-BR.ts

@@ -43,6 +43,7 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     copyPasteTab: 'Copia e cola',
     qrTab: 'QR code',
     qrHeading: 'Pelo celular',
+    otherDeviceHeading: 'Ou pague de outro aparelho',
     copyPasteHeading: 'Pix Copia e Cola',
     or: 'ou',
     qrInstructions: 'Abra o app do seu banco no celular, escolha **Pix › Ler QR code** e aponte para a tela.',
@@ -88,6 +89,16 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     payingWithSavedDetails: 'Pagando com os seus dados salvos',
     changeAction: 'Alterar',
   },
+  layout: {
+    payHeading: 'Como você quer pagar?',
+    summaryTitle: 'Resumo do pedido',
+    total: 'Total',
+    totalDueCaption: (items) => `Total a pagar · ${items} ${items === 1 ? 'item' : 'itens'}`,
+    lineLabel: (quantity, name) => `${quantity}× ${name}`,
+    taxIdOnFileShort: 'CPF ✓',
+    changeAddress: 'Alterar endereço',
+    stepProgress: (step, steps, label) => `Etapa ${step} de ${steps} · ${label}`,
+  },
   error: {
     confirming: 'Estamos confirmando seu pagamento',
     cannotContinue: 'Não foi possível continuar',
@@ -129,6 +140,12 @@ export const PT_BR_CHECKOUT_SCREENS_COPY: CheckoutScreensCopy = {
     invalidResponse: 'Resposta inválida do servidor.',
     offline: 'Não foi possível conectar. Verifique sua conexão e tente novamente.',
   },
+  cartChanged: {
+    heading: 'Seu carrinho mudou',
+    support: 'O pagamento foi preparado para o carrinho anterior. Atualize para pagar o valor certo.',
+    refreshAction: 'Atualizar pagamento',
+    refreshFailed: 'Não foi possível atualizar o pagamento',
+  },
   validation: {
     taxIdInvalid: 'CPF inválido.',
     nameRequired: 'Informe seu nome.',

package/src/components/checkout/start-payment.ts

@@ -124,28 +124,57 @@ export function useStartPayment(input: {
         failure.fail(result.error);
         return;
       }
-      // NOTHING LEFT TO PAY — see the docblock. Parked first for the same
-      // reason every other raised order is: the confirmation this is about to
-      // show has to survive a tab the phone discards on the way to it.
-      if (result.data.status !== "AWAITING_PAYMENT") {
-        rememberHostedOrder(result.data, { tenantSlug, basket: parkedBasket(basket) });
-        setOrder(result.data);
-        setFinalStatus(result.data.status);
-        setStep("status");
-        return;
-      }
-      if (handOverToProvider(result.data, navigate, tenantSlug, basket)) return;
-      // PARKED EVEN THOUGH NOBODY IS LEAVING (FUT-1140). A low-memory phone
-      // discards this tab while the shopper is in their bank app, and the SPA
-      // that comes back has never heard of the order it raised — so the buyer
-      // meets an empty cart and a retry button instead of the confirmation for
-      // the payment they just made.
-      rememberHostedOrder(result.data, { tenantSlug, basket: parkedBasket(basket) });
-      setOrder(result.data);
+      routeRaisedOrder(result.data, { navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep });
     },
     [
       buyer, saveProfile, createOrder, failure, navigate, tenantSlug, basket,
       setCreating, setDecline, setOrder, setFinalStatus, setStep,
     ],
   );
-}
+}
+
+/**
+ * What becomes of an order the host just raised — or re-priced (FUT-1139): the
+ * three outcomes of {@link useStartPayment} after its refusal branch, shared so
+ * a refresh routes a PAID or handed-off answer exactly as a raise does.
+ */
+export function routeRaisedOrder(
+  order: CheckoutOrder,
+  ctx: {
+    navigate: CheckoutNavigate;
+    tenantSlug: string | undefined;
+    basket: CheckoutBasketIdentity | undefined;
+    setOrder: Dispatch<SetStateAction<CheckoutOrder | null>>;
+    setFinalStatus: Dispatch<SetStateAction<OrderStatus | null>>;
+    setStep: Dispatch<SetStateAction<Step>>;
+  },
+): void {
+  const { navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep } = ctx;
+  // NOTHING LEFT TO PAY — see the docblock. Parked first for the same
+  // reason every other raised order is: the confirmation this is about to
+  // show has to survive a tab the phone discards on the way to it.
+  if (order.status !== "AWAITING_PAYMENT") {
+    rememberHostedOrder(order, { tenantSlug, basket: parkedBasket(basket) });
+    setOrder(order);
+    setFinalStatus(order.status);
+    setStep("status");
+    return;
+  }
+  if (handOverToProvider(order, navigate, tenantSlug, basket)) return;
+  // PARKED EVEN THOUGH NOBODY IS LEAVING (FUT-1140). A low-memory phone
+  // discards this tab while the shopper is in their bank app, and the SPA
+  // that comes back has never heard of the order it raised — so the buyer
+  // meets an empty cart and a retry button instead of the confirmation for
+  // the payment they just made.
+  rememberHostedOrder(order, { tenantSlug, basket: parkedBasket(basket) });
+  setOrder(order);
+}
+
+/** {@link routeRaisedOrder}, bound to one checkout and stable while its inputs are. */
+export function useRaisedOrderRoute(ctx: Parameters<typeof routeRaisedOrder>[1]): (order: CheckoutOrder) => void {
+  const { navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep } = ctx;
+  return useCallback(
+    (order: CheckoutOrder) => routeRaisedOrder(order, { navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep }),
+    [navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep],
+  );
+}

package/src/components/checkout/use-checkout-controller.ts

@@ -11,7 +11,8 @@ import {
   useSettledPort,
   type Step,
 } from "./checkout-actions";
-import { useStartPayment } from "./start-payment";
+import { useOrderRefresh } from "./cart-changed";
+import { useRaisedOrderRoute, useStartPayment } from "./start-payment";
 import { useConfirmationWait } from "./confirmation-wait";
 import { useCheckoutCopy } from "./copy-context";
 
@@ -144,6 +145,9 @@ export function useCheckoutController(
   const { payWithEmail, handleResolved } = useResolutionActions({
     buyer, method, startPayment, setBuyerState, setDecline, setFinalStatus, setStep,
   });
+  // Re-price the order in place when the cart moved under it (FUT-1139), routed as a raise is.
+  const route = useRaisedOrderRoute({ navigate, tenantSlug, basket, setOrder, setFinalStatus, setStep });
+  const refresh = useOrderRefresh({ order, buyer, saveProfile, createOrder, route });
   const retry = useRetryAction({
     decline, order, clearError, setOrder, setDecline, setFinalStatus, setStep, setFreshInstrument,
   });
@@ -166,6 +170,6 @@ export function useCheckoutController(
     ...resumeSurface(resume, confirming),
     createError: failure.message, errorField: failure.field, errorCode: failure.code,
     goToMenu: onExitToMenu, back, editBuyer,
-    goToPayment, startPayment, payWithEmail, handleResolved, retry, completed,
+    goToPayment, startPayment, refresh, payWithEmail, handleResolved, retry, completed,
   };
 }

package/src/index.ts

@@ -60,6 +60,7 @@ export {
   type CheckoutFlowProps,
 } from './components/checkout/checkout-flow';
 export type { BackActionEmphasis } from './components/checkout/payment-status-parts';
+export type { CheckoutDeliverySummary, CheckoutSummaryLine } from './components/checkout/payment-summary';
 
 // ---------------------------------------------------------------------------
 // The MOUNTED buyer checkout (FUT-741) and the checkout PIPELINE (FUT-1240).
@@ -118,6 +119,7 @@ export {
 // pack section by section types the section it is writing (FUT-760).
 export type {
   CardPaneCopy,
+  CartChangedCopy,
   CheckoutScreensCopy,
   CheckoutTransportCopy,
   CheckoutValidationCopy,
@@ -125,6 +127,7 @@ export type {
   MethodPickerCopy,
   PayerSummaryCopy,
   PaymentErrorCopy,
+  PaymentLayoutCopy,
   PixAfterCopyCopy,
   PixPaneCopy,
   SettlingCopy,