@@ -454,7 +455,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
);
})}>
-
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 142f702aad..39d33488f1 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -5,7 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button, Icon, TextArea } from "@calcom/ui";
+import { Button, TextArea } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
type Props = {
booking: {
@@ -39,7 +40,7 @@ export default function CancelBooking(props: Props) {
{error && (
-
+
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index 8bcbe26b85..3ed1e22537 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
function SkeletonLoader() {
return (
-
+
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 7b1d5cbb39..6ebf471179 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -28,7 +28,8 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
import { trpc } from "@calcom/trpc/react";
-import { Icon, HeadSeo } from "@calcom/ui";
+import { HeadSeo } from "@calcom/ui";
+import { FiChevronDown, FiChevronUp, FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
import { timeZone as localStorageTimeZone } from "@lib/clock";
import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -220,12 +221,12 @@ function TimezoneDropdown({
-
+
{timeZone}
{isTimeOptionsOpen ? (
-
+
) : (
-
+
)}
@@ -367,7 +368,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
{!rescheduleUid && eventType.recurringEvent && (
-
+
{getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -392,7 +393,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
)}
{stripeAppData.price > 0 && (
-
+
;
}) => {
const { t } = useLocale();
- return fields.map((field, index) => {
- // TODO: ManageBookings: Shouldn't we render hidden fields but invisible so that they can be prefilled?
- if (field.hidden) return null;
- let readOnly =
- (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
- if (field.name === "rescheduleReason") {
- if (!rescheduleUid) {
- return null;
- }
- // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
- readOnly = false;
- }
-
- if (field.name === "location" && field.type == "radioInput") {
- const options = locations.map((location) => {
- const locationString = locationKeyToString(location);
- if (typeof locationString !== "string") {
- // It's possible that location app got uninstalled
- return null;
+ return (
+ <>
+ {fields.map((field, index) => {
+ // TODO: ManageBookings: Shouldn't we render hidden fields but invisible so that they can be prefilled?
+ if (field.hidden) return null;
+ let readOnly =
+ (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
+ if (field.name === "rescheduleReason") {
+ if (!rescheduleUid) {
+ return null;
+ }
+ // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
+ readOnly = false;
}
- return {
- label: t(locationString),
- value: location.type,
- };
- });
- field.options = options.filter(
- (location): location is NonNullable => !!location
- );
+ if (field.name === "location" && field.type == "radioInput") {
+ const options = locations.map((location) => {
+ const locationString = locationKeyToString(location);
+ if (typeof locationString !== "string") {
+ // It's possible that location app got uninstalled
+ return null;
+ }
+ return {
+ label: t(locationString),
+ value: location.type,
+ };
+ });
- if (!field.optionsInputs) {
- throw new Error("radioInput must have optionsInputs");
- }
- field.optionsInputs.attendeeInPerson.placeholder = t(selectedLocation?.attendeeInputPlaceholder || "");
- }
+ field.options = options.filter(
+ (location): location is NonNullable => !!location
+ );
- return ;
- });
+ if (!field.optionsInputs) {
+ throw new Error("radioInput must have optionsInputs");
+ }
+ field.optionsInputs.attendeeInPerson.placeholder = t(
+ selectedLocation?.attendeeInputPlaceholder || ""
+ );
+ }
+
+ return ;
+ })}
+ >
+ );
};
const BookingPage = ({
@@ -250,15 +256,6 @@ const BookingPage = ({
const defaultValues = () => {
if (!rescheduleUid) {
const defaults = {
- // notes: (router.query.notes as string) || "",
- // guests: ensureArray(router.query.guest) as string[],
- // customInputs: eventType.customInputs.reduce(
- // (customInputs, input) => ({
- // ...customInputs,
- // [input.id]: router.query[slugify(input.label)],
- // }),
- // {}
- // ),
responses: {} as z.infer["responses"],
};
@@ -310,20 +307,7 @@ const BookingPage = ({
const bookingFormSchema = z
.object({
- // name: z.string().min(1),
- // email: z.string().trim().email(),
- // phone: z
- // .string()
- // .refine((val) => isValidPhoneNumber(val))
- // .optional()
- // .nullable(),
- // attendeeAddress: z.string().optional().nullable(),
responses: getBookingResponsesSchema(eventType),
- // smsReminderNumber: z
- // .string()
- // .refine((val) => isValidPhoneNumber(val))
- // .optional()
- // .nullable(),
})
.passthrough();
@@ -350,7 +334,7 @@ const BookingPage = ({
resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
});
useEffect(() => {
- window.bookingForm = bookingForm;
+ // window.bookingForm = bookingForm;
});
const selectedLocationType = useWatch({
control: bookingForm.control,
@@ -388,34 +372,6 @@ const BookingPage = ({
value: booking.customInputs && booking.customInputs[inputId] ? booking.customInputs[inputId] : "",
}));
- // Checking if custom inputs of type Phone number are valid to display error message on UI
- if (eventType.customInputs.length) {
- let isErrorFound = false;
- eventType.customInputs.forEach((customInput) => {
- if (customInput.required && customInput.type === EventTypeCustomInputType.PHONE) {
- const input = bookingCustomInputs.find((i) => i.label === customInput.label);
- try {
- z.string({
- errorMap: () => ({
- message: `Missing ${customInput.type} customInput: '${customInput.label}'`,
- }),
- })
- .refine((val) => isValidPhoneNumber(val), {
- message: "Phone number is invalid",
- })
- .parse(input?.value);
- } catch (err) {
- isErrorFound = true;
- bookingForm.setError(`customInputs.${customInput.id}`, {
- type: "custom",
- message: "Invalid Phone number",
- });
- }
- }
- });
- if (isErrorFound) return;
- }
-
telemetry.event(
top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
{ isTeamBooking: document.URL.includes("team/") }
@@ -434,22 +390,6 @@ const BookingPage = ({
{}
);
- if (eventType.customInputs.length > 0) {
- // find all required custom inputs and ensure they are filled out in the booking form
- const requiredCustomInputs = eventType.customInputs.filter((input) => input.required);
- const missingRequiredCustomInputs = requiredCustomInputs.filter(
- (input) => !booking?.customInputs?.[input.id]
- );
- if (missingRequiredCustomInputs.length > 0) {
- missingRequiredCustomInputs.forEach((input) => {
- bookingForm.setError(`customInputs.${input.id}`, {
- type: "required",
- });
- });
- return;
- }
- }
-
if (recurringDates.length) {
// Identify set of bookings to one intance of recurring event to support batch changes
const recurringEventId = uuidv4();
@@ -507,29 +447,6 @@ const BookingPage = ({
}
};
- // Should be disabled when rescheduleUid is present and data was found in defaultUserValues name/email fields.
- const disableInput = !!rescheduleUid && !!defaultUserValues.email && !!defaultUserValues.name;
- const disableLocations = !!rescheduleUid;
- const disabledExceptForOwner = disableInput && !loggedInIsOwner;
- const inputClassName =
- "dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500";
-
- let isSmsReminderNumberNeeded = false;
- let isSmsReminderNumberRequired = false;
-
- if (eventType.workflows.length > 0) {
- eventType.workflows.forEach((workflowReference) => {
- if (workflowReference.workflow.steps.length > 0) {
- workflowReference.workflow.steps.forEach((step) => {
- if (step.action === WorkflowActions.SMS_ATTENDEE) {
- isSmsReminderNumberNeeded = true;
- isSmsReminderNumberRequired = step.numberRequired || false;
- return;
- }
- });
- }
- });
- }
const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
@@ -556,7 +473,7 @@ const BookingPage = ({
})}{" "}
| {APP_NAME}
-
+
@@ -569,7 +486,7 @@ const BookingPage = ({
@@ -578,7 +495,7 @@ const BookingPage = ({
{stripeAppData.price > 0 && (
-
+
-
+
{getEveryFreqFor({
t,
@@ -601,7 +518,7 @@ const BookingPage = ({
)}
-
+
{isClientTimezoneAvailable &&
(rescheduleUid || !eventType.recurringEvent?.freq) &&
@@ -632,7 +549,7 @@ const BookingPage = ({
{t("former_time")}
-
+
{isClientTimezoneAvailable &&
typeof booking.startTime === "string" &&
parseDate(dayjs(booking.startTime), i18n)}
@@ -641,7 +558,7 @@ const BookingPage = ({
)}
{!!eventType.seatsPerTimeSlot && (
- = 0.5
? "text-rose-600"
@@ -672,286 +589,24 @@ const BookingPage = ({
|