v1.9.5

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

.env.appStore.example

@@ -87,7 +87,6 @@ VITAL_REGION="us"
 # Used for the Zapier integration
 # @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
 ZAPIER_INVITE_LINK=""
-# *********************************************************************************************************
 
 # - LARK
 # Needed to enable Lark Calendar integration and Login with Lark
@@ -95,4 +94,10 @@ ZAPIER_INVITE_LINK=""
 LARK_OPEN_APP_ID=""
 LARK_OPEN_APP_SECRET=""
 LARK_OPEN_VERIFICATION_TOKEN=""
+
+#   - WEB3
+# Used for the Web3 plugin
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/web3/README.md
+ALCHEMY_API_KEY=""
+INFURA_API_KEY=""
 # *********************************************************************************************************

.env.example

@@ -30,8 +30,6 @@ NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
 NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
 NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
-# Make sure you don't have .example.com as a value
-NEXTAUTH_DOMAIN='localhost:3000'
 
 # To enable SAML login, set both these variables
 # @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
@@ -48,13 +46,12 @@ PGSSLMODE=
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
 # Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
-# NEXTAUTH_URL='http://localhost:3000'
-NEXTAUTH_URL=
+NEXTAUTH_URL='http://localhost:3000'
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
 # You can use: `openssl rand -base64 32` to generate one
 NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
-NEXTAUTH_COOKIE_DOMAIN=.example.com
+NEXTAUTH_COOKIE_DOMAIN=
 
 # Set this to '1' if you don't want Cal to collect anonymous usage
 CALCOM_TELEMETRY_DISABLED=
@@ -97,6 +94,8 @@ NEXT_PUBLIC_IS_E2E=
 # Used for internal billing system
 NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
+NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
+NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
 STRIPE_WEBHOOK_SECRET=
 STRIPE_PRO_PLAN_PRODUCT_ID=
@@ -132,3 +131,9 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 
 # Set the following value to true if you wish to enable Team Impersonation
 NEXT_PUBLIC_TEAM_IMPERSONATION=false
+
+# Close.com internal CRM
+CLOSECOM_API_KEY=
+
+# Sendgrid internal email sender
+SENDGRID_API_KEY=

.github/PULL_REQUEST_TEMPLATE.md

@@ -15,6 +15,7 @@ Fixes # (issue)
 <!-- Please delete options that are not relevant. -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 - [ ] This change requires a documentation update

.github/workflows/add-PRs-to-project.yml

@@ -0,0 +1,16 @@
+name: Add PRs to project
+
+on:
+  pull_request:
+    types:
+      - opened
+
+jobs:
+  add-PR-to-project:
+    name: Add PR to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.1.0
+        with:
+          project-url: https://github.com/orgs/calcom/projects/1
+          github-token: ${{ secrets.GH_ACCESS_TOKEN }}

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

@@ -12,6 +12,9 @@ on:
       - apps/storybook/**
       - packages/ui/**
   workflow_dispatch:
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 
 # List of jobs
 jobs:

.github/workflows/check-types.yml

@@ -5,6 +5,9 @@ on:
       - main
     paths:
       - "**.tsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   check-types:
     runs-on: ubuntu-latest

.github/workflows/crowdin.yml

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

.github/workflows/e2e-app-store.yml

@@ -1,7 +1,7 @@
 name: E2E App-Store Apps
 on:
   push:
-    branches: [ feature/event-routing ]
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
@@ -12,6 +12,9 @@ on:
       - apps/swagger/**
       - apps/website/**
       - apps/web/public/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   test:
     timeout-minutes: 20
@@ -86,14 +89,14 @@ jobs:
           restore-keys: cache-playwright-
       - run: yarn --frozen-lockfile
       - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
       - name: Run Tests
-        run: yarn app-e2e-quick
+        run: yarn test-e2e:app-store
 
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-core
-          path: packages/app-store/**/playwright/results
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed.yml

@@ -7,6 +7,9 @@ on:
     paths:
       - apps/web/**
       - packages/embeds/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   e2e-embed:
     timeout-minutes: 20
@@ -25,6 +28,8 @@ jobs:
       NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
       NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
       NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
       STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
       STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
@@ -79,7 +84,7 @@ jobs:
           restore-keys: cache-playwright-
       - run: yarn --frozen-lockfile
       - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
       - name: Run Tests
         run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1

.github/workflows/e2e.yml

@@ -1,11 +1,16 @@
 name: E2E test
 on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request_target: # So we can test on forks
     branches:
       - main
     paths:
       - apps/web/**
       - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   e2e:
     timeout-minutes: 20
@@ -24,6 +29,8 @@ jobs:
       NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE }}
       NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE }}
       NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE }}
+      NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE: ${{ secrets.NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE }}
+      NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN: 1
       STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
       STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
       STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}

.github/workflows/labeler.yml

@@ -1,7 +1,9 @@
 name: "Pull Request Labeler"
 on:
   - pull_request_target
-
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   labeler:
     permissions:

.github/workflows/lint.yml

@@ -6,6 +6,9 @@ on:
     paths:
       - "**.tsx?"
       - "**.jsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   lint:
     runs-on: ubuntu-latest

.github/workflows/required-checks.yml

@@ -1,8 +1,13 @@
 name: "Meta Workflow: Require Conditional Status Checks"
 on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
   pull_request:
     branches:
       - main
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
 jobs:
   required-checks:
     runs-on: ubuntu-latest
@@ -34,3 +39,7 @@ jobs:
               paths:
                 - /apps/web/**
                 - /packages/embeds/**
+            - job: test
+              paths:
+                - /apps/web/**
+                - /packages/**

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+name: Unit tests
+on:
+  push:
+    branches: [fixes/e2e-consolidation] # TODO: Remove this after merged in main
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    paths:
+      - apps/web/**
+      - packages/**
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+jobs:
+  test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 2
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - name: Use Node 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
+      - run: yarn test

README.md

@@ -58,15 +58,12 @@ Calendly and other scheduling tools are awesome. It made our lives massively eas
 
 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.
 
-## Product of the Month: April
+## Product of the Month: April 2021
 
 #### Support us on [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)
 
 <a href="https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=291910&theme=light&period=monthly" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/posts/calendso?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-calendso" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=291910&theme=light" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a> <a href="https://www.producthunt.com/stories/how-this-open-source-calendly-alternative-rocketed-to-product-of-the-day" target="_blank"><img src="https://cal.com/maker-grant.svg" alt="Cal.com - The open source Calendly alternative | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 
- 
-
-
 ### Built With
 
 - [Next.js](https://nextjs.org/)
@@ -118,7 +115,10 @@ Here is what you need to be able to run Cal.
    yarn
    ```
 
-1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+1. Set up your .env file
+   - Duplicate `.env.example` to `.env`
+   - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+   - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the .env file.
 
 #### Quick start with `yarn dx`
 
@@ -207,7 +207,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 yarn test-e2e
 
 # To open last HTML report run:
-yarn workspace @calcom/web playwright-report
+yarn playwright show-report test-results/reports/playwright-html-report
 ```
 
 ### Upgrading from earlier versions
@@ -266,13 +266,13 @@ yarn workspace @calcom/web playwright-report
 
 ### Docker
 
-The Docker configuration for Cal is an effort powered by people within the community. 
+The Docker configuration for Cal is an effort powered by people within the community.
 
 If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32).
 
 The Docker configuration can be found [in our docker repository](https://github.com/calcom/docker).
 
-Issues with Docker? Find your answer or open a new discussion [here](https://github.com/calcom/docker/discussions) to ask the community. 
+Issues with Docker? Find your answer or open a new discussion [here](https://github.com/calcom/docker/discussions) to ask the community.
 
 Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
 
@@ -284,7 +284,7 @@ Cal.com, Inc. does not provide official support for Docker, but we will accept f
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fcalendso%2Fcalendso&plugins=postgresql&envs=GOOGLE_API_CREDENTIALS%2CBASE_URL%2CNEXTAUTH_URL%2CPORT&BASE_URLDefault=http%3A%2F%2Flocalhost%3A3000&NEXTAUTH_URLDefault=http%3A%2F%2Flocalhost%3A3000&PORTDefault=3000)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/cal)
 
 You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform.
 
@@ -328,7 +328,7 @@ We have a list of [help wanted](https://github.com/orgs/calcom/projects/1/views/
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
 
-#### *Adding google calendar to Cal.com App Store*
+#### _Adding google calendar to Cal.com App Store_
 
 After adding Google credentials, you can now Google Calendar App to the app store.
 You can repopulate the App store by running
@@ -344,6 +344,7 @@ following
 
 1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
 1. Under 'OAuth concent screen', click "PUBLISH APP"
+
 ### Obtaining Microsoft Graph Client ID and Secret
 
 1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration

__checks__/calcom-dashboard.check.js

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

apps/docs/package.json

@@ -17,14 +17,14 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.2.0",
+    "next": "^12.2.5",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.15.0"
+    "eslint": "^8.22.0"
   }
 }

apps/storybook/.gitignore

@@ -11,6 +11,7 @@
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

apps/storybook/.storybook/main.js

@@ -20,6 +20,10 @@ module.exports = {
      * @see https://github.com/storybookjs/storybook/issues/12844#issuecomment-867544160
      */
     config.resolve.roots = [path.resolve(__dirname, "../public"), "node_modules"];
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      "@/interfaces": path.resolve(__dirname, "../interfaces"),
+    };
 
     /**
      * Why webpack5... Just why?

apps/storybook/.storybook/preview.js

@@ -22,3 +22,13 @@ export const parameters = {
     Provider: RouterContext.Provider,
   },
 };
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};

apps/storybook/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <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/package.json

@@ -23,40 +23,42 @@
     "@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",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "next": "^12.2.5",
     "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"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10",
+    "react-hot-toast": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.18.10",
     "@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-a11y": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-interactions": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/builder-webpack5": "^6.5.10",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@types/node": "16.9.1",
-    "@types/react": "18.0.9",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "18.0.4",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
-    "chromatic": "^6.6.4",
-    "eslint": "^8.15.0",
-    "postcss": "^8.4.13",
+    "chromatic": "^6.7.4",
+    "eslint": "^8.22.0",
+    "postcss": "^8.4.16",
     "postcss-loader": "^7.0.0",
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-next": "^1.6.7",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.8",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "readme": "ERROR: No README data found!",
   "_id": "@calcom/storybook@0.1.0"

apps/storybook/stories/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import Avatar from "@calcom/ui/v2/Avatar";
+import Avatar from "@calcom/ui/v2/core/Avatar";
 
 export default {
   title: "Avatar",

apps/storybook/stories/AvatarGroup.stories.tsx

@@ -1,7 +1,7 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta } from "@storybook/react";
 
-import Avatar from "@calcom/ui/v2/Avatar";
-import AvatarGroup from "@calcom/ui/v2/AvatarGroup";
+import AvatarGroup from "@calcom/ui/v2/core/AvatarGroup";
 
 export default {
   title: "Avatar/Group",
@@ -53,8 +53,8 @@ const IMAGES = [
 
 export const Default = () => {
   return (
-    <>
+    <TooltipProvider>
       <AvatarGroup size="lg" items={IMAGES} />
-    </>
+    </TooltipProvider>
   );
 };

apps/storybook/stories/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { Bell } from "react-feather";
 
-import { Badge } from "@calcom/ui/v2";
+import Badge from "@calcom/ui/v2/core/Badge";
 
 export default {
   title: "Badge",

apps/storybook/stories/Banner.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentStory, ComponentMeta } from "@storybook/react";
 import { Info } from "react-feather";
 
-import { Banner } from "@calcom/ui/v2";
+import Banner from "@calcom/ui/v2/core/banner";
 
 export default {
   title: "Banner",

apps/storybook/stories/Breadcrumb.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import { Breadcrumb, BreadcrumbItem } from "@calcom/ui/v2";
+import Breadcrumb, { BreadcrumbItem } from "@calcom/ui/v2/core/Breadcrumb";
 
 export default {
   title: "Breadcrumbs",

apps/storybook/stories/Button.stories.tsx

@@ -1,11 +1,12 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Trash2 } from "react-feather";
 
-import { Button as ButtonComponent } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
 
 export default {
   title: "Button",
-  component: ButtonComponent,
+  component: Button,
   argTypes: {
     color: {
       options: ["primary", "secondary", "minimal", "destructive"],
@@ -24,67 +25,69 @@ export default {
       control: { type: "radio" },
     },
   },
-} as ComponentMeta<typeof ButtonComponent>;
+} as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...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"
-    />
+    <TooltipProvider>
+      <h1>Primary</h1>
+      <div className="flex space-x-2">
+        <Button aria-label="Button Text">Button Text</Button>
+        <Button disabled aria-label="Button Text">
+          Button Text
+        </Button>
+      </div>
+      <h1>Secondary</h1>
+      <div className="flex space-x-2">
+        <Button color="secondary" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button disabled color="secondary" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button size="icon" color="secondary" StartIcon={Trash2} aria-label="Button Text" />
+      </div>
+      <h1>Minimal</h1>
+      <div className="flex">
+        <Button color="minimal" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button disabled color="minimal" aria-label="Button Text">
+          Button Text
+        </Button>
+        <Button size="icon" color="minimal" StartIcon={Trash2} aria-label="Button Text" />
+      </div>
+      <h1>Destructive</h1>
+      <Button size="icon" color="destructive" StartIcon={Trash2} aria-label="Button Text" />
+      <h1>Tooltip</h1>
+      <Button
+        tooltip="Deletes EventTypes"
+        size="icon"
+        color="destructive"
+        StartIcon={Trash2}
+        aria-label="Button Text"
+      />
+    </TooltipProvider>
   </div>
 );
 
-export const Button = Template.bind({});
-Button.args = {
+export const Default = Template.bind({});
+Default.args = {
   color: "primary",
   children: "Button Text",
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  ...Button.args,
+  ...Default.args,
   disabled: true,
 };
 
 export const Loading = Template.bind({});
 Loading.args = {
-  ...Button.args,
+  ...Default.args,
   loading: true,
 };
 export const Icon = Template.bind({});

apps/storybook/stories/ButtonGroup.stories.tsx

@@ -1,11 +1,20 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta } from "@storybook/react";
 import { ArrowLeft, ArrowRight, Clipboard, Navigation2, Trash2 } from "react-feather";
 
-import { Button, ButtonGroup } from "@calcom/ui/v2";
+import Button from "@calcom/ui/v2/core/Button";
+import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
 
 export default {
   title: "Button Group",
   component: ButtonGroup,
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
 } as ComponentMeta<typeof ButtonGroup>;
 
 export const Default = () => (
@@ -19,13 +28,14 @@ export const Default = () => (
 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 />
+      <Button StartIcon={Trash2} size="icon" color="secondary" />
+      <Button StartIcon={Navigation2} size="icon" color="secondary" />
+      <Button StartIcon={Clipboard} size="icon" color="secondary" />
     </ButtonGroup>
     <ButtonGroup combined>
-      <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-      <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
+      <Button StartIcon={ArrowLeft} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
     </ButtonGroup>
   </div>
 );

apps/storybook/stories/Cards.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
 
-import { BaseCardProps, Card } from "@calcom/ui/v2/Card";
+import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
 
 export default {
   title: "Cards",
@@ -51,3 +52,28 @@ export const AppStore = () => {
     </div>
   );
 };
+
+const sidebarCardProps: BaseCardProps = {
+  variant: "SidebarCard",
+  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
+  mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
+  title: "Dynamic boooking links",
+  description: "Booking link that allows people to quickly schedule meetings.",
+  learnMore: {
+    href: "https://cal.com/blog/cal-v-1-9",
+    text: "Learn more",
+  },
+};
+
+export const SidebarCard = () => {
+  const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
+  return (
+    <header className="w-full max-w-[225px] bg-gray-100 p-3">
+      {visible && (
+        <div>
+          <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
+        </div>
+      )}
+    </header>
+  );
+};

apps/storybook/stories/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from "@storybook/react";
 
-import { Checkbox } from "@calcom/ui/v2";
+import Checkbox from "@calcom/ui/v2/core/form/Checkbox";
 
 export default {
   title: "Checkbox",

apps/storybook/stories/Colors.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import ColorPicker from "@calcom/ui/v2/colorpicker";
+import ColorPicker from "@calcom/ui/v2/core/colorpicker";
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {

apps/storybook/stories/DatePicker.stories.tsx

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

apps/storybook/stories/DateRangePicker.stories.tsx

@@ -0,0 +1,45 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
+import { useState } from "react";
+
+import DateRangePicker from "@calcom/ui/v2/core/form/date-range-picker/DateRangePicker";
+import "@calcom/ui/v2/core/form/date-range-picker/styles.css";
+
+function getISOLocalDate(date) {
+  const year = padStart(date.getFullYear(), 4);
+  const month = padStart(date.getMonth() + 1);
+  const day = padStart(date.getDate());
+
+  return [`${year}-${month}-${day}`];
+}
+
+function padStart(num, val = 2) {
+  const numStr = `${num}`;
+  if (numStr.length >= val) {
+    return num;
+  }
+
+  return `0000${numStr}`.slice(-val);
+}
+
+export default {
+  title: "Date Range Picker",
+  component: DateRangePicker,
+} as ComponentMeta<typeof DateRangePicker>;
+
+export const Default: ComponentStory<typeof DateRangePicker> = () => {
+  const [startDate, setStartDate] = useState<Date>(new Date());
+  const [endDate, setEndDate] = useState<Date>(new Date());
+  return (
+    <div>
+      <DateRangePicker
+        startDate={getISOLocalDate(startDate) as unknown as Date}
+        endDate={getISOLocalDate(endDate) as unknown as Date}
+        onDatesChange={({ startDate, endDate }) => {
+          setStartDate(startDate);
+          setEndDate(endDate);
+        }}
+      />
+    </div>
+  );
+};

apps/storybook/stories/EmptyScreen.stories.tsx

@@ -1,11 +1,11 @@
 import { ComponentMeta } from "@storybook/react";
 import { Bell } from "react-feather";
 
-import { EmptyScreen as EmptyScreenPattern } from "@calcom/ui/v2";
+import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen";
 
 export default {
   title: "pattern/Empty Screen",
-  component: EmptyScreenPattern,
+  component: EmptyScreen,
   decorators: [
     (Story) => (
       <div className="flex items-center justify-center">
@@ -13,13 +13,13 @@ export default {
       </div>
     ),
   ],
-} as ComponentMeta<typeof EmptyScreenPattern>;
+} as ComponentMeta<typeof EmptyScreen>;
 
-export const EmptyScreenS = () => (
-  <EmptyScreenPattern
+export const Default = () => (
+  <EmptyScreen
     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."
+    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 "
     buttonText="Veniam ut ipsum"
     buttonOnClick={() => console.log("Button Clicked")}
   />

apps/storybook/stories/FormStep.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { useState } from "react";
 
-import { FormStep } from "@calcom/ui/v2";
+import FormStep from "@calcom/ui/v2/core/form/FormStep";
 
 export default {
   title: "Form Step",

apps/storybook/stories/HorizontalTab.stories.tsx

@@ -1,8 +1,8 @@
 // Disabling until we figure out what is happening with the RouterMock.
 import { ComponentMeta } from "@storybook/react";
 
-import { HorizontalTabs } from "@calcom/ui/v2/navigation/tabs";
-import { HorizontalTabItemProps } from "@calcom/ui/v2/navigation/tabs/HorizontalTabItem";
+import { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
+import HorizontalTabs from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabs";
 
 export default {
   title: "Horizontal Tabs",
@@ -14,10 +14,19 @@ const HorizontalTabsPropsDefault: HorizontalTabItemProps[] = [
     name: "Tab One",
     href: "/tab-one",
   },
+  {
+    name: "Tab Two",
+    href: "/tab-two",
+  },
+  {
+    name: "Tab Disabled",
+    href: "/tab-disabled",
+    disabled: true,
+  },
 ];
 
 export const Default = () => (
-  <div className="w-full p-4" style={{ backgroundColor: "#F9FAFB" }}>
+  <div className="w-full p-4">
     <HorizontalTabs tabs={HorizontalTabsPropsDefault} />
   </div>
 );
@@ -25,6 +34,6 @@ export const Default = () => (
 Default.parameters = {
   nextRouter: {
     path: "/[page]",
-    asPath: "/profile",
+    asPath: "/tab-one",
   },
 };

apps/storybook/stories/Input.stories.tsx

@@ -1,8 +1,8 @@
 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";
+import { TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
+import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 export default {
   title: "Inputs",

apps/storybook/stories/Modal.stories.tsx

@@ -1,9 +1,7 @@
 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";
+import { Button, Dialog, DialogContent, DialogTrigger, TextField } from "@calcom/ui/v2";
 
 export default {
   title: "pattern/Modal",

apps/storybook/stories/Notifcations.stories.tsx

@@ -1,8 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { Toaster } from "react-hot-toast";
 
-import { Button } from "@calcom/ui/v2";
-import showToast from "@calcom/ui/v2/notfications";
+import { Button, showToast } from "@calcom/ui/v2";
 
 export default {
   title: "Notifcations-Toasts",

apps/storybook/stories/PageHeader.stories.tsx

@@ -1,8 +1,8 @@
 import { ComponentMeta } from "@storybook/react";
 import { Search } from "react-feather";
 
-import { Button, PageHeader } from "@calcom/ui/v2";
-import { TextField } from "@calcom/ui/v2/form";
+import { Button, TextField } from "@calcom/ui/v2";
+import PageHeader from "@calcom/ui/v2/core/PageHeader";
 
 export default {
   title: "pattern/Page Header",

apps/storybook/stories/Radio.stories.tsx

@@ -1,5 +1,5 @@
-import * as Radio from "@calcom/ui/v2/form/radio-area/Radio";
-import { RadioField } from "@calcom/ui/v2/form/radio-area/Radio";
+import * as Radio from "@calcom/ui/v2/core/form/radio-area/Radio";
+import { RadioField } from "@calcom/ui/v2/core/form/radio-area/Radio";
 
 export default {
   title: "Radio",

apps/storybook/stories/Select.stories.tsx

@@ -1,10 +1,33 @@
 import { ComponentMeta } from "@storybook/react";
 
 import { Select } from "@calcom/ui/v2";
+import MultiDropdownSelect from "@calcom/ui/v2/modules/event-types/MultiDropdownSelect";
 
 export default {
   title: "Form/Select",
   component: Select,
 } as ComponentMeta<typeof Select>;
 
-export const Single = () => <Select items={[{ value: "Test Test" }]} />;
+const singleOptions = [
+  {
+    label: "Select",
+    value: 0,
+  },
+  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+    label: minutes + " " + "minutes",
+    value: minutes,
+  })),
+];
+const multiOptions = [
+  {
+    label: "Select",
+    value: 0,
+  },
+  ...[5, 10, 15, 20, 30, 45, 60, 90, 120].map((minutes) => ({
+    label: minutes + " " + "minutes",
+    value: minutes,
+  })),
+];
+
+export const Single = () => <Select options={singleOptions} />;
+export const Multi = () => <MultiDropdownSelect options={multiOptions} />;

apps/storybook/stories/TabItem.stories.tsx

@@ -16,52 +16,52 @@ const TabItemProps = {
   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>
-// );
+export const Default = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem {...TabItemProps} />
+  </div>
+);
+export const Active = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem {...TabItemProps} />
+  </div>
+);
 
 // Mocking next router to show active state
-// Active.parameters = {
-//   nextRouter: {
-//     path: "/settings/[tab]",
-//     asPath: "/settings/event",
-//   },
-// };
+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 Disabled = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem {...TabItemProps} disabled />
+  </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 NoIconNoInfo = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem name="Event Setup" href="/settings/event" />
+  </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 IconNoInfo = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem name="Event Setup" href="/settings/event" icon={Link} />
+  </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>
-// );
+export const IconNoInfoActive = () => (
+  <div className="h-20 w-full bg-gray-100 p-4">
+    <VerticalTabItem name="Event Setup" href="/settings/events" icon={Link} />
+  </div>
+);
 
-// IconNoInfoActive.paramaters = {
-//   nextRouter: {
-//     path: "/settings/[tab]",
-//     asPath: "/settings/events",
-//   },
-// };
+IconNoInfoActive.paramaters = {
+  nextRouter: {
+    path: "/settings/[tab]",
+    asPath: "/settings/events",
+  },
+};

apps/storybook/stories/VerticalTab.stories.tsx

@@ -2,7 +2,7 @@
 import { ComponentMeta } from "@storybook/react";
 import { Calendar, Clock, Grid, Link, RefreshCw, User, Users } from "react-feather";
 
-import { VerticalTabs } from "@calcom/ui/v2/navigation/tabs";
+import VerticalTabs from "@calcom/ui/v2/core/navigation/tabs/VerticalTabs";
 
 export default {
   title: "Vertical Tabs",

apps/storybook/styles/globals.css

@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "../../../packages/ui/v2/core/form/date-range-picker/styles.css";
+@import "../../../node_modules/@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
+
 :root {
   --brand-color: #292929;
   --brand-text-color: #ffffff;

apps/swagger/package.json

@@ -12,18 +12,18 @@
     "start": "PORT=4200 next start"
   },
   "dependencies": {
-    "highlight.js": "^11.5.1",
+    "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "12.2.0",
+    "next": "^12.2.5",
     "openapi-snippet": "^0.13.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "swagger-ui-react": "4.11.1"
   },
   "devDependencies": {
     "@types/node": "16.9.1",
-    "@types/react": "18.0.9",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "18.0.4",
-    "typescript": "4.6.4"
+    "typescript": "^4.7.4"
   }
 }

apps/web/.gitignore

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

apps/web/calendso.yaml

@@ -277,179 +277,6 @@ paths:
                   type: string
                 integration:
                   type: string
-  /api/availability/day:
-    patch:
-      description: Updates the start and end times for a user's availability.
-      summary: Updates the user's start and end times
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  message:
-                    type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                startMins:
-                  type: string
-                endMins:
-                  type: string
-                bufferMins:
-                  type: string
-        description: ""
-  /api/availability/eventtype:
-    post:
-      description: Adds a new event type for the user.
-      summary: Adds a new event type
-      tags:
-        - Availability
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                title:
-                  type: string
-                slug:
-                  type: string
-                description:
-                  type: string
-                length:
-                  type: string
-                hidden:
-                  type: boolean
-                requiresConfirmation:
-                  type: boolean
-                locations:
-                  type: array
-                  items: {}
-                eventName:
-                  type: string
-                customInputs:
-                  type: array
-                  items: {}
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  eventType:
-                    type: object
-                    properties:
-                      title:
-                        type: string
-                      slug:
-                        type: string
-                      description:
-                        type: string
-                      length:
-                        type: string
-                      hidden:
-                        type: boolean
-                      requiresConfirmation:
-                        type: boolean
-                      locations:
-                        type: array
-                        items: {}
-                      eventName:
-                        type: string
-                      customInputs:
-                        type: array
-                        items: {}
-        "500":
-          description: Internal Server Error
-    patch:
-      description: Updates an event type for the user.
-      summary: Updates an event type
-      tags:
-        - Availability
-      requestBody:
-        content:
-          application/json:
-            schema:
-              type: object
-              properties:
-                title:
-                  type: string
-                slug:
-                  type: string
-                description:
-                  type: string
-                length:
-                  type: string
-                hidden:
-                  type: boolean
-                requiresConfirmation:
-                  type: boolean
-                locations:
-                  type: array
-                  items: {}
-                eventName:
-                  type: string
-                customInputs:
-                  type: array
-                  items: {}
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  eventType:
-                    type: object
-                    properties:
-                      title:
-                        type: string
-                      slug:
-                        type: string
-                      description:
-                        type: string
-                      length:
-                        type: string
-                      hidden:
-                        type: boolean
-                      requiresConfirmation:
-                        type: boolean
-                      locations:
-                        type: array
-                        items: {}
-                      eventName:
-                        type: string
-                      customInputs:
-                        type: array
-                        items: {}
-        "500":
-          description: Internal Server Error
-    delete:
-      description: Deletes an event type for the user.
-      summary: Deletes an event type
-      tags:
-        - Availability
-      responses:
-        "200":
-          description: OK
-          content:
-            application/json:
-              schema:
-                type: object
-                properties: {}
-        "500":
-          description: Internal Server Error
   "/api/book/event":
     post:
       description: Creates a booking in the user's calendar.

apps/web/components/App.tsx

@@ -9,9 +9,9 @@ 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 Badge from "@calcom/ui/Badge";
 import { Icon } from "@calcom/ui/Icon";
 import Shell from "@calcom/ui/Shell";
+import Badge from "@calcom/ui/v2/core/Badge";
 
 const Component = ({
   name,
@@ -80,7 +80,7 @@ const Component = ({
 
   return (
     <div className="-mx-4 md:-mx-8">
-      <div className="bg-gray-50 px-8">
+      <div className="px-8">
         <Link href="/apps">
           <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
             <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}

apps/web/components/DestinationCalendarSelector.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 
 interface Props {
@@ -11,6 +12,7 @@ interface Props {
   hidePlaceholder?: boolean;
   /** The external Id of the connected calendar */
   value: string | undefined;
