v2.7.7

* feat: optimize tips component

* fix: use dynamic rendering

* fix: remove unnecessary memo

* fix: prefetch warning

* fix: use reverse list

.env.appStore.example

@@ -15,16 +15,22 @@
 #   - LARK
 #   - WEB3
 #   - SALESFORCE
+#   - ZOHOCRM
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
 #   - DAILY.CO VIDEO
+# Enables Cal Video. to get your key 
+# 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
+# 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
+# @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials
+
 DAILY_API_KEY=
 DAILY_SCALE_PLAN=''
 
 #   - GOOGLE CALENDAR/MEET/LOGIN
 # Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
 GOOGLE_API_CREDENTIALS=
 
 # To enable Login with Google you need to:
@@ -109,4 +115,10 @@ INFURA_API_KEY=""
 # Used for the Salesforce (Sales Cloud) app
 SALESFORCE_CONSUMER_KEY=""
 SALESFORCE_CONSUMER_SECRET=""
+
+#   - ZOHOCRM
+# Used for the Zoho CRM integration
+ZOHOCRM_CLIENT_ID=""
+ZOHOCRM_CLIENT_SECRET=""
+
 # *********************************************************************************************************

.env.example

@@ -22,6 +22,13 @@ CALCOM_LICENSE_KEY=
 
 # - DATABASE ************************************************************************************************
 DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+
+# Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
+# Cold boots will be faster and you'll be able to scale your DB independently of your app.
+# @see https://www.prisma.io/docs/data-platform/data-proxy/use-data-proxy
+# PRISMA_GENERATE_DATAPROXY=true
+PRISMA_GENERATE_DATAPROXY=
+
 # ***********************************************************************************************************
 
 # - SHARED **************************************************************************************************
@@ -39,6 +46,8 @@ SAML_DATABASE_URL=
 SAML_ADMINS=
 # NEXT_PUBLIC_HOSTED_CAL_FEATURES=1
 NEXT_PUBLIC_HOSTED_CAL_FEATURES=
+# For additional security set to a random secret and use that value as the client_secret during the OAuth 2.0 flow.
+SAML_CLIENT_SECRET_VERIFIER=
 
 # If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
 # @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
@@ -76,6 +85,10 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=
 
+# Fresh Chat Config
+NEXT_PUBLIC_FRESHCHAT_TOKEN=
+NEXT_PUBLIC_FRESHCHAT_HOST=
+
 # Inbox to send user feedback
 SEND_FEEDBACK_EMAIL=
 

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+**/**/node_modules
+**/**/.next
+**/**/public
+packages/prisma/zod
+apps/web/public/embed

.github/CODEOWNERS

@@ -0,0 +1,33 @@
+# This is a comment.
+# Each line is a file pattern followed by one or more owners.
+
+# These owners will be the default owners for everything in
+# the repo. Unless a later match takes precedence,
+# @global-owner1 and @global-owner2 will be requested for
+# review when someone opens a pull request.
+*           @calcom/reviewers
+
+.github/    @calcom/core
+.husky/     @calcom/core
+.vcode/     @calcom/core
+.snaplet/   @calcom/core
+deploy/     @calcom/core
+scripts/    @calcom/core
+
+apps/docs       @calcom/docs
+apps/swagger    @calcom/docs
+
+packages/app-store-cli                @hariombalhara @calcom/core
+packages/dayjs                        @zomars @calcom/core
+packages/emails                       @zomars @calcom/core
+packages/embeds                       @hariombalhara @calcom/core
+packages/eslint-plugin                @zomars @calcom/core
+packages/features                     @zomars @calcom/core
+packages/features/kbar                @alishaz-polymath @calcom/core
+packages/features/ee/impersonation    @sean-brydon @calcom/core
+packages/features/ee/payments         @alannnc @calcom/core
+packages/features/ee/workflows        @CarinaWolli @calcom/core
+packages/features/tips                @PeerRich @calcom/core
+packages/ui                           @calcom/ui
+packages/config                       @calcom/core
+packages/app-store/routing-forms   @hariombalhara @calcom/core

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,13 +12,13 @@ Fixes # (issue)
 
 ## Type of change
 
-<!-- Please delete options that are not relevant. -->
+<!-- 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?
 

.github/actions/cache-build/action.yml

@@ -0,0 +1,29 @@
+name: Cache production build binaries
+description: "Cache or restore if necessary"
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+runs:
+  using: "composite"
+  steps:
+    - name: Cache production build
+      uses: actions/cache@v3
+      id: cache-build
+      env:
+        cache-name: prod-build
+        key-1: ${{ inputs.node_version }}-${{ hashFiles('yarn.lock') }}
+        key-2: ${{ hashFiles('apps/**/**.[jt]s', 'apps/**/**.[jt]sx', 'packages/**/**.[jt]s', 'packages/**/**.[jt]sx', '!**/node_modules') }}
+        key-3: ${{ github.event.pull_request.number || github.ref }}
+        # Ensures production-build.yml will always be fresh
+        key-4: ${{ github.sha }}
+      with:
+        path: |
+          ${{ github.workspace }}/apps/web/.next
+          ${{ github.workspace }}/apps/web/public/embed
+          **/.turbo/**
+          **/dist/**
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}-${{ env.key-4 }}
+    - run: yarn build
+      if: steps.cache-build.outputs.cache-hit != 'true'
+      shell: bash

.github/actions/cache-db/action.yml

@@ -0,0 +1,38 @@
+name: Cache database between jobs
+description: "Cache or restore if necessary"
+inputs:
+  DATABASE_URL:
+    required: false
+    default: "postgresql://postgres:@localhost:5432/calendso"
+  path:
+    required: false
+    default: "backups/backup.sql"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache database
+      id: cache-db
+      uses: actions/cache@v3
+      env:
+        cache-name: cache-db
+        key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}
+        key-2: ${{ github.event.pull_request.number || github.ref }}
+      with:
+        path: ${{ inputs.path }}
+        key: ${{ runner.os }}-${{ env.cache-name }}-${{ inputs.path }}-${{ env.key-1 }}-${{ env.key-2 }}
+    - run: yarn db-seed
+      if: steps.cache-db.outputs.cache-hit != 'true'
+      shell: bash
+    - name: Postgres Dump Backup
+      if: steps.cache-db.outputs.cache-hit != 'true'
+      uses: tj-actions/pg-dump@v2.3
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        path: ${{ inputs.path }}
+        options: "-O"
+    - name: Postgres Backup Restore
+      if: steps.cache-db.outputs.cache-hit == 'true'
+      uses: tj-actions/pg-restore@v4.5
+      with:
+        database_url: ${{ inputs.DATABASE_URL }}
+        backup_file: ${{ inputs.path }}

.github/actions/dangerous-git-checkout/action.yml

@@ -0,0 +1,10 @@
+name: Dangerous git Checkout
+description: "Git Checkout from PR code so we can run checks from forks"
+runs:
+  using: "composite"
+  steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.sha }}
+        fetch-depth: 2

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

@@ -0,0 +1,16 @@
+name: "Set environment variables"
+description: "Configures environment variables for a workflow"
+runs:
+  using: "composite"
+  steps:
+    - name: Create env file
+      uses: actions/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/actions/yarn-install/action.yml

@@ -0,0 +1,62 @@
+########################################################################################
+# "yarn install" composite action for yarn 2/3/4+ and "nodeLinker: node-modules"       #
+#--------------------------------------------------------------------------------------#
+# Cache:                                                                               #
+#   - Downloaded zip archive (multi-arch, preserved across yarn.lock changes)          #
+#   - Yarn install state (discarded on yarn.lock changes)                              #
+# References:                                                                          #
+#   - bench: https://gist.github.com/belgattitude/0ecd26155b47e7be1be6163ecfbb0f0b     #
+#   - vs @setup/node: https://github.com/actions/setup-node/issues/325                 #
+########################################################################################
+
+name: "Yarn install"
+description: "Run yarn install with node_modules linker and cache enabled"
+inputs:
+  node_version:
+    required: false
+    default: v18.x
+
+runs:
+  using: "composite"
+  steps:
+    - name: Use Node ${{ inputs.node_version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node_version }}
+    - name: Expose yarn config as "$GITHUB_OUTPUT"
+      id: yarn-config
+      shell: bash
+      run: |
+        echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+    # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
+    # Yarn cache is also reusable between arch and os.
+    - name: Restore yarn cache
+      uses: actions/cache@v3
+      id: yarn-download-cache
+      with:
+        path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
+        key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          yarn-download-cache-
+
+    # Invalidated on yarn.lock changes
+    - name: Restore yarn install state
+      id: yarn-install-state-cache
+      uses: actions/cache@v3
+      with:
+        path: .yarn/ci-cache/
+        key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
+
+    - name: Install dependencies
+      shell: bash
+      run: |
+        yarn install --inline-builds
+        yarn prisma generate
+      env:
+        # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
+        YARN_ENABLE_IMMUTABLE_INSTALLS: "false" # So it doesn't try to remove our private submodule deps
+        YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
+        YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
+        # Other environment variables
+        HUSKY: "0" # By default do not run HUSKY install

.github/actions/yarn-playwright-install/action.yml

@@ -0,0 +1,19 @@
+name: Install playwright binaries
+description: "Install playwright, cache and restore if necessary"
+runs:
+  using: "composite"
+  steps:
+    - name: Cache playwright binaries
+      id: playwright-cache
+      uses: actions/cache@v2
+      with:
+        path: |
+          ~/Library/Caches/ms-playwright
+          ~/.cache/ms-playwright
+          ${{ github.workspace }}/node_modules/playwright
+        key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: cache-playwright-
+    - name: Yarn playwright install
+      shell: bash
+      if: steps.playwright-cache.outputs.cache-hit != 'true'
+      run: yarn playwright install

.github/matchers/tsc-absolute.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "tsc-absolute",
+      "pattern": [
+        {
+          "regexp": "(?:^|\\s)([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "code": 5,
+          "message": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/cache-clean.yml

@@ -0,0 +1,33 @@
+name: cleanup caches by a branch
+on:
+  pull_request:
+    types:
+      - closed
+
+jobs:
+  cleanup:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+
+      - name: Cleanup
+        run: |
+          gh extension install actions/gh-actions-cache
+
+          REPO=${{ github.repository }}
+          BRANCH="refs/pull/${{ github.event.pull_request.number }}/merge"
+
+          echo "Fetching list of cache key"
+          cacheKeysForPR=$(gh actions-cache list -R $REPO -B $BRANCH | cut -f 1 )
+
+          ## Setting this to not fail the workflow while deleting cache keys. 
+          set +e
+          echo "Deleting caches..."
+          for cacheKey in $cacheKeysForPR
+          do
+              gh actions-cache delete $cacheKey -R $REPO -B $BRANCH --confirm
+          done
+          echo "Done"
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/check-if-ui-has-changed.yml

@@ -22,7 +22,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 0

.github/workflows/check-types.yml

@@ -1,34 +1,19 @@
 name: Check types
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
 env:
   NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
   check-types:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
-
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        
-        with:
-          node-version: 16.x
-          cache: "yarn"
-      
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
       - name: Show info
         run: node -e "console.log(require('v8').getHeapStatistics())"
-      
-      - run: yarn --frozen-lockfile
-      - run: yarn type-check
+      - name: Configure TSC problem matcher
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::add-matcher::.github/matchers/tsc-absolute.json"
+      - run: yarn type-check:ci

.github/workflows/cleanup-preview-databases.yml

@@ -1,20 +0,0 @@
-name: Cleanup Preview Databases
-
-env:
-  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-  SNAPLET_PROJECT_ID: cl4u26bwz7962859ply7ibuo43t
-
-on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
-
-jobs:
-  delete:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: snaplet/action@v1
-        if: ${{ env.SNAPLET_ACCESS_TOKEN && env.SNAPLET_PROJECT_ID }}
-        with:
-          delete: true

.github/workflows/cron-downgradeUsers.yml

@@ -1,11 +1,12 @@
 name: Cron - downgradeUsers
 
 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 “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs “Every month at 1st (see https://crontab.guru)
+    - cron: "0 0 1 * *"
 jobs:
   cron-downgradeUsers:
     env:

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

@@ -18,5 +18,3 @@ jobs:
           days-before-stale: 60
           include-only-assigned: true
           days-before-close: -1
-
-

.github/workflows/crowdin.yml

@@ -9,21 +9,22 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  required-checks:
-    uses: calcom/cal.com/.github/workflows/required-checks.yml@main
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: crowdin action
-        uses: crowdin/github-action@1.4.9
+        uses: crowdin/github-action@1.5.1
         with:
-          upload_translations: true
+          upload_sources: true
           download_translations: true
-          pull_request_labels: "♻️ autoupdate, automerge"
+          push_translations: true
+          commit_message: "New Crowdin translations by Github Action"
+          localization_branch_name: main
+          create_pull_request: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}

.github/workflows/db-preview.yml

@@ -1,37 +0,0 @@
-# .github/workflows/preview.yml
-
-name: Preview Environment
-
-env:
-  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-  SNAPLET_PROJECT_ID: ${{ secrets.SNAPLET_PROJECT_ID }}
-  VERCEL_ACCESS_TOKEN: ${{ secrets.VERCEL_ACCESS_TOKEN }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-
-on:
-  pull_request:
-    types: [opened, synchronize, closed]
-    branches:
-      - main
-
-jobs:
-  db-preview-deploy:
-    if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
-    runs-on: ubuntu-latest
-    steps:
-      - id: snaplet
-        uses: snaplet/action@v1
-      - uses: snaplet/vercel-action@v1
-        with:
-          env: |
-            DATABASE_URL=${{ steps.snaplet.outputs.database-url }}
-  db-preview-delete:
-    if: ${{ github.event.action == 'closed' }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: snaplet/action@v1
-        with:
-          delete: true
-      - uses: snaplet/vercel-action@v1
-        with:
-          delete: true

.github/workflows/db-staging-snapshot.yml

@@ -1,18 +0,0 @@
-name: Staging DB Snapshot
-on:
-  schedule:
-    - cron: "0 4 * * 1-5" # At 04:00 on every day-of-week from Monday through Friday.
-  workflow_dispatch:
-jobs:
-  db-staging-snapshot:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Install Snaplet CLI
-        run: curl -sL https://app.snaplet.dev/get-cli/ | bash
-      - name: Restore Snapshot
-        run: snaplet snapshot restore -y
-        env:
-          SNAPLET_DATABASE_URL: ${{ secrets.SNAPLET_DATA_TARGET_DB_URL }}
-          SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-          SNAPLET_DATABASE_ID: ${{ secrets.SNAPLET_DATABASE_ID }}

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

@@ -1,60 +1,12 @@
 name: E2E App-Store Apps
 on:
-  push:
-    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths-ignore:
-      - apps/api/**
-      - apps/console/**
-      - apps/docs/**
-      - apps/swagger/**
-      - apps/website/**
-      - apps/web/public/**
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
+
 jobs:
-  test:
+  e2e-app-store:
     timeout-minutes: 20
     name: E2E App-Store Apps
-    strategy:
-      matrix:
-        node: ["16.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # 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 }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:12.1
@@ -65,35 +17,18 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - 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
-
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2

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

@@ -0,0 +1,36 @@
+name: E2E Embed tests and booking flow(for non-embed as well)
+on:
+  workflow_call:
+
+jobs:
+  e2e-embed:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - 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
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed.yml

@@ -1,56 +1,11 @@
 name: E2E Embed tests and booking flow(for non-embed as well)
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
-    paths:
-      - apps/web/**
-      - packages/embeds/**
   workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+
 jobs:
   e2e-embed:
     timeout-minutes: 20
     runs-on: ubuntu-latest
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # 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 }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -61,45 +16,21 @@ jobs:
           - 5432:5432
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
+      - 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 turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
-
-      - name: Upload embed-core results
+        run: yarn test-e2e:embed
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
-          path: packages/embeds/embed-core/playwright/results
-
-      - name: Upload embed-react results
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results-react
-          path: packages/embeds/embed-react/playwright/results
+          name: test-results
+          path: test-results

.github/workflows/e2e.yml

@@ -1,59 +1,11 @@
 name: E2E test
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths:
-      - apps/web/**
-      - packages/**
   workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
 jobs:
   e2e:
     timeout-minutes: 20
-    runs-on: buildjet-4vcpu-ubuntu-2204
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
-      STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-      STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # 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 }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    name: E2E tests
+    runs-on: ubuntu-latest
     services:
       postgres:
         image: postgres:12.1
@@ -62,37 +14,20 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
-      - run: yarn test-e2e
-
-      - name: Upload test results
+      - 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
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:

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

@@ -0,0 +1,50 @@
+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://127.0.0.1:3000/api/auth
+  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: ubuntu-latest
+    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: actions/cache@v3
+        id: env-cache
+        with:
+          path: gh.env
+          key: env-cache-${{ hashFiles('gh.env') }}

.github/workflows/lint.yml

@@ -1,38 +1,14 @@
 name: Lint
 on:
-  pull_request_target:
-    branches:
-      - main
-    paths:
-      - "**.tsx?"
-      - "**.jsx?"
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
+  workflow_call:
 jobs:
   lint:
-    runs-on: buildjet-4vcpu-ubuntu-2204
+    runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
-
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Install deps
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn --frozen-lockfile
-
-      - name: Test Code Linting
-        run: yarn lint
-
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
       - name: Save Code Linting Reports
         run: yarn lint:report
         continue-on-error: true

.github/workflows/nextjs-bundle-analysis.yml

@@ -1,91 +1,30 @@
 name: "Next.js Bundle Analysis"
 
 on:
-  pull_request:
+  workflow_call:
   push:
     branches:
       - main
-  workflow_dispatch:
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-
-defaults:
-  run:
-    # change this if your nextjs app does not live at the root of the repo
-    working-directory: ./apps/web/
 
 jobs:
+  build:
+    name: Production build
+    if: ${{ github.event_name == 'push' }}
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
   analyze:
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
-      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
-      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
-      STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
-      STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      NEXT_PUBLIC_IS_E2E: 1
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-    services:
-      postgres:
-        image: postgres:12.1
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_DB: calendso
-        ports:
-          - 5432:5432
+    needs: build
+    if: always()
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
-
-      - name: Set up node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
-      - name: Restore next build
-        uses: actions/cache@v2
-        id: restore-build-cache
-        env:
-          cache-name: cache-next-build
-        with:
-          path: apps/web/.next/cache
-          # change this if you prefer a more strict cache
-          key: ${{ runner.os }}-build-${{ env.cache-name }}
-
-      - name: Build next.js app
-        # change this if your site requires a custom build command
-        run: cd ../.. && yarn db-seed && yarn build
-
-      # Here's the first place where next-bundle-analysis' own script is used
-      # This step pulls the raw bundle stats for the current bundle
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/cache-build
       - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
+        run: |
+          cd apps/web
+          npx -p nextjs-bundle-analysis report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2
@@ -116,12 +55,15 @@ jobs:
       # entry in your package.json file.
       - name: Compare with base branch bundle
         if: success() && github.event.number
-        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+        run: |
+          cd apps/web
+          ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
 
       - name: Get comment body
         id: get-comment-body
         if: success() && github.event.number
         run: |
+          cd apps/web
           body=$(cat .next/analyze/__bundle_analysis_comment.txt)
           body="${body//'%'/'%25'}"
           body="${body//$'\n'/'%0A'}"

.github/workflows/pr.yml

@@ -0,0 +1,107 @@
+name: PR Update
+
+on:
+  pull_request_target:
+    branches:
+      - main
+    paths-ignore:
+      - "**.md"
+      - ".github/CODEOWNERS"
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  changes:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+    outputs:
+      app-store: ${{ steps.filter.outputs.app-store }}
+      embed: ${{ steps.filter.outputs.embed }}
+      embed-react: ${{ steps.filter.outputs.embed-react }}
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            app-store:
+              - 'apps/web/**'
+              - 'packages/app-store/**'
+            embed:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+            embed-react:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
+
+  env:
+    name: Create env file
+    uses: ./.github/workflows/env-create-file.yml
+    secrets: inherit
+
+  type-check:
+    name: Type check
+    uses: ./.github/workflows/check-types.yml
+    secrets: inherit
+
+  test:
+    name: Unit tests
+    uses: ./.github/workflows/test.yml
+    secrets: inherit
+
+  lint:
+    name: Linters
+    uses: ./.github/workflows/lint.yml
+    secrets: inherit
+
+  build:
+    name: Production build
+    needs: env
+    uses: ./.github/workflows/production-build.yml
+    secrets: inherit
+
+  e2e:
+    name: E2E tests
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e.yml
+    secrets: inherit
+
+  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
+
+  analyze:
+    needs: build
+    uses: ./.github/workflows/nextjs-bundle-analysis.yml
+    secrets: inherit
+
+  required:
+    needs: [lint, type-check, test, build, e2e]
+    if: always()
+    runs-on: ubuntu-latest
+    steps:
+      - name: fail if conditional jobs failed
+        if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')
+        run: exit 1

.github/workflows/production-build.yml

@@ -0,0 +1,25 @@
+name: Production Build
+
+on:
+  workflow_call:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+    steps:
+      - 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/required-checks.yml

@@ -1,44 +0,0 @@
-name: "Meta Workflow: Require Conditional Status Checks"
-on:
-  pull_request:
-    branches:
-      - main
-  workflow_call:
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
-jobs:
-  required-checks:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Ensure All Conditional Checks Have Passed
-        uses: blend/require-conditional-status-checks@2022.02.04
-        with:
-          timeout: 15m
-          github-token: ${{ github.token }}
-          interval: 20s
-          # Question marks aren't working
-          # @see https://github.com/blend/require-conditional-status-checks/pull/11
-          checks-yaml: |
-            - job: lint
-              paths:
-                - /**/*.jsx
-                - /**/*.js
-                - /**/*.tsx
-                - /**/*.ts
-            - job: check-types
-              paths:
-                - /**/*.tsx
-                - /**/*.ts
-            - job: e2e
-              paths:
-                - /apps/web/**
-                - /packages/**
-            - job: e2e-embed
-              paths:
-                - /apps/web/**
-                - /packages/embeds/**
-            - job: test
-              paths:
-                - /apps/web/**
-                - /packages/**

.github/workflows/submodule-sync.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           submodules: recursive
           token: ${{ secrets.GH_ACCESS_TOKEN }}

.github/workflows/test.yml

@@ -1,33 +1,17 @@
 name: Unit tests
 on:
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths:
-      - apps/web/**
-      - packages/**
+  workflow_call:
   workflow_run:
     workflows: [Crowdin Action]
     types: [completed]
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
-  cancel-in-progress: true
 jobs:
   test:
     timeout-minutes: 20
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
-      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - run: echo 'NODE_OPTIONS="--max_old_space_size=6144"' >> $GITHUB_ENV
-      - name: Use Node 16.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.x
-          cache: "yarn"
-      - run: yarn --frozen-lockfile
+      - uses: ./.github/actions/yarn-install
+      # Should be an 8GB machine as per https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
       - run: yarn test

.github/workflows/todo-to-issue.yml

@@ -1,6 +1,6 @@
 name: TODO to Issue
 on:
-  pull_request_target: # So we can test on forks
+  push:
     branches:
       - main
   workflow_dispatch:
@@ -12,17 +12,13 @@ on:
         description: "By default, the commit entered above is compared to the one directly before it; to go back further, enter an earlier SHA here"
         required: false
 concurrency:
-  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 jobs:
   todos:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
-          fetch-depth: 2
+      - uses: actions/checkout@v3
       - name: "Add TODOs to issues"
         uses: "alstr/todo-to-issue-action@v4"
         env:

.github/workflows/yarn-install.yml

@@ -0,0 +1,14 @@
+name: Yarn install
+
+on:
+  workflow_call:
+
+jobs:
+  setup:
+    name: Yarn install & cache
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install

.gitignore

@@ -77,9 +77,6 @@ lint-results
 #Storybook
 apps/storybook/build-storybook.log
 
-# Infisical
-.infisical.json
-
 # Snaplet
 .snaplet/snapshots
 .snaplet/structure.d.ts
@@ -90,3 +87,12 @@ apps/api
 apps/website
 apps/console
 apps/auth
+
+# Yarn Modern
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.infisical.json

@@ -0,0 +1,8 @@
+{
+  "workspaceId": "63ea8121b6e2b0543ba79616",
+  "defaultEnvironment": "dev",
+  "gitBranchToEnvironmentMapping": {
+    "main": "staging",
+    "production": "prod"
+  }
+}

.nvmrc

@@ -1 +1 @@
-v16
+v18

.prettierignore

@@ -14,3 +14,4 @@ public
 .DS_Store
 .eslintignore
 packages/prisma/zod
+apps/web/public/embed

.vscode/launch.json

@@ -2,38 +2,20 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Next.js: Server",
-      "type": "node-terminal",
+      "type": "node",
       "request": "launch",
-      "command": "npm run dev",
-      "skipFiles": ["<node_internals>/**"],
-      "outFiles": [
-        "${workspaceFolder}/**/*.js",
-        "!**/node_modules/**"
-      ],
-      "sourceMaps": true,
-      "resolveSourceMapLocations": [
-        "${workspaceFolder}/**",
-        "!**/node_modules/**"
-      ]
-    },
-    {
-      "name": "Next.js: Client",
-      "type": "pwa-chrome",
-      "request": "launch",
-      "url": "http://localhost:3000"
-    },
-    {
-      "name": "Next.js: Full Stack",
-      "type": "node-terminal",
-      "request": "launch",
-      "command": "npm run dev",
+      "name": "Next.js Node Debug",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
+      "env": {
+        "NODE_OPTIONS": "--inspect"
+      },
+      "cwd": "${workspaceFolder}/apps/web",
       "console": "integratedTerminal",
-      "serverReadyAction": {
-        "pattern": "started server on .+, url: (https?://.+)",
-        "uriFormat": "%s",
-        "action": "debugWithChrome"
+      "sourceMapPathOverrides": {
+        "meteor://💻app/*": "${workspaceFolder}/*",
+        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
+        "webpack://?:*/*": "${workspaceFolder}/*"
       }
     }
   ]
