v2.3.8

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

.env.example

@@ -7,14 +7,13 @@
 # - E-MAIL SETTINGS
 
 # - LICENSE *************************************************************************************************
-# Set this value to 'agree' to accept our license:
-# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+# https://github.com/calendso/calendso/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
-NEXT_PUBLIC_LICENSE_CONSENT=''
+#
 # To enable enterprise-only features, fill your license key in here.
 # @see https://console.cal.com
 CALCOM_LICENSE_KEY=
@@ -140,3 +139,8 @@ SENDGRID_SYNC_API_KEY=
 # Sentry
 NEXT_PUBLIC_SENTRY_DSN=
 SENTRY_IGNORE_API_RESOLUTION_ERROR=
+
+# Change your Brand
+NEXT_PUBLIC_APP_NAME="Cal.com"
+NEXT_PUBLIC_SUPPORT_MAIL_ADDRESS="help@cal.com"
+NEXT_PUBLIC_COMPANY_NAME="Cal.com, Inc."

.github/workflows/add-to-project.yml

@@ -1,22 +0,0 @@
-name: Add bugs to Bug Hunting
-
-on:
-  issues:
-    types:
-      - opened
-      - labeled
-  pull_request:
-    types:
-      - opened
-      - labeled
-
-jobs:
-  add-to-project:
-    name: Add issue to project
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/9
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
-          labeled:  🙋🏻‍♂️help wanted

README.md

@@ -292,7 +292,7 @@ You can deploy Cal on [Railway](https://railway.app/) using the button above. Th
 
 Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
 
 <!-- ROADMAP -->
 

app.json

@@ -33,11 +33,6 @@
       "generator": "secret",
       "required": "true"
     },
