Merge branch 'main' into teste2e-checkboxQuestion

.husky/.gitignore

@@ -1 +0,0 @@
-_

CONTRIBUTING.md

@@ -92,7 +92,22 @@ To develop locally:
    - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
    - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
 
-6. Start developing and watch for code changes:
+6. Setup Node
+   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
+
+   ```sh
+   nvm use
+   ```
+
+   You first might need to install the specific version and then use it:
+
+   ```sh
+   nvm install && nvm use
+   ```
+
+   You can install nvm from [here](https://github.com/nvm-sh/nvm).
+
+7. Start developing and watch for code changes:
 
    ```sh
    yarn dev
@@ -120,6 +135,16 @@ This will run and test all flows in multiple Chromium windows to verify that no
 yarn test-e2e
 ```
 
+#### Resolving issues
+
+##### E2E test browsers not installed
+
+Run `npx playwright install` to download test browsers and resolve the error below when running `yarn test-e2e`:
+
+```
+Executable doesn't exist at /Users/alice/Library/Caches/ms-playwright/chromium-1048/chrome-mac/Chromium.app/Contents/MacOS/Chromium
+```
+
 ## Linting
 
 To check the formatting of your code:
@@ -135,4 +160,4 @@ If you get errors, be sure to fix them before committing.
 - Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating your PR.
 - If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.
-- Review [App Contribution Guidelines](./packages/app-store/CONTRIBUTING.md) when building integrations
+- Review [App Contribution Guidelines](./packages/app-store/CONTRIBUTING.md) when building integrations

README.md

@@ -131,23 +131,39 @@ Here is what you need to be able to run Cal.com.
    > If you are on Windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
    > See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.
 
-1. Go to the project folder
+2. Go to the project folder
 
    ```sh
    cd cal.com
    ```
 
-1. Install packages with yarn
+3. Install packages with yarn
 
    ```sh
    yarn
    ```
 
-1. Set up your `.env` file
+4. Set up your `.env` file
+
    - Duplicate `.env.example` to `.env`
    - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
    - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
 
+5. Setup Node
+   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
+
+   ```sh
+   nvm use
+   ```
+
+   You first might need to install the specific version and then use it:
+
+   ```sh
+   nvm install && nvm use
+   ```
+
+   You can install nvm from [here](https://github.com/nvm-sh/nvm).
+
 #### Quick start with `yarn dx`
 
 > - **Requires Docker and Docker Compose to be installed**
@@ -221,6 +237,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
 
 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+
    > **_NOTE:_** Required when `E2E_TEST_MAILHOG_ENABLED` is "1"
 
    ```sh
@@ -259,6 +276,16 @@ yarn test-e2e
 yarn playwright show-report test-results/reports/playwright-html-report
 ```
 
+#### Resolving issues
+
+##### E2E test browsers not installed
+
+Run `npx playwright install` to download test browsers and resolve the error below when running `yarn test-e2e`:
+
+```
+Executable doesn't exist at /Users/alice/Library/Caches/ms-playwright/chromium-1048/chrome-mac/Chromium.app/Contents/MacOS/Chromium
+```
+
 ### Upgrading from earlier versions
 
 1. Pull the current version:
@@ -470,9 +497,8 @@ following
 4. Select Basecamp 4 as the product to integrate with.
 5. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/basecamp3/callback` replacing Cal.com URL with the URI at which your application runs.
 6. Click on done and copy the Client ID and secret into the `BASECAMP3_CLIENT_ID` and `BASECAMP3_CLIENT_SECRET` fields.
-7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`. 
-For example, `Cal.com (support@cal.com)`.
-
+7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`.
+   For example, `Cal.com (support@cal.com)`.
 
 ### Obtaining HubSpot Client ID and Secret
 
@@ -507,6 +533,7 @@ For example, `Cal.com (support@cal.com)`.
 ### Obtaining Zoho Calendar Client ID and Secret
 
 [Follow these steps](./packages/app-store/zohocalendar/)
+
 ### Obtaining Zoho Bigin Client ID and Secret
 
 [Follow these steps](./packages/app-store/zoho-bigin/)

apps/ai/README.md

@@ -1,12 +1,12 @@
 # Cal.com Email Assistant
 
-Welcome to the first stage of Cal AI!
+Welcome to the first stage of Cal.ai!
 
 This app lets you chat with your calendar via email:
 
-  - Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
-  - List and rearrange your bookings eg. "Cancel my next meeting"
-  - Answer basic questions about your busiest times eg. "How does my Tuesday look?"
+- Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
+- List and rearrange your bookings eg. "Cancel my next meeting"
+- Answer basic questions about your busiest times eg. "How does my Tuesday look?"
 
 The core logic is contained in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts). Here, a [LangChain Agent Executor](https://docs.langchain.com/docs/components/agents/agent-executor) is tasked with following your instructions. Given your last-known timezone, working hours, and busy times, it attempts to CRUD your bookings.
 
@@ -24,10 +24,10 @@ If you haven't yet, please run the [root setup](/README.md) steps.
 
 Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. You'll need:
 
-  - An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
-  - A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
-  - A default sender email (for example, `ai@cal.dev`)
-  - The Cal AI's app ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+- An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
+- A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
+- A default sender email (for example, `ai@cal.dev`)
+- The Cal.ai's app ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
 
 To stand up the API and AI apps simultaneously, simply run `yarn dev:ai`.
 

apps/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/ai",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "author": "Cal.com Inc.",
   "dependencies": {

apps/ai/src/app/api/receive/route.ts

@@ -61,9 +61,9 @@ export const POST = async (request: NextRequest) => {
   // User is not a cal.com user or is using an unverified email.
   if (!signature || !user) {
     await sendEmail({
-      html: `Thanks for your interest in Cal AI! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address.`,
+      html: `Thanks for your interest in Cal.ai! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address.`,
       subject: `Re: ${body.subject}`,
-      text: `Thanks for your interest in Cal AI! To get started, Make sure you have a cal.com account with this email address. You can sign up for an account at: https://cal.com/signup`,
+      text: `Thanks for your interest in Cal.ai! To get started, Make sure you have a cal.com account with this email address. You can sign up for an account at: https://cal.com/signup`,
       to: envelope.from,
       from: aiEmail,
     });