-}
+}

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Contributions are what make the open source community such an amazing place to l
 
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
 
-## Priorities 
+## Priorities
 
 <table>
   <tr>
@@ -57,7 +57,6 @@ Contributions are what make the open source community such an amazing place to l
   </tr>
 </table>
 
-
 ## Developing
 
 The development branch is `main`. This is the branch that all pull
@@ -128,6 +127,6 @@ If you get errors, be sure to fix them before committing.
 ## Making a Pull Request
 
 - Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
-- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. Se more about [Linking a pull request to an issue
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue
   ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.

README.md

@@ -25,7 +25,7 @@
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-   <a href="https://status.cal.com"><img src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
+   <a href="https://status.cal.com"><img height="20px" src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
    <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
    <a href="https://news.ycombinator.com/item?id=34507672"><img src="https://img.shields.io/badge/Hacker%20News-%231-%23FF6600" alt="Hacker News"></a>
    <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
@@ -88,6 +88,7 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 - [React](https://reactjs.org/?ref=cal.com)
 - [Tailwind](https://tailwindcss.com/?ref=cal.com)
 - [Prisma](https://prisma.io/?ref=cal.com)
+- [Daily.co](https://go.cal.com/daily)
 
 ## Stay Up-to-Date
 
@@ -349,8 +350,15 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
-</a>  
+</a>
 
+<!-- CONTRIBUTORS -->
+
+### Contributors
+
+<a href="https://github.com/calcom/cal.com/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=calcom/cal.com" />
+</a>
 
 <!-- TRANSLATIONS -->
 
@@ -424,7 +432,7 @@ following
 
 ### Obtaining Daily API Credentials
 
-1. Open [Daily](https://www.daily.co/) and sign into your account.
+1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
 3. Copy your API key.
 4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
@@ -443,6 +451,19 @@ following
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.
 
+### Obtaining ZohoCRM Client ID and Secret
+
+1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
+2. From within the API console page, go to "Applications".
+3. Click "ADD CLIENT" button top right and select "Server-based Applications".
+4. Fill in any information you want in the "Client Details" tab
+5. Go to tab "Client Secret" tab.
+6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs.
+8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
+9. Click the "Save"/ "UPDATE" button at the bottom footer.
+10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
+
 ## Workflows
 
 ### Setting up SendGrid for Email reminders

apps/docs/.nvmrc

@@ -1 +1 @@
-14.17
+v18

apps/docs/package.json

@@ -11,20 +11,20 @@
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
-    "type-check": "tsc --pretty --noEmit"
+    "type-check": "tsc --pretty --noEmit",
+    "type-check:ci": "tsc-absolute --pretty --noEmit"
   },
   "author": "Cal.com, Inc.",
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@calcom/config": "*",
-    "eslint": "^8.34.0"
+    "@calcom/config": "*"
   }
 }

apps/storybook/next.config.js

@@ -1,21 +1,7 @@
 const withBundleAnalyzer = require("@next/bundle-analyzer");
 
-const withTM = require("next-transpile-modules")([
-  "@calcom/app-store",
-  "@calcom/dayjs",
-  "@calcom/emails",
-  "@calcom/trpc",
-  "@calcom/embed-core",
-  "@calcom/embed-react",
-  "@calcom/features",
-  "@calcom/lib",
-  "@calcom/prisma",
-  "@calcom/ui",
-]);
-const glob = require("glob");
-
 const plugins = [];
-plugins.push(withTM, withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
@@ -27,7 +13,18 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
-  experimental: { images: { allowFutureImage: true } },
+  transpilePackages: [
+    "@calcom/app-store",
+    "@calcom/dayjs",
+    "@calcom/emails",
+    "@calcom/trpc",
+    "@calcom/embed-core",
+    "@calcom/embed-react",
+    "@calcom/features",
+    "@calcom/lib",
+    "@calcom/prisma",
+    "@calcom/ui",
+  ],
   eslint: {
     ignoreDuringBuilds: true,
   },

apps/storybook/package.json

@@ -20,7 +20,7 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook-addon-rtl-direction": "^0.0.19"

apps/swagger/package.json

@@ -14,7 +14,7 @@
   "dependencies": {
     "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "^13.1.1",
+    "next": "^13.2.1",
     "openapi-snippet": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

apps/web/.eslintignore

@@ -1,2 +1,2 @@
 node_modules
-prisma/zod
+public/embed

apps/web/.nvmrc

@@ -1 +1 @@
-v16
+v18

apps/web/.prettierignore

@@ -0,0 +1 @@
+public/embed

apps/web/components/AdditionalCalendarSelector.tsx

@@ -1,86 +0,0 @@
-import React from "react";
-import Select from "react-select";
-import type { OptionProps } from "react-select";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-
-import { QueryCell } from "@lib/QueryCell";
-
-interface AdditionalCalendarSelectorProps {
-  isLoading?: boolean;
-}
-
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
-  const { data } = optionProps;
-  return (
-    <InstallAppButton
-      type={data.type}
-      render={(installProps) => {
-        return (
-          <Button {...installProps} className="w-full" color="minimal">
-            {/* eslint-disable @next/next/no-img-element */}
-            {data.image && (
-              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
-            )}
-            <p>{data.label}</p>
-          </Button>
-        );
-      }}
-    />
-  );
-};
-
-const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => {
-        const options = data.items.map((item) => ({
-          label: item.name,
-          slug: item.slug,
-          image: item.logo,
-          type: item.type,
-        }));
-        return (
-          <Select
-            name="additionalCalendar"
-            placeholder={t("connect_additional_calendar")}
-            options={options}
-            styles={{
-              placeholder: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  color: "#3E3E3E",
-                  marginLeft: "3px",
-                };
-              },
-              control: (defaultStyles) => {
-                return {
-                  ...defaultStyles,
-                  borderRadius: "2px",
-                  "@media only screen and (min-width: 640px)": {
-                    ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                    maxWidth: "320px",
-                  },
-                };
-              },
-            }}
-            isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export default AdditionalCalendarSelector;

apps/web/components/AppListCard.tsx

@@ -64,7 +64,7 @@ export default function AppListCard(props: AppListCardProps) {
 
   return (
     <div className={`${highlight ? "bg-yellow-100" : ""}`}>
-      <div className="flex gap-x-3 p-4">
+      <div className="flex 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">

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,147 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-import Select from "react-select";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { DestinationCalendar } from "@calcom/prisma/client";
-import { trpc } from "@calcom/trpc/react";
-
-interface Props {
-  onChange: (value: { externalId: string; integration: string }) => void;
-  isLoading?: boolean;
-  hidePlaceholder?: boolean;
-  /** The external Id of the connected calendar */
-  value: string | undefined;
-  destinationCalendar?: DestinationCalendar | null;
-}
-
-const DestinationCalendarSelector = ({
-  onChange,
-  isLoading,
-  value,
-  hidePlaceholder,
-  destinationCalendar,
-}: Props): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
-
-  // Extra styles to show prefixed text in react-select
-  const content = (hidePlaceholder = false) => {
-    if (!hidePlaceholder) {
-      return {
-        alignItems: "center",
-        display: "flex",
-        ":before": {
-          content: `'${t("select_destination_calendar")}:'`,
-          display: "block",
-          marginRight: 8,
-        },
-      };
-    }
-    return {};
-  };
-
-  useEffect(() => {
-    const selected = query.data?.connectedCalendars
-      .map((connected) => connected.calendars ?? [])
-      .flat()
-      .find((cal) => cal.externalId === value);
-
-    if (selected) {
-      setSelectedOption({
-        value: `${selected.integration}:${selected.externalId}`,
-        label: selected.name || "",
-      });
-    }
-  }, [query.data?.connectedCalendars, value]);
-
-  if (!query.data?.connectedCalendars.length) {
-    return null;
-  }
-  const options =
-    query.data.connectedCalendars.map((selectedCalendar) => ({
-      key: selectedCalendar.credentialId,
-      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
-      options: (selectedCalendar.calendars ?? [])
-        .filter((cal) => cal.readOnly === false)
-        .map((cal) => ({
-          label: cal.name || "",
-          value: `${cal.integration}:${cal.externalId}`,
-        })),
-    })) ?? [];
-  const defaultCalendarSelectedString = destinationCalendar?.externalId
-    ? `(${
-        destinationCalendar.externalId.length > 15
-          ? destinationCalendar.externalId.substring(0, 15) + "..."
-          : destinationCalendar.externalId
-      })`
-    : "";
-  return (
-    <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      <Select
-        name="primarySelectedCalendar"
-        placeholder={
-          !hidePlaceholder ? (
-            `${t("select_destination_calendar")}`
-          ) : (
-            <span className="whitespace-nowrap">
-              {t("default_calendar_selected")} {defaultCalendarSelectedString}
-            </span>
-          )
-        }
-        options={options}
-        styles={{
-          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          option: (defaultStyles, state) => ({
-            ...defaultStyles,
-            backgroundColor: state.isSelected
-              ? state.isFocused
-                ? "var(--brand-color)"
-                : "var(--brand-color)"
-              : state.isFocused
-              ? "var(--brand-color-dark-mode)"
-              : "var(--brand-text-color)",
-          }),
-          control: (defaultStyles) => {
-            return {
-              ...defaultStyles,
-              borderRadius: "6px",
-              "@media only screen and (min-width: 640px)": {
-                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                width: "100%",
-              },
-            };
-          },
-        }}
-        isSearchable={false}
-        className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
-          !hidePlaceholder && "font-medium"
-        )}
-        onChange={(option) => {
-          setSelectedOption(option);
-          if (!option) {
-            return;
-          }
-
-          /* Split only the first `:`, since Apple uses the full URL as externalId */
-          const [integration, externalId] = option.value.split(/:(.+)/);
-
-          onChange({
-            integration,
-            externalId,
-          });
-        }}
-        isLoading={isLoading}
-        value={selectedOption}
-        components={{
-          IndicatorSeparator: () => null,
-        }}
-      />
-    </div>
-  );
-};
-
-export default DestinationCalendarSelector;

apps/web/components/Embed.tsx

@@ -1,4 +1,4 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
@@ -22,7 +22,7 @@ import {
   TextField,
   ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
+import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -167,7 +167,7 @@ const Codes: Record<string, Record<string, (...args: any[]) => string>> = {
       const height = getDimension(previewState.inline.height);
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -187,12 +187,12 @@ function MyComponent() {
     }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
       const cal = await getCalApi();
-      Cal("floatingButton", ${floatingButtonArg});
+      cal("floatingButton", ${floatingButtonArg});
       ${uiInstructionCode}
     })();
   }, [])
@@ -201,7 +201,7 @@ function MyComponent() {
     "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -313,7 +313,7 @@ const embeds: {
 }[] = [
   {
     title: "Inline Embed",
-    subtitle: "Loads your Cal scheduling page directly inline with your other website content",
+    subtitle: "Loads your event type directly inline with your other website content.",
     type: "inline",
     illustration: (
       <svg
@@ -327,10 +327,10 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
         <rect x="24.5" y="51" width="139" height="163" rx="1.5" fill="#F8F8F8" />
-        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="2" fill="#E1E1E1" />
-        <rect x="48" y="86.5" width="48" height="4" rx="1" fill="#E1E1E1" />
+        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="6" fill="#F3F4F6" />
+        <rect x="48" y="86.5" width="48" height="4" rx="6" fill="#F3F4F6" />
         <rect x="49" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
         <rect x="61" y="99.5" width="6" height="6" rx="1" fill="#3E3E3E" />
         <rect x="73" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
@@ -378,9 +378,9 @@ const embeds: {
         <rect x="85" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
         <rect x="97" y="161.5" width="6" height="6" rx="1" fill="#3E3E3E" />
         <rect x="109" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="24.5" y="51" width="139" height="163" rx="1.5" stroke="#292929" />
-        <rect x="176" y="50.5" width="108" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24.5" y="51" width="139" height="163" rx="6" stroke="#292929" />
+        <rect x="176" y="50.5" width="108" height="164" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
       </svg>
     ),
   },
@@ -400,12 +400,12 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="226" y="223.5" width="66" height="26" rx="2" fill="#292929" />
+        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="50.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="138.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+        <rect x="156" y="50.5" width="128" height="164" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+        <rect x="226" y="223.5" width="66" height="26" rx="6" fill="#292929" />
         <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
       </svg>
     ),
@@ -426,62 +426,65 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" fill="#F8F8F8" />
-        <rect opacity="0.8" x="108" y="85" width="80" height="8" rx="2" fill="#E1E1E1" />
-        <rect x="108" y="97" width="48" height="4" rx="1" fill="#E1E1E1" />
-        <rect x="109" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="110" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="133" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="136" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <path
-          d="M121 135H127V133H121V135ZM128 136V142H130V136H128ZM127 143H121V145H127V143ZM120 142V136H118V142H120ZM121 143C120.448 143 120 142.552 120 142H118C118 143.657 119.343 145 121 145V143ZM128 142C128 142.552 127.552 143 127 143V145C128.657 145 130 143.657 130 142H128ZM127 135C127.552 135 128 135.448 128 136H130C130 134.343 128.657 133 127 133V135ZM121 133C119.343 133 118 134.343 118 136H120C120 135.448 120.448 135 121 135V133Z"
-          fill="#3E3E3E"
-        />
-        <rect x="133" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="181" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="181" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="172" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" stroke="#292929" />
+        <rect x="24" y="0.50293" width="260" height="24" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="35" width="259" height="192" rx="5.5" fill="#F9FAFB" />
+        <g filter="url(#filter0_i_3223_14162)">
+          <rect opacity="0.8" x="40" y="99" width="24" height="24" rx="2" fill="#E5E7EB" />
+          <rect x="40" y="127" width="48" height="8" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="139" width="82" height="8" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="151" width="34" height="4" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="159" width="34" height="4" rx="1" fill="#E5E7EB" />
+        </g>
+        <rect x="152" y="48" width="2" height="169" rx="2" fill="#E5E7EB" />
+
+        <rect opacity="0.8" x="176" y="84" width="80" height="8" rx="2" fill="#E5E7EB" />
+        <rect x="176" y="96" width="48" height="4" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="109" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="201" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="135" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="187.3" y="133.4" width="9" height="9" rx="1.5" stroke="#0D121D" />
+        <rect x="201" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="249" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="249" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="171" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="24" y="35" width="259" height="192" rx="5.5" stroke="#101010" />
+        <rect x="24" y="241.503" width="260" height="24" rx="6" fill="#F3F4F6" />
       </svg>
     ),
   },
