v3.2.5

use team id :/ (#10957 )
v3.2.4
2023-08-25 17:23:22 +01:00 · 2023-08-25 16:14:28 +00:00 · 2023-08-25 15:32:55 +01:00 · 2023-08-25 14:43:48 +01:00 · 2023-08-25 14:29:04 +01:00 · 2023-08-25 14:15:13 +01:00
1001 changed files with 34762 additions and 12657 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=""
@@ -22,18 +22,18 @@ Any other relevant information. For example, why do you consider this a bug and

 ### Actual Results

-  - What's happening right now that is different from what is expected
+- What's happening right now that is different from what is expected

 ### Expected Results

-  - This is an ideal result that the system should get after the tests are performed
+- This is an ideal result that the system should get after the tests are performed

 ### Technical details

-  - Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
-  - Node.js version
-  - Anything else that you think could be an issue.
+- Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
+- Node.js version
+- Anything else that you think could be an issue.

 ### Evidence

-  - How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.
+- How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.
@@ -11,31 +11,32 @@ Fixes # (issue)
 ## Requirement/Documentation

 <!-- Please provide all documents that are important to understand the reason of that PR. -->
-  - If there is a requirement document, please, share it here.
-  - If there is ab UI/UX design document, please, share it here.
+
+- If there is a requirement document, please, share it here.
+- If there is ab UI/UX design document, please, share it here.

 ## Type of change

 <!-- Please delete bullets that are not relevant. -->

-  - [ ] Bug fix (non-breaking change which fixes an issue)
-  - [ ] Chore (refactoring code, technical debt, workflow improvements)
-  - [ ] New feature (non-breaking change which adds functionality)
-  - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-  - [ ] This change requires a documentation update
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update

 ## How should this be tested?

 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->

-  - Are there environment variables that should be set?
-  - What are the minimal test data to have?
-  - What is expected (happy path) to have (input and output)?
-  - Any other important info that could help to test that PR
+- Are there environment variables that should be set?
+- What are the minimal test data to have?
+- What is expected (happy path) to have (input and output)?
+- Any other important info that could help to test that PR

 ## Mandatory Tasks

-  - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
+- [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

 ## Checklist

@@ -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
@@ -5,7 +5,7 @@ on:
 jobs:
  e2e-app-store:
    timeout-minutes: 20
-    name: E2E App-Store Apps
+    name: E2E App Store (${{ matrix.shard }}/${{ strategy.job-total }})
    runs-on: buildjet-4vcpu-ubuntu-2204
    services:
      postgres:
@@ -15,6 +15,16 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for AppStore. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]

    steps:
      - uses: actions/checkout@v3
@@ -22,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 test-e2e:app-store
+        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: test-results
+          name: app-store-results-${{ matrix.shard }}_${{ strategy.job-total }}
          path: test-results
@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed React tests and booking flow(for non-embed as well)
 on:
  workflow_call:

 jobs:
  e2e-embed:
    timeout-minutes: 20
+    name: E2E Embed React (${{ matrix.shard }}/${{ strategy.job-total }})
    runs-on: buildjet-4vcpu-ubuntu-2204
    services:
      postgres:
@@ -14,6 +15,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for embed-react. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]

    steps:
      - uses: actions/checkout@v3
@@ -21,18 +27,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 test-e2e:embed-react
+          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: test-results
+          name: embed-react-results-${{ matrix.shard }}_${{ strategy.job-total }}
          path: test-results
@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed Core tests and booking flow(for non-embed as well)
 on:
  workflow_call:

 jobs:
  e2e-embed:
    timeout-minutes: 20
+    name: E2E Embed Core (${{ matrix.shard }}/${{ strategy.job-total }})
    runs-on: buildjet-4vcpu-ubuntu-2204
    services:
      postgres:
@@ -14,6 +15,16 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for embed-core. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]

    steps:
      - uses: actions/checkout@v3
@@ -21,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 test-e2e:embed
+        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: test-results
+          name: embed-core-results-${{ matrix.shard }}_${{ strategy.job-total }}
          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) }}
@@ -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

