@12-apps/payments-frontend 3.43.1 → 3.45.0

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,31 +98,24 @@ 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"
-        // 48 + the border = the prototype's 50px row, with or without a hint (L3).
-        sx={{ display: "flex", alignItems: "center", gap: 1.5, minHeight: (t) => t.spacing(6), py: 0, cursor: disabled ? "default" : "pointer" }}
+        // The prototype's `.opt` padding, 12px above and below the label and its
+        // hint (FUT-3685 review): a row with a hint is ~62px, and the hint never
+        // touches — or is clipped by — the row's border. 48px is the floor, for
+        // a row with no hint.
+        sx={{ display: "flex", alignItems: "center", gap: 1.5, minHeight: (t) => t.spacing(6), py: 1.5, cursor: disabled ? "default" : "pointer" }}
       >
         <Radio
           name={name}
@@ -91,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/payer-line.tsx

@@ -0,0 +1,39 @@
+import { Box } from "@mui/material";
+import type { JSX } from "react";
+
+import { useCheckoutComponents } from "../ui";
+
+import type { PaymentListCopy } from "./types";
+
+/**
+ * Who is paying, when the store already holds their CPF (FUT-465): "Pagando
+ * como … · CPF ✓ Alterar". "Alterar" reveals the CPF field at the top of
+ * Pagamento (FUT-3685, E2 → E1) — never a Dados step: the list has none
+ * (R9). Shown only while an online option is chosen and the CPF is not open.
+ */
+export function PayerLine({ copy, name, onChange }: {
+  copy: PaymentListCopy;
+  name: string;
+  onChange: () => void;
+}): JSX.Element {
+  const { Button, Text } = useCheckoutComponents();
+  return (
+    // Left-aligned, "Alterar" ~4px after "CPF ✓" and wrapping under it when
+    // the name is long; the link keeps a 40px target and a visible focus ring.
+    <Box data-testid="list-payer" sx={{ display: "flex", alignItems: "center", justifyContent: "flex-start", flexWrap: "wrap", columnGap: 0 }}>
+      <Text variant="body" size="sm" color="secondary" as="span">
+        {copy.payer(name)}
+      </Text>
+      <Box
+        sx={{
+          "& button": { textDecoration: "underline", minHeight: (t) => t.spacing(5), minWidth: 0, px: 0.5, py: 0 },
+          "& button:focus-visible": { outline: (t) => `${t.spacing(0.25)} solid ${t.palette.primary.main}`, outlineOffset: (t) => t.spacing(0.25) },
+        }}
+      >
+        <Button variant="text" color="primary" size="sm" onClick={onChange} dataTestId="list-payer-change">
+          {copy.payerChange}
+        </Button>
+      </Box>
+    </Box>
+  );
+}

package/src/components/checkout/list/payment-list-step.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useMemo, useState, type JSX } from "react";
+import { useCallback, useEffect, useMemo, useState, type JSX, type ReactNode } from "react";
 
 import type { CheckoutBasketIdentity } from "../basket";
 import { CartChangedBoundary } from "../cart-changed";
 import { displayTotals } from "../checkout-totals";
+import type { CheckoutSummaryLine } from "../payment-summary";
 import { usePaymentPixStage } from "../payment-step-layout";
 import { PixStageProvider } from "../pix-stage";
 import { PixView } from "../pix-view";
@@ -13,6 +14,7 @@ import type { useCheckoutController } from "../use-checkout-controller";
 import { PaymentListProvider } from "./context";
 import { ListBar, WaitingLine } from "./list-bar";
 import { ListFace } from "./list-face";
+import { ListLayout } from "./summary-column";
 import type { ListCapability } from "./use-capability";
 import type { ListCharge } from "./use-list-charge";
 import type { ListState } from "./use-list-state";
