fixed timezone select (#7638)

* feat: add custom validate name util

* refactor: separate custom event type modal into a
different component

* feat: add validation to zod

* chore: add i18n key

* feat: add dynamic imports

* fix: padding

* Omit cache-hit exit 1, assuming it'll fail regardless

* allow custom inputs as variables in event name

* fix ui for adding custom inputs

* show edited event name in modal

* code clean up

* merge fixes

* includes new booking fields logic

* fix event name with custom booking fields

* code clean up

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

Co-authored-by: Alex van Andel <me@alexvanandel.com>

* fix type error

* remove old reqbody variable

---------

Co-authored-by: nafees nazik <nafeesnazik21@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.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

@@ -0,0 +1,33 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*           @calcom/reviewers
+
+.github/    @calcom/core
+.husky/     @calcom/core
+.vcode/     @calcom/core
+.snaplet/   @calcom/core
+deploy/     @calcom/core
+scripts/    @calcom/core
+
+apps/docs       @calcom/docs
+apps/swagger    @calcom/docs
+
+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/ee/routing-forms   @hariombalhara @calcom/core

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

@@ -0,0 +1,28 @@
+name: Cache production build binaries
+description: "Cache or restore if necessary"
+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: ${{ 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: |
+          ${{ github.workspace }}/apps/web/.next
+          **/.turbo/**
+          **/dist/**
+        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

@@ -0,0 +1,38 @@
+name: Cache database between jobs
+description: "Cache or restore if necessary"
+inputs:
+  DATABASE_URL:
+    required: false
+    default: "postgresql://postgres:@localhost:5432/calendso"
+  path:
+    required: false
+    default: "backups/backup.sql"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache database
+      id: cache-db
+      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 }}-${{ 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
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        path: ${{ inputs.path }}
+        options: "-O"
+    - name: Postgres Backup Restore
+      if: steps.cache-db.outputs.cache-hit == 'true'
+      uses: tj-actions/pg-restore@v4.5
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        backup_file: ${{ inputs.path }}

.github/actions/dangerous-git-checkout/action.yml

@@ -0,0 +1,10 @@
+name: Dangerous git Checkout
+description: "Git Checkout from PR code so we can run checks from forks"
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 2

.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-install/action.yml

@@ -0,0 +1,19 @@
+name: Yarn install
+description: "Install all NPM dependencies, caches them and restores if necessary"
+inputs:
+  node_version:
+    required: false
+    default: v16.x
+runs:
+  using: "composite"
+  steps:
+    - name: Use Node ${{ inputs.node_version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node_version }}
+        cache: "yarn"
+    - name: Yarn install
+      shell: bash
+      run: |
+        yarn install --prefer-offline --frozen-lockfile
+        yarn prisma generate

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

@@ -0,0 +1,19 @@
+name: Install playwright binaries
+description: "Install playwright, cache and restore if necessary"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache playwright binaries
+      id: playwright-cache
+      uses: actions/cache@v2
+      with:
+        path: |
+          ~/Library/Caches/ms-playwright
+          ~/.cache/ms-playwright
+          ${{ github.workspace }}/node_modules/playwright
+        key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: cache-playwright-
+    - name: Yarn playwright install
+      shell: bash
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: yarn playwright install

.github/workflows/cache-clean.yml

@@ -0,0 +1,33 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          REPO=${{ github.repository }}
+          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys. 
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/check-if-ui-has-changed.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 0

.github/workflows/check-types.yml

@@ -1,34 +1,17 @@
 name: Check types
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
 env:
   NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
   check-types:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
 
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        
-        with:
-          node-version: 16.x
-          cache: "yarn"
-      
       - name: Show info
         run: node -e "console.log(require('v8').getHeapStatistics())"
-      
-      - run: yarn --frozen-lockfile
+
       - run: yarn type-check

.github/workflows/crowdin.yml

@@ -9,14 +9,12 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  required-checks:
-    uses: calcom/cal.com/.github/workflows/required-checks.yml@main
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: crowdin action
         uses: crowdin/github-action@1.4.9

.github/workflows/db-staging-snapshot.yml

@@ -7,7 +7,7 @@ jobs:
   db-staging-snapshot:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Install Snaplet CLI
         run: curl -sL https://app.snaplet.dev/get-cli/ | bash
       - name: Restore Snapshot

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

@@ -1,60 +1,12 @@
 name: E2E App-Store Apps
 on:
-  push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths-ignore:
-      - apps/api/**
-      - apps/console/**
-      - apps/docs/**
-      - apps/swagger/**
-      - apps/website/**
-      - apps/web/public/**
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
+
 jobs:
-  test:
+  e2e-app-store:
     timeout-minutes: 20
     name: E2E App-Store Apps
-    strategy:
-      matrix:
-        node: ["16.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
-    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 }}
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:12.1
@@ -65,35 +17,18 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - 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

@@ -1,56 +1,11 @@
 name: E2E Embed tests and booking flow(for non-embed as well)
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
-    paths:
-      - apps/web/**
-      - packages/embeds/**
   workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+
 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
@@ -61,45 +16,28 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - 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

@@ -1,59 +1,11 @@
 name: E2E test
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths:
-      - apps/web/**
-      - packages/**
   workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
 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
@@ -62,37 +14,20 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
-      - run: yarn test-e2e
-
-      - name: Upload test results
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
+      - 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/lint.yml

@@ -1,38 +1,14 @@
 name: Lint
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
-      - "**.jsx?"
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
 jobs:
   lint:
-    runs-on: buildjet-4vcpu-ubuntu-2204
+    runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
-
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Install deps
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile
-
-      - name: Test Code Linting
-        run: yarn lint
-
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
       - name: Save Code Linting Reports
         run: yarn lint:report
         continue-on-error: true

.github/workflows/nextjs-bundle-analysis.yml

@@ -1,91 +1,30 @@
 name: "Next.js Bundle Analysis"
 
 on:
-  pull_request:
+  workflow_call:
   push:
     branches:
       - main
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-defaults:
-  run:
-    # change this if your nextjs app does not live at the root of the repo
-    working-directory: ./apps/web/
 
 jobs:
+  build:
+    name: Production build
+    if: ${{ github.event_name == 'push' }}
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
   analyze:
-    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
-      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 }}
-    services:
-      postgres:
-        image: postgres:12.1
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_DB: calendso
-        ports:
-          - 5432:5432
+    needs: build
+    if: always()
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Set up node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
-      - name: Restore next build
-        uses: actions/cache@v2
-        id: restore-build-cache
-        env:
-          cache-name: cache-next-build
-        with:
-          path: apps/web/.next/cache
-          # change this if you prefer a more strict cache
-          key: ${{ runner.os }}-build-${{ env.cache-name }}
-
-      - name: Build next.js app
-        # change this if your site requires a custom build command
-        run: cd ../.. && yarn db-seed && yarn build
-
-      # Here's the first place where next-bundle-analysis' own script is used
-      # This step pulls the raw bundle stats for the current bundle
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/cache-build
       - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
+        run: |
+          cd apps/web
+          npx -p nextjs-bundle-analysis report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2
@@ -97,7 +36,7 @@ jobs:
         uses: dawidd6/action-download-artifact@v2
         if: success() && github.event.number
         with:
-          workflow: nextjs_bundle_analysis.yml
+          workflow: nextjs-bundle-analysis.yml
           branch: ${{ github.event.pull_request.base.ref }}
           path: apps/web/.next/analyze/base
 
@@ -116,13 +55,16 @@ jobs:
       # entry in your package.json file.
       - name: Compare with base branch bundle
         if: success() && github.event.number
-        run: ls -laR apps/web/.next/analyze/base && npx -p nextjs-bundle-analysis compare
+        run: |
+          cd apps/web
+          ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
 
       - name: Get comment body
         id: get-comment-body
         if: success() && github.event.number
         run: |
-          body=$(cat apps/web/.next/analyze/__bundle_analysis_comment.txt)
+          cd apps/web
+          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"
           body="${body//$'\r'/'%0D'}"

.github/workflows/pr.yml

@@ -0,0 +1,96 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+    paths-ignore:
+      - "**.md"
+      - ".github/CODEOWNERS"
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      app-store: ${{ steps.filter.outputs.app-store }}
+      embed: ${{ steps.filter.outputs.embed }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            app-store:
+              - 'apps/web/**'
+              - 'packages/app-store/**'
+            embed:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+
+  env:
+    name: Create env file
+    uses: ./.github/workflows/env-create-file.yml
+    secrets: inherit
+
+  type-check:
+    name: Type check
+    uses: ./.github/workflows/check-types.yml
+    secrets: inherit
+
+  test:
+    name: Unit tests
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Production build
+    needs: env
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+
+  e2e:
+    name: E2E tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit
+
+  e2e-app-store:
+    name: E2E App Store tests
+    if: ${{ needs.changes.outputs.app-store == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-app-store.yml
+    secrets: inherit
+
+  e2e-embed:
+    name: E2E embeds tests
+    if: ${{ needs.changes.outputs.embed == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed.yml
+    secrets: inherit
+
+  analyze:
+    needs: build
+    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+    secrets: inherit
+
+  required:
+    needs: [lint, type-check, test, build, e2e]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1

.github/workflows/production-build.yml

@@ -0,0 +1,25 @@
+name: Production Build
+
+on:
+  workflow_call:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build

.github/workflows/required-checks.yml

@@ -1,44 +0,0 @@
-name: "Meta Workflow: Require Conditional Status Checks"
-on:
-  pull_request:
-    branches:
-      - main
-  workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-jobs:
-  required-checks:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Ensure All Conditional Checks Have Passed
-        uses: blend/require-conditional-status-checks@2022.02.04
-        with:
-          timeout: 15m
-          github-token: ${{ github.token }}
-          interval: 20s
-          # Question marks aren't working
-          # @see https://github.com/blend/require-conditional-status-checks/pull/11
-          checks-yaml: |
-            - job: lint
-              paths:
-                - /**/*.jsx
-                - /**/*.js
-                - /**/*.tsx
-                - /**/*.ts
-            - job: check-types
-              paths:
-                - /**/*.tsx
-                - /**/*.ts
-            - job: e2e
-              paths:
-                - /apps/web/**
-                - /packages/**
-            - job: e2e-embed
-              paths:
-                - /apps/web/**
-                - /packages/embeds/**
-            - job: test
-              paths:
-                - /apps/web/**
-                - /packages/**

.github/workflows/submodule-sync.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           submodules: recursive
           token: ${{ secrets.GH_ACCESS_TOKEN }}

.github/workflows/test.yml

@@ -1,33 +1,17 @@
 name: Unit tests
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths:
-      - apps/web/**
-      - packages/**
+  workflow_call:
   workflow_run:
     workflows: [Crowdin Action]
     types: [completed]
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
 jobs:
   test:
     timeout-minutes: 20
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
-      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=6144"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-      - run: yarn --frozen-lockfile
+      - uses: ./.github/actions/yarn-install
+      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
       - run: yarn test

.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:

.github/workflows/yarn-install.yml

@@ -0,0 +1,14 @@
+name: Yarn install
+
+on:
+  workflow_call:
+
+jobs:
+  setup:
+    name: Yarn install & cache
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install

.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,6 +4,60 @@ 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 
+
+<table>
+  <tr>
+    <td>
+      Type of Issue
+    </td>
+    <td>
+      Priority
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Minor improvements, non-core feature requests
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22Low+priority%22">
+        <img src="https://img.shields.io/badge/-Low%20Priority-green">
+      </a>
+    </td>
+  </tr>
+   <tr>
+    <td>
+      Confusing UX (... but working)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22Medium+priority%22">
+        <img src="https://img.shields.io/badge/-Medium%20Priority-yellow">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Core Features (Booking page, availabilty, timezone calculation)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22High+priority%22">
+        <img src="https://img.shields.io/badge/-High%20Priority-orange">
+      </a>
+    </td>
+  </tr>
+  <tr>
+    <td>
+      Core Bugs (Login, Booking page, Emails are not working)
+    </td>
+    <td>
+      <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:Urgent">
+        <img src="https://img.shields.io/badge/-Urgent-red">
+      </a>
+    </td>
+  </tr>
+</table>
+
+
 ## Developing
 
 The development branch is `main`. This is the branch that all pull
@@ -74,6 +128,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

@@ -25,7 +25,7 @@
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-   <a href="https://status.cal.com"><img src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
+   <a href="https://status.cal.com"><img height="20px" src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
    <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
    <a href="https://news.ycombinator.com/item?id=34507672"><img src="https://img.shields.io/badge/Hacker%20News-%231-%23FF6600" alt="Hacker News"></a>
    <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
@@ -339,11 +339,11 @@ Please see our [contributing guide](/CONTRIBUTING.md).
 ### Good First Issues
 
 We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:issue+is:open+label:%22%F0%9F%99%8B%F0%9F%8F%BB%E2%80%8D%E2%99%82%EF%B8%8Fhelp+wanted%22) that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
-  
+
 <!-- BOUNTIES -->
 
 ### Bounties
-  
+
 <a href="https://console.algora.io/org/cal/bounties?status=open">
   <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
@@ -352,6 +352,15 @@ 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/README.md

@@ -1 +0,0 @@
-

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",
@@ -25,6 +25,6 @@
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.22.0"
+    "eslint": "^8.34.0"
   }
 }

apps/docs/pages/_app.tsx

@@ -1,4 +1,4 @@
-import { AppProps } from "next/app";
+import type { AppProps } from "next/app";
 import "nextra-theme-docs/style.css";
 
 import "./style.css";

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

@@ -15,12 +15,12 @@
     "@radix-ui/react-dialog": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^1.0.0",
     "@radix-ui/react-id": "^1.0.0",
-    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@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"
@@ -36,8 +36,8 @@
     "@storybook/manager-webpack5": "^6.5.13",
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "@vitejs/plugin-react": "^2.1.0",
     "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",

apps/storybook/styles/globals.css

@@ -2,4 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
-@import "../../../packages/ui/styles/shared-globals.css"
+@import "../../../packages/ui/styles/shared-globals.css";
+
+:root {
+  --font-inter: "Inter var";
+  --font-cal: "Cal Sans";
+}

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",
@@ -22,8 +22,8 @@
   },
   "devDependencies": {
     "@types/node": "16.9.1",
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.9",
     "typescript": "^4.9.4"
   }
 }

apps/swagger/pages/index.tsx

@@ -1,5 +1,5 @@
 import dynamic from "next/dynamic";
-import { SwaggerUI } from "swagger-ui-react";
+import type { SwaggerUI } from "swagger-ui-react";
 
 import { SnippedGenerator, requestSnippets } from "@lib/snippets";
 

apps/web/components/AdditionalCalendarSelector.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Select from "react-select";
-import { OptionProps } from "react-select";
+import type { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/AppListCard.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -62,8 +63,8 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`p-4 ${highlight ? "bg-yellow-100" : ""}`}>
-      <div className="flex  gap-x-3">
+    <div className={`${highlight ? "bg-yellow-100" : ""}`}>
+      <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/DestinationCalendarSelector.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { DestinationCalendar } from "@calcom/prisma/client";
+import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 
 interface Props {

apps/web/components/Embed.tsx

@@ -1,8 +1,11 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { NextRouter, useRouter } from "next/router";
-import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
-import { components, ControlProps } from "react-select";
+import type { NextRouter } from "next/router";
+import { useRouter } from "next/router";
+import type { MutableRefObject, RefObject } from "react";
+import { createRef, forwardRef, useRef, useState } from "react";
+import type { ControlProps } from "react-select";
+import { components } from "react-select";
 
 import { APP_NAME, EMBED_LIB_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -12,16 +15,15 @@ import {
   DialogClose,
   DialogContent,
   HorizontalTabs,
-  InputLeading,
   Label,
   showToast,
   Switch,
   TextArea,
   TextField,
+  ColorPicker,
 } from "@calcom/ui";
 import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
 
-import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
 
 type EmbedType = "inline" | "floating-popup" | "element-click";
@@ -676,7 +678,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
   };
   const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
-  const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
+  const embedCodeRefs: Record<(typeof tabs)[0]["name"], RefObject<HTMLTextAreaElement>> = {};
   tabs
     .filter((tab) => tab.type === "code")
     .forEach((codeTab) => {
@@ -720,7 +722,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 
   const calLink = decodeURIComponent(embedUrl);
 
-  const addToPalette = (update: typeof previewState["palette"]) => {
+  const addToPalette = (update: (typeof previewState)["palette"]) => {
     setPreviewState((previewState) => {
       return {
         ...previewState,
@@ -1061,7 +1063,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                             defaultValue="#000000"
                             onChange={(color) => {
                               addToPalette({
-                                [palette.name as keyof typeof previewState["palette"]]: color,
+                                [palette.name as keyof (typeof previewState)["palette"]]: color,
                               });
                             }}
                           />

apps/web/components/Gates.tsx

@@ -1,6 +1,7 @@
 import dynamic from "next/dynamic";
-import { Dispatch, useState, useEffect } from "react";
-import { JSONObject } from "superjson/dist/types";
+import type { Dispatch } from "react";
+import { useState, useEffect } from "react";
+import type { JSONObject } from "superjson/dist/types";
 
 export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`
 

apps/web/components/ImageUploader.tsx

@@ -1,10 +1,12 @@
-import { FormEvent, useCallback, useEffect, useState } from "react";
+import type { FormEvent } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui";
 
-import { Area, getCroppedImg } from "@lib/cropImage";
+import type { Area } from "@lib/cropImage";
+import { getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
 
 import Slider from "@components/Slider";

apps/web/components/NavTabs.tsx

@@ -1,13 +1,15 @@
 import { AdminRequired } from "components/ui/AdminRequired";
 import noop from "lodash/noop";
-import Link, { LinkProps } from "next/link";
+import type { LinkProps } from "next/link";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { FC, Fragment, MouseEventHandler } from "react";
+import type { FC, MouseEventHandler } from "react";
+import { Fragment } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
-import { SVGComponent } from "@lib/types/SVGComponent";
+import type { SVGComponent } from "@lib/types/SVGComponent";
 
 export interface NavTabProps {
   tabs: {

apps/web/components/SettingsShell.tsx

@@ -1,4 +1,5 @@
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
@@ -9,7 +10,7 @@ import NavTabs from "./NavTabs";
 const tabs = [
   {
     name: "profile",
-    href: "/settings/profile",
+    href: "/settings/my-account/profile",
     icon: FiUser,
   },
   {

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,4 +1,4 @@
-import { OptionProps } from "react-select";
+import type { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

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";
@@ -11,7 +11,7 @@ import classNames from "@calcom/lib/classNames";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { App as AppType } from "@calcom/types/App";
+import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
 import {
   FiBookOpen,
@@ -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}
@@ -303,6 +327,11 @@ const Component = ({
   );
 };
 
+const ShellHeading = () => {
+  const { t } = useLocale();
+  return <span className="block py-2">{t("app_store")}</span>;
+};
+
 export default function App(props: {
   name: string;
   description: AppType["description"];
@@ -327,11 +356,11 @@ export default function App(props: {
   isProOnly: AppType["isProOnly"];
   images?: string[];
   isTemplate?: boolean;
+  disableInstall?: boolean;
+  dependencies?: string[];
 }) {
-  const { t } = useLocale();
-
   return (
-    <Shell smallHeading isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

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/apps/DestinationCalendarSelector.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { DestinationCalendar } from "@calcom/prisma/client";
+import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 
 interface Props {

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -1,6 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

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

@@ -1,7 +1,8 @@
-import React, { ComponentProps } from "react";
+import type { ComponentProps } from "react";
+import React from "react";
 
 import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
-import { InstalledAppVariants } from "@calcom/app-store/utils";
+import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
@@ -44,7 +45,7 @@ export default function InstalledAppsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  const variant: typeof InstalledAppVariants[number] = "payment";
+  const variant: (typeof InstalledAppVariants)[number] = "payment";
 
   const query = trpc.viewer.integrations.useQuery({
     variant,

apps/web/components/auth/layouts/AdminLayout.tsx

@@ -1,13 +1,13 @@
+import { UserPermissionRole } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import React, { ComponentProps, useEffect } from "react";
+import type { ComponentProps } from "react";
+import React, { useEffect } from "react";
 
 import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
-import Shell from "@calcom/features/shell/Shell";
+import type Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
 
-import { UserPermissionRole } from ".prisma/client";
-
 export default function AdminLayout({
   children,
 

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,10 +1,12 @@
+import { z } from "zod";
+
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
 import { FiLink } from "@calcom/ui/components/icon";
 
-import { Props } from "./pages/AvailabilityPage";
+import type { Props } from "./pages/AvailabilityPage";
 
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   const { t } = 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="truncate">{t(locationKeyToString(location) ?? "")}</p>
+            <Tooltip content={translatedLocation}>
+              <p className="line-clamp-1">{translatedLocation}</p>
             </Tooltip>
           </div>
         );
       })}
     </div>
-  ) : (
-    <></>
-  );
+  ) : null;
 }

apps/web/components/booking/AvailableTimes.tsx

@@ -1,9 +1,13 @@
+import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState, useCallback } from "react";
 
-import dayjs, { Dayjs } from "@calcom/dayjs";
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
 import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
@@ -37,6 +41,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   seatsPerTimeSlot,
   ethSignature,
 }) => {
+  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
   const { t, i18n } = useLocale();
   const router = useRouter();
   const { rescheduleUid } = router.query;
@@ -46,123 +51,134 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   useEffect(() => {
     setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
   }, []);
-
-  if (!date) return null;
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const ref = useCallback(
+    (node: HTMLDivElement) => {
+      if (isMobile) {
+        node?.scrollIntoView({ behavior: "smooth" });
+      }
+    },
+    [isMobile]
+  );
 
   return (
-    <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="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">
-            , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
-          </span>
-        </div>
-        <div className="ml-auto">
-          <ToggleGroup
-            onValueChange={(timeFormat) => onTimeFormatChange(timeFormat === "24")}
-            defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"}
-            options={[
-              { value: "12", label: t("12_hour_short") },
-              { value: "24", label: t("24_hour_short") },
-            ]}
-          />
-        </div>
-      </div>
-      <div className="flex-grow overflow-y-auto sm:block md:h-[364px]">
-        {slots.length > 0 &&
-          slots.map((slot) => {
-            type BookingURL = {
-              pathname: string;
-              query: Record<string, string | number | string[] | undefined>;
-            };
-            const bookingUrl: BookingURL = {
-              pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
-              query: {
-                ...router.query,
-                date: dayjs.utc(slot.time).tz(timeZone()).format(),
-                type: eventTypeId,
-                slug: eventTypeSlug,
-                /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
-                count: recurringCount && !rescheduleUid ? recurringCount : undefined,
-                ...(ethSignature ? { ethSignature } : {}),
-              },
-            };
-
-            if (rescheduleUid) {
-              bookingUrl.query.rescheduleUid = rescheduleUid as string;
-            }
-
-            // If event already has an attendee add booking id
-            if (slot.bookingUid) {
-              bookingUrl.query.bookingUid = slot.bookingUid;
-            }
-
-            return (
-              <div data-slot-owner={(slot.userIds || []).join(",")} key={`${dayjs(slot.time).format()}`}>
-                {/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */}
-                {/* Current there is no way to disable Next.js Links */}
-                {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
-                  <div
-                    className={classNames(
-                      "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2  font-medium opacity-25 dark:border-transparent ",
-                      brand === "#fff" || brand === "#ffffff" ? "" : ""
-                    )}>
-                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                    {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
-                  </div>
-                ) : (
-                  <Link
-                    href={bookingUrl}
-                    prefetch={false}
-                    className={classNames(
-                      "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
-                      "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
-                      brand === "#fff" || brand === "#ffffff" ? "" : ""
-                    )}
-                    data-testid="time">
-                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                    {!!seatsPerTimeSlot && (
-                      <p
-                        className={`${
-                          slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
-                            ? "text-rose-600"
-                            : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
-                            ? "text-yellow-500"
-                            : "text-emerald-400"
-                        } text-sm`}>
-                        {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
-                        {seatsPerTimeSlot} {t("seats_available")}
-                      </p>
-                    )}
-                  </Link>
-                )}
-              </div>
-            );
-          })}
-
-        {!isLoading && !slots.length && (
-          <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
-            <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
+    <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="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">
+                , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
+              </span>
+            </div>
+            <div className="ml-auto">
+              <ToggleGroup
+                onValueChange={(timeFormat) => onTimeFormatChange(timeFormat === "24")}
+                defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"}
+                options={[
+                  { value: "12", label: t("12_hour_short") },
+                  { value: "24", label: t("24_hour_short") },
+                ]}
+              />
+            </div>
           </div>
-        )}
+          <div ref={ref} className="flex-grow overflow-y-auto sm:block md:h-[364px]">
+            {slots.length > 0 &&
+              slots.map((slot) => {
+                type BookingURL = {
+                  pathname: string;
+                  query: Record<string, string | number | string[] | undefined>;
+                };
+                const bookingUrl: BookingURL = {
+                  pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
+                  query: {
+                    ...router.query,
+                    date: dayjs.utc(slot.time).tz(timeZone()).format(),
+                    type: eventTypeId,
+                    slug: eventTypeSlug,
+                    /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
+                    count: recurringCount && !rescheduleUid ? recurringCount : undefined,
+                    ...(ethSignature ? { ethSignature } : {}),
+                  },
+                };
 
-        {isLoading && !slots.length && (
-          <>
-            <SkeletonContainer className="mb-2">
-              <SkeletonText className="h-5 w-full" />
-            </SkeletonContainer>
-            <SkeletonContainer className="mb-2">
-              <SkeletonText className="h-5 w-full" />
-            </SkeletonContainer>
-            <SkeletonContainer className="mb-2">
-              <SkeletonText className="h-5 w-full" />
-            </SkeletonContainer>
-          </>
-        )}
-      </div>
+                if (rescheduleUid) {
+                  bookingUrl.query.rescheduleUid = rescheduleUid as string;
+                }
+
+                // If event already has an attendee add booking id
+                if (slot.bookingUid) {
+                  bookingUrl.query.bookingUid = slot.bookingUid;
+                }
+
+                return (
+                  <div data-slot-owner={(slot.userIds || []).join(",")} key={`${dayjs(slot.time).format()}`}>
+                    {/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */}
+                    {/* Current there is no way to disable Next.js Links */}
+                    {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
+                      <div
+                        className={classNames(
+                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
+                          brand === "#fff" || brand === "#ffffff" ? "" : ""
+                        )}>
+                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                        {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
+                      </div>
+                    ) : (
+                      <Link
+                        href={bookingUrl}
+                        prefetch={false}
+                        className={classNames(
+                          "hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
+                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
+                          brand === "#fff" || brand === "#ffffff" ? "" : ""
+                        )}
+                        data-testid="time">
+                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                        {!!seatsPerTimeSlot && (
+                          <p
+                            className={`${
+                              slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
+                                ? "text-rose-600"
+                                : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
+                                ? "text-yellow-500"
+                                : "text-emerald-400"
+                            } text-sm`}>
+                            {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
+                            {seatsPerTimeSlot} {t("seats_available")}
+                          </p>
+                        )}
+                      </Link>
+                    )}
+                  </div>
+                );
+              })}
+
+            {!isLoading && !slots.length && (
+              <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
+                <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
+              </div>
+            )}
+
+            {isLoading && !slots.length && (
+              <>
+                <SkeletonContainer className="mb-2">
+                  <SkeletonText className="h-5 w-full" />
+                </SkeletonContainer>
+                <SkeletonContainer className="mb-2">
+                  <SkeletonText className="h-5 w-full" />
+                </SkeletonContainer>
+                <SkeletonContainer className="mb-2">
+                  <SkeletonText className="h-5 w-full" />
+                </SkeletonContainer>
+              </>
+            )}
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };

