v1.7.1

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.env.appStore.example

@@ -0,0 +1,89 @@
+# ********** INDEX **********
+#
+# - APP STORE
+#   - DAILY.CO VIDEO
+#   - GOOGLE CALENDAR/MEET/LOGIN
+#   - HUBSPOT
+#   - OFFICE 365
+#   - SLACK
+#   - STRIPE
+#   - TANDEM
+#   - ZOOM
+#   - GIPHY
+#   - VITAL
+
+# - APP STORE **********************************************************************************************
+# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+#   - DAILY.CO VIDEO
+DAILY_API_KEY=
+DAILY_SCALE_PLAN=''
+
+#   - GOOGLE CALENDAR/MEET/LOGIN
+# Needed to enable Google Calendar integration and Login with Google
+# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+GOOGLE_API_CREDENTIALS='{}'
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - HUBSPOT
+# Used for the HubSpot integration
+# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
+HUBSPOT_CLIENT_ID=""
+HUBSPOT_CLIENT_SECRET=""
+
+#   - OFFICE 365
+# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
+# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
+MS_GRAPH_CLIENT_ID=
+MS_GRAPH_CLIENT_SECRET=
+
+#   - SLACK
+# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
+SLACK_SIGNING_SECRET=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+#   - STRIPE
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
+STRIPE_PRIVATE_KEY=            # sk_test_...
+STRIPE_WEBHOOK_SECRET=         # whsec_...
+STRIPE_CLIENT_ID=              # ca_...
+PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
+PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
+
+#   - TANDEM
+# Used for the Tandem integration -- contact support@tandem.chat for API access.
+TANDEM_CLIENT_ID=""
+TANDEM_CLIENT_SECRET=""
+TANDEM_BASE_URL="https://tandem.chat"
+
+#   - ZOOM
+# Used for the Zoom integration
+# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=
+
+#   - GIPHY
+# Used for the Giphy integration
+# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
+GIPHY_API_KEY=
+
+#   - VITAL
+# Used for the vital integration
+# @see https://github.com/calcom/cal.com/#obtaining-vital-api-keys
+VITAL_API_KEY=
+VITAL_WEBHOOK_SECRET=
+# "sandbox" | "prod" | "production" | "development"
+VITAL_DEVELOPMENT_MODE="sandbox"
+# "us" | "eu"
+VITAL_REGION="us"
+
+#   - ZAPIER
+# Used for the Zapier integration
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
+ZAPIER_INVITE_LINK=""
+# *********************************************************************************************************

.env.example

@@ -5,16 +5,6 @@
 # - SHARED
 #   - NEXTAUTH
 # - E-MAIL SETTINGS
-# - APP STORE
-#   - DAILY.CO VIDEO
-#   - GOOGLE CALENDAR/MEET/LOGIN
-#   - HUBSPOT
-#   - OFFICE 365
-#   - SLACK
-#   - STRIPE
-#   - TANDEM
-#   - ZOOM
-#   - GIPHY
 
 # - LICENSE *************************************************************************************************
 # Set this value to 'agree' to accept our license:
@@ -25,6 +15,9 @@
 # - You can not repackage or sell the codebase
 # - Acquire a commercial license to remove these terms by visiting: cal.com/sales
 NEXT_PUBLIC_LICENSE_CONSENT=''
+# To enable enterprise-only features, fill your license key in here.
+# @see https://console.cal.com
+CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************
 
 # - DATABASE ************************************************************************************************
@@ -35,6 +28,8 @@ NEXT_PUBLIC_LICENSE_CONSENT=''
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 # Change to 'http://localhost:3001' if running the website simultaneously
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
+NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
 # @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
@@ -59,8 +54,8 @@ NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
 NEXTAUTH_COOKIE_DOMAIN=.example.com
 
-# Remove this var if you don't want Cal to collect anonymous usage
-NEXT_PUBLIC_TELEMETRY_KEY=js.2pvs2bbpqq1zxna97wcml.oi2jzirnbj1ev4tc57c5r
+# Set this to '1' if you don't want Cal to collect anonymous usage
+CALCOM_TELEMETRY_DISABLED=
 
 # ApiKey for cronjobs
 CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
@@ -79,6 +74,9 @@ NEXT_PUBLIC_ZENDESK_KEY=
 # Help Scout Config
 NEXT_PUBLIC_HELPSCOUT_KEY=
 
+# Inbox to send user feedback
+SEND_FEEDBACK_EMAIL=
+
 # 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=
@@ -88,6 +86,7 @@ NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT=
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_WEBHOOK_SECRET=
 
 # Use for internal Public API Keys and optional
 API_KEY_PREFIX=cal_
@@ -115,64 +114,3 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 # **********************************************************************************************************
-
-# - APP STORE **********************************************************************************************
-# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
-#   - DAILY.CO VIDEO
-DAILY_API_KEY=
-DAILY_SCALE_PLAN=''
-
-#   - GOOGLE CALENDAR/MEET/LOGIN
-# Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
-GOOGLE_API_CREDENTIALS='{}'
-# To enable Login with Google you need to:
-# 1. Set `GOOGLE_API_CREDENTIALS` above
-# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
-# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
-# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
-GOOGLE_LOGIN_ENABLED=false
-
-#   - HUBSPOT
-# Used for the HubSpot integration
-# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
-HUBSPOT_CLIENT_ID=""
-HUBSPOT_CLIENT_SECRET=""
-
-#   - OFFICE 365
-# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
-# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
-MS_GRAPH_CLIENT_ID=
-MS_GRAPH_CLIENT_SECRET=
-
-#   - SLACK
-# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
-SLACK_SIGNING_SECRET=
-SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET=
-
-#   - STRIPE
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
-STRIPE_PRIVATE_KEY=            # sk_test_...
-STRIPE_WEBHOOK_SECRET=         # whsec_...
-STRIPE_CLIENT_ID=              # ca_...
-PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
-PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
-
-#   - TANDEM
-# Used for the Tandem integration -- contact support@tandem.chat for API access.
-TANDEM_CLIENT_ID=""
-TANDEM_CLIENT_SECRET=""
-TANDEM_BASE_URL="https://tandem.chat"
-
-#   - ZOOM
-# Used for the Zoom integration
-# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
-ZOOM_CLIENT_ID=
-ZOOM_CLIENT_SECRET=
-
-#   - GIPHY
-# Used for the Giphy integration
-# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
-GIPHY_API_KEY=
-# *********************************************************************************************************

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/check-types.yml

@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:
@@ -8,7 +8,7 @@ jobs:
     name: Check types
     strategy:
       matrix:
-        node: ["14.x"]
+        node: ["16.x"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -16,11 +16,13 @@ jobs:
       - 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
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - run: yarn
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
       - run: yarn type-check

.github/workflows/crowdin.yml

@@ -15,7 +15,7 @@ jobs:
       uses: actions/checkout@v2
 
     - name: crowdin action
-      uses: crowdin/github-action@1.4.2
+      uses: crowdin/github-action@1.4.9
       with:
         upload_translations: true
         download_translations: true

.github/workflows/e2e-embed.yml

@@ -0,0 +1,108 @@
+name: E2E test
+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-ignore:
+      - apps/api/**
+      - apps/console/**
+      - apps/docs/**
+      - apps/swagger/**
+      - apps/website/**
+      - apps/web/public/**
+      - tests/**
+      - playwright/**
+jobs:
+  test:
+    timeout-minutes: 20
+    name: Embed and booking flow(for non-embed as well)
+    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
+      - run: yarn embed-tests-prepare
+      - run: yarn workspace @calcom/embed-core embed-tests-update-snapshots:ci
+      - run: yarn workspace @calcom/embed-react embed-tests-update-snapshots:ci
+
+      - 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

@@ -4,14 +4,14 @@ on:
     branches:
       - main
     paths-ignore:
-      - public/static/locales/**
+      - apps/web/public/static/locales/**
 jobs:
   test:
-    timeout-minutes: 15
+    timeout-minutes: 20
     name: Testing ${{ matrix.node }} and ${{ matrix.os }}
     strategy:
       matrix:
-        node: ["14.x"]
+        node: ["16.x"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -43,6 +43,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 +60,13 @@ jobs:
         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@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          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 +74,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/lint.yml

@@ -7,7 +7,7 @@ jobs:
   lint:
     strategy:
       matrix:
-        node: ["14.x"]
+        node: ["16.x"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -18,16 +18,15 @@ jobs:
           ref: ${{ github.event.pull_request.head.sha }}
           fetch-depth: 2
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-          # cache: "yarn"
-          # cache-dependency-path: yarn.lock
+          cache: "yarn"
 
       - name: Install deps
         if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn
+        run: yarn --frozen-lockfile
 
       - name: Lint
         run: yarn lint:report

.gitignore

@@ -39,6 +39,7 @@ yarn-error.log*
 .env.production.local
 .env.*
 !.env.example
+!.env.appStore.example
 
 # vercel
 .vercel

.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

.nvmrc

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

.vscode/extensions.json

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

.vscode/tasks.json

@@ -0,0 +1,78 @@
+{
+  "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
+      },
+      // Try start the task on folder open
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    },
+    {
+      // 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": []
+    }
+  ]
+}

CONTRIBUTING.md

@@ -4,6 +4,26 @@ Contributions are what make the open source community such an amazing place to b
 
 - Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
 
+## Areas of expertise
+
+### Legend
+
+✅ = has knowledge 
+
+🥇 = is their main priority
+
+⚠️ = is the only one with knowledge 
+
+👀 = has no knowledge but wants to be onboarded 
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
+  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
+</picture>
+
+
+
+
 ## Developing
 
 The development branch is `main`. This is the branch that all pull

README.md

@@ -18,22 +18,26 @@
     <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://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
+   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
+   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
+   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>
 
 <!-- ABOUT THE PROJECT -->
@@ -80,7 +84,7 @@ To get a local copy up and running, please follow these simple steps.
 
 Here is what you need to be able to run Cal.
 
-- Node.js (Version: >=14.x <15)
+- Node.js (Version: >=14.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -107,7 +111,7 @@ Here is what you need to be able to run Cal.
    ```sh
    yarn
    ```
-   
+
 1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
 
 #### Quick start with `yarn dx`
@@ -129,7 +133,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 #### Manual setup
 
-1. Configure environment variables in the .env file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -190,8 +194,10 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 ### E2E-Testing
 
+Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
+
 ```sh
-# In a terminal. Just run:
+# In a terminal just run:
 yarn test-e2e
 
 # To open last HTML report run:
@@ -230,9 +236,9 @@ yarn workspace @calcom/web playwright-report
 
 1. Check for `.env` variables changes
 
-    ```sh
-    yarn predev
-    ```
+   ```sh
+   yarn predev
+   ```
 
 1. Start the server. In a development environment, just do:
 
@@ -396,11 +402,22 @@ 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.
 
+### Obtaining Vital API Keys
+
+1. Open [Vital](https://tryvital.io/) and click Get API Keys.
+1. Create a team with the team name you desire
+1. Head to the configuration section on the sidebar of the dashboard
+1. Click on API keys and you'll find your sandbox `api_key`.
+1. Copy your `api_key` to `VITAL_API_KEY` in the .env.appStore file.
+1. Open [Vital Webhooks](https://app.tryvital.io/team/{team_id}/webhooks) and add `<CALCOM BASE URL>/api/integrations/vital/webhook` as webhook for connected applications.
+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.
+
 <!-- LICENSE -->
 
 ## License
@@ -420,7 +437,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>
 
-[<img src="https://jitsu.com/img/powered-by-jitsu.png?gh=true">](https://jitsu.com/?utm_source=cal.com-gihub)
-
-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.
+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.

apps/docs/components/Anchor.tsx

@@ -0,0 +1,21 @@
+function getAnchor(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, "")
+    .replace(/[ ]/g, "-")
+    .replace(/ /g, "%20");
+}
+
+export default function Anchor({ as, children }) {
+  const anchor = getAnchor(children);
+  const link = `#${anchor}`;
+  const Component = as || "div";
+  return (
+    <Component id={anchor}>
+      <a href={link} className="anchor-link">
+        §
+      </a>
+      {children}
+    </Component>
+  );
+}

apps/docs/lib/useWindowSize.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+// Define general type for useWindowSize hook, which includes width and height
+export interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+// Hook from: https://usehooks.com/useWindowSize/
+export function useWindowSize(): Size {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

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

@@ -15,14 +15,15 @@
   "author": "Cal.com, Inc.",
   "license": "MIT",
   "dependencies": {
-    "next": "^12.1.0",
+    "iframe-resizer-react": "^1.1.0",
+    "next": "^12.1.6",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.15.0"
   }
 }

apps/docs/pages/integrations/embed.mdx

@@ -2,13 +2,16 @@
 title: Embed
 ---
 
+import Anchor from "../../components/Anchor"
+
 # Embed
 
 The Embed allows your website visitors to book a meeting with you directly from your website.
 
 ## Install on any website
 
-- _Step-1._ Install the Vanilla JS Snippet
+Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website">choose any of the ways</a> to show your Cal Link embedded on your website.
+
 ```html
 <script>
   (function (C, A, L) {
@@ -57,7 +60,7 @@ yarn add @calcom/embed-react
 
 You can use Vanilla JS Snippet to install
 
-## Popular ways in which you can embed on your website
+<Anchor as="H2">Popular ways in which you can embed on your website</Anchor>
 
 Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in following ways:
 
@@ -82,8 +85,15 @@ Show the embed inline inside a container element. It would take the width and he
     },
   });
 </script>
-```
 
+*Sample sandbox*
+```
+<iframe src="https://codesandbox.io/embed/vanilla-js-inline-embed-r27n67?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>
 
 ####
@@ -108,6 +118,14 @@ const MyComponent = () => (
 );
 ```
 
+*Sample sandbox*
+
+<iframe src="https://codesandbox.io/embed/cal-component-embed-inline-demo-react-typescript-d1zlcn?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>
 
 ### Popup on any existing element
@@ -120,9 +138,16 @@ To show the embed as a popup on clicking an element, add `data-cal-link` attribu
 
 To show the embed as a popup on clicking an element, simply add `data-cal-link` attribute to the element.
 
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
   <button data-cal-link="jane" data-cal-config="A valid config JSON"></button>
 </details>
-
 <details>
   <summary>React</summary>
   ```jsx
@@ -131,11 +156,37 @@ To show the embed as a popup on clicking an element, simply add `data-cal-link`
     const MyComponent = ()=> {
       return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
     }
+```
 
-````
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-popup-on-click-of-an-existing-element-demo-react-sc967e?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 
 </details>
 
+### Floating pop-up button
+
+```html
+<script>
+  Cal("floatingButton", {
+    // The link that you want to embed. It would open https://cal.com/jane in embed
+    calLink: "jane",
+  });
+</script>
+```
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
 ## Supported Instructions
 
 Consider an instruction as a function with that name and that would be called with the given arguments.

apps/docs/pages/public-api.mdx

@@ -1,11 +1,20 @@
 import Bleed from 'nextra-theme-docs/bleed'
 import Head from "next/head";
+import IframeResizer from "iframe-resizer-react";
+import {useWindowSize} from "../lib/useWindowSize";
+
 
 <Bleed full>
-<Head><title>Public API | Cal.com</title></Head>
-  <iframe src="https://developer.cal.com"
-     width="100%"
-     height="900px"
-     title="Public API | Cal.com"
-   ></iframe>
+  <Head><title>Public API | Cal.com</title></Head>
+  <IframeResizer
+    autoResize
+    src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
+    frameBorder="0"
+    style={{
+      width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
+      minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
+      height: "auto",
+      border: 0,
+    }}
+  />
 </Bleed>

apps/swagger/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/docs
+NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs

apps/swagger/lib/snippets.ts

@@ -20,7 +20,7 @@ export const requestSnippets = {
     },
   },
   defaultExpanded: true,
-  languages: ["node"],
+  languages: ["node", "curl_bash"],
 };
 // Since swagger-ui-react was not configured to change the request snippets some workarounds required
 // configuration will be added programatically

apps/swagger/package.json

@@ -5,21 +5,21 @@
   "scripts": {
     "dev": "PORT=4200 next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "PORT=4200 next start"
   },
   "dependencies": {
     "highlight.js": "^11.5.1",
     "isarray": "2.0.5",
-    "next": "12.1.5",
+    "next": "12.1.6",
     "openapi-snippet": "^0.13.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "swagger-ui-react": "4.10.3"
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swagger-ui-react": "4.11.1"
   },
   "devDependencies": {
-    "@types/node": "17.0.27",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "typescript": "4.6.3"
+    "@types/node": "16.9.1",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
   }
 }

apps/swagger/pages/index.tsx

@@ -1,20 +1,25 @@
 import dynamic from "next/dynamic";
+import { SwaggerUI } from "swagger-ui-react";
 
 import { SnippedGenerator, requestSnippets } from "@lib/snippets";
 
-const SwaggerUI: any = dynamic(() => import("swagger-ui-react"), { ssr: false });
+const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
+  ssr: false,
+});
 
 export default function APIDocs() {
   return (
-    <SwaggerUI
+    <SwaggerUIDynamic
       url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
-      supportedSubmitMethods={["get", "post", "delete", "patch"]}
+      persistAuthorization={true}
+      supportedSubmitMethods={["get", "post", "delete", "put", "options", "patch"]}
       requestSnippetsEnabled={true}
       requestSnippets={requestSnippets}
       plugins={[SnippedGenerator]}
       tryItOutEnabled={true}
       syntaxHighlight={true}
-      docExpansion="none"
+      enableCORS={false} // Doesn't seem to work either
+      docExpansion="list"
       filter={true}
     />
   );

apps/swagger/styles/globals.css

@@ -14,3 +14,89 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@media (max-width: 768px) {
+  .swagger-ui .opblock-tag {
+    font-size: 90% !important;
+  }
+  .swagger-ui .opblock .opblock-summary {
+    display: grid;
+  flex-direction: column;
+  }
+  .opblock-summary-path {
+    flex-shrink: 0;
+    max-width: 100% !important;
+    padding: 10px 5px !important;
+  }
+  .opblock-summary-description {
+    font-size: 16px !important;
+    padding: 0px 5px;
+  }
+  .swagger-ui .scheme-container .schemes {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .swagger-ui .info .title {
+    color: #3b4151;
+    font-family: sans-serif;
+    font-size: 22px;
+  }
+  .swagger-ui .scheme-container {
+  padding: 14px 0;
+  }
+  .swagger-ui .info {
+      margin: 10px 0;
+  }
+  .swagger-ui .auth-wrapper {
+    margin: 10px 0;
+  }
+  .swagger-ui .authorization__btn {
+  display: none;
+  }
+  .swagger-ui .opblock {
+    margin: 0 0 5px;
+  }
+  button.opblock-summary-control > svg {
+    display: none;  
+  }
+  .swagger-ui .filter .operation-filter-input {
+    border: 2px solid #d8dde7;
+    margin: 5px 5px;
+    padding: 5px;
+    width: 100vw;
+  }
+  .swagger-ui .wrapper {
+    padding: 0 4px;
+    width: 100%;
+  }
+  .swagger-ui .info .title small {
+    top: 5px;
+  }
+  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+    width: 100%;
+  }
+  div.request-snippets > div.curl-command > div:nth-child(1) {
+    overscroll-behavior: contain;
+    overflow-x: scroll;
+  }
+  .swagger-ui .opblock-body pre.microlight {  
+    font-size: 9px; 
+  }
+  .swagger-ui table tbody tr td {
+    padding: 0px 0 0;
+    vertical-align: none;
+  }
+  td.response-col_description > div > div > p {
+    font-size: 12px;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
+        display: flex;
+    width: 100vw;
+    flex-direction: column;
+    font-size: 60%;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
+    display: none;
+  }
+}

apps/web/.gitignore

@@ -61,3 +61,6 @@ yarn-error.log*
 
 # Typescript
 tsconfig.tsbuildinfo
+
+# Autogenerated embed content
+public/embed

apps/web/components/AdditionalCalendarSelector.tsx

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

apps/web/components/App.tsx

@@ -1,9 +1,11 @@
 import {
   BookOpenIcon,
+  CheckIcon,
   DocumentTextIcon,
   ExternalLinkIcon,
   FlagIcon,
   MailIcon,
+  PlusIcon,
   ShieldCheckIcon,
 } from "@heroicons/react/outline";
 import { ChevronLeftIcon } from "@heroicons/react/solid";
@@ -13,7 +15,7 @@ import React, { useEffect, useState } from "react";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { App as AppType } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
+import { Button, SkeletonButton } from "@calcom/ui";
 
 import Shell from "@components/Shell";
 import Badge from "@components/ui/Badge";
@@ -59,7 +61,8 @@ export default function App({
     currency: "USD",
     useGrouping: false,
   }).format(price);
-  const [installedApp, setInstalledApp] = useState(false);
+  const [installedAppCount, setInstalledAppCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
     async function getInstalledApp(appCredentialType: string) {
       const queryParam = new URLSearchParams();
@@ -70,9 +73,13 @@ export default function App({
           headers: {
             "Content-Type": "application/json",
           },
+        }).then((data) => {
+          setIsLoading(false);
+          return data;
         });
         if (result.status === 200) {
-          setInstalledApp(true);
+          const res = await result.json();
+          setInstalledAppCount(res.count);
         }
       } catch (error) {
         if (error instanceof Error) {
@@ -81,12 +88,13 @@ export default function App({
       }
     }
     getInstalledApp(type);
-  }, []);
+  }, [type]);
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
   return (
     <>
-      <Shell large>
+      <Shell large isPublic>
         <div className="-mx-4 md:-mx-8">
-          <div className="bg-gray-50 px-4">
+          <div className="bg-gray-50 px-8">
             <Link href="/apps">
               <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
                 <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
@@ -94,7 +102,7 @@ export default function App({
             </Link>
             <div className="items-center justify-between py-4 sm:flex sm:py-8">
               <div className="flex">
-                <img className="h-16 w-16" src={logo} alt={name} />
+                <img className="h-16 w-16 rounded-sm" 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">
@@ -104,19 +112,35 @@ export default function App({
               </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")}
+                {!isLoading ? (
+                  isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+                    <div className="space-x-3">
+                      <Button StartIcon={CheckIcon} color="secondary" disabled>
+                        {installedAppCount > 0
+                          ? t("active_install", { count: installedAppCount })
+                          : t("globally_install")}
                       </Button>
-                    )}
-                  />
+                      <InstallAppButton
+                        type={type}
+                        render={(buttonProps) => (
+                          <Button StartIcon={PlusIcon} data-testid="install-app-button" {...buttonProps}>
+                            {t("add_another")}
+                          </Button>
+                        )}
+                      />
+                    </div>
+                  ) : (
+                    <InstallAppButton
+                      type={type}
+                      render={(buttonProps) => (
+                        <Button data-testid="install-app-button" {...buttonProps}>
+                          {t("install_app")}
+                        </Button>
+                      )}
+                    />
+                  )
+                ) : (
+                  <SkeletonButton width="24" height="10" />
                 )}
                 {price !== 0 && (
                   <small className="block text-right">
@@ -132,7 +156,7 @@ export default function App({
             <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
           </div>
 
-          <div className="justify-between px-4 py-10 md:flex">
+          <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>

apps/web/components/AppsShell.tsx

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

apps/web/components/BookingsShell.tsx

@@ -1,26 +1,27 @@
 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("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 }} />

apps/web/components/CustomBranding.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-import { useBrandColors } from "@calcom/embed-core";
+import { useBrandColors } from "@calcom/embed-core/embed-iframe";
 
 const brandColor = "#292929";
 const brandTextColor = "#ffffff";
@@ -274,7 +274,17 @@ const BrandColor = ({
       "--brand-text-color-dark-mode",
       getContrastingTextColor(darkVal, true)
     );
-  }, [lightVal, darkVal]);
+  }, [
+    embedBrandingColors.highlightColor,
+    embedBrandingColors.lightestColor,
+    embedBrandingColors.lighterColor,
+    embedBrandingColors.lightColor,
+    embedBrandingColors.medianColor,
+    embedBrandingColors.darkColor,
+    embedBrandingColors.darkerColor,
+    lightVal,
+    darkVal,
+  ]);
   return null;
 };
 

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,9 +1,9 @@
+import classNames from "classnames";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
-import Button from "@calcom/ui/Button";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
 interface Props {
@@ -24,6 +24,22 @@ const DestinationCalendarSelector = ({
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
   const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
 
+  // Extra styles to show prefixed text in react-select
+  const content = (hidePlaceholder = false) => {
+    if (!hidePlaceholder) {
+      return {
+        alignItems: "center",
+        display: "flex",
+        ":before": {
+          content: `'${t("select_destination_calendar")}:'`,
+          display: "block",
+          marginRight: 8,
+        },
+      };
+    }
+    return {};
+  };
+
   useEffect(() => {
     const selected = query.data?.connectedCalendars
       .map((connected) => connected.calendars ?? [])
@@ -52,23 +68,35 @@ const DestinationCalendarSelector = ({
     })) ?? [];
   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}
         options={options}
+        styles={{
+          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          option: (defaultStyles, state) => ({
+            ...defaultStyles,
+            backgroundColor: state.isSelected
+              ? state.isFocused
+                ? "var(--brand-color)"
+                : "var(--brand-color)"
+              : state.isFocused
+              ? "var(--brand-color-dark-mode)"
+              : "var(--brand-text-color)",
+          }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "2px",
+            };
+          },
+        }}
         isSearchable={false}
-        className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
+        className={classNames(
+          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm",
+          !hidePlaceholder && "font-medium"
+        )}
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {

apps/web/components/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/ImageUploader.tsx

@@ -2,7 +2,7 @@ import { FormEvent, useCallback, useEffect, useState } from "react";
 import Cropper from "react-easy-crop";
 
 import Button from "@calcom/ui/Button";
-import { DialogClose, DialogTrigger, Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 
 import { Area, getCroppedImg } from "@lib/cropImage";
 import { useFileReader } from "@lib/hooks/useFileReader";
@@ -71,15 +71,15 @@ export default function ImageUploader({
   ...props
 }: ImageUploaderProps) {
   const { t } = useLocale();
-  const [imageSrc, setImageSrc] = useState<string | null>();
-  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>();
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
 
   const [{ result }, setFile] = useFileReader({
     method: "readAsDataURL",
   });
 
   useEffect(() => {
-    setImageSrc(props.imageSrc);
+    if (props.imageSrc) setImageSrc(props.imageSrc);
   }, [props.imageSrc]);
 
   const onInputFile = (e: FileEvent<HTMLInputElement>) => {
@@ -90,8 +90,9 @@ export default function ImageUploader({
   };
 
   const showCroppedImage = useCallback(
-    async (croppedAreaPixels) => {
+    async (croppedAreaPixels: Area | null) => {
       try {
+        if (!croppedAreaPixels) return;
         const croppedImage = await getCroppedImg(
           result as string /* result is always string when using readAsDataUrl */,
           croppedAreaPixels
@@ -134,7 +135,10 @@ export default function ImageUploader({
                     {t("no_target", { target })}
                   </p>
                 )}
-                {imageSrc && <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />}
+                {imageSrc && (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="h-20 w-20 rounded-full" src={imageSrc} alt={target} />
+                )}
               </div>
             )}
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}

