v3.1.8

* Fixing profile banner delay for orgs

* Separating into other useEffect

.env.example

@@ -59,6 +59,11 @@ SAML_CLIENT_SECRET_VERIFIER=
 # PGSSLMODE='no-verify'
 PGSSLMODE=
 
+# Define which hostnames are expected for the app to work on
+ALLOWED_HOSTNAMES='"cal.com","cal.dev","cal-staging.com","cal.community","cal.local:3000","localhost:3000"'
+#  Reserved orgs subdomains for our own usage
+RESERVED_SUBDOMAINS='"app","auth","docs","design","console","go","status","api","saml","www","matrix","developer","cal","my","team","support","security","blog","learn","admin"'
+
 #   - NEXTAUTH
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
@@ -76,6 +81,10 @@ CALCOM_TELEMETRY_DISABLED=
 # ApiKey for cronjobs
 CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
 
+# Whether to automatically keep app metadata in the database in sync with the metadata/config files. When disabled, the
+# sync runs in a reporting-only dry-run mode.
+CRON_ENABLE_APP_SYNC=false
+
 # Application Key for symmetric encryption and decryption
 # must be 32 bytes for AES256 encryption algorithm
 # You can use: `openssl rand -base64 24` to generate one
@@ -112,6 +121,7 @@ TWILIO_SID=
 TWILIO_TOKEN=
 TWILIO_MESSAGING_SID=
 TWILIO_PHONE_NUMBER=
+TWILIO_WHATSAPP_PHONE_NUMBER=
 # For NEXT_PUBLIC_SENDER_ID only letters, numbers and spaces are allowed (max. 11 characters)
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=
@@ -126,6 +136,7 @@ NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
 NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 STRIPE_TEAM_MONTHLY_PRICE_ID=
+STRIPE_ORG_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
 STRIPE_PRIVATE_KEY=
 STRIPE_CLIENT_ID=
@@ -172,7 +183,6 @@ CLOSECOM_API_KEY=
 # Sendgrid internal sync service
 SENDGRID_SYNC_API_KEY=
 
-
 # Change your Brand
 NEXT_PUBLIC_APP_NAME="Cal.com"
 NEXT_PUBLIC_SUPPORT_MAIL_ADDRESS="help@cal.com"
@@ -205,9 +215,3 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
-
-#Enables New booker for Embed only
-NEW_BOOKER_ENABLED_FOR_EMBED=0
-
-#Enables New booker for All but Embed requests
-NEW_BOOKER_ENABLED_FOR_NON_EMBED=0

.github/ISSUE_TEMPLATE/bug_report.md

@@ -20,8 +20,20 @@ A summary of the issue. This needs to be a clear detailed-rich summary.
 
 Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?
 
+### Actual Results
+
+- What's happening right now that is different from what is expected
+
+### Expected Results
+
+- This is an ideal result that the system should get after the tests are performed
+
 ### Technical details
 
 - Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
 - Node.js version
 - Anything else that you think could be an issue.
+
+### Evidence
+
+- How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,5 @@
 blank_issues_enabled: false
 contact_links:
   - name: Questions
-    url: https://cal.com/slack
-    about: Ask a general question about the project on our Slack workspace
+    url: https://go.cal.com/discord
+    about: Ask a general question about the project on our discord community

.github/ISSUE_TEMPLATE/feature_request.md

@@ -39,3 +39,11 @@ assignees: ""
 -->
 
 (Write your answer here.)
+
+### Requirement/Document
+
+<!--
+  Is there any type of document that could support that feature?
+-->
+
+(Share it here.)

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,29 +8,40 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
+## Requirement/Documentation
+
+<!-- Please provide all documents that are important to understand the reason of that PR. -->
+
+- If there is a requirement document, please, share it here.
+- If there is ab UI/UX design document, please, share it here.
+
 ## Type of change
 
 <!-- Please delete bullets that are not relevant. -->
 
-- Bug fix (non-breaking change which fixes an issue)
-- Chore (refactoring code, technical debt, workflow improvements)
-- New feature (non-breaking change which adds functionality)
-- Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- This change requires a documentation update
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
 
 ## How should this be tested?
 
-<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration -->
+<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->
 
-- [ ] Test A
-- [ ] Test B
+- Are there environment variables that should be set?
+- What are the minimal test data to have?
+- What is expected (happy path) to have (input and output)?
+- Any other important info that could help to test that PR
 
 ## Mandatory Tasks
+
 - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
 
 ## Checklist
 
 <!-- Please remove all the irrelevant bullets to your PR -->
+
 - I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
 - My code doesn't follow the style guidelines of this project
 - I haven't commented my code, particularly in hard-to-understand areas

.github/actions/env-read-file/action.yml

@@ -1,16 +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') }}
-        restore-keys: env-cache-
-    - name: Set Environment Variables
-      uses: tw3lveparsecs/github-actions-setvars@latest
-      with:
-        envFilePath: gh.env

.github/workflows/cron-scheduleWhatsappReminders.yml

@@ -0,0 +1,23 @@
+name: Cron - scheduleWhatsappReminders
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
+    - cron: "0,15,30,45 * * * *"
+jobs:
+  cron-scheduleWhatsappReminders:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleWhatsappReminders \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/cron-stale-issue.yml

@@ -10,6 +10,7 @@ on:
   schedule:
     # Runs every day (see https://crontab.guru)
     - cron: "0 0 * * *"
+  workflow_dispatch:
 jobs:
   stale:
     runs-on: ubuntu-latest
@@ -22,3 +23,4 @@ jobs:
           days-before-pr-close: 7
           stale-pr-message: "This PR is being marked as stale due to inactivity."
           close-pr-message: "This PR is being closed due to inactivity. Please reopen if work is intended to be continued."
+          operations-per-run: 100

.github/workflows/cron-syncAppMeta.yml

@@ -0,0 +1,24 @@
+name: Cron - syncAppMeta
+
+on:
+  workflow_dispatch:
+  # "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)
+    - cron: "0 0 1 * *"
+jobs:
+  cron-syncAppMeta:
+    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/syncAppMeta \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/crowdin.yml

@@ -22,6 +22,7 @@ jobs:
         uses: crowdin/github-action@1.5.1
         with:
           upload_sources: true
+          upload_translations: true
           download_translations: true
           push_translations: true
           commit_message: "New Crowdin translations by Github Action"

.github/workflows/e2e-app-store.yml

@@ -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,37 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e:app-store
+        run: yarn e2e:app-store --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: app-store-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e-embed-react.yml

@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed React tests and booking flow(for non-embed as well)
 on:
   workflow_call:
 
 jobs:
   e2e-embed:
     timeout-minutes: 20
+    name: E2E Embed React (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
@@ -14,6 +15,11 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for embed-react. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]
 
     steps:
       - uses: actions/checkout@v3
@@ -21,18 +27,39 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: |
-          yarn test-e2e:embed-react
+          yarn e2e:embed-react --shard=${{ matrix.shard }}/${{ strategy.job-total }}
           yarn workspace @calcom/embed-react packaged:tests
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: embed-react-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e-embed.yml

@@ -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,37 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e:embed
+        run: yarn e2e:embed --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: embed-core-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e.yml

@@ -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,38 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn e2e --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          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

.github/workflows/env-create-file.yml

@@ -1,50 +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_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_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') }}

.github/workflows/pr-assign-team-label.yml

@@ -0,0 +1,16 @@
+name: Assign PR team labels
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  team-labels:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: equitybee/team-label-action@main
+        with:
+          repo-token: ${{ secrets.GH_ACCESS_TOKEN }}
+          organization-name: calcom
+          ignore-labels: "app-store, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"

.github/workflows/pr.yml

@@ -34,17 +34,15 @@ jobs:
             app-store:
               - 'apps/web/**'
               - 'packages/app-store/**'
+              - 'playwright.config.ts'
             embed:
               - 'apps/web/**'
               - 'packages/embeds/**'
+              - 'playwright.config.ts'
             embed-react:
               - 'apps/web/**'
               - 'packages/embeds/**'
-
-  env:
-    name: Create env file
-    uses: ./.github/workflows/env-create-file.yml
-    secrets: inherit
+              - 'playwright.config.ts'
 
   type-check:
     name: Type check
@@ -63,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
 
@@ -81,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
@@ -106,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:

.github/workflows/production-build-without-database.yml

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

.github/workflows/production-build.yml

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

.github/workflows/release-docker.yaml

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

.github/workflows/semantic-pull-requests.yml

@@ -9,7 +9,7 @@ on:
       - synchronize
 
 permissions:
-  pull-requests: read
+  pull-requests: write
 
 jobs:
   validate-pr:
