v1.8.2

* Delete CreateEventTypeBtn.tsx

* Adding Permission to creation router

* Disable button if membership role is member

* Fix linting error

* Update explicit role selection

Co-authored-by: Omar López <zomars@me.com>

* Type fix

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Omar López <zomars@me.com>

.env.appStore.example

@@ -21,7 +21,8 @@ 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
-GOOGLE_API_CREDENTIALS='{}'
+GOOGLE_API_CREDENTIALS=
+
 # To enable Login with Google you need to:
 # 1. Set `GOOGLE_API_CREDENTIALS` above
 # 2. Set `GOOGLE_LOGIN_ENABLED` to `true`

.env.example

@@ -15,6 +15,9 @@
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
 NEXT_PUBLIC_LICENSE_CONSENT=''
+# To enable enterprise-only features, fill your license key in here.
+# @see https://console.cal.com
+CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************
 
 # - DATABASE ************************************************************************************************
@@ -25,6 +28,7 @@ NEXT_PUBLIC_LICENSE_CONSENT=''
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 # Change to 'http://localhost:3001' if running the website simultaneously
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
 NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
@@ -50,8 +54,8 @@ NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
 NEXTAUTH_COOKIE_DOMAIN=.example.com
 
-# Remove this var if you don't want Cal to collect anonymous usage
-NEXT_PUBLIC_TELEMETRY_KEY=js.2pvs2bbpqq1zxna97wcml.oi2jzirnbj1ev4tc57c5r
+# Set this to '1' if you don't want Cal to collect anonymous usage
+CALCOM_TELEMETRY_DISABLED=
 
 # ApiKey for cronjobs
 CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
@@ -70,15 +74,32 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=
 
+# Inbox to send user feedback
+SEND_FEEDBACK_EMAIL=
+
+# Sengrid
+# Used for email reminders in workflows
+SENDGRID_API_KEY=
+SENDGRID_EMAIL=
+
+# Twilio
+# Used to send SMS reminders in workflows
+TWILIO_SID=
+TWILIO_TOKEN=
+TWILIO_MESSAGING_SID=
+
 # This is used so we can bypass emails in auth flows for E2E testing
 # Set it to "1" if you need to run E2E tests locally
 NEXT_PUBLIC_IS_E2E=
 
 # Used for internal billing system
-NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT=
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRO_PLAN_PRODUCT_ID=
+STRIPE_PREMIUM_PLAN_PRODUCT_ID=
+STRIPE_FREE_PLAN_PRODUCT_ID=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -106,3 +127,6 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 # **********************************************************************************************************
+
+# Set the following value to true if you wish to enable Team Impersonation
+NEXT_PUBLIC_TEAM_IMPERSONATION=false

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,6 +8,8 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
+**Environment**: Staging(main branch) / Production
+
 ## Type of change
 
 <!-- Please delete options that are not relevant. -->

.github/labeler.yml

@@ -0,0 +1,5 @@
+"♻️ autoupdate":
+  - apps/web/public/static/locales/**/*.json
+
+automerge:
+  - apps/web/public/static/locales/**/*.json

.github/workflows/add-to-project.yml

@@ -0,0 +1,22 @@
+name: Add bugs to Bug Hunting
+
+on:
+  issues:
+    types:
+      - opened
+      - labeled
+  pull_request:
+    types:
+      - opened
+      - labeled
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.1.0
+        with:
+          project-url: https://github.com/orgs/calcom/projects/1
+          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
+          labeled: 🐛 bug, 🎨 needs design, 🙋🏻‍♂️help wanted, 🚨 urgent

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

@@ -0,0 +1,58 @@
+# .github/workflows/chromatic.yml
+
+# Workflow name
+name: 'Chromatic'
+
+# Event for the workflow
+on:
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    paths:
+      - apps/storybook/**
+      - packages/ui/**
+  workflow_dispatch:
+
+# List of jobs
+jobs:
+  check-if-ui-has-changed:
+    runs-on: ubuntu-latest
+    # Declare outputs for next jobs
+    outputs:
+      docs_changed: ${{ steps.check_file_changed.outputs.docs_changed }}
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        # Checkout as many commits as needed for the diff
+        fetch-depth: 2
+    - shell: pwsh
+      id: check_file_changed
+      run: |
+        # Diff HEAD with the previous commit
+        $diff = git diff --name-only HEAD^ HEAD
+
+        # Check if a file under /packages/ui or apps/storybook has been modified since the previous commit
+        $SourceDiff = $diff | Where-Object { $_ -match '^packages/ui/' -or $_ -match '^apps/storybook/' }
+        $HasDiff = $SourceDiff.Length -gt 0
+
+        # Set the output named "hasUiChanges"
+        Write-Host "::set-output name=hasUiChanges::$HasDiff"
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    needs: [ check-if-ui-has-changed ]
+    if: needs.checkIfUiHasChanged.outputs.hasUiChanges== 'True'
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 2
+      - name: Install dependencies
+        run: yarn
+        # 👇 Adds Chromatic as a step in the workflow
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Options required to the GitHub Chromatic Action
+        with:
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/check-types.yml

@@ -1,26 +1,24 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
+    paths:
+      - "**.tsx?"
 jobs:
-  types:
-    name: Check types
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
+  check-types:
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2
 
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
-      - run: yarn
+          node-version: 16.x
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
       - run: yarn type-check

.github/workflows/cron-bookingReminder.yml

@@ -7,7 +7,7 @@ on:
     # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
     - cron: "0,15,30,45 * * * *"
 jobs:
-  cron:
+  cron-bookingReminder:
     env:
       APP_URL: ${{ secrets.APP_URL }}
       CRON_API_KEY: ${{ secrets.CRON_API_KEY }}

.github/workflows/cron-downgradeUsers.yml

@@ -7,7 +7,7 @@ on:
     # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
     - cron: "0,15,30,45 * * * *"
 jobs:
-  cron:
+  cron-downgradeUsers:
     env:
       APP_URL: ${{ secrets.APP_URL }}
       CRON_API_KEY: ${{ secrets.CRON_API_KEY }}

.github/workflows/cron-scheduleEmailReminders.yml

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

.github/workflows/cron-scheduleSMSReminders.yml

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

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,99 @@
+name: E2E App-Store Apps
+on:
+  push:
+    branches: [ feature/event-routing ]
+  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/**
+jobs:
+  test:
+    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 }}
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          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
+      - 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
+      - name: Run Tests
+        run: yarn app-e2e-quick
+
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-core
+          path: packages/app-store/**/playwright/results

.github/workflows/e2e-embed.yml

@@ -0,0 +1,99 @@
+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/**
+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 }}
+      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
+        env:
+          POSTGRES_USER: postgres
+          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
+      - 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
+      - name: Run Tests
+        run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
+
+      - name: Upload embed-core 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

.github/workflows/e2e.yml

@@ -3,17 +3,13 @@ on:
   pull_request_target: # So we can test on forks
     branches:
       - main
-    paths-ignore:
-      - public/static/locales/**
+    paths:
+      - apps/web/**
+      - packages/**
 jobs:
-  test:
+  e2e:
     timeout-minutes: 20
-    name: Testing ${{ matrix.node }} and ${{ matrix.os }}
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     env:
       DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
@@ -25,9 +21,15 @@ jobs:
       # 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 }}
       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
@@ -43,6 +45,8 @@ jobs:
       # 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
@@ -58,23 +62,13 @@ jobs:
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 2
-
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          node-version: 16.x
+          cache: "yarn"
 
-      - name: Turbo Cache
-        id: turbo-cache
-        uses: actions/cache@v2
-        with:
-          path: .turbo
-          key: turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-${{ github.event.pull_request.head.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-
-      - run: yarn
       - name: Cache playwright binaries
         uses: actions/cache@v2
         id: playwright-cache
@@ -82,22 +76,18 @@ jobs:
           path: |
             ~/Library/Caches/ms-playwright
             ~/.cache/ms-playwright
-            **/node_modules/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 videos
+      - name: Upload test results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: videos
-          path: |
-            test-results
-            playwright/screenshots
-            playwright/videos
-            playwright/results
-            playwright/reports
+          name: test-results
+          path: test-results

.github/workflows/labeler.yml

@@ -0,0 +1,17 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+
+jobs:
+  labeler:
+    permissions:
+      contents: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v4
+        # Checking the actor will prevent your Action run failing on non-Dependabot
+        # PRs but also ensures that it only does work for Dependabot PRs.
+        if: ${{ github.actor == 'github-actions[bot]' }}
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"

.github/workflows/lint.yml

@@ -3,13 +3,12 @@ on:
   pull_request_target:
     branches:
       - main
+    paths:
+      - "**.tsx?"
+      - "**.jsx?"
 jobs:
   lint:
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout repo
@@ -18,16 +17,15 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 2
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
         with:
-          node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          node-version: 16.x
+          cache: "yarn"
 
       - name: Install deps
         if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn
+        run: yarn --frozen-lockfile
 
       - name: Lint
         run: yarn lint:report
@@ -37,10 +35,11 @@ jobs:
         run: jq -s '[.[]]|flatten' lint-results/*.json &> lint-results/eslint_report.json
 
       - name: Annotate Code Linting Results
-        uses: ataylorme/eslint-annotate-action@1.2.0
+        uses: ataylorme/eslint-annotate-action@v2
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
           report-json: "lint-results/eslint_report.json"
+          only-pr-files: false
 
       - name: Upload ESLint report
         if: ${{ always() }}

.github/workflows/required-checks.yml

@@ -0,0 +1,36 @@
+name: "Meta Workflow: Require Conditional Status Checks"
+on:
+  pull_request:
+    branches:
+      - main
+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/**

.github/workflows/submodule-sync.yml

@@ -3,7 +3,6 @@ on:
   schedule:
     - cron: "15 */4 * * *"
   workflow_dispatch: ~
-
 jobs:
   submodule-sync:
     name: Submodule update
@@ -11,11 +10,11 @@ jobs:
     steps:
       - name: Checkout Code
         uses: actions/checkout@v2
-      - name: run action
-        uses: releasehub-com/github-action-create-pr-parent-submodule@v1
         with:
-          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
-          parent_repository: "calcom/cal.com"
-          checkout_branch: "main"
-          pr_against_branch: "main"
-          owner: "calcom"
+          submodules: recursive
+          token: ${{ secrets.GH_ACCESS_TOKEN }}
+      - name: Commit
+        run: |
+          git config user.email "actions@github.com"
+          git config user.name "github-actions"
+          git commit -am "Auto updated submodule references" && git push || echo "No changes to commit"

.gitignore

@@ -72,3 +72,10 @@ dist
 
 # Linting
 lint-results
+
+#Storybook
+apps/storybook/build-storybook.log
+
+# Snaplet
+.snaplet/snapshots
+.snaplet/structure.d.ts

.gitmodules

@@ -1,6 +1,6 @@
-[submodule "apps/admin"]
-	path = apps/admin
-	url = https://github.com/calcom/admin.git
+[submodule "apps/console"]
+	path = apps/console
+	url = https://github.com/calcom/console.git
 	branch = main
 [submodule "apps/api"]
 	path = apps/api

.husky/pre-commit

