v2.1.5

* Add very basic reporting logic

* Support more logical operators

* Add tests

* Fix types

* Add playwright test for reporting

* Fix table UI

* Remove only

* Better name variable

* Increase max_old_space to allow tests to run without reaciing limit

* Update test name

* Reuse getServerSideProps

* Variable renaming

* PR Suggestions

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.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`
@@ -86,4 +87,17 @@ VITAL_REGION="us"
 # Used for the Zapier integration
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
+
+# - LARK
+# Needed to enable Lark Calendar integration and Login with Lark
+# @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
+LARK_OPEN_APP_ID=""
+LARK_OPEN_APP_SECRET=""
+LARK_OPEN_VERIFICATION_TOKEN=""
+
+#   - WEB3
+# Used for the Web3 plugin
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
+ALCHEMY_API_KEY=""
+INFURA_API_KEY=""
 # *********************************************************************************************************

.env.example

@@ -15,16 +15,20 @@
 # - 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 ************************************************************************************************
-# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
+DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
 # ***********************************************************************************************************
 
 # - SHARED **************************************************************************************************
 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
@@ -42,16 +46,15 @@ PGSSLMODE=
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
 # Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
-# NEXTAUTH_URL='http://localhost:3000'
-NEXTAUTH_URL=
+NEXTAUTH_URL='http://localhost:3000'
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
 # You can use: `openssl rand -base64 32` to generate one
 NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
-NEXTAUTH_COOKIE_DOMAIN=.example.com
+NEXTAUTH_COOKIE_DOMAIN=
 
-# 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 +73,33 @@ 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=
+NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
+NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
+STRIPE_TEAM_MONTHLY_PRICE_ID=
+STRIPE_WEBHOOK_SECRET=
+STRIPE_PRIVATE_KEY=
+STRIPE_CLIENT_ID=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -106,3 +127,16 @@ 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
+
+# Close.com internal CRM
+CLOSECOM_API_KEY=
+
+# Sendgrid internal email sender
+SENDGRID_API_KEY=
+
+# Sentry
+NEXT_PUBLIC_SENTRY_DSN=
+SENTRY_IGNORE_API_RESOLUTION_ERROR=

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,11 +8,14 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
+**Environment**: Staging(main branch) / Production
+
 ## Type of change
 
 <!-- Please delete options that are not relevant. -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update

.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/9
+          github-token: ${{ secrets.GH_ACCESS_TOKEN }}
+          labeled:  🙋🏻‍♂️help wanted

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

@@ -0,0 +1,39 @@
+# .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:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+# List of jobs
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 0
+      - 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 }}
+          workingDir: "apps/storybook"
+          buildScriptName: "build"

.github/workflows/check-types.yml

@@ -1,26 +1,34 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
+    paths:
+      - "**.tsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
 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"
+      
+      - name: Show info
+        run: node -e "console.log(require('v8').getHeapStatistics())"
+      
+      - run: yarn --frozen-lockfile
       - run: yarn type-check

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

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

.github/workflows/cron-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/crowdin.yml

@@ -4,22 +4,24 @@ on:
   push:
     branches:
       - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 jobs:
   synchronize-with-crowdin:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Checkout
+        uses: actions/checkout@v2
 
-    - name: Checkout
-      uses: actions/checkout@v2
-
-    - name: crowdin action
-      uses: crowdin/github-action@1.4.9
-      with:
-        upload_translations: true
-        download_translations: true
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-        CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+      - name: crowdin action
+        uses: crowdin/github-action@1.4.9
+        with:
+          upload_translations: true
+          download_translations: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

.github/workflows/db-preview.yml

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

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

@@ -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,102 @@
+name: E2E App-Store Apps
+on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    paths-ignore:
+      - apps/api/**
+      - apps/console/**
+      - apps/docs/**
+      - apps/swagger/**
+      - apps/website/**
+      - apps/web/public/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+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 test-e2e:app-store
+
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed.yml

@@ -0,0 +1,104 @@
+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/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  e2e-embed:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+
+    env:
+      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+      NEXTAUTH_SECRET: secret
+      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+      GOOGLE_LOGIN_ENABLED: true
+      # CRON_API_KEY: xxx
+      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
+      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+      PAYMENT_FEE_PERCENTAGE: 0.005
+      PAYMENT_FEE_FIXED: 10
+      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      SAML_ADMINS: pro@example.com
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      NEXT_PUBLIC_IS_E2E: 1
+      # EMAIL_FROM: e2e@cal.com
+      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+      # MS_GRAPH_CLIENT_ID: xxx
+      # MS_GRAPH_CLIENT_SECRET: xxx
+      # ZOOM_CLIENT_ID: xxx
+      # ZOOM_CLIENT_SECRET: xxx
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    services:
+      postgres:
+        image: postgres:12.1
+        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

@@ -1,19 +1,20 @@
 name: E2E test
 on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
-    paths-ignore:
-      - public/static/locales/**
+    paths:
+      - apps/web/**
+      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 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
@@ -24,10 +25,19 @@ jobs:
       GOOGLE_LOGIN_ENABLED: true
       # CRON_API_KEY: xxx
       CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      DAILY_API_KEY: ${{ secrets.CI_DAILY_API_KEY }}
       NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+      NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
       STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
       STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+      STRIPE_PRO_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PRO_PLAN_PRODUCT_ID }}
+      STRIPE_PREMIUM_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_PREMIUM_PLAN_PRODUCT_ID }}
+      STRIPE_FREE_PLAN_PRODUCT_ID: ${{ secrets.CI_STRIPE_FREE_PLAN_PRODUCT_ID }}
       PAYMENT_FEE_PERCENTAGE: 0.005
       PAYMENT_FEE_FIXED: 10
       SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
@@ -43,6 +53,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 +70,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 +84,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,19 @@
+name: "Pull Request Labeler"
+on:
+  - pull_request_target
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+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,15 @@ on:
   pull_request_target:
     branches:
       - main
+    paths:
+      - "**.tsx?"
+      - "**.jsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   lint:
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout repo
@@ -18,18 +20,20 @@ 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
+      - name: Test Code Linting
+        run: yarn lint
+
+      - name: Save Code Linting Reports
         run: yarn lint:report
         continue-on-error: true
 
@@ -37,10 +41,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/release.yml

@@ -0,0 +1,11 @@
+on:
+  push:
+    # Pattern matched against refs/tags
+    tags:
+      - "*" # Push events to every tag not containing /
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - run: curl -X POST -d {} ${{ secrets.VERCEL_VERSIONED_DEPLOY_HOOK }}

.github/workflows/required-checks.yml

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

.github/workflows/submodule-sync.yml

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

.github/workflows/test.yml

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

.gitignore

@@ -2,6 +2,7 @@
 
 # .env file
 .env
+!packages/prisma/.env
 
 # dependencies
 node_modules
@@ -72,3 +73,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/settings.json

@@ -6,5 +6,5 @@
   },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
-  "spellright.documentTypes": ["markdown"]
+  "spellright.documentTypes": ["markdown", "typescript"]
 }

.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,6 +1,6 @@
 # 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.
 

LICENSE

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

README.md

@@ -18,29 +18,36 @@
     <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://status.cal.com"><img src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
+   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=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-Free-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://github.com/orgs/calcom/projects/9"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+   <a href="https://cal.com/figma"><img src="https://img.shields.io/badge/Figma-Design%20System-blueviolet"></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
 
@@ -51,7 +58,7 @@ Calendly and other scheduling tools are awesome. It made our lives massively eas
 
 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.
 
-## Product of the Month: April
+## Product of the Month: April 2021
 
 #### Support us on [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)
 
@@ -80,7 +87,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: >=15.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -90,7 +97,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
@@ -108,7 +115,10 @@ Here is what you need to be able to run Cal.
    yarn
    ```
 
