v1.6.2

Merge branch 'production'
# Conflicts: # .vscode/tasks.json # apps/console # apps/web/components/NavTabs.tsx # apps/web/components/SettingsShell.tsx # apps/web/components/booking/BookingListItem.tsx # apps/web/components/ui/TableActions.tsx # apps/web/components/ui/form/CheckboxField.tsx # apps/web/lib/emails/templates/attendee-scheduled-email.ts # apps/web/lib/emails/templates/organizer-scheduled-email.ts # apps/web/lib/types/booking.ts # apps/web/package.json # apps/web/pages/event-types/[type].tsx # apps/web/pages/getting-started.tsx # apps/web/pages/success.tsx # apps/web/public/static/locales/en/common.json # packages/config/package.json # packages/embeds/embed-core/package.json # packages/embeds/embed-react/package.json # packages/embeds/embed-react/src/index.ts # packages/embeds/embed-snippet/package.json # packages/embeds/embed-snippet/src/index.ts # packages/lib/isPrismaObj.ts # packages/lib/package.json # packages/ui/Dialog.tsx # yarn.lock
2022-05-30 12:53:07 -06:00 · 2022-05-30 12:50:31 -06:00 · 2022-05-30 20:17:50 +02:00 · 2022-05-30 17:26:58 +00:00 · 2022-05-30 22:41:05 +05:30 · 2022-05-30 10:23:23 -06:00
305 changed files with 6548 additions and 23509 deletions
@@ -15,6 +15,8 @@
 # - 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
+CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************

 # - DATABASE ************************************************************************************************
@@ -25,6 +27,7 @@ NEXT_PUBLIC_LICENSE_CONSENT=''
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 # Change to 'http://localhost:3001' if running the website simultaneously
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
 NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'

 # To enable SAML login, set both these variables
@@ -70,6 +73,10 @@ 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=
@@ -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. -->
@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
    branches:
      - main
 jobs:
@@ -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
@@ -0,0 +1,110 @@
+name: E2E test - embed
+on:
+  push:
+    branches: [ tests/ci-embed ]
+  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: Testing Embeds
+    strategy:
+      matrix:
+        node: ["14.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
+
+      - 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
@@ -4,7 +4,7 @@ on:
    branches:
      - main
    paths-ignore:
-      - public/static/locales/**
+      - apps/web/public/static/locales/**
 jobs:
  test:
    timeout-minutes: 20
@@ -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
@@ -60,21 +62,11 @@ jobs:
          fetch-depth: 2

      - 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
@@ -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
@@ -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
@@ -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": []
+    }
+  ]
+}
@@ -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
@@ -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://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
+   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
+   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
+   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
+   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>

 <!-- ABOUT THE PROJECT -->
@@ -436,4 +440,4 @@ Special thanks to these amazing projects which help power Cal.com:
  
 <a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>

-Cal.com is an [open startup](https://jitsu.com) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
+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.
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withNextra = require("nextra")({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.js",
@@ -16,14 +16,14 @@
  "license": "MIT",
  "dependencies": {
    "iframe-resizer-react": "^1.1.0",
-    "next": "^12.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"
  }
 }
@@ -10,16 +10,16 @@
  "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": "14.17.6",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
  }
 }
@@ -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 (
    <>
@@ -1,30 +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("recurring"),
-      href: "/bookings/recurring",
-    },
-    {
-      name: t("past"),
-      href: "/bookings/past",
-    },
-    {
-      name: t("cancelled"),
-      href: "/bookings/cancelled",
-    },
-  ];
+const tabs = [
+  {
+    name: "upcoming",
+    href: "/bookings/upcoming",
+  },
+  {
+    name: "recurring",
+    href: "/bookings/recurring",
+  },
+  {
+    name: "past",
+    href: "/bookings/past",
+  },
+  {
+    name: "cancelled",
+    href: "/bookings/cancelled",
+  },
+];

+export default function BookingsShell({ children }: { children: React.ReactNode }) {
  return (
    <>
      <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
@@ -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";
@@ -1,18 +1,18 @@
-import { CodeIcon, EyeIcon, SunIcon, ChevronRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";
+import { ArrowLeftIcon, ChevronRightIcon, CodeIcon, EyeIcon, SunIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { useRouter } from "next/router";
 import { useRef, useState } from "react";
-import { components, ControlProps, SingleValue } from "react-select";
+import { components, ControlProps } from "react-select";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { EventType } from "@calcom/prisma/client";
 import { Button, Switch } from "@calcom/ui";
-import { Dialog, DialogContent, DialogClose } from "@calcom/ui/Dialog";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";

-import { WEBAPP_URL, EMBED_LIB_URL } from "@lib/config/constants";
+import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 import { trpc } from "@lib/trpc";

 import NavTabs from "@components/NavTabs";
@@ -241,7 +241,10 @@ const EmbedNavBar = () => {

  return <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />;
 };
-const ThemeSelectControl = ({ children, ...props }: ControlProps<any, false>) => {
+const ThemeSelectControl = ({
+  children,
+  ...props
+}: ControlProps<{ value: string; label: string }, false>) => {
  return (
    <components.Control {...props}>
      <SunIcon className="h-[32px] w-[32px] text-gray-500" />
@@ -381,7 +384,7 @@ Cal("inline", {
 });
 ${getEmbedUIInstructionString().trim()}`;
    } else if (embedType === "floating-popup") {
-      let floatingButtonArg = {
+      const floatingButtonArg = {
        calLink,
        ...previewState.floatingPopup,
      };
@@ -418,7 +421,7 @@ ${getEmbedUIInstructionString().trim()}`;
    });
  };

-  const previewInstruction = (instruction: { name: string; arg: any }) => {
+  const previewInstruction = (instruction: { name: string; arg: unknown }) => {
    iframeRef.current?.contentWindow?.postMessage(
      {
        mode: "cal:preview",
@@ -544,7 +547,7 @@ ${getEmbedUIInstructionString().trim()}`;
                      value={previewState.inline.width}
                      onChange={(e) => {
                        setPreviewState((previewState) => {
-                          let width = e.target.value || "100%";
+                          const width = e.target.value || "100%";

                          return {
                            ...previewState,
@@ -759,11 +762,11 @@ ${getEmbedUIInstructionString().trim()}`;
                        <ColorPicker
                          defaultValue="#000000"
                          onChange={(color) => {
-                            //@ts-ignore - How to support dynamic palette names?
                            addToPalette({
-                              [palette.name]: color,
+                              [palette.name as keyof typeof previewState["palette"]]: color,
                            });
-                          }}></ColorPicker>
+                          }}
+                        />
                      </div>
                    </Label>
                  ))}
@@ -9,17 +9,17 @@ export default function EmptyScreen({
 }: {
  Icon: SVGComponent;
  headline: string;
-  description: string;
+  description: string | React.ReactElement;
 }) {
  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 className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
+          <Icon className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
        </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>
+          <h2 className="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{headline}</h2>
+          <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">{description}</p>
        </div>
      </div>
    </>
@@ -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
@@ -1,9 +1,13 @@
 import { AdminRequired } from "components/ui/AdminRequired";
+import noop from "lodash/noop";
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React, { ElementType, FC, Fragment, MouseEventHandler } from "react";
+import { FC, Fragment, MouseEventHandler } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";

 import classNames from "@lib/classNames";
+import { SVGComponent } from "@lib/types/SVGComponent";

 export interface NavTabProps {
  tabs: {
@@ -12,7 +16,7 @@ export interface NavTabProps {
    href?: string;
    /** If you want to change query param tabName as per current tab */
    tabName?: string;
-    icon?: ElementType;
+    icon?: SVGComponent;
    adminRequired?: boolean;
  }[];
  linkProps?: Omit<LinkProps, "href">;