@@ -2,3 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 yarn lint-staged
+
+yarn app-store:build && git add packages/app-store/*.generated.*

.kodiak.toml

@@ -4,5 +4,4 @@ version = 1
 autoupdate_label = "♻️ autoupdate"
 
 [approve]
-auto_approve_usernames = ["dependabot"]
-
+auto_approve_usernames = ["dependabot", "github-actions"]

.nvmrc

@@ -1 +1 @@
-14.17
+v16

.snaplet/config.json

@@ -0,0 +1,4 @@
+{
+  "projectId": "cl4u26bwz7962859ply7ibuo43t",
+  "databaseUrl": "postgresql://postgres@localhost:5450/calendso"
+}

.snaplet/manifest.json

@@ -0,0 +1,3 @@
+{
+  "version": "0.3.0"
+}

.snaplet/transform.ts

@@ -0,0 +1,97 @@
+// This transform config was generated by Snaplet.
+// Snaplet found fields that may contain personally identifiable information (PII)
+// and used that to populate this file.
+import { copycat as c } from "@snaplet/copycat";
+
+import type { Transform } from "./structure";
+
+function hasStringProp<T extends string>(x: unknown, key: T): x is { [key in T]: string } {
+  return !!x && typeof x === "object" && key in x;
+}
+
+function replaceKeyIfExists<T extends string>(x: object, key: T) {
+  if (hasStringProp(x, key)) {
+    return { ...x, [key]: c.uuid(x[key]) };
+  }
+  return x;
+}
+
+function generateSlug(x: string) {
+  return c.words(x, { max: 3 }).split(" ").join("-");
+}
+
+function replaceSensitiveKeys(record: object) {
+  return {
+    ...record,
+    ...replaceKeyIfExists(record, "client_id"),
+    ...replaceKeyIfExists(record, "client_secret"),
+    ...replaceKeyIfExists(record, "public_key"),
+    ...replaceKeyIfExists(record, "api_key"),
+    ...replaceKeyIfExists(record, "signing_secret"),
+    ...replaceKeyIfExists(record, "access_token"),
+    ...replaceKeyIfExists(record, "refresh_token"),
+    ...replaceKeyIfExists(record, "stripe_user_id"),
+    ...replaceKeyIfExists(record, "stripe_publishable_key"),
+    ...replaceKeyIfExists(record, "accessToken"),
+    ...replaceKeyIfExists(record, "refreshToken"),
+    ...replaceKeyIfExists(record, "bot_user_id"),
+    ...replaceKeyIfExists(record, "app_id"),
+  };
+}
+
+const generateUsername = (x: string) => `${c.firstName(x)}-${c.lastName(x)}${c.int(x, { min: 2, max: 99 })}`;
+
+const config: Transform = () => ({
+  public: {
+    ApiKey: ({ row }) => ({
+      hashedKey: c.uuid(row.hashedKey),
+    }),
+    App: ({ row }) => ({
+      keys: replaceSensitiveKeys(row.keys),
+    }),
+    Attendee: ({ row }) => ({
+      email: c.email(row.email),
+      name: c.fullName(row.name),
+      timeZone: c.timezone(row.timeZone),
+    }),
+    Credential: ({ row }) => ({
+      key: typeof row.key === "string" ? c.uuid(row.key) : replaceSensitiveKeys(row.key),
+    }),
+    EventType: ({ row }) => ({
+      slug: generateSlug(row.slug),
+      timeZone: c.timezone(row.timeZone),
+      eventName: c.words(row.eventName, { max: 3 }),
+    }),
+    ResetPasswordRequest: ({ row }) => ({
+      email: c.email(row.email),
+    }),
+    Schedule: ({ row }) => ({
+      timeZone: c.timezone(row.timeZone),
+    }),
+    Team: ({ row }) => ({
+      bio: c.sentence(row.bio),
+      name: c.words(row.name, { max: 2 }),
+      slug: generateSlug(row.slug),
+    }),
+    users: ({ row }) =>
+      row.role !== "ADMIN"
+        ? {
+            bio: c.sentence(row.bio),
+            email: c.email(row.email),
+            name: c.fullName(row.name),
+            password: c.password(row.password),
+            timeZone: c.timezone(row.timeZone),
+            username: generateUsername(row.username),
+          }
+        : row,
+    VerificationToken: ({ row }) => ({
+      token: c.uuid(row.token),
+    }),
+    Account: ({ row }) => ({
+      access_token: c.uuid(row.access_token),
+      refresh_token: c.uuid(row.refresh_token),
+    }),
+  },
+});
+
+export default config;

.vscode/extensions.json

@@ -7,6 +7,7 @@
     "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe", // stripe VSCode extension
-    "Prisma.prisma" // syntax|format|completion for prisma
+    "Prisma.prisma", // syntax|format|completion for prisma
+    "rebornix.project-snippets" // Share useful snippets between collaborators
   ]
 }

.vscode/tasks.json

@@ -0,0 +1,74 @@
+{
+  "version": "2.0.0",
+  "presentation": {
+    "echo": false,
+    "reveal": "always",
+    "focus": false,
+    "panel": "dedicated",
+    "showReuseMessage": true
+  },
+  "tasks": [
+    {
+      "label": "Launch Cal.com Development terminals",
+      "dependsOn": [
+        "Web App(3000)",
+        "Website(3001)",
+        "Embed Core(3100)",
+        "Embed React(3101)",
+        "Prisma Studio(5555)",
+        "Maildev(587)"
+      ],
+      // Mark as the default build task so cmd/ctrl+shift+b will create them
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      // The name that shows up in terminal tab
+      "label": "Web App(3000)",
+      // The task will launch a shell
+      "type": "shell",
+      "command": "yarn dev",
+      // Set the shell type
+      // Mark as a background task to avoid the spinner animation on the terminal tab
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Website(3001)",
+      "type": "shell",
+      "command": "cd apps/website && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed Core(3100)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-core && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed React(3101)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-react && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Prisma Studio(5555)",
+      "type": "shell",
+      "command": "yarn db-studio",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Maildev(587)",
+      "type": "shell",
+      "command": "maildev -s 587",
+      "isBackground": false,
+      "problemMatcher": []
+    }
+  ]
+}

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -1,9 +1,26 @@
 # Contributing to Cal.com
 
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
 - 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.
 
+## Areas of expertise
+
+### Legend
+
+✅ = has knowledge
+
+🥇 = is their main priority
+
+⚠️ = is the only one with knowledge
+
+👀 = has no knowledge but wants to be onboarded
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
+  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
+</picture>
+
 ## Developing
 
 The development branch is `main`. This is the branch that all pull

README.md

@@ -18,29 +18,33 @@
     <a href="https://cal.com">Website</a>
     ·
     <a href="https://github.com/calcom/cal.com/issues">Issues</a>
+    ·
+    <a href="https://cal.com/roadmap">Roadmap</a>
   </p>
 </p>
 
 <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://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=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%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>
-  <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-  <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
-  <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
-    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
-    <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=social"></a>
-    <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-    <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></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=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%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>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
+   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
+   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>
 
 <!-- ABOUT THE PROJECT -->
 
 ## About The Project
 
-<img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/134363898-4b29e18f-3e61-42b7-95bc-10891056249d.gif">
+<img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/176390354-f1bc7069-0341-437a-9bb8-eb41092b4016.gif">
 
 # Scheduling infrastructure for absolutely everyone
 
@@ -80,7 +84,7 @@ To get a local copy up and running, please follow these simple steps.
 
 Here is what you need to be able to run Cal.
 
-- Node.js (Version: >=14.x <15)
+- Node.js (Version: >=14.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -90,7 +94,7 @@ Here is what you need to be able to run Cal.
 
 ### Setup
 
-1. Clone the repo into a public GitHub repository (to comply with AGPLv3. To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
+1. Clone the repo into a public GitHub repository (or fork https://github.com/calcom/cal.com/fork). If you plan to distribute the code, keep the source code public to comply with [AGPLv3](https://github.com/calcom/cal.com/blob/main/LICENSE). To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
 
    ```sh
    git clone https://github.com/calcom/cal.com.git
@@ -129,7 +133,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 #### Manual setup
 
-1. Configure environment variables in the .env file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -163,7 +167,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    </details>
 
 1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
-1. Set up the database using the Prisma schema (found in `apps/web/prisma/schema.prisma`)
+1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
 
    ```sh
    yarn workspace @calcom/prisma db-deploy
@@ -185,7 +189,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 1. Click on the `User` model to add a new user record.
 1. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
-   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `apps/web/prisma/schema.prisma` file.
+   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `packages/prisma/schema.prisma` file.
 1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
 
 ### E2E-Testing
@@ -274,11 +278,17 @@ The Docker configuration can be found [in our docker repository](https://github.
 
 You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform.
 
+### Vercel
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_SECRET,NEXTAUTH_URL,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT,CALCOM_LICENSE_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com)
+
 <!-- ROADMAP -->
 
 ## Roadmap
 
-See the [roadmap project](https://github.com/orgs/calcom/projects/1) for a list of proposed features (and known issues). You can change the view to see planned tagged releases.
+<a href="https://cal.com/roadmap"><img src="https://user-images.githubusercontent.com/8019099/176388295-25081ca4-207e-4468-8079-37b195fa8e59.png" alt="Cal.com Roadmap" /></a>
+
+See the [roadmap project](https://cal.com/roadmap) for a list of proposed features (and known issues). You can change the view to see planned tagged releases.
 
 <!-- CONTRIBUTING -->
 
@@ -398,7 +408,7 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 4. Fill in any information you want in the "App info" tab
 5. Go to tab "Auth"
 6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
-7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot othercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
 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.
@@ -414,6 +424,31 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 1. Select all events for the webhook you interested, e.g. `sleep_created`
 1. Copy the webhook secret (`sec...`) to `VITAL_WEBHOOK_SECRET` in the .env.appStore file.
 
+## Workflows
+
+### Setting up SendGrid for Email reminders
+
+1. Create a SendGrid account (https://signup.sendgrid.com/)
+2. Go to Settings -> API keys and create an API key
+3. Copy API key to your .env file into the SENDGRID_API_KEY field
+4. Go to Settings -> Sender Authentication and verify a single sender
+5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field
+
+### Setting up Twilio for SMS reminders
+
+1. Create a Twilio account (https://www.twilio.com/try-twilio)
+2. Click ‘Get a Twilio phone number’
+3. Copy Account SID to your .env file into the TWILIO_SID field
+4. Copy Auth Token to your .env file into the TWILIO_TOKEN field
+5. Create a messaging service (Develop -> Messaging -> Services)
+6. Choose any name for the messaging service
+7. Click 'Add Senders'
+8. Choose phone number as sender type
+9. Add the listed phone number
+10. Leave all other fields as they are
+11. Complete setup and click ‘View my new Messaging Service’
+12. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+
 <!-- LICENSE -->
 
 ## License
@@ -433,7 +468,7 @@ Special thanks to these amazing projects which help power Cal.com:
 - [Day.js](https://day.js.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Prisma](https://prisma.io/)
-  
- <a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
 
-Cal.com is an [open startup](https://jitsu.com) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
+<a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
+
+Cal.com is an [open startup](https://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.

SECURITY.md

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

app.json

@@ -18,7 +18,11 @@
       "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
       "value": "secret"
     },
-    "NEXTAUTH_SECRET": "secret"
+    "NEXTAUTH_SECRET": "secret",
+    "NEXTAUTH_URL": {
+      "description": "Replace HEROKU_APP_NAME with the name given to your app",
+      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    }
   },
   "scripts": {
     "postdeploy": "cd packages/prisma && npx prisma migrate deploy"

apps/docs/next.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.js",

apps/docs/package.json

@@ -4,26 +4,27 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "build": "next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
     "lint": "next lint",
-    "type-check": "tsc --pretty --noEmit",
+    "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",
-    "build": "next build"
+    "type-check": "tsc --pretty --noEmit"
   },
   "author": "Cal.com, Inc.",
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.1.0",
+    "next": "^12.2.0",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.15.0"
   }
 }

apps/docs/pages/integrations/google.mdx

@@ -25,7 +25,7 @@ To remove a product from your account that isn't listed in your Google Account,
 6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
 7. Now select [Credentials](https://console.cloud.google.com/apis/credentials) from the side pane and then select Create Credentials. Select the OAuth Client ID option.
 8. Select Web Application as the Application Type.
-9. Under Authorized redirect URI's, select Add URI and then add the URI `<CALENDSO URL>/api/integrations/googlecalendar/callback` replacing CALENDSO URL with the URI at which your application runs.
+9. Under Authorized redirect URI's, select Add URI and then add the two URIs `<CALENDSO URL>/api/integrations/googlecalendar/callback` and `<CALENDSO URL>/api/auth/callback/google` replacing CALENDSO URL with the URI at which your application runs.
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
 

apps/docs/pages/self-hosting/vercel.mdx

@@ -18,7 +18,7 @@ You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com
    git clone https://github.com/<your-fork>/cal.com.git
    ```
 
-2. Copy the `.env.example` file in `apps/web`, rename it to `.env` and fill it with your settings ([See manual setup](https://github.com/calcom/cal.com#manual) and [Obtaining the Google API Credentials](https://github.com/calcom/cal.com#obtaining-the-google-api-credentials))
+2. Copy the `.env.example` file in `apps/web`, rename it to `.env` and fill it with your settings ([See manual setup](https://github.com/calcom/cal.com#manual-setup) and [Obtaining the Google API Credentials](https://github.com/calcom/cal.com#obtaining-the-google-api-credentials))
 
 3. Install packages with `yarn`
 

apps/docs/theme.config.js

@@ -1,3 +1,5 @@
+import { SEO_IMG_DEFAULT, DOCS_URL } from "@calcom/lib/constants";
+
 const themeConfig = {
   github: "https://github.com/calcom/cal.com",
   docsRepositoryBase: "https://github.com/calcom/cal.com/blob/main/apps/docs/pages",
@@ -18,11 +20,11 @@ const themeConfig = {
         content="Explore advice and explanations for all of our features, and discover new tips and tricks to get the most out of your subscription."
       />
       <meta name="twitter:card" content="summary_large_image" />
-      <meta name="twitter:image" content="https://cal.com/og-image.png" />
+      <meta name="twitter:image" content={SEO_IMG_DEFAULT} />
       <meta name="twitter:site:domain" content="docs.cal.com" />
-      <meta name="twitter:url" content="https://docs.cal.com" />
+      <meta name="twitter:url" content={DOCS_URL} />
       <meta name="og:title" content="Cal.com Documentation" />
-      <meta name="og:image" content="https://cal.com/og-image.png" />
+      <meta name="og:image" content={SEO_IMG_DEFAULT} />
       <meta name="apple-mobile-web-app-title" content="Cal.com Docs" />
 
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

apps/storybook/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+storybook-static/

apps/storybook/.storybook/main.js

@@ -0,0 +1,57 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-designs",
+    "@storybook/addon-a11y",
+    "storybook-addon-next",
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+  webpackFinal: async (config) => {
+    /**
+     * Fixes font import with /
+     * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
+     */
+    config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
+
+    /**
+     * Why webpack5... Just why?
+     * @type {{console: boolean, process: boolean, timers: boolean, os: boolean, querystring: boolean, sys: boolean, fs: boolean, url: boolean, crypto: boolean, path: boolean, zlib: boolean, punycode: boolean, util: boolean, stream: boolean, assert: boolean, string_decoder: boolean, domain: boolean, vm: boolean, tty: boolean, http: boolean, buffer: boolean, constants: boolean, https: boolean, events: boolean}}
+     */
+    config.resolve.fallback = {
+      fs: false,
+      assert: false,
+      buffer: false,
+      console: false,
+      constants: false,
+      crypto: false,
+      domain: false,
+      events: false,
+      http: false,
+      https: false,
+      os: false,
+      path: false,
+      punycode: false,
+      process: false,
+      querystring: false,
+      stream: false,
+      string_decoder: false,
+      sys: false,
+      timers: false,
+      tty: false,
+      url: false,
+      util: false,
+      vm: false,
+      zlib: false,
+    };
+
+    return config;
+  },
+};

apps/storybook/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script>
+  window.isEmbed = ()=> {
+    return location.search.includes("embed=")
+  }
+</script>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+</style>

apps/storybook/.storybook/preview.js

@@ -0,0 +1,24 @@
+import { RouterContext } from "next/dist/shared/lib/router-context";
+import * as NextImage from "next/image";
+
+import "../styles/globals.css";
+
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, "default", {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+});
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  nextRouter: {
+    Provider: RouterContext.Provider,
+  },
+};

apps/storybook/README.md

@@ -0,0 +1,21 @@
+# Storybook & UI
+
+Storybook is home to all of our commonly used components. We use this app to visually show all components that we have within the project + automatic type documentation generated for each component.
+
+All changes to storybook/ui must require a visual/code review.
+
+- Visual reviews happen on a tool called [Chormatic](http://chromatic.com/) and these reviews will happen by our product team.
+
+- Code reviews happen as normal on any changes to storybook/ui designs
+
+## Deployment
+
+To deploy this project run
+
+```bash
+  cd apps/storybook
+```
+
+```bash
+  yarn dev
+```

apps/storybook/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/storybook/next.config.js

@@ -0,0 +1,7 @@
+const withTM = require("next-transpile-modules")(["@calcom/dayjs", "@calcom/ui"]);
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = withTM(nextConfig);

apps/storybook/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@calcom/storybook",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev:next": "next dev",
+    "build:next": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:report": "eslint . --format json --output-file ../../lint-results/storybook.json",
+    "dev": "start-storybook -p 6006",
+    "build": "build-storybook",
+    "chromatic": "npx chromatic --project-token=56fadc9ab496"
+  },
+  "dependencies": {
+    "@calcom/dayjs": "*",
+    "@calcom/ui": "*",
+    "@radix-ui/react-avatar": "^0.1.4",
+    "@radix-ui/react-collapsible": "^0.1.0",
+    "@radix-ui/react-dialog": "^0.1.0",
+    "@radix-ui/react-dropdown-menu": "^0.1.1",
+    "@radix-ui/react-id": "^0.1.0",
+    "@radix-ui/react-radio-group": "^0.1.1",
+    "@radix-ui/react-slider": "^0.1.1",
+    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-tooltip": "^0.1.0",
+    "next": "^12.2.0",
+    "next-transpile-modules": "^9.0.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-feather": "^2.0.9",
+    "react-hot-toast": "^2.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@calcom/config": "*",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@types/node": "16.9.1",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "chromatic": "^6.6.4",
+    "eslint": "^8.15.0",
+    "postcss": "^8.4.13",
+    "postcss-loader": "^7.0.0",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-addon-next": "^1.6.7",
+    "tailwindcss": "^3.1.3",
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "typescript": "^4.6.4"
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "@calcom/storybook@0.1.0"
+}

apps/storybook/pages/_app.tsx

@@ -0,0 +1,9 @@
+import type { AppProps } from "next/app";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

apps/storybook/pages/index.tsx

@@ -0,0 +1,63 @@
+import type { NextPage } from "next";
+import Head from "next/head";
+import Image from "next/image";
+
+const Home: NextPage = () => {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          Welcome to <a href="https://nextjs.org">Next.js!</a>
+        </h1>
+
+        <p className={styles.description}>
+          Get started by editing <code className={styles.code}>pages/index.tsx</code>
+        </p>
+
+        <div className={styles.grid}>
+          <a href="https://nextjs.org/docs" className={styles.card}>
+            <h2>Documentation &rarr;</h2>
+            <p>Find in-depth information about Next.js features and API.</p>
+          </a>
+
+          <a href="https://nextjs.org/learn" className={styles.card}>
+            <h2>Learn &rarr;</h2>
+            <p>Learn about Next.js in an interactive course with quizzes!</p>
+          </a>
+
+          <a href="https://github.com/vercel/next.js/tree/canary/examples" className={styles.card}>
+            <h2>Examples &rarr;</h2>
+            <p>Discover and deploy boilerplate example Next.js projects.</p>
+          </a>
+
+          <a
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+            className={styles.card}>
+            <h2>Deploy &rarr;</h2>
+            <p>Instantly deploy your Next.js site to a public URL with Vercel.</p>
+          </a>
+        </div>
+      </main>
+
+      <footer className={styles.footer}>
+        <a
+          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer">
+          Powered by{" "}
+          <span className={styles.logo}>
+            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
+          </span>
+        </a>
+      </footer>
+    </div>
+  );
+};
+
+export default Home;

apps/storybook/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/storybook/public/vercel.svg

@@ -0,0 +1,4 @@
+<svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
+</svg>

apps/storybook/stories/Avatar.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta } from "@storybook/react";
+
+import Avatar from "@calcom/ui/v2/Avatar";
+
+export default {
+  title: "Avatar",
+  component: Avatar,
+} as ComponentMeta<typeof Avatar>;
+
+export const Default = () => {
+  return (
+    <>
+      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+    </>
+  );
+};
+
+export const Accepted = () => {
+  return (
+    <>
+      <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
+      <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" accepted />
+    </>
+  );
+};

apps/storybook/stories/AvatarGroup.stories.tsx

@@ -0,0 +1,60 @@
+import { ComponentMeta } from "@storybook/react";
+
+import Avatar from "@calcom/ui/v2/Avatar";
+import AvatarGroup from "@calcom/ui/v2/AvatarGroup";
+
+export default {
+  title: "Avatar/Group",
+  component: AvatarGroup,
+} as ComponentMeta<typeof AvatarGroup>;
+
+const IMAGES = [
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+  {
+    image: "https://cal.com/stakeholder/peer.jpg",
+    alt: "Peer",
+    title: "Peer Richelsen",
+  },
+  {
+    image: "https://cal.com/stakeholder/bailey.jpg",
+    alt: "Bailey",
+    title: "Bailey Pumfleet",
+  },
+  {
+    image: "https://cal.com/stakeholder/alex-van-andel.jpg",
+    alt: "Alex",
+    title: "Alex Van Andel",
+  },
+  {
+    image: "https://cal.com/stakeholder/ciaran.jpg",
+    alt: "Ciarán",
+    title: "Ciarán Hanrahan",
+  },
+];
+
+export const Default = () => {
+  return (
+    <>
+      <AvatarGroup size="lg" items={IMAGES} />
+    </>
+  );
+};

apps/storybook/stories/Badge.stories.tsx

@@ -0,0 +1,58 @@
+import { ComponentMeta } from "@storybook/react";
+import { Bell } from "react-feather";
+
+import { Badge } from "@calcom/ui/v2";
+
+export default {
+  title: "Badge",
+  component: Badge,
+} as ComponentMeta<typeof Badge>;
+
+export const All = () => (
+  <div className="">
+    <h1>Default</h1>
+    <div className="mb-4 flex space-x-2">
+      <Badge variant="gray">Badge</Badge>
+      <Badge variant="red">Badge</Badge>
+      <Badge variant="green">Badge</Badge>
+      <Badge variant="orange">Badge</Badge>
+      <Badge variant="blue">Badge</Badge>
+    </div>
+    <h1>Icons</h1>
+    <div className="mb-4 flex space-x-2">
+      <Badge variant="gray" StartIcon={Bell}>
+        Badge
+      </Badge>
+      <Badge variant="red" StartIcon={Bell}>
+        Badge
+      </Badge>
+      <Badge variant="green" StartIcon={Bell}>
+        Badge
+      </Badge>
+      <Badge variant="orange" StartIcon={Bell}>
+        Badge
+      </Badge>
+      <Badge variant="blue" StartIcon={Bell}>
+        Badge
+      </Badge>
+    </div>
+    <h1>Large</h1>
+    <div className="flex space-x-2">
+      <Badge variant="gray" size="lg">
+        Badge
+      </Badge>
+      <Badge variant="red" size="lg">
+        Badge
+      </Badge>
+      <Badge variant="green" size="lg">
+        Badge
+      </Badge>
+      <Badge variant="orange" size="lg">
+        Badge
+      </Badge>
+      <Badge variant="blue" size="lg">
+        Badge
+      </Badge>
+    </div>
+  </div>
+);

