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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 46x 24x 24x 24x 24x 3x 3x | import { Stack } from "@mui/material";
import { TicketIcon } from "@phosphor-icons/react";
import GiveSwitch from "@shared/Switch/GiveSwitch";
import GiveText from "@shared/Text/GiveText";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import { Controller } from "react-hook-form";
import CheckoutDetailsSectionItem from "./CheckoutDetailsSectionItem";
import { useEventParticipantDetails } from "../hooks/useEventParticipantDetails";
import { PARTICIPANT_DETAILS_HELPER } from "../participants.helpers";
/**
* AC010/AC011 — the merchant's "Require details on each ticket" control.
*
* Name and Email are rendered locked (checked + disabled): per AC011 the
* per-ticket set is capture config, not rows in the global checkout-param
* catalogue, so nothing in the DB pins them — locking them here keeps the
* decision in one place and cheap to revisit without a migration.
*/
const ParticipantDetailsSection = () => {
const { methods } = usePayBuilderForm();
const { control } = methods;
const isParticipantDetailsRendered = useEventParticipantDetails();
if (!isParticipantDetailsRendered) return null;
return (
<Stack gap="12px" data-testid="participant-details-section">
<Stack
direction="row"
spacing={2}
alignItems="center"
justifyContent="space-between"
>
<Stack direction="row" spacing={2} alignItems="center">
<TicketIcon size={24} />
<GiveText variant="bodyL">Require details on each ticket</GiveText>
</Stack>
<Controller
control={control}
name="Checkout.participantDetails.render"
render={({ field: { onChange, value } }) => (
<GiveSwitch
checked={!!value}
onChange={onChange}
inputProps={{
"aria-label": "Require details on each ticket",
...{ "data-testid": "participant-details-toggle" },
}}
/>
)}
/>
</Stack>
<GiveText variant="bodyS" color="secondary">
{PARTICIPANT_DETAILS_HELPER}
</GiveText>
{/* Rendered with the toggle off too: both modes collect these fields, and
hiding the rows left an enabled Phone Number with no way to turn it off. */}
<Stack>
<CheckoutDetailsSectionItem
label="Full Name"
name="participantName"
isLocked
showRequiredLabel
/>
<CheckoutDetailsSectionItem
label="Email"
name="participantEmail"
isLocked
showRequiredLabel
/>
<CheckoutDetailsSectionItem
label="Phone Number"
name="participantPhone"
showRequiredLabel
showRequiredSwitch
isLastItem
/>
</Stack>
</Stack>
);
};
export default ParticipantDetailsSection;
|