@@ -84,21 +77,18 @@ jobs:

  e2e-app-store:
    name: E2E App Store tests
-    if: ${{ needs.changes.outputs.app-store == 'true' }}
    needs: [changes, lint, build]
    uses: ./.github/workflows/e2e-app-store.yml
    secrets: inherit

  e2e-embed:
    name: E2E embeds tests
-    if: ${{ needs.changes.outputs.embed == 'true' }}
    needs: [changes, lint, build]
    uses: ./.github/workflows/e2e-embed.yml
    secrets: inherit

  e2e-embed-react:
    name: E2E React embeds tests
-    if: ${{ needs.changes.outputs.embed-react == 'true' }}
    needs: [changes, lint, build]
    uses: ./.github/workflows/e2e-embed-react.yml
    secrets: inherit
@@ -109,7 +99,7 @@ jobs:
    secrets: inherit

  required:
-    needs: [lint, type-check, test, build, e2e]
+    needs: [lint, type-check, test, build, e2e, e2e-embed, e2e-embed-react, e2e-app-store]
    if: always()
    runs-on: buildjet-4vcpu-ubuntu-2204
    steps:
@@ -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
@@ -0,0 +1,47 @@
+name: "Release Docker"
+
+on: # yamllint disable-line rule:truthy
+  release:
+    types:
+      - created
+  # in case manual trigger is needed
+  workflow_dispatch:
+    inputs:
+      RELEASE_TAG:
+        description: "v{Major}.{Minor}.{Patch}"
+
+jobs:
+  release:
+    name: "Remote Release"
+
+    runs-on: "ubuntu-latest"
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: "Determine tag"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
+
+      - name: "Run remote release workflow"
+        uses: "actions/github-script@v6"
+        with:
+          # Requires a personal access token with Actions Read and write permissions on calcom/docker.
+          github-token: "${{ secrets.DOCKER_REPO_ACCESS_TOKEN }}"
+          script: |
+            try {
+              const response = await github.rest.actions.createWorkflowDispatch({
+                owner: context.repo.owner,
+                repo: 'docker',
+                workflow_id: 'create-release.yaml',
+                ref: 'main',
+                inputs: {
+                  "RELEASE_TAG": process.env.RELEASE_TAG
+                },
+              });
+
+              console.log(response);
+            } catch (error) {
+              console.error(error);
+              core.setFailed(error.message);
+            }
@@ -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.