apps/web/components/booking/BookingDescription.tsx

@@ -1,11 +1,12 @@
 import { SchedulingType } from "@prisma/client";
-import { FC, ReactNode, useEffect } from "react";
+import type { FC, ReactNode } from "react";
+import { useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { classNames } from "@calcom/lib";
+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";
 
@@ -45,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]);
 
@@ -93,15 +96,7 @@ const BookingDescription: FC<Props> = (props) => {
               "flex",
               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="scroll-bar scrollbar-track-w-20 max-h-[200px] max-w-full flex-shrink overflow-scroll 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

@@ -2,14 +2,17 @@ import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
+import type { EventLocationType } from "@calcom/app-store/locations";
+import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { ActionType } from "@calcom/ui";
 import {
   Badge,
   Button,
@@ -20,7 +23,6 @@ import {
   MeetingTimeInTimezones,
   showToast,
   Tooltip,
-  ActionType,
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
@@ -221,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
@@ -353,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

@@ -0,0 +1,200 @@
+import type { EventType } from "@prisma/client";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import type { z } from "zod";
+
+import type { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
+import DatePicker from "@calcom/features/calendars/DatePicker";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
+import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { trpc } from "@calcom/trpc/react";
+
+import useRouterQuery from "@lib/hooks/useRouterQuery";
+
+const AvailableTimes = dynamic(() => import("@components/booking/AvailableTimes"));
+
+const getRefetchInterval = (refetchCount: number): number => {
+  const intervals = [3000, 3000, 5000, 10000, 20000, 30000] as const;
+  return intervals[refetchCount] || intervals[intervals.length - 1];
+};
+
+const useSlots = ({
+  eventTypeId,
+  eventTypeSlug,
+  startTime,
+  endTime,
+  usernameList,
+  timeZone,
+  duration,
+  enabled = true,
+}: {
+  eventTypeId: number;
+  eventTypeSlug: string;
+  startTime?: Dayjs;
+  endTime?: Dayjs;
+  usernameList: string[];
+  timeZone?: string;
+  duration?: string;
+  enabled?: boolean;
+}) => {
+  const [refetchCount, setRefetchCount] = useState(0);
+  const refetchInterval = getRefetchInterval(refetchCount);
+  const { data, isLoading, isPaused, fetchStatus } = trpc.viewer.public.slots.getSchedule.useQuery(
+    {
+      eventTypeId,
+      eventTypeSlug,
+      usernameList,
+      startTime: startTime?.toISOString() || "",
+      endTime: endTime?.toISOString() || "",
+      timeZone,
+      duration,
+    },
+    {
+      enabled: !!startTime && !!endTime && enabled,
+      refetchInterval,
+      trpc: { context: { skipBatch: true } },
+    }
+  );
+  useEffect(() => {
+    if (!!data && fetchStatus === "idle") {
+      setRefetchCount(refetchCount + 1);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchStatus, data]);
+
+  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
+  return { slots: data?.slots || {}, isLoading: isLoading || isPaused };
+};
+
+export const SlotPicker = ({
+  eventType,
+  timeFormat,
+  onTimeFormatChange,
+  timeZone,
+  recurringEventCount,
+  users,
+  seatsPerTimeSlot,
+  weekStart = 0,
+  ethSignature,
+}: {
+  eventType: Pick<
+    EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
+    "id" | "schedulingType" | "slug" | "length" | "metadata"
+  >;
+  timeFormat: TimeFormat;
+  onTimeFormatChange: (is24Hour: boolean) => void;
+  timeZone?: string;
+  seatsPerTimeSlot?: number;
+  recurringEventCount?: number;
+  users: string[];
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  ethSignature?: string;
+}) => {
+  const [selectedDate, setSelectedDate] = useState<Dayjs>();
+  const [browsingDate, setBrowsingDate] = useState<Dayjs>();
+  let { duration = eventType.length.toString() } = useRouterQuery("duration");
+  const { date, setQuery: setDate } = useRouterQuery("date");
+  const { month, setQuery: setMonth } = useRouterQuery("month");
+  const router = useRouter();
+
+  if (!eventType.metadata?.multipleDuration) {
+    duration = eventType.length.toString();
+  }
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    // Etc/GMT is not actually a timeZone, so handle this select option explicitly to prevent a hard crash.
+    if (timeZone === "Etc/GMT") {
+      setBrowsingDate(dayjs.utc(month).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0));
+      if (date) {
+        setSelectedDate(dayjs.utc(date));
+      }
+    } else {
+      // Set the start of the month without shifting time like startOf() may do.
+      setBrowsingDate(
+        dayjs.tz(month, timeZone).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0)
+      );
+      if (date) {
+        // It's important to set the date immediately to the timeZone, dayjs(date) will convert to browsertime.
+        setSelectedDate(dayjs.tz(date, timeZone));
+      }
+    }
+  }, [router.isReady, month, date, duration, timeZone]);
+
+  const { i18n, isLocaleReady } = useLocale();
+  const { slots: monthSlots, isLoading } = useSlots({
+    eventTypeId: eventType.id,
+    eventTypeSlug: eventType.slug,
+    usernameList: users,
+    startTime:
+      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
+        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
+        : browsingDate?.startOf("month"),
+    endTime: browsingDate?.endOf("month"),
+    timeZone,
+    duration,
+  });
+  const { slots: selectedDateSlots, isLoading: _isLoadingSelectedDateSlots } = useSlots({
+    eventTypeId: eventType.id,
+    eventTypeSlug: eventType.slug,
+    usernameList: users,
+    startTime: selectedDate?.startOf("day"),
+    endTime: selectedDate?.endOf("day"),
+    timeZone,
+    duration,
+    /** Prevent refetching is we already have this data from month slots */
+    enabled: !!selectedDate,
+  });
+
+  /** Hide skeleton if we have the slot loaded in the month query */
+  const isLoadingSelectedDateSlots = (() => {
+    if (!selectedDate) return _isLoadingSelectedDateSlots;
+    if (!!selectedDateSlots[selectedDate.format("YYYY-MM-DD")]) return false;
+    if (!!monthSlots[selectedDate.format("YYYY-MM-DD")]) return false;
+    return false;
+  })();
+
+  return (
+    <>
+      <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]",
+          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)}
+        locale={isLocaleReady ? i18n.language : "en"}
+        selected={selectedDate}
+        onChange={(newDate) => {
+          setDate(newDate.format("YYYY-MM-DD"));
+        }}
+        onMonthChange={(newMonth) => {
+          setMonth(newMonth.format("YYYY-MM"));
+        }}
+        browsingDate={browsingDate}
+        weekStart={weekStart}
+      />
+      <AvailableTimes
+        isLoading={isLoadingSelectedDateSlots}
+        slots={
+          selectedDate &&
+          (selectedDateSlots[selectedDate.format("YYYY-MM-DD")] ||
+            monthSlots[selectedDate.format("YYYY-MM-DD")])
+        }
+        date={selectedDate}
+        timeFormat={timeFormat}
+        onTimeFormatChange={onTimeFormatChange}
+        eventTypeId={eventType.id}
+        eventTypeSlug={eventType.slug}
+        seatsPerTimeSlot={seatsPerTimeSlot}
+        recurringCount={recurringEventCount}
+        ethSignature={ethSignature}
+      />
+    </>
+  );
+};

