chore: add instruction for #12821 (#13713)

* Updated useTypedQuery to store values to localstorage

* removed the redundant function params

---------

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

.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

.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/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,5 @@
+import { ChatOpenAI } from "@langchain/openai";
 import { initializeAgentExecutorWithOptions } from "langchain/agents";
-import { ChatOpenAI } from "langchain/chat_models/openai";
 
 import { env } from "../env.mjs";
 import createBookingIfAvailable from "../tools/createBooking";
@@ -13,7 +13,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.

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/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/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/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

@@ -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/insights/getServerSideProps";
 import { type inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -16,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/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/eventtype/EventAdvancedTab.tsx

@@ -3,8 +3,6 @@ import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import short from "short-uuid";
-import { v5 as uuidv5 } from "uuid";
 import type { z } from "zod";
 
 import type { EventNameObjectType } from "@calcom/core/event";
@@ -20,8 +18,8 @@ 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";
@@ -32,6 +30,7 @@ import {
   Label,
   SettingsToggle,
   showToast,
+  Switch,
   TextField,
   Tooltip,
 } from "@calcom/ui";
@@ -41,22 +40,17 @@ 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 = {};
@@ -82,7 +76,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 &&
@@ -125,6 +119,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const seatsLocked = shouldLockDisableProps("seatsPerTimeSlotEnabled");
 
   const closeEventNameTip = () => setShowEventNameTip(false);
+  const displayDestinationCalendarSelector =
+    !!connectedCalendarsQuery.data?.connectedCalendars.length && !team;
 
   return (
     <div className="flex flex-col space-y-4">
@@ -134,7 +130,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>
@@ -180,6 +176,18 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             }
           />
         </div>
+        {displayDestinationCalendarSelector && (
+          <div className="w-full">
+            <Switch
+              label={`${t("display_add_to_calendar_organizer")}. ${t("reconnect_calendar_to_use")} `}
+              checked={useEventTypeDestinationCalendarEmail}
+              onCheckedChange={(val) => {
+                setUseEventTypeDestinationCalendarEmail(val);
+                formMethods.setValue("useEventTypeDestinationCalendarEmail", val);
+              }}
+            />
+          </div>
+        )}
       </div>
 
       <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
@@ -215,6 +223,7 @@ 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")}
+            data-testid="requires-booker-email-verification"
             {...shouldLockDisableProps("requiresBookerEmailVerification")}
             description={t("description_requires_booker_email_verification")}
             checked={value}
@@ -231,6 +240,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             toggleSwitchAtTheEnd={true}
             switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("disable_notes")}
+            data-testid="disable-notes"
             {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
             checked={value}
@@ -252,6 +262,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 +277,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 +286,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>
@@ -295,6 +308,7 @@ 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">
@@ -398,12 +412,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)}
@@ -446,6 +462,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             description={t("description_lock_timezone_toggle_on_booking_page")}
             checked={value}
             onCheckedChange={(e) => onChange(e)}
+            data-testid="lock-timezone-toggle"
           />
         )}
       />

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -146,9 +146,9 @@ 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="beforeEventBuffer">{t("before_event")}</Label>
             <Controller
