v3.1.6

test: Create unit tests for react components in packages/ui/components/form/input (#10506 )
Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
2023-08-01 17:25:39 +01:00 · 2023-08-01 17:19:54 +01:00 · 2023-08-01 15:55:31 +00:00 · 2023-08-01 10:13:28 -04:00 · 2023-08-01 13:13:24 +00:00 · 2023-08-01 13:02:06 +00:00
704 changed files with 24277 additions and 10379 deletions
@@ -121,6 +121,7 @@ TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
 TWILIO_PHONE_NUMBER=
+TWILIO_WHATSAPP_PHONE_NUMBER=
 # For NEXT_PUBLIC_SENDER_ID only letters, numbers and spaces are allowed (max. 11 characters)
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=
@@ -214,9 +215,3 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
-
-#Enables New booker for Embed only
-NEW_BOOKER_ENABLED_FOR_EMBED=0
-
-#Enables New booker for All but Embed requests
-NEW_BOOKER_ENABLED_FOR_NON_EMBED=0
@@ -20,8 +20,20 @@ A summary of the issue. This needs to be a clear detailed-rich summary.

 Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

+### Actual Results
+
+- 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
+
 ### 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.
+
+### 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.
@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
  - name: Questions
-    url: https://cal.com/slack
-    about: Ask a general question about the project on our Slack workspace
+    url: https://go.cal.com/discord
+    about: Ask a general question about the project on our discord community
@@ -39,3 +39,11 @@ assignees: ""
 -->

 (Write your answer here.)
+
+### Requirement/Document
+
+<!--
+  Is there any type of document that could support that feature?
+-->
+
+(Share it here.)
@@ -8,22 +8,31 @@ Fixes # (issue)
 Loom Video: https://www.loom.com/
 -->

+## 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.
+
 ## 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 -->
+<!-- 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 -->

- [ ] Test A
- [ ] Test B
+- 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

@@ -1,15 +0,0 @@
-name: "Set environment variables"
-description: "Configures environment variables for a workflow"
-runs:
-  using: "composite"
-  steps:
-    - name: Create env file
-      uses: buildjet/cache@v3
-      id: env-cache
-      with:
-        path: gh.env
-        key: env-cache-${{ hashFiles('gh.env') }}
-    - name: Set Environment Variables
-      uses: tw3lveparsecs/github-actions-setvars@latest
-      with:
-        envFilePath: gh.env
@@ -0,0 +1,23 @@
+name: Cron - scheduleWhatsappReminders
+
+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 * * * *"
+jobs:
+  cron-scheduleWhatsappReminders:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleWhatsappReminders \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail
@@ -22,6 +22,7 @@ jobs:
        uses: crowdin/github-action@1.5.1
        with:
          upload_sources: true
+          upload_translations: true
          download_translations: true
          push_translations: true
          commit_message: "New Crowdin translations by Github Action"
@@ -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,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+    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 +27,37 @@ 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 }}
+          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,39 @@ 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 }}
+          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,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+    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 +27,37 @@ 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 }}
+          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
@@ -24,13 +26,34 @@ 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 }}
+          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
@@ -1,53 +0,0 @@
-name: Create .env file
-
-on:
-  workflow_call:
-
-env:
-  INPUT_ENV_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  INPUT_ENV_NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-  INPUT_ENV_NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-  INPUT_ENV_NEXTAUTH_SECRET: secret
-  INPUT_ENV_GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-  INPUT_ENV_GOOGLE_LOGIN_ENABLED: true
-  # INPUT_ENV_CRON_API_KEY: xxx
-  # INPUT_ENV_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 }}/gh.env
-      - uses: buildjet/cache@v3
-        id: env-cache
-        with:
-          path: gh.env
-          key: env-cache-${{ hashFiles('gh.env') }}
@@ -0,0 +1,16 @@
+name: Assign PR team labels
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  team-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: equitybee/team-label-action@main
+        with:
+          repo-token: ${{ secrets.GH_ACCESS_TOKEN }}
+          organization-name: calcom
+          ignore-labels: "app-store, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
@@ -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,30 @@ 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 }}
+  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 +36,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,30 @@ 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 }}
+  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 +44,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);
+            }
@@ -1,7 +1,7 @@
 name: "Welcome new contributors"

-on: 
- issues: 
+on:
+ issues:
  types: opened
 pull_request:
   types: opened
