v3.2.7

fix sub quantity update stripe (#11057 )
easy fix (#11054 )
2023-08-31 15:50:53 -07:00 · 2023-08-31 22:46:48 +00:00 · 2023-08-31 22:44:35 +00:00 · 2023-08-31 15:27:51 -07:00 · 2023-08-31 12:57:59 -07:00 · 2023-08-31 21:36:30 +02:00
1157 changed files with 45281 additions and 16002 deletions
@@ -1,6 +1,7 @@
 # ********** INDEX **********
 #
 # - APP STORE
+#   - BASECAMP
 #   - DAILY.CO VIDEO
 #   - GOOGLE CALENDAR/MEET/LOGIN
 #   - HUBSPOT
@@ -20,6 +21,14 @@

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

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

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

 # Set the following value to true if you wish to enable Team Impersonation
@@ -215,3 +220,8 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
+
+#   - APPLE CALENDAR
+# Used for E2E tests on Apple Calendar
+E2E_TEST_APPLE_CALENDAR_EMAIL=""
+E2E_TEST_APPLE_CALENDAR_PASSWORD=""
@@ -22,18 +22,18 @@ Any other relevant information. For example, why do you consider this a bug and

 ### Actual Results

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

 ### Expected Results

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

 ### Technical details

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

 ### Evidence

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

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

 ## Type of change

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

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

 ## How should this be tested?

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

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

 ## Mandatory Tasks

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

 ## Checklist

@@ -1,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
@@ -1,16 +0,0 @@
-name: Add PRs to project Reviewing PRs
-
-on:
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-PR-to-project:
-    name: Add PRs to project Reviewing PRs
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/11
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
@@ -5,16 +5,15 @@ on:
    types:
      - opened

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

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

 # Event for the workflow
 on:
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-bookingReminder:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -5,7 +5,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
    - cron: "0 0 1 * *"
 jobs:
  cron-downgradeUsers:
@@ -21,4 +21,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleEmailReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleSMSReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -4,8 +4,8 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
  cron-scheduleWhatsappReminders:
    env:
@@ -20,4 +20,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -8,7 +8,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs every day (see https://crontab.guru)
+    # Runs "At 00:00." every day (see https://crontab.guru)
    - cron: "0 0 * * *"
  workflow_dispatch:
 jobs:
@@ -5,7 +5,7 @@ on:
  # "Scheduled workflows run on the latest commit on the default or base branch."
  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
  schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
    - cron: "0 0 1 * *"
 jobs:
  cron-syncAppMeta:
@@ -21,4 +21,4 @@ jobs:
            -X POST \
            -H 'content-type: application/json' \
            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf
@@ -0,0 +1,23 @@
+name: Cron - webhookTriggers
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # Runs “every 5 minutes” (see https://crontab.guru)
+    - cron: "*/5 * * * *"
+jobs:
+  cron-webhookTriggers:
+    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/webhookTriggers \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail
@@ -5,7 +5,7 @@ on:
 jobs:
  e2e-app-store:
    timeout-minutes: 20
-    name: E2E App-Store Apps
+    name: E2E App Store (${{ matrix.shard }}/${{ strategy.job-total }})
    runs-on: buildjet-4vcpu-ubuntu-2204
    services:
      postgres:
@@ -15,6 +15,16 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for AppStore. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]

    steps:
      - uses: actions/checkout@v3
@@ -22,16 +32,40 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
-        run: yarn test-e2e:app-store
+        run: yarn e2e:app-store --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
-          name: test-results
+          name: app-store-results-${{ matrix.shard }}_${{ strategy.job-total }}
          path: test-results
@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed React tests and booking flow(for non-embed as well)
 on:
  workflow_call:

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

    steps:
      - uses: actions/checkout@v3
@@ -21,18 +27,41 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: |
-          yarn test-e2e:embed-react
+          yarn e2e:embed-react --shard=${{ matrix.shard }}/${{ strategy.job-total }}
          yarn workspace @calcom/embed-react packaged:tests
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
-          name: test-results
+          name: embed-react-results-${{ matrix.shard }}_${{ strategy.job-total }}
          path: test-results
@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed Core tests and booking flow(for non-embed as well)
 on:
  workflow_call:

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

    steps:
      - uses: actions/checkout@v3
@@ -21,16 +32,40 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
-        run: yarn test-e2e:embed
+        run: yarn e2e:embed --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
        with:
-          name: test-results
+          name: embed-core-results-${{ matrix.shard }}_${{ strategy.job-total }}
          path: test-results
@@ -1,6 +1,8 @@
 name: E2E test
+
 on:
  workflow_call:
+
 jobs:
  e2e:
    timeout-minutes: 20
@@ -14,6 +16,11 @@ jobs:
          POSTGRES_DB: calendso
        ports:
          - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
    strategy:
      fail-fast: false
      matrix:
@@ -24,13 +31,41 @@ jobs:
      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
      - uses: ./.github/actions/yarn-install
      - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
      - name: Run Tests
        run: yarn e2e --shard=${{ matrix.shard }}/${{ strategy.job-total }}
        env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+          EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+          EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+          EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD}}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
      - name: Upload Test Results
        if: ${{ always() }}
        uses: actions/upload-artifact@v2
@@ -1,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') }}
@@ -44,11 +44,6 @@ jobs:
              - 'packages/embeds/**'
              - 'playwright.config.ts'

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

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

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

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

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

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

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

  required:
-    needs: [lint, type-check, test, build, e2e]
+    needs: [lint, type-check, test, build, e2e, e2e-embed, e2e-embed-react, e2e-app-store]
    if: always()
    runs-on: buildjet-4vcpu-ubuntu-2204
    steps:
@@ -3,6 +3,32 @@ name: Production Build (without database)
 on:
  workflow_call:

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

+env:
+  ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+  NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+  NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+  NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+  PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+  PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+  SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+  SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+  SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
  build:
    name: Build
@@ -20,6 +46,5 @@ jobs:
      - uses: actions/checkout@v3
      - uses: ./.github/actions/dangerous-git-checkout
      - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/env-read-file
      - uses: ./.github/actions/cache-db
      - uses: ./.github/actions/cache-build
@@ -0,0 +1,47 @@
+name: "Release Docker"
+
+on: # yamllint disable-line rule:truthy
+  release:
+    types:
+      - created
+  # in case manual trigger is needed
+  workflow_dispatch:
+    inputs:
+      RELEASE_TAG:
+        description: "v{Major}.{Minor}.{Patch}"
+
+jobs:
+  release:
+    name: "Remote Release"
+
+    runs-on: "ubuntu-latest"
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: "Determine tag"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
+
+      - name: "Run remote release workflow"
+        uses: "actions/github-script@v6"
+        with:
+          # Requires a personal access token with Actions Read and write permissions on calcom/docker.
+          github-token: "${{ secrets.DOCKER_REPO_ACCESS_TOKEN }}"
+          script: |
+            try {
+              const response = await github.rest.actions.createWorkflowDispatch({
+                owner: context.repo.owner,
+                repo: 'docker',
+                workflow_id: 'create-release.yaml',
+                ref: 'main',
+                inputs: {
+                  "RELEASE_TAG": process.env.RELEASE_TAG
+                },
+              });
+
+              console.log(response);
+            } catch (error) {
+              console.error(error);
+              core.setFailed(error.message);
+            }
@@ -29,11 +29,11 @@ jobs:
          header: pr-title-lint-error
          message: |
            Hey there and thank you for opening this pull request! 👋🏼
-            
+
            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.

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

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

 permissions:
  pull-requests: write
  issues: write

 jobs:
- welcome-message:
-  name: Welcoming New Users
+  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
@@ -24,5 +23,5 @@ jobs:
          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: | 
+          issue-message: |
            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉
@@ -40,4 +40,4 @@ vscode:
    - bradlc.vscode-tailwindcss
    - ban.spellright
    - stripe.vscode-stripe
-    - Prisma.prisma
+    - Prisma.prisma
@@ -51,9 +51,9 @@
 # Scheduling infrastructure for absolutely everyone

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

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

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

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

-
 ## Contact us

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

 ## Stay Up-to-Date

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

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

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

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

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

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

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

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

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

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

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