@@ -629,9 +632,9 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent type="creation" size="lg">
-      <div className="mb-4">
-        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+    <DialogContent className="rounded-lg p-10" type="creation" size="lg">
+      <div className="mb-2">
+        <h3 className="mb-2 text-2xl font-bold leading-none text-gray-900" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
@@ -641,7 +644,7 @@ const ChooseEmbedTypesDialogContent = () => {
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+            className="hover:border-primary-900 w-1/3 rounded-md border border-gray-200 bg-gray-50 p-6 text-left hover:rounded-md hover:bg-gray-100 ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -649,11 +652,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
+            <div className="order-none box-border flex-none rounded-md border border-solid bg-white">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
-            <p className="text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="mt-4 font-semibold leading-none text-gray-900">{embed.title}</div>
+            <p className="mt-2 text-sm text-gray-500">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -669,8 +672,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedUrl: string;
 }) => {
   const { t } = useLocale();
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
   const s = (href: string) => {
     const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
@@ -792,7 +798,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   }
 
   const ThemeOptions = [
-    { value: Theme.auto, label: "Auto Theme" },
+    { value: Theme.auto, label: "Auto" },
     { value: Theme.dark, label: "Dark Theme" },
     { value: Theme.light, label: "Light Theme" },
   ];
@@ -809,11 +815,18 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation">
+    <DialogContent
+      ref={dialogContentRef}
+      className="rounded-lg p-0.5 sm:max-w-[80rem]"
+      enableOverflow
+      type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
-          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+          <h3
+            className="mb-2.5 flex items-center text-xl font-semibold leading-5 text-gray-900"
+            id="modal-title">
             <button
+              className="h-6 w-6"
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
@@ -821,55 +834,43 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </button>
             {embed.title}
           </h3>
-          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className="flex flex-col overflow-y-auto">
-            <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+          <h4 className="mb-6 text-sm font-normal text-gray-500">{embed.subtitle}</h4>
+          <div className="flex flex-col">
+            <div className={classNames("font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
                 open={isEmbedCustomizationOpen}
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger
-                  type="button"
-                  className="flex w-full items-center text-base font-medium text-gray-900">
-                  <div>
-                    {embedType === "inline"
-                      ? "Inline Embed Customization"
-                      : embedType === "floating-popup"
-                      ? "Floating Popup Customization"
-                      : "Element Click Customization"}
-                  </div>
-                  <FiChevronRight
-                    className={`${
-                      isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
-                  <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                  <div className={classNames(embedType === "inline" ? "block" : "hidden")}>
                     {/*TODO: Add Auto/Fixed toggle from Figma */}
-                    <div className="text-sm">Embed Window Sizing</div>
-                    <div className="justify-left flex items-center">
-                      <TextField
-                        labelProps={{ className: "hidden" }}
-                        required
-                        value={previewState.inline.width}
-                        onChange={(e) => {
-                          setPreviewState((previewState) => {
-                            const width = e.target.value || "100%";
+                    <div className="mb-[9px] text-sm">Window sizing</div>
+                    <div className="justify-left flex items-center !font-normal">
+                      <div className="mr-[9px]">
+                        <TextField
+                          labelProps={{ className: "hidden" }}
+                          className="focus:ring-offset-0"
+                          required
+                          value={previewState.inline.width}
+                          onChange={(e) => {
+                            setPreviewState((previewState) => {
+                              const width = e.target.value || "100%";
+
+                              return {
+                                ...previewState,
+                                inline: {
+                                  ...previewState.inline,
+                                  width,
+                                },
+                              };
+                            });
+                          }}
+                          addOnLeading={<>W</>}
+                        />
+                      </div>
 
-                            return {
-                              ...previewState,
-                              inline: {
-                                ...previewState.inline,
-                                width,
-                              },
-                            };
-                          });
-                        }}
-                        addOnLeading={<>W</>}
-                      />
-                      <span className="p-2">×</span>
                       <TextField
                         labelProps={{ className: "hidden" }}
+                        className="focus:ring-offset-0"
                         value={previewState.inline.height}
                         required
                         onChange={(e) => {
@@ -960,6 +961,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -979,6 +982,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -997,22 +1002,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 </CollapsibleContent>
               </Collapsible>
             </div>
-            <hr className="mt-4" />
-            <div className="mt-4 font-medium">
+            <div className="font-medium">
               <Collapsible
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
-                  <FiChevronRight
-                    className={`${
-                      isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="mt-6 text-sm">
-                    <div className="mb-4 flex items-center justify-start space-x-2 rtl:space-x-reverse">
+                    <div className="mb-6 flex items-center justify-start space-x-2 rtl:space-x-reverse">
                       <Switch
                         checked={previewState.hideEventTypeDetails}
                         onCheckedChange={(checked) => {
@@ -1026,13 +1022,38 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                       <div className="text-sm">{t("hide_eventtype_details")}</div>
                     </div>
-                    <Label className="">
+                    {[
+                      { name: "brandColor", title: "Brand Color" },
+                      // { name: "lightColor", title: "Light Color" },
+                      // { name: "lighterColor", title: "Lighter Color" },
+                      // { name: "lightestColor", title: "Lightest Color" },
+                      // { name: "highlightColor", title: "Highlight Color" },
+                      // { name: "medianColor", title: "Median Color" },
+                    ].map((palette) => (
+                      <Label key={palette.name} className="mb-6">
+                        <div className="mb-2">{palette.title}</div>
+                        <div className="w-full">
+                          <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
+                            defaultValue="#000000"
+                            onChange={(color) => {
+                              addToPalette({
+                                [palette.name as keyof (typeof previewState)["palette"]]: color,
+                              });
+                            }}
+                          />
+                        </div>
+                      </Label>
+                    ))}
+                    <Label>
                       <div className="mb-2">Theme</div>
                       <Select
                         className="w-full"
                         defaultValue={ThemeOptions[0]}
                         components={{
                           Control: ThemeSelectControl,
+                          IndicatorSeparator: () => null,
                         }}
                         onChange={(option) => {
                           if (!option) {
@@ -1048,28 +1069,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         options={ThemeOptions}
                       />
                     </Label>
-                    {[
-                      { name: "brandColor", title: "Brand Color" },
-                      // { name: "lightColor", title: "Light Color" },
-                      // { name: "lighterColor", title: "Lighter Color" },
-                      // { name: "lightestColor", title: "Lightest Color" },
-                      // { name: "highlightColor", title: "Highlight Color" },
-                      // { name: "medianColor", title: "Median Color" },
-                    ].map((palette) => (
-                      <Label key={palette.name} className="pb-4">
-                        <div className="mb-2 pt-2">{palette.title}</div>
-                        <div className="w-full">
-                          <ColorPicker
-                            defaultValue="#000000"
-                            onChange={(color) => {
-                              addToPalette({
-                                [palette.name as keyof (typeof previewState)["palette"]]: color,
-                              });
-                            }}
-                          />
-                        </div>
-                      </Label>
-                    ))}
                   </div>
                 </CollapsibleContent>
               </Collapsible>

apps/web/components/NavTabs.tsx

@@ -1,5 +1,5 @@
 import { AdminRequired } from "components/ui/AdminRequired";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
 import { useRouter } from "next/router";

apps/web/components/SettingsShell.tsx

@@ -10,7 +10,7 @@ import NavTabs from "./NavTabs";
 const tabs = [
   {
     name: "profile",
-    href: "/settings/profile",
+    href: "/settings/my-account/profile",
     icon: FiUser,
   },
   {

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,10 +1,14 @@
-import type { OptionProps } from "react-select";
-
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button, Select } from "@calcom/ui";
+import {
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownItem,
+} from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -13,31 +17,6 @@ interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;
 }
 
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
-  const { t } = useLocale();
-  const { data } = optionProps;
-  return data.slug !== "add-new" ? (
-    <InstallAppButton
-      type={data.type}
-      render={(installProps) => {
-        return (
-          <Button {...installProps} className="flex w-full align-top" color="minimal">
-            {data.image && (
-              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
-            )}
-            <p className="text-left">{`${t("add")} ${data.label}`}</p>
-          </Button>
-        );
-      }}
-    />
-  ) : (
-    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
-      <FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("install_new_calendar_app")}</p>
-    </Button>
-  );
-};
-
 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
@@ -59,51 +38,39 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           type: "new_other",
         });
         return (
-          <Select
-            name="additionalCalendar"
-            placeholder={
-              <Button StartIcon={FiPlus} color="secondary">
+          <Dropdown modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
                 {t("add")}
               </Button>
-            }
-            options={options}
-            isSearchable={false}
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-            styles={{
-              menu: (defaultStyles) => ({
-                ...defaultStyles,
-                "@media only screen and (max-width: 640px)": {
-                  left: "0",
-                },
-                width: "max-content",
-                right: "0",
-              }),
-              indicatorSeparator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              control: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-                border: "0",
-                borderRadius: "6px",
-                minHeight: "auto",
-              }),
-              dropdownIndicator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              valueContainer: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-              }),
-              placeholder: (defaultStyles) => ({
-                ...defaultStyles,
-                margin: "0",
-              }),
-            }}
-          />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {options.map((data) => (
+                <DropdownMenuItem key={data.slug} className="focus:outline-none">
+                  {data.slug === "add-new" ? (
+                    <DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
+                      {t("install_new_calendar_app")}
+                    </DropdownItem>
+                  ) : (
+                    <InstallAppButton
+                      type={data.type}
+                      render={(installProps) => {
+                        const props = { ...installProps } as any;
+                        return (
+                          <DropdownItem {...props} color="minimal" type="button">
+                            <span className="flex items-center gap-x-2">
+                              {data.image && <img className="h-5 w-5" src={data.image} alt={data.label} />}
+                              {`${t("add")} ${data.label}`}
+                            </span>
+                          </DropdownItem>
+                        );
+                      }}
+                    />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </Dropdown>
         );
       }}
     />

apps/web/components/apps/App.tsx

@@ -1,9 +1,10 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import type { IframeHTMLAttributes } from "react";
 import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton, AppDependencyComponent } from "@calcom/app-store/components";
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
 import Shell from "@calcom/features/shell/Shell";
@@ -24,6 +25,8 @@ import {
   FiShield,
 } from "@calcom/ui/components/icon";
 
+/* These app slugs all require Google Cal to be installed */
+
 const Component = ({
   name,
   type,
@@ -43,11 +46,12 @@ const Component = ({
   tos,
   privacy,
   isProOnly,
-  images,
+  descriptionItems,
   isTemplate,
+  dependencies,
 }: Parameters<typeof App>[0]) => {
   const { t } = useLocale();
-  const hasImages = images && images.length > 0;
+  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
   const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
@@ -76,23 +80,40 @@ const Component = ({
     }
   );
 
+  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">
-      {hasImages && (
+      {hasDescriptionItems && (
         <div className="align-center 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 bg-gray-100 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">
-          {images ? (
-            images.map((img) => (
-              <img
-                key={img}
-                src={img}
-                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"
-              />
-            ))
+          {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 />
           )}
@@ -101,7 +122,7 @@ const Component = ({
       <div
         className={classNames(
           "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
-          hasImages && "lg:ml-8"
+          hasDescriptionItems && "lg:ml-8"
         )}>
         <div className="mb-8 flex pt-4">
           <header>
@@ -137,6 +158,7 @@ const Component = ({
                 <InstallAppButton
                   type={type}
                   isProOnly={isProOnly}
+                  disableInstall={disableInstall}
                   render={({ useDefaultComponent, ...props }) => {
                     if (useDefaultComponent) {
                       props = {
@@ -176,6 +198,7 @@ const Component = ({
             <InstallAppButton
               type={type}
               isProOnly={isProOnly}
+              disableInstall={disableInstall}
               render={({ useDefaultComponent, ...props }) => {
                 if (useDefaultComponent) {
                   props = {
@@ -203,6 +226,16 @@ const Component = ({
         ) : (
           <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}
@@ -303,6 +336,11 @@ const Component = ({
   );
 };
 
+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"];
@@ -325,13 +363,13 @@ export default function App(props: {
   privacy?: string;
   licenseRequired: AppType["licenseRequired"];
   isProOnly: AppType["isProOnly"];
-  images?: string[];
+  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
   isTemplate?: boolean;
+  disableInstall?: boolean;
+  dependencies?: string[];
 }) {
-  const { t } = useLocale();
-
   return (
-    <Shell smallHeading isPublic heading={t("app_store")} backPath="/apps" withoutSeo>
+    <Shell smallHeading isPublic heading={<ShellHeading />} backPath="/apps" withoutSeo>
       <HeadSeo
         title={props.name}
         description={props.description}

apps/web/components/apps/CalendarListContainer.tsx

@@ -88,7 +88,7 @@ function CalendarSwitch(props: {
     }
   );
   return (
-    <div className="flex py-1">
+    <div className="flex flex-col py-1 sm:flex-row">
       <Switch
         key={props.externalId}
         name="enabled"
@@ -99,7 +99,7 @@ function CalendarSwitch(props: {
         }}
       />
       {!!props.destination && (
-        <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+        <span className="ml-8 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800 sm:ml-4">
           <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
@@ -184,8 +184,8 @@ function ConnectedCalendarsList(props: Props) {
                     <div className="border-t border-gray-200">
                       {!fromOnboarding && (
                         <>
-                          <p className="px-4 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-2 p-4">
+                          <p className="px-5 pt-4 text-sm text-gray-500">{t("toggle_calendars_conflict")}</p>
+                          <ul className="space-y-2 px-5 py-4">
                             {item.calendars.map((cal) => (
                               <CalendarSwitch
                                 key={cal.externalId}
@@ -264,7 +264,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
+                  <div className="flex flex-col gap-6 rounded-md border p-7">
                     <ShellSubHeading
                       title={t("calendar")}
                       subtitle={t("installed_app_calendar_description")}

apps/web/components/apps/DestinationCalendarSelector.tsx

@@ -1,149 +0,0 @@
-import classNames from "classnames";
-import React, { useEffect, useState } from "react";
-import Select from "react-select";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { DestinationCalendar } from "@calcom/prisma/client";
-import { trpc } from "@calcom/trpc/react";
-
-interface Props {
-  onChange: (value: { externalId: string; integration: string }) => void;
-  isLoading?: boolean;
-  hidePlaceholder?: boolean;
-  /** The external Id of the connected calendar */
-  value: string | undefined;
-  destinationCalendar?: DestinationCalendar | null;
-}
-
-const DestinationCalendarSelector = ({
-  onChange,
-  isLoading,
-  value,
-  hidePlaceholder,
-  destinationCalendar,
-}: Props): JSX.Element | null => {
-  const { t } = useLocale();
-  const query = trpc.viewer.connectedCalendars.useQuery();
-  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
-
-  // Extra styles to show prefixed text in react-select
-  const content = (hidePlaceholder = false) => {
-    if (!hidePlaceholder) {
-      return {
-        alignItems: "center",
-        display: "flex",
-        ":before": {
-          content: `'${t("select_destination_calendar")}:'`,
-          display: "block",
-          marginRight: 8,
-        },
-      };
-    }
-    return {};
-  };
-
-  useEffect(() => {
-    const selected = query.data?.connectedCalendars
-      .map((connected) => connected.calendars ?? [])
-      .flat()
-      .find((cal) => cal.externalId === value);
-
-    if (selected) {
-      setSelectedOption({
-        value: `${selected.integration}:${selected.externalId}`,
-        label: `${selected.name} (${selected.externalId})` || "",
-      });
-    }
-  }, [query.data?.connectedCalendars, value]);
-
-  if (!query.data?.connectedCalendars.length) {
-    return null;
-  }
-  const options =
-    query.data.connectedCalendars.map((selectedCalendar) => ({
-      key: selectedCalendar.credentialId,
-      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
-      options: (selectedCalendar.calendars ?? [])
-        .filter((cal) => cal.readOnly === false)
-        .map((cal) => ({
-          label: `${cal.name} (${cal.externalId})` || "",
-          value: `${cal.integration}:${cal.externalId}`,
-        })),
-    })) ?? [];
-  const defaultCalendarSelectedString = destinationCalendar?.externalId
-    ? `(${
-        destinationCalendar.externalId.length > 15
-          ? destinationCalendar.externalId.substring(0, 15) + "..."
-          : destinationCalendar.externalId
-      })`
-    : "";
-  return (
-    <div
-      className="relative flex items-center"
-      title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      <Select
-        name="primarySelectedCalendar"
-        placeholder={
-          !hidePlaceholder ? (
-            `${t("select_destination_calendar")}`
-          ) : (
-            <span className="whitespace-nowrap">
-              {t("default_calendar_selected")} {defaultCalendarSelectedString}
-            </span>
-          )
-        }
-        options={options}
-        styles={{
-          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
-          option: (defaultStyles, state) => ({
-            ...defaultStyles,
-            backgroundColor: state.isSelected
-              ? state.isFocused
-                ? "var(--brand-color)"
-                : "var(--brand-color)"
-              : state.isFocused
-              ? "var(--brand-color-dark-mode)"
-              : "var(--brand-text-color)",
-          }),
-          control: (defaultStyles) => {
-            return {
-              ...defaultStyles,
-              borderRadius: "6px",
-              "@media only screen and (min-width: 640px)": {
-                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                width: "100%",
-              },
-            };
-          },
-        }}
-        isSearchable={false}
-        className={classNames(
-          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
-          !hidePlaceholder && "font-medium"
-        )}
-        onChange={(option) => {
-          setSelectedOption(option);
-          if (!option) {
-            return;
-          }
-
-          /* Split only the first `:`, since Apple uses the full URL as externalId */
-          const [integration, externalId] = option.value.split(/:(.+)/);
-
-          onChange({
-            integration,
-            externalId,
-          });
-        }}
-        isLoading={isLoading}
-        value={selectedOption}
-        components={{
-          IndicatorSeparator: () => null,
-        }}
-      />
-    </div>
-  );
-};
-
-export default DestinationCalendarSelector;

apps/web/components/availability/SkeletonLoader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
-import { SkeletonText } from "@calcom/ui";
+import { Button, SkeletonText } from "@calcom/ui";
+import { FiMoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -18,17 +19,21 @@ export default SkeletonLoader;
 
 function SkeletonItem() {
   return (
-    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
-      <div className="flex-grow truncate text-sm">
-        <div className="flex flex-col space-y-2">
-          <SkeletonText className="h-4 w-32" />
-          <SkeletonText className="h-2 w-32" />
-        </div>
-      </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
-        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
-          <SkeletonText className="h-6 w-12" />
+    <li>
+      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="items-between flex w-full flex-col justify-center hover:bg-neutral-50 sm:px-6">
+          <SkeletonText className="my-1 h-4 w-32" />
+          <SkeletonText className="my-1 h-2 w-24" />
+          <SkeletonText className="my-1 h-2 w-40" />
         </div>
+        <Button
+          className="mx-5"
+          type="button"
+          variant="icon"
+          color="secondary"
+          StartIcon={FiMoreHorizontal}
+          disabled
+        />
       </div>
     </li>
   );

apps/web/components/booking/AvailableEventLocations.tsx

@@ -1,3 +1,5 @@
+import { z } from "zod";
+
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -6,39 +8,61 @@ import { FiLink } 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();
 
-  return locations.length ? (
-    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
-      {locations.map((location, index) => {
-        const eventLocationType = getEventLocationType(location.type);
-        if (!eventLocationType) {
-          // It's possible that the location app got uninstalled
-          return null;
-        }
-        return (
-          <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-            {eventLocationType.iconUrl === "/link.svg" ? (
-              <FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
-            ) : (
-              <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?.includes("api") ? "dark:invert-[.65]" : ""
-                )}
-                alt={`${eventLocationType.label} icon`}
-              />
+  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 = [
+      "attendee_in_person",
+      "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" ? (
+          <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+        ) : (
+          <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?.includes("api") ? "dark:invert-[.65]" : ""
             )}
-            <Tooltip content={t(locationKeyToString(location) ?? "")}>
-              <p className="truncate">{t(locationKeyToString(location) ?? "")}</p>
-            </Tooltip>
-          </div>
-        );
-      })}
+            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="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
+      {filteredLocations}
     </div>
-  ) : (
-    <></>
-  );
+  ) : null;
 }

apps/web/components/booking/AvailableTimes.tsx

@@ -2,11 +2,12 @@ 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 } 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 type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
@@ -23,6 +24,7 @@ type AvailableTimesProps = {
   eventTypeSlug: string;
   date?: Dayjs;
   seatsPerTimeSlot?: number | null;
+  bookingAttendees?: number | null;
   slots?: Slot[];
   isLoading: boolean;
   ethSignature?: string;
@@ -38,6 +40,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   timeFormat,
   onTimeFormatChange,
   seatsPerTimeSlot,
+  bookingAttendees,
   ethSignature,
 }) => {
   const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
@@ -50,17 +53,26 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   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]
+  );
 
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
-        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
-          <div className="mb-6 flex items-center text-left text-base">
+        <div className="dark:bg-darkgray-100 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-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
-              <span className="text-bookinglight font-medium">
+              <span className="text-bookinglight">
                 , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
               </span>
             </div>
@@ -75,12 +87,14 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               />
             </div>
           </div>
-          <div className="flex-grow overflow-y-auto sm:block md:h-[364px]">
+          <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>;
+                  query: Record<string, string | number | string[] | undefined | TimeFormat>;
                 };
                 const bookingUrl: BookingURL = {
                   pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
@@ -89,6 +103,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     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,
                     ...(ethSignature ? { ethSignature } : {}),
@@ -104,26 +119,36 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                   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 && slot.attendees >= seatsPerTimeSlot ? (
+                    {seatsPerTimeSlot && slot.attendees && (slotFull || notEnoughSeats) ? (
                       <div
                         className={classNames(
-                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2  font-medium opacity-25 dark:border-transparent ",
+                          "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
+                        {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(
-                          "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
-                          "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
+                          "hover:bg-brand hover:border-brand hover:text-brandcontrast dark:hover:text-darkmodebrandcontrast",
+                          "dark:bg-darkgray-200 dark:hover:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkgray-800 mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         data-testid="time">

apps/web/components/booking/BookingDescription.tsx

@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
+import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -46,14 +46,16 @@ const BookingDescription: FC<Props> = (props) => {
   const { profile, eventType, isBookingPage = false, children } = props;
   const { date: bookingDate } = useRouterQuery("date");
   const { t } = useLocale();
-  const { duration = eventType.length.toString(), setQuery: setDuration } = useRouterQuery("duration");
+  const { duration, setQuery: setDuration } = useRouterQuery("duration");
 
   useEffect(() => {
     if (
-      eventType.metadata?.multipleDuration &&
-      !eventType.metadata?.multipleDuration?.includes(Number(duration))
+      !duration ||
+      isNaN(Number(duration)) ||
+      (eventType.metadata?.multipleDuration &&
+        !eventType.metadata?.multipleDuration.includes(Number(duration)))
     ) {
-      setDuration(eventType.length.toString());
+      setDuration(eventType.length);
     }
   }, [duration, setDuration, eventType.length, eventType.metadata?.multipleDuration]);
 
@@ -81,28 +83,20 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+      <h2 className="mt-1 mb-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
         {profile.name}
       </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold leading-none text-gray-900">
         {eventType.title}
       </h1>
       <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(
-              "flex",
+              "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
-            <div>
-              <FiInfo
-                className={classNames(
-                  "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
-                  isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
-                )}
-              />
-            </div>
-            <div className="max-w-[calc(100%_-_2rem)] flex-shrink break-words">
+            <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>
@@ -141,7 +135,6 @@ const BookingDescription: FC<Props> = (props) => {
                   <li key={idx}>
                     <Badge
                       variant="gray"
-                      size="lg"
                       className={classNames(
                         duration === dur.toString()
                           ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"

apps/web/components/booking/BookingDescriptionPayment.tsx

@@ -0,0 +1,24 @@
+import { FormattedNumber, IntlProvider } from "react-intl";
+
+import getPaymentAppData from "@calcom/lib/getPaymentAppData";
+import { FiCreditCard } from "@calcom/ui/components/icon";
+
+const BookingDescriptionPayment = (props: { eventType: Parameters<typeof getPaymentAppData>[0] }) => {
+  const paymentAppData = getPaymentAppData(props.eventType);
+  if (!paymentAppData || paymentAppData.price <= 0) return null;
+
+  return (
+    <p className="text-bookinglight -ml-2 px-2 text-sm ">
+      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      <IntlProvider locale="en">
+        <FormattedNumber
+          value={paymentAppData.price / 100.0}
+          style="currency"
+          currency={paymentAppData.currency?.toUpperCase()}
+        />
+      </IntlProvider>
+    </p>
+  );
+};
+
+export default BookingDescriptionPayment;

apps/web/components/booking/BookingListItem.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
+// TODO: Use browser locale, implement Intl in Dayjs maybe?
+import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
@@ -46,7 +48,10 @@ function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
-  const { t } = useLocale();
+  const {
+    t,
+    i18n: { language },
+  } = useLocale();
   const utils = trpc.useContext();
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
@@ -94,6 +99,13 @@ function BookingListItem(booking: BookingItemProps) {
     mutation.mutate(body);
   };
 
+  const getSeatReferenceUid = () => {
+    if (!booking.seatsReferences[0]) {
+      return undefined;
+    }
+    return booking.seatsReferences[0].referenceUid;
+  };
+
   const pendingActions: ActionType[] = [
     {
       id: "reject",
@@ -135,7 +147,8 @@ function BookingListItem(booking: BookingItemProps) {
          cancel all remaining bookings or just that booking instance. */
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
-      }`,
+      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
+      `,
       icon: FiX,
     },
     {
@@ -146,7 +159,9 @@ function BookingListItem(booking: BookingItemProps) {
           id: "reschedule",
           icon: FiClock,
           label: t("reschedule_booking"),
-          href: `/reschedule/${booking.uid}`,
+          href: `/reschedule/${booking.uid}${
+            booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
+          }`,
         },
         {
           id: "reschedule_request",
@@ -179,14 +194,15 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <FiSend className="-mt-[1px] w-4 rotate-45" />
-        <p className="ml-2 ">{t("reschedule_request_sent")}</p>
-      </div>
+      <Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
+        {t("reschedule_request_sent")}
+      </Badge>
     );
   };
 
-  const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
+  const startTime = dayjs(booking.startTime)
+    .locale(language)
+    .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
   const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
   const setLocationMutation = trpc.viewer.bookings.editLocation.useMutation({
@@ -223,6 +239,8 @@ function BookingListItem(booking: BookingItemProps) {
   };
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
+
+  const title = booking.title;
   return (
     <>
       <RescheduleDialog
@@ -355,12 +373,12 @@ function BookingListItem(booking: BookingItemProps) {
 
           <div className="cursor-pointer py-4">
             <div
-              title={booking.title}
+              title={title}
               className={classNames(
                 "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-gray-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.title}
+              {title}
               <span> </span>
 
               {!!booking?.eventType?.price && !booking.paid && (
@@ -384,13 +402,13 @@ function BookingListItem(booking: BookingItemProps) {
               />
             )}
             {isCancelled && booking.rescheduled && (
-              <div className="mt-2 inline-block text-left text-sm md:hidden">
+              <div className="mt-2 inline-block md:hidden">
                 <RequestSentMessage />
               </div>
             )}
           </div>
         </td>
-        <td className="py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
+        <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -420,7 +438,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
-  const { t } = useLocale();
+  const {
+    t,
+    i18n: { language },
+  } = useLocale();
   const now = new Date();
   const recurringCount = recurringDates.filter((date) => {
     return (
@@ -450,7 +471,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   <p key={key} className={classNames(pastOrCancelled && "line-through")}>
                     {formatTime(aDate, user?.timeFormat, user?.timeZone)}
                     {" - "}
-                    {dayjs(aDate).format("D MMMM YYYY")}
+                    {dayjs(aDate).locale(language).format("D MMMM YYYY")}
                   </p>
                 );
               })}>

apps/web/components/booking/CancelBooking.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -23,18 +23,26 @@ type Props = {
   setIsCancellationMode: (value: boolean) => void;
   theme: string | null;
   allRemainingBookings: boolean;
+  seatReferenceUid?: string;
 };
 
 export default function CancelBooking(props: Props) {
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
-  const { booking, allRemainingBookings } = props;
+  const { booking, allRemainingBookings, seatReferenceUid } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
   useTheme(props.theme);
 
+  const cancelBookingRef = useCallback((node: HTMLTextAreaElement) => {
+    if (node !== null) {
+      node.scrollIntoView({ behavior: "smooth" });
+      node.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     <>
       {error && (
@@ -53,6 +61,7 @@ export default function CancelBooking(props: Props) {
         <div className="mt-5 sm:mt-6">
           <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
           <TextArea
+            ref={cancelBookingRef}
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
@@ -68,21 +77,21 @@ export default function CancelBooking(props: Props) {
                 {t("nevermind")}
               </Button>
               <Button
-                className="flex justify-center"
+                className="dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand hover:border-brand text-brandcontrast flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);
 
-                  const payload = {
-                    id: booking?.id,
-                    cancellationReason: cancellationReason,
-                    allRemainingBookings,
-                  };
-
                   telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
 
                   const res = await fetch("/api/cancel", {
-                    body: JSON.stringify(payload),
+                    body: JSON.stringify({
+                      uid: booking?.uid,
+                      cancellationReason: cancellationReason,
+                      allRemainingBookings,
+                      // @NOTE: very important this shouldn't cancel with number ID use uid instead
+                      seatReferenceUid,
+                    }),
                     headers: {
                       "Content-Type": "application/json",
                     },

apps/web/components/booking/SlotPicker.tsx

@@ -78,6 +78,7 @@ export const SlotPicker = ({
   recurringEventCount,
   users,
   seatsPerTimeSlot,
+  bookingAttendees,
   weekStart = 0,
   ethSignature,
 }: {
@@ -89,6 +90,7 @@ export const SlotPicker = ({
   onTimeFormatChange: (is24Hour: boolean) => void;
   timeZone?: string;
   seatsPerTimeSlot?: number;
+  bookingAttendees?: number;
   recurringEventCount?: number;
   users: string[];
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -131,10 +133,7 @@ export const SlotPicker = ({
     eventTypeId: eventType.id,
     eventTypeSlug: eventType.slug,
     usernameList: users,
-    startTime:
-      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
-        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
-        : browsingDate?.startOf("month"),
+    startTime: dayjs().startOf("day"),
     endTime: browsingDate?.endOf("month"),
     timeZone,
     duration,
@@ -164,7 +163,7 @@ export const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
           selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
         )}
         includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
@@ -192,6 +191,7 @@ export const SlotPicker = ({
         eventTypeId={eventType.id}
         eventTypeSlug={eventType.slug}
         seatsPerTimeSlot={seatsPerTimeSlot}
+        bookingAttendees={bookingAttendees}
         recurringCount={recurringEventCount}
         ethSignature={ethSignature}
       />

apps/web/components/booking/TimeOptions.tsx

@@ -1,12 +1,9 @@
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 
-import useTheme from "@calcom/lib/hooks/useTheme";
 import type { ITimezoneOption } from "@calcom/ui";
 import { TimezoneSelect } from "@calcom/ui";
 
-import useMeQuery from "@lib/hooks/useMeQuery";
-
 import { timeZone } from "../../lib/clock";
 
 type Props = {
@@ -15,8 +12,6 @@ type Props = {
 
 const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const query = useMeQuery();
-  const userTheme = useTheme(query?.data?.theme).resolvedTheme;
 
   useEffect(() => {
     setSelectedTimeZone(timeZone());
@@ -28,59 +23,16 @@ const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
     }
   }, [selectedTimeZone, onSelectTimeZone]);
 
-  const customStyles = {
-    option: (_provided: object, state: { isSelected: boolean; isFocused: boolean }) => ({
-      padding: "10px 12px !important",
-      color: state.isSelected || state.isFocused ? "#101010" : "#374151",
-      backgroundColor: state.isSelected ? "#E5E7EB !important" : "white",
-      ...(userTheme === "dark" && {
-        color: state.isSelected || state.isFocused ? "white" : "#80868B",
-      }),
-    }),
-    control: () => ({
-      display: "flex",
-      cursor: "pointer",
-      backgroundColor: "transparent !important",
-      minWidth: "5rem",
-      height: "24px",
-      minHeight: "24px !important",
-      boxShadow: "none !important",
-    }),
-    singleValue: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      ...(userTheme === "dark" && {
-        color: "#a5a5a5 !important",
-      }),
-    }),
-    menu: (provided: object) => ({
-      ...provided,
-      minWidth: "20rem",
-      margin: "8px 0 0 -20px",
-    }),
-    valueContainer: (provided: object) => ({
-      ...provided,
-      padding: "0 0 0 6px",
-    }),
-    dropdownIndicator: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      marginLeft: 4,
-      padding: 0,
-      ...(userTheme === "dark" && {
-        color: "#80868B",
-      }),
-    }),
-  };
-
   return !!selectedTimeZone ? (
     <TimezoneSelect
       id="timeZone"
+      classNames={{
+        singleValue: () => "dark:text-darkgray-600 text-gray-600",
+        menu: () => "!w-64 max-w-[90vw]",
+      }}
+      variant="minimal"
       value={selectedTimeZone}
       onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-      className="flex h-6 text-sm font-medium"
-      styles={customStyles}
     />
   ) : null;
 };

apps/web/components/booking/TimezoneDropdown.tsx

@@ -17,8 +17,8 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 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">
+        <FiGlobe 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/pages/AvailabilityPage.tsx

@@ -23,8 +23,9 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
+import { trpc } from "@calcom/trpc";
 import { HeadSeo } from "@calcom/ui";
-import { FiCreditCard, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -52,6 +53,7 @@ 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;
@@ -124,6 +126,15 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
       : undefined,
   ];
 
+  const { data: bookingAttendees } = trpc.viewer.bookings.getBookingAttendees.useQuery(
+    {
+      seatReferenceUid: rescheduleUid,
+    },
+    {
+      enabled: !!(rescheduleUid && eventType.seatsPerTimeSlot),
+    }
+  );
+
   return (
     <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
       <HeadSeo
@@ -143,6 +154,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
           nofollow: eventType.hidden,
           noindex: eventType.hidden,
         }}
+        isBrandingHidden={restProps.isBrandingHidden}
       />
       <BookingPageTagManager eventType={eventType} />
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -168,10 +180,26 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   <div
                     className={classNames(
                       "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                      "min-w-full md:w-[230px] md:min-w-[230px]",
+                      "min-w-full md:w-[280px] md:min-w-[280px]",
                       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",
+                            "dark:text-darkgray-600 text-gray-600",
+                            "ltr:mr-[10px] rtl:ml-[10px]"
+                          )}>
+                          <FiUser
+                            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">
                           <FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
@@ -247,6 +275,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   timeZone={timeZone}
                   users={userList}
                   seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                  bookingAttendees={bookingAttendees || undefined}
                   recurringEventCount={recurringEventCount}
                   ethSignature={gateState.rainbowToken}
                 />

apps/web/components/dialog/EditLocationDialog.tsx

@@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import { useEffect } from "react";
-import { Controller, useForm, useWatch } from "react-hook-form";
+import { Controller, useForm, useWatch, useFormContext } from "react-hook-form";
 import { z } from "zod";
 
 import type { EventLocationType, LocationObject } from "@calcom/app-store/locations";
@@ -17,6 +17,7 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
+import { Input } from "@calcom/ui";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
 import { FiMapPin } from "@calcom/ui/components/icon";
 
@@ -32,6 +33,7 @@ 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;
@@ -49,16 +51,19 @@ const LocationInput = (props: {
   defaultValue?: string;
 }): JSX.Element | null => {
   const { eventLocationType, locationFormMethods, ...remainingProps } = props;
+  const { control } = useFormContext() as typeof locationFormMethods;
   if (eventLocationType?.organizerInputType === "text") {
     return (
-      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
+      <Input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
     );
   } else if (eventLocationType?.organizerInputType === "phone") {
     return (
-      <PhoneInput
+      <Controller
         name={eventLocationType.variable}
-        control={locationFormMethods.control}
-        {...remainingProps}
+        control={control}
+        render={({ field: { onChange, value } }) => {
+          return <PhoneInput onChange={onChange} value={value} {...remainingProps} />;
+        }}
       />
     );
   }
@@ -70,6 +75,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     saveLocation,
     selection,
     booking,
+    isTeamEvent,
     setShowLocationModal,
     isOpenDialog,
     defaultValues,
@@ -168,7 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="block w-full rounded-sm border-gray-300 text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -188,6 +193,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 control={locationFormMethods.control}
                 render={() => (
                   <CheckboxField
+                    data-testid="display-location"
                     defaultChecked={defaultLocation?.displayLocationPublicly}
                     description={t("display_location_label")}
                     onChange={(e) =>
@@ -284,16 +290,15 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               }}>
               <QueryCell
                 query={locationsQuery}
-                success={({ data: locationOptions }) => {
-                  if (!locationOptions.length) return null;
+                success={({ data }) => {
+                  if (!data.length) return null;
+                  const locationOptions = [...data].filter((option) => {
+                    return !isTeamEvent ? option.label !== "Conferencing" : true;
+                  });
                   if (booking) {
-                    locationOptions.forEach((location) => {
-                      if (location.label === "phone") {
-                        location.options.filter((l) => l.value !== "phone");
-                      } else if (location.label === "in person") {
-                        location.options.filter((l) => l.value !== "attendeeInPerson");
-                      }
-                    });
+                    locationOptions.map((location) =>
+                      location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))
+                    );
                   }
                   return (
                     <Controller
@@ -345,7 +350,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                     {t("cancel")}
                   </Button>
 
-                  <Button type="submit">{t("update")}</Button>
+                  <Button data-testid="update-location" type="submit">
+                    {t("update")}
+                  </Button>
                 </div>
               </DialogFooter>
             </Form>

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -4,13 +4,15 @@ import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
+import { NewScheduleButton } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
-import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
+import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
+import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -52,23 +54,24 @@ const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
 
 const AvailabilitySelect = ({
   className = "",
+  isLoading,
+  schedules,
   ...props
 }: {
   className?: string;
   name: string;
   value: number;
+  isLoading: boolean;
+  schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | [];
   onBlur: () => void;
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
-  const { data, isLoading } = trpc.viewer.availability.list.useQuery();
   const { t } = useLocale();
 
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
 
-  const schedules = data?.schedules || [];
-
   const options = schedules.map((schedule) => ({
     value: schedule.id,
     label: schedule.name,
@@ -107,13 +110,14 @@ const EventTypeScheduleDetails = () => {
   const { watch } = useFormContext<FormValues>();
 
   const scheduleId = watch("schedule");
+
   const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined },
     { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId }
   );
 
   const filterDays = (dayNum: number) =>
-    schedule?.schedule.availability.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
+    schedule?.schedule.filter((item) => item.days.includes((dayNum + 1) % 7)) || [];
 
   return (
     <div className="space-y-4 rounded border px-6 pb-4">
@@ -156,15 +160,17 @@ const EventTypeScheduleDetails = () => {
           <FiGlobe className="ltr:mr-2 rtl:ml-2" />
           {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
         </span>
-        <Button
-          href={`/availability/${schedule?.schedule.id}`}
-          disabled={isLoading}
-          color="minimal"
-          EndIcon={FiExternalLink}
-          target="_blank"
-          rel="noopener noreferrer">
-          {t("edit_availability")}
-        </Button>
+        {!!schedule?.id && (
+          <Button
+            href={`/availability/${schedule.id}`}
+            disabled={isLoading}
+            color="minimal"
+            EndIcon={FiExternalLink}
+            target="_blank"
+            rel="noopener noreferrer">
+            {t("edit_availability")}
+          </Button>
+        )}
       </div>
     </div>
   );
@@ -172,6 +178,19 @@ const EventTypeScheduleDetails = () => {
 
 const EventTypeSchedule = () => {
   const { t } = useLocale();
+  const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery();
+
+  if (!schedules?.schedules.length && !isLoading)
+    return (
+      <EmptyScreen
+        Icon={FiClock}
+        headline={t("new_schedule_heading")}
+        description={t("new_schedule_description")}
+        buttonRaw={<NewScheduleButton fromEventType />}
+        border={false}
+      />
+    );
+
   return (
     <div className="space-y-4">
       <div>
@@ -181,14 +200,18 @@ const EventTypeSchedule = () => {
         <Controller
           name="schedule"
           render={({ field }) => (
-            <AvailabilitySelect
-              value={field.value}
-              onBlur={field.onBlur}
-              name={field.name}
-              onChange={(selected) => {
-                field.onChange(selected?.value || null);
-              }}
-            />
+            <>
+              <AvailabilitySelect
+                value={field.value}
+                onBlur={field.onBlur}
+                name={field.name}
+                schedules={schedules?.schedules || []}
+                isLoading={isLoading}
+                onChange={(selected) => {
+                  field.onChange(selected?.value || null);
+                }}
+              />
+            </>
           )}
         />
       </div>

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -0,0 +1,145 @@
+import type { FC } from "react";
+import type { SubmitHandler } from "react-hook-form";
+import { FormProvider } from "react-hook-form";
+import { useForm, useFormContext } from "react-hook-form";
+
+import type { EventNameObjectType } from "@calcom/core/event";
+import { getEventName } from "@calcom/core/event";
+import { validateCustomEventName } from "@calcom/core/event";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Dialog, DialogClose, DialogFooter, DialogContent, TextField } from "@calcom/ui";
+
+interface FormValues {
+  customEventName: string;
+}
+
+interface CustomEventTypeModalFormProps {
+  placeHolder: string;
+  close: () => void;
+  setValue: (value: string) => void;
+  event: EventNameObjectType;
+  defaultValue: string;
+}
+
+const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
+  const { t } = useLocale();
+  const { placeHolder, close, setValue, event } = props;
+  const { register, handleSubmit, watch, getValues } = useFormContext<FormValues>();
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    setValue(data.customEventName);
+    close();
+  };
+
+  // const customEventName = watch("customEventName");
+  const previewText = getEventName({ ...event, eventName: watch("customEventName") });
+  const placeHolder_ = watch("customEventName") === "" ? previewText : placeHolder;
+
+  return (
+    <form
+      id="custom-event-name"
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const isEmpty = getValues("customEventName") === "";
+        if (isEmpty) {
+          setValue("");
+        }
+
+        handleSubmit(onSubmit)(e);
+      }}>
+      <TextField
+        label={t("event_name_in_calendar")}
+        type="text"
+        placeholder={placeHolder_}
+        {...register("customEventName", {
+          validate: (value) =>
+            validateCustomEventName(value, t("invalid_event_name_variables"), event.bookingFields),
+        })}
+        className="mb-0"
+      />
+      <div className="pt-6 text-sm">
+        <div className="mb-6 rounded-md bg-gray-100 p-2">
+          <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
+            <p className="text-gray-900">{t("event_name_info")}</p>
+          </div>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
+            <p className="text-gray-900">{t("your_full_name")}</p>
+          </div>
+          <div className="mb-2.5 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
+            <p className="text-gray-900">{t("scheduler_full_name")}</p>
+          </div>
+          <div className="mb-1 flex font-normal">
+            <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
+            <p className="text-gray-900">{t("location_info")}</p>
+          </div>
+        </div>
+        <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
+        <div
+          className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
+          style={{
+            backgroundImage: "url(/calendar-preview.svg)",
+          }}>
+          <div className="m-auto flex items-center justify-center self-stretch">
+            <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
+              <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">{previewText}</p>
+              <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+interface CustomEventTypeModalProps {
+  placeHolder: string;
+  defaultValue: string;
+  close: () => void;
+  setValue: (value: string) => void;
+  event: EventNameObjectType;
+}
+
+const CustomEventTypeModal: FC<CustomEventTypeModalProps> = (props) => {
+  const { t } = useLocale();
+
+  const { defaultValue, placeHolder, close, setValue, event } = props;
+
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      customEventName: defaultValue,
+    },
+  });
+
+  return (
+    <Dialog open={true} onOpenChange={close}>
+      <DialogContent
+        title={t("custom_event_name")}
+        description={t("custom_event_name_description")}
+        type="creation"
+        enableOverflow>
+        <FormProvider {...methods}>
+          <CustomEventTypeModalForm
+            event={event}
+            close={close}
+            setValue={setValue}
+            placeHolder={placeHolder}
+            defaultValue={defaultValue}
+          />
+        </FormProvider>
+        <DialogFooter>
+          <DialogClose>{t("cancel")}</DialogClose>
+
+          <Button form="custom-event-name" type="submit" color="primary">
+            {t("create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default CustomEventTypeModal;

apps/web/components/eventtype/CustomInputTypeForm.tsx

@@ -1,214 +0,0 @@
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { EventTypeCustomInputType } from "@prisma/client";
-import type { CustomInputParsed } from "pages/event-types/[type]";
-import type { FC } from "react";
-import type { Control, UseFormRegister } from "react-hook-form";
-import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Label, Select, TextField } from "@calcom/ui";
-import { FiPlus, FiX } from "@calcom/ui/components/icon";
-
-interface OptionTypeBase {
-  label: string;
-  value: EventTypeCustomInputType;
-  options?: { label: string; type: string }[];
-}
-
-interface Props {
-  onSubmit: (output: CustomInputParsed) => void;
-  onCancel: () => void;
-  selectedCustomInput?: CustomInputParsed;
-}
-
-type IFormInput = CustomInputParsed;
-
-/**
- *  Getting a random ID gives us the option to know WHICH field is changed
- *  when the user edits a custom field.
- *  This UUID is only used to check for changes in the UI and not the ID we use in the DB
- *  There is very very very slim chance that this will cause a collision
- * */
-const randomId = () => Math.floor(Math.random() * 1000000 + new Date().getTime());
-
-const CustomInputTypeForm: FC<Props> = (props) => {
-  const { t } = useLocale();
-  const inputOptions: OptionTypeBase[] = [
-    { value: EventTypeCustomInputType.TEXT, label: t("text") },
-    { value: EventTypeCustomInputType.TEXTLONG, label: t("multiline_text") },
-    { value: EventTypeCustomInputType.NUMBER, label: t("number") },
-    { value: EventTypeCustomInputType.BOOL, label: t("checkbox") },
-    {
-      value: EventTypeCustomInputType.RADIO,
-      label: t("radio"),
-    },
-    { value: EventTypeCustomInputType.PHONE, label: t("phone_number") },
-  ];
-
-  const { selectedCustomInput } = props;
-
-  const defaultValues = selectedCustomInput
-    ? { ...selectedCustomInput, id: selectedCustomInput?.id || randomId() }
-    : {
-        id: randomId(),
-        type: EventTypeCustomInputType.TEXT,
-      };
-
-  const { register, control, getValues } = useForm<IFormInput>({
-    defaultValues,
-  });
-  const selectedInputType = useWatch({ name: "type", control });
-  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value);
-
-  const onCancel = () => {
-    props.onCancel();
-  };
-
-  return (
-    <div className="flex flex-col space-y-4">
-      <div>
-        <label htmlFor="type" className="block text-sm font-medium text-gray-700">
-          {t("input_type")}
-        </label>
-        <Controller
-          name="type"
-          control={control}
-          render={({ field }) => (
-            <Select
-              id="type"
-              defaultValue={selectedInputOption}
-              options={inputOptions}
-              isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
-              onChange={(option) => option && field.onChange(option.value)}
-              value={selectedInputOption}
-              onBlur={field.onBlur}
-              name={field.name}
-            />
-          )}
-        />
-      </div>
-      <TextField
-        label={t("label")}
-        type="text"
-        id="label"
-        required
-        className="block w-full rounded-sm border-gray-300 text-sm"
-        defaultValue={selectedCustomInput?.label}
-        {...register("label", { required: true })}
-      />
-      {(selectedInputType === EventTypeCustomInputType.TEXT ||
-        selectedInputType === EventTypeCustomInputType.TEXTLONG) && (
-        <TextField
-          label={t("placeholder")}
-          type="text"
-          id="placeholder"
-          className="block w-full rounded-sm border-gray-300 text-sm"
-          defaultValue={selectedCustomInput?.placeholder}
-          {...register("placeholder")}
-        />
-      )}
-      {selectedInputType === EventTypeCustomInputType.RADIO && (
-        <RadioInputHandler control={control} register={register} />
-      )}
-
-      <div className="flex h-5 items-center">
-        <input
-          id="required"
-          type="checkbox"
-          className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300 ltr:mr-2 rtl:ml-2"
-          defaultChecked={selectedCustomInput?.required ?? true}
-          {...register("required")}
-        />
-        <label htmlFor="required" className="block text-sm font-medium text-gray-700">
-          {t("is_required")}
-        </label>
-      </div>
-      <input
-        type="hidden"
-        id="eventTypeId"
-        value={selectedCustomInput?.eventTypeId || -1}
-        {...register("eventTypeId", { valueAsNumber: true })}
-      />
-      <input
-        type="hidden"
-        id="id"
-        value={selectedCustomInput?.id || -1}
-        {...register("id", { valueAsNumber: true })}
-      />
-      <div className="mt-5 flex justify-end space-x-2 rtl:space-x-reverse sm:mt-4">
-        <Button onClick={onCancel} type="button" color="secondary" className="ltr:mr-2 rtl:ml-2">
-          {t("cancel")}
-        </Button>
-        <Button
-          type="button"
-          onClick={() => {
-            props.onSubmit(getValues());
-          }}>
-          {t("save")}
-        </Button>
-      </div>
-    </div>
-  );
-};
-
-function RadioInputHandler({
-  register,
-  control,
-}: {
-  register: UseFormRegister<IFormInput>;
-  control: Control<IFormInput>;
-}) {
-  const { t } = useLocale();
-  const { fields, append, remove } = useFieldArray<IFormInput>({
-    control,
-    name: "options",
-    shouldUnregister: true,
-  });
-  const [animateRef] = useAutoAnimate<HTMLUListElement>();
-
-  return (
-    <div className="flex flex-col ">
-      <Label htmlFor="radio_options">{t("options")}</Label>
-      <ul
-        className="flex max-h-80 w-full flex-col space-y-1 overflow-y-scroll rounded-md bg-gray-50 p-4"
-        ref={animateRef}>
-        <>
-          {fields.map((option, index) => (
-            <li key={`${option.id}`}>
-              <TextField
-                id={option.id}
-                placeholder={t("enter_option", { index: index + 1 })}
-                addOnFilled={false}
-                label={t("option", { index: index + 1 })}
-                labelSrOnly
-                {...register(`options.${index}.label` as const, { required: true })}
-                addOnSuffix={
-                  <Button
-                    variant="icon"
-                    color="minimal"
-                    StartIcon={FiX}
-                    onClick={() => {
-                      remove(index);
-                    }}
-                  />
-                }
-              />
-            </li>
-          ))}
-          <Button
-            color="minimal"
-            StartIcon={FiPlus}
-            className="!text-sm !font-medium"
-            onClick={() => {
-              append({ label: "", type: "text" });
-            }}>
-            {t("add_an_option")}
-          </Button>
-        </>
-      </ul>
-    </div>
-  );
-}
-
-export default CustomInputTypeForm;

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -1,5 +1,6 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
-import type { CustomInputParsed, EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import short from "short-uuid";
@@ -8,30 +9,18 @@ import { v5 as uuidv5 } from "uuid";
 import type { EventNameObjectType } from "@calcom/core/event";
 import { getEventName } from "@calcom/core/event";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
-import CustomInputItem from "@calcom/features/eventtypes/components/CustomInputItem";
+import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { APP_NAME, CAL_URL, IS_SELF_HOSTED } 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 {
-  Badge,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogFooter,
-  Label,
-  SettingsToggle,
-  showToast,
-  TextField,
-  Tooltip,
-} from "@calcom/ui";
-import { FiEdit, FiCopy, FiPlus } from "@calcom/ui/components/icon";
-
-import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
+import { Badge, Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
+import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
+const CustomEventTypeModal = dynamic(() => import("@components/eventtype/CustomEventTypeModal"));
+
 const generateHashedLink = (id: number) => {
   const translator = short();
   const seed = `${id}:${new Date().getTime()}`;
@@ -39,68 +28,63 @@ const generateHashedLink = (id: number) => {
   return uid;
 };
 
-const getRandomId = (length = 8) => {
-  return (
-    -1 *
-    parseInt(
-      Math.ceil(Math.random() * Date.now())
-        .toPrecision(length)
-        .toString()
-        .replace(".", "")
-    )
-  );
-};
-
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
+
   const [showEventNameTip, setShowEventNameTip] = useState(false);
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
+
+  const bookingFields: Prisma.JsonObject = {};
+
+  eventType.bookingFields.forEach(({ name }) => {
+    bookingFields[name] = name + " input";
+  });
+
   const eventNameObject: EventNameObjectType = {
     attendeeName: t("scheduler"),
     eventType: eventType.title,
     eventName: eventType.eventName,
     host: eventType.users[0]?.name || "Nameless",
+    bookingFields: bookingFields,
     t,
   };
-  const [previewText, setPreviewText] = useState(getEventName(eventNameObject));
-  const [customInputs, setCustomInputs] = useState<CustomInputParsed[]>(
-    eventType.customInputs.sort((a, b) => a.id - b.id) || []
-  );
-  const [selectedCustomInput, setSelectedCustomInput] = useState<CustomInputParsed | undefined>(undefined);
-  const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
+
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
 
-  const removeCustom = (index: number) => {
-    formMethods.getValues("customInputs").splice(index, 1);
-    customInputs.splice(index, 1);
-    setCustomInputs([...customInputs]);
-  };
-
-  const changePreviewText = (eventNameObject: EventNameObjectType, previewEventName: string) => {
-    setPreviewText(
-      previewEventName
-        .replace("{Event type title}", eventNameObject.eventType)
-        .replace("{Scheduler}", eventNameObject.attendeeName)
-        .replace("{Organiser}", eventNameObject.host)
-    );
-  };
-
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
   }, [eventType.users, hashedUrl, team?.id]);
 
-  useEffect(() => {
-    if (eventType.customInputs) {
-      setCustomInputs(eventType.customInputs.sort((a, b) => a.id - b.id));
-    }
-  }, [eventType.customInputs]);
+  const toggleGuests = (enabled: boolean) => {
+    const bookingFields = formMethods.getValues("bookingFields");
+    formMethods.setValue(
+      "bookingFields",
+      bookingFields.map((field) => {
+        if (field.name === "guests") {
+          return {
+            ...field,
+            hidden: !enabled,
+          };
+        }
+        return field;
+      })
+    );
+  };
 
+  const eventNamePlaceholder = getEventName({
+    ...eventNameObject,
+    eventName: formMethods.watch("eventName"),
+  });
+
+  const closeEventNameTip = () => setShowEventNameTip(false);
+
+  const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
     <div className="flex flex-col space-y-8">
       {/**
@@ -141,16 +125,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <TextField
           label={t("event_name_in_calendar")}
           type="text"
-          placeholder={t("meeting_with_user")}
+          placeholder={eventNamePlaceholder}
           defaultValue={eventType.eventName || ""}
-          {...formMethods.register("eventName", {
-            onChange: (e) => {
-              if (!e.target.value || !formMethods.getValues("eventName")) {
-                return setPreviewText(getEventName(eventNameObject));
-              }
-              changePreviewText(eventNameObject, e.target.value);
-            },
-          })}
+          {...formMethods.register("eventName")}
           addOnSuffix={
             <Button
               type="button"
@@ -159,53 +136,18 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
               color="minimal"
               className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
               onClick={() => setShowEventNameTip((old) => !old)}
+              aria-label="edit custom name"
             />
           }
         />
       </div>
       <hr />
-      <div className="">
-        <SettingsToggle
-          title={t("additional_inputs")}
-          description={t("additional_input_description")}
-          checked={customInputs.length > 0}
-          onCheckedChange={(e) => {
-            if (e && customInputs.length === 0) {
-              // Push a placeholders
-              setSelectedCustomInputModalOpen(true);
-            } else if (!e) {
-              formMethods.setValue("customInputs", []);
-            }
-          }}>
-          <ul className="my-4 rounded-md border">
-            {customInputs.map((customInput, idx) => (
-              <CustomInputItem
-                key={idx}
-                question={customInput.label}
-                type={customInput.type}
-                required={customInput.required}
-                editOnClick={() => {
-                  setSelectedCustomInput(customInput);
-                  setSelectedCustomInputModalOpen(true);
-                }}
-                deleteOnClick={() => removeCustom(idx)}
-              />
-            ))}
-          </ul>
-          {customInputs.length > 0 && (
-            <Button
-              StartIcon={FiPlus}
-              color="minimal"
-              type="button"
-              onClick={() => {
-                setSelectedCustomInput(undefined);
-                setSelectedCustomInputModalOpen(true);
-              }}>
-              {t("add_input")}
-            </Button>
-          )}
-        </SettingsToggle>
-      </div>
+      <FormBuilder
+        title={t("booking_questions_title")}
+        description={t("booking_questions_description")}
+        addFieldLabel={t("add_a_booking_question")}
+        formProp="bookingFields"
+      />
       <hr />
       <RequiresConfirmationController
         seatsEnabled={seatsEnabled}
@@ -213,22 +155,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr />
-      <Controller
-        name="disableGuests"
-        control={formMethods.control}
-        defaultValue={eventType.disableGuests}
-        render={({ field: { value, onChange } }) => (
-          <SettingsToggle
-            title={t("disable_guests")}
-            description={t("disable_guests_description")}
-            checked={value}
-            onCheckedChange={(e) => onChange(e)}
-            disabled={seatsEnabled}
-          />
-        )}
-      />
-
       <hr />
       <Controller
         name="hideCalendarNotes"
@@ -244,22 +170,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         )}
       />
       <hr />
-      <Controller
-        name="metadata.additionalNotesRequired"
-        control={formMethods.control}
-        defaultValue={!!eventType.metadata.additionalNotesRequired}
-        render={({ field: { value, onChange } }) => (
-          <div className="flex space-x-3 ">
-            <SettingsToggle
-              title={t("require_additional_notes")}
-              description={t("require_additional_notes_description")}
-              checked={!!value}
-              onCheckedChange={(e) => onChange(e)}
-            />
-          </div>
-        )}
-      />
-      <hr />
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
@@ -354,19 +264,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            data-testid="offer-seats-toggle"
             title={t("offer_seats")}
             description={t("offer_seats_description")}
             checked={value}
             onCheckedChange={(e) => {
               // Enabling seats will disable guests and requiring confirmation until fully supported
               if (e) {
-                formMethods.setValue("disableGuests", true);
+                toggleGuests(false);
                 formMethods.setValue("requiresConfirmation", false);
                 setRequiresConfirmation(false);
                 formMethods.setValue("seatsPerTimeSlot", 2);
               } else {
                 formMethods.setValue("seatsPerTimeSlot", null);
-                formMethods.setValue("disableGuests", false);
+                toggleGuests(true);
               }
               onChange(e);
             }}>
@@ -404,129 +315,14 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
 
       {showEventNameTip && (
-        <Dialog open={showEventNameTip} onOpenChange={setShowEventNameTip}>
-          <DialogContent
-            title={t("custom_event_name")}
-            description={t("custom_event_name_description")}
-            type="creation">
-            <TextField
-              label={t("event_name_in_calendar")}
-              type="text"
-              placeholder={t("meeting_with_user")}
-              defaultValue={eventType.eventName || ""}
-              {...formMethods.register("eventName", {
-                onChange: (e) => {
-                  if (!e.target.value || !formMethods.getValues("eventName")) {
-                    return setPreviewText(getEventName(eventNameObject));
-                  }
-                  changePreviewText(eventNameObject, e.target.value);
-                },
-              })}
-              className="mb-0"
-            />
-            <div className="text-sm">
-              <div className="mb-6 rounded-md bg-gray-100 p-2">
-                <h1 className="mb-2 ml-1 font-medium text-gray-900">{t("available_variables")}</h1>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Event type title}`}</p>
-                  <p className="text-gray-900">{t("event_name_info")}</p>
-                </div>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Organiser}`}</p>
-                  <p className="text-gray-900">{t("your_full_name")}</p>
-                </div>
-                <div className="mb-2.5 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Scheduler}`}</p>
-                  <p className="text-gray-900">{t("scheduler_full_name")}</p>
-                </div>
-                <div className="mb-1 flex font-normal">
-                  <p className="ml-1 mr-5 w-28 text-gray-400">{`{Location}`}</p>
-                  <p className="text-gray-900">{t("location_info")}</p>
-                </div>
-              </div>
-              <h1 className="mb-2 text-[14px] font-medium leading-4">{t("preview")}</h1>
-              <div
-                className="flex h-[212px] w-full rounded-md border-y bg-cover bg-center"
-                style={{
-                  backgroundImage: "url(/calendar-preview.svg)",
-                }}>
-                <div className="m-auto flex items-center justify-center self-stretch">
-                  <div className="mt-3 ml-11 box-border h-[110px] w-[120px] flex-col items-start gap-1 rounded-md border border-solid border-black bg-gray-100 text-[12px] leading-3">
-                    <p className="overflow-hidden text-ellipsis p-1.5 font-medium text-gray-900">
-                      {previewText}
-                    </p>
-                    <p className="ml-1.5 text-[10px] font-normal text-gray-600">8 - 10 AM</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <DialogFooter>
-              <DialogClose onClick={() => formMethods.setValue("eventName", eventType.eventName ?? "")}>
-                {t("cancel")}
-              </DialogClose>
-              <Button color="primary" onClick={() => setShowEventNameTip(false)}>
-                {t("create")}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
+        <CustomEventTypeModal
+          close={closeEventNameTip}
+          setValue={setEventName}
+          defaultValue={formMethods.getValues("eventName") || eventType.eventName || ""}
+          placeHolder={eventNamePlaceholder}
+          event={eventNameObject}
+        />
       )}
-      <Controller
-        name="customInputs"
-        control={formMethods.control}
-        defaultValue={customInputs}
-        render={() => (
-          <Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
-            <DialogContent
-              type="creation"
-              Icon={FiPlus}
-              title={t("add_new_custom_input_field")}
-              description={t("this_input_will_shown_booking_this_event")}>
-              <CustomInputTypeForm
-                selectedCustomInput={selectedCustomInput}
-                onSubmit={(values) => {
-                  const customInput: CustomInputParsed = {
-                    id: getRandomId(),
-                    eventTypeId: -1,
-                    label: values.label,
-                    placeholder: values.placeholder,
-                    required: values.required,
-                    type: values.type,
-                    options: values.options,
-                    hasToBeCreated: true,
-                  };
-                  if (selectedCustomInput) {
-                    selectedCustomInput.label = customInput.label;
-                    selectedCustomInput.placeholder = customInput.placeholder;
-                    selectedCustomInput.required = customInput.required;
-                    selectedCustomInput.type = customInput.type;
-                    selectedCustomInput.options = customInput.options || undefined;
-                    selectedCustomInput.hasToBeCreated = false;
-                    // Update by id
-                    const inputIndex = customInputs.findIndex((input) => input.id === values.id);
-                    customInputs[inputIndex] = selectedCustomInput;
-                    setCustomInputs(customInputs);
-                    formMethods.setValue("customInputs", customInputs);
-                  } else {
-                    const concatted = customInputs.concat({
-                      ...customInput,
-                      options: customInput.options,
-                    });
-                    console.log(concatted);
-                    setCustomInputs(concatted);
-                    formMethods.setValue("customInputs", concatted);
-                  }
-
-                  setSelectedCustomInputModalOpen(false);
-                }}
-                onCancel={() => {
-                  setSelectedCustomInputModalOpen(false);
-                }}
-              />
-            </DialogContent>
-          </Dialog>
-        )}
-      />
     </div>
   );
 };

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,9 +1,11 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { Key } from "react";
 import React, { useEffect, useState } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { SingleValue } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
@@ -11,8 +13,17 @@ import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { PeriodType } from "@calcom/prisma/client";
-import type { BookingLimit } from "@calcom/types/Calendar";
-import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import type { IntervalLimit } from "@calcom/types/Calendar";
+import {
+  Button,
+  DateRangePicker,
+  Input,
+  InputField,
+  Label,
+  Select,
+  SettingsToggle,
+  TextField,
+} from "@calcom/ui";
 import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
@@ -77,6 +88,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
           label={t("minimum_booking_notice")}
           type="number"
           placeholder="0"
+          min={0}
           className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
         />
         <input type="hidden" ref={ref} {...passThroughProps} />
@@ -260,7 +272,34 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 formMethods.setValue("bookingLimits", {});
               }
             }}>
-            <BookingLimits />
+            <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+          </SettingsToggle>
+        )}
+      />
+      <hr />
+      <Controller
+        name="durationLimits"
+        control={formMethods.control}
+        render={({ field: { value } }) => (
+          <SettingsToggle
+            title={t("limit_total_booking_duration")}
+            description={t("limit_total_booking_duration_description")}
+            checked={Object.keys(value ?? {}).length > 0}
+            onCheckedChange={(active) => {
+              if (active) {
+                formMethods.setValue("durationLimits", {
+                  PER_DAY: 60,
+                });
+              } else {
+                formMethods.setValue("durationLimits", {});
+              }
+            }}>
+            <IntervalLimitsManager
+              propertyName="durationLimits"
+              defaultLimit={60}
+              step={15}
+              textFieldSuffix={t("minutes")}
+            />
           </SettingsToggle>
         )}
       />
@@ -348,124 +387,159 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   );
 };
 
-const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"];
-type BookingLimitsKey = keyof BookingLimit;
-const BookingLimits = () => {
+type IntervalLimitsKey = keyof IntervalLimit;
+
+const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const;
+
+const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({
+  value: key as keyof IntervalLimit,
+  label: `Per ${key.split("_")[1].toLocaleLowerCase()}`,
+}));
+
+type IntervalLimitItemProps = {
+  key: Key;
+  limitKey: IntervalLimitsKey;
+  step: number;
+  value: number;
+  textFieldSuffix?: string;
+  selectOptions: { value: keyof IntervalLimit; label: string }[];
+  hasDeleteButton?: boolean;
+  onDelete: (intervalLimitsKey: IntervalLimitsKey) => void;
+  onLimitChange: (intervalLimitsKey: IntervalLimitsKey, limit: number) => void;
+  onIntervalSelect: (interval: SingleValue<{ value: keyof IntervalLimit; label: string }>) => void;
+};
+
+const IntervalLimitItem = ({
+  limitKey,
+  step,
+  value,
+  textFieldSuffix,
+  selectOptions,
+  hasDeleteButton,
+  onDelete,
+  onLimitChange,
+  onIntervalSelect,
+}: IntervalLimitItemProps) => {
+  return (
+    <div className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse" key={limitKey}>
+      <TextField
+        required
+        type="number"
+        containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
+        className="mb-0"
+        placeholder={`${value}`}
+        min={step}
+        step={step}
+        defaultValue={value}
+        addOnSuffix={textFieldSuffix}
+        onChange={(e) => onLimitChange(limitKey, parseInt(e.target.value))}
+      />
+      <Select
+        options={selectOptions}
+        isSearchable={false}
+        defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
+        onChange={onIntervalSelect}
+      />
+      {hasDeleteButton && (
+        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+      )}
+    </div>
+  );
+};
+
+type IntervalLimitsManagerProps<K extends "durationLimits" | "bookingLimits"> = {
+  propertyName: K;
+  defaultLimit: number;
+  step: number;
+  textFieldSuffix?: string;
+};
+
+const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
+  propertyName,
+  defaultLimit,
+  step,
+  textFieldSuffix,
+}: IntervalLimitsManagerProps<K>) => {
   const { watch, setValue, control } = useFormContext<FormValues>();
-  const watchBookingLimits = watch("bookingLimits");
+  const watchIntervalLimits = watch(propertyName);
   const { t } = useLocale();
 
   const [animateRef] = useAutoAnimate<HTMLUListElement>();
 
-  const BOOKING_LIMIT_OPTIONS: {
-    value: keyof BookingLimit;
-    label: string;
-  }[] = [
-    {
-      value: "PER_DAY",
-      label: "Per Day",
-    },
-    {
-      value: "PER_WEEK",
-      label: "Per Week",
-    },
-    {
-      value: "PER_MONTH",
-      label: "Per Month",
-    },
-    {
-      value: "PER_YEAR",
-      label: "Per Year",
-    },
-  ];
-
   return (
     <Controller
-      name="bookingLimits"
+      name={propertyName}
       control={control}
       render={({ field: { value, onChange } }) => {
-        const currentBookingLimits = value;
+        const currentIntervalLimits = value;
+
+        const addLimit = () => {
+          if (!currentIntervalLimits || !watchIntervalLimits) return;
+          const currentKeys = Object.keys(watchIntervalLimits);
+
+          const [rest] = Object.values(INTERVAL_LIMIT_OPTIONS).filter(
+            (option) => !currentKeys.includes(option.value)
+          );
+          if (!rest || !currentKeys.length) return;
+          //currentDurationLimits is always defined so can be casted
+          // @ts-expect-error FIXME Fix these typings
+          setValue(propertyName, {
+            ...watchIntervalLimits,
+            [rest.value]: defaultLimit,
+          });
+        };
+
         return (
           <ul ref={animateRef}>
-            {currentBookingLimits &&
-              watchBookingLimits &&
-              Object.entries(currentBookingLimits)
-                .sort(([limitkeyA], [limitKeyB]) => {
+            {currentIntervalLimits &&
+              watchIntervalLimits &&
+              Object.entries(currentIntervalLimits)
+                .sort(([limitKeyA], [limitKeyB]) => {
                   return (
-                    validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) -
-                    validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey)
+                    intervalOrderKeys.indexOf(limitKeyA as IntervalLimitsKey) -
+                    intervalOrderKeys.indexOf(limitKeyB as IntervalLimitsKey)
                   );
                 })
-                .map(([key, bookingAmount]) => {
-                  const bookingLimitKey = key as BookingLimitsKey;
+                .map(([key, value]) => {
+                  const limitKey = key as IntervalLimitsKey;
                   return (
-                    <div
-                      className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse"
-                      key={bookingLimitKey}>
-                      <Input
-                        id={`${bookingLimitKey}-limit`}
-                        type="number"
-                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
-                        placeholder="1"
-                        min={1}
-                        defaultValue={bookingAmount}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val));
-                        }}
-                      />
-                      <Select
-                        options={BOOKING_LIMIT_OPTIONS.filter(
-                          (option) => !Object.keys(currentBookingLimits).includes(option.value)
-                        )}
-                        isSearchable={false}
-                        defaultValue={BOOKING_LIMIT_OPTIONS.find((option) => option.value === key)}
-                        onChange={(val) => {
-                          const current = currentBookingLimits;
-                          const currentValue = watchBookingLimits[bookingLimitKey];
+                    <IntervalLimitItem
+                      key={key}
+                      limitKey={limitKey}
+                      step={step}
+                      value={value}
+                      textFieldSuffix={textFieldSuffix}
+                      hasDeleteButton={Object.keys(currentIntervalLimits).length > 1}
+                      selectOptions={INTERVAL_LIMIT_OPTIONS.filter(
+                        (option) => !Object.keys(currentIntervalLimits).includes(option.value)
+                      )}
+                      onLimitChange={(intervalLimitKey, val) =>
+                        // @ts-expect-error FIXME Fix these typings
+                        setValue(`${propertyName}.${intervalLimitKey}`, val)
+                      }
+                      onDelete={(intervalLimitKey) => {
+                        const current = currentIntervalLimits;
+                        delete current[intervalLimitKey];
+                        onChange(current);
+                      }}
+                      onIntervalSelect={(interval) => {
+                        const current = currentIntervalLimits;
+                        const currentValue = watchIntervalLimits[limitKey];
 
-                          // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
-                          delete current[bookingLimitKey];
-                          const newData = {
-                            ...current,
-                            // Set limit to new selected value (in the example above this means we set the limit to per_week here).
-                            [val?.value as BookingLimitsKey]: currentValue,
-                          };
-                          onChange(newData);
-                        }}
-                      />
-                      <Button
-                        variant="icon"
-                        StartIcon={FiTrash}
-                        color="destructive"
-                        onClick={() => {
-                          const current = currentBookingLimits;
-                          delete current[key as BookingLimitsKey];
-                          onChange(current);
-                        }}
-                      />
-                    </div>
+                        // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
+                        delete current[limitKey];
+                        const newData = {
+                          ...current,
+                          // Set limit to new selected value (in the example above this means we set the limit to per_week here).
+                          [interval?.value as IntervalLimitsKey]: currentValue,
+                        };
+                        onChange(newData);
+                      }}
+                    />
                   );
                 })}
-            {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
-              <Button
-                color="minimal"
-                StartIcon={FiPlus}
-                onClick={() => {
-                  if (!currentBookingLimits || !watchBookingLimits) return;
-                  const currentKeys = Object.keys(watchBookingLimits);
-
-                  const rest = Object.values(BOOKING_LIMIT_OPTIONS).filter(
-                    (option) => !currentKeys.includes(option.value)
-                  );
-                  if (!rest || !currentKeys) return;
-                  //currentBookingLimits is always defined so can be casted
-
-                  setValue("bookingLimits", {
-                    ...watchBookingLimits,
-                    [rest[0].value]: 1,
-                  });
-                }}>
+            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
+              <Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
                 {t("add_limit")}
               </Button>
             )}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import type { MultiValue } from "react-select";
 import { z } from "zod";
@@ -13,8 +13,20 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType, LocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
-import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import turndown from "@calcom/lib/turndownService";
+import {
+  Button,
+  Label,
+  Select,
+  SettingsToggle,
+  Skeleton,
+  TextField,
+  Editor,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -33,27 +45,51 @@ const getLocationFromType = (
   }
 };
 
-const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"], type: string) => {
-  for (const locationType of options) {
-    for (const location of locationType.options) {
-      if (location.value === type && location.disabled === false) {
-        return location;
-      }
-    }
-  }
+interface DescriptionEditorProps {
+  description?: string | null;
+}
+
+const DescriptionEditor = (props: DescriptionEditorProps) => {
+  const formMethods = useFormContext<FormValues>();
+  const [mounted, setIsMounted] = useState(false);
+  const { t } = useLocale();
+  const { description } = props;
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return mounted ? (
+    <Editor
+      getText={() => md.render(formMethods.getValues("description") || description || "")}
+      setText={(value: string) => formMethods.setValue("description", turndown(value))}
+      excludedToolbarItems={["blockType"]}
+      placeholder={t("quick_video_meeting")}
+    />
+  ) : (
+    <SkeletonContainer>
+      <SkeletonText className="block h-24 w-full" />
+    </SkeletonContainer>
+  );
 };
 
 export const EventSetupTab = (
-  props: Pick<EventTypeSetupProps, "eventType" | "locationOptions" | "team" | "teamMembers">
+  props: Pick<
+    EventTypeSetupProps,
+    "eventType" | "locationOptions" | "team" | "teamMembers" | "destinationCalendar"
+  >
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType, locationOptions, team } = props;
+  const { eventType, team, destinationCalendar } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   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 multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
     value: mins,
     label: t("multiple_duration_mins", { count: mins }),
@@ -152,14 +188,11 @@ export const EventSetupTab = (
       return true;
     });
 
-    const defaultValue = getDefaultLocationValue(locationOptions, "integrations:daily");
-
     return (
       <div className="w-full">
         {validLocations.length === 0 && (
           <div className="flex">
             <LocationSelect
-              defaultValue={defaultValue}
               placeholder={t("select")}
               options={locationOptions}
               isSearchable={false}
@@ -190,24 +223,30 @@ export const EventSetupTab = (
               if (!eventLocationType) {
                 return null;
               }
-              // We dont want to translate the string link - it doesnt exist in common.json and it gets prefixed/suffixed with __ or //
+
               const eventLabel =
-                eventLocationType.defaultValueVariable === "link"
-                  ? eventLocationType.label
-                  : t(location[eventLocationType.defaultValueVariable] || eventLocationType.label);
+                location[eventLocationType.defaultValueVariable] || t(eventLocationType.label);
 
               return (
                 <li
+                  onClick={() => {
+                    locationFormMethods.setValue("locationType", location.type);
+                    locationFormMethods.unregister("locationLink");
+                    locationFormMethods.unregister("locationAddress");
+                    locationFormMethods.unregister("locationPhoneNumber");
+                    setEditingLocationType(location.type);
+                    openLocationModal(location.type);
+                  }}
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
-                  <div className="flex max-w-full justify-between">
-                    <div key={index} className="flex flex-grow items-center">
+                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2 hover:cursor-pointer">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center">
                       <img
                         src={eventLocationType.iconUrl}
                         className="h-4 w-4"
                         alt={`${eventLocationType.label} logo`}
                       />
-                      <span className="truncate text-sm ltr:ml-1 rtl:mr-1">{eventLabel}</span>
+                      <span className="line-clamp-1 text-sm ltr:ml-1 rtl:mr-1">{eventLabel}</span>
                     </div>
                     <div className="flex">
                       <button
@@ -232,7 +271,10 @@ export const EventSetupTab = (
                 </li>
               );
             })}
-            {validLocations.some((location) => location.type === MeetLocationType) && (
+            {validLocations.some(
+              (location) =>
+                location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
+            ) && (
               <div className="flex text-sm text-gray-600">
                 <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
@@ -244,14 +286,17 @@ export const EventSetupTab = (
                       className="underline">
                       here.
                     </Link>{" "}
-                    We will fall back to Cal video if you do not change it.
                   </p>
                 </Trans>
               </div>
             )}
-            {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
+            {validLocations.length > 0 && (
               <li>
-                <Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
+                <Button
+                  data-testid="add-location"
+                  StartIcon={FiPlus}
+                  color="minimal"
+                  onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
                 </Button>
               </li>
@@ -271,12 +316,10 @@ export const EventSetupTab = (
           defaultValue={eventType.title}
           {...formMethods.register("title")}
         />
-        <TextField
-          label={t("description")}
-          placeholder={t("quick_video_meeting")}
-          defaultValue={eventType.description ?? ""}
-          {...formMethods.register("description")}
-        />
+        <div>
+          <Label>{t("description")}</Label>
+          <DescriptionEditor description={eventType?.description} />
+        </div>
         <TextField
           required
           label={t("URL")}
@@ -392,6 +435,7 @@ 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}

apps/web/components/eventtype/EventTeamTab.tsx

@@ -1,7 +1,7 @@
-import { SchedulingType } from "@prisma/client";
+import type { SchedulingType } from "@prisma/client";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import { useEffect, useRef } from "react";
 import type { ComponentProps } from "react";
-import type { Control } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import type { Options } from "react-select";
 
@@ -35,65 +35,169 @@ const sortByLabel = (a: ReturnType<typeof mapUserToValue>, b: ReturnType<typeof
   return 0;
 };
 
-const FixedHosts = ({
-  control,
+const CheckedHostField = ({
   labelText,
   placeholder,
   options = [],
+  isFixed,
+  value,
+  onChange,
   ...rest
 }: {
-  control: Control<FormValues>;
   labelText: string;
   placeholder: string;
+  isFixed: boolean;
+  value: { isFixed: boolean; userId: number }[];
+  onChange?: (options: { isFixed: boolean; userId: number }[]) => void;
   options?: Options<CheckedSelectOption>;
-} & Partial<ComponentProps<typeof CheckedTeamSelect>>) => {
+} & Omit<Partial<ComponentProps<typeof CheckedTeamSelect>>, "onChange" | "value">) => {
   return (
     <div className="flex flex-col space-y-5 bg-gray-50 p-4">
       <div>
         <Label>{labelText}</Label>
-        <Controller
-          name="hostsFixed"
-          control={control}
-          render={({ field: { onChange, value } }) => {
-            return (
-              <CheckedTeamSelect
-                isDisabled={false}
-                onChange={(options) => {
-                  onChange(
-                    options.map((option) => ({
-                      isFixed: true,
-                      userId: parseInt(option.value, 10),
-                    }))
-                  );
-                }}
-                value={value
-                  .map(
-                    (host) =>
-                      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                      options.find((member) => member.value === host.userId.toString())!
-                  )
-                  .filter(Boolean)}
-                controlShouldRenderValue={false}
-                options={options}
-                placeholder={placeholder}
-                {...rest}
-              />
-            );
+        <CheckedTeamSelect
+          isOptionDisabled={(option) => !!value.find((host) => host.userId.toString() === option.value)}
+          onChange={(options) => {
+            onChange &&
+              onChange(
+                options.map((option) => ({
+                  isFixed,
+                  userId: parseInt(option.value, 10),
+                }))
+              );
           }}
+          value={(value || [])
+            .filter(({ isFixed: _isFixed }) => isFixed === _isFixed)
+            .map(
+              (host) =>
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                options.find((member) => member.value === host.userId.toString())!
+            )
+            .filter(Boolean)}
+          controlShouldRenderValue={false}
+          options={options}
+          placeholder={placeholder}
+          {...rest}
         />
       </div>
     </div>
   );
 };
 
-export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
-  const formMethods = useFormContext<FormValues>();
+const RoundRobinHosts = ({
+  teamMembers,
+  value,
+  onChange,
+}: {
+  value: { isFixed: boolean; userId: number }[];
+  onChange: (hosts: { isFixed: boolean; userId: number }[]) => void;
+  teamMembers: {
+    value: string;
+    label: string;
+    avatar: string;
+    email: string;
+  }[];
+}) => {
   const { t } = useLocale();
+  return (
+    <>
+      <CheckedHostField
+        options={teamMembers.sort(sortByLabel)}
+        isFixed={true}
+        onChange={(changeValue) => {
+          onChange([...value.filter(({ isFixed }) => !isFixed), ...changeValue]);
+        }}
+        value={value}
+        placeholder={t("add_fixed_hosts")}
+        labelText={t("fixed_hosts")}
+      />
+      <CheckedHostField
+        options={teamMembers.sort(sortByLabel)}
+        onChange={(changeValue) => onChange([...value.filter(({ isFixed }) => isFixed), ...changeValue])}
+        value={value}
+        isFixed={false}
+        placeholder={t("add_attendees")}
+        labelText={t("round_robin_hosts")}
+      />
+    </>
+  );
+};
 
+const Hosts = ({
+  teamMembers,
+}: {
+  teamMembers: {
+    value: string;
+    label: string;
+    avatar: string;
+    email: string;
+  }[];
+}) => {
+  const { t } = useLocale();
+  const {
+    control,
+    resetField,
+    getValues,
+    formState: { submitCount },
+  } = useFormContext<FormValues>();
   const schedulingType = useWatch({
-    control: formMethods.control,
+    control,
     name: "schedulingType",
   });
+  const initialValue = useRef<{
+    hosts: FormValues["hosts"];
+    schedulingType: SchedulingType | null;
+    submitCount: number;
+  } | null>(null);
+
+  useEffect(() => {
+    // Handles init & out of date initial value after submission.
+    if (!initialValue.current || initialValue.current?.submitCount !== submitCount) {
+      initialValue.current = { hosts: getValues("hosts"), schedulingType, submitCount };
+      return;
+    }
+    resetField("hosts", {
+      defaultValue: initialValue.current.schedulingType === schedulingType ? initialValue.current.hosts : [],
+    });
+  }, [schedulingType, resetField, getValues, submitCount]);
+
+  return (
+    <Controller<FormValues>
+      name="hosts"
+      render={({ field: { onChange, value } }) => {
+        const schedulingTypeRender = {
+          COLLECTIVE: (
+            <CheckedHostField
+              value={value}
+              onChange={onChange}
+              isFixed={true}
+              options={teamMembers.sort(sortByLabel)}
+              placeholder={t("add_attendees")}
+              labelText={t("team")}
+            />
+          ),
+          ROUND_ROBIN: (
+            <>
+              <RoundRobinHosts teamMembers={teamMembers} onChange={onChange} value={value} />
+              {/*<TextField
+        required
+        type="number"
+        label={t("minimum_round_robin_hosts_count")}
+        defaultValue={1}
+        {...formMethods.register("minimumHostCount")}
+        addOnSuffix={<>{t("hosts")}</>}
+                />*/}
+            </>
+          ),
+        };
+        return !!schedulingType ? schedulingTypeRender[schedulingType] : <></>;
+      }}
+    />
+  );
+};
+
+export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "teamMembers" | "team">) => {
+  const { t } = useLocale();
 
   const schedulingTypeOptions: {
     value: SchedulingType;
@@ -101,17 +205,16 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
     // description: string;
   }[] = [
     {
-      value: SchedulingType.COLLECTIVE,
+      value: "COLLECTIVE",
       label: t("collective"),
       // description: t("collective_description"),
     },
     {
-      value: SchedulingType.ROUND_ROBIN,
+      value: "ROUND_ROBIN",
       label: t("round_robin"),
       // description: t("round_robin_description"),
     },
   ];
-
   const teamMembersOptions = teamMembers.map(mapUserToValue);
   return (
     <div>
@@ -119,9 +222,8 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
         <div className="space-y-5">
           <div className="flex flex-col">
             <Label>{t("scheduling_type")}</Label>
-            <Controller
+            <Controller<FormValues>
               name="schedulingType"
-              control={formMethods.control}
               render={({ field: { value, onChange } }) => (
                 <Select
                   options={schedulingTypeOptions}
@@ -134,75 +236,7 @@ export const EventTeamTab = ({ team, teamMembers }: Pick<EventTypeSetupProps, "t
               )}
             />
           </div>
-
-          {schedulingType === SchedulingType.COLLECTIVE && (
-            <FixedHosts
-              options={teamMembersOptions.sort(sortByLabel)}
-              placeholder={t("add_attendees")}
-              labelText={t("team")}
-              control={formMethods.control}
-            />
-          )}
-          {schedulingType === SchedulingType.ROUND_ROBIN && (
-            <>
-              <FixedHosts
-                options={teamMembersOptions.sort(sortByLabel)}
-                isOptionDisabled={(option) =>
-                  !!formMethods.getValues("hosts").find((host) => host.userId.toString() === option.value)
-                }
-                placeholder={t("add_fixed_hosts")}
-                labelText={t("fixed_hosts")}
-                control={formMethods.control}
-              />
-              <div className="flex flex-col space-y-5 bg-gray-50 p-4">
-                <div>
-                  <Label>{t("round_robin_hosts")}</Label>
-                  <Controller
-                    name="hosts"
-                    control={formMethods.control}
-                    render={({ field: { onChange, value } }) => (
-                      <CheckedTeamSelect
-                        isDisabled={false}
-                        onChange={(options) =>
-                          onChange(
-                            options.map((option) => ({
-                              isFixed: false,
-                              userId: parseInt(option.value, 10),
-                            }))
-                          )
-                        }
-                        value={value
-                          .map(
-                            (host) =>
-                              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                              teamMembers
-                                .map(mapUserToValue)
-                                .find((member) => member.value === host.userId.toString())!
-                          )
-                          .filter(Boolean)}
-                        controlShouldRenderValue={false}
-                        options={teamMembersOptions.sort(sortByLabel)}
-                        isOptionDisabled={(option) =>
-                          !!formMethods
-                            .getValues("hostsFixed")
-                            .find((host) => host.userId.toString() === option.value)
-                        }
-                        placeholder={t("add_attendees")}
-                      />
-                    )}
-                  />
-                </div>
-                {/*<TextField
-                  required
-                  type="number"
-                  label={t("minimum_round_robin_hosts_count")}
-                  defaultValue={1}
-                  {...formMethods.register("minimumHostCount")}
-                  addOnSuffix={<>{t("hosts")}</>}
-                          />*/}
-              </div>
-            </>
-          )}
+          <Hosts teamMembers={teamMembersOptions} />
         </div>
       )}
     </div>

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

@@ -1,11 +1,11 @@
 export type EventTypeDescriptionSafeProps = {
-  eventType: { description: string | null };
+  eventType: { description: string | null; descriptionAsSafeHTML: string | null };
 };
 
 export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
   const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
-  // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts
-  if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML };
+  if (eventType.description)
+    props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML || "" };
   return <div {...props} />;
 };
 

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -197,7 +197,7 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          <div className="hidden items-center rounded-md px-2 sm:flex sm:hover:bg-gray-100">
+          <div className="hidden items-center rounded-md px-2 sm:hover:bg-gray-100 lg:flex">
             <Skeleton
               as={Label}
               htmlFor="hiddenSwitch"
@@ -206,7 +206,7 @@ function EventTypeSingleLayout({
             </Skeleton>
             <Switch
               id="hiddenSwitch"
-              defaultChecked={formMethods.getValues("hidden")}
+              checked={formMethods.watch("hidden")}
               onCheckedChange={(e) => {
                 formMethods.setValue("hidden", e);
               }}
@@ -220,6 +220,7 @@ function EventTypeSingleLayout({
             <Tooltip content={t("preview")}>
               <Button
                 color="secondary"
+                data-testid="preview-button"
                 target="_blank"
                 variant="icon"
                 href={permalink}
@@ -246,7 +247,7 @@ function EventTypeSingleLayout({
               tooltip={t("embed")}
             />
             <Button
-              color="secondary"
+              color="destructive"
               variant="icon"
               StartIcon={FiTrash}
               tooltip={t("delete")}
@@ -261,7 +262,7 @@ function EventTypeSingleLayout({
             <DropdownMenuTrigger asChild>
               <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent>
+            <DropdownMenuContent style={{ minWidth: "200px" }}>
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   target="_blank"
@@ -293,17 +294,17 @@ function EventTypeSingleLayout({
                   {t("delete")}
                 </DropdownItem>
               </DropdownMenuItem>
-              <DropdownMenuSeparator className="block sm:hidden" />
-              <div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
+              <DropdownMenuSeparator />
+              <div className="flex h-9 flex-row items-center justify-between py-2 px-4 sm:hover:bg-gray-100">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
-                  className="mt-2 inline cursor-pointer self-center pr-2 sm:hidden">
+                  className="mt-2 inline cursor-pointer self-center pr-2 ">
                   {t("hide_from_profile")}
                 </Skeleton>
                 <Switch
                   id="hiddenSwitch"
-                  defaultChecked={formMethods.getValues("hidden")}
+                  checked={formMethods.watch("hidden")}
                   onCheckedChange={(e) => {
                     formMethods.setValue("hidden", e);
                   }}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -9,7 +9,7 @@ import type z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Alert, Input, Label, SettingsToggle } from "@calcom/ui";
+import { Input, Label, SettingsToggle } from "@calcom/ui";
 
 type RequiresConfirmationControllerProps = {
   metadata: z.infer<typeof EventTypeMetaDataSchema>;
@@ -39,118 +39,116 @@ export default function RequiresConfirmationController({
 
   return (
     <div className="block items-start sm:flex">
-      <div className={!seatsEnabled ? "w-full" : ""}>
-        {seatsEnabled ? (
-          <Alert severity="warning" title="Seats option doesn't support confirmation requirement" />
-        ) : (
-          <Controller
-            name="requiresConfirmation"
-            control={formMethods.control}
-            render={() => (
-              <SettingsToggle
-                title={t("requires_confirmation")}
-                description={t("requires_confirmation_description")}
-                checked={requiresConfirmation}
-                onCheckedChange={(val) => {
-                  formMethods.setValue("requiresConfirmation", val);
-                  onRequiresConfirmation(val);
-                }}>
-                <RadioGroup.Root
-                  defaultValue={
-                    requiresConfirmation
-                      ? requiresConfirmationSetup === undefined
-                        ? "always"
-                        : "notice"
-                      : undefined
+      <div className="w-full">
+        <Controller
+          name="requiresConfirmation"
+          control={formMethods.control}
+          render={() => (
+            <SettingsToggle
+              title={t("requires_confirmation")}
+              disabled={seatsEnabled}
+              tooltip={seatsEnabled ? t("seat_options_doesnt_support_confirmation") : undefined}
+              description={t("requires_confirmation_description")}
+              checked={requiresConfirmation}
+              onCheckedChange={(val) => {
+                formMethods.setValue("requiresConfirmation", val);
+                onRequiresConfirmation(val);
+              }}>
+              <RadioGroup.Root
+                defaultValue={
+                  requiresConfirmation
+                    ? requiresConfirmationSetup === undefined
+                      ? "always"
+                      : "notice"
+                    : undefined
+                }
+                onValueChange={(val) => {
+                  if (val === "always") {
+                    formMethods.setValue("requiresConfirmation", true);
+                    onRequiresConfirmation(true);
+                    formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
+                    setRequiresConfirmationSetup(undefined);
+                  } else if (val === "notice") {
+                    formMethods.setValue("requiresConfirmation", true);
+                    onRequiresConfirmation(true);
+                    formMethods.setValue(
+                      "metadata.requiresConfirmationThreshold",
+                      requiresConfirmationSetup || defaultRequiresConfirmationSetup
+                    );
                   }
-                  onValueChange={(val) => {
-                    if (val === "always") {
-                      formMethods.setValue("requiresConfirmation", true);
-                      onRequiresConfirmation(true);
-                      formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
-                      setRequiresConfirmationSetup(undefined);
-                    } else if (val === "notice") {
-                      formMethods.setValue("requiresConfirmation", true);
-                      onRequiresConfirmation(true);
-                      formMethods.setValue(
-                        "metadata.requiresConfirmationThreshold",
-                        requiresConfirmationSetup || defaultRequiresConfirmationSetup
-                      );
-                    }
-                  }}>
-                  <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
-                    <div className="flex items-center">
-                      <RadioGroup.Item
-                        id="always"
-                        value="always"
-                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                        <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                      </RadioGroup.Item>
-                      <Label htmlFor="always" className="!m-0 flex items-center">
-                        {t("always_requires_confirmation")}
-                      </Label>
-                    </div>
-                    <div className="flex items-center">
-                      <RadioGroup.Item
-                        id="notice"
-                        value="notice"
-                        className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
-                        <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
-                      </RadioGroup.Item>
-                      <Label htmlFor="notice" className="!m-0 flex items-center">
-                        <Trans
-                          i18nKey="when_booked_with_less_than_notice"
-                          defaults="When booked with less than <time></time> notice"
-                          components={{
-                            time: (
-                              <div className="mx-2 flex">
-                                <Input
-                                  type="number"
-                                  min={1}
-                                  onChange={(evt) => {
-                                    const val = Number(evt.target?.value);
-                                    setRequiresConfirmationSetup({
-                                      unit:
-                                        requiresConfirmationSetup?.unit ??
-                                        defaultRequiresConfirmationSetup.unit,
-                                      time: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
-                                  }}
-                                  className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
-                                  defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
-                                />
-                                <select
-                                  onChange={(evt) => {
-                                    const val = evt.target.value as UnitTypeLongPlural;
-                                    setRequiresConfirmationSetup({
-                                      time:
-                                        requiresConfirmationSetup?.time ??
-                                        defaultRequiresConfirmationSetup.time,
-                                      unit: val,
-                                    });
-                                    formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
-                                  }}
-                                  className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
-                                  defaultValue={
-                                    metadata?.requiresConfirmationThreshold?.unit ||
-                                    defaultRequiresConfirmationSetup.unit
-                                  }>
-                                  <option value="minutes">{t("minute_timeUnit")}</option>
-                                  <option value="hours">{t("hour_timeUnit")}</option>
-                                </select>
-                              </div>
-                            ),
-                          }}
-                        />
-                      </Label>
-                    </div>
+                }}>
+                <div className="-ml-2 flex flex-col flex-wrap justify-start gap-y-2 space-y-2">
+                  <div className="flex items-center">
+                    <RadioGroup.Item
+                      id="always"
+                      value="always"
+                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
+                    </RadioGroup.Item>
+                    <Label htmlFor="always" className="!m-0 flex items-center">
+                      {t("always_requires_confirmation")}
+                    </Label>
                   </div>
-                </RadioGroup.Root>
-              </SettingsToggle>
-            )}
-          />
-        )}
+                  <div className="flex items-center">
+                    <RadioGroup.Item
+                      id="notice"
+                      value="notice"
+                      className="min-w-4 flex h-4 w-4 cursor-pointer items-center rounded-full border border-black bg-white focus:border-2 focus:outline-none ltr:mr-2 rtl:ml-2">
+                      <RadioGroup.Indicator className="relative flex h-4 w-4 items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-black" />
+                    </RadioGroup.Item>
+                    <Label htmlFor="notice" className="!m-0 flex items-center">
+                      <Trans
+                        i18nKey="when_booked_with_less_than_notice"
+                        defaults="When booked with less than <time></time> notice"
+                        components={{
+                          time: (
+                            <div className="mx-2 flex">
+                              <Input
+                                type="number"
+                                min={1}
+                                onChange={(evt) => {
+                                  const val = Number(evt.target?.value);
+                                  setRequiresConfirmationSetup({
+                                    unit:
+                                      requiresConfirmationSetup?.unit ??
+                                      defaultRequiresConfirmationSetup.unit,
+                                    time: val,
+                                  });
+                                  formMethods.setValue("metadata.requiresConfirmationThreshold.time", val);
+                                }}
+                                className="!m-0 block w-16 rounded-md border-gray-300 text-sm [appearance:textfield]"
+                                defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
+                              />
+                              <select
+                                onChange={(evt) => {
+                                  const val = evt.target.value as UnitTypeLongPlural;
+                                  setRequiresConfirmationSetup({
+                                    time:
+                                      requiresConfirmationSetup?.time ??
+                                      defaultRequiresConfirmationSetup.time,
+                                    unit: val,
+                                  });
+                                  formMethods.setValue("metadata.requiresConfirmationThreshold.unit", val);
+                                }}
+                                className="ml-2 block h-9 rounded-md border-gray-300 py-2 pl-3 pr-10 text-sm focus:outline-none"
+                                defaultValue={
+                                  metadata?.requiresConfirmationThreshold?.unit ||
+                                  defaultRequiresConfirmationSetup.unit
+                                }>
+                                <option value="minutes">{t("minute_timeUnit")}</option>
+                                <option value="hours">{t("hour_timeUnit")}</option>
+                              </select>
+                            </div>
+                          ),
+                        }}
+                      />
+                    </Label>
+                  </div>
+                </div>
+              </RadioGroup.Root>
+            </SettingsToggle>
+          )}
+        />
       </div>
     </div>
   );

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

@@ -1,9 +1,8 @@
+import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
 interface ICreateEventsOnCalendarSelectProps {
   calendar?: RouterInputs["viewer"]["setDestinationCalendar"] | null;
 }

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

@@ -1,11 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/solid";
-import MarkdownIt from "markdown-it";
 import { useRouter } from "next/router";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { md } from "@calcom/lib/markdownIt";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
@@ -14,8 +14,6 @@ import { Avatar } from "@calcom/ui";
 
 import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
-const md = new MarkdownIt("default", { html: true, breaks: true });
-
 type FormData = {
   bio: string;
 };

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

@@ -1,8 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
+import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
@@ -22,23 +25,30 @@ const UserSettings = (props: IUserSettingsProps) => {
   const { t } = useLocale();
   const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess());
   const telemetry = useTelemetry();
+  const userSettingsSchema = z.object({
+    name: z
+      .string()
+      .min(1)
+      .max(FULL_NAME_LENGTH_MAX_LIMIT, {
+        message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
+      }),
+  });
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm({
+  } = useForm<z.infer<typeof userSettingsSchema>>({
     defaultValues: {
       name: user?.name || "",
     },
     reValidateMode: "onChange",
+    resolver: zodResolver(userSettingsSchema),
   });
 
   useEffect(() => {
     telemetry.event(telemetryEventTypes.onboardingStarted);
   }, [telemetry]);
 
-  const defaultOptions = { required: true, maxLength: 255 };
-
   const utils = trpc.useContext();
   const onSuccess = async () => {
     await utils.viewer.me.invalidate();
@@ -67,7 +77,9 @@ const UserSettings = (props: IUserSettingsProps) => {
             {t("full_name")}
           </label>
           <input
-            {...register("name", defaultOptions)}
+            {...register("name", {
+              required: true,
+            })}
             id="name"
             name="name"
             type="text"
@@ -77,7 +89,7 @@ const UserSettings = (props: IUserSettingsProps) => {
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
-              {t("required")}
+              {errors.name.message}
             </p>
           )}
         </div>

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,7 +1,7 @@
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+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";
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,10 +1,10 @@
-import { ShieldCheckIcon } from "@calcom/ui/components/icon";
+import { FiShield } from "@calcom/ui/components/icon";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <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">
-        <ShieldCheckIcon className="h-6 w-6 text-white" />
+        <FiShield className="h-6 w-6 text-white" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/components/settings/CalendarSwitch.tsx

@@ -75,7 +75,9 @@ export function CalendarSwitch(props: {
       />
       {props.defaultSelected && (
         <Badge variant="gray">
-          <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          <div className="flex">
+            <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          </div>
         </Badge>
       )}
     </div>

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+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";
 

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, TextField } from "@calcom/ui";
 

apps/web/components/setup/AdminUser.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { isPasswordValid } from "@calcom/lib/auth";
+import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";

apps/web/components/team/screens/Team.tsx

@@ -1,16 +1,15 @@
-import MarkdownIt from "markdown-it";
 import Link from "next/link";
-import type { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
-const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
-
-type TeamType = TeamPageProps["team"];
+type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
-type MemberType = MembersType[number];
+type MemberType = MembersType[number] & { safeBio: string | null };
+
+type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
@@ -19,7 +18,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={`/${member.username}`}>
-      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
+      <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
         <Avatar
           size="md"
           alt={member.name || ""}
@@ -32,7 +31,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
               <>
                 <div
                   className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
+                  dangerouslySetInnerHTML={{ __html: member.safeBio || "" }}
                 />
               </>
             ) : (
@@ -45,7 +44,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   );
 };
 
-const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
+const Members = ({ members, teamName }: { members: MemberType[]; teamName: string | null }) => {
   if (!members || members.length === 0) {
     return null;
   }
@@ -59,7 +58,7 @@ const Members = ({ members, teamName }: { members: MembersType; teamName: string
   );
 };
 
-const Team = ({ team }: Omit<TeamPageProps, "trpcState">) => {
+const Team = ({ team }: { team: TeamTypeWithSafeHtml }) => {
   return (
     <div>
       <Members members={team.members} teamName={team.name} />

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -1,3 +1,4 @@
+import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
@@ -14,7 +15,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
-import { FiCheck, FiEdit2, FiExternalLink, StarIconSolid } from "@calcom/ui/components/icon";
+import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",

apps/web/components/ui/form/LocationSelect.tsx

@@ -3,8 +3,7 @@ import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
-
-import Select from "@components/ui/form/Select";
+import { Select } from "@calcom/ui";
 
 export type LocationOption = {
   label: string;
@@ -17,21 +16,11 @@ export type SingleValueLocationOption = SingleValue<LocationOption>;
 
 export type GroupOptionType = GroupBase<LocationOption>;
 
-const OptionWithIcon = ({
-  icon,
-  isSelected,
-  label,
-}: {
-  icon?: string;
-  isSelected?: boolean;
-  label: string;
-}) => {
+const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
       {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
-      <span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
-        {label}
-      </span>
+      <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );
 };
@@ -40,10 +29,11 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
   return (
     <Select<LocationOption>
       name="location"
+      id="location-select"
       components={{
         Option: (props) => (
           <components.Option {...props}>
-            <OptionWithIcon icon={props.data.icon} label={props.data.label} isSelected={props.isSelected} />
+            <OptionWithIcon icon={props.data.icon} label={props.data.label} />
           </components.Option>
         ),
         SingleValue: (props) => (