@@ -13,16 +13,16 @@ permissions:
 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 [slack](https://calendso.slack.com/)
-          issue-message: | 
-            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉
+  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. ❤️🎉
@@ -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.

@@ -17,7 +17,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)
+  if (!hasValidLicense && process.env.NODE_ENV !== "development")
    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) {
@@ -1,5 +1,6 @@
 import { z } from "zod";

+import slugify from "@calcom/lib/slugify";
 import { _EventTypeModel as EventType, _HostModel } from "@calcom/prisma/zod";
 import { customInputSchema, eventTypeBookingFields } from "@calcom/prisma/zod-utils";

@@ -58,7 +59,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
 const schemaEventTypeCreateParams = z
  .object({
    title: z.string(),
-    slug: z.string(),
+    slug: z.string().transform((s) => slugify(s)),
    description: z.string().optional().nullable(),
    length: z.number().int(),
    metadata: z.any().optional(),
@@ -76,7 +77,10 @@ export const schemaEventTypeCreateBodyParams = schemaEventTypeBaseBodyParams
 const schemaEventTypeEditParams = z
  .object({
    title: z.string().optional(),
-    slug: z.string().optional(),
+    slug: z
+      .string()
+      .transform((s) => slugify(s))
+      .optional(),
    length: z.number().int().optional(),
    seatsPerTimeSlot: z.number().optional(),
    seatsShowAttendees: z.boolean().optional(),
@@ -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
@@ -56,6 +56,7 @@ async function getHandler(req: NextApiRequest) {
      owner: { select: { username: true, id: true } },
    },
  });
+  if (data.length === 0) new HttpError({ statusCode: 404, message: "No event types were found" });
  return {
    event_types: data.map((eventType) => {
      const link = getCalLink(eventType);
@@ -47,7 +47,6 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *               slug:
 *                 type: string
 *                 description: Unique slug for the event type
- *                 example: my-event
 *               hosts:
 *                 type: array
 *                 items:
@@ -168,9 +167,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *                             type: string
 *                           displayLocationPublicly:
 *                             type: boolean
- *           example:
+ *           examples:
 *              event-type:
- *                summary: An example of event type POST request
+ *                summary: An example of an individual event type POST request
 *                value:
 *                  title: Hello World
 *                  slug: hello-world
@@ -205,6 +204,42 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *                      }
 *                    }
 *                  }
+ *              team-event-type:
+ *                summary: An example of a team event type POST request
+ *                value:
+ *                  title: "Tennis class"
+ *                  slug: "tennis-class-{{$guid}}"
+ *                  length: 60
+ *                  hidden: false
+ *                  position: 0
+ *                  teamId: 3
+ *                  eventName: null
+ *                  timeZone: null
+ *                  periodType: "UNLIMITED"
+ *                  periodStartDate: null
+ *                  periodEndDate: null
+ *                  periodDays: null
+ *                  periodCountCalendarDays: null
+ *                  requiresConfirmation: true
+ *                  recurringEvent:
+ *                    interval: 2
+ *                    count: 10
+ *                    freq: 2
+ *                  disableGuests: false
+ *                  hideCalendarNotes: false
+ *                  minimumBookingNotice: 120
+ *                  beforeEventBuffer: 0
+ *                  afterEventBuffer: 0
+ *                  schedulingType: "COLLECTIVE"
+ *                  price: 0
+ *                  currency: "usd"
+ *                  slotInterval: null
+ *                  successRedirectUrl: null
+ *                  description: null
+ *                  locations:
+ *                    - address: "London"
+ *                      type: "inPerson"
+ *                  metadata: {}
 *     tags:
 *     - event-types
 *     externalDocs:
@@ -2,29 +2,36 @@ import type { NextApiRequest, NextApiResponse } from "next";

 import { HttpError } from "@calcom/lib/http-error";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
-import { MembershipRole } from "@calcom/prisma/enums";
+import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { createContext } from "@calcom/trpc/server/createContext";
-import { publishHandler } from "@calcom/trpc/server/routers/viewer/teams/publish.handler";
+import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";

 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";

 import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import { schemaQueryTeamId } from "~/lib/validations/shared/queryTeamId";

 import authMiddleware, { checkPermissions } from "./_auth-middleware";

 const patchHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  await checkPermissions(req, { in: [MembershipRole.OWNER, MembershipRole.ADMIN] });
-  /** @see https://trpc.io/docs/server-side-calls */
-  const ctx = await createContext({ req, res });
-  const user = ctx.user;
-  if (!user) {
-    throw new Error("Internal Error.");
+  async function sessionGetter() {
+    return {
+      user: {
+        id: req.userId,
+        username: "" /* Not used in this context */,
+        role: req.isAdmin ? UserPermissionRole.ADMIN : UserPermissionRole.USER,
+      },
+      hasValidLicense: true /* To comply with TS signature */,
+      expires: "" /* Not used in this context */,
+    };
  }
+  /** @see https://trpc.io/docs/server-side-calls */
+  const ctx = await createContext({ req, res }, sessionGetter);
  try {
-    const { teamId } = schemaQueryTeamId.parse(req.query);
-    return await publishHandler({ input: { teamId }, ctx: { ...ctx, user } });
+    const caller = viewerTeamsRouter.createCaller(ctx);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return await caller.publish(req.query as any /* Let tRPC handle this */);
  } catch (cause) {
    if (cause instanceof TRPCError) {
      const statusCode = getHTTPStatusCodeFromError(cause);
@@ -12,7 +12,7 @@
    "@calcom/ui": "*",
    "@radix-ui/react-avatar": "^1.0.0",
    "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-id": "^1.0.0",
    "@radix-ui/react-popover": "^1.0.2",
@@ -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
@@ -3,9 +3,10 @@ import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";

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

 type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
@@ -19,6 +20,7 @@ type AppListCardProps = {
  isTemplate?: boolean;
  invalidCredential?: boolean;
  children?: ReactNode;
+  credentialOwner?: CredentialOwner;
 } & ShouldHighlight;

 const schema = z.object({ hl: z.string().optional() });
@@ -36,6 +38,7 @@ export default function AppListCard(props: AppListCardProps) {
    isTemplate,
    invalidCredential,
    children,
+    credentialOwner,
  } = props;
  const {
    data: { hl },
@@ -65,7 +68,7 @@ export default function AppListCard(props: AppListCardProps) {

  return (
    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
-      <div className="flex gap-x-3 px-5 py-4">
+      <div className="flex items-center gap-x-3 px-5 py-4">
        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
        <div className="flex grow flex-col gap-y-1 truncate">
          <div className="flex items-center gap-x-2">
@@ -85,6 +88,21 @@ export default function AppListCard(props: AppListCardProps) {
            </div>
          )}
        </div>
+        {credentialOwner && (
+          <div>
+            <Badge variant="gray">
+              <div className="flex items-center">
+                <Avatar
+                  className="mr-2"
+                  alt={credentialOwner.name || "Nameless"}
+                  size="xs"
+                  imageSrc={credentialOwner.avatar}
+                />
+                {credentialOwner.name}
+              </div>
+            </Badge>
+          </div>
+        )}

        {actions}
      </div>
@@ -1,4 +1,3 @@
-import { isEmpty } from "lodash";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";

@@ -20,13 +19,13 @@ export function useViewerI18n() {
 /**
 * Auto-switches locale client-side to the logged in user's preference
 */
-const I18nLanguageHandler = (): null => {
+const I18nLanguageHandler = () => {
  const { i18n } = useTranslation("common");
  const locale = useViewerI18n().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 +34,6 @@ const I18nLanguageHandler = (): null => {
    document.dir = i18n.dir();
    document.documentElement.setAttribute("lang", locale);
  }, [locale, i18n]);
-
  return null;
 };

@@ -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 } from "@calcom/lib/constants";
+import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";

 import type { AppProps } from "@lib/app-providers";
@@ -53,10 +53,6 @@ function PageWrapper(props: AppProps) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page);

-  // Canonical: Check if the URL is from cal.com so that we set the canonical conditionally
-  const isCalcom =
-    WEBAPP_URL &&
-    (new URL(WEBAPP_URL).hostname.endsWith("cal.com") || new URL(WEBAPP_URL).hostname.endsWith("cal.dev"));
  const path = router.asPath;

  return (
@@ -70,7 +66,7 @@ function PageWrapper(props: AppProps) {
      <DefaultSeo
        // Set canonical to https://cal.com or self-hosted URL
        canonical={
-          isCalcom
+          IS_CALCOM
            ? buildCanonical({ path, origin: "https://cal.com" }) // cal.com & .dev
            : buildCanonical({ path, origin: WEBAPP_URL }) // self-hosted
        }
@@ -5,15 +5,29 @@ import React, { useState } from "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 { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 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 { CAL_URL } from "@calcom/lib/constants";
 import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import type { App as AppType } from "@calcom/types/App";
+import type { App as AppType, AppFrontendPayload } from "@calcom/types/App";
+import type { ButtonProps } from "@calcom/ui";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
+import {
+  Dropdown,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuPortal,
+  DropdownMenuLabel,
+  DropdownItem,
+  Avatar,
+} from "@calcom/ui";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";

 /* These app slugs all require Google Cal to be installed */

@@ -60,11 +74,16 @@ const Component = ({
  }).format(price);

  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  const appCredentials = trpc.viewer.appCredentialsByType.useQuery(
+  const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
    { appType: type },
    {
-      onSuccess(data) {
-        setExistingCredentials(data);
+      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) || []);
      },
    }
  );
@@ -141,7 +160,7 @@ const Component = ({
            )}
          </header>
        </div>
-        {!appCredentials.isLoading ? (
+        {!appDbQuery.isLoading ? (
          isGlobal ||
          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
            <div className="flex space-x-3">
@@ -166,28 +185,25 @@ const Component = ({
                      };
                    }
                    return (
-                      <Button
-                        StartIcon={Plus}
+                      <InstallAppButtonChild
+                        appCategories={categories}
+                        userAdminTeams={appDbQuery.data?.userAdminTeams}
+                        addAppMutationInput={{ type, variant, slug }}
+                        multiInstall
                        {...props}
-                        // @TODO: Overriding color and size prevent us from
-                        // having to duplicate InstallAppButton for now.
-                        color="primary"
-                        size="base"
-                        data-testid="install-app-button">
-                        {t("install_another")}
-                      </Button>
+                      />
                    );
                  }}
                />
              )}
            </div>
-          ) : existingCredentials.length > 0 ? (
+          ) : showDisconnectIntegration ? (
            <DisconnectIntegration
              buttonProps={{ color: "secondary" }}
              label={t("disconnect")}
              credentialId={existingCredentials[0]}
              onSuccess={() => {
-                appCredentials.refetch();
+                appDbQuery.refetch();
              }}
            />
          ) : (
@@ -206,15 +222,13 @@ const Component = ({
                  };
                }
                return (
-                  <Button
-                    data-testid="install-app-button"
+                  <InstallAppButtonChild
+                    appCategories={categories}
+                    userAdminTeams={appDbQuery.data?.userAdminTeams}
+                    addAppMutationInput={{ type, variant, slug }}
+                    credentials={appDbQuery.data?.credentials}
                    {...props}
-                    // @TODO: Overriding color and size prevent us from
-                    // having to duplicate InstallAppButton for now.
-                    color="primary"
-                    size="base">
-                    {t("install_app")}
-                  </Button>
+                  />
                );
              }}
            />
@@ -385,3 +399,108 @@ export default function App(props: {
    </Shell>
  );
 }
+
+const InstallAppButtonChild = ({
+  userAdminTeams,
+  addAppMutationInput,
+  appCategories,
+  multiInstall,
+  credentials,
+  ...props
+}: {
+  userAdminTeams?: UserAdminTeams;
+  addAppMutationInput: { type: AppFrontendPayload["type"]; variant: string; slug: string };
+  appCategories: string[];
+  multiInstall?: boolean;
+  credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
+} & 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 ||
+    appCategories.some((category) => ["calendar", "conferencing"].includes(category))
+  ) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        {...props}
+        // @TODO: Overriding color and size prevent us from
+        // having to duplicate InstallAppButton for now.
+        color="primary"
+        size="base">
+        {multiInstall ? t("install_another") : t("install_app")}
+      </Button>
+    );
+  }
+
+  return (
+    <Dropdown>
+      <DropdownMenuTrigger asChild>
+        <Button
+          data-testid="install-app-button"
+          {...props}
+          // @TODO: Overriding color and size prevent us from
+          // having to duplicate InstallAppButton for now.
+          color="primary"
+          size="base">
+          {multiInstall ? t("install_another") : t("install_app")}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuPortal>
+        <DropdownMenuContent
+          onInteractOutside={(event) => {
+            if (mutation.isLoading) event.preventDefault();
+          }}>
+          {mutation.isLoading && (
+            <div className="z-1 fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+              <Spinner />
+            </div>
+          )}
+          <DropdownMenuLabel>{t("install_app_on")}</DropdownMenuLabel>
+          {userAdminTeams.map((team) => {
+            const isInstalled =
+              credentials &&
+              credentials.some((credential) =>
+                credential?.teamId ? credential?.teamId === team.id : credential.userId === team.id
+              );
+
+            return (
+              <DropdownItem
+                type="button"
+                data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
+                key={team.id}
+                disabled={isInstalled}
+                StartIcon={(props) => (
+                  <Avatar
+                    alt={team.logo || ""}
+                    imageSrc={team.logo || `${CAL_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
+                    size="sm"
+                    {...props}
+                  />
+                )}
+                onClick={() => {
+                  mutation.mutate(
+                    team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
+                  );
+                }}>
+                <p>
+                  {team.name} {isInstalled && `(${t("installed")})`}
+                </p>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+};
@@ -1,51 +1,117 @@
+import type {
+  DefaultEventLocationType,
+  EventLocationTypeFromApp,
+  LocationObject,
+} from "@calcom/app-store/locations";
 import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
 import { Link } from "@calcom/ui/components/icon";

-import type { Props } from "./pages/AvailabilityPage";
-
 const excludeNullValues = (value: unknown) => !!value;

-export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
+function RenderIcon({
+  eventLocationType,
+  isTooltip,
+}: {
+  eventLocationType: DefaultEventLocationType | EventLocationTypeFromApp;
+  isTooltip: boolean;
+}) {
+  return (
+    <img
+      src={eventLocationType.iconUrl}
+      className={classNames(
+        "me-[10px]  h-4 w-4 opacity-70 dark:opacity-100",
+        !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : "",
+        !eventLocationType.iconUrl?.startsWith("/app-store") && isTooltip && "invert"
+      )}
+      alt={`${eventLocationType.label} icon`}
+    />
+  );
+}
+
+function RenderLocationTooltip({ locations }: { locations: LocationObject[] }) {
  const { t } = useLocale();

-  const renderLocations = locations.map((location, index) => {
-    const eventLocationType = getEventLocationType(location.type);
-    if (!eventLocationType) {
-      // It's possible that the location app got uninstalled
-      return null;
-    }
-    if (eventLocationType.variable === "hostDefault") {
-      return null;
-    }
+  return (
+    <div className="my-2 me-2 flex w-full flex-col space-y-3 break-words">
+      <p>{t("select_on_next_step")}</p>
+      {locations.map(
+        (
+          location: Pick<Partial<LocationObject>, "link" | "address"> &
+            Omit<LocationObject, "link" | "address">,
+          index: number
+        ) => {
+          const eventLocationType = getEventLocationType(location.type);
+          if (!eventLocationType) {
+            return null;
+          }
+          const translatedLocation = getTranslatedLocation(location, eventLocationType, t);
+          return (
+            <div key={`${location.type}-${index}`} className="font-sm flex flex-row items-center">
+              <RenderIcon eventLocationType={eventLocationType} isTooltip />
+              <p className="line-clamp-1">{translatedLocation}</p>
+            </div>
+          );
+        }
+      )}
+    </div>
+  );
+}

-    const translatedLocation = getTranslatedLocation(location, eventLocationType, t);
+export function AvailableEventLocations({ locations }: { locations: LocationObject[] }) {
+  const { t } = useLocale();

-    return (
-      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-        {eventLocationType.iconUrl === "/link.svg" ? (
-          <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
-        ) : (
-          <img
-            src={eventLocationType.iconUrl}
-            className={classNames(
-              "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-              !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : ""
-            )}
-            alt={`${eventLocationType.label} icon`}
-          />
-        )}
-        <Tooltip content={translatedLocation}>
-          <p className="line-clamp-1">{translatedLocation}</p>
-        </Tooltip>
-      </div>
-    );
-  });
+  const renderLocations = locations.map(
+    (
+      location: Pick<Partial<LocationObject>, "link" | "address"> & Omit<LocationObject, "link" | "address">,
+      index: number
+    ) => {
+      const eventLocationType = getEventLocationType(location.type);
+      if (!eventLocationType) {
+        // It's possible that the location app got uninstalled
+        return null;
+      }
+      if (eventLocationType.variable === "hostDefault") {
+        return null;
+      }
+
+      const translatedLocation = getTranslatedLocation(location, eventLocationType, t);
+
+      return (
+        <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
+          {eventLocationType.iconUrl === "/link.svg" ? (
+            <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
+          ) : (
+            <RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
+          )}
+          <Tooltip content={translatedLocation}>
+            <p className="line-clamp-1">{translatedLocation}</p>
+          </Tooltip>
+        </div>
+      );
+    }
+  );

  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
-  return filteredLocations.length ? (
+
+  return filteredLocations.length > 1 ? (
+    <div className="flex flex-row items-center text-sm font-medium">
+      <img
+        src="/map-pin.svg"
+        className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")}
+        alt="map-pin"
+      />
+      <Tooltip content={<RenderLocationTooltip locations={locations} />}>
+        <p className="line-clamp-1">
+          {t("location_options", {
+            locationCount: filteredLocations.length,
+          })}
+        </p>
+      </Tooltip>
+    </div>
+  ) : filteredLocations.length === 1 ? (
    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm">
      {filteredLocations}
    </div>
@@ -66,6 +66,10 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  );

  const reserveSlot = (slot: Slot) => {
+    // Prevent double clicking
+    if (reserveSlotMutation.isLoading || reserveSlotMutation.isSuccess) {
+      return;
+    }
    reserveSlotMutation.mutate({
      slotUtcStartDate: slot.time,
      eventTypeId,
@@ -132,8 +136,20 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                let slotFull, notEnoughSeats;

                if (slot.attendees && seatsPerTimeSlot) slotFull = slot.attendees >= seatsPerTimeSlot;
-                if (slot.attendees && bookingAttendees && 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()}`}>
@@ -144,7 +160,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                        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>
@@ -165,14 +183,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                        data-disabled="false">
                        {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                        {!!seatsPerTimeSlot && (
-                          <p
-                            className={`${
-                              slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
-                                ? "text-rose-600"
-                                : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
-                                ? "text-yellow-500"
-                                : "text-emerald-400"
-                            } text-sm`}>
+                          <p className={`${colorClass} text-sm`}>
                            {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
                            {seatsPerTimeSlot}{" "}
                            {t("seats_available", {
@@ -1,162 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
-
-import dayjs from "@calcom/dayjs";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { SchedulingType } from "@calcom/prisma/enums";
-import { Badge } from "@calcom/ui";
-import { CheckSquare, Clock } from "@calcom/ui/components/icon";
-
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
-
-import type { AvailabilityPageProps } from "../../pages/[user]/[type]";
-import type { BookPageProps } from "../../pages/[user]/book";
-import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]";
-import type { HashLinkPageProps } from "../../pages/d/[link]/book";
-import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]";
-import type { TeamBookingPageProps } from "../../pages/team/[slug]/book";
-import { AvailableEventLocations } from "./AvailableEventLocations";
-
-interface Props {
-  profile:
-    | AvailabilityPageProps["profile"]
-    | HashLinkPageProps["profile"]
-    | TeamBookingPageProps["profile"]
-    | BookPageProps["profile"]
-    | AvailabilityTeamPageProps["profile"]
-    | DynamicAvailabilityPageProps["profile"];
-  eventType:
-    | AvailabilityPageProps["eventType"]
-    | HashLinkPageProps["eventType"]
-    | TeamBookingPageProps["eventType"]
-    | BookPageProps["eventType"]
-    | AvailabilityTeamPageProps["eventType"]
-    | DynamicAvailabilityPageProps["eventType"];
-  isBookingPage?: boolean;
-  children: ReactNode;
-  isMobile?: boolean;
-  rescheduleUid?: string;
-}
-
-const BookingDescription: FC<Props> = (props) => {
-  const { profile, eventType, isBookingPage = false, children } = props;
-  const { date: bookingDate } = useRouterQuery("date");
-  const { t } = useLocale();
-  const { duration, setQuery: setDuration } = useRouterQuery("duration");
-
-  useEffect(() => {
-    if (
-      !duration ||
-      isNaN(Number(duration)) ||
-      (eventType.metadata?.multipleDuration &&
-        !eventType.metadata?.multipleDuration.includes(Number(duration)))
-    ) {
-      setDuration(eventType.length);
-    }
-  }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
-
-  let requiresConfirmation = eventType?.requiresConfirmation;
-  let requiresConfirmationText = t("requires_confirmation");
-  const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold;
-  if (rcThreshold) {
-    if (isBookingPage) {
-      if (dayjs(bookingDate).diff(dayjs(), rcThreshold.unit) > rcThreshold.time) {
-        requiresConfirmation = false;
-      }
-    } else {
-      requiresConfirmationText = t("requires_confirmation_threshold", {
-        ...rcThreshold,
-        unit: rcThreshold.unit.slice(0, -1),
-      });
-    }
-  }
-  return (
-    <>
-      <UserAvatars
-        profile={profile}
-        users={eventType.users}
-        showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-        size="sm"
-        truncateAfter={3}
-      />
-      <h2 className="text-default mb-2 mt-1 break-words text-sm font-medium ">
-        {eventType.team?.parent?.name} {profile.name}
-      </h2>
-      <h1 className="font-cal  text-emphasis mb-6 break-words text-2xl font-semibold leading-none">
-        {eventType.title}
-      </h1>
-      <div className=" text-default flex flex-col space-y-4 text-sm font-medium">
-        {eventType?.description && (
-          <div
-            className={classNames(
-              "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
-              isBookingPage && "text-default text-sm font-medium"
-            )}>
-            {/* TODO: Fix colors when token is introdcued to DS */}
-            <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
-              <EventTypeDescriptionSafeHTML eventType={eventType} />
-            </div>
-          </div>
-        )}
-        {requiresConfirmation && (
-          <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
-            <div>
-              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
-            </div>
-            {requiresConfirmationText}
-          </div>
-        )}
-        <AvailableEventLocations
-          locations={eventType.locations as AvailabilityPageProps["eventType"]["locations"]}
-        />
-        <div
-          className={classNames(
-            "flex flex-nowrap text-sm font-medium",
-            isBookingPage && "text-default",
-            !eventType.metadata?.multipleDuration && "items-center"
-          )}>
-          <Clock
-            className={classNames(
-              "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
-              isBookingPage && "mt-[2px]"
-            )}
-          />
-          {eventType.metadata?.multipleDuration !== undefined ? (
-            !isBookingPage ? (
-              <ul className="-mt-1 flex flex-wrap gap-1">
-                {eventType.metadata.multipleDuration.map((dur, idx) => (
-                  <li key={idx}>
-                    <Badge
-                      variant="gray"
-                      className={classNames(
-                        duration === dur.toString()
-                          ? "bg-emphasis border-emphasis text-emphasis "
-                          : "bg-subtle text-default border-transparent ",
-                        "cursor-pointer border"
-                      )}
-                      onClick={() => {
-                        setDuration(dur);
-                      }}>
-                      {dur} {t("minute_timeUnit")}
-                    </Badge>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              `${duration} ${t("minutes")}`
-            )
-          ) : (
-            `${eventType.length} ${t("minutes")}`
-          )}
-        </div>
-        {children}
-      </div>
-    </>
-  );
-};
-
-export default BookingDescription;
@@ -10,6 +10,7 @@ import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
+import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -49,6 +50,8 @@ type BookingItemProps = BookingItem & {
 function BookingListItem(booking: BookingItemProps) {
  // Get user so we can determine 12/24 hour format preferences
  const query = useMeQuery();
+  const bookerUrl = useBookerUrl();
+
  const user = query.data;
  const {
    t,
@@ -170,7 +173,7 @@ function BookingListItem(booking: BookingItemProps) {
          id: "reschedule",
          icon: Clock,
          label: t("reschedule_booking"),
-          href: `/reschedule/${booking.uid}${
+          href: `${bookerUrl}/reschedule/${booking.uid}${
            booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
          }`,
        },
@@ -1,292 +0,0 @@
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-import { z } from "zod";
-
-import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import dayjs from "@calcom/dayjs";
-import {
-  useEmbedNonStylesConfig,
-  useEmbedStyles,
-  useEmbedUiConfig,
-  useIsBackgroundTransparent,
-  useIsEmbed,
-} from "@calcom/embed-core/embed-iframe";
-import classNames from "@calcom/lib/classNames";
-import useGetBrandingColours from "@calcom/lib/getBrandColours";
-import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
-import notEmpty from "@calcom/lib/notEmpty";
-import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { trpc } from "@calcom/trpc";
-import { HeadSeo, NumberInput, useCalcomTheme } from "@calcom/ui";
-import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
-
-import { timeZone as localStorageTimeZone } from "@lib/clock";
-
-import BookingDescription from "@components/booking/BookingDescription";
-import { SlotPicker } from "@components/booking/SlotPicker";
-
-import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
-import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
-import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-
-const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
-
-const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
-/*const SlotPicker = dynamic(() => import("../SlotPicker").then((mod) => mod.SlotPicker), {
-  ssr: false,
-  loading: () => <div className="mt-8 px-4 pb-4 sm:mt-0 sm:p-4 md:min-w-[300px] md:px-5 lg:min-w-[455px]" />,
-});*/
-const TimezoneDropdown = dynamic(() => import("../TimezoneDropdown").then((mod) => mod.TimezoneDropdown), {
-  ssr: false,
-});
-
-const dateQuerySchema = z.object({
-  rescheduleUid: z.string().optional().default(""),
-  date: z.string().optional().default(""),
-  timeZone: z.string().optional().default(""),
-  seatReferenceUid: z.string().optional(),
-});
-
-export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
-
-const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor: string; darkBrandColor: string }) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
-const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
-  const router = useRouter();
-  const isEmbed = useIsEmbed(restProps.isEmbed);
-  const query = dateQuerySchema.parse(router.query);
-  const { rescheduleUid } = query;
-  useTheme(profile.theme);
-  useBrandColors({
-    brandColor: profile.brandColor,
-    darkBrandColor: profile.darkBrandColor,
-  });
-  const { t, i18n } = useLocale();
-  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
-  //TODO: Plan to remove shouldAlignCentrallyInEmbed config
-  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
-  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const isBackgroundTransparent = useIsBackgroundTransparent();
-
-  const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState<TimeFormat>(detectBrowserTimeFormat);
-
-  const onTimeFormatChange = (is24Hours: boolean) => {
-    setTimeFormat(is24Hours ? TimeFormat.TWENTY_FOUR_HOUR : TimeFormat.TWELVE_HOUR);
-    setIs24hClockInLocalStorage(is24Hours);
-  };
-
-  useEffect(() => {
-    setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
-  }, []);
-
-  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
-
-  /*
-  const telemetry = useTelemetry();
-   useEffect(() => {
-    if (top !== window) {
-      //page_view will be collected automatically by _middleware.ts
-      telemetry.event(
-        telemetryEventTypes.embedView,
-        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
-      );
-    }
-  }, [telemetry]); */
-  const embedUiConfig = useEmbedUiConfig();
-  // get dynamic user list here
-  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
-
-  const timezoneDropdown = useMemo(
-    () => <TimezoneDropdown timeZone={timeZone} onChangeTimeZone={setTimeZone} />,
-    [timeZone]
-  );
-  const paymentAppData = getPaymentAppData(eventType);
-
-  const rawSlug = profile.slug ? profile.slug.split("/") : [];
-  if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
-
-  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
-
-  const { data: bookingAttendees } = trpc.viewer.bookings.getBookingAttendees.useQuery(
-    {
-      seatReferenceUid: rescheduleUid,
-    },
-    {
-      enabled: !!(rescheduleUid && eventType.seatsPerTimeSlot),
-    }
-  );
-
-  return (
-    <>
-      <HeadSeo
-        title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
-        description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
-        meeting={{
-          title: eventType.title,
-          profile: { name: `${profile.name}`, image: profile.image },
-          users: [
-            ...(eventType.users || []).map((user) => ({
-              name: `${user.name}`,
-              username: `${user.username}`,
-            })),
-          ],
-        }}
-        nextSeoProps={{
-          nofollow: eventType.hidden,
-          noindex: eventType.hidden,
-        }}
-        isBrandingHidden={restProps.isBrandingHidden}
-      />
-      <BookingPageTagManager eventType={eventType} />
-      <div>
-        <main
-          className={classNames(
-            "flex flex-col md:mx-4",
-            shouldAlignCentrally ? "items-center" : "items-start",
-            !isEmbed && classNames("bg-subtle dark:bg-default mx-auto my-0 ease-in-out md:my-24")
-          )}>
-          <div>
-            <div
-              style={availabilityDatePickerEmbedStyles}
-              className={classNames(
-                isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
-                "border-booker md:border-booker-width md:rounded-md",
-                isEmbed && "mx-auto"
-              )}>
-              <div className="md:flex">
-                {showEventTypeDetails && (
-                  <div
-                    className={classNames(
-                      " border-subtle flex flex-col p-5 sm:border-r",
-                      "min-w-full md:w-[230px] md:min-w-[230px]",
-                      recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
-                    )}>
-                    <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
-                      {rescheduleUid && eventType.seatsPerTimeSlot && bookingAttendees && (
-                        <div
-                          className={classNames(
-                            "flex flex-nowrap items-center text-sm font-medium",
-                            " text-default",
-                            "ltr:mr-[10px] rtl:ml-[10px]"
-                          )}>
-                          <User
-                            className={classNames(
-                              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
-                              "mt-[2px]"
-                            )}
-                          />{" "}
-                          {t("event_type_seats", { numberOfSeats: bookingAttendees })}
-                        </div>
-                      )}
-                      {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="flex items-start text-sm font-medium">
-                          <RefreshCcw className="float-left ml-[2px] mt-[7px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
-                          <div>
-                            <p className="-ml-2 mb-1 inline px-2 py-1">
-                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
-                            </p>
-
-                            <NumberInput
-                              defaultValue={eventType.recurringEvent.count}
-                              min="1"
-                              max={eventType.recurringEvent.count}
-                              isFullWidth={false}
-                              className="me-2 inline w-16"
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-
-                            <p className="inline">
-                              {t("occurrence", {
-                                count: recurringEventCount,
-                              })}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      {paymentAppData.price > 0 && (
-                        <p className="-ml-2 px-2 text-sm font-medium">
-                          <CreditCard className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                          {paymentAppData.paymentOption === "HOLD" ? (
-                            <>
-                              {t("no_show_fee_amount", {
-                                amount: paymentAppData.price / 100.0,
-                                formatParams: { amount: { currency: paymentAppData.currency } },
-                              })}
-                            </>
-                          ) : (
-                            <>
-                              {new Intl.NumberFormat(i18n.language, {
-                                style: "currency",
-                                currency: paymentAppData.currency,
-                              }).format(paymentAppData.price / 100)}
-                            </>
-                          )}
-                        </p>
-                      )}
-                      {timezoneDropdown}
-                    </BookingDescription>
-
-                    {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
-                    <div>
-                      <p
-                        className="mt-4 mb-3 text-default"
-                        data-testid="former_time_p_desktop">
-                        {t("former_time")}
-                      </p>
-                      <p className="text-subtle line-through ">
-                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
-                        {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
-                      </p>
-                    </div>
-                  )*/}
-                  </div>
-                )}
-                <SlotPicker
-                  weekStart={
-                    typeof profile.weekStart === "string"
-                      ? ([
-                          "Sunday",
-                          "Monday",
-                          "Tuesday",
-                          "Wednesday",
-                          "Thursday",
-                          "Friday",
-                          "Saturday",
-                        ].indexOf(profile.weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
-                      : profile.weekStart /* Allows providing weekStart as number */
-                  }
-                  eventType={eventType}
-                  timeFormat={timeFormat}
-                  onTimeFormatChange={onTimeFormatChange}
-                  timeZone={timeZone}
-                  users={userList}
-                  seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
-                  bookingAttendees={bookingAttendees || undefined}
-                  recurringEventCount={recurringEventCount}
-                />
-              </div>
-            </div>
-            {/* FIXME: We don't show branding in Embed yet because we need to place branding on top of the main content. Keeping it outside the main content would have visibility issues because outside main content background is transparent */}
-            {!restProps.isBrandingHidden && !isEmbed && <PoweredBy />}
-          </div>
-        </main>
-      </div>
-      <Toaster position="bottom-right" />
-    </>
-  );
-};
-
-export default AvailabilityPage;
@@ -1,704 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useSession } from "next-auth/react";
-import dynamic from "next/dynamic";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-import { useForm, useFormContext } from "react-hook-form";
-import { v4 as uuidv4 } from "uuid";
-import { z } from "zod";
-
-import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import type { EventLocationType } from "@calcom/app-store/locations";
-import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
-import type { LocationObject } from "@calcom/core/location";
-import dayjs from "@calcom/dayjs";
-import {
-  useEmbedNonStylesConfig,
-  useEmbedUiConfig,
-  useIsBackgroundTransparent,
-  useIsEmbed,
-} from "@calcom/embed-core/embed-iframe";
-import { createBooking, createRecurringBooking } from "@calcom/features/bookings/lib";
-import { useTimePreferences } from "@calcom/features/bookings/lib";
-import {
-  getBookingFieldsWithSystemFields,
-  SystemField,
-} from "@calcom/features/bookings/lib/getBookingFields";
-import getBookingResponsesSchema, {
-  getBookingResponsesPartialSchema,
-} from "@calcom/features/bookings/lib/getBookingResponsesSchema";
-import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
-import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
-import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
-import classNames from "@calcom/lib/classNames";
-import { APP_NAME, MINUTES_TO_BOOK } from "@calcom/lib/constants";
-import useGetBrandingColours from "@calcom/lib/getBrandColours";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
-import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { HttpError } from "@calcom/lib/http-error";
-import { parseDate, parseDateTimeWithTimeZone, parseRecurringDates } from "@calcom/lib/parse-dates";
-import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { TimeFormat } from "@calcom/lib/timeFormat";
-import { trpc } from "@calcom/trpc";
-import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
-import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";
-
-import { timeZone } from "@lib/clock";
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-import BookingDescription from "@components/booking/BookingDescription";
-
-import type { BookPageProps } from "../../../pages/[user]/book";
-import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
-import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
-
-const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
-
-/** These are like 40kb that not every user needs */
-const BookingDescriptionPayment = dynamic(
-  () => import("@components/booking/BookingDescriptionPayment")
-) as unknown as typeof import("@components/booking/BookingDescriptionPayment").default;
-
-const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
-type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
-const BookingFields = ({
-  fields,
-  locations,
-  rescheduleUid,
-  isDynamicGroupBooking,
-}: {
-  fields: BookingPageProps["eventType"]["bookingFields"];
-  locations: LocationObject[];
-  rescheduleUid?: string;
-  isDynamicGroupBooking: boolean;
-}) => {
-  const { t } = useLocale();
-  const { watch, setValue } = useFormContext();
-  const locationResponse = watch("responses.location");
-  const currentView = rescheduleUid ? "reschedule" : "";
-
-  return (
-    // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
-    <div>
-      {fields.map((field, index) => {
-        // During reschedule by default all system fields are readOnly. Make them editable on case by case basis.
-        // Allowing a system field to be edited might require sending emails to attendees, so we need to be careful
-        let readOnly =
-          (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
-
-        let noLabel = false;
-        let hidden = !!field.hidden;
-        const fieldViews = field.views;
-
-        if (fieldViews && !fieldViews.find((view) => view.id === currentView)) {
-          return null;
-        }
-
-        if (field.name === SystemField.Enum.rescheduleReason) {
-          // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
-          readOnly = false;
-        }
-
-        if (field.name === SystemField.Enum.smsReminderNumber) {
-          // `smsReminderNumber` and location.optionValue when location.value===phone are the same data point. We should solve it in a better way in the Form Builder itself.
-          // I think we should have a way to connect 2 fields together and have them share the same value in Form Builder
-          if (locationResponse?.value === "phone") {
-            setValue(`responses.${SystemField.Enum.smsReminderNumber}`, locationResponse?.optionValue);
-            // Just don't render the field now, as the value is already connected to attendee phone location
-            return null;
-          }
-          // `smsReminderNumber` can be edited during reschedule even though it's a system field
-          readOnly = false;
-        }
-
-        if (field.name === SystemField.Enum.guests) {
-          // No matter what user configured for Guests field, we don't show it for dynamic group booking as that doesn't support guests
-          hidden = isDynamicGroupBooking ? true : !!field.hidden;
-        }
-
-        // We don't show `notes` field during reschedule
-        if (
-          (field.name === SystemField.Enum.notes || field.name === SystemField.Enum.guests) &&
-          !!rescheduleUid
-        ) {
-          return null;
-        }
-
-        // Dynamically populate location field options
-        if (field.name === SystemField.Enum.location && field.type === "radioInput") {
-          if (!field.optionsInputs) {
-            throw new Error("radioInput must have optionsInputs");
-          }
-          const optionsInputs = field.optionsInputs;
-
-          // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
-          const options = getLocationOptionsForSelect(locations, t);
-          options.forEach((option) => {
-            const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];
-            if (optionInput) {
-              optionInput.placeholder = option.inputPlaceholder;
-            }
-          });
-          field.options = options.filter(
-            (location): location is NonNullable<(typeof options)[number]> => !!location
-          );
-          // If we have only one option and it has an input, we don't show the field label because Option name acts as label.
-          // e.g. If it's just Attendee Phone Number option then we don't show `Location` label
-          if (field.options.length === 1) {
-            if (field.optionsInputs[field.options[0].value]) {
-              noLabel = true;
-            } else {
-              // If there's only one option and it doesn't have an input, we don't show the field at all because it's visible in the left side bar
-              hidden = true;
-            }
-          }
-        }
-
-        const label = noLabel ? "" : field.label || t(field.defaultLabel || "");
-        const placeholder = field.placeholder || t(field.defaultPlaceholder || "");
-
-        return (
-          <FormBuilderField
-            className="mb-4"
-            field={{ ...field, label, placeholder, hidden }}
-            readOnly={readOnly}
-            key={index}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-const routerQuerySchema = z
-  .object({
-    timeFormat: z.nativeEnum(TimeFormat),
-    rescheduleUid: z.string().optional(),
-    date: z
-      .string()
-      .optional()
-      .transform((date) => {
-        if (date === undefined) {
-          return null;
-        }
-        return date;
-      }),
-  })
-  .passthrough();
-
-const BookingPage = ({
-  eventType,
-  booking,
-  currentSlotBooking,
-  profile,
-  isDynamicGroupBooking,
-  recurringEventCount,
-  hasHashedBookingLink,
-  hashedLink,
-  ...restProps
-}: BookingPageProps) => {
-  const removeSelectedSlotMarkMutation = trpc.viewer.public.slots.removeSelectedSlotMark.useMutation();
-  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
-  const { t, i18n } = useLocale();
-  const { duration: queryDuration } = useRouterQuery("duration");
-  const { date: queryDate } = useRouterQuery("date");
-  const isEmbed = useIsEmbed(restProps.isEmbed);
-  const embedUiConfig = useEmbedUiConfig();
-  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
-  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const router = useRouter();
-  const { data: session } = useSession();
-  const isBackgroundTransparent = useIsBackgroundTransparent();
-  const telemetry = useTelemetry();
-
-  const { timezone } = useTimePreferences();
-
-  const reserveSlot = () => {
-    if (queryDuration) {
-      reserveSlotMutation.mutate({
-        eventTypeId: eventType.id,
-        slotUtcStartDate: dayjs(queryDate).utc().format(),
-        slotUtcEndDate: dayjs(queryDate).utc().add(parseInt(queryDuration), "minutes").format(),
-        bookingUid: currentSlotBooking?.uid,
-      });
-    }
-  };
-  // Define duration now that we support multiple duration eventTypes
-  let duration = eventType.length;
-  if (
-    queryDuration &&
-    !isNaN(Number(queryDuration)) &&
-    eventType.metadata?.multipleDuration &&
-    eventType.metadata?.multipleDuration.includes(Number(queryDuration))
-  ) {
-    duration = Number(queryDuration);
-  }
-
-  useEffect(() => {
-    /* if (top !== window) {
-      //page_view will be collected automatically by _middleware.ts
-      telemetry.event(
-        telemetryEventTypes.embedView,
-        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
-      );
-    } */
-    reserveSlot();
-    const interval = setInterval(reserveSlot, parseInt(MINUTES_TO_BOOK) * 60 * 1000 - 2000);
-    return () => {
-      clearInterval(interval);
-      removeSelectedSlotMarkMutation.mutate();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const mutation = useMutation(createBooking, {
-    onSuccess: async (responseData) => {
-      const { uid } = responseData;
-
-      if ("paymentUid" in responseData && !!responseData.paymentUid) {
-        return await router.push(
-          createPaymentLink({
-            paymentUid: responseData.paymentUid,
-            date,
-            name: bookingForm.getValues("responses.name"),
-            email: bookingForm.getValues("responses.email"),
-            absolute: false,
-          })
-        );
-      }
-
-      const query = {
-        isSuccessBookingPage: true,
-        email: bookingForm.getValues("responses.email"),
-        eventTypeSlug: eventType.slug,
-        seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
-        ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
-      };
-
-      return bookingSuccessRedirect({
-        router,
-        successRedirectUrl: eventType.successRedirectUrl,
-        query,
-        bookingUid: uid,
-      });
-    },
-  });
-
-  const recurringMutation = useMutation(createRecurringBooking, {
-    onSuccess: async (responseData = []) => {
-      const { uid } = responseData[0] || {};
-      const query = {
-        isSuccessBookingPage: true,
-        allRemainingBookings: true,
-        email: bookingForm.getValues("responses.email"),
-        eventTypeSlug: eventType.slug,
-        formerTime: booking?.startTime.toString(),
-      };
-      return bookingSuccessRedirect({
-        router,
-        successRedirectUrl: eventType.successRedirectUrl,
-        query,
-        bookingUid: uid,
-      });
-    },
-  });
-
-  const {
-    data: { timeFormat, rescheduleUid, date },
-  } = useTypedQuery(routerQuerySchema);
-
-  useTheme(profile.theme);
-  useBrandColors({
-    brandColor: profile.brandColor,
-    darkBrandColor: profile.darkBrandColor,
-  });
-
-  const querySchema = getBookingResponsesPartialSchema({
-    eventType: {
-      bookingFields: getBookingFieldsWithSystemFields(eventType),
-    },
-    view: rescheduleUid ? "reschedule" : "booking",
-  });
-
-  const parsedQuery = querySchema.parse({
-    ...router.query,
-    // `guest` because we need to support legacy URL with `guest` query param support
-    // `guests` because the `name` of the corresponding bookingField is `guests`
-    guests: router.query.guests || router.query.guest,
-  });
-
-  // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
-  const locations: LocationObject[] = useMemo(
-    () => (eventType.locations as LocationObject[]) || [],
-    [eventType.locations]
-  );
-
-  const [isClientTimezoneAvailable, setIsClientTimezoneAvailable] = useState(false);
-  useEffect(() => {
-    // THis is to fix hydration error that comes because of different timezone on server and client
-    setIsClientTimezoneAvailable(true);
-  }, []);
-
-  const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
-
-  // There should only exists one default userData variable for primaryAttendee.
-  const defaultUserValues = {
-    email: rescheduleUid ? booking?.attendees[0].email : parsedQuery["email"],
-    name: rescheduleUid ? booking?.attendees[0].name : parsedQuery["name"],
-  };
-
-  const defaultValues = () => {
-    if (!rescheduleUid) {
-      const defaults = {
-        responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
-      };
-
-      const responses = eventType.bookingFields.reduce((responses, field) => {
-        return {
-          ...responses,
-          [field.name]: parsedQuery[field.name],
-        };
-      }, {});
-      defaults.responses = {
-        ...responses,
-        name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
-        email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
-      };
-
-      return defaults;
-    }
-
-    if (!booking || !booking.attendees.length) {
-      return {};
-    }
-    const primaryAttendee = booking.attendees[0];
-    if (!primaryAttendee) {
-      return {};
-    }
-
-    const defaults = {
-      responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
-    };
-
-    const responses = eventType.bookingFields.reduce((responses, field) => {
-      return {
-        ...responses,
-        [field.name]: booking.responses[field.name],
-      };
-    }, {});
-    defaults.responses = {
-      ...responses,
-      name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
-      email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
-    };
-    return defaults;
-  };
-
-  const bookingFormSchema = z
-    .object({
-      responses: getBookingResponsesSchema({
-        eventType: { bookingFields: getBookingFieldsWithSystemFields(eventType) },
-        view: rescheduleUid ? "reschedule" : "booking",
-      }),
-    })
-    .passthrough();
-
-  type BookingFormValues = {
-    locationType?: EventLocationType["type"];
-    responses: z.infer<typeof bookingFormSchema>["responses"];
-  };
-
-  const bookingForm = useForm<BookingFormValues>({
-    defaultValues: defaultValues(),
-    resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
-  });
-
-  // Calculate the booking date(s)
-  let recurringStrings: string[] = [],
-    recurringDates: Date[] = [];
-  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
-    [recurringStrings, recurringDates] = parseRecurringDates(
-      {
-        startDate: date,
-        timeZone: timeZone(),
-        recurringEvent: eventType.recurringEvent,
-        recurringCount: parseInt(recurringEventCount.toString()),
-        selectedTimeFormat: timeFormat,
-      },
-      i18n.language
-    );
-  }
-
-  const bookEvent = (bookingValues: BookingFormValues) => {
-    telemetry.event(
-      top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
-      { isTeamBooking: document.URL.includes("team/") }
-    );
-    // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
-    // <...url>&metadata[user_id]=123 will be send as a custom input field as the hidden type.
-
-    // @TODO: move to metadata
-    const metadata = Object.keys(router.query)
-      .filter((key) => key.startsWith("metadata"))
-      .reduce(
-        (metadata, key) => ({
-          ...metadata,
-          [key.substring("metadata[".length, key.length - 1)]: router.query[key],
-        }),
-        {}
-      );
-
-    if (recurringDates.length) {
-      // Identify set of bookings to one intance of recurring event to support batch changes
-      const recurringEventId = uuidv4();
-      const recurringBookings = recurringDates.map((recurringDate) => ({
-        ...bookingValues,
-        start: dayjs(recurringDate).utc().format(),
-        end: dayjs(recurringDate).utc().add(duration, "minute").format(),
-        eventTypeId: eventType.id,
-        eventTypeSlug: eventType.slug,
-        recurringEventId,
-        // Added to track down the number of actual occurrences selected by the user
-        recurringCount: recurringDates.length,
-        timeZone: timeZone(),
-        language: i18n.language,
-        rescheduleUid,
-        user: router.query.user,
-        metadata,
-        hasHashedBookingLink,
-        hashedLink,
-      }));
-      recurringMutation.mutate(recurringBookings);
-    } else {
-      mutation.mutate({
-        ...bookingValues,
-        start: dayjs(date).utc().format(),
-        end: dayjs(date).utc().add(duration, "minute").format(),
-        eventTypeId: eventType.id,
-        eventTypeSlug: eventType.slug,
-        timeZone: timeZone(),
-        language: i18n.language,
-        rescheduleUid,
-        bookingUid: (router.query.bookingUid as string) || booking?.uid,
-        user: router.query.user,
-        metadata,
-        hasHashedBookingLink,
-        hashedLink,
-        seatReferenceUid: router.query.seatReferenceUid as string,
-      });
-    }
-  };
-
-  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
-
-  return (
-    <>
-      <Head>
-        <title>
-          {rescheduleUid
-            ? t("booking_reschedule_confirmation", {
-                eventTypeTitle: eventType.title,
-                profileName: profile.name,
-              })
-            : t("booking_confirmation", {
-                eventTypeTitle: eventType.title,
-                profileName: profile.name,
-              })}{" "}
-          | {APP_NAME}
-        </title>
-        <link rel="icon" href="/favico.ico" />
-      </Head>
-      <BookingPageTagManager eventType={eventType} />
-      <main
-        className={classNames(
-          shouldAlignCentrally ? "mx-auto" : "",
-          isEmbed ? "" : "sm:my-24",
-          "my-0 max-w-3xl"
-        )}>
-        <div
-          className={classNames(
-            "main",
-            isBackgroundTransparent ? "" : "bg-default dark:bg-muted",
-            "border-booker sm:border-booker-width rounded-md"
-          )}>
-          <div className="sm:flex">
-            {showEventTypeDetails && (
-              <div className="sm:border-subtle text-default flex flex-col px-6 pb-0 pt-6 sm:w-1/2 sm:border-r sm:pb-6">
-                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
-                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="text-default items-start text-sm font-medium">
-                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                      <p className="-ml-2 inline-block items-center px-2">
-                        {getEveryFreqFor({
-                          t,
-                          recurringEvent: eventType.recurringEvent,
-                          recurringCount: recurringEventCount,
-                        })}
-                      </p>
-                    </div>
-                  )}
-                  <div className="text-bookinghighlight flex items-start text-sm">
-                    <Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                    <div className="text-sm font-medium">
-                      {isClientTimezoneAvailable &&
-                        (rescheduleUid || !eventType.recurringEvent?.freq) &&
-                        `${parseDate(date, i18n.language, { selectedTimeFormat: timeFormat })}`}
-                      {isClientTimezoneAvailable &&
-                        !rescheduleUid &&
-                        eventType.recurringEvent?.freq &&
-                        recurringStrings.slice(0, 5).map((timeFormatted, key) => {
-                          return <p key={key}>{timeFormatted}</p>;
-                        })}
-                      {!rescheduleUid && eventType?.recurringEvent?.freq && recurringStrings.length > 5 && (
-                        <div className="flex">
-                          <Tooltip
-                            content={recurringStrings.slice(5).map((timeFormatted, key) => (
-                              <p key={key}>{timeFormatted}</p>
-                            ))}>
-                            <p className=" text-sm">
-                              + {t("plus_more", { count: recurringStrings.length - 5 })}
-                            </p>
-                          </Tooltip>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  {booking?.startTime && rescheduleUid && (
-                    <div>
-                      <p className="mb-2 mt-8 text-sm " data-testid="former_time_p">
-                        {t("former_time")}
-                      </p>
-                      <p className="line-through ">
-                        <Calendar className="-mt-1 ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                        {isClientTimezoneAvailable &&
-                          typeof booking.startTime === "string" &&
-                          parseDateTimeWithTimeZone(booking.startTime, i18n.language, timezone, {
-                            selectedTimeFormat: timeFormat,
-                          })}
-                      </p>
-                    </div>
-                  )}
-                  {!!eventType.seatsPerTimeSlot && (
-                    <div className="text-bookinghighlight flex items-start text-sm">
-                      <User
-                        className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
-                          currentSlotBooking &&
-                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                            ? "text-rose-600"
-                            : currentSlotBooking &&
-                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                            ? "text-yellow-500"
-                            : "text-bookinghighlight"
-                        }`}
-                      />
-                      <p
-                        className={`${
-                          currentSlotBooking &&
-                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                            ? "text-rose-600"
-                            : currentSlotBooking &&
-                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                            ? "text-yellow-500"
-                            : "text-bookinghighlight"
-                        } mb-2 font-medium`}>
-                        {currentSlotBooking
-                          ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
-                          : eventType.seatsPerTimeSlot}{" "}
-                        / {eventType.seatsPerTimeSlot}{" "}
-                        {t("seats_available", {
-                          count: currentSlotBooking
-                            ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
-                            : eventType.seatsPerTimeSlot,
-                        })}
-                      </p>
-                    </div>
-                  )}
-                </BookingDescription>
-              </div>
-            )}
-            <div className={classNames("p-6", showEventTypeDetails ? "sm:w-1/2" : "w-full")}>
-              <Form form={bookingForm} noValidate handleSubmit={bookEvent}>
-                <BookingFields
-                  isDynamicGroupBooking={isDynamicGroupBooking}
-                  fields={eventType.bookingFields}
-                  locations={locations}
-                  rescheduleUid={rescheduleUid}
-                />
-
-                <div
-                  className={classNames(
-                    "flex justify-end space-x-2 rtl:space-x-reverse",
-                    // HACK: If the last field is guests, we need to move Cancel, Submit buttons up because "Add Guests" being present on the left and the buttons on the right, spacing is not required
-                    eventType.bookingFields[eventType.bookingFields.length - 1].name ===
-                      SystemField.Enum.guests
-                      ? "-mt-4"
-                      : ""
-                  )}>
-                  <Button color="minimal" type="button" onClick={() => router.back()}>
-                    {t("cancel")}
-                  </Button>
-                  <Button
-                    type="submit"
-                    data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
-                    loading={mutation.isLoading || recurringMutation.isLoading}>
-                    {rescheduleUid ? t("reschedule") : t("confirm")}
-                  </Button>
-                </div>
-              </Form>
-              {mutation.isError || recurringMutation.isError ? (
-                <ErrorMessage error={mutation.error || recurringMutation.error} />
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </main>
-      <Toaster position="bottom-right" />
-    </>
-  );
-};
-
-export default BookingPage;
-
-function ErrorMessage({ error }: { error: unknown }) {
-  const { t } = useLocale();
-  const { query: { rescheduleUid } = {} } = useRouter();
-  const router = useRouter();
-
-  return (
-    <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
-      <div className="flex">
-        <div className="flex-shrink-0">
-          <AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
-        </div>
-        <div className="ms-3">
-          <p className="text-sm text-blue-700">
-            {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
-            {error instanceof HttpError || error instanceof Error ? (
-              <>
-                {t("can_you_try_again")}{" "}
-                <span className="cursor-pointer underline" onClick={() => router.back()}>
-                  {t("go_back")}
-                </span>
-                .
-              </> /* t(error.message) */
-            ) : (
-              "Unknown error"
-            )}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}
@@ -34,12 +34,12 @@ interface ISetLocationDialog {
  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
  selection?: LocationOption;
  booking?: BookingItem;
-  isTeamEvent?: boolean;
  defaultValues?: LocationObject[];
  setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
  isOpenDialog: boolean;
  setSelectedLocation?: (param: LocationOption | undefined) => void;
  setEditingLocationType?: (param: string) => void;
+  teamId?: number;
 }

 const LocationInput = (props: {
@@ -79,15 +79,15 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
    saveLocation,
    selection,
    booking,
-    isTeamEvent,
    setShowLocationModal,
    isOpenDialog,
    defaultValues,
    setSelectedLocation,
    setEditingLocationType,
+    teamId,
  } = props;
  const { t } = useLocale();
-  const locationsQuery = trpc.viewer.locationOptions.useQuery();
+  const locationsQuery = trpc.viewer.locationOptions.useQuery({ teamId });

  useEffect(() => {
    if (selection) {
@@ -103,6 +103,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
    locationType: z.string(),
    phone: z.string().optional().nullable(),
    locationAddress: z.string().optional(),
+    credentialId: z.number().optional(),
    locationLink: z
      .string()
      .optional()
@@ -173,8 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
    }
  );

-  console.log(defaultLocation);
-
  const LocationOptions = (() => {
    if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
      if (!eventLocationType.variable) {
@@ -298,6 +297,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                  };
                }

+                if (values.credentialId) {
+                  details = { ...details, credentialId: values.credentialId };
+                }
                saveLocation(newLocation, details);
                setShowLocationModal(false);
                setSelectedLocation?.(undefined);
@@ -313,7 +315,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                success={({ data }) => {
                  if (!data.length) return null;
                  const locationOptions = [...data].map((option) => {
-                    if (isTeamEvent) {
+                    if (teamId) {
                      // Let host's Default conferencing App option show for Team Event
                      return option;
                    }
@@ -5,6 +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 type { z } from "zod";

 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
@@ -16,13 +17,23 @@ import {
  allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
+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 {
+  Button,
+  CheckboxField,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+  Alert,
+} from "@calcom/ui";
 import { Edit, Copy } from "@calcom/ui/components/icon";

 import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -85,6 +96,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
+            >,
          };
        }
        return field;
@@ -190,6 +204,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}
@@ -337,7 +366,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";

@@ -16,12 +18,16 @@ export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &

 export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
  const { t } = useLocale();
-  const { data: eventTypeApps, isLoading } = trpc.viewer.apps.useQuery({
+  const { data: eventTypeApps, isLoading } = trpc.viewer.integrations.useQuery({
    extendsFeature: "EventType",
+    teamId: eventType.team?.id || eventType.parent?.teamId,
  });
+
  const methods = useFormContext<FormValues>();
-  const installedApps = eventTypeApps?.filter((app) => app.credentials.length);
-  const notInstalledApps = eventTypeApps?.filter((app) => !app.credentials.length);
+  const installedApps =
+    eventTypeApps?.items.filter((app) => app.userCredentialIds.length || app.teams.length) || [];
+  const notInstalledApps =
+    eventTypeApps?.items.filter((app) => !app.userCredentialIds.length && !app.teams.length) || [];
  const allAppsData = methods.watch("metadata")?.apps || {};

  const setAllAppsData = (_allAppsData: typeof allAppsData) => {
@@ -62,11 +68,54 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
    t("locked_fields_member_description")
  );

+  const appsWithTeamCredentials = eventTypeApps?.items.filter((app) => app.teams.length) || [];
+  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
+    const appCards = [];
+
+    if (app.userCredentialIds.length) {
+      appCards.push(
+        <EventTypeAppCard
+          getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+          setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+          key={app.slug}
+          app={app}
+          eventType={eventType}
+          {...shouldLockDisableProps("apps")}
+        />
+      );
+    }
+
+    for (const team of app.teams) {
+      if (team) {
+        appCards.push(
+          <EventTypeAppCard
+            getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+            setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+            key={app.slug + team?.credentialId}
+            app={{
+              ...app,
+              // credentialIds: team?.credentialId ? [team.credentialId] : [],
+              credentialOwner: {
+                name: team.name,
+                avatar: team.logo,
+                teamId: team.teamId,
+                credentialId: team.credentialId,
+              },
+            }}
+            eventType={eventType}
+            {...shouldLockDisableProps("apps")}
+          />
+        );
+      }
+    }
+    return appCards;
+  });
+
  return (
    <>
      <div>
        <div className="before:border-0">
-          {!installedApps?.length && isManagedEventType && (
+          {isManagedEventType && (
            <Alert
              severity="neutral"
              className="mb-2"
@@ -92,23 +141,40 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
              }
            />
          ) : null}
-          {installedApps?.map((app) => (
-            <EventTypeAppCard
-              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
-              key={app.slug}
-              app={app}
-              eventType={eventType}
-            />
-          ))}
+          {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
+          {installedApps.map((app) => {
+            if (!app.teams.length)
+              return (
+                <EventTypeAppCard
+                  getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                  key={app.slug}
+                  app={app}
+                  eventType={eventType}
+                  {...shouldLockDisableProps("apps")}
+                />
+              );
+          })}
        </div>
      </div>
      {!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 && (
+            <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();
@@ -530,7 +530,6 @@ export const EventSetupTab = (

      {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
      <EditLocationDialog
-        isTeamEvent={!!team}
        isOpenDialog={showLocationModal}
        setShowLocationModal={setShowLocationModal}
        saveLocation={saveLocation}
@@ -553,6 +552,7 @@ export const EventSetupTab = (
        }
        setSelectedLocation={setSelectedLocation}
        setEditingLocationType={setEditingLocationType}
+        teamId={eventType.team?.id}
      />
    </div>
  );
@@ -19,16 +19,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 +44,7 @@ export const mapMemberToChildrenOption = (
      eventTypeSlugs: member.eventTypes ?? [],
    },
    value: `${member.id ?? ""}`,
-    label: member.name ?? "",
+    label: `${member.name || member.email || ""}${!member.username ? ` (${pendingString})` : ""}`,
  };
 };

@@ -291,9 +292,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 (
@@ -7,6 +7,7 @@ import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";

 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -208,10 +209,8 @@ function EventTypeSingleLayout({
        }`,
      });
    }
-    if (isManagedEventType || isChildrenManagedEventType) {
-      // Removing apps and workflows for manageg event types by admins v1
-      navigation.splice(-2, 1);
-    } else {
+    const showWebhooks = !(isManagedEventType || isChildrenManagedEventType);
+    if (showWebhooks) {
      navigation.push({
        name: "webhooks",
        href: `/event-types/${eventType.id}?tabName=webhooks`,
@@ -233,9 +232,11 @@ function EventTypeSingleLayout({
    formMethods,
  ]);

-  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
-    eventType.slug
-  }`;
+  const orgBranding = useOrgBranding();
+  const isOrgEvent = orgBranding?.fullDomain;
+  const permalink = `${orgBranding?.fullDomain ?? CAL_URL}/${
+    team ? `${!isOrgEvent ? "team/" : ""}${team.slug}` : eventType.users[0].username
+  }/${eventType.slug}`;

  const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
  const isManagedEvent = eventType.schedulingType === SchedulingType.MANAGED ? "_managed" : "";
@@ -315,6 +316,7 @@ function EventTypeSingleLayout({
                  color="secondary"
                  variant="icon"
                  tooltip={t("embed")}
+                  eventId={eventType.id}
                />
              </>
            )}
@@ -404,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
@@ -28,6 +28,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
            color="secondary"
            disabled={installed}
            type="button"
+            loading={buttonProps?.isLoading}
            onClick={(event) => {
              // Save cookie key to return url step
              document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
@@ -17,7 +17,11 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
  const { nextStep } = props;
  const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true });
  const { t } = useLocale();
-  const queryIntegrations = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
+  const queryIntegrations = trpc.viewer.integrations.useQuery({
+    variant: "calendar",
+    onlyInstalled: false,
+    sortByMostPopular: true,
+  });

  const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
    (item) => item.calendars && item.calendars?.length > 0
@@ -16,11 +16,12 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
  const { data: queryConnectedVideoApps, isLoading } = trpc.viewer.integrations.useQuery({
    variant: "conferencing",
    onlyInstalled: false,
+    sortByMostPopular: true,
  });
  const { t } = useLocale();

  const hasAnyInstalledVideoApps = queryConnectedVideoApps?.items.some(
-    (item) => item.credentialIds.length > 0
+    (item) => item.userCredentialIds.length > 0
  );

  return (
@@ -38,7 +39,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
                      title={item.name}
                      description={item.description}
                      logo={item.logo}
-                      installed={item.credentialIds.length > 0}
+                      installed={item.userCredentialIds.length > 0}
                    />
                  )}
                </li>
@@ -22,15 +22,13 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
  const { nextStep } = props;

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

  const availabilityForm = useForm({
    defaultValues: {
@@ -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">
@@ -1,8 +1,9 @@
 import type { BaseSyntheticEvent } from "react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";

 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form } from "@calcom/ui";

@@ -127,6 +128,17 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
    }
  }

+  const handleEnableRef = useCallbackRef(handleEnable);
+
+  const totpCode = form.watch("totpCode");
+
+  // auto submit 2FA if all inputs have a value
+  useEffect(() => {
+    if (totpCode?.trim().length === 6) {
+      form.handleSubmit(handleEnableRef.current)();
+    }
+  }, [form, handleEnableRef, totpCode]);
+
  return (
    <Dialog open={true}>
      <DialogContent>
@@ -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,19 +76,21 @@ 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>
@@ -1,8 +1,9 @@
 import type { BaseSyntheticEvent } from "react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";

 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, DialogFooter, Form, TextField } from "@calcom/ui";

@@ -129,6 +130,17 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
    }
  }

+  const handleEnableRef = useCallbackRef(handleEnable);
+
+  const totpCode = form.watch("totpCode");
+
+  // auto submit 2FA if all inputs have a value
+  useEffect(() => {
+    if (totpCode?.trim().length === 6) {
+      form.handleSubmit(handleEnableRef.current)();
+    }
+  }, [form, handleEnableRef, totpCode]);
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent title={t("enable_2fa")} description={setupDescriptions[step]} type="creation">
@@ -173,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>
@@ -1,11 +1,10 @@
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import classNames from "classnames";
+import Link from "next/link";
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";

-const ENTERPRISE_BOOKING_FEE = "$99"; // TODO: get this from a new API endpoint
-
 const ChooseLicense = (
  props: {
    value: string;
@@ -50,23 +49,19 @@ const ChooseLicense = (
            </ul>
          </div>
        </RadioGroup.Item>
-        <RadioGroup.Item value="EE">
-          <div
-            className={classNames(
-              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
-              value === "EE" && "ring-2 ring-black"
-            )}>
-            <h2 className="font-cal text-emphasis text-xl">{t("ee_enterprise_license")}</h2>
-            <p className="font-medium text-green-800">
-              {t("enterprise_booking_fee", { enterprise_booking_fee: ENTERPRISE_BOOKING_FEE })}
-            </p>
-            <p className="text-subtle">{t("enterprise_license_includes")}</p>
-            <ul className="text-subtle ml-4 list-disc text-left text-xs">
-              <li>{t("no_need_to_keep_your_code_open_source")}</li>
-              <li>{t("repackage_rebrand_resell")}</li>
-              <li>{t("a_vast_suite_of_enterprise_features")}</li>
-            </ul>
-          </div>
+        <RadioGroup.Item value="EE" disabled>
+          <Link href="https://cal.com/sales" target="_blank">
+            <div className={classNames("bg-default h-full cursor-pointer space-y-2 rounded-md border p-4")}>
+              <h2 className="font-cal text-emphasis text-xl">{t("custom_plan")}</h2>
+              <p className="font-medium text-green-800">{t("contact_sales")}</p>
+              <p className="text-subtle">Build on top of Cal.com</p>
+              <ul className="text-subtle ml-4 list-disc text-left text-xs">
+                <li>{t("no_need_to_keep_your_code_open_source")}</li>
+                <li>{t("repackage_rebrand_resell")}</li>
+                <li>{t("a_vast_suite_of_enterprise_features")}</li>
+              </ul>
+            </div>
+          </Link>
        </RadioGroup.Item>
      </RadioGroup.Root>
    </form>
@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";

-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
@@ -12,24 +11,20 @@ type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number] & { safeBio: string | null };

-type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
+type TeamTypeWithSafeHtml = Omit<TeamType, "members" | "inviteToken"> & { members: MemberType[] };

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

-  // slug is a route parameter, we don't want to forward it to the next route
-  const { slug: _slug, ...queryParamsToForward } = router.query;
+  // 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;

  return (
    <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
      <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
-        <Avatar
-          size="md"
-          alt={member.name || ""}
-          imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
-        />
+        <Avatar size="md" alt={member.name || ""} imageSrc={"/" + member.username + "/avatar.png"} />
        <section className="mt-2 line-clamp-4 w-full space-y-1">
          <p className="text-default font-medium">{member.name}</p>
          <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">
@@ -1,10 +1,12 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";

 import { getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -45,6 +47,7 @@ const obtainNewUsernameChangeCondition = ({

 const PremiumTextfield = (props: ICustomUsernameProps) => {
  const { t } = useLocale();
+  const { data: session, update } = useSession();
  const {
    currentUsername,
    setCurrentUsername = noop,
@@ -93,6 +96,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
  const updateUsername = trpc.viewer.updateProfile.useMutation({
    onSuccess: async () => {
      onSuccessMutation && (await onSuccessMutation());
+      await update({ username: inputUsernameValue });
      setOpenDialogSaveUsername(false);
    },
    onError: (error) => {
@@ -116,7 +120,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {

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

  const ActionButtons = () => {
    if (paymentRequired) {
@@ -1,5 +1,6 @@
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
+import { useSession } from "next-auth/react";
 import type { RefCallback } from "react";
 import { useEffect, useMemo, useState } from "react";

@@ -23,6 +24,8 @@ interface ICustomUsernameProps {

 const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.ComponentProps<typeof TextField>>) => {
  const { t } = useLocale();
+  const { data: session, update } = useSession();
+
  const {
    currentUsername,
    setCurrentUsername = noop,
@@ -69,6 +72,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
      onSuccessMutation && (await onSuccessMutation());
      setOpenDialogSaveUsername(false);
      setCurrentUsername(inputUsernameValue);
+      await update({ username: inputUsernameValue });
    },
    onError: (error) => {
      onErrorMutation && onErrorMutation(error);
@@ -135,7 +139,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
          />
          {currentUsername !== inputUsernameValue && (
            <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-2.5")}>
+              <span className={classNames("mx-2 py-3.5")}>
                {usernameIsAvailable ? <Check className="h-4 w-4" /> : <></>}
              </span>
            </div>
@@ -156,23 +160,23 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
        <DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
          <div className="flex flex-row">
            <div className="mb-4 w-full pt-1">
-              <div className="bg-subtle flex w-full flex-wrap rounded-sm py-3 text-sm">
-                <div className="flex-1 px-2">
+              <div className="bg-subtle flex w-full flex-wrap gap-6 rounded-sm px-2 py-3 text-sm">
+                <div>
                  <p className="text-subtle">{t("current_username")}</p>
                  <p className="text-emphasis mt-1" data-testid="current-username">
                    {currentUsername}
                  </p>
                </div>
-                <div className="ml-6 flex-1">
+                <div>
                  <p className="text-subtle" data-testid="new-username">
                    {t("new_username")}
                  </p>
-                  <p className="text-emphasis">{inputUsernameValue}</p>
+                  <p className="text-emphasis mt-1">{inputUsernameValue}</p>
                </div>
              </div>
            </div>
          </div>
-          <div className="mt-4 flex flex-row-reverse gap-x-2">
+          <div className="ml-4 mt-4 flex flex-row-reverse gap-x-2">
            <Button
              type="button"
              loading={updateUsernameMutation.isLoading}
@@ -40,11 +40,13 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
      name="location"
      id="location-select"
      components={{
-        Option: (props) => (
-          <components.Option {...props}>
-            <OptionWithIcon icon={props.data.icon} label={props.data.label} />
-          </components.Option>
-        ),
+        Option: (props) => {
+          return (
+            <components.Option {...props}>
+              <OptionWithIcon icon={props.data.icon} label={props.data.label} />
+            </components.Option>
+          );
+        },
        SingleValue: (props) => (
          <components.SingleValue {...props}>
            <OptionWithIcon icon={props.data.icon} label={props.data.label} />
@@ -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 */
@@ -1,5 +1,6 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { SessionProvider } from "next-auth/react";
+import { useSession } from "next-auth/react";
 import { EventCollectionProvider } from "next-collect/client";
 import type { SSRConfig } from "next-i18next";
 import { appWithTranslation } from "next-i18next";
@@ -10,7 +11,6 @@ import { useRouter } from "next/router";
 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";
@@ -48,7 +48,18 @@ type AppPropsWithChildren = AppProps & {
  children: ReactNode;
 };

-const CustomI18nextProvider = (props: AppPropsWithChildren) => {
+const getEmbedNamespace = (query: ReturnType<typeof useRouter>["query"]) => {
+  // 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
@@ -87,7 +98,7 @@ const CalcomThemeProvider = (props: CalcomThemeProps) => {
  // 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(router.query);
  const isEmbedMode = typeof embedNamespace === "string";

  return (
@@ -158,10 +169,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 +195,7 @@ function getThemeProviderProps({
      `embed-theme-${embedNamespace}${appearanceIdSuffix}${embedExplicitlySetThemeSuffix}`
    : themeSupport === ThemeSupport.App
    ? "app-theme"
-    : isBookingPageThemSupportRequired
+    : isBookingPageThemeSupportRequired
    ? `booking-theme${appearanceIdSuffix}`
    : undefined;

@@ -207,20 +218,45 @@ 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 { 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}>
+        <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
@@ -1,25 +1,13 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
 import type { NextMiddleware } from "next/server";
-import { NextResponse, userAgent } from "next/server";
+import { NextResponse } from "next/server";

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

 const middleware: NextMiddleware = async (req) => {
  const url = req.nextUrl;
  const requestHeaders = new Headers(req.headers);
-  /**
-   * We are using env variable to toggle new-booker because using flags would be an unnecessary delay for booking pages
-   * Also, we can't easily identify the booker page requests here(to just fetch the flags for those requests)
-   */
-
-  if (isIpInBanlist(req) && url.pathname !== "/api/nope") {
-    // DDOS Prevention: Immediately end request with no response - Avoids a redirect as well initiated by NextAuth on invalid callback
-    req.nextUrl.pathname = "/api/nope";
-    return NextResponse.redirect(req.nextUrl);
-  }

  if (!url.pathname.startsWith("/api")) {
    //
@@ -43,25 +31,9 @@ const middleware: NextMiddleware = async (req) => {
    }
  }

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

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

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

@@ -4,8 +4,12 @@ const os = require("os");
 const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
 const { i18n } = require("./next-i18next.config");
-const { pages } = require("./pages");
-const { getSubdomainRegExp } = require("./getSubdomainRegExp");
+const {
+  orgHostPath,
+  orgUserRoutePath,
+  orgUserTypeRoutePath,
+  orgUserTypeEmbedRoutePath,
+} = require("./pagesAndRewritePaths");

 if (!process.env.NEXTAUTH_SECRET) throw new Error("Please set NEXTAUTH_SECRET");
 if (!process.env.CALENDSO_ENCRYPTION_KEY) throw new Error("Please set CALENDSO_ENCRYPTION_KEY");
@@ -81,52 +85,44 @@ if (process.env.ANALYZE === "true") {
 }

 plugins.push(withAxiom);
-
-// .* matches / as well(Note: *(i.e wildcard) doesn't match / but .*(i.e. RegExp) does)
-// It would match /free/30min but not /bookings/upcoming because 'bookings' is an item in pages
-// It would also not match /free/30min/embed because we are ensuring just two slashes
-// ?!book ensures it doesn't match /free/book page which doesn't have a corresponding new-booker page.
-// [^/]+ makes the RegExp match the full path, it seems like a partial match doesn't work.
-// book$ ensures that only /book is excluded from rewrite(which is at the end always) and not /booked
-
-// Important Note: When modifying these RegExps update apps/web/test/lib/next-config.test.ts as well
-const userTypeRouteRegExp = `/:user((?!${pages.join("/|")})[^/]*)/:type((?!book$)[^/]+)`;
-const teamTypeRouteRegExp = "/team/:slug/:type((?!book$)[^/]+)";
-const privateLinkRouteRegExp = "/d/:link/:slug((?!book$)[^/]+)";
-const embedUserTypeRouteRegExp = `/:user((?!${pages.join("/|")})[^/]*)/:type/embed`;
-const embedTeamTypeRouteRegExp = "/team/:slug/:type/embed";
-const subdomainRegExp = getSubdomainRegExp(process.env.NEXT_PUBLIC_WEBAPP_URL);
-// Important Note: Do update the RegExp in apps/web/test/lib/next-config.test.ts when changing it.
-const orgHostRegExp = `^(?<orgSlug>${subdomainRegExp})\\..*`;
-
 const matcherConfigRootPath = {
  has: [
    {
      type: "host",
-      value: orgHostRegExp,
+      value: orgHostPath,
    },
  ],
  source: "/",
 };

-const matcherConfigOrgMemberPath = {
+const matcherConfigUserRoute = {
  has: [
    {
      type: "host",
-      value: orgHostRegExp,
+      value: orgHostPath,
    },
  ],
-  source: `/:user((?!${pages.join("|")}|_next|public)[a-zA-Z0-9\-_]+)`,
+  source: orgUserRoutePath,
 };

-const matcherConfigUserPath = {
+const matcherConfigUserTypeRoute = {
  has: [
    {
      type: "host",
-      value: `^(?<orgSlug>${subdomainRegExp}[^.]+)\\..*`,
+      value: orgHostPath,
    },
  ],
-  source: `/:user((?!${pages.join("|")}|_next|public))/:path*`,
+  source: orgUserTypeRoutePath,
+};
+
+const matcherConfigUserTypeEmbedRoute = {
+  has: [
+    {
+      type: "host",
+      value: orgHostPath,
+    },
+  ],
+  source: orgUserTypeEmbedRoutePath,
 };

 /** @type {import("next").NextConfig} */
@@ -220,6 +216,7 @@ const nextConfig = {
  },
  async rewrites() {
    const beforeFiles = [
+      // These rewrites are other than booking pages rewrites and so that they aren't redirected to org pages ensure that they happen in beforeFiles
      ...(process.env.ORGANIZATIONS_ENABLED
        ? [
            {
@@ -227,12 +224,16 @@ const nextConfig = {
              destination: "/team/:orgSlug",
            },
            {
-              ...matcherConfigOrgMemberPath,
+              ...matcherConfigUserRoute,
              destination: "/org/:orgSlug/:user",
            },
            {
-              ...matcherConfigUserPath,
-              destination: "/:user/:path*",
+              ...matcherConfigUserTypeRoute,
+              destination: "/org/:orgSlug/:user/:type",
+            },
+            {
+              ...matcherConfigUserTypeEmbedRoute,
+              destination: "/org/:orgSlug/:user/:type/embed",
            },
          ]
        : []),
@@ -243,115 +244,48 @@ const nextConfig = {
        source: "/org/:slug",
        destination: "/team/:slug",
      },
-      {
-        source: "/:user/avatar.png",
-        destination: "/api/user/avatar?username=:user",
-      },
      {
        source: "/team/:teamname/avatar.png",
        destination: "/api/user/avatar?teamname=:teamname",
      },
-      {
-        source: "/forms/:formQuery*",
-        destination: "/apps/routing-forms/routing-link/:formQuery*",
-      },
-      {
-        source: "/router",
-        destination: "/apps/routing-forms/router",
-      },
-      {
-        source: "/success/:path*",
-        has: [
-          {
-            type: "query",
-            key: "uid",
-            value: "(?<uid>.*)",
-          },
-        ],
-        destination: "/booking/:uid/:path*",
-      },
-      {
-        source: "/cancel/:path*",
-        destination: "/booking/:path*",
-      },
-      // Keep cookie based booker enabled just in case we disable new-booker globally
+
+      // When updating this also update pagesAndRewritePaths.js
      ...[
        {
-          source: userTypeRouteRegExp,
-          destination: "/new-booker/:user/:type",
-          has: [{ type: "cookie", key: "new-booker-enabled" }],
+          source: "/:user/avatar.png",
+          destination: "/api/user/avatar?username=:user",
        },
        {
-          source: teamTypeRouteRegExp,
-          destination: "/new-booker/team/:slug/:type",
-          has: [{ type: "cookie", key: "new-booker-enabled" }],
+          source: "/forms/:formQuery*",
+          destination: "/apps/routing-forms/routing-link/:formQuery*",
        },
        {
-          source: privateLinkRouteRegExp,
-          destination: "/new-booker/d/:link/:slug",
-          has: [{ type: "cookie", key: "new-booker-enabled" }],
-        },
-      ],
-      // Keep cookie based booker enabled to test new-booker embed in production
-      ...[
-        {
-          source: embedUserTypeRouteRegExp,
-          destination: "/new-booker/:user/:type/embed",
-          has: [{ type: "cookie", key: "new-booker-enabled" }],
-        },
-        {
-          source: embedTeamTypeRouteRegExp,
-          destination: "/new-booker/team/:slug/:type/embed",
-          has: [{ type: "cookie", key: "new-booker-enabled" }],
+          source: "/router",
+          destination: "/apps/routing-forms/router",
+        },
+        {
+          source: "/success/:path*",
+          has: [
+            {
+              type: "query",
+              key: "uid",
+              value: "(?<uid>.*)",
+            },
+          ],
+          destination: "/booking/:uid/:path*",
+        },
+        {
+          source: "/cancel/:path*",
+          destination: "/booking/:path*",
        },
      ],
+
      /* TODO: have these files being served from another deployment or CDN {
        source: "/embed/embed.js",
        destination: process.env.NEXT_PUBLIC_EMBED_LIB_URL?,
      }, */
-
-      /**
-       * Enables new booker using cookie. It works even if NEW_BOOKER_ENABLED_FOR_NON_EMBED, NEW_BOOKER_ENABLED_FOR_EMBED are disabled
-       */
    ];

-    // Enable New Booker for all Embed Requests
-    if (process.env.NEW_BOOKER_ENABLED_FOR_EMBED === "1") {
-      console.log("Enabling New Booker for Embed");
-      afterFiles.push(
-        ...[
-          {
-            source: embedUserTypeRouteRegExp,
-            destination: "/new-booker/:user/:type/embed",
-          },
-          {
-            source: embedTeamTypeRouteRegExp,
-            destination: "/new-booker/team/:slug/:type/embed",
-          },
-        ]
-      );
-    }
-
-    // Enable New Booker for All but embed Requests
-    if (process.env.NEW_BOOKER_ENABLED_FOR_NON_EMBED === "1") {
-      console.log("Enabling New Booker for Non-Embed");
-      afterFiles.push(
-        ...[
-          {
-            source: userTypeRouteRegExp,
-            destination: "/new-booker/:user/:type",
-          },
-          {
-            source: teamTypeRouteRegExp,
-            destination: "/new-booker/team/:slug/:type",
-          },
-          {
-            source: privateLinkRouteRegExp,
-            destination: "/new-booker/d/:link/:slug",
-          },
-        ]
-      );
-    }
    return {
      beforeFiles,
      afterFiles,
@@ -401,7 +335,7 @@ const nextConfig = {
          ],
        },
        {
-          ...matcherConfigOrgMemberPath,
+          ...matcherConfigUserRoute,
          headers: [
            {
              key: "X-Cal-Org-path",
@@ -410,11 +344,20 @@ const nextConfig = {
          ],
        },
        {
-          ...matcherConfigUserPath,
+          ...matcherConfigUserTypeRoute,
          headers: [
            {
              key: "X-Cal-Org-path",
-              value: "/:user/:path",
+              value: "/org/:orgSlug/:user/:type",
+            },
+          ],
+        },
+        {
+          ...matcherConfigUserTypeEmbedRoute,
+          headers: [
+            {
+              key: "X-Cal-Org-path",
+              value: "/org/:orgSlug/:user/:type/embed",
            },
          ],
        },
@@ -503,6 +446,27 @@ const nextConfig = {
        destination: "/apps/installed/conferencing",
        permanent: true,
      },
+      // OAuth callbacks when sent to localhost:3000(w would be expected) should be redirected to corresponding to WEBAPP_URL
+      ...(process.env.NODE_ENV === "development" &&
+      // Safer to enable the redirect only when the user is opting to test out organizations
+      process.env.ORGANIZATIONS_ENABLED &&
+      // Prevent infinite redirect by checking that we aren't already on localhost
+      process.env.NEXT_PUBLIC_WEBAPP_URL !== "http://localhost:3000"
+        ? [
+            {
+              has: [
+                {
+                  type: "header",
+                  key: "host",
+                  value: "localhost:3000",
+                },
+              ],
+              source: "/api/integrations/:args*",
+              destination: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/integrations/:args*`,
+              permanent: false,
+            },
+          ]
+        : []),
    ];

    if (process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com") {
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "3.0.12",
+  "version": "3.1.6",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -47,7 +47,7 @@
    "@next/bundle-analyzer": "^13.1.6",
    "@radix-ui/react-avatar": "^1.0.0",
    "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-id": "^1.0.0",
    "@radix-ui/react-popover": "^1.0.2",
@@ -58,6 +58,7 @@
    "@radix-ui/react-tooltip": "^1.0.0",
    "@stripe/react-stripe-js": "^1.10.0",
    "@stripe/stripe-js": "^1.35.0",
+    "@tanem/react-nprogress": "^5.0.44",
    "@tanstack/react-query": "^4.3.9",
    "@tremor/react": "^2.0.0",
    "@types/turndown": "^5.0.1",
@@ -89,7 +90,7 @@
    "micro": "^10.0.1",
    "mime-types": "^2.1.35",
    "next": "^13.4.6",
-    "next-auth": "^4.20.1",
+    "next-auth": "^4.22.1",
    "next-axiom": "^0.17.0",
    "next-collect": "^0.2.1",
    "next-i18next": "^13.2.2",
@@ -1,14 +0,0 @@
-const glob = require("glob");
-
-/** Needed to rewrite public booking page, gets all static pages but [user] */
-const pages = glob
-  .sync("pages/**/[^_]*.{tsx,js,ts}", { cwd: __dirname })
-  .map((filename) =>
-    filename
-      .substr(6)
-      .replace(/(\.tsx|\.js|\.ts)/, "")
-      .replace(/\/.*/, "")
-  )
-  .filter((v, i, self) => self.indexOf(v) === i && !v.startsWith("[user]"));
-
-exports.pages = pages;
@@ -1,13 +1,14 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";

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

 import PageWrapper from "@components/PageWrapper";

@@ -58,16 +59,21 @@ export default function Custom404() {
        // Accessing a non-existent team
        setUsername(splitPath[2]);
        setCurrentPageType(pageType.TEAM);
-        setUrl(`${WEBSITE_URL}/signup?callbackUrl=settings/teams/new%3Fslug%3D${username.replace("/", "")}`);
+        setUrl(
+          `${WEBSITE_URL}/signup?callbackUrl=settings/teams/new%3Fslug%3D${splitPath[2].replace("/", "")}`
+        );
      } else {
        setUsername(routerUsername);
-        setUrl(`${WEBSITE_URL}/signup?username=${username.replace("/", "")}`);
+        setUrl(`${WEBSITE_URL}/signup?username=${routerUsername.replace("/", "")}`);
      }
    } else {
      setUsername(currentOrgDomain);
      setCurrentPageType(pageType.ORG);
      setUrl(
-        `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${username.replace("/", "")}`
+        `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${currentOrgDomain.replace(
+          "/",
+          ""
+        )}`
      );
    }
  }, []);
@@ -75,7 +81,6 @@ export default function Custom404() {
  const isSuccessPage = router.asPath.startsWith("/booking");
  const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
  const isSignup = router.asPath.startsWith("/signup");
-  const isCalcom = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com";
  /**
   * If we're on 404 and the route is insights it means it is disabled
   * TODO: Abstract this for all disabled features
@@ -197,18 +202,18 @@ export default function Custom404() {
                  </li>
                  <li className="px-4 py-2">
                    <a
-                      href={JOIN_SLACK}
+                      href={JOIN_DISCORD}
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
+                          <Discord className="text-default h-6 w-6" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
                        <h3 className="text-emphasis text-base font-medium">
                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                            <span className="absolute inset-0" aria-hidden="true" />
-                            Slack
+                            Discord
                          </span>
                        </h3>
                        <p className="text-subtle text-base">{t("join_our_community")}</p>
@@ -242,7 +247,7 @@ export default function Custom404() {
                  <span className="mt-2 inline-block text-lg ">
                    {t("check_spelling_mistakes_or_go_back")}
                  </span>
-                ) : isCalcom ? (
+                ) : IS_CALCOM ? (
                  <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
                    {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
                    <strong className="text-blue-500">
@@ -260,7 +265,7 @@ export default function Custom404() {
                )}
              </div>
              <div className="mt-12">
-                {((!isSubpage && isCalcom) ||
+                {((!isSubpage && IS_CALCOM) ||
                  currentPageType === pageType.ORG ||
                  currentPageType === pageType.TEAM) && (
                  <ul role="list" className="my-4">
@@ -310,7 +315,7 @@ export default function Custom404() {
                    .filter((_, idx) => currentPageType === pageType.ORG || idx !== 0)
                    .map((link, linkIdx) => (
                      <li key={linkIdx} className="px-4 py-2">
-                        <Link
+                        <a
                          href={link.href}
                          className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                          <div className="flex-shrink-0">
@@ -330,23 +335,23 @@ export default function Custom404() {
                          <div className="flex-shrink-0 self-center">
                            <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                          </div>
-                        </Link>
+                        </a>
                      </li>
                    ))}
                  <li className="px-4 py-2">
                    <a
-                      href={JOIN_SLACK}
+                      href={JOIN_DISCORD}
                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                      <div className="flex-shrink-0">
                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
+                          <Discord className="text-default h-6 w-6" />
                        </span>
                      </div>
                      <div className="min-w-0 flex-1">
                        <h3 className="text-emphasis text-base font-medium">
                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
                            <span className="absolute inset-0" aria-hidden="true" />
-                            Slack
+                            Discord
                          </span>
                        </h3>
                        <p className="text-subtle text-base">{t("join_our_community")}</p>
@@ -1,8 +1,10 @@
+import type { DehydratedState } from "@tanstack/react-query";
 import classNames from "classnames";
-import type { GetServerSidePropsContext } from "next";
+import type { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Toaster } from "react-hot-toast";
+import type { z } from "zod";

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

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

 import PageWrapper from "@components/PageWrapper";

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

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

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

-  const groupEventTypes = props.users.some((user) => !user.allowDynamicBooking) ? (
-    <div className="space-y-6" data-testid="event-types">
-      <div className="overflow-hidden rounded-sm border ">
-        <div className="text-muted p-8 text-center">
-          <h2 className="font-cal text-default  mb-2 text-3xl">{" " + t("unavailable")}</h2>
-          <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled") as string}</p>
-        </div>
-      </div>
-    </div>
-  ) : (
-    <ul>
-      {eventTypes.map((type, index) => (
-        <li
-          key={index}
-          className=" border-subtle bg-default dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-          <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
-          <Link
-            href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
-            className="flex justify-between px-6 py-4"
-            data-testid="event-type-link">
-            <div className="flex-shrink">
-              <p className=" text-emphasis text-sm font-semibold">{type.title}</p>
-              <EventTypeDescription className="text-sm" eventType={type} />
-            </div>
-            <div className="mt-1 self-center">
-              <AvatarGroup
-                truncateAfter={4}
-                className="flex flex-shrink-0"
-                size="sm"
-                items={props.users.map((user) => ({
-                  alt: user.name || "",
-                  image: user.avatar,
-                }))}
-              />
-            </div>
-          </Link>
-        </li>
-      ))}
-    </ul>
-  );
-
  const isEmbed = useIsEmbed(props.isEmbed);
  const eventTypeListItemEmbedStyles = useEmbedStyles("eventTypeListItem");
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
@@ -104,7 +50,6 @@ export function UserPage(props: UserPageProps) {
  const query = { ...router.query };
  delete query.user; // So it doesn't display in the Link (and make tests fail)
  delete query.orgSlug;
-  const nameOrUsername = user.name || user.username || "";

  /*
   const telemetry = useTelemetry();
@@ -114,18 +59,25 @@ export function UserPage(props: UserPageProps) {
      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
    }
  }, [telemetry, router.asPath]); */
+
+  if (entity?.isUnpublished) {
+    return (
+      <div className="flex h-full min-h-[100dvh] items-center justify-center">
+        <UnpublishedEntity {...entity} />
+      </div>
+    );
+  }
+
  const isEventListEmpty = eventTypes.length === 0;
  return (
    <>
      <HeadSeo
-        title={isDynamicGroup ? dynamicNames.join(", ") : nameOrUsername}
-        description={isDynamicGroup ? `Book events with ${dynamicUsernames.join(", ")}` : markdownStrippedBio}
+        title={profile.name}
+        description={markdownStrippedBio}
        meeting={{
-          title: isDynamicGroup ? "" : markdownStrippedBio,
+          title: markdownStrippedBio,
          profile: { name: `${profile.name}`, image: null },
-          users: isDynamicGroup
-            ? dynamicUsernames.map((username, index) => ({ username, name: dynamicNames[index] }))
-            : [{ username: `${user.username}`, name: `${user.name}` }],
+          users: [{ username: `${user.username}`, name: `${user.name}` }],
        }}
      />

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

          <div
            className={classNames("rounded-md ", !isEventListEmpty && "border-subtle border")}
@@ -166,8 +116,6 @@ export function UserPage(props: UserPageProps) {
                  <p className="mx-auto max-w-md">{t("user_away_description") as string}</p>
                </div>
              </div>
-            ) : isDynamicGroup ? ( //When we deal with dynamic group (users > 1)
-              groupEventTypes
            ) : (
              eventTypes.map((type) => (
                <div
@@ -201,7 +149,7 @@ export function UserPage(props: UserPageProps) {
            )}
          </div>

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

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

+export const getServerSideProps: GetServerSideProps<UserPageProps> = async (context) => {
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );
  const usernameList = getUsernameList(context.query.user as string);
  const dataFetchStart = Date.now();
  const usersWithoutAvatar = await prisma.user.findMany({
@@ -267,11 +252,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      username: {
        in: usernameList,
      },
-      organization: isValidOrgDomain
-        ? {
-            slug: currentOrgDomain,
-          }
-        : null,
+      organization: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
    },
    select: {
      id: true,
@@ -282,6 +263,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      brandColor: true,
      darkBrandColor: true,
      organizationId: true,
+      organization: {
+        select: {
+          slug: true,
+          name: true,
+        },
+      },
      theme: true,
      away: true,
      verified: true,
@@ -289,9 +276,24 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    },
  });

+  const isDynamicGroup = usersWithoutAvatar.length > 1;
+  if (isDynamicGroup) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/${usernameList.join("+")}/dynamic`,
+      },
+    } as {
+      redirect: {
+        permanent: false;
+        destination: string;
+      };
+    };
+  }
+
  const users = usersWithoutAvatar.map((user) => ({
    ...user,
-    avatar: `${WEBAPP_URL}/${user.username}/avatar.png`,
+    avatar: `/${user.username}/avatar.png`,
  }));

  if (!users.length || (!isValidOrgDomain && !users.some((user) => user.organizationId === null))) {
@@ -301,45 +303,18 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
      notFound: true;
    };
  }
-  const isDynamicGroup = users.length > 1;

-  if (isDynamicGroup) {
-    // sort and be in the same order as usernameList so first user is the first user in the list
-    users.sort((a, b) => {
-      const aIndex = (a.username && usernameList.indexOf(a.username)) || 0;
-      const bIndex = (b.username && usernameList.indexOf(b.username)) || 0;
-      return aIndex - bIndex;
-    });
-  }
-
-  const dynamicNames = isDynamicGroup
-    ? users.map((user) => {
-        return user.name || "";
-      })
-    : [];
  const [user] = users; //to be used when dealing with single user, not dynamic group

-  const profile = isDynamicGroup
-    ? {
-        name: getGroupName(dynamicNames),
-        image: null,
-        theme: null,
-        weekStart: "Sunday",
-        brandColor: "",
-        darkBrandColor: "",
-        allowDynamicBooking: !users.some((user) => {
-          return !user.allowDynamicBooking;
-        }),
-      }
-    : {
-        name: user.name || user.username,
-        image: user.avatar,
-        theme: user.theme,
-        brandColor: user.brandColor,
-        darkBrandColor: user.darkBrandColor,
-      };
+  const profile = {
+    name: user.name || user.username || "",
+    image: user.avatar,
+    theme: user.theme,
+    brandColor: user.brandColor,
+    darkBrandColor: user.darkBrandColor,
+  };

-  const eventTypesWithHidden = isDynamicGroup ? [] : await getEventTypesWithHiddenFromDB(user.id);
+  const eventTypesWithHidden = await getEventTypesWithHiddenFromDB(user.id);
  const dataFetchEnd = Date.now();
  if (context.query.log === "1") {
    context.res.setHeader("X-Data-Fetch-Time", `${dataFetchEnd - dataFetchStart}ms`);
@@ -352,38 +327,31 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
  }));

-  const isSingleUser = users.length === 1;
-  const dynamicUsernames = isDynamicGroup
-    ? users.map((user) => {
-        return user.username || "";
-      })
-    : [];
-
  const safeBio = markdownToSafeHTML(user.bio) || "";

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

  return {
    props: {
-      users,
+      users: users.map((user) => ({
+        name: user.name,
+        username: user.username,
+        bio: user.bio,
+        away: user.away,
+        verified: user.verified,
+      })),
+      entity: {
+        isUnpublished: org?.slug === null,
+        orgSlug: currentOrgDomain,
+        name: org?.name ?? null,
+      },
+      eventTypes,
      safeBio,
      profile,
      // Dynamic group has no theme preference right now. It uses system theme.
-      themeBasis: isDynamicGroup ? null : user.username,
-      user: {
-        emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),
-      },
-      eventTypes: isDynamicGroup
-        ? defaultEvents.map((event) => {
-            event.description = getDynamicEventDescription(dynamicUsernames, event.slug);
-            return event;
-          })
-        : eventTypes,
+      themeBasis: user.username,
      trpcState: ssr.dehydrate(),
-      isDynamicGroup,
-      dynamicNames,
-      dynamicUsernames,
-      isSingleUser,
      markdownStrippedBio,
    },
  };
@@ -1,97 +1,74 @@
 import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";

-import type { LocationObject } from "@calcom/app-store/locations";
+import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
+import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
+import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
+import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
-import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import type { User } from "@calcom/prisma/client";
+import slugify from "@calcom/lib/slugify";
+import prisma from "@calcom/prisma";

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

 import PageWrapper from "@components/PageWrapper";
-import AvailabilityPage from "@components/booking/pages/AvailabilityPage";

-import { ssrInit } from "@server/lib/ssr";
+export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;

-export type AvailabilityPageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
-
-export default function Type(props: AvailabilityPageProps) {
-  const { t } = useLocale();
-
-  return props.away ? (
-    <div className="dark:bg-inverted h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="text-muted dark:text-inverted p-8 text-center">
-              <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
-                😴{" " + t("user_away")}
-              </h2>
-              <p className="mx-auto max-w-md">{t("user_away_description")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  ) : props.isDynamic && !props.profile.allowDynamicBooking ? (
-    <div className="dark:bg-darkgray-50 h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="text-muted dark:text-inverted p-8 text-center">
-              <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
-                {" " + t("unavailable")}
-              </h2>
-              <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  ) : !props.isValidOrgDomain && props.organizationContext ? (
-    <div className="dark:bg-darkgray-50 h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="text-muted dark:text-inverted p-8 text-center">
-              <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
-                {" " + t("unavailable")}
-              </h2>
-              <p className="mx-auto max-w-md">{t("user_belongs_organization")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  ) : (
-    <AvailabilityPage {...props} />
+export default function Type({
+  slug,
+  user,
+  isEmbed,
+  booking,
+  away,
+  isBrandingHidden,
+  rescheduleUid,
+  entity,
+}: PageProps) {
+  return (
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={rescheduleUid ?? undefined}
+        hideBranding={isBrandingHidden}
+        entity={entity}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        bookingData={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+        entity={entity}
+      />
+    </main>
  );
 }

 Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;

-const paramsSchema = z.object({ type: z.string(), user: z.string() });
-async function getUserPageProps(context: GetServerSidePropsContext) {
-  // load server side dependencies
-  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
-  const { privacyFilteredLocations } = await import("@calcom/app-store/locations");
-  const { parseRecurringEvent } = await import("@calcom/lib/isRecurringEvent");
-  const { EventTypeMetaDataSchema, teamMetadataSchema } = await import("@calcom/prisma/zod-utils");
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
-  const ssr = await ssrInit(context);
-  const { type: slug, user: username } = paramsSchema.parse(context.query);
+async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const { rescheduleUid, bookingUid } = context.query;

-  const user = await prisma.user.findFirst({
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );
+
+  const users = await prisma.user.findMany({
    where: {
-      /** TODO: We should standarize this */
-      username: username.toLowerCase().replace(/( |%20)/g, "+"),
+      username: {
+        in: usernames,
+      },
      organization: isValidOrgDomain
        ? {
            slug: currentOrgDomain,
@@ -99,183 +76,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
        : null,
    },
    select: {
-      id: true,
-      username: true,
-      away: true,
-      name: true,
-      hideBranding: true,
-      timeZone: true,
-      theme: true,
-      weekStart: true,
-      brandColor: true,
-      darkBrandColor: true,
-      metadata: true,
-      organizationId: true,
-      eventTypes: {
-        where: {
-          // Many-to-many relationship causes inclusion of the team events - cool -
-          // but to prevent these from being selected, make sure the teamId is NULL.
-          AND: [{ slug }, { teamId: null }],
-        },
-        select: {
-          title: true,
-          slug: true,
-          hidden: true,
-          recurringEvent: true,
-          length: true,
-          locations: true,
-          id: true,
-          description: true,
-          price: true,
-          currency: true,
-          requiresConfirmation: true,
-          schedulingType: true,
-          metadata: true,
-          seatsPerTimeSlot: true,
-          team: {
-            select: {
-              logo: true,
-              parent: {
-                select: {
-                  logo: true,
-                  name: true,
-                },
-              },
-            },
-          },
-        },
-        orderBy: [
-          {
-            position: "desc",
-          },
-          {
-            id: "asc",
-          },
-        ],
-      },
-      teams: {
-        include: {
-          team: true,
-        },
-      },
-    },
-  });
-  if (!user || !user.eventTypes.length) return { notFound: true };
-
-  const [eventType]: ((typeof user.eventTypes)[number] & {
-    users: Pick<User, "name" | "username" | "hideBranding" | "timeZone">[];
-  })[] = [
-    {
-      ...user.eventTypes[0],
-      users: [
-        {
-          name: user.name,
-          username: user.username,
-          hideBranding: user.hideBranding,
-          timeZone: user.timeZone,
-        },
-      ],
-    },
-  ];
-
-  if (!eventType) return { notFound: true };
-
-  //TODO: Use zodSchema to verify it instead of using Type Assertion
-  const locations = eventType.locations ? (eventType.locations as LocationObject[]) : [];
-  const eventTypeObject = Object.assign({}, eventType, {
-    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
-    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
-    locations: privacyFilteredLocations(locations),
-    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
-  });
-  // Check if the user you are logging into has any active teams or premium user name
-  const hasActiveTeam =
-    user.teams.filter((m) => {
-      if (!IS_TEAM_BILLING_ENABLED) return true;
-      const metadata = teamMetadataSchema.safeParse(m.team.metadata);
-      if (metadata.success && metadata.data?.subscriptionId) return true;
-      return false;
-    }).length > 0;
-
-  const hasPremiumUserName = hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
-
-  return {
-    props: {
-      eventType: eventTypeObject,
-      profile: {
-        ...eventType.users[0],
-        theme: user.theme,
-        allowDynamicBooking: false,
-        weekStart: user.weekStart,
-        brandColor: user.brandColor,
-        darkBrandColor: user.darkBrandColor,
-        slug: `${user.username}/${eventType.slug}`,
-        image: `${WEBAPP_URL}/${user.username}/avatar.png`,
-      },
-      // Dynamic group has no theme preference right now. It uses system theme.
-      themeBasis: user.username,
-      organizationContext: user?.organizationId !== null,
-      away: user?.away,
-      isDynamic: false,
-      trpcState: ssr.dehydrate(),
-      isValidOrgDomain: orgDomainConfig(context.req.headers.host ?? ""),
-      isBrandingHidden: isBrandingHidden(user.hideBranding, hasActiveTeam || hasPremiumUserName),
-    },
-  };
-}
-
-async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
-  // load server side dependencies
-  const { getDefaultEvent, getGroupName, getUsernameList } = await import("@calcom/lib/defaultEvents");
-  const { privacyFilteredLocations } = await import("@calcom/app-store/locations");
-  const { parseRecurringEvent } = await import("@calcom/lib/isRecurringEvent");
-  const prisma = await import("@calcom/prisma").then((mod) => mod.default);
-  const { EventTypeMetaDataSchema, userMetadata: userMetadataSchema } = await import(
-    "@calcom/prisma/zod-utils"
-  );
-  const ssr = await ssrInit(context);
-
-  const { getAppFromSlug } = await import("@calcom/app-store/utils");
-
-  const { type: typeParam, user: userParam } = paramsSchema.parse(context.params);
-  const usernameList = getUsernameList(userParam);
-  const length = parseInt(typeParam);
-  const eventType = getDefaultEvent("" + length);
-
-  const users = await prisma.user.findMany({
-    where: {
-      username: {
-        in: usernameList,
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      name: true,
-      email: true,
-      bio: true,
-      avatar: true,
-      startTime: true,
-      endTime: true,
-      timeZone: true,
-      weekStart: true,
-      availability: true,
-      hideBranding: true,
-      brandColor: true,
-      darkBrandColor: true,
-      defaultScheduleId: true,
      allowDynamicBooking: true,
-      metadata: true,
-      organizationId: true,
-      away: true,
-      schedules: {
-        select: {
-          availability: true,
-          timeZone: true,
-          id: true,
-        },
-      },
-      theme: true,
    },
  });

@@ -284,87 +85,121 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
      notFound: true,
    };
  }
+  const org = isValidOrgDomain ? currentOrgDomain : null;

-  // sort and be in the same order as usernameList so first user is the first user in the list
-  let sortedUsers: typeof users = [];
-  if (users.length > 1) {
-    sortedUsers = users.sort((a, b) => {
-      const aIndex = (a.username && usernameList.indexOf(a.username)) || 0;
-      const bIndex = (b.username && usernameList.indexOf(b.username)) || 0;
-      return aIndex - bIndex;
-    });
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`);
+  } else if (bookingUid) {
+    booking = await getBookingForSeatedEvent(`${bookingUid}`);
  }

-  let locations = eventType.locations ? (eventType.locations as LocationObject[]) : [];
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username: usernames.join("+"),
+    eventSlug: slug,
+    org,
+  });

-  // Get the prefered location type from the first user
-  const firstUsersMetadata = userMetadataSchema.parse(sortedUsers[0].metadata || {});
-  const preferedLocationType = firstUsersMetadata?.defaultConferencingApp;
-
-  if (preferedLocationType?.appSlug) {
-    const foundApp = getAppFromSlug(preferedLocationType.appSlug);
-    const appType = foundApp?.appData?.location?.type;
-    if (appType) {
-      // Replace the location with the prefered location type
-      // This will still be default to daily if the app is not found
-      locations = [{ type: appType, link: preferedLocationType.appLink }] as LocationObject[];
-    }
+  if (!eventData) {
+    return {
+      notFound: true,
+    };
  }

-  const eventTypeObject = Object.assign({}, eventType, {
-    metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
-    recurringEvent: parseRecurringEvent(eventType.recurringEvent),
-    locations: privacyFilteredLocations(locations),
-    users: users.map((user) => {
-      return {
-        name: user.name,
-        username: user.username,
-        hideBranding: user.hideBranding,
-        timeZone: user.timeZone,
-      };
-    }),
-  });
-
-  const dynamicNames = users.map((user) => {
-    return user.name || "";
-  });
-
-  const profile = {
-    name: getGroupName(dynamicNames),
-    image: null,
-    slug: "" + length,
-    theme: null as string | null,
-    weekStart: "Sunday",
-    brandColor: "",
-    darkBrandColor: "",
-    allowDynamicBooking: !users.some((user) => {
-      return !user.allowDynamicBooking;
-    }),
-  };
-
  return {
    props: {
-      eventType: eventTypeObject,
-      profile,
-      // Dynamic group has no theme preference right now. It uses system theme.
-      themeBasis: null,
-      isDynamic: true,
+      entity: eventData.entity,
+      booking,
+      user: usernames.join("+"),
+      slug,
      away: false,
-      organizationContext: !users.some((user) => user.organizationId === null),
      trpcState: ssr.dehydrate(),
-      isValidOrgDomain: orgDomainConfig(context.req.headers.host ?? ""),
-      isBrandingHidden: false, // I think we should always show branding for dynamic groups - saves us checking every single user
+      isBrandingHidden: false,
+      themeBasis: null,
+      bookingUid: bookingUid ? `${bookingUid}` : null,
+      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
    },
  };
 }

-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const { user: userParam } = paramsSchema.parse(context.params);
-  // dynamic groups are not generated at build time, but otherwise are probably cached until infinity.
-  const isDynamicGroup = getUsernameList(userParam).length > 1;
-  if (isDynamicGroup) {
-    return await getDynamicGroupPageProps(context);
-  } else {
-    return await getUserPageProps(context);
+async function getUserPageProps(context: GetServerSidePropsContext) {
+  const { user: usernames, type: slug } = paramsSchema.parse(context.params);
+  const username = usernames[0];
+  const { rescheduleUid, bookingUid } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(
+    context.req.headers.host ?? "",
+    context.params?.orgSlug
+  );
+
+  const { ssrInit } = await import("@server/lib/ssr");
+  const ssr = await ssrInit(context);
+  const user = await prisma.user.findFirst({
+    where: {
+      username,
+      organization: isValidOrgDomain && currentOrgDomain ? getSlugOrRequestedSlug(currentOrgDomain) : null,
+    },
+    select: {
+      away: true,
+      hideBranding: true,
+    },
+  });
+
+  if (!user) {
+    return {
+      notFound: true,
+    };
  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`);
+  } else if (bookingUid) {
+    booking = await getBookingForSeatedEvent(`${bookingUid}`);
+  }
+
+  const org = isValidOrgDomain ? currentOrgDomain : null;
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we can show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({
+    username,
+    eventSlug: slug,
+    org,
+  });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      booking,
+      away: user?.away,
+      user: username,
+      slug,
+      entity: eventData.entity,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: user?.hideBranding,
+      themeBasis: username,
+      bookingUid: bookingUid ? `${bookingUid}` : null,
+      rescheduleUid: rescheduleUid ? `${rescheduleUid}` : null,
+    },
+  };
 }
+
+const paramsSchema = z.object({
+  type: z.string().transform((s) => slugify(s)),
+  user: z.string().transform((s) => getUsernameList(s)),
+});
+
+// Booker page fetches a tiny bit of data server side, to determine early
+// whether the page should show an away state or dynamic booking not allowed.
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { user } = paramsSchema.parse(context.params);
+  const isDynamicGroup = user.length > 1;
+
+  return isDynamicGroup ? await getDynamicGroupPageProps(context) : await getUserPageProps(context);
+};
@@ -1,19 +1,11 @@
-import type { GetServerSidePropsContext } from "next";
+import withEmbedSsr from "@lib/withEmbedSsr";

 import { getServerSideProps as _getServerSideProps } from "../[type]";

 export { default } from "../[type]";

-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const ssrResponse = await _getServerSideProps(context);
-  if (ssrResponse.notFound) {
-    return ssrResponse;
-  }
-  return {
-    ...ssrResponse,
-    props: {
-      ...ssrResponse.props,
-      isEmbed: true,
-    },
-  };
-};
+// Somehow these types don't accept the {notFound: true} return type.
+// Probably still need to fix this. I don't know why this isn't allowed yet.
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const getServerSideProps = withEmbedSsr(_getServerSideProps);
@@ -1,309 +0,0 @@
-import type { GetServerSidePropsContext } from "next";
-import { z } from "zod";
-
-import type { LocationObject } from "@calcom/app-store/locations";
-import { privacyFilteredLocations } from "@calcom/app-store/locations";
-import { getAppFromSlug } from "@calcom/app-store/utils";
-import dayjs from "@calcom/dayjs";
-import getBooking from "@calcom/features/bookings/lib/get-booking";
-import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
-import { parseRecurringEvent } from "@calcom/lib";
-import {
-  getDefaultEvent,
-  getDynamicEventName,
-  getGroupName,
-  getUsernameList,
-} from "@calcom/lib/defaultEvents";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import prisma, { bookEventTypeSelect } from "@calcom/prisma";
-import {
-  customInputSchema,
-  EventTypeMetaDataSchema,
-  userMetadata as userMetadataSchema,
-} from "@calcom/prisma/zod-utils";
-
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
-import PageWrapper from "@components/PageWrapper";
-import BookingPage from "@components/booking/pages/BookingPage";
-
-import { ssrInit } from "@server/lib/ssr";
-
-export type BookPageProps = inferSSRProps<typeof getServerSideProps>;
-
-export default function Book(props: BookPageProps) {
-  const { t } = useLocale();
-  return props.away ? (
-    <div className="dark:bg-inverted h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="text-muted dark:text-inverted p-8 text-center">
-              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
-                😴{" " + t("user_away")}
-              </h2>
-              <p className="mx-auto max-w-md">{t("user_away_description")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  ) : props.isDynamicGroupBooking && !props.profile.allowDynamicBooking ? (
-    <div className="dark:bg-inverted h-screen">
-      <main className="mx-auto max-w-3xl px-4 py-24">
-        <div className="space-y-6" data-testid="event-types">
-          <div className="overflow-hidden rounded-sm border dark:border-gray-900">
-            <div className="text-muted dark:text-inverted p-8 text-center">
-              <h2 className="font-cal dark:text-inverted text-default mb-2 text-3xl">
-                {" " + t("unavailable")}
-              </h2>
-              <p className="mx-auto max-w-md">{t("user_dynamic_booking_disabled")}</p>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  ) : (
-    <BookingPage {...props} />
-  );
-}
-
-Book.isBookingPage = true;
-Book.PageWrapper = PageWrapper;
-
-const querySchema = z.object({
-  bookingUid: z.string().optional(),
-  count: z.coerce.number().optional(),
-  embed: z.string().optional(),
-  rescheduleUid: z.string().optional(),
-  slug: z.string().optional(),
-  /** This is the event "type" ID */
-  type: z.coerce.number().optional(),
-  user: z.string(),
-  seatReferenceUid: z.string().optional(),
-  date: z.string().optional(),
-  duration: z.coerce.number().optional(),
-});
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-  const query = querySchema.parse(context.query);
-  const usernameList = getUsernameList(query.user);
-  const eventTypeSlug = query.slug;
-  const recurringEventCountQuery = query.count;
-  const users = await prisma.user.findMany({
-    where: {
-      username: {
-        in: usernameList,
-      },
-    },
-    select: {
-      id: true,
-      username: true,
-      name: true,
-      email: true,
-      bio: true,
-      avatar: true,
-      theme: true,
-      brandColor: true,
-      darkBrandColor: true,
-      allowDynamicBooking: true,
-      away: true,
-      metadata: true,
-    },
-  });
-
-  if (!users.length) return { notFound: true };
-  const [user] = users;
-  const isDynamicGroupBooking = users.length > 1 && !!eventTypeSlug;
-
-  // Dynamic Group link doesn't need a type but it must have a slug
-  if ((!isDynamicGroupBooking && !query.type) || (users.length > 1 && !eventTypeSlug)) {
-    return { notFound: true };
-  }
-
-  const eventTypeRaw = isDynamicGroupBooking
-    ? getDefaultEvent(eventTypeSlug)
-    : await prisma.eventType.findUnique({
-        where: {
-          id: query.type,
-        },
-        select: {
-          ...bookEventTypeSelect,
-        },
-      });
-
-  if (!eventTypeRaw) return { notFound: true };
-  const eventType = {
-    ...eventTypeRaw,
-    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata || {}),
-    bookingFields: getBookingFieldsWithSystemFields(eventTypeRaw),
-    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
-  };
-
-  const getLocations = () => {
-    let locations = eventTypeRaw.locations || [];
-    if (!isDynamicGroupBooking) return locations;
-
-    let sortedUsers: typeof users = [];
-    // sort and be in the same order as usernameList so first user is the first user in the list
-    if (users.length > 1) {
-      sortedUsers = users.sort((a, b) => {
-        const aIndex = (a.username && usernameList.indexOf(a.username)) || 0;
-        const bIndex = (b.username && usernameList.indexOf(b.username)) || 0;
-        return aIndex - bIndex;
-      });
-    }
-
-    // Get the prefered location type from the first user
-    const firstUsersMetadata = userMetadataSchema.parse(sortedUsers[0].metadata || {});
-    const preferedLocationType = firstUsersMetadata?.defaultConferencingApp;
-
-    if (preferedLocationType?.appSlug) {
-      const foundApp = getAppFromSlug(preferedLocationType.appSlug);
-      const appType = foundApp?.appData?.location?.type;
-      if (appType) {
-        // Replace the location with the prefered location type
-        // This will still be default to daily if the app is not found
-        locations = [{ type: appType, link: preferedLocationType.appLink }] as LocationObject[];
-      }
-    }
-    return locations;
-  };
-
-  const eventTypeObject = [eventType].map((e) => {
-    let locations = getLocations();
-    locations = privacyFilteredLocations(locations as LocationObject[]);
-    return {
-      ...e,
-      locations: locations,
-      periodStartDate: e.periodStartDate?.toString() ?? null,
-      periodEndDate: e.periodEndDate?.toString() ?? null,
-      schedulingType: null,
-      customInputs: customInputSchema.array().parse(e.customInputs || []),
-      users: users.map((u) => ({
-        id: u.id,
-        name: u.name,
-        username: u.username,
-        avatar: u.avatar,
-        image: u.avatar,
-        slug: u.username,
-        theme: u.theme,
-      })),
-      descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
-    };
-  })[0];
-
-  // If rescheduleUid and event has seats lets convert Uid to bookingUid
-  let rescheduleUid = query.rescheduleUid;
-  const rescheduleEventTypeHasSeats = query.rescheduleUid && eventTypeRaw.seatsPerTimeSlot;
-  let attendeeEmail: string;
-  let bookingUidWithSeats: string | null = null;
-
-  if (rescheduleEventTypeHasSeats) {
-    const bookingSeat = await prisma.bookingSeat.findFirst({
-      where: {
-        referenceUid: query.rescheduleUid,
-      },
-      select: {
-        id: true,
-        attendee: true,
-        booking: {
-          select: {
-            uid: true,
-          },
-        },
-      },
-    });
-    if (bookingSeat) {
-      rescheduleUid = bookingSeat.booking.uid;
-      attendeeEmail = bookingSeat.attendee.email;
-    }
-  }
-
-  if (query.duration) {
-    // If it's not reschedule but event Type has seats we should obtain
-    // the bookingUid regardless and use it to get the booking
-    const currentSeats = await prisma.booking.findFirst({
-      where: {
-        eventTypeId: eventTypeRaw.id,
-        startTime: dayjs(query.date).toISOString(),
-        endTime: dayjs(query.date).add(query.duration, "minutes").toISOString(),
-      },
-      select: {
-        uid: true,
-      },
-    });
-    if (currentSeats && currentSeats) {
-      bookingUidWithSeats = currentSeats.uid;
-    }
-  }
-
-  let booking: GetBookingType | null = null;
-  if (rescheduleUid || query.bookingUid || bookingUidWithSeats) {
-    booking = await getBooking(prisma, rescheduleUid || query.bookingUid || bookingUidWithSeats || "");
-  }
-
-  if (rescheduleEventTypeHasSeats && booking?.attendees && booking?.attendees.length > 0) {
-    const currentAttendee = booking?.attendees.find((attendee) => {
-      return attendee.email === attendeeEmail;
-    });
-    if (currentAttendee) {
-      booking.attendees = [currentAttendee] || [];
-    }
-  }
-
-  const dynamicNames = isDynamicGroupBooking ? users.map((user) => user.name || "") : [];
-
-  const profile = isDynamicGroupBooking
-    ? {
-        name: getGroupName(dynamicNames),
-        image: null,
-        slug: eventTypeSlug,
-        theme: null,
-        brandColor: "",
-        darkBrandColor: "",
-        allowDynamicBooking: !users.some((user) => !user.allowDynamicBooking),
-        eventName: getDynamicEventName(dynamicNames, eventTypeSlug),
-      }
-    : {
-        name: user.name || user.username,
-        image: user.avatar,
-        slug: user.username,
-        theme: user.theme,
-        brandColor: user.brandColor,
-        darkBrandColor: user.darkBrandColor,
-        eventName: null,
-      };
-
-  // Checking if number of recurring event ocurrances is valid against event type configuration
-  const recurringEventCount =
-    (eventType.recurringEvent?.count &&
-      recurringEventCountQuery &&
-      (recurringEventCountQuery <= eventType.recurringEvent.count
-        ? recurringEventCountQuery
-        : eventType.recurringEvent.count)) ||
-    null;
-
-  const currentSlotBooking = await getBooking(prisma, bookingUidWithSeats || "");
-
-  return {
-    props: {
-      away: user.away,
-      profile,
-      // Dynamic group has no theme preference right now. It uses system theme.
-      themeBasis: isDynamicGroupBooking ? null : user.username,
-      eventType: eventTypeObject,
-      booking,
-      currentSlotBooking: currentSlotBooking,
-      recurringEventCount,
-      trpcState: ssr.dehydrate(),
-      isDynamicGroupBooking,
-      hasHashedBookingLink: false,
-      hashedLink: null,
-      isEmbed: !!query.embed,
-    },
-  };
-}
@@ -28,17 +28,18 @@ class MyDocument extends Document<Props> {
    // Use a dummy URL as default so that URL parsing works for relative URLs as well. We care about searchParams and pathname only
    const parsedUrl = new URL(asPath, "https://dummyurl");
    const isEmbed = parsedUrl.pathname.endsWith("/embed") || parsedUrl.searchParams.get("embedType") !== null;
+    const embedColorScheme = parsedUrl.searchParams.get("ui.color-scheme");
    const initialProps = await Document.getInitialProps(ctx);
-    return { isEmbed, nonce, ...initialProps };
+    return { isEmbed, embedColorScheme, nonce, ...initialProps };
  }

  render() {
    const { locale } = this.props.__NEXT_DATA__;
-    const { isEmbed } = this.props;
+    const { isEmbed, embedColorScheme } = this.props;
    const nonceParsed = z.string().safeParse(this.props.nonce);
    const nonce = nonceParsed.success ? nonceParsed.data : "";
    return (
-      <Html lang={locale}>
+      <Html lang={locale} style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
        <Head nonce={nonce}>
          <link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />
          <link rel="icon" type="image/png" sizes="32x32" href="/api/logo?type=favicon-32" />
@@ -48,6 +49,13 @@ class MyDocument extends Document<Props> {
          <meta name="msapplication-TileColor" content="#ff0000" />
          <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9fafb" />
          <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1C" />
+          {(process.env.NODE_ENV === "development" || process.env.VERCEL_ENV === "preview") && (
+            // eslint-disable-next-line @next/next/no-sync-scripts
+            <script
+              data-project-id="KjpMrKTnXquJVKfeqmjdTffVPf1a6Unw2LZ58iE4"
+              src="https://snippet.meticulous.ai/v1/stagingMeticulousSnippet.js"
+            />
+          )}
        </Head>

        <body
@@ -11,8 +11,6 @@ import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma from "@calcom/prisma";

 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const t = await getTranslation(req.body.language ?? "en", "common");
-
  const email = z
    .string()
    .email()
@@ -47,6 +45,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
        name: true,
        identityProvider: true,
        email: true,
+        locale: true,
      },
    });

@@ -57,6 +56,8 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
        .json({ message: "If this email exists in our system, you should receive a Reset email." });
    }

+    const t = await getTranslation(maybeUser.locale ?? "en", "common");
+
    const maybePreviousRequest = await prisma.resetPasswordRequest.findMany({
      where: {
        email: maybeUser.email,
@@ -88,17 +89,9 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      resetLink,
    });

-    /** So we can test the password reset flow on CI */
-    if (process.env.NEXT_PUBLIC_IS_E2E) {
-      return res.status(201).json({
-        message: "If this email exists in our system, you should receive a Reset email.",
-        resetLink,
-      });
-    } else {
-      return res
-        .status(201)
-        .json({ message: "If this email exists in our system, you should receive a Reset email." });
-    }
+    return res
+      .status(201)
+      .json({ message: "If this email exists in our system, you should receive a Reset email." });
  } catch (reason) {
    // console.error(reason);
    return res.status(500).json({ message: "Unable to create password reset request" });
@@ -1,55 +1,66 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";

 import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { validPassword } from "@calcom/features/auth/lib/validPassword";
 import prisma from "@calcom/prisma";

+const passwordResetRequestSchema = z.object({
+  password: z.string().refine(validPassword, () => ({
+    message: "Password does not meet the requirements",
+  })),
+  requestId: z.string(), // format doesn't matter.
+});
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method !== "POST") {
-    return res.status(400).json({ message: "" });
-  }
+  // Bad Method when not POST
+  if (req.method !== "POST") return res.status(405).end();

+  const { password: rawPassword, requestId: rawRequestId } = passwordResetRequestSchema.parse(req.body);
+  // rate-limited there is a low, very low chance that a password request stays valid long enough
+  // to brute force 3.8126967e+40 options.
+  const maybeRequest = await prisma.resetPasswordRequest.findFirstOrThrow({
+    where: {
+      id: rawRequestId,
+      expires: {
+        gt: new Date(),
+      },
+    },
+    select: {
+      email: true,
+    },
+  });
+
+  const hashedPassword = await hashPassword(rawPassword);
+  // this can fail if a password request has been made for an email that has since changed or-
+  // never existed within Cal. In this case we do not want to disclose the email's existence.
+  // instead, we just return 404
  try {
-    const rawPassword = req.body?.password;
-    const rawRequestId = req.body?.requestId;
-
-    if (!rawPassword || !rawRequestId) {
-      return res.status(400).json({ message: "Couldn't find an account for this email" });
-    }
-
-    const maybeRequest = await prisma.resetPasswordRequest.findUnique({
-      where: {
-        id: rawRequestId,
-      },
-    });
-
-    if (!maybeRequest) {
-      return res.status(400).json({ message: "Couldn't find an account for this email" });
-    }
-
-    const maybeUser = await prisma.user.findUnique({
-      where: {
-        email: maybeRequest.email,
-      },
-    });
-
-    if (!maybeUser) {
-      return res.status(400).json({ message: "Couldn't find an account for this email" });
-    }
-
-    const hashedPassword = await hashPassword(rawPassword);
-
    await prisma.user.update({
      where: {
-        id: maybeUser.id,
+        email: maybeRequest.email,
      },
      data: {
        password: hashedPassword,
      },
    });
-
-    return res.status(201).json({ message: "Password reset." });
-  } catch (reason) {
-    console.error(reason);
-    return res.status(500).json({ message: "Unable to create password reset request" });
+  } catch (e) {
+    return res.status(404).end();
  }
+
+  await expireResetPasswordRequest(rawRequestId);
+
+  return res.status(201).json({ message: "Password reset." });
+}
+
+async function expireResetPasswordRequest(rawRequestId: string) {
+  await prisma.resetPasswordRequest.update({
+    where: {
+      id: rawRequestId,
+    },
+    data: {
+      // We set the expiry to now to invalidate the request
+      expires: new Date(),
+    },
+  });
 }
@@ -2,16 +2,21 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";

 import dayjs from "@calcom/dayjs";
+import { checkPremiumUsername } from "@calcom/ee/common/lib/checkPremiumUsername";
 import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
 import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
+import { IS_CALCOM } from "@calcom/lib/constants";
 import slugify from "@calcom/lib/slugify";
 import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
+import { validateUsernameInOrg } from "@calcom/lib/validateUsernameInOrg";
 import prisma from "@calcom/prisma";
 import { IdentityProvider } from "@calcom/prisma/enums";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";

 const signupSchema = z.object({
-  username: z.string(),
+  username: z.string().refine((value) => !value.includes("+"), {
+    message: "String should not contain a plus symbol (+).",
+  }),
  email: z.string().email(),
  password: z.string().min(7),
  language: z.string().optional(),
@@ -20,7 +25,7 @@ const signupSchema = z.object({

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") {
-    return;
+    return res.status(405).end();
  }

  if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true") {
@@ -39,60 +44,17 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    return;
  }

-  // There is an existingUser if the username matches
-  // OR if the email matches AND either the email is verified
-  // or both username and password are set
-  const existingUser = await prisma.user.findFirst({
-    where: {
-      OR: [
-        { username },
-        {
-          AND: [
-            { email: userEmail },
-            {
-              OR: [
-                { emailVerified: { not: null } },
-                {
-                  AND: [{ password: { not: null } }, { username: { not: null } }],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  });
-
-  if (existingUser) {
-    const message: string =
-      existingUser.email !== userEmail ? "Username already taken" : "Email address is already registered";
-
-    return res.status(409).json({ message });
-  }
-
-  const hashedPassword = await hashPassword(password);
-
-  const user = await prisma.user.upsert({
-    where: { email: userEmail },
-    update: {
-      username,
-      password: hashedPassword,
-      emailVerified: new Date(Date.now()),
-      identityProvider: IdentityProvider.CAL,
-    },
-    create: {
-      username,
-      email: userEmail,
-      password: hashedPassword,
-      identityProvider: IdentityProvider.CAL,
-    },
-  });
-
+  let foundToken: { id: number; teamId: number | null; expires: Date } | null = null;
  if (token) {
-    const foundToken = await prisma.verificationToken.findFirst({
+    foundToken = await prisma.verificationToken.findFirst({
      where: {
        token,
      },
+      select: {
+        id: true,
+        expires: true,
+        teamId: true,
+      },
    });

    if (!foundToken) {
@@ -102,77 +64,144 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    if (dayjs(foundToken?.expires).isBefore(dayjs())) {
      return res.status(401).json({ message: "Token expired" });
    }
+    if (foundToken?.teamId) {
+      const isValidUsername = await validateUsernameInOrg(username, foundToken?.teamId);

-    if (foundToken.teamId) {
-      const team = await prisma.team.findUnique({
-        where: {
-          id: foundToken.teamId,
+      if (!isValidUsername) {
+        return res.status(409).json({ message: "Username already taken" });
+      }
+    }
+  } else {
+    // There is an existingUser if the username matches
+    // OR if the email matches AND either the email is verified
+    // or both username and password are set
+    const existingUser = await prisma.user.findFirst({
+      where: {
+        OR: [
+          { username },
+          {
+            AND: [
+              { email: userEmail },
+              {
+                OR: [
+                  { emailVerified: { not: null } },
+                  {
+                    AND: [{ password: { not: null } }, { username: { not: null } }],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    });
+    if (existingUser) {
+      const message: string =
+        existingUser.email !== userEmail ? "Username already taken" : "Email address is already registered";
+
+      return res.status(409).json({ message });
+    }
+  }
+
+  const hashedPassword = await hashPassword(password);
+
+  if (foundToken && foundToken?.teamId) {
+    const team = await prisma.team.findUnique({
+      where: {
+        id: foundToken.teamId,
+      },
+    });
+
+    if (team) {
+      const teamMetadata = teamMetadataSchema.parse(team?.metadata);
+
+      if (IS_CALCOM && (!teamMetadata?.isOrganization || !!team.parentId)) {
+        const checkUsername = await checkPremiumUsername(username);
+        if (checkUsername.premium) {
+          // This signup page is ONLY meant for team invites and local setup. Not for every day users.
+          // In singup redesign/refactor coming up @sean will tackle this to make them the same API/page instead of two.
+          return res.status(422).json({
+            message: "Sign up from https://cal.com/signup to claim your premium username",
+          });
+        }
+      }
+
+      const user = await prisma.user.upsert({
+        where: { email: userEmail },
+        update: {
+          username,
+          password: hashedPassword,
+          emailVerified: new Date(Date.now()),
+          identityProvider: IdentityProvider.CAL,
+        },
+        create: {
+          username,
+          email: userEmail,
+          password: hashedPassword,
+          identityProvider: IdentityProvider.CAL,
        },
      });

-      if (team) {
-        const teamMetadata = teamMetadataSchema.parse(team?.metadata);
-        if (teamMetadata?.isOrganization) {
-          await prisma.user.update({
-            where: {
-              id: user.id,
-            },
-            data: {
-              organizationId: team.id,
-            },
-          });
-        }
-
-        const membership = await prisma.membership.update({
+      if (teamMetadata?.isOrganization) {
+        await prisma.user.update({
          where: {
-            userId_teamId: { userId: user.id, teamId: team.id },
+            id: user.id,
+          },
+          data: {
+            organizationId: team.id,
+          },
+        });
+      }
+
+      const membership = await prisma.membership.update({
+        where: {
+          userId_teamId: { userId: user.id, teamId: team.id },
+        },
+        data: {
+          accepted: true,
+        },
+      });
+      closeComUpsertTeamUser(team, user, membership.role);
+
+      // Accept any child team invites for orgs.
+      if (team.parentId) {
+        // Join ORG
+        await prisma.user.update({
+          where: {
+            id: user.id,
+          },
+          data: {
+            organizationId: team.parentId,
+          },
+        });
+
+        /** We do a membership update twice so we can join the ORG invite if the user is invited to a team witin a ORG. */
+        await prisma.membership.updateMany({
+          where: {
+            userId: user.id,
+            team: {
+              id: team.parentId,
+            },
+            accepted: false,
          },
          data: {
            accepted: true,
          },
        });
-        closeComUpsertTeamUser(team, user, membership.role);

-        // Accept any child team invites for orgs.
-        if (team.parentId) {
-          // Join ORG
-          await prisma.user.update({
-            where: {
-              id: user.id,
+        // Join any other invites
+        await prisma.membership.updateMany({
+          where: {
+            userId: user.id,
+            team: {
+              parentId: team.parentId,
            },
-            data: {
-              organizationId: team.parentId,
-            },
-          });
-
-          /** We do a membership update twice so we can join the ORG invite if the user is invited to a team witin a ORG. */
-          await prisma.membership.updateMany({
-            where: {
-              userId: user.id,
-              team: {
-                id: team.parentId,
-              },
-              accepted: false,
-            },
-            data: {
-              accepted: true,
-            },
-          });
-
-          // Join any other invites
-          await prisma.membership.updateMany({
-            where: {
-              userId: user.id,
-              team: {
-                parentId: team.parentId,
-              },
-              accepted: false,
-            },
-            data: {
-              accepted: true,
-            },
-          });
-        }
+            accepted: false,
+          },
+          data: {
+            accepted: true,
+          },
+        });
      }
    }

@@ -182,13 +211,37 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
        id: foundToken.id,
      },
    });
+  } else {
+    if (IS_CALCOM) {
+      const checkUsername = await checkPremiumUsername(username);
+      if (checkUsername.premium) {
+        res.status(422).json({
+          message: "Sign up from https://cal.com/signup to claim your premium username",
+        });
+        return;
+      }
+    }
+    await prisma.user.upsert({
+      where: { email: userEmail },
+      update: {
+        username,
+        password: hashedPassword,
+        emailVerified: new Date(Date.now()),
+        identityProvider: IdentityProvider.CAL,
+      },
+      create: {
+        username,
+        email: userEmail,
+        password: hashedPassword,
+        identityProvider: IdentityProvider.CAL,
+      },
+    });
+    await sendEmailVerification({
+      email: userEmail,
+      username,
+      language,
+    });
  }

-  await sendEmailVerification({
-    email: userEmail,
-    username,
-    language,
-  });
-
  res.status(201).json({ message: "Created user" });
 }
@@ -6,6 +6,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
+import { IdentityProvider } from "@calcom/prisma/client";

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "POST") {
@@ -28,7 +29,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    return res.status(401).json({ message: "Not authenticated" });
  }

-  if (!user.password) {
+  if (!user.password && user.identityProvider === IdentityProvider.CAL) {
    return res.status(400).json({ error: ErrorCode.UserMissingPassword });
  }

@@ -36,9 +37,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
    return res.json({ message: "Two factor disabled" });
  }

-  const isCorrectPassword = await verifyPassword(req.body.password, user.password);
-  if (!isCorrectPassword) {
-    return res.status(400).json({ error: ErrorCode.IncorrectPassword });
+  if (user.password && user.identityProvider === IdentityProvider.CAL) {
+    const isCorrectPassword = await verifyPassword(req.body.password, user.password);
+    if (!isCorrectPassword) {
+      return res.status(400).json({ error: ErrorCode.IncorrectPassword });
+    }
  }
  // if user has 2fa
  if (user.twoFactorEnabled) {
@@ -0,0 +1,59 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
+import type { BookingResponse, RecurringBookingCreateBody } from "@calcom/features/bookings/types";
+import { defaultResponder } from "@calcom/lib/server";
+import type { AppsStatus } from "@calcom/types/Calendar";
+
+// @TODO: Didn't look at the contents of this function in order to not break old booking page.
+
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const data: RecurringBookingCreateBody[] = req.body;
+  const session = await getServerSession({ req, res });
+  const createdBookings: BookingResponse[] = [];
+  const allRecurringDates: string[] = data.map((booking) => booking.start);
+  let appsStatus: AppsStatus[] | undefined = undefined;
+
+  /* To mimic API behavior and comply with types */
+  req.userId = session?.user?.id || -1;
+
+  // Reversing to accumulate results for noEmail instances first, to then lastly, create the
+  // emailed booking taking into account accumulated results to send app status accurately
+  for (let key = data.length - 1; key >= 0; key--) {
+    const booking = data[key];
+    if (key === 0) {
+      const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
+        .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
+        .reduce((prev, curr) => {
+          if (prev[curr.type]) {
+            prev[curr.type].failures += curr.failures;
+            prev[curr.type].success += curr.success;
+          } else {
+            prev[curr.type] = curr;
+          }
+          return prev;
+        }, {} as { [key: string]: AppsStatus });
+      appsStatus = Object.values(calcAppsStatus);
+    }
+
+    const recurringEventReq: NextApiRequest & { userId?: number } = req;
+
+    recurringEventReq.body = {
+      ...booking,
+      appsStatus,
+      allRecurringDates,
+      currentRecurringIndex: key,
+      noEmail: key !== 0,
+    };
+
+    const eachRecurringBooking = await handleNewBooking(recurringEventReq, {
+      isNotAnApiCall: true,
+    });
+
+    createdBookings.push(eachRecurringBooking);
+  }
+  return createdBookings;
+}
+
+export default defaultResponder(handler);
@@ -0,0 +1 @@
+export { default } from "@calcom/features/ee/workflows/api/scheduleWhatsappReminders";
@@ -55,7 +55,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    ],
  };

-  req.statusCode = 200;
+  res.statusCode = 200;

  res.setHeader("Content-Type", "text/html");
  res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate");
@@ -2,6 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import type { Session } from "next-auth";

 import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
+import { throwIfNotHaveAdminAccessToTeam } from "@calcom/app-store/_utils/throwIfNotHaveAdminAccessToTeam";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import { HttpError } from "@calcom/lib/http-error";
@@ -13,12 +14,14 @@ const defaultIntegrationAddHandler = async ({
  supportsMultipleInstalls,
  appType,
  user,
+  teamId = undefined,
  createCredential,
 }: {
  slug: string;
  supportsMultipleInstalls: boolean;
  appType: string;
  user?: Session["user"];
+  teamId?: number;
  createCredential: AppDeclarativeHandler["createCredential"];
 }) => {
  if (!user?.id) {
@@ -28,21 +31,24 @@ const defaultIntegrationAddHandler = async ({
    const alreadyInstalled = await prisma.credential.findFirst({
      where: {
        appId: slug,
-        userId: user.id,
+        ...(teamId ? { AND: [{ userId: user.id }, { teamId }] } : { userId: user.id }),
      },
    });
    if (alreadyInstalled) {
      throw new Error("App is already installed");
    }
  }
-  await createCredential({ user: user, appType, slug });
+
+  await throwIfNotHaveAdminAccessToTeam({ teamId: teamId ?? null, userId: user.id });
+
+  await createCredential({ user: user, appType, slug, teamId });
 };

 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  // Check that user is authenticated
  req.session = await getServerSession({ req, res });

-  const { args } = req.query;
+  const { args, teamId } = req.query;

  if (!Array.isArray(args)) {
    return res.status(404).json({ message: `API route not found` });
@@ -54,6 +60,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    const handlerMap = (await import("@calcom/app-store/apps.server.generated")).apiHandlers;
    const handlerKey = deriveAppDictKeyFromType(appName, handlerMap);
    const handlers = await handlerMap[handlerKey as keyof typeof handlerMap];
+    if (!handlers) throw new HttpError({ statusCode: 404, message: `No handlers found for ${handlerKey}` });
    const handler = handlers[apiEndpoint as keyof typeof handlers] as AppHandler;
    let redirectUrl = "/apps/installed";
    if (typeof handler === "undefined")
@@ -62,14 +69,13 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
    if (typeof handler === "function") {
      await handler(req, res);
    } else {
-      await defaultIntegrationAddHandler({ user: req.session?.user, ...handler });
+      await defaultIntegrationAddHandler({ user: req.session?.user, teamId: Number(teamId), ...handler });
      redirectUrl = handler.redirect?.url || getInstalledAppPath(handler);
      res.json({ url: redirectUrl, newTab: handler.redirect?.newTab });
    }
    return res.status(200);
  } catch (error) {
    console.error(error);
-
    if (error instanceof HttpError) {
      return res.status(error.statusCode).json({ message: error.message });
    }
@@ -1,26 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-import { z } from "zod";
-
-import { defaultResponder } from "@calcom/lib/server";
-
-const newBookerSchema = z.object({
-  status: z.enum(["enable", "disable"]),
-});
-
-/**
- * Very basic temporary api route to enable/disable new booker access.
- */
-async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const { status } = newBookerSchema.parse(req.query);
-
-  if (status === "enable") {
-    const expires = new Date();
-    expires.setFullYear(expires.getFullYear() + 1);
-    res.setHeader("Set-Cookie", `new-booker-enabled=true; path=/; expires=${expires.toUTCString()}`);
-  } else {
-    res.setHeader("Set-Cookie", "new-booker-enabled=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT");
-  }
-  res.send({ status: 200, body: `Done – ${status}` });
-}
-
-export default defaultResponder(handler);
@@ -9,6 +9,7 @@ import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import getWebhooks from "@calcom/features/webhooks/lib/getWebhooks";
 import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
+import { getTeamIdFromEventType } from "@calcom/lib/getTeamIdFromEventType";
 import { defaultHandler } from "@calcom/lib/server";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
@@ -92,6 +93,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
        eventType: {
          select: {
            teamId: true,
+            parentId: true,
          },
        },
        user: {
@@ -168,13 +170,20 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
      uid: booking.uid,
    };

+    const teamId = await getTeamIdFromEventType({
+      eventType: {
+        team: { id: booking?.eventType?.teamId ?? null },
+        parentId: booking?.eventType?.parentId ?? null,
+      },
+    });
+
    await triggerWebhook({
      evt,
      downloadLink,
      booking: {
        userId: booking?.user?.id,
        eventTypeId: booking.eventTypeId,
-        teamId: booking.eventType?.teamId,
+        teamId,
      },
    });

@@ -3,6 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";

 import getAppKeysFromSlug from "@calcom/app-store/_utils/getAppKeysFromSlug";
+import { throwIfNotHaveAdminAccessToTeam } from "@calcom/app-store/_utils/throwIfNotHaveAdminAccessToTeam";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
@@ -22,7 +23,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
  const { code, state } = req.query;
  const parsedState = stateSchema.parse(JSON.parse(state as string));
  const { teamId } = parsedState;
-
+  await throwIfNotHaveAdminAccessToTeam({ teamId: Number(teamId) ?? null, userId: session.user.id });
  if (code && typeof code !== "string") {
    res.status(400).json({ message: "`code` must be a string" });
    return;
@@ -0,0 +1,4 @@
+import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
+import { adminRouter } from "@calcom/trpc/server/routers/viewer/admin/_router";
+
+export default createNextApiHandler(adminRouter);
@@ -1,4 +1,4 @@
 import { featureFlagRouter } from "@calcom/features/flags/server/router";
 import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";

-export default createNextApiHandler(featureFlagRouter);
+export default createNextApiHandler(featureFlagRouter, true, "features");
@@ -18,7 +18,7 @@ const querySchema = z
 async function getIdentityData(req: NextApiRequest) {
  const { username, teamname } = querySchema.parse(req.query);
  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(req.headers.host ?? "");
-
+  const org = isValidOrgDomain ? currentOrgDomain : null;
  if (username) {
    const user = await prisma.user.findFirst({
      where: {
@@ -35,6 +35,7 @@ async function getIdentityData(req: NextApiRequest) {
      name: username,
      email: user?.email,
      avatar: user?.avatar,
+      org,
    };
  }
  if (teamname) {
@@ -50,6 +51,7 @@ async function getIdentityData(req: NextApiRequest) {
      select: { logo: true },
    });
    return {
+      org,
      name: teamname,
      email: null,
      avatar: team?.logo || getPlaceholderAvatar(null, teamname),
@@ -62,6 +64,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
  const img = identity?.avatar;
  // If image isn't set or links to this route itself, use default avatar
  if (!img) {
+    if (identity?.org) {
+      res.setHeader("x-cal-org", identity.org);
+    }
    res.writeHead(302, {
      Location: defaultAvatarSrc({
        md5: crypto
@@ -70,16 +75,23 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
          .digest("hex"),
      }),
    });
+
    return res.end();
  }

  if (!img.includes("data:image")) {
+    if (identity.org) {
+      res.setHeader("x-cal-org", identity.org);
+    }
    res.writeHead(302, { Location: img });
    return res.end();
  }

  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
  const imageResp = Buffer.from(decoded, "base64");
+  if (identity.org) {
+    res.setHeader("x-cal-org", identity.org);
+  }
  res.writeHead(200, {
    "Content-Type": "image/png",
    "Content-Length": imageResp.length,
@@ -1,6 +1,7 @@
 import type { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";

+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import RoutingFormsRoutingConfig from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
@@ -46,7 +47,7 @@ function getRoute(appName: string, pages: string[]) {
    } as NotFound;
  }
  const mainPage = pages[0];
-  const appPage = routingConfig[mainPage] as AppPageType;
+  const appPage = routingConfig.layoutHandler || (routingConfig[mainPage] as AppPageType);

  if (!appPage) {
    return {
@@ -127,6 +128,12 @@ export async function getServerSideProps(
    params.appPages = pages.slice(1);
    const session = await getServerSession({ req, res });
    const user = session?.user;
+    const app = await getAppWithMetadata({ slug: appName });
+    if (!app) {
+      return {
+        notFound: true,
+      };
+    }

    const result = await route.getServerSideProps(
      context as GetServerSidePropsContext<{
@@ -153,7 +160,7 @@ export async function getServerSideProps(
    return {
      props: {
        appName,
-        appUrl: `/apps/${appName}`,
+        appUrl: app.simplePath || `/apps/${appName}`,
        ...result.props,
      },
    };
@@ -4,6 +4,8 @@ import { useState } from "react";

 import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import getUserAdminTeams from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/enums";
@@ -48,7 +50,11 @@ function AppsSearch({
  );
 }

-export default function Apps({ categories, appStore }: inferSSRProps<typeof getServerSideProps>) {
+export default function Apps({
+  categories,
+  appStore,
+  userAdminTeams,
+}: inferSSRProps<typeof getServerSideProps>) {
  const { t } = useLocale();
  const [searchText, setSearchText] = useState<string | undefined>(undefined);

@@ -80,6 +86,7 @@ export default function Apps({ categories, appStore }: inferSSRProps<typeof getS
          apps={appStore}
          searchText={searchText}
          categories={categories.map((category) => category.name)}
+          userAdminTeams={userAdminTeams}
        />
      </div>
    </AppsLayout>
@@ -95,11 +102,13 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>

  const session = await getServerSession({ req, res });

-  let appStore;
+  let appStore, userAdminTeams: UserAdminTeams;
  if (session?.user?.id) {
-    appStore = await getAppRegistryWithCredentials(session.user.id);
+    userAdminTeams = await getUserAdminTeams({ userId: session.user.id, getUserInfo: true });
+    appStore = await getAppRegistryWithCredentials(session.user.id, userAdminTeams);
  } else {
    appStore = await getAppRegistry();
+    userAdminTeams = [];
  }

  const categoryQuery = appStore.map(({ categories }) => ({
@@ -111,6 +120,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    }
    return c;
  }, {} as Record<string, number>);
+
  return {
    props: {
      categories: Object.entries(categories)
@@ -122,6 +132,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
          return b.count - a.count;
        }),
      appStore,
+      userAdminTeams,
      trpcState: ssr.dehydrate(),
    },
  };
@@ -6,6 +6,7 @@ import { AppSettings } from "@calcom/app-store/_components/AppSettings";
 import { InstallAppButton } from "@calcom/app-store/components";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationTypeFromApp } from "@calcom/app-store/locations";
+import type { CredentialOwner } from "@calcom/app-store/types";
 import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
 import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
@@ -52,16 +53,16 @@ import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";

 function ConnectOrDisconnectIntegrationMenuItem(props: {
-  credentialIds: number[];
+  credentialId: number;
  type: App["type"];
  isGlobal?: boolean;
  installed?: boolean;
  invalidCredentialIds?: number[];
-  handleDisconnect: (credentialId: number) => void;
+  teamId?: number;
+  handleDisconnect: (credentialId: number, teamId?: number) => void;
 }) {
-  const { type, credentialIds, isGlobal, installed, handleDisconnect } = props;
+  const { type, credentialId, isGlobal, installed, handleDisconnect, teamId } = props;
  const { t } = useLocale();
-  const [credentialId] = credentialIds;

  const utils = trpc.useContext();
  const handleOpenChange = () => {
@@ -73,7 +74,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
      <DropdownMenuItem>
        <DropdownItem
          color="destructive"
-          onClick={() => handleDisconnect(credentialId)}
+          onClick={() => handleDisconnect(credentialId, teamId)}
          disabled={isGlobal}
          StartIcon={Trash}>
          {t("remove_app")}
@@ -138,72 +139,113 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
    },
  });

+  const ChildAppCard = ({
+    item,
+  }: {
+    item: RouterOutputs["viewer"]["integrations"]["items"][number] & {
+      credentialOwner?: CredentialOwner;
+    };
+  }) => {
+    const appSlug = item?.slug;
+    const appIsDefault =
+      appSlug === defaultConferencingApp?.appSlug ||
+      (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
+    return (
+      <AppListCard
+        key={item.name}
+        description={item.description}
+        title={item.name}
+        logo={item.logo}
+        isDefault={appIsDefault}
+        shouldHighlight
+        slug={item.slug}
+        invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
+        credentialOwner={item?.credentialOwner}
+        actions={
+          !item.credentialOwner?.readOnly ? (
+            <div className="flex justify-end">
+              <Dropdown modal={false}>
+                <DropdownMenuTrigger asChild>
+                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  {!appIsDefault && variant === "conferencing" && (
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        color="secondary"
+                        StartIcon={Video}
+                        onClick={() => {
+                          const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
+                          if (locationType?.linkType === "static") {
+                            setLocationType({ ...locationType, slug: appSlug });
+                          } else {
+                            updateDefaultAppMutation.mutate({
+                              appSlug,
+                            });
+                            setBulkUpdateModal(true);
+                          }
+                        }}>
+                        {t("set_as_default")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  )}
+                  <ConnectOrDisconnectIntegrationMenuItem
+                    credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
+                    type={item.type}
+                    isGlobal={item.isGlobal}
+                    installed
+                    invalidCredentialIds={item.invalidCredentialIds}
+                    handleDisconnect={handleDisconnect}
+                    teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
+                  />
+                </DropdownMenuContent>
+              </Dropdown>
+            </div>
+          ) : null
+        }>
+        <AppSettings slug={item.slug} />
+      </AppListCard>
+    );
+  };
+
+  const appsWithTeamCredentials = data.items.filter((app) => app.teams.length);
+  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
+    const appCards = [];
+
+    if (app.userCredentialIds.length) {
+      appCards.push(<ChildAppCard item={app} />);
+    }
+    for (const team of app.teams) {
+      if (team) {
+        appCards.push(
+          <ChildAppCard
+            item={{
+              ...app,
+              credentialOwner: {
+                name: team.name,
+                avatar: team.logo,
+                teamId: team.teamId,
+                credentialId: team.credentialId,
+                readOnly: !team.isAdmin,
+              },
+            }}
+          />
+        );
+      }
+    }
+    return appCards;
+  });
+
  const { t } = useLocale();
  return (
    <>
      <List>
+        {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
        {data.items
          .filter((item) => item.invalidCredentialIds)
          .map((item) => {
-            const appSlug = item?.slug;
-            const appIsDefault =
-              appSlug === defaultConferencingApp?.appSlug ||
-              (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
-            return (
-              <AppListCard
-                key={item.name}
-                description={item.description}
-                title={item.name}
-                logo={item.logo}
-                isDefault={appIsDefault}
-                shouldHighlight
-                slug={item.slug}
-                invalidCredential={item.invalidCredentialIds.length > 0}
-                actions={
-                  <div className="flex  justify-end">
-                    <Dropdown modal={false}>
-                      <DropdownMenuTrigger asChild>
-                        <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent>
-                        {!appIsDefault && variant === "conferencing" && (
-                          <DropdownMenuItem>
-                            <DropdownItem
-                              type="button"
-                              color="secondary"
-                              StartIcon={Video}
-                              onClick={() => {
-                                const locationType = getEventLocationTypeFromApp(
-                                  item?.locationOption?.value ?? ""
-                                );
-                                if (locationType?.linkType === "static") {
-                                  setLocationType({ ...locationType, slug: appSlug });
-                                } else {
-                                  updateDefaultAppMutation.mutate({
-                                    appSlug,
-                                  });
-                                  setBulkUpdateModal(true);
-                                }
-                              }}>
-                              {t("set_as_default")}
-                            </DropdownItem>
-                          </DropdownMenuItem>
-                        )}
-                        <ConnectOrDisconnectIntegrationMenuItem
-                          credentialIds={item.credentialIds}
-                          type={item.type}
-                          isGlobal={item.isGlobal}
-                          installed
-                          invalidCredentialIds={item.invalidCredentialIds}
-                          handleDisconnect={handleDisconnect}
-                        />
-                      </DropdownMenuContent>
-                    </Dropdown>
-                  </div>
-                }>
-                <AppSettings slug={item.slug} />
-              </AppListCard>
-            );
+            if (!item.teams.length) return <ChildAppCard item={item} />;
          })}
      </List>
      {locationType && (
@@ -227,7 +269,12 @@ const IntegrationsContainer = ({
  handleDisconnect,
 }: IntegrationsContainerProps): JSX.Element => {
  const { t } = useLocale();
-  const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
+  const query = trpc.viewer.integrations.useQuery({
+    variant,
+    exclude,
+    onlyInstalled: true,
+    includeTeamInstalledApps: true,
+  });

  // TODO: Refactor and reuse getAppCategories?
  const emptyIcon: Record<AppCategories, LucideIcon> = {
@@ -299,6 +346,7 @@ type querySchemaType = z.infer<typeof querySchema>;
 type ModalState = {
  isOpen: boolean;
  credentialId: null | number;
+  teamId?: number;
 };

 export default function InstalledApps() {
@@ -323,8 +371,8 @@ export default function InstalledApps() {
    updateData({ isOpen: false, credentialId: null });
  };

-  const handleDisconnect = (credentialId: number) => {
-    updateData({ isOpen: true, credentialId });
+  const handleDisconnect = (credentialId: number, teamId?: number) => {
+    updateData({ isOpen: true, credentialId, teamId });
  };

  return (
@@ -346,6 +394,7 @@ export default function InstalledApps() {
        handleModelClose={handleModelClose}
        isOpen={data.isOpen}
        credentialId={data.credentialId}
+        teamId={data.teamId}
      />
    </>
  );
@@ -1,62 +1,43 @@
-import type { ResetPasswordRequest } from "@prisma/client";
-import { debounce } from "lodash";
 import type { GetServerSidePropsContext } from "next";
 import { getCsrfToken } from "next-auth/react";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import Link from "next/link";
 import type { CSSProperties } from "react";
-import React, { useMemo } from "react";
+import { useForm } from "react-hook-form";

-import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
-import { Button, TextField } from "@calcom/ui";
+import { Button, PasswordField, Form } from "@calcom/ui";

 import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 type Props = {
-  id: string;
-  resetPasswordRequest: ResetPasswordRequest;
+  requestId: string;
+  isRequestExpired: boolean;
  csrfToken: string;
 };

-export default function Page({ resetPasswordRequest, csrfToken }: Props) {
+export default function Page({ requestId, isRequestExpired, csrfToken }: Props) {
  const { t } = useLocale();
-  const [loading, setLoading] = React.useState(false);
-  const [, setError] = React.useState<{ message: string } | null>(null);
-  const [success, setSuccess] = React.useState(false);
-
-  const [password, setPassword] = React.useState("");
+  const formMethods = useForm<{ new_password: string }>();
+  const success = formMethods.formState.isSubmitSuccessful;
+  const loading = formMethods.formState.isSubmitting;
+  const passwordValue = formMethods.watch("new_password");
+  const isEmpty = passwordValue?.length === 0;

  const submitChangePassword = async ({ password, requestId }: { password: string; requestId: string }) => {
-    try {
-      const res = await fetch("/api/auth/reset-password", {
-        method: "POST",
-        body: JSON.stringify({ requestId: requestId, password: password }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const json = await res.json();
-
-      if (!res.ok) {
-        setError(json);
-      } else {
-        setSuccess(true);
-      }
-
-      return json;
-    } catch (reason) {
-      setError({ message: t("unexpected_error_try_again") });
-    } finally {
-      setLoading(false);
-    }
+    const res = await fetch("/api/auth/reset-password", {
+      method: "POST",
+      body: JSON.stringify({ requestId, password }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    const json = await res.json();
+    if (!res.ok) return formMethods.setError("new_password", { type: "server", message: json.message });
  };

-  const debouncedChangePassword = debounce(submitChangePassword, 250);
-
  const Success = () => {
    return (
      <>
@@ -95,11 +76,6 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
    );
  };

-  const isRequestExpired = useMemo(() => {
-    const now = dayjs();
-    return dayjs(resetPasswordRequest.expires).isBefore(now);
-  }, [resetPasswordRequest]);
-
  return (
    <AuthContainer
      showLogo
@@ -109,8 +85,9 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
      {isRequestExpired && <Expired />}
      {!isRequestExpired && !success && (
        <>
-          <form
+          <Form
            className="space-y-6"
+            form={formMethods}
            style={
              {
                "--cal-brand": "#111827",
@@ -119,36 +96,26 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                "--cal-brand-subtle": "#9CA3AF",
              } as CSSProperties
            }
-            onSubmit={async (e) => {
-              e.preventDefault();
-
-              if (!password) {
-                return;
-              }
-
-              if (loading) {
-                return;
-              }
-
-              setLoading(true);
-              setError(null);
-              setSuccess(false);
-
-              await debouncedChangePassword({ password, requestId: resetPasswordRequest.id });
-            }}
-            action="#">
+            handleSubmit={async (values) => {
+              await submitChangePassword({
+                password: values.new_password,
+                requestId,
+              });
+            }}>
            <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
            <div className="mt-1">
-              <TextField
+              <PasswordField
+                {...formMethods.register("new_password", {
+                  minLength: {
+                    message: t("password_hint_min"),
+                    value: 7, // We don't have user here so we can't check if they are admin or not
+                  },
+                  pattern: {
+                    message: "Should contain a number, uppercase and lowercase letters",
+                    value: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).*$/gm,
+                  },
+                })}
                label={t("new_password")}
-                onChange={(e) => {
-                  setPassword(e.target.value);
-                }}
-                id="password"
-                name="password"
-                type="password"
-                autoComplete="password"
-                required
              />
            </div>

@@ -157,12 +124,12 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                loading={loading}
                color="primary"
                type="submit"
-                disabled={loading}
+                disabled={loading || isEmpty}
                className="w-full justify-center">
                {t("reset_password")}
              </Button>
            </div>
-          </form>
+          </Form>
        </>
      )}
      {!isRequestExpired && success && (
@@ -179,31 +146,29 @@ Page.PageWrapper = PageWrapper;
 export async function getServerSideProps(context: GetServerSidePropsContext) {
  const id = context.params?.id as string;

+  let resetPasswordRequest = await prisma.resetPasswordRequest.findFirst({
+    where: {
+      id,
+      expires: {
+        gt: new Date(),
+      },
+    },
+    select: {
+      email: true,
+    },
+  });
  try {
-    const resetPasswordRequest = await prisma.resetPasswordRequest.findUniqueOrThrow({
-      where: {
-        id,
-      },
-      select: {
-        id: true,
-        expires: true,
-      },
-    });
-
-    return {
-      props: {
-        resetPasswordRequest: {
-          ...resetPasswordRequest,
-          expires: resetPasswordRequest.expires.toString(),
-        },
-        id,
-        csrfToken: await getCsrfToken({ req: context.req }),
-        ...(await serverSideTranslations(context.locale || "en", ["common"])),
-      },
-    };
-  } catch (reason) {
-    return {
-      notFound: true,
-    };
+    resetPasswordRequest &&
+      (await prisma.user.findUniqueOrThrow({ where: { email: resetPasswordRequest.email } }));
+  } catch (e) {
+    resetPasswordRequest = null;
  }
+  return {
+    props: {
+      isRequestExpired: !resetPasswordRequest,
+      requestId: id,
+      csrfToken: await getCsrfToken({ req: context.req }),
+      ...(await serverSideTranslations(context.locale || "en", ["common"])),
+    },
+  };
 }
@@ -15,7 +15,7 @@ import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";

 export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
-  const { t, i18n } = useLocale();
+  const { t } = useLocale();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState<{ message: string } | null>(null);
  const [success, setSuccess] = React.useState(false);
@@ -31,7 +31,7 @@ export default function ForgotPassword({ csrfToken }: { csrfToken: string }) {
    try {
      const res = await fetch("/api/auth/forgot-password", {
        method: "POST",
-        body: JSON.stringify({ email: email, language: i18n.language }),
+        body: JSON.stringify({ email }),
        headers: {
          "Content-Type": "application/json",
        },
@@ -57,7 +57,7 @@ export default function Login({
        .string()
        .min(1, `${t("error_required_field")}`)
        .email(`${t("enter_valid_email")}`),
-      password: z.string().min(1, `${t("error_required_field")}`),
+      password: !!totpEmail ? z.literal("") : z.string().min(1, `${t("error_required_field")}`),
    })
    // Passthrough other fields like totpCode
    .passthrough();
@@ -69,7 +69,7 @@ export default function Login({
  const errorMessages: { [key: string]: string } = {
    // [ErrorCode.SecondFactorRequired]: t("2fa_enabled_instructions"),
    // Don't leak information about whether an email is registered or not
-    [ErrorCode.IncorrectUsernamePassword]: t("incorrect_username_password"),
+    [ErrorCode.IncorrectEmailPassword]: t("incorrect_email_password"),
    [ErrorCode.IncorrectTwoFactorCode]: `${t("incorrect_2fa_code")} ${t("please_try_again")}`,
    [ErrorCode.InternalServerError]: `${t("something_went_wrong")} ${t("please_try_again_and_contact_us")}`,
    [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
@@ -3,11 +3,11 @@ import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";

+import dayjs from "@calcom/dayjs";
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
 import Schedule from "@calcom/features/schedules/components/Schedule";
 import Shell from "@calcom/features/shell/Shell";
 import { availabilityAsString } from "@calcom/lib/availability";
-import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
@@ -53,9 +53,10 @@ type AvailabilityFormValues = {
 };

 const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
-  const { remove, append, update, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
+  const { remove, append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
    name: "dateOverrides",
  });
+  const excludedDates = fields.map((field) => dayjs(field.ranges[0].start).utc().format("YYYY-MM-DD"));
  const { t } = useLocale();
  return (
    <div className="p-6">
@@ -70,15 +71,15 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
      <p className="text-subtle mb-4 text-sm">{t("date_overrides_subtitle")}</p>
      <div className="space-y-2">
        <DateOverrideList
-          excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
+          excludedDates={excludedDates}
          remove={remove}
-          update={update}
+          replace={replace}
          items={fields}
          workingHours={workingHours}
        />
        <DateOverrideInputDialog
          workingHours={workingHours}
-          excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
+          excludedDates={excludedDates}
          onChange={(ranges) => append({ ranges })}
          Trigger={
            <Button color="secondary" StartIcon={Plus} data-testid="add-override">
@@ -278,7 +279,11 @@ export default function Availability() {
          </Dropdown>

          <div className="border-default border-l-2" />
-          <Button className="ml-4 lg:ml-0" type="submit" form="availability-form">
+          <Button
+            className="ml-4 lg:ml-0"
+            type="submit"
+            form="availability-form"
+            loading={updateMutation.isLoading}>
            {t("save")}
          </Button>
        </div>
@@ -95,6 +95,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
            Icon={Clock}
            headline={t("new_schedule_heading")}
            description={t("new_schedule_description")}
+            className="w-full"
            buttonRaw={<NewScheduleButton />}
          />
        </div>
@@ -23,9 +23,9 @@ import {
  useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { SystemField } from "@calcom/features/bookings/lib/SystemField";
 import { getBookingWithResponses } from "@calcom/features/bookings/lib/get-booking";
 import {
-  SystemField,
  getBookingFieldsWithSystemFields,
  SMS_REMINDER_NUMBER_FIELD,
 } from "@calcom/features/bookings/lib/getBookingFields";
@@ -165,10 +165,14 @@ export default function Success(props: SuccessProps) {
    );
  }

+  let evtName = props.eventType.eventName;
+  if (eventType.isDynamic && bookingInfo.responses?.title) {
+    evtName = bookingInfo.responses.title as string;
+  }
  const eventNameObject = {
    attendeeName,
    eventType: props.eventType.title,
-    eventName: (props.dynamicEventName as string) || props.eventType.eventName,
+    eventName: evtName,
    host: props.profile.name || "Nameless",
    location: location,
    bookingFields: bookingInfo.responses,
@@ -185,7 +189,7 @@ export default function Success(props: SuccessProps) {
  // - It's a paid event and payment is pending.
  const needsConfirmation = bookingInfo.status === BookingStatus.PENDING && eventType.requiresConfirmation;
  const userIsOwner = !!(session?.user?.id && eventType.owner?.id === session.user.id);
-
+  const isLoggedIn = session?.user;
  const isCancelled =
    status === "CANCELLED" ||
    status === "REJECTED" ||
@@ -278,7 +282,7 @@ export default function Success(props: SuccessProps) {

  // This is a weird case where the same route can be opened in booking flow as a success page or as a booking detail page from the app
  // As Booking Page it has to support configured theme, but as booking detail page it should not do any change. Let Shell.tsx handle it.
-  useTheme(isSuccessBookingPage ? props.profile.theme : undefined);
+  useTheme(isSuccessBookingPage ? props.profile.theme : "system");
  useBrandColors({
    brandColor: props.profile.brandColor,
    darkBrandColor: props.profile.darkBrandColor,
@@ -310,7 +314,7 @@ export default function Success(props: SuccessProps) {
          status={status}
        />
      )}
-      {userIsOwner && !isEmbed && (
+      {isLoggedIn && !isEmbed && (
        <div className="-mb-4 ml-4 mt-2">
          <Link
            href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
@@ -405,7 +409,9 @@ export default function Success(props: SuccessProps) {
                      </>
                    )}
                    <div className="font-medium">{t("what")}</div>
-                    <div className="col-span-2 mb-6 last:mb-0">{eventName}</div>
+                    <div className="col-span-2 mb-6 last:mb-0" data-testid="booking-title">
+                      {eventName}
+                    </div>
                    <div className="font-medium">{t("when")}</div>
                    <div className="col-span-2 mb-6 last:mb-0">
                      {reschedule && !!formerTime && (
@@ -440,7 +446,9 @@ export default function Success(props: SuccessProps) {
                          {bookingInfo?.user && (
                            <div className="mb-3">
                              <div>
-                                <span className="mr-2">{bookingInfo.user.name}</span>
+                                <span data-testid="booking-host-name" className="mr-2">
+                                  {bookingInfo.user.name}
+                                </span>
                                <Badge variant="blue">{t("Host")}</Badge>
                              </div>
                              <p className="text-default">{bookingInfo.user.email}</p>
@@ -1,42 +1,65 @@
 import type { GetServerSidePropsContext } from "next";
 import { z } from "zod";

-import type { LocationObject } from "@calcom/core/location";
-import { privacyFilteredLocations } from "@calcom/core/location";
+import { Booker } from "@calcom/atoms";
+import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
+import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
+import { getBookingForReschedule } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
-import { parseRecurringEvent } from "@calcom/lib";
-import { getWorkingHours } from "@calcom/lib/availability";
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { availiblityPageEventTypeSelect } from "@calcom/prisma";
+import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import slugify from "@calcom/lib/slugify";
 import prisma from "@calcom/prisma";
-import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";

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

 import PageWrapper from "@components/PageWrapper";
-import AvailabilityPage from "@components/booking/pages/AvailabilityPage";

-import { ssrInit } from "@server/lib/ssr";
+type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;

-export type DynamicAvailabilityPageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
-
-export default function Type(props: DynamicAvailabilityPageProps) {
-  return <AvailabilityPage {...props} />;
+export default function Type({
+  slug,
+  isEmbed,
+  user,
+  booking,
+  away,
+  isBrandingHidden,
+  isTeamEvent,
+  entity,
+}: PageProps) {
+  return (
+    <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
+      <BookerSeo
+        username={user}
+        eventSlug={slug}
+        rescheduleUid={booking?.uid}
+        hideBranding={isBrandingHidden}
+        entity={entity}
+      />
+      <Booker
+        username={user}
+        eventSlug={slug}
+        bookingData={booking}
+        isAway={away}
+        hideBranding={isBrandingHidden}
+        isTeamEvent={isTeamEvent}
+        entity={entity}
+      />
+    </main>
+  );
 }

-Type.isBookingPage = true;
 Type.PageWrapper = PageWrapper;
+Type.isBookingPage = true;

-const querySchema = z.object({
-  link: z.string().optional().default(""),
-  slug: z.string().optional().default(""),
-  date: z.union([z.string(), z.null()]).optional().default(null),
-});
+async function getUserPageProps(context: GetServerSidePropsContext) {
+  const { link, slug } = paramsSchema.parse(context.params);
+  const { rescheduleUid } = context.query;
+  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req.headers.host ?? "");
+  const org = isValidOrgDomain ? currentOrgDomain : null;

-export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { ssrInit } = await import("@server/lib/ssr");
  const ssr = await ssrInit(context);
-  const { link, slug, date } = querySchema.parse(context.query);

  const hashedLink = await prisma.hashedLink.findUnique({
    where: {
@@ -45,132 +68,88 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
    select: {
      eventTypeId: true,
      eventType: {
-        select: availiblityPageEventTypeSelect,
-      },
-    },
-  });
-
-  const userId = hashedLink?.eventType.userId || hashedLink?.eventType.users[0]?.id;
-  if (!userId)
-    return {
-      notFound: true,
-    } as {
-      notFound: true;
-    };
-
-  if (hashedLink?.eventType.slug !== slug)
-    return {
-      notFound: true,
-    } as {
-      notFound: true;
-    };
-
-  const users = await prisma.user.findMany({
-    where: {
-      id: userId,
-    },
-    select: {
-      id: true,
-      username: true,
-      name: true,
-      email: true,
-      bio: true,
-      avatar: true,
-      startTime: true,
-      endTime: true,
-      timeZone: true,
-      weekStart: true,
-      availability: true,
-      hideBranding: true,
-      brandColor: true,
-      darkBrandColor: true,
-      defaultScheduleId: true,
-      allowDynamicBooking: true,
-      away: true,
-      schedules: {
        select: {
-          availability: true,
-          timeZone: true,
-          id: true,
+          users: {
+            select: {
+              username: true,
+            },
+          },
+          team: {
+            select: {
+              id: true,
+            },
+          },
        },
      },
-      theme: true,
    },
  });

-  if (!users || !users.length) {
+  const username = hashedLink?.eventType.users[0]?.username;
+
+  if (!hashedLink || !username) {
    return {
      notFound: true,
-    } as {
-      notFound: true;
    };
  }

-  const locations = hashedLink.eventType.locations
-    ? (hashedLink.eventType.locations as LocationObject[])
-    : [];
-
-  const eventTypeObject = Object.assign({}, hashedLink.eventType, {
-    metadata: EventTypeMetaDataSchema.parse(hashedLink.eventType.metadata || {}),
-    recurringEvent: parseRecurringEvent(hashedLink.eventType.recurringEvent),
-    periodStartDate: hashedLink.eventType.periodStartDate?.toString() ?? null,
-    periodEndDate: hashedLink.eventType.periodEndDate?.toString() ?? null,
-    slug,
-    locations: privacyFilteredLocations(locations),
-    users: users.map((u) => ({
-      name: u.name,
-      username: u.username,
-      hideBranding: u.hideBranding,
-      timeZone: u.timeZone,
-    })),
-    descriptionAsSafeHTML: markdownToSafeHTML(hashedLink.eventType.description),
+  const user = await prisma.user.findFirst({
+    where: {
+      username,
+      organization: isValidOrgDomain
+        ? {
+            slug: currentOrgDomain,
+          }
+        : null,
+    },
+    select: {
+      away: true,
+      hideBranding: true,
+    },
  });

-  const [user] = users;
+  if (!user) {
+    return {
+      notFound: true,
+    };
+  }

-  const schedule = {
-    ...user.schedules.filter(
-      (schedule) => !user.defaultScheduleId || schedule.id === user.defaultScheduleId
-    )[0],
-  };
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid) {
+    booking = await getBookingForReschedule(`${rescheduleUid}`);
+  }

-  const timeZone = schedule.timeZone || user.timeZone;
+  const isTeamEvent = !!hashedLink.eventType?.team?.id;

-  const workingHours = getWorkingHours(
-    {
-      timeZone,
-    },
-    schedule.availability || user.availability
-  );
-  eventTypeObject.schedule = null;
-  eventTypeObject.availability = [];
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({ username, eventSlug: slug, isTeamEvent, org });

-  const booking: GetBookingType | null = null;
-
-  const profile = {
-    name: user.name || user.username,
-    image: user.avatar,
-    slug: user.username,
-    theme: user.theme,
-    weekStart: user.weekStart,
-    brandColor: user.brandColor,
-    darkBrandColor: user.darkBrandColor,
-  };
+  if (!eventData) {
+    return {
+      notFound: true,
+    };
+  }

  return {
    props: {
-      away: user.away,
-      themeBasis: user.username,
-      isDynamicGroup: false,
-      profile,
-      date,
-      eventType: eventTypeObject,
-      workingHours,
-      trpcState: ssr.dehydrate(),
-      previousPage: context.req.headers.referer ?? null,
+      entity: eventData.entity,
      booking,
-      users: [user.username],
-      isBrandingHidden: user.hideBranding,
+      away: user?.away,
+      user: username,
+      slug,
+      trpcState: ssr.dehydrate(),
+      isBrandingHidden: user?.hideBranding,
+      // Sending the team event from the server, because this template file
+      // is reused for both team and user events.
+      isTeamEvent,
    },
  };
+}
+
+const paramsSchema = z.object({ link: z.string(), slug: z.string().transform((s) => slugify(s)) });
+
+// Booker page fetches a tiny bit of data server side, to determine early
+// whether the page should show an away state or dynamic booking not allowed.
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  return await getUserPageProps(context);
 };
@@ -1,7 +0,0 @@
-import withEmbedSsr from "@lib/withEmbedSsr";
-
-import { getServerSideProps as _getServerSideProps } from "../[slug]";
-
-export { default } from "../[slug]";
-
-export const getServerSideProps = withEmbedSsr(_getServerSideProps);
@@ -1,137 +0,0 @@
-import type { GetServerSidePropsContext } from "next";
-
-import { parseRecurringEvent } from "@calcom/lib";
-import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import prisma from "@calcom/prisma";
-import { bookEventTypeSelect } from "@calcom/prisma/selects";
-import { customInputSchema, eventTypeBookingFields, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-
-import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
-import type { inferSSRProps } from "@lib/types/inferSSRProps";
-
-import PageWrapper from "@components/PageWrapper";
-import BookingPage from "@components/booking/pages/BookingPage";
-
-import { ssrInit } from "@server/lib/ssr";
-
-export type HashLinkPageProps = inferSSRProps<typeof getServerSideProps>;
-
-export default function Book(props: HashLinkPageProps) {
-  return <BookingPage {...props} />;
-}
-
-Book.isBookingPage = true;
-Book.PageWrapper = PageWrapper;
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const ssr = await ssrInit(context);
-  const link = asStringOrThrow(context.query.link as string);
-  const recurringEventCountQuery = asStringOrNull(context.query.count);
-
-  const hashedLink = await prisma.hashedLink.findUnique({
-    where: {
-      link,
-    },
-    select: {
-      eventTypeId: true,
-      eventType: {
-        select: bookEventTypeSelect,
-      },
-    },
-  });
-
-  const userId = hashedLink?.eventType.userId || hashedLink?.eventType.users[0]?.id;
-
-  if (!userId)
-    return {
-      notFound: true,
-    };
-
-  const users = await prisma.user.findMany({
-    where: {
-      id: userId,
-    },
-    select: {
-      id: true,
-      username: true,
-      name: true,
-      email: true,
-      bio: true,
-      avatar: true,
-      theme: true,
-      brandColor: true,
-      darkBrandColor: true,
-      allowDynamicBooking: true,
-    },
-  });
-
-  if (!users.length) return { notFound: true };
-  const [user] = users;
-  const eventTypeRaw = hashedLink?.eventType;
-
-  if (!eventTypeRaw) return { notFound: true };
-  const eventType = {
-    ...eventTypeRaw,
-    metadata: EventTypeMetaDataSchema.parse(eventTypeRaw.metadata || {}),
-    recurringEvent: parseRecurringEvent(eventTypeRaw.recurringEvent),
-    bookingFields: eventTypeBookingFields.parse(eventTypeRaw.bookingFields || []),
-  };
-
-  const eventTypeObject = [eventType].map((e) => {
-    return {
-      ...e,
-      periodStartDate: e.periodStartDate?.toString() ?? null,
-      periodEndDate: e.periodEndDate?.toString() ?? null,
-      customInputs: customInputSchema.array().parse(e.customInputs || []),
-      schedulingType: null,
-      users: users.map((u) => ({
-        id: u.id,
-        name: u.name,
-        username: u.username,
-        avatar: u.avatar,
-        image: u.avatar,
-        slug: u.username,
-        theme: u.theme,
-        email: u.email,
-        brandColor: u.brandColor,
-        darkBrandColor: u.darkBrandColor,
-      })),
-      descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
-    };
-  })[0];
-
-  const profile = {
-    name: user.name || user.username,
-    image: user.avatar,
-    slug: user.username,
-    theme: user.theme,
-    brandColor: user.brandColor,
-    darkBrandColor: user.darkBrandColor,
-    eventName: null,
-  };
-
-  // Checking if number of recurring event ocurrances is valid against event type configuration
-  const recurringEventCount =
-    (eventTypeObject.recurringEvent?.count &&
-      recurringEventCountQuery &&
-      (parseInt(recurringEventCountQuery) <= eventTypeObject.recurringEvent.count
-        ? parseInt(recurringEventCountQuery)
-        : eventType.recurringEvent?.count)) ||
-    null;
-
-  return {
-    props: {
-      profile,
-      themeBasis: user.username,
-      eventType: eventTypeObject,
-      booking: null,
-      currentSlotBooking: null,
-      trpcState: ssr.dehydrate(),
-      recurringEventCount,
-      isDynamicGroupBooking: false,
-      hasHashedBookingLink: true,
-      hashedLink: link,
-      isEmbed: typeof context.query.embed === "string",
-    },
-  };
-}
@@ -87,6 +87,7 @@ export type FormValues = {
  description: string;
  disableGuests: boolean;
  requiresConfirmation: boolean;
+  requiresBookerEmailVerification: boolean;
  recurringEvent: RecurringEvent | null;
  schedulingType: SchedulingType | null;
  hidden: boolean;
@@ -101,6 +102,7 @@ export type FormValues = {
    displayLocationPublicly?: boolean;
    phone?: string;
    hostDefault?: string;
+    credentialId?: number;
  }[];
  customInputs: CustomInputParsed[];
  schedule: number | null;
@@ -161,8 +163,10 @@ const EventTypePage = (props: EventTypeSetupProps) => {
    data: { tabName },
  } = useTypedQuery(querySchema);

-  const { data: eventTypeApps } = trpc.viewer.apps.useQuery({
+  const { data: eventTypeApps } = trpc.viewer.integrations.useQuery({
    extendsFeature: "EventType",
+    teamId: props.eventType.team?.id || props.eventType.parent?.teamId,
+    onlyInstalled: true,
  });

  const { eventType, locationOptions, team, teamMembers, currentUserMembership, destinationCalendar } = props;
@@ -202,6 +206,10 @@ const EventTypePage = (props: EventTypeSetupProps) => {
        message = `${err.data.code}: ${t(err.message)}`;
      }

+      if (err.data?.code === "INTERNAL_SERVER_ERROR") {
+        message = t("unexpected_error_try_again");
+      }
+
      showToast(message ? t(message) : t(err.message), "error");
    },
  });
@@ -244,6 +252,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
      durationLimits: eventType.durationLimits || undefined,
      length: eventType.length,
      hidden: eventType.hidden,
+      hashedLink: eventType.hashedLink?.link || undefined,
      periodDates: {
        startDate: periodDates.startDate,
        endDate: periodDates.endDate,
@@ -306,12 +315,12 @@ const EventTypePage = (props: EventTypeSetupProps) => {

  const appsMetadata = formMethods.getValues("metadata")?.apps;
  const availability = formMethods.watch("availability");
-  const numberOfInstalledApps = eventTypeApps?.filter((app) => app.isInstalled).length || 0;
  let numberOfActiveApps = 0;

  if (appsMetadata) {
    numberOfActiveApps = Object.entries(appsMetadata).filter(
-      ([appId, appData]) => eventTypeApps?.find((app) => app.slug === appId)?.isInstalled && appData.enabled
+      ([appId, appData]) =>
+        eventTypeApps?.items.find((app) => app.slug === appId)?.isInstalled && appData.enabled
    ).length;
  }

@@ -423,7 +432,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
    <>
      <EventTypeSingleLayout
        enabledAppsNumber={numberOfActiveApps}
-        installedAppsNumber={numberOfInstalledApps}
+        installedAppsNumber={eventTypeApps?.items.length || 0}
        enabledWorkflowsNumber={eventType.workflows.length}
        eventType={eventType}
        team={team}
@@ -500,7 +509,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
        </Form>
      </EventTypeSingleLayout>

-      {slugExistsChildrenDialogOpen.length && (
+      {slugExistsChildrenDialogOpen.length ? (
        <ManagedEventTypeDialog
          slugExistsChildrenDialogOpen={slugExistsChildrenDialogOpen}
          isLoading={formMethods.formState.isSubmitting}
@@ -515,7 +524,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
            setSlugExistsChildrenDialogOpen([]);
          }}
        />
-      )}
+      ) : null}
    </>
  );
 };
@@ -523,6 +532,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
 const EventTypePageWrapper = (props: inferSSRProps<typeof getServerSideProps>) => {
  const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });

+  if (!data) return null;
  return <EventTypePage {...(data as EventTypeSetupProps)} />;
 };

@@ -7,7 +7,7 @@ import type { FC } from "react";
 import { useEffect, useState, memo } from "react";
 import { z } from "zod";

-import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import useIntercom from "@calcom/features/ee/support/lib/intercom/useIntercom";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import CreateEventTypeDialog from "@calcom/features/eventtypes/components/CreateEventTypeDialog";
@@ -16,6 +16,7 @@ import { TeamsFilter } from "@calcom/features/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
 import Shell from "@calcom/features/shell/Shell";
 import { APP_NAME, CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -66,7 +67,6 @@ import {
  User as UserIcon,
 } from "@calcom/ui/components/icon";

-import { withQuery } from "@lib/QueryCell";
 import useMeQuery from "@lib/hooks/useMeQuery";

 import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -75,6 +75,7 @@ import SkeletonLoader from "@components/eventtype/SkeletonLoader";

 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
+type GetByViewerResponse = RouterOutputs["viewer"]["eventTypes"]["getByViewer"] | undefined;

 interface EventTypeListHeadingProps {
  profile: EventTypeGroupProfile;
@@ -103,11 +104,11 @@ const querySchema = z.object({

 const MobileTeamsTab: FC<MobileTeamsTabProps> = (props) => {
  const { eventTypeGroups } = props;
-
+  const orgBranding = useOrgBranding();
  const tabs = eventTypeGroups.map((item) => ({
    name: item.profile.name ?? "",
    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types",
-    avatar: item.profile.image ?? `${WEBAPP_URL}/${item.profile.slug}/avatar.png`,
+    avatar: item.profile.image ?? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${item.profile.slug}/avatar.png`,
  }));
  const { data } = useTypedQuery(querySchema);
  const events = eventTypeGroups.filter((item) => item.teamId === data.teamId);
@@ -201,7 +202,7 @@ const MemoizedItem = memo(Item);
 export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeListProps): JSX.Element => {
  const { t } = useLocale();
  const router = useRouter();
-  const orgBranding = useOrgBrandingValues();
+  const orgBranding = useOrgBranding();
  const [parent] = useAutoAnimate<HTMLUListElement>();
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [deleteDialogTypeId, setDeleteDialogTypeId] = useState(0);
@@ -404,7 +405,9 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                          items={type.users.map(
                            (organizer: { name: string | null; username: string | null }) => ({
                              alt: organizer.name || "",
-                              image: `${WEBAPP_URL}/${organizer.username}/avatar.png`,
+                              image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${
+                                organizer.username
+                              }/avatar.png`,
                              title: organizer.name || "",
                            })
                          )}
@@ -419,7 +422,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                            .flatMap((ch) => ch.users)
                            .map((user: Pick<User, "name" | "username">) => ({
                              alt: user.name || "",
-                              image: `${WEBAPP_URL}/${user.username}/avatar.png`,
+                              image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
                              title: user.name || "",
                            }))}
                        />
@@ -512,7 +515,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                    type="button"
                                    StartIcon={Code}
                                    className="w-full rounded-none"
-                                    embedUrl={encodeURIComponent(embedLink)}>
+                                    embedUrl={encodeURIComponent(embedLink)}
+                                    eventId={type.id}>
                                    {t("embed")}
                                  </EmbedButton>
                                </DropdownMenuItem>
@@ -698,7 +702,7 @@ const EventTypeListHeading = ({
 }: EventTypeListHeadingProps): JSX.Element => {
  const { t } = useLocale();
  const router = useRouter();
-  const orgBranding = useOrgBrandingValues();
+  const orgBranding = useOrgBranding();

  const publishTeamMutation = trpc.viewer.teams.publish.useMutation({
    onSuccess(data) {
@@ -708,13 +712,16 @@ const EventTypeListHeading = ({
      showToast(error.message, "error");
    },
  });
-
+  const bookerUrl = useBookerUrl();
  return (
    <div className="mb-4 flex items-center space-x-2">
      <Avatar
        alt={profile?.name || ""}
        href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
-        imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
+        imageSrc={
+          `${orgBranding?.fullDomain ?? WEBAPP_URL}/${teamId ? "team/" : ""}${profile.slug}/avatar.png` ||
+          undefined
+        }
        size="md"
        className="mt-1 inline-flex justify-center"
      />
@@ -736,9 +743,7 @@ const EventTypeListHeading = ({
        )}
        {profile?.slug && (
          <Link href={`${CAL_URL}/${profile.slug}`} className="text-subtle block text-xs">
-            {orgBranding
-              ? `${orgBranding.fullDomain.replace("https://", "").replace("http://", "")}${profile.slug}`
-              : `${CAL_URL?.replace("https://", "").replace("http://", "")}/${profile.slug}`}
+            {`${bookerUrl.replace("https://", "").replace("http://", "")}/${profile.slug}`}
          </Link>
        )}
      </div>
@@ -765,14 +770,12 @@ const CreateFirstEventTypeView = () => {
  );
 };

-const CTA = () => {
+const CTA = ({ data }: { data: GetByViewerResponse }) => {
  const { t } = useLocale();

-  const query = trpc.viewer.eventTypes.getByViewer.useQuery();
+  if (!data) return null;

-  if (!query.data) return null;
-
-  const profileOptions = query.data.profiles
+  const profileOptions = data.profiles
    .filter((profile) => !profile.readOnly)
    .map((profile) => {
      return {
@@ -804,7 +807,7 @@ const Actions = () => {

 const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => {
  const { t } = useLocale();
-  const orgBranding = useOrgBrandingValues();
+  const orgBranding = useOrgBranding();

  return (
    <Alert
@@ -830,15 +833,91 @@ const SetupProfileBanner = ({ closeAction }: { closeAction: () => void }) => {
  );
 };

+const Main = ({
+  status,
+  error,
+  data,
+  filters,
+}: {
+  status: string;
+  data: GetByViewerResponse;
+  error: any;
+  filters: ReturnType<typeof getTeamsFiltersFromQuery>;
+}) => {
+  const isMobile = useMediaQuery("(max-width: 768px)");
+  const router = useRouter();
+
+  const orgBranding = useOrgBranding();
+
+  if (!data || status === "loading") {
+    return <SkeletonLoader />;
+  }
+
+  if (status === "error") {
+    return <Alert severity="error" title="Something went wrong" message={error.message} />;
+  }
+
+  const isFilteredByOnlyOneItem =
+    (filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) && data.eventTypeGroups.length === 1;
+  return (
+    <>
+      {data.eventTypeGroups.length > 1 || isFilteredByOnlyOneItem ? (
+        <>
+          {isMobile ? (
+            <MobileTeamsTab eventTypeGroups={data.eventTypeGroups} />
+          ) : (
+            data.eventTypeGroups.map((group: EventTypeGroup, index: number) => (
+              <div className="flex flex-col" key={group.profile.slug}>
+                <EventTypeListHeading
+                  profile={group.profile}
+                  membershipCount={group.metadata.membershipCount}
+                  teamId={group.teamId}
+                  orgSlug={orgBranding?.slug}
+                />
+
+                <EventTypeList
+                  types={group.eventTypes}
+                  group={group}
+                  groupIndex={index}
+                  readOnly={group.metadata.readOnly}
+                />
+              </div>
+            ))
+          )}
+        </>
+      ) : (
+        data.eventTypeGroups.length === 1 && (
+          <EventTypeList
+            types={data.eventTypeGroups[0].eventTypes}
+            group={data.eventTypeGroups[0]}
+            groupIndex={0}
+            readOnly={data.eventTypeGroups[0].metadata.readOnly}
+          />
+        )
+      )}
+      {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
+      <EmbedDialog />
+      {router.query.dialog === "duplicate" && <DuplicateDialog />}
+    </>
+  );
+};
+
 const EventTypesPage = () => {
  const { t } = useLocale();
  const router = useRouter();
  const { open } = useIntercom();
  const { query } = router;
  const { data: user } = useMeQuery();
-  const isMobile = useMediaQuery("(max-width: 768px)");
  const [showProfileBanner, setShowProfileBanner] = useState(false);
-  const orgBranding = useOrgBrandingValues();
+  const orgBranding = useOrgBranding();
+  const filters = getTeamsFiltersFromQuery(router.query);
+
+  // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
+  const { data, status, error } = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters }, {
+    refetchOnWindowFocus: false,
+    cacheTime: 1 * 60 * 60 * 1000,
+    staleTime: 1 * 60 * 60 * 1000,
+  });

  function closeBanner() {
    setShowProfileBanner(false);
@@ -855,10 +934,6 @@ const EventTypesPage = () => {
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
-  const filters = getTeamsFiltersFromQuery(router.query);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const WithQuery = withQuery(trpc.viewer.eventTypes.getByViewer as any, filters && { filters });

  return (
    <div>
@@ -873,59 +948,8 @@ const EventTypesPage = () => {
        subtitle={t("event_types_page_subtitle")}
        afterHeading={showProfileBanner && <SetupProfileBanner closeAction={closeBanner} />}
        beforeCTAactions={<Actions />}
-        CTA={<CTA />}>
-        <WithQuery
-          customLoader={<SkeletonLoader />}
-          success={({ data }) => {
-            const isFilteredByOnlyOneItem =
-              (filters?.teamIds?.length === 1 || filters?.userIds?.length === 1) &&
-              data.eventTypeGroups.length === 1;
-
-            return (
-              <>
-                {data.eventTypeGroups.length > 1 || isFilteredByOnlyOneItem ? (
-                  <>
-                    {isMobile ? (
-                      <MobileTeamsTab eventTypeGroups={data.eventTypeGroups} />
-                    ) : (
-                      data.eventTypeGroups.map((group: EventTypeGroup, index: number) => (
-                        <div className="flex flex-col" key={group.profile.slug}>
-                          <EventTypeListHeading
-                            profile={group.profile}
-                            membershipCount={group.metadata.membershipCount}
-                            teamId={group.teamId}
-                            orgSlug={orgBranding?.slug}
-                          />
-
-                          <EventTypeList
-                            types={group.eventTypes}
-                            group={group}
-                            groupIndex={index}
-                            readOnly={group.metadata.readOnly}
-                          />
-                        </div>
-                      ))
-                    )}
-                  </>
-                ) : (
-                  data.eventTypeGroups.length === 1 && (
-                    <EventTypeList
-                      types={data.eventTypeGroups[0].eventTypes}
-                      group={data.eventTypeGroups[0]}
-                      groupIndex={0}
-                      readOnly={data.eventTypeGroups[0].metadata.readOnly}
-                    />
-                  )
-                )}
-
-                {data.eventTypeGroups.length === 0 && <CreateFirstEventTypeView />}
-
-                <EmbedDialog />
-                {router.query.dialog === "duplicate" && <DuplicateDialog />}
-              </>
-            );
-          }}
-        />
+        CTA={<CTA data={data} />}>
+        <Main data={data} status={status} error={error} filters={filters} />
      </Shell>
    </div>
  );
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default } from "@calcom/features/ee/workflows/api/scheduleWhatsappReminders";`