@@ -26,7 +28,15 @@ type Controller = ReturnType<typeof useCheckoutController>;
 interface PaymentListStepProps {
   c: Controller;
   list: CheckoutPaymentList;
-  cart: { totalLabel: string; totalItems: number; identity?: CheckoutBasketIdentity };
+  cart: {
+    totalLabel: string;
+    totalItems: number;
+    identity?: CheckoutBasketIdentity;
+    /** The cart's lines, for the "Resumo do pedido" column on a computer (L4). */
+    lines?: CheckoutSummaryLine[];
+    /** The host's fee and discount rows, for the same column. */
+    discountLines?: ReactNode;
+  };
   /** Settling a balance: its totals win, and its basket is no signal. */
   totalOverride?: { label: string; items: number };
   providerConfig: CheckoutProviderConfig | null | undefined;
@@ -38,6 +48,11 @@ interface PaymentListStepProps {
   /** The Dados step's consent sentence — the list asks it beside the details it asks. */
   consentLabel: string;
   pollIntervalMs?: number;
+  /**
+   * The host's Apple Pay merchant-validation port (FUT-472), server-side.
+   * Without it the list offers no Apple Pay: its session could only abort.
+   */
+  validateApplePayMerchant?: (validationURL: string) => Promise<unknown>;
 }
 
 /** The store's provider name, as its chain head published it — `null` when it did not. */
@@ -80,13 +95,29 @@ function usePreferMethod(c: Controller, choose: ListState["choose"]): (method: P
   );
 }
 
+/**
+ * "Alterar" on the payer line opens the CPF at the top (E2 → E1); "Manter o
+ * CPF salvo" closes it, putting back the CPF the buyer arrived with — a CPF
+ * typed in between is dropped, never sent.
+ */
+function useReveal(c: Controller, arrivedWith: BuyerInfo | undefined) {
+  const [revealed, setRevealed] = useState(false);
+  const { buyer, setBuyer } = c;
+  const onKeepSavedCpf = useCallback(() => {
+    setBuyer({ ...buyer, taxId: arrivedWith?.taxId });
+    setRevealed(false);
+  }, [buyer, setBuyer, arrivedWith]);
+  return useMemo(() => ({ revealed, onRevealCpf: () => setRevealed(true), onKeepSavedCpf }), [revealed, onKeepSavedCpf]);
+}
+
 /** The list face, with what the step gathered for it. */
