v3.2.3

New Crowdin translations by Github Action
phoneSchema missing async parsing (#10929 )
2023-08-24 17:16:02 +03:00 · 2023-08-24 12:47:12 +00:00 · 2023-08-24 12:43:52 +00:00 · 2023-08-24 11:20:48 +01:00 · 2023-08-24 11:20:00 +01:00 · 2023-08-24 11:19:24 +01:00
841 changed files with 22859 additions and 10229 deletions
@@ -1,6 +1,7 @@
 # ********** INDEX **********
 #
 # - APP STORE
+#   - BASECAMP
 #   - DAILY.CO VIDEO
 #   - GOOGLE CALENDAR/MEET/LOGIN
 #   - HUBSPOT
@@ -20,6 +21,14 @@

 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+
+#   - BASECAMP
+# Used to enable Basecamp integration with Cal.com
+# @see https://github.com/calcom/cal.com#obtaining-basecamp-client-id-and-secret
+BASECAMP3_CLIENT_ID=
+BASECAMP3_CLIENT_SECRET=
+BASECAMP3_USER_AGENT=
+
 #   - DAILY.CO VIDEO
 # Enables Cal Video. to get your key
 # 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
@@ -126,8 +126,7 @@ TWILIO_WHATSAPP_PHONE_NUMBER=
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=

-# This is used so we can bypass emails in auth flows for E2E testing
-# Set it to "1" if you need to run E2E tests locally
+# Set it to "1" if you need to run E2E tests locally. 
 NEXT_PUBLIC_IS_E2E=

 # Used for internal billing system
@@ -172,6 +171,12 @@ EMAIL_SERVER_PORT=1025
 ## You will need to provision an App Password.
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
+
+# Used for E2E for email testing
+# Set it to "1" if you need to email checks in E2E tests locally
+# Make sure to run mailhog container manually or with `yarn dx`
+E2E_TEST_MAILHOG_ENABLED=
+
 # **********************************************************************************************************

 # Set the following value to true if you wish to enable Team Impersonation
@@ -215,3 +220,8 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
+
+#   - APPLE CALENDAR
+# Used for E2E tests on Apple Calendar
+E2E_TEST_APPLE_CALENDAR_EMAIL=""
+E2E_TEST_APPLE_CALENDAR_PASSWORD=""
@@ -1,17 +0,0 @@
-name: "Set environment variables"
-description: "Configures environment variables for a workflow"
-runs:
-  using: "composite"
-
-  steps:
-    - name: Read env file
-      uses: buildjet/cache@v3
-      id: env-cache
-      with:
-        path: gh.env-${{ github.sha }}
-        key: env-cache
-        restore-keys: env-cache-
-    - name: Set Environment Variables
-      uses: tw3lveparsecs/github-actions-setvars@latest
-      with:
-        envFilePath: gh.env-${{ github.sha }}
@@ -5,16 +5,15 @@ on:
    types:
      - opened

-
 jobs:
  label_on_pr:
    runs-on: ubuntu-latest
-    
+
    permissions:
      contents: none
      issues: read
      pull-requests: write
-    
+
    steps:
      - name: Apply labels from linked issue to PR
        uses: actions/github-script@v5
@@ -1,7 +1,7 @@
 # .github/workflows/chromatic.yml

 # Workflow name
-name: 'Chromatic'
+name: "Chromatic"

 # Event for the workflow
 on:
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-bookingReminder:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -5,7 +5,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
    - cron: "0 0 1 * *"
 jobs:
  cron-downgradeUsers:
@@ -21,4 +21,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleEmailReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleSMSReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleWhatsappReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -8,7 +8,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs every day (see https://crontab.guru)
+    # Runs "At 00:00." every day (see https://crontab.guru)
    - cron: "0 0 * * *"
  workflow_dispatch:
 jobs:
@@ -5,7 +5,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
    - cron: "0 0 1 * *"
 jobs:
  cron-syncAppMeta:
@@ -21,4 +21,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -15,6 +15,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
    strategy:
      fail-fast: false
      matrix:
@@ -27,16 +32,40 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: yarn e2e:app-store --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
          name: app-store-results-${{ matrix.shard }}_${{ strategy.job-total }}
-          path: app-store-results
+          path: test-results
@@ -27,7 +27,6 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
@@ -35,10 +34,34 @@ jobs:
          yarn e2e:embed-react --shard=${{ matrix.shard }}/${{ strategy.job-total }}
          yarn workspace @calcom/embed-react packaged:tests
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
          name: embed-react-results-${{ matrix.shard }}_${{ strategy.job-total }}
-          path: embed-react-results
+          path: test-results
@@ -15,6 +15,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
    strategy:
      fail-fast: false
      matrix:
@@ -27,16 +32,40 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: yarn e2e:embed --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
          name: embed-core-results-${{ matrix.shard }}_${{ strategy.job-total }}
-          path: embed-core-results
+          path: test-results
@@ -1,6 +1,8 @@
 name: E2E test
+
 on:
  workflow_call:
+
 jobs:
  e2e:
    timeout-minutes: 20
@@ -14,6 +16,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
    strategy:
      fail-fast: false
      matrix:
@@ -24,13 +31,41 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: yarn e2e --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+          EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+          EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
@@ -1,55 +0,0 @@
-name: Create .env file
-
-on:
-  workflow_call:
-
-env:
-  ENV_FILE_NAME: gh.env-${{ github.sha }}
-  INPUT_ENV_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  INPUT_ENV_NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-  INPUT_ENV_NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-  INPUT_ENV_NEXTAUTH_SECRET: secret
-  INPUT_ENV_GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-  INPUT_ENV_GOOGLE_LOGIN_ENABLED: true
-  # INPUT_ENV_CRON_API_KEY: xxx
-  # INPUT_ENV_CRON_ENABLE_APP_SYNC: true|false
-  INPUT_ENV_CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-  INPUT_ENV_NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-  INPUT_ENV_STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-  INPUT_ENV_STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-  INPUT_ENV_STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-  INPUT_ENV_PAYMENT_FEE_PERCENTAGE: 0.005
-  INPUT_ENV_PAYMENT_FEE_FIXED: 10
-  INPUT_ENV_SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  INPUT_ENV_SAML_ADMINS: pro@example.com
-  INPUT_ENV_NEXTAUTH_URL: http://localhost:3000
-  INPUT_ENV_NEXT_PUBLIC_IS_E2E: 1
-  # INPUT_ENV_EMAIL_FROM: e2e@cal.com
-  # INPUT_ENV_EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-  # INPUT_ENV_EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-  # INPUT_ENV_EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-  # INPUT_ENV_EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-  # INPUT_ENV_MS_GRAPH_CLIENT_ID: xxx
-  # INPUT_ENV_MS_GRAPH_CLIENT_SECRET: xxx
-  # INPUT_ENV_ZOOM_CLIENT_ID: xxx
-  # INPUT_ENV_ZOOM_CLIENT_SECRET: xxx
-  INPUT_ENV_SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
-  INPUT_ENV_SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
-  INPUT_ENV_TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  INPUT_ENV_TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
-jobs:
-  create_env_file:
-    runs-on: buildjet-4vcpu-ubuntu-2204
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
-      - uses: ozaytsev86/create-env-file@v1
-
-        with:
-          file-name: ${{ github.workspace }}/${{ env.ENV_FILE_NAME }}
-      - uses: buildjet/cache@v3
-        id: env-cache
-        with:
-          path: ${{ env.ENV_FILE_NAME }}
-          key: env-cache-${{ hashFiles(env.ENV_FILE_NAME) }}
@@ -7,13 +7,8 @@ on:
      - main

 jobs:
-  env:
-    name: Create env file
-    uses: ./.github/workflows/env-create-file.yml
-    secrets: inherit
  build:
    name: Production build
-    needs: env
    if: ${{ github.event_name == 'push' }}
    uses: ./.github/workflows/production-build.yml
    secrets: inherit
@@ -44,11 +44,6 @@ jobs:
              - 'packages/embeds/**'
              - 'playwright.config.ts'

-  env:
-    name: Create env file
-    uses: ./.github/workflows/env-create-file.yml
-    secrets: inherit
-
  type-check:
    name: Type check
    uses: ./.github/workflows/check-types.yml
@@ -66,13 +61,11 @@ jobs:

  build:
    name: Production build
-    needs: env
    uses: ./.github/workflows/production-build.yml
    secrets: inherit

  build-without-database:
    name: Production build (without database)
-    needs: env
    uses: ./.github/workflows/production-build-without-database.yml
    secrets: inherit

@@ -3,6 +3,32 @@ name: Production Build (without database)
 on:
  workflow_call:

+env:
+  ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+  NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+  NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+  NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+  PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+  PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+  SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+  SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+  SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
  build:
    name: Build
@@ -12,5 +38,4 @@ jobs:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/dangerous-git-checkout
      - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-build
@@ -3,6 +3,32 @@ name: Production Build
 on:
  workflow_call:

+env:
+  ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+  NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+  NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+  NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+  PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+  PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+  SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+  SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+  SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
  build:
    name: Build
@@ -20,6 +46,5 @@ jobs:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/dangerous-git-checkout
      - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
@@ -8,7 +8,7 @@ on: # yamllint disable-line rule:truthy
  workflow_dispatch:
    inputs:
      RELEASE_TAG:
-        description: 'v{Major}.{Minor}.{Patch}'
+        description: "v{Major}.{Minor}.{Patch}"

 jobs:
  release:
@@ -21,7 +21,7 @@ jobs:
        uses: actions/checkout@v3

      - name: "Determine tag"
-        run: "echo \"RELEASE_TAG=${GITHUB_REF#refs/tags/}\" >> $GITHUB_ENV"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'

      - name: "Run remote release workflow"
        uses: "actions/github-script@v6"
@@ -29,11 +29,11 @@ jobs:
          header: pr-title-lint-error
          message: |
            Hey there and thank you for opening this pull request! 👋🏼
-            
+
            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.

            Details:
-            
+
            ```
            ${{ steps.lint_pr_title.outputs.error_message }}
            ```
@@ -41,7 +41,7 @@ jobs:
      # Delete a previous comment when the issue has been resolved
      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
        uses: marocchino/sticky-pull-request-comment@v2
-        with:   
+        with:
          header: pr-title-lint-error
          message: |
-            Thank you for following the naming conventions! 🙏 
+            Thank you for following the naming conventions! 🙏
@@ -1,6 +1,7 @@
 name: Submodule Sync
 on:
  schedule:
+    # Runs "At minute 15 past every 4th hour." (see https://crontab.guru)
    - cron: "15 */4 * * *"
  workflow_dispatch: ~
 jobs:
@@ -1,28 +1,27 @@
 name: "Welcome new contributors"

 on:
- issues:
-  types: opened
- pull_request:
-   types: opened
+  issues:
+    types: opened
+  pull_request:
+    types: opened

 permissions:
  pull-requests: write
  issues: write

 jobs:
- welcome-message:
-  name: Welcoming New Users
-  runs-on: ubuntu-latest
-  timeout-minutes: 10
-  needs: semantics
-  if: github.event.action == 'opened'
-  steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        pr-message: |-
-          Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-          Feel free to join the conversation at [discord](https://go.cal.com/discord)
-        issue-message: |
-          Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉
+  welcome-message:
+    name: Welcoming New Users
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: github.event.action == 'opened'
+    steps:
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |-
+            Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
+            Feel free to join the conversation at [discord](https://go.cal.com/discord)
+          issue-message: |
+            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉
@@ -40,4 +40,4 @@ vscode:
    - bradlc.vscode-tailwindcss
    - ban.spellright
    - stripe.vscode-stripe
-    - Prisma.prisma
+    - Prisma.prisma
@@ -51,9 +51,9 @@
 # Scheduling infrastructure for absolutely everyone

 The open source Calendly alternative. You are in charge
-of your own data, workflow and appearance.
+of your own data, workflow, and appearance.

-Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customizations.
+Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes, and even calls with our families. However, most tools are very limited in terms of control and customization.

 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.

@@ -98,7 +98,7 @@ Meet our sales team for any commercial inquiries.

 ## Stay Up-to-Date

-Cal.com officially launched as v.1.0 on 15th of September 2021 and we've come a long way so far. Watch **releases** of this repository to be notified of future updates:
+Cal.com officially launched as v.1.0 on the 15th of September 2021 and we've come a long way so far. Watch **releases** of this repository to be notified of future updates:

 ![cal-star-github](https://user-images.githubusercontent.com/8019099/154853944-a9e3c999-3da3-4048-b149-b4f73893c6fb.gif)

@@ -128,7 +128,7 @@ Here is what you need to be able to run Cal.com.
   git clone https://github.com/calcom/cal.com.git
   ```

-   > If you are on windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
+   > If you are on Windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
   > See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.

 1. Go to the project folder
@@ -221,6 +221,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
   ```

 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+   > **_NOTE:_** Required when `E2E_TEST_MAILHOG_ENABLED` is "1"

   ```sh
   docker pull mailhog/mailhog
@@ -254,7 +255,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 # In a terminal just run:
 yarn test-e2e

-# To open last HTML report run:
+# To open the last HTML report run:
 yarn playwright show-report test-results/reports/playwright-html-report
 ```

@@ -461,6 +462,18 @@ following
 4. Now paste the API key to your `.env` file into the `DAILY_API_KEY` field in your `.env` file.
 5. If you have the [Daily Scale Plan](https://daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.

+### Obtaining Basecamp Client ID and Secret
+
+1. Visit the [37 Signals Integrations Dashboard](launchpad.37signals.com/integrations) and sign in.
+2. Register a new application by clicking the Register one now link.
+3. Fill in your company details.
+4. Select Basecamp 4 as the product to integrate with.
+5. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/basecamp3/callback` replacing Cal.com URL with the URI at which your application runs.
+6. Click on done and copy the Client ID and secret into the `BASECAMP3_CLIENT_ID` and `BASECAMP3_CLIENT_SECRET` fields.
+7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`. 
+For example, `Cal.com (support@cal.com)`.
+
+
 ### Obtaining HubSpot Client ID and Secret

 1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.
@@ -545,6 +558,4 @@ Special thanks to these amazing projects which help power Cal.com:
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Prisma](https://prisma.io/)

-<a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
-
 Cal.com is an [open startup](https://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
@@ -1,6 +1,8 @@
 import * as Sentry from "@sentry/nextjs";
 import type { NextMiddleware } from "next-api-middleware";

+import { redactError } from "@calcom/lib/redactError";
+
 export const captureErrors: NextMiddleware = async (_req, res, next) => {
  try {
    // Catch any errors that are thrown in remaining
@@ -8,7 +10,11 @@ export const captureErrors: NextMiddleware = async (_req, res, next) => {
    await next();
  } catch (error) {
    Sentry.captureException(error);
-    console.log(error);
+    const redactedError = redactError(error);
+    if (redactedError instanceof Error) {
+      res.status(400).json({ message: redactedError.message, error: redactedError });
+      return;
+    }
    res.status(400).json({ message: "Something went wrong", error });
  }
 };
@@ -2,6 +2,7 @@ import type { NextMiddleware } from "next-api-middleware";

 import { hashAPIKey } from "@calcom/features/ee/api-keys/lib/apiKeys";
 import checkLicense from "@calcom/features/ee/common/server/checkLicense";
+import { IS_PRODUCTION } from "@calcom/lib/constants";

 import { isAdminGuard } from "~/lib/utils/isAdmin";

@@ -17,7 +18,7 @@ export const dateNotInPast = function (date: Date) {
 export const verifyApiKey: NextMiddleware = async (req, res, next) => {
  const { prisma, isCustomPrisma, isAdmin } = req;
  const hasValidLicense = await checkLicense(prisma);
-  if (!hasValidLicense && process.env.NODE_ENV !== "development")
+  if (!hasValidLicense && IS_PRODUCTION)
    return res.status(401).json({ error: "Invalid or missing CALCOM_LICENSE_KEY environment variable" });
  // If the user is an admin and using a license key (from customPrisma), skip the apiKey check.
  if (isCustomPrisma && isAdmin) {
@@ -28,10 +28,17 @@ const withMiddleware = label(
    customPrismaClient,
    extendRequest,
    pagination: withPagination,
-    sentry: captureErrors,
+    captureErrors,
  },
-  // The order here, determines the order of execution, put customPrismaClient before verifyApiKey always.
-  ["extendRequest", "sentry", "customPrismaClient", "verifyApiKey", "addRequestId"] // <-- Provide a list of middleware to call automatically
+  // The order here, determines the order of execution
+  [
+    "extendRequest",
+    "captureErrors",
+    // - Put customPrismaClient before verifyApiKey always.
+    "customPrismaClient",
+    "verifyApiKey",
+    "addRequestId",
+  ] // <-- Provide a list of middleware to call automatically
 );

 export { withMiddleware };
@@ -67,6 +67,7 @@ const schemaEventTypeCreateParams = z
    seatsPerTimeSlot: z.number().optional(),
    seatsShowAttendees: z.boolean().optional(),
    bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
  })
  .strict();

@@ -85,6 +86,7 @@ const schemaEventTypeEditParams = z
    seatsPerTimeSlot: z.number().optional(),
    seatsShowAttendees: z.boolean().optional(),
    bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
  })
  .strict();

@@ -98,6 +100,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
  position: true,
  userId: true,
  teamId: true,
+  scheduleId: true,
  eventName: true,
  timeZone: true,
  periodType: true,
@@ -29,7 +29,7 @@ enum locales {
  RO = "ro",
  NL = "nl",
  PT_BR = "pt-BR",
-  ES_419 = "es-419",
+  // ES_419 = "es-419", // Disabled until Crowdin reaches at least 80% completion
  KO = "ko",
  JA = "ja",
  PL = "pl",
@@ -2,7 +2,6 @@ import type { NextApiRequest } from "next";
 import { z } from "zod";

 import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { availabilityUserSelect } from "@calcom/prisma";
@@ -120,10 +119,8 @@ const availabilitySchema = z
 async function handler(req: NextApiRequest) {
  const { prisma, isAdmin, userId: reqUserId } = req;
  const { username, userId, eventTypeId, dateTo, dateFrom, teamId } = availabilitySchema.parse(req.query);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(req.headers.host ?? "");
  if (!teamId)
    return getUserAvailability({
-      orgSlug: isValidOrgDomain ? currentOrgDomain || undefined : undefined,
      username,
      dateFrom,
      dateTo,
@@ -1,9 +1,11 @@
 import type { NextApiRequest } from "next";

+import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";

 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+import { checkPermissions as canAccessTeamEventOrThrow } from "~/pages/api/teams/[teamId]/_auth-middleware";

 import getCalLink from "../_utils/getCalLink";

@@ -42,7 +44,8 @@ import getCalLink from "../_utils/getCalLink";
 export async function getHandler(req: NextApiRequest) {
  const { prisma, query } = req;
  const { id } = schemaQueryIdParseInt.parse(query);
-  const event_type = await prisma.eventType.findUnique({
+
+  const eventType = await prisma.eventType.findUnique({
    where: { id },
    include: {
      customInputs: true,
@@ -51,10 +54,43 @@ export async function getHandler(req: NextApiRequest) {
      owner: { select: { username: true, id: true } },
    },
  });
+  await checkPermissions(req, eventType);

-  const link = event_type ? getCalLink(event_type) : null;
+  const link = eventType ? getCalLink(eventType) : null;
+  // user.defaultScheduleId doesn't work the same for team events.
+  if (!eventType?.scheduleId && eventType?.userId && !eventType?.teamId) {
+    const user = await prisma.user.findUniqueOrThrow({
+      where: {
+        id: eventType.userId,
+      },
+      select: {
+        defaultScheduleId: true,
+      },
+    });
+    eventType.scheduleId = user.defaultScheduleId;
+  }

-  return { event_type: schemaEventTypeReadPublic.parse({ ...event_type, link }) };
+  // TODO: eventType when not found should be a 404
+  //       but API consumers may depend on the {} behaviour.
+  return { event_type: schemaEventTypeReadPublic.parse({ ...eventType, link }) };
+}
+
+type BaseEventTypeCheckPermissions = {
+  userId: number | null;
+  teamId: number | null;
+};
+
+async function checkPermissions<T extends BaseEventTypeCheckPermissions>(
+  req: NextApiRequest,
+  eventType: (T & Partial<Omit<T, keyof BaseEventTypeCheckPermissions>>) | null
+) {
+  if (req.isAdmin) return true;
+  if (eventType?.teamId) {
+    req.query.teamId = String(eventType.teamId);
+    await canAccessTeamEventOrThrow(req, "MEMBER");
+  }
+  if (eventType?.userId === req.userId) return true; // is owner.
+  throw new HttpError({ statusCode: 403, message: "Forbidden" });
 }

 export default defaultResponder(getHandler);
@@ -52,6 +52,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 *               slug:
 *                 type: string
 *                 description: Unique slug for the event type
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
 *               hosts:
 *                 type: array
 *                 items:
@@ -1,8 +1,8 @@
-import type { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";

 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import type { PrismaClient } from "@calcom/prisma/client";

 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
@@ -35,20 +35,12 @@ import getCalLink from "./_utils/getCalLink";
 *         description: No event types were found
 */
 async function getHandler(req: NextApiRequest) {
-  const { userId, isAdmin, prisma } = req;
-
-  const args: Prisma.EventTypeFindManyArgs = {
-    where: { userId },
-  };
-  /** Only admins can query other users */
-  if (!isAdmin && req.query.userId) throw new HttpError({ statusCode: 401, message: "ADMIN required" });
-  if (isAdmin && req.query.userId) {
-    const query = schemaQuerySingleOrMultipleUserIds.parse(req.query);
-    const userIds = Array.isArray(query.userId) ? query.userId : [query.userId || userId];
-    args.where = { userId: { in: userIds } };
-  }
+  const { userId, prisma } = req;
+  const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
  const data = await prisma.eventType.findMany({
-    ...args,
+    where: {
+      userId: { in: userIds },
+    },
    include: {
      customInputs: true,
      team: { select: { slug: true } },
@@ -56,12 +48,74 @@ async function getHandler(req: NextApiRequest) {
      owner: { select: { username: true, id: true } },
    },
  });
+  // this really should return [], but backwards compatibility..
+  if (data.length === 0) new HttpError({ statusCode: 404, message: "No event types were found" });
  return {
-    event_types: data.map((eventType) => {
-      const link = getCalLink(eventType);
-      return schemaEventTypeReadPublic.parse({ ...eventType, link });
-    }),
+    event_types: (await defaultScheduleId<(typeof data)[number]>({ eventTypes: data, prisma, userIds })).map(
+      (eventType) => {
+        const link = getCalLink(eventType);
+        return schemaEventTypeReadPublic.parse({ ...eventType, link });
+      }
+    ),
  };
 }
+// TODO: Extract & reuse.
+function extractUserIdsFromQuery({ isAdmin, query }: NextApiRequest) {
+  /** Guard: Only admins can query other users */
+  if (!isAdmin) {
+    throw new HttpError({ statusCode: 401, message: "ADMIN required" });
+  }
+  const { userId: userIdOrUserIds } = schemaQuerySingleOrMultipleUserIds.parse(query);
+  return Array.isArray(userIdOrUserIds) ? userIdOrUserIds : [userIdOrUserIds];
+}
+
+type DefaultScheduleIdEventTypeBase = {
+  scheduleId: number | null;
+  userId: number | null;
+};
+// If an eventType is given w/o a scheduleId
+// Then we associate the default user schedule id to the eventType
+async function defaultScheduleId<T extends DefaultScheduleIdEventTypeBase>({
+  prisma,
+  eventTypes,
+  userIds,
+}: {
+  prisma: PrismaClient;
+  eventTypes: (T & Partial<Omit<T, keyof DefaultScheduleIdEventTypeBase>>)[];
+  userIds: number[];
+}) {
+  // there is no event types without a scheduleId, skip the user query
+  if (eventTypes.every((eventType) => eventType.scheduleId)) return eventTypes;
+
+  const users = await prisma.user.findMany({
+    where: {
+      id: {
+        in: userIds,
+      },
+    },
+    select: {
+      id: true,
+      defaultScheduleId: true,
+    },
+  });
+
+  if (!users.length) {
+    return eventTypes;
+  }
+
+  const defaultScheduleIds = users.reduce((result, user) => {
+    result[user.id] = user.defaultScheduleId;
+    return result;
+  }, {} as { [x: number]: number | null });
+
+  return eventTypes.map((eventType) => {
+    // realistically never happens, userId should't be null on personal event types.
+    if (!eventType.userId) return eventType;
+    return {
+      ...eventType,
+      scheduleId: eventType.scheduleId || defaultScheduleIds[eventType.userId],
+    };
+  });
+}

 export default defaultResponder(getHandler);
@@ -60,6 +60,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *               hidden:
 *                 type: boolean
 *                 description: If the event type should be hidden from your public booking page
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
 *               position:
 *                 type: integer
 *                 description: The position of the event type on the public booking page
@@ -178,6 +181,7 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *                  position: 0
 *                  eventName: null
 *                  timeZone: null
+ *                  scheduleId: 5
 *                  periodType: UNLIMITED
 *                  periodStartDate: 2023-02-15T08:46:16.000Z
 *                  periodEndDate: 2023-0-15T08:46:16.000Z
@@ -59,7 +59,7 @@ async function getHandler(req: NextApiRequest) {
  };

  const data = await prisma.eventType.findMany(args);
-  return { event_types: data.map((attendee) => schemaEventTypeReadPublic.parse(attendee)) };
+  return { event_types: data.map((eventType) => schemaEventTypeReadPublic.parse(eventType)) };
 }

 export default defaultResponder(getHandler);
@@ -40,7 +40,7 @@ export async function getHandler(req: NextApiRequest) {
  // If user is not ADMIN, return only his data.
  if (!isAdmin) where.id = userId;
  const [total, data] = await prisma.$transaction([
-    prisma.user.count(),
+    prisma.user.count({ where }),
    prisma.user.findMany({ where, take, skip }),
  ]);
  const users = schemaUsersReadPublic.parse(data);
@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"

 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
    restart: always
    container_name: integration-tests-prisma
    ports:
-      - '5433:5432'
+      - "5433:5432"
    environment:
      POSTGRES_USER: prisma
      POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
+      POSTGRES_DB: tests
@@ -15,6 +15,7 @@ module.exports = {
    "storybook-addon-rtl-direction",
    "storybook-react-i18next",
    "storybook-addon-next",
+    "storybook-addon-next-router",
    /*{
      name: "storybook-addon-next",
      options: {
@@ -1,9 +1,9 @@
 <script>
  window.global = window;
-  window.isEmbed = ()=> {
-    return location.search.includes("embed=")
-  }
+  window.isEmbed = () => {
+    return location.search.includes("embed=");
+  };
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
 </style>
@@ -1,4 +1,5 @@
 import { addDecorator } from "@storybook/react";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";

 import "../styles/globals.css";
@@ -13,6 +14,13 @@ export const parameters = {
      date: /Date$/,
    },
  },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
 };

 addDecorator((storyFn) => (
@@ -1,11 +1,21 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";

 <Meta title="Introduction" />

-<div className="text-center flex flex-col items-center">
-  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
-  <p>This is the beginning of our storybook impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
-  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+<div className="flex flex-col items-center text-center">
+  <h1 style={{ marginBottom: "24px", marginTop: "36px" }}>Welcome to Cal.com UI</h1>
+  <p>
+    This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma
+    library, we will be adding more components as we go along.
+  </p>
+  <p>
+    Our{" "}
+    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
+      Figma
+    </a>{" "}
+    library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
+    the design team.
+  </p>
 </div>

-<img src="/sb-cover.jpg" />
+<img src="/sb-cover.jpg" />
@@ -23,6 +23,7 @@
    "next": "^13.4.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "storybook-addon-next-router": "^4.0.2",
    "storybook-addon-rtl-direction": "^0.0.19"
  },
  "devDependencies": {
@@ -1,8 +1,8 @@
@import url("../../../packages/features/calendars/weeklyview/styles/styles.css");

 .sbdocs {
-  font-family: 'Inter var' !important;
-  padding: 0!important;
+  font-family: "Inter var" !important;
+  padding: 0 !important;
 }

 #docs-root {
@@ -21,8 +21,8 @@
  font-weight: 500;
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
-  padding-top: 12px!important;
-  padding-bottom: 12px!important;
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
  margin: 82px 0 0 0;
 }

@@ -37,7 +37,7 @@
 }

 /** Docs table **/
-.custom-args-wrapper{
+.custom-args-wrapper {
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
@@ -45,7 +45,7 @@
 }

 .docblock-argstable-body {
-  box-shadow: none!important;
+  box-shadow: none !important;
  font-size: 14px;
 }

@@ -64,7 +64,7 @@

 .docblock-argstable-body div p,
 .docblock-argstable-body div span {
-  color: #8F8F8F !important;
+  color: #8f8f8f !important;
 }

 /** Custom components **/
@@ -83,8 +83,8 @@
 }

 .story-title h1 span {
-  color: #9CA3AF;
-  font-family: 'Inter var';
+  color: #9ca3af;
+  font-family: "Inter var";
  font-weight: normal;
  display: inline-block;
  margin-left: 8px;
@@ -96,7 +96,7 @@
 }

 .examples {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
  padding: 20px;
  display: flex;
  flex-direction: column;
@@ -111,14 +111,14 @@
 }

 .examples-title {
-  color: #8F8F8F;
+  color: #8f8f8f;
  font-size: 14px;
  margin-bottom: 30px;
 }

 .examples-item-title {
  font-size: 12px;
-  color: #8F8F8F;
+  color: #8f8f8f;
  margin-bottom: 12px;
  display: block;
 }
@@ -130,7 +130,7 @@
 .examples-footnote p,
 .examples-footnote ul,
 .examples-footnote li {
-  color: #8F8F8F;
+  color: #8f8f8f;
  font-size: 14px;
 }

@@ -139,11 +139,11 @@
 }

 .examples-footnote li {
-  margin: 0!important;
+  margin: 0 !important;
 }

 .story-note {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
  font-size: 14px;
  padding: 20px;
  margin-bottom: 12px;
@@ -161,12 +161,12 @@
  box-shadow: none !important;
  margin: 0 !important;
  border: none !important;
-  border-radius: none!important;
+  border-radius: none !important;
 }

 .docs-story > div:first-child {
-  padding: 0!important;
-  margin: 0!important;
+  padding: 0 !important;
+  margin: 0 !important;
 }

 .docs-story .innerZoomElementWrapper > div {
@@ -174,7 +174,7 @@
 }

 .sb-main-padded {
-  padding: 0!important;
+  padding: 0 !important;
 }

@media screen and (max-width: 1200px) {
@@ -198,74 +198,72 @@
  :root {
    /* background */

-    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg-emphasis: #e5e7eb;
    --cal-bg: white;
-    --cal-bg-subtle: #F3F4F6;
-    --cal-bg-muted: #F9FAFB;
+    --cal-bg-subtle: #f3f4f6;
+    --cal-bg-muted: #f9fafb;
    --cal-bg-inverted: #111827;

    /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
    --cal-bg-dark-error: #752522;

-
    /* Borders */
-    --cal-border-emphasis:#9CA3AF;
-    --cal-border: #D1D5DB;
-    --cal-border-subtle:#E5E7EB;
-    --cal-border-muted:#F3F4F6;
+    --cal-border-emphasis: #9ca3af;
+    --cal-border: #d1d5db;
+    --cal-border-subtle: #e5e7eb;
+    --cal-border-muted: #f3f4f6;
    --cal-border-error: #aa2e26;

    /* Content/Text */
    --cal-text-emphasis: #111827;
-    --cal-text:#374151;
-    --cal-text-subtle:#6B7280;
-    --cal-text-muted:#9CA3AF;
-    --cal-text-inverted:white;
+    --cal-text: #374151;
+    --cal-text-subtle: #6b7280;
+    --cal-text-muted: #9ca3af;
+    --cal-text-inverted: white;

    /* Content/Text -> components */
-    --cal-text-info:#253985;
-    --cal-text-success:#285231;
-    --cal-text-attention:#73321B;
-    --cal-text-error:#752522;
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321b;
+    --cal-text-error: #752522;

    /* Brand shinanigans
      -> These will be computed for the users theme at runtime.
    */
-    --cal-brand:#111827;
-    --cal-brand-emphasis:#101010;
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
    --cal-brand-text: white;
  }
  .dark {
    /* background */

-    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg-emphasis: #2b2b2b;
    --cal-bg: #101010;
-    --cal-bg-subtle: #2B2B2B;
-    --cal-bg-muted: #1C1C1C;
-    --cal-bg-inverted: #F3F4F6;
+    --cal-bg-subtle: #2b2b2b;
+    --cal-bg-muted: #1c1c1c;
+    --cal-bg-inverted: #f3f4f6;

    /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
    --cal-bg-dark-error: #752522;

-
    /* Borders */
    --cal-border-emphasis: #575757;
    --cal-border: #444444;
-    --cal-border-subtle: #2B2B2B;
-    --cal-border-muted: #1C1C1C;
+    --cal-border-subtle: #2b2b2b;
+    --cal-border-muted: #1c1c1c;
    --cal-border-error: #aa2e26;

    /* Content/Text */
-    --cal-text-emphasis: #F3F4F6;
-    --cal-text: #D6D6D6;
+    --cal-text-emphasis: #f3f4f6;
+    --cal-text: #d6d6d6;
    --cal-text-subtle: #757575;
    --cal-text-muted: #575757;
    --cal-text-inverted: #101010;
@@ -273,7 +271,7 @@
    /* Content/Text -> components */
    --cal-text-info: #253985;
    --cal-text-success: #285231;
-    --cal-text-attention: #73321B;
+    --cal-text-attention: #73321b;
    --cal-text-error: #752522;

    /* Brand shenanigans
@@ -2,8 +2,8 @@ html,
 body {
  padding: 0;
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
 }

 a {
@@ -21,7 +21,7 @@ a {
  }
  .swagger-ui .opblock .opblock-summary {
    display: grid;
-  flex-direction: column;
+    flex-direction: column;
  }
  .opblock-summary-path {
    flex-shrink: 0;
@@ -43,22 +43,22 @@ a {
    font-size: 22px;
  }
  .swagger-ui .scheme-container {
-  padding: 14px 0;
+    padding: 14px 0;
  }
  .swagger-ui .info {
-      margin: 10px 0;
+    margin: 10px 0;
  }
  .swagger-ui .auth-wrapper {
    margin: 10px 0;
  }
  .swagger-ui .authorization__btn {
-  display: none;
+    display: none;
  }
  .swagger-ui .opblock {
    margin: 0 0 5px;
  }
  button.opblock-summary-control > svg {
-    display: none;  
+    display: none;
  }
  .swagger-ui .filter .operation-filter-input {
    border: 2px solid #d8dde7;
@@ -73,15 +73,16 @@ a {
  .swagger-ui .info .title small {
    top: 5px;
  }
-  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+  .swagger-ui a.nostyle,
+  .swagger-ui a.nostyle:visited {
    width: 100%;
  }
  div.request-snippets > div.curl-command > div:nth-child(1) {
    overscroll-behavior: contain;
    overflow-x: scroll;
  }
-  .swagger-ui .opblock-body pre.microlight {  
-    font-size: 9px; 
+  .swagger-ui .opblock-body pre.microlight {
+    font-size: 9px;
  }
  .swagger-ui table tbody tr td {
    padding: 0px 0 0;
@@ -91,7 +92,7 @@ a {
    font-size: 12px;
  }
  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
-        display: flex;
+    display: flex;
    width: 100vw;
    flex-direction: column;
    font-size: 60%;
@@ -99,4 +100,4 @@ a {
  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
    display: none;
  }
-}
+}
@@ -1,15 +1,24 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";

 import type { CredentialOwner } from "@calcom/app-store/types";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText, Avatar } from "@calcom/ui";
 import { AlertCircle } from "@calcom/ui/components/icon";

-type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
+type ShouldHighlight =
+  | {
+      slug: string;
+      shouldHighlight: true;
+    }
+  | {
+      shouldHighlight?: never;
+      slug?: never;
+    };

 type AppListCardProps = {
  logo?: string;
@@ -46,14 +55,16 @@ export default function AppListCard(props: AppListCardProps) {
  const router = useRouter();
  const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const searchParams = useSearchParams();
+  const pathname = usePathname();

  useEffect(() => {
    if (shouldHighlight && highlight) {
      const timer = setTimeout(() => {
        setHighlight(false);
-        const url = new URL(window.location.href);
-        url.searchParams.delete("hl");
-        router.replace(url.pathname, undefined, { shallow: true });
+        const _searchParams = new URLSearchParams(searchParams);
+        _searchParams.delete("hl");
+        router.replace(`${pathname}?${_searchParams.toString()}`);
      }, 3000);
      timeoutRef.current = timer;
    }
@@ -96,7 +107,7 @@ export default function AppListCard(props: AppListCardProps) {
                  className="mr-2"
                  alt={credentialOwner.name || "Nameless"}
                  size="xs"
-                  imageSrc={credentialOwner.avatar}
+                  imageSrc={getPlaceholderAvatar(credentialOwner.avatar, credentialOwner?.name as string)}
                />
                {credentialOwner.name}
              </div>
@@ -1,26 +0,0 @@
-import { useSession } from "next-auth/react";
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "app_store",
-    href: "/apps",
-  },
-  {
-    name: "installed_apps",
-    href: "/apps/installed",
-  },
-];
-
-export default function AppsShell({ children }: { children: React.ReactNode }) {
-  const { status } = useSession();
-
-  return (
-    <>
-      <div className="mb-12 block lg:hidden">{status === "authenticated" && <NavTabs tabs={tabs} />}</div>
-      <main className="pb-6">{children}</main>
-    </>
-  );
-}
@@ -1,31 +0,0 @@
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "upcoming",
-    href: "/bookings/upcoming",
-  },
-  {
-    name: "recurring",
-    href: "/bookings/recurring",
-  },
-  {
-    name: "past",
-    href: "/bookings/past",
-  },
-  {
-    name: "cancelled",
-    href: "/bookings/cancelled",
-  },
-];
-
-export default function BookingsShell({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <NavTabs tabs={tabs} />
-      <main>{children}</main>
-    </>
-  );
-}
@@ -1,27 +1,51 @@
+import { lookup } from "bcp-47-match";
+import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";

+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";

-export function useViewerI18n() {
-  return trpc.viewer.public.i18n.useQuery(undefined, {
-    staleTime: Infinity,
-    /**
-     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
-     * We intend to not cache i18n query
-     **/
-    trpc: {
-      context: { skipBatch: true },
-    },
-  });
+function useViewerI18n(locale: string) {
+  return trpc.viewer.public.i18n.useQuery(
+    { locale, CalComVersion: CALCOM_VERSION },
+    {
+      /**
+       * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+       **/
+      trpc: {
+        context: { skipBatch: true },
+      },
+    }
+  );
+}
+
+function useClientLocale(locales: string[]) {
+  const session = useSession();
+  // If the user is logged in, use their locale
+  if (session.data?.user.locale) return session.data.user.locale;
+  // If the user is not logged in, use the browser locale
+  if (typeof window !== "undefined") {
+    // This is the only way I found to ensure the prefetched locale is used on first render
+    // FIXME: Find a better way to pick the best matching locale from the browser
+    return lookup(locales, window.navigator.language) || window.navigator.language;
+  }
+  // If the browser is not available, use English
+  return "en";
+}
+
+export function useClientViewerI18n(locales: string[]) {
+  const clientLocale = useClientLocale(locales);
+  return useViewerI18n(clientLocale);
 }

 /**
 * Auto-switches locale client-side to the logged in user's preference
 */
-const I18nLanguageHandler = () => {
+const I18nLanguageHandler = (props: { locales: string[] }) => {
+  const { locales } = props;
  const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale || i18n.language;
+  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;

  useEffect(() => {
    // bail early when i18n = {}
@@ -1,99 +0,0 @@
-import { noop } from "lodash";
-import type { LinkProps } from "next/link";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import type { FC, MouseEventHandler } from "react";
-import { Fragment } from "react";
-
-import { PermissionContainer } from "@calcom/features/auth/PermissionContainer";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import classNames from "@lib/classNames";
-import type { SVGComponent } from "@lib/types/SVGComponent";
-
-export interface NavTabProps {
-  tabs: {
-    name: string;
-    /** If you want to change the path as per current tab */
-    href?: string;
-    /** If you want to change query param tabName as per current tab */
-    tabName?: string;
-    icon?: SVGComponent;
-    adminRequired?: boolean;
-    className?: string;
-  }[];
-  linkProps?: Omit<LinkProps, "href">;
-}
-
-const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
-  const router = useRouter();
-  const { t } = useLocale();
-  return (
-    <>
-      <nav
-        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
-        aria-label="Tabs"
-        {...props}>
-        {tabs.map((tab) => {
-          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
-            throw new Error("Use either tabName or href");
-          }
-          let href = "";
-          let isCurrent;
-          if (tab.href) {
-            href = tab.href;
-            isCurrent = router.asPath === tab.href;
-          } else if (tab.tabName) {
-            href = "";
-            isCurrent = router.query.tabName === tab.tabName;
-          }
-
-          const onClick: MouseEventHandler = tab.tabName
-            ? (e) => {
-                e.preventDefault();
-                router.push({
-                  query: {
-                    ...router.query,
-                    tabName: tab.tabName,
-                  },
-                });
-              }
-            : noop;
-
-          const Component = tab.adminRequired ? PermissionContainer : Fragment;
-          const className = tab.className || "";
-          return (
-            <Component key={tab.name}>
-              <Link key={tab.name} href={href} {...linkProps} legacyBehavior>
-                <a
-                  onClick={onClick}
-                  className={classNames(
-                    isCurrent
-                      ? "text-emphasis border-gray-900"
-                      : "hover:border-default hover:text-default text-subtle border-transparent",
-                    "group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium",
-                    className
-                  )}
-                  aria-current={isCurrent ? "page" : undefined}>
-                  {tab.icon && (
-                    <tab.icon
-                      className={classNames(
-                        isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
-                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
-                      )}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span>{t(tab.name)}</span>
-                </a>
-              </Link>
-            </Component>
-          );
-        })}
-      </nav>
-      <hr className="border-subtle" />
-    </>
-  );
-};
-
-export default NavTabs;
@@ -6,7 +6,7 @@ import Script from "next/script";

 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";

 import type { AppProps } from "@lib/app-providers";
@@ -72,7 +72,7 @@ function PageWrapper(props: AppProps) {
        }
        {...seoConfig.defaultNextSeo}
      />
-      <I18nLanguageHandler />
+      <I18nLanguageHandler locales={props.router.locales || []} />
      <Script
        nonce={nonce}
        id="page-status"
@@ -1,60 +0,0 @@
-import type { ComponentProps } from "react";
-import React from "react";
-
-import Shell from "@calcom/features/shell/Shell";
-import { ErrorBoundary } from "@calcom/ui";
-import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "profile",
-    href: "/settings/my-account/profile",
-    icon: User,
-  },
-  {
-    name: "teams",
-    href: "/settings/teams",
-    icon: Users,
-  },
-  {
-    name: "security",
-    href: "/settings/security",
-    icon: Key,
-  },
-  {
-    name: "developer",
-    href: "/settings/developer",
-    icon: Terminal,
-  },
-  {
-    name: "billing",
-    href: "/settings/billing",
-    icon: CreditCard,
-  },
-  {
-    name: "admin",
-    href: "/settings/admin",
-    icon: Lock,
-    adminRequired: true,
-  },
-];
-
-export default function SettingsShell({
-  children,
-  ...rest
-}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  return (
-    <Shell {...rest} hideHeadingOnMobile>
-      <div className="sm:mx-auto">
-        <NavTabs tabs={tabs} />
-      </div>
-      <main className="max-w-4xl">
-        <>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </>
-      </main>
-    </Shell>
-  );
-}
@@ -1,376 +1,17 @@
-import Link from "next/link";
-import type { IframeHTMLAttributes } from "react";
-import React, { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import { CAL_URL } from "@calcom/lib/constants";
-import type { RouterOutputs } from "@calcom/trpc/react";
-
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
-import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import Shell from "@calcom/features/shell/Shell";
-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 type { App as AppType } from "@calcom/types/App";
-import type { ButtonProps } from "@calcom/ui";
-import type { AppFrontendPayload as App } from "@calcom/types/App";
-import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  Dropdown,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuLabel,
-  DropdownItem,
-  Avatar,
-} from "@calcom/ui";
-import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
-import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
+import { HeadSeo } from "@calcom/ui";

-
-/* These app slugs all require Google Cal to be installed */
-
-const Component = ({
-  name,
-  type,
-  logo,
-  slug,
-  variant,
-  body,
-  categories,
-  author,
-  price = 0,
-  commission,
-  isGlobal = false,
-  feeType,
-  docs,
-  website,
-  email,
-  tos,
-  privacy,
-  teamsPlanRequired,
-  descriptionItems,
-  isTemplate,
-  dependencies,
-}: Parameters<typeof App>[0]) => {
-  const { t, i18n } = useLocale();
-  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: (data) => {
-      if (data?.setupPending) return;
-      showToast(t("app_successfully_installed"), "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
-    },
-  });
-
-  const priceInDollar = Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    useGrouping: false,
-  }).format(price);
-
-  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
-  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
-    { appType: type },
-    {
-      onSettled(data) {
-        const credentialsCount = data?.credentials.length || 0
-        setShowDisconnectIntegration(data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0);
-        setExistingCredentials(data?.credentials.map(credential => credential.id) || []);
-      },
-    }
-  );
-
-  const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
-    enabled: !!dependencies,
-  });
-
-  const disableInstall =
-    dependencyData.data && dependencyData.data.some((dependency) => !dependency.installed);
-
-  // const disableInstall = requiresGCal && !gCalInstalled.data;
-
-  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
-  // Such apps, can only be installed once.
-  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
-
-  return (
-    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
-      {hasDescriptionItems && (
-        <div className="align-center bg-subtle -ml-4 -mr-4 mb-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:-ml-8 md:-mr-8 md:mb-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
-          {descriptionItems ? (
-            descriptionItems.map((descriptionItem, index) =>
-              typeof descriptionItem === "object" ? (
-                <div
-                  key={`iframe-${index}`}
-                  className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
-                  <iframe allowFullScreen {...descriptionItem.iframe} />
-                </div>
-              ) : (
-                <img
-                  key={descriptionItem}
-                  src={descriptionItem}
-                  alt={`Screenshot of app ${name}`}
-                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
-                />
-              )
-            )
-          ) : (
-            <SkeletonText />
-          )}
-        </div>
-      )}
-      <div
-        className={classNames(
-          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
-          hasDescriptionItems && "lg:ml-8"
-        )}>
-        <div className="mb-8 flex pt-4">
-          <header>
-            <div className="mb-4 flex items-center">
-              <img
-                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
-                src={logo}
-                alt={name}
-              />
-              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
-            </div>
-            <h2 className="text-default text-sm font-medium">
-              <Link
-                href={`categories/${categories[0]}`}
-                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
-                {categories[0]}
-              </Link>{" "}
-              •{" "}
-              <a target="_blank" rel="noreferrer" href={website}>
-                {t("published_by", { author })}
-              </a>
-            </h2>
-            {isTemplate && (
-              <Badge variant="red" className="mt-4">
-                Template - Available in Dev Environment only for testing
-              </Badge>
-            )}
-          </header>
-        </div>
-        {!appDbQuery.isLoading ? (
-          isGlobal ||
-          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
-            <div className="flex space-x-3">
-              <Button StartIcon={Check} color="secondary" disabled>
-                {existingCredentials.length > 0
-                  ? t("active_install", { count: existingCredentials.length })
-                  : t("default")}
-              </Button>
-              {!isGlobal && (
-                <InstallAppButton
-                  type={type}
-                  disableInstall={disableInstall}
-                  teamsPlanRequired={teamsPlanRequired}
-                  render={({ useDefaultComponent, ...props }) => {
-                    if (useDefaultComponent) {
-                      props = {
-                        ...props,
-                        onClick: () => {
-                          mutation.mutate({ type, variant, slug });
-                        },
-                        loading: mutation.isLoading,
-                      };
-                    }
-                    return (
-                      <InstallAppButtonChild appCategories={categories} userAdminTeams={appDbQuery.data?.userAdminTeams} addAppMutationInput={{ type, variant, slug }} multiInstall {...props} />
-                    );
-                  }}
-                />
-              )}
-            </div>
-          ) : showDisconnectIntegration ? (
-            <DisconnectIntegration
-              buttonProps={{ color: "secondary" }}
-              label={t("disconnect")}
-              credentialId={existingCredentials[0]}
-              onSuccess={() => {
-                appDbQuery.refetch();
-              }}
-            />
-          ) : (
-            <InstallAppButton
-              type={type}
-              disableInstall={disableInstall}
-              teamsPlanRequired={teamsPlanRequired}
-              render={({ useDefaultComponent, ...props }) => {
-                if (useDefaultComponent) {
-                  props = {
-                    ...props,
-                    onClick: () => {
-                      mutation.mutate({ type, variant, slug });
-                    },
-                    loading: mutation.isLoading,
-                  };
-                }
-                return (
-                  <InstallAppButtonChild appCategories={categories} userAdminTeams={appDbQuery.data?.userAdminTeams} addAppMutationInput={{ type, variant, slug }} credentials={appDbQuery.data?.credentials} {...props} />
-                );
-              }}
-            />
-          ))
-        ) : (
-          <SkeletonButton className="h-10 w-24" />
-        )}
-
-        {dependencies &&
-          (!dependencyData.isLoading ? (
-            <div className="mt-6">
-              <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
-            </div>
-          ) : (
-            <SkeletonButton className="mt-6 h-20 grow" />
-          ))}
-
-        {price !== 0 && (
-          <span className="block text-right">
-            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-            {feeType === "monthly" && "/" + t("month")}
-          </span>
-        )}
-
-        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
-          {body}
-        </div>
-        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
-        <span className="text-default">
-          {teamsPlanRequired ? (
-            t("teams_plan_required")
-          ) : price === 0 ? (
-            t("free_to_use_apps")
-          ) : (
-            <>
-              {Intl.NumberFormat(i18n.language, {
-                style: "currency",
-                currency: "USD",
-                useGrouping: false,
-              }).format(price)}
-              {feeType === "monthly" && "/" + t("month")}
-            </>
-          )}
-        </span>
-
-        <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
-        <ul className="prose-sm -ml-1 -mr-1 leading-5">
-          {docs && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis text-sm font-normal no-underline hover:underline"
-                href={docs}>
-                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
-                {t("documentation")}
-              </a>
-            </li>
-          )}
-          {website && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={website}>
-                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {website.replace("https://", "")}
-              </a>
-            </li>
-          )}
-          {email && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={"mailto:" + email}>
-                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-
-                {email}
-              </a>
-            </li>
-          )}
-          {tos && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={tos}>
-                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {t("terms_of_service")}
-              </a>
-            </li>
-          )}
-          {privacy && (
-            <li>
-              <a
-                target="_blank"
-                rel="noreferrer"
-                className="text-emphasis font-normal no-underline hover:underline"
-                href={privacy}>
-                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
-                {t("privacy_policy")}
-              </a>
-            </li>
-          )}
-        </ul>
-        <hr className="border-subtle my-8 border" />
-        <span className="leading-1 text-subtle block text-xs">
-          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
-        </span>
-        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <Flag className="inline h-3 w-3" /> {t("report_app")}
-        </a>
-      </div>
-    </div>
-  );
-};
+import type { AppPageProps } from "./AppPage";
+import { AppPage } from "./AppPage";

 const ShellHeading = () => {
  const { t } = useLocale();
  return <span className="block py-2">{t("app_store")}</span>;
 };

-export default function App(props: {
-  name: string;
-  description: AppType["description"];
-  type: AppType["type"];
-  isGlobal?: AppType["isGlobal"];
-  logo: string;
-  slug: string;
-  variant: string;
-  body: React.ReactNode;
-  categories: string[];
-  author: string;
-  pro?: boolean;
-  price?: number;
-  commission?: number;
-  feeType?: AppType["feeType"];
-  docs?: string;
-  website?: string;
-  email: string; // required
-  tos?: string;
-  privacy?: string;
-  licenseRequired: AppType["licenseRequired"];
-  teamsPlanRequired: AppType["teamsPlanRequired"];
-  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
-  isTemplate?: boolean;
-  disableInstall?: boolean;
-  dependencies?: string[];
-}) {
+export default function WrappedApp(props: AppPageProps) {
  return (
    <Shell smallHeading isPublic hideHeadingOnMobile heading={<ShellHeading />} backPath="/apps" withoutSeo>
      <HeadSeo
@@ -380,116 +21,11 @@ export default function App(props: {
      />
      {props.licenseRequired ? (
        <LicenseRequired>
-          <Component {...props} />
+          <AppPage {...props} />
        </LicenseRequired>
      ) : (
-        <Component {...props} />
+        <AppPage {...props} />
      )}
    </Shell>
  );
 }
-
-const InstallAppButtonChild = ({
-  userAdminTeams,
-  addAppMutationInput,
-  appCategories,
-  multiInstall,
-  credentials,
-  ...props
-}: {
-  userAdminTeams?: UserAdminTeams;
-  addAppMutationInput: { type: App["type"]; variant: string; slug: string };
-  appCategories: string[];
-  multiInstall?: boolean;
-  credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
-} & ButtonProps) => {
-  const { t } = useLocale();
-  const router = useRouter();
-
-  const mutation = useAddAppMutation(null, {
-    onSuccess: (data) => {
-      if (data?.setupPending) return;
-      showToast(t("app_successfully_installed"), "success");
-    },
-    onError: (error) => {
-      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
-    },
-  });
-
-  if (!userAdminTeams?.length || appCategories.some((category) => ["calendar", "conferencing"].includes(category))) {
-    return <Button
-      data-testid="install-app-button"
-      {...props}
-      // @TODO: Overriding color and size prevent us from
-      // having to duplicate InstallAppButton for now.
-      color="primary"
-      size="base">
-      {multiInstall ? t("install_another") : t("install_app")}
-    </Button>
-
-  }
-
-  return (
-    <Dropdown>
-      <DropdownMenuTrigger asChild>
-        <Button
-          data-testid="install-app-button"
-          {...props}
-          // @TODO: Overriding color and size prevent us from
-          // having to duplicate InstallAppButton for now.
-          color="primary"
-          size="base">
-          {multiInstall ? t("install_another") : t("install_app")}
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuPortal>
-        <DropdownMenuContent
-          onInteractOutside={(event) => {
-            if (mutation.isLoading) event.preventDefault();
-          }}
-        >
-          {mutation.isLoading && (
-            <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-              <Spinner />
-            </div>
-          )}
-          <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
-          {userAdminTeams.map((team) => {
-
-            const isInstalled = credentials &&
-              credentials.some((credential) =>
-                credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id
-              )
-
-            return (
-              <DropdownItem
-                type="button"
-                data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
-                key={team.id}
-                disabled={
-                  isInstalled
-                }
-                StartIcon={(props) => (
-                  <Avatar
-                    alt={team.logo || ""}
-                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
-                    size="sm"
-                    {...props}
-                  />
-                )}
-                onClick={() => {
-                  mutation.mutate(
-                    team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
-                  );
-                }}>
-                <p>{team.name}{" "}
-                  {isInstalled &&
-                    `(${t("installed")})`}</p>
-              </DropdownItem>
-            )
-          })}
-        </DropdownMenuContent>
-      </DropdownMenuPortal>
-    </Dropdown>
-  );
-};
@@ -0,0 +1,367 @@
+import Link from "next/link";
+import type { IframeHTMLAttributes } from "react";
+import React, { useState } from "react";
+
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
+import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
+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 type { App as AppType } from "@calcom/types/App";
+import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
+
+import { InstallAppButtonChild } from "./InstallAppButtonChild";
+
+export type AppPageProps = {
+  name: string;
+  description: AppType["description"];
+  type: AppType["type"];
+  isGlobal?: AppType["isGlobal"];
+  logo: string;
+  slug: string;
+  variant: string;
+  body: React.ReactNode;
+  categories: string[];
+  author: string;
+  pro?: boolean;
+  price?: number;
+  commission?: number;
+  feeType?: AppType["feeType"];
+  docs?: string;
+  website?: string;
+  email: string; // required
+  tos?: string;
+  privacy?: string;
+  licenseRequired: AppType["licenseRequired"];
+  teamsPlanRequired: AppType["teamsPlanRequired"];
+  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
+  isTemplate?: boolean;
+  disableInstall?: boolean;
+  dependencies?: string[];
+  concurrentMeetings: AppType["concurrentMeetings"];
+};
+
+export const AppPage = ({
+  name,
+  type,
+  logo,
+  slug,
+  variant,
+  body,
+  categories,
+  author,
+  price = 0,
+  commission,
+  isGlobal = false,
+  feeType,
+  docs,
+  website,
+  email,
+  tos,
+  privacy,
+  teamsPlanRequired,
+  descriptionItems,
+  isTemplate,
+  dependencies,
+  concurrentMeetings,
+}: AppPageProps) => {
+  const { t, i18n } = useLocale();
+  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSettled(data) {
+        const credentialsCount = data?.credentials.length || 0;
+        setShowDisconnectIntegration(
+          data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
+        );
+        setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
+      },
+    }
+  );
+
+  const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
+    enabled: !!dependencies,
+  });
+
+  const disableInstall =
+    dependencyData.data && dependencyData.data.some((dependency) => !dependency.installed);
+
+  // const disableInstall = requiresGCal && !gCalInstalled.data;
+
+  // variant not other allows, an app to be shown in calendar category without requiring an actual calendar connection e.g. vimcal
+  // Such apps, can only be installed once.
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1 && variant !== "other";
+
+  return (
+    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
+      {hasDescriptionItems && (
+        <div className="align-center bg-subtle -ml-4 -mr-4 mb-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:-ml-8 md:-mr-8 md:mb-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
+          {descriptionItems ? (
+            descriptionItems.map((descriptionItem, index) =>
+              typeof descriptionItem === "object" ? (
+                <div
+                  key={`iframe-${index}`}
+                  className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
+                  <iframe allowFullScreen {...descriptionItem.iframe} />
+                </div>
+              ) : (
+                <img
+                  key={descriptionItem}
+                  src={descriptionItem}
+                  alt={`Screenshot of app ${name}`}
+                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
+                />
+              )
+            )
+          ) : (
+            <SkeletonText />
+          )}
+        </div>
+      )}
+      <div
+        className={classNames(
+          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
+          hasDescriptionItems && "lg:ml-8"
+        )}>
+        <div className="mb-8 flex pt-4">
+          <header>
+            <div className="mb-4 flex items-center">
+              <img
+                className={classNames(logo.includes("-dark") && "dark:invert", "min-h-16 min-w-16 h-16 w-16")}
+                src={logo}
+                alt={name}
+              />
+              <h1 className="font-cal text-emphasis ml-4 text-3xl">{name}</h1>
+            </div>
+            <h2 className="text-default text-sm font-medium">
+              <Link
+                href={`categories/${categories[0]}`}
+                className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
+                {categories[0]}
+              </Link>{" "}
+              •{" "}
+              <a target="_blank" rel="noreferrer" href={website}>
+                {t("published_by", { author })}
+              </a>
+            </h2>
+            {isTemplate && (
+              <Badge variant="red" className="mt-4">
+                Template - Available in Dev Environment only for testing
+              </Badge>
+            )}
+          </header>
+        </div>
+        {!appDbQuery.isLoading ? (
+          isGlobal ||
+          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+            <div className="flex space-x-3">
+              <Button StartIcon={Check} color="secondary" disabled>
+                {existingCredentials.length > 0
+                  ? t("active_install", { count: existingCredentials.length })
+                  : t("default")}
+              </Button>
+              {!isGlobal && (
+                <InstallAppButton
+                  type={type}
+                  disableInstall={disableInstall}
+                  teamsPlanRequired={teamsPlanRequired}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        ...props,
+                        onClick: () => {
+                          mutation.mutate({ type, variant, slug });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <InstallAppButtonChild
+                        appCategories={categories}
+                        userAdminTeams={appDbQuery.data?.userAdminTeams}
+                        addAppMutationInput={{ type, variant, slug }}
+                        multiInstall
+                        concurrentMeetings={concurrentMeetings}
+                        {...props}
+                      />
+                    );
+                  }}
+                />
+              )}
+            </div>
+          ) : showDisconnectIntegration ? (
+            <DisconnectIntegration
+              buttonProps={{ color: "secondary" }}
+              label={t("disconnect")}
+              credentialId={existingCredentials[0]}
+              onSuccess={() => {
+                appDbQuery.refetch();
+              }}
+            />
+          ) : (
+            <InstallAppButton
+              type={type}
+              disableInstall={disableInstall}
+              teamsPlanRequired={teamsPlanRequired}
+              render={({ useDefaultComponent, ...props }) => {
+                if (useDefaultComponent) {
+                  props = {
+                    ...props,
+                    onClick: () => {
+                      mutation.mutate({ type, variant, slug });
+                    },
+                    loading: mutation.isLoading,
+                  };
+                }
+                return (
+                  <InstallAppButtonChild
+                    appCategories={categories}
+                    userAdminTeams={appDbQuery.data?.userAdminTeams}
+                    addAppMutationInput={{ type, variant, slug }}
+                    credentials={appDbQuery.data?.credentials}
+                    concurrentMeetings={concurrentMeetings}
+                    {...props}
+                  />
+                );
+              }}
+            />
+          ))
+        ) : (
+          <SkeletonButton className="h-10 w-24" />
+        )}
+
+        {dependencies &&
+          (!dependencyData.isLoading ? (
+            <div className="mt-6">
+              <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
+            </div>
+          ) : (
+            <SkeletonButton className="mt-6 h-20 grow" />
+          ))}
+
+        {price !== 0 && (
+          <span className="block text-right">
+            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+            {feeType === "monthly" && "/" + t("month")}
+          </span>
+        )}
+
+        <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
+          {body}
+        </div>
+        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+        <span className="text-default">
+          {teamsPlanRequired ? (
+            t("teams_plan_required")
+          ) : price === 0 ? (
+            t("free_to_use_apps")
+          ) : (
+            <>
+              {Intl.NumberFormat(i18n.language, {
+                style: "currency",
+                currency: "USD",
+                useGrouping: false,
+              }).format(price)}
+              {feeType === "monthly" && "/" + t("month")}
+            </>
+          )}
+        </span>
+
+        <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
+        <ul className="prose-sm -ml-1 -mr-1 leading-5">
+          {docs && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis text-sm font-normal no-underline hover:underline"
+                href={docs}>
+                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
+                {t("documentation")}
+              </a>
+            </li>
+          )}
+          {website && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={website}>
+                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {website.replace("https://", "")}
+              </a>
+            </li>
+          )}
+          {email && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={"mailto:" + email}>
+                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+
+                {email}
+              </a>
+            </li>
+          )}
+          {tos && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={tos}>
+                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {t("terms_of_service")}
+              </a>
+            </li>
+          )}
+          {privacy && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-emphasis font-normal no-underline hover:underline"
+                href={privacy}>
+                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                {t("privacy_policy")}
+              </a>
+            </li>
+          )}
+        </ul>
+        <hr className="border-subtle my-8 border" />
+        <span className="leading-1 text-subtle block text-xs">
+          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
+        </span>
+        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
+          <Flag className="inline h-3 w-3" /> {t("report_app")}
+        </a>
+      </div>
+    </div>
+  );
+};
@@ -0,0 +1,124 @@
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
+import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
+import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import { CAL_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import type { AppFrontendPayload } from "@calcom/types/App";
+import type { ButtonProps } from "@calcom/ui";
+import {
+  Avatar,
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  showToast,
+} from "@calcom/ui";
+
+export const InstallAppButtonChild = ({
+  userAdminTeams,
+  addAppMutationInput,
+  appCategories,
+  multiInstall,
+  credentials,
+  concurrentMeetings,
+  ...props
+}: {
+  userAdminTeams?: UserAdminTeams;
+  addAppMutationInput: { type: AppFrontendPayload["type"]; variant: string; slug: string };
+  appCategories: string[];
+  multiInstall?: boolean;
+  credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
+  concurrentMeetings?: boolean;
+} & ButtonProps) => {
+  const { t } = useLocale();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: (data) => {
+      if (data?.setupPending) return;
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  if (!userAdminTeams?.length || !doesAppSupportTeamInstall(appCategories, concurrentMeetings)) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        {...props}
+        // @TODO: Overriding color and size prevent us from
+        // having to duplicate InstallAppButton for now.
+        color="primary"
+        size="base">
+        {multiInstall ? t("install_another") : t("install_app")}
+      </Button>
+    );
+  }
+
+  return (
+    <Dropdown>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="install-app-button"
+          {...props}
+          // @TODO: Overriding color and size prevent us from
+          // having to duplicate InstallAppButton for now.
+          color="primary"
+          size="base">
+          {multiInstall ? t("install_another") : t("install_app")}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          onInteractOutside={(event) => {
+            if (mutation.isLoading) event.preventDefault();
+          }}>
+          {mutation.isLoading && (
+            <div className="z-1 fixed inset-0 flex items-center justify-center">
+              <Spinner />
+            </div>
+          )}
+          <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
+          {userAdminTeams.map((team) => {
+            const isInstalled =
+              credentials &&
+              credentials.some((credential) =>
+                credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id
+              );
+
+            return (
+              <DropdownItem
+                type="button"
+                data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
+                key={team.id}
+                disabled={isInstalled}
+                StartIcon={(props) => (
+                  <Avatar
+                    alt={team.logo || ""}
+                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    size="sm"
+                    {...props}
+                  />
+                )}
+                onClick={() => {
+                  mutation.mutate(
+                    team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
+                  );
+                }}>
+                <p>
+                  {t(team.name)} {isInstalled && `(${t("installed")})`}
+                </p>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+};
@@ -1,9 +1,9 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import React from "react";

-import Shell from "@calcom/features/shell/Shell";
+import { ShellMain } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
 import { AlertCircle } from "@calcom/ui/components/icon";
@@ -12,7 +12,7 @@ type AppsLayoutProps = {
  children: React.ReactNode;
  actions?: (className?: string) => JSX.Element;
  emptyStore?: boolean;
-} & Omit<ComponentProps<typeof Shell>, "actions">;
+} & Omit<ComponentProps<typeof ShellMain>, "actions">;

 export default function AppsLayout({ children, actions, emptyStore, ...rest }: AppsLayoutProps) {
  const { t } = useLocale();
@@ -22,7 +22,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A

  if (session.status === "loading") return <></>;
  return (
-    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
+    <ShellMain {...rest} actions={actions?.("block")} hideHeadingOnMobile>
      <div className="flex flex-col xl:flex-row">
        <main className="w-full">
          {emptyStore ? (
@@ -38,7 +38,6 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
          )}
        </main>
      </div>
-    </Shell>
+    </ShellMain>
  );
 }
-export const getLayout = (page: React.ReactElement) => <AppsLayout>{page}</AppsLayout>;
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import React, { useEffect } from "react";

@@ -10,9 +10,9 @@ import { ErrorBoundary } from "@calcom/ui";

 export default function AdminLayout({
  children,
-
  ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const pathname = usePathname();
  const session = useSession();
  const router = useRouter();

@@ -23,7 +23,7 @@ export default function AdminLayout({
    }
  }, [session, router]);

-  const isAppsPage = router.asPath.startsWith("/settings/admin/apps");
+  const isAppsPage = pathname?.startsWith("/settings/admin/apps");
  return (
    <SettingsLayout {...rest}>
      <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
@@ -1,228 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import type { FC } from "react";
-import { useEffect, useState, useCallback } from "react";
-
-import type { Dayjs } from "@calcom/dayjs";
-import dayjs from "@calcom/dayjs";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
-import { TimeFormat } from "@calcom/lib/timeFormat";
-import { nameOfDay } from "@calcom/lib/weekday";
-import { trpc } from "@calcom/trpc/react";
-import type { Slot } from "@calcom/trpc/server/routers/viewer/slots/types";
-import { SkeletonContainer, SkeletonText, ToggleGroup } from "@calcom/ui";
-
-import classNames from "@lib/classNames";
-import { timeZone } from "@lib/clock";
-
-type AvailableTimesProps = {
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  eventTypeId: number;
-  recurringCount: number | undefined;
-  eventTypeSlug: string;
-  date?: Dayjs;
-  seatsPerTimeSlot?: number | null;
-  bookingAttendees?: number | null;
-  slots?: Slot[];
-  isLoading: boolean;
-  duration: number;
-};
-
-const AvailableTimes: FC<AvailableTimesProps> = ({
-  slots = [],
-  isLoading,
-  date,
-  eventTypeId,
-  eventTypeSlug,
-  recurringCount,
-  timeFormat,
-  onTimeFormatChange,
-  seatsPerTimeSlot,
-  bookingAttendees,
-  duration,
-}) => {
-  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
-  const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
-  const { t, i18n } = useLocale();
-  const router = useRouter();
-  const { rescheduleUid } = router.query;
-
-  const [brand, setBrand] = useState("#292929");
-
-  useEffect(() => {
-    setBrand(getComputedStyle(document.documentElement).getPropertyValue("--brand-color").trim());
-  }, []);
-  const isMobile = useMediaQuery("(max-width: 768px)");
-  const ref = useCallback(
-    (node: HTMLDivElement) => {
-      if (isMobile) {
-        node?.scrollIntoView({ behavior: "smooth" });
-      }
-    },
-    [isMobile]
-  );
-
-  const reserveSlot = (slot: Slot) => {
-    // Prevent double clicking
-    if (reserveSlotMutation.isLoading || reserveSlotMutation.isSuccess) {
-      return;
-    }
-    reserveSlotMutation.mutate({
-      slotUtcStartDate: slot.time,
-      eventTypeId,
-      slotUtcEndDate: dayjs(slot.time).utc().add(duration, "minutes").format(),
-      bookingUid: slot.bookingUid,
-    });
-  };
-
-  return (
-    <div ref={slotPickerRef}>
-      {!!date ? (
-        <div className="mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
-          <div className="mb-4 flex items-center text-left text-base">
-            <div className="mr-4">
-              <span className="text-emphasis font-semibold">
-                {nameOfDay(i18n.language, Number(date.format("d")), "short")}
-              </span>
-              <span className="text-subtle">
-                , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
-              </span>
-            </div>
-            <div className="ml-auto">
-              <ToggleGroup
-                onValueChange={(timeFormat) => onTimeFormatChange(timeFormat === "24")}
-                defaultValue={timeFormat === TimeFormat.TWELVE_HOUR ? "12" : "24"}
-                options={[
-                  { value: "12", label: t("12_hour_short") },
-                  { value: "24", label: t("24_hour_short") },
-                ]}
-              />
-            </div>
-          </div>
-          <div
-            ref={ref}
-            className="scroll-bar scrollbar-track-w-20 relative -mb-4 flex-grow overflow-y-auto sm:block md:h-[364px]">
-            {slots.length > 0 &&
-              slots.map((slot) => {
-                type BookingURL = {
-                  pathname: string;
-                  query: Record<string, string | number | string[] | undefined | TimeFormat>;
-                };
-                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,
-                    timeFormat,
-                    /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
-                    count: recurringCount && !rescheduleUid ? recurringCount : undefined,
-                  },
-                };
-
-                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;
-                }
-
-                let slotFull, notEnoughSeats;
-
-                if (slot.attendees && seatsPerTimeSlot) slotFull = slot.attendees >= seatsPerTimeSlot;
-                if (slot.attendees && bookingAttendees && seatsPerTimeSlot) {
-                  notEnoughSeats = slot.attendees + bookingAttendees > seatsPerTimeSlot;
-                }
-
-                const isHalfFull =
-                  slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.5;
-                const isNearlyFull =
-                  slot.attendees && seatsPerTimeSlot && slot.attendees / seatsPerTimeSlot >= 0.83;
-
-                const colorClass = isNearlyFull
-                  ? "text-rose-600"
-                  : isHalfFull
-                  ? "text-yellow-500"
-                  : "text-emerald-400";
-
-                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 && (slotFull || notEnoughSeats) ? (
-                      <div
-                        className={classNames(
-                          "text-default bg-default border-subtle mb-2 block rounded-sm border py-2 font-medium opacity-25",
-                          brand === "#fff" || brand === "#ffffff" ? "" : ""
-                        )}
-                        data-testid="time"
-                        data-disabled="true">
-                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {notEnoughSeats ? (
-                          <p className="text-sm">{t("not_enough_seats")}</p>
-                        ) : slots ? (
-                          <p className="text-sm">{t("booking_full")}</p>
-                        ) : null}
-                      </div>
-                    ) : (
-                      <Link
-                        href={bookingUrl}
-                        prefetch={false}
-                        className={classNames(
-                          " bg-default dark:bg-muted border-default hover:bg-subtle hover:border-brand-default text-emphasis mb-2 block rounded-md border py-2 text-sm font-medium",
-                          brand === "#fff" || brand === "#ffffff" ? "" : ""
-                        )}
-                        onClick={() => reserveSlot(slot)}
-                        data-testid="time"
-                        data-disabled="false">
-                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {!!seatsPerTimeSlot && (
-                          <p className={`${colorClass} text-sm`}>
-                            {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
-                            {seatsPerTimeSlot}{" "}
-                            {t("seats_available", {
-                              count: slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot,
-                            })}
-                          </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="text-emphasis my-6 text-xl">{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>
-  );
-};
-
-AvailableTimes.displayName = "AvailableTimes";
-
-export default AvailableTimes;
@@ -1,38 +0,0 @@
-import { i18n } from "next-i18next";
-import type { TFunction } from "next-i18next";
-
-import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { CreditCard } from "@calcom/ui/components/icon";
-
-const BookingDescriptionPayment = (props: {
-  eventType: Parameters<typeof getPaymentAppData>[0];
-  t: TFunction;
-  i18n: typeof i18n;
-}) => {
-  const paymentAppData = getPaymentAppData(props.eventType);
-  if (!paymentAppData || paymentAppData.price <= 0) return null;
-
-  const params = {
-    amount: paymentAppData.price / 100.0,
-    formatParams: { amount: { currency: paymentAppData.currency } },
-  };
-
-  return (
-    <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <CreditCard className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-      {paymentAppData.paymentOption === "HOLD" ? (
-        <>{props.t("no_show_fee_amount", params)}</>
-      ) : (
-        <>
-          {/* If undefined this will default to the browser locale */}
-          {new Intl.NumberFormat(i18n?.language, {
-            style: "currency",
-            currency: paymentAppData.currency,
-          }).format(paymentAppData.price / 100)}
-        </>
-      )}
-    </p>
-  );
-};
-
-export default BookingDescriptionPayment;
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";

 import type { EventLocationType } from "@calcom/app-store/locations";
@@ -158,7 +158,7 @@ function BookingListItem(booking: BookingItemProps) {
      id: "cancel",
      label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
      /* When cancelling we need to let the UI and the API know if the intention is to
-         cancel all remaining bookings or just that booking instance. */
+               cancel all remaining bookings or just that booking instance. */
      href: `/booking/${booking.uid}?cancel=true${
        isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
@@ -239,13 +239,18 @@ function BookingListItem(booking: BookingItemProps) {
    },
  });

-  const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => {
+  const saveLocation = (
+    newLocationType: EventLocationType["type"],
+    details: {
+      [key: string]: string;
+    }
+  ) => {
    let newLocation = newLocationType as string;
    const eventLocationType = getEventLocationType(newLocationType);
    if (eventLocationType?.organizerInputType) {
      newLocation = details[Object.keys(details)[0]];
    }
-    setLocationMutation.mutate({ bookingId: booking.id, newLocation });
+    setLocationMutation.mutate({ bookingId: booking.id, newLocation, details });
  };

  // Getting accepted recurring dates to show
@@ -255,13 +260,11 @@ function BookingListItem(booking: BookingItemProps) {
    .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());

  const onClickTableData = () => {
-    router.push({
-      pathname: `/booking/${booking.uid}`,
-      query: {
-        allRemainingBookings: isTabRecurring,
-        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
-      },
+    const urlSearchParams = new URLSearchParams({
+      allRemainingBookings: isTabRecurring.toString(),
    });
+    if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
+    router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`);
  };

  const title = booking.title;
@@ -283,6 +286,7 @@ function BookingListItem(booking: BookingItemProps) {
        saveLocation={saveLocation}
        isOpenDialog={isOpenSetLocationDialog}
        setShowLocationModal={setIsOpenLocationDialog}
+        teamId={booking.eventType?.team?.id}
      />
      {booking.paid && booking.payment[0] && (
        <ChargeCardDialog
@@ -364,7 +368,7 @@ function BookingListItem(booking: BookingItemProps) {
                {t("error_collecting_card")}
              </Badge>
            ) : booking.paid ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="green">
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
              </Badge>
            ) : null}
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -26,6 +26,9 @@ type Props = {
 };

 export default function CancelBooking(props: Props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const asPath = `${pathname}?${searchParams.toString()}`;
  const [cancellationReason, setCancellationReason] = useState<string>("");
  const { t } = useLocale();
  const router = useRouter();
@@ -97,7 +100,7 @@ export default function CancelBooking(props: Props) {
                  });

                  if (res.status >= 200 && res.status < 300) {
-                    await router.replace(router.asPath);
+                    router.replace(asPath);
                  } else {
                    setLoading(false);
                    setError(
@@ -1,198 +0,0 @@
-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,
-  bookingAttendees,
-  weekStart = 0,
-}: {
-  eventType: Pick<
-    EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
-    "id" | "schedulingType" | "slug" | "length" | "metadata"
-  >;
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  timeZone?: string;
-  seatsPerTimeSlot?: number;
-  bookingAttendees?: number;
-  recurringEventCount?: number;
-  users: string[];
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-}) => {
-  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: dayjs().startOf("day"),
-    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-4 lg:min-w-[455px]",
-          selectedDate ? " border-subtle 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}
-        bookingAttendees={bookingAttendees}
-        recurringCount={recurringEventCount}
-        duration={parseInt(duration)}
-      />
-    </>
-  );
-};
@@ -1,41 +0,0 @@
-import type { FC } from "react";
-import { useEffect, useState } from "react";
-
-import type { ITimezoneOption } from "@calcom/ui";
-import { TimezoneSelect } from "@calcom/ui";
-
-import { timeZone } from "../../lib/clock";
-
-type Props = {
-  onSelectTimeZone: (selectedTimeZone: string) => void;
-};
-
-const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
-  const [selectedTimeZone, setSelectedTimeZone] = useState("");
-
-  useEffect(() => {
-    setSelectedTimeZone(timeZone());
-  }, []);
-
-  useEffect(() => {
-    if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
-      onSelectTimeZone(timeZone(selectedTimeZone));
-    }
-  }, [selectedTimeZone, onSelectTimeZone]);
-
-  return !!selectedTimeZone ? (
-    <TimezoneSelect
-      id="timeZone"
-      classNames={{
-        singleValue: () => "text-default",
-        dropdownIndicator: () => "text-default",
-        menu: () => "!w-64 max-w-[90vw] shadow-dropdown bg-default border-subtle border rounded-md mt-1",
-      }}
-      variant="minimal"
-      value={selectedTimeZone}
-      onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-    />
-  ) : null;
-};
-
-export default TimeOptions;
@@ -1,26 +0,0 @@
-import { Globe } 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:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-      </div>
-    </>
-  );
-}
@@ -1,44 +0,0 @@
-import { CAL_URL } from "@calcom/lib/constants";
-import type { AvatarGroupProps } from "@calcom/ui";
-import { AvatarGroup } from "@calcom/ui";
-
-export const UserAvatars = ({
-  profile,
-  users,
-  ...props
-}: {
-  profile: { image: string | null; name?: string | null; username?: string | null };
-  showMembers: boolean;
-  users: { username: string | null; name?: string | null }[];
-} & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
-  const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
-  return (
-    <AvatarGroup
-      items={
-        [
-          {
-            image: profile.image,
-            alt: profile.name,
-            title: profile.name,
-            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
-          },
-          ...(showMembers
-            ? users.map((user) => ({
-                title: user.name,
-                image: `${CAL_URL}/${user.username}/avatar.png`,
-                alt: user.name || undefined,
-                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
-              }))
-            : []),
-        ].filter((item) => !!item.image) as {
-          image: string;
-          alt?: string;
-          title?: string;
-          href?: string;
-        }[]
-      }
-      size="sm"
-      truncateAfter={props.truncateAfter}
-    />
-  );
-};
@@ -104,6 +104,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
    phone: z.string().optional().nullable(),
    locationAddress: z.string().optional(),
    credentialId: z.number().optional(),
+    teamName: z.string().optional(),
    locationLink: z
      .string()
      .optional()
@@ -298,8 +299,19 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                }

                if (values.credentialId) {
-                  details = { ...details, credentialId: values.credentialId };
+                  details = {
+                    ...details,
+                    credentialId: values.credentialId,
+                  };
                }
+
+                if (values.teamName) {
+                  details = {
+                    ...details,
+                    teamName: values.teamName,
+                  };
+                }
+
                saveLocation(newLocation, details);
                setShowLocationModal(false);
                setSelectedLocation?.(undefined);
@@ -344,6 +356,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                            onChange={(val) => {
                              if (val) {
                                locationFormMethods.setValue("locationType", val.value);
+                                if (val.credential) {
+                                  locationFormMethods.setValue("credentialId", val.credential.id);
+                                  locationFormMethods.setValue("teamName", val.credential.team?.name);
+                                }
+
                                locationFormMethods.unregister([
                                  "locationLink",
                                  "locationAddress",
@@ -25,6 +25,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import {
+  Alert,
  Button,
  CheckboxField,
  Label,
@@ -32,9 +33,9 @@ import {
  showToast,
  TextField,
  Tooltip,
-  Alert,
 } from "@calcom/ui";
-import { Edit, Copy } from "@calcom/ui/components/icon";
+import { Copy, Edit } from "@calcom/ui/components/icon";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";

 import RequiresConfirmationController from "./RequiresConfirmationController";

@@ -204,6 +205,21 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        onRequiresConfirmation={setRequiresConfirmation}
      />
      <hr className="border-subtle" />
+      <Controller
+        name="requiresBookerEmailVerification"
+        control={formMethods.control}
+        defaultValue={eventType.requiresBookerEmailVerification}
+        render={({ field: { value, onChange } }) => (
+          <SettingsToggle
+            title={t("requires_booker_email_verification")}
+            {...shouldLockDisableProps("requiresBookerEmailVerification")}
+            description={t("description_requires_booker_email_verification")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+          />
+        )}
+      />
+      <hr className="border-subtle" />
      <Controller
        name="hideCalendarNotes"
        control={formMethods.control}
@@ -271,36 +287,38 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
        }}>
        {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
        <div className="lg:-ml-2">
-          <TextField
-            disabled
-            name="hashedLink"
-            label={t("private_link_label")}
-            data-testid="generated-hash-url"
-            labelSrOnly
-            type="text"
-            hint={t("private_link_hint")}
-            defaultValue={placeholderHashedLink}
-            addOnSuffix={
-              <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
-                <Button
-                  color="minimal"
-                  size="sm"
-                  type="button"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-                  aria-label="copy link"
-                  onClick={() => {
-                    navigator.clipboard.writeText(placeholderHashedLink);
-                    if (eventType.hashedLink) {
-                      showToast(t("private_link_copied"), "success");
-                    } else {
-                      showToast(t("enabled_after_update_description"), "warning");
-                    }
-                  }}>
-                  <Copy className="h-4 w-4" />
-                </Button>
-              </Tooltip>
-            }
-          />
+          {!IS_VISUAL_REGRESSION_TESTING && (
+            <TextField
+              disabled
+              name="hashedLink"
+              label={t("private_link_label")}
+              data-testid="generated-hash-url"
+              labelSrOnly
+              type="text"
+              hint={t("private_link_hint")}
+              defaultValue={placeholderHashedLink}
+              addOnSuffix={
+                <Tooltip content={eventType.hashedLink ? t("copy_to_clipboard") : t("enabled_after_update")}>
+                  <Button
+                    color="minimal"
+                    size="sm"
+                    type="button"
+                    className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                    aria-label="copy link"
+                    onClick={() => {
+                      navigator.clipboard.writeText(placeholderHashedLink);
+                      if (eventType.hashedLink) {
+                        showToast(t("private_link_copied"), "success");
+                      } else {
+                        showToast(t("enabled_after_update_description"), "warning");
+                      }
+                    }}>
+                    <Copy className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+              }
+            />
+          )}
        </div>
      </SettingsToggle>
      <hr className="border-subtle" />
@@ -323,6 +341,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                  toggleGuests(false);
                  formMethods.setValue("requiresConfirmation", false);
                  setRequiresConfirmation(false);
+                  formMethods.setValue("metadata.multipleDuration", undefined);
                  formMethods.setValue("seatsPerTimeSlot", 2);
                } else {
                  formMethods.setValue("seatsPerTimeSlot", null);
@@ -138,7 +138,7 @@ const EventTypeScheduleDetails = memo(
            <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
            {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
          </span>
-          {!!schedule?.id && !schedule.isManaged && (
+          {!!schedule?.id && !schedule.isManaged && !schedule.readOnly && (
            <Button
              href={`/availability/${schedule.id}`}
              disabled={isLoading}
@@ -202,6 +202,15 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
          isManaged: false,
        });
      }
+      // We push the selected schedule from the event type if it's not part of the list response. This happens if the user is an admin but not the schedule owner.
+      else if (eventType.schedule && !schedules.find((schedule) => schedule.id === eventType.schedule)) {
+        options.push({
+          value: eventType.schedule,
+          label: eventType.scheduleName ?? t("default_schedule_name"),
+          isDefault: false,
+          isManaged: false,
+        });
+      }

      setOptions(options);

@@ -13,6 +13,7 @@ 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 { ascendingLimitKeys, intervalLimitKeyToUnit } from "@calcom/lib/intervalLimit";
 import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
@@ -462,7 +463,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
          type="number"
          {...offsetStartLockedProps}
          label={t("offset_start")}
-          defaultValue={eventType.offsetStart}
          {...formMethods.register("offsetStart")}
          addOnSuffix={<>{t("minutes")}</>}
          hint={t("offset_start_description", {
@@ -477,11 +477,9 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy

 type IntervalLimitsKey = keyof IntervalLimit;

-const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const;
-
-const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({
+const INTERVAL_LIMIT_OPTIONS = ascendingLimitKeys.map((key) => ({
  value: key as keyof IntervalLimit,
-  label: `Per ${key.split("_")[1].toLocaleLowerCase()}`,
+  label: `Per ${intervalLimitKeyToUnit(key)}`,
 }));

 type IntervalLimitItemProps = {
@@ -590,8 +588,8 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
              Object.entries(currentIntervalLimits)
                .sort(([limitKeyA], [limitKeyB]) => {
                  return (
-                    intervalOrderKeys.indexOf(limitKeyA as IntervalLimitsKey) -
-                    intervalOrderKeys.indexOf(limitKeyB as IntervalLimitsKey)
+                    ascendingLimitKeys.indexOf(limitKeyA as IntervalLimitsKey) -
+                    ascendingLimitKeys.indexOf(limitKeyB as IntervalLimitsKey)
                  );
                })
                .map(([key, value]) => {
@@ -12,6 +12,7 @@ import { z } from "zod";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import cx from "@calcom/lib/classNames";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -116,6 +117,8 @@ export const EventSetupTab = (
  const [editingLocationType, setEditingLocationType] = useState<string>("");
  const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
  const [multipleDuration, setMultipleDuration] = useState(eventType.metadata?.multipleDuration);
+  const orgBranding = useOrgBranding();
+  const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");

  const locationOptions = props.locationOptions.map((locationOption) => {
    const options = locationOption.options.filter((option) => {
@@ -129,10 +132,12 @@ export const EventSetupTab = (
    };
  });

-  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
-    value: mins,
-    label: t("multiple_duration_mins", { count: mins }),
-  }));
+  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 150, 180].map(
+    (mins) => ({
+      value: mins,
+      label: t("multiple_duration_mins", { count: mins }),
+    })
+  );

  const [selectedMultipleDuration, setSelectedMultipleDuration] = useState<
    MultiValue<{
@@ -306,7 +311,9 @@ export const EventSetupTab = (
                        )}
                        alt={`${eventLocationType.label} logo`}
                      />
-                      <span className="ms-1 line-clamp-1 text-sm">{eventLabel}</span>
+                      <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${
+                        location.teamName ? `(${location.teamName})` : ""
+                      }`}</span>
                    </div>
                    <div className="flex">
                      <button
@@ -381,6 +388,9 @@ export const EventSetupTab = (

  const lengthLockedProps = shouldLockDisableProps("length");
  const descriptionLockedProps = shouldLockDisableProps("description");
+  const urlPrefix = orgBranding
+    ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
+    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;

  return (
    <div>
@@ -409,10 +419,10 @@ export const EventSetupTab = (
          defaultValue={eventType.slug}
          addOnLeading={
            <>
-              {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
+              {urlPrefix}/
              {!isManagedEventType
                ? team
-                  ? "team/" + team.slug
+                  ? (orgBranding ? "" : "team/") + team.slug
                  : eventType.users[0].username
                : t("username_placeholder")}
              /
@@ -499,6 +509,8 @@ export const EventSetupTab = (
            <SettingsToggle
              title={t("allow_booker_to_select_duration")}
              checked={multipleDuration !== undefined}
+              disabled={seatsEnabled}
+              tooltip={seatsEnabled ? t("seat_options_doesnt_multiple_durations") : undefined}
              onCheckedChange={() => {
                if (multipleDuration !== undefined) {
                  setMultipleDuration(undefined);
@@ -1,3 +1,5 @@
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
@@ -99,6 +101,7 @@ const CheckedHostField = ({
  isFixed,
  value,
  onChange,
+  helperText,
  ...rest
 }: {
  labelText: string;
@@ -107,6 +110,7 @@ const CheckedHostField = ({
  value: { isFixed: boolean; userId: number }[];
  onChange?: (options: { isFixed: boolean; userId: number }[]) => void;
  options?: Options<CheckedSelectOption>;
+  helperText?: React.ReactNode | string;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
  return (
    <div className="bg-muted flex flex-col space-y-5 p-4">
@@ -136,11 +140,24 @@ const CheckedHostField = ({
          placeholder={placeholder}
          {...rest}
        />
+        {helperText && <p className="text-subtle text-sm">{helperText}</p>}
      </div>
    </div>
  );
 };

+const FixedHostHelper = (
+  <Trans i18nKey="fixed_host_helper">
+    Add anyone who needs to attend the event.
+    <Link
+      className="underline underline-offset-2"
+      target="_blank"
+      href="https://cal.com/docs/enterprise-features/teams/round-robin-scheduling#fixed-hosts">
+      Learn more
+    </Link>
+  </Trans>
+);
+
 const RoundRobinHosts = ({
  teamMembers,
  value,
@@ -167,6 +184,7 @@ const RoundRobinHosts = ({
        value={value}
        placeholder={t("add_fixed_hosts")}
        labelText={t("fixed_hosts")}
+        helperText={FixedHostHelper}
      />
      <CheckedHostField
        options={teamMembers.sort(sortByLabel)}
@@ -175,6 +193,7 @@ const RoundRobinHosts = ({
        isFixed={false}
        placeholder={t("add_attendees")}
        labelText={t("round_robin_hosts")}
+        helperText={t("round_robin_helper")}
      />
    </>
  );
@@ -1,13 +1,14 @@
 import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";

 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -51,7 +52,6 @@ import {
  Loader,
 } from "@calcom/ui/components/icon";

-import { EmbedButton, EmbedDialog } from "@components/Embed";
 import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";

 type Props = {
@@ -148,7 +148,7 @@ function EventTypeSingleLayout({
    onSuccess: async () => {
      await utils.viewer.eventTypes.invalidate();
      showToast(t("event_type_deleted_successfully"), "success");
-      await router.push("/event-types");
+      router.push("/event-types");
      setDeleteDialogOpen(false);
    },
    onError: (err) => {
@@ -310,7 +310,7 @@ function EventTypeSingleLayout({
                    showToast("Link copied!", "success");
                  }}
                />
-                <EmbedButton
+                <EventTypeEmbedButton
                  embedUrl={encodeURIComponent(embedLink)}
                  StartIcon={Code}
                  color="secondary"
@@ -450,7 +450,7 @@ function EventTypeSingleLayout({
          </p>
        </ConfirmationDialogContent>
      </Dialog>
-      <EmbedDialog />
+      <EventTypeEmbedDialog />
    </Shell>
  );
 }
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";

 import { Schedule } from "@calcom/features/schedules";
@@ -21,12 +20,11 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
  const { t } = useLocale();
  const { nextStep } = props;

-  const router = useRouter();
-
+  const scheduleId = defaultScheduleId === null ? undefined : defaultScheduleId;
  const queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
-    { scheduleId: defaultScheduleId! },
+    { scheduleId },
    {
-      enabled: router.isReady && !!defaultScheduleId,
+      enabled: !!scheduleId,
    }
  );

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -12,9 +12,6 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
      showToast(t("your_user_profile_updated_successfully"), "success");
      await utils.viewer.me.invalidate();
    },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
  });

  return (
@@ -94,7 +94,12 @@ const DisableTwoFactorAuthModal = ({
            <Button color="secondary" onClick={onCancel}>
              {t("cancel")}
            </Button>
-            <Button type="submit" className="me-2 ms-2" data-testid="disable-2fa" disabled={isDisabling}>
+            <Button
+              type="submit"
+              className="me-2 ms-2"
+              data-testid="disable-2fa"
+              loading={isDisabling}
+              disabled={isDisabling}>
              {t("disable")}
            </Button>
          </DialogFooter>
@@ -194,6 +194,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
                type="submit"
                className="me-2 ms-2"
                onClick={handleSetup}
+                loading={isSubmitting}
                disabled={password.length === 0 || isSubmitting}>
                {t("continue")}
              </Button>
@@ -208,7 +209,12 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
              </Button>
            </WithStep>
            <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="me-2 ms-2" data-testid="enable-2fa" disabled={isSubmitting}>
+              <Button
+                type="submit"
+                className="me-2 ms-2"
+                data-testid="enable-2fa"
+                loading={isSubmitting}
+                disabled={isSubmitting}>
                {t("enable")}
              </Button>
            </WithStep>
@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+// eslint-disable-next-line no-restricted-imports
 import { noop } from "lodash";
 import { useCallback, useState } from "react";
 import { Controller, FormProvider, useForm, useFormState } from "react-hook-form";
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -1,25 +1,24 @@
 import Link from "next/link";
-import { useRouter } from "next/router";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";

-type TeamType = NonNullable<TeamWithMembers>;
+type TeamType = Omit<NonNullable<TeamWithMembers>, "inviteToken">;
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number] & { safeBio: string | null };
-
 type TeamTypeWithSafeHtml = Omit<TeamType, "members" | "inviteToken"> & { members: MemberType[] };

 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
+  const routerQuery = useRouterQuery();
  const { t } = useLocale();
-  const router = useRouter();
  const isBioEmpty = !member.bio || !member.bio.replace("<p><br></p>", "").length;

  // We don't want to forward orgSlug and user which are route params to the next route
-  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = router.query;
+  const { slug: _slug, orgSlug: _orgSlug, user: _user, ...queryParamsToForward } = routerQuery;

  return (
    <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
@@ -1,7 +1,8 @@
 import classNames from "classnames";
+// eslint-disable-next-line no-restricted-imports
 import { debounce, noop } from "lodash";
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";

@@ -14,7 +15,7 @@ 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, Input, Label } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Input, Label } from "@calcom/ui";
 import { Check, Edit2, ExternalLink, Star as StarSolid } from "@calcom/ui/components/icon";

 export enum UsernameChangeStatusEnum {
@@ -46,8 +47,11 @@ const obtainNewUsernameChangeCondition = ({
 };

 const PremiumTextfield = (props: ICustomUsernameProps) => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const router = useRouter();
  const { t } = useLocale();
-  const { data: session, update } = useSession();
+  const { update } = useSession();
  const {
    currentUsername,
    setCurrentUsername = noop,
@@ -61,8 +65,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
  const [user] = trpc.viewer.me.useSuspenseQuery();
  const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
  const [markAsError, setMarkAsError] = useState(false);
-  const router = useRouter();
-  const { paymentStatus: recentAttemptPaymentStatus } = router.query;
+  const recentAttemptPaymentStatus = searchParams?.get("recentAttemptPaymentStatus");
  const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
  const { data: stripeCustomer } = trpc.viewer.stripeCustomer.useQuery();
  const isCurrentUsernamePremium =
@@ -92,19 +95,15 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
    debouncedApiCall(inputUsernameValue);
  }, [debouncedApiCall, inputUsernameValue]);

-  const utils = trpc.useContext();
  const updateUsername = trpc.viewer.updateProfile.useMutation({
    onSuccess: async () => {
      onSuccessMutation && (await onSuccessMutation());
-      await update();
+      await update({ username: inputUsernameValue });
      setOpenDialogSaveUsername(false);
    },
    onError: (error) => {
      onErrorMutation && onErrorMutation(error);
    },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
  });

  // when current username isn't set - Go to stripe to check what username he wanted to buy and was it a premium and was it paid for
@@ -120,7 +119,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {

  const paymentLink = `/api/integrations/stripepayment/subscription?intentUsername=${
    inputUsernameValue || usernameFromStripe
-  }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${router.asPath}`;
+  }&action=${usernameChangeCondition}&callbackUrl=${WEBAPP_URL}${pathname}`;

  const ActionButtons = () => {
    if (paymentRequired) {
@@ -223,7 +222,11 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
            onChange={(event) => {
              event.preventDefault();
              // Reset payment status
-              delete router.query.paymentStatus;
+              const _searchParams = new URLSearchParams(searchParams);
+              _searchParams.delete("paymentStatus");
+              if (searchParams.toString() !== _searchParams.toString()) {
+                router.replace(`${pathname}?${_searchParams.toString()}`);
+              }
              setInputUsernameValue(event.target.value);
            }}
            data-testid="username-input"
@@ -284,7 +287,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
            </div>
          </div>

-          <div className="mt-4 flex flex-row-reverse gap-x-2">
+          <DialogFooter className="mt-4">
            {/* redirect to checkout */}
            {usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
              <Button
@@ -312,7 +315,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
            <DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
              {t("cancel")}
            </DialogClose>
-          </div>
+          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
@@ -1,4 +1,5 @@
 import classNames from "classnames";
+// eslint-disable-next-line no-restricted-imports
 import { debounce, noop } from "lodash";
 import { useSession } from "next-auth/react";
 import type { RefCallback } from "react";
@@ -9,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, TextField } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter } from "@calcom/ui";
 import { Check, Edit2 } from "@calcom/ui/components/icon";

 interface ICustomUsernameProps {
@@ -24,7 +25,8 @@ interface ICustomUsernameProps {

 const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.ComponentProps<typeof TextField>>) => {
  const { t } = useLocale();
-  const { data: session, update } = useSession();
+  const { update } = useSession();
+
  const {
    currentUsername,
    setCurrentUsername = noop,
@@ -64,21 +66,16 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
    }
  }, [inputUsernameValue, debouncedApiCall, currentUsername]);

-  const utils = trpc.useContext();
-
  const updateUsernameMutation = trpc.viewer.updateProfile.useMutation({
    onSuccess: async () => {
      onSuccessMutation && (await onSuccessMutation());
      setOpenDialogSaveUsername(false);
      setCurrentUsername(inputUsernameValue);
-      await update();
+      await update({ username: inputUsernameValue });
    },
    onError: (error) => {
      onErrorMutation && onErrorMutation(error);
    },
-    async onSettled() {
-      await utils.viewer.public.i18n.invalidate();
-    },
  });

  const ActionButtons = () => {
@@ -175,7 +172,8 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
              </div>
            </div>
          </div>
-          <div className="ml-4 mt-4 flex flex-row-reverse gap-x-2">
+
+          <DialogFooter className="mt-4">
            <Button
              type="button"
              loading={updateUsernameMutation.isLoading}
@@ -187,7 +185,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
            <DialogClose color="secondary" onClick={() => setOpenDialogSaveUsername(false)}>
              {t("cancel")}
            </DialogClose>
-          </div>
+          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
@@ -1,46 +1,37 @@
-import { useRouter } from "next/router";
+import dynamic from "next/dynamic";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";

-import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 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 useRouterQuery from "@lib/hooks/useRouterQuery";

-import { PremiumTextfield } from "./PremiumTextfield";
-import { UsernameTextfield } from "./UsernameTextfield";
-
-export const UsernameAvailability = IS_SELF_HOSTED ? UsernameTextfield : PremiumTextfield;
-
 interface UsernameAvailabilityFieldProps {
  onSuccessMutation?: () => void;
  onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
 }

-function useUserNamePrefix(organization: RouterOutputs["viewer"]["me"]["organization"]): string {
-  return organization
-    ? organization.slug
-      ? getOrgFullDomain(organization.slug, { protocol: false })
-      : organization.metadata && organization.metadata.requestedSlug
-      ? getOrgFullDomain(organization.metadata.requestedSlug, { protocol: false })
-      : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")
-    : process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "");
-}
+export const getUsernameAvailabilityComponent = (isPremium: boolean) => {
+  if (isPremium)
+    return dynamic(() => import("./PremiumTextfield").then((m) => m.PremiumTextfield), { ssr: false });
+  return dynamic(() => import("./UsernameTextfield").then((m) => m.UsernameTextfield), { ssr: false });
+};

 export const UsernameAvailabilityField = ({
  onSuccessMutation,
  onErrorMutation,
 }: UsernameAvailabilityFieldProps) => {
-  const router = useRouter();
+  const searchParams = useSearchParams();
  const [user] = trpc.viewer.me.useSuspenseQuery();
  const [currentUsernameState, setCurrentUsernameState] = useState(user.username || "");
  const { username: usernameFromQuery, setQuery: setUsernameFromQuery } = useRouterQuery("username");
  const { username: currentUsername, setQuery: setCurrentUsername } =
-    router.query["username"] && user.username === null
+    searchParams?.get("username") && user.username === null
      ? { username: usernameFromQuery, setQuery: setUsernameFromQuery }
      : { username: currentUsernameState || "", setQuery: setCurrentUsernameState };
  const formMethods = useForm({
@@ -49,7 +40,12 @@ export const UsernameAvailabilityField = ({
    },
  });

-  const usernamePrefix = useUserNamePrefix(user.organization);
+  const UsernameAvailability = getUsernameAvailabilityComponent(!IS_SELF_HOSTED && !user.organization?.id);
+  const orgBranding = useOrgBranding();
+
+  const usernamePrefix = orgBranding
+    ? orgBranding?.fullDomain.replace(/^(https?:|)\/\//, "")
+    : `${CAL_URL?.replace(/^(https?:|)\/\//, "")}`;

  return (
    <Controller
@@ -65,7 +61,8 @@ export const UsernameAvailabilityField = ({
            setInputUsernameValue={onChange}
            onSuccessMutation={onSuccessMutation}
            onErrorMutation={onErrorMutation}
-            addOnLeading={usernamePrefix}
+            disabled={!!user.organization?.id}
+            addOnLeading={`${usernamePrefix}/`}
          />
        );
      }}
@@ -2,6 +2,7 @@ import type { GroupBase, Props, SingleValue } from "react-select";
 import { components } from "react-select";

 import type { EventLocationType } from "@calcom/app-store/locations";
+import type { CredentialDataWithTeamName } from "@calcom/app-store/utils";
 import { classNames } from "@calcom/lib";
 import cx from "@calcom/lib/classNames";
 import { Select } from "@calcom/ui";
@@ -12,6 +13,7 @@ export type LocationOption = {
  icon?: string;
  disabled?: boolean;
  address?: string;
+  credential?: CredentialDataWithTeamName;
 };

 export type SingleValueLocationOption = SingleValue<LocationOption>;
@@ -0,0 +1 @@
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);
@@ -1,13 +1,12 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { SessionProvider } from "next-auth/react";
-import { useSession } from "next-auth/react";
+import type { Session } from "next-auth";
+import { SessionProvider, useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
 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 type { NextRouter } from "next/router";
-import { useRouter } from "next/router";
+import type { ParsedUrlQuery } from "querystring";
 import type { ComponentProps, PropsWithChildren, ReactNode } from "react";

 import { OrgBrandingProvider } from "@calcom/features/ee/organizations/context/provider";
@@ -18,25 +17,32 @@ import { useFlags } from "@calcom/features/flags/hooks";
 import { trpc } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui";

-import usePublicPage from "@lib/hooks/usePublicPage";
+import useIsBookingPage from "@lib/hooks/useIsBookingPage";
 import type { WithNonceProps } from "@lib/withNonce";

-import { useViewerI18n } from "@components/I18nLanguageHandler";
+import { useClientViewerI18n } from "@components/I18nLanguageHandler";

-const I18nextAdapter = appWithTranslation<NextJsAppProps<SSRConfig> & { children: React.ReactNode }>(
-  ({ children }) => <>{children}</>
-);
+const I18nextAdapter = appWithTranslation<
+  NextJsAppProps<SSRConfig> & {
+    children: React.ReactNode;
+  }
+>(({ children }) => <>{children}</>);

 // Workaround for https://github.com/vercel/next.js/issues/8592
 export type AppProps = Omit<
-  NextAppProps<WithNonceProps & { themeBasis?: string } & Record<string, unknown>>,
+  NextAppProps<
+    WithNonceProps & {
+      themeBasis?: string;
+      session: Session;
+    } & Record<string, unknown>
+  >,
  "Component"
 > & {
  Component: NextAppProps["Component"] & {
    requiresLicense?: boolean;
    isThemeSupported?: boolean;
-    isBookingPage?: boolean | ((arg: { router: NextRouter }) => boolean);
-    getLayout?: (page: React.ReactElement, router: NextRouter) => ReactNode;
+    isBookingPage?: boolean | ((arg: { router: NextAppProps["router"] }) => boolean);
+    getLayout?: (page: React.ReactElement, router: NextAppProps["router"]) => ReactNode;
    PageWrapper?: (props: AppProps) => JSX.Element;
  };

@@ -48,7 +54,7 @@ type AppPropsWithChildren = AppProps & {
  children: ReactNode;
 };

-const getEmbedNamespace = (query: ReturnType<typeof useRouter>["query"]) => {
+const getEmbedNamespace = (query: ParsedUrlQuery) => {
  // Mostly embed query param should be available on server. Use that there.
  // Use the most reliable detection on client
  return typeof window !== "undefined" ? window.getEmbedNamespace() : (query.embed as string) || null;
@@ -62,11 +68,9 @@ type AppPropsWithoutNonce = Omit<AppPropsWithChildren, "pageProps"> & {
 const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
  /**
   * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
-   * We intend to not cache i18n query
   **/
-  const { i18n, locale } = useViewerI18n().data ?? {
-    locale: "en",
-  };
+  const clientViewerI18n = useClientViewerI18n(props.router.locales || []);
+  const { i18n, locale } = clientViewerI18n.data || {};

  const passedProps = {
    ...props,
@@ -76,6 +80,7 @@ const CustomI18nextProvider = (props: AppPropsWithoutNonce) => {
    },
    router: locale ? { locale } : props.router,
  } as unknown as ComponentProps<typeof I18nextAdapter>;
+
  return <I18nextAdapter {...passedProps} />;
 };

@@ -89,20 +94,19 @@ const enum ThemeSupport {
 }

 type CalcomThemeProps = PropsWithChildren<
-  Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
+  Pick<AppProps, "router"> &
+    Pick<AppProps["pageProps"], "nonce" | "themeBasis"> &
    Pick<AppProps["Component"], "isBookingPage" | "isThemeSupported">
 >;
 const CalcomThemeProvider = (props: CalcomThemeProps) => {
-  const router = useRouter();
-
  // Use namespace of embed to ensure same namespaced embed are displayed with same theme. This allows different embeds on the same website to be themed differently
  // One such example is our Embeds Demo and Testing page at http://localhost:3100
  // Having `getEmbedNamespace` defined on window before react initializes the app, ensures that embedNamespace is available on the first mount and can be used as part of storageKey
-  const embedNamespace = getEmbedNamespace(router.query);
+  const embedNamespace = getEmbedNamespace(props.router.query);
  const isEmbedMode = typeof embedNamespace === "string";

  return (
-    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace, router })}>
+    <ThemeProvider {...getThemeProviderProps({ props, isEmbedMode, embedNamespace })}>
      {/* Embed Mode can be detected reliably only on client side here as there can be static generated pages as well which can't determine if it's embed mode at backend */}
      {/* color-scheme makes background:transparent not work in iframe which is required by embed. */}
      {typeof window !== "undefined" && !isEmbedMode && (
@@ -148,16 +152,14 @@ function getThemeProviderProps({
  props,
  isEmbedMode,
  embedNamespace,
-  router,
 }: {
  props: Omit<CalcomThemeProps, "children">;
  isEmbedMode: boolean;
  embedNamespace: string | null;
-  router: NextRouter;
 }) {
  const isBookingPage = (() => {
    if (typeof props.isBookingPage === "function") {
-      return props.isBookingPage({ router: router });
+      return props.isBookingPage({ router: props.router });
    }
    return props.isBookingPage;
  })();
@@ -241,9 +243,8 @@ function OrgBrandProvider({ children }: { children: React.ReactNode }) {
 }

 const AppProviders = (props: AppPropsWithChildren) => {
-  const session = trpc.viewer.public.session.useQuery().data;
  // No need to have intercom on public pages - Good for Page Performance
-  const isPublicPage = usePublicPage();
+  const isBookingPage = useIsBookingPage();
  const { pageProps, ...rest } = props;
  const { _nonce, ...restPageProps } = pageProps;
  const propsWithoutNonce = {
@@ -255,7 +256,7 @@ const AppProviders = (props: AppPropsWithChildren) => {

  const RemainingProviders = (
    <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <SessionProvider session={session || undefined}>
+      <SessionProvider session={pageProps.session ?? undefined}>
        <CustomI18nextProvider {...propsWithoutNonce}>
          <TooltipProvider>
            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
@@ -263,7 +264,8 @@ const AppProviders = (props: AppPropsWithChildren) => {
              themeBasis={props.pageProps.themeBasis}
              nonce={props.pageProps.nonce}
              isThemeSupported={props.Component.isThemeSupported}
-              isBookingPage={props.Component.isBookingPage}>
+              isBookingPage={props.Component.isBookingPage || isBookingPage}
+              router={props.router}>
              <FeatureFlagsProvider>
                <OrgBrandProvider>
                  <MetaProvider>{props.children}</MetaProvider>
@@ -276,7 +278,7 @@ const AppProviders = (props: AppPropsWithChildren) => {
    </EventCollectionProvider>
  );

-  if (isPublicPage) {
+  if (isBookingPage) {
    return RemainingProviders;
  }

@@ -1,53 +0,0 @@
-import parser from "accept-language-parser";
-import type { IncomingMessage } from "http";
-import type { GetServerSidePropsContext } from "next";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import type { Maybe } from "@calcom/trpc/server";
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { i18n } = require("@calcom/config/next-i18next.config");
-
-export function getLocaleFromHeaders(req: IncomingMessage): string {
-  let preferredLocale: string | null | undefined;
-  if (req.headers["accept-language"]) {
-    preferredLocale = parser.pick(i18n.locales, req.headers["accept-language"]) as Maybe<string>;
-  }
-  return preferredLocale ?? i18n.defaultLocale;
-}
-
-export const getOrSetUserLocaleFromHeaders = async (
-  req: GetServerSidePropsContext["req"],
-  res: GetServerSidePropsContext["res"]
-): Promise<string> => {
-  const { default: prisma } = await import("@calcom/prisma");
-
-  const session = await getServerSession({ req, res });
-  const preferredLocale = getLocaleFromHeaders(req);
-
-  if (session?.user?.id) {
-    const user = await prisma.user.findUnique({
-      where: {
-        id: session.user.id,
-      },
-      select: {
-        locale: true,
-      },
-    });
-
-    if (user?.locale) {
-      return user.locale;
-    }
-
-    await prisma.user.update({
-      where: {
-        id: session.user.id,
-      },
-      data: {
-        locale: preferredLocale,
-      },
-    });
-  }
-
-  return preferredLocale;
-};
@@ -0,0 +1,12 @@
+import { usePathname, useSearchParams } from "next/navigation";
+
+export default function useIsBookingPage() {
+  const pathname = usePathname();
+  const isBookingPage = ["/booking/", "/cancel", "/reschedule"].some((route) => pathname?.startsWith(route));
+
+  const searchParams = useSearchParams();
+  const userParam = searchParams.get("user");
+  const teamParam = searchParams.get("team");
+
+  return !!(isBookingPage || userParam || teamParam);
+}
@@ -1,9 +0,0 @@
-import { useRouter } from "next/router";
-
-export default function usePublicPage() {
-  const router = useRouter();
-  const isPublicPage = ["/[user]", "/booking", "/cancel", "/reschedule"].find((route) =>
-    router.pathname.startsWith(route)
-  );
-  return isPublicPage;
-}
@@ -1,36 +1,17 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";

 export default function useRouterQuery<T extends string>(name: T) {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
  const router = useRouter();
-  const existingQueryParams = router.asPath.split("?")[1];
-
-  const urlParams = new URLSearchParams(existingQueryParams);
-  const query: Record<string, string | string[]> = {};
-  // Following error is thrown by Typescript:
-  // 'Type 'URLSearchParams' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher'
-  // We should change the target to higher ES2019 atleast maybe
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  for (const [key, value] of urlParams) {
-    if (!query[key]) {
-      query[key] = value;
-    } else {
-      let queryValue = query[key];
-      if (queryValue instanceof Array) {
-        queryValue.push(value);
-      } else {
-        queryValue = query[key] = [queryValue];
-        queryValue.push(value);
-      }
-    }
-  }

  const setQuery = (newValue: string | number | null | undefined) => {
-    router.replace({ query: { ...router.query, [name]: newValue } }, undefined, { shallow: true });
-    router.replace({ query: { ...router.query, ...query, [name]: newValue } }, undefined, { shallow: true });
+    const _searchParams = new URLSearchParams(searchParams);
+    _searchParams.set(name, newValue as string);
+    router.replace(`${pathname}?${_searchParams.toString()}`);
  };

-  return { [name]: query[name], setQuery } as {
+  return { [name]: searchParams.get(name), setQuery } as {
    [K in T]: string | undefined;
  } & { setQuery: typeof setQuery };
 }
@@ -1,31 +1,9 @@
-import { useRouter } from "next/router";
-import { useMemo } from "react";
+import { useSearchParams } from "next/navigation";

 export function useToggleQuery(name: string) {
-  const router = useRouter();
-
-  const hrefOff = useMemo(() => {
-    const query = {
-      ...router.query,
-    };
-    delete query[name];
-    return {
-      query,
-    };
-  }, [router.query, name]);
-  const hrefOn = useMemo(() => {
-    const query = {
-      ...router.query,
-      [name]: "1",
-    };
-    return {
-      query,
-    };
-  }, [router.query, name]);
+  const searchParams = useSearchParams();

  return {
-    hrefOn,
-    hrefOff,
-    isOn: router.query[name] === "1",
+    isOn: searchParams?.get(name) === "1",
  };
 }
@@ -1,22 +1,14 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
 import type { NextMiddleware } from "next/server";
-import { NextResponse, userAgent } from "next/server";
+import { NextResponse } from "next/server";

-import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
-import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";

 const middleware: NextMiddleware = async (req) => {
  const url = req.nextUrl;
  const requestHeaders = new Headers(req.headers);

-  if (isIpInBanlist(req) && url.pathname !== "/api/nope") {
-    // DDOS Prevention: Immediately end request with no response - Avoids a redirect as well initiated by NextAuth on invalid callback
-    req.nextUrl.pathname = "/api/nope";
-    return NextResponse.redirect(req.nextUrl);
-  }
-
  if (!url.pathname.startsWith("/api")) {
    //
    // NOTE: When tRPC hits an error a 500 is returned, when this is received
@@ -39,25 +31,9 @@ const middleware: NextMiddleware = async (req) => {
    }
  }

-  if (["/api/collect-events", "/api/auth"].some((p) => url.pathname.startsWith(p))) {
-    const callbackUrl = url.searchParams.get("callbackUrl");
-    const { isBot } = userAgent(req);
-
-    if (
-      isBot ||
-      (callbackUrl && ![CONSOLE_URL, WEBAPP_URL, WEBSITE_URL].some((u) => callbackUrl.startsWith(u))) ||
-      isIpInBanlist(req)
-    ) {
-      // DDOS Prevention: Immediately end request with no response - Avoids a redirect as well initiated by NextAuth on invalid callback
-      req.nextUrl.pathname = "/api/nope";
-      return NextResponse.redirect(req.nextUrl);
-    }
-  }
-
-  // Don't 404 old routing_forms links
-  if (url.pathname.startsWith("/apps/routing_forms")) {
-    url.pathname = url.pathname.replace("/apps/routing_forms", "/apps/routing-forms");
-    return NextResponse.rewrite(url);
+  const res = routingForms.handle(url);
+  if (res) {
+    return res;
  }

  if (url.pathname.startsWith("/api/trpc/")) {
@@ -76,15 +52,27 @@ const middleware: NextMiddleware = async (req) => {
  });
 };

+const routingForms = {
+  handle: (url: URL) => {
+    // Don't 404 old routing_forms links
+    if (url.pathname.startsWith("/apps/routing_forms")) {
+      url.pathname = url.pathname.replace(/^\/apps\/routing_forms($|\/)/, "/apps/routing-forms/");
+      return NextResponse.rewrite(url);
+    }
+  },
+};
+
 export const config = {
+  // Next.js Doesn't support spread operator in config matcher, so, we must list all paths explicitly here.
+  // https://github.com/vercel/next.js/discussions/42458
  matcher: [
-    "/((?!_next|.*avatar.png$|favicon.ico$).*)",
-    "/api/collect-events/:path*",
-    "/api/auth/:path*",
-    "/apps/routing_forms/:path*",
    "/:path*/embed",
    "/api/trpc/:path*",
    "/auth/login",
+    /**
+     * Paths required by routingForms.handle
+     */
+    "/apps/routing_forms/:path*",
  ],
 };

@@ -3,6 +3,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const os = require("os");
 const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
+const { version } = require("./package.json");
 const { i18n } = require("./next-i18next.config");
 const {
  orgHostPath,
@@ -14,6 +15,9 @@ const {
 if (!process.env.NEXTAUTH_SECRET) throw new Error("Please set NEXTAUTH_SECRET");
 if (!process.env.CALENDSO_ENCRYPTION_KEY) throw new Error("Please set CALENDSO_ENCRYPTION_KEY");

+// To be able to use the version in the app without having to import package.json
+process.env.NEXT_PUBLIC_CALCOM_VERSION = version;
+
 // So we can test deploy previews preview
 if (process.env.VERCEL_URL && !process.env.NEXT_PUBLIC_WEBAPP_URL) {
  process.env.NEXT_PUBLIC_WEBAPP_URL = "https://" + process.env.VERCEL_URL;
@@ -25,8 +29,10 @@ if (!process.env.NEXTAUTH_URL && process.env.NEXT_PUBLIC_WEBAPP_URL) {
 if (!process.env.NEXT_PUBLIC_WEBSITE_URL) {
  process.env.NEXT_PUBLIC_WEBSITE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL;
 }
-
-if (process.env.CSP_POLICY === "strict" && process.env.NODE_ENV === "production") {
+if (
+  process.env.CSP_POLICY === "strict" &&
+  (process.env.CALCOM_ENV === "production" || process.env.NODE_ENV === "production")
+) {
  throw new Error(
    "Strict CSP policy(for style-src) is not yet supported in production. You can experiment with it in Dev Mode"
  );
@@ -127,7 +133,10 @@ const matcherConfigUserTypeEmbedRoute = {

 /** @type {import("next").NextConfig} */
 const nextConfig = {
-  i18n,
+  i18n: {
+    ...i18n,
+    localeDetection: false,
+  },
  productionBrowserSourceMaps: true,
  /* We already do type check on GH actions */
  typescript: {
@@ -376,6 +385,11 @@ const nextConfig = {
        destination: "/signup",
        permanent: true,
      },
+      {
+        source: "/auth",
+        destination: "/auth/login",
+        permanent: false,
+      },
      {
        source: "/settings",
        destination: "/settings/my-account/profile",
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "3.1.5",
+  "version": "3.2.3",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -58,7 +58,6 @@
    "@radix-ui/react-tooltip": "^1.0.0",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
-    "@tanem/react-nprogress": "^5.0.44",
    "@tanstack/react-query": "^4.3.9",
    "@tremor/react": "^2.0.0",
    "@types/turndown": "^5.0.1",
@@ -69,6 +68,7 @@
    "@vercel/og": "^0.5.0",
    "accept-language-parser": "^1.5.0",
    "async": "^3.2.4",
+    "bcp-47-match": "^2.0.3",
    "bcryptjs": "^2.4.3",
    "classnames": "^2.3.1",
    "dotenv-cli": "^6.0.0",
@@ -167,6 +167,7 @@
    "msw": "^0.42.3",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.3.1",
+    "tailwindcss-animate": "^1.0.6",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  },
@@ -1,10 +1,10 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
-import React, { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";

 import { orgDomainConfig, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { DOCS_URL, JOIN_DISCORD, WEBSITE_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
 import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon";
@@ -22,9 +22,8 @@ enum pageType {
 }

 export default function Custom404() {
+  const pathname = usePathname();
  const { t } = useLocale();
-
-  const router = useRouter();
  const [username, setUsername] = useState<string>("");
  const [currentPageType, setCurrentPageType] = useState<pageType>(pageType.USER);

@@ -52,7 +51,7 @@ export default function Custom404() {
  const [url, setUrl] = useState(`${WEBSITE_URL}/signup`);
  useEffect(() => {
    const { isValidOrgDomain, currentOrgDomain } = orgDomainConfig(window.location.host);
-    const [routerUsername] = router.asPath.replace("%20", "-").split(/[?#]/);
+    const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/);
    if (!isValidOrgDomain || !currentOrgDomain) {
      const splitPath = routerUsername.split("/");
      if (splitPath[1] === "team" && splitPath.length === 3) {
@@ -78,14 +77,14 @@ export default function Custom404() {
    }
  }, []);

-  const isSuccessPage = router.asPath.startsWith("/booking");
-  const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
-  const isSignup = router.asPath.startsWith("/signup");
+  const isSuccessPage = pathname?.startsWith("/booking");
+  const isSubpage = pathname?.includes("/", 2) || isSuccessPage;
+  const isSignup = pathname?.startsWith("/signup");
  /**
   * If we're on 404 and the route is insights it means it is disabled
   * TODO: Abstract this for all disabled features
   **/
-  const isInsights = router.asPath.startsWith("/insights");
+  const isInsights = pathname?.startsWith("/insights");
  if (isInsights) {
    return (
      <>
@@ -1,7 +1,7 @@
 import Head from "next/head";
-import { useRouter } from "next/router";
+import { useSearchParams } from "next/navigation";

-import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 import { Copy } from "@calcom/ui/components/icon";
@@ -9,8 +9,8 @@ import { Copy } from "@calcom/ui/components/icon";
 import PageWrapper from "@components/PageWrapper";

 export default function Error500() {
+  const searchParams = useSearchParams();
  const { t } = useLocale();
-  const router = useRouter();

  return (
    <div className="bg-subtle flex h-screen">
@@ -21,24 +21,21 @@ export default function Error500() {
      <div className="rtl: bg-default m-auto rounded-md p-10 text-right ltr:text-left">
        <h1 className="font-cal text-emphasis text-6xl">500</h1>
        <h2 className="text-emphasis mt-6 text-2xl font-medium">It&apos;s not you, it&apos;s us.</h2>
-        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">
-          Something went wrong on our end. Get in touch with our support team, and we’ll get it fixed right
-          away for you.
-        </p>
-        {router.query.error && (
+        <p className="text-default mb-6 mt-4 max-w-2xl text-sm">{t("something_went_wrong_on_our_end")}</p>
+        {searchParams?.get("error") && (
          <div className="mb-8 flex flex-col">
            <p className="text-default mb-4 max-w-2xl text-sm">
-              Please provide the following text when contacting support to better help you:
+              {t("please_provide_following_text_to_suppport")}:
            </p>
            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
-              {router.query.error}
+              {searchParams?.get("error")}
              <br />
              <Button
                color="secondary"
                className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
                StartIcon={Copy}
                onClick={() => {
-                  navigator.clipboard.writeText(router.query.error as string);
+                  navigator.clipboard.writeText(searchParams?.get("error") as string);
                  showToast("Link copied!", "success");
                }}>
                {t("copy")}
@@ -46,9 +43,9 @@ export default function Error500() {
            </pre>
          </div>
        )}
-        <Button href={`${WEBSITE_URL}/support`}>{t("contact_support")}</Button>
+        <Button href="mailto:support@cal.com">{t("contact_support")}</Button>
        <Button color="secondary" href="javascript:history.back()" className="ml-2">
-          Go back
+          {t("go_back")}
        </Button>
      </div>
    </div>
@@ -1,8 +1,9 @@
+import type { DehydratedState } from "@tanstack/react-query";
 import classNames from "classnames";
-import type { GetServerSidePropsContext } from "next";
+import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Link from "next/link";
-import { useRouter } from "next/router";
 import { Toaster } from "react-hot-toast";
+import type { z } from "zod";

 import {
  sdkActionManager,
@@ -10,34 +11,35 @@ import {
  useEmbedStyles,
  useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { stripMarkdown } from "@calcom/lib/stripMarkdown";
 import prisma from "@calcom/prisma";
+import type { EventType, User } from "@calcom/prisma/client";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Avatar, HeadSeo } from "@calcom/ui";
+import { Avatar, HeadSeo, UnpublishedEntity } from "@calcom/ui";
 import { Verified, ArrowRight } from "@calcom/ui/components/icon";

-import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";

 import PageWrapper from "@components/PageWrapper";

 import { ssrInit } from "@server/lib/ssr";

-export type UserPageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
-export function UserPage(props: UserPageProps) {
-  const { users, profile, eventTypes, isSingleUser, markdownStrippedBio } = props;
+export function UserPage(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
+  const { users, profile, eventTypes, markdownStrippedBio, entity } = props;
+
  const [user] = users; //To be used when we only have a single user, not dynamic group
-  useTheme(user.theme);
+  useTheme(profile.theme);
  const { t } = useLocale();
-  const router = useRouter();

  const isBioEmpty = !user.bio || !user.bio.replace("<p><br></p>", "").length;

@@ -45,9 +47,12 @@ export function UserPage(props: UserPageProps) {
  const eventTypeListItemEmbedStyles = useEmbedStyles("eventTypeListItem");
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const query = { ...router.query };
-  delete query.user; // So it doesn't display in the Link (and make tests fail)
-  delete query.orgSlug;
+  const {
+    // So it doesn't display in the Link (and make tests fail)
+    user: _user,
+    orgSlug: _orgSlug,
+    ...query
+  } = useRouterQuery();
  const nameOrUsername = user.name || user.username || "";

  /*
@@ -58,17 +63,30 @@ export function UserPage(props: UserPageProps) {
      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
    }
  }, [telemetry, router.asPath]); */
+
+  if (entity?.isUnpublished) {
+    return (
+      <div className="flex h-full min-h-[100dvh] items-center justify-center">
+        <UnpublishedEntity {...entity} />
+      </div>
+    );
+  }
+
  const isEventListEmpty = eventTypes.length === 0;
  return (
    <>
      <HeadSeo
-        title={nameOrUsername}
+        title={profile.name}
        description={markdownStrippedBio}
        meeting={{
          title: markdownStrippedBio,
          profile: { name: `${profile.name}`, image: null },
          users: [{ username: `${user.username}`, name: `${user.name}` }],
        }}
+        nextSeoProps={{
+          noindex: !profile.allowSEOIndexing,
+          nofollow: !profile.allowSEOIndexing,
+        }}
      />

      <div className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "max-w-3xl" : "")}>
@@ -78,25 +96,23 @@ export function UserPage(props: UserPageProps) {
            isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
            "max-w-3xl px-4 py-24"
          )}>
-          {isSingleUser && ( // When we deal with a single user, not dynamic group
-            <div className="mb-8 text-center">
-              <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
-              <h1 className="font-cal text-emphasis mb-1 text-3xl">
-                {nameOrUsername}
-                {user.verified && (
-                  <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
-                )}
-              </h1>
-              {!isBioEmpty && (
-                <>
-                  <div
-                    className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
-                  />
-                </>
+          <div className="mb-8 text-center">
+            <Avatar imageSrc={profile.image} size="xl" alt={profile.name} />
+            <h1 className="font-cal text-emphasis mb-1 text-3xl" data-testid="name-title">
+              {profile.name}
+              {user.verified && (
+                <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
              )}
-            </div>
-          )}
+            </h1>
+            {!isBioEmpty && (
+              <>
+                <div
+                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  dangerouslySetInnerHTML={{ __html: props.safeBio }}
+                />
+              </>
+            )}
+          </div>

          <div
            className={classNames("rounded-md ", !isEventListEmpty && "border-subtle border")}
@@ -141,7 +157,7 @@ export function UserPage(props: UserPageProps) {
            )}
          </div>

-          {isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
+          {isEventListEmpty && <EmptyPage name={profile.name || "User"} />}
        </main>
        <Toaster position="bottom-right" />
      </div>
@@ -195,11 +211,49 @@ const getEventTypesWithHiddenFromDB = async (userId: number) => {
  }));
 };

-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const ssr = await ssrInit(context);
-  const crypto = await import("crypto");
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
+export type UserPageProps = {
+  trpcState: DehydratedState;
+  profile: {
+    name: string;
+    image: string;
+    theme: string | null;
+    brandColor: string;
+    darkBrandColor: string;
+    allowSEOIndexing: boolean;
+  };
+  users: Pick<User, "away" | "name" | "username" | "bio" | "verified">[];
+  themeBasis: string | null;
+  markdownStrippedBio: string;
+  safeBio: string;
+  entity: {
+    isUnpublished?: boolean;
+    orgSlug?: string | null;
+    name?: string | null;
+  };
+  eventTypes: ({
+    descriptionAsSafeHTML: string;
+    metadata: z.infer<typeof EventTypeMetaDataSchema>;
+  } & Pick<
+    EventType,
+    | "id"
+    | "title"
+    | "slug"
+    | "length"
+    | "hidden"
+    | "requiresConfirmation"
+    | "requiresBookerEmailVerification"
+    | "price"
+    | "currency"
+    | "recurringEvent"
+  >)[];
+} & EmbedProps;

+export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );
  const usernameList = getUsernameList(context.query.user as string);
  const dataFetchStart = Date.now();
  const usersWithoutAvatar = await prisma.user.findMany({
@@ -207,11 +261,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      username: {
        in: usernameList,
      },
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
+      organization: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
    },
    select: {
      id: true,
@@ -222,10 +272,17 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      brandColor: true,
      darkBrandColor: true,
      organizationId: true,
+      organization: {
+        select: {
+          slug: true,
+          name: true,
+        },
+      },
      theme: true,
      away: true,
      verified: true,
      allowDynamicBooking: true,
+      allowSEOIndexing: true,
    },
  });

@@ -260,11 +317,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
  const [user] = users; //to be used when dealing with single user, not dynamic group

  const profile = {
-    name: user.name || user.username,
+    name: user.name || user.username || "",
    image: user.avatar,
    theme: user.theme,
    brandColor: user.brandColor,
    darkBrandColor: user.darkBrandColor,
+    allowSEOIndexing: user.allowSEOIndexing ?? true,
  };

  const eventTypesWithHidden = await getEventTypesWithHiddenFromDB(user.id);
@@ -280,25 +338,31 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
  }));

-  const isSingleUser = users.length === 1;
-
  const safeBio = markdownToSafeHTML(user.bio) || "";

  const markdownStrippedBio = stripMarkdown(user?.bio || "");
+  const org = usersWithoutAvatar[0].organization;

  return {
    props: {
-      users,
+      users: users.map((user) => ({
+        name: user.name,
+        username: user.username,
+        bio: user.bio,
+        away: user.away,
+        verified: user.verified,
+      })),
+      entity: {
+        isUnpublished: org?.slug === null,
+        orgSlug: currentOrgDomain,
+        name: org?.name ?? null,
+      },
+      eventTypes,
      safeBio,
      profile,
      // Dynamic group has no theme preference right now. It uses system theme.
      themeBasis: user.username,
-      user: {
-        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
-      },
-      eventTypes,
      trpcState: ssr.dehydrate(),
-      isSingleUser,
      markdownStrippedBio,
    },
  };
@@ -4,8 +4,13 @@ import { z } from "zod";
 import { Booker } from "@calcom/atoms";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
+import {
+  getBookingForReschedule,
+  getBookingForSeatedEvent,
+  getMultipleDurationValue,
+} from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
 import slugify from "@calcom/lib/slugify";
@@ -25,8 +30,10 @@ export default function Type({
  booking,
  away,
  isBrandingHidden,
+  isSEOIndexable,
  rescheduleUid,
-  org,
+  entity,
+  duration,
 }: PageProps) {
  return (
    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
@@ -35,7 +42,8 @@ export default function Type({
        eventSlug={slug}
        rescheduleUid={rescheduleUid ?? undefined}
        hideBranding={isBrandingHidden}
-        org={org}
+        isSEOIndexable={isSEOIndexable ?? true}
+        entity={entity}
      />
      <Booker
        username={user}
@@ -43,7 +51,8 @@ export default function Type({
        bookingData={booking}
        isAway={away}
        hideBranding={isBrandingHidden}
-        org={org}
+        entity={entity}
+        duration={duration}
      />
    </main>
  );
@@ -54,11 +63,14 @@ Type.PageWrapper = PageWrapper;

 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, bookingUid } = context.query;
+  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;

  const { ssrInit } = await import("@server/lib/ssr");
  const ssr = await ssrInit(context);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );

  const users = await prisma.user.findMany({
    where: {
@@ -106,13 +118,19 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {

  return {
    props: {
-      org,
+      entity: eventData.entity,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
      booking,
      user: usernames.join("+"),
      slug,
      away: false,
      trpcState: ssr.dehydrate(),
      isBrandingHidden: false,
+      isSEOIndexable: true,
      themeBasis: null,
      bookingUid: bookingUid ? `${bookingUid}` : null,
      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
@@ -123,23 +141,23 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 async function getUserPageProps(context: GetServerSidePropsContext) {
  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
  const username = usernames[0];
-  const { rescheduleUid, bookingUid } = context.query;
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
+  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );

  const { ssrInit } = await import("@server/lib/ssr");
  const ssr = await ssrInit(context);
  const user = await prisma.user.findFirst({
    where: {
      username,
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
+      organization: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
    },
    select: {
      away: true,
      hideBranding: true,
+      allowSEOIndexing: true,
    },
  });

@@ -158,7 +176,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {

  const org = isValidOrgDomain ? currentOrgDomain : null;
  // We use this to both prefetch the query on the server,
-  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  // as well as to check if the event exist, so we can show a 404 otherwise.
  const eventData = await ssr.viewer.public.event.fetch({
    username,
    eventSlug: slug,
@@ -174,12 +192,18 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
  return {
    props: {
      booking,
+      duration: getMultipleDurationValue(
+        eventData.metadata?.multipleDuration,
+        queryDuration,
+        eventData.length
+      ),
      away: user?.away,
      user: username,
      slug,
-      org,
+      entity: eventData.entity,
      trpcState: ssr.dehydrate(),
      isBrandingHidden: user?.hideBranding,
+      isSEOIndexable: user?.allowSEOIndexing,
      themeBasis: username,
      bookingUid: bookingUid ? `${bookingUid}` : null,
      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);`