-              name="beforeBufferTime"
+              name="beforeEventBuffer"
               render={({ field: { onChange, value } }) => {
                 const beforeBufferOptions = [
                   {
@@ -176,9 +176,9 @@ export const EventLimitsTab = () => {
             />
           </div>
           <div className="w-full">
-            <Label htmlFor="afterBufferTime">{t("after_event")}</Label>
+            <Label htmlFor="afterEventBuffer">{t("after_event")}</Label>
             <Controller
-              name="afterBufferTime"
+              name="afterEventBuffer"
               render={({ field: { onChange, value } }) => {
                 const afterBufferOptions = [
                   {

apps/web/components/eventtype/EventSetupTab.tsx

@@ -11,7 +11,7 @@ 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 { 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";
@@ -401,7 +401,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,7 +412,7 @@ 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>
@@ -444,9 +444,10 @@ export const EventSetupTab = (
 
   const lengthLockedProps = shouldLockDisableProps("length");
   const descriptionLockedProps = shouldLockDisableProps("description");
+
   const urlPrefix = orgBranding
     ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
-    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;
+    : `${WEBSITE_URL?.replace(/^(https?:|)\/\//, "")}`;
 
   return (
     <div>

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,8 +1,8 @@
 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, FormValues, 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";
 
@@ -11,7 +11,7 @@ import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTea
 import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 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 +21,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 +104,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);
+            setAssignAllTeamMembers(active);
+            if (active) {
+              onActive();
+            } else if (!!onInactive) {
+              onInactive();
+            }
+          }}
+        />
+      )}
+    />
+  );
+};
+
 const CheckedHostField = ({
   labelText,
   placeholder,
@@ -107,18 +151,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 +171,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,71 +204,247 @@ 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,
+                  }))
+                )
+              }
+            />
+          </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);
+            }
+            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,
+                  }))
+                )
+              }
+            />
+          </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", [])}
+            />
+          </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)
+            )
+          }
+        />
+      </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)}
+        />
+        {!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 {
@@ -261,26 +480,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 +552,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);
+                      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

@@ -352,7 +352,7 @@ function EventTypeSingleLayout({
                   StartIcon={Code}
                   color="secondary"
                   variant="icon"
-                  namespace={eventType.slug}
+                  namespace=""
                   tooltip={t("embed")}
                   tooltipSide="bottom"
                   tooltipOffset={4}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -75,6 +75,7 @@ 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")}

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";
@@ -97,18 +96,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/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/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 (

apps/web/lib/booking.ts

@@ -1,4 +1,5 @@
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
+import { bookingResponsesDbSchema } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
 import prisma from "@calcom/prisma";
 import type { Prisma } from "@calcom/prisma/client";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -115,21 +116,23 @@ export const handleSeatsEventTypeOnBooking = async (
     }>
   >,
   seatReferenceUid?: string,
-  userId?: number
+  isHost?: boolean
 ) => {
-  if (eventType?.seatsPerTimeSlot !== null) {
-    // @TODO: right now bookings with seats doesn't save every description that its entered by every user
-    delete bookingInfo.description;
-  } else {
-    return;
-  }
-  // @TODO: If handling teams, we need to do more check ups for this.
-  if (bookingInfo?.user?.id === userId) {
-    return;
-  }
-
-  if (!eventType.seatsShowAttendees) {
-    const seatAttendee = await prisma.bookingSeat.findFirst({
+  bookingInfo["responses"] = {};
+  type seatAttendee = {
+    attendee: {
+      email: string;
+      name: string;
+    };
+    id: number;
+    data: Prisma.JsonValue;
+    bookingId: number;
+    attendeeId: number;
+    referenceUid: string;
+  } | null;
+  let seatAttendee: seatAttendee = null;
+  if (seatReferenceUid) {
+    seatAttendee = await prisma.bookingSeat.findFirst({
       where: {
         referenceUid: seatReferenceUid,
       },
@@ -142,16 +145,31 @@ export const handleSeatsEventTypeOnBooking = async (
         },
       },
     });
+  }
+  if (seatAttendee) {
+    const seatAttendeeData = seatAttendee.data as unknown as {
+      description?: string;
+      responses: Prisma.JsonValue;
+    };
+    bookingInfo["description"] = seatAttendeeData.description ?? null;
+    bookingInfo["responses"] = bookingResponsesDbSchema.parse(seatAttendeeData.responses ?? {});
+  }
 
+  if (!eventType.seatsShowAttendees && !isHost) {
     if (seatAttendee) {
       const attendee = bookingInfo?.attendees?.find((a) => {
-        return a.email === seatAttendee.attendee?.email;
+        return a.email === seatAttendee?.attendee?.email;
       });
       bookingInfo["attendees"] = attendee ? [attendee] : [];
     } else {
       bookingInfo["attendees"] = [];
     }
   }
+
+  // // @TODO: If handling teams, we need to do more check ups for this.
+  // if (bookingInfo?.user?.id === userId) {
+  //   return;
+  // }
   return bookingInfo;
 };
 

apps/web/lib/d/[link]/[slug]/getServerSideProps.tsx

@@ -5,6 +5,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
@@ -56,19 +57,9 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     return notFound;
   }
 
-  const user = await prisma.user.findFirst({
-    where: {
-      username,
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
-    },
-    select: {
-      away: true,
-      hideBranding: true,
-    },
+  const [user] = await UserRepository.findUsersByUsername({
+    usernameList: [username],
+    orgSlug: org,
   });
 
   if (!user) {

apps/web/lib/event-types/getServerSideProps.tsx

@@ -0,0 +1,21 @@
+import type { GetServerSidePropsContext } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+
+import { ssrInit } from "@server/lib/ssr";
+
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const ssr = await ssrInit(context);
+  const session = await getServerSession({ req: context.req, res: context.res });
+
+  if (!session) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: "/auth/login",
+      },
+    };
+  }
+
+  return { props: { trpcState: ssr.dehydrate() } };
+};

apps/web/lib/hooks/useRouterQuery.ts

@@ -11,7 +11,12 @@ export default function useRouterQuery<T extends string>(name: T) {
   const setQuery = useCallback(
     (newValue: string | number | null | undefined) => {
       const _searchParams = new URLSearchParams(searchParams ?? undefined);
-      _searchParams.set(name, newValue as string);
+      if (typeof newValue === "undefined") {
+        // when newValue is of type undefined, clear the search param.
+        _searchParams.delete(name);
+      } else {
+        _searchParams.set(name, newValue as string);
+      }
       router.replace(`${pathname}?${_searchParams.toString()}`);
     },
     [name, pathname, router, searchParams]

apps/web/lib/org/[orgSlug]/[user]/[type]/getServerSideProps.tsx

@@ -5,9 +5,10 @@ import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/or
 import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
 
-import { getServerSideProps as GSSUserTypePage } from "@lib/[user]/[type]/getServerSideProps";
 import { getServerSideProps as GSSTeamTypePage } from "@lib/team/[slug]/[type]/getServerSideProps";
 
+import { getServerSideProps as GSSUserTypePage } from "~/users/views/users-type-public-view.getServerSideProps";
+
 const paramsSchema = z.object({
   orgSlug: z.string().transform((s) => slugify(s)),
   user: z.string(),

apps/web/lib/orgMigration.test.ts

@@ -1589,17 +1589,20 @@ async function createTeamOutsideOrg(
   });
 }
 
-async function createUserOutsideOrg(data: Omit<Prisma.UserCreateArgs["data"], "organization">) {
+async function createUserOutsideOrg(
+  data: Omit<Prisma.UserCreateArgs["data"], "organization" | "movedToProfile">
+) {
   return await prismock.user.create({
     data: {
       ...data,
+      movedToProfileId: null,
       organizationId: null,
     },
   });
 }
 
 async function createUserInsideTheOrg(
-  data: Omit<Prisma.UserUncheckedCreateInput, "organization" | "organizationId" | "id">,
+  data: Omit<Prisma.UserUncheckedCreateInput, "organization" | "organizationId" | "id" | "movedToProfileId">,
   orgId: number
 ) {
   const org = await prismock.team.findUnique({

apps/web/lib/orgMigration.ts

@@ -3,6 +3,7 @@ import { getOrgFullOrigin } from "@calcom/features/ee/organizations/lib/orgDomai
 import { HttpError } from "@calcom/lib/http-error";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
+import { ProfileRepository } from "@calcom/lib/server/repository/profile";
 import prisma from "@calcom/prisma";
 import type { Team, User } from "@calcom/prisma/client";
 import { RedirectType } from "@calcom/prisma/client";
@@ -327,7 +328,7 @@ async function setOrgSlugIfNotSet(
     slug: string | null;
   },
   orgMetadata: {
-    requestedSlug?: string | undefined;
+    requestedSlug?: string | null | undefined;
   },
   targetOrgId: number
 ) {
@@ -348,7 +349,7 @@ async function setOrgSlugIfNotSet(
 
 function assertUserPartOfOrgAndRemigrationAllowed(
   userToMoveToOrg: {
-    organizationId: User["organizationId"];
+    organizationId: number | null;
   },
   targetOrgId: number,
   targetOrgUsername: string,
@@ -384,7 +385,7 @@ async function getTeamOrThrowError(targetOrgId: number) {
 
 function assertUserPartOfOtherOrg(
   userToMoveToOrg: {
-    organizationId: User["organizationId"];
+    organizationId: number | null;
   } | null,
   userName: string | undefined,
   userId: number | undefined,
@@ -594,6 +595,35 @@ async function dbMoveUserToOrg({
       },
     },
   });
+
+  await prisma.profile.upsert({
+    create: {
+      uid: ProfileRepository.generateProfileUid(),
+      userId: userToMoveToOrg.id,
+      organizationId: targetOrgId,
+      username: targetOrgUsername,
+      movedFromUser: {
+        connect: {
+          id: userToMoveToOrg.id,
+        },
+      },
+    },
+    update: {
+      organizationId: targetOrgId,
+      username: targetOrgUsername,
+      movedFromUser: {
+        connect: {
+          id: userToMoveToOrg.id,
+        },
+      },
+    },
+    where: {
+      userId_organizationId: {
+        userId: userToMoveToOrg.id,
+        organizationId: targetOrgId,
+      },
+    },
+  });
 }
 
 async function moveTeamsWithoutMembersToOrg({
@@ -841,6 +871,10 @@ async function dbRemoveUserFromOrg({
       },
     },
   });
+
+  await ProfileRepository.deleteMany({
+    userIds: [userToRemoveFromOrg.id],
+  });
 }
 
 async function removeMembership({

apps/web/lib/team/[slug]/[type]/getServerSideProps.tsx

@@ -2,7 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { getBookingForReschedule, getMultipleDurationValue } from "@calcom/features/bookings/lib/get-booking";
+import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
@@ -82,12 +82,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   return {
     props: {
-      entity: eventData.entity,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: eventData.metadata,
+      },
       booking,
       away: false,
       user: teamSlug,

apps/web/lib/team/[slug]/getServerSideProps.tsx

@@ -18,9 +18,21 @@ import { ssrInit } from "@server/lib/ssr";
 
 const log = logger.getSubLogger({ prefix: ["team/[slug]"] });
 
+const getTheLastArrayElement = (value: ReadonlyArray<string> | string | undefined): string | undefined => {
+  if (value === undefined || typeof value === "string") {
+    return value;
+  }
+
+  return value.at(-1);
+};
+
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const slug = Array.isArray(context.query?.slug) ? context.query.slug.pop() : context.query.slug;
-  const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const slug = getTheLastArrayElement(context.query.slug) ?? getTheLastArrayElement(context.query.orgSlug);
+
+  const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(
+    context.req,
+    context.params?.orgSlug ?? context.query?.orgSlug
+  );
   const isOrgContext = isValidOrgDomain && currentOrgDomain;
 
   // Provided by Rewrite from next.config.js
@@ -109,7 +121,9 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
         return {
           name: member.name,
           id: member.id,
+          avatarUrl: member.avatarUrl,
           bio: member.bio,
+          profile: member.profile,
           subteams: member.subteams,
           username: member.username,
           accepted: member.accepted,

apps/web/middleware.ts

@@ -11,6 +11,14 @@ import { csp } from "@lib/csp";
 
 import { abTestMiddlewareFactory } from "./abTest/middlewareFactory";
 
+const safeGet = async <T = any>(key: string): Promise<T | undefined> => {
+  try {
+    return get<T>(key);
+  } catch (error) {
+    // Don't crash if EDGE_CONFIG env var is missing
+  }
+};
+
 const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
   const url = req.nextUrl;
   const requestHeaders = new Headers(req.headers);
@@ -24,18 +32,12 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
     //
     //     - For this reason our matchers are sufficient for an app-wide maintenance page.
     //
-    try {
-      // Check whether the maintenance page should be shown
-      const isInMaintenanceMode = await get<boolean>("isInMaintenanceMode");
-      // If is in maintenance mode, point the url pathname to the maintenance page
-      if (isInMaintenanceMode) {
-        req.nextUrl.pathname = `/maintenance`;
-        return NextResponse.rewrite(req.nextUrl);
-      }
-    } catch (error) {
-      // show the default page if EDGE_CONFIG env var is missing,
-      // but log the error to the console
-      // console.error(error);
+    // Check whether the maintenance page should be shown
+    const isInMaintenanceMode = await safeGet<boolean>("isInMaintenanceMode");
+    // If is in maintenance mode, point the url pathname to the maintenance page
+    if (isInMaintenanceMode) {
+      req.nextUrl.pathname = `/maintenance`;
+      return NextResponse.rewrite(req.nextUrl);
     }
   }
 
@@ -60,6 +62,14 @@ const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
     requestHeaders.set("x-cal-timezone", req.headers.get("x-vercel-ip-timezone") ?? "");
   }
 
+  if (url.pathname.startsWith("/api/auth/signup")) {
+    const isSignupDisabled = await safeGet<boolean>("isSignupDisabled");
+    // If is in maintenance mode, point the url pathname to the maintenance page
+    if (isSignupDisabled) {
+      return NextResponse.json({ error: "Signup is disabled" }, { status: 503 });
+    }
+  }
+
   if (url.pathname.startsWith("/auth/login") || url.pathname.startsWith("/login")) {
     // Use this header to actually enforce CSP, otherwise it is running in Report Only mode on all pages.
     requestHeaders.set("x-csp-enforce", "true");
@@ -114,6 +124,7 @@ export const config = {
   // https://github.com/vercel/next.js/discussions/42458
   matcher: [
     "/:path*/embed",
+    "/api/auth/signup",
     "/api/trpc/:path*",
     "/login",
     "/auth/login",

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

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

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

@@ -3,7 +3,7 @@ import { z } from "zod";
 
 import { getTranslations } from "@server/lib/getTranslations";
 
-const validStatuses = ["upcoming", "recurring", "past", "cancelled", "unconfirmed"] as const;
+import { validStatuses } from "~/bookings/lib/validStatuses";
 
 const querySchema = z.object({
   status: z.enum(validStatuses),

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

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

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

@@ -9,6 +9,8 @@ import { maybeGetBookingUidFromSeat } from "@calcom/lib/server/maybeGetBookingUi
 import prisma from "@calcom/prisma";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+
 import { ssrInit } from "@server/lib/ssr";
 
 const stringToBoolean = z
@@ -29,6 +31,8 @@ const querySchema = z.object({
   seatReferenceUid: z.string().optional(),
 });
 
+export type PageProps = inferSSRProps<typeof getServerSideProps>;
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   // this is needed to prevent bundling of lib/booking to the client bundle
   // usually functions that are used in getServerSideProps are tree shaken from client bundle
@@ -52,12 +56,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const parsedQuery = querySchema.safeParse(context.query);
 
   if (!parsedQuery.success) return { notFound: true } as const;
-  const { uid, eventTypeSlug, seatReferenceUid } = parsedQuery.data;
+  const { eventTypeSlug } = parsedQuery.data;
+  let { uid, seatReferenceUid } = parsedQuery.data;
 
-  const { uid: maybeUid } = await maybeGetBookingUidFromSeat(prisma, uid);
+  const maybeBookingUidFromSeat = await maybeGetBookingUidFromSeat(prisma, uid);
+  if (maybeBookingUidFromSeat.uid) uid = maybeBookingUidFromSeat.uid;
+  if (maybeBookingUidFromSeat.seatReferenceUid) seatReferenceUid = maybeBookingUidFromSeat.seatReferenceUid;
   const bookingInfoRaw = await prisma.booking.findFirst({
     where: {
-      uid: maybeUid,
+      uid: uid,
     },
     select: {
       title: true,
@@ -75,6 +82,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       cancellationReason: true,
       responses: true,
       rejectionReason: true,
+      userPrimaryEmail: true,
       user: {
         select: {
           id: true,
@@ -164,7 +172,12 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   };
 
   if (bookingInfo !== null && eventType.seatsPerTimeSlot) {
-    await handleSeatsEventTypeOnBooking(eventType, bookingInfo, seatReferenceUid, session?.user.id);
+    await handleSeatsEventTypeOnBooking(
+      eventType,
+      bookingInfo,
+      seatReferenceUid,
+      session?.user.id === eventType.userId
+    );
   }
 
   const payment = await prisma.payment.findFirst({

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

@@ -14,6 +14,7 @@ import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import type { getEventLocationValue } from "@calcom/app-store/locations";
 import { getSuccessPageLocationMessage, guessEventLocationType } from "@calcom/app-store/locations";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
+import type { nameObjectSchema } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
 import type { ConfigType } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
@@ -44,17 +45,13 @@ import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { Alert, Badge, Button, EmailInput, HeadSeo, useCalcomTheme } from "@calcom/ui";
 import { AlertCircle, Calendar, Check, ChevronLeft, ExternalLink, X } from "@calcom/ui/components/icon";
 
-import { getServerSideProps } from "@lib/booking/[uid]/getServerSideProps";
 import { timeZone } from "@lib/clock";
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import PageWrapper from "@components/PageWrapper";
 import CancelBooking from "@components/booking/CancelBooking";
 import EventReservationSchema from "@components/schemas/EventReservationSchema";
 
-export { getServerSideProps };
-
-export type PageProps = inferSSRProps<typeof getServerSideProps>;
+import type { PageProps } from "./bookings-single-view.getServerSideProps";
 
 const stringToBoolean = z
   .string()
@@ -94,6 +91,7 @@ export default function Success(props: PageProps) {
   const routerQuery = useRouterQuery();
   const pathname = usePathname();
   const searchParams = useCompatSearchParams();
+  const { eventType, bookingInfo, requiresLoginToUpdate } = props;
   const {
     allRemainingBookings,
     isSuccessBookingPage,
@@ -103,35 +101,28 @@ export default function Success(props: PageProps) {
     seatReferenceUid,
   } = querySchema.parse(routerQuery);
 
-  const attendeeTimeZone = props?.bookingInfo?.attendees.find(
-    (attendee) => attendee.email === email
-  )?.timeZone;
+  const attendeeTimeZone = bookingInfo?.attendees.find((attendee) => attendee.email === email)?.timeZone;
 
   const tz = props.tz ? props.tz : isSuccessBookingPage && attendeeTimeZone ? attendeeTimeZone : timeZone();
 
-  const location = props.bookingInfo.location as ReturnType<typeof getEventLocationValue>;
+  const location = bookingInfo.location as ReturnType<typeof getEventLocationValue>;
   let rescheduleLocation: string | undefined;
   if (
-    typeof props.bookingInfo.responses.location === "object" &&
-    "optionValue" in props.bookingInfo.responses.location
+    typeof bookingInfo.responses?.location === "object" &&
+    "optionValue" in bookingInfo.responses.location
   ) {
-    rescheduleLocation = props.bookingInfo.responses.location.optionValue;
+    rescheduleLocation = bookingInfo.responses.location.optionValue;
   }
 
   const locationVideoCallUrl: string | undefined = bookingMetadataSchema.parse(
-    props?.bookingInfo?.metadata || {}
+    bookingInfo?.metadata || {}
   )?.videoCallUrl;
 
-  const status = props.bookingInfo?.status;
-  const reschedule = props.bookingInfo.status === BookingStatus.ACCEPTED;
-  const cancellationReason = props.bookingInfo.cancellationReason || props.bookingInfo.rejectionReason;
+  const status = bookingInfo?.status;
+  const reschedule = bookingInfo.status === BookingStatus.ACCEPTED;
+  const cancellationReason = bookingInfo.cancellationReason || bookingInfo.rejectionReason;
 
-  const attendeeName =
-    typeof props?.bookingInfo?.attendees?.[0]?.name === "string"
-      ? props?.bookingInfo?.attendees?.[0]?.name
-      : "Nameless";
-
-  const attendees = props?.bookingInfo?.attendees;
+  const attendees = bookingInfo?.attendees;
 
   const isGmail = !!attendees.find((attendee) => attendee.email.includes("gmail.com"));
 
@@ -140,15 +131,14 @@ export default function Success(props: PageProps) {
   );
   const { data: session } = useSession();
 
-  const [date, setDate] = useState(dayjs.utc(props.bookingInfo.startTime));
-  const { eventType, bookingInfo } = props;
+  const [date, setDate] = useState(dayjs.utc(bookingInfo.startTime));
 
   const isBackgroundTransparent = useIsBackgroundTransparent();
   const isEmbed = useIsEmbed();
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const [calculatedDuration, setCalculatedDuration] = useState<number | undefined>(undefined);
-  const { requiresLoginToUpdate } = props;
+
   function setIsCancellationMode(value: boolean) {
     const _searchParams = new URLSearchParams(searchParams ?? undefined);
 
@@ -163,13 +153,13 @@ export default function Success(props: PageProps) {
     router.replace(`${pathname}?${_searchParams.toString()}`);
   }
 
-  let evtName = props.eventType.eventName;
+  let evtName = eventType.eventName;
   if (eventType.isDynamic && bookingInfo.responses?.title) {
     evtName = bookingInfo.responses.title as string;
   }
   const eventNameObject = {
-    attendeeName,
-    eventType: props.eventType.title,
+    attendeeName: bookingInfo.responses.name as z.infer<typeof nameObjectSchema> | string,
+    eventType: eventType.title,
     eventName: evtName,
     host: props.profile.name || "Nameless",
     location: location,
@@ -213,7 +203,7 @@ export default function Success(props: PageProps) {
       duration: calculatedDuration,
       organizer: {
         name: users[0].name || "Nameless",
-        email: users[0].email || "Email-less",
+        email: bookingInfo?.userPrimaryEmail || users[0].email || "Email-less",
         timeZone: users[0].timeZone,
       },
       confirmed: !needsConfirmation,
@@ -227,9 +217,7 @@ export default function Success(props: PageProps) {
   }, [eventType, needsConfirmation]);
 
   useEffect(() => {
-    setCalculatedDuration(
-      dayjs(props.bookingInfo.endTime).diff(dayjs(props.bookingInfo.startTime), "minutes")
-    );
+    setCalculatedDuration(dayjs(bookingInfo.endTime).diff(dayjs(bookingInfo.startTime), "minutes"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -249,7 +237,7 @@ export default function Success(props: PageProps) {
       ],
       startInputType: "utc",
       title: eventName,
-      description: props.eventType.description ? props.eventType.description : undefined,
+      description: eventType.description ? eventType.description : undefined,
       /** formatted to required type of description ^ */
       duration: {
         minutes: calculatedDuration,
@@ -325,6 +313,7 @@ export default function Success(props: PageProps) {
         <div className="-mb-4 ml-4 mt-2">
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
+            data-testid="back-to-bookings"
             className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
             <ChevronLeft className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
           </Link>
@@ -427,7 +416,7 @@ export default function Success(props: PageProps) {
                       {reschedule && !!formerTime && (
                         <p className="line-through">
                           <RecurringBookings
-                            eventType={props.eventType}
+                            eventType={eventType}
                             duration={calculatedDuration}
                             recurringBookings={props.recurringBookings}
                             allRemainingBookings={allRemainingBookings}
@@ -439,7 +428,7 @@ export default function Success(props: PageProps) {
                         </p>
                       )}
                       <RecurringBookings
-                        eventType={props.eventType}
+                        eventType={eventType}
                         duration={calculatedDuration}
                         recurringBookings={props.recurringBookings}
                         allRemainingBookings={allRemainingBookings}
@@ -461,7 +450,9 @@ export default function Success(props: PageProps) {
                                 </span>
                                 <Badge variant="blue">{t("Host")}</Badge>
                               </div>
-                              <p className="text-default">{bookingInfo.user.email}</p>
+                              <p className="text-default">
+                                {bookingInfo?.userPrimaryEmail ?? bookingInfo.user.email}
+                              </p>
                             </div>
                           )}
                           {bookingInfo?.attendees.map((attendee) => (
@@ -641,15 +632,15 @@ export default function Success(props: PageProps) {
                               .add(calculatedDuration, "minute")
                               .utc()
                               .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
-                              props.eventType.description
+                              eventType.description
                             }${
                               typeof locationVideoCallUrl === "string"
                                 ? `&location=${encodeURIComponent(locationVideoCallUrl)}`
                                 : ""
                             }${
-                              props.eventType.recurringEvent
+                              eventType.recurringEvent
                                 ? `&recur=${encodeURIComponent(
-                                    new RRule(props.eventType.recurringEvent).toString()
+                                    new RRule(eventType.recurringEvent).toString()
                                   )}`
                                 : ""
                             }`}
@@ -667,7 +658,7 @@ export default function Success(props: PageProps) {
                             href={
                               encodeURI(
                                 `https://outlook.live.com/calendar/0/deeplink/compose?body=${
-                                  props.eventType.description
+                                  eventType.description
                                 }&enddt=${date
                                   .add(calculatedDuration, "minute")
                                   .utc()
@@ -694,7 +685,7 @@ export default function Success(props: PageProps) {
                             href={
                               encodeURI(
                                 `https://outlook.office.com/calendar/0/deeplink/compose?body=${
-                                  props.eventType.description
+                                  eventType.description
                                 }&enddt=${date
                                   .add(calculatedDuration, "minute")
                                   .utc()
@@ -720,7 +711,7 @@ export default function Success(props: PageProps) {
                           <Link
                             href={`data:text/calendar,${eventLink()}`}
                             className="border-subtle text-default mx-2 h-10 w-10 rounded-sm border px-3 py-2"
-                            download={`${props.eventType.title}.ics`}>
+                            download={`${eventType.title}.ics`}>
                             <svg
                               version="1.1"
                               fill="currentColor"
@@ -837,7 +828,7 @@ type RecurringBookingsProps = {
   tz: string;
 };
 
-export function RecurringBookings({
+function RecurringBookings({
   eventType,
   recurringBookings,
   duration,

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

@@ -18,23 +18,30 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const ssr = await ssrInit(context);
 
   if (Number.isNaN(typeParam)) {
-    return {
+    const notFound = {
       notFound: true,
-    };
+    } as const;
+
+    return notFound;
   }
 
   if (!session?.user?.id) {
-    return {
+    const redirect = {
       redirect: {
         permanent: false,
         destination: "/auth/login",
       },
-    };
+    } as const;
+    return redirect;
   }
 
   await ssr.viewer.eventTypes.get.prefetch({ id: typeParam });
+
+  const { eventType } = await ssr.viewer.eventTypes.get.fetch({ id: typeParam });
+
   return {
     props: {
+      eventType,
       type: typeParam,
       trpcState: ssr.dehydrate(),
     },

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

@@ -0,0 +1,709 @@
+"use client";
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { isValidPhoneNumber } from "libphonenumber-js";
+import dynamic from "next/dynamic";
+import { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import checkForMultiplePaymentApps from "@calcom/app-store/_utils/payments/checkForMultiplePaymentApps";
+import { getEventLocationType } from "@calcom/app-store/locations";
+import { validateCustomEventName } from "@calcom/core/event";
+import type { EventLocationType } from "@calcom/core/location";
+import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
+import { validateIntervalLimitOrder } from "@calcom/lib";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
+import { HttpError } from "@calcom/lib/http-error";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
+import type { Prisma } from "@calcom/prisma/client";
+import type { PeriodType, SchedulingType } from "@calcom/prisma/enums";
+import type {
+  BookerLayoutSettings,
+  customInputSchema,
+  EventTypeMetaDataSchema,
+} from "@calcom/prisma/zod-utils";
+import { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { IntervalLimit, RecurringEvent } from "@calcom/types/Calendar";
+import { Form, showToast } from "@calcom/ui";
+
+import type { AppProps } from "@lib/app-providers";
+
+import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";
+import { EventTypeSingleLayout } from "@components/eventtype/EventTypeSingleLayout";
+
+import { type PageProps } from "~/event-types/views/event-types-single-view.getServerSideProps";
+
+// These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings;
+const EventSetupTab = dynamic(() =>
+  import("@components/eventtype/EventSetupTab").then((mod) => mod.EventSetupTab)
+);
+
+const EventAvailabilityTab = dynamic(() =>
+  import("@components/eventtype/EventAvailabilityTab").then((mod) => mod.EventAvailabilityTab)
+);
+
+const EventTeamTab = dynamic(() =>
+  import("@components/eventtype/EventTeamTab").then((mod) => mod.EventTeamTab)
+);
+
+const EventLimitsTab = dynamic(() =>
+  import("@components/eventtype/EventLimitsTab").then((mod) => mod.EventLimitsTab)
+);
+
+const EventAdvancedTab = dynamic(() =>
+  import("@components/eventtype/EventAdvancedTab").then((mod) => mod.EventAdvancedTab)
+);
+
+const EventInstantTab = dynamic(() =>
+  import("@components/eventtype/EventInstantTab").then((mod) => mod.EventInstantTab)
+);
+
+const EventRecurringTab = dynamic(() =>
+  import("@components/eventtype/EventRecurringTab").then((mod) => mod.EventRecurringTab)
+);
+
+const EventAppsTab = dynamic(() =>
+  import("@components/eventtype/EventAppsTab").then((mod) => mod.EventAppsTab)
+);
+
+const EventWorkflowsTab = dynamic(() => import("@components/eventtype/EventWorkfowsTab"));
+
+const EventWebhooksTab = dynamic(() =>
+  import("@components/eventtype/EventWebhooksTab").then((mod) => mod.EventWebhooksTab)
+);
+
+const ManagedEventTypeDialog = dynamic(() => import("@components/eventtype/ManagedEventDialog"));
+
+export type Host = { isFixed: boolean; userId: number; priority: number };
+
+export type FormValues = {
+  id: number;
+  title: string;
+  eventTitle: string;
+  eventName: string;
+  slug: string;
+  isInstantEvent: boolean;
+  length: number;
+  offsetStart: number;
+  description: string;
+  disableGuests: boolean;
+  lockTimeZoneToggleOnBookingPage: boolean;
+  requiresConfirmation: boolean;
+  requiresBookerEmailVerification: boolean;
+  recurringEvent: RecurringEvent | null;
+  schedulingType: SchedulingType | null;
+  hidden: boolean;
+  hideCalendarNotes: boolean;
+  hashedLink: string | undefined;
+  locations: {
+    type: EventLocationType["type"];
+    address?: string;
+    attendeeAddress?: string;
+    link?: string;
+    hostPhoneNumber?: string;
+    displayLocationPublicly?: boolean;
+    phone?: string;
+    hostDefault?: string;
+    credentialId?: number;
+    teamName?: string;
+  }[];
+  customInputs: CustomInputParsed[];
+  schedule: number | null;
+  periodType: PeriodType;
+  periodDays: number;
+  periodCountCalendarDays: "1" | "0";
+  periodDates: { startDate: Date; endDate: Date };
+  seatsPerTimeSlot: number | null;
+  seatsShowAttendees: boolean | null;
+  seatsShowAvailabilityCount: boolean | null;
+  seatsPerTimeSlotEnabled: boolean;
+  scheduleName: string;
+  minimumBookingNotice: number;
+  minimumBookingNoticeInDurationType: number;
+  beforeEventBuffer: number;
+  afterEventBuffer: number;
+  slotInterval: number | null;
+  metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  destinationCalendar: {
+    integration: string;
+    externalId: string;
+  };
+  successRedirectUrl: string;
+  durationLimits?: IntervalLimit;
+  bookingLimits?: IntervalLimit;
+  onlyShowFirstAvailableSlot: boolean;
+  children: ChildrenEventType[];
+  hosts: Host[];
+  bookingFields: z.infer<typeof eventTypeBookingFields>;
+  availability?: AvailabilityOption;
+  bookerLayouts: BookerLayoutSettings;
+  multipleDurationEnabled: boolean;
+  users: EventTypeSetup["users"];
+  assignAllTeamMembers: boolean;
+  useEventTypeDestinationCalendarEmail: boolean;
+};
+
+export type CustomInputParsed = typeof customInputSchema._output;
+
+const querySchema = z.object({
+  tabName: z
+    .enum([
+      "setup",
+      "availability",
+      "apps",
+      "limits",
+      "instant",
+      "recurring",
+      "team",
+      "advanced",
+      "workflows",
+      "webhooks",
+    ])
+    .optional()
+    .default("setup"),
+});
+
+export type EventTypeSetupProps = RouterOutputs["viewer"]["eventTypes"]["get"];
+export type EventTypeSetup = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"];
+
+const EventTypePage = (props: EventTypeSetupProps) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const telemetry = useTelemetry();
+  const {
+    data: { tabName },
+  } = useTypedQuery(querySchema);
+
+  const { data: eventTypeApps } = trpc.viewer.integrations.useQuery({
+    extendsFeature: "EventType",
+    teamId: props.eventType.team?.id || props.eventType.parent?.teamId,
+    onlyInstalled: true,
+  });
+
+  const { eventType, locationOptions, team, teamMembers, currentUserMembership, destinationCalendar } = props;
+  const [animationParentRef] = useAutoAnimate<HTMLDivElement>();
+  const updateMutation = trpc.viewer.eventTypes.update.useMutation({
+    onSuccess: async () => {
+      formMethods.setValue(
+        "children",
+        formMethods.getValues().children.map((child) => ({
+          ...child,
+          created: true,
+        }))
+      );
+      formMethods.setValue("assignAllTeamMembers", formMethods.getValues("assignAllTeamMembers") || false);
+      showToast(t("event_type_updated_successfully", { eventTypeTitle: eventType.title }), "success");
+    },
+    async onSettled() {
+      await utils.viewer.eventTypes.get.invalidate();
+    },
+    onError: (err) => {
+      let message = "";
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+
+      if (err.data?.code === "UNAUTHORIZED") {
+        message = `${err.data.code}: ${t("error_event_type_unauthorized_update")}`;
+      }
+
+      if (err.data?.code === "PARSE_ERROR" || err.data?.code === "BAD_REQUEST") {
+        message = `${err.data.code}: ${t(err.message)}`;
+      }
+
+      if (err.data?.code === "INTERNAL_SERVER_ERROR") {
+        message = t("unexpected_error_try_again");
+      }
+
+      showToast(message ? t(message) : t(err.message), "error");
+    },
+  });
+
+  const [periodDates] = useState<{ startDate: Date; endDate: Date }>({
+    startDate: new Date(eventType.periodStartDate || Date.now()),
+    endDate: new Date(eventType.periodEndDate || Date.now()),
+  });
+
+  const metadata = eventType.metadata;
+  // fallback to !!eventType.schedule when 'useHostSchedulesForTeamEvent' is undefined
+  if (!!team && metadata !== null) {
+    metadata.config = {
+      ...metadata.config,
+      useHostSchedulesForTeamEvent:
+        typeof eventType.metadata?.config?.useHostSchedulesForTeamEvent !== "undefined"
+          ? eventType.metadata?.config?.useHostSchedulesForTeamEvent === true
+          : !!eventType.schedule,
+    };
+  } else {
+    // Make sure non-team events NEVER have this config key;
+    delete metadata?.config?.useHostSchedulesForTeamEvent;
+  }
+
+  const bookingFields: Prisma.JsonObject = {};
+
+  eventType.bookingFields.forEach(({ name }) => {
+    bookingFields[name] = name;
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const defaultValues: any = useMemo(() => {
+    return {
+      title: eventType.title,
+      id: eventType.id,
+      slug: eventType.slug,
+      afterEventBuffer: eventType.afterEventBuffer,
+      beforeEventBuffer: eventType.beforeEventBuffer,
+      eventName: eventType.eventName || "",
+      scheduleName: eventType.scheduleName,
+      periodDays: eventType.periodDays || 30,
+      requiresBookerEmailVerification: eventType.requiresBookerEmailVerification,
+      seatsPerTimeSlot: eventType.seatsPerTimeSlot,
+      seatsShowAttendees: eventType.seatsShowAttendees,
+      seatsShowAvailabilityCount: eventType.seatsShowAvailabilityCount,
+      lockTimeZoneToggleOnBookingPage: eventType.lockTimeZoneToggleOnBookingPage,
+      locations: eventType.locations || [],
+      destinationCalendar: eventType.destinationCalendar,
+      recurringEvent: eventType.recurringEvent || null,
+      isInstantEvent: eventType.isInstantEvent,
+      description: eventType.description ?? undefined,
+      schedule: eventType.schedule || undefined,
+      bookingLimits: eventType.bookingLimits || undefined,
+      onlyShowFirstAvailableSlot: eventType.onlyShowFirstAvailableSlot || undefined,
+      durationLimits: eventType.durationLimits || undefined,
+      length: eventType.length,
+      hidden: eventType.hidden,
+      hashedLink: eventType.hashedLink?.link || undefined,
+      periodDates: {
+        startDate: periodDates.startDate,
+        endDate: periodDates.endDate,
+      },
+      hideCalendarNotes: eventType.hideCalendarNotes,
+      offsetStart: eventType.offsetStart,
+      bookingFields: eventType.bookingFields,
+      periodType: eventType.periodType,
+      periodCountCalendarDays: eventType.periodCountCalendarDays ? "1" : "0",
+      schedulingType: eventType.schedulingType,
+      requiresConfirmation: eventType.requiresConfirmation,
+      slotInterval: eventType.slotInterval,
+      minimumBookingNotice: eventType.minimumBookingNotice,
+      metadata,
+      hosts: eventType.hosts,
+      successRedirectUrl: eventType.successRedirectUrl || "",
+      users: eventType.users,
+      useEventTypeDestinationCalendarEmail: eventType.useEventTypeDestinationCalendarEmail,
+      children: eventType.children.map((ch) => ({
+        ...ch,
+        created: true,
+        owner: {
+          ...ch.owner,
+          eventTypeSlugs:
+            eventType.team?.members
+              .find((mem) => mem.user.id === ch.owner.id)
+              ?.user.eventTypes.map((evTy) => evTy.slug)
+              .filter((slug) => slug !== eventType.slug) ?? [],
+        },
+      })),
+      seatsPerTimeSlotEnabled: eventType.seatsPerTimeSlot,
+      assignAllTeamMembers: eventType.assignAllTeamMembers,
+    };
+  }, [eventType, periodDates, metadata]);
+
+  const formMethods = useForm<FormValues>({
+    defaultValues,
+    resolver: zodResolver(
+      z
+        .object({
+          // Length if string, is converted to a number or it can be a number
+          // Make it optional because it's not submitted from all tabs of the page
+          eventName: z
+            .string()
+            .refine(
+              (val) =>
+                validateCustomEventName(val, t("invalid_event_name_variables"), bookingFields) === true,
+              {
+                message: t("invalid_event_name_variables"),
+              }
+            )
+            .optional(),
+          length: z.union([z.string().transform((val) => +val), z.number()]).optional(),
+          offsetStart: z.union([z.string().transform((val) => +val), z.number()]).optional(),
+          bookingFields: eventTypeBookingFields,
+          locations: z
+            .array(
+              z
+                .object({
+                  type: z.string(),
+                  address: z.string().optional(),
+                  link: z.string().url().optional(),
+                  phone: z
+                    .string()
+                    .refine((val) => isValidPhoneNumber(val))
+                    .optional(),
+                  hostPhoneNumber: z
+                    .string()
+                    .refine((val) => isValidPhoneNumber(val))
+                    .optional(),
+                  displayLocationPublicly: z.boolean().optional(),
+                  credentialId: z.number().optional(),
+                  teamName: z.string().optional(),
+                })
+                .passthrough()
+                .superRefine((val, ctx) => {
+                  if (val?.link) {
+                    const link = val.link;
+                    const eventLocationType = getEventLocationType(val.type);
+                    if (
+                      eventLocationType &&
+                      !eventLocationType.default &&
+                      eventLocationType.linkType === "static" &&
+                      eventLocationType.urlRegExp
+                    ) {
+                      const valid = z
+                        .string()
+                        .regex(new RegExp(eventLocationType.urlRegExp))
+                        .safeParse(link).success;
+
+                      if (!valid) {
+                        const sampleUrl = eventLocationType.organizerInputPlaceholder;
+                        ctx.addIssue({
+                          code: z.ZodIssueCode.custom,
+                          path: [eventLocationType?.defaultValueVariable ?? "link"],
+                          message: t("invalid_url_error_message", {
+                            label: eventLocationType.label,
+                            sampleUrl: sampleUrl ?? "https://cal.com",
+                          }),
+                        });
+                      }
+                      return;
+                    }
+
+                    const valid = z.string().url().optional().safeParse(link).success;
+
+                    if (!valid) {
+                      ctx.addIssue({
+                        code: z.ZodIssueCode.custom,
+                        path: [eventLocationType?.defaultValueVariable ?? "link"],
+                        message: `Invalid URL`,
+                      });
+                    }
+                  }
+                  return;
+                })
+            )
+            .optional(),
+        })
+        // TODO: Add schema for other fields later.
+        .passthrough()
+    ),
+  });
+
+  useEffect(() => {
+    if (!formMethods.formState.isDirty) {
+      //TODO: What's the best way to sync the form with backend
+      formMethods.setValue("bookingFields", defaultValues.bookingFields);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValues]);
+
+  const appsMetadata = formMethods.getValues("metadata")?.apps;
+  const availability = formMethods.watch("availability");
+  let numberOfActiveApps = 0;
+
+  if (appsMetadata) {
+    numberOfActiveApps = Object.entries(appsMetadata).filter(
+      ([appId, appData]) =>
+        eventTypeApps?.items.find((app) => app.slug === appId)?.isInstalled && appData.enabled
+    ).length;
+  }
+
+  const permalink = `${WEBSITE_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
+    eventType.slug
+  }`;
+  const tabMap = {
+    setup: (
+      <EventSetupTab
+        eventType={eventType}
+        locationOptions={locationOptions}
+        team={team}
+        teamMembers={teamMembers}
+        destinationCalendar={destinationCalendar}
+      />
+    ),
+    availability: <EventAvailabilityTab eventType={eventType} isTeamEvent={!!team} />,
+    team: <EventTeamTab teamMembers={teamMembers} team={team} eventType={eventType} />,
+    limits: <EventLimitsTab />,
+    advanced: <EventAdvancedTab eventType={eventType} team={team} />,
+    instant: <EventInstantTab eventType={eventType} isTeamEvent={!!team} />,
+    recurring: <EventRecurringTab eventType={eventType} />,
+    apps: <EventAppsTab eventType={{ ...eventType, URL: permalink }} />,
+    workflows: (
+      <EventWorkflowsTab
+        eventType={eventType}
+        workflows={eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow)}
+      />
+    ),
+    webhooks: <EventWebhooksTab eventType={eventType} />,
+  } as const;
+
+  const handleSubmit = async (values: FormValues) => {
+    const {
+      periodDates,
+      periodCountCalendarDays,
+      beforeEventBuffer,
+      afterEventBuffer,
+      seatsPerTimeSlot,
+      seatsShowAttendees,
+      seatsShowAvailabilityCount,
+      bookingLimits,
+      onlyShowFirstAvailableSlot,
+      durationLimits,
+      recurringEvent,
+      locations,
+      metadata,
+      customInputs,
+      children,
+      assignAllTeamMembers,
+      // We don't need to send send these values to the backend
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      seatsPerTimeSlotEnabled,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      minimumBookingNoticeInDurationType,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      bookerLayouts,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      multipleDurationEnabled,
+      length,
+      ...input
+    } = values;
+
+    if (!Number(length)) throw new Error(t("event_setup_length_error"));
+
+    if (bookingLimits) {
+      const isValid = validateIntervalLimitOrder(bookingLimits);
+      if (!isValid) throw new Error(t("event_setup_booking_limits_error"));
+    }
+
+    if (durationLimits) {
+      const isValid = validateIntervalLimitOrder(durationLimits);
+      if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
+    }
+
+    const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+    if (layoutError) throw new Error(t(layoutError));
+
+    if (metadata?.multipleDuration !== undefined) {
+      if (metadata?.multipleDuration.length < 1) {
+        throw new Error(t("event_setup_multiple_duration_error"));
+      } else {
+        if (!length && !metadata?.multipleDuration?.includes(length)) {
+          throw new Error(t("event_setup_multiple_duration_default_error"));
+        }
+      }
+    }
+
+    // Prevent two payment apps to be enabled
+    // Ok to cast type here because this metadata will be updated as the event type metadata
+    if (checkForMultiplePaymentApps(metadata as z.infer<typeof EventTypeMetaDataSchema>))
+      throw new Error(t("event_setup_multiple_payment_apps_error"));
+
+    if (metadata?.apps?.stripe?.paymentOption === "HOLD" && seatsPerTimeSlot) {
+      throw new Error(t("seats_and_no_show_fee_error"));
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { availability, users, scheduleName, ...rest } = input;
+    updateMutation.mutate({
+      ...rest,
+      length,
+      locations,
+      recurringEvent,
+      periodStartDate: periodDates.startDate,
+      periodEndDate: periodDates.endDate,
+      periodCountCalendarDays: periodCountCalendarDays === "1",
+      id: eventType.id,
+      beforeEventBuffer,
+      afterEventBuffer,
+      bookingLimits,
+      onlyShowFirstAvailableSlot,
+      durationLimits,
+      seatsPerTimeSlot,
+      seatsShowAttendees,
+      seatsShowAvailabilityCount,
+      metadata,
+      customInputs,
+      children,
+      assignAllTeamMembers,
+    });
+  };
+
+  const [slugExistsChildrenDialogOpen, setSlugExistsChildrenDialogOpen] = useState<ChildrenEventType[]>([]);
+  const slug = formMethods.watch("slug") ?? eventType.slug;
+
+  // Optional prerender all tabs after 300 ms on mount
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const Components = [
+        EventSetupTab,
+        EventAvailabilityTab,
+        EventTeamTab,
+        EventLimitsTab,
+        EventAdvancedTab,
+        EventInstantTab,
+        EventRecurringTab,
+        EventAppsTab,
+        EventWorkflowsTab,
+        EventWebhooksTab,
+      ];
+
+      Components.forEach((C) => {
+        // @ts-expect-error Property 'render' does not exist on type 'ComponentClass
+        C.render.preload();
+      });
+    }, 300);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, []);
+  return (
+    <>
+      <EventTypeSingleLayout
+        enabledAppsNumber={numberOfActiveApps}
+        installedAppsNumber={eventTypeApps?.items.length || 0}
+        enabledWorkflowsNumber={eventType.workflows.length}
+        eventType={eventType}
+        activeWebhooksNumber={eventType.webhooks.filter((webhook) => webhook.active).length}
+        team={team}
+        availability={availability}
+        isUpdateMutationLoading={updateMutation.isPending}
+        formMethods={formMethods}
+        // disableBorder={tabName === "apps" || tabName === "workflows" || tabName === "webhooks"}
+        disableBorder={true}
+        currentUserMembership={currentUserMembership}
+        bookerUrl={eventType.bookerUrl}
+        isUserOrganizationAdmin={props.isUserOrganizationAdmin}>
+        <Form
+          form={formMethods}
+          id="event-type-form"
+          handleSubmit={async (values) => {
+            const {
+              periodDates,
+              periodCountCalendarDays,
+              beforeEventBuffer,
+              afterEventBuffer,
+              seatsPerTimeSlot,
+              seatsShowAttendees,
+              seatsShowAvailabilityCount,
+              bookingLimits,
+              onlyShowFirstAvailableSlot,
+              durationLimits,
+              recurringEvent,
+              locations,
+              metadata,
+              customInputs,
+              // We don't need to send send these values to the backend
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              seatsPerTimeSlotEnabled,
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              multipleDurationEnabled,
+              length,
+              ...input
+            } = values;
+
+            if (!Number(length)) throw new Error(t("event_setup_length_error"));
+
+            if (bookingLimits) {
+              const isValid = validateIntervalLimitOrder(bookingLimits);
+              if (!isValid) throw new Error(t("event_setup_booking_limits_error"));
+            }
+
+            if (durationLimits) {
+              const isValid = validateIntervalLimitOrder(durationLimits);
+              if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
+            }
+
+            const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+            if (layoutError) throw new Error(t(layoutError));
+
+            if (metadata?.multipleDuration !== undefined) {
+              if (metadata?.multipleDuration.length < 1) {
+                throw new Error(t("event_setup_multiple_duration_error"));
+              } else {
+                if (!length && !metadata?.multipleDuration?.includes(length)) {
+                  throw new Error(t("event_setup_multiple_duration_default_error"));
+                }
+              }
+            }
+
+            // Prevent two payment apps to be enabled
+            // Ok to cast type here because this metadata will be updated as the event type metadata
+            if (checkForMultiplePaymentApps(metadata as z.infer<typeof EventTypeMetaDataSchema>))
+              throw new Error(t("event_setup_multiple_payment_apps_error"));
+
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { availability, users, scheduleName, ...rest } = input;
+            updateMutation.mutate({
+              ...rest,
+              length,
+              locations,
+              recurringEvent,
+              periodStartDate: periodDates.startDate,
+              periodEndDate: periodDates.endDate,
+              periodCountCalendarDays: periodCountCalendarDays === "1",
+              id: eventType.id,
+              beforeEventBuffer,
+              afterEventBuffer,
+              bookingLimits,
+              onlyShowFirstAvailableSlot,
+              durationLimits,
+              seatsPerTimeSlot,
+              seatsShowAttendees,
+              seatsShowAvailabilityCount,
+              metadata,
+              customInputs,
+            });
+          }}>
+          <div ref={animationParentRef}>{tabMap[tabName]}</div>
+        </Form>
+      </EventTypeSingleLayout>
+
+      {slugExistsChildrenDialogOpen.length ? (
+        <ManagedEventTypeDialog
+          slugExistsChildrenDialogOpen={slugExistsChildrenDialogOpen}
+          isPending={formMethods.formState.isSubmitting}
+          onOpenChange={() => {
+            setSlugExistsChildrenDialogOpen([]);
+          }}
+          slug={slug}
+          onConfirm={(e: { preventDefault: () => void }) => {
+            e.preventDefault();
+            handleSubmit(formMethods.getValues());
+            telemetry.event(telemetryEventTypes.slugReplacementAction);
+            setSlugExistsChildrenDialogOpen([]);
+          }}
+        />
+      ) : null}
+    </>
+  );
+};
+
+const EventTypePageWrapper: React.FC<PageProps> & {
+  PageWrapper?: AppProps["Component"]["PageWrapper"];
+  getLayout?: AppProps["Component"]["getLayout"];
+} = (props) => {
+  const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });
+
+  if (!data) return null;
+  return <EventTypePage {...(data as EventTypeSetupProps)} />;
+};
+
+export default EventTypePageWrapper;

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

@@ -0,0 +1,277 @@
+import type { DehydratedState } from "@tanstack/react-query";
+import type { GetServerSideProps } from "next";
+import { encode } from "querystring";
+import type { z } from "zod";
+
+import { handleUserRedirection } from "@calcom/features/booking-redirect/handle-user";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { DEFAULT_DARK_BRAND_COLOR, DEFAULT_LIGHT_BRAND_COLOR } from "@calcom/lib/constants";
+import { getUsernameList } from "@calcom/lib/defaultEvents";
+import logger from "@calcom/lib/logger";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import { safeStringify } from "@calcom/lib/safeStringify";
+import { UserRepository } from "@calcom/lib/server/repository/user";
+import { stripMarkdown } from "@calcom/lib/stripMarkdown";
+import prisma from "@calcom/prisma";
+import { RedirectType, type EventType, type User } from "@calcom/prisma/client";
+import { baseEventTypeSelect } from "@calcom/prisma/selects";
+import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import type { UserProfile } from "@calcom/types/UserProfile";
+
+import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+import type { EmbedProps } from "@lib/withEmbedSsr";
+
+import { ssrInit } from "@server/lib/ssr";
+
+const log = logger.getSubLogger({ prefix: ["[[pages/[user]]]"] });
+export type UserPageProps = {
+  trpcState: DehydratedState;
+  profile: {
+    name: string;
+    image: string;
+    theme: string | null;
+    brandColor: string;
+    darkBrandColor: string;
+    organization: {
+      requestedSlug: string | null;
+      slug: string | null;
+      id: number | null;
+    } | null;
+    allowSEOIndexing: boolean;
+    username: string | null;
+  };
+  users: (Pick<User, "away" | "name" | "username" | "bio" | "verified" | "avatarUrl"> & {
+    profile: UserProfile;
+  })[];
+  themeBasis: string | null;
+  markdownStrippedBio: string;
+  safeBio: string;
+  entity: {
+    isUnpublished?: boolean;
+    orgSlug?: string | null;
+    name?: string | null;
+  };
+  eventTypes: ({
+    descriptionAsSafeHTML: string;
+    metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  } & Pick<
+    EventType,
+    | "id"
+    | "title"
+    | "slug"
+    | "length"
+    | "hidden"
+    | "lockTimeZoneToggleOnBookingPage"
+    | "requiresConfirmation"
+    | "requiresBookerEmailVerification"
+    | "price"
+    | "currency"
+    | "recurringEvent"
+  >)[];
+} & EmbedProps;
+
+export const getEventTypesWithHiddenFromDB = async (userId: number) => {
+  const eventTypes = await prisma.eventType.findMany({
+    where: {
+      AND: [
+        {
+          teamId: null,
+        },
+        {
+          OR: [
+            {
+              userId,
+            },
+            {
+              users: {
+                some: {
+                  id: userId,
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    orderBy: [
+      {
+        position: "desc",
+      },
+      {
+        id: "asc",
+      },
+    ],
+    select: {
+      ...baseEventTypeSelect,
+      metadata: true,
+    },
+  });
+  // map and filter metadata, exclude eventType entirely when faulty metadata is found.
+  // report error to exception so we don't lose the error.
+  return eventTypes.reduce<typeof eventTypes>((eventTypes, eventType) => {
+    const parsedMetadata = EventTypeMetaDataSchema.safeParse(eventType.metadata);
+    if (!parsedMetadata.success) {
+      log.error(parsedMetadata.error);
+      return eventTypes;
+    }
+    eventTypes.push({
+      ...eventType,
+      metadata: parsedMetadata.data,
+    });
+    return eventTypes;
+  }, []);
+};
+
+export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
+  const usernameList = getUsernameList(context.query.user as string);
+  const isOrgContext = isValidOrgDomain && currentOrgDomain;
+  const dataFetchStart = Date.now();
+  let outOfOffice = false;
+
+  if (usernameList.length === 1) {
+    const result = await handleUserRedirection({ username: usernameList[0] });
+    if (result && result.outOfOffice) {
+      outOfOffice = true;
+    }
+    if (result && result.redirect?.destination) {
+      return result;
+    }
+  }
+
+  if (!isOrgContext) {
+    // If there is no org context, see if some redirect is setup due to org migration
+    const redirect = await getTemporaryOrgRedirect({
+      slugs: usernameList,
+      redirectType: RedirectType.User,
+      eventTypeSlug: null,
+      currentQuery: context.query,
+    });
+
+    if (redirect) {
+      return redirect;
+    }
+  }
+
+  const usersInOrgContext = await UserRepository.findUsersByUsername({
+    usernameList,
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
+  });
+
+  const usersWithoutAvatar = usersInOrgContext.map((user) => {
+    const { avatar: _1, ...rest } = user;
+    return rest;
+  });
+
+  const isDynamicGroup = usersWithoutAvatar.length > 1;
+  log.debug(safeStringify({ usersInOrgContext, isValidOrgDomain, currentOrgDomain, isDynamicGroup }));
+
+  if (isDynamicGroup) {
+    const destinationUrl = `/${usernameList.join("+")}/dynamic`;
+    log.debug(`Dynamic group detected, redirecting to ${destinationUrl}`);
+    return {
+      redirect: {
+        permanent: false,
+        destination: destinationUrl,
+      },
+    } as {
+      redirect: {
+        permanent: false;
+        destination: string;
+      };
+    };
+  }
+
+  const users = usersWithoutAvatar.map((user) => ({
+    ...user,
+    avatar: `/${user.username}/avatar.png`,
+  }));
+
+  const isNonOrgUser = (user: { profile: UserProfile }) => {
+    return !user.profile?.organization;
+  };
+
+  const isThereAnyNonOrgUser = users.some(isNonOrgUser);
+
+  if (!users.length || (!isValidOrgDomain && !isThereAnyNonOrgUser)) {
+    return {
+      notFound: true,
+    } as {
+      notFound: true;
+    };
+  }
+
+  const [user] = users; //to be used when dealing with single user, not dynamic group
+
+  const profile = {
+    name: user.name || user.username || "",
+    image: user.avatar,
+    theme: user.theme,
+    brandColor: user.brandColor ?? DEFAULT_LIGHT_BRAND_COLOR,
+    avatarUrl: user.avatarUrl,
+    darkBrandColor: user.darkBrandColor ?? DEFAULT_DARK_BRAND_COLOR,
+    allowSEOIndexing: user.allowSEOIndexing ?? true,
+    username: user.username,
+    organization: user.profile.organization,
+  };
+
+  const eventTypesWithHidden = await getEventTypesWithHiddenFromDB(user.id);
+  const dataFetchEnd = Date.now();
+  if (context.query.log === "1") {
+    context.res.setHeader("X-Data-Fetch-Time", `${dataFetchEnd - dataFetchStart}ms`);
+  }
+  const eventTypesRaw = eventTypesWithHidden.filter((evt) => !evt.hidden);
+
+  const eventTypes = eventTypesRaw.map((eventType) => ({
+    ...eventType,
+    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
+    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
+  }));
+
+  // if profile only has one public event-type, redirect to it
+  if (eventTypes.length === 1 && context.query.redirect !== "false" && !outOfOffice) {
+    // Redirect but don't change the URL
+    const urlDestination = `/${user.profile.username}/${eventTypes[0].slug}`;
+    const { query } = context;
+    const urlQuery = new URLSearchParams(encode(query));
+
+    return {
+      redirect: {
+        permanent: false,
+        destination: `${urlDestination}?${urlQuery}`,
+      },
+    };
+  }
+
+  const safeBio = markdownToSafeHTML(user.bio) || "";
+
+  const markdownStrippedBio = stripMarkdown(user?.bio || "");
+  const org = usersWithoutAvatar[0].profile.organization;
+
+  return {
+    props: {
+      users: users.map((user) => ({
+        name: user.name,
+        username: user.username,
+        bio: user.bio,
+        avatarUrl: user.avatarUrl,
+        away: usernameList.length === 1 ? outOfOffice : user.away,
+        verified: user.verified,
+        profile: user.profile,
+      })),
+      entity: {
+        isUnpublished: org?.slug === null,
+        orgSlug: currentOrgDomain,
+        name: org?.name ?? null,
+      },
+      eventTypes,
+      safeBio,
+      profile,
+      // Dynamic group has no theme preference right now. It uses system theme.
+      themeBasis: user.username,
+      trpcState: ssr.dehydrate(),
+      markdownStrippedBio,
+    },
+  };
+};

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

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

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

@@ -5,13 +5,17 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { handleTypeRedirection } from "@calcom/features/booking-redirect/handle-type";
 import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
+import { UserRepository } from "@calcom/lib/server/repository/user";
 import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
 import { RedirectType } from "@calcom/prisma/client";
 
 import { getTemporaryOrgRedirect } from "@lib/getTemporaryOrgRedirect";
+import { type inferSSRProps } from "@lib/types/inferSSRProps";
+import { type EmbedProps } from "@lib/withEmbedSsr";
+
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession(context);
@@ -35,22 +39,13 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
     }
   }
 
-  const users = await prisma.user.findMany({
-    where: {
-      username: {
-        in: usernames,
-      },
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
-    },
-    select: {
-      allowDynamicBooking: true,
-    },
+  const usersInOrgContext = await UserRepository.findUsersByUsername({
+    usernameList: usernames,
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
   });
 
+  const users = usersInOrgContext;
+
   if (!users.length) {
     return {
       notFound: true,
@@ -125,16 +120,9 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
 
   const { ssrInit } = await import("@server/lib/ssr");
   const ssr = await ssrInit(context);
-  const user = await prisma.user.findFirst({
-    where: {
-      username,
-      organization: userOrgQuery(context.req, context.params?.orgSlug),
-    },
-    select: {
-      id: true,
-      hideBranding: true,
-      allowSEOIndexing: true,
-    },
+  const [user] = await UserRepository.findUsersByUsername({
+    usernameList: [username],
+    orgSlug: isValidOrgDomain ? currentOrgDomain : null,
   });
 
   if (!user) {