-    "NEXT_PUBLIC_LICENSE_CONSENT": {
-      "description": "License consent",
-      "value": "true",
-      "required": "true"
-    },
     "CRON_API_KEY": {
       "description": "ApiKey for cronjobs",
       "value": ""

apps/web/components/Embed.tsx

@@ -4,6 +4,7 @@ import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 import { components, ControlProps } from "react-select";
 
+import { APP_NAME, EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   Button,
@@ -20,8 +21,6 @@ import {
   TextField,
 } from "@calcom/ui";
 
-import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
-
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
 
@@ -498,7 +497,9 @@ const tabs = [
       return (
         <>
           <div>
-            <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
+            <small className="flex py-4 text-neutral-500">
+              {t("place_where_cal_widget_appear", { appName: APP_NAME })}
+            </small>
           </div>
           <TextArea
             data-testid="embed-code"
@@ -622,10 +623,10 @@ const ChooseEmbedTypesDialogContent = () => {
     <DialogContent type="creation" size="lg">
       <div className="mb-4">
         <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-          {t("how_you_want_add_cal_site")}
+          {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
-          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
+          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
       <div className="flex items-start">

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -61,12 +61,10 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           <Select
             name="additionalCalendar"
             placeholder={
-              <div className="flex justify-start text-black">
-                <Icon.FiPlus className="-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1" />
-                <p>{t("add")}</p>
-              </div>
+              <Button StartIcon={Icon.FiPlus} color="secondary">
+                {t("add")}
+              </Button>
             }
-            className="min-w-44"
             options={options}
             isSearchable={false}
             isLoading={isLoading}
@@ -80,11 +78,16 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
                 width: "max-content",
                 right: "0",
               }),
+              indicatorSeparator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
               control: (defaultStyles) => ({
                 ...defaultStyles,
                 padding: "0",
                 border: "0",
-                borderRadius: "inherit",
+                borderRadius: "6px",
+                minHeight: "auto",
               }),
               dropdownIndicator: (defaultStyles) => ({
                 ...defaultStyles,

apps/web/components/apps/App.tsx

@@ -4,20 +4,14 @@ import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
 import classNames from "@calcom/lib/classNames";
+import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import {
-  Button,
-  DisconnectIntegration,
-  Icon,
-  Shell,
-  showToast,
-  SkeletonButton,
-  SkeletonText,
-} from "@calcom/ui";
+import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
 
 import HeadSeo from "@components/seo/head-seo";
 
@@ -48,7 +42,7 @@ const Component = ({
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
-      if (data.setupPending) return;
+      if (data?.setupPending) return;
       showToast(t("app_successfully_installed"), "success");
     },
     onError: (error) => {
@@ -201,7 +195,7 @@ const Component = ({
         <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
         <span>
           {price === 0 ? (
-            "Free"
+            t("free_to_use_apps")
           ) : (
             <>
               {Intl.NumberFormat("en-US", {
@@ -279,8 +273,10 @@ const Component = ({
           )}
         </ul>
         <hr className="my-8" />
-        <span className="leading-1 block text-xs text-gray-500">{t("every_app_published")}</span>
-        <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
+        <span className="leading-1 block text-xs text-gray-500">
+          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
+        </span>
+        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
           <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
         </a>
       </div>

apps/web/components/apps/CalendarListContainer.tsx

@@ -3,13 +3,13 @@ import Link from "next/link";
 import { Fragment } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
   Alert,
   Button,
-  DisconnectIntegration,
   EmptyScreen,
   Icon,
   List,

apps/web/components/booking/BookingDescription.tsx

@@ -1,6 +1,7 @@
 import { SchedulingType } from "@prisma/client";
 import { FC, ReactNode, useEffect } from "react";
 
+import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Icon, Badge } from "@calcom/ui";
@@ -41,6 +42,7 @@ interface Props {
 
 const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
+  const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
   const { duration, setQuery: setDuration } = useRouterQuery("duration");
   useEffect(() => {
@@ -54,6 +56,21 @@ const BookingDescription: FC<Props> = (props) => {
       }
     }
   }, []);
+  let requiresConfirmation = eventType?.requiresConfirmation;
+  let requiresConfirmationText = t("requires_confirmation");
+  const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold;
+  if (rcThreshold) {
+    if (isBookingPage) {
+      if (dayjs(bookingDate).diff(dayjs(), rcThreshold.unit) > rcThreshold.time) {
+        requiresConfirmation = false;
+      }
+    } else {
+      requiresConfirmationText = t("requires_confirmation_threshold", {
+        ...rcThreshold,
+        unit: rcThreshold.unit.slice(0, -1),
+      });
+    }
+  }
   return (
     <>
       <UserAvatars
@@ -89,16 +106,16 @@ const BookingDescription: FC<Props> = (props) => {
             </div>
           </div>
         )}
-        {eventType?.requiresConfirmation && (
+        {requiresConfirmation && (
           <div
             className={classNames(
-              "flex items-center",
+              "items-top flex",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+              <Icon.FiCheckSquare className="mr-[10px] ml-[2px] inline-block h-4 w-4 " />
             </div>
-            {t("requires_confirmation")}
+            {requiresConfirmationText}
           </div>
         )}
         <AvailableEventLocations

apps/web/components/booking/BookingListItem.tsx

@@ -118,7 +118,7 @@ function BookingListItem(booking: BookingItemProps) {
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
          cancel all remaining bookings or just that booking instance. */
-      href: `/success?uid=${booking.uid}&cancel=true${
+      href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }`,
       icon: Icon.FiX,
@@ -195,11 +195,9 @@ function BookingListItem(booking: BookingItemProps) {
 
   const onClickTableData = () => {
     router.push({
-      pathname: "/success",
+      pathname: `/booking/${booking.uid}`,
       query: {
-        uid: booking.uid,
         allRemainingBookings: isTabRecurring,
-        listingStatus: booking.listingStatus,
         email: booking.attendees[0] ? booking.attendees[0].email : undefined,
       },
     });
@@ -282,6 +280,11 @@ function BookingListItem(booking: BookingItemProps) {
                 {t("pending_payment")}
               </Badge>
             )}
+            {booking.paid && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
+                {t("paid")}
+              </Badge>
+            )}
             {recurringDates !== undefined && (
               <div className="mt-2 text-sm text-gray-400">
                 <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,7 +1,6 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { EventType } from "@prisma/client";
 import * as Popover from "@radix-ui/react-popover";
-import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { useReducer, useEffect, useMemo, useState } from "react";
 import { Toaster } from "react-hot-toast";
@@ -19,7 +18,6 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
-import { WEBSITE_URL } from "@calcom/lib/constants";
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -27,15 +25,11 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import { Icon, DatePicker } from "@calcom/ui";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
-// import { timeZone } from "@lib/clock";
-import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
-import { isBrandingHidden } from "@lib/isBrandingHidden";
 
 import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
@@ -48,23 +42,6 @@ import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
-// Get router variables
-const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
-  const router = useRouter();
-  const path = router.asPath.split("/");
-  path.pop(); // Remove the last item (where we currently are)
-  path.shift(); // Removes first item e.g. if we were visitng "/teams/test/30mins" the array will new look like ["teams","test"]
-  const slug = path.join("/");
-  return (
-    <div className="flex h-full flex-col justify-end">
-      <button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
-        <Icon.FiArrowLeft className="dark:text-darkgray-600 h-4 w-4 text-black transition-opacity hover:cursor-pointer" />
-        <p className="sr-only">Go Back</p>
-      </button>
-    </div>
-  );
-};
-
 const useSlots = ({
   eventTypeId,
   eventTypeSlug,
@@ -237,7 +214,7 @@ function TimezoneDropdown({
 
   return (
     <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 inline-block rounded-md px-2 py-2 text-left text-gray-600">
+      <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
         <p className="flex items-center text-sm font-medium">
           <Icon.FiGlobe className="min-h-4 min-w-4 mr-[10px] ml-[2px] -mt-[2px] inline-block" />
           {timeZone}
@@ -300,9 +277,6 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
   }, []);
 
-  // TODO: Improve this;
-  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
-
   const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
@@ -423,12 +397,6 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                     {timezoneDropdown}
                   </BookingDescription>
 
-                  {!isEmbed && (
-                    <div className="mt-auto hidden md:block">
-                      <GoBackToPreviousPage t={t} />
-                    </div>
-                  )}
-
                   {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
@@ -468,7 +436,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                 />
               </div>
             </div>
-            {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
+            {(!restProps.isBrandingHidden || isEmbed) && <PoweredByCal />}
           </div>
         </main>
       </div>

apps/web/components/booking/pages/BookingPage.tsx

@@ -31,6 +31,7 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
+import { APP_NAME } from "@calcom/lib/constants";
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -38,11 +39,11 @@ import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
+import { Group, RadioField } from "@calcom/ui";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
-import useMeQuery from "@lib/hooks/useMeQuery";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
@@ -102,7 +103,6 @@ const BookingPage = ({
     {}
   );
   const stripeAppData = getStripeAppData(eventType);
-
   // Define duration now that we support multiple duration eventTypes
   let duration = eventType.length;
   if (queryDuration && !isNaN(Number(queryDuration))) {
@@ -136,9 +136,8 @@ const BookingPage = ({
       }
 
       return router.push({
-        pathname: "/success",
+        pathname: `/booking/${uid}`,
         query: {
-          uid,
           isSuccessBookingPage: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
@@ -152,9 +151,8 @@ const BookingPage = ({
       const { uid } = responseData[0] || {};
 
       return router.push({
-        pathname: "/success",
+        pathname: `/booking/${uid}`,
         query: {
-          uid,
           allRemainingBookings: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
@@ -242,7 +240,7 @@ const BookingPage = ({
   const bookingFormSchema = z
     .object({
       name: z.string().min(1),
-      email: z.string().email(),
+      email: z.string().trim().email(),
       phone: z
         .string()
         .refine((val) => isValidPhoneNumber(val))
@@ -431,7 +429,7 @@ const BookingPage = ({
                 eventTypeTitle: eventType.title,
                 profileName: profile.name,
               })}{" "}
-          | Cal.com
+          | {APP_NAME}
         </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
@@ -746,6 +744,27 @@ const BookingPage = ({
                           </div>
                         </div>
                       )}
+                      {input.options && input.type === EventTypeCustomInputType.RADIO && (
+                        <div className="">
+                          <div className="flex">
+                            <Group
+                              onValueChange={(e) => {
+                                bookingForm.setValue(`customInputs.${input.id}`, e);
+                              }}>
+                              <>
+                                {input.options.map((option, i) => (
+                                  <RadioField
+                                    label={option.label}
+                                    key={`option.${i}.radio`}
+                                    value={option.label}
+                                    id={`option.${i}.radio`}
+                                  />
+                                ))}
+                              </>
+                            </Group>
+                          </div>
+                        </div>
+                      )}
                     </div>
                   ))}
                 {!eventType.disableGuests && guestToggle && (

apps/web/components/dialog/EditLocationDialog.tsx

@@ -297,7 +297,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                       control={locationFormMethods.control}
                       render={() => (
                         <Select<{ label: string; value: string; icon?: string }>
-                          maxMenuHeight={150}
+                          maxMenuHeight={300}
                           name="location"
                           defaultValue={selection}
                           options={locationOptions}

apps/web/components/dialog/RescheduleDialog.tsx

@@ -47,7 +47,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
-            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
+            <p className="text-sm text-gray-500">{t("reschedule_modal_description")}</p>
             <p className="mt-6 mb-2 text-sm font-bold text-black">
               {t("reason_for_reschedule_request")}
               <span className="font-normal text-gray-500"> (Optional)</span>

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -20,12 +20,13 @@ type AvailabilityOption = {
 
 const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
   const { label, isDefault } = props.data;
+  const { t } = useLocale();
   return (
     <components.Option {...props}>
       <span>{label}</span>
       {isDefault && (
         <Badge variant="blue" className="ml-2">
-          Default
+          {t("default")}
         </Badge>
       )}
     </components.Option>
@@ -34,12 +35,13 @@ const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
 
 const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
   const { label, isDefault } = props.data;
+  const { t } = useLocale();
   return (
     <components.SingleValue {...props}>
       <span>{label}</span>
       {isDefault && (
         <Badge variant="blue" className="ml-2">
-          Default
+          {t("default")}
         </Badge>
       )}
     </components.SingleValue>
@@ -57,6 +59,8 @@ const AvailabilitySelect = ({
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
   const { data, isLoading } = trpc.viewer.availability.list.useQuery();
+  const { t } = useLocale();
+
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
@@ -77,6 +81,7 @@ const AvailabilitySelect = ({
 
   return (
     <Select
+      placeholder={t("select")}
       options={options}
       isSearchable={false}
       onChange={props.onChange}

apps/web/components/eventtype/CreateEventType.tsx

@@ -1,350 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { SchedulingType } from "@prisma/client";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { useEffect } from "react";
-import { useForm } from "react-hook-form";
-import type { z } from "zod";
-
-import classNames from "@calcom/lib/classNames";
-import { WEBAPP_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
-import { trpc } from "@calcom/trpc/react";
-import {
-  Alert,
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  Form,
-  Icon,
-  InputLeading,
-  showToast,
-  TextAreaField,
-  TextField,
-} from "@calcom/ui";
-
-import { HttpError } from "@lib/core/http/error";
-import { slugify } from "@lib/slugify";
-
-import Avatar from "@components/ui/Avatar";
-import * as RadioArea from "@components/ui/form/radio-area";
-
-// this describes the uniform data needed to create a new event type on Profile or Team
-export interface EventTypeParent {
-  teamId: number | null | undefined; // if undefined, then it's a profile
-  name?: string | null;
-  slug?: string | null;
-  image?: string | null;
-}
-
-interface CreateEventTypeBtnProps {
-  // set true for use on the team settings page
-  canAddEvents: boolean;
-  // set true when in use on the team settings page
-  isIndividualTeam?: boolean;
-  // EventTypeParent can be a profile (as first option) or a team for the rest.
-  options: EventTypeParent[];
-}
-
-export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
-  const { t, isLocaleReady } = useLocale();
-  const router = useRouter();
-  // URL encoded params
-  const teamId: number | undefined =
-    typeof router.query.teamId === "string" && router.query.teamId
-      ? parseInt(router.query.teamId)
-      : undefined;
-  const pageSlug = router.query.eventPage || props.options[0].slug;
-  const hasTeams = !!props.options.find((option) => option.teamId);
-  const type: string = typeof router.query.type == "string" && router.query.type ? router.query.type : "";
-
-  const form = useForm<z.infer<typeof createEventTypeInput>>({
-    resolver: zodResolver(createEventTypeInput),
-  });
-  const { setValue, watch, register } = form;
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    const title: string =
-      typeof router.query.title === "string" && router.query.title ? router.query.title : "";
-    const length: number =
-      typeof router.query.length === "string" && router.query.length ? parseInt(router.query.length) : 15;
-    const description: string =
-      typeof router.query.description === "string" && router.query.description
-        ? router.query.description
-        : "";
-    const slug: string = typeof router.query.slug === "string" && router.query.slug ? router.query.slug : "";
-
-    setValue("title", title);
-    setValue("length", length);
-    setValue("description", description);
-    setValue("slug", slug);
-    // If query params change, update the form
-  }, [router.isReady, router.query, setValue]);
-
-  useEffect(() => {
-    const subscription = watch((value, { name, type }) => {
-      if (name === "title" && type === "change") {
-        if (value.title) setValue("slug", slugify(value.title));
-        else setValue("slug", "");
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [watch, setValue]);
-
-  const createMutation = trpc.viewer.eventTypes.create.useMutation({
-    onSuccess: async ({ eventType }) => {
-      await router.replace("/event-types/" + eventType.id);
-      showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success");
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "BAD_REQUEST") {
-        const message = `${err.data.code}: URL already exists.`;
-        showToast(message, "error");
-      }
-
-      if (err.data?.code === "UNAUTHORIZED") {
-        const message = `${err.data.code}: You are not able to create this event`;
-        showToast(message, "error");
-      }
-    },
-  });
-
-  // inject selection data into url for correct router history
-  const openModal = (option: EventTypeParent) => {
-    const query = {
-      ...router.query,
-      dialog: "new-eventtype",
-      eventPage: option.slug,
-      teamId: option.teamId,
-    };
-    if (!option.teamId) {
-      delete query.teamId;
-    }
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
-  };
-  if (!isLocaleReady) {
-    return null;
-  }
-  return (
-    <Dialog
-      name="new-eventtype"
-      clearQueryParamsOnClose={["eventPage", "teamId", "type", "description", "title", "length", "slug"]}>
-      <CreateEventTypeTrigger
-        hasTeams={hasTeams}
-        canAddEvents={props.canAddEvents}
-        isIndividualTeam={props.isIndividualTeam}
-        openModal={openModal}
-        options={props.options}
-      />
-
-      <DialogContent>
-        <div className="mb-4">
-          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
-            {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
-          </h3>
-          <div>
-            <p className="text-sm text-gray-500">{t("new_event_type_to_book_description")}</p>
-          </div>
-        </div>
-        <Form
-          form={form}
-          handleSubmit={(values) => {
-            createMutation.mutate(values);
-          }}>
-          <div className="mt-3 space-y-4">
-            {teamId && (
-              <TextField
-                type="hidden"
-                labelProps={{ style: { display: "none" } }}
-                {...register("teamId", { valueAsNumber: true })}
-                value={teamId}
-              />
-            )}
-            <TextField label={t("title")} placeholder={t("quick_chat")} {...register("title")} />
-
-            {process.env.NEXT_PUBLIC_WEBSITE_URL !== undefined &&
-            process.env.NEXT_PUBLIC_WEBSITE_URL?.length >= 21 ? (
-              <TextField
-                label={`${t("url")}: ${process.env.NEXT_PUBLIC_WEBSITE_URL}`}
-                required
-                addOnLeading={<InputLeading>/{pageSlug}/</InputLeading>}
-                {...register("slug")}
-              />
-            ) : (
-              <TextField
-                label={t("url")}
-                required
-                addOnLeading={
-                  <InputLeading>
-                    {process.env.NEXT_PUBLIC_WEBSITE_URL}/{pageSlug}/
-                  </InputLeading>
-                }
-                {...register("slug")}
-              />
-            )}
-
-            <TextAreaField
-              label={t("description")}
-              placeholder={t("quick_video_meeting")}
-              {...register("description")}
-            />
-
-            <div className="relative">
-              <TextField
-                type="number"
-                required
-                min="10"
-                placeholder="15"
-                label={t("length")}
-                className="pr-20"
-                {...register("length", { valueAsNumber: true })}
-              />
-              <div className="absolute inset-y-0 right-0 mt-1.5 flex items-center pt-4 pr-3 text-sm text-gray-400">
-                {t("minutes")}
-              </div>
-            </div>
-
-            {teamId && (
-              <div className="mb-4">
-                <label htmlFor="schedulingType" className="block text-sm font-bold text-gray-700">
-                  {t("scheduling_type")}
-                </label>
-                {form.formState.errors.schedulingType && (
-                  <Alert
-                    className="mt-1"
-                    severity="error"
-                    message={form.formState.errors.schedulingType.message}
-                  />
-                )}
-                <RadioArea.Group
-                  {...register("schedulingType")}
-                  onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
-                  className="relative mt-1 flex space-x-6 rounded-sm rtl:space-x-reverse">
-                  <RadioArea.Item
-                    value={SchedulingType.COLLECTIVE}
-                    defaultChecked={type === SchedulingType.COLLECTIVE}
-                    className="w-1/2 text-sm">
-                    <strong className="mb-1 block">{t("collective")}</strong>
-                    <p>{t("collective_description")}</p>
-                  </RadioArea.Item>
-                  <RadioArea.Item
-                    value={SchedulingType.ROUND_ROBIN}
-                    defaultChecked={type === SchedulingType.ROUND_ROBIN}
-                    className="w-1/2 text-sm">
-                    <strong className="mb-1 block">{t("round_robin")}</strong>
-                    <p>{t("round_robin_description")}</p>
-                  </RadioArea.Item>
-                </RadioArea.Group>
-              </div>
-            )}
-          </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
-            <Button type="submit" loading={createMutation.isLoading}>
-              {t("continue")}
-            </Button>
-            <DialogClose />
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-type CreateEventTypeTrigger = {
-  isIndividualTeam?: boolean;
-  // EventTypeParent can be a profile (as first option) or a team for the rest.
-  options: EventTypeParent[];
-  hasTeams: boolean;
-  // set true for use on the team settings page
-  canAddEvents: boolean;
-  openModal: (option: EventTypeParent) => void;
-};
-
-export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
-  const { t } = useLocale();
-
-  return (
-    <>
-      {!props.hasTeams || props.isIndividualTeam ? (
-        <Button
-          onClick={() => props.openModal(props.options[0])}
-          data-testid="new-event-type"
-          StartIcon={Icon.FiPlus}
-          disabled={!props.canAddEvents}>
-          {t("new_event_type_btn")}
-        </Button>
-      ) : (
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button EndIcon={Icon.FiChevronDown}>{t("new_event_type_btn")}</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            {props.options.map((option) => (
-              <CreateEventTeamsItem
-                key={option.slug}
-                option={option}
-                openModal={() => props.openModal(option)}
-              />
-            ))}
-          </DropdownMenuContent>
-        </Dropdown>
-      )}
-    </>
-  );
-}
-
-function CreateEventTeamsItem(props: {
-  openModal: (option: EventTypeParent) => void;
-  option: EventTypeParent;
-}) {
-  const session = useSession();
-  const membershipQuery = trpc.viewer.teams.getMembershipbyUser.useQuery({
-    memberId: session.data?.user.id as number,
-    teamId: props.option.teamId as number,
-  });
-
-  const isDisabled = membershipQuery.data?.role === "MEMBER";
-
-  return (
-    <DropdownMenuItem
-      key={props.option.slug}
-      className={classNames(
-        "cursor-pointer px-3 py-2  focus:outline-none",
-        isDisabled ? "cursor-default !text-gray-300" : "hover:bg-neutral-100"
-      )}
-      disabled={isDisabled}
-      onSelect={() => props.openModal(props.option)}>
-      <Avatar
-        alt={props.option.name || ""}
-        imageSrc={props.option.image || WEBAPP_URL + "/" + props.option.slug + "/avatar.png"}
-        size={6}
-        className="inline ltr:mr-2 rtl:ml-2"
-      />
-      {props.option.name ? props.option.name : props.option.slug}
-    </DropdownMenuItem>
-  );
-}

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,23 +1,33 @@
-import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { EventTypeCustomInputType } from "@prisma/client";
+import type { CustomInputParsed } from "pages/event-types/[type]";
 import { FC } from "react";
-import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
+import { Control, Controller, useFieldArray, useForm, UseFormRegister, useWatch } from "react-hook-form";
 
-import { Button, Select, TextField } from "@calcom/ui";
-
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Icon, Label, Select, TextField } from "@calcom/ui";
 
 interface OptionTypeBase {
   label: string;
   value: EventTypeCustomInputType;
+  options?: { label: string; type: string }[];
 }
 
 interface Props {
-  onSubmit: SubmitHandler<IFormInput>;
+  onSubmit: (output: CustomInputParsed) => void;
   onCancel: () => void;
-  selectedCustomInput?: EventTypeCustomInput;
+  selectedCustomInput?: CustomInputParsed;
 }
 
-type IFormInput = EventTypeCustomInput;
+type IFormInput = CustomInputParsed;
+
+/**
+ *  Getting a random ID gives us the option to know WHICH field is changed
+ *  when the user edits a custom field.
+ *  This UUID is only used to check for changes in the UI and not the ID we use in the DB
+ *  There is very very very slim chance that this will cause a collision
+ * */
+const randomId = () => Math.floor(Math.random() * 1000000 + new Date().getTime());
 
 const CustomInputTypeForm: FC<Props> = (props) => {
   const { t } = useLocale();
@@ -26,10 +36,22 @@ const CustomInputTypeForm: FC<Props> = (props) => {
     { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
     { value: EventTypeCustomInputType.NUMBER, label: t("number") },
     { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
+    {
+      value: EventTypeCustomInputType.RADIO,
+      label: t("radio"),
+    },
   ];
+
   const { selectedCustomInput } = props;
-  const defaultValues = selectedCustomInput || { type: inputOptions[0].value };
-  const { register, control, handleSubmit } = useForm<IFormInput>({
+
+  const defaultValues = selectedCustomInput
+    ? { ...selectedCustomInput, id: selectedCustomInput?.id || randomId() }
+    : {
+        id: randomId(),
+        type: EventTypeCustomInputType.TEXT,
+      };
+
+  const { register, control, getValues } = useForm<IFormInput>({
     defaultValues,
   });
   const selectedInputType = useWatch({ name: "type", control });
@@ -40,7 +62,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
   };
 
   return (
-    <form onSubmit={handleSubmit(props.onSubmit)} className="flex flex-col space-y-4">
+    <div className="flex flex-col space-y-4">
       <div>
         <label htmlFor="type" className="block text-sm font-medium text-gray-700">
           {t("input_type")}
@@ -83,6 +105,10 @@ const CustomInputTypeForm: FC<Props> = (props) => {
           {...register("placeholder")}
         />
       )}
+      {selectedInputType === EventTypeCustomInputType.RADIO && (
+        <RadioInputHandler control={control} register={register} />
+      )}
+
       <div className="flex h-5 items-center">
         <input
           id="required"
@@ -111,10 +137,75 @@ const CustomInputTypeForm: FC<Props> = (props) => {
         <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
           {t("cancel")}
         </Button>
-        <Button type="submit">{t("save")}</Button>
+        <Button
+          type="button"
+          onClick={() => {
+            props.onSubmit(getValues());
+          }}>
+          {t("save")}
+        </Button>
       </div>
-    </form>
+    </div>
   );
 };
 
+function RadioInputHandler({
+  register,
+  control,
+}: {
+  register: UseFormRegister<IFormInput>;
+  control: Control<IFormInput>;
+}) {
+  const { t } = useLocale();
+  const { fields, append, remove } = useFieldArray<IFormInput>({
+    control,
+    name: "options",
+    shouldUnregister: true,
+  });
+  const [animateRef] = useAutoAnimate<HTMLUListElement>();
+
+  return (
+    <div className="flex flex-col ">
+      <Label htmlFor="radio_options">{t("options")}</Label>
+      <ul
+        className="flex max-h-80 w-full flex-col space-y-1 overflow-y-scroll rounded-md bg-gray-50 p-4"
+        ref={animateRef}>
+        <>
+          {fields.map((option, index) => (
+            <li key={`${option.id}`}>
+              <TextField
+                id={option.id}
+                placeholder={t("enter_option", { index: index + 1 })}
+                addOnFilled={false}
+                label={t("option", { index: index + 1 })}
+                labelSrOnly
+                {...register(`options.${index}.label` as const, { required: true })}
+                addOnSuffix={
+                  <Button
+                    size="icon"
+                    color="minimal"
+                    StartIcon={Icon.FiX}
+                    onClick={() => {
+                      remove(index);
+                    }}
+                  />
+                }
+              />
+            </li>
+          ))}
+          <Button
+            color="minimal"
+            StartIcon={Icon.FiPlus}
+            className="!text-sm !font-medium"
+            onClick={() => {
+              append({ label: "", type: "text" });
+            }}>
+            {t("add_an_option")}
+          </Button>
+        </>
+      </ul>
+    </div>
+  );
+}
+
 export default CustomInputTypeForm;

apps/web/components/eventtype/EditLocationDialog.tsx

@@ -1,371 +0,0 @@
-import { ErrorMessage } from "@hookform/error-message";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { isValidPhoneNumber } from "libphonenumber-js";
-import { Trans } from "next-i18next";
-import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
-import { components } from "react-select";
-import { z } from "zod";
-
-import {
-  EventLocationType,
-  getEventLocationType,
-  getHumanReadableLocationValue,
-  getMessageForOrganizer,
-  LocationObject,
-  LocationType,
-} from "@calcom/app-store/locations";
-import { classNames } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, Form, Icon, Label, PhoneInput, Select } from "@calcom/ui";
-
-import { QueryCell } from "@lib/QueryCell";
-
-import { LinkText } from "@components/ui/LinkText";
-import CheckboxField from "@components/ui/form/CheckboxField";
-
-type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
-
-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
-};
-
-interface ISetLocationDialog {
-  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
-  selection?: OptionTypeBase;
-  booking?: BookingItem;
-  defaultValues?: LocationObject[];
-  setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
-  isOpenDialog: boolean;
-  setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
-}
-
-const LocationInput = (props: {
-  eventLocationType: EventLocationType;
-  locationFormMethods: ReturnType<typeof useForm>;
-  id: string;
-  required: boolean;
-  placeholder: string;
-  className?: string;
-  defaultValue?: string;
-}): JSX.Element | null => {
-  const { eventLocationType, locationFormMethods, ...remainingProps } = props;
-  if (eventLocationType?.organizerInputType === "text") {
-    return (
-      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
-    );
-  } else if (eventLocationType?.organizerInputType === "phone") {
-    return (
-      <PhoneInput
-        name={eventLocationType.variable}
-        control={locationFormMethods.control}
-        {...remainingProps}
-      />
-    );
-  }
-  return null;
-};
-
-export const EditLocationDialog = (props: ISetLocationDialog) => {
-  const {
-    saveLocation,
-    selection,
-    booking,
-    setShowLocationModal,
-    isOpenDialog,
-    defaultValues,
-    setSelectedLocation,
-  } = props;
-  const { t } = useLocale();
-  const locationsQuery = trpc.viewer.locationOptions.useQuery();
-
-  useEffect(() => {
-    if (selection) {
-      locationFormMethods.setValue("locationType", selection?.value);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selection]);
-
-  const locationFormSchema = z.object({
-    locationType: z.string(),
-    phone: z.string().optional(),
-    locationAddress: z.string().optional(),
-    locationLink: z
-      .string()
-      .optional()
-      .superRefine((val, ctx) => {
-        if (
-          eventLocationType &&
-          !eventLocationType.default &&
-          eventLocationType.linkType === "static" &&
-          eventLocationType.urlRegExp
-        ) {
-          const valid = z
-            .string()
-            .regex(new RegExp(eventLocationType.urlRegExp || ""))
-            .safeParse(val).success;
-          if (!valid) {
-            const sampleUrl = eventLocationType.organizerInputPlaceholder;
-            ctx.addIssue({
-              code: z.ZodIssueCode.custom,
-              message: `Invalid URL for ${eventLocationType.label}. ${
-                sampleUrl ? "Sample URL: " + sampleUrl : ""
-              }`,
-            });
-          }
-          return;
-        }
-
-        const valid = z.string().url().optional().safeParse(val).success;
-        if (!valid) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: `Invalid URL`,
-          });
-        }
-        return;
-      }),
-    displayLocationPublicly: z.boolean().optional(),
-    locationPhoneNumber: z
-      .string()
-      .refine((val) => isValidPhoneNumber(val))
-      .optional(),
-  });
-
-  const locationFormMethods = useForm({
-    mode: "onSubmit",
-    resolver: zodResolver(locationFormSchema),
-  });
-
-  const selectedLocation = useWatch({
-    control: locationFormMethods.control,
-    name: "locationType",
-  });
-
-  const eventLocationType = getEventLocationType(selectedLocation);
-
-  const defaultLocation = defaultValues?.find(
-    (location: { type: EventLocationType["type"] }) => location.type === eventLocationType?.type
-  );
-
-  const LocationOptions = (() => {
-    if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
-      if (!eventLocationType.variable) {
-        console.error("eventLocationType.variable can't be undefined");
-        return null;
-      }
-
-      return (
-        <div>
-          <div>
-            <Label htmlFor="locationInput">{t(eventLocationType.messageForOrganizer || "")}</Label>
-            <LocationInput
-              locationFormMethods={locationFormMethods}
-              eventLocationType={eventLocationType}
-              id="locationInput"
-              placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
-              required
-              className="block w-full rounded-md border-gray-300 text-sm"
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              defaultValue={
-                (defaultLocation && defaultLocation[eventLocationType.defaultValueVariable]) || ""
-              }
-            />
-            <ErrorMessage
-              errors={locationFormMethods.formState.errors}
-              name={eventLocationType.variable}
-              className="mt-1 text-sm text-red-500"
-              as="p"
-            />
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={defaultLocation?.displayLocationPublicly}
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      );
-    } else {
-      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
-    }
-  })();
-
-  return (
-    <Dialog open={isOpenDialog}>
-      <DialogContent
-        type="creation"
-        Icon={Icon.FiMapPin}
-        title={t("edit_location")}
-        description={!booking ? t("this_input_will_shown_booking_this_event") : undefined}>
-        {booking && (
-          <>
-            <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-            <p className="mb-2 ml-1 text-sm text-black">
-              {getHumanReadableLocationValue(booking.location, t)}
-            </p>
-          </>
-        )}
-        <Form
-          form={locationFormMethods}
-          className="space-y-4"
-          handleSubmit={async (values) => {
-            const { locationType: newLocation, displayLocationPublicly } = values;
-
-            let details = {};
-            if (newLocation === LocationType.AttendeeInPerson) {
-              details = {
-                address: values.locationAddress,
-              };
-            }
-
-            if (newLocation === LocationType.InPerson) {
-              details = {
-                address: values.locationAddress,
-              };
-            }
-            const eventLocationType = getEventLocationType(newLocation);
-
-            // TODO: There can be a property that tells if it is to be saved in `link`
-            if (
-              newLocation === LocationType.Link ||
-              (!eventLocationType?.default && eventLocationType?.linkType === "static")
-            ) {
-              details = { link: values.locationLink };
-            }
-
-            if (newLocation === LocationType.UserPhone) {
-              details = { hostPhoneNumber: values.locationPhoneNumber };
-            }
-
-            if (eventLocationType?.organizerInputType) {
-              details = {
-                ...details,
-                displayLocationPublicly,
-              };
-            }
-
-            saveLocation(newLocation, details);
-            setShowLocationModal(false);
-            setSelectedLocation?.(undefined);
-            locationFormMethods.unregister([
-              "locationType",
-              "locationLink",
-              "locationAddress",
-              "locationPhoneNumber",
-            ]);
-          }}>
-          <QueryCell
-            query={locationsQuery}
-            success={({ data: locationOptions }) => {
-              if (!locationOptions.length) return null;
-              if (booking) {
-                locationOptions.forEach((location) => {
-                  if (location.label === "phone") {
-                    location.options.filter((l) => l.value !== "phone");
-                  }
-                });
-              }
-              return (
-                <Controller
-                  name="locationType"
-                  control={locationFormMethods.control}
-                  render={() => (
-                    <Select<{ label: string; value: string; icon?: string }>
-                      maxMenuHeight={150}
-                      name="location"
-                      defaultValue={selection}
-                      options={locationOptions}
-                      components={{
-                        Option: (props) => (
-                          <components.Option {...props}>
-                            <div className="flex items-center gap-3">
-                              {props.data.icon && (
-                                <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
-                              )}
-                              <span
-                                className={classNames(
-                                  "text-sm font-medium",
-                                  props.isSelected ? "text-white" : "text-gray-900"
-                                )}>
-                                {props.data.label}
-                              </span>
-                            </div>
-                          </components.Option>
-                        ),
-                      }}
-                      formatOptionLabel={(e) => (
-                        <div className="flex items-center gap-2.5">
-                          {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
-                          <span>{e.label}</span>
-                        </div>
-                      )}
-                      formatGroupLabel={(e) => <p className="text-xs font-medium text-gray-600">{e.label}</p>}
-                      isSearchable={false}
-                      onChange={(val) => {
-                        if (val) {
-                          locationFormMethods.setValue("locationType", val.value);
-                          locationFormMethods.unregister([
-                            "locationLink",
-                            "locationAddress",
-                            "locationPhoneNumber",
-                          ]);
-                          locationFormMethods.clearErrors([
-                            "locationLink",
-                            "locationPhoneNumber",
-                            "locationAddress",
-                          ]);
-                          setSelectedLocation?.(val);
-                        }
-                      }}
-                    />
-                  )}
-                />
-              );
-            }}
-          />
-          {selectedLocation && LocationOptions}
-          <div className="mt-5">
-            <p className="text-sm text-gray-400">
-              <Trans i18nKey="cant_find_the_right_video_app_visit_our_app_store">
-                Can&apos;t find the right video app? Visit our
-                <LinkText href="/apps/categories/video" classNameChildren="text-blue-400" target="_blank">
-                  App Store
-                </LinkText>
-                .
-              </Trans>
-            </p>
-          </div>
-          <div className="mt-4 flex justify-end space-x-2">
-            <Button
-              onClick={() => {
-                setShowLocationModal(false);
-                setSelectedLocation?.(undefined);
-                locationFormMethods.unregister("locationType");
-              }}
-              type="button"
-              color="secondary">
-              {t("cancel")}
-            </Button>
-            <Button type="submit">{t("update")}</Button>
-          </div>
-        </Form>
-      </DialogContent>
-    </Dialog>
-  );
-};

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,13 +1,12 @@
-import { EventTypeCustomInput } from "@prisma/client/";
 import Link from "next/link";
-import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
+import type { CustomInputParsed, EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
 
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import { CAL_URL } from "@calcom/lib/constants";
+import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -28,6 +27,8 @@ import {
 
 import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
+import RequiresConfirmationController from "./RequiresConfirmationController";
+
 const generateHashedLink = (id: number) => {
   const translator = short();
   const seed = `${id}:${new Date().getTime()}`;
@@ -43,11 +44,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
-  const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
+  const [customInputs, setCustomInputs] = useState<CustomInputParsed[]>(
     eventType.customInputs.sort((a, b) => a.id - b.id) || []
   );
-  const [selectedCustomInput, setSelectedCustomInput] = useState<EventTypeCustomInput | undefined>(undefined);
+  const [selectedCustomInput, setSelectedCustomInput] = useState<CustomInputParsed | undefined>(undefined);
   const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
+  const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
 
   const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");
@@ -101,7 +103,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
         <TextField
           label={t("event_name")}
           type="text"
-          placeholder={t("meeting_with_user")}
+          placeholder={t("meeting_with_user", { attendeeName: eventType.users[0]?.name })}
           defaultValue={eventType.eventName || ""}
           {...formMethods.register("eventName")}
           addOnSuffix={
@@ -125,15 +127,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
           onCheckedChange={(e) => {
             if (e && customInputs.length === 0) {
               // Push a placeholders
-              setSelectedCustomInput(undefined);
               setSelectedCustomInputModalOpen(true);
             } else if (!e) {
-              setCustomInputs([]);
               formMethods.setValue("customInputs", []);
             }
           }}>
-          <ul className="my-4">
-            {customInputs.map((customInput: EventTypeCustomInput, idx: number) => (
+          <ul className="my-4 rounded-md border">
+            {customInputs.map((customInput, idx) => (
               <CustomInputItem
                 key={idx}
                 question={customInput.label}
@@ -156,24 +156,17 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
                 setSelectedCustomInput(undefined);
                 setSelectedCustomInputModalOpen(true);
               }}>
-              Add an input
+              {t("add_input")}
             </Button>
           )}
         </SettingsToggle>
       </div>
       <hr />
-      <Controller
-        name="requiresConfirmation"
-        defaultValue={eventType.requiresConfirmation}
-        render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            title={t("requires_confirmation")}
-            description={t("requires_confirmation_description")}
-            checked={value}
-            onCheckedChange={(e) => onChange(e)}
-            disabled={seatsEnabled}
-          />
-        )}
+      <RequiresConfirmationController
+        seatsEnabled={seatsEnabled}
+        metadata={eventType.metadata}
+        requiresConfirmation={requiresConfirmation}
+        onRequiresConfirmation={setRequiresConfirmation}
       />
       <hr />
       <Controller
@@ -256,7 +249,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
       <SettingsToggle
         data-testid="hashedLinkCheck"
         title={t("private_link")}
-        description={t("private_link_description")}
+        description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
         onCheckedChange={(e) => {
           formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
@@ -309,6 +302,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               if (e) {
                 formMethods.setValue("disableGuests", true);
                 formMethods.setValue("requiresConfirmation", false);
+                setRequiresConfirmation(false);
                 formMethods.setValue("seatsPerTimeSlot", 2);
               } else {
                 formMethods.setValue("seatsPerTimeSlot", null);
@@ -358,7 +352,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
             <TextField
               label={t("event_name")}
               type="text"
-              placeholder={t("meeting_with_user")}
+              placeholder={t("meeting_with_user", { attendeeName: eventType.users[0]?.name })}
               defaultValue={eventType.eventName || ""}
               {...formMethods.register("eventName")}
             />
@@ -391,24 +385,36 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               <CustomInputTypeForm
                 selectedCustomInput={selectedCustomInput}
                 onSubmit={(values) => {
-                  const customInput: EventTypeCustomInput = {
+                  const customInput: CustomInputParsed = {
                     id: -1,
                     eventTypeId: -1,
                     label: values.label,
                     placeholder: values.placeholder,
                     required: values.required,
                     type: values.type,
+                    options: values.options,
                   };
-
                   if (selectedCustomInput) {
                     selectedCustomInput.label = customInput.label;
                     selectedCustomInput.placeholder = customInput.placeholder;
                     selectedCustomInput.required = customInput.required;
                     selectedCustomInput.type = customInput.type;
+                    selectedCustomInput.options = customInput.options || undefined;
+                    // Update by id
+                    const inputIndex = customInputs.findIndex((input) => input.id === values.id);
+                    customInputs[inputIndex] = selectedCustomInput;
+                    setCustomInputs(customInputs);
+                    formMethods.setValue("customInputs", customInputs);
                   } else {
-                    setCustomInputs(customInputs.concat(customInput));
-                    formMethods.setValue("customInputs", customInputs.concat(customInput));
+                    const concatted = customInputs.concat({
+                      ...customInput,
+                      options: customInput.options,
+                    });
+                    console.log(concatted);
+                    setCustomInputs(concatted);
+                    formMethods.setValue("customInputs", concatted);
                   }
+
                   setSelectedCustomInputModalOpen(false);
                 }}
                 onCancel={() => {

apps/web/components/eventtype/EventSetupTab.tsx

@@ -33,22 +33,10 @@ export const EventSetupTab = (
   const [selectedLocation, setSelectedLocation] = useState<OptionTypeBase | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
 
-  const multipleDurationOptions = [
-    { value: 5, label: t("multiple_duration_mins", { count: 5 }) },
-    { value: 10, label: t("multiple_duration_mins", { count: 10 }) },
-    { value: 15, label: t("multiple_duration_mins", { count: 15 }) },
-    { value: 20, label: t("multiple_duration_mins", { count: 20 }) },
-    { value: 25, label: t("multiple_duration_mins", { count: 25 }) },
-    { value: 30, label: t("multiple_duration_mins", { count: 30 }) },
-    { value: 45, label: t("multiple_duration_mins", { count: 45 }) },
-    { value: 50, label: t("multiple_duration_mins", { count: 50 }) },
-    { value: 60, label: t("multiple_duration_mins", { count: 60 }) },
-    { value: 75, label: t("multiple_duration_mins", { count: 75 }) },
-    { value: 80, label: t("multiple_duration_mins", { count: 80 }) },
-    { value: 90, label: t("multiple_duration_mins", { count: 90 }) },
-    { value: 120, label: t("multiple_duration_mins", { count: 120 }) },
-    { value: 180, label: t("multiple_duration_mins", { count: 180 }) },
-  ];
+  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
+    value: mins,
+    label: t("multiple_duration_mins", { count: mins }),
+  }));
 
   const [selectedMultipleDuration, setSelectedMultipleDuration] = useState<
     MultiValue<{
@@ -142,6 +130,7 @@ export const EventSetupTab = (
         {validLocations.length === 0 && (
           <div className="flex">
             <Select
+              placeholder={t("select")}
               options={locationOptions}
               isSearchable={false}
               className="block w-full min-w-0 flex-1 rounded-sm text-sm"
@@ -224,7 +213,7 @@ export const EventSetupTab = (
       <div className="space-y-8">
         <TextField
           required
-          label={t("Title")}
+          label={t("title")}
           defaultValue={eventType.title}
           {...formMethods.register("title")}
         />
@@ -261,23 +250,24 @@ export const EventSetupTab = (
                 isSearchable={false}
                 className="h-auto !min-h-[36px] text-sm"
                 options={multipleDurationOptions}
+                value={selectedMultipleDuration}
                 onChange={(options) => {
-                  const values = options
-                    .map((opt) => opt.value)
-                    .sort(function (a, b) {
-                      return a - b;
-                    });
+                  let newOptions = [...options];
+                  newOptions = newOptions.sort((a, b) => {
+                    return a?.value - b?.value;
+                  });
+                  const values = newOptions.map((opt) => opt.value);
                   setMultipleDuration(values);
-                  setSelectedMultipleDuration(options);
-                  if (!options.find((opt) => opt.value === defaultDuration?.value)) {
-                    if (options.length > 0) {
-                      setDefaultDuration(options[0]);
+                  setSelectedMultipleDuration(newOptions);
+                  if (!newOptions.find((opt) => opt.value === defaultDuration?.value)) {
+                    if (newOptions.length > 0) {
+                      setDefaultDuration(newOptions[0]);
                     } else {
                       setDefaultDuration(null);
                     }
                   }
-                  if (options.length === 1 && defaultDuration === null) {
-                    setDefaultDuration(options[0]);
+                  if (newOptions.length === 1 && defaultDuration === null) {
+                    setDefaultDuration(newOptions[0]);
                   }
                   formMethods.setValue("metadata.multipleDuration", values);
                 }}

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -67,7 +67,7 @@ function getNavigation(props: {
       name: "availability",
       href: `/event-types/${eventType.id}?tabName=availability`,
       icon: Icon.FiCalendar,
-      info: `Working Hours`, // TODO: Get this from props
+      info: `default_schedule_name`, // TODO: Get this from props
     },
     {
       name: "event_limit_tab_title",

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -0,0 +1,156 @@
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { UnitTypeLongPlural } from "dayjs";
+import { Trans } from "next-i18next";
+import type { FormValues } from "pages/event-types/[type]";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Controller, useFormContext } from "react-hook-form";
+import z from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
+
+type RequiresConfirmationControllerProps = {
+  metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  requiresConfirmation: boolean;
+  onRequiresConfirmation: Dispatch<SetStateAction<boolean>>;
+  seatsEnabled: boolean;
+};
+
+export default function RequiresConfirmationController({
+  metadata,
+  requiresConfirmation,
+  onRequiresConfirmation,
+  seatsEnabled,
+}: RequiresConfirmationControllerProps) {
+  const { t } = useLocale();
+  const [requiresConfirmationSetup, setRequiresConfirmationSetup] = useState(
+    metadata?.requiresConfirmationThreshold
+  );
+  const defaultRequiresConfirmationSetup = { time: 30, unit: "minutes" as UnitTypeLongPlural };
+  const formMethods = useFormContext<FormValues>();
+
+  useEffect(() => {
+    if (!requiresConfirmation) {
+      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+    }
+  }, [requiresConfirmation]);
+
+  return (
+    <div className="block items-start sm:flex">
+      <div className={!seatsEnabled ? "w-full" : ""}>
+        {seatsEnabled ? (
+          <Alert severity="warning" title="Seats option doesn't support confirmation requirement" />
+        ) : (
+          <Controller
+            name="requiresConfirmation"
+            control={formMethods.control}
+            render={() => (
+              <SettingsToggle
+                title={t("requires_confirmation")}
+                description={t("requires_confirmation_description")}
+                checked={requiresConfirmation}
+                onCheckedChange={(val) => {
+                  formMethods.setValue("requiresConfirmation", val);
+                  onRequiresConfirmation(val);
+                }}>
+                <RadioGroup.Root
+                  defaultValue={
+                    requiresConfirmation
+                      ? requiresConfirmationSetup === undefined
+                        ? "always"
+                        : "notice"
+                      : undefined
+                  }
+                  onValueChange={(val) => {
+                    if (val === "always") {
+                      formMethods.setValue("requiresConfirmation", true);
+                      onRequiresConfirmation(true);
+                      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+                      setRequiresConfirmationSetup(undefined);
+                    } else if (val === "notice") {
+                      formMethods.setValue("requiresConfirmation", true);
+                      onRequiresConfirmation(true);
+                      formMethods.setValue(
+                        "metadata.requiresConfirmationThreshold",
+                        requiresConfirmationSetup || defaultRequiresConfirmationSetup
+                      );
+                    }
+                  }}>
+                  <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
+                    <div className="flex items-center">
+                      <RadioGroup.Item
+                        id="always"
+                        value="always"
+                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                        <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
+                      </RadioGroup.Item>
+                      <Label htmlFor="always" className="!m-0 flex items-center">
+                        {t("always_requires_confirmation")}
+                      </Label>
+                    </div>
+                    <div className="flex items-center">
+                      <RadioGroup.Item
+                        id="notice"
+                        value="notice"
+                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                        <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
+                      </RadioGroup.Item>
+                      <Label htmlFor="notice" className="!m-0 flex items-center">
+                        <Trans
+                          i18nKey="when_booked_with_less_than_notice"
+                          defaults="When booked with less than <time></time> notice"
+                          components={{
+                            time: (
+                              <div className="mx-2 flex">
+                                <Input
+                                  type="number"
+                                  min={1}
+                                  onChange={(evt) => {
+                                    const val = Number(evt.target?.value);
+                                    setRequiresConfirmationSetup({
+                                      unit:
+                                        requiresConfirmationSetup?.unit ??
+                                        defaultRequiresConfirmationSetup.unit,
+                                      time: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
+                                  }}
+                                  className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
+                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                                />
+                                <select
+                                  onChange={(evt) => {
+                                    const val = evt.target.value as UnitTypeLongPlural;
+                                    setRequiresConfirmationSetup({
+                                      time:
+                                        requiresConfirmationSetup?.time ??
+                                        defaultRequiresConfirmationSetup.time,
+                                      unit: val,
+                                    });
+                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
+                                  }}
+                                  className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                                  defaultValue={
+                                    metadata?.requiresConfirmationThreshold?.unit ||
+                                    defaultRequiresConfirmationSetup.unit
+                                  }>
+                                  <option value="minutes">{t("minute_timeUnit")}</option>
+                                  <option value="hours">{t("hour_timeUnit")}</option>
+                                </select>
+                              </div>
+                            ),
+                          }}
+                        />
+                      </Label>
+                    </div>
+                  </div>
+                </RadioGroup.Root>
+              </SettingsToggle>
+            )}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -4,21 +4,20 @@ import { FormEvent, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, ImageUploader, showToast, TextArea } from "@calcom/ui";
+import { Avatar } from "@calcom/ui";
 
-import { AvatarSSR } from "@components/ui/AvatarSSR";
-
-interface IUserProfile {
-  user?: User;
-}
+import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
 type FormData = {
   bio: string;
 };
+interface IUserProfileProps {
+  user: IOnboardingPageProps["user"];
+}
 
-const UserProfile = (props: IUserProfile) => {
+const UserProfile = (props: IUserProfileProps) => {
   const { user } = props;
   const { t } = useLocale();
   const avatarRef = useRef<HTMLInputElement>(null!);
@@ -100,7 +99,14 @@ const UserProfile = (props: IUserProfile) => {
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
-        {user && <AvatarSSR user={user} alt="Profile picture" className="h-16 w-16" />}
+        {user && (
+          <Avatar
+            alt={user.username || "user avatar"}
+            gravatarFallbackMd5={user.emailMd5}
+            size="lg"
+            imageSrc={imageSrc}
+          />
+        )}
         <input
           ref={avatarRef}
           type="hidden"

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -1,17 +1,18 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
 import { useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TimezoneSelect } from "@calcom/ui";
 
-import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
+
+import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
 interface IUserSettingsProps {
-  user: User;
+  user: IOnboardingPageProps["user"];
   nextStep: () => void;
 }
 
@@ -23,11 +24,9 @@ const UserSettings = (props: IUserSettingsProps) => {
     register,
     handleSubmit,
     formState: { errors },
-    control,
   } = useForm({
     defaultValues: {
       name: user?.name || "",
-      username: user?.username || "",
     },
     reValidateMode: "onChange",
   });
@@ -41,39 +40,19 @@ const UserSettings = (props: IUserSettingsProps) => {
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: onSuccess,
   });
-  const { data: stripeCustomer } = trpc.viewer.stripeCustomer.useQuery();
-  const paymentRequired = stripeCustomer?.isPremium ? !stripeCustomer?.paidForPremium : false;
+
   const onSubmit = handleSubmit((data) => {
-    if (paymentRequired) {
-      return;
-    }
     mutation.mutate({
       name: data.name,
       timeZone: selectedTimeZone,
     });
   });
 
-  const [currentUsername, setCurrentUsername] = useState(user.username || "");
-
   return (
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
         {/* Username textfield */}
-        <Controller
-          control={control}
-          name="username"
-          render={({ field: { value, ref, onChange } }) => (
-            <UsernameAvailability
-              readonly={true}
-              currentUsername={currentUsername}
-              setCurrentUsername={setCurrentUsername}
-              inputUsernameValue={value}
-              usernameRef={ref}
-              setInputUsernameValue={onChange}
-              user={user}
-            />
-          )}
-        />
+        <UsernameAvailabilityField user={user} />
 
         {/* Full name textfield */}
         <div className="w-full">

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

@@ -1,134 +0,0 @@
-import { EventTypeCustomInput, EventTypeCustomInputType } from "@prisma/client";
-import React, { FC } from "react";
-import { Controller, SubmitHandler, useForm, useWatch } from "react-hook-form";
-
-import { Button } from "@calcom/ui";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-import Select from "@components/ui/form/Select";
-
-interface OptionTypeBase {
-  label: string;
-  value: EventTypeCustomInputType;
-}
-
-interface Props {
-  onSubmit: SubmitHandler<IFormInput>;
-  onCancel: () => void;
-  selectedCustomInput?: EventTypeCustomInput;
-}
-
-type IFormInput = EventTypeCustomInput;
-
-const CustomInputTypeForm: FC<Props> = (props) => {
-  const { t } = useLocale();
-  const inputOptions: OptionTypeBase[] = [
-    { value: EventTypeCustomInputType.TEXT, label: t("text") },
-    { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
-    { value: EventTypeCustomInputType.NUMBER, label: t("number") },
-    { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
-  ];
-  const { selectedCustomInput } = props;
-  const defaultValues = selectedCustomInput || { type: inputOptions[0].value };
-  const { register, control, handleSubmit } = useForm<IFormInput>({
-    defaultValues,
-  });
-  const selectedInputType = useWatch({ name: "type", control });
-  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value);
-
-  const onCancel = () => {
-    props.onCancel();
-  };
-
-  return (
-    <form onSubmit={handleSubmit(props.onSubmit)}>
-      <div className="mb-2">
-        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-          {t("input_type")}
-        </label>
-        <Controller
-          name="type"
-          control={control}
-          render={({ field }) => (
-            <Select
-              id="type"
-              defaultValue={selectedInputOption}
-              options={inputOptions}
-              isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1  text-sm"
-              onChange={(option) => option && field.onChange(option.value)}
-              value={selectedInputOption}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-      </div>
-      <div className="mb-2">
-        <label htmlFor="label" className="block text-sm font-medium text-gray-700">
-          {t("label")}
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            id="label"
-            required
-            className="block w-full rounded-sm border-gray-300 text-sm"
-            defaultValue={selectedCustomInput?.label}
-            {...register("label", { required: true })}
-          />
-        </div>
-      </div>
-      {(selectedInputType === EventTypeCustomInputType.TEXT ||
-        selectedInputType === EventTypeCustomInputType.TEXTLONG) && (
-        <div className="mb-2">
-          <label htmlFor="placeholder" className="block text-sm font-medium text-gray-700">
-            {t("placeholder")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              id="placeholder"
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={selectedCustomInput?.placeholder}
-              {...register("placeholder")}
-            />
-          </div>
-        </div>
-      )}
-      <div className="flex h-5 items-center">
-        <input
-          id="required"
-          type="checkbox"
-          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
-          defaultChecked={selectedCustomInput?.required ?? true}
-          {...register("required")}
-        />
-        <label htmlFor="required" className="block text-sm font-medium text-gray-700">
-          {t("is_required")}
-        </label>
-      </div>
-      <input
-        type="hidden"
-        id="eventTypeId"
-        value={selectedCustomInput?.eventTypeId || -1}
-        {...register("eventTypeId", { valueAsNumber: true })}
-      />
-      <input
-        type="hidden"
-        id="id"
-        value={selectedCustomInput?.id || -1}
-        {...register("id", { valueAsNumber: true })}
-      />
-      <div className="mt-5 flex space-x-2 sm:mt-4">
-        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2">
-          {t("cancel")}
-        </Button>
-        <Button type="submit">{t("save")}</Button>
-      </div>
-    </form>
-  );
-};
-
-export default CustomInputTypeForm;

apps/web/components/schemas/EventReservationSchema.tsx

@@ -0,0 +1,73 @@
+import type { Attendee, Booking, User } from "@prisma/client";
+import type { FC } from "react";
+import { useMemo } from "react";
+import { JsonLd } from "react-schemaorg";
+import type { EventReservation, Person, ReservationStatusType } from "schema-dts";
+
+type EventSchemaUser = Pick<User, "name" | "email">;
+type EventSchemaAttendee = Pick<Attendee, "name" | "email">;
+
+interface EventReservationSchemaInterface {
+  reservationId: Booking["uid"];
+  eventName: Booking["title"];
+  startTime: Booking["startTime"];
+  endTime: Booking["endTime"];
+  organizer: EventSchemaUser | null;
+  attendees: EventSchemaAttendee[];
+  location: Booking["location"];
+  description: Booking["description"];
+  status: Booking["status"];
+}
+
+const EventReservationSchema: FC<EventReservationSchemaInterface> = ({
+  reservationId,
+  eventName,
+  startTime,
+  endTime,
+  organizer,
+  attendees,
+  location,
+  description,
+  status,
+}) => {
+  const reservationStatus = useMemo<ReservationStatusType>(() => {
+    switch (status) {
+      case "ACCEPTED":
+        return "ReservationConfirmed";
+      case "REJECTED":
+      case "CANCELLED":
+        return "ReservationCancelled";
+      case "PENDING":
+        return "ReservationPending";
+      default:
+        return "ReservationHold";
+    }
+  }, [status]);
+
+  return (
+    <JsonLd<EventReservation>
+      item={{
+        "@context": "https://schema.org",
+        "@type": "EventReservation",
+        reservationId,
+        reservationStatus,
+        reservationFor: {
+          "@type": "Event",
+          name: eventName,
+          startDate: startTime.toString(),
+          endDate: endTime.toString(),
+          organizer: organizer
+            ? ({ "@type": "Person", name: organizer.name, email: organizer.email } as Person)
+            : undefined,
+          attendee: attendees?.map(
+            (person) => ({ "@type": "Person", name: person.name, email: person.email } as Person)
+          ),
+          location: location || undefined,
+          description: description || undefined,
+        },
+      }}
+    />
+  );
+};
+
+export default EventReservationSchema;

apps/web/components/seo/head-seo.tsx

@@ -9,6 +9,7 @@ import {
   MeetingImageProps,
 } from "@calcom/lib/OgImages";
 import { getBrowserInfo } from "@calcom/lib/browser/browser.utils";
+import { APP_NAME } from "@calcom/lib/constants";
 import { truncateOnWord } from "@calcom/lib/text";
 
 import { getSeoImage, seoConfig } from "@lib/config/next-seo.config";
@@ -79,7 +80,7 @@ export const HeadSeo = (props: HeadSeoProps): JSX.Element => {
   const image = getSeoImage("ogImage") + constructGenericImage({ title, description });
   const truncatedDescription = truncateOnWord(description, 158);
 
-  const pageTitle = title + " | Cal.com";
+  const pageTitle = title + " | " + APP_NAME;
   let seoObject = buildSeoMeta({
     title: pageTitle,
     image,

apps/web/components/team/TeamSettings.tsx

@@ -1,207 +0,0 @@
-import React, { useRef, useState } from "react";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { objectKeys } from "@calcom/lib/objectKeys";
-import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
-import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, Icon, showToast, TextField } from "@calcom/ui";
-
-import ImageUploader from "@components/ImageUploader";
-import SettingInputContainer from "@components/ui/SettingInputContainer";
-
-interface Props {
-  team: TeamWithMembers | null | undefined;
-}
-
-export default function TeamSettings(props: Props) {
-  const { t } = useLocale();
-
-  const [hasErrors, setHasErrors] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const team = props.team;
-  const hasLogo = !!team?.logo;
-
-  const utils = trpc.useContext();
-  const mutation = trpc.viewer.teams.update.useMutation({
-    onError: (err) => {
-      setHasErrors(true);
-      setErrorMessage(err.message);
-    },
-    async onSuccess() {
-      await utils.viewer.teams.get.invalidate();
-      showToast(t("your_team_updated_successfully"), "success");
-      setHasErrors(false);
-    },
-  });
-
-  const nameRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-  const teamUrlRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-  const descriptionRef = useRef<HTMLTextAreaElement>() as React.MutableRefObject<HTMLTextAreaElement>;
-  const hideBrandingRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-  const logoRef = useRef<HTMLInputElement>() as React.MutableRefObject<HTMLInputElement>;
-
-  function updateTeamData() {
-    if (!team) return;
-    const variables = {
-      name: nameRef.current?.value,
-      slug: teamUrlRef.current?.value,
-      bio: descriptionRef.current?.value,
-      hideBranding: hideBrandingRef.current?.checked,
-    };
-    // remove unchanged variables
-    objectKeys(variables).forEach((key) => {
-      if (variables[key as keyof typeof variables] === team?.[key]) delete variables[key];
-    });
-    mutation.mutate({ id: team.id, ...variables });
-  }
-
-  function updateLogo(newLogo: string) {
-    if (!team) return;
-    logoRef.current.value = newLogo;
-    mutation.mutate({ id: team.id, logo: newLogo });
-  }
-
-  const removeLogo = () => updateLogo("");
-
-  return (
-    <div className="divide-y divide-gray-200 lg:col-span-9">
-      <div className="">
-        {hasErrors && <Alert severity="error" title={errorMessage} />}
-        <form
-          className="divide-y divide-gray-200 lg:col-span-9"
-          onSubmit={(e) => {
-            e.preventDefault();
-            updateTeamData();
-          }}>
-          <div className="py-6">
-            <div className="flex flex-col lg:flex-row">
-              <div className="flex-grow space-y-6">
-                <SettingInputContainer
-                  Icon={Icon.FiLink}
-                  label="Team URL"
-                  htmlFor="team-url"
-                  Input={
-                    <TextField
-                      name="" // typescript requires name but we don't want component to render name label
-                      id="team-url"
-                      addOnLeading={
-                        <span className="inline-flex items-center rounded-l-sm border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500">
-                          {process.env.NEXT_PUBLIC_WEBSITE_URL}/team/
-                        </span>
-                      }
-                      ref={teamUrlRef}
-                      defaultValue={team?.slug as string}
-                    />
-                  }
-                />
-                <SettingInputContainer
-                  Icon={Icon.FiHash}
-                  label="Team Name"
-                  htmlFor="name"
-                  Input={
-                    <input
-                      ref={nameRef}
-                      type="text"
-                      name="name"
-                      id="name"
-                      placeholder={t("your_team_name")}
-                      required
-                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
-                      defaultValue={team?.name as string}
-                    />
-                  }
-                />
-                <hr />
-                <div>
-                  <SettingInputContainer
-                    Icon={Icon.FiInfo}
-                    label={t("about")}
-                    htmlFor="about"
-                    Input={
-                      <>
-                        <textarea
-                          ref={descriptionRef}
-                          id="about"
-                          name="about"
-                          rows={3}
-                          defaultValue={team?.bio as string}
-                          className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
-                        />
-                        <p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
-                      </>
-                    }
-                  />
-                </div>
-                <div>
-                  <SettingInputContainer
-                    Icon={Icon.FiImage}
-                    label="Logo"
-                    htmlFor="avatar"
-                    Input={
-                      <>
-                        <div className="mt-1 flex">
-                          <input
-                            ref={logoRef}
-                            type="hidden"
-                            name="avatar"
-                            id="avatar"
-                            placeholder="URL"
-                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
-                            defaultValue={team?.logo ?? undefined}
-                          />
-                          <ImageUploader
-                            target="logo"
-                            id="logo-upload"
-                            buttonMsg={hasLogo ? t("edit_logo") : t("upload_a_logo")}
-                            handleAvatarChange={updateLogo}
-                            imageSrc={team?.logo ?? undefined}
-                          />
-                          {hasLogo && (
-                            <Button
-                              onClick={removeLogo}
-                              color="secondary"
-                              type="button"
-                              className="ml-1 py-1 text-xs">
-                              {t("remove_logo")}
-                            </Button>
-                          )}
-                        </div>
-                      </>
-                    }
-                  />
-
-                  <hr className="mt-6" />
-                </div>
-
-                <div className="relative flex items-start">
-                  <div className="flex h-5 items-center">
-                    <input
-                      id="hide-branding"
-                      name="hide-branding"
-                      type="checkbox"
-                      ref={hideBrandingRef}
-                      defaultChecked={team?.hideBranding}
-                      className="h-4 w-4 rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500"
-                    />
-                  </div>
-                  <div className="text-sm ltr:ml-3 rtl:mr-3">
-                    <label htmlFor="hide-branding" className="font-medium text-gray-700">
-                      {t("disable_cal_branding")}
-                    </label>
-                    <p className="text-gray-500">{t("disable_cal_branding_description")}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="flex justify-end py-4">
-            <Button type="submit" color="primary">
-              {t("save")}
-            </Button>
-          </div>
-        </form>
-      </div>
-    </div>
-  );
-}

apps/web/components/team/TeamSettingsRightSidebar.tsx

@@ -1,126 +0,0 @@
-import { MembershipRole } from "@prisma/client";
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
-import { trpc } from "@calcom/trpc/react";
-import { ConfirmationDialogContent, Dialog, DialogTrigger, Icon, showToast } from "@calcom/ui";
-
-import { useLocale } from "@lib/hooks/useLocale";
-
-import CreateEventTypeButton from "@components/eventtype/CreateEventType";
-import LinkIconButton from "@components/ui/LinkIconButton";
-
-export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers; role: MembershipRole }) {
-  const { t } = useLocale();
-  const utils = trpc.useContext();
-  const router = useRouter();
-
-  const permalink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${props.team?.slug}`;
-
-  const deleteTeamMutation = trpc.viewer.teams.delete.useMutation({
-    async onSuccess() {
-      await utils.viewer.teams.get.invalidate();
-      router.push(`/settings/teams`);
-      showToast(t("your_team_updated_successfully"), "success");
-    },
-  });
-  const acceptOrLeaveMutation = trpc.viewer.teams.acceptOrLeave.useMutation({
-    onSuccess: () => {
-      utils.viewer.teams.list.invalidate();
-      router.push(`/settings/teams`);
-    },
-  });
-
-  function deleteTeam() {
-    if (props.team?.id) deleteTeamMutation.mutate({ teamId: props.team.id });
-  }
-  function leaveTeam() {
-    if (props.team?.id)
-      acceptOrLeaveMutation.mutate({
-        teamId: props.team.id,
-        accept: false,
-      });
-  }
-
-  return (
-    <div className="space-y-6 px-2">
-      {(props.role === MembershipRole.OWNER || props.role === MembershipRole.ADMIN) && (
-        <CreateEventTypeButton
-          isIndividualTeam
-          canAddEvents={true}
-          options={[
-            {
-              teamId: props.team?.id,
-              name: props.team?.name,
-              slug: props.team?.slug,
-              image: props.team?.logo,
-            },
-          ]}
-        />
-      )}
-      <div className="space-y-1">
-        <Link href={permalink} passHref={true}>
-          <a target="_blank">
-            <LinkIconButton Icon={Icon.FiExternalLink}>{t("preview")}</LinkIconButton>
-          </a>
-        </Link>
-        <LinkIconButton
-          Icon={Icon.FiLink}
-          onClick={() => {
-            navigator.clipboard.writeText(permalink);
-            showToast("Copied to clipboard", "success");
-          }}>
-          {t("copy_link_team")}
-        </LinkIconButton>
-        {props.role === "OWNER" ? (
-          <Dialog>
-            <DialogTrigger asChild>
-              <LinkIconButton
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                Icon={Icon.FiTrash}>
-                {t("disband_team")}
-              </LinkIconButton>
-            </DialogTrigger>
-            <ConfirmationDialogContent
-              variety="danger"
-              title={t("disband_team")}
-              confirmBtnText={t("confirm_disband_team")}
-              onConfirm={deleteTeam}>
-              {t("disband_team_confirmation_message")}
-            </ConfirmationDialogContent>
-          </Dialog>
-        ) : (
-          <Dialog>
-            <DialogTrigger asChild>
-              <LinkIconButton
-                Icon={Icon.FiLogOut}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}>
-                {t("leave_team")}
-              </LinkIconButton>
-            </DialogTrigger>
-            <ConfirmationDialogContent
-              variety="danger"
-              title={t("leave_team")}
-              confirmBtnText={t("confirm_leave_team")}
-              onConfirm={leaveTeam}>
-              {t("leave_team_confirmation_message")}
-            </ConfirmationDialogContent>
-          </Dialog>
-        )}
-      </div>
-      {props.team?.id && props.role !== MembershipRole.MEMBER && (
-        <Link href={`/settings/teams/${props.team.id}/availability`}>
-          <div className="mt-5 hidden space-y-1 sm:block">
-            <LinkIconButton Icon={Icon.FiClock}>View Availability</LinkIconButton>
-            <p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
-          </div>
-        </Link>
-      )}
-    </div>
-  );
-}

apps/web/components/ui/AuthContainer.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React from "react";
 
-import { LOGO } from "@calcom/lib/constants";
+import { APP_NAME, LOGO } from "@calcom/lib/constants";
 
 import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
@@ -21,7 +21,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
       <HeadSeo title={props.title} description={props.description} />
       {props.showLogo && (
         // eslint-disable-next-line @next/next/no-img-element
-        <img className="mb-auto h-4" src={LOGO} alt="Cal.com Logo" />
+        <img className="mb-auto h-4" src={LOGO} alt={`${APP_NAME} Logo`} />
       )}
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.heading && <h2 className="font-cal text-center text-3xl text-neutral-900">{props.heading}</h2>}

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -3,7 +3,7 @@ import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
 import { RefCallback, useEffect, useMemo, useState } from "react";
 
-import { getPremiumPlanMode, getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
+import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -24,9 +24,7 @@ import {
 } from "@calcom/ui";
 
 export enum UsernameChangeStatusEnum {
-  NORMAL = "NORMAL",
   UPGRADE = "UPGRADE",
-  DOWNGRADE = "DOWNGRADE",
 }
 
 interface ICustomUsernameProps {
@@ -37,43 +35,21 @@ interface ICustomUsernameProps {
   setInputUsernameValue: (value: string) => void;
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
-  user: Pick<
-    User,
-    | "username"
-    | "name"
-    | "email"
-    | "bio"
-    | "avatar"
-    | "timeZone"
-    | "weekStart"
-    | "hideBranding"
-    | "theme"
-    | "plan"
-    | "brandColor"
-    | "darkBrandColor"
-    | "timeFormat"
-    | "metadata"
-  >;
+  user: Pick<User, "username" | "metadata">;
   readonly?: boolean;
 }
 
 const obtainNewUsernameChangeCondition = ({
   userIsPremium,
   isNewUsernamePremium,
-  stripeCustomer,
 }: {
   userIsPremium: boolean;
   isNewUsernamePremium: boolean;
   stripeCustomer: RouterOutputs["viewer"]["stripeCustomer"] | undefined;
 }) => {
-  if (!userIsPremium && isNewUsernamePremium && !stripeCustomer?.paidForPremium) {
+  if (!userIsPremium && isNewUsernamePremium) {
     return UsernameChangeStatusEnum.UPGRADE;
   }
-
-  if (userIsPremium && !isNewUsernamePremium && getPremiumPlanMode() === "subscription") {
-    return UsernameChangeStatusEnum.DOWNGRADE;
-  }
-  return UsernameChangeStatusEnum.NORMAL;
 };
 
 const PremiumTextfield = (props: ICustomUsernameProps) => {
@@ -106,7 +82,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         setIsInputUsernamePremium(data.premium);
         setUsernameIsAvailable(data.available);
       }, 150),
-    []
+    [currentUsername]
   );
 
   useEffect(() => {
@@ -137,7 +113,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   });
 
   // when current username isn't set - Go to stripe to check what username he wanted to buy and was it a premium and was it paid for
-  const paymentRequired = !currentUsername && stripeCustomer?.isPremium && !stripeCustomer?.paidForPremium;
+  const paymentRequired = !currentUsername && stripeCustomer?.isPremium;
 
   const usernameChangeCondition = obtainNewUsernameChangeCondition({
     userIsPremium: isCurrentUsernamePremium,
@@ -194,7 +170,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
   };
 
   const saveUsername = () => {
-    if (usernameChangeCondition === UsernameChangeStatusEnum.NORMAL) {
+    if (usernameChangeCondition !== UsernameChangeStatusEnum.UPGRADE) {
       updateUsername.mutate({
         username: inputUsernameValue,
       });
@@ -279,14 +255,6 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       {paymentMsg}
       {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
 
-      {usernameIsAvailable && (
-        <p className={classNames("mt-1 text-xs text-gray-900")}>
-          {usernameChangeCondition === UsernameChangeStatusEnum.DOWNGRADE && (
-            <>{t("premium_to_standard_username_description")}</>
-          )}
-        </p>
-      )}
-
       <Dialog open={openDialogSaveUsername}>
         <DialogContent>
           <div className="flex flex-row">
@@ -295,13 +263,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             </div>
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
-              {usernameChangeCondition && usernameChangeCondition !== UsernameChangeStatusEnum.NORMAL && (
-                <p className="-mt-4 mb-4 text-sm text-gray-800">
-                  {usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE &&
-                    t("change_username_standard_to_premium")}
-                  {usernameChangeCondition === UsernameChangeStatusEnum.DOWNGRADE &&
-                    t("change_username_premium_to_standard")}
-                </p>
+              {usernameChangeCondition && usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
+                <p className="mb-4 text-sm text-gray-800">{t("change_username_standard_to_premium")}</p>
               )}
 
               <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
@@ -323,8 +286,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
           <div className="mt-4 flex flex-row-reverse gap-x-2">
             {/* redirect to checkout */}
-            {(usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE ||
-              usernameChangeCondition === UsernameChangeStatusEnum.DOWNGRADE) && (
+            {usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
               <Button
                 type="button"
                 loading={updateUsername.isLoading}
@@ -336,7 +298,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
               </Button>
             )}
             {/* Normal save */}
-            {usernameChangeCondition === UsernameChangeStatusEnum.NORMAL && (
+            {usernameChangeCondition !== UsernameChangeStatusEnum.UPGRADE && (
               <Button
                 type="button"
                 loading={updateUsername.isLoading}

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -124,6 +124,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           <Input
             ref={usernameRef}
             name="username"
+            value={inputUsernameValue}
             autoComplete="none"
             autoCapitalize="none"
             autoCorrect="none"
@@ -133,7 +134,6 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
             )}
-            defaultValue={currentUsername}
             onChange={(event) => {
               event.preventDefault();
               setInputUsernameValue(event.target.value);

apps/web/components/ui/UsernameAvailability/index.tsx

@@ -1,6 +1,51 @@
+import { useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { User } from "@calcom/prisma/client";
+import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import { AppRouter } from "@calcom/trpc/server/routers/_app";
 
 import { PremiumTextfield } from "./PremiumTextfield";
 import { UsernameTextfield } from "./UsernameTextfield";
 
 export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : PremiumTextfield;
+
+interface UsernameAvailabilityFieldProps {
+  onSuccessMutation?: () => void;
+  onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
+  user: Pick<User, "username" | "metadata">;
+}
+export const UsernameAvailabilityField = ({
+  onSuccessMutation,
+  onErrorMutation,
+  user,
+}: UsernameAvailabilityFieldProps) => {
+  const [currentUsername, setCurrentUsername] = useState(user.username ?? "");
+  const formMethods = useForm({
+    defaultValues: {
+      username: currentUsername,
+    },
+  });
+
+  return (
+    <Controller
+      control={formMethods.control}
+      name="username"
+      render={({ field: { ref, onChange, value } }) => {
+        return (
+          <UsernameAvailability
+            currentUsername={currentUsername}
+            setCurrentUsername={setCurrentUsername}
+            inputUsernameValue={value}
+            usernameRef={ref}
+            setInputUsernameValue={onChange}
+            onSuccessMutation={onSuccessMutation}
+            onErrorMutation={onErrorMutation}
+            user={user}
+          />
+        );
+      }}
+    />
+  );
+};

apps/web/lib/config/next-seo.config.ts

@@ -1,6 +1,6 @@
 import { DefaultSeoProps, NextSeoProps } from "next-seo";
 
-import { SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
+import { APP_NAME, SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
 
 export type HeadSeoProps = {
   title: string;
@@ -27,7 +27,7 @@ export const seoConfig: {
   defaultNextSeo: DefaultSeoProps;
 } = {
   headSeo: {
-    siteName: "Cal.com",
+    siteName: APP_NAME,
   },
   defaultNextSeo: {
     twitter: {

apps/web/lib/hooks/useExposePlanGlobally.ts

@@ -1,12 +0,0 @@
-import { UserPlan } from "@prisma/client";
-
-/**
- * TODO: It should be exposed at a single place.
- */
-export function useExposePlanGlobally(plan: UserPlan) {
-  // Don't wait for component to mount. Do it ASAP. Delaying it would delay UI Configuration.
-  if (typeof window !== "undefined") {
-    // This variable is used by embed-iframe to determine if we should allow UI configuration
-    window.CalComPlan = plan;
-  }
-}

apps/web/lib/hooks/usePublicPage.ts

@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 
 export default function usePublicPage() {
   const router = useRouter();
-  const isPublicPage = ["/[user]", "/success", "/cancel", "/reschedule"].find((route) =>
+  const isPublicPage = ["/[user]", "/booking", "/cancel", "/reschedule"].find((route) =>
     router.pathname.startsWith(route)
   );
   return isPublicPage;

apps/web/lib/isBrandingHidden.tsx

@@ -1,5 +1,3 @@
-import { User } from "@prisma/client";
-
-export function isBrandingHidden<TUser extends Pick<User, "hideBranding" | "plan">>(user: TUser) {
-  return user.hideBranding && user.plan !== "FREE";
+export function isBrandingHidden(hideBrandingSetting: boolean, belongsToActiveTeam: boolean) {
+  return belongsToActiveTeam && hideBrandingSetting;
 }

apps/web/lib/withEmbedSsr.tsx

@@ -7,6 +7,29 @@ export type EmbedProps = {
 export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
   return async (context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<EmbedProps>> => {
     const ssrResponse = await getServerSideProps(context);
+    const embed = context.query.embed;
+
+    if ("redirect" in ssrResponse) {
+      // Use a dummy URL https://base as the fallback base URL so that URL parsing works for relative URLs as well.
+      const destinationUrlObj = new URL(ssrResponse.redirect.destination, "https://base");
+
+      // Make sure that redirect happens to /embed page and pass on embed query param as is for preserving Cal JS API namespace
+      const newDestinationUrl =
+        destinationUrlObj.pathname +
+        "/embed?" +
+        destinationUrlObj.searchParams.toString() +
+        "&embed=" +
+        embed;
+
+      return {
+        ...ssrResponse,
+        redirect: {
+          ...ssrResponse.redirect,
+          destination: newDestinationUrl,
+        },
+      };
+    }
+
     if (!("props" in ssrResponse)) {
       return ssrResponse;
     }

apps/web/next.config.js

@@ -149,6 +149,21 @@ const nextConfig = {
         source: "/router",
         destination: "/apps/routing-forms/router",
       },
+      {
+        source: "/success/:path*",
+        has: [
+          {
+            type: "query",
+            key: "uid",
+            value: "(?<uid>.*)",
+          },
+        ],
+        destination: "/booking/:uid/:path*",
+      },
+      {
+        source: "/cancel/:path*",
+        destination: "/booking/:path*",
+      },
       /* TODO: have these files being served from another deployment or CDN {
         source: "/embed/embed.js",
         destination: process.env.NEXT_PUBLIC_EMBED_LIB_URL?,

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.3.3",
+  "version": "2.3.8",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -38,7 +38,7 @@
     "@calcom/tsconfig": "*",
     "@calcom/ui": "*",
     "@daily-co/daily-js": "^0.26.0",
-    "@formkit/auto-animate": "^1.0.0-beta.1",
+    "@formkit/auto-animate": "^1.0.0-beta.5",
     "@glidejs/glide": "^3.5.2",
     "@heroicons/react": "^1.0.6",
     "@hookform/error-message": "^2.0.0",
@@ -107,12 +107,14 @@
     "react-live-chat-loader": "^2.7.3",
     "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.2.7",
+    "react-schemaorg": "^2.0.0",
     "react-select": "^5.4.0",
     "react-timezone-select": "^1.3.2",
     "react-use-intercom": "1.5.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
     "rrule": "^2.7.1",
+    "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",

apps/web/pages/404.tsx

@@ -1,9 +1,9 @@
 import { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-import { DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
+import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { Icon } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -38,7 +38,7 @@ export default function Custom404() {
     setUrl(`${WEBSITE_URL}/signup?username=${username.replace("/", "")}`);
   }, [username]);
 
-  const isSuccessPage = router.asPath.startsWith("/success");
+  const isSuccessPage = router.asPath.startsWith("/booking");
   const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
   const isSignup = router.asPath.startsWith("/signup");
   const isCalcom = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com";
@@ -64,7 +64,7 @@ export default function Custom404() {
                 <h1 className="font-cal mt-2 text-3xl font-extrabold text-gray-900">
                   {t("signup_requires")}
                 </h1>
-                <p className="mt-4">{t("signup_requires_description")}</p>
+                <p className="mt-4">{t("signup_requires_description", { companyName: COMPANY_NAME })}</p>
               </div>
               <div className="mt-12">
                 <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
@@ -191,7 +191,11 @@ export default function Custom404() {
                   </span>
                 ) : isCalcom ? (
                   <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
-                    {t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
+                    {t("the_username")}{" "}
+                    <strong className="text-blue-500">
+                      {new URL(WEBSITE_URL).hostname}
+                      {username}
+                    </strong>{" "}
                     {t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
                   </a>
                 ) : (

apps/web/pages/500.tsx

@@ -1,13 +1,16 @@
 import Head from "next/head";
 
-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 
 export default function Error500() {
+  const { t } = useLocale();
+
   return (
     <div className="flex h-screen">
       <Head>
-        <title>Something unexpected occurred | Cal.com</title>
+        <title>Something unexpected occurred | {APP_NAME}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <div className="m-auto text-center">
@@ -24,7 +27,7 @@ export default function Error500() {
           Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
           away for you.
         </p>
-        <Button href={`${WEBSITE_URL}/support`}>Contact support</Button>
+        <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
         <Button color="secondary" href="javascript:history.back()" className="ml-2">
           Go back
         </Button>

apps/web/pages/[user].tsx

@@ -28,7 +28,6 @@ import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { BadgeCheckIcon, EventTypeDescriptionLazy as EventTypeDescription, Icon } from "@calcom/ui";
 
-import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
 
@@ -92,7 +91,6 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const query = { ...router.query };
   delete query.user; // So it doesn't display in the Link (and make tests fail)
-  useExposePlanGlobally("PRO");
   const nameOrUsername = user.name || user.username || "";
   const telemetry = useTelemetry();
 
@@ -272,7 +270,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       darkBrandColor: true,
       avatar: true,
       theme: true,
-      plan: true,
       away: true,
       verified: true,
       allowDynamicBooking: true,

apps/web/pages/[user]/[type].tsx

@@ -10,8 +10,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import prisma from "@calcom/prisma";
 import { User } from "@calcom/prisma/client";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { EventTypeMetaDataSchema, teamMetadataSchema } from "@calcom/prisma/zod-utils";
 
+import { isBrandingHidden } from "@lib/isBrandingHidden";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
 
@@ -71,7 +72,6 @@ async function getUserPageProps(context: GetStaticPropsContext) {
       id: true,
       username: true,
       away: true,
-      plan: true,
       name: true,
       hideBranding: true,
       timeZone: true,
@@ -110,6 +110,11 @@ async function getUserPageProps(context: GetStaticPropsContext) {
           },
         ],
       },
+      teams: {
+        include: {
+          team: true,
+        },
+      },
     },
   });
 
@@ -121,10 +126,10 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     "strikethrough",
   ]);
 
-  if (!user || !user.eventTypes) return { notFound: true };
+  if (!user || !user.eventTypes.length) return { notFound: true };
 
   const [eventType]: (typeof user.eventTypes[number] & {
-    users: Pick<User, "name" | "username" | "hideBranding" | "plan" | "timeZone">[];
+    users: Pick<User, "name" | "username" | "hideBranding" | "timeZone">[];
   })[] = [
     {
       ...user.eventTypes[0],
@@ -133,7 +138,6 @@ async function getUserPageProps(context: GetStaticPropsContext) {
           name: user.name,
           username: user.username,
           hideBranding: user.hideBranding,
-          plan: user.plan,
           timeZone: user.timeZone,
         },
       ],
@@ -150,6 +154,13 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     locations: privacyFilteredLocations(locations),
     descriptionAsSafeHTML: eventType.description ? md.render(eventType.description) : null,
   });
+  // Check if the user you are logging into has any active teams
+  const hasActiveTeam =
+    user.teams.filter((m) => {
+      const metadata = teamMetadataSchema.safeParse(m.team.metadata);
+      if (metadata.success && metadata.data?.subscriptionId) return false;
+      return true;
+    }).length > 0;
 
   return {
     props: {
@@ -167,6 +178,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
       away: user?.away,
       isDynamic: false,
       trpcState: ssg.dehydrate(),
+      isBrandingHidden: isBrandingHidden(user.hideBranding, hasActiveTeam),
     },
     revalidate: 10, // seconds
   };
@@ -212,7 +224,6 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
         },
       },
       theme: true,
-      plan: true,
     },
   });
 
@@ -232,7 +243,6 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
         name: user.name,
         username: user.username,
         hideBranding: user.hideBranding,
-        plan: user.plan,
         timeZone: user.timeZone,
       };
     }),
@@ -262,6 +272,7 @@ async function getDynamicGroupPageProps(context: GetStaticPropsContext) {
       isDynamic: true,
       away: false,
       trpcState: ssg.dehydrate(),
+      isBrandingHidden: false, // I think we should always show branding for dynamic groups - saves us checking every single user
     },
     revalidate: 10, // seconds
   };

apps/web/pages/[user]/book.tsx

@@ -12,7 +12,7 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { bookEventTypeSelect } from "@calcom/prisma";
 import prisma from "@calcom/prisma";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import getBooking, { GetBookingType } from "@lib/getBooking";
@@ -127,6 +127,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       periodStartDate: e.periodStartDate?.toString() ?? null,
       periodEndDate: e.periodEndDate?.toString() ?? null,
       schedulingType: null,
+      customInputs: customInputSchema.array().parse(e.customInputs || []),
       users: users.map((u) => ({
         id: u.id,
         name: u.name,

apps/web/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { DefaultSeo } from "next-seo";
 import Head from "next/head";
+import Script from "next/script";
 import superjson from "superjson";
 
 import "@calcom/embed-core/src/embed-iframe";
@@ -36,8 +37,11 @@ function MyApp(props: AppProps) {
     <AppProviders {...props}>
       <DefaultSeo {...seoConfig.defaultNextSeo} />
       <I18nLanguageHandler />
+      <Script
+        id="page-status"
+        dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
+      />
       <Head>
-        <script dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }} />
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
       {getLayout(

apps/web/pages/_document.tsx

@@ -1,12 +1,12 @@
 import Document, { DocumentContext, Head, Html, Main, NextScript, DocumentProps } from "next/document";
+import Script from "next/script";
 
 type Props = Record<string, unknown> & DocumentProps;
 
 function toRunBeforeReactOnClient() {
-  const calEmbedMode =
-    location.search.includes("embed=") ||
-    /* Iframe Name */
-    window.name.includes("cal-embed");
+  const calEmbedMode = typeof new URL(document.URL).searchParams.get("embed") === "string";
+  /* Iframe Name */
+  window.name.includes("cal-embed");
 
   window.isEmbed = () => {
     // Once an embed mode always an embed mode
@@ -70,7 +70,9 @@ class MyDocument extends Document<Props> {
           {/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body
             Persist the embed mode in sessionStorage because query param might get lost during browsing.
           */}
-          <script
+          <Script
+            id="run-before-client"
+            strategy="beforeInteractive"
             dangerouslySetInnerHTML={{
               __html: `(${toRunBeforeReactOnClient.toString()})()`,
             }}

apps/web/pages/api/auth/[...nextauth].tsx

@@ -13,13 +13,14 @@ import path from "path";
 import checkLicense from "@calcom/features/ee/common/server/checkLicense";
 import ImpersonationProvider from "@calcom/features/ee/impersonation/lib/ImpersonationProvider";
 import { hostedCal, isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
-import { ErrorCode, verifyPassword, isPasswordValid } from "@calcom/lib/auth";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { ErrorCode, isPasswordValid, verifyPassword } from "@calcom/lib/auth";
+import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import { defaultCookies } from "@calcom/lib/default-cookies";
 import rateLimit from "@calcom/lib/rateLimit";
 import { serverConfig } from "@calcom/lib/serverConfig";
 import prisma from "@calcom/prisma";
+import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 
 import CalComAdapter from "@lib/auth/next-auth-custom-adapter";
 import { randomString } from "@lib/random";
@@ -63,6 +64,11 @@ const providers: Provider[] = [
           password: true,
           twoFactorEnabled: true,
           twoFactorSecret: true,
+          teams: {
+            include: {
+              team: true,
+            },
+          },
         },
       });
 
@@ -116,6 +122,13 @@ const providers: Provider[] = [
         intervalInMs: 60 * 1000, // 1 minute
       });
       await limiter.check(10, user.email); // 10 requests per minute
+      // Check if the user you are logging into has any active teams
+      const hasActiveTeams =
+        user.teams.filter((m) => {
+          const metadata = teamMetadataSchema.safeParse(m.team.metadata);
+          if (metadata.success && metadata.data?.subscriptionId) return false;
+          return true;
+        }).length > 0;
 
       // authentication success- but does it meet the minimum password requirements?
       if (user.role === "ADMIN" && !isPasswordValid(credentials.password, false, true)) {
@@ -125,6 +138,7 @@ const providers: Provider[] = [
           email: user.email,
           name: user.name,
           role: "USER",
+          belongsToActiveTeam: hasActiveTeams,
         };
       }
 
@@ -134,6 +148,7 @@ const providers: Provider[] = [
         email: user.email,
         name: user.name,
         role: user.role,
+        belongsToActiveTeam: hasActiveTeams,
       };
     },
   }),
@@ -204,9 +219,9 @@ if (true) {
         });
         const emailTemplate = Handlebars.compile(emailFile);
         transporter.sendMail({
-          from: `${process.env.EMAIL_FROM}` || "Cal.com",
+          from: `${process.env.EMAIL_FROM}` || APP_NAME,
           to: identifier,
-          subject: "Your sign-in link for Cal.com",
+          subject: "Your sign-in link for " + APP_NAME,
           html: emailTemplate({
             base_url: WEBAPP_URL,
             signin_url: url,
@@ -272,6 +287,7 @@ export default NextAuth({
           email: user.email,
           role: user.role,
           impersonatedByUID: user?.impersonatedByUID,
+          belongsToActiveTeam: user?.belongsToActiveTeam,
         };
       }
 
@@ -307,6 +323,7 @@ export default NextAuth({
           email: existingUser.email,
           role: existingUser.role,
           impersonatedByUID: token.impersonatedByUID as number,
+          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
         };
       }
 
@@ -324,6 +341,7 @@ export default NextAuth({
           username: token.username as string,
           role: token.role as UserPermissionRole,
           impersonatedByUID: token.impersonatedByUID as number,
+          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
         },
       };
       return calendsoSession;

apps/web/pages/api/auth/setup.ts

@@ -46,7 +46,6 @@ async function handler(req: NextApiRequest) {
       name: parsedQuery.data.full_name,
       emailVerified: new Date(),
       locale: "en", // TODO: We should revisit this
-      plan: "PRO",
       identityProvider: IdentityProvider.CAL,
     },
   });

apps/web/pages/api/cron/downgradeUsers.ts

@@ -1,10 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import dayjs from "@calcom/dayjs";
-import prisma from "@calcom/prisma";
-
-import { TRIAL_LIMIT_DAYS } from "@lib/config/constants";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const apiKey = req.headers.authorization || req.query.apiKey;
   if (process.env.CRON_API_KEY !== apiKey) {
@@ -18,35 +13,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   /**
    * TODO:
-   * We should add and extra check for non-paying customers in Stripe so we can
-   * downgrade them here.
+   * Remove this endpoint
    */
 
-  await prisma.user.updateMany({
-    data: {
-      plan: "FREE",
-    },
-    where: {
-      plan: "TRIAL",
-      OR: [
-        /**
-         * If the user doesn't have a trial end date,
-         * use the default 14 day trial from creation.
-         */
-        {
-          createdDate: {
-            lt: dayjs().subtract(TRIAL_LIMIT_DAYS, "day").toDate(),
-          },
-          trialEndsAt: null,
-        },
-        /** If it does, then honor the trial end date. */
-        {
-          trialEndsAt: {
-            lt: dayjs().toDate(),
-          },
-        },
-      ],
-    },
-  });
   res.json({ ok: true });
 }

apps/web/pages/api/email.ts

@@ -60,9 +60,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   res.setHeader("Content-Type", "text/html");
   res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate");
   res.write(
-    renderEmail("AttendeeScheduledEmail", {
-      attendee: evt.attendees[0],
-      calEvent: evt,
+    renderEmail("DisabledAppEmail", {
+      appName: "Stripe",
+      appType: ["payment"],
+      t,
     })
   );
   res.end();

apps/web/pages/api/sync/helpscout/index.ts

@@ -47,7 +47,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     select: {
       username: true,
       id: true,
-      plan: true,
       createdDate: true,
     },
   });
@@ -81,7 +80,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             ? new Date(lastBooking.booking.createdAt).toLocaleDateString("en-US")
             : "No info"
         }</li>
-        <li><b>Plan:</b>&nbsp;${user.plan}</li>
         <li><b>Account created:</b>&nbsp;${new Date(user.createdDate).toLocaleDateString("en-US")}</li>
       </ul>
     `,

apps/web/pages/api/teams.ts

@@ -1,68 +0,0 @@
-import { MembershipRole } from "@prisma/client";
-import type { NextApiRequest, NextApiResponse } from "next";
-
-import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
-import prisma from "@calcom/prisma";
-
-import { getSession } from "@lib/auth";
-import slugify from "@lib/slugify";
-
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getSession({ req: req });
-
-  if (!session?.user?.id) {
-    res.status(401).json({ message: "Not authenticated" });
-    return;
-  }
-
-  const ownerUser = await prisma.user.findFirst({
-    where: {
-      id: session.user.id,
-    },
-    select: {
-      id: true,
-      username: true,
-      createdDate: true,
-      name: true,
-      plan: true,
-      email: true,
-    },
-  });
-
-  if (req.method === "POST") {
-    const slug = slugify(req.body.name);
-
-    const nameCollisions = await prisma.team.count({
-      where: {
-        OR: [{ name: req.body.name }, { slug: slug }],
-      },
-    });
-
-    if (nameCollisions > 0) {
-      return res.status(409).json({ errorCode: "TeamNameCollision", message: "Team name already taken." });
-    }
-
-    const createTeam = await prisma.team.create({
-      data: {
-        name: req.body.name,
-        slug: slug,
-      },
-    });
-
-    await prisma.membership.create({
-      data: {
-        teamId: createTeam.id,
-        userId: session.user.id,
-        role: MembershipRole.OWNER,
-        accepted: true,
-      },
-    });
-
-    // Sync Services: Close.com
-    closeComUpsertTeamUser(createTeam, ownerUser, MembershipRole.OWNER);
-
-    return res.status(201).json({ message: "Team created" });
-  }
-
-  res.status(404).json({ message: "Team not found" });
-}

apps/web/pages/api/user/avatar.ts

@@ -1,86 +1,72 @@
 import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
 
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import prisma from "@calcom/prisma";
 
 import { defaultAvatarSrc } from "@lib/profile";
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  //   const username = req.url?.substring(1, req.url.lastIndexOf("/"));
-  const username = req.query.username as string;
-  const teamname = req.query.teamname as string;
-  let identity;
-  let linksToThisRoute = false;
+const querySchema = z
+  .object({
+    username: z.string(),
+    teamname: z.string(),
+  })
+  .partial();
+
+async function getIdentityData(req: NextApiRequest) {
+  const { username, teamname } = querySchema.parse(req.query);
+
   if (username) {
     const user = await prisma.user.findUnique({
-      where: {
-        username: username,
-      },
-      select: {
-        avatar: true,
-        email: true,
-      },
+      where: { username },
+      select: { avatar: true, email: true },
     });
-    identity = {
+    return {
       name: username,
       email: user?.email,
       avatar: user?.avatar,
     };
-    linksToThisRoute =
-      identity.avatar === `${CAL_URL}/${username}/avatar.png` ||
-      identity.avatar === `${WEBAPP_URL}/${username}/avatar.png`;
-  } else if (teamname) {
-    const team = await prisma.team.findUnique({
-      where: {
-        slug: teamname,
-      },
-      select: {
-        logo: true,
-      },
-    });
-    identity = {
-      name: teamname,
-      shouldDefaultBeNameBased: true,
-      avatar: team?.logo,
-    };
-    linksToThisRoute =
-      identity.avatar === `${CAL_URL}/team/${teamname}/avatar.png` ||
-      identity.avatar === `${WEBAPP_URL}/team/${teamname}/avatar.png`;
   }
-
-  const emailMd5 = crypto
-    .createHash("md5")
-    .update((identity?.email as string) || "guest@example.com")
-    .digest("hex");
-  const img = identity?.avatar;
-  // If image isn't set or links to this route itself, use default avatar
-  if (!img || linksToThisRoute) {
-    let defaultSrc = defaultAvatarSrc({ md5: emailMd5 });
-    if (identity?.shouldDefaultBeNameBased) {
-      defaultSrc = getPlaceholderAvatar(null, identity.name);
-    }
-    res.writeHead(302, {
-      Location: defaultSrc,
+  if (teamname) {
+    const team = await prisma.team.findUnique({
+      where: { slug: teamname },
+      select: { logo: true },
     });
-
-    res.end();
-  } else if (!img.includes("data:image")) {
-    res.writeHead(302, {
-      Location: img,
-    });
-    res.end();
-  } else {
-    const decoded = img
-      .toString()
-      .replace("data:image/png;base64,", "")
-      .replace("data:image/jpeg;base64,", "");
-    const imageResp = Buffer.from(decoded, "base64");
-    res.writeHead(200, {
-      "Content-Type": "image/png",
-      "Content-Length": imageResp.length,
-    });
-    res.end(imageResp);
+    return {
+      name: teamname,
+      email: null,
+      avatar: team?.logo || getPlaceholderAvatar(null, teamname),
+    };
   }
 }
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const identity = await getIdentityData(req);
+  const img = identity?.avatar;
+  // If image isn't set or links to this route itself, use default avatar
+  if (!img) {
+    res.writeHead(302, {
+      Location: defaultAvatarSrc({
+        md5: crypto
+          .createHash("md5")
+          .update(identity?.email || "guest@example.com")
+          .digest("hex"),
+      }),
+    });
+    return res.end();
+  }
+
+  if (!img.includes("data:image")) {
+    res.writeHead(302, { Location: img });
+    return res.end();
+  }
+
+  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
+  const imageResp = Buffer.from(decoded, "base64");
+  res.writeHead(200, {
+    "Content-Type": "image/png",
+    "Content-Length": imageResp.length,
+  });
+  res.end(imageResp);
+}

apps/web/pages/apps/index.tsx

@@ -1,26 +1,63 @@
-import { InferGetStaticPropsType, NextPageContext } from "next";
+import { GetServerSideProps, InferGetServerSidePropsType } from "next";
+import { ChangeEventHandler, useState } from "react";
 
 import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { classNames } from "@calcom/lib";
 import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/client";
-import { AllApps, AppsLayout, AppStoreCategories, TrendingAppsSlider } from "@calcom/ui";
+import { AllApps, AppsLayout, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
 
 import { ssgInit } from "@server/lib/ssg";
 
-export default function Apps({ appStore, categories }: InferGetStaticPropsType<typeof getServerSideProps>) {
+function AppsSearch({
+  onChange,
+  className,
+}: {
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+}) {
+  return (
+    <TextField
+      className="!border-gray-100 bg-gray-100 !pl-0 focus:!ring-offset-0"
+      addOnLeading={<Icon.FiSearch className="h-4 w-4 text-gray-500" />}
+      addOnClassname="!border-gray-100"
+      containerClassName={classNames("focus:!ring-offset-0", className)}
+      type="search"
+      autoComplete="false"
+      onChange={onChange}
+    />
+  );
+}
+
+export default function Apps({
+  categories,
+  appStore,
+}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const { t } = useLocale();
+  const [searchText, setSearchText] = useState<string | undefined>(undefined);
 
   return (
-    <AppsLayout isPublic heading={t("app_store")} subtitle={t("app_store_description")}>
-      <AppStoreCategories categories={categories} />
-      <TrendingAppsSlider items={appStore} />
-      <AllApps apps={appStore} />
+    <AppsLayout
+      isPublic
+      heading={t("app_store")}
+      subtitle={t("app_store_description")}
+      actions={(className) => (
+        <AppsSearch className={className} onChange={(e) => setSearchText(e.target.value)} />
+      )}
+      emptyStore={!appStore.length}>
+      {!searchText && (
+        <>
+          <AppStoreCategories categories={categories} />
+          <TrendingAppsSlider items={appStore} />
+        </>
+      )}
+      <AllApps apps={appStore} searchText={searchText} />
     </AppsLayout>
   );
 }
 
-export const getServerSideProps = async (context: NextPageContext) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
   const ssg = await ssgInit(context);
 
   const session = await getSession(context);
@@ -43,7 +80,6 @@ export const getServerSideProps = async (context: NextPageContext) => {
   }, {} as Record<string, number>);
   return {
     props: {
-      trpcState: ssg.dehydrate(),
       categories: Object.entries(categories)
         .map(([name, count]): { name: AppCategories; count: number } => ({
           name: name as AppCategories,
@@ -53,6 +89,7 @@ export const getServerSideProps = async (context: NextPageContext) => {
           return b.count - a.count;
         }),
       appStore,
+      trpcState: ssg.dehydrate(),
     },
   };
 };

apps/web/pages/apps/installed/[category].tsx

@@ -4,6 +4,7 @@ import z from "zod";
 import { AppSettings } from "@calcom/app-store/_components/AppSettings";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import { App } from "@calcom/types/App";
@@ -11,7 +12,6 @@ import { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProp
 import {
   Alert,
   Button,
-  DisconnectIntegration,
   EmptyScreen,
   Icon,
   InstalledAppsLayout,

apps/web/pages/auth/setup/index.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+
+import AdminAppsList from "@calcom/features/apps/AdminAppsList";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import prisma from "@calcom/prisma";
+import { inferSSRProps } from "@calcom/types/inferSSRProps";
+import { WizardForm } from "@calcom/ui";
+
+import SetupFormStep1 from "./steps/SetupFormStep1";
+import StepDone from "./steps/StepDone";
+
+export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
+  const { t } = useLocale();
+  const [isLoadingStep1, setIsLoadingStep1] = useState(false);
+  const shouldDisable = props.userCount !== 0;
+
+  const steps = [
+    {
+      title: t("administrator_user"),
+      description: t("lets_create_first_administrator_user"),
+      content: shouldDisable ? <StepDone /> : <SetupFormStep1 setIsLoading={setIsLoadingStep1} />,
+      isLoading: isLoadingStep1,
+    },
+    {
+      title: t("enable_apps"),
+      description: t("enable_apps_description"),
+      content: <AdminAppsList baseURL="/auth/setup" />,
+      isLoading: false,
+    },
+  ];
+
+  return (
+    <>
+      <main className="flex items-center bg-gray-100 print:h-full">
+        <WizardForm href="/auth/setup" steps={steps} disableNavigation={shouldDisable} />
+      </main>
+    </>
+  );
+}
+
+export const getServerSideProps = async () => {
+  const userCount = await prisma.user.count();
+  return {
+    props: {
+      userCount,
+    },
+  };
+};

apps/web/pages/auth/setup/steps/SetupFormStep1.tsx

@@ -1,34 +1,14 @@
-import { CheckIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import classNames from "classnames";
-import { GetServerSidePropsContext } from "next";
+import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
-import { useState } from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import * as z from "zod";
 
 import { isPasswordValid } from "@calcom/lib/auth";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import prisma from "@calcom/prisma";
-import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { EmailField, Label, PasswordField, TextField, WizardForm } from "@calcom/ui";
-
-import { ssrInit } from "@server/lib/ssr";
-
-const StepDone = () => {
-  const { t } = useLocale();
-
-  return (
-    <div className="min-h-36 my-6 flex flex-col items-center justify-center">
-      <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
-        <CheckIcon className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
-      </div>
-      <div className="max-w-[420px] text-center">
-        <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
-      </div>
-    </div>
-  );
-};
+import { EmailField, Label, PasswordField, TextField } from "@calcom/ui";
 
 const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
   const router = useRouter();
@@ -83,13 +63,19 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
       },
     });
     if (response.status === 200) {
-      router.replace(`/auth/login?email=${data.email_address.toLowerCase()}`);
+      await signIn("credentials", {
+        redirect: false,
+        callbackUrl: "/",
+        email: data.email_address.toLowerCase(),
+        password: data.password,
+      });
+      router.replace(`/auth/setup?step=2&category=calendar`);
     } else {
       router.replace("/auth/setup");
     }
   }, onError);
 
-  const longWebsiteUrl = process.env.NEXT_PUBLIC_WEBSITE_URL.length > 30;
+  const longWebsiteUrl = WEBSITE_URL.length > 30;
 
   return (
     <FormProvider {...formMethods}>
@@ -201,37 +187,4 @@ const SetupFormStep1 = (props: { setIsLoading: (val: boolean) => void }) => {
   );
 };
 
-export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
-  const { t } = useLocale();
-  const [isLoadingStep1, setIsLoadingStep1] = useState(false);
-
-  const steps = [
-    {
-      title: t("administrator_user"),
-      description: t("lets_create_first_administrator_user"),
-      content: props.userCount !== 0 ? <StepDone /> : <SetupFormStep1 setIsLoading={setIsLoadingStep1} />,
-      enabled: props.userCount === 0, // to check if the wizard should show buttons to navigate through more steps
-      isLoading: isLoadingStep1,
-    },
-  ];
-
-  return (
-    <>
-      <main className="flex h-screen items-center bg-gray-100 print:h-full">
-        <WizardForm href="/auth/setup" steps={steps} containerClassname="max-w-sm" />
-      </main>
-    </>
-  );
-}
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(context);
-  const userCount = await prisma.user.count();
-
-  return {
-    props: {
-      trpcState: ssr.dehydrate(),
-      userCount,
-    },
-  };
-};
+export default SetupFormStep1;

apps/web/pages/auth/setup/steps/StepDone.tsx

@@ -0,0 +1,19 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui";
+
+const StepDone = () => {
+  const { t } = useLocale();
+
+  return (
+    <div className="min-h-36 my-6 flex flex-col items-center justify-center">
+      <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
+        <Icon.FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
+      </div>
+      <div className="max-w-[420px] text-center">
+        <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default StepDone;

apps/web/pages/auth/sso/[provider].tsx

@@ -3,7 +3,7 @@ import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { getPremiumPlanPrice } from "@calcom/app-store/stripepayment/lib/utils";
+import { getPremiumMonthlyPlanPriceId } from "@calcom/app-store/stripepayment/lib/utils";
 import stripe from "@calcom/features/ee/payments/server/stripe";
 import {
   hostedCal,
@@ -161,7 +161,7 @@ const getStripePremiumUsernameUrl = async ({
     customer: customer.id,
     line_items: [
       {
-        price: getPremiumPlanPrice(),
+        price: getPremiumMonthlyPlanPriceId(),
         quantity: 1,
       },
     ],

apps/web/pages/availability/[schedule].tsx

@@ -29,6 +29,8 @@ import { HttpError } from "@lib/core/http/error";
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import EditableHeading from "@components/ui/EditableHeading";
 
+import { ssgInit } from "@server/lib/ssg";
+
 const querySchema = z.object({
   schedule: stringOrNumber,
 });
@@ -91,7 +93,7 @@ export default function Availability({ schedule }: { schedule: number }) {
   return (
     <Shell
       backPath="/availability"
-      title={data?.schedule.name && data.schedule.name + " | " + t("availability")}
+      title={data?.schedule.name ? data.schedule.name + " | " + t("availability") : t("availability")}
       heading={
         <Controller
           control={form.control}
@@ -209,14 +211,16 @@ export default function Availability({ schedule }: { schedule: number }) {
   );
 }
 
-export const getStaticProps: GetStaticProps = (ctx) => {
+export const getStaticProps: GetStaticProps = async (ctx) => {
   const params = querySchema.safeParse(ctx.params);
+  const ssg = await ssgInit(ctx);
 
   if (!params.success) return { notFound: true };
 
   return {
     props: {
       schedule: params.data.schedule,
+      trpcState: ssg.dehydrate(),
     },
     revalidate: 10, // seconds
   };

apps/web/pages/availability/index.tsx

@@ -1,4 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { GetServerSidePropsContext } from "next";
 
 import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -10,6 +11,8 @@ import { HttpError } from "@lib/core/http/error";
 
 import SkeletonLoader from "@components/availability/SkeletonLoader";
 
+import { ssrInit } from "@server/lib/ssr";
+
 export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availability"]["list"]) {
   const { t } = useLocale();
   const utils = trpc.useContext();
@@ -45,6 +48,24 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
     },
   });
 
+  const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
+    onSuccess: async ({ schedule }) => {
+      await utils.viewer.availability.list.invalidate();
+      showToast(
+        t("availability_updated_successfully", {
+          scheduleName: schedule.name,
+        }),
+        "success"
+      );
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+  });
+
   // Adds smooth delete button - item fades and old item slides into place
 
   const [animationParentRef] = useAutoAnimate<HTMLUListElement>();
@@ -71,6 +92,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
                 }}
                 key={schedule.id}
                 schedule={schedule}
+                updateDefault={updateMutation.mutate}
                 deleteFunction={deleteMutation.mutate}
               />
             ))}
@@ -93,3 +115,13 @@ export default function AvailabilityPage() {
     </div>
   );
 }
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/booking/[uid].tsx

@@ -23,6 +23,7 @@ import {
 } from "@calcom/embed-core/embed-iframe";
 import { parseRecurringEvent } from "@calcom/lib";
 import CustomBranding from "@calcom/lib/CustomBranding";
+import { APP_NAME } from "@calcom/lib/constants";
 import { formatTime } from "@calcom/lib/date-fns";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -33,13 +34,14 @@ import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/t
 import { localStorage } from "@calcom/lib/webstorage";
 import prisma, { baseUserSelect } from "@calcom/prisma";
 import { Prisma } from "@calcom/prisma/client";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Button, EmailInput, Icon } from "@calcom/ui";
 
 import { timeZone } from "@lib/clock";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import CancelBooking from "@components/booking/CancelBooking";
+import EventReservationSchema from "@components/schemas/EventReservationSchema";
 import { HeadSeo } from "@components/seo/head-seo";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -55,26 +57,41 @@ function redirectToExternalUrl(url: string) {
 function RedirectionToast({ url }: { url: string }) {
   const [timeRemaining, setTimeRemaining] = useState(10);
   const [isToastVisible, setIsToastVisible] = useState(true);
-  const parsedSuccessUrl = new URL(document.URL);
-  const parsedExternalUrl = new URL(url);
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  /* @ts-ignore */ //https://stackoverflow.com/questions/49218765/typescript-and-iterator-type-iterableiteratort-is-not-an-array-type
-  for (const [name, value] of parsedExternalUrl.searchParams.entries()) {
-    parsedSuccessUrl.searchParams.set(name, value);
-  }
-
-  const urlWithSuccessParams =
-    parsedExternalUrl.origin +
-    parsedExternalUrl.pathname +
-    "?" +
-    parsedSuccessUrl.searchParams.toString() +
-    parsedExternalUrl.hash;
 
   const { t } = useLocale();
   const timerRef = useRef<number | null>(null);
+  const router = useRouter();
+  const { cancel: isCancellationMode } = querySchema.parse(router.query);
+  const urlWithSuccessParamsRef = useRef<string | null>();
+  if (isCancellationMode && timerRef.current) {
+    setIsToastVisible(false);
+  }
 
   useEffect(() => {
+    if (!isToastVisible && timerRef.current) {
+      window.clearInterval(timerRef.current);
+    }
+  }, [isToastVisible]);
+
+  useEffect(() => {
+    const parsedExternalUrl = new URL(url);
+
+    const parsedSuccessUrl = new URL(document.URL);
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    /* @ts-ignore */ //https://stackoverflow.com/questions/49218765/typescript-and-iterator-type-iterableiteratort-is-not-an-array-type
+    for (const [name, value] of parsedExternalUrl.searchParams.entries()) {
+      parsedSuccessUrl.searchParams.set(name, value);
+    }
+
+    const urlWithSuccessParams =
+      parsedExternalUrl.origin +
+      parsedExternalUrl.pathname +
+      "?" +
+      parsedSuccessUrl.searchParams.toString() +
+      parsedExternalUrl.hash;
+    urlWithSuccessParamsRef.current = urlWithSuccessParams;
+
     timerRef.current = window.setInterval(() => {
       if (timeRemaining > 0) {
         setTimeRemaining((timeRemaining) => {
@@ -88,7 +105,7 @@ function RedirectionToast({ url }: { url: string }) {
     return () => {
       window.clearInterval(timerRef.current as number);
     };
-  }, [timeRemaining, urlWithSuccessParams]);
+  }, [timeRemaining, url]);
 
   if (!isToastVisible) {
     return null;
@@ -111,7 +128,9 @@ function RedirectionToast({ url }: { url: string }) {
               <div className="order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto">
                 <button
                   onClick={() => {
-                    redirectToExternalUrl(urlWithSuccessParams);
+                    if (urlWithSuccessParamsRef.current) {
+                      redirectToExternalUrl(urlWithSuccessParamsRef.current);
+                    }
                   }}
                   className="flex w-full items-center justify-center rounded-sm border border-transparent bg-white px-4 py-2 text-sm font-medium text-green-600 hover:bg-green-50">
                   {t("continue")}
@@ -122,7 +141,6 @@ function RedirectionToast({ url }: { url: string }) {
                   type="button"
                   onClick={() => {
                     setIsToastVisible(false);
-                    window.clearInterval(timerRef.current as number);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
                   <Icon.FiX className="h-6 w-6 text-white" />
@@ -147,6 +165,7 @@ const querySchema = z.object({
   uid: z.string(),
   allRemainingBookings: stringToBoolean,
   cancel: stringToBoolean,
+  changes: stringToBoolean,
   reschedule: stringToBoolean,
   isSuccessBookingPage: z.string().optional(),
 });
@@ -159,26 +178,33 @@ export default function Success(props: SuccessProps) {
     allRemainingBookings,
     isSuccessBookingPage,
     cancel: isCancellationMode,
+    changes,
   } = querySchema.parse(router.query);
 
-  if (isCancellationMode && typeof window !== "undefined") {
+  if ((isCancellationMode || changes) && typeof window !== "undefined") {
     window.scrollTo(0, document.body.scrollHeight);
   }
+
   const location: ReturnType<typeof getEventLocationValue> = Array.isArray(props.bookingInfo.location)
-    ? props.bookingInfo.location[0] || ""
-    : props.bookingInfo.location || "";
+    ? props.bookingInfo.location[0]
+    : // If there is no location set then we default to Cal Video
+      "integrations:daily";
 
   if (!location) {
     // Can't use logger.error because it throws error on client. stdout isn't available to it.
     console.error(`No location found `);
   }
 
-  const name = props.bookingInfo?.user?.name;
   const email = props.bookingInfo?.user?.email;
   const status = props.bookingInfo?.status;
   const reschedule = props.bookingInfo.status === BookingStatus.ACCEPTED;
   const cancellationReason = props.bookingInfo.cancellationReason;
 
+  const attendeeName =
+    typeof props?.bookingInfo?.attendees?.[0]?.name === "string"
+      ? props?.bookingInfo?.attendees?.[0]?.name
+      : "Nameless";
+
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const { data: session } = useSession();
 
@@ -200,8 +226,6 @@ export default function Success(props: SuccessProps) {
     });
   }
 
-  const attendeeName = typeof name === "string" ? name : "Nameless";
-
   const eventNameObject = {
     attendeeName,
     eventType: props.eventType.title,
@@ -221,7 +245,7 @@ export default function Success(props: SuccessProps) {
   useEffect(() => {
     if (top !== window) {
       //page_view will be collected automatically by _middleware.ts
-      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/success"));
+      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/booking"));
     }
   }, [telemetry]);
 
@@ -314,6 +338,19 @@ export default function Success(props: SuccessProps) {
 
   return (
     <div className={isEmbed ? "" : "h-screen"} data-testid="success-page">
+      {!isEmbed && (
+        <EventReservationSchema
+          reservationId={bookingInfo.uid}
+          eventName={eventName}
+          startTime={bookingInfo.startTime}
+          endTime={bookingInfo.endTime}
+          organizer={bookingInfo.user}
+          attendees={bookingInfo.attendees}
+          location={locationToDisplay}
+          description={bookingInfo.description}
+          status={status}
+        />
+      )}
       {userIsOwner && !isEmbed && (
         <div className="mt-2 ml-4 -mb-4">
           <Link href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}>
@@ -328,7 +365,9 @@ export default function Success(props: SuccessProps) {
       <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
       <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
         <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
-          {eventType.successRedirectUrl ? <RedirectionToast url={eventType.successRedirectUrl} /> : null}{" "}
+          {isSuccessBookingPage && !isCancellationMode && eventType.successRedirectUrl ? (
+            <RedirectionToast url={eventType.successRedirectUrl} />
+          ) : null}{" "}
           <div
             className={classNames(
               shouldAlignCentrally ? "text-center" : "",
@@ -409,7 +448,7 @@ export default function Success(props: SuccessProps) {
                     {(bookingInfo?.user || bookingInfo?.attendees) && (
                       <>
                         <div className="font-medium">{t("who")}</div>
-                        <div className="col-span-2 mb-6 last:mb-0">
+                        <div className="col-span-2 last:mb-0">
                           <>
                             {bookingInfo?.user && (
                               <div className="mb-3">
@@ -451,13 +490,40 @@ export default function Success(props: SuccessProps) {
                     )}
                     {customInputs &&
                       Object.keys(customInputs).map((key) => {
+                        // This breaks if you have two label that are the same.
+                        // TODO: Fix this in another PR
                         const customInput = customInputs[key as keyof typeof customInputs];
+                        const eventTypeCustomFound = eventType.customInputs?.find((ci) => ci.label === key);
                         return (
                           <>
-                            {customInput !== "" && (
+                            {eventTypeCustomFound?.type === "RADIO" && (
                               <>
-                                <div className="mt-2 pr-3 font-medium">{key}</div>
-                                <div className="col-span-2 mt-2 mb-2">
+                                <div className="col-span-3 mt-8 border-t pt-8 pr-3 font-medium">
+                                  {eventTypeCustomFound.label}
+                                </div>
+                                <div className="col-span-3 mt-1 mb-2">
+                                  {eventTypeCustomFound.options &&
+                                    eventTypeCustomFound.options.map((option) => {
+                                      const selected = option.label == customInput;
+                                      return (
+                                        <div
+                                          key={option.label}
+                                          className={classNames(
+                                            "flex space-x-1",
+                                            !selected && "text-gray-500"
+                                          )}>
+                                          <p>{option.label}</p>
+                                          <span>{option.label === customInput && "✅"}</span>
+                                        </div>
+                                      );
+                                    })}
+                                </div>
+                              </>
+                            )}
+                            {eventTypeCustomFound?.type !== "RADIO" && customInput !== "" && (
+                              <>
+                                <div className="col-span-3 mt-8 border-t pt-8 pr-3 font-medium">{key}</div>
+                                <div className="col-span-3 mt-2 mb-2">
                                   {typeof customInput === "boolean" ? (
                                     <p>{customInput ? "true" : "false"}</p>
                                   ) : (
@@ -479,7 +545,7 @@ export default function Success(props: SuccessProps) {
                     )}
                   </div>
                 </div>
-                {!needsConfirmation &&
+                {(!needsConfirmation || !userIsOwner) &&
                   !isCancelled &&
                   (!isCancellationMode ? (
                     <>
@@ -639,7 +705,9 @@ export default function Success(props: SuccessProps) {
                   <>
                     <hr className="border-bookinglightest dark:border-darkgray-300 mt-8" />
                     <div className="border-bookinglightest text-booking-lighter dark:border-darkgray-300 pt-8 text-center text-xs dark:text-white">
-                      <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
+                      <a href="https://cal.com/signup">
+                        {t("create_booking_link_with_calcom", { appName: APP_NAME })}
+                      </a>
 
                       <form
                         onSubmit={(e) => {
@@ -780,6 +848,7 @@ const getEventTypesFromDB = async (id: number) => {
       requiresConfirmation: true,
       userId: true,
       successRedirectUrl: true,
+      customInputs: true,
       locations: true,
       price: true,
       currency: true,
@@ -789,7 +858,6 @@ const getEventTypesFromDB = async (id: number) => {
           name: true,
           username: true,
           hideBranding: true,
-          plan: true,
           theme: true,
           brandColor: true,
           darkBrandColor: true,
@@ -846,22 +914,25 @@ const handleSeatsEventTypeOnBooking = (
     seatsShowAttendees: boolean | null;
     [x: string | number | symbol]: unknown;
   },
-  booking: Partial<
+  bookingInfo: Partial<
     Prisma.BookingGetPayload<{ include: { attendees: { select: { name: true; email: true } } } }>
   >,
   email: string
 ) => {
   if (eventType?.seatsPerTimeSlot !== null) {
     // @TODO: right now bookings with seats doesn't save every description that its entered by every user
-    delete booking.description;
+    delete bookingInfo.description;
   } else {
     return;
   }
   if (!eventType.seatsShowAttendees) {
-    const attendee = booking?.attendees?.find((a) => a.email === email);
-    booking["attendees"] = attendee ? [attendee] : [];
+    const attendee = bookingInfo?.attendees?.find((a) => {
+      return a.email === email;
+    });
+
+    bookingInfo["attendees"] = attendee ? [attendee] : [];
   }
-  return;
+  return bookingInfo;
 };
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
@@ -940,7 +1011,11 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       select: baseUserSelect,
     });
     if (user) {
-      eventTypeRaw.users.push(user);
+      eventTypeRaw.users.push({
+        ...user,
+        avatar: "",
+        allowDynamicBooking: true,
+      });
     }
   }
 
@@ -956,6 +1031,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     periodEndDate: eventTypeRaw.periodEndDate?.toString() ?? null,
     metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata),
     recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
+    customInputs: customInputSchema.array().parse(eventTypeRaw.customInputs),
   };
 
   const profile = {
@@ -967,7 +1043,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     slug: eventType.team?.slug || eventType.users[0]?.username || null,
   };
 
-  if (bookingInfo !== null && email) {
+  if (bookingInfo !== null && email && eventType.seatsPerTimeSlot) {
     handleSeatsEventTypeOnBooking(eventType, bookingInfo, email);
   }
 

apps/web/pages/bookings/[status].tsx

@@ -14,9 +14,18 @@ import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 import BookingListItem from "@components/booking/BookingListItem";
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
+import { ssgInit } from "@server/lib/ssg";
+
 type BookingListingStatus = RouterInputs["viewer"]["bookings"]["get"]["status"];
 type BookingOutput = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][0];
 
+type RecurringInfo = {
+  recurringEventId: string | null;
+  count: number;
+  firstDate: Date | null;
+  bookings: { [key: string]: Date[] };
+};
+
 const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
 
 const descriptionByStatus: Record<BookingListingStatus, string> = {
@@ -73,6 +82,18 @@ export default function Bookings() {
     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 new Date(booking.startTime).toDateString() === new Date().toDateString();
+      })
+    )[0] || [];
+
   const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
@@ -83,45 +104,65 @@ export default function Bookings() {
         )}
         {(query.status === "loading" || query.isPaused) && <SkeletonLoader />}
         {query.status === "success" && !isEmpty && (
-          <div className="pt-2 xl:pt-0">
-            <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
-            {/* TODO: add today only for the current day
-            <p className="pb-3 text-xs font-medium leading-4 text-gray-500 uppercase">{t("today")}</p>
-             */}
-
-            <div className="overflow-hidden rounded-md border border-gray-200">
-              <table className="w-full max-w-full table-fixed">
-                <tbody className="divide-y divide-gray-200 bg-white" 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 (
+          <>
+            {!!bookingsToday.length && status === "upcoming" && (
+              <div className="mb-6 pt-2 xl:pt-0">
+                <WipeMyCalActionButton bookingStatus={status} bookingsEmpty={isEmpty} />
+                <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("today")}</p>
+                <div className="overflow-hidden rounded-md border border-gray-200">
+                  <table className="w-full max-w-full table-fixed">
+                    <tbody className="divide-y divide-gray-200 bg-white">
+                      <Fragment>
+                        {bookingsToday.map((booking: BookingOutput) => (
                           <BookingListItem
                             key={booking.id}
                             listingStatus={status}
-                            recurringInfo={recurringInfo}
+                            recurringInfo={recurringInfoToday}
                             {...booking}
                           />
-                        );
-                      })}
-                    </Fragment>
-                  ))}
-                </tbody>
-              </table>
+                        ))}
+                      </Fragment>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+            <div className="pt-2 xl:pt-0">
+              <p className="mb-2 text-xs font-medium uppercase leading-4 text-gray-500">{t("all")}</p>
+              <div className="overflow-hidden rounded-md border border-gray-200">
+                <table className="w-full max-w-full table-fixed">
+                  <tbody className="divide-y divide-gray-200 bg-white" 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}
+                              listingStatus={status}
+                              recurringInfo={recurringInfo}
+                              {...booking}
+                            />
+                          );
+                        })}
+                      </Fragment>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              <div className="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>
-            <div className="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:mx-6 xl:pt-0">
@@ -140,14 +181,16 @@ export default function Bookings() {
   );
 }
 
-export const getStaticProps: GetStaticProps = (ctx) => {
+export const getStaticProps: GetStaticProps = async (ctx) => {
   const params = querySchema.safeParse(ctx.params);
+  const ssg = await ssgInit(ctx);
 
   if (!params.success) return { notFound: true };
 
   return {
     props: {
       status: params.data.status,
+      trpcState: ssg.dehydrate(),
     },
   };
 };

apps/web/pages/cancel/[uid].tsx

@@ -1,24 +0,0 @@
-import { GetServerSidePropsContext } from "next";
-import z from "zod";
-
-const querySchema = z.object({
-  uid: z.string(),
-  allRemainingBookings: z
-    .string()
-    .optional()
-    .transform((val) => (val ? JSON.parse(val) : false)),
-});
-
-export default function Type() {
-  return <></>;
-}
-
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const { allRemainingBookings, uid } = querySchema.parse(context.query);
-  return {
-    redirect: {
-      permanent: false,
-      destination: `/success?uid=${uid}&allRemainingBookings=${allRemainingBookings}&cancel=true`,
-    },
-  };
-};

apps/web/pages/d/[link]/[slug].tsx

@@ -90,7 +90,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
         },
       },
       theme: true,
-      plan: true,
     },
   });
 
@@ -117,7 +116,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       name: u.name,
       username: u.username,
       hideBranding: u.hideBranding,
-      plan: u.plan,
       timeZone: u.timeZone,
     })),
   });
@@ -158,7 +156,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       away: user.away,
       isDynamicGroup: false,
       profile,
-      plan: user.plan,
       date,
       eventType: eventTypeObject,
       workingHours,
@@ -166,6 +163,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       previousPage: context.req.headers.referer ?? null,
       booking,
       users: [user.username],
+      isBrandingHidden: user.hideBranding,
     },
   };
 };

apps/web/pages/d/[link]/book.tsx

@@ -4,7 +4,7 @@ import { JSONObject } from "superjson/dist/types";
 import { parseRecurringEvent } from "@calcom/lib";
 import prisma from "@calcom/prisma";
 import { bookEventTypeSelect } from "@calcom/prisma/selects";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -79,6 +79,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       ...e,
       periodStartDate: e.periodStartDate?.toString() ?? null,
       periodEndDate: e.periodEndDate?.toString() ?? null,
+      customInputs: customInputSchema.array().parse(e.customInputs || []),
       schedulingType: null,
       users: users.map((u) => ({
         id: u.id,

apps/web/pages/event-types/[type]/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventTypeCustomInput, PeriodType, Prisma, SchedulingType } from "@prisma/client";
+import { PeriodType, Prisma, SchedulingType } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -8,23 +8,24 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { StripeData } from "@calcom/app-store/stripepayment/lib/server";
-import getApps, { getEventTypeAppData, getLocationOptions } from "@calcom/app-store/utils";
+import { getEventTypeAppData, getLocationOptions } from "@calcom/app-store/utils";
 import { EventLocationType, LocationObject } from "@calcom/core/location";
 import { parseBookingLimit, parseRecurringEvent, validateBookingLimitOrder } from "@calcom/lib";
+import getEnabledApps from "@calcom/lib/apps/getEnabledApps";
 import { CAL_URL } from "@calcom/lib/constants";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
 import prisma from "@calcom/prisma";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
 import type { BookingLimit, RecurringEvent } from "@calcom/types/Calendar";
 import { Form, showToast } from "@calcom/ui";
 
 import { asStringOrThrow } from "@lib/asStringOrNull";
 import { getSession } from "@lib/auth";
-import { HttpError } from "@lib/core/http/error";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { AvailabilityTab } from "@components/eventtype/AvailabilityTab";
@@ -39,6 +40,7 @@ import { EventTypeSingleLayout } from "@components/eventtype/EventTypeSingleLayo
 import EventWorkflowsTab from "@components/eventtype/EventWorkfowsTab";
 
 import { getTranslation } from "@server/lib/i18n";
+import { ssrInit } from "@server/lib/ssr";
 
 export type FormValues = {
   title: string;
@@ -63,7 +65,7 @@ export type FormValues = {
     displayLocationPublicly?: boolean;
     phone?: string;
   }[];
-  customInputs: EventTypeCustomInput[];
+  customInputs: CustomInputParsed[];
   users: string[];
   schedule: number;
   periodType: PeriodType;
@@ -87,6 +89,8 @@ export type FormValues = {
   bookingLimits?: BookingLimit;
 };
 
+export type CustomInputParsed = typeof customInputSchema._output;
+
 const querySchema = z.object({
   tabName: z
     .enum(["setup", "availability", "apps", "limits", "recurring", "team", "advanced", "workflows"])
@@ -261,6 +265,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             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,
@@ -278,7 +283,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             if (metadata?.multipleDuration.length < 1) {
               throw new Error(t("event_setup_multiple_duration_error"));
             } else {
-              if (!metadata?.multipleDuration?.includes(input.length)) {
+              if (input.length && !metadata?.multipleDuration?.includes(input.length)) {
                 throw new Error(t("event_setup_multiple_duration_default_error"));
               }
             }
@@ -298,6 +303,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             seatsPerTimeSlot,
             seatsShowAttendees,
             metadata,
+            customInputs,
           });
         }}>
         <div ref={animationParentRef} className="space-y-6">
@@ -312,6 +318,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const { req, query } = context;
   const session = await getSession({ req });
   const typeParam = parseInt(asStringOrThrow(query.type));
+  const ssr = await ssrInit(context);
 
   if (Number.isNaN(typeParam)) {
     return {
@@ -334,7 +341,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     id: true,
     avatar: true,
     email: true,
-    plan: true,
     locale: true,
     defaultScheduleId: true,
   });
@@ -461,6 +467,9 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const credentials = await prisma.credential.findMany({
     where: {
       userId: session.user.id,
+      app: {
+        enabled: true,
+      },
     },
     select: {
       id: true,
@@ -468,6 +477,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       key: true,
       userId: true,
       appId: true,
+      invalid: true,
     },
   });
 
@@ -495,6 +505,8 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   // const parsedMetaData = _EventTypeModel.parse(newMetadata);
   const parsedMetaData = newMetadata;
 
+  const parsedCustomInputs = (rawEventType.customInputs || []).map((input) => customInputSchema.parse(input));
+
   const eventType = {
     ...restEventType,
     schedule: rawEventType.schedule?.id || rawEventType.users[0]?.defaultScheduleId || null,
@@ -502,6 +514,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     bookingLimits: parseBookingLimit(restEventType.bookingLimits),
     locations: locations as unknown as LocationObject[],
     metadata: parsedMetaData,
+    customInputs: parsedCustomInputs,
   };
 
   // backwards compat
@@ -517,7 +530,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   }
   const currentUser = eventType.users.find((u) => u.id === session.user.id);
   const t = await getTranslation(currentUser?.locale ?? "en", "common");
-  const integrations = getApps(credentials);
+  const integrations = await getEnabledApps(credentials);
   const locationOptions = getLocationOptions(integrations, t);
 
   const eventTypeObject = Object.assign({}, eventType, {
@@ -546,6 +559,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       team: eventTypeObject.team || null,
       teamMembers,
       currentUserMembership,
+      trpcState: ssr.dehydrate(),
     },
   };
 };

apps/web/pages/event-types/index.tsx

@@ -1,10 +1,11 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import Head from "next/head";
+import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { Fragment, useEffect, useState } from "react";
 
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import CreateEventTypeButton from "@calcom/features/eventtypes/components/CreateEventTypeButton";
+import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc, TRPCClientError } from "@calcom/trpc/react";
 import {
@@ -12,7 +13,6 @@ import {
   Button,
   ButtonGroup,
   ConfirmationDialogContent,
-  CreateEventTypeButton,
   Dialog,
   Dropdown,
   DropdownItem,
@@ -38,6 +38,8 @@ import SkeletonLoader from "@components/eventtype/SkeletonLoader";
 import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
 
+import { ssrInit } from "@server/lib/ssr";
+
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
 
@@ -440,7 +442,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 navigator
                                   .share({
                                     title: t("share"),
-                                    text: t("share_event"),
+                                    text: t("share_event", { appName: APP_NAME }),
                                     url: calLink,
                                   })
                                   .then(() => showToast(t("link_shared"), "success"))
@@ -531,9 +533,9 @@ const EventTypeListHeading = ({
         <Link href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}>
           <a className="font-bold">{profile?.name || ""}</a>
         </Link>
-        {membershipCount && (
+        {membershipCount && teamId && (
           <span className="relative -top-px text-xs text-neutral-500 ltr:ml-2 rtl:mr-2">
-            <Link href="/settings/teams">
+            <Link href={`/settings/teams/${teamId}/members`}>
               <a>
                 <Badge variant="gray">
                   <Icon.FiUsers className="mr-1 -mt-px inline h-3 w-3" />
@@ -579,12 +581,9 @@ const WithQuery = withQuery(trpc.viewer.eventTypes.getByViewer);
 
 const EventTypesPage = () => {
   const { t } = useLocale();
+
   return (
     <div>
-      <Head>
-        <title>Home | Cal.com</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <Shell
         heading={t("event_types_page_title") as string}
         subtitle={t("event_types_page_subtitle") as string}
@@ -622,4 +621,14 @@ const EventTypesPage = () => {
   );
 };
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default EventTypesPage;

apps/web/pages/getting-started/[[...step]].tsx

@@ -5,20 +5,20 @@ import { useRouter } from "next/router";
 import { z } from "zod";
 
 import { getSession } from "@calcom/lib/auth";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { Button, StepCard, Steps } from "@calcom/ui";
 
 import prisma from "@lib/prisma";
+import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
 import { SetupAvailability } from "@components/getting-started/steps-views/SetupAvailability";
 import UserProfile from "@components/getting-started/steps-views/UserProfile";
 import { UserSettings } from "@components/getting-started/steps-views/UserSettings";
 
-interface IOnboardingPageProps {
-  user: User;
-}
+export type IOnboardingPageProps = inferSSRProps<typeof getServerSideProps>;
 
 const INITIAL_STEP = "user-settings";
 const steps = ["user-settings", "connected-calendar", "setup-availability", "user-profile"] as const;
@@ -46,7 +46,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
 
   const headers = [
     {
-      title: `${t("welcome_to_cal_header")}`,
+      title: `${t("welcome_to_cal_header", { appName: APP_NAME })}`,
       subtitle: [`${t("we_just_need_basic_info")}`, `${t("edit_form_later_subtitle")}`],
     },
     {
@@ -86,7 +86,9 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
       data-testid="onboarding"
       key={router.asPath}>
       <Head>
-        <title>Cal.com - {t("getting_started")}</title>
+        <title>
+          {APP_NAME} - {t("getting_started")}
+        </title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -162,7 +164,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       weekStart: true,
       hideBranding: true,
       theme: true,
-      plan: true,
       brandColor: true,
       darkBrandColor: true,
       metadata: true,

apps/web/pages/reschedule/[uid].tsx

@@ -42,6 +42,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   if (!booking) {
     return {
       notFound: true,
+    } as {
+      notFound: true;
     };
   }
 
@@ -49,6 +51,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     // TODO: Show something in UI to let user know that this booking is not rescheduleable.
     return {
       notFound: true,
+    } as {
+      notFound: true;
     };
   }
 
@@ -62,7 +66,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       : booking.user?.username || "rick") /* This shouldn't happen */ +
     "/" +
     eventType?.slug;
-
   return {
     redirect: {
       destination: "/" + eventPage + "?rescheduleUid=" + context.query.uid,

apps/web/pages/reschedule/[uid]/embed.tsx

@@ -0,0 +1,7 @@
+import withEmbedSsr from "@lib/withEmbedSsr";
+
+import { getServerSideProps as _getServerSideProps } from "../[uid]";
+
+export { default } from "../[uid]";
+
+export const getServerSideProps = withEmbedSsr(_getServerSideProps);

apps/web/pages/settings/admin/apps.tsx

@@ -1,14 +0,0 @@
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
-
-function AdminAppsView() {
-  return (
-    <>
-      <Meta title="Apps" description="apps_description" />
-      <h1>App listing</h1>
-    </>
-  );
-}
-
-AdminAppsView.getLayout = getLayout;
-
-export default AdminAppsView;

apps/web/pages/settings/admin/apps/[category].tsx

@@ -0,0 +1,31 @@
+import { GetServerSidePropsContext } from "next";
+
+import AdminAppsList from "@calcom/features/apps/AdminAppsList";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+
+import { ssrInit } from "@server/lib/ssr";
+
+function AdminAppsView() {
+  const { t } = useLocale();
+  return (
+    <>
+      <Meta title={t("apps")} description={t("apps_description")} />
+      <AdminAppsList baseURL="/settings/admin/apps" className="w-0" />
+    </>
+  );
+}
+
+AdminAppsView.getLayout = getLayout;
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
+export default AdminAppsView;

apps/web/pages/settings/admin/impersonation.tsx

@@ -1,16 +1,19 @@
+import { GetServerSidePropsContext } from "next";
 import { signIn } from "next-auth/react";
 import { useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, getAdminLayout as getLayout, Meta, TextField } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 function AdminView() {
   const { t } = useLocale();
   const usernameRef = useRef<HTMLInputElement>(null);
 
   return (
     <>
-      <Meta title="Admin" description="Impersonation" />
+      <Meta title={t("admin")} description={t("impersonation")} />
       <form
         className="mb-6 w-full sm:w-1/2"
         onSubmit={(e) => {
@@ -21,7 +24,7 @@ function AdminView() {
         <div className="flex items-center space-x-2">
           <TextField
             containerClassName="w-full"
-            name="Impersonate User"
+            name={t("user_impersonation_heading")}
             addOnLeading={<>{process.env.NEXT_PUBLIC_WEBSITE_URL}/</>}
             ref={usernameRef}
             hint={t("impersonate_user_tip")}
@@ -36,4 +39,14 @@ function AdminView() {
 
 AdminView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default AdminView;

apps/web/pages/settings/admin/index.tsx

@@ -1,5 +1,9 @@
+import { GetServerSidePropsContext } from "next";
+
 import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 function AdminAppsView() {
   return (
     <>
@@ -11,4 +15,14 @@ function AdminAppsView() {
 
 AdminAppsView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default AdminAppsView;

apps/web/pages/settings/admin/users.tsx

@@ -1,14 +1,30 @@
+import { GetServerSidePropsContext } from "next";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 function AdminUsersView() {
+  const { t } = useLocale();
   return (
     <>
-      <Meta title="Users" description="users_description" />
-      <h1>Users listing</h1>
+      <Meta title={t("users")} description={t("users_description")} />
+      <h1>{t("users_listing")}</h1>
     </>
   );
 }
 
 AdminUsersView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default AdminUsersView;

apps/web/pages/settings/billing/index.tsx

@@ -1,3 +1,4 @@
+import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { HelpScout, useChat } from "react-live-chat-loader";
@@ -8,6 +9,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 interface CtaRowProps {
   title: string;
   description: string;
@@ -33,7 +36,6 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
 const BillingView = () => {
   const { t } = useLocale();
   const { data: user } = trpc.viewer.me.useQuery();
-  const isPro = user?.plan === "PRO";
   const [, loadChat] = useChat();
   const [showChat, setShowChat] = useState(false);
   const router = useRouter();
@@ -50,21 +52,16 @@ const BillingView = () => {
       <Meta title={t("billing")} description={t("manage_billing_description")} />
       <div className="space-y-6 text-sm sm:space-y-8">
         <CtaRow
-          className={classNames(!isPro && "pointer-events-none opacity-30")}
           title={t("billing_manage_details_title")}
           description={t("billing_manage_details_description")}>
-          <Button
-            color={isPro ? "primary" : "secondary"}
-            href={billingHref}
-            target="_blank"
-            EndIcon={Icon.FiExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon={Icon.FiExternalLink}>
             {t("billing_portal")}
           </Button>
         </CtaRow>
 
         <CtaRow title={t("billing_help_title")} description={t("billing_help_description")}>
           <Button color="secondary" onClick={onContactSupportClick}>
-            {t("billing_help_cta")}
+            {t("contact_support")}
           </Button>
         </CtaRow>
         {showChat && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
@@ -75,4 +72,14 @@ const BillingView = () => {
 
 BillingView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default BillingView;

apps/web/pages/settings/developer/api-keys.tsx

@@ -1,9 +1,11 @@
+import { GetServerSidePropsContext } from "next";
 import { useState } from "react";
 
 import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
 import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -17,6 +19,8 @@ import {
   SkeletonLoader,
 } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 const ApiKeysView = () => {
   const { t } = useLocale();
 
@@ -43,7 +47,10 @@ const ApiKeysView = () => {
 
   return (
     <>
-      <Meta title="API Keys" description="API keys allow other apps to communicate with Cal.com" />
+      <Meta
+        title={t("api_keys")}
+        description={t("create_first_api_key_description", { appName: APP_NAME })}
+      />
 
       <LicenseRequired>
         <>
@@ -70,7 +77,7 @@ const ApiKeysView = () => {
               <EmptyScreen
                 Icon={Icon.FiLink}
                 headline={t("create_first_api_key")}
-                description={t("create_first_api_key_description")}
+                description={t("create_first_api_key_description", { appName: APP_NAME })}
                 buttonRaw={<NewApiKeyButton />}
               />
             )}
@@ -89,4 +96,14 @@ const ApiKeysView = () => {
 
 ApiKeysView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default ApiKeysView;

apps/web/pages/settings/my-account/appearance.tsx

@@ -1,5 +1,8 @@
+import { GetServerSidePropsContext } from "next";
+import { useSession } from "next-auth/react";
 import { Controller, useForm } from "react-hook-form";
 
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -16,9 +19,12 @@ import {
   Switch,
 } from "@calcom/ui";
 
-const SkeletonLoader = () => {
+import { ssrInit } from "@server/lib/ssr";
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
+      <Meta title={title} description={description} />
       <div className="mt-6 mb-8 space-y-6 divide-y">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
@@ -40,7 +46,7 @@ const SkeletonLoader = () => {
 
 const AppearanceView = () => {
   const { t } = useLocale();
-
+  const session = useSession();
   const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
 
@@ -67,7 +73,7 @@ const AppearanceView = () => {
     },
   });
 
-  if (isLoading) return <SkeletonLoader />;
+  if (isLoading) return <SkeletonLoader title={t("appearance")} description={t("appearance_description")} />;
 
   if (!user) return null;
 
@@ -84,7 +90,7 @@ const AppearanceView = () => {
           theme: values.theme || null,
         });
       }}>
-      <Meta title="Appearance" description="Manage settings for your booking appearance" />
+      <Meta title={t("appearance")} description={t("appearance_description")} />
       <div className="mb-6 flex items-center text-sm">
         <div>
           <p className="font-semibold">{t("theme")}</p>
@@ -171,14 +177,15 @@ const AppearanceView = () => {
             <div className="flex w-full text-sm">
               <div className="mr-1 flex-grow">
                 <div className="flex items-center">
-                  <p className="mr-2 font-semibold">{t("disable_cal_branding")}</p>
+                  <p className="mr-2 font-semibold">{t("disable_cal_branding", { appName: APP_NAME })}</p>
                   <Badge variant="gray">{t("pro")}</Badge>
                 </div>
-                <p className="mt-0.5  text-gray-600">{t("removes_cal_branding")}</p>
+                <p className="mt-0.5  text-gray-600">{t("removes_cal_branding", { appName: APP_NAME })}</p>
               </div>
               <div className="flex-none">
                 <Switch
                   id="hideBranding"
+                  disabled={!session.data?.user.belongsToActiveTeam}
                   onCheckedChange={(checked) =>
                     formMethods.setValue("hideBranding", checked, { shouldDirty: true })
                   }
@@ -203,6 +210,16 @@ const AppearanceView = () => {
 
 AppearanceView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default AppearanceView;
 interface ThemeLabelProps {
   variant: "light" | "dark" | "system";

apps/web/pages/settings/my-account/calendars.tsx

@@ -1,8 +1,10 @@
+import { GetServerSidePropsContext } from "next";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
 
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -10,7 +12,6 @@ import {
   Alert,
   Badge,
   Button,
-  DisconnectIntegration,
   EmptyScreen,
   getSettingsLayout as getLayout,
   Icon,
@@ -22,12 +23,15 @@ import {
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
+  showToast,
 } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import { CalendarSwitch } from "@components/settings/CalendarSwitch";
 
+import { ssrInit } from "@server/lib/ssr";
+
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
@@ -66,15 +70,17 @@ const CalendarsView = () => {
     async onSettled() {
       await utils.viewer.connectedCalendars.invalidate();
     },
+    onSuccess: async () => {
+      showToast(t("calendar_updated_successfully"), "success");
+    },
+    onError: () => {
+      showToast(t("unexpected_error_try_again"), "error");
+    },
   });
 
   return (
     <>
-      <Meta
-        title="Calendars"
-        description="Configure how your event types interact with your calendars"
-        CTA={<AddCalendarButton />}
-      />
+      <Meta title={t("calendars")} description={t("calendars_description")} CTA={<AddCalendarButton />} />
       <QueryCell
         query={query}
         customLoader={<SkeletonLoader />}
@@ -110,7 +116,7 @@ const CalendarsView = () => {
                 {t("check_for_conflicts")}
               </h4>
               <p className="pb-2 text-sm leading-5 text-gray-600">{t("select_calendars")}</p>
-              <List>
+              <List className="flex flex-col gap-6" noBorderTreatment>
                 {data.connectedCalendars.map((item) => (
                   <Fragment key={item.credentialId}>
                     {item.error && item.error.message && (
@@ -137,8 +143,8 @@ const CalendarsView = () => {
                       />
                     )}
                     {item?.error === undefined && item.calendars && (
-                      <ListItem expanded className="flex-col">
-                        <div className="flex w-full flex-1 items-center space-x-3 pb-5 pl-1 pt-1 rtl:space-x-reverse">
+                      <ListItem className="flex-col rounded-md">
+                        <div className="flex w-full flex-1 items-center space-x-3 p-4 rtl:space-x-reverse">
                           {
                             // eslint-disable-next-line @next/next/no-img-element
                             item.integration.logo && (
@@ -164,7 +170,7 @@ const CalendarsView = () => {
                             <DisconnectIntegration
                               trashIcon
                               credentialId={item.credentialId}
-                              buttonProps={{ size: "icon", color: "secondary" }}
+                              buttonProps={{ className: "border border-gray-300" }}
                             />
                           </div>
                         </div>
@@ -172,7 +178,7 @@ const CalendarsView = () => {
                           <p className="px-2 pt-4 text-sm text-neutral-500">
                             {t("toggle_calendars_conflict")}
                           </p>
-                          <ul className="space-y-2 px-2 pt-4">
+                          <ul className="space-y-2 p-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
@@ -224,4 +230,14 @@ const CalendarsView = () => {
 
 CalendarsView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default CalendarsView;

apps/web/pages/settings/my-account/conferencing.tsx

@@ -1,3 +1,4 @@
+import { GetServerSidePropsContext } from "next";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -24,9 +25,12 @@ import {
   SkeletonText,
 } from "@calcom/ui";
 
-const SkeletonLoader = () => {
+import { ssrInit } from "@server/lib/ssr";
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
+      <Meta title={title} description={description} />
       <div className="mt-6 mb-8 space-y-6 divide-y">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -60,18 +64,19 @@ const ConferencingLayout = () => {
   const [deleteAppModal, setDeleteAppModal] = useState(false);
   const [deleteCredentialId, setDeleteCredentialId] = useState<number>(0);
 
-  if (isLoading) return <SkeletonLoader />;
+  if (isLoading)
+    return <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />;
 
   return (
     <div className="w-full bg-white sm:mx-0 xl:mt-0">
-      <Meta title="Conferencing" description="Add your favourite video conferencing apps for your meetings" />
+      <Meta title={t("conferencing")} description={t("conferencing_description")} />
       <List>
         {apps?.items &&
           apps.items
             .map((app) => ({ ...app, title: app.title || app.name }))
             .map((app) => (
               <ListItem className="flex-col border-0" key={app.title}>
-                <div className="flex w-full flex-1 items-center space-x-3 pl-1 pt-1 rtl:space-x-reverse">
+                <div className="flex w-full flex-1 items-center space-x-2 p-4 rtl:space-x-reverse">
                   {
                     // eslint-disable-next-line @next/next/no-img-element
                     app.logo && <img className="h-10 w-10" src={app.logo} alt={app.title} />
@@ -128,4 +133,14 @@ const ConferencingLayout = () => {
 
 ConferencingLayout.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default ConferencingLayout;

apps/web/pages/settings/my-account/general.tsx

@@ -1,3 +1,4 @@
+import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -21,9 +22,12 @@ import {
 import { withQuery } from "@lib/QueryCell";
 import { nameOfDay } from "@lib/core/i18n/weekday";
 
-const SkeletonLoader = () => {
+import { ssrInit } from "@server/lib/ssr";
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
+      <Meta title={title} description={description} />
       <div className="mt-6 mb-8 space-y-6 divide-y">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -47,14 +51,14 @@ const GeneralQueryView = () => {
   const { t } = useLocale();
 
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
-  if (isLoading) return <SkeletonLoader />;
+  if (isLoading) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
   if (!user) {
     throw new Error(t("something_went_wrong"));
   }
   return (
     <WithQuery
       success={({ data }) => <GeneralView user={user} localeProp={data.locale} />}
-      customLoader={<SkeletonLoader />}
+      customLoader={<SkeletonLoader title={t("general")} description={t("general_description")} />}
     />
   );
 };
@@ -127,7 +131,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
           weekStart: values.weekStart.value,
         });
       }}>
-      <Meta title="General" description="Manage settings for your language and timezone" />
+      <Meta title={t("general")} description={t("general_description")} />
       <Controller
         name="locale"
         render={({ field: { value, onChange } }) => (
@@ -210,4 +214,14 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
 
 GeneralQueryView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default GeneralQueryView;

apps/web/pages/settings/my-account/profile.tsx

@@ -1,10 +1,12 @@
 import { IdentityProvider } from "@prisma/client";
 import crypto from "crypto";
+import { GetServerSidePropsContext } from "next";
 import { signOut } from "next-auth/react";
-import { BaseSyntheticEvent, useEffect, useRef, useState } from "react";
+import { BaseSyntheticEvent, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
@@ -34,11 +36,14 @@ import {
 } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
-import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
-const SkeletonLoader = () => {
+import { ssrInit } from "@server/lib/ssr";
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
+      <Meta title={title} description={description} />
       <div className="mt-6 mb-8 space-y-6 divide-y">
         <div className="flex items-center">
           <SkeletonAvatar className=" h-12 w-12 px-4" />
@@ -58,14 +63,25 @@ interface DeleteAccountValues {
   totpCode: string;
 }
 
+type FormValues = {
+  username: string;
+  avatar: string;
+  name: string;
+  email: string;
+  bio: string;
+};
+
 const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: avatar, isLoading: isLoadingAvatar } = trpc.viewer.avatar.useQuery();
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: () => {
       showToast(t("settings_updated_successfully"), "success");
+      utils.viewer.me.invalidate();
+      utils.viewer.avatar.invalidate();
+      setTempFormValues(null);
     },
     onError: () => {
       showToast(t("error_updating_settings"), "error");
@@ -73,18 +89,14 @@ const ProfileView = () => {
   });
 
   const [confirmPasswordOpen, setConfirmPasswordOpen] = useState(false);
+  const [tempFormValues, setTempFormValues] = useState<FormValues | null>(null);
   const [confirmPasswordErrorMessage, setConfirmPasswordDeleteErrorMessage] = useState("");
+
   const [deleteAccountOpen, setDeleteAccountOpen] = useState(false);
   const [hasDeleteErrors, setHasDeleteErrors] = useState(false);
   const [deleteErrorMessage, setDeleteErrorMessage] = useState("");
-
   const form = useForm<DeleteAccountValues>();
 
-  const emailMd5 = crypto
-    .createHash("md5")
-    .update(user?.email || "example@example.com")
-    .digest("hex");
-
   const onDeleteMeSuccessMutation = async () => {
     await utils.viewer.me.invalidate();
     showToast(t("Your account was deleted"), "success");
@@ -99,7 +111,7 @@ const ProfileView = () => {
 
   const confirmPasswordMutation = trpc.viewer.auth.verifyPassword.useMutation({
     onSuccess() {
-      mutation.mutate(formMethods.getValues());
+      if (tempFormValues) mutation.mutate(tempFormValues);
       setConfirmPasswordOpen(false);
     },
     onError() {
@@ -145,6 +157,7 @@ const ProfileView = () => {
       deleteMeWithoutPasswordMutation.mutate();
     }
   };
+
   const onConfirm = ({ totpCode }: DeleteAccountValues, e: BaseSyntheticEvent | undefined) => {
     e?.preventDefault();
     if (isCALIdentityProviver) {
@@ -155,38 +168,6 @@ const ProfileView = () => {
     }
   };
 
-  const formMethods = useForm({
-    defaultValues: {
-      username: "",
-      avatar: "",
-      name: "",
-      email: "",
-      bio: "",
-    },
-  });
-
-  const {
-    reset,
-    formState: { isSubmitting, isDirty },
-  } = formMethods;
-
-  useEffect(() => {
-    if (user) {
-      reset(
-        {
-          avatar: user?.avatar || "",
-          username: user?.username || "",
-          name: user?.name || "",
-          email: user?.email || "",
-          bio: user?.bio || "",
-        },
-        {
-          keepDirtyValues: true,
-        }
-      );
-    }
-  }, [reset, user]);
-
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const passwordRef = useRef<HTMLInputElement>(null!);
 
@@ -198,143 +179,100 @@ const ProfileView = () => {
     [ErrorCode.InternalServerError]: `${t("something_went_wrong")} ${t("please_try_again_and_contact_us")}`,
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
-  const onSuccessfulUsernameUpdate = async () => {
-    showToast(t("settings_updated_successfully"), "success");
-    await utils.viewer.me.invalidate();
-  };
 
-  const onErrorInUsernameUpdate = () => {
-    showToast(t("error_updating_settings"), "error");
-  };
+  if (isLoading || !user || isLoadingAvatar || !avatar)
+    return <SkeletonLoader title={t("profile")} description={t("profile_description")} />;
 
-  if (isLoading || !user) return <SkeletonLoader />;
-  const isDisabled = isSubmitting || !isDirty;
+  const defaultValues = {
+    username: user.username || "",
+    avatar: avatar.avatar || "",
+    name: user.name || "",
+    email: user.email || "",
+    bio: user.bio || "",
+  };
 
   return (
     <>
-      <Form
-        form={formMethods}
-        handleSubmit={(values) => {
-          if (values.email !== user?.email && isCALIdentityProviver) {
+      <Meta title={t("profile")} description={t("profile_description", { appName: APP_NAME })} />
+      <ProfileForm
+        key={JSON.stringify(defaultValues)}
+        defaultValues={defaultValues}
+        onSubmit={(values) => {
+          if (values.email !== user.email && isCALIdentityProviver) {
+            setTempFormValues(values);
             setConfirmPasswordOpen(true);
           } else {
             mutation.mutate(values);
           }
-        }}>
-        <Meta title="Profile" description="Manage settings for your cal profile" />
-        <div className="flex items-center">
-          <Controller
-            control={formMethods.control}
-            name="avatar"
-            render={({ field: { value } }) => (
-              <>
-                <Avatar alt="" imageSrc={value} gravatarFallbackMd5={emailMd5} size="lg" />
-                <div className="ml-4">
-                  <ImageUploader
-                    target="avatar"
-                    id="avatar-upload"
-                    buttonMsg={t("change_avatar")}
-                    handleAvatarChange={(newAvatar) => {
-                      formMethods.setValue("avatar", newAvatar);
-                    }}
-                    imageSrc={value}
-                  />
-                </div>
-              </>
+        }}
+        extraField={
+          <div className="mt-8">
+            <UsernameAvailabilityField
+              user={user}
+              onSuccessMutation={async () => {
+                showToast(t("settings_updated_successfully"), "success");
+                await utils.viewer.me.invalidate();
+              }}
+              onErrorMutation={() => {
+                showToast(t("error_updating_settings"), "error");
+              }}
+            />
+          </div>
+        }
+      />
+
+      <hr className="my-6  border-neutral-200" />
+
+      <Label>{t("danger_zone")}</Label>
+      {/* Delete account Dialog */}
+      <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
+        <DialogTrigger asChild>
+          <Button
+            data-testid="delete-account"
+            color="destructive"
+            className="mt-1 border-2"
+            StartIcon={Icon.FiTrash2}>
+            {t("delete_account")}
+          </Button>
+        </DialogTrigger>
+        <DialogContent
+          title={t("delete_account_modal_title")}
+          description={t("confirm_delete_account_modal", { appName: APP_NAME })}
+          type="creation"
+          Icon={Icon.FiAlertTriangle}>
+          <>
+            <p className="mb-7">{t("delete_account_confirmation_message", { appName: APP_NAME })}</p>
+            {isCALIdentityProviver && (
+              <PasswordField
+                data-testid="password"
+                name="password"
+                id="password"
+                autoComplete="current-password"
+                required
+                label="Password"
+                ref={passwordRef}
+              />
             )}
-          />
-        </div>
-        <div className="mt-8">
-          <Controller
-            control={formMethods.control}
-            name="username"
-            render={({ field: { ref, onChange, value } }) => {
-              return (
-                <UsernameAvailability
-                  currentUsername={user?.username || ""}
-                  inputUsernameValue={value}
-                  usernameRef={ref}
-                  setInputUsernameValue={onChange}
-                  onSuccessMutation={onSuccessfulUsernameUpdate}
-                  onErrorMutation={onErrorInUsernameUpdate}
-                  user={user}
-                />
-              );
-            }}
-          />
-        </div>
-        <div className="mt-8">
-          <TextField label={t("full_name")} {...formMethods.register("name")} />
-        </div>
-        <div className="mt-8">
-          <TextField label={t("email")} hint={t("change_email_hint")} {...formMethods.register("email")} />
-        </div>
-        <div className="mt-8">
-          <TextField label={t("about")} hint={t("bio_hint")} {...formMethods.register("bio")} />
-        </div>
 
-        <Button
-          disabled={isDisabled}
-          color="primary"
-          className="mt-8"
-          type="submit"
-          loading={mutation.isLoading}>
-          {t("update")}
-        </Button>
+            {user?.twoFactorEnabled && isCALIdentityProviver && (
+              <Form handleSubmit={onConfirm} className="pb-4" form={form}>
+                <TwoFactor center={false} />
+              </Form>
+            )}
 
-        <hr className="my-6  border-neutral-200" />
-
-        <Label>{t("danger_zone")}</Label>
-        {/* Delete account Dialog */}
-        <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
-          <DialogTrigger asChild>
-            <Button
-              data-testid="delete-account"
-              color="destructive"
-              className="mt-1 border-2"
-              StartIcon={Icon.FiTrash2}>
-              {t("delete_account")}
-            </Button>
-          </DialogTrigger>
-          <DialogContent
-            title={t("delete_account_modal_title")}
-            description={t("confirm_delete_account_modal")}
-            type="creation"
-            Icon={Icon.FiAlertTriangle}>
-            <>
-              <p className="mb-7">{t("delete_account_confirmation_message")}</p>
-              {isCALIdentityProviver && (
-                <PasswordField
-                  data-testid="password"
-                  name="password"
-                  id="password"
-                  autoComplete="current-password"
-                  required
-                  label="Password"
-                  ref={passwordRef}
-                />
-              )}
-
-              {user?.twoFactorEnabled && isCALIdentityProviver && (
-                <Form handleSubmit={onConfirm} className="pb-4" form={form}>
-                  <TwoFactor center={false} />
-                </Form>
-              )}
-
-              {hasDeleteErrors && <Alert severity="error" title={deleteErrorMessage} />}
-              <DialogFooter>
-                <Button
-                  color="primary"
-                  data-testid="delete-account-confirm"
-                  onClick={(e) => onConfirmButton(e)}>
-                  {t("delete_my_account")}
-                </Button>
-                <DialogClose />
-              </DialogFooter>
-            </>
-          </DialogContent>
-        </Dialog>
-      </Form>
+            {hasDeleteErrors && <Alert severity="error" title={deleteErrorMessage} />}
+            <DialogFooter>
+              <Button
+                color="primary"
+                data-testid="delete-account-confirm"
+                onClick={(e) => onConfirmButton(e)}>
+                {t("delete_my_account")}
+              </Button>
+              <DialogClose />
+            </DialogFooter>
+          </>
+        </DialogContent>
+      </Dialog>
 
       {/* If changing email, confirm password */}
       <Dialog open={confirmPasswordOpen} onOpenChange={setConfirmPasswordOpen}>
@@ -368,6 +306,83 @@ const ProfileView = () => {
   );
 };
 
+const ProfileForm = ({
+  defaultValues,
+  onSubmit,
+  extraField,
+}: {
+  defaultValues: FormValues;
+  onSubmit: (values: FormValues) => void;
+  extraField?: React.ReactNode;
+}) => {
+  const { t } = useLocale();
+  const emailMd5 = crypto
+    .createHash("md5")
+    .update(defaultValues.email || "example@example.com")
+    .digest("hex");
+
+  const formMethods = useForm<FormValues>({
+    defaultValues,
+  });
+
+  const {
+    formState: { isSubmitting, isDirty },
+  } = formMethods;
+
+  const isDisabled = isSubmitting || !isDirty;
+
+  return (
+    <Form form={formMethods} handleSubmit={onSubmit}>
+      <div className="flex items-center">
+        <Controller
+          control={formMethods.control}
+          name="avatar"
+          render={({ field: { value } }) => (
+            <>
+              <Avatar alt="" imageSrc={value} gravatarFallbackMd5={emailMd5} size="lg" />
+              <div className="ml-4">
+                <ImageUploader
+                  target="avatar"
+                  id="avatar-upload"
+                  buttonMsg={t("change_avatar")}
+                  handleAvatarChange={(newAvatar) => {
+                    formMethods.setValue("avatar", newAvatar, { shouldDirty: true });
+                  }}
+                  imageSrc={value || undefined}
+                />
+              </div>
+            </>
+          )}
+        />
+      </div>
+      {extraField}
+      <div className="mt-8">
+        <TextField label={t("full_name")} {...formMethods.register("name")} />
+      </div>
+      <div className="mt-8">
+        <TextField label={t("email")} hint={t("change_email_hint")} {...formMethods.register("email")} />
+      </div>
+      <div className="mt-8">
+        <TextField label={t("about")} hint={t("bio_hint")} {...formMethods.register("bio")} />
+      </div>
+
+      <Button disabled={isDisabled} color="primary" className="mt-8" type="submit">
+        {t("update")}
+      </Button>
+    </Form>
+  );
+};
+
 ProfileView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default ProfileView;

apps/web/pages/settings/security/impersonation.tsx

@@ -1,3 +1,4 @@
+import { GetServerSidePropsContext } from "next";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -13,6 +14,8 @@ import {
   Switch,
 } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 const ProfileImpersonationView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
@@ -39,7 +42,7 @@ const ProfileImpersonationView = () => {
 
   return (
     <>
-      <Meta title="Impersonation Settings" description="" />
+      <Meta title={t("impersonation")} description={t("impersonation_description")} />
       <Form
         form={formMethods}
         handleSubmit={({ disableImpersonation }) => {
@@ -74,4 +77,14 @@ const ProfileImpersonationView = () => {
 
 ProfileImpersonationView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default ProfileImpersonationView;

apps/web/pages/settings/security/password.tsx

@@ -1,4 +1,5 @@
 import { IdentityProvider } from "@prisma/client";
+import { GetServerSidePropsContext } from "next";
 import { Trans } from "next-i18next";
 import { useForm } from "react-hook-form";
 
@@ -7,6 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Form, getSettingsLayout as getLayout, Meta, PasswordField, showToast } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 type ChangePasswordFormValues = {
   oldPassword: string;
   newPassword: string;
@@ -92,4 +95,14 @@ const PasswordView = () => {
 
 PasswordView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default PasswordView;

apps/web/pages/settings/security/sso.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/sso/page/user-sso-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/security/two-factor-auth.tsx

@@ -1,12 +1,37 @@
+import { GetServerSidePropsContext } from "next";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, getSettingsLayout as getLayout, Loader, Meta, Switch } from "@calcom/ui";
+import {
+  Badge,
+  getSettingsLayout as getLayout,
+  Meta,
+  Switch,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 
 import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 
+import { ssrInit } from "@server/lib/ssr";
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+  return (
+    <SkeletonContainer>
+      <Meta title={title} description={description} />
+      <div className="mt-6 mb-8 space-y-6 divide-y">
+        <div className="flex items-center">
+          <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+          <SkeletonText className="h-8 w-full" />
+        </div>
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 const TwoFactorAuthView = () => {
   const utils = trpc.useContext();
 
@@ -16,11 +41,11 @@ const TwoFactorAuthView = () => {
   const [enableModalOpen, setEnableModalOpen] = useState(false);
   const [disableModalOpen, setDisableModalOpen] = useState(false);
 
-  if (isLoading) return <Loader />;
+  if (isLoading) return <SkeletonLoader title={t("2fa")} description={t("2fa_description")} />;
 
   return (
     <>
-      <Meta title="Two-Factor Authentication" description="Manage settings for your account passwords" />
+      <Meta title={t("2fa")} description={t("2fa_description")} />
       <div className="mt-6 flex items-start space-x-4">
         <Switch
           checked={user?.twoFactorEnabled}
@@ -35,7 +60,7 @@ const TwoFactorAuthView = () => {
               {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p className="text-sm text-gray-600">Add an extra layer of security to your account.</p>
+          <p className="text-sm text-gray-600">{t("add_an_extra_layer_of_security")}</p>
         </div>
       </div>
 
@@ -68,4 +93,14 @@ const TwoFactorAuthView = () => {
 
 TwoFactorAuthView.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default TwoFactorAuthView;

apps/web/pages/settings/teams/[id]/appearance.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/teams/pages/team-appearance-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/teams/[id]/billing.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/teams/pages/team-billing-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/teams/[id]/members.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/teams/pages/team-members-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/teams/[id]/profile.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/teams/pages/team-profile-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/teams/[id]/sso.tsx

@@ -1 +1,15 @@
+import { GetServerSidePropsContext } from "next";
+
+import { ssrInit } from "@server/lib/ssr";
+
 export { default } from "@calcom/features/ee/sso/page/teams-sso-view";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};

apps/web/pages/settings/teams/new/index.tsx

@@ -1,14 +1,19 @@
+import { GetServerSidePropsContext } from "next";
 import Head from "next/head";
 
 import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getWizardLayout as getLayout } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 const CreateNewTeamPage = () => {
+  const { t } = useLocale();
   return (
     <>
       <Head>
-        <title>Create a new Team</title>
-        <meta name="description" content="Create a new team to ease your organisational booking" />
+        <title>{t("create_new_team")}</title>
+        <meta name="description" content={t("create_new_team_description")} />
       </Head>
       <CreateANewTeamForm />
     </>
@@ -17,4 +22,14 @@ const CreateNewTeamPage = () => {
 
 CreateNewTeamPage.getLayout = getLayout;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default CreateNewTeamPage;

apps/web/pages/team/[slug].tsx

@@ -1,4 +1,3 @@
-import { UserPlan } from "@prisma/client";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
@@ -14,7 +13,6 @@ import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { Avatar, Button, EventTypeDescription, Icon } from "@calcom/ui";
 
-import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -27,7 +25,6 @@ function TeamPage({ team }: TeamPageProps) {
   useTheme();
   const showMembers = useToggleQuery("members");
   const { t } = useLocale();
-  useExposePlanGlobally("PRO");
   const isEmbed = useIsEmbed();
   const telemetry = useTelemetry();
   const router = useRouter();
@@ -137,10 +134,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   if (!team) return { notFound: true } as { notFound: true };
 
-  const members = team.members.filter((member) => member.plan !== UserPlan.FREE);
-
-  team.members = members ?? [];
-
   team.eventTypes = team.eventTypes.map((type) => ({
     ...type,
     users: type.users.map((user) => ({

apps/web/pages/team/[slug]/[type].tsx

@@ -1,4 +1,3 @@
-import { UserPlan } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 
 import { privacyFilteredLocations, LocationObject } from "@calcom/core/location";
@@ -43,6 +42,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       name: true,
       slug: true,
       logo: true,
+      hideBranding: true,
       eventTypes: {
         where: {
           slug: typeParam,
@@ -59,7 +59,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
               username: true,
               timeZone: true,
               hideBranding: true,
-              plan: true,
               brandColor: true,
               darkBrandColor: true,
             },
@@ -129,7 +128,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       name: user.name,
       username: user.username,
       hideBranding: user.hideBranding,
-      plan: user.plan,
       timeZone: user.timeZone,
     })),
   });
@@ -143,8 +141,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   return {
     props: {
-      // Team is always pro
-      plan: "PRO" as UserPlan,
       profile: {
         name: team.name || team.slug,
         slug: team.slug,
@@ -160,6 +156,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       previousPage: context.req.headers.referer ?? null,
       booking,
       trpcState: ssg.dehydrate(),
+      isBrandingHidden: team.hideBranding,
     },
   };
 };

apps/web/pages/team/[slug]/book.tsx

@@ -4,7 +4,7 @@ import { JSONObject } from "superjson/dist/types";
 import { LocationObject, privacyFilteredLocations } from "@calcom/app-store/locations";
 import { parseRecurringEvent } from "@calcom/lib";
 import prisma from "@calcom/prisma";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
 import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import getBooking, { GetBookingType } from "@lib/getBooking";
@@ -96,6 +96,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
       periodStartDate: e.periodStartDate?.toString() ?? null,
       periodEndDate: e.periodEndDate?.toString() ?? null,
+      customInputs: customInputSchema.array().parse(e.customInputs || []),
       users: eventType.users.map((u) => ({
         id: u.id,
         name: u.name,

apps/web/pages/teams/index.tsx

@@ -1,8 +1,12 @@
+import { GetServerSidePropsContext } from "next";
+
 import { TeamsListing } from "@calcom/features/ee/teams/components";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Icon, Shell } from "@calcom/ui";
 
+import { ssrInit } from "@server/lib/ssr";
+
 function Teams() {
   const { t } = useLocale();
   return (
@@ -22,4 +26,14 @@ function Teams() {
 
 Teams.requiresLicense = false;
 
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+
+  return {
+    props: {
+      trpcState: ssr.dehydrate(),
+    },
+  };
+};
+
 export default Teams;