v3.8.9

This reverts commit 4585199b5e.

.env.example

@@ -23,6 +23,9 @@ CALCOM_LICENSE_KEY=
 
 # - DATABASE ************************************************************************************************
 DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+# Needed to run migrations while using a connection pooler like PgBouncer
+# Use the same one as DATABASE_URL if you're not using a connection pooler
+DATABASE_DIRECT_URL="postgresql://postgres:@localhost:5450/calendso"
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
 INSIGHTS_DATABASE_URL=
@@ -134,8 +137,8 @@ NEXT_PUBLIC_SENDGRID_SENDER_NAME=
 NEXT_PUBLIC_SENTRY_DSN=
 
 # Formbricks Experience Management Integration
-FORMBRICKS_HOST_URL=https://app.formbricks.com
-FORMBRICKS_ENVIRONMENT_ID=
+NEXT_PUBLIC_FORMBRICKS_HOST_URL=https://app.formbricks.com
+NEXT_PUBLIC_FORMBRICKS_ENVIRONMENT_ID=
 FORMBRICKS_FEEDBACK_SURVEY_ID=
 
 # AvatarAPI
@@ -236,6 +239,8 @@ CSP_POLICY=
 EDGE_CONFIG=
 
 NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
+NEXT_PUBLIC_BOOKER_NUMBER_OF_DAYS_TO_LOAD=0 # Override the booker to only load X number of days worth of data
+
 # Control time intervals on a user's Schedule availability
 NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL=
 
@@ -289,9 +294,9 @@ E2E_TEST_CALCOM_GCAL_KEYS=
 # Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
 # Under settings/admin/apps ensure that all app secrets are set the same as the parent application
 # You can use: `openssl rand -base64 32` to generate one
-CALCOM_WEBHOOK_SECRET=""
+CALCOM_CREDENTIAL_SYNC_SECRET=""
 # This is the header name that will be used to verify the webhook secret. Should be in lowercase
-CALCOM_WEBHOOK_HEADER_NAME="calcom-webhook-secret"
+CALCOM_CREDENTIAL_SYNC_SECRET_HEADER_NAME="calcom-webhook-secret"
 CALCOM_CREDENTIAL_SYNC_ENDPOINT=""
 # Key should match on Cal.com and your application
 # must be 24 bytes for AES256 encryption algorithm

.github/actions/cache-db/action.yml

@@ -18,6 +18,7 @@ runs:
         key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}
         key-2: ${{ github.event.pull_request.number || github.ref }}
         DATABASE_URL: ${{ inputs.DATABASE_URL }}
+        DATABASE_DIRECT_URL: ${{ inputs.DATABASE_URL }}
         E2E_TEST_CALCOM_QA_EMAIL: ${{ inputs.E2E_TEST_CALCOM_QA_EMAIL }}
         E2E_TEST_CALCOM_QA_PASSWORD: ${{ inputs.E2E_TEST_CALCOM_QA_PASSWORD }}
         E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ inputs.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}

.github/workflows/delete-buildjet-cache.yml

@@ -0,0 +1,17 @@
+name: Manually Delete BuildJet Cache
+on:
+  workflow_dispatch:
+    inputs:
+      cache_key:
+        description: "BuildJet Cache Key to Delete"
+        required: true
+        type: string
+jobs:
+  manually-delete-buildjet-cache:
+    runs-on: buildjet-2vcpu-ubuntu-2204
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - uses: buildjet/cache-delete@v1
+        with:
+          cache_key: ${{ inputs.cache_key }}

.github/workflows/e2e-app-store.yml

@@ -11,6 +11,9 @@ jobs:
     services:
       postgres:
         image: postgres:12.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         env:
           POSTGRES_USER: postgres
           POSTGRES_DB: calendso
@@ -18,6 +21,9 @@ jobs:
           - 5432:5432
       mailhog:
         image: mailhog/mailhog:v1.0.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         ports:
           - 8025:8025
           - 1025:1025
@@ -39,6 +45,7 @@ jobs:
       - uses: ./.github/actions/cache-db
         env:
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
           E2E_TEST_CALCOM_QA_EMAIL: ${{ secrets.E2E_TEST_CALCOM_QA_EMAIL }}
           E2E_TEST_CALCOM_QA_PASSWORD: ${{ secrets.E2E_TEST_CALCOM_QA_PASSWORD }}
           E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS: ${{ secrets.E2E_TEST_CALCOM_QA_GCAL_CREDENTIALS }}
@@ -50,6 +57,7 @@ jobs:
           ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
           E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
           E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}

.github/workflows/e2e-embed-react.yml

@@ -11,6 +11,9 @@ jobs:
     services:
       postgres:
         image: postgres:12.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         env:
           POSTGRES_USER: postgres
           POSTGRES_DB: calendso
@@ -41,6 +44,7 @@ jobs:
           ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
           E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
           E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}

.github/workflows/e2e-embed.yml

@@ -11,6 +11,9 @@ jobs:
     services:
       postgres:
         image: postgres:12.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         env:
           POSTGRES_USER: postgres
           POSTGRES_DB: calendso
@@ -18,6 +21,9 @@ jobs:
           - 5432:5432
       mailhog:
         image: mailhog/mailhog:v1.0.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         ports:
           - 8025:8025
           - 1025:1025
@@ -44,6 +50,7 @@ jobs:
           ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
           E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
           E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}

.github/workflows/e2e.yml

@@ -11,6 +11,9 @@ jobs:
     services:
       postgres:
         image: postgres:12.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         env:
           POSTGRES_USER: postgres
           POSTGRES_DB: calendso
@@ -18,6 +21,9 @@ jobs:
           - 5432:5432
       mailhog:
         image: mailhog/mailhog:v1.0.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         ports:
           - 8025:8025
           - 1025:1025
@@ -42,6 +48,7 @@ jobs:
           ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
           CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
           DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+          DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
           E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
           E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}

.github/workflows/labeler.yml

@@ -28,7 +28,7 @@ jobs:
         with:
           repo-token: ${{ secrets.EQUITY_BEE_TEAM_LABELER_ACTION_TOKEN }}
           organization-name: calcom
-          ignore-labels: "admin, app-store, ai, authentication, automated-testing, devops, platform, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
+          ignore-labels: "admin, app-store, ai, authentication, automated-testing, devops, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
   apply-labels-from-issue:
     runs-on: ubuntu-latest
 

.github/workflows/production-build-without-database.yml

@@ -7,6 +7,7 @@ env:
   ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
   CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
   DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
   E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
   E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
   GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}

.github/workflows/production-build.yml

@@ -7,6 +7,7 @@ env:
   ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
   CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
   DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  DATABASE_DIRECT_URL: ${{ secrets.CI_DATABASE_URL }}
   E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
   E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
   E2E_TEST_CALCOM_QA_EMAIL: ${{ secrets.E2E_TEST_CALCOM_QA_EMAIL }}
@@ -41,6 +42,9 @@ jobs:
     services:
       postgres:
         image: postgres:12.1
+        credentials:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
         env:
           POSTGRES_USER: postgres
           POSTGRES_DB: calendso

.snaplet/transform.ts

@@ -1,9 +1,10 @@
-// This transform config was generated by Snaplet.
-// Snaplet found fields that may contain personally identifiable information (PII)
-// and used that to populate this file.
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path=".snaplet/snaplet.d.ts" />
+// This config was generated by Snaplet make sure to check it over before using it.
 import { copycat as c } from "@snaplet/copycat";
+import { defineConfig } from "snaplet";
 
