Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 55 56 57 58 59 60 61 62 | 54x 3x 2x 2x 2x 5x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import GiveCollapsableComponent from "@features/Merchants/MerchantSidePanel/GiveMerchantFile/businessOwners/GiveCollapsableComponent";
import { CustomerFormCustomFields } from "@customTypes/customer.types";
import CustomerCustomFieldRow from "./CustomerCustomFieldRow";
type Props = {
group: CustomerFormCustomFields;
isFirst?: boolean;
isLast?: boolean;
};
/**
* PAY-Builder016 — one collapsible "Additional Information" group per payment
* form on the customer detail panel (AC028/AC029). Title = section title,
* subtitle = payment-form name; each field shows the latest non-empty answer
* (dash when never answered).
*/
const CustomerCustomFieldGroup = ({ group, isFirst, isLast }: Props) => {
const fields = [...(group.fields ?? [])].sort((a, b) => a.order - b.order);
// AC030 — defensively hide a group with no answered field (BE also filters).
const hasAnswer = fields.some((f) => (f.value ?? "").trim() !== "");
Iif (!hasAnswer) return null;
return (
<GiveCollapsableComponent
isFirst={isFirst}
isLast={isLast}
testId={`customer-custom-field-group-${group.productId}`}
// 20px header inset so the title aligns with the answer rows below,
// matching the transaction panel (TransactionCustomFields).
sx={{ "& .MuiAccordionSummary-root": { px: "20px" } }}
title={
<Stack spacing="2px">
<GiveText variant="bodyM" color="primary">
{group.sectionTitle || "Additional Information"}
</GiveText>
{group.paymentFormName && (
<GiveText variant="bodyXS" color="secondary">
{group.paymentFormName}
</GiveText>
)}
</Stack>
}
>
<Stack sx={{ pt: "8px", pb: "16px" }}>
{fields.map((field, index) => (
<CustomerCustomFieldRow
key={field.fieldId}
label={field.label}
value={field.value ?? ""}
shaded={index % 2 === 1}
/>
))}
</Stack>
</GiveCollapsableComponent>
);
};
export default CustomerCustomFieldGroup;
|