v1.6.2

# 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

.env.appStore.example

@@ -81,4 +81,9 @@ VITAL_WEBHOOK_SECRET=
 VITAL_DEVELOPMENT_MODE="sandbox"
 # "us" | "eu"
 VITAL_REGION="us"
+
+#   - ZAPIER
+# Used for the Zapier integration
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
+ZAPIER_INVITE_LINK=""
 # *********************************************************************************************************

.env.example

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/workflows/check-types.yml

@@ -1,6 +1,6 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:
@@ -16,11 +16,13 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2
 
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-      - run: yarn
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
       - run: yarn type-check

.github/workflows/crowdin.yml

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

.github/workflows/e2e-embed.yml

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

.github/workflows/e2e.yml

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

.github/workflows/lint.yml

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

.gitmodules

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

.vscode/tasks.json

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

CONTRIBUTING.md

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

README.md

@@ -18,22 +18,26 @@
     <a href="https://cal.com">Website</a>
     ·
     <a href="https://github.com/calcom/cal.com/issues">Issues</a>
+    ·
+    <a href="https://cal.com/roadmap">Roadmap</a>
   </p>
 </p>
 
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-  <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
-  <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
-  <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
-  <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-  <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
-  <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
-    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
-    <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=social"></a>
-    <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-    <a href="https://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.

apps/docs/next.config.js

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

apps/docs/package.json

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

apps/swagger/package.json

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

apps/web/components/App.tsx

@@ -81,10 +81,10 @@ export default function App({
       }
     }
     getInstalledApp(type);
-  }, []);
+  }, [type]);
   return (
     <>
-      <Shell large>
+      <Shell large isPublic>
         <div className="-mx-4 md:-mx-8">
           <div className="bg-gray-50 px-4">
             <Link href="/apps">
@@ -94,7 +94,10 @@ export default function App({
             </Link>
             <div className="items-center justify-between py-4 sm:flex sm:py-8">
               <div className="flex">
-                <img className="h-16 w-16" src={logo} alt={name} />
+                {
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img className="h-16 w-16" src={logo} alt={name} />
+                }
                 <header className="px-4 py-2">
                   <h1 className="font-cal text-xl text-gray-900">{name}</h1>
                   <h2 className="text-sm text-gray-500">

apps/web/components/AppsShell.tsx

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

apps/web/components/BookingsShell.tsx

@@ -1,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 }} />

apps/web/components/CustomBranding.tsx

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

apps/web/components/Embed.tsx

@@ -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>
                   ))}

apps/web/components/EmptyScreen.tsx

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

apps/web/components/ImageUploader.tsx

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

apps/web/components/Loader.tsx

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

apps/web/components/Logo.tsx

@@ -3,8 +3,10 @@ export default function Logo({ small, icon }: { small?: boolean; icon?: boolean
     <h1 className="inline">
       <strong>
         {icon ? (
+          // eslint-disable-next-line @next/next/no-img-element
           <img className="mx-auto w-9" alt="Cal" title="Cal" src="/cal-com-icon-white.svg" />
         ) : (
+          // eslint-disable-next-line @next/next/no-img-element
           <img
             className={small ? "h-4 w-auto" : "h-5 w-auto"}
             alt="Cal"

apps/web/components/NavTabs.tsx

@@ -1,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>

apps/web/components/SettingsShell.tsx

@@ -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>
   );
 }

apps/web/components/Shell.tsx

@@ -10,15 +10,16 @@ import {
   MapIcon,
   MoonIcon,
   ViewGridIcon,
+  QuestionMarkCircleIcon,
 } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment, ReactNode, useEffect } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { useIsEmbed } from "@calcom/embed-core";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
@@ -31,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";
@@ -197,7 +199,7 @@ const Layout = ({
                   </Link>
                   {/* logo icon for tablet */}
                   <Link href="/event-types">
-                    <a className="md:inline lg:hidden">
+                    <a className="text-center md:inline lg:hidden">
                       <Logo small icon />
                     </a>
                   </Link>
@@ -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,9 +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
@@ -470,11 +474,14 @@ function UserDropdown({ small }: { small?: boolean }) {
               small ? "h-8 w-8" : "h-10 w-10",
               "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
             )}>
-            <img
-              className="rounded-full"
-              src={process.env.NEXT_PUBLIC_WEBSITE_URL + "/" + user?.username + "/avatar.png"}
-              alt={user?.username || "Nameless User"}
-            />
+            {
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                className="rounded-full"
+                src={WEBAPP_URL + "/" + user?.username + "/avatar.png"}
+                alt={user?.username || "Nameless User"}
+              />
+            }
             {!user?.away && (
               <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
             )}
@@ -501,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>
   );

apps/web/components/apps/AppCard.tsx

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

apps/web/components/apps/SkeletonLoader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
 
 import { ShellSubHeading } from "@components/Shell";
 

apps/web/components/apps/Slider.tsx

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

apps/web/components/availability/NewScheduleButton.tsx

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

apps/web/components/availability/Schedule.tsx

@@ -6,7 +6,7 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
-import { GroupBase, Props, SingleValue } from "react-select";
+import { GroupBase, Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
@@ -57,7 +57,7 @@ const useOptions = () => {
       t = t.add(increment, "minutes");
     }
     return options;
-  }, []);
+  }, [timeFormat]);
 
   const filter = useCallback(
     ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {

apps/web/components/availability/ScheduleListItem.tsx

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

apps/web/components/availability/SkeletonLoader.tsx

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

apps/web/components/booking/AvailableTimes.tsx

@@ -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>
             );
           })}

