2.6.4

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

.github/CODEOWNERS

@@ -0,0 +1,32 @@
+# 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
+packages/dayjs                        @zomars
+packages/emails                       @zomars
+packages/embeds                       @hariombalhara
+packages/eslint-plugin                @zomars
+packages/features                     @zomars
+packages/features/kbar                @alishaz-polymath 
+packages/features/ee/impersonation    @sean-brydon
+packages/features/ee/payments         @alannnc
+packages/features/ee/workflows        @CarinaWolli
+packages/features/tips                @PeerRich
+packages/ui                           @calcom/ui
+packages/config                       @calcom/core

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

@@ -0,0 +1,23 @@
+name: Cache production build binaries
+description: "Cache or restore if necessary"
+env:
+  node_version: v16.x
+runs:
+  using: "composite"
+  steps:
+    - name: Cache production build
+      uses: actions/cache@v3
+      env:
+        cache-name: prod-build
+        key-1: ${{ env.node_version }}-${{ hashFiles('yarn.lock') }}
+        key-2: ${{ hashFiles('apps/web/next.config.js') }}
+      with:
+        path: |
+          apps/web/.next
+          node_modules/.cache/turbo
+          **/.turbo/**
+          **/dist/**
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ github.sha }}
+        restore-keys: |
+          ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-
+          ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-

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

@@ -0,0 +1,34 @@
+name: Cache database between jobs
+description: "Cache or restore if necessary"
+inputs:
+  DATABASE_URL:
+    required: true
+  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
+      with:
+        path: ${{ inputs.path }}
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ github.sha }}
+        restore-keys: |
+          ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-
+    - 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/yarn-build/action.yml

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

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

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

.github/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/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,29 +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 }}
+    runs-on: ubuntu-latest
 
     env:
       DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
@@ -65,32 +48,15 @@ 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
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/cache-db
         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
+          DATABASE_URL: ${{ env.DATABASE_URL }}
+      - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn test-e2e:app-store
 

.github/workflows/e2e-embed.yml

@@ -1,21 +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
@@ -61,35 +51,17 @@ 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
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/cache-db
         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
+          DATABASE_URL: ${{ env.DATABASE_URL }}
+      - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
-
       - name: Upload embed-core results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2

.github/workflows/e2e.yml

@@ -1,20 +1,10 @@
 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
@@ -64,34 +54,16 @@ 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
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/cache-db
         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
+          DATABASE_URL: ${{ env.DATABASE_URL }}
+      - uses: ./.github/actions/cache-build
       - run: yarn test-e2e
-
       - name: Upload test results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2

.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
 
     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,28 @@
 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
+    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
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
-      - 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: ./.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
@@ -116,12 +53,15 @@ jobs:
       # entry in your package.json file.
       - name: Compare with base branch bundle
         if: success() && github.event.number
-        run: ls -laR .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: |
+          cd apps/web
           body=$(cat .next/analyze/__bundle_analysis_comment.txt)
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"

.github/workflows/pr.yml

@@ -0,0 +1,87 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+  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/**'
+
+  setup:
+    name: Yarn install & cache
+    uses: ./.github/workflows/yarn-install.yml
+    secrets: inherit
+
+  type-check:
+    name: Type check
+    needs: setup
+    uses: ./.github/workflows/check-types.yml
+    secrets: inherit
+
+  test:
+    name: Unit tests
+    needs: setup
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Linters
+    needs: setup
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Production build
+    needs: setup
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+
+  e2e:
+    name: E2E tests
+    needs: [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.yml
+    secrets: inherit
+
+  analyze:
+    needs: build
+    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+    secrets: inherit

.github/workflows/production-build.yml

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

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

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

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,18 +339,18 @@ 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">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
 </a>  
-  
+
 
 <!-- TRANSLATIONS -->
 

apps/docs/README.md

@@ -1 +0,0 @@
-

apps/docs/package.json

@@ -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/package.json

@@ -15,7 +15,7 @@
     "@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",
@@ -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

@@ -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 p-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";
@@ -17,10 +20,10 @@ import {
   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";
@@ -675,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) => {
@@ -719,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,
@@ -1060,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";

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

@@ -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,

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/booking/AvailableEventLocations.tsx

@@ -4,7 +4,7 @@ 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();
@@ -32,7 +32,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
               />
             )}
             <Tooltip content={t(locationKeyToString(location) ?? "")}>
-              <p className="truncate">{t(locationKeyToString(location) ?? "")}</p>
+              <p className="line-clamp-1">{t(locationKeyToString(location) ?? "")}</p>
             </Tooltip>
           </div>
         );

apps/web/components/booking/AvailableTimes.tsx

@@ -1,8 +1,11 @@
+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 } 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 { TimeFormat } from "@calcom/lib/timeFormat";
 import { nameOfDay } from "@calcom/lib/weekday";
@@ -37,6 +40,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   seatsPerTimeSlot,
   ethSignature,
 }) => {
+  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
   const { t, i18n } = useLocale();
   const router = useRouter();
   const { rescheduleUid } = router.query;
@@ -47,122 +51,124 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
     setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
   }, []);
 
-  if (!date) return null;
-
   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 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,8 +1,9 @@
 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";

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";

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 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>
+    </>
+  );
+}

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/booking/pages/BookingPage.tsx

@@ -12,8 +12,8 @@ import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
+import type { EventLocationType } from "@calcom/app-store/locations";
 import {
-  EventLocationType,
   getEventLocationType,
   getEventLocationValue,
   getHumanReadableLocationValue,
@@ -21,7 +21,8 @@ import {
 } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
-import { LocationObject, LocationType } from "@calcom/core/location";
+import type { LocationObject } from "@calcom/core/location";
+import { LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
@@ -69,12 +70,13 @@ import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 
-import Gates, { Gate, GateState } from "@components/Gates";
+import type { Gate, GateState } from "@components/Gates";
+import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
 
-import { BookPageProps } from "../../../pages/[user]/book";
-import { HashLinkPageProps } from "../../../pages/d/[link]/book";
-import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
+import type { BookPageProps } from "../../../pages/[user]/book";
+import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
+import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
 type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
 

apps/web/components/dialog/EditLocationDialog.tsx

@@ -7,23 +7,24 @@ import { useEffect } from "react";
 import { Controller, useForm, useWatch } 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];
 
@@ -187,6 +188,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) =>
@@ -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";
@@ -157,6 +158,7 @@ const EventTypeScheduleDetails = () => {
         </span>
         <Button
           href={`/availability/${schedule?.schedule.id}`}
+          disabled={isLoading}
           color="minimal"
           EndIcon={FiExternalLink}
           target="_blank"

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,8 +1,9 @@
 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 type { FC } from "react";
+import type { Control, UseFormRegister } from "react-hook-form";
+import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Label, Select, TextField } from "@calcom/ui";

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -408,7 +408,8 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <DialogContent
             title={t("custom_event_name")}
             description={t("custom_event_name_description")}
-            type="creation">
+            type="creation"
+            enableOverflow>
             <TextField
               label={t("event_name_in_calendar")}
               type="text"

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,15 +6,11 @@ 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 { slugify } from "@calcom/lib/slugify";
@@ -22,10 +18,8 @@ import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@cal
 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"],
@@ -81,7 +75,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 +152,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}
@@ -206,14 +197,14 @@ export const EventSetupTab = (
                 <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
@@ -257,7 +248,11 @@ export const EventSetupTab = (
             )}
             {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
               <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>

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 { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { ComponentProps } from "react";
+import type { Control } from "react-hook-form";
+import { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { Options } from "react-select";
 
-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";

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";

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -1,13 +1,14 @@
 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 type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {

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,7 +1,8 @@
 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";

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/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,6 +1,6 @@
 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";

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,15 +1,17 @@
 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";

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";

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

@@ -1,4 +1,5 @@
-import { components, GroupBase, Props, SingleValue } from "react-select";
+import type { GroupBase, Props, SingleValue } from "react-select";
+import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
@@ -39,6 +40,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
   return (
     <Select<LocationOption>
       name="location"
+      id="location-select"
       components={{
         Option: (props) => (
           <components.Option {...props}>

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

@@ -1,5 +1,6 @@
 import classNames from "classnames";
-import React, { forwardRef, InputHTMLAttributes, ReactNode } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
+import React, { forwardRef } from "react";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: ReactNode;

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
-import ReactSelect, { components, GroupBase, Props, InputProps, SingleValue, MultiValue } from "react-select";
+import type { GroupBase, Props, InputProps, SingleValue, MultiValue } from "react-select";
+import ReactSelect, { components } from "react-select";
 
 import classNames from "@calcom/lib/classNames";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -28,7 +29,8 @@ function Select<
   IsMulti extends boolean = false,
   Group extends GroupBase<Option> = GroupBase<Option>
 >({ className, ...props }: SelectProps<Option, IsMulti, Group>) {
-  const { resolvedTheme, forcedTheme, isReady } = useTheme();
+  const [mounted, setMounted] = useState<boolean>(false);
+  const { resolvedTheme, forcedTheme } = useTheme();
   const hasDarkTheme = !forcedTheme && resolvedTheme === "dark";
   const darkThemeColors = {
     /** Dark Theme starts */