apps/storybook/stories/Banner.stories.tsx

@@ -0,0 +1,46 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Info } from "react-feather";
+
+import { Banner } from "@calcom/ui/v2";
+
+export default {
+  title: "Banner",
+  component: Banner,
+} as ComponentMeta<typeof Banner>;
+
+export const Default = () => {
+  return (
+    <Banner
+      variant="neutral"
+      title="Summarise what happened"
+      description="Describe what can be done about it here."
+      Icon={Info}
+      onDismiss={() => console.log("dismissed")}
+    />
+  );
+};
+
+export const Warning = () => {
+  return (
+    <Banner
+      variant="warning"
+      title="Summarise what happened"
+      description="Describe what can be done about it here."
+      Icon={Info}
+      onDismiss={() => console.log("dismissed")}
+    />
+  );
+};
+
+export const Error = () => {
+  return (
+    <Banner
+      variant="error"
+      title="Summarise what happened"
+      description="Describe what can be done about it here."
+      errorMessage="Event creation failed"
+      Icon={Info}
+      onDismiss={() => console.log("dismissed")}
+    />
+  );
+};

apps/storybook/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Breadcrumb, BreadcrumbItem } from "@calcom/ui/v2";
+
+export default {
+  title: "Breadcrumbs",
+  component: Breadcrumb,
+} as ComponentMeta<typeof Breadcrumb>;
+
+export const Default = () => (
+  <Breadcrumb>
+    <BreadcrumbItem href="/">Home</BreadcrumbItem>
+    <BreadcrumbItem href="/">Test</BreadcrumbItem>
+  </Breadcrumb>
+);
+
+Default.parameters = {
+  nextRouter: {
+    path: "/test",
+    asPath: "/test",
+  },
+};

apps/storybook/stories/Button.stories.tsx

@@ -0,0 +1,95 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Trash2 } from "react-feather";
+
+import { Button as ButtonComponent } from "@calcom/ui/v2";
+
+export default {
+  title: "Button",
+  component: ButtonComponent,
+  argTypes: {
+    color: {
+      options: ["primary", "secondary", "minimal", "destructive"],
+      control: { type: "select" },
+    },
+    disabled: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+    loading: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+    size: {
+      options: ["base", "lg", "icon"],
+      control: { type: "radio" },
+    },
+  },
+} as ComponentMeta<typeof ButtonComponent>;
+
+const Template: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
+
+export const All = () => (
+  <div>
+    <h1>Primary</h1>
+    <div className="flex space-x-2">
+      <ButtonComponent aria-label="Button Text">Button Text</ButtonComponent>
+      <ButtonComponent disabled aria-label="Button Text">
+        Button Text
+      </ButtonComponent>
+    </div>
+    <h1>Secondary</h1>
+    <div className="flex space-x-2">
+      <ButtonComponent color="secondary" aria-label="Button Text">
+        Button Text
+      </ButtonComponent>
+      <ButtonComponent disabled color="secondary" aria-label="Button Text">
+        Button Text
+      </ButtonComponent>
+      <ButtonComponent size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
+    </div>
+    <h1>Minimal</h1>
+    <div className="flex">
+      <ButtonComponent color="minimal" aria-label="Button Text">
+        Button Text
+      </ButtonComponent>
+      <ButtonComponent disabled color="minimal" aria-label="Button Text">
+        Button Text
+      </ButtonComponent>
+      <ButtonComponent size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
+    </div>
+    <h1>Destructive</h1>
+    <ButtonComponent size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
+    <h1>Tooltip</h1>
+    <ButtonComponent
+      tooltip="Deletes EventTypes"
+      size="icon"
+      color="destructive"
+      StartIcon={Trash2}
+      aria-label="Button Text"
+    />
+  </div>
+);
+
+export const Button = Template.bind({});
+Button.args = {
+  color: "primary",
+  children: "Button Text",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Button.args,
+  disabled: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Button.args,
+  loading: true,
+};
+export const Icon = Template.bind({});
+Icon.args = {
+  color: "secondary",
+  StartIcon: Trash2,
+  size: "icon",
+};

apps/storybook/stories/ButtonGroup.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentMeta } from "@storybook/react";
+import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
+
+import { Button, ButtonGroup } from "@calcom/ui/v2";
+
+export default {
+  title: "Button Group",
+  component: ButtonGroup,
+} as ComponentMeta<typeof ButtonGroup>;
+
+export const Default = () => (
+  <ButtonGroup>
+    <Button StartIcon={Trash2} size="icon" color="secondary" />
+    <Button StartIcon={Navigation2} size="icon" color="secondary" />
+    <Button StartIcon={Clipboard} size="icon" color="secondary" />
+  </ButtonGroup>
+);
+
+export const Combined = () => (
+  <div className="flex flex-col space-y-2">
+    <ButtonGroup combined>
+      <Button StartIcon={Trash2} size="icon" color="secondary" combined />
+      <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
+      <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
+    </ButtonGroup>
+    <ButtonGroup combined>
+      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
+      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
+    </ButtonGroup>
+  </div>
+);

apps/storybook/stories/Checkbox.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Checkbox } from "@calcom/ui/v2";
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+} as ComponentMeta<typeof Checkbox>;
+
+export const All = () => (
+  <div className="flex flex-col space-y-2">
+    <Checkbox label="Default" description="Toggle on and off something" />
+    <Checkbox label="Error" description="Toggle on and off something" error />
+    <Checkbox label="Disabled" description="Toggle on and off something" disabled />
+    <Checkbox label="Disabled Checked" description="Toggle on and off something" checked disabled />
+    <hr />
+    <Checkbox description="Default" descriptionAsLabel />
+    <Checkbox description="Error" descriptionAsLabel error />
+    <Checkbox description="Disabled" descriptionAsLabel disabled />
+    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
+  </div>
+);
+
+export const CheckboxField = () => <Checkbox description="Default" descriptionAsLabel />;
+export const CheckboxError = () => <Checkbox description="Error" descriptionAsLabel />;
+export const CheckboxDisabled = () => (
+  <>
+    <Checkbox description="Disabled" descriptionAsLabel disabled />
+    <Checkbox description="Disabled" descriptionAsLabel disabled checked />
+  </>
+);

apps/storybook/stories/Colors.stories.tsx

