v3.3.6

* add parentId

* Allow POST parentId

* adds eventtypeid of children

* add doc

* adds userId in children

* adds validations

* adds docstring

* fix status codes

* check fix for owners

.env.appStore.example

@@ -125,4 +125,5 @@ SALESFORCE_CONSUMER_SECRET=""
 ZOHOCRM_CLIENT_ID=""
 ZOHOCRM_CLIENT_SECRET=""
 
+
 # *********************************************************************************************************

.github/workflows/crowdin.yml

@@ -21,10 +21,18 @@ jobs:
       - name: crowdin action
         uses: crowdin/github-action@v1.13.0
         with:
+          # upload sources
           upload_sources: true
+          
+          # upload translations (& auto-approve 'em)
+          upload_translations_args: '--auto-approve-imported'
           upload_translations: true
-          download_translations: true
           push_translations: true
+          
+          # download translations
+          download_translations: true
+          
+          # GH config
           commit_message: "New Crowdin translations by Github Action"
           localization_branch_name: main
           create_pull_request: false

.github/workflows/semantic-pull-requests.yml

@@ -44,4 +44,5 @@ jobs:
         with:
           header: pr-title-lint-error
           message: |
-            Thank you for following the naming conventions! 🙏
+            Thank you for following the naming conventions! 🙏 Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
+

.github/workflows/welcome-new-contributors.yml

@@ -22,6 +22,6 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: |-
             Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-            Feel free to join the conversation at [discord](https://go.cal.com/discord)
+            Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
           issue-message: |
             Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

.gitpod.yml

@@ -5,7 +5,9 @@ tasks:
       next_auth_secret=$(openssl rand -base64 32) &&
       calendso_encryption_key=$(openssl rand -base64 24) &&
       sed -i -e "s|^NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET=$next_auth_secret|" \
-             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" .env
+             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" \
+             -e "s|http://localhost:3000|https://localhost:3000|" \
+             -e "s|localhost:3000|3000-$GITPOD_WORKSPACE_ID.$GITPOD_WORKSPACE_CLUSTER_HOST|" .env
     command: yarn dx
 
 ports:

.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
 
@@ -504,6 +530,10 @@ For example, `Cal.com (support@cal.com)`.
 9. Click the "Save"/ "UPDATE" button at the bottom footer.
 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
 
+### 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/.env.example

@@ -1,4 +1,7 @@
 BACKEND_URL=http://localhost:3002/api
+# BACKEND_URL=https://api.cal.com/v1
+FRONTEND_URL=http://localhost:3000
+# FRONTEND_URL=https://cal.com
 
 APP_ID=cal-ai
 APP_URL=http://localhost:3000/apps/cal-ai

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.0.1",
+  "version": "1.1.1",
   "private": true,
   "author": "Cal.com Inc.",
   "dependencies": {

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

@@ -18,21 +18,21 @@ export const POST = async (request: NextRequest) => {
 
   const json = await request.json();
 
-  const { apiKey, userId, message, subject, user, replyTo } = json;
+  const { apiKey, userId, message, subject, user, users, replyTo: agentEmail } = json;
 
   if ((!message && !subject) || !user) {
     return new NextResponse("Missing fields", { status: 400 });
   }
 
   try {
-    const response = await agent(`${subject}\n\n${message}`, user, apiKey, userId);
+    const response = await agent(`${subject}\n\n${message}`, { ...user }, users, apiKey, userId, agentEmail);
 
     // Send response to user
     await sendEmail({
       subject: `Re: ${subject}`,
       text: response.replace(/(?:\r\n|\r|\n)/g, "\n"),
       to: user.email,
-      from: replyTo,
+      from: agentEmail,
     });
 
     return new NextResponse("ok");

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

@@ -8,6 +8,7 @@ import prisma from "@calcom/prisma";
 import { env } from "../../../env.mjs";
 import { fetchAvailability } from "../../../tools/getAvailability";
 import { fetchEventTypes } from "../../../tools/getEventTypes";
+import { extractUsers } from "../../../utils/extractUsers";
 import getHostFromHeaders from "../../../utils/host";
 import now from "../../../utils/now";
 import sendEmail from "../../../utils/sendEmail";
@@ -45,6 +46,7 @@ export const POST = async (request: NextRequest) => {
     select: {
       email: true,
       id: true,
+      username: true,
       timeZone: true,
       credentials: {
         select: {
@@ -53,15 +55,15 @@ export const POST = async (request: NextRequest) => {
         },
       },
     },
-    where: { email: envelope.from },
+    where: { email: envelope.from, credentials: { some: { appId: env.APP_ID } } },
   });
 
   // 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,
     });
@@ -76,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,
     });