apps/web/components/booking/TimeOptions.tsx

@@ -1,7 +1,9 @@
-import { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import { useEffect, useState } from "react";
 
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { ITimezoneOption, TimezoneSelect } from "@calcom/ui";
+import type { ITimezoneOption } from "@calcom/ui";
+import { TimezoneSelect } from "@calcom/ui";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 

apps/web/components/booking/TimezoneDropdown.tsx

@@ -0,0 +1,26 @@
+import { FiGlobe } from "@calcom/ui/components/icon";
+
+import { timeZone as localStorageTimeZone } from "@lib/clock";
+
+import TimeOptions from "@components/booking/TimeOptions";
+
+export function TimezoneDropdown({
+  onChangeTimeZone,
+}: {
+  onChangeTimeZone: (newTimeZone: string) => void;
+  timeZone?: string;
+}) {
+  const handleSelectTimeZone = (newTimeZone: string) => {
+    onChangeTimeZone(newTimeZone);
+    localStorageTimeZone(newTimeZone);
+  };
+
+  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 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/UserAvatars.tsx

@@ -1,5 +1,6 @@
 import { CAL_URL } from "@calcom/lib/constants";
-import { AvatarGroup, AvatarGroupProps } from "@calcom/ui";
+import type { AvatarGroupProps } from "@calcom/ui";
+import { AvatarGroup } from "@calcom/ui";
 
 export const UserAvatars = ({
   profile,

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

@@ -1,14 +1,12 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventType } from "@prisma/client";
+import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useReducer, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
-import dayjs, { Dayjs } from "@calcom/dayjs";
+import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
   useEmbedStyles,
@@ -16,7 +14,6 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import DatePicker from "@calcom/features/calendars/DatePicker";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
@@ -26,218 +23,30 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc/react";
 import { HeadSeo } from "@calcom/ui";
-import { FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { FiCreditCard, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
-import useRouterQuery from "@lib/hooks/useRouterQuery";
 
-import Gates, { Gate, GateState } from "@components/Gates";
-import AvailableTimes from "@components/booking/AvailableTimes";
+import type { Gate, GateState } from "@components/Gates";
+import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
-import TimeOptions from "@components/booking/TimeOptions";
-import PoweredByCal from "@components/ui/PoweredByCal";
+import { SlotPicker } from "@components/booking/SlotPicker";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
-const useSlots = ({
-  eventTypeId,
-  eventTypeSlug,
-  startTime,
-  endTime,
-  usernameList,
-  timeZone,
-  duration,
-  enabled = true,
-}: {
-  eventTypeId: number;
-  eventTypeSlug: string;
-  startTime?: Dayjs;
-  endTime?: Dayjs;
-  usernameList: string[];
-  timeZone?: string;
-  duration?: string;
-  enabled?: boolean;
-}) => {
-  const { data, isLoading, isPaused } = trpc.viewer.public.slots.getSchedule.useQuery(
-    {
-      eventTypeId,
-      eventTypeSlug,
-      usernameList,
-      startTime: startTime?.toISOString() || "",
-      endTime: endTime?.toISOString() || "",
-      timeZone,
-      duration,
-    },
-    {
-      enabled: !!startTime && !!endTime && enabled,
-      refetchInterval: 3000,
-      trpc: { context: { skipBatch: true } },
-    }
-  );
+const PoweredByCal = dynamic(() => import("@components/ui/PoweredByCal"));
 
-  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
-  return { slots: data?.slots || {}, isLoading: isLoading || isPaused };
-};
-
-const SlotPicker = ({
-  eventType,
-  timeFormat,
-  onTimeFormatChange,
-  timeZone,
-  recurringEventCount,
-  users,
-  seatsPerTimeSlot,
-  weekStart = 0,
-  ethSignature,
-}: {
-  eventType: Pick<
-    EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
-    "id" | "schedulingType" | "slug" | "length" | "metadata"
-  >;
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  timeZone?: string;
-  seatsPerTimeSlot?: number;
-  recurringEventCount?: number;
-  users: string[];
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  ethSignature?: string;
-}) => {
-  const [selectedDate, setSelectedDate] = useState<Dayjs>();
-  const [browsingDate, setBrowsingDate] = useState<Dayjs>();
-  let { duration = eventType.length.toString() } = useRouterQuery("duration");
-  const { date, setQuery: setDate } = useRouterQuery("date");
-  const { month, setQuery: setMonth } = useRouterQuery("month");
-  const router = useRouter();
-
-  if (!eventType.metadata?.multipleDuration) {
-    duration = eventType.length.toString();
-  }
-
-  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    // Etc/GMT is not actually a timeZone, so handle this select option explicitly to prevent a hard crash.
-    if (timeZone === "Etc/GMT") {
-      setBrowsingDate(dayjs.utc(month).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0));
-      if (date) {
-        setSelectedDate(dayjs.utc(date));
-      }
-    } else {
-      // Set the start of the month without shifting time like startOf() may do.
-      setBrowsingDate(
-        dayjs.tz(month, timeZone).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0)
-      );
-      if (date) {
-        // It's important to set the date immediately to the timeZone, dayjs(date) will convert to browsertime.
-        setSelectedDate(dayjs.tz(date, timeZone));
-      }
-    }
-  }, [router.isReady, month, date, duration, timeZone]);
-
-  const { i18n, isLocaleReady } = useLocale();
-  const { slots: monthSlots, isLoading } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime:
-      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
-        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
-        : browsingDate?.startOf("month"),
-    endTime: browsingDate?.endOf("month"),
-    timeZone,
-    duration,
-  });
-  const { slots: selectedDateSlots, isLoading: _isLoadingSelectedDateSlots } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime: selectedDate?.startOf("day"),
-    endTime: selectedDate?.endOf("day"),
-    timeZone,
-    duration,
-    /** Prevent refetching is we already have this data from month slots */
-    enabled: !!selectedDate,
-  });
-
-  /** Hide skeleton if we have the slot loaded in the month query */
-  const isLoadingSelectedDateSlots = (() => {
-    if (!selectedDate) return _isLoadingSelectedDateSlots;
-    if (!!selectedDateSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    if (!!monthSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    return false;
-  })();
-
-  return (
-    <>
-      <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]",
-          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)}
-        locale={isLocaleReady ? i18n.language : "en"}
-        selected={selectedDate}
-        onChange={(newDate) => {
-          setDate(newDate.format("YYYY-MM-DD"));
-        }}
-        onMonthChange={(newMonth) => {
-          setMonth(newMonth.format("YYYY-MM"));
-        }}
-        browsingDate={browsingDate}
-        weekStart={weekStart}
-      />
-
-      <div ref={slotPickerRef}>
-        <AvailableTimes
-          isLoading={isLoadingSelectedDateSlots}
-          slots={
-            selectedDate &&
-            (selectedDateSlots[selectedDate.format("YYYY-MM-DD")] ||
-              monthSlots[selectedDate.format("YYYY-MM-DD")])
-          }
-          date={selectedDate}
-          timeFormat={timeFormat}
-          onTimeFormatChange={onTimeFormatChange}
-          eventTypeId={eventType.id}
-          eventTypeSlug={eventType.slug}
-          seatsPerTimeSlot={seatsPerTimeSlot}
-          recurringCount={recurringEventCount}
-          ethSignature={ethSignature}
-        />
-      </div>
-    </>
-  );
-};
-
-function TimezoneDropdown({
-  onChangeTimeZone,
-}: {
-  onChangeTimeZone: (newTimeZone: string) => void;
-  timeZone?: string;
-}) {
-  const handleSelectTimeZone = (newTimeZone: string) => {
-    onChangeTimeZone(newTimeZone);
-    localStorageTimeZone(newTimeZone);
-  };
-
-  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">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-      </div>
-    </>
-  );
-}
+const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
+/*const SlotPicker = dynamic(() => import("../SlotPicker").then((mod) => mod.SlotPicker), {
+  ssr: false,
+  loading: () => <div className="mt-8 px-4 pb-4 sm:mt-0 sm:p-4 md:min-w-[300px] md:px-5 lg:min-w-[455px]" />,
+});*/
+const TimezoneDropdown = dynamic(() => import("../TimezoneDropdown").then((mod) => mod.TimezoneDropdown), {
+  ssr: false,
+});
 
 const dateQuerySchema = z.object({
   rescheduleUid: z.string().optional().default(""),

apps/web/components/dialog/EditLocationDialog.tsx

@@ -4,26 +4,27 @@ 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";
 import {
-  EventLocationType,
   getEventLocationType,
   getHumanReadableLocationValue,
   getMessageForOrganizer,
-  LocationObject,
   LocationType,
 } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
 import { FiMapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
-import LocationSelect, { LocationOption } from "@components/ui/form/LocationSelect";
+import type { LocationOption } from "@components/ui/form/LocationSelect";
+import LocationSelect from "@components/ui/form/LocationSelect";
 
 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];
 
@@ -48,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} />;
+        }}
       />
     );
   }
