v2.6.12

Root cause of the error is that both server and client try to parse date differently due to localStorage. Since server does not know localStorage when render initial HTML it renders page as if there is no value set for time format.
 On the other hand, client side know the value of time format when it tries to render.

To fix the issue, we force it to parse date with default format at the initial rendering time.

- Add `withDefaultTimeFormat` argument to `parseDate` function
- Add `withDefaultTimeFormat` argument to `parseRecurringDates` function
- Leverage useEffect to dynamically update `withDefaultTimeFormat` arg passed to function

Co-authored-by: sangboak.lee <sangboak.lee@woowahan.com>
Co-authored-by: zomars <zomars@me.com>

.env.example

@@ -39,6 +39,8 @@ SAML_DATABASE_URL=
 SAML_ADMINS=
 # NEXT_PUBLIC_HOSTED_CAL_FEATURES=1
 NEXT_PUBLIC_HOSTED_CAL_FEATURES=
+# For additional security set to a random secret and use that value as the client_secret during the OAuth 2.0 flow.
+SAML_CLIENT_SECRET_VERIFIER=
 
 # If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
 # @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
@@ -76,6 +78,10 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=
 
+# Fresh Chat Config
+NEXT_PUBLIC_FRESHCHAT_TOKEN=
+NEXT_PUBLIC_FRESHCHAT_HOST=
+
 # Inbox to send user feedback
 SEND_FEEDBACK_EMAIL=
 

.github/CODEOWNERS

@@ -17,16 +17,17 @@ scripts/    @calcom/core
 apps/docs       @calcom/docs
 apps/swagger    @calcom/docs
 
-packages/app-store-cli                @hariombalhara
-packages/dayjs                        @zomars
-packages/emails                       @zomars
-packages/embeds                       @hariombalhara
-packages/eslint-plugin                @zomars
-packages/features                     @zomars
-packages/features/kbar                @alishaz-polymath 
-packages/features/ee/impersonation    @sean-brydon
-packages/features/ee/payments         @alannnc
-packages/features/ee/workflows        @CarinaWolli
-packages/features/tips                @PeerRich
+packages/app-store-cli                @hariombalhara @calcom/core
+packages/dayjs                        @zomars @calcom/core
+packages/emails                       @zomars @calcom/core
+packages/embeds                       @hariombalhara @calcom/core
+packages/eslint-plugin                @zomars @calcom/core
+packages/features                     @zomars @calcom/core
+packages/features/kbar                @alishaz-polymath @calcom/core
+packages/features/ee/impersonation    @sean-brydon @calcom/core
+packages/features/ee/payments         @alannnc @calcom/core
+packages/features/ee/workflows        @CarinaWolli @calcom/core
+packages/features/tips                @PeerRich @calcom/core
 packages/ui                           @calcom/ui
 packages/config                       @calcom/core
+packages/app-store/routing-forms   @hariombalhara @calcom/core

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

@@ -1,23 +1,28 @@
 name: Cache production build binaries
 description: "Cache or restore if necessary"
-env:
-  node_version: v16.x
+inputs:
+  node_version:
+    required: false
+    default: v16.x
 runs:
   using: "composite"
   steps:
     - name: Cache production build
       uses: actions/cache@v3
+      id: cache-build
       env:
         cache-name: prod-build
-        key-1: ${{ env.node_version }}-${{ hashFiles('yarn.lock') }}
-        key-2: ${{ hashFiles('apps/web/next.config.js') }}
+        key-1: ${{ inputs.node_version }}-${{ hashFiles('yarn.lock') }}
+        key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
+        key-3: ${{ github.event.pull_request.number || github.ref }}
+        # Ensures production-build.yml will always be fresh
+        key-4: ${{ github.sha }}
       with:
         path: |
-          apps/web/.next
-          node_modules/.cache/turbo
+          ${{ github.workspace }}/apps/web/.next
           **/.turbo/**
           **/dist/**
-        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ github.sha }}
-        restore-keys: |
-          ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-
-          ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}-${{ env.key-4 }}
+    - run: yarn build
+      if: steps.cache-build.outputs.cache-hit != 'true'
+      shell: bash

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

@@ -2,7 +2,8 @@ name: Cache database between jobs
 description: "Cache or restore if necessary"
 inputs:
   DATABASE_URL:
-    required: true
+    required: false
+    default: "postgresql://postgres:@localhost:5432/calendso"
   path:
     required: false
     default: "backups/backup.sql"
@@ -14,11 +15,14 @@ runs:
       uses: actions/cache@v3
       env:
         cache-name: cache-db
+        key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}
+        key-2: ${{ github.event.pull_request.number || github.ref }}
       with:
         path: ${{ inputs.path }}
-        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ github.sha }}
-        restore-keys: | 
-          ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ github.sha }}
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ env.key-1 }}-${{ env.key-2 }}
+    - run: yarn db-seed
+      if: steps.cache-db.outputs.cache-hit != 'true'
+      shell: bash
     - name: Postgres Dump Backup
       if: steps.cache-db.outputs.cache-hit != 'true'
       uses: tj-actions/pg-dump@v2.3

.github/actions/env-read-file/action.yml

@@ -0,0 +1,16 @@
+name: "Set environment variables"
+description: "Configures environment variables for a workflow"
+runs:
+  using: "composite"
+  steps:
+    - name: Create env file
+      uses: actions/cache@v3
+      id: env-cache
+      with:
+        path: gh.env
+        key: env-cache-${{ hashFiles('gh.env') }}
+        restore-keys: env-cache-
+    - name: Set Environment Variables
+      uses: tw3lveparsecs/github-actions-setvars@latest
+      with:
+        envFilePath: gh.env

.github/actions/yarn-build/action.yml

@@ -1,104 +0,0 @@
-name: Production Build
-description: "Creates a production build, caches it and restores if necessary"
-inputs:
-  DATABASE_URL:
-    required: true
-  NEXT_PUBLIC_WEBAPP_URL:
-    required: true
-  NEXT_PUBLIC_WEBSITE_URL:
-    required: true
-  NEXTAUTH_SECRET:
-    required: true
-  GOOGLE_API_CREDENTIALS:
-    required: true
-  GOOGLE_LOGIN_ENABLED:
-    required: true
-  CRON_API_KEY:
-    required: false
-  CALENDSO_ENCRYPTION_KEY:
-    required: true
-  DAILY_API_KEY:
-    required: true
-  NEXT_PUBLIC_STRIPE_PUBLIC_KEY:
-    required: true
-  NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE:
-    required: true
-  NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE:
-    required: true
-  NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE:
-    required: true
-  NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE:
-    required: true
-  NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN:
-    required: true
-  STRIPE_PRIVATE_KEY:
-    required: true
-  STRIPE_CLIENT_ID:
-    required: true
-  STRIPE_WEBHOOK_SECRET:
-    required: true
-  STRIPE_PRO_PLAN_PRODUCT_ID:
-    required: true
-  STRIPE_PREMIUM_PLAN_PRODUCT_ID:
-    required: true
-  STRIPE_FREE_PLAN_PRODUCT_ID:
-    required: true
-  PAYMENT_FEE_PERCENTAGE:
-    required: true
-  PAYMENT_FEE_FIXED:
-    required: true
-  SAML_DATABASE_URL:
-    required: true
-  SAML_ADMINS:
-    required: true
-  NEXTAUTH_URL:
-    required: true
-  NEXT_PUBLIC_IS_E2E:
-    required: true
-  TURBO_TOKEN:
-    required: true
-  TURBO_TEAM:
-    required: true
-
-runs:
-  using: "composite"
-  steps:
-    - uses: actions/checkout@v3
-    - uses: ./.github/actions/yarn-install
-    - uses: ./.github/actions/cache-build
-      id: prod-build-cache
-    - name: Next.js production build
-      if: steps.prod-build-cache.outputs.cache-hit != 'true'
-      shell: bash
-      env:
-        DATABASE_URL: ${{ inputs.DATABASE_URL }}
-        NEXT_PUBLIC_WEBAPP_URL: ${{ inputs.NEXT_PUBLIC_WEBAPP_URL }}
-        NEXT_PUBLIC_WEBSITE_URL: ${{ inputs.NEXT_PUBLIC_WEBSITE_URL }}
-        NEXTAUTH_SECRET: ${{ inputs.NEXTAUTH_SECRET }}
-        GOOGLE_API_CREDENTIALS: ${{ inputs.GOOGLE_API_CREDENTIALS }}
-        GOOGLE_LOGIN_ENABLED: ${{ inputs.GOOGLE_LOGIN_ENABLED }}
-        CALENDSO_ENCRYPTION_KEY: ${{ inputs.CALENDSO_ENCRYPTION_KEY }}
-        DAILY_API_KEY: ${{ inputs.DAILY_API_KEY }}
-        NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ inputs.NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-        NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ inputs.NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-        NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ inputs.NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-        NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ inputs.NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-        NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ inputs.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-        NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: ${{ inputs.NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN }}
-        STRIPE_PRIVATE_KEY: ${{ inputs.STRIPE_PRIVATE_KEY }}
-        STRIPE_CLIENT_ID: ${{ inputs.STRIPE_CLIENT_ID }}
-        STRIPE_WEBHOOK_SECRET: ${{ inputs.STRIPE_WEBHOOK_SECRET }}
-        STRIPE_PRO_PLAN_PRODUCT_ID: ${{ inputs.STRIPE_PRO_PLAN_PRODUCT_ID }}
-        STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ inputs.STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-        STRIPE_FREE_PLAN_PRODUCT_ID: ${{ inputs.STRIPE_FREE_PLAN_PRODUCT_ID }}
-        PAYMENT_FEE_PERCENTAGE: ${{ inputs.PAYMENT_FEE_PERCENTAGE }}
-        PAYMENT_FEE_FIXED: ${{ inputs.PAYMENT_FEE_FIXED }}
-        SAML_DATABASE_URL: ${{ inputs.SAML_DATABASE_URL }}
-        SAML_ADMINS: ${{ inputs.SAML_ADMINS }}
-        NEXTAUTH_URL: ${{ inputs.NEXTAUTH_URL }}
-        NEXT_PUBLIC_IS_E2E: ${{ inputs.NEXT_PUBLIC_IS_E2E }}
-        TURBO_TOKEN: ${{ inputs.TURBO_TOKEN }}
-        TURBO_TEAM: ${{ inputs.TURBO_TEAM }}
-      run: |
-        yarn db-seed
-        yarn build

.github/actions/yarn-install/action.yml

@@ -1,30 +1,19 @@
 name: Yarn install
 description: "Install all NPM dependencies, caches them and restores if necessary"
-env:
-  node_version: v16.x
+inputs:
+  node_version:
+    required: false
+    default: v16.x
 runs:
   using: "composite"
   steps:
-    - name: Use Node ${{ env.node_version }}
+    - name: Use Node ${{ inputs.node_version }}
       uses: actions/setup-node@v3
       with:
-        node-version: ${{ env.node_version }}
+        node-version: ${{ inputs.node_version }}
         cache: "yarn"
-    - name: node_modules cache
-      id: node-modules-cache
-      uses: actions/cache@v3
-      env:
-        cache-name: node-modules-yarn
-        cache-key: ${{ env.node_version }}-${{ hashFiles('yarn.lock', 'packages/prisma/schema.prisma') }}
-      with:
-        path: |
-          **/node_modules/**
-          packages/prisma/zod
-        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.cache-key }}
-        restore-keys: ${{ runner.os }}-${{ env.cache-name }}-
     - name: Yarn install
       shell: bash
-      if: steps.node-modules-cache.outputs.cache-hit != 'true'
       run: |
         yarn install --prefer-offline --frozen-lockfile
         yarn prisma generate

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

@@ -7,37 +7,6 @@ jobs:
     timeout-minutes: 20
     name: E2E App-Store Apps
     runs-on: ubuntu-latest
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -53,13 +22,13 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
-        with:
-          DATABASE_URL: ${{ env.DATABASE_URL }}
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn test-e2e:app-store
-
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2

.github/workflows/e2e-embed.yml

@@ -6,41 +6,6 @@ jobs:
   e2e-embed:
     timeout-minutes: 20
     runs-on: ubuntu-latest
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -56,22 +21,23 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
-        with:
-          DATABASE_URL: ${{ env.DATABASE_URL }}
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload embed-core results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
+          name: test-results-embed-core
           path: packages/embeds/embed-core/playwright/results
 
       - name: Upload embed-react results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-react
+          name: test-results-embed-react
           path: packages/embeds/embed-react/playwright/results

.github/workflows/e2e.yml

@@ -4,46 +4,8 @@ on:
 jobs:
   e2e:
     timeout-minutes: 20
-    runs-on: buildjet-4vcpu-ubuntu-2204
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
-      STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-      STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    name: E2E tests
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:12.1
@@ -52,19 +14,20 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
-        with:
-          DATABASE_URL: ${{ env.DATABASE_URL }}
       - uses: ./.github/actions/cache-build
-      - run: yarn test-e2e
-      - name: Upload test results
+      - name: Run Tests
+        run: yarn test-e2e
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:

.github/workflows/env-create-file.yml

@@ -0,0 +1,49 @@
+name: Create .env file
+
+on:
+  workflow_call:
+
+env:
+  INPUT_ENV_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+  INPUT_ENV_NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+  INPUT_ENV_NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+  INPUT_ENV_NEXTAUTH_SECRET: secret
+  INPUT_ENV_GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  INPUT_ENV_GOOGLE_LOGIN_ENABLED: true
+  # INPUT_ENV_CRON_API_KEY: xxx
+  INPUT_ENV_CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  INPUT_ENV_NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  INPUT_ENV_STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  INPUT_ENV_STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  INPUT_ENV_STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  INPUT_ENV_PAYMENT_FEE_PERCENTAGE: 0.005
+  INPUT_ENV_PAYMENT_FEE_FIXED: 10
+  INPUT_ENV_SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+  INPUT_ENV_SAML_ADMINS: pro@example.com
+  INPUT_ENV_NEXTAUTH_URL: http://localhost:3000/api/auth
+  INPUT_ENV_NEXT_PUBLIC_IS_E2E: 1
+  # INPUT_ENV_EMAIL_FROM: e2e@cal.com
+  # INPUT_ENV_EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+  # INPUT_ENV_EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+  # INPUT_ENV_EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+  # INPUT_ENV_EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+  # INPUT_ENV_MS_GRAPH_CLIENT_ID: xxx
+  # INPUT_ENV_MS_GRAPH_CLIENT_SECRET: xxx
+  # INPUT_ENV_ZOOM_CLIENT_ID: xxx
+  # INPUT_ENV_ZOOM_CLIENT_SECRET: xxx
+  INPUT_ENV_TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  INPUT_ENV_TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
+jobs:
+  create_env_file:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ozaytsev86/create-env-file@v1
+        with:
+          file-name: ${{ github.workspace }}/gh.env
+      - uses: actions/cache@v3
+        id: env-cache
+        with:
+          path: gh.env
+          key: env-cache-${{ hashFiles('gh.env') }}

.github/workflows/pr.yml

@@ -4,6 +4,9 @@ on:
   pull_request_target:
     branches:
       - main
+    paths-ignore:
+      - "**.md"
+      - ".github/CODEOWNERS"
   workflow_dispatch:
 
 concurrency:
@@ -32,38 +35,35 @@ jobs:
               - 'apps/web/**'
               - 'packages/embeds/**'
 
-  setup:
-    name: Yarn install & cache
-    uses: ./.github/workflows/yarn-install.yml
+  env:
+    name: Create env file
+    uses: ./.github/workflows/env-create-file.yml
     secrets: inherit
 
   type-check:
     name: Type check
-    needs: setup
     uses: ./.github/workflows/check-types.yml
     secrets: inherit
 
   test:
     name: Unit tests
-    needs: setup
     uses: ./.github/workflows/test.yml
     secrets: inherit
 
   lint:
     name: Linters
-    needs: setup
     uses: ./.github/workflows/lint.yml
     secrets: inherit
 
   build:
     name: Production build
-    needs: setup
+    needs: env
     uses: ./.github/workflows/production-build.yml
     secrets: inherit
 
   e2e:
     name: E2E tests
-    needs: [lint, build]
+    needs: [changes, lint, build]
     uses: ./.github/workflows/e2e.yml
     secrets: inherit
 
@@ -78,7 +78,7 @@ jobs:
     name: E2E embeds tests
     if: ${{ needs.changes.outputs.embed == 'true' }}
     needs: [changes, lint, build]
-    uses: ./.github/workflows/e2e.yml
+    uses: ./.github/workflows/e2e-embed.yml
     secrets: inherit
 
   analyze:

.github/workflows/production-build.yml

@@ -3,36 +3,6 @@ name: Production Build
 on:
   workflow_call:
 
-env:
-  DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-  NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-  NEXTAUTH_SECRET: secret
-  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-  GOOGLE_LOGIN_ENABLED: true
-  # CRON_API_KEY: xxx
-  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-  DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
-  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-  NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-  NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-  NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-  NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-  NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-  STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
-  STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-  STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
-  PAYMENT_FEE_PERCENTAGE: 0.005
-  PAYMENT_FEE_FIXED: 10
-  SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  SAML_ADMINS: pro@example.com
-  NEXTAUTH_URL: http://localhost:3000/api/auth
-  NEXT_PUBLIC_IS_E2E: 1
-  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
 jobs:
   build:
     name: Build
@@ -48,38 +18,8 @@ jobs:
           - 5432:5432
     steps:
       - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/yarn-build
-        with:
-          # GitHub Composite actions cannot read secrets, we have to pass them in here
-          DATABASE_URL: ${{ env.DATABASE_URL }}
-          NEXT_PUBLIC_WEBAPP_URL: ${{ env.NEXT_PUBLIC_WEBAPP_URL }}
-          NEXT_PUBLIC_WEBSITE_URL: ${{ env.NEXT_PUBLIC_WEBSITE_URL }}
-          NEXTAUTH_SECRET: ${{ env.NEXTAUTH_SECRET }}
-          GOOGLE_API_CREDENTIALS: ${{ env.GOOGLE_API_CREDENTIALS }}
-          GOOGLE_LOGIN_ENABLED: ${{ env.GOOGLE_LOGIN_ENABLED }}
-          CALENDSO_ENCRYPTION_KEY: ${{ env.CALENDSO_ENCRYPTION_KEY }}
-          DAILY_API_KEY: ${{ env.DAILY_API_KEY }}
-          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-          NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ env.NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-          NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ env.NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-          NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ env.NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-          NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ env.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-          NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: ${{ env.NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN }}
-          STRIPE_PRIVATE_KEY: ${{ env.STRIPE_PRIVATE_KEY }}
-          STRIPE_CLIENT_ID: ${{ env.STRIPE_CLIENT_ID }}
-          STRIPE_WEBHOOK_SECRET: ${{ env.STRIPE_WEBHOOK_SECRET }}
-          STRIPE_PRO_PLAN_PRODUCT_ID: ${{ env.STRIPE_PRO_PLAN_PRODUCT_ID }}
-          STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ env.STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-          STRIPE_FREE_PLAN_PRODUCT_ID: ${{ env.STRIPE_FREE_PLAN_PRODUCT_ID }}
-          PAYMENT_FEE_PERCENTAGE: ${{ env.PAYMENT_FEE_PERCENTAGE }}
-          PAYMENT_FEE_FIXED: ${{ env.PAYMENT_FEE_FIXED }}
-          SAML_DATABASE_URL: ${{ env.SAML_DATABASE_URL }}
-          SAML_ADMINS: ${{ env.SAML_ADMINS }}
-          NEXTAUTH_URL: ${{ env.NEXTAUTH_URL }}
-          NEXT_PUBLIC_IS_E2E: ${{ env.NEXT_PUBLIC_IS_E2E }}
-          TURBO_TOKEN: ${{ env.TURBO_TOKEN }}
-          TURBO_TEAM: ${{ env.TURBO_TEAM }}
+      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
-        with:
-          DATABASE_URL: ${{ env.DATABASE_URL }}
+      - uses: ./.github/actions/cache-build

.github/workflows/todo-to-issue.yml

@@ -1,6 +1,6 @@
 name: TODO to Issue
 on:
-  pull_request_target: # So we can test on forks
+  push:
     branches:
       - main
   workflow_dispatch:
@@ -12,17 +12,13 @@ on:
         description: "By default, the commit entered above is compared to the one directly before it; to go back further, enter an earlier SHA here"
         required: false
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 jobs:
   todos:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
+      - uses: actions/checkout@v3
       - name: "Add TODOs to issues"
         uses: "alstr/todo-to-issue-action@v4"
         env:

.gitignore

@@ -77,9 +77,6 @@ lint-results
 #Storybook
 apps/storybook/build-storybook.log
 
-# Infisical
-.infisical.json
-
 # Snaplet
 .snaplet/snapshots
 .snaplet/structure.d.ts

.infisical.json

@@ -0,0 +1,8 @@
+{
+  "workspaceId": "63ea8121b6e2b0543ba79616",
+  "defaultEnvironment": "dev",
+  "gitBranchToEnvironmentMapping": {
+    "main": "staging",
+    "production": "prod"
+  }
+}

.vscode/launch.json

@@ -2,38 +2,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Next.js: Server",
-      "type": "node-terminal",
+      "type": "node",
       "request": "launch",
-      "command": "npm run dev",
-      "skipFiles": ["<node_internals>/**"],
-      "outFiles": [
-        "${workspaceFolder}/**/*.js",
-        "!**/node_modules/**"
-      ],
-      "sourceMaps": true,
-      "resolveSourceMapLocations": [
-        "${workspaceFolder}/**",
-        "!**/node_modules/**"
-      ]
-    },
-    {
-      "name": "Next.js: Client",
-      "type": "pwa-chrome",
-      "request": "launch",
-      "url": "http://localhost:3000"
-    },
-    {
-      "name": "Next.js: Full Stack",
-      "type": "node-terminal",
-      "request": "launch",
-      "command": "npm run dev",
+      "name": "Next.js Node Debug",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
+      "env": {
+        "NODE_OPTIONS": "--inspect"
+      },
+      "cwd": "${workspaceFolder}/apps/web",
       "console": "integratedTerminal",
-      "serverReadyAction": {
-        "pattern": "started server on .+, url: (https?://.+)",
-        "uriFormat": "%s",
-        "action": "debugWithChrome"
+      "sourceMapPathOverrides": {
+        "meteor://💻app/*": "${workspaceFolder}/*",
+        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack://?:*/*": "${workspaceFolder}/*"
       }
     }
   ]