@@ -0,0 +1,208 @@
+import { useState } from "react";
+
+import ColorPicker from "@calcom/ui/v2/colorpicker";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  title: "Colors",
+  component: ColorPicker,
+};
+const COLORS = {
+  brand: {
+    50: "#f3f3f4",
+    100: "#e7e8e9",
+    200: "#c4c5c9",
+    300: "#a0a3a9",
+    400: "#585d68",
+    500: "#111827", // Brand color
+    600: "#0f1623",
+    700: "#0d121d",
+    800: "#0a0e17",
+    900: "#080c13",
+  },
+  gray: {
+    50: "#F8F8F8",
+    100: "#F5F5F5",
+    200: "#E1E1E1",
+    300: "#CFCFCF",
+    400: "#ACACAC",
+    500: "#888888",
+    600: "#494949",
+    700: "#3E3E3E",
+    800: "#313131",
+    900: "#292929",
+  },
+  neutral: {
+    50: "#F8F8F8",
+    100: "#F5F5F5",
+    200: "#E1E1E1",
+    300: "#CFCFCF",
+    400: "#ACACAC",
+    500: "#888888",
+    600: "#494949",
+    700: "#3E3E3E",
+    800: "#313131",
+    900: "#292929",
+  },
+  primary: {
+    50: "#F4F4F4",
+    100: "#E8E8E8",
+    200: "#C6C6C6",
+    300: "#A3A3A3",
+    400: "#5F5F5F",
+    500: "#1A1A1A",
+    600: "#171717",
+    700: "#141414",
+    800: "#101010",
+    900: "#0D0D0D",
+  },
+  secondary: {
+    50: "#F5F8F7",
+    100: "#EBF0F0",
+    200: "#CDDAD9",
+    300: "#AEC4C2",
+    400: "#729894",
+    500: "#356C66",
+    600: "#30615C",
+    700: "#28514D",
+    800: "#20413D",
+    900: "#223B41",
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+  },
+  orange: {
+    50: "#FFF7ED",
+    100: "#FFEDD5",
+    200: "#FED7AA",
+    300: "#FDBA74",
+    400: "#FB923C",
+    500: "#F97316",
+    600: "#EA580C",
+    700: "#C2410C",
+    800: "#9A3412",
+    900: "#7C2D12",
+  },
+  green: {
+    50: "#ECFDF5",
+    100: "#D1FAE5",
+    200: "#A7F3D0",
+    300: "#6EE7B7",
+    400: "#34D399",
+    500: "#10B981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065F46",
+    900: "#064E3B",
+  },
+};
+export const All = () => {
+  return (
+    <div className="w-full">
+      <div>
+        {Object.keys(COLORS.brand).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.brand[color]}>
+            <div className="w-full">Brand</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.brand[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.brand[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.gray).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.gray[color]}>
+            <div className="w-full">gray</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.gray[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.gray[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.secondary).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.secondary[color]}>
+            <div className="w-full">secondary</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.secondary[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.secondary[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.red).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.red[color]}>
+            <div className="w-full">red</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.red[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.red[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.orange).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.orange[color]}>
+            <div className="w-full">orange</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.orange[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.orange[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+        <hr />
+        {Object.keys(COLORS.green).map((color) => (
+          <div className="flex flex-row space-x-2" key={COLORS.green[color]}>
+            <div className="w-full">green</div>
+            <div className="w-full">{color}</div>
+            <div className="w-full">{COLORS.green[color]}</div>
+            <div
+              style={{
+                backgroundColor: COLORS.green[color],
+                width: "100%",
+                height: "32px",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+export const ColorPickerComponent = () => {
+  const [color, setColor] = useState("3B82F6");
+  return <ColorPicker defaultValue={color} onChange={(val) => setColor(val)} />;
+};

apps/storybook/stories/DatePicker.stories.tsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+import DatePicker from "@calcom/ui/v2/booker/DatePicker";
+
+export default {
+  title: "Datepicker",
+  component: DatePicker,
+};
+
+export const Default = () => {
+  const [selected, setSelected] = useState<Date | undefined>(undefined);
+  return (
+    <div style={{ width: "455px" }}>
+      <DatePicker selected={selected} onChange={setSelected} locale="en" />
+    </div>
+  );
+};

apps/storybook/stories/EmptyScreen.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta } from "@storybook/react";
+import { Bell } from "react-feather";
+
+import { EmptyScreen as EmptyScreenPattern } from "@calcom/ui/v2";
+
+export default {
+  title: "pattern/Empty Screen",
+  component: EmptyScreenPattern,
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof EmptyScreenPattern>;
+
+export const EmptyScreenS = () => (
+  <EmptyScreenPattern
+    Icon={Bell}
+    headline="Empty State Header"
+    description="Ullamco dolor nulla sint nulla occaecat aliquip id elit fugiat et excepteur magna. Nisi tempor anim do tempor irure fugiat ad occaecat. Mollit ea eiusmod pariatur sunt deserunt eu eiusmod. Sit reprehenderit cupidatat consequat commodo in aliqua ea et. Et quis sit enim proident dolor mollit consectetur tempor dolore reprehenderit consequat adipisicing reprehenderit officia. Sint eu sunt fugiat laborum Lorem irure aute nulla et. Do non in enim ipsum ea."
+    buttonText="Veniam ut ipsum"
+    buttonOnClick={() => console.log("Button Clicked")}
+  />
+);

apps/storybook/stories/FormStep.stories.tsx

@@ -0,0 +1,27 @@
+import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
+
+import { FormStep } from "@calcom/ui/v2";
+
+export default {
+  title: "Form Step",
+  component: FormStep,
+} as ComponentMeta<typeof FormStep>;
+
+export const Default = () => {
+  const STEPS = 4;
+  const [currentStep, setCurrentStep] = useState(1);
+  return (
+    <div className="flex flex-col items-center justify-center space-y-14 p-20">
+      <div className="w-1/2">
+        <FormStep steps={STEPS} currentStep={currentStep} />
+        <div className="flex space-x-2 pt-4">
+          <button onClick={() => currentStep - 1 > 0 && setCurrentStep((old) => old - 1)}>Previous</button>
+          <button onClick={() => currentStep + 1 < STEPS + 1 && setCurrentStep((old) => old + 1)}>
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/storybook/stories/Input.stories.tsx

@@ -0,0 +1,68 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Copy } from "react-feather";
+
+import DatePicker from "@calcom/ui/v2/form/DatePicker";
+import { TextAreaField, TextField } from "@calcom/ui/v2/form/fields";
+
+export default {
+  title: "Inputs",
+  component: TextField,
+  argTypes: {
+    disabled: {
+      options: [false, true],
+    },
+  },
+} as ComponentMeta<typeof TextField>;
+
+const TextInputTemplate: ComponentStory<typeof TextField> = (args) => <TextField {...args} />;
+// name="demo" label="Demo Label" hint="Hint text"
+export const TextInput = TextInputTemplate.bind({});
+TextInput.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  disabled: false,
+};
+
+export const TextInputPrefix = TextInputTemplate.bind({});
+TextInputPrefix.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnLeading: "https://",
+  disabled: false,
+};
+
+export const TextInputSuffix = TextInputTemplate.bind({});
+TextInputSuffix.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnSuffix: "Minutes",
+  disabled: false,
+};
+
+export const TextInputPrefixIcon = TextInputTemplate.bind({});
+TextInputPrefixIcon.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnFilled: false,
+  addOnSuffix: <Copy />,
+  disabled: false,
+};
+export const TextInputSuffixIcon = TextInputTemplate.bind({});
+TextInputSuffixIcon.args = {
+  name: "demo",
+  label: "Demo Label",
+  hint: "Hint Text",
+  addOnFilled: false,
+  addOnLeading: <Copy />,
+  disabled: false,
+};
+
+export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
+  <TextAreaField name="Text-area-input" label="Text Area" />
+);
+
+export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;

apps/storybook/stories/Modal.stories.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Info } from "react-feather";
+
+import { Button } from "@calcom/ui/v2";
+import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/Dialog";
+import { TextField } from "@calcom/ui/v2/form/fields";
+
+export default {
+  title: "pattern/Modal",
+  component: Dialog,
+};
+
+export const Creation = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      </DialogTrigger>
+      <DialogContent
+        title="Header"
+        description="Optional Description"
+        type="creation"
+        actionText="Create"
+        actionOnClick={() => setOpen(false)}>
+        <TextField name="Label" />
+        <TextField name="Label" />
+        <TextField name="Label" />
+        <TextField name="Label" />
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export const Confirmation = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Open Modal</Button>
+      </DialogTrigger>
+      <DialogContent
+        title="Header"
+        description="Optional Description"
+        type="confirmation"
+        actionText="Confirm"
+        Icon={Info}
+        actionOnClick={() => setOpen(false)}
+      />
+    </Dialog>
+  );
+};

apps/storybook/stories/Notifcations.stories.tsx

@@ -0,0 +1,25 @@
+import { ComponentMeta } from "@storybook/react";
+import { Toaster } from "react-hot-toast";
+
+import { Button } from "@calcom/ui/v2";
+import showToast from "@calcom/ui/v2/notfications";
+
+export default {
+  title: "Notifcations-Toasts",
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+} as ComponentMeta<typeof All>; // We have to fake this type as the story for this component isn't really a component.
+
+export const All = () => (
+  <div className="flex space-x-2">
+    <Button onClick={() => showToast("This is a Neutral toast", "warning")}>Neutral</Button>
+    <Button onClick={() => showToast("This is a Success toast", "success")}>Success</Button>
+    <Button onClick={() => showToast("This is a Error toast", "error")}>Error</Button>
+  </div>
+);

apps/storybook/stories/PageHeader.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentMeta } from "@storybook/react";
+import { Search } from "react-feather";
+
+import { Button, PageHeader } from "@calcom/ui/v2";
+import { TextField } from "@calcom/ui/v2/form";
+
+export default {
+  title: "pattern/Page Header",
+  component: PageHeader,
+  decorators: [
+    (Story) => (
+      <div className="">
+        <Story />
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof PageHeader>;
+
+export const Default = () => (
+  <PageHeader title="Title" description="Some description about the header above" />
+);
+
+export const ButtonRight = () => (
+  <PageHeader
+    title="Title"
+    description="Some description about the header above"
+    rightAlignedComponent={<Button>Button Text</Button>}
+  />
+);
+export const ComingSoon = () => (
+  <PageHeader
+    title="Title"
+    description="Some description about the header above"
+    badgeText="Coming Soon"
+    badgeVariant="gray"
+  />
+);
+export const SearchInstalledApps = () => (
+  <PageHeader
+    title="Search booking"
+    description="See upcoming and past events booking through your event type link"
+    rightAlignedComponent={
+      <TextField
+        containerClassName="h-9 max-h-9"
+        addOnLeading={<Search />}
+        name="search"
+        labelSrOnly
+        placeholder="WIP"
+      />
+    }
+  />
+);

apps/storybook/stories/Radio.stories.tsx

@@ -0,0 +1,19 @@
+import * as Radio from "@calcom/ui/v2/form/radio-area/Radio";
+import { RadioField } from "@calcom/ui/v2/form/radio-area/Radio";
+
+export default {
+  title: "Radio",
+  component: RadioField,
+};
+
+export const RadioGroupDemo = () => {
+  return (
+    <form>
+      <Radio.Group aria-label="View density" defaultValue="default">
+        <RadioField label="Default" id="r1" value="1" />
+        <RadioField label="Next" id="r2" value="2" />
+        <RadioField label="Disabled" id="r3" disabled value="1" />
+      </Radio.Group>
+    </form>
+  );
+};

apps/storybook/stories/Select.stories.tsx

@@ -0,0 +1,10 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Select } from "@calcom/ui/v2";
+
+export default {
+  title: "Form/Select",
+  component: Select,
+} as ComponentMeta<typeof Select>;
+
+export const Single = () => <Select items={[{ value: "Test Test" }]} />;

apps/storybook/stories/Switch.stories.tsx

@@ -0,0 +1,15 @@
+import { ComponentMeta } from "@storybook/react";
+
+import { Switch } from "@calcom/ui/v2";
+
+export default {
+  title: "Switch",
+  component: Switch,
+} as ComponentMeta<typeof Switch>;
+
+export const All = () => (
+  <div className="flex flex-col space-y-2">
+    <p>Checked works in app but storybook doesnt like it</p>
+    <Switch label="Default" />
+  </div>
+);

apps/storybook/stories/TabItem.stories.tsx

@@ -0,0 +1,67 @@
+// Disabling until we figure out what is happening with the RouterMock.
+import { ComponentMeta } from "@storybook/react";
+import { Link } from "react-feather";
+
+import { VerticalTabItem } from "@calcom/ui/v2";
+
+export default {
+  title: "VerticalTabItem",
+  component: VerticalTabItem,
+} as ComponentMeta<typeof VerticalTabItem>;
+
+const TabItemProps = {
+  name: "Event Setup",
+  icon: Link,
+  href: "/settings/event",
+  info: "60 mins, Zoom",
+};
+
+// export const Default = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps}></VerticalTabItem>
+//   </div>
+// );
+// export const Active = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps}></VerticalTabItem>
+//   </div>
+// );
+
+// Mocking next router to show active state
+// Active.parameters = {
+//   nextRouter: {
+//     path: "/settings/[tab]",
+//     asPath: "/settings/event",
+//   },
+// };
+
+// export const Disabled = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem {...TabItemProps} disabled></VerticalTabItem>
+//   </div>
+// );
+
+// export const NoIconNoInfo = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/event"></VerticalTabItem>
+//   </div>
+// );
+
+// export const IconNoInfo = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/event" icon={Link}></VerticalTabItem>
+//   </div>
+// );
+
+// export const IconNoInfoActive = () => (
+//   <div className="h-20 w-full bg-gray-100 p-4">
+//     <VerticalTabItem name="Event Setup" href="/settings/events" icon={Link}></VerticalTabItem>
+//   </div>
+// );
+
+// IconNoInfoActive.paramaters = {
+//   nextRouter: {
+//     path: "/settings/[tab]",
+//     asPath: "/settings/events",
+//   },
+// };

apps/storybook/stories/VerticalTab.stories.tsx

@@ -0,0 +1,85 @@
+// Disabling until we figure out what is happening with the RouterMock.
+import { ComponentMeta } from "@storybook/react";
+import { Calendar, Clock, Grid, Link, RefreshCw, User, Users } from "react-feather";
+
+import { VerticalTabs } from "@calcom/ui/v2/navigation/tabs";
+
+export default {
+  title: "Vertical Tabs",
+  component: VerticalTabs,
+} as ComponentMeta<typeof VerticalTabs>;
+
+const VerticalTabsPropsDefault = [
+  {
+    name: "Security",
+    icon: Link,
+    href: "/security",
+  },
+  {
+    name: "Profile",
+    icon: User,
+    href: "/profile",
+  },
+  {
+    name: "Calendar Sync",
+    icon: RefreshCw,
+    href: "/cal-sync",
+  },
+  {
+    name: "Teams",
+    icon: Users,
+    href: "/Teams",
+  },
+];
+
+export const Default = () => (
+  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
+    <VerticalTabs tabs={VerticalTabsPropsDefault} />
+  </div>
+);
+
+Default.parameters = {
+  nextRouter: {
+    path: "/[page]",
+    asPath: "/profile",
+  },
+};
+
+const VerticalTabsPropsInfo = [
+  {
+    name: "Event Setup",
+    icon: Link,
+    href: "/events",
+    info: "60 Mins, Zoom",
+  },
+  {
+    name: "Availability",
+    icon: Calendar,
+    href: "/availability",
+    info: "Working Hours",
+  },
+  {
+    name: "Limits",
+    icon: Clock,
+    href: "/limits",
+    info: "Buffers, Limits & more...",
+  },
+  {
+    name: "Apps",
+    icon: Grid,
+    href: "/apps",
+    info: "3 apps - 0 active",
+  },
+];
+
+export const Info = () => (
+  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
+    <VerticalTabs tabs={VerticalTabsPropsInfo} />
+  </div>
+);
+Info.parameters = {
+  nextRouter: {
+    path: "/[page]",
+    asPath: "/events",
+  },
+};

apps/storybook/styles/globals.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --brand-color: #292929;
+  --brand-text-color: #ffffff;
+  --brand-color-dark-mode: #fafafa;
+  --brand-text-color-dark-mode: #292929;
+  font-family: 'Inter', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

apps/storybook/tailwind.config.js

@@ -0,0 +1,167 @@
+module.exports = {
+  content: ["../../packages/ui/**/*.{js,ts,jsx,tsx}", "./stories/**/*.{js,ts,tsx,jsx}"],
+  darkMode: "class",
+  theme: {
+    fontFamily: {
+      cal: ["Cal Sans", "sans-serif"],
+      mono: ["Roboto Mono", "monospace"],
+    },
+    extend: {
+      colors: {
+        /* your primary brand color */
+        brandcontrast: "var(--brand-text-color)",
+        darkmodebrand: "var(--brand-color-dark-mode)",
+        darkmodebrandcontrast: "var(--brand-text-color-dark-mode)",
+        bookinglightest: "var(--booking-lightest-color)",
+        bookinglighter: "var(--booking-lighter-color)",
+        bookinglight: "var(--booking-light-color)",
+        bookingmedian: "var(--booking-median-color)",
+        bookingdark: "var(--booking-dark-color)",
+        bookingdarker: "var(--booking-darker-color)",
+        bookinghighlight: "var(--booking-highlight-color)",
+        black: "#111111",
+        brand: {
+          // Figure out a way to automate this for self hosted users
+          // Goto https://javisperez.github.io/tailwindcolorshades to generate your brand color
+          50: "#d1d5db",
+          100: "#9ca3af",
+          200: "#6b7280",
+          300: "#4b5563",
+          400: "#374151",
+          500: "#111827", // Brand color
+          600: "#0f1623",
+          700: "#0d121d",
+          800: "#0a0e17",
+          900: "#080c13",
+          DEFAULT: "#111827",
+        },
+        gray: {
+          50: "#F9FAFB",
+          100: "#F3F4F6",
+          200: "#E5E7EB",
+          300: "#D1D5DB",
+          400: "#9CA3AF",
+          500: "#6B7280",
+          600: "#4B5563",
+          700: "#374151",
+          800: "#1F2937",
+          900: "#111827",
+        },
+        neutral: {
+          50: "#F8F8F8",
+          100: "#F5F5F5",
+          200: "#E1E1E1",
+          300: "#CFCFCF",
+          400: "#ACACAC",
+          500: "#888888",
+          600: "#494949",
+          700: "#3E3E3E",
+          800: "#313131",
+          900: "#292929",
+        },
+        primary: {
+          50: "#F4F4F4",
+          100: "#E8E8E8",
+          200: "#C6C6C6",
+          300: "#A3A3A3",
+          400: "#5F5F5F",
+          500: "#1A1A1A",
+          600: "#171717",
+          700: "#141414",
+          800: "#101010",
+          900: "#0D0D0D",
+        },
+        secondary: {
+          50: "#F5F8F7",
+          100: "#EBF0F0",
+          200: "#CDDAD9",
+          300: "#AEC4C2",
+          400: "#729894",
+          500: "#356C66",
+          600: "#30615C",
+          700: "#28514D",
+          800: "#20413D",
+          900: "#223B41",
+        },
+        red: {
+          50: "#FFF5F5",
+          100: "#FFE3E2",
+          200: "#FFC9C9",
+          300: "#FEA8A8",
+          400: "#FF8787",
+          500: "#FF6B6B",
+          600: "#FA5352",
+          700: "#F03E3F",
+          800: "#E03130",
+          900: "#C92B2B",
+        },
+        orange: {
+          50: "#FFF4E5",
+          100: "#FFE8CC",
+          200: "#FFD8A8",
+          300: "#FFBF78",
+          400: "#FFA94E",
+          500: "#FF922B",
+          600: "#FD7E14",
+          700: "#F76706",
+          800: "#E8580C",
+          900: "#D94810",
+        },
+        green: {
+          50: "#EBFCEE",
+          100: "#D2F9D9",
+          200: "#B1F2BA",
+          300: "#8CE99A",
+          400: "#69DB7C",
+          500: "#51CF66",
+          600: "#40C057",
+          700: "#36B24D",
+          800: "#2F9E44",
+          900: "#2B8A3E",
+        },
+        blue: {
+          50: "#E7F5FF",
+          100: "#D0EBFF",
+          200: "#A4D8FF",
+          300: "#74C0FC",
+          400: "#4DABF7",
+          500: "#339AF0",
+          600: "#238BE6",
+          700: "#1C7ED7",
+          800: "#1971C2",
+          900: "#1763AB",
+        },
+      },
+      fontFamily: {
+        cal: ["inter", "sans-serif"],
+        mono: ["Roboto Mono", "monospace"],
+      },
+      maxHeight: (theme) => ({
+        0: "0",
+        97: "25rem",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vh",
+      }),
+      minHeight: (theme) => ({
+        0: "0",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vh",
+      }),
+      minWidth: (theme) => ({
+        0: "0",
+        ...theme("spacing"),
+        full: "100%",
+        screen: "100vw",
+      }),
+      maxWidth: (theme, { breakpoints }) => ({
+        0: "0",
+        ...theme("spacing"),
+        ...breakpoints(theme("screens")),
+        full: "100%",
+        screen: "100vw",
+      }),
+    },
+  },
+};

apps/storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "noImplicitAny": false,
+    "baseUrl": "."
+  }
+}

apps/swagger/package.json

@@ -3,23 +3,27 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "PORT=4200 next dev",
     "build": "next build",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "dev": "PORT=4200 next dev",
+    "lint": "next lint",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "lint:report": "eslint . --format json --output-file ../../lint-results/swagger.json",
     "start": "PORT=4200 next start"
   },
   "dependencies": {
     "highlight.js": "^11.5.1",
     "isarray": "2.0.5",
-    "next": "12.1.5",
+    "next": "12.2.0",
     "openapi-snippet": "^0.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "swagger-ui-react": "4.10.3"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swagger-ui-react": "4.11.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.27",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "typescript": "4.6.3"
+    "@types/node": "16.9.1",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
   }
 }

apps/swagger/tsconfig.json