@@ -90,7 +90,6 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 - [Prisma.io](https://prisma.io/?ref=cal.com)
 - [Daily.co](https://go.cal.com/daily)

-
 ## Contact us

 Meet our sales team for any commercial inquiries.
@@ -99,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)

@@ -129,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
@@ -222,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
@@ -255,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
 ```

@@ -462,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.
@@ -546,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.
@@ -7,7 +7,7 @@
  <a href="https://cal.com/docs/enterprise-features/api#api-server-specifications">Read the API docs</a>
 </div>

-# Commercial Cal.com Public API 
+# Commercial Cal.com Public API

 Welcome to the Public API ("/apps/api") of the Cal.com.

@@ -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 };
@@ -33,12 +33,14 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
  position: true,
  eventName: true,
  timeZone: true,
+  schedulingType: true,
+  // START Limit future bookings
  periodType: true,
  periodStartDate: true,
-  schedulingType: true,
  periodEndDate: true,
  periodDays: true,
  periodCountCalendarDays: true,
+  // END Limit future bookings
  requiresConfirmation: true,
  disableGuests: true,
  hideCalendarNotes: true,
@@ -51,6 +53,8 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
  slotInterval: true,
  successRedirectUrl: true,
  locations: true,
+  bookingLimits: true,
+  durationLimits: true,
 })
  .merge(z.object({ hosts: z.array(hostSchema).optional().default([]) }))
  .partial()
@@ -67,6 +71,7 @@ const schemaEventTypeCreateParams = z
    seatsPerTimeSlot: z.number().optional(),
    seatsShowAttendees: z.boolean().optional(),
    bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
  })
  .strict();

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

@@ -98,6 +104,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
  position: true,
  userId: true,
  teamId: true,
+  scheduleId: true,
  eventName: true,
  timeZone: true,
  periodType: true,
@@ -123,6 +130,8 @@ export const schemaEventTypeReadPublic = EventType.pick({
  seatsPerTimeSlot: true,
  seatsShowAttendees: true,
  bookingFields: true,
+  bookingLimits: true,
+  durationLimits: true,
 }).merge(
  z.object({
    locations: z
@@ -0,0 +1,20 @@
+import { withValidation } from "next-validations";
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+// Extracted out as utility function so can be reused
+// at different endpoints that require this validation.
+export const schemaQueryUserEmail = baseApiParams.extend({
+  email: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleUserEmails = z.object({
+  email: z.union([z.string().email(), z.array(z.string().email())]),
+});
+
+export const withValidQueryUserEmail = withValidation({
+  schema: schemaQueryUserEmail,
+  type: "Zod",
+  mode: "query",
+});
@@ -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,
@@ -57,7 +57,14 @@ import { defaultResponder } from "@calcom/lib/server";
 *                      format: email
 *                      description: 'Attendee email address'
 *                    location:
- *                      type: string
+ *                      type: object
+ *                      properties:
+ *                        optionValue:
+ *                          type: string
+ *                          description: 'Option value for the location'
+ *                        value:
+ *                          type: string
+ *                          description: 'The meeting URL, Phone number or Address'
 *                      description: 'Meeting location'
 *               metadata:
 *                 type: object
@@ -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);
@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import type { z } from "zod";

@@ -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:
@@ -199,10 +202,17 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 export async function patchHandler(req: NextApiRequest) {
  const { prisma, query, body } = req;
  const { id } = schemaQueryIdParseInt.parse(query);
-  const { hosts = [], ...parsedBody } = schemaEventTypeEditBodyParams.parse(body);
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeEditBodyParams.parse(body);

  const data: Prisma.EventTypeUpdateArgs["data"] = {
    ...parsedBody,
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
  };

  if (hosts) {
@@ -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);
@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";

 import { HttpError } from "@calcom/lib/http-error";
@@ -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
@@ -255,12 +259,19 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 async function postHandler(req: NextApiRequest) {
  const { userId, isAdmin, prisma, body } = req;

-  const { hosts = [], ...parsedBody } = schemaEventTypeCreateBodyParams.parse(body || {});
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeCreateBodyParams.parse(body || {});

  let data: Prisma.EventTypeCreateArgs["data"] = {
    ...parsedBody,
    userId,
    users: { connect: { id: userId } },
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
  };

  await checkPermissions(req);
@@ -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);
@@ -4,6 +4,7 @@ import type { NextApiRequest } from "next";
 import { defaultResponder } from "@calcom/lib/server";

 import { withMiddleware } from "~/lib/helpers/withMiddleware";
+import { schemaQuerySingleOrMultipleUserEmails } from "~/lib/validations/shared/queryUserEmail";
 import { schemaUsersReadPublic } from "~/lib/validations/user";

 /**
@@ -19,6 +20,17 @@ import { schemaUsersReadPublic } from "~/lib/validations/user";
 *         schema:
 *           type: string
 *         description: Your API key
+ *       - in: query
+ *         name: email
+ *         required: false
+ *         schema:
+ *          type: array
+ *          items:
+ *            type: string
+ *            format: email
+ *         style: form
+ *         explode: true
+ *         description: The email address or an array of email addresses to filter by
 *     tags:
 *     - users
 *     responses:
@@ -39,8 +51,16 @@ export async function getHandler(req: NextApiRequest) {
  const where: Prisma.UserWhereInput = {};
  // If user is not ADMIN, return only his data.
  if (!isAdmin) where.id = userId;
+
+  if (req.query.email) {
+    const validationResult = schemaQuerySingleOrMultipleUserEmails.parse(req.query);
+    where.email = {
+      in: Array.isArray(validationResult.email) ? validationResult.email : [validationResult.email],
+    };
+  }
+
  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
@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";

+const ns = ["common"];
+const supportedLngs = ["en", "fr"];
+const resources = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {};
+    acc[lng] = {
+      ...acc[lng],
+      [n]: require(`../../web/public/static/locales/${lng}/${n}.json`),
+    };
+  });
+  return acc;
+}, {});
+
 i18n.use(initReactI18next).init({
-  resources: [],
  debug: true,
+  fallbackLng: "en",
+  defaultNS: "common",
+  ns,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: { useSuspense: true },
+  resources,
 });

 export default i18n;
@@ -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,21 @@ export const parameters = {
      date: /Date$/,
    },
  },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };

 addDecorator((storyFn) => (
@@ -18,6 +18,7 @@ export function VariantsTable({
  const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
  return (
    <div
+      id="light-variant"
      className={classNames(
        isDark &&
          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
@@ -43,7 +44,7 @@ export function VariantsTable({
        </table>
      </div>
      {!isDark && (
-        <div data-mode="dark" className="dark">
+        <div id="dark-variant" data-mode="dark" className="dark">
          <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
            {children}
          </VariantsTable>
@@ -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,5 +1,39 @@
 # @calcom/web

+## 3.1.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-react@1.3.0
+
+## 3.0.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.1.2
+  - @calcom/embed-react@1.2.2
+  - @calcom/embed-core@1.3.2
+
+## 3.0.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.1.1
+  - @calcom/embed-react@1.2.1
+  - @calcom/embed-core@1.3.1
+
+## 3.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-core@1.3.0
+  - @calcom/embed-react@1.2.0
+  - @calcom/embed-snippet@1.1.0
+
 ## 2.9.4

 ### Patch Changes
@@ -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,32 +1,55 @@
-import { isEmpty } from "lodash";
+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 = (): null => {
+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 = {}
-    if (isEmpty(i18n)) return;
+    if (Object.keys(i18n).length === 0) return;
    // if locale is ready and the i18n.language does != locale - changeLanguage
    if (locale && i18n.language !== locale) {
      i18n.changeLanguage(locale);
@@ -35,7 +58,6 @@ const I18nLanguageHandler = (): null => {
    document.dir = i18n.dir();
    document.documentElement.setAttribute("lang", locale);
  }, [locale, i18n]);
-
  return null;
 };

@@ -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,115 +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) => category === "calendar")) {
-    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
@@ -332,7 +336,7 @@ function BookingListItem(booking: BookingItemProps) {
        </DialogContent>
      </Dialog>

-      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
+      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
        <td
          className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
          onClick={onClickTableData}>
@@ -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",
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
-import { z } from "zod";
+import type { z } from "zod";

 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
@@ -17,15 +17,25 @@ import {
  allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
-import { EditableSchema } from "@calcom/features/form-builder/FormBuilderFieldsSchema"
+import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
-import { Edit, Copy } from "@calcom/ui/components/icon";
+import {
+  Alert,
+  Button,
+  CheckboxField,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
+import { Copy, Edit } from "@calcom/ui/components/icon";
+import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";

 import RequiresConfirmationController from "./RequiresConfirmationController";

@@ -87,7 +97,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
          return {
            ...field,
            hidden: !enabled,
-            editable: (!enabled ? "system-but-hidden" : "system-but-optional") as z.infer<typeof EditableSchema>
+            editable: (!enabled ? "system-but-hidden" : "system-but-optional") as z.infer<
+              typeof EditableSchema
+            >,
          };
        }
        return field;
@@ -193,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}
@@ -260,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" />
@@ -312,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);
@@ -340,7 +370,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                      }}
                    />
                    <div className="mt-2">
-                      <Checkbox
+                      <CheckboxField
                        description={t("show_attendees")}
                        disabled={seatsLocked.disabled}
                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
@@ -1,3 +1,5 @@
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";

@@ -158,9 +160,21 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
      {!shouldLockDisableProps("apps").disabled && (
        <div className="bg-muted rounded-md p-8">
          {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
+            <>
+              <h2 className="text-emphasis mb-2 text-xl font-semibold leading-5 tracking-[0.01em]">
+                {t("available_apps_lower_case")}
+              </h2>
+              <p className="text-default mb-6 text-sm font-normal">
+                <Trans i18nKey="available_apps_desc">
+                  You have no apps installed. View popular apps below and explore more in our &nbsp;
+                  <Link className="cursor-pointer underline" href="/apps">
+                    App Store
+                  </Link>
+                </Trans>
+              </p>
+            </>
          ) : null}
-          <div className="before:border-0">
+          <div className="bg-default border-subtle divide-subtle divide-y rounded-md border before:border-0">
            {notInstalledApps?.map((app) => (
              <EventTypeAppCard
                getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
@@ -1,5 +1,5 @@
 import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
+import { useState, memo } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
@@ -71,86 +71,91 @@ const format = (date: Date, hour12: boolean) =>
    hourCycle: hour12 ? "h12" : "h24",
  }).format(new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss")));

-const EventTypeScheduleDetails = ({
-  isManagedEventType,
-  selectedScheduleValue,
-}: {
-  isManagedEventType: boolean;
-  selectedScheduleValue: AvailabilityOption | undefined;
-}) => {
-  const { data: loggedInUser } = useMeQuery();
-  const timeFormat = loggedInUser?.timeFormat;
-  const { t, i18n } = useLocale();
-  const { watch } = useFormContext<FormValues>();
+const EventTypeScheduleDetails = memo(
+  ({
+    isManagedEventType,
+    selectedScheduleValue,
+  }: {
+    isManagedEventType: boolean;
+    selectedScheduleValue: AvailabilityOption | undefined;
+  }) => {
+    const { data: loggedInUser } = useMeQuery();
+    const timeFormat = loggedInUser?.timeFormat;
+    const { t, i18n } = useLocale();
+    const { watch } = useFormContext<FormValues>();

-  const scheduleId = watch("schedule");
-  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
-    {
-      scheduleId: scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
-      isManagedEventType,
-    },
-    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
-  );
+    const scheduleId = watch("schedule");
+    const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
+      {
+        scheduleId:
+          scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
+        isManagedEventType,
+      },
+      { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
+    );

-  const filterDays = (dayNum: number) =>
-    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+    const filterDays = (dayNum: number) =>
+      schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];

-  return (
-    <div className="border-default space-y-4 rounded border px-6 pb-4">
-      <ol className="table border-collapse text-sm">
-        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-          const isAvailable = !!filterDays(index).length;
-          return (
-            <li key={day} className="my-6 flex border-transparent last:mb-2">
-              <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32 ",
-                  !isAvailable ? "text-subtle line-through" : "text-default"
-                )}>
-                {day}
-              </span>
-              {isLoading ? (
-                <SkeletonText className="block h-5 w-60" />
-              ) : isAvailable ? (
-                <div className="space-y-3 text-right">
-                  {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="text-default flex items-center leading-4">
-                      <span className="w-16 sm:w-28 sm:text-left">
-                        {format(dayRange.startTime, timeFormat === 12)}
-                      </span>
-                      <span className="ms-4">-</span>
-                      <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-      <hr className="border-subtle" />
-      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-          <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 && (
-          <Button
-            href={`/availability/${schedule.id}`}
-            disabled={isLoading}
-            color="minimal"
-            EndIcon={ExternalLink}
-            target="_blank"
-            rel="noopener noreferrer">
-            {t("edit_availability")}
-          </Button>
-        )}
+    return (
+      <div className="border-default space-y-4 rounded border px-6 pb-4">
+        <ol className="table border-collapse text-sm">
+          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+            const isAvailable = !!filterDays(index).length;
+            return (
+              <li key={day} className="my-6 flex border-transparent last:mb-2">
+                <span
+                  className={classNames(
+                    "w-20 font-medium sm:w-32 ",
+                    !isAvailable ? "text-subtle line-through" : "text-default"
+                  )}>
+                  {day}
+                </span>
+                {isLoading ? (
+                  <SkeletonText className="block h-5 w-60" />
+                ) : isAvailable ? (
+                  <div className="space-y-3 text-right">
+                    {filterDays(index).map((dayRange, i) => (
+                      <div key={i} className="text-default flex items-center leading-4">
+                        <span className="w-16 sm:w-28 sm:text-left">
+                          {format(dayRange.startTime, timeFormat === 12)}
+                        </span>
+                        <span className="ms-4">-</span>
+                        <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+        <hr className="border-subtle" />
+        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+          <span className="text-default flex items-center justify-center text-sm sm:justify-start">
+            <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.readOnly && (
+            <Button
+              href={`/availability/${schedule.id}`}
+              disabled={isLoading}
+              color="minimal"
+              EndIcon={ExternalLink}
+              target="_blank"
+              rel="noopener noreferrer">
+              {t("edit_availability")}
+            </Button>
+          )}
+        </div>
      </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+EventTypeScheduleDetails.displayName = "EventTypeScheduleDetails";

 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
  const { t } = useLocale();
@@ -197,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";
@@ -19,16 +21,17 @@ interface IUserToValue {
  email: string;
 }

-const mapUserToValue = ({ id, name, username, email }: IUserToValue) => ({
+const mapUserToValue = ({ id, name, username, email }: IUserToValue, pendingString: string) => ({
  value: `${id || ""}`,
-  label: `${name || ""}`,
+  label: `${name || email || ""}${!username ? ` (${pendingString})` : ""}`,
  avatar: `${WEBAPP_URL}/${username}/avatar.png`,
  email,
 });

 export const mapMemberToChildrenOption = (
  member: EventTypeSetupProps["teamMembers"][number],
-  slug: string
+  slug: string,
+  pendingString: string
 ) => {
  return {
    slug,
@@ -43,7 +46,7 @@ export const mapMemberToChildrenOption = (
      eventTypeSlugs: member.eventTypes ?? [],
    },
    value: `${member.id ?? ""}`,
-    label: member.name ?? "",
+    label: `${member.name || member.email || ""}${!member.username ? ` (${pendingString})` : ""}`,
  };
 };

@@ -98,6 +101,7 @@ const CheckedHostField = ({
  isFixed,
  value,
  onChange,
+  helperText,
  ...rest
 }: {
  labelText: string;
@@ -106,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">
@@ -135,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,
@@ -166,6 +184,7 @@ const RoundRobinHosts = ({
        value={value}
        placeholder={t("add_fixed_hosts")}
        labelText={t("fixed_hosts")}
+        helperText={FixedHostHelper}
      />
      <CheckedHostField
        options={teamMembers.sort(sortByLabel)}
@@ -174,6 +193,7 @@ const RoundRobinHosts = ({
        isFixed={false}
        placeholder={t("add_attendees")}
        labelText={t("round_robin_hosts")}
+        helperText={t("round_robin_helper")}
      />
    </>
  );
@@ -291,9 +311,13 @@ export const EventTeamTab = ({
      // description: t("round_robin_description"),
    },
  ];
-  const teamMembersOptions = teamMembers.map(mapUserToValue);
-  const childrenEventTypeOptions = teamMembers.map((member) => {
-    return mapMemberToChildrenOption(member, eventType.slug);
+  const pendingMembers = (member: (typeof teamMembers)[number]) =>
+    !!eventType.team?.parentId || !!member.username;
+  const teamMembersOptions = teamMembers
+    .filter(pendingMembers)
+    .map((member) => mapUserToValue(member, t("pending")));
+  const childrenEventTypeOptions = teamMembers.filter(pendingMembers).map((member) => {
+    return mapMemberToChildrenOption(member, eventType.slug, t("pending"));
  });
  const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
  return (
@@ -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 { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
+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) => {
@@ -209,10 +209,8 @@ function EventTypeSingleLayout({
        }`,
      });
    }
