diff --git a/package.json b/package.json index 2875cf5368..a9b3ff7189 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react": "17.0.1", "react-dates": "^21.8.0", "react-dom": "17.0.1", + "react-multi-email": "^0.5.3", "react-phone-number-input": "^3.1.21", "react-select": "^4.3.0", "react-timezone-select": "^1.0.2", diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx index c1e0aaded4..5684523334 100644 --- a/pages/[user]/book.tsx +++ b/pages/[user]/book.tsx @@ -15,6 +15,8 @@ import Avatar from "../../components/Avatar"; import Button from "../../components/ui/Button"; import { EventTypeCustomInputType } from "../../lib/eventTypeInput"; import Theme from "@components/Theme"; +import { ReactMultiEmail, isEmail } from 'react-multi-email'; +import 'react-multi-email/style.css'; dayjs.extend(utc); dayjs.extend(timezone); @@ -27,7 +29,8 @@ export default function Book(props: any): JSX.Element { const [preferredTimeZone, setPreferredTimeZone] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(false); - + const [guestToggle, setGuestToggle] = useState(false); + const [guestEmails, setGuestEmails] = useState([]); const locations = props.eventType.locations || []; const [selectedLocation, setSelectedLocation] = useState( @@ -44,6 +47,10 @@ export default function Book(props: any): JSX.Element { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters())); }); + function toggleGuestEmailInput() { + setGuestToggle(!guestToggle); + } + const locationInfo = (type: LocationType) => locations.find((location) => location.type === type); // TODO: Move to translations @@ -85,6 +92,7 @@ export default function Book(props: any): JSX.Element { name: event.target.name.value, email: event.target.email.value, notes: notes, + guests: guestEmails, timeZone: preferredTimeZone, eventTypeId: props.eventType.id, rescheduleUid: rescheduleUid, @@ -106,6 +114,7 @@ export default function Book(props: any): JSX.Element { } } + // console.log(payload); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters()) ); @@ -316,6 +325,42 @@ export default function Book(props: any): JSX.Element { )} ))} +
+ {!guestToggle && + + + } + { + guestToggle && + { + setGuestEmails(_emails); + }} + getLabel={( + email: string, + index: number, + removeEmail: (index: number) => void + ) => { + return ( +
+ {email} + removeEmail(index)}> + × + +
+ ); + }} + /> + } + +