@@ -1,24 +1,17 @@
 {
+  "extends": "@calcom/tsconfig/nextjs.json",
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
     "baseUrl": ".",
     "paths": {
       "@lib/*": ["lib/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "../../packages/types/*.d.ts",
+    "../../packages/types/next-auth.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
   "exclude": ["node_modules"]
 }

apps/web/components/AdditionalCalendarSelector.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import Select from "react-select";
+import { 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.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.imageSrc,
+          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 font-medium text-gray-700 sm:text-sm"
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;

apps/web/components/App.tsx

@@ -1,24 +1,30 @@
 import {
   BookOpenIcon,
+  CheckIcon,
   DocumentTextIcon,
   ExternalLinkIcon,
   FlagIcon,
   MailIcon,
+  PlusIcon,
   ShieldCheckIcon,
 } from "@heroicons/react/outline";
 import { ChevronLeftIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
+import { Button, SkeletonButton } from "@calcom/ui";
+import LicenseRequired from "@ee/components/LicenseRequired";
 
 import Shell from "@components/Shell";
 import Badge from "@components/ui/Badge";
 
-export default function App({
+const Component = ({
   name,
   type,
   logo,
@@ -34,7 +40,259 @@ export default function App({
   email,
   tos,
   privacy,
-}: {
+  isProOnly,
+}: Parameters<typeof App>[0]) => {
+  const { t } = useLocale();
+  const { data: user } = trpc.useQuery(["viewer.me"]);
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: () => {
+      showToast("App successfully installed", "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || "App could not be installed", "error");
+    },
+  });
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+  const [installedAppCount, setInstalledAppCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    async function getInstalledApp(appCredentialType: string) {
+      const queryParam = new URLSearchParams();
+      queryParam.set("app-credential-type", appCredentialType);
+      try {
+        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }).then((data) => {
+          setIsLoading(false);
+          return data;
+        });
+        if (result.status === 200) {
+          const res = await result.json();
+          setInstalledAppCount(res.count);
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          console.log(error.message);
+        }
+      }
+    }
+    getInstalledApp(type);
+  }, [type]);
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+
+  return (
+    <div className="-mx-4 md:-mx-8">
+      <div className="bg-gray-50 px-8">
+        <Link href="/apps">
+          <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
+            <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
+          </a>
+        </Link>
+        <div className="items-center justify-between py-4 sm:flex sm:py-8">
+          <div className="flex">
+            <img className="h-16 w-16 rounded-sm" src={logo} alt={name} />
+            <header className="px-4 py-2">
+              <div className="flex items-center">
+                <h1 className="font-cal text-xl text-gray-900">{name}</h1>
+                {isProOnly && user?.plan === "FREE" ? (
+                  <Badge className="ml-2" variant="default">
+                    PRO
+                  </Badge>
+                ) : null}
+              </div>
+              <h2 className="text-sm text-gray-500">
+                <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
+              </h2>
+            </header>
+          </div>
+
+          <div className="mt-4 sm:mt-0 sm:text-right">
+            {!isLoading ? (
+              isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+                <div className="flex space-x-3">
+                  <Button StartIcon={CheckIcon} color="secondary" disabled>
+                    {installedAppCount > 0
+                      ? t("active_install", { count: installedAppCount })
+                      : t("globally_install")}
+                  </Button>
+                  {!isGlobal && (
+                    <InstallAppButton
+                      type={type}
+                      isProOnly={isProOnly}
+                      render={({ useDefaultComponent, ...props }) => {
+                        if (useDefaultComponent) {
+                          props = {
+                            onClick: () => {
+                              mutation.mutate({ type });
+                            },
+                            loading: mutation.isLoading,
+                          };
+                        }
+                        return (
+                          <Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
+                            {t("add_another")}
+                          </Button>
+                        );
+                      }}
+                    />
+                  )}
+                </div>
+              ) : installedAppCount > 0 ? (
+                <Button color="secondary" disabled title="App already installed">
+                  {t("installed")}
+                </Button>
+              ) : (
+                <InstallAppButton
+                  type={type}
+                  isProOnly={isProOnly}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        onClick: () => {
+                          mutation.mutate({ type });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <Button data-testid="install-app-button" {...props}>
+                        {t("install_app")}
+                      </Button>
+                    );
+                  }}
+                />
+              )
+            ) : (
+              <SkeletonButton width="24" height="10" />
+            )}
+            {price !== 0 && (
+              <small className="block text-right">
+                {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+                {feeType === "monthly" && "/" + t("month")}
+              </small>
+            )}
+          </div>
+        </div>
+        {/* reintroduce once we show permissions and features
+  <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
+      </div>
+
+      <div className="justify-between px-8 py-10 md:flex">
+        <div className="prose-sm prose mb-6">{body}</div>
+        <div className="md:max-w-80 flex-1 md:ml-8">
+          <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>
+          <div className="space-x-2">
+            {categories.map((category) => (
+              <Link href={"/apps/categories/" + category} key={category}>
+                <a>
+                  <Badge variant="success">{category}</Badge>
+                </a>
+              </Link>
+            ))}
+          </div>
+          <h4 className="mt-8 font-medium text-gray-900 ">{t("pricing")}</h4>
+          <small>
+            {price === 0 ? (
+              "Free"
+            ) : (
+              <>
+                {Intl.NumberFormat("en-US", {
+                  style: "currency",
+                  currency: "USD",
+                  useGrouping: false,
+                }).format(price)}
+                {feeType === "monthly" && "/" + t("month")}
+              </>
+            )}
+          </small>
+          <h4 className="mt-8 mb-2 font-medium text-gray-900 ">{t("learn_more")}</h4>
+          <ul className="prose -ml-1 -mr-1 text-xs leading-5">
+            {docs && (
+              <li>
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-500 no-underline hover:underline"
+                  href={docs}>
+                  <BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
+                  {t("documentation")}
+                </a>
+              </li>
+            )}
+            {website && (
+              <li>
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-500 no-underline hover:underline"
+                  href={website}>
+                  <ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  {website.replace("https://", "")}
+                </a>
+              </li>
+            )}
+            {email && (
+              <li>
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-500 no-underline hover:underline"
+                  href={"mailto:" + email}>
+                  <MailIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  {email}
+                </a>
+              </li>
+            )}
+            {tos && (
+              <li>
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-500 no-underline hover:underline"
+                  href={tos}>
+                  <DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  {t("terms_of_service")}
+                </a>
+              </li>
+            )}
+            {privacy && (
+              <li>
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-blue-500 no-underline hover:underline"
+                  href={privacy}>
+                  <ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  {t("privacy_policy")}
+                </a>
+              </li>
+            )}
+          </ul>
+          <hr className="my-6" />
+          <small className="leading-1 block text-gray-500">
+            Every app published on the Cal.com App Store is open source and thoroughly tested via peer
+            reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
+            published by Cal.com. If you encounter inappropriate content or behaviour please report it.
+          </small>
+          <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
+            <FlagIcon className="inline h-3 w-3" /> Report App
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default function App(props: {
   name: string;
   type: AppType["type"];
   isGlobal?: AppType["isGlobal"];
@@ -51,194 +309,18 @@ export default function App({
   email: string; // required
   tos?: string;
   privacy?: string;
+  licenseRequired: AppType["licenseRequired"];
+  isProOnly: AppType["isProOnly"];
 }) {
-  const { t } = useLocale();
-
-  const priceInDollar = Intl.NumberFormat("en-US", {
-    style: "currency",
-    currency: "USD",
-    useGrouping: false,
-  }).format(price);
-  const [installedApp, setInstalledApp] = useState(false);
-  useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
-      const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
-      try {
-        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        if (result.status === 200) {
-          setInstalledApp(true);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-      }
-    }
-    getInstalledApp(type);
-  }, [type]);
   return (
-    <>
-      <Shell large isPublic>
-        <div className="-mx-4 md:-mx-8">
-          <div className="bg-gray-50 px-4">
-            <Link href="/apps">
-              <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-                <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
-              </a>
-            </Link>
-            <div className="items-center justify-between py-4 sm:flex sm:py-8">
-              <div className="flex">
-                {
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img className="h-16 w-16" src={logo} alt={name} />
-                }
-                <header className="px-4 py-2">
-                  <h1 className="font-cal text-xl text-gray-900">{name}</h1>
-                  <h2 className="text-sm text-gray-500">
-                    <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
-                  </h2>
-                </header>
-              </div>
-
-              <div className="mt-4 sm:mt-0 sm:text-right">
-                {isGlobal || installedApp ? (
-                  <Button color="secondary" disabled title="This app is globally installed">
-                    {t("installed")}
-                  </Button>
-                ) : (
-                  <InstallAppButton
-                    type={type}
-                    render={(buttonProps) => (
-                      <Button data-testid="install-app-button" {...buttonProps}>
-                        {t("install_app")}
-                      </Button>
-                    )}
-                  />
-                )}
-                {price !== 0 && (
-                  <small className="block text-right">
-                    {feeType === "usage-based"
-                      ? commission + "% + " + priceInDollar + "/booking"
-                      : priceInDollar}
-                    {feeType === "monthly" && "/" + t("month")}
-                  </small>
-                )}
-              </div>
-            </div>
-            {/* reintroduce once we show permissions and features
-            <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
-          </div>
-
-          <div className="justify-between px-4 py-10 md:flex">
-            <div className="prose-sm prose mb-6">{body}</div>
-            <div className="md:max-w-80 flex-1 md:ml-8">
-              <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>
-              <div className="space-x-2">
-                {categories.map((category) => (
-                  <Link href={"/apps/categories/" + category} key={category}>
-                    <a>
-                      <Badge variant="success">{category}</Badge>
-                    </a>
-                  </Link>
-                ))}
-              </div>
-              <h4 className="mt-8 font-medium text-gray-900 ">{t("pricing")}</h4>
-              <small>
-                {price === 0 ? (
-                  "Free"
-                ) : (
-                  <>
-                    {Intl.NumberFormat("en-US", {
-                      style: "currency",
-                      currency: "USD",
-                      useGrouping: false,
-                    }).format(price)}
-                    {feeType === "monthly" && "/" + t("month")}
-                  </>
-                )}
-              </small>
-              <h4 className="mt-8 mb-2 font-medium text-gray-900 ">{t("learn_more")}</h4>
-              <ul className="prose -ml-1 -mr-1 text-xs leading-5">
-                {docs && (
-                  <li>
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-500 no-underline hover:underline"
-                      href={docs}>
-                      <BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
-                      {t("documentation")}
-                    </a>
-                  </li>
-                )}
-                {website && (
-                  <li>
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-500 no-underline hover:underline"
-                      href={website}>
-                      <ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
-                      {website.replace("https://", "")}
-                    </a>
-                  </li>
-                )}
-                {email && (
-                  <li>
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-500 no-underline hover:underline"
-                      href={"mailto:" + email}>
-                      <MailIcon className="mr-1 -mt-px inline h-4 w-4" />
-                      {email}
-                    </a>
-                  </li>
-                )}
-                {tos && (
-                  <li>
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-500 no-underline hover:underline"
-                      href={tos}>
-                      <DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
-                      {t("terms_of_service")}
-                    </a>
-                  </li>
-                )}
-                {privacy && (
-                  <li>
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      className="text-blue-500 no-underline hover:underline"
-                      href={privacy}>
-                      <ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
-                      {t("privacy_policy")}
-                    </a>
-                  </li>
-                )}
-              </ul>
-              <hr className="my-6" />
-              <small className="leading-1 block text-gray-500">
-                Every app published on the Cal.com App Store is open source and thoroughly tested via peer
-                reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
-                published by Cal.com. If you encounter inappropriate content or behaviour please report it.
-              </small>
-              <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-                <FlagIcon className="inline h-3 w-3" /> Report App
-              </a>
-            </div>
-          </div>
-        </div>
-      </Shell>
-    </>
+    <Shell large isPublic>
+      {props.licenseRequired ? (
+        <LicenseRequired>
+          <Component {...props} />
+        </LicenseRequired>
+      ) : (
+        <Component {...props} />
+      )}
+    </Shell>
   );
 }

apps/web/components/AppsShell.tsx

@@ -1,23 +1,21 @@
 import { useSession } from "next-auth/react";
 import React from "react";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
 import NavTabs from "./NavTabs";
 
+const tabs = [
+  {
+    name: "app_store",
+    href: "/apps",
+  },
+  {
+    name: "installed_apps",
+    href: "/apps/installed",
+  },
+];
+
 export default function AppsShell({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
   const { status } = useSession();
-  const tabs = [
-    {
-      name: t("app_store"),
-      href: "/apps",
-    },
-    {
-      name: t("installed_apps"),
-      href: "/apps/installed",
-    },
-  ];
 
   return (
     <>

apps/web/components/BookingsShell.tsx

@@ -1,33 +1,30 @@
 import React from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 import NavTabs from "./NavTabs";
 
-export default function BookingsShell({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
-  const tabs = [
-    {
-      name: t("upcoming"),
-      href: "/bookings/upcoming",
-    },
-    {
-      name: t("recurring"),
-      href: "/bookings/recurring",
-    },
-    {
-      name: t("past"),
-      href: "/bookings/past",
-    },
-    {
-      name: t("cancelled"),
-      href: "/bookings/cancelled",
-    },
-  ];
+const tabs = [
+  {
+    name: "upcoming",
+    href: "/bookings/upcoming",
+  },
+  {
+    name: "recurring",
+    href: "/bookings/recurring",
+  },
+  {
+    name: "past",
+    href: "/bookings/past",
+  },
+  {
+    name: "cancelled",
+    href: "/bookings/cancelled",
+  },
+];
 
+export default function BookingsShell({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
+      <NavTabs tabs={tabs} />
       <main>{children}</main>
     </>
   );

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,10 +1,9 @@
+import classNames from "classnames";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
-import Button from "@calcom/ui/Button";
-
-import { useLocale } from "@lib/hooks/useLocale";
-import { trpc } from "@lib/trpc";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
@@ -24,6 +23,22 @@ const DestinationCalendarSelector = ({
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
   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 ?? [])
@@ -45,30 +60,48 @@ const DestinationCalendarSelector = ({
     query.data.connectedCalendars.map((selectedCalendar) => ({
       key: selectedCalendar.credentialId,
       label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
-      options: (selectedCalendar.calendars ?? []).map((cal) => ({
-        label: cal.name || "",
-        value: `${cal.integration}:${cal.externalId}`,
-      })),
+      options: (selectedCalendar.calendars ?? [])
+        .filter((cal) => cal.readOnly === false)
+        .map((cal) => ({
+          label: cal.name || "",
+          value: `${cal.integration}:${cal.externalId}`,
+        })),
     })) ?? [];
   return (
     <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      {/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
-      {!hidePlaceholder && (
-        <div className="pointer-events-none absolute z-10 w-full">
-          <Button
-            size="sm"
-            color="secondary"
-            className="m-[1px] w-[calc(100%_-_40px)] overflow-hidden overflow-ellipsis whitespace-nowrap rounded-sm border-none leading-5">
-            {t("select_destination_calendar")}: {selectedOption?.label || ""}
-          </Button>
-        </div>
-      )}
       <Select
-        name={"primarySelectedCalendar"}
+        name="primarySelectedCalendar"
         placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
         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: "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-md border-gray-300 sm:text-sm"
+        className={classNames(
+          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm",
+          !hidePlaceholder && "font-medium"
+        )}
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {

apps/web/components/Embed.tsx

@@ -1,27 +1,272 @@
-import { CodeIcon, EyeIcon, SunIcon, ChevronRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";
+import { ArrowLeftIcon, ChevronRightIcon, CodeIcon, EyeIcon, SunIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { useRouter } from "next/router";
-import { useRef, useState } from "react";
-import { components, ControlProps, SingleValue } from "react-select";
+import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
+import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { EventType } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
 import { Button, Switch } from "@calcom/ui";
-import { Dialog, DialogContent, DialogClose } from "@calcom/ui/Dialog";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
 
-import { WEBAPP_URL, EMBED_LIB_URL } from "@lib/config/constants";
-import { trpc } from "@lib/trpc";
+import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
 import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
 
 type EmbedType = "inline" | "floating-popup" | "element-click";
+type EmbedFramework = "react" | "HTML";
+
+const enum Theme {
+  auto = "auto",
+  light = "light",
+  dark = "dark",
+}
+
+type PreviewState = {
+  inline: {
+    width: string;
+    height: string;
+  };
+  theme: Theme;
+  floatingPopup: Record<string, string>;
+  elementClick: Record<string, string>;
+  palette: {
+    brandColor: string;
+  };
+};
 const queryParamsForDialog = ["embedType", "tabName", "eventTypeId"];
 
+const getDimension = (dimension: string) => {
+  if (dimension.match(/^\d+$/)) {
+    dimension = `${dimension}%`;
+  }
+  return dimension;
+};
+
+/**
+ * It allows us to show code with certain reusable blocks indented according to the block variable placement
+ * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string
+ * `A${var}C` with var = "B" ->   partsWithoutBlock=['A','C'] blocksOrVariables=['B']
+ */
+const code = (partsWithoutBlock: TemplateStringsArray, ...blocksOrVariables: string[]) => {
+  const constructedCode: string[] = [];
+  for (let i = 0; i < partsWithoutBlock.length; i++) {
+    const partWithoutBlock = partsWithoutBlock[i];
+    // blocksOrVariables length would always be 1 less than partsWithoutBlock
+    // So, last item should be concatenated as is.
+    if (i >= blocksOrVariables.length) {
+      constructedCode.push(partWithoutBlock);
+      continue;
+    }
+    const block = blocksOrVariables[i];
+    const indentedBlock: string[] = [];
+    let indent = "";
+    block.split("\n").forEach((line) => {
+      indentedBlock.push(line);
+    });
+    // non-null assertion is okay because we know that we are referencing last element.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const indentationMatch = partWithoutBlock
+      .split("\n")
+      .at(-1)!
+      .match(/(^[\t ]*).*$/);
+    if (indentationMatch) {
+      indent = indentationMatch[1];
+    }
+    constructedCode.push(partWithoutBlock + indentedBlock.join("\n" + indent));
+  }
+  return constructedCode.join("");
+};
+
+const getInstructionString = ({
+  apiName,
+  instructionName,
+  instructionArg,
+}: {
+  apiName: string;
+  instructionName: string;
+  instructionArg: Record<string, unknown>;
+}) => {
+  return `${apiName}("${instructionName}", ${JSON.stringify(instructionArg)});`;
+};
+
+const getEmbedUIInstructionString = ({
+  apiName,
+  theme,
+  brandColor,
+}: {
+  apiName: string;
+  theme?: string;
+  brandColor: string;
+}) => {
+  theme = theme !== "auto" ? theme : undefined;
+  return getInstructionString({
+    apiName,
+    instructionName: "ui",
+    instructionArg: {
+      theme,
+      styles: {
+        branding: {
+          brandColor,
+        },
+      },
+    },
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Codes: Record<string, Record<string, (...args: any[]) => string>> = {
+  react: {
+    inline: ({
+      calLink,
+      uiInstructionCode,
+      previewState,
+    }: {
+      calLink: string;
+      uiInstructionCode: string;
+      previewState: PreviewState;
+    }) => {
+      const width = getDimension(previewState.inline.width);
+      const height = getDimension(previewState.inline.height);
+      return code`
+import Cal, { getCalApi } from "@calcom/embed-react";
+
+function MyComponent() {
+  useEffect(()=>{
+    (async function () {
+      const cal = await getCalApi();
+      ${uiInstructionCode}
+    })();
+  }, [])
+  return <Cal calLink="${calLink}" style={{width:"${width}",height:"${height}",overflow:"scroll"}} />;
+};`;
+    },
+    "floating-popup": ({
+      floatingButtonArg,
+      uiInstructionCode,
+    }: {
+      floatingButtonArg: string;
+      uiInstructionCode: string;
+    }) => {
+      return code`
+import Cal, { getCalApi } from "@calcom/embed-react";
+
+function MyComponent() {
+  useEffect(()=>{
+    (async function () {
+      const cal = await getCalApi();
+      Cal("floatingButton", ${floatingButtonArg});
+      ${uiInstructionCode}
+    })();
+  }, [])
+};`;
+    },
+    "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
+      return code`
+import Cal, { getCalApi } from "@calcom/embed-react";
+
+function MyComponent() {
+  useEffect(()=>{
+    (async function () {
+      const cal = await getCalApi();
+      ${uiInstructionCode}
+    })();
+  }, [])
+  return <button data-cal-link="${calLink}" />;
+};`;
+    },
+  },
+  HTML: {
+    inline: ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
+      return code`Cal("inline", {
+  elementOrSelector:"#my-cal-inline",
+  calLink: "${calLink}"
+});
+
+${uiInstructionCode}`;
+    },
+
+    "floating-popup": ({
+      floatingButtonArg,
+      uiInstructionCode,
+    }: {
+      floatingButtonArg: string;
+      uiInstructionCode: string;
+    }) => {
+      return code`Cal("floatingButton", ${floatingButtonArg});
+${uiInstructionCode}`;
+    },
+    "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
+      return code`// Important: Make sure to add \`data-cal-link="${calLink}"\` attribute to the element you want to open Cal on click
+${uiInstructionCode}`;
+    },
+  },
+};
+
+const getEmbedTypeSpecificString = ({
+  embedFramework,
+  embedType,
+  calLink,
+  previewState,
+}: {
+  embedFramework: EmbedFramework;
+  embedType: EmbedType;
+  calLink: string;
+  previewState: PreviewState;
+}) => {
+  const frameworkCodes = Codes[embedFramework];
+  if (!frameworkCodes) {
+    throw new Error(`No code available for the framework:${embedFramework}`);
+  }
+  let uiInstructionStringArg = undefined;
+  if (embedFramework === "react") {
+    uiInstructionStringArg = {
+      apiName: "cal",
+      theme: previewState.theme,
+      brandColor: previewState.palette.brandColor,
+    };
+  } else {
+    uiInstructionStringArg = {
+      apiName: "Cal",
+      theme: previewState.theme,
+      brandColor: previewState.palette.brandColor,
+    };
+  }
+  if (!frameworkCodes[embedType]) {
+    throw new Error(`Code not available for framework:${embedFramework} and embedType:${embedType}`);
+  }
+  if (embedType === "inline") {
+    return frameworkCodes[embedType]({
+      calLink,
+      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
+      previewState,
+    });
+  } else if (embedType === "floating-popup") {
+    const floatingButtonArg = {
+      calLink,
+      ...previewState.floatingPopup,
+    };
+    return frameworkCodes[embedType]({
+      floatingButtonArg: JSON.stringify(floatingButtonArg),
+      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
+      previewState,
+    });
+  } else if (embedType === "element-click") {
+    return frameworkCodes[embedType]({
+      calLink,
+      uiInstructionCode: getEmbedUIInstructionString(uiInstructionStringArg),
+      previewState,
+    });
+  }
+  return "";
+};
+
 const embeds: {
   illustration: React.ReactElement;
   title: string;
@@ -98,10 +343,6 @@ const embeds: {
         <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" />
-        {/* <path
-        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
-        fill="#CFCFCF"
-      /> */}
       </svg>
     ),
   },
@@ -128,10 +369,6 @@ const embeds: {
         <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="242" y="235.5" width="34" height="2" rx="1" fill="white" />
-        {/* <path
-        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
-        fill="#CFCFCF"
-      /> */}
       </svg>
     ),
   },
@@ -207,41 +444,137 @@ const embeds: {
         <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" />
-        {/* <path
-        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
-        fill="#CFCFCF"
-      /> */}
       </svg>
     ),
   },
 ];