-1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+1. Set up your .env file
+   - Duplicate `.env.example` to `.env`
+   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the .env file.
 
 #### Quick start with `yarn dx`
 
@@ -129,7 +139,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 `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -163,7 +173,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 +195,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
@@ -197,7 +207,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 yarn test-e2e
 
 # To open last HTML report run:
-yarn workspace @calcom/web playwright-report
+yarn playwright show-report test-results/reports/playwright-html-report
 ```
 
 ### Upgrading from earlier versions
@@ -256,12 +266,16 @@ yarn workspace @calcom/web playwright-report
 
 ### Docker
 
-The Docker configuration for Cal is an effort powered by people within the community. Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
+The Docker configuration for Cal is an effort powered by people within the community.
 
 If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32).
 
 The Docker configuration can be found [in our docker repository](https://github.com/calcom/docker).
 
+Issues with Docker? Find your answer or open a new discussion [here](https://github.com/calcom/docker/discussions) to ask the community.
+
+Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
+
 ### Heroku
 
 <a href="https://heroku.com/deploy?template=https://github.com/calcom/cal.com">
@@ -270,15 +284,23 @@ The Docker configuration can be found [in our docker repository](https://github.
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fcalendso%2Fcalendso&plugins=postgresql&envs=GOOGLE_API_CREDENTIALS%2CBASE_URL%2CNEXTAUTH_URL%2CPORT&BASE_URLDefault=http%3A%2F%2Flocalhost%3A3000&NEXTAUTH_URLDefault=http%3A%2F%2Flocalhost%3A3000&PORTDefault=3000)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/cal)
 
 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
+
+Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.
+
+[![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_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT&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&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
+
 <!-- 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 -->
 
@@ -288,7 +310,7 @@ Please see our [contributing guide](/CONTRIBUTING.md).
 
 ### Good First Issues
 
-We have a list of [good first issues](https://github.com/calcom/cal.com/labels/✅%20good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
+We have a list of [help wanted](https://github.com/orgs/calcom/projects/1/views/25) that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
 
 ## Integrations
 
@@ -302,10 +324,27 @@ We have a list of [good first issues](https://github.com/calcom/cal.com/labels/
 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 `<Cal.com URL>/api/integrations/googlecalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+9. Under Authorized redirect URI's, select Add URI and then add the URI `<Cal.com URL>/api/integrations/googlecalendar/callback` and `<Cal.com URL>/api/auth/callback/google` replacing Cal.com 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.
 
+#### _Adding google calendar to Cal.com App Store_
+
+After adding Google credentials, you can now Google Calendar App to the app store.
+You can repopulate the App store by running
+
+```
+cd packages/prisma
+yarn seed-app-store
+```
+
+You will need to complete a few more steps to activate Google Calendar App.
+Make sure to complete section "Obtaining the Google API Credentials". After the do the
+following
+
+1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
+1. Under 'OAuth concent screen', click "PUBLISH APP"
+
 ### Obtaining Microsoft Graph Client ID and Secret
 
 1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration
@@ -315,56 +354,6 @@ We have a list of [good first issues](https://github.com/calcom/cal.com/labels/
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
 
-### Obtaining Slack Client ID and Secret and Signing Secret
-
-To test this you will need to create a Slack app for yourself on [their apps website](https://api.slack.com/apps).
-
-Copy and paste the app manifest below into the setting on your slack app. Be sure to replace `YOUR_DOMAIN` with your own domain or your proxy host if you're testing locally.
-
-<details>
-  <summary>App Manifest</summary>
-  
- ```yaml
- display_information:
-  name: Cal.com Slack
-features:
-  bot_user:
-    display_name: Cal.com Slack
-    always_online: false
-  slash_commands:
-    - command: /create-event
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: Create an event within Cal!
-      should_escape: false
-    - command: /today
-      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
-      description: View all your bookings for today
-      should_escape: false
-oauth_config:
-  redirect_urls:
-    - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
-  scopes:
-    bot:
-      - chat:write
-      - commands
-      - chat:write.public 
-settings:
-  interactivity:
-    is_enabled: true
-    request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-    message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
-  org_deploy_enabled: false
-  socket_mode_enabled: false
-  token_rotation_enabled: false
-```
-
-</details>
-
-Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.
-
-Next make sure you have your app running `yarn dx`. Then in the slack chat type one of these commands: `/create-event` or `/today`
-
-> NOTE: Next you will need to setup a proxy server like [ngrok](https://ngrok.com/) to allow your local host machine to be hosted on a public https server.
 
 ### Obtaining Zoom Client ID and Secret
 
@@ -398,7 +387,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 +403,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 +447,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.

__checks__/calcom-dashboard.check.js

@@ -0,0 +1,34 @@
+/**
+ * This is a Playwright script Checkly generated for you based on your Vercel project.
+ * To learn more about Browser checks and Playwright visit: https://www.checklyhq.com/docs/browser-checks
+ */
+
+// Create a Chromium browser
+const { chromium } = require("playwright");
+
+// Checkly supports top level await, but we wrap your code in an async function so you can run it locally too.
+async function run() {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+
+  // If available, we set the target URL to a preview deployment URL provided by the ENVIRONMENT_URL created by Vercel.
+  // Otherwise, we use the Production URL.
+  const targetUrl = process.env.ENVIRONMENT_URL || "https://app.cal.com";
+
+  // We visit the page. This waits for the "load" event by default.
+  const response = await page.goto(targetUrl);
+
+  // If the page doesn't return a successful response code, we fail the check
+  if (response.status() > 399) {
+    throw new Error(`Failed with response code ${response.status()}`);
+  }
+
+  // We snap a screenshot.
+  await page.screenshot({ path: "screenshot.jpg" });
+
+  // We close the page and browser. This is needed for collecting accurate web vitals.
+  await page.close();
+  await browser.close();
+}
+
+run();

app.json

@@ -10,15 +10,74 @@
     }
   ],
   "env": {
-    "BASE_URL": {
+    "PGSSLMODE": {
+      "description": "If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then put 'no-verify' here.",
+      "value": "no-verify"
+    },
+    "NEXT_PUBLIC_WEBAPP_URL": {
       "description": "Replace HEROKU_APP_NAME with the name given to your app",
-      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+      "value": "https://HEROKU_APP_NAME.herokuapp.com",
+      "required": "true"
     },
     "CALENDSO_ENCRYPTION_KEY": {
       "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
-      "value": "secret"
+      "value": "secret",
+      "required": "true"
     },
-    "NEXTAUTH_SECRET": "secret"
+    "NEXTAUTH_URL": {
+      "description": "Replace HEROKU_APP_NAME with the name given to your app",
+      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    },
+    "NEXTAUTH_SECRET": {
+      "description": "Cookie encryption key",
+      "generator": "secret",
+      "required": "true"
+    },
+    "NEXT_PUBLIC_LICENSE_CONSENT": {
+      "description": "License consent",
+      "value": "true",
+      "required": "true"
+    },
+    "CRON_API_KEY": {
+      "description": "ApiKey for cronjobs",
+      "value": ""
+    },
+    "SEND_FEEDBACK_EMAIL": {
+      "description": "Send feedback email",
+      "value": ""
+    },
+    "SENDGRID_API_KEY": {
+      "description": "Sendgrid api key. Used for email reminders in workflows",
+      "value": ""
+    },
+    "SENDGRID_EMAIL": {
+      "description": "Sendgrid email. Used for email reminders in workflows",
+      "value": ""
+    },
+    "EMAIL_FROM": {
+      "description": "Configures the global From: header whilst sending emails",
+      "value": ""
+    },
+    "EMAIL_SERVER_HOST": {
+      "description": "Configures the global SMTP server host",
+      "value": "smtp.gmail.com"
+    },
+    "EMAIL_SERVER_PORT": {
+      "description": "Configures the global SMTP server port",
+      "value": "465"
+    },
+    "EMAIL_SERVER_USER": {
+      "description": "Configures the global SMTP server user",
+      "value": "<gmail_emailAddress>"
+    },
+    "EMAIL_SERVER_PASSWORD": {
+      "description": "Configures the global SMTP server password",
+      "value": "<gmail_app_password>"
+    },
+    "NEXT_PUBLIC_TEAM_IMPERSONATION": {
+      "description": "Set the following value to true if you wish to enable Team Impersonation",
+      "value": "false"
+    }
   },
   "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": "eslint . --ignore-path .gitignore",
+    "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.3.1",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.22.0"
   }
 }

apps/docs/pages/developer/code-styling.mdx

@@ -10,10 +10,10 @@ We use a number of style guides written by other amazing companies, simply becau
 We don't expect you to study every single rule of each style guide, but these are great reference points as to how your code should be styled. We may reject a pull request if your code style significantly differs from these style guides however.
 
 ## ESLint & Prettier
-Calendso uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+Cal.com uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
 
 ## JavaScript/TypeScript
-We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and Typescript code.
+We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and TypeScript code.
 
 ## HTML & CSS
 We use the [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.

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/install.mdx

@@ -34,7 +34,6 @@ Here is what you need to be able to run Cal.
 
    ```sh
    cp apps/web/.env.example apps/web/.env
-   cp packages/prisma/.env.example packages/prisma/.env
    ```
 
 1. Install packages with yarn
@@ -54,7 +53,7 @@ yarn dx
 
 ### Manual setup
 
-1.  Configure database in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1.  Configure database in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
         ```text
         DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'

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

@@ -6,7 +6,7 @@ title: Vercel
 
 ## Requirements
 
-You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offers a great free option.
 
 ## Getting Started
 
@@ -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,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/storybook/.storybook/i18next.js

@@ -0,0 +1,9 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  resources: [],
+  debug: true,
+});
+
+export default i18n;

apps/storybook/.storybook/main.js

@@ -0,0 +1,55 @@
+const path = require("path");
+
+module.exports = {
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-react-i18next",
+    {
+      name: "storybook-addon-next",
+      options: {
+        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
+      },
+    },
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+  staticDirs: ["../public"],
+  webpackFinal: async (config, { configType }) => {
+    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,9 @@
+<script>
+  window.global = window;
+  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.jsx

@@ -0,0 +1,28 @@
+import { addDecorator } from "@storybook/react";
+import { I18nextProvider } from "react-i18next";
+
+import "../styles/globals.css";
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+addDecorator((storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>);
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};

apps/storybook/components/CustomArgsTable.tsx

@@ -0,0 +1,23 @@
+import { ArgsTable } from "@storybook/addon-docs";
+import { SortType } from "@storybook/components";
+import { PropDescriptor } from "@storybook/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
+type Component = any;
+type BaseProps = {
+  include?: PropDescriptor;
+  exclude?: PropDescriptor;
+  sort?: SortType;
+};
+
+type OfProps = BaseProps & {
+  of: "." | "^" | Component;
+};
+
+export function CustomArgsTable({ of, sort }: OfProps) {
+  return (
+    <div className="custom-args-wrapper">
+      <ArgsTable of={of} sort={sort} />
+    </div>
+  );
+}

apps/storybook/components/Examples.tsx

@@ -0,0 +1,31 @@
+import { classNames } from "@calcom/lib";
+
+interface ExampleProps {
+  children: React.ReactNode;
+  title: string;
+}
+export const Example = ({ children, title }: ExampleProps) => {
+  return (
+    <div className="examples-item">
+      <span className="examples-item-title">{title}</span>
+      <div className="examples-item-content">{children}</div>
+    </div>
+  );
+};
+
+interface ExamplesProps {
+  children: React.ReactNode;
+  title: string;
+  footnote?: React.ReactNode;
+  dark?: boolean;
+}
+
+export const Examples = ({ children, title, footnote = null, dark }: ExamplesProps) => {
+  return (
+    <div className={classNames("examples", dark && "dark")}>
+      <h2 className="examples-title">{title}</h2>
+      <div className="examples-content">{children}</div>
+      {!!footnote && <div className="examples-footnote">{footnote}</div>}
+    </div>
+  );
+};

apps/storybook/components/Note.tsx

@@ -0,0 +1,5 @@
+export const Note = ({ children }: { children: React.ReactNode }) => (
+  <div className="story-note">
+    <div>{children}</div>
+  </div>
+);

apps/storybook/components/Title.tsx

@@ -0,0 +1,21 @@
+export const Title = ({
+  title,
+  suffix,
+  subtitle,
+  offset,
+}: {
+  title: string;
+  suffix?: string;
+  subtitle?: string;
+  offset?: boolean;
+}) => {
+  return (
+    <div className={`story-title ${offset && "offset"}`}>
+      <h1>
+        {title}
+        {suffix && <span>{suffix}</span>}
+      </h1>
+      {subtitle && <p>{subtitle}</p>}
+    </div>
+  );
+};

apps/storybook/components/VariantsTable.tsx

@@ -0,0 +1,80 @@
+import React, { ReactElement, ReactNode } from "react";
+
+import { classNames } from "@calcom/lib";
+
+export function VariantsTable({
+  children,
+  titles,
+  isDark,
+  columnMinWidth = 150,
+}: {
+  children: ReactElement<RowProps> | ReactElement<RowProps>[];
+  titles: string[];
+  isDark?: boolean;
+  // Mainly useful on mobile, so components don't get squeesed
+  columnMinWidth?: number;
+}) {
+  const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
+  return (
+    <div
+      className={classNames(
+        isDark &&
+          "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#22252A]"
+      )}>
+      <div className="z-1 relative mx-auto w-full max-w-[1200px] overflow-auto pr-8 pt-6">
+        <table>
+          <RowTitles titles={titles} />
+          {columns.map((column) => (
+            <tr className="p-2 pr-6 pb-6" key={column.props.variant}>
+              <th
+                className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]"
+                key={column.props.variant}>
+                {column.props.variant}
+              </th>
+              {React.Children.count(column.props.children) &&
+                React.Children.map(column.props.children, (cell) => (
+                  <td className="p-2 pr-6 pb-6" style={{ minWidth: `${columnMinWidth}px` }}>
+                    {cell}
+                  </td>
+                ))}
+            </tr>
+          ))}
+        </table>
+      </div>
+      {!isDark && (
+        <div data-mode="dark">
+          <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
+            {children}
+          </VariantsTable>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface RowProps {
+  variant: string;
+  children: ReactNode;
+}
+
+/**
+ * There are two reasons we have this "empty" wrapper component:
+ * 1. In order to have an isolate group per variant, which we iterate through in the table component.
+ * 2. To have a way to pass the variant.
+ */
+export function VariantRow({ children }: RowProps) {
+  return <>{children}</>;
+}
+
+export function RowTitles({ titles }: { titles: string[] }) {
+  return (
+    <tr>
+      <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" />
+      {titles.map((title) => (
+        <th className="p-2 pr-6 pb-6 text-left text-sm font-normal text-[#8F8F8F]" key={title}>
+          {title}
+        </th>
+      ))}
+    </tr>
+  );
+}

apps/storybook/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Examples";
+export * from "./Note";
+export * from "./VariantsTable";
+export * from "./Title";
+export * from "./CustomArgsTable";

apps/storybook/intro.stories.mdx

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

apps/storybook/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@calcom/storybook",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "start-storybook -p 6006",
+    "build": "build-storybook"
+  },
+  "dependencies": {
+    "@calcom/config": "*",
+    "@calcom/dayjs": "*",
+    "@calcom/ui": "*",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "next": "^12.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.19.6",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-vite": "^0.2.4",
+    "@storybook/builder-webpack5": "^6.5.13",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "autoprefixer": "^10.4.12",
+    "babel-loader": "^8.2.5",
+    "fs": "^0.0.1-security",
+    "postcss": "^8.4.18",
+    "postcss-pseudo-companion-classes": "^0.1.1",
+    "rollup-plugin-polyfill-node": "^0.10.2",
+    "storybook-addon-designs": "^6.3.1",
+    "storybook-addon-next": "^1.6.9",
+    "storybook-react-i18next": "^1.1.2",
+    "tailwindcss": "^3.2.1",
+    "typescript": "^4.7.4",
+    "vite": "^2.9.15"
+  }
+}

apps/storybook/postcss.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    /**
+     * We use this postcss plugin to create custom css classes for
+     * any pseudo classes (eg hover, focus) mentioned below.
+     * This way you can eg show a hover state in Storybook by adding
+     * this classname .sb-pseudo--hover to the item.
+     *
+     * These styles will only be added in storybook, and will NOT
+     * end up in the final css bundle of apps using the components.
+     */
+    "postcss-pseudo-companion-classes": {
+      prefix: "sb-pseudo--",
+      // We have to keep a restrictTo list here, because otherwise
+      // this library will have issues processing tailwind's \: prefixed classes
+      // and start adding dots everywhere, breaking this functionality.
+      restrictTo: [":hover", ":focus"],
+    },
+  },
+};

apps/storybook/styles/globals.css

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import "../../../packages/ui/styles/shared-globals.css"

apps/storybook/styles/storybook-styles.css

@@ -0,0 +1,189 @@
+.sbdocs {
+  font-family: 'Inter var' !important;
+  padding: 0!important;
+}
+
+#docs-root {
+  overflow: hidden;
+}
+
+.sbdocs.sbdocs-h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+  margin: 0 0 82px 0;
+}
+
+.sbdocs.sbdocs-h2 {
+  font-size: 20px;
+  font-weight: 500;
+  border: none;
+  border-top: 2px solid rgba(0, 0, 0, 0.12);
+  padding-top: 12px!important;
+  padding-bottom: 12px!important;
+  margin: 82px 0 0 0;
+}
+
+.sbdocs.sbdocs-p {
+  max-width: 560px;
+  margin: 0 0 12px 0;
+}
+
+.sbdocs.sbdocs-content {
+  width: 1200px;
+  max-width: 100%;
+}
+
+/** Docs table **/
+.custom-args-wrapper{
+  max-height: 600px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin-bottom: 1rem;
+}
+
+.docblock-argstable-body {
+  box-shadow: none!important;
+  font-size: 14px;
+}
+
+/* .docblock-argstable-head tr th, */
+.docblock-argstable-body tr td {
+  /* padding-left: 0!important; */
+  padding: 20px !important;
+}
+
+/** Column titles **/
+.docblock-argstable-body tr td > span,
+.docblock-argstable-head tr th > span {
+  color: #525252 !important;
+  font-weight: 500 !important;
+}
+
+.docblock-argstable-body div p,
+.docblock-argstable-body div span {
+  color: #8F8F8F !important;
+}
+
+/** Custom components **/
+.story-title {
+  margin: 0 0 82px 0;
+}
+
+.story-title.offset {
+  margin-top: 100px;
+}
+
+.story-title h1 {
+  font-family: "Cal Sans", "sans-serif" !important;
+  font-weight: 600;
+  font-size: 36px;
+}
+
+.story-title h1 span {
+  color: #9CA3AF;
+  font-family: 'Inter var';
+  font-weight: normal;
+  display: inline-block;
+  margin-left: 8px;
+}
+
+.story-title p {
+  color: #111827;
+  font-size: 16px;
+}
+
+.examples {
+  background-color: #F9FAFB;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+}
+
+.examples-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 30px 0;
+}
+
+.examples-title {
+  color: #8F8F8F;
+  font-size: 14px;
+  margin-bottom: 30px;
+}
+
+.examples-item-title {
+  font-size: 12px;
+  color: #8F8F8F;
+  margin-bottom: 12px;
+  display: block;
+}
+
+.examples-item {
+  margin: 0 20px;
+}
+
+.examples-footnote p,
+.examples-footnote ul,
+.examples-footnote li {
+  color: #8F8F8F;
+  font-size: 14px;
+}
+
+.examples-footnote ul {
+  padding-left: 8px;
+}
+
+.examples-footnote li {
+  margin: 0!important;
+}
+
+.story-note {
+  background-color: #F9FAFB;
+  font-size: 14px;
+  padding: 20px;
+  margin-bottom: 12px;
+  border-radius: 8px;
+}
+
+.story-note > div {
+  max-width: 600px;
+}
+
+/** SB Docs Preview **/
+.sbdocs-preview {
+  width: 100vw;
+  left: calc((100vw - 1200px) / -2);
+  box-shadow: none !important;
+  margin: 0 !important;
+  border: none !important;
+  border-radius: none!important;
+}
+
+.docs-story > div:first-child {
+  padding: 0!important;
+  margin: 0!important;
+}
+
+.docs-story .innerZoomElementWrapper > div {
+  border: none !important;
+}
+
+.sb-main-padded {
+  padding: 0!important;
+}
+
+@media screen and (max-width: 1200px) {
+  .sbdocs-preview {
+    left: -24px;
+    width: calc(100vw + 48px);
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  .sbdocs.sbdocs-content {
+    padding: 24px !important;
+  }
+}

apps/storybook/tailwind.config.js

@@ -0,0 +1,7 @@
+const base = require("@calcom/config/tailwind-preset");
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...base,
+  darkMode: ["class", '[data-mode="dark"]'],
+  content: [...base.content, "../../packages/ui/**/*.{js,ts,jsx,tsx,mdx}", "./stories/**/*.{js,ts,tsx,jsx}"],
+};

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/storybook/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  }
+}

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": "eslint . --ignore-path .gitignore",
+    "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",
+    "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "12.1.5",
+    "next": "^12.3.1",
     "openapi-snippet": "^0.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "swagger-ui-react": "4.10.3"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.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.17",
+    "@types/react-dom": "^18.0.6",
+    "typescript": "^4.7.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/.gitignore

@@ -21,6 +21,7 @@ playwright/reports/*
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build
@@ -64,3 +65,8 @@ tsconfig.tsbuildinfo
 
 # Autogenerated embed content
 public/embed
+
+# Copied app-store images
+public/app-store
+# Sentry
+.sentryclirc

apps/web/calendso.yaml

@@ -277,179 +277,6 @@ paths:
                   type: string
                 integration:
                   type: string
-  /api/availability/day:
-    patch:
-      description: Updates the start and end times for a user's availability.
-      summary: Updates the user's start and end times
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                startMins:
-                  type: string
-                endMins:
-                  type: string
-                bufferMins:
-                  type: string
-        description: ""
-  /api/availability/eventtype:
-    post:
-      description: Adds a new event type for the user.
-      summary: Adds a new event type
-      tags:
-        - Availability
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                title:
-                  type: string
-                slug:
-                  type: string
-                description:
-                  type: string
-                length:
-                  type: string
-                hidden:
-                  type: boolean
-                requiresConfirmation:
-                  type: boolean
-                locations:
-                  type: array
-                  items: {}
-                eventName:
-                  type: string
-                customInputs:
-                  type: array
-                  items: {}
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  eventType:
-                    type: object
-                    properties:
-                      title:
-                        type: string
-                      slug:
-                        type: string
-                      description:
-                        type: string
-                      length:
-                        type: string
-                      hidden:
-                        type: boolean
-                      requiresConfirmation:
-                        type: boolean
-                      locations:
-                        type: array
-                        items: {}
-                      eventName:
-                        type: string
-                      customInputs:
-                        type: array
-                        items: {}
-        "500":
-          description: Internal Server Error
-    patch:
-      description: Updates an event type for the user.
-      summary: Updates an event type
-      tags:
-        - Availability
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                title:
-                  type: string
-                slug:
-                  type: string
-                description:
-                  type: string
-                length:
-                  type: string
-                hidden:
-                  type: boolean
-                requiresConfirmation:
-                  type: boolean
-                locations:
-                  type: array
-                  items: {}
-                eventName:
-                  type: string
-                customInputs:
-                  type: array
-                  items: {}
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  eventType:
-                    type: object
-                    properties:
-                      title:
-                        type: string
-                      slug:
-                        type: string
-                      description:
-                        type: string
-                      length:
-                        type: string
-                      hidden:
-                        type: boolean
-                      requiresConfirmation:
-                        type: boolean
-                      locations:
-                        type: array
-                        items: {}
-                      eventName:
-                        type: string
-                      customInputs:
-                        type: array
-                        items: {}
-        "500":
-          description: Internal Server Error
-    delete:
-      description: Deletes an event type for the user.
-      summary: Deletes an event type
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties: {}
-        "500":
-          description: Internal Server Error
   "/api/book/event":
     post:
       description: Creates a booking in the user's calendar.
@@ -599,7 +426,7 @@ paths:
                         - installed: true
                           type: caldav_calendar
                           credential: null
-                          title: CalDav Server
+                          title: CalDav (Beta)
                           imageSrc: integrations/caldav.svg
                           description: For personal and business calendars
                     __N_SSP: true

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
-import { XIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                <Icon.FiX className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

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.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.logo,
+          type: item.type,
+        }));
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={t("connect_additional_calendar")}
+            options={options}
+            styles={{
+              placeholder: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  color: "#3E3E3E",
+                  marginLeft: "3px",
+                };
+              },
+              control: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  borderRadius: "2px",
+                  "@media only screen and (min-width: 640px)": {
+                    ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                    maxWidth: "320px",
+                  },
+                };
+              },
+            }}
+            isSearchable={false}
+            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;

apps/web/components/App.tsx

@@ -1,24 +1,22 @@
-import {
-  BookOpenIcon,
-  DocumentTextIcon,
-  ExternalLinkIcon,
-  FlagIcon,
-  MailIcon,
-  ShieldCheckIcon,
-} from "@heroicons/react/outline";
-import { ChevronLeftIcon } from "@heroicons/react/solid";
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
 
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+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 { Icon } from "@calcom/ui/Icon";
+import Shell from "@calcom/ui/Shell";
+import { Badge } from "@calcom/ui/components/badge";
+import showToast from "@calcom/ui/v2/core/notifications";
 
-import Shell from "@components/Shell";
-import Badge from "@components/ui/Badge";
+import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
 
-export default function App({
+const Component = ({
   name,
   type,
   logo,
@@ -34,7 +32,250 @@ export default function App({
   email,
   tos,
   privacy,
-}: {
+  isProOnly,
+}: Parameters<typeof App>[0]) => {
+  const { t } = useLocale();
+  const router = useRouter();
+  const { data: user } = trpc.viewer.me.useQuery();
+
+  const utils = trpc.useContext();
+  const handleOpenChange = () => {
+    utils.viewer.integrations.invalidate();
+    router.replace("/apps/installed");
+  };
+
+  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 [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.viewer.appCredentialsByType.useQuery(
+    { appType: type },
+    {
+      onSuccess(data) {
+        setExistingCredentials(data);
+      },
+    }
+  );
+
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+
+  return (
+    <div className="-mx-4 md:-mx-8">
+      <div className="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">
+            <Icon.FiChevronLeft 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>
+              </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">
+            {!appCredentials.isLoading ? (
+              isGlobal ||
+              (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+                <div className="flex space-x-3">
+                  <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+                    {existingCredentials.length > 0
+                      ? t("active_install", { count: existingCredentials.length })
+                      : 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={Icon.FiPlus} {...props} data-testid="install-app-button">
+                            {t("add_another")}
+                          </Button>
+                        );
+                      }}
+                    />
+                  )}
+                </div>
+              ) : existingCredentials.length > 0 ? (
+                <DisconnectIntegration
+                  id={existingCredentials[0]}
+                  render={(btnProps) => (
+                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
+                      {t("disconnect")}
+                    </Button>
+                  )}
+                  onOpenChange={handleOpenChange}
+                />
+              ) : (
+                <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>
+      </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}>
+                  <Icon.FiBookOpen 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}>
+                  <Icon.FiExternalLink 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}>
+                  <Icon.FiMail 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}>
+                  <Icon.FiFile 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}>
+                  <Icon.FiShield 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">
+            <Icon.FiFlag 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 +292,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,29 +1,25 @@
 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 (
     <>
-      <div className="mb-12 block lg:hidden">
-        {status === "authenticated" && <NavTabs tabs={tabs} linkProps={{ shallow: true }} />}
-      </div>
+      <div className="mb-12 block lg:hidden">{status === "authenticated" && <NavTabs tabs={tabs} />}</div>
       <main className="pb-6">{children}</main>
     </>
   );

apps/web/components/BookingsShell.tsx

@@ -1,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,10 @@
+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 { DestinationCalendar } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
@@ -12,6 +12,7 @@ interface Props {
   hidePlaceholder?: boolean;
   /** The external Id of the connected calendar */
   value: string | undefined;
+  destinationCalendar?: DestinationCalendar | null;
 }
 
 const DestinationCalendarSelector = ({
@@ -19,11 +20,28 @@ const DestinationCalendarSelector = ({
   isLoading,
   value,
   hidePlaceholder,
+  destinationCalendar,
 }: Props): JSX.Element | null => {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const query = trpc.viewer.connectedCalendars.useQuery();
   const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
 
+  // Extra styles to show prefixed text in react-select
+  const content = (hidePlaceholder = false) => {
+    if (!hidePlaceholder) {
+      return {
+        alignItems: "center",
+        display: "flex",
+        ":before": {
+          content: `'${t("select_destination_calendar")}:'`,
+          display: "block",
+          marginRight: 8,
+        },
+      };
+    }
+    return {};
+  };
+
   useEffect(() => {
     const selected = query.data?.connectedCalendars
       .map((connected) => connected.calendars ?? [])
@@ -45,30 +63,63 @@ 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}`,
+        })),
     })) ?? [];
+  const defaultCalendarSelectedString = destinationCalendar?.externalId
+    ? `(${
+        destinationCalendar.externalId.length > 15
+          ? destinationCalendar.externalId.substring(0, 15) + "..."
+          : destinationCalendar.externalId
+      })`
+    : "";
   return (
     <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
-      {/* 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"}
-        placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
+        name="primarySelectedCalendar"
+        placeholder={
+          !hidePlaceholder ? (
+            `${t("select_destination_calendar")}`
+          ) : (
+            <span className="whitespace-nowrap">
+              {t("default_calendar_selected")} {defaultCalendarSelectedString}
+            </span>
+          )
+        }
         options={options}
+        styles={{
+          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          option: (defaultStyles, state) => ({
+            ...defaultStyles,
+            backgroundColor: state.isSelected
+              ? state.isFocused
+                ? "var(--brand-color)"
+                : "var(--brand-color)"
+              : state.isFocused
+              ? "var(--brand-color-dark-mode)"
+              : "var(--brand-text-color)",
+          }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "6px",
+              "@media only screen and (min-width: 640px)": {
+                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                width: "100%",
+              },
+            };
+          },
+        }}
         isSearchable={false}
-        className="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 text-sm",
+          !hidePlaceholder && "font-medium"
+        )}
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {
@@ -85,6 +136,9 @@ const DestinationCalendarSelector = ({
         }}
         isLoading={isLoading}
         value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
       />
     </div>
   );

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/Gates.tsx

@@ -0,0 +1,50 @@
+import dynamic from "next/dynamic";
+import { Dispatch, useState, useEffect } from "react";
+import { JSONObject } from "superjson/dist/types";
+
+export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`
+
+export type GateState = {
+  rainbowToken?: string;
+};
+
+type GateProps = {
+  children: React.ReactNode;
+  gates: Gate[];
+  appData: JSONObject;
+  dispatch: Dispatch<Partial<GateState>>;
+};
+
+const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));
+
+// To add a new Gate just add the gate logic to the switch statement
+const Gates: React.FC<GateProps> = ({ children, gates, appData, dispatch }) => {
+  const [rainbowToken, setRainbowToken] = useState<string>();
+
+  useEffect(() => {
+    dispatch({ rainbowToken });
+  }, [rainbowToken, dispatch]);
+
+  let gateWrappers = <>{children}</>;
+
+  // Recursively wraps the `gateWrappers` with new gates allowing for multiple gates
+  for (const gate of gates) {
+    switch (gate) {
+      case "rainbow":
+        if (appData.blockchainId && appData.smartContractAddress && !rainbowToken) {
+          gateWrappers = (
+            <RainbowGate
+              setToken={setRainbowToken}
+              chainId={appData.blockchainId as number}
+              tokenAddress={appData.smartContractAddress as string}>
+              {gateWrappers}
+            </RainbowGate>
+          );
+        }
+    }
+  }
+
+  return gateWrappers;
+};
+
+export default Gates;

apps/web/components/I18nLanguageHandler.tsx

@@ -1,11 +1,18 @@
 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.viewer.public.i18n.useQuery(undefined, {
     staleTime: Infinity,
+    /**
+     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+     * We intend to not cache i18n query
+     **/
+    trpc: {
+      context: { skipBatch: true },
+    },
   });
 }
 

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";
@@ -63,6 +63,7 @@ function CropContainer({
   );
 }
 
+/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
 export default function ImageUploader({
   target,
   id,
@@ -71,15 +72,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 +91,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 +143,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/Loader.tsx

@@ -1 +1,4 @@
+/**
+ * @deprecated Use custom Skeletons instead
+ **/
 export { default } from "@calcom/ui/Loader";

apps/web/components/Logo.tsx

@@ -1,20 +0,0 @@
-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" />
-        ) : (
-          // 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"
-          />
-        )}
-      </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,31 +56,33 @@ 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 && (
                     <tab.icon
                       className={classNames(
                         isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                        "-ml-0.5 hidden h-5 w-5 ltr:mr-2 rtl:ml-2 sm:inline-block"
+                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"
                     />
                   )}
-                  <span>{tab.name}</span>
+                  <span>{t(tab.name)}</span>
                 </a>
               </Link>
             </Component>

apps/web/components/SettingsShell.tsx

@@ -1,48 +1,59 @@
-import { CreditCardIcon, KeyIcon, LockClosedIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
-import React from "react";
+import React, { ComponentProps } from "react";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
+import ErrorBoundary from "@calcom/ui/ErrorBoundary";
+import { Icon } from "@calcom/ui/Icon";
+import Shell from "@calcom/ui/Shell";
 
-import NavTabs, { NavTabProps } from "./NavTabs";
+import NavTabs from "./NavTabs";
 
-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: Icon.FiUser,
+  },
+  {
+    name: "teams",
+    href: "/settings/teams",
+    icon: Icon.FiUsers,
+  },
+  {
+    name: "security",
+    href: "/settings/security",
+    icon: Icon.FiKey,
+  },
+  {
+    name: "developer",
+    href: "/settings/developer",
+    icon: Icon.FiTerminal,
+  },
+  {
+    name: "billing",
+    href: "/settings/billing",
+    icon: Icon.FiCreditCard,
+  },
+  {
+    name: "admin",
+    href: "/settings/admin",
+    icon: Icon.FiLock,
+    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

@@ -1,599 +0,0 @@
-import { SelectorIcon } from "@heroicons/react/outline";
-import {
-  ArrowLeftIcon,
-  CalendarIcon,
-  ClockIcon,
-  CogIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  LogoutIcon,
-  MapIcon,
-  MoonIcon,
-  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 { Toaster } from "react-hot-toast";
-
-import { useIsEmbed } from "@calcom/embed-core";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Button from "@calcom/ui/Button";
-import Dropdown, {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import LicenseBanner from "@ee/components/LicenseBanner";
-import TrialBanner from "@ee/components/TrialBanner";
-import HelpMenuItem from "@ee/components/support/HelpMenuItem";
-
-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 Loader from "@components/Loader";
-import { HeadSeo } from "@components/seo/head-seo";
-import ImpersonatingBanner from "@components/ui/ImpersonatingBanner";
-
-import pkg from "../package.json";
-import { useViewerI18n } from "./I18nLanguageHandler";
-import Logo from "./Logo";
-
-function useRedirectToLoginIfUnauthenticated(isPublic = false) {
-  const { data: session, status } = useSession();
-  const loading = status === "loading";
-  const router = useRouter();
-
-  useEffect(() => {
-    if (isPublic) {
-      return;
-    }
-
-    if (!loading && !session) {
-      router.replace({
-        pathname: "/auth/login",
-        query: {
-          callbackUrl: `${WEBAPP_URL}${location.pathname}${location.search}`,
-        },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, session, isPublic]);
-
-  return {
-    loading: loading && !session,
-    session,
-  };
-}
-
-function useRedirectToOnboardingIfNeeded() {
-  const router = useRouter();
-  const query = useMeQuery();
-  const user = query.data;
-
-  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
-
-  useEffect(() => {
-    if (isRedirectingToOnboarding) {
-      router.replace({
-        pathname: "/getting-started",
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRedirectingToOnboarding]);
-  return {
-    isRedirectingToOnboarding,
-  };
-}
-
-export function ShellSubHeading(props: {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
-      <div>
-        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
-          {props.title}
-        </h2>
-        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
-      </div>
-      {props.actions && <div className="flex-shrink-0">{props.actions}</div>}
-    </div>
-  );
-}
-
-const Layout = ({
-  status,
-  plan,
-  ...props
-}: LayoutProps & { status: SessionContextValue["status"]; plan?: UserPlan; isLoading: boolean }) => {
-  const isEmbed = useIsEmbed();
-  const router = useRouter();
-
-  const { t } = useLocale();
-  const navigation = [
-    {
-      name: t("event_types_page_title"),
-      href: "/event-types",
-      icon: LinkIcon,
-      current: router.asPath.startsWith("/event-types"),
-    },
-    {
-      name: t("bookings"),
-      href: "/bookings/upcoming",
-      icon: CalendarIcon,
-      current: router.asPath.startsWith("/bookings"),
-    },
-    {
-      name: t("availability"),
-      href: "/availability",
-      icon: ClockIcon,
-      current: router.asPath.startsWith("/availability"),
-    },
-    {
-      name: t("apps"),
-      href: "/apps",
-      icon: ViewGridIcon,
-      current: router.asPath.startsWith("/apps"),
-      child: [
-        {
-          name: t("app_store"),
-          href: "/apps",
-          current: router.asPath === "/apps",
-        },
-        {
-          name: t("installed_apps"),
-          href: "/apps/installed",
-          current: router.asPath === "/apps/installed",
-        },
-      ],
-    },
-    {
-      name: t("settings"),
-      href: "/settings/profile",
-      icon: CogIcon,
-      current: router.asPath.startsWith("/settings"),
-    },
-  ];
-  const pageTitle = typeof props.heading === "string" ? props.heading : props.title;
-
-  return (
-    <>
-      <HeadSeo
-        title={pageTitle ?? "Cal.com"}
-        description={props.subtitle ? props.subtitle?.toString() : ""}
-        nextSeoProps={{
-          nofollow: true,
-          noindex: true,
-        }}
-      />
-      <div>
-        <Toaster position="bottom-right" />
-      </div>
-
-      <div
-        className={classNames("flex h-screen overflow-hidden", props.large ? "bg-white" : "bg-gray-100")}
-        data-testid="dashboard-shell">
-        {status === "authenticated" && (
-          <div style={isEmbed ? { display: "none" } : {}} className="hidden md:flex lg:flex-shrink-0">
-            <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>
-                  {/* logo icon for tablet */}
-                  <Link href="/event-types">
-                    <a className="text-center md:inline lg:hidden">
-                      <Logo small icon />
-                    </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
-                              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>
-                          </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>
-                    ))}
-                  </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"
-                  data-testid="user-dropdown-trigger">
-                  <span className="hidden lg:inline">
-                    <UserDropdown />
-                  </span>
-                  <span className="hidden md:inline lg:hidden">
-                    <UserDropdown small />
-                  </span>
-                </div>
-                <small style={{ fontSize: "0.5rem" }} className="mx-3 mt-1 mb-2 hidden opacity-50 lg:block">
-                  &copy; {new Date().getFullYear()} Cal.com, Inc. v.{pkg.version + "-"}
-                  {process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com" ? "h" : "sh"}
-                  <span className="lowercase" data-testid={`plan-${plan?.toLowerCase()}`}>
-                    -{plan}
-                  </span>
-                </small>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="flex w-0 flex-1 flex-col overflow-hidden">
-          <main
-            className={classNames(
-              "relative z-0 flex-1 overflow-y-auto focus:outline-none",
-              status === "authenticated" && "max-w-[1700px]",
-              props.flexChildrenContainer && "flex flex-col"
-            )}>
-            {/* show top navigation for md and smaller (tablet and phones) */}
-            {status === "authenticated" && (
-              <nav
-                style={isEmbed ? { display: "none" } : {}}
-                className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
-                <Link href="/event-types">
-                  <a>
-                    <Logo />
-                  </a>
-                </Link>
-                <div className="flex items-center gap-3 self-center">
-                  <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>
-                    <Link href="/settings/profile">
-                      <a>
-                        <CogIcon className="h-6 w-6" aria-hidden="true" />
-                      </a>
-                    </Link>
-                  </button>
-                  <UserDropdown small />
-                </div>
-              </nav>
-            )}
-            <div
-              className={classNames(
-                props.centered && "mx-auto md:max-w-5xl",
-                props.flexChildrenContainer && "flex flex-1 flex-col",
-                !props.large && "py-8"
-              )}>
-              <ImpersonatingBanner />
-              {!!props.backPath && (
-                <div className="mx-3 mb-8 sm:mx-8">
-                  <Button
-                    onClick={() => router.push(props.backPath as string)}
-                    StartIcon={ArrowLeftIcon}
-                    color="secondary">
-                    Back
-                  </Button>
-                </div>
-              )}
-              {props.heading && (
-                <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"
-                  )}>
-                  {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>
-                      </>
-                    ) : (
-                      <>
-                        <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>
-                      </>
-                    )}
-                  </div>
-                  {props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
-                </div>
-              )}
-              <div
-                className={classNames(
-                  "px-4 sm:px-6 md:px-8",
-                  props.flexChildrenContainer && "flex flex-1 flex-col"
-                )}>
-                {!props.isLoading ? props.children : props.customLoader}
-              </div>
-              {/* show bottom navigation for md and smaller (tablet and phones) */}
-              {status === "authenticated" && (
-                <nav
-                  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" ? (
-                      []
-                    ) : (
-                      <Link key={item.name} href={item.href}>
-                        <a
-                          className={classNames(
-                            item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
-                            itemIdx === 0 ? "rounded-l-lg" : "",
-                            itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                            "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs font-medium hover:bg-gray-50 focus:z-10 sm:text-sm"
-                          )}
-                          aria-current={item.current ? "page" : undefined}>
-                          <item.icon
-                            className={classNames(
-                              item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                              "mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center"
-                            )}
-                            aria-hidden="true"
-                          />
-                          <span className="truncate">{item.name}</span>
-                        </a>
-                      </Link>
-                    )
-                  )}
-                </nav>
-              )}
-              {/* add padding to content for mobile navigation*/}
-              <div className="block pt-12 md:hidden" />
-            </div>
-            <LicenseBanner />
-          </main>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const MemoizedLayout = React.memo(Layout);
-
-type LayoutProps = {
-  centered?: boolean;
-  title?: string;
-  heading?: ReactNode;
-  subtitle?: ReactNode;
-  children: ReactNode;
-  CTA?: ReactNode;
-  large?: boolean;
-  HeadingLeftIcon?: ReactNode;
-  backPath?: string; // renders back button to specified path
-  // use when content needs to expand with flex
-  flexChildrenContainer?: boolean;
-  isPublic?: boolean;
-  customLoader?: ReactNode;
-};
-
-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;
-
-  const i18n = useViewerI18n();
-  const { status } = useSession();
-
-  const isLoading =
-    i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading;
-
-  if (isLoading) {
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
-        <Loader />
-      </div>
-    );
-  }
-
-  if (!session && !props.isPublic) return null;
-
-  return (
-    <>
-      <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
-      <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
-    </>
-  );
-}
-
-function UserDropdown({ small }: { small?: boolean }) {
-  const { t } = useLocale();
-  const query = useMeQuery();
-  const user = query.data;
-  const mutation = trpc.useMutation("viewer.away", {
-    onSettled() {
-      utils.invalidateQueries("viewer.me");
-    },
-  });
-  const utils = trpc.useContext();
-  return (
-    <Dropdown>
-      <DropdownMenuTrigger asChild>
-        <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
-          <span
-            className={classNames(
-              small ? "h-8 w-8" : "h-10 w-10",
-              "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
-            )}>
-            {
-              // 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"}
-              />
-            }
-            {!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-yellow-500"></div>
-            )}
-          </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"}
-                </span>
-                <span className="block truncate font-normal text-neutral-500">
-                  {user?.username ? `cal.com/${user.username}` : "No public page"}
-                </span>
-              </span>
-              <SelectorIcon
-                className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                aria-hidden="true"
-              />
-            </span>
-          )}
-        </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>
-        )}
-        <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/AdditionalCalendarSelector.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+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 { Icon } from "@calcom/ui/Icon";
+import { Select } from "@calcom/ui/v2";
+
+import { QueryCell } from "@lib/QueryCell";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { t } = useLocale();
+  const { data } = optionProps;
+  return data.slug !== "add-new" ? (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="flex w-full align-top" color="minimal">
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p className="text-left">{`${t("add")} ${data.label}`}</p>
+          </Button>
+        );
+      }}
+    />
+  ) : (
+    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
+      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <p>{t("install_new_calendar_app")}</p>
+    </Button>
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.logo,
+          type: item.type,
+        }));
+        options.push({
+          label: "Add new calendars",
+          slug: "add-new",
+          image: "",
+          type: "new_other",
+        });
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={
+              <div className="flex justify-start text-black">
+                <Icon.FiPlus className="-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1" />
+                <p>{t("add")}</p>
+              </div>
+            }
+            className="min-w-44"
+            options={options}
+            isSearchable={false}
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+            styles={{
+              menu: (defaultStyles) => ({
+                ...defaultStyles,
+                "@media only screen and (max-width: 640px)": {
+                  left: "0",
+                },
+                width: "max-content",
+                right: "0",
+              }),
+              control: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+                border: "0",
+                borderRadius: "inherit",
+              }),
+              dropdownIndicator: (defaultStyles) => ({
+                ...defaultStyles,
+                display: "none",
+              }),
+              valueContainer: (defaultStyles) => ({
+                ...defaultStyles,
+                padding: "0",
+              }),
+              placeholder: (defaultStyles) => ({
+                ...defaultStyles,
+                margin: "0",
+              }),
+            }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;

apps/web/components/apps/AllApps.tsx

@@ -1,27 +0,0 @@
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
-
-import AppCard from "./AppCard";
-
-export default function AllApps({ apps }: { apps: App[] }) {
-  const { t } = useLocale();
-
-  return (
-    <div className="mb-16">
-      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
-      <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
-        {apps.map((app) => (
-          <AppCard
-            key={app.name}
-            name={app.name}
-            slug={app.slug}
-            description={app.description}
-            logo={app.logo}
-            rating={app.rating}
-            reviews={app.reviews}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}