-import type { Transform } from "./structure";
+// c.setHashKey(REPLACE_ME_WITH_YOUR_HASH_KEY);
 
 function hasStringProp<T extends string>(x: unknown, key: T): x is { [key in T]: string } {
   return !!x && typeof x === "object" && key in x;
@@ -41,57 +42,226 @@ function replaceSensitiveKeys(record: object) {
 
 const generateUsername = (x: string) => `${c.firstName(x)}-${c.lastName(x)}${c.int(x, { min: 2, max: 99 })}`;
 
-const config: Transform = () => ({
-  public: {
-    ApiKey: ({ row }) => ({
-      hashedKey: c.uuid(row.hashedKey),
-    }),
-    App: ({ row }) => ({
-      keys: replaceSensitiveKeys(row.keys),
-    }),
-    Attendee: ({ row }) => ({
-      email: c.email(row.email),
-      name: c.fullName(row.name),
-      timeZone: c.timezone(row.timeZone),
-    }),
-    Credential: ({ row }) => ({
-      key: typeof row.key === "string" ? c.uuid(row.key) : replaceSensitiveKeys(row.key),
-    }),
-    EventType: ({ row }) => ({
-      slug: generateSlug(row.slug),
-      timeZone: c.timezone(row.timeZone),
-      eventName: c.words(row.eventName, { max: 3 }),
-    }),
-    ResetPasswordRequest: ({ row }) => ({
-      email: c.email(row.email),
-    }),
-    Schedule: ({ row }) => ({
-      timeZone: c.timezone(row.timeZone),
-    }),
-    Team: ({ row }) => ({
-      bio: c.sentence(row.bio),
-      name: c.words(row.name, { max: 2 }),
-      slug: generateSlug(row.slug),
-    }),
-    users: ({ row }) =>
-      row.role !== "ADMIN"
-        ? {
-            bio: c.sentence(row.bio),
-            email: c.email(row.email),
-            name: c.fullName(row.name),
-            password: c.password(row.password),
-            timeZone: c.timezone(row.timeZone),
-            username: generateUsername(row.username),
-          }
-        : row,
-    VerificationToken: ({ row }) => ({
-      token: c.uuid(row.token),
-    }),
-    Account: ({ row }) => ({
-      access_token: c.uuid(row.access_token),
-      refresh_token: c.uuid(row.refresh_token),
-    }),
+export default defineConfig({
+  transform: {
+    $mode: "unsafe",
+    public: {
+      Account({ row }) {
+        return {
+          refresh_token: c.uuid(row.refresh_token),
+          access_token: c.uuid(row.access_token),
+          expires_at: c.int(row.expires_at, {
+            min: 0,
+            max: Math.pow(4, 8) - 1,
+          }),
+          token_type: c.uuid(row.token_type),
+          id_token: c.uuid(row.id_token),
+        };
+      },
+      ApiKey: ({ row }) => ({
+        hashedKey: c.uuid(row.hashedKey),
+        note: c.fullName(row.note),
+        createdAt: c.dateString(row.createdAt, {
+          minYear: 2020,
+        }),
+      }),
+      App: ({ row }) => ({
+        keys: replaceSensitiveKeys(row.keys),
+      }),
+      App_RoutingForms_Form({ row }) {
+        return {
+          name: c.fullName(row.name),
+        };
+      },
+      Attendee: ({ row }) => ({
+        email: c.email(row.email),
+        name: c.fullName(row.name),
+        timeZone: c.timezone(row.timeZone),
+        locale: c.fullName(row.locale),
+      }),
+      Availability({ row }) {
+        return {
+          startTime: c
+            .dateString(row.startTime, {
+              minYear: 2020,
+            })
+            .slice(11, 19),
+          endTime: c
+            .dateString(row.endTime, {
+              minYear: 2020,
+            })
+            .slice(11, 19),
+        };
+      },
+      Booking({ row }) {
+        return {
+          title: c.fullName(row.title),
+          startTime: c.dateString(row.startTime, {
+            minYear: 2020,
+          }),
+          endTime: c.dateString(row.endTime, {
+            minYear: 2020,
+          }),
+          location: c.sentence(row.location),
+          metadata: {
+            [c.word(row.metadata)]: c.words(row.metadata),
+          },
+        };
+      },
+      Credential: ({ row }) => ({
+        key: typeof row.key === "string" ? c.uuid(row.key) : replaceSensitiveKeys(row.key),
+      }),
+      EventType: ({ row }) => ({
+        slug: generateSlug(row.slug),
+        timeZone: c.timezone(row.timeZone),
+        eventName: c.words(row.eventName, { max: 3 }),
+        currency: c.sentence(row.currency),
+      }),
+      EventTypeCustomInput({ row }) {
+        return {
+          label: c.fullName(row.label),
+        };
+      },
+      Feature({ row }) {
+        return {
+          slug: c.uuid(row.slug),
+        };
+      },
+      InstantMeetingToken({ row }) {
+        return {
+          token: c.uuid(row.token),
+        };
+      },
+      OAuthClient({ row }) {
+        return {
+          name: c.fullName(row.name),
+        };
+      },
+      OutOfOfficeEntry({ row }) {
+        return {
+          start: c.dateString(row.start, {
+            minYear: 2020,
+          }),
+        };
+      },
+      Payment({ row }) {
+        return {
+          amount: c.int(row.amount, {
+            min: 0,
+            max: Math.pow(4, 8) - 1,
+          }),
+          currency: c.sentence(row.currency),
+          data: {
+            [c.word(row.data)]: c.words(row.data),
+          },
+        };
+      },
+      ResetPasswordRequest: ({ row }) => ({
+        email: c.email(row.email),
+      }),
+      Schedule: ({ row }) => ({
+        name: c.fullName(row.name),
+        timeZone: c.timezone(row.timeZone),
+      }),
+      Session({ row }) {
+        return {
+          sessionToken: c.uuid(row.sessionToken),
+        };
+      },
+      Team: ({ row }) => ({
+        bio: c.sentence(row.bio),
+        name: c.words(row.name, { max: 2 }),
+        slug: generateSlug(row.slug),
+        timeZone: c.timezone(row.timeZone),
+        logoUrl: c.username(row.logoUrl),
+      }),
+      TempOrgRedirect({ row }) {
+        return {
+          from: c.dateString(row.from, {
+            maxYear: 1999,
+          }),
+          toUrl: c.city(row.toUrl),
+        };
+      },
+      VerificationToken({ row }) {
+        return {
+          id: c
+            .int(row.id, {
+              min: 1,
+              max: Math.pow(4, 8) - 1,
+            })
+            .toString(),
+          identifier: c.uuid(row.identifier),
+          token: c.uuid(row.token),
+          expires: c.dateString(row.expires, {
+            minYear: 2020,
+          }),
+        };
+      },
+      VerifiedNumber({ row }) {
+        return {
+          phoneNumber: c.phoneNumber(row.phoneNumber),
+        };
+      },
+      Webhook({ row }) {
+        return {
+          subscriberUrl: c.url(row.subscriberUrl),
+          secret: c.streetAddress(row.secret),
+        };
+      },
+      WebhookScheduledTriggers({ row }) {
+        return {
+          jobName: c.fullName(row.jobName),
+          payload: c.password(row.payload),
+        };
+      },
+      WorkflowStep({ row }) {
+        return {
+          sendTo: c.oneOf(row.sendTo, [
+            "Man",
+            "Woman",
+            "Transgender",
+            "Non-binary/non-conforming",
+            "Not specified",
+          ]),
+          sender: c.oneOf(row.sender, [
+            "Man",
+            "Woman",
+            "Transgender",
+            "Non-binary/non-conforming",
+            "Not specified",
+          ]),
+        };
+      },
+      users: ({ row }) =>
+        row.role !== "ADMIN"
+          ? {
+              bio: c.sentence(row.bio),
+              email: c.email(row.email),
+              name: c.fullName(row.name),
+              password: c.password(row.password),
+              timeZone: c.timezone(row.timeZone),
+              username: generateUsername(row.username),
+              metadata: {
+                [c.word(row.metadata)]: c.words(row.metadata),
+              },
+            }
+          : row,
+    },
+  },
+  subset: {
+    enabled: true,
+    version: "3",
+    targets: [
+      {
+        table: "public.users",
+        rowLimit: 100,
+      },
+    ],
+    keepDisconnectedTables: false,
+    followNullableRelations: true,
+    maxCyclesLoop: 0,
+    eager: false,
+    taskSortAlgorithm: "children",
   },
 });
-
-export default config;

.well-known/security.txt

@@ -0,0 +1,4 @@
+Contact: security@cal.com
+Preferred-Languages: en
+Canonical: https://cal.com/.well-known/security.txt
+Policy: https://github.com/calcom/cal.com/security/policy

.yarn/patches/dayjs-npm-1.11.2-644b12fe04.patch

@@ -0,0 +1,8 @@
+diff --git a/plugin/timezone.js b/plugin/timezone.js
+index fb6112a96f03f53ba78162ac323dce17f635161d..991e4e5410a32f5a69cb6e0e9476a9c529657aae 100644
+--- a/plugin/timezone.js
++++ b/plugin/timezone.js
+@@ -1 +1 @@
+-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs_plugin_timezone=e()}(this,(function(){"use strict";var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10))}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return(o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute")}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return"timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return[i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t}}}));
+\ No newline at end of file
++!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs_plugin_timezone=e()}(this,(function(){"use strict";function t(){return t=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},t.apply(this,arguments)}var e={year:0,month:1,day:2,hour:3,minute:4,second:5},n={year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"},i={},r={};return function(o,a,u){var f,s=function(e,r,o){void 0===o&&(o={});var a=new Date(e),u=function(e,r){void 0===r&&(r={});var o=r.timeZoneName||"short",a=e+"|"+o,u=i[a];return u||(u=new Intl.DateTimeFormat("en-US",t({},n,{hour12:!1,timeZone:e,timeZoneName:o})),i[a]=u),u}(r,o);return u.formatToParts(a)},m=function(t,n){for(var i=s(t,n),r=[],o=0;o<i.length;o+=1){var a=i[o],f=a.type,m=a.value,c=e[f];c>=0&&(r[c]=parseInt(m,10))}var l=r[3],d=24===l?0:l,h=r[0]+"-"+r[1]+"-"+r[2]+" "+d+":"+r[4]+":"+r[5]+":000",v=+t;return(u.utc(h).valueOf()-(v-=v%1e3))/6e4},c=a.prototype;c.tz=function(e,i){void 0===e&&(e=f);var o=this.utcOffset(),a=this.toDate(),s=function(e){var i=r[e];return i||(i=new Intl.DateTimeFormat("en-US",t({},n,{timeZone:e})),r[e]=i),i}(e).format(a),m=Math.round((a-new Date(s))/1e3/60),c=u(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(a.getTimezoneOffset()/15)-m,!0);if(i){var l=c.utcOffset();c=c.add(o-l,"minute")}return c.$x.$timezone=e,c},c.offsetName=function(t){var e=this.$x.$timezone||u.tz.guess(),n=s(this.valueOf(),e,{timeZoneName:t}).find((function(t){return"timezonename"===t.type.toLowerCase()}));return n&&n.value};var l=c.startOf;c.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return l.call(this,t,e);var n=u(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return l.call(n,t,e).tz(this.$x.$timezone,!0)},u.tz=function(t,e,n){var i=n&&e,r=n||e||f,o=m(+u(),r);if("string"!=typeof t)return u(t).tz(r);var a=function(t,e,n){var i=t-60*e*1e3,r=m(i,n);if(e===r)return[i,e];var o=m(i-=60*(r-e)*1e3,n);return r===o?[i,r]:[t-60*Math.min(r,o)*1e3,Math.max(r,o)]}(u.utc(t,i).valueOf(),o,r),s=a[0],c=a[1],l=u(s).utcOffset(c);return l.$x.$timezone=r,l},u.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},u.tz.setDefault=function(t){f=t}}}));

.yarn/patches/dayjs-npm-1.11.4-97921cd375.patch

@@ -0,0 +1,8 @@
+diff --git a/plugin/timezone.js b/plugin/timezone.js
+index fb6112a96f03f53ba78162ac323dce17f635161d..991e4e5410a32f5a69cb6e0e9476a9c529657aae 100644
+--- a/plugin/timezone.js
++++ b/plugin/timezone.js
+@@ -1 +1 @@
+-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs_plugin_timezone=e()}(this,(function(){"use strict";var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10))}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return(o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute")}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return"timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return[i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t}}}));
+\ No newline at end of file
++!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).dayjs_plugin_timezone=e()}(this,(function(){"use strict";function t(){return t=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},t.apply(this,arguments)}var e={year:0,month:1,day:2,hour:3,minute:4,second:5},n={year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit"},i={},r={};return function(o,a,u){var f,s=function(e,r,o){void 0===o&&(o={});var a=new Date(e),u=function(e,r){void 0===r&&(r={});var o=r.timeZoneName||"short",a=e+"|"+o,u=i[a];return u||(u=new Intl.DateTimeFormat("en-US",t({},n,{hour12:!1,timeZone:e,timeZoneName:o})),i[a]=u),u}(r,o);return u.formatToParts(a)},m=function(t,n){for(var i=s(t,n),r=[],o=0;o<i.length;o+=1){var a=i[o],f=a.type,m=a.value,c=e[f];c>=0&&(r[c]=parseInt(m,10))}var l=r[3],d=24===l?0:l,h=r[0]+"-"+r[1]+"-"+r[2]+" "+d+":"+r[4]+":"+r[5]+":000",v=+t;return(u.utc(h).valueOf()-(v-=v%1e3))/6e4},c=a.prototype;c.tz=function(e,i){void 0===e&&(e=f);var o=this.utcOffset(),a=this.toDate(),s=function(e){var i=r[e];return i||(i=new Intl.DateTimeFormat("en-US",t({},n,{timeZone:e})),r[e]=i),i}(e).format(a),m=Math.round((a-new Date(s))/1e3/60),c=u(s,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(a.getTimezoneOffset()/15)-m,!0);if(i){var l=c.utcOffset();c=c.add(o-l,"minute")}return c.$x.$timezone=e,c},c.offsetName=function(t){var e=this.$x.$timezone||u.tz.guess(),n=s(this.valueOf(),e,{timeZoneName:t}).find((function(t){return"timezonename"===t.type.toLowerCase()}));return n&&n.value};var l=c.startOf;c.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return l.call(this,t,e);var n=u(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return l.call(n,t,e).tz(this.$x.$timezone,!0)},u.tz=function(t,e,n){var i=n&&e,r=n||e||f,o=m(+u(),r);if("string"!=typeof t)return u(t).tz(r);var a=function(t,e,n){var i=t-60*e*1e3,r=m(i,n);if(e===r)return[i,e];var o=m(i-=60*(r-e)*1e3,n);return r===o?[i,r]:[t-60*Math.min(r,o)*1e3,Math.max(r,o)]}(u.utc(t,i).valueOf(),o,r),s=a[0],c=a[1],l=u(s).utcOffset(c);return l.$x.$timezone=r,l},u.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},u.tz.setDefault=function(t){f=t}}}));

__checks__/organization.spec.ts

@@ -8,14 +8,14 @@ test.describe("Org", () => {
       const response = await page.goto("https://i.cal.com/embed");
       expect(response?.status()).toBe(200);
       await page.screenshot({ path: "screenshot.jpg" });
-      await expectPageToBeServerSideRendered(page);
+      await expectPageToBeRenderedWithEmbedSsr(page);
     });
 
     test("Org User(Peer) Page should be embeddable", async ({ page }) => {
       const response = await page.goto("https://i.cal.com/peer/embed");
       expect(response?.status()).toBe(200);
       await expect(page.locator("text=Peer Richelsen")).toBeVisible();
-      await expectPageToBeServerSideRendered(page);
+      await expectPageToBeRenderedWithEmbedSsr(page);
     });
 
     test("Org User Event(peer/meet) Page should be embeddable", async ({ page }) => {
@@ -23,14 +23,14 @@ test.describe("Org", () => {
       expect(response?.status()).toBe(200);
       await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
       await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
-      await expectPageToBeServerSideRendered(page);
+      await expectPageToBeRenderedWithEmbedSsr(page);
     });
 
     test("Org Team Profile(/sales) page should be embeddable", async ({ page }) => {
       const response = await page.goto("https://i.cal.com/sales/embed");
       expect(response?.status()).toBe(200);
       await expect(page.locator("text=Cal.com Sales")).toBeVisible();
-      await expectPageToBeServerSideRendered(page);
+      await expectPageToBeRenderedWithEmbedSsr(page);
     });
 
     test("Org Team Event page(/sales/hippa) should be embeddable", async ({ page }) => {
@@ -38,9 +38,10 @@ test.describe("Org", () => {
       expect(response?.status()).toBe(200);
       await expect(page.locator('[data-testid="decrementMonth"]')).toBeVisible();
       await expect(page.locator('[data-testid="incrementMonth"]')).toBeVisible();
-      await expectPageToBeServerSideRendered(page);
+      await expectPageToBeRenderedWithEmbedSsr(page);
     });
   });
+
   test.describe("Dynamic Group Booking", () => {
     test("Dynamic Group booking link should load", async ({ page }) => {
       const users = [
@@ -63,12 +64,39 @@ test.describe("Org", () => {
       expect((await page.locator('[data-testid="event-meta"] [data-testid="avatar"]').all()).length).toBe(3);
     });
   });
+
+  test("Organization Homepage - Has Engineering and Marketing Teams", async ({ page }) => {
+    const response = await page.goto("https://i.cal.com");
+    expect(response?.status()).toBe(200);
+    await expect(page.locator("text=Cal.com")).toBeVisible();
+    await expect(page.locator("text=Engineering")).toBeVisible();
+    await expect(page.locator("text=Marketing")).toBeVisible();
+  });
+
+  test.describe("Browse the Engineering Team", async () => {
+    test("By User Navigation", async ({ page }) => {
+      await page.goto("https://i.cal.com");
+      await page.click('text="Engineering"');
+      await expect(page.locator("text=Cal.com Engineering")).toBeVisible();
+    });
+
+    test("By /team/engineering", async ({ page }) => {
+      await page.goto("https://i.cal.com/team/engineering");
+      await expect(page.locator("text=Cal.com Engineering")).toBeVisible();
+    });
+
+    test("By /engineering", async ({ page }) => {
+      await page.goto("https://i.cal.com/engineering");
+      await expect(page.locator("text=Cal.com Engineering")).toBeVisible();
+    });
+  });
 });
 
 // This ensures that the route is actually mapped to a page that is using withEmbedSsr
-async function expectPageToBeServerSideRendered(page: Page) {
+async function expectPageToBeRenderedWithEmbedSsr(page: Page) {
   expect(
     await page.evaluate(() => {
+      //@ts-expect-error - __NEXT_DATA__ is a global variable defined by Next.js
       return window.__NEXT_DATA__.props.pageProps.isEmbed;
     })
   ).toBe(true);

apps/ai/package.json

@@ -5,12 +5,14 @@
   "author": "Cal.com Inc.",
   "dependencies": {
     "@calcom/prisma": "*",
+    "@langchain/core": "^0.1.26",
+    "@langchain/openai": "^0.0.14",
     "@t3-oss/env-nextjs": "^0.6.1",
-    "langchain": "^0.0.131",
+    "langchain": "^0.1.17",
     "mailparser": "^3.6.5",
     "next": "^13.5.4",
     "supports-color": "8.1.1",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/mailparser": "^3.4.0"

apps/ai/src/tools/createBooking.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import type { UserList } from "~/src/types/user";

apps/ai/src/tools/deleteBooking.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "../env.mjs";

apps/ai/src/tools/getAvailability.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "../env.mjs";

apps/ai/src/tools/getBookings.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "../env.mjs";

apps/ai/src/tools/getEventTypes.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "../env.mjs";

apps/ai/src/tools/sendBookingEmail.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "~/src/env.mjs";

apps/ai/src/tools/updateBooking.ts

@@ -1,4 +1,4 @@
-import { DynamicStructuredTool } from "langchain/tools";
+import { DynamicStructuredTool } from "@langchain/core/tools";
 import { z } from "zod";
 
 import { env } from "../env.mjs";

apps/ai/src/utils/agent.ts

@@ -1,5 +1,6 @@
-import { initializeAgentExecutorWithOptions } from "langchain/agents";
-import { ChatOpenAI } from "langchain/chat_models/openai";
+import { ChatPromptTemplate } from "@langchain/core/prompts";
+import { ChatOpenAI } from "@langchain/openai";
+import { AgentExecutor, createOpenAIFunctionsAgent } from "langchain/agents";
 
 import { env } from "../env.mjs";
 import createBookingIfAvailable from "../tools/createBooking";
@@ -13,7 +14,7 @@ import type { User, UserList } from "../types/user";
 import type { WorkingHours } from "../types/workingHours";
 import now from "./now";
 
-const gptModel = "gpt-4-0613";
+const gptModel = "gpt-4-0125-preview";
 
 /**
  * Core of the Cal.ai booking agent: a LangChain Agent Executor.
@@ -47,67 +48,72 @@ const agent = async (
   /**
    * Initialize the agent executor with arguments.
    */
-  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 users should be formatted per that user's timezone.
-In responses to users, always summarize necessary context and open the door to follow ups. For example "I have booked your chat with @username for 3pm on Wednesday, December 20th, 2023 EST. Please let me know if you need to reschedule."
-If you can't find a referenced user, ask the user for their email or @username. Make sure to specify that usernames require the @username format. Users don't know other users' userIds.
+  const prompt =
+    ChatPromptTemplate.fromTemplate(`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.
+  In responses to users, always summarize necessary context and open the door to follow ups. For example "I have booked your chat with @username for 3pm on Wednesday, December 20th, 2023 EST. Please let me know if you need to reschedule."
+  If you can't find a referenced user, ask the user for their email or @username. Make sure to specify that usernames require the @username format. Users don't know other users' userIds.
+  
+  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, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  })}
+  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")}`
+      : ""
+  }`);
+  const agent = await createOpenAIFunctionsAgent({
+    llm: model,
+    prompt,
+    tools,
+  });
 
-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, {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-      })}
-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",
+  const executor = new AgentExecutor({
+    agent,
+    tools,
     returnIntermediateSteps: env.NODE_ENV === "development",
     verbose: env.NODE_ENV === "development",
   });
 
-  const result = await executor.call({ input });
+  const result = await executor.invoke({ input });
   const { output } = result;
 
   return output;

apps/api/lib/helpers/captureErrors.ts

@@ -1,4 +1,4 @@
-import * as Sentry from "@sentry/nextjs";
+import { captureException as SentryCaptureException } from "@sentry/nextjs";
 import type { NextMiddleware } from "next-api-middleware";
 
 import { redactError } from "@calcom/lib/redactError";
@@ -9,7 +9,7 @@ export const captureErrors: NextMiddleware = async (_req, res, next) => {
     // middleware and the API route handler
     await next();
   } catch (error) {
-    Sentry.captureException(error);
+    SentryCaptureException(error);
     const redactedError = redactError(error);
     if (redactedError instanceof Error) {
       res.status(400).json({ message: redactedError.message, error: redactedError });

apps/api/lib/helpers/rateLimitApiKey.ts

@@ -1,6 +1,7 @@
 import type { NextMiddleware } from "next-api-middleware";
 
 import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import { API_KEY_RATE_LIMIT } from "@calcom/lib/rateLimit";
 
 export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
   if (!req.query.apiKey) return res.status(401).json({ message: "No apiKey provided" });
@@ -9,6 +10,11 @@ export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
   await checkRateLimitAndThrowError({
     identifier: req.query.apiKey as string,
     rateLimitingType: "api",
+    onRateLimiterResponse: (response) => {
+      res.setHeader("X-RateLimit-Limit", API_KEY_RATE_LIMIT);
+      res.setHeader("X-RateLimit-Remaining", response.remaining);
+      res.setHeader("X-RateLimit-Reset", response.reset);
+    },
   });
 
   await next();

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

@@ -62,6 +62,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   bookingLimits: true,
   onlyShowFirstAvailableSlot: true,
   durationLimits: true,
+  assignAllTeamMembers: true,
 })
   .merge(
     z.object({

apps/api/lib/validations/shared/querySlug.ts

@@ -0,0 +1,7 @@
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+export const schemaQuerySlug = baseApiParams.extend({
+  slug: z.string().optional(),
+});

apps/api/lib/validations/shared/timeZone.ts

@@ -1,5 +1,5 @@
 import tzdata from "tzdata";
-import * as z from "zod";
+import { z } from "zod";
 
 // @note: This is a custom validation that checks if the timezone is valid and exists in the tzdb library
 export const timeZone = z.string().refine((tz: string) => Object.keys(tzdata.zones).includes(tz), {

apps/api/lib/validations/user.ts

@@ -74,6 +74,7 @@ export const schemaUserBaseBodyParams = User.pick({
   timeZone: true,
   weekStart: true,
   theme: true,
+  appTheme: true,
   defaultScheduleId: true,
   locale: true,
   hideBranding: true,
@@ -100,6 +101,7 @@ const schemaUserEditParams = z.object({
   hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
+  appTheme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
   defaultScheduleId: z
     .number()
@@ -122,6 +124,7 @@ const schemaUserCreateParams = z.object({
   hideBranding: z.boolean().optional(),
   timeZone: timeZone.optional(),
   theme: z.nativeEnum(theme).optional().nullable(),
+  appTheme: z.nativeEnum(theme).optional().nullable(),
   timeFormat: z.nativeEnum(timeFormat).optional(),
   defaultScheduleId: z
     .number()
@@ -159,6 +162,7 @@ export const schemaUserReadPublic = User.pick({
   weekStart: true,
   endTime: true,
   bufferTime: true,
+  appTheme: true,
   theme: true,
   defaultScheduleId: true,
   locale: true,

apps/api/package.json

@@ -41,6 +41,6 @@
     "typescript": "^4.9.4",
     "tzdata": "^1.0.30",
     "uuid": "^8.3.2",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   }
 }

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

@@ -197,6 +197,7 @@ async function handler(req: NextApiRequest) {
       dateTo,
       eventTypeId,
       userId,
+      returnDateOverrides: true,
     });
   const team = await prisma.team.findUnique({
     where: { id: teamId },
@@ -232,6 +233,7 @@ async function handler(req: NextApiRequest) {
         dateFrom,
         dateTo,
         eventTypeId,
+        returnDateOverrides: true,
       }),
     };
   });

apps/api/pages/api/bookings/_post.ts

@@ -1,5 +1,6 @@
 import type { NextApiRequest } from "next";
 
+import getBookingDataSchemaForApi from "@calcom/features/bookings/lib/getBookingDataSchemaForApi";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
 import { defaultResponder } from "@calcom/lib/server";
 
@@ -206,7 +207,7 @@ async function handler(req: NextApiRequest) {
   const { userId, isAdmin } = req;
   if (isAdmin) req.userId = req.body.userId || userId;
 
-  return await handleNewBooking(req);
+  return await handleNewBooking(req, getBookingDataSchemaForApi);
 }
 
 export default defaultResponder(handler);

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

@@ -51,7 +51,6 @@ export async function getHandler(req: NextApiRequest) {
     include: {
       customInputs: true,
       team: { select: { slug: true } },
-      users: true,
       hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },
       children: { select: { id: true, userId: true } },

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

@@ -5,6 +5,7 @@ import { defaultResponder } from "@calcom/lib/server";
 import type { PrismaClient } from "@calcom/prisma";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
+import { schemaQuerySlug } from "~/lib/validations/shared/querySlug";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
 
 import getCalLink from "./_utils/getCalLink";
@@ -22,6 +23,12 @@ import getCalLink from "./_utils/getCalLink";
  *          type: string
  *        required: true
  *        description: Your API Key
+ *      - in: query
+ *        name: slug
+ *        schema:
+ *          type: string
+ *        required: false
+ *        description: Slug to filter event types by
  *     tags:
  *     - event-types
  *     externalDocs:
@@ -35,16 +42,20 @@ import getCalLink from "./_utils/getCalLink";
  *         description: No event types were found
  */
 async function getHandler(req: NextApiRequest) {
-  const { userId, prisma } = req;
+  const { userId, prisma, isAdmin } = req;
   const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
+  const { slug } = schemaQuerySlug.parse(req.query);
+  const shouldUseUserId = !isAdmin || !slug || !!req.query.userId;
+  // When user is admin and no query params are provided we should return all event types.
+  // But currently we return only the event types of the user. Not changing this for backwards compatibility.
   const data = await prisma.eventType.findMany({
     where: {
-      userId: { in: userIds },
+      userId: shouldUseUserId ? { in: userIds } : undefined,
+      slug: slug, // slug will be undefined if not provided in query
     },
     include: {
       customInputs: true,
       team: { select: { slug: true } },
-      users: true,
       hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },
       children: { select: { id: true, userId: true } },

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

@@ -3,13 +3,17 @@ import type { z } from "zod";
 
 import { HttpError } from "@calcom/lib/http-error";
 
-import type { schemaEventTypeBaseBodyParams } from "~/lib/validations/event-type";
+import type { schemaEventTypeCreateBodyParams } from "~/lib/validations/event-type";
 
 export default async function checkTeamEventEditPermission(
   req: NextApiRequest,
-  body: Pick<z.infer<typeof schemaEventTypeBaseBodyParams>, "teamId">
+  body: Pick<z.infer<typeof schemaEventTypeCreateBodyParams>, "teamId" | "userId">
 ) {
-  const { prisma, userId } = req;
+  const { prisma, isAdmin } = req;
+  let userId = req.userId;
+  if (isAdmin && body.userId) {
+    userId = body.userId;
+  }
   if (body.teamId) {
     const membership = await prisma.membership.findFirst({
       where: {

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

@@ -1,4 +1,4 @@
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 
 export default function getCalLink(eventType: {
   team?: { slug: string | null } | null;
@@ -6,7 +6,7 @@ export default function getCalLink(eventType: {
   users?: { username: string | null }[];
   slug: string;
 }) {
-  return `${CAL_URL}/${
+  return `${WEBSITE_URL}/${
     eventType?.team
       ? `team/${eventType?.team?.slug}`
       : eventType?.owner

apps/api/pages/api/invites/_post.ts

@@ -0,0 +1,72 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+import { createContext } from "@calcom/trpc/server/createContext";
+import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";
+import type { TInviteMemberInputSchema } from "@calcom/trpc/server/routers/viewer/teams/inviteMember/inviteMember.schema";
+import { ZInviteMemberInputSchema } from "@calcom/trpc/server/routers/viewer/teams/inviteMember/inviteMember.schema";
+import type { UserProfile } from "@calcom/types/UserProfile";
+
+import { TRPCError } from "@trpc/server";
+import { getHTTPStatusCodeFromError } from "@trpc/server/http";
+
+async function postHandler(req: NextApiRequest, res: NextApiResponse) {
+  const data = ZInviteMemberInputSchema.parse(req.body);
+  await checkPermissions(req, data);
+
+  async function sessionGetter() {
+    return {
+      user: {
+        id: req.userId,
+        username: "",
+        profile: {
+          id: null,
+          organizationId: null,
+          organization: null,
+          username: "",
+          upId: "",
+        } satisfies UserProfile,
+      },
+      hasValidLicense: true,
+      expires: "",
+      upId: "",
+    };
+  }
+
+  const ctx = await createContext({ req, res }, sessionGetter);
+  try {
+    const caller = viewerTeamsRouter.createCaller(ctx);
+    await caller.inviteMember({
+      role: data.role,
+      language: data.language,
+      teamId: data.teamId,
+      usernameOrEmail: data.usernameOrEmail,
+      isOrg: data.isOrg,
+    });
+
+    return { success: true, message: `${data.usernameOrEmail} has been invited.` };
+  } catch (cause) {
+    if (cause instanceof TRPCError) {
+      const statusCode = getHTTPStatusCodeFromError(cause);
+      throw new HttpError({ statusCode, message: cause.message });
+    }
+
+    throw cause;
+  }
+}
+
+async function checkPermissions(req: NextApiRequest, body: TInviteMemberInputSchema) {
+  const { userId, isAdmin, prisma } = req;
+  if (isAdmin) return;
+  // To prevent auto-accepted invites, limit it to ADMIN users
+  if (!isAdmin && "accepted" in body)
+    throw new HttpError({ statusCode: 403, message: "ADMIN needed for `accepted`" });
+  // Only team OWNERS and ADMINS can add other members
+  const membership = await prisma.membership.findFirst({
+    where: { userId, teamId: body.teamId, role: { in: ["ADMIN", "OWNER"] } },
+  });
+  if (!membership) throw new HttpError({ statusCode: 403, message: "You can't add members to this team" });
+}
+
+export default defaultResponder(postHandler);

apps/api/pages/api/invites/index.ts

@@ -0,0 +1,9 @@
+import { defaultHandler } from "@calcom/lib/server";
+
+import { withMiddleware } from "~/lib/helpers/withMiddleware";
+
+export default withMiddleware()(
+  defaultHandler({
+    POST: import("./_post"),
+  })
+);

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

@@ -59,7 +59,6 @@ async function getHandler(req: NextApiRequest) {
     include: {
       customInputs: true,
       team: { select: { slug: true } },
-      users: true,
       hosts: { select: { userId: true, isFixed: true } },
       owner: { select: { username: true, id: true } },
       children: { select: { id: true, userId: true } },

apps/api/pages/api/teams/[teamId]/publish.ts

@@ -5,6 +5,7 @@ import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";
+import type { UserProfile } from "@calcom/types/UserProfile";
 
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
@@ -21,9 +22,17 @@ const patchHandler = async (req: NextApiRequest, res: NextApiResponse) => {
         id: req.userId,
         username: "" /* Not used in this context */,
         role: req.isAdmin ? UserPermissionRole.ADMIN : UserPermissionRole.USER,
+        profile: {
+          id: null,
+          organizationId: null,
+          organization: null,
+          username: "",
+          upId: "",
+        } satisfies UserProfile,
       },
       hasValidLicense: true /* To comply with TS signature */,
       expires: "" /* Not used in this context */,
+      upId: "",
     };
   }
   /** @see https://trpc.io/docs/server-side-calls */

apps/api/pages/api/webhooks/[id]/_delete.ts

@@ -39,7 +39,7 @@ export async function deleteHandler(req: NextApiRequest) {
   const { prisma, query } = req;
   const { id } = schemaQueryIdAsString.parse(query);
   await prisma.webhook.delete({ where: { id } });
-  return { message: `Schedule with id: ${id} deleted successfully` };
+  return { message: `Webhook with id: ${id} deleted successfully` };
 }
 
 export default defaultResponder(deleteHandler);

apps/api/sentry.edge.config.ts

@@ -1,5 +1,5 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 });

apps/api/sentry.server.config.ts

@@ -1,6 +1,6 @@
-import * as Sentry from "@sentry/nextjs";
+import { init as SentryInit } from "@sentry/nextjs";
 
-Sentry.init({
+SentryInit({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   tracesSampleRate: 1.0,
 });

apps/swagger/package.json

@@ -24,6 +24,7 @@
     "@types/node": "16.9.1",
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@types/swagger-ui-react": "^4.18.3",
     "typescript": "^4.9.4"
   }
 }

apps/swagger/pages/_app.tsx

@@ -1,9 +1,10 @@
 import "highlight.js/styles/default.css";
+import { type AppProps } from "next/app";
 import "swagger-ui-react/swagger-ui.css";
 
 import "../styles/globals.css";
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }
 

apps/swagger/pages/index.tsx

@@ -1,9 +1,8 @@
 import dynamic from "next/dynamic";
-import type { SwaggerUI } from "swagger-ui-react";
 
 import { SnippedGenerator, requestSnippets } from "@lib/snippets";
 
-const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
+const SwaggerUIDynamic = dynamic(() => import("swagger-ui-react"), {
   ssr: false,
 });
 
@@ -17,8 +16,6 @@ export default function APIDocs() {
       requestSnippets={requestSnippets}
       plugins={[SnippedGenerator]}
       tryItOutEnabled={true}
-      syntaxHighlight={true}
-      enableCORS={false} // Doesn't seem to work either
       docExpansion="list"
       filter={true}
     />

apps/web/abTest/middlewareFactory.ts

@@ -3,6 +3,8 @@ import type { NextMiddleware, NextRequest } from "next/server";
 import { NextResponse, URLPattern } from "next/server";
 import z from "zod";
 
+import { FUTURE_ROUTES_ENABLED_COOKIE_NAME, FUTURE_ROUTES_OVERRIDE_COOKIE_NAME } from "@calcom/lib/constants";
+
 const ROUTES: [URLPattern, boolean][] = [
   ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
   ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
@@ -25,9 +27,6 @@ const ROUTES: [URLPattern, boolean][] = [
   enabled,
 ]);
 
-const FUTURE_ROUTES_OVERRIDE_COOKIE_NAME = "x-calcom-future-routes-override";
-const FUTURE_ROUTES_ENABLED_COOKIE_NAME = "x-calcom-future-routes-enabled";
-
 const bucketSchema = z.union([z.literal("legacy"), z.literal("future")]);
 
 export const abTestMiddlewareFactory =

apps/web/app/_utils.tsx

@@ -1,12 +1,33 @@
 import { type TFunction } from "i18next";
+import i18next from "i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { headers } from "next/headers";
 
 import { constructGenericImage } from "@calcom/lib/OgImages";
 import { IS_CALCOM, WEBAPP_URL, APP_NAME, SEO_IMG_OGIMG } from "@calcom/lib/constants";
-import { getFixedT } from "@calcom/lib/server/getFixedT";
+//@ts-expect-error no type definitions
+import config from "@calcom/web/next-i18next.config";
 
 import { preparePageMetadata } from "@lib/metadata";
 
+const create = async (locale: string, ns: string) => {
+  const { _nextI18Next } = await serverSideTranslations(locale, [ns], config);
+
+  const _i18n = i18next.createInstance();
+  _i18n.init({
+    lng: locale,
+    resources: _nextI18Next?.initialI18nStore,
+    fallbackLng: _nextI18Next?.userConfig?.i18n.defaultLocale,
+  });
+  return _i18n;
+};
+
+const getFixedT = async (locale: string, ns: string) => {
+  const i18n = await create(locale, ns);
+
+  return i18n.getFixedT(locale, ns);
+};
+
 export const _generateMetadata = async (
   getTitle: (t: TFunction<string, undefined>) => string,
   getDescription: (t: TFunction<string, undefined>) => string

apps/web/app/future/[user]/[type]/embed/page.tsx

@@ -0,0 +1,12 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import LegacyPage from "~/users/views/users-type-public-view";
+import { getServerSideProps, type PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/[user]/[type]/page.tsx

@@ -0,0 +1,45 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import LegacyPage from "~/users/views/users-type-public-view";
+import { getServerSideProps, type PageProps } from "~/users/views/users-type-public-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+
+  const { eventData, booking, user, slug } = props;
+  const rescheduleUid = booking?.uid;
+  const { trpc } = await import("@calcom/trpc");
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username: user, eventSlug: slug, isTeamEvent: false, org: eventData.entity.orgSlug ?? null },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const title = event?.title ?? "";
+
+  return await _generateMetadata(
+    (t) => `${rescheduleUid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
+    (t) => `${rescheduleUid ? t("reschedule") : ""} ${title}`
+  );
+};
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  getData,
+  Page: LegacyPage,
+  getLayout: null,
+})<"P">;

apps/web/app/future/[user]/embed/page.tsx

@@ -0,0 +1,12 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import { WithLayout } from "app/layoutHOC";
+
+import LegacyPage from "~/users/views/users-public-view";
+import { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
+
+const getData = withAppDirSsr<UserPageProps>(getServerSideProps);
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({ getLayout: null, getData: getEmbedData, Page: LegacyPage })<"P">;

apps/web/app/future/[user]/page.tsx

@@ -0,0 +1,33 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { headers, cookies } from "next/headers";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import LegacyPage from "~/users/views/users-public-view";
+import { getServerSideProps, type UserPageProps } from "~/users/views/users-public-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Record<string, string | string[]>;
+  searchParams: { [key: string]: string | string[] | undefined };
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+
+  const { profile, markdownStrippedBio } = props;
+  return await _generateMetadata(
+    () => profile.name,
+    () => markdownStrippedBio
+  );
+};
+
+const getData = withAppDirSsr<UserPageProps>(getServerSideProps);
+export default WithLayout({ getLayout, getData, Page: LegacyPage })<"P">;

apps/web/app/future/booking/[uid]/embed/page.tsx

@@ -1,9 +1,10 @@
-import { type PageProps, getServerSideProps } from "@pages/booking/[uid]";
-import OldPage from "@pages/booking/[uid]/embed";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import withEmbedSsrAppDir from "app/WithEmbedSSR";
 import { WithLayout } from "app/layoutHOC";
 
+import OldPage from "~/bookings/views/bookings-single-view";
+import { getServerSideProps, type PageProps } from "~/bookings/views/bookings-single-view.getServerSideProps";
+
 const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
 const getEmbedData = withEmbedSsrAppDir(getData);

apps/web/app/future/booking/[uid]/page.tsx

@@ -1,4 +1,3 @@
-import OldPage, { type PageProps } from "@pages/booking/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { Params, SearchParams } from "app/_types";
 import { _generateMetadata } from "app/_utils";
@@ -8,9 +7,11 @@ import { cookies, headers } from "next/headers";
 
 import { BookingStatus } from "@calcom/prisma/enums";
 
-import { getServerSideProps } from "@lib/booking/[uid]/getServerSideProps";
 import { buildLegacyCtx } from "@lib/buildLegacyCtx";
 
+import OldPage from "~/bookings/views/bookings-single-view";
+import { getServerSideProps, type PageProps } from "~/bookings/views/bookings-single-view.getServerSideProps";
+
 export const generateMetadata = async ({
   params,
   searchParams,

apps/web/app/future/bookings/[status]/page.tsx

@@ -1,15 +1,13 @@
-import Page from "@pages/bookings/[status]";
 import { withAppDirSsg } from "app/WithAppDirSsg";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import type { InferGetStaticPropsType } from "next";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import { APP_NAME } from "@calcom/lib/constants";
 
-import { getStaticProps } from "@lib/bookings/[status]/getStaticProps";
-
-const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
+import { validStatuses } from "~/bookings/lib/validStatuses";
+import Page from "~/bookings/views/bookings-listing-view";
+import { getStaticProps } from "~/bookings/views/bookings-listing-view.getStaticProps";
 
 type Y = InferGetStaticPropsType<typeof getStaticProps>;
 const getData = withAppDirSsg<Y>(getStaticProps);
@@ -24,6 +22,6 @@ export const generateStaticParams = async () => {
   return validStatuses.map((status) => ({ status }));
 };
 
-export default WithLayout({ getLayout, getData, Page })<"P">;
+export default WithLayout({ getLayout: null, getData, Page })<"P">;
 
 export const dynamic = "force-static";

apps/web/app/future/event-types/[type]/page.tsx

@@ -0,0 +1,32 @@
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { cookies, headers } from "next/headers";
+
+import { APP_NAME } from "@calcom/lib/constants";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+
+import EventTypePageWrapper from "~/event-types/views/event-types-single-view";
+import { getServerSideProps } from "~/event-types/views/event-types-single-view.getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const { eventType } = await getData(legacyCtx);
+
+  return await _generateMetadata(
+    (t) => `${eventType.title} | ${t("event_type")} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+const getData = withAppDirSsr(getServerSideProps);
+
+export default WithLayout({ getLayout: null, getData, Page: EventTypePageWrapper })<"P">;

apps/web/app/future/event-types/page.tsx

@@ -1,8 +1,7 @@
-import EventTypes from "@pages/event-types";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
+import EventTypes from "~/event-types/views/event-types-listing-view";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -10,4 +9,4 @@ export const generateMetadata = async () =>
     (t) => t("event_types_page_subtitle")
   );
 
-export default WithLayout({ getLayout, Page: EventTypes })<"P">;
+export default WithLayout({ getLayout: null, Page: EventTypes })<"P">;

apps/web/app/future/insights/page.tsx

@@ -1,10 +1,9 @@
-import LegacyPage, { getServerSideProps } from "@pages/insights/index";
+import LegacyPage from "@pages/insights/index";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
+import { getServerSideProps } from "@lib/insights/getServerSideProps";
 import { type inferSSRProps } from "@lib/types/inferSSRProps";
 
 export const generateMetadata = async () =>
@@ -15,4 +14,4 @@ export const generateMetadata = async () =>
 
 const getData = withAppDirSsr<inferSSRProps<typeof getServerSideProps>>(getServerSideProps);
 
-export default WithLayout({ getLayout, getData, Page: LegacyPage });
+export default WithLayout({ getLayout: null, getData, Page: LegacyPage });

apps/web/app/future/org/[orgSlug]/embed/page.tsx

@@ -0,0 +1,41 @@
+import { type PageProps } from "@pages/team/[slug]";
+import EmbedPage from "@pages/team/[slug]/embed";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import withEmbedSsrAppDir from "app/WithEmbedSSR";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getEmbedData = withEmbedSsrAppDir(getData);
+
+export default WithLayout({
+  Page: EmbedPage,
+  getData: getEmbedData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/page.tsx

@@ -0,0 +1,37 @@
+import TeamPage, { type PageProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TeamPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/team/[slug]/[type]/page.tsx

@@ -0,0 +1,44 @@
+import TypePage, { type PageProps } from "@pages/team/[slug]/[type]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/[type]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
+  const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
+  const { eventData, user, slug, booking } = props;
+  const entity = eventData.entity;
+  const { trpc } = await import("@calcom/trpc");
+  const { data: event } = trpc.viewer.public.event.useQuery(
+    { username: user, eventSlug: slug, isTeamEvent: false, org: entity.orgSlug ?? null },
+    { refetchOnWindowFocus: false }
+  );
+
+  const profileName = event?.profile?.name ?? "";
+  const title = event?.title ?? "";
+
+  return await _generateMetadata(
+    (t) => `${booking?.uid && !!booking ? t("reschedule") : ""} ${title} | ${profileName}`,
+    (t) => `${booking?.uid ? t("reschedule") : ""} ${title}`
+  );
+};
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TypePage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/org/[orgSlug]/team/[slug]/page.tsx

@@ -0,0 +1,37 @@
+import TeamPage, { type PageProps } from "@pages/team/[slug]";
+import { withAppDirSsr } from "app/WithAppDirSsr";
+import type { Params, SearchParams } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { type GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+
+import { buildLegacyCtx } from "@lib/buildLegacyCtx";
+import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
+
+export const generateMetadata = async ({
+  params,
+  searchParams,
+}: {
+  params: Params;
+  searchParams: SearchParams;
+}) => {
+  const props = await getData(
+    buildLegacyCtx(headers(), cookies(), params, searchParams) as unknown as GetServerSidePropsContext
+  );
+  const teamName = props.team.name || "Nameless Team";
+
+  return await _generateMetadata(
+    () => teamName,
+    () => teamName
+  );
+};
+
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
+
+export default WithLayout({
+  Page: TeamPage,
+  getData,
+  getLayout: null,
+  isBookingPage: true,
+})<"P">;

apps/web/app/future/team/[slug]/[type]/page.tsx

@@ -16,7 +16,8 @@ export const generateMetadata = async ({
 }) => {
   const legacyCtx = buildLegacyCtx(headers(), cookies(), params, searchParams);
   const props = await getData(legacyCtx as unknown as GetServerSidePropsContext);
-  const { entity, user, slug, booking } = props;
+  const { eventData, user, slug, booking } = props;
+  const entity = eventData.entity;
   const { trpc } = await import("@calcom/trpc");
   const { data: event } = trpc.viewer.public.event.useQuery(
     { username: user, eventSlug: slug, isTeamEvent: false, org: entity.orgSlug ?? null },

apps/web/app/future/teams/page.tsx

@@ -3,8 +3,6 @@ import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
-
 import { getServerSideProps } from "@lib/teams/getServerSideProps";
 
 export const generateMetadata = async () =>
@@ -13,4 +11,4 @@ export const generateMetadata = async () =>
     (t) => t("create_manage_teams_collaborative")
   );
 
-export default WithLayout({ getData: withAppDirSsr(getServerSideProps), getLayout, Page })<"P">;
+export default WithLayout({ getData: withAppDirSsr(getServerSideProps), getLayout: null, Page })<"P">;

apps/web/app/future/video/[uid]/page.tsx

@@ -1,11 +1,11 @@
-import Page, { type JoinCallPageProps } from "@pages/video/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
 import { APP_NAME } from "@calcom/lib/constants";
 
-import { getServerSideProps } from "@lib/video/[uid]/getServerSideProps";
+import VideosSingleView from "~/videos/views/videos-single-view";
+import { getServerSideProps, type PageProps } from "~/videos/views/videos-single-view.getServerSideProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -13,6 +13,6 @@ export const generateMetadata = async () =>
     (t) => t("quick_video_meeting")
   );
 
-const getData = withAppDirSsr<JoinCallPageProps>(getServerSideProps);
+const getData = withAppDirSsr<PageProps>(getServerSideProps);
 
-export default WithLayout({ getData, Page, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: VideosSingleView, getLayout: null })<"P">;

apps/web/app/future/video/meeting-ended/[uid]/page.tsx

@@ -1,9 +1,9 @@
-import Page from "@pages/video/meeting-ended/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServerSideProps";
+import MeetingEnded from "~/videos/views/videos-meeting-ended-single-view";
+import { getServerSideProps } from "~/videos/views/videos-meeting-ended-single-view.getServerSideProps";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -13,4 +13,4 @@ export const generateMetadata = async () =>
 
 const getData = withAppDirSsr(getServerSideProps);
 
-export default WithLayout({ getData, Page, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: MeetingEnded, getLayout: null })<"P">;

apps/web/app/future/video/meeting-not-started/[uid]/page.tsx

@@ -1,4 +1,3 @@
-import Page from "@pages/video/meeting-not-started/[uid]";
 import { withAppDirSsr } from "app/WithAppDirSsr";
 import type { PageProps } from "app/_types";
 import { _generateMetadata } from "app/_utils";
@@ -6,7 +5,8 @@ import { WithLayout } from "app/layoutHOC";
 
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 
-import { getServerSideProps } from "@lib/video/meeting-not-started/[uid]/getServerSideProps";
+import MeetingNotStarted from "~/videos/views/videos-meeting-not-started-single-view";
+import { getServerSideProps } from "~/videos/views/videos-meeting-not-started-single-view.getServerSideProps";
 
 export const generateMetadata = async ({ params }: PageProps) => {
   const booking = await prisma.booking.findUnique({
@@ -24,4 +24,4 @@ export const generateMetadata = async ({ params }: PageProps) => {
 
 const getData = withAppDirSsr(getServerSideProps);
 
-export default WithLayout({ getData, Page, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: MeetingNotStarted, getLayout: null })<"P">;

apps/web/app/future/video/no-meeting-found/page.tsx

@@ -1,10 +1,11 @@
-import LegacyPage from "@pages/video/no-meeting-found";
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 import type { GetServerSidePropsContext } from "next";
 
 import { ssrInit } from "@server/lib/ssr";
 
+import NoMeetingFound from "~/videos/views/videos-no-meeting-found-single-view";
+
 export const generateMetadata = async () =>
   await _generateMetadata(
     (t) => t("no_meeting_found"),
@@ -20,4 +21,4 @@ const getData = async (context: GetServerSidePropsContext) => {
   };
 };
 
-export default WithLayout({ getData, Page: LegacyPage, getLayout: null })<"P">;
+export default WithLayout({ getData, Page: NoMeetingFound, getLayout: null })<"P">;

apps/web/app/future/workflows/page.tsx

@@ -1,7 +1,6 @@
 import { _generateMetadata } from "app/_utils";
 import { WithLayout } from "app/layoutHOC";
 
-import { getLayout } from "@calcom/features/MainLayoutAppDir";
 import LegacyPage from "@calcom/features/ee/workflows/pages/index";
 
 export const generateMetadata = async () =>
@@ -10,4 +9,4 @@ export const generateMetadata = async () =>
     (t) => t("workflows_to_automate_notifications")
   );
 
-export default WithLayout({ getLayout, Page: LegacyPage })<"P">;
+export default WithLayout({ getLayout: null, Page: LegacyPage })<"P">;

apps/web/app/layout.tsx

@@ -2,11 +2,9 @@ import { dir } from "i18next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
 import { headers, cookies } from "next/headers";
-import Script from "next/script";
 import React from "react";
 
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
-import { IS_PRODUCTION } from "@calcom/lib/constants";
 
 import { prepareRootMetadata } from "@lib/metadata";
 
@@ -18,6 +16,7 @@ const calFont = localFont({
   variable: "--font-cal",
   preload: true,
   display: "block",
+  weight: "600",
 });
 
 export const generateMetadata = () =>
@@ -69,11 +68,13 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
       data-nextjs-router="app">
       <head nonce={nonce}>
-        {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
-          // eslint-disable-next-line @next/next/no-sync-scripts
-          <Script
-            data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
-            src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
+        {!!process.env.NEXT_PUBLIC_HEAD_SCRIPTS && (
+          <script
+            nonce={nonce}
+            id="injected-head-scripts"
+            dangerouslySetInnerHTML={{
+              __html: process.env.NEXT_PUBLIC_HEAD_SCRIPTS,
+            }}
           />
         )}
         <style>{`
@@ -97,6 +98,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
               }
             : {}
         }>
+        {!!process.env.NEXT_PUBLIC_BODY_SCRIPTS && (
+          <script
+            nonce={nonce}
+            id="injected-head-scripts"
+            dangerouslySetInnerHTML={{
+              __html: process.env.NEXT_PUBLIC_BODY_SCRIPTS,
+            }}
+          />
+        )}
         {children}
       </body>
     </html>

apps/web/components/PageWrapper.tsx

@@ -24,6 +24,7 @@ const calFont = localFont({
   variable: "--font-cal",
   preload: true,
   display: "swap",
+  weight: "600",
 });
 
 function PageWrapper(props: AppProps) {
@@ -75,6 +76,26 @@ function PageWrapper(props: AppProps) {
         id="page-status"
         dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
       />
+      {process.env.NEXT_PUBLIC_GTM_ID ? (
+        <>
+          <Script
+            id="gtm-init-script"
+            dangerouslySetInnerHTML={{
+              __html: `(function (w, d, s, l, i) {
+                        w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+                        var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
+                        j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
+                    })(window, document, 'script', 'dataLayer', '${process.env.NEXT_PUBLIC_GTM_ID}');`,
+            }}
+          />
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
+            }}
+          />
+        </>
+      ) : null}
+
       <style jsx global>{`
         :root {
           --font-inter: ${interFont.style.fontFamily};

apps/web/components/apps/AppList.tsx

@@ -5,7 +5,7 @@ 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 { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/enums";
 import { trpc, type RouterOutputs } from "@calcom/trpc";
@@ -154,6 +154,12 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
   });
 
   const { t } = useLocale();
+  const updateLocationsMutation = trpc.viewer.eventTypes.bulkUpdateToDefaultLocation.useMutation({
+    onSuccess: () => {
+      utils.viewer.getUsersDefaultConferencingApp.invalidate();
+      setBulkUpdateModal(false);
+    },
+  });
   return (
     <>
       <List className={listClassName}>
@@ -173,7 +179,12 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
       )}
 
       {bulkUpdateModal && (
-        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
+        <BulkEditDefaultForEventsModal
+          bulkUpdateFunction={updateLocationsMutation.mutate}
+          open={bulkUpdateModal}
+          setOpen={setBulkUpdateModal}
+          isPending={updateLocationsMutation.isPending}
+        />
       )}
     </>
   );

apps/web/components/apps/CalendarListContainer.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
@@ -15,10 +15,12 @@ import {
   AppSkeletonLoader as SkeletonLoader,
   ShellSubHeading,
   Label,
+  showToast,
 } from "@calcom/ui";
 import { Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
+import useRouterQuery from "@lib/hooks/useRouterQuery";
 
 import AppListCard from "@components/AppListCard";
 import AdditionalCalendarSelector from "@components/apps/AdditionalCalendarSelector";
@@ -182,6 +184,15 @@ function ConnectedCalendarsList(props: Props) {
 export function CalendarListContainer(props: { heading?: boolean; fromOnboarding?: boolean }) {
   const { t } = useLocale();
   const { heading = true, fromOnboarding } = props;
+  const { error, setQuery: setError } = useRouterQuery("error");
+
+  useEffect(() => {
+    if (error === "account_already_linked") {
+      showToast(t(error), "error", { id: error });
+      setError(undefined);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const utils = trpc.useContext();
   const onChanged = () =>
     Promise.allSettled([

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -2,7 +2,7 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
 import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
-import { CAL_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { AppFrontendPayload } from "@calcom/types/App";
@@ -125,7 +125,7 @@ export const InstallAppButtonChild = ({
                 StartIcon={(props) => (
                   <Avatar
                     alt={team.logo || ""}
-                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
                     {...props}
                   />

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -9,7 +9,11 @@ export default function InstalledAppsLayout({
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <Shell {...rest} hideHeadingOnMobile>
+    <Shell
+      {...rest}
+      title="Installed Apps"
+      description="Manage your installed apps or change settings"
+      hideHeadingOnMobile>
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">
         {children}
       </AppCategoryNavigation>

apps/web/components/booking/BookingListItem.tsx

@@ -162,7 +162,7 @@ function BookingListItem(booking: BookingItemProps) {
   let bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
+      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel_event"),
       /* When cancelling we need to let the UI and the API know if the intention is to
                cancel all remaining bookings or just that booking instance. */
       href: `/booking/${booking.uid}?cancel=true${
@@ -297,6 +297,8 @@ function BookingListItem(booking: BookingItemProps) {
     },
   ];
 
+  const showPendingPayment = paymentAppData.enabled && booking.payment.length && !booking.paid;
+
   return (
     <>
       <RescheduleDialog
@@ -463,7 +465,7 @@ function BookingListItem(booking: BookingItemProps) {
                   {booking.eventType.team.name}
                 </Badge>
               )}
-              {!!booking?.eventType?.price && !booking.paid && (
+              {showPendingPayment && (
                 <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
                   {t("pending_payment")}
                 </Badge>
@@ -490,8 +492,8 @@ function BookingListItem(booking: BookingItemProps) {
                 {title}
                 <span> </span>
 
-                {paymentAppData.enabled && !booking.paid && booking.payment.length && (
-                  <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
+                {showPendingPayment && (
+                  <Badge className="hidden sm:inline-flex" variant="orange">
                     {t("pending_payment")}
                   </Badge>
                 )}

apps/web/components/booking/CancelBooking.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/navigation";
 import { useCallback, useState } from "react";
 
+import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
@@ -23,13 +24,22 @@ type Props = {
   theme: string | null;
   allRemainingBookings: boolean;
   seatReferenceUid?: string;
+  bookingCancelledEventProps: {
+    booking: unknown;
+    organizer: {
+      name: string;
+      email: string;
+      timeZone?: string;
+    };
+    eventType: unknown;
+  };
 };
 
 export default function CancelBooking(props: Props) {
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
-  const { booking, allRemainingBookings, seatReferenceUid } = props;
+  const { booking, allRemainingBookings, seatReferenceUid, bookingCancelledEventProps } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
@@ -97,8 +107,17 @@ export default function CancelBooking(props: Props) {
                     method: "POST",
                   });
 
+                  const bookingWithCancellationReason = {
+                    ...(bookingCancelledEventProps.booking as object),
+                    cancellationReason,
+                  } as unknown;
+
                   if (res.status >= 200 && res.status < 300) {
                     // tested by apps/web/playwright/booking-pages.e2e.ts
+                    sdkActionManager?.fire("bookingCancelled", {
+                      ...bookingCancelledEventProps,
+                      booking: bookingWithCancellationReason,
+                    });
                     router.refresh();
                   } else {
                     setLoading(false);

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,10 +1,9 @@
+import { InfoIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import Link from "next/link";
-import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import short from "short-uuid";
-import { v5 as uuidv5 } from "uuid";
 import type { z } from "zod";
 
 import type { EventNameObjectType } from "@calcom/core/event";
@@ -16,22 +15,26 @@ import {
   allowDisablingAttendeeConfirmationEmails,
   allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
-import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
-import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/lib/constants";
+import { APP_NAME, IS_VISUAL_REGRESSION_TESTING, WEBSITE_URL } from "@calcom/lib/constants";
+import { generateHashedLink } from "@calcom/lib/generateHashedLink";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import {
   Alert,
   Button,
+  Badge,
   CheckboxField,
   Label,
+  SelectField,
   SettingsToggle,
   showToast,
+  Switch,
   TextField,
   Tooltip,
 } from "@calcom/ui";
@@ -41,31 +44,24 @@ import RequiresConfirmationController from "./RequiresConfirmationController";
 
 const CustomEventTypeModal = dynamic(() => import("@components/eventtype/CustomEventTypeModal"));
 
-const generateHashedLink = (id: number) => {
-  const translator = short();
-  const seed = `${id}:${new Date().getTime()}`;
-  const uid = translator.fromUUID(uuidv5(seed, uuidv5.URL));
-  return uid;
-};
-
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
   const { data: user } = trpc.viewer.me.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
-
   const [showEventNameTip, setShowEventNameTip] = useState(false);
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!formMethods.getValues("hashedLink"));
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!formMethods.getValues("successRedirectUrl"));
+  const [useEventTypeDestinationCalendarEmail, setUseEventTypeDestinationCalendarEmail] = useState(
+    formMethods.getValues("useEventTypeDestinationCalendarEmail")
+  );
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
-
   const bookingFields: Prisma.JsonObject = {};
 
   const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
   const selectedThemeIsDark =
     user?.theme === "dark" ||
     (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
-
   formMethods.getValues().bookingFields.forEach(({ name }) => {
     bookingFields[name] = `${name} input`;
   });
@@ -82,7 +78,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [requiresConfirmation, setRequiresConfirmation] = useState(
     formMethods.getValues("requiresConfirmation")
   );
-  const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${formMethods.getValues("slug")}`;
+  const placeholderHashedLink = `${WEBSITE_URL}/d/${hashedUrl}/${formMethods.getValues("slug")}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
   const noShowFeeEnabled =
     formMethods.getValues("metadata")?.apps?.stripe?.enabled === true &&
@@ -90,6 +86,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(formMethods.getValues("users")[0]?.id ?? team?.id));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [formMethods.getValues("users"), hashedUrl, team?.id]);
 
   const toggleGuests = (enabled: boolean) => {
@@ -107,15 +104,16 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           };
         }
         return field;
-      })
+      }),
+      { shouldDirty: true }
     );
   };
 
-  const { shouldLockDisableProps } = useLockedFieldsManager(
-    formMethods.getValues(),
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+  const { isChildrenManagedEventType, isManagedEventType, shouldLockDisableProps } = useLockedFieldsManager({
+    eventType,
+    translate: t,
+    formMethods,
+  });
   const eventNamePlaceholder = getEventName({
     ...eventNameObject,
     eventName: formMethods.watch("eventName"),
@@ -123,8 +121,24 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   const successRedirectUrlLocked = shouldLockDisableProps("successRedirectUrl");
   const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
+  const requiresBookerEmailVerificationProps = shouldLockDisableProps("requiresBookerEmailVerification");
+  const hideCalendarNotesLocked = shouldLockDisableProps("hideCalendarNotes");
+  const lockTimeZoneToggleOnBookingPageLocked = shouldLockDisableProps("lockTimeZoneToggleOnBookingPage");
 
   const closeEventNameTip = () => setShowEventNameTip(false);
+  const displayDestinationCalendarSelector =
+    !!connectedCalendarsQuery.data?.connectedCalendars.length && (!team || isChildrenManagedEventType);
+
+  const verifiedSecondaryEmails = [
+    {
+      label: user?.email || "",
+      value: -1,
+    },
+    ...(user?.secondaryEmails || [])
+      .filter((secondaryEmail) => !!secondaryEmail.emailVerified)
+      .map((secondaryEmail) => ({ label: secondaryEmail.email, value: secondaryEmail.id })),
+  ];
+  const selectedSecondaryEmailId = formMethods.getValues("secondaryEmailId") || -1;
 
   return (
     <div className="flex flex-col space-y-4">
@@ -134,7 +148,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        * This will fallback to each user selected destination calendar.
        */}
       <div className="border-subtle space-y-6 rounded-lg border p-6">
-        {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
+        {displayDestinationCalendarSelector && (
           <div className="flex flex-col">
             <div className="flex justify-between">
               <div>
@@ -172,6 +186,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               <Button
                 color="minimal"
                 size="sm"
+                {...(shouldLockDisableProps("eventName").disabled ? { disabled: true } : {})}
                 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)}>
@@ -180,10 +195,51 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             }
           />
         </div>
+        {displayDestinationCalendarSelector && (
+          <div className="w-full">
+            <Switch
+              tooltip={t("reconnect_calendar_to_use")}
+              label={
+                <>
+                  {t("display_add_to_calendar_organizer")}
+                  <InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
+                </>
+              }
+              checked={useEventTypeDestinationCalendarEmail}
+              onCheckedChange={(val) => {
+                setUseEventTypeDestinationCalendarEmail(val);
+                formMethods.setValue("useEventTypeDestinationCalendarEmail", val, { shouldDirty: true });
+                if (val) {
+                  showToast(t("reconnect_calendar_to_use"), "warning");
+                }
+              }}
+            />
+          </div>
+        )}
+        {!useEventTypeDestinationCalendarEmail && verifiedSecondaryEmails.length > 0 && (
+          <div className="w-full">
+            <SelectField
+              label={t("send_event_details_to")}
+              placeholder={
+                selectedSecondaryEmailId === -1 && (
+                  <span className="text-default min-w-0 overflow-hidden truncate whitespace-nowrap">
+                    <Badge variant="blue">{t("default")}</Badge> {user?.email || ""}
+                  </span>
+                )
+              }
+              onChange={(option) =>
+                formMethods.setValue("secondaryEmailId", option?.value, { shouldDirty: true })
+              }
+              value={verifiedSecondaryEmails.find(
+                (secondaryEmail) =>
+                  selectedSecondaryEmailId !== -1 && secondaryEmail.value === selectedSecondaryEmailId
+              )}
+              options={verifiedSecondaryEmails}
+            />
+          </div>
+        )}
       </div>
-
       <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
-
       <div className="border-subtle space-y-6 rounded-lg border p-6">
         <FormBuilder
           title={t("booking_questions_title")}
@@ -198,7 +254,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           }}
         />
       </div>
-
       <RequiresConfirmationController
         eventType={eventType}
         seatsEnabled={seatsEnabled}
@@ -206,7 +261,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-
       <Controller
         name="requiresBookerEmailVerification"
         render={({ field: { value, onChange } }) => (
@@ -215,14 +269,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
-            {...shouldLockDisableProps("requiresBookerEmailVerification")}
+            data-testid="requires-booker-email-verification"
+            {...requiresBookerEmailVerificationProps}
             description={t("description_requires_booker_email_verification")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
           />
         )}
       />
-
       <Controller
         name="hideCalendarNotes"
         render={({ field: { value, onChange } }) => (
@@ -230,15 +284,15 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             labelClassName="text-sm"
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
+            data-testid="disable-notes"
             title={t("disable_notes")}
-            {...shouldLockDisableProps("hideCalendarNotes")}
+            {...hideCalendarNotesLocked}
             description={t("disable_notes_description")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
           />
         )}
       />
-
       <Controller
         name="successRedirectUrl"
         render={({ field: { value, onChange } }) => (
@@ -252,6 +306,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               )}
               childrenClassName="lg:ml-0"
               title={t("redirect_success_booking")}
+              data-testid="redirect-success-booking"
               {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
               checked={redirectUrlVisible}
@@ -266,6 +321,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   labelSrOnly
                   disabled={successRedirectUrlLocked.disabled}
                   placeholder={t("external_redirect_url")}
+                  data-testid="external-redirect-url"
                   required={redirectUrlVisible}
                   type="text"
                   {...formMethods.register("successRedirectUrl")}
@@ -274,7 +330,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   className={classNames(
                     "p-1 text-sm text-orange-600",
                     formMethods.getValues("successRedirectUrl") ? "block" : "hidden"
-                  )}>
+                  )}
+                  data-testid="redirect-url-warning">
                   {t("redirect_url_warning")}
                 </div>
               </div>
@@ -282,7 +339,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
-
       <SettingsToggle
         labelClassName="text-sm"
         toggleSwitchAtTheEnd={true}
@@ -295,58 +351,60 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         title={t("enable_private_url")}
         Badge={
           <a
+            data-testid="hashedLinkCheck-info"
             target="_blank"
             rel="noreferrer"
             href="https://cal.com/docs/core-features/event-types/single-use-private-links">
             <Info className="ml-1.5 h-4 w-4 cursor-pointer" />
           </a>
         }
-        {...shouldLockDisableProps("hashedLinkCheck")}
+        {...shouldLockDisableProps("hashedLink")}
         description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
         onCheckedChange={(e) => {
-          formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
+          formMethods.setValue("hashedLink", e ? hashedUrl : undefined, { shouldDirty: true });
           setHashedLinkVisible(e);
         }}>
-        <div className="border-subtle rounded-b-lg border border-t-0 p-6">
-          {!IS_VISUAL_REGRESSION_TESTING && (
-            <TextField
-              disabled
-              name="hashedLink"
-              label={t("private_link_label")}
-              data-testid="generated-hash-url"
-              labelSrOnly
-              type="text"
-              hint={t("private_link_hint")}
-              defaultValue={placeholderHashedLink}
-              addOnSuffix={
-                <Tooltip
-                  content={
-                    formMethods.getValues("hashedLink") ? t("copy_to_clipboard") : t("enabled_after_update")
-                  }>
-                  <Button
-                    color="minimal"
-                    size="sm"
-                    type="button"
-                    className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-                    aria-label="copy link"
-                    onClick={() => {
-                      navigator.clipboard.writeText(placeholderHashedLink);
-                      if (formMethods.getValues("hashedLink")) {
-                        showToast(t("private_link_copied"), "success");
-                      } else {
-                        showToast(t("enabled_after_update_description"), "warning");
-                      }
-                    }}>
-                    <Copy className="h-4 w-4" />
-                  </Button>
-                </Tooltip>
-              }
-            />
-          )}
-        </div>
+        {!isManagedEventType && (
+          <div className="border-subtle rounded-b-lg border border-t-0 p-6">
+            {!IS_VISUAL_REGRESSION_TESTING && (
+              <TextField
+                disabled
+                name="hashedLink"
+                label={t("private_link_label")}
+                data-testid="generated-hash-url"
+                labelSrOnly
+                type="text"
+                hint={t("private_link_hint")}
+                defaultValue={placeholderHashedLink}
+                addOnSuffix={
+                  <Tooltip
+                    content={
+                      formMethods.getValues("hashedLink") ? t("copy_to_clipboard") : t("enabled_after_update")
+                    }>
+                    <Button
+                      color="minimal"
+                      size="sm"
+                      type="button"
+                      className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                      aria-label="copy link"
+                      onClick={() => {
+                        navigator.clipboard.writeText(placeholderHashedLink);
+                        if (formMethods.getValues("hashedLink")) {
+                          showToast(t("private_link_copied"), "success");
+                        } else {
+                          showToast(t("enabled_after_update_description"), "warning");
+                        }
+                      }}>
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </Tooltip>
+                }
+              />
+            )}
+          </div>
+        )}
       </SettingsToggle>
-
       <Controller
         name="seatsPerTimeSlotEnabled"
         render={({ field: { value, onChange } }) => (
@@ -369,10 +427,12 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 // Enabling seats will disable guests and requiring confirmation until fully supported
                 if (e) {
                   toggleGuests(false);
-                  formMethods.setValue("requiresConfirmation", false);
+                  formMethods.setValue("requiresConfirmation", false, { shouldDirty: true });
                   setRequiresConfirmation(false);
-                  formMethods.setValue("metadata.multipleDuration", undefined);
-                  formMethods.setValue("seatsPerTimeSlot", eventType.seatsPerTimeSlot ?? 2);
+                  formMethods.setValue("metadata.multipleDuration", undefined, { shouldDirty: true });
+                  formMethods.setValue("seatsPerTimeSlot", eventType.seatsPerTimeSlot ?? 2, {
+                    shouldDirty: true,
+                  });
                 } else {
                   formMethods.setValue("seatsPerTimeSlot", null);
                   toggleGuests(true);
@@ -398,12 +458,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                         onChange={(e) => {
                           onChange(Math.abs(Number(e.target.value)));
                         }}
+                        data-testid="seats-per-time-slot"
                       />
                       <div className="mt-4">
                         <Controller
                           name="seatsShowAttendees"
                           render={({ field: { value, onChange } }) => (
                             <CheckboxField
+                              data-testid="show-attendees"
                               description={t("show_attendees")}
                               disabled={seatsLocked.disabled}
                               onChange={(e) => onChange(e)}
@@ -442,10 +504,11 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("lock_timezone_toggle_on_booking_page")}
-            {...shouldLockDisableProps("lockTimeZoneToggleOnBookingPage")}
+            {...lockTimeZoneToggleOnBookingPageLocked}
             description={t("description_lock_timezone_toggle_on_booking_page")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
+            data-testid="lock-timezone-toggle"
           />
         )}
       />
@@ -489,7 +552,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       {showEventNameTip && (
         <CustomEventTypeModal
           close={closeEventNameTip}
-          setValue={(val: string) => formMethods.setValue("eventName", val)}
+          setValue={(val: string) => formMethods.setValue("eventName", val, { shouldDirty: true })}
           defaultValue={formMethods.getValues("eventName")}
           placeHolder={eventNamePlaceholder}
           event={eventNameObject}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,6 +1,6 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
 import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
@@ -8,6 +8,7 @@ import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCard
 import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import type { EventTypeAppsList } from "@calcom/app-store/utils";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen, Alert } from "@calcom/ui";
@@ -31,10 +32,14 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
   const allAppsData = formMethods.watch("metadata")?.apps || {};
 
   const setAllAppsData = (_allAppsData: typeof allAppsData) => {
-    formMethods.setValue("metadata", {
-      ...formMethods.getValues("metadata"),
-      apps: _allAppsData,
-    });
+    formMethods.setValue(
+      "metadata",
+      {
+        ...formMethods.getValues("metadata"),
+        apps: _allAppsData,
+      },
+      { shouldDirty: true }
+    );
   };
 
   const getAppDataGetter = (appId: EventTypeAppsList): GetAppData => {
@@ -70,11 +75,13 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     };
   };
 
-  const { shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
+  const { shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager({
     eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+    translate: t,
+    formMethods,
+  });
+  const appsDisableProps = shouldLockDisableProps("apps", { simple: true });
+  const lockedText = appsDisableProps.isLocked ? "locked" : "unlocked";
 
   const appsWithTeamCredentials = eventTypeApps?.items.filter((app) => app.teams.length) || [];
   const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
@@ -93,7 +100,6 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
           app={app}
           eventType={eventType}
           eventTypeFormMetadata={eventTypeFormMetadata}
-          {...shouldLockDisableProps("apps")}
         />
       );
     }
@@ -117,7 +123,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
             }}
             eventType={eventType}
             eventTypeFormMetadata={eventTypeFormMetadata}
-            {...shouldLockDisableProps("apps")}
+            disabled={shouldLockDisableProps("apps").disabled}
           />
         );
       }
@@ -129,12 +135,28 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     <>
       <div>
         <div className="before:border-0">
-          {isManagedEventType && (
+          {(isManagedEventType || isChildrenManagedEventType) && (
             <Alert
-              severity="neutral"
+              severity={appsDisableProps.isLocked ? "neutral" : "green"}
               className="mb-2"
-              title={t("locked_for_members")}
-              message={t("locked_apps_description")}
+              title={
+                <Trans i18nKey={`${lockedText}_${isManagedEventType ? "for_members" : "by_team_admins"}`}>
+                  {lockedText[0].toUpperCase()}
+                  {lockedText.slice(1)} {isManagedEventType ? "for members" : "by team admins"}
+                </Trans>
+              }
+              actions={<div className="flex h-full items-center">{appsDisableProps.LockedIcon}</div>}
+              message={
+                <Trans
+                  i18nKey={`apps_${lockedText}_${
+                    isManagedEventType ? "for_members" : "by_team_admins"
+                  }_description`}>
+                  {isManagedEventType ? "Members" : "You"}{" "}
+                  {appsDisableProps.isLocked
+                    ? "will be able to see the active apps but will not be able to edit any app settings"
+                    : "will be able to see the active apps and will be able to edit any app settings"}
+                </Trans>
+              }
             />
           )}
           {!isPending && !installedApps?.length ? (
@@ -143,9 +165,9 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               headline={t("empty_installed_apps_headline")}
               description={t("empty_installed_apps_description")}
               buttonRaw={
-                isChildrenManagedEventType && !isManagedEventType ? (
+                appsDisableProps.disabled ? (
                   <Button StartIcon={Lock} color="secondary" disabled>
-                    {t("locked_by_admin")}
+                    {t("locked_by_team_admin")}
                   </Button>
                 ) : (
                   <Button target="_blank" color="secondary" href="/apps">
@@ -170,13 +192,12 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
                   app={app}
                   eventType={eventType}
                   eventTypeFormMetadata={eventTypeFormMetadata}
-                  {...shouldLockDisableProps("apps")}
                 />
               );
           })}
         </div>
       </div>
-      {!shouldLockDisableProps("apps").disabled && (
+      {!appsDisableProps.disabled && (
         <div className="bg-muted mt-6 rounded-md p-8">
           {!isPending && notInstalledApps?.length ? (
             <>

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -1,4 +1,4 @@
-import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup } from "pages/event-types/[type]";
 import { useState, memo, useEffect } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { OptionProps, SingleValueProps } from "react-select";
@@ -6,6 +6,7 @@ import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { AvailabilityOption, FormValues } from "@calcom/features/eventtypes/lib/types";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
@@ -17,13 +18,6 @@ import { ExternalLink, Globe } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
-export type AvailabilityOption = {
-  label: string;
-  value: number;
-  isDefault: boolean;
-  isManaged?: boolean;
-};
-
 const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
   const { label, isDefault, isManaged = false } = props.data;
   const { t } = useLocale();
@@ -160,12 +154,10 @@ EventTypeScheduleDetails.displayName = "EventTypeScheduleDetails";
 
 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();
-  const { shouldLockIndicator, isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
-    eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
-  const { watch, setValue, getValues } = useFormContext<FormValues>();
+  const formMethods = useFormContext<FormValues>();
+  const { shouldLockIndicator, shouldLockDisableProps, isManagedEventType, isChildrenManagedEventType } =
+    useLockedFieldsManager({ eventType, translate: t, formMethods });
+  const { watch, setValue, getValues } = formMethods;
   const watchSchedule = watch("schedule");
   const [options, setOptions] = useState<AvailabilityOption[]>([]);
 
@@ -230,7 +222,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
           : option.value === schedules.find((schedule) => schedule.isDefault)?.id
       );
 
-      setValue("availability", value);
+      setValue("availability", value, { shouldDirty: true });
     },
     [data]
   );
@@ -238,7 +230,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
 
   useEffect(() => {
     if (!availabilityValue?.value) return;
-    setValue("schedule", availabilityValue.value);
+    setValue("schedule", availabilityValue.value, { shouldDirty: true });
   }, [availabilityValue, setValue]);
 
   return (
@@ -246,7 +238,7 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
       <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")}
+          {(isManagedEventType || isChildrenManagedEventType) && shouldLockIndicator("availability")}
         </label>
         {isPending && <SelectSkeletonLoader />}
         {!isPending && (
@@ -257,10 +249,11 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
                 <Select
                   placeholder={t("select")}
                   options={options}
+                  isDisabled={shouldLockDisableProps("availability").disabled}
                   isSearchable={false}
                   onChange={(selected) => {
                     field.onChange(selected?.value || null);
-                    if (selected?.value) setValue("availability", selected);
+                    if (selected?.value) setValue("availability", selected, { shouldDirty: true });
                   }}
                   className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                   value={availabilityValue}
@@ -298,7 +291,7 @@ const UseCommonScheduleSettingsToggle = ({ eventType }: { eventType: EventTypeSe
           onCheckedChange={(checked) => {
             onChange(!checked);
             if (!checked) {
-              setValue("schedule", null);
+              setValue("schedule", null, { shouldDirty: true });
             }
           }}
           title={t("choose_common_schedule_team_event")}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,12 +1,14 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import type { FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import type { Key } from "react";
 import React, { useEffect, useState } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext } from "react-hook-form";
 import type { SingleValue } from "react-select";
 
+import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
@@ -61,7 +63,8 @@ const MinimumBookingNoticeInput = React.forwardRef<
         minimumBookingNoticeDisplayValues.type,
         "minutes",
         minimumBookingNoticeDisplayValues.value
-      )
+      ),
+      { shouldDirty: true }
     );
   }, [minimumBookingNoticeDisplayValues, setValue, passThroughProps.name]);
 
@@ -107,7 +110,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
   );
 });
 
-export const EventLimitsTab = () => {
+export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t, i18n } = useLocale();
   const formMethods = useFormContext<FormValues>();
 
@@ -128,6 +131,18 @@ export const EventLimitsTab = () => {
 
   const watchPeriodType = formMethods.watch("periodType");
 
+  const { shouldLockIndicator, shouldLockDisableProps } = useLockedFieldsManager({
+    eventType,
+    translate: t,
+    formMethods,
+  });
+
+  const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
+  const durationLimitsLocked = shouldLockDisableProps("durationLimits");
+  const onlyFirstAvailableSlotLocked = shouldLockDisableProps("onlyShowFirstAvailableSlot");
+  const periodTypeLocked = shouldLockDisableProps("periodType");
+  const offsetStartLockedProps = shouldLockDisableProps("offsetStart");
+
   const optionsPeriod = [
     { value: 0, label: t("business_days") },
     { value: 1, label: t("calendar_days") },
@@ -146,9 +161,12 @@ export const EventLimitsTab = () => {
       <div className="border-subtle space-y-6 rounded-lg 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">{t("before_event")}</Label>
+            <Label htmlFor="beforeBufferTime">
+              {t("before_event")}
+              {shouldLockIndicator("beforeBufferTime")}
+            </Label>
             <Controller
-              name="beforeBufferTime"
+              name="beforeEventBuffer"
               render={({ field: { onChange, value } }) => {
                 const beforeBufferOptions = [
                   {
@@ -166,6 +184,7 @@ export const EventLimitsTab = () => {
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
+                    isDisabled={shouldLockDisableProps("beforeBufferTime").disabled}
                     defaultValue={
                       beforeBufferOptions.find((option) => option.value === value) || beforeBufferOptions[0]
                     }
@@ -176,9 +195,12 @@ export const EventLimitsTab = () => {
             />
           </div>
           <div className="w-full">
-            <Label htmlFor="afterBufferTime">{t("after_event")}</Label>
+            <Label htmlFor="afterBufferTime">
+              {t("after_event")}
+              {shouldLockIndicator("afterBufferTime")}
+            </Label>
             <Controller
-              name="afterBufferTime"
+              name="afterEventBuffer"
               render={({ field: { onChange, value } }) => {
                 const afterBufferOptions = [
                   {
@@ -196,6 +218,7 @@ export const EventLimitsTab = () => {
                     onChange={(val) => {
                       if (val) onChange(val.value);
                     }}
+                    isDisabled={shouldLockDisableProps("afterBufferTime").disabled}
                     defaultValue={
                       afterBufferOptions.find((option) => option.value === value) || afterBufferOptions[0]
                     }
@@ -208,11 +231,20 @@ export const EventLimitsTab = () => {
         </div>
         <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="minimumBookingNotice">{t("minimum_booking_notice")}</Label>
-            <MinimumBookingNoticeInput {...formMethods.register("minimumBookingNotice")} />
+            <Label htmlFor="minimumBookingNotice">
+              {t("minimum_booking_notice")}
+              {shouldLockIndicator("minimumBookingNotice")}
+            </Label>
+            <MinimumBookingNoticeInput
+              disabled={shouldLockDisableProps("minimumBookingNotice").disabled}
+              {...formMethods.register("minimumBookingNotice")}
+            />
           </div>
           <div className="w-full">
-            <Label htmlFor="slotInterval">{t("slot_interval")}</Label>
+            <Label htmlFor="slotInterval">
+              {t("slot_interval")}
+              {shouldLockIndicator("slotInterval")}
+            </Label>
             <Controller
               name="slotInterval"
               render={() => {
@@ -229,8 +261,11 @@ export const EventLimitsTab = () => {
                 return (
                   <Select
                     isSearchable={false}
+                    isDisabled={shouldLockDisableProps("slotInterval").disabled}
                     onChange={(val) => {
-                      formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null);
+                      formMethods.setValue("slotInterval", val && (val.value || 0) > 0 ? val.value : null, {
+                        shouldDirty: true,
+                      });
                     }}
                     defaultValue={
                       slotIntervalOptions.find(
@@ -254,15 +289,20 @@ export const EventLimitsTab = () => {
               toggleSwitchAtTheEnd={true}
               labelClassName="text-sm"
               title={t("limit_booking_frequency")}
+              {...bookingLimitsLocked}
               description={t("limit_booking_frequency_description")}
               checked={isChecked}
               onCheckedChange={(active) => {
                 if (active) {
-                  formMethods.setValue("bookingLimits", {
-                    PER_DAY: 1,
-                  });
+                  formMethods.setValue(
+                    "bookingLimits",
+                    {
+                      PER_DAY: 1,
+                    },
+                    { shouldDirty: true }
+                  );
                 } else {
-                  formMethods.setValue("bookingLimits", {});
+                  formMethods.setValue("bookingLimits", {}, { shouldDirty: true });
                 }
               }}
               switchContainerClassName={classNames(
@@ -271,7 +311,12 @@ export const EventLimitsTab = () => {
               )}
               childrenClassName="lg:ml-0">
               <div className="border-subtle rounded-b-lg border border-t-0 p-6">
-                <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+                <IntervalLimitsManager
+                  disabled={bookingLimitsLocked.disabled}
+                  propertyName="bookingLimits"
+                  defaultLimit={1}
+                  step={1}
+                />
               </div>
             </SettingsToggle>
           );
@@ -279,7 +324,7 @@ export const EventLimitsTab = () => {
       />
       <Controller
         name="onlyShowFirstAvailableSlot"
-        render={({ field: { value } }) => {
+        render={({ field: { onChange, value } }) => {
           const isChecked = value;
           return (
             <SettingsToggle
@@ -288,8 +333,9 @@ export const EventLimitsTab = () => {
               title={t("limit_booking_only_first_slot")}
               description={t("limit_booking_only_first_slot_description")}
               checked={isChecked}
+              {...onlyFirstAvailableSlotLocked}
               onCheckedChange={(active) => {
-                formMethods.setValue("onlyShowFirstAvailableSlot", active ?? false);
+                onChange(active ?? false);
               }}
               switchContainerClassName={classNames(
                 "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
@@ -301,7 +347,7 @@ export const EventLimitsTab = () => {
       />
       <Controller
         name="durationLimits"
-        render={({ field: { value } }) => {
+        render={({ field: { onChange, value } }) => {
           const isChecked = Object.keys(value ?? {}).length > 0;
           return (
             <SettingsToggle
@@ -314,20 +360,22 @@ export const EventLimitsTab = () => {
               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", {
+                  onChange({
                     PER_DAY: 60,
                   });
                 } else {
-                  formMethods.setValue("durationLimits", {});
+                  onChange({});
                 }
               }}>
               <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <IntervalLimitsManager
                   propertyName="durationLimits"
                   defaultLimit={60}
+                  disabled={durationLimitsLocked.disabled}
                   step={15}
                   textFieldSuffix={t("minutes")}
                 />
@@ -338,7 +386,7 @@ export const EventLimitsTab = () => {
       />
       <Controller
         name="periodType"
-        render={({ field: { value } }) => {
+        render={({ field: { onChange, value } }) => {
           const isChecked = value && value !== "UNLIMITED";
 
           return (
@@ -352,13 +400,23 @@ export const EventLimitsTab = () => {
               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")}>
+              onCheckedChange={(bool) => {
+                if (bool && !formMethods.getValues("periodDays")) {
+                  formMethods.setValue("periodDays", 30, { shouldDirty: true });
+                }
+                return onChange(bool ? "ROLLING" : "UNLIMITED");
+              }}>
               <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <RadioGroup.Root
                   value={watchPeriodType}
-                  onValueChange={(val) => formMethods.setValue("periodType", val as PeriodType)}>
-                  {PERIOD_TYPES.map((period) => {
+                  onValueChange={(val) =>
+                    formMethods.setValue("periodType", val as PeriodType, { shouldDirty: true })
+                  }>
+                  {PERIOD_TYPES.filter((opt) =>
+                    periodTypeLocked.disabled ? watchPeriodType === opt.type : true
+                  ).map((period) => {
                     if (period.type === "UNLIMITED") return null;
                     return (
                       <div
@@ -367,12 +425,14 @@ export const EventLimitsTab = () => {
                           watchPeriodType === "UNLIMITED" && "pointer-events-none opacity-30"
                         )}
                         key={period.type}>
-                        <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>
+                        {!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" && (
@@ -382,23 +442,29 @@ export const EventLimitsTab = () => {
                               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 })}
                             />
                             <Select
                               options={optionsPeriod}
                               isSearchable={false}
-                              onChange={(opt) =>
-                                formMethods.setValue("periodCountCalendarDays", opt?.value === 1 ? "1" : "0")
-                              }
+                              isDisabled={periodTypeLocked.disabled}
+                              onChange={(opt) => {
+                                formMethods.setValue(
+                                  "periodCountCalendarDays",
+                                  opt?.value === 1 ? true : false,
+                                  { shouldDirty: true }
+                                );
+                              }}
                               name="periodCoundCalendarDays"
                               value={optionsPeriod.find((opt) => {
                                 opt.value ===
-                                  (formMethods.getValues("periodCountCalendarDays") === "1" ? 1 : 0);
+                                  (formMethods.getValues("periodCountCalendarDays") === true ? 1 : 0);
                               })}
                               defaultValue={optionsPeriod.find(
                                 (opt) =>
                                   opt.value ===
-                                  (formMethods.getValues("periodCountCalendarDays") === "1" ? 1 : 0)
+                                  (formMethods.getValues("periodCountCalendarDays") === true ? 1 : 0)
                               )}
                             />
                           </div>
@@ -407,12 +473,13 @@ export const EventLimitsTab = () => {
                           <div className="me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse">
                             <Controller
                               name="periodDates"
-                              render={() => (
+                              render={({ field: { onChange } }) => (
                                 <DateRangePicker
                                   startDate={formMethods.getValues("periodDates").startDate}
                                   endDate={formMethods.getValues("periodDates").endDate}
+                                  disabled={periodTypeLocked.disabled}
                                   onDatesChange={({ startDate, endDate }) => {
-                                    formMethods.setValue("periodDates", {
+                                    onChange({
                                       startDate,
                                       endDate,
                                     });
@@ -442,11 +509,12 @@ export const EventLimitsTab = () => {
         childrenClassName="lg:ml-0"
         title={t("offset_toggle")}
         description={t("offset_toggle_description")}
+        {...offsetStartLockedProps}
         checked={offsetToggle}
         onCheckedChange={(active) => {
           setOffsetToggle(active);
           if (!active) {
-            formMethods.setValue("offsetStart", 0);
+            formMethods.setValue("offsetStart", 0, { shouldDirty: true });
           }
         }}>
         <div className="border-subtle rounded-b-lg border border-t-0 p-6">
@@ -577,11 +645,16 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
           );
           if (!rest || !currentKeys.length) return;
           //currentDurationLimits is always defined so can be casted
-          // @ts-expect-error FIXME Fix these typings
-          setValue(propertyName, {
-            ...watchIntervalLimits,
-            [rest.value]: defaultLimit,
-          });
+
+          setValue(
+            propertyName,
+            // @ts-expect-error FIXME Fix these typings
+            {
+              ...watchIntervalLimits,
+              [rest.value]: defaultLimit,
+            },
+            { shouldDirty: true }
+          );
         };
 
         return (
@@ -611,7 +684,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                       )}
                       onLimitChange={(intervalLimitKey, val) =>
                         // @ts-expect-error FIXME Fix these typings
-                        setValue(`${propertyName}.${intervalLimitKey}`, val)
+                        setValue(`${propertyName}.${intervalLimitKey}`, val, { shouldDirty: true })
                       }
                       onDelete={(intervalLimitKey) => {
                         const current = currentIntervalLimits;

apps/web/components/eventtype/EventSetupTab.tsx

@@ -2,7 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { ErrorMessage } from "@hookform/error-message";
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext, useFieldArray } from "react-hook-form";
 import type { MultiValue } from "react-select";
@@ -11,7 +11,8 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType } 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 { CAL_URL } from "@calcom/lib/constants";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
@@ -83,7 +84,7 @@ const DescriptionEditor = ({ isEditable }: { isEditable: boolean }) => {
   return mounted ? (
     <Editor
       getText={() => md.render(formMethods.getValues("description") || "")}
-      setText={(value: string) => formMethods.setValue("description", turndown(value))}
+      setText={(value: string) => formMethods.setValue("description", turndown(value), { shouldDirty: true })}
       excludedToolbarItems={["blockType"]}
       placeholder={t("quick_video_meeting")}
       editable={isEditable}
@@ -142,12 +143,7 @@ export const EventSetupTab = (
   );
 
   const { isChildrenManagedEventType, isManagedEventType, shouldLockIndicator, shouldLockDisableProps } =
-    useLockedFieldsManager(
-      formMethods.getValues(),
-      t("locked_fields_admin_description"),
-      t("locked_fields_member_description")
-    );
-
+    useLockedFieldsManager({ eventType, translate: t, formMethods });
   const Locations = () => {
     const { t } = useLocale();
     const {
@@ -183,7 +179,6 @@ export const EventSetupTab = (
       index: number;
     }) => {
       const { eventLocationType, index, ...remainingProps } = props;
-
       if (eventLocationType?.organizerInputType === "text") {
         const { defaultValue, ...rest } = remainingProps;
 
@@ -200,6 +195,7 @@ export const EventSetupTab = (
                   required
                   onChange={onChange}
                   value={value}
+                  {...(shouldLockDisableProps("locations").disabled ? { disabled: true } : {})}
                   className="my-0"
                   {...rest}
                 />
@@ -218,6 +214,7 @@ export const EventSetupTab = (
               return (
                 <PhoneInput
                   required
+                  disabled={shouldLockDisableProps("locations").disabled}
                   placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
                   name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
                   value={value}
@@ -233,7 +230,10 @@ export const EventSetupTab = (
     };
 
     const [showEmptyLocationSelect, setShowEmptyLocationSelect] = useState(false);
-    const [selectedNewOption, setSelectedNewOption] = useState<SingleValueLocationOption | null>(null);
+    const defaultInitialLocation = defaultValue || null;
+    const [selectedNewOption, setSelectedNewOption] = useState<SingleValueLocationOption | null>(
+      defaultInitialLocation
+    );
 
     return (
       <div className="w-full">
@@ -288,16 +288,18 @@ export const EventSetupTab = (
                       }
                     }}
                   />
-                  <button
-                    data-testid={`delete-locations.${index}.type`}
-                    className="min-h-9 block h-9 px-2"
-                    type="button"
-                    onClick={() => remove(index)}
-                    aria-label={t("remove")}>
-                    <div className="h-4 w-4">
-                      <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
-                    </div>
-                  </button>
+                  {!(shouldLockDisableProps("locations").disabled && isChildrenManagedEventType) && (
+                    <button
+                      data-testid={`delete-locations.${index}.type`}
+                      className="min-h-9 block h-9 px-2"
+                      type="button"
+                      onClick={() => remove(index)}
+                      aria-label={t("remove")}>
+                      <div className="h-4 w-4">
+                        <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
+                      </div>
+                    </button>
+                  )}
                 </div>
 
                 {eventLocationType?.organizerInputType && (
@@ -318,7 +320,7 @@ export const EventSetupTab = (
                         />
                       </div>
                       <ErrorMessage
-                        errors={formMethods.formState.errors.locations?.[index]}
+                        errors={formMethods.formState.errors?.locations?.[index]}
                         name={eventLocationType.defaultValueVariable}
                         className="text-error my-1 ml-6 text-sm"
                         as="div"
@@ -329,6 +331,7 @@ export const EventSetupTab = (
                       <CheckboxField
                         name={`locations[${index}].displayLocationPublicly`}
                         data-testid="display-location"
+                        disabled={shouldLockDisableProps("locations").disabled}
                         defaultChecked={defaultLocation?.displayLocationPublicly}
                         description={t("display_location_label")}
                         onChange={(e) => {
@@ -401,7 +404,7 @@ export const EventSetupTab = (
                   The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
                   Change it{" "}
                   <Link
-                    href={`${CAL_URL}/event-types/${formMethods.getValues("id")}?tabName=advanced`}
+                    href={`${WEBAPP_URL}/event-types/${formMethods.getValues("id")}?tabName=advanced`}
                     className="underline">
                     here.
                   </Link>{" "}
@@ -412,12 +415,13 @@ export const EventSetupTab = (
           {isChildrenManagedEventType && !locationAvailable && locationDetails && (
             <p className="pl-1 text-sm leading-none text-red-600">
               {t("app_not_connected", { appName: locationDetails.name })}{" "}
-              <a className="underline" href={`${CAL_URL}/apps/${locationDetails.slug}`}>
+              <a className="underline" href={`${WEBAPP_URL}/apps/${locationDetails.slug}`}>
                 {t("connect_now")}
               </a>
             </p>
           )}
-          {validLocations.length > 0 && !isManagedEventType && !isChildrenManagedEventType && (
+          {validLocations.length > 0 && !shouldLockDisableProps("locations").disabled && (
+            //  && !isChildrenManagedEventType : Add this to hide add-location button only when location is disabled by Admin
             <li>
               <Button
                 data-testid="add-location"
@@ -444,9 +448,11 @@ export const EventSetupTab = (
 
   const lengthLockedProps = shouldLockDisableProps("length");
   const descriptionLockedProps = shouldLockDisableProps("description");
+  const urlLockedProps = shouldLockDisableProps("slug");
+  const titleLockedProps = shouldLockDisableProps("title");
   const urlPrefix = orgBranding
     ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
-    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
+    : `${WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <div>
@@ -455,20 +461,22 @@ export const EventSetupTab = (
           <TextField
             required
             label={t("title")}
-            {...shouldLockDisableProps("title")}
+            {...(isManagedEventType || isChildrenManagedEventType ? titleLockedProps : {})}
+            defaultValue={eventType.title}
             {...formMethods.register("title")}
           />
           <div>
-            <Label>
+            <Label htmlFor="editor">
               {t("description")}
-              {shouldLockIndicator("description")}
+              {(isManagedEventType || isChildrenManagedEventType) && shouldLockIndicator("description")}
             </Label>
             <DescriptionEditor isEditable={!descriptionLockedProps.disabled} />
           </div>
           <TextField
             required
             label={t("URL")}
-            {...shouldLockDisableProps("slug")}
+            {...(isManagedEventType || isChildrenManagedEventType ? urlLockedProps : {})}
+            defaultValue={eventType.slug}
             addOnLeading={
               <>
                 {urlPrefix}/
@@ -497,6 +505,7 @@ export const EventSetupTab = (
                   defaultValue={selectedMultipleDuration}
                   name="metadata.multipleDuration"
                   isSearchable={false}
+                  isDisabled={lengthLockedProps.disabled}
                   className="h-auto !min-h-[36px] text-sm"
                   options={multipleDurationOptions}
                   value={selectedMultipleDuration}
@@ -511,16 +520,16 @@ export const EventSetupTab = (
                     if (!newOptions.find((opt) => opt.value === defaultDuration?.value)) {
                       if (newOptions.length > 0) {
                         setDefaultDuration(newOptions[0]);
-                        formMethods.setValue("length", newOptions[0].value);
+                        formMethods.setValue("length", newOptions[0].value, { shouldDirty: true });
                       } else {
                         setDefaultDuration(null);
                       }
                     }
                     if (newOptions.length === 1 && defaultDuration === null) {
                       setDefaultDuration(newOptions[0]);
-                      formMethods.setValue("length", newOptions[0].value);
+                      formMethods.setValue("length", newOptions[0].value, { shouldDirty: true });
                     }
-                    formMethods.setValue("metadata.multipleDuration", values);
+                    formMethods.setValue("metadata.multipleDuration", values, { shouldDirty: true });
                   }}
                 />
               </div>
@@ -541,7 +550,7 @@ export const EventSetupTab = (
                     setDefaultDuration(
                       selectedMultipleDuration.find((opt) => opt.value === option?.value) ?? null
                     );
-                    if (option) formMethods.setValue("length", option.value);
+                    if (option) formMethods.setValue("length", option.value, { shouldDirty: true });
                   }}
                 />
               </div>
@@ -550,7 +559,8 @@ export const EventSetupTab = (
             <TextField
               required
               type="number"
-              {...lengthLockedProps}
+              data-testid="duration"
+              {...(isManagedEventType || isChildrenManagedEventType ? lengthLockedProps : {})}
               label={t("duration")}
               defaultValue={formMethods.getValues("length") ?? 15}
               {...formMethods.register("length")}
@@ -570,27 +580,32 @@ export const EventSetupTab = (
                     setMultipleDuration(undefined);
                     setSelectedMultipleDuration([]);
                     setDefaultDuration(null);
-                    formMethods.setValue("metadata.multipleDuration", undefined);
-                    formMethods.setValue("length", eventType.length);
+                    formMethods.setValue("metadata.multipleDuration", undefined, { shouldDirty: true });
+                    formMethods.setValue("length", eventType.length, { shouldDirty: true });
                   } else {
                     setMultipleDuration([]);
-                    formMethods.setValue("metadata.multipleDuration", []);
-                    formMethods.setValue("length", 0);
+                    formMethods.setValue("metadata.multipleDuration", [], { shouldDirty: true });
+                    formMethods.setValue("length", 0, { shouldDirty: true });
                   }
                 }}
               />
             </div>
           )}
         </div>
-
         <div className="border-subtle rounded-lg border p-6">
           <div>
-            <Skeleton as={Label} loadingClassName="w-16">
+            <Skeleton as={Label} loadingClassName="w-16" htmlFor="locations">
               {t("location")}
+              {/*improve shouldLockIndicator function to also accept eventType and then conditionally render
+              based on Managed Event type or not.*/}
               {shouldLockIndicator("locations")}
             </Skeleton>
-
-            <Controller name="locations" render={() => <Locations />} />
+            <Controller
+              name="locations"
+              control={formMethods.control}
+              defaultValue={eventType.locations || []}
+              render={() => <Locations />}
+            />
           </div>
         </div>
       </div>

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,17 +1,18 @@
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { useEffect, useRef } from "react";
-import type { ComponentProps } from "react";
+import type { EventTypeSetupProps, Host } from "pages/event-types/[type]";
+import { useEffect, useRef, useState } from "react";
+import type { ComponentProps, Dispatch, SetStateAction } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { Options } from "react-select";
 
 import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
-import { Label, Select } from "@calcom/ui";
+import { Label, Select, SettingsToggle } from "@calcom/ui";
 
 interface IUserToValue {
   id: number | null;
@@ -21,6 +22,13 @@ interface IUserToValue {
   email: string;
 }
 
+type TeamMember = {
+  value: string;
+  label: string;
+  avatar: string;
+  email: string;
+};
+
 const mapUserToValue = ({ id, name, username, avatar, email }: IUserToValue, pendingString: string) => ({
   value: `${id || ""}`,
   label: `${name || email || ""}${!username ? ` (${pendingString})` : ""}`,
@@ -97,6 +105,43 @@ const ChildrenEventTypesList = ({
   );
 };
 
+const AssignAllTeamMembers = ({
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
+  onActive,
+  onInactive,
+}: {
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  onActive: () => void;
+  onInactive?: () => void;
+}) => {
+  const { t } = useLocale();
+  const { setValue } = useFormContext<FormValues>();
+
+  return (
+    <Controller<FormValues>
+      name="assignAllTeamMembers"
+      render={() => (
+        <SettingsToggle
+          title={t("automatically_add_all_team_members")}
+          labelClassName="mt-0.5 font-normal"
+          checked={assignAllTeamMembers}
+          onCheckedChange={(active) => {
+            setValue("assignAllTeamMembers", active, { shouldDirty: true });
+            setAssignAllTeamMembers(active);
+            if (active) {
+              onActive();
+            } else if (!!onInactive) {
+              onInactive();
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+
 const CheckedHostField = ({
   labelText,
   placeholder,
@@ -107,18 +152,18 @@ const CheckedHostField = ({
   helperText,
   ...rest
 }: {
-  labelText: string;
+  labelText?: string;
   placeholder: string;
   isFixed: boolean;
-  value: { isFixed: boolean; userId: number }[];
-  onChange?: (options: { isFixed: boolean; userId: number }[]) => void;
+  value: Host[];
+  onChange?: (options: Host[]) => void;
   options?: Options<CheckedSelectOption>;
   helperText?: React.ReactNode | string;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
-    <div className="bg-muted flex flex-col space-y-5 p-4">
+    <div className="flex flex-col rounded-md">
       <div>
-        <Label>{labelText}</Label>
+        {labelText ? <Label>{labelText}</Label> : <></>}
         <CheckedTeamSelect
           isOptionDisabled={(option) => !!value.find((host) => host.userId.toString() === option.value)}
           onChange={(options) => {
@@ -127,23 +172,22 @@ const CheckedHostField = ({
                 options.map((option) => ({
                   isFixed,
                   userId: parseInt(option.value, 10),
+                  priority: option.priority ?? 2,
                 }))
               );
           }}
           value={(value || [])
             .filter(({ isFixed: _isFixed }) => isFixed === _isFixed)
-            .map(
-              (host) =>
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                options.find((member) => member.value === host.userId.toString())!
-            )
+            .map((host) => {
+              const option = options.find((member) => member.value === host.userId.toString());
+              return option ? { ...option, priority: host.priority ?? 2, isFixed } : options[0];
+            })
             .filter(Boolean)}
           controlShouldRenderValue={false}
           options={options}
           placeholder={placeholder}
           {...rest}
         />
-        {helperText && <p className="text-subtle text-sm">{helperText}</p>}
       </div>
     </div>
   );
@@ -161,76 +205,255 @@ const FixedHostHelper = (
   </Trans>
 );
 
+const FixedHosts = ({
+  teamMembers,
+  value,
+  onChange,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
+  isRoundRobinEvent = false,
+}: {
+  value: Host[];
+  onChange: (hosts: Host[]) => void;
+  teamMembers: TeamMember[];
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  isRoundRobinEvent?: boolean;
+}) => {
+  const { t } = useLocale();
+  const { getValues, setValue } = useFormContext<FormValues>();
+
+  const hasActiveFixedHosts = isRoundRobinEvent && getValues("hosts").some((host) => host.isFixed);
+
+  const [isDisabled, setIsDisabled] = useState(hasActiveFixedHosts);
+
+  return (
+    <div className="mt-5 rounded-lg">
+      {!isRoundRobinEvent ? (
+        <>
+          <div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
+            <Label className="mb-1 text-sm font-semibold">{t("fixed_hosts")}</Label>
+            <p className="text-subtle max-w-full break-words text-sm leading-tight">{FixedHostHelper}</p>
+          </div>
+          <div className="border-subtle rounded-b-md border border-t-0">
+            <AddMembersWithSwitch
+              teamMembers={teamMembers}
+              value={value}
+              onChange={onChange}
+              assignAllTeamMembers={assignAllTeamMembers}
+              setAssignAllTeamMembers={setAssignAllTeamMembers}
+              automaticAddAllEnabled={!isRoundRobinEvent}
+              isFixed={true}
+              onActive={() =>
+                setValue(
+                  "hosts",
+                  teamMembers.map((teamMember) => ({
+                    isFixed: true,
+                    userId: parseInt(teamMember.value, 10),
+                    priority: 2,
+                  })),
+                  { shouldDirty: true }
+                )
+              }
+            />
+          </div>
+        </>
+      ) : (
+        <SettingsToggle
+          toggleSwitchAtTheEnd={true}
+          title={t("fixed_hosts")}
+          description={FixedHostHelper}
+          checked={isDisabled}
+          labelClassName="text-sm"
+          descriptionClassName=" text-sm text-subtle"
+          onCheckedChange={(checked) => {
+            if (!checked) {
+              const rrHosts = getValues("hosts")
+                .filter((host) => !host.isFixed)
+                .sort((a, b) => (b.priority ?? 2) - (a.priority ?? 2));
+              setValue("hosts", rrHosts, { shouldDirty: true });
+            }
+            setIsDisabled(checked);
+          }}
+          childrenClassName="lg:ml-0">
+          <div className="border-subtle flex flex-col gap-6 rounded-bl-md rounded-br-md border border-t-0">
+            <AddMembersWithSwitch
+              teamMembers={teamMembers}
+              value={value}
+              onChange={onChange}
+              assignAllTeamMembers={assignAllTeamMembers}
+              setAssignAllTeamMembers={setAssignAllTeamMembers}
+              automaticAddAllEnabled={!isRoundRobinEvent}
+              isFixed={true}
+              onActive={() =>
+                setValue(
+                  "hosts",
+                  teamMembers.map((teamMember) => ({
+                    isFixed: true,
+                    userId: parseInt(teamMember.value, 10),
+                    priority: 2,
+                  })),
+                  { shouldDirty: true }
+                )
+              }
+            />
+          </div>
+        </SettingsToggle>
+      )}
+    </div>
+  );
+};
+
+const AddMembersWithSwitch = ({
+  teamMembers,
+  value,
+  onChange,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
+  automaticAddAllEnabled,
+  onActive,
+  isFixed,
+}: {
+  value: Host[];
+  onChange: (hosts: Host[]) => void;
+  teamMembers: TeamMember[];
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
+  automaticAddAllEnabled: boolean;
+  onActive: () => void;
+  isFixed: boolean;
+}) => {
+  const { t } = useLocale();
+  const { setValue } = useFormContext<FormValues>();
+
+  return (
+    <div className="rounded-md ">
+      <div className="flex flex-col rounded-md px-6 pb-2 pt-6">
+        {automaticAddAllEnabled ? (
+          <div className="mb-2">
+            <AssignAllTeamMembers
+              assignAllTeamMembers={assignAllTeamMembers}
+              setAssignAllTeamMembers={setAssignAllTeamMembers}
+              onActive={onActive}
+              onInactive={() => setValue("hosts", [], { shouldDirty: true })}
+            />
+          </div>
+        ) : (
+          <></>
+        )}
+        {!assignAllTeamMembers || !automaticAddAllEnabled ? (
+          <CheckedHostField
+            value={value}
+            onChange={onChange}
+            isFixed={isFixed}
+            options={teamMembers.sort(sortByLabel)}
+            placeholder={t("add_attendees")}
+          />
+        ) : (
+          <></>
+        )}
+      </div>
+    </div>
+  );
+};
+
 const RoundRobinHosts = ({
   teamMembers,
   value,
   onChange,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
 }: {
-  value: { isFixed: boolean; userId: number }[];
-  onChange: (hosts: { isFixed: boolean; userId: number }[]) => void;
-  teamMembers: {
-    value: string;
-    label: string;
-    avatar: string;
-    email: string;
-  }[];
+  value: Host[];
+  onChange: (hosts: Host[]) => void;
+  teamMembers: TeamMember[];
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
 }) => {
   const { t } = useLocale();
+
+  const { setValue } = useFormContext<FormValues>();
+
   return (
-    <>
-      <CheckedHostField
-        options={teamMembers.sort(sortByLabel)}
-        isFixed={true}
-        onChange={(changeValue) => {
-          onChange([...value.filter(({ isFixed }) => !isFixed), ...changeValue]);
-        }}
-        value={value}
-        placeholder={t("add_fixed_hosts")}
-        labelText={t("fixed_hosts")}
-        helperText={FixedHostHelper}
-      />
-      <CheckedHostField
-        options={teamMembers.sort(sortByLabel)}
-        onChange={(changeValue) => onChange([...value.filter(({ isFixed }) => isFixed), ...changeValue])}
-        value={value}
-        isFixed={false}
-        placeholder={t("add_attendees")}
-        labelText={t("round_robin_hosts")}
-        helperText={t("round_robin_helper")}
-      />
-    </>
+    <div className="rounded-lg ">
+      <div className="border-subtle mt-5 rounded-t-md border p-6 pb-5">
+        <Label className="mb-1 text-sm font-semibold">{t("round_robin_hosts")}</Label>
+        <p className="text-subtle max-w-full break-words text-sm leading-tight">{t("round_robin_helper")}</p>
+      </div>
+      <div className="border-subtle rounded-b-md border border-t-0">
+        <AddMembersWithSwitch
+          teamMembers={teamMembers}
+          value={value}
+          onChange={onChange}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          isFixed={false}
+          onActive={() =>
+            setValue(
+              "hosts",
+              teamMembers
+                .map((teamMember) => ({
+                  isFixed: false,
+                  userId: parseInt(teamMember.value, 10),
+                  priority: 2,
+                }))
+                .sort((a, b) => b.priority - a.priority),
+              { shouldDirty: true }
+            )
+          }
+        />
+      </div>
+    </div>
   );
 };
 
 const ChildrenEventTypes = ({
   childrenEventTypeOptions,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
 }: {
   childrenEventTypeOptions: ReturnType<typeof mapMemberToChildrenOption>[];
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
 }) => {
+  const { setValue } = useFormContext<FormValues>();
   return (
-    <Controller<FormValues>
-      name="children"
-      render={({ field: { onChange, value } }) => (
-        <ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
-      )}
-    />
+    <div className="border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6">
+      <div className="flex flex-col gap-4">
+        <AssignAllTeamMembers
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          onActive={() => setValue("children", childrenEventTypeOptions, { shouldDirty: true })}
+        />
+        {!assignAllTeamMembers ? (
+          <Controller<FormValues>
+            name="children"
+            render={({ field: { onChange, value } }) => (
+              <ChildrenEventTypesList value={value} options={childrenEventTypeOptions} onChange={onChange} />
+            )}
+          />
+        ) : (
+          <></>
+        )}
+      </div>
+    </div>
   );
 };
 
 const Hosts = ({
   teamMembers,
+  assignAllTeamMembers,
+  setAssignAllTeamMembers,
 }: {
-  teamMembers: {
-    value: string;
-    label: string;
-    avatar: string;
-    email: string;
-  }[];
+  teamMembers: TeamMember[];
+  assignAllTeamMembers: boolean;
+  setAssignAllTeamMembers: Dispatch<SetStateAction<boolean>>;
 }) => {
   const { t } = useLocale();
   const {
     control,
-    resetField,
+    setValue,
     getValues,
     formState: { submitCount },
   } = useFormContext<FormValues>();
@@ -250,10 +473,12 @@ const Hosts = ({
       initialValue.current = { hosts: getValues("hosts"), schedulingType, submitCount };
       return;
     }
-    resetField("hosts", {
-      defaultValue: initialValue.current.schedulingType === schedulingType ? initialValue.current.hosts : [],
-    });
-  }, [schedulingType, resetField, getValues, submitCount]);
+    setValue(
+      "hosts",
+      initialValue.current.schedulingType === schedulingType ? initialValue.current.hosts : [],
+      { shouldDirty: true }
+    );
+  }, [schedulingType, setValue, getValues, submitCount]);
 
   return (
     <Controller<FormValues>
@@ -261,26 +486,39 @@ const Hosts = ({
       render={({ field: { onChange, value } }) => {
         const schedulingTypeRender = {
           COLLECTIVE: (
-            <CheckedHostField
+            <FixedHosts
+              teamMembers={teamMembers}
               value={value}
               onChange={onChange}
-              isFixed={true}
-              options={teamMembers.sort(sortByLabel)}
-              placeholder={t("add_attendees")}
-              labelText={t("team")}
+              assignAllTeamMembers={assignAllTeamMembers}
+              setAssignAllTeamMembers={setAssignAllTeamMembers}
             />
           ),
           ROUND_ROBIN: (
             <>
-              <RoundRobinHosts teamMembers={teamMembers} onChange={onChange} value={value} />
-              {/*<TextField
-        required
-        type="number"
-        label={t("minimum_round_robin_hosts_count")}
-        defaultValue={1}
-        {...formMethods.register("minimumHostCount")}
-        addOnSuffix={<>{t("hosts")}</>}
-                />*/}
+              <FixedHosts
+                teamMembers={teamMembers}
+                value={value}
+                onChange={(changeValue) => {
+                  onChange([...value.filter((host: Host) => !host.isFixed), ...changeValue]);
+                }}
+                assignAllTeamMembers={assignAllTeamMembers}
+                setAssignAllTeamMembers={setAssignAllTeamMembers}
+                isRoundRobinEvent={true}
+              />
+              <RoundRobinHosts
+                teamMembers={teamMembers}
+                value={value}
+                onChange={(changeValue) => {
+                  onChange(
+                    [...value.filter((host: Host) => host.isFixed), ...changeValue].sort(
+                      (a, b) => b.priority - a.priority
+                    )
+                  );
+                }}
+                assignAllTeamMembers={assignAllTeamMembers}
+                setAssignAllTeamMembers={setAssignAllTeamMembers}
+              />
             </>
           ),
           MANAGED: <></>,
@@ -320,34 +558,61 @@ export const EventTeamTab = ({
     .filter(pendingMembers)
     .map((member) => mapUserToValue(member, t("pending")));
   const childrenEventTypeOptions = teamMembers.filter(pendingMembers).map((member) => {
-    return mapMemberToChildrenOption(member, eventType.slug, t("pending"));
+    return mapMemberToChildrenOption(
+      { ...member, eventTypes: member.eventTypes.filter((et) => et !== eventType.slug) },
+      eventType.slug,
+      t("pending")
+    );
   });
   const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
+  const { getValues, setValue } = useFormContext<FormValues>();
+  const [assignAllTeamMembers, setAssignAllTeamMembers] = useState<boolean>(
+    getValues("assignAllTeamMembers") ?? false
+  );
+
   return (
     <div>
       {team && !isManagedEventType && (
-        <div className="space-y-5">
-          <div className="flex flex-col">
-            <Label>{t("scheduling_type")}</Label>
-            <Controller<FormValues>
-              name="schedulingType"
-              render={({ field: { value, onChange } }) => (
-                <Select
-                  options={schedulingTypeOptions}
-                  value={schedulingTypeOptions.find((opt) => opt.value === value)}
-                  className="w-full"
-                  onChange={(val) => {
-                    onChange(val?.value);
-                  }}
-                />
-              )}
-            />
+        <>
+          <div className="border-subtle flex flex-col rounded-md">
+            <div className="border-subtle rounded-t-md border p-6 pb-5">
+              <Label className="mb-1 text-sm font-semibold">{t("assignment")}</Label>
+              <p className="text-subtle max-w-full break-words text-sm leading-tight">
+                {t("assignment_description")}
+              </p>
+            </div>
+            <div className="border-subtle rounded-b-md border border-t-0 p-6">
+              <Label>{t("scheduling_type")}</Label>
+              <Controller<FormValues>
+                name="schedulingType"
+                render={({ field: { value, onChange } }) => (
+                  <Select
+                    options={schedulingTypeOptions}
+                    value={schedulingTypeOptions.find((opt) => opt.value === value)}
+                    className="w-full"
+                    onChange={(val) => {
+                      onChange(val?.value);
+                      setValue("assignAllTeamMembers", false, { shouldDirty: true });
+                      setAssignAllTeamMembers(false);
+                    }}
+                  />
+                )}
+              />
+            </div>
           </div>
-          <Hosts teamMembers={teamMembersOptions} />
-        </div>
+          <Hosts
+            assignAllTeamMembers={assignAllTeamMembers}
+            setAssignAllTeamMembers={setAssignAllTeamMembers}
+            teamMembers={teamMembersOptions}
+          />
+        </>
       )}
       {team && isManagedEventType && (
-        <ChildrenEventTypes childrenEventTypeOptions={childrenEventTypeOptions} />
+        <ChildrenEventTypes
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          childrenEventTypeOptions={childrenEventTypeOptions}
+        />
       )}
     </div>
   );

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -2,18 +2,20 @@ import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 import { useRouter } from "next/navigation";
-import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
+import type { FormValues, AvailabilityOption } from "@calcom/features/eventtypes/lib/types";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
+import type { DialogProps } from "@calcom/ui";
 import {
   Button,
   ButtonGroup,
@@ -51,8 +53,6 @@ import {
   Loader,
 } from "@calcom/ui/components/icon";
 
-import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";
-
 type Props = {
   children: React.ReactNode;
   eventType: EventTypeSetupProps["eventType"];
@@ -133,6 +133,60 @@ function getNavigation({
   ];
 }
 
+function DeleteDialog({
+  isManagedEvent,
+  eventTypeId,
+  open,
+  onOpenChange,
+}: { isManagedEvent: string; eventTypeId: number } & Pick<DialogProps, "open" | "onOpenChange">) {
+  const utils = trpc.useContext();
+  const { t } = useLocale();
+  const router = useRouter();
+  const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
+    onSuccess: async () => {
+      await utils.viewer.eventTypes.invalidate();
+      showToast(t("event_type_deleted_successfully"), "success");
+      router.push("/event-types");
+      onOpenChange?.(false);
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+        onOpenChange?.(false);
+      } else if (err instanceof TRPCClientError) {
+        showToast(err.message, "error");
+      }
+    },
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <ConfirmationDialogContent
+        isPending={deleteMutation.isPending}
+        variety="danger"
+        title={t(`delete${isManagedEvent}_event_type`)}
+        confirmBtnText={t(`confirm_delete_event_type`)}
+        loadingText={t(`confirm_delete_event_type`)}
+        onConfirm={(e) => {
+          e.preventDefault();
+          deleteMutation.mutate({ id: eventTypeId });
+        }}>
+        <p className="mt-5">
+          <Trans
+            i18nKey={`delete${isManagedEvent}_event_type_description`}
+            components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
+            <ul>
+              <li>Members assigned to this event type will also have their event types deleted.</li>
+              <li>Anyone who they&apos;ve shared their link with will no longer be able to book using it.</li>
+            </ul>
+          </Trans>
+        </p>
+      </ConfirmationDialogContent>
+    </Dialog>
+  );
+}
+
 function EventTypeSingleLayout({
   children,
   eventType,
@@ -149,9 +203,8 @@ function EventTypeSingleLayout({
   bookerUrl,
   activeWebhooksNumber,
 }: Props) {
-  const utils = trpc.useContext();
   const { t } = useLocale();
-  const router = useRouter();
+
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
   const hasPermsToDelete =
@@ -160,30 +213,12 @@ function EventTypeSingleLayout({
     formMethods.getValues("schedulingType") === SchedulingType.MANAGED ||
     isUserOrganizationAdmin;
 
-  const deleteMutation = trpc.viewer.eventTypes.delete.useMutation({
-    onSuccess: async () => {
-      await utils.viewer.eventTypes.invalidate();
-      showToast(t("event_type_deleted_successfully"), "success");
-      router.push("/event-types");
-      setDeleteDialogOpen(false);
-    },
-    onError: (err) => {
-      if (err instanceof HttpError) {
-        const message = `${err.statusCode}: ${err.message}`;
-        showToast(message, "error");
-        setDeleteDialogOpen(false);
-      } else if (err instanceof TRPCClientError) {
-        showToast(err.message, "error");
-      }
-    },
+  const { isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager({
+    eventType,
+    translate: t,
+    formMethods,
   });
 
-  const { isManagedEventType, isChildrenManagedEventType } = useLockedFieldsManager(
-    formMethods.getValues(),
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
-
   const length = formMethods.watch("length");
   const multipleDuration = formMethods.watch("metadata")?.multipleDuration;
 
@@ -308,7 +343,7 @@ function EventTypeSingleLayout({
                       id="hiddenSwitch"
                       checked={!formMethods.watch("hidden")}
                       onCheckedChange={(e) => {
-                        formMethods.setValue("hidden", !e);
+                        formMethods.setValue("hidden", !e, { shouldDirty: true });
                       }}
                     />
                   </div>
@@ -352,7 +387,7 @@ function EventTypeSingleLayout({
                   StartIcon={Code}
                   color="secondary"
                   variant="icon"
-                  namespace={eventType.slug}
+                  namespace=""
                   tooltip={t("embed")}
                   tooltipSide="bottom"
                   tooltipOffset={4}
@@ -424,7 +459,7 @@ function EventTypeSingleLayout({
                   id="hiddenSwitch"
                   checked={!formMethods.watch("hidden")}
                   onCheckedChange={(e) => {
-                    formMethods.setValue("hidden", !e);
+                    formMethods.setValue("hidden", !e, { shouldDirty: true });
                   }}
                 />
               </div>
@@ -435,6 +470,7 @@ function EventTypeSingleLayout({
             className="ml-4 lg:ml-0"
             type="submit"
             loading={isUpdateMutationLoading}
+            disabled={!formMethods.formState.isDirty}
             data-testid="update-eventtype"
             form="event-type-form">
             {t("save")}
@@ -467,31 +503,13 @@ function EventTypeSingleLayout({
           </div>
         </div>
       </Suspense>
-      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
-        <ConfirmationDialogContent
-          isPending={deleteMutation.isPending}
-          variety="danger"
-          title={t(`delete${isManagedEvent}_event_type`)}
-          confirmBtnText={t(`confirm_delete_event_type`)}
-          loadingText={t(`confirm_delete_event_type`)}
-          onConfirm={(e) => {
-            e.preventDefault();
-            deleteMutation.mutate({ id: formMethods.getValues("id") });
-          }}>
-          <p className="mt-5">
-            <Trans
-              i18nKey={`delete${isManagedEvent}_event_type_description`}
-              components={{ li: <li />, ul: <ul className="ml-4 list-disc" /> }}>
-              <ul>
-                <li>Members assigned to this event type will also have their event types deleted.</li>
-                <li>
-                  Anyone who they&apos;ve shared their link with will no longer be able to book using it.
-                </li>
-              </ul>
-            </Trans>
-          </p>
-        </ConfirmationDialogContent>
-      </Dialog>
+      <DeleteDialog
+        eventTypeId={eventType.id}
+        isManagedEvent={isManagedEvent}
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+      />
+
       <EventTypeEmbedDialog />
     </Shell>
   );

apps/web/components/eventtype/EventWebhooksTab.tsx

@@ -4,8 +4,10 @@ import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
@@ -20,6 +22,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
   const { t } = useLocale();
 
   const utils = trpc.useContext();
+  const formMethods = useFormContext<FormValues>();
 
   const { data: webhooks } = trpc.viewer.webhook.list.useQuery({ eventTypeId: eventType.id });
 
@@ -96,11 +99,11 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
     );
   };
 
-  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager(
+  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager({
     eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+    translate: t,
+    formMethods,
+  });
   const webhookLockedStatus = shouldLockDisableProps("webhooks");
 
   return (
@@ -163,7 +166,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                     buttonRaw={
                       isChildrenManagedEventType && !isManagedEventType ? (
                         <Button StartIcon={Lock} color="secondary" disabled>
-                          {t("locked_by_admin")}
+                          {t("locked_by_team_admin")}
                         </Button>
                       ) : (
                         <NewWebhookButton />

apps/web/components/eventtype/InstantEventController.tsx

@@ -1,11 +1,12 @@
 import type { Webhook } from "@prisma/client";
 import { useSession } from "next-auth/react";
-import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup } from "pages/event-types/[type]";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
@@ -33,11 +34,7 @@ export default function InstantEventController({
   const [instantEventState, setInstantEventState] = useState<boolean>(eventType?.isInstantEvent ?? false);
   const formMethods = useFormContext<FormValues>();
 
-  const { shouldLockDisableProps } = useLockedFieldsManager(
-    eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+  const { shouldLockDisableProps } = useLockedFieldsManager({ eventType, translate: t, formMethods });
 
   const instantLocked = shouldLockDisableProps("isInstantEvent");
 
@@ -81,10 +78,10 @@ export default function InstantEventController({
                   data-testid="instant-event-check"
                   onCheckedChange={(e) => {
                     if (!e) {
-                      formMethods.setValue("isInstantEvent", false);
+                      formMethods.setValue("isInstantEvent", false, { shouldDirty: true });
                       setInstantEventState(false);
                     } else {
-                      formMethods.setValue("isInstantEvent", true);
+                      formMethods.setValue("isInstantEvent", true, { shouldDirty: true });
                       setInstantEventState(true);
                     }
                   }}>
@@ -104,6 +101,8 @@ export default function InstantEventController({
 const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();
   const utils = trpc.useContext();
+  const formMethods = useFormContext<FormValues>();
+
   const { data: webhooks } = trpc.viewer.webhook.list.useQuery({
     eventTypeId: eventType.id,
     eventTriggers: [WebhookTriggerEvents.INSTANT_MEETING],
@@ -179,11 +178,11 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
     );
   };
 
-  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager(
+  const { shouldLockDisableProps, isChildrenManagedEventType, isManagedEventType } = useLockedFieldsManager({
     eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+    formMethods,
+    translate: t,
+  });
   const webhookLockedStatus = shouldLockDisableProps("webhooks");
 
   return (

apps/web/components/eventtype/RecurringEventController.tsx

@@ -1,8 +1,9 @@
-import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup } from "pages/event-types/[type]";
 import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
@@ -31,11 +32,7 @@ export default function RecurringEventController({
       value: value.toString(),
     }));
 
-  const { shouldLockDisableProps } = useLockedFieldsManager(
-    eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+  const { shouldLockDisableProps } = useLockedFieldsManager({ eventType, translate: t, formMethods });
 
   const recurringLocked = shouldLockDisableProps("recurringEvent");
 
@@ -66,7 +63,7 @@ export default function RecurringEventController({
               data-testid="recurring-event-check"
               onCheckedChange={(e) => {
                 if (!e) {
-                  formMethods.setValue("recurringEvent", null);
+                  formMethods.setValue("recurringEvent", null, { shouldDirty: true });
                   setRecurringEventState(null);
                 } else {
                   const newVal = eventType.recurringEvent || {
@@ -74,7 +71,7 @@ export default function RecurringEventController({
                     count: 12,
                     freq: Frequency.WEEKLY,
                   };
-                  formMethods.setValue("recurringEvent", newVal);
+                  formMethods.setValue("recurringEvent", newVal, { shouldDirty: true });
                   setRecurringEventState(newVal);
                 }
               }}>
@@ -95,7 +92,7 @@ export default function RecurringEventController({
                             ...recurringEventState,
                             interval: parseInt(event?.target.value),
                           };
-                          formMethods.setValue("recurringEvent", newVal);
+                          formMethods.setValue("recurringEvent", newVal, { shouldDirty: true });
                           setRecurringEventState(newVal);
                         }}
                       />
@@ -110,7 +107,7 @@ export default function RecurringEventController({
                             ...recurringEventState,
                             freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
                           };
-                          formMethods.setValue("recurringEvent", newVal);
+                          formMethods.setValue("recurringEvent", newVal, { shouldDirty: true });
                           setRecurringEventState(newVal);
                         }}
                       />
@@ -129,7 +126,7 @@ export default function RecurringEventController({
                             ...recurringEventState,
                             count: parseInt(event?.target.value),
                           };
-                          formMethods.setValue("recurringEvent", newVal);
+                          formMethods.setValue("recurringEvent", newVal, { shouldDirty: true });
                           setRecurringEventState(newVal);
                         }}
                       />

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -1,13 +1,14 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { UnitTypeLongPlural } from "dayjs";
 import { Trans } from "next-i18next";
-import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetup } from "pages/event-types/[type]";
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type z from "zod";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
@@ -37,16 +38,12 @@ export default function RequiresConfirmationController({
 
   useEffect(() => {
     if (!requiresConfirmation) {
-      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined, { shouldDirty: true });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [requiresConfirmation]);
 
-  const { shouldLockDisableProps } = useLockedFieldsManager(
-    eventType,
-    t("locked_fields_admin_description"),
-    t("locked_fields_member_description")
-  );
+  const { shouldLockDisableProps } = useLockedFieldsManager({ eventType, translate: t, formMethods });
   const requiresConfirmationLockedProps = shouldLockDisableProps("requiresConfirmation");
 
   const options = [
@@ -75,13 +72,14 @@ export default function RequiresConfirmationController({
               )}
               childrenClassName="lg:ml-0"
               title={t("requires_confirmation")}
+              data-testid="requires-confirmation"
               disabled={seatsEnabled || requiresConfirmationLockedProps.disabled}
               tooltip={seatsEnabled ? t("seat_options_doesnt_support_confirmation") : undefined}
               description={t("requires_confirmation_description")}
               checked={requiresConfirmation}
               LockedIcon={requiresConfirmationLockedProps.LockedIcon}
               onCheckedChange={(val) => {
-                formMethods.setValue("requiresConfirmation", val);
+                formMethods.setValue("requiresConfirmation", val, { shouldDirty: true });
                 onRequiresConfirmation(val);
               }}>
               <div className="border-subtle rounded-b-lg border border-t-0 p-6">
@@ -95,16 +93,19 @@ export default function RequiresConfirmationController({
                   }
                   onValueChange={(val) => {
                     if (val === "always") {
-                      formMethods.setValue("requiresConfirmation", true);
+                      formMethods.setValue("requiresConfirmation", true, { shouldDirty: true });
                       onRequiresConfirmation(true);
-                      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+                      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined, {
+                        shouldDirty: true,
+                      });
                       setRequiresConfirmationSetup(undefined);
                     } else if (val === "notice") {
-                      formMethods.setValue("requiresConfirmation", true);
+                      formMethods.setValue("requiresConfirmation", true, { shouldDirty: true });
                       onRequiresConfirmation(true);
                       formMethods.setValue(
                         "metadata.requiresConfirmationThreshold",
-                        requiresConfirmationSetup || defaultRequiresConfirmationSetup
+                        requiresConfirmationSetup || defaultRequiresConfirmationSetup,
+                        { shouldDirty: true }
                       );
                     }
                   }}>
@@ -145,7 +146,8 @@ export default function RequiresConfirmationController({
                                         });
                                         formMethods.setValue(
                                           "metadata.requiresConfirmationThreshold.time",
-                                          val
+                                          val,
+                                          { shouldDirty: true }
                                         );
                                       }}
                                       className="border-default !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r"
@@ -170,7 +172,8 @@ export default function RequiresConfirmationController({
                                           });
                                           formMethods.setValue(
                                             "metadata.requiresConfirmationThreshold.unit",
-                                            opt?.value as UnitTypeLongPlural
+                                            opt?.value as UnitTypeLongPlural,
+                                            { shouldDirty: true }
                                           );
                                         }}
                                         defaultValue={defaultValue}

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

@@ -8,7 +8,6 @@ import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
-import type { Ensure } from "@calcom/types/utils";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
 import { UserAvatar } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
@@ -38,7 +37,7 @@ const UserProfile = () => {
       if (context.avatar) {
         showToast(t("your_user_profile_updated_successfully"), "success");
         await utils.viewer.me.refetch();
-      } else {
+      } else
         try {
           if (eventTypes?.length === 0) {
             await Promise.all(
@@ -51,9 +50,11 @@ const UserProfile = () => {
           console.error(error);
         }
 
-        await utils.viewer.me.refetch();
-        router.push("/");
-      }
+      await utils.viewer.me.refetch();
+      const redirectUrl = localStorage.getItem("onBoardingRedirect");
+      localStorage.removeItem("onBoardingRedirect");
+
+      redirectUrl ? router.push(redirectUrl) : router.push("/");
     },
     onError: () => {
       showToast(t("problem_saving_user_profile"), "error");
@@ -97,18 +98,10 @@ const UserProfile = () => {
     },
   ];
 
-  const organization =
-    user.organization && user.organization.id
-      ? {
-          ...(user.organization as Ensure<typeof user.organization, "id">),
-          slug: user.organization.slug || null,
-          requestedSlug: user.organization.metadata?.requestedSlug || null,
-        }
-      : null;
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
-        {user && <UserAvatar size="lg" user={user} previewSrc={imageSrc} organization={organization} />}
+        {user && <UserAvatar size="lg" user={user} previewSrc={imageSrc} />}
         <input
           ref={avatarRef}
           type="hidden"

apps/web/components/settings/CustomEmailTextField.tsx

@@ -0,0 +1,127 @@
+import type { FormValues } from "@pages/settings/my-account/profile";
+import { useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import {
+  Badge,
+  TextField,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Button,
+  InputError,
+} from "@calcom/ui";
+import { MoreHorizontal, Flag, Trash, Send } from "@calcom/ui/components/icon";
+
+type CustomEmailTextFieldProps = {
+  formMethods: UseFormReturn<FormValues>;
+  formMethodFieldName: keyof FormValues;
+  errorMessage: string;
+  emailVerified: boolean;
+  emailPrimary: boolean;
+  dataTestId: string;
+  handleChangePrimary: () => void;
+  handleVerifyEmail: () => void;
+  handleItemDelete: () => void;
+};
+
+const CustomEmailTextField = ({
+  formMethods,
+  formMethodFieldName,
+  errorMessage,
+  emailVerified,
+  emailPrimary,
+  dataTestId,
+  handleChangePrimary,
+  handleVerifyEmail,
+  handleItemDelete,
+}: CustomEmailTextFieldProps) => {
+  const { t } = useLocale();
+  const [inputFocus, setInputFocus] = useState(false);
+
+  return (
+    <>
+      <div
+        className={`border-default mt-2 flex items-center rounded-md border ${
+          inputFocus ? "ring-brand-default border-neutral-300 ring-2" : ""
+        }`}>
+        <TextField
+          {...formMethods.register(formMethodFieldName)}
+          label=""
+          containerClassName="flex flex-1 items-center"
+          className="mb-0 border-none outline-none focus:ring-0"
+          data-testid={dataTestId}
+          onFocus={() => setInputFocus(true)}
+          onBlur={() => setInputFocus(false)}
+        />
+        <div className="flex items-center pr-2">
+          {emailPrimary && (
+            <Badge variant="blue" size="sm" data-testid={`${dataTestId}-primary-badge`}>
+              {t("primary")}
+            </Badge>
+          )}
+          {!emailVerified && (
+            <Badge variant="orange" size="sm" className="ml-2" data-testid={`${dataTestId}-unverified-badge`}>
+              {t("unverified")}
+            </Badge>
+          )}
+          <Dropdown>
+            <DropdownMenuTrigger asChild>
+              <Button
+                StartIcon={MoreHorizontal}
+                variant="icon"
+                size="sm"
+                color="secondary"
+                className="ml-2 rounded-md"
+                data-testid="secondary-email-action-group-button"
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                <DropdownItem
+                  StartIcon={Flag}
+                  color="secondary"
+                  className="disabled:opacity-40"
+                  onClick={handleChangePrimary}
+                  disabled={!emailVerified || emailPrimary}
+                  data-testid="secondary-email-make-primary-button">
+                  {t("make_primary")}
+                </DropdownItem>
+              </DropdownMenuItem>
+              {!emailVerified && (
+                <DropdownMenuItem>
+                  <DropdownItem
+                    StartIcon={Send}
+                    color="secondary"
+                    className="disabled:opacity-40"
+                    onClick={handleVerifyEmail}
+                    disabled={emailVerified}
+                    data-testid="resend-verify-email-button">
+                    {t("resend_email")}
+                  </DropdownItem>
+                </DropdownMenuItem>
+              )}
+              <DropdownMenuItem>
+                <DropdownItem
+                  StartIcon={Trash}
+                  color="destructive"
+                  className="disabled:opacity-40"
+                  onClick={handleItemDelete}
+                  disabled={emailPrimary}
+                  data-testid="secondary-email-delete-button">
+                  {t("delete")}
+                </DropdownItem>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </Dropdown>
+        </div>
+      </div>
+      {errorMessage && <InputError message={errorMessage} />}
+    </>
+  );
+};
+
+export default CustomEmailTextField;

apps/web/components/settings/SecondaryEmailConfirmModal.tsx

@@ -0,0 +1,31 @@
+import { Trans } from "react-i18next";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui";
+
+interface SecondaryEmailConfirmModalProps {
+  email: string;
+  onCancel: () => void;
+}
+
+const SecondaryEmailConfirmModal = ({ email, onCancel }: SecondaryEmailConfirmModalProps) => {
+  const { t } = useLocale();
+
+  return (
+    <Dialog open={true}>
+      <DialogContent
+        title={t("confirm_email")}
+        description={<Trans i18nKey="confirm_email_description" values={{ email }} />}
+        type="creation"
+        data-testid="secondary-email-confirm-dialog">
+        <DialogFooter>
+          <DialogClose color="primary" onClick={onCancel} data-testid="secondary-email-confirm-done-button">
+            {t("done")}
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SecondaryEmailConfirmModal;

apps/web/components/settings/SecondaryEmailModal.tsx

@@ -0,0 +1,77 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  Button,
+  TextField,
+  Form,
+  InputError,
+} from "@calcom/ui";
+
+interface SecondaryEmailModalProps {
+  isLoading: boolean;
+  errorMessage?: string;
+  handleAddEmail: (value: { email: string }) => void;
+  onCancel: () => void;
+  clearErrorMessage: () => void;
+}
+
+const SecondaryEmailModal = ({
+  isLoading,
+  errorMessage,
+  handleAddEmail,
+  onCancel,
+  clearErrorMessage,
+}: SecondaryEmailModalProps) => {
+  const { t } = useLocale();
+  type FormValues = {
+    email: string;
+  };
+  const formMethods = useForm<FormValues>({
+    resolver: zodResolver(
+      z.object({
+        email: z.string().email(),
+      })
+    ),
+  });
+
+  useEffect(() => {
+    // We will reset the errorMessage once the user starts modifying the email
+    const subscription = formMethods.watch(() => clearErrorMessage());
+    return () => subscription.unsubscribe();
+  }, [formMethods.watch]);
+
+  return (
+    <Dialog open={true}>
+      <DialogContent
+        title={t("add_email")}
+        description={t("add_email_description")}
+        type="creation"
+        data-testid="secondary-email-add-dialog">
+        <Form form={formMethods} handleSubmit={handleAddEmail}>
+          <TextField
+            label={t("email_address")}
+            data-testid="secondary-email-input"
+            {...formMethods.register("email")}
+          />
+          {errorMessage && <InputError message={errorMessage} />}
+          <DialogFooter showDivider className="mt-10">
+            <DialogClose onClick={onCancel}>{t("cancel")}</DialogClose>
+            <Button type="submit" data-testid="add-secondary-email-button" disabled={isLoading}>
+              {t("add_email")}
+            </Button>
+          </DialogFooter>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default SecondaryEmailModal;

apps/web/components/setup/AdminUser.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { signIn } from "next-auth/react";
 import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
-import * as z from "zod";
+import { z } from "zod";
 
 import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";

apps/web/components/setup/EnterpriseLicense.tsx

@@ -3,7 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { noop } from "lodash";
 import { useCallback, useState } from "react";
 import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
-import * as z from "zod";
+import { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { CONSOLE_URL } from "@calcom/lib/constants";

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

@@ -5,11 +5,16 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
+import type { UserProfile } from "@calcom/types/UserProfile";
 import { UserAvatar } from "@calcom/ui";
 
 type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
-type MemberType = Pick<MembersType[number], "id" | "name" | "bio" | "username" | "organizationId"> & {
+type MemberType = Pick<
+  MembersType[number],
+  "id" | "name" | "bio" | "username" | "organizationId" | "avatarUrl"
+> & {
+  profile: Omit<UserProfile, "upId">;
   safeBio: string | null;
   bookerUrl: string;
 };
@@ -27,7 +32,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
       key={member.id}
       href={{ pathname: `${member.bookerUrl}/${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">
-        <UserAvatar size="md" user={member} />
+        <UserAvatar noOrganizationIndicator size="md" user={member} />
         <section className="mt-2 line-clamp-4 w-full space-y-1">
           <p className="text-default font-medium">{member.name}</p>
           <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">

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

@@ -160,7 +160,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
               <div className="bg-subtle flex w-full flex-wrap gap-6 rounded-sm px-2 py-3 text-sm">
                 <div>
                   <p className="text-subtle">{t("current_username")}</p>
-                  <p className="text-emphasis mt-1" data-testid="current-username">
+                  <p className="text-emphasis mt-1 break-all" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
@@ -168,7 +168,10 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
                   <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-                  <p className="text-emphasis mt-1">{inputUsernameValue}</p>
+
+                  <p className="text-emphasis min-h-5 mt-1 max-h-12 overflow-y-auto break-all">
+                    {inputUsernameValue}
+                  </p>
                 </div>
               </div>
             </div>

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

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { WEBSITE_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
@@ -45,7 +45,7 @@ export const UsernameAvailabilityField = ({
 
   const usernamePrefix = orgBranding
     ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
-    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
+    : `${WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <Controller

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

@@ -34,6 +34,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
     <Select<LocationOption>
       name="location"
       id="location-select"
+      data-testid="location-select"
       components={{
         Option: (props) => {
           return (