-function ListFaceFor({ props, state, charge, cap, onHandOff }: {
+function ListFaceFor({ props, state, charge, cap, onHandOff, reveal }: {
   props: PaymentListStepProps;
   state: ListState;
   charge: ListCharge;
   cap: ListCapability;
   onHandOff: () => void;
+  reveal: { revealed: boolean; onRevealCpf: () => void; onKeepSavedCpf: () => void };
 }): JSX.Element {
   const { c, cart, totalOverride } = props;
   const config = props.providerConfig ?? null;
@@ -106,6 +137,9 @@ function ListFaceFor({ props, state, charge, cap, onHandOff }: {
       pollIntervalMs={props.pollIntervalMs ?? 2500}
       saveBuyerContact={props.saveBuyerContact}
       onHandOff={onHandOff}
+      revealed={reveal.revealed}
+      onRevealCpf={reveal.onRevealCpf}
+      onKeepSavedCpf={reveal.onKeepSavedCpf}
     />
   );
 }
@@ -122,7 +156,9 @@ function ListFaceFor({ props, state, charge, cap, onHandOff }: {
 export function PaymentListStep(props: PaymentListStepProps): JSX.Element {
   const { c, list } = props;
   const config = props.providerConfig ?? null;
-  const cap = useListCapability(config, list.totalCents);
+  const cap = useListCapability(config, list.totalCents, props.validateApplePayMerchant);
+  const reveal = useReveal(c, props.defaultBuyer);
+  const { revealed } = reveal;
   const state = useListState({
     config,
     capability: cap,
@@ -132,6 +168,8 @@ export function PaymentListStep(props: PaymentListStepProps): JSX.Element {
     taxIdOnFile: props.taxIdOnFile,
     lastMethod: list.lastMethod,
     onChoiceChange: list.onChoiceChange,
+    wallets: cap.wallets,
+    revealed,
   });
   const charge = useListCharge({ ...c, cartTotal: displayTotals(props.totalOverride, props.cart).label, dueCents: list.totalCents });
   const [handingOff, startHandOff] = useHandingOff(c.createError);
@@ -146,7 +184,14 @@ export function PaymentListStep(props: PaymentListStepProps): JSX.Element {
   ) : handingOff ? (
     <HandOffFace props={props} method={c.method ?? "PIX"} />
   ) : (
-    <ListFaceFor props={props} state={state} charge={charge} cap={cap} onHandOff={startHandOff} />
+    <ListLayout
+      hostTarget={list.summaryTarget}
+      lines={props.totalOverride ? undefined : props.cart.lines}
+      moneyLines={props.cart.discountLines}
+      totalLabel={displayTotals(props.totalOverride, props.cart).label}
+    >
+      <ListFaceFor props={props} state={state} charge={charge} cap={cap} onHandOff={startHandOff} reveal={reveal} />
+    </ListLayout>
   );
   return (
     <PaymentListProvider list={list} onLeavePix={c.dropOrder} consent={consent}>

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

@@ -28,6 +28,12 @@ export const PT_BR_PAYMENT_LIST_COPY: PaymentListCopy = {
     hintNew: "Digite os dados do cartão",
   },
   googlePay: { label: "Google Pay", hint: "Com o cartão salvo no seu Google" },
+  wallets: {
+    heading: "Pagamento rápido",
+    googlePay: "Pagar com Google Pay",
+    applePay: "Pagar com Apple Pay",
+    or: "ou escolha como pagar",
+  },
   handOff: {
     label: "Pix ou cartão",
     hint: (provider) =>
@@ -41,6 +47,8 @@ export const PT_BR_PAYMENT_LIST_COPY: PaymentListCopy = {
     name: "Nome",
     email: "E-mail",
     why: (provider) => (provider ? `(${the(provider)} pede para pagar pelo app)` : "(pedido para pagar pelo app)"),
+    cpfHint: (provider) => (provider ? `${the(provider)} pede para pagar pelo app` : "pedido para pagar pelo app"),
+    keepSavedCpf: "Manter o CPF salvo",
     cpfIncomplete: "O CPF tem 11 dígitos.",
     phoneIncomplete: "O celular precisa de DDD e 9 dígitos.",
   },

package/src/components/checkout/list/summary-column.tsx

@@ -0,0 +1,120 @@
+import { Box } from "@mui/material";
+import { createContext, useContext, useMemo, useState, type JSX, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+import { useCheckoutCopy } from "../copy-context";
+import { SummaryLines, SummaryTotal, type CheckoutSummaryLine } from "../payment-summary";
+import { useCheckoutLayout } from "../payment-step-layout";
+import { useCheckoutComponents } from "../ui";
+
+/**
+ * Where the bar's content goes on a computer (FUT-3685, L4): into the
+ * "Resumo do pedido" column — an element the column draws, which the bar's
+ * content is portalled into — or `null` on a phone, where the bar stays the
+ * host's sticky `ActionBar` (L2).
+ */
+const ColumnTarget = createContext<{ element: HTMLElement | null } | null>(null);
+
+const SummaryColumnTarget = ColumnTarget.Provider;
+
+/**
+ * `null` for the bar (a phone); otherwise the column's element to portal the
+ * bar's content into — itself `null` for the one render before the column
+ * mounts, when nothing is drawn rather than a bar that would flash.
+ */
+export function useSummaryColumnTarget(): { element: HTMLElement | null } | null {
+  return useContext(ColumnTarget);
+}
+
+/** The prototype's 680px steps column and 360px summary column, on the theme's spacing scale. */
+const STEPS_MAX = 85;
+const COLUMN_WIDTH = 45;
+
+/**
+ * The computer's two columns (L4): the steps on the left, at most ~680px, and
+ * the "Resumo do pedido" column on the right, ~360px, holding the lines, the
+ * fees, "Total", the host's context line and the pay button — so no bar sits
+ * at the bottom of the screen.
+ */
+function TwoColumns({ steps, column }: { steps: ReactNode; column: ReactNode }): JSX.Element {
+  return (
+    <Box data-testid="list-columns" sx={{ display: "flex", gap: 4, alignItems: "flex-start", justifyContent: "center", width: "100%" }}>
+      <Box sx={{ flex: 1, minWidth: 0, maxWidth: (t) => t.spacing(STEPS_MAX) }}>{steps}</Box>
+      <Box sx={{ flex: "none", width: (t) => t.spacing(COLUMN_WIDTH), position: "sticky", top: (t) => t.spacing(3) }}>{column}</Box>
+    </Box>
+  );
+}
+
+/**
+ * "Resumo do pedido" (T20): the cart's lines and the host's money rows (fees,
+ * discounts) as the host words them, a hairline, "Total" and the amount — and
+ * under them `slot`, the element the bar's content is portalled into.
+ */
+function SummaryColumn({ lines, moneyLines, totalLabel, slot }: {
+  lines?: CheckoutSummaryLine[];
+  /** The host's fee and discount rows (`CheckoutCartView.discountLines`). */
+  moneyLines?: ReactNode;
+  totalLabel: string;
+  slot: (element: HTMLElement | null) => void;
+}): JSX.Element {
+  const { Text } = useCheckoutComponents();
+  const copy = useCheckoutCopy().screens.layout;
+  const shown = lines ?? [];
+  return (
+    <Box
+      component="aside"
+      aria-label={copy.summaryTitle}
+      data-testid="list-summary-column"
+      sx={{ display: "flex", flexDirection: "column", gap: 1.75, p: 2.75, bgcolor: "background.paper", border: "1px solid", borderColor: "divider", borderRadius: 3.5 }}
+    >
+      <Text variant="heading" size="md" weight="bold" as="h2" style={{ margin: 0 }}>
+        {copy.summaryTitle}
+      </Text>
+      {shown.length > 0 ? <SummaryLines lines={shown} /> : null}
+      {moneyLines ? <Box data-testid="list-summary-money">{moneyLines}</Box> : null}
+      <Box sx={{ height: "1px", bgcolor: "divider" }} />
+      <SummaryTotal totalLabel={totalLabel} />
+      <Box ref={slot} data-testid="list-summary-action" sx={{ display: "flex", flexDirection: "column" }} />
+    </Box>
+  );
+}
+
+/**
+ * The list face's layout (FUT-3685, L4), in one of three shapes:
+ *
+ *  - the HOST lays out the page (`hostTarget` given — `paymentList.summaryTarget`):
+ *    the "Resumo do pedido" column is portalled into the host's element, beside
+ *    the host's own step cards, and the bar's action lands in it. While the
+ *    element is `null` (not mounted yet) the bar draws nothing rather than flash;
+ *  - a computer, the host silent: the step and the column side by side, here;
+ *  - a phone: the step alone, over the host's bar (L2).
+ *
+ * Only the list face is laid out this way: the Pix screen and the hand-off keep
+ * their bar (K9).
+ */
+export function ListLayout({ hostTarget, lines, moneyLines, totalLabel, children }: {
+  hostTarget: HTMLElement | null | undefined;
+  lines?: CheckoutSummaryLine[];
+  moneyLines?: ReactNode;
+  totalLabel: string;
+  children: ReactNode;
+}): JSX.Element {
+  const wide = useCheckoutLayout()?.wide ?? false;
+  const [slot, setSlot] = useState<HTMLElement | null>(null);
+  const target = useMemo(() => ({ element: slot }), [slot]);
+  const column = <SummaryColumn lines={lines} moneyLines={moneyLines} totalLabel={totalLabel} slot={setSlot} />;
+  if (hostTarget !== undefined) {
+    return (
+      <SummaryColumnTarget value={target}>
+        {children}
+        {hostTarget ? createPortal(column, hostTarget) : null}
+      </SummaryColumnTarget>
+    );
+  }
+  if (!wide) return <>{children}</>;
+  return (
+    <SummaryColumnTarget value={target}>
+      <TwoColumns steps={children} column={column} />
+    </SummaryColumnTarget>
+  );
+}

package/src/components/checkout/list/top-cpf.ts

@@ -0,0 +1,94 @@
+/**
+ * The CPF asked ONCE, at the top of the Pagamento step (FUT-3685, contract E1,
+ * E2, E3, R2, R3).
+ *
+ * PagBank charges a wallet as a card and requires the buyer's tax id on every
+ * order, and neither wallet's sheet can supply one. So the CPF cannot wait
+ * inside the chosen row any more: a wallet button is pressed with no row
+ * chosen at all. It is asked above the wallets, when ANY way to pay the list
+ * offers online needs it under the chain rule (FUT-526) — the union over the
+ * offered methods, never the chosen row (R2) — and it gates the online ways to
+ * pay only: a door row never needs it (R3).
+ *
+ * Every other field a method asks for (the hand-off provider's mobile, K4)
+ * stays inside its own row.
+ */
+import { buyerFieldsFor, fieldSatisfied } from "../buyer-fields";
+import type { BuyerInfo, CheckoutChainLink, CheckoutCustomerField, PaymentMethod } from "../types";
+
+/** Whether a field asks for the buyer's CPF. */
+export function isTaxId(field: Pick<CheckoutCustomerField, "key">): boolean {
+  return field.key === "taxId";
+}
+
+/** The required CPF the chain asks for under any of `methods`, or `null` when none does. */
+function requiredTaxId(
+  chain: readonly CheckoutChainLink[] | undefined,
+  methods: readonly PaymentMethod[],
+): CheckoutCustomerField | null {
+  for (const method of methods) {
+    const field = buyerFieldsFor(chain, method).find((candidate) => isTaxId(candidate) && candidate.required);
+    if (field) return field;
+  }
+  return null;
+}
+
+/**
+ * The CPF field the top of Pagamento shows, or `null` for none (E1, E2).
+ *
+ *  - Decided against what the buyer ARRIVED with, never what they are typing,
+ *    so the field does not vanish under their thumb as it completes.
+ *  - A buyer with a CPF on file sees no field — until they press "Alterar" on
+ *    the payer line (`revealed`, E2 → E1). That field opens holding the CPF
+ *    the host passed (masked, editable) and is OPTIONAL: empty means "keep the
+ *    CPF the store holds" — a host that does not pass it (the field opens
+ *    empty) must not strand the buyer — and only a non-empty CPF that is not
+ *    valid holds the online ways to pay, with the reason (E3, K6). "Manter o
+ *    CPF salvo" closes it again.
+ */
+export function topCpfField(input: {
+  chain: readonly CheckoutChainLink[] | undefined;
+  /** Every online method the list offers, wallets included (they raise a CARD order). */
+  methods: readonly PaymentMethod[];
+  arrivedWith: BuyerInfo | undefined;
+  taxIdOnFile: boolean;
+  revealed: boolean;
+}): CheckoutCustomerField | null {
+  const field = requiredTaxId(input.chain, input.methods);
+  if (!field) return null;
+  if (input.taxIdOnFile) return input.revealed ? { ...field, required: false } : null;
+  if (fieldSatisfied(field, input.arrivedWith?.taxId)) return null;
+  return field;
+}
+
+/**
+ * Whether the top CPF holds a payment raised with `method`: the method's own
+ * chain needs it and it is not satisfied — or the buyer typed one that is not
+ * valid, which would go out with any online payment.
+ */
+export function cpfHolds(
+  top: CheckoutCustomerField | null,
+  buyer: BuyerInfo,
+  chain: readonly CheckoutChainLink[] | undefined,
+  method: PaymentMethod,
+): boolean {
+  if (!top || fieldSatisfied(top, buyer.taxId)) return false;
+  const typed = (buyer.taxId ?? "").trim() !== "";
+  return typed || requiredTaxId(chain, [method]) !== null;
+}
+
+/**
+ * The provider the hint names — "o PagBank pede para pagar pelo app" (T3): the
+ * first chain member that asks for the CPF under one of `methods` (or declares
+ * nothing, which reads as asking for it), else the chain head. `null` when the
+ * member published no name.
+ */
+export function cpfProvider(
+  chain: readonly CheckoutChainLink[] | undefined,
+  methods: readonly PaymentMethod[],
+): string | null {
+  const asks = (link: CheckoutChainLink): boolean =>
+    link.customerSchema === undefined || requiredTaxId([link], methods) !== null;
+  const link = chain?.find(asks) ?? chain?.[0];
+  return link?.displayName?.trim() || null;
+}