@@ -17,5 +17,31 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: amannn/action-semantic-pull-request@v5
+        id: lint_pr_title
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: marocchino/sticky-pull-request-comment@v2
+        # When the previous steps fails, the workflow would stop. By adding this
+        # condition you can continue the execution with the populated error message.
+        if: always() && (steps.lint_pr_title.outputs.error_message != null)
+        with:
+          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 }}
+            ```
+
+      # 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:   
+          header: pr-title-lint-error
+          message: |
+            Thank you for following the naming conventions! 🙏 

.github/workflows/welcome-new-contributors.yml

@@ -0,0 +1,27 @@
+name: "Welcome new contributors"
+
+on:
+  issues:
+    types: opened
+  pull_request:
+    types: opened
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  welcome-message:
+    name: Welcoming New Users
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: github.event.action == 'opened'
+    steps:
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |-
+            Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
+            Feel free to join the conversation at [discord](https://go.cal.com/discord)
+          issue-message: |
+            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

.vscode/extensions.json

@@ -8,6 +8,7 @@
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe", // stripe VSCode extension
     "Prisma.prisma", // syntax|format|completion for prisma
-    "rebornix.project-snippets" // Share useful snippets between collaborators
+    "rebornix.project-snippets", // Share useful snippets between collaborators
+    "inlang.vs-code-extension" // improved i18n DX
   ]
 }

CONTRIBUTING.md

@@ -88,6 +88,7 @@ To develop locally:
 
 5. Set up your `.env` file:
 
+   - Duplicate `.env.example` to `.env`.
    - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
    - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
 

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2020-present Cal.com, Inc.
 
 Portions of this software are licensed as follows:
 
-* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee directory of this repository (Commercial License) is licensed under the license defined in "ee/LICENSE".
+* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee and https://github.com/calcom/cal.com/tree/main/apps/api/ directory of this repository (Commercial License) is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the Cal.com Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

SECURITY.md

@@ -1,39 +1,57 @@
 # Security
 
-Contact: security@cal.com
+Contact: [security@cal.com](mailto:security@cal.com)
 
 Based on [https://supabase.com/.well-known/security.txt](https://supabase.com/.well-known/security.txt)
 
-At Cal.com, we consider the security of our systems a top priority. But no matter how much effort we put into system security, there can still be vulnerabilities present.
+At Cal.com, we consider the security of our systems a top priority. But no
+matter how much effort we put into system security, there can still be
+vulnerabilities present.
 
-If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible. We would like to ask you to help us better protect our clients and our systems.
+If you discover a vulnerability, we would like to know about it so we can take
+steps to address it as quickly as possible. We would like to ask you to help us
+better protect our clients and our systems.
 
-## Out of scope vulnerabilities:
+## Out of scope vulnerabilities
 
 - Clickjacking on pages with no sensitive actions.
 - Unauthenticated/logout/login CSRF.
 - Attacks requiring MITM or physical access to a user's device.
 - Any activity that could lead to the disruption of our service (DoS).
-- Content spoofing and text injection issues without showing an attack vector/without being able to modify HTML/CSS.
+- Content spoofing and text injection issues without showing an attack
+  vector/without being able to modify HTML/CSS.
 - Email spoofing
 - Missing DNSSEC, CAA, CSP headers
 - Lack of Secure or HTTP only flag on non-sensitive cookies
 - Deadlinks
 
-## Please do the following:
+## Please do the following
 
 - E-mail your findings to [security@cal.com](mailto:security@cal.com).
-- Do not run automated scanners on our infrastructure or dashboard. If you wish to do this, contact us and we will set up a sandbox for you.
-- Do not take advantage of the vulnerability or problem you have discovered, for example by downloading more data than necessary to demonstrate the vulnerability or deleting or modifying other people's data,
+- Do not run automated scanners on our infrastructure or dashboard. If you wish
+  to do this, contact us and we will set up a sandbox for you.
+- Do not take advantage of the vulnerability or problem you have discovered,
+  for example by downloading more data than necessary to demonstrate the
+  vulnerability or deleting or modifying other people's data,
 - Do not reveal the problem to others until it has been resolved,
-- Do not use attacks on physical security, social engineering, distributed denial of service, spam or applications of third parties,
-- Do provide sufficient information to reproduce the problem, so we will be able to resolve it as quickly as possible. Usually, the IP address or the URL of the affected system and a description of the vulnerability will be sufficient, but complex vulnerabilities may require further explanation.
+- Do not use attacks on physical security, social engineering, distributed
+  denial of service, spam or applications of third parties,
+- Do provide sufficient information to reproduce the problem, so we will be
+  able to resolve it as quickly as possible. Usually, the IP address or the URL
+  of the affected system and a description of the vulnerability will be
+  sufficient, but complex vulnerabilities may require further explanation.
 
-## What we promise:
+## What we promise
 
-- We will respond to your report within 3 business days with our evaluation of the report and an expected resolution date,
-- If you have followed the instructions above, we will not take any legal action against you in regard to the report,
-- We will handle your report with strict confidentiality, and not pass on your personal details to third parties without your permission,
+- We will respond to your report within 3 business days with our evaluation of
+  the report and an expected resolution date,
+- If you have followed the instructions above, we will not take any legal
+  action against you in regard to the report,
+- We will handle your report with strict confidentiality, and not pass on your
+  personal details to third parties without your permission,
 - We will keep you informed of the progress towards resolving the problem,
-- In the public information concerning the problem reported, we will give your name as the discoverer of the problem (unless you desire otherwise), and
-- We strive to resolve all problems as quickly as possible, and we would like to play an active role in the ultimate publication on the problem after it is resolved.
+- In the public information concerning the problem reported, we will give your
+  name as the discoverer of the problem (unless you desire otherwise), and
+- We strive to resolve all problems as quickly as possible, and we would like
+  to play an active role in the ultimate publication on the problem after it
+  is resolved.

app.json

@@ -37,6 +37,10 @@
       "description": "ApiKey for cronjobs",
       "value": ""
     },
+    "CRON_ENABLE_APP_SYNC": {
+      "description": "Whether to automatically keep app metadata in the database in sync with the metadata/config files. When disabled, the sync runs in a reporting-only dry-run mode.",
+      "value": "false"
+    },
     "SEND_FEEDBACK_EMAIL": {
       "description": "Send feedback email",
       "value": ""

apps/api/LICENSE

@@ -0,0 +1,42 @@
+The Cal.com Commercial License (the “Commercial License”)
+Copyright (c) 2020-present Cal.com, Inc
+
+With regard to the Cal.com Software:
+
+This software and associated documentation files (the "Software") may only be
+used in production, if you (and any entity that you represent) have agreed to,
+and are in compliance with, the Cal.com Subscription Terms available
+at https://cal.com/terms, or other agreements governing
+the use of the Software, as mutually agreed by you and Cal.com, Inc ("Cal.com"),
+and otherwise have a valid Cal.com Enterprise Edition subscription ("Commercial Subscription")
+for the correct number of hosts as defined in the "Commercial Terms ("Hosts"). Subject to the foregoing sentence,
+you are free to modify this Software and publish patches to the Software. You agree
+that Cal.com and/or its licensors (as applicable) retain all right, title and interest in
+and to all such modifications and/or patches, and all such modifications and/or
+patches may only be used, copied, modified, displayed, distributed, or otherwise
+exploited with a valid Commercial Subscription for the correct number of hosts.
+Notwithstanding the foregoing, you may copy and modify the Software for development
+and testing purposes, without requiring a subscription. You agree that Cal.com and/or
+its licensors (as applicable) retain all right, title and interest in and to all such
+modifications. You are not granted any other rights beyond what is expressly stated herein.
+Subject to the foregoing, it is forbidden to copy, merge, publish, distribute, sublicense,
+and/or sell the Software.
+
+This Commercial License applies only to the part of this Software that is not distributed under
+the AGPLv3 license. Any part of this Software distributed under the MIT license or which
+is served client-side as an image, font, cascading stylesheet (CSS), file which produces
+or is compiled, arranged, augmented, or combined into client-side JavaScript, in whole or
+in part, is copyrighted under the AGPLv3 license. The full text of this Commercial License shall
+be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+For all third party components incorporated into the Cal.com Software, those
+components are licensed under the original license provided by the owner of the
+applicable component.

apps/api/README.md

@@ -7,7 +7,7 @@
   <a href="https://cal.com/docs/enterprise-features/api#api-server-specifications">Read the API docs</a>
 </div>
 
-# Cal.com Public API 
+# Commercial Cal.com Public API
 
 Welcome to the Public API ("/apps/api") of the Cal.com.
 

apps/api/lib/helpers/captureErrors.ts

@@ -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 });
   }
 };

apps/api/lib/helpers/verifyApiKey.ts

@@ -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)
+  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) {

apps/api/lib/helpers/withMiddleware.ts

@@ -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 };

apps/api/lib/validations/event-type.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 
+import slugify from "@calcom/lib/slugify";
 import { _EventTypeModel as EventType, _HostModel } from "@calcom/prisma/zod";
 import { customInputSchema, eventTypeBookingFields } from "@calcom/prisma/zod-utils";
 
@@ -58,7 +59,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
 const schemaEventTypeCreateParams = z
   .object({
     title: z.string(),
-    slug: z.string(),
+    slug: z.string().transform((s) => slugify(s)),
     description: z.string().optional().nullable(),
     length: z.number().int(),
     metadata: z.any().optional(),
@@ -76,7 +77,10 @@ export const schemaEventTypeCreateBodyParams = schemaEventTypeBaseBodyParams
 const schemaEventTypeEditParams = z
   .object({
     title: z.string().optional(),
-    slug: z.string().optional(),
+    slug: z
+      .string()
+      .transform((s) => slugify(s))
+      .optional(),
     length: z.number().int().optional(),
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),

apps/api/package.json

@@ -32,9 +32,9 @@
     "@sentry/nextjs": "^7.20.0",
     "bcryptjs": "^2.4.3",
     "memory-cache": "^0.2.0",
-    "next": "~13.2.1",
+    "next": "^13.4.6",
     "next-api-middleware": "^1.0.1",
-    "next-axiom": "^0.16.0",
+    "next-axiom": "^0.17.0",
     "next-swagger-doc": "^0.3.6",
     "next-validations": "^0.2.0",
     "typescript": "^4.9.4",

apps/api/pages/api/availability/_get.ts

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

apps/api/pages/api/bookings/[id]/_patch.ts

@@ -35,6 +35,9 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *               status:
  *                 type: string
  *                 description: 'Acceptable values one of ["ACCEPTED", "PENDING", "CANCELLED", "REJECTED"]'
+ *               description:
+ *                 type: string
+ *                 description: 'Description of the meeting'
  *           examples:
  *             editBooking:
  *               value:
@@ -79,7 +82,15 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *                       "startTime": "2023-05-24T13:00:00.000Z",
  *                       "endTime": "2023-05-24T13:30:00.000Z",
  *                       "metadata": {},
- *                       "status": "CANCELLED"
+ *                       "status": "CANCELLED",
+ *                       "responses": {
+ *                         "email": "john.doe@example.com",
+ *                         "name": "John Doe",
+ *                         "location": {
+ *                           "optionValue": "",
+ *                           "value": "inPerson"
+ *                         }
+ *                       }
  *                     }
  *                   }
  *       400:

apps/api/pages/api/bookings/_post.ts

@@ -26,13 +26,10 @@ import { defaultResponder } from "@calcom/lib/server";
  *             required:
  *               - eventTypeId
  *               - start
- *               - name
- *               - email
+ *               - responses
  *               - timeZone
  *               - language
  *               - metadata
- *               - customInputs
- *               - location
  *             properties:
  *               eventTypeId:
  *                 type: integer
@@ -45,29 +42,40 @@ import { defaultResponder } from "@calcom/lib/server";
  *                 type: string
  *                 format: date-time
  *                 description: 'End time of the Event'
- *               name:
- *                 type: string
- *                 description: 'Name of the Attendee'
- *               email:
- *                 type: string
- *                 format: email
- *                 description: 'Email ID of the Attendee'
+ *               responses:
+ *                 type: object
+ *                 required:
+ *                    - name
+ *                    - email
+ *                    - location
+ *                 properties:
+ *                    name:
+ *                      type: string
+ *                      description: 'Attendee full name'
+ *                    email:
+ *                      type: string
+ *                      format: email
+ *                      description: 'Attendee email address'
+ *                    location:
+ *                      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
+ *                 properties: {}
+ *                 description: 'Any metadata associated with the booking'
  *               timeZone:
  *                 type: string
  *                 description: 'TimeZone of the Attendee'
  *               language:
  *                 type: string
  *                 description: 'Language of the Attendee'
- *               metadata:
- *                 type: object
- *                 properties: {}
- *                 description: 'Any metadata associated with the booking'
- *               customInputs:
- *                 type: array
- *                 items: {}
- *               location:
- *                 type: string
- *                 description: 'Meeting location'
  *               title:
  *                 type: string
  *                 description: 'Booking event title'
@@ -96,13 +104,14 @@ import { defaultResponder } from "@calcom/lib/server";
  *                   "eventTypeId": 2323232,
  *                   "start": "2023-05-24T13:00:00.000Z",
  *                   "end": "2023-05-24T13:30:00.000Z",
- *                   "name": "Hello Hello",
- *                   "email": "hello@gmail.com",
+ *                   "responses":{
+ *                     "name": "Hello Hello",
+ *                     "email": "hello@gmail.com",
+ *                     "metadata": {},
+ *                     "location": "Calcom HQ",
+ *                   },
  *                   "timeZone": "Europe/London",
  *                   "language": "en",
- *                   "metadata": {},
- *                   "customInputs": [],
- *                   "location": "Calcom HQ",
  *                   "title": "Debugging between Syed Ali Shahbaz and Hello Hello",
  *                   "description": null,
  *                   "status": "PENDING",
@@ -117,53 +126,50 @@ import { defaultResponder } from "@calcom/lib/server";
  *         content:
  *           application/json:
  *             examples:
- *               bookings:
+ *               booking created successfully example:
  *                 value:
  *                   {
- *                     "id": 11223344,
- *                     "uid": "5yUjmAYTDF6MXo98re8SkX",
- *                     "userId": 123,
- *                     "eventTypeId": 2323232,
- *                     "title": "Debugging between Syed Ali Shahbaz and Hello Hello",
- *                     "description": null,
- *                     "customInputs": {},
- *                     "responses": null,
- *                     "startTime": "2023-05-24T13:00:00.000Z",
- *                     "endTime": "2023-05-24T13:30:00.000Z",
- *                     "location": "Calcom HQ",
- *                     "createdAt": "2023-04-19T10:17:58.580Z",
- *                     "updatedAt": null,
- *                     "status": "PENDING",
- *                     "paid": false,
- *                     "destinationCalendarId": 2180,
- *                     "cancellationReason": null,
- *                     "rejectionReason": null,
- *                     "dynamicEventSlugRef": null,
- *                     "dynamicGroupSlugRef": null,
- *                     "rescheduled": null,
- *                     "fromReschedule": null,
- *                     "recurringEventId": null,
- *                     "smsReminderNumber": null,
- *                     "scheduledJobs": [],
- *                     "metadata": {},
- *                     "isRecorded": false,
- *                     "user": {
- *                       "email": "test@cal.com",
- *                       "name": "Syed Ali Shahbaz",
- *                       "timeZone": "Asia/Calcutta"
- *                     },
- *                     "attendees": [
- *                       {
- *                         "id": 12345,
- *                         "email": "hello@gmail.com",
- *                         "name": "Hello Hello",
- *                         "timeZone": "Europe/London",
- *                         "locale": "en",
- *                         "bookingId": 11223344
+ *                     "booking": {
+ *                       "id": 91,
+ *                       "userId": 5,
+ *                       "description": "",
+ *                       "eventTypeId": 7,
+ *                       "uid": "bFJeNb2uX8ANpT3JL5EfXw",
+ *                       "title": "60min between Pro Example and John Doe",
+ *                       "startTime": "2023-05-25T09:30:00.000Z",
+ *                       "endTime": "2023-05-25T10:30:00.000Z",
+ *                       "attendees": [
+ *                         {
+ *                           "email": "john.doe@example.com",
+ *                           "name": "John Doe",
+ *                           "timeZone": "Asia/Kolkata",
+ *                           "locale": "en"
+ *                         }
+ *                       ],
+ *                       "user": {
+ *                         "email": "pro@example.com",
+ *                         "name": "Pro Example",
+ *                         "timeZone": "Asia/Kolkata",
+ *                         "locale": "en"
+ *                       },
+ *                       "payment": [
+ *                         {
+ *                           "id": 1,
+ *                           "success": true,
+ *                           "paymentOption": "ON_BOOKING"
+ *                         }
+ *                       ],
+ *                       "metadata": {},
+ *                       "status": "ACCEPTED",
+ *                       "responses": {
+ *                         "email": "john.doe@example.com",
+ *                         "name": "John Doe",
+ *                         "location": {
+ *                           "optionValue": "",
+ *                           "value": "inPerson"
+ *                         }
  *                       }
- *                     ],
- *                     "payment": [],
- *                     "references": []
+ *                     }
  *                   }
  *       400:
  *         description: |

apps/api/pages/api/event-types/_get.ts

@@ -56,6 +56,7 @@ async function getHandler(req: NextApiRequest) {
       owner: { select: { username: true, id: true } },
     },
   });
+  if (data.length === 0) new HttpError({ statusCode: 404, message: "No event types were found" });
   return {
     event_types: data.map((eventType) => {
       const link = getCalLink(eventType);

apps/api/pages/api/event-types/_post.ts

@@ -47,7 +47,6 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *               slug:
  *                 type: string
  *                 description: Unique slug for the event type
- *                 example: my-event
  *               hosts:
  *                 type: array
  *                 items:
@@ -168,9 +167,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *                             type: string
  *                           displayLocationPublicly:
  *                             type: boolean
- *           example:
+ *           examples:
  *              event-type:
- *                summary: An example of event type POST request
+ *                summary: An example of an individual event type POST request
  *                value:
  *                  title: Hello World
  *                  slug: hello-world
@@ -205,6 +204,42 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *                      }
  *                    }
  *                  }
+ *              team-event-type:
+ *                summary: An example of a team event type POST request
+ *                value:
+ *                  title: "Tennis class"
+ *                  slug: "tennis-class-{{$guid}}"
+ *                  length: 60
+ *                  hidden: false
+ *                  position: 0
+ *                  teamId: 3
+ *                  eventName: null
+ *                  timeZone: null
+ *                  periodType: "UNLIMITED"
+ *                  periodStartDate: null
+ *                  periodEndDate: null
+ *                  periodDays: null
+ *                  periodCountCalendarDays: null
+ *                  requiresConfirmation: true
+ *                  recurringEvent:
+ *                    interval: 2
+ *                    count: 10
+ *                    freq: 2
+ *                  disableGuests: false
+ *                  hideCalendarNotes: false
+ *                  minimumBookingNotice: 120
+ *                  beforeEventBuffer: 0
+ *                  afterEventBuffer: 0
+ *                  schedulingType: "COLLECTIVE"
+ *                  price: 0
+ *                  currency: "usd"
+ *                  slotInterval: null
+ *                  successRedirectUrl: null
+ *                  description: null
+ *                  locations:
+ *                    - address: "London"
+ *                      type: "inPerson"
+ *                  metadata: {}
  *     tags:
  *     - event-types
  *     externalDocs:

apps/api/pages/api/event-types/_utils/getCalLink.ts

@@ -2,7 +2,7 @@ import { CAL_URL } from "@calcom/lib/constants";
 
 export default function getCalLink(eventType: {
   team?: { slug: string | null } | null;
-  owner: { username: string | null } | null;
+  owner?: { username: string | null } | null;
   users?: { username: string | null }[];
   slug: string;
 }) {

apps/api/pages/api/teams/[teamId]/publish.ts

@@ -2,29 +2,36 @@ import type { NextApiRequest, NextApiResponse } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
-import { MembershipRole } from "@calcom/prisma/enums";
+import { MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { createContext } from "@calcom/trpc/server/createContext";
-import { publishHandler } from "@calcom/trpc/server/routers/viewer/teams/publish.handler";
+import { viewerTeamsRouter } from "@calcom/trpc/server/routers/viewer/teams/_router";
 
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import { schemaQueryTeamId } from "~/lib/validations/shared/queryTeamId";
 
 import authMiddleware, { checkPermissions } from "./_auth-middleware";
 
 const patchHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   await checkPermissions(req, { in: [MembershipRole.OWNER, MembershipRole.ADMIN] });
-  /** @see https://trpc.io/docs/server-side-calls */
-  const ctx = await createContext({ req, res });
-  const user = ctx.user;
-  if (!user) {
-    throw new Error("Internal Error.");
+  async function sessionGetter() {
+    return {
+      user: {
+        id: req.userId,
+        username: "" /* Not used in this context */,
+        role: req.isAdmin ? UserPermissionRole.ADMIN : UserPermissionRole.USER,
+      },
+      hasValidLicense: true /* To comply with TS signature */,
+      expires: "" /* Not used in this context */,
+    };
   }
+  /** @see https://trpc.io/docs/server-side-calls */
+  const ctx = await createContext({ req, res }, sessionGetter);
   try {
-    const { teamId } = schemaQueryTeamId.parse(req.query);
-    return await publishHandler({ input: { teamId }, ctx: { ...ctx, user } });
+    const caller = viewerTeamsRouter.createCaller(ctx);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return await caller.publish(req.query as any /* Let tRPC handle this */);
   } catch (cause) {
     if (cause instanceof TRPCError) {
       const statusCode = getHTTPStatusCodeFromError(cause);

apps/api/pages/api/users/_get.ts

@@ -40,7 +40,7 @@ export async function getHandler(req: NextApiRequest) {
   // If user is not ADMIN, return only his data.
   if (!isAdmin) where.id = userId;
   const [total, data] = await prisma.$transaction([
-    prisma.user.count(),
+    prisma.user.count({ where }),
     prisma.user.findMany({ where, take, skip }),
   ]);
   const users = schemaUsersReadPublic.parse(data);

apps/storybook/components/VariantsTable.tsx

@@ -26,15 +26,15 @@ export function VariantsTable({
         <table>
           <RowTitles titles={titles} />
           {columns.map((column) => (
-            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+            <tr className="p-2 pb-6 pr-6" key={column.props.variant}>
               <th
-                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]"
                 key={column.props.variant}>
                 {column.props.variant}
               </th>
               {React.Children.count(column.props.children) &&
                 React.Children.map(column.props.children, (cell) => (
-                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                  <td className="p-2 pb-6 pr-6" style={{ minWidth: `${columnMinWidth}px` }}>
                     {cell}
                   </td>
                 ))}
@@ -70,9 +70,9 @@ export function VariantRow({ children }: RowProps) {
 export function RowTitles({ titles }: { titles: string[] }) {
   return (
     <tr>
-      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      <th className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]" />
       {titles.map((title) => (
-        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+        <th className="p-2 pb-6 pr-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
           {title}
         </th>
       ))}

apps/storybook/intro.stories.mdx

@@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs';
 
 <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>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>
 

apps/storybook/package.json

@@ -12,15 +12,15 @@
     "@calcom/ui": "*",
     "@radix-ui/react-avatar": "^1.0.0",
     "@radix-ui/react-collapsible": "^1.0.0",
-    "@radix-ui/react-dialog": "^1.0.0",
-    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-id": "^1.0.0",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^13.2.1",
+    "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-addon-rtl-direction": "^0.0.19"
@@ -37,8 +37,8 @@
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^2.2.0",
     "autoprefixer": "^10.4.12",
     "babel-loader": "^8.2.5",
     "fs": "^0.0.1-security",
@@ -48,7 +48,7 @@
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-next": "^1.6.9",
     "storybook-react-i18next": "^1.1.2",
-    "tailwindcss": "^3.2.1",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   }

apps/storybook/styles/storybook-styles.css

@@ -209,6 +209,7 @@
     --cal-bg-success: #E2FBE8;
     --cal-bg-attention: #FCEED8;
     --cal-bg-error: #F9E3E2;
+    --cal-bg-dark-error: #752522;
 
 
     /* Borders */
@@ -216,6 +217,7 @@
     --cal-border: #D1D5DB;
     --cal-border-subtle:#E5E7EB;
     --cal-border-muted:#F3F4F6;
+    --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #111827;
@@ -251,6 +253,7 @@
     --cal-bg-success: #E2FBE8;
     --cal-bg-attention: #FCEED8;
     --cal-bg-error: #F9E3E2;
+    --cal-bg-dark-error: #752522;
 
 
     /* Borders */
@@ -258,6 +261,7 @@
     --cal-border: #444444;
     --cal-border-subtle: #2B2B2B;
     --cal-border-muted: #1C1C1C;
+    --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #F3F4F6;

apps/swagger/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "^13.2.1",
+    "next": "^13.4.6",
     "openapi-snippet": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -23,7 +23,7 @@
   "devDependencies": {
     "@types/node": "16.9.1",
     "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
+    "@types/react-dom": "^18.0.9",
     "typescript": "^4.9.4"
   }
 }

apps/web/CHANGELOG.md

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

apps/web/components/AppListCard.tsx

@@ -1,14 +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 } from "@calcom/ui";
+import { Badge, ListItemText, Avatar } from "@calcom/ui";
 import { AlertCircle } from "@calcom/ui/components/icon";
 
-type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
+type ShouldHighlight =
+  | {
+      slug: string;
+      shouldHighlight: true;
+    }
+  | {
+      shouldHighlight?: never;
+      slug?: never;
+    };
 
 type AppListCardProps = {
   logo?: string;
@@ -19,6 +29,7 @@ type AppListCardProps = {
   isTemplate?: boolean;
   invalidCredential?: boolean;
   children?: ReactNode;
+  credentialOwner?: CredentialOwner;
 } & ShouldHighlight;
 
 const schema = z.object({ hl: z.string().optional() });
@@ -36,6 +47,7 @@ export default function AppListCard(props: AppListCardProps) {
     isTemplate,
     invalidCredential,
     children,
+    credentialOwner,
   } = props;
   const {
     data: { hl },
@@ -43,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;
     }
@@ -65,7 +79,7 @@ export default function AppListCard(props: AppListCardProps) {
 
   return (
     <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
-      <div className="flex gap-x-3 px-5 py-4">
+      <div className="flex items-center gap-x-3 px-5 py-4">
         {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
@@ -85,6 +99,21 @@ export default function AppListCard(props: AppListCardProps) {
             </div>
           )}
         </div>
+        {credentialOwner && (
+          <div>
+            <Badge variant="gray">
+              <div className="flex items-center">
+                <Avatar
+                  className="mr-2"
+                  alt={credentialOwner.name || "Nameless"}
+                  size="xs"
+                  imageSrc={getPlaceholderAvatar(credentialOwner.avatar, credentialOwner?.name as string)}
+                />
+                {credentialOwner.name}
+              </div>
+            </Badge>
+          </div>
+        )}
 
         {actions}
       </div>

apps/web/components/AppsShell.tsx

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

apps/web/components/BookingsShell.tsx

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

apps/web/components/I18nLanguageHandler.tsx

@@ -1,4 +1,3 @@
-import { isEmpty } from "lodash";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
@@ -20,13 +19,13 @@ export function useViewerI18n() {
 /**
  * Auto-switches locale client-side to the logged in user's preference
  */
-const I18nLanguageHandler = (): null => {
+const I18nLanguageHandler = () => {
   const { i18n } = useTranslation("common");
   const locale = useViewerI18n().data?.locale || i18n.language;
 
   useEffect(() => {
     // bail early when i18n = {}
-    if (isEmpty(i18n)) return;
+    if (Object.keys(i18n).length === 0) return;
     // if locale is ready and the i18n.language does != locale - changeLanguage
     if (locale && i18n.language !== locale) {
       i18n.changeLanguage(locale);
@@ -35,7 +34,6 @@ const I18nLanguageHandler = (): null => {
     document.dir = i18n.dir();
     document.documentElement.setAttribute("lang", locale);
   }, [locale, i18n]);
-
   return null;
 };
 

apps/web/components/NavTabs.tsx

@@ -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 py-4 px-1 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;

apps/web/components/PageWrapper.tsx

@@ -6,7 +6,7 @@ import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
 
 import type { AppProps } from "@lib/app-providers";
@@ -53,10 +53,6 @@ function PageWrapper(props: AppProps) {
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
 
-  // Canonical: Check if the URL is from cal.com so that we set the canonical conditionally
-  const isCalcom =
-    WEBAPP_URL &&
-    (new URL(WEBAPP_URL).hostname.endsWith("cal.com") || new URL(WEBAPP_URL).hostname.endsWith("cal.dev"));
   const path = router.asPath;
 
   return (
@@ -70,7 +66,7 @@ function PageWrapper(props: AppProps) {
       <DefaultSeo
         // Set canonical to https://cal.com or self-hosted URL
         canonical={
-          isCalcom
+          IS_CALCOM
             ? buildCanonical({ path, origin: "https://cal.com" }) // cal.com & .dev
             : buildCanonical({ path, origin: WEBAPP_URL }) // self-hosted
         }

apps/web/components/SettingsShell.tsx

@@ -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>
-  );
-}

apps/web/components/apps/App.tsx

@@ -1,373 +1,17 @@
-import Link from "next/link";
-import type { IframeHTMLAttributes } from "react";
-import React, { useState } from "react";
-
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
-import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 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 { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } 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 appCredentials = trpc.viewer.appCredentialsByType.useQuery(
-    { appType: type },
-    {
-      onSuccess(data) {
-        setExistingCredentials(data);
-      },
-    }
-  );
-
-  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 mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap p-4  md:mb-8 md:-ml-8 md:-mr-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>
-        {!appCredentials.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 (
-                      <Button
-                        StartIcon={Plus}
-                        {...props}
-                        // @TODO: Overriding color and size prevent us from
-                        // having to duplicate InstallAppButton for now.
-                        color="primary"
-                        size="base"
-                        data-testid="install-app-button">
-                        {t("install_another")}
-                      </Button>
-                    );
-                  }}
-                />
-              )}
-            </div>
-          ) : existingCredentials.length > 0 ? (
-            <DisconnectIntegration
-              buttonProps={{ color: "secondary" }}
-              label={t("disconnect")}
-              credentialId={existingCredentials[0]}
-              onSuccess={() => {
-                appCredentials.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 (
-                  <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">
-                    {t("install_app")}
-                  </Button>
-                );
-              }}
-            />
-          ))
-        ) : (
-          <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 mt-8 mb-2 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 mr-1 -mt-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 mr-1 -mt-px 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 mr-1 -mt-px 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 mr-1 -mt-px 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 mr-1 -mt-px 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
@@ -377,10 +21,10 @@ export default function App(props: {
       />
       {props.licenseRequired ? (
         <LicenseRequired>
-          <Component {...props} />
+          <AppPage {...props} />
         </LicenseRequired>
       ) : (
-        <Component {...props} />
+        <AppPage {...props} />
       )}
     </Shell>
   );

apps/web/components/apps/AppPage.tsx

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

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -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>
+                  {team.name} {isInstalled && `(${t("installed")})`}
+                </p>
+              </DropdownItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
+    </Dropdown>
+  );
+};

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -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,14 +22,14 @@ 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 ? (
             <EmptyScreen
               Icon={AlertCircle}
-              headline={t("no_apps")}
-              description={isAdmin ? "You can enable apps in the settings" : ""}
+              headline={isAdmin ? t("no_apps") : t("no_apps_configured")}
+              description={isAdmin ? t("enable_in_settings") : t("please_contact_admin")}
               buttonText={isAdmin ? t("apps_settings") : ""}
               buttonOnClick={() => router.push("/settings/admin/apps/calendar")}
             />
@@ -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>;

apps/web/components/auth/layouts/AdminLayout.tsx

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

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,68 +0,0 @@
-import { z } from "zod";
-
-import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
-import { classNames } from "@calcom/lib";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Tooltip } from "@calcom/ui";
-import { Link } from "@calcom/ui/components/icon";
-
-import type { Props } from "./pages/AvailabilityPage";
-
-const excludeNullValues = (value: unknown) => !!value;
-
-export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
-  const { t } = useLocale();
-
-  const renderLocations = locations.map((location, index) => {
-    const eventLocationType = getEventLocationType(location.type);
-    if (!eventLocationType) {
-      // It's possible that the location app got uninstalled
-      return null;
-    }
-    if (eventLocationType.variable === "hostDefault") {
-      return null;
-    }
-
-    const translateAbleKeys = [
-      "in_person_attendee_address",
-      "in_person",
-      "attendee_phone_number",
-      "link_meeting",
-      "organizer_phone_number",
-    ];
-
-    const locationKey = z.string().default("").parse(locationKeyToString(location));
-    const translatedLocation = location.type.startsWith("integrations:")
-      ? eventLocationType.label
-      : translateAbleKeys.includes(locationKey)
-      ? t(locationKey)
-      : locationKey;
-
-    return (
-      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-        {eventLocationType.iconUrl === "/link.svg" ? (
-          <Link className="text-default ml-[2px] h-4 w-4  ltr:mr-[10px] rtl:ml-[10px] " />
-        ) : (
-          <img
-            src={eventLocationType.iconUrl}
-            className={classNames(
-              "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-              !eventLocationType.iconUrl?.startsWith("/app-store") ? "dark:invert-[.65]" : ""
-            )}
-            alt={`${eventLocationType.label} icon`}
-          />
-        )}
-        <Tooltip content={translatedLocation}>
-          <p className="line-clamp-1">{translatedLocation}</p>
-        </Tooltip>
-      </div>
-    );
-  });
-
-  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
-  return filteredLocations.length ? (
-    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm">
-      {filteredLocations}
-    </div>
-  ) : null;
-}

apps/web/components/booking/AvailableTimes.tsx

@@ -1,217 +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) => {
-    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;
-
-                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" ? "" : ""
-                        )}>
-                        {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={`${
-                              slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
-                                ? "text-rose-600"
-                                : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
-                                ? "text-yellow-500"
-                                : "text-emerald-400"
-                            } text-sm`}>
-                            {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
-                            {seatsPerTimeSlot}{" "}
-                            {t("seats_available", {
-                              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;

apps/web/components/booking/BookingDescription.tsx

@@ -1,162 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
-
-import dayjs from "@calcom/dayjs";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { SchedulingType } from "@calcom/prisma/enums";
-import { Badge } from "@calcom/ui";
-import { CheckSquare, Clock } from "@calcom/ui/components/icon";
-
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
-
-import type { AvailabilityPageProps } from "../../pages/[user]/[type]";
-import type { BookPageProps } from "../../pages/[user]/book";
-import type { DynamicAvailabilityPageProps } from "../../pages/d/[link]/[slug]";
-import type { HashLinkPageProps } from "../../pages/d/[link]/book";
-import type { AvailabilityTeamPageProps } from "../../pages/team/[slug]/[type]";
-import type { TeamBookingPageProps } from "../../pages/team/[slug]/book";
-import { AvailableEventLocations } from "./AvailableEventLocations";
-
-interface Props {
-  profile:
-    | AvailabilityPageProps["profile"]
-    | HashLinkPageProps["profile"]
-    | TeamBookingPageProps["profile"]
-    | BookPageProps["profile"]
-    | AvailabilityTeamPageProps["profile"]
-    | DynamicAvailabilityPageProps["profile"];
-  eventType:
-    | AvailabilityPageProps["eventType"]
-    | HashLinkPageProps["eventType"]
-    | TeamBookingPageProps["eventType"]
-    | BookPageProps["eventType"]
-    | AvailabilityTeamPageProps["eventType"]
-    | DynamicAvailabilityPageProps["eventType"];
-  isBookingPage?: boolean;
-  children: ReactNode;
-  isMobile?: boolean;
-  rescheduleUid?: string;
-}
-
-const BookingDescription: FC<Props> = (props) => {
-  const { profile, eventType, isBookingPage = false, children } = props;
-  const { date: bookingDate } = useRouterQuery("date");
-  const { t } = useLocale();
-  const { duration, setQuery: setDuration } = useRouterQuery("duration");
-
-  useEffect(() => {
-    if (
-      !duration ||
-      isNaN(Number(duration)) ||
-      (eventType.metadata?.multipleDuration &&
-        !eventType.metadata?.multipleDuration.includes(Number(duration)))
-    ) {
-      setDuration(eventType.length);
-    }
-  }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
-
-  let requiresConfirmation = eventType?.requiresConfirmation;
-  let requiresConfirmationText = t("requires_confirmation");
-  const rcThreshold = eventType?.metadata?.requiresConfirmationThreshold;
-  if (rcThreshold) {
-    if (isBookingPage) {
-      if (dayjs(bookingDate).diff(dayjs(), rcThreshold.unit) > rcThreshold.time) {
-        requiresConfirmation = false;
-      }
-    } else {
-      requiresConfirmationText = t("requires_confirmation_threshold", {
-        ...rcThreshold,
-        unit: rcThreshold.unit.slice(0, -1),
-      });
-    }
-  }
-  return (
-    <>
-      <UserAvatars
-        profile={profile}
-        users={eventType.users}
-        showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-        size="sm"
-        truncateAfter={3}
-      />
-      <h2 className="text-default mt-1 mb-2 break-words text-sm font-medium ">
-        {eventType.team?.parent?.name} {profile.name}
-      </h2>
-      <h1 className="font-cal  text-emphasis mb-6 break-words text-2xl font-semibold leading-none">
-        {eventType.title}
-      </h1>
-      <div className=" text-default flex flex-col space-y-4 text-sm font-medium">
-        {eventType?.description && (
-          <div
-            className={classNames(
-              "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
-              isBookingPage && "text-default text-sm font-medium"
-            )}>
-            {/* TODO: Fix colors when token is introdcued to DS */}
-            <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
-              <EventTypeDescriptionSafeHTML eventType={eventType} />
-            </div>
-          </div>
-        )}
-        {requiresConfirmation && (
-          <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
-            <div>
-              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
-            </div>
-            {requiresConfirmationText}
-          </div>
-        )}
-        <AvailableEventLocations
-          locations={eventType.locations as AvailabilityPageProps["eventType"]["locations"]}
-        />
-        <div
-          className={classNames(
-            "flex flex-nowrap text-sm font-medium",
-            isBookingPage && "text-default",
-            !eventType.metadata?.multipleDuration && "items-center"
-          )}>
-          <Clock
-            className={classNames(
-              "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
-              isBookingPage && "mt-[2px]"
-            )}
-          />
-          {eventType.metadata?.multipleDuration !== undefined ? (
-            !isBookingPage ? (
-              <ul className="-mt-1 flex flex-wrap gap-1">
-                {eventType.metadata.multipleDuration.map((dur, idx) => (
-                  <li key={idx}>
-                    <Badge
-                      variant="gray"
-                      className={classNames(
-                        duration === dur.toString()
-                          ? "bg-emphasis border-emphasis text-emphasis "
-                          : "bg-subtle text-default border-transparent ",
-                        "cursor-pointer border"
-                      )}
-                      onClick={() => {
-                        setDuration(dur);
-                      }}>
-                      {dur} {t("minute_timeUnit")}
-                    </Badge>
-                  </li>
-                ))}
-              </ul>
-            ) : (
-              `${duration} ${t("minutes")}`
-            )
-          ) : (
-            `${eventType.length} ${t("minutes")}`
-          )}
-        </div>
-        {children}
-      </div>
-    </>
-  );
-};
-
-export default BookingDescription;

apps/web/components/booking/BookingDescriptionPayment.tsx

@@ -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="ml-[2px] -mt-1 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;

apps/web/components/booking/BookingListItem.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
@@ -10,6 +10,7 @@ import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
+import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { BookingStatus } from "@calcom/prisma/enums";
@@ -49,6 +50,8 @@ type BookingItemProps = BookingItem & {
 function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
+  const bookerUrl = useBookerUrl();
+
   const user = query.data;
   const {
     t,
@@ -155,7 +158,7 @@ function BookingListItem(booking: BookingItemProps) {
       id: "cancel",
       label: isTabRecurring && isRecurring ? t("cancel_all_remaining") : t("cancel"),
       /* When cancelling we need to let the UI and the API know if the intention is to
-         cancel all remaining bookings or just that booking instance. */
+               cancel all remaining bookings or just that booking instance. */
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
@@ -170,7 +173,7 @@ function BookingListItem(booking: BookingItemProps) {
           id: "reschedule",
           icon: Clock,
           label: t("reschedule_booking"),
-          href: `/reschedule/${booking.uid}${
+          href: `${bookerUrl}/reschedule/${booking.uid}${
             booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
           }`,
         },