@@ -89,7 +91,7 @@ export const POST = async (request: NextRequest) => {
   const { apiKey } = credential as { apiKey: string };
 
   // Pre-fetch data relevant to most bookings.
-  const [eventTypes, availability] = await Promise.all([
+  const [eventTypes, availability, users] = await Promise.all([
     fetchEventTypes({
       apiKey,
     }),
@@ -99,6 +101,7 @@ export const POST = async (request: NextRequest) => {
       dateFrom: now(user.timeZone),
       dateTo: now(user.timeZone),
     }),
+    extractUsers(`${parsed.text} ${parsed.subject}`),
   ]);
 
   if ("error" in availability) {
@@ -138,9 +141,11 @@ export const POST = async (request: NextRequest) => {
       user: {
         email: user.email,
         eventTypes,
+        username: user.username,
         timeZone: user.timeZone,
         workingHours,
       },
+      users,
     }),
     headers: {
       "Content-Type": "application/json",

apps/ai/src/env.mjs

@@ -17,6 +17,7 @@ export const env = createEnv({
    */
   runtimeEnv: {
     BACKEND_URL: process.env.BACKEND_URL,
+    FRONTEND_URL: process.env.FRONTEND_URL,
     APP_ID: process.env.APP_ID,
     APP_URL: process.env.APP_URL,
     PARSE_KEY: process.env.PARSE_KEY,
@@ -32,6 +33,7 @@ export const env = createEnv({
    */
   server: {
     BACKEND_URL: z.string().url(),
+    FRONTEND_URL: z.string().url(),
     APP_ID: z.string().min(1),
     APP_URL: z.string().url(),
     PARSE_KEY: z.string().min(1),

apps/ai/src/tools/createBooking.ts

@@ -1,6 +1,8 @@
 import { DynamicStructuredTool } from "langchain/tools";
 import { z } from "zod";
 
+import type { UserList } from "~/src/types/user";
+
 import { env } from "../env.mjs";
 
 /**
@@ -9,21 +11,23 @@ import { env } from "../env.mjs";
 const createBooking = async ({
   apiKey,
   userId,
+  users,
   eventTypeId,
   start,
   end,
   timeZone,
   language,
-  responses,
+  invite,
 }: {
   apiKey: string;
   userId: number;
+  users: UserList;
   eventTypeId: number;
   start: string;
   end: string;
   timeZone: string;
   language: string;
-  responses: { name?: string; email?: string; location?: string };
+  invite: number;
   title?: string;
   status?: string;
 }): Promise<string | Error | { error: string }> => {
@@ -36,6 +40,18 @@ const createBooking = async ({
 
   const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
 
+  const user = users.find((u) => u.id === invite);
+
+  if (!user) {
+    return { error: `User with id ${invite} not found to invite` };
+  }
+
+  const responses = {
+    id: invite,
+    name: user.username,
+    email: user.email,
+  };
+
   const response = await fetch(url, {
     body: JSON.stringify({
       end,
@@ -66,19 +82,19 @@ const createBooking = async ({
   return "Booking created";
 };
 
-const createBookingTool = (apiKey: string, userId: number) => {
+const createBookingTool = (apiKey: string, userId: number, users: UserList) => {
   return new DynamicStructuredTool({
-    description:
-      "Tries to create a booking. If the user is unavailable, it will return availability that day, allowing you to avoid the getAvailability step in many cases.",
-    func: async ({ eventTypeId, start, end, timeZone, language, responses, title, status }) => {
+    description: "Creates a booking on the primary user's calendar.",
+    func: async ({ eventTypeId, start, end, timeZone, language, invite, title, status }) => {
       return JSON.stringify(
         await createBooking({
           apiKey,
           userId,
+          users,
           end,
           eventTypeId,
           language,
-          responses,
+          invite,
           start,
           status,
           timeZone,
@@ -86,19 +102,14 @@ const createBookingTool = (apiKey: string, userId: number) => {
         })
       );
     },
-    name: "createBookingIfAvailable",
+    name: "createBooking",
     schema: z.object({
       end: z
         .string()
         .describe("This should correspond to the event type's length, unless otherwise specified."),
       eventTypeId: z.number(),
       language: z.string(),
-      responses: z
-        .object({
-          email: z.string().optional(),
-          name: z.string().optional(),
-        })
-        .describe("External invited user. Not the user making the request."),
+      invite: z.number().describe("External user id to invite."),
       start: z.string(),
       status: z.string().optional().describe("ACCEPTED, PENDING, CANCELLED or REJECTED"),
       timeZone: z.string(),

apps/ai/src/tools/getAvailability.ts

@@ -12,13 +12,11 @@ export const fetchAvailability = async ({
   userId,
   dateFrom,
   dateTo,
-  eventTypeId,
 }: {
   apiKey: string;
   userId: number;
   dateFrom: string;
   dateTo: string;
-  eventTypeId?: number;
 }): Promise<Partial<Availability> | { error: string }> => {
   const params: { [k: string]: string } = {
     apiKey,
@@ -27,8 +25,6 @@ export const fetchAvailability = async ({
     dateTo,
   };
 
-  if (eventTypeId) params["eventTypeId"] = eventTypeId.toString();
-
   const urlParams = new URLSearchParams(params);
 
   const url = `${env.BACKEND_URL}/availability?${urlParams.toString()}`;
@@ -51,30 +47,29 @@ export const fetchAvailability = async ({
   };
 };
 
-const getAvailabilityTool = (apiKey: string, userId: number) => {
+const getAvailabilityTool = (apiKey: string) => {
   return new DynamicStructuredTool({
-    description: "Get availability within range.",
-    func: async ({ dateFrom, dateTo, eventTypeId }) => {
+    description: "Get availability of users within range.",
+    func: async ({ userIds, dateFrom, dateTo }) => {
       return JSON.stringify(
-        await fetchAvailability({
-          apiKey,
-          userId,
-          dateFrom,
-          dateTo,
-          eventTypeId,
-        })
+        await Promise.all(
+          userIds.map(
+            async (userId) =>
+              await fetchAvailability({
+                userId: userId,
+                apiKey,
+                dateFrom,
+                dateTo,
+              })
+          )
+        )
       );
     },
     name: "getAvailability",
     schema: z.object({
+      userIds: z.array(z.number()).describe("The users to fetch availability for."),
       dateFrom: z.string(),
       dateTo: z.string(),
-      eventTypeId: z
-        .number()
-        .optional()
-        .describe(
-          "The ID of the event type to filter availability for if you've called getEventTypes, otherwise do not include."
-        ),
     }),
   });
 };

apps/ai/src/tools/getBookings.ts

@@ -60,7 +60,7 @@ const fetchBookings = async ({
 
 const getBookingsTool = (apiKey: string, userId: number) => {
   return new DynamicStructuredTool({
-    description: "Get bookings for a user between two dates.",
+    description: "Get bookings for the primary user between two dates.",
     func: async ({ from, to }) => {
       return JSON.stringify(await fetchBookings({ apiKey, userId, from, to }));
     },

apps/ai/src/tools/getEventTypes.ts

@@ -7,11 +7,15 @@ import type { EventType } from "../types/eventType";
 /**
  * Fetches event types by user ID.
  */
-export const fetchEventTypes = async ({ apiKey }: { apiKey: string }) => {
-  const params = {
+export const fetchEventTypes = async ({ apiKey, userId }: { apiKey: string; userId?: number }) => {
+  const params: Record<string, string> = {
     apiKey,
   };
 
+  if (userId) {
+    params["userId"] = userId.toString();
+  }
+
   const urlParams = new URLSearchParams(params);
 
   const url = `${env.BACKEND_URL}/event-types?${urlParams.toString()}`;
@@ -28,6 +32,7 @@ export const fetchEventTypes = async ({ apiKey }: { apiKey: string }) => {
 
   return data.event_types.map((eventType: EventType) => ({
     id: eventType.id,
+    slug: eventType.slug,
     length: eventType.length,
     title: eventType.title,
   }));
@@ -35,16 +40,19 @@ export const fetchEventTypes = async ({ apiKey }: { apiKey: string }) => {
 
 const getEventTypesTool = (apiKey: string) => {
   return new DynamicStructuredTool({
-    description: "Get the user's event type IDs. Usually necessary to book a meeting.",
-    func: async () => {
+    description: "Get a user's event type IDs. Usually necessary to book a meeting.",
+    func: async ({ userId }) => {
       return JSON.stringify(
         await fetchEventTypes({
           apiKey,
+          userId,
         })
       );
     },
     name: "getEventTypes",
-    schema: z.object({}),
+    schema: z.object({
+      userId: z.number().optional().describe("The user ID. Defaults to the primary user's ID."),
+    }),
   });
 };
 

apps/ai/src/tools/sendBookingLink.ts

@@ -0,0 +1,81 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "~/src/env.mjs";
+import type { User, UserList } from "~/src/types/user";
+import sendEmail from "~/src/utils/sendEmail";
+
+export const sendBookingLink = async ({
+  user,
+  agentEmail,
+  subject,
+  to,
+  message,
+  eventTypeSlug,
+  date,
+}: {
+  apiKey: string;
+  user: User;
+  users: UserList;
+  agentEmail: string;
+  subject: string;
+  to: string[];
+  message: string;
+  eventTypeSlug: string;
+  date: string;
+}) => {
+  const url = `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date}`;
+
+  await sendEmail({
+    subject,
+    to,
+    cc: user.email,
+    from: agentEmail,
+    text: message.split("[[[Booking Link]]]").join(url),
+    html: message
+      .split("\n")
+      .join("<br>")
+      .split("[[[Booking Link]]]")
+      .join(`<a href="${url}">Booking Link</a>`),
+  });
+
+  return "Booking link sent";
+};
+
+const sendBookingLinkTool = (apiKey: string, user: User, users: UserList, agentEmail: string) => {
+  return new DynamicStructuredTool({
+    description: "Send a booking link via email. Useful for scheduling with non cal users.",
+    func: async ({ message, subject, to, eventTypeSlug, date }) => {
+      return JSON.stringify(
+        await sendBookingLink({
+          apiKey,
+          user,
+          users,
+          agentEmail,
+          subject,
+          to,
+          message,
+          eventTypeSlug,
+          date,
+        })
+      );
+    },
+    name: "sendBookingLink",
+
+    schema: z.object({
+      message: z
+        .string()
+        .describe(
+          "Make sure to nicely format the message and introduce yourself as the primary user's booking assistant. Make sure to include a spot for the link using: [[[Booking Link]]]"
+        ),
+      subject: z.string(),
+      to: z
+        .array(z.string())
+        .describe("array of emails to send the booking link to. Primary user is automatically CC'd"),
+      eventTypeSlug: z.string().describe("the slug of the event type to book"),
+      date: z.string().describe("the date (yyyy-mm-dd) to suggest for the booking"),
+    }),
+  });
+};
+
+export default sendBookingLinkTool;

apps/ai/src/types/user.ts

@@ -2,8 +2,17 @@ import type { EventType } from "./eventType";
 import type { WorkingHours } from "./workingHours";
 
 export type User = {
+  id: number;
   email: string;
+  username: string;
   timeZone: string;
   eventTypes: EventType[];
   workingHours: WorkingHours[];
 };
+
+export type UserList = {
+  id?: number;
+  email?: string;
+  username?: string;
+  type: "fromUsername" | "fromEmail";
+}[];

apps/ai/src/utils/agent.ts

@@ -2,30 +2,40 @@ import { initializeAgentExecutorWithOptions } from "langchain/agents";
 import { ChatOpenAI } from "langchain/chat_models/openai";
 
 import { env } from "../env.mjs";
-import createBookingIfAvailable from "../tools/createBookingIfAvailable";
+import createBookingIfAvailable from "../tools/createBooking";
 import deleteBooking from "../tools/deleteBooking";
 import getAvailability from "../tools/getAvailability";
 import getBookings from "../tools/getBookings";
+import sendBookingLink from "../tools/sendBookingLink";
 import updateBooking from "../tools/updateBooking";
 import type { EventType } from "../types/eventType";
-import type { User } from "../types/user";
+import type { User, UserList } from "../types/user";
 import type { WorkingHours } from "../types/workingHours";
 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.
  */
-const agent = async (input: string, user: User, apiKey: string, userId: number) => {
+const agent = async (
+  input: string,
+  user: User,
+  users: UserList,
+  apiKey: string,
+  userId: number,
+  agentEmail: string
+) => {
   const tools = [
-    createBookingIfAvailable(apiKey, userId),
-    getAvailability(apiKey, userId),
+    // getEventTypes(apiKey),
+    getAvailability(apiKey),
     getBookings(apiKey, userId),
+    createBookingIfAvailable(apiKey, userId, users),
     updateBooking(apiKey, userId),
     deleteBooking(apiKey),
+    sendBookingLink(apiKey, user, users, agentEmail),
   ];
 
   const model = new ChatOpenAI({
@@ -39,24 +49,48 @@ const agent = async (input: string, user: User, apiKey: string, userId: number)
    */
   const executor = await initializeAgentExecutorWithOptions(tools, model, {
     agentArgs: {
-      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 the user should be formatted per that user's timezone.
+      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.
 
-            The current time in the user's timezone is: ${now(user.timeZone)}
-            The user's time zone is: ${user.timeZone}
-            The user's event types are: ${user.eventTypes
-              .map((e: EventType) => `ID: ${e.id}, Title: ${e.title}, Length: ${e.length}`)
-              .join("\n")}
-            The user's working hours are: ${user.workingHours
-              .map(
-                (w: WorkingHours) =>
-                  `Days: ${w.days.join(", ")}, Start Time (minutes in UTC): ${
-                    w.startTime
-                  }, End Time (minutes in UTC): ${w.endTime}`
-              )
-              .join("\n")}
+The primary user's id is: ${userId}
+The primary user's username is: ${user.username}
+The current time in the primary user's timezone is: ${now(user.timeZone)}
+The primary user's time zone is: ${user.timeZone}
+The primary user's event types are: ${user.eventTypes
+        .map((e: EventType) => `ID: ${e.id}, Slug: ${e.slug}, Title: ${e.title}, Length: ${e.length};`)
+        .join("\n")}
+The primary user's working hours are: ${user.workingHours
+        .map(
+          (w: WorkingHours) =>
+            `Days: ${w.days.join(", ")}, Start Time (minutes in UTC): ${
+              w.startTime
+            }, End Time (minutes in UTC): ${w.endTime};`
+        )
+        .join("\n")}
+${
+  users.length
+    ? `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)")
+            };`
+        )
+        .join("\n")}`
+    : ""
+}
             `,
     },
     agentType: "openai-functions",

apps/ai/src/utils/context.ts

@@ -0,0 +1 @@
+export const context = { apiKey: "", userId: "" };

apps/ai/src/utils/extractUsers.ts

@@ -0,0 +1,81 @@
+import prisma from "@calcom/prisma";
+
+import type { UserList } from "../types/user";
+
+/*
+ * Extracts usernames (@Example) and emails (hi@example.com) from a string
+ */
+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);
+
+  const dbUsersFromUsernames = usernames
+    ? await prisma.user.findMany({
+        select: {
+          id: true,
+          username: true,
+          email: true,
+        },
+        where: {
+          username: {
+            in: usernames,
+          },
+        },
+      })
+    : [];
+
+  const usersFromUsernames = usernames
+    ? usernames.map((username) => {
+        const user = dbUsersFromUsernames.find((u) => u.username === username);
+        return user
+          ? {
+              username,
+              id: user.id,
+              email: user.email,
+              type: "fromUsername",
+            }
+          : {
+              username,
+              id: null,
+              email: null,
+              type: "fromUsername",
+            };
+      })
+    : [];
+
+  const dbUsersFromEmails = emails
+    ? await prisma.user.findMany({
+        select: {
+          id: true,
+          email: true,
+          username: true,
+        },
+        where: {
+          email: {
+            in: emails,
+          },
+        },
+      })
+    : [];
+
+  const usersFromEmails = emails
+    ? emails.map((email) => {
+        const user = dbUsersFromEmails.find((u) => u.email === email);
+        return user
+          ? {
+              email,
+              id: user.id,
+              username: user.username,
+              type: "fromEmail",
+            }
+          : {
+              email,
+              id: null,
+              username: null,
+              type: "fromEmail",
+            };
+      })
+    : [];
+
+  return [...usersFromUsernames, ...usersFromEmails] as UserList;
+};

apps/ai/src/utils/sendEmail.ts

@@ -8,12 +8,14 @@ const sendgridAPIKey = process.env.SENDGRID_API_KEY as string;
 const send = async ({
   subject,
   to,
+  cc,
   from,
   text,
   html,
 }: {
   subject: string;
-  to: string;
+  to: string | string[];
+  cc?: string | string[];
   from: string;
   text: string;
   html?: string;
@@ -22,9 +24,10 @@ const send = async ({
 
   const msg = {
     to,
+    cc,
     from: {
       email: from,
-      name: "Cal AI",
+      name: "Cal.ai",
     },
     text,
     html,

apps/api/lib/validations/event-type.ts

@@ -24,6 +24,11 @@ const hostSchema = _HostModel.pick({
   userId: true,
 });
 
+export const childrenSchema = z.object({
+  id: z.number().int(),
+  userId: z.number().int(),
+});
+
 export const schemaEventTypeBaseBodyParams = EventType.pick({
   title: true,
   description: true,
@@ -45,6 +50,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   disableGuests: true,
   hideCalendarNotes: true,
   minimumBookingNotice: true,
+  parentId: true,
   beforeEventBuffer: true,
   afterEventBuffer: true,
   teamId: true,
@@ -56,7 +62,12 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   bookingLimits: true,
   durationLimits: true,
 })
-  .merge(z.object({ hosts: z.array(hostSchema).optional().default([]) }))
+  .merge(
+    z.object({
+      children: z.array(childrenSchema).optional().default([]),
+      hosts: z.array(hostSchema).optional().default([]),
+    })
+  )
   .partial()
   .strict();
 
@@ -73,6 +84,7 @@ const schemaEventTypeCreateParams = z
     seatsShowAvailabilityCount: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
     scheduleId: z.number().optional(),
+    parentId: z.number().optional(),
   })
   .strict();
 
@@ -125,6 +137,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
   price: true,
   currency: true,
   slotInterval: true,
+  parentId: true,
   successRedirectUrl: true,
   description: true,
   locations: true,
@@ -137,6 +150,8 @@ export const schemaEventTypeReadPublic = EventType.pick({
   durationLimits: true,
 }).merge(
   z.object({
+    children: z.array(childrenSchema).optional().default([]),
+    hosts: z.array(hostSchema).optional().default([]),
     locations: z
       .array(
         z.object({

apps/api/pages/api/availability/_get.ts

@@ -10,9 +10,9 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
 
 /**
  * @swagger
- * /availability:
+ * /teams/{teamId}/availability:
  *   get:
- *     summary: Find user or team availability
+ *     summary: Find team availability
  *     parameters:
  *       - in: query
  *         name: apiKey
@@ -21,25 +21,14 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *           type: string
  *         example: "1234abcd5678efgh"
  *         description: Your API key
- *       - in: query
- *         name: userId
- *         schema:
- *           type: integer
- *         example: 101
- *         description: ID of the user to fetch the availability for
- *       - in: query
+ *       - in: path
  *         name: teamId
+ *         required: true
  *         schema:
  *           type: integer
  *         example: 123
  *         description: ID of the team to fetch the availability for
  *       - in: query
- *         name: username
- *         schema:
- *           type: string
- *         example: "alice"
- *         description: username of the user to fetch the availability for
- *       - in: query
  *         name: dateFrom
  *         schema:
  *           type: string
@@ -59,7 +48,7 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *           type: integer
  *         example: 123
  *         description: Event Type ID of the event type to fetch the availability for
- *     operationId: availability
+ *     operationId: team-availability
  *     tags:
  *     - availability
  *     responses:
@@ -96,7 +85,89 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *       401:
  *        description: Authorization information is missing or invalid.
  *       404:
- *         description: User not found | Team not found | Team has no members
+ *         description: Team not found | Team has no members
+ *
+ * /availability:
+ *   get:
+ *     summary: Find user availability
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         example: "1234abcd5678efgh"
+ *         description: Your API key
+ *       - in: query
+ *         name: userId
+ *         schema:
+ *           type: integer
+ *         example: 101
+ *         description: ID of the user to fetch the availability for
+ *       - in: query
+ *         name: username
+ *         schema:
+ *           type: string
+ *         example: "alice"
+ *         description: username of the user to fetch the availability for
+ *       - in: query
+ *         name: dateFrom
+ *         schema:
+ *           type: string
+ *           format: date
+ *         example: "2023-05-14 00:00:00"
+ *         description: Start Date of the availability query
+ *       - in: query
+ *         name: dateTo
+ *         schema:
+ *           type: string
+ *           format: date
+ *         example: "2023-05-20 00:00:00"
+ *         description: End Date of the availability query
+ *       - in: query
+ *         name: eventTypeId
+ *         schema:
+ *           type: integer
+ *         example: 123
+ *         description: Event Type ID of the event type to fetch the availability for
+ *     operationId: user-availability
+ *     tags:
+ *     - availability
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               example:
+ *                 busy:
+ *                   - start: "2023-05-14T10:00:00.000Z"
+ *                     end: "2023-05-14T11:00:00.000Z"
+ *                     title: "Team meeting between Alice and Bob"
+ *                   - start: "2023-05-15T14:00:00.000Z"
+ *                     end: "2023-05-15T15:00:00.000Z"
+ *                     title: "Project review between Carol and Dave"
+ *                   - start: "2023-05-16T09:00:00.000Z"
+ *                     end: "2023-05-16T10:00:00.000Z"
+ *                   - start: "2023-05-17T13:00:00.000Z"
+ *                     end: "2023-05-17T14:00:00.000Z"
+ *                 timeZone: "America/New_York"
+ *                 workingHours:
+ *                   - days: [1, 2, 3, 4, 5]
+ *                     startTime: 540
+ *                     endTime: 1020
+ *                     userId: 101
+ *                 dateOverrides:
+ *                   - date: "2023-05-15"
+ *                     startTime: 600
+ *                     endTime: 960
+ *                     userId: 101
+ *                 currentSeats: 4
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: User not found
  */
 interface MemberRoles {
   [userId: number | string]: MembershipRole;

apps/api/pages/api/event-types/[id]/_get.ts

@@ -52,6 +52,7 @@ export async function getHandler(req: NextApiRequest) {
       team: { select: { slug: true } },
       users: true,
       owner: { select: { username: true, id: true } },
+      children: { select: { id: true, userId: true } },
     },
   });
   await checkPermissions(req, eventType);

apps/api/pages/api/event-types/_get.ts

@@ -46,6 +46,7 @@ async function getHandler(req: NextApiRequest) {
       team: { select: { slug: true } },
       users: true,
       owner: { select: { username: true, id: true } },
+      children: { select: { id: true, userId: true } },
     },
   });
   // this really should return [], but backwards compatibility..

apps/api/pages/api/event-types/_post.ts

@@ -6,7 +6,9 @@ import { defaultResponder } from "@calcom/lib/server";
 
 import { schemaEventTypeCreateBodyParams, schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 
+import checkParentEventOwnership from "./_utils/checkParentEventOwnership";
 import checkTeamEventEditPermission from "./_utils/checkTeamEventEditPermission";
+import checkUserMembership from "./_utils/checkUserMembership";
 import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 
 /**
@@ -118,10 +120,13 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *               schedulingType:
  *                 type: string
  *                 description: The type of scheduling if a Team event. Required for team events only
- *                 enum: [ROUND_ROBIN, COLLECTIVE]
+ *                 enum: [ROUND_ROBIN, COLLECTIVE, MANAGED]
  *               price:
  *                 type: integer
  *                 description: Price of the event type booking
+ *               parentId:
+ *                 type: integer
+ *                 description: EventTypeId of the parent managed event
  *               currency:
  *                 type: string
  *                 description: Currency acronym. Eg- usd, eur, gbp, etc.
@@ -276,6 +281,11 @@ async function postHandler(req: NextApiRequest) {
 
   await checkPermissions(req);
 
+  if (parsedBody.parentId) {
+    await checkParentEventOwnership(parsedBody.parentId, userId);
+    await checkUserMembership(parsedBody.parentId, parsedBody.userId);
+  }
+
   if (isAdmin && parsedBody.userId) {
     data = { ...parsedBody, users: { connect: { id: parsedBody.userId } } };
   }

apps/api/pages/api/event-types/_utils/checkParentEventOwnership.ts

@@ -0,0 +1,52 @@
+import { HttpError } from "@calcom/lib/http-error";
+
+/**
+ * Checks if a user, identified by the provided userId, has ownership (or admin rights) over
+ * the team associated with the event type identified by the parentId.
+ *
+ * @param parentId - The ID of the parent event type.
+ * @param userId - The ID of the user.
+ *
+ * @throws {HttpError} If the parent event type is not found,
+ *                     if the parent event type doesn't belong to any team,
+ *                     or if the user doesn't have ownership or admin rights to the associated team.
+ */
+export default async function checkParentEventOwnership(parentId: number, userId: number) {
+  const parentEventType = await prisma.eventType.findUnique({
+    where: {
+      id: parentId,
+    },
+    select: {
+      teamId: true,
+    },
+  });
+
+  if (!parentEventType) {
+    throw new HttpError({
+      statusCode: 404,
+      message: "Parent event type not found.",
+    });
+  }
+
+  if (!parentEventType.teamId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "This event type is not capable of having children",
+    });
+  }
+
+  const teamMember = await prisma.membership.findFirst({
+    where: {
+      teamId: parentEventType.teamId,
+      userId: userId,
+      OR: [{ role: "OWNER" }, { role: "ADMIN" }],
+    },
+  });
+
+  if (!teamMember) {
+    throw new HttpError({
+      statusCode: 403,
+      message: "User is not authorized to access the team to which the parent event type belongs.",
+    });
+  }
+}

apps/api/pages/api/event-types/_utils/checkUserMembership.ts

@@ -0,0 +1,52 @@
+import { HttpError } from "@calcom/lib/http-error";
+
+/**
+ * Checks if a user, identified by the provided userId, is a member of the team associated
+ * with the event type identified by the parentId.
+ *
+ * @param parentId - The ID of the event type.
+ * @param userId - The ID of the user.
+ *
+ * @throws {HttpError} If the event type is not found,
+ *                     if the event type doesn't belong to any team,
+ *                     or if the user isn't a member of the associated team.
+ */
+export default async function checkUserMembership(parentId: number, userId: number) {
+  const parentEventType = await prisma.eventType.findUnique({
+    where: {
+      id: parentId,
+    },
+    select: {
+      teamId: true,
+    },
+  });
+
+  if (!parentEventType) {
+    throw new HttpError({
+      statusCode: 404,
+      message: "Event type not found.",
+    });
+  }
+
+  if (!parentEventType.teamId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "This event type is not capable of having children.",
+    });
+  }
+
+  const teamMember = await prisma.membership.findFirst({
+    where: {
+      teamId: parentEventType.teamId,
+      userId: userId,
+      accepted: true,
+    },
+  });
+
+  if (!teamMember) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "User is not a team member.",
+    });
+  }
+}

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

@@ -0,0 +1,232 @@
+import { useCallback, useState } from "react";
+
+import { AppSettings } from "@calcom/app-store/_components/AppSettings";
+import { InstallAppButton } from "@calcom/app-store/components";
+import { getEventLocationTypeFromApp, type EventLocationType } from "@calcom/app-store/locations";
+import type { CredentialOwner } from "@calcom/app-store/types";
+import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
+import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { AppCategories } from "@calcom/prisma/enums";
+import { trpc, type RouterOutputs } from "@calcom/trpc";
+import type { App } from "@calcom/types/App";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  List,
+  showToast,
+  Button,
+  DropdownMenuItem,
+  Alert,
+} from "@calcom/ui";
+import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
+
+import AppListCard from "@components/AppListCard";
+
+interface AppListProps {
+  variant?: AppCategories;
+  data: RouterOutputs["viewer"]["integrations"];
+  handleDisconnect: (credentialId: number) => void;
+  listClassName?: string;
+}
+
+export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppListProps) => {
+  const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
+  const utils = trpc.useContext();
+  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
+  const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
+    undefined
+  );
+
+  const onSuccessCallback = useCallback(() => {
+    setBulkUpdateModal(true);
+    showToast("Default app updated successfully", "success");
+  }, []);
+
+  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
+    onSuccess: () => {
+      showToast("Default app updated successfully", "success");
+      utils.viewer.getUsersDefaultConferencingApp.invalidate();
+    },
+    onError: (error) => {
+      showToast(`Error: ${error.message}`, "error");
+    },
+  });
+
+  const ChildAppCard = ({
+    item,
+  }: {
+    item: RouterOutputs["viewer"]["integrations"]["items"][number] & {
+      credentialOwner?: CredentialOwner;
+    };
+  }) => {
+    const appSlug = item?.slug;
+    const appIsDefault =
+      appSlug === defaultConferencingApp?.appSlug ||
+      (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
+    return (
+      <AppListCard
+        key={item.name}
+        description={item.description}
+        title={item.name}
+        logo={item.logo}
+        isDefault={appIsDefault}
+        shouldHighlight
+        slug={item.slug}
+        invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
+        credentialOwner={item?.credentialOwner}
+        actions={
+          !item.credentialOwner?.readOnly ? (
+            <div className="flex justify-end">
+              <Dropdown modal={false}>
+                <DropdownMenuTrigger asChild>
+                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  {!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        color="secondary"
+                        StartIcon={Video}
+                        onClick={() => {
+                          const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
+                          if (locationType?.linkType === "static") {
+                            setLocationType({ ...locationType, slug: appSlug });
+                          } else {
+                            updateDefaultAppMutation.mutate({
+                              appSlug,
+                            });
+                            setBulkUpdateModal(true);
+                          }
+                        }}>
+                        {t("set_as_default")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  )}
+                  <ConnectOrDisconnectIntegrationMenuItem
+                    credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
+                    type={item.type}
+                    isGlobal={item.isGlobal}
+                    installed
+                    invalidCredentialIds={item.invalidCredentialIds}
+                    handleDisconnect={handleDisconnect}
+                    teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
+                  />
+                </DropdownMenuContent>
+              </Dropdown>
+            </div>
+          ) : null
+        }>
+        <AppSettings slug={item.slug} />
+      </AppListCard>
+    );
+  };
+
+  const appsWithTeamCredentials = data.items.filter((app) => app.teams.length);
+  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
+    const appCards = [];
+
+    if (app.userCredentialIds.length) {
+      appCards.push(<ChildAppCard item={app} />);
+    }
+    for (const team of app.teams) {
+      if (team) {
+        appCards.push(
+          <ChildAppCard
+            item={{
+              ...app,
+              credentialOwner: {
+                name: team.name,
+                avatar: team.logo,
+                teamId: team.teamId,
+                credentialId: team.credentialId,
+                readOnly: !team.isAdmin,
+              },
+            }}
+          />
+        );
+      }
+    }
+    return appCards;
+  });
+
+  const { t } = useLocale();
+  return (
+    <>
+      <List className={listClassName}>
+        {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
+        {data.items
+          .filter((item) => item.invalidCredentialIds)
+          .map((item) => {
+            if (!item.teams.length) return <ChildAppCard item={item} />;
+          })}
+      </List>
+      {locationType && (
+        <AppSetDefaultLinkDialog
+          locationType={locationType}
+          setLocationType={() => setLocationType(undefined)}
+          onSuccess={onSuccessCallback}
+        />
+      )}
+
+      {bulkUpdateModal && (
+        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
+      )}
+    </>
+  );
+};
+
+function ConnectOrDisconnectIntegrationMenuItem(props: {
+  credentialId: number;
+  type: App["type"];
+  isGlobal?: boolean;
+  installed?: boolean;
+  invalidCredentialIds?: number[];
+  teamId?: number;
+  handleDisconnect: (credentialId: number, teamId?: number) => void;
+}) {
+  const { type, credentialId, isGlobal, installed, handleDisconnect, teamId } = props;
+  const { t } = useLocale();
+
+  const utils = trpc.useContext();
+  const handleOpenChange = () => {
+    utils.viewer.integrations.invalidate();
+  };
+
+  if (credentialId || type === "stripe_payment" || isGlobal) {
+    return (
+      <DropdownMenuItem>
+        <DropdownItem
+          color="destructive"
+          onClick={() => handleDisconnect(credentialId, teamId)}
+          disabled={isGlobal}
+          StartIcon={Trash}>
+          {t("remove_app")}
+        </DropdownItem>
+      </DropdownMenuItem>
+    );
+  }
+
+  if (!installed) {
+    return (
+      <div className="flex items-center truncate">
+        <Alert severity="warning" title={t("not_installed")} />
+      </div>
+    );
+  }
+
+  return (
+    <InstallAppButton
+      type={type}
+      render={(buttonProps) => (
+        <Button color="secondary" {...buttonProps} data-testid="integration-connection-button">
+          {t("install")}
+        </Button>
+      )}
+      onChanged={handleOpenChange}
+    />
+  );
+}

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";
@@ -26,11 +26,11 @@ import {
   DialogFooter,
   MeetingTimeInTimezones,
   showToast,
-  Tooltip,
   TableActions,
   TextAreaField,
+  Tooltip,
 } from "@calcom/ui";
-import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon";
+import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -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);
@@ -259,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;
@@ -337,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
@@ -395,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 ? (
@@ -573,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>
@@ -587,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

@@ -1,5 +1,5 @@
 import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
-import { useState, memo } from "react";
+import { useState, memo, useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
@@ -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" />}
@@ -164,9 +165,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
     t("locked_fields_admin_description"),
     t("locked_fields_member_description")
   );
-  const { watch } = useFormContext<FormValues>();
+  const { watch, setValue, getValues } = useFormContext<FormValues>();
   const watchSchedule = watch("schedule");
-  const formMethods = useFormContext<FormValues>();
   const [options, setOptions] = useState<AvailabilityOption[]>([]);
 
   const { isLoading } = trpc.viewer.availability.list.useQuery(undefined, {
@@ -214,7 +214,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
 
       setOptions(options);
 
-      const scheduleId = formMethods.getValues("schedule");
+      const scheduleId = getValues("schedule");
       const value = options.find((option) =>
         scheduleId
           ? option.value === scheduleId
@@ -223,15 +223,20 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
           : option.value === schedules.find((schedule) => schedule.isDefault)?.id
       );
 
-      formMethods.setValue("availability", value);
+      setValue("availability", value);
     },
   });
 
-  const availabilityValue = formMethods.watch("availability");
+  const availabilityValue = watch("availability");
+
+  useEffect(() => {
+    if (!availabilityValue?.value) return;
+    setValue("schedule", availabilityValue.value);
+  }, [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")}
@@ -248,7 +253,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
                   isSearchable={false}
                   onChange={(selected) => {
                     field.onChange(selected?.value || null);
-                    if (selected?.value) formMethods.setValue("availability", selected);
+                    if (selected?.value) setValue("availability", selected);
                   }}
                   className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                   value={availabilityValue}
@@ -276,7 +281,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
 
 const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();
-  const { resetField, setValue } = useFormContext<FormValues>();
+  const { setValue } = useFormContext<FormValues>();
   return (
     <Controller
       name="metadata.config.useHostSchedulesForTeamEvent"
@@ -285,9 +290,7 @@ const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSe
           checked={!value}
           onCheckedChange={(checked) => {
             onChange(!checked);
-            if (checked) {
-              resetField("schedule");
-            } else {
+            if (!checked) {
               setValue("schedule", null);
             }
           }}

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<{
@@ -292,7 +294,6 @@ export const EventSetupTab = (
 
               const eventLabel =
                 location[eventLocationType.defaultValueVariable] || t(eventLocationType.label);
-
               return (
                 <li
                   key={`${location.type}${index}`}
@@ -301,7 +302,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 +391,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";
@@ -46,7 +47,18 @@ export default function RecurringEventController({
           <Alert severity="warning" title={t("warning_payment_recurring_event")} />
         ) : (
           <>
+            <Alert
+              className="mb-4"
+              severity="warning"
+              title="Experimental: Recurring Events are currently experimental and causes some issues sometimes when checking for availability. We are working on fixing this."
+            />
             <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 +78,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/getting-started/steps-views/UserSettings.tsx

@@ -1,9 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
+import { useTimePreferences } from "@calcom/features/bookings/lib";
 import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
@@ -22,7 +23,7 @@ const UserSettings = (props: IUserSettingsProps) => {
   const { nextStep } = props;
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
-  const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess());
+  const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
   const telemetry = useTelemetry();
   const userSettingsSchema = z.object({
     name: z

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

@@ -10,7 +10,6 @@ import { Avatar } from "@calcom/ui";
 type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
 type MemberType = Pick<MembersType[number], "id" | "name" | "bio" | "username"> & { safeBio: string | null };
-type TeamTypeWithSafeHtml = Omit<TeamType, "members" | "inviteToken"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const routerQuery = useRouterQuery();
@@ -23,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">
@@ -50,7 +49,9 @@ const Members = ({ members, teamName }: { members: MemberType[]; teamName: strin
   }
 
   return (
-    <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
+    <section
+      data-testid="team-members-container"
+      className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
       {members.map((member) => {
         return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
       })}
@@ -58,10 +59,10 @@ const Members = ({ members, teamName }: { members: MemberType[]; teamName: strin
   );
 };
 
-const Team = ({ team }: { team: TeamTypeWithSafeHtml }) => {
+const Team = ({ members, teamName }: { members: MemberType[]; teamName: string | null }) => {
   return (
     <div>
-      <Members members={team.members} teamName={team.name} />
+      <Members members={members} teamName={teamName} />
     </div>
   );
 };

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/clock.ts

@@ -26,7 +26,8 @@ const initClock = () => {
   // This only sets browser locale if there's no preference on localStorage.
   if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h());
   timeOptions.is24hClock = !!getIs24hClockFromLocalStorage();
-  timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
+  timeOptions.inviteeTimeZone =
+    localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London";
 };
 
 const is24h = (is24hClock?: boolean) => {

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;
@@ -226,6 +226,10 @@ const nextConfig = {
   },
   async rewrites() {
     const beforeFiles = [
+      {
+        source: "/login",
+        destination: "/auth/login",
+      },
       // These rewrites are other than booking pages rewrites and so that they aren't redirected to org pages ensure that they happen in beforeFiles
       ...(isOrganizationsEnabled
         ? [

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.3.2",
+  "version": "3.3.6",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -49,6 +49,7 @@
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-id": "^1.0.0",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",

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/[user]/[type].tsx

@@ -10,8 +10,7 @@ import {
   getMultipleDurationValue,
 } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
@@ -152,7 +151,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const user = await prisma.user.findFirst({
     where: {
       username,
-      organization: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
+      organization: userOrgQuery(context.req.headers.host ?? "", context.params?.orgSlug),
     },
     select: {
       away: true,

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/auth/signup.ts

@@ -130,9 +130,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       // Accept any child team invites for orgs and create a membership for the org itself
       if (team.parentId) {
-        // Create a membership for the organization itself
-        await prisma.membership.create({
-          data: {
+        // Create (when invite link is used) or Update (when regular email invitation is used) membership for the organization itself
+        await prisma.membership.upsert({
+          where: {
+            userId_teamId: { userId: user.id, teamId: team.parentId },
+          },
+          update: {
+            accepted: true,
+          },
+          create: {
             userId: user.id,
             teamId: team.parentId,
             accepted: true,

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/kycVerification/[trpc].ts

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

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/api/webhook/app-credential.ts

@@ -15,12 +15,10 @@ const appCredentialWebhookRequestBodySchema = z.object({
 });
 /** */
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  // Check that credential sharing is enabled
   if (!APP_CREDENTIAL_SHARING_ENABLED) {
     return res.status(403).json({ message: "Credential sharing is not enabled" });
   }
 
-  // Check that the webhook secret matches
   if (
     req.headers[process.env.CALCOM_WEBHOOK_HEADER_NAME || "calcom-webhook-secret"] !==
     process.env.CALCOM_WEBHOOK_SECRET
@@ -30,7 +28,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const reqBody = appCredentialWebhookRequestBodySchema.parse(req.body);
 
-  // Check that the user exists
   const user = await prisma.user.findUnique({ where: { id: reqBody.userId } });
 
   if (!user) {
@@ -39,26 +36,24 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const app = await prisma.app.findUnique({
     where: { slug: reqBody.appSlug },
-    select: { slug: true },
+    select: { dirName: true },
   });
 
   if (!app) {
     return res.status(404).json({ message: "App not found" });
   }
 
-  //   Search for the app's slug and type
-  const appMetadata = appStoreMetadata[app.slug as keyof typeof appStoreMetadata];
+  const appMetadata = appStoreMetadata[app.dirName as keyof typeof appStoreMetadata];
 
   if (!appMetadata) {
     return res.status(404).json({ message: "App not found. Ensure that you have the correct app slug" });
   }
 
-  // Decrypt the keys
   const keys = JSON.parse(
     symmetricDecrypt(reqBody.keys, process.env.CALCOM_APP_CREDENTIAL_ENCRYPTION_KEY || "")
   );
 
-  // Can't use prisma upsert as we don't know the id of the credential
+  // INFO: Can't use prisma upsert as we don't know the id of the credential
   const appCredential = await prisma.credential.findFirst({
     where: {
       userId: reqBody.userId,

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/apps/installed/[category].tsx

@@ -1,35 +1,13 @@
 import { useSearchParams } from "next/navigation";
-import { useCallback, useReducer, useState } from "react";
-import z from "zod";
+import { useReducer } from "react";
+import { z } from "zod";
 
-import { AppSettings } from "@calcom/app-store/_components/AppSettings";
-import { InstallAppButton } from "@calcom/app-store/components";
-import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationTypeFromApp } from "@calcom/app-store/locations";
-import type { CredentialOwner } from "@calcom/app-store/types";
-import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
-import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
-import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
 import type { AppGetServerSidePropsContext } from "@calcom/types/AppGetServerSideProps";
-import {
-  Alert,
-  Button,
-  EmptyScreen,
-  List,
-  AppSkeletonLoader as SkeletonLoader,
-  ShellSubHeading,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  Dropdown,
-  DropdownMenuItem,
-  DropdownItem,
-  showToast,
-} from "@calcom/ui";
+import { Button, EmptyScreen, AppSkeletonLoader as SkeletonLoader, ShellSubHeading } from "@calcom/ui";
 import type { LucideIcon } from "@calcom/ui/components/icon";
 import {
   BarChart,
@@ -38,231 +16,24 @@ import {
   CreditCard,
   Grid,
   Mail,
-  MoreHorizontal,
   Plus,
   Share2,
-  Trash,
   Video,
 } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
-import AppListCard from "@components/AppListCard";
 import PageWrapper from "@components/PageWrapper";
+import { AppList } from "@components/apps/AppList";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
-function ConnectOrDisconnectIntegrationMenuItem(props: {
-  credentialId: number;
-  type: App["type"];
-  isGlobal?: boolean;
-  installed?: boolean;
-  invalidCredentialIds?: number[];
-  teamId?: number;
-  handleDisconnect: (credentialId: number, teamId?: number) => void;
-}) {
-  const { type, credentialId, isGlobal, installed, handleDisconnect, teamId } = props;
-  const { t } = useLocale();
-
-  const utils = trpc.useContext();
-  const handleOpenChange = () => {
-    utils.viewer.integrations.invalidate();
-  };
-
-  if (credentialId || type === "stripe_payment" || isGlobal) {
-    return (
-      <DropdownMenuItem>
-        <DropdownItem
-          color="destructive"
-          onClick={() => handleDisconnect(credentialId, teamId)}
-          disabled={isGlobal}
-          StartIcon={Trash}>
-          {t("remove_app")}
-        </DropdownItem>
-      </DropdownMenuItem>
-    );
-  }
-
-  if (!installed) {
-    return (
-      <div className="flex items-center truncate">
-        <Alert severity="warning" title={t("not_installed")} />
-      </div>
-    );
-  }
-
-  return (
-    <InstallAppButton
-      type={type}
-      render={(buttonProps) => (
-        <Button color="secondary" {...buttonProps} data-testid="integration-connection-button">
-          {t("install")}
-        </Button>
-      )}
-      onChanged={handleOpenChange}
-    />
-  );
-}
-
 interface IntegrationsContainerProps {
   variant?: AppCategories;
   exclude?: AppCategories[];
   handleDisconnect: (credentialId: number) => void;
 }
 
-interface IntegrationsListProps {
-  variant?: IntegrationsContainerProps["variant"];
-  data: RouterOutputs["viewer"]["integrations"];
-  handleDisconnect: (credentialId: number) => void;
-}
-
-const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListProps) => {
-  const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
-  const utils = trpc.useContext();
-  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
-  const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
-    undefined
-  );
-
-  const onSuccessCallback = useCallback(() => {
-    setBulkUpdateModal(true);
-    showToast("Default app updated successfully", "success");
-  }, []);
-
-  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
-    onSuccess: () => {
-      showToast("Default app updated successfully", "success");
-      utils.viewer.getUsersDefaultConferencingApp.invalidate();
-    },
-    onError: (error) => {
-      showToast(`Error: ${error.message}`, "error");
-    },
-  });
-
-  const ChildAppCard = ({
-    item,
-  }: {
-    item: RouterOutputs["viewer"]["integrations"]["items"][number] & {
-      credentialOwner?: CredentialOwner;
-    };
-  }) => {
-    const appSlug = item?.slug;
-    const appIsDefault =
-      appSlug === defaultConferencingApp?.appSlug ||
-      (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
-    return (
-      <AppListCard
-        key={item.name}
-        description={item.description}
-        title={item.name}
-        logo={item.logo}
-        isDefault={appIsDefault}
-        shouldHighlight
-        slug={item.slug}
-        invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
-        credentialOwner={item?.credentialOwner}
-        actions={
-          !item.credentialOwner?.readOnly ? (
-            <div className="flex justify-end">
-              <Dropdown modal={false}>
-                <DropdownMenuTrigger asChild>
-                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent>
-                  {!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
-                    <DropdownMenuItem>
-                      <DropdownItem
-                        type="button"
-                        color="secondary"
-                        StartIcon={Video}
-                        onClick={() => {
-                          const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
-                          if (locationType?.linkType === "static") {
-                            setLocationType({ ...locationType, slug: appSlug });
-                          } else {
-                            updateDefaultAppMutation.mutate({
-                              appSlug,
-                            });
-                            setBulkUpdateModal(true);
-                          }
-                        }}>
-                        {t("set_as_default")}
-                      </DropdownItem>
-                    </DropdownMenuItem>
-                  )}
-                  <ConnectOrDisconnectIntegrationMenuItem
-                    credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
-                    type={item.type}
-                    isGlobal={item.isGlobal}
-                    installed
-                    invalidCredentialIds={item.invalidCredentialIds}
-                    handleDisconnect={handleDisconnect}
-                    teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
-                  />
-                </DropdownMenuContent>
-              </Dropdown>
-            </div>
-          ) : null
-        }>
-        <AppSettings slug={item.slug} />
-      </AppListCard>
-    );
-  };
-
-  const appsWithTeamCredentials = data.items.filter((app) => app.teams.length);
-  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
-    const appCards = [];
-
-    if (app.userCredentialIds.length) {
-      appCards.push(<ChildAppCard item={app} />);
-    }
-    for (const team of app.teams) {
-      if (team) {
-        appCards.push(
-          <ChildAppCard
-            item={{
-              ...app,
-              credentialOwner: {
-                name: team.name,
-                avatar: team.logo,
-                teamId: team.teamId,
-                credentialId: team.credentialId,
-                readOnly: !team.isAdmin,
-              },
-            }}
-          />
-        );
-      }
-    }
-    return appCards;
-  });
-
-  const { t } = useLocale();
-  return (
-    <>
-      <List>
-        {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
-        {data.items
-          .filter((item) => item.invalidCredentialIds)
-          .map((item) => {
-            if (!item.teams.length) return <ChildAppCard item={item} />;
-          })}
-      </List>
-      {locationType && (
-        <AppSetDefaultLinkDialog
-          locationType={locationType}
-          setLocationType={() => setLocationType(undefined)}
-          onSuccess={onSuccessCallback}
-        />
-      )}
-
-      {bulkUpdateModal && (
-        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
-      )}
-    </>
-  );
-};
-
 const IntegrationsContainer = ({
   variant,
   exclude,
@@ -329,7 +100,8 @@ const IntegrationsContainer = ({
                 </Button>
               }
             />
-            <IntegrationsList handleDisconnect={handleDisconnect} data={data} variant={variant} />
+
+            <AppList handleDisconnect={handleDisconnect} data={data} variant={variant} />
           </div>
         );
       }}

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

@@ -60,10 +60,16 @@ export default function Verify() {
   const routerQuery = useRouterQuery();
   const { t, sessionId, stripeCustomerId } = querySchema.parse(routerQuery);
   const [secondsLeft, setSecondsLeft] = useState(30);
-  const { data } = trpc.viewer.public.stripeCheckoutSession.useQuery({
-    stripeCustomerId,
-    checkoutSessionId: sessionId,
-  });
+  const { data } = trpc.viewer.public.stripeCheckoutSession.useQuery(
+    {
+      stripeCustomerId,
+      checkoutSessionId: sessionId,
+    },
+    {
+      enabled: !!stripeCustomerId || !!sessionId,
+      staleTime: Infinity,
+    }
+  );
   useSendFirstVerificationLogin({ email: data?.customer?.email, username: data?.customer?.username });
   // @note: check for t=timestamp and apply disabled state and secondsLeft accordingly
   // to avoid refresh to skip waiting 30 seconds to re-send email
@@ -114,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">
@@ -123,12 +129,12 @@ export default function Verify() {
             {hasPaymentFailed ? (
               <AlertTriangle className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
             ) : sessionId ? (
-              <Check className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+              <Check className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight dark:text-white" />
             ) : (
               <MailOpen className="text-inverted h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
             )}
           </div>
-          <h3 className="font-cal my-6 text-3xl font-normal">
+          <h3 className="font-cal text-inverted my-6 text-3xl font-normal dark:text-white">
             {hasPaymentFailed
               ? "Your payment failed"
               : sessionId
@@ -138,7 +144,7 @@ export default function Verify() {
           {hasPaymentFailed && (
             <p className="my-6">Your account has been created, but your premium has not been reserved.</p>
           )}
-          <p>
+          <p className="text-inverted dark:text-white">
             We have sent an email to <b>{customer?.email} </b>with a link to activate your account.{" "}
             {hasPaymentFailed &&
               "Once you activate your account you will be able to try purchase your premium username again or select a different one."}
@@ -158,7 +164,7 @@ export default function Verify() {
                 e.preventDefault();
                 setSecondsLeft(30);
                 // Update query params with t:timestamp, shallow: true doesn't re-render the page
-                const _searchParams = new URLSearchParams(searchParams);
+                const _searchParams = new URLSearchParams(searchParams.toString());
                 _searchParams.set("t", `${Date.now()}`);
                 router.replace(`${pathname}?${_searchParams.toString()}`);
                 return await sendVerificationLogin(customer.email, customer.username);

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();
@@ -132,7 +133,9 @@ export default function Success(props: SuccessProps) {
 
   const isGmail = !!attendees.find((attendee) => attendee.email.includes("gmail.com"));
 
-  const [is24h, setIs24h] = useState(isBrowserLocale24h());
+  const [is24h, setIs24h] = useState(
+    props?.userTimeFormat ? props.userTimeFormat === 24 : isBrowserLocale24h()
+  );
   const { data: session } = useSession();
 
   const [date, setDate] = useState(dayjs.utc(props.bookingInfo.startTime));
@@ -214,8 +217,10 @@ export default function Success(props: SuccessProps) {
       confirmed: !needsConfirmation,
       // TODO: Add payment details
     });
-    setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()));
-    setIs24h(!!getIs24hClockFromLocalStorage());
+    setDate(
+      date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London")
+    );
+    setIs24h(props?.userTimeFormat ? props.userTimeFormat === 24 : !!getIs24hClockFromLocalStorage());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [eventType, needsConfirmation]);
 
@@ -264,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
@@ -353,10 +358,10 @@ export default function Success(props: SuccessProps) {
                     <img src={giphyImage} alt="Gif from Giphy" />
                   )}
                   {!giphyImage && !needsConfirmation && !isCancelled && (
-                    <Check className="h-5 w-5 text-green-600" />
+                    <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
                   )}
                   {needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
-                  {isCancelled && <X className="h-5 w-5 text-red-600" />}
+                  {isCancelled && <X className="h-5 w-5 text-red-600 dark:text-red-200" />}
                 </div>
                 <div className="mb-8 mt-6 text-center last:mb-0">
                   <h3
@@ -486,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>
                       </>
                     )}
@@ -590,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"
@@ -620,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"
@@ -647,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"
@@ -672,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"
@@ -1006,10 +1009,12 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const session = await getServerSession(context);
   let tz: string | null = null;
+  let userTimeFormat: number | null = null;
 
   if (session) {
     const user = await ssr.viewer.me.fetch();
     tz = user.timeZone;
+    userTimeFormat = user.timeFormat;
   }
 
   const parsedQuery = querySchema.safeParse(context.query);
@@ -1150,6 +1155,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       bookingInfo,
       paymentStatus: payment,
       ...(tz && { tz }),
+      userTimeFormat,
     },
   };
 }

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

@@ -27,6 +27,7 @@ export default function Type({
   isTeamEvent,
   entity,
   duration,
+  hashedLink,
 }: PageProps) {
   return (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
@@ -46,6 +47,7 @@ export default function Type({
         isTeamEvent={isTeamEvent}
         entity={entity}
         duration={duration}
+        hashedLink={hashedLink}
       />
     </main>
   );
@@ -149,6 +151,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
       // Sending the team event from the server, because this template file
       // is reused for both team and user events.
       isTeamEvent,
+      hashedLink: link,
     },
   };
 }

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

@@ -127,7 +127,7 @@ const MobileTeamsTab: FC<MobileTeamsTabProps> = (props) => {
           readOnly={events[0].metadata.readOnly}
         />
       ) : (
-        <CreateFirstEventTypeView />
+        <CreateFirstEventTypeView slug={eventTypeGroups[0].profile.slug ?? ""} />
       )}
     </div>
   );
@@ -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}
@@ -363,7 +363,11 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
   }, []);
 
   if (!types.length) {
-    return group.teamId ? <EmptyEventTypeList group={group} /> : <CreateFirstEventTypeView />;
+    return group.teamId ? (
+      <EmptyEventTypeList group={group} />
+    ) : (
+      <CreateFirstEventTypeView slug={group.profile.slug ?? ""} />
+    );
   }
 
   const firstItem = types[0];
@@ -475,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"
@@ -489,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>
@@ -501,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")}
@@ -551,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>
@@ -569,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");
@@ -584,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({
@@ -604,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")}
@@ -616,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>
@@ -764,7 +768,7 @@ const EventTypeListHeading = ({
   );
 };
 
-const CreateFirstEventTypeView = () => {
+const CreateFirstEventTypeView = ({ slug }: { slug: string }) => {
   const { t } = useLocale();
 
   return (
@@ -774,7 +778,7 @@ const CreateFirstEventTypeView = () => {
       description={t("new_event_type_description")}
       className="mb-16"
       buttonRaw={
-        <Button href="?dialog=new" variant="button">
+        <Button href={`?dialog=new&eventPage=${slug}`} variant="button">
           {t("create")}
         </Button>
       }
@@ -915,7 +919,7 @@ const Main = ({
                 ) : group.teamId ? (
                   <EmptyEventTypeList group={group} />
                 ) : (
-                  <CreateFirstEventTypeView />
+                  <CreateFirstEventTypeView slug={data.profiles[0].slug ?? ""} />
                 )}
               </div>
             ))
@@ -931,7 +935,7 @@ const Main = ({
           />
         )
       )}
-      {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
+      {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView slug={data.profiles[0].slug ?? ""} />}
       <EventTypeEmbedDialog />
       {searchParams?.get("dialog") === "duplicate" && <DuplicateDialog />}
     </>

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/kycVerification/index.tsx

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

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

@@ -1,80 +0,0 @@
-import { useForm } from "react-hook-form";
-
-import { trpc } from "@calcom/trpc";
-import { Meta, Form, Button, TextField, showToast } from "@calcom/ui";
-
-type FormValues = {
-  name?: string | null;
-};
-
-export default function KYCVerificationView() {
-  const teamForm = useForm<FormValues>();
-  const userForm = useForm<FormValues>();
-
-  const mutation = trpc.viewer.kycVerification.verify.useMutation({
-    onSuccess: async (data) => {
-      showToast(`Successfully verified ${data.isTeam ? "team" : "user"} ${data.name}`, "success");
-    },
-    onError: (error) => {
-      showToast(`Verification failed: ${error.message}`, "error");
-    },
-  });
-
-  return (
-    <div>
-      <Meta
-        title="KYC Verification"
-        description="Here you can verify users and teams. This verification is needed for sending sms/whatsapp messages to attendees."
-      />
-      <div>
-        <div className="mb-2 font-medium">Verify Team</div>
-
-        <Form
-          form={teamForm}
-          handleSubmit={(values) => {
-            mutation.mutate({
-              name: values.name || "",
-              isTeam: true,
-            });
-          }}>
-          <div className="flex space-x-2">
-            <TextField
-              {...teamForm.register("name")}
-              label=""
-              type="text"
-              id="name"
-              placeholder="team slug"
-              className="-mt-2 "
-              required
-            />
-            <Button type="submit">Verify</Button>
-          </div>
-        </Form>
-      </div>
-      <div>
-        <div className="mb-2 mt-6 font-medium">Verify User</div>
-        <Form
-          form={userForm}
-          handleSubmit={(values) => {
-            mutation.mutate({
-              name: values.name || "",
-              isTeam: false,
-            });
-          }}>
-          <div className="flex space-x-2">
-            <TextField
-              {...userForm.register("name")}
-              label=""
-              type="text"
-              id="name"
-              placeholder="user name"
-              className="-mt-2"
-              required
-            />
-            <Button type="submit">Verify</Button>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
-}

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

@@ -1,39 +1,22 @@
-import { useCallback, useState } from "react";
+import { useReducer } from "react";
 
-import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationTypeFromApp } from "@calcom/app-store/locations";
-import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
-import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
+import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  Dropdown,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownItem,
-  DropdownMenuTrigger,
-  List,
-  Meta,
-  showToast,
-  SkeletonContainer,
-  SkeletonText,
-} from "@calcom/ui";
-import { AlertCircle, MoreHorizontal, Trash, Video, Plus } from "@calcom/ui/components/icon";
+import { Button, EmptyScreen, Meta, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { Calendar, Plus } from "@calcom/ui/components/icon";
+
+import { QueryCell } from "@lib/QueryCell";
 
-import AppListCard from "@components/AppListCard";
 import PageWrapper from "@components/PageWrapper";
+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>
@@ -45,162 +28,93 @@ const AddConferencingButton = () => {
   const { t } = useLocale();
 
   return (
-    <>
-      <Button color="secondary" StartIcon={Plus} href="/apps/categories/video">
-        {t("add_conferencing_app")}
-      </Button>
-    </>
+    <Button color="secondary" StartIcon={Plus} href="/apps/categories/conferencing">
+      {t("add")}
+    </Button>
   );
 };
 
+type ModalState = {
+  isOpen: boolean;
+  credentialId: null | number;
+};
+
 const ConferencingLayout = () => {
   const { t } = useLocale();
-  const utils = trpc.useContext();
 
-  const { data: defaultConferencingApp, isLoading: defaultConferencingAppLoading } =
-    trpc.viewer.getUsersDefaultConferencingApp.useQuery();
+  const [modal, updateModal] = useReducer(
+    (data: ModalState, partialData: Partial<ModalState>) => ({ ...data, ...partialData }),
+    {
+      isOpen: false,
+      credentialId: null,
+    }
+  );
 
-  const { data: apps, isLoading } = trpc.viewer.integrations.useQuery({
+  const query = trpc.viewer.integrations.useQuery({
     variant: "conferencing",
     onlyInstalled: true,
   });
-  const deleteAppMutation = trpc.viewer.deleteCredential.useMutation({
-    onSuccess: () => {
-      showToast("Integration deleted successfully", "success");
-      utils.viewer.integrations.invalidate({ variant: "conferencing", onlyInstalled: true });
-      setDeleteAppModal(false);
-    },
-    onError: () => {
-      showToast("Error deleting app", "error");
-      setDeleteAppModal(false);
-    },
-  });
 
-  const onSuccessCallback = useCallback(() => {
-    setBulkUpdateModal(true);
-    showToast("Default app updated successfully", "success");
-  }, []);
+  const handleModelClose = () => {
+    updateModal({ isOpen: false, credentialId: null });
+  };
 
-  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
-    onSuccess: async () => {
-      await utils.viewer.getUsersDefaultConferencingApp.invalidate();
-      onSuccessCallback();
-    },
-    onError: (error) => {
-      showToast(`Error: ${error.message}`, "error");
-    },
-  });
-
-  const [deleteAppModal, setDeleteAppModal] = useState(false);
-  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
-  const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
-    undefined
-  );
-  const [deleteCredentialId, setDeleteCredentialId] = useState<number>(0);
-
-  if (isLoading || defaultConferencingAppLoading)
-    return <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />;
+  const handleDisconnect = (credentialId: number) => {
+    updateModal({ isOpen: true, credentialId });
+  };
 
   return (
-    <div className="bg-default w-full sm:mx-0 xl:mt-0">
-      <Meta
-        title={t("conferencing")}
-        description={t("conferencing_description")}
-        CTA={<AddConferencingButton />}
-      />
-      <List>
-        {apps?.items &&
-          apps.items
-            .map((app) => ({ ...app, title: app.title || app.name }))
-            .map((app) => {
-              const appSlug = app?.slug;
-              const appIsDefault =
-                appSlug === defaultConferencingApp?.appSlug ||
-                (appSlug === "daily-video" && !defaultConferencingApp?.appSlug); // Default to cal video if the user doesnt have it set (we do this on new account creation but not old)
+    <>
+      <div className="bg-default w-full sm:mx-0 xl:mt-0">
+        <Meta
+          title={t("conferencing")}
+          description={t("conferencing_description")}
+          CTA={<AddConferencingButton />}
+          borderInShellHeader={true}
+        />
+        <QueryCell
+          query={query}
+          customLoader={
+            <SkeletonLoader title={t("conferencing")} description={t("conferencing_description")} />
+          }
+          success={({ data }) => {
+            console.log(data);
+            if (!data.items.length) {
               return (
-                <AppListCard
-                  description={app.description}
-                  title={app.title}
-                  logo={app.logo}
-                  key={app.title}
-                  isDefault={appIsDefault} // @TODO: Handle when a user doesnt have this value set
-                  actions={
-                    <div>
-                      <Dropdown>
-                        <DropdownMenuTrigger asChild>
-                          <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent>
-                          {!appIsDefault && (
-                            <DropdownMenuItem>
-                              <DropdownItem
-                                type="button"
-                                color="secondary"
-                                StartIcon={Video}
-                                onClick={() => {
-                                  const locationType = getEventLocationTypeFromApp(
-                                    app?.locationOption?.value ?? ""
-                                  );
-                                  if (locationType?.linkType === "static") {
-                                    setLocationType({ ...locationType, slug: appSlug });
-                                  } else {
-                                    updateDefaultAppMutation.mutate({
-                                      appSlug,
-                                    });
-                                  }
-                                }}>
-                                {t("set_as_default")}
-                              </DropdownItem>
-                            </DropdownMenuItem>
-                          )}
-                          <DropdownMenuItem>
-                            <DropdownItem
-                              type="button"
-                              color="destructive"
-                              disabled={app.isGlobal}
-                              StartIcon={Trash}
-                              onClick={() => {
-                                setDeleteCredentialId(app.userCredentialIds[0]);
-                                setDeleteAppModal(true);
-                              }}>
-                              {t("remove_app")}
-                            </DropdownItem>
-                          </DropdownMenuItem>
-                        </DropdownMenuContent>
-                      </Dropdown>
-                    </div>
+                <EmptyScreen
+                  Icon={Calendar}
+                  headline={t("no_category_apps", {
+                    category: t("conferencing").toLowerCase(),
+                  })}
+                  description={t("no_category_apps_description_conferencing")}
+                  buttonRaw={
+                    <Button
+                      color="secondary"
+                      data-testid="connect-conferencing-apps"
+                      href="/apps/categories/conferencing">
+                      {t("connect_conference_apps")}
+                    </Button>
                   }
                 />
               );
-            })}
-      </List>
-
-      <Dialog open={deleteAppModal} onOpenChange={setDeleteAppModal}>
-        <DialogContent
-          title={t("Remove app")}
-          description={t("are_you_sure_you_want_to_remove_this_app")}
-          type="confirmation"
-          Icon={AlertCircle}>
-          <DialogFooter>
-            <Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
-              {t("yes_remove_app")}
-            </Button>
-            <DialogClose />
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      {locationType && (
-        <AppSetDefaultLinkDialog
-          locationType={locationType}
-          setLocationType={setLocationType}
-          onSuccess={onSuccessCallback}
+            }
+            return (
+              <AppList
+                listClassName="rounded-xl rounded-t-none border-t-0"
+                handleDisconnect={handleDisconnect}
+                data={data}
+                variant="conferencing"
+              />
+            );
+          }}
         />
-      )}
-      {bulkUpdateModal && (
-        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
-      )}
-    </div>
+      </div>
+      <DisconnectIntegrationModal
+        handleModelClose={handleModelClose}
+        isOpen={modal.isOpen}
+        credentialId={modal.credentialId}
+      />
+    </>
   );
 };
 

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 })}
@@ -269,9 +299,7 @@ const ProfileView = () => {
           Icon={AlertTriangle}>
           <>
             <div className="mb-10">
-              <p className="text-default mb-4">
-                {t("delete_account_confirmation_message", { appName: APP_NAME })}
-              </p>
+              <p className="text-default mb-4">{t("delete_account_confirmation_message")}</p>
               {isCALIdentityProvider && (
                 <PasswordField
                   data-testid="password"
@@ -366,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();
@@ -379,7 +411,7 @@ const ProfileForm = ({
 
   const profileFormSchema = z.object({
     username: z.string(),
-    avatar: z.string(),
+    avatar: z.string().nullable(),
     name: z
       .string()
       .trim()
@@ -404,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;