first commit

calcom/apps/web/modules/bookings/lib/validStatuses.ts

@@ -0,0 +1 @@
+export const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;

calcom/apps/web/modules/bookings/views/bookings-listing-view.getStaticProps.tsx

@@ -0,0 +1,24 @@
+import { type GetStaticProps } from "next";
+import { z } from "zod";
+
+import { getTranslations } from "@server/lib/getTranslations";
+
+import { validStatuses } from "~/bookings/lib/validStatuses";
+
+const querySchema = z.object({
+  status: z.enum(validStatuses),
+});
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  const params = querySchema.safeParse(ctx.params);
+  const i18n = await getTranslations(ctx);
+
+  if (!params.success) return { notFound: true };
+
+  return {
+    props: {
+      status: params.data.status,
+      i18n,
+    },
+  };
+};

calcom/apps/web/modules/bookings/views/bookings-listing-view.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { Fragment, useState } from "react";
+import { z } from "zod";
+
+import { WipeMyCalActionButton } from "@calcom/app-store/wipemycalother/components";
+import dayjs from "@calcom/dayjs";
+import { FilterToggle } from "@calcom/features/bookings/components/FilterToggle";
+import { FiltersContainer } from "@calcom/features/bookings/components/FiltersContainer";
+import type { filterQuerySchema } from "@calcom/features/bookings/lib/useFilterQuery";
+import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
+import Shell from "@calcom/features/shell/Shell";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
+import { Alert, Button, EmptyScreen, HorizontalTabs } from "@calcom/ui";
+
+import { useInViewObserver } from "@lib/hooks/useInViewObserver";
+import useMeQuery from "@lib/hooks/useMeQuery";
+
+import BookingListItem from "@components/booking/BookingListItem";
+import SkeletonLoader from "@components/booking/SkeletonLoader";
+
+import { validStatuses } from "~/bookings/lib/validStatuses";
+
+type BookingListingStatus = z.infer<NonNullable<typeof filterQuerySchema>>["status"];
+type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
+
+type RecurringInfo = {
+  recurringEventId: string | null;
+  count: number;
+  firstDate: Date | null;
+  bookings: { [key: string]: Date[] };
+};
+
+const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
+  {
+    name: "upcoming",
+    href: "/bookings/upcoming",
+  },
+  {
+    name: "unconfirmed",
+    href: "/bookings/unconfirmed",
+  },
+  {
+    name: "recurring",
+    href: "/bookings/recurring",
+  },
+  {
+    name: "past",
+    href: "/bookings/past",
+  },
+  {
+    name: "cancelled",
+    href: "/bookings/cancelled",
+  },
+];
+
+const descriptionByStatus: Record<NonNullable<BookingListingStatus>, string> = {
+  upcoming: "upcoming_bookings",
+  recurring: "recurring_bookings",
+  past: "past_bookings",
+  cancelled: "cancelled_bookings",
+  unconfirmed: "unconfirmed_bookings",
+};
+
+const querySchema = z.object({
+  status: z.enum(validStatuses),
+});
+
+export default function Bookings() {
+  const params = useParamsWithFallback();
+  const { data: filterQuery } = useFilterQuery();
+  const { status } = params ? querySchema.parse(params) : { status: "upcoming" as const };
+  const { t } = useLocale();
+  const user = useMeQuery().data;
+  const [isFiltersVisible, setIsFiltersVisible] = useState<boolean>(false);
+
+  const query = trpc.viewer.bookings.get.useInfiniteQuery(
+    {
+      limit: 10,
+      filters: {
+        ...filterQuery,
+        status: filterQuery.status ?? status,
+      },
+    },
+    {
+      // first render has status `undefined`
+      enabled: true,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    }
+  );
+
+  // Animate page (tab) transitions to look smoothing
+
+  const buttonInView = useInViewObserver(() => {
+    if (!query.isFetching && query.hasNextPage && query.status === "success") {
+      query.fetchNextPage();
+    }
+  });
+
+  const isEmpty = !query.data?.pages[0]?.bookings.length;
+
+  const shownBookings: Record<string, BookingOutput[]> = {};
+  const filterBookings = (booking: BookingOutput) => {
+    if (status === "recurring" || status == "unconfirmed" || status === "cancelled") {
+      if (!booking.recurringEventId) {
+        return true;
+      }
+      if (
+        shownBookings[booking.recurringEventId] !== undefined &&
+        shownBookings[booking.recurringEventId].length > 0
+      ) {
+        shownBookings[booking.recurringEventId].push(booking);
+        return false;
+      }
+      shownBookings[booking.recurringEventId] = [booking];
+    } else if (status === "upcoming") {
+      return (
+        dayjs(booking.startTime).tz(user?.timeZone).format("YYYY-MM-DD") !==
+        dayjs().tz(user?.timeZone).format("YYYY-MM-DD")
+      );
+    }
+    return true;
+  };
+
+  let recurringInfoToday: RecurringInfo | undefined;
+
+  const bookingsToday =
+    query.data?.pages.map((page) =>
+      page.bookings.filter((booking: BookingOutput) => {
+        recurringInfoToday = page.recurringInfo.find(
+          (info) => info.recurringEventId === booking.recurringEventId
+        );
+
+        return (
+          dayjs(booking.startTime).tz(user?.timeZone).format("YYYY-MM-DD") ===
+          dayjs().tz(user?.timeZone).format("YYYY-MM-DD")
+        );
+      })
+    )[0] || [];
+
+  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
+
+  return (
+    <Shell
+      withoutMain={false}
+      hideHeadingOnMobile
+      heading={t("bookings")}
+      subtitle={t("bookings_description")}
+      title="Bookings"
+      description="Create events to share for people to book on your calendar.">
+      <div className="flex flex-col">
+        <div className="flex flex-row flex-wrap justify-between">
+          <HorizontalTabs tabs={tabs} />
+          <FilterToggle setIsFiltersVisible={setIsFiltersVisible} />
+        </div>
+        <FiltersContainer isFiltersVisible={isFiltersVisible} />
+        <main className="w-full">
+          <div className="flex w-full flex-col" ref={animationParentRef}>
+            {query.status === "error" && (
+              <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
+            )}
+            {(query.status === "pending" || query.isPaused) && <SkeletonLoader />}
+            {query.status === "success" && !isEmpty && (
+              <>
+                {!!bookingsToday.length && status === "upcoming" && (
+                  <div className="mb-6 pt-2 xl:pt-0">
+                    <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
+                    <p className="text-subtle mb-2 text-xs font-medium uppercase leading-4">{t("today")}</p>
+                    <div className="border-subtle overflow-hidden rounded-md border">
+                      <table className="w-full max-w-full table-fixed">
+                        <tbody className="bg-default divide-subtle divide-y" data-testid="today-bookings">
+                          <Fragment>
+                            {bookingsToday.map((booking: BookingOutput) => (
+                              <BookingListItem
+                                key={booking.id}
+                                loggedInUser={{
+                                  userId: user?.id,
+                                  userTimeZone: user?.timeZone,
+                                  userTimeFormat: user?.timeFormat,
+                                  userEmail: user?.email,
+                                }}
+                                listingStatus={status}
+                                recurringInfo={recurringInfoToday}
+                                {...booking}
+                              />
+                            ))}
+                          </Fragment>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                )}
+                <div className="pt-2 xl:pt-0">
+                  <div className="border-subtle overflow-hidden rounded-md border">
+                    <table data-testid={`${status}-bookings`} className="w-full max-w-full table-fixed">
+                      <tbody className="bg-default divide-subtle divide-y" data-testid="bookings">
+                        {query.data.pages.map((page, index) => (
+                          <Fragment key={index}>
+                            {page.bookings.filter(filterBookings).map((booking: BookingOutput) => {
+                              const recurringInfo = page.recurringInfo.find(
+                                (info) => info.recurringEventId === booking.recurringEventId
+                              );
+                              return (
+                                <BookingListItem
+                                  key={booking.id}
+                                  loggedInUser={{
+                                    userId: user?.id,
+                                    userTimeZone: user?.timeZone,
+                                    userTimeFormat: user?.timeFormat,
+                                    userEmail: user?.email,
+                                  }}
+                                  listingStatus={status}
+                                  recurringInfo={recurringInfo}
+                                  {...booking}
+                                />
+                              );
+                            })}
+                          </Fragment>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                  <div className="text-default p-4 text-center" ref={buttonInView.ref}>
+                    <Button
+                      color="minimal"
+                      loading={query.isFetchingNextPage}
+                      disabled={!query.hasNextPage}
+                      onClick={() => query.fetchNextPage()}>
+                      {query.hasNextPage ? t("load_more_results") : t("no_more_results")}
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            {query.status === "success" && isEmpty && (
+              <div className="flex items-center justify-center pt-2 xl:pt-0">
+                <EmptyScreen
+                  Icon="calendar"
+                  headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
+                  description={t("no_status_bookings_yet_description", {
+                    status: t(status).toLowerCase(),
+                    description: t(descriptionByStatus[status]),
+                  })}
+                />
+              </div>
+            )}
+          </div>
+        </main>
+      </div>
+    </Shell>
+  );
+}

calcom/apps/web/modules/bookings/views/bookings-single-view.getServerSideProps.tsx

@@ -0,0 +1,191 @@
+import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
+
+import { orgDomainConfig } from "@calcom/ee/organizations/lib/orgDomains";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import getBookingInfo from "@calcom/features/bookings/lib/getBookingInfo";
+import { parseRecurringEvent } from "@calcom/lib";
+import { getDefaultEvent } from "@calcom/lib/defaultEvents";
+import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUidFromSeat";
+import { BookingRepository } from "@calcom/lib/server/repository/booking";
+import prisma from "@calcom/prisma";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const stringToBoolean = z
+  .string()
+  .optional()
+  .transform((val) => val === "true");
+
+const querySchema = z.object({
+  uid: z.string(),
+  email: z.string().optional(),
+  eventTypeSlug: z.string().optional(),
+  cancel: stringToBoolean,
+  allRemainingBookings: stringToBoolean,
+  changes: stringToBoolean,
+  reschedule: stringToBoolean,
+  isSuccessBookingPage: stringToBoolean,
+  formerTime: z.string().optional(),
+  seatReferenceUid: z.string().optional(),
+});
+
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  // this is needed to prevent bundling of lib/booking to the client bundle
+  // usually functions that are used in getServerSideProps are tree shaken from client bundle
+  // but not in case when they are exported. So we have to dynamically load them, or to copy paste them to the /future/page.
+
+  const { getRecurringBookings, handleSeatsEventTypeOnBooking, getEventTypesFromDB } = await import(
+    "@lib/booking"
+  );
+
+  const ssr = await ssrInit(context);
+  const session = await getServerSession(context);
+  let tz: string | null = null;
+  let userTimeFormat: number | null = null;
+  let requiresLoginToUpdate = false;
+  if (session) {
+    const user = await ssr.viewer.me.fetch();
+    tz = user.timeZone;
+    userTimeFormat = user.timeFormat;
+  }
+
+  const parsedQuery = querySchema.safeParse(context.query);
+
+  if (!parsedQuery.success) return { notFound: true } as const;
+  const { eventTypeSlug } = parsedQuery.data;
+  let { uid, seatReferenceUid } = parsedQuery.data;
+
+  const maybeBookingUidFromSeat = await maybeGetBookingUidFromSeat(prisma, uid);
+  if (maybeBookingUidFromSeat.uid) uid = maybeBookingUidFromSeat.uid;
+  if (maybeBookingUidFromSeat.seatReferenceUid) seatReferenceUid = maybeBookingUidFromSeat.seatReferenceUid;
+
+  const { bookingInfoRaw, bookingInfo } = await getBookingInfo(uid);
+
+  if (!bookingInfoRaw) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  let rescheduledToUid: string | null = null;
+  if (bookingInfo.rescheduled) {
+    const rescheduledTo = await BookingRepository.findFirstBookingByReschedule({
+      originalBookingUid: bookingInfo.uid,
+    });
+    rescheduledToUid = rescheduledTo?.uid ?? null;
+  }
+
+  const eventTypeRaw = !bookingInfoRaw.eventTypeId
+    ? getDefaultEvent(eventTypeSlug || "")
+    : await getEventTypesFromDB(bookingInfoRaw.eventTypeId);
+  if (!eventTypeRaw) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  if (eventTypeRaw.seatsPerTimeSlot && !seatReferenceUid && !session) {
+    requiresLoginToUpdate = true;
+  }
+
+  // @NOTE: had to do this because Server side cant return [Object objects]
+  // probably fixable with json.stringify -> json.parse
+  bookingInfo["startTime"] = (bookingInfo?.startTime as Date)?.toISOString() as unknown as Date;
+  bookingInfo["endTime"] = (bookingInfo?.endTime as Date)?.toISOString() as unknown as Date;
+
+  eventTypeRaw.users = !!eventTypeRaw.hosts?.length
+    ? eventTypeRaw.hosts.map((host) => host.user)
+    : eventTypeRaw.users;
+
+  if (!eventTypeRaw.users.length) {
+    if (!eventTypeRaw.owner)
+      return {
+        notFound: true,
+      } as const;
+    eventTypeRaw.users.push({
+      ...eventTypeRaw.owner,
+    });
+  }
+
+  const eventType = {
+    ...eventTypeRaw,
+    periodStartDate: eventTypeRaw.periodStartDate?.toString() ?? null,
+    periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
+    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
+    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
+    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
+  };
+
+  const profile = {
+    name: eventType.team?.name || eventType.users[0]?.name || null,
+    email: eventType.team ? null : eventType.users[0].email || null,
+    theme: (!eventType.team?.name && eventType.users[0]?.theme) || null,
+    brandColor: eventType.team ? null : eventType.users[0].brandColor || null,
+    darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
+    slug: eventType.team?.slug || eventType.users[0]?.username || null,
+  };
+
+  if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
+    await handleSeatsEventTypeOnBooking(
+      eventType,
+      bookingInfo,
+      seatReferenceUid,
+      session?.user.id === eventType.userId
+    );
+  }
+
+  const payment = await prisma.payment.findFirst({
+    where: {
+      bookingId: bookingInfo.id,
+    },
+    select: {
+      success: true,
+      refunded: true,
+      currency: true,
+      amount: true,
+      paymentOption: true,
+    },
+  });
+
+  const userId = session?.user?.id;
+  const isLoggedInUserHost =
+    userId &&
+    (eventType.users.some((user) => user.id === userId) ||
+      eventType.hosts.some(({ user }) => user.id === userId));
+
+  if (!isLoggedInUserHost) {
+    // Removing hidden fields from responses
+    for (const key in bookingInfo.responses) {
+      const field = eventTypeRaw.bookingFields.find((field) => field.name === key);
+      if (field && !!field.hidden) {
+        delete bookingInfo.responses[key];
+      }
+    }
+  }
+
+  const { currentOrgDomain } = orgDomainConfig(context.req);
+  return {
+    props: {
+      orgSlug: currentOrgDomain,
+      themeBasis: eventType.team ? eventType.team.slug : eventType.users[0]?.username,
+      hideBranding: eventType.team ? eventType.team.hideBranding : eventType.users[0].hideBranding,
+      profile,
+      eventType,
+      recurringBookings: await getRecurringBookings(bookingInfo.recurringEventId),
+      trpcState: ssr.dehydrate(),
+      dynamicEventName: bookingInfo?.eventType?.eventName || "",
+      bookingInfo,
+      paymentStatus: payment,
+      ...(tz && { tz }),
+      userTimeFormat,
+      requiresLoginToUpdate,
+      rescheduledToUid,
+    },
+  };
+}

calcom/apps/web/modules/bookings/views/bookings-single-view.test.tsx

@@ -0,0 +1,145 @@
+import { render } from "@testing-library/react";
+import { useSession } from "next-auth/react";
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import type { z } from "zod";
+
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
+import { BookingStatus } from "@calcom/prisma/enums";
+import { HeadSeo } from "@calcom/ui";
+
+import Success from "./bookings-single-view";
+
+function mockedSuccessComponentProps(props: Partial<React.ComponentProps<typeof Success>>) {
+  return {
+    eventType: {
+      id: 1,
+      title: "Event Title",
+      description: "",
+      locations: null,
+      length: 15,
+      userId: null,
+      eventName: "d",
+      timeZone: null,
+      recurringEvent: null,
+      requiresConfirmation: false,
+      disableGuests: false,
+      seatsPerTimeSlot: null,
+      seatsShowAttendees: null,
+      seatsShowAvailabilityCount: null,
+      schedulingType: null,
+      price: 0,
+      currency: "usd",
+      successRedirectUrl: null,
+      customInputs: [],
+      team: null,
+      workflows: [],
+      hosts: [],
+      users: [],
+      owner: null,
+      isDynamic: false,
+      periodStartDate: "1",
+      periodEndDate: "1",
+      metadata: null,
+      bookingFields: [] as unknown as [] & z.BRAND<"HAS_SYSTEM_FIELDS">,
+    },
+    profile: {
+      name: "John",
+      email: null,
+      theme: null,
+      brandColor: null,
+      darkBrandColor: null,
+      slug: null,
+    },
+    bookingInfo: {
+      uid: "uid",
+      metadata: null,
+      customInputs: [],
+      startTime: new Date(),
+      endTime: new Date(),
+      id: 1,
+      user: null,
+      eventType: null,
+      seatsReferences: [],
+      userPrimaryEmail: null,
+      eventTypeId: null,
+      title: "Booking Title",
+      description: null,
+      location: null,
+      recurringEventId: null,
+      smsReminderNumber: "0",
+      cancellationReason: null,
+      rejectionReason: null,
+      status: BookingStatus.ACCEPTED,
+      attendees: [],
+      responses: {
+        name: "John",
+      },
+      rescheduled: false,
+      fromReschedule: null,
+    },
+    orgSlug: null,
+    userTimeFormat: 12,
+    requiresLoginToUpdate: false,
+    themeBasis: "dark",
+    hideBranding: false,
+    recurringBookings: null,
+    trpcState: {
+      queries: [],
+      mutations: [],
+    },
+    dynamicEventName: "Event Title",
+    paymentStatus: null,
+    rescheduledToUid: null,
+    ...props,
+  } satisfies React.ComponentProps<typeof Success>;
+}
+
+describe("Success Component", () => {
+  it("renders HeadSeo correctly", () => {
+    vi.mocked(getOrgFullOrigin).mockImplementation((text: string | null) => `${text}.cal.local`);
+    vi.mocked(useRouterQuery).mockReturnValue({
+      uid: "uid",
+    });
+    vi.mocked(useSession).mockReturnValue({
+      update: vi.fn(),
+      status: "authenticated",
+      data: {
+        hasValidLicense: true,
+        upId: "1",
+        expires: "1",
+        user: {
+          name: "John",
+          id: 1,
+          profile: {
+            id: null,
+            upId: "1",
+            username: null,
+            organizationId: null,
+            organization: null,
+          },
+        },
+      },
+    });
+
+    const mockObject = {
+      props: mockedSuccessComponentProps({
+        orgSlug: "org1",
+      }),
+    };
+
+    render(<Success {...mockObject.props} />);
+
+    const expectedTitle = `booking_confirmed`;
+    const expectedDescription = expectedTitle;
+    expect(HeadSeo).toHaveBeenCalledWith(
+      {
+        origin: `${mockObject.props.orgSlug}.cal.local`,
+        title: expectedTitle,
+        description: expectedDescription,
+      },
+      {}
+    );
+  });
+});

calcom/apps/web/modules/event-types/views/event-types-single-view.getServerSideProps.tsx

@@ -0,0 +1,67 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+
+import { asStringOrThrow } from "@lib/asStringOrNull";
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req, res, query } = context;
+
+  const session = await getServerSession({ req, res });
+
+  const typeParam = parseInt(asStringOrThrow(query.type));
+  const ssr = await ssrInit(context);
+
+  if (Number.isNaN(typeParam)) {
+    const notFound = {
+      notFound: true,
+    } as const;
+
+    return notFound;
+  }
+
+  if (!session?.user?.id) {
+    const redirect = {
+      redirect: {
+        permanent: false,
+        destination: "/auth/login",
+      },
+    } as const;
+    return redirect;
+  }
+  const getEventTypeById = async (eventTypeId: number) => {
+    await ssr.viewer.eventTypes.get.prefetch({ id: eventTypeId });
+    try {
+      const { eventType } = await ssr.viewer.eventTypes.get.fetch({ id: eventTypeId });
+      return eventType;
+    } catch (e: unknown) {
+      logger.error(safeStringify(e));
+      // reject, user has no access to this event type.
+      return null;
+    }
+  };
+  const eventType = await getEventTypeById(typeParam);
+  if (!eventType) {
+    const redirect = {
+      redirect: {
+        permanent: false,
+        destination: "/event-types",
+      },
+    } as const;
+    return redirect;
+  }
+  return {
+    props: {
+      eventType,
+      type: typeParam,
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

calcom/apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -0,0 +1,878 @@
+"use client";
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { isValidPhoneNumber } from "libphonenumber-js";
+import type { TFunction } from "next-i18next";
+import dynamic from "next/dynamic";
+// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
+import { useRouter } from "next/router";
+import { useEffect, useMemo, useState, useRef } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import checkForMultiplePaymentApps from "@calcom/app-store/_utils/payments/checkForMultiplePaymentApps";
+import { getEventLocationType } from "@calcom/app-store/locations";
+import { validateCustomEventName } from "@calcom/core/event";
+import type { Workflow } from "@calcom/features/ee/workflows/lib/types";
+import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import { validateIntervalLimitOrder } from "@calcom/lib";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
+import { HttpError } from "@calcom/lib/http-error";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
+import type { Prisma } from "@calcom/prisma/client";
+import type { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import { Form, showToast } from "@calcom/ui";
+
+import type { AppProps } from "@lib/app-providers";
+
+import { EventTypeSingleLayout } from "@components/eventtype/EventTypeSingleLayout";
+
+import { type PageProps } from "~/event-types/views/event-types-single-view.getServerSideProps";
+
+const DEFAULT_PROMPT_VALUE = `## You are helping user set up a call with the support team. The appointment is 15 min long. You are a pleasant and friendly.
+
+  ## Style Guardrails
+  Be Concise: Respond succinctly, addressing one topic at most.
+  Embrace Variety: Use diverse language and rephrasing to enhance clarity without repeating content.
+  Be Conversational: Use everyday language, making the chat feel like talking to a friend.
+  Be Proactive: Lead the conversation, often wrapping up with a question or next-step suggestion.
+  Avoid multiple questions in a single response.
+  Get clarity: If the user only partially answers a question, or if the answer is unclear, keep asking to get clarity.
+  Use a colloquial way of referring to the date (like Friday, Jan 14th, or Tuesday, Jan 12th, 2024 at 8am).
+  If you are saying a time like 8:00 AM, just say 8 AM and emit the trailing zeros.
+
+  ## Response Guideline
+  Adapt and Guess: Try to understand transcripts that may contain transcription errors. Avoid mentioning \"transcription error\" in the response.
+  Stay in Character: Keep conversations within your role'''s scope, guiding them back creatively without repeating.
+  Ensure Fluid Dialogue: Respond in a role-appropriate, direct manner to maintain a smooth conversation flow.
+
+  ## Schedule Rule
+  Current time is {{current_time}}. You only schedule time in current calendar year, you cannot schedule time that'''s in the past.
+
+  ## Task Steps
+  1. I am here to learn more about your issue and help schedule an appointment with our support team.
+  2. If {{email}} is not unknown then Use name {{name}} and email {{email}} for creating booking else Ask for user name and email and Confirm the name and email with user by reading it back to user.
+  3. Ask user for \"When would you want to meet with one of our representive\".
+  4. Call function check_availability to check for availability in the user provided time range.
+    - if availability exists, inform user about the availability range (do not repeat the detailed available slot) and ask user to choose from it. Make sure user chose a slot within detailed available slot.
+    - if availability does not exist, ask user to select another time range for the appointment, repeat this step 3.
+  5. Confirm the date and time selected by user: \"Just to confirm, you want to book the appointment at ...\".
+  6. Once confirmed, call function book_appointment to book the appointment.
+    - if booking returned booking detail, it means booking is successful, proceed to step 7.
+    - if booking returned error message, let user know why the booking was not successful, and maybe start over with step 3.
+  7. Inform the user booking is successful, and ask if user have any questions. Answer them if there are any.
+  8. After all questions answered, call function end_call to hang up.`;
+
+const DEFAULT_BEGIN_MESSAGE = "Hi. How are you doing?";
+
+// These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings;
+const EventSetupTab = dynamic(() =>
+  import("@components/eventtype/EventSetupTab").then((mod) => mod.EventSetupTab)
+);
+
+const EventAvailabilityTab = dynamic(() =>
+  import("@components/eventtype/EventAvailabilityTab").then((mod) => mod.EventAvailabilityTab)
+);
+
+const EventTeamTab = dynamic(() =>
+  import("@components/eventtype/EventTeamTab").then((mod) => mod.EventTeamTab)
+);
+
+const EventLimitsTab = dynamic(() =>
+  import("@components/eventtype/EventLimitsTab").then((mod) => mod.EventLimitsTab)
+);
+
+const EventAdvancedTab = dynamic(() =>
+  import("@components/eventtype/EventAdvancedTab").then((mod) => mod.EventAdvancedTab)
+);
+
+const EventInstantTab = dynamic(() =>
+  import("@components/eventtype/EventInstantTab").then((mod) => mod.EventInstantTab)
+);
+
+const EventRecurringTab = dynamic(() =>
+  import("@components/eventtype/EventRecurringTab").then((mod) => mod.EventRecurringTab)
+);
+
+const EventAppsTab = dynamic(() =>
+  import("@components/eventtype/EventAppsTab").then((mod) => mod.EventAppsTab)
+);
+
+const EventWorkflowsTab = dynamic(() => import("@components/eventtype/EventWorkfowsTab"));
+
+const EventWebhooksTab = dynamic(() =>
+  import("@components/eventtype/EventWebhooksTab").then((mod) => mod.EventWebhooksTab)
+);
+
+const EventAITab = dynamic(() => import("@components/eventtype/EventAITab").then((mod) => mod.EventAITab));
+
+const ManagedEventTypeDialog = dynamic(() => import("@components/eventtype/ManagedEventDialog"));
+
+const AssignmentWarningDialog = dynamic(() => import("@components/eventtype/AssignmentWarningDialog"));
+
+export type Host = { isFixed: boolean; userId: number; priority: number };
+
+export type CustomInputParsed = typeof customInputSchema._output;
+
+const querySchema = z.object({
+  tabName: z
+    .enum([
+      "setup",
+      "availability",
+      "apps",
+      "limits",
+      "instant",
+      "recurring",
+      "team",
+      "advanced",
+      "workflows",
+      "webhooks",
+      "ai",
+    ])
+    .optional()
+    .default("setup"),
+});
+
+export type EventTypeSetupProps = RouterOutputs["viewer"]["eventTypes"]["get"];
+export type EventTypeSetup = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"];
+
+export const locationsResolver = (t: TFunction) => {
+  return z
+    .array(
+      z
+        .object({
+          type: z.string(),
+          address: z.string().optional(),
+          link: z.string().url().optional(),
+          phone: z
+            .string()
+            .refine((val) => isValidPhoneNumber(val))
+            .optional(),
+          hostPhoneNumber: z
+            .string()
+            .refine((val) => isValidPhoneNumber(val))
+            .optional(),
+          displayLocationPublicly: z.boolean().optional(),
+          credentialId: z.number().optional(),
+          teamName: z.string().optional(),
+        })
+        .passthrough()
+        .superRefine((val, ctx) => {
+          if (val?.link) {
+            const link = val.link;
+            const eventLocationType = getEventLocationType(val.type);
+            if (
+              eventLocationType &&
+              !eventLocationType.default &&
+              eventLocationType.linkType === "static" &&
+              eventLocationType.urlRegExp
+            ) {
+              const valid = z.string().regex(new RegExp(eventLocationType.urlRegExp)).safeParse(link).success;
+
+              if (!valid) {
+                const sampleUrl = eventLocationType.organizerInputPlaceholder;
+                ctx.addIssue({
+                  code: z.ZodIssueCode.custom,
+                  path: [eventLocationType?.defaultValueVariable ?? "link"],
+                  message: t("invalid_url_error_message", {
+                    label: eventLocationType.label,
+                    sampleUrl: sampleUrl ?? "https://cal.com",
+                  }),
+                });
+              }
+              return;
+            }
+
+            const valid = z.string().url().optional().safeParse(link).success;
+
+            if (!valid) {
+              ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                path: [eventLocationType?.defaultValueVariable ?? "link"],
+                message: `Invalid URL`,
+              });
+            }
+          }
+          return;
+        })
+    )
+    .optional();
+};
+
+const EventTypePage = (props: EventTypeSetupProps & { allActiveWorkflows?: Workflow[] }) => {
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+  const telemetry = useTelemetry();
+  const {
+    data: { tabName },
+  } = useTypedQuery(querySchema);
+
+  const { data: eventTypeApps } = trpc.viewer.integrations.useQuery({
+    extendsFeature: "EventType",
+    teamId: props.eventType.team?.id || props.eventType.parent?.teamId,
+    onlyInstalled: true,
+  });
+
+  const { eventType, locationOptions, team, teamMembers, currentUserMembership, destinationCalendar } = props;
+  const [isOpenAssignmentWarnDialog, setIsOpenAssignmentWarnDialog] = useState<boolean>(false);
+  const [pendingRoute, setPendingRoute] = useState("");
+  const leaveWithoutAssigningHosts = useRef(false);
+  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
+  const updateMutation = trpc.viewer.eventTypes.update.useMutation({
+    onSuccess: async () => {
+      const currentValues = formMethods.getValues();
+
+      currentValues.children = currentValues.children.map((child) => ({
+        ...child,
+        created: true,
+      }));
+      currentValues.assignAllTeamMembers = currentValues.assignAllTeamMembers || false;
+
+      // Reset the form with these values as new default values to ensure the correct comparison for dirtyFields eval
+      formMethods.reset(currentValues);
+
+      showToast(t("event_type_updated_successfully", { eventTypeTitle: eventType.title }), "success");
+    },
+    async onSettled() {
+      await utils.viewer.eventTypes.get.invalidate();
+    },
+    onError: (err) => {
+      let message = "";
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+
+      if (err.data?.code === "UNAUTHORIZED") {
+        message = `${err.data.code}: ${t("error_event_type_unauthorized_update")}`;
+      }
+
+      if (err.data?.code === "PARSE_ERROR" || err.data?.code === "BAD_REQUEST") {
+        message = `${err.data.code}: ${t(err.message)}`;
+      }
+
+      if (err.data?.code === "INTERNAL_SERVER_ERROR") {
+        message = t("unexpected_error_try_again");
+      }
+
+      showToast(message ? t(message) : t(err.message), "error");
+    },
+  });
+
+  const router = useRouter();
+
+  const [periodDates] = useState<{ startDate: Date; endDate: Date }>({
+    startDate: new Date(eventType.periodStartDate || Date.now()),
+    endDate: new Date(eventType.periodEndDate || Date.now()),
+  });
+
+  const metadata = eventType.metadata;
+  // fallback to !!eventType.schedule when 'useHostSchedulesForTeamEvent' is undefined
+  if (!!team && metadata !== null) {
+    metadata.config = {
+      ...metadata.config,
+      useHostSchedulesForTeamEvent:
+        typeof eventType.metadata?.config?.useHostSchedulesForTeamEvent !== "undefined"
+          ? eventType.metadata?.config?.useHostSchedulesForTeamEvent === true
+          : !!eventType.schedule,
+    };
+  } else {
+    // Make sure non-team events NEVER have this config key;
+    delete metadata?.config?.useHostSchedulesForTeamEvent;
+  }
+
+  const bookingFields: Prisma.JsonObject = {};
+
+  eventType.bookingFields.forEach(({ name }) => {
+    bookingFields[name] = name;
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const defaultValues: any = useMemo(() => {
+    return {
+      title: eventType.title,
+      id: eventType.id,
+      slug: eventType.slug,
+      afterEventBuffer: eventType.afterEventBuffer,
+      beforeEventBuffer: eventType.beforeEventBuffer,
+      eventName: eventType.eventName || "",
+      scheduleName: eventType.scheduleName,
+      periodDays: eventType.periodDays,
+      requiresBookerEmailVerification: eventType.requiresBookerEmailVerification,
+      seatsPerTimeSlot: eventType.seatsPerTimeSlot,
+      seatsShowAttendees: eventType.seatsShowAttendees,
+      seatsShowAvailabilityCount: eventType.seatsShowAvailabilityCount,
+      lockTimeZoneToggleOnBookingPage: eventType.lockTimeZoneToggleOnBookingPage,
+      locations: eventType.locations || [],
+      destinationCalendar: eventType.destinationCalendar,
+      recurringEvent: eventType.recurringEvent || null,
+      isInstantEvent: eventType.isInstantEvent,
+      instantMeetingExpiryTimeOffsetInSeconds: eventType.instantMeetingExpiryTimeOffsetInSeconds,
+      description: eventType.description ?? undefined,
+      schedule: eventType.schedule || undefined,
+      bookingLimits: eventType.bookingLimits || undefined,
+      onlyShowFirstAvailableSlot: eventType.onlyShowFirstAvailableSlot || undefined,
+      durationLimits: eventType.durationLimits || undefined,
+      length: eventType.length,
+      hidden: eventType.hidden,
+      hashedLink: eventType.hashedLink?.link || undefined,
+      periodDates: {
+        startDate: periodDates.startDate,
+        endDate: periodDates.endDate,
+      },
+      hideCalendarNotes: eventType.hideCalendarNotes,
+      offsetStart: eventType.offsetStart,
+      bookingFields: eventType.bookingFields,
+      periodType: eventType.periodType,
+      periodCountCalendarDays: eventType.periodCountCalendarDays ? true : false,
+      schedulingType: eventType.schedulingType,
+      requiresConfirmation: eventType.requiresConfirmation,
+      slotInterval: eventType.slotInterval,
+      minimumBookingNotice: eventType.minimumBookingNotice,
+      metadata,
+      hosts: eventType.hosts,
+      successRedirectUrl: eventType.successRedirectUrl || "",
+      forwardParamsSuccessRedirect: eventType.forwardParamsSuccessRedirect,
+      users: eventType.users,
+      useEventTypeDestinationCalendarEmail: eventType.useEventTypeDestinationCalendarEmail,
+      secondaryEmailId: eventType?.secondaryEmailId || -1,
+      children: eventType.children.map((ch) => ({
+        ...ch,
+        created: true,
+        owner: {
+          ...ch.owner,
+          eventTypeSlugs:
+            eventType.team?.members
+              .find((mem) => mem.user.id === ch.owner.id)
+              ?.user.eventTypes.map((evTy) => evTy.slug)
+              .filter((slug) => slug !== eventType.slug) ?? [],
+        },
+      })),
+      seatsPerTimeSlotEnabled: eventType.seatsPerTimeSlot,
+      assignAllTeamMembers: eventType.assignAllTeamMembers,
+      aiPhoneCallConfig: {
+        generalPrompt: eventType.aiPhoneCallConfig?.generalPrompt ?? DEFAULT_PROMPT_VALUE,
+        enabled: eventType.aiPhoneCallConfig?.enabled,
+        beginMessage: eventType.aiPhoneCallConfig?.beginMessage ?? DEFAULT_BEGIN_MESSAGE,
+        guestName: eventType.aiPhoneCallConfig?.guestName,
+        guestEmail: eventType.aiPhoneCallConfig?.guestEmail,
+        guestCompany: eventType.aiPhoneCallConfig?.guestCompany,
+        yourPhoneNumber: eventType.aiPhoneCallConfig?.yourPhoneNumber,
+        numberToCall: eventType.aiPhoneCallConfig?.numberToCall,
+      },
+    };
+  }, [eventType, periodDates, metadata]);
+  const formMethods = useForm<FormValues>({
+    defaultValues,
+    resolver: zodResolver(
+      z
+        .object({
+          // Length if string, is converted to a number or it can be a number
+          // Make it optional because it's not submitted from all tabs of the page
+          eventName: z
+            .string()
+            .refine(
+              (val) =>
+                validateCustomEventName(val, t("invalid_event_name_variables"), bookingFields) === true,
+              {
+                message: t("invalid_event_name_variables"),
+              }
+            )
+            .optional(),
+          length: z.union([z.string().transform((val) => +val), z.number()]).optional(),
+          offsetStart: z.union([z.string().transform((val) => +val), z.number()]).optional(),
+          bookingFields: eventTypeBookingFields,
+          locations: locationsResolver(t),
+        })
+        // TODO: Add schema for other fields later.
+        .passthrough()
+    ),
+  });
+  const {
+    formState: { isDirty: isFormDirty, dirtyFields },
+  } = formMethods;
+
+  // useEffect(() => {
+  //   const handleRouteChange = (url: string) => {
+  //     const paths = url.split("/");
+  //
+  //     // Check if event is managed event type - skip if there is assigned users
+  //     const assignedUsers = eventType.children;
+  //     const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
+  //     if (eventType.assignAllTeamMembers) {
+  //       return;
+  //     } else if (isManagedEventType && assignedUsers.length > 0) {
+  //       return;
+  //     }
+  //
+  //     const hosts = eventType.hosts;
+  //     if (
+  //       !leaveWithoutAssigningHosts.current &&
+  //       !!team &&
+  //       (hosts.length === 0 || assignedUsers.length === 0) &&
+  //       (url === "/event-types" || paths[1] !== "event-types")
+  //     ) {
+  //       setIsOpenAssignmentWarnDialog(true);
+  //       setPendingRoute(url);
+  //       router.events.emit(
+  //         "routeChangeError",
+  //         new Error(`Aborted route change to ${url} because none was assigned to team event`)
+  //       );
+  //       throw "Aborted";
+  //     }
+  //   };
+  //   router.events.on("routeChangeStart", handleRouteChange);
+  //   return () => {
+  //     router.events.off("routeChangeStart", handleRouteChange);
+  //   };
+  // }, [router]);
+
+  const appsMetadata = formMethods.getValues("metadata")?.apps;
+  const availability = formMethods.watch("availability");
+  let numberOfActiveApps = 0;
+
+  if (appsMetadata) {
+    numberOfActiveApps = Object.entries(appsMetadata).filter(
+      ([appId, appData]) =>
+        eventTypeApps?.items.find((app) => app.slug === appId)?.isInstalled && appData.enabled
+    ).length;
+  }
+
+  const permalink = `${WEBSITE_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
+    eventType.slug
+  }`;
+  const tabMap = {
+    setup: (
+      <EventSetupTab
+        eventType={eventType}
+        locationOptions={locationOptions}
+        team={team}
+        teamMembers={teamMembers}
+        destinationCalendar={destinationCalendar}
+      />
+    ),
+    availability: <EventAvailabilityTab eventType={eventType} isTeamEvent={!!team} />,
+    team: <EventTeamTab teamMembers={teamMembers} team={team} eventType={eventType} />,
+    limits: <EventLimitsTab eventType={eventType} />,
+    advanced: <EventAdvancedTab eventType={eventType} team={team} />,
+    instant: <EventInstantTab eventType={eventType} isTeamEvent={!!team} />,
+    recurring: <EventRecurringTab eventType={eventType} />,
+    apps: <EventAppsTab eventType={{ ...eventType, URL: permalink }} />,
+    workflows: props.allActiveWorkflows ? (
+      <EventWorkflowsTab eventType={eventType} workflows={props.allActiveWorkflows} />
+    ) : (
+      <></>
+    ),
+    webhooks: <EventWebhooksTab eventType={eventType} />,
+    ai: <EventAITab eventType={eventType} isTeamEvent={!!team} />,
+  } as const;
+  const isObject = <T,>(value: T): boolean => {
+    return value !== null && typeof value === "object" && !Array.isArray(value);
+  };
+
+  const isArray = <T,>(value: T): boolean => {
+    return Array.isArray(value);
+  };
+
+  const isFieldDirty = (fieldName: keyof FormValues) => {
+    // If the field itself is directly marked as dirty
+    if (dirtyFields[fieldName] === true) {
+      return true;
+    }
+
+    // Check if the field is an object or an array
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const fieldValue: any = getNestedField(dirtyFields, fieldName);
+    if (isObject(fieldValue)) {
+      for (const key in fieldValue) {
+        if (fieldValue[key] === true) {
+          return true;
+        }
+
+        if (isObject(fieldValue[key]) || isArray(fieldValue[key])) {
+          const nestedFieldName = `${fieldName}.${key}` as keyof FormValues;
+          // Recursive call for nested objects or arrays
+          if (isFieldDirty(nestedFieldName)) {
+            return true;
+          }
+        }
+      }
+    }
+    if (isArray(fieldValue)) {
+      for (const element of fieldValue) {
+        // If element is an object, check each property of the object
+        if (isObject(element)) {
+          for (const key in element) {
+            if (element[key] === true) {
+              return true;
+            }
+
+            if (isObject(element[key]) || isArray(element[key])) {
+              const nestedFieldName = `${fieldName}.${key}` as keyof FormValues;
+              // Recursive call for nested objects or arrays within each element
+              if (isFieldDirty(nestedFieldName)) {
+                return true;
+              }
+            }
+          }
+        } else if (element === true) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  const getNestedField = (obj: typeof dirtyFields, path: string) => {
+    const keys = path.split(".");
+    let current = obj;
+
+    for (let i = 0; i < keys.length; i++) {
+      // @ts-expect-error /—— currentKey could be any deeply nested fields thanks to recursion
+      const currentKey = current[keys[i]];
+      if (currentKey === undefined) return undefined;
+      current = currentKey;
+    }
+
+    return current;
+  };
+
+  const getDirtyFields = (values: FormValues): Partial<FormValues> => {
+    if (!isFormDirty) {
+      return {};
+    }
+    const updatedFields: Partial<FormValues> = {};
+    Object.keys(dirtyFields).forEach((key) => {
+      const typedKey = key as keyof typeof dirtyFields;
+      updatedFields[typedKey] = undefined;
+      const isDirty = isFieldDirty(typedKey);
+      if (isDirty) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        updatedFields[typedKey] = values[typedKey];
+      }
+    });
+    return updatedFields;
+  };
+
+  const handleSubmit = async (values: FormValues) => {
+    const { children } = values;
+    const dirtyValues = getDirtyFields(values);
+    const dirtyFieldExists = Object.keys(dirtyValues).length !== 0;
+    const {
+      periodDates,
+      periodCountCalendarDays,
+      beforeEventBuffer,
+      afterEventBuffer,
+      seatsPerTimeSlot,
+      seatsShowAttendees,
+      seatsShowAvailabilityCount,
+      bookingLimits,
+      onlyShowFirstAvailableSlot,
+      durationLimits,
+      recurringEvent,
+      locations,
+      metadata,
+      customInputs,
+      assignAllTeamMembers,
+      // We don't need to send send these values to the backend
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      seatsPerTimeSlotEnabled,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      minimumBookingNoticeInDurationType,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      bookerLayouts,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      multipleDurationEnabled,
+      length,
+      ...input
+    } = dirtyValues;
+    if (!Number(length)) throw new Error(t("event_setup_length_error"));
+
+    if (bookingLimits) {
+      const isValid = validateIntervalLimitOrder(bookingLimits);
+      if (!isValid) throw new Error(t("event_setup_booking_limits_error"));
+    }
+
+    if (durationLimits) {
+      const isValid = validateIntervalLimitOrder(durationLimits);
+      if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
+    }
+
+    const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+    if (layoutError) throw new Error(t(layoutError));
+
+    if (metadata?.multipleDuration !== undefined) {
+      if (metadata?.multipleDuration.length < 1) {
+        throw new Error(t("event_setup_multiple_duration_error"));
+      } else {
+        // if length is unchanged, we skip this check
+        if (length !== undefined) {
+          if (!length && !metadata?.multipleDuration?.includes(length)) {
+            //This would work but it leaves the potential of this check being useless. Need to check against length and not eventType.length, but length can be undefined
+            throw new Error(t("event_setup_multiple_duration_default_error"));
+          }
+        }
+      }
+    }
+
+    // Prevent two payment apps to be enabled
+    // Ok to cast type here because this metadata will be updated as the event type metadata
+    if (checkForMultiplePaymentApps(metadata as z.infer<typeof EventTypeMetaDataSchema>))
+      throw new Error(t("event_setup_multiple_payment_apps_error"));
+
+    if (metadata?.apps?.stripe?.paymentOption === "HOLD" && seatsPerTimeSlot) {
+      throw new Error(t("seats_and_no_show_fee_error"));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { availability, users, scheduleName, ...rest } = input;
+    const payload = {
+      ...rest,
+      length,
+      locations,
+      recurringEvent,
+      periodStartDate: periodDates?.startDate,
+      periodEndDate: periodDates?.endDate,
+      periodCountCalendarDays,
+      id: eventType.id,
+      beforeEventBuffer,
+      afterEventBuffer,
+      bookingLimits,
+      onlyShowFirstAvailableSlot,
+      durationLimits,
+      seatsPerTimeSlot,
+      seatsShowAttendees,
+      seatsShowAvailabilityCount,
+      metadata,
+      customInputs,
+      children,
+      assignAllTeamMembers,
+    };
+    // Filter out undefined values
+    const filteredPayload = Object.entries(payload).reduce((acc, [key, value]) => {
+      if (value !== undefined) {
+        // @ts-expect-error Element implicitly has any type
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+
+    if (dirtyFieldExists) {
+      updateMutation.mutate({ ...filteredPayload, id: eventType.id });
+    }
+  };
+
+  const [slugExistsChildrenDialogOpen, setSlugExistsChildrenDialogOpen] = useState<ChildrenEventType[]>([]);
+  const slug = formMethods.watch("slug") ?? eventType.slug;
+
+  // Optional prerender all tabs after 300 ms on mount
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const Components = [
+        EventSetupTab,
+        EventAvailabilityTab,
+        EventTeamTab,
+        EventLimitsTab,
+        EventAdvancedTab,
+        EventInstantTab,
+        EventRecurringTab,
+        EventAppsTab,
+        EventWorkflowsTab,
+        EventWebhooksTab,
+      ];
+
+      Components.forEach((C) => {
+        // @ts-expect-error Property 'render' does not exist on type 'ComponentClass
+        C.render.preload();
+      });
+    }, 300);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  return (
+    <>
+      <EventTypeSingleLayout
+        enabledAppsNumber={numberOfActiveApps}
+        installedAppsNumber={eventTypeApps?.items.length || 0}
+        enabledWorkflowsNumber={props.allActiveWorkflows ? props.allActiveWorkflows.length : 0}
+        eventType={eventType}
+        activeWebhooksNumber={eventType.webhooks.filter((webhook) => webhook.active).length}
+        team={team}
+        availability={availability}
+        isUpdateMutationLoading={updateMutation.isPending}
+        formMethods={formMethods}
+        // disableBorder={tabName === "apps" || tabName === "workflows" || tabName === "webhooks"}
+        disableBorder={true}
+        currentUserMembership={currentUserMembership}
+        bookerUrl={eventType.bookerUrl}
+        isUserOrganizationAdmin={props.isUserOrganizationAdmin}>
+        <Form
+          form={formMethods}
+          id="event-type-form"
+          handleSubmit={async (values) => {
+            const { children } = values;
+            const dirtyValues = getDirtyFields(values);
+            const dirtyFieldExists = Object.keys(dirtyValues).length !== 0;
+            const {
+              periodDates,
+              periodCountCalendarDays,
+              beforeEventBuffer,
+              afterEventBuffer,
+              seatsPerTimeSlot,
+              seatsShowAttendees,
+              seatsShowAvailabilityCount,
+              bookingLimits,
+              onlyShowFirstAvailableSlot,
+              durationLimits,
+              recurringEvent,
+              locations,
+              metadata,
+              customInputs,
+              // We don't need to send send these values to the backend
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              seatsPerTimeSlotEnabled,
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              multipleDurationEnabled,
+              length,
+              ...input
+            } = dirtyValues;
+
+            if (length && !Number(length)) throw new Error(t("event_setup_length_error"));
+
+            if (bookingLimits) {
+              const isValid = validateIntervalLimitOrder(bookingLimits);
+              if (!isValid) throw new Error(t("event_setup_booking_limits_error"));
+            }
+
+            if (durationLimits) {
+              const isValid = validateIntervalLimitOrder(durationLimits);
+              if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
+            }
+
+            const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+            if (layoutError) throw new Error(t(layoutError));
+
+            if (metadata?.multipleDuration !== undefined) {
+              if (metadata?.multipleDuration.length < 1) {
+                throw new Error(t("event_setup_multiple_duration_error"));
+              } else {
+                if (length !== undefined) {
+                  if (!length && !metadata?.multipleDuration?.includes(length)) {
+                    //This would work but it leaves the potential of this check being useless. Need to check against length and not eventType.length, but length can be undefined
+                    throw new Error(t("event_setup_multiple_duration_default_error"));
+                  }
+                }
+              }
+            }
+
+            // Prevent two payment apps to be enabled
+            // Ok to cast type here because this metadata will be updated as the event type metadata
+            if (checkForMultiplePaymentApps(metadata as z.infer<typeof EventTypeMetaDataSchema>))
+              throw new Error(t("event_setup_multiple_payment_apps_error"));
+
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { availability, users, scheduleName, ...rest } = input;
+            const payload = {
+              ...rest,
+              children,
+              length,
+              locations,
+              recurringEvent,
+              periodStartDate: periodDates?.startDate,
+              periodEndDate: periodDates?.endDate,
+              periodCountCalendarDays,
+              id: eventType.id,
+              beforeEventBuffer,
+              afterEventBuffer,
+              bookingLimits,
+              onlyShowFirstAvailableSlot,
+              durationLimits,
+              seatsPerTimeSlot,
+              seatsShowAttendees,
+              seatsShowAvailabilityCount,
+              metadata,
+              customInputs,
+            };
+            // Filter out undefined values
+            const filteredPayload = Object.entries(payload).reduce((acc, [key, value]) => {
+              if (value !== undefined) {
+                // @ts-expect-error Element implicitly has any type
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
+
+            if (dirtyFieldExists) {
+              updateMutation.mutate({ ...filteredPayload, id: eventType.id, hashedLink: values.hashedLink });
+            }
+          }}>
+          <div ref={animationParentRef}>{tabMap[tabName]}</div>
+        </Form>
+      </EventTypeSingleLayout>
+      {slugExistsChildrenDialogOpen.length ? (
+        <ManagedEventTypeDialog
+          slugExistsChildrenDialogOpen={slugExistsChildrenDialogOpen}
+          isPending={formMethods.formState.isSubmitting}
+          onOpenChange={() => {
+            setSlugExistsChildrenDialogOpen([]);
+          }}
+          slug={slug}
+          onConfirm={(e: { preventDefault: () => void }) => {
+            e.preventDefault();
+            handleSubmit(formMethods.getValues());
+            telemetry.event(telemetryEventTypes.slugReplacementAction);
+            setSlugExistsChildrenDialogOpen([]);
+          }}
+        />
+      ) : null}
+      {/*<AssignmentWarningDialog*/}
+      {/*  isOpenAssignmentWarnDialog={isOpenAssignmentWarnDialog}*/}
+      {/*  setIsOpenAssignmentWarnDialog={setIsOpenAssignmentWarnDialog}*/}
+      {/*  pendingRoute={pendingRoute}*/}
+      {/*  leaveWithoutAssigningHosts={leaveWithoutAssigningHosts}*/}
+      {/*  id={eventType.id}*/}
+      {/*/>*/}
+    </>
+  );
+};
+const EventTypePageWrapper: React.FC<PageProps> & {
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+  getLayout?: AppProps["Component"]["getLayout"];
+} = (props) => {
+  const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });
+
+  if (!data) return null;
+
+  const eventType = data.eventType;
+
+  const { data: workflows } = trpc.viewer.workflows.getAllActiveWorkflows.useQuery({
+    eventType: {
+      id: props.type,
+      teamId: eventType.teamId,
+      userId: eventType.userId,
+      parent: eventType.parent,
+      metadata: eventType.metadata,
+    },
+  });
+
+  const propsData = {
+    ...(data as EventTypeSetupProps),
+    allActiveWorkflows: workflows,
+  };
+
+  return <EventTypePage {...propsData} />;
+};
+
+export default EventTypePageWrapper;

calcom/apps/web/modules/test-setup.ts

@@ -0,0 +1,186 @@
+import React from "react";
+import { vi, afterEach } from "vitest";
+
+global.React = React;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+// Mock all modules that are used in multiple tests for modules
+// We don't intend to provide the mock implementation here. They should be provided by respective tests.
+// But it makes it super easy to start testing any module view without worrying about mocking the dependencies.
+vi.mock("next-auth/react", () => ({
+  useSession: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: vi.fn().mockReturnValue({
+    replace: vi.fn(),
+  }),
+  usePathname: vi.fn(),
+}));
+
+vi.mock("@calcom/app-store/BookingPageTagManager", () => ({
+  default: vi.fn(),
+}));
+
+vi.mock("@calcom/app-store/locations", () => ({
+  DailyLocationType: "daily",
+  guessEventLocationType: vi.fn(),
+  getSuccessPageLocationMessage: vi.fn(),
+}));
+
+vi.mock("@calcom/app-store/utils", () => ({
+  getEventTypeAppData: vi.fn(),
+}));
+
+vi.mock("@calcom/core/event", () => ({
+  getEventName: vi.fn(),
+}));
+
+vi.mock("@calcom/ee/organizations/lib/orgDomains", () => ({
+  getOrgFullOrigin: vi.fn(),
+}));
+
+vi.mock("@calcom/features/eventtypes/components", () => ({
+  EventTypeDescriptionLazy: vi.fn(),
+}));
+
+vi.mock("@calcom/embed-core/embed-iframe", () => {
+  return {
+    useIsBackgroundTransparent: vi.fn(),
+    useIsEmbed: vi.fn(),
+    useEmbedNonStylesConfig: vi.fn(),
+    useEmbedStyles: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/features/bookings/components/event-meta/Price", () => {
+  return {};
+});
+
+vi.mock("@calcom/features/bookings/lib/SystemField", () => {
+  return {};
+});
+
+vi.mock("@calcom/lib/constants", () => {
+  return {
+    DEFAULT_LIGHT_BRAND_COLOR: "DEFAULT_LIGHT_BRAND_COLOR",
+    DEFAULT_DARK_BRAND_COLOR: "DEFAULT_DARK_BRAND_COLOR",
+    BOOKER_NUMBER_OF_DAYS_TO_LOAD: 1,
+  };
+});
+
+vi.mock("@calcom/lib/date-fns", () => {
+  return {};
+});
+
+vi.mock("@calcom/lib/getBrandColours", () => {
+  return {
+    default: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/lib/hooks/useCompatSearchParams", () => {
+  return {
+    useCompatSearchParams: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/lib/hooks/useLocale", () => {
+  return {
+    useLocale: vi.fn().mockReturnValue({
+      t: vi.fn().mockImplementation((text: string) => {
+        return text;
+      }),
+      i18n: {
+        language: "en",
+      },
+    }),
+  };
+});
+
+vi.mock("@calcom/lib/hooks/useRouterQuery", () => {
+  return {
+    useRouterQuery: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/lib/hooks/useTheme", () => {
+  return {
+    default: vi.fn(),
+  };
+});
+
+vi.mock("@calcom/lib/recurringStrings", () => {
+  return {};
+});
+
+vi.mock("@calcom/lib/recurringStrings", () => {
+  return {};
+});
+
+vi.mock("@calcom/prisma/zod-utils", () => ({
+  BookerLayouts: {
+    MONTH_VIEW: "month",
+  },
+  EventTypeMetaDataSchema: {
+    parse: vi.fn(),
+  },
+  bookingMetadataSchema: {
+    parse: vi.fn(),
+  },
+}));
+
+vi.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    viewer: {
+      public: {
+        submitRating: {
+          useMutation: vi.fn(),
+        },
+        noShow: {
+          useMutation: vi.fn(),
+        },
+      },
+    },
+  },
+}));
+
+vi.mock("@calcom/ui", () => ({
+  HeadSeo: vi.fn(),
+  useCalcomTheme: vi.fn(),
+  Icon: vi.fn(),
+  UnpublishedEntity: vi.fn(),
+  UserAvatar: vi.fn(),
+}));
+
+vi.mock("@calcom/web/components/PageWrapper", () => ({
+  default: vi.fn(),
+}));
+
+vi.mock("@calcom/web/components/booking/CancelBooking", () => ({}));
+
+vi.mock("@calcom/web/components/schemas/EventReservationSchema", () => ({
+  default: vi.fn(),
+}));
+
+vi.mock("@calcom/web/lib/clock", () => ({
+  timeZone: vi.fn(),
+}));
+
+vi.mock("./bookings-single-view.getServerSideProps", () => ({}));
+
+vi.mock("@calcom/lib/webstorage", () => ({
+  localStorage: {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+  },
+}));
+
+vi.mock("@calcom/lib/timeFormat", () => ({
+  detectBrowserTimeFormat: vi.fn(),
+  isBrowserLocale24h: vi.fn(),
+  getIs24hClockFromLocalStorage: vi.fn(),
+}));

calcom/apps/web/modules/users/views/users-public-view.getServerSideProps.tsx

@@ -0,0 +1,199 @@
+import type { DehydratedState } from "@tanstack/react-query";
+import type { GetServerSideProps } from "next";
+import { encode } from "querystring";
+import type { z } from "zod";
+
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
+import { getUsernameList } from "@calcom/lib/defaultEvents";
+import { getEventTypesPublic } from "@calcom/lib/event-types/getEventTypesPublic";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import logger from "@calcom/lib/logger";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import { stripMarkdown } from "@calcom/lib/stripMarkdown";
+import { RedirectType, type EventType, type User } from "@calcom/prisma/client";
+import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import type { UserProfile } from "@calcom/types/UserProfile";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+import type { EmbedProps } from "@lib/withEmbedSsr";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const log = logger.getSubLogger({ prefix: ["[[pages/[user]]]"] });
+export type UserPageProps = {
+  trpcState: DehydratedState;
+  profile: {
+    name: string;
+    image: string;
+    theme: string | null;
+    brandColor: string;
+    darkBrandColor: string;
+    organization: {
+      requestedSlug: string | null;
+      slug: string | null;
+      id: number | null;
+    } | null;
+    allowSEOIndexing: boolean;
+    username: string | null;
+  };
+  users: (Pick<User, "name" | "username" | "bio" | "verified" | "avatarUrl"> & {
+    profile: UserProfile;
+  })[];
+  themeBasis: string | null;
+  markdownStrippedBio: string;
+  safeBio: string;
+  entity: {
+    logoUrl?: string | null;
+    considerUnpublished: boolean;
+    orgSlug?: string | null;
+    name?: string | null;
+    teamSlug?: string | null;
+  };
+  eventTypes: ({
+    descriptionAsSafeHTML: string;
+    metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  } & Pick<
+    EventType,
+    | "id"
+    | "title"
+    | "slug"
+    | "length"
+    | "hidden"
+    | "lockTimeZoneToggleOnBookingPage"
+    | "requiresConfirmation"
+    | "requiresBookerEmailVerification"
+    | "price"
+    | "currency"
+    | "recurringEvent"
+  >)[];
+} & EmbedProps;
+
+export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+
+  const usernameList = getUsernameList(context.query.user as string);
+  const isARedirectFromNonOrgLink = context.query.orgRedirection === "true";
+  const isOrgContext = isValidOrgDomain && !!currentOrgDomain;
+
+  const dataFetchStart = Date.now();
+
+  if (!isOrgContext) {
+    // If there is no org context, see if some redirect is setup due to org migration
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernameList,
+      redirectType: RedirectType.User,
+      eventTypeSlug: null,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const usersInOrgContext = await UserRepository.findUsersByUsername({
+    usernameList,
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
+  });
+
+  const isDynamicGroup = usersInOrgContext.length > 1;
+  log.debug(safeStringify({ usersInOrgContext, isValidOrgDomain, currentOrgDomain, isDynamicGroup }));
+
+  if (isDynamicGroup) {
+    const destinationUrl = `/${usernameList.join("+")}/dynamic`;
+    const originalQueryString = new URLSearchParams(context.query as Record<string, string>).toString();
+    const destinationWithQuery = `${destinationUrl}?${originalQueryString}`;
+    log.debug(`Dynamic group detected, redirecting to ${destinationUrl}`);
+    return {
+      redirect: {
+        permanent: false,
+        destination: destinationWithQuery,
+      },
+    } as const;
+  }
+
+  const isNonOrgUser = (user: { profile: UserProfile }) => {
+    return !user.profile?.organization;
+  };
+
+  const isThereAnyNonOrgUser = usersInOrgContext.some(isNonOrgUser);
+
+  if (!usersInOrgContext.length || (!isValidOrgDomain && !isThereAnyNonOrgUser)) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const [user] = usersInOrgContext; //to be used when dealing with single user, not dynamic group
+
+  const profile = {
+    name: user.name || user.username || "",
+    image: getUserAvatarUrl({
+      avatarUrl: user.avatarUrl,
+    }),
+    theme: user.theme,
+    brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    avatarUrl: user.avatarUrl,
+    darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+    allowSEOIndexing: user.allowSEOIndexing ?? true,
+    username: user.username,
+    organization: user.profile.organization,
+  };
+
+  const dataFetchEnd = Date.now();
+  if (context.query.log === "1") {
+    context.res.setHeader("X-Data-Fetch-Time", `${dataFetchEnd - dataFetchStart}ms`);
+  }
+
+  const eventTypes = await getEventTypesPublic(user.id);
+
+  // if profile only has one public event-type, redirect to it
+  if (eventTypes.length === 1 && context.query.redirect !== "false") {
+    // Redirect but don't change the URL
+    const urlDestination = `/${user.profile.username}/${eventTypes[0].slug}`;
+    const { query } = context;
+    const urlQuery = new URLSearchParams(encode(query));
+
+    return {
+      redirect: {
+        permanent: false,
+        destination: `${urlDestination}?${urlQuery}`,
+      },
+    };
+  }
+
+  const safeBio = markdownToSafeHTML(user.bio) || "";
+
+  const markdownStrippedBio = stripMarkdown(user?.bio || "");
+  const org = usersInOrgContext[0].profile.organization;
+
+  return {
+    props: {
+      users: usersInOrgContext.map((user) => ({
+        name: user.name,
+        username: user.username,
+        bio: user.bio,
+        avatarUrl: user.avatarUrl,
+        verified: user.verified,
+        profile: user.profile,
+      })),
+      entity: {
+        ...(org?.logoUrl ? { logoUrl: org?.logoUrl } : {}),
+        considerUnpublished: !isARedirectFromNonOrgLink && org?.slug === null,
+        orgSlug: currentOrgDomain,
+        name: org?.name ?? null,
+      },
+      eventTypes,
+      safeBio,
+      profile,
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: user.username,
+      trpcState: ssr.dehydrate(),
+      markdownStrippedBio,
+    },
+  };
+};

calcom/apps/web/modules/users/views/users-public-view.test.tsx

@@ -0,0 +1,102 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { getOrgFullOrigin } from "@calcom/ee/organizations/lib/orgDomains";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
+import { HeadSeo } from "@calcom/ui";
+
+import UserPage from "./users-public-view";
+
+function mockedUserPageComponentProps(props: Partial<React.ComponentProps<typeof UserPage>>) {
+  return {
+    trpcState: {
+      mutations: [],
+      queries: [],
+    },
+    themeBasis: "dark",
+    safeBio: "My Bio",
+    profile: {
+      name: "John Doe",
+      image: "john-profile-url",
+      theme: "dark",
+      brandColor: "red",
+      darkBrandColor: "black",
+      organization: { requestedSlug: "slug", slug: "slug", id: 1 },
+      allowSEOIndexing: true,
+      username: "john",
+    },
+    users: [
+      {
+        name: "John Doe",
+        username: "john",
+        avatarUrl: "john-user-url",
+        bio: "",
+        verified: false,
+        profile: {
+          upId: "1",
+          id: 1,
+          username: "john",
+          organizationId: null,
+          organization: null,
+        },
+      },
+    ],
+    markdownStrippedBio: "My Bio",
+    entity: {
+      considerUnpublished: false,
+      ...(props.entity ?? null),
+    },
+    eventTypes: [],
+  } satisfies React.ComponentProps<typeof UserPage>;
+}
+
+describe("UserPage Component", () => {
+  it("should render HeadSeo with correct props", () => {
+    const mockData = {
+      props: mockedUserPageComponentProps({
+        entity: {
+          considerUnpublished: false,
+          orgSlug: "org1",
+        },
+      }),
+    };
+
+    vi.mocked(getOrgFullOrigin).mockImplementation((orgSlug: string | null) => {
+      return `${orgSlug}.cal.local`;
+    });
+
+    vi.mocked(useRouterQuery).mockReturnValue({
+      uid: "uid",
+    });
+
+    render(<UserPage {...mockData.props} />);
+
+    const expectedDescription = mockData.props.markdownStrippedBio;
+    const expectedTitle = expectedDescription;
+    expect(HeadSeo).toHaveBeenCalledWith(
+      {
+        origin: `${mockData.props.entity.orgSlug}.cal.local`,
+        title: `${mockData.props.profile.name}`,
+        description: expectedDescription,
+        meeting: {
+          profile: {
+            name: mockData.props.profile.name,
+            image: mockData.props.users[0].avatarUrl,
+          },
+          title: expectedTitle,
+          users: [
+            {
+              name: mockData.props.users[0].name,
+              username: mockData.props.users[0].username,
+            },
+          ],
+        },
+        nextSeoProps: {
+          nofollow: !mockData.props.profile.allowSEOIndexing,
+          noindex: !mockData.props.profile.allowSEOIndexing,
+        },
+      },
+      {}
+    );
+  });
+});

calcom/apps/web/modules/users/views/users-public-view.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import classNames from "classnames";
+import type { InferGetServerSidePropsType } from "next";
+import Link from "next/link";
+import { Toaster } from "react-hot-toast";
+
+import {
+  sdkActionManager,
+  useEmbedNonStylesConfig,
+  useEmbedStyles,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
+import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
+import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
+import useTheme from "@calcom/lib/hooks/useTheme";
+import { HeadSeo, Icon, UnpublishedEntity, UserAvatar } from "@calcom/ui";
+
+import { type getServerSideProps } from "./users-public-view.getServerSideProps";
+
+export function UserPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { users, profile, eventTypes, markdownStrippedBio, entity } = props;
+
+  const [user] = users; //To be used when we only have a single user, not dynamic group
+  useTheme(profile.theme);
+
+  const isBioEmpty = !user.bio || !user.bio.replace("<p><br></p>", "").length;
+
+  const isEmbed = useIsEmbed(props.isEmbed);
+  const eventTypeListItemEmbedStyles = useEmbedStyles("eventTypeListItem");
+  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
+  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
+  const {
+    // So it doesn't display in the Link (and make tests fail)
+    user: _user,
+    orgSlug: _orgSlug,
+    redirect: _redirect,
+    ...query
+  } = useRouterQuery();
+
+  /*
+   const telemetry = useTelemetry();
+   useEffect(() => {
+    if (top !== window) {
+      //page_view will be collected automatically by _middleware.ts
+      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
+    }
+  }, [telemetry, router.asPath]); */
+  if (entity.considerUnpublished) {
+    return (
+      <div className="flex h-full min-h-[calc(100dvh)] items-center justify-center">
+        <UnpublishedEntity {...entity} />
+      </div>
+    );
+  }
+
+  const isEventListEmpty = eventTypes.length === 0;
+  const isOrg = !!user?.profile?.organization;
+  return (
+    <>
+      <HeadSeo
+        origin={getOrgFullOrigin(entity.orgSlug ?? null)}
+        title={profile.name}
+        description={markdownStrippedBio}
+        meeting={{
+          title: markdownStrippedBio,
+          profile: { name: `${profile.name}`, image: user.avatarUrl || null },
+          users: [{ username: `${user.username}`, name: `${user.name}` }],
+        }}
+        nextSeoProps={{
+          noindex: !profile.allowSEOIndexing,
+          nofollow: !profile.allowSEOIndexing,
+        }}
+      />
+
+      <div className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "max-w-3xl" : "")}>
+        <main
+          className={classNames(
+            shouldAlignCentrally ? "mx-auto" : "",
+            isEmbed ? "border-booker border-booker-width  bg-default rounded-md" : "",
+            "max-w-3xl px-4 py-24"
+          )}>
+          <div className="mb-8 text-center">
+            <UserAvatar
+              size="xl"
+              user={{
+                avatarUrl: user.avatarUrl,
+                profile: user.profile,
+                name: profile.name,
+                username: profile.username,
+              }}
+            />
+            <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
+              {profile.name}
+              {!isOrg && user.verified && (
+                <Icon
+                  name="badge-check"
+                  className="mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black"
+                />
+              )}
+              {isOrg && (
+                <Icon
+                  name="badge-check"
+                  className="mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black"
+                />
+              )}
+            </h1>
+            {!isBioEmpty && (
+              <>
+                <div
+                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  dangerouslySetInnerHTML={{ __html: props.safeBio }}
+                />
+              </>
+            )}
+          </div>
+
+          <div
+            className={classNames("rounded-md ", !isEventListEmpty && "border-subtle border")}
+            data-testid="event-types">
+            {eventTypes.map((type) => (
+              <Link
+                key={type.id}
+                style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
+                prefetch={false}
+                href={{
+                  pathname: `/${user.profile.username}/${type.slug}`,
+                  query,
+                }}
+                passHref
+                onClick={async () => {
+                  sdkActionManager?.fire("eventTypeSelected", {
+                    eventType: type,
+                  });
+                }}
+                className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0"
+                data-testid="event-type-link">
+                <Icon
+                  name="arrow-right"
+                  className="text-emphasis absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
+                />
+                {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
+                <div className="block w-full p-5">
+                  <div className="flex flex-wrap items-center">
+                    <h2 className="text-default pr-2 text-sm font-semibold">{type.title}</h2>
+                  </div>
+                  <EventTypeDescription eventType={type} isPublic={true} shortenDescription />
+                </div>
+              </Link>
+            ))}
+          </div>
+
+          {isEventListEmpty && <EmptyPage name={profile.name || "User"} />}
+        </main>
+        <Toaster position="bottom-right" />
+      </div>
+    </>
+  );
+}
+
+export default UserPage;

calcom/apps/web/modules/users/views/users-type-public-view.getServerSideProps.tsx

@@ -0,0 +1,270 @@
+import type { DehydratedState } from "@tanstack/react-query";
+import { type GetServerSidePropsContext } from "next";
+import type { Session } from "next-auth";
+import { z } from "zod";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import type { getPublicEvent } from "@calcom/features/eventtypes/lib/getPublicEvent";
+import { getUsernameList } from "@calcom/lib/defaultEvents";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";
+import { RedirectType } from "@calcom/prisma/client";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+import { type EmbedProps } from "@lib/withEmbedSsr";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
+
+type Props = {
+  eventData: Pick<
+    NonNullable<Awaited<ReturnType<typeof getPublicEvent>>>,
+    "id" | "length" | "metadata" | "entity"
+  >;
+  booking?: GetBookingType;
+  rescheduleUid: string | null;
+  bookingUid: string | null;
+  user: string;
+  slug: string;
+  trpcState: DehydratedState;
+  isBrandingHidden: boolean;
+  isSEOIndexable: boolean | null;
+  themeBasis: null | string;
+  orgBannerUrl: null;
+};
+
+async function processReschedule({
+  props,
+  rescheduleUid,
+  session,
+}: {
+  props: Props;
+  session: Session | null;
+  rescheduleUid: string | string[] | undefined;
+}) {
+  if (!rescheduleUid) return;
+  const booking = await getBookingForReschedule(`${rescheduleUid}`, session?.user?.id);
+  // if no booking found, no eventTypeId (dynamic) or it matches this eventData - return void (success).
+  if (booking === null || !booking.eventTypeId || booking?.eventTypeId === props.eventData?.id) {
+    props.booking = booking;
+    props.rescheduleUid = Array.isArray(rescheduleUid) ? rescheduleUid[0] : rescheduleUid;
+    return;
+  }
+  // handle redirect response
+  const redirectEventTypeTarget = await prisma.eventType.findUnique({
+    where: {
+      id: booking.eventTypeId,
+    },
+    select: {
+      slug: true,
+    },
+  });
+  if (!redirectEventTypeTarget) {
+    return {
+      notFound: true,
+    } as const;
+  }
+  return {
+    redirect: {
+      permanent: false,
+      destination: redirectEventTypeTarget.slug,
+    },
+  };
+}
+
+async function processSeatedEvent({
+  props,
+  bookingUid,
+}: {
+  props: Props;
+  bookingUid: string | string[] | undefined;
+}) {
+  if (!bookingUid) return;
+  props.booking = await getBookingForSeatedEvent(`${bookingUid}`);
+  props.bookingUid = Array.isArray(bookingUid) ? bookingUid[0] : bookingUid;
+}
+
+async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, bookingUid } = context.query;
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  if (!org) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernames,
+      redirectType: RedirectType.User,
+      eventTypeSlug: slug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const usersInOrgContext = await UserRepository.findUsersByUsername({
+    usernameList: usernames,
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
+  });
+
+  const users = usersInOrgContext;
+
+  if (!users.length) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username: usernames.join("+"),
+    eventSlug: slug,
+    org,
+    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const props: Props = {
+    eventData: {
+      id: eventData.id,
+      entity: eventData.entity,
+      length: eventData.length,
+      metadata: {
+        ...eventData.metadata,
+        multipleDuration: [15, 30, 60],
+      },
+    },
+    user: usernames.join("+"),
+    slug,
+    trpcState: ssr.dehydrate(),
+    isBrandingHidden: false,
+    isSEOIndexable: true,
+    themeBasis: null,
+    bookingUid: bookingUid ? `${bookingUid}` : null,
+    rescheduleUid: null,
+    orgBannerUrl: null,
+  };
+
+  if (rescheduleUid) {
+    const processRescheduleResult = await processReschedule({ props, rescheduleUid, session });
+    if (processRescheduleResult) {
+      return processRescheduleResult;
+    }
+  } else if (bookingUid) {
+    await processSeatedEvent({ props, bookingUid });
+  }
+
+  return {
+    props,
+  };
+}
+
+async function getUserPageProps(context: GetServerSidePropsContext) {
+  const session = await getServerSession(context);
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const username = usernames[0];
+  const { rescheduleUid, bookingUid } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+
+  const isOrgContext = currentOrgDomain && isValidOrgDomain;
+  if (!isOrgContext) {
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernames,
+      redirectType: RedirectType.User,
+      eventTypeSlug: slug,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const [user] = await UserRepository.findUsersByUsername({
+    usernameList: [username],
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
+  });
+
+  if (!user) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we can show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username,
+    eventSlug: slug,
+    org,
+    fromRedirectOfNonOrgLink: context.query.orgRedirection === "true",
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    } as const;
+  }
+
+  const props: Props = {
+    eventData: {
+      id: eventData.id,
+      entity: eventData.entity,
+      length: eventData.length,
+      metadata: eventData.metadata,
+    },
+    user: username,
+    slug,
+    trpcState: ssr.dehydrate(),
+    isBrandingHidden: user?.hideBranding,
+    isSEOIndexable: user?.allowSEOIndexing,
+    themeBasis: username,
+    bookingUid: bookingUid ? `${bookingUid}` : null,
+    rescheduleUid: null,
+    orgBannerUrl: eventData?.owner?.profile?.organization?.bannerUrl ?? null,
+  };
+
+  if (rescheduleUid) {
+    const processRescheduleResult = await processReschedule({ props, rescheduleUid, session });
+    if (processRescheduleResult) {
+      return processRescheduleResult;
+    }
+  } else if (bookingUid) {
+    await processSeatedEvent({ props, bookingUid });
+  }
+
+  return {
+    props,
+  };
+}
+
+const paramsSchema = z.object({
+  type: z.string().transform((s) => slugify(s)),
+  user: z.string().transform((s) => getUsernameList(s)),
+});
+
+// Booker page fetches a tiny bit of data server side, to determine early
+// whether the page should show an away state or dynamic booking not allowed.
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { user } = paramsSchema.parse(context.params);
+  const isDynamicGroup = user.length > 1;
+
+  return isDynamicGroup ? await getDynamicGroupPageProps(context) : await getUserPageProps(context);
+};

calcom/apps/web/modules/users/views/users-type-public-view.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+
+import { Booker } from "@calcom/atoms/monorepo";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
+
+import { type PageProps } from "./users-type-public-view.getServerSideProps";
+
+export const getMultipleDurationValue = (
+  multipleDurationConfig: number[] | undefined,
+  queryDuration: string | string[] | null | undefined,
+  defaultValue: number
+) => {
+  if (!multipleDurationConfig) return null;
+  if (multipleDurationConfig.includes(Number(queryDuration))) return Number(queryDuration);
+  return defaultValue;
+};
+
+export default function Type({
+  slug,
+  user,
+  isEmbed,
+  booking,
+  isBrandingHidden,
+  isSEOIndexable,
+  rescheduleUid,
+  eventData,
+  orgBannerUrl,
+}: PageProps) {
+  const searchParams = useSearchParams();
+
+  return (
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={rescheduleUid ?? undefined}
+        hideBranding={isBrandingHidden}
+        isSEOIndexable={isSEOIndexable ?? true}
+        entity={eventData.entity}
+        bookingData={booking}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        bookingData={booking}
+        hideBranding={isBrandingHidden}
+        entity={eventData.entity}
+        durationConfig={eventData.metadata?.multipleDuration}
+        orgBannerUrl={orgBannerUrl}
+        /* TODO: Currently unused, evaluate it is needed-
+         *       Possible alternative approach is to have onDurationChange.
+         */
+        duration={getMultipleDurationValue(
+          eventData.metadata?.multipleDuration,
+          searchParams?.get("duration"),
+          eventData.length
+        )}
+      />
+    </main>
+  );
+}

calcom/apps/web/modules/videos/ai/ai-transcribe.tsx

@@ -0,0 +1,169 @@
+import { useTranscription, useRecording } from "@daily-co/daily-react";
+import { useDaily, useDailyEvent } from "@daily-co/daily-react";
+import React, { Fragment, useCallback, useRef, useState, useLayoutEffect, useEffect } from "react";
+
+import {
+  TRANSCRIPTION_STARTED_ICON,
+  RECORDING_IN_PROGRESS_ICON,
+  TRANSCRIPTION_STOPPED_ICON,
+  RECORDING_DEFAULT_ICON,
+} from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+const BUTTONS = {
+  STOP_TRANSCRIPTION: {
+    label: "Stop",
+    tooltip: "Stop transcription",
+    iconPath: TRANSCRIPTION_STARTED_ICON,
+    iconPathDarkMode: TRANSCRIPTION_STARTED_ICON,
+  },
+  START_TRANSCRIPTION: {
+    label: "Cal.ai",
+    tooltip: "Transcription powered by AI",
+    iconPath: TRANSCRIPTION_STOPPED_ICON,
+    iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
+  },
+  START_RECORDING: {
+    label: "Record",
+    tooltip: "Start recording",
+    iconPath: RECORDING_DEFAULT_ICON,
+    iconPathDarkMode: RECORDING_DEFAULT_ICON,
+  },
+  WAIT_FOR_RECORDING_TO_START: {
+    label: "Starting..",
+    tooltip: "Please wait while we start recording",
+    iconPath: RECORDING_DEFAULT_ICON,
+    iconPathDarkMode: RECORDING_DEFAULT_ICON,
+  },
+  STOP_RECORDING: {
+    label: "Stop",
+    tooltip: "Stop recording",
+    iconPath: RECORDING_IN_PROGRESS_ICON,
+    iconPathDarkMode: RECORDING_IN_PROGRESS_ICON,
+  },
+};
+
+export const CalAiTranscribe = () => {
+  const daily = useDaily();
+  const { t } = useLocale();
+
+  const [transcript, setTranscript] = useState("");
+
+  const [transcriptHeight, setTranscriptHeight] = useState(0);
+  const transcriptRef = useRef<HTMLDivElement | null>(null);
+
+  const transcription = useTranscription();
+  const recording = useRecording();
+
+  useDailyEvent(
+    "app-message",
+    useCallback((ev) => {
+      const data = ev?.data;
+      if (data.user_name && data.text) setTranscript(`${data.user_name}: ${data.text}`);
+    }, [])
+  );
+
+  useDailyEvent("transcription-started", (ev) => {
+    daily?.updateCustomTrayButtons({
+      recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
+      transcription: BUTTONS.STOP_TRANSCRIPTION,
+    });
+  });
+
+  useDailyEvent("recording-started", (ev) => {
+    daily?.updateCustomTrayButtons({
+      recording: BUTTONS.STOP_RECORDING,
+      transcription: transcription?.isTranscribing ? BUTTONS.STOP_TRANSCRIPTION : BUTTONS.START_TRANSCRIPTION,
+    });
+  });
+
+  useDailyEvent("transcription-stopped", (ev) => {
+    daily?.updateCustomTrayButtons({
+      recording: recording?.isRecording ? BUTTONS.STOP_RECORDING : BUTTONS.START_RECORDING,
+      transcription: BUTTONS.START_TRANSCRIPTION,
+    });
+  });
+
+  useDailyEvent("recording-stopped", (ev) => {
+    daily?.updateCustomTrayButtons({
+      recording: BUTTONS.START_RECORDING,
+      transcription: transcription?.isTranscribing ? BUTTONS.STOP_TRANSCRIPTION : BUTTONS.START_TRANSCRIPTION,
+    });
+  });
+
+  const toggleRecording = async () => {
+    if (recording?.isRecording) {
+      await daily?.stopRecording();
+    } else {
+      daily?.updateCustomTrayButtons({
+        recording: BUTTONS.WAIT_FOR_RECORDING_TO_START,
+        transcription: transcription?.isTranscribing
+          ? BUTTONS.STOP_TRANSCRIPTION
+          : BUTTONS.START_TRANSCRIPTION,
+      });
+
+      await daily?.startRecording({
+        // 480p
+        videoBitrate: 2000,
+      });
+    }
+  };
+
+  const toggleTranscription = async () => {
+    if (transcription?.isTranscribing) {
+      daily?.stopTranscription();
+    } else {
+      daily?.startTranscription();
+    }
+  };
+
+  useDailyEvent("custom-button-click", async (ev) => {
+    if (ev?.button_id === "recording") {
+      toggleRecording();
+    } else if (ev?.button_id === "transcription") {
+      toggleTranscription();
+    }
+  });
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setTranscriptHeight(entry.target.scrollHeight);
+      }
+    });
+
+    if (transcriptRef.current) {
+      observer.observe(transcriptRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    transcriptRef.current?.scrollTo({
+      top: transcriptRef.current?.scrollHeight,
+      behavior: "smooth",
+    });
+  }, [transcriptHeight]);
+
+  return (
+    <>
+      <div
+        id="cal-ai-transcription"
+        style={{
+          textShadow: "0 0 20px black, 0 0 20px black, 0 0 20px black",
+        }}
+        ref={transcriptRef}
+        className="max-h-full overflow-x-hidden overflow-y-scroll p-2 text-center text-white">
+        {transcript
+          ? transcript.split("\n").map((line, i) => (
+              <Fragment key={`transcript-${i}`}>
+                {i > 0 && <br />}
+                {line}
+              </Fragment>
+            ))
+          : ""}
+      </div>
+    </>
+  );
+};

calcom/apps/web/modules/videos/views/videos-meeting-ended-single-view.getServerSideProps.tsx

@@ -0,0 +1,52 @@
+import type { GetServerSidePropsContext } from "next";
+
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid as string,
+    },
+    select: {
+      ...bookingMinimalSelect,
+      uid: true,
+      user: {
+        select: {
+          credentials: true,
+        },
+      },
+      references: {
+        select: {
+          uid: true,
+          type: true,
+          meetingUrl: true,
+        },
+      },
+    },
+  });
+
+  if (!booking) {
+    const redirect = {
+      redirect: {
+        destination: "/video/no-meeting-found",
+        permanent: false,
+      },
+    } as const;
+
+    return redirect;
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  return {
+    props: {
+      booking: bookingObj,
+    },
+  };
+}

