Add additional guests (#6419)
* Add additional guests * WIP * WIP * Type fix * WIP * Add validation for already invited attendees * Revert type to email * remove controlled fields * disables signups via env variable (#6212) * disables signups via env variable * Apply suggestions from code review Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> * Reusable Upgrade component for teams only features (#6473) Co-authored-by: CarinaWolli <wollencarina@gmail.com> * i18n udpate * fix: darkmode in booking/[id] page (#6458) * fix: text-area style * fix: border styles * fix: german translation for reschedule booking email subject (#6483) * fix: german translation for reschedule subject * fix: add a full stop * fix: app store spacing issues (#6481) * feat: add equal spacing with gap * fix: title style * fix: title style * fix: remove margin * fix: remove margin * fix: sub header spacing and slider button * fix: category card text * fix: app store spacing issues * fix: tab in tablet * fix: shell * fix: styling of dropdown component (#6440) * fix: styling of dropdown component Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * Apply suggestions from code review * fix: use dropdown item in all pages Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * chore: undo Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * readding sidebar tips for everyone, added 3 more features to teams empty screen (#6475) * readding sidebar tips for everyone * added 3 more features to teams plan * responsive fixes * responsive fixes * small responsive fix * CTA alignment fixed * Minor alignment fixes to Shell for event-types/[type] Co-authored-by: Alex van Andel <me@alexvanandel.com> * fix: wrong i18n placeholder in many locales (#6496) * fix: czech translation * fix: spanish translation * fix: italian translation * fix: japanese translation * fix: korean translation * fix: dutch translation * fix: norwegian translation * fix: polish translation * fix: portuguese translation * fix: portuguese translation * fix: romanian translation * fix: russian translation * fix: serbian translation * fix: swedish translation * fix: turkish translation * fix: ukrainian translation * fix: vietnamese translation * fix: chinese simplified translation * fix: chinese traditional translation * Disable redirect for cancellation page (#6498) * [CAL-677] /event-type : Event Setup sidebar item doesn't reflect multiple durations (#6390) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * Added fallback to hostsFixed too which is used in COLLECTIVE (#6500) * Don't update the field when changing the select (#6486) * Don't update the field when changing the select * Fixing missing label * Applied the correct y-8 vertical margin * Changed the description vertical offset from title a bit more * Add Trash icon on Availability list dropdown * fix: tablet sidebar profile being too wide and not centered (#6490) * feat: updated app list items styling issues inside settings/conferencing * feat: fixed tablet sidebar width and not centered issue * fix: removed un-related changes from this pr * deleted .env * fix: added the accidentaly deleted .env file * fix: removed unwanted .env file from the pr Co-authored-by: Peer Richelsen <peeroke@gmail.com> * Bring back PublicShell (#6505) * Add red text to error message * WIP * Rearrange guest input * Fix validate unique guests logic * Allow guests on reschedule * Lint fix * More lint fixes * Lint fixes * More lint fixes * Fix remove guest button margin --------- Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Jeff Loiselle <jeff@loiselles.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: Nafees Nazik <84864519+G3root@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Ronit Panda <72537293+rtpa25@users.noreply.github.com> Co-authored-by: Alan <alannnc@gmail.com>
This commit is contained in:
5 files changed
+134
-77
No files matched your search
@@ -6,9 +6,8 @@ import { useSession } from "next-auth/react";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useMemo, useReducer, useState } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { useFieldArray, useForm, useWatch, Controller } from "react-hook-form";
|
||||
import { FormattedNumber, IntlProvider } from "react-intl";
|
||||
import { ReactMultiEmail } from "react-multi-email";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { z } from "zod";
|
||||
|
||||
@@ -40,15 +39,26 @@ import { HttpError } from "@calcom/lib/http-error";
|
||||
import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
|
||||
import slugify from "@calcom/lib/slugify";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
|
||||
import { AddressInput, Button, EmailInput, Form, PhoneInput, Tooltip, Group, RadioField } from "@calcom/ui";
|
||||
import {
|
||||
FiAlertTriangle,
|
||||
AddressInput,
|
||||
Button,
|
||||
EmailField,
|
||||
EmailInput,
|
||||
Form,
|
||||
Group,
|
||||
PhoneInput,
|
||||
RadioField,
|
||||
Tooltip,
|
||||
} from "@calcom/ui";
|
||||
import {
|
||||
FiUserPlus,
|
||||
FiCalendar,
|
||||
FiCreditCard,
|
||||
FiX,
|
||||
FiInfo,
|
||||
FiCreditCard,
|
||||
FiRefreshCw,
|
||||
FiUser,
|
||||
FiUserPlus,
|
||||
FiAlertTriangle,
|
||||
} from "@calcom/ui/components/icon";
|
||||
|
||||
import { asStringOrNull } from "@lib/asStringOrNull";
|
||||
@@ -73,7 +83,7 @@ type BookingFormValues = {
|
||||
email: string;
|
||||
notes?: string;
|
||||
locationType?: EventLocationType["type"];
|
||||
guests?: string[];
|
||||
guests?: { email: string }[];
|
||||
address?: string;
|
||||
attendeeAddress?: string;
|
||||
phone?: string;
|
||||
@@ -192,7 +202,9 @@ const BookingPage = ({
|
||||
|
||||
const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
|
||||
const guestListEmails = !isDynamicGroupBooking
|
||||
? booking?.attendees.slice(1).map((attendee) => attendee.email)
|
||||
? booking?.attendees.slice(1).map((attendee) => {
|
||||
return { email: attendee.email };
|
||||
})
|
||||
: [];
|
||||
|
||||
// There should only exists one default userData variable for primaryAttendee.
|
||||
@@ -211,7 +223,9 @@ const BookingPage = ({
|
||||
name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
|
||||
email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
|
||||
notes: (router.query.notes as string) || "",
|
||||
guests: ensureArray(router.query.guest) as string[],
|
||||
guests: ensureArray(router.query.guest).map((guest) => {
|
||||
return { email: guest as string };
|
||||
}),
|
||||
customInputs: eventType.customInputs.reduce(
|
||||
(customInputs, input) => ({
|
||||
...customInputs,
|
||||
@@ -253,6 +267,7 @@ const BookingPage = ({
|
||||
.object({
|
||||
name: z.string().min(1),
|
||||
email: z.string().trim().email(),
|
||||
guests: z.array(z.object({ email: z.string().email() })).optional(),
|
||||
phone: z
|
||||
.string()
|
||||
.refine((val) => isValidPhoneNumber(val))
|
||||
@@ -271,6 +286,10 @@ const BookingPage = ({
|
||||
defaultValues: defaultValues(),
|
||||
resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
|
||||
});
|
||||
const guestsField = useFieldArray({
|
||||
name: "guests",
|
||||
control: bookingForm.control,
|
||||
});
|
||||
|
||||
const selectedLocationType = useWatch({
|
||||
control: bookingForm.control,
|
||||
@@ -309,6 +328,7 @@ const BookingPage = ({
|
||||
}
|
||||
|
||||
const bookEvent = (booking: BookingFormValues) => {
|
||||
bookingForm.clearErrors();
|
||||
const bookingCustomInputs = Object.keys(booking.customInputs || {}).map((inputId) => ({
|
||||
label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
|
||||
value: booking.customInputs && booking.customInputs[inputId] ? booking.customInputs[inputId] : "",
|
||||
@@ -376,6 +396,29 @@ const BookingPage = ({
|
||||
}
|
||||
}
|
||||
|
||||
// Validate that guests are unique
|
||||
let alreadyInvited = false;
|
||||
booking.guests?.forEach((guest, index) => {
|
||||
if (guest.email === booking.email) {
|
||||
bookingForm.setError(`guests.${index}`, { type: "validate", message: t("already_invited") });
|
||||
alreadyInvited = true;
|
||||
}
|
||||
|
||||
if (booking.guests) {
|
||||
let guestCount = 0;
|
||||
for (const checkGuest of booking.guests) {
|
||||
if (checkGuest.email === guest.email) guestCount++;
|
||||
if (guestCount > 1) {
|
||||
bookingForm.setError(`guests.${index}`, { type: "validate", message: t("already_invited") });
|
||||
alreadyInvited = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
if (alreadyInvited) return;
|
||||
|
||||
if (recurringDates.length) {
|
||||
// Identify set of bookings to one intance of recurring event to support batch changes
|
||||
const recurringEventId = uuidv4();
|
||||
@@ -406,6 +449,7 @@ const BookingPage = ({
|
||||
? booking.phone
|
||||
: booking.smsReminderNumber || undefined,
|
||||
ethSignature: gateState.rainbowToken,
|
||||
guests: booking.guests?.map((guest) => guest.email),
|
||||
}));
|
||||
recurringMutation.mutate(recurringBookings);
|
||||
} else {
|
||||
@@ -434,6 +478,7 @@ const BookingPage = ({
|
||||
? booking.phone
|
||||
: booking.smsReminderNumber || undefined,
|
||||
ethSignature: gateState.rainbowToken,
|
||||
guests: booking.guests?.map((guest) => guest.email),
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -850,60 +895,7 @@ const BookingPage = ({
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{!eventType.disableGuests && guestToggle && (
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="guests"
|
||||
className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
|
||||
{t("guests")}
|
||||
</label>
|
||||
{!disableInput && (
|
||||
<Controller
|
||||
control={bookingForm.control}
|
||||
name="guests"
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<ReactMultiEmail
|
||||
className="relative"
|
||||
placeholder={<span className="dark:text-darkgray-600">guest@example.com</span>}
|
||||
emails={value}
|
||||
onChange={onChange}
|
||||
getLabel={(
|
||||
email: string,
|
||||
index: number,
|
||||
removeEmail: (index: number) => void
|
||||
) => {
|
||||
return (
|
||||
<div data-tag key={index} className="cursor-pointer">
|
||||
{email}
|
||||
{!disableInput && (
|
||||
<span data-tag-handle onClick={() => removeEmail(index)}>
|
||||
×
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{/* Custom code when guest emails should not be editable */}
|
||||
{disableInput && guestListEmails && guestListEmails.length > 0 && (
|
||||
<div data-tag className="react-multi-email">
|
||||
{/* // @TODO: user owners are appearing as guest here when should be only user input */}
|
||||
{guestListEmails.map((email, index) => {
|
||||
return (
|
||||
<div key={index} className="cursor-pointer">
|
||||
<span data-tag>{email}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isSmsReminderNumberNeeded && selectedLocationType !== LocationType.Phone && (
|
||||
<div className="mb-4">
|
||||
<label
|
||||
@@ -956,19 +948,84 @@ const BookingPage = ({
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!eventType.disableGuests && guestsField.fields.length ? (
|
||||
<div className="mb-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="guests"
|
||||
className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
|
||||
{t("guests")}
|
||||
</label>
|
||||
<ul>
|
||||
{guestsField.fields.map((field, index) => (
|
||||
<li key={field.id}>
|
||||
<EmailField
|
||||
{...bookingForm.register(`guests.${index}.email` as const)}
|
||||
className={classNames(
|
||||
inputClassName,
|
||||
bookingForm.formState.errors.guests?.[index] &&
|
||||
"!focus:ring-red-700 !border-red-700",
|
||||
"border-r-0"
|
||||
)}
|
||||
addOnClassname={classNames(
|
||||
"border-gray-300 border block border-l-0 disabled:bg-gray-200 disabled:hover:cursor-not-allowed bg-transparent disabled:text-gray-500 dark:border-darkgray-300 ",
|
||||
bookingForm.formState.errors.guests?.[index] &&
|
||||
"!focus:ring-red-700 !border-red-700"
|
||||
)}
|
||||
placeholder="guest@example.com"
|
||||
label={<></>}
|
||||
required
|
||||
addOnSuffix={
|
||||
<Tooltip content="Remove guest">
|
||||
<button
|
||||
className="m-1 disabled:hover:cursor-not-allowed"
|
||||
type="button"
|
||||
onClick={() => guestsField.remove(index)}>
|
||||
<FiX className="text-gray-600" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
{bookingForm.formState.errors.guests?.[index] && (
|
||||
<div className="mt-2 flex items-center text-sm text-red-700 ">
|
||||
<FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
|
||||
<p className="text-red-700">
|
||||
{bookingForm.formState.errors.guests?.[index]?.message}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
StartIcon={FiUserPlus}
|
||||
className="my-2.5"
|
||||
// className="mb-1 block text-sm font-medium text-gray-700 dark:text-white"
|
||||
onClick={() => guestsField.append({ email: "" })}>
|
||||
{t("add_another")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
{!eventType.disableGuests && !guestsField.fields.length && (
|
||||
<Button
|
||||
color="minimal"
|
||||
variant="button"
|
||||
StartIcon={FiUserPlus}
|
||||
onClick={() => {
|
||||
guestsField.append({ email: "" });
|
||||
}}
|
||||
className="mr-auto">
|
||||
{t("additional_guests")}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex justify-end space-x-2 rtl:space-x-reverse">
|
||||
{!eventType.disableGuests && !guestToggle && (
|
||||
<Button
|
||||
type="button"
|
||||
color="minimal"
|
||||
variant="icon"
|
||||
tooltip={t("additional_guests")}
|
||||
StartIcon={FiUserPlus}
|
||||
onClick={() => setGuestToggle(!guestToggle)}
|
||||
className="mr-auto"
|
||||
/>
|
||||
)}
|
||||
<Button color="minimal" type="button" onClick={() => router.back()}>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
|
||||
@@ -1511,6 +1511,7 @@
|
||||
"install_google_meet": "Install Google Meet",
|
||||
"install_google_calendar": "Install Google Calendar",
|
||||
"sender_name": "Sender name",
|
||||
"already_invited": "Attendee already invited",
|
||||
"no_recordings_found": "No recordings found",
|
||||
"reporting": "Reporting",
|
||||
"reporting_feature": "See all incoming from data and download it as a CSV",
|
||||
|
||||
@@ -683,7 +683,7 @@ export const viewerTeamsRouter = router({
|
||||
},
|
||||
},
|
||||
});
|
||||
type UserMap = Record<number, typeof teams[number]["members"][number]["user"]>;
|
||||
type UserMap = Record<number, (typeof teams)[number]["members"][number]["user"]>;
|
||||
// flattern users to be unique by id
|
||||
const users = teams
|
||||
.flatMap((t) => t.members)
|
||||
|
||||
@@ -143,7 +143,6 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
|
||||
{...passThrough}
|
||||
{...(type == "search" && {
|
||||
onChange: (e) => {
|
||||
console.log(e.target.value);
|
||||
setInputValue(e.target.value);
|
||||
props.onChange && props.onChange(e);
|
||||
},
|
||||
|
||||
@@ -10,7 +10,7 @@ type BookingFormValues = {
|
||||
email: string;
|
||||
notes?: string;
|
||||
locationType?: EventLocationType["type"];
|
||||
guests?: string[];
|
||||
guests?: { email: string }[];
|
||||
address?: string;
|
||||
attendeeAddress?: string;
|
||||
phone?: string;
|
||||
|
||||
Reference in new issue
Block a user