@12-apps/payments-frontend 3.27.0 → 3.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/payments-frontend",
-  "version": "3.27.0",
+  "version": "3.27.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/tender-split/tender-card.tsx

@@ -51,6 +51,7 @@ export function TenderChoice<T extends string>({
         gap: 0.75,
         p: 1.5,
         minHeight: 74,
+        container: 'tender-card / inline-size',
         textAlign: 'left',
         borderRadius: CARD_RADIUS,
         border: 1.5,
@@ -102,6 +103,7 @@ export function PickedTender<T extends string>({
         gap: 1,
         p: 1.5,
         minWidth: 0,
+        container: 'tender-card / inline-size',
         borderRadius: CARD_RADIUS,
         border: 1.5,
         borderColor: 'primary.main',
@@ -118,43 +120,98 @@ export function PickedTender<T extends string>({
       >
         <CloseIcon fontSize="small" />
       </IconButton>
-      <InputBase
+      <AmountField
+        label={copy.amountLabel(tender.label)}
         value={value}
-        onChange={(event) => onType(event.target.value)}
-        onFocus={(event: FocusEvent<HTMLInputElement>) => event.target.select()}
+        currencySign={currencySign}
         autoFocus={autoFocus}
-        inputProps={{
-          inputMode: 'decimal',
-          'aria-label': copy.amountLabel(tender.label),
-          'data-testid': `${testId}-amount`,
-        }}
-        startAdornment={
-          <Typography variant="caption" color="text.secondary" noWrap sx={{ mr: 0.5 }}>
-            {shared ? `${currencySign} ${copy.sharedHint}` : currencySign}
-          </Typography>
-        }
-        sx={{
-          borderBottom: 1.5,
-          borderColor: 'divider',
-          fontWeight: 500,
-          fontVariantNumeric: 'tabular-nums',
-          '&.Mui-focused': { borderColor: 'primary.main' },
-          '& input': { textAlign: 'right', py: 0.375, minWidth: 0 },
-        }}
+        testId={`${testId}-amount`}
+        onType={onType}
       />
+      {/* Under the field rather than beside it, where a narrow card had no room
+          for it and the amount both. */}
+      {shared ? (
+        <Typography variant="caption" color="text.secondary" sx={{ mt: -0.5 }}>
+          {copy.sharedHint}
+        </Typography>
+      ) : null}
     </Box>
   );
 }
 
+/** A picked card's amount: the currency sign in front, never squeezed. */
+function AmountField({
+  label,
+  value,
+  currencySign,
+  autoFocus,
+  testId,
+  onType,
+}: {
+  label: string;
+  value: string;
+  currencySign: string;
+  autoFocus: boolean;
+  testId: string;
+  onType: (typed: string) => void;
+}) {
+  return (
+    <InputBase
+      value={value}
+      onChange={(event) => onType(event.target.value)}
+      onFocus={(event: FocusEvent<HTMLInputElement>) => event.target.select()}
+      autoFocus={autoFocus}
+      inputProps={{
+        inputMode: 'decimal',
+        'aria-label': label,
+        'data-testid': testId,
+      }}
+      startAdornment={
+        // Never shrunk: squeezed by the amount beside it, the sign read "R."
+        <Typography variant="caption" color="text.secondary" sx={{ mr: 0.5, flexShrink: 0 }}>
+          {currencySign}
+        </Typography>
+      }
+      sx={{
+        borderBottom: 1.5,
+        borderColor: 'divider',
+        fontWeight: 500,
+        fontVariantNumeric: 'tabular-nums',
+        '&.Mui-focused': { borderColor: 'primary.main' },
+        '& input': { textAlign: 'right', py: 0.375, minWidth: 0 },
+      }}
+    />
+  );
+}
+
+/**
+ * The glyph and the name. Side by side on a card with room; on a narrow one
+ * (a 320px phone halves to ~88px) the glyph goes on top, beside the remove
+ * control, so the name gets the whole width and breaks only between words.
+ */
 function TenderHeading<T extends string>({ tender }: { tender: TenderOption<T> }) {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, pr: 3, minWidth: 0 }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: 0.75,
+        minWidth: 0,
+        '@container tender-card (min-width: 120px)': {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 1,
+          pr: 3,
+        },
+      }}
+    >
       {tender.icon === null ? null : (
         <Box component="span" aria-hidden sx={{ display: 'flex', color: 'primary.main' }}>
           {tender.icon}
         </Box>
       )}
-      <Typography component="span" sx={{ fontWeight: 500, overflowWrap: 'anywhere' }}>
+      <Typography component="span" sx={{ fontWeight: 500, overflowWrap: 'break-word' }}>
         {tender.label}
       </Typography>
     </Box>

package/src/tender-split/tender-split.tsx

@@ -169,7 +169,13 @@ function Actions({
   return (
     <Box sx={{ display: 'flex', justifyContent: onCancel ? 'space-between' : 'flex-end', gap: 1 }}>
       {onCancel ? (
-        <Button variant="text" color="inherit" onClick={onCancel} data-testid={`${testId}-cancel`}>
+        <Button
+          variant="text"
+          color="inherit"
+          onClick={onCancel}
+          data-testid={`${testId}-cancel`}
+          sx={{ textTransform: 'none' }}
+        >
           {copy.cancel}
         </Button>
       ) : null}
@@ -178,6 +184,9 @@ function Actions({
         disabled={onConfirm === null}
         onClick={onConfirm ?? undefined}
         data-testid={`${testId}-confirm`}
+        // The confirm reads a sentence with a figure in it — "Falta R$ 2,00" —
+        // which MUI's default capitals would shout.
+        sx={{ textTransform: 'none' }}
       >
         {label}
       </Button>