calcom/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
+import { Button, HeadSeo, Icon } from "@calcom/ui";
+
+import { type PageProps } from "./videos-meeting-ended-single-view.getServerSideProps";
+
+export default function MeetingUnavailable(props: PageProps) {
+  const { t } = useLocale();
+
+  return (
+    <div>
+      <HeadSeo title="Meeting Unavailable" description="Meeting Unavailable" />
+      <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 pb-20 pt-4 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="bg-default inline-block transform overflow-hidden rounded-lg px-4 pb-4 pt-5 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="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                    <Icon name="x" className="h-6 w-6 text-red-600" />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
+                      This meeting is in the past.
+                    </h3>
+                  </div>
+                  <div className="mt-4 border-b border-t py-4">
+                    <h2 className="font-cal text-default mb-2 text-center text-lg font-medium">
+                      {props.booking.title}
+                    </h2>
+                    <p className="text-subtle text-center">
+                      <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
+                      {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
+                    </p>
+                  </div>
+                </div>
+                <div className="mt-5 text-center sm:mt-6">
+                  <div className="mt-5">
+                    <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
+                      {t("go_back")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

calcom/apps/web/modules/videos/views/videos-meeting-not-started-single-view.getServerSideProps.tsx

@@ -0,0 +1,38 @@
+import type { GetServerSidePropsContext } from "next";
+
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+import type { inferSSRProps } from "@calcom/types/inferSSRProps";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
+// change the type
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid as string,
+    },
+    select: bookingMinimalSelect,
+  });
+
+  if (!booking) {
+    const redirect = {
+      redirect: {
+        destination: "/video/no-meeting-found",
+        permanent: false,
+      },
+    } as const;
+
+    return redirect;
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  return {
+    props: {
+      booking: bookingObj,
+    },
+  };
+}

calcom/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
+import { Button, HeadSeo, Icon, EmptyScreen } from "@calcom/ui";
+
+import { type PageProps } from "./videos-meeting-not-started-single-view.getServerSideProps";
+
+export default function MeetingNotStarted(props: PageProps) {
+  const { t } = useLocale();
+  return (
+    <>
+      <HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
+      <main className="mx-auto my-24 max-w-3xl">
+        <EmptyScreen
+          Icon="clock"
+          headline={t("this_meeting_has_not_started_yet")}
+          description={
+            <>
+              <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
+              <p className="text-subtle text-center">
+                <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
+                {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
+              </p>
+            </>
+          }
+          buttonRaw={
+            <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
+              {t("go_back")}
+            </Button>
+          }
+        />
+      </main>
+    </>
+  );
+}

calcom/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
+
+export default function NoMeetingFound() {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
+      <main className="mx-auto my-24 max-w-3xl">
+        <EmptyScreen
+          Icon="x"
+          headline={t("no_meeting_found")}
+          description={t("no_meeting_found_description")}
+          buttonRaw={
+            <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
+              {t("go_back_home")}
+            </Button>
+          }
+        />
+      </main>
+    </>
+  );
+}

calcom/apps/web/modules/videos/views/videos-single-view.getServerSideProps.tsx

@@ -0,0 +1,158 @@
+import MarkdownIt from "markdown-it";
+import type { GetServerSidePropsContext } from "next";
+
+import {
+  generateGuestMeetingTokenFromOwnerMeetingToken,
+  setEnableRecordingUIForOrganizer,
+} from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { getCalVideoReference } from "@calcom/features/get-cal-video-reference";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import prisma, { bookingMinimalSelect } from "@calcom/prisma";
+
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
+const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  const { req } = context;
+
+  const ssr = await ssrInit(context);
+
+  const booking = await prisma.booking.findUnique({
+    where: {
+      uid: context.query.uid as string,
+    },
+    select: {
+      ...bookingMinimalSelect,
+      uid: true,
+      description: true,
+      isRecorded: true,
+      user: {
+        select: {
+          id: true,
+          timeZone: true,
+          name: true,
+          email: true,
+          username: true,
+        },
+      },
+      references: {
+        select: {
+          id: true,
+          uid: true,
+          type: true,
+          meetingUrl: true,
+          meetingPassword: true,
+        },
+        where: {
+          type: "daily_video",
+        },
+      },
+    },
+  });
+
+  if (!booking || booking.references.length === 0 || !booking.references[0].meetingUrl) {
+    return {
+      redirect: {
+        destination: "/video/no-meeting-found",
+        permanent: false,
+      },
+    };
+  }
+
+  const hasTeamPlan = booking.user?.id
+    ? await prisma.membership.findFirst({
+        where: {
+          userId: booking.user.id,
+          team: {
+            slug: {
+              not: null,
+            },
+          },
+        },
+      })
+    : false;
+
+  const profile = booking.user
+    ? (
+        await UserRepository.enrichUserWithItsProfile({
+          user: booking.user,
+        })
+      ).profile
+    : null;
+
+  //daily.co calls have a 14 days exit buffer when a user enters a call when it's not available it will trigger the modals
+  const now = new Date();
+  const exitDate = new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000);
+
+  //find out if the meeting is in the past
+  const isPast = booking?.endTime <= exitDate;
+  if (isPast) {
+    return {
+      redirect: {
+        destination: `/video/meeting-ended/${booking?.uid}`,
+        permanent: false,
+      },
+    };
+  }
+
+  const bookingObj = Object.assign({}, booking, {
+    startTime: booking.startTime.toString(),
+    endTime: booking.endTime.toString(),
+  });
+
+  const session = await getServerSession({ req });
+
+  const oldVideoReference = getCalVideoReference(bookingObj.references);
+
+  // set meetingPassword for guests
+  if (session?.user.id !== bookingObj.user?.id) {
+    const guestMeetingPassword = await generateGuestMeetingTokenFromOwnerMeetingToken(
+      oldVideoReference.meetingPassword
+    );
+
+    bookingObj.references.forEach((bookRef) => {
+      bookRef.meetingPassword = guestMeetingPassword;
+    });
+  }
+  // Only for backward compatibility for organizer
+  else {
+    const meetingPassword = await setEnableRecordingUIForOrganizer(
+      oldVideoReference.id,
+      oldVideoReference.meetingPassword
+    );
+    if (!!meetingPassword) {
+      bookingObj.references.forEach((bookRef) => {
+        bookRef.meetingPassword = meetingPassword;
+      });
+    }
+  }
+
+  const videoReference = getCalVideoReference(bookingObj.references);
+
+  return {
+    props: {
+      meetingUrl: videoReference.meetingUrl ?? "",
+      ...(typeof videoReference.meetingPassword === "string" && {
+        meetingPassword: videoReference.meetingPassword,
+      }),
+      booking: {
+        ...bookingObj,
+        ...(bookingObj.description && { description: md.render(bookingObj.description) }),
+        user: bookingObj.user
+          ? {
+              ...bookingObj.user,
+              organization: profile?.organization,
+            }
+          : bookingObj.user,
+      },
+      hasTeamPlan: !!hasTeamPlan,
+      trpcState: ssr.dehydrate(),
+    },
+  };
+}

