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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 13x 113x 113x 113x 113x 113x 113x 113x 113x 4x 113x 4x 1x | import { Stack } from "@mui/material";
import { UserListIcon } from "@phosphor-icons/react";
import SectionHeader from "./SectionHeader";
import { GiveInput } from "@shared/GiveInputs/GiveInput";
import { Controller, useFormContext } from "react-hook-form";
import { HFGiveTelephone } from "@shared/HFInputs/HFGiveTelephone/HFGiveTelephone";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import GiveText from "@shared/Text/GiveText";
import GiveCheckbox from "@shared/GiveCheckbox/GiveCheckbox";
import WithCheckoutTooltip from "./CheckoutTooltip";
import GiveMotionWrapper from "@shared/Motion/GiveMotionWrapper";
import useCheckFormType from "@sections/PayBuilder/components/hooks/useCheckFormType";
import { useEventParticipantDetails } from "../hooks/useEventParticipantDetails";
import { SEND_ALL_TICKETS_LABEL } from "../participants.helpers";
const Contact = ({ isDisabledFields }: { isDisabledFields?: boolean }) => {
const methods = useFormContext();
const {
methods: leftSidepanelMethods,
parsedValues: { checkoutInputStyles },
} = usePayBuilderForm();
const { phoneNumber, participantDetails } =
leftSidepanelMethods.watch().Checkout;
const {
render: isPhoneNumberRendered,
required: isPhoneNumberRequired,
optionalMessage: phoneNumberMessage,
} = phoneNumber;
// Events only: every other form type still derives the buyer's name from
// `Name on Card`, so its Contact section is unchanged.
const { isEvent: isContactNameRendered } = useCheckFormType();
// Per-ticket mode only (mockup 7409:189009): the order-level mode carries its
// own "Same as contact details" switch, and two controls would contradict.
const isParticipantSectionRendered = useEventParticipantDetails();
const showSendAllTickets =
isParticipantSectionRendered && !!participantDetails?.render;
return (
<Stack spacing="20px">
<SectionHeader title="Contact" icon={<UserListIcon size={24} />} />
<Stack spacing={2}>
{isContactNameRendered && (
<Controller
control={methods.control}
name="name"
render={({ field: { onChange, value }, fieldState: { error } }) => (
<WithCheckoutTooltip disabled={isDisabledFields}>
<GiveInput
name="name"
fullWidth
label="Full Name"
value={value ?? ""}
onChange={onChange}
error={!!error}
helperText={error?.message}
disabled={isDisabledFields}
sx={checkoutInputStyles}
data-testid="checkout-inputs-name"
/>
</WithCheckoutTooltip>
)}
/>
)}
<Controller
control={methods.control}
name="email"
render={({ field: { onChange, value }, fieldState: { error } }) => (
<>
<WithCheckoutTooltip disabled={isDisabledFields}>
<GiveInput
name="email"
fullWidth
label="Email"
value={value}
onChange={onChange}
error={!!error}
helperText={error?.message}
disabled={isDisabledFields}
sx={checkoutInputStyles}
data-testid="checkout-inputs-email"
/>
</WithCheckoutTooltip>
</>
)}
/>
{showSendAllTickets && (
<Controller
control={methods.control}
name="sendAllTicketsToEmail"
render={({ field: { onChange, value } }) => (
<Stack direction="row" spacing={1} alignItems="center">
<GiveCheckbox
name="sendAllTicketsToEmail"
checked={!!value}
onChange={(event) => onChange(event.target.checked)}
disabled={isDisabledFields}
inputProps={{
"aria-label": SEND_ALL_TICKETS_LABEL,
...{ "data-testid": "send-all-tickets-to-email" },
}}
/>
<GiveText variant="bodyS">{SEND_ALL_TICKETS_LABEL}</GiveText>
</Stack>
)}
/>
)}
{isPhoneNumberRendered && (
<GiveMotionWrapper type="fadeInUp">
<Stack spacing={1}>
<WithCheckoutTooltip disabled={isDisabledFields}>
<HFGiveTelephone
label="Phone Number"
name="phoneNumber"
required={isPhoneNumberRequired}
disabled={isDisabledFields}
sx={checkoutInputStyles}
/>
</WithCheckoutTooltip>
<GiveText variant="bodyXS" color="secondary">
{phoneNumberMessage}
</GiveText>
</Stack>
</GiveMotionWrapper>
)}
</Stack>
</Stack>
);
};
export default Contact;
|