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 | 54x 21x 21x 21x 4x 21x 19x 2x 2x | import { Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { useGetFeatureFlagValues } from "FeatureFlags/useGetFeatureFlagValues";
import { Customer } from "@customTypes/customer.types";
import CustomerCustomFieldGroup from "./CustomerCustomFieldGroup";
type Props = {
data?: Customer;
};
/**
* PAY-Builder016 — the aggregated "Additional Information" area on the customer
* detail panel (AC028-AC030): one collapsible group per payment form the
* customer purchased, each with the latest non-empty answers.
*/
const CustomerCustomFields = ({ data }: Props) => {
const { isPayBuilderCustomFieldsEnabled } = useGetFeatureFlagValues();
const groups = data?.customFieldAnswers ?? [];
// Hide groups that have no answered field (AC030), then hide the whole area
// if nothing survives.
const visibleGroups = groups.filter((g) =>
(g.fields ?? []).some((f) => (f.value ?? "").trim() !== ""),
);
if (!isPayBuilderCustomFieldsEnabled || visibleGroups.length === 0) {
return null;
}
return (
<Stack spacing="16px" data-testid="customer-custom-fields">
<GiveText variant="h6" color="primary">
Additional Information
</GiveText>
<Stack spacing="12px">
{visibleGroups.map((group, index) => (
<CustomerCustomFieldGroup
key={group.productId}
group={group}
isFirst={index === 0}
isLast={index === visibleGroups.length - 1}
/>
))}
</Stack>
</Stack>
);
};
export default CustomerCustomFields;
|