@@ -78,9 +78,9 @@ export const POST = async (request: NextRequest) => {
     const url = env.APP_URL;
 
     await sendEmail({
-      html: `Thanks for using Cal AI! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
+      html: `Thanks for using Cal.ai! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
       subject: `Re: ${body.subject}`,
-      text: `Thanks for using Cal AI! To get started, the app must be installed. Click this link to install the Cal AI app: ${url}`,
+      text: `Thanks for using Cal.ai! To get started, the app must be installed. Click this link to install the Cal.ai app: ${url}`,
       to: envelope.from,
       from: aiEmail,
     });

apps/ai/src/utils/agent.ts

@@ -16,7 +16,7 @@ import now from "./now";
 const gptModel = "gpt-4";
 
 /**
- * Core of the Cal AI booking agent: a LangChain Agent Executor.
+ * Core of the Cal.ai booking agent: a LangChain Agent Executor.
  * Uses a toolchain to book meetings, list available slots, etc.
  * Uses OpenAI functions to better enforce JSON-parsable output from the LLM.
  */
@@ -49,7 +49,7 @@ const agent = async (
    */
   const executor = await initializeAgentExecutorWithOptions(tools, model, {
     agentArgs: {
-      prefix: `You are Cal AI - a bleeding edge scheduling assistant that interfaces via email.
+      prefix: `You are Cal.ai - a bleeding edge scheduling assistant that interfaces via email.
 Make sure your final answers are definitive, complete and well formatted.
 Sometimes, tools return errors. In this case, try to handle the error intelligently or ask the user for more information.
 Tools will always handle times in UTC, but times sent to users should be formatted per that user's timezone.
@@ -74,18 +74,19 @@ ${
     ? `The email references the following @usernames and emails: ${users
         .map(
           (u) =>
-            (u.id ? `, id: ${u.id}` : "id: (non user)") +
-            (u.username
-              ? u.type === "fromUsername"
-                ? `, username: @${u.username}`
-                : ", username: REDACTED"
-              : ", (no username)") +
-            (u.email
-              ? u.type === "fromEmail"
-                ? `, email: ${u.email}`
-                : ", email: REDACTED"
-              : ", (no email)") +
-            ";"
+            `${
+              (u.id ? `, id: ${u.id}` : "id: (non user)") +
+              (u.username
+                ? u.type === "fromUsername"
+                  ? `, username: @${u.username}`
+                  : ", username: REDACTED"
+                : ", (no username)") +
+              (u.email
+                ? u.type === "fromEmail"
+                  ? `, email: ${u.email}`
+                  : ", email: REDACTED"
+                : ", (no email)")
+            };`
         )
         .join("\n")}`
     : ""

apps/ai/src/utils/extractUsers.ts

@@ -1,8 +1,10 @@
+import prisma from "@calcom/prisma";
+
+import type { UserList } from "../types/user";
+
 /*
  * Extracts usernames (@Example) and emails (hi@example.com) from a string
  */
-import type { UserList } from "../types/user";
-
 export const extractUsers = async (text: string) => {
   const usernames = text.match(/(?<![a-zA-Z0-9_.])@[a-zA-Z0-9_]+/g)?.map((username) => username.slice(1));
   const emails = text.match(/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+/g);

apps/ai/src/utils/sendEmail.ts

@@ -27,7 +27,7 @@ const send = async ({
     cc,
     from: {
       email: from,
-      name: "Cal AI",
+      name: "Cal.ai",
     },
     text,
     html,

apps/api/test/lib/bookings/_post.test.ts

@@ -1,3 +1,5 @@
+import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
+
 import type { Request, Response } from "express";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createMocks } from "node-mocks-http";
@@ -8,7 +10,6 @@ import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
 import { buildBooking, buildEventType, buildWebhook } from "@calcom/lib/test/builder";
 import prisma from "@calcom/prisma";
 
-import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
 import handler from "../../../pages/api/bookings/_post";
 
 type CustomNextApiRequest = NextApiRequest & Request;

apps/web/components/AppListCard.tsx

@@ -79,8 +79,8 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
-      <div className="flex items-center gap-x-3 px-5 py-4">
+    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>
+      <div className="flex items-center gap-x-3 px-4 py-4 sm:px-6">
         {logo ? (
           <img
             className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}

apps/web/components/apps/AppList.tsx

@@ -29,9 +29,10 @@ interface AppListProps {
   variant?: AppCategories;
   data: RouterOutputs["viewer"]["integrations"];
   handleDisconnect: (credentialId: number) => void;
+  listClassName?: string;
 }
 
-export const AppList = ({ data, handleDisconnect, variant }: AppListProps) => {
+export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppListProps) => {
   const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
   const utils = trpc.useContext();
   const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
@@ -155,7 +156,7 @@ export const AppList = ({ data, handleDisconnect, variant }: AppListProps) => {
   const { t } = useLocale();
   return (
     <>
-      <List>
+      <List className={listClassName}>
         {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
         {data.items
           .filter((item) => item.invalidCredentialIds)

apps/web/components/apps/AppPage.tsx

@@ -89,6 +89,7 @@ export const AppPage = ({
 
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
   const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+
   const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
     { appType: type },
     {
@@ -264,8 +265,8 @@ export const AppPage = ({
 
         {price !== 0 && (
           <span className="block text-right">
-            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-            {feeType === "monthly" && "/" + t("month")}
+            {feeType === "usage-based" ? `${commission}% + ${priceInDollar}/booking` : priceInDollar}
+            {feeType === "monthly" && `/${t("month")}`}
           </span>
         )}
 
@@ -285,7 +286,7 @@ export const AppPage = ({
                 currency: "USD",
                 useGrouping: false,
               }).format(price)}
-              {feeType === "monthly" && "/" + t("month")}
+              {feeType === "monthly" && `/${t("month")}`}
             </>
           )}
         </span>
@@ -322,7 +323,7 @@ export const AppPage = ({
                 target="_blank"
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
-                href={"mailto:" + email}>
+                href={`mailto:${email}`}>
                 <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
 
                 {email}

apps/web/components/apps/CalendarListContainer.tsx

@@ -130,7 +130,7 @@ function ConnectedCalendarsList(props: Props) {
                     title={t("something_went_wrong")}
                     message={
                       <span>
-                        <Link href={"/apps/" + item.integration.slug}>{item.integration.name}</Link>:{" "}
+                        <Link href={`/apps/${item.integration.slug}`}>{item.integration.name}</Link>:{" "}
                         {t("calendar_error")}
                       </span>
                     }

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -76,6 +76,7 @@ export const InstallAppButtonChild = ({
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent
+          className="w-auto"
           onInteractOutside={(event) => {
             if (mutation.isLoading) event.preventDefault();
           }}>
@@ -94,6 +95,7 @@ export const InstallAppButtonChild = ({
 
             return (
               <DropdownItem
+                className="flex"
                 type="button"
                 data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
                 key={team.id}

apps/web/components/booking/BookingListItem.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { useState } from "react";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
@@ -58,7 +58,6 @@ function BookingListItem(booking: BookingItemProps) {
     i18n: { language },
   } = useLocale();
   const utils = trpc.useContext();
-  const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
@@ -74,10 +73,8 @@ function BookingListItem(booking: BookingItemProps) {
       }
       utils.viewer.bookings.invalidate();
     },
-    onError: (e) => {
-      let message = t("booking_confirmation_failed");
-      if ("message" in e) message = e.message;
-      showToast(message, "error");
+    onError: () => {
+      showToast(t("booking_confirmation_failed"), "error");
       utils.viewer.bookings.invalidate();
     },
   });
@@ -261,14 +258,16 @@ function BookingListItem(booking: BookingItemProps) {
     .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING])
     .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
 
-  const onClickTableData = () => {
+  const buildBookingLink = () => {
     const urlSearchParams = new URLSearchParams({
       allRemainingBookings: isTabRecurring.toString(),
     });
     if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
-    router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`);
+    return `/booking/${booking.uid}?${urlSearchParams.toString()}`;
   };
 
+  const bookingLink = buildBookingLink();
+
   const title = booking.title;
   // To be used after we run query on legacy bookings
   // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
@@ -339,54 +338,11 @@ function BookingListItem(booking: BookingItemProps) {
       </Dialog>
 
       <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
-        <td
-          className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
-          onClick={onClickTableData}>
-          <div className="cursor-pointer py-4">
-            <div className="text-emphasis text-sm leading-6">{startTime}</div>
-            <div className="text-subtle text-sm">
-              {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-              {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
-              <MeetingTimeInTimezones
-                timeFormat={user?.timeFormat}
-                userTimezone={user?.timeZone}
-                startTime={booking.startTime}
-                endTime={booking.endTime}
-                attendees={booking.attendees}
-              />
-            </div>
-            {isPending && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                {t("unconfirmed")}
-              </Badge>
-            )}
-            {booking.eventType?.team && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
-                {booking.eventType.team.name}
-              </Badge>
-            )}
-            {booking.paid && !booking.payment[0] ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                {t("error_collecting_card")}
-              </Badge>
-            ) : booking.paid ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
-                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
-              </Badge>
-            ) : null}
-            {recurringDates !== undefined && (
-              <div className="text-muted mt-2 text-sm">
-                <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
-              </div>
-            )}
-          </div>
-        </td>
-        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}>
-          {/* Time and Badges for mobile */}
-          <div className="w-full pb-2 pt-4 sm:hidden">
-            <div className="flex w-full items-center justify-between sm:hidden">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
+          <Link href={bookingLink}>
+            <div className="cursor-pointer py-4">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
-              <div className="text-subtle pr-2 text-sm">
+              <div className="text-subtle text-sm">
                 {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
                 {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
                 <MeetingTimeInTimezones
@@ -397,66 +353,111 @@ function BookingListItem(booking: BookingItemProps) {
                   attendees={booking.attendees}
                 />
               </div>
+              {isPending && (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                  {t("unconfirmed")}
+                </Badge>
+              )}
+              {booking.eventType?.team && (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+                  {booking.eventType.team.name}
+                </Badge>
+              )}
+              {booking.paid && !booking.payment[0] ? (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                  {t("error_collecting_card")}
+                </Badge>
+              ) : booking.paid ? (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
+                  {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
+                </Badge>
+              ) : null}
+              {recurringDates !== undefined && (
+                <div className="text-muted mt-2 text-sm">
+                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                </div>
+              )}
             </div>
-
-            {isPending && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
-                {t("unconfirmed")}
-              </Badge>
-            )}
-            {booking.eventType?.team && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
-                {booking.eventType.team.name}
-              </Badge>
-            )}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
-                {t("pending_payment")}
-              </Badge>
-            )}
-            {recurringDates !== undefined && (
-              <div className="text-muted text-sm sm:hidden">
-                <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+          </Link>
+        </td>
+        <td className={`w-full px-4${isRejected ? " line-through" : ""}`}>
+          <Link href={bookingLink}>
+            {/* Time and Badges for mobile */}
+            <div className="w-full pb-2 pt-4 sm:hidden">
+              <div className="flex w-full items-center justify-between sm:hidden">
+                <div className="text-emphasis text-sm leading-6">{startTime}</div>
+                <div className="text-subtle pr-2 text-sm">
+                  {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
+                  {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                  <MeetingTimeInTimezones
+                    timeFormat={user?.timeFormat}
+                    userTimezone={user?.timeZone}
+                    startTime={booking.startTime}
+                    endTime={booking.endTime}
+                    attendees={booking.attendees}
+                  />
+                </div>
               </div>
-            )}
-          </div>
 
-          <div className="cursor-pointer py-4">
-            <div
-              title={title}
-              className={classNames(
-                "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
-                isCancelled ? "line-through" : ""
-              )}>
-              {title}
-              <span> </span>
-
-              {paymentAppData.enabled && !booking.paid && booking.payment.length && (
-                <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
+              {isPending && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                  {t("unconfirmed")}
+                </Badge>
+              )}
+              {booking.eventType?.team && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
+                  {booking.eventType.team.name}
+                </Badge>
+              )}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
                   {t("pending_payment")}
                 </Badge>
               )}
+              {recurringDates !== undefined && (
+                <div className="text-muted text-sm sm:hidden">
+                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                </div>
+              )}
             </div>
-            {booking.description && (
+
+            <div className="cursor-pointer py-4">
               <div
-                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
-                title={booking.description}>
-                &quot;{booking.description}&quot;
+                title={title}
+                className={classNames(
+                  "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
+                  isCancelled ? "line-through" : ""
+                )}>
+                {title}
+                <span> </span>
+
+                {paymentAppData.enabled && !booking.paid && booking.payment.length && (
+                  <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
+                    {t("pending_payment")}
+                  </Badge>
+                )}
               </div>
-            )}
-            {booking.attendees.length !== 0 && (
-              <DisplayAttendees
-                attendees={booking.attendees}
-                user={booking.user}
-                currentEmail={user?.email}
-              />
-            )}
-            {isCancelled && booking.rescheduled && (
-              <div className="mt-2 inline-block md:hidden">
-                <RequestSentMessage />
-              </div>
-            )}
-          </div>
+              {booking.description && (
+                <div
+                  className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
+                  title={booking.description}>
+                  &quot;{booking.description}&quot;
+                </div>
+              )}
+              {booking.attendees.length !== 0 && (
+                <DisplayAttendees
+                  attendees={booking.attendees}
+                  user={booking.user}
+                  currentEmail={user?.email}
+                />
+              )}
+              {isCancelled && booking.rescheduled && (
+                <div className="mt-2 inline-block md:hidden">
+                  <RequestSentMessage />
+                </div>
+              )}
+            </div>
+          </Link>
         </td>
         <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
@@ -575,7 +576,7 @@ const FirstAttendee = ({
     <a
       key={user.email}
       className=" hover:text-blue-500"
-      href={"mailto:" + user.email}
+      href={`mailto:${user.email}`}
       onClick={(e) => e.stopPropagation()}>
       {user.name}
     </a>
@@ -589,7 +590,7 @@ type AttendeeProps = {
 
 const Attendee = ({ email, name }: AttendeeProps) => {
   return (
-    <a className="hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
+    <a className="hover:text-blue-500" href={`mailto:${email}`} onClick={(e) => e.stopPropagation()}>
       {name || email}
     </a>
   );

apps/web/components/dialog/EditLocationDialog.tsx

@@ -121,7 +121,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,
               message: `Invalid URL for ${eventLocationType.label}. ${
-                sampleUrl ? "Sample URL: " + sampleUrl : ""
+                sampleUrl ? `Sample URL: ${sampleUrl}` : ""
               }`,
             });
           }

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -34,7 +34,7 @@ import {
   TextField,
   Tooltip,
 } from "@calcom/ui";
-import { Copy, Edit } from "@calcom/ui/components/icon";
+import { Copy, Edit, Info } from "@calcom/ui/components/icon";
 import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -67,7 +67,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
 
   eventType.bookingFields.forEach(({ name }) => {
-    bookingFields[name] = name + " input";
+    bookingFields[name] = `${name} input`;
   });
 
   const eventNameObject: EventNameObjectType = {
@@ -124,79 +124,81 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
-    <div className="flex flex-col space-y-8">
+    <div className="flex flex-col space-y-4">
       {/**
        * Only display calendar selector if user has connected calendars AND if it's not
        * a team event. Since we don't have logic to handle each attendee calendar (for now).
        * This will fallback to each user selected destination calendar.
        */}
-      {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
-        <div className="flex flex-col">
-          <div className="flex justify-between">
-            <Label>{t("add_to_calendar")}</Label>
-            <Link
-              href="/apps/categories/calendar"
-              target="_blank"
-              className="hover:text-emphasis text-default text-sm">
-              {t("add_another_calendar")}
-            </Link>
+      <div className="border-subtle space-y-6 rounded-md border p-6">
+        {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
+          <div className="flex flex-col">
+            <div className="flex justify-between">
+              <Label className="font-medium">{t("add_to_calendar")}</Label>
+              <Link
+                href="/apps/categories/calendar"
+                target="_blank"
+                className="hover:text-emphasis text-default text-sm">
+                {t("add_another_calendar")}
+              </Link>
+            </div>
+            <div className="-mt-1 w-full">
+              <Controller
+                control={formMethods.control}
+                name="destinationCalendar"
+                defaultValue={eventType.destinationCalendar || undefined}
+                render={({ field: { onChange, value } }) => (
+                  <DestinationCalendarSelector
+                    destinationCalendar={eventType.destinationCalendar}
+                    value={value ? value.externalId : undefined}
+                    onChange={onChange}
+                    hidePlaceholder
+                  />
+                )}
+              />
+            </div>
+            <p className="text-subtle text-sm">{t("select_which_cal")}</p>
           </div>
-          <div className="-mt-1 w-full">
-            <Controller
-              control={formMethods.control}
-              name="destinationCalendar"
-              defaultValue={eventType.destinationCalendar || undefined}
-              render={({ field: { onChange, value } }) => (
-                <DestinationCalendarSelector
-                  destinationCalendar={eventType.destinationCalendar}
-                  value={value ? value.externalId : undefined}
-                  onChange={onChange}
-                  hidePlaceholder
-                />
-              )}
-            />
-          </div>
-          <p className="text-default text-sm">{t("select_which_cal")}</p>
+        )}
+        <div className="w-full">
+          <TextField
+            label={t("event_name_in_calendar")}
+            type="text"
+            {...shouldLockDisableProps("eventName")}
+            placeholder={eventNamePlaceholder}
+            defaultValue={eventType.eventName || ""}
+            {...formMethods.register("eventName")}
+            addOnSuffix={
+              <Button
+                color="minimal"
+                size="sm"
+                aria-label="edit custom name"
+                className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                onClick={() => setShowEventNameTip((old) => !old)}>
+                <Edit className="h-4 w-4" />
+              </Button>
+            }
+          />
         </div>
-      )}
-      <div className="w-full">
-        <TextField
-          label={t("event_name_in_calendar")}
-          type="text"
-          {...shouldLockDisableProps("eventName")}
-          placeholder={eventNamePlaceholder}
-          defaultValue={eventType.eventName || ""}
-          {...formMethods.register("eventName")}
-          addOnSuffix={
-            <Button
-              color="minimal"
-              size="sm"
-              aria-label="edit custom name"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-              onClick={() => setShowEventNameTip((old) => !old)}>
-              <Edit className="h-4 w-4" />
-            </Button>
-          }
+      </div>
+
+      <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
+
+      <div className="border-subtle space-y-6 rounded-md border p-6">
+        <FormBuilder
+          title={t("booking_questions_title")}
+          description={t("booking_questions_description")}
+          addFieldLabel={t("add_a_booking_question")}
+          formProp="bookingFields"
+          {...shouldLockDisableProps("bookingFields")}
+          dataStore={{
+            options: {
+              locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
+            },
+          }}
         />
       </div>
-      <hr className="border-subtle [&:has(+div:empty)]:hidden" />
-      <div>
-        <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
-      </div>
-      <hr className="border-subtle" />
-      <FormBuilder
-        title={t("booking_questions_title")}
-        description={t("booking_questions_description")}
-        addFieldLabel={t("add_a_booking_question")}
-        formProp="bookingFields"
-        {...shouldLockDisableProps("bookingFields")}
-        dataStore={{
-          options: {
-            locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
-          },
-        }}
-      />
-      <hr className="border-subtle" />
+
       <RequiresConfirmationController
         eventType={eventType}
         seatsEnabled={seatsEnabled}
@@ -204,13 +206,15 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="requiresBookerEmailVerification"
         control={formMethods.control}
         defaultValue={eventType.requiresBookerEmailVerification}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
             {...shouldLockDisableProps("requiresBookerEmailVerification")}
             description={t("description_requires_booker_email_verification")}
@@ -219,13 +223,15 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
         defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
             title={t("disable_notes")}
             {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
@@ -234,13 +240,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                redirectUrlVisible && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               title={t("redirect_success_booking")}
               {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
@@ -249,8 +261,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 setRedirectUrlVisible(e);
                 onChange(e ? value : "");
               }}>
-              {/* Textfield has some margin by default we remove that so we can keep consistent alignment */}
-              <div className="lg:-mb-2 lg:-ml-2">
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
                 <TextField
                   className="w-full"
                   label={t("redirect_success_booking")}
@@ -274,10 +285,24 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
-      <hr className="border-subtle" />
+
       <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        switchContainerClassName={classNames(
+          "border-subtle rounded-md border py-6 px-4 sm:px-6",
+          hashedLinkVisible && "rounded-b-none"
+        )}
+        childrenClassName="lg:ml-0"
         data-testid="hashedLinkCheck"
         title={t("private_link")}
+        Badge={
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://cal.com/docs/core-features/event-types/single-use-private-links">
+            <Info className="mb-2 ml-1.5 h-4 w-4 cursor-pointer" />
+          </a>
+        }
         {...shouldLockDisableProps("hashedLinkCheck")}
         description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
@@ -285,8 +310,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
           setHashedLinkVisible(e);
         }}>
-        {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
-        <div className="lg:-ml-2">
+        <div className="border-subtle rounded-b-md border border-t-0 p-6">
           {!IS_VISUAL_REGRESSION_TESTING && (
             <TextField
               disabled
@@ -321,7 +345,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           )}
         </div>
       </SettingsToggle>
-      <hr className="border-subtle" />
+
       <Controller
         name="seatsPerTimeSlotEnabled"
         control={formMethods.control}
@@ -329,6 +353,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                value && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               data-testid="offer-seats-toggle"
               title={t("offer_seats")}
               {...seatsLocked}
@@ -349,45 +379,49 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 }
                 onChange(e);
               }}>
-              <Controller
-                name="seatsPerTimeSlot"
-                control={formMethods.control}
-                defaultValue={eventType.seatsPerTimeSlot}
-                render={({ field: { value, onChange } }) => (
-                  <div className="lg:-ml-2">
-                    <TextField
-                      required
-                      name="seatsPerTimeSlot"
-                      labelSrOnly
-                      label={t("number_of_seats")}
-                      type="number"
-                      disabled={seatsLocked.disabled}
-                      defaultValue={value || 2}
-                      min={1}
-                      addOnSuffix={<>{t("seats")}</>}
-                      onChange={(e) => {
-                        onChange(Math.abs(Number(e.target.value)));
-                      }}
-                    />
-                    <div className="mt-2">
-                      <CheckboxField
-                        description={t("show_attendees")}
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+                <Controller
+                  name="seatsPerTimeSlot"
+                  control={formMethods.control}
+                  defaultValue={eventType.seatsPerTimeSlot}
+                  render={({ field: { value, onChange } }) => (
+                    <div className="lg:-ml-2">
+                      <TextField
+                        required
+                        name="seatsPerTimeSlot"
+                        labelSrOnly
+                        label={t("number_of_seats")}
+                        type="number"
                         disabled={seatsLocked.disabled}
-                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                        defaultChecked={!!eventType.seatsShowAttendees}
+                        defaultValue={value || 2}
+                        min={1}
+                        addOnSuffix={<>{t("seats")}</>}
+                        onChange={(e) => {
+                          onChange(Math.abs(Number(e.target.value)));
+                        }}
                       />
+                      <div className="mt-2">
+                        <CheckboxField
+                          description={t("show_attendees")}
+                          disabled={seatsLocked.disabled}
+                          onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                          defaultChecked={!!eventType.seatsShowAttendees}
+                        />
+                      </div>
+                      <div className="mt-2">
+                        <CheckboxField
+                          description={t("show_available_seats_count")}
+                          disabled={seatsLocked.disabled}
+                          onChange={(e) =>
+                            formMethods.setValue("seatsShowAvailabilityCount", e.target.checked)
+                          }
+                          defaultChecked={!!eventType.seatsShowAvailabilityCount}
+                        />
+                      </div>
                     </div>
-                    <div className="mt-2">
-                      <CheckboxField
-                        description={t("show_available_seats_count")}
-                        disabled={seatsLocked.disabled}
-                        onChange={(e) => formMethods.setValue("seatsShowAvailabilityCount", e.target.checked)}
-                        defaultChecked={!!eventType.seatsShowAvailabilityCount}
-                      />
-                    </div>
-                  </div>
-                )}
-              />
+                  )}
+                />
+              </div>
             </SettingsToggle>
             {noShowFeeEnabled && <Alert severity="warning" title={t("seats_and_no_show_fee_error")} />}
           </>
@@ -395,13 +429,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
       {allowDisablingAttendeeConfirmationEmails(workflows) && (
         <>
-          <hr className="border-subtle" />
           <Controller
             name="metadata.disableStandardEmails.confirmation.attendee"
             control={formMethods.control}
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  toggleSwitchAtTheEnd={true}
+                  switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
                   title={t("disable_attendees_confirmation_emails")}
                   description={t("disable_attendees_confirmation_emails_description")}
                   checked={value || false}
@@ -417,7 +452,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       )}
       {allowDisablingHostConfirmationEmails(workflows) && (
         <>
-          <hr className="border-subtle" />
           <Controller
             name="metadata.disableStandardEmails.confirmation.host"
             control={formMethods.control}
@@ -425,6 +459,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  toggleSwitchAtTheEnd={true}
+                  switchContainerClassName="border-subtle rounded-md border py-6 px-4 sm:px-6"
                   title={t("disable_host_confirmation_emails")}
                   description={t("disable_host_confirmation_emails_description")}
                   checked={value || false}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -158,7 +158,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         </div>
       </div>
       {!shouldLockDisableProps("apps").disabled && (
-        <div className="bg-muted rounded-md p-8">
+        <div className="bg-muted mt-6 rounded-md p-8">
           {!isLoading && notInstalledApps?.length ? (
             <>
               <h2 className="text-emphasis mb-2 text-xl font-semibold leading-5 tracking-[0.01em]">
@@ -166,7 +166,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               </h2>
               <p className="text-default mb-6 text-sm font-normal">
                 <Trans i18nKey="available_apps_desc">
-                  You have no apps installed. View popular apps below and explore more in our &nbsp;
+                  View popular apps below and explore more in our &nbsp;
                   <Link className="cursor-pointer underline" href="/apps">
                     App Store
                   </Link>

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -98,42 +98,43 @@ const EventTypeScheduleDetails = memo(
       schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
     return (
-      <div className="border-default space-y-4 rounded border px-6 pb-4">
-        <ol className="table border-collapse text-sm">
-          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-            const isAvailable = !!filterDays(index).length;
-            return (
-              <li key={day} className="my-6 flex border-transparent last:mb-2">
-                <span
-                  className={classNames(
-                    "w-20 font-medium sm:w-32 ",
-                    !isAvailable ? "text-subtle line-through" : "text-default"
-                  )}>
-                  {day}
-                </span>
-                {isLoading ? (
-                  <SkeletonText className="block h-5 w-60" />
-                ) : isAvailable ? (
-                  <div className="space-y-3 text-right">
-                    {filterDays(index).map((dayRange, i) => (
-                      <div key={i} className="text-default flex items-center leading-4">
-                        <span className="w-16 sm:w-28 sm:text-left">
-                          {format(dayRange.startTime, timeFormat === 12)}
-                        </span>
-                        <span className="ms-4">-</span>
-                        <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
-                      </div>
-                    ))}
-                  </div>
-                ) : (
-                  <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
-                )}
-              </li>
-            );
-          })}
-        </ol>
-        <hr className="border-subtle" />
-        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+      <div>
+        <div className="border-subtle space-y-4 border-x p-6">
+          <ol className="table border-collapse text-sm">
+            {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+              const isAvailable = !!filterDays(index).length;
+              return (
+                <li key={day} className="my-6 flex border-transparent last:mb-2">
+                  <span
+                    className={classNames(
+                      "w-20 font-medium sm:w-32 ",
+                      !isAvailable ? "text-subtle line-through" : "text-default"
+                    )}>
+                    {day}
+                  </span>
+                  {isLoading ? (
+                    <SkeletonText className="block h-5 w-60" />
+                  ) : isAvailable ? (
+                    <div className="space-y-3 text-right">
+                      {filterDays(index).map((dayRange, i) => (
+                        <div key={i} className="text-default flex items-center leading-4">
+                          <span className="w-16 sm:w-28 sm:text-left">
+                            {format(dayRange.startTime, timeFormat === 12)}
+                          </span>
+                          <span className="ms-4">-</span>
+                          <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
+                  )}
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+        <div className="bg-muted border-subtle flex flex-col justify-center gap-2 rounded-b-md border p-6 sm:flex-row sm:justify-between">
           <span className="text-default flex items-center justify-center text-sm sm:justify-start">
             <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
             {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
@@ -234,8 +235,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
   }, [availabilityValue, setValue]);
 
   return (
-    <div className="space-y-4">
-      <div>
+    <div>
+      <div className="border-subtle rounded-t-md border p-6">
         <label htmlFor="availability" className="text-default mb-2 block text-sm font-medium leading-none">
           {t("availability")}
           {shouldLockIndicator("availability")}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -17,7 +17,7 @@ import { ascendingLimitKeys, intervalLimitKeyToUnit } from "@calcom/lib/interval
 import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
-import { Plus, Trash } from "@calcom/ui/components/icon";
+import { Plus, Trash2 } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
   HTMLInputElement,
@@ -83,14 +83,14 @@ const MinimumBookingNoticeInput = React.forwardRef<
           type="number"
           placeholder="0"
           min={0}
-          className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
+          className="mb-0 h-9 rounded-[4px] ltr:mr-2 rtl:ml-2"
         />
         <input type="hidden" ref={ref} {...passThroughProps} />
       </div>
       <Select
         isSearchable={false}
         isDisabled={passThroughProps.disabled}
-        className="mb-0 ml-2 h-[38px] w-full capitalize md:min-w-[150px] md:max-w-[200px]"
+        className="mb-0 ml-2 h-9 w-full capitalize md:min-w-[150px] md:max-w-[200px]"
         defaultValue={durationTypeOptions.find(
           (option) => option.value === minimumBookingNoticeDisplayValues.type
         )}
@@ -170,8 +170,8 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   const offsetAdjustedTime = new Date(offsetOriginalTime.getTime() + offsetStartValue * 60 * 1000);
 
   return (
-    <div className="space-y-8">
-      <div className="space-y-4 lg:space-y-8">
+    <div>
+      <div className="border-subtle space-y-6 rounded-md border p-6">
         <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="beforeBufferTime">
@@ -189,7 +189,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                     value: 0,
                   },
                   ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-                    label: minutes + " " + t("minutes"),
+                    label: `${minutes} ${t("minutes")}`,
                     value: minutes,
                   })),
                 ];
@@ -225,7 +225,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                     value: 0,
                   },
                   ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
-                    label: minutes + " " + t("minutes"),
+                    label: `${minutes} ${t("minutes")}`,
                     value: minutes,
                   })),
                 ];
@@ -272,7 +272,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                     value: -1,
                   },
                   ...[5, 10, 15, 20, 30, 45, 60, 75, 90, 105, 120].map((minutes) => ({
-                    label: minutes + " " + t("minutes"),
+                    label: `${minutes} ${t("minutes")}`,
                     value: minutes,
                   })),
                 ];
@@ -295,159 +295,195 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </div>
         </div>
       </div>
-      <hr className="border-subtle" />
       <Controller
         name="bookingLimits"
         control={formMethods.control}
-        render={({ field: { value } }) => (
-          <SettingsToggle
-            title={t("limit_booking_frequency")}
-            {...bookingLimitsLocked}
-            description={t("limit_booking_frequency_description")}
-            checked={Object.keys(value ?? {}).length > 0}
-            onCheckedChange={(active) => {
-              if (active) {
-                formMethods.setValue("bookingLimits", {
-                  PER_DAY: 1,
-                });
-              } else {
-                formMethods.setValue("bookingLimits", {});
-              }
-            }}>
-            <IntervalLimitsManager
-              disabled={bookingLimitsLocked.disabled}
-              propertyName="bookingLimits"
-              defaultLimit={1}
-              step={1}
-            />
-          </SettingsToggle>
-        )}
+        render={({ field: { value } }) => {
+          const isChecked = Object.keys(value ?? {}).length > 0;
+          return (
+            <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              title={t("limit_booking_frequency")}
+              {...bookingLimitsLocked}
+              description={t("limit_booking_frequency_description")}
+              checked={isChecked}
+              onCheckedChange={(active) => {
+                if (active) {
+                  formMethods.setValue("bookingLimits", {
+                    PER_DAY: 1,
+                  });
+                } else {
+                  formMethods.setValue("bookingLimits", {});
+                }
+              }}
+              switchContainerClassName={classNames(
+                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                isChecked && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0">
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+                <IntervalLimitsManager
+                  disabled={bookingLimitsLocked.disabled}
+                  propertyName="bookingLimits"
+                  defaultLimit={1}
+                  step={1}
+                />
+              </div>
+            </SettingsToggle>
+          );
+        }}
       />
-      <hr className="border-subtle" />
       <Controller
         name="durationLimits"
         control={formMethods.control}
-        render={({ field: { value } }) => (
-          <SettingsToggle
-            title={t("limit_total_booking_duration")}
-            description={t("limit_total_booking_duration_description")}
-            {...durationLimitsLocked}
-            checked={Object.keys(value ?? {}).length > 0}
-            onCheckedChange={(active) => {
-              if (active) {
-                formMethods.setValue("durationLimits", {
-                  PER_DAY: 60,
-                });
-              } else {
-                formMethods.setValue("durationLimits", {});
-              }
-            }}>
-            <IntervalLimitsManager
-              propertyName="durationLimits"
-              defaultLimit={60}
-              disabled={durationLimitsLocked.disabled}
-              step={15}
-              textFieldSuffix={t("minutes")}
-            />
-          </SettingsToggle>
-        )}
+        render={({ field: { value } }) => {
+          const isChecked = Object.keys(value ?? {}).length > 0;
+          return (
+            <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                isChecked && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
+              title={t("limit_total_booking_duration")}
+              description={t("limit_total_booking_duration_description")}
+              {...durationLimitsLocked}
+              checked={isChecked}
+              onCheckedChange={(active) => {
+                if (active) {
+                  formMethods.setValue("durationLimits", {
+                    PER_DAY: 60,
+                  });
+                } else {
+                  formMethods.setValue("durationLimits", {});
+                }
+              }}>
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+                <IntervalLimitsManager
+                  propertyName="durationLimits"
+                  defaultLimit={60}
+                  disabled={durationLimitsLocked.disabled}
+                  step={15}
+                  textFieldSuffix={t("minutes")}
+                />
+              </div>
+            </SettingsToggle>
+          );
+        }}
       />
-      <hr className="border-subtle" />
       <Controller
         name="periodType"
         control={formMethods.control}
-        render={({ field: { value } }) => (
-          <SettingsToggle
-            title={t("limit_future_bookings")}
-            description={t("limit_future_bookings_description")}
-            {...periodTypeLocked}
-            checked={value && value !== "UNLIMITED"}
-            onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
-            <RadioGroup.Root
-              defaultValue={watchPeriodType}
-              value={watchPeriodType}
-              onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-              {PERIOD_TYPES.filter((opt) =>
-                periodTypeLocked.disabled ? watchPeriodType === opt.type : true
-              ).map((period) => {
-                if (period.type === "UNLIMITED") return null;
-                return (
-                  <div
-                    className={classNames(
-                      "text-default mb-2 flex flex-wrap items-center text-sm",
-                      watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
-                    )}
-                    key={period.type}>
-                    {!periodTypeLocked.disabled && (
-                      <RadioGroup.Item
-                        id={period.type}
-                        value={period.type}
-                        className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                        <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
-                      </RadioGroup.Item>
-                    )}
-                    {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
-                    {period.type === "ROLLING" && (
-                      <div className="flex items-center">
-                        <TextField
-                          labelSrOnly
-                          type="number"
-                          className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
-                          placeholder="30"
-                          disabled={periodTypeLocked.disabled}
-                          {...formMethods.register("periodDays", { valueAsNumber: true })}
-                          defaultValue={eventType.periodDays || 30}
-                        />
-                        <Select
-                          options={optionsPeriod}
-                          isSearchable={false}
-                          isDisabled={periodTypeLocked.disabled}
-                          onChange={(opt) => {
-                            formMethods.setValue(
-                              "periodCountCalendarDays",
-                              opt?.value.toString() as "0" | "1"
-                            );
-                          }}
-                          defaultValue={
-                            optionsPeriod.find(
-                              (opt) => opt.value === (eventType.periodCountCalendarDays ? 1 : 0)
-                            ) ?? optionsPeriod[0]
-                          }
-                        />
-                      </div>
-                    )}
-                    {period.type === "RANGE" && (
-                      <div className="me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse">
-                        <Controller
-                          name="periodDates"
-                          control={formMethods.control}
-                          defaultValue={periodDates}
-                          render={() => (
-                            <DateRangePicker
-                              startDate={formMethods.getValues("periodDates").startDate}
-                              endDate={formMethods.getValues("periodDates").endDate}
+        render={({ field: { value } }) => {
+          const isChecked = value && value !== "UNLIMITED";
+
+          return (
+            <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+                isChecked && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
+              title={t("limit_future_bookings")}
+              description={t("limit_future_bookings_description")}
+              {...periodTypeLocked}
+              checked={isChecked}
+              onCheckedChange={(bool) => formMethods.setValue("periodType", bool ? "ROLLING" : "UNLIMITED")}>
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+                <RadioGroup.Root
+                  defaultValue={watchPeriodType}
+                  value={watchPeriodType}
+                  onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
+                  {PERIOD_TYPES.filter((opt) =>
+                    periodTypeLocked.disabled ? watchPeriodType === opt.type : true
+                  ).map((period) => {
+                    if (period.type === "UNLIMITED") return null;
+                    return (
+                      <div
+                        className={classNames(
+                          "text-default mb-2 flex flex-wrap items-center text-sm",
+                          watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
+                        )}
+                        key={period.type}>
+                        {!periodTypeLocked.disabled && (
+                          <RadioGroup.Item
+                            id={period.type}
+                            value={period.type}
+                            className="min-w-4 bg-default border-default flex h-4 w-4 cursor-pointer items-center rounded-full border focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                            <RadioGroup.Indicator className="after:bg-inverted relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full" />
+                          </RadioGroup.Item>
+                        )}
+                        {period.prefix ? <span>{period.prefix}&nbsp;</span> : null}
+                        {period.type === "ROLLING" && (
+                          <div className="flex items-center">
+                            <TextField
+                              labelSrOnly
+                              type="number"
+                              className="border-default my-0 block w-16 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
+                              placeholder="30"
                               disabled={periodTypeLocked.disabled}
-                              onDatesChange={({ startDate, endDate }) => {
-                                formMethods.setValue("periodDates", {
-                                  startDate,
-                                  endDate,
-                                });
-                              }}
+                              {...formMethods.register("periodDays", { valueAsNumber: true })}
+                              defaultValue={eventType.periodDays || 30}
                             />
-                          )}
-                        />
+                            <Select
+                              options={optionsPeriod}
+                              isSearchable={false}
+                              isDisabled={periodTypeLocked.disabled}
+                              onChange={(opt) => {
+                                formMethods.setValue(
+                                  "periodCountCalendarDays",
+                                  opt?.value.toString() as "0" | "1"
+                                );
+                              }}
+                              defaultValue={
+                                optionsPeriod.find(
+                                  (opt) => opt.value === (eventType.periodCountCalendarDays ? 1 : 0)
+                                ) ?? optionsPeriod[0]
+                              }
+                            />
+                          </div>
+                        )}
+                        {period.type === "RANGE" && (
+                          <div className="me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse">
+                            <Controller
+                              name="periodDates"
+                              control={formMethods.control}
+                              defaultValue={periodDates}
+                              render={() => (
+                                <DateRangePicker
+                                  startDate={formMethods.getValues("periodDates").startDate}
+                                  endDate={formMethods.getValues("periodDates").endDate}
+                                  disabled={periodTypeLocked.disabled}
+                                  onDatesChange={({ startDate, endDate }) => {
+                                    formMethods.setValue("periodDates", {
+                                      startDate,
+                                      endDate,
+                                    });
+                                  }}
+                                />
+                              )}
+                            />
+                          </div>
+                        )}
+                        {period.suffix ? <span className="me-2 ms-2">&nbsp;{period.suffix}</span> : null}
                       </div>
-                    )}
-                    {period.suffix ? <span className="me-2 ms-2">&nbsp;{period.suffix}</span> : null}
-                  </div>
-                );
-              })}
-            </RadioGroup.Root>
-          </SettingsToggle>
-        )}
+                    );
+                  })}
+                </RadioGroup.Root>
+              </div>
+            </SettingsToggle>
+          );
+        }}
       />
-      <hr className="border-subtle" />
       <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        switchContainerClassName={classNames(
+          "border-subtle mt-6 rounded-md border py-6 px-4 sm:px-6",
+          offsetToggle && "rounded-b-none"
+        )}
+        childrenClassName="lg:ml-0"
         title={t("offset_toggle")}
         description={t("offset_toggle_description")}
         {...offsetStartLockedProps}
@@ -458,18 +494,20 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             formMethods.setValue("offsetStart", 0);
           }
         }}>
-        <TextField
-          required
-          type="number"
-          {...offsetStartLockedProps}
-          label={t("offset_start")}
-          {...formMethods.register("offsetStart")}
-          addOnSuffix={<>{t("minutes")}</>}
-          hint={t("offset_start_description", {
-            originalTime: offsetOriginalTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
-            adjustedTime: offsetAdjustedTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
-          })}
-        />
+        <div className="border-subtle rounded-b-md border border-t-0 p-6">
+          <TextField
+            required
+            type="number"
+            {...offsetStartLockedProps}
+            label={t("offset_start")}
+            {...formMethods.register("offsetStart")}
+            addOnSuffix={<>{t("minutes")}</>}
+            hint={t("offset_start_description", {
+              originalTime: offsetOriginalTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+              adjustedTime: offsetAdjustedTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+            })}
+          />
+        </div>
       </SettingsToggle>
     </div>
   );
@@ -509,19 +547,19 @@ const IntervalLimitItem = ({
   onIntervalSelect,
 }: IntervalLimitItemProps) => {
   return (
-    <div className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse" key={limitKey}>
+    <div className="mb-4 flex max-h-9 items-center space-x-2 text-sm rtl:space-x-reverse" key={limitKey}>
       <TextField
         required
         type="number"
         containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
-        className="mb-0 !h-auto"
+        className="mb-0"
         placeholder={`${value}`}
         disabled={disabled}
         min={step}
         step={step}
         defaultValue={value}
         addOnSuffix={textFieldSuffix}
-        onChange={(e) => onLimitChange(limitKey, parseInt(e.target.value))}
+        onChange={(e) => onLimitChange(limitKey, parseInt(e.target.value || "0", 10))}
       />
       <Select
         options={selectOptions}
@@ -529,9 +567,16 @@ const IntervalLimitItem = ({
         isDisabled={disabled}
         defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
         onChange={onIntervalSelect}
+        className="w-36"
       />
       {hasDeleteButton && !disabled && (
-        <Button variant="icon" StartIcon={Trash} color="destructive" onClick={() => onDelete(limitKey)} />
+        <Button
+          variant="icon"
+          StartIcon={Trash2}
+          color="destructive"
+          className="border-none"
+          onClick={() => onDelete(limitKey)}
+        />
       )}
     </div>
   );

apps/web/components/eventtype/EventSetupTab.tsx

@@ -13,8 +13,10 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
@@ -131,12 +133,12 @@ export const EventSetupTab = (
     };
   });
 
-  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 150, 180].map(
-    (mins) => ({
-      value: mins,
-      label: t("multiple_duration_mins", { count: mins }),
-    })
-  );
+  const multipleDurationOptions = [
+    5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 150, 180, 240, 480,
+  ].map((mins) => ({
+    value: mins,
+    label: t("multiple_duration_mins", { count: mins }),
+  }));
 
   const [selectedMultipleDuration, setSelectedMultipleDuration] = useState<
     MultiValue<{
@@ -301,7 +303,10 @@ export const EventSetupTab = (
                     <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
-                        className="h-4 w-4 dark:invert-[.65]"
+                        className={classNames(
+                          "h-4 w-4",
+                          classNames(invertLogoOnDark(eventLocationType.iconUrl))
+                        )}
                         alt={`${eventLocationType.label} logo`}
                       />
                       <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${
@@ -387,178 +392,185 @@ export const EventSetupTab = (
 
   return (
     <div>
-      <div className="space-y-8">
-        <TextField
-          required
-          label={t("title")}
-          {...shouldLockDisableProps("title")}
-          defaultValue={eventType.title}
-          {...formMethods.register("title")}
-        />
-        <div>
-          <Label>
-            {t("description")}
-            {shouldLockIndicator("description")}
-          </Label>
-          <DescriptionEditor
-            description={eventType?.description}
-            editable={!descriptionLockedProps.disabled}
-          />
-        </div>
-        <TextField
-          required
-          label={t("URL")}
-          {...shouldLockDisableProps("slug")}
-          defaultValue={eventType.slug}
-          addOnLeading={
-            <>
-              {urlPrefix}/
-              {!isManagedEventType
-                ? team
-                  ? (orgBranding ? "" : "team/") + team.slug
-                  : eventType.users[0].username
-                : t("username_placeholder")}
-              /
-            </>
-          }
-          {...formMethods.register("slug", {
-            setValueAs: (v) => slugify(v),
-          })}
-        />
-        {multipleDuration ? (
-          <div className="space-y-4">
-            <div>
-              <Skeleton as={Label} loadingClassName="w-16">
-                {t("available_durations")}
-              </Skeleton>
-              <Select
-                isMulti
-                defaultValue={selectedMultipleDuration}
-                name="metadata.multipleDuration"
-                isSearchable={false}
-                className="h-auto !min-h-[36px] text-sm"
-                options={multipleDurationOptions}
-                value={selectedMultipleDuration}
-                onChange={(options) => {
-                  let newOptions = [...options];
-                  newOptions = newOptions.sort((a, b) => {
-                    return a?.value - b?.value;
-                  });
-                  const values = newOptions.map((opt) => opt.value);
-                  setMultipleDuration(values);
-                  setSelectedMultipleDuration(newOptions);
-                  if (!newOptions.find((opt) => opt.value === defaultDuration?.value)) {
-                    if (newOptions.length > 0) {
-                      setDefaultDuration(newOptions[0]);
-                      formMethods.setValue("length", newOptions[0].value);
-                    } else {
-                      setDefaultDuration(null);
-                    }
-                  }
-                  if (newOptions.length === 1 && defaultDuration === null) {
-                    setDefaultDuration(newOptions[0]);
-                    formMethods.setValue("length", newOptions[0].value);
-                  }
-                  formMethods.setValue("metadata.multipleDuration", values);
-                }}
-              />
-            </div>
-            <div>
-              <Skeleton as={Label} loadingClassName="w-16">
-                {t("default_duration")}
-                {shouldLockIndicator("length")}
-              </Skeleton>
-              <Select
-                value={defaultDuration}
-                isSearchable={false}
-                name="length"
-                className="text-sm"
-                isDisabled={lengthLockedProps.disabled}
-                noOptionsMessage={() => t("default_duration_no_options")}
-                options={selectedMultipleDuration}
-                onChange={(option) => {
-                  setDefaultDuration(
-                    selectedMultipleDuration.find((opt) => opt.value === option?.value) ?? null
-                  );
-                  if (option) formMethods.setValue("length", option.value);
-                }}
-              />
-            </div>
-          </div>
-        ) : (
+      <div className="space-y-4">
+        <div className="border-subtle space-y-6 rounded-md border p-6">
           <TextField
             required
-            type="number"
-            {...lengthLockedProps}
-            label={t("duration")}
-            defaultValue={eventType.length ?? 15}
-            {...formMethods.register("length")}
-            addOnSuffix={<>{t("minutes")}</>}
-            min={1}
+            label={t("title")}
+            {...shouldLockDisableProps("title")}
+            defaultValue={eventType.title}
+            {...formMethods.register("title")}
           />
-        )}
-        {!lengthLockedProps.disabled && (
-          <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
-            <SettingsToggle
-              title={t("allow_booker_to_select_duration")}
-              checked={multipleDuration !== undefined}
-              disabled={seatsEnabled}
-              tooltip={seatsEnabled ? t("seat_options_doesnt_multiple_durations") : undefined}
-              onCheckedChange={() => {
-                if (multipleDuration !== undefined) {
-                  setMultipleDuration(undefined);
-                  formMethods.setValue("metadata.multipleDuration", undefined);
-                  formMethods.setValue("length", eventType.length);
-                } else {
-                  setMultipleDuration([]);
-                  formMethods.setValue("metadata.multipleDuration", []);
-                  formMethods.setValue("length", 0);
-                }
-              }}
+          <div>
+            <Label>
+              {t("description")}
+              {shouldLockIndicator("description")}
+            </Label>
+            <DescriptionEditor
+              description={eventType?.description}
+              editable={!descriptionLockedProps.disabled}
             />
           </div>
-        )}
-        <div>
-          <Skeleton as={Label} loadingClassName="w-16">
-            {t("location")}
-            {shouldLockIndicator("locations")}
-          </Skeleton>
-
-          <Controller
-            name="locations"
-            control={formMethods.control}
-            defaultValue={eventType.locations || []}
-            render={() => <Locations />}
+          <TextField
+            required
+            label={t("URL")}
+            {...shouldLockDisableProps("slug")}
+            defaultValue={eventType.slug}
+            addOnLeading={
+              <>
+                {urlPrefix}/
+                {!isManagedEventType
+                  ? team
+                    ? (orgBranding ? "" : "team/") + team.slug
+                    : eventType.users[0].username
+                  : t("username_placeholder")}
+                /
+              </>
+            }
+            {...formMethods.register("slug", {
+              setValueAs: (v) => slugify(v),
+            })}
           />
         </div>
-      </div>
+        <div className="border-subtle rounded-md border p-6">
+          {multipleDuration ? (
+            <div className="space-y-6">
+              <div>
+                <Skeleton as={Label} loadingClassName="w-16">
+                  {t("available_durations")}
+                </Skeleton>
+                <Select
+                  isMulti
+                  defaultValue={selectedMultipleDuration}
+                  name="metadata.multipleDuration"
+                  isSearchable={false}
+                  className="h-auto !min-h-[36px] text-sm"
+                  options={multipleDurationOptions}
+                  value={selectedMultipleDuration}
+                  onChange={(options) => {
+                    let newOptions = [...options];
+                    newOptions = newOptions.sort((a, b) => {
+                      return a?.value - b?.value;
+                    });
+                    const values = newOptions.map((opt) => opt.value);
+                    setMultipleDuration(values);
+                    setSelectedMultipleDuration(newOptions);
+                    if (!newOptions.find((opt) => opt.value === defaultDuration?.value)) {
+                      if (newOptions.length > 0) {
+                        setDefaultDuration(newOptions[0]);
+                        formMethods.setValue("length", newOptions[0].value);
+                      } else {
+                        setDefaultDuration(null);
+                      }
+                    }
+                    if (newOptions.length === 1 && defaultDuration === null) {
+                      setDefaultDuration(newOptions[0]);
+                      formMethods.setValue("length", newOptions[0].value);
+                    }
+                    formMethods.setValue("metadata.multipleDuration", values);
+                  }}
+                />
+              </div>
+              <div>
+                <Skeleton as={Label} loadingClassName="w-16">
+                  {t("default_duration")}
+                  {shouldLockIndicator("length")}
+                </Skeleton>
+                <Select
+                  value={defaultDuration}
+                  isSearchable={false}
+                  name="length"
+                  className="text-sm"
+                  isDisabled={lengthLockedProps.disabled}
+                  noOptionsMessage={() => t("default_duration_no_options")}
+                  options={selectedMultipleDuration}
+                  onChange={(option) => {
+                    setDefaultDuration(
+                      selectedMultipleDuration.find((opt) => opt.value === option?.value) ?? null
+                    );
+                    if (option) formMethods.setValue("length", option.value);
+                  }}
+                />
+              </div>
+            </div>
+          ) : (
+            <TextField
+              required
+              type="number"
+              {...lengthLockedProps}
+              label={t("duration")}
+              defaultValue={eventType.length ?? 15}
+              {...formMethods.register("length")}
+              addOnSuffix={<>{t("minutes")}</>}
+              min={1}
+            />
+          )}
+          {!lengthLockedProps.disabled && (
+            <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
+              <SettingsToggle
+                title={t("allow_booker_to_select_duration")}
+                checked={multipleDuration !== undefined}
+                disabled={seatsEnabled}
+                tooltip={seatsEnabled ? t("seat_options_doesnt_multiple_durations") : undefined}
+                onCheckedChange={() => {
+                  if (multipleDuration !== undefined) {
+                    setMultipleDuration(undefined);
+                    formMethods.setValue("metadata.multipleDuration", undefined);
+                    formMethods.setValue("length", eventType.length);
+                  } else {
+                    setMultipleDuration([]);
+                    formMethods.setValue("metadata.multipleDuration", []);
+                    formMethods.setValue("length", 0);
+                  }
+                }}
+              />
+            </div>
+          )}
+        </div>
 
-      {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
-      <EditLocationDialog
-        isOpenDialog={showLocationModal}
-        setShowLocationModal={setShowLocationModal}
-        saveLocation={saveLocation}
-        defaultValues={formMethods.getValues("locations")}
-        selection={
-          selectedLocation
-            ? selectedLocation.address
-              ? {
-                  value: selectedLocation.value,
-                  label: t(selectedLocation.label),
-                  icon: selectedLocation.icon,
-                  address: selectedLocation.address,
-                }
-              : {
-                  value: selectedLocation.value,
-                  label: t(selectedLocation.label),
-                  icon: selectedLocation.icon,
-                }
-            : undefined
-        }
-        setSelectedLocation={setSelectedLocation}
-        setEditingLocationType={setEditingLocationType}
-        teamId={eventType.team?.id}
-      />
+        <div className="border-subtle rounded-md border p-6">
+          <div>
+            <Skeleton as={Label} loadingClassName="w-16">
+              {t("location")}
+              {shouldLockIndicator("locations")}
+            </Skeleton>
+
+            <Controller
+              name="locations"
+              control={formMethods.control}
+              defaultValue={eventType.locations || []}
+              render={() => <Locations />}
+            />
+          </div>
+        </div>
+
+        {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
+        <EditLocationDialog
+          isOpenDialog={showLocationModal}
+          setShowLocationModal={setShowLocationModal}
+          saveLocation={saveLocation}
+          defaultValues={formMethods.getValues("locations")}
+          selection={
+            selectedLocation
+              ? selectedLocation.address
+                ? {
+                    value: selectedLocation.value,
+                    label: t(selectedLocation.label),
+                    icon: selectedLocation.icon,
+                    address: selectedLocation.address,
+                  }
+                : {
+                    value: selectedLocation.value,
+                    label: t(selectedLocation.label),
+                    icon: selectedLocation.icon,
+                  }
+              : undefined
+          }
+          setSelectedLocation={setSelectedLocation}
+          setEditingLocationType={setEditingLocationType}
+          teamId={eventType.team?.id}
+        />
+      </div>
     </div>
   );
 };

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -247,7 +247,7 @@ function EventTypeSingleLayout({
   return (
     <Shell
       backPath="/event-types"
-      title={eventType.title + " | " + t("event_type")}
+      title={`${eventType.title} | ${t("event_type")}`}
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">

apps/web/components/eventtype/EventWebhooksTab.tsx

@@ -1,5 +1,7 @@
 import type { Webhook } from "@prisma/client";
 import { Webhook as TbWebhook } from "lucide-react";
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
 
@@ -8,6 +10,7 @@ import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
 import { subscriberUrlReserved } from "@calcom/features/webhooks/lib/subscriberUrlReserved";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
@@ -115,23 +118,40 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                 )}
                 {webhooks.length ? (
                   <>
-                    <div className="mb-2 rounded-md border">
-                      {webhooks.map((webhook, index) => {
-                        return (
-                          <WebhookListItem
-                            key={webhook.id}
-                            webhook={webhook}
-                            lastItem={webhooks.length === index + 1}
-                            canEditWebhook={!webhookLockedStatus.disabled}
-                            onEditWebhook={() => {
-                              setEditModalOpen(true);
-                              setWebhookToEdit(webhook);
-                            }}
-                          />
-                        );
-                      })}
+                    <div className="border-subtle mb-2 rounded-md border p-8">
+                      <div className="text-default text-sm font-semibold">{t("webhooks")}</div>
+                      <p className="text-subtle max-w-[280px] break-words text-sm sm:max-w-[500px]">
+                        {t("add_webhook_description", { appName: APP_NAME })}
+                      </p>
+
+                      <div className="border-subtle mt-8 rounded-md border">
+                        {webhooks.map((webhook, index) => {
+                          return (
+                            <WebhookListItem
+                              key={webhook.id}
+                              webhook={webhook}
+                              lastItem={webhooks.length === index + 1}
+                              canEditWebhook={!webhookLockedStatus.disabled}
+                              onEditWebhook={() => {
+                                setEditModalOpen(true);
+                                setWebhookToEdit(webhook);
+                              }}
+                            />
+                          );
+                        })}
+                      </div>
+
+                      <p className="text-default mt-8 text-sm font-normal">
+                        <Trans i18nKey="edit_or_manage_webhooks">
+                          If you wish to edit or manage your web hooks, please head over to &nbsp;
+                          <Link
+                            className="cursor-pointer font-semibold underline"
+                            href="/settings/developer/webhooks">
+                            webhooks settings
+                          </Link>
+                        </Trans>
+                      </p>
                     </div>
-                    <NewWebhookButton />
                   </>
                 ) : (
                   <EmptyScreen

apps/web/components/eventtype/RecurringEventController.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
 import type { RecurringEvent } from "@calcom/types/Calendar";
@@ -47,6 +48,12 @@ export default function RecurringEventController({
         ) : (
           <>
             <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                recurringEventState !== null && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               title={t("recurring_event")}
               {...recurringLocked}
               description={t("recurring_event_description")}
@@ -66,68 +73,70 @@ export default function RecurringEventController({
                   setRecurringEventState(newVal);
                 }
               }}>
-              {recurringEventState && (
-                <div data-testid="recurring-event-collapsible" className="text-sm">
-                  <div className="flex items-center">
-                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
-                    <TextField
-                      disabled={recurringLocked.disabled}
-                      type="number"
-                      min="1"
-                      max="20"
-                      className="mb-0"
-                      defaultValue={recurringEventState.interval}
-                      onChange={(event) => {
-                        const newVal = {
-                          ...recurringEventState,
-                          interval: parseInt(event?.target.value),
-                        };
-                        formMethods.setValue("recurringEvent", newVal);
-                        setRecurringEventState(newVal);
-                      }}
-                    />
-                    <Select
-                      options={recurringEventFreqOptions}
-                      value={recurringEventFreqOptions[recurringEventState.freq]}
-                      isSearchable={false}
-                      className="w-18 ml-2 block min-w-0 rounded-md text-sm"
-                      isDisabled={recurringLocked.disabled}
-                      onChange={(event) => {
-                        const newVal = {
-                          ...recurringEventState,
-                          freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
-                        };
-                        formMethods.setValue("recurringEvent", newVal);
-                        setRecurringEventState(newVal);
-                      }}
-                    />
+              <div className="border-subtle rounded-b-md border border-t-0 p-6">
+                {recurringEventState && (
+                  <div data-testid="recurring-event-collapsible" className="text-sm">
+                    <div className="flex items-center">
+                      <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("repeats_every")}</p>
+                      <TextField
+                        disabled={recurringLocked.disabled}
+                        type="number"
+                        min="1"
+                        max="20"
+                        className="mb-0"
+                        defaultValue={recurringEventState.interval}
+                        onChange={(event) => {
+                          const newVal = {
+                            ...recurringEventState,
+                            interval: parseInt(event?.target.value),
+                          };
+                          formMethods.setValue("recurringEvent", newVal);
+                          setRecurringEventState(newVal);
+                        }}
+                      />
+                      <Select
+                        options={recurringEventFreqOptions}
+                        value={recurringEventFreqOptions[recurringEventState.freq]}
+                        isSearchable={false}
+                        className="w-18 ml-2 block min-w-0 rounded-md text-sm"
+                        isDisabled={recurringLocked.disabled}
+                        onChange={(event) => {
+                          const newVal = {
+                            ...recurringEventState,
+                            freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
+                          };
+                          formMethods.setValue("recurringEvent", newVal);
+                          setRecurringEventState(newVal);
+                        }}
+                      />
+                    </div>
+                    <div className="mt-4 flex items-center">
+                      <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
+                      <TextField
+                        disabled={recurringLocked.disabled}
+                        type="number"
+                        min="1"
+                        max="20"
+                        defaultValue={recurringEventState.count}
+                        className="mb-0"
+                        onChange={(event) => {
+                          const newVal = {
+                            ...recurringEventState,
+                            count: parseInt(event?.target.value),
+                          };
+                          formMethods.setValue("recurringEvent", newVal);
+                          setRecurringEventState(newVal);
+                        }}
+                      />
+                      <p className="text-emphasis ltr:ml-2 rtl:mr-2">
+                        {t("events", {
+                          count: recurringEventState.count,
+                        })}
+                      </p>
+                    </div>
                   </div>
-                  <div className="mt-4 flex items-center">
-                    <p className="text-emphasis ltr:mr-2 rtl:ml-2">{t("for_a_maximum_of")}</p>
-                    <TextField
-                      disabled={recurringLocked.disabled}
-                      type="number"
-                      min="1"
-                      max="20"
-                      defaultValue={recurringEventState.count}
-                      className="mb-0"
-                      onChange={(event) => {
-                        const newVal = {
-                          ...recurringEventState,
-                          count: parseInt(event?.target.value),
-                        };
-                        formMethods.setValue("recurringEvent", newVal);
-                        setRecurringEventState(newVal);
-                      }}
-                    />
-                    <p className="text-emphasis ltr:ml-2 rtl:mr-2">
-                      {t("events", {
-                        count: recurringEventState.count,
-                      })}
-                    </p>
-                  </div>
-                </div>
-              )}
+                )}
+              </div>
             </SettingsToggle>
           </>
         )}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -67,6 +67,12 @@ export default function RequiresConfirmationController({
           control={formMethods.control}
           render={() => (
             <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-md border py-6 px-4 sm:px-6",
+                requiresConfirmation && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               title={t("requires_confirmation")}
               disabled={seatsEnabled || requiresConfirmationLockedProps.disabled}
               tooltip={seatsEnabled ? t("seat_options_doesnt_support_confirmation") : undefined}
@@ -77,107 +83,111 @@ export default function RequiresConfirmationController({
                 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="border-subtle rounded-b-md border border-t-0 p-6">
+                <RadioGroup.Root
+                  defaultValue={
+                    requiresConfirmation
+                      ? requiresConfirmationSetup === undefined
+                        ? "always"
+                        : "notice"
+                      : undefined
                   }
-                }}>
-                <div className="flex flex-col flex-wrap justify-start gap-y-2">
-                  {(requiresConfirmationSetup === undefined || !requiresConfirmationLockedProps.disabled) && (
-                    <RadioField
-                      label={t("always_requires_confirmation")}
-                      disabled={requiresConfirmationLockedProps.disabled}
-                      id="always"
-                      value="always"
-                    />
-                  )}
-                  {(requiresConfirmationSetup !== undefined || !requiresConfirmationLockedProps.disabled) && (
-                    <RadioField
-                      disabled={requiresConfirmationLockedProps.disabled}
-                      className="items-center"
-                      label={
-                        <>
-                          <Trans
-                            i18nKey="when_booked_with_less_than_notice"
-                            defaults="When booked with less than <time></time> notice"
-                            components={{
-                              time: (
-                                <div className="mx-2 inline-flex">
-                                  <Input
-                                    type="number"
-                                    min={1}
-                                    disabled={requiresConfirmationLockedProps.disabled}
-                                    onChange={(evt) => {
-                                      const val = Number(evt.target?.value);
-                                      setRequiresConfirmationSetup({
-                                        unit:
-                                          requiresConfirmationSetup?.unit ??
-                                          defaultRequiresConfirmationSetup.unit,
-                                        time: val,
-                                      });
-                                      formMethods.setValue(
-                                        "metadata.requiresConfirmationThreshold.time",
-                                        val
-                                      );
-                                    }}
-                                    className="border-default !m-0 block w-16 rounded-md text-sm [appearance:textfield]"
-                                    defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                                  />
-                                  <label
-                                    className={classNames(
-                                      requiresConfirmationLockedProps.disabled && "cursor-not-allowed"
-                                    )}>
-                                    <Select
-                                      inputId="notice"
-                                      options={options}
-                                      isSearchable={false}
-                                      isDisabled={requiresConfirmationLockedProps.disabled}
-                                      className="ml-2"
-                                      onChange={(opt) => {
+                  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="flex flex-col flex-wrap justify-start gap-y-2">
+                    {(requiresConfirmationSetup === undefined ||
+                      !requiresConfirmationLockedProps.disabled) && (
+                      <RadioField
+                        label={t("always_requires_confirmation")}
+                        disabled={requiresConfirmationLockedProps.disabled}
+                        id="always"
+                        value="always"
+                      />
+                    )}
+                    {(requiresConfirmationSetup !== undefined ||
+                      !requiresConfirmationLockedProps.disabled) && (
+                      <RadioField
+                        disabled={requiresConfirmationLockedProps.disabled}
+                        className="items-center"
+                        label={
+                          <>
+                            <Trans
+                              i18nKey="when_booked_with_less_than_notice"
+                              defaults="When booked with less than <time></time> notice"
+                              components={{
+                                time: (
+                                  <div className="mx-2 inline-flex">
+                                    <Input
+                                      type="number"
+                                      min={1}
+                                      disabled={requiresConfirmationLockedProps.disabled}
+                                      onChange={(evt) => {
+                                        const val = Number(evt.target?.value);
                                         setRequiresConfirmationSetup({
-                                          time:
-                                            requiresConfirmationSetup?.time ??
-                                            defaultRequiresConfirmationSetup.time,
-                                          unit: opt?.value as UnitTypeLongPlural,
+                                          unit:
+                                            requiresConfirmationSetup?.unit ??
+                                            defaultRequiresConfirmationSetup.unit,
+                                          time: val,
                                         });
                                         formMethods.setValue(
-                                          "metadata.requiresConfirmationThreshold.unit",
-                                          opt?.value as UnitTypeLongPlural
+                                          "metadata.requiresConfirmationThreshold.time",
+                                          val
                                         );
                                       }}
-                                      defaultValue={defaultValue}
+                                      className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield]"
+                                      defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
                                     />
-                                  </label>
-                                </div>
-                              ),
-                            }}
-                          />
-                        </>
-                      }
-                      id="notice"
-                      value="notice"
-                    />
-                  )}
-                </div>
-              </RadioGroup.Root>
+                                    <label
+                                      className={classNames(
+                                        requiresConfirmationLockedProps.disabled && "cursor-not-allowed"
+                                      )}>
+                                      <Select
+                                        inputId="notice"
+                                        options={options}
+                                        isSearchable={false}
+                                        isDisabled={requiresConfirmationLockedProps.disabled}
+                                        innerClassNames={{ control: "rounded-l-none bg-subtle" }}
+                                        onChange={(opt) => {
+                                          setRequiresConfirmationSetup({
+                                            time:
+                                              requiresConfirmationSetup?.time ??
+                                              defaultRequiresConfirmationSetup.time,
+                                            unit: opt?.value as UnitTypeLongPlural,
+                                          });
+                                          formMethods.setValue(
+                                            "metadata.requiresConfirmationThreshold.unit",
+                                            opt?.value as UnitTypeLongPlural
+                                          );
+                                        }}
+                                        defaultValue={defaultValue}
+                                      />
+                                    </label>
+                                  </div>
+                                ),
+                              }}
+                            />
+                          </>
+                        }
+                        id="notice"
+                        value="notice"
+                      />
+                    )}
+                  </div>
+                </RadioGroup.Root>
+              </div>
             </SettingsToggle>
           )}
         />

apps/web/components/team/screens/Team.tsx

@@ -22,7 +22,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   return (
     <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
       <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
-        <Avatar size="md" alt={member.name || ""} imageSrc={"/" + member.username + "/avatar.png"} />
+        <Avatar size="md" alt={member.name || ""} imageSrc={`/${member.username}/avatar.png`} />
         <section className="mt-2 line-clamp-4 w-full space-y-1">
           <p className="text-default font-medium">{member.name}</p>
           <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">

apps/web/components/ui/form/LocationSelect.tsx

@@ -4,6 +4,7 @@ import { components } from "react-select";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
 import { classNames } from "@calcom/lib";
+import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { Select } from "@calcom/ui";
 
 export type LocationOption = {
@@ -22,7 +23,7 @@ export type GroupOptionType = GroupBase<LocationOption>;
 const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
-      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5 dark:invert-[.65]" />}
+      {icon && <img src={icon} alt="cover" className={classNames("h-3.5 w-3.5", invertLogoOnDark(icon))} />}
       <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );

apps/web/lib/app-providers.tsx

@@ -179,14 +179,14 @@ function getThemeProviderProps({
     );
   }
 
-  const appearanceIdSuffix = themeBasis ? ":" + themeBasis : "";
+  const appearanceIdSuffix = themeBasis ? `:${themeBasis}` : "";
   const forcedTheme = themeSupport === ThemeSupport.None ? "light" : undefined;
   let embedExplicitlySetThemeSuffix = "";
 
   if (typeof window !== "undefined") {
     const embedTheme = window.getEmbedTheme();
     if (embedTheme) {
-      embedExplicitlySetThemeSuffix = ":" + embedTheme;
+      embedExplicitlySetThemeSuffix = `:${embedTheme}`;
     }
   }
 

apps/web/lib/csp.ts

@@ -21,7 +21,7 @@ function getCspPolicy(nonce: string) {
 	  script-src ${
       IS_PRODUCTION
         ? // 'self' 'unsafe-inline' https: added for Browsers not supporting strict-dynamic not supporting strict-dynamic
-          "'nonce-" + nonce + "' 'strict-dynamic' 'self' 'unsafe-inline' https:"
+          `'nonce-${nonce}' 'strict-dynamic' 'self' 'unsafe-inline' https:`
         : // Note: We could use 'strict-dynamic' with 'nonce-..' instead of unsafe-inline but there are some streaming related scripts that get blocked(because they don't have nonce on them). It causes a really frustrating full page error model by Next.js to show up sometimes
           "'unsafe-inline' 'unsafe-eval' https: http:"
     };

apps/web/lib/withEmbedSsr.tsx

@@ -15,14 +15,9 @@ export default function withEmbedSsr(getServerSideProps: GetServerSideProps) {
       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() +
-        "&layout=" +
-        layout +
-        "&embed=" +
-        embed;
+      const newDestinationUrl = `${
+        destinationUrlObj.pathname
+      }/embed?${destinationUrlObj.searchParams.toString()}&layout=${layout}&embed=${embed}`;
 
       return {
         ...ssrResponse,

apps/web/middleware.ts

@@ -40,7 +40,7 @@ const middleware: NextMiddleware = async (req) => {
     requestHeaders.set("x-cal-timezone", req.headers.get("x-vercel-ip-timezone") ?? "");
   }
 
-  if (url.pathname.startsWith("/auth/login")) {
+  if (url.pathname.startsWith("/auth/login") || url.pathname.startsWith("/login")) {
     // Use this header to actually enforce CSP, otherwise it is running in Report Only mode on all pages.
     requestHeaders.set("x-csp-enforce", "true");
   }
@@ -68,6 +68,7 @@ export const config = {
   matcher: [
     "/:path*/embed",
     "/api/trpc/:path*",
+    "/login",
     "/auth/login",
     /**
      * Paths required by routingForms.handle

apps/web/next.config.js

@@ -21,11 +21,11 @@ process.env.NEXT_PUBLIC_CALCOM_VERSION = version;
 
 // So we can test deploy previews preview
 if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_WEBAPP_URL) {
-  process.env.NEXT_PUBLIC_WEBAPP_URL = "https://" + process.env.VERCEL_URL;
+  process.env.NEXT_PUBLIC_WEBAPP_URL = `https://${process.env.VERCEL_URL}`;
 }
 // Check for configuration of NEXTAUTH_URL before overriding
 if (!process.env.NEXTAUTH_URL && process.env.NEXT_PUBLIC_WEBAPP_URL) {
-  process.env.NEXTAUTH_URL = process.env.NEXT_PUBLIC_WEBAPP_URL + "/api/auth";
+  process.env.NEXTAUTH_URL = `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/auth`;
 }
 if (!process.env.NEXT_PUBLIC_WEBSITE_URL) {
   process.env.NEXT_PUBLIC_WEBSITE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL;

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.3.3",
+  "version": "3.3.5",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

apps/web/pages/404.tsx

@@ -250,11 +250,8 @@ export default function Custom404() {
                 ) : IS_CALCOM ? (
                   <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
                     {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
-                    <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>.
+                    <strong className="text-blue-500">{username}</strong> {t("is_still_available")}{" "}
+                    <span className="text-blue-500">{t("register_now")}</span>.
                   </a>
                 ) : (
                   <span className="mt-2 inline-block text-lg">

apps/web/pages/[user].tsx

@@ -125,7 +125,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
             {user.away ? (
               <div className="overflow-hidden rounded-sm border ">
                 <div className="text-muted  p-8 text-center">
-                  <h2 className="font-cal text-default mb-2 text-3xl">😴{" " + t("user_away")}</h2>
+                  <h2 className="font-cal text-default mb-2 text-3xl">😴{` ${t("user_away")}`}</h2>
                   <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
                 </div>
               </div>

apps/web/pages/_document.tsx

@@ -29,7 +29,11 @@ class MyDocument extends Document<Props> {
     const asPath = ctx.asPath || "";
     // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
     const parsedUrl = new URL(asPath, "https://dummyurl");
-    const isEmbed = parsedUrl.pathname.endsWith("/embed") || parsedUrl.searchParams.get("embedType") !== null;
+    const isEmbedSnippetGeneratorPath = parsedUrl.pathname.startsWith("/event-types");
+    // FIXME: Revisit this logic to remove embedType query param check completely. Ideally, /embed should always be there at the end of the URL. Test properly and then remove it.
+    const isEmbed =
+      (parsedUrl.pathname.endsWith("/embed") || parsedUrl.searchParams.get("embedType") !== null) &&
+      !isEmbedSnippetGeneratorPath;
     const embedColorScheme = parsedUrl.searchParams.get("ui.color-scheme");
     const initialProps = await Document.getInitialProps(ctx);
     return { isEmbed, embedColorScheme, nonce, ...initialProps };

apps/web/pages/api/auth/oauth/me.ts

@@ -0,0 +1,14 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import isAuthorized from "@calcom/features/auth/lib/oAuthAuthorization";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const requriedScopes = ["READ_PROFILE"];
+
+  const account = await isAuthorized(req, requriedScopes);
+
+  if (!account) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+  return res.status(201).json({ username: account.name });
+}

apps/web/pages/api/auth/oauth/refreshToken.ts

@@ -0,0 +1,68 @@
+import jwt from "jsonwebtoken";
+import type { NextApiRequest, NextApiResponse } from "next";
+import type { OAuthTokenPayload } from "pages/api/auth/oauth/token";
+
+import prisma from "@calcom/prisma";
+import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "POST") {
+    res.status(405).json({ message: "Invalid method" });
+    return;
+  }
+
+  const refreshToken = req.headers.authorization?.split(" ")[1] || "";
+
+  const { client_id, client_secret, grant_type } = req.body;
+
+  if (grant_type !== "refresh_token") {
+    res.status(400).json({ message: "grant type invalid" });
+    return;
+  }
+
+  const [hashedSecret] = generateSecret(client_secret);
+
+  const client = await prisma.oAuthClient.findFirst({
+    where: {
+      clientId: client_id,
+      clientSecret: hashedSecret,
+    },
+    select: {
+      redirectUri: true,
+    },
+  });
+
+  if (!client) {
+    res.status(401).json({ message: "Unauthorized" });
+    return;
+  }
+
+  const secretKey = process.env.CALENDSO_ENCRYPTION_KEY || "";
+
+  let decodedRefreshToken: OAuthTokenPayload;
+
+  try {
+    decodedRefreshToken = jwt.verify(refreshToken, secretKey) as OAuthTokenPayload;
+  } catch {
+    res.status(401).json({ message: "Unauthorized" });
+    return;
+  }
+
+  if (!decodedRefreshToken || decodedRefreshToken.token_type !== "Refresh Token") {
+    res.status(401).json({ message: "Unauthorized" });
+    return;
+  }
+
+  const payload: OAuthTokenPayload = {
+    userId: decodedRefreshToken.userId,
+    scope: decodedRefreshToken.scope,
+    token_type: "Access Token",
+    clientId: client_id,
+  };
+
+  const access_token = jwt.sign(payload, secretKey, {
+    expiresIn: 1800, // 30 min
+  });
+
+  res.status(200).json({ access_token });
+}

apps/web/pages/api/auth/oauth/token.ts

@@ -0,0 +1,104 @@
+import jwt from "jsonwebtoken";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import prisma from "@calcom/prisma";
+import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+
+export type OAuthTokenPayload = {
+  userId?: number | null;
+  teamId?: number | null;
+  token_type: string;
+  scope: string[];
+  clientId: string;
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method !== "POST") {
+    res.status(405).json({ message: "Invalid method" });
+    return;
+  }
+
+  const { code, client_id, client_secret, grant_type, redirect_uri } = req.body;
+
+  if (grant_type !== "authorization_code") {
+    res.status(400).json({ message: "grant_type invalid" });
+    return;
+  }
+
+  const [hashedSecret] = generateSecret(client_secret);
+
+  const client = await prisma.oAuthClient.findFirst({
+    where: {
+      clientId: client_id,
+      clientSecret: hashedSecret,
+    },
+    select: {
+      redirectUri: true,
+    },
+  });
+
+  if (!client || client.redirectUri !== redirect_uri) {
+    res.status(401).json({ message: "Unauthorized" });
+    return;
+  }
+
+  const accessCode = await prisma.accessCode.findFirst({
+    where: {
+      code: code,
+      clientId: client_id,
+      expiresAt: {
+        gt: new Date(),
+      },
+    },
+  });
+
+  //delete all expired accessCodes + the one that is used here
+  await prisma.accessCode.deleteMany({
+    where: {
+      OR: [
+        {
+          expiresAt: {
+            lt: new Date(),
+          },
+        },
+        {
+          code: code,
+          clientId: client_id,
+        },
+      ],
+    },
+  });
+
+  if (!accessCode) {
+    res.status(401).json({ message: "Unauthorized" });
+    return;
+  }
+
+  const secretKey = process.env.CALENDSO_ENCRYPTION_KEY || "";
+
+  const payloadAuthToken: OAuthTokenPayload = {
+    userId: accessCode.userId,
+    teamId: accessCode.teamId,
+    scope: accessCode.scopes,
+    token_type: "Access Token",
+    clientId: client_id,
+  };
+
+  const payloadRefreshToken: OAuthTokenPayload = {
+    userId: accessCode.userId,
+    teamId: accessCode.teamId,
+    scope: accessCode.scopes,
+    token_type: "Refresh Token",
+    clientId: client_id,
+  };
+
+  const access_token = jwt.sign(payloadAuthToken, secretKey, {
+    expiresIn: 1800, // 30 min
+  });
+
+  const refresh_token = jwt.sign(payloadRefreshToken, secretKey, {
+    expiresIn: 30 * 24 * 60 * 60, // 30 days
+  });
+
+  res.status(200).json({ access_token, refresh_token });
+}

apps/web/pages/api/integrations/alby/webhook.ts

@@ -0,0 +1 @@
+export { default, config } from "@calcom/app-store/alby/api/webhook";

apps/web/pages/api/integrations/paypal/webhook.ts

@@ -1 +1 @@
-export { default, config } from "@calcom/features/ee/payments/api/paypal-webhook";
+export { default, config } from "@calcom/app-store/paypal/api/webhook";

apps/web/pages/api/teams/googleworkspace/add.ts

@@ -19,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       return res.status(400).json({ message: "Google client_secret missing." });
 
     // use differnt callback to normal calendar connection
-    const redirect_uri = WEBAPP_URL + "/api/teams/googleworkspace/callback";
+    const redirect_uri = `${WEBAPP_URL}/api/teams/googleworkspace/callback`;
     const oAuth2Client = new google.auth.OAuth2(client_id, client_secret, redirect_uri);
 
     const authUrl = oAuth2Client.generateAuthUrl({

apps/web/pages/api/teams/googleworkspace/callback.ts

@@ -36,7 +36,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (!client_secret || typeof client_secret !== "string")
     return res.status(400).json({ message: "Google client_secret missing." });
 
-  const redirect_uri = WEBAPP_URL + "/api/teams/googleworkspace/callback";
+  const redirect_uri = `${WEBAPP_URL}/api/teams/googleworkspace/callback`;
   const oAuth2Client = new google.auth.OAuth2(client_id, client_secret, redirect_uri);
 
   if (!code) {
@@ -54,11 +54,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   });
 
   if (!teamId) {
-    res.redirect(getSafeRedirectUrl(WEBAPP_URL + "/settings") ?? `${WEBAPP_URL}/teams`);
+    res.redirect(getSafeRedirectUrl(`${WEBAPP_URL}/settings`) ?? `${WEBAPP_URL}/teams`);
   }
 
   res.redirect(
-    getSafeRedirectUrl(WEBAPP_URL + `/settings/teams/${teamId}/members?inviteModal=true&bulk=true`) ??
+    getSafeRedirectUrl(`${WEBAPP_URL}/settings/teams/${teamId}/members?inviteModal=true&bulk=true`) ??
       `${WEBAPP_URL}/teams`
   );
 }

apps/web/pages/api/trpc/oAuth/[trpc].ts

@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { oAuthRouter } from "@calcom/trpc/server/routers/viewer/oAuth/_router";
+
+export default createNextApiHandler(oAuthRouter);

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

@@ -1,14 +1,14 @@
-import type { GetStaticPaths, InferGetStaticPropsType } from "next";
+import type { InferGetServerSidePropsType } from "next";
 import { useSession } from "next-auth/react";
 import { useRouter, useSearchParams } from "next/navigation";
 
 import { AppSetupPage } from "@calcom/app-store/_pages/setup";
-import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
+import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
 import { HeadSeo } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
-export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
+export default function SetupInformation(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const searchParams = useSearchParams();
   const router = useRouter();
   const slug = searchParams?.get("slug") as string;
@@ -36,11 +36,4 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
 
 SetupInformation.PageWrapper = PageWrapper;
 
-export const getStaticPaths: GetStaticPaths = async () => {
-  return {
-    paths: [],
-    fallback: "blocking",
-  };
-};
-
-export { getStaticProps };
+export { getServerSideProps };

apps/web/pages/apps/categories/index.tsx

@@ -31,7 +31,7 @@ export default function Apps({ categories }: inferSSRProps<typeof getServerSideP
           {categories.map((category) => (
             <Link
               key={category.name}
-              href={"/apps/categories/" + category.name}
+              href={`/apps/categories/${category.name}`}
               data-testid={`app-store-category-${category.name}`}
               className="bg-subtle relative flex rounded-sm px-6 py-4 sm:block">
               <div className="self-center">

apps/web/pages/auth/oauth2/authorize.tsx

@@ -0,0 +1,179 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+import { useState, useEffect } from "react";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { Avatar, Button, Select } from "@calcom/ui";
+import { Plus, Info } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
+
+export default function Authorize() {
+  const { t } = useLocale();
+  const { status } = useSession();
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const client_id = searchParams?.get("client_id") as string;
+  const state = searchParams?.get("state") as string;
+  const scope = searchParams?.get("scope") as string;
+
+  const queryString = searchParams.toString();
+
+  const [selectedAccount, setSelectedAccount] = useState<{ value: string; label: string } | null>();
+  const scopes = scope ? scope.toString().split(",") : [];
+
+  const { data: client, isLoading: isLoadingGetClient } = trpc.viewer.oAuth.getClient.useQuery(
+    {
+      clientId: client_id as string,
+    },
+    {
+      enabled: status !== "loading",
+    }
+  );
+
+  const { data, isLoading: isLoadingProfiles } = trpc.viewer.teamsAndUserProfilesQuery.useQuery();
+
+  const generateAuthCodeMutation = trpc.viewer.oAuth.generateAuthCode.useMutation({
+    onSuccess: (data) => {
+      window.location.href = `${client?.redirectUri}?code=${data.authorizationCode}&state=${state}`;
+    },
+  });
+
+  const mappedProfiles = data
+    ? data
+        .filter((profile) => !profile.readOnly)
+        .map((profile) => ({
+          label: profile.name || profile.slug || "",
+          value: profile.slug || "",
+        }))
+    : [];
+
+  useEffect(() => {
+    if (mappedProfiles.length > 0) {
+      setSelectedAccount(mappedProfiles[0]);
+    }
+  }, [isLoadingProfiles]);
+
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      const urlSearchParams = new URLSearchParams({
+        callbackUrl: `auth/oauth2/authorize?${queryString}`,
+      });
+      router.replace(`/auth/login?${urlSearchParams.toString()}`);
+    }
+  }, [status]);
+
+  const isLoading = isLoadingGetClient || isLoadingProfiles || status !== "authenticated";
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (!client) {
+    return <div>{t("unauthorized")}</div>;
+  }
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="mt-2 max-w-xl rounded-md bg-white px-9 pb-3 pt-2">
+        <div className="flex items-center justify-center">
+          <Avatar
+            alt=""
+            fallback={<Plus className="text-subtle h-6 w-6" />}
+            className="items-center"
+            imageSrc={client.logo}
+            size="lg"
+          />
+          <div className="relative -ml-6 h-24 w-24">
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="flex h-[70px] w-[70px] items-center justify-center  rounded-full bg-white">
+                <img src="/cal-com-icon.svg" alt="Logo" className="h-16 w-16 rounded-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <h1 className="px-5 pb-5 pt-3 text-center text-2xl font-bold tracking-tight">
+          {t("access_cal_account", { clientName: client.name, appName: APP_NAME })}
+        </h1>
+        <div className="mb-1 text-sm font-medium">{t("select_account_team")}</div>
+        <Select
+          isSearchable={true}
+          id="account-select"
+          onChange={(value) => {
+            setSelectedAccount(value);
+          }}
+          className="w-52"
+          defaultValue={selectedAccount || mappedProfiles[0]}
+          options={mappedProfiles}
+        />
+        <div className="mb-4 mt-5 font-medium">{t("allow_client_to", { clientName: client.name })}</div>
+        <ul className="space-y-4 text-sm">
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span>{" "}
+            {t("associate_with_cal_account", { clientName: client.name })}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("see_personal_info")}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("see_primary_email_address")}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("connect_installed_apps")}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("access_event_type")}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("access_availability")}
+          </li>
+          <li className="relative pl-5">
+            <span className="absolute left-0">&#10003;</span> {t("access_bookings")}
+          </li>
+        </ul>
+        <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
+          <div>
+            <Info className="mr-1 mt-0.5 h-4 w-4" />
+          </div>
+          <div className="ml-1 ">
+            <div className="mb-1 text-sm font-medium">
+              {t("allow_client_to_do", { clientName: client.name })}
+            </div>
+            <div className="text-sm">{t("oauth_access_information", { appName: APP_NAME })}</div>{" "}
+          </div>
+        </div>
+        <div className="border-subtle border- -mx-9 mb-4 border-b" />
+        <div className="flex justify-end">
+          <Button
+            className="mr-2"
+            color="minimal"
+            onClick={() => {
+              window.location.href = `${client.redirectUri}`;
+            }}>
+            {t("go_back")}
+          </Button>
+          <Button
+            onClick={() => {
+              generateAuthCodeMutation.mutate({
+                clientId: client_id as string,
+                scopes,
+                teamSlug: selectedAccount?.value.startsWith("team/")
+                  ? selectedAccount?.value.substring(5)
+                  : undefined, // team account starts with /team/<slug>
+              });
+            }}
+            data-testid="allow-button">
+            {t("allow")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Authorize.PageWrapper = PageWrapper;

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

@@ -30,12 +30,12 @@ export default function Provider(props: SSOProviderPageProps) {
       const email = searchParams?.get("email");
 
       if (!email) {
-        router.push("/auth/error?error=" + "Email not provided");
+        router.push(`/auth/error?error=Email not provided`);
         return;
       }
 
       if (!props.isSAMLLoginEnabled) {
-        router.push("/auth/error?error=" + "SAML login not enabled");
+        router.push(`/auth/error?error=SAML login not enabled`);
         return;
       }
 
@@ -56,7 +56,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const providerParam = asStringOrNull(context.query.provider);
   const emailParam = asStringOrNull(context.query.email);
   const usernameParam = asStringOrNull(context.query.username);
-  const successDestination = "/getting-started" + (usernameParam ? `?username=${usernameParam}` : "");
+  const successDestination = `/getting-started${usernameParam ? `?username=${usernameParam}` : ""}`;
   if (!providerParam) {
     throw new Error(`File is not named sso/[provider]`);
   }
@@ -120,7 +120,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   if (error) {
     return {
       redirect: {
-        destination: "/auth/error?error=" + error,
+        destination: `/auth/error?error=${error}`,
         permanent: false,
       },
     };

apps/web/pages/auth/verify.tsx

@@ -120,7 +120,7 @@ export default function Verify() {
             ? "Your payment failed"
             : sessionId
             ? "Payment successful!"
-            : "Verify your email" + " | " + APP_NAME}
+            : `Verify your email | ${APP_NAME}`}
         </title>
       </Head>
       <div className="flex min-h-screen flex-col items-center justify-center px-6">

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

@@ -151,7 +151,7 @@ export default function Availability() {
   return (
     <Shell
       backPath={fromEventType ? true : "/availability"}
-      title={schedule?.name ? schedule.name + " | " + t("availability") : t("availability")}
+      title={schedule?.name ? `${schedule.name} | ${t("availability")}` : t("availability")}
       heading={
         <Controller
           control={form.control}

apps/web/pages/availability/troubleshoot.tsx

@@ -133,7 +133,7 @@ Troubleshoot.PageWrapper = PageWrapper;
 function convertMinsToHrsMins(mins: number) {
   const h = Math.floor(mins / 60);
   const m = mins % 60;
-  const hs = h < 10 ? "0" + h : h;
-  const ms = m < 10 ? "0" + m : m;
+  const hs = h < 10 ? `0${h}` : h;
+  const ms = m < 10 ? `0${m}` : m;
   return `${hs}:${ms}`;
 }

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

@@ -23,6 +23,7 @@ import {
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import { SMS_REMINDER_NUMBER_FIELD, SystemField } from "@calcom/features/bookings/lib/SystemField";
 import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
@@ -93,7 +94,7 @@ const querySchema = z.object({
 });
 
 export default function Success(props: SuccessProps) {
-  const { t, i18n } = useLocale();
+  const { t } = useLocale();
   const router = useRouter();
   const routerQuery = useRouterQuery();
   const pathname = usePathname();
@@ -268,13 +269,13 @@ export default function Success(props: SuccessProps) {
     }
     if (needsConfirmation) {
       if (props.profile.name !== null) {
-        return t("user_needs_to_confirm_or_reject_booking" + titleSuffix, {
+        return t(`user_needs_to_confirm_or_reject_booking${titleSuffix}`, {
           user: props.profile.name,
         });
       }
-      return t("needs_to_be_confirmed_or_rejected" + titleSuffix);
+      return t(`needs_to_be_confirmed_or_rejected${titleSuffix}`);
     }
-    return t("emailed_you_and_attendees" + titleSuffix);
+    return t(`emailed_you_and_attendees${titleSuffix}`);
   }
 
   // This is a weird case where the same route can be opened in booking flow as a success page or as a booking detail page from the app
@@ -490,10 +491,7 @@ export default function Success(props: SuccessProps) {
                             : t("payment")}
                         </div>
                         <div className="col-span-2 mb-2 mt-3">
-                          {new Intl.NumberFormat(i18n.language, {
-                            style: "currency",
-                            currency: props.paymentStatus.currency,
-                          }).format(props.paymentStatus.amount / 100.0)}
+                          <Price currency={props.paymentStatus.currency} price={props.paymentStatus.amount} />
                         </div>
                       </>
                     )}
@@ -594,23 +592,24 @@ export default function Success(props: SuccessProps) {
                         </span>
                         <div className="justify-left mt-1 flex text-left sm:mt-0">
                           <Link
-                            href={
-                              `https://calendar.google.com/calendar/r/eventedit?dates=${date
-                                .utc()
-                                .format("YYYYMMDDTHHmmss[Z]")}/${date
-                                .add(calculatedDuration, "minute")
-                                .utc()
-                                .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
-                                props.eventType.description
-                              }` +
-                              (typeof locationVideoCallUrl === "string"
-                                ? "&location=" + encodeURIComponent(locationVideoCallUrl)
-                                : "") +
-                              (props.eventType.recurringEvent
-                                ? "&recur=" +
-                                  encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
-                                : "")
-                            }
+                            href={`https://calendar.google.com/calendar/r/eventedit?dates=${date
+                              .utc()
+                              .format("YYYYMMDDTHHmmss[Z]")}/${date
+                              .add(calculatedDuration, "minute")
+                              .utc()
+                              .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
+                              props.eventType.description
+                            }${
+                              typeof locationVideoCallUrl === "string"
+                                ? `&location=${encodeURIComponent(locationVideoCallUrl)}`
+                                : ""
+                            }${
+                              props.eventType.recurringEvent
+                                ? `&recur=${encodeURIComponent(
+                                    new RRule(props.eventType.recurringEvent).toString()
+                                  )}`
+                                : ""
+                            }`}
                             className="text-default border-subtle h-10 w-10 rounded-sm border px-3 py-2 ltr:mr-2 rtl:ml-2">
                             <svg
                               className="-mt-1.5 inline-block h-4 w-4"
@@ -624,17 +623,17 @@ export default function Success(props: SuccessProps) {
                           <Link
                             href={
                               encodeURI(
-                                "https://outlook.live.com/calendar/0/deeplink/compose?body=" +
-                                  props.eventType.description +
-                                  "&enddt=" +
-                                  date.add(calculatedDuration, "minute").utc().format() +
-                                  "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                  date.utc().format() +
-                                  "&subject=" +
-                                  eventName
+                                `https://outlook.live.com/calendar/0/deeplink/compose?body=${
+                                  props.eventType.description
+                                }&enddt=${date
+                                  .add(calculatedDuration, "minute")
+                                  .utc()
+                                  .format()}&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=${date
+                                  .utc()
+                                  .format()}&subject=${eventName}`
                               ) +
                               (locationVideoCallUrl
-                                ? "&location=" + encodeURIComponent(locationVideoCallUrl)
+                                ? `&location=${encodeURIComponent(locationVideoCallUrl)}`
                                 : "")
                             }
                             className="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
@@ -651,17 +650,17 @@ export default function Success(props: SuccessProps) {
                           <Link
                             href={
                               encodeURI(
-                                "https://outlook.office.com/calendar/0/deeplink/compose?body=" +
-                                  props.eventType.description +
-                                  "&enddt=" +
-                                  date.add(calculatedDuration, "minute").utc().format() +
-                                  "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                  date.utc().format() +
-                                  "&subject=" +
-                                  eventName
+                                `https://outlook.office.com/calendar/0/deeplink/compose?body=${
+                                  props.eventType.description
+                                }&enddt=${date
+                                  .add(calculatedDuration, "minute")
+                                  .utc()
+                                  .format()}&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=${date
+                                  .utc()
+                                  .format()}&subject=${eventName}`
                               ) +
                               (locationVideoCallUrl
-                                ? "&location=" + encodeURIComponent(locationVideoCallUrl)
+                                ? `&location=${encodeURIComponent(locationVideoCallUrl)}`
                                 : "")
                             }
                             className="text-default border-subtle mx-2 h-10 w-10 rounded-sm border px-3 py-2"
@@ -676,9 +675,9 @@ export default function Success(props: SuccessProps) {
                             </svg>
                           </Link>
                           <Link
-                            href={"data:text/calendar," + eventLink()}
+                            href={`data:text/calendar,${eventLink()}`}
                             className="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
-                            download={props.eventType.title + ".ics"}>
+                            download={`${props.eventType.title}.ics`}>
                             <svg
                               version="1.1"
                               fill="currentColor"

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

@@ -449,7 +449,8 @@ const EventTypePage = (props: EventTypeSetupProps) => {
         availability={availability}
         isUpdateMutationLoading={updateMutation.isLoading}
         formMethods={formMethods}
-        disableBorder={tabName === "apps" || tabName === "workflows" || tabName === "webhooks"}
+        // disableBorder={tabName === "apps" || tabName === "workflows" || tabName === "webhooks"}
+        disableBorder={true}
         currentUserMembership={currentUserMembership}
         isUserOrganizationAdmin={props.isUserOrganizationAdmin}>
         <Form

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

@@ -140,13 +140,13 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
     <div>
       <span
         className="text-default font-semibold ltr:mr-1 rtl:ml-1"
-        data-testid={"event-type-title-" + type.id}>
+        data-testid={`event-type-title-${type.id}`}>
         {type.title}
       </span>
       {group.profile.slug ? (
         <small
           className="text-subtle hidden font-normal leading-4 sm:inline"
-          data-testid={"event-type-slug-" + type.id}>
+          data-testid={`event-type-slug-${type.id}`}>
           {`/${
             type.schedulingType !== SchedulingType.MANAGED ? group.profile.slug : t("username_placeholder")
           }/${type.slug}`}
@@ -177,13 +177,13 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
       <div>
         <span
           className="text-default font-semibold ltr:mr-1 rtl:ml-1"
-          data-testid={"event-type-title-" + type.id}>
+          data-testid={`event-type-title-${type.id}`}>
           {type.title}
         </span>
         {group.profile.slug ? (
           <small
             className="text-subtle hidden font-normal leading-4 sm:inline"
-            data-testid={"event-type-slug-" + type.id}>
+            data-testid={`event-type-slug-${type.id}`}>
             {`/${group.profile.slug}/${type.slug}`}
           </small>
         ) : null}
@@ -479,7 +479,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             </>
                           )}
                           <Dropdown modal={false}>
-                            <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
+                            <DropdownMenuTrigger asChild data-testid={`event-type-options-${type.id}`}>
                               <Button
                                 type="button"
                                 variant="icon"
@@ -493,9 +493,9 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <DropdownMenuItem>
                                   <DropdownItem
                                     type="button"
-                                    data-testid={"event-type-edit-" + type.id}
+                                    data-testid={`event-type-edit-${type.id}`}
                                     StartIcon={Edit2}
-                                    onClick={() => router.push("/event-types/" + type.id)}>
+                                    onClick={() => router.push(`/event-types/${type.id}`)}>
                                     {t("edit")}
                                   </DropdownItem>
                                 </DropdownMenuItem>
@@ -505,7 +505,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                   <DropdownMenuItem className="outline-none">
                                     <DropdownItem
                                       type="button"
-                                      data-testid={"event-type-duplicate-" + type.id}
+                                      data-testid={`event-type-duplicate-${type.id}`}
                                       StartIcon={Copy}
                                       onClick={() => openDuplicateModal(type, group)}>
                                       {t("duplicate")}
@@ -555,7 +555,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 </div>
                 <div className="min-w-9 mx-5 flex sm:hidden">
                   <Dropdown>
-                    <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
+                    <DropdownMenuTrigger asChild data-testid={`event-type-options-${type.id}`}>
                       <Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
@@ -573,7 +573,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             </DropdownMenuItem>
                             <DropdownMenuItem className="outline-none">
                               <DropdownItem
-                                data-testid={"event-type-duplicate-" + type.id}
+                                data-testid={`event-type-duplicate-${type.id}`}
                                 onClick={() => {
                                   navigator.clipboard.writeText(calLink);
                                   showToast(t("link_copied"), "success");
@@ -588,7 +588,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {isNativeShare ? (
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
-                              data-testid={"event-type-duplicate-" + type.id}
+                              data-testid={`event-type-duplicate-${type.id}`}
                               onClick={() => {
                                 navigator
                                   .share({
@@ -608,7 +608,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {!readOnly && (
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
-                              onClick={() => router.push("/event-types/" + type.id)}
+                              onClick={() => router.push(`/event-types/${type.id}`)}
                               StartIcon={Edit}
                               className="w-full rounded-none">
                               {t("edit")}
@@ -620,7 +620,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             <DropdownItem
                               onClick={() => openDuplicateModal(type, group)}
                               StartIcon={Copy}
-                              data-testid={"event-type-duplicate-" + type.id}>
+                              data-testid={`event-type-duplicate-${type.id}`}>
                               {t("duplicate")}
                             </DropdownItem>
                           </DropdownMenuItem>

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

@@ -63,14 +63,13 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   const eventType = booking.eventType ? booking.eventType : getDefaultEvent(dynamicEventSlugRef);
 
-  const eventPage =
-    (eventType.team
-      ? "team/" + eventType.team.slug
+  const eventPage = `${
+    eventType.team
+      ? `team/${eventType.team.slug}`
       : dynamicEventSlugRef
       ? booking.dynamicGroupSlugRef
-      : booking.user?.username || "rick") /* This shouldn't happen */ +
-    "/" +
-    eventType?.slug;
+      : booking.user?.username || "rick" /* This shouldn't happen */
+  }/${eventType?.slug}`;
   const destinationUrl = new URLSearchParams();
 
   destinationUrl.set("rescheduleUid", seatReferenceUid || bookingId);

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

@@ -0,0 +1,11 @@
+import PageWrapper from "@components/PageWrapper";
+import { getLayout } from "@components/auth/layouts/AdminLayout";
+
+import OAuthView from "./oAuthView";
+
+const OAuthPage = () => <OAuthView />;
+
+OAuthPage.getLayout = getLayout;
+OAuthPage.PageWrapper = PageWrapper;
+
+export default OAuthPage;

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

@@ -0,0 +1,151 @@
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import { Meta, Form, Button, TextField, showToast, Tooltip, ImageUploader, Avatar } from "@calcom/ui";
+import { Clipboard } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
+
+type FormValues = {
+  name: string;
+  redirectUri: string;
+  logo: string;
+};
+
+export default function OAuthView() {
+  const oAuthForm = useForm<FormValues>();
+  const [clientSecret, setClientSecret] = useState("");
+  const [clientId, setClientId] = useState("");
+  const [logo, setLogo] = useState("");
+  const { t } = useLocale();
+
+  const mutation = trpc.viewer.oAuth.addClient.useMutation({
+    onSuccess: async (data) => {
+      setClientSecret(data.clientSecret);
+      setClientId(data.clientId);
+      showToast(`Successfully added ${data.name} as new client`, "success");
+    },
+    onError: (error) => {
+      showToast(`Adding clientfailed: ${error.message}`, "error");
+    },
+  });
+
+  return (
+    <div>
+      <Meta title="OAuth" description="Add new OAuth Clients" />
+      {!clientId ? (
+        <Form
+          form={oAuthForm}
+          handleSubmit={(values) => {
+            mutation.mutate({
+              name: values.name,
+              redirectUri: values.redirectUri,
+              logo: values.logo,
+            });
+          }}>
+          <div className="">
+            <TextField
+              {...oAuthForm.register("name")}
+              label="Client name"
+              type="text"
+              id="name"
+              placeholder=""
+              className="mb-3"
+              required
+            />
+            <TextField
+              {...oAuthForm.register("redirectUri")}
+              label="Redirect URI"
+              type="text"
+              id="redirectUri"
+              placeholder=""
+              required
+            />
+            <div className="mb-5 mt-5 flex items-center">
+              <Avatar
+                alt=""
+                fallback={<Plus className="text-subtle h-6 w-6" />}
+                className="mr-5 items-center"
+                imageSrc={logo}
+                size="lg"
+              />
+              <ImageUploader
+                target="avatar"
+                id="avatar-upload"
+                buttonMsg="Upload Logo"
+                handleAvatarChange={(newLogo: string) => {
+                  setLogo(newLogo);
+                  oAuthForm.setValue("logo", newLogo);
+                }}
+                imageSrc={logo}
+              />
+            </div>
+          </div>
+          <Button type="submit" className="mt-3">
+            {t("add_client")}
+          </Button>
+        </Form>
+      ) : (
+        <div>
+          <div className="text-emphasis mb-5 text-xl font-semibold">{oAuthForm.getValues("name")}</div>
+          <div className="mb-2 font-medium">Client Id</div>
+          <div className="flex">
+            <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
+              {" "}
+              {clientId}
+            </code>
+            <Tooltip side="top" content="Copy to Clipboard">
+              <Button
+                onClick={() => {
+                  navigator.clipboard.writeText(clientId);
+                  showToast("Client ID copied!", "success");
+                }}
+                type="button"
+                className="rounded-l-none text-base"
+                StartIcon={Clipboard}>
+                {t("copy")}
+              </Button>
+            </Tooltip>
+          </div>
+          {clientSecret ? (
+            <>
+              <div className="mb-2 mt-4 font-medium">Client Secret</div>
+              <div className="flex">
+                <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
+                  {" "}
+                  {clientSecret}
+                </code>
+                <Tooltip side="top" content="Copy to Clipboard">
+                  <Button
+                    onClick={() => {
+                      navigator.clipboard.writeText(clientSecret);
+                      setClientSecret("");
+                      showToast("Client secret copied!", "success");
+                    }}
+                    type="button"
+                    className="rounded-l-none text-base"
+                    StartIcon={Clipboard}>
+                    {t("copy")}
+                  </Button>
+                </Tooltip>
+              </div>
+              <div className="text-subtle text-sm">{t("copy_client_secret_info")}</div>
+            </>
+          ) : (
+            <></>
+          )}
+          <Button
+            onClick={() => {
+              setClientId("");
+              setLogo("");
+              oAuthForm.reset();
+            }}
+            className="mt-5">
+            {t("add_new_client")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -22,12 +22,11 @@ const CtaRow = ({ title, description, className, children }: CtaRowProps) => {
     <>
       <section className={classNames("text-default flex flex-col sm:flex-row", className)}>
         <div>
-          <h2 className="font-medium">{title}</h2>
+          <h2 className="text-base font-semibold">{title}</h2>
           <p>{description}</p>
         </div>
         <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">{children}</div>
       </section>
-      <hr className="border-subtle" />
     </>
   );
 };
@@ -45,14 +44,16 @@ const BillingView = () => {
 
   return (
     <>
-      <Meta title={t("billing")} description={t("manage_billing_description")} />
-      <div className="space-y-6 text-sm sm:space-y-8">
+      <Meta title={t("billing")} description={t("manage_billing_description")} borderInShellHeader={true} />
+      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-8 text-sm sm:space-y-8">
         <CtaRow title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
           <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
             {t("billing_portal")}
           </Button>
         </CtaRow>
 
+        <hr className="border-subtle" />
+
         <CtaRow title={t("need_anything_else")} description={t("further_billing_help")}>
           <Button color="secondary" onClick={onContactSupportClick}>
             {t("contact_support")}

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

@@ -14,12 +14,25 @@ import {
   DialogContent,
   EmptyScreen,
   Meta,
-  AppSkeletonLoader as SkeletonLoader,
+  SkeletonContainer,
+  SkeletonText,
 } from "@calcom/ui";
 import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+  return (
+    <SkeletonContainer>
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-4">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
 const ApiKeysView = () => {
   const { t } = useLocale();
 
@@ -39,49 +52,57 @@ const ApiKeysView = () => {
           setApiKeyToEdit(undefined);
           setApiKeyModal(true);
         }}>
-        {t("new_api_key")}
+        {t("add")}
       </Button>
     );
   };
 
+  if (isLoading || !data) {
+    return (
+      <SkeletonLoader
+        title={t("api_keys")}
+        description={t("create_first_api_key_description", { appName: APP_NAME })}
+      />
+    );
+  }
+
   return (
     <>
       <Meta
         title={t("api_keys")}
         description={t("create_first_api_key_description", { appName: APP_NAME })}
+        CTA={<NewApiKeyButton />}
+        borderInShellHeader={true}
       />
 
       <LicenseRequired>
-        <>
-          {isLoading && <SkeletonLoader />}
-          <div>
-            {isLoading ? null : data?.length ? (
-              <>
-                <div className="border-subtle mb-8 mt-6 rounded-md border">
-                  {data.map((apiKey, index) => (
-                    <ApiKeyListItem
-                      key={apiKey.id}
-                      apiKey={apiKey}
-                      lastItem={data.length === index + 1}
-                      onEditClick={() => {
-                        setApiKeyToEdit(apiKey);
-                        setApiKeyModal(true);
-                      }}
-                    />
-                  ))}
-                </div>
-                <NewApiKeyButton />
-              </>
-            ) : (
-              <EmptyScreen
-                Icon={LinkIcon}
-                headline={t("create_first_api_key")}
-                description={t("create_first_api_key_description", { appName: APP_NAME })}
-                buttonRaw={<NewApiKeyButton />}
-              />
-            )}
-          </div>
-        </>
+        <div>
+          {data?.length ? (
+            <>
+              <div className="border-subtle rounded-b-md border border-t-0">
+                {data.map((apiKey, index) => (
+                  <ApiKeyListItem
+                    key={apiKey.id}
+                    apiKey={apiKey}
+                    lastItem={data.length === index + 1}
+                    onEditClick={() => {
+                      setApiKeyToEdit(apiKey);
+                      setApiKeyModal(true);
+                    }}
+                  />
+                ))}
+              </div>
+            </>
+          ) : (
+            <EmptyScreen
+              Icon={LinkIcon}
+              headline={t("create_first_api_key")}
+              description={t("create_first_api_key_description", { appName: APP_NAME })}
+              className="rounded-b-md rounded-t-none border-t-0"
+              buttonRaw={<NewApiKeyButton />}
+            />
+          )}
+        </div>
       </LicenseRequired>
 
       <Dialog open={apiKeyModal} onOpenChange={setApiKeyModal}>

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

@@ -3,8 +3,10 @@ import { Controller, useForm } from "react-hook-form";
 import type { z } from "zod";
 
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import ThemeLabel from "@calcom/features/settings/ThemeLabel";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { classNames } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
 import { checkWCAGContrastColor } from "@calcom/lib/getBrandColours";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
@@ -12,6 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
 import type { userMetadata } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import {
   Alert,
   Button,
@@ -22,7 +25,7 @@ import {
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
-  Switch,
+  SettingsToggle,
   UpgradeTeamsBadge,
 } from "@calcom/ui";
 
@@ -31,9 +34,9 @@ import PageWrapper from "@components/PageWrapper";
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} />
-      <div className="mb-8 mt-6 space-y-6">
-        <div className="flex items-center">
+      <Meta title={title} description={description} borderInShellHeader={false} />
+      <div className="border-subtle mt-6 space-y-6 rounded-t-xl border border-b-0 px-4 py-6 sm:px-6">
+        <div className="flex items-center justify-center">
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
           <SkeletonButton className="mr-6 h-32 w-48 rounded-md p-5" />
@@ -44,49 +47,83 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
         </div>
 
         <SkeletonText className="h-8 w-full" />
-
-        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+      </div>
+      <div className="rounded-b-xl">
+        <SectionBottomActions align="end">
+          <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+        </SectionBottomActions>
       </div>
     </SkeletonContainer>
   );
 };
 
-const AppearanceView = () => {
+const DEFAULT_LIGHT_BRAND_COLOR = "#292929";
+const DEFAULT_DARK_BRAND_COLOR = "#fafafa";
+
+const AppearanceView = ({
+  user,
+  hasPaidPlan,
+}: {
+  user: RouterOutputs["viewer"]["me"];
+  hasPaidPlan: boolean;
+}) => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
   const [darkModeError, setDarkModeError] = useState(false);
   const [lightModeError, setLightModeError] = useState(false);
+  const [isCustomBrandColorChecked, setIsCustomBranColorChecked] = useState(
+    user?.brandColor !== DEFAULT_LIGHT_BRAND_COLOR || user?.darkBrandColor !== DEFAULT_DARK_BRAND_COLOR
+  );
+  const [hideBrandingValue, setHideBrandingValue] = useState(user?.hideBranding ?? false);
 
-  const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
-
-  const formMethods = useForm({
+  const userThemeFormMethods = useForm({
     defaultValues: {
-      theme: user?.theme,
-      brandColor: user?.brandColor || "#292929",
-      darkBrandColor: user?.darkBrandColor || "#fafafa",
-      hideBranding: user?.hideBranding,
-      metadata: user?.metadata as z.infer<typeof userMetadata>,
+      theme: user.theme,
     },
   });
 
-  const selectedTheme = formMethods.watch("theme");
+  const {
+    formState: { isSubmitting: isUserThemeSubmitting, isDirty: isUserThemeDirty },
+    reset: resetUserThemeReset,
+  } = userThemeFormMethods;
+
+  const bookerLayoutFormMethods = useForm({
+    defaultValues: {
+      metadata: user.metadata as z.infer<typeof userMetadata>,
+    },
+  });
+
+  const {
+    formState: { isSubmitting: isBookerLayoutFormSubmitting, isDirty: isBookerLayoutFormDirty },
+    reset: resetBookerLayoutThemeReset,
+  } = bookerLayoutFormMethods;
+
+  const brandColorsFormMethods = useForm({
+    defaultValues: {
+      brandColor: user.brandColor || DEFAULT_LIGHT_BRAND_COLOR,
+      darkBrandColor: user.darkBrandColor || DEFAULT_DARK_BRAND_COLOR,
+    },
+  });
+
+  const {
+    formState: { isSubmitting: isBrandColorsFormSubmitting, isDirty: isBrandColorsFormDirty },
+    reset: resetBrandColorsThemeReset,
+  } = brandColorsFormMethods;
+
+  const selectedTheme = userThemeFormMethods.watch("theme");
   const selectedThemeIsDark =
     selectedTheme === "dark" ||
     (selectedTheme === "" &&
       typeof document !== "undefined" &&
       document.documentElement.classList.contains("dark"));
 
-  const {
-    formState: { isSubmitting, isDirty },
-    reset,
-  } = formMethods;
-
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (data) => {
       await utils.viewer.me.invalidate();
       showToast(t("settings_updated_successfully"), "success");
-      reset(data);
+      resetBrandColorsThemeReset({ brandColor: data.brandColor, darkBrandColor: data.darkBrandColor });
+      resetBookerLayoutThemeReset({ metadata: data.metadata });
+      resetUserThemeReset({ theme: data.theme });
     },
     onError: (error) => {
       if (error.message) {
@@ -97,136 +134,180 @@ const AppearanceView = () => {
     },
   });
 
-  if (isLoading || isTeamPlanStatusLoading)
-    return <SkeletonLoader title={t("appearance")} description={t("appearance_description")} />;
-
-  if (!user) return null;
-
-  const isDisabled = isSubmitting || !isDirty;
-
   return (
-    <Form
-      form={formMethods}
-      handleSubmit={(values) => {
-        const layoutError = validateBookerLayouts(values?.metadata?.defaultBookerLayouts || null);
-        if (layoutError) throw new Error(t(layoutError));
-
-        mutation.mutate({
-          ...values,
-          // Radio values don't support null as values, therefore we convert an empty string
-          // back to null here.
-          theme: values.theme || null,
-        });
-      }}>
-      <Meta title={t("appearance")} description={t("appearance_description")} />
-      <div className="mb-6 flex items-center text-sm">
+    <div>
+      <Meta title={t("appearance")} description={t("appearance_description")} borderInShellHeader={false} />
+      <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
         <div>
-          <p className="text-default font-semibold">{t("theme")}</p>
+          <p className="text-default text-base font-semibold">{t("theme")}</p>
           <p className="text-default">{t("theme_applies_note")}</p>
         </div>
       </div>
-      <div className="flex flex-col justify-between sm:flex-row">
-        <ThemeLabel
-          variant="system"
-          value={null}
-          label={t("theme_system")}
-          defaultChecked={user.theme === null}
-          register={formMethods.register}
-        />
-        <ThemeLabel
-          variant="light"
-          value="light"
-          label={t("light")}
-          defaultChecked={user.theme === "light"}
-          register={formMethods.register}
-        />
-        <ThemeLabel
-          variant="dark"
-          value="dark"
-          label={t("dark")}
-          defaultChecked={user.theme === "dark"}
-          register={formMethods.register}
-        />
-      </div>
-
-      <hr className="border-subtle my-8 border [&:has(+hr)]:hidden" />
-      <BookerLayoutSelector
-        isDark={selectedThemeIsDark}
-        name="metadata.defaultBookerLayouts"
-        title={t("bookerlayout_user_settings_title")}
-        description={t("bookerlayout_user_settings_description")}
-      />
-
-      <hr className="border-subtle my-8 border" />
-      <div className="mb-6 flex items-center text-sm">
-        <div>
-          <p className="text-default font-semibold">{t("custom_brand_colors")}</p>
-          <p className="text-default mt-0.5 leading-5">{t("customize_your_brand_colors")}</p>
+      <Form
+        form={userThemeFormMethods}
+        handleSubmit={(values) => {
+          mutation.mutate({
+            // Radio values don't support null as values, therefore we convert an empty string
+            // back to null here.
+            theme: values.theme || null,
+          });
+        }}>
+        <div className="border-subtle flex flex-col justify-between border-x px-6 py-8 sm:flex-row">
+          <ThemeLabel
+            variant="system"
+            value={null}
+            label={t("theme_system")}
+            defaultChecked={user.theme === null}
+            register={userThemeFormMethods.register}
+          />
+          <ThemeLabel
+            variant="light"
+            value="light"
+            label={t("light")}
+            defaultChecked={user.theme === "light"}
+            register={userThemeFormMethods.register}
+          />
+          <ThemeLabel
+            variant="dark"
+            value="dark"
+            label={t("dark")}
+            defaultChecked={user.theme === "dark"}
+            register={userThemeFormMethods.register}
+          />
         </div>
-      </div>
+        <SectionBottomActions className="mb-6" align="end">
+          <Button
+            disabled={isUserThemeSubmitting || !isUserThemeDirty}
+            type="submit"
+            data-testid="update-theme-btn"
+            color="primary">
+            {t("update")}
+          </Button>
+        </SectionBottomActions>
+      </Form>
 
-      <div className="block justify-between sm:flex">
-        <Controller
-          name="brandColor"
-          control={formMethods.control}
-          defaultValue={user.brandColor}
-          render={() => (
-            <div>
-              <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
-              <ColorPicker
+      <Form
+        form={bookerLayoutFormMethods}
+        handleSubmit={(values) => {
+          const layoutError = validateBookerLayouts(values?.metadata?.defaultBookerLayouts || null);
+          if (layoutError) {
+            showToast(t(layoutError), "error");
+            return;
+          } else {
+            mutation.mutate(values);
+          }
+        }}>
+        <BookerLayoutSelector
+          isDark={selectedThemeIsDark}
+          name="metadata.defaultBookerLayouts"
+          title={t("bookerlayout_user_settings_title")}
+          description={t("bookerlayout_user_settings_description")}
+          isDisabled={isBookerLayoutFormSubmitting || !isBookerLayoutFormDirty}
+        />
+      </Form>
+
+      <Form
+        form={brandColorsFormMethods}
+        handleSubmit={(values) => {
+          mutation.mutate(values);
+        }}>
+        <div className="mt-6">
+          <SettingsToggle
+            toggleSwitchAtTheEnd={true}
+            title={t("custom_brand_colors")}
+            description={t("customize_your_brand_colors")}
+            checked={isCustomBrandColorChecked}
+            onCheckedChange={(checked) => {
+              setIsCustomBranColorChecked(checked);
+              if (!checked) {
+                mutation.mutate({
+                  brandColor: DEFAULT_LIGHT_BRAND_COLOR,
+                  darkBrandColor: DEFAULT_DARK_BRAND_COLOR,
+                });
+              }
+            }}
+            childrenClassName="lg:ml-0"
+            switchContainerClassName={classNames(
+              "py-6 px-4 sm:px-6 border-subtle rounded-xl border",
+              isCustomBrandColorChecked && "rounded-b-none"
+            )}>
+            <div className="border-subtle flex flex-col gap-6 border-x p-6">
+              <Controller
+                name="brandColor"
+                control={brandColorsFormMethods.control}
                 defaultValue={user.brandColor}
-                resetDefaultValue="#292929"
-                onChange={(value) => {
-                  if (!checkWCAGContrastColor("#ffffff", value)) {
-                    setLightModeError(true);
-                  } else {
-                    setLightModeError(false);
-                  }
-                  formMethods.setValue("brandColor", value, { shouldDirty: true });
-                }}
+                render={() => (
+                  <div>
+                    <p className="text-default mb-2 block text-sm font-medium">{t("light_brand_color")}</p>
+                    <ColorPicker
+                      defaultValue={user.brandColor}
+                      resetDefaultValue="#292929"
+                      onChange={(value) => {
+                        try {
+                          checkWCAGContrastColor("#ffffff", value);
+                          setLightModeError(false);
+                          brandColorsFormMethods.setValue("brandColor", value, { shouldDirty: true });
+                        } catch (err) {
+                          setLightModeError(false);
+                        }
+                      }}
+                    />
+                    {lightModeError ? (
+                      <div className="mt-4">
+                        <Alert
+                          severity="warning"
+                          message="Light Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
+                        />
+                      </div>
+                    ) : null}
+                  </div>
+                )}
               />
-            </div>
-          )}
-        />
-        <Controller
-          name="darkBrandColor"
-          control={formMethods.control}
-          defaultValue={user.darkBrandColor}
-          render={() => (
-            <div className="mt-6 sm:mt-0">
-              <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
-              <ColorPicker
+
+              <Controller
+                name="darkBrandColor"
+                control={brandColorsFormMethods.control}
                 defaultValue={user.darkBrandColor}
-                resetDefaultValue="#fafafa"
-                onChange={(value) => {
-                  if (!checkWCAGContrastColor("#101010", value)) {
-                    setDarkModeError(true);
-                  } else {
-                    setDarkModeError(false);
-                  }
-                  formMethods.setValue("darkBrandColor", value, { shouldDirty: true });
-                }}
+                render={() => (
+                  <div className="mt-6 sm:mt-0">
+                    <p className="text-default mb-2 block text-sm font-medium">{t("dark_brand_color")}</p>
+                    <ColorPicker
+                      defaultValue={user.darkBrandColor}
+                      resetDefaultValue="#fafafa"
+                      onChange={(value) => {
+                        try {
+                          checkWCAGContrastColor("#101010", value);
+                          setDarkModeError(false);
+                          brandColorsFormMethods.setValue("darkBrandColor", value, { shouldDirty: true });
+                        } catch (err) {
+                          setDarkModeError(true);
+                        }
+                      }}
+                    />
+                    {darkModeError ? (
+                      <div className="mt-4">
+                        <Alert
+                          severity="warning"
+                          message="Dark Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
+                        />
+                      </div>
+                    ) : null}
+                  </div>
+                )}
               />
             </div>
-          )}
-        />
-      </div>
-      {darkModeError ? (
-        <div className="mt-4">
-          <Alert
-            severity="warning"
-            message="Dark Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
-          />
+            <SectionBottomActions align="end">
+              <Button
+                disabled={isBrandColorsFormSubmitting || !isBrandColorsFormDirty}
+                color="primary"
+                type="submit">
+                {t("update")}
+              </Button>
+            </SectionBottomActions>
+          </SettingsToggle>
         </div>
-      ) : null}
-      {lightModeError ? (
-        <div className="mt-4">
-          <Alert
-            severity="warning"
-            message="Light Theme color doesn't pass contrast check. We recommend you change this colour so your buttons will be more visible."
-          />
-        </div>
-      ) : null}
+      </Form>
+
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
@@ -235,51 +316,37 @@ const AppearanceView = () => {
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
       </Button> */}
-      <hr className="border-subtle my-8 border" />
-      <Controller
-        name="hideBranding"
-        control={formMethods.control}
-        defaultValue={user.hideBranding}
-        render={({ field: { value } }) => (
-          <>
-            <div className="flex w-full text-sm">
-              <div className="mr-1 flex-grow">
-                <div className="flex items-center">
-                  <p className="text-default font-semibold ltr:mr-2 rtl:ml-2">
-                    {t("disable_cal_branding", { appName: APP_NAME })}
-                  </p>
-                  <UpgradeTeamsBadge />
-                </div>
-                <p className="text-default  mt-0.5">{t("removes_cal_branding", { appName: APP_NAME })}</p>
-              </div>
-              <div className="flex-none">
-                <Switch
-                  id="hideBranding"
-                  disabled={!hasPaidPlan}
-                  onCheckedChange={(checked) =>
-                    formMethods.setValue("hideBranding", checked, { shouldDirty: true })
-                  }
-                  checked={hasPaidPlan ? value : false}
-                />
-              </div>
-            </div>
-          </>
-        )}
+
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        title={t("disable_cal_branding", { appName: APP_NAME })}
+        disabled={!hasPaidPlan || mutation?.isLoading}
+        description={t("removes_cal_branding", { appName: APP_NAME })}
+        checked={hasPaidPlan ? hideBrandingValue : false}
+        Badge={<UpgradeTeamsBadge />}
+        onCheckedChange={(checked) => {
+          setHideBrandingValue(checked);
+          mutation.mutate({ hideBranding: checked });
+        }}
+        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
       />
-      <Button
-        disabled={isDisabled}
-        type="submit"
-        loading={mutation.isLoading}
-        color="primary"
-        className="mt-8"
-        data-testid="update-theme-btn">
-        {t("update")}
-      </Button>
-    </Form>
+    </div>
   );
 };
 
-AppearanceView.getLayout = getLayout;
-AppearanceView.PageWrapper = PageWrapper;
+const AppearanceViewWrapper = () => {
+  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
 
-export default AppearanceView;
+  const { t } = useLocale();
+
+  if (isLoading || isTeamPlanStatusLoading || !user)
+    return <SkeletonLoader title={t("appearance")} description={t("appearance_description")} />;
+
+  return <AppearanceView user={user} hasPaidPlan={hasPaidPlan} />;
+};
+
+AppearanceViewWrapper.getLayout = getLayout;
+AppearanceViewWrapper.PageWrapper = PageWrapper;
+
+export default AppearanceViewWrapper;

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

@@ -1,11 +1,12 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Fragment } from "react";
+import { Fragment, useState, useEffect } from "react";
 
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import { CalendarSwitch } from "@calcom/features/calendars/CalendarSwitch";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -34,13 +35,13 @@ import PageWrapper from "@components/PageWrapper";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mb-8 mt-6 space-y-6">
+      <div className="border-subtle mt-8 space-y-6 rounded-xl border px-4 py-6 sm:px-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
 
-        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+        <SkeletonButton className="ml-auto h-8 w-20 rounded-md p-5" />
       </div>
     </SkeletonContainer>
   );
@@ -65,6 +66,21 @@ const CalendarsView = () => {
   const utils = trpc.useContext();
 
   const query = trpc.viewer.connectedCalendars.useQuery();
+
+  const [selectedDestinationCalendarOption, setSelectedDestinationCalendar] = useState<{
+    integration: string;
+    externalId: string;
+  } | null>(null);
+
+  useEffect(() => {
+    if (query?.data?.destinationCalendar) {
+      setSelectedDestinationCalendar({
+        integration: query.data.destinationCalendar.integration,
+        externalId: query.data.destinationCalendar.externalId,
+      });
+    }
+  }, [query?.isLoading, query?.data?.destinationCalendar]);
+
   const mutation = trpc.viewer.setDestinationCalendar.useMutation({
     async onSettled() {
       await utils.viewer.connectedCalendars.invalidate();
@@ -79,43 +95,58 @@ const CalendarsView = () => {
 
   return (
     <>
-      <Meta title={t("calendars")} description={t("calendars_description")} CTA={<AddCalendarButton />} />
+      <Meta
+        title={t("calendars")}
+        description={t("calendars_description")}
+        CTA={<AddCalendarButton />}
+        borderInShellHeader={false}
+      />
       <QueryCell
         query={query}
         customLoader={<SkeletonLoader />}
         success={({ data }) => {
+          const isDestinationUpdateBtnDisabled =
+            selectedDestinationCalendarOption?.externalId === query?.data?.destinationCalendar?.externalId;
           return data.connectedCalendars.length ? (
             <div>
-              <div className="bg-muted border-subtle mt-4 flex space-x-4 rounded-md p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
-                <div className=" bg-default border-subtle flex h-9 w-9 items-center justify-center rounded-md border-2 p-[6px]">
-                  <Calendar className="text-default h-6 w-6" />
-                </div>
-
-                <div className="flex w-full flex-col space-y-3">
-                  <div>
-                    <h4 className=" text-emphasis pb-2 text-base font-semibold leading-5">
-                      {t("add_to_calendar")}
-                    </h4>
-                    <p className=" text-default text-sm leading-5">
-                      <Trans i18nKey="add_to_calendar_description">
-                        Where to add events when you re booked. You can override this on a per-event basis in
-                        advanced settings in the event type.
-                      </Trans>
-                    </p>
-                  </div>
-                  <DestinationCalendarSelector
-                    hidePlaceholder
-                    value={data.destinationCalendar?.externalId}
-                    onChange={mutation.mutate}
-                    isLoading={mutation.isLoading}
-                  />
-                </div>
+              <div className="border-subtle mt-8 rounded-t-xl border px-4 py-6 sm:px-6">
+                <h2 className="text-emphasis mb-1 text-base font-bold leading-5 tracking-wide">
+                  {t("add_to_calendar")}
+                </h2>
+                <p className="text-default text-sm">{t("add_to_calendar_description")}</p>
               </div>
-              <h4 className="text-emphasis mt-12 text-base font-semibold leading-5">
-                {t("check_for_conflicts")}
-              </h4>
-              <p className="text-default pb-2 text-sm leading-5">{t("select_calendars")}</p>
-              <List className="flex flex-col gap-6" noBorderTreatment>
+              <div className="border-subtle flex w-full flex-col space-y-3 border border-x border-y-0 px-4 py-6 sm:px-6">
+                <DestinationCalendarSelector
+                  hidePlaceholder
+                  value={selectedDestinationCalendarOption?.externalId}
+                  onChange={(option) => {
+                    setSelectedDestinationCalendar(option);
+                  }}
+                  isLoading={mutation.isLoading}
+                />
+              </div>
+              <SectionBottomActions align="end">
+                <Button
+                  loading={mutation.isLoading}
+                  disabled={isDestinationUpdateBtnDisabled}
+                  color="primary"
+                  onClick={() => {
+                    if (selectedDestinationCalendarOption) mutation.mutate(selectedDestinationCalendarOption);
+                  }}>
+                  {t("update")}
+                </Button>
+              </SectionBottomActions>
+
+              <div className="border-subtle mt-8 rounded-t-xl border px-4 py-6 sm:px-6">
+                <h4 className="text-emphasis text-base font-semibold leading-5">
+                  {t("check_for_conflicts")}
+                </h4>
+                <p className="text-default pb-2 text-sm leading-5">{t("select_calendars")}</p>
+              </div>
+
+              <List
+                className="border-subtle flex flex-col gap-6 rounded-b-xl border border-t-0 p-6"
+                noBorderTreatment>
                 {data.connectedCalendars.map((item) => (
                   <Fragment key={item.credentialId}>
                     {item.error && item.error.message && (
@@ -159,7 +190,7 @@ const CalendarsView = () => {
                           }
                           <div className="flex-grow truncate pl-2">
                             <ListItemTitle component="h3" className="mb-1 space-x-2 rtl:space-x-reverse">
-                              <Link href={"/apps/" + item.integration.slug}>
+                              <Link href={`/apps/${item.integration.slug}`}>
                                 {item.integration.name || item.integration.title}
                               </Link>
                               {data?.destinationCalendar?.credentialId === item.credentialId && (
@@ -207,6 +238,7 @@ const CalendarsView = () => {
               description={t("no_calendar_installed_description")}
               buttonText={t("add_a_calendar")}
               buttonOnClick={() => router.push("/apps/categories/calendar")}
+              className="mt-6"
             />
           );
         }}

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

@@ -15,8 +15,8 @@ import { AppList } from "@components/apps/AppList";
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} />
-      <div className="divide-subtle mb-8 mt-6 space-y-6">
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="divide-subtle border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
@@ -28,11 +28,9 @@ const AddConferencingButton = () => {
   const { t } = useLocale();
 
   return (
-    <>
-      <Button color="secondary" StartIcon={Plus} href="/apps/categories/conferencing">
-        {t("add_conferencing_app")}
-      </Button>
-    </>
+    <Button color="secondary" StartIcon={Plus} href="/apps/categories/conferencing">
+      {t("add")}
+    </Button>
   );
 };
 
@@ -72,6 +70,7 @@ const ConferencingLayout = () => {
           title={t("conferencing")}
           description={t("conferencing_description")}
           CTA={<AddConferencingButton />}
+          borderInShellHeader={true}
         />
         <QueryCell
           query={query}
@@ -93,13 +92,20 @@ const ConferencingLayout = () => {
                       color="secondary"
                       data-testid="connect-conferencing-apps"
                       href="/apps/categories/conferencing">
-                      {t("connect_conferencing_apps")}
+                      {t("connect_conference_apps")}
                     </Button>
                   }
                 />
               );
             }
-            return <AppList handleDisconnect={handleDisconnect} data={data} variant="conferencing" />;
+            return (
+              <AppList
+                listClassName="rounded-xl rounded-t-none border-t-0"
+                handleDisconnect={handleDisconnect}
+                data={data}
+                variant="conferencing"
+              />
+            );
           }}
         />
       </div>

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

@@ -1,6 +1,8 @@
 import { useSession } from "next-auth/react";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localeOptions } from "@calcom/lib/i18n";
@@ -13,12 +15,12 @@ import {
   Label,
   Meta,
   Select,
-  SettingsToggle,
   showToast,
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
   TimezoneSelect,
+  SettingsToggle,
 } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
@@ -26,14 +28,14 @@ import PageWrapper from "@components/PageWrapper";
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} />
-      <div className="mb-8 mt-6 space-y-6">
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8 sm:px-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
 
-        <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+        <SkeletonButton className="ml-auto h-8 w-20 rounded-md p-5" />
       </div>
     </SkeletonContainer>
   );
@@ -59,6 +61,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
   const utils = trpc.useContext();
   const { t } = useLocale();
   const { update } = useSession();
+  const [isUpdateBtnLoading, setIsUpdateBtnLoading] = useState<boolean>(false);
 
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (res) => {
@@ -72,6 +75,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
     },
     onSettled: async () => {
       await utils.viewer.me.invalidate();
+      setIsUpdateBtnLoading(false);
     },
   });
 
@@ -105,9 +109,6 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         value: user.weekStart,
         label: nameOfDay(localeProp, user.weekStart === "Sunday" ? 0 : 1),
       },
-      allowDynamicBooking: user.allowDynamicBooking ?? true,
-      allowSEOIndexing: user.allowSEOIndexing ?? true,
-      receiveMonthlyDigestEmail: user.receiveMonthlyDigestEmail ?? true,
     },
   });
   const {
@@ -117,151 +118,150 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
   } = formMethods;
   const isDisabled = isSubmitting || !isDirty;
 
+  const [isAllowDynamicBookingChecked, setIsAllowDynamicBookingChecked] = useState(
+    !!user.allowDynamicBooking
+  );
+  const [isAllowSEOIndexingChecked, setIsAllowSEOIndexingChecked] = useState(!!user.allowSEOIndexing);
+  const [isReceiveMonthlyDigestEmailChecked, setIsReceiveMonthlyDigestEmailChecked] = useState(
+    !!user.receiveMonthlyDigestEmail
+  );
+
   return (
-    <Form
-      form={formMethods}
-      handleSubmit={(values) => {
-        mutation.mutate({
-          ...values,
-          locale: values.locale.value,
-          timeFormat: values.timeFormat.value,
-          weekStart: values.weekStart.value,
-        });
-      }}>
-      <Meta title={t("general")} description={t("general_description")} />
-      <Controller
-        name="locale"
-        render={({ field: { value, onChange } }) => (
-          <>
-            <Label className="text-emphasis">
-              <>{t("language")}</>
-            </Label>
-            <Select<{ label: string; value: string }>
-              className="capitalize"
-              options={localeOptions}
-              value={value}
-              onChange={onChange}
-            />
-          </>
-        )}
-      />
-      <Controller
-        name="timeZone"
-        control={formMethods.control}
-        render={({ field: { value } }) => (
-          <>
-            <Label className="text-emphasis mt-8">
-              <>{t("timezone")}</>
-            </Label>
-            <TimezoneSelect
-              id="timezone"
-              value={value}
-              onChange={(event) => {
-                if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true });
-              }}
-            />
-          </>
-        )}
-      />
-      <Controller
-        name="timeFormat"
-        control={formMethods.control}
-        render={({ field: { value } }) => (
-          <>
-            <Label className="text-emphasis mt-8">
-              <>{t("time_format")}</>
-            </Label>
-            <Select
-              value={value}
-              options={timeFormatOptions}
-              onChange={(event) => {
-                if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
-              }}
-            />
-          </>
-        )}
-      />
-      <div className="text-gray text-default mt-2 flex items-center text-sm">
-        {t("timeformat_profile_hint")}
-      </div>
-      <Controller
-        name="weekStart"
-        control={formMethods.control}
-        render={({ field: { value } }) => (
-          <>
-            <Label className="text-emphasis mt-8">
-              <>{t("start_of_week")}</>
-            </Label>
-            <Select
-              value={value}
-              options={weekStartOptions}
-              onChange={(event) => {
-                if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
-              }}
-            />
-          </>
-        )}
-      />
-      <div className="mt-8">
-        <Controller
-          name="allowDynamicBooking"
-          control={formMethods.control}
-          render={() => (
-            <SettingsToggle
-              title={t("dynamic_booking")}
-              description={t("allow_dynamic_booking")}
-              checked={formMethods.getValues("allowDynamicBooking")}
-              onCheckedChange={(checked) => {
-                formMethods.setValue("allowDynamicBooking", checked, { shouldDirty: true });
-              }}
-            />
-          )}
-        />
-      </div>
+    <div>
+      <Form
+        form={formMethods}
+        handleSubmit={(values) => {
+          setIsUpdateBtnLoading(true);
+          mutation.mutate({
+            ...values,
+            locale: values.locale.value,
+            timeFormat: values.timeFormat.value,
+            weekStart: values.weekStart.value,
+          });
+        }}>
+        <Meta title={t("general")} description={t("general_description")} borderInShellHeader={true} />
+        <div className="border-subtle border-x border-y-0 px-4 py-8 sm:px-6">
+          <Controller
+            name="locale"
+            render={({ field: { value, onChange } }) => (
+              <>
+                <Label className="text-emphasis">
+                  <>{t("language")}</>
+                </Label>
+                <Select<{ label: string; value: string }>
+                  className="capitalize"
+                  options={localeOptions}
+                  value={value}
+                  onChange={onChange}
+                />
+              </>
+            )}
+          />
+          <Controller
+            name="timeZone"
+            control={formMethods.control}
+            render={({ field: { value } }) => (
+              <>
+                <Label className="text-emphasis mt-6">
+                  <>{t("timezone")}</>
+                </Label>
+                <TimezoneSelect
+                  id="timezone"
+                  value={value}
+                  onChange={(event) => {
+                    if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true });
+                  }}
+                />
+              </>
+            )}
+          />
+          <Controller
+            name="timeFormat"
+            control={formMethods.control}
+            render={({ field: { value } }) => (
+              <>
+                <Label className="text-emphasis mt-6">
+                  <>{t("time_format")}</>
+                </Label>
+                <Select
+                  value={value}
+                  options={timeFormatOptions}
+                  onChange={(event) => {
+                    if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
+                  }}
+                />
+              </>
+            )}
+          />
+          <div className="text-gray text-default mt-2 flex items-center text-sm">
+            {t("timeformat_profile_hint")}
+          </div>
+          <Controller
+            name="weekStart"
+            control={formMethods.control}
+            render={({ field: { value } }) => (
+              <>
+                <Label className="text-emphasis mt-6">
+                  <>{t("start_of_week")}</>
+                </Label>
+                <Select
+                  value={value}
+                  options={weekStartOptions}
+                  onChange={(event) => {
+                    if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
+                  }}
+                />
+              </>
+            )}
+          />
+        </div>
 
-      <div className="mt-8">
-        <Controller
-          name="allowSEOIndexing"
-          control={formMethods.control}
-          render={() => (
-            <SettingsToggle
-              title={t("seo_indexing")}
-              description={t("allow_seo_indexing")}
-              checked={formMethods.getValues("allowSEOIndexing")}
-              onCheckedChange={(checked) => {
-                formMethods.setValue("allowSEOIndexing", checked, { shouldDirty: true });
-              }}
-            />
-          )}
-        />
-      </div>
+        <SectionBottomActions align="end">
+          <Button loading={isUpdateBtnLoading} disabled={isDisabled} color="primary" type="submit">
+            <>{t("update")}</>
+          </Button>
+        </SectionBottomActions>
+      </Form>
 
-      <div className="mt-8">
-        <Controller
-          name="receiveMonthlyDigestEmail"
-          control={formMethods.control}
-          render={() => (
-            <SettingsToggle
-              title={t("monthly_digest_email")}
-              description={t("monthly_digest_email_for_teams")}
-              checked={formMethods.getValues("receiveMonthlyDigestEmail")}
-              onCheckedChange={(checked) => {
-                formMethods.setValue("receiveMonthlyDigestEmail", checked, { shouldDirty: true });
-              }}
-            />
-          )}
-        />
-      </div>
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        title={t("dynamic_booking")}
+        description={t("allow_dynamic_booking")}
+        disabled={mutation.isLoading}
+        checked={isAllowDynamicBookingChecked}
+        onCheckedChange={(checked) => {
+          setIsAllowDynamicBookingChecked(checked);
+          mutation.mutate({ allowDynamicBooking: checked });
+        }}
+        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+      />
 
-      <Button
-        loading={mutation.isLoading}
-        disabled={isDisabled}
-        color="primary"
-        type="submit"
-        className="mt-8">
-        <>{t("update")}</>
-      </Button>
-    </Form>
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        title={t("seo_indexing")}
+        description={t("allow_seo_indexing")}
+        disabled={mutation.isLoading}
+        checked={isAllowSEOIndexingChecked}
+        onCheckedChange={(checked) => {
+          setIsAllowSEOIndexingChecked(checked);
+          mutation.mutate({ allowSEOIndexing: checked });
+        }}
+        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+      />
+
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        title={t("monthly_digest_email")}
+        description={t("monthly_digest_email_for_teams")}
+        disabled={mutation.isLoading}
+        checked={isReceiveMonthlyDigestEmailChecked}
+        onCheckedChange={(checked) => {
+          setIsReceiveMonthlyDigestEmailChecked(checked);
+          mutation.mutate({ receiveMonthlyDigestEmail: checked });
+        }}
+        switchContainerClassName="border-subtle mt-6 rounded-xl border py-6 px-4 sm:px-6"
+      />
+    </div>
   );
 };
 

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

@@ -7,8 +7,10 @@ import { z } from "zod";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import OrganizationAvatar from "@calcom/features/ee/organizations/components/OrganizationAvatar";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME, FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import turndown from "@calcom/lib/turndownService";
@@ -47,8 +49,8 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
-      <Meta title={title} description={description} />
-      <div className="mb-8 space-y-6">
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
@@ -69,18 +71,37 @@ interface DeleteAccountValues {
 
 type FormValues = {
   username: string;
-  avatar: string;
+  avatar: string | null;
   name: string;
   email: string;
   bio: string;
 };
 
+const checkIfItFallbackImage = (fetchedImgSrc: string) => {
+  return fetchedImgSrc.endsWith(AVATAR_FALLBACK);
+};
+
 const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const { update } = useSession();
 
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const [fetchedImgSrc, setFetchedImgSrc] = useState<string | undefined>(undefined);
+
+  const { data: user, isLoading } = trpc.viewer.me.useQuery(undefined, {
+    onSuccess: async (userData) => {
+      try {
+        if (!userData.organization) {
+          const res = await fetch(userData.avatar);
+          if (res.url) setFetchedImgSrc(res.url);
+        } else {
+          setFetchedImgSrc("");
+        }
+      } catch (err) {
+        setFetchedImgSrc("");
+      }
+    },
+  });
   const updateProfileMutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: async (res) => {
       await update(res);
@@ -204,7 +225,7 @@ const ProfileView = () => {
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
 
-  if (isLoading || !user)
+  if (isLoading || !user || fetchedImgSrc === undefined)
     return (
       <SkeletonLoader title={t("profile")} description={t("profile_description", { appName: APP_NAME })} />
     );
@@ -219,11 +240,17 @@ const ProfileView = () => {
 
   return (
     <>
-      <Meta title={t("profile")} description={t("profile_description", { appName: APP_NAME })} />
+      <Meta
+        title={t("profile")}
+        description={t("profile_description", { appName: APP_NAME })}
+        borderInShellHeader={true}
+      />
       <ProfileForm
         key={JSON.stringify(defaultValues)}
         defaultValues={defaultValues}
         isLoading={updateProfileMutation.isLoading}
+        isFallbackImg={checkIfItFallbackImage(fetchedImgSrc)}
+        userAvatar={user.avatar}
         userOrganization={user.organization}
         onSubmit={(values) => {
           if (values.email !== user.email && isCALIdentityProvider) {
@@ -238,7 +265,7 @@ const ProfileView = () => {
           }
         }}
         extraField={
-          <div className="mt-8">
+          <div className="mt-6">
             <UsernameAvailabilityField
               onSuccessMutation={async () => {
                 showToast(t("settings_updated_successfully"), "success");
@@ -252,16 +279,19 @@ const ProfileView = () => {
         }
       />
 
-      <hr className="border-subtle my-6" />
-
-      <Label>{t("danger_zone")}</Label>
+      <div className="border-subtle mt-6 rounded-xl rounded-b-none border border-b-0 p-6">
+        <Label className="text-base font-semibold text-red-700">{t("danger_zone")}</Label>
+        <p className="text-subtle">{t("account_deletion_cannot_be_undone")}</p>
+      </div>
       {/* Delete account Dialog */}
       <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
-        <DialogTrigger asChild>
-          <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
-            {t("delete_account")}
-          </Button>
-        </DialogTrigger>
+        <SectionBottomActions align="end">
+          <DialogTrigger asChild>
+            <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
+              {t("delete_account")}
+            </Button>
+          </DialogTrigger>
+        </SectionBottomActions>
         <DialogContent
           title={t("delete_account_modal_title")}
           description={t("confirm_delete_account_modal", { appName: APP_NAME })}
@@ -364,12 +394,16 @@ const ProfileForm = ({
   onSubmit,
   extraField,
   isLoading = false,
+  isFallbackImg,
+  userAvatar,
   userOrganization,
 }: {
   defaultValues: FormValues;
   onSubmit: (values: FormValues) => void;
   extraField?: React.ReactNode;
   isLoading: boolean;
+  isFallbackImg: boolean;
+  userAvatar: string;
   userOrganization: RouterOutputs["viewer"]["me"]["organization"];
 }) => {
   const { t } = useLocale();
@@ -377,7 +411,7 @@ const ProfileForm = ({
 
   const profileFormSchema = z.object({
     username: z.string(),
-    avatar: z.string(),
+    avatar: z.string().nullable(),
     name: z
       .string()
       .trim()
@@ -402,56 +436,77 @@ const ProfileForm = ({
 
   return (
     <Form form={formMethods} handleSubmit={onSubmit}>
-      <div className="flex items-center">
-        <Controller
-          control={formMethods.control}
-          name="avatar"
-          render={({ field: { value } }) => (
-            <>
-              <OrganizationAvatar
-                alt={formMethods.getValues("username")}
-                imageSrc={value}
-                size="lg"
-                organizationSlug={userOrganization.slug}
-              />
-              <div className="ms-4">
-                <ImageUploader
-                  target="avatar"
-                  id="avatar-upload"
-                  buttonMsg={t("change_avatar")}
-                  handleAvatarChange={(newAvatar) => {
-                    formMethods.setValue("avatar", newAvatar, { shouldDirty: true });
-                  }}
-                  imageSrc={value || undefined}
-                />
-              </div>
-            </>
-          )}
-        />
+      <div className="border-subtle border-x px-4 pb-10 pt-8 sm:px-6">
+        <div className="flex items-center">
+          <Controller
+            control={formMethods.control}
+            name="avatar"
+            render={({ field: { value } }) => {
+              const showRemoveAvatarButton = !isFallbackImg || (value && userAvatar !== value);
+              return (
+                <>
+                  <OrganizationAvatar
+                    alt={formMethods.getValues("username")}
+                    imageSrc={value}
+                    size="lg"
+                    organizationSlug={userOrganization.slug}
+                  />
+                  <div className="ms-4">
+                    <h2 className="mb-2 text-sm font-medium">{t("profile_picture")}</h2>
+                    <div className="flex gap-2">
+                      <ImageUploader
+                        target="avatar"
+                        id="avatar-upload"
+                        buttonMsg={t("upload_avatar")}
+                        handleAvatarChange={(newAvatar) => {
+                          formMethods.setValue("avatar", newAvatar, { shouldDirty: true });
+                        }}
+                        imageSrc={value || undefined}
+                        triggerButtonColor={showRemoveAvatarButton ? "secondary" : "primary"}
+                      />
+
+                      {showRemoveAvatarButton && (
+                        <Button
+                          color="secondary"
+                          onClick={() => {
+                            formMethods.setValue("avatar", null, { shouldDirty: true });
+                          }}>
+                          {t("remove")}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                </>
+              );
+            }}
+          />
+        </div>
+        {extraField}
+        <div className="mt-6">
+          <TextField label={t("full_name")} {...formMethods.register("name")} />
+        </div>
+        <div className="mt-6">
+          <TextField label={t("email")} hint={t("change_email_hint")} {...formMethods.register("email")} />
+        </div>
+        <div className="mt-6">
+          <Label>{t("about")}</Label>
+          <Editor
+            getText={() => md.render(formMethods.getValues("bio") || "")}
+            setText={(value: string) => {
+              formMethods.setValue("bio", turndown(value), { shouldDirty: true });
+            }}
+            excludedToolbarItems={["blockType"]}
+            disableLists
+            firstRender={firstRender}
+            setFirstRender={setFirstRender}
+          />
+        </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">
-        <Label>{t("about")}</Label>
-        <Editor
-          getText={() => md.render(formMethods.getValues("bio") || "")}
-          setText={(value: string) => {
-            formMethods.setValue("bio", turndown(value), { shouldDirty: true });
-          }}
-          excludedToolbarItems={["blockType"]}
-          disableLists
-          firstRender={firstRender}
-          setFirstRender={setFirstRender}
-        />
-      </div>
-      <Button loading={isLoading} disabled={isDisabled} color="primary" className="mt-8" type="submit">
-        {t("update")}
-      </Button>
+      <SectionBottomActions align="end">
+        <Button loading={isLoading} disabled={isDisabled} color="primary" type="submit">
+          {t("update")}
+        </Button>
+      </SectionBottomActions>
     </Form>
   );
 };

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

@@ -1,23 +1,34 @@
-import type { GetServerSidePropsContext } from "next";
-import { useForm } from "react-hook-form";
+import { useState } from "react";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form, Label, Meta, showToast, Skeleton, Switch } from "@calcom/ui";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { Meta, showToast, SettingsToggle, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
-import { ssrInit } from "@server/lib/ssr";
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+  return (
+    <SkeletonContainer>
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="border-subtle space-y-6 border border-t-0 px-4 py-8 sm:px-6">
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
 
-const ProfileImpersonationView = () => {
+const ProfileImpersonationView = ({ user }: { user: RouterOutputs["viewer"]["me"] }) => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const { data: user } = trpc.viewer.me.useQuery();
+  const [disableImpersonation, setDisableImpersonation] = useState<boolean | undefined>(
+    user?.disableImpersonation
+  );
+
   const mutation = trpc.viewer.updateProfile.useMutation({
     onSuccess: () => {
       showToast(t("profile_updated_successfully"), "success");
-      reset(getValues());
     },
     onSettled: () => {
       utils.viewer.me.invalidate();
@@ -26,83 +37,54 @@ const ProfileImpersonationView = () => {
       await utils.viewer.me.cancel();
       const previousValue = utils.viewer.me.getData();
 
-      if (previousValue && disableImpersonation) {
-        utils.viewer.me.setData(undefined, { ...previousValue, disableImpersonation });
-      }
+      setDisableImpersonation(disableImpersonation);
+
       return { previousValue };
     },
     onError: (error, variables, context) => {
       if (context?.previousValue) {
         utils.viewer.me.setData(undefined, context.previousValue);
+        setDisableImpersonation(context.previousValue?.disableImpersonation);
       }
       showToast(`${t("error")}, ${error.message}`, "error");
     },
   });
 
-  const formMethods = useForm<{ disableImpersonation: boolean }>({
-    defaultValues: {
-      disableImpersonation: user?.disableImpersonation,
-    },
-  });
-
-  const {
-    formState: { isSubmitting, isDirty },
-    setValue,
-    reset,
-    getValues,
-    watch,
-  } = formMethods;
-
-  const isDisabled = isSubmitting || !isDirty;
   return (
     <>
-      <Meta title={t("impersonation")} description={t("impersonation_description")} />
-      <Form
-        form={formMethods}
-        handleSubmit={({ disableImpersonation }) => {
-          mutation.mutate({ disableImpersonation });
-        }}>
-        <div className="flex space-x-3">
-          <Switch
-            onCheckedChange={(e) => {
-              setValue("disableImpersonation", !e, { shouldDirty: true });
-            }}
-            fitToHeight={true}
-            checked={!watch("disableImpersonation")}
-          />
-          <div className="flex flex-col">
-            <Skeleton as={Label} className="text-emphasis text-sm font-semibold leading-none">
-              {t("user_impersonation_heading")}
-            </Skeleton>
-            <Skeleton as="p" className="text-default -mt-2 text-sm leading-normal">
-              {t("user_impersonation_description")}
-            </Skeleton>
-          </div>
-        </div>
-        <Button
-          color="primary"
-          loading={mutation.isLoading}
-          className="mt-8"
-          type="submit"
-          disabled={isDisabled}>
-          {t("update")}
-        </Button>
-      </Form>
+      <Meta
+        title={t("impersonation")}
+        description={t("impersonation_description")}
+        borderInShellHeader={true}
+      />
+      <div>
+        <SettingsToggle
+          toggleSwitchAtTheEnd={true}
+          title={t("user_impersonation_heading")}
+          description={t("user_impersonation_description")}
+          checked={!disableImpersonation}
+          onCheckedChange={(checked) => {
+            mutation.mutate({ disableImpersonation: !checked });
+          }}
+          disabled={mutation.isLoading}
+          switchContainerClassName="py-6 px-4 sm:px-6 border-subtle rounded-b-xl border border-t-0"
+        />
+      </div>
     </>
   );
 };
 
-ProfileImpersonationView.getLayout = getLayout;
-ProfileImpersonationView.PageWrapper = PageWrapper;
+const ProfileImpersonationViewWrapper = () => {
+  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { t } = useLocale();
 
-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(context);
-  await ssr.viewer.me.prefetch();
-  return {
-    props: {
-      trpcState: ssr.dehydrate(),
-    },
-  };
+  if (isLoading || !user)
+    return <SkeletonLoader title={t("impersonation")} description={t("impersonation_description")} />;
+
+  return <ProfileImpersonationView user={user} />;
 };
 
-export default ProfileImpersonationView;
+ProfileImpersonationViewWrapper.getLayout = getLayout;
+ProfileImpersonationViewWrapper.PageWrapper = PageWrapper;
+
+export default ProfileImpersonationViewWrapper;

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

@@ -1,13 +1,29 @@
 import { signOut, useSession } from "next-auth/react";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { identityProviderNameMap } from "@calcom/features/auth/lib/identityProviderNameMap";
+import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { IdentityProvider } from "@calcom/prisma/enums";
-import { userMetadata } from "@calcom/prisma/zod-utils";
+import { userMetadata as userMetadataSchema } from "@calcom/prisma/zod-utils";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, Form, Meta, PasswordField, Select, SettingsToggle, showToast } from "@calcom/ui";
+import {
+  Alert,
+  Button,
+  Form,
+  Meta,
+  PasswordField,
+  Select,
+  SettingsToggle,
+  showToast,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -18,34 +34,58 @@ type ChangePasswordSessionFormValues = {
   apiError: string;
 };
 
-const PasswordView = () => {
+interface PasswordViewProps {
+  user: RouterOutputs["viewer"]["me"];
+}
+
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+  return (
+    <SkeletonContainer>
+      <Meta title={title} description={description} borderInShellHeader={true} />
+      <div className="border-subtle space-y-6 border-x px-4 py-8 sm:px-6">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+      <div className="rounded-b-xl">
+        <SectionBottomActions align="end">
+          <SkeletonButton className="ml-auto h-8 w-20 rounded-md" />
+        </SectionBottomActions>
+      </div>
+    </SkeletonContainer>
+  );
+};
+
+const PasswordView = ({ user }: PasswordViewProps) => {
   const { data } = useSession();
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const { data: user } = trpc.viewer.me.useQuery();
-  const metadata = userMetadata.safeParse(user?.metadata);
-  const sessionTimeout = metadata.success ? metadata.data?.sessionTimeout : undefined;
+  const metadata = userMetadataSchema.safeParse(user?.metadata);
+  const initialSessionTimeout = metadata.success ? metadata.data?.sessionTimeout : undefined;
+
+  const [sessionTimeout, setSessionTimeout] = useState<number | undefined>(initialSessionTimeout);
 
   const sessionMutation = trpc.viewer.updateProfile.useMutation({
-    onSuccess: () => {
+    onSuccess: (data) => {
       showToast(t("session_timeout_changed"), "success");
       formMethods.reset(formMethods.getValues());
+      setSessionTimeout(data.metadata?.sessionTimeout);
     },
     onSettled: () => {
       utils.viewer.me.invalidate();
     },
     onMutate: async () => {
       await utils.viewer.me.cancel();
-      const previousValue = utils.viewer.me.getData();
-      const previousMetadata = userMetadata.parse(previousValue?.metadata);
+      const previousValue = await utils.viewer.me.getData();
+      const previousMetadata = userMetadataSchema.safeParse(previousValue?.metadata);
 
-      if (previousValue && sessionTimeout) {
+      if (previousValue && sessionTimeout && previousMetadata.success) {
         utils.viewer.me.setData(undefined, {
           ...previousValue,
-          metadata: { ...previousMetadata, sessionTimeout: sessionTimeout },
+          metadata: { ...previousMetadata?.data, sessionTimeout: sessionTimeout },
         });
+        return { previousValue };
       }
-      return { previousValue };
     },
     onError: (error, _, context) => {
       if (context?.previousValue) {
@@ -84,20 +124,30 @@ const PasswordView = () => {
     defaultValues: {
       oldPassword: "",
       newPassword: "",
-      sessionTimeout,
     },
   });
 
-  const sessionTimeoutWatch = formMethods.watch("sessionTimeout");
-
   const handleSubmit = (values: ChangePasswordSessionFormValues) => {
-    const { oldPassword, newPassword, sessionTimeout: newSessionTimeout } = values;
+    const { oldPassword, newPassword } = values;
+
+    if (!oldPassword.length) {
+      formMethods.setError(
+        "oldPassword",
+        { type: "required", message: t("error_required_field") },
+        { shouldFocus: true }
+      );
+    }
+    if (!newPassword.length) {
+      formMethods.setError(
+        "newPassword",
+        { type: "required", message: t("error_required_field") },
+        { shouldFocus: true }
+      );
+    }
+
     if (oldPassword && newPassword) {
       passwordMutation.mutate({ oldPassword, newPassword });
     }
-    if (sessionTimeout !== newSessionTimeout) {
-      sessionMutation.mutate({ metadata: { ...metadata, sessionTimeout: newSessionTimeout } });
-    }
   };
 
   const timeoutOptions = [5, 10, 15].map((mins) => ({
@@ -112,7 +162,7 @@ const PasswordView = () => {
 
   return (
     <>
-      <Meta title={t("password")} description={t("password_description")} />
+      <Meta title={t("password")} description={t("password_description")} borderInShellHeader={true} />
       {user && user.identityProvider !== IdentityProvider.CAL ? (
         <div>
           <div className="mt-6">
@@ -130,87 +180,127 @@ const PasswordView = () => {
         </div>
       ) : (
         <Form form={formMethods} handleSubmit={handleSubmit}>
-          {formMethods.formState.errors.apiError && (
-            <div className="pb-6">
-              <Alert severity="error" message={formMethods.formState.errors.apiError?.message} />
-            </div>
-          )}
-
-          <div className="max-w-[38rem] sm:grid sm:grid-cols-2 sm:gap-x-4">
-            <div>
-              <PasswordField {...formMethods.register("oldPassword")} label={t("old_password")} />
-            </div>
-            <div>
-              <PasswordField
-                {...formMethods.register("newPassword", {
-                  minLength: {
-                    message: t(isUser ? "password_hint_min" : "password_hint_admin_min"),
-                    value: passwordMinLength,
-                  },
-                  pattern: {
-                    message: "Should contain a number, uppercase and lowercase letters",
-                    value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).*$/gm,
-                  },
-                })}
-                label={t("new_password")}
-              />
+          <div className="border-x px-4 py-6 sm:px-6">
+            {formMethods.formState.errors.apiError && (
+              <div className="pb-6">
+                <Alert severity="error" message={formMethods.formState.errors.apiError?.message} />
+              </div>
+            )}
+            <div className="w-full sm:grid sm:grid-cols-2 sm:gap-x-6">
+              <div>
+                <PasswordField {...formMethods.register("oldPassword")} label={t("old_password")} />
+              </div>
+              <div>
+                <PasswordField
+                  {...formMethods.register("newPassword", {
+                    minLength: {
+                      message: t(isUser ? "password_hint_min" : "password_hint_admin_min"),
+                      value: passwordMinLength,
+                    },
+                    pattern: {
+                      message: "Should contain a number, uppercase and lowercase letters",
+                      value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).*$/gm,
+                    },
+                  })}
+                  label={t("new_password")}
+                />
+              </div>
             </div>
+            <p className="text-default mt-4 w-full text-sm">
+              {t("invalid_password_hint", { passwordLength: passwordMinLength })}
+            </p>
           </div>
-          <p className="text-default mt-4 max-w-[38rem] text-sm">
-            {t("invalid_password_hint", { passwordLength: passwordMinLength })}
-          </p>
-          <div className="border-subtle mt-8 border-t py-8">
+          <SectionBottomActions align="end">
+            <Button
+              color="primary"
+              type="submit"
+              loading={passwordMutation.isLoading}
+              onClick={() => formMethods.clearErrors("apiError")}
+              disabled={isDisabled || passwordMutation.isLoading || sessionMutation.isLoading}>
+              {t("update")}
+            </Button>
+          </SectionBottomActions>
+          <div className="mt-6">
             <SettingsToggle
+              toggleSwitchAtTheEnd={true}
               title={t("session_timeout")}
               description={t("session_timeout_description")}
-              checked={sessionTimeoutWatch !== undefined}
+              checked={sessionTimeout !== undefined}
               data-testid="session-check"
               onCheckedChange={(e) => {
                 if (!e) {
-                  formMethods.setValue("sessionTimeout", undefined, { shouldDirty: true });
+                  setSessionTimeout(undefined);
+
+                  if (metadata.success) {
+                    sessionMutation.mutate({
+                      metadata: { ...metadata.data, sessionTimeout: undefined },
+                    });
+                  }
                 } else {
-                  formMethods.setValue("sessionTimeout", 10, { shouldDirty: true });
+                  setSessionTimeout(10);
                 }
               }}
-            />
-            {sessionTimeoutWatch && (
-              <div className="mt-4 text-sm">
-                <div className="flex items-center">
-                  <p className="text-default ltr:mr-2 rtl:ml-2">{t("session_timeout_after")}</p>
-                  <Select
-                    options={timeoutOptions}
-                    defaultValue={
-                      sessionTimeout
-                        ? timeoutOptions.find((tmo) => tmo.value === sessionTimeout)
-                        : timeoutOptions[1]
-                    }
-                    isSearchable={false}
-                    className="block h-[36px] !w-auto min-w-0 flex-none rounded-md text-sm"
-                    onChange={(event) => {
-                      formMethods.setValue("sessionTimeout", event?.value, { shouldDirty: true });
-                    }}
-                  />
+              childrenClassName="lg:ml-0"
+              switchContainerClassName={classNames(
+                "py-6 px-4 sm:px-6 border-subtle rounded-xl border",
+                !!sessionTimeout && "rounded-b-none"
+              )}>
+              <>
+                <div className="border-subtle border-x p-6 pb-8">
+                  <div className="flex flex-col">
+                    <p className="text-default mb-2 font-medium">{t("session_timeout_after")}</p>
+                    <Select
+                      options={timeoutOptions}
+                      defaultValue={
+                        sessionTimeout
+                          ? timeoutOptions.find((tmo) => tmo.value === sessionTimeout)
+                          : timeoutOptions[1]
+                      }
+                      isSearchable={false}
+                      className="block h-[36px] !w-auto min-w-0 flex-none rounded-md text-sm"
+                      onChange={(event) => {
+                        setSessionTimeout(event?.value);
+                      }}
+                    />
+                  </div>
                 </div>
-              </div>
-            )}
+                <SectionBottomActions align="end">
+                  <Button
+                    color="primary"
+                    loading={sessionMutation.isLoading}
+                    onClick={() => {
+                      sessionMutation.mutate({
+                        metadata: { ...metadata, sessionTimeout },
+                      });
+                      formMethods.clearErrors("apiError");
+                    }}
+                    disabled={
+                      initialSessionTimeout === sessionTimeout ||
+                      passwordMutation.isLoading ||
+                      sessionMutation.isLoading
+                    }>
+                    {t("update")}
+                  </Button>
+                </SectionBottomActions>
+              </>
+            </SettingsToggle>
           </div>
-          {/* TODO: Why is this Form not submitting? Hacky fix but works */}
-          <Button
-            color="primary"
-            className="mt-8"
-            type="submit"
-            loading={passwordMutation.isLoading || sessionMutation.isLoading}
-            onClick={() => formMethods.clearErrors("apiError")}
-            disabled={isDisabled || passwordMutation.isLoading || sessionMutation.isLoading}>
-            {t("update")}
-          </Button>
         </Form>
       )}
     </>
   );
 };
 
-PasswordView.getLayout = getLayout;
-PasswordView.PageWrapper = PageWrapper;
+const PasswordViewWrapper = () => {
+  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { t } = useLocale();
+  if (isLoading || !user)
+    return <SkeletonLoader title={t("password")} description={t("password_description")} />;
 
-export default PasswordView;
+  return <PasswordView user={user} />;
+};
+
+PasswordViewWrapper.getLayout = getLayout;
+PasswordViewWrapper.PageWrapper = PageWrapper;
+
+export default PasswordViewWrapper;

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

@@ -3,15 +3,24 @@ import { useState } from "react";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText, Alert } from "@calcom/ui";
+import {
+  Badge,
+  Meta,
+  SkeletonButton,
+  SkeletonContainer,
+  SkeletonText,
+  Alert,
+  SettingsToggle,
+} from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 
-const SkeletonLoader = () => {
+const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
   return (
     <SkeletonContainer>
+      <Meta title={title} description={description} borderInShellHeader={true} />
       <div className="mb-8 mt-6 space-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
@@ -28,36 +37,34 @@ const TwoFactorAuthView = () => {
   const { t } = useLocale();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
 
-  const [enableModalOpen, setEnableModalOpen] = useState(false);
-  const [disableModalOpen, setDisableModalOpen] = useState(false);
+  const [enableModalOpen, setEnableModalOpen] = useState<boolean>(false);
+  const [disableModalOpen, setDisableModalOpen] = useState<boolean>(false);
 
-  if (isLoading) return <SkeletonLoader />;
+  if (isLoading)
+    return <SkeletonLoader title={t("2fa")} description={t("set_up_two_factor_authentication")} />;
 
   const isCalProvider = user?.identityProvider === "CAL";
   const canSetupTwoFactor = !isCalProvider && !user?.twoFactorEnabled;
   return (
     <>
-      <Meta title={t("2fa")} description={t("set_up_two_factor_authentication")} />
+      <Meta title={t("2fa")} description={t("set_up_two_factor_authentication")} borderInShellHeader={true} />
       {canSetupTwoFactor && <Alert severity="neutral" message={t("2fa_disabled")} />}
-      <div className="mt-6 flex items-start space-x-4">
-        <Switch
-          data-testid="two-factor-switch"
-          disabled={canSetupTwoFactor}
-          checked={user?.twoFactorEnabled}
-          onCheckedChange={() =>
-            user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true)
-          }
-        />
-        <div className="!mx-4">
-          <div className="flex">
-            <p className="text-default font-semibold">{t("two_factor_auth")}</p>
-            <Badge className="mx-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
-              {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
-            </Badge>
-          </div>
-          <p className="text-default text-sm">{t("add_an_extra_layer_of_security")}</p>
-        </div>
-      </div>
+      <SettingsToggle
+        toggleSwitchAtTheEnd={true}
+        data-testid="two-factor-switch"
+        title={t("two_factor_auth")}
+        description={t("add_an_extra_layer_of_security")}
+        checked={user?.twoFactorEnabled ?? false}
+        onCheckedChange={() =>
+          user?.twoFactorEnabled ? setDisableModalOpen(true) : setEnableModalOpen(true)
+        }
+        Badge={
+          <Badge className="mx-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
+            {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
+          </Badge>
+        }
+        switchContainerClassName="border-subtle rounded-b-xl border border-t-0 px-5 py-6 sm:px-6"
+      />
 
       <EnableTwoFactorModal
         open={enableModalOpen}

apps/web/pages/signup.tsx

@@ -281,7 +281,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
     return {
       redirect: {
         permanent: false,
-        destination: "/auth/login?callbackUrl=" + `${WEBAPP_URL}/${ctx.query.callbackUrl}`,
+        destination: `/auth/login?callbackUrl=${WEBAPP_URL}/${ctx.query.callbackUrl}`,
       },
     };
   }

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

@@ -102,7 +102,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
                   items={type.users.map((user) => ({
                     alt: user.name || "",
                     title: user.name || "",
-                    image: "/" + user.username + "/avatar.png" || "",
+                    image: `/${user.username}/avatar.png` || "",
                   }))}
                 />
               </div>
@@ -160,7 +160,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
       <div className="space-y-6" data-testid="event-types">
         <div className="overflow-hidden rounded-sm border dark:border-gray-900">
           <div className="text-muted p-8 text-center">
-            <h2 className="font-cal text-emphasis mb-2 text-3xl">{" " + t("org_no_teams_yet")}</h2>
+            <h2 className="font-cal text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
             <p className="text-emphasis mx-auto max-w-md">{t("org_no_teams_yet_description")}</p>
           </div>
         </div>
@@ -324,7 +324,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       ...type,
       users: type.users.map((user) => ({
         ...user,
-        avatar: "/" + user.username + "/avatar.png",
+        avatar: `/${user.username}/avatar.png`,
       })),
       descriptionAsSafeHTML: markdownToSafeHTML(type.description),
     })) ?? null;

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

@@ -95,12 +95,12 @@ export default function JoinCall(props: JoinCallPageProps) {
         <meta property="og:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="og:type" content="website" />
         <meta property="og:url" content={`${WEBSITE_URL}/video`} />
-        <meta property="og:title" content={APP_NAME + " Video"} />
+        <meta property="og:title" content={`${APP_NAME} Video`} />
         <meta property="og:description" content={t("quick_video_meeting")} />
         <meta property="twitter:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="twitter:card" content="summary_large_image" />
         <meta property="twitter:url" content={`${WEBSITE_URL}/video`} />
-        <meta property="twitter:title" content={APP_NAME + " Video"} />
+        <meta property="twitter:title" content={`${APP_NAME} Video`} />
         <meta property="twitter:description" content={t("quick_video_meeting")} />
       </Head>
       <div style={{ zIndex: 2, position: "relative" }}>

apps/web/pages/video/meeting-ended/[uid].tsx

@@ -44,7 +44,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                     </h2>
                     <p className="text-subtle text-center">
                       <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
-                      {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
+                      {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
                     </p>
                   </div>
                 </div>

apps/web/pages/video/meeting-not-started/[uid].tsx

@@ -24,7 +24,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
               <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
               <p className="text-subtle text-center">
                 <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
-                {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
+                {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
               </p>
             </>
           }

apps/web/pagesAndRewritePaths.js

@@ -23,7 +23,7 @@ const otherNonExistingRoutePrefixes = ["forms", "router", "success", "cancel"];
 // book$ ensures that only /book is excluded from rewrite(which is at the end always) and not /booked
 
 let subdomainRegExp = (exports.subdomainRegExp = getSubdomainRegExp(
-  process.env.NEXT_PUBLIC_WEBAPP_URL || "https://" + process.env.VERCEL_URL
+  process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${process.env.VERCEL_URL}`
 ));
 exports.orgHostPath = `^(?<orgSlug>${subdomainRegExp})\\.(?!vercel\.app).*`;
 

apps/web/playwright/booking-pages.e2e.ts

@@ -137,8 +137,6 @@ test.describe("pro user", () => {
       page.click('[data-testid="confirm"]'),
       page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm")),
     ]);
-
-    await page.goto("/bookings/unconfirmed");
     // This is the only booking in there that needed confirmation and now it should be empty screen
     await expect(page.locator('[data-testid="empty-screen"]')).toBeVisible();
   });
@@ -229,45 +227,6 @@ test.describe("pro user", () => {
     const firstSlotAvailableText = await firstSlotAvailable.innerText();
     expect(firstSlotAvailableText).toContain("9:00");
   });
-
-  test("Cannot confirm booking for a slot, if another confirmed booking already exists for same slot.", async ({
-    page,
-    users,
-  }) => {
-    // First booking done for first available time slot in next month
-    await bookOptinEvent(page);
-
-    const [pro] = users.get();
-    await page.goto(`/${pro.username}`);
-
-    // Second booking done for same time slot
-    await bookOptinEvent(page);
-
-    await pro.apiLogin();
-
-    await page.goto("/bookings/unconfirmed");
-
-    // Confirm first booking
-    await Promise.all([
-      page.click('[data-testid="confirm"]'),
-      page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/confirm")),
-    ]);
-
-    await Promise.all([
-      page.goto("/bookings/unconfirmed"),
-      page.waitForResponse((response) => response.url().includes("/api/trpc/bookings/get")),
-    ]);
-
-    // Confirm second booking
-    await page.click('[data-testid="confirm"]');
-    const response = await page.waitForResponse(
-      (response) => response.url().includes("/api/trpc/bookings/confirm") && response.status() !== 200
-    );
-    const responseObj = await response.json();
-
-    expect(responseObj[0]?.error?.json?.data?.code).toEqual("BAD_REQUEST");
-    expect(responseObj[0]?.error?.json?.message).toEqual("Slot already confirmed for other booking");
-  });
 });
 
 test.describe("prefill", () => {

apps/web/playwright/fixtures/payments.ts

@@ -28,7 +28,7 @@ export const createPaymentsFixture = (page: Page) => {
             },
           },
           data: {},
-          externalId: "DEMO_PAYMENT_FROM_DB_" + Date.now(),
+          externalId: `DEMO_PAYMENT_FROM_DB_${Date.now()}`,
           booking: {
             connect: {
               id: bookingId,

apps/web/playwright/insights.e2e.ts

@@ -0,0 +1,239 @@
+import { expect } from "@playwright/test";
+
+import { randomString } from "@calcom/lib/random";
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+const createTeamsAndMembership = async (userIdOne: number, userIdTwo: number) => {
+  const teamOne = await prisma.team.create({
+    data: {
+      name: "test-insights",
+      slug: `test-insights-${Date.now()}-${randomString(5)}}`,
+    },
+  });
+
+  const teamTwo = await prisma.team.create({
+    data: {
+      name: "test-insights-2",
+      slug: `test-insights-2-${Date.now()}-${randomString(5)}}`,
+    },
+  });
+  if (!userIdOne || !userIdTwo || !teamOne || !teamTwo) {
+    throw new Error("Failed to create test data");
+  }
+
+  // create memberships
+  await prisma.membership.create({
+    data: {
+      userId: userIdOne,
+      teamId: teamOne.id,
+      accepted: true,
+      role: "ADMIN",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamTwo.id,
+      userId: userIdOne,
+      accepted: true,
+      role: "ADMIN",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamOne.id,
+      userId: userIdTwo,
+      accepted: true,
+      role: "MEMBER",
+    },
+  });
+  await prisma.membership.create({
+    data: {
+      teamId: teamTwo.id,
+      userId: userIdTwo,
+      accepted: true,
+      role: "MEMBER",
+    },
+  });
+  return { teamOne, teamTwo };
+};
+
+test.afterAll(async ({ users }) => {
+  await users.deleteAll();
+});
+
+test.describe("Insights", async () => {
+  test("should be able to go to insights as admins", async ({ page, users }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+    await createTeamsAndMembership(user.id, userTwo.id);
+
+    await user.apiLogin();
+
+    // go to insights page
+    await page.goto("/insights");
+    await page.waitForLoadState("networkidle");
+
+    // expect url to have isAll and TeamId in query params
+    expect(page.url()).toContain("isAll=false");
+    expect(page.url()).toContain("teamId=");
+  });
+
+  test("should be able to go to insights as members", async ({ page, users }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+
+    await userTwo.apiLogin();
+
+    await createTeamsAndMembership(user.id, userTwo.id);
+    // go to insights page
+    await page.goto("/insights");
+
+    await page.waitForLoadState("networkidle");
+
+    // expect url to have isAll and TeamId in query params
+
+    expect(page.url()).toContain("isAll=false");
+    expect(page.url()).not.toContain("teamId=");
+  });
+
+  test("team select filter should have 2 teams and your account option only as member", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create();
+    const userTwo = await users.create();
+
+    await user.apiLogin();
+
+    await createTeamsAndMembership(user.id, userTwo.id);
+    // go to insights page
+    await page.goto("/insights");
+
+    await page.waitForLoadState("networkidle");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+  });
+
+  test("Insights Organization should have isAll option true", async ({ users, page }) => {
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isUnpublished: true,
+      isOrg: true,
+      hasSubteam: true,
+    });
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+    await page.waitForLoadState("networkidle");
+
+    await page.getByTestId("dashboard-shell").getByText("All").nth(1).click();
+
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(4);
+  });
+
+  test("should have all option in team-and-self filter as admin", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+  });
+
+  test("should be able to switch between teams and self profile for insights", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    // get div from team select filter with this class flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1
+    await page.getByTestId("dashboard-shell").getByText("Team: test-insights").click();
+    await page
+      .locator('div[class="flex flex-col gap-0.5 [&>*:first-child]:mt-1 [&>*:last-child]:mb-1"]')
+      .click();
+    const teamSelectFilter = await page.locator(
+      'div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]'
+    );
+
+    await expect(teamSelectFilter).toHaveCount(3);
+
+    // switch to self profile
+    await page.getByTestId("dashboard-shell").getByText("Your Account").click();
+
+    // switch to team 1
+    await page.getByTestId("dashboard-shell").getByText("test-insights").nth(0).click();
+
+    // switch to team 2
+    await page.getByTestId("dashboard-shell").getByText("test-insights-2").click();
+  });
+
+  test("should be able to switch between memberUsers", async ({ page, users }) => {
+    const owner = await users.create();
+    const member = await users.create();
+
+    await createTeamsAndMembership(owner.id, member.id);
+
+    await owner.apiLogin();
+
+    await page.goto("/insights");
+
+    await page.getByText("Add filter").click();
+
+    await page.getByRole("button", { name: "User" }).click();
+    // <div class="flex select-none truncate font-medium" data-state="closed">People</div>
+    await page.locator('div[class="flex select-none truncate font-medium"]').getByText("People").click();
+
+    await page
+      .locator('div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]')
+      .nth(0)
+      .click();
+    await page.waitForLoadState("networkidle");
+
+    await page
+      .locator('div[class="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 hover:cursor-pointer"]')
+      .nth(1)
+      .click();
+    await page.waitForLoadState("networkidle");
+    // press escape button to close the filter
+    await page.keyboard.press("Escape");
+
+    await page.getByRole("button", { name: "Clear" }).click();
+
+    // expect for "Team: test-insight" text in page
+    expect(await page.locator("text=Team: test-insights").isVisible()).toBeTruthy();
+  });
+});

apps/web/playwright/integrations-stripe.e2e.ts

@@ -174,7 +174,7 @@ test.describe("Stripe integration", () => {
       await page.getByTestId("price-input-stripe").fill("200");
 
       // Select currency in dropdown
-      await page.locator("div").filter({ hasText: "United States dollar (USD)" }).nth(1).click();
+      await page.locator(".text-black > .bg-default > div > div:nth-child(2)").first().click();
       await page.locator("#react-select-2-input").fill("mexi");
       await page.locator("#react-select-2-option-81").click();
 

apps/web/playwright/lib/next-server.ts

@@ -23,7 +23,7 @@ export const nextServer = async ({ port = 3000 } = { port: 3000 }) => {
   process.env.PLAYWRIGHT_TEST_BASE_URL =
     process.env.NEXT_PUBLIC_WEBAPP_URL =
     process.env.NEXT_PUBLIC_WEBSITE_URL =
-      "http://localhost:" + port;
+      `http://localhost:${port}`;
   const app = next({
     dev: dev,
     port,
@@ -46,7 +46,7 @@ export const nextServer = async ({ port = 3000 } = { port: 3000 }) => {
       resolve(server);
     });
     server.on("error", (error) => {
-      if (error) throw new Error("Could not start Next.js server -" + error.message);
+      if (error) throw new Error(`Could not start Next.js server - ${error.message}`);
     });
   });
   return server;

apps/web/playwright/oauth-provider.e2e.ts

@@ -0,0 +1,227 @@
+import { expect } from "@playwright/test";
+import { randomBytes } from "crypto";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { generateSecret } from "@calcom/trpc/server/routers/viewer/oAuth/addClient.handler";
+
+import { test } from "./lib/fixtures";
+
+test.afterEach(async ({ users }) => {
+  await users.deleteAll();
+});
+
+let client: {
+  clientId: string;
+  redirectUri: string;
+  orginalSecret: string;
+  name: string;
+  clientSecret: string;
+  logo: string | null;
+};
+
+test.describe("OAuth Provider", () => {
+  test.beforeAll(async () => {
+    client = await createTestCLient();
+  });
+  test("should create valid access toke & refresh token for user", async ({ page, users }) => {
+    const user = await users.create({ username: "test user", name: "test user" });
+    await user.apiLogin();
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    await page.waitForLoadState("networkidle");
+    await page.getByTestId("allow-button").click();
+
+    await page.waitForFunction(() => {
+      return window.location.href.startsWith("https://example.com");
+    });
+
+    const url = new URL(page.url());
+
+    // authorization code that is returned to client with redirect uri
+    const code = url.searchParams.get("code");
+
+    // request token with authorization code
+    const tokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/token`, {
+      body: JSON.stringify({
+        code,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "authorization_code",
+        redirect_uri: client.redirectUri,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const tokenData = await tokenResponse.json();
+
+    // test if token is valid
+    const meResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    const meData = await meResponse.json();
+
+    // check if user access token is valid
+    expect(meData.username.startsWith("test user")).toBe(true);
+
+    // request new token with refresh token
+    const refreshTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/refreshToken`, {
+      body: JSON.stringify({
+        refresh_token: tokenData.refresh_token,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "refresh_token",
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const refreshTokenData = await refreshTokenResponse.json();
+
+    expect(refreshTokenData.access_token).not.toBe(tokenData.access_token);
+
+    const validTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    expect(meData.username.startsWith("test user")).toBe(true);
+  });
+
+  test("should create valid access toke & refresh token for team", async ({ page, users }) => {
+    const user = await users.create({ username: "test user", name: "test user" }, { hasTeam: true });
+    await user.apiLogin();
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    await page.waitForLoadState("networkidle");
+
+    await page.locator("#account-select").click();
+
+    await page.locator("#react-select-2-option-1").click();
+
+    await page.getByTestId("allow-button").click();
+
+    await page.waitForFunction(() => {
+      return window.location.href.startsWith("https://example.com");
+    });
+
+    const url = new URL(page.url());
+
+    // authorization code that is returned to client with redirect uri
+    const code = url.searchParams.get("code");
+
+    // request token with authorization code
+    const tokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/token`, {
+      body: JSON.stringify({
+        code,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "authorization_code",
+        redirect_uri: client.redirectUri,
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const tokenData = await tokenResponse.json();
+
+    // test if token is valid
+    const meResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    const meData = await meResponse.json();
+
+    // check if team access token is valid
+    expect(meData.username.endsWith("Team Team")).toBe(true);
+
+    // request new token with refresh token
+    const refreshTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/refreshToken`, {
+      body: JSON.stringify({
+        refresh_token: tokenData.refresh_token,
+        client_id: client.clientId,
+        client_secret: client.orginalSecret,
+        grant_type: "refresh_token",
+      }),
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    const refreshTokenData = await refreshTokenResponse.json();
+
+    expect(refreshTokenData.access_token).not.toBe(tokenData.access_token);
+
+    const validTokenResponse = await fetch(`${WEBAPP_URL}/api/auth/oauth/me`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${tokenData.access_token}`,
+      },
+    });
+
+    expect(meData.username.endsWith("Team Team")).toBe(true);
+  });
+
+  test("redirect not logged-in users to login page and after forward to authorization page", async ({
+    page,
+    users,
+  }) => {
+    const user = await users.create({ username: "test-user", name: "test user" });
+
+    await page.goto(
+      `auth/oauth2/authorize?client_id=${client.clientId}&redirect_uri=${client.redirectUri}&response_type=code&scope=READ_PROFILE&state=1234`
+    );
+
+    // check if user is redirected to login page
+    await expect(page.getByRole("heading", { name: "Welcome back" })).toBeVisible();
+    await page.locator("#email").fill(user.email);
+    await page.locator("#password").fill(user.username || "");
+    await page.locator('[type="submit"]').click();
+
+    await page.waitForSelector("#account-select");
+
+    await expect(page.getByText("test user")).toBeVisible();
+  });
+});
+
+const createTestCLient = async () => {
+  const [hashedSecret, secret] = generateSecret();
+  const clientId = randomBytes(32).toString("hex");
+
+  const client = await prisma.oAuthClient.create({
+    data: {
+      name: "Test Client",
+      clientId,
+      clientSecret: hashedSecret,
+      redirectUri: "https://example.com",
+    },
+  });
+
+  return { ...client, orginalSecret: secret };
+};

apps/web/playwright/payment-apps.e2e.ts

@@ -0,0 +1,237 @@
+import { expect } from "@playwright/test";
+
+import prisma from "@calcom/prisma";
+
+import { test } from "./lib/fixtures";
+import { selectFirstAvailableTimeSlotNextMonth } from "./lib/testUtils";
+
+test.describe.configure({ mode: "parallel" });
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Payment app", () => {
+  test("Should be able to edit alby price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.create({
+      data: {
+        type: "alby_payment",
+        userId: user.id,
+        key: {
+          account_id: "random",
+          account_email: "random@example.com",
+          webhook_endpoint_id: "ep_randomString",
+          webhook_endpoint_secret: "whsec_randomString",
+          account_lightning_address: "random@getalby.com",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+    await page.getByPlaceholder("Price").click();
+    await page.getByPlaceholder("Price").fill("200");
+    await page.getByText("SatoshissatsCurrencyBTCPayment optionCollect payment on booking").click();
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent.slug}`);
+
+    // expect 200 sats to be displayed in page
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 200 sats
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=200 sats").first()).toBeTruthy();
+  });
+
+  test("Should be able to edit stripe price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.create({
+      data: {
+        type: "stripe_payment",
+        userId: user.id,
+        key: {
+          scope: "read_write",
+          livemode: false,
+          token_type: "bearer",
+          access_token: "sk_test_randomString",
+          refresh_token: "rt_randomString",
+          stripe_user_id: "acct_randomString",
+          default_currency: "usd",
+          stripe_publishable_key: "pk_test_randomString",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+    await page.locator("#event-type-form").getByRole("switch").click();
+    await page.locator(".text-black > .bg-default > div > div:nth-child(2)").first().click();
+    await page.getByTestId("select-option-usd").click();
+
+    await page.getByTestId("price-input-stripe").click();
+    await page.getByTestId("price-input-stripe").fill("350");
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent.slug}`);
+
+    // expect 200 sats to be displayed in page
+    expect(await page.locator("text=350").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    expect(await page.locator("text=350").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 200 sats
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=350").first()).toBeTruthy();
+  });
+
+  test("Should be able to edit paypal price, currency", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.create({
+      data: {
+        type: "paypal_payment",
+        userId: user.id,
+        key: {
+          client_id: "randomString",
+          secret_key: "randomString",
+          webhook_id: "randomString",
+        },
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    await page.getByPlaceholder("Price").click();
+    await page.getByPlaceholder("Price").fill("150");
+
+    await page.locator(".text-black > .bg-default > div > div:nth-child(2)").first().click();
+    await page.locator("#react-select-2-option-13").click();
+
+    await page.locator(".mb-1 > .bg-default > div > div:nth-child(2)").first().click();
+
+    await page.getByText("$MXNCurrencyMexican pesoPayment option").click();
+    await page.getByTestId("update-eventtype").click();
+
+    await page.goto(`${user.username}/${paymentEvent.slug}`);
+
+    // expect 150 to be displayed in page
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+
+    await selectFirstAvailableTimeSlotNextMonth(page);
+    // expect 150 to be displayed in page
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+
+    // go to /event-types and check if the price is 150
+    await page.goto(`event-types/`);
+    expect(await page.locator("text=MX$150.00").first()).toBeTruthy();
+  });
+
+  test("Should display App is not setup already for alby", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.create({
+      data: {
+        type: "alby_payment",
+        userId: user.id,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    // expect text "This app has not been setup yet" to be displayed
+    expect(await page.locator("text=This app has not been setup yet").first()).toBeTruthy();
+
+    await page.getByRole("button", { name: "Setup" }).click();
+
+    // Expect "Connect with Alby" to be displayed
+    expect(await page.locator("text=Connect with Alby").first()).toBeTruthy();
+  });
+
+  test("Should display App is not setup already for paypal", async ({ page, users }) => {
+    const user = await users.create();
+    await user.apiLogin();
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+    await prisma.credential.create({
+      data: {
+        type: "paypal_payment",
+        userId: user.id,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+
+    // expect text "This app has not been setup yet" to be displayed
+    expect(await page.locator("text=This app has not been setup yet").first()).toBeTruthy();
+
+    await page.getByRole("button", { name: "Setup" }).click();
+
+    // Expect "Getting started with Paypal APP" to be displayed
+    expect(await page.locator("text=Getting started with Paypal APP").first()).toBeTruthy();
+  });
+
+  /**
+   * For now almost all the payment apps show display "This app has not been setup yet"
+   * this can change in the future
+   */
+  test("Should not display App is not setup already for non payment app", async ({ page, users }) => {
+    // We will use google analytics app for this test
+    const user = await users.create();
+    await user.apiLogin();
+    // Any event should work here
+    const paymentEvent = user.eventTypes.find((item) => item.slug === "paid");
+    if (!paymentEvent) {
+      throw new Error("No payment event found");
+    }
+
+    await prisma.credential.create({
+      data: {
+        type: "ga4_analytics",
+        userId: user.id,
+        appId: "ga4",
+        invalid: false,
+        key: {},
+      },
+    });
+
+    await page.goto(`event-types/${paymentEvent.id}?tabName=apps`);
+
+    await page.locator("#event-type-form").getByRole("switch").click();
+    // make sure Tracking ID is displayed
+    expect(await page.locator("text=Tracking ID").first()).toBeTruthy();
+    await page.getByLabel("Tracking ID").click();
+    await page.getByLabel("Tracking ID").fill("demo");
+    await page.getByTestId("update-eventtype").click();
+  });
+});

apps/web/playwright/profile.e2e.ts

@@ -0,0 +1,24 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe.configure({ mode: "parallel" });
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Teams", () => {
+  test("Profile page is loaded for users in Organization", async ({ page, users }) => {
+    const teamMatesObj = [{ name: "teammate-1" }, { name: "teammate-2" }];
+    const owner = await users.create(undefined, {
+      hasTeam: true,
+      isOrg: true,
+      hasSubteam: true,
+      teammates: teamMatesObj,
+    });
+    await owner.apiLogin();
+    await page.goto("/settings/my-account/profile");
+
+    // check if user avatar is loaded
+    await expect(page.locator('[data-testid="organization-avatar"]')).toBeVisible();
+  });
+});

apps/web/public/static/locales/en/common.json

@@ -255,7 +255,7 @@
   "yours": "Your account",
   "available_apps": "Available Apps",
   "available_apps_lower_case": "Available apps",
-  "available_apps_desc": "You have no apps installed. View popular apps below and explore more in our <1>App Store</1>",
+  "available_apps_desc": "View popular apps below and explore more in our <1>App Store</1>",
   "fixed_host_helper": "Add anyone who needs to attend the event. <1>Learn more</1>",
   "round_robin_helper":"People in the group take turns and only one person will show up for the event.",
   "check_email_reset_password": "Check your email. We sent you a link to reset your password.",
@@ -288,6 +288,7 @@
   "when": "When",
   "where": "Where",
   "add_to_calendar": "Add to calendar",
+  "add_to_calendar_description":"Select where to add events when you’re booked.",
   "add_another_calendar": "Add another calendar",
   "other": "Other",
   "email_sign_in_subject": "Your sign-in link for {{appName}}",
@@ -422,6 +423,7 @@
   "booking_created": "Booking Created",
   "booking_rejected": "Booking Rejected",
   "booking_requested": "Booking Requested",
+  "booking_payment_initiated": "Booking Payment Initiated",
   "meeting_ended": "Meeting Ended",
   "form_submitted": "Form Submitted",
   "booking_paid": "Booking Paid",
@@ -599,6 +601,7 @@
   "hide_book_a_team_member": "Hide Book a Team Member Button",
   "hide_book_a_team_member_description": "Hide Book a Team Member Button from your public pages.",
   "danger_zone": "Danger zone",
+  "account_deletion_cannot_be_undone":"Careful. Account deletion cannot be undone.",
   "back": "Back",
   "cancel": "Cancel",
   "cancel_all_remaining": "Cancel all remaining",
@@ -688,6 +691,7 @@
   "people": "People",
   "your_email": "Your Email",
   "change_avatar": "Change Avatar",
+  "upload_avatar": "Upload Avatar",
   "language": "Language",
   "timezone": "Timezone",
   "first_day_of_week": "First Day of Week",
@@ -1293,7 +1297,7 @@
   "customize_your_brand_colors": "Customize your own brand colour into your booking page.",
   "pro": "Pro",
   "removes_cal_branding": "Removes any {{appName}} related brandings, i.e. 'Powered by {{appName}}.'",
-  "profile_picture": "Profile picture",
+  "profile_picture": "Profile Picture",
   "upload": "Upload",
   "add_profile_photo": "Add profile photo",
   "web3": "Web3",
@@ -1654,7 +1658,7 @@
   "no_recordings_found": "No recordings found",
   "new_workflow_subtitle": "New workflow for...",
   "reporting": "Reporting",
-  "reporting_feature": "See all incoming from data and download it as a CSV",
+  "reporting_feature": "See all incoming form data and download it as a CSV",
   "teams_plan_required": "Teams plan required",
   "routing_forms_are_a_great_way": "Routing forms are a great way to route your incoming leads to the right person. Upgrade to a Teams plan to access this feature.",
   "choose_a_license": "Choose a license",
@@ -1880,6 +1884,7 @@
   "edit_invite_link": "Edit link settings",
   "invite_link_copied": "Invite link copied",
   "invite_link_deleted": "Invite link deleted",
+  "api_key_deleted":"API Key deleted",
   "invite_link_updated": "Invite link settings saved",
   "link_expires_after": "Links set to expire after...",
   "one_day": "1 day",
@@ -2050,14 +2055,33 @@
   "team_no_event_types": "This team has no event types",
   "seat_options_doesnt_multiple_durations": "Seat option doesn't support multiple durations",
   "include_calendar_event": "Include calendar event",
+  "oAuth": "OAuth",
   "recently_added":"Recently added",
   "no_members_found": "No members found",
   "event_setup_length_error":"Event Setup: The duration must be at least 1 minute.",
   "availability_schedules":"Availability Schedules",
+  "unauthorized":"Unauthorized",
+  "access_cal_account": "{{clientName}} would like access to your {{appName}} account",
+  "select_account_team": "Select account or team",
+  "allow_client_to": "This will allow {{clientName}} to",
+  "associate_with_cal_account":"Associate you with your personal info from {{clientName}}",
+  "see_personal_info":"See your personal info, including any personal info you've made publicly available",
+  "see_primary_email_address":"See your primary email address",
+  "connect_installed_apps":"Connect to your installed apps",
+  "access_event_type": "Read, edit, delete your event-types",
+  "access_availability": "Read, edit, delete your availability",
+  "access_bookings": "Read, edit, delete your bookings",
+  "allow_client_to_do": "Allow {{clientName}} to do this?",
+  "oauth_access_information": "By clicking allow, you allow this app to use your information in accordance with their terms of service and privacy policy. You can remove access in the {{appName}} App Store.",
+  "allow": "Allow",
   "view_only_edit_availability_not_onboarded":"This user has not completed onboarding. You will not be able to set their availability until they have completed onboarding.",
   "view_only_edit_availability":"You are viewing this user's availability. You can only edit your own availability.",
   "edit_users_availability":"Edit user's availability: {{username}}",
   "resend_invitation": "Resend invitation",
   "invitation_resent": "The invitation was resent.",
+  "add_client": "Add client",
+  "copy_client_secret_info": "After copying the secret you won't be able to view it anymore",
+  "add_new_client": "Add new Client",
+  "this_app_is_not_setup_already": "This app has not been setup yet",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

apps/web/public/static/locales/eu/common.json

@@ -7,17 +7,32 @@
   "second_other": "{{count}} segundo",
   "upgrade_now": "Eguneratu orain",
   "accept_invitation": "Onartu gonbidapena",
+  "calcom_explained": "{{appName}}-ek bilerak programatzeko azpiegitura eskaintzen du guztiontzat.",
+  "calcom_explained_new_user": "Bukatu zure {{appName}} kontua konfiguratzen! Bileren programazio-arazo guztiak konpontzeko urrats gutxi batzuk besterik ez zaizkizu geratzen.",
   "have_any_questions": "Galderarik? Laguntzeko gaude.",
   "reset_password_subject": "{{appName}}: Pasahitza berrezartzeko argibideak",
   "verify_email_subject": "{{appName}}: egiaztatu zure kontua",
   "check_your_email": "Begiratu zure emaila",
+  "verify_email_page_body": "Email bat bidali dugu {{email}} helbidera. Garrantzitsua da zure email helbidea egiaztatzea, {{appName}}-tik mezuak eta egutegiko eguneratzeak ahalik eta hobekien jasoko dituzula bermatzeko.",
+  "verify_email_banner_body": "Egiaztatu zure email helbidea mezuak eta egutegiko eguneratzeak ahalik eta hobekien jasoko dituzula bermatzeko",
   "verify_email_email_header": "Egiaztatu zure email helbidea",
   "verify_email_email_button": "Egiaztatu emaila",
+  "verify_email_email_body": "Mesedez, egiaztatu zure email helbidea beheko botoia sakatuz.",
+  "verify_email_by_code_email_body": "Mesedez, egiaztatu zure email helbidea beheko kodea erabiliz.",
+  "verify_email_email_link_text": "Hemen duzu esteka, botoiak sakatzea gustuko ez baduzu:",
+  "email_verification_code": "Sartu egiaztatze-kodea",
+  "email_verification_code_placeholder": "Sartu zure email helbidera bidalitako egiaztatze-kodea",
+  "incorrect_email_verification_code": "Egiaztatze-kodea ez da zuzena.",
+  "email_sent": "Email mezua zuzen bidali da",
+  "email_not_sent": "Errore bat gertatu da email mezua bidaltzerakoan",
   "event_declined_subject": "Baztertua: {{title}} {{date}}(e)an",
+  "event_cancelled_subject": "Bertan behera: {{title}} {{date}}(e)an",
   "event_request_declined": "Zure gertaera-eskaera baztertua izan da",
   "event_request_declined_recurring": "Zure gertaera errepikari-eskaera baztertua izan da",
+  "event_request_cancelled": "Zure programatutako gertaera bertan behera utzi da",
   "organizer": "Antolatzailea",
   "need_to_reschedule_or_cancel": "Programazioa aldatu edo bertan behera utzi behar duzu?",
+  "no_options_available": "Ez dago aukerarik eskuragarri",
   "cancellation_reason": "Bertan behera uztearen arrazoia (aukerakoa)",
   "cancellation_reason_placeholder": "Zergatik utzi duzu bertan behera?",
   "rejection_reason": "Errefusatzeko arrazoia",
@@ -25,7 +40,11 @@
   "rejection_reason_description": "Ziur zaude erreserba errefusatu nahi duzula? Erreserba-eskaera egin duen pertsonari jakinaraziko zaio. Arrazoi bat adieraz dezakezu behean.",
   "rejection_confirmation": "Errefusatu erreserba",
   "manage_this_event": "Kudeatu gertaera hau",
+  "invite_team_member": "Gonbidatu taldekidea",
+  "invite_team_individual_segment": "Gonbidatu norbanakoa",
+  "invite_team_notifcation_badge": "Gon.",
   "your_event_has_been_scheduled": "Zure gertaera programatu da",
+  "your_event_has_been_scheduled_recurring": "Zure gertaera errepikaria programatu da",
   "error_message": "Errore-mezua honakoa ian da: '{{errorMessage}}'",
   "refund_failed_subject": "Itzulketak huts egin du: {{name}} - {{date}} - {{eventType}}",
   "refund_failed": "Huts egin du itzulketak {{eventType}} gertaerarako, {{userName}}(r)ekin {{date}}(e)an.",
@@ -37,26 +56,79 @@
   "refunded": "Itzulita",
   "payment": "Ordainketa",
   "pay_now": "Ordaindu orain",
+  "still_waiting_for_approval": "Gertaera bat onarpenaren zain dago",
+  "event_is_still_waiting": "Gertaera-eskaera oraindik zain dago: {{attendeeName}} - {{date}} - {{eventType}}",
   "no_more_results": "Emaitza gehiagorik ez",
   "no_results": "Emaitzarik ez",
   "load_more_results": "Kargatu emaitza gehiago",
+  "integration_meeting_id": "{{integrationName}} bileraren IDa: {{meetingId}}",
   "confirmed_event_type_subject": "Baieztatua: {{eventType}} {{name}}(r)ekin {{date}}(e)an",
+  "new_event_request": "Gertaera berriaren eskaera: {{attendeeName}} - {{date}} - {{eventType}}",
   "confirm_or_reject_request": "Baieztatu edo errefusatu eskaera",
   "check_bookings_page_to_confirm_or_reject": "Begiratu zure erreserba-orrialdea erreserba baieztatu edo errefusatzeko.",
   "event_awaiting_approval": "Gertaera bat zure onarpenaren zain dago",
+  "event_awaiting_approval_recurring": "Gertaera errepikari bat zure onarpenaren zain dago",
+  "someone_requested_an_event": "Norbaitek zure egutegian gertaera bat programatzeko eskaera egin du.",
+  "someone_requested_password_reset": "Norbaitek zure pasahitza aldatzeko esteka bat eskatu du.",
+  "password_reset_email_sent": "Email helbide hau gure sisteman baldin badago, berrezartzeko email mezu bat jaso behar zenuke.",
+  "password_reset_instructions": "Ez baduzu eskaera hau egin, segurua da email mezu honi kasurik ez egitea, eta zure pasahitza ez da aldatuko.",
+  "event_awaiting_approval_subject": "Onarpenaren zain: {{title}} {{date}}(e)an",
+  "event_still_awaiting_approval": "Gertaera bat zure onarpenaren zain dago oraindik",
   "booking_submitted_subject": "Erreserba bidalita: {{title}} {{date}}(e)an",
+  "download_recording_subject": "Deskargatu grabaketa: {{title}} {{date}}(e)an",
+  "download_your_recording": "Deskargatu zure grabaketa",
+  "your_meeting_has_been_booked": "Zure bileraren erreserba egin da",
   "event_type_has_been_rescheduled_on_time_date": "Zure {{title}} getaeraren programazioa aldatu egin da {{date}}(e)ra.",
+  "event_has_been_rescheduled": "Eguneratuta - Zure gertaeraren programazioa aldatu egin da",
+  "request_reschedule_subtitle": "{{organizer}}(e)k erreserba bertan behera utzi du eta beste denbora-tarte bat hautatzeko eskatu dizu.",
+  "request_reschedule_title_organizer": "Beste denbora-tarte bat hautatzeko eskatu diozu {{attendee}}(r)i",
   "hi_user_name": "Kaixo {{name}}",
   "ics_event_title": "{{eventType}} {{name}}(r)ekin",
   "notes": "Oharrak",
   "manage_my_bookings": "Kudeatu nire erreserbak",
   "rejected_event_type_with_organizer": "Errefusatua: {{eventType}} {{organizer}}(r)ekin {{date}}(e)an",
   "hi": "Kaixo",
+  "use_link_to_reset_password": "Erabili beheko esteka pasahitza berrezartzeko",
+  "hey_there": "Kaixo,",
+  "forgot_your_password_calcom": "Pasahitza ahaztu duzu? - {{appName}}",
+  "dismiss": "Alde batera utzi",
+  "no_data_yet": "Ez dago daturik",
+  "ping_test": "Ping testa",
+  "upcoming": "Laster",
+  "recurring": "Errepikariak",
+  "past": "Iraganekoak",
+  "choose_a_file": "Hautatu fitxategi bat...",
+  "upload_image": "Igo irudia",
+  "upload_target": "Igo {{target}}",
+  "no_target": "Ez dago {{target}}(r)ik",
+  "view_notifications": "Ikusi jakinarazpenak",
+  "view_public_page": "Ikusi orrialde publikoa",
+  "copy_public_page_link": "Kopiatu orrialde publikoaren esteka",
+  "sign_out": "Saioa itxi",
+  "add_another": "Gehitu beste bat",
+  "install_another": "Instalatu beste bat",
+  "unavailable": "Ez eskuragarri",
+  "set_work_schedule": "Ezarri zure laneko ordutegia",
   "change_bookings_availability": "Aldatu noiz zauden prest erreserbak jasotzeko",
+  "select": "Hautatu...",
+  "text": "Testua",
+  "multiline_text": "Lerro ugaritako testua",
+  "number": "Zenbakia",
+  "checkbox": "Kontrol-laukia",
+  "is_required": "Derrigorrezkoa da",
+  "required": "Derrigorrezkoa",
+  "optional": "Hautazkoa",
+  "input_type": "Sarrera-mota",
+  "rejected": "Baztertua",
+  "unconfirmed": "Baieztatu gabea",
+  "guests": "Gonbidatuak",
+  "create_account": "Sortu kontua",
+  "confirm_password": "Baieztatu pasahitza",
   "create_booking_link_with_calcom": "Sor ezazu zeure erreserba-esteka {{appName}}(e)kin",
   "user_needs_to_confirm_or_reject_booking": "{{user}}(e)k erreserba baieztatu edo errefusatu behar du oraindik.",
   "booking_submitted": "Zure erreserba bidali da",
   "booking_confirmed": "Zure erreserba baieztatu da",
+  "bookerlayout_column_view": "Zutabea",
   "back_to_bookings": "Itzuli erreserbatara",
   "really_cancel_booking": "Benetan bertan behera utzi nahi duzu zure erreserba?",
   "cannot_cancel_booking": "Ezin duzu erreserba hau bertan behera utzi",

apps/web/public/static/locales/he/common.json

@@ -1063,6 +1063,7 @@
   "your_unique_api_key": "מפתח ה-API הייחודי שלך",
   "copy_safe_api_key": "העתק/י את מפתח ה-API הזה ושמור/י אותו במקום בטוח. אם תאבד/י אותו, יהיה עליך ליצור מפתח חדש.",
   "zapier_setup_instructions": "<0>התחבר/י לחשבון Zapier שלך וצור/י Zap חדש.</0><1>בחר/י את Cal.com כאפליקציית ה-Trigger. בנוסף, בחר/י אירוע Trigger.</1><2>בחר/י את החשבון שלך ולאחר מכן הזן/י את מפתח ה-API הייחודי שלך.</2><3>בדוק/י את ה-Trigger.</3><4>וזהו, הכל מוכן!</4>",
+  "make_setup_instructions": "<0>עבור/י אל <1><0>יצירת קישור Invite</0></1> והתקן/י את אפליקציית Cal.com.</0><1>התחבר/י לחשבון Make שלך וצור/י Scenario חדש.</1><2>בחר/י את Cal.com כאפליקציית ה-Trigger. בנוסף, בחר/י אירוע Trigger.</2><3>בחר/י את החשבון שלך ולאחר מכן הזן/י את מפתח ה-API הייחודי שלך.</3><4>בדוק/י את ה-Trigger.</4><5>וזהו, הכל מוכן!</5>",
   "install_zapier_app": "תחילה עליך להוריד את אפליקציית Zapier מה-App Store ולהתקין אותה.",
   "install_make_app": "תחילה עליך להוריד את אפליקציית Make מה-App Store ולהתקין אותה.",
   "connect_apple_server": "חיבור לשרת Apple",
@@ -1695,6 +1696,7 @@
   "email_no_user_invite_heading_org": "הוזמנת להצטרף לארגון ב-{{appName}}",
   "email_no_user_invite_subheading": "{{invitedBy}} הזמין אותך להצטרף לצוות שלו ב- {{appName}}. {{appName}} הינה מתזמן זימונים שמאפשר לך ולצוות שלך לזמן פגישות בלי כל הפינג פונג במיילים.",
   "email_user_invite_subheading_team": "{{invitedBy}} הזמין/ה אותך להצטרף לצוות שלו/ה בשם '{{teamName}}' באפליקציה {{appName}}. אפליקציית {{appName}} היא כלי לקביעת מועדים לאירועים שמאפשר לך ולצוות שלך לתזמן פגישות בלי כל הפינג פונג במיילים.",
+  "email_user_invite_subheading_org": "{{invitedBy}} הזמין/ה אותך להצטרף לארגון שלו/ה בשם ״{{teamName}}״ באפליקציה {{appName}}. אפליקציית {{appName}} היא כלי לקביעת מועדים לאירועים שמאפשר לך ולארגון שלך לתזמן פגישות בלי הצורך לנהל התכתבויות ארוכות בדוא״ל.",
   "email_no_user_invite_steps_intro": "נדריך אותך במספר קטן של צעדים ותוכל/י להתחיל ליהנות מקביעת מועדים עם ה-{{entity}} שלך במהירות ובלי בעיות.",
   "email_no_user_step_one": "בחר שם משתמש",
   "email_no_user_step_two": "קשר את לוח השנה שלך",
@@ -1865,6 +1867,8 @@
   "insights_no_data_found_for_filter": "לא נמצאו נתונים עבור המסנן שנבחר או התאריכים שנבחרו.",
   "acknowledge_booking_no_show_fee": "מובן לי שאם לא אשתתף באירוע הזה, דמי אי-הגעה בסך {{amount, currency}} ינוכו מהכרטיס שלי.",
   "card_details": "פרטי כרטיס",
+  "something_went_wrong_on_our_end": "משהו השתבש בצד שלנו. פנה/י למחלקת התמיכה שלנו, ואנחנו נפתור זאת מיד עבורך.",
+  "please_provide_following_text_to_suppport": "כשפונים לתמיכה, יש לספק את הטקסט הבא כדי שנוכל לסייע לך בצורה יעילה יותר",
   "seats_and_no_show_fee_error": "נכון לעכשיו, אי אפשר להפעיל מקומות ולחייב דמי אי-הגעה",
   "complete_your_booking": "יש להשלים את ההזמנה",
   "complete_your_booking_subject": "יש להשלים את ההזמנה: {{title}} ב-{{date}}",
@@ -1993,14 +1997,46 @@
   "add_to_team": "הוספה לצוות",
   "remove_users_from_org": "הסרת משתמשים מהארגון",
   "remove_users_from_org_confirm": "בטוח שברצונך להסיר {{userCount}} משתמשים מהארגון הזה?",
+  "user_has_no_schedules": "משתמש זה עדיין לא הגדיר לוחות זמנים",
+  "user_isnt_in_any_teams": "משתמש זה לא שייך לאף צוות",
+  "requires_booker_email_verification": "מחייב אימות של כתובת הדוא\"ל של המזמין",
+  "description_requires_booker_email_verification": "כדי להבטיח אימות של כתובת הדוא\"ל של המזמין לפני תזמון אירועים",
+  "requires_confirmation_mandatory": "ניתן לשלוח הודעות טקסט למשתתפים רק כאשר סוג האירוע מחייב אישור.",
   "organizations": "ארגונים",
   "org_admin_other_teams": "צוותים אחרים",
+  "org_admin_other_teams_description": "כאן תוכל/י לראות צוותים בארגון שאינך שייך/ת אליהם. יש לך אפשרות להוסיף את עצמך, במקרה הצורך.",
+  "no_other_teams_found": "לא נמצא אף צוות אחר",
+  "no_other_teams_found_description": "אין צוותים אחרים בארגון הזה.",
   "attendee_first_name_variable": "השם הפרטי של המשתתף",
   "attendee_last_name_variable": "שם המשפחה של המשתתף",
+  "attendee_first_name_info": "השם הפרטי של האדם שביצע את ההזמנה",
+  "attendee_last_name_info": "שם המשפחה של האדם שביצע את ההזמנה",
   "me": "אני",
+  "verify_team_tooltip": "אמת/י את הצוות שלך כדי לאפשר שליחת הודעות למשתתפים",
   "member_removed": "החבר הוסר",
   "my_availability": "הזמינות שלי",
   "team_availability": "הזמינות של הצוות",
+  "backup_code": "קוד גיבוי",
+  "backup_codes": "קודי גיבוי",
+  "backup_code_instructions": "כל קוד גיבוי יכול לשמש פעם אחת בלבד להענקת גישה בלי היישום המאמת.",
+  "backup_codes_copied": "קודי הגיבוי הועתקו!",
+  "incorrect_backup_code": "קוד הגיבוי שגוי.",
+  "lost_access": "הגישה אבדה",
+  "missing_backup_codes": "לא נמצאו קודי גיבוי. צור/י אותם בהגדרות.",
+  "admin_org_notification_email_subject": "נוצר ארגון חדש: בהמתנה לפעולה",
+  "hi_admin": "שלום, מנהל/ת מערכת",
+  "admin_org_notification_email_title": "ארגון מחייב הגדרת DNS",
+  "admin_org_notification_email_body_part1": "נוצר ארגון עם רכיב ה-slug ‏\"{{orgSlug}}\".<br /><br />חשוב להקפיד להגדיר את רשם ה-DNS כך שיפנה את התת-דומיין המקביל לארגון החדש למיקום שבו האפליקציה הראשית פועלת. אחרת, הארגון לא יוכל לפעול.<br /><br />לפניך פירוט של האפשרויות הבסיסיות ממש להגדרת תת-דומיין כך שיפנה לאפליקציה שלו על מנת שדף הפרופיל של הארגון ייטען.<br /><br />אפשר לעשות את זה עם רשומת A:",
+  "admin_org_notification_email_body_part2": "או רשומת CNAME:",
+  "admin_org_notification_email_body_part3": "לאחר שתגדיר/י את התת-דומיין, יש לסמן שתצורת DNS הושלמה בהגדרות מנהלי המערכת של הארגון.",
+  "admin_org_notification_email_cta": "עבור/י אל הגדרות מנהלי המערכת של הארגון",
+  "org_has_been_processed": "עיבוד הארגון הושלם",
+  "org_error_processing": "היתה שגיאה בעיבוד של ארגון זה",
+  "orgs_page_description": "רשימה של כל הארגונים. קבלת ארגון תאפשר לכל המשתמשים מאותו דומיין דוא\"ל להירשם בלי להצטרך לבצע אימות של כתובת הדוא\"ל.",
+  "unverified": "לא אומת",
+  "dns_missing": "DNS חסר",
+  "mark_dns_configured": "סימון כי DNS הוגדר",
+  "value": "ערך",
   "your_organization_updated_sucessfully": "עדכון הארגון שלך בוצע בהצלחה",
   "team_no_event_types": "אין לצוות זה אף סוג של אירוע",
   "seat_options_doesnt_multiple_durations": "האפשרויות של הושבה במקומות לא תומכות במשכי זמן שונים",

apps/web/test/lib/checkBookingLimits.test.ts

@@ -1,4 +1,4 @@
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
+import prismaMock from "../../../../tests/libs/__mocks__/prismaMock";
 
 import { describe, expect, it } from "vitest";
 

apps/web/test/lib/checkDurationLimits.test.ts

@@ -1,4 +1,4 @@
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
+import prismaMock from "../../../../tests/libs/__mocks__/prismaMock";
 
 import { describe, expect, it } from "vitest";
 

apps/web/test/lib/getSchedule.test.ts

@@ -1,20 +1,18 @@
 import CalendarManagerMock from "../../../../tests/libs/__mocks__/CalendarManager";
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
+import prismock from "../../../../tests/libs/__mocks__/prisma";
 
 import { diff } from "jest-diff";
 import { describe, expect, vi, beforeEach, afterEach, test } from "vitest";
 
-import prisma from "@calcom/prisma";
 import type { BookingStatus } from "@calcom/prisma/enums";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots/types";
 import { getAvailableSlots as getSchedule } from "@calcom/trpc/server/routers/viewer/slots/util";
 
-import { getDate, getGoogleCalendarCredential, createBookingScenario } from "../utils/bookingScenario";
-
-// TODO: Mock properly
-prismaMock.eventType.findUnique.mockResolvedValue(null);
-// @ts-expect-error Prisma v5 typings are not yet available
-prismaMock.user.findMany.mockResolvedValue([]);
+import {
+  getDate,
+  getGoogleCalendarCredential,
+  createBookingScenario,
+} from "../utils/bookingScenario/bookingScenario";
 
 vi.mock("@calcom/lib/constants", () => ({
   IS_PRODUCTION: true,
@@ -146,13 +144,13 @@ const TestData = {
 };
 
 const cleanup = async () => {
-  await prisma.eventType.deleteMany();
-  await prisma.user.deleteMany();
-  await prisma.schedule.deleteMany();
-  await prisma.selectedCalendar.deleteMany();
-  await prisma.credential.deleteMany();
-  await prisma.booking.deleteMany();
-  await prisma.app.deleteMany();
+  await prismock.eventType.deleteMany();
+  await prismock.user.deleteMany();
+  await prismock.schedule.deleteMany();
+  await prismock.selectedCalendar.deleteMany();
+  await prismock.credential.deleteMany();
+  await prismock.booking.deleteMany();
+  await prismock.app.deleteMany();
 };
 
 beforeEach(async () => {
@@ -201,7 +199,7 @@ describe("getSchedule", () => {
         apps: [TestData.apps.googleCalendar],
       };
       // An event with one accepted booking
-      createBookingScenario(scenarioData);
+      await createBookingScenario(scenarioData);
 
       const scheduleForDayWithAGoogleCalendarBooking = await getSchedule({
         input: {
@@ -228,7 +226,7 @@ describe("getSchedule", () => {
       const { dateString: plus3DateString } = getDate({ dateIncrement: 3 });
 
       // An event with one accepted booking
-      createBookingScenario({
+      await createBookingScenario({
         // An event with length 30 minutes, slotInterval 45 minutes, and minimumBookingNotice 1440 minutes (24 hours)
         eventTypes: [
           {
@@ -354,7 +352,7 @@ describe("getSchedule", () => {
     });
 
     test("slots are available as per `length`, `slotInterval` of the event", async () => {
-      createBookingScenario({
+      await createBookingScenario({
         eventTypes: [
           {
             id: 1,
@@ -453,7 +451,7 @@ describe("getSchedule", () => {
         })()
       );
 
-      createBookingScenario({
+      await createBookingScenario({
         eventTypes: [
           {
             id: 1,
@@ -569,7 +567,7 @@ describe("getSchedule", () => {
         apps: [TestData.apps.googleCalendar],
       };
 
-      createBookingScenario(scenarioData);
+      await createBookingScenario(scenarioData);
 
       const scheduleForEventOnADayWithNonCalBooking = await getSchedule({
         input: {
@@ -643,7 +641,7 @@ describe("getSchedule", () => {
         apps: [TestData.apps.googleCalendar],
       };
 
-      createBookingScenario(scenarioData);
+      await createBookingScenario(scenarioData);
 
       const scheduleForEventOnADayWithCalBooking = await getSchedule({
         input: {
@@ -701,7 +699,7 @@ describe("getSchedule", () => {
         apps: [TestData.apps.googleCalendar],
       };
 
-      createBookingScenario(scenarioData);
+      await createBookingScenario(scenarioData);
 
       const schedule = await getSchedule({
         input: {
@@ -765,7 +763,7 @@ describe("getSchedule", () => {
         ],
       };
 
-      createBookingScenario(scenarioData);
+      await createBookingScenario(scenarioData);
 
       const scheduleForEventOnADayWithDateOverride = await getSchedule({
         input: {
@@ -790,7 +788,7 @@ describe("getSchedule", () => {
       const { dateString: plus1DateString } = getDate({ dateIncrement: 1 });
       const { dateString: plus2DateString } = getDate({ dateIncrement: 2 });
 
-      createBookingScenario({
+      await createBookingScenario({
         eventTypes: [
           // A Collective Event Type hosted by this user
           {
@@ -885,7 +883,7 @@ describe("getSchedule", () => {
       const { dateString: plus1DateString } = getDate({ dateIncrement: 1 });
       const { dateString: plus2DateString } = getDate({ dateIncrement: 2 });
 
-      createBookingScenario({
+      await createBookingScenario({
         eventTypes: [
           // An event having two users with one accepted booking
           {
@@ -1010,7 +1008,7 @@ describe("getSchedule", () => {
       const { dateString: plus2DateString } = getDate({ dateIncrement: 2 });
       const { dateString: plus3DateString } = getDate({ dateIncrement: 3 });
 
-      createBookingScenario({
+      await createBookingScenario({
         eventTypes: [
           // An event having two users with one accepted booking
           {

apps/web/test/lib/handleChildrenEventTypes.test.ts

@@ -1,4 +1,4 @@
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
+import prismaMock from "../../../../tests/libs/__mocks__/prismaMock";
 
 import type { EventType } from "@prisma/client";
 import { describe, expect, it, vi } from "vitest";

apps/web/test/lib/team-event-types.test.ts

@@ -1,4 +1,4 @@
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
+import prismaMock from "../../../../tests/libs/__mocks__/prismaMock";
 
 import { expect, it } from "vitest";
 

apps/web/test/utils/bookingScenario.ts

@@ -1,754 +0,0 @@
-import appStoreMock from "../../../../tests/libs/__mocks__/app-store";
-import i18nMock from "../../../../tests/libs/__mocks__/libServerI18n";
-import prismaMock from "../../../../tests/libs/__mocks__/prisma";
-
-import type {
-  EventType as PrismaEventType,
-  User as PrismaUser,
-  Booking as PrismaBooking,
-  App as PrismaApp,
-} from "@prisma/client";
-import type { Prisma } from "@prisma/client";
-import type { WebhookTriggerEvents } from "@prisma/client";
-import { v4 as uuidv4 } from "uuid";
-import { expect } from "vitest";
-import "vitest-fetch-mock";
-
-import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
-import logger from "@calcom/lib/logger";
-import type { SchedulingType } from "@calcom/prisma/enums";
-import type { BookingStatus } from "@calcom/prisma/enums";
-import type { EventBusyDate } from "@calcom/types/Calendar";
-import type { Fixtures } from "@calcom/web/test/fixtures/fixtures";
-
-type App = {
-  slug: string;
-  dirName: string;
-};
-
-type InputWebhook = {
-  appId: string | null;
-  userId?: number | null;
-  teamId?: number | null;
-  eventTypeId?: number;
-  active: boolean;
-  eventTriggers: WebhookTriggerEvents[];
-  subscriberUrl: string;
-};
-/**
- * Data to be mocked
- */
-type ScenarioData = {
-  // hosts: { id: number; eventTypeId?: number; userId?: number; isFixed?: boolean }[];
-  /**
-   * Prisma would return these eventTypes
-   */
-  eventTypes: InputEventType[];
-  /**
-   * Prisma would return these users
-   */
-  users: InputUser[];
-  /**
-   * Prisma would return these apps
-   */
-  apps?: App[];
-  bookings?: InputBooking[];
-  webhooks?: InputWebhook[];
-};
-
-type InputCredential = typeof TestData.credentials.google;
-
-type InputSelectedCalendar = typeof TestData.selectedCalendars.google;
-
-type InputUser = typeof TestData.users.example & { id: number } & {
-  credentials?: InputCredential[];
-  selectedCalendars?: InputSelectedCalendar[];
-  schedules: {
-    id: number;
-    name: string;
-    availability: {
-      userId: number | null;
-      eventTypeId: number | null;
-      days: number[];
-      startTime: Date;
-      endTime: Date;
-      date: string | null;
-    }[];
-    timeZone: string;
-  }[];
-};
-
-type InputEventType = {
-  id: number;
-  title?: string;
-  length?: number;
-  offsetStart?: number;
-  slotInterval?: number;
-  minimumBookingNotice?: number;
-  /**
-   * These user ids are `ScenarioData["users"]["id"]`
-   */
-  users?: { id: number }[];
-  hosts?: { id: number }[];
-  schedulingType?: SchedulingType;
-  beforeEventBuffer?: number;
-  afterEventBuffer?: number;
-  requiresConfirmation?: boolean;
-};
-
-type InputBooking = {
-  userId?: number;
-  eventTypeId: number;
-  startTime: string;
-  endTime: string;
-  title?: string;
-  status: BookingStatus;
-  attendees?: { email: string }[];
-};
-
-const Timezones = {
-  "+5:30": "Asia/Kolkata",
-  "+6:00": "Asia/Dhaka",
-};
-
-function addEventTypes(eventTypes: InputEventType[], usersStore: InputUser[]) {
-  const baseEventType = {
-    title: "Base EventType Title",
-    slug: "base-event-type-slug",
-    timeZone: null,
-    beforeEventBuffer: 0,
-    afterEventBuffer: 0,
-    schedulingType: null,
-
-    //TODO: What is the purpose of periodStartDate and periodEndDate? Test these?
-    periodStartDate: new Date("2022-01-21T09:03:48.000Z"),
-    periodEndDate: new Date("2022-01-21T09:03:48.000Z"),
-    periodCountCalendarDays: false,
-    periodDays: 30,
-    seatsPerTimeSlot: null,
-    metadata: {},
-    minimumBookingNotice: 0,
-    offsetStart: 0,
-  };
-  const foundEvents: Record<number, boolean> = {};
-  const eventTypesWithUsers = eventTypes.map((eventType) => {
-    if (!eventType.slotInterval && !eventType.length) {
-      throw new Error("eventTypes[number]: slotInterval or length must be defined");
-    }
-    if (foundEvents[eventType.id]) {
-      throw new Error(`eventTypes[number]: id ${eventType.id} is not unique`);
-    }
-    foundEvents[eventType.id] = true;
-    const users =
-      eventType.users?.map((userWithJustId) => {
-        return usersStore.find((user) => user.id === userWithJustId.id);
-      }) || [];
-    return {
-      ...baseEventType,
-      ...eventType,
-      workflows: [],
-      users,
-    };
-  });
-
-  logger.silly("TestData: Creating EventType", eventTypes);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const eventTypeMock = ({ where }) => {
-    return new Promise((resolve) => {
-      const eventType = eventTypesWithUsers.find((e) => e.id === where.id) as unknown as PrismaEventType & {
-        users: PrismaUser[];
-      };
-      resolve(eventType);
-    });
-  };
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  prismaMock.eventType.findUnique.mockImplementation(eventTypeMock);
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  prismaMock.eventType.findUniqueOrThrow.mockImplementation(eventTypeMock);
-}
-
-async function addBookings(bookings: InputBooking[], eventTypes: InputEventType[]) {
-  logger.silly("TestData: Creating Bookings", bookings);
-
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  prismaMock.booking.findMany.mockImplementation((findManyArg) => {
-    // @ts-expect-error Prisma v5 breaks this
-    const where = findManyArg?.where || {};
-    return new Promise((resolve) => {
-      resolve(
-        // @ts-expect-error Prisma v5 breaks this
-        bookings
-          // We can improve this filter to support the entire where clause but that isn't necessary yet. So, handle what we know we pass to `findMany` and is needed
-          .filter((booking) => {
-            /**
-             * A user is considered busy within a given time period if there
-             * is a booking they own OR host. This function mocks some of the logic
-             * for each condition. For details see the following ticket:
-             * https://github.com/calcom/cal.com/issues/6374
-             */
-
-            // ~~ FIRST CONDITION ensures that this booking is owned by this user
-            //    and that the status is what we want
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const statusIn = where.OR[0].status?.in || [];
-
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const userIdIn = where.OR[0].userId?.in || [];
-            const firstConditionMatches =
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              statusIn.includes(booking.status) &&
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              (booking.userId === where.OR[0].userId || userIdIn.includes(booking.userId));
-
-            // We return this booking if either condition is met
-            return firstConditionMatches;
-          })
-          .map((booking) => ({
-            uid: uuidv4(),
-            title: "Test Booking Title",
-            ...booking,
-            eventType: eventTypes.find((eventType) => eventType.id === booking.eventTypeId),
-          })) as unknown as PrismaBooking[]
-      );
-    });
-  });
-}
-
-async function addWebhooks(webhooks: InputWebhook[]) {
-  prismaMock.webhook.findMany.mockResolvedValue(
-    // @ts-expect-error Prisma v5 breaks this
-    webhooks.map((webhook) => {
-      return {
-        ...webhook,
-        payloadTemplate: null,
-        secret: null,
-        id: uuidv4(),
-        createdAt: new Date(),
-        userId: webhook.userId || null,
-        eventTypeId: webhook.eventTypeId || null,
-        teamId: webhook.teamId || null,
-      };
-    })
-  );
-}
-
-function addUsers(users: InputUser[]) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  prismaMock.user.findUniqueOrThrow.mockImplementation((findUniqueArgs) => {
-    return new Promise((resolve) => {
-      // @ts-expect-error Prisma v5 breaks this
-      resolve({
-        // @ts-expect-error Prisma v5 breaks this
-        email: `IntegrationTestUser${findUniqueArgs?.where.id}@example.com`,
-      } as unknown as PrismaUser);
-    });
-  });
-
-  prismaMock.user.findMany.mockResolvedValue(
-    // @ts-expect-error Prisma v5 breaks this
-    users.map((user) => {
-      return {
-        ...user,
-        username: `IntegrationTestUser${user.id}`,
-        email: `IntegrationTestUser${user.id}@example.com`,
-      };
-    }) as unknown as PrismaUser[]
-  );
-}
-
-export async function createBookingScenario(data: ScenarioData) {
-  logger.silly("TestData: Creating Scenario", data);
-  addUsers(data.users);
-
-  const eventType = addEventTypes(data.eventTypes, data.users);
-  if (data.apps) {
-    // @ts-expect-error Prisma v5 breaks this
-    prismaMock.app.findMany.mockResolvedValue(data.apps as PrismaApp[]);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    const appMock = ({ where: { slug: whereSlug } }) => {
-      return new Promise((resolve) => {
-        if (!data.apps) {
-          resolve(null);
-          return;
-        }
-
-        const foundApp = data.apps.find(({ slug }) => slug == whereSlug);
-        //TODO: Pass just the app name in data.apps and maintain apps in a separate object or load them dyamically
-        resolve(
-          ({
-            ...foundApp,
-            ...(foundApp?.slug ? TestData.apps[foundApp.slug as keyof typeof TestData.apps] || {} : {}),
-            enabled: true,
-            createdAt: new Date(),
-            updatedAt: new Date(),
-            categories: [],
-          } as PrismaApp) || null
-        );
-      });
-    };
-    // FIXME: How do we know which app to return?
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    prismaMock.app.findUnique.mockImplementation(appMock);
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    prismaMock.app.findFirst.mockImplementation(appMock);
-  }
-  data.bookings = data.bookings || [];
-  allowSuccessfulBookingCreation();
-  addBookings(data.bookings, data.eventTypes);
-  // mockBusyCalendarTimes([]);
-  addWebhooks(data.webhooks || []);
-  return {
-    eventType,
-  };
-}
-
-/**
- * This fn indents to /ally compute day, month, year for the purpose of testing.
- * We are not using DayJS because that's actually being tested by this code.
- * - `dateIncrement` adds the increment to current day
- * - `monthIncrement` adds the increment to current month
- * - `yearIncrement` adds the increment to current year
- */
-export const getDate = (
-  param: { dateIncrement?: number; monthIncrement?: number; yearIncrement?: number } = {}
-) => {
-  let { dateIncrement, monthIncrement, yearIncrement } = param;
-  dateIncrement = dateIncrement || 0;
-  monthIncrement = monthIncrement || 0;
-  yearIncrement = yearIncrement || 0;
-
-  let _date = new Date().getDate() + dateIncrement;
-  let year = new Date().getFullYear() + yearIncrement;
-
-  // Make it start with 1 to match with DayJS requiremet
-  let _month = new Date().getMonth() + monthIncrement + 1;
-
-  // If last day of the month(As _month is plus 1 already it is going to be the 0th day of next month which is the last day of current month)
-  const lastDayOfMonth = new Date(year, _month, 0).getDate();
-  const numberOfDaysForNextMonth = +_date - +lastDayOfMonth;
-  if (numberOfDaysForNextMonth > 0) {
-    _date = numberOfDaysForNextMonth;
-    _month = _month + 1;
-  }
-
-  if (_month === 13) {
-    _month = 1;
-    year = year + 1;
-  }
-
-  const date = _date < 10 ? "0" + _date : _date;
-  const month = _month < 10 ? "0" + _month : _month;
-
-  return {
-    date,
-    month,
-    year,
-    dateString: `${year}-${month}-${date}`,
-  };
-};
-
-export function getMockedCredential({
-  metadataLookupKey,
-  key,
-}: {
-  metadataLookupKey: string;
-  key: {
-    expiry_date?: number;
-    token_type?: string;
-    access_token?: string;
-    refresh_token?: string;
-    scope: string;
-  };
-}) {
-  return {
-    type: appStoreMetadata[metadataLookupKey as keyof typeof appStoreMetadata].type,
-    appId: appStoreMetadata[metadataLookupKey as keyof typeof appStoreMetadata].slug,
-    key: {
-      expiry_date: Date.now() + 1000000,
-      token_type: "Bearer",
-      access_token: "ACCESS_TOKEN",
-      refresh_token: "REFRESH_TOKEN",
-      ...key,
-    },
-  };
-}
-
-export function getGoogleCalendarCredential() {
-  return getMockedCredential({
-    metadataLookupKey: "googlecalendar",
-    key: {
-      scope:
-        "https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar.readonly",
-    },
-  });
-}
-
-export function getZoomAppCredential() {
-  return getMockedCredential({
-    metadataLookupKey: "zoomvideo",
-    key: {
-      scope: "meeting:writed",
-    },
-  });
-}
-
-export const TestData = {
-  selectedCalendars: {
-    google: {
-      integration: "google_calendar",
-      externalId: "john@example.com",
-    },
-  },
-  credentials: {
-    google: getGoogleCalendarCredential(),
-  },
-  schedules: {
-    IstWorkHours: {
-      id: 1,
-      name: "9:30AM to 6PM in India - 4:00AM to 12:30PM in GMT",
-      availability: [
-        {
-          userId: null,
-          eventTypeId: null,
-          days: [0, 1, 2, 3, 4, 5, 6],
-          startTime: new Date("1970-01-01T09:30:00.000Z"),
-          endTime: new Date("1970-01-01T18:00:00.000Z"),
-          date: null,
-        },
-      ],
-      timeZone: Timezones["+5:30"],
-    },
-    IstWorkHoursWithDateOverride: (dateString: string) => ({
-      id: 1,
-      name: "9:30AM to 6PM in India - 4:00AM to 12:30PM in GMT but with a Date Override for 2PM to 6PM IST(in GST time it is 8:30AM to 12:30PM)",
-      availability: [
-        {
-          userId: null,
-          eventTypeId: null,
-          days: [0, 1, 2, 3, 4, 5, 6],
-          startTime: new Date("1970-01-01T09:30:00.000Z"),
-          endTime: new Date("1970-01-01T18:00:00.000Z"),
-          date: null,
-        },
-        {
-          userId: null,
-          eventTypeId: null,
-          days: [0, 1, 2, 3, 4, 5, 6],
-          startTime: new Date(`1970-01-01T14:00:00.000Z`),
-          endTime: new Date(`1970-01-01T18:00:00.000Z`),
-          date: dateString,
-        },
-      ],
-      timeZone: Timezones["+5:30"],
-    }),
-  },
-  users: {
-    example: {
-      name: "Example",
-      email: "example@example.com",
-      username: "example",
-      defaultScheduleId: 1,
-      timeZone: Timezones["+5:30"],
-    },
-  },
-  apps: {
-    "google-calendar": {
-      slug: "google-calendar",
-      dirName: "whatever",
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      //@ts-ignore
-      keys: {
-        expiry_date: Infinity,
-        client_id: "client_id",
-        client_secret: "client_secret",
-        redirect_uris: ["http://localhost:3000/auth/callback"],
-      },
-    },
-    "daily-video": {
-      slug: "daily-video",
-      dirName: "whatever",
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      //@ts-ignore
-      keys: {
-        expiry_date: Infinity,
-        api_key: "",
-        scale_plan: "false",
-        client_id: "client_id",
-        client_secret: "client_secret",
-        redirect_uris: ["http://localhost:3000/auth/callback"],
-      },
-    },
-  },
-};
-
-function allowSuccessfulBookingCreation() {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-  prismaMock.booking.create.mockImplementation(function (booking) {
-    return booking.data;
-  });
-}
-
-export class MockError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "MockError";
-  }
-}
-
-export function getOrganizer({
-  name,
-  email,
-  id,
-  schedules,
-  credentials,
-  selectedCalendars,
-}: {
-  name: string;
-  email: string;
-  id: number;
-  schedules: InputUser["schedules"];
-  credentials?: InputCredential[];
-  selectedCalendars?: InputSelectedCalendar[];
-}) {
-  return {
-    ...TestData.users.example,
-    name,
-    email,
-    id,
-    schedules,
-    credentials,
-    selectedCalendars,
-  };
-}
-
-export function getScenarioData({
-  organizer,
-  eventTypes,
-  usersApartFromOrganizer = [],
-  apps = [],
-  webhooks,
-}: // hosts = [],
-{
-  organizer: ReturnType<typeof getOrganizer>;
-  eventTypes: ScenarioData["eventTypes"];
-  apps: ScenarioData["apps"];
-  usersApartFromOrganizer?: ScenarioData["users"];
-  webhooks?: ScenarioData["webhooks"];
-  // hosts?: ScenarioData["hosts"];
-}) {
-  const users = [organizer, ...usersApartFromOrganizer];
-  eventTypes.forEach((eventType) => {
-    if (
-      eventType.users?.filter((eventTypeUser) => {
-        return !users.find((userToCreate) => userToCreate.id === eventTypeUser.id);
-      }).length
-    ) {
-      throw new Error(`EventType ${eventType.id} has users that are not present in ScenarioData["users"]`);
-    }
-  });
-  return {
-    // hosts: [...hosts],
-    eventTypes: [...eventTypes],
-    users,
-    apps: [...apps],
-    webhooks,
-  };
-}
-
-export function mockEnableEmailFeature() {
-  // @ts-expect-error Prisma v5 breaks this
-  prismaMock.feature.findMany.mockResolvedValue([
-    {
-      slug: "emails",
-      // It's a kill switch
-      enabled: false,
-    },
-  ]);
-}
-
-export function mockNoTranslations() {
-  // @ts-expect-error FIXME
-  i18nMock.getTranslation.mockImplementation(() => {
-    return new Promise((resolve) => {
-      const identityFn = (key: string) => key;
-      resolve(identityFn);
-    });
-  });
-}
-
-export function mockCalendarToHaveNoBusySlots(metadataLookupKey: keyof typeof appStoreMetadata) {
-  const appStoreLookupKey = metadataLookupKey;
-  appStoreMock.default[appStoreLookupKey as keyof typeof appStoreMock.default].mockResolvedValue({
-    lib: {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      //@ts-ignore
-      CalendarService: function MockCalendarService() {
-        return {
-          createEvent: () => {
-            return Promise.resolve({
-              type: "daily_video",
-              id: "dailyEventName",
-              password: "dailyvideopass",
-              url: "http://dailyvideo.example.com",
-            });
-          },
-          getAvailability: (): Promise<EventBusyDate[]> => {
-            return new Promise((resolve) => {
-              resolve([]);
-            });
-          },
-        };
-      },
-    },
-  });
-}
-
-export function mockSuccessfulVideoMeetingCreation({
-  metadataLookupKey,
-  appStoreLookupKey,
-}: {
-  metadataLookupKey: string;
-  appStoreLookupKey?: string;
-}) {
-  appStoreLookupKey = appStoreLookupKey || metadataLookupKey;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-  appStoreMock.default[appStoreLookupKey as keyof typeof appStoreMock.default].mockImplementation(() => {
-    return new Promise((resolve) => {
-      resolve({
-        lib: {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          VideoApiAdapter: () => ({
-            createMeeting: () => {
-              return Promise.resolve({
-                type: appStoreMetadata[metadataLookupKey as keyof typeof appStoreMetadata].type,
-                id: "MOCK_ID",
-                password: "MOCK_PASS",
-                url: `http://mock-${metadataLookupKey}.example.com`,
-              });
-            },
-          }),
-        },
-      });
-    });
-  });
-}
-
-export function mockErrorOnVideoMeetingCreation({
-  metadataLookupKey,
-  appStoreLookupKey,
-}: {
-  metadataLookupKey: string;
-  appStoreLookupKey?: string;
-}) {
-  appStoreLookupKey = appStoreLookupKey || metadataLookupKey;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  //@ts-ignore
-  appStoreMock.default[appStoreLookupKey].mockImplementation(() => {
-    return new Promise((resolve) => {
-      resolve({
-        lib: {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          //@ts-ignore
-          VideoApiAdapter: () => ({
-            createMeeting: () => {
-              throw new MockError("Error creating Video meeting");
-            },
-          }),
-        },
-      });
-    });
-  });
-}
-
-export function expectWebhookToHaveBeenCalledWith(
-  subscriberUrl: string,
-  data: {
-    triggerEvent: WebhookTriggerEvents;
-    payload: { metadata: Record<string, unknown>; responses: Record<string, unknown> };
-  }
-) {
-  const fetchCalls = fetchMock.mock.calls;
-  const webhookFetchCall = fetchCalls.find((call) => call[0] === subscriberUrl);
-  if (!webhookFetchCall) {
-    throw new Error(`Webhook not called with ${subscriberUrl}`);
-  }
-  expect(webhookFetchCall[0]).toBe(subscriberUrl);
-  const body = webhookFetchCall[1]?.body;
-  const parsedBody = JSON.parse((body as string) || "{}");
-  console.log({ payload: parsedBody.payload });
-  expect(parsedBody.triggerEvent).toBe(data.triggerEvent);
-  parsedBody.payload.metadata.videoCallUrl = parsedBody.payload.metadata.videoCallUrl
-    ? parsedBody.payload.metadata.videoCallUrl.replace(/\/video\/[a-zA-Z0-9]{22}/, "/video/DYNAMIC_UID")
-    : parsedBody.payload.metadata.videoCallUrl;
-  expect(parsedBody.payload.metadata).toContain(data.payload.metadata);
-  expect(parsedBody.payload.responses).toEqual(data.payload.responses);
-}
-
-export function expectWorkflowToBeTriggered() {
-  // TODO: Implement this.
-}
-
-export function expectBookingToBeInDatabase(booking: Partial<Prisma.BookingCreateInput>) {
-  const createBookingCalledWithArgs = prismaMock.booking.create.mock.calls[0];
-  expect(createBookingCalledWithArgs[0].data).toEqual(expect.objectContaining(booking));
-}
-
-export function getBooker({ name, email }: { name: string; email: string }) {
-  return {
-    name,
-    email,
-  };
-}
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace jest {
-    interface Matchers<R> {
-      toHaveEmail(expectedEmail: { htmlToContain?: string; to: string }): R;
-    }
-  }
-}
-
-expect.extend({
-  toHaveEmail(
-    testEmail: ReturnType<Fixtures["emails"]["get"]>[number],
-    expectedEmail: {
-      //TODO: Support email HTML parsing to target specific elements
-      htmlToContain?: string;
-      to: string;
-    }
-  ) {
-    let isHtmlContained = true;
-    let isToAddressExpected = true;
-    if (expectedEmail.htmlToContain) {
-      isHtmlContained = testEmail.html.includes(expectedEmail.htmlToContain);
-    }
-    isToAddressExpected = expectedEmail.to === testEmail.to;
-
-    return {
-      pass: isHtmlContained && isToAddressExpected,
-      message: () => {
-        if (!isHtmlContained) {
-          return `Email HTML is not as expected. Expected:"${expectedEmail.htmlToContain}" isn't contained in "${testEmail.html}"`;
-        }
-
-        return `Email To address is not as expected. Expected:${expectedEmail.to} isn't contained in ${testEmail.to}`;
-      },
-    };
-  },
-});

apps/web/test/utils/bookingScenario/MockPaymentService.ts

@@ -0,0 +1,88 @@
+import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
+
+import type { Payment, Prisma, PaymentOption, Booking } from "@prisma/client";
+import { v4 as uuidv4 } from "uuid";
+import "vitest-fetch-mock";
+
+import { sendAwaitingPaymentEmail } from "@calcom/emails";
+import logger from "@calcom/lib/logger";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+import type { IAbstractPaymentService } from "@calcom/types/PaymentService";
+
+export function getMockPaymentService() {
+  function createPaymentLink(/*{ paymentUid, name, email, date }*/) {
+    return "http://mock-payment.example.com/";
+  }
+  const paymentUid = uuidv4();
+  const externalId = uuidv4();
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  class MockPaymentService implements IAbstractPaymentService {
+    // TODO: We shouldn't need to implement adding a row to Payment table but that's a requirement right now.
+    // We should actually delegate table creation to the core app. Here, only the payment app specific logic should come
+    async create(
+      payment: Pick<Prisma.PaymentUncheckedCreateInput, "amount" | "currency">,
+      bookingId: Booking["id"],
+      userId: Booking["userId"],
+      username: string | null,
+      bookerName: string | null,
+      bookerEmail: string,
+      paymentOption: PaymentOption
+    ) {
+      const paymentCreateData = {
+        id: 1,
+        uid: paymentUid,
+        appId: null,
+        bookingId,
+        // booking       Booking?       @relation(fields: [bookingId], references: [id], onDelete: Cascade)
+        fee: 10,
+        success: true,
+        refunded: false,
+        data: {},
+        externalId,
+        paymentOption,
+        amount: payment.amount,
+        currency: payment.currency,
+      };
+
+      const paymentData = prismaMock.payment.create({
+        data: paymentCreateData,
+      });
+      logger.silly("Created mock payment", JSON.stringify({ paymentData }));
+
+      return paymentData;
+    }
+    async afterPayment(
+      event: CalendarEvent,
+      booking: {
+        user: { email: string | null; name: string | null; timeZone: string } | null;
+        id: number;
+        startTime: { toISOString: () => string };
+        uid: string;
+      },
+      paymentData: Payment
+    ): Promise<void> {
+      // TODO: App implementing PaymentService is supposed to send email by itself at the moment.
+      await sendAwaitingPaymentEmail({
+        ...event,
+        paymentInfo: {
+          link: createPaymentLink(/*{
+            paymentUid: paymentData.uid,
+            name: booking.user?.name,
+            email: booking.user?.email,
+            date: booking.startTime.toISOString(),
+          }*/),
+          paymentOption: paymentData.paymentOption || "ON_BOOKING",
+          amount: paymentData.amount,
+          currency: paymentData.currency,
+        },
+      });
+    }
+  }
+  return {
+    paymentUid,
+    externalId,
+    MockPaymentService,
+  };
+}

apps/web/test/utils/bookingScenario/expects.ts

@@ -0,0 +1,646 @@
+import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
+
+import type { WebhookTriggerEvents, Booking, BookingReference } from "@prisma/client";
+import ical from "node-ical";
+import { expect } from "vitest";
+import "vitest-fetch-mock";
+
+import logger from "@calcom/lib/logger";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { BookingStatus } from "@calcom/prisma/enums";
+import type { CalendarEvent } from "@calcom/types/Calendar";
+import type { Fixtures } from "@calcom/web/test/fixtures/fixtures";
+
+import type { InputEventType } from "./bookingScenario";
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace jest {
+    interface Matchers<R> {
+      toHaveEmail(
+        expectedEmail: {
+          //TODO: Support email HTML parsing to target specific elements
+          htmlToContain?: string;
+          to: string;
+          noIcs?: true;
+          ics?: {
+            filename: string;
+            iCalUID: string;
+          };
+        },
+        to: string
+      ): R;
+    }
+  }
+}
+
+expect.extend({
+  toHaveEmail(
+    emails: Fixtures["emails"],
+    expectedEmail: {
+      //TODO: Support email HTML parsing to target specific elements
+      htmlToContain?: string;
+      to: string;
+      ics: {
+        filename: string;
+        iCalUID: string;
+      };
+      noIcs: true;
+    },
+    to: string
+  ) {
+    const testEmail = emails.get().find((email) => email.to.includes(to));
+    const emailsToLog = emails
+      .get()
+      .map((email) => ({ to: email.to, html: email.html, ics: email.icalEvent }));
+    if (!testEmail) {
+      logger.silly("All Emails", JSON.stringify({ numEmails: emailsToLog.length, emailsToLog }));
+      return {
+        pass: false,
+        message: () => `No email sent to ${to}`,
+      };
+    }
+    const ics = testEmail.icalEvent;
+    const icsObject = ics?.content ? ical.sync.parseICS(ics?.content) : null;
+
+    let isHtmlContained = true;
+    let isToAddressExpected = true;
+    const isIcsFilenameExpected = expectedEmail.ics ? ics?.filename === expectedEmail.ics.filename : true;
+    const isIcsUIDExpected = expectedEmail.ics
+      ? !!(icsObject ? icsObject[expectedEmail.ics.iCalUID] : null)
+      : true;
+
+    if (expectedEmail.htmlToContain) {
+      isHtmlContained = testEmail.html.includes(expectedEmail.htmlToContain);
+    }
+
+    isToAddressExpected = expectedEmail.to === testEmail.to;
+
+    if (!isHtmlContained || !isToAddressExpected) {
+      logger.silly("All Emails", JSON.stringify({ numEmails: emailsToLog.length, emailsToLog }));
+    }
+
+    return {
+      pass:
+        isHtmlContained &&
+        isToAddressExpected &&
+        (expectedEmail.noIcs ? true : isIcsFilenameExpected && isIcsUIDExpected),
+      message: () => {
+        if (!isHtmlContained) {
+          return `Email HTML is not as expected. Expected:"${expectedEmail.htmlToContain}" isn't contained in "${testEmail.html}"`;
+        }
+
+        if (!isToAddressExpected) {
+          return `Email To address is not as expected. Expected:${expectedEmail.to} isn't equal to ${testEmail.to}`;
+        }
+
+        if (!isIcsFilenameExpected) {
+          return `ICS Filename is not as expected. Expected:${expectedEmail.ics.filename} isn't equal to ${ics?.filename}`;
+        }
+
+        if (!isIcsUIDExpected) {
+          return `ICS UID is not as expected. Expected:${
+            expectedEmail.ics.iCalUID
+          } isn't present in ${JSON.stringify(icsObject)}`;
+        }
+        throw new Error("Unknown error");
+      },
+    };
+  },
+});
+
+export function expectWebhookToHaveBeenCalledWith(
+  subscriberUrl: string,
+  data: {
+    triggerEvent: WebhookTriggerEvents;
+    payload: Record<string, unknown> | null;
+  }
+) {
+  const fetchCalls = fetchMock.mock.calls;
+  const webhooksToSubscriberUrl = fetchCalls.filter((call) => {
+    return call[0] === subscriberUrl;
+  });
+  logger.silly("Scanning fetchCalls for webhook", safeStringify(fetchCalls));
+  const webhookFetchCall = webhooksToSubscriberUrl.find((call) => {
+    const body = call[1]?.body;
+    const parsedBody = JSON.parse((body as string) || "{}");
+    return parsedBody.triggerEvent === data.triggerEvent;
+  });
+
+  if (!webhookFetchCall) {
+    throw new Error(
+      `Webhook not sent to ${subscriberUrl} for ${data.triggerEvent}. All webhooks: ${JSON.stringify(
+        webhooksToSubscriberUrl
+      )}`
+    );
+  }
+  expect(webhookFetchCall[0]).toBe(subscriberUrl);
+  const body = webhookFetchCall[1]?.body;
+  const parsedBody = JSON.parse((body as string) || "{}");
+
+  expect(parsedBody.triggerEvent).toBe(data.triggerEvent);
+  if (parsedBody.payload.metadata?.videoCallUrl) {
+    parsedBody.payload.metadata.videoCallUrl = parsedBody.payload.metadata.videoCallUrl
+      ? parsedBody.payload.metadata.videoCallUrl.replace(/\/video\/[a-zA-Z0-9]{22}/, "/video/DYNAMIC_UID")
+      : parsedBody.payload.metadata.videoCallUrl;
+  }
+  if (data.payload) {
+    if (data.payload.metadata !== undefined) {
+      expect(parsedBody.payload.metadata).toEqual(expect.objectContaining(data.payload.metadata));
+    }
+    if (data.payload.responses !== undefined)
+      expect(parsedBody.payload.responses).toEqual(expect.objectContaining(data.payload.responses));
+    const { responses: _1, metadata: _2, ...remainingPayload } = data.payload;
+    expect(parsedBody.payload).toEqual(expect.objectContaining(remainingPayload));
+  }
+}
+
+export function expectWorkflowToBeTriggered() {
+  // TODO: Implement this.
+}
+
+export async function expectBookingToBeInDatabase(
+  booking: Partial<Booking> & Pick<Booking, "uid"> & { references?: Partial<BookingReference>[] }
+) {
+  const actualBooking = await prismaMock.booking.findUnique({
+    where: {
+      uid: booking.uid,
+    },
+    include: {
+      references: true,
+    },
+  });
+
+  const { references, ...remainingBooking } = booking;
+  expect(actualBooking).toEqual(expect.objectContaining(remainingBooking));
+  expect(actualBooking?.references).toEqual(
+    expect.arrayContaining((references || []).map((reference) => expect.objectContaining(reference)))
+  );
+}
+
+export function expectSuccessfulBookingCreationEmails({
+  emails,
+  organizer,
+  booker,
+  iCalUID,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  iCalUID: string;
+}) {
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>confirmed_event_type_subject</title>",
+      to: `${organizer.email}`,
+      ics: {
+        filename: "event.ics",
+        iCalUID: iCalUID,
+      },
+    },
+    `${organizer.email}`
+  );
+
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>confirmed_event_type_subject</title>",
+      to: `${booker.name} <${booker.email}>`,
+      ics: {
+        filename: "event.ics",
+        iCalUID: iCalUID,
+      },
+    },
+    `${booker.name} <${booker.email}>`
+  );
+}
+
+export function expectBrokenIntegrationEmails({
+  emails,
+  organizer,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+}) {
+  // Broken Integration email is only sent to the Organizer
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>broken_integration</title>",
+      to: `${organizer.email}`,
+      // No ics goes in case of broken integration email it seems
+      // ics: {
+      //   filename: "event.ics",
+      //   iCalUID: iCalUID,
+      // },
+    },
+    `${organizer.email}`
+  );
+
+  // expect(emails).toHaveEmail(
+  //   {
+  //     htmlToContain: "<title>confirmed_event_type_subject</title>",
+  //     to: `${booker.name} <${booker.email}>`,
+  //   },
+  //   `${booker.name} <${booker.email}>`
+  // );
+}
+
+export function expectCalendarEventCreationFailureEmails({
+  emails,
+  organizer,
+  booker,
+  iCalUID,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  iCalUID: string;
+}) {
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>broken_integration</title>",
+      to: `${organizer.email}`,
+      ics: {
+        filename: "event.ics",
+        iCalUID,
+      },
+    },
+    `${organizer.email}`
+  );
+
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>calendar_event_creation_failure_subject</title>",
+      to: `${booker.name} <${booker.email}>`,
+      ics: {
+        filename: "event.ics",
+        iCalUID,
+      },
+    },
+    `${booker.name} <${booker.email}>`
+  );
+}
+
+export function expectSuccessfulBookingRescheduledEmails({
+  emails,
+  organizer,
+  booker,
+  iCalUID,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  iCalUID: string;
+}) {
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>event_type_has_been_rescheduled_on_time_date</title>",
+      to: `${organizer.email}`,
+      ics: {
+        filename: "event.ics",
+        iCalUID,
+      },
+    },
+    `${organizer.email}`
+  );
+
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>event_type_has_been_rescheduled_on_time_date</title>",
+      to: `${booker.name} <${booker.email}>`,
+      ics: {
+        filename: "event.ics",
+        iCalUID,
+      },
+    },
+    `${booker.name} <${booker.email}>`
+  );
+}
+export function expectAwaitingPaymentEmails({
+  emails,
+  booker,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+}) {
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>awaiting_payment_subject</title>",
+      to: `${booker.name} <${booker.email}>`,
+      noIcs: true,
+    },
+    `${booker.email}`
+  );
+}
+
+export function expectBookingRequestedEmails({
+  emails,
+  organizer,
+  booker,
+}: {
+  emails: Fixtures["emails"];
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+}) {
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>event_awaiting_approval_subject</title>",
+      to: `${organizer.email}`,
+      noIcs: true,
+    },
+    `${organizer.email}`
+  );
+
+  expect(emails).toHaveEmail(
+    {
+      htmlToContain: "<title>booking_submitted_subject</title>",
+      to: `${booker.email}`,
+      noIcs: true,
+    },
+    `${booker.email}`
+  );
+}
+
+export function expectBookingRequestedWebhookToHaveBeenFired({
+  booker,
+  location,
+  subscriberUrl,
+  paidEvent,
+  eventType,
+}: {
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  subscriberUrl: string;
+  location: string;
+  paidEvent?: boolean;
+  eventType: InputEventType;
+}) {
+  // There is an inconsistency in the way we send the data to the webhook for paid events and unpaid events. Fix that and then remove this if statement.
+  if (!paidEvent) {
+    expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+      triggerEvent: "BOOKING_REQUESTED",
+      payload: {
+        eventTitle: eventType.title,
+        eventDescription: eventType.description,
+        metadata: {
+          // In a Pending Booking Request, we don't send the video call url
+        },
+        responses: {
+          name: { label: "your_name", value: booker.name },
+          email: { label: "email_address", value: booker.email },
+          location: {
+            label: "location",
+            value: { optionValue: "", value: location },
+          },
+        },
+      },
+    });
+  } else {
+    expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+      triggerEvent: "BOOKING_REQUESTED",
+      payload: {
+        eventTitle: eventType.title,
+        eventDescription: eventType.description,
+        metadata: {
+          // In a Pending Booking Request, we don't send the video call url
+        },
+        responses: {
+          name: { label: "name", value: booker.name },
+          email: { label: "email", value: booker.email },
+          location: {
+            label: "location",
+            value: { optionValue: "", value: location },
+          },
+        },
+      },
+    });
+  }
+}
+
+export function expectBookingCreatedWebhookToHaveBeenFired({
+  booker,
+  location,
+  subscriberUrl,
+  paidEvent,
+  videoCallUrl,
+}: {
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  subscriberUrl: string;
+  location: string;
+  paidEvent?: boolean;
+  videoCallUrl?: string | null;
+}) {
+  if (!paidEvent) {
+    expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+      triggerEvent: "BOOKING_CREATED",
+      payload: {
+        metadata: {
+          ...(videoCallUrl ? { videoCallUrl } : null),
+        },
+        responses: {
+          name: { label: "your_name", value: booker.name },
+          email: { label: "email_address", value: booker.email },
+          location: {
+            label: "location",
+            value: { optionValue: "", value: location },
+          },
+        },
+      },
+    });
+  } else {
+    expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+      triggerEvent: "BOOKING_CREATED",
+      payload: {
+        // FIXME: File this bug and link ticket here. This is a bug in the code. metadata must be sent here like other BOOKING_CREATED webhook
+        metadata: null,
+        responses: {
+          name: { label: "name", value: booker.name },
+          email: { label: "email", value: booker.email },
+          location: {
+            label: "location",
+            value: { optionValue: "", value: location },
+          },
+        },
+      },
+    });
+  }
+}
+
+export function expectBookingRescheduledWebhookToHaveBeenFired({
+  booker,
+  location,
+  subscriberUrl,
+  videoCallUrl,
+}: {
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  subscriberUrl: string;
+  location: string;
+  paidEvent?: boolean;
+  videoCallUrl?: string;
+}) {
+  expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+    triggerEvent: "BOOKING_RESCHEDULED",
+    payload: {
+      metadata: {
+        ...(videoCallUrl ? { videoCallUrl } : null),
+      },
+      responses: {
+        name: { label: "your_name", value: booker.name },
+        email: { label: "email_address", value: booker.email },
+        location: {
+          label: "location",
+          value: { optionValue: "", value: location },
+        },
+      },
+    },
+  });
+}
+
+export function expectBookingPaymentIntiatedWebhookToHaveBeenFired({
+  booker,
+  location,
+  subscriberUrl,
+  paymentId,
+}: {
+  organizer: { email: string; name: string };
+  booker: { email: string; name: string };
+  subscriberUrl: string;
+  location: string;
+  paymentId: number;
+}) {
+  expectWebhookToHaveBeenCalledWith(subscriberUrl, {
+    triggerEvent: "BOOKING_PAYMENT_INITIATED",
+    payload: {
+      paymentId: paymentId,
+      metadata: {
+        // In a Pending Booking Request, we don't send the video call url
+      },
+      responses: {
+        name: { label: "your_name", value: booker.name },
+        email: { label: "email_address", value: booker.email },
+        location: {
+          label: "location",
+          value: { optionValue: "", value: location },
+        },
+      },
+    },
+  });
+}
+
+export function expectSuccessfulCalendarEventCreationInCalendar(
+  calendarMock: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    createEventCalls: any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateEventCalls: any[];
+  },
+  expected: {
+    calendarId: string | null;
+    videoCallUrl: string;
+  }
+) {
+  expect(calendarMock.createEventCalls.length).toBe(1);
+  const call = calendarMock.createEventCalls[0];
+  const calEvent = call[0];
+
+  expect(calEvent).toEqual(
+    expect.objectContaining({
+      destinationCalendar: expected.calendarId
+        ? [
+            expect.objectContaining({
+              externalId: expected.calendarId,
+            }),
+          ]
+        : null,
+      videoCallData: expect.objectContaining({
+        url: expected.videoCallUrl,
+      }),
+    })
+  );
+}
+
+export function expectSuccessfulCalendarEventUpdationInCalendar(
+  calendarMock: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    createEventCalls: any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateEventCalls: any[];
+  },
+  expected: {
+    externalCalendarId: string;
+    calEvent: Partial<CalendarEvent>;
+    uid: string;
+  }
+) {
+  expect(calendarMock.updateEventCalls.length).toBe(1);
+  const call = calendarMock.updateEventCalls[0];
+  const uid = call[0];
+  const calendarEvent = call[1];
+  const externalId = call[2];
+  expect(uid).toBe(expected.uid);
+  expect(calendarEvent).toEqual(expect.objectContaining(expected.calEvent));
+  expect(externalId).toBe(expected.externalCalendarId);
+}
+
+export function expectSuccessfulVideoMeetingCreationInCalendar(
+  videoMock: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    createMeetingCalls: any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateMeetingCalls: any[];
+  },
+  expected: {
+    externalCalendarId: string;
+    calEvent: Partial<CalendarEvent>;
+    uid: string;
+  }
+) {
+  expect(videoMock.createMeetingCalls.length).toBe(1);
+  const call = videoMock.createMeetingCalls[0];
+  const uid = call[0];
+  const calendarEvent = call[1];
+  const externalId = call[2];
+  expect(uid).toBe(expected.uid);
+  expect(calendarEvent).toEqual(expect.objectContaining(expected.calEvent));
+  expect(externalId).toBe(expected.externalCalendarId);
+}
+
+export function expectSuccessfulVideoMeetingUpdationInCalendar(
+  videoMock: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    createMeetingCalls: any[];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    updateMeetingCalls: any[];
+  },
+  expected: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    bookingRef: any;
+    calEvent: Partial<CalendarEvent>;
+  }
+) {
+  expect(videoMock.updateMeetingCalls.length).toBe(1);
+  const call = videoMock.updateMeetingCalls[0];
+  const bookingRef = call[0];
+  const calendarEvent = call[1];
+  expect(bookingRef).toEqual(expect.objectContaining(expected.bookingRef));
+  expect(calendarEvent).toEqual(expect.objectContaining(expected.calEvent));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function expectBookingInDBToBeRescheduledFromTo({ from, to }: { from: any; to: any }) {
+  // Expect previous booking to be cancelled
+  await expectBookingToBeInDatabase({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ...from,
+    status: BookingStatus.CANCELLED,
+  });
+
+  // Expect new booking to be created
+  await expectBookingToBeInDatabase({
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ...to,
+    status: BookingStatus.ACCEPTED,
+  });
+}

package.json

@@ -78,6 +78,7 @@
     "@playwright/test": "^1.31.2",
     "@snaplet/copycat": "^0.3.0",
     "@testing-library/jest-dom": "^5.16.5",
+    "@types/jsonwebtoken": "^9.0.3",
     "c8": "^7.13.0",
     "dotenv-checker": "^1.1.5",
     "husky": "^8.0.0",
@@ -86,7 +87,9 @@
     "jsdom": "^22.0.0",
     "lint-staged": "^12.5.0",
     "mailhog": "^4.16.0",
+    "node-ical": "^0.16.1",
     "prettier": "^2.8.6",
+    "prismock": "^1.21.1",
     "tsc-absolute": "^1.0.0",
     "typescript": "^4.9.4",
     "vitest": "^0.34.3",

packages/app-store-cli/src/components/AppCreateUpdateForm.tsx

@@ -208,7 +208,7 @@ export const AppForm = ({
             </Text>
             <Text>
               Tip : Go and change the logo of your {isTemplate ? "template" : "app"} by replacing{" "}
-              {getAppDirPath(slug, isTemplate) + "/static/icon.svg"}
+              {`${getAppDirPath(slug, isTemplate)}/static/icon.svg`}
             </Text>
             <Newline />
             <Text bold underline color="blue">

packages/app-store-cli/src/components/Message.tsx

@@ -12,7 +12,7 @@ export function Message({
     if (message.showInProgressIndicator) {
       const interval = setInterval(() => {
         setProgressText((progressText) => {
-          return progressText.length > 3 ? "" : progressText + ".";
+          return progressText.length > 3 ? "" : `${progressText}.`;
         });
       }, 1000);
       return () => {

packages/app-store-cli/src/core.ts

@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 
-import { APP_STORE_PATH, TEMPLATES_PATH, IS_WINDOWS_PLATFORM} from "./constants";
+import { APP_STORE_PATH, TEMPLATES_PATH, IS_WINDOWS_PLATFORM } from "./constants";
 import execSync from "./utils/execSync";
 
 const slugify = (str: string) => {
@@ -70,7 +70,11 @@ export const BaseAppFork = {
     const appDirPath = getAppDirPath(slug, isTemplate);
     if (!editMode) {
       await execSync(IS_WINDOWS_PLATFORM ? `mkdir ${appDirPath}` : `mkdir -p ${appDirPath}`);
-      await execSync(IS_WINDOWS_PLATFORM ? `xcopy "${TEMPLATES_PATH}\\${template}\\*" "${appDirPath}" /e /i` : `cp -r ${TEMPLATES_PATH}/${template}/* ${appDirPath}`);
+      await execSync(
+        IS_WINDOWS_PLATFORM
+          ? `xcopy "${TEMPLATES_PATH}\\${template}\\*" "${appDirPath}" /e /i`
+          : `cp -r ${TEMPLATES_PATH}/${template}/* ${appDirPath}`
+      );
     } else {
       if (!oldSlug) {
         throw new Error("oldSlug is required when editMode is true");
@@ -79,7 +83,9 @@ export const BaseAppFork = {
         // We need to rename only if they are different
         const oldAppDirPath = getAppDirPath(oldSlug, isTemplate);
 
-        await execSync(IS_WINDOWS_PLATFORM ? `move ${oldAppDirPath} ${appDirPath}` : `mv ${oldAppDirPath} ${appDirPath}`);
+        await execSync(
+          IS_WINDOWS_PLATFORM ? `move ${oldAppDirPath} ${appDirPath}` : `mv ${oldAppDirPath} ${appDirPath}`
+        );
       }
     }
     updatePackageJson({ slug, appDirPath, appDescription: description });

packages/app-store/CONTRIBUTING.md

@@ -1,11 +1,13 @@
 ## App Contribution Guidelines
 
 #### `DESCRIPTION.md`
+
 1. images - include atleast 4 images (do we have a recommended size here?). Can show app in use and/or installation steps
 2. add only file name for images, path not required. i.e. `1.jpeg`, not `/app-store/zohocalendar/1.jpeg`
 3. description should include what the integration with Cal allows the user to do e.g. `Allows you to sync Cal bookings with your Zoho Calendar`
 
 #### `README.md`
+
 1. Include installation instructions and links to the app's website.
 
 2. For url use `<baseUrl>/api/integrations`, rather than `<Cal.com>/api/integrations`
@@ -16,7 +18,8 @@
 2. description here should not exceed 10 words (this is arbitrary, but should not be long otherwise it's truncated in the app store)
 
 #### Others
-1. Add API documentation links in comments for files `api`, `lib` and `types` 
+
+1. Add API documentation links in comments for files `api`, `lib` and `types`
 2. Use [`AppDeclarativeHandler`](../types/AppHandler.d.ts) across all apps. Whatever isn't supported in it, support that.
 3. README should be added in the respective app and can be linked in main README [like this](https://github.com/calcom/cal.com/pull/10429/files/155ac84537d12026f595551fe3542e810b029714#diff-b335630551682c19a781afebcf4d07bf978fb1f8ac04c6bf87428ed5106870f5R509)
-4. Also, no env variables should be added by an app. They should be [added in `zod.ts`](https://github.com/calcom/cal.com/blob/main/packages/app-store/jitsivideo/zod.ts) and then they would be automatically available to be modified by the cal.com app admin.
+4. Also, no env variables should be added by an app. They should be [added in `zod.ts`](https://github.com/calcom/cal.com/blob/main/packages/app-store/jitsivideo/zod.ts) and then they would be automatically available to be modified by the cal.com app admin. In local development you can open /settings/admin with the admin credentials (see [seed.ts](packages/prisma/seed.ts))

packages/app-store/_components/AppCard.tsx

@@ -1,10 +1,12 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
+import { useTranslation } from "react-i18next";
 
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import { classNames } from "@calcom/lib";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Switch, Badge, Avatar } from "@calcom/ui";
+import { Switch, Badge, Avatar, Button } from "@calcom/ui";
+import { Settings } from "@calcom/ui/components/icon";
 
 import type { CredentialOwner } from "../types";
 import OmniInstallAppButton from "./OmniInstallAppButton";
@@ -27,6 +29,7 @@ export default function AppCard({
   teamId?: number;
   LockedIcon?: React.ReactNode;
 }) {
+  const { t } = useTranslation();
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
   const { setAppData, LockedIcon, disabled } = useAppContextWithSchema();
 
@@ -41,7 +44,7 @@ export default function AppCard({
         <div className="flex w-full flex-col gap-2 sm:flex-row sm:gap-0">
           {/* Don't know why but w-[42px] isn't working, started happening when I started using next/dynamic */}
           <Link
-            href={"/apps/" + app.slug}
+            href={`/apps/${app.slug}`}
             className={classNames(app?.isInstalled ? "mr-[11px]" : "mr-3", "h-auto w-10 rounded-sm")}>
             <img
               className={classNames(
@@ -111,8 +114,23 @@ export default function AppCard({
       </div>
       <div ref={animationRef}>
         {app?.isInstalled && switchChecked && <hr className="border-subtle" />}
+
         {app?.isInstalled && switchChecked ? (
-          <div className="p-4 pt-5 text-sm [&_input]:mb-0 [&_input]:leading-4">{children}</div>
+          app.isSetupAlready === undefined || app.isSetupAlready ? (
+            <div className="relative p-4 pt-5 text-sm [&_input]:mb-0 [&_input]:leading-4">
+              <Link href={`/apps/${app.slug}/setup`} className="absolute right-4 top-4">
+                <Settings className="text-default h-4 w-4" aria-hidden="true" />
+              </Link>
+              {children}
+            </div>
+          ) : (
+            <div className="flex h-64 w-full flex-col items-center justify-center gap-4 ">
+              <p>{t("this_app_is_not_setup_already")}</p>
+              <Link href={`/apps/${app.slug}/setup`}>
+                <Button StartIcon={Settings}>{t("setup")}</Button>
+              </Link>
+            </div>
+          )
         ) : null}
       </div>
     </div>