@@ -187,6 +191,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 control={locationFormMethods.control}
                 render={() => (
                   <CheckboxField
+                    data-testid="display-location"
                     defaultChecked={defaultLocation?.displayLocationPublicly}
                     description={t("display_location_label")}
                     onChange={(e) =>
@@ -283,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
@@ -344,7 +346,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                     {t("cancel")}
                   </Button>
 
-                  <Button type="submit">{t("update")}</Button>
+                  <Button data-testid="update-location" type="submit">
+                    {t("update")}
+                  </Button>
                 </div>
               </DialogFooter>
             </Form>

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,5 @@
-import { Dispatch, SetStateAction, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -1,6 +1,7 @@
-import { FormValues } from "pages/event-types/[type]";
+import type { FormValues } from "pages/event-types/[type]";
 import { Controller, useFormContext } from "react-hook-form";
-import { components, OptionProps, SingleValueProps } from "react-select";
+import type { OptionProps, SingleValueProps } from "react-select";
+import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
@@ -112,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">
@@ -155,14 +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}`}
-          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,213 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventTypeCustomInputType } from "@prisma/client";
-import type { CustomInputParsed } from "pages/event-types/[type]";
-import { FC } from "react";
-import { Control, Controller, useFieldArray, useForm, UseFormRegister, 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,68 +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 changePreviewText = (eventNameObject: EventNameObjectType, previewEventName: string) => {
-    setPreviewText(
-      previewEventName
-        .replace("{Event type title}", eventNameObject.eventType)
-        .replace("{Scheduler}", eventNameObject.attendeeName)
-        .replace("{Organiser}", eventNameObject.host)
-    );
-  };
-
   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 = 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">
       {/**
@@ -141,16 +125,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <TextField
           label={t("event_name_in_calendar")}
           type="text"
-          placeholder={t("meeting_with_user")}
+          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"
@@ -159,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}
@@ -213,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"
@@ -244,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}
@@ -360,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);
             }}>
@@ -404,129 +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">
-            <TextField
-              label={t("event_name_in_calendar")}
-              type="text"
-              placeholder={t("meeting_with_user")}
-              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/EventAppsTab.tsx

@@ -1,10 +1,10 @@
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
-import { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
+import type { GetAppData, SetAppData } from "@calcom/app-store/EventTypeAppContext";
 import { EventTypeAppCard } from "@calcom/app-store/_components/EventTypeAppCardInterface";
-import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
-import { EventTypeAppsList } from "@calcom/app-store/utils";
+import type { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
+import type { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen } from "@calcom/ui";

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,14 +1,16 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import React, { useEffect, useState } from "react";
-import { Controller, useFormContext, UseFormRegisterReturn, useWatch } from "react-hook-form";
+import type { UseFormRegisterReturn } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
-import convertToNewDurationType, { DurationType } from "@calcom/lib/convertToNewDurationType";
+import type { DurationType } from "@calcom/lib/convertToNewDurationType";
+import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { PeriodType } from "@calcom/prisma/client";
+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 { FiPlus, FiTrash } from "@calcom/ui/components/icon";

apps/web/components/eventtype/EventRecurringTab.tsx

@@ -1,4 +1,4 @@
-import { EventTypeSetupProps } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 

apps/web/components/eventtype/EventSetupTab.tsx

@@ -6,26 +6,22 @@ import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
-import { MultiValue } from "react-select";
+import type { MultiValue } from "react-select";
 import { z } from "zod";
 
-import {
-  EventLocationType,
-  getEventLocationType,
-  MeetLocationType,
-  LocationType,
-} from "@calcom/app-store/locations";
+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";
-import LocationSelect, {
-  SingleValueLocationOption,
-  LocationOption,
-} from "@components/ui/form/LocationSelect";
+import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
+import LocationSelect from "@components/ui/form/LocationSelect";
 
 const getLocationFromType = (
   type: EventLocationType["type"],
@@ -50,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);
@@ -81,7 +80,7 @@ export const EventSetupTab = (
     setShowLocationModal(true);
   };
 
-  const removeLocation = (selectedLocation: typeof eventType.locations[number]) => {
+  const removeLocation = (selectedLocation: (typeof eventType.locations)[number]) => {
     formMethods.setValue(
       "locations",
       formMethods.getValues("locations").filter((location) => {
@@ -158,14 +157,11 @@ export const EventSetupTab = (
       return true;
     });
 
-    const defaultValue = getDefaultLocationValue(locationOptions, "integrations:daily");
-
     return (
       <div className="w-full">
         {validLocations.length === 0 && (
           <div className="flex">
             <LocationSelect
-              defaultValue={defaultValue}
               placeholder={t("select")}
               options={locationOptions}
               isSearchable={false}
@@ -196,24 +192,22 @@ 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"
-                  ? location[eventLocationType.defaultValueVariable]
-                  : t(location[eventLocationType.defaultValueVariable] || eventLocationType.label);
+                location[eventLocationType.defaultValueVariable] || t(eventLocationType.label);
 
               return (
                 <li
                   key={`${location.type}${index}`}
                   className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
-                  <div className="flex max-w-full justify-between">
-                    <div key={index} className="flex flex-grow items-center">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
                         className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="truncate text-sm ltr:ml-1 rtl:mr-1">{eventLabel}</span>
+                      <span className="line-clamp-1 text-sm ltr:ml-1 rtl:mr-1">{eventLabel}</span>
                     </div>
                     <div className="flex">
                       <button
@@ -238,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">
@@ -250,14 +247,17 @@ export const EventSetupTab = (
                       className="underline">
                       here.
                     </Link>{" "}
-                    We will fall back to Cal video if you do not change it.
                   </p>
                 </Trans>
               </div>
             )}
-            {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
+            {validLocations.length > 0 && (
               <li>
-                <Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
+                <Button
+                  data-testid="add-location"
+                  StartIcon={FiPlus}
+                  color="minimal"
+                  onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
                 </Button>
               </li>
@@ -277,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,12 +1,12 @@
-import { SchedulingType } from "@prisma/client";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { ComponentProps } from "react";
-import { Controller, useFormContext, useWatch, Control } from "react-hook-form";
-import { Options } from "react-select";
+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 { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { Options } from "react-select";
 
-import CheckedTeamSelect, {
-  CheckedSelectOption,
-} from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import type { CheckedSelectOption } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, Select } from "@calcom/ui";
@@ -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/EventTeamWebhooksTab.tsx

@@ -1,13 +1,13 @@
-import { EventTypeSetupProps } from "pages/event-types/[type]";
+import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
 import { TbWebhook } from "react-icons/tb";
 
 import { WebhookForm } from "@calcom/features/webhooks/components";
-import { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
+import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
 import WebhookListItem from "@calcom/features/webhooks/components/WebhookListItem";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Webhook } from "@calcom/prisma/client";
+import type { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,8 +1,8 @@
-import { TFunction } from "next-i18next";
+import type { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
-import { UseFormReturn } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
 import { TbWebhook } from "react-icons/tb";
 
 import Shell from "@calcom/features/shell/Shell";
@@ -197,7 +197,7 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
+          <div className="hidden items-center rounded-md px-2 sm:hover:bg-gray-100 lg:flex">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -206,7 +206,7 @@ function EventTypeSingleLayout({
             </Skeleton>
             <Switch
               id="hiddenSwitch"
-              defaultChecked={formMethods.getValues("hidden")}
+              checked={formMethods.watch("hidden")}
               onCheckedChange={(e) => {
                 formMethods.setValue("hidden", e);
               }}
@@ -220,6 +220,7 @@ function EventTypeSingleLayout({
             <Tooltip content={t("preview")}>
               <Button
                 color="secondary"
+                data-testid="preview-button"
                 target="_blank"
                 variant="icon"
                 href={permalink}
@@ -261,7 +262,7 @@ function EventTypeSingleLayout({
             <DropdownMenuTrigger asChild>
               <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent style={{ minWidth: "200px" }}>
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   target="_blank"
@@ -293,17 +294,17 @@ function EventTypeSingleLayout({
                   {t("delete")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuSeparator className="block sm:hidden" />
-              <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
+              <DropdownMenuSeparator />
+              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 sm:hover:bg-gray-100">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
-                  className="mt-2 inline cursor-pointer self-center pr-2 sm:hidden">
+                  className="mt-2 inline cursor-pointer self-center pr-2 ">
                   {t("hide_from_profile")}
                 </Skeleton>
                 <Switch
                   id="hiddenSwitch"
-                  defaultChecked={formMethods.getValues("hidden")}
+                  checked={formMethods.watch("hidden")}
                   onCheckedChange={(e) => {
                     formMethods.setValue("hidden", e);
                   }}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -1,14 +1,15 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
-import { UnitTypeLongPlural } from "dayjs";
+import type { UnitTypeLongPlural } from "dayjs";
 import { Trans } from "next-i18next";
 import type { FormValues } from "pages/event-types/[type]";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
-import z from "zod";
+import type z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
+import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import { Input, Label, SettingsToggle } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {
   metadata: z.infer<typeof EventTypeMetaDataSchema>;
@@ -38,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/components/CreateEventsOnCalendarSelect.tsx

@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterInputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 

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

@@ -5,8 +5,9 @@ import { useForm } from "react-hook-form";
 import { Schedule } from "@calcom/features/schedules";
 import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { TRPCClientErrorLike } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Form } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {

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

@@ -1,10 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/solid";
-import MarkdownIt from "markdown-it";
 import { useRouter } from "next/router";
-import { FormEvent, useRef, useState } from "react";
+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";
@@ -13,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/integrations/SubHeadingTitleWithConnections.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { Badge } from "@calcom/ui";
 

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,4 +1,5 @@
-import { SyntheticEvent, useState } from "react";
+import type { SyntheticEvent } from "react";
+import { useState } from "react";
 
 import { ErrorCode } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useState } from "react";
+import type { BaseSyntheticEvent } from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";

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/EnableTwoFactorModal.tsx

@@ -1,4 +1,5 @@
-import React, { BaseSyntheticEvent, useState } from "react";
+import type { BaseSyntheticEvent } from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/lib/auth";

apps/web/components/setup/EnterpriseLicense.tsx

@@ -7,7 +7,8 @@ import * as z from "zod";
 import { classNames } from "@calcom/lib";
 import { CONSOLE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterInputs, RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import { Button, TextField } from "@calcom/ui";
 import { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
 

apps/web/components/setup/StepDone.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { FiCheck } from "@calcom/ui/components/icon";

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

@@ -1,13 +1,11 @@
-import MarkdownIt from "markdown-it";
 import Link from "next/link";
-import { TeamPageProps } from "pages/team/[slug]";
+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/AdminRequired.tsx

@@ -1,5 +1,6 @@
 import { useSession } from "next-auth/react";
-import { FC, Fragment } from "react";
+import type { FC } from "react";
+import { Fragment } from "react";
 
 type AdminRequiredProps = {
   as?: keyof JSX.IntrinsicElements;

apps/web/components/ui/EditableHeading.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { useState } from "react";
-import { ControllerRenderProps } from "react-hook-form";
+import type { ControllerRenderProps } from "react-hook-form";
 
 import { FiEdit2 } from "@calcom/ui/components/icon";
 

apps/web/components/ui/LinkIconButton.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SVGComponent } from "@lib/types/SVGComponent";
+import type { SVGComponent } from "@lib/types/SVGComponent";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   Icon: SVGComponent;

apps/web/components/ui/ModalContainer.tsx

@@ -1,5 +1,6 @@
 import classNames from "classnames";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 
 import { Dialog, DialogContent } from "@calcom/ui";
 

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

@@ -1,18 +1,21 @@
+import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
-import { RefCallback, useEffect, useMemo, useState } from "react";
+import type { RefCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { User } from "@calcom/prisma/client";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
+import type { User } from "@calcom/prisma/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
+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/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -1,12 +1,13 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
-import { RefCallback, useEffect, useMemo, useState } from "react";
+import type { RefCallback } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
 import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
 

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

@@ -1,9 +1,11 @@
+import { useRouter } from "next/router";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
-import { User } from "@calcom/prisma/client";
-import { TRPCClientErrorLike } from "@calcom/trpc/client";
-import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import type { User } from "@calcom/prisma/client";
+import type { TRPCClientErrorLike } from "@calcom/trpc/client";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -22,7 +24,13 @@ export const UsernameAvailabilityField = ({
   onErrorMutation,
   user,
 }: UsernameAvailabilityFieldProps) => {
-  const { username: currentUsername, setQuery: setCurrentUsername } = useRouterQuery("username");
+  const router = useRouter();
+  const [currentUsernameState, setCurrentUsernameState] = useState(user.username || "");
+  const { username: usernameFromQuery, setQuery: setUsernameFromQuery } = useRouterQuery("username");
+  const { username: currentUsername, setQuery: setCurrentUsername } =
+    router.query["username"] && user.username === null
+      ? { username: usernameFromQuery, setQuery: setUsernameFromQuery }
+      : { username: currentUsernameState || "", setQuery: setCurrentUsernameState };
   const formMethods = useForm({
     defaultValues: {
       username: currentUsername,

apps/web/components/ui/colorpicker.tsx

@@ -1,102 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import { useEffect } from "react";
-import { HexColorInput, HexColorPicker } from "react-colorful";
-
-import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
-import { Swatch } from "@calcom/ui";
-
-type Handler = (event: MouseEvent | Event) => void;
-function useEventListener<
-  KW extends keyof WindowEventMap,
-  KH extends keyof HTMLElementEventMap,
-  T extends HTMLElement | void = void
->(
-  eventName: KW | KH,
-  handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | Event) => void,
-  element?: React.RefObject<T>
-) {
-  // Create a ref that stores handler
-  const savedHandler = useRef<typeof handler>();
-  useEffect(() => {
-    // Define the listening target
-    const targetElement: T | Window = element?.current || window;
-    if (!(targetElement && targetElement.addEventListener)) {
-      return;
-    }
-    // Update saved handler if necessary
-    if (savedHandler.current !== handler) {
-      savedHandler.current = handler;
-    }
-    // Create event listener that calls handler function stored in ref
-    const eventListener: typeof handler = (event) => {
-      // eslint-disable-next-line no-extra-boolean-cast
-      if (!!savedHandler?.current) {
-        savedHandler.current(event);
-      }
-    };
-    targetElement.addEventListener(eventName, eventListener);
-    // Remove event listener on cleanup
-    return () => {
-      targetElement.removeEventListener(eventName, eventListener);
-    };
-  }, [eventName, element, handler]);
-}
-
-function useOnClickOutside<T extends HTMLElement = HTMLElement>(
-  ref: React.RefObject<T>,
-  handler: Handler,
-  mouseEvent: "mousedown" | "mouseup" = "mousedown"
-): void {
-  useEventListener(mouseEvent, (event) => {
-    const el = ref?.current;
-    // Do nothing if clicking ref's element or descendent elements
-    if (!el || el.contains(event.target as Node)) {
-      return;
-    }
-    handler(event);
-  });
-}
-export type ColorPickerProps = {
-  defaultValue: string;
-  onChange: (text: string) => void;
-};
-
-const ColorPicker = (props: ColorPickerProps) => {
-  const init = !isValidHexCode(props.defaultValue)
-    ? fallBackHex(props.defaultValue, false)
-    : props.defaultValue;
-  const [color, setColor] = useState(init);
-  const [isOpen, toggle] = useState(false);
-  const popover = useRef() as React.MutableRefObject<HTMLInputElement>;
-  const close = useCallback(() => toggle(false), []);
-  useOnClickOutside(popover, close);
-  return (
-    <div className="relative mt-1 flex items-center justify-center">
-      <Swatch size="sm" backgroundColor={color} onClick={() => toggle(!isOpen)} />
-
-      {isOpen && (
-        <div className="popover" ref={popover}>
-          <HexColorPicker
-            className="!absolute !top-10 !left-0 !z-10 !h-32 !w-32"
-            color={color}
-            onChange={(val) => {
-              setColor(val);
-              props.onChange(val);
-            }}
-          />
-        </div>
-      )}
-      <HexColorInput
-        className="ml-1 block w-full rounded-r-md border border-gray-300 px-3 py-2 sm:text-sm"
-        color={color}
-        onChange={(val) => {
-          setColor(val);
-          props.onChange(val);
-        }}
-        type="text"
-      />
-    </div>
-  );
-};
-
-export default ColorPicker;

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

@@ -1,4 +1,5 @@
-import React, { forwardRef, InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes } from "react";
+import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Props } from "react-select";
+import type { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";