@@ -20,6 +24,7 @@ export interface NavTabProps {

 const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
  const router = useRouter();
+  const { t } = useLocale();
  return (
    <>
      <nav
@@ -27,11 +32,11 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
        aria-label="Tabs"
        {...props}>
        {tabs.map((tab) => {
-          let href: string;
-          let isCurrent;
          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
            throw new Error("Use either tabName or href");
          }
+          let href = "";
+          let isCurrent;
          if (tab.href) {
            href = tab.href;
            isCurrent = router.asPath === tab.href;
@@ -39,6 +44,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
            href = "";
            isCurrent = router.query.tabName === tab.tabName;
          }
+
          const onClick: MouseEventHandler = tab.tabName
            ? (e) => {
                e.preventDefault();
@@ -49,12 +55,13 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                  },
                });
              }
-            : () => {};
+            : noop;

          const Component = tab.adminRequired ? AdminRequired : Fragment;
+
          return (
            <Component key={tab.name}>
-              <Link key={tab.name} href={href!} {...linkProps}>
+              <Link key={tab.name} href={href} {...linkProps}>
                <a
                  onClick={onClick}
                  className={classNames(
@@ -73,7 +80,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                      aria-hidden="true"
                    />
                  )}
-                  <span>{tab.name}</span>
+                  <span>{t(tab.name)}</span>
                </a>
              </Link>
            </Component>
@@ -1,48 +1,54 @@
 import { CreditCardIcon, KeyIcon, LockClosedIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
-import React from "react";
+import React, { ComponentProps } from "react";

-import { useLocale } from "@calcom/lib/hooks/useLocale";
+import ErrorBoundary from "@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: "security",
+    href: "/settings/security",
+    icon: KeyIcon,
+  },
+  {
+    name: "teams",
+    href: "/settings/teams",
+    icon: UserGroupIcon,
+  },
+  {
+    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>
  );
 }
@@ -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,6 +32,7 @@ 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";
@@ -206,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"
@@ -347,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" && (
@@ -460,8 +463,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
@@ -473,7 +478,7 @@ function UserDropdown({ small }: { small?: boolean }) {
              // eslint-disable-next-line @next/next/no-img-element
              <img
                className="rounded-full"
-                src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
+                src={WEBAPP_URL + "/" + user?.username + "/avatar.png"}
                alt={user?.username || "Nameless User"}
              />
            }
@@ -503,96 +508,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 />
+        ) : (
+          <>
+            <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>
  );
@@ -1,4 +1,3 @@
-import { StarIcon } from "@heroicons/react/solid";
 import Link from "next/link";

 import Button from "@calcom/ui/Button";
@@ -1,6 +1,6 @@
 import React from "react";

-import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";

 import { ShellSubHeading } from "@components/Shell";

@@ -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,
@@ -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>
@@ -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";
@@ -16,7 +16,7 @@ export function ScheduleListItem({
  isDeleting = false,
 }: {
  schedule: inferQueryOutput<"viewer.availability.list">["schedules"][number];
-  deleteFunction: Function;
+  deleteFunction: ({ scheduleId }: { scheduleId: number }) => void;
  isDeleting: boolean;
 }) {
  const { t, i18n } = useLocale();
@@ -29,6 +29,7 @@ type AvailableTimesProps = {
    username: string | null;
  }[];
  schedulingType: SchedulingType | null;
+  seatsPerTimeSlot?: number | null;
 };

 const AvailableTimes: FC<AvailableTimesProps> = ({
@@ -44,6 +45,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
  schedulingType,
  beforeBufferTime,
  afterBufferTime,
+  seatsPerTimeSlot,
 }) => {
  const { t, i18n } = useLocale();
  const router = useRouter();
@@ -105,18 +107,48 @@ 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
+                {/* 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">
-                    {dayjs.tz(slot.time, timeZone()).format(timeFormat)}
-                  </a>
-                </Link>
+                    )}>
+                    {slot.time.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.tz(slot.time, 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>
            );
          })}
@@ -1,14 +1,23 @@
-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 { Frequency as RRuleFrequency } from "rrule";

 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
@@ -16,9 +25,11 @@ import { TextArea } from "@calcom/ui/form/fields";

 import { HttpError } from "@lib/core/http/error";
 import useMeQuery from "@lib/hooks/useMeQuery";
+import { LocationType } from "@lib/location";
 import { parseRecurringDates } from "@lib/parseDate";
-import { inferQueryOutput, trpc, inferQueryInput } from "@lib/trpc";
+import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";

+import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";

@@ -37,6 +48,7 @@ function BookingListItem(booking: BookingItemProps) {
  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(
@@ -64,6 +76,7 @@ function BookingListItem(booking: BookingItemProps) {
      if (!res.ok) {
        throw new HttpError({ statusCode: res.status });
      }
+      setRejectionDialogIsOpen(false);
    },
    {
      async onSettled() {
@@ -81,7 +94,9 @@ function BookingListItem(booking: BookingItemProps) {
        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
          ? t("reject_all")
          : t("reject"),
-      onClick: () => setRejectionDialogIsOpen(true),
+      onClick: () => {
+        setRejectionDialogIsOpen(true);
+      },
      icon: BanIcon,
      disabled: mutation.isLoading,
    },
@@ -91,7 +106,9 @@ function BookingListItem(booking: BookingItemProps) {
        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
          ? t("confirm_all")
          : t("confirm"),
-      onClick: () => mutation.mutate(true),
+      onClick: () => {
+        mutation.mutate(true);
+      },
      icon: CheckIcon,
      disabled: mutation.isLoading,
      color: "primary",
@@ -106,21 +123,32 @@ function BookingListItem(booking: BookingItemProps) {
      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,
        },
      ],
    },
@@ -137,6 +165,26 @@ function BookingListItem(booking: BookingItemProps) {

  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)
  let recurringStrings: string[] = [];
@@ -150,6 +198,31 @@ function BookingListItem(booking: BookingItemProps) {
      i18n
    );
  }
+
+  const onClick = () => {
+    router.push({
+      pathname: "/success",
+      query: {
+        date: booking.startTime,
+        type: booking.eventType.id,
+        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: booking.location
+          ? booking.location.includes("integration")
+            ? (t("web_conferencing_details_to_follow") as string)
+            : booking.location
+          : "",
+        eventName: booking.eventType.eventName || "",
+        bookingId: booking.id,
+        recur: booking.recurringEventId,
+        reschedule: booking.confirmed,
+        listingStatus: booking.listingStatus,
+        status: booking.status,
+      },
+    });
+  };
  return (
    <>
      <RescheduleDialog
@@ -157,6 +230,12 @@ function BookingListItem(booking: BookingItemProps) {
        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}>
@@ -191,88 +270,103 @@ function BookingListItem(booking: BookingItemProps) {
        </DialogContent>
      </Dialog>

-      <tr className="flex">
-        <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-56">
-          <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 === "upcoming" && (
-                <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>
-                      ))}>
-                      <p className="text-gray-600 dark:text-white">
-                        <RefreshIcon className="mr-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
-                        {`${t("every_for_freq", {
-                          freq: t(
+      <tr className="flex hover:bg-neutral-50">
+        <td
+          className="hidden whitespace-nowrap align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-56"
+          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 === "upcoming" && (
+                  <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>
+                        ))}>
+                        <p className="text-gray-600 dark:text-white">
+                          <RefreshIcon className="mr-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+                          {`${t("every_for_freq", {
+                            freq: t(
+                              `${RRuleFrequency[booking.eventType.recurringEvent.freq]
+                                .toString()
+                                .toLowerCase()}`
+                            ),
+                          })} ${booking.recurringCount} ${t(
                            `${RRuleFrequency[booking.eventType.recurringEvent.freq]
                              .toString()
-                              .toLowerCase()}`
-                          ),
-                        })} ${booking.recurringCount} ${t(
-                          `${RRuleFrequency[booking.eventType.recurringEvent.freq].toString().toLowerCase()}`,
-                          { count: booking.recurringCount }
-                        )}`}
-                      </p>
-                    </Tooltip>
+                              .toLowerCase()}`,
+                            { count: booking.recurringCount }
+                          )}`}
+                        </p>
+                      </Tooltip>
+                    </div>
                  </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" + (booking.rejected ? " line-through" : "")}
+          onClick={onClick}>
+          <div className="cursor-pointer py-4">
+            <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>
+              </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>
+              )}
+              {!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>
+            )}

-          {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">
@@ -0,0 +1,119 @@
+import { XIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+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;
+  };
+  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">
+              <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.withJitsu((jitsu) =>
+                      jitsu.track(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}`
+                      );
+                    } 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 <></>;
+}
@@ -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,
@@ -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 = {
@@ -8,28 +8,31 @@ import {
  CreditCardIcon,
  GlobeIcon,
  InformationCircleIcon,
+  LocationMarkerIcon,
  RefreshIcon,
+  VideoCameraIcon,
 } from "@heroicons/react/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useContracts } from "contexts/contractsContext";
 import dayjs, { 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 { useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { Frequency as RRuleFrequency } from "rrule";

+import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
 import {
  useEmbedStyles,
  useIsEmbed,
  useIsBackgroundTransparent,
  sdkActionManager,
-  useEmbedType,
  useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
+} from "@calcom/embed-core/embed-iframe";
 import classNames from "@calcom/lib/classNames";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";

@@ -58,6 +61,35 @@ dayjs.extend(customParseFormat);

 type Props = AvailabilityTeamPageProps | AvailabilityPageProps;

+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 AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage, booking }: Props) => {
  const router = useRouter();
  const isEmbed = useIsEmbed();
@@ -68,7 +100,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
-  let isBackgroundTransparent = useIsBackgroundTransparent();
+  const isBackgroundTransparent = useIsBackgroundTransparent();
  useExposePlanGlobally(plan);
  useEffect(() => {
    if (eventType.metadata.smartContractAddress) {
@@ -204,7 +236,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                          .filter((user) => user.name !== profile.name)
                          .map((user) => ({
                            title: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
+                            image: `${CAL_URL}/${user.username}/avatar.png`,
                            alt: user.name || undefined,
                          })),
                      ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
@@ -213,9 +245,11 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                    truncateAfter={5}
                  />
                  <div className="mt-4">
-                    <p className="text-sm font-medium text-black dark:text-white">{profile.name}</p>
+                    <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 text-xl font-semibold dark:text-white">
+                      <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
                        {eventType.title}
                      </h1>
                      {eventType?.description && (
@@ -224,6 +258,25 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                          {eventType.description}
                        </p>
                      )}
+                      {eventType.locations.length === 1 && (
+                        <p className="text-bookinglight mb-2 dark:text-white">
+                          <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 && (
+                        <p className="text-bookinglight mb-2 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">
                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                        {eventType.length} {t("minutes")}
@@ -264,7 +317,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
              <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 " +
+                    "hidden overflow-hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
                    (selectedDate ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                  }>
                  <AvatarGroup
@@ -277,15 +330,17 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                          .map((user) => ({
                            title: user.name,
                            alt: user.name,
-                            image: `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}/avatar.png`,
+                            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 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">
+                  <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>
                  {eventType?.description && (
@@ -294,6 +349,38 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                      {eventType.description}
                    </p>
                  )}
+                  {eventType.locations.length === 1 && (
+                    <p className="text-bookinglight mb-2 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="text-bookinglight flex-warp mb-2 flex 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-bookinglight mb-3 dark:text-white">
                    <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                    {eventType.length} {t("minutes")}
@@ -337,12 +424,11 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                      </IntlProvider>
                    </p>
                  )}
-
                  <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"
+                        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>
@@ -395,6 +481,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                    schedulingType={eventType.schedulingType ?? null}
                    beforeBufferTime={eventType.beforeEventBuffer}
                    afterBufferTime={eventType.afterEventBuffer}
+                    seatsPerTimeSlot={eventType.seatsPerTimeSlot}
                  />
                )}
              </div>
@@ -24,7 +24,11 @@ import { Frequency as RRuleFrequency } from "rrule";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";

-import { useEmbedNonStylesConfig, useIsBackgroundTransparent, useIsEmbed } from "@calcom/embed-core";
+import {
+  useEmbedNonStylesConfig,
+  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";
@@ -37,7 +41,7 @@ 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 createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
@@ -52,6 +56,15 @@ 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")
@@ -68,7 +81,7 @@ type BookingFormValues = {
  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;
  };
 };

@@ -107,7 +120,6 @@ const BookingPage = ({
      const eventOwner = eventType.users[0];

      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        /* @ts-ignore */
        router.replace(`/${eventOwner.username}`);
    }
  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
@@ -121,6 +133,7 @@ const BookingPage = ({
            paymentUid,
            date,
            name: attendees[0].name,
+            email: attendees[0].email,
            absolute: false,
          })
        );
