v2.3.1

Fixed circular dependecy that was messing with website
Flaky test improvement
2022-11-26 07:16:23 -07:00 · 2022-11-26 06:54:55 -07:00 · 2022-11-26 06:54:55 -07:00 · 2022-11-26 13:10:45 +00:00 · 2022-11-26 12:50:55 +00:00 · 2022-11-25 13:19:08 -07:00
55 changed files with 1532 additions and 537 deletions
@@ -1,15 +0,0 @@
-declare module "@wojtekmaj/react-daterange-picker/dist/entry.nostyle" {
-  import { CalendarProps } from "react-calendar";
-  export type DateRangePickerCalendarProps = Omit<
-    CalendarProps,
-    "calendarClassName" | "onChange" | "value"
-  > & {
-    calendarClassName?: string;
-    onChange: (value: [Date, Date]) => void;
-    value: [Date, Date];
-    clearIcon: JSX.Element | null;
-    calendarIcon: JSX.Element | null;
-    rangeDivider: JSX.Element | null;
-  };
-  export default function DateRangePicker(props: DateRangePickerCalendarProps): JSX.Element;
-}
@@ -37,7 +37,7 @@ export default function CancelBooking(props: Props) {
  return (
    <>
      {error && (
-        <div>
+        <div className="mt-8">
          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
            <Icon.FiX className="h-6 w-6 text-red-600" />
          </div>
@@ -89,11 +89,7 @@ export default function CancelBooking(props: Props) {
                  });

                  if (res.status >= 200 && res.status < 300) {
-                    await router.push(
-                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                        profile.slug
-                      }&team=${team ? 1 : 0}&allRemainingBookings=${allRemainingBookings}`
-                    );
+                    await router.replace(router.asPath);
                  } else {
                    setLoading(false);
                    setError(
@@ -7,7 +7,7 @@ export const UserAvatars = ({
  users,
  ...props
 }: {
-  profile: { image: string | null; name?: string | null };
+  profile: { image: string | null; name?: string | null; username?: string | null };
  showMembers: boolean;
  users: { username: string | null; name?: string | null }[];
 } & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
@@ -17,15 +17,26 @@ export const UserAvatars = ({
      border="border-2 dark:border-darkgray-100 border-white"
      items={
        [
-          { image: profile.image, alt: profile.name, title: profile.name },
+          {
+            image: profile.image,
+            alt: profile.name,
+            title: profile.name,
+            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
+          },
          ...(showMembers
            ? users.map((user) => ({
                title: user.name,
                image: `${CAL_URL}/${user.username}/avatar.png`,
                alt: user.name || undefined,
+                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
              }))
            : []),
-        ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+        ].filter((item) => !!item.image) as {
+          image: string;
+          alt?: string;
+          title?: string;
+          href?: string;
+        }[]
      }
      size={props.size}
      truncateAfter={props.truncateAfter}
@@ -17,7 +17,7 @@ import {
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, Form, Icon, PhoneInput } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Form, Icon, PhoneInput } from "@calcom/ui";

 import { QueryCell } from "@lib/QueryCell";

@@ -212,13 +212,13 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {

  return (
    <Dialog open={isOpenDialog}>
-      <DialogContent asChild>
-        <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
-          <div className="mb-4 sm:flex sm:items-start">
-            <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-              <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
-            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+      <DialogContent useOwnActionButtons>
+        <div className="flex flex-row space-x-3">
+          <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+            <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
+          </div>
+          <div className="w-full">
+            <div className="mt-3 text-center sm:mt-0 sm:text-left">
              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
                {t("edit_location")}
              </h3>
@@ -226,148 +226,152 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                <p className="text-sm text-gray-400">{t("this_input_will_shown_booking_this_event")}</p>
              )}
            </div>
-            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left" />
-          </div>
-          {booking && (
-            <>
-              <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-              <p className="mb-2 ml-1 text-sm text-black">
-                {getHumanReadableLocationValue(booking.location, t)}
-              </p>
-            </>
-          )}
-          <Form
-            form={locationFormMethods}
-            handleSubmit={async (values) => {
-              const { locationType: newLocation, displayLocationPublicly } = values;
+            <div className="mt-3 text-center sm:mt-0 sm:text-left" />

-              let details = {};
-              if (newLocation === LocationType.InPerson) {
-                details = {
-                  address: values.locationAddress,
-                };
-              }
-              const eventLocationType = getEventLocationType(newLocation);
+            {booking && (
+              <>
+                <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
+                <p className="mb-2 ml-1 text-sm text-black">
+                  {getHumanReadableLocationValue(booking.location, t)}
+                </p>
+              </>
+            )}
+            <Form
+              form={locationFormMethods}
+              handleSubmit={async (values) => {
+                const { locationType: newLocation, displayLocationPublicly } = values;

-              // TODO: There can be a property that tells if it is to be saved in `link`
-              if (
-                newLocation === LocationType.Link ||
-                (!eventLocationType?.default && eventLocationType?.linkType === "static")
-              ) {
-                details = { link: values.locationLink };
-              }
-
-              if (newLocation === LocationType.UserPhone) {
-                details = { hostPhoneNumber: values.locationPhoneNumber };
-              }
-
-              if (eventLocationType?.organizerInputType) {
-                details = {
-                  ...details,
-                  displayLocationPublicly,
-                };
-              }
-
-              saveLocation(newLocation, details);
-              setShowLocationModal(false);
-              setSelectedLocation?.(undefined);
-              locationFormMethods.unregister([
-                "locationType",
-                "locationLink",
-                "locationAddress",
-                "locationPhoneNumber",
-              ]);
-            }}>
-            <QueryCell
-              query={locationsQuery}
-              success={({ data: locationOptions }) => {
-                if (!locationOptions.length) return null;
-                if (booking) {
-                  locationOptions.forEach((location) => {
-                    if (location.label === "phone") {
-                      location.options.filter((l) => l.value !== "phone");
-                    } else if (location.label === "in person") {
-                      location.options.filter((l) => l.value !== "attendeeInPerson");
-                    }
-                  });
+                let details = {};
+                if (newLocation === LocationType.InPerson) {
+                  details = {
+                    address: values.locationAddress,
+                  };
                }
-                return (
-                  <Controller
-                    name="locationType"
-                    control={locationFormMethods.control}
-                    render={() => (
-                      <Select<{ label: string; value: string; icon?: string }>
-                        maxMenuHeight={150}
-                        name="location"
-                        defaultValue={selection}
-                        options={locationOptions}
-                        components={{
-                          Option: (props) => (
-                            <components.Option {...props}>
-                              <div className="flex items-center gap-3">
-                                {props.data.icon && (
-                                  <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
-                                )}
-                                <span
-                                  className={classNames(
-                                    "text-sm font-medium",
-                                    props.isSelected ? "text-white" : "text-gray-900"
-                                  )}>
-                                  {props.data.label}
-                                </span>
-                              </div>
-                            </components.Option>
-                          ),
-                        }}
-                        formatOptionLabel={(e) => (
-                          <div className="flex items-center gap-3">
-                            {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
-                            <span>{e.label}</span>
-                          </div>
-                        )}
-                        formatGroupLabel={(e) => (
-                          <p className="text-xs font-medium text-gray-600">{e.label}</p>
-                        )}
-                        isSearchable
-                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            locationFormMethods.setValue("locationType", val.value);
-                            locationFormMethods.unregister([
-                              "locationLink",
-                              "locationAddress",
-                              "locationPhoneNumber",
-                            ]);
-                            locationFormMethods.clearErrors([
-                              "locationLink",
-                              "locationPhoneNumber",
-                              "locationAddress",
-                            ]);
-                            setSelectedLocation?.(val);
-                          }
-                        }}
-                      />
-                    )}
-                  />
-                );
-              }}
-            />
-            {selectedLocation && LocationOptions}
-            <div className="mt-4 flex justify-end space-x-2">
-              <Button
-                onClick={() => {
-                  setShowLocationModal(false);
-                  setSelectedLocation?.(undefined);
-                  setEditingLocationType?.("");
-                  locationFormMethods.unregister("locationType");
+                const eventLocationType = getEventLocationType(newLocation);
+
+                // TODO: There can be a property that tells if it is to be saved in `link`
+                if (
+                  newLocation === LocationType.Link ||
+                  (!eventLocationType?.default && eventLocationType?.linkType === "static")
+                ) {
+                  details = { link: values.locationLink };
+                }
+
+                if (newLocation === LocationType.UserPhone) {
+                  details = { hostPhoneNumber: values.locationPhoneNumber };
+                }
+
+                if (eventLocationType?.organizerInputType) {
+                  details = {
+                    ...details,
+                    displayLocationPublicly,
+                  };
+                }
+
+                saveLocation(newLocation, details);
+                setShowLocationModal(false);
+                setSelectedLocation?.(undefined);
+                locationFormMethods.unregister([
+                  "locationType",
+                  "locationLink",
+                  "locationAddress",
+                  "locationPhoneNumber",
+                ]);
+              }}>
+              <QueryCell
+                query={locationsQuery}
+                success={({ data: locationOptions }) => {
+                  if (!locationOptions.length) return null;
+                  if (booking) {
+                    locationOptions.forEach((location) => {
+                      if (location.label === "phone") {
+                        location.options.filter((l) => l.value !== "phone");
+                      } else if (location.label === "in person") {
+                        location.options.filter((l) => l.value !== "attendeeInPerson");
+                      }
+                    });
+                  }
+                  return (
+                    <Controller
+                      name="locationType"
+                      control={locationFormMethods.control}
+                      render={() => (
+                        <Select<{ label: string; value: string; icon?: string }>
+                          maxMenuHeight={150}
+                          name="location"
+                          defaultValue={selection}
+                          options={locationOptions}
+                          components={{
+                            Option: (props) => (
+                              <components.Option {...props}>
+                                <div className="flex items-center gap-3">
+                                  {props.data.icon && (
+                                    <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
+                                  )}
+                                  <span
+                                    className={classNames(
+                                      "text-sm font-medium",
+                                      props.isSelected ? "text-white" : "text-gray-900"
+                                    )}>
+                                    {props.data.label}
+                                  </span>
+                                </div>
+                              </components.Option>
+                            ),
+                          }}
+                          formatOptionLabel={(e) => (
+                            <div className="flex items-center gap-3">
+                              {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
+                              <span>{e.label}</span>
+                            </div>
+                          )}
+                          formatGroupLabel={(e) => (
+                            <p className="text-xs font-medium text-gray-600">{e.label}</p>
+                          )}
+                          isSearchable
+                          className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
+                          onChange={(val) => {
+                            if (val) {
+                              locationFormMethods.setValue("locationType", val.value);
+                              locationFormMethods.unregister([
+                                "locationLink",
+                                "locationAddress",
+                                "locationPhoneNumber",
+                              ]);
+                              locationFormMethods.clearErrors([
+                                "locationLink",
+                                "locationPhoneNumber",
+                                "locationAddress",
+                              ]);
+                              setSelectedLocation?.(val);
+                            }
+                          }}
+                        />
+                      )}
+                    />
+                  );
                }}
-                type="button"
-                color="secondary">
-                {t("cancel")}
-              </Button>
-              <Button type="submit">{t("update")}</Button>
-            </div>
-          </Form>
+              />
+              {selectedLocation && LocationOptions}
+              <DialogFooter>
+                <div className="mt-4 flex justify-end space-x-2">
+                  <Button
+                    onClick={() => {
+                      setShowLocationModal(false);
+                      setSelectedLocation?.(undefined);
+                      setEditingLocationType?.("");
+                      locationFormMethods.unregister("locationType");
+                    }}
+                    type="button"
+                    color="secondary">
+                    {t("cancel")}
+                  </Button>
+
+                  <Button type="submit">{t("update")}</Button>
+                </div>
+              </DialogFooter>
+            </Form>
+          </div>
        </div>
      </DialogContent>
    </Dialog>
@@ -1,3 +1,4 @@
+import Link from "next/link";
 import React from "react";

 import classNames from "@lib/classNames";
@@ -12,6 +13,7 @@ export type AvatarGroupProps = {
    image: string;
    title?: string;
    alt?: string;
+    href?: string;
  }[];
  className?: string;
 };
@@ -21,15 +23,25 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
    <ul className={classNames(props.className)}>
      {props.items.slice(0, props.truncateAfter).map((item, idx) => {
        if (item.image != null) {
+          const avatar = (
+            <AvatarSSR
+              className={props.border}
+              imageSrc={item.image}
+              title={item.title}
+              alt={item.alt || ""}
+              size={props.size}
+            />
+          );
+
          return (
            <li key={idx} className="-mr-2 inline-block">
-              <AvatarSSR
-                className={props.border}
-                imageSrc={item.image}
-                title={item.title}
-                alt={item.alt || ""}
-                size={props.size}
-              />
+              {item.href ? (
+                <Link href={item.href}>
+                  <a>{avatar}</a>
+                </Link>
+              ) : (
+                avatar
+              )}
            </li>
          );
        }
@@ -15,6 +15,7 @@ export type AvatarProps = (
  className?: string;
  size?: number;
  title?: string;
+  href?: string;
  alt: string;
 };

@@ -49,7 +50,7 @@ export function AvatarSSR(props: AvatarProps) {
  const avatar = imgSrc ? <img alt={alt} className={className} src={imgSrc} /> : null;
  return title ? (
    <Tooltip.Tooltip delayDuration={300}>
-      <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
+      <Tooltip.TooltipTrigger asChild>{avatar}</Tooltip.TooltipTrigger>
      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
        <Tooltip.Arrow />
        {title}
@@ -1,28 +0,0 @@
-// @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
-import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
-import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
-import React from "react";
-import "react-calendar/dist/Calendar.css";
-
-import { Icon } from "@calcom/ui";
-
-type Props = {
-  startDate: Date;
-  endDate: Date;
-  onDatesChange?: ((arg: { startDate: Date; endDate: Date }) => void) | undefined;
-};
-
-export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
-  return (
-    <PrimitiveDateRangePicker
-      className="rounded-sm border-gray-300 text-sm"
-      clearIcon={null}
-      calendarIcon={<Icon.FiCalendar className="h-5 w-5 text-gray-500" />}
-      rangeDivider={<Icon.FiArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
-      value={[startDate, endDate]}
-      onChange={([startDate, endDate]) => {
-        if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
-      }}
-    />
-  );
-};
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "2.3.0",
+  "version": "2.3.1",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -62,7 +62,6 @@
    "@tanstack/react-query": "^4.3.9",
    "@vercel/edge-functions-ui": "^0.2.1",
    "@vercel/og": "^0.0.19",
-    "@wojtekmaj/react-daterange-picker": "^3.3.1",
    "accept-language-parser": "^1.5.0",
    "async": "^3.2.4",
    "bcryptjs": "^2.4.3",
@@ -6,8 +6,8 @@ import { defaultResponder } from "@calcom/lib/server";

 async function handler(req: NextApiRequest & { userId?: number }) {
  const session = await getSession({ req });
-  /* To mimic API behavior */
-  req.userId = session?.user?.id;
+  /* To mimic API behavior and comply with types */
+  req.userId = session?.user?.id || -1;
  const booking = await handleNewBooking(req);
  return booking;
 }
@@ -6,8 +6,8 @@ import { defaultResponder, defaultHandler } from "@calcom/lib/server";

 async function handler(req: NextApiRequest & { userId?: number }) {
  const session = await getSession({ req });
-  /* To mimic API behavior */
-  req.userId = session?.user?.id;
+  /* To mimic API behavior and comply with types */
+  req.userId = session?.user?.id || -1;
  return await handleCancelBooking(req);
 }

@@ -1,89 +0,0 @@
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { z } from "zod";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
-
-import { HeadSeo } from "@components/seo/head-seo";
-
-const querySchema = z.object({
-  title: z.string().optional(),
-  name: z.string().optional(),
-  eventPage: z.string().optional(),
-  allRemainingBookings: z
-    .string()
-    .optional()
-    .transform((val) => (val ? JSON.parse(val) : false)),
-});
-
-export default function CancelSuccess() {
-  const { t } = useLocale();
-  // Get router variables
-  const router = useRouter();
-  const { title, name, eventPage, allRemainingBookings } = querySchema.parse(router.query);
-  let team: string | string[] | number | undefined = router.query.team;
-  const { data: session, status } = useSession();
-  const loading = status === "loading";
-  // If team param passed wrongly just assume it be a non team case.
-  if (team instanceof Array || typeof team === "undefined") {
-    team = 0;
-  }
-  const isTeamEvent = +team === 1;
-  // FIXME: In case of Dynamic Event Booking, it takes the booker to one of the user's page(e.g. A) in the dynamic group(A+B+...). Booker should be taken to the same dynamic group
-  // This isn't directly possible because a booking doesn't know if it was done for a Dynamic Event(booking.eventType is null)
-  const eventUrl = `/${isTeamEvent ? "team/" : ""}${eventPage as string}`;
-  return (
-    <div>
-      <HeadSeo
-        title={`${t("cancelled")} ${title} | ${name}`}
-        description={`${t("cancelled")} ${title} | ${name}`}
-      />
-      <main className="mx-auto my-24 max-w-3xl">
-        <div className="fixed inset-0 z-50 overflow-y-auto">
-          <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
-            <div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
-              <span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
-                &#8203;
-              </span>
-              <div
-                className="inline-block transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6 sm:align-middle"
-                role="dialog"
-                aria-modal="true"
-                aria-labelledby="modal-headline">
-                <div>
-                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                    <Icon.FiCheck className="h-6 w-6 text-green-600" />
-                  </div>
-                  <div className="mt-3 text-center sm:mt-5">
-                    <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
-                      {t("cancellation_successful")}
-                    </h3>
-                    {!loading && !session?.user && (
-                      <div className="mt-2">
-                        <p className="text-sm text-gray-500">{t("free_to_pick_another_event_type")}</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-                <div className="mt-5 text-center sm:mt-6">
-                  <div className="mt-5">
-                    {!loading && !session?.user && <Button href={eventUrl}>Pick another</Button>}
-                    {!loading && session?.user && (
-                      <Button
-                        data-testid="back-to-bookings"
-                        href={!!allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
-                        StartIcon={Icon.FiArrowLeft}>
-                        {t("back_to_bookings")}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
@@ -172,7 +172,17 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
        findDurationType(eventType.minimumBookingNotice),
        eventType.minimumBookingNotice
      ),
-      metadata: eventType.metadata,
+      // fallback to !!eventType.schedule when 'useHostSchedulesForTeamEvent' is undefined
+      metadata: {
+        ...eventType.metadata,
+        config: {
+          ...eventType.metadata.config,
+          useHostSchedulesForTeamEvent:
+            typeof eventType.metadata.config?.useHostSchedulesForTeamEvent !== "undefined"
+              ? eventType.metadata.config?.useHostSchedulesForTeamEvent === true
+              : !!eventType.schedule,
+        },
+      },
    },
  });

@@ -16,9 +16,7 @@ function AdminView() {
        onSubmit={(e) => {
          e.preventDefault();
          const enteredUsername = usernameRef.current?.value.toLowerCase();
-          signIn("impersonation-auth", { username: enteredUsername }).then((res) => {
-            console.log(res);
-          });
+          signIn("impersonation-auth", { username: enteredUsername });
        }}>
        <div className="flex items-center space-x-2">
          <TextField
@@ -361,6 +361,7 @@ export default function Success(props: SuccessProps) {
                <div className="mt-6 mb-8 text-center last:mb-0">
                  <h3
                    className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                    data-testid="success-headline"
                    id="modal-headline">
                    {needsConfirmation && !isCancelled
                      ? props.recurringBookings
@@ -392,6 +393,7 @@ export default function Success(props: SuccessProps) {
                        allRemainingBookings={allRemainingBookings}
                        date={date}
                        is24h={is24h}
+                        isCancelled={isCancelled}
                      />
                    </div>
                    {(bookingInfo?.user || bookingInfo?.attendees) && (
@@ -669,6 +671,7 @@ type RecurringBookingsProps = {
  date: dayjs.Dayjs;
  is24h: boolean;
  allRemainingBookings: boolean;
+  isCancelled: boolean;
 };

 export function RecurringBookings({
@@ -677,6 +680,7 @@ export function RecurringBookings({
  date,
  allRemainingBookings,
  is24h,
+  isCancelled,
 }: RecurringBookingsProps) {
  const [moreEventsVisible, setMoreEventsVisible] = useState(false);
  const { t } = useLocale();
@@ -699,7 +703,7 @@ export function RecurringBookings({
        )}
        {eventType.recurringEvent?.count &&
          recurringBookingsSorted.slice(0, 4).map((dateStr: string, idx: number) => (
-            <div key={idx} className="mb-2">
+            <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
              {dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
              <br />
              {formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "}
@@ -717,7 +721,7 @@ export function RecurringBookings({
            <CollapsibleContent>
              {eventType.recurringEvent?.count &&
                recurringBookingsSorted.slice(4).map((dateStr: string, idx: number) => (
-                  <div key={idx} className="mb-2">
+                  <div key={idx} className={classNames("mb-2", isCancelled ? "line-through" : "")}>
                    {dayjs.tz(dateStr, timeZone()).format("MMMM DD, YYYY")}
                    <br />
                    {formatTime(dateStr, is24h ? 24 : 12, timeZone())} -{" "}
@@ -733,13 +737,13 @@ export function RecurringBookings({
  }

  return (
-    <>
+    <div className={classNames(isCancelled ? "line-through" : "")}>
      {dayjs.tz(date, timeZone()).format("MMMM DD, YYYY")}
      <br />
      {formatTime(date, is24h ? 24 : 12, timeZone())} -{" "}
      {formatTime(dayjs(date).add(eventType.length, "m"), is24h ? 24 : 12, timeZone())}{" "}
      <span className="text-bookinglight">({timeZone()})</span>
-    </>
+    </div>
  );
 }

@@ -79,6 +79,7 @@ test.describe("pro user", () => {

    await pro.login();
    await page.goto("/bookings/upcoming");
+    await page.waitForSelector('[data-testid="bookings"]');
    await page.locator('[data-testid="edit_booking"]').nth(0).click();
    await page.locator('[data-testid="reschedule"]').click();
    await page.waitForNavigation({
@@ -112,11 +113,16 @@ test.describe("pro user", () => {
    });
    // --- fill form
    await page.locator('[data-testid="cancel"]').click();
+
    await page.waitForNavigation({
-      url(url) {
-        return url.pathname === "/cancel/success";
+      url: (url) => {
+        return url.pathname.startsWith("/success");
      },
    });
+    const successHeadling = await page.locator('[data-testid="success-headline"]').innerText();
+
+    await expect(successHeadling).toBe("This event is cancelled");
+
    await page.goto(`/${pro.username}`);
    await bookFirstEvent(page);
  });
@@ -53,11 +53,15 @@ test("dynamic booking", async ({ page, users }) => {
    });
    // --- fill form
    await page.locator('[data-testid="cancel"]').click();
+
    await page.waitForNavigation({
-      url(url) {
-        return url.pathname === "/cancel/success";
+      url: (url) => {
+        return url.pathname.startsWith("/success");
      },
    });
+    const successHeadling = await page.locator('[data-testid="success-headline"]').innerText();
+
+    await expect(successHeadling).toBe("This event is cancelled");
  });

  await users.deleteAll();
@@ -1375,5 +1375,6 @@
  "route_to": "Route to",
  "test_preview_description": "Test your routing form without submitting any data",
  "test_routing": "Test Routing",
-  "booking_limit_reached":"Booking Limit for this event type has been reached"
+  "booking_limit_reached":"Booking Limit for this event type has been reached",
+  "fill_this_field": "Please fill in this field"
 }
@@ -3,10 +3,10 @@ import Link from "next/link";

 import { RouterOutputs } from "@calcom/trpc/react";
 import { Switch } from "@calcom/ui";
-import OmniInstallAppButton from "@calcom/web/components/apps/OmniInstallAppButton";

 import { SetAppDataGeneric } from "../EventTypeAppContext";
 import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
+import OmniInstallAppButton from "./OmniInstallAppButton";

 export default function AppCard({
  app,
@@ -1,11 +1,12 @@
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
 import { classNames } from "@calcom/lib";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Icon, showToast } from "@calcom/ui";

+import useAddAppMutation from "../_utils/useAddAppMutation";
+import { InstallAppButton } from "../components";
+
 /**
 * Use this component to allow installing an app from anywhere on the app.
 * Use of this component requires you to remove custom InstallAppButtonComponent so that it can manage the redirection itself
@@ -28,16 +28,15 @@ export function ManageLink(props: { calEvent: CalendarEvent; attendee: Person })
            width: "100%",
            gap: "8px",
          }}>
-          <>{t("need_to_make_a_change")}</>
+          <>{t("need_to_make_a_change")}</>{" "}
          {!props.calEvent.recurringEvent && (
            <>
              <a href={getRescheduleLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
-                <>{t("reschedule")}</>
+                <>{t("reschedule")}</>{" "}
              </a>
-              <>{t("or_lowercase")}</>
+              <>{t("or_lowercase")}</>{" "}
            </>
          )}
-
          <a href={getCancelLink(props.calEvent)} style={{ color: "#3e3e3e" }}>
            <>{t("cancel")}</>
          </a>
@@ -1,8 +1,7 @@
 import { useSession } from "next-auth/react";
-import { Trans } from "next-i18next";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert } from "@calcom/ui";
+import { TopBanner } from "@calcom/ui";

 function ImpersonatingBanner() {
  const { t } = useLocale();
@@ -11,21 +10,17 @@ function ImpersonatingBanner() {
  if (!data?.user.impersonatedByUID) return null;

  return (
-    <Alert
-      severity="warning"
-      title={
-        <>
-          {t("impersonating_user_warning", { user: data.user.username })}{" "}
-          <Trans i18nKey="impersonating_stop_instructions">
-            <a href="/auth/logout" className="underline">
-              Click Here To stop
-            </a>
-            .
-          </Trans>
-        </>
-      }
-      className="mx-4 mb-2 sm:mx-6  md:mx-8"
-    />
+    <>
+      <TopBanner
+        text={t("impersonating_user_warning", { user: data.user.username })}
+        variant="warning"
+        actions={
+          <a className="border-b border-b-black" href="/auth/logout">
+            Click Here To stop
+          </a>
+        }
+      />
+    </>
  );
 }

@@ -77,7 +77,7 @@ const AddNewTeamMembersForm = ({ defaultValues, teamId }: { defaultValues: FormV
          inviteMemberMutation.mutate({
            teamId,
            language: i18n.language,
-            role: values.role.value,
+            role: values.role,
            usernameOrEmail: values.emailOrUsername,
            sendEmailInvitation: values.sendInviteEmail,
          });
@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";

-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
@@ -78,7 +77,10 @@ export const CreateANewTeamForm = () => {
                className="mt-2"
                name="slug"
                label={t("team_url")}
-                addOnLeading={`${WEBAPP_URL}/team/`}
+                addOnLeading={`${process.env.NEXT_PUBLIC_WEBSITE_URL?.replace("https://", "")?.replace(
+                  "http://",
+                  ""
+                )}/`}
                value={value}
                onChange={(e) => {
                  newTeamFormMethods.setValue("slug", slugify(e?.target.value), {
@@ -12,8 +12,9 @@ import {
  DialogContent,
  DialogFooter,
  Form,
-  Select,
  TextField,
+  Label,
+  ToggleGroup,
 } from "@calcom/ui";

 import { PendingMember } from "../lib/types";
@@ -32,7 +33,7 @@ type MembershipRoleOption = {

 export interface NewMemberForm {
  emailOrUsername: string;
-  role: MembershipRoleOption;
+  role: MembershipRole;
  sendInviteEmail: boolean;
 }

@@ -69,7 +70,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
        title={t("invite_new_member")}
        description={
          IS_TEAM_BILLING_ENABLED ? (
-            <span className=" text-sm leading-tight text-gray-500">
+            <span className="text-sm leading-tight text-gray-500">
              <Trans i18nKey="invite_new_member_description">
                Note: This will <span className="font-medium text-gray-900">cost an extra seat ($15/m)</span>{" "}
                on your subscription.
@@ -80,7 +81,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
          )
        }>
        <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values)}>
-          <div className="space-y-4">
+          <div className="mt-6 space-y-6">
            <Controller
              name="emailOrUsername"
              control={newMemberFormMethods.control}
@@ -105,21 +106,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
            <Controller
              name="role"
              control={newMemberFormMethods.control}
-              defaultValue={options[0]}
+              defaultValue={options[0].value}
              render={({ field: { onChange } }) => (
                <div>
-                  <label
-                    className="mb-1 block text-sm font-medium tracking-wide text-gray-700"
-                    htmlFor="role">
+                  <Label className="font-medium text-gray-900" htmlFor="role">
                    {t("role")}
-                  </label>
-                  <Select
-                    defaultValue={options[0]}
-                    options={options.filter((option) => option.value !== "OWNER")}
+                  </Label>
+                  <ToggleGroup
+                    isFullWidth={true}
                    id="role"
-                    name="role"
-                    className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
-                    onChange={onChange}
+                    onValueChange={onChange}
+                    defaultValue={options[0].value}
+                    options={[
+                      { value: "ADMIN", label: t("admin") },
+                      { value: "MEMBER", label: t("member") },
+                    ]}
                  />
                </div>
              )}
@@ -127,21 +128,21 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
            <Controller
              name="sendInviteEmail"
              control={newMemberFormMethods.control}
-              defaultValue={false}
+              defaultValue={true}
              render={() => (
-                <div className="relative flex items-start">
-                  <CheckboxField
-                    description={t("send_invite_email")}
-                    onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
-                  />
-                </div>
+                <CheckboxField
+                  className="mr-0"
+                  defaultChecked={true}
+                  description={t("send_invite_email")}
+                  onChange={(e) => newMemberFormMethods.setValue("sendInviteEmail", e.target.checked)}
+                />
              )}
            />
          </div>
          <DialogFooter>
            <Button
              type="button"
-              color="secondary"
+              color="minimal"
              onClick={() => {
                props.onExit();
                newMemberFormMethods.reset();
@@ -153,7 +154,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
              color="primary"
              className="ltr:ml-2 rtl:mr-2"
              data-testid="invite-new-member-button">
-              {t("invite")}
+              {t("invite_new_member")}
            </Button>
          </DialogFooter>
        </Form>
@@ -108,7 +108,7 @@ const MembersView = () => {
                inviteMemberMutation.mutate({
                  teamId,
                  language: i18n.language,
-                  role: values.role.value,
+                  role: values.role,
                  usernameOrEmail: values.emailOrUsername,
                  sendEmailInvitation: values.sendInviteEmail,
                });
@@ -2,8 +2,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon } from "@calcom/ui";

 interface IAddVariablesDropdown {
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
-  isEmailSubject: boolean;
+  addVariable: (variable: string, isEmailSubject?: boolean) => void;
+  isEmailSubject?: boolean;
+  isTextEditor?: boolean;
 }

 const variables = [
@@ -23,9 +24,21 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
  return (
    <Dropdown>
      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
-        <div className="flex items-center ">
-          {t("add_variable")}
-          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+        <div className="items-center ">
+          {props.isTextEditor ? (
+            <>
+              <div className="hidden sm:flex">
+                {t("add_variable")}
+                <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+              </div>
+              <div className="block sm:hidden">+</div>
+            </>
+          ) : (
+            <div className="flex">
+              {t("add_variable")}
+              <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+            </div>
+          )}
        </div>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="h-40 overflow-scroll">
@@ -39,7 +52,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
                key={variable}
                type="button"
                className="w-full px-4 py-2"
-                onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
+                onClick={() => props.addVariable(t(`${variable}_workflow`), props.isEmailSubject)}>
                <div className="sm:grid sm:grid-cols-2">
                  <div className="mr-3 text-left md:col-span-1">
                    {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
@@ -0,0 +1,69 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TRANSFORMERS } from "@lexical/markdown";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { UseFormReturn } from "react-hook-form";
+
+import { FormValues } from "../../pages/workflow";
+import ExampleTheme from "./ExampleTheme";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import "./stylesEditor.css";
+
+export type TextEditorProps = {
+  form: UseFormReturn<FormValues>;
+  stepNumber: number;
+};
+
+const editorConfig = {
+  // The editor theme
+  theme: ExampleTheme,
+  // Handling of errors during update
+  onError(error: any) {
+    throw error;
+  },
+  namespace: "",
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+  ],
+};
+
+export default function Editor(props: TextEditorProps) {
+  return (
+    <div className="editor">
+      <LexicalComposer initialConfig={editorConfig}>
+        <div className="editor-container">
+          <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
+          <div className="editor-inner">
+            <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} placeholder="" />
+            <AutoFocusPlugin />
+            <ListPlugin />
+            <LinkPlugin />
+            <AutoLinkPlugin />
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          </div>
+        </div>
+      </LexicalComposer>
+    </div>
+  );
+}
@@ -0,0 +1,24 @@
+const exampleTheme = {
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem",
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem",
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+  },
+};
+
+export default exampleTheme;
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
+  <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+  <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
+</svg>
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
+  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+  <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
+  <path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
+  <path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>
@@ -0,0 +1,36 @@
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text: any) => {
+    const match = URL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: match[0],
+      }
+    );
+  },
+  (text: any) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`,
+      }
+    );
+  },
+];
+
+export default function PlaygroundAutoLinkPlugin() {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}
@@ -0,0 +1,526 @@
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  RangeSelection,
+  NodeSelection,
+  GridSelection,
+  $getRoot,
+  $insertNodes,
+  LexicalEditor,
+  EditorState,
+} from "lexical";
+import { RefObject, Dispatch, SetStateAction } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { Icon } from "@calcom/ui";
+
+import { AddVariablesDropdown } from "../../AddVariablesDropdown";
+import { TextEditorProps } from "../Editor";
+
+const LowPriority = 1;
+
+const supportedBlockTypes = new Set(["paragraph", "h1", "h2", "ul", "ol"]);
+
+interface BlockType {
+  [key: string]: string;
+}
+
+const blockTypeToBlockName: BlockType = {
+  h1: "Large Heading",
+  h2: "Small Heading",
+  ol: "Numbered List",
+  paragraph: "Normal",
+  ul: "Bulleted List",
+};
+
+function positionEditorElement(editor: HTMLInputElement, rect: DOMRect | null) {
+  if (rect === null) {
+    editor.style.opacity = "0";
+    editor.style.top = "-1000px";
+    editor.style.left = "-1000px";
+  } else {
+    editor.style.opacity = "1";
+    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
+    editor.style.left = `${rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2}px`;
+  }
+}
+
+function FloatingLinkEditor({ editor }: { editor: LexicalEditor }) {
+  const editorRef = useRef<HTMLInputElement>(null);
+  const mouseDownRef = useRef(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<RangeSelection | NodeSelection | GridSelection | null>(
+    null
+  );
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl("");
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      !nativeSelection?.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection?.anchorNode || null)
+    ) {
+      const domRange = nativeSelection?.getRangeAt(0);
+      let rect: DOMRect | undefined;
+      if (nativeSelection?.anchorNode === rootElement) {
+        let inner: Element = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange?.getBoundingClientRect();
+      }
+      if (!mouseDownRef.current) {
+        positionEditorElement(editorElem, rect || null);
+      }
+
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      positionEditorElement(editorElem, null);
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl("");
+    }
+
+    return true;
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }: { editorState: EditorState }) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <input
+          ref={inputRef}
+          className="link-input"
+          value={linkUrl}
+          onChange={(event) => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              if (lastSelection !== null) {
+                if (linkUrl !== "") {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+                }
+                setEditMode(false);
+              }
+            } else if (event.key === "Escape") {
+              event.preventDefault();
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <>
+          <div className="link-input">
+            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+              {linkUrl}
+            </a>
+            <div
+              className="link-edit"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setEditMode(true);
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function getSelectedNode(selection: RangeSelection) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+type BlockOptionsDropdownProps = {
+  editor: LexicalEditor;
+  blockType: string;
+  toolbarRef: RefObject<HTMLDivElement>;
+  setShowBlockOptionsDropDown: Dispatch<SetStateAction<boolean>>;
+};
+
+function BlockOptionsDropdownList({
+  editor,
+  blockType,
+  toolbarRef,
+  setShowBlockOptionsDropDown,
+}: BlockOptionsDropdownProps) {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown && toolbar !== null) {
+      const handle = (event: any) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="dropdown" ref={dropDownRef}>
+      <button type="button" className="item" onClick={formatParagraph}>
+        <span className="icon paragraph" />
+        <span className="text">Normal</span>
+        {blockType === "paragraph" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatBulletList}>
+        <span className="icon bullet-list" />
+        <span className="text">Bullet List</span>
+        {blockType === "ul" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatNumberedList}>
+        <span className="icon numbered-list" />
+        <span className="text">Numbered List</span>
+        {blockType === "ol" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatLargeHeading}>
+        <span className="icon large-heading" />
+        <span className="text">Large Heading</span>
+        {blockType === "h1" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatSmallHeading}>
+        <span className="icon small-heading" />
+        <span className="text">Small Heading</span>
+        {blockType === "h2" && <span className="active" />}
+      </button>
+    </div>
+  );
+}
+
+export default function ToolbarPlugin(props: TextEditorProps) {
+  const [editor] = useLexicalComposerContext();
+  const toolbarRef = useRef(null);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element = anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          setBlockType(type);
+        }
+      }
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  const addVariable = (variable: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        editor.update(() => {
+          const formatedVariable = `{${variable.toUpperCase().replace(/ /g, "_")}}`;
+          selection?.insertRawText(formatedVariable);
+        });
+      }
+    });
+  };
+
+  useEffect(() => {
+    editor.update(() => {
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(
+        props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody`) || "",
+        "text/html"
+      );
+
+      const nodes = $generateNodesFromDOM(editor, dom);
+
+      $getRoot().select();
+      $insertNodes(nodes);
+
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          const textInHtml = $generateHtmlFromNodes(editor);
+          props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, textInHtml);
+          props.form.clearErrors();
+        });
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  return (
+    <div className="toolbar flex" ref={toolbarRef}>
+      <>
+        {supportedBlockTypes.has(blockType) && (
+          <>
+            <button
+              type="button"
+              className="toolbar-item block-controls"
+              onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+              aria-label="Formatting Options">
+              <span className={"icon block-type " + blockType} />
+              <span className="text hidden sm:flex">
+                {blockTypeToBlockName[blockType as keyof BlockType]}
+              </span>
+              <Icon.FiChevronDown className="h-4 w-4" />
+            </button>
+            {showBlockOptionsDropDown &&
+              createPortal(
+                <BlockOptionsDropdownList
+                  editor={editor}
+                  blockType={blockType}
+                  toolbarRef={toolbarRef}
+                  setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
+                />,
+                document.body
+              )}
+          </>
+        )}
+
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              if (isItalic) {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+              }
+            }}
+            className={"toolbar-item spaced " + (isBold ? "active" : "")}
+            aria-label="Format Bold">
+            <i className="format bold" />
+          </button>
+          <button
+            type="button"
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+              if (isBold) {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              }
+            }}
+            className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+            aria-label="Format Italics">
+            <i className="format italic" />
+          </button>
+          <button
+            type="button"
+            onClick={insertLink}
+            className={"toolbar-item spaced " + (isLink ? "active" : "")}
+            aria-label="Insert Link">
+            <i className="format link" />
+          </button>
+          {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
+        </>
+        <div className="ml-auto">
+          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} isTextEditor={true} />
+        </div>
+      </>
+    </div>
+  );
+}
@@ -0,0 +1,402 @@
+
+.editor a {
+  color: #0000FF;
+  text-decoration: underline;
+  font-size: 14px;
+}
+
+.editor li {
+  padding-left: 1.28571429em;
+  text-indent: -1.28571429em;
+}
+
+.editor ul {
+  list-style: disc inside
+}
+
+.editor ol {
+  list-style: decimal inside
+}
+
+.editor-container {
+  border-radius: 6px;
+  position: relative;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  border-color: #D1D5DB;
+  border-width: 1px;
+  padding: 1px
+}
+
+.editor-inner {
+  background: #fff;
+  position: relative;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  height: 200px;
+  overflow: scroll;
+  resize: vertical;
+}
+
+.editor-input {
+  min-height: 150px;
+  font-size: 14px;
+  position: relative;
+  tab-size: 1;
+  outline: 0;
+  padding: 15px 10px;
+  outline: none
+}
+
+.editor-text-bold {
+  font-weight: bold;
+}
+
+.editor-text-italic {
+  font-style: italic;
+}
+
+.editor-link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+
+.editor-tokenFunction {
+  color: #dd4a68;
+}
+
+.editor-paragraph {
+  margin: 0;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.editor-heading-h1 {
+  font-size: 25px;
+  font-weight: 400;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+
+.editor-heading-h2 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+
+.editor-list-ul  {
+  margin-bottom: 12px;
+}
+
+.editor-list-ol  {
+  margin-bottom: 12px;
+}
+
+
+.editor-listitem {
+  margin: 0px 32px;
+}
+
+.editor-nested-listitem {
+ list-style-type: none;
+}
+
+pre::-webkit-scrollbar {
+  background: transparent;
+  width: 10px;
+}
+
+pre::-webkit-scrollbar-thumb {
+  background: #999;
+}
+
+.toolbar {
+  display: flex;
+  margin-bottom: 1px;
+  background: #fff;
+  padding: 2px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  vertical-align: middle;
+}
+
+.toolbar button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+  height: 36px;
+}
+
+.toolbar button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+.toolbar button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.icon.paragraph {
+  background-image: url(images/icons/text-paragraph.svg);
+}
+
+.toolbar button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.toolbar button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.toolbar .toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.toolbar select.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.toolbar .toolbar-item .text {
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+#block-controls button:hover {
+  background-color: #efefef;
+}
+
+#block-controls button:focus-visible {
+  border-color: blue;
+}
+
+.dropdown {
+  z-index: 5;
+  display: block;
+  position: absolute;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-width: 100px;
+  min-height: 40px;
+  background-color: #fff;
+}
+
+.dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  min-width: 268px;
+}
+
+.dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.dropdown .item:hover {
+  background-color: #eee;
+}
+
+.dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  width: 200px;
+}
+
+.dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.link-editor {
+  position: absolute;
+  z-index: 100;
+  top: -10000px;
+  left: -10000px;
+  margin-top: -6px;
+  max-width: 300px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 24px);
+  box-sizing: border-box;
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  background-color: #eee;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor div.link-edit {
+  background-image: url(images/icons/pencil-fill.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input a {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}
+
+.icon.paragraph {
+  background-image: url(images/icons/text-paragraph.svg);
+}
+
+.icon.large-heading,
+.icon.h1 {
+  background-image: url(images/icons/type-h1.svg);
+}
+
+.icon.small-heading,
+.icon.h2 {
+  background-image: url(images/icons/type-h2.svg);
+}
+
+.icon.bullet-list,
+.icon.ul {
+  background-image: url(images/icons/list-ul.svg);
+}
+
+.icon.numbered-list,
+.icon.ol {
+  background-image: url(images/icons/list-ol.svg);
+}
+
+i.bold {
+  background-image: url(images/icons/type-bold.svg);
+}
+
+i.italic {
+  background-image: url(images/icons/type-italic.svg);
+}
+
+i.link {
+  background-image: url(images/icons/link.svg);
+}
@@ -41,6 +41,7 @@ import {
 } from "../lib/getOptions";
 import { translateVariablesToEnglish } from "../lib/variableTranslations";
 import type { FormValues } from "../pages/workflow";
+import Editor from "./TextEditor/Editor";
 import { TimeTimeUnitInput } from "./TimeTimeUnitInput";

 type WorkflowStepProps = {
@@ -107,7 +108,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {

  const refReminderBody = useRef<HTMLTextAreaElement | null>(null);

-  const addVariable = (isEmailSubject: boolean, variable: string) => {
+  const addVariable = (variable: string, isEmailSubject?: boolean) => {
    if (step) {
      if (isEmailSubject) {
        const currentEmailSubject = refEmailSubject?.current?.value || "";
@@ -291,23 +292,32 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                        className="text-sm"
                        onChange={(val) => {
                          if (val) {
-                            if (val.value === WorkflowActions.SMS_NUMBER) {
-                              setIsPhoneNumberNeeded(true);
+                            const oldValue = form.getValues(`steps.${step.stepNumber - 1}.action`);
+                            const wasSMSAction =
+                              oldValue === WorkflowActions.SMS_ATTENDEE ||
+                              oldValue === WorkflowActions.SMS_NUMBER;
+                            const isSMSAction =
+                              val.value === WorkflowActions.SMS_ATTENDEE ||
+                              val.value === WorkflowActions.SMS_NUMBER;
+
+                            if (isSMSAction) {
                              setIsSenderIdNeeded(true);
                              setIsEmailAddressNeeded(false);
-                            } else if (val.value === WorkflowActions.EMAIL_ADDRESS) {
-                              setIsEmailAddressNeeded(true);
-                              setIsPhoneNumberNeeded(false);
-                              setIsSenderIdNeeded(false);
-                            } else if (val.value === WorkflowActions.SMS_ATTENDEE) {
-                              setIsSenderIdNeeded(true);
-                              setIsEmailAddressNeeded(false);
-                              setIsPhoneNumberNeeded(false);
+                              setIsPhoneNumberNeeded(val.value === WorkflowActions.SMS_NUMBER);
+
+                              if (!wasSMSAction) {
+                                form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, "");
+                              }
                            } else {
-                              setIsEmailAddressNeeded(false);
                              setIsPhoneNumberNeeded(false);
                              setIsSenderIdNeeded(false);
+                              setIsEmailAddressNeeded(val.value === WorkflowActions.EMAIL_ADDRESS);
+
+                              if (wasSMSAction) {
+                                form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, "");
+                              }
                            }
+
                            form.unregister(`steps.${step.stepNumber - 1}.sendTo`);
                            form.clearErrors(`steps.${step.stepNumber - 1}.sendTo`);
                            if (
@@ -424,8 +434,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
              {isCustomReminderBodyNeeded && (
                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
                  {isEmailSubjectNeeded && (
-                    <div className="mb-5">
-                      <div className="mb-2 flex items-center">
+                    <div className="mb-6">
+                      <div className="flex items-center">
                        <Label className="mb-0 flex-none">{t("subject")}</Label>
                        <div className="flex-grow text-right">
                          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
@@ -436,7 +446,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                          emailSubjectFormRef?.(e);
                          refEmailSubject.current = e;
                        }}
-                        className="my-0"
+                        rows={1}
+                        className="my-0 focus:ring-transparent"
                        required
                        {...restEmailSubjectForm}
                      />
@@ -448,26 +459,41 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                        )}
                    </div>
                  )}
-                  <div className="mb-2 flex items-center">
-                    <Label className="mb-0 flex-none">
-                      {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
-                    </Label>
-                    <div className="flex-grow text-right">
-                      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
-                    </div>
-                  </div>
-                  <TextArea
-                    ref={(e) => {
-                      reminderBodyFormRef?.(e);
-                      refReminderBody.current = e;
-                    }}
-                    className="my-0 h-24"
-                    required
-                    {...restReminderBodyForm}
-                  />
+
+                  {step.action !== WorkflowActions.SMS_ATTENDEE &&
+                  step.action !== WorkflowActions.SMS_NUMBER ? (
+                    <>
+                      <div className="mb-2 flex items-center pb-[1.5px]">
+                        <Label className="mb-0 flex-none ">
+                          {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
+                        </Label>
+                      </div>
+                      <Editor form={form} stepNumber={step.stepNumber} />
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex items-center">
+                        <Label className="mb-0 flex-none">
+                          {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
+                        </Label>
+                        <div className="flex-grow text-right">
+                          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+                        </div>
+                      </div>
+                      <TextArea
+                        ref={(e) => {
+                          reminderBodyFormRef?.(e);
+                          refReminderBody.current = e;
+                        }}
+                        className="my-0 h-24"
+                        required
+                        {...restReminderBodyForm}
+                      />
+                    </>
+                  )}
                  {form.formState.errors.steps &&
                    form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
-                      <p className="mt-1 text-xs text-red-500">
+                      <p className="mt-1 text-sm text-red-500">
                        {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
                      </p>
                    )}
@@ -61,6 +61,7 @@ const formSchema = z.object({
      sendTo: z
        .string()
        .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
+        .optional()
        .nullable(),
      sender: z
        .string()
@@ -95,6 +96,7 @@ function WorkflowPage() {
    data: workflow,
    isError,
    error,
+    isLoading,
  } = trpc.viewer.workflows.get.useQuery(
    { id: +workflowId },
    {
@@ -103,7 +105,7 @@ function WorkflowPage() {
  );

  useEffect(() => {
-    if (workflow) {
+    if (workflow && !isLoading) {
      setSelectedEventTypes(
        workflow.activeOn.map((active) => ({
          value: String(active.eventType.id),
@@ -143,7 +145,7 @@ function WorkflowPage() {
      form.setValue("activeOn", activeOn || []);
      setIsAllDataLoaded(true);
    }
-  }, [workflow]);
+  }, [isLoading]);

  const updateMutation = trpc.viewer.workflows.update.useMutation({
    onSuccess: async ({ workflow }) => {
@@ -172,30 +174,49 @@ function WorkflowPage() {
      form={form}
      handleSubmit={async (values) => {
        let activeOnEventTypeIds: number[] = [];
+        let isEmpty = false;

        values.steps.forEach((step) => {
+          const isSMSAction =
+            step.action === WorkflowActions.SMS_ATTENDEE || step.action === WorkflowActions.SMS_NUMBER;
+
+          const strippedHtml = step.reminderBody?.replace(/<[^>]+>/g, "") || "";
+
+          const isBodyEmpty =
+            step.template === WorkflowTemplates.CUSTOM && !isSMSAction && strippedHtml.length <= 1;
+
+          if (isBodyEmpty) {
+            form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
+              type: "custom",
+              message: t("fill_this_field"),
+            });
+          }
+
          if (step.reminderBody) {
            step.reminderBody = translateVariablesToEnglish(step.reminderBody, { locale: i18n.language, t });
          }
          if (step.emailSubject) {
            step.emailSubject = translateVariablesToEnglish(step.emailSubject, { locale: i18n.language, t });
          }
+          isEmpty = !isEmpty ? isBodyEmpty : isEmpty;
        });

-        if (values.activeOn) {
-          activeOnEventTypeIds = values.activeOn.map((option) => {
-            return parseInt(option.value, 10);
+        if (!isEmpty) {
+          if (values.activeOn) {
+            activeOnEventTypeIds = values.activeOn.map((option) => {
+              return parseInt(option.value, 10);
+            });
+          }
+          updateMutation.mutate({
+            id: parseInt(router.query.workflow as string, 10),
+            name: values.name,
+            activeOn: activeOnEventTypeIds,
+            steps: values.steps,
+            trigger: values.trigger,
+            time: values.time || null,
+            timeUnit: values.timeUnit || null,
          });
        }
-        updateMutation.mutate({
-          id: parseInt(router.query.workflow as string, 10),
-          name: values.name,
-          activeOn: activeOnEventTypeIds,
-          steps: values.steps,
-          trigger: values.trigger,
-          time: values.time || null,
-          timeUnit: values.timeUnit || null,
-        });
      }}>
      <Shell
        backPath="/workflows"
@@ -4,5 +4,9 @@
  "description": "Cal.com's main collocation of features",
  "authors": "Cal.com, Inc.",
  "version": "1.0.0",
-  "main": "index.ts"
+  "main": "index.ts",
+  "dependencies": {
+    "@lexical/react": "^0.5.0",
+    "lexical": "^0.5.0"
+  }
 }
@@ -1,6 +1,8 @@
 import type { IncomingMessage } from "http";
 import type { Session } from "next-auth";

+import type { PrismaClient } from "@calcom/prisma/client";
+
 import "./next-auth";

 export declare module "next" {
@@ -8,5 +10,15 @@ export declare module "next" {
    // args is defined by /integrations/[...args] endpoint
    query: Partial<{ [key: string]: string | string[] }> & { args: string[] };
    session?: Session | null;
+    // ⬇ These are needed by @calcom/api
+    body: unkown;
+    userId: number;
+    method: string;
+    prisma: PrismaClient;
+    // session: { user: { id: number } };
+    // query: Partial<{ [key: string]: string | string[] }>;
+    isAdmin: boolean;
+    isCustomPrisma: boolean;
+    pagination: { take: number; skip: number };
  }
 }
@@ -8,6 +8,7 @@ type Props = InputHTMLAttributes<HTMLInputElement> & {
  descriptionAsLabel?: boolean;
  informationIconText?: string;
  error?: boolean;
+  className?: string;
 };

 const CheckboxField = forwardRef<HTMLInputElement, Props>(
@@ -53,7 +54,8 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                      !error && disabled
                        ? "bg-gray-300 checked:bg-gray-300"
                        : "checked:bg-gray-800 hover:bg-gray-100",
-                      error && "border-red-800 checked:bg-red-800 hover:bg-red-400"
+                      error && "border-red-800 checked:bg-red-800 hover:bg-red-400",
+                      rest.className
                    )}
                  />
                </div>
@@ -166,7 +166,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
        addOnSuffix={
          <Tooltip content={textLabel}>
            <button
-              className="absolute right-3 bottom-0 h-9 text-gray-900"
+              className="absolute bottom-0 right-3 h-9 text-gray-900"
              type="button"
              onClick={() => toggleIsPasswordVisible()}>
              {isPasswordVisible ? (
@@ -219,7 +219,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
      ref={ref}
      {...props}
      className={classNames(
-        "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm",
+        "block w-full rounded-md border border-gray-300 py-2 px-3 text-sm hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1",
        props.className
      )}
    />
@@ -86,7 +86,7 @@ export {
 } from "./v2/core/Dropdown";
 export { RadioGroup } from "./v2/core/form";
 export { BooleanToggleGroupField } from "./v2/core/form/BooleanToggleGroup";
-export { default as DateRangePicker } from "./v2/core/form/date-range-picker/DateRangePicker";
+export { DateRangePickerLazy as DateRangePicker } from "./v2/core/form/date-range-picker";
 export { default as DatePickerField } from "./v2/core/form/DatePicker";
 export { default as FormCard } from "./v2/core/form/FormCard";
 export { default as MultiSelectCheckboxes } from "./v2/core/form/MultiSelectCheckboxes";
@@ -20,6 +20,7 @@
    "@radix-ui/react-portal": "^1.0.0",
    "@radix-ui/react-select": "^0.1.1",
    "@tanstack/react-query": "^4.3.9",
+    "@wojtekmaj/react-daterange-picker": "^3.3.1",
    "class-variance-authority": "^0.3.0",
    "downshift": "^6.1.9",
    "next": "^12.3.1",
@@ -7,9 +7,10 @@ export const ToggleGroupItem = () => <div>hi</div>;

 interface ToggleGroupProps extends Omit<RadixToggleGroup.ToggleGroupSingleProps, "type"> {
  options: { value: string; label: string }[];
+  isFullWidth?: boolean;
 }

-export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupProps) => {
+export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: ToggleGroupProps) => {
  const [value, setValue] = useState<string | undefined>(props.defaultValue);
  const [activeToggleElement, setActiveToggleElement] = useState<null | HTMLButtonElement>(null);

@@ -25,7 +26,8 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
        onValueChange={setValue}
        className={classNames(
          "dark:border-darkgray-200 relative inline-flex rounded-md border border-gray-200 p-1",
-          props.className
+          props.className,
+          isFullWidth && "w-full"
        )}>
        {/* Active toggle. It's a separate element so we can animate it nicely. */}
        <span
@@ -37,7 +39,10 @@ export const ToggleGroup = ({ options, onValueChange, ...props }: ToggleGroupPro
          <RadixToggleGroup.Item
            key={option.value}
            value={option.value}
-            className="relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium"
+            className={classNames(
+              "relative rounded-[4px] px-3 py-1 text-sm dark:text-neutral-200 [&[aria-checked='false']]:hover:font-medium",
+              isFullWidth && "w-full"
+            )}
            ref={(node) => {
              if (node && value === option.value) {
                setActiveToggleElement(node);
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic";
+
+export const DateRangePickerLazy = dynamic(
+  () => import("./DateRangePicker")
+) as unknown as typeof import("./DateRangePicker").default;
@@ -17,7 +17,7 @@ export default function AdminLayout({
  // Force redirect on component level
  useEffect(() => {
    if (session.data && session.data.user.role !== UserPermissionRole.ADMIN) {
-      router.replace("/settings");
+      router.replace("/settings/my-account/profile");
    }
  }, [session, router]);

@@ -6,11 +6,11 @@ import { localStorage } from "@calcom/lib/webstorage";

 import Card from "../../core/Card";

-const tips = [
+export const tips = [
  {
    id: 1,
    thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
-    mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
+    mediaLink: "https://go.cal.com/dynamic-video",
    title: "Dynamic booking links",
    description: "Booking link that allows people to quickly schedule meetings.",
    href: "https://cal.com/blog/cal-v-1-9",
@@ -18,7 +18,7 @@ const tips = [
  {
    id: 2,
    thumbnailUrl: "https://img.youtube.com/vi/EAc46SPL6iA/0.jpg",
-    mediaLink: "https://youtu.be/EAc46SPL6iA",
+    mediaLink: "https://go.cal.com/teams-video",
    title: "How to set up Teams",
    description: "Learn how to use round-robin and collective events.",
    href: "https://docs.cal.com/deep-dives/event-types",
@@ -26,7 +26,7 @@ const tips = [
  {
    id: 3,
    thumbnailUrl: "https://img.youtube.com/vi/c7ZKFuLy1fg/0.jpg",
-    mediaLink: "https://youtu.be/c7ZKFuLy1fg",
+    mediaLink: "https://go.cal.com/routing-video",
    title: "Routing Forms, Workflows",
    description: "Ask screening questions of potential bookers to connect them with the right person",
    href: "https://cal.com/blog/cal-v-1-8",
@@ -34,7 +34,7 @@ const tips = [
  {
    id: 4,
    thumbnailUrl: "https://img.youtube.com/vi/zGr_s-fG84k/0.jpg",
-    mediaLink: "https://youtu.be/zGr_s-fG84k",
+    mediaLink: "https://go.cal.com/confirmation-video",
    title: "Requires Confirmation",
    description: "Learn how to be in charge of your bookings",
    href: "https://docs.cal.com/deep-dives/event-types#opt-in-booking",
@@ -42,11 +42,19 @@ const tips = [
  {
    id: 5,
    thumbnailUrl: "https://img.youtube.com/vi/0v_nQtpxC_4/0.jpg",
-    mediaLink: "https://youtu.be/0v_nQtpxC_4",
+    mediaLink: "https://go.cal.com/payments-video",
    title: "Accept Payments",
    description: "Charge for your time with Cal.com's Stripe App",
    href: "https://app.cal.com/apps/stripe",
  },
+  {
+    id: 6,
+    thumbnailUrl: "https://img.youtube.com/vi/yGiZo1Ry5-8/0.jpg",
+    mediaLink: "https://go.cal.com/recurring-video",
+    title: "Recurring Bookings",
+    description: "Learn how to create a recurring schedule",
+    href: "https://go.cal.com/recurring-video",
+  },
 ];

 export default function Tips() {
@@ -5907,16 +5907,6 @@
    "@sendgrid/client" "^7.7.0"
    "@sendgrid/helpers" "^7.7.0"

-"@sentry/browser@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.17.4.tgz#2e4ad09180905929b823d01e2a029f10933c0a03"
-  integrity sha512-cNLQ/6ea0KOZyLKXGLTdgfqWYdg43+T/uF9D/hmc6kp/5qXm2dR3FcFRZX6OicaENM3dXvSoBIF6bSWmcszRtQ==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/browser@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.20.0.tgz#e917cab48d3bba2fe8a2e3a8987b0bd9b9149db8"
@@ -5940,15 +5930,6 @@
    proxy-from-env "^1.1.0"
    which "^2.0.2"

-"@sentry/core@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.17.4.tgz#62686e1b2baf4e7ba3d9ca57d91d2dfc643b8250"
-  integrity sha512-U3ABSJBKGK8dJ01nEG2+qNOb6Wv7U3VqoajiZxfV4lpPWNFGCoEhiTytxBlFTOCmdUH8209zSZiWJZaDLy+TSA==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/core@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.20.0.tgz#7becd848c982d5422627f69c4061d5914946c54a"
@@ -5958,16 +5939,6 @@
    "@sentry/utils" "7.20.0"
    tslib "^1.9.3"

-"@sentry/integrations@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.17.4.tgz#facdc4abb1d4714175c7d66bab634a898cc7eead"
-  integrity sha512-9vL0RRLuMnj0mj61THgRhDUCgTGYbRoCT6HmLGrErHjyTG3d7lUgUwTBQPgw9qYLss1uLKoEtRvcxgtW7ef0BA==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    localforage "^1.8.1"
-    tslib "^1.9.3"
-
 "@sentry/integrations@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/integrations/-/integrations-7.20.0.tgz#78fc544847c5516acb86fc507d0bfdaedb295fd8"
@@ -5978,25 +5949,6 @@
    localforage "^1.8.1"
    tslib "^1.9.3"

-"@sentry/nextjs@^7.17.3":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.17.4.tgz#9c6d71d17e37da3fcbe753a374e93307a56dbf02"
-  integrity sha512-l4aHhkYjiC49yvvu/iG0CZGpAfmWdVQ4PlcnzqO9XY40So1LixY7idJEDefqx6LSZ1+VadpZT0o6iRwHfuOllQ==
-  dependencies:
-    "@rollup/plugin-sucrase" "4.0.4"
-    "@rollup/plugin-virtual" "3.0.0"
-    "@sentry/core" "7.17.4"
-    "@sentry/integrations" "7.17.4"
-    "@sentry/node" "7.17.4"
-    "@sentry/react" "7.17.4"
-    "@sentry/tracing" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    "@sentry/webpack-plugin" "1.20.0"
-    chalk "3.0.0"
-    rollup "2.78.0"
-    tslib "^1.9.3"
-
 "@sentry/nextjs@^7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-7.20.0.tgz#e30cdf43be4bf0bc955b4e8d3f8eacccada21900"
@@ -6016,19 +5968,6 @@
    rollup "2.78.0"
    tslib "^1.9.3"

-"@sentry/node@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.17.4.tgz#647ebcbd7228e5fa326dc3f95aceab34771205d3"
-  integrity sha512-cR+Gsir9c/tzFWxvk4zXkMQy6tNRHEYixHrb88XIjZVYDqDS9l2/bKs5nJusdmaUeLtmPp5Et2o7RJyS7gvKTQ==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    cookie "^0.4.1"
-    https-proxy-agent "^5.0.0"
-    lru_map "^0.3.3"
-    tslib "^1.9.3"
-
 "@sentry/node@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-7.20.0.tgz#a32e37b2c93607e8b8d7f3741f60418ec2d99ddb"
@@ -6042,17 +5981,6 @@
    lru_map "^0.3.3"
    tslib "^1.9.3"

-"@sentry/react@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.17.4.tgz#1d2c752841ace0561043be6a863de9fc7437f64c"
-  integrity sha512-Hw8lgeCgUthgVQ5OG24/iZWGNXnxodVfCmfngeIfqUWeFgQUae1V833GNkYZCiE5j2yjNVh3LL2bXA8PnvMCEg==
-  dependencies:
-    "@sentry/browser" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    hoist-non-react-statics "^3.3.2"
-    tslib "^1.9.3"
-
 "@sentry/react@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.20.0.tgz#41e1edb5a7330bf15ab06e0c0b3e0be7cf36a7d3"
@@ -6064,16 +5992,6 @@
    hoist-non-react-statics "^3.3.2"
    tslib "^1.9.3"

-"@sentry/tracing@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.17.4.tgz#1254f4eb7397e1134248de1dade33d2fec864005"
-  integrity sha512-9Fz6DI16ddnd970mlB5MiCNRSmSXp4SVZ1Yv3L22oS3kQeNxjBTE+htYNwJzSPrQp9aL/LqTYwlnrCy24u9XQA==
-  dependencies:
-    "@sentry/core" "7.17.4"
-    "@sentry/types" "7.17.4"
-    "@sentry/utils" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/tracing@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.20.0.tgz#346bf72bc5574ac78de43bd8ab6f6027f8b64cbd"
@@ -6084,24 +6002,11 @@
    "@sentry/utils" "7.20.0"
    tslib "^1.9.3"

-"@sentry/types@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.17.4.tgz#476522bc988989101e7aee9eee3c3f8f16fa59ea"
-  integrity sha512-QJj8vO4AtxuzQfJIzDnECSmoxwnS+WJsm1Ta2Cwdy+TUCBJyWpW7aIJJGta76zb9gNPGb3UcAbeEjhMJBJeRMQ==
-
 "@sentry/types@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.20.0.tgz#ace232e00407355dccedf65e27471635b4331265"
  integrity sha512-x17ddduGWqW95neBFVvxzmInb5WXVw+2PcNASHXpGFhi7v2gz2a7/w2CcIKxsqODNnc+z/k1t0Y+uy9B6aH6ag==

-"@sentry/utils@7.17.4":
-  version "7.17.4"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.17.4.tgz#b8f4fb6a329765b97668b34f6d397e8de2169fef"
-  integrity sha512-ioG0ANy8uiWzig82/e7cc+6C9UOxkyBzJDi1luoQVDH6P0/PvM8GzVU+1iUVUipf8+OL1Jh09GrWnd5wLm3XNQ==
-  dependencies:
-    "@sentry/types" "7.17.4"
-    tslib "^1.9.3"
-
 "@sentry/utils@7.20.0":
  version "7.20.0"
  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.20.0.tgz#cca09e2256b64bfb41a78c89af3c88fcc7ca84c2"
@@ -8118,16 +8023,11 @@
  dependencies:
    "@types/node" "*"

-"@types/node@*", "@types/node@16.9.1", "@types/node@>=4.0", "@types/node@>=8.1.0", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
+"@types/node@*", "@types/node@16.9.1", "@types/node@>=4.0", "@types/node@>=8.1.0", "@types/node@^12.12.54", "@types/node@^12.12.6", "@types/node@^14.0.10 || ^16.0.0", "@types/node@^14.14.20 || ^16.0.0":
  version "16.9.1"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.9.1.tgz#0611b37db4246c937feef529ddcc018cf8e35708"
  integrity sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==

-"@types/node@^12.12.54", "@types/node@^12.12.6":
-  version "12.20.55"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.20.55.tgz#c329cbd434c42164f846b909bd6f85b5537f6240"
-  integrity sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==
-
 "@types/nodemailer@^6.4.5":
  version "6.4.5"
  resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.5.tgz#09011ac73259245475d1688e4ba101860567dc39"
Author	SHA1	Message	Date
zomars	d9846dca4c	v2.3.1 release.yml / release (push) Canceled after 0s Details	2022-11-26 07:16:23 -07:00
zomars	2fd606c38e	Fixed circular dependecy that was messing with website	2022-11-26 06:54:55 -07:00
zomars	c066a0cba9	Flaky test improvement	2022-11-26 06:54:55 -07:00
Peer Richelsen	568cc22c60	added tracking links to tips (#5690 )	2022-11-26 13:10:45 +00:00
GitStart gitstart Nitesh Singh Matheus Muniz Rafael Toledo Rafael Matheus Benini Ferreira Murilo Amaral Peer Richelsen kodiakhq[bot]	b3243c53dc	[CAL-440] Font size of text area gets larger on mobile (#5677 ) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: Rafael <rafael.toledo@engenharia.ufjf.br> Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com> Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2022-11-26 12:50:55 +00:00
alannnc	80ffcf8b58	fix/event-type-location-select (#5692 ) * Fixed dialog components usage * Fix styles	2022-11-25 13:19:08 -07:00
+1 GitStart gitstart gitstart Matheus Muniz Matheus Benini Ferreira Nitesh Singh Matheus Benini Murilo Amaral Rafael Toledo Alex van Andel kodiakhq[bot]	77bf14a797	[CAL-317] Confirmation Email - Footer text isn't properly formatted (#5676 ) Co-authored-by: gitstart <gitstart@users.noreply.github.com> Co-authored-by: gitstart <gitstart@gitstart.com> Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com> Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com> Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev> Co-authored-by: Matheus Benini <matheus_benini@hotmail.com> Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com> Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>	2022-11-25 18:02:30 +00:00
Alex van Andel	b188368e8f	Defaults to !!eventType.schedule (#5688 )	2022-11-25 17:13:42 +00:00
zomars	e35631aee3	Update api	2022-11-25 08:11:10 -07:00
Carina WollendorferandCarinaWolli	733a06a672	Show correct cancelled page after cancellation (#5664 ) * fix cancelled page and cross out dates * delete old cancel success page * fix e2e tests Co-authored-by: CarinaWolli <wollencarina@gmail.com>	2022-11-25 07:49:59 -07:00
Carina WollendorferandCarinaWolli	2de3e7fc59	Text editor for custom workflow templates (#5654 ) * add first version of text editor * add new editor to email body * fix line height * remove not needed styles * allow adding html tags + small refactoring * fix error when input is empty * styling of add variable dropdown * fix bg on focus * small design fixes * improve design * show error message for no input * text editor only for email body * remove test button * code clean up * code clean up * code clean up * fix that added variables weren't saved * fix import * first version of editor * connect reminder body of form with new editor * add pencile for link-editor * remove TreeViewPlugin * clean up css file * code clean up * add text indent for list * improve editor design * fix style * slow resizing of editor * fix that new data was removed when leaving tab * dont allow italic and bold at same time * code clean up * fix type error * code clean up * code clean up * remove text if changed from SMS to email or other way around * add add variable dropdown * show error message if email body is empty * add white-space pre-wrap * fix import * prettier * fix add variable dropdown for mobile * move dependencies to correct package.json file * remove html-to-text Co-authored-by: CarinaWolli <wollencarina@gmail.com>	2022-11-25 07:34:55 -07:00
zomars	3137a188a0	Type fixes for API	2022-11-25 07:24:44 -07:00
zomars	a2a4ff934f	Submodule sync	2022-11-25 06:01:25 -07:00
Udit Takkarandsean-brydon	eda1d5f393	fix: add team member dialog ui updated (#5675 ) * fix: add team member dialog ui updated fixed team url Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: type errors and role value bug Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * chore: remove logs Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * chore: change option to admin 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: sean-brydon <55134778+sean-brydon@users.noreply.github.com>	2022-11-25 12:59:25 +00:00
sean-brydonandPeer Richelsen	93a14b190e	Fix Impersonation Refresh Bug (#5679 ) Co-authored-by: Peer Richelsen <peeroke@gmail.com>	2022-11-25 12:36:33 +00:00
Shane MaglangitandPeer Richelsen	2a6dc340df	fix: update profile picture to be clickable on cal.com/[user]/[type] (#5596 ) * fix: update profile picture to be clickable on /[user]/[type] * fix: disable clickable profile on private booking pages Co-authored-by: Peer Richelsen <peeroke@gmail.com>	2022-11-25 12:12:16 +00:00