@@ -72,10 +74,15 @@ function Select<
     /** Dark Theme ends */
   };
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   // Till we know in JS the theme is ready, we can't render react-select as it would render with light theme instead
-  if (!isReady) {
+  if (!mounted) {
     return <input type="text" className={className} />;
   }
+
   return (
     <ReactSelect
       theme={(theme) => ({

apps/web/lib/QueryCell.tsx

@@ -1,11 +1,11 @@
-import {
+import type {
   QueryObserverLoadingErrorResult,
   QueryObserverLoadingResult,
   QueryObserverRefetchErrorResult,
   QueryObserverSuccessResult,
   UseQueryResult,
 } from "@tanstack/react-query";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";

apps/web/lib/app-providers.tsx

@@ -1,11 +1,12 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { SessionProvider } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
-import { appWithTranslation, SSRConfig } from "next-i18next";
+import type { SSRConfig } from "next-i18next";
+import { appWithTranslation } from "next-i18next";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps, AppProps as NextJsAppProps } from "next/app";
-import { NextRouter } from "next/router";
-import { ComponentProps, ReactNode } from "react";
+import type { NextRouter } from "next/router";
+import type { ComponentProps, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
@@ -13,7 +14,7 @@ import { trpc } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui";
 
 import usePublicPage from "@lib/hooks/usePublicPage";
-import { WithNonceProps } from "@lib/withNonce";
+import type { WithNonceProps } from "@lib/withNonce";
 
 const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children: React.ReactNode }>(
   ({ children }) => <>{children}</>

apps/web/lib/auth.ts

@@ -1,7 +1,8 @@
 import { IdentityProvider } from "@prisma/client";
 import { compare, hash } from "bcryptjs";
-import { Session } from "next-auth";
-import { getSession as getSessionInner, GetSessionParams } from "next-auth/react";
+import type { Session } from "next-auth";
+import type { GetSessionParams } from "next-auth/react";
+import { getSession as getSessionInner } from "next-auth/react";
 
 /** @deprecated use the one from `@calcom/lib/auth` */
 export async function hashPassword(password: string) {

apps/web/lib/auth/next-auth-custom-adapter.ts

@@ -1,4 +1,11 @@
-import { Account, IdentityProvider, Prisma, PrismaClient, User, VerificationToken } from "@prisma/client";
+import type {
+  Account,
+  IdentityProvider,
+  Prisma,
+  PrismaClient,
+  User,
+  VerificationToken,
+} from "@prisma/client";
 import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
 
 import { identityProviderNameMap } from "@lib/auth";

apps/web/lib/config/next-seo.config.ts

@@ -1,4 +1,4 @@
-import { DefaultSeoProps, NextSeoProps } from "next-seo";
+import type { DefaultSeoProps, NextSeoProps } from "next-seo";
 
 import { APP_NAME, SEO_IMG_DEFAULT, SEO_IMG_OGIMG } from "@calcom/lib/constants";
 

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

@@ -1,7 +1,7 @@
 import parser from "accept-language-parser";
-import { IncomingMessage } from "http";
+import type { IncomingMessage } from "http";
 
-import { Maybe } from "@calcom/trpc/server";
+import type { Maybe } from "@calcom/trpc/server";
 
 import { getSession } from "@lib/auth";
 

apps/web/lib/csp.ts

@@ -1,8 +1,9 @@
 import crypto from "crypto";
-import { IncomingMessage, OutgoingMessage } from "http";
+import type { IncomingMessage, OutgoingMessage } from "http";
 import { z } from "zod";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 
 function getCspPolicy(nonce: string) {
   //TODO: Do we need to explicitly define it in turbo.json
@@ -12,7 +13,12 @@ function getCspPolicy(nonce: string) {
   // We can remove 'unsafe-inline' from style-src when we add nonces to all style tags
   // Maybe see how @next-safe/middleware does it if it's supported.
   const useNonStrictPolicy = CSP_POLICY === "non-strict";
+  const SENTRY_ENDPOINT = process.env.NEXT_PUBLIC_SENTRY_DSN
+    ? new URL(process.env.NEXT_PUBLIC_SENTRY_DSN, "http://base_url").origin
+    : "";
 
+  // We add WEBAPP_URL to img-src because of booking pages, which end up loading images from app.cal.com on cal.com
+  // FIXME: Write a layer to extract out EventType Analytics tracking endpoints and add them to img-src or connect-src as needed. e.g. fathom, Google Analytics and others
   return `
 	  default-src 'self' ${IS_PRODUCTION ? "" : "data:"};
 	  script-src ${
@@ -29,7 +35,8 @@ function getCspPolicy(nonce: string) {
       IS_PRODUCTION ? (useNonStrictPolicy ? "'unsafe-inline'" : "") : "'unsafe-inline'"
     } app.cal.com;
 	  font-src 'self';
-	  img-src 'self' https://www.gravatar.com https://img.youtube.com https://eu.ui-avatars.com/api/ data:
+	  img-src 'self' ${WEBAPP_URL} https://www.gravatar.com https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
+    connect-src 'self' ${SENTRY_ENDPOINT}
 	`;
 }
 

apps/web/lib/getBooking.tsx

@@ -1,4 +1,4 @@
-import { Prisma, PrismaClient } from "@prisma/client";
+import type { Prisma, PrismaClient } from "@prisma/client";
 
 async function getBooking(prisma: PrismaClient, uid: string) {
   const booking = await prisma.booking.findFirst({