@@ -236,13 +239,18 @@ function BookingListItem(booking: BookingItemProps) {
     },
   });
 
-  const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => {
+  const saveLocation = (
+    newLocationType: EventLocationType["type"],
+    details: {
+      [key: string]: string;
+    }
+  ) => {
     let newLocation = newLocationType as string;
     const eventLocationType = getEventLocationType(newLocationType);
     if (eventLocationType?.organizerInputType) {
       newLocation = details[Object.keys(details)[0]];
     }
-    setLocationMutation.mutate({ bookingId: booking.id, newLocation });
+    setLocationMutation.mutate({ bookingId: booking.id, newLocation, details });
   };
 
   // Getting accepted recurring dates to show
@@ -252,13 +260,11 @@ function BookingListItem(booking: BookingItemProps) {
     .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
 
   const onClickTableData = () => {
-    router.push({
-      pathname: `/booking/${booking.uid}`,
-      query: {
-        allRemainingBookings: isTabRecurring,
-        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
-      },
+    const urlSearchParams = new URLSearchParams({
+      allRemainingBookings: isTabRecurring.toString(),
     });
+    if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
+    router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`);
   };
 
   const title = booking.title;
@@ -280,6 +286,7 @@ function BookingListItem(booking: BookingItemProps) {
         saveLocation={saveLocation}
         isOpenDialog={isOpenSetLocationDialog}
         setShowLocationModal={setIsOpenLocationDialog}
+        teamId={booking.eventType?.team?.id}
       />
       {booking.paid && booking.payment[0] && (
         <ChargeCardDialog
@@ -374,7 +381,7 @@ function BookingListItem(booking: BookingItemProps) {
         </td>
         <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}>
           {/* Time and Badges for mobile */}
-          <div className="w-full pt-4 pb-2 sm:hidden">
+          <div className="w-full pb-2 pt-4 sm:hidden">
             <div className="flex w-full items-center justify-between sm:hidden">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
               <div className="text-subtle pr-2 text-sm">
@@ -423,7 +430,7 @@ function BookingListItem(booking: BookingItemProps) {
               <span> </span>
 
               {paymentAppData.enabled && !booking.paid && booking.payment.length && (
-                <Badge className="ms-2 me-2 hidden sm:inline-flex" variant="orange">
+                <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
                   {t("pending_payment")}
                 </Badge>
               )}

apps/web/components/booking/CancelBooking.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -26,6 +26,9 @@ type Props = {
 };
 
 export default function CancelBooking(props: Props) {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const asPath = `${pathname}?${searchParams.toString()}`;
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
@@ -64,7 +67,7 @@ export default function CancelBooking(props: Props) {
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
-            className="mt-2 mb-4 w-full "
+            className="mb-4 mt-2 w-full "
             rows={3}
           />
           <div className="flex flex-col-reverse rtl:space-x-reverse ">
@@ -93,11 +96,11 @@ export default function CancelBooking(props: Props) {
                     headers: {
                       "Content-Type": "application/json",
                     },
-                    method: "DELETE",
+                    method: "POST",
                   });
 
                   if (res.status >= 200 && res.status < 300) {
-                    await router.replace(router.asPath);
+                    router.replace(asPath);
                   } else {
                     setLoading(false);
                     setError(

apps/web/components/booking/SkeletonLoader.tsx

@@ -25,7 +25,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+      <div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-6 w-16" />
           <SkeletonText className="h-6 w-32" />

apps/web/components/booking/SlotPicker.tsx

@@ -1,198 +0,0 @@
-import type { EventType } from "@prisma/client";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import type { z } from "zod";
-
-import type { Dayjs } from "@calcom/dayjs";
-import dayjs from "@calcom/dayjs";
-import DatePicker from "@calcom/features/calendars/DatePicker";
-import classNames from "@calcom/lib/classNames";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { TimeFormat } from "@calcom/lib/timeFormat";
-import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc/react";
-
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-const AvailableTimes = dynamic(() => import("@components/booking/AvailableTimes"));
-
-const getRefetchInterval = (refetchCount: number): number => {
-  const intervals = [3000, 3000, 5000, 10000, 20000, 30000] as const;
-  return intervals[refetchCount] || intervals[intervals.length - 1];
-};
-
-const useSlots = ({
-  eventTypeId,
-  eventTypeSlug,
-  startTime,
-  endTime,
-  usernameList,
-  timeZone,
-  duration,
-  enabled = true,
-}: {
-  eventTypeId: number;
-  eventTypeSlug: string;
-  startTime?: Dayjs;
-  endTime?: Dayjs;
-  usernameList: string[];
-  timeZone?: string;
-  duration?: string;
-  enabled?: boolean;
-}) => {
-  const [refetchCount, setRefetchCount] = useState(0);
-  const refetchInterval = getRefetchInterval(refetchCount);
-  const { data, isLoading, isPaused, fetchStatus } = trpc.viewer.public.slots.getSchedule.useQuery(
-    {
-      eventTypeId,
-      eventTypeSlug,
-      usernameList,
-      startTime: startTime?.toISOString() || "",
-      endTime: endTime?.toISOString() || "",
-      timeZone,
-      duration,
-    },
-    {
-      enabled: !!startTime && !!endTime && enabled,
-      refetchInterval,
-      trpc: { context: { skipBatch: true } },
-    }
-  );
-  useEffect(() => {
-    if (!!data && fetchStatus === "idle") {
-      setRefetchCount(refetchCount + 1);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fetchStatus, data]);
-
-  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
-  return { slots: data?.slots || {}, isLoading: isLoading || isPaused };
-};
-
-export const SlotPicker = ({
-  eventType,
-  timeFormat,
-  onTimeFormatChange,
-  timeZone,
-  recurringEventCount,
-  users,
-  seatsPerTimeSlot,
-  bookingAttendees,
-  weekStart = 0,
-}: {
-  eventType: Pick<
-    EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
-    "id" | "schedulingType" | "slug" | "length" | "metadata"
-  >;
-  timeFormat: TimeFormat;
-  onTimeFormatChange: (is24Hour: boolean) => void;
-  timeZone?: string;
-  seatsPerTimeSlot?: number;
-  bookingAttendees?: number;
-  recurringEventCount?: number;
-  users: string[];
-  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-}) => {
-  const [selectedDate, setSelectedDate] = useState<Dayjs>();
-  const [browsingDate, setBrowsingDate] = useState<Dayjs>();
-  let { duration = eventType.length.toString() } = useRouterQuery("duration");
-  const { date, setQuery: setDate } = useRouterQuery("date");
-  const { month, setQuery: setMonth } = useRouterQuery("month");
-  const router = useRouter();
-
-  if (!eventType.metadata?.multipleDuration) {
-    duration = eventType.length.toString();
-  }
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    // Etc/GMT is not actually a timeZone, so handle this select option explicitly to prevent a hard crash.
-    if (timeZone === "Etc/GMT") {
-      setBrowsingDate(dayjs.utc(month).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0));
-      if (date) {
-        setSelectedDate(dayjs.utc(date));
-      }
-    } else {
-      // Set the start of the month without shifting time like startOf() may do.
-      setBrowsingDate(
-        dayjs.tz(month, timeZone).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0)
-      );
-      if (date) {
-        // It's important to set the date immediately to the timeZone, dayjs(date) will convert to browsertime.
-        setSelectedDate(dayjs.tz(date, timeZone));
-      }
-    }
-  }, [router.isReady, month, date, duration, timeZone]);
-
-  const { i18n, isLocaleReady } = useLocale();
-  const { slots: monthSlots, isLoading } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime: dayjs().startOf("day"),
-    endTime: browsingDate?.endOf("month"),
-    timeZone,
-    duration,
-  });
-  const { slots: selectedDateSlots, isLoading: _isLoadingSelectedDateSlots } = useSlots({
-    eventTypeId: eventType.id,
-    eventTypeSlug: eventType.slug,
-    usernameList: users,
-    startTime: selectedDate?.startOf("day"),
-    endTime: selectedDate?.endOf("day"),
-    timeZone,
-    duration,
-    /** Prevent refetching is we already have this data from month slots */
-    enabled: !!selectedDate,
-  });
-
-  /** Hide skeleton if we have the slot loaded in the month query */
-  const isLoadingSelectedDateSlots = (() => {
-    if (!selectedDate) return _isLoadingSelectedDateSlots;
-    if (!!selectedDateSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    if (!!monthSlots[selectedDate.format("YYYY-MM-DD")]) return false;
-    return false;
-  })();
-
-  return (
-    <>
-      <DatePicker
-        isLoading={isLoading}
-        className={classNames(
-          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
-          selectedDate ? " border-subtle sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
-        )}
-        includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
-        locale={isLocaleReady ? i18n.language : "en"}
-        selected={selectedDate}
-        onChange={(newDate) => {
-          setDate(newDate.format("YYYY-MM-DD"));
-        }}
-        onMonthChange={(newMonth) => {
-          setMonth(newMonth.format("YYYY-MM"));
-        }}
-        browsingDate={browsingDate}
-        weekStart={weekStart}
-      />
-      <AvailableTimes
-        isLoading={isLoadingSelectedDateSlots}
-        slots={
-          selectedDate &&
-          (selectedDateSlots[selectedDate.format("YYYY-MM-DD")] ||
-            monthSlots[selectedDate.format("YYYY-MM-DD")])
-        }
-        date={selectedDate}
-        timeFormat={timeFormat}
-        onTimeFormatChange={onTimeFormatChange}
-        eventTypeId={eventType.id}
-        eventTypeSlug={eventType.slug}
-        seatsPerTimeSlot={seatsPerTimeSlot}
-        bookingAttendees={bookingAttendees}
-        recurringCount={recurringEventCount}
-        duration={parseInt(duration)}
-      />
-    </>
-  );
-};

apps/web/components/booking/TimeOptions.tsx

@@ -1,41 +0,0 @@
-import type { FC } from "react";
-import { useEffect, useState } from "react";
-
-import type { ITimezoneOption } from "@calcom/ui";
-import { TimezoneSelect } from "@calcom/ui";
-
-import { timeZone } from "../../lib/clock";
-
-type Props = {
-  onSelectTimeZone: (selectedTimeZone: string) => void;
-};
-
-const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
-  const [selectedTimeZone, setSelectedTimeZone] = useState("");
-
-  useEffect(() => {
-    setSelectedTimeZone(timeZone());
-  }, []);
-
-  useEffect(() => {
-    if (selectedTimeZone && timeZone() && selectedTimeZone !== timeZone()) {
-      onSelectTimeZone(timeZone(selectedTimeZone));
-    }
-  }, [selectedTimeZone, onSelectTimeZone]);
-
-  return !!selectedTimeZone ? (
-    <TimezoneSelect
-      id="timeZone"
-      classNames={{
-        singleValue: () => "text-default",
-        dropdownIndicator: () => "text-default",
-        menu: () => "!w-64 max-w-[90vw] shadow-dropdown bg-default border-subtle border rounded-md mt-1",
-      }}
-      variant="minimal"
-      value={selectedTimeZone}
-      onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-    />
-  ) : null;
-};
-
-export default TimeOptions;

apps/web/components/booking/TimezoneDropdown.tsx

@@ -1,26 +0,0 @@
-import { Globe } from "@calcom/ui/components/icon";
-
-import { timeZone as localStorageTimeZone } from "@lib/clock";
-
-import TimeOptions from "@components/booking/TimeOptions";
-
-export function TimezoneDropdown({
-  onChangeTimeZone,
-}: {
-  onChangeTimeZone: (newTimeZone: string) => void;
-  timeZone?: string;
-}) {
-  const handleSelectTimeZone = (newTimeZone: string) => {
-    onChangeTimeZone(newTimeZone);
-    localStorageTimeZone(newTimeZone);
-  };
-
-  return (
-    <>
-      <div className="dark:focus-within:bg-darkgray-200  dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
-      </div>
-    </>
-  );
-}

apps/web/components/booking/UserAvatars.tsx

@@ -1,44 +0,0 @@
-import { CAL_URL } from "@calcom/lib/constants";
-import type { AvatarGroupProps } from "@calcom/ui";
-import { AvatarGroup } from "@calcom/ui";
-
-export const UserAvatars = ({
-  profile,
-  users,
-  ...props
-}: {
-  profile: { image: string | null; name?: string | null; username?: string | null };
-  showMembers: boolean;
-  users: { username: string | null; name?: string | null }[];
-} & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
-  const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
-  return (
-    <AvatarGroup
-      items={
-        [
-          {
-            image: profile.image,
-            alt: profile.name,
-            title: profile.name,
-            href: profile.username ? `${CAL_URL}/${profile.username}` : undefined,
-          },
-          ...(showMembers
-            ? users.map((user) => ({
-                title: user.name,
-                image: `${CAL_URL}/${user.username}/avatar.png`,
-                alt: user.name || undefined,
-                href: user.username ? `${CAL_URL}/${user.username}` : undefined,
-              }))
-            : []),
-        ].filter((item) => !!item.image) as {
-          image: string;
-          alt?: string;
-          title?: string;
-          href?: string;
-        }[]
-      }
-      size="sm"
-      truncateAfter={props.truncateAfter}
-    />
-  );
-};

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,292 +0,0 @@
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-import { z } from "zod";
-
-import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import dayjs from "@calcom/dayjs";
-import {
-  useEmbedNonStylesConfig,
-  useEmbedStyles,
-  useEmbedUiConfig,
-  useIsBackgroundTransparent,
-  useIsEmbed,
-} from "@calcom/embed-core/embed-iframe";
-import classNames from "@calcom/lib/classNames";
-import useGetBrandingColours from "@calcom/lib/getBrandColours";
-import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
-import notEmpty from "@calcom/lib/notEmpty";
-import { getRecurringFreq } from "@calcom/lib/recurringStrings";
-import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
-import { trpc } from "@calcom/trpc";
-import { HeadSeo, NumberInput, useCalcomTheme } from "@calcom/ui";
-import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
-
-import { timeZone as localStorageTimeZone } from "@lib/clock";
-
-import BookingDescription from "@components/booking/BookingDescription";
-import { SlotPicker } from "@components/booking/SlotPicker";
-
-import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
-import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
-import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-
-const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
-
-const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
-/*const SlotPicker = dynamic(() => import("../SlotPicker").then((mod) => mod.SlotPicker), {
-  ssr: false,
-  loading: () => <div className="mt-8 px-4 pb-4 sm:mt-0 sm:p-4 md:min-w-[300px] md:px-5 lg:min-w-[455px]" />,
-});*/
-const TimezoneDropdown = dynamic(() => import("../TimezoneDropdown").then((mod) => mod.TimezoneDropdown), {
-  ssr: false,
-});
-
-const dateQuerySchema = z.object({
-  rescheduleUid: z.string().optional().default(""),
-  date: z.string().optional().default(""),
-  timeZone: z.string().optional().default(""),
-  seatReferenceUid: z.string().optional(),
-});
-
-export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
-
-const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor: string; darkBrandColor: string }) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
-const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
-  const router = useRouter();
-  const isEmbed = useIsEmbed(restProps.isEmbed);
-  const query = dateQuerySchema.parse(router.query);
-  const { rescheduleUid } = query;
-  useTheme(profile.theme);
-  useBrandColors({
-    brandColor: profile.brandColor,
-    darkBrandColor: profile.darkBrandColor,
-  });
-  const { t, i18n } = useLocale();
-  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
-  //TODO: Plan to remove shouldAlignCentrallyInEmbed config
-  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
-  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const isBackgroundTransparent = useIsBackgroundTransparent();
-
-  const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState<TimeFormat>(detectBrowserTimeFormat);
-
-  const onTimeFormatChange = (is24Hours: boolean) => {
-    setTimeFormat(is24Hours ? TimeFormat.TWENTY_FOUR_HOUR : TimeFormat.TWELVE_HOUR);
-    setIs24hClockInLocalStorage(is24Hours);
-  };
-
-  useEffect(() => {
-    setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
-  }, []);
-
-  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
-
-  /*
-  const telemetry = useTelemetry();
-   useEffect(() => {
-    if (top !== window) {
-      //page_view will be collected automatically by _middleware.ts
-      telemetry.event(
-        telemetryEventTypes.embedView,
-        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
-      );
-    }
-  }, [telemetry]); */
-  const embedUiConfig = useEmbedUiConfig();
-  // get dynamic user list here
-  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
-
-  const timezoneDropdown = useMemo(
-    () => <TimezoneDropdown timeZone={timeZone} onChangeTimeZone={setTimeZone} />,
-    [timeZone]
-  );
-  const paymentAppData = getPaymentAppData(eventType);
-
-  const rawSlug = profile.slug ? profile.slug.split("/") : [];
-  if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
-
-  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
-
-  const { data: bookingAttendees } = trpc.viewer.bookings.getBookingAttendees.useQuery(
-    {
-      seatReferenceUid: rescheduleUid,
-    },
-    {
-      enabled: !!(rescheduleUid && eventType.seatsPerTimeSlot),
-    }
-  );
-
-  return (
-    <>
-      <HeadSeo
-        title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
-        description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
-        meeting={{
-          title: eventType.title,
-          profile: { name: `${profile.name}`, image: profile.image },
-          users: [
-            ...(eventType.users || []).map((user) => ({
-              name: `${user.name}`,
-              username: `${user.username}`,
-            })),
-          ],
-        }}
-        nextSeoProps={{
-          nofollow: eventType.hidden,
-          noindex: eventType.hidden,
-        }}
-        isBrandingHidden={restProps.isBrandingHidden}
-      />
-      <BookingPageTagManager eventType={eventType} />
-      <div>
-        <main
-          className={classNames(
-            "flex flex-col md:mx-4",
-            shouldAlignCentrally ? "items-center" : "items-start",
-            !isEmbed && classNames("bg-subtle dark:bg-default mx-auto my-0 ease-in-out md:my-24")
-          )}>
-          <div>
-            <div
-              style={availabilityDatePickerEmbedStyles}
-              className={classNames(
-                isBackgroundTransparent ? "" : "bg-default dark:bg-muted pb-4 md:pb-0",
-                "border-booker md:border-booker-width md:rounded-md",
-                isEmbed && "mx-auto"
-              )}>
-              <div className="md:flex">
-                {showEventTypeDetails && (
-                  <div
-                    className={classNames(
-                      " border-subtle flex flex-col p-5 sm:border-r",
-                      "min-w-full md:w-[230px] md:min-w-[230px]",
-                      recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
-                    )}>
-                    <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
-                      {rescheduleUid && eventType.seatsPerTimeSlot && bookingAttendees && (
-                        <div
-                          className={classNames(
-                            "flex flex-nowrap items-center text-sm font-medium",
-                            " text-default",
-                            "ltr:mr-[10px] rtl:ml-[10px]"
-                          )}>
-                          <User
-                            className={classNames(
-                              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
-                              "mt-[2px]"
-                            )}
-                          />{" "}
-                          {t("event_type_seats", { numberOfSeats: bookingAttendees })}
-                        </div>
-                      )}
-                      {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="flex items-start text-sm font-medium">
-                          <RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
-                          <div>
-                            <p className="mb-1 -ml-2 inline px-2 py-1">
-                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
-                            </p>
-
-                            <NumberInput
-                              defaultValue={eventType.recurringEvent.count}
-                              min="1"
-                              max={eventType.recurringEvent.count}
-                              isFullWidth={false}
-                              className="me-2 inline w-16"
-                              onChange={(event) => {
-                                setRecurringEventCount(parseInt(event?.target.value));
-                              }}
-                            />
-
-                            <p className="inline">
-                              {t("occurrence", {
-                                count: recurringEventCount,
-                              })}
-                            </p>
-                          </div>
-                        </div>
-                      )}
-                      {paymentAppData.price > 0 && (
-                        <p className="-ml-2 px-2 text-sm font-medium">
-                          <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                          {paymentAppData.paymentOption === "HOLD" ? (
-                            <>
-                              {t("no_show_fee_amount", {
-                                amount: paymentAppData.price / 100.0,
-                                formatParams: { amount: { currency: paymentAppData.currency } },
-                              })}
-                            </>
-                          ) : (
-                            <>
-                              {new Intl.NumberFormat(i18n.language, {
-                                style: "currency",
-                                currency: paymentAppData.currency,
-                              }).format(paymentAppData.price / 100)}
-                            </>
-                          )}
-                        </p>
-                      )}
-                      {timezoneDropdown}
-                    </BookingDescription>
-
-                    {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
-                    <div>
-                      <p
-                        className="mt-4 mb-3 text-default"
-                        data-testid="former_time_p_desktop">
-                        {t("former_time")}
-                      </p>
-                      <p className="text-subtle line-through ">
-                        <CalendarIcon className="ltr:mr-[10px] rtl:ml-[10px] -mt-1 inline-block h-4 w-4 text-subtle" />
-                        {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
-                      </p>
-                    </div>
-                  )*/}
-                  </div>
-                )}
-                <SlotPicker
-                  weekStart={
-                    typeof profile.weekStart === "string"
-                      ? ([
-                          "Sunday",
-                          "Monday",
-                          "Tuesday",
-                          "Wednesday",
-                          "Thursday",
-                          "Friday",
-                          "Saturday",
-                        ].indexOf(profile.weekStart) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
-                      : profile.weekStart /* Allows providing weekStart as number */
-                  }
-                  eventType={eventType}
-                  timeFormat={timeFormat}
-                  onTimeFormatChange={onTimeFormatChange}
-                  timeZone={timeZone}
-                  users={userList}
-                  seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
-                  bookingAttendees={bookingAttendees || undefined}
-                  recurringEventCount={recurringEventCount}
-                />
-              </div>
-            </div>
-            {/* FIXME: We don't show branding in Embed yet because we need to place branding on top of the main content. Keeping it outside the main content would have visibility issues because outside main content background is transparent */}
-            {!restProps.isBrandingHidden && !isEmbed && <PoweredBy />}
-          </div>
-        </main>
-      </div>
-      <Toaster position="bottom-right" />
-    </>
-  );
-};
-
-export default AvailabilityPage;

apps/web/components/booking/pages/BookingPage.tsx

@@ -1,704 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useMutation } from "@tanstack/react-query";
-import { useSession } from "next-auth/react";
-import dynamic from "next/dynamic";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
-import { useForm, useFormContext } from "react-hook-form";
-import { v4 as uuidv4 } from "uuid";
-import { z } from "zod";
-
-import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import type { EventLocationType } from "@calcom/app-store/locations";
-import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
-import type { LocationObject } from "@calcom/core/location";
-import dayjs from "@calcom/dayjs";
-import {
-  useEmbedNonStylesConfig,
-  useEmbedUiConfig,
-  useIsBackgroundTransparent,
-  useIsEmbed,
-} from "@calcom/embed-core/embed-iframe";
-import { createBooking, createRecurringBooking } from "@calcom/features/bookings/lib";
-import { useTimePreferences } from "@calcom/features/bookings/lib";
-import {
-  getBookingFieldsWithSystemFields,
-  SystemField,
-} from "@calcom/features/bookings/lib/getBookingFields";
-import getBookingResponsesSchema, {
-  getBookingResponsesPartialSchema,
-} from "@calcom/features/bookings/lib/getBookingResponsesSchema";
-import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
-import { FormBuilderField } from "@calcom/features/form-builder/FormBuilder";
-import { bookingSuccessRedirect } from "@calcom/lib/bookingSuccessRedirect";
-import classNames from "@calcom/lib/classNames";
-import { APP_NAME, MINUTES_TO_BOOK } from "@calcom/lib/constants";
-import useGetBrandingColours from "@calcom/lib/getBrandColours";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import useTheme from "@calcom/lib/hooks/useTheme";
-import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { HttpError } from "@calcom/lib/http-error";
-import { parseDate, parseDateTimeWithTimeZone, parseRecurringDates } from "@calcom/lib/parse-dates";
-import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { TimeFormat } from "@calcom/lib/timeFormat";
-import { trpc } from "@calcom/trpc";
-import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
-import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";
-
-import { timeZone } from "@lib/clock";
-import useRouterQuery from "@lib/hooks/useRouterQuery";
-
-import BookingDescription from "@components/booking/BookingDescription";
-
-import type { BookPageProps } from "../../../pages/[user]/book";
-import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
-import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
-
-const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
-
-/** These are like 40kb that not every user needs */
-const BookingDescriptionPayment = dynamic(
-  () => import("@components/booking/BookingDescriptionPayment")
-) as unknown as typeof import("@components/booking/BookingDescriptionPayment").default;
-
-const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
-type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
-const BookingFields = ({
-  fields,
-  locations,
-  rescheduleUid,
-  isDynamicGroupBooking,
-}: {
-  fields: BookingPageProps["eventType"]["bookingFields"];
-  locations: LocationObject[];
-  rescheduleUid?: string;
-  isDynamicGroupBooking: boolean;
-}) => {
-  const { t } = useLocale();
-  const { watch, setValue } = useFormContext();
-  const locationResponse = watch("responses.location");
-  const currentView = rescheduleUid ? "reschedule" : "";
-
-  return (
-    // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
-    <div>
-      {fields.map((field, index) => {
-        // During reschedule by default all system fields are readOnly. Make them editable on case by case basis.
-        // Allowing a system field to be edited might require sending emails to attendees, so we need to be careful
-        let readOnly =
-          (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
-
-        let noLabel = false;
-        let hidden = !!field.hidden;
-        const fieldViews = field.views;
-
-        if (fieldViews && !fieldViews.find((view) => view.id === currentView)) {
-          return null;
-        }
-
-        if (field.name === SystemField.Enum.rescheduleReason) {
-          // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
-          readOnly = false;
-        }
-
-        if (field.name === SystemField.Enum.smsReminderNumber) {
-          // `smsReminderNumber` and location.optionValue when location.value===phone are the same data point. We should solve it in a better way in the Form Builder itself.
-          // I think we should have a way to connect 2 fields together and have them share the same value in Form Builder
-          if (locationResponse?.value === "phone") {
-            setValue(`responses.${SystemField.Enum.smsReminderNumber}`, locationResponse?.optionValue);
-            // Just don't render the field now, as the value is already connected to attendee phone location
-            return null;
-          }
-          // `smsReminderNumber` can be edited during reschedule even though it's a system field
-          readOnly = false;
-        }
-
-        if (field.name === SystemField.Enum.guests) {
-          // No matter what user configured for Guests field, we don't show it for dynamic group booking as that doesn't support guests
-          hidden = isDynamicGroupBooking ? true : !!field.hidden;
-        }
-
-        // We don't show `notes` field during reschedule
-        if (
-          (field.name === SystemField.Enum.notes || field.name === SystemField.Enum.guests) &&
-          !!rescheduleUid
-        ) {
-          return null;
-        }
-
-        // Dynamically populate location field options
-        if (field.name === SystemField.Enum.location && field.type === "radioInput") {
-          if (!field.optionsInputs) {
-            throw new Error("radioInput must have optionsInputs");
-          }
-          const optionsInputs = field.optionsInputs;
-
-          // TODO: Instead of `getLocationOptionsForSelect` options should be retrieved from dataStore[field.getOptionsAt]. It would make it agnostic of the `name` of the field.
-          const options = getLocationOptionsForSelect(locations, t);
-          options.forEach((option) => {
-            const optionInput = optionsInputs[option.value as keyof typeof optionsInputs];
-            if (optionInput) {
-              optionInput.placeholder = option.inputPlaceholder;
-            }
-          });
-          field.options = options.filter(
-            (location): location is NonNullable<(typeof options)[number]> => !!location
-          );
-          // If we have only one option and it has an input, we don't show the field label because Option name acts as label.
-          // e.g. If it's just Attendee Phone Number option then we don't show `Location` label
-          if (field.options.length === 1) {
-            if (field.optionsInputs[field.options[0].value]) {
-              noLabel = true;
-            } else {
-              // If there's only one option and it doesn't have an input, we don't show the field at all because it's visible in the left side bar
-              hidden = true;
-            }
-          }
-        }
-
-        const label = noLabel ? "" : field.label || t(field.defaultLabel || "");
-        const placeholder = field.placeholder || t(field.defaultPlaceholder || "");
-
-        return (
-          <FormBuilderField
-            className="mb-4"
-            field={{ ...field, label, placeholder, hidden }}
-            readOnly={readOnly}
-            key={index}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-const routerQuerySchema = z
-  .object({
-    timeFormat: z.nativeEnum(TimeFormat),
-    rescheduleUid: z.string().optional(),
-    date: z
-      .string()
-      .optional()
-      .transform((date) => {
-        if (date === undefined) {
-          return null;
-        }
-        return date;
-      }),
-  })
-  .passthrough();
-
-const BookingPage = ({
-  eventType,
-  booking,
-  currentSlotBooking,
-  profile,
-  isDynamicGroupBooking,
-  recurringEventCount,
-  hasHashedBookingLink,
-  hashedLink,
-  ...restProps
-}: BookingPageProps) => {
-  const removeSelectedSlotMarkMutation = trpc.viewer.public.slots.removeSelectedSlotMark.useMutation();
-  const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
-  const { t, i18n } = useLocale();
-  const { duration: queryDuration } = useRouterQuery("duration");
-  const { date: queryDate } = useRouterQuery("date");
-  const isEmbed = useIsEmbed(restProps.isEmbed);
-  const embedUiConfig = useEmbedUiConfig();
-  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
-  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  const router = useRouter();
-  const { data: session } = useSession();
-  const isBackgroundTransparent = useIsBackgroundTransparent();
-  const telemetry = useTelemetry();
-
-  const { timezone } = useTimePreferences();
-
-  const reserveSlot = () => {
-    if (queryDuration) {
-      reserveSlotMutation.mutate({
-        eventTypeId: eventType.id,
-        slotUtcStartDate: dayjs(queryDate).utc().format(),
-        slotUtcEndDate: dayjs(queryDate).utc().add(parseInt(queryDuration), "minutes").format(),
-        bookingUid: currentSlotBooking?.uid,
-      });
-    }
-  };
-  // Define duration now that we support multiple duration eventTypes
-  let duration = eventType.length;
-  if (
-    queryDuration &&
-    !isNaN(Number(queryDuration)) &&
-    eventType.metadata?.multipleDuration &&
-    eventType.metadata?.multipleDuration.includes(Number(queryDuration))
-  ) {
-    duration = Number(queryDuration);
-  }
-
-  useEffect(() => {
-    /* if (top !== window) {
-      //page_view will be collected automatically by _middleware.ts
-      telemetry.event(
-        telemetryEventTypes.embedView,
-        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
-      );
-    } */
-    reserveSlot();
-    const interval = setInterval(reserveSlot, parseInt(MINUTES_TO_BOOK) * 60 * 1000 - 2000);
-    return () => {
-      clearInterval(interval);
-      removeSelectedSlotMarkMutation.mutate();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const mutation = useMutation(createBooking, {
-    onSuccess: async (responseData) => {
-      const { uid } = responseData;
-
-      if ("paymentUid" in responseData && !!responseData.paymentUid) {
-        return await router.push(
-          createPaymentLink({
-            paymentUid: responseData.paymentUid,
-            date,
-            name: bookingForm.getValues("responses.name"),
-            email: bookingForm.getValues("responses.email"),
-            absolute: false,
-          })
-        );
-      }
-
-      const query = {
-        isSuccessBookingPage: true,
-        email: bookingForm.getValues("responses.email"),
-        eventTypeSlug: eventType.slug,
-        seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
-        ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
-      };
-
-      return bookingSuccessRedirect({
-        router,
-        successRedirectUrl: eventType.successRedirectUrl,
-        query,
-        bookingUid: uid,
-      });
-    },
-  });
-
-  const recurringMutation = useMutation(createRecurringBooking, {
-    onSuccess: async (responseData = []) => {
-      const { uid } = responseData[0] || {};
-      const query = {
-        isSuccessBookingPage: true,
-        allRemainingBookings: true,
-        email: bookingForm.getValues("responses.email"),
-        eventTypeSlug: eventType.slug,
-        formerTime: booking?.startTime.toString(),
-      };
-      return bookingSuccessRedirect({
-        router,
-        successRedirectUrl: eventType.successRedirectUrl,
-        query,
-        bookingUid: uid,
-      });
-    },
-  });
-
-  const {
-    data: { timeFormat, rescheduleUid, date },
-  } = useTypedQuery(routerQuerySchema);
-
-  useTheme(profile.theme);
-  useBrandColors({
-    brandColor: profile.brandColor,
-    darkBrandColor: profile.darkBrandColor,
-  });
-
-  const querySchema = getBookingResponsesPartialSchema({
-    eventType: {
-      bookingFields: getBookingFieldsWithSystemFields(eventType),
-    },
-    view: rescheduleUid ? "reschedule" : "booking",
-  });
-
-  const parsedQuery = querySchema.parse({
-    ...router.query,
-    // `guest` because we need to support legacy URL with `guest` query param support
-    // `guests` because the `name` of the corresponding bookingField is `guests`
-    guests: router.query.guests || router.query.guest,
-  });
-
-  // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
-  const locations: LocationObject[] = useMemo(
-    () => (eventType.locations as LocationObject[]) || [],
-    [eventType.locations]
-  );
-
-  const [isClientTimezoneAvailable, setIsClientTimezoneAvailable] = useState(false);
-  useEffect(() => {
-    // THis is to fix hydration error that comes because of different timezone on server and client
-    setIsClientTimezoneAvailable(true);
-  }, []);
-
-  const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
-
-  // There should only exists one default userData variable for primaryAttendee.
-  const defaultUserValues = {
-    email: rescheduleUid ? booking?.attendees[0].email : parsedQuery["email"],
-    name: rescheduleUid ? booking?.attendees[0].name : parsedQuery["name"],
-  };
-
-  const defaultValues = () => {
-    if (!rescheduleUid) {
-      const defaults = {
-        responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
-      };
-
-      const responses = eventType.bookingFields.reduce((responses, field) => {
-        return {
-          ...responses,
-          [field.name]: parsedQuery[field.name],
-        };
-      }, {});
-      defaults.responses = {
-        ...responses,
-        name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
-        email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
-      };
-
-      return defaults;
-    }
-
-    if (!booking || !booking.attendees.length) {
-      return {};
-    }
-    const primaryAttendee = booking.attendees[0];
-    if (!primaryAttendee) {
-      return {};
-    }
-
-    const defaults = {
-      responses: {} as Partial<z.infer<typeof bookingFormSchema>["responses"]>,
-    };
-
-    const responses = eventType.bookingFields.reduce((responses, field) => {
-      return {
-        ...responses,
-        [field.name]: booking.responses[field.name],
-      };
-    }, {});
-    defaults.responses = {
-      ...responses,
-      name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
-      email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
-    };
-    return defaults;
-  };
-
-  const bookingFormSchema = z
-    .object({
-      responses: getBookingResponsesSchema({
-        eventType: { bookingFields: getBookingFieldsWithSystemFields(eventType) },
-        view: rescheduleUid ? "reschedule" : "booking",
-      }),
-    })
-    .passthrough();
-
-  type BookingFormValues = {
-    locationType?: EventLocationType["type"];
-    responses: z.infer<typeof bookingFormSchema>["responses"];
-  };
-
-  const bookingForm = useForm<BookingFormValues>({
-    defaultValues: defaultValues(),
-    resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
-  });
-
-  // Calculate the booking date(s)
-  let recurringStrings: string[] = [],
-    recurringDates: Date[] = [];
-  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
-    [recurringStrings, recurringDates] = parseRecurringDates(
-      {
-        startDate: date,
-        timeZone: timeZone(),
-        recurringEvent: eventType.recurringEvent,
-        recurringCount: parseInt(recurringEventCount.toString()),
-        selectedTimeFormat: timeFormat,
-      },
-      i18n.language
-    );
-  }
-
-  const bookEvent = (bookingValues: BookingFormValues) => {
-    telemetry.event(
-      top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
-      { isTeamBooking: document.URL.includes("team/") }
-    );
-    // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
-    // <...url>&metadata[user_id]=123 will be send as a custom input field as the hidden type.
-
-    // @TODO: move to metadata
-    const metadata = Object.keys(router.query)
-      .filter((key) => key.startsWith("metadata"))
-      .reduce(
-        (metadata, key) => ({
-          ...metadata,
-          [key.substring("metadata[".length, key.length - 1)]: router.query[key],
-        }),
-        {}
-      );
-
-    if (recurringDates.length) {
-      // Identify set of bookings to one intance of recurring event to support batch changes
-      const recurringEventId = uuidv4();
-      const recurringBookings = recurringDates.map((recurringDate) => ({
-        ...bookingValues,
-        start: dayjs(recurringDate).utc().format(),
-        end: dayjs(recurringDate).utc().add(duration, "minute").format(),
-        eventTypeId: eventType.id,
-        eventTypeSlug: eventType.slug,
-        recurringEventId,
-        // Added to track down the number of actual occurrences selected by the user
-        recurringCount: recurringDates.length,
-        timeZone: timeZone(),
-        language: i18n.language,
-        rescheduleUid,
-        user: router.query.user,
-        metadata,
-        hasHashedBookingLink,
-        hashedLink,
-      }));
-      recurringMutation.mutate(recurringBookings);
-    } else {
-      mutation.mutate({
-        ...bookingValues,
-        start: dayjs(date).utc().format(),
-        end: dayjs(date).utc().add(duration, "minute").format(),
-        eventTypeId: eventType.id,
-        eventTypeSlug: eventType.slug,
-        timeZone: timeZone(),
-        language: i18n.language,
-        rescheduleUid,
-        bookingUid: (router.query.bookingUid as string) || booking?.uid,
-        user: router.query.user,
-        metadata,
-        hasHashedBookingLink,
-        hashedLink,
-        seatReferenceUid: router.query.seatReferenceUid as string,
-      });
-    }
-  };
-
-  const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
-
-  return (
-    <>
-      <Head>
-        <title>
-          {rescheduleUid
-            ? t("booking_reschedule_confirmation", {
-                eventTypeTitle: eventType.title,
-                profileName: profile.name,
-              })
-            : t("booking_confirmation", {
-                eventTypeTitle: eventType.title,
-                profileName: profile.name,
-              })}{" "}
-          | {APP_NAME}
-        </title>
-        <link rel="icon" href="/favico.ico" />
-      </Head>
-      <BookingPageTagManager eventType={eventType} />
-      <main
-        className={classNames(
-          shouldAlignCentrally ? "mx-auto" : "",
-          isEmbed ? "" : "sm:my-24",
-          "my-0 max-w-3xl"
-        )}>
-        <div
-          className={classNames(
-            "main",
-            isBackgroundTransparent ? "" : "bg-default dark:bg-muted",
-            "border-booker sm:border-booker-width rounded-md"
-          )}>
-          <div className="sm:flex">
-            {showEventTypeDetails && (
-              <div className="sm:border-subtle text-default flex flex-col px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6">
-                <BookingDescription isBookingPage profile={profile} eventType={eventType}>
-                  <BookingDescriptionPayment eventType={eventType} t={t} i18n={i18n} />
-                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="text-default items-start text-sm font-medium">
-                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                      <p className="-ml-2 inline-block items-center px-2">
-                        {getEveryFreqFor({
-                          t,
-                          recurringEvent: eventType.recurringEvent,
-                          recurringCount: recurringEventCount,
-                        })}
-                      </p>
-                    </div>
-                  )}
-                  <div className="text-bookinghighlight flex items-start text-sm">
-                    <Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                    <div className="text-sm font-medium">
-                      {isClientTimezoneAvailable &&
-                        (rescheduleUid || !eventType.recurringEvent?.freq) &&
-                        `${parseDate(date, i18n.language, { selectedTimeFormat: timeFormat })}`}
-                      {isClientTimezoneAvailable &&
-                        !rescheduleUid &&
-                        eventType.recurringEvent?.freq &&
-                        recurringStrings.slice(0, 5).map((timeFormatted, key) => {
-                          return <p key={key}>{timeFormatted}</p>;
-                        })}
-                      {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
-                        <div className="flex">
-                          <Tooltip
-                            content={recurringStrings.slice(5).map((timeFormatted, key) => (
-                              <p key={key}>{timeFormatted}</p>
-                            ))}>
-                            <p className=" text-sm">
-                              + {t("plus_more", { count: recurringStrings.length - 5 })}
-                            </p>
-                          </Tooltip>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  {booking?.startTime && rescheduleUid && (
-                    <div>
-                      <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
-                        {t("former_time")}
-                      </p>
-                      <p className="line-through ">
-                        <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
-                        {isClientTimezoneAvailable &&
-                          typeof booking.startTime === "string" &&
-                          parseDateTimeWithTimeZone(booking.startTime, i18n.language, timezone, {
-                            selectedTimeFormat: timeFormat,
-                          })}
-                      </p>
-                    </div>
-                  )}
-                  {!!eventType.seatsPerTimeSlot && (
-                    <div className="text-bookinghighlight flex items-start text-sm">
-                      <User
-                        className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
-                          currentSlotBooking &&
-                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                            ? "text-rose-600"
-                            : currentSlotBooking &&
-                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                            ? "text-yellow-500"
-                            : "text-bookinghighlight"
-                        }`}
-                      />
-                      <p
-                        className={`${
-                          currentSlotBooking &&
-                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                            ? "text-rose-600"
-                            : currentSlotBooking &&
-                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                            ? "text-yellow-500"
-                            : "text-bookinghighlight"
-                        } mb-2 font-medium`}>
-                        {currentSlotBooking
-                          ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
-                          : eventType.seatsPerTimeSlot}{" "}
-                        / {eventType.seatsPerTimeSlot}{" "}
-                        {t("seats_available", {
-                          count: currentSlotBooking
-                            ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
-                            : eventType.seatsPerTimeSlot,
-                        })}
-                      </p>
-                    </div>
-                  )}
-                </BookingDescription>
-              </div>
-            )}
-            <div className={classNames("p-6", showEventTypeDetails ? "sm:w-1/2" : "w-full")}>
-              <Form form={bookingForm} noValidate handleSubmit={bookEvent}>
-                <BookingFields
-                  isDynamicGroupBooking={isDynamicGroupBooking}
-                  fields={eventType.bookingFields}
-                  locations={locations}
-                  rescheduleUid={rescheduleUid}
-                />
-
-                <div
-                  className={classNames(
-                    "flex justify-end space-x-2 rtl:space-x-reverse",
-                    // HACK: If the last field is guests, we need to move Cancel, Submit buttons up because "Add Guests" being present on the left and the buttons on the right, spacing is not required
-                    eventType.bookingFields[eventType.bookingFields.length - 1].name ===
-                      SystemField.Enum.guests
-                      ? "-mt-4"
-                      : ""
-                  )}>
-                  <Button color="minimal" type="button" onClick={() => router.back()}>
-                    {t("cancel")}
-                  </Button>
-                  <Button
-                    type="submit"
-                    data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
-                    loading={mutation.isLoading || recurringMutation.isLoading}>
-                    {rescheduleUid ? t("reschedule") : t("confirm")}
-                  </Button>
-                </div>
-              </Form>
-              {mutation.isError || recurringMutation.isError ? (
-                <ErrorMessage error={mutation.error || recurringMutation.error} />
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </main>
-      <Toaster position="bottom-right" />
-    </>
-  );
-};
-
-export default BookingPage;
-
-function ErrorMessage({ error }: { error: unknown }) {
-  const { t } = useLocale();
-  const { query: { rescheduleUid } = {} } = useRouter();
-  const router = useRouter();
-
-  return (
-    <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
-      <div className="flex">
-        <div className="flex-shrink-0">
-          <AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
-        </div>
-        <div className="ms-3">
-          <p className="text-sm text-blue-700">
-            {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
-            {error instanceof HttpError || error instanceof Error ? (
-              <>
-                {t("can_you_try_again")}{" "}
-                <span className="cursor-pointer underline" onClick={() => router.back()}>
-                  {t("go_back")}
-                </span>
-                .
-              </> /* t(error.message) */
-            ) : (
-              "Unknown error"
-            )}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -13,6 +13,7 @@ import {
   getHumanReadableLocationValue,
   getMessageForOrganizer,
   LocationType,
+  OrganizerDefaultConferencingAppType,
 } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -33,12 +34,12 @@ interface ISetLocationDialog {
   saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: LocationOption;
   booking?: BookingItem;
-  isTeamEvent?: boolean;
   defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
   setSelectedLocation?: (param: LocationOption | undefined) => void;
   setEditingLocationType?: (param: string) => void;
+  teamId?: number;
 }
 
 const LocationInput = (props: {
@@ -78,15 +79,15 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     saveLocation,
     selection,
     booking,
-    isTeamEvent,
     setShowLocationModal,
     isOpenDialog,
     defaultValues,
     setSelectedLocation,
     setEditingLocationType,
+    teamId,
   } = props;
   const { t } = useLocale();
-  const locationsQuery = trpc.viewer.locationOptions.useQuery();
+  const locationsQuery = trpc.viewer.locationOptions.useQuery({ teamId });
 
   useEffect(() => {
     if (selection) {
@@ -102,6 +103,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     locationType: z.string(),
     phone: z.string().optional().nullable(),
     locationAddress: z.string().optional(),
+    credentialId: z.number().optional(),
+    teamName: z.string().optional(),
     locationLink: z
       .string()
       .optional()
@@ -172,8 +175,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     }
   );
 
-  console.log(defaultLocation);
-
   const LocationOptions = (() => {
     if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
       if (!eventLocationType.variable) {
@@ -259,7 +260,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
             {booking && (
               <>
-                <p className="text-emphasis mt-6 mb-2 ml-1 text-sm font-bold">{t("current_location")}:</p>
+                <p className="text-emphasis mb-2 ml-1 mt-6 text-sm font-bold">{t("current_location")}:</p>
                 <p className="text-emphasis mb-2 ml-1 text-sm">
                   {getHumanReadableLocationValue(booking.location, t)}
                 </p>
@@ -297,6 +298,20 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                   };
                 }
 
+                if (values.credentialId) {
+                  details = {
+                    ...details,
+                    credentialId: values.credentialId,
+                  };
+                }
+
+                if (values.teamName) {
+                  details = {
+                    ...details,
+                    teamName: values.teamName,
+                  };
+                }
+
                 saveLocation(newLocation, details);
                 setShowLocationModal(false);
                 setSelectedLocation?.(undefined);
@@ -311,8 +326,15 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 query={locationsQuery}
                 success={({ data }) => {
                   if (!data.length) return null;
-                  const locationOptions = [...data].filter((option) => {
-                    return !isTeamEvent ? option.label !== "Conferencing" : true;
+                  const locationOptions = [...data].map((option) => {
+                    if (teamId) {
+                      // Let host's Default conferencing App option show for Team Event
+                      return option;
+                    }
+                    return {
+                      ...option,
+                      options: option.options.filter((o) => o.value !== OrganizerDefaultConferencingAppType),
+                    };
                   });
                   if (booking) {
                     locationOptions.map((location) =>
@@ -334,6 +356,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                             onChange={(val) => {
                               if (val) {
                                 locationFormMethods.setValue("locationType", val.value);
+                                if (val.credential) {
+                                  locationFormMethods.setValue("credentialId", val.credential.id);
+                                  locationFormMethods.setValue("teamName", val.credential.team?.name);
+                                }
+
                                 locationFormMethods.unregister([
                                   "locationLink",
                                   "locationAddress",

apps/web/components/dialog/RescheduleDialog.tsx

@@ -49,7 +49,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
             <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
-            <p className="text-emphasis mt-6 mb-2 text-sm font-bold">
+            <p className="text-emphasis mb-2 mt-6 text-sm font-bold">
               {t("reason_for_reschedule_request")}
               <span className="text-subtle font-normal"> (Optional)</span>
             </p>

apps/web/components/error/error-page.tsx

@@ -35,7 +35,7 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = (
           {debugMap.map(([key, value]) => {
             if (value !== undefined) {
               return (
-                <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+                <div key={key} className="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
                   <dt className="text-emphasis text-sm font-bold">{key}</dt>
                   <dd className="text-emphasis mt-1 text-sm sm:col-span-2 sm:mt-0">{value}</dd>
                 </div>

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -84,7 +84,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
             backgroundImage: "url(/calendar-preview.svg)",
           }}>
           <div className="m-auto flex items-center justify-center self-stretch">
-            <div className="bg-subtle mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
+            <div className="bg-subtle ml-11 mt-3 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black text-[12px] leading-3">
               <p className="text-emphasis overflow-hidden text-ellipsis p-1.5 font-medium">{previewText}</p>
               <p className="text-default ml-1.5 text-[10px] font-normal">8 - 10 AM</p>
             </div>

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
+import type { z } from "zod";
 
 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
@@ -16,14 +17,24 @@ import {
   allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
+import type { EditableSchema } from "@calcom/features/form-builder/schema";
 import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
-import { Edit, Copy } from "@calcom/ui/components/icon";
+import {
+  Alert,
+  Button,
+  CheckboxField,
+  Label,
+  SettingsToggle,
+  showToast,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
+import { Copy, Edit } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -38,6 +49,7 @@ const generateHashedLink = (id: number) => {
 
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
+  const { data: user } = trpc.viewer.me.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
 
@@ -49,6 +61,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const bookingFields: Prisma.JsonObject = {};
 
   const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
+  const selectedThemeIsDark =
+    user?.theme === "dark" ||
+    (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
 
   eventType.bookingFields.forEach(({ name }) => {
     bookingFields[name] = name + " input";
@@ -81,6 +96,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           return {
             ...field,
             hidden: !enabled,
+            editable: (!enabled ? "system-but-hidden" : "system-but-optional") as z.infer<
+              typeof EditableSchema
+            >,
           };
         }
         return field;
@@ -153,7 +171,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               color="minimal"
               size="sm"
               aria-label="edit custom name"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+              className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
               onClick={() => setShowEventNameTip((old) => !old)}>
               <Edit className="h-4 w-4" />
             </Button>
@@ -162,7 +180,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       </div>
       <hr className="border-subtle [&:has(+div:empty)]:hidden" />
       <div>
-        <BookerLayoutSelector fallbackToUserSettings />
+        <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
       </div>
       <hr className="border-subtle" />
       <FormBuilder
@@ -186,6 +204,21 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         onRequiresConfirmation={setRequiresConfirmation}
       />
       <hr className="border-subtle" />
+      <Controller
+        name="requiresBookerEmailVerification"
+        control={formMethods.control}
+        defaultValue={eventType.requiresBookerEmailVerification}
+        render={({ field: { value, onChange } }) => (
+          <SettingsToggle
+            title={t("requires_booker_email_verification")}
+            {...shouldLockDisableProps("requiresBookerEmailVerification")}
+            description={t("description_requires_booker_email_verification")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+          />
+        )}
+      />
+      <hr className="border-subtle" />
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
@@ -216,7 +249,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 onChange(e ? value : "");
               }}>
               {/* Textfield has some margin by default we remove that so we can keep consistent alignment */}
-              <div className="lg:-ml-2 lg:-mb-2">
+              <div className="lg:-mb-2 lg:-ml-2">
                 <TextField
                   className="w-full"
                   label={t("redirect_success_booking")}
@@ -268,7 +301,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   color="minimal"
                   size="sm"
                   type="button"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 !py-0 hover:bg-transparent"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
                   aria-label="copy link"
                   onClick={() => {
                     navigator.clipboard.writeText(placeholderHashedLink);
@@ -333,7 +366,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                       }}
                     />
                     <div className="mt-2">
-                      <Checkbox
+                      <CheckboxField
                         description={t("show_attendees")}
                         disabled={seatsLocked.disabled}
                         onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -1,3 +1,5 @@
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useFormContext } from "react-hook-form";
 
@@ -16,12 +18,16 @@ export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
 
 export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
   const { t } = useLocale();
-  const { data: eventTypeApps, isLoading } = trpc.viewer.apps.useQuery({
+  const { data: eventTypeApps, isLoading } = trpc.viewer.integrations.useQuery({
     extendsFeature: "EventType",
+    teamId: eventType.team?.id || eventType.parent?.teamId,
   });
+
   const methods = useFormContext<FormValues>();
-  const installedApps = eventTypeApps?.filter((app) => app.credentials.length);
-  const notInstalledApps = eventTypeApps?.filter((app) => !app.credentials.length);
+  const installedApps =
+    eventTypeApps?.items.filter((app) => app.userCredentialIds.length || app.teams.length) || [];
+  const notInstalledApps =
+    eventTypeApps?.items.filter((app) => !app.userCredentialIds.length && !app.teams.length) || [];
   const allAppsData = methods.watch("metadata")?.apps || {};
 
   const setAllAppsData = (_allAppsData: typeof allAppsData) => {
@@ -62,11 +68,54 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     t("locked_fields_member_description")
   );
 
+  const appsWithTeamCredentials = eventTypeApps?.items.filter((app) => app.teams.length) || [];
+  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
+    const appCards = [];
+
+    if (app.userCredentialIds.length) {
+      appCards.push(
+        <EventTypeAppCard
+          getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+          setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+          key={app.slug}
+          app={app}
+          eventType={eventType}
+          {...shouldLockDisableProps("apps")}
+        />
+      );
+    }
+
+    for (const team of app.teams) {
+      if (team) {
+        appCards.push(
+          <EventTypeAppCard
+            getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+            setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+            key={app.slug + team?.credentialId}
+            app={{
+              ...app,
+              // credentialIds: team?.credentialId ? [team.credentialId] : [],
+              credentialOwner: {
+                name: team.name,
+                avatar: team.logo,
+                teamId: team.teamId,
+                credentialId: team.credentialId,
+              },
+            }}
+            eventType={eventType}
+            {...shouldLockDisableProps("apps")}
+          />
+        );
+      }
+    }
+    return appCards;
+  });
+
   return (
     <>
       <div>
         <div className="before:border-0">
-          {!installedApps?.length && isManagedEventType && (
+          {isManagedEventType && (
             <Alert
               severity="neutral"
               className="mb-2"
@@ -92,23 +141,40 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               }
             />
           ) : null}
-          {installedApps?.map((app) => (
-            <EventTypeAppCard
-              getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-              setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
-              key={app.slug}
-              app={app}
-              eventType={eventType}
-            />
-          ))}
+          {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
+          {installedApps.map((app) => {
+            if (!app.teams.length)
+              return (
+                <EventTypeAppCard
+                  getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
+                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                  key={app.slug}
+                  app={app}
+                  eventType={eventType}
+                  {...shouldLockDisableProps("apps")}
+                />
+              );
+          })}
         </div>
       </div>
       {!shouldLockDisableProps("apps").disabled && (
         <div className="bg-muted rounded-md p-8">
           {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
+            <>
+              <h2 className="text-emphasis mb-2 text-xl font-semibold leading-5 tracking-[0.01em]">
+                {t("available_apps_lower_case")}
+              </h2>
+              <p className="text-default mb-6 text-sm font-normal">
+                <Trans i18nKey="available_apps_desc">
+                  You have no apps installed. View popular apps below and explore more in our &nbsp;
+                  <Link className="cursor-pointer underline" href="/apps">
+                    App Store
+                  </Link>
+                </Trans>
+              </p>
+            </>
           ) : null}
-          <div className="before:border-0">
+          <div className="bg-default border-subtle divide-subtle divide-y rounded-md border before:border-0">
             {notInstalledApps?.map((app) => (
               <EventTypeAppCard
                 getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}

apps/web/components/eventtype/EventAvailabilityTab.tsx

@@ -1,5 +1,5 @@
 import type { EventTypeSetup, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
+import { useState, memo } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
@@ -71,86 +71,91 @@ const format = (date: Date, hour12: boolean) =>
     hourCycle: hour12 ? "h12" : "h24",
   }).format(new Date(dayjs.utc(date).format("YYYY-MM-DDTHH:mm:ss")));
 
-const EventTypeScheduleDetails = ({
-  isManagedEventType,
-  selectedScheduleValue,
-}: {
-  isManagedEventType: boolean;
-  selectedScheduleValue: AvailabilityOption | undefined;
-}) => {
-  const { data: loggedInUser } = useMeQuery();
-  const timeFormat = loggedInUser?.timeFormat;
-  const { t, i18n } = useLocale();
-  const { watch } = useFormContext<FormValues>();
+const EventTypeScheduleDetails = memo(
+  ({
+    isManagedEventType,
+    selectedScheduleValue,
+  }: {
+    isManagedEventType: boolean;
+    selectedScheduleValue: AvailabilityOption | undefined;
+  }) => {
+    const { data: loggedInUser } = useMeQuery();
+    const timeFormat = loggedInUser?.timeFormat;
+    const { t, i18n } = useLocale();
+    const { watch } = useFormContext<FormValues>();
 
-  const scheduleId = watch("schedule");
-  const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
-    {
-      scheduleId: scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
-      isManagedEventType,
-    },
-    { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
-  );
+    const scheduleId = watch("schedule");
+    const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
+      {
+        scheduleId:
+          scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
+        isManagedEventType,
+      },
+      { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId || !!selectedScheduleValue }
+    );
 
-  const filterDays = (dayNum: number) =>
-    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+    const filterDays = (dayNum: number) =>
+      schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
-  return (
-    <div className="border-default space-y-4 rounded border px-6 pb-4">
-      <ol className="table border-collapse text-sm">
-        {weekdayNames(i18n.language, 1, "long").map((day, index) => {
-          const isAvailable = !!filterDays(index).length;
-          return (
-            <li key={day} className="my-6 flex border-transparent last:mb-2">
-              <span
-                className={classNames(
-                  "w-20 font-medium sm:w-32 ",
-                  !isAvailable ? "text-subtle line-through" : "text-default"
-                )}>
-                {day}
-              </span>
-              {isLoading ? (
-                <SkeletonText className="block h-5 w-60" />
-              ) : isAvailable ? (
-                <div className="space-y-3 text-right">
-                  {filterDays(index).map((dayRange, i) => (
-                    <div key={i} className="text-default flex items-center leading-4">
-                      <span className="w-16 sm:w-28 sm:text-left">
-                        {format(dayRange.startTime, timeFormat === 12)}
-                      </span>
-                      <span className="ms-4">-</span>
-                      <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-      <hr className="border-subtle" />
-      <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
-        <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-          <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
-          {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
-        </span>
-        {!!schedule?.id && !schedule.isManaged && (
-          <Button
-            href={`/availability/${schedule.id}`}
-            disabled={isLoading}
-            color="minimal"
-            EndIcon={ExternalLink}
-            target="_blank"
-            rel="noopener noreferrer">
-            {t("edit_availability")}
-          </Button>
-        )}
+    return (
+      <div className="border-default space-y-4 rounded border px-6 pb-4">
+        <ol className="table border-collapse text-sm">
+          {weekdayNames(i18n.language, 1, "long").map((day, index) => {
+            const isAvailable = !!filterDays(index).length;
+            return (
+              <li key={day} className="my-6 flex border-transparent last:mb-2">
+                <span
+                  className={classNames(
+                    "w-20 font-medium sm:w-32 ",
+                    !isAvailable ? "text-subtle line-through" : "text-default"
+                  )}>
+                  {day}
+                </span>
+                {isLoading ? (
+                  <SkeletonText className="block h-5 w-60" />
+                ) : isAvailable ? (
+                  <div className="space-y-3 text-right">
+                    {filterDays(index).map((dayRange, i) => (
+                      <div key={i} className="text-default flex items-center leading-4">
+                        <span className="w-16 sm:w-28 sm:text-left">
+                          {format(dayRange.startTime, timeFormat === 12)}
+                        </span>
+                        <span className="ms-4">-</span>
+                        <div className="ml-6 sm:w-28">{format(dayRange.endTime, timeFormat === 12)}</div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <span className="text-subtle ml-6 sm:ml-0">{t("unavailable")}</span>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+        <hr className="border-subtle" />
+        <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
+          <span className="text-default flex items-center justify-center text-sm sm:justify-start">
+            <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
+            {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
+          </span>
+          {!!schedule?.id && !schedule.isManaged && (
+            <Button
+              href={`/availability/${schedule.id}`}
+              disabled={isLoading}
+              color="minimal"
+              EndIcon={ExternalLink}
+              target="_blank"
+              rel="noopener noreferrer">
+              {t("edit_availability")}
+            </Button>
+          )}
+        </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
+
+EventTypeScheduleDetails.displayName = "EventTypeScheduleDetails";
 
 const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
   const { t } = useLocale();

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -13,6 +13,7 @@ import type { DurationType } from "@calcom/lib/convertToNewDurationType";
 import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { ascendingLimitKeys, intervalLimitKeyToUnit } from "@calcom/lib/intervalLimit";
 import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
@@ -171,7 +172,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   return (
     <div className="space-y-8">
       <div className="space-y-4 lg:space-y-8">
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="beforeBufferTime">
               {t("before_event")}
@@ -245,7 +246,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
             />
           </div>
         </div>
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
+        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
           <div className="w-full">
             <Label htmlFor="minimumBookingNotice">
               {t("minimum_booking_notice")}
@@ -416,7 +417,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                       </div>
                     )}
                     {period.type === "RANGE" && (
-                      <div className="ms-2 me-2 inline-flex space-x-2 rtl:space-x-reverse">
+                      <div className="me-2 ms-2 inline-flex space-x-2 rtl:space-x-reverse">
                         <Controller
                           name="periodDates"
                           control={formMethods.control}
@@ -437,7 +438,7 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                         />
                       </div>
                     )}
-                    {period.suffix ? <span className="ms-2 me-2">&nbsp;{period.suffix}</span> : null}
+                    {period.suffix ? <span className="me-2 ms-2">&nbsp;{period.suffix}</span> : null}
                   </div>
                 );
               })}
@@ -462,7 +463,6 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           type="number"
           {...offsetStartLockedProps}
           label={t("offset_start")}
-          defaultValue={eventType.offsetStart}
           {...formMethods.register("offsetStart")}
           addOnSuffix={<>{t("minutes")}</>}
           hint={t("offset_start_description", {
@@ -477,11 +477,9 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
 
 type IntervalLimitsKey = keyof IntervalLimit;
 
-const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const;
-
-const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({
+const INTERVAL_LIMIT_OPTIONS = ascendingLimitKeys.map((key) => ({
   value: key as keyof IntervalLimit,
-  label: `Per ${key.split("_")[1].toLocaleLowerCase()}`,
+  label: `Per ${intervalLimitKeyToUnit(key)}`,
 }));
 
 type IntervalLimitItemProps = {
@@ -590,8 +588,8 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
               Object.entries(currentIntervalLimits)
                 .sort(([limitKeyA], [limitKeyB]) => {
                   return (
-                    intervalOrderKeys.indexOf(limitKeyA as IntervalLimitsKey) -
-                    intervalOrderKeys.indexOf(limitKeyB as IntervalLimitsKey)
+                    ascendingLimitKeys.indexOf(limitKeyA as IntervalLimitsKey) -
+                    ascendingLimitKeys.indexOf(limitKeyB as IntervalLimitsKey)
                   );
                 })
                 .map(([key, value]) => {

apps/web/components/eventtype/EventSetupTab.tsx

@@ -117,8 +117,16 @@ export const EventSetupTab = (
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata?.multipleDuration);
 
-  const locationOptions = props.locationOptions.filter((option) => {
-    return !team ? option.label !== "Conferencing" : true;
+  const locationOptions = props.locationOptions.map((locationOption) => {
+    const options = locationOption.options.filter((option) => {
+      // Skip "Organizer's Default App" for non-team members
+      return !team ? option.label !== t("organizer_default_conferencing_app") : true;
+    });
+
+    return {
+      ...locationOption,
+      options,
+    };
   });
 
   const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
@@ -284,7 +292,7 @@ export const EventSetupTab = (
               return (
                 <li
                   key={`${location.type}${index}`}
-                  className="border-default text-default mb-2 h-9 rounded-md border py-1.5 px-2 hover:cursor-pointer">
+                  className="border-default text-default mb-2 h-9 rounded-md border px-2 py-1.5 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -298,7 +306,9 @@ export const EventSetupTab = (
                         )}
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="line-clamp-1 ms-1 text-sm">{eventLabel}</span>
+                      <span className="ms-1 line-clamp-1 text-sm">{`${eventLabel} ${
+                        location.teamName ? `(${location.teamName})` : ""
+                      }`}</span>
                     </div>
                     <div className="flex">
                       <button
@@ -332,7 +342,7 @@ export const EventSetupTab = (
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
               <div className="text-default flex text-sm">
-                <Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <Check className="mr-1.5 mt-0.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
                     The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@@ -522,7 +532,6 @@ export const EventSetupTab = (
 
       {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
       <EditLocationDialog
-        isTeamEvent={!!team}
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
         saveLocation={saveLocation}
@@ -545,6 +554,7 @@ export const EventSetupTab = (
         }
         setSelectedLocation={setSelectedLocation}
         setEditingLocationType={setEditingLocationType}
+        teamId={eventType.team?.id}
       />
     </div>
   );

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,3 +1,5 @@
+import { Trans } from "next-i18next";
+import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
@@ -19,16 +21,17 @@ interface IUserToValue {
   email: string;
 }
 
-const mapUserToValue = ({ id, name, username, email }: IUserToValue) => ({
+const mapUserToValue = ({ id, name, username, email }: IUserToValue, pendingString: string) => ({
   value: `${id || ""}`,
-  label: `${name || ""}`,
+  label: `${name || email || ""}${!username ? ` (${pendingString})` : ""}`,
   avatar: `${WEBAPP_URL}/${username}/avatar.png`,
   email,
 });
 
 export const mapMemberToChildrenOption = (
   member: EventTypeSetupProps["teamMembers"][number],
-  slug: string
+  slug: string,
+  pendingString: string
 ) => {
   return {
     slug,
@@ -43,7 +46,7 @@ export const mapMemberToChildrenOption = (
       eventTypeSlugs: member.eventTypes ?? [],
     },
     value: `${member.id ?? ""}`,
-    label: member.name ?? "",
+    label: `${member.name || member.email || ""}${!member.username ? ` (${pendingString})` : ""}`,
   };
 };
 
@@ -98,6 +101,7 @@ const CheckedHostField = ({
   isFixed,
   value,
   onChange,
+  helperText,
   ...rest
 }: {
   labelText: string;
@@ -106,6 +110,7 @@ const CheckedHostField = ({
   value: { isFixed: boolean; userId: number }[];
   onChange?: (options: { isFixed: boolean; userId: number }[]) => void;
   options?: Options<CheckedSelectOption>;
+  helperText?: React.ReactNode | string;
 } & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
     <div className="bg-muted flex flex-col space-y-5 p-4">
@@ -135,11 +140,24 @@ const CheckedHostField = ({
           placeholder={placeholder}
           {...rest}
         />
+        {helperText && <p className="text-subtle text-sm">{helperText}</p>}
       </div>
     </div>
   );
 };
 
+const FixedHostHelper = (
+  <Trans i18nKey="fixed_host_helper">
+    Add anyone who needs to attend the event.
+    <Link
+      className="underline underline-offset-2"
+      target="_blank"
+      href="https://cal.com/docs/enterprise-features/teams/round-robin-scheduling#fixed-hosts">
+      Learn more
+    </Link>
+  </Trans>
+);
+
 const RoundRobinHosts = ({
   teamMembers,
   value,
@@ -166,6 +184,7 @@ const RoundRobinHosts = ({
         value={value}
         placeholder={t("add_fixed_hosts")}
         labelText={t("fixed_hosts")}
+        helperText={FixedHostHelper}
       />
       <CheckedHostField
         options={teamMembers.sort(sortByLabel)}
@@ -174,6 +193,7 @@ const RoundRobinHosts = ({
         isFixed={false}
         placeholder={t("add_attendees")}
         labelText={t("round_robin_hosts")}
+        helperText={t("round_robin_helper")}
       />
     </>
   );
@@ -291,9 +311,13 @@ export const EventTeamTab = ({
       // description: t("round_robin_description"),
     },
   ];
-  const teamMembersOptions = teamMembers.map(mapUserToValue);
-  const childrenEventTypeOptions = teamMembers.map((member) => {
-    return mapMemberToChildrenOption(member, eventType.slug);
+  const pendingMembers = (member: (typeof teamMembers)[number]) =>
+    !!eventType.team?.parentId || !!member.username;
+  const teamMembersOptions = teamMembers
+    .filter(pendingMembers)
+    .map((member) => mapUserToValue(member, t("pending")));
+  const childrenEventTypeOptions = teamMembers.filter(pendingMembers).map((member) => {
+    return mapMemberToChildrenOption(member, eventType.slug, t("pending"));
   });
   const isManagedEventType = eventType.schedulingType === SchedulingType.MANAGED;
   return (

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -1,12 +1,14 @@
 import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { EventTypeEmbedButton, EventTypeEmbedDialog } from "@calcom/features/embed/EventTypeEmbed";
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -50,7 +52,6 @@ import {
   Loader,
 } from "@calcom/ui/components/icon";
 
-import { EmbedButton, EmbedDialog } from "@components/Embed";
 import type { AvailabilityOption } from "@components/eventtype/EventAvailabilityTab";
 
 type Props = {
@@ -147,7 +148,7 @@ function EventTypeSingleLayout({
     onSuccess: async () => {
       await utils.viewer.eventTypes.invalidate();
       showToast(t("event_type_deleted_successfully"), "success");
-      await router.push("/event-types");
+      router.push("/event-types");
       setDeleteDialogOpen(false);
     },
     onError: (err) => {
@@ -208,10 +209,8 @@ function EventTypeSingleLayout({
         }`,
       });
     }
-    if (isManagedEventType || isChildrenManagedEventType) {
-      // Removing apps and workflows for manageg event types by admins v1
-      navigation.splice(-2, 1);
-    } else {
+    const showWebhooks = !(isManagedEventType || isChildrenManagedEventType);
+    if (showWebhooks) {
       navigation.push({
         name: "webhooks",
         href: `/event-types/${eventType.id}?tabName=webhooks`,
@@ -233,9 +232,11 @@ function EventTypeSingleLayout({
     formMethods,
   ]);
 
-  const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
-    eventType.slug
-  }`;
+  const orgBranding = useOrgBranding();
+  const isOrgEvent = orgBranding?.fullDomain;
+  const permalink = `${orgBranding?.fullDomain ?? CAL_URL}/${
+    team ? `${!isOrgEvent ? "team/" : ""}${team.slug}` : eventType.users[0].username
+  }/${eventType.slug}`;
 
   const embedLink = `${team ? `team/${team.slug}` : eventType.users[0].username}/${eventType.slug}`;
   const isManagedEvent = eventType.schedulingType === SchedulingType.MANAGED ? "_managed" : "";
@@ -309,12 +310,13 @@ function EventTypeSingleLayout({
                     showToast("Link copied!", "success");
                   }}
                 />
-                <EmbedButton
+                <EventTypeEmbedButton
                   embedUrl={encodeURIComponent(embedLink)}
                   StartIcon={Code}
                   color="secondary"
                   variant="icon"
                   tooltip={t("embed")}
+                  eventId={eventType.id}
                 />
               </>
             )}
@@ -369,7 +371,7 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
+              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between px-4 py-2">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
@@ -404,13 +406,13 @@ function EventTypeSingleLayout({
               className="primary-navigation"
               tabs={EventTypeTabs}
               sticky
-              linkProps={{ shallow: true }}
+              linkShallow
               itemClassname="items-start"
               iconClassName="md:mt-px"
             />
           </div>
           <div className="p-2 md:mx-0 md:p-0 xl:hidden">
-            <HorizontalTabs tabs={EventTypeTabs} linkProps={{ shallow: true }} />
+            <HorizontalTabs tabs={EventTypeTabs} linkShallow />
           </div>
           <div className="w-full ltr:mr-2 rtl:ml-2">
             <div
@@ -448,7 +450,7 @@ function EventTypeSingleLayout({
           </p>
         </ConfirmationDialogContent>
       </Dialog>
-      <EmbedDialog />
+      <EventTypeEmbedDialog />
     </Shell>
   );
 }

apps/web/components/eventtype/ManagedEventDialog.tsx

@@ -0,0 +1,52 @@
+import { Trans } from "next-i18next";
+
+import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { ConfirmationDialogContent, Dialog } from "@calcom/ui";
+
+interface ManagedEventDialogProps {
+  slugExistsChildrenDialogOpen: ChildrenEventType[];
+  slug: string;
+  onOpenChange: () => void;
+  isLoading: boolean;
+  onConfirm: (e: { preventDefault: () => void }) => void;
+}
+
+export default function ManagedEventDialog(props: ManagedEventDialogProps) {
+  const { t } = useLocale();
+  const { slugExistsChildrenDialogOpen, slug, onOpenChange, isLoading, onConfirm } = props;
+
+  return (
+    <Dialog open={slugExistsChildrenDialogOpen.length > 0} onOpenChange={onOpenChange}>
+      <ConfirmationDialogContent
+        isLoading={isLoading}
+        variety="warning"
+        title={t("managed_event_dialog_title", {
+          slug,
+          count: slugExistsChildrenDialogOpen.length,
+        })}
+        confirmBtnText={t("managed_event_dialog_confirm_button", {
+          count: slugExistsChildrenDialogOpen.length,
+        })}
+        cancelBtnText={t("go_back")}
+        onConfirm={onConfirm}>
+        <p className="mt-5">
+          <Trans
+            i18nKey="managed_event_dialog_information"
+            values={{
+              names: `${slugExistsChildrenDialogOpen
+                .map((ch) => ch.owner.name)
+                .slice(0, -1)
+                .join(", ")} ${
+                slugExistsChildrenDialogOpen.length > 1 ? t("and") : ""
+              } ${slugExistsChildrenDialogOpen.map((ch) => ch.owner.name).slice(-1)}`,
+              slug,
+            }}
+            count={slugExistsChildrenDialogOpen.length}
+          />
+        </p>{" "}
+        <p className="mt-5">{t("managed_event_dialog_clarification")}</p>
+      </ConfirmationDialogContent>
+    </Dialog>
+  );
+}

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <Clock className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <User className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -28,6 +28,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
             color="secondary"
             disabled={installed}
             type="button"
+            loading={buttonProps?.isLoading}
             onClick={(event) => {
               // Save cookie key to return url step
               document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -17,7 +17,11 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
   const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true });
   const { t } = useLocale();
-  const queryIntegrations = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
+  const queryIntegrations = trpc.viewer.integrations.useQuery({
+    variant: "calendar",
+    onlyInstalled: false,
+    sortByMostPopular: true,
+  });
 
   const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
     (item) => item.calendars && item.calendars?.length > 0

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -16,11 +16,12 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
   const { data: queryConnectedVideoApps, isLoading } = trpc.viewer.integrations.useQuery({
     variant: "conferencing",
     onlyInstalled: false,
+    sortByMostPopular: true,
   });
   const { t } = useLocale();
 
   const hasAnyInstalledVideoApps = queryConnectedVideoApps?.items.some(
-    (item) => item.credentialIds.length > 0
+    (item) => item.userCredentialIds.length > 0
   );
 
   return (
@@ -38,7 +39,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
                       title={item.name}
                       description={item.description}
                       logo={item.logo}
-                      installed={item.credentialIds.length > 0}
+                      installed={item.userCredentialIds.length > 0}
                     />
                   )}
                 </li>

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 
 import { Schedule } from "@calcom/features/schedules";
@@ -21,16 +20,12 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
   const { t } = useLocale();
   const { nextStep } = props;
 
-  const router = useRouter();
-  let queryAvailability;
-  if (defaultScheduleId) {
-    queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
-      { scheduleId: defaultScheduleId },
-      {
-        enabled: router.isReady,
-      }
-    );
-  }
+  const queryAvailability = trpc.viewer.availability.schedule.get.useQuery(
+    { scheduleId: defaultScheduleId! },
+    {
+      enabled: !!defaultScheduleId,
+    }
+  );
 
   const availabilityForm = useForm({
     defaultValues: {

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -15,6 +15,7 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
 interface IUserSettingsProps {
   nextStep: () => void;
+  hideUsername?: boolean;
 }
 
 const UserSettings = (props: IUserSettingsProps) => {
@@ -66,8 +67,8 @@ const UserSettings = (props: IUserSettingsProps) => {
   return (
     <form onSubmit={onSubmit}>
       <div className="space-y-6">
-        {/* Username textfield */}
-        <UsernameAvailabilityField />
+        {/* Username textfield: when not coming from signup */}
+        {!props.hideUsername && <UsernameAvailabilityField />}
 
         {/* Full name textfield */}
         <div className="w-full">

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
+import { Button, Dialog, DialogContent, Form, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
@@ -75,14 +75,12 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
               {...form.register("password")}
               className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
             />
-            <Label className="mt-4"> {t("2fa_code")}</Label>
-
             <TwoFactor center={false} />
             {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ms-2 me-2" disabled={isDisabling}>
+            <Button type="submit" className="me-2 ms-2" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>

apps/web/components/security/DisableUserImpersonation.tsx

@@ -19,7 +19,7 @@ const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonati
 
   return (
     <>
-      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-emphasis text-lg font-medium leading-6">

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,8 +1,9 @@
 import type { BaseSyntheticEvent } from "react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { useCallbackRef } from "@calcom/lib/hooks/useCallbackRef";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 
@@ -127,6 +128,17 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
     }
   }
 
+  const handleEnableRef = useCallbackRef(handleEnable);
+
+  const totpCode = form.watch("totpCode");
+
+  // auto submit 2FA if all inputs have a value
+  useEffect(() => {
+    if (totpCode?.trim().length === 6) {
+      form.handleSubmit(handleEnableRef.current)();
+    }
+  }, [form, handleEnableRef, totpCode]);
+
   return (
     <Dialog open={true}>
       <DialogContent>
@@ -178,19 +190,19 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <WithStep step={SetupStep.ConfirmPassword} current={step}>
               <Button
                 type="submit"
-                className="ms-2 me-2"
+                className="me-2 ms-2"
                 onClick={handleSetup}
                 disabled={password.length === 0 || isSubmitting}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
+              <Button type="submit" className="me-2 ms-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" disabled={isSubmitting}>
+              <Button type="submit" className="me-2 ms-2" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -14,7 +14,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
-      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-emphasis text-lg font-medium leading-6">{t("2fa")}</h2>

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -6,7 +6,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
         <Shield className="text-inverted h-6 w-6" />
       </div>
-      <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
         <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
           {title}
         </h3>

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
+import { Button, Dialog, DialogContent, DialogFooter, Form, PasswordField } from "@calcom/ui";
 
 import TwoFactor from "@components/auth/TwoFactor";
 
@@ -12,7 +12,7 @@ import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 interface DisableTwoFactorAuthModalProps {
   open: boolean;
   onOpenChange: () => void;
-
+  disablePassword?: boolean;
   /** Called when the user closes the modal without disabling two-factor auth */
   onCancel: () => void;
   /** Called when the user disables two-factor auth */
@@ -27,6 +27,7 @@ interface DisableTwoFactorValues {
 const DisableTwoFactorAuthModal = ({
   onDisable,
   onCancel,
+  disablePassword,
   open,
   onOpenChange,
 }: DisableTwoFactorAuthModalProps) => {
@@ -74,29 +75,34 @@ const DisableTwoFactorAuthModal = ({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent title={t("disable_2fa")} description={t("disable_2fa_recommendation")} type="creation">
         <Form form={form} handleSubmit={handleDisable}>
-          <div className="mb-4">
-            <PasswordField
-              labelProps={{
-                className: "block text-sm font-medium text-default",
-              }}
-              {...form.register("password")}
-              className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
-            />
-            <Label className="mt-4"> {t("2fa_code")}</Label>
-
+          <div className="mb-8">
+            {!disablePassword && (
+              <PasswordField
+                labelProps={{
+                  className: "block text-sm font-medium text-default",
+                }}
+                {...form.register("password")}
+                className="border-default mt-1 block w-full rounded-md border px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+              />
+            )}
             <TwoFactor center={false} />
 
             {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
           </div>
 
-          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ms-2 me-2" data-testid="disable-2fa" disabled={isDisabling}>
-              {t("disable")}
-            </Button>
+          <DialogFooter showDivider className="relative mt-5">
             <Button color="secondary" onClick={onCancel}>
               {t("cancel")}
             </Button>
-          </div>
+            <Button
+              type="submit"
+              className="me-2 ms-2"
+              data-testid="disable-2fa"
+              loading={isDisabling}
+              disabled={isDisabling}>
+              {t("disable")}
+            </Button>
+          </DialogFooter>
         </Form>
       </DialogContent>
     </Dialog>