calcom/apps/web/modules/videos/views/videos-single-view.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import type { DailyCall } from "@daily-co/daily-js";
+import DailyIframe from "@daily-co/daily-js";
+import { DailyProvider } from "@daily-co/daily-react";
+import Head from "next/head";
+import { useState, useEffect, useRef } from "react";
+
+import dayjs from "@calcom/dayjs";
+import classNames from "@calcom/lib/classNames";
+import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants";
+import { TRANSCRIPTION_STOPPED_ICON, RECORDING_DEFAULT_ICON } from "@calcom/lib/constants";
+import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import { Icon } from "@calcom/ui";
+
+import { CalAiTranscribe } from "~/videos/ai/ai-transcribe";
+
+import { type PageProps } from "./videos-single-view.getServerSideProps";
+
+export default function JoinCall(props: PageProps) {
+  const { t } = useLocale();
+  const { meetingUrl, meetingPassword, booking, hasTeamPlan } = props;
+  const [daily, setDaily] = useState<DailyCall | null>(null);
+
+  useEffect(() => {
+    const callFrame = DailyIframe.createFrame({
+      theme: {
+        colors: {
+          accent: "#FFF",
+          accentText: "#111111",
+          background: "#111111",
+          backgroundAccent: "#111111",
+          baseText: "#FFF",
+          border: "#292929",
+          mainAreaBg: "#111111",
+          mainAreaBgAccent: "#1A1A1A",
+          mainAreaText: "#FFF",
+          supportiveText: "#FFF",
+        },
+      },
+      showLeaveButton: true,
+      iframeStyle: {
+        position: "fixed",
+        width: "100%",
+        height: "100%",
+      },
+      url: meetingUrl,
+      ...(typeof meetingPassword === "string" && { token: meetingPassword }),
+      ...(hasTeamPlan && {
+        customTrayButtons: {
+          recording: {
+            label: "Record",
+            tooltip: "Start or stop recording",
+            iconPath: RECORDING_DEFAULT_ICON,
+            iconPathDarkMode: RECORDING_DEFAULT_ICON,
+          },
+          transcription: {
+            label: "Cal.ai",
+            tooltip: "Transcription powered by AI",
+            iconPath: TRANSCRIPTION_STOPPED_ICON,
+            iconPathDarkMode: TRANSCRIPTION_STOPPED_ICON,
+          },
+        },
+      }),
+    });
+
+    setDaily(callFrame);
+
+    callFrame.join();
+
+    return () => {
+      callFrame.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const title = `${APP_NAME} Video`;
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={t("quick_video_meeting")} />
+        <meta property="og:image" content={SEO_IMG_OGIMG_VIDEO} />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={`${WEBSITE_URL}/video`} />
+        <meta property="og:title" content={`${APP_NAME} Video`} />
+        <meta property="og:description" content={t("quick_video_meeting")} />
+        <meta property="twitter:image" content={SEO_IMG_OGIMG_VIDEO} />
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content={`${WEBSITE_URL}/video`} />
+        <meta property="twitter:title" content={`${APP_NAME} Video`} />
+        <meta property="twitter:description" content={t("quick_video_meeting")} />
+      </Head>
+      <DailyProvider callObject={daily}>
+        <div className="mx-auto" style={{ zIndex: 2, position: "absolute", bottom: 100, width: "100%" }}>
+          <CalAiTranscribe />
+        </div>
+        <div style={{ zIndex: 2, position: "relative" }}>
+          {booking?.user?.organization?.calVideoLogo ? (
+            <img
+              className="min-w-16 min-h-16 fixed z-10 hidden aspect-square h-16 w-16 rounded-full sm:inline-block"
+              src={booking.user.organization.calVideoLogo}
+              alt="My Org Logo"
+              style={{
+                top: 32,
+                left: 32,
+              }}
+            />
+          ) : (
+            <img
+              className="fixed z-10 hidden h-5 sm:inline-block"
+              src={`${WEBSITE_URL}/cal-logo-word-dark.svg`}
+              alt="Logo"
+              style={{
+                top: 47,
+                left: 20,
+              }}
+            />
+          )}
+        </div>
+        <VideoMeetingInfo booking={booking} />
+      </DailyProvider>
+    </>
+  );
+}
+
+interface ProgressBarProps {
+  startTime: string;
+  endTime: string;
+}
+
+function ProgressBar(props: ProgressBarProps) {
+  const { t } = useLocale();
+  const { startTime, endTime } = props;
+  const currentTime = dayjs().second(0).millisecond(0);
+  const startingTime = dayjs(startTime).second(0).millisecond(0);
+  const isPast = currentTime.isAfter(startingTime);
+  const currentDifference = dayjs().diff(startingTime, "minutes");
+  const startDuration = dayjs(endTime).diff(startingTime, "minutes");
+  const [duration, setDuration] = useState(() => {
+    if (currentDifference >= 0 && isPast) {
+      return startDuration - currentDifference;
+    } else {
+      return startDuration;
+    }
+  });
+
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const now = dayjs();
+    const remainingMilliseconds = (60 - now.get("seconds")) * 1000 - now.get("milliseconds");
+
+    timeoutRef.current = setTimeout(() => {
+      const past = dayjs().isAfter(startingTime);
+
+      if (past) {
+        setDuration((prev) => prev - 1);
+      }
+
+      intervalRef.current = setInterval(() => {
+        if (dayjs().isAfter(startingTime)) {
+          setDuration((prev) => prev - 1);
+        }
+      }, 60000);
+    }, remainingMilliseconds);
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const prev = startDuration - duration;
+  const percentage = prev * (100 / startDuration);
+  return (
+    <div>
+      <p>
+        {duration} {t("minutes")}
+      </p>
+      <div className="relative h-2 max-w-xl overflow-hidden rounded-full">
+        <div className="absolute h-full w-full bg-gray-500/10" />
+        <div className={classNames("relative h-full bg-green-500")} style={{ width: `${percentage}%` }} />
+      </div>
+    </div>
+  );
+}
+
+interface VideoMeetingInfo {
+  booking: PageProps["booking"];
+}
+
+export function VideoMeetingInfo(props: VideoMeetingInfo) {
+  const [open, setOpen] = useState(false);
+  const { booking } = props;
+  const { t } = useLocale();
+
+  const endTime = new Date(booking.endTime);
+  const startTime = new Date(booking.startTime);
+
+  return (
+    <>
+      <aside
+        className={classNames(
+          "no-scrollbar fixed left-0 top-0 z-30 flex h-full w-64 transform justify-between overflow-x-hidden overflow-y-scroll transition-all duration-300 ease-in-out",
+          open ? "translate-x-0" : "-translate-x-[232px]"
+        )}>
+        <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-cal scroll-bar scrollbar-track-w-20 w-full overflow-scroll overflow-x-hidden border-r border-gray-300/20 bg-black/80 p-4 text-white shadow-sm backdrop-blur-lg">
+          <h3>{t("what")}:</h3>
+          <p>{booking.title}</p>
+          <h3>{t("invitee_timezone")}:</h3>
+          <p>{booking.user?.timeZone}</p>
+          <h3>{t("when")}:</h3>
+          <p suppressHydrationWarning={true}>
+            {formatToLocalizedDate(startTime)} <br />
+            {formatToLocalizedTime(startTime)}
+          </p>
+          <h3>{t("time_left")}</h3>
+          <ProgressBar
+            key={String(open)}
+            endTime={endTime.toISOString()}
+            startTime={startTime.toISOString()}
+          />
+
+          <h3>{t("who")}:</h3>
+          <p>
+            {booking?.user?.name} - {t("organizer")}:{" "}
+            <a href={`mailto:${booking?.user?.email}`}>{booking?.user?.email}</a>
+          </p>
+
+          {booking.attendees.length
+            ? booking.attendees.map((attendee) => (
+                <p key={attendee.id}>
+                  {attendee.name} – <a href={`mailto:${attendee.email}`}>{attendee.email}</a>
+                </p>
+              ))
+            : null}
+
+          {booking.description && (
+            <>
+              <h3>{t("description")}:</h3>
+
+              <div
+                className="prose-sm prose prose-invert"
+                dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(booking.description) }}
+              />
+            </>
+          )}
+        </main>
+        <div className="flex items-center justify-center">
+          <button
+            aria-label={`${open ? "close" : "open"} booking description sidebar`}
+            className="h-20 w-6 rounded-r-md border border-l-0 border-gray-300/20 bg-black/60 text-white shadow-sm backdrop-blur-lg"
+            onClick={() => setOpen(!open)}>
+            <Icon
+              name="chevron-right"
+              aria-hidden
+              className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
+            />
+          </button>
+        </div>
+      </aside>
+    </>
+  );
+}