+const tabs = [
+  {
+    name: "HTML",
+    tabName: "embed-code",
+    icon: CodeIcon,
+    type: "code",
+    Component: forwardRef<
+      HTMLTextAreaElement | HTMLIFrameElement | null,
+      { embedType: EmbedType; calLink: string; previewState: PreviewState }
+    >(function EmbedHtml({ embedType, calLink, previewState }, ref) {
+      const { t } = useLocale();
+      if (ref instanceof Function || !ref) {
+        return null;
+      }
+      if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
+        return null;
+      }
+      return (
+        <>
+          <div>
+            <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
+          </div>
+          <TextArea
+            data-testid="embed-code"
+            ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
+            name="embed-code"
+            className="h-[calc(100%-50px)]"
+            readOnly
+            value={
+              `<!-- Cal ${embedType} embed code begins -->\n` +
+              (embedType === "inline"
+                ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
+                    previewState.inline.height
+                  )};overflow:scroll" id="my-cal-inline"></div>\n`
+                : "") +
+              `<script type="text/javascript">
+${getEmbedSnippetString()}
+${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previewState })}
+</script>
+<!-- Cal ${embedType} embed code ends -->`
+            }
+          />
+          <p className="hidden text-sm text-gray-500">
+            {t(
+              "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
+            )}
+          </p>
+        </>
+      );
+    }),
+  },
+  {
+    name: "React",
+    tabName: "embed-react",
+    icon: CodeIcon,
+    type: "code",
+    Component: forwardRef<
+      HTMLTextAreaElement | HTMLIFrameElement | null,
+      { embedType: EmbedType; calLink: string; previewState: PreviewState }
+    >(function EmbedReact({ embedType, calLink, previewState }, ref) {
+      const { t } = useLocale();
+      if (ref instanceof Function || !ref) {
+        return null;
+      }
+      if (ref.current && !(ref.current instanceof HTMLTextAreaElement)) {
+        return null;
+      }
+      return (
+        <>
+          <small className="flex py-4 text-neutral-500">{t("create_update_react_component")}</small>
+          <TextArea
+            data-testid="embed-react"
+            ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
+            name="embed-react"
+            className="h-[calc(100%-50px)]"
+            readOnly
+            value={`/* First make sure that you have installed the package */
+
+/* If you are using yarn */
+// yarn add @calcom/embed-react
+
+/* If you are using npm */
+// npm install @calcom/embed-react
+${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, previewState })}
+`}
+          />
+        </>
+      );
+    }),
+  },
+  {
+    name: "Preview",
+    tabName: "embed-preview",
+    icon: EyeIcon,
+    type: "iframe",
+    Component: forwardRef<
+      HTMLIFrameElement | HTMLTextAreaElement | null,
+      { calLink: string; embedType: EmbedType }
+    >(function Preview({ calLink, embedType }, ref) {
+      if (ref instanceof Function || !ref) {
+        return null;
+      }
+      if (ref.current && !(ref.current instanceof HTMLIFrameElement)) {
+        return null;
+      }
+      return (
+        <iframe
+          ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
+          data-testid="embed-preview"
+          className="border-1 h-[75vh] border"
+          width="100%"
+          height="100%"
+          src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
+        />
+      );
+    }),
+  },
+];
 
 function getEmbedSnippetString() {
   // TODO: Import this string from @calcom/embed-snippet
-  return `
-(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "${EMBED_LIB_URL}", "init");
+  return `(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "${EMBED_LIB_URL}", "init");
 Cal("init", {origin:"${WEBAPP_URL}"});
 `;
 }
 
-const EmbedNavBar = () => {
-  const { t } = useLocale();
-  const tabs = [
-    {
-      name: t("Embed"),
-      tabName: "embed-code",
-      icon: CodeIcon,
-    },
-    {
-      name: t("Preview"),
-      tabName: "embed-preview",
-      icon: EyeIcon,
-    },
-  ];
-
-  return <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />;
-};
-const ThemeSelectControl = ({ children, ...props }: ControlProps<any, false>) => {
+const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
       <SunIcon className="h-[32px] w-[32px] text-gray-500" />
@@ -299,7 +632,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   const { t } = useLocale();
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
-  const embedCode = useRef<HTMLTextAreaElement>(null);
+  const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
+  tabs
+    .filter((tab) => tab.type === "code")
+    .forEach((codeTab) => {
+      embedCodeRefs[codeTab.name] = createRef();
+    });
+
+  const refOfEmbedCodesRefs = useRef(embedCodeRefs);
   const embed = embeds.find((embed) => embed.type === embedType);
 
   const { data: eventType, isLoading } = trpc.useQuery([
@@ -316,7 +656,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
       width: "100%",
       height: "100%",
     },
-    theme: "auto",
+    theme: Theme.auto,
     floatingPopup: {},
     elementClick: {},
     palette: {
@@ -363,49 +703,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     eventType.slug
   }`;
 
-  // TODO: Not sure how to make these template strings look better formatted.
-  // This exact formatting is required to make the code look nicely formatted together.
-  const getEmbedUIInstructionString = () =>
-    `Cal("ui", {
-  ${getThemeForSnippet() ? 'theme: "' + previewState.theme + '",\n  ' : ""}styles: {
-    branding: ${JSON.stringify(previewState.palette)}
-  }
-})`;
-
-  const getEmbedTypeSpecificString = () => {
-    if (embedType === "inline") {
-      return `
-Cal("inline", {
-  elementOrSelector:"#my-cal-inline",
-  calLink: "${calLink}"
-});
-${getEmbedUIInstructionString().trim()}`;
-    } else if (embedType === "floating-popup") {
-      let floatingButtonArg = {
-        calLink,
-        ...previewState.floatingPopup,
-      };
-      return `
-Cal("floatingButton", ${JSON.stringify(floatingButtonArg)});
-${getEmbedUIInstructionString().trim()}`;
-    } else if (embedType === "element-click") {
-      return `//Important: Also, add data-cal-link="${calLink}" attribute to the element you want to open Cal on click
-${getEmbedUIInstructionString().trim()}`;
-    }
-    return "";
-  };
-
-  const getThemeForSnippet = () => {
-    return previewState.theme !== "auto" ? previewState.theme : null;
-  };
-
-  const getDimension = (dimension: string) => {
-    if (dimension.match(/^\d+$/)) {
-      dimension = `${dimension}%`;
-    }
-    return dimension;
-  };
-
   const addToPalette = (update: typeof previewState["palette"]) => {
     setPreviewState((previewState) => {
       return {
@@ -418,7 +715,7 @@ ${getEmbedUIInstructionString().trim()}`;
     });
   };
 
-  const previewInstruction = (instruction: { name: string; arg: any }) => {
+  const previewInstruction = (instruction: { name: string; arg: unknown }) => {
     iframeRef.current?.contentWindow?.postMessage(
       {
         mode: "cal:preview",
@@ -475,9 +772,9 @@ ${getEmbedUIInstructionString().trim()}`;
   }
 
   const ThemeOptions = [
-    { value: "auto", label: "Auto Theme" },
-    { value: "dark", label: "Dark Theme" },
-    { value: "light", label: "Light Theme" },
+    { value: Theme.auto, label: "Auto Theme" },
+    { value: Theme.dark, label: "Dark Theme" },
+    { value: Theme.light, label: "Light Theme" },
   ];
 
   const FloatingPopupPositionOptions = [
@@ -507,11 +804,11 @@ ${getEmbedUIInstructionString().trim()}`;
                   },
                 });
               }}>
-              <ArrowLeftIcon className="mr-4 w-4"></ArrowLeftIcon>
+              <ArrowLeftIcon className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
-          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")}></hr>
+          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
           <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
             <Collapsible
               open={isEmbedCustomizationOpen}
@@ -544,7 +841,7 @@ ${getEmbedUIInstructionString().trim()}`;
                       value={previewState.inline.width}
                       onChange={(e) => {
                         setPreviewState((previewState) => {
-                          let width = e.target.value || "100%";
+                          const width = e.target.value || "100%";
 
                           return {
                             ...previewState,
@@ -623,7 +920,8 @@ ${getEmbedUIInstructionString().trim()}`;
                           },
                         };
                       });
-                    }}></Switch>
+                    }}
+                  />
                 </div>
                 <div
                   className={classNames(
@@ -644,7 +942,8 @@ ${getEmbedUIInstructionString().trim()}`;
                       });
                     }}
                     defaultValue={FloatingPopupPositionOptions[0]}
-                    options={FloatingPopupPositionOptions}></Select>
+                    options={FloatingPopupPositionOptions}
+                  />
                 </div>
                 <div
                   className={classNames(
@@ -665,7 +964,8 @@ ${getEmbedUIInstructionString().trim()}`;
                             },
                           };
                         });
-                      }}></ColorPicker>
+                      }}
+                    />
                   </div>
                 </div>
                 <div
@@ -687,29 +987,14 @@ ${getEmbedUIInstructionString().trim()}`;
                             },
                           };
                         });
-                      }}></ColorPicker>
+                      }}
+                    />
                   </div>
                 </div>
-                {/* <div
-                  className={classNames(
-                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
-                  <div>Button Color on Hover</div>
-                  <div className="w-36">
-                    <ColorPicker
-                      defaultValue="#000000"
-                      onChange={(color) => {
-                        addToPalette({
-                          "floating-popup-button-color-hover": color,
-                        });
-                      }}></ColorPicker>
-                  </div>
-                </div> */}
               </CollapsibleContent>
             </Collapsible>
           </div>
-          <hr className="mt-4"></hr>
+          <hr className="mt-4" />
           <div className="mt-4 font-medium">
             <Collapsible
               open={isBookingCustomizationOpen}
@@ -743,7 +1028,8 @@ ${getEmbedUIInstructionString().trim()}`;
                           };
                         });
                       }}
-                      options={ThemeOptions}></Select>
+                      options={ThemeOptions}
+                    />
                   </Label>
                   {[
                     { name: "brandColor", title: "Brand Color" },
@@ -759,11 +1045,11 @@ ${getEmbedUIInstructionString().trim()}`;
                         <ColorPicker
                           defaultValue="#000000"
                           onChange={(color) => {
-                            //@ts-ignore - How to support dynamic palette names?
                             addToPalette({
-                              [palette.name]: color,
+                              [palette.name as keyof typeof previewState["palette"]]: color,
                             });
-                          }}></ColorPicker>
+                          }}
+                        />
                       </div>
                     </Label>
                   ))}
@@ -773,63 +1059,54 @@ ${getEmbedUIInstructionString().trim()}`;
           </div>
         </div>
         <div className="w-2/3 bg-gray-50 p-6">
-          <EmbedNavBar />
-          <div>
-            <div
-              className={classNames(router.query.tabName === "embed-code" ? "block" : "hidden", "h-[75vh]")}>
-              <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
-              <TextArea
-                data-testid="embed-code"
-                ref={embedCode}
-                name="embed-code"
-                className="h-[36rem]"
-                readOnly
-                value={
-                  `<!-- Cal ${embedType} embed code begins -->\n` +
-                  (embedType === "inline"
-                    ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
-                        previewState.inline.height
-                      )};overflow:scroll" id="my-cal-inline"></div>\n`
-                    : "") +
-                  `<script type="text/javascript">
-${getEmbedSnippetString().trim()}
-${getEmbedTypeSpecificString().trim()}
-</script>
-<!-- Cal ${embedType} embed code ends -->`
-                }></TextArea>
-              <p className="hidden text-sm text-gray-500">
-                {t(
-                  "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
-                )}
-              </p>
-            </div>
-            <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"}>
-              <iframe
-                ref={iframeRef}
-                data-testid="embed-preview"
-                className="border-1 h-[75vh] border"
-                width="100%"
-                height="100%"
-                src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
-              />
-            </div>
-          </div>
-          <div className="mt-8 flex flex-row-reverse gap-x-2">
-            <Button
-              type="submit"
-              onClick={() => {
-                if (!embedCode.current) {
-                  return;
-                }
-                navigator.clipboard.writeText(embedCode.current.value);
-                showToast(t("code_copied"), "success");
-              }}>
-              {t("copy_code")}
-            </Button>
-            <DialogClose asChild>
-              <Button color="secondary">{t("Close")}</Button>
-            </DialogClose>
-          </div>
+          <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />
+          {tabs.map((tab) => {
+            return (
+              <div
+                key={tab.tabName}
+                className={classNames(router.query.tabName === tab.tabName ? "block" : "hidden")}>
+                <div>
+                  <div className={classNames(tab.type === "code" ? "h-[75vh]" : "")}>
+                    {tab.type === "code" ? (
+                      <tab.Component
+                        embedType={embedType}
+                        calLink={calLink}
+                        previewState={previewState}
+                        ref={refOfEmbedCodesRefs.current[tab.name]}
+                      />
+                    ) : (
+                      <tab.Component
+                        embedType={embedType}
+                        calLink={calLink}
+                        previewState={previewState}
+                        ref={iframeRef}
+                      />
+                    )}
+                  </div>
+                  <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"} />
+                </div>
+                <div className="mt-8 flex flex-row-reverse gap-x-2">
+                  {tab.type === "code" ? (
+                    <Button
+                      type="submit"
+                      onClick={() => {
+                        const currentTabCodeEl = refOfEmbedCodesRefs.current[tab.name].current;
+                        if (!currentTabCodeEl) {
+                          return;
+                        }
+                        navigator.clipboard.writeText(currentTabCodeEl.value);
+                        showToast(t("code_copied"), "success");
+                      }}>
+                      {t("copy_code")}
+                    </Button>
+                  ) : null}
+                  <DialogClose asChild>
+                    <Button color="secondary">{t("Close")}</Button>
+                  </DialogClose>
+                </div>
+              </div>
+            );
+          })}
         </div>
       </div>
     </DialogContent>