@@ -194,10 +207,9 @@ const BookingPage = ({

  const eventTypeDetail = { isWeb3Active: false, ...eventType };

-  type Location = { type: LocationType; address?: string; link?: string; hostPhoneNumber?: 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]
  );

@@ -208,7 +220,7 @@ const BookingPage = ({
  }, [router.query.guest]);

  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)
    : [];
@@ -236,11 +248,22 @@ const BookingPage = ({
    if (!primaryAttendee) {
      return {};
    }
+
+    const customInputType = booking.customInputs;
    return {
      name: primaryAttendee.name || "",
      email: primaryAttendee.email || "",
      guests: guestListEmails,
      notes: booking.description || "",
+      customInputs: eventType.customInputs.reduce(
+        (customInputs, input) => ({
+          ...customInputs,
+          [input.id]: booking.customInputs
+            ? booking.customInputs[input.label as keyof typeof customInputType]
+            : "",
+        }),
+        {}
+      ),
    };
  };

@@ -331,7 +354,6 @@ const BookingPage = ({
    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],
      };
@@ -359,8 +381,8 @@ const BookingPage = ({
        ),
        metadata,
        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
-          value: booking.customInputs![inputId],
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
        })),
        hasHashedBookingLink,
        hashedLink,
@@ -377,14 +399,15 @@ const BookingPage = ({
        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],
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
        })),
        hasHashedBookingLink,
        hashedLink,
@@ -393,6 +416,9 @@ const BookingPage = ({
  };

  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>
@@ -447,6 +473,21 @@ 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" />
@@ -534,10 +575,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}
                      />
