v1.8.2

* Delete CreateEventTypeBtn.tsx

* Adding Permission to creation router

* Disable button if membership role is member

* Fix linting error

* Update explicit role selection

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

* Type fix

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

.env.example

@@ -127,3 +127,6 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 # **********************************************************************************************************
+
+# Set the following value to true if you wish to enable Team Impersonation
+NEXT_PUBLIC_TEAM_IMPERSONATION=false

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

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

.github/workflows/cron-scheduleEmailReminders.yml

@@ -16,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_API_KEY }}
         run: |
-          curl ${{ secrets.APP_URL }}/api/cron/scheduleEmailReminders \
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleEmailReminders \
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \

.github/workflows/cron-scheduleSMSReminders.yml

@@ -16,7 +16,7 @@ jobs:
       - name: cURL request
         if: ${{ env.APP_URL && env.CRON_API_KEY }}
         run: |
-          curl ${{ secrets.APP_URL }}/api/cron/scheduleSMSReminders \
+          curl ${{ secrets.APP_URL }}/api/cron/workflows/scheduleSMSReminders \
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \

.github/workflows/labeler.yml

@@ -10,5 +10,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/labeler@v4
+        # Checking the actor will prevent your Action run failing on non-Dependabot
+        # PRs but also ensures that it only does work for Dependabot PRs.
+        if: ${{ github.actor == 'github-actions[bot]' }}
         with:
           repo-token: "${{ secrets.GITHUB_TOKEN }}"

.gitignore

@@ -73,6 +73,9 @@ dist
 # Linting
 lint-results
 
+#Storybook
+apps/storybook/build-storybook.log
+
 # Snaplet
 .snaplet/snapshots
 .snaplet/structure.d.ts

README.md

@@ -167,7 +167,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    </details>
 
 1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
-1. Set up the database using the Prisma schema (found in `apps/web/prisma/schema.prisma`)
+1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
 
    ```sh
    yarn workspace @calcom/prisma db-deploy
@@ -189,7 +189,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 1. Click on the `User` model to add a new user record.
 1. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
-   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `apps/web/prisma/schema.prisma` file.
+   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `packages/prisma/schema.prisma` file.
 1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
 
 ### E2E-Testing
@@ -424,14 +424,14 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 1. Select all events for the webhook you interested, e.g. `sleep_created`
 1. Copy the webhook secret (`sec...`) to `VITAL_WEBHOOK_SECRET` in the .env.appStore file.
 
-## Workflows 
+## Workflows
 
 ### Setting up SendGrid for Email reminders
 
 1. Create a SendGrid account (https://signup.sendgrid.com/)
-2. Go to Settings -> API keys and create an API key 
+2. Go to Settings -> API keys and create an API key
 3. Copy API key to your .env file into the SENDGRID_API_KEY field
-4. Go to Settings -> Sender Authentication and verify a single sender 
+4. Go to Settings -> Sender Authentication and verify a single sender
 5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field
 
 ### Setting up Twilio for SMS reminders
@@ -445,9 +445,9 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 7. Click 'Add Senders'
 8. Choose phone number as sender type
 9. Add the listed phone number
-9. Leave all other fields as they are 
-10. Complete setup and click ‘View my new Messaging Service’
-11. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
+10. Leave all other fields as they are
+11. Complete setup and click ‘View my new Messaging Service’
+12. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field
 
 <!-- LICENSE -->
 

apps/storybook/.gitignore

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

apps/storybook/.storybook/main.js

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

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

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

apps/storybook/.storybook/preview.js

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

apps/storybook/README.md

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

apps/storybook/next-env.d.ts

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

apps/storybook/next.config.js

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

apps/storybook/package.json

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

apps/storybook/pages/_app.tsx

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

apps/storybook/pages/index.tsx

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

apps/storybook/postcss.config.js

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

apps/storybook/public/vercel.svg

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

apps/storybook/stories/Avatar.stories.tsx

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

apps/storybook/stories/AvatarGroup.stories.tsx

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

apps/storybook/stories/Badge.stories.tsx

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

apps/storybook/stories/Banner.stories.tsx

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

apps/storybook/stories/Breadcrumb.stories.tsx

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

apps/storybook/stories/Button.stories.tsx

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

apps/storybook/stories/ButtonGroup.stories.tsx

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

apps/storybook/stories/Checkbox.stories.tsx

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

apps/storybook/stories/Colors.stories.tsx

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

apps/storybook/stories/DatePicker.stories.tsx

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

apps/storybook/stories/EmptyScreen.stories.tsx

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

apps/storybook/stories/FormStep.stories.tsx

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

apps/storybook/stories/Input.stories.tsx

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

apps/storybook/stories/Modal.stories.tsx

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

apps/storybook/stories/Notifcations.stories.tsx

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

apps/storybook/stories/PageHeader.stories.tsx

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

apps/storybook/stories/Radio.stories.tsx

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

apps/storybook/stories/Select.stories.tsx

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

apps/storybook/stories/Switch.stories.tsx

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

apps/storybook/stories/TabItem.stories.tsx

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

apps/storybook/stories/VerticalTab.stories.tsx

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

apps/storybook/styles/globals.css

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

apps/storybook/tailwind.config.js

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

apps/storybook/tsconfig.json

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

apps/web/components/AdditionalCalendarSelector.tsx

@@ -4,11 +4,11 @@ import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
-import { trpc } from "@lib/trpc";
 
 interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;

apps/web/components/App.tsx

@@ -16,12 +16,11 @@ import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
 import LicenseRequired from "@ee/components/LicenseRequired";
 
-import { trpc } from "@lib/trpc";
-
 import Shell from "@components/Shell";
 import Badge from "@components/ui/Badge";
 
@@ -119,32 +118,38 @@ const Component = ({
           <div className="mt-4 sm:mt-0 sm:text-right">
             {!isLoading ? (
               isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
-                <div className="space-x-3">
+                <div className="flex space-x-3">
                   <Button StartIcon={CheckIcon} color="secondary" disabled>
                     {installedAppCount > 0
                       ? t("active_install", { count: installedAppCount })
                       : t("globally_install")}
                   </Button>
-                  <InstallAppButton
-                    type={type}
-                    isProOnly={isProOnly}
-                    render={({ useDefaultComponent, ...props }) => {
-                      if (useDefaultComponent) {
-                        props = {
-                          onClick: () => {
-                            mutation.mutate({ type });
-                          },
-                          loading: mutation.isLoading,
-                        };
-                      }
-                      return (
-                        <Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
-                          {t("add_another")}
-                        </Button>
-                      );
-                    }}
-                  />
+                  {!isGlobal && (
+                    <InstallAppButton
+                      type={type}
+                      isProOnly={isProOnly}
+                      render={({ useDefaultComponent, ...props }) => {
+                        if (useDefaultComponent) {
+                          props = {
+                            onClick: () => {
+                              mutation.mutate({ type });
+                            },
+                            loading: mutation.isLoading,
+                          };
+                        }
+                        return (
+                          <Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
+                            {t("add_another")}
+                          </Button>
+                        );
+                      }}
+                    />
+                  )}
                 </div>
+              ) : installedAppCount > 0 ? (
+                <Button color="secondary" disabled title="App already installed">
+                  {t("installed")}
+                </Button>
               ) : (
                 <InstallAppButton
                   type={type}

apps/web/components/BookingsShell.tsx

@@ -24,7 +24,7 @@ const tabs = [
 export default function BookingsShell({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <NavTabs tabs={tabs} linkProps={{ shallow: true }} />
+      <NavTabs tabs={tabs} />
       <main>{children}</main>
     </>
   );

apps/web/components/DestinationCalendarSelector.tsx

@@ -3,8 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { trpc } from "@lib/trpc";
+import { trpc } from "@calcom/trpc/react";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;

apps/web/components/Embed.tsx

@@ -8,12 +8,12 @@ import { components, ControlProps } from "react-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { EventType } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
 import { Button, Switch } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
-import { trpc } from "@lib/trpc";
 
 import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";
@@ -143,7 +143,7 @@ function MyComponent() {
       const cal = await getCalApi();
       ${uiInstructionCode}
     })();
-  }, []) 
+  }, [])
   return <Cal calLink="${calLink}" style={{width:"${width}",height:"${height}",overflow:"scroll"}} />;
 };`;
     },
@@ -164,7 +164,7 @@ function MyComponent() {
       Cal("floatingButton", ${floatingButtonArg});
       ${uiInstructionCode}
     })();
-  }, [])     
+  }, [])
 };`;
     },
     "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
@@ -177,7 +177,7 @@ function MyComponent() {
       const cal = await getCalApi();
       ${uiInstructionCode}
     })();
-  }, []) 
+  }, [])
   return <button data-cal-link="${calLink}" />;
 };`;
     },

apps/web/components/I18nLanguageHandler.tsx

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

apps/web/components/Kbar.tsx

@@ -106,7 +106,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => {
       section: "Profile Settings",
       shortcut: ["p", "s"],
       keywords: "setting profile",
-      perform: () => router.push("/settings"),
+      perform: () => router.push("/settings/profile"),
     },
     {
       id: "avatar",
@@ -114,7 +114,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => {
       section: "Profile Settings",
       shortcut: ["c", "a"],
       keywords: "remove change modify avatar",
-      perform: () => router.push("/settings"),
+      perform: () => router.push("/settings/profile"),
     },
     {
       id: "timezone",
@@ -122,7 +122,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => {
       section: "Profile Settings",
       shortcut: ["c", "t"],
       keywords: "change modify timezone",
-      perform: () => router.push("/settings"),
+      perform: () => router.push("/settings/profile"),
     },
     {
       id: "brand-color",
@@ -130,7 +130,7 @@ export const KBarRoot = ({ children }: { children: React.ReactNode }) => {
       section: "Profile Settings",
       shortcut: ["b", "c"],
       keywords: "change modify brand color",
-      perform: () => router.push("/settings"),
+      perform: () => router.push("/settings/profile"),
     },
     {
       id: "teams",

apps/web/components/PencilEdit.tsx

@@ -1,56 +0,0 @@
-// This component is abstracted from /event-types/[type] for common usecase.
-import { PencilIcon } from "@heroicons/react/solid";
-import { useState } from "react";
-
-export default function PencilEdit({
-  value,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  onChange = () => {},
-  placeholder = "",
-  readOnly = false,
-}: {
-  value: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  readOnly?: boolean;
-}) {
-  const [editIcon, setEditIcon] = useState(true);
-  const onDivClick = !readOnly
-    ? () => {
-        return setEditIcon(false);
-      }
-    : // eslint-disable-next-line @typescript-eslint/no-empty-function
-      () => {};
-  return (
-    <div className="group relative min-h-[28px] cursor-pointer" onClick={onDivClick}>
-      {editIcon ? (
-        <>
-          <h1
-            style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
-            className="inline-block  pl-0 text-gray-900 focus:text-black group-hover:text-gray-500">
-            {value}
-          </h1>
-          {!readOnly ? (
-            <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
-          ) : null}
-        </>
-      ) : (
-        <div style={{ marginBottom: -11 }}>
-          <input
-            type="text"
-            autoFocus
-            style={{ top: -6, fontSize: 22 }}
-            required
-            className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
-            placeholder={placeholder}
-            defaultValue={value}
-            onBlur={(e) => {
-              setEditIcon(true);
-              onChange(e.target.value);
-            }}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

apps/web/components/Shell.tsx

@@ -1,18 +1,18 @@
 import { SelectorIcon } from "@heroicons/react/outline";
-import { CollectionIcon } from "@heroicons/react/solid";
 import {
   ArrowLeftIcon,
   CalendarIcon,
   ClockIcon,
   CogIcon,
+  CollectionIcon,
   ExternalLinkIcon,
+  LightningBoltIcon,
   LinkIcon,
   LogoutIcon,
   MapIcon,
   MoonIcon,
-  ViewGridIcon,
   QuestionMarkCircleIcon,
-  LightningBoltIcon,
+  ViewGridIcon,
 } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
@@ -22,8 +22,10 @@ import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import CustomBranding from "@calcom/lib/CustomBranding";
 import { WEBAPP_URL, JOIN_SLACK, ROADMAP } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
@@ -39,9 +41,7 @@ import ErrorBoundary from "@lib/ErrorBoundary";
 import classNames from "@lib/classNames";
 import { shouldShowOnboarding } from "@lib/getting-started";
 import useMeQuery from "@lib/hooks/useMeQuery";
-import { trpc } from "@lib/trpc";
 
-import CustomBranding from "@components/CustomBranding";
 import { KBarRoot, KBarContent, KBarTrigger } from "@components/Kbar";
 import Loader from "@components/Loader";
 import { HeadSeo } from "@components/seo/head-seo";
@@ -216,13 +216,13 @@ const Layout = ({
             <div className="flex w-14 flex-col lg:w-56">
               <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
                 <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
-                  <div className="justify-between md:hidden lg:flex">
+                  <div className="items-center justify-between md:hidden lg:flex">
                     <Link href="/event-types">
                       <a className="px-4">
                         <Logo small />
                       </a>
                     </Link>
-                    <div className="px-2">
+                    <div className="px-4">
                       <KBarTrigger />
                     </div>
                   </div>
@@ -311,6 +311,7 @@ const Layout = ({
         )}
 
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
+          <ImpersonatingBanner />
           <main
             className={classNames(
               "relative z-0 flex-1 overflow-y-auto focus:outline-none",
@@ -349,7 +350,6 @@ const Layout = ({
                 props.flexChildrenContainer && "flex flex-1 flex-col",
                 !props.large && "py-8"
               )}>
-              <ImpersonatingBanner />
               {!!props.backPath && (
                 <div className="mx-3 mb-8 sm:mx-8">
                   <Button
@@ -494,7 +494,17 @@ function UserDropdown({ small }: { small?: boolean }) {
   const { t } = useLocale();
   const query = useMeQuery();
   const user = query.data;
-
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    const Beacon = window.Beacon;
+    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
+    Beacon &&
+      Beacon("session-data", {
+        username: user?.username || "Unknown",
+        screenResolution: `${screen.width}x${screen.height}`,
+      });
+  });
   const mutation = trpc.useMutation("viewer.away", {
     onSettled() {
       utils.invalidateQueries("viewer.me");
@@ -570,7 +580,7 @@ function UserDropdown({ small }: { small?: boolean }) {
             <DropdownMenuItem>
               <a
                 onClick={() => {
-                  mutation.mutate({ away: user?.away });
+                  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">

apps/web/components/apps/AppCard.tsx

@@ -1,9 +1,8 @@
 import Link from "next/link";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import Badge from "@components/ui/Badge";
 
 interface AppCardProps {

apps/web/components/auth/SAMLLogin.tsx

@@ -2,11 +2,11 @@ import { signIn } from "next-auth/react";
 import { Dispatch, SetStateAction } from "react";
 import { useFormContext } from "react-hook-form";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { trpc } from "@lib/trpc";
 
 interface Props {
   email: string;

apps/web/components/availability/NewScheduleButton.tsx

@@ -4,12 +4,12 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import { Form } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
-import { trpc } from "@lib/trpc";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();

apps/web/components/availability/Schedule.tsx

@@ -8,7 +8,8 @@ import { GroupBase, Props } from "react-select";
 import dayjs, { Dayjs, ConfigType } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
-import Dropdown, { DropdownMenuTrigger, DropdownMenuContent } from "@calcom/ui/Dropdown";
+import Dropdown, { DropdownMenuContent } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { defaultDayRange } from "@lib/availability";
 import { weekdayNames } from "@lib/core/i18n/weekday";
@@ -202,7 +203,7 @@ export const DayRanges = ({
   const { setValue, watch } = useFormContext();
   // XXX: Hack to make copying times work; `fields` is out of date until save.
   const watcher = watch(name);
-
+  const { t } = useLocale();
   const { fields, replace, append, remove } = useFieldArray({
     name,
   });
@@ -242,16 +243,18 @@ export const DayRanges = ({
           </div>
           {index === 0 && (
             <div className="absolute top-2 right-0 text-right sm:relative sm:top-0 sm:flex-grow">
-              <Button
-                className="text-neutral-400"
-                type="button"
-                color="minimal"
-                size="icon"
-                StartIcon={PlusIcon}
-                onClick={handleAppend}
-              />
+              <Tooltip content={t("add_time_availability") as string}>
+                <Button
+                  className="text-neutral-400"
+                  type="button"
+                  color="minimal"
+                  size="icon"
+                  StartIcon={PlusIcon}
+                  onClick={handleAppend}
+                />
+              </Tooltip>
               <Dropdown>
-                <DropdownMenuTrigger asChild>
+                <Tooltip content={t("duplicate") as string}>
                   <Button
                     type="button"
                     color="minimal"
@@ -259,7 +262,7 @@ export const DayRanges = ({
                     StartIcon={DuplicateIcon}
                     onClick={handleAppend}
                   />
-                </DropdownMenuTrigger>
+                </Tooltip>
                 <DropdownMenuContent>
                   <CopyTimes
                     disabled={[parseInt(name.substring(name.lastIndexOf(".") + 1), 10)]}

apps/web/components/availability/ScheduleListItem.tsx

@@ -5,11 +5,10 @@ import { Fragment } from "react";
 import { availabilityAsString } from "@calcom/lib/availability";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Availability } from "@calcom/prisma/client";
+import { inferQueryOutput } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 
-import { inferQueryOutput } from "@lib/trpc";
-
 export function ScheduleListItem({
   schedule,
   deleteFunction,

apps/web/components/booking/AvailableTimes.tsx

@@ -6,13 +6,12 @@ import { FC, useEffect, useState } from "react";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
+import type { Slot } from "@calcom/trpc/server/routers/viewer/slots";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
 
-import type { Slot } from "@server/routers/viewer/slots";
-
 type AvailableTimesProps = {
   timeFormat: string;
   eventTypeId: number;

apps/web/components/booking/BookingListItem.tsx

@@ -14,11 +14,11 @@ import { useState } from "react";
 import { useMutation } from "react-query";
 
 import dayjs from "@calcom/dayjs";
-import { parseRecurringEvent } from "@calcom/lib";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
@@ -28,8 +28,7 @@ import { HttpError } from "@lib/core/http/error";
 import useMeQuery from "@lib/hooks/useMeQuery";
 import { linkValueToString } from "@lib/linkValueToString";
 import { LocationType } from "@lib/location";
-import { parseRecurringDates } from "@lib/parseDate";
-import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";
+import { extractRecurringDates } from "@lib/parseDate";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
@@ -41,7 +40,7 @@ type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
 type BookingItemProps = BookingItem & {
   listingStatus: BookingListingStatus;
-  recurringCount?: number;
+  recurringBookings?: BookingItem[];
 };
 
 function BookingListItem(booking: BookingItemProps) {
@@ -127,7 +126,13 @@ function BookingListItem(booking: BookingItemProps) {
         booking.listingStatus === "recurring" && booking.recurringEventId !== null
           ? t("cancel_all_remaining")
           : t("cancel"),
-      href: `/cancel/${booking.uid}`,
+      /* When cancelling we need to let the UI and the API know if the intention is to
+         cancel all remaining bookings or just that booking instance. */
+      href: `/cancel/${booking.uid}${
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? "?allRemainingBookings=true"
+          : ""
+      }`,
       icon: XIcon,
     },
     {
@@ -202,14 +207,10 @@ function BookingListItem(booking: BookingItemProps) {
   let recurringStrings: string[] = [];
   let recurringDates: Date[] = [];
   const today = new Date();
-  if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== undefined) {
-    [recurringStrings, recurringDates] = parseRecurringDates(
-      {
-        startDate: booking.startTime,
-        timeZone: user?.timeZone,
-        recurringEvent: parseRecurringEvent(booking.eventType.recurringEvent),
-        recurringCount: booking.recurringCount,
-      },
+  if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
+    [recurringStrings, recurringDates] = extractRecurringDates(
+      booking.recurringBookings,
+      user?.timeZone,
       i18n
     );
     if (booking.status === BookingStatus.PENDING) {
@@ -308,7 +309,7 @@ function BookingListItem(booking: BookingItemProps) {
               {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
             </div>
             <div className="text-sm text-gray-400">
-              {booking.recurringCount &&
+              {booking.recurringBookings &&
                 booking.eventType?.recurringEvent?.freq &&
                 (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
                   <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
@@ -327,7 +328,7 @@ function BookingListItem(booking: BookingItemProps) {
                               : getEveryFreqFor({
                                   t,
                                   recurringEvent: booking.eventType.recurringEvent,
-                                  recurringCount: booking.recurringCount,
+                                  recurringCount: booking.recurringBookings.length,
                                 })}
                           </p>
                         </div>

apps/web/components/booking/CancelBooking.tsx

@@ -32,90 +32,86 @@ export default function CancelBooking(props: 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);
+  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>
+  return (
+    <>
+      {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>
-        )}
-        {!error && (
-          <div className="mt-5 sm:mt-6">
-            <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
-            <textarea
-              placeholder={t("cancellation_reason_placeholder")}
-              value={cancellationReason}
-              onChange={(e) => setCancellationReason(e.target.value)}
-              className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
-              rows={3}
-            />
-            <div className="flex rtl:space-x-reverse">
-              {!props.recurringEvent && (
-                <div className="w-full">
-                  <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
-                    {t("reschedule_this")}
-                  </Button>
-                </div>
-              )}
-              <div className="w-full space-x-2 text-right">
-                <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
-                  {t("nevermind")}
-                </Button>
-                <Button
-                  data-testid="cancel"
-                  onClick={async () => {
-                    setLoading(true);
-
-                    const payload = {
-                      uid: booking?.uid,
-                      reason: cancellationReason,
-                    };
-
-                    telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
-
-                    const res = await fetch("/api/cancel", {
-                      body: JSON.stringify(payload),
-                      headers: {
-                        "Content-Type": "application/json",
-                      },
-                      method: "DELETE",
-                    });
-
-                    if (res.status >= 200 && res.status < 300) {
-                      await router.push(
-                        `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
-                          profile.slug
-                        }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
-                      );
-                    } else {
-                      setLoading(false);
-                      setError(
-                        `${t("error_with_status_code_occured", { status: res.status })} ${t(
-                          "please_try_again"
-                        )}`
-                      );
-                    }
-                  }}
-                  loading={loading}>
-                  {t("cancel_event")}
+          <div className="mt-3 text-center sm:mt-5">
+            <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+              {error}
+            </h3>
+          </div>
+        </div>
+      )}
+      {!error && (
+        <div className="mt-5 sm:mt-6">
+          <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+          <textarea
+            placeholder={t("cancellation_reason_placeholder")}
+            value={cancellationReason}
+            onChange={(e) => setCancellationReason(e.target.value)}
+            className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+            rows={3}
+          />
+          <div className="flex rtl:space-x-reverse">
+            {!props.recurringEvent && (
+              <div className="w-full">
+                <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                  {t("reschedule_this")}
                 </Button>
               </div>
+            )}
+            <div className="w-full space-x-2 text-right">
+              <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+                {t("nevermind")}
+              </Button>
+              <Button
+                data-testid="cancel"
+                onClick={async () => {
+                  setLoading(true);
+
+                  const payload = {
+                    uid: booking?.uid,
+                    reason: cancellationReason,
+                  };
+
+                  telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+
+                  const res = await fetch("/api/cancel", {
+                    body: JSON.stringify(payload),
+                    headers: {
+                      "Content-Type": "application/json",
+                    },
+                    method: "DELETE",
+                  });
+
+                  if (res.status >= 200 && res.status < 300) {
+                    await router.push(
+                      `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
+                        profile.slug
+                      }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
+                    );
+                  } else {
+                    setLoading(false);
+                    setError(
+                      `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                        "please_try_again"
+                      )}`
+                    );
+                  }
+                }}
+                loading={loading}>
+                {t("cancel_event")}
+              </Button>
             </div>
           </div>
-        )}
-      </>
-    );
-  }
-  return <></>;
+        </div>
+      )}
+    </>
+  );
 }

apps/web/components/booking/TimeOptions.tsx

@@ -1,9 +1,8 @@
 import { FC, useEffect, useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 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";
@@ -11,11 +10,12 @@ import { is24h, timeZone } from "../../lib/clock";
 type Props = {
   onSelectTimeZone: (selectedTimeZone: string) => void;
   onToggle24hClock: (is24hClock: boolean) => void;
+  timeFormat: string;
 };
 
-const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
+const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const [is24hClock, setIs24hClock] = useState(false);
+  const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
   const { t } = useLocale();
 
   useEffect(() => {

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

@@ -25,16 +25,18 @@ import { z } from "zod";
 import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
-  useEmbedNonStylesConfig,
-  useEmbedStyles,
-  useIsBackgroundTransparent,
   useIsEmbed,
+  useEmbedStyles,
+  useEmbedNonStylesConfig,
+  useIsBackgroundTransparent,
 } from "@calcom/embed-core/embed-iframe";
+import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { CAL_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { localStorage } from "@calcom/lib/webstorage";
+import { trpc } from "@calcom/trpc/react";
 import DatePicker from "@calcom/ui/booker/DatePicker";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
@@ -44,9 +46,7 @@ import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
-import { trpc } from "@lib/trpc";
 
-import CustomBranding from "@components/CustomBranding";
 import AvailableTimes from "@components/booking/AvailableTimes";
 import TimeOptions from "@components/booking/TimeOptions";
 import { HeadSeo } from "@components/seo/head-seo";
@@ -166,14 +166,18 @@ const SlotPicker = ({
 
     // Etc/GMT is not actually a timeZone, so handle this select option explicitly to prevent a hard crash.
     if (timeZone === "Etc/GMT") {
-      setBrowsingDate(dayjs.utc(month).startOf("month"));
+      setBrowsingDate(dayjs.utc(month).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0));
       if (date) {
         setSelectedDate(dayjs.utc(date));
       }
     } else {
-      setBrowsingDate(dayjs(month).tz(timeZone, true).startOf("month"));
+      // Set the start of the month without shifting time like startOf() may do.
+      setBrowsingDate(
+        dayjs.tz(month, timeZone).set("date", 1).set("hour", 0).set("minute", 0).set("second", 0)
+      );
       if (date) {
-        setSelectedDate(dayjs(date).tz(timeZone, true));
+        // It's important to set the date immediately to the timeZone, dayjs(date) will convert to browsertime.
+        setSelectedDate(dayjs.tz(date, timeZone));
       }
     }
   }, [router.isReady, month, date, timeZone]);
@@ -237,15 +241,18 @@ function TimezoneDropdown({
   onChangeTimeFormat,
   onChangeTimeZone,
   timeZone,
+  timeFormat,
 }: {
   onChangeTimeFormat: (newTimeFormat: string) => void;
   onChangeTimeZone: (newTimeZone: string) => void;
   timeZone?: string;
+  timeFormat: string;
 }) {
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
 
   useEffect(() => {
     handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -273,7 +280,11 @@ function TimezoneDropdown({
         </p>
       </Collapsible.Trigger>
       <Collapsible.Content>
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
+        <TimeOptions
+          onSelectTimeZone={handleSelectTimeZone}
+          onToggle24hClock={handleToggle24hClock}
+          timeFormat={timeFormat}
+        />
       </Collapsible.Content>
     </Collapsible.Root>
   );
@@ -303,7 +314,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const isEmbed = useIsEmbed();
   const query = dateQuerySchema.parse(router.query);
   const { rescheduleUid } = query;
-  const { Theme } = useTheme(profile.theme);
+  useTheme(profile.theme);
   const { t } = useLocale();
   const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
@@ -359,6 +370,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const timezoneDropdown = useMemo(
     () => (
       <TimezoneDropdown
+        timeFormat={timeFormat}
         onChangeTimeFormat={setTimeFormat}
         timeZone={timeZone}
         onChangeTimeZone={setTimeZone}
@@ -372,12 +384,15 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
 
   return (
     <>
-      <Theme />
       <HeadSeo
         title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
         description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
         name={profile.name || undefined}
         username={slug || undefined}
+        nextSeoProps={{
+          nofollow: eventType.hidden,
+          noindex: eventType.hidden,
+        }}
       />
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <div>

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

@@ -30,6 +30,7 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
+import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
@@ -50,7 +51,6 @@ import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 
-import CustomBranding from "@components/CustomBranding";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import type PhoneInputType from "@components/ui/form/PhoneInput";
 
@@ -208,7 +208,7 @@ const BookingPage = ({
   });
 
   const rescheduleUid = router.query.rescheduleUid as string;
-  const { isReady, Theme } = useTheme(profile.theme);
+  useTheme(profile.theme);
   const date = asStringOrNull(router.query.date);
 
   const [guestToggle, setGuestToggle] = useState(booking && booking.attendees.length > 1);
@@ -465,7 +465,6 @@ const BookingPage = ({
 
   return (
     <div>
-      <Theme />
       <Head>
         <title>
           {rescheduleUid
@@ -488,430 +487,426 @@ const BookingPage = ({
           isEmbed ? "" : "sm:my-24",
           "my-0 max-w-3xl "
         )}>
-        {isReady && (
-          <div
-            className={classNames(
-              "main overflow-hidden",
-              isEmbed ? "" : "border border-gray-200",
-              isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
-              "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">
-                <AvatarGroup
-                  border="border-2 border-white dark:border-gray-800"
-                  size={14}
-                  items={[
-                    { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
-                  ].concat(
-                    eventType.users
-                      .filter((user) => user.name !== profile.name)
-                      .map((user) => ({
-                        title: user.name || "",
-                        image: user.avatar || "",
-                        alt: user.name || "",
-                      }))
-                  )}
-                />
-                <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
-                  {profile.name}
-                </h2>
-                <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>
+        <div
+          className={classNames(
+            "main overflow-hidden",
+            isEmbed ? "" : "border border-gray-200",
+            isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
+            "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">
+              <AvatarGroup
+                border="border-2 border-white dark:border-gray-800"
+                size={14}
+                items={[
+                  { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
+                ].concat(
+                  eventType.users
+                    .filter((user) => user.name !== profile.name)
+                    .map((user) => ({
+                      title: user.name || "",
+                      image: user.avatar || "",
+                      alt: user.name || "",
+                    }))
                 )}
-                {eventType?.description && (
-                  <p className="text-bookinglight mb-2 dark:text-white">
-                    <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                    {eventType.description}
-                  </p>
-                )}
-                {eventType?.requiresConfirmation && (
-                  <p className="text-bookinglight mb-2 dark:text-white">
-                    <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                    {t("requires_confirmation")}
-                  </p>
-                )}
-                <p className="text-bookinglight mb-2 dark:text-white">
-                  <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                  {eventType.length} {t("minutes")}
+              />
+              <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
+                {profile.name}
+              </h2>
+              <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.price > 0 && (
-                  <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
-                    <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                    <IntlProvider locale="en">
-                      <FormattedNumber
-                        value={eventType.price / 100.0}
-                        style="currency"
-                        currency={eventType.currency.toUpperCase()}
-                      />
-                    </IntlProvider>
+              )}
+              {eventType?.description && (
+                <p className="text-bookinglight mb-2 dark:text-white">
+                  <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  {eventType.description}
+                </p>
+              )}
+              {eventType?.requiresConfirmation && (
+                <p className="text-bookinglight mb-2 dark:text-white">
+                  <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  {t("requires_confirmation")}
+                </p>
+              )}
+              <p className="text-bookinglight mb-2 dark:text-white">
+                <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                {eventType.length} {t("minutes")}
+              </p>
+              {eventType.price > 0 && (
+                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
+                  <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                  <IntlProvider locale="en">
+                    <FormattedNumber
+                      value={eventType.price / 100.0}
+                      style="currency"
+                      currency={eventType.currency.toUpperCase()}
+                    />
+                  </IntlProvider>
+                </p>
+              )}
+              {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                <div className="mb-3 text-gray-600 dark:text-white">
+                  <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                  <p className="mb-1 -ml-2 inline px-2 py-1">
+                    {getEveryFreqFor({
+                      t,
+                      recurringEvent: eventType.recurringEvent,
+                      recurringCount: recurringEventCount,
+                    })}
                   </p>
-                )}
-                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                  <div className="mb-3 text-gray-600 dark:text-white">
-                    <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                    <p className="mb-1 -ml-2 inline px-2 py-1">
-                      {getEveryFreqFor({
-                        t,
-                        recurringEvent: eventType.recurringEvent,
-                        recurringCount: recurringEventCount,
-                      })}
-                    </p>
+                </div>
+              )}
+              <div className="text-bookinghighlight mb-4 flex">
+                <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                <div className="-mt-1">
+                  {(rescheduleUid || !eventType.recurringEvent?.freq) &&
+                    parseDate(dayjs(date).tz(timeZone()), i18n)}
+                  {!rescheduleUid &&
+                    eventType.recurringEvent?.freq &&
+                    recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                    <div className="flex">
+                      <Tooltip
+                        content={recurringStrings.slice(5).map((aDate, key) => (
+                          <p key={key}>{aDate}</p>
+                        ))}>
+                        <p className="text-gray-600 dark:text-white">
+                          {t("plus_more", { count: recurringStrings.length - 5 })}
+                        </p>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              </div>
+              {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
+                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
+                  {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
+                </p>
+              )}
+              {booking?.startTime && rescheduleUid && (
+                <div>
+                  <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
+                    {t("former_time")}
+                  </p>
+                  <p className="text-gray-500 line-through dark:text-white">
+                    <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                  </p>
+                </div>
+              )}
+            </div>
+            <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
+              <Form form={bookingForm} handleSubmit={bookEvent}>
+                <div className="mb-4">
+                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
+                    {t("your_name")}
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      {...bookingForm.register("name", { required: true })}
+                      type="text"
+                      name="name"
+                      id="name"
+                      required
+                      className={inputClassName}
+                      placeholder={t("example_name")}
+                      disabled={disableInput}
+                    />
                   </div>
-                )}
-                <div className="text-bookinghighlight mb-4 flex">
-                  <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                  <div className="-mt-1">
-                    {(rescheduleUid || !eventType.recurringEvent?.freq) &&
-                      parseDate(dayjs(date).tz(timeZone()), i18n)}
-                    {!rescheduleUid &&
-                      eventType.recurringEvent?.freq &&
-                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
-                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
-                      <div className="flex">
-                        <Tooltip
-                          content={recurringStrings.slice(5).map((aDate, key) => (
-                            <p key={key}>{aDate}</p>
-                          ))}>
-                          <p className="text-gray-600 dark:text-white">
-                            {t("plus_more", { count: recurringStrings.length - 5 })}
-                          </p>
-                        </Tooltip>
+                </div>
+                <div className="mb-4">
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-white">
+                    {t("email_address")}
+                  </label>
+                  <div className="mt-1">
+                    <EmailInput
+                      {...bookingForm.register("email")}
+                      required
+                      className={classNames(
+                        inputClassName,
+                        bookingForm.formState.errors.email
+                          ? "border-red-700 focus:ring-red-700"
+                          : " border-gray-300  dark:border-gray-900"
+                      )}
+                      placeholder="you@example.com"
+                      type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
+                      disabled={disableInput}
+                    />
+                    {bookingForm.formState.errors.email && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("email_validation_error")}</p>
                       </div>
                     )}
                   </div>
                 </div>
-                {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
-                  <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
-                    {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
-                  </p>
-                )}
-                {booking?.startTime && rescheduleUid && (
-                  <div>
-                    <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
-                      {t("former_time")}
-                    </p>
-                    <p className="text-gray-500 line-through dark:text-white">
-                      <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
-                    </p>
-                  </div>
-                )}
-              </div>
-              <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
-                <Form form={bookingForm} handleSubmit={bookEvent}>
+                {locations.length > 1 && (
                   <div className="mb-4">
-                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("your_name")}
-                    </label>
-                    <div className="mt-1">
-                      <input
-                        {...bookingForm.register("name", { required: true })}
-                        type="text"
-                        name="name"
-                        id="name"
-                        required
-                        className={inputClassName}
-                        placeholder={t("example_name")}
-                        disabled={disableInput}
-                      />
-                    </div>
+                    <span className="block text-sm font-medium text-gray-700 dark:text-white">
+                      {t("location")}
+                    </span>
+                    {locations.map((location, i) => (
+                      <label key={i} className="block">
+                        <input
+                          type="radio"
+                          className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                          {...bookingForm.register("locationType", { required: true })}
+                          value={location.type}
+                          defaultChecked={selectedLocation === location.type}
+                        />
+                        <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-gray-500">
+                          {locationLabels[location.type]}
+                        </span>
+                      </label>
+                    ))}
                   </div>
+                )}
+                {selectedLocation === LocationType.Phone && (
                   <div className="mb-4">
                     <label
-                      htmlFor="email"
+                      htmlFor="phone"
                       className="block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("email_address")}
+                      {t("phone_number")}
                     </label>
                     <div className="mt-1">
-                      <EmailInput
-                        {...bookingForm.register("email")}
+                      <PhoneInput<BookingFormValues>
+                        control={bookingForm.control}
+                        name="phone"
+                        placeholder={t("enter_phone_number")}
+                        id="phone"
                         required
-                        className={classNames(
-                          inputClassName,
-                          bookingForm.formState.errors.email
-                            ? "border-red-700 focus:ring-red-700"
-                            : " border-gray-300  dark:border-gray-900"
-                        )}
-                        placeholder="you@example.com"
-                        type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
                         disabled={disableInput}
                       />
-                      {bookingForm.formState.errors.email && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("email_validation_error")}</p>
-                        </div>
-                      )}
                     </div>
-                  </div>
-                  {locations.length > 1 && (
-                    <div className="mb-4">
-                      <span className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("location")}
-                      </span>
-                      {locations.map((location, i) => (
-                        <label key={i} className="block">
-                          <input
-                            type="radio"
-                            className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
-                            {...bookingForm.register("locationType", { required: true })}
-                            value={location.type}
-                            defaultChecked={selectedLocation === location.type}
-                          />
-                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-gray-500">
-                            {locationLabels[location.type]}
-                          </span>
-                        </label>
-                      ))}
-                    </div>
-                  )}
-                  {selectedLocation === LocationType.Phone && (
-                    <div className="mb-4">
-                      <label
-                        htmlFor="phone"
-                        className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("phone_number")}
-                      </label>
-                      <div className="mt-1">
-                        <PhoneInput<BookingFormValues>
-                          control={bookingForm.control}
-                          name="phone"
-                          placeholder={t("enter_phone_number")}
-                          id="phone"
-                          required
-                          disabled={disableInput}
-                        />
+                    {bookingForm.formState.errors.phone && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("invalid_number")}</p>
                       </div>
-                      {bookingForm.formState.errors.phone && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("invalid_number")}</p>
-                        </div>
+                    )}
+                  </div>
+                )}
+                {eventType.customInputs
+                  .sort((a, b) => a.id - b.id)
+                  .map((input) => (
+                    <div className="mb-4" key={input.id}>
+                      {input.type !== EventTypeCustomInputType.BOOL && (
+                        <label
+                          htmlFor={"custom_" + input.id}
+                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                          {input.label}
+                        </label>
                       )}
-                    </div>
-                  )}
-                  {eventType.customInputs
-                    .sort((a, b) => a.id - b.id)
-                    .map((input) => (
-                      <div className="mb-4" key={input.id}>
-                        {input.type !== EventTypeCustomInputType.BOOL && (
+                      {input.type === EventTypeCustomInputType.TEXTLONG && (
+                        <textarea
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          rows={3}
+                          className={inputClassName}
+                          placeholder={input.placeholder}
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.TEXT && (
+                        <input
+                          type="text"
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          className={inputClassName}
+                          placeholder={input.placeholder}
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.NUMBER && (
+                        <input
+                          type="number"
+                          {...bookingForm.register(`customInputs.${input.id}`, {
+                            required: input.required,
+                          })}
+                          id={"custom_" + input.id}
+                          className={inputClassName}
+                          placeholder=""
+                          disabled={disabledExceptForOwner}
+                        />
+                      )}
+                      {input.type === EventTypeCustomInputType.BOOL && (
+                        <div className="flex h-5 items-center">
+                          <input
+                            type="checkbox"
+                            {...bookingForm.register(`customInputs.${input.id}`, {
+                              required: input.required,
+                            })}
+                            id={"custom_" + input.id}
+                            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}
                             className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                             {input.label}
                           </label>
-                        )}
-                        {input.type === EventTypeCustomInputType.TEXTLONG && (
-                          <textarea
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            id={"custom_" + input.id}
-                            rows={3}
-                            className={inputClassName}
-                            placeholder={input.placeholder}
-                            disabled={disabledExceptForOwner}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                {!eventType.disableGuests && (
+                  <div className="mb-4">
+                    {!guestToggle && (
+                      <label
+                        onClick={() => setGuestToggle(!guestToggle)}
+                        htmlFor="guests"
+                        className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
+                        {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
+                        {t("additional_guests")}
+                      </label>
+                    )}
+                    {guestToggle && (
+                      <div>
+                        <label
+                          htmlFor="guests"
+                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                          {t("guests")}
+                        </label>
+                        {!disableInput && (
+                          <Controller
+                            control={bookingForm.control}
+                            name="guests"
+                            render={({ field: { onChange, value } }) => (
+                              <ReactMultiEmail
+                                className="relative"
+                                placeholder="guest@example.com"
+                                emails={value}
+                                onChange={onChange}
+                                getLabel={(
+                                  email: string,
+                                  index: number,
+                                  removeEmail: (index: number) => void
+                                ) => {
+                                  return (
+                                    <div data-tag key={index} className="cursor-pointer">
+                                      {email}
+                                      {!disableInput && (
+                                        <span data-tag-handle onClick={() => removeEmail(index)}>
+                                          ×
+                                        </span>
+                                      )}
+                                    </div>
+                                  );
+                                }}
+                              />
+                            )}
                           />
                         )}
-                        {input.type === EventTypeCustomInputType.TEXT && (
-                          <input
-                            type="text"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
+                        {/* Custom code when guest emails should not be editable */}
+                        {disableInput && guestListEmails && guestListEmails.length > 0 && (
+                          <div data-tag className="react-multi-email">
+                            {/* // @TODO: user owners are appearing as guest here when should be only user input */}
+                            {guestListEmails.map((email, index) => {
+                              return (
+                                <div key={index} className="cursor-pointer">
+                                  <span data-tag>{email}</span>
+                                </div>
+                              );
                             })}
-                            id={"custom_" + input.id}
-                            className={inputClassName}
-                            placeholder={input.placeholder}
-                            disabled={disabledExceptForOwner}
-                          />
-                        )}
-                        {input.type === EventTypeCustomInputType.NUMBER && (
-                          <input
-                            type="number"
-                            {...bookingForm.register(`customInputs.${input.id}`, {
-                              required: input.required,
-                            })}
-                            id={"custom_" + input.id}
-                            className={inputClassName}
-                            placeholder=""
-                            disabled={disabledExceptForOwner}
-                          />
-                        )}
-                        {input.type === EventTypeCustomInputType.BOOL && (
-                          <div className="flex h-5 items-center">
-                            <input
-                              type="checkbox"
-                              {...bookingForm.register(`customInputs.${input.id}`, {
-                                required: input.required,
-                              })}
-                              id={"custom_" + input.id}
-                              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}
-                              className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                              {input.label}
-                            </label>
                           </div>
                         )}
                       </div>
-                    ))}
-                  {!eventType.disableGuests && (
-                    <div className="mb-4">
-                      {!guestToggle && (
-                        <label
-                          onClick={() => setGuestToggle(!guestToggle)}
-                          htmlFor="guests"
-                          className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
-                          {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
-                          {t("additional_guests")}
-                        </label>
-                      )}
-                      {guestToggle && (
-                        <div>
-                          <label
-                            htmlFor="guests"
-                            className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                            {t("guests")}
-                          </label>
-                          {!disableInput && (
-                            <Controller
-                              control={bookingForm.control}
-                              name="guests"
-                              render={({ field: { onChange, value } }) => (
-                                <ReactMultiEmail
-                                  className="relative"
-                                  placeholder="guest@example.com"
-                                  emails={value}
-                                  onChange={onChange}
-                                  getLabel={(
-                                    email: string,
-                                    index: number,
-                                    removeEmail: (index: number) => void
-                                  ) => {
-                                    return (
-                                      <div data-tag key={index} className="cursor-pointer">
-                                        {email}
-                                        {!disableInput && (
-                                          <span data-tag-handle onClick={() => removeEmail(index)}>
-                                            ×
-                                          </span>
-                                        )}
-                                      </div>
-                                    );
-                                  }}
-                                />
-                              )}
-                            />
-                          )}
-                          {/* Custom code when guest emails should not be editable */}
-                          {disableInput && guestListEmails && guestListEmails.length > 0 && (
-                            <div data-tag className="react-multi-email">
-                              {/* // @TODO: user owners are appearing as guest here when should be only user input */}
-                              {guestListEmails.map((email, index) => {
-                                return (
-                                  <div key={index} className="cursor-pointer">
-                                    <span data-tag>{email}</span>
-                                  </div>
-                                );
-                              })}
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
-                    <div className="mb-4">
-                      <label
-                        htmlFor="smsReminderNumber"
-                        className="block text-sm font-medium text-gray-700 dark:text-white">
-                        {t("number_for_sms_reminders")}
-                      </label>
-                      <div className="mt-1">
-                        <PhoneInput<BookingFormValues>
-                          control={bookingForm.control}
-                          name="smsReminderNumber"
-                          placeholder={t("enter_phone_number")}
-                          id="smsReminderNumber"
-                          required
-                          disabled={disableInput}
-                        />
-                      </div>
-                      {bookingForm.formState.errors.smsReminderNumber && (
-                        <div className="mt-2 flex items-center text-sm text-red-700 ">
-                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
-                          <p>{t("invalid_number")}</p>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  <div className="mb-4">
-                    <label
-                      htmlFor="notes"
-                      className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                      {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
-                    </label>
-                    {rescheduleUid ? (
-                      <textarea
-                        {...bookingForm.register("rescheduleReason")}
-                        id="rescheduleReason"
-                        name="rescheduleReason"
-                        rows={3}
-                        className={inputClassName}
-                        placeholder={t("reschedule_placeholder")}
-                        disabled={disabledExceptForOwner}
-                      />
-                    ) : (
-                      <textarea
-                        {...bookingForm.register("notes")}
-                        id="notes"
-                        name="notes"
-                        rows={3}
-                        className={inputClassName}
-                        placeholder={t("share_additional_notes")}
-                        disabled={disabledExceptForOwner}
-                      />
                     )}
                   </div>
-
-                  <div className="flex items-start space-x-2 rtl:space-x-reverse">
-                    <Button
-                      type="submit"
-                      data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
-                      loading={mutation.isLoading || recurringMutation.isLoading}>
-                      {rescheduleUid ? t("reschedule") : t("confirm")}
-                    </Button>
-                    <Button color="secondary" type="button" onClick={() => router.back()}>
-                      {t("cancel")}
-                    </Button>
-                  </div>
-                </Form>
-                {(mutation.isError || recurringMutation.isError) && (
-                  <ErrorMessage error={mutation.error || recurringMutation.error} />
                 )}
-              </div>
+                {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
+                  <div className="mb-4">
+                    <label
+                      htmlFor="smsReminderNumber"
+                      className="block text-sm font-medium text-gray-700 dark:text-white">
+                      {t("number_for_sms_reminders")}
+                    </label>
+                    <div className="mt-1">
+                      <PhoneInput<BookingFormValues>
+                        control={bookingForm.control}
+                        name="smsReminderNumber"
+                        placeholder={t("enter_phone_number")}
+                        id="smsReminderNumber"
+                        required
+                        disabled={disableInput}
+                      />
+                    </div>
+                    {bookingForm.formState.errors.smsReminderNumber && (
+                      <div className="mt-2 flex items-center text-sm text-red-700 ">
+                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <p>{t("invalid_number")}</p>
+                      </div>
+                    )}
+                  </div>
+                )}
+                <div className="mb-4">
+                  <label
+                    htmlFor="notes"
+                    className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                    {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
+                  </label>
+                  {rescheduleUid ? (
+                    <textarea
+                      {...bookingForm.register("rescheduleReason")}
+                      id="rescheduleReason"
+                      name="rescheduleReason"
+                      rows={3}
+                      className={inputClassName}
+                      placeholder={t("reschedule_placeholder")}
+                      disabled={disabledExceptForOwner}
+                    />
+                  ) : (
+                    <textarea
+                      {...bookingForm.register("notes")}
+                      id="notes"
+                      name="notes"
+                      rows={3}
+                      className={inputClassName}
+                      placeholder={t("share_additional_notes")}
+                      disabled={disabledExceptForOwner}
+                    />
+                  )}
+                </div>
+
+                <div className="flex items-start space-x-2 rtl:space-x-reverse">
+                  <Button
+                    type="submit"
+                    data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
+                    loading={mutation.isLoading || recurringMutation.isLoading}>
+                    {rescheduleUid ? t("reschedule") : t("confirm")}
+                  </Button>
+                  <Button color="secondary" type="button" onClick={() => router.back()}>
+                    {t("cancel")}
+                  </Button>
+                </div>
+              </Form>
+              {(mutation.isError || recurringMutation.isError) && (
+                <ErrorMessage error={mutation.error || recurringMutation.error} />
+              )}
             </div>
           </div>
-        )}
+        </div>
       </main>
     </div>
   );

apps/web/components/dialog/EditLocationDialog.tsx

@@ -8,6 +8,7 @@ import { z } from "zod";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
 import { Form } from "@calcom/ui/form/fields";
@@ -16,7 +17,6 @@ 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";

apps/web/components/dialog/RescheduleDialog.tsx

@@ -5,12 +5,12 @@ import { useMutation } from "react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
-import { trpc } from "@lib/trpc";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;

apps/web/components/eventtype/CreateEventType.tsx

@@ -1,14 +1,18 @@
 import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
+import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
+import classNames from "@calcom/lib/classNames";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import { Button } from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
@@ -23,7 +27,6 @@ import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fi
 
 import { HttpError } from "@lib/core/http/error";
 import { slugify } from "@lib/slugify";
-import { trpc } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
 import * as RadioArea from "@components/ui/form/radio-area";
@@ -36,7 +39,7 @@ export interface EventTypeParent {
   image?: string | null;
 }
 
-interface Props {
+interface CreateEventTypeBtnProps {
   // set true for use on the team settings page
   canAddEvents: boolean;
   // set true when in use on the team settings page
@@ -45,7 +48,7 @@ interface Props {
   options: EventTypeParent[];
 }
 
-export default function CreateEventTypeButton(props: Props) {
+export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
   const { t } = useLocale();
   const router = useRouter();
 
@@ -141,39 +144,13 @@ export default function CreateEventTypeButton(props: Props) {
     <Dialog
       name="new-eventtype"
       clearQueryParamsOnClose={["eventPage", "teamId", "type", "description", "title", "length", "slug"]}>
-      {!hasTeams || props.isIndividualTeam ? (
-        <Button
-          onClick={() => openModal(props.options[0])}
-          data-testid="new-event-type"
-          StartIcon={PlusIcon}
-          disabled={!props.canAddEvents}>
-          {t("new_event_type_btn")}
-        </Button>
-      ) : (
-        <Dropdown>
-          <DropdownMenuTrigger asChild>
-            <Button EndIcon={ChevronDownIcon}>{t("new_event_type_btn")}</Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            {props.options.map((option) => (
-              <DropdownMenuItem
-                key={option.slug}
-                className="cursor-pointer px-3 py-2 hover:bg-neutral-100 focus:outline-none"
-                onSelect={() => openModal(option)}>
-                <Avatar
-                  alt={option.name || ""}
-                  imageSrc={option.image}
-                  size={6}
-                  className="inline ltr:mr-2 rtl:ml-2"
-                />
-                {option.name ? option.name : option.slug}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </Dropdown>
-      )}
+      <CreateEventTypeTrigger
+        hasTeams={hasTeams}
+        canAddEvents={props.canAddEvents}
+        isIndividualTeam={props.isIndividualTeam}
+        openModal={openModal}
+        options={props.options}
+      />
 
       <DialogContent className="overflow-y-auto">
         <div className="mb-4">
@@ -289,3 +266,83 @@ export default function CreateEventTypeButton(props: Props) {
     </Dialog>
   );
 }
+
+type CreateEventTypeTrigger = {
+  isIndividualTeam?: boolean;
+  // EventTypeParent can be a profile (as first option) or a team for the rest.
+  options: EventTypeParent[];
+  hasTeams: boolean;
+  // set true for use on the team settings page
+  canAddEvents: boolean;
+  openModal: (option: EventTypeParent) => void;
+};
+
+export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
+  const { t } = useLocale();
+
+  return (
+    <>
+      {!props.hasTeams || props.isIndividualTeam ? (
+        <Button
+          onClick={() => props.openModal(props.options[0])}
+          data-testid="new-event-type"
+          StartIcon={PlusIcon}
+          disabled={!props.canAddEvents}>
+          {t("new_event_type_btn")}
+        </Button>
+      ) : (
+        <Dropdown>
+          <DropdownMenuTrigger asChild>
+            <Button EndIcon={ChevronDownIcon}>{t("new_event_type_btn")}</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            {props.options.map((option) => (
+              <CreateEventTeamsItem
+                key={option.slug}
+                option={option}
+                openModal={() => props.openModal(option)}
+              />
+            ))}
+          </DropdownMenuContent>
+        </Dropdown>
+      )}
+    </>
+  );
+}
+
+function CreateEventTeamsItem(props: {
+  openModal: (option: EventTypeParent) => void;
+  option: EventTypeParent;
+}) {
+  const session = useSession();
+  const membershipQuery = trpc.useQuery([
+    "viewer.teams.getMembershipbyUser",
+    {
+      memberId: session.data?.user.id as number,
+      teamId: props.option.teamId as number,
+    },
+  ]);
+
+  const isDisabled = membershipQuery.data?.role === "MEMBER";
+
+  return (
+    <DropdownMenuItem
+      key={props.option.slug}
+      className={classNames(
+        "cursor-pointer px-3 py-2  focus:outline-none",
+        isDisabled ? "cursor-default !text-gray-300" : "hover:bg-neutral-100"
+      )}
+      disabled={isDisabled}
+      onSelect={() => props.openModal(props.option)}>
+      <Avatar
+        alt={props.option.name || ""}
+        imageSrc={props.option.image}
+        size={6}
+        className="inline ltr:mr-2 rtl:ml-2"
+      />
+      {props.option.name ? props.option.name : props.option.slug}
+    </DropdownMenuItem>
+  );
+}

apps/web/components/integrations/CalendarListContainer.tsx

@@ -4,12 +4,12 @@ import { useMutation } from "react-query";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
 
 import { QueryCell } from "@lib/QueryCell";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
@@ -106,6 +106,7 @@ function CalendarList(props: Props) {
         <List>
           {data.items.map((item) => (
             <IntegrationListItem
+              slug={item.slug}
               key={item.title}
               title={item.title}
               imageSrc={item.imageSrc}
@@ -147,12 +148,14 @@ function ConnectedCalendarsList(props: Props) {
               <Fragment key={item.credentialId}>
                 {item.calendars ? (
                   <IntegrationListItem
+                    slug={item.integration.slug}
                     title={item.integration.title}
                     imageSrc={item.integration.imageSrc}
                     description={item.primary?.externalId || "No external Id"}
                     actions={
                       <DisconnectIntegration
                         id={item.credentialId}
+                        externalId={item.primary?.externalId}
                         render={(btnProps) => (
                           <Button {...btnProps} color="warn" data-testid="integration-connection-button">
                             {t("disconnect")}

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -3,20 +3,20 @@ import { useMutation } from "react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { ButtonBaseProps } from "@calcom/ui/Button";
 import { Dialog } from "@calcom/ui/Dialog";
 
-import { trpc } from "@lib/trpc";
-
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 
 export default function DisconnectIntegration(props: {
   /** Integration credential id */
   id: number;
+  externalId?: string;
   render: (renderProps: ButtonBaseProps) => JSX.Element;
   onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
 }) {
-  const { id } = props;
+  const { id, externalId = "" } = props;
   const { t } = useLocale();
   const [modalOpen, setModalOpen] = useState(false);
 
@@ -42,7 +42,7 @@ export default function DisconnectIntegration(props: {
           confirmBtnText={t("yes_remove_app")}
           cancelBtnText="Cancel"
           onConfirm={() => {
-            mutation.mutate({ id });
+            mutation.mutate({ id, externalId });
           }}>
           {t("are_you_sure_you_want_to_remove_this_app")}
         </ConfirmationDialogContent>

apps/web/components/integrations/IntegrationListItem.tsx

@@ -1,3 +1,4 @@
+import Link from "next/link";
 import { ReactNode } from "react";
 
 import classNames from "@lib/classNames";
@@ -6,6 +7,7 @@ import { ListItem, ListItemText, ListItemTitle } from "@components/List";
 
 function IntegrationListItem(props: {
   imageSrc?: string;
+  slug: string;
   title: string;
   description: string;
   actions?: ReactNode;
@@ -19,7 +21,9 @@ function IntegrationListItem(props: {
           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>
+          <ListItemTitle component="h3">
+            <Link href={"/apps/" + props.slug}>{props.title}</Link>
+          </ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>
         </div>
         <div>{props.actions}</div>

apps/web/components/security/DisableUserImpersonation.tsx

@@ -1,9 +1,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import Badge from "@components/ui/Badge";
 
 const DisableUserImpersonation = ({ disableImpersonation }: { disableImpersonation: boolean }) => {

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -0,0 +1,62 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
+import Button from "@calcom/ui/Button";
+
+import Badge from "@components/ui/Badge";
+
+const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {
+  const { t } = useLocale();
+
+  const utils = trpc.useContext();
+
+  const query = trpc.useQuery(["viewer.teams.getMembershipbyUser", { teamId, memberId }]);
+
+  const mutation = trpc.useMutation("viewer.teams.updateMembership", {
+    onSuccess: async () => {
+      showToast(t("your_user_profile_updated_successfully"), "success");
+      await utils.invalidateQueries(["viewer.teams.getMembershipbyUser"]);
+    },
+    async onSettled() {
+      await utils.invalidateQueries(["viewer.public.i18n"]);
+    },
+  });
+  if (query.isLoading) return <></>;
+
+  return (
+    <>
+      <h3 className="font-cal mt-7 pb-4 text-xl leading-6 text-gray-900">{t("settings")}</h3>
+      <div className="-mx-0 rounded-sm border border-neutral-200 bg-white px-4 pb-4 sm:px-6">
+        <div className="flex flex-col justify-between pt-4 sm:flex-row">
+          <div>
+            <div className="flex flex-row items-center">
+              <h2 className="font-cal font-bold leading-6 text-gray-900">
+                {t("user_impersonation_heading")}
+              </h2>
+              <Badge
+                className="ml-2 text-xs"
+                variant={!query.data?.disableImpersonation ? "success" : "gray"}>
+                {!query.data?.disableImpersonation ? t("enabled") : t("disabled")}
+              </Badge>
+            </div>
+            <p className="text-sm text-gray-700">{t("team_impersonation_description")}</p>
+          </div>
+          <div className="mt-5 sm:mt-0 sm:self-center">
+            <Button
+              type="submit"
+              color="secondary"
+              onClick={() =>
+                !query.data?.disableImpersonation
+                  ? mutation.mutate({ teamId, memberId, disableImpersonation: true })
+                  : mutation.mutate({ teamId, memberId, disableImpersonation: false })
+              }>
+              {!query.data?.disableImpersonation ? t("disable") : t("enable")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DisableTeamImpersonation;

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -2,10 +2,9 @@ import { MembershipRole } from "@prisma/client";
 import { SyntheticEvent, useMemo, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 
-import { trpc } from "@lib/trpc";
-
 import ModalContainer from "@components/ui/ModalContainer";
 import Select from "@components/ui/form/Select";
 

apps/web/components/team/MemberInvitationModal.tsx

@@ -3,13 +3,13 @@ import { InformationCircleIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import React, { useState, SyntheticEvent, useMemo } from "react";
 
+import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { TeamWithMembers } from "@lib/queries/teams";
-import { trpc } from "@lib/trpc";
 
 import Select from "@components/ui/form/Select";
 

apps/web/components/team/MemberList.tsx

@@ -1,4 +1,4 @@
-import { inferQueryOutput } from "@lib/trpc";
+import { inferQueryOutput } from "@calcom/trpc/react";
 
 import MemberListItem from "./MemberListItem";
 

apps/web/components/team/MemberListItem.tsx

@@ -1,12 +1,14 @@
-import { PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
+import { LockClosedIcon, PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
 import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
+import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useState } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
@@ -19,7 +21,6 @@ import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
 import useCurrentUserId from "@lib/hooks/useCurrentUserId";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
@@ -39,6 +40,7 @@ export default function MemberListItem(props: Props) {
   const utils = trpc.useContext();
   const [showChangeMemberRoleModal, setShowChangeMemberRoleModal] = useState(false);
   const [showTeamAvailabilityModal, setShowTeamAvailabilityModal] = useState(false);
+  const [showImpersonateModal, setShowImpersonateModal] = useState(false);
 
   const removeMemberMutation = trpc.useMutation("viewer.teams.removeMember", {
     async onSuccess() {
@@ -147,6 +149,24 @@ export default function MemberListItem(props: Props) {
                     </Button>
                   </DropdownMenuItem>
                   <DropdownMenuSeparator className="h-px bg-gray-200" />
+                  {/* Only show impersonate box if - The user has impersonation enabled,
+                        They have accepted the team invite, and it is enabled for this instance */}
+                  {!props.member.disableImpersonation &&
+                    props.member.accepted &&
+                    process.env.NEXT_PUBLIC_TEAM_IMPERSONATION === "true" && (
+                      <>
+                        <DropdownMenuItem>
+                          <Button
+                            onClick={() => setShowImpersonateModal(true)}
+                            color="minimal"
+                            StartIcon={LockClosedIcon}
+                            className="w-full flex-shrink-0 font-normal">
+                            {t("impersonate")}
+                          </Button>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator className="h-px bg-gray-200" />
+                      </>
+                    )}
                   <DropdownMenuItem>
                     <Dialog>
                       <DialogTrigger asChild>
@@ -185,6 +205,39 @@ export default function MemberListItem(props: Props) {
           onExit={() => setShowChangeMemberRoleModal(false)}
         />
       )}
+      {showImpersonateModal && props.member.username && (
+        <ModalContainer isOpen={showImpersonateModal} onExit={() => setShowImpersonateModal(false)}>
+          <>
+            <div className="mb-4 sm:flex sm:items-start">
+              <div className="text-center sm:text-left">
+                <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+                  {t("impersonate")}
+                </h3>
+              </div>
+            </div>
+            <form
+              onSubmit={async (e) => {
+                e.preventDefault();
+                await signIn("impersonation-auth", {
+                  username: props.member.username,
+                  teamId: props.team.id,
+                });
+              }}>
+              <p className="mt-2 text-sm text-gray-500" id="email-description">
+                {t("impersonate_user_tip")}
+              </p>
+              <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                <Button type="submit" color="primary" className="ltr:ml-2 rtl:mr-2">
+                  {t("impersonate")}
+                </Button>
+                <Button type="button" color="secondary" onClick={() => setShowImpersonateModal(false)}>
+                  {t("cancel")}
+                </Button>
+              </div>
+            </form>
+          </>
+        </ModalContainer>
+      )}
       {showTeamAvailabilityModal && (
         <ModalContainer
           wide

apps/web/components/team/TeamCreateModal.tsx

@@ -2,12 +2,11 @@ import { UsersIcon } from "@heroicons/react/outline";
 import { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 
-import { trpc } from "@lib/trpc";
-
 interface Props {
   isOpen: boolean;
   onClose: () => void;

apps/web/components/team/TeamList.tsx

@@ -1,6 +1,5 @@
 import showToast from "@calcom/lib/notification";
-
-import { inferQueryOutput, trpc } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 
 import TeamListItem from "./TeamListItem";
 

apps/web/components/team/TeamListItem.tsx

@@ -13,6 +13,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import Dropdown, {
@@ -25,7 +26,6 @@ import { Tooltip } from "@calcom/ui/Tooltip";
 
 import classNames from "@lib/classNames";
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";

apps/web/components/team/TeamSettings.tsx

@@ -4,13 +4,12 @@ import React, { useRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { objectKeys } from "@calcom/lib/objectKeys";
+import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { TextField } from "@calcom/ui/form/fields";
 
-import { TeamWithMembers } from "@lib/queries/teams";
-import { trpc } from "@lib/trpc";
-
 import ImageUploader from "@components/ImageUploader";
 import SettingInputContainer from "@components/ui/SettingInputContainer";
 

apps/web/components/team/TeamSettingsRightSidebar.tsx

@@ -5,11 +5,11 @@ import { useRouter } from "next/router";
 import React from "react";
 
 import showToast from "@calcom/lib/notification";
+import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
+import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { TeamWithMembers } from "@lib/queries/teams";
-import { trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import CreateEventTypeButton from "@components/eventtype/CreateEventType";

apps/web/components/team/UpgradeToFlexibleProModal.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import {
@@ -13,7 +14,6 @@ import {
 } from "@calcom/ui/Dialog";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { trpc } from "@lib/trpc";
 
 interface Props {
   teamId: number;

apps/web/components/ui/Avatar.tsx

@@ -1,11 +1,11 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as Tooltip from "@radix-ui/react-tooltip";
 
+import { Maybe } from "@calcom/trpc/server";
+
 import classNames from "@lib/classNames";
 import { defaultAvatarSrc } from "@lib/profile";
 
-import { Maybe } from "@trpc/server";
-
 export type AvatarProps = {
   className?: string;
   size?: number;

apps/web/components/ui/EditableHeading.tsx

@@ -1,18 +1,31 @@
 import { PencilIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 
-const EditableHeading = ({ title, onChange }: { title: string; onChange: (value: string) => void }) => {
-  const [editIcon, setEditIcon] = useState(true);
+const EditableHeading = ({
+  title,
+  onChange,
+  placeholder = "",
+  readOnly = false,
+}: {
+  title: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const enableEditing = () => !readOnly && setIsEditing(true);
   return (
-    <div className="group relative cursor-pointer" onClick={() => setEditIcon(false)}>
-      {editIcon ? (
+    <div className="group relative cursor-pointer" onClick={enableEditing}>
+      {!isEditing ? (
         <>
           <h1
             style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
-            className="inline pl-0 text-gray-900 focus:text-black group-hover:text-gray-500">
+            className="inline pl-0 normal-case text-gray-900 focus:text-black group-hover:text-gray-500">
             {title}
           </h1>
-          <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
+          {!readOnly ? (
+            <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
+          ) : null}
         </>
       ) : (
         <div style={{ marginBottom: -11 }}>
@@ -22,8 +35,12 @@ const EditableHeading = ({ title, onChange }: { title: string; onChange: (value:
             style={{ top: -6, fontSize: 22 }}
             required
             className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+            placeholder={placeholder}
             defaultValue={title}
-            onChange={(e) => onChange(e.target.value)}
+            onBlur={(e) => {
+              setIsEditing(false);
+              onChange && onChange(e.target.value);
+            }}
           />
         </div>
       )}

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -7,15 +7,13 @@ import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
+import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import { trpc } from "@calcom/trpc/react";
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Input, Label } from "@calcom/ui/form/fields";
 
-import { trpc } from "@lib/trpc";
-
-import { AppRouter } from "@server/routers/_app";
-import { TRPCClientErrorLike } from "@trpc/client";
-
 export enum UsernameChangeStatusEnum {
   NORMAL = "NORMAL",
   UPGRADE = "UPGRADE",
@@ -274,16 +272,14 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
               <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">
-                    {t("current")} {t("username")}
-                  </p>
+                  <p className="text-gray-500">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="ml-6 flex-1">
                   <p className="text-gray-500" data-testid="new-username">
-                    {t("new")} {t("username")}
+                    {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>
                 </div>

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -5,15 +5,13 @@ import { MutableRefObject, useCallback, useEffect, useState } from "react";
 
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { TRPCClientErrorLike } from "@calcom/trpc/client";
+import { trpc } from "@calcom/trpc/react";
+import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Input, Label } from "@calcom/ui/form/fields";
 
-import { trpc } from "@lib/trpc";
-
-import { AppRouter } from "@server/routers/_app";
-import { TRPCClientErrorLike } from "@trpc/client";
-
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
   setCurrentUsername: (value: string | undefined) => void;
@@ -144,7 +142,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             </div>
           )}
         </div>
-        <div className="xs:hidden">
+        <div className="hidden  md:inline">
           <ActionButtons index="desktop" />
         </div>
       </div>
@@ -171,16 +169,14 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
               <div className="flex w-full flex-wrap rounded-sm bg-gray-100 py-3 text-sm">
                 <div className="flex-1 px-2">
-                  <p className="text-gray-500">
-                    {t("current")} {t("username").toLocaleLowerCase()}
-                  </p>
+                  <p className="text-gray-500">{t("current_username")}</p>
                   <p className="mt-1" data-testid="current-username">
                     {currentUsername}
                   </p>
                 </div>
                 <div className="flex-1">
                   <p className="text-gray-500" data-testid="new-username">
-                    {t("new")} {t("username").toLocaleLowerCase()}
+                    {t("new_username")}
                   </p>
                   <p>{inputUsernameValue}</p>
                 </div>

apps/web/components/ui/colorpicker.tsx

@@ -2,8 +2,8 @@ import { useCallback, useRef, useState } from "react";
 import { useEffect } from "react";
 import { HexColorInput, HexColorPicker } from "react-colorful";
 
-import { isValidHexCode, fallBackHex } from "@components/CustomBranding";
-import Swatch from "@components/Swatch";
+import { isValidHexCode, fallBackHex } from "@calcom/lib/CustomBranding";
+import Swatch from "@calcom/ui/v2/Swatch";
 
 type Handler = (event: MouseEvent | Event) => void;
 function useEventListener<
@@ -87,7 +87,7 @@ const ColorPicker = (props: ColorPickerProps) => {
         </div>
       )}
       <HexColorInput
-        className="ml-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
+        className="ml-1 block w-full rounded-r-md border border-gray-300 px-3 py-2 sm:text-sm"
         color={color}
         onChange={(val) => {
           setColor(val);

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

@@ -2,23 +2,22 @@ import React, { Dispatch, SetStateAction } from "react";
 import { components, GroupBase, OptionProps } from "react-select";
 import { Props } from "react-select";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Select from "@calcom/ui/form/Select";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 export type Option = {
   value: string;
   label: string;
 };
 
-const InputOption = ({
+const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
   isDisabled,
   isFocused,
   isSelected,
   children,
   innerProps,
   ...rest
-}: OptionProps<any, boolean, GroupBase<any>>) => {
+}) => {
   const style = {
     alignItems: "center",
     backgroundColor: isFocused ? "rgba(244, 245, 246, var(--tw-bg-opacity))" : "transparent",

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

@@ -15,6 +15,7 @@ function PhoneInput<FormValues>({ control, name, ...rest }: PhoneInputProps<Form
   return (
     <BasePhoneInput
       {...rest}
+      international
       name={name}
       control={control}
       countrySelectProps={{ className: "text-black" }}

apps/web/components/webhook/WebhookDialogForm.tsx

@@ -3,14 +3,13 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
-import { Tooltip } from "@calcom/ui";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { DialogFooter } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
 import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@calcom/ui/form/fields";
 
-import { trpc } from "@lib/trpc";
-import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants";
+import { WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP } from "@lib/webhooks/constants";
 import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integrationTemplate";
 
 import { TWebhook } from "@components/webhook/WebhookListItem";
@@ -19,14 +18,20 @@ import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure";
 export default function WebhookDialogForm(props: {
   eventTypeId?: number;
   defaultValues?: TWebhook;
+  app?: string;
   handleClose: () => void;
 }) {
   const { t } = useLocale();
   const utils = trpc.useContext();
+  const appId = props.app;
+
+  const triggers = !appId
+    ? WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP["core"]
+    : WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP[appId as keyof typeof WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP];
   const {
     defaultValues = {
       id: "",
-      eventTriggers: WEBHOOK_TRIGGER_EVENTS,
+      eventTriggers: triggers,
       subscriberUrl: "",
       active: true,
       payloadTemplate: null,
@@ -60,8 +65,8 @@ export default function WebhookDialogForm(props: {
       form={form}
       handleSubmit={async (event) => {
         const e = changeSecret
-          ? { ...event, eventTypeId: props.eventTypeId }
-          : { ...event, secret: currentSecret, eventTypeId: props.eventTypeId };
+          ? { ...event, eventTypeId: props.eventTypeId, appId }
+          : { ...event, secret: currentSecret, eventTypeId: props.eventTypeId, appId };
         if (!useCustomPayloadTemplate && event.payloadTemplate) {
           event.payloadTemplate = null;
         }
@@ -115,7 +120,7 @@ export default function WebhookDialogForm(props: {
       <fieldset className="space-y-2">
         <FieldsetLegend>{t("event_triggers")}</FieldsetLegend>
         <InputGroupBox className="border-0 bg-gray-50">
-          {WEBHOOK_TRIGGER_EVENTS.map((key) => (
+          {triggers.map((key) => (
             <Controller
               key={key}
               control={form.control}

apps/web/components/webhook/WebhookListContainer.tsx

@@ -1,11 +1,11 @@
 import { PlusIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
 
 import { QueryCell } from "@lib/QueryCell";
-import { trpc } from "@lib/trpc";
 
 import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
@@ -17,12 +17,16 @@ export type WebhookListContainerType = {
   title: string;
   subtitle: string;
   eventTypeId?: number;
+  appId?: string;
 };
 
 export default function WebhookListContainer(props: WebhookListContainerType) {
-  const query = trpc.useQuery(["viewer.webhook.list", { eventTypeId: props.eventTypeId }], {
-    suspense: true,
-  });
+  const query = trpc.useQuery(
+    ["viewer.webhook.list", { eventTypeId: props.eventTypeId, appId: props.appId }],
+    {
+      suspense: true,
+    }
+  );
   const [newWebhookModal, setNewWebhookModal] = useState(false);
   const [editModalOpen, setEditModalOpen] = useState(false);
   const [editing, setEditing] = useState<TWebhook | null>(null);
@@ -66,6 +70,7 @@ export default function WebhookListContainer(props: WebhookListContainerType) {
           <Dialog open={newWebhookModal} onOpenChange={(isOpen) => !isOpen && setNewWebhookModal(false)}>
             <DialogContent>
               <WebhookDialogForm
+                app={props.appId}
                 eventTypeId={props.eventTypeId}
                 handleClose={() => setNewWebhookModal(false)}
               />
@@ -76,6 +81,7 @@ export default function WebhookListContainer(props: WebhookListContainerType) {
             <DialogContent>
               {editing && (
                 <WebhookDialogForm
+                  app={props.appId}
                   key={editing.id}
                   eventTypeId={props.eventTypeId || undefined}
                   handleClose={() => setEditModalOpen(false)}

apps/web/components/webhook/WebhookListItem.tsx

@@ -1,12 +1,12 @@
 import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
 
 import classNames from "@calcom/lib/classNames";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import { ListItem } from "@components/List";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";

apps/web/components/webhook/WebhookTestDisclosure.tsx

@@ -5,11 +5,11 @@ import { useWatch } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { InputGroupBox } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
-import { trpc } from "@lib/trpc";
 
 export default function WebhookTestDisclosure() {
   const subscriberUrl: string = useWatch({ name: "subscriberUrl" });

apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx

@@ -5,14 +5,13 @@ import { Controller, useForm } from "react-hook-form";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { DialogFooter } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { Form, TextField } from "@calcom/ui/form/fields";
 
-import { trpc } from "@lib/trpc";
-
 import { DatePicker } from "@components/ui/form/DatePicker";
 
 import LicenseRequired from "../LicenseRequired";

apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

@@ -2,13 +2,13 @@ import { PlusIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
 import ApiKeyDialogForm from "@ee/components/apiKeys/ApiKeyDialogForm";
 import ApiKeyListItem, { TApiKeys } from "@ee/components/apiKeys/ApiKeyListItem";
 
 import { QueryCell } from "@lib/QueryCell";
-import { trpc } from "@lib/trpc";
 
 import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";

apps/web/ee/components/apiKeys/ApiKeyListItem.tsx

@@ -4,12 +4,11 @@ import { ExclamationIcon } from "@heroicons/react/solid";
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
-import { inferQueryOutput, trpc } from "@lib/trpc";
-
 import { ListItem } from "@components/List";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Badge from "@components/ui/Badge";

apps/web/ee/components/saml/Configuration.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { trpc } from "@lib/trpc";
 
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Badge from "@components/ui/Badge";