apps/web/components/Loader.tsx

@@ -1,7 +1 @@
-export default function Loader() {
-  return (
-    <div className="loader border-brand dark:border-darkmodebrand">
-      <span className="loader-inner bg-brand dark:bg-darkmodebrand"></span>
-    </div>
-  );
-}
+export { default } from "@calcom/ui/Loader";

apps/web/components/Logo.tsx

@@ -3,8 +3,10 @@ export default function Logo({ small, icon }: { small?: boolean; icon?: boolean
     <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"

apps/web/components/NavTabs.tsx

@@ -1,32 +1,69 @@
 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 } 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: {
     name: string;
-    href: string;
-    icon?: ElementType;
+    /** If you want to change the path as per current tab */
+    href?: string;
+    /** If you want to change query param tabName as per current tab */
+    tabName?: string;
+    icon?: SVGComponent;
     adminRequired?: boolean;
   }[];
   linkProps?: Omit<LinkProps, "href">;
 }
 
-const NavTabs: FC<NavTabProps> = ({ tabs, linkProps }) => {
+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" aria-label="Tabs">
+      <nav
+        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
+        aria-label="Tabs"
+        {...props}>
         {tabs.map((tab) => {
-          const isCurrent = router.asPath === tab.href;
+          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
+            throw new Error("Use either tabName or href");
+          }
+          let href = "";
+          let isCurrent;
+          if (tab.href) {
+            href = tab.href;
+            isCurrent = router.asPath === tab.href;
+          } else if (tab.tabName) {
+            href = "";
+            isCurrent = router.query.tabName === tab.tabName;
+          }
+
+          const onClick: MouseEventHandler = tab.tabName
+            ? (e) => {
+                e.preventDefault();
+                router.push({
+                  query: {
+                    ...router.query,
+                    tabName: tab.tabName,
+                  },
+                });
+              }
+            : noop;
+
           const Component = tab.adminRequired ? AdminRequired : Fragment;
+
           return (
             <Component key={tab.name}>
-              <Link href={tab.href} {...linkProps}>
+              <Link key={tab.name} href={href} {...linkProps}>
                 <a
+                  onClick={onClick}
                   className={classNames(
                     isCurrent
                       ? "border-neutral-900 text-neutral-900"
@@ -43,7 +80,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps }) => {
                       aria-hidden="true"
                     />
                   )}
-                  <span>{tab.name}</span>
+                  <span>{t(tab.name)}</span>
                 </a>
               </Link>
             </Component>

apps/web/components/SettingsShell.tsx

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

apps/web/components/Shell.tsx

@@ -10,15 +10,16 @@ import {
   MapIcon,
   MoonIcon,
   ViewGridIcon,
+  QuestionMarkCircleIcon,
 } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment, ReactNode, useEffect } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
@@ -31,10 +32,12 @@ import LicenseBanner from "@ee/components/LicenseBanner";
 import TrialBanner from "@ee/components/TrialBanner";
 import HelpMenuItem from "@ee/components/support/HelpMenuItem";
 
+import ErrorBoundary from "@lib/ErrorBoundary";
 import classNames from "@lib/classNames";
 import { WEBAPP_URL } from "@lib/config/constants";
 import { shouldShowOnboarding } from "@lib/getting-started";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
+import useMeQuery from "@lib/hooks/useMeQuery";
+import useTheme from "@lib/hooks/useTheme";
 import { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
@@ -46,16 +49,6 @@ import pkg from "../package.json";
 import { useViewerI18n } from "./I18nLanguageHandler";
 import Logo from "./Logo";
 
-export function useMeQuery() {
-  const meQuery = trpc.useQuery(["viewer.me"], {
-    retry(failureCount) {
-      return failureCount > 3;
-    },
-  });
-
-  return meQuery;
-}
-
 function useRedirectToLoginIfUnauthenticated(isPublic = false) {
   const { data: session, status } = useSession();
   const loading = status === "loading";
@@ -206,7 +199,7 @@ const Layout = ({
                   </Link>
                   {/* logo icon for tablet */}
                   <Link href="/event-types">
-                    <a className="md:inline lg:hidden">
+                    <a className="text-center md:inline lg:hidden">
                       <Logo small icon />
                     </a>
                   </Link>
@@ -215,6 +208,7 @@ const Layout = ({
                       <Fragment key={item.name}>
                         <Link href={item.href}>
                           <a
+                            aria-label={item.name}
                             className={classNames(
                               item.current
                                 ? "bg-neutral-100 text-neutral-900"
@@ -256,7 +250,7 @@ const Layout = ({
                 </div>
                 <TrialBanner />
                 <div
-                  className="rounded-sm pb-2 pl-3 pt-2 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
+                  className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
                   data-testid="user-dropdown-trigger">
                   <span className="hidden lg:inline">
                     <UserDropdown />
@@ -356,7 +350,7 @@ const Layout = ({
                   "px-4 sm:px-6 md:px-8",
                   props.flexChildrenContainer && "flex flex-1 flex-col"
                 )}>
-                {!props.isLoading ? props.children : props.customLoader}
+                <ErrorBoundary>{!props.isLoading ? props.children : props.customLoader}</ErrorBoundary>
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
               {status === "authenticated" && (
@@ -421,16 +415,9 @@ type LayoutProps = {
 };
 
 export default function Shell(props: LayoutProps) {
-  const router = useRouter();
   const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
   const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
-  const telemetry = useTelemetry();
-
-  useEffect(() => {
-    telemetry.withJitsu((jitsu) => {
-      return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.asPath));
-    });
-  }, [telemetry, router.asPath]);
+  const { isReady, Theme } = useTheme("light");
 
   const query = useMeQuery();
   const user = query.data;
@@ -439,7 +426,11 @@ export default function Shell(props: LayoutProps) {
   const { status } = useSession();
 
   const isLoading =
-    i18n.status === "loading" || query.status === "loading" || isRedirectingToOnboarding || loading;
+    i18n.status === "loading" ||
+    query.status === "loading" ||
+    isRedirectingToOnboarding ||
+    loading ||
+    !isReady;
 
   if (isLoading) {
     return (
@@ -453,6 +444,7 @@ export default function Shell(props: LayoutProps) {
 
   return (
     <>
+      <Theme />
       <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
       <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
     </>
@@ -469,9 +461,10 @@ function UserDropdown({ small }: { small?: boolean }) {
     },
   });
   const utils = trpc.useContext();
+  const [helpOpen, setHelpOpen] = useState(false);
 
   return (
-    <Dropdown>
+    <Dropdown onOpenChange={() => setHelpOpen(false)}>
       <DropdownMenuTrigger asChild>
         <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
           <span
@@ -479,11 +472,14 @@ function UserDropdown({ small }: { small?: boolean }) {
               small ? "h-8 w-8" : "h-10 w-10",
               "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
             )}>
-            <img
-              className="rounded-full"
-              src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
-              alt={user?.username || "Nameless User"}
-            />
+            {
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                className="rounded-full"
+                src={WEBAPP_URL + "/" + user?.username + "/avatar.png"}
+                alt={user?.username || "Nameless User"}
+              />
+            }
             {!user?.away && (
               <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
             )}
@@ -510,96 +506,115 @@ function UserDropdown({ small }: { small?: boolean }) {
         </button>
       </DropdownMenuTrigger>
       <DropdownMenuContent portalled={true}>
-        <DropdownMenuItem>
-          <a
-            onClick={() => {
-              mutation.mutate({ away: !user?.away });
-              utils.invalidateQueries("viewer.me");
-            }}
-            className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-            <MoonIcon
-              className={classNames(
-                user?.away
-                  ? "text-purple-500 group-hover:text-purple-700"
-                  : "text-gray-500 group-hover:text-gray-700",
-                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-              )}
-              aria-hidden="true"
-            />
-            {user?.away ? t("set_as_free") : t("set_as_away")}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        {user?.username && (
-          <DropdownMenuItem>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-              className="flex items-center px-4 py-2 text-sm text-gray-700">
-              <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("view_public_page")}
-            </a>
-          </DropdownMenuItem>
+        {helpOpen ? (
+          <HelpMenuItem closeHelp={() => setHelpOpen(false)} />
+        ) : (
+          <>
+            <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>
+
+            <button
+              className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => setHelpOpen(true)}>
+              <QuestionMarkCircleIcon
+                className={classNames(
+                  "text-gray-500 group-hover:text-neutral-500",
+                  "h-5 w-5 flex-shrink-0 ltr:mr-3"
+                )}
+                aria-hidden="true"
+              />
+
+              {t("help")}
+            </button>
+
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuItem>
+              <a
+                onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+                className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <LogoutIcon
+                  className={classNames(
+                    "text-gray-500 group-hover:text-gray-700",
+                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  )}
+                  aria-hidden="true"
+                />
+                {t("sign_out")}
+              </a>
+            </DropdownMenuItem>
+          </>
         )}
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        <DropdownMenuItem>
-          <a
-            href="https://cal.com/slack"
-            target="_blank"
-            rel="noreferrer"
-            className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
-            <svg
-              viewBox="0 0 2447.6 2452.5"
-              className={classNames(
-                "text-gray-500 group-hover:text-gray-700",
-                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
-              )}
-              xmlns="http://www.w3.org/2000/svg">
-              <g clipRule="evenodd" fillRule="evenodd">
-                <path
-                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                  fill="currentColor"></path>
-              </g>
-            </svg>
-            {t("join_our_slack")}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://cal.com/roadmap"
-            className="flex items-center px-4 py-2 text-sm text-gray-700">
-            <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
-          </a>
-        </DropdownMenuItem>
-
-        <HelpMenuItem />
-
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        <DropdownMenuItem>
-          <a
-            onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-            className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-            <LogoutIcon
-              className={classNames(
-                "text-gray-500 group-hover:text-gray-700",
-                "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-              )}
-              aria-hidden="true"
-            />
-            {t("sign_out")}
-          </a>
-        </DropdownMenuItem>
       </DropdownMenuContent>
     </Dropdown>
   );

apps/web/components/apps/AppCard.tsx

@@ -1,4 +1,3 @@
-import { StarIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 
 import Button from "@calcom/ui/Button";
@@ -16,11 +15,15 @@ interface AppCardProps {
 export default function AppCard(props: AppCardProps) {
   return (
     <Link href={"/apps/" + props.slug}>
-      <a className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50">
+      <a
+        className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
+        data-testid={`app-store-app-card-${props.slug}`}>
         <div className="flex">
-          <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+          }
           <Button
-            data-testid={`app-store-app-card-${props.slug}`}
             color="secondary"
             className="ml-auto flex self-start"
             onClick={() => {

apps/web/components/apps/SkeletonLoader.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
 
 import { ShellSubHeading } from "@components/Shell";
 
-function SkeletonLoader() {
+function SkeletonLoader({ className }: { className?: string }) {
   return (
     <>
-      <ShellSubHeading title={<div className="h-6 w-32 rounded-sm bg-gray-100"></div>} />
+      <ShellSubHeading title={<div className="h-6 w-32 rounded-sm bg-gray-100"></div>} {...{ className }} />
       <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-sm border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />

apps/web/components/apps/Slider.tsx

@@ -4,7 +4,7 @@ import "@glidejs/glide/dist/css/glide.theme.min.css";
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid";
 import { useEffect, useRef } from "react";
 
-const Slider = <T extends unknown>({
+const Slider = <T extends string | unknown>({
   title = "",
   className = "",
   items,

apps/web/components/auth/SAMLLogin.tsx

@@ -40,9 +40,7 @@ export default function SAMLLogin(props: Props) {
           event.preventDefault();
 
           // track Google logins. Without personal data/payload
-          telemetry.withJitsu((jitsu) =>
-            jitsu.track(telemetryEventTypes.googleLogin, collectPageParameters())
-          );
+          telemetry.event(telemetryEventTypes.googleLogin, collectPageParameters());
 
           if (!props.hostedCal) {
             await signIn("saml", {}, { tenant: props.samlTenantID, product: props.samlProductID });

apps/web/components/availability/NewScheduleButton.tsx

@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
-import { Form, TextField } from "@calcom/ui/form/fields";
+import { Form } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
 import { trpc } from "@lib/trpc";
@@ -46,20 +46,17 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
         </Button>
       </DialogTrigger>
       <DialogContent>
-        <div className="mb-4">
+        <div className="mb-8">
           <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
             {t("add_new_schedule")}
           </h3>
-          <div>
-            <p className="text-sm text-gray-500">{t("new_event_type_to_book_description")}</p>
-          </div>
         </div>
         <Form
           form={form}
           handleSubmit={(values) => {
             createMutation.mutate(values);
           }}>
-          <div className="mt-3 space-y-4">
+          <div className="mt-3 space-y-2">
             <label htmlFor="label" className="block text-sm font-medium text-gray-700">
               {t("name")}
             </label>

apps/web/components/availability/Schedule.tsx

@@ -6,7 +6,7 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { GroupBase, Props, SingleValue } from "react-select";
+import { GroupBase, Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
@@ -14,9 +14,9 @@ import Dropdown, { DropdownMenuTrigger, DropdownMenuContent } from "@calcom/ui/D
 
 import { defaultDayRange } from "@lib/availability";
 import { weekdayNames } from "@lib/core/i18n/weekday";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import { TimeRange } from "@lib/types/schedule";
 
-import { useMeQuery } from "@components/Shell";
 import Select from "@components/ui/form/Select";
 
 dayjs.extend(utc);
@@ -57,12 +57,13 @@ const useOptions = () => {
       t = t.add(increment, "minutes");
     }
     return options;
-  }, []);
+  }, [timeFormat]);
 
   const filter = useCallback(
     ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
       if (current) {
-        setFilteredOptions([options.find((option) => option.value === dayjs(current).toDate().valueOf())!]);
+        const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf());
+        if (currentOption) setFilteredOptions([currentOption]);
       } else
         setFilteredOptions(
           options.filter((option) => {

apps/web/components/availability/ScheduleListItem.tsx

@@ -0,0 +1,75 @@
+import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
+import Link from "next/link";
+import { Fragment } from "react";
+
+import { availabilityAsString } from "@calcom/lib/availability";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Availability } from "@calcom/prisma/client";
+import { Button } from "@calcom/ui";
+import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+
+import { inferQueryOutput } from "@lib/trpc";
+
+export function ScheduleListItem({
+  schedule,
+  deleteFunction,
+  isDeleting = false,
+}: {
+  schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
+  deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
+  isDeleting: boolean;
+}) {
+  const { t, i18n } = useLocale();
+
+  return (
+    <li key={schedule.id}>
+      <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
+        <div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
+          <Link href={"/availability/" + schedule.id}>
+            <a className="flex-grow truncate text-sm" title={schedule.name}>
+              <div>
+                <span className="truncate font-medium text-neutral-900">{schedule.name}</span>
+                {schedule.isDefault && (
+                  <span className="ml-2 inline items-center rounded-sm bg-yellow-100 px-1.5 py-0.5 text-xs font-medium text-yellow-800">
+                    {t("default")}
+                  </span>
+                )}
+              </div>
+              <p className="mt-1 text-xs text-neutral-500">
+                {schedule.availability.map((availability: Availability) => (
+                  <Fragment key={availability.id}>
+                    {availabilityAsString(availability, i18n.language)}
+                    <br />
+                  </Fragment>
+                ))}
+              </p>
+            </a>
+          </Link>
+        </div>
+        <Dropdown>
+          <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
+            <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              <Button
+                disabled={isDeleting}
+                onClick={() => {
+                  deleteFunction({
+                    scheduleId: schedule.id,
+                  });
+                }}
+                type="button"
+                color="warn"
+                className="w-full font-normal"
+                StartIcon={isDeleting ? undefined : TrashIcon}
+                loading={isDeleting}>
+                {isDeleting ? t("deleting") : t("delete_schedule")}
+              </Button>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </Dropdown>
+      </div>
+    </li>
+  );
+}

apps/web/components/availability/SkeletonLoader.tsx

@@ -31,3 +31,16 @@ function SkeletonItem() {
     </li>
   );
 }
+
+export const AvailabilitySelectSkeletonLoader = () => {
+  return (
+    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="4" height="4"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+};

apps/web/components/booking/AvailableTimes.tsx

@@ -1,61 +1,44 @@
-import { ExclamationIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
 
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
-import { useSlots } from "@lib/hooks/useSlots";
+import { timeZone } from "@lib/clock";
 
-import Loader from "@components/Loader";
+import type { Slot } from "@server/routers/viewer/slots";
 
 type AvailableTimesProps = {
   timeFormat: string;
-  minimumBookingNotice: number;
-  beforeBufferTime: number;
-  afterBufferTime: number;
   eventTypeId: number;
-  eventLength: number;
+  recurringCount: number | undefined;
   eventTypeSlug: string;
-  slotInterval: number | null;
   date: Dayjs;
   users: {
     username: string | null;
   }[];
   schedulingType: SchedulingType | null;
+  seatsPerTimeSlot?: number | null;
+  slots?: Slot[];
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
+  slots = [],
   date,
-  eventLength,
   eventTypeId,
   eventTypeSlug,
-  slotInterval,
-  minimumBookingNotice,
+  recurringCount,
   timeFormat,
-  users,
   schedulingType,
-  beforeBufferTime,
-  afterBufferTime,
+  seatsPerTimeSlot,
 }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
   const { rescheduleUid } = router.query;
-  const { slots, loading, error } = useSlots({
-    date,
-    slotInterval,
-    eventLength,
-    schedulingType,
-    users,
-    minimumBookingNotice,
-    beforeBufferTime,
-    afterBufferTime,
-    eventTypeId,
-  });
 
   const [brand, setBrand] = useState("#292929");
 
@@ -75,8 +58,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         </span>
       </div>
       <div className="flex-grow overflow-y-auto md:h-[364px]">
-        {!loading &&
-          slots?.length > 0 &&
+        {slots?.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
               pathname: string;
@@ -86,9 +68,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               pathname: "book",
               query: {
                 ...router.query,
-                date: slot.time.format(),
+                date: dayjs(slot.time).format(),
                 type: eventTypeId,
                 slug: eventTypeSlug,
+                /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
+                count: recurringCount && !rescheduleUid ? recurringCount : undefined,
               },
             };
 
@@ -100,41 +84,56 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               bookingUrl.query.user = slot.users;
             }
 
+            // If event already has an attendee add booking id
+            if (slot.bookingUid) {
+              bookingUrl.query.bookingUid = slot.bookingUid;
+            }
+
             return (
-              <div key={slot.time.format()}>
-                <Link href={bookingUrl}>
-                  <a
+              <div key={dayjs(slot.time).format()}>
+                {/* Current there is no way to disable Next.js Links */}
+                {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
+                  <div
                     className={classNames(
-                      "text-bookingdarker hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
+                      "text-primary-500 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25  dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
-                    )}
-                    data-testid="time">
-                    {slot.time.format(timeFormat)}
-                  </a>
-                </Link>
+                    )}>
+                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                    {!!seatsPerTimeSlot && <p className={`text-sm`}>{t("booking_full")}</p>}
+                  </div>
+                ) : (
+                  <Link href={bookingUrl}>
+                    <a
+                      className={classNames(
+                        "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
+                        brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                      )}
+                      data-testid="time">
+                      {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                      {!!seatsPerTimeSlot && (
+                        <p
+                          className={`${
+                            slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
+                              ? "text-rose-600"
+                              : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
+                              ? "text-yellow-500"
+                              : "text-emerald-400"
+                          } text-sm`}>
+                          {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
+                          {seatsPerTimeSlot} {t("seats_available")}
+                        </p>
+                      )}
+                    </a>
+                  </Link>
+                )}
               </div>
             );
           })}
-        {!loading && !error && !slots.length && (
+        {!slots.length && (
           <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
             <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
           </div>
         )}
-
-        {loading && <Loader />}
-
-        {error && (
-          <div className="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
-              </div>
-              <div className="ltr:ml-3 rtl:mr-3">
-                <p className="text-sm text-yellow-700">{t("slots_load_fail")}</p>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

apps/web/components/booking/BookingListItem.tsx

@@ -1,43 +1,76 @@
-import { BanIcon, CheckIcon, ClockIcon, XIcon, PencilAltIcon } from "@heroicons/react/outline";
-import { PaperAirplaneIcon } from "@heroicons/react/outline";
+import {
+  BanIcon,
+  CheckIcon,
+  ClockIcon,
+  LocationMarkerIcon,
+  PaperAirplaneIcon,
+  PencilAltIcon,
+  XIcon,
+} from "@heroicons/react/outline";
+import { RefreshIcon } from "@heroicons/react/solid";
 import { BookingStatus } from "@prisma/client";
 import dayjs from "dayjs";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { useMutation } from "react-query";
 
+import { parseRecurringEvent } from "@calcom/lib";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
-import { inferQueryOutput, trpc } from "@lib/trpc";
+import useMeQuery from "@lib/hooks/useMeQuery";
+import { linkValueToString } from "@lib/linkValueToString";
+import { LocationType } from "@lib/location";
+import { parseRecurringDates } from "@lib/parseDate";
+import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";
 
-import { useMeQuery } from "@components/Shell";
+import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";
 
+type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
+
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
-function BookingListItem(booking: BookingItem) {
+type BookingItemProps = BookingItem & {
+  listingStatus: BookingListingStatus;
+  recurringCount?: number;
+};
+
+function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
   const { t, i18n } = useLocale();
   const utils = trpc.useContext();
+  const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const mutation = useMutation(
     async (confirm: boolean) => {
+      let body = {
+        id: booking.id,
+        confirmed: confirm,
+        language: i18n.language,
+        reason: rejectionReason,
+      };
+      /**
+       * Only pass down the recurring event id when we need to confirm the entire series, which happens in
+       * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+       */
+      if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+        body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
+      }
       const res = await fetch("/api/book/confirm", {
         method: "PATCH",
-        body: JSON.stringify({
-          id: booking.id,
-          confirmed: confirm,
-          language: i18n.language,
-          reason: rejectionReason,
-        }),
+        body: JSON.stringify(body),
         headers: {
           "Content-Type": "application/json",
         },
@@ -45,6 +78,7 @@ function BookingListItem(booking: BookingItem) {
       if (!res.ok) {
         throw new HttpError({ statusCode: res.status });
       }
+      setRejectionDialogIsOpen(false);
     },
     {
       async onSettled() {
@@ -54,53 +88,84 @@ function BookingListItem(booking: BookingItem) {
   );
   const isUpcoming = new Date(booking.endTime) >= new Date();
   const isCancelled = booking.status === BookingStatus.CANCELLED;
+  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
+  const isRejected = booking.status === BookingStatus.REJECTED;
+  const isPending = booking.status === BookingStatus.PENDING;
 
   const pendingActions: ActionType[] = [
     {
       id: "reject",
-      label: t("reject"),
-      onClick: () => setRejectionDialogIsOpen(true),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("reject_all")
+          : t("reject"),
+      onClick: () => {
+        setRejectionDialogIsOpen(true);
+      },
       icon: BanIcon,
       disabled: mutation.isLoading,
     },
     {
       id: "confirm",
-      label: t("confirm"),
-      onClick: () => mutation.mutate(true),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("confirm_all")
+          : t("confirm"),
+      onClick: () => {
+        mutation.mutate(true);
+      },
       icon: CheckIcon,
       disabled: mutation.isLoading,
       color: "primary",
     },
   ];
 
-  const bookedActions: ActionType[] = [
+  let bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label: t("cancel"),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("cancel_all_remaining")
+          : t("cancel"),
       href: `/cancel/${booking.uid}`,
       icon: XIcon,
     },
     {
-      id: "reschedule",
-      label: t("reschedule"),
-      icon: ClockIcon,
+      id: "edit_booking",
+      label: t("edit_booking"),
+      icon: PencilAltIcon,
       actions: [
         {
-          id: "edit",
-          icon: PencilAltIcon,
-          label: t("edit_booking"),
+          id: "reschedule",
+          icon: ClockIcon,
+          label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}`,
         },
         {
           id: "reschedule_request",
-          icon: ClockIcon,
+          icon: PaperAirplaneIcon,
+          iconClassName: "rotate-45 w-[18px] -ml-[2px]",
           label: t("send_reschedule_request"),
-          onClick: () => setIsOpenRescheduleDialog(true),
+          onClick: () => {
+            setIsOpenRescheduleDialog(true);
+          },
+        },
+        {
+          id: "change_location",
+          label: t("edit_location"),
+          onClick: () => {
+            setIsOpenLocationDialog(true);
+          },
+          icon: LocationMarkerIcon,
         },
       ],
     },
   ];
 
+  if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
+  }
+
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
@@ -112,6 +177,80 @@ function BookingListItem(booking: BookingItem) {
 
   const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
+  const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
+  const setLocationMutation = trpc.useMutation("viewer.bookings.editLocation", {
+    onSuccess: () => {
+      showToast(t("location_updated"), "success");
+      setIsOpenLocationDialog(false);
+      utils.invalidateQueries("viewer.bookings");
+    },
+  });
+
+  const saveLocation = (newLocationType: LocationType, details: { [key: string]: string }) => {
+    let newLocation = newLocationType as string;
+    if (
+      newLocationType === LocationType.InPerson ||
+      newLocationType === LocationType.Link ||
+      newLocationType === LocationType.UserPhone
+    ) {
+      newLocation = details[Object.keys(details)[0]];
+    }
+    setLocationMutation.mutate({ bookingId: booking.id, newLocation });
+  };
+
+  // Calculate the booking date(s) and setup recurring event data to show
+  let recurringStrings: string[] = [];
+  let recurringDates: Date[] = [];
+  const today = new Date();
+  if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== undefined) {
+    [recurringStrings, recurringDates] = parseRecurringDates(
+      {
+        startDate: booking.startTime,
+        recurringEvent: parseRecurringEvent(booking.eventType.recurringEvent),
+        recurringCount: booking.recurringCount,
+      },
+      i18n
+    );
+    if (booking.status === BookingStatus.PENDING) {
+      // Only take into consideration next up instances if booking is confirmed
+      recurringDates = recurringDates.filter((aDate) => aDate >= today);
+      recurringStrings = recurringDates.map((_, key) => recurringStrings[key]);
+    }
+  }
+
+  let location = booking.location || "";
+
+  if (location.includes("integration")) {
+    if (booking.status === BookingStatus.CANCELLED || booking.status === BookingStatus.REJECTED) {
+      location = t("web_conference");
+    } else if (isConfirmed) {
+      location = linkValueToString(booking.location, t);
+    } else {
+      location = t("web_conferencing_details_to_follow");
+    }
+  }
+
+  const onClick = () => {
+    router.push({
+      pathname: "/success",
+      query: {
+        date: booking.startTime,
+        // TODO: Booking when fetched should have id 0 already(for Dynamic Events).
+        type: booking.eventType.id || 0,
+        eventSlug: booking.eventType.slug,
+        user: user?.username || "",
+        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
+        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
+        location: location,
+        eventName: booking.eventType.eventName || "",
+        bookingId: booking.id,
+        recur: booking.recurringEventId,
+        reschedule: isConfirmed,
+        listingStatus: booking.listingStatus,
+        status: booking.status,
+      },
+    });
+  };
   return (
     <>
       <RescheduleDialog
@@ -119,6 +258,12 @@ function BookingListItem(booking: BookingItem) {
         setIsOpenDialog={setIsOpenRescheduleDialog}
         bookingUId={booking.uid}
       />
+      <EditLocationDialog
+        booking={booking}
+        saveLocation={saveLocation}
+        isOpenDialog={isOpenSetLocationDialog}
+        setShowLocationModal={setIsOpenLocationDialog}
+      />
 
       {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
       <Dialog open={rejectionDialogIsOpen} onOpenChange={setRejectionDialogIsOpen}>
@@ -153,72 +298,102 @@ function BookingListItem(booking: BookingItem) {
         </DialogContent>
       </Dialog>
 
-      <tr className="flex">
-        <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell">
-          <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-          <div className="text-sm text-gray-500">
-            {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
-            {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+      <tr className="flex hover:bg-neutral-50">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-64" onClick={onClick}>
+          <div className="cursor-pointer py-4">
+            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
+            <div className="text-sm text-gray-500">
+              {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
+              {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+            </div>
+            <div className="text-sm text-gray-400">
+              {booking.recurringCount &&
+                booking.eventType?.recurringEvent?.freq &&
+                (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
+                  <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
+                    <div className="flex">
+                      <Tooltip
+                        content={recurringStrings.map((aDate, key) => (
+                          <p key={key}>{aDate}</p>
+                        ))}>
+                        <div className="text-gray-600 dark:text-white">
+                          <RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <p className="pl-[21px]">
+                            {booking.status === BookingStatus.ACCEPTED
+                              ? `${t("event_remaining", {
+                                  count: recurringDates.length,
+                                })}`
+                              : getEveryFreqFor({
+                                  t,
+                                  recurringEvent: booking.eventType.recurringEvent,
+                                  recurringCount: booking.recurringCount,
+                                })}
+                          </p>
+                        </div>
+                      </Tooltip>
+                    </div>
+                  </div>
+                )}
+            </div>
           </div>
         </td>
-        <td className={"flex-1 py-4 ltr:pl-4 rtl:pr-4" + (booking.rejected ? " line-through" : "")}>
-          <div className="sm:hidden">
-            {!booking.confirmed && !booking.rejected && (
-              <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>
-            )}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
-            )}
-            <div className="text-sm font-medium text-gray-900">
-              {startTime}:{" "}
-              <small className="text-sm text-gray-500">
-                {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-              </small>
+        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+          <div className="cursor-pointer py-4">
+            <div className="sm:hidden">
+              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
+              )}
+              <div className="text-sm font-medium text-gray-900">
+                {startTime}:{" "}
+                <small className="text-sm text-gray-500">
+                  {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+                </small>
+              </div>
             </div>
-          </div>
-          <div
-            title={booking.title}
-            className={classNames(
-              "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
-              isCancelled ? "line-through" : ""
-            )}>
-            {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
-            {booking.title}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
-            )}
-            {!booking.confirmed && !booking.rejected && (
-              <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">{t("unconfirmed")}</Tag>
-            )}
-          </div>
-          {booking.description && (
-            <div className="max-w-52 md:max-w-96 truncate text-sm text-gray-500" title={booking.description}>
-              &quot;{booking.description}&quot;
+            <div
+              title={booking.title}
+              className={classNames(
+                "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
+                isCancelled ? "line-through" : ""
+              )}>
+              {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
+              {booking.title}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
+              )}
+              {isPending && <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">{t("unconfirmed")}</Tag>}
             </div>
-          )}
+            {booking.description && (
+              <div
+                className="max-w-52 md:max-w-96 truncate text-sm text-gray-500"
+                title={booking.description}>
+                &quot;{booking.description}&quot;
+              </div>
+            )}
 
-          {booking.attendees.length !== 0 && (
-            <div className="text-sm text-gray-900 hover:text-blue-500">
-              <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
-            </div>
-          )}
-          {isCancelled && booking.rescheduled && (
-            <div className="mt-2 inline-block text-left text-sm md:hidden">
-              <RequestSentMessage />
-            </div>
-          )}
+            {booking.attendees.length !== 0 && (
+              <a
+                className="text-sm text-gray-900 hover:text-blue-500"
+                href={"mailto:" + booking.attendees[0].email}
+                onClick={(e) => e.stopPropagation()}>
+                {booking.attendees[0].email}
+              </a>
+            )}
+            {isCancelled && booking.rescheduled && (
+              <div className="mt-2 inline-block text-left text-sm md:hidden">
+                <RequestSentMessage />
+              </div>
+            )}
+          </div>
         </td>
 
         <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
           {isUpcoming && !isCancelled ? (
             <>
-              {!booking.confirmed && !booking.rejected && user!.id === booking.user!.id && (
-                <TableActions actions={pendingActions} />
-              )}
-              {booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
-              {!booking.confirmed && booking.rejected && (
-                <div className="text-sm text-gray-500">{t("rejected")}</div>
-              )}
+              {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
+              {isConfirmed && <TableActions actions={bookedActions} />}
+              {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
             </>
           ) : null}
           {isCancelled && booking.rescheduled && (

apps/web/components/booking/CancelBooking.tsx

@@ -0,0 +1,121 @@
+import { XIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
+import { Button } from "@calcom/ui/Button";
+
+import useTheme from "@lib/hooks/useTheme";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
+
+type Props = {
+  booking: {
+    title?: string;
+    uid?: string;
+  };
+  profile: {
+    name: string | null;
+    slug: string | null;
+  };
+  recurringEvent: RecurringEvent | null;
+  team?: string | null;
+  setIsCancellationMode: (value: boolean) => void;
+  theme: string | null;
+};
+
+export default function CancelBooking(props: Props) {
+  const [cancellationReason, setCancellationReason] = useState<string>("");
+  const { t } = useLocale();
+  const router = useRouter();
+  const { booking, profile, team } = props;
+  const [loading, setLoading] = useState(false);
+  const telemetry = useTelemetry();
+  const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
+  const { isReady, Theme } = useTheme(props.theme);
+
+  if (isReady) {
+    return (
+      <>
+        <Theme />
+        {error && (
+          <div>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+              <XIcon className="h-6 w-6 text-red-600" />
+            </div>
+            <div className="mt-3 text-center sm:mt-5">
+              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+                {error}
+              </h3>
+            </div>
+          </div>
+        )}
+        {!error && (
+          <div className="mt-5 sm:mt-6">
+            <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+            <textarea
+              placeholder={t("cancellation_reason_placeholder")}
+              value={cancellationReason}
+              onChange={(e) => setCancellationReason(e.target.value)}
+              className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+              rows={3}
+            />
+            <div className="flex rtl:space-x-reverse">
+              {!props.recurringEvent && (
+                <div className="w-full">
+                  <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                    {t("reschedule_this")}
+                  </Button>
+                </div>
+              )}
+              <div className="w-full space-x-2 text-right">
+                <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+                  {t("nevermind")}
+                </Button>
+                <Button
+                  data-testid="cancel"
+                  onClick={async () => {
+                    setLoading(true);
+
+                    const payload = {
+                      uid: booking?.uid,
+                      reason: cancellationReason,
+                    };
+
+                    telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+
+                    const res = await fetch("/api/cancel", {
+                      body: JSON.stringify(payload),
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                      method: "DELETE",
+                    });
+
+                    if (res.status >= 200 && res.status < 300) {
+                      await router.push(
+                        `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
+                          profile.slug
+                        }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
+                      );
+                    } else {
+                      setLoading(false);
+                      setError(
+                        `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                          "please_try_again"
+                        )}`
+                      );
+                    }
+                  }}
+                  loading={loading}>
+                  {t("cancel_event")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+  return <></>;
+}

apps/web/components/booking/DatePicker.tsx

@@ -1,19 +1,20 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
-import { EventType, PeriodType } from "@prisma/client";
+import { PeriodType } from "@prisma/client";
 import dayjs, { Dayjs } from "dayjs";
-import dayjsBusinessTime from "dayjs-business-time";
+import dayjsBusinessTime from "dayjs-business-days2";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { memoize } from "lodash";
 import { useEffect, useRef, useState } from "react";
 
-import { useEmbedStyles } from "@calcom/embed-core";
+import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
 import { weekdayNames } from "@lib/core/i18n/weekday";
 import { doWorkAsync } from "@lib/doWorkAsync";
+import isOutOfBounds from "@lib/isOutOfBounds";
 import getSlots from "@lib/slots";
 import { WorkingHours } from "@lib/types/schedule";
 
@@ -37,41 +38,6 @@ type DatePickerProps = {
   minimumBookingNotice: number;
 };
 
-function isOutOfBounds(
-  time: dayjs.ConfigType,
-  {
-    periodType,
-    periodDays,
-    periodCountCalendarDays,
-    periodStartDate,
-    periodEndDate,
-  }: Pick<
-    EventType,
-    "periodType" | "periodDays" | "periodCountCalendarDays" | "periodStartDate" | "periodEndDate"
-  >
-) {
-  const date = dayjs(time);
-
-  switch (periodType) {
-    case PeriodType.ROLLING: {
-      const periodRollingEndDay = periodCountCalendarDays
-        ? dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
-        : dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
-      return date.endOf("day").isAfter(periodRollingEndDay);
-    }
-
-    case PeriodType.RANGE: {
-      const periodRangeStartDay = dayjs(periodStartDate).utcOffset(date.utcOffset()).endOf("day");
-      const periodRangeEndDay = dayjs(periodEndDate).utcOffset(date.utcOffset()).endOf("day");
-      return date.endOf("day").isBefore(periodRangeStartDay) || date.endOf("day").isAfter(periodRangeEndDay);
-    }
-
-    case PeriodType.UNLIMITED:
-    default:
-      return false;
-  }
-}
-
 function DatePicker({
   weekStart,
   onDatePicked,
@@ -94,7 +60,7 @@ function DatePicker({
   const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
   const [daysFromState, setDays] = useState<
     | {
-        disabled: Boolean;
+        disabled: boolean;
         date: number;
       }[]
     | null
@@ -191,7 +157,7 @@ function DatePicker({
       name: "DatePicker",
       length: daysInMonth,
       callback: (i: number) => {
-        let day = i + 1;
+        const day = i + 1;
         days[daysInitialOffset + i] = {
           disabled: isDisabledMemoized(day, {
             browsingDate,
@@ -283,15 +249,9 @@ function DatePicker({
                   day.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }
                 }
                 className={classNames(
-                  "absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
-                  "hover:border-brand hover:border dark:hover:border-white",
-                  day.disabled
-                    ? "text-bookinglighter cursor-default font-light hover:border-0"
-                    : "font-medium",
+                  "hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center font-medium hover:border disabled:cursor-default disabled:font-light disabled:hover:border-0 dark:hover:border-white",
                   date && date.isSame(browsingDate.date(day.date), "day")
-                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
-                    : !day.disabled
-                    ? " bg-gray-100 dark:bg-gray-600 dark:text-white"
+                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast disabled:bg-gray-100 disabled:dark:bg-gray-600 disabled:dark:text-white"
                     : ""
                 )}
                 data-testid="day"

apps/web/components/booking/SkeletonLoader.tsx

@@ -2,8 +2,6 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
-import BookingsShell from "@components/BookingsShell";
-
 function SkeletonLoader() {
   return (
     <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -22,10 +20,9 @@ function SkeletonItem() {
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">
-            <SkeletonText width="32" height="5" />
-            <SkeletonText width="16" height="4" />
+            <SkeletonText width="16" height="5" />
+            <SkeletonText width="32" height="4" />
           </div>
-          <SkeletonText width="24" height="5" className="ml-4" />
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">

apps/web/components/booking/TimeOptions.tsx

@@ -1,10 +1,11 @@
 import { FC, useEffect, useState } from "react";
-import TimezoneSelect, { ITimezoneOption } from "react-timezone-select";
 
 import Switch from "@calcom/ui/Switch";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
+import TimezoneSelect, { ITimezoneOption } from "@components/ui/form/TimezoneSelect";
+
 import { is24h, timeZone } from "../../lib/clock";
 
 type Props = {

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

@@ -1,81 +1,266 @@
 // Get router variables
 import {
   ArrowLeftIcon,
-  CalendarIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  ClipboardCheckIcon,
   ClockIcon,
   CreditCardIcon,
   GlobeIcon,
   InformationCircleIcon,
+  LocationMarkerIcon,
+  RefreshIcon,
+  VideoCameraIcon,
 } from "@heroicons/react/solid";
+import { EventType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useContracts } from "contexts/contractsContext";
-import dayjs, { Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import utc from "dayjs/plugin/utc";
+import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
+import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
 import {
-  useEmbedStyles,
-  useIsEmbed,
-  useIsBackgroundTransparent,
-  sdkActionManager,
-  useEmbedType,
   useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
+  useEmbedStyles,
+  useIsBackgroundTransparent,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { getRecurringFreq } from "@calcom/lib/recurringStrings";
+import { localStorage } from "@calcom/lib/webstorage";
+import DatePicker from "@calcom/ui/booker/DatePicker";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
-import { BASE_URL, WEBAPP_URL } from "@lib/config/constants";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
-import { parseDate } from "@lib/parseDate";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
+import { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
 import AvailableTimes from "@components/booking/AvailableTimes";
-import DatePicker from "@components/booking/DatePicker";
 import TimeOptions from "@components/booking/TimeOptions";
 import { HeadSeo } from "@components/seo/head-seo";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
-import { AvailabilityPageProps } from "../../../pages/[user]/[type]";
-import { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
+import type { Slot } from "@server/routers/viewer/slots";
+
+import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
+import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
+import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 
-type Props = AvailabilityTeamPageProps | AvailabilityPageProps;
+type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
-const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage, booking }: Props) => {
+export const locationKeyToString = (location: LocationObject, t: TFunction) => {
+  switch (location.type) {
+    case LocationType.InPerson:
+      return location.address || "In Person"; // If disabled address won't exist on the object
+    case LocationType.Link:
+      return location.link || "Link"; // If disabled link won't exist on the object
+    case LocationType.Phone:
+      return t("your_number");
+    case LocationType.UserPhone:
+      return t("phone_call");
+    case LocationType.GoogleMeet:
+      return "Google Meet";
+    case LocationType.Zoom:
+      return "Zoom";
+    case LocationType.Daily:
+      return "Cal Video";
+    case LocationType.Jitsi:
+      return "Jitsi";
+    case LocationType.Huddle01:
+      return "Huddle Video";
+    case LocationType.Tandem:
+      return "Tandem";
+    case LocationType.Teams:
+      return "Microsoft Teams";
+    default:
+      return null;
+  }
+};
+
+const GoBackToPreviousPage = ({ slug }: { slug: string }) => {
   const router = useRouter();
-  const isEmbed = useIsEmbed();
-  const { rescheduleUid } = router.query;
-  const { isReady, Theme } = useTheme(profile.theme);
-  const { t, i18n } = useLocale();
-  const { contracts } = useContracts();
-  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
-  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
-  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  let isBackgroundTransparent = useIsBackgroundTransparent();
-  useExposePlanGlobally(plan);
+  const [previousPage, setPreviousPage] = useState<string>();
   useEffect(() => {
-    if (eventType.metadata.smartContractAddress) {
-      const eventOwner = eventType.users[0];
-      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        router.replace(`/${eventOwner.username}`);
-    }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+    setPreviousPage(document.referrer);
+  }, []);
 
-  const selectedDate = useMemo(() => {
+  return previousPage === `${WEBAPP_URL}/${slug}` ? (
+    <div className="flex h-full flex-col justify-end">
+      <ArrowLeftIcon
+        className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white"
+        onClick={() => router.back()}
+      />
+      <p className="sr-only">Go Back</p>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+const useSlots = ({
+  eventTypeId,
+  startTime,
+  endTime,
+}: {
+  eventTypeId: number;
+  startTime: Date;
+  endTime: Date;
+}) => {
+  const { data, isLoading } = trpc.useQuery([
+    "viewer.slots.getSchedule",
+    {
+      eventTypeId,
+      startTime: startTime.toISOString(),
+      endTime: endTime.toISOString(),
+    },
+  ]);
+
+  return { slots: data?.slots || {}, isLoading };
+};
+
+const SlotPicker = ({
+  eventType,
+  timezoneDropdown,
+  timeFormat,
+  timeZone,
+  recurringEventCount,
+  seatsPerTimeSlot,
+  weekStart = 0,
+}: {
+  eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
+  timezoneDropdown: JSX.Element;
+  timeFormat: string;
+  timeZone?: string;
+  seatsPerTimeSlot?: number;
+  recurringEventCount?: number;
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}) => {
+  const { selectedDate, setSelectedDate } = useDateSelected({ timeZone });
+
+  const { i18n, isLocaleReady } = useLocale();
+  const [startDate, setStartDate] = useState(new Date());
+
+  useEffect(() => {
+    if (dayjs(selectedDate).startOf("month").isAfter(dayjs())) {
+      setStartDate(dayjs(selectedDate).startOf("month").toDate());
+    }
+  }, [selectedDate]);
+
+  const { slots, isLoading } = useSlots({
+    eventTypeId: eventType.id,
+    startTime: startDate,
+    endTime: dayjs(startDate).endOf("month").toDate(),
+  });
+
+  const [times, setTimes] = useState<Slot[]>([]);
+
+  useEffect(() => {
+    if (selectedDate && slots[yyyymmdd(selectedDate)]) {
+      setTimes(slots[yyyymmdd(selectedDate)]);
+    }
+  }, [selectedDate, slots]);
+
+  return (
+    <>
+      <DatePicker
+        isLoading={isLoading}
+        className={
+          "mt-8 w-full sm:mt-0 sm:min-w-[455px] " +
+          (selectedDate
+            ? "sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 "
+            : "sm:pl-4")
+        }
+        locale={isLocaleReady ? i18n.language : "en"}
+        includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
+        selected={selectedDate}
+        onChange={setSelectedDate}
+        onMonthChange={setStartDate}
+        weekStart={weekStart}
+      />
+
+      <div className="mt-4 ml-1 block sm:hidden">{timezoneDropdown}</div>
+
+      {selectedDate && (
+        <AvailableTimes
+          slots={times}
+          date={dayjs(selectedDate)}
+          timeFormat={timeFormat}
+          eventTypeId={eventType.id}
+          eventTypeSlug={eventType.slug}
+          seatsPerTimeSlot={seatsPerTimeSlot}
+          recurringCount={recurringEventCount}
+          schedulingType={eventType.schedulingType}
+          users={[]}
+        />
+      )}
+    </>
+  );
+};
+
+function TimezoneDropdown({
+  onChangeTimeFormat,
+  onChangeTimeZone,
+}: {
+  onChangeTimeFormat: (newTimeFormat: string) => void;
+  onChangeTimeZone: (newTimeZone: string) => void;
+}) {
+  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
+
+  useEffect(() => {
+    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectTimeZone = (newTimeZone: string) => {
+    timeZone(newTimeZone);
+    onChangeTimeZone(newTimeZone);
+    setIsTimeOptionsOpen(false);
+  };
+
+  const handleToggle24hClock = (is24hClock: boolean) => {
+    onChangeTimeFormat(is24hClock ? "HH:mm" : "h:mma");
+  };
+
+  return (
+    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+      <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
+        <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+        {timeZone()}
+        {isTimeOptionsOpen ? (
+          <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
+        ) : (
+          <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
+        )}
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
+
+const useDateSelected = ({ timeZone }: { timeZone?: string }) => {
+  const router = useRouter();
+  const [selectedDate, _setSelectedDate] = useState<Date>();
+
+  useEffect(() => {
     const dateString = asStringOrNull(router.query.date);
     if (dateString) {
       const offsetString = dateString.substr(11, 14); // hhmm
@@ -90,57 +275,87 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
           (offsetMinute !== "" ? parseInt(offsetMinute) : 0));
 
       const date = dayjs(dateString.substr(0, 10)).utcOffset(utcOffsetInMinutes, true);
-      return date.isValid() ? date : null;
+      if (date.isValid()) {
+        setSelectedDate(date.toDate());
+      }
     }
-    return null;
-  }, [router.query.date]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  if (selectedDate) {
-    // Let iframe take the width available due to increase in max-width
-    sdkActionManager?.fire("__refreshWidth", {});
-  }
-  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
-
-  const telemetry = useTelemetry();
-
-  useEffect(() => {
-    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
-
-    telemetry.withJitsu((jitsu) =>
-      jitsu.track(
-        telemetryEventTypes.pageView,
-        collectPageParameters("availability", { isTeamBooking: document.URL.includes("team/") })
-      )
-    );
-  }, [telemetry]);
-
-  const changeDate = (newDate: Dayjs) => {
+  const setSelectedDate = (newDate: Date) => {
     router.replace(
       {
         query: {
           ...router.query,
-          date: newDate.format("YYYY-MM-DDZZ"),
+          date: dayjs(newDate).tz(timeZone, true).format("YYYY-MM-DDZZ"),
         },
       },
       undefined,
-      {
-        shallow: true,
-      }
+      { shallow: true }
     );
+    _setSelectedDate(newDate);
   };
 
-  const handleSelectTimeZone = (selectedTimeZone: string): void => {
-    if (selectedDate) {
-      changeDate(selectedDate.tz(selectedTimeZone, true));
+  return { selectedDate, setSelectedDate };
+};
+
+const AvailabilityPage = ({ profile, eventType }: Props) => {
+  const router = useRouter();
+  const isEmbed = useIsEmbed();
+  const { rescheduleUid } = router.query;
+  const { Theme } = useTheme(profile.theme);
+  const { t } = useLocale();
+  const { contracts } = useContracts();
+  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
+  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
+  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
+  const isBackgroundTransparent = useIsBackgroundTransparent();
+
+  const [timeZone, setTimeZone] = useState<string>();
+  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+
+  useEffect(() => {
+    setIsAvailableTimesVisible(!!router.query.date);
+  }, [router.query.date]);
+
+  // TODO: Improve this;
+  useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
+
+  // TODO: this needs to be extracted elsewhere
+  useEffect(() => {
+    if (eventType.metadata.smartContractAddress) {
+      const eventOwner = eventType.users[0];
+      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
+        router.replace(`/${eventOwner.username}`);
     }
-    timeZone(selectedTimeZone);
-    setIsTimeOptionsOpen(false);
-  };
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
-  const handleToggle24hClock = (is24hClock: boolean) => {
-    setTimeFormat(is24hClock ? "HH:mm" : "h:mma");
-  };
+  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
+
+  const telemetry = useTelemetry();
+  useEffect(() => {
+    if (top !== window) {
+      //page_view will be collected automatically by _middleware.ts
+      telemetry.event(
+        telemetryEventTypes.embedView,
+        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
+      );
+    }
+  }, [telemetry]);
+
+  // Recurring event sidebar requires more space
+  const maxWidth = isAvailableTimesVisible
+    ? recurringEventCount
+      ? "max-w-6xl"
+      : "max-w-5xl"
+    : recurringEventCount
+    ? "max-w-4xl"
+    : "max-w-3xl";
+
+  const timezoneDropdown = (
+    <TimezoneDropdown onChangeTimeFormat={setTimeFormat} onChangeTimeZone={setTimeZone} />
+  );
 
   return (
     <>
@@ -158,52 +373,89 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed
-              ? classNames(selectedDate ? "max-w-5xl" : "max-w-3xl")
-              : "transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24 " +
-                  (selectedDate ? "max-w-5xl" : "max-w-3xl")
+              ? classNames(maxWidth)
+              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
           )}>
-          {isReady && (
-            <div
-              style={availabilityDatePickerEmbedStyles}
-              className={classNames(
-                isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
-                "border-bookinglightest rounded-md md:border",
-                isEmbed ? "mx-auto" : selectedDate ? "max-w-5xl" : "max-w-3xl"
-              )}>
-              {/* mobile: details */}
-              <div className="block p-4 sm:p-8 md:hidden">
-                <div>
-                  <AvatarGroup
-                    border="border-2 dark:border-gray-800 border-white"
-                    items={
-                      [
-                        { image: profile.image, alt: profile.name, title: profile.name },
-                        ...eventType.users
-                          .filter((user) => user.name !== profile.name)
-                          .map((user) => ({
-                            title: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
-                            alt: user.name || undefined,
-                          })),
-                      ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                    }
-                    size={9}
-                    truncateAfter={5}
-                  />
-                  <div className="mt-4">
-                    <p className="text-sm font-medium text-black dark:text-white">{profile.name}</p>
-                    <div className="mt-2 gap-2 dark:text-gray-100">
-                      <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
-                        {eventType.title}
-                      </h1>
+          <div
+            style={availabilityDatePickerEmbedStyles}
+            className={classNames(
+              isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
+              "border-bookinglightest rounded-md md:border",
+              isEmbed ? "mx-auto" : maxWidth
+            )}>
+            {/* mobile: details */}
+            <div className="block p-4 sm:p-8 md:hidden">
+              <div>
+                <AvatarGroup
+                  border="border-2 dark:border-gray-800 border-white"
+                  items={
+                    [
+                      { image: profile.image, alt: profile.name, title: profile.name },
+                      ...eventType.users
+                        .filter((user) => user.name !== profile.name)
+                        .map((user) => ({
+                          title: user.name,
+                          image: `${CAL_URL}/${user.username}/avatar.png`,
+                          alt: user.name || undefined,
+                        })),
+                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+                  }
+                  size={9}
+                  truncateAfter={5}
+                />
+                <div className="mt-4">
+                  <p className="break-words text-sm font-medium text-black dark:text-white">{profile.name}</p>
+                  <div className="mt-2 gap-2 dark:text-gray-100">
+                    <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
+                      {eventType.title}
+                    </h1>
+                    <div className="flex flex-col space-y-4">
                       {eventType?.description && (
-                        <p className="text-bookinglight mb-2 dark:text-white">
+                        <p className="text-gray-600 dark:text-white">
                           <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           {eventType.description}
                         </p>
                       )}
-                      <p className="text-bookinglight mb-2 dark:text-white">
-                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+                      {eventType?.requiresConfirmation && (
+                        <p className="text-gray-600 dark:text-white">
+                          <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          {t("requires_confirmation")}
+                        </p>
+                      )}
+                      {eventType.locations.length === 1 && (
+                        <p className="text-gray-600 dark:text-white">
+                          {Object.values(AppStoreLocationType).includes(
+                            eventType.locations[0].type as unknown as AppStoreLocationType
+                          ) ? (
+                            <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                          ) : (
+                            <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                          )}
+
+                          {locationKeyToString(eventType.locations[0], t)}
+                        </p>
+                      )}
+                      {eventType.locations.length > 1 && (
+                        <div className="flex-warp flex text-gray-600 dark:text-white">
+                          <div className="mr-[10px] ml-[2px] -mt-1 ">
+                            <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                          </div>
+                          <p>
+                            {eventType.locations.map((el, i, arr) => {
+                              return (
+                                <span key={el.type}>
+                                  {locationKeyToString(el, t)}{" "}
+                                  {arr.length - 1 !== i && (
+                                    <span className="font-light"> {t("or_lowercase")} </span>
+                                  )}
+                                </span>
+                              );
+                            })}
+                          </p>
+                        </div>
+                      )}
+                      <p className="text-gray-600 dark:text-white">
+                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                         {eventType.length} {t("minutes")}
                       </p>
                       {eventType.price > 0 && (
@@ -218,66 +470,164 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                           </IntlProvider>
                         </div>
                       )}
-                      <div className="md:hidden">
-                        {booking?.startTime && rescheduleUid && (
-                          <div>
-                            <p
-                              className="mt-8 mb-2 text-gray-600 dark:text-white"
-                              data-testid="former_time_p_mobile">
-                              {t("former_time")}
+                      {!rescheduleUid && eventType.recurringEvent && (
+                        <div className="text-gray-600 dark:text-white">
+                          <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <div className="ml-[27px]">
+                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                             </p>
-                            <p className="text-gray-500 line-through dark:text-white">
-                              <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                              {typeof booking.startTime === "string" &&
-                                parseDate(dayjs(booking.startTime), i18n)}
+                            <input
+                              type="number"
+                              min="1"
+                              max={eventType.recurringEvent.count}
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              defaultValue={eventType.recurringEvent.count}
+                              onChange={(event) => {
+                                setRecurringEventCount(parseInt(event?.target.value));
+                              }}
+                            />
+                            <p className="inline text-gray-600 dark:text-white">
+                              {t("occurrence", {
+                                count: recurringEventCount,
+                              })}
                             </p>
                           </div>
-                        )}
+                        </div>
+                      )}
+                      {timezoneDropdown}
+
+                      <div className="md:hidden">
+                        {/* Temp disabled booking?.startTime && rescheduleUid && (
+                            <div>
+                              <p
+                                className="mt-8 text-gray-600 dark:text-white"
+                                data-testid="former_time_p_mobile">
+                                {t("former_time")}
+                              </p>
+                              <p className="text-gray-500 line-through dark:text-white">
+                                <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                                {typeof booking.startTime === "string" &&
+                                  parseDate(dayjs(booking.startTime), i18n)}
+                              </p>
+                            </div>
+                          )*/}
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
+            </div>
 
-              <div className="px-4 sm:flex sm:p-4 sm:py-5">
-                <div
-                  className={
-                    "hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
-                    (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
-                  }>
-                  <AvatarGroup
-                    border="border-2 dark:border-gray-800 border-white"
-                    items={
-                      [
-                        { image: profile.image, alt: profile.name, title: profile.name },
-                        ...eventType.users
-                          .filter((user) => user.name !== profile.name)
-                          .map((user) => ({
-                            title: user.name,
-                            alt: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
-                          })),
-                      ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                    }
-                    size={10}
-                    truncateAfter={3}
-                  />
-                  <h2 className="mt-3 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
-                  <h1 className="font-cal mb-4 text-xl font-semibold text-gray-900 dark:text-white">
-                    {eventType.title}
-                  </h1>
+            <div className="px-4 sm:flex sm:p-4 sm:py-5">
+              <div
+                className={
+                  "hidden overflow-hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
+                  (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
+                }>
+                <AvatarGroup
+                  border="border-2 dark:border-gray-800 border-white"
+                  items={
+                    [
+                      { image: profile.image, alt: profile.name, title: profile.name },
+                      ...eventType.users
+                        .filter((user) => user.name !== profile.name)
+                        .map((user) => ({
+                          title: user.name,
+                          alt: user.name,
+                          image: `${CAL_URL}/${user.username}/avatar.png`,
+                        })),
+                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+                  }
+                  size={10}
+                  truncateAfter={3}
+                />
+                <h2 className="mt-3 break-words font-medium text-gray-500 dark:text-gray-300">
+                  {profile.name}
+                </h2>
+                <h1 className="font-cal mb-4 break-words text-xl font-semibold text-gray-900 dark:text-white">
+                  {eventType.title}
+                </h1>
+                <div className="flex flex-col space-y-4">
                   {eventType?.description && (
-                    <p className="text-bookinglight mb-2 dark:text-white">
-                      <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      {eventType.description}
+                    <div className="flex text-gray-600 dark:text-white">
+                      <div>
+                        <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      </div>
+                      <p>{eventType.description}</p>
+                    </div>
+                  )}
+                  {eventType?.requiresConfirmation && (
+                    <div className="flex text-gray-600 dark:text-white">
+                      <div>
+                        <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      </div>
+                      {t("requires_confirmation")}
+                    </div>
+                  )}
+                  {eventType.locations.length === 1 && (
+                    <p className="text-gray-600 dark:text-white">
+                      {Object.values(AppStoreLocationType).includes(
+                        eventType.locations[0].type as unknown as AppStoreLocationType
+                      ) ? (
+                        <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      ) : (
+                        <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      )}
+
+                      {locationKeyToString(eventType.locations[0], t)}
                     </p>
                   )}
-                  <p className="text-bookinglight mb-2 dark:text-white">
+                  {eventType.locations.length > 1 && (
+                    <div className="flex-warp flex text-gray-600 dark:text-white">
+                      <div className="mr-[10px] ml-[2px] -mt-1 ">
+                        <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                      </div>
+                      <p>
+                        {eventType.locations.map((el, i, arr) => {
+                          return (
+                            <span key={el.type}>
+                              {locationKeyToString(el, t)}{" "}
+                              {arr.length - 1 !== i && (
+                                <span className="font-light"> {t("or_lowercase")} </span>
+                              )}
+                            </span>
+                          );
+                        })}
+                      </p>
+                    </div>
+                  )}
+                  <p className="text-gray-600 dark:text-white">
                     <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                     {eventType.length} {t("minutes")}
                   </p>
+                  {!rescheduleUid && eventType.recurringEvent && (
+                    <div className="text-gray-600 dark:text-white">
+                      <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                      <div className="ml-[27px]">
+                        <p className="mb-1 -ml-2 inline px-2 py-1">
+                          {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                        </p>
+                        <input
+                          type="number"
+                          min="1"
+                          max={eventType.recurringEvent.count}
+                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          defaultValue={eventType.recurringEvent.count}
+                          onChange={(event) => {
+                            setRecurringEventCount(parseInt(event?.target.value));
+                          }}
+                        />
+                        <p className="inline text-gray-600 dark:text-white">
+                          {t("occurrence", {
+                            count: recurringEventCount,
+                          })}
+                        </p>
+                      </div>
+                    </div>
+                  )}
                   {eventType.price > 0 && (
-                    <p className="mb-1 -ml-2 px-2 py-1 text-gray-600 dark:text-white">
+                    <p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
                       <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       <IntlProvider locale="en">
                         <FormattedNumber
@@ -288,21 +638,15 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                       </IntlProvider>
                     </p>
                   )}
+                  {timezoneDropdown}
+                </div>
 
-                  <TimezoneDropdown />
-                  {previousPage === `${WEBAPP_URL}/${profile.slug}` && (
-                    <div className="flex h-full flex-col justify-end">
-                      <ArrowLeftIcon
-                        className="h-4 w-4 text-black  transition-opacity hover:cursor-pointer dark:text-white"
-                        onClick={() => router.back()}
-                      />
-                      <p className="sr-only">Go Back</p>
-                    </div>
-                  )}
-                  {booking?.startTime && rescheduleUid && (
+                <GoBackToPreviousPage slug={profile.slug || ""} />
+
+                {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-2 text-gray-600 dark:text-white"
+                        className="mt-4 mb-3 text-gray-600 dark:text-white"
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
@@ -311,69 +655,23 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>
-                  )}
-                </div>
-
-                <DatePicker
-                  date={selectedDate}
-                  periodType={eventType?.periodType}
-                  periodStartDate={eventType?.periodStartDate}
-                  periodEndDate={eventType?.periodEndDate}
-                  periodDays={eventType?.periodDays}
-                  periodCountCalendarDays={eventType?.periodCountCalendarDays}
-                  onDatePicked={changeDate}
-                  workingHours={workingHours}
-                  weekStart={profile.weekStart || "Sunday"}
-                  eventLength={eventType.length}
-                  minimumBookingNotice={eventType.minimumBookingNotice}
-                />
-
-                <div className="mt-4 ml-1 block sm:hidden">
-                  <TimezoneDropdown />
-                </div>
-
-                {selectedDate && (
-                  <AvailableTimes
-                    timeFormat={timeFormat}
-                    minimumBookingNotice={eventType.minimumBookingNotice}
-                    eventTypeId={eventType.id}
-                    eventTypeSlug={eventType.slug}
-                    slotInterval={eventType.slotInterval}
-                    eventLength={eventType.length}
-                    date={selectedDate}
-                    users={eventType.users}
-                    schedulingType={eventType.schedulingType ?? null}
-                    beforeBufferTime={eventType.beforeEventBuffer}
-                    afterBufferTime={eventType.afterEventBuffer}
-                  />
-                )}
+                  )*/}
               </div>
+              <SlotPicker
+                eventType={eventType}
+                timezoneDropdown={timezoneDropdown}
+                timeZone={timeZone}
+                timeFormat={timeFormat}
+                seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                recurringEventCount={recurringEventCount}
+              />
             </div>
-          )}
+          </div>
           {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
         </main>
       </div>
     </>
   );
-
-  function TimezoneDropdown() {
-    return (
-      <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="min-w-32 mb-1 -ml-2 px-2 py-1 text-left text-gray-600 dark:text-white">
-          <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-          {timeZone()}
-          {isTimeOptionsOpen ? (
-            <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
-          ) : (
-            <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
-          )}
-        </Collapsible.Trigger>
-        <Collapsible.Content>
-          <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
-        </Collapsible.Content>
-      </Collapsible.Root>
-    );
-  }
 };
 
 export default AvailabilityPage;

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

@@ -2,8 +2,11 @@ import {
   CalendarIcon,
   ClockIcon,
   CreditCardIcon,
+  ExclamationCircleIcon,
   ExclamationIcon,
   InformationCircleIcon,
+  ClipboardCheckIcon,
+  RefreshIcon,
 } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType } from "@prisma/client";
@@ -18,29 +21,31 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
 import { useMutation } from "react-query";
+import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
 import {
-  useIsEmbed,
-  useEmbedStyles,
-  useIsBackgroundTransparent,
-  useEmbedType,
   useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
+  useIsBackgroundTransparent,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { createPaymentLink } from "@calcom/stripe/client";
 import { Button } from "@calcom/ui/Button";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
 import useTheme from "@lib/hooks/useTheme";
-import { LocationType } from "@lib/location";
+import { LocationObject, LocationType } from "@lib/location";
 import createBooking from "@lib/mutations/bookings/create-booking";
-import { parseDate } from "@lib/parseDate";
+import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
+import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 
@@ -52,12 +57,23 @@ import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
+declare global {
+  // eslint-disable-next-line no-var
+  var web3: {
+    currentProvider: {
+      selectedAddress: string;
+    };
+  };
+}
+
 /** These are like 40kb that not every user needs */
 const PhoneInput = dynamic(
   () => import("@components/ui/form/PhoneInput")
 ) as unknown as typeof PhoneInputType;
 
-type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
+type BookingPageProps = (BookPageProps | TeamBookingPageProps | HashLinkPageProps) & {
+  locationLabels: Record<LocationType, string>;
+};
 
 type BookingFormValues = {
   name: string;
@@ -66,9 +82,11 @@ type BookingFormValues = {
   locationType?: LocationType;
   guests?: string[];
   phone?: string;
+  hostPhoneNumber?: string; // Maybe come up with a better way to name this to distingish between two types of phone numbers
   customInputs?: {
-    [key: string]: string;
+    [key: string]: string | boolean;
   };
+  rescheduleReason?: string;
 };
 
 const BookingPage = ({
@@ -76,6 +94,7 @@ const BookingPage = ({
   booking,
   profile,
   isDynamicGroupBooking,
+  recurringEventCount,
   locationLabels,
   hasHashedBookingLink,
   hashedLink,
@@ -88,26 +107,38 @@ const BookingPage = ({
   const { contracts } = useContracts();
   const { data: session } = useSession();
   const isBackgroundTransparent = useIsBackgroundTransparent();
+  const telemetry = useTelemetry();
+
+  useEffect(() => {
+    if (top !== window) {
+      //page_view will be collected automatically by _middleware.ts
+      telemetry.event(
+        telemetryEventTypes.embedView,
+        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     if (eventType.metadata.smartContractAddress) {
       const eventOwner = eventType.users[0];
 
       if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        /* @ts-ignore */
         router.replace(`/${eventOwner.username}`);
     }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
-      const { attendees, paymentUid } = responseData;
+      const { id, attendees, paymentUid } = responseData;
       if (paymentUid) {
         return await router.push(
           createPaymentLink({
             paymentUid,
             date,
             name: attendees[0].name,
+            email: attendees[0].email,
             absolute: false,
           })
         );
@@ -135,6 +166,40 @@ const BookingPage = ({
           email: attendees[0].email,
           location,
           eventName: profile.eventName || "",
+          bookingId: id,
+          isSuccessBookingPage: true,
+        },
+      });
+    },
+  });
+
+  const recurringMutation = useMutation(createRecurringBooking, {
+    onSuccess: async (responseData = []) => {
+      const { attendees = [], id, recurringEventId } = responseData[0] || {};
+      const location = (function humanReadableLocation(location) {
+        if (!location) {
+          return;
+        }
+        if (location.includes("integration")) {
+          return t("web_conferencing_details_to_follow");
+        }
+        return location;
+      })(responseData[0].location);
+
+      return router.push({
+        pathname: "/success",
+        query: {
+          date,
+          type: eventType.id,
+          eventSlug: eventType.slug,
+          recur: recurringEventId,
+          user: profile.slug,
+          reschedule: !!rescheduleUid,
+          name: attendees[0].name,
+          email: attendees[0].email,
+          location,
+          eventName: profile.eventName || "",
+          bookingId: id,
         },
       });
     },
@@ -148,10 +213,9 @@ const BookingPage = ({
 
   const eventTypeDetail = { isWeb3Active: false, ...eventType };
 
-  type Location = { type: LocationType; address?: string; link?: string };
   // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
-  const locations: Location[] = useMemo(
-    () => (eventType.locations as Location[]) || [],
+  const locations: LocationObject[] = useMemo(
+    () => (eventType.locations as LocationObject[]) || [],
     [eventType.locations]
   );
 
@@ -161,10 +225,8 @@ const BookingPage = ({
     }
   }, [router.query.guest]);
 
-  const telemetry = useTelemetry();
-
   const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
-  const loggedInIsOwner = eventType?.users[0]?.name === session?.user?.name;
+  const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
   const guestListEmails = !isDynamicGroupBooking
     ? booking?.attendees.slice(1).map((attendee) => attendee.email)
     : [];
@@ -172,8 +234,8 @@ const BookingPage = ({
   const defaultValues = () => {
     if (!rescheduleUid) {
       return {
-        name: loggedInIsOwner ? "" : session?.user?.name || (router.query.name as string) || "",
-        email: loggedInIsOwner ? "" : session?.user?.email || (router.query.email as string) || "",
+        name: (router.query.name as string) || (!loggedInIsOwner && session?.user?.name) || "",
+        email: (router.query.email as string) || (!loggedInIsOwner && session?.user?.email) || "",
         notes: (router.query.notes as string) || "",
         guests: ensureArray(router.query.guest) as string[],
         customInputs: eventType.customInputs.reduce(
@@ -192,11 +254,23 @@ const BookingPage = ({
     if (!primaryAttendee) {
       return {};
     }
+
+    const customInputType = booking.customInputs;
     return {
       name: primaryAttendee.name || "",
       email: primaryAttendee.email || "",
       guests: guestListEmails,
       notes: booking.description || "",
+      rescheduleReason: "",
+      customInputs: eventType.customInputs.reduce(
+        (customInputs, input) => ({
+          ...customInputs,
+          [input.id]: booking.customInputs
+            ? booking.customInputs[input.label as keyof typeof customInputType]
+            : "",
+        }),
+        {}
+      ),
     };
   };
 
@@ -225,7 +299,9 @@ const BookingPage = ({
     })(),
   });
 
-  const getLocationValue = (booking: Pick<BookingFormValues, "locationType" | "phone">) => {
+  const getLocationValue = (
+    booking: Pick<BookingFormValues, "locationType" | "phone" | "hostPhoneNumber">
+  ) => {
     const { locationType } = booking;
     switch (locationType) {
       case LocationType.Phone: {
@@ -237,20 +313,34 @@ const BookingPage = ({
       case LocationType.Link: {
         return locationInfo(locationType)?.link || "";
       }
+      case LocationType.UserPhone: {
+        return locationInfo(locationType)?.hostPhoneNumber || "";
+      }
       // Catches all other location types, such as Google Meet, Zoom etc.
       default:
         return selectedLocation || "";
     }
   };
 
-  const bookEvent = (booking: BookingFormValues) => {
-    telemetry.withJitsu((jitsu) =>
-      jitsu.track(
-        telemetryEventTypes.bookingConfirmed,
-        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
-      )
+  // Calculate the booking date(s)
+  let recurringStrings: string[] = [],
+    recurringDates: Date[] = [];
+  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
+    [recurringStrings, recurringDates] = parseRecurringDates(
+      {
+        startDate: date,
+        recurringEvent: eventType.recurringEvent,
+        recurringCount: parseInt(recurringEventCount.toString()),
+      },
+      i18n
     );
+  }
 
+  const bookEvent = (booking: BookingFormValues) => {
+    telemetry.event(
+      top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
+      { isTeamBooking: document.URL.includes("team/") }
+    );
     // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
     // <...url>&metadata[user_id]=123 will be send as a custom input field as the hidden type.
 
@@ -265,40 +355,74 @@ const BookingPage = ({
         {}
       );
 
-    let web3Details;
+    let web3Details: Record<"userWallet" | "userSignature", string> | undefined;
     if (eventTypeDetail.metadata.smartContractAddress) {
       web3Details = {
-        // @ts-ignore
         userWallet: window.web3.currentProvider.selectedAddress,
         userSignature: contracts[(eventTypeDetail.metadata.smartContractAddress || null) as number],
       };
     }
 
-    mutation.mutate({
-      ...booking,
-      web3Details,
-      start: dayjs(date).format(),
-      end: dayjs(date).add(eventType.length, "minute").format(),
-      eventTypeId: eventType.id,
-      eventTypeSlug: eventType.slug,
-      timeZone: timeZone(),
-      language: i18n.language,
-      rescheduleUid,
-      user: router.query.user,
-      location: getLocationValue(
-        booking.locationType ? booking : { ...booking, locationType: selectedLocation }
-      ),
-      metadata,
-      customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-        label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
-        value: booking.customInputs![inputId],
-      })),
-      hasHashedBookingLink,
-      hashedLink,
-    });
+    if (recurringDates.length) {
+      // Identify set of bookings to one intance of recurring event to support batch changes
+      const recurringEventId = uuidv4();
+      const recurringBookings = recurringDates.map((recurringDate) => ({
+        ...booking,
+        web3Details,
+        start: dayjs(recurringDate).format(),
+        end: dayjs(recurringDate).add(eventType.length, "minute").format(),
+        eventTypeId: eventType.id,
+        eventTypeSlug: eventType.slug,
+        recurringEventId,
+        // Added to track down the number of actual occurrences selected by the user
+        recurringCount: recurringDates.length,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      }));
+      recurringMutation.mutate(recurringBookings);
+    } else {
+      mutation.mutate({
+        ...booking,
+        web3Details,
+        start: dayjs(date).format(),
+        end: dayjs(date).add(eventType.length, "minute").format(),
+        eventTypeId: eventType.id,
+        eventTypeSlug: eventType.slug,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        bookingUid: router.query.bookingUid as string,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      });
+    }
   };
 
   const disableInput = !!rescheduleUid;
+  const disabledExceptForOwner = disableInput && !loggedInIsOwner;
+  const inputClassName =
+    "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
 
   return (
     <div>
@@ -331,7 +455,7 @@ const BookingPage = ({
               "main overflow-hidden",
               isEmbed ? "" : "border border-gray-200",
               isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
-              "rounded-md sm:border sm:dark:border-gray-600"
+              "rounded-md dark:border-gray-600 sm:border"
             )}>
             <div className="px-4 py-5 sm:flex sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
@@ -353,12 +477,33 @@ const BookingPage = ({
                 <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
                   {eventType.title}
                 </h1>
+                {eventType.seatsPerTimeSlot && (
+                  <p
+                    className={`${
+                      booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                        ? "text-rose-600"
+                        : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                        ? "text-yellow-500"
+                        : "text-emerald-400"
+                    } mb-2`}>
+                    {booking
+                      ? eventType.seatsPerTimeSlot - booking.attendees.length
+                      : eventType.seatsPerTimeSlot}{" "}
+                    / {eventType.seatsPerTimeSlot} {t("seats_available")}
+                  </p>
+                )}
                 {eventType?.description && (
                   <p className="text-bookinglight mb-2 dark:text-white">
                     <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                     {eventType.description}
                   </p>
                 )}
+                {eventType?.requiresConfirmation && (
+                  <p className="text-bookinglight mb-2 dark:text-white">
+                    <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    {t("requires_confirmation")}
+                  </p>
+                )}
                 <p className="text-bookinglight mb-2 dark:text-white">
                   <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                   {eventType.length} {t("minutes")}
@@ -375,10 +520,40 @@ const BookingPage = ({
                     </IntlProvider>
                   </p>
                 )}
-                <p className="text-bookinghighlight mb-4">
-                  <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                  {parseDate(date, i18n)}
-                </p>
+                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                  <div className="mb-3 text-gray-600 dark:text-white">
+                    <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                    <p className="mb-1 -ml-2 inline px-2 py-1">
+                      {getEveryFreqFor({
+                        t,
+                        recurringEvent: eventType.recurringEvent,
+                        recurringCount: recurringEventCount,
+                      })}
+                    </p>
+                  </div>
+                )}
+                <div className="text-bookinghighlight mb-4 flex">
+                  <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                  <div className="-mt-1">
+                    {(rescheduleUid || !eventType.recurringEvent?.freq) &&
+                      parseDate(dayjs(date).tz(timeZone()), i18n)}
+                    {!rescheduleUid &&
+                      eventType.recurringEvent?.freq &&
+                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                      <div className="flex">
+                        <Tooltip
+                          content={recurringStrings.slice(5).map((aDate, key) => (
+                            <p key={key}>{aDate}</p>
+                          ))}>
+                          <p className="text-gray-600 dark:text-white">
+                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
+                </div>
                 {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
                   <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
                     {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
@@ -409,10 +584,7 @@ const BookingPage = ({
                         name="name"
                         id="name"
                         required
-                        className={classNames(
-                          "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
-                          disableInput ? "bg-gray-200 dark:text-gray-500" : ""
-                        )}
+                        className={inputClassName}
                         placeholder={t("example_name")}
                         disabled={disableInput}
                       />
@@ -429,13 +601,21 @@ const BookingPage = ({
                         {...bookingForm.register("email")}
                         required
                         className={classNames(
-                          "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
-                          disableInput ? "bg-gray-200 dark:text-gray-500" : ""
+                          inputClassName,
+                          bookingForm.formState.errors.email
+                            ? "border-red-700 focus:ring-red-700"
+                            : " border-gray-300  dark:border-gray-900"
                         )}
                         placeholder="you@example.com"
                         type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
                         disabled={disableInput}
                       />
+                      {bookingForm.formState.errors.email && (
+                        <div className="mt-2 flex items-center text-sm text-red-700 ">
+                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                          <p>{t("email_validation_error")}</p>
+                        </div>
+                      )}
                     </div>
                   </div>
                   {locations.length > 1 && (
@@ -496,12 +676,9 @@ const BookingPage = ({
                             })}
                             id={"custom_" + input.id}
                             rows={3}
-                            className={classNames(
-                              "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
-                              disableInput ? "bg-gray-200 dark:text-gray-500" : ""
-                            )}
+                            className={inputClassName}
                             placeholder={input.placeholder}
-                            disabled={disableInput}
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.TEXT && (
@@ -511,9 +688,9 @@ const BookingPage = ({
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                            className={inputClassName}
                             placeholder={input.placeholder}
-                            disabled={disableInput}
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.NUMBER && (
@@ -523,8 +700,9 @@ const BookingPage = ({
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                            className={inputClassName}
                             placeholder=""
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.BOOL && (
@@ -535,8 +713,9 @@ const BookingPage = ({
                                 required: input.required,
                               })}
                               id={"custom_" + input.id}
-                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
                               placeholder=""
+                              disabled={disabledExceptForOwner}
                             />
                             <label
                               htmlFor={"custom_" + input.id}
@@ -616,26 +795,36 @@ const BookingPage = ({
                     <label
                       htmlFor="notes"
                       className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("additional_notes")}
+                      {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
                     </label>
-                    <textarea
-                      {...bookingForm.register("notes")}
-                      id="notes"
-                      name="notes"
-                      rows={3}
-                      className={classNames(
-                        "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
-                        disableInput ? "bg-gray-200 dark:text-gray-500" : ""
-                      )}
-                      placeholder={t("share_additional_notes")}
-                      disabled={disableInput}
-                    />
+                    {rescheduleUid ? (
+                      <textarea
+                        {...bookingForm.register("rescheduleReason")}
+                        id="rescheduleReason"
+                        name="rescheduleReason"
+                        rows={3}
+                        className={inputClassName}
+                        placeholder={t("reschedule_placeholder")}
+                        disabled={disabledExceptForOwner}
+                      />
+                    ) : (
+                      <textarea
+                        {...bookingForm.register("notes")}
+                        id="notes"
+                        name="notes"
+                        rows={3}
+                        className={inputClassName}
+                        placeholder={t("share_additional_notes")}
+                        disabled={disabledExceptForOwner}
+                      />
+                    )}
                   </div>
+
                   <div className="flex items-start space-x-2 rtl:space-x-reverse">
                     <Button
                       type="submit"
                       data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
-                      loading={mutation.isLoading}>
+                      loading={mutation.isLoading || recurringMutation.isLoading}>
                       {rescheduleUid ? t("reschedule") : t("confirm")}
                     </Button>
                     <Button color="secondary" type="button" onClick={() => router.back()}>
@@ -643,22 +832,8 @@ const BookingPage = ({
                     </Button>
                   </div>
                 </Form>
-                {mutation.isError && (
-                  <div
-                    data-testid="booking-fail"
-                    className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
-                    <div className="flex">
-                      <div className="flex-shrink-0">
-                        <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
-                      </div>
-                      <div className="ltr:ml-3 rtl:mr-3">
-                        <p className="text-sm text-yellow-700">
-                          {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
-                          {(mutation.error as HttpError)?.message}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
+                {(mutation.isError || recurringMutation.isError) && (
+                  <ErrorMessage error={mutation.error || recurringMutation.error} />
                 )}
               </div>
             </div>
@@ -670,3 +845,24 @@ const BookingPage = ({
 };
 
 export default BookingPage;
+
+function ErrorMessage({ error }: { error: unknown }) {
+  const { t } = useLocale();
+  const { query: { rescheduleUid } = {} } = useRouter();
+
+  return (
+    <div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
+      <div className="flex">
+        <div className="flex-shrink-0">
+          <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+        </div>
+        <div className="ltr:ml-3 rtl:mr-3">
+          <p className="text-sm text-yellow-700">
+            {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
+            {error instanceof HttpError || error instanceof Error ? error.message : "Unknown error"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/dialog/ConfirmationDialogContent.tsx

@@ -3,15 +3,16 @@ import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/Button";
 import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;
   confirmBtnText?: string;
   cancelBtnText?: string;
+  isLoading?: boolean;
+  loadingText?: string;
   onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   title: string;
   variety?: "danger" | "warning" | "success";
@@ -25,6 +26,8 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
     confirmBtn = null,
     confirmBtnText = t("confirm"),
     cancelBtnText = t("cancel"),
+    loadingText = t("loading"),
+    isLoading = false,
     onConfirm,
     children,
   } = props;
@@ -59,10 +62,14 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
         </div>
       </div>
       <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
-        <DialogClose onClick={onConfirm} asChild>
-          {confirmBtn || <Button color="primary">{confirmBtnText}</Button>}
+        <DialogClose disabled={isLoading} onClick={onConfirm} asChild>
+          {confirmBtn || (
+            <Button color="primary" loading={isLoading}>
+              {isLoading ? loadingText : confirmBtnText}
+            </Button>
+          )}
         </DialogClose>
-        <DialogClose asChild>
+        <DialogClose disabled={isLoading} asChild>
           <Button color="secondary">{cancelBtnText}</Button>
         </DialogClose>
       </div>

apps/web/components/dialog/DeleteStripeDialogContent.tsx

@@ -0,0 +1,75 @@
+import { ExclamationIcon } from "@heroicons/react/outline";
+import { CheckIcon } from "@heroicons/react/solid";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import React, { PropsWithChildren } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/Button";
+import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
+
+export type DeleteStripeDialogContentProps = {
+  cancelAllBookingsBtnText?: string;
+  removeBtnText?: string;
+  cancelBtnText?: string;
+  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  onRemove?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  title: string;
+  variety?: "danger" | "warning" | "success";
+};
+
+export default function DeleteStripeDialogContent(props: PropsWithChildren<DeleteStripeDialogContentProps>) {
+  const { t } = useLocale();
+  const {
+    title,
+    variety,
+    cancelAllBookingsBtnText,
+    removeBtnText,
+    cancelBtnText = t("cancel"),
+    onConfirm,
+    onRemove,
+    children,
+  } = props;
+
+  return (
+    <DialogContent>
+      <div className="flex">
+        {variety && (
+          <div className="mt-0.5 ltr:mr-3">
+            {variety === "danger" && (
+              <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
+                <ExclamationIcon className="h-5 w-5 text-red-600" />
+              </div>
+            )}
+            {variety === "warning" && (
+              <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
+                <ExclamationIcon className="h-5 w-5 text-orange-600" />
+              </div>
+            )}
+            {variety === "success" && (
+              <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
+                <CheckIcon className="h-5 w-5 text-green-600" />
+              </div>
+            )}
+          </div>
+        )}
+        <div>
+          <DialogPrimitive.Title className="font-cal text-xl text-gray-900">{title}</DialogPrimitive.Title>
+          <DialogPrimitive.Description className="text-sm text-neutral-500">
+            {children}
+          </DialogPrimitive.Description>
+        </div>
+      </div>
+      <div className="mt-5 flex flex-row-reverse gap-x-2 sm:mt-8">
+        <DialogClose onClick={onConfirm} asChild>
+          <Button color="alert">{cancelAllBookingsBtnText}</Button>
+        </DialogClose>
+        <DialogClose onClick={onRemove} asChild>
+          <Button color="alert2">{removeBtnText}</Button>
+        </DialogClose>
+        <DialogClose asChild>
+          <Button color="secondary">{cancelBtnText}</Button>
+        </DialogClose>
+      </div>
+    </DialogContent>
+  );
+}

apps/web/components/dialog/EditLocationDialog.tsx

@@ -0,0 +1,336 @@
+import { LocationMarkerIcon } from "@heroicons/react/solid";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { isValidPhoneNumber } from "libphonenumber-js";
+import dynamic from "next/dynamic";
+import { useEffect } from "react";
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Form } from "@calcom/ui/form/fields";
+
+import { QueryCell } from "@lib/QueryCell";
+import { linkValueToString } from "@lib/linkValueToString";
+import { LocationType } from "@lib/location";
+import { LocationOptionsToString } from "@lib/locationOptions";
+import { inferQueryOutput, trpc } from "@lib/trpc";
+
+import CheckboxField from "@components/ui/form/CheckboxField";
+import type PhoneInputType from "@components/ui/form/PhoneInput";
+import Select from "@components/ui/form/Select";
+
+const PhoneInput = dynamic(
+  () => import("@components/ui/form/PhoneInput")
+) as unknown as typeof PhoneInputType;
+
+type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
+
+type OptionTypeBase = {
+  label: string;
+  value: LocationType;
+  disabled?: boolean;
+};
+
+type LocationFormValues = {
+  locationType: LocationType;
+  locationAddress?: string;
+  locationLink?: string;
+  locationPhoneNumber?: string;
+  displayLocationPublicly?: boolean;
+};
+interface ISetLocationDialog {
+  saveLocation: (newLocationType: LocationType, details: { [key: string]: string }) => void;
+  selection?: OptionTypeBase;
+  booking?: BookingItem;
+  defaultValues?: {
+    type: LocationType;
+    address?: string | undefined;
+    link?: string | undefined;
+    hostPhoneNumber?: string | undefined;
+    displayLocationPublicly?: boolean | undefined;
+  }[];
+  setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
+  isOpenDialog: boolean;
+  setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
+}
+
+export const EditLocationDialog = (props: ISetLocationDialog) => {
+  const {
+    saveLocation,
+    selection,
+    booking,
+    setShowLocationModal,
+    isOpenDialog,
+    defaultValues,
+    setSelectedLocation,
+  } = props;
+  const { t } = useLocale();
+  const locationsQuery = trpc.useQuery(["viewer.locationOptions"]);
+
+  useEffect(() => {
+    if (selection) {
+      locationFormMethods.setValue("locationType", selection?.value);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selection]);
+
+  const locationFormSchema = z.object({
+    locationType: z.string(),
+    locationAddress: z.string().optional(),
+    locationLink: z.string().url().optional(),
+    displayLocationPublicly: z.boolean().optional(),
+    locationPhoneNumber: z
+      .string()
+      .refine((val) => isValidPhoneNumber(val))
+      .optional(),
+  });
+
+  const locationFormMethods = useForm<LocationFormValues>({
+    mode: "onSubmit",
+    resolver: zodResolver(locationFormSchema),
+  });
+
+  const selectedLocation = useWatch({
+    control: locationFormMethods.control,
+    name: "locationType",
+  });
+
+  const LocationOptions =
+    selectedLocation === LocationType.InPerson ? (
+      <>
+        <div>
+          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+            {t("set_address_place")}
+          </label>
+          <div className="mt-1">
+            <input
+              type="text"
+              {...locationFormMethods.register("locationAddress")}
+              id="address"
+              required
+              className="block w-full rounded-sm border-gray-300 text-sm"
+              defaultValue={
+                defaultValues
+                  ? defaultValues.find(
+                      (location: { type: LocationType }) => location.type === LocationType.InPerson
+                    )?.address
+                  : undefined
+              }
+            />
+          </div>
+          {!booking && (
+            <div className="mt-3">
+              <Controller
+                name="displayLocationPublicly"
+                control={locationFormMethods.control}
+                render={() => (
+                  <CheckboxField
+                    defaultChecked={
+                      defaultValues
+                        ? defaultValues.find((location) => location.type === LocationType.InPerson)
+                            ?.displayLocationPublicly
+                        : undefined
+                    }
+                    description={t("display_location_label")}
+                    onChange={(e) =>
+                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
+                    }
+                    informationIconText={t("display_location_info_badge")}></CheckboxField>
+                )}
+              />
+            </div>
+          )}
+        </div>
+      </>
+    ) : selectedLocation === LocationType.Link ? (
+      <div>
+        <label htmlFor="link" className="block text-sm font-medium text-gray-700">
+          {t("set_link_meeting")}
+        </label>
+        <div className="mt-1">
+          <input
+            type="text"
+            {...locationFormMethods.register("locationLink")}
+            id="link"
+            required
+            className="block w-full rounded-sm border-gray-300 sm:text-sm"
+            defaultValue={
+              defaultValues
+                ? defaultValues.find(
+                    (location: { type: LocationType }) => location.type === LocationType.Link
+                  )?.link
+                : undefined
+            }
+          />
+          {locationFormMethods.formState.errors.locationLink && (
+            <p className="mt-1 text-sm text-red-500">{t("url_start_with_https")}</p>
+          )}
+        </div>
+        {!booking && (
+          <div className="mt-3">
+            <Controller
+              name="displayLocationPublicly"
+              control={locationFormMethods.control}
+              render={() => (
+                <CheckboxField
+                  description={t("display_location_label")}
+                  defaultChecked={
+                    defaultValues
+                      ? defaultValues.find((location) => location.type === LocationType.Link)
+                          ?.displayLocationPublicly
+                      : undefined
+                  }
+                  onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)}
+                  informationIconText={t("display_location_info_badge")}></CheckboxField>
+              )}
+            />
+          </div>
+        )}
+      </div>
+    ) : selectedLocation === LocationType.UserPhone ? (
+      <div>
+        <label htmlFor="phonenumber" className="block text-sm font-medium text-gray-700">
+          {t("set_your_phone_number")}
+          {locationFormMethods.formState?.errors?.locationPhoneNumber?.message}
+        </label>
+        <div className="mt-1">
+          <PhoneInput<LocationFormValues>
+            control={locationFormMethods.control}
+            name="locationPhoneNumber"
+            required
+            id="locationPhoneNumber"
+            placeholder={t("host_phone_number")}
+            defaultValue={
+              defaultValues
+                ? defaultValues.find(
+                    (location: { type: LocationType }) => location.type === LocationType.UserPhone
+                  )?.hostPhoneNumber
+                : undefined
+            }
+          />
+          {locationFormMethods.formState.errors.locationPhoneNumber && (
+            <p className="mt-1 text-sm text-red-500">Invalid input</p>
+          )}
+        </div>
+      </div>
+    ) : (
+      <p className="text-sm">{LocationOptionsToString(selectedLocation, t)}</p>
+    );
+
+  return (
+    <Dialog open={isOpenDialog}>
+      <DialogContent asChild>
+        <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
+          <div className="mb-4 sm:flex sm:items-start">
+            <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
+              <LocationMarkerIcon className="text-primary-600 h-6 w-6" />
+            </div>
+            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+                {t("edit_location")}
+              </h3>
+              {!booking && (
+                <p className="text-sm text-gray-400">{t("this_input_will_shown_booking_this_event")}</p>
+              )}
+            </div>
+            <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"></div>
+          </div>
+          {booking && (
+            <>
+              <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
+              <p className="mb-2 ml-1 text-sm text-black">{linkValueToString(booking.location, t)}</p>
+            </>
+          )}
+          <Form
+            form={locationFormMethods}
+            handleSubmit={async (values) => {
+              const { locationType: newLocation, displayLocationPublicly } = values;
+
+              let details = {};
+              if (newLocation === LocationType.InPerson) {
+                details = {
+                  address: values.locationAddress,
+                  displayLocationPublicly,
+                };
+              }
+              if (newLocation === LocationType.Link) {
+                details = { link: values.locationLink, displayLocationPublicly };
+              }
+              if (newLocation === LocationType.UserPhone) {
+                details = { hostPhoneNumber: values.locationPhoneNumber };
+              }
+
+              saveLocation(newLocation, details);
+              setShowLocationModal(false);
+              setSelectedLocation?.(undefined);
+              locationFormMethods.unregister([
+                "locationType",
+                "locationLink",
+                "locationAddress",
+                "locationPhoneNumber",
+              ]);
+            }}>
+            <QueryCell
+              query={locationsQuery}
+              success={({ data: locationOptions }) => {
+                if (!locationOptions.length) return null;
+                return (
+                  <Controller
+                    name="locationType"
+                    control={locationFormMethods.control}
+                    render={() => (
+                      <Select
+                        maxMenuHeight={150}
+                        name="location"
+                        defaultValue={selection}
+                        options={
+                          booking
+                            ? locationOptions.filter((location) => location.value !== "phone")
+                            : locationOptions
+                        }
+                        isSearchable={false}
+                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+                        onChange={(val) => {
+                          if (val) {
+                            locationFormMethods.setValue("locationType", val.value);
+                            locationFormMethods.unregister([
+                              "locationLink",
+                              "locationAddress",
+                              "locationPhoneNumber",
+                            ]);
+                            locationFormMethods.clearErrors([
+                              "locationLink",
+                              "locationPhoneNumber",
+                              "locationAddress",
+                            ]);
+                            setSelectedLocation?.(val);
+                          }
+                        }}
+                      />
+                    )}
+                  />
+                );
+              }}
+            />
+            {selectedLocation && LocationOptions}
+            <div className="mt-4 flex justify-end space-x-2">
+              <Button
+                onClick={() => {
+                  setShowLocationModal(false);
+                  setSelectedLocation?.(undefined);
+                  locationFormMethods.unregister("locationType");
+                }}
+                type="button"
+                color="secondary">
+                {t("cancel")}
+              </Button>
+              <Button type="submit">{t("update")}</Button>
+            </div>
+          </Form>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,4 @@
-import { ClockIcon, XIcon } from "@heroicons/react/outline";
+import { ClockIcon } from "@heroicons/react/outline";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
 import { useMutation } from "react-query";
@@ -77,7 +77,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             />
 
             <DialogFooter>
-              <DialogClose>
+              <DialogClose asChild>
                 <Button color="secondary">{t("cancel")}</Button>
               </DialogClose>
               <Button

apps/web/components/eventtype/CreateEventType.tsx

@@ -104,6 +104,11 @@ export default function CreateEventTypeButton(props: Props) {
         showToast(message, "error");
       }
 
+      if (err.data?.code === "BAD_REQUEST") {
+        const message = `${err.data.code}: URL already exists.`;
+        showToast(message, "error");
+      }
+
       if (err.data?.code === "UNAUTHORIZED") {
         const message = `${err.data.code}: You are not able to create this event`;
         showToast(message, "error");

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -1,21 +1,23 @@
-import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
-import { SchedulingType } from "@prisma/client";
-import { Prisma } from "@prisma/client";
-import React from "react";
+import {
+  ClipboardCheckIcon,
+  ClockIcon,
+  CreditCardIcon,
+  RefreshIcon,
+  UserIcon,
+  UsersIcon,
+} from "@heroicons/react/solid";
+import { Prisma, SchedulingType } from "@prisma/client";
+import { useMemo } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
+import { parseRecurringEvent } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { baseEventTypeSelect } from "@calcom/prisma/selects";
+
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
 
 const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
-  select: {
-    id: true,
-    length: true,
-    price: true,
-    currency: true,
-    schedulingType: true,
-    description: true,
-  },
+  select: baseEventTypeSelect,
 });
 
 type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
@@ -28,6 +30,11 @@ export type EventTypeDescriptionProps = {
 export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
   const { t } = useLocale();
 
+  const recurringEvent = useMemo(
+    () => parseRecurringEvent(eventType.recurringEvent),
+    [eventType.recurringEvent]
+  );
+
   return (
     <>
       <div className={classNames("text-neutral-500 dark:text-white", className)}>
@@ -37,26 +44,34 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
-          <li className="flex whitespace-nowrap">
-            <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
+          <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
             {eventType.length}m
           </li>
           {eventType.schedulingType ? (
-            <li className="flex whitespace-nowrap">
-              <UsersIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="flex whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
+          {recurringEvent?.count && recurringEvent.count > 0 && (
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {t("repeats_up_to", {
+                count: recurringEvent.count,
+              })}
+            </li>
+          )}
           {eventType.price > 0 && (
-            <li className="flex whitespace-nowrap">
-              <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}
@@ -66,6 +81,12 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
               </IntlProvider>
             </li>
           )}
+          {eventType.requiresConfirmation && (
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <ClipboardCheckIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {t("requires_confirmation")}
+            </li>
+          )}
         </ul>
       </div>
     </>

apps/web/components/eventtype/RecurringEventController.tsx

@@ -0,0 +1,141 @@
+import type { FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Frequency } from "@calcom/prisma/zod-utils";
+import { RecurringEvent } from "@calcom/types/Calendar";
+import { Alert } from "@calcom/ui/Alert";
+
+import Select from "@components/ui/form/Select";
+
+type RecurringEventControllerProps = {
+  recurringEvent: RecurringEvent | null;
+  formMethods: UseFormReturn<FormValues>;
+  paymentEnabled: boolean;
+  onRecurringEventDefined: (value: boolean) => void;
+};
+
+export default function RecurringEventController({
+  recurringEvent,
+  formMethods,
+  paymentEnabled,
+  onRecurringEventDefined,
+}: RecurringEventControllerProps) {
+  const { t } = useLocale();
+  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
+
+  /* Just yearly-0, monthly-1 and weekly-2 */
+  const recurringEventFreqOptions = Object.entries(Frequency)
+    .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
+    .map(([key, value]) => ({
+      label: t(`${key.toString().toLowerCase()}`, { count: recurringEventState?.interval }),
+      value: value.toString(),
+    }));
+
+  return (
+    <div className="block items-start sm:flex">
+      <div className="min-w-48 mb-4 sm:mb-0">
+        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
+      </div>
+      <div className={!paymentEnabled ? "w-full" : ""}>
+        {paymentEnabled ? (
+          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
+        ) : (
+          <>
+            <div className="relative flex items-start">
+              <div className="flex h-5 items-center">
+                <input
+                  onChange={(event) => {
+                    onRecurringEventDefined(event?.target.checked);
+                    if (!event?.target.checked) {
+                      formMethods.setValue("recurringEvent", null);
+                      setRecurringEventState(null);
+                    } else {
+                      const newVal = recurringEvent || {
+                        interval: 1,
+                        count: 12,
+                        freq: Frequency.WEEKLY,
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }
+                  }}
+                  type="checkbox"
+                  className="text-primary-600  h-4 w-4 rounded border-gray-300"
+                  defaultChecked={recurringEventState !== null}
+                  data-testid="recurring-event-check"
+                  id="recurringEvent"
+                />
+              </div>
+              <div className="text-sm ltr:ml-3 rtl:mr-3">
+                <label htmlFor="recurringEvent" className="text-neutral-900">
+                  {t("recurring_event_description")}
+                </label>
+              </div>
+            </div>
+            {recurringEventState && (
+              <div data-testid="recurring-event-collapsible" className="mt-4 text-sm">
+                <div className="flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEventState.interval}
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        interval: parseInt(event?.target.value),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                  <Select
+                    options={recurringEventFreqOptions}
+                    value={recurringEventFreqOptions[recurringEventState.freq]}
+                    isSearchable={false}
+                    className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                </div>
+                <div className="mt-4 flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("max")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEventState.count}
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        count: parseInt(event?.target.value),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                  <p className="mr-2 text-neutral-900">
+                    {t("occurrence", {
+                      count: recurringEventState.count,
+                    })}
+                  </p>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/integrations/CalendarListContainer.tsx

@@ -2,18 +2,20 @@ import { Fragment } from "react";
 import { useMutation } from "react-query";
 
 import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
 
 import { QueryCell } from "@lib/QueryCell";
-import { useLocale } from "@lib/hooks/useLocale";
 import { trpc } from "@lib/trpc";
 
+import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
+import SkeletonLoader from "@components/apps/SkeletonLoader";
 
 import DisconnectIntegration from "./DisconnectIntegration";
 import IntegrationListItem from "./IntegrationListItem";
@@ -21,6 +23,7 @@ import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
 
 type Props = {
   onChanged: () => unknown | Promise<unknown>;
+  fromOnboarding?: boolean;
 };
 
 function CalendarSwitch(props: {
@@ -92,10 +95,44 @@ function CalendarSwitch(props: {
   );
 }
 
+function CalendarList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <List>
+          {data.items.map((item) => (
+            <IntegrationListItem
+              key={item.title}
+              title={item.title}
+              imageSrc={item.imageSrc}
+              description={item.description}
+              actions={
+                <InstallAppButton
+                  type={item.type}
+                  render={(buttonProps) => (
+                    <Button color="secondary" {...buttonProps}>
+                      {t("connect")}
+                    </Button>
+                  )}
+                  onChanged={() => props.onChanged()}
+                />
+              }
+            />
+          ))}
+        </List>
+      )}
+    />
+  );
+}
+
 function ConnectedCalendarsList(props: Props) {
   const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
-
+  const { fromOnboarding } = props;
   return (
     <QueryCell
       query={query}
@@ -124,17 +161,22 @@ function ConnectedCalendarsList(props: Props) {
                         onOpenChange={props.onChanged}
                       />
                     }>
-                    <ul className="space-y-2 p-4">
-                      {item.calendars.map((cal) => (
-                        <CalendarSwitch
-                          key={cal.externalId}
-                          externalId={cal.externalId}
-                          title={cal.name || "Nameless calendar"}
-                          type={item.integration.type}
-                          defaultSelected={cal.isSelected}
-                        />
-                      ))}
-                    </ul>
+                    {!fromOnboarding && (
+                      <>
+                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
+                        <ul className="space-y-2 p-4">
+                          {item.calendars.map((cal) => (
+                            <CalendarSwitch
+                              key={cal.externalId}
+                              externalId={cal.externalId}
+                              title={cal.name || "Nameless calendar"}
+                              type={item.integration.type}
+                              defaultSelected={cal.isSelected}
+                            />
+                          ))}
+                        </ul>
+                      </>
+                    )}
                   </IntegrationListItem>
                 ) : (
                   <Alert
@@ -163,43 +205,9 @@ function ConnectedCalendarsList(props: Props) {
   );
 }
 
-function CalendarList(props: Props) {
+export function CalendarListContainer(props: { heading?: boolean; fromOnboarding?: boolean }) {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations"]);
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <List>
-          {data.calendar.items.map((item) => (
-            <IntegrationListItem
-              key={item.title}
-              title={item.title}
-              imageSrc={item.imageSrc}
-              description={item.description}
-              actions={
-                <InstallAppButton
-                  type={item.type}
-                  render={(buttonProps) => (
-                    <Button color="secondary" {...buttonProps}>
-                      {t("connect")}
-                    </Button>
-                  )}
-                  onChanged={() => props.onChanged()}
-                />
-              }
-            />
-          ))}
-        </List>
-      )}
-    />
-  );
-}
-
-export function CalendarListContainer(props: { heading?: false }) {
-  const { t } = useLocale();
-  const { heading = true } = props;
+  const { heading = true, fromOnboarding } = props;
   const utils = trpc.useContext();
   const onChanged = () =>
     Promise.allSettled([
@@ -207,39 +215,66 @@ export function CalendarListContainer(props: { heading?: false }) {
       utils.invalidateQueries(["viewer.connectedCalendars"]),
     ]);
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const installedCalendars = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: true },
+  ]);
   const mutation = trpc.useMutation("viewer.setDestinationCalendar");
-
   return (
-    <>
-      {heading && (
-        <ShellSubHeading
-          className="mt-10 mb-0"
-          title={
-            <SubHeadingTitleWithConnections
-              title="Calendars"
-              numConnections={query.data?.connectedCalendars.length}
-            />
-          }
-          subtitle={t("configure_how_your_event_types_interact")}
-          actions={
-            <div className="sm:min-w-80 block max-w-full">
-              <DestinationCalendarSelector
-                onChange={mutation.mutate}
-                isLoading={mutation.isLoading}
-                value={query.data?.destinationCalendar?.externalId}
-              />
-            </div>
-          }
-        />
-      )}
-      <ConnectedCalendarsList onChanged={onChanged} />
-      {!!query.data?.connectedCalendars.length && (
-        <ShellSubHeading
-          className="mt-6"
-          title={<SubHeadingTitleWithConnections title={t("connect_an_additional_calendar")} />}
-        />
-      )}
-      <CalendarList onChanged={onChanged} />
-    </>
+    <QueryCell
+      query={query}
+      customLoader={<SkeletonLoader className="mt-10" />}
+      success={({ data }) => {
+        return (
+          <>
+            {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
+              <>
+                {heading && (
+                  <ShellSubHeading
+                    className="mt-10 mb-0"
+                    title={
+                      <SubHeadingTitleWithConnections
+                        title="Calendars"
+                        numConnections={data.connectedCalendars.length}
+                      />
+                    }
+                    subtitle={t("configure_how_your_event_types_interact")}
+                    actions={
+                      <div className="flex flex-col xl:flex-row xl:space-x-5">
+                        <div className="sm:min-w-80 block max-w-full">
+                          <DestinationCalendarSelector
+                            onChange={mutation.mutate}
+                            isLoading={mutation.isLoading}
+                            value={data.destinationCalendar?.externalId}
+                          />
+                        </div>
+
+                        {!!data.connectedCalendars.length && (
+                          <div className="sm:min-w-80 inline max-w-full">
+                            <AdditionalCalendarSelector isLoading={mutation.isLoading} />
+                          </div>
+                        )}
+                      </div>
+                    }
+                  />
+                )}
+                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
+              </>
+            )}
+            {fromOnboarding && (
+              <>
+                {!!query.data?.connectedCalendars.length && (
+                  <ShellSubHeading
+                    className="mt-4"
+                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
+                  />
+                )}
+                <CalendarList onChanged={onChanged} />
+              </>
+            )}
+          </>
+        );
+      }}
+    />
   );
 }

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { useMutation } from "react-query";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { ButtonBaseProps } from "@calcom/ui/Button";
 import { Dialog } from "@calcom/ui/Dialog";
@@ -13,6 +14,7 @@ export default function DisconnectIntegration(props: {
   render: (renderProps: ButtonBaseProps) => JSX.Element;
   onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
 }) {
+  const { t } = useLocale();
   const [modalOpen, setModalOpen] = useState(false);
   const mutation = useMutation(
     async () => {
@@ -43,13 +45,13 @@ export default function DisconnectIntegration(props: {
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
         <ConfirmationDialogContent
           variety="danger"
-          title="Disconnect Integration"
-          confirmBtnText="Yes, disconnect integration"
+          title={t("remove_app")}
+          confirmBtnText={t("yes_remove_app")}
           cancelBtnText="Cancel"
           onConfirm={() => {
             mutation.mutate();
           }}>
-          Are you sure you want to disconnect this integration?
+          {t("are_you_sure_you_want_to_remove_this_app")}
         </ConfirmationDialogContent>
       </Dialog>
       {props.render({

apps/web/components/integrations/DisconnectStripeIntegration.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import { useMutation } from "react-query";
+
+import showToast from "@calcom/lib/notification";
+import { ButtonBaseProps } from "@calcom/ui/Button";
+import { Dialog } from "@calcom/ui/Dialog";
+
+import DeleteStripeDialogContent from "@components/dialog/DeleteStripeDialogContent";
+
+export default function DisconnectStripeIntegration(props: {
+  /** Integration credential id */
+  id: number;
+  render: (renderProps: ButtonBaseProps) => JSX.Element;
+  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
+}) {
+  const [modalOpen, setModalOpen] = useState(false);
+  const mutation = useMutation(
+    async (action: string) => {
+      const res = await fetch("/api/integrations", {
+        method: "DELETE",
+        body: JSON.stringify({ id: props.id, action }),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      if (!res.ok) {
+        throw new Error("Something went wrong");
+      }
+      return res.json();
+    },
+    {
+      async onSettled() {
+        await props.onOpenChange(modalOpen);
+      },
+      onSuccess(data) {
+        showToast(data.message, "success");
+        setModalOpen(false);
+      },
+    }
+  );
+  return (
+    <>
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DeleteStripeDialogContent
+          variety="warning"
+          title="Disconnect Stripe Integration"
+          cancelAllBookingsBtnText="Cancel all bookings"
+          removeBtnText="Remove payment"
+          cancelBtnText="Cancel"
+          onConfirm={() => {
+            mutation.mutate("cancel");
+          }}
+          onRemove={() => {
+            mutation.mutate("remove");
+          }}>
+          If you have unpaid and unconfirmed bookings, you must choose to cancel them or remove the required
+          payment field.
+        </DeleteStripeDialogContent>
+      </Dialog>
+      {props.render({
+        onClick() {
+          setModalOpen(true);
+        },
+        disabled: modalOpen,
+        loading: mutation.isLoading,
+      })}
+    </>
+  );
+}

apps/web/components/integrations/IntegrationListItem.tsx

@@ -14,7 +14,10 @@ function IntegrationListItem(props: {
   return (
     <ListItem expanded={!!props.children} className={classNames("flex-col")}>
       <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        {props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />}
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />
+        }
         <div className="flex-grow truncate pl-2">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

@@ -35,7 +35,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
     defaultValues,
   });
   const selectedInputType = useWatch({ name: "type", control });
-  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value)!;
+  const selectedInputOption = inputOptions.find((e) => selectedInputType === e.value);
 
   const onCancel = () => {
     props.onCancel();

apps/web/components/security/ChangePasswordSection.tsx

@@ -61,8 +61,8 @@ const ChangePasswordSection = () => {
           <div className="my-3">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
           </div>
-          <div className="flex">
-            <div className="w-1/2 ltr:mr-2 rtl:ml-2">
+          <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
+            <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
               <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
                 {t("current_password")}
               </label>
@@ -79,7 +79,7 @@ const ChangePasswordSection = () => {
                 />
               </div>
             </div>
-            <div className="ml-2 w-1/2">
+            <div className="w-full sm:w-1/2">
               <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
                 {t("new_password")}
               </label>
@@ -98,7 +98,7 @@ const ChangePasswordSection = () => {
             </div>
           </div>
           {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
-          <div className="flex justify-end py-8">
+          <div className="flex py-8 sm:justify-end">
             <Button color="secondary" type="submit">
               {t("save")}
             </Button>

apps/web/components/security/DisableUserImpersonation.tsx

@@ -0,0 +1,55 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+
+import { trpc } from "@lib/trpc";
+
+import Badge from "@components/ui/Badge";
+
+const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {
+  const utils = trpc.useContext();
+
+  const { t } = useLocale();
+
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: async () => {
+      showToast(t("your_user_profile_updated_successfully"), "success");
+      await utils.invalidateQueries(["viewer.me"]);
+    },
+    async onSettled() {
+      await utils.invalidateQueries(["viewer.i18n"]);
+    },
+  });
+
+  return (
+    <>
+      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
+        <div>
+          <div className="flex flex-row items-center">
+            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
+              {t("user_impersonation_heading")}
+            </h2>
+            <Badge className="ml-2 text-xs" variant={!disableImpersonation ? "success" : "gray"}>
+              {!disableImpersonation ? t("enabled") : t("disabled")}
+            </Badge>
+          </div>
+          <p className="mt-1 text-sm text-gray-500">{t("user_impersonation_description")}</p>
+        </div>
+        <div className="mt-5 sm:mt-0 sm:self-center">
+          <Button
+            type="submit"
+            color="secondary"
+            onClick={() =>
+              !disableImpersonation
+                ? mutation.mutate({ disableImpersonation: true })
+                : mutation.mutate({ disableImpersonation: false })
+            }>
+            {!disableImpersonation ? t("disable") : t("enable")}
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DisableUserImpersonation;

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -150,7 +150,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
         <WithStep step={SetupStep.DisplayQrCode} current={step}>
           <>
             <div className="flex justify-center">
-              <img src={dataUri} />
+              {
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={dataUri} alt="" />
+              }
             </div>
             <p className="text-center font-mono text-xs">{secret}</p>
           </>

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -17,7 +17,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
-      <div className="flex flex-row justify-between truncate pt-9 pl-2">
+      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
@@ -27,7 +27,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
           </div>
           <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
         </div>
-        <div className="self-center">
+        <div className="mt-5 sm:mt-0 sm:self-center">
           <Button
             type="submit"
             color="secondary"

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -1,6 +1,5 @@
 import { MembershipRole } from "@prisma/client";
-import { useState } from "react";
-import React, { SyntheticEvent, useEffect } from "react";
+import { SyntheticEvent, useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
@@ -11,31 +10,44 @@ import ModalContainer from "@components/ui/ModalContainer";
 import Select from "@components/ui/form/Select";
 
 type MembershipRoleOption = {
+  label: string;
   value: MembershipRole;
-  label?: string;
 };
 
-const options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }];
-
 export default function MemberChangeRoleModal(props: {
   isOpen: boolean;
+  currentMember: MembershipRole;
   memberId: number;
   teamId: number;
   initialRole: MembershipRole;
   onExit: () => void;
 }) {
-  useEffect(() => {
-    options.forEach((option, i) => {
-      options[i].label = t(option.value.toLowerCase());
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  const { t } = useLocale();
 
-  const [role, setRole] = useState(
-    options.find((option) => option.value === props.initialRole || MembershipRole.MEMBER)!
+  const options = useMemo(() => {
+    return [
+      {
+        label: t("member"),
+        value: MembershipRole.MEMBER,
+      },
+      {
+        label: t("admin"),
+        value: MembershipRole.ADMIN,
+      },
+      {
+        label: t("owner"),
+        value: MembershipRole.OWNER,
+      },
+    ].filter(({ value }) => value !== MembershipRole.OWNER || props.currentMember === MembershipRole.OWNER);
+  }, [t, props.currentMember]);
+
+  const [role, setRole] = useState<MembershipRoleOption>(
+    options.find((option) => option.value === props.initialRole) || {
+      label: t("member"),
+      value: MembershipRole.MEMBER,
+    }
   );
   const [errorMessage, setErrorMessage] = useState("");
-  const { t } = useLocale();
   const utils = trpc.useContext();
 
   const changeRoleMutation = trpc.useMutation("viewer.teams.changeMemberRole", {
@@ -57,7 +69,6 @@ export default function MemberChangeRoleModal(props: {
       role: role.value,
     });
   }
-
   return (
     <ModalContainer isOpen={props.isOpen} onExit={props.onExit}>
       <>

apps/web/components/team/MemberInvitationModal.tsx

@@ -1,10 +1,10 @@
 import { UserIcon } from "@heroicons/react/outline";
 import { InformationCircleIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
-import React, { useState, useEffect, SyntheticEvent, useMemo } from "react";
+import React, { useState, SyntheticEvent, useMemo } from "react";
 
 import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -16,6 +16,7 @@ import Select from "@components/ui/form/Select";
 type MemberInvitationModalProps = {
   isOpen: boolean;
   team: TeamWithMembers | null;
+  currentMember: MembershipRole;
   onExit: () => void;
 };
 
@@ -24,7 +25,7 @@ type MembershipRoleOption = {
   label?: string;
 };
 
-const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }];
+const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];
 
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
   const [errorMessage, setErrorMessage] = useState("");
@@ -100,7 +101,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               </label>
               <Select
                 defaultValue={options[0]}
-                options={options}
+                options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
                 id="role"
                 name="role"
                 className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"

apps/web/components/team/MemberListItem.tsx

@@ -1,9 +1,10 @@
-import { UserRemoveIcon, PencilIcon } from "@heroicons/react/outline";
-import { ClockIcon, ExternalLinkIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
+import { PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
+import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
-import React, { useState } from "react";
+import { useState } from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
@@ -14,12 +15,12 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { trpc, inferQueryOutput } from "@lib/trpc";
+import useCurrentUserId from "@lib/hooks/useCurrentUserId";
+import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
 import ModalContainer from "@components/ui/ModalContainer";
@@ -49,6 +50,14 @@ export default function MemberListItem(props: Props) {
     },
   });
 
+  const ownersInTeam = () => {
+    const { members } = props.team;
+    const owners = members.filter((member) => member["role"] === MembershipRole.OWNER && member["accepted"]);
+    return owners.length;
+  };
+
+  const currentUserId = useCurrentUserId();
+
   const name =
     props.member.name ||
     (() => {
@@ -65,7 +74,7 @@ export default function MemberListItem(props: Props) {
         <div className="flex w-full flex-col justify-between sm:flex-row">
           <div className="flex">
             <Avatar
-              imageSrc={getPlaceholderAvatar(props.member?.avatar, name)}
+              imageSrc={WEBAPP_URL + "/" + props.member.username + "/avatar.png"}
               alt={name || ""}
               className="h-9 w-9 rounded-full"
             />
@@ -121,8 +130,12 @@ export default function MemberListItem(props: Props) {
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuSeparator className="h-px bg-gray-200" />
-              {(props.team.membership.role === MembershipRole.OWNER ||
-                props.team.membership.role === MembershipRole.ADMIN) && (
+              {((props.team.membership.role === MembershipRole.OWNER &&
+                (props.member.role !== MembershipRole.OWNER ||
+                  ownersInTeam() > 1 ||
+                  props.member.id !== currentUserId)) ||
+                (props.team.membership.role === MembershipRole.ADMIN &&
+                  props.member.role !== MembershipRole.OWNER)) && (
                 <>
                   <DropdownMenuItem>
                     <Button
@@ -165,6 +178,7 @@ export default function MemberListItem(props: Props) {
       {showChangeMemberRoleModal && (
         <MemberChangeRoleModal
           isOpen={showChangeMemberRoleModal}
+          currentMember={props.team.membership.role}
           teamId={props.team?.id}
           memberId={props.member.id}
           initialRole={props.member.role as MembershipRole}
@@ -181,7 +195,7 @@ export default function MemberListItem(props: Props) {
           <div className="space-x-2 border-t py-5 rtl:space-x-reverse">
             <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
             {props.team.membership.role !== MembershipRole.MEMBER && (
-              <Link href={`/settings/teams/${props.team.id}/availability`}>
+              <Link href={`/settings/teams/${props.team.id}/availability`} passHref>
                 <Button color="secondary">{t("Open Team Availability")}</Button>
               </Link>
             )}

apps/web/components/team/TeamList.tsx

@@ -1,6 +1,6 @@
 import showToast from "@calcom/lib/notification";
 
-import { trpc, inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import TeamListItem from "./TeamListItem";
 
@@ -39,7 +39,9 @@ export default function TeamList(props: Props) {
           <TeamListItem
             key={team?.id as number}
             team={team}
-            onActionSelect={(action: string) => selectAction(action, team?.id as number)}></TeamListItem>
+            onActionSelect={(action: string) => selectAction(action, team?.id as number)}
+            isLoading={deleteTeamMutation.isLoading}
+          />
         ))}
       </ul>
     </div>

apps/web/components/team/TeamListItem.tsx

@@ -1,10 +1,10 @@
 import { LogoutIcon } from "@heroicons/react/outline";
 import {
-  ExternalLinkIcon,
-  TrashIcon,
-  LinkIcon,
   DotsHorizontalIcon,
+  ExternalLinkIcon,
+  LinkIcon,
   PencilIcon,
+  TrashIcon,
 } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
@@ -16,15 +16,15 @@ import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import classNames from "@lib/classNames";
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { trpc, inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
 
@@ -34,6 +34,7 @@ interface Props {
   team: inferQueryOutput<"viewer.teams.list">[number];
   key: number;
   onActionSelect: (text: string) => void;
+  isLoading?: boolean;
 }
 
 export default function TeamListItem(props: Props) {
@@ -175,7 +176,10 @@ export default function TeamListItem(props: Props) {
                           variety="danger"
                           title={t("disband_team")}
                           confirmBtnText={t("confirm_disband_team")}
-                          onConfirm={() => props.onActionSelect("disband")}>
+                          isLoading={props.isLoading}
+                          onConfirm={() => {
+                            props.onActionSelect("disband");
+                          }}>
                           {t("disband_team_confirmation_message")}
                         </ConfirmationDialogContent>
                       </Dialog>

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

@@ -5,13 +5,12 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Avatar from "@components/ui/Avatar";
-import Text from "@components/ui/Text";
 
 type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
@@ -52,14 +51,14 @@ const Team = ({ team }: TeamPageProps) => {
           <div>
             <Avatar
               alt={member.name || ""}
-              imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
+              imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
               className="-mt-4 h-12 w-12"
             />
-            <section className="mt-2 w-full space-y-1">
-              <Text variant="title">{member.name}</Text>
-              <Text variant="subtitle" className="">
+            <section className="line-clamp-4 mt-2 w-full space-y-1">
+              <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
+              <p className="text-sm font-normal text-neutral-500 dark:text-white">
                 {member.bio || t("user_from_team", { user: member.name, team: team.name })}
-              </Text>
+              </p>
             </section>
           </div>
         </div>

apps/web/components/ui/AdminRequired.tsx

@@ -3,6 +3,7 @@ import { FC, Fragment } from "react";
 
 type AdminRequiredProps = {
   as?: keyof JSX.IntrinsicElements;
+  children?: React.ReactNode;
 };
 
 export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {

apps/web/components/ui/AuthContainer.tsx

@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 
 import Loader from "@components/Loader";
@@ -16,8 +17,9 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
     <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+      <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.showLogo && (
+          // eslint-disable-next-line @next/next/no-img-element
           <img className="mx-auto h-6" src="/calendso-logo-white-word.svg" alt="Cal.com Logo" />
         )}
         {props.heading && (

apps/web/components/ui/Avatar.tsx

@@ -27,6 +27,7 @@ export default function Avatar(props: AvatarProps) {
       />
       <AvatarPrimitive.Fallback delayMs={600}>
         {gravatarFallbackMd5 && (
+          // eslint-disable-next-line @next/next/no-img-element
           <img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={alt} className={className} />
         )}
       </AvatarPrimitive.Fallback>

apps/web/components/ui/AvatarSSR.tsx

@@ -28,5 +28,6 @@ export function AvatarSSR(props: AvatarProps) {
   } else if (user.emailMd5) {
     imgSrc = defaultAvatarSrc(user.emailMd5);
   }
+  // eslint-disable-next-line @next/next/no-img-element
   return imgSrc ? <img alt={alt} className={className} src={imgSrc}></img> : null;
 }

apps/web/components/ui/ImpersonatingBanner.tsx

@@ -4,9 +4,7 @@ import { Trans } from "next-i18next";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert } from "@calcom/ui/Alert";
 
-type Props = {};
-
-function ImpersonatingBanner({}: Props) {
+function ImpersonatingBanner() {
   const { t } = useLocale();
   const { data } = useSession();
 

apps/web/components/ui/InfoBadge.tsx

@@ -1,6 +1,6 @@
 import { InformationCircleIcon } from "@heroicons/react/solid";
 
-import { Tooltip } from "@components/Tooltip";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (

apps/web/components/ui/ModalContainer.tsx

@@ -1,24 +1,24 @@
 import classNames from "classnames";
-import React from "react";
+import React, { PropsWithChildren } from "react";
 
-import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
 
-interface Props extends React.PropsWithChildren<any> {
-  wide?: boolean;
-  scroll?: boolean;
-  noPadding?: boolean;
-  isOpen: boolean;
-  onExit: () => void;
-}
-
-export default function ModalContainer(props: Props) {
+export default function ModalContainer(
+  props: PropsWithChildren<{
+    wide?: boolean;
+    scroll?: boolean;
+    noPadding?: boolean;
+    isOpen: boolean;
+    onExit: () => void;
+  }>
+) {
   return (
     <div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
       <Dialog open={props.isOpen} onOpenChange={props.onExit}>
         <DialogContent>
           <div
             className={classNames(
-              "inline-block transform bg-white text-left align-bottom transition-all sm:align-middle",
+              "inline-block w-full transform bg-white text-left align-bottom transition-all sm:align-middle",
               {
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,

apps/web/components/ui/PoweredByCal.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -12,16 +12,22 @@ const PoweredByCal = () => {
       <Link href={`https://cal.com?utm_source=embed&utm_medium=powered-by-button`}>
         <a target="_blank" className="text-bookinglight opacity-50 hover:opacity-100 dark:text-white">
           {t("powered_by")}{" "}
-          <img
-            className="relative -mt-px inline h-[10px] w-auto dark:hidden"
-            src="https://cal.com/logo.svg"
-            alt="Cal.com Logo"
-          />
-          <img
-            className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
-            src="https://cal.com/logo-white.svg"
-            alt="Cal.com Logo"
-          />
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              className="relative -mt-px inline h-[10px] w-auto dark:hidden"
+              src="/cal-logo-word.svg"
+              alt="Cal.com Logo"
+            />
+          }
+          {
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              className="relativ -mt-px hidden h-[10px] w-auto dark:inline"
+              src="/cal-logo-word-dark.svg"
+              alt="Cal.com Logo"
+            />
+          }
         </a>
       </Link>
     </div>

apps/web/components/ui/TableActions.tsx

@@ -2,25 +2,38 @@ import { ChevronDownIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
 import React, { FC } from "react";
 
 import Button from "@calcom/ui/Button";
-import Dropdown, { DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@calcom/ui/Dropdown";
+import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
 export type ActionType = {
   id: string;
   icon?: SVGComponent;
+  iconClassName?: string;
   label: string;
   disabled?: boolean;
   color?: "primary" | "secondary";
-} & ({ href?: never; onClick: () => any } | { href?: string; onClick?: never }) & {
-    actions?: ActionType[];
-  };
+} & (
+  | { href: string; onClick?: never; actions?: never }
+  | { href?: never; onClick: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void; actions?: never }
+  | { actions?: ActionType[]; href?: never; onClick?: never }
+);
 
 interface Props {
   actions: ActionType[];
 }
 
-const DropdownActions = ({ actions, actionTrigger }: { actions: ActionType[]; actionTrigger?: any }) => {
+const defaultAction = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+  e.stopPropagation();
+};
+
+const DropdownActions = ({
+  actions,
+  actionTrigger,
+}: {
+  actions: ActionType[];
+  actionTrigger?: React.ReactNode;
+}) => {
   return (
     <Dropdown>
       {!actionTrigger ? (
@@ -40,7 +53,8 @@ const DropdownActions = ({ actions, actionTrigger }: { actions: ActionType[]; ac
               className="w-full rounded-none font-normal"
               href={action.href}
               StartIcon={action.icon}
-              onClick={action.onClick}
+              startIconClassName={action.iconClassName}
+              onClick={action.onClick || defaultAction}
               data-testid={action.id}>
               {action.label}
             </Button>
@@ -67,8 +81,9 @@ const TableActions: FC<Props> = ({ actions }) => {
               key={action.id}
               data-testid={action.id}
               href={action.href}
-              onClick={action.onClick}
+              onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
+              startIconClassName={action.iconClassName}
               {...(action?.actions ? { EndIcon: ChevronDownIcon } : null)}
               disabled={action.disabled}
               color={action.color || "secondary"}>

apps/web/components/ui/Text/Body/Body.tsx

@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Body: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Body;

apps/web/components/ui/Text/Body/index.ts

@@ -1,3 +0,0 @@
-import Body from "./Body";
-
-export default Body;

apps/web/components/ui/Text/Caption/Caption.tsx

@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Caption: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-sm text-gray-500 dark:text-white leading-tight", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Caption;

apps/web/components/ui/Text/Caption/index.ts

@@ -1,3 +0,0 @@
-import Caption from "./Caption";
-
-export default Caption;

apps/web/components/ui/Text/Caption2/Caption2.tsx

@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Caption2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs italic text-gray-500 dark:text-white leading-tight", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Caption2;

apps/web/components/ui/Text/Caption2/index.ts

@@ -1,3 +0,0 @@
-import Caption2 from "./Caption2";
-
-export default Caption2;

apps/web/components/ui/Text/Footnote/Footnote.tsx

@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Footnote: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xs font-medium text-gray-500 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Footnote;