@@ -554,8 +592,7 @@ const BookingPage = ({
                        {...bookingForm.register("email")}
                        required
                        className={classNames(
-                          "focus:border-brand block w-full rounded-sm shadow-sm focus:ring-black 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"
@@ -630,12 +667,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 && (
@@ -645,9 +679,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 && (
@@ -657,8 +691,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 && (
@@ -669,8 +704,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}
@@ -757,12 +793,9 @@ const BookingPage = ({
                      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" : ""
-                      )}
+                      className={inputClassName}
                      placeholder={t("share_additional_notes")}
-                      disabled={disableInput}
+                      disabled={disabledExceptForOwner}
                    />
                  </div>
                  <div className="flex items-start space-x-2 rtl:space-x-reverse">
@@ -12,6 +12,7 @@ export type ConfirmationDialogContentProps = {
  confirmBtnText?: string;
  cancelBtnText?: string;
  isLoading?: boolean;
+  loadingText?: string;
  onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
  title: string;
  variety?: "danger" | "warning" | "success";
@@ -25,6 +26,7 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
    confirmBtn = null,
    confirmBtnText = t("confirm"),
    cancelBtnText = t("cancel"),
+    loadingText = t("loading"),
    isLoading = false,
    onConfirm,
    children,
@@ -63,7 +65,7 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
        <DialogClose disabled={isLoading} onClick={onConfirm} asChild>
          {confirmBtn || (
            <Button color="primary" loading={isLoading}>
-              {isLoading ? t("loading") : confirmBtnText}
+              {isLoading ? loadingText : confirmBtnText}
            </Button>
          )}
        </DialogClose>
@@ -1,15 +1,13 @@
 import { ExclamationIcon } from "@heroicons/react/outline";
 import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import React, { PropsWithChildren, ReactNode } from "react";
+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";

-import { useLocale } from "@lib/hooks/useLocale";
-
 export type DeleteStripeDialogContentProps = {
-  confirmBtn?: ReactNode;
  cancelAllBookingsBtnText?: string;
  removeBtnText?: string;
  cancelBtnText?: string;
@@ -24,7 +22,6 @@ export default function DeleteStripeDialogContent(props: PropsWithChildren<Delet
  const {
    title,
    variety,
-    confirmBtn = null,
    cancelAllBookingsBtnText,
    removeBtnText,
    cancelBtnText = t("cancel"),
@@ -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>
+  );
+};
@@ -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";
@@ -1,4 +1,5 @@
 import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
+import type { FormValues } from "pages/event-types/[type]";
 import { useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { Frequency as RRuleFrequency } from "rrule";
@@ -11,9 +12,9 @@ import Select from "@components/ui/form/Select";

 type RecurringEventControllerProps = {
  recurringEvent: RecurringEvent;
-  formMethods: UseFormReturn<any, any>;
+  formMethods: UseFormReturn<FormValues>;
  paymentEnabled: boolean;
-  onRecurringEventDefined: Function;
+  onRecurringEventDefined: (value: boolean) => void;
 };

 export default function RecurringEventController({
@@ -43,9 +44,7 @@ export default function RecurringEventController({
  return (
    <div className="block items-start sm:flex">
      <div className="min-w-48 mb-4 sm:mb-0">
-        <label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
-          {t("recurring_event")}
-        </label>
+        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
      </div>
      <div className={!paymentEnabled ? "w-full" : ""}>
        {paymentEnabled ? (
@@ -78,10 +77,13 @@ export default function RecurringEventController({
                  className="text-primary-600  h-4 w-4 rounded border-gray-300"
                  defaultChecked={recurringEventDefined}
                  data-testid="recurring-event-check"
+                  id="recurringEvent"
                />
              </div>
              <div className="text-sm ltr:ml-3 rtl:mr-3">
-                <p className="text-neutral-900">{t("recurring_event_description")}</p>
+                <label htmlFor="recurringEvent" className="text-neutral-900">
+                  {t("recurring_event_description")}
+                </label>
              </div>
            </div>
            <Collapsible
@@ -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;
@@ -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";
@@ -4,7 +4,7 @@ import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useState } from "react";

-import { WEBSITE_URL } from "@calcom/lib/constants";
+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";
@@ -74,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={WEBSITE_URL + "/" + props.member.username + "/avatar.png"}
+              imageSrc={WEBAPP_URL + "/" + props.member.username + "/avatar.png"}
              alt={name || ""}
              className="h-9 w-9 rounded-full"
            />
@@ -118,7 +118,6 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
        )}
      </div>
      {props.team?.id && props.role !== MembershipRole.MEMBER && (
-        // eslint-disable-next-line @next/next/link-passhref
        <Link href={`/settings/teams/${props.team.id}/availability`}>
          <div className="mt-5 hidden space-y-1 sm:block">
            <LinkIconButton Icon={ClockIcon}>{"View Availability"}</LinkIconButton>
@@ -5,13 +5,12 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";

-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";

 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"];
@@ -37,7 +36,6 @@ const Team = ({ team }: TeamPageProps) => {
    );

    return (
-      // eslint-disable-next-line @next/next/link-passhref
      <Link key={member.id} href={`/${member.username}`}>
        <div className={classes}>
          <ArrowRightIcon
@@ -53,14 +51,14 @@ const Team = ({ team }: TeamPageProps) => {
          <div>
            <Avatar
              alt={member.name || ""}
-              imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
+              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>
@@ -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 }) => {
@@ -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();

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import React 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;
@@ -18,7 +18,7 @@ export default function ModalContainer(props: Props) {
        <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,
@@ -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";

@@ -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"}>
@@ -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;
@@ -1,3 +0,0 @@
-import Body from "./Body";
-
-export default Body;
@@ -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;
@@ -1,3 +0,0 @@
-import Caption from "./Caption";
-
-export default Caption;
@@ -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;
@@ -1,3 +0,0 @@
-import Caption2 from "./Caption2";
-
-export default Caption2;
@@ -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;
@@ -1,3 +0,0 @@
-import Footnote from "./Footnote";
-
-export default Footnote;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Headline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-cal text-xl text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Headline;
@@ -1,3 +0,0 @@
-import Headline from "./Headline";
-
-export default Headline;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Largetitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-cal tracking-wider text-3xl mb-2", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Largetitle;
@@ -1,3 +0,0 @@
-import Largetitle from "./Largetitle";
-
-export default Largetitle;
@@ -1,15 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Overline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(
-    "text-sm capitalize font-medium text-gray-900 dark:text-white",
-    props?.className
-  );
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Overline;
@@ -1,3 +0,0 @@
-import Overline from "./Overline";
-
-export default Overline;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Subheadline: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-xl text-gray-500 dark:text-white leading-relaxed", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Subheadline;
@@ -1,3 +0,0 @@
-import Subheadline from "./Subheadline";
-
-export default Subheadline;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Subtitle: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-sm font-normal text-neutral-500 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Subtitle;
@@ -1,3 +0,0 @@
-import Subtitle from "./Subtitle";
-
-export default Subtitle;
@@ -1,164 +0,0 @@
-/**
- * @deprecated create new a new set of components, waiting for designs
- */
-import React from "react";
-
-import Body from "./Body";
-import Caption from "./Caption";
-import Caption2 from "./Caption2";
-import Footnote from "./Footnote";
-import Headline from "./Headline";
-import Largetitle from "./Largetitle";
-import Overline from "./Overline";
-import Subheadline from "./Subheadline";
-import Subtitle from "./Subtitle";
-import Title from "./Title";
-import Title2 from "./Title2";
-import Title3 from "./Title3";
-
-type Props = {
-  variant?:
-    | "overline"
-    | "caption"
-    | "body"
-    | "caption2"
-    | "footnote"
-    | "headline"
-    | "largetitle"
-    | "subheadline"
-    | "subtitle"
-    | "title"
-    | "title2"
-    | "title3";
-  children: any;
-  text?: string;
-  tx?: string;
-  className?: string;
-};
-
-export type TextProps = {
-  children: any;
-  text?: string;
-  tx?: string;
-  className?: string;
-};
-
-/**
- * static let largeTitle: Font
- * A font with the large title text style.
- *
- * static let title: Font
- * A font with the title text style.
- *
- * static let title2: Font
- * Create a font for second level hierarchical headings.
- *
- * static let title3: Font
- * Create a font for third level hierarchical headings.
- *
- * static let headline: Font
- * A font with the headline text style.
- *
- * static let subheadline: Font
- * A font with the subheadline text style.
- *
- * static let body: Font
- * A font with the body text style.
- *
- * static let callout: Font
- * A font with the callout text style.
- *
- * static let caption: Font
- * A font with the caption text style.
- *
- * static let caption2: Font
- * Create a font with the alternate caption text style.
- *
- * static let footnote: Font
- * A font with the footnote text style.
- */
-
-const Text: React.FunctionComponent<Props> = (props: Props) => {
-  switch (props?.variant) {
-    case "overline":
-      return (
-        <Overline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Overline>
-      );
-    case "body":
-      return (
-        <Body text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Body>
-      );
-    case "caption":
-      return (
-        <Caption text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Caption>
-      );
-    case "caption2":
-      return (
-        <Caption2 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Caption2>
-      );
-    case "footnote":
-      return (
-        <Footnote text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Footnote>
-      );
-    case "headline":
-      return (
-        <Headline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Headline>
-      );
-    case "largetitle":
-      return (
-        <Largetitle text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Largetitle>
-      );
-    case "subheadline":
-      return (
-        <Subheadline text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Subheadline>
-      );
-    case "subtitle":
-      return (
-        <Subtitle text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Subtitle>
-      );
-    case "title":
-      return (
-        <Title text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title>
-      );
-    case "title2":
-      return (
-        <Title2 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title2>
-      );
-    case "title3":
-      return (
-        <Title3 text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Title3>
-      );
-    default:
-      return (
-        <Body text={props?.text} tx={props?.tx} className={props?.className}>
-          {props.children}
-        </Body>
-      );
-  }
-};
-
-export default Text;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("font-medium text-neutral-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title;
@@ -1,3 +0,0 @@
-import Title from "./Title";
-
-export default Title;
@@ -1,12 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title2: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames("text-base font-normal text-gray-900 dark:text-white", props?.className);
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title2;
@@ -1,3 +0,0 @@
-import Title2 from "./Title2";
-
-export default Title2;
@@ -1,15 +0,0 @@
-import classnames from "classnames";
-import React from "react";
-
-import { TextProps } from "../Text";
-
-const Title3: React.FunctionComponent<TextProps> = (props: TextProps) => {
-  const classes = classnames(
-    "text-xs font-semibold leading-tight text-gray-900 dark:text-white",
-    props?.className
-  );
-
-  return <p className={classes}>{props?.text || props.children}</p>;
-};
-
-export default Title3;
@@ -1,3 +0,0 @@
-import Title3 from "./Title3";
-
-export default Title3;
@@ -1,40 +0,0 @@
-import Body from "./Body";
-import Caption from "./Caption";
-import Caption2 from "./Caption2";
-import Footnote from "./Footnote";
-import Headline from "./Headline";
-import Largetitle from "./Largetitle";
-import Overline from "./Overline";
-import Subheadline from "./Subheadline";
-import Subtitle from "./Subtitle";
-import Text from "./Text";
-import Title from "./Title";
-import Title2 from "./Title2";
-import Title3 from "./Title3";
-
-export { Text };
-export default Text;
-
-export { Title };
-
-export { Title2 };
-
-export { Title3 };
-
-export { Largetitle };
-
-export { Subtitle };
-
-export { Headline };
-
-export { Subheadline };
-
-export { Caption };
-
-export { Caption2 };
-
-export { Footnote };
-
-export { Overline };
-
-export { Body };
@@ -1,36 +1,66 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";

+import classNames from "@calcom/lib/classNames";
+
+import InfoBadge from "@components/ui/InfoBadge";
+
 type Props = InputHTMLAttributes<HTMLInputElement> & {
-  label: React.ReactNode;
+  label?: React.ReactNode;
  description: string;
+  descriptionAsLabel?: boolean;
+  informationIconText?: string;
 };

-const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
-  return (
-    <div className="block items-center sm:flex">
-      <div className="min-w-48 mb-4 sm:mb-0">
-        <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
-          {label}
-        </label>
-      </div>
-      <div className="w-full">
-        <div className="relative flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              {...rest}
-              ref={ref}
-              type="checkbox"
-              className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-            />
+const CheckboxField = forwardRef<HTMLInputElement, Props>(
+  ({ label, description, informationIconText, ...rest }, ref) => {
+    const descriptionAsLabel = !label || rest.descriptionAsLabel;
+    return (
+      <div className="block items-center sm:flex">
+        {label && (
+          <div className="min-w-48 mb-4 sm:mb-0">
+            {React.createElement(
+              descriptionAsLabel ? "div" : "label",
+              {
+                className: "flex text-sm font-medium text-neutral-700",
+                ...(!descriptionAsLabel
+                  ? {
+                      htmlFor: rest.id,
+                    }
+                  : {}),
+              },
+              label
+            )}
          </div>
-          <div className="text-sm ltr:ml-3 rtl:mr-3">
-            <p className="text-neutral-900">{description}</p>
+        )}
+        <div className="w-full">
+          <div className="relative flex items-start">
+            {React.createElement(
+              descriptionAsLabel ? "label" : "div",
+              {
+                className: classNames(
+                  "relative flex items-start",
+                  descriptionAsLabel ? "text-neutral-700" : "text-neutral-900"
+                ),
+              },
+              <>
+                <div className="flex h-5 items-center">
+                  <input
+                    {...rest}
+                    ref={ref}
+                    type="checkbox"
+                    className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
+                  />
+                </div>
+                <span className="text-sm ltr:ml-3 rtl:mr-3">{description}</span>
+              </>
+            )}
+            {informationIconText && <InfoBadge content={informationIconText}></InfoBadge>}
          </div>
        </div>
      </div>
-    </div>
-  );
-});
+    );
+  }
+);

 CheckboxField.displayName = "CheckboxField";

@@ -1,57 +1,31 @@
 import { CheckIcon, XIcon } from "@heroicons/react/outline";
-import React, { useEffect, useState } from "react";
-import { MultiValue } from "react-select";
+import React from "react";
+import { Props } from "react-select";

-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";

 import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";

-type CheckedSelectValue = {
+type CheckedSelectOption = {
  avatar: string;
  label: string;
  value: string;
  disabled?: boolean;
-}[];
-
-export type CheckedSelectProps = {
-  defaultValue?: CheckedSelectValue;
-  placeholder?: string;
-  name?: string;
-  options: CheckedSelectValue;
-  onChange: (options: CheckedSelectValue) => void;
-  disabled: boolean;
 };

-export const CheckedSelect = (props: CheckedSelectProps) => {
-  const { onChange } = props;
-  const [selectedOptions, setSelectedOptions] = useState<CheckedSelectValue>(props.defaultValue || []);
+export const CheckedSelect = ({
+  options = [],
+  value = [],
+  ...props
+}: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
+  value?: readonly CheckedSelectOption[];
+  onChange: (value: readonly CheckedSelectOption[]) => void;
+}) => {
  const { t } = useLocale();
-
-  useEffect(() => {
-    onChange(selectedOptions);
-  }, [onChange, selectedOptions]);
-
-  const options = props.options.map((option) => ({
-    ...option,
-    disabled: !!selectedOptions.find((selectedOption) => selectedOption.value === option.value),
-  }));
-
-  const removeOption = (value: string) =>
-    setSelectedOptions(selectedOptions.filter((option) => option.value !== value));
-
-  const changeHandler = (selections: MultiValue<CheckedSelectValue[number]>) =>
-    selections.forEach((selected) => {
-      if (selectedOptions.find((option) => option.value === selected.value)) {
-        removeOption(selected.value);
-        return;
-      }
-      setSelectedOptions(selectedOptions.concat(selected));
-    });
-
  return (
    <>
-      <Select<CheckedSelectValue[number], true>
+      <Select
        styles={{
          option: (styles, { isDisabled }) => ({
            ...styles,
@@ -73,11 +47,11 @@ export const CheckedSelect = (props: CheckedSelectProps) => {
          </div>
        )}
        options={options}
+        value={value}
        isMulti
-        // value={props.placeholder || t("select")}
-        onChange={changeHandler}
+        {...props}
      />
-      {selectedOptions.map((option) => (
+      {value.map((option) => (
        <div key={option.value} className="border-1 border p-2 font-medium">
          <Avatar
            className="inline h-6 w-6 rounded-full ltr:mr-2 rtl:ml-2"
@@ -86,7 +60,7 @@ export const CheckedSelect = (props: CheckedSelectProps) => {
          />
          {option.label}
          <XIcon
-            onClick={() => changeHandler([option])}
+            onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
            className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
          />
        </div>
@@ -95,6 +69,4 @@ export const CheckedSelect = (props: CheckedSelectProps) => {
  );
 };

-CheckedSelect.displayName = "CheckedSelect";
-
 export default CheckedSelect;
@@ -1,6 +1,11 @@
 import classNames from "classnames";
 import { components } from "react-select";
-import BaseSelect, { ITimezone, Props as SelectProps } from "react-timezone-select";
+import BaseSelect, {
+  allTimezones,
+  ITimezoneOption,
+  ITimezone,
+  Props as SelectProps,
+} from "react-timezone-select";

 import { InputComponent } from "@components/ui/form/Select";

@@ -28,6 +33,10 @@ function TimezoneSelect({ className, ...props }: SelectProps) {
          },
        }),
      }}
+      timezones={{
+        ...allTimezones,
+        "America/Asuncion": "Asuncion",
+      }}
      components={{
        ...components,
        IndicatorSeparator: () => null,
@@ -40,4 +49,4 @@ function TimezoneSelect({ className, ...props }: SelectProps) {
 }

 export default TimezoneSelect;
-export type { ITimezone };
+export type { ITimezone, ITimezoneOption };
@@ -36,7 +36,7 @@ type ChildrenProps = {
  props: RadioAreaProps;
  children?: ReactNode;
 };
-interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> {
+interface RadioAreaGroupProps extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "children"> {
  children: ChildrenProps | ChildrenProps[];
  name?: string;
  onChange?: (value: string) => void;
@@ -1,10 +1,17 @@
+import noop from "lodash/noop";
 import { createContext, ReactNode, useContext } from "react";

 import { localStorage } from "@calcom/lib/webstorage";

-type contractsContextType = Record<string, string>;
+type contractsContextType = {
+  contracts: Record<string, string>;
+  addContract: (payload: addContractsPayload) => void;
+};

-const contractsContextDefaultValue: contractsContextType = {};
+const contractsContextDefaultValue: contractsContextType = {
+  contracts: {},
+  addContract: noop,
+};

 const ContractsContext = createContext<contractsContextType>(contractsContextDefaultValue);

@@ -37,10 +44,5 @@ export function ContractsProvider({ children }: Props) {
    addContract,
  };

-  return (
-    <>
-      {/* @ts-ignore */}
-      <ContractsContext.Provider value={value}>{children}</ContractsContext.Provider>
-    </>
-  );
+  return <ContractsContext.Provider value={value}>{children}</ContractsContext.Provider>;
 }
@@ -0,0 +1,57 @@
+import { ExclamationIcon } from "@heroicons/react/solid";
+import { useSession } from "next-auth/react";
+import React, { AriaRole, ComponentType, FC, Fragment } from "react";
+
+import { CONSOLE_URL } from "@calcom/lib/constants";
+
+import EmptyScreen from "@components/EmptyScreen";
+
+type LicenseRequiredProps = {
+  as?: keyof JSX.IntrinsicElements | "";
+  className?: string;
+  role?: AriaRole | undefined;
+  children: React.ReactNode;
+};
+
+/**
+ * This component will only render it's children if the installation has a valid
+ * license.
+ */
+const LicenseRequired: FC<LicenseRequiredProps> = ({ children, as = "", ...rest }) => {
+  const session = useSession();
+  const Component = as || Fragment;
+  return (
+    <Component {...rest}>
+      {session.data?.hasValidLicense ? (
+        children
+      ) : (
+        <EmptyScreen
+          Icon={ExclamationIcon}
+          headline="This is an enterprise feature"
+          description={
+            <>
+              To enable this feature, get a deployment key at{" "}
+              <a href={CONSOLE_URL} target="_blank" rel="noopener noreferrer" className="underline">
+                Cal.com console
+              </a>
+              .
+            </>
+          }
+        />
+      )}
+    </Component>
+  );
+};
+
+export function withLicenseRequired<T>(Component: ComponentType<T>) {
+  // eslint-disable-next-line react/display-name
+  return (hocProps: T) => {
+    return (
+      <LicenseRequired>
+        <Component {...(hocProps as T)} />;
+      </LicenseRequired>
+    );
+  };
+}
+
+export default LicenseRequired;
@@ -15,11 +15,12 @@ import { trpc } from "@lib/trpc";

 import { DatePicker } from "@components/ui/form/DatePicker";

-import { TApiKeys } from "./ApiKeyListItem";
+import LicenseRequired from "../LicenseRequired";
+import type { TApiKeys } from "./ApiKeyListItem";

 export default function ApiKeyDialogForm(props: {
  title: string;
-  defaultValues?: Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires: boolean };
+  defaultValues?: Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires?: boolean };
  handleClose: () => void;
 }) {
  const { t } = useLocale();
@@ -49,7 +50,7 @@ export default function ApiKeyDialogForm(props: {
  const watchNeverExpires = form.watch("neverExpires");

  return (
-    <>
+    <LicenseRequired>
      {successfulNewApiKeyModal ? (
        <>
          <div className="mb-10">
@@ -92,12 +93,12 @@ export default function ApiKeyDialogForm(props: {
          </DialogFooter>
        </>
      ) : (
-        <Form<Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires: boolean }>
+        <Form<Omit<TApiKeys, "userId" | "createdAt" | "lastUsedAt"> & { neverExpires?: boolean }>
          form={form}
          handleSubmit={async (event) => {
            const apiKey = await utils.client.mutation("viewer.apiKeys.create", event);
            setApiKey(apiKey);
-            setApiKeyDetails({ ...event });
+            setApiKeyDetails({ ...event, neverExpires: !!event.neverExpires });
            await utils.invalidateQueries(["viewer.apiKeys.list"]);
            setSuccessfulNewApiKeyModal(true);
          }}
@@ -146,6 +147,6 @@ export default function ApiKeyDialogForm(props: {
          </DialogFooter>
        </Form>
      )}
-    </>
+    </LicenseRequired>
  );
 }
@@ -12,66 +12,76 @@ import { trpc } from "@lib/trpc";

 import { List } from "@components/List";

-export default function ApiKeyListContainer() {
+import LicenseRequired from "../LicenseRequired";
+
+function ApiKeyListContainer() {
  const { t } = useLocale();
  const query = trpc.useQuery(["viewer.apiKeys.list"]);

  const [newApiKeyModal, setNewApiKeyModal] = useState(false);
  const [editModalOpen, setEditModalOpen] = useState(false);
-  const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires: boolean }) | null>(null);
+  const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | null>(null);
  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <>
-          <div className="flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
-            <div className="mt-9">
-              <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
-              <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
-            </div>
-            <div className="mb-9 sm:self-center">
-              <Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
-                {t("generate_new_api_key")}
-              </Button>
-            </div>
-          </div>
-
-          {data.length > 0 && (
-            <List className="pb-6">
-              {data.map((item: any) => (
-                <ApiKeyListItem
-                  key={item.id}
-                  apiKey={item}
-                  onEditApiKey={() => {
-                    setApiKeyToEdit(item);
-                    setEditModalOpen(true);
-                  }}
-                />
-              ))}
-            </List>
-          )}
-
-          {/* New api key dialog */}
-          <Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
-            <DialogContent>
-              <ApiKeyDialogForm title={t("create_api_key")} handleClose={() => setNewApiKeyModal(false)} />
-            </DialogContent>
-          </Dialog>
-          {/* Edit api key dialog */}
-          <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
-            <DialogContent>
-              {apiKeyToEdit && (
-                <ApiKeyDialogForm
-                  title={t("edit_api_key")}
-                  key={apiKeyToEdit.id}
-                  handleClose={() => setEditModalOpen(false)}
-                  defaultValues={apiKeyToEdit}
-                />
+    <>
+      <div className="flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
+        <div className="mt-9">
+          <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
+          <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
+        </div>
+        <div className="mb-9 sm:self-center">
+          <Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
+            {t("generate_new_api_key")}
+          </Button>
+        </div>
+      </div>
+      <LicenseRequired>
+        <QueryCell
+          query={query}
+          success={({ data }) => (
+            <>
+              {data.length > 0 && (
+                <List className="pb-6">
+                  {data.map((item) => (
+                    <ApiKeyListItem
+                      key={item.id}
+                      apiKey={item}
+                      onEditApiKey={() => {
+                        setApiKeyToEdit(item);
+                        setEditModalOpen(true);
+                      }}
+                    />
+                  ))}
+                </List>
              )}
-            </DialogContent>
-          </Dialog>
-        </>
-      )}
-    />
+
+              {/* New api key dialog */}
+              <Dialog open={newApiKeyModal} onOpenChange={(isOpen) => !isOpen && setNewApiKeyModal(false)}>
+                <DialogContent>
+                  <ApiKeyDialogForm
+                    title={t("create_api_key")}
+                    handleClose={() => setNewApiKeyModal(false)}
+                  />
+                </DialogContent>
+              </Dialog>
+              {/* Edit api key dialog */}
+              <Dialog open={editModalOpen} onOpenChange={(isOpen) => !isOpen && setEditModalOpen(false)}>
+                <DialogContent>
+                  {apiKeyToEdit && (
+                    <ApiKeyDialogForm
+                      title={t("edit_api_key")}
+                      key={apiKeyToEdit.id}
+                      handleClose={() => setEditModalOpen(false)}
+                      defaultValues={apiKeyToEdit}
+                    />
+                  )}
+                </DialogContent>
+              </Dialog>
+            </>
+          )}
+        />
+      </LicenseRequired>
+    </>
  );
 }
+
+export default ApiKeyListContainer;
@@ -1,18 +1,20 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";

+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 { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { TextArea } from "@calcom/ui/form/fields";

-import { useLocale } from "@lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { trpc } from "@lib/trpc";

 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Badge from "@components/ui/Badge";

+import LicenseRequired from "../LicenseRequired";
+
 export default function SAMLConfiguration({
  teamsView,
  teamId,
@@ -92,7 +94,7 @@ export default function SAMLConfiguration({
  return (
    <>
      {isSAMLLoginEnabled ? (
-        <>
+        <LicenseRequired>
          <hr className="mt-8" />
          <div className="mt-6">
            <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">
@@ -157,7 +159,7 @@ export default function SAMLConfiguration({
            </div>
            <hr className="mt-4" />
          </form>
-        </>
+        </LicenseRequired>
      ) : null}
    </>
  );
@@ -47,7 +47,7 @@ type States =
 export default function PaymentComponent(props: Props) {
  const { t, i18n } = useLocale();
  const router = useRouter();
-  const { name, date } = router.query;
+  const { email, name, date } = router.query;
  const [state, setState] = useState<States>({ status: "idle" });
  const stripe = useStripe();
  const elements = useElements();
@@ -86,6 +86,7 @@ export default function PaymentComponent(props: Props) {
        date,
        type: props.eventType.id,
        user: props.user.username,
+        email,
        name,
        bookingId: props.bookingId,
      };
@@ -6,10 +6,10 @@ import timezone from "dayjs/plugin/timezone";
 import toArray from "dayjs/plugin/toArray";
 import utc from "dayjs/plugin/utc";
 import Head from "next/head";
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";

-import { sdkActionManager, useIsEmbed } from "@calcom/embed-core";
+import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import getStripe from "@calcom/stripe/client";
 import PaymentComponent from "@ee/components/stripe/Payment";
 import { PaymentPageProps } from "@ee/pages/payment/[uid]";
@@ -49,7 +49,8 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
        embedIframeWidth = e.detail.data.iframeWidth as number;
      });
    }
-  }, [date, isEmbed]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isEmbed]);

  const eventName = props.booking.title;

@@ -0,0 +1,13 @@
+import HelpscoutMenuItem from "@ee/lib/helpscout/HelpscoutMenuItem";
+import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
+import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
+
+export default function HelpMenuItem() {
+  return (
+    <>
+      <IntercomMenuItem />
+      <ZendeskMenuItem />
+      <HelpscoutMenuItem />
+    </>
+  );
+}
@@ -1,13 +1,191 @@
-import HelpscoutMenuItem from "@ee/lib/helpscout/HelpscoutMenuItem";
-import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
-import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
+import { ExternalLinkIcon, ExclamationIcon } from "@heroicons/react/solid";
+import { useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+
+import classNames from "@lib/classNames";
+import { trpc } from "@lib/trpc";
+
+import ContactMenuItem from "./ContactMenuItem";

 export default function HelpMenuItem() {
+  const [rating, setRating] = useState<null | string>(null);
+  const [comment, setComment] = useState("");
+  // const [errorMessage, setErrorMessage] = useState(false);
+  const [disableSubmit, setDisableSubmit] = useState(true);
+  const { t } = useLocale();
+
+  const mutation = trpc.useMutation("viewer.submitFeedback");
+
+  const onRatingClick = (value: string) => {
+    setRating(value);
+    setDisableSubmit(false);
+  };
+
+  const sendFeedback = async (rating: string, comment: string) => {
+    mutation.mutate({ rating: rating, comment: comment });
+
+    if (mutation.isSuccess) {
+      setDisableSubmit(true);
+      showToast("Thank you, feedback submitted", "success");
+    }
+  };
+
  return (
-    <>
-      <IntercomMenuItem />
-      <ZendeskMenuItem />
-      <HelpscoutMenuItem />
-    </>
+    <div className="w-full border-gray-300 bg-white shadow-sm md:w-[150%]">
+      <div className=" w-full p-5">
+        <p className="mb-1 text-neutral-500">{t("resources").toUpperCase()}</p>
+        <a
+          href="https://docs.cal.com/"
+          target="_blank"
+          className="flex w-full py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          rel="noreferrer">
+          {t("support_documentation")}
+          <ExternalLinkIcon
+            className={classNames(
+              "text-neutral-400 group-hover:text-neutral-500",
+              "ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
+            )}
+          />
+        </a>
+        <a
+          href="https://developer.cal.com/"
+          target="_blank"
+          className="flex w-full py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+          rel="noreferrer">
+          {t("developer_documentation")}
+          <ExternalLinkIcon
+            className={classNames(
+              "text-neutral-400 group-hover:text-neutral-500",
+              "ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
+            )}
+          />
+        </a>
+        <ContactMenuItem />
+      </div>
+
+      <hr className=" bg-gray-200" />
+      <div className="w-full p-5">
+        <p className="mb-1 text-neutral-500">{t("feedback").toUpperCase()}</p>
+        <p className="flex w-full py-2 text-sm font-medium text-gray-700">{t("comments")}</p>
+        <textarea
+          id="comment"
+          name="comment"
+          rows={3}
+          onChange={(event) => setComment(event.target.value)}
+          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 shadow-sm sm:text-sm"></textarea>
+
+        <div className="my-3 flex justify-end">
+          <button
+            className={classNames(
+              "m-1 items-center justify-center p-1.5 grayscale hover:opacity-100 hover:grayscale-0",
+              rating === "Extremely unsatisfied" ? "grayscale-0" : "opacity-50"
+            )}
+            onClick={() => onRatingClick("Extremely unsatisfied")}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="1.5em" height="1.5em">
+              <path
+                fill="#FFCC4D"
+                d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
+              />
+              <path
+                fill="#664500"
+                d="M22 27c0 2.763-1.791 3-4 3-2.21 0-4-.237-4-3 0-2.761 1.79-6 4-6 2.209 0 4 3.239 4 6zm8-12c-.124 0-.25-.023-.371-.072-5.229-2.091-7.372-5.241-7.461-5.374-.307-.46-.183-1.081.277-1.387.459-.306 1.077-.184 1.385.274.019.027 1.93 2.785 6.541 4.629.513.206.763.787.558 1.3-.157.392-.533.63-.929.63zM6 15c-.397 0-.772-.238-.929-.629-.205-.513.044-1.095.557-1.3 4.612-1.844 6.523-4.602 6.542-4.629.308-.456.929-.577 1.387-.27.457.308.581.925.275 1.383-.089.133-2.232 3.283-7.46 5.374C6.25 14.977 6.124 15 6 15z"
+              />
+              <path fill="#5DADEC" d="M24 16h4v19l-4-.046V16zM8 35l4-.046V16H8v19z" />
+              <path
+                fill="#664500"
+                d="M14.999 18c-.15 0-.303-.034-.446-.105-3.512-1.756-7.07-.018-7.105 0-.495.249-1.095.046-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.498-2.197 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552zm14 0c-.15 0-.303-.034-.446-.105-3.513-1.756-7.07-.018-7.105 0-.494.248-1.094.047-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.501-2.196 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552z"
+              />
+              <ellipse fill="#5DADEC" cx="18" cy="34" rx="18" ry="2" />
+              <ellipse fill="#E75A70" cx="18" cy="27" rx="3" ry="2" />
+            </svg>
+          </button>
+          <button
+            className={classNames(
+              "m-1 items-center justify-center p-1.5 grayscale hover:opacity-100 hover:grayscale-0",
+              rating === "Unsatisfied" ? "grayscale-0" : "opacity-50"
+            )}
+            onClick={() => onRatingClick("Unsatisfied")}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="1.5em" height="1.5em">
+              <path
+                fill="#FFCC4D"
+                d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"
+              />
+              <ellipse fill="#664500" cx="11.5" cy="14.5" rx="2.5" ry="3.5" />
+              <ellipse fill="#664500" cx="24.5" cy="14.5" rx="2.5" ry="3.5" />
+              <path
+                fill="#664500"
+                d="M8.665 27.871c.178.161.444.171.635.029.039-.029 3.922-2.9 8.7-2.9 4.766 0 8.662 2.871 8.7 2.9.191.142.457.13.635-.029.177-.16.217-.424.094-.628C27.3 27.029 24.212 22 18 22s-9.301 5.028-9.429 5.243c-.123.205-.084.468.094.628z"
+              />
+            </svg>
+          </button>
+          <button
+            className={classNames(
+              "m-1 items-center justify-center p-1.5 grayscale hover:opacity-100 hover:grayscale-0",
+              rating === "Satisfied" ? "grayscale-0" : "opacity-50"
+            )}
+            onClick={() => onRatingClick("Satisfied")}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="1.5em" height="1.5em">
+              <path
+                fill="#FFCC4D"
+                d="M36 18c0 9.941-8.059 18-18 18-9.94 0-18-8.059-18-18C0 8.06 8.06 0 18 0c9.941 0 18 8.06 18 18"
+              />
+              <path
+                fill="#664500"
+                d="M28.457 17.797c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.145.591.175.142.426.147.61.014.012-.009 1.262-.902 3.702-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.177-.142.238-.386.145-.594zm-12 0c-.06-.135-1.499-3.297-4.457-3.297-2.957 0-4.397 3.162-4.457 3.297-.092.207-.032.449.144.591.176.142.427.147.61.014.013-.009 1.262-.902 3.703-.902 2.426 0 3.674.881 3.702.901.088.066.194.099.298.099.11 0 .221-.037.312-.109.178-.142.237-.386.145-.594zM18 22c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"
+              />
+              <path fill="#FFF" d="M9 23s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
+            </svg>
+          </button>
+          <button
+            className={classNames(
+              "m-1 items-center justify-center p-1.5 grayscale hover:opacity-100 hover:grayscale-0",
+              rating === "Extremely satisfied" ? "grayscale-0" : "opacity-50"
+            )}
+            onClick={() => onRatingClick("Extremely satisfied")}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="1.5em" height="1.5em">
+              <path
+                fill="#FFCC4D"
+                d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
+              />
+              <path
+                fill="#664500"
+                d="M18 21c-3.623 0-6.027-.422-9-1-.679-.131-2 0-2 2 0 4 4.595 9 11 9 6.404 0 11-5 11-9 0-2-1.321-2.132-2-2-2.973.578-5.377 1-9 1z"
+              />
+              <path fill="#FFF" d="M9 22s3 1 9 1 9-1 9-1-2 4-9 4-9-4-9-4z" />
+              <path
+                fill="#E95F28"
+                d="M15.682 4.413l-4.542.801L8.8.961C8.542.492 8.012.241 7.488.333c-.527.093-.937.511-1.019 1.039l-.745 4.797-4.542.801c-.535.094-.948.525-1.021 1.064s.211 1.063.703 1.297l4.07 1.932-.748 4.812c-.083.536.189 1.064.673 1.309.179.09.371.133.562.133.327 0 .65-.128.891-.372l3.512-3.561 4.518 2.145c.49.232 1.074.123 1.446-.272.372-.395.446-.984.185-1.459L13.625 9.73l3.165-3.208c.382-.387.469-.977.217-1.459-.254-.482-.793-.743-1.325-.65zm4.636 0l4.542.801L27.2.961c.258-.469.788-.72 1.312-.628.526.093.936.511 1.018 1.039l.745 4.797 4.542.801c.536.094.949.524 1.021 1.063s-.211 1.063-.703 1.297l-4.07 1.932.748 4.812c.083.536-.189 1.064-.673 1.309-.179.09-.371.133-.562.133-.327 0-.65-.128-.891-.372l-3.512-3.561-4.518 2.145c-.49.232-1.074.123-1.446-.272-.372-.395-.446-.984-.185-1.459l2.348-4.267-3.165-3.208c-.382-.387-.469-.977-.217-1.459.255-.482.794-.743 1.326-.65z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="my-2 flex justify-end">
+          <Button
+            disabled={disableSubmit}
+            loading={mutation.isLoading}
+            onClick={async () => {
+              if (rating && comment) {
+                await sendFeedback(rating, comment);
+              }
+            }}>
+            {t("submit")}
+          </Button>
+        </div>
+        {mutation.isError && (
+          <div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
+            <div className="flex-shrink-0">
+              <ExclamationIcon className="h-5 w-5" />
+            </div>
+            <div className="ml-3 flex-grow">
+              <p className="font-medium">{t("feedback_error")}</p>
+              <p>{t("please_try_again")}</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
  );
 }
@@ -1,15 +1,16 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import React, { useState, useEffect } from "react";
-import TimezoneSelect, { ITimezone } from "react-timezone-select";

-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import LicenseRequired from "@ee/components/LicenseRequired";

-import { trpc, inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@lib/trpc";

 import Avatar from "@components/ui/Avatar";
 import { DatePicker } from "@components/ui/form/DatePicker";
 import Select from "@components/ui/form/Select";
+import TimezoneSelect, { ITimezone } from "@components/ui/form/TimezoneSelect";

 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";

@@ -33,62 +34,66 @@ export default function TeamAvailabilityModal(props: Props) {
  }, [utils, selectedTimeZone, selectedDate]);

  return (
-    <div className="flex max-h-[500px] min-h-[500px] flex-row  space-x-8 rtl:space-x-reverse">
-      <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
-        <div className="flex">
-          <Avatar
-            imageSrc={WEBSITE_URL + "/" + props.member?.username + "/avatar.png"}
-            alt={props.member?.name || ""}
-            className="h-14 w-14 rounded-full"
-          />
-          <div className="ml-3 inline-block pt-1">
-            <span className="text-lg font-bold text-neutral-700">{props.member?.name}</span>
-            <span className="-mt-1 block text-sm text-gray-400">{props.member?.email}</span>
+    <LicenseRequired>
+      <div className="flex max-h-[500px] min-h-[500px] flex-row  space-x-8 rtl:space-x-reverse">
+        <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
+          <div className="flex">
+            <Avatar
+              imageSrc={WEBAPP_URL + "/" + props.member?.username + "/avatar.png"}
+              alt={props.member?.name || ""}
+              className="h-14 w-14 rounded-full"
+            />
+            <div className="ml-3 inline-block pt-1">
+              <span className="text-lg font-bold text-neutral-700">{props.member?.name}</span>
+              <span className="-mt-1 block text-sm text-gray-400">{props.member?.email}</span>
+            </div>
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold text-gray-600">Date</span>
+            <DatePicker
+              date={selectedDate.toDate()}
+              onDatesChange={(newDate) => {
+                setSelectedDate(dayjs(newDate));
+              }}
+            />
+          </div>
+          <div>
+            <span className="font-bold text-gray-600">Timezone</span>
+            <TimezoneSelect
+              id="timeZone"
+              value={selectedTimeZone}
+              onChange={(timezone) => setSelectedTimeZone(timezone.value)}
+              classNamePrefix="react-select"
+              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 shadow-sm focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+            />
+          </div>
+          <div>
+            <span className="font-bold text-gray-600">Slot Length</span>
+            <Select
+              options={[
+                { value: 15, label: "15 minutes" },
+                { value: 30, label: "30 minutes" },
+                { value: 60, label: "60 minutes" },
+              ]}
+              isSearchable={false}
+              classNamePrefix="react-select"
+              className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+              value={{ value: frequency, label: `${frequency} minutes` }}
+              onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
+            />
          </div>
        </div>
-        <div className="flex flex-col">
-          <span className="font-bold text-gray-600">Date</span>
-          <DatePicker
-            date={selectedDate.toDate()}
-            onDatesChange={(newDate) => {
-              setSelectedDate(dayjs(newDate));
-            }}
+        {props.team && props.member && (
+          <TeamAvailabilityTimes
+            className="overflow-scroll"
+            teamId={props.team.id}
+            memberId={props.member.id}
+            frequency={frequency}
+            selectedDate={selectedDate}
+            selectedTimeZone={selectedTimeZone}
          />
-        </div>
-        <div>
-          <span className="font-bold text-gray-600">Timezone</span>
-          <TimezoneSelect
-            id="timeZone"
-            value={selectedTimeZone}
-            onChange={(timezone) => setSelectedTimeZone(timezone.value)}
-            className="mt-1 block w-full rounded-sm border border-gray-300 shadow-sm sm:text-sm"
-          />
-        </div>
-        <div>
-          <span className="font-bold text-gray-600">Slot Length</span>
-          <Select
-            options={[
-              { value: 15, label: "15 minutes" },
-              { value: 30, label: "30 minutes" },
-              { value: 60, label: "60 minutes" },
-            ]}
-            isSearchable={false}
-            className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
-            value={{ value: frequency, label: `${frequency} minutes` }}
-            onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
-          />
-        </div>
+        )}
      </div>
-      {props.team && props.member && (
-        <TeamAvailabilityTimes
-          className="overflow-auto"
-          teamId={props.team.id}
-          memberId={props.member.id}
-          frequency={frequency}
-          selectedDate={selectedDate}
-          selectedTimeZone={selectedTimeZone}
-        />
-      )}
-    </div>
+    </LicenseRequired>
  );
 }
@@ -1,16 +1,16 @@
 import dayjs from "dayjs";
 import React, { useState, useEffect, CSSProperties } from "react";
-import TimezoneSelect, { ITimezone } from "react-timezone-select";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";

-import { WEBSITE_URL } from "@calcom/lib/constants";
+import { CAL_URL } from "@calcom/lib/constants";

-import { trpc, inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@lib/trpc";

 import Avatar from "@components/ui/Avatar";
 import { DatePicker } from "@components/ui/form/DatePicker";
 import Select from "@components/ui/form/Select";
+import TimezoneSelect, { ITimezone } from "@components/ui/form/TimezoneSelect";

 import TeamAvailabilityTimes from "./TeamAvailabilityTimes";

@@ -46,7 +46,7 @@ export default function TeamAvailabilityScreen(props: Props) {
          HeaderComponent={
            <div className="mb-6 flex items-center">
              <Avatar
-                imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
+                imageSrc={CAL_URL + "/" + member.username + "/avatar.png"}
                alt={member?.name || ""}
                className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
              />
@@ -1,20 +1,20 @@
 import Router from "next/router";
-import { useCallback, useMemo, useState } from "react";
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import Web3 from "web3";
+import type { AbstractProvider } from "web3-core";
 import { AbiItem } from "web3-utils";

+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { Button } from "@calcom/ui/Button";

-import { useLocale } from "@lib/hooks/useLocale";
-
 import { useContracts } from "../../../contexts/contractsContext";
 import genericAbi from "../../../web3/abis/abiWithGetBalance.json";
 import verifyAccount, { AUTH_MESSAGE } from "../../../web3/utils/verifyAccount";
+import { withLicenseRequired } from "../LicenseRequired";

 interface Window {
-  ethereum: any;
+  ethereum: AbstractProvider & { selectedAddress: string };
  web3: Web3;
 }
 interface EvtsToVerify {
@@ -40,7 +40,7 @@ const CryptoSection = (props: CryptoSectionProps) => {
  const { t } = useLocale();

  const connectMetamask = useCallback(async () => {
-    if (window.ethereum) {
+    if (window.ethereum && typeof window.ethereum.request === "function") {
      await window.ethereum.request({ method: "eth_requestAccounts" });
      window.web3 = new Web3(window.ethereum);
      toggleEthEnabled(true);
@@ -57,17 +57,13 @@ const CryptoSection = (props: CryptoSectionProps) => {

      const contract = new window.web3.eth.Contract(genericAbi as AbiItem[], props.smartContractAddress);
      const balance = await contract.methods.balanceOf(window.ethereum.selectedAddress).call();
-
      const hasToken = balance > 0;

      if (!hasToken) {
        throw new Error("Specified wallet does not own any tokens belonging to this smart contract");
      } else {
-        const account = (await window.web3.eth.getAccounts())[0];
-
-        // @ts-ignore
-        const signature = await window.web3.eth.personal.sign(AUTH_MESSAGE, account);
-        // @ts-ignore
+        const [account] = await window.web3.eth.getAccounts();
+        const signature = await window.web3.eth.personal.sign(AUTH_MESSAGE, account, "");
        addContract({ address: props.smartContractAddress, signature });

        await verifyAccount(signature, account);
@@ -93,7 +89,7 @@ const CryptoSection = (props: CryptoSectionProps) => {

  const verifyButton = useMemo(() => {
    return (
-      <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken" name="hasToken">
+      <Button color="secondary" onClick={verifyWallet} type="button" id="hasToken">
        {
          // eslint-disable-next-line @next/next/no-img-element
          <img className="mr-1 h-5" src="/apps/metamask.svg" alt="MetaMask" />
@@ -155,4 +151,4 @@ const CryptoSection = (props: CryptoSectionProps) => {
  );
 };

-export default CryptoSection;
+export default withLicenseRequired(CryptoSection);
@@ -22,20 +22,12 @@ export default function HelpscoutMenuItem() {
  else
    return (
      <>
-        <DropdownMenuItem>
-          <button
-            onClick={handleClick}
-            className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
-            <ChatAltIcon
-              className={classNames(
-                "text-neutral-400 group-hover:text-neutral-500",
-                "h-5 w-5 flex-shrink-0 ltr:mr-3"
-              )}
-              aria-hidden="true"
-            />
-            {t("help")}
-          </button>
-        </DropdownMenuItem>
+        <button
+          onClick={handleClick}
+          className="flex w-full py-2 pr-4 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900">
+          {t("contact_support")}
+        </button>
+
        {active && <HelpScout color="#292929" icon="message" horizontalPosition="right" zIndex="1" />}
      </>
    );
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { LiveChatLoaderProvider } from "react-live-chat-loader";

-const Provider: FC = ({ children }) => (
+const Provider: FC<{ children: React.ReactNode }> = ({ children }) => (
  <LiveChatLoaderProvider providerKey={process.env.NEXT_PUBLIC_HELPSCOUT_KEY!} provider="helpScout">
    <>{children}</>
  </LiveChatLoaderProvider>
@@ -11,6 +11,7 @@ const ImpersonationProvider = CredentialsProvider({
    username: { label: "Username", type: "text " },
  },
  async authorize(creds, req) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore need to figure out how to correctly type this
    const session = await getSession({ req });
    if (session?.user.role !== "ADMIN") {
@@ -31,6 +32,10 @@ const ImpersonationProvider = CredentialsProvider({
      throw new Error("This user does not exist");
    }

+    if (user.disableImpersonation) {
+      throw new Error("This user has disabled Impersonation.");
+    }
+
    // Log impersonations for audit purposes
    await prisma.impersonations.create({
      data: {
--- a/Show More
+++ b/Show More