All files / src/features/MerchantPortal/Customer/Modals/components CustomerCustomFieldRow.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
54x
5x
 
5x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Box } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import GiveTruncateText from "@shared/Text/GiveTruncateText";
import { useAppTheme } from "@theme/v2/Provider";
 
type Props = {
  label: string;
  value: string;
  /** Zebra striping — shaded rows get a subtle surface background. */
  shaded: boolean;
};
 
/**
 * PAY-Builder016 — one aggregated custom-field answer on the customer detail
 * panel. Label/value are laid out in two columns with an alternating background
 * (shaded rows). Per the GB-21559 mockup the shaded band is inset from the card
 * edges (12px side margin) rather than full-bleed, while the label still aligns
 * with the 20px group-header inset (12px margin + 8px padding = 20px).
 */
const CustomerCustomFieldRow = ({ label, value, shaded }: Props) => {
  const theme = useAppTheme();
 
  return (
    <Box
      data-testid="customer-custom-field-row"
      data-shaded={shaded}
      sx={{
        display: "flex",
        gap: "20px",
        mx: "12px",
        px: "8px",
        py: "12px",
        borderRadius: "8px",
        backgroundColor: shaded
          ? theme.palette.surface?.secondary
          : "transparent",
      }}
    >
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <GiveText variant="bodyS" color="secondary">
          {label}
        </GiveText>
      </Box>
      <Box sx={{ flex: 1, minWidth: 0 }}>
        <GiveTruncateText lineClamp={3} variant="bodyS">
          {value.trim() || "-"}
        </GiveTruncateText>
      </Box>
    </Box>
  );
};
 
export default CustomerCustomFieldRow;