-<a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
-
 Cal.com is an [open startup](https://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
@@ -0,0 +1,15 @@
+BACKEND_URL=http://localhost:3002/api
+
+APP_ID=cal-ai
+APP_URL=http://localhost:3000/apps/cal-ai
+
+# Used to verify requests from sendgrid. You can generate a new one with: `openssl rand -hex 32`
+PARSE_KEY=
+
+OPENAI_API_KEY=
+
+# Optionally trace completions at https://smith.langchain.com
+# LANGCHAIN_TRACING_V2=true
+# LANGCHAIN_ENDPOINT=
+# LANGCHAIN_API_KEY=
+# LANGCHAIN_PROJECT=
@@ -0,0 +1,48 @@
+# Cal.com Email Assistant
+
+Welcome to the first stage of Cal AI!
+
+This app lets you chat with your calendar via email:
+
+  - Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
+  - List and rearrange your bookings eg. "Cancel my next meeting"
+  - Answer basic questions about your busiest times eg. "How does my Tuesday look?"
+
+The core logic is contained in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts). Here, a [LangChain Agent Executor](https://docs.langchain.com/docs/components/agents/agent-executor) is tasked with following your instructions. Given your last-known timezone, working hours, and busy times, it attempts to CRUD your bookings.
+
+_The AI agent can only choose from a set of tools, without ever seeing your API key._
+
+Emails are cleaned and routed in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts) using [MailParser](https://nodemailer.com/extras/mailparser/).
+
+Incoming emails are routed by email address. Addresses are verified by [DKIM record](https://support.google.com/a/answer/174124?hl=en), making it hard to spoof them.
+
+## Getting Started
+
+### Development
+
+If you haven't yet, please run the [root setup](/README.md) steps.
+
+Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. You'll need:
+
+  - An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
+  - A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
+  - A default sender email (for example, `ai@cal.dev`)
+  - The Cal AI's app ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+
+To stand up the API and AI apps simultaneously, simply run `yarn dev:ai`.
+
+### Email Router
+
+To expose the AI app, run `ngrok http 3000` (or the AI app's port number) in a new terminal. You may need to install [nGrok](https://ngrok.com/).
+
+To forward incoming emails to the Node.js server, one option is to use [SendGrid's Inbound Parse Webhook](https://docs.sendgrid.com/for-developers/parsing-email/setting-up-the-inbound-parse-webhook).
+
+1.  [Sign up for an account](https://signup.sendgrid.com/)
+2.  Go to Settings > [Inbound Parse](https://app.sendgrid.com/settings/parse) > Add Host & URL.
+3.  For subdomain, use `<sub>.<domain>.com` for now, where `sub` can be any subdomain but `domain.com` will need to be verified via MX records in your environment variables, eg. on [Vercel](https://vercel.com/guides/how-to-add-vercel-environment-variables).
+4.  Use the nGrok URL from above as the **Destination URL**.
+5.  Activate "POST the raw, full MIME message".
+6.  Send an email to `<anyone>@ai.example.com`. You should see a ping on the nGrok listener and Node.js server.
+7.  Adjust the logic in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts), save to hot-reload, and send another email to test the behaviour.
+
+Please feel free to improve any part of this architecture.
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
@@ -0,0 +1,15 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer");
+
+const plugins = [];
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  reactStrictMode: true,
+};
+
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);
@@ -0,0 +1,26 @@
+{
+  "name": "@calcom/ai",
+  "version": "0.1.0",
+  "private": true,
+  "author": "Cal.com Inc.",
+  "dependencies": {
+    "@calcom/prisma": "*",
+    "@t3-oss/env-nextjs": "^0.6.1",
+    "langchain": "^0.0.131",
+    "mailparser": "^3.6.5",
+    "next": "^13.4.6",
+    "supports-color": "8.1.1",
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@types/mailparser": "^3.4.0"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev -p 3005",
+    "format": "npx prettier . --write",
+    "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "start": "next start"
+  }
+}
@@ -0,0 +1,45 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import agent from "../../../utils/agent";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+/**
+ * Launches a LangChain agent to process an incoming email,
+ * then sends the response to the user.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const json = await request.json();
+
+  const { apiKey, userId, message, subject, user, replyTo } = json;
+
+  if ((!message && !subject) || !user) {
+    return new NextResponse("Missing fields", { status: 400 });
+  }
+
+  try {
+    const response = await agent(`${subject}\n\n${message}`, user, apiKey, userId);
+
+    // Send response to user
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: response.replace(/(?:\r\n|\r|\n)/g, "\n"),
+      to: user.email,
+      from: replyTo,
+    });
+
+    return new NextResponse("ok");
+  } catch (error) {
+    return new NextResponse(
+      (error as Error).message || "Something went wrong. Please try again or reach out for help.",
+      { status: 500 }
+    );
+  }
+};
@@ -0,0 +1,151 @@
+import type { ParsedMail, Source } from "mailparser";
+import { simpleParser } from "mailparser";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import prisma from "@calcom/prisma";
+
+import { env } from "../../../env.mjs";
+import { fetchAvailability } from "../../../tools/getAvailability";
+import { fetchEventTypes } from "../../../tools/getEventTypes";
+import getHostFromHeaders from "../../../utils/host";
+import now from "../../../utils/now";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+/**
+ * Verifies email signature and app authorization,
+ * then hands off to booking agent.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const formData = await request.formData();
+  const body = Object.fromEntries(formData);
+
+  // body.dkim looks like {@domain-com.22222222.gappssmtp.com : pass}
+  const signature = (body.dkim as string).includes(" : pass");
+
+  const envelope = JSON.parse(body.envelope as string);
+
+  const aiEmail = envelope.to[0];
+
+  // Parse email from mixed MIME type
+  const parsed: ParsedMail = await simpleParser(body.email as Source);
+
+  if (!parsed.text && !parsed.subject) {
+    return new NextResponse("Email missing text and subject", { status: 400 });
+  }
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+      id: true,
+      credentials: {
+        select: {
+          appId: true,
+          key: true,
+        },
+      },
+    },
+    where: { email: envelope.from },
+  });
+
+  if (!signature || !user?.email || !user?.id) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, you are not authorized to use this service. Please verify your email address and try again.",
+      to: user?.email || "",
+      from: aiEmail,
+    });
+
+    return new NextResponse();
+  }
+
+  const credential = user.credentials.find((c) => c.appId === env.APP_ID)?.key;
+
+  // User has not installed the app from the app store. Direct them to install it.
+  if (!(credential as { apiKey: string })?.apiKey) {
+    const url = env.APP_URL;
+
+    await sendEmail({
+      html: `Thanks for using Cal AI! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
+      subject: `Re: ${body.subject}`,
+      text: `Thanks for using Cal AI! To get started, the app must be installed. Click this link to install the Cal AI app: ${url}`,
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("ok");
+  }
+
+  const { apiKey } = credential as { apiKey: string };
+
+  // Pre-fetch data relevant to most bookings.
+  const [eventTypes, availability] = await Promise.all([
+    fetchEventTypes({
+      apiKey,
+    }),
+    fetchAvailability({
+      apiKey,
+      userId: user.id,
+      dateFrom: now,
+      dateTo: now,
+    }),
+  ]);
+
+  if ("error" in availability) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your availability. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(availability.error);
+    return new NextResponse("Error fetching availability. Please try again.", { status: 400 });
+  }
+
+  if ("error" in eventTypes) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your event types. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(eventTypes.error);
+    return new NextResponse("Error fetching event types. Please try again.", { status: 400 });
+  }
+
+  const { timeZone, workingHours } = availability;
+
+  const appHost = getHostFromHeaders(request.headers);
+
+  // Hand off to long-running agent endpoint to handle the email. (don't await)
+  fetch(`${appHost}/api/agent?parseKey=${env.PARSE_KEY}`, {
+    body: JSON.stringify({
+      apiKey,
+      userId: user.id,
+      message: parsed.text,
+      subject: parsed.subject,
+      replyTo: aiEmail,
+      user: {
+        email: user.email,
+        eventTypes,
+        timeZone,
+        workingHours,
+      },
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  await new Promise((r) => setTimeout(r, 1000));
+
+  return new NextResponse("ok");
+};
@@ -0,0 +1,43 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    BACKEND_URL: process.env.BACKEND_URL,
+    APP_ID: process.env.APP_ID,
+    APP_URL: process.env.APP_URL,
+    PARSE_KEY: process.env.PARSE_KEY,
+    NODE_ENV: process.env.NODE_ENV,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
+    DATABASE_URL: process.env.DATABASE_URL,
+  },
+
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    BACKEND_URL: z.string().url(),
+    APP_ID: z.string().min(1),
+    APP_URL: z.string().url(),
+    PARSE_KEY: z.string().min(1),
+    NODE_ENV: z.enum(["development", "test", "production"]),
+    OPENAI_API_KEY: z.string().min(1),
+    SENDGRID_API_KEY: z.string().min(1),
+    DATABASE_URL: z.string().url(),
+  },
+});
@@ -0,0 +1,111 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Creates a booking for a user by event type, times, and timezone.
+ */
+const createBooking = async ({
+  apiKey,
+  userId,
+  eventTypeId,
+  start,
+  end,
+  timeZone,
+  language,
+  responses,
+}: {
+  apiKey: string;
+  userId: number;
+  eventTypeId: number;
+  start: string;
+  end: string;
+  timeZone: string;
+  language: string;
+  responses: { name?: string; email?: string; location?: string };
+  title?: string;
+  status?: string;
+}): Promise<string | Error | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({
+      end,
+      eventTypeId,
+      language,
+      metadata: {},
+      responses,
+      start,
+      timeZone,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  if (response.status === 401) {
+    throw new Error("Unauthorized");
+  }
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return {
+      error: data.message,
+    };
+  }
+
+  return "Booking created";
+};
+
+const createBookingTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description:
+      "Tries to create a booking. If the user is unavailable, it will return availability that day, allowing you to avoid the getAvailability step in many cases.",
+    func: async ({ eventTypeId, start, end, timeZone, language, responses, title, status }) => {
+      return JSON.stringify(
+        await createBooking({
+          apiKey,
+          userId,
+          end,
+          eventTypeId,
+          language,
+          responses,
+          start,
+          status,
+          timeZone,
+          title,
+        })
+      );
+    },
+    name: "createBookingIfAvailable",
+    schema: z.object({
+      end: z
+        .string()
+        .describe("This should correspond to the event type's length, unless otherwise specified."),
+      eventTypeId: z.number(),
+      language: z.string(),
+      responses: z
+        .object({
+          email: z.string().optional(),
+          name: z.string().optional(),
+        })
+        .describe("External invited user. Not the user making the request."),
+      start: z.string(),
+      status: z.string().optional().describe("ACCEPTED, PENDING, CANCELLED or REJECTED"),
+      timeZone: z.string(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default createBookingTool;
@@ -0,0 +1,65 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Cancels a booking for a user by ID with reason.
+ */
+const cancelBooking = async ({
+  apiKey,
+  id,
+  reason,
+}: {
+  apiKey: string;
+  id: string;
+  reason: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}/cancel?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ reason }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "DELETE",
+  });
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking cancelled";
+};
+
+const cancelBookingTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Cancel a booking",
+    func: async ({ id, reason }) => {
+      return JSON.stringify(
+        await cancelBooking({
+          apiKey,
+          id,
+          reason,
+        })
+      );
+    },
+    name: "cancelBooking",
+    schema: z.object({
+      id: z.string(),
+      reason: z.string(),
+    }),
+  });
+};
+
+export default cancelBookingTool;
@@ -0,0 +1,84 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Availability } from "../types/availability";
+
+/**
+ * Fetches availability for a user by date range and event type.
+ */
+export const fetchAvailability = async ({
+  apiKey,
+  userId,
+  dateFrom,
+  dateTo,
+  eventTypeId,
+}: {
+  apiKey: string;
+  userId: number;
+  dateFrom: string;
+  dateTo: string;
+  eventTypeId?: number;
+}): Promise<Partial<Availability> | { error: string }> => {
+  const params: { [k: string]: string } = {
+    apiKey,
+    userId: userId.toString(),
+    dateFrom,
+    dateTo,
+  };
+
+  if (eventTypeId) params["eventTypeId"] = eventTypeId.toString();
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/availability?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) {
+    throw new Error("Unauthorized");
+  }
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return {
+    busy: data.busy,
+    dateRanges: data.dateRanges,
+    timeZone: data.timeZone,
+    workingHours: data.workingHours,
+  };
+};
+
+const getAvailabilityTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Get availability within range.",
+    func: async ({ dateFrom, dateTo, eventTypeId }) => {
+      return JSON.stringify(
+        await fetchAvailability({
+          apiKey,
+          userId,
+          dateFrom,
+          dateTo,
+          eventTypeId,
+        })
+      );
+    },
+    name: "getAvailability",
+    schema: z.object({
+      dateFrom: z.string(),
+      dateTo: z.string(),
+      eventTypeId: z
+        .number()
+        .optional()
+        .describe(
+          "The ID of the event type to filter availability for if you've called getEventTypes, otherwise do not include."
+        ),
+    }),
+  });
+};
+
+export default getAvailabilityTool;
@@ -0,0 +1,75 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Booking } from "../types/booking";
+import { BOOKING_STATUS } from "../types/booking";
+
+/**
+ * Fetches bookings for a user by date range.
+ */
+const fetchBookings = async ({
+  apiKey,
+  userId,
+  from,
+  to,
+}: {
+  apiKey: string;
+  userId: number;
+  from: string;
+  to: string;
+}): Promise<Booking[] | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  const bookings: Booking[] = data.bookings
+    .filter((booking: Booking) => {
+      const afterFrom = new Date(booking.startTime).getTime() > new Date(from).getTime();
+      const beforeTo = new Date(booking.endTime).getTime() < new Date(to).getTime();
+      const notCancelled = booking.status !== BOOKING_STATUS.CANCELLED;
+
+      return afterFrom && beforeTo && notCancelled;
+    })
+    .map(({ endTime, eventTypeId, id, startTime, status, title }: Booking) => ({
+      endTime,
+      eventTypeId,
+      id,
+      startTime,
+      status,
+      title,
+    }));
+
+  return bookings;
+};
+
+const getBookingsTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Get bookings for a user between two dates.",
+    func: async ({ from, to }) => {
+      return JSON.stringify(await fetchBookings({ apiKey, userId, from, to }));
+    },
+    name: "getBookings",
+    schema: z.object({
+      from: z.string().describe("ISO 8601 datetime string"),
+      to: z.string().describe("ISO 8601 datetime string"),
+    }),
+  });
+};
+
+export default getBookingsTool;
@@ -0,0 +1,51 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { EventType } from "../types/eventType";
+
+/**
+ * Fetches event types by user ID.
+ */
+export const fetchEventTypes = async ({ apiKey }: { apiKey: string }) => {
+  const params = {
+    apiKey,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/event-types?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return data.event_types.map((eventType: EventType) => ({
+    id: eventType.id,
+    length: eventType.length,
+    title: eventType.title,
+  }));
+};
+
+const getEventTypesTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Get the user's event type IDs. Usually necessary to book a meeting.",
+    func: async () => {
+      return JSON.stringify(
+        await fetchEventTypes({
+          apiKey,
+        })
+      );
+    },
+    name: "getEventTypes",
+    schema: z.object({}),
+  });
+};
+
+export default getEventTypesTool;
@@ -0,0 +1,84 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Edits a booking for a user by booking ID with new times, title, description, or status.
+ */
+const editBooking = async ({
+  apiKey,
+  userId,
+  id,
+  startTime, // In the docs it says start, but it's startTime: https://cal.com/docs/enterprise-features/api/api-reference/bookings#edit-an-existing-booking.
+  endTime, // Same here: it says end but it's endTime.
+  title,
+  description,
+  status,
+}: {
+  apiKey: string;
+  userId: number;
+  id: string;
+  startTime?: string;
+  endTime?: string;
+  title?: string;
+  description?: string;
+  status?: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ description, endTime, startTime, status, title }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "PATCH",
+  });
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking edited";
+};
+
+const editBookingTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Edit a booking",
+    func: async ({ description, endTime, id, startTime, status, title }) => {
+      return JSON.stringify(
+        await editBooking({
+          apiKey,
+          userId,
+          description,
+          endTime,
+          id,
+          startTime,
+          status,
+          title,
+        })
+      );
+    },
+    name: "editBooking",
+    schema: z.object({
+      description: z.string().optional(),
+      endTime: z.string().optional(),
+      id: z.string(),
+      startTime: z.string().optional(),
+      status: z.string().optional(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default editBookingTool;
@@ -0,0 +1,25 @@
+export type Availability = {
+  busy: {
+    start: string;
+    end: string;
+    title?: string;
+  }[];
+  timeZone: string;
+  dateRanges: {
+    start: string;
+    end: string;
+  }[];
+  workingHours: {
+    days: number[];
+    startTime: number;
+    endTime: number;
+    userId: number;
+  }[];
+  dateOverrides: {
+    date: string;
+    startTime: number;
+    endTime: number;
+    userId: number;
+  };
+  currentSeats: number;
+};
@@ -0,0 +1,23 @@
+export enum BOOKING_STATUS {
+  ACCEPTED = "ACCEPTED",
+  PENDING = "PENDING",
+  CANCELLED = "CANCELLED",
+  REJECTED = "REJECTED",
+}
+
+export type Booking = {
+  id: number;
+  userId: number;
+  description: string | null;
+  eventTypeId: number;
+  uid: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  attendees: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  user: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  payment: { id: number; success: boolean; paymentOption: string }[];
+  metadata: object | null;
+  status: BOOKING_STATUS;
+  responses: { email: string; name: string; location: string } | null;
+};
@@ -0,0 +1,13 @@
+export type EventType = {
+  id: number;
+  title: string;
+  length: number;
+  metadata: object;
+  slug: string;
+  hosts: {
+    userId: number;
+    isFixed: boolean;
+  }[];
+  hidden: boolean;
+  // ...
+};
@@ -0,0 +1,9 @@
+import type { EventType } from "./eventType";
+import type { WorkingHours } from "./workingHours";
+
+export type User = {
+  email: string;
+  timeZone: string;
+  eventTypes: EventType[];
+  workingHours: WorkingHours[];
+};
@@ -0,0 +1,5 @@
+export type WorkingHours = {
+  days: number[];
+  startTime: number;
+  endTime: number;
+};
@@ -0,0 +1,73 @@
+import { initializeAgentExecutorWithOptions } from "langchain/agents";
+import { ChatOpenAI } from "langchain/chat_models/openai";
+
+import { env } from "../env.mjs";
+import createBookingIfAvailable from "../tools/createBookingIfAvailable";
+import deleteBooking from "../tools/deleteBooking";
+import getAvailability from "../tools/getAvailability";
+import getBookings from "../tools/getBookings";
+import updateBooking from "../tools/updateBooking";
+import type { EventType } from "../types/eventType";
+import type { User } from "../types/user";
+import type { WorkingHours } from "../types/workingHours";
+import now from "./now";
+
+const gptModel = "gpt-4";
+
+/**
+ * Core of the Cal AI booking agent: a LangChain Agent Executor.
+ * Uses a toolchain to book meetings, list available slots, etc.
+ * Uses OpenAI functions to better enforce JSON-parsable output from the LLM.
+ */
+const agent = async (input: string, user: User, apiKey: string, userId: number) => {
+  const tools = [
+    createBookingIfAvailable(apiKey, userId),
+    getAvailability(apiKey, userId),
+    getBookings(apiKey, userId),
+    updateBooking(apiKey, userId),
+    deleteBooking(apiKey),
+  ];
+
+  const model = new ChatOpenAI({
+    modelName: gptModel,
+    openAIApiKey: env.OPENAI_API_KEY,
+    temperature: 0,
+  });
+
+  /**
+   * Initialize the agent executor with arguments.
+   */
+  const executor = await initializeAgentExecutorWithOptions(tools, model, {
+    agentArgs: {
+      prefix: `You are Cal AI - a bleeding edge scheduling assistant that interfaces via email.
+            Make sure your final answers are definitive, complete and well formatted.
+            Sometimes, tools return errors. In this case, try to handle the error intelligently or ask the user for more information.
+            Tools will always handle times in UTC, but times sent to the user should be formatted per that user's timezone.
+
+            Current UTC time is: ${now}
+            The user's time zone is: ${user.timeZone}
+            The user's event types are: ${user.eventTypes
+              .map((e: EventType) => `ID: ${e.id}, Title: ${e.title}, Length: ${e.length}`)
+              .join("\n")}
+            The user's working hours are: ${user.workingHours
+              .map(
+                (w: WorkingHours) =>
+                  `Days: ${w.days.join(", ")}, Start Time (minutes in UTC): ${
+                    w.startTime
+                  }, End Time (minutes in UTC): ${w.endTime}`
+              )
+              .join("\n")}
+            `,
+    },
+    agentType: "openai-functions",
+    returnIntermediateSteps: env.NODE_ENV === "development",
+    verbose: env.NODE_ENV === "development",
+  });
+
+  const result = await executor.call({ input });
+  const { output } = result;
+
+  return output;
+};
+
+export default agent;
@@ -0,0 +1,7 @@
+import type { NextRequest } from "next/server";
+
+const getHostFromHeaders = (headers: NextRequest["headers"]): string => {
+  return `https://${headers.get("host")}`;
+};
+
+export default getHostFromHeaders;
@@ -0,0 +1 @@
+export default new Date().toISOString();
@@ -0,0 +1,40 @@
+import mail from "@sendgrid/mail";
+
+const sendgridAPIKey = process.env.SENDGRID_API_KEY as string;
+
+/**
+ * Simply send an email by address, subject, and body.
+ */
+const send = async ({
+  subject,
+  to,
+  from,
+  text,
+  html,
+}: {
+  subject: string;
+  to: string;
+  from: string;
+  text: string;
+  html?: string;
+}): Promise<boolean> => {
+  mail.setApiKey(sendgridAPIKey);
+
+  const msg = {
+    to,
+    from: {
+      email: from,
+      name: "Cal AI",
+    },
+    text,
+    html,
+    subject,
+  };
+
+  const res = await mail.send(msg);
+  const success = !!res;
+
+  return success;
+};
+
+export default send;
@@ -0,0 +1,13 @@
+import type { NextRequest } from "next/server";
+
+import { env } from "../env.mjs";
+
+/**
+ * Verifies that the request contains the correct parse key.
+ * env.PARSE_KEY must be configured as a query param in the sendgrid inbound parse settings.
+ */
+export const verifyParseKey = (url: NextRequest["url"]) => {
+  const verified = new URL(url).searchParams.get("parseKey") === env.PARSE_KEY;
+
+  return verified;
+};
@@ -0,0 +1,18 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
@@ -7,7 +7,7 @@
  <a href="https://cal.com/docs/enterprise-features/api#api-server-specifications">Read the API docs</a>
 </div>

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

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

@@ -1,6 +1,8 @@
 import * as Sentry from "@sentry/nextjs";
 import type { NextMiddleware } from "next-api-middleware";

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

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

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

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

 export { withMiddleware };
@@ -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";

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

@@ -76,11 +82,15 @@ 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(),
    bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
  })
  .strict();

@@ -94,6 +104,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
  position: true,
  userId: true,
  teamId: true,
+  scheduleId: true,
  eventName: true,
  timeZone: true,
  periodType: true,
@@ -119,6 +130,8 @@ export const schemaEventTypeReadPublic = EventType.pick({
  seatsPerTimeSlot: true,
  seatsShowAttendees: true,
  bookingFields: true,
+  bookingLimits: true,
+  durationLimits: true,
 }).merge(
  z.object({
    locations: z
@@ -13,16 +13,18 @@ const schemaMembershipRequiredParams = z.object({
  teamId: z.number(),
 });

-export const membershipCreateBodySchema = Membership.partial({
-  accepted: true,
-  role: true,
-  disableImpersonation: true,
-}).transform((v) => ({
-  accepted: false,
-  role: MembershipRole.MEMBER,
-  disableImpersonation: false,
-  ...v,
-}));
+export const membershipCreateBodySchema = Membership.omit({ id: true })
+  .partial({
+    accepted: true,
+    role: true,
+    disableImpersonation: true,
+  })
+  .transform((v) => ({
+    accepted: false,
+    role: MembershipRole.MEMBER,
+    disableImpersonation: false,
+    ...v,
+  }));

 export const membershipEditBodySchema = Membership.omit({
  /** To avoid complication, let's avoid updating these, instead you can delete and create a new invite */
@@ -0,0 +1,20 @@
+import { withValidation } from "next-validations";
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+// Extracted out as utility function so can be reused
+// at different endpoints that require this validation.
+export const schemaQueryUserEmail = baseApiParams.extend({
+  email: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleUserEmails = z.object({
+  email: z.union([z.string().email(), z.array(z.string().email())]),
+});
+
+export const withValidQueryUserEmail = withValidation({
+  schema: schemaQueryUserEmail,
+  type: "Zod",
+  mode: "query",
+});
@@ -29,7 +29,7 @@ enum locales {
  RO = "ro",
  NL = "nl",
  PT_BR = "pt-BR",
-  ES_419 = "es-419",
+  // ES_419 = "es-419", // Disabled until Crowdin reaches at least 80% completion
  KO = "ko",
  JA = "ja",
  PL = "pl",
@@ -40,6 +40,6 @@
    "typescript": "^4.9.4",
    "tzdata": "^1.0.30",
    "uuid": "^8.3.2",
-    "zod": "^3.20.2"
+    "zod": "^3.22.2"
  }
 }
@@ -2,7 +2,6 @@ import type { NextApiRequest } from "next";
 import { z } from "zod";

 import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { availabilityUserSelect } from "@calcom/prisma";
@@ -120,10 +119,8 @@ const availabilitySchema = z
 async function handler(req: NextApiRequest) {
  const { prisma, isAdmin, userId: reqUserId } = req;
  const { username, userId, eventTypeId, dateTo, dateFrom, teamId } = availabilitySchema.parse(req.query);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(req.headers.host ?? "");
  if (!teamId)
    return getUserAvailability({
-      orgSlug: isValidOrgDomain ? currentOrgDomain || undefined : undefined,
      username,
      dateFrom,
      dateTo,
@@ -57,7 +57,14 @@ import { defaultResponder } from "@calcom/lib/server";
 *                      format: email
 *                      description: 'Attendee email address'
 *                    location:
- *                      type: string
+ *                      type: object
+ *                      properties:
+ *                        optionValue:
+ *                          type: string
+ *                          description: 'Option value for the location'
+ *                        value:
+ *                          type: string
+ *                          description: 'The meeting URL, Phone number or Address'
 *                      description: 'Meeting location'
 *               metadata:
 *                 type: object
@@ -1,9 +1,11 @@
 import type { NextApiRequest } from "next";

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

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

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

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

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

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

 export default defaultResponder(getHandler);
@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import type { z } from "zod";

@@ -52,6 +52,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 *               slug:
 *                 type: string
 *                 description: Unique slug for the event type
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
 *               hosts:
 *                 type: array
 *                 items:
@@ -199,10 +202,17 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 export async function patchHandler(req: NextApiRequest) {
  const { prisma, query, body } = req;
  const { id } = schemaQueryIdParseInt.parse(query);
-  const { hosts = [], ...parsedBody } = schemaEventTypeEditBodyParams.parse(body);
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeEditBodyParams.parse(body);

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

  if (hosts) {
@@ -1,8 +1,8 @@
-import type { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";

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

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

 export default defaultResponder(getHandler);
@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";

 import { HttpError } from "@calcom/lib/http-error";
@@ -60,6 +60,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *               hidden:
 *                 type: boolean
 *                 description: If the event type should be hidden from your public booking page
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
 *               position:
 *                 type: integer
 *                 description: The position of the event type on the public booking page
@@ -178,6 +181,7 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 *                  position: 0
 *                  eventName: null
 *                  timeZone: null
+ *                  scheduleId: 5
 *                  periodType: UNLIMITED
 *                  periodStartDate: 2023-02-15T08:46:16.000Z
 *                  periodEndDate: 2023-0-15T08:46:16.000Z
@@ -255,12 +259,19 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 async function postHandler(req: NextApiRequest) {
  const { userId, isAdmin, prisma, body } = req;

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

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

  await checkPermissions(req);
@@ -59,7 +59,7 @@ async function getHandler(req: NextApiRequest) {
  };

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

 export default defaultResponder(getHandler);
@@ -4,6 +4,7 @@ import type { NextApiRequest } from "next";
 import { defaultResponder } from "@calcom/lib/server";

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

 /**
@@ -19,6 +20,17 @@ import { schemaUsersReadPublic } from "~/lib/validations/user";
 *         schema:
 *           type: string
 *         description: Your API key
+ *       - in: query
+ *         name: email
+ *         required: false
+ *         schema:
+ *          type: array
+ *          items:
+ *            type: string
+ *            format: email
+ *         style: form
+ *         explode: true
+ *         description: The email address or an array of email addresses to filter by
 *     tags:
 *     - users
 *     responses:
@@ -39,8 +51,16 @@ export async function getHandler(req: NextApiRequest) {
  const where: Prisma.UserWhereInput = {};
  // If user is not ADMIN, return only his data.
  if (!isAdmin) where.id = userId;
+
+  if (req.query.email) {
+    const validationResult = schemaQuerySingleOrMultipleUserEmails.parse(req.query);
+    where.email = {
+      in: Array.isArray(validationResult.email) ? validationResult.email : [validationResult.email],
+    };
+  }
+
  const [total, data] = await prisma.$transaction([
-    prisma.user.count(),
+    prisma.user.count({ where }),
    prisma.user.findMany({ where, take, skip }),
  ]);
  const users = schemaUsersReadPublic.parse(data);
@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"

 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
    restart: always
    container_name: integration-tests-prisma
    ports:
-      - '5433:5432'
+      - "5433:5432"
    environment:
      POSTGRES_USER: prisma
      POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
+      POSTGRES_DB: tests
@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";

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

 export default i18n;
@@ -15,6 +15,7 @@ module.exports = {
    "storybook-addon-rtl-direction",
    "storybook-react-i18next",
    "storybook-addon-next",
+    "storybook-addon-next-router",
    /*{
      name: "storybook-addon-next",
      options: {
@@ -1,9 +1,9 @@
 <script>
  window.global = window;
-  window.isEmbed = ()=> {
-    return location.search.includes("embed=")
-  }
+  window.isEmbed = () => {
+    return location.search.includes("embed=");
+  };
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
 </style>
@@ -1,4 +1,5 @@
 import { addDecorator } from "@storybook/react";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";

 import "../styles/globals.css";
@@ -13,6 +14,21 @@ export const parameters = {
      date: /Date$/,
    },
  },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };

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

 <Meta title="Introduction" />

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #263fa9;
+    --cal-bg-success: #306339;
+    --cal-bg-attention: #8e3b1f;
+    --cal-bg-error: #8c2822;
    --cal-bg-dark-error: #752522;

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

    /* Content/Text */
-    --cal-text-emphasis: #F3F4F6;
-    --cal-text: #D6D6D6;
+    --cal-text-emphasis: #f3f4f6;
+    --cal-text: #d6d6d6;
    --cal-text-subtle: #757575;
    --cal-text-muted: #575757;
    --cal-text-inverted: #101010;

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

    /* Brand shenanigans
      -> These will be computed for the users theme at runtime.
@@ -2,8 +2,8 @@ html,
 body {
  padding: 0;
  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
 }

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

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

 ### Patch Changes
@@ -1,15 +1,24 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";

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

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

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

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

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

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

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

  useEffect(() => {
    // bail early when i18n = {}
-    if (isEmpty(i18n)) return;
+    if (Object.keys(i18n).length === 0) return;
    // if locale is ready and the i18n.language does != locale - changeLanguage
    if (locale && i18n.language !== locale) {
      i18n.changeLanguage(locale);
@@ -35,7 +58,6 @@ const I18nLanguageHandler = (): null => {
    document.dir = i18n.dir();
    document.documentElement.setAttribute("lang", locale);
  }, [locale, i18n]);
-
  return null;
 };

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

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

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

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

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

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

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

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

  if (session.status === "loading") return <></>;
  return (
-    <Shell {...rest} actions={actions?.("block")} hideHeadingOnMobile>
+    <ShellMain {...rest} actions={actions?.("block")} hideHeadingOnMobile>
      <div className="flex flex-col xl:flex-row">
        <main className="w-full">
          {emptyStore ? (
@@ -38,7 +38,6 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
          )}
        </main>
      </div>
-    </Shell>
+    </ShellMain>
  );
 }
-export const getLayout = (page: React.ReactElement) => <AppsLayout>{page}</AppsLayout>;
@@ -0,0 +1,29 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, TextField } from "@calcom/ui";
+
+export default function TwoFactor({ center = true }) {
+  const { t } = useLocale();
+  const methods = useFormContext();
+
+  return (
+    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+      <Label className="mt-4">{t("backup_code")}</Label>
+
+      <p className="text-subtle mb-4 text-sm">{t("backup_code_instructions")}</p>
+
+      <TextField
+        id="backup-code"
+        label=""
+        defaultValue=""
+        placeholder="XXXXX-XXXXX"
+        minLength={10} // without dash
+        maxLength={11} // with dash
+        required
+        {...methods.register("backupCode")}
+      />
+    </div>
+  );
+}
@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, Input } from "@calcom/ui";

-export default function TwoFactor({ center = true }) {
+export default function TwoFactor({ center = true, autoFocus = true }) {
  const [value, onChange] = useState("");
  const { t } = useLocale();
  const methods = useFormContext();
@@ -40,7 +40,7 @@ export default function TwoFactor({ center = true }) {
            name={`2fa${index + 1}`}
            inputMode="decimal"
            {...digit}
-            autoFocus={index === 0}
+            autoFocus={autoFocus && index === 0}
            autoComplete="one-time-code"
          />
        ))}
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
+import { usePathname, useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import React, { useEffect } from "react";

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

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

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

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