-}
+}

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Contributions are what make the open source community such an amazing place to l
 
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
 
-## Priorities 
+## Priorities
 
 <table>
   <tr>
@@ -57,7 +57,6 @@ Contributions are what make the open source community such an amazing place to l
   </tr>
 </table>
 
-
 ## Developing
 
 The development branch is `main`. This is the branch that all pull
@@ -128,6 +127,6 @@ If you get errors, be sure to fix them before committing.
 ## Making a Pull Request
 
 - Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
-- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. Se more about [Linking a pull request to an issue
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue
   ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.

README.md

@@ -352,6 +352,14 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
 </a>  
 
 
+<!-- CONTRIBUTORS -->
+
+### Contributors
+
+<a href="https://github.com/calcom/cal.com/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=calcom/cal.com" />
+</a>
+
 <!-- TRANSLATIONS -->
 
 ### Translations

apps/docs/package.json

@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
     "react": "^18.2.0",

apps/storybook/next.config.js

@@ -1,21 +1,7 @@
 const withBundleAnalyzer = require("@next/bundle-analyzer");
 
-const withTM = require("next-transpile-modules")([
-  "@calcom/app-store",
-  "@calcom/dayjs",
-  "@calcom/emails",
-  "@calcom/trpc",
-  "@calcom/embed-core",
-  "@calcom/embed-react",
-  "@calcom/features",
-  "@calcom/lib",
-  "@calcom/prisma",
-  "@calcom/ui",
-]);
-const glob = require("glob");
-
 const plugins = [];
-plugins.push(withTM, withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
@@ -27,7 +13,18 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
-  experimental: { images: { allowFutureImage: true } },
+  transpilePackages: [
+    "@calcom/app-store",
+    "@calcom/dayjs",
+    "@calcom/emails",
+    "@calcom/trpc",
+    "@calcom/embed-core",
+    "@calcom/embed-react",
+    "@calcom/features",
+    "@calcom/lib",
+    "@calcom/prisma",
+    "@calcom/ui",
+  ],
   eslint: {
     ignoreDuringBuilds: true,
   },

apps/storybook/package.json

@@ -20,7 +20,7 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-addon-rtl-direction": "^0.0.19"

apps/swagger/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "openapi-snippet": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/components/AppListCard.tsx

@@ -64,7 +64,7 @@ export default function AppListCard(props: AppListCardProps) {
 
   return (
     <div className={`${highlight ? "bg-yellow-100" : ""}`}>
-      <div className="flex gap-x-3 p-4">
+      <div className="flex gap-x-3 px-5 py-4">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">

apps/web/components/Embed.tsx

@@ -669,8 +669,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedUrl: string;
 }) => {
   const { t } = useLocale();
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
   const s = (href: string) => {
     const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
@@ -809,7 +812,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation">
+    <DialogContent ref={dialogContentRef} size="xl" className="p-0.5" type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
@@ -960,6 +963,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -979,6 +984,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -1060,6 +1067,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         <div className="mb-2 pt-2">{palette.title}</div>
                         <div className="w-full">
                           <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
                             defaultValue="#000000"
                             onChange={(color) => {
                               addToPalette({

apps/web/components/apps/App.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
 import Shell from "@calcom/features/shell/Shell";
@@ -24,6 +24,8 @@ import {
   FiShield,
 } from "@calcom/ui/components/icon";
 
+/* These app slugs all require Google Cal to be installed */
+
 const Component = ({
   name,
   type,
@@ -45,6 +47,7 @@ const Component = ({
   isProOnly,
   images,
   isTemplate,
+  dependencies,
 }: Parameters<typeof App>[0]) => {
   const { t } = useLocale();
   const hasImages = images && images.length > 0;
@@ -76,6 +79,15 @@ const Component = ({
     }
   );
 
+  const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
+    enabled: !!dependencies,
+  });
+
+  const disableInstall =
+    dependencyData.data && dependencyData.data.some((dependency) => !dependency.installed);
+
+  // const disableInstall = requiresGCal && !gCalInstalled.data;
+
   // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
   // Such apps, can only be installed once.
   const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
@@ -137,6 +149,7 @@ const Component = ({
                 <InstallAppButton
                   type={type}
                   isProOnly={isProOnly}
+                  disableInstall={disableInstall}
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
@@ -176,6 +189,7 @@ const Component = ({
             <InstallAppButton
               type={type}
               isProOnly={isProOnly}
+              disableInstall={disableInstall}
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
@@ -203,6 +217,16 @@ const Component = ({
         ) : (
           <SkeletonButton className="h-10 w-24" />
         )}
+
+        {dependencies &&
+          (!dependencyData.isLoading ? (
+            <div className="mt-6">
+              <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
+            </div>
+          ) : (
+            <SkeletonButton className="mt-6 h-20 grow" />
+          ))}
+
         {price !== 0 && (
           <span className="block text-right">
             {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
@@ -332,6 +356,8 @@ export default function App(props: {
   isProOnly: AppType["isProOnly"];
   images?: string[];
   isTemplate?: boolean;
+  disableInstall?: boolean;
+  dependencies?: string[];
 }) {
   return (
     <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>

apps/web/components/apps/CalendarListContainer.tsx

@@ -88,7 +88,7 @@ function CalendarSwitch(props: {
     }
   );
   return (
-    <div className="flex py-1">
+    <div className="flex flex-col py-1 sm:flex-row">
       <Switch
         key={props.externalId}
         name="enabled"
@@ -99,7 +99,7 @@ function CalendarSwitch(props: {
         }}
       />
       {!!props.destination && (
-        <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+        <span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
           <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
@@ -184,8 +184,8 @@ function ConnectedCalendarsList(props: Props) {
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 p-4">
+                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
+                  <div className="flex flex-col gap-6 rounded-md border p-7">
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}

apps/web/components/availability/SkeletonLoader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui";
+import { Button, SkeletonText } from "@calcom/ui";
+import { FiMoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -18,17 +19,21 @@ export default SkeletonLoader;
 
 function SkeletonItem() {
   return (
-    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
-      <div className="flex-grow truncate text-sm">
-        <div className="flex flex-col space-y-2">
-          <SkeletonText className="h-4 w-32" />
-          <SkeletonText className="h-2 w-32" />
-        </div>
-      </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
-        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <SkeletonText className="h-6 w-12" />
+    <li>
+      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="items-between flex w-full flex-col justify-center hover:bg-neutral-50 sm:px-6">
+          <SkeletonText className="my-1 h-4 w-32" />
+          <SkeletonText className="my-1 h-2 w-24" />
+          <SkeletonText className="my-1 h-2 w-40" />
         </div>
+        <Button
+          className="mx-5"
+          type="button"
+          variant="icon"
+          color="secondary"
+          StartIcon={FiMoreHorizontal}
+          disabled
+        />
       </div>
     </li>
   );

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -17,10 +19,27 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
           // It's possible that the location app got uninstalled
           return null;
         }
+
+        const translateAbleKeys = [
+          "attendee_in_person",
+          "in_person",
+          "attendee_phone_number",
+          "link_meeting",
+          "organizer_phone_number",
+        ];
+
+        const locationKey = z.string().default("").parse(locationKeyToString(location));
+
+        const translatedLocation = location.type.startsWith("integrations:")
+          ? eventLocationType.label
+          : translateAbleKeys.includes(locationKey)
+          ? t(locationKey)
+          : locationKey;
+
         return (
           <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
             {eventLocationType.iconUrl === "/link.svg" ? (
-              <FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+              <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
             ) : (
               <img
                 src={eventLocationType.iconUrl}
@@ -31,14 +50,12 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
                 alt={`${eventLocationType.label} icon`}
               />
             )}
-            <Tooltip content={t(locationKeyToString(location) ?? "")}>
-              <p className="line-clamp-1">{t(locationKeyToString(location) ?? "")}</p>
+            <Tooltip content={translatedLocation}>
+              <p className="line-clamp-1">{translatedLocation}</p>
             </Tooltip>
           </div>
         );
       })}
     </div>
-  ) : (
-    <></>
-  );
+  ) : null;
 }

apps/web/components/booking/AvailableTimes.tsx

@@ -64,13 +64,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
-        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
-          <div className="mb-6 flex items-center text-left text-base">
+        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
+          <div className="mb-4 flex items-center text-left text-base">
             <div className="mr-4">
               <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
-              <span className="text-bookinglight font-medium">
+              <span className="text-bookinglight">
                 , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
               </span>
             </div>
@@ -85,7 +85,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               />
             </div>
           </div>
-          <div ref={ref} className="flex-grow overflow-y-auto sm:block md:h-[364px]">
+          <div
+            ref={ref}
+            className="scroll-bar scrollbar-track-w-20 relative -mb-4 flex-grow overflow-y-auto sm:block md:h-[364px]">
             {slots.length > 0 &&
               slots.map((slot) => {
                 type BookingURL = {

apps/web/components/booking/BookingDescription.tsx

@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
+import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -46,14 +46,16 @@ const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
   const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
-  const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration");
+  const { duration, setQuery: setDuration } = useRouterQuery("duration");
 
   useEffect(() => {
     if (
-      eventType.metadata?.multipleDuration &&
-      !eventType.metadata?.multipleDuration?.includes(Number(duration))
+      !duration ||
+      isNaN(Number(duration)) ||
+      (eventType.metadata?.multipleDuration &&
+        !eventType.metadata?.multipleDuration.includes(Number(duration)))
     ) {
-      setDuration(eventType.length.toString());
+      setDuration(eventType.length);
     }
   }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
 
@@ -81,28 +83,20 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+      <h2 className="mt-1 mb-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
         {profile.name}
       </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold leading-none text-gray-900">
         {eventType.title}
       </h1>
       <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(
-              "flex",
+              "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
-            <div>
-              <FiInfo
-                className={classNames(
-                  "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
-                  isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
-                )}
-              />
-            </div>
-            <div className="max-w-[calc(100%_-_2rem)] flex-shrink break-words">
+            <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
               <EventTypeDescriptionSafeHTML eventType={eventType} />
             </div>
           </div>

apps/web/components/booking/BookingDescriptionPayment.tsx

@@ -0,0 +1,24 @@
+import { FormattedNumber, IntlProvider } from "react-intl";
+
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
+import { FiCreditCard } from "@calcom/ui/components/icon";
+
+const BookingDescriptionPayment = (props: { eventType: Parameters<typeof getPaymentAppData>[0] }) => {
+  const paymentAppData = getPaymentAppData(props.eventType);
+  if (!paymentAppData || paymentAppData.price <= 0) return null;
+
+  return (
+    <p className="text-bookinglight -ml-2 px-2 text-sm ">
+      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      <IntlProvider locale="en">
+        <FormattedNumber
+          value={paymentAppData.price / 100.0}
+          style="currency"
+          currency={paymentAppData.currency?.toUpperCase()}
+        />
+      </IntlProvider>
+    </p>
+  );
+};
+
+export default BookingDescriptionPayment;

apps/web/components/booking/BookingListItem.tsx

@@ -223,6 +223,8 @@ function BookingListItem(booking: BookingItemProps) {
   };
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
+
+  const title = decodeURIComponent(booking.title);
   return (
     <>
       <RescheduleDialog
@@ -355,12 +357,12 @@ function BookingListItem(booking: BookingItemProps) {
 
           <div className="cursor-pointer py-4">
             <div
-              title={booking.title}
+              title={title}
               className={classNames(
                 "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.title}
+              {title}
               <span> </span>
 
               {!!booking?.eventType?.price && !booking.paid && (

apps/web/components/booking/SlotPicker.tsx

@@ -164,7 +164,7 @@ export const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
           selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
         )}
         includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}

apps/web/components/booking/TimezoneDropdown.tsx

@@ -17,7 +17,7 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
         <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>

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

@@ -168,7 +168,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   <div
                     className={classNames(
                       "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                      "min-w-full md:w-[230px] md:min-w-[230px]",
+                      "min-w-full md:w-[280px] md:min-w-[280px]",
                       recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
                     )}>
                     <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>

apps/web/components/dialog/EditLocationDialog.tsx

@@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
+import { Controller, useForm, useWatch, useFormContext } from "react-hook-form";
 import { z } from "zod";
 
 import type { EventLocationType, LocationObject } from "@calcom/app-store/locations";
@@ -49,16 +49,19 @@ const LocationInput = (props: {
   defaultValue?: string;
 }): JSX.Element | null => {
   const { eventLocationType, locationFormMethods, ...remainingProps } = props;
+  const { control } = useFormContext() as typeof locationFormMethods;
   if (eventLocationType?.organizerInputType === "text") {
     return (
       <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
     );
   } else if (eventLocationType?.organizerInputType === "phone") {
     return (
-      <PhoneInput
+      <Controller
         name={eventLocationType.variable}
-        control={locationFormMethods.control}
-        {...remainingProps}
+        control={control}
+        render={({ field: { onChange, value } }) => {
+          return <PhoneInput onChange={onChange} value={value} {...remainingProps} />;
+        }}
       />
     );
   }
@@ -285,16 +288,13 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               }}>
               <QueryCell
                 query={locationsQuery}
-                success={({ data: locationOptions }) => {
-                  if (!locationOptions.length) return null;
+                success={({ data }) => {
+                  if (!data.length) return null;
+                  const locationOptions = [...data];
                   if (booking) {
-                    locationOptions.forEach((location) => {
-                      if (location.label === "phone") {
-                        location.options.filter((l) => l.value !== "phone");
-                      } else if (location.label === "in person") {
-                        location.options.filter((l) => l.value !== "attendeeInPerson");
-                      }
-                    });
+                    locationOptions.map((location) =>
+                      location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))
+                    );
                   }
                   return (
                     <Controller

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -113,7 +113,7 @@ const EventTypeScheduleDetails = () => {
   );
 
   const filterDays = (dayNum: number) =>
-    schedule?.schedule.availability.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
   return (
     <div className="space-y-4 rounded border px-6 pb-4">
@@ -156,15 +156,17 @@ const EventTypeScheduleDetails = () => {
           <FiGlobe className="ltr:mr-2 rtl:ml-2" />
           {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
         </span>
-        <Button
-          href={`/availability/${schedule?.schedule.id}`}
-          disabled={isLoading}
-          color="minimal"
-          EndIcon={FiExternalLink}
-          target="_blank"
-          rel="noopener noreferrer">
-          {t("edit_availability")}
-        </Button>
+        {!!schedule?.id && (
+          <Button
+            href={`/availability/${schedule.id}`}
+            disabled={isLoading}
+            color="minimal"
+            EndIcon={FiExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        )}
       </div>
     </div>
   );

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -0,0 +1,145 @@
+import type { FC } from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
+import { useForm, useFormContext } from "react-hook-form";
+
+import type { EventNameObjectType } from "@calcom/core/event";
+import { getEventName } from "@calcom/core/event";
+import { validateCustomEventName } from "@calcom/core/event";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Dialog, DialogClose, DialogFooter, DialogContent, TextField } from "@calcom/ui";
+
+interface FormValues {
+  customEventName: string;
+}
+
+interface CustomEventTypeModalFormProps {
+  placeHolder: string;
+  close: () => void;
+  setValue: (value: string) => void;
+  event: EventNameObjectType;
+  defaultValue: string;
+}
+
+const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
+  const { t } = useLocale();
+  const { placeHolder, close, setValue, event } = props;
+  const { register, handleSubmit, watch, getValues } = useFormContext<FormValues>();
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    setValue(data.customEventName);
+    close();
+  };
+
+  // const customEventName = watch("customEventName");
+  const previewText = getEventName({ ...event, eventName: watch("customEventName") });
+  const placeHolder_ = watch("customEventName") === "" ? previewText : placeHolder;
+
+  return (
+    <form
+      id="custom-event-name"
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isEmpty = getValues("customEventName") === "";
+        if (isEmpty) {
+          setValue("");
+        }
+
+        handleSubmit(onSubmit)(e);
+      }}>
+      <TextField
+        label={t("event_name_in_calendar")}
+        type="text"
+        placeholder={placeHolder_}
+        {...register("customEventName", {
+          validate: (value) =>
+            validateCustomEventName(value, t("invalid_event_name_variables"), event.bookingFields),
+        })}
+        className="mb-0"
+      />
+      <div className="pt-6 text-sm">
+        <div className="mb-6 rounded-md bg-gray-100 p-2">
+          <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
+            <p className="text-gray-900">{t("event_name_info")}</p>
+          </div>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
+            <p className="text-gray-900">{t("your_full_name")}</p>
+          </div>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
+            <p className="text-gray-900">{t("scheduler_full_name")}</p>
+          </div>
+          <div className="mb-1 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
+            <p className="text-gray-900">{t("location_info")}</p>
+          </div>
+        </div>
+        <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
+        <div
+          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
+          style={{
+            backgroundImage: "url(/calendar-preview.svg)",
+          }}>
+          <div className="m-auto flex items-center justify-center self-stretch">
+            <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
+              <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
+              <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+interface CustomEventTypeModalProps {
+  placeHolder: string;
+  defaultValue: string;
+  close: () => void;
+  setValue: (value: string) => void;
+  event: EventNameObjectType;
+}
+
+const CustomEventTypeModal: FC<CustomEventTypeModalProps> = (props) => {
+  const { t } = useLocale();
+
+  const { defaultValue, placeHolder, close, setValue, event } = props;
+
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      customEventName: defaultValue,
+    },
+  });
+
+  return (
+    <Dialog open={true} onOpenChange={close}>
+      <DialogContent
+        title={t("custom_event_name")}
+        description={t("custom_event_name_description")}
+        type="creation"
+        enableOverflow>
+        <FormProvider {...methods}>
+          <CustomEventTypeModalForm
+            event={event}
+            close={close}
+            setValue={setValue}
+            placeHolder={placeHolder}
+            defaultValue={defaultValue}
+          />
+        </FormProvider>
+        <DialogFooter>
+          <DialogClose>{t("cancel")}</DialogClose>
+
+          <Button form="custom-event-name" type="submit" color="primary">
+            {t("create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CustomEventTypeModal;

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,214 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventTypeCustomInputType } from "@prisma/client";
-import type { CustomInputParsed } from "pages/event-types/[type]";
-import type { FC } from "react";
-import type { Control, UseFormRegister } from "react-hook-form";
-import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Label, Select, TextField } from "@calcom/ui";
-import { FiPlus, FiX } from "@calcom/ui/components/icon";
-
-interface OptionTypeBase {
-  label: string;
-  value: EventTypeCustomInputType;
-  options?: { label: string; type: string }[];
-}
-
-interface Props {
-  onSubmit: (output: CustomInputParsed) => void;
-  onCancel: () => void;
-  selectedCustomInput?: CustomInputParsed;
-}
-
-type IFormInput = CustomInputParsed;
-
-/**
- *  Getting a random ID gives us the option to know WHICH field is changed
- *  when the user edits a custom field.
- *  This UUID is only used to check for changes in the UI and not the ID we use in the DB
- *  There is very very very slim chance that this will cause a collision
- * */
-const randomId = () => Math.floor(Math.random() * 1000000 + new Date().getTime());
-
-const CustomInputTypeForm: FC<Props> = (props) => {
-  const { t } = useLocale();
-  const inputOptions: OptionTypeBase[] = [
-    { value: EventTypeCustomInputType.TEXT, label: t("text") },
-    { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
-    { value: EventTypeCustomInputType.NUMBER, label: t("number") },
-    { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
-    {
-      value: EventTypeCustomInputType.RADIO,
-      label: t("radio"),
-    },
-    { value: EventTypeCustomInputType.PHONE, label: t("phone_number") },
-  ];
-
-  const { selectedCustomInput } = props;
-
-  const defaultValues = selectedCustomInput
-    ? { ...selectedCustomInput, id: selectedCustomInput?.id || randomId() }
-    : {
-        id: randomId(),
-        type: EventTypeCustomInputType.TEXT,
-      };
-
-  const { register, control, getValues } = useForm<IFormInput>({
-    defaultValues,
-  });
-  const selectedInputType = useWatch({ name: "type", control });
-  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value);
-
-  const onCancel = () => {
-    props.onCancel();
-  };
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div>
-        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-          {t("input_type")}
-        </label>
-        <Controller
-          name="type"
-          control={control}
-          render={({ field }) => (
-            <Select
-              id="type"
-              defaultValue={selectedInputOption}
-              options={inputOptions}
-              isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
-              onChange={(option) => option && field.onChange(option.value)}
-              value={selectedInputOption}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-      </div>
-      <TextField
-        label={t("label")}
-        type="text"
-        id="label"
-        required
-        className="block w-full rounded-sm border-gray-300 text-sm"
-        defaultValue={selectedCustomInput?.label}
-        {...register("label", { required: true })}
-      />
-      {(selectedInputType === EventTypeCustomInputType.TEXT ||
-        selectedInputType === EventTypeCustomInputType.TEXTLONG) && (
-        <TextField
-          label={t("placeholder")}
-          type="text"
-          id="placeholder"
-          className="block w-full rounded-sm border-gray-300 text-sm"
-          defaultValue={selectedCustomInput?.placeholder}
-          {...register("placeholder")}
-        />
-      )}
-      {selectedInputType === EventTypeCustomInputType.RADIO && (
-        <RadioInputHandler control={control} register={register} />
-      )}
-
-      <div className="flex h-5 items-center">
-        <input
-          id="required"
-          type="checkbox"
-          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
-          defaultChecked={selectedCustomInput?.required ?? true}
-          {...register("required")}
-        />
-        <label htmlFor="required" className="block text-sm font-medium text-gray-700">
-          {t("is_required")}
-        </label>
-      </div>
-      <input
-        type="hidden"
-        id="eventTypeId"
-        value={selectedCustomInput?.eventTypeId || -1}
-        {...register("eventTypeId", { valueAsNumber: true })}
-      />
-      <input
-        type="hidden"
-        id="id"
-        value={selectedCustomInput?.id || -1}
-        {...register("id", { valueAsNumber: true })}
-      />
-      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse sm:mt-4">
-        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2 rtl:ml-2">
-          {t("cancel")}
-        </Button>
-        <Button
-          type="button"
-          onClick={() => {
-            props.onSubmit(getValues());
-          }}>
-          {t("save")}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-function RadioInputHandler({
-  register,
-  control,
-}: {
-  register: UseFormRegister<IFormInput>;
-  control: Control<IFormInput>;
-}) {
-  const { t } = useLocale();
-  const { fields, append, remove } = useFieldArray<IFormInput>({
-    control,
-    name: "options",
-    shouldUnregister: true,
-  });
-  const [animateRef] = useAutoAnimate<HTMLUListElement>();
-
-  return (
-    <div className="flex flex-col ">
-      <Label htmlFor="radio_options">{t("options")}</Label>
-      <ul
-        className="flex max-h-80 w-full flex-col space-y-1 overflow-y-scroll rounded-md bg-gray-50 p-4"
-        ref={animateRef}>
-        <>
-          {fields.map((option, index) => (
-            <li key={`${option.id}`}>
-              <TextField
-                id={option.id}
-                placeholder={t("enter_option", { index: index + 1 })}
-                addOnFilled={false}
-                label={t("option", { index: index + 1 })}
-                labelSrOnly
-                {...register(`options.${index}.label` as const, { required: true })}
-                addOnSuffix={
-                  <Button
-                    variant="icon"
-                    color="minimal"
-                    StartIcon={FiX}
-                    onClick={() => {
-                      remove(index);
-                    }}
-                  />
-                }
-              />
-            </li>
-          ))}
-          <Button
-            color="minimal"
-            StartIcon={FiPlus}
-            className="!text-sm !font-medium"
-            onClick={() => {
-              append({ label: "", type: "text" });
-            }}>
-            {t("add_an_option")}
-          </Button>
-        </>
-      </ul>
-    </div>
-  );
-}
-
-export default CustomInputTypeForm;

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,5 +1,6 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import type { CustomInputParsed, EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+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";
@@ -8,30 +9,18 @@ import { v5 as uuidv5 } from "uuid";
 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import CustomInputItem from "@calcom/features/eventtypes/components/CustomInputItem";
+import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { APP_NAME, CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Badge,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  Label,
-  SettingsToggle,
-  showToast,
-  TextField,
-  Tooltip,
-} from "@calcom/ui";
-import { FiEdit, FiCopy, FiPlus } from "@calcom/ui/components/icon";
-
-import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
+import { Badge, Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
+import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
+const CustomEventTypeModal = dynamic(() => import("@components/eventtype/CustomEventTypeModal"));
+
 const generateHashedLink = (id: number) => {
   const translator = short();
   const seed = `${id}:${new Date().getTime()}`;
@@ -39,71 +28,63 @@ const generateHashedLink = (id: number) => {
   return uid;
 };
 
-const getRandomId = (length = 8) => {
-  return (
-    -1 *
-    parseInt(
-      Math.ceil(Math.random() * Date.now())
-        .toPrecision(length)
-        .toString()
-        .replace(".", "")
-    )
-  );
-};
-
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
+
   const [showEventNameTip, setShowEventNameTip] = useState(false);
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
+
+  const bookingFields: Prisma.JsonObject = {};
+
+  eventType.bookingFields.forEach(({ name }) => {
+    bookingFields[name] = name + " input";
+  });
+
   const eventNameObject: EventNameObjectType = {
     attendeeName: t("scheduler"),
     eventType: eventType.title,
     eventName: eventType.eventName,
     host: eventType.users[0]?.name || "Nameless",
+    bookingFields: bookingFields,
     t,
   };
-  const [previewText, setPreviewText] = useState(getEventName(eventNameObject));
-  const [customInputs, setCustomInputs] = useState<CustomInputParsed[]>(
-    eventType.customInputs.sort((a, b) => a.id - b.id) || []
-  );
-  const [selectedCustomInput, setSelectedCustomInput] = useState<CustomInputParsed | undefined>(undefined);
-  const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
+
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
 
-  const removeCustom = (index: number) => {
-    formMethods.getValues("customInputs").splice(index, 1);
-    customInputs.splice(index, 1);
-    setCustomInputs([...customInputs]);
-  };
-
-  const replaceEventNamePlaceholder = (eventNameObject: EventNameObjectType, previewEventName: string) =>
-    previewEventName
-      .replace("{Event type title}", eventNameObject.eventType)
-      .replace("{Scheduler}", eventNameObject.attendeeName)
-      .replace("{Organiser}", eventNameObject.host);
-
-  const changePreviewText = (eventNameObject: EventNameObjectType, previewEventName: string) => {
-    setPreviewText(replaceEventNamePlaceholder(eventNameObject, previewEventName));
-  };
-
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
   }, [eventType.users, hashedUrl, team?.id]);
 
-  useEffect(() => {
-    if (eventType.customInputs) {
-      setCustomInputs(eventType.customInputs.sort((a, b) => a.id - b.id));
-    }
-  }, [eventType.customInputs]);
+  const toggleGuests = (enabled: boolean) => {
+    const bookingFields = formMethods.getValues("bookingFields");
+    formMethods.setValue(
+      "bookingFields",
+      bookingFields.map((field) => {
+        if (field.name === "guests") {
+          return {
+            ...field,
+            hidden: !enabled,
+          };
+        }
+        return field;
+      })
+    );
+  };
 
-  const eventNamePlaceholder = replaceEventNamePlaceholder(eventNameObject, t("meeting_with_user"));
+  const eventNamePlaceholder = getEventName({
+    ...eventNameObject,
+    eventName: formMethods.watch("eventName"),
+  });
 
+  const closeEventNameTip = () => setShowEventNameTip(false);
+
+  const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
     <div className="flex flex-col space-y-8">
       {/**
@@ -146,14 +127,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           type="text"
           placeholder={eventNamePlaceholder}
           defaultValue={eventType.eventName || ""}
-          {...formMethods.register("eventName", {
-            onChange: (e) => {
-              if (!e.target.value || !formMethods.getValues("eventName")) {
-                return setPreviewText(getEventName(eventNameObject));
-              }
-              changePreviewText(eventNameObject, e.target.value);
-            },
-          })}
+          {...formMethods.register("eventName")}
           addOnSuffix={
             <Button
               type="button"
@@ -162,53 +136,18 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               color="minimal"
               className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
               onClick={() => setShowEventNameTip((old) => !old)}
+              aria-label="edit custom name"
             />
           }
         />
       </div>
       <hr />
-      <div className="">
-        <SettingsToggle
-          title={t("additional_inputs")}
-          description={t("additional_input_description")}
-          checked={customInputs.length > 0}
-          onCheckedChange={(e) => {
-            if (e && customInputs.length === 0) {
-              // Push a placeholders
-              setSelectedCustomInputModalOpen(true);
-            } else if (!e) {
-              formMethods.setValue("customInputs", []);
-            }
-          }}>
-          <ul className="my-4 rounded-md border">
-            {customInputs.map((customInput, idx) => (
-              <CustomInputItem
-                key={idx}
-                question={customInput.label}
-                type={customInput.type}
-                required={customInput.required}
-                editOnClick={() => {
-                  setSelectedCustomInput(customInput);
-                  setSelectedCustomInputModalOpen(true);
-                }}
-                deleteOnClick={() => removeCustom(idx)}
-              />
-            ))}
-          </ul>
-          {customInputs.length > 0 && (
-            <Button
-              StartIcon={FiPlus}
-              color="minimal"
-              type="button"
-              onClick={() => {
-                setSelectedCustomInput(undefined);
-                setSelectedCustomInputModalOpen(true);
-              }}>
-              {t("add_input")}
-            </Button>
-          )}
-        </SettingsToggle>
-      </div>
+      <FormBuilder
+        title={t("booking_questions_title")}
+        description={t("booking_questions_description")}
+        addFieldLabel={t("add_a_booking_question")}
+        formProp="bookingFields"
+      />
       <hr />
       <RequiresConfirmationController
         seatsEnabled={seatsEnabled}
@@ -216,22 +155,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr />
-      <Controller
-        name="disableGuests"
-        control={formMethods.control}
-        defaultValue={eventType.disableGuests}
-        render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            title={t("disable_guests")}
-            description={t("disable_guests_description")}
-            checked={value}
-            onCheckedChange={(e) => onChange(e)}
-            disabled={seatsEnabled}
-          />
-        )}
-      />
-
       <hr />
       <Controller
         name="hideCalendarNotes"
@@ -247,22 +170,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         )}
       />
       <hr />
-      <Controller
-        name="metadata.additionalNotesRequired"
-        control={formMethods.control}
-        defaultValue={!!eventType.metadata.additionalNotesRequired}
-        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
-            <SettingsToggle
-              title={t("require_additional_notes")}
-              description={t("require_additional_notes_description")}
-              checked={!!value}
-              onCheckedChange={(e) => onChange(e)}
-            />
-          </div>
-        )}
-      />
-      <hr />
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
@@ -363,13 +270,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             onCheckedChange={(e) => {
               // Enabling seats will disable guests and requiring confirmation until fully supported
               if (e) {
-                formMethods.setValue("disableGuests", true);
+                toggleGuests(false);
                 formMethods.setValue("requiresConfirmation", false);
                 setRequiresConfirmation(false);
                 formMethods.setValue("seatsPerTimeSlot", 2);
               } else {
                 formMethods.setValue("seatsPerTimeSlot", null);
-                formMethods.setValue("disableGuests", false);
+                toggleGuests(true);
               }
               onChange(e);
             }}>
@@ -407,130 +314,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
 
       {showEventNameTip && (
-        <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
-          <DialogContent
-            title={t("custom_event_name")}
-            description={t("custom_event_name_description")}
-            type="creation"
-            enableOverflow>
-            <TextField
-              label={t("event_name_in_calendar")}
-              type="text"
-              placeholder={eventNamePlaceholder}
-              defaultValue={eventType.eventName || ""}
-              {...formMethods.register("eventName", {
-                onChange: (e) => {
-                  if (!e.target.value || !formMethods.getValues("eventName")) {
-                    return setPreviewText(getEventName(eventNameObject));
-                  }
-                  changePreviewText(eventNameObject, e.target.value);
-                },
-              })}
-              className="mb-0"
-            />
-            <div className="text-sm">
-              <div className="mb-6 rounded-md bg-gray-100 p-2">
-                <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
-                  <p className="text-gray-900">{t("event_name_info")}</p>
-                </div>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
-                  <p className="text-gray-900">{t("your_full_name")}</p>
-                </div>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
-                  <p className="text-gray-900">{t("scheduler_full_name")}</p>
-                </div>
-                <div className="mb-1 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
-                  <p className="text-gray-900">{t("location_info")}</p>
-                </div>
-              </div>
-              <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
-              <div
-                className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
-                style={{
-                  backgroundImage: "url(/calendar-preview.svg)",
-                }}>
-                <div className="m-auto flex items-center justify-center self-stretch">
-                  <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
-                    <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">
-                      {previewText}
-                    </p>
-                    <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <DialogFooter>
-              <DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")}>
-                {t("cancel")}
-              </DialogClose>
-              <Button color="primary" onClick={() => setShowEventNameTip(false)}>
-                {t("create")}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <CustomEventTypeModal
+          close={closeEventNameTip}
+          setValue={setEventName}
+          defaultValue={formMethods.getValues("eventName") || eventType.eventName || ""}
+          placeHolder={eventNamePlaceholder}
+          event={eventNameObject}
+        />
       )}
-      <Controller
-        name="customInputs"
-        control={formMethods.control}
-        defaultValue={customInputs}
-        render={() => (
-          <Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
-            <DialogContent
-              type="creation"
-              Icon={FiPlus}
-              title={t("add_new_custom_input_field")}
-              description={t("this_input_will_shown_booking_this_event")}>
-              <CustomInputTypeForm
-                selectedCustomInput={selectedCustomInput}
-                onSubmit={(values) => {
-                  const customInput: CustomInputParsed = {
-                    id: getRandomId(),
-                    eventTypeId: -1,
-                    label: values.label,
-                    placeholder: values.placeholder,
-                    required: values.required,
-                    type: values.type,
-                    options: values.options,
-                    hasToBeCreated: true,
-                  };
-                  if (selectedCustomInput) {
-                    selectedCustomInput.label = customInput.label;
-                    selectedCustomInput.placeholder = customInput.placeholder;
-                    selectedCustomInput.required = customInput.required;
-                    selectedCustomInput.type = customInput.type;
-                    selectedCustomInput.options = customInput.options || undefined;
-                    selectedCustomInput.hasToBeCreated = false;
-                    // Update by id
-                    const inputIndex = customInputs.findIndex((input) => input.id === values.id);
-                    customInputs[inputIndex] = selectedCustomInput;
-                    setCustomInputs(customInputs);
-                    formMethods.setValue("customInputs", customInputs);
-                  } else {
-                    const concatted = customInputs.concat({
-                      ...customInput,
-                      options: customInput.options,
-                    });
-                    console.log(concatted);
-                    setCustomInputs(concatted);
-                    formMethods.setValue("customInputs", concatted);
-                  }
-
-                  setSelectedCustomInputModalOpen(false);
-                }}
-                onCancel={() => {
-                  setSelectedCustomInputModalOpen(false);
-                }}
-              />
-            </DialogContent>
-          </Dialog>
-        )}
-      />
     </div>
   );
 };

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,9 +1,11 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { Key } from "react";
 import React, { useEffect, useState } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { SingleValue } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
@@ -11,8 +13,17 @@ import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { PeriodType } from "@calcom/prisma/client";
-import type { BookingLimit } from "@calcom/types/Calendar";
-import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import type { IntervalLimit } from "@calcom/types/Calendar";
+import {
+  Button,
+  DateRangePicker,
+  Input,
+  InputField,
+  Label,
+  Select,
+  SettingsToggle,
+  TextField,
+} from "@calcom/ui";
 import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
@@ -260,7 +271,34 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 formMethods.setValue("bookingLimits", {});
               }
             }}>
-            <BookingLimits />
+            <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+          </SettingsToggle>
+        )}
+      />
+      <hr />
+      <Controller
+        name="durationLimits"
+        control={formMethods.control}
+        render={({ field: { value } }) => (
+          <SettingsToggle
+            title={t("limit_total_booking_duration")}
+            description={t("limit_total_booking_duration_description")}
+            checked={Object.keys(value ?? {}).length > 0}
+            onCheckedChange={(active) => {
+              if (active) {
+                formMethods.setValue("durationLimits", {
+                  PER_DAY: 60,
+                });
+              } else {
+                formMethods.setValue("durationLimits", {});
+              }
+            }}>
+            <IntervalLimitsManager
+              propertyName="durationLimits"
+              defaultLimit={60}
+              step={15}
+              textFieldSuffix={t("minutes")}
+            />
           </SettingsToggle>
         )}
       />
@@ -348,124 +386,158 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   );
 };
 
-const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"];
-type BookingLimitsKey = keyof BookingLimit;
-const BookingLimits = () => {
+type IntervalLimitsKey = keyof IntervalLimit;
+
+const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const;
+
+const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({
+  value: key as keyof IntervalLimit,
+  label: `Per ${key.split("_")[1].toLocaleLowerCase()}`,
+}));
+
+type IntervalLimitItemProps = {
+  key: Key;
+  limitKey: IntervalLimitsKey;
+  step: number;
+  value: number;
+  textFieldSuffix?: string;
+  selectOptions: { value: keyof IntervalLimit; label: string }[];
+  hasDeleteButton?: boolean;
+  onDelete: (intervalLimitsKey: IntervalLimitsKey) => void;
+  onLimitChange: (intervalLimitsKey: IntervalLimitsKey, limit: number) => void;
+  onIntervalSelect: (interval: SingleValue<{ value: keyof IntervalLimit; label: string }>) => void;
+};
+
+const IntervalLimitItem = ({
+  limitKey,
+  step,
+  value,
+  textFieldSuffix,
+  selectOptions,
+  hasDeleteButton,
+  onDelete,
+  onLimitChange,
+  onIntervalSelect,
+}: IntervalLimitItemProps) => {
+  return (
+    <div className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse" key={limitKey}>
+      <TextField
+        required
+        type="number"
+        containerClassName={`${textFieldSuffix ? "w-36" : "w-16"} -mb-1`}
+        placeholder={`${value}`}
+        min={step}
+        step={step}
+        defaultValue={value}
+        addOnSuffix={textFieldSuffix}
+        onChange={(e) => onLimitChange(limitKey, parseInt(e.target.value))}
+      />
+      <Select
+        options={selectOptions}
+        isSearchable={false}
+        defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
+        onChange={onIntervalSelect}
+      />
+      {hasDeleteButton && (
+        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+      )}
+    </div>
+  );
+};
+
+type IntervalLimitsManagerProps<K extends "durationLimits" | "bookingLimits"> = {
+  propertyName: K;
+  defaultLimit: number;
+  step: number;
+  textFieldSuffix?: string;
+};
+
+const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
+  propertyName,
+  defaultLimit,
+  step,
+  textFieldSuffix,
+}: IntervalLimitsManagerProps<K>) => {
   const { watch, setValue, control } = useFormContext<FormValues>();
-  const watchBookingLimits = watch("bookingLimits");
+  const watchIntervalLimits = watch(propertyName);
   const { t } = useLocale();
 
   const [animateRef] = useAutoAnimate<HTMLUListElement>();
 
-  const BOOKING_LIMIT_OPTIONS: {
-    value: keyof BookingLimit;
-    label: string;
-  }[] = [
-    {
-      value: "PER_DAY",
-      label: "Per Day",
-    },
-    {
-      value: "PER_WEEK",
-      label: "Per Week",
-    },
-    {
-      value: "PER_MONTH",
-      label: "Per Month",
-    },
-    {
-      value: "PER_YEAR",
-      label: "Per Year",
-    },
-  ];
-
   return (
     <Controller
-      name="bookingLimits"
+      name={propertyName}
       control={control}
       render={({ field: { value, onChange } }) => {
-        const currentBookingLimits = value;
+        const currentIntervalLimits = value;
+
+        const addLimit = () => {
+          if (!currentIntervalLimits || !watchIntervalLimits) return;
+          const currentKeys = Object.keys(watchIntervalLimits);
+
+          const [rest] = Object.values(INTERVAL_LIMIT_OPTIONS).filter(
+            (option) => !currentKeys.includes(option.value)
+          );
+          if (!rest || !currentKeys.length) return;
+          //currentDurationLimits is always defined so can be casted
+          // @ts-expect-error FIXME Fix these typings
+          setValue(propertyName, {
+            ...watchIntervalLimits,
+            [rest.value]: defaultLimit,
+          });
+        };
+
         return (
           <ul ref={animateRef}>
-            {currentBookingLimits &&
-              watchBookingLimits &&
-              Object.entries(currentBookingLimits)
-                .sort(([limitkeyA], [limitKeyB]) => {
+            {currentIntervalLimits &&
+              watchIntervalLimits &&
+              Object.entries(currentIntervalLimits)
+                .sort(([limitKeyA], [limitKeyB]) => {
                   return (
-                    validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) -
-                    validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey)
+                    intervalOrderKeys.indexOf(limitKeyA as IntervalLimitsKey) -
+                    intervalOrderKeys.indexOf(limitKeyB as IntervalLimitsKey)
                   );
                 })
-                .map(([key, bookingAmount]) => {
-                  const bookingLimitKey = key as BookingLimitsKey;
+                .map(([key, value]) => {
+                  const limitKey = key as IntervalLimitsKey;
                   return (
-                    <div
-                      className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse"
-                      key={bookingLimitKey}>
-                      <Input
-                        id={`${bookingLimitKey}-limit`}
-                        type="number"
-                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
-                        placeholder="1"
-                        min={1}
-                        defaultValue={bookingAmount}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val));
-                        }}
-                      />
-                      <Select
-                        options={BOOKING_LIMIT_OPTIONS.filter(
-                          (option) => !Object.keys(currentBookingLimits).includes(option.value)
-                        )}
-                        isSearchable={false}
-                        defaultValue={BOOKING_LIMIT_OPTIONS.find((option) => option.value === key)}
-                        onChange={(val) => {
-                          const current = currentBookingLimits;
-                          const currentValue = watchBookingLimits[bookingLimitKey];
+                    <IntervalLimitItem
+                      key={key}
+                      limitKey={limitKey}
+                      step={step}
+                      value={value}
+                      textFieldSuffix={textFieldSuffix}
+                      hasDeleteButton={Object.keys(currentIntervalLimits).length > 1}
+                      selectOptions={INTERVAL_LIMIT_OPTIONS.filter(
+                        (option) => !Object.keys(currentIntervalLimits).includes(option.value)
+                      )}
+                      onLimitChange={(intervalLimitKey, val) =>
+                        // @ts-expect-error FIXME Fix these typings
+                        setValue(`${propertyName}.${intervalLimitKey}`, val)
+                      }
+                      onDelete={(intervalLimitKey) => {
+                        const current = currentIntervalLimits;
+                        delete current[intervalLimitKey];
+                        onChange(current);
+                      }}
+                      onIntervalSelect={(interval) => {
+                        const current = currentIntervalLimits;
+                        const currentValue = watchIntervalLimits[limitKey];
 
-                          // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
-                          delete current[bookingLimitKey];
-                          const newData = {
-                            ...current,
-                            // Set limit to new selected value (in the example above this means we set the limit to per_week here).
-                            [val?.value as BookingLimitsKey]: currentValue,
-                          };
-                          onChange(newData);
-                        }}
-                      />
-                      <Button
-                        variant="icon"
-                        StartIcon={FiTrash}
-                        color="destructive"
-                        onClick={() => {
-                          const current = currentBookingLimits;
-                          delete current[key as BookingLimitsKey];
-                          onChange(current);
-                        }}
-                      />
-                    </div>
+                        // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
+                        delete current[limitKey];
+                        const newData = {
+                          ...current,
+                          // Set limit to new selected value (in the example above this means we set the limit to per_week here).
+                          [interval?.value as IntervalLimitsKey]: currentValue,
+                        };
+                        onChange(newData);
+                      }}
+                    />
                   );
                 })}
-            {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
-              <Button
-                color="minimal"
-                StartIcon={FiPlus}
-                onClick={() => {
-                  if (!currentBookingLimits || !watchBookingLimits) return;
-                  const currentKeys = Object.keys(watchBookingLimits);
-
-                  const rest = Object.values(BOOKING_LIMIT_OPTIONS).filter(
-                    (option) => !currentKeys.includes(option.value)
-                  );
-                  if (!rest || !currentKeys) return;
-                  //currentBookingLimits is always defined so can be casted
-
-                  setValue("bookingLimits", {
-                    ...watchBookingLimits,
-                    [rest[0].value]: 1,
-                  });
-                }}>
+            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
+              <Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
                 {t("add_limit")}
               </Button>
             )}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -13,8 +13,10 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
-import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import turndown from "@calcom/lib/turndownService";
+import { Button, Editor, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
 import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -44,11 +46,14 @@ const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"]
 };
 
 export const EventSetupTab = (
-  props: Pick<EventTypeSetupProps, "eventType" | "locationOptions" | "team" | "teamMembers">
+  props: Pick<
+    EventTypeSetupProps,
+    "eventType" | "locationOptions" | "team" | "teamMembers" | "destinationCalendar"
+  >
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType, locationOptions, team } = props;
+  const { eventType, locationOptions, team, destinationCalendar } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
@@ -187,11 +192,9 @@ export const EventSetupTab = (
               if (!eventLocationType) {
                 return null;
               }
-              // We dont want to translate the string link - it doesnt exist in common.json and it gets prefixed/suffixed with __ or //
+
               const eventLabel =
-                eventLocationType.defaultValueVariable === "link"
-                  ? eventLocationType.label
-                  : t(location[eventLocationType.defaultValueVariable] || eventLocationType.label);
+                location[eventLocationType.defaultValueVariable] || t(eventLocationType.label);
 
               return (
                 <li
@@ -229,7 +232,10 @@ export const EventSetupTab = (
                 </li>
               );
             })}
-            {validLocations.some((location) => location.type === MeetLocationType) && (
+            {validLocations.some(
+              (location) =>
+                location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
+            ) && (
               <div className="flex text-sm text-gray-600">
                 <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
@@ -241,7 +247,6 @@ export const EventSetupTab = (
                       className="underline">
                       here.
                     </Link>{" "}
-                    We will fall back to Cal video if you do not change it.
                   </p>
                 </Trans>
               </div>
@@ -272,12 +277,15 @@ export const EventSetupTab = (
           defaultValue={eventType.title}
           {...formMethods.register("title")}
         />
-        <TextField
-          label={t("description")}
-          placeholder={t("quick_video_meeting")}
-          defaultValue={eventType.description ?? ""}
-          {...formMethods.register("description")}
-        />
+        <div>
+          <Label>{t("description")}</Label>
+          <Editor
+            getText={() => md.render(formMethods.getValues("description") || eventType.description || "")}
+            setText={(value: string) => formMethods.setValue("description", turndown(value))}
+            excludedToolbarItems={["blockType"]}
+            placeholder={t("quick_video_meeting")}
+          />
+        </div>
         <TextField
           required
           label={t("URL")}

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,7 +1,7 @@
-import { SchedulingType } from "@prisma/client";
+import type { SchedulingType } from "@prisma/client";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
-import type { Control } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { Options } from "react-select";
 
@@ -35,65 +35,169 @@ const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof
   return 0;
 };
 
-const FixedHosts = ({
-  control,
+const CheckedHostField = ({
   labelText,
   placeholder,
   options = [],
+  isFixed,
+  value,
+  onChange,
   ...rest
 }: {
-  control: Control<FormValues>;
   labelText: string;
   placeholder: string;
+  isFixed: boolean;
+  value: { isFixed: boolean; userId: number }[];
+  onChange?: (options: { isFixed: boolean; userId: number }[]) => void;
   options?: Options<CheckedSelectOption>;
-} & Partial<ComponentProps<typeof CheckedTeamSelect>>) => {
+} & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
     <div className="flex flex-col space-y-5 bg-gray-50 p-4">
       <div>
         <Label>{labelText}</Label>
-        <Controller
-          name="hostsFixed"
-          control={control}
-          render={({ field: { onChange, value } }) => {
-            return (
-              <CheckedTeamSelect
-                isDisabled={false}
-                onChange={(options) => {
-                  onChange(
-                    options.map((option) => ({
-                      isFixed: true,
-                      userId: parseInt(option.value, 10),
-                    }))
-                  );
-                }}
-                value={value
-                  .map(
-                    (host) =>
-                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                      options.find((member) => member.value === host.userId.toString())!
-                  )
-                  .filter(Boolean)}
-                controlShouldRenderValue={false}
-                options={options}
-                placeholder={placeholder}
-                {...rest}
-              />
-            );
+        <CheckedTeamSelect
+          isOptionDisabled={(option) => !!value.find((host) => host.userId.toString() === option.value)}
+          onChange={(options) => {
+            onChange &&
+              onChange(
+                options.map((option) => ({
+                  isFixed,
+                  userId: parseInt(option.value, 10),
+                }))
+              );
           }}
+          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())!
+            )
+            .filter(Boolean)}
+          controlShouldRenderValue={false}
+          options={options}
+          placeholder={placeholder}
+          {...rest}
         />
       </div>
     </div>
   );
 };
 
-export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
-  const formMethods = useFormContext<FormValues>();
+const RoundRobinHosts = ({
+  teamMembers,
+  value,
+  onChange,
+}: {
+  value: { isFixed: boolean; userId: number }[];
+  onChange: (hosts: { isFixed: boolean; userId: number }[]) => void;
+  teamMembers: {
+    value: string;
+    label: string;
+    avatar: string;
+    email: string;
+  }[];
+}) => {
   const { t } = useLocale();
+  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")}
+      />
+      <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")}
+      />
+    </>
+  );
+};
 
+const Hosts = ({
+  teamMembers,
+}: {
+  teamMembers: {
+    value: string;
+    label: string;
+    avatar: string;
+    email: string;
+  }[];
+}) => {
+  const { t } = useLocale();
+  const {
+    control,
+    resetField,
+    getValues,
+    formState: { submitCount },
+  } = useFormContext<FormValues>();
   const schedulingType = useWatch({
-    control: formMethods.control,
+    control,
     name: "schedulingType",
   });
+  const initialValue = useRef<{
+    hosts: FormValues["hosts"];
+    schedulingType: SchedulingType | null;
+    submitCount: number;
+  } | null>(null);
+
+  useEffect(() => {
+    // Handles init & out of date initial value after submission.
+    if (!initialValue.current || initialValue.current?.submitCount !== submitCount) {
+      initialValue.current = { hosts: getValues("hosts"), schedulingType, submitCount };
+      return;
+    }
+    resetField("hosts", {
+      defaultValue: initialValue.current.schedulingType === schedulingType ? initialValue.current.hosts : [],
+    });
+  }, [schedulingType, resetField, getValues, submitCount]);
+
+  return (
+    <Controller<FormValues>
+      name="hosts"
+      render={({ field: { onChange, value } }) => {
+        const schedulingTypeRender = {
+          COLLECTIVE: (
+            <CheckedHostField
+              value={value}
+              onChange={onChange}
+              isFixed={true}
+              options={teamMembers.sort(sortByLabel)}
+              placeholder={t("add_attendees")}
+              labelText={t("team")}
+            />
+          ),
+          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")}</>}
+                />*/}
+            </>
+          ),
+        };
+        return !!schedulingType ? schedulingTypeRender[schedulingType] : <></>;
+      }}
+    />
+  );
+};
+
+export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
+  const { t } = useLocale();
 
   const schedulingTypeOptions: {
     value: SchedulingType;
@@ -101,17 +205,16 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
     // description: string;
   }[] = [
     {
-      value: SchedulingType.COLLECTIVE,
+      value: "COLLECTIVE",
       label: t("collective"),
       // description: t("collective_description"),
     },
     {
-      value: SchedulingType.ROUND_ROBIN,
+      value: "ROUND_ROBIN",
       label: t("round_robin"),
       // description: t("round_robin_description"),
     },
   ];
-
   const teamMembersOptions = teamMembers.map(mapUserToValue);
   return (
     <div>
@@ -119,9 +222,8 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
         <div className="space-y-5">
           <div className="flex flex-col">
             <Label>{t("scheduling_type")}</Label>
-            <Controller
+            <Controller<FormValues>
               name="schedulingType"
-              control={formMethods.control}
               render={({ field: { value, onChange } }) => (
                 <Select
                   options={schedulingTypeOptions}
@@ -134,75 +236,7 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
               )}
             />
           </div>
-
-          {schedulingType === SchedulingType.COLLECTIVE && (
-            <FixedHosts
-              options={teamMembersOptions.sort(sortByLabel)}
-              placeholder={t("add_attendees")}
-              labelText={t("team")}
-              control={formMethods.control}
-            />
-          )}
-          {schedulingType === SchedulingType.ROUND_ROBIN && (
-            <>
-              <FixedHosts
-                options={teamMembersOptions.sort(sortByLabel)}
-                isOptionDisabled={(option) =>
-                  !!formMethods.getValues("hosts").find((host) => host.userId.toString() === option.value)
-                }
-                placeholder={t("add_fixed_hosts")}
-                labelText={t("fixed_hosts")}
-                control={formMethods.control}
-              />
-              <div className="flex flex-col space-y-5 bg-gray-50 p-4">
-                <div>
-                  <Label>{t("round_robin_hosts")}</Label>
-                  <Controller
-                    name="hosts"
-                    control={formMethods.control}
-                    render={({ field: { onChange, value } }) => (
-                      <CheckedTeamSelect
-                        isDisabled={false}
-                        onChange={(options) =>
-                          onChange(
-                            options.map((option) => ({
-                              isFixed: false,
-                              userId: parseInt(option.value, 10),
-                            }))
-                          )
-                        }
-                        value={value
-                          .map(
-                            (host) =>
-                              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                              teamMembers
-                                .map(mapUserToValue)
-                                .find((member) => member.value === host.userId.toString())!
-                          )
-                          .filter(Boolean)}
-                        controlShouldRenderValue={false}
-                        options={teamMembersOptions.sort(sortByLabel)}
-                        isOptionDisabled={(option) =>
-                          !!formMethods
-                            .getValues("hostsFixed")
-                            .find((host) => host.userId.toString() === option.value)
-                        }
-                        placeholder={t("add_attendees")}
-                      />
-                    )}
-                  />
-                </div>
-                {/*<TextField
-                  required
-                  type="number"
-                  label={t("minimum_round_robin_hosts_count")}
-                  defaultValue={1}
-                  {...formMethods.register("minimumHostCount")}
-                  addOnSuffix={<>{t("hosts")}</>}
-                          />*/}
-              </div>
-            </>
-          )}
+          <Hosts teamMembers={teamMembersOptions} />
         </div>
       )}
     </div>

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -220,6 +220,7 @@ function EventTypeSingleLayout({
             <Tooltip content={t("preview")}>
               <Button
                 color="secondary"
+                data-testid="preview-button"
                 target="_blank"
                 variant="icon"
                 href={permalink}

apps/web/components/eventtype/RequiresConfirmationController.tsx

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

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

@@ -1,11 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/solid";
-import MarkdownIt from "markdown-it";
 import { useRouter } from "next/router";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+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";
@@ -14,8 +14,6 @@ import { Avatar } from "@calcom/ui";
 
 import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
-const md = new MarkdownIt("default", { html: true, breaks: true });
-
 type FormData = {
   bio: string;
 };

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,7 +1,7 @@
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,10 +1,10 @@
-import { ShieldCheckIcon } from "@calcom/ui/components/icon";
+import { FiShield } from "@calcom/ui/components/icon";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <ShieldCheckIcon className="h-6 w-6 text-white" />
+        <FiShield className="h-6 w-6 text-white" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, TextField } from "@calcom/ui";
 

apps/web/components/setup/AdminUser.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { isPasswordValid } from "@calcom/lib/auth";
+import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";

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

@@ -1,13 +1,11 @@
-import MarkdownIt from "markdown-it";
 import Link from "next/link";
 import type { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import { Avatar } from "@calcom/ui";
 
-const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
-
 type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number];
@@ -19,7 +17,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={`/${member.username}`}>
-      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
         <Avatar
           size="md"
           alt={member.name || ""}

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

@@ -1,3 +1,4 @@
+import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
@@ -14,7 +15,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
-import { FiCheck, FiEdit2, FiExternalLink, StarIconSolid } from "@calcom/ui/components/icon";
+import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",

apps/web/lib/auth.ts

@@ -1,45 +0,0 @@
-import { IdentityProvider } from "@prisma/client";
-import { compare, hash } from "bcryptjs";
-import type { Session } from "next-auth";
-import type { GetSessionParams } from "next-auth/react";
-import { getSession as getSessionInner } from "next-auth/react";
-
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function hashPassword(password: string) {
-  const hashedPassword = await hash(password, 12);
-  return hashedPassword;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function verifyPassword(password: string, hashedPassword: string) {
-  const isValid = await compare(password, hashedPassword);
-  return isValid;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function getSession(options: GetSessionParams): Promise<Session | null> {
-  const session = await getSessionInner(options);
-
-  // that these are equal are ensured in `[...nextauth]`'s callback
-  return session as Session | null;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export enum ErrorCode {
-  UserNotFound = "user-not-found",
-  IncorrectPassword = "incorrect-password",
-  UserMissingPassword = "missing-password",
-  TwoFactorDisabled = "two-factor-disabled",
-  TwoFactorAlreadyEnabled = "two-factor-already-enabled",
-  TwoFactorSetupRequired = "two-factor-setup-required",
-  SecondFactorRequired = "second-factor-required",
-  IncorrectTwoFactorCode = "incorrect-two-factor-code",
-  InternalServerError = "internal-server-error",
-  NewPasswordMatchesOld = "new-password-matches-old",
-  ThirdPartyIdentityProviderEnabled = "third-party-identity-provider-enabled",
-  RateLimitExceeded = "rate-limit-exceeded",
-  InvalidPassword = "invalid-password",
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export const identityProviderNameMap: { [key in IdentityProvider]: string } = {
-  [IdentityProvider.CAL]: "Cal",
-  [IdentityProvider.GOOGLE]: "Google",
-  [IdentityProvider.SAML]: "SAML",
-};

apps/web/lib/core/i18n/i18n.utils.ts

@@ -1,10 +1,10 @@
 import parser from "accept-language-parser";
 import type { IncomingMessage } from "http";
+import type { GetServerSidePropsContext } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import type { Maybe } from "@calcom/trpc/server";
 
-import { getSession } from "@lib/auth";
-
 import { i18n } from "../../../next-i18next.config";
 
 export function getLocaleFromHeaders(req: IncomingMessage): string {
@@ -15,9 +15,13 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
   return preferredLocale ?? i18n.defaultLocale;
 }
 
-export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise<string> => {
-  const prisma = (await import("@calcom/prisma")).default;
-  const session = await getSession({ req });
+export const getOrSetUserLocaleFromHeaders = async (
+  req: GetServerSidePropsContext["req"],
+  res: GetServerSidePropsContext["res"]
+): Promise<string> => {
+  const { default: prisma } = await import("@calcom/prisma");
+
+  const session = await getServerSession({ req, res });
   const preferredLocale = getLocaleFromHeaders(req);
 
   if (session?.user?.id) {

apps/web/lib/getBooking.tsx

@@ -1,7 +1,56 @@
 import type { Prisma, PrismaClient } from "@prisma/client";
+import type { z } from "zod";
 
-async function getBooking(prisma: PrismaClient, uid: string) {
-  const booking = await prisma.booking.findFirst({
+import { getBookingResponsesPartialSchema } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
+import slugify from "@calcom/lib/slugify";
+import type { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
+
+type BookingSelect = {
+  description: true;
+  customInputs: true;
+  attendees: {
+    select: {
+      email: true;
+      name: true;
+    };
+  };
+  location: true;
+  smsReminderNumber: true;
+};
+
+// Backward Compatibility for booking created before we had managed booking questions
+function getResponsesFromOldBooking(
+  rawBooking: Prisma.BookingGetPayload<{
+    select: BookingSelect;
+  }>
+) {
+  const customInputs = rawBooking.customInputs || {};
+  const responses = Object.keys(customInputs).reduce((acc, label) => {
+    acc[slugify(label) as keyof typeof acc] = customInputs[label as keyof typeof customInputs];
+    return acc;
+  }, {});
+  return {
+    // It is possible to have no attendees in a booking when the booking is cancelled.
+    name: rawBooking.attendees[0]?.name || "Nameless",
+    email: rawBooking.attendees[0]?.email || "",
+    guests: rawBooking.attendees.slice(1).map((attendee) => {
+      return attendee.email;
+    }),
+    notes: rawBooking.description || "",
+    location: {
+      value: rawBooking.location || "",
+      optionValue: rawBooking.location || "",
+    },
+    ...responses,
+  };
+}
+
+async function getBooking(
+  prisma: PrismaClient,
+  uid: string,
+  bookingFields: z.infer<typeof eventTypeBookingFields> & z.BRAND<"HAS_SYSTEM_FIELDS">
+) {
+  const rawBooking = await prisma.booking.findFirst({
     where: {
       uid,
     },
@@ -9,6 +58,7 @@ async function getBooking(prisma: PrismaClient, uid: string) {
       startTime: true,
       description: true,
       customInputs: true,
+      responses: true,
       smsReminderNumber: true,
       location: true,
       attendees: {
@@ -20,6 +70,14 @@ async function getBooking(prisma: PrismaClient, uid: string) {
     },
   });
 
+  if (!rawBooking) {
+    return rawBooking;
+  }
+
+  const booking = getBookingWithResponses(rawBooking, {
+    bookingFields,
+  });
+
   if (booking) {
     // @NOTE: had to do this because Server side cant return [Object objects]
     // probably fixable with json.stringify -> json.parse
@@ -31,4 +89,23 @@ async function getBooking(prisma: PrismaClient, uid: string) {
 
 export type GetBookingType = Prisma.PromiseReturnType<typeof getBooking>;
 
+export const getBookingWithResponses = <
+  T extends Prisma.BookingGetPayload<{
+    select: BookingSelect & {
+      responses: true;
+    };
+  }>
+>(
+  booking: T,
+  eventType: {
+    bookingFields: z.infer<typeof eventTypeBookingFields> & z.BRAND<"HAS_SYSTEM_FIELDS">;
+  }
+) => {
+  return {
+    ...booking,
+    responses: getBookingResponsesPartialSchema({
+      bookingFields: eventType.bookingFields,
+    }).parse(booking.responses || getResponsesFromOldBooking(booking)),
+  };
+};
 export default getBooking;

apps/web/lib/mutations/bookings/create-booking.ts

@@ -1,8 +1,11 @@
-import * as fetch from "@lib/core/http/fetch-wrapper";
-import type { BookingCreateBody, BookingResponse } from "@lib/types/booking";
+import type { BookingCreateBody } from "@calcom/prisma/zod-utils";
 
-const createBooking = async (data: BookingCreateBody) => {
-  const response = await fetch.post<BookingCreateBody, BookingResponse>("/api/book/event", data);
+import * as fetch from "@lib/core/http/fetch-wrapper";
+import type { BookingResponse } from "@lib/types/booking";
+
+type BookingCreateBodyForMutation = Omit<BookingCreateBody, "location">;
+const createBooking = async (data: BookingCreateBodyForMutation) => {
+  const response = await fetch.post<BookingCreateBodyForMutation, BookingResponse>("/api/book/event", data);
 
   return response;
 };

apps/web/lib/mutations/bookings/create-recurring-booking.ts

@@ -1,7 +1,8 @@
+import type { BookingCreateBody } from "@calcom/prisma/zod-utils";
 import type { AppsStatus } from "@calcom/types/Calendar";
 
 import * as fetch from "@lib/core/http/fetch-wrapper";
-import type { BookingCreateBody, BookingResponse } from "@lib/types/booking";
+import type { BookingResponse } from "@lib/types/booking";
 
 type ExtendedBookingCreateBody = BookingCreateBody & {
   noEmail?: boolean;

apps/web/lib/parseDate.ts

@@ -3,21 +3,23 @@ import { RRule } from "rrule";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
-import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
+import { detectBrowserTimeFormat, TimeFormat } from "@calcom/lib/timeFormat";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 
 import { parseZone } from "./parseZone";
 
-const processDate = (date: string | null | Dayjs, i18n: I18n) => {
+const processDate = (date: string | null | Dayjs, i18n: I18n, withDefaultTimeFormat: boolean) => {
   const parsedZone = parseZone(date);
   if (!parsedZone?.isValid()) return "Invalid date";
-  const formattedTime = parsedZone?.format(detectBrowserTimeFormat);
+  const formattedTime = parsedZone?.format(
+    withDefaultTimeFormat ? TimeFormat.TWELVE_HOUR : detectBrowserTimeFormat
+  );
   return formattedTime + ", " + dayjs(date).toDate().toLocaleString(i18n.language, { dateStyle: "full" });
 };
 
-export const parseDate = (date: string | null | Dayjs, i18n: I18n) => {
+export const parseDate = (date: string | null | Dayjs, i18n: I18n, withDefaultTimeFormat: boolean) => {
   if (!date) return ["No date"];
-  return processDate(date, i18n);
+  return processDate(date, i18n, withDefaultTimeFormat);
 };
 
 export const parseRecurringDates = (
@@ -26,11 +28,13 @@ export const parseRecurringDates = (
     timeZone,
     recurringEvent,
     recurringCount,
+    withDefaultTimeFormat,
   }: {
     startDate: string | null | Dayjs;
     timeZone?: string;
     recurringEvent: RecurringEvent | null;
     recurringCount: number;
+    withDefaultTimeFormat: boolean;
   },
   i18n: I18n
 ): [string[], Date[]] => {
@@ -50,7 +54,7 @@ export const parseRecurringDates = (
   });
   const dateStrings = times.map((t) => {
     // finally; show in local timeZone again
-    return processDate(t.tz(timeZone), i18n);
+    return processDate(t.tz(timeZone), i18n, withDefaultTimeFormat);
   });
 
   return [dateStrings, times.map((t) => t.toDate())];

apps/web/lib/types/booking.ts

@@ -2,36 +2,6 @@ import type { Attendee, Booking } from "@prisma/client";
 
 import type { AppsStatus } from "@calcom/types/Calendar";
 
-export type BookingCreateBody = {
-  email: string;
-  end: string;
-  web3Details?: {
-    userWallet: string;
-    userSignature: unknown;
-  };
-  eventTypeId: number;
-  eventTypeSlug: string;
-  guests?: string[];
-  location: string;
-  name: string;
-  notes?: string;
-  rescheduleUid?: string;
-  recurringEventId?: string;
-  start: string;
-  timeZone: string;
-  user?: string | string[];
-  language: string;
-  bookingUid?: string;
-  customInputs: { label: string; value: string | boolean }[];
-  metadata: {
-    [key: string]: string;
-  };
-  hasHashedBookingLink: boolean;
-  hashedLink?: string | null;
-  smsReminderNumber?: string;
-  ethSignature?: string;
-};
-
 export type BookingResponse = Booking & {
   paymentUid?: string;
   attendees: Attendee[];

apps/web/next.config.js

@@ -2,20 +2,6 @@ require("dotenv").config({ path: "../../.env" });
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { withSentryConfig } = require("@sentry/nextjs");
 const os = require("os");
-const withTM = require("next-transpile-modules")([
-  "@calcom/app-store",
-  "@calcom/core",
-  "@calcom/dayjs",
-  "@calcom/emails",
-  "@calcom/embed-core",
-  "@calcom/embed-react",
-  "@calcom/embed-snippet",
-  "@calcom/features",
-  "@calcom/lib",
-  "@calcom/prisma",
-  "@calcom/trpc",
-  "@calcom/ui",
-]);
 
 const { withAxiom } = require("next-axiom");
 const { i18n } = require("./next-i18next.config");
@@ -80,7 +66,6 @@ if (process.env.ANALYZE === "true") {
   plugins.push(withBundleAnalyzer);
 }
 
-plugins.push(withTM);
 plugins.push(withAxiom);
 /** @type {import("next").NextConfig} */
 const nextConfig = {
@@ -94,12 +79,31 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: !!process.env.CI,
   },
-  // TODO: We need to have all components in `@calcom/ui/components` in order to use this
-  // modularizeImports: {
-  //   "@calcom/ui": {
-  //     transform: "@calcom/ui/components/{{member}}",
-  //   },
-  // },
+  transpilePackages: [
+    "@calcom/app-store",
+    "@calcom/core",
+    "@calcom/dayjs",
+    "@calcom/emails",
+    "@calcom/embed-core",
+    "@calcom/embed-react",
+    "@calcom/embed-snippet",
+    "@calcom/features",
+    "@calcom/lib",
+    "@calcom/prisma",
+    "@calcom/trpc",
+    "@calcom/ui",
+  ],
+  modularizeImports: {
+    "@calcom/ui/components/icon": {
+      transform: "@react-icons/all-files/fi/{{member}}",
+      skipDefaultConversion: true,
+      preventFullImport: true,
+    },
+    // TODO: We need to have all components in `@calcom/ui/components` in order to use this
+    // "@calcom/ui": {
+    //   transform: "@calcom/ui/components/{{member}}",
+    // },
+  },
   images: {
     unoptimized: true,
   },

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.6.6",
+  "version": "2.6.12",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -45,7 +45,6 @@
     "@hookform/resolvers": "^2.9.7",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^13.1.6",
-    "@next/font": "^13.1.1",
     "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.0",
@@ -70,12 +69,13 @@
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
-    "eslint-config-next": "^13.1.6",
+    "eslint-config-next": "^13.2.1",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
+    "jose": "^4.13.1",
     "kbar": "^0.1.0-beta.36",
     "libphonenumber-js": "^1.10.12",
     "lodash": "^4.17.21",
@@ -85,14 +85,13 @@
     "memory-cache": "^0.2.0",
     "micro": "^10.0.1",
     "mime-types": "^2.1.35",
-    "next": "^13.1.1",
-    "next-auth": "^4.18.8",
+    "next": "^13.2.1",
+    "next-auth": "^4.20.1",
     "next-axiom": "^0.16.0",
     "next-collect": "^0.2.1",
     "next-i18next": "^11.3.0",
     "next-seo": "^4.26.0",
     "next-themes": "^0.2.0",
-    "next-transpile-modules": "^10.0.0",
     "nodemailer": "^6.7.8",
     "otplib": "^12.0.1",
     "qrcode": "^1.5.1",
@@ -104,7 +103,7 @@
     "react-dom": "^18.2.0",
     "react-easy-crop": "^3.5.2",
     "react-feather": "^2.0.10",
-    "react-hook-form": "^7.34.2",
+    "react-hook-form": "^7.43.3",
     "react-hot-toast": "^2.3.0",
     "react-intl": "^5.25.1",
     "react-live-chat-loader": "^2.7.3",
@@ -116,9 +115,11 @@
     "react-use-intercom": "1.5.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
+    "remark": "^14.0.2",
     "rrule": "^2.7.1",
     "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
+    "strip-markdown": "^5.0.0",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
     "tailwindcss-radix": "^2.6.0",

apps/web/pages/[user].tsx

@@ -1,5 +1,5 @@
+import { BadgeCheckIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
-import MarkdownIt from "markdown-it";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -15,6 +15,7 @@ import {
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import CustomBranding from "@calcom/lib/CustomBranding";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import defaultEvents, {
   getDynamicEventDescription,
   getGroupName,
@@ -23,20 +24,19 @@ import defaultEvents, {
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
+import { md } from "@calcom/lib/markdownIt";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
-import { BadgeCheckIcon, FiArrowRight } from "@calcom/ui/components/icon";
+import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
+import { FiArrowRight } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
 
 import { ssrInit } from "@server/lib/ssr";
 
-const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
-
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
   const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
   const [user] = users; //To be used when we only have a single user, not dynamic group
@@ -77,7 +77,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 size="sm"
                 items={props.users.map((user) => ({
                   alt: user.name || "",
-                  image: user.avatar || "",
+                  image: user.avatar,
                 }))}
               />
             </div>
@@ -146,7 +146,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               {!isBioEmpty && (
                 <>
                   <div
-                    className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
                   />
                 </>
@@ -178,26 +178,28 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                   className="dark:bg-darkgray-100 dark:hover:bg-darkgray-200 dark:border-darkgray-300 group relative border-b border-gray-200 bg-white first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50">
                   <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
-                  <Link
-                    prefetch={false}
-                    href={{
-                      pathname: `/${user.username}/${type.slug}`,
-                      query,
-                    }}
-                    onClick={async () => {
-                      sdkActionManager?.fire("eventTypeSelected", {
-                        eventType: type,
-                      });
-                    }}
-                    className="block w-full p-5"
-                    data-testid="event-type-link">
-                    <div className="flex flex-wrap items-center">
-                      <h2 className="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
-                        {type.title}
-                      </h2>
-                    </div>
-                    <EventTypeDescription eventType={type} />
-                  </Link>
+                  <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="dark:text-darkgray-700 pr-2 text-sm font-semibold text-gray-700">
+                          {type.title}
+                        </h2>
+                      </div>
+                      <EventTypeDescription eventType={type} />
+                    </Link>
+                  </div>
                 </div>
               ))
             )}
@@ -260,7 +262,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const usernameList = getUsernameList(context.query.user as string);
   const dataFetchStart = Date.now();
-  const users = await prisma.user.findMany({
+  const usersWithoutAvatar = await prisma.user.findMany({
     where: {
       username: {
         in: usernameList,
@@ -274,7 +276,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       bio: true,
       brandColor: true,
       darkBrandColor: true,
-      avatar: true,
       theme: true,
       away: true,
       verified: true,
@@ -282,6 +283,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     },
   });
 
+  const users = usersWithoutAvatar.map((user) => ({
+    ...user,
+    avatar: `${WEBAPP_URL}/${user.username}/avatar.png`,
+  }));
+
   if (!users.length) {
     return {
       notFound: true,

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

@@ -5,6 +5,7 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { addListFormatting } from "@calcom/lib/markdownIt";
 import type { User } from "@calcom/prisma/client";
 
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -70,7 +71,8 @@ async function getUserPageProps(context: GetStaticPropsContext) {
 
   const user = await prisma.user.findUnique({
     where: {
-      username,
+      /** TODO: We should standarize this */
+      username: username.toLowerCase().replace(/( |%20)/g, "+"),
     },
     select: {
       id: true,
@@ -123,13 +125,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     },
   });
 
-  const md = new MarkdownIt("zero").enable([
-    //
-    "emphasis",
-    "list",
-    "newline",
-    "strikethrough",
-  ]);
+  const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
 
   if (!user || !user.eventTypes.length) return { notFound: true };
 
@@ -157,7 +153,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
     recurringEvent: parseRecurringEvent(eventType.recurringEvent),
     locations: privacyFilteredLocations(locations),
-    descriptionAsSafeHTML: eventType.description ? md.render(eventType.description) : null,
+    descriptionAsSafeHTML: eventType.description ? addListFormatting(md.render(eventType.description)) : null,
   });
   // Check if the user you are logging into has any active teams or premium user name
   const hasActiveTeam =

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

@@ -3,6 +3,7 @@ import type { GetServerSidePropsContext } from "next";
 import type { LocationObject } from "@calcom/app-store/locations";
 import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
+import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import {
   getDefaultEvent,
@@ -118,10 +119,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         });
 
   if (!eventTypeRaw) return { notFound: true };
-
   const eventType = {
     ...eventTypeRaw,
     metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata || {}),
+    bookingFields: getBookingFieldsWithSystemFields(eventTypeRaw),
     recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
   };
 
@@ -183,7 +184,8 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       prisma,
       context.query.rescheduleUid
         ? (context.query.rescheduleUid as string)
-        : (context.query.bookingUid as string)
+        : (context.query.bookingUid as string),
+      eventTypeObject.bookingFields
     );
   }
 

apps/web/pages/_app.tsx

@@ -1,6 +1,6 @@
-import { Inter } from "@next/font/google";
-import localFont from "@next/font/local";
 import { DefaultSeo } from "next-seo";
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
 import Head from "next/head";
 import Script from "next/script";
 

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

@@ -1,550 +1,5 @@
-import type { UserPermissionRole } from "@prisma/client";
-import { IdentityProvider } from "@prisma/client";
-import { readFileSync } from "fs";
-import Handlebars from "handlebars";
-import type { Session } from "next-auth";
 import NextAuth from "next-auth";
-import { encode } from "next-auth/jwt";
-import type { Provider } from "next-auth/providers";
-import CredentialsProvider from "next-auth/providers/credentials";
-import EmailProvider from "next-auth/providers/email";
-import GoogleProvider from "next-auth/providers/google";
-import type { TransportOptions } from "nodemailer";
-import nodemailer from "nodemailer";
-import { authenticator } from "otplib";
-import path from "path";
 
-import checkLicense from "@calcom/features/ee/common/server/checkLicense";
-import ImpersonationProvider from "@calcom/features/ee/impersonation/lib/ImpersonationProvider";
-import { hostedCal, isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
-import { ErrorCode, isPasswordValid, verifyPassword } from "@calcom/lib/auth";
-import { APP_NAME, IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
-import { symmetricDecrypt } from "@calcom/lib/crypto";
-import { defaultCookies } from "@calcom/lib/default-cookies";
-import { randomString } from "@calcom/lib/random";
-import rateLimit from "@calcom/lib/rateLimit";
-import { serverConfig } from "@calcom/lib/serverConfig";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
-import { teamMetadataSchema, userMetadata } from "@calcom/prisma/zod-utils";
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
 
-import CalComAdapter from "@lib/auth/next-auth-custom-adapter";
-
-import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
-
-const transporter = nodemailer.createTransport<TransportOptions>({
-  ...(serverConfig.transport as TransportOptions),
-} as TransportOptions);
-
-const usernameSlug = (username: string) => slugify(username) + "-" + randomString(6).toLowerCase();
-
-const providers: Provider[] = [
-  CredentialsProvider({
-    id: "credentials",
-    name: "Cal.com",
-    type: "credentials",
-    credentials: {
-      email: { label: "Email Address", type: "email", placeholder: "john.doe@example.com" },
-      password: { label: "Password", type: "password", placeholder: "Your super secure password" },
-      totpCode: { label: "Two-factor Code", type: "input", placeholder: "Code from authenticator app" },
-    },
-    async authorize(credentials) {
-      if (!credentials) {
-        console.error(`For some reason credentials are missing`);
-        throw new Error(ErrorCode.InternalServerError);
-      }
-
-      const user = await prisma.user.findUnique({
-        where: {
-          email: credentials.email.toLowerCase(),
-        },
-        select: {
-          role: true,
-          id: true,
-          username: true,
-          name: true,
-          email: true,
-          metadata: true,
-          identityProvider: true,
-          password: true,
-          twoFactorEnabled: true,
-          twoFactorSecret: true,
-          teams: {
-            include: {
-              team: true,
-            },
-          },
-        },
-      });
-
-      // Don't leak information about it being username or password that is invalid
-      if (!user) {
-        throw new Error(ErrorCode.IncorrectUsernamePassword);
-      }
-
-      if (user.identityProvider !== IdentityProvider.CAL) {
-        throw new Error(ErrorCode.ThirdPartyIdentityProviderEnabled);
-      }
-
-      if (!user.password) {
-        throw new Error(ErrorCode.IncorrectUsernamePassword);
-      }
-
-      const isCorrectPassword = await verifyPassword(credentials.password, user.password);
-      if (!isCorrectPassword) {
-        throw new Error(ErrorCode.IncorrectUsernamePassword);
-      }
-
-      if (user.twoFactorEnabled) {
-        if (!credentials.totpCode) {
-          throw new Error(ErrorCode.SecondFactorRequired);
-        }
-
-        if (!user.twoFactorSecret) {
-          console.error(`Two factor is enabled for user ${user.id} but they have no secret`);
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        if (!process.env.CALENDSO_ENCRYPTION_KEY) {
-          console.error(`"Missing encryption key; cannot proceed with two factor login."`);
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        const secret = symmetricDecrypt(user.twoFactorSecret, process.env.CALENDSO_ENCRYPTION_KEY);
-        if (secret.length !== 32) {
-          console.error(
-            `Two factor secret decryption failed. Expected key with length 32 but got ${secret.length}`
-          );
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        const isValidToken = authenticator.check(credentials.totpCode, secret);
-        if (!isValidToken) {
-          throw new Error(ErrorCode.IncorrectTwoFactorCode);
-        }
-      }
-
-      const limiter = rateLimit({
-        intervalInMs: 60 * 1000, // 1 minute
-      });
-      await limiter.check(10, user.email); // 10 requests per minute
-      // Check if the user you are logging into has any active teams
-      const hasActiveTeams =
-        user.teams.filter((m) => {
-          if (!IS_TEAM_BILLING_ENABLED) return true;
-          const metadata = teamMetadataSchema.safeParse(m.team.metadata);
-          if (metadata.success && metadata.data?.subscriptionId) return true;
-          return false;
-        }).length > 0;
-
-      // authentication success- but does it meet the minimum password requirements?
-      if (user.role === "ADMIN" && !isPasswordValid(credentials.password, false, true)) {
-        return {
-          id: user.id,
-          username: user.username,
-          email: user.email,
-          name: user.name,
-          role: "INACTIVE_ADMIN",
-          belongsToActiveTeam: hasActiveTeams,
-        };
-      }
-
-      return {
-        id: user.id,
-        username: user.username,
-        email: user.email,
-        name: user.name,
-        role: user.role,
-        belongsToActiveTeam: hasActiveTeams,
-      };
-    },
-  }),
-  ImpersonationProvider,
-];
-
-if (IS_GOOGLE_LOGIN_ENABLED) {
-  providers.push(
-    GoogleProvider({
-      clientId: GOOGLE_CLIENT_ID,
-      clientSecret: GOOGLE_CLIENT_SECRET,
-      allowDangerousEmailAccountLinking: true,
-    })
-  );
-}
-
-if (isSAMLLoginEnabled) {
-  providers.push({
-    id: "saml",
-    name: "BoxyHQ",
-    type: "oauth",
-    version: "2.0",
-    checks: ["pkce", "state"],
-    authorization: {
-      url: `${WEBAPP_URL}/api/auth/saml/authorize`,
-      params: {
-        scope: "",
-        response_type: "code",
-        provider: "saml",
-      },
-    },
-    token: {
-      url: `${WEBAPP_URL}/api/auth/saml/token`,
-      params: { grant_type: "authorization_code" },
-    },
-    userinfo: `${WEBAPP_URL}/api/auth/saml/userinfo`,
-    profile: (profile) => {
-      return {
-        id: profile.id || "",
-        firstName: profile.firstName || "",
-        lastName: profile.lastName || "",
-        email: profile.email || "",
-        name: `${profile.firstName || ""} ${profile.lastName || ""}`.trim(),
-        email_verified: true,
-      };
-    },
-    options: {
-      clientId: "dummy",
-      clientSecret: "dummy",
-    },
-    allowDangerousEmailAccountLinking: true,
-  });
-}
-
-if (true) {
-  const emailsDir = path.resolve(process.cwd(), "..", "..", "packages/emails", "templates");
-  providers.push(
-    EmailProvider({
-      type: "email",
-      maxAge: 10 * 60 * 60, // Magic links are valid for 10 min only
-      // Here we setup the sendVerificationRequest that calls the email template with the identifier (email) and token to verify.
-      sendVerificationRequest: ({ identifier, url }) => {
-        const originalUrl = new URL(url);
-        const webappUrl = new URL(WEBAPP_URL);
-        if (originalUrl.origin !== webappUrl.origin) {
-          url = url.replace(originalUrl.origin, webappUrl.origin);
-        }
-        const emailFile = readFileSync(path.join(emailsDir, "confirm-email.html"), {
-          encoding: "utf8",
-        });
-        const emailTemplate = Handlebars.compile(emailFile);
-        transporter.sendMail({
-          from: `${process.env.EMAIL_FROM}` || APP_NAME,
-          to: identifier,
-          subject: "Your sign-in link for " + APP_NAME,
-          html: emailTemplate({
-            base_url: WEBAPP_URL,
-            signin_url: url,
-            email: identifier,
-          }),
-        });
-      },
-    })
-  );
-}
-
-function isNumber(n: string) {
-  return !isNaN(parseFloat(n)) && !isNaN(+n);
-}
-
-const calcomAdapter = CalComAdapter(prisma);
-
-export default NextAuth({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  adapter: calcomAdapter,
-  session: {
-    strategy: "jwt",
-  },
-  jwt: {
-    // decorate the native JWT encode function
-    // Impl. detail: We don't pass through as this function is called with encode/decode functions.
-    encode: async ({ token, maxAge, secret }) => {
-      if (token?.sub && isNumber(token.sub)) {
-        const user = await prisma.user.findFirst({
-          where: { id: Number(token.sub) },
-          select: { metadata: true },
-        });
-        // if no user is found, we still don't want to crash here.
-        if (user) {
-          const metadata = userMetadata.parse(user.metadata);
-          if (metadata?.sessionTimeout) {
-            maxAge = metadata.sessionTimeout / 60;
-          }
-        }
-      }
-      return encode({ secret, token, maxAge });
-    },
-  },
-  cookies: defaultCookies(WEBAPP_URL?.startsWith("https://")),
-  pages: {
-    signIn: "/auth/login",
-    signOut: "/auth/logout",
-    error: "/auth/error", // Error code passed in query string as ?error=
-    verifyRequest: "/auth/verify",
-    // newUser: "/auth/new", // New users will be directed here on first sign in (leave the property out if not of interest)
-  },
-  providers,
-  callbacks: {
-    async jwt({ token, user, account }) {
-      const autoMergeIdentities = async () => {
-        const existingUser = await prisma.user.findFirst({
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          where: { email: token.email! },
-          select: {
-            id: true,
-            username: true,
-            name: true,
-            email: true,
-            role: true,
-          },
-        });
-
-        if (!existingUser) {
-          return token;
-        }
-
-        return {
-          ...existingUser,
-          ...token,
-        };
-      };
-
-      if (!user) {
-        return await autoMergeIdentities();
-      }
-
-      if (account && account.type === "credentials") {
-        return {
-          ...token,
-          id: user.id,
-          name: user.name,
-          username: user.username,
-          email: user.email,
-          role: user.role,
-          impersonatedByUID: user?.impersonatedByUID,
-          belongsToActiveTeam: user?.belongsToActiveTeam,
-        };
-      }
-
-      // The arguments above are from the provider so we need to look up the
-      // user based on those values in order to construct a JWT.
-      if (account && account.type === "oauth" && account.provider && account.providerAccountId) {
-        let idP: IdentityProvider = IdentityProvider.GOOGLE;
-        if (account.provider === "saml") {
-          idP = IdentityProvider.SAML;
-        }
-        const existingUser = await prisma.user.findFirst({
-          where: {
-            AND: [
-              {
-                identityProvider: idP,
-              },
-              {
-                identityProviderId: account.providerAccountId as string,
-              },
-            ],
-          },
-        });
-
-        if (!existingUser) {
-          return await autoMergeIdentities();
-        }
-
-        return {
-          ...token,
-          id: existingUser.id,
-          name: existingUser.name,
-          username: existingUser.username,
-          email: existingUser.email,
-          role: existingUser.role,
-          impersonatedByUID: token.impersonatedByUID as number,
-          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
-        };
-      }
-
-      return token;
-    },
-    async session({ session, token }) {
-      const hasValidLicense = await checkLicense(prisma);
-      const calendsoSession: Session = {
-        ...session,
-        hasValidLicense,
-        user: {
-          ...session.user,
-          id: token.id as number,
-          name: token.name,
-          username: token.username as string,
-          role: token.role as UserPermissionRole,
-          impersonatedByUID: token.impersonatedByUID as number,
-          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
-        },
-      };
-      return calendsoSession;
-    },
-    async signIn(params) {
-      const { user, account, profile } = params;
-
-      if (account?.provider === "email") {
-        return true;
-      }
-      // In this case we've already verified the credentials in the authorize
-      // callback so we can sign the user in.
-      if (account?.type === "credentials") {
-        return true;
-      }
-
-      if (account?.type !== "oauth") {
-        return false;
-      }
-
-      if (!user.email) {
-        return false;
-      }
-
-      if (!user.name) {
-        return false;
-      }
-
-      if (account?.provider) {
-        let idP: IdentityProvider = IdentityProvider.GOOGLE;
-        if (account.provider === "saml") {
-          idP = IdentityProvider.SAML;
-        }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore-error TODO validate email_verified key on profile
-        user.email_verified = user.email_verified || !!user.emailVerified || profile.email_verified;
-
-        if (!user.email_verified) {
-          return "/auth/error?error=unverified-email";
-        }
-        // Only google oauth on this path
-        const provider = account.provider.toUpperCase() as IdentityProvider;
-
-        const existingUser = await prisma.user.findFirst({
-          include: {
-            accounts: {
-              where: {
-                provider: account.provider,
-              },
-            },
-          },
-          where: {
-            identityProvider: provider,
-            identityProviderId: account.providerAccountId,
-          },
-        });
-
-        if (existingUser) {
-          // In this case there's an existing user and their email address
-          // hasn't changed since they last logged in.
-          if (existingUser.email === user.email) {
-            try {
-              // If old user without Account entry we link their google account
-              if (existingUser.accounts.length === 0) {
-                const linkAccountWithUserData = { ...account, userId: existingUser.id };
-                await calcomAdapter.linkAccount(linkAccountWithUserData);
-              }
-            } catch (error) {
-              if (error instanceof Error) {
-                console.error("Error while linking account of already existing user");
-              }
-            }
-            return true;
-          }
-
-          // If the email address doesn't match, check if an account already exists
-          // with the new email address. If it does, for now we return an error. If
-          // not, update the email of their account and log them in.
-          const userWithNewEmail = await prisma.user.findFirst({
-            where: { email: user.email },
-          });
-
-          if (!userWithNewEmail) {
-            await prisma.user.update({ where: { id: existingUser.id }, data: { email: user.email } });
-            return true;
-          } else {
-            return "/auth/error?error=new-email-conflict";
-          }
-        }
-
-        // If there's no existing user for this identity provider and id, create
-        // a new account. If an account already exists with the incoming email
-        // address return an error for now.
-        const existingUserWithEmail = await prisma.user.findFirst({
-          where: { email: user.email },
-        });
-
-        if (existingUserWithEmail) {
-          // if self-hosted then we can allow auto-merge of identity providers if email is verified
-          if (!hostedCal && existingUserWithEmail.emailVerified) {
-            return true;
-          }
-
-          // check if user was invited
-          if (
-            !existingUserWithEmail.password &&
-            !existingUserWithEmail.emailVerified &&
-            !existingUserWithEmail.username
-          ) {
-            await prisma.user.update({
-              where: { email: user.email },
-              data: {
-                // Slugify the incoming name and append a few random characters to
-                // prevent conflicts for users with the same name.
-                username: usernameSlug(user.name),
-                emailVerified: new Date(Date.now()),
-                name: user.name,
-                identityProvider: idP,
-                identityProviderId: String(user.id),
-              },
-            });
-
-            return true;
-          }
-
-          // User signs up with email/password and then tries to login with Google/SAML using the same email
-          if (
-            existingUserWithEmail.identityProvider === IdentityProvider.CAL &&
-            (idP === IdentityProvider.GOOGLE || idP === IdentityProvider.SAML)
-          ) {
-            await prisma.user.update({
-              where: { email: existingUserWithEmail.email },
-              data: { password: null },
-            });
-            return true;
-          } else if (existingUserWithEmail.identityProvider === IdentityProvider.CAL) {
-            return "/auth/error?error=use-password-login";
-          }
-
-          return "/auth/error?error=use-identity-login";
-        }
-
-        const newUser = await prisma.user.create({
-          data: {
-            // Slugify the incoming name and append a few random characters to
-            // prevent conflicts for users with the same name.
-            username: usernameSlug(user.name),
-            emailVerified: new Date(Date.now()),
-            name: user.name,
-            email: user.email,
-            identityProvider: idP,
-            identityProviderId: String(user.id),
-          },
-        });
-        const linkAccountNewUserData = { ...account, userId: newUser.id };
-        await calcomAdapter.linkAccount(linkAccountNewUserData);
-
-        return true;
-      }
-
-      return false;
-    },
-    async redirect({ url, baseUrl }) {
-      // Allows relative callback URLs
-      if (url.startsWith("/")) return `${baseUrl}${url}`;
-      // Allows callback URLs on the same domain
-      else if (new URL(url).hostname === new URL(WEBAPP_URL).hostname) return url;
-      return baseUrl;
-    },
-  },
-});
+export default NextAuth(AUTH_OPTIONS);

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

@@ -1,14 +1,14 @@
 import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import prisma from "@calcom/prisma";
 
-import { getSession } from "@lib/auth";
-
-import { ErrorCode, hashPassword, verifyPassword } from "../../../lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getSession({ req: req });
+  const session = await getServerSession({ req, res });
 
   if (!session || !session.user || !session.user.email) {
     res.status(401).json({ message: "Not authenticated" });

apps/web/pages/api/auth/reset-password.ts

@@ -1,9 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
 import prisma from "@calcom/prisma";
 
-import { hashPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(400).json({ message: "" });

apps/web/pages/api/auth/saml/callback.ts

@@ -5,8 +5,12 @@ import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 
 async function postHandler(req: NextApiRequest, res: NextApiResponse) {
   const { oauthController } = await jackson();
+
   const { redirect_url } = await oauthController.samlResponse(req.body);
-  if (redirect_url) return res.redirect(302, redirect_url);
+
+  if (redirect_url) {
+    res.redirect(302, redirect_url);
+  }
 }
 
 export default defaultHandler({

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

@@ -2,8 +2,8 @@ import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import z from "zod";
 
-import { isPasswordValid } from "@calcom/lib/auth";
-import { hashPassword } from "@calcom/lib/auth";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 import slugify from "@calcom/lib/slugify";

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

@@ -1,7 +1,7 @@
 import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { hashPassword } from "@calcom/lib/auth";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
 import slugify from "@calcom/lib/slugify";
 import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
 import prisma from "@calcom/prisma";

apps/web/pages/api/auth/two-factor/totp/disable.ts

@@ -1,17 +1,18 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession, verifyPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/auth/two-factor/totp/enable.ts

@@ -1,17 +1,17 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/auth/two-factor/totp/setup.ts

@@ -3,17 +3,18 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 import qrcode from "qrcode";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricEncrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession, verifyPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/availability/calendar.ts

@@ -1,14 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 import { getCalendarCredentials, getConnectedCalendars } from "@calcom/core/CalendarManager";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import notEmpty from "@calcom/lib/notEmpty";
 import { revalidateCalendarCache } from "@calcom/lib/server/revalidateCalendarCache";
 import prisma from "@calcom/prisma";
 
-import { getSession } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
 
   if (!session?.user?.id) {
     res.status(401).json({ message: "Not authenticated" });
@@ -83,7 +82,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     // get user's credentials + their connected integrations
     const calendarCredentials = getCalendarCredentials(user.credentials);
     // get all the connected integrations' calendars (from third party)
-    const connectedCalendars = await getConnectedCalendars(calendarCredentials, user.selectedCalendars);
+    const { connectedCalendars } = await getConnectedCalendars(calendarCredentials, user.selectedCalendars);
     const calendars = connectedCalendars.flatMap((c) => c.calendars).filter(notEmpty);
     const selectableCalendars = calendars.map((cal) => {
       return { selected: selectedCalendarIds.findIndex((s) => s.externalId === cal.externalId) > -1, ...cal };

apps/web/pages/api/book/event.ts

@@ -1,14 +1,16 @@
-import type { NextApiRequest } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
-import { getSession } from "@calcom/lib/auth";
 import { defaultResponder } from "@calcom/lib/server";
 
-async function handler(req: NextApiRequest & { userId?: number }) {
-  const session = await getSession({ req });
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
-  const booking = await handleNewBooking(req);
+  const booking = await handleNewBooking(req, {
+    isNotAnApiCall: true,
+  });
   return booking;
 }
 

apps/web/pages/api/cancel.ts

@@ -1,11 +1,11 @@
-import type { NextApiRequest } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleCancelBooking from "@calcom/features/bookings/lib/handleCancelBooking";
-import { getSession } from "@calcom/lib/auth";
 import { defaultResponder, defaultHandler } from "@calcom/lib/server";
 
-async function handler(req: NextApiRequest & { userId?: number }) {
-  const session = await getSession({ req });
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
   return await handleCancelBooking(req);

apps/web/pages/api/download-cal-video-recording.ts

@@ -1,39 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { z } from "zod";
-
-import { fetcher } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
-import { getSession } from "@calcom/lib/auth";
-import { IS_SELF_HOSTED } from "@calcom/lib/constants";
-import { defaultHandler, defaultResponder } from "@calcom/lib/server";
-
-const getAccessLinkSchema = z.object({
-  download_link: z.string().url(),
-  // expires (timestamp), s3_bucket, s3_region, s3_key
-});
-
-const requestQuery = z.object({
-  recordingId: z.string(),
-});
-
-const isDownloadAllowed = async (req: NextApiRequest) => {
-  if (IS_SELF_HOSTED) return true;
-  const session = await getSession({ req });
-  // Check if user belong to active team
-  return !session?.user?.belongsToActiveTeam;
-};
-
-async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<z.infer<typeof getAccessLinkSchema> | void>
-) {
-  const { recordingId } = requestQuery.parse(req.query);
-
-  if (!(await isDownloadAllowed(req))) return res.status(403);
-
-  const response = await fetcher(`/recordings/${recordingId}/access-link`).then(getAccessLinkSchema.parse);
-  return res.status(200).json(response);
-}
-
-export default defaultHandler({
-  GET: Promise.resolve({ default: defaultResponder(handler) }),
-});

apps/web/pages/api/integrations/[...args].ts

@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import type { Session } from "next-auth";
 
 import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
-import { getSession } from "@calcom/lib/auth";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import { revalidateCalendarCache } from "@calcom/lib/server/revalidateCalendarCache";
 import prisma from "@calcom/prisma";
@@ -42,7 +42,7 @@ const defaultIntegrationAddHandler = async ({
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   // Check that user is authenticated
-  req.session = await getSession({ req });
+  req.session = await getServerSession({ req, res });
 
   const { args } = req.query;
 

apps/web/pages/api/me.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { performance } from "@calcom/lib/server/perfObserver";
 
 let isCold = true;
@@ -9,7 +9,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const prePrismaDate = performance.now();
   const prisma = (await import("@calcom/prisma")).default;
   const preSessionDate = performance.now();
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) return res.status(409).json({ message: "Unauthorized" });
   const preUserDate = performance.now();
   const user = await prisma.user.findUnique({ where: { id: session.user.id } });

apps/web/pages/api/social/og/image.tsx

@@ -1,6 +1,8 @@
 import { ImageResponse } from "@vercel/og";
 import type { NextApiRequest } from "next";
+import { remark } from "remark";
 import type { SatoriOptions } from "satori";
+import strip from "strip-markdown";
 import { z } from "zod";
 
 import { Meeting, App, Generic } from "@calcom/lib/OgImages";
@@ -18,7 +20,7 @@ const interFontMedium = fetch(new URL("../../../../public/fonts/Inter-Medium.ttf
 );
 
 export const config = {
-  runtime: "experimental-edge",
+  runtime: "edge",
 };
 
 const meetingSchema = z.object({
@@ -106,8 +108,8 @@ export default async function handler(req: NextApiRequest) {
         description: searchParams.get("description"),
         imageType,
       });
-
-      const img = new ImageResponse(<Generic title={title} description={description} />, ogConfig) as {
+      const description_ = await (await remark().use(strip).process(description)).toString();
+      const img = new ImageResponse(<Generic title={title} description={description_} />, ogConfig) as {
         body: Buffer;
       };
 

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

@@ -3,8 +3,9 @@
  */
 import { z } from "zod";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import * as trpcNext from "@calcom/trpc/server/adapters/next";
-import { createContext } from "@calcom/trpc/server/createContext";
+import { createContext as createTrpcContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
 export default trpcNext.createNextApiHandler({
@@ -12,7 +13,11 @@ export default trpcNext.createNextApiHandler({
   /**
    * @link https://trpc.io/docs/context
    */
-  createContext,
+  createContext: ({ req, res }) => {
+    const sessionGetter = () => getServerSession({ req, res });
+
+    return createTrpcContext({ req, res }, sessionGetter);
+  },
   /**
    * @link https://trpc.io/docs/error-handling
    */
@@ -65,6 +70,7 @@ export default trpcNext.createNextApiHandler({
       "viewer.public.i18n": `no-cache`,
       // Revalidation time here should be 1 second, per https://github.com/calcom/cal.com/pull/6823#issuecomment-1423215321
       "viewer.public.slots.getSchedule": `no-cache`, // FIXME
+      "viewer.public.cityTimezones": `max-age=${ONE_DAY_IN_SECONDS}, stale-while-revalidate`,
     } as const;
 
     // Find which element above is an exact match for this group of paths

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

@@ -2,7 +2,7 @@ import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
-import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import prisma from "@calcom/prisma";
 
 import { defaultAvatarSrc } from "@lib/profile";

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

@@ -1,13 +1,13 @@
 import type { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 
-import RoutingFormsRoutingConfig from "@calcom/app-store/ee/routing-forms/pages/app-routing.config";
+import RoutingFormsRoutingConfig from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import prisma from "@calcom/prisma";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
 
 import type { AppProps } from "@lib/app-providers";
-import { getSession } from "@lib/auth";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -103,7 +103,7 @@ export async function getServerSideProps(
     appPages?: string[];
   }>
 ) {
-  const { params } = context;
+  const { params, req, res } = context;
   if (!params) {
     return {
       notFound: true,
@@ -120,7 +120,7 @@ export async function getServerSideProps(
     // appPages is actually hardcoded here and no matter the fileName the same variable would be used.
     // We can write some validation logic later on that ensures that [...appPages].tsx file exists
     params.appPages = pages.slice(1);
-    const session = await getSession({ req: context.req });
+    const session = await getServerSession({ req, res });
     const user = session?.user;
 
     const result = await route.getServerSideProps(

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

@@ -5,7 +5,6 @@ import type { GetStaticPaths, GetStaticPropsContext } from "next";
 import path from "path";
 
 import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
-import ExisitingGoogleCal from "@calcom/app-store/googlevideo/components/ExistingGoogleCal";
 import prisma from "@calcom/prisma";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -36,11 +35,11 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
       isProOnly={data.isProOnly}
       images={source.data?.items as string[] | undefined}
       isTemplate={data.isTemplate}
+      dependencies={data.dependencies}
       //   tos="https://zoom.us/terms"
       //   privacy="https://zoom.us/privacy"
       body={
         <>
-          {data.slug === "google-meet" && <ExisitingGoogleCal />}
           <div dangerouslySetInnerHTML={{ __html: md.render(source.content) }} />
         </>
       }

apps/web/pages/apps/index.tsx

@@ -3,8 +3,8 @@ import type { ChangeEventHandler } from "react";
 import { useState } from "react";
 
 import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { classNames } from "@calcom/lib";
-import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/client";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -86,9 +86,11 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
 }
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req, res } = context;
+
   const ssg = await ssgInit(context);
 
-  const session = await getSession(context);
+  const session = await getServerSession({ req, res });
 
   let appStore;
   if (session?.user?.id) {

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

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useReducer, useState } from "react";
+import { useCallback, useReducer, useState } from "react";
 import z from "zod";
 
 import { AppSettings } from "@calcom/app-store/_components/AppSettings";
@@ -7,8 +7,9 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationTypeFromApp } from "@calcom/app-store/locations";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
-import { AppSetDefaultLinkDailog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
+import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -113,11 +114,16 @@ interface IntegrationsListProps {
 const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListProps) => {
   const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
   const utils = trpc.useContext();
-
+  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
   const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
     undefined
   );
 
+  const onSuccessCallback = useCallback(() => {
+    setBulkUpdateModal(true);
+    showToast("Default app updated successfully", "success");
+  }, []);
+
   const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
     onSuccess: () => {
       showToast("Default app updated successfully", "success");
@@ -172,6 +178,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                                   updateDefaultAppMutation.mutate({
                                     appSlug,
                                   });
+                                  setBulkUpdateModal(true);
                                 }
                               }}>
                               {t("change_default_conferencing_app")}
@@ -196,11 +203,16 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
           })}
       </List>
       {locationType && (
-        <AppSetDefaultLinkDailog
+        <AppSetDefaultLinkDialog
           locationType={locationType}
           setLocationType={() => setLocationType(undefined)}
+          onSuccess={onSuccessCallback}
         />
       )}
+
+      {bulkUpdateModal && (
+        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
+      )}
     </>
   );
 };

apps/web/pages/auth/forgot-password/[id].tsx

@@ -2,6 +2,7 @@ import type { ResetPasswordRequest } from "@prisma/client";
 import debounce from "lodash/debounce";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import React, { useMemo } from "react";
 
@@ -185,6 +186,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         },
         id,
         csrfToken: await getCsrfToken({ req: context.req }),
+        ...(await serverSideTranslations(context.locale || "en", ["common"])),
       },
     };
   } catch (reason) {

apps/web/pages/auth/forgot-password/index.tsx

@@ -1,16 +1,16 @@
 import debounce from "lodash/debounce";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import type { SyntheticEvent } from "react";
 import React from "react";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmailField } from "@calcom/ui";
 
-import { getSession } from "@lib/auth";
-
 import AuthContainer from "@components/ui/AuthContainer";
 
 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
@@ -132,17 +132,21 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
   );
 }
 
-ForgotPassword.getInitialProps = async (context: GetServerSidePropsContext) => {
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
   const { req, res } = context;
-  const session = await getSession({ req });
+
+  const session = await getServerSession({ req, res });
 
   if (session) {
     res.writeHead(302, { Location: "/" });
     res.end();
-    return;
+    return { props: {} };
   }
 
   return {
-    csrfToken: await getCsrfToken(context),
+    props: {
+      csrfToken: await getCsrfToken(context),
+      ...(await serverSideTranslations(context.locale || "en", ["common"])),
+    },
   };
 };

apps/web/pages/auth/login.tsx

@@ -1,4 +1,5 @@
 import classNames from "classnames";
+import { jwtVerify } from "jose";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
 import Link from "next/link";
@@ -8,8 +9,9 @@ import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
 
 import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { isSAMLLoginEnabled, samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
-import { ErrorCode, getSession } from "@calcom/lib/auth";
 import { WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -42,14 +44,14 @@ export default function Login({
   isSAMLLoginEnabled,
   samlTenantID,
   samlProductID,
+  totpEmail,
 }: inferSSRProps<typeof _getServerSideProps> & WithNonceProps) {
   const { t } = useLocale();
   const router = useRouter();
   const methods = useForm<LoginValues>();
 
   const { register, formState } = methods;
-
-  const [twoFactorRequired, setTwoFactorRequired] = useState(false);
+  const [twoFactorRequired, setTwoFactorRequired] = useState(!!totpEmail || false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const errorMessages: { [key: string]: string } = {
@@ -94,6 +96,16 @@ export default function Login({
     </Button>
   );
 
+  const ExternalTotpFooter = (
+    <Button
+      onClick={() => {
+        window.location.replace("/");
+      }}
+      color="minimal">
+      {t("cancel")}
+    </Button>
+  );
+
   const onSubmit = async (values: LoginValues) => {
     setErrorMessage(null);
     telemetry.event(telemetryEventTypes.login, collectPageParameters());
@@ -120,7 +132,9 @@ export default function Login({
         heading={twoFactorRequired ? t("2fa_code") : t("welcome_back")}
         footerText={
           twoFactorRequired
-            ? TwoFactorFooter
+            ? !totpEmail
+              ? TwoFactorFooter
+              : ExternalTotpFooter
             : process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== "true"
             ? LoginFooter
             : null
@@ -135,7 +149,7 @@ export default function Login({
                 <EmailField
                   id="email"
                   label={t("email_address")}
-                  defaultValue={router.query.email as string}
+                  defaultValue={totpEmail || (router.query.email as string)}
                   placeholder="john.doe@example.com"
                   required
                   {...register("email")}
@@ -152,7 +166,7 @@ export default function Login({
                   <PasswordField
                     id="password"
                     autoComplete="off"
-                    required
+                    required={!totpEmail}
                     className="mb-0"
                     {...register("password")}
                   />
@@ -207,10 +221,45 @@ export default function Login({
 
 // TODO: Once we understand how to retrieve prop types automatically from getServerSideProps, remove this temporary variable
 const _getServerSideProps = async function getServerSideProps(context: GetServerSidePropsContext) {
-  const { req } = context;
-  const session = await getSession({ req });
+  const { req, res } = context;
+
+  const session = await getServerSession({ req, res });
   const ssr = await ssrInit(context);
 
+  const verifyJwt = (jwt: string) => {
+    const secret = new TextEncoder().encode(process.env.CALENDSO_ENCRYPTION_KEY);
+
+    return jwtVerify(jwt, secret, {
+      issuer: WEBSITE_URL,
+      audience: `${WEBSITE_URL}/auth/login`,
+      algorithms: ["HS256"],
+    });
+  };
+
+  let totpEmail = null;
+  if (context.query.totp) {
+    try {
+      const decryptedJwt = await verifyJwt(context.query.totp as string);
+      if (decryptedJwt.payload) {
+        totpEmail = decryptedJwt.payload.email as string;
+      } else {
+        return {
+          redirect: {
+            destination: "/auth/error?error=JWT%20Invalid%20Payload",
+            permanent: false,
+          },
+        };
+      }
+    } catch (e) {
+      return {
+        redirect: {
+          destination: "/auth/error?error=Invalid%20JWT%3A%20Please%20try%20again",
+          permanent: false,
+        },
+      };
+    }
+  }
+
   if (session) {
     return {
       redirect: {
@@ -238,6 +287,7 @@ const _getServerSideProps = async function getServerSideProps(context: GetServer
       isSAMLLoginEnabled,
       samlTenantID,
       samlProductID,
+      totpEmail,
     },
   };
 };

apps/web/pages/auth/saml-idp.tsx

@@ -0,0 +1,23 @@
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+// To handle the IdP initiated login flow callback
+export default function Page() {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!router.isReady) {
+      return;
+    }
+
+    const { code } = router.query;
+
+    signIn("saml-idp", {
+      callbackUrl: "/",
+      code,
+    });
+  }, []);
+
+  return null;
+}

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

@@ -4,8 +4,8 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 
 import AdminAppsList from "@calcom/features/apps/AdminAppsList";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getDeploymentKey } from "@calcom/features/ee/deployment/lib/getDeploymentKey";
-import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -136,10 +136,12 @@ export default function Setup(props: inferSSRProps<typeof getServerSideProps>) {
 }
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req, res } = context;
+
   const ssr = await ssrInit(context);
   const userCount = await prisma.user.count();
-  const { req } = context;
-  const session = await getSession({ req });
+
+  const session = await getServerSession({ req, res });
 
   if (session?.user.role && session?.user.role !== UserPermissionRole.ADMIN) {
     return {

apps/web/pages/auth/signin.tsx

@@ -1,6 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
-import { getProviders, signIn, getSession, getCsrfToken } from "next-auth/react";
+import { getProviders, signIn, getCsrfToken } from "next-auth/react";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { Button } from "@calcom/ui";
 
 type Provider = {
@@ -25,7 +26,9 @@ function signin({ providers }: { providers: Provider[] }) {
 export default signin;
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const session = await getSession(context);
+  const { req, res } = context;
+
+  const session = await getServerSession({ req, res });
   const csrfToken = await getCsrfToken(context);
   const providers = await getProviders();
   if (session) {

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

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { getPremiumMonthlyPlanPriceId } from "@calcom/app-store/stripepayment/lib/utils";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import stripe from "@calcom/features/ee/payments/server/stripe";
 import {
   hostedCal,
@@ -16,7 +17,6 @@ import { checkUsername } from "@calcom/lib/server/checkUsername";
 import prisma from "@calcom/prisma";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
-import { getSession } from "@lib/auth";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { ssrInit } from "@server/lib/ssr";
@@ -60,9 +60,9 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     throw new Error(`File is not named sso/[provider]`);
   }
 
-  const { req } = context;
+  const { req, res } = context;
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   const ssr = await ssrInit(context);
 
   if (session) {

apps/web/pages/auth/sso/direct.tsx

@@ -0,0 +1,38 @@
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/router";
+
+import { samlProductID, samlTenantID } from "@calcom/features/ee/sso/lib/saml";
+import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
+
+import type { inferSSRProps } from "@lib/types/inferSSRProps";
+
+// This page is used to initiate the SAML authentication flow by redirecting to the SAML provider.
+// Accessible only on self-hosted Cal.com instances.
+export default function Page({ samlTenantID, samlProductID }: inferSSRProps<typeof getServerSideProps>) {
+  const router = useRouter();
+
+  if (HOSTED_CAL_FEATURES) {
+    router.push("/auth/login");
+    return;
+  }
+
+  // Initiate SAML authentication flow
+  signIn(
+    "saml",
+    {
+      callbackUrl: "/",
+    },
+    { tenant: samlTenantID, product: samlProductID }
+  );
+
+  return null;
+}
+
+export async function getServerSideProps() {
+  return {
+    props: {
+      samlTenantID,
+      samlProductID,
+    },
+  };
+}