@@ -890,10 +1167,9 @@ export const EmbedButton = ({
       className={className}
       {...props}
       data-test-eventtype-id={eventTypeId}
-      data-testid={"event-type-embed"}
+      data-testid="event-type-embed"
       onClick={() => openEmbedModal()}>
-      <CodeIcon
-        className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")}></CodeIcon>
+      <CodeIcon className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")} />
       {t("Embed")}
     </Button>
   );

apps/web/components/EmptyScreen.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import { SVGComponent } from "@lib/types/SVGComponent";
-
-export default function EmptyScreen({
-  Icon,
-  headline,
-  description,
-}: {
-  Icon: SVGComponent;
-  headline: string;
-  description: string;
-}) {
-  return (
-    <>
-      <div className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-white">
-          <Icon className="inline-block h-10 w-10 bg-white" />
-        </div>
-        <div className="max-w-[420px] text-center">
-          <h2 className="mt-6 mb-1 text-lg font-medium">{headline}</h2>
-          <p className="text-sm leading-6 text-gray-600">{description}</p>
-        </div>
-      </div>
-    </>
-  );
-}

apps/web/components/I18nLanguageHandler.tsx

@@ -1,11 +1,16 @@
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
-import { trpc } from "@lib/trpc";
+import { trpc } from "@calcom/trpc/react";
 
 export function useViewerI18n() {
-  return trpc.useQuery(["viewer.i18n"], {
+  return trpc.useQuery(["viewer.public.i18n"], {
     staleTime: Infinity,
+    /**
+     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+     * We intend to not cache i18n query
+     **/
+    context: { skipBatch: true },
   });
 }
 

apps/web/components/ImageUploader.tsx

@@ -2,7 +2,7 @@ import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import Button from "@calcom/ui/Button";
-import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
@@ -71,15 +71,15 @@ export default function ImageUploader({
   ...props
 }: ImageUploaderProps) {
   const { t } = useLocale();
-  const [imageSrc, setImageSrc] = useState<string | null>();
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>();
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
 
   const [{ result }, setFile] = useFileReader({
     method: "readAsDataURL",
   });
 
   useEffect(() => {
-    setImageSrc(props.imageSrc);
+    if (props.imageSrc) setImageSrc(props.imageSrc);
   }, [props.imageSrc]);
 
   const onInputFile = (e: FileEvent<HTMLInputElement>) => {
@@ -90,8 +90,9 @@ export default function ImageUploader({
   };
 
   const showCroppedImage = useCallback(
-    async (croppedAreaPixels) => {
+    async (croppedAreaPixels: Area | null) => {
       try {
+        if (!croppedAreaPixels) return;
         const croppedImage = await getCroppedImg(
           result as string /* result is always string when using readAsDataUrl */,
           croppedAreaPixels
@@ -141,7 +142,7 @@ export default function ImageUploader({
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
-            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
+            <label className="mt-8 rounded-sm border border-gray-300 bg-white px-3 py-1 text-xs font-medium leading-4 text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1 dark:border-gray-800 dark:bg-transparent dark:text-white dark:hover:bg-gray-900">
               <input
                 onInput={onInputFile}
                 type="file"

apps/web/components/Kbar.tsx

@@ -0,0 +1,279 @@
+import { SwitchVerticalIcon } from "@heroicons/react/outline";
+import { SearchIcon } from "@heroicons/react/solid";
+import {
+  KBarProvider,
+  KBarPortal,
+  KBarPositioner,
+  KBarAnimator,
+  KBarSearch,
+  KBarResults,
+  useMatches,
+  useKBar,
+} from "kbar";
+import { useRouter } from "next/router";
+import { Command, CornerDownLeft } from "react-feather";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { isMac } from "@calcom/lib/isMac";
+import { Tooltip } from "@calcom/ui";
+
+type shortcutArrayType = {
+  shortcuts?: string[];
+};
+
+export const KBarRoot = ({ children }: { children: React.ReactNode }) => {
+  const router = useRouter();
+
+  // grab link to events
+  // quick nested actions would be extremely useful
+  const actions = [
+    // {
+    //   id: "toggle-idle",
+    //   name: "Test Function",
+    //   section: "Status",
+    //   shortcut: ["t", "f"],
+    //   keywords: "set yourself away bookings",
+    //   perform: () => alert("Hello World"),
+    // },
+
+    {
+      id: "workflows",
+      name: "Workflows",
+      section: "Workflows",
+      shortcut: ["w", "f"],
+      keywords: "workflows automation",
+      perform: () => router.push("/workflows"),
+    },
+    {
+      id: "event-types",
+      name: "Event Types",
+      section: "Event Types",
+      shortcut: ["e", "t"],
+      keywords: "event types",
+      perform: () => router.push("/event-types"),
+    },
+    {
+      id: "app-store",
+      name: "App Store",
+      section: "Apps",
+      shortcut: ["a", "s"],
+      keywords: "app store",
+      perform: () => router.push("/apps"),
+    },
+    {
+      id: "upcoming-bookings",
+      name: "Upcoming Bookings",
+      section: "Bookings",
+      shortcut: ["u", "b"],
+      keywords: "upcoming bookings",
+      perform: () => router.push("/bookings/upcoming"),
+    },
+    {
+      id: "recurring-bookings",
+      name: "Recurring Bookings",
+      section: "Bookings",
+      shortcut: ["r", "b"],
+      keywords: "recurring bookings",
+      perform: () => router.push("/bookings/recurring"),
+    },
+    {
+      id: "past-bookings",
+      name: "Past Bookings",
+      section: "Bookings",
+      shortcut: ["p", "b"],
+      keywords: "past bookings",
+      perform: () => router.push("/bookings/past"),
+    },
+    {
+      id: "cancelled-bookings",
+      name: "Cancelled Bookings",
+      section: "Bookings",
+      shortcut: ["c", "b"],
+      keywords: "cancelled bookings",
+      perform: () => router.push("/bookings/cancelled"),
+    },
+    {
+      id: "schedule",
+      name: "Schedule",
+      section: "Availability",
+      shortcut: ["s", "a"],
+      keywords: "schedule availability",
+      perform: () => router.push("/availability"),
+    },
+    {
+      id: "profile",
+      name: "Profile",
+      section: "Profile Settings",
+      shortcut: ["p", "s"],
+      keywords: "setting profile",
+      perform: () => router.push("/settings/profile"),
+    },
+    {
+      id: "avatar",
+      name: "Change Avatar",
+      section: "Profile Settings",
+      shortcut: ["c", "a"],
+      keywords: "remove change modify avatar",
+      perform: () => router.push("/settings/profile"),
+    },
+    {
+      id: "timezone",
+      name: "Change Timezone",
+      section: "Profile Settings",
+      shortcut: ["c", "t"],
+      keywords: "change modify timezone",
+      perform: () => router.push("/settings/profile"),
+    },
+    {
+      id: "brand-color",
+      name: "Change Brand Color",
+      section: "Profile Settings",
+      shortcut: ["b", "c"],
+      keywords: "change modify brand color",
+      perform: () => router.push("/settings/profile"),
+    },
+    {
+      id: "teams",
+      name: "Teams",
+      shortcut: ["t", "s"],
+      keywords: "add manage modify team",
+      perform: () => router.push("/settings/teams"),
+    },
+    {
+      id: "password",
+      name: "Change Password",
+      section: "Security Settings",
+      shortcut: ["c", "p"],
+      keywords: "change modify password",
+      perform: () => router.push("/settings/security"),
+    },
+    {
+      id: "two-factor",
+      name: "Two Factor Authentication",
+      section: "Security Settings",
+      shortcut: ["t", "f", "a"],
+      keywords: "two factor authentication",
+      perform: () => router.push("/settings/security"),
+    },
+    {
+      id: "impersonation",
+      name: "User Impersonation",
+      section: "Security Settings",
+      shortcut: ["u", "i"],
+      keywords: "user impersonation",
+      perform: () => router.push("/settings/security"),
+    },
+    {
+      id: "webhooks",
+      name: "Webhook",
+      section: "Developer Settings",
+      shortcut: ["w", "h"],
+      keywords: "webhook automation",
+      perform: () => router.push("/settings/developer"),
+    },
+    {
+      id: "api-keys",
+      name: "API Keys",
+      section: "Developer Settings",
+      shortcut: ["a", "p", "i"],
+      keywords: "api keys",
+      perform: () => router.push("/settings/developer"),
+    },
+    {
+      id: "billing",
+      name: "View and Manage Billing",
+      section: "Billing",
+      shortcut: ["m", "b"],
+      keywords: "billing view manage",
+      perform: () => router.push("/settings/billing"),
+    },
+  ];
+
+  return <KBarProvider actions={actions}>{children}</KBarProvider>;
+};
+
+export const KBarContent = () => {
+  const { t } = useLocale();
+
+  return (
+    <KBarPortal>
+      <KBarPositioner>
+        <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-sm bg-white shadow-lg">
+          <div className="flex items-center justify-center border-b">
+            <SearchIcon className="mx-3 h-4 w-4 text-gray-500" />
+            <KBarSearch className="w-full rounded-sm py-2.5 focus-visible:outline-none" />
+          </div>
+          <RenderResults />
+          <div className="hidden items-center space-x-1 border-t px-2 py-1.5 text-xs text-gray-500 sm:flex">
+            <SwitchVerticalIcon className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
+            <CornerDownLeft className="h-4 w-4" />
+            <span className="pr-2">{t("open")}</span>
+            {isMac ? <Command className="h-3 w-3" /> : "CTRL"}
+            <span className="pr-1">+ K </span>
+            <span className="pr-2">{t("close")}</span>
+          </div>
+        </KBarAnimator>
+        <div className="z-1 fixed inset-0 bg-gray-600 bg-opacity-75" />
+      </KBarPositioner>
+    </KBarPortal>
+  );
+};
+
+export const KBarTrigger = () => {
+  const { query } = useKBar();
+  return (
+    <>
+      <Tooltip side="right" content={isMac ? "⌘ + K" : "CTRL + K"}>
+        <button
+          color="minimal"
+          onClick={query.toggle}
+          className="group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
+          <SearchIcon className="h-5 w-5 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
+        </button>
+      </Tooltip>
+    </>
+  );
+};
+
+const DisplayShortcuts = (item: shortcutArrayType) => {
+  const shortcuts = item.shortcuts;
+
+  return (
+    <span className="space-x-1">
+      {shortcuts?.map((shortcut) => {
+        return (
+          <kbd key={shortcut} className="rounded-sm border bg-white px-2 py-1 text-black hover:bg-gray-100">
+            {shortcut}
+          </kbd>
+        );
+      })}
+    </span>
+  );
+};
+
+function RenderResults() {
+  const { results } = useMatches();
+  console.log(results);
+
+  return (
+    <KBarResults
+      items={results}
+      onRender={({ item, active }) =>
+        typeof item === "string" ? (
+          <div className="bg-white p-4 text-xs uppercase text-gray-500">{item}</div>
+        ) : (
+          <div
+            // For seeing keyboard up & down navigation in action, we need visual feedback based on "active" prop
+            style={{
+              background: active ? "rgb(245,245,245)" : "#fff",
+              borderLeft: active ? "2px solid black" : "2px solid transparent",
+            }}
+            className="flex items-center justify-between px-4 py-2.5 text-sm hover:cursor-pointer">
+            <span>{item.name}</span>
+            <DisplayShortcuts shortcuts={item.shortcut} />
+          </div>
+        )
+      }
+    />
+  );
+}

apps/web/components/Logo.tsx

@@ -1,18 +1,15 @@
+import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
+
 export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
   return (
     <h1 className="inline">
       <strong>
         {icon ? (
           // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto w-9" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
+          <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
         ) : (
           // eslint-disable-next-line @next/next/no-img-element
-          <img
-            className={small ? "h-4 w-auto" : "h-5 w-auto"}
-            alt="Cal"
-            title="Cal"
-            src="/calendso-logo-white-word.svg"
-          />
+          <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
         )}
       </strong>
     </h1>

apps/web/components/NavTabs.tsx

@@ -1,9 +1,13 @@
 import { AdminRequired } from "components/ui/AdminRequired";
+import noop from "lodash/noop";
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React, { ElementType, FC, Fragment, MouseEventHandler } from "react";
+import { FC, Fragment, MouseEventHandler } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
+import { SVGComponent } from "@lib/types/SVGComponent";
 
 export interface NavTabProps {
   tabs: {
@@ -12,26 +16,28 @@ export interface NavTabProps {
     href?: string;
     /** If you want to change query param tabName as per current tab */
     tabName?: string;
-    icon?: ElementType;
+    icon?: SVGComponent;
     adminRequired?: boolean;
+    className?: string;
   }[];
   linkProps?: Omit<LinkProps, "href">;
 }
 
 const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
   const router = useRouter();
+  const { t } = useLocale();
   return (
     <>
       <nav
-        className="-mb-px flex space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse"
+        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
         aria-label="Tabs"
         {...props}>
         {tabs.map((tab) => {
-          let href: string;
-          let isCurrent;
           if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
             throw new Error("Use either tabName or href");
           }
+          let href = "";
+          let isCurrent;
           if (tab.href) {
             href = tab.href;
             isCurrent = router.asPath === tab.href;
@@ -39,6 +45,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
             href = "";
             isCurrent = router.query.tabName === tab.tabName;
           }
+
           const onClick: MouseEventHandler = tab.tabName
             ? (e) => {
                 e.preventDefault();
@@ -49,19 +56,21 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                   },
                 });
               }
-            : () => {};
+            : noop;
 
           const Component = tab.adminRequired ? AdminRequired : Fragment;
+          const className = tab.className || "";
           return (
             <Component key={tab.name}>
-              <Link key={tab.name} href={href!} {...linkProps}>
+              <Link key={tab.name} href={href} {...linkProps}>
                 <a
                   onClick={onClick}
                   className={classNames(
                     isCurrent
                       ? "border-neutral-900 text-neutral-900"
                       : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
-                    "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
+                    "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium",
+                    className
                   )}
                   aria-current={isCurrent ? "page" : undefined}>
                   {tab.icon && (
@@ -73,7 +82,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                       aria-hidden="true"
                     />
                   )}
-                  <span>{tab.name}</span>
+                  <span>{t(tab.name)}</span>
                 </a>
               </Link>
             </Component>

apps/web/components/SettingsShell.tsx

@@ -1,48 +1,66 @@
-import { CreditCardIcon, KeyIcon, LockClosedIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
-import React from "react";
+import {
+  CreditCardIcon,
+  KeyIcon,
+  LockClosedIcon,
+  UserGroupIcon,
+  UserIcon,
+  CodeIcon,
+} from "@heroicons/react/solid";
+import React, { ComponentProps } from "react";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
+import ErrorBoundary from "@lib/ErrorBoundary";
 
-import NavTabs, { NavTabProps } from "./NavTabs";
+import NavTabs from "./NavTabs";
+import Shell from "./Shell";
 
-export default function SettingsShell({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
-
-  const tabs = [
-    {
-      name: t("profile"),
-      href: "/settings/profile",
-      icon: UserIcon,
-    },
-    {
-      name: t("security"),
-      href: "/settings/security",
-      icon: KeyIcon,
-    },
-    {
-      name: t("teams"),
-      href: "/settings/teams",
-      icon: UserGroupIcon,
-    },
-    {
-      name: t("billing"),
-      href: "/settings/billing",
-      icon: CreditCardIcon,
-    },
-    {
-      name: t("admin"),
-      href: "/settings/admin",
-      icon: LockClosedIcon,
-      adminRequired: true,
-    },
-  ];
+const tabs = [
+  {
+    name: "profile",
+    href: "/settings/profile",
+    icon: UserIcon,
+  },
+  {
+    name: "teams",
+    href: "/settings/teams",
+    icon: UserGroupIcon,
+  },
+  {
+    name: "security",
+    href: "/settings/security",
+    icon: KeyIcon,
+  },
+  {
+    name: "developer",
+    href: "/settings/developer",
+    icon: CodeIcon,
+  },
+  {
+    name: "billing",
+    href: "/settings/billing",
+    icon: CreditCardIcon,
+  },
+  {
+    name: "admin",
+    href: "/settings/admin",
+    icon: LockClosedIcon,
+    adminRequired: true,
+  },
+];
 
+export default function SettingsShell({
+  children,
+  ...rest
+}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <>
+    <Shell {...rest}>
       <div className="sm:mx-auto">
         <NavTabs tabs={tabs} />
       </div>
-      <main className="max-w-4xl">{children}</main>
-    </>
+      <main className="max-w-4xl">
+        <>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </>
+      </main>
+    </Shell>
   );
 }

apps/web/components/Shell.tsx

@@ -4,22 +4,28 @@ import {
   CalendarIcon,
   ClockIcon,
   CogIcon,
+  CollectionIcon,
   ExternalLinkIcon,
+  LightningBoltIcon,
   LinkIcon,
   LogoutIcon,
   MapIcon,
   MoonIcon,
+  QuestionMarkCircleIcon,
   ViewGridIcon,
 } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment, ReactNode, useEffect } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import CustomBranding from "@calcom/lib/CustomBranding";
+import { WEBAPP_URL, JOIN_SLACK, ROADMAP } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
@@ -31,16 +37,15 @@ import LicenseBanner from "@ee/components/LicenseBanner";
 import TrialBanner from "@ee/components/TrialBanner";
 import HelpMenuItem from "@ee/components/support/HelpMenuItem";
 
+import ErrorBoundary from "@lib/ErrorBoundary";
 import classNames from "@lib/classNames";
-import { WEBAPP_URL } from "@lib/config/constants";
 import { shouldShowOnboarding } from "@lib/getting-started";
 import useMeQuery from "@lib/hooks/useMeQuery";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { trpc } from "@lib/trpc";
 
-import CustomBranding from "@components/CustomBranding";
+import { KBarRoot, KBarContent, KBarTrigger } from "@components/Kbar";
 import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
+import Badge from "@components/ui/Badge";
 import ImpersonatingBanner from "@components/ui/ImpersonatingBanner";
 
 import pkg from "../package.json";
@@ -120,6 +125,12 @@ const Layout = ({
 }: LayoutProps & { status: SessionContextValue["status"]; plan?: UserPlan; isLoading: boolean }) => {
   const isEmbed = useIsEmbed();
   const router = useRouter();
+  const { data: routingForms } = trpc.useQuery([
+    "viewer.appById",
+    {
+      appId: "routing_forms",
+    },
+  ]);
 
   const { t } = useLocale();
   const navigation = [
@@ -141,11 +152,26 @@ const Layout = ({
       icon: ClockIcon,
       current: router.asPath.startsWith("/availability"),
     },
+    routingForms
+      ? {
+          name: "Routing Forms",
+          href: "/apps/routing_forms/forms",
+          icon: CollectionIcon,
+          current: router.asPath.startsWith("/apps/routing_forms/"),
+        }
+      : null,
+    {
+      name: t("workflows"),
+      href: "/workflows",
+      icon: LightningBoltIcon,
+      current: router.asPath.startsWith("/workflows"),
+      pro: true,
+    },
     {
       name: t("apps"),
       href: "/apps",
       icon: ViewGridIcon,
-      current: router.asPath.startsWith("/apps"),
+      current: router.asPath.startsWith("/apps") && !router.asPath.startsWith("/apps/routing_forms/"),
       child: [
         {
           name: t("app_store"),
@@ -190,11 +216,16 @@ const Layout = ({
             <div className="flex w-14 flex-col lg:w-56">
               <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
                 <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
-                  <Link href="/event-types">
-                    <a className="px-4 md:hidden lg:inline">
-                      <Logo small />
-                    </a>
-                  </Link>
+                  <div className="items-center justify-between md:hidden lg:flex">
+                    <Link href="/event-types">
+                      <a className="px-4">
+                        <Logo small />
+                      </a>
+                    </Link>
+                    <div className="px-4">
+                      <KBarTrigger />
+                    </div>
+                  </div>
                   {/* logo icon for tablet */}
                   <Link href="/event-types">
                     <a className="text-center md:inline lg:hidden">
@@ -202,52 +233,63 @@ const Layout = ({
                     </a>
                   </Link>
                   <nav className="mt-2 flex-1 space-y-1 bg-white px-2 lg:mt-5">
-                    {navigation.map((item) => (
-                      <Fragment key={item.name}>
-                        <Link href={item.href}>
-                          <a
-                            className={classNames(
-                              item.current
-                                ? "bg-neutral-100 text-neutral-900"
-                                : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                              "group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
-                            )}>
-                            <item.icon
+                    {navigation.map((item) =>
+                      !item ? null : (
+                        <Fragment key={item.name}>
+                          <Link href={item.href}>
+                            <a
+                              aria-label={item.name}
                               className={classNames(
                                 item.current
-                                  ? "text-neutral-500"
-                                  : "text-neutral-400 group-hover:text-neutral-500",
-                                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                                  ? "bg-neutral-100 text-neutral-900"
+                                  : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
+                                "group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
+                              )}>
+                              <item.icon
+                                className={classNames(
+                                  item.current
+                                    ? "text-neutral-500"
+                                    : "text-neutral-400 group-hover:text-neutral-500",
+                                  "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                                )}
+                                aria-hidden="true"
+                              />
+                              <span className="hidden lg:inline">{item.name}</span>
+                              {item.pro && (
+                                <span className="ml-1">
+                                  {plan === "FREE" && <Badge variant="default">PRO</Badge>}
+                                </span>
                               )}
-                              aria-hidden="true"
-                            />
-                            <span className="hidden lg:inline">{item.name}</span>
-                          </a>
-                        </Link>
-                        {item.child &&
-                          router.asPath.startsWith(item.href) &&
-                          item.child.map((item) => {
-                            return (
-                              <Link key={item.name} href={item.href}>
-                                <a
-                                  className={classNames(
-                                    item.current
-                                      ? "text-neutral-900"
-                                      : "text-neutral-500 hover:text-neutral-900",
-                                    "group hidden items-center rounded-sm px-2 py-2 pl-10 text-sm font-medium lg:flex"
-                                  )}>
-                                  <span className="hidden lg:inline">{item.name}</span>
-                                </a>
-                              </Link>
-                            );
-                          })}
-                      </Fragment>
-                    ))}
+                            </a>
+                          </Link>
+                          {item.child &&
+                            router.asPath.startsWith(item.href) &&
+                            item.child.map((item) => {
+                              return (
+                                <Link key={item.name} href={item.href}>
+                                  <a
+                                    className={classNames(
+                                      item.current
+                                        ? "text-neutral-900"
+                                        : "text-neutral-500 hover:text-neutral-900",
+                                      "group hidden items-center rounded-sm px-2 py-2 pl-10 text-sm font-medium lg:flex"
+                                    )}>
+                                    <span className="hidden lg:inline">{item.name}</span>
+                                  </a>
+                                </Link>
+                              );
+                            })}
+                        </Fragment>
+                      )
+                    )}
+                    <span className="group flex items-center rounded-sm px-2 py-2 text-sm font-medium text-neutral-500 hover:bg-gray-50 hover:text-neutral-900 lg:hidden">
+                      <KBarTrigger />
+                    </span>
                   </nav>
                 </div>
                 <TrialBanner />
                 <div
-                  className="rounded-sm pb-2 pl-3 pt-2 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
+                  className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
                   data-testid="user-dropdown-trigger">
                   <span className="hidden lg:inline">
                     <UserDropdown />
@@ -269,6 +311,7 @@ const Layout = ({
         )}
 
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
+          <ImpersonatingBanner />
           <main
             className={classNames(
               "relative z-0 flex-1 overflow-y-auto focus:outline-none",
@@ -285,9 +328,12 @@ const Layout = ({
                     <Logo />
                   </a>
                 </Link>
-                <div className="flex items-center gap-3 self-center">
+                <div className="flex items-center gap-2 self-center">
+                  <span className="group flex items-center rounded-full p-2.5 text-sm font-medium text-neutral-500 hover:bg-gray-50 hover:text-neutral-900 lg:hidden">
+                    <KBarTrigger />
+                  </span>
                   <button className="rounded-full bg-white p-2 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-                    <span className="sr-only">{t("view_notifications")}</span>
+                    <span className="sr-only">{t("settings")}</span>
                     <Link href="/settings/profile">
                       <a>
                         <CogIcon className="h-6 w-6" aria-hidden="true" />
@@ -304,7 +350,6 @@ const Layout = ({
                 props.flexChildrenContainer && "flex flex-1 flex-col",
                 !props.large && "py-8"
               )}>
-              <ImpersonatingBanner />
               {!!props.backPath && (
                 <div className="mx-3 mb-8 sm:mx-8">
                   <Button
@@ -319,23 +364,21 @@ const Layout = ({
                 <div
                   className={classNames(
                     props.large && "bg-gray-100 py-8 lg:mb-8 lg:pt-16 lg:pb-7",
-                    "block min-h-[80px] justify-between px-4 sm:flex sm:px-6 md:px-8"
+                    "block justify-between px-4 sm:flex sm:px-6 md:px-8"
                   )}>
                   {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
                   <div className="mb-8 w-full">
                     {props.isLoading ? (
                       <>
-                        <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200"></div>
-                        <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200"></div>
+                        <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
+                        <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200" />
                       </>
                     ) : (
                       <>
                         <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900">
                           {props.heading}
                         </h1>
-                        <p className="min-h-10 text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">
-                          {props.subtitle}
-                        </p>
+                        <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
                       </>
                     )}
                   </div>
@@ -347,7 +390,7 @@ const Layout = ({
                   "px-4 sm:px-6 md:px-8",
                   props.flexChildrenContainer && "flex flex-1 flex-col"
                 )}>
-                {!props.isLoading ? props.children : props.customLoader}
+                <ErrorBoundary>{!props.isLoading ? props.children : props.customLoader}</ErrorBoundary>
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
               {status === "authenticated" && (
@@ -355,8 +398,11 @@ const Layout = ({
                   style={isEmbed ? { display: "none" } : {}}
                   className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
                   {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
-                  {navigation.flatMap((item, itemIdx) =>
-                    item.href === "/settings/profile" ? (
+                  {navigation.flatMap((item, itemIdx) => {
+                    if (!item) {
+                      return null;
+                    }
+                    return item.href === "/settings/profile" ? (
                       []
                     ) : (
                       <Link key={item.name} href={item.href}>
@@ -375,11 +421,11 @@ const Layout = ({
                             )}
                             aria-hidden="true"
                           />
-                          <span className="truncate">{item.name}</span>
+                          <span className="block truncate">{item.name}</span>
                         </a>
                       </Link>
-                    )
-                  )}
+                    );
+                  })}
                 </nav>
               )}
               {/* add padding to content for mobile navigation*/}
@@ -412,16 +458,8 @@ type LayoutProps = {
 };
 
 export default function Shell(props: LayoutProps) {
-  const router = useRouter();
   const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
   const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
-  const telemetry = useTelemetry();
-
-  useEffect(() => {
-    telemetry.withJitsu((jitsu) => {
-      return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.asPath));
-    });
-  }, [telemetry, router.asPath]);
 
   const query = useMeQuery();
   const user = query.data;
@@ -429,10 +467,11 @@ export default function Shell(props: LayoutProps) {
   const i18n = useViewerI18n();
   const { status } = useSession();
 
-  const isLoading =
-    i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading;
+  const isLoading = isRedirectingToOnboarding || loading;
 
-  if (isLoading) {
+  // Don't show any content till translations are loaded.
+  // As they are cached infintely, this status would be loading just once for the app's lifetime until refresh
+  if (i18n.status === "loading") {
     return (
       <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
         <Loader />
@@ -443,10 +482,11 @@ export default function Shell(props: LayoutProps) {
   if (!session && !props.isPublic) return null;
 
   return (
-    <>
+    <KBarRoot>
       <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
       <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
-    </>
+      <KBarContent />
+    </KBarRoot>
   );
 }
 
@@ -454,15 +494,41 @@ function UserDropdown({ small }: { small?: boolean }) {
   const { t } = useLocale();
   const query = useMeQuery();
   const user = query.data;
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const Beacon = window.Beacon;
+    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
+    Beacon &&
+      Beacon("session-data", {
+        username: user?.username || "Unknown",
+        screenResolution: `${screen.width}x${screen.height}`,
+      });
+  });
   const mutation = trpc.useMutation("viewer.away", {
     onSettled() {
       utils.invalidateQueries("viewer.me");
     },
   });
   const utils = trpc.useContext();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  if (!user) {
+    return null;
+  }
+  const onHelpItemSelect = () => {
+    setHelpOpen(false);
+    setMenuOpen(false);
+  };
+
+  // Prevent rendering dropdown if user isn't available.
+  // We don't want to show nameless user.
+  if (!user) {
+    return null;
+  }
   return (
-    <Dropdown>
-      <DropdownMenuTrigger asChild>
+    <Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
+      <DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>
         <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
           <span
             className={classNames(
@@ -473,25 +539,29 @@ function UserDropdown({ small }: { small?: boolean }) {
               // eslint-disable-next-line @next/next/no-img-element
               <img
                 className="rounded-full"
-                src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
-                alt={user?.username || "Nameless User"}
+                src={WEBAPP_URL + "/" + user.username + "/avatar.png"}
+                alt={user.username || "Nameless User"}
               />
             }
-            {!user?.away && (
-              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
+            {!user.away && (
+              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500" />
             )}
-            {user?.away && (
-              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-yellow-500"></div>
+            {user.away && (
+              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-yellow-500" />
             )}
           </span>
           {!small && (
             <span className="flex flex-grow items-center truncate">
               <span className="flex-grow truncate text-sm">
                 <span className="block truncate font-medium text-gray-900">
-                  {user?.username || "Nameless User"}
+                  {user.name || "Nameless User"}
                 </span>
                 <span className="block truncate font-normal text-neutral-500">
-                  {user?.username ? `cal.com/${user.username}` : "No public page"}
+                  {user.username
+                    ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
+                      ? `cal.com/${user.username}`
+                      : `/${user.username}`
+                    : "No public page"}
                 </span>
               </span>
               <SelectorIcon
@@ -502,97 +572,120 @@ function UserDropdown({ small }: { small?: boolean }) {
           )}
         </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent portalled={true}>
-        <DropdownMenuItem>
-          <a
-            onClick={() => {
-              mutation.mutate({ away: !user?.away });
-              utils.invalidateQueries("viewer.me");
-            }}
-            className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-            <MoonIcon
-              className={classNames(
-                user?.away
-                  ? "text-purple-500 group-hover:text-purple-700"
-                  : "text-gray-500 group-hover:text-gray-700",
-                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-              )}
-              aria-hidden="true"
-            />
-            {user?.away ? t("set_as_free") : t("set_as_away")}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        {user?.username && (
-          <DropdownMenuItem>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-              className="flex items-center px-4 py-2 text-sm text-gray-700">
-              <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("view_public_page")}
-            </a>
-          </DropdownMenuItem>
+      <DropdownMenuContent portalled={true} onInteractOutside={() => setMenuOpen(false)}>
+        {helpOpen ? (
+          <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
+        ) : (
+          <>
+            <DropdownMenuItem>
+              <a
+                onClick={() => {
+                  mutation.mutate({ away: !user?.away });
+                  utils.invalidateQueries("viewer.me");
+                }}
+                className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <MoonIcon
+                  className={classNames(
+                    user.away
+                      ? "text-purple-500 group-hover:text-purple-700"
+                      : "text-gray-500 group-hover:text-gray-700",
+                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  )}
+                  aria-hidden="true"
+                />
+                {user.away ? t("set_as_free") : t("set_as_away")}
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            {user.username && (
+              <DropdownMenuItem>
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
+                  className="flex items-center px-4 py-2 text-sm text-gray-700">
+                  <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" />{" "}
+                  {t("view_public_page")}
+                </a>
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuItem>
+              <a
+                href={JOIN_SLACK}
+                target="_blank"
+                rel="noreferrer"
+                className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+                <svg
+                  viewBox="0 0 2447.6 2452.5"
+                  className={classNames(
+                    "text-gray-500 group-hover:text-gray-700",
+                    "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
+                  )}
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g clipRule="evenodd" fillRule="evenodd">
+                    <path
+                      d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                      fill="currentColor"
+                    />
+                    <path
+                      d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                      fill="currentColor"
+                    />
+                  </g>
+                </svg>
+                {t("join_our_slack")}
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={ROADMAP}
+                className="flex items-center px-4 py-2 text-sm text-gray-700">
+                <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
+              </a>
+            </DropdownMenuItem>
+
+            <button
+              className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => setHelpOpen(true)}>
+              <QuestionMarkCircleIcon
+                className={classNames(
+                  "text-gray-500 group-hover:text-neutral-500",
+                  "h-5 w-5 flex-shrink-0 ltr:mr-3"
+                )}
+                aria-hidden="true"
+              />
+
+              {t("help")}
+            </button>
+
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuItem>
+              <a
+                onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+                className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <LogoutIcon
+                  className={classNames(
+                    "text-gray-500 group-hover:text-gray-700",
+                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  )}
+                  aria-hidden="true"
+                />
+                {t("sign_out")}
+              </a>
+            </DropdownMenuItem>
+          </>
         )}
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        <DropdownMenuItem>
-          <a
-            href="https://cal.com/slack"
-            target="_blank"
-            rel="noreferrer"
-            className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
-            <svg
-              viewBox="0 0 2447.6 2452.5"
-              className={classNames(
-                "text-gray-500 group-hover:text-gray-700",
-                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
-              )}
-              xmlns="http://www.w3.org/2000/svg">
-              <g clipRule="evenodd" fillRule="evenodd">
-                <path
-                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                  fill="currentColor"></path>
-              </g>
-            </svg>
-            {t("join_our_slack")}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://cal.com/roadmap"
-            className="flex items-center px-4 py-2 text-sm text-gray-700">
-            <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
-          </a>
-        </DropdownMenuItem>
-
-        <HelpMenuItem />
-
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        <DropdownMenuItem>
-          <a
-            onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-            className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-            <LogoutIcon
-              className={classNames(
-                "text-gray-500 group-hover:text-gray-700",
-                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-              )}
-              aria-hidden="true"
-            />
-            {t("sign_out")}
-          </a>
-        </DropdownMenuItem>
       </DropdownMenuContent>
     </Dropdown>
   );

apps/web/components/apps/AllApps.tsx

@@ -19,6 +19,7 @@ export default function AllApps({ apps }: { apps: App[] }) {
             logo={app.logo}
             rating={app.rating}
             reviews={app.reviews}
+            isProOnly={app.isProOnly}
           />
         ))}
       </div>

apps/web/components/apps/AppCard.tsx

@@ -1,8 +1,10 @@
-import { StarIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
+import Badge from "@components/ui/Badge";
+
 interface AppCardProps {
   logo: string;
   name: string;
@@ -11,9 +13,11 @@ interface AppCardProps {
   description: string;
   rating: number;
   reviews?: number;
+  isProOnly?: boolean;
 }
 
 export default function AppCard(props: AppCardProps) {
+  const { data: user } = trpc.useQuery(["viewer.me"]);
   return (
     <Link href={"/apps/" + props.slug}>
       <a
@@ -33,7 +37,14 @@ export default function AppCard(props: AppCardProps) {
             Add
           </Button>
         </div>
-        <h3 className="font-medium">{props.name}</h3>
+        <div className="flex items-center">
+          <h3 className="font-medium">{props.name}</h3>
+          {props.isProOnly && user?.plan === "FREE" ? (
+            <Badge className="ml-2" variant="default">
+              PRO
+            </Badge>
+          ) : null}
+        </div>
         {/* TODO: add reviews <div className="flex text-sm text-gray-800">
           <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
           <span className="pl-1 text-gray-500">{props.reviews} reviews</span>

apps/web/components/apps/SkeletonLoader.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
 
 import { ShellSubHeading } from "@components/Shell";
 
-function SkeletonLoader() {
+function SkeletonLoader({ className }: { className?: string }) {
   return (
     <>
-      <ShellSubHeading title={<div className="h-6 w-32 rounded-sm bg-gray-100"></div>} />
+      <ShellSubHeading title={<div className="h-6 w-32 rounded-sm bg-gray-100" />} {...{ className }} />
       <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-sm border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
@@ -24,16 +24,16 @@ function SkeletonItem() {
     <li className="group flex w-full items-center justify-between p-3">
       <div className="flex-grow truncate text-sm">
         <div className="flex justify-start space-x-2">
-          <SkeletonText width="10" height="10"></SkeletonText>
+          <SkeletonText width="10" height="10" />
           <div className="space-y-2">
-            <SkeletonText height="4" width="32"></SkeletonText>
-            <SkeletonText height="4" width="16"></SkeletonText>
+            <SkeletonText height="4" width="32" />
+            <SkeletonText height="4" width="16" />
           </div>
         </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 width="32" height="11"></SkeletonText>
+          <SkeletonText width="32" height="11" />
         </div>
       </div>
     </li>