-    if (isManagedEventType || isChildrenManagedEventType) {
-      // Removing apps and workflows for manageg event types by admins v1
-      navigation.splice(0, 1);
-    } else {
+    const showWebhooks = !(isManagedEventType || isChildrenManagedEventType);
+    if (showWebhooks) {
      navigation.push({
        name: "webhooks",
        href: `/event-types/${eventType.id}?tabName=webhooks`,
@@ -234,7 +232,7 @@ function EventTypeSingleLayout({
    formMethods,
  ]);

-  const orgBranding = useOrgBrandingValues();
+  const orgBranding = useOrgBranding();
  const isOrgEvent = orgBranding?.fullDomain;
  const permalink = `${orgBranding?.fullDomain ?? CAL_URL}/${
    team ? `${!isOrgEvent ? "team/" : ""}${team.slug}` : eventType.users[0].username
@@ -312,12 +310,13 @@ function EventTypeSingleLayout({
                    showToast("Link copied!", "success");
                  }}
                />
-                <EmbedButton
+                <EventTypeEmbedButton
                  embedUrl={encodeURIComponent(embedLink)}
                  StartIcon={Code}
                  color="secondary"
                  variant="icon"
                  tooltip={t("embed")}
+                  eventId={eventType.id}
                />
              </>
            )}
@@ -407,13 +406,13 @@ function EventTypeSingleLayout({
              className="primary-navigation"
              tabs={EventTypeTabs}
              sticky
-              linkProps={{ shallow: true }}
+              linkShallow
              itemClassname="items-start"
              iconClassName="md:mt-px"
            />
          </div>
          <div className="p-2 md:mx-0 md:p-0 xl:hidden">
-            <HorizontalTabs tabs={EventTypeTabs} linkProps={{ shallow: true }} />
+            <HorizontalTabs tabs={EventTypeTabs} linkShallow />
          </div>
          <div className="w-full ltr:mr-2 rtl:ml-2">
            <div
@@ -451,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: defaultScheduleId ?? undefined },
    {
-      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";
@@ -15,6 +15,7 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";

 interface IUserSettingsProps {
  nextStep: () => void;
+  hideUsername?: boolean;
 }

 const UserSettings = (props: IUserSettingsProps) => {
@@ -66,8 +67,8 @@ const UserSettings = (props: IUserSettingsProps) => {
  return (
    <form onSubmit={onSubmit}>
      <div className="space-y-6">
-        {/* Username textfield */}
-        <UsernameAvailabilityField />
+        {/* Username textfield: when not coming from signup */}
+        {!props.hideUsername && <UsernameAvailabilityField />}

        {/* Full name textfield */}
        <div className="w-full">
@@ -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 (
@@ -12,7 +12,7 @@ import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 interface DisableTwoFactorAuthModalProps {
  open: boolean;
  onOpenChange: () => void;
-
+  disablePassword?: boolean;
  /** Called when the user closes the modal without disabling two-factor auth */
  onCancel: () => void;
  /** Called when the user disables two-factor auth */
@@ -27,6 +27,7 @@ interface DisableTwoFactorValues {
 const DisableTwoFactorAuthModal = ({
  onDisable,
  onCancel,
+  disablePassword,
  open,
  onOpenChange,
 }: DisableTwoFactorAuthModalProps) => {
@@ -75,23 +76,30 @@ const DisableTwoFactorAuthModal = ({
      <DialogContent title={t("disable_2fa")} description={t("disable_2fa_recommendation")} type="creation">
        <Form form={form} handleSubmit={handleDisable}>
          <div className="mb-8">
-            <PasswordField
-              labelProps={{
-                className: "block text-sm font-medium text-default",
-              }}
-              {...form.register("password")}
-              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
-            />
+            {!disablePassword && (
+              <PasswordField
+                labelProps={{
+                  className: "block text-sm font-medium text-default",
+                }}
+                {...form.register("password")}
+                className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              />
+            )}
            <TwoFactor center={false} />

            {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
          </div>

-          <DialogFooter showDivider className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+          <DialogFooter showDivider className="relative mt-5">
            <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>
@@ -185,7 +185,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
              )}
            </div>
          </WithStep>
-          <DialogFooter className="mt-8 sm:flex sm:flex-row-reverse" showDivider>
+          <DialogFooter className="mt-8" showDivider>
            <Button color="secondary" onClick={onCancel}>
              {t("cancel")}
            </Button>
@@ -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>;
@@ -3,7 +3,7 @@ import type { GroupBase, Props, InputProps, SingleValue, MultiValue } from "reac
 import ReactSelect, { components } from "react-select";

 import classNames from "@calcom/lib/classNames";
-import useTheme from "@calcom/lib/hooks/useTheme";
+import { useGetTheme } from "@calcom/lib/hooks/useTheme";

 export type SelectProps<
  Option,
@@ -30,7 +30,7 @@ function Select<
  Group extends GroupBase<Option> = GroupBase<Option>
 >({ className, ...props }: SelectProps<Option, IsMulti, Group>) {
  const [mounted, setMounted] = useState<boolean>(false);
-  const { resolvedTheme, forcedTheme } = useTheme();
+  const { resolvedTheme, forcedTheme } = useGetTheme();
  const hasDarkTheme = !forcedTheme && resolvedTheme === "dark";
  const darkThemeColors = {
    /** Dark Theme starts */
@@ -0,0 +1 @@
+export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);
@@ -1,16 +1,15 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
-import { SessionProvider } 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";
-import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
 import { FeatureProvider } from "@calcom/features/flags/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,14 +54,23 @@ type AppPropsWithChildren = AppProps & {
  children: ReactNode;
 };

-const CustomI18nextProvider = (props: AppPropsWithChildren) => {
+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;
+};
+
+// We dont need to pass nonce to the i18n provider - this was causing x2-x3 re-renders on a hard refresh
+type AppPropsWithoutNonce = Omit<AppPropsWithChildren, "pageProps"> & {
+  pageProps: Omit<AppPropsWithChildren["pageProps"], "nonce">;
+};
+
+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,
@@ -65,6 +80,7 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
    },
    router: locale ? { locale } : props.router,
  } as unknown as ComponentProps<typeof I18nextAdapter>;
+
  return <I18nextAdapter {...passedProps} />;
 };

@@ -78,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 = typeof window !== "undefined" ? window.getEmbedNamespace() : null;
+  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 && (
@@ -137,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;
  })();
@@ -158,10 +171,10 @@ function getThemeProviderProps({
    ? ThemeSupport.None
    : ThemeSupport.App;

-  const isBookingPageThemSupportRequired = themeSupport === ThemeSupport.Booking;
+  const isBookingPageThemeSupportRequired = themeSupport === ThemeSupport.Booking;
  const themeBasis = props.themeBasis;

-  if ((isBookingPageThemSupportRequired || isEmbedMode) && !themeBasis) {
+  if ((isBookingPageThemeSupportRequired || isEmbedMode) && !themeBasis) {
    console.warn(
      "`themeBasis` is required for booking page theme support. Not providing it will cause theme flicker."
    );
@@ -184,7 +197,7 @@ function getThemeProviderProps({
      `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
    : themeSupport === ThemeSupport.App
    ? "app-theme"
-    : isBookingPageThemSupportRequired
+    : isBookingPageThemeSupportRequired
    ? `booking-theme${appearanceIdSuffix}`
    : undefined;

@@ -207,27 +220,52 @@ function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
 }

+function useOrgBrandingValues() {
+  const session = useSession();
+
+  const res = trpc.viewer.organizations.getBrand.useQuery(undefined, {
+    // Only fetch if we have a session to avoid flooding logs with errors
+    enabled: session.status === "authenticated",
+  });
+
+  if (res.status === "loading") {
+    return undefined;
+  }
+
+  if (res.status === "error") return null;
+
+  return res.data;
+}
+
 function OrgBrandProvider({ children }: { children: React.ReactNode }) {
  const orgBrand = useOrgBrandingValues();
-  return <OrgBrandingProvider value={orgBrand}>{children}</OrgBrandingProvider>;
+  return <OrgBrandingProvider value={{ orgBrand }}>{children}</OrgBrandingProvider>;
 }

 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 = {
+    pageProps: {
+      ...restPageProps,
+    },
+    ...rest,
+  };

  const RemainingProviders = (
    <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <SessionProvider session={session || undefined}>
-        <CustomI18nextProvider {...props}>
+      <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 */}
            <CalcomThemeProvider
              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>
@@ -240,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;
-};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export const IS_VISUAL_REGRESSION_TESTING = Boolean(globalThis.window?.Meticulous?.isRunningAsTest);`