apps/web/components/booking/BookingListItem.tsx

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

apps/web/components/booking/CancelBooking.tsx

@@ -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 <></>;
+}

apps/web/components/booking/DatePicker.tsx

@@ -1,19 +1,20 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
-import { EventType, PeriodType } from "@prisma/client";
+import { PeriodType } from "@prisma/client";
 import dayjs, { Dayjs } from "dayjs";
-import dayjsBusinessTime from "dayjs-business-time";
+import dayjsBusinessTime from "dayjs-business-days2";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { memoize } from "lodash";
 import { useEffect, useRef, useState } from "react";
 
-import { useEmbedStyles } from "@calcom/embed-core";
+import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
 import { weekdayNames } from "@lib/core/i18n/weekday";
 import { doWorkAsync } from "@lib/doWorkAsync";
+import isOutOfBounds from "@lib/isOutOfBounds";
 import getSlots from "@lib/slots";
 import { WorkingHours } from "@lib/types/schedule";
 
@@ -37,41 +38,6 @@ type DatePickerProps = {
   minimumBookingNotice: number;
 };
 
-function isOutOfBounds(
-  time: dayjs.ConfigType,
-  {
-    periodType,
-    periodDays,
-    periodCountCalendarDays,
-    periodStartDate,
-    periodEndDate,
-  }: Pick<
-    EventType,
-    "periodType" | "periodDays" | "periodCountCalendarDays" | "periodStartDate" | "periodEndDate"
-  >
-) {
-  const date = dayjs(time);
-
-  switch (periodType) {
-    case PeriodType.ROLLING: {
-      const periodRollingEndDay = periodCountCalendarDays
-        ? dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
-        : dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
-      return date.endOf("day").isAfter(periodRollingEndDay);
-    }
-
-    case PeriodType.RANGE: {
-      const periodRangeStartDay = dayjs(periodStartDate).utcOffset(date.utcOffset()).endOf("day");
-      const periodRangeEndDay = dayjs(periodEndDate).utcOffset(date.utcOffset()).endOf("day");
-      return date.endOf("day").isBefore(periodRangeStartDay) || date.endOf("day").isAfter(periodRangeEndDay);
-    }
-
-    case PeriodType.UNLIMITED:
-    default:
-      return false;
-  }
-}
-
 function DatePicker({
   weekStart,
   onDatePicked,
@@ -94,7 +60,7 @@ function DatePicker({
   const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
   const [daysFromState, setDays] = useState<
     | {
-        disabled: Boolean;
+        disabled: boolean;
         date: number;
       }[]
     | null
@@ -191,7 +157,7 @@ function DatePicker({
       name: "DatePicker",
       length: daysInMonth,
       callback: (i: number) => {
-        let day = i + 1;
+        const day = i + 1;
         days[daysInitialOffset + i] = {
           disabled: isDisabledMemoized(day, {
             browsingDate,

apps/web/components/booking/SkeletonLoader.tsx

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

apps/web/components/booking/TimeOptions.tsx

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

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

@@ -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 { useEffect, useMemo, useState } from "react";
+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) {
@@ -76,7 +108,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
       if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
         router.replace(`/${eventOwner.username}`);
     }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
   const selectedDate = useMemo(() => {
     const dateString = asStringOrNull(router.query.date);
@@ -113,32 +145,42 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
 
     telemetry.withJitsu((jitsu) =>
       jitsu.track(
-        telemetryEventTypes.pageView,
-        collectPageParameters("availability", { isTeamBooking: document.URL.includes("team/") })
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
       )
     );
   }, [telemetry]);
 
-  const changeDate = (newDate: Dayjs) => {
-    router.replace(
-      {
-        query: {
-          ...router.query,
-          date: newDate.format("YYYY-MM-DDZZ"),
+  const changeDate = useCallback(
+    (newDate: Dayjs) => {
+      router.replace(
+        {
+          query: {
+            ...router.query,
+            date: newDate.tz(timeZone(), true).format("YYYY-MM-DDZZ"),
+          },
         },
-      },
-      undefined,
-      {
-        shallow: true,
-      }
-    );
-  };
+        undefined,
+        { shallow: true }
+      );
+    },
+    [router]
+  );
+
+  useEffect(() => {
+    if (
+      selectedDate != null &&
+      selectedDate?.utcOffset() !== selectedDate.clone().utcOffset(0).tz(timeZone()).utcOffset()
+    ) {
+      changeDate(selectedDate.tz(timeZone(), true));
+    }
+  }, [selectedDate, changeDate]);
 
   const handleSelectTimeZone = (selectedTimeZone: string): void => {
+    timeZone(selectedTimeZone);
     if (selectedDate) {
       changeDate(selectedDate.tz(selectedTimeZone, true));
     }
-    timeZone(selectedTimeZone);
     setIsTimeOptionsOpen(false);
   };
 
@@ -194,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 }[]
@@ -203,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 && (
@@ -214,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")}
@@ -254,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
@@ -267,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 && (
@@ -284,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")}
@@ -327,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>
@@ -385,6 +481,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                     schedulingType={eventType.schedulingType ?? null}
                     beforeBufferTime={eventType.beforeEventBuffer}
                     afterBufferTime={eventType.afterEventBuffer}
+                    seatsPerTimeSlot={eventType.seatsPerTimeSlot}
                   />
                 )}
               </div>

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

@@ -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")
@@ -66,8 +79,9 @@ type BookingFormValues = {
   locationType?: LocationType;
   guests?: string[];
   phone?: string;
+  hostPhoneNumber?: string; // Maybe come up with a better way to name this to distingish between two types of phone numbers
   customInputs?: {
-    [key: string]: string;
+    [key: string]: string | boolean;
   };
 };
 
@@ -89,16 +103,26 @@ const BookingPage = ({
   const { contracts } = useContracts();
   const { data: session } = useSession();
   const isBackgroundTransparent = useIsBackgroundTransparent();
+  const telemetry = useTelemetry();
+
+  useEffect(() => {
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
+      )
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     if (eventType.metadata.smartContractAddress) {
       const eventOwner = eventType.users[0];
 
       if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        /* @ts-ignore */
         router.replace(`/${eventOwner.username}`);
     }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
@@ -109,6 +133,7 @@ const BookingPage = ({
             paymentUid,
             date,
             name: attendees[0].name,
+            email: attendees[0].email,
             absolute: false,
           })
         );
@@ -144,7 +169,7 @@ const BookingPage = ({
 
   const recurringMutation = useMutation(createRecurringBooking, {
     onSuccess: async (responseData = []) => {
-      const { attendees = [], recurringEventId } = responseData[0] || {};
+      const { attendees = [], id, recurringEventId } = responseData[0] || {};
       const location = (function humanReadableLocation(location) {
         if (!location) {
           return;
@@ -168,6 +193,7 @@ const BookingPage = ({
           email: attendees[0].email,
           location,
           eventName: profile.eventName || "",
+          bookingId: id,
         },
       });
     },
@@ -181,10 +207,9 @@ const BookingPage = ({
 
   const eventTypeDetail = { isWeb3Active: false, ...eventType };
 
-  type Location = { type: LocationType; address?: string; link?: string };
   // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
-  const locations: Location[] = useMemo(
-    () => (eventType.locations as Location[]) || [],
+  const locations: LocationObject[] = useMemo(
+    () => (eventType.locations as LocationObject[]) || [],
     [eventType.locations]
   );
 
@@ -194,10 +219,8 @@ const BookingPage = ({
     }
   }, [router.query.guest]);
 
-  const telemetry = useTelemetry();
-
   const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
-  const loggedInIsOwner = eventType?.users[0]?.name === session?.user?.name;
+  const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
   const guestListEmails = !isDynamicGroupBooking
     ? booking?.attendees.slice(1).map((attendee) => attendee.email)
     : [];
@@ -225,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]
+            : "",
+        }),
+        {}
+      ),
     };
   };
 
@@ -258,7 +292,9 @@ const BookingPage = ({
     })(),
   });
 
-  const getLocationValue = (booking: Pick<BookingFormValues, "locationType" | "phone">) => {
+  const getLocationValue = (
+    booking: Pick<BookingFormValues, "locationType" | "phone" | "hostPhoneNumber">
+  ) => {
     const { locationType } = booking;
     switch (locationType) {
       case LocationType.Phone: {
@@ -270,6 +306,9 @@ const BookingPage = ({
       case LocationType.Link: {
         return locationInfo(locationType)?.link || "";
       }
+      case LocationType.UserPhone: {
+        return locationInfo(locationType)?.hostPhoneNumber || "";
+      }
       // Catches all other location types, such as Google Meet, Zoom etc.
       default:
         return selectedLocation || "";
@@ -293,7 +332,7 @@ const BookingPage = ({
   const bookEvent = (booking: BookingFormValues) => {
     telemetry.withJitsu((jitsu) =>
       jitsu.track(
-        telemetryEventTypes.bookingConfirmed,
+        top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
         collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
       )
     );
@@ -315,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],
       };
@@ -343,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,
@@ -361,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,
@@ -377,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>
@@ -409,7 +451,7 @@ const BookingPage = ({
               "main overflow-hidden",
               isEmbed ? "" : "border border-gray-200",
               isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
-              "rounded-md sm:border sm:dark:border-gray-600"
+              "rounded-md dark:border-gray-600 sm:border"
             )}>
             <div className="px-4 py-5 sm:flex sm:p-4">
               <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
@@ -431,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" />
@@ -470,7 +527,7 @@ const BookingPage = ({
                   <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                   <div className="-mt-1">
                     {(rescheduleUid || !eventType.recurringEvent.freq) &&
-                      parseDate(dayjs.tz(date, timeZone()), i18n)}
+                      parseDate(dayjs(date).tz(timeZone()), i18n)}
                     {!rescheduleUid &&
                       eventType.recurringEvent.freq &&
                       recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
@@ -518,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}
                       />
@@ -538,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"
@@ -614,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 && (
@@ -629,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 && (
@@ -641,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 && (
@@ -653,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}
@@ -741,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">

apps/web/components/dialog/ConfirmationDialogContent.tsx

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

apps/web/components/dialog/DeleteStripeDialogContent.tsx

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

apps/web/components/dialog/EditLocationDialog.tsx

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

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,4 @@
-import { ClockIcon, XIcon } from "@heroicons/react/outline";
+import { ClockIcon } from "@heroicons/react/outline";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
 import { useMutation } from "react-query";

apps/web/components/eventtype/CreateEventType.tsx

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

apps/web/components/eventtype/RecurringEventController.tsx

@@ -1,18 +1,27 @@
 import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
-import React, { useState } from "react";
+import type { FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
 import { UseFormReturn } from "react-hook-form";
 import { Frequency as RRuleFrequency } from "rrule";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RecurringEvent } from "@calcom/types/Calendar";
+import { Alert } from "@calcom/ui/Alert";
 
 import Select from "@components/ui/form/Select";
 
-type RecurringEventControllerProps = { recurringEvent: RecurringEvent; formMethods: UseFormReturn<any, any> };
+type RecurringEventControllerProps = {
+  recurringEvent: RecurringEvent;
+  formMethods: UseFormReturn<FormValues>;
+  paymentEnabled: boolean;
+  onRecurringEventDefined: (value: boolean) => void;
+};
 
 export default function RecurringEventController({
   recurringEvent,
   formMethods,
+  paymentEnabled,
+  onRecurringEventDefined,
 }: RecurringEventControllerProps) {
   const { t } = useLocale();
 
@@ -35,97 +44,105 @@ 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="w-full">
-        <div className="relative flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              onChange={(event) => {
-                setRecurringEventDefined(event?.target.checked);
-                if (!event?.target.checked) {
-                  formMethods.setValue("recurringEvent", {});
-                } else {
-                  formMethods.setValue(
-                    "recurringEvent",
-                    recurringEventDefined
-                      ? recurringEvent
-                      : {
-                          interval: 1,
-                          count: 12,
-                          freq: RRuleFrequency.WEEKLY,
-                        }
-                  );
-                }
-                recurringEvent = formMethods.getValues("recurringEvent");
-              }}
-              type="checkbox"
-              className="text-primary-600  h-4 w-4 rounded border-gray-300"
-              defaultChecked={recurringEventDefined}
-              data-testid="recurring-event-check"
-            />
-          </div>
-          <div className="text-sm ltr:ml-3 rtl:mr-3">
-            <p className="text-neutral-900">{t("recurring_event_description")}</p>
-          </div>
-        </div>
-        <Collapsible
-          open={recurringEventDefined}
-          data-testid="recurring-event-collapsible"
-          onOpenChange={() => setRecurringEventDefined(!recurringEventDefined)}>
-          <CollapsibleContent className="mt-4 text-sm">
-            <div className="flex items-center">
-              <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
-              <input
-                type="number"
-                min="1"
-                max="20"
-                className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
-                defaultValue={recurringEvent?.interval || 1}
-                onChange={(event) => {
-                  setRecurringEventInterval(parseInt(event?.target.value));
-                  recurringEvent.interval = parseInt(event?.target.value);
-                  formMethods.setValue("recurringEvent", recurringEvent);
-                }}
-              />
-              <Select
-                options={recurringEventFreqOptions}
-                value={recurringEventFreqOptions[recurringEventFrequency]}
-                isSearchable={false}
-                className="w-18 block min-w-0 rounded-sm sm:text-sm"
-                onChange={(e) => {
-                  if (e?.value) {
-                    setRecurringEventFrequency(parseInt(e?.value));
-                    recurringEvent.freq = parseInt(e?.value);
-                    formMethods.setValue("recurringEvent", recurringEvent);
-                  }
-                }}
-              />
+      <div className={!paymentEnabled ? "w-full" : ""}>
+        {paymentEnabled ? (
+          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
+        ) : (
+          <>
+            <div className="relative flex items-start">
+              <div className="flex h-5 items-center">
+                <input
+                  onChange={(event) => {
+                    setRecurringEventDefined(event?.target.checked);
+                    onRecurringEventDefined(event?.target.checked);
+                    if (!event?.target.checked) {
+                      formMethods.setValue("recurringEvent", {});
+                    } else {
+                      formMethods.setValue(
+                        "recurringEvent",
+                        recurringEventDefined
+                          ? recurringEvent
+                          : {
+                              interval: 1,
+                              count: 12,
+                              freq: RRuleFrequency.WEEKLY,
+                            }
+                      );
+                    }
+                    recurringEvent = formMethods.getValues("recurringEvent");
+                  }}
+                  type="checkbox"
+                  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">
+                <label htmlFor="recurringEvent" className="text-neutral-900">
+                  {t("recurring_event_description")}
+                </label>
+              </div>
             </div>
-            <div className="mt-4 flex items-center">
-              <p className="mr-2 text-neutral-900">{t("max")}</p>
-              <input
-                type="number"
-                min="1"
-                max="20"
-                className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
-                defaultValue={recurringEvent?.count || 12}
-                onChange={(event) => {
-                  setRecurringEventCount(parseInt(event?.target.value));
-                  recurringEvent.count = parseInt(event?.target.value);
-                  formMethods.setValue("recurringEvent", recurringEvent);
-                }}
-              />
-              <p className="mr-2 text-neutral-900">
-                {t(`${RRuleFrequency[recurringEventFrequency].toString().toLowerCase()}`, {
-                  count: recurringEventCount,
-                })}
-              </p>
-            </div>
-          </CollapsibleContent>
-        </Collapsible>
+            <Collapsible
+              open={recurringEventDefined}
+              data-testid="recurring-event-collapsible"
+              onOpenChange={() => setRecurringEventDefined(!recurringEventDefined)}>
+              <CollapsibleContent className="mt-4 text-sm">
+                <div className="flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEvent?.interval || 1}
+                    onChange={(event) => {
+                      setRecurringEventInterval(parseInt(event?.target.value));
+                      recurringEvent.interval = parseInt(event?.target.value);
+                      formMethods.setValue("recurringEvent", recurringEvent);
+                    }}
+                  />
+                  <Select
+                    options={recurringEventFreqOptions}
+                    value={recurringEventFreqOptions[recurringEventFrequency]}
+                    isSearchable={false}
+                    className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                    onChange={(e) => {
+                      if (e?.value) {
+                        setRecurringEventFrequency(parseInt(e?.value));
+                        recurringEvent.freq = parseInt(e?.value);
+                        formMethods.setValue("recurringEvent", recurringEvent);
+                      }
+                    }}
+                  />
+                </div>
+                <div className="mt-4 flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("max")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEvent?.count || 12}
+                    onChange={(event) => {
+                      setRecurringEventCount(parseInt(event?.target.value));
+                      recurringEvent.count = parseInt(event?.target.value);
+                      formMethods.setValue("recurringEvent", recurringEvent);
+                    }}
+                  />
+                  <p className="mr-2 text-neutral-900">
+                    {t(`${RRuleFrequency[recurringEventFrequency].toString().toLowerCase()}`, {
+                      count: recurringEventCount,
+                    })}
+                  </p>
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </>
+        )}
       </div>
     </div>
   );

apps/web/components/integrations/DisconnectStripeIntegration.tsx

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

apps/web/components/integrations/IntegrationListItem.tsx

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

apps/web/components/security/DisableUserImpersonation.tsx

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

apps/web/components/security/EnableTwoFactorModal.tsx

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

apps/web/components/team/MemberInvitationModal.tsx

@@ -1,10 +1,10 @@
 import { UserIcon } from "@heroicons/react/outline";
 import { InformationCircleIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
-import React, { useState, useEffect, SyntheticEvent, useMemo } from "react";
+import React, { useState, SyntheticEvent, useMemo } from "react";
 
 import Button from "@calcom/ui/Button";
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";

apps/web/components/team/MemberListItem.tsx

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

apps/web/components/team/TeamList.tsx

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

apps/web/components/team/TeamListItem.tsx

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

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

@@ -5,13 +5,12 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
-import { 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"];
@@ -52,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>

apps/web/components/ui/AdminRequired.tsx

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

apps/web/components/ui/AuthContainer.tsx

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

apps/web/components/ui/Avatar.tsx

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

apps/web/components/ui/AvatarSSR.tsx

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

apps/web/components/ui/ImpersonatingBanner.tsx

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

apps/web/components/ui/ModalContainer.tsx

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

apps/web/components/ui/PoweredByCal.tsx

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

apps/web/components/ui/TableActions.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 };

apps/web/components/ui/WeekdaySelect.tsx

@@ -6,6 +6,7 @@ interface WeekdaySelectProps {
 }
 
 export const WeekdaySelect = (props: WeekdaySelectProps) => {
+  const { onSelect } = props;
   const [activeDays, setActiveDays] = useState<boolean[]>(
     Array.from(Array(7).keys()).map((v, i) => (props.defaultValue || []).includes(i))
   );
@@ -13,8 +14,8 @@ export const WeekdaySelect = (props: WeekdaySelectProps) => {
   const days = ["S", "M", "T", "W", "T", "F", "S"];
 
   useEffect(() => {
-    props.onSelect(activeDays.map((v, idx) => (v ? idx : -1)).filter((v) => v !== -1));
-  }, [activeDays]);
+    onSelect(activeDays.map((v, idx) => (v ? idx : -1)).filter((v) => v !== -1));
+  }, [onSelect, activeDays]);
 
   const toggleDay = (idx: number) => {
     activeDays[idx] = !activeDays[idx];

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

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

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

@@ -1,56 +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 [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(() => {
-    props.onChange(selectedOptions);
-  }, [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,
@@ -72,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"
@@ -85,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>
@@ -94,6 +69,4 @@ export const CheckedSelect = (props: CheckedSelectProps) => {
   );
 };
 
-CheckedSelect.displayName = "CheckedSelect";
-
 export default CheckedSelect;

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

@@ -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 };