+  destinationCalendar?: DestinationCalendar | null;
 }
 
 const DestinationCalendarSelector = ({
@@ -18,6 +20,7 @@ const DestinationCalendarSelector = ({
   isLoading,
   value,
   hidePlaceholder,
+  destinationCalendar,
 }: Props): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
@@ -67,11 +70,26 @@ const DestinationCalendarSelector = ({
           value: `${cal.integration}:${cal.externalId}`,
         })),
     })) ?? [];
+  const defaultCalendarSelectedString = destinationCalendar?.externalId
+    ? `(${
+        destinationCalendar.externalId.length > 15
+          ? destinationCalendar.externalId.substring(0, 15) + "..."
+          : destinationCalendar.externalId
+      })`
+    : "";
   return (
     <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
       <Select
         name="primarySelectedCalendar"
-        placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
+        placeholder={
+          !hidePlaceholder ? (
+            `${t("select_destination_calendar")}`
+          ) : (
+            <span className="whitespace-nowrap">
+              {t("default_calendar_selected")} {defaultCalendarSelectedString}
+            </span>
+          )
+        }
         options={options}
         styles={{
           placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
@@ -89,10 +107,10 @@ const DestinationCalendarSelector = ({
           control: (defaultStyles) => {
             return {
               ...defaultStyles,
-              borderRadius: "2px",
+              borderRadius: "6px",
               "@media only screen and (min-width: 640px)": {
                 ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
-                maxWidth: "320px",
+                width: "100%",
               },
             };
           },
@@ -118,6 +136,9 @@ const DestinationCalendarSelector = ({
         }}
         isLoading={isLoading}
         value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
       />
     </div>
   );

apps/web/components/Embed.tsx

@@ -6,10 +6,10 @@ import { components, ControlProps } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
-import { Button, Switch } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
+import { Button, Switch } from "@calcom/ui/v2";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
@@ -222,7 +222,11 @@ const getEmbedTypeSpecificString = ({
   if (!frameworkCodes) {
     throw new Error(`No code available for the framework:${embedFramework}`);
   }
-  let uiInstructionStringArg = undefined;
+  let uiInstructionStringArg: {
+    apiName: string;
+    theme: PreviewState["theme"];
+    brandColor: string;
+  };
   if (embedFramework === "react") {
     uiInstructionStringArg = {
       apiName: "cal",
@@ -545,7 +549,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType }
+      { calLink: string; embedType: EmbedType; previewState: PreviewState }
     >(function Preview({ calLink, embedType }, ref) {
       if (ref instanceof Function || !ref) {
         return null;
@@ -1124,7 +1128,7 @@ export const EmbedDialog = () => {
 type EmbedButtonProps<T> = {
   embedUrl: string;
   children?: React.ReactNode;
-  className: string;
+  className?: string;
   as?: T;
 };
 
@@ -1136,7 +1140,7 @@ export const EmbedButton = <T extends React.ElementType>({
   ...props
 }: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
   const router = useRouter();
-  className = classNames(className, "hidden lg:flex");
+  className = classNames(className, "hidden lg:inline-flex");
   const openEmbedModal = () => {
     const query = {
       ...router.query,
@@ -1160,7 +1164,10 @@ export const EmbedButton = <T extends React.ElementType>({
       className={className}
       data-test-embed-url={embedUrl}
       data-testid="embed"
-      onClick={() => openEmbedModal()}>
+      type="button"
+      onClick={() => {
+        openEmbedModal();
+      }}>
       {children}
     </Component>
   );

apps/web/components/Gates.tsx

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

apps/web/components/ImageUploader.tsx

@@ -63,6 +63,7 @@ function CropContainer({
   );
 }
 
+/** @deprecated Use `packages/ui/v2/core/ImageUploader.tsx` */
 export default function ImageUploader({
   target,
   id,

apps/web/components/Loader.tsx

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

apps/web/components/apps/AllApps.tsx

@@ -11,16 +11,7 @@ export default function AllApps({ apps }: { apps: App[] }) {
       <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
       <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
         {apps.map((app) => (
-          <AppCard
-            key={app.name}
-            name={app.name}
-            slug={app.slug}
-            description={app.description}
-            logo={app.logo}
-            rating={app.rating}
-            reviews={app.reviews}
-            isProOnly={app.isProOnly}
-          />
+          <AppCard key={app.name} app={app} />
         ))}
       </div>
     </div>

apps/web/components/apps/AppCard.tsx

@@ -1,31 +1,25 @@
 import Link from "next/link";
 
 import { trpc } from "@calcom/trpc/react";
+import { App } from "@calcom/types/App";
 import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
 
 interface AppCardProps {
-  logo: string;
-  name: string;
-  slug?: string;
-  category?: string;
-  description: string;
-  rating: number;
-  reviews?: number;
-  isProOnly?: boolean;
+  app: App;
 }
 
 export default function AppCard(props: AppCardProps) {
   const { data: user } = trpc.useQuery(["viewer.me"]);
   return (
-    <Link href={"/apps/" + props.slug}>
+    <Link href={"/apps/" + props.app.slug}>
       <a
         className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
-        data-testid={`app-store-app-card-${props.slug}`}>
+        data-testid={`app-store-app-card-${props.app.slug}`}>
         <div className="flex">
           {
             // eslint-disable-next-line @next/next/no-img-element
-            <img src={props.logo} alt={props.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
+            <img src={props.app.logo} alt={props.app.name + " Logo"} className="mb-4 h-12 w-12 rounded-sm" />
           }
           <Button
             color="secondary"
@@ -37,8 +31,8 @@ export default function AppCard(props: AppCardProps) {
           </Button>
         </div>
         <div className="flex items-center">
-          <h3 className="font-medium">{props.name}</h3>
-          {props.isProOnly && user?.plan === "FREE" ? (
+          <h3 className="font-medium">{props.app.name}</h3>
+          {props.app.isProOnly && user?.plan === "FREE" ? (
             <Badge className="ml-2" variant="default">
               PRO
             </Badge>
@@ -48,7 +42,7 @@ export default function AppCard(props: AppCardProps) {
           <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
           <span className="pl-1 text-gray-500">{props.reviews} reviews</span>
         </div> */}
-        <p className="mt-2 truncate text-sm text-gray-500">{props.description}</p>
+        <p className="mt-2 truncate text-sm text-gray-500">{props.app.description}</p>
       </a>
     </Link>
   );

apps/web/components/apps/TrendingAppsSlider.tsx

@@ -21,20 +21,10 @@ const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
           },
         },
       }}
-      renderItem={(app) => (
-        <AppCard
-          key={app.name}
-          name={app.name}
-          slug={app.slug}
-          description={app.description}
-          logo={app.logo}
-          rating={app.rating}
-          reviews={app.reviews}
-          isProOnly={app.isProOnly}
-        />
-      )}
+      renderItem={(app) => <AppCard app={app} />}
     />
   );
 };
 
+/** @deprecated use v2 instead, located at packages/ui/v2/core/apps  */
 export default TrendingAppsSlider;

apps/web/components/auth/TwoFactor.tsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from "react";
 import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
-import { Input } from "@calcom/ui/form/fields";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, Input } from "@calcom/ui/form/fields";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
-export default function TwoFactor() {
+export default function TwoFactor({ center = true }) {
   const [value, onChange] = useState("");
   const { t } = useLocale();
   const methods = useFormContext();
@@ -26,7 +25,9 @@ export default function TwoFactor() {
   const className = "h-12 w-12 !text-xl text-center";
 
   return (
-    <div className="mx-auto !mt-0 max-w-sm">
+    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+      <Label className="mt-4"> {t("2fa_code")}</Label>
+
       <p className="mb-4 text-sm text-gray-500">{t("2fa_enabled_instructions")}</p>
       <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
       <div className="flex flex-row justify-between">

apps/web/components/availability/Schedule.tsx

@@ -1,3 +1,7 @@
+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
@@ -192,6 +196,10 @@ const CopyTimes = ({ disabled, onApply }: { disabled: number[]; onApply: (select
   );
 };
 
+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 export const DayRanges = ({
   name,
   defaultValue = [defaultDayRange],
@@ -324,6 +332,10 @@ const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
   );
 };
 
+/**
+ * @deprecated
+ * use Component in  "/packages/features/schedules/components/Schedule";
+ **/
 const Schedule = ({ name }: { name: string }) => {
   const { i18n } = useLocale();
   return (

apps/web/components/availability/ScheduleListItem.tsx

@@ -1,3 +1,7 @@
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
+ */
 import Link from "next/link";
 import { Fragment } from "react";
 
@@ -9,6 +13,10 @@ import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
 
+/**
+ * @deprecated modifications to this file should be v2 only
+ * Use `/packages/features/schedules/components/ScheduleListItem.tsx` instead
+ */
 export function ScheduleListItem({
   schedule,
   deleteFunction,
@@ -37,7 +45,7 @@ export function ScheduleListItem({
               <p className="mt-1 text-xs text-neutral-500">
                 {schedule.availability.map((availability: Availability) => (
                   <Fragment key={availability.id}>
-                    {availabilityAsString(availability, i18n.language)}
+                    {availabilityAsString(availability, { locale: i18n.language })}
                     <br />
                   </Fragment>
                 ))}
@@ -45,6 +53,7 @@ export function ScheduleListItem({
             </a>
           </Link>
         </div>
+
         <Dropdown>
           <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
             <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />

apps/web/components/availability/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />

apps/web/components/booking/AvailableEventLocations.tsx

@@ -0,0 +1,35 @@
+import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
+import { classNames } from "@calcom/lib";
+
+import { Props } from "./pages/AvailabilityPage";
+
+export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
+  return locations.length ? (
+    <div>
+      <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-2 break-words text-sm text-gray-600">
+        {locations.map((location) => {
+          const eventLocationType = getEventLocationType(location.type);
+          if (!eventLocationType) {
+            // It's possible that the location app got uninstalled
+            return null;
+          }
+          return (
+            <div key={location.type} className="flex flex-row items-center text-sm font-medium">
+              <img
+                src={eventLocationType.iconUrl}
+                className={classNames(
+                  "mr-[10px] ml-[2px] h-4 w-4 opacity-70 dark:opacity-100 ",
+                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert" : ""
+                )}
+                alt={`${eventLocationType.label} icon`}
+              />
+              <span key={location.type}>{locationKeyToString(location)} </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+}

apps/web/components/booking/AvailableTimes.tsx

@@ -20,6 +20,7 @@ type AvailableTimesProps = {
   seatsPerTimeSlot?: number | null;
   slots?: Slot[];
   isLoading: boolean;
+  ethSignature?: string;
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
@@ -31,6 +32,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   recurringCount,
   timeFormat,
   seatsPerTimeSlot,
+  ethSignature,
 }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
@@ -43,9 +45,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   }, []);
 
   return (
-    <div className="mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-4 ">
+    <div className="dark:bg-darkgray-100 mt-8 flex flex-col px-4 text-center sm:mt-0 sm:w-1/3 sm:p-5 md:-mb-5">
       <div className="mb-4 text-left text-base">
-        <span className="text-bookingdarker mb-8 w-1/2 break-words font-semibold text-gray-900 dark:text-white">
+        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
           {nameOfDay(i18n.language, Number(date.format("d")))}
         </span>
         <span className="text-bookinglight font-medium">
@@ -53,7 +55,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
           {date.toDate().toLocaleString(i18n.language, { month: "long" })}
         </span>
       </div>
-      <div className="grid flex-grow grid-cols-2 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
+      <div className="grid flex-grow grid-cols-1 gap-x-2 overflow-y-auto sm:block md:h-[364px]">
         {slots.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
@@ -69,6 +71,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 slug: eventTypeSlug,
                 /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
                 count: recurringCount && !rescheduleUid ? recurringCount : undefined,
+                ethSignature,
               },
             };
 
@@ -87,8 +90,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                   <div
                     className={classNames(
-                      "text-primary-500 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25  dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
-                      brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                      "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2  font-medium opacity-25 dark:border-transparent ",
+                      brand === "#fff" || brand === "#ffffff" ? "" : ""
                     )}>
                     {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                     {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
@@ -97,8 +100,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                   <Link href={bookingUrl} prefetch={false}>
                     <a
                       className={classNames(
-                        "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 block rounded-sm border bg-white py-4 text-sm font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
-                        brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                        "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
+                        "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent dark:text-neutral-200",
+                        brand === "#fff" || brand === "#ffffff" ? "" : ""
                       )}
                       data-testid="time">
                       {dayjs(slot.time).tz(timeZone()).format(timeFormat)}

apps/web/components/booking/BookingListItem.tsx

@@ -1,24 +1,22 @@
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { useMutation } from "react-query";
 
+import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 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 { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
+import Badge from "@calcom/ui/v2/core/Badge";
+import Button from "@calcom/ui/v2/core/Button";
 
-import { HttpError } from "@lib/core/http/error";
 import useMeQuery from "@lib/hooks/useMeQuery";
-import { linkValueToString } from "@lib/linkValueToString";
-import { LocationType } from "@lib/location";
 import { extractRecurringDates } from "@lib/parseDate";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -43,39 +41,29 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
-  const mutation = useMutation(
-    async (confirm: boolean) => {
-      let body = {
-        id: booking.id,
-        confirmed: confirm,
-        language: i18n.language,
-        reason: rejectionReason,
-      };
-      /**
-       * Only pass down the recurring event id when we need to confirm the entire series, which happens in
-       * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
-       */
-      if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
-        body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
-      }
-      const res = await fetch("/api/book/confirm", {
-        method: "PATCH",
-        body: JSON.stringify(body),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      if (!res.ok) {
-        throw new HttpError({ statusCode: res.status });
-      }
+  const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
+    onSuccess: () => {
       setRejectionDialogIsOpen(false);
+      utils.invalidateQueries("viewer.bookings");
     },
-    {
-      async onSettled() {
-        await utils.invalidateQueries(["viewer.bookings"]);
-      },
+  });
+
+  const bookingConfirm = async (confirm: boolean) => {
+    let body = {
+      bookingId: booking.id,
+      confirmed: confirm,
+      reason: rejectionReason,
+    };
+    /**
+     * Only pass down the recurring event id when we need to confirm the entire series, which happens in
+     * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+     */
+    if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+      body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
     }
-  );
+    mutation.mutate(body);
+  };
+
   const isUpcoming = new Date(booking.endTime) >= new Date();
   const isCancelled = booking.status === BookingStatus.CANCELLED;
   const isConfirmed = booking.status === BookingStatus.ACCEPTED;
@@ -102,7 +90,7 @@ function BookingListItem(booking: BookingItemProps) {
           ? t("confirm_all")
           : t("confirm"),
       onClick: () => {
-        mutation.mutate(true);
+        bookingConfirm(true);
       },
       icon: Icon.FiCheck,
       disabled: mutation.isLoading,
@@ -182,17 +170,10 @@ function BookingListItem(booking: BookingItemProps) {
     },
   });
 
-  const saveLocation = (newLocationType: LocationType, details: { [key: string]: string }) => {
+  const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => {
     let newLocation = newLocationType as string;
-    if (
-      newLocationType === LocationType.InPerson ||
-      newLocationType === LocationType.Link ||
-      newLocationType === LocationType.UserPhone ||
-      newLocationType === LocationType.Riverside ||
-      newLocationType === LocationType.Around ||
-      newLocationType === LocationType.Whereby ||
-      newLocationType === LocationType.Ping
-    ) {
+    const eventLocationType = getEventLocationType(newLocationType);
+    if (eventLocationType?.organizerInputType) {
       newLocation = details[Object.keys(details)[0]];
     }
     setLocationMutation.mutate({ bookingId: booking.id, newLocation });
@@ -201,31 +182,16 @@ function BookingListItem(booking: BookingItemProps) {
   // Calculate the booking date(s) and setup recurring event data to show
   let recurringStrings: string[] = [];
   let recurringDates: Date[] = [];
-  const today = new Date();
+
   if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
     [recurringStrings, recurringDates] = extractRecurringDates(
       booking.recurringBookings,
       user?.timeZone,
       i18n
     );
-    if (booking.status === BookingStatus.PENDING) {
-      // Only take into consideration next up instances if booking is confirmed
-      recurringDates = recurringDates.filter((aDate) => aDate >= today);
-      recurringStrings = recurringDates.map((_, key) => recurringStrings[key]);
-    }
   }
 
-  let location = booking.location || "";
-
-  if (location.includes("integration")) {
-    if (booking.status === BookingStatus.CANCELLED || booking.status === BookingStatus.REJECTED) {
-      location = t("web_conference");
-    } else if (isConfirmed) {
-      location = linkValueToString(booking.location, t);
-    } else {
-      location = t("web_conferencing_details_to_follow");
-    }
-  }
+  const location = booking.location || "";
 
   const onClick = () => {
     router.push({
@@ -287,7 +253,7 @@ function BookingListItem(booking: BookingItemProps) {
             <Button
               disabled={mutation.isLoading}
               onClick={() => {
-                mutation.mutate(false);
+                bookingConfirm(false);
               }}>
               {t("rejection_confirmation")}
             </Button>
@@ -296,7 +262,7 @@ function BookingListItem(booking: BookingItemProps) {
       </Dialog>
 
       <tr className="flex hover:bg-neutral-50">
-        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-64" onClick={onClick}>
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-28" onClick={onClick}>
           <div className="cursor-pointer py-4">
             <div className="text-sm leading-6 text-gray-900">{startTime}</div>
             <div className="text-sm text-gray-500">
@@ -337,19 +303,23 @@ function BookingListItem(booking: BookingItemProps) {
             </div>
           </div>
         </td>
-        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+        <td className={"flex-1 px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
           <div className="cursor-pointer py-4">
-            <div className="sm:hidden">
-              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
-              {!!booking?.eventType?.price && !booking.paid && (
-                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
-              )}
-              <div className="text-sm font-medium text-gray-900">
-                {startTime}:{" "}
-                <small className="text-sm text-gray-500">
-                  {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-                </small>
-              </div>
+            {isPending && (
+              <Badge variant="orange" className="mb-2 ltr:mr-2 rtl:ml-2">
+                {t("unconfirmed")}
+              </Badge>
+            )}
+            {!!booking?.eventType?.price && !booking.paid && (
+              <Badge variant="orange" className="mb-2 ltr:mr-2 rtl:ml-2">
+                {t("pending_payment")}
+              </Badge>
+            )}
+            <div className="text-sm font-medium text-gray-900">
+              {startTime}:{" "}
+              <small className="text-sm text-gray-500">
+                {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+              </small>
             </div>
             <div
               title={booking.title}
@@ -357,8 +327,10 @@ function BookingListItem(booking: BookingItemProps) {
                 "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
               {booking.title}
+              <span> </span>
+              {booking.eventType?.team && <Badge variant="gray">{booking.eventType.team.name}</Badge>}
+
               {!!booking?.eventType?.price && !booking.paid && (
                 <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
               )}
@@ -371,14 +343,12 @@ function BookingListItem(booking: BookingItemProps) {
                 &quot;{booking.description}&quot;
               </div>
             )}
-
             {booking.attendees.length !== 0 && (
-              <a
-                className="text-sm text-gray-900 hover:text-blue-500"
-                href={"mailto:" + booking.attendees[0].email}
-                onClick={(e) => e.stopPropagation()}>
-                {booking.attendees[0].email}
-              </a>
+              <DisplayAttendees
+                attendees={booking.attendees}
+                user={booking.user}
+                currentEmail={user?.email}
+              />
             )}
             {isCancelled && booking.rescheduled && (
               <div className="mt-2 inline-block text-left text-sm md:hidden">
@@ -407,6 +377,90 @@ function BookingListItem(booking: BookingItemProps) {
   );
 }
 
+interface UserProps {
+  id: number;
+  name: string | null;
+  email: string;
+}
+
+const FirstAttendee = ({
+  user,
+  currentEmail,
+}: {
+  user: UserProps;
+  currentEmail: string | null | undefined;
+}) => {
+  return user.email === currentEmail ? (
+    <div className="inline-block">You</div>
+  ) : (
+    <a
+      key={user.email}
+      className=" hover:text-blue-500"
+      href={"mailto:" + user.email}
+      onClick={(e) => e.stopPropagation()}>
+      {user.name}
+    </a>
+  );
+};
+
+const Attendee: React.FC<{ email: string; children: React.ReactNode }> = ({ email, children }) => {
+  return (
+    <a className=" hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
+      {children}
+    </a>
+  );
+};
+
+interface AttendeeProps {
+  name: string;
+  email: string;
+}
+
+const DisplayAttendees = ({
+  attendees,
+  user,
+  currentEmail,
+}: {
+  attendees: AttendeeProps[];
+  user: UserProps | null;
+  currentEmail: string | null | undefined;
+}) => {
+  if (attendees.length === 1) {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>&nbsp;and&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+      </div>
+    );
+  } else if (attendees.length === 2) {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>,&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+        <div className="inline-block text-sm text-gray-900">&nbsp;and&nbsp;</div>
+        <Attendee email={attendees[1].email}>{attendees[1].name}</Attendee>
+      </div>
+    );
+  } else {
+    return (
+      <div className="text-sm text-gray-900">
+        {user && <FirstAttendee user={user} currentEmail={currentEmail} />}
+        <span>,&nbsp;</span>
+        <Attendee email={attendees[0].email}>{attendees[0].name}</Attendee>
+        <span>&nbsp;&&nbsp;</span>
+        <Tooltip
+          content={attendees.slice(1).map((attendee, key) => (
+            <p key={key}>{attendee.name}</p>
+          ))}>
+          <div className="inline-block">{attendees.length - 1} more</div>
+        </Tooltip>
+      </div>
+    );
+  }
+};
+
 const Tag = ({ children, className = "" }: React.PropsWithChildren<{ className?: string }>) => {
   return (
     <span

apps/web/components/booking/SkeletonLoader.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
-    <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+    <ul className="animate-pulse divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:overflow-hidden">
       <SkeletonItem />
       <SkeletonItem />
       <SkeletonItem />
@@ -16,7 +16,7 @@ export default SkeletonLoader;
 
 function SkeletonItem() {
   return (
-    <li className="group flex w-full items-center justify-between px-2 py-4 sm:px-6">
+    <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">

apps/web/components/booking/TimeOptions.tsx

@@ -1,8 +1,8 @@
 import { FC, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import Switch from "@calcom/ui/Switch";
 import TimezoneSelect, { ITimezoneOption } from "@calcom/ui/form/TimezoneSelect";
+import { Switch } from "@calcom/ui/v2";
 
 import { is24h, timeZone } from "../../lib/clock";
 
@@ -33,7 +33,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
   };
 
   return selectedTimeZone !== "" ? (
-    <div className="max-w-80 absolute z-10 w-full rounded-sm rounded border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm dark:border-0 dark:bg-gray-700">
+    <div className="max-w-80 dark:border-darkgray-300 dark:bg-darkgray-200 absolute z-10 w-full rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
       <div className="mb-4 flex">
         <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="ml-auto flex items-center">

apps/web/components/booking/UserAvatars.tsx

@@ -14,7 +14,7 @@ export const UserAvatars = ({
   const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
   return (
     <AvatarGroup
-      border="border-2 dark:border-gray-800 border-white"
+      border="border-2 dark:border-darkgray-100 border-white"
       items={
         [
           { image: profile.image, alt: profile.name, title: profile.name },

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

@@ -4,11 +4,11 @@ import { SchedulingType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useReducer, useEffect, useMemo, useState } from "react";
+import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";
 
-import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
@@ -16,7 +16,6 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import { useContracts } from "@calcom/features/ee/web3/contexts/contractsContext";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { WEBSITE_URL } from "@calcom/lib/constants";
@@ -29,13 +28,14 @@ import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
-import DatePicker from "@calcom/ui/booker/DatePicker";
+import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 // import { timeZone } from "@lib/clock";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
 
+import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
 import TimeOptions from "@components/booking/TimeOptions";
 import { UserAvatars } from "@components/booking/UserAvatars";
@@ -46,41 +46,7 @@ import PoweredByCal from "@components/ui/PoweredByCal";
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-
-type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
-
-export const locationKeyToString = (location: LocationObject, t: TFunction) => {
-  switch (location.type) {
-    case LocationType.InPerson:
-      return location.address || "In Person"; // If disabled address won't exist on the object
-    case LocationType.Link:
-    case LocationType.Ping:
-    case LocationType.Riverside:
-    case LocationType.Around:
-    case LocationType.Whereby:
-      return location.link || "Link"; // If disabled link won't exist on the object
-    case LocationType.Phone:
-      return t("your_number");
-    case LocationType.UserPhone:
-      return t("phone_call");
-    case LocationType.GoogleMeet:
-      return "Google Meet";
-    case LocationType.Zoom:
-      return "Zoom";
-    case LocationType.Daily:
-      return "Cal Video";
-    case LocationType.Jitsi:
-      return "Jitsi";
-    case LocationType.Huddle01:
-      return "Huddle Video";
-    case LocationType.Tandem:
-      return "Tandem";
-    case LocationType.Teams:
-      return "Microsoft Teams";
-    default:
-      return null;
-  }
-};
+import { AvailableEventLocations } from "../AvailableEventLocations";
 
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   const router = useRouter();
@@ -91,7 +57,7 @@ const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   return (
     <div className="flex h-full flex-col justify-end">
       <button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
-        <Icon.FiArrowLeft className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
+        <Icon.FiArrowLeft className="dark:text-darkgray-600 h-4 w-4 text-black transition-opacity hover:cursor-pointer" />
         <p className="sr-only">Go Back</p>
       </button>
     </div>
@@ -147,6 +113,7 @@ const SlotPicker = ({
   users,
   seatsPerTimeSlot,
   weekStart = 0,
+  ethSignature,
 }: {
   eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
   timeFormat: string;
@@ -155,6 +122,7 @@ const SlotPicker = ({
   recurringEventCount?: number;
   users: string[];
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  ethSignature?: string;
 }) => {
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
@@ -208,9 +176,9 @@ const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 w-full sm:mt-0 sm:min-w-[455px]",
+          "mt-8 w-full px-4 sm:mt-0 sm:min-w-[455px] md:px-5",
           selectedDate
-            ? "border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 "
+            ? "sm:dark:border-darkgray-200 border-gray-200 sm:w-1/2 sm:border-r sm:p-4 sm:pr-6 md:w-1/3 "
             : "sm:p-4"
         )}
         includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
@@ -236,6 +204,7 @@ const SlotPicker = ({
           eventTypeSlug={eventType.slug}
           seatsPerTimeSlot={seatsPerTimeSlot}
           recurringCount={recurringEventCount}
+          ethSignature={ethSignature}
         />
       )}
     </>
@@ -272,15 +241,15 @@ function TimezoneDropdown({
   };
 
   return (
-    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-      <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
-        <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
-          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
+      <Collapsible.Trigger className="min-w-32 dark:text-darkgray-600 mb-2 -ml-2 px-2 text-left text-gray-600">
+        <p className="text-sm font-medium">
+          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
           {timeZone}
           {isTimeOptionsOpen ? (
-            <Icon.FiChevronUp className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-500" />
+            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4 " />
           ) : (
-            <Icon.FiChevronDown className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-500" />
+            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4 " />
           )}
         </p>
       </Collapsible.Trigger>
@@ -318,6 +287,8 @@ const useRouterQuery = <T extends string>(name: T) => {
   } & { setQuery: typeof setQuery };
 };
 
+export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
+
 const AvailabilityPage = ({ profile, eventType }: Props) => {
   const router = useRouter();
   const isEmbed = useIsEmbed();
@@ -325,7 +296,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const { rescheduleUid } = query;
   useTheme(profile.theme);
   const { t } = useLocale();
-  const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
@@ -334,6 +304,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const [timeZone, setTimeZone] = useState<string>();
   const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
   const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+  const [gateState, gateDispatcher] = useReducer(
+    (state: GateState, newState: Partial<GateState>) => ({
+      ...state,
+      ...newState,
+    }),
+    {}
+  );
 
   useEffect(() => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
@@ -346,15 +323,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   // TODO: Improve this;
   useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
 
-  // TODO: this needs to be extracted elsewhere
-  useEffect(() => {
-    if (eventType.metadata.smartContractAddress) {
-      const eventOwner = eventType.users[0];
-      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        router.replace(`/${eventOwner.username}`);
-    }
-  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
-
   const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
@@ -369,7 +337,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   }, [telemetry]);
 
   // get dynamic user list here
-  const userList = eventType.users.map((user) => user.username).filter(notEmpty);
+  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
   // Recurring event sidebar requires more space
   const maxWidth = isAvailableTimesVisible
     ? recurringEventCount
@@ -393,8 +361,16 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
   const slug = rawSlug.join("/");
 
+  // Define conditional gates here
+  const gates = [
+    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
+    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+      ? ("rainbow" as Gate)
+      : undefined,
+  ];
+
   return (
-    <>
+    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
       <HeadSeo
         title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
         description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
@@ -417,8 +393,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
           <div
             style={availabilityDatePickerEmbedStyles}
             className={classNames(
-              isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
-              "border-bookinglightest rounded-md md:border",
+              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white",
+              "border-bookinglightest overflow-hidden rounded-md md:border",
               isEmbed ? "mx-auto" : maxWidth
             )}>
             {/* mobile: details */}
@@ -432,65 +408,36 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   truncateAfter={5}
                 />
                 <div className="mt-4">
-                  <p className="break-words text-sm font-medium text-black dark:text-white">{profile.name}</p>
-                  <div className="mt-2 gap-2 dark:text-gray-100">
-                    <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
+                  <div className="dark:text-darkgray-900 mt-2 gap-2">
+                    <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+                      {profile.name}
+                    </p>
+                    <h1 className="text-bookingdark dark:text-darkgray-900 mb-4 break-words text-xl font-semibold">
                       {eventType.title}
                     </h1>
-                    <div className="flex flex-col space-y-2">
+                    <div className="flex flex-col space-y-3">
                       {eventType?.description && (
-                        <div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
                           <div>
-                            <Icon.FiInfo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                            <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                           </div>
                           <EventTypeDescriptionSafeHTML eventType={eventType} />
                         </div>
                       )}
                       {eventType?.requiresConfirmation && (
-                        <p className="text-gray-600 dark:text-white">
-                          <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                        <p className="dark:text-darkgray-600 dark:text-darkgray-600 text-gray-600">
+                          <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           {t("requires_confirmation")}
                         </p>
                       )}
-                      {eventType.locations.length === 1 && (
-                        <p className="text-gray-600 dark:text-white">
-                          {Object.values(AppStoreLocationType).includes(
-                            eventType.locations[0].type as unknown as AppStoreLocationType
-                          ) ? (
-                            <Icon.FiVideo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                          ) : (
-                            <Icon.FiMapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                          )}
-
-                          {locationKeyToString(eventType.locations[0], t)}
-                        </p>
-                      )}
-                      {eventType.locations.length > 1 && (
-                        <div className="flex-warp flex text-gray-600 dark:text-white">
-                          <div className="mr-[10px] ml-[2px] -mt-1 ">
-                            <Icon.FiMapPin className="inline-block h-4 w-4 text-gray-500" />
-                          </div>
-                          <p>
-                            {eventType.locations.map((el, i, arr) => {
-                              return (
-                                <span key={el.type}>
-                                  {locationKeyToString(el, t)}{" "}
-                                  {arr.length - 1 !== i && (
-                                    <span className="font-light"> {t("or_lowercase")} </span>
-                                  )}
-                                </span>
-                              );
-                            })}
-                          </p>
-                        </div>
-                      )}
-                      <p className="text-gray-600 dark:text-white">
-                        <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-500" />
+                      <AvailableEventLocations locations={eventType.locations} />
+                      <p className="dark:text-darkgray-600 text-gray-600">
+                        <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                         {eventType.length} {t("minutes")}
                       </p>
                       {eventType.price > 0 && (
-                        <div className="text-gray-600 dark:text-white">
-                          <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-500" />
+                        <div className="dark:text-darkgray-600 text-gray-600">
+                          <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -501,7 +448,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="flex items-center text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 flex items-center text-gray-600">
                           <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 shrink-0 text-gray-500" />
                           <div>
                             <p className="mb-1 -ml-2 inline px-2 py-1">
@@ -511,13 +458,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
+                              className="w-15 dark:text-darkgray-600 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
                               }}
                             />
-                            <p className="inline text-gray-600 dark:text-white">
+                            <p className="dark:text-darkgray-600 inline text-gray-600 ">
                               {t("occurrence", {
                                 count: recurringEventCount,
                               })}
@@ -531,11 +478,11 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         {/* Temp disabled booking?.startTime && rescheduleUid && (
                             <div>
                               <p
-                                className="mt-8 text-gray-600 dark:text-white"
+                                className="mt-8 text-gray-600 dark:text-darkgray-600"
                                 data-testid="former_time_p_mobile">
                                 {t("former_time")}
                               </p>
-                              <p className="text-gray-500 line-through dark:text-white">
+                              <p className="text-gray-500 line-through dark:text-darkgray-600">
                                 <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                                 {typeof booking.startTime === "string" &&
                                   parseDate(dayjs(booking.startTime), i18n)}
@@ -552,7 +499,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
             <div className="overflow-hidden sm:flex">
               <div
                 className={
-                  "hidden overflow-hidden border-gray-200 p-5 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
+                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
                   (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                 }>
                 <UserAvatars
@@ -562,68 +509,37 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   size={10}
                   truncateAfter={3}
                 />
-                <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
+                <h2 className="break-words text-sm font-medium text-gray-600 dark:text-gray-300 lg:mt-2">
                   {profile.name}
                 </h2>
-                <h1 className="font-cal mb-6 break-words text-2xl text-gray-900 dark:text-white">
+                <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
                   {eventType.title}
                 </h1>
-                <div className="flex flex-col space-y-2">
+                <div className="dark:text-darkgray-600 flex flex-col space-y-3 text-sm font-medium text-gray-600">
                   {eventType?.description && (
-                    <div className="flex py-1 text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex ">
                       <div>
-                        <Icon.FiInfo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                        <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                       </div>
                       <EventTypeDescriptionSafeHTML eventType={eventType} />
                     </div>
                   )}
                   {eventType?.requiresConfirmation && (
-                    <div className="flex items-center text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex items-center">
                       <div>
-                        <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                        <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
                       </div>
                       {t("requires_confirmation")}
                     </div>
                   )}
-                  {eventType.locations.length === 1 && (
-                    <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
-                      {Object.values(AppStoreLocationType).includes(
-                        eventType.locations[0].type as unknown as AppStoreLocationType
-                      ) ? (
-                        <Icon.FiVideo className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                      ) : (
-                        <Icon.FiMapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                      )}
-
-                      {locationKeyToString(eventType.locations[0], t)}
-                    </p>
-                  )}
-                  {eventType.locations.length > 1 && (
-                    <div className="flex-warp flex items-center font-medium text-gray-600 dark:text-white">
-                      <div className="mr-[10px] ml-[2px] -mt-1 ">
-                        <Icon.FiMapPin className="inline-block h-4 w-4 text-gray-500" />
-                      </div>
-                      <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
-                        {eventType.locations.map((el, i, arr) => {
-                          return (
-                            <span key={el.type}>
-                              {locationKeyToString(el, t)}{" "}
-                              {arr.length - 1 !== i && (
-                                <span className="text-sm font-light"> {t("or_lowercase")} </span>
-                              )}
-                            </span>
-                          );
-                        })}
-                      </p>
-                    </div>
-                  )}
-                  <p className="py-1 text-sm font-medium text-gray-600 dark:text-white">
-                    <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-500" />
+                  <AvailableEventLocations locations={eventType.locations} />
+                  <p className="text-sm font-medium">
+                    <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
                     {eventType.length} {t("minutes")}
                   </p>
                   {!rescheduleUid && eventType.recurringEvent && (
-                    <div className="flex items-center text-gray-600 dark:text-white">
-                      <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-500" />
+                    <div className="flex items-start text-sm font-medium">
+                      <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
                       <div>
                         <p className="mb-1 -ml-2 inline px-2 py-1">
                           {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -632,13 +548,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                           type="number"
                           min="1"
                           max={eventType.recurringEvent.count}
-                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
+                          className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
                           defaultValue={eventType.recurringEvent.count}
                           onChange={(event) => {
                             setRecurringEventCount(parseInt(event?.target.value));
                           }}
                         />
-                        <p className="inline text-gray-600 dark:text-white">
+                        <p className="inline">
                           {t("occurrence", {
                             count: recurringEventCount,
                           })}
@@ -647,8 +563,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType.price > 0 && (
-                    <p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
-                      <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
+                    <p className="-ml-2 px-2 text-sm font-medium ">
+                      <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={eventType.price / 100.0}
@@ -666,11 +582,11 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-3 text-gray-600 dark:text-white"
+                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
-                      <p className="text-gray-500 line-through dark:text-white">
+                      <p className="text-gray-500 line-through dark:text-darkgray-600">
                         <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
@@ -691,13 +607,15 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 users={userList}
                 seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
                 recurringEventCount={recurringEventCount}
+                ethSignature={gateState.rainbowToken}
               />
             </div>
           </div>
           {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
         </main>
       </div>
-    </>
+      <Toaster position="bottom-right" />
+    </Gates>
   );
 };
 

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

@@ -5,7 +5,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState, useReducer } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
@@ -13,14 +13,20 @@ import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
+import {
+  locationKeyToString,
+  getEventLocationValue,
+  getEventLocationType,
+  EventLocationType,
+} from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
+import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import { useContracts } from "@calcom/features/ee/web3/contexts/contractsContext";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -37,36 +43,26 @@ import { EmailInput, Form } from "@calcom/ui/form/fields";
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
-import { LocationObject, LocationType } from "@lib/location";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 
+import Gates, { Gate, GateState } from "@components/Gates";
 import { UserAvatars } from "@components/booking/UserAvatars";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
-declare global {
-  // eslint-disable-next-line no-var
-  var web3: {
-    currentProvider: {
-      selectedAddress: string;
-    };
-  };
-}
-
-type BookingPageProps = (BookPageProps | TeamBookingPageProps | HashLinkPageProps) & {
-  locationLabels: Record<LocationType, string>;
-};
+type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
 
 type BookingFormValues = {
   name: string;
   email: string;
   notes?: string;
-  locationType?: LocationType;
+  locationType?: EventLocationType["type"];
   guests?: string[];
   phone?: string;
   hostPhoneNumber?: string; // Maybe come up with a better way to name this to distingish between two types of phone numbers
@@ -83,7 +79,6 @@ const BookingPage = ({
   profile,
   isDynamicGroupBooking,
   recurringEventCount,
-  locationLabels,
   hasHashedBookingLink,
   hashedLink,
 }: BookingPageProps) => {
@@ -92,10 +87,16 @@ const BookingPage = ({
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
   const router = useRouter();
-  const { contracts } = useContracts();
   const { data: session } = useSession();
   const isBackgroundTransparent = useIsBackgroundTransparent();
   const telemetry = useTelemetry();
+  const [gateState, gateDispatcher] = useReducer(
+    (state: GateState, newState: Partial<GateState>) => ({
+      ...state,
+      ...newState,
+    }),
+    {}
+  );
 
   useEffect(() => {
     if (top !== window) {
@@ -108,15 +109,6 @@ const BookingPage = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useEffect(() => {
-    if (eventType.metadata.smartContractAddress) {
-      const eventOwner = eventType.users[0];
-
-      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        router.replace(`/${eventOwner.username}`);
-    }
-  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
-
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
       const { id, attendees, paymentUid } = responseData;
@@ -132,16 +124,6 @@ const BookingPage = ({
         );
       }
 
-      const location = (function humanReadableLocation(location) {
-        if (!location) {
-          return;
-        }
-        if (location.includes("integration")) {
-          return t("web_conferencing_details_to_follow");
-        }
-        return location;
-      })(responseData.location);
-
       return router.push({
         pathname: "/success",
         query: {
@@ -152,7 +134,7 @@ const BookingPage = ({
           reschedule: !!rescheduleUid,
           name: attendees[0].name,
           email: attendees[0].email,
-          location,
+          location: responseData.location,
           eventName: profile.eventName || "",
           bookingId: id,
           isSuccessBookingPage: true,
@@ -198,9 +180,6 @@ const BookingPage = ({
   const date = asStringOrNull(router.query.date);
 
   const [guestToggle, setGuestToggle] = useState(booking && booking.attendees.length > 1);
-
-  const eventTypeDetail = { isWeb3Active: false, ...eventType };
-
   // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
   const locations: LocationObject[] = useMemo(
     () => (eventType.locations as LocationObject[]) || [],
@@ -213,7 +192,6 @@ const BookingPage = ({
     }
   }, [router.query.guest]);
 
-  const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
   const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
   const guestListEmails = !isDynamicGroupBooking
     ? booking?.attendees.slice(1).map((attendee) => attendee.email)
@@ -264,6 +242,7 @@ const BookingPage = ({
       guests: guestListEmails,
       notes: booking.description || "",
       rescheduleReason: "",
+      smsReminderNumber: booking.smsReminderNumber || undefined,
       customInputs: eventType.customInputs.reduce(
         (customInputs, input) => ({
           ...customInputs,
@@ -296,12 +275,12 @@ const BookingPage = ({
     resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
   });
 
-  const selectedLocation = useWatch({
+  const selectedLocationType = useWatch({
     control: bookingForm.control,
     name: "locationType",
-    defaultValue: ((): LocationType | undefined => {
+    defaultValue: ((): EventLocationType["type"] | undefined => {
       if (router.query.location) {
-        return router.query.location as LocationType;
+        return router.query.location as EventLocationType["type"];
       }
       if (locations.length === 1) {
         return locations[0]?.type;
@@ -309,40 +288,13 @@ const BookingPage = ({
     })(),
   });
 
-  const getLocationValue = (
-    booking: Pick<BookingFormValues, "locationType" | "phone" | "hostPhoneNumber">
-  ) => {
-    const { locationType } = booking;
-    switch (locationType) {
-      case LocationType.Phone: {
-        return booking.phone || "";
-      }
-      case LocationType.InPerson: {
-        return locationInfo(locationType)?.address || "";
-      }
-      case LocationType.Link: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.UserPhone: {
-        return locationInfo(locationType)?.hostPhoneNumber || "";
-      }
-      case LocationType.Around: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.Riverside: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.Whereby: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.Ping: {
-        return locationInfo(locationType)?.link || "";
-      }
-      // Catches all other location types, such as Google Meet, Zoom etc.
-      default:
-        return selectedLocation || "";
-    }
-  };
+  const selectedLocation = getEventLocationType(selectedLocationType);
+  const AttendeeInput =
+    selectedLocation?.attendeeInputType === "text"
+      ? "input"
+      : selectedLocation?.attendeeInputType === "phone"
+      ? PhoneInput
+      : null;
 
   // Calculate the booking date(s)
   let recurringStrings: string[] = [],
@@ -378,20 +330,11 @@ const BookingPage = ({
         {}
       );
 
-    let web3Details: Record<"userWallet" | "userSignature", string> | undefined;
-    if (eventTypeDetail.metadata.smartContractAddress) {
-      web3Details = {
-        userWallet: window.web3.currentProvider.selectedAddress,
-        userSignature: contracts[(eventTypeDetail.metadata.smartContractAddress || null) as number],
-      };
-    }
-
     if (recurringDates.length) {
       // Identify set of bookings to one intance of recurring event to support batch changes
       const recurringEventId = uuidv4();
       const recurringBookings = recurringDates.map((recurringDate) => ({
         ...booking,
-        web3Details,
         start: dayjs(recurringDate).format(),
         end: dayjs(recurringDate).add(eventType.length, "minute").format(),
         eventTypeId: eventType.id,
@@ -403,9 +346,10 @@ const BookingPage = ({
         language: i18n.language,
         rescheduleUid,
         user: router.query.user,
-        location: getLocationValue(
-          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
-        ),
+        location: getEventLocationValue(locations, {
+          type: booking.locationType ? booking.locationType : selectedLocationType || "",
+          phone: booking.phone,
+        }),
         metadata,
         customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
           label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
@@ -414,13 +358,13 @@ const BookingPage = ({
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
-          selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+        ethSignature: gateState.rainbowToken,
       }));
       recurringMutation.mutate(recurringBookings);
     } else {
       mutation.mutate({
         ...booking,
-        web3Details,
         start: dayjs(date).format(),
         end: dayjs(date).add(eventType.length, "minute").format(),
         eventTypeId: eventType.id,
@@ -430,9 +374,10 @@ const BookingPage = ({
         rescheduleUid,
         bookingUid: router.query.bookingUid as string,
         user: router.query.user,
-        location: getLocationValue(
-          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
-        ),
+        location: getEventLocationValue(locations, {
+          type: (booking.locationType ? booking.locationType : selectedLocationType) || "",
+          phone: booking.phone,
+        }),
         metadata,
         customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
           label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
@@ -441,16 +386,18 @@ const BookingPage = ({
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
-          selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+        ethSignature: gateState.rainbowToken,
       });
     }
   };
 
   // Should be disabled when rescheduleUid is present and data was found in defaultUserValues name/email fields.
   const disableInput = !!rescheduleUid && !!defaultUserValues.email && !!defaultUserValues.name;
+  const disableLocations = !!rescheduleUid;
   const disabledExceptForOwner = disableInput && !loggedInIsOwner;
   const inputClassName =
-    "focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 text-sm";
+    "dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500";
 
   let isSmsReminderNumberNeeded = false;
 
@@ -467,8 +414,16 @@ const BookingPage = ({
     });
   }
 
+  // Define conditional gates here
+  const gates = [
+    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
+    eventType.metadata && eventType.metadata.blockchainId && eventType.metadata.smartContractAddress
+      ? ("rainbow" as Gate)
+      : undefined,
+  ];
+
   return (
-    <div>
+    <Gates gates={gates} metadata={eventType.metadata} dispatch={gateDispatcher}>
       <Head>
         <title>
           {rescheduleUid
@@ -495,116 +450,121 @@ const BookingPage = ({
           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"
+            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
+            "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
-            <div className="px-6 pt-6 pb-0 sm:w-1/2 sm:border-r sm:pb-6 sm:dark:border-gray-700">
+            <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
               <UserAvatars
                 profile={profile}
                 users={eventType.users}
                 showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                size={14}
+                size={10}
+                truncateAfter={3}
               />
-              <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
+              <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
                 {profile.name}
               </h2>
-              <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
+              <h1 className="font-cal dark:text-darkgray-900 break-words text-2xl text-gray-900 ">
                 {eventType.title}
               </h1>
-              {!!eventType.seatsPerTimeSlot && (
-                <p
-                  className={`${
-                    booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
-                      ? "text-rose-600"
-                      : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                      ? "text-yellow-500"
-                      : "text-emerald-400"
-                  } mb-2`}>
-                  {booking
-                    ? eventType.seatsPerTimeSlot - booking.attendees.length
-                    : eventType.seatsPerTimeSlot}{" "}
-                  / {eventType.seatsPerTimeSlot} {t("seats_available")}
-                </p>
-              )}
-              {eventType?.description && (
-                <p className="text-bookinglight mb-2 text-sm dark:text-white">
-                  <Icon.FiInfo 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 text-sm dark:text-white">
-                  <Icon.FiClipboard 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 text-sm dark:text-white">
-                <Icon.FiClock 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 text-sm dark:text-white">
-                  <Icon.FiCreditCard 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-sm text-gray-600 dark:text-white">
-                  <Icon.FiRefreshCw 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 items-center text-sm">
-                <Icon.FiCalendar className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                <div>
-                  {(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-sm text-gray-600 dark:text-white">
-                          {t("plus_more", { count: recurringStrings.length - 5 })}
-                        </p>
-                      </Tooltip>
+              <div className="mt-4 flex flex-col space-y-3 lg:mt-9">
+                {eventType?.description && (
+                  <div className="dark:text-darkgray-600 flex text-sm font-medium text-gray-600">
+                    <div>
+                      <Icon.FiInfo className="dark:text-darkgray-600 mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                     </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}
+                    <EventTypeDescriptionSafeHTML eventType={eventType} />
+                  </div>
+                )}
+                {eventType?.requiresConfirmation && (
+                  <div className="dark:text-darkgray-600 flex items-center text-sm font-medium text-gray-600">
+                    <div>
+                      <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+                    </div>
+                    {t("requires_confirmation")}
+                  </div>
+                )}
+                <p className="dark:text-darkgray-600 text-sm font-medium text-gray-600">
+                  <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+                  {eventType.length} {t("minutes")}
                 </p>
-              )}
-              {booking?.startTime && rescheduleUid && (
-                <div>
-                  <p className="mt-8 mb-2 text-sm 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">
-                    <Icon.FiCalendar 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)}
+                {eventType.price > 0 && (
+                  <p className="text-bookinglight -ml-2 px-2 text-sm ">
+                    <Icon.FiCreditCard 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="items-start text-sm font-medium text-gray-600 dark:text-white">
+                    <Icon.FiRefreshCw className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                    <p className="-ml-2 inline-block items-center px-2">
+                      {getEveryFreqFor({
+                        t,
+                        recurringEvent: eventType.recurringEvent,
+                        recurringCount: recurringEventCount,
+                      })}
+                    </p>
+                  </div>
+                )}
+                <div className="text-bookinghighlight flex items-start text-sm">
+                  <Icon.FiCalendar className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
+                  <div className="text-sm font-medium">
+                    {(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="dark:text-darkgray-600 text-sm">
+                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              )}
+                {booking?.startTime && rescheduleUid && (
+                  <div>
+                    <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
+                      {t("former_time")}
+                    </p>
+                    <p className="line-through ">
+                      <Icon.FiCalendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                    </p>
+                  </div>
+                )}
+                {!!eventType.seatsPerTimeSlot && (
+                  <div className="text-bookinghighlight flex items-start text-sm">
+                    <Icon.FiUser className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
+                    <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-bookinghighlight"
+                      } mb-2 font-medium`}>
+                      {booking
+                        ? eventType.seatsPerTimeSlot - booking.attendees.length
+                        : eventType.seatsPerTimeSlot}{" "}
+                      / {eventType.seatsPerTimeSlot} {t("seats_available")}
+                    </p>
+                  </div>
+                )}
+              </div>
             </div>
             <div className="p-6 sm:w-1/2">
               <Form form={bookingForm} handleSubmit={bookEvent}>
@@ -656,23 +616,34 @@ const BookingPage = ({
                     <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>
-                    ))}
+                    {locations.map((location, i) => {
+                      const locationString = locationKeyToString(location);
+                      // TODO: Right now selectedLocationType isn't send by getSSP. Once that's available defaultChecked should work and show the location in the original booking
+                      const defaultChecked = rescheduleUid ? selectedLocationType === location.type : i === 0;
+                      if (typeof locationString !== "string") {
+                        // It's possible that location app got uninstalled
+                        return null;
+                      }
+                      return (
+                        <label key={i} className="block">
+                          <input
+                            type="radio"
+                            disabled={!!disableLocations}
+                            className="location dark:bg-darkgray-300 dark:border-darkgray-300 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={defaultChecked}
+                          />
+                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
+                            {locationKeyToString(location)}
+                          </span>
+                        </label>
+                      );
+                    })}
                   </div>
                 )}
-                {selectedLocation === LocationType.Phone && (
+                {/* TODO: Change name and id ="phone" to something generic */}
+                {AttendeeInput && (
                   <div className="mb-4">
                     <label
                       htmlFor="phone"
@@ -680,10 +651,10 @@ const BookingPage = ({
                       {t("phone_number")}
                     </label>
                     <div className="mt-1">
-                      <PhoneInput<BookingFormValues>
+                      <AttendeeInput<BookingFormValues>
                         control={bookingForm.control}
                         name="phone"
-                        placeholder={t("enter_phone_number")}
+                        placeholder={t(selectedLocation?.attendeeInputPlaceholder || "")}
                         id="phone"
                         required
                         disabled={disableInput}
@@ -713,6 +684,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           rows={3}
                           className={inputClassName}
@@ -726,6 +698,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder={input.placeholder}
@@ -738,6 +711,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder=""
@@ -751,6 +725,7 @@ const BookingPage = ({
                             {...bookingForm.register(`customInputs.${input.id}`, {
                               required: input.required,
                             })}
+                            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=""
@@ -830,7 +805,7 @@ const BookingPage = ({
                     )}
                   </div>
                 )}
-                {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
+                {isSmsReminderNumberNeeded && selectedLocationType !== LocationType.Phone && (
                   <div className="mb-4">
                     <label
                       htmlFor="smsReminderNumber"
@@ -844,7 +819,6 @@ const BookingPage = ({
                         placeholder={t("enter_phone_number")}
                         id="smsReminderNumber"
                         required
-                        disabled={disableInput}
                       />
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
@@ -883,16 +857,22 @@ const BookingPage = ({
                   )}
                 </div>
 
-                <div className="flex items-start space-x-2 rtl:space-x-reverse">
+                <div className="flex justify-end space-x-2 rtl:space-x-reverse">
+                  <Button
+                    color="secondary"
+                    type="button"
+                    onClick={() => router.back()}
+                    // We override this for this component only for now - as we don't support darkmode everywhere in the app
+                    className="dark:border-none">
+                    {t("cancel")}
+                  </Button>
                   <Button
                     type="submit"
+                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast rounded-md"
                     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) && (
@@ -902,7 +882,7 @@ const BookingPage = ({
           </div>
         </div>
       </main>
-    </div>
+    </Gates>
   );
 };
 

apps/web/components/dialog/EditLocationDialog.tsx

@@ -1,11 +1,18 @@
+import { ErrorMessage } from "@hookform/error-message";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
-import { LocationOptionsToString } from "@calcom/app-store/locations";
-import { LocationType } from "@calcom/core/location";
+import {
+  LocationType,
+  getEventLocationType,
+  EventLocationType,
+  LocationObject,
+} from "@calcom/app-store/locations";
+import { getMessageForOrganizer } from "@calcom/app-store/locations";
+import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
@@ -15,7 +22,6 @@ import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { Form } from "@calcom/ui/form/fields";
 
 import { QueryCell } from "@lib/QueryCell";
-import { linkValueToString } from "@lib/linkValueToString";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
 import Select from "@components/ui/form/Select";
@@ -24,33 +30,46 @@ type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
 type OptionTypeBase = {
   label: string;
-  value: LocationType;
+  value: EventLocationType["type"];
   disabled?: boolean;
 };
 
-type LocationFormValues = {
-  locationType: LocationType;
-  locationAddress?: string;
-  locationLink?: string;
-  locationPhoneNumber?: string;
-  displayLocationPublicly?: boolean;
-};
 interface ISetLocationDialog {
-  saveLocation: (newLocationType: LocationType, details: { [key: string]: string }) => void;
+  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: OptionTypeBase;
   booking?: BookingItem;
-  defaultValues?: {
-    type: LocationType;
-    address?: string | undefined;
-    link?: string | undefined;
-    hostPhoneNumber?: string | undefined;
-    displayLocationPublicly?: boolean | undefined;
-  }[];
+  defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
   setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
 }
 
+const LocationInput = (props: {
+  eventLocationType: EventLocationType;
+  locationFormMethods: ReturnType<typeof useForm>;
+  id: string;
+  required: boolean;
+  placeholder: string;
+  className?: string;
+  defaultValue?: string;
+}): JSX.Element | null => {
+  const { eventLocationType, locationFormMethods, ...remainingProps } = props;
+  if (eventLocationType?.organizerInputType === "text") {
+    return (
+      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
+    );
+  } else if (eventLocationType?.organizerInputType === "phone") {
+    return (
+      <PhoneInput
+        name={eventLocationType.variable}
+        control={locationFormMethods.control}
+        {...remainingProps}
+      />
+    );
+  }
+  return null;
+};
+
 export const EditLocationDialog = (props: ISetLocationDialog) => {
   const {
     saveLocation,
@@ -73,37 +92,52 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   const locationFormSchema = z.object({
     locationType: z.string(),
+    phone: z.string().optional().nullable(),
     locationAddress: z.string().optional(),
-    locationLink:
-      selection?.value === LocationType.Whereby
-        ? z
-            .string()
-            .regex(/^http(s)?:\/\/(www\.)?whereby.com\/[a-zA-Z0-9]*/)
-            .optional()
-        : selection?.value === LocationType.Around
-        ? z
-            .string()
-            .regex(/^http(s)?:\/\/(www\.)?around.co\/[a-zA-Z0-9]*/)
-            .optional()
-        : selection?.value === LocationType.Ping
-        ? z
-            .string()
-            .regex(/^http(s)?:\/\/(www\.)?ping.gg\/call\/[a-zA-Z0-9]*/)
-            .optional()
-        : selection?.value === LocationType.Riverside
-        ? z
-            .string()
-            .regex(/^http(s)?:\/\/(www\.)?riverside.fm\/studio\/[a-zA-Z0-9]*/)
-            .optional()
-        : z.string().url().optional(),
+    locationLink: z
+      .string()
+      .optional()
+      .superRefine((val, ctx) => {
+        if (
+          eventLocationType &&
+          !eventLocationType.default &&
+          eventLocationType.linkType === "static" &&
+          eventLocationType.urlRegExp
+        ) {
+          const valid = z.string().regex(new RegExp(eventLocationType.urlRegExp)).safeParse(val).success;
+          if (!valid) {
+            const sampleUrl = eventLocationType.organizerInputPlaceholder;
+            ctx.addIssue({
+              code: z.ZodIssueCode.custom,
+              message: `Invalid URL for ${eventLocationType.label}. ${
+                sampleUrl ? "Sample URL: " + sampleUrl : ""
+              }`,
+            });
+          }
+          return;
+        }
+
+        const valid = z.string().url().optional().safeParse(val).success;
+        if (!valid) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Invalid URL`,
+          });
+        }
+        return;
+      }),
     displayLocationPublicly: z.boolean().optional(),
     locationPhoneNumber: z
       .string()
-      .refine((val) => isValidPhoneNumber(val))
+      .nullable()
+      .refine((val) => {
+        if (val === null) return false;
+        return isValidPhoneNumber(val);
+      })
       .optional(),
   });
 
-  const locationFormMethods = useForm<LocationFormValues>({
+  const locationFormMethods = useForm({
     mode: "onSubmit",
     resolver: zodResolver(locationFormSchema),
   });
@@ -113,28 +147,43 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     name: "locationType",
   });
 
-  const LocationOptions =
-    selectedLocation === LocationType.InPerson ? (
-      <>
+  const eventLocationType = getEventLocationType(selectedLocation);
+
+  const defaultLocation = defaultValues?.find(
+    (location: { type: EventLocationType["type"] }) => location.type === eventLocationType?.type
+  );
+
+  const LocationOptions = (() => {
+    if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
+      if (!eventLocationType.variable) {
+        console.error("eventLocationType.variable can't be undefined");
+        return null;
+      }
+
+      return (
         <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_address_place")}
+          <label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
+            {t(eventLocationType.messageForOrganizer || "")}
           </label>
           <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationAddress")}
-              id="address"
+            <LocationInput
+              locationFormMethods={locationFormMethods}
+              eventLocationType={eventLocationType}
+              id="locationInput"
+              placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
               className="block w-full rounded-sm border-gray-300 text-sm"
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.InPerson
-                    )?.address
-                  : undefined
+                defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
               }
             />
+            <ErrorMessage
+              errors={locationFormMethods.formState.errors}
+              name={eventLocationType.variable}
+              className="mt-1 text-sm text-red-500"
+              as="p"
+            />
           </div>
           {!booking && (
             <div className="mt-3">
@@ -143,12 +192,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 control={locationFormMethods.control}
                 render={() => (
                   <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.InPerson)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
+                    defaultChecked={defaultLocation?.displayLocationPublicly}
                     description={t("display_location_label")}
                     onChange={(e) =>
                       locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
@@ -160,286 +204,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             </div>
           )}
         </div>
-      </>
-    ) : selectedLocation === LocationType.Link ? (
-      <div>
-        <label htmlFor="link" className="block text-sm font-medium text-gray-700">
-          {t("set_link_meeting")}
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            {...locationFormMethods.register("locationLink")}
-            required
-            id="link"
-            className="block w-full rounded-sm border-gray-300 text-sm"
-            defaultValue={
-              defaultValues
-                ? defaultValues.find(
-                    (location: { type: LocationType }) => location.type === LocationType.Link
-                  )?.link
-                : undefined
-            }
-          />
-          {locationFormMethods.formState.errors.locationLink && (
-            <p className="mt-1 text-sm text-red-500">{t("url_start_with_https")}</p>
-          )}
-        </div>
-        {!booking && (
-          <div className="mt-3">
-            <Controller
-              name="displayLocationPublicly"
-              control={locationFormMethods.control}
-              render={() => (
-                <CheckboxField
-                  description={t("display_location_label")}
-                  defaultChecked={
-                    defaultValues
-                      ? defaultValues.find((location) => location.type === LocationType.Link)
-                          ?.displayLocationPublicly
-                      : undefined
-                  }
-                  onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)}
-                  informationIconText={t("display_location_info_badge")}
-                />
-              )}
-            />
-          </div>
-        )}
-      </div>
-    ) : selectedLocation === LocationType.UserPhone ? (
-      <div>
-        <label htmlFor="phonenumber" className="block text-sm font-medium text-gray-700">
-          {t("set_your_phone_number")}
-          {locationFormMethods.formState?.errors?.locationPhoneNumber?.message}
-        </label>
-        <div className="mt-1">
-          <PhoneInput<LocationFormValues>
-            control={locationFormMethods.control}
-            name="locationPhoneNumber"
-            required
-            id="locationPhoneNumber"
-            placeholder={t("host_phone_number")}
-            defaultValue={
-              defaultValues
-                ? defaultValues.find(
-                    (location: { type: LocationType }) => location.type === LocationType.UserPhone
-                  )?.hostPhoneNumber
-                : undefined
-            }
-          />
-          {locationFormMethods.formState.errors.locationPhoneNumber && (
-            <p className="mt-1 text-sm text-red-500">{t("invalid_number")}</p>
-          )}
-        </div>
-      </div>
-    ) : selectedLocation === LocationType.Whereby ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_whereby_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="wherebylink"
-              placeholder="https://www.whereby.com/cal"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Whereby
-                    )?.address
-                  : undefined
-              }
-            />
-            {locationFormMethods.formState.errors.locationLink && (
-              <p className="mt-1 text-sm text-red-500">{t("invalid_whereby_link")}</p>
-            )}
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Whereby)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : selectedLocation === LocationType.Around ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_around_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="aroundlink"
-              placeholder="https://www.around.co/rick"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Around
-                    )?.address
-                  : undefined
-              }
-            />
-            {locationFormMethods.formState.errors.locationLink && (
-              <p className="mt-1 text-sm text-red-500">{t("invalid_around_link")}</p>
-            )}
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Around)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : selectedLocation === LocationType.Ping ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_ping_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="pinglink"
-              placeholder="https://www.ping.gg/call/theo"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Ping
-                    )?.address
-                  : undefined
-              }
-            />
-            {locationFormMethods.formState.errors.locationLink && (
-              <p className="mt-1 text-sm text-red-500">{t("invalid_ping_link")}</p>
-            )}
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Ping)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : selectedLocation === LocationType.Riverside ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_riverside_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="aroundlink"
-              placeholder="https://www.riverside.fm/studio/rick"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Riverside
-                    )?.address
-                  : undefined
-              }
-            />
-            {locationFormMethods.formState.errors.locationLink && (
-              <p className="mt-1 text-sm text-red-500">{t("invalid_riverside_link")}</p>
-            )}
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Riverside)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : (
-      <p className="text-sm">{LocationOptionsToString(selectedLocation, t)}</p>
-    );
+      );
+    } else {
+      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
+    }
+  })();
 
   return (
     <Dialog open={isOpenDialog}>
@@ -462,7 +231,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
           {booking && (
             <>
               <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-              <p className="mb-2 ml-1 text-sm text-black">{linkValueToString(booking.location, t)}</p>
+              <p className="mb-2 ml-1 text-sm text-black">
+                {getHumanReadableLocationValue(booking.location, t)}
+              </p>
             </>
           )}
           <Form
@@ -474,23 +245,29 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               if (newLocation === LocationType.InPerson) {
                 details = {
                   address: values.locationAddress,
-                  displayLocationPublicly,
                 };
               }
+              const eventLocationType = getEventLocationType(newLocation);
+
+              // TODO: There can be a property that tells if it is to be saved in `link`
               if (
                 newLocation === LocationType.Link ||
-                newLocation === LocationType.Whereby ||
-                newLocation === LocationType.Around ||
-                newLocation === LocationType.Riverside ||
-                newLocation === LocationType.Ping
+                (!eventLocationType?.default && eventLocationType?.linkType === "static")
               ) {
-                details = { link: values.locationLink, displayLocationPublicly };
+                details = { link: values.locationLink };
               }
 
               if (newLocation === LocationType.UserPhone) {
                 details = { hostPhoneNumber: values.locationPhoneNumber };
               }
 
+              if (eventLocationType?.organizerInputType) {
+                details = {
+                  ...details,
+                  displayLocationPublicly,
+                };
+              }
+
               saveLocation(newLocation, details);
               setShowLocationModal(false);
               setSelectedLocation?.(undefined);

apps/web/components/dialog/RescheduleDialog.tsx

@@ -5,10 +5,10 @@ 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 { Icon } from "@calcom/ui/Icon";
 import { TextArea } from "@calcom/ui/form/fields";
+import Button from "@calcom/ui/v2/core/Button";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
 

apps/web/components/eventtype/CreateEventType.tsx

@@ -7,7 +7,6 @@ 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";
@@ -49,9 +48,8 @@ interface CreateEventTypeBtnProps {
 }
 
 export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
-  const { t } = useLocale();
+  const { t, isLocaleReady } = useLocale();
   const router = useRouter();
-
   // URL encoded params
   const teamId: number | undefined =
     typeof router.query.teamId === "string" && router.query.teamId
@@ -139,7 +137,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
       { shallow: true }
     );
   };
-
+  if (!isLocaleReady) {
+    return null;
+  }
   return (
     <Dialog
       name="new-eventtype"

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -30,7 +30,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
 
   return (
     <>
-      <div className={classNames("text-neutral-500 dark:text-white", className)}>
+      <div className={classNames("text-gray-600 dark:text-white", className)}>
         {eventType.description && (
           <h2 className="max-w-[280px] overflow-hidden text-ellipsis opacity-60 sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}

apps/web/components/eventtype/RecurringEventController.tsx

@@ -16,6 +16,10 @@ type RecurringEventControllerProps = {
   onRecurringEventDefined: (value: boolean) => void;
 };
 
+/**
+ * @deprecated
+ * use component from `/apps/web/components/v2/eventtype/RecurringEventController` instead
+ **/
 export default function RecurringEventController({
   recurringEvent,
   formMethods,
@@ -43,8 +47,8 @@ export default function RecurringEventController({
           <Alert severity="warning" title={t("warning_payment_recurring_event")} />
         ) : (
           <>
-            <div className="relative flex items-start">
-              <div className="flex h-5 items-center">
+            <div className="flex items-start">
+              <div className="flex h-5 items-start">
                 <input
                   onChange={(event) => {
                     onRecurringEventDefined(event?.target.checked);

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
 
@@ -9,11 +7,11 @@ function SkeletonLoader() {
       <div className="mb-4 flex items-center">
         <SkeletonAvatar width="8" height="8" />
         <div className="space-y-1">
-          <SkeletonText height="4" width="16" />
-          <SkeletonText height="4" width="24" />
+          <SkeletonText className="h-4 w-16" />
+          <SkeletonText className="h-4 w-24" />
         </div>
       </div>
-      <ul className="divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <ul className="divide-y divide-neutral-200 rounded-md border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
         <SkeletonItem />
         <SkeletonItem />
         <SkeletonItem />
@@ -44,19 +42,6 @@ function SkeletonItem() {
           </ul>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
-        <div className="flex justify-between rtl:space-x-reverse">
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiExternalLink className="h-5 w-5" />
-          </div>
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiLink className="h-5 w-5" />
-          </div>
-          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-            <Icon.FiMoreHorizontal className="h-5 w-5" />
-          </div>
-        </div>
-      </div>
     </li>
   );
 }

apps/web/components/getting-started/components/CalendarItem.tsx

@@ -0,0 +1,42 @@
+import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { App } from "@calcom/types/App";
+import Button from "@calcom/ui/v2/core/Button";
+
+interface ICalendarItem {
+  title: string;
+  description?: string;
+  imageSrc: string;
+  type: App["type"];
+}
+
+const CalendarItem = (props: ICalendarItem) => {
+  const { title, imageSrc, type } = props;
+  const { t } = useLocale();
+  return (
+    <div className="flex flex-row items-center p-5">
+      <img src={imageSrc} alt={title} className="h-8 w-8" />
+      <p className="mx-3 text-sm font-bold">{title}</p>
+
+      <InstallAppButtonWithoutPlanCheck
+        type={type}
+        render={(buttonProps) => (
+          <Button
+            {...buttonProps}
+            color="secondary"
+            type="button"
+            onClick={(event) => {
+              // Save cookie key to return url step
+              document.cookie = `return-to=${window.location.href};path=/;max-age=3600`;
+              buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
+            }}
+            className="ml-auto rounded-md border border-gray-200 py-[10px] px-4 text-sm font-bold">
+            {t("connect")}
+          </Button>
+        )}
+      />
+    </div>
+  );
+};
+
+export { CalendarItem };

apps/web/components/getting-started/components/CalendarSwitch.tsx

@@ -0,0 +1,86 @@
+import { useMutation } from "react-query";
+
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
+import { Switch } from "@calcom/ui/v2";
+
+import classNames from "@lib/classNames";
+
+interface ICalendarSwitchProps {
+  title: string;
+  externalId: string;
+  type: string;
+  isChecked: boolean;
+  name: string;
+  isLastItemInList?: boolean;
+}
+const CalendarSwitch = (props: ICalendarSwitchProps) => {
+  const { title, externalId, type, isChecked, name, isLastItemInList = false } = props;
+  const utils = trpc.useContext();
+  const mutation = useMutation<
+    unknown,
+    unknown,
+    {
+      isOn: boolean;
+    }
+  >(
+    async ({ isOn }: { isOn: boolean }) => {
+      const body = {
+        integration: type,
+        externalId: externalId,
+      };
+
+      if (isOn) {
+        const res = await fetch("/api/availability/calendar", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+          throw new Error("Something went wrong");
+        }
+      } else {
+        const res = await fetch("/api/availability/calendar", {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(body),
+        });
+
+        if (!res.ok) {
+          throw new Error("Something went wrong");
+        }
+      }
+    },
+    {
+      async onSettled() {
+        await utils.invalidateQueries(["viewer.integrations"]);
+      },
+      onError() {
+        showToast(`Something went wrong when toggling "${title}""`, "error");
+      },
+    }
+  );
+  return (
+    <div className={classNames("flex flex-row items-center", !isLastItemInList ? "mb-4" : "")}>
+      <div className="flex pl-2">
+        <Switch
+          id={externalId}
+          defaultChecked={isChecked}
+          onCheckedChange={(isOn: boolean) => {
+            mutation.mutate({ isOn });
+          }}
+        />
+      </div>
+      <label className="ml-3 text-sm font-medium leading-5" htmlFor={externalId}>
+        {name}
+      </label>
+    </div>
+  );
+};
+
+export { CalendarSwitch };

apps/web/components/getting-started/components/ConnectedCalendarItem.tsx

@@ -0,0 +1,75 @@
+import { DotsHorizontalIcon } from "@heroicons/react/solid";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/v2";
+
+import { CalendarSwitch } from "./CalendarSwitch";
+
+interface IConnectedCalendarItem {
+  name: string;
+  logo: string;
+  externalId?: string;
+  integrationType: string;
+  calendars?: {
+    primary: true | null;
+    isSelected: boolean;
+    credentialId: number;
+    name?: string | undefined;
+    readOnly?: boolean | undefined;
+    userId?: number | undefined;
+    integration?: string | undefined;
+    externalId: string;
+  }[];
+}
+
+const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
+  const { name, logo, externalId, calendars, integrationType } = prop;
+  const { t } = useLocale();
+  return (
+    <>
+      <div className="flex flex-row items-center p-4">
+        <img src={logo} alt={name} className="m-1 h-8 w-8" />
+        <div className="mx-4">
+          <p className="font-sans text-sm font-bold leading-5">
+            {name}{" "}
+            <span className="mx-1 rounded-[4px] bg-green-100 py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+              {t("default")}
+            </span>
+          </p>
+          <div className="fle-row flex">
+            <span
+              title={externalId}
+              className="max-w-44 mt-1 overflow-hidden text-ellipsis whitespace-nowrap font-sans text-sm text-gray-500">
+              {externalId}{" "}
+            </span>
+          </div>
+        </div>
+
+        <Button
+          color="minimal"
+          type="button"
+          className="ml-auto flex rounded-md border border-gray-200 py-[10x] px-4 font-sans text-sm">
+          {t("edit")}
+        </Button>
+      </div>
+      <div className="h-[1px] w-full border-b border-gray-200" />
+      <div>
+        <ul className="p-4">
+          {calendars?.map((calendar, i) => (
+            <CalendarSwitch
+              key={calendar.externalId}
+              externalId={calendar.externalId}
+              title={calendar.name || "Nameless Calendar"}
+              name={calendar.name || "Nameless Calendar"}
+              type={integrationType}
+              isChecked={calendar.isSelected}
+              isLastItemInList={i === calendars.length - 1}
+            />
+          ))}
+        </ul>
+      </div>
+    </>
+  );
+};
+
+export { ConnectedCalendarItem };

apps/web/components/getting-started/components/CreateEventsOnCalendarSelect.tsx

@@ -0,0 +1,37 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { inferMutationInput, trpc } from "@calcom/trpc/react";
+
+import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
+
+interface ICreateEventsOnCalendarSelectProps {
+  calendar?: inferMutationInput<"viewer.setDestinationCalendar"> | null;
+}
+
+const CreateEventsOnCalendarSelect = (props: ICreateEventsOnCalendarSelectProps) => {
+  const { calendar } = props;
+  const { t } = useLocale();
+  const mutation = trpc.useMutation(["viewer.setDestinationCalendar"]);
+
+  return (
+    <>
+      <div className="mt-6 flex flex-row">
+        <div className="w-full">
+          <label htmlFor="createEventsOn" className="flex text-sm font-medium text-neutral-700">
+            {t("create_events_on")}
+          </label>
+          <div className="mt-2">
+            <DestinationCalendarSelector
+              value={calendar ? calendar.externalId : undefined}
+              onChange={(calendar) => {
+                mutation.mutate(calendar);
+              }}
+              hidePlaceholder
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export { CreateEventsOnCalendarSelect };

apps/web/components/getting-started/components/StepCard.tsx

@@ -0,0 +1,9 @@
+const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
+  return (
+    <div className="mt-10 rounded-md border border-gray-200 bg-white p-4 dark:bg-black sm:p-8">
+      {props.children}
+    </div>
+  );
+};
+
+export { StepCard };

apps/web/components/getting-started/components/Steps.tsx

@@ -0,0 +1,37 @@
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+interface ISteps {
+  maxSteps: number;
+  currentStep: number;
+  navigateToStep: (step: number) => void;
+}
+
+const Steps = (props: ISteps) => {
+  const { maxSteps, currentStep, navigateToStep } = props;
+  const { t } = useLocale();
+  return (
+    <div className="mt-6 space-y-2">
+      <p className="text-xs font-medium text-gray-500 dark:text-white">
+        {t("current_step_of_total", { currentStep: currentStep + 1, maxSteps })}
+      </p>
+      <div className="flex w-full space-x-2 rtl:space-x-reverse">
+        {new Array(maxSteps).fill(0).map((_s, index) => {
+          return index <= currentStep ? (
+            <div
+              key={`step-${index}`}
+              onClick={() => navigateToStep(index)}
+              className={classNames(
+                "h-1 w-1/4 rounded-[1px] bg-black dark:bg-white",
+                index < currentStep ? "cursor-pointer" : ""
+              )}
+            />
+          ) : (
+            <div key={`step-${index}`} className="h-1 w-1/4 rounded-[1px] bg-black bg-opacity-25" />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+export { Steps };

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -0,0 +1,107 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { List } from "@calcom/ui/List";
+import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2";
+
+import { CalendarItem } from "../components/CalendarItem";
+import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
+import { CreateEventsOnCalendarSelect } from "../components/CreateEventsOnCalendarSelect";
+
+interface IConnectCalendarsProps {
+  nextStep: () => void;
+}
+
+const ConnectedCalendars = (props: IConnectCalendarsProps) => {
+  const { nextStep } = props;
+  const queryConnectedCalendars = trpc.useQuery(["viewer.connectedCalendars"]);
+  const { t } = useLocale();
+  const queryIntegrations = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: false },
+  ]);
+
+  const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(
+    (item) => item.calendars && item.calendars?.length > 0
+  );
+  const disabledNextButton = firstCalendar === undefined;
+  const destinationCalendar = queryConnectedCalendars.data?.destinationCalendar;
+  return (
+    <>
+      {/* Already connected calendars  */}
+      {firstCalendar &&
+        firstCalendar.integration &&
+        firstCalendar.integration.title &&
+        firstCalendar.integration.imageSrc && (
+          <>
+            <List className="rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+              <ConnectedCalendarItem
+                key={firstCalendar.integration.title}
+                name={firstCalendar.integration.title}
+                logo={firstCalendar.integration.imageSrc}
+                externalId={
+                  firstCalendar && firstCalendar.calendars && firstCalendar.calendars.length > 0
+                    ? firstCalendar.calendars[0].externalId
+                    : ""
+                }
+                calendars={firstCalendar.calendars}
+                integrationType={firstCalendar.integration.type}
+              />
+            </List>
+            {/* Create event on selected calendar */}
+            <CreateEventsOnCalendarSelect calendar={destinationCalendar} />
+            <p className="mt-7 text-sm text-gray-500">{t("connect_calendars_from_app_store")}</p>
+          </>
+        )}
+
+      {/* Connect calendars list */}
+      {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && (
+        <List className="mx-1 divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black sm:mx-0">
+          {queryIntegrations.data &&
+            queryIntegrations.data.items.map((item) => (
+              <li key={item.title}>
+                {item.title && item.imageSrc && (
+                  <CalendarItem
+                    type={item.type}
+                    title={item.title}
+                    description={item.description}
+                    imageSrc={item.imageSrc}
+                  />
+                )}
+              </li>
+            ))}
+        </List>
+      )}
+
+      {queryConnectedCalendars.isLoading && (
+        <ul className="divide-y divide-gray-200 rounded-md border border-gray-200 bg-white p-0 dark:bg-black">
+          {[0, 0, 0, 0].map((_item, index) => {
+            return (
+              <li className="flex w-full flex-row justify-center border-b-0 py-6" key={index}>
+                <SkeletonAvatar className="mx-6 h-8 w-8 px-4" />
+                <SkeletonText className="ml-1 mr-4 mt-3 h-5 w-full" />
+                <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      <button
+        type="button"
+        data-testid="save-calendar-button"
+        className={classNames(
+          "mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white",
+          disabledNextButton ? "cursor-not-allowed opacity-20" : ""
+        )}
+        onClick={() => nextStep()}
+        disabled={disabledNextButton}>
+        {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </button>
+    </>
+  );
+};
+
+export { ConnectedCalendars };

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -0,0 +1,93 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+import { Schedule } from "@calcom/features/schedules";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc, TRPCClientErrorLike } from "@calcom/trpc/react";
+import { AppRouter } from "@calcom/trpc/server/routers/_app";
+import { Form } from "@calcom/ui/form/fields";
+import { Button } from "@calcom/ui/v2";
+
+import { DEFAULT_SCHEDULE } from "@lib/availability";
+import type { Schedule as ScheduleType } from "@lib/types/schedule";
+
+interface ISetupAvailabilityProps {
+  nextStep: () => void;
+  defaultScheduleId?: number | null;
+  defaultAvailability?: { schedule?: TimeRanges[][] };
+}
+
+interface ScheduleFormValues {
+  schedule: ScheduleType;
+}
+
+const SetupAvailability = (props: ISetupAvailabilityProps) => {
+  const { defaultScheduleId } = props;
+
+  const { t } = useLocale();
+  const { nextStep } = props;
+
+  const router = useRouter();
+  let queryAvailability;
+  if (defaultScheduleId) {
+    queryAvailability = trpc.useQuery(["viewer.availability.schedule", { scheduleId: defaultScheduleId }], {
+      enabled: router.isReady,
+    });
+  }
+
+  const availabilityForm = useForm({
+    defaultValues: { schedule: queryAvailability?.data?.availability || DEFAULT_SCHEDULE },
+  });
+
+  const mutationOptions = {
+    onError: (error: TRPCClientErrorLike<AppRouter>) => {
+      throw new Error(error.message);
+    },
+    onSuccess: () => {
+      nextStep();
+    },
+  };
+  const createSchedule = trpc.useMutation("viewer.availability.schedule.create", mutationOptions);
+  const updateSchedule = trpc.useMutation("viewer.availability.schedule.update", mutationOptions);
+  return (
+    <Form<ScheduleFormValues>
+      className="w-full bg-white text-black dark:bg-opacity-5 dark:text-white"
+      form={availabilityForm}
+      handleSubmit={async (values) => {
+        try {
+          if (defaultScheduleId) {
+            await updateSchedule.mutate({
+              scheduleId: defaultScheduleId,
+              name: t("default_schedule_name"),
+              ...values,
+            });
+          } else {
+            await createSchedule.mutate({
+              name: t("default_schedule_name"),
+              ...values,
+            });
+          }
+        } catch (error) {
+          if (error instanceof Error) {
+            // setError(error);
+            // @TODO: log error
+          }
+        }
+      }}>
+      <Schedule />
+
+      <div>
+        <Button
+          data-testid="save-availability"
+          type="submit"
+          className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
+          disabled={availabilityForm.formState.isSubmitting}>
+          {t("next_step_text")} <ArrowRightIcon className="ml-2 h-4 w-4 self-center" />
+        </Button>
+      </div>
+    </Form>
+  );
+};
+
+export { SetupAvailability };

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -0,0 +1,170 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { FormEvent, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { User } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+import { Button, showToast, TextArea } from "@calcom/ui/v2";
+import ImageUploader from "@calcom/ui/v2/core/ImageUploader";
+
+import { AvatarSSR } from "@components/ui/AvatarSSR";
+
+interface IUserProfile {
+  user?: User;
+}
+
+type FormData = {
+  bio: string;
+};
+
+const UserProfile = (props: IUserProfile) => {
+  const { user } = props;
+  const { t } = useLocale();
+  const avatarRef = useRef<HTMLInputElement>(null!);
+  const bioRef = useRef<HTMLTextAreaElement>(null);
+  const {
+    register,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({ defaultValues: { bio: user?.bio || "" } });
+  const { data: eventTypes } = trpc.useQuery(["viewer.eventTypes.list"]);
+  const [imageSrc, setImageSrc] = useState<string>(user?.avatar || "");
+  const utils = trpc.useContext();
+  const router = useRouter();
+  const createEventType = trpc.useMutation("viewer.eventTypes.create");
+
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: async (_data, context) => {
+      if (context.avatar) {
+        showToast(t("your_user_profile_updated_successfully"), "success");
+        await utils.refetchQueries(["viewer.me"]);
+      } else {
+        try {
+          if (eventTypes?.length === 0) {
+            await Promise.all(
+              DEFAULT_EVENT_TYPES.map(async (event) => {
+                return createEventType.mutate(event);
+              })
+            );
+          }
+        } catch (error) {
+          console.error(error);
+        }
+
+        await utils.refetchQueries(["viewer.me"]);
+        router.push("/");
+      }
+    },
+    onError: () => {
+      showToast(t("problem_saving_user_profile"), "error");
+    },
+  });
+  const onSubmit = handleSubmit((data: { bio: string }) => {
+    const { bio } = data;
+
+    mutation.mutate({
+      bio,
+      completedOnboarding: true,
+    });
+  });
+
+  async function updateProfileHandler(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const enteredAvatar = avatarRef.current.value;
+    mutation.mutate({
+      avatar: enteredAvatar,
+    });
+  }
+
+  const DEFAULT_EVENT_TYPES = [
+    {
+      title: t("15min_meeting"),
+      slug: "15min",
+      length: 15,
+    },
+    {
+      title: t("30min_meeting"),
+      slug: "30min",
+      length: 30,
+    },
+    {
+      title: t("secret_meeting"),
+      slug: "secret",
+      length: 15,
+      hidden: true,
+    },
+  ];
+
+  return (
+    <form onSubmit={onSubmit}>
+      <p className="font-cal text-sm">{t("profile_picture")}</p>
+      <div className="mt-4 flex flex-row items-center justify-start rtl:justify-end">
+        {user && <AvatarSSR user={user} alt="Profile picture" className="h-16 w-16" />}
+        <input
+          ref={avatarRef}
+          type="hidden"
+          name="avatar"
+          id="avatar"
+          placeholder="URL"
+          className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
+          defaultValue={imageSrc}
+        />
+        <div className="flex items-center px-4">
+          <ImageUploader
+            target="avatar"
+            id="avatar-upload"
+            buttonMsg={t("upload")}
+            handleAvatarChange={(newAvatar) => {
+              avatarRef.current.value = newAvatar;
+              const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+                window.HTMLInputElement.prototype,
+                "value"
+              )?.set;
+              nativeInputValueSetter?.call(avatarRef.current, newAvatar);
+              const ev2 = new Event("input", { bubbles: true });
+              avatarRef.current.dispatchEvent(ev2);
+              updateProfileHandler(ev2 as unknown as FormEvent<HTMLFormElement>);
+              setImageSrc(newAvatar);
+            }}
+            imageSrc={imageSrc}
+          />
+        </div>
+      </div>
+      <fieldset className="mt-8">
+        <label htmlFor="bio" className="mb-2 block text-sm font-medium text-gray-700">
+          {t("about")}
+        </label>
+        <TextArea
+          {...register("bio", { required: true })}
+          ref={bioRef}
+          name="bio"
+          id="bio"
+          className="mt-1 block h-[60px] w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+          defaultValue={user?.bio || undefined}
+          onChange={(event) => {
+            setValue("bio", event.target.value);
+          }}
+        />
+        {errors.bio && (
+          <p data-testid="required" className="text-xs italic text-red-500">
+            {t("required")}
+          </p>
+        )}
+        <p className="mt-2 font-sans text-sm font-normal text-gray-600 dark:text-white">
+          {t("few_sentences_about_yourself")}
+        </p>
+      </fieldset>
+      <Button
+        type="submit"
+        className="mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm text-white">
+        {t("finish")}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </Button>
+    </form>
+  );
+};
+
+export default UserProfile;

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -0,0 +1,122 @@
+import { ArrowRightIcon } from "@heroicons/react/outline";
+import { useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { User } from "@calcom/prisma/client";
+import { trpc } from "@calcom/trpc/react";
+import TimezoneSelect from "@calcom/ui/form/TimezoneSelect";
+import { Button } from "@calcom/ui/v2";
+
+import { UsernameAvailability } from "@components/ui/UsernameAvailability";
+
+interface IUserSettingsProps {
+  user: User;
+  nextStep: () => void;
+}
+
+type FormData = {
+  name: string;
+};
+
+const UserSettings = (props: IUserSettingsProps) => {
+  const { user, nextStep } = props;
+  const { t } = useLocale();
+  const [selectedTimeZone, setSelectedTimeZone] = useState(user.timeZone ?? dayjs.tz.guess());
+  const { register, handleSubmit, formState } = useForm<FormData>({
+    defaultValues: {
+      name: user?.name || undefined,
+    },
+    reValidateMode: "onChange",
+  });
+  const { errors } = formState;
+  const defaultOptions = { required: true, maxLength: 255 };
+
+  const utils = trpc.useContext();
+  const onSuccess = async () => {
+    await utils.invalidateQueries(["viewer.me"]);
+    nextStep();
+  };
+  const mutation = trpc.useMutation("viewer.updateProfile", {
+    onSuccess: onSuccess,
+  });
+  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
+  const paymentRequired = stripeCustomer?.isPremium ? !stripeCustomer?.paidForPremium : false;
+  const onSubmit = handleSubmit((data) => {
+    if (paymentRequired) {
+      return;
+    }
+    mutation.mutate({
+      name: data.name,
+      timeZone: selectedTimeZone,
+    });
+  });
+  const [currentUsername, setCurrentUsername] = useState(user.username || undefined);
+  const [inputUsernameValue, setInputUsernameValue] = useState(currentUsername);
+  const usernameRef = useRef<HTMLInputElement>(null!);
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="space-y-6">
+        {/* Username textfield */}
+        <UsernameAvailability
+          readonly={true}
+          currentUsername={currentUsername}
+          setCurrentUsername={setCurrentUsername}
+          inputUsernameValue={inputUsernameValue}
+          usernameRef={usernameRef}
+          setInputUsernameValue={setInputUsernameValue}
+          user={user}
+        />
+
+        {/* Full name textfield */}
+        <div className="w-full">
+          <label htmlFor="name" className="mb-2 block text-sm font-medium text-gray-700">
+            {t("full_name")}
+          </label>
+          <input
+            {...register("name", defaultOptions)}
+            id="name"
+            name="name"
+            type="text"
+            autoComplete="off"
+            autoCorrect="off"
+            className="w-full rounded-md border border-gray-300 text-sm"
+          />
+          {errors.name && (
+            <p data-testid="required" className="text-xs italic text-red-500">
+              {t("required")}
+            </p>
+          )}
+        </div>
+        {/* Timezone select field */}
+        <div className="w-full">
+          <label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
+            {t("timezone")}
+          </label>
+
+          <TimezoneSelect
+            id="timeZone"
+            value={selectedTimeZone}
+            onChange={({ value }) => setSelectedTimeZone(value)}
+            className="mt-2 w-full rounded-md text-sm"
+          />
+
+          <p className="mt-3 flex flex-row font-sans text-xs leading-tight text-gray-500 dark:text-white">
+            {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
+          </p>
+        </div>
+      </div>
+      <Button
+        type="submit"
+        className="mt-8 flex w-full flex-row justify-center"
+        disabled={mutation.isLoading}>
+        {t("next_step_text")}
+        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+      </Button>
+    </form>
+  );
+};
+
+export { UserSettings };

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,17 +1,20 @@
 import React, { SyntheticEvent, useState } from "react";
 
+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
 
-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
-
 const ChangePasswordSection = () => {
   const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { t } = useLocale();
+  const { t, isLocaleReady } = useLocale();
+  // hold display until the locale is loaded
+  if (!isLocaleReady) {
+    return null;
+  }
 
   const errorMessages: { [key: string]: string } = {
     [ErrorCode.IncorrectPassword]: t("current_incorrect_password"),

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,10 +1,14 @@
-import { SyntheticEvent, useState } from "react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Form, Label } from "@calcom/ui/form/fields";
+import { PasswordField } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
@@ -16,15 +20,17 @@ interface DisableTwoFactorAuthModalProps {
   onDisable: () => void;
 }
 
+interface DisableTwoFactorValues {
+  totpCode: string;
+  password: string;
+}
+
 const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuthModalProps) => {
-  const [password, setPassword] = useState("");
   const [isDisabling, setIsDisabling] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const { t } = useLocale();
-
-  async function handleDisable(e: SyntheticEvent) {
-    e.preventDefault();
-
+  const form = useForm<DisableTwoFactorValues>();
+  async function handleDisable({ totpCode, password }: DisableTwoFactorValues) {
     if (isDisabling) {
       return;
     }
@@ -32,7 +38,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
     setErrorMessage(null);
 
     try {
-      const response = await TwoFactorAuthAPI.disable(password);
+      const response = await TwoFactorAuthAPI.disable(password, totpCode);
       if (response.status === 200) {
         onDisable();
         return;
@@ -41,6 +47,12 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
       const body = await response.json();
       if (body.error === ErrorCode.IncorrectPassword) {
         setErrorMessage(t("incorrect_password"));
+      }
+      if (body.error === ErrorCode.SecondFactorRequired) {
+        setErrorMessage(t("2fa_required"));
+      }
+      if (body.error === ErrorCode.IncorrectTwoFactorCode) {
+        setErrorMessage(t("incorrect_2fa"));
       } else {
         setErrorMessage(t("something_went_wrong"));
       }
@@ -55,41 +67,32 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
   return (
     <Dialog open={true}>
       <DialogContent>
-        <TwoFactorModalHeader title={t("disable_2fa")} description={t("disable_2fa_recommendation")} />
+        <Form form={form} handleSubmit={handleDisable}>
+          <TwoFactorModalHeader title={t("disable_2fa")} description={t("disable_2fa_recommendation")} />
 
-        <form onSubmit={handleDisable}>
           <div className="mb-4">
-            <label htmlFor="password" className="mt-4 block text-sm font-medium text-gray-700">
-              {t("password")}
-            </label>
-            <div className="mt-1">
-              <input
-                type="password"
-                name="password"
-                id="password"
-                required
-                value={password}
-                onInput={(e) => setPassword(e.currentTarget.value)}
-                className="block w-full rounded-sm border-gray-300 text-sm"
-              />
-            </div>
+            <PasswordField
+              labelProps={{
+                className: "block text-sm font-medium text-gray-700",
+              }}
+              {...form.register("password")}
+              className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
+            />
+            <Label className="mt-4"> {t("2fa_code")}</Label>
 
+            <TwoFactor center={false} />
             {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
           </div>
-        </form>
 
-        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <Button
-            type="submit"
-            className="ltr:ml-2 rtl:mr-2"
-            onClick={handleDisable}
-            disabled={password.length === 0 || isDisabling}>
-            {t("disable")}
-          </Button>
-          <Button color="secondary" onClick={onCancel}>
-            {t("cancel")}
-          </Button>
-        </div>
+          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isDisabling}>
+              {t("disable")}
+            </Button>
+            <Button color="secondary" onClick={onCancel}>
+              {t("cancel")}
+            </Button>
+          </div>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -1,10 +1,13 @@
-import React, { SyntheticEvent, useState } from "react";
+import React, { BaseSyntheticEvent, useState } from "react";
+import { useForm } from "react-hook-form";
 
+import { ErrorCode } from "@calcom/lib/auth";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Form } from "@calcom/ui/v2/core/form/fields";
 
-import { ErrorCode } from "@lib/auth";
-import { useLocale } from "@lib/hooks/useLocale";
+import TwoFactor from "@components/auth/TwoFactor";
 
 import TwoFactorAuthAPI from "./TwoFactorAuthAPI";
 import TwoFactorModalHeader from "./TwoFactorModalHeader";
@@ -39,8 +42,14 @@ const WithStep = ({
   return step === current ? children : null;
 };
 
+interface EnableTwoFactorValues {
+  totpCode: string;
+}
+
 const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps) => {
   const { t } = useLocale();
+  const form = useForm<EnableTwoFactorValues>();
+
   const setupDescriptions = {
     [SetupStep.ConfirmPassword]: t("2fa_confirm_current_password"),
     [SetupStep.DisplayQrCode]: t("2fa_scan_image_or_use_code"),
@@ -48,13 +57,12 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
   };
   const [step, setStep] = useState(SetupStep.ConfirmPassword);
   const [password, setPassword] = useState("");
-  const [totpCode, setTotpCode] = useState("");
   const [dataUri, setDataUri] = useState("");
   const [secret, setSecret] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  async function handleSetup(e: SyntheticEvent) {
+  async function handleSetup(e: React.FormEvent) {
     e.preventDefault();
 
     if (isSubmitting) {
@@ -88,10 +96,10 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
     }
   }
 
-  async function handleEnable(e: SyntheticEvent) {
-    e.preventDefault();
+  async function handleEnable({ totpCode }: EnableTwoFactorValues, e: BaseSyntheticEvent | undefined) {
+    e?.preventDefault();
 
-    if (isSubmitting || totpCode.length !== 6) {
+    if (isSubmitting) {
       return;
     }
 
@@ -158,64 +166,43 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
             <p className="text-center font-mono text-xs">{secret}</p>
           </>
         </WithStep>
-        <WithStep step={SetupStep.EnterTotpCode} current={step}>
-          <form onSubmit={handleEnable}>
+        <Form handleSubmit={handleEnable} form={form}>
+          <WithStep step={SetupStep.EnterTotpCode} current={step}>
             <div className="mb-4">
-              <label htmlFor="code" className="mt-4 block text-sm font-medium text-gray-700">
-                {t("code")}
-              </label>
-              <div className="mt-1">
-                <input
-                  type="text"
-                  name="code"
-                  id="code"
-                  required
-                  value={totpCode}
-                  maxLength={6}
-                  minLength={6}
-                  inputMode="numeric"
-                  onInput={(e) => setTotpCode(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 text-sm"
-                  autoComplete="one-time-code"
-                />
-              </div>
+              <TwoFactor center />
 
               {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
             </div>
-          </form>
-        </WithStep>
+          </WithStep>
 
-        <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-          <WithStep step={SetupStep.ConfirmPassword} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={handleSetup}
-              disabled={password.length === 0 || isSubmitting}>
-              {t("continue")}
+          <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+            <WithStep step={SetupStep.ConfirmPassword} current={step}>
+              <Button
+                type="submit"
+                className="ltr:ml-2 rtl:mr-2"
+                onClick={handleSetup}
+                disabled={password.length === 0 || isSubmitting}>
+                {t("continue")}
+              </Button>
+            </WithStep>
+            <WithStep step={SetupStep.DisplayQrCode} current={step}>
+              <Button
+                type="submit"
+                className="ltr:ml-2 rtl:mr-2"
+                onClick={() => setStep(SetupStep.EnterTotpCode)}>
+                {t("continue")}
+              </Button>
+            </WithStep>
+            <WithStep step={SetupStep.EnterTotpCode} current={step}>
+              <Button type="submit" className="ltr:ml-2 rtl:mr-2" disabled={isSubmitting}>
+                {t("enable")}
+              </Button>
+            </WithStep>
+            <Button color="secondary" onClick={onCancel}>
+              {t("cancel")}
             </Button>
-          </WithStep>
-          <WithStep step={SetupStep.DisplayQrCode} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={() => setStep(SetupStep.EnterTotpCode)}>
-              {t("continue")}
-            </Button>
-          </WithStep>
-          <WithStep step={SetupStep.EnterTotpCode} current={step}>
-            <Button
-              type="submit"
-              className="ltr:ml-2 rtl:mr-2"
-              onClick={handleEnable}
-              disabled={totpCode.length !== 6 || isSubmitting}>
-              {t("enable")}
-            </Button>
-          </WithStep>
-          <Button color="secondary" onClick={onCancel}>
-            {t("cancel")}
-          </Button>
-        </div>
+          </div>
+        </Form>
       </DialogContent>
     </Dialog>
   );

apps/web/components/security/TwoFactorAuthAPI.ts

@@ -19,10 +19,10 @@ const TwoFactorAuthAPI = {
     });
   },
 
-  async disable(password: string) {
+  async disable(password: string, code: string) {
     return fetch("/api/auth/two-factor/totp/disable", {
       method: "POST",
-      body: JSON.stringify({ password }),
+      body: JSON.stringify({ password, code }),
       headers: {
         "Content-Type": "application/json",
       },

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -6,7 +6,7 @@ const TwoFactorModalHeader = ({ title, description }: { title: string; descripti
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <ShieldCheckIcon className="h-6 w-6 text-black" />
+        <ShieldCheckIcon className="h-6 w-6 text-white" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/components/team/DisableTeamImpersonation.tsx

@@ -4,6 +4,7 @@ import { trpc } from "@calcom/trpc/react";
 import Badge from "@calcom/ui/Badge";
 import Button from "@calcom/ui/Button";
 
+/** @deprecated Use `packages/features/ee/teams/components/DisableTeamImpersonation.tsx` */
 const DisableTeamImpersonation = ({ teamId, memberId }: { teamId: number; memberId: number }) => {
   const { t } = useLocale();
 

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -13,6 +13,7 @@ type MembershipRoleOption = {
   value: MembershipRole;
 };
 
+/** @deprecated Use `packages/features/ee/teams/components/MemberChangeRoleModal.tsx` */
 export default function MemberChangeRoleModal(props: {
   isOpen: boolean;
   currentMember: MembershipRole;

apps/web/components/team/MemberInvitationModal.tsx

@@ -26,6 +26,7 @@ type MembershipRoleOption = {
 
 const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];
 
+/** @deprecated Use `packages/features/ee/teams/components/MemberInvitationModal.tsx` */
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
   const [errorMessage, setErrorMessage] = useState("");
   const { t, i18n } = useLocale();

apps/web/components/team/MemberListItem.tsx

@@ -33,6 +33,7 @@ interface Props {
   member: inferQueryOutput<"viewer.teams.get">["members"][number];
 }
 
+/** @deprecated Use `packages/features/ee/teams/components/MemberListItem.tsx` */
 export default function MemberListItem(props: Props) {
   const { t } = useLocale();
 

apps/web/components/team/TeamPill.tsx

@@ -10,6 +10,7 @@ interface Props {
   color?: PillColor;
 }
 
+/** @deprecated Use `packages/features/ee/teams/components/TeamPill.tsx` */
 export default function TeamPill(props: Props) {
   return (
     <div

apps/web/components/team/UpgradeToFlexibleProModal.tsx

@@ -19,6 +19,7 @@ interface Props {
   teamId: number;
 }
 
+/** @deprecated Use `packages/features/ee/teams/components/UpgradeToFlexibleProModal.tsx` */
 export function UpgradeToFlexibleProModal(props: Props) {
   const { t } = useLocale();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);

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

@@ -1,4 +1,3 @@
-import classnames from "classnames";
 import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
@@ -6,11 +5,10 @@ import React from "react";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
+import { Avatar } from "@calcom/ui/v2";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import Avatar from "@components/ui/Avatar";
-
 type TeamType = TeamPageProps["team"];
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number];
@@ -19,47 +17,20 @@ const Team = ({ team }: TeamPageProps) => {
   const { t } = useLocale();
 
   const Member = ({ member }: { member: MemberType }) => {
-    const classes = classnames(
-      "group",
-      "relative",
-      "flex flex-col",
-      "space-y-4",
-      "p-4",
-      "min-w-full sm:min-w-64 sm:max-w-64",
-      "bg-white dark:bg-neutral-800 dark:border-neutral-700 dark:bg-opacity-8",
-      "border border-neutral-200",
-      "hover:cursor-pointer",
-      "hover:border-brand dark:border-neutral-700 dark:hover:border-neutral-600",
-      "rounded-sm",
-      "hover:shadow-md"
-    );
-
     return (
       <Link key={member.id} href={`/${member.username}`}>
-        <div className={classes}>
-          <Icon.FiArrowRight
-            className={classnames(
-              "text-black dark:text-white",
-              "absolute top-4 right-4",
-              "h-4 w-4",
-              "transition-opacity",
-              "opacity-0 group-hover:block group-hover:opacity-100"
-            )}
+        <div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex h-full flex-col space-y-2 rounded-md bg-white p-4  hover:cursor-pointer hover:bg-gray-50 ">
+          <Avatar
+            size="md"
+            alt={member.name || ""}
+            imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
           />
-
-          <div>
-            <Avatar
-              alt={member.name || ""}
-              imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
-              className="-mt-4 h-12 w-12"
-            />
-            <section className="line-clamp-4 mt-2 w-full space-y-1">
-              <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
-              <p className="text-sm font-normal text-neutral-500 dark:text-white">
-                {member.bio || t("user_from_team", { user: member.name, team: team.name })}
-              </p>
-            </section>
-          </div>
+          <section className="line-clamp-4 mt-2 w-full space-y-1">
+            <p className="font-medium text-neutral-900 dark:text-white">{member.name}</p>
+            <p className="line-clamp-3 overflow-ellipsis text-sm font-normal text-neutral-500 dark:text-white">
+              {member.bio || t("user_from_team", { user: member.name, team: team.name })}
+            </p>
+          </section>
         </div>
       </Link>
     );
@@ -82,13 +53,6 @@ const Team = ({ team }: TeamPageProps) => {
   return (
     <div>
       <Members members={team.members} />
-      {team.eventTypes.length > 0 && (
-        <aside className="mt-8 text-center dark:text-white">
-          <Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={Icon.FiArrowLeft}>
-            {t("go_back")}
-          </Button>
-        </aside>
-      )}
     </div>
   );
 };