v2.0.3

* Add try/catch on workflows while confirming a booking

* Revert "added ?tabName=setup to event-type detail link to give it active status (#4830)"

This reverts commit 11c44db609.

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

@@ -46,8 +46,7 @@ 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=
@@ -95,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=

.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,11 @@ on:
       - main
     paths:
       - "**.tsx?"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+env:
+  NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
   check-types:
     runs-on: ubuntu-latest
@@ -17,8 +22,13 @@ jobs:
 
       - name: Use Node 16.x
         uses: actions/setup-node@v3
+        
         with:
           node-version: 16.x
           cache: "yarn"
+      
+      - name: Show info
+        run: node -e "console.log(require('v8').getHeapStatistics())"
+      
       - run: yarn --frozen-lockfile
       - run: yarn type-check

.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/integrations-third-party.yml

@@ -1,104 +0,0 @@
-name: E2E Test - Integrations with Third Party
-on:
-  push:
-    branches: [ tests/with-msw ]
-  pull_request_target: # So we can test on forks
-    branches:
-      - main
-    paths-ignore:
-      - apps/api/**
-      - apps/console/**
-      - apps/docs/**
-      - apps/swagger/**
-      - apps/website/**
-      - apps/web/public/**
-jobs:
-  test:
-    timeout-minutes: 20
-    name: E2E Integration
-    strategy:
-      matrix:
-        node: ["16.x"]
-        os: [ubuntu-latest]
-    runs-on: ${{ matrix.os }}
-
-    env:
-      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-      NEXTAUTH_SECRET: secret
-      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-      GOOGLE_LOGIN_ENABLED: true
-      # CRON_API_KEY: xxx
-      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-      PAYMENT_FEE_PERCENTAGE: 0.005
-      PAYMENT_FEE_FIXED: 10
-      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      SAML_ADMINS: pro@example.com
-      NEXTAUTH_URL: http://localhost:3000/api/auth
-      ZOOM_CLIENT_ID: ZOOM_CLIENT_ID
-      ZOOM_CLIENT_SECRET: ZOOM_CLIENT_SECRET
-      HUBSPOT_CLIENT_ID: HUBSPOT_CLIENT_ID
-      HUBSPOT_CLIENT_SECRET: HUBSPOT_CLIENT_SECRET
-      NEXT_PUBLIC_IS_E2E: 1
-      # EMAIL_FROM: e2e@cal.com
-      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-      # MS_GRAPH_CLIENT_ID: xxx
-      # MS_GRAPH_CLIENT_SECRET: xxx
-      # ZOOM_CLIENT_ID: xxx
-      # ZOOM_CLIENT_SECRET: xxx
-      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-    services:
-      postgres:
-        image: postgres:12.1
-        env:
-          POSTGRES_USER: postgres
-          POSTGRES_DB: calendso
-        ports:
-          - 5432:5432
-
-    steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
-      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-          cache: "yarn"
-
-      - name: Cache playwright binaries
-        uses: actions/cache@v2
-        id: playwright-cache
-        with:
-          path: |
-            ~/Library/Caches/ms-playwright
-            ~/.cache/ms-playwright
-            ${{ github.workspace }}/node_modules/playwright
-          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: cache-playwright-
-      - run: yarn --frozen-lockfile
-      - name: Install playwright deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
-        run: yarn playwright install --with-deps
-      - name: Run Tests
-        # Force bypass cache because new environment variables were added that caused DB to change but build remains cached
-        run: yarn test-e2e-integrations --force
-
-      - name: Upload Test Results
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results-core
-          path: apps/web/playwright-integrations/test-results 

.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

@@ -31,7 +31,7 @@
    <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
    <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
    <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-Free-brightgreen" alt="Pricing"></a>
    <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
    <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
@@ -58,7 +58,7 @@ 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)
 
@@ -115,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`
 
@@ -204,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

__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

@@ -25,6 +25,6 @@
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.20.0"
+    "eslint": "^8.22.0"
   }
 }

apps/docs/pages/self-hosting/vercel.mdx

@@ -6,7 +6,7 @@ title: Vercel
 
 ## Requirements
 
-You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+You need a PostgresDB database hosted somewhere. [Supabase](https://supabase.com/) offers a great free option.
 
 ## Getting Started
 

apps/storybook/.gitignore

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

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

@@ -15,14 +15,15 @@
   "dependencies": {
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^0.1.4",
-    "@radix-ui/react-collapsible": "^0.1.0",
-    "@radix-ui/react-dialog": "^0.1.0",
-    "@radix-ui/react-dropdown-menu": "^0.1.1",
-    "@radix-ui/react-id": "^0.1.0",
-    "@radix-ui/react-radio-group": "^0.1.1",
-    "@radix-ui/react-slider": "^0.1.1",
-    "@radix-ui/react-switch": "^0.1.1",
+    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-collapsible": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^1.0.0",
+    "@radix-ui/react-id": "^1.0.0",
+    "@radix-ui/react-popover": "^1.0.0",
+    "@radix-ui/react-radio-group": "^1.0.0",
+    "@radix-ui/react-slider": "^1.0.0",
+    "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
     "next": "^12.2.5",
     "next-transpile-modules": "^9.0.0",
@@ -32,7 +33,7 @@
     "react-hot-toast": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.10",
     "@calcom/config": "*",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
@@ -46,17 +47,17 @@
     "@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.7.1",
-    "eslint": "^8.20.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.6",
+    "tailwindcss": "^3.1.8",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4"
   },

apps/storybook/stories/AvatarGroup.stories.tsx

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

apps/storybook/stories/ButtonGroup.stories.tsx

@@ -8,30 +8,34 @@ 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 = () => (
   <ButtonGroup>
-    <TooltipProvider>
-      <Button StartIcon={Trash2} size="icon" color="secondary" />
-      <Button StartIcon={Navigation2} size="icon" color="secondary" />
-      <Button StartIcon={Clipboard} size="icon" color="secondary" />
-    </TooltipProvider>
+    <Button StartIcon={Trash2} size="icon" color="secondary" />
+    <Button StartIcon={Navigation2} size="icon" color="secondary" />
+    <Button StartIcon={Clipboard} size="icon" color="secondary" />
   </ButtonGroup>
 );
 
 export const Combined = () => (
   <div className="flex flex-col space-y-2">
-    <TooltipProvider>
-      <ButtonGroup combined>
-        <Button StartIcon={Trash2} size="icon" color="secondary" combined />
-        <Button StartIcon={Navigation2} size="icon" color="secondary" combined />
-        <Button StartIcon={Clipboard} size="icon" color="secondary" combined />
-      </ButtonGroup>
-      <ButtonGroup combined>
-        <Button StartIcon={ArrowLeft} size="icon" color="secondary" combined />
-        <Button StartIcon={ArrowRight} size="icon" color="secondary" combined />
-      </ButtonGroup>
-    </TooltipProvider>
+    <ButtonGroup 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" />
+      <Button StartIcon={ArrowRight} size="icon" color="secondary" />
+      <Button StartIcon={ArrowRight} href="/" size="icon" color="secondary" />
+    </ButtonGroup>
   </div>
 );

apps/storybook/stories/DatePicker.stories.tsx

@@ -11,7 +11,7 @@ export const Default = () => {
   const [selected, setSelected] = useState<Date>(new Date());
   return (
     <div style={{ width: "455px" }}>
-      {/* <DatePicker selected={selected} onChange={setSelected} locale="en" /> */}
+      <DatePicker selected={selected} onChange={setSelected} locale="en" />
     </div>
   );
 };

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/Input.stories.tsx

@@ -1,7 +1,8 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Copy } from "react-feather";
 
-import { TextAreaField, TextField } from "@calcom/ui/v2/core/form/fields";
+import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 export default {
@@ -66,3 +67,9 @@ export const TextAreaInput: ComponentStory<typeof TextAreaField> = () => (
 );
 
 export const DatePickerInput: ComponentStory<typeof DatePicker> = () => <DatePicker date={new Date()} />;
+
+export const PasswordInput: ComponentStory<typeof PasswordField> = () => (
+  <TooltipProvider>
+    <PasswordField />
+  </TooltipProvider>
+);

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 options={[{ value: "text" }]} />;
+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/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";
+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

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@types/node": "16.9.1",
-    "@types/react": "^18.0.9",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "18.0.4",
     "typescript": "^4.7.4"
   }

apps/web/.gitignore

@@ -21,6 +21,7 @@ playwright/reports/*
 # next.js
 /.next/
 /out/
+next-env.d.ts
 
 # production
 /build

apps/web/calendso.yaml

@@ -426,7 +426,7 @@ paths:
                         - installed: true
                           type: caldav_calendar
                           credential: null
-                          title: CalDav Server
+                          title: CalDav (Beta)
                           imageSrc: integrations/caldav.svg
                           description: For personal and business calendars
                     __N_SSP: true

apps/web/components/App.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
-import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { InstallAppButton } from "@calcom/app-store/components";
@@ -9,9 +10,11 @@ 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";
+
+import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
 
 const Component = ({
   name,
@@ -32,8 +35,15 @@ const Component = ({
   isProOnly,
 }: Parameters<typeof App>[0]) => {
   const { t } = useLocale();
+  const router = useRouter();
   const { data: user } = trpc.useQuery(["viewer.me"]);
 
+  const utils = trpc.useContext();
+  const handleOpenChange = () => {
+    utils.invalidateQueries(["viewer.integrations"]);
+    router.replace("/apps/installed");
+  };
+
   const mutation = useAddAppMutation(null, {
     onSuccess: () => {
       showToast("App successfully installed", "success");
@@ -48,39 +58,19 @@ const Component = ({
     currency: "USD",
     useGrouping: false,
   }).format(price);
-  const [installedAppCount, setInstalledAppCount] = useState(0);
-  const [isLoading, setIsLoading] = useState(true);
-  useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
-      const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
-      try {
-        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        }).then((data) => {
-          setIsLoading(false);
-          return data;
-        });
-        if (result.status === 200) {
-          const res = await result.json();
-          setInstalledAppCount(res.count);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-      }
-    }
-    getInstalledApp(type);
-  }, [type]);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
+    onSuccess(data) {
+      setExistingCredentials(data);
+    },
+  });
+
   const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
 
   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")}
@@ -92,11 +82,6 @@ const Component = ({
             <header className="px-4 py-2">
               <div className="flex items-center">
                 <h1 className="font-cal text-xl text-gray-900">{name}</h1>
-                {isProOnly && user?.plan === "FREE" ? (
-                  <Badge className="ml-2" variant="default">
-                    PRO
-                  </Badge>
-                ) : null}
               </div>
               <h2 className="text-sm text-gray-500">
                 <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
@@ -105,12 +90,13 @@ const Component = ({
           </div>
 
           <div className="mt-4 sm:mt-0 sm:text-right">
-            {!isLoading ? (
-              isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+            {!appCredentials.isLoading ? (
+              isGlobal ||
+              (existingCredentials.length > 0 && allowedMultipleInstalls ? (
                 <div className="flex space-x-3">
                   <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                    {installedAppCount > 0
-                      ? t("active_install", { count: installedAppCount })
+                    {existingCredentials.length > 0
+                      ? t("active_install", { count: existingCredentials.length })
                       : t("globally_install")}
                   </Button>
                   {!isGlobal && (
@@ -135,10 +121,16 @@ const Component = ({
                     />
                   )}
                 </div>
-              ) : installedAppCount > 0 ? (
-                <Button color="secondary" disabled title="App already installed">
-                  {t("installed")}
-                </Button>
+              ) : existingCredentials.length > 0 ? (
+                <DisconnectIntegration
+                  id={existingCredentials[0]}
+                  render={(btnProps) => (
+                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
+                      {t("disconnect")}
+                    </Button>
+                  )}
+                  onOpenChange={handleOpenChange}
+                />
               ) : (
                 <InstallAppButton
                   type={type}
@@ -159,7 +151,7 @@ const Component = ({
                     );
                   }}
                 />
-              )
+              ))
             ) : (
               <SkeletonButton width="24" height="10" />
             )}

apps/web/components/DestinationCalendarSelector.tsx

@@ -107,9 +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),
+                width: "100%",
               },
             };
           },
@@ -135,6 +136,9 @@ const DestinationCalendarSelector = ({
         }}
         isLoading={isLoading}
         value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
       />
     </div>
   );

apps/web/components/Embed.tsx

@@ -1,19 +1,17 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { createRef, forwardRef, MutableRefObject, RefObject, useRef, useState } from "react";
 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, HorizontalTabs, showToast, Switch } from "@calcom/ui/v2";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/v2/core/Dialog";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
 
-import NavTabs from "@components/NavTabs";
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
 
@@ -38,7 +36,7 @@ type PreviewState = {
     brandColor: string;
   };
 };
-const queryParamsForDialog = ["embedType", "tabName", "embedUrl"];
+const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];
 
 const getDimension = (dimension: string) => {
   if (dimension.match(/^\d+$/)) {
@@ -47,6 +45,23 @@ const getDimension = (dimension: string) => {
   return dimension;
 };
 
+const goto = (router: NextRouter, searchParams: Record<string, string>) => {
+  const newQuery = new URLSearchParams(router.asPath.split("?")[1]);
+  Object.keys(searchParams).forEach((key) => {
+    newQuery.set(key, searchParams[key]);
+  });
+  router.push(`${router.asPath.split("?")[0]}?${newQuery.toString()}`, undefined, {
+    shallow: true,
+  });
+};
+
+const removeQueryParams = (router: NextRouter, queryParams: string[]) => {
+  queryParams.forEach((param) => {
+    delete router.query[param];
+  });
+  router.push(`${router.asPath.split("?")[0]}?${router.query.toString()}`);
+};
+
 /**
  * It allows us to show code with certain reusable blocks indented according to the block variable placement
  * So, if you add a variable ${abc} with indentation of 4 spaces, it will automatically indent all newlines in `abc` with the same indent before constructing the final string
@@ -453,7 +468,7 @@ const embeds: {
 const tabs = [
   {
     name: "HTML",
-    tabName: "embed-code",
+    href: "embedTabName=embed-code",
     icon: Icon.FiCode,
     type: "code",
     Component: forwardRef<
@@ -504,7 +519,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   },
   {
     name: "React",
-    tabName: "embed-react",
+    href: "embedTabName=embed-react",
     icon: Icon.FiCode,
     type: "code",
     Component: forwardRef<
@@ -544,8 +559,8 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   },
   {
     name: "Preview",
-    tabName: "embed-preview",
-    icon: Icon.FiEye,
+    href: "embedTabName=embed-preview",
+    icon: Icon.FiTrello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -561,7 +576,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
         <iframe
           ref={ref as typeof ref & MutableRefObject<HTMLIFrameElement>}
           data-testid="embed-preview"
-          className="border-1 h-[75vh] border"
+          className="border-1 h-[100vh] border"
           width="100%"
           height="100%"
           src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
@@ -591,7 +606,7 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent size="lg">
+    <DialogContent type="creation" useOwnActionButtons size="lg">
       <div className="mb-4">
         <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
           {t("how_you_want_add_cal_site")}
@@ -607,11 +622,8 @@ const ChooseEmbedTypesDialogContent = () => {
             key={index}
             data-testid={embed.type}
             onClick={() => {
-              router.push({
-                query: {
-                  ...router.query,
-                  embedType: embed.type,
-                },
+              goto(router, {
+                embedType: embed.type,
               });
             }}>
             <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
@@ -636,6 +648,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   const { t } = useLocale();
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const s = (href: string) => {
+    const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
+    const [a, b] = href.split("=");
+    searchParams.set(a, b);
+    return `${router.asPath.split("?")[0]}?${searchParams.toString()}`;
+  };
+  const parsedTabs = tabs.map((t) => ({ ...t, href: s(t.href) }));
   const embedCodeRefs: Record<typeof tabs[0]["name"], RefObject<HTMLTextAreaElement>> = {};
   tabs
     .filter((tab) => tab.type === "code")
@@ -662,28 +681,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   });
 
   const close = () => {
-    const noPopupQuery = {
-      ...router.query,
-    };
-
-    delete noPopupQuery.dialog;
-
-    queryParamsForDialog.forEach((queryParam) => {
-      delete noPopupQuery[queryParam];
-    });
-
-    router.push({
-      query: noPopupQuery,
-    });
+    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
   };
 
   // Use embed-code as default tab
-  if (!router.query.tabName) {
-    router.query.tabName = "embed-code";
-    router.push({
-      query: {
-        ...router.query,
-      },
+  if (!router.query.embedTabName) {
+    goto(router, {
+      embedTabName: "embed-code",
     });
   }
 
@@ -780,20 +784,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl">
+    <DialogContent size="xl" className="p-0.5" type="creation" useOwnActionButtons>
       <div className="flex">
-        <div className="flex w-1/3 flex-col bg-white p-6">
+        <div className="flex w-1/3 flex-col bg-gray-50 p-8">
           <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
             <button
               onClick={() => {
-                const newQuery = { ...router.query };
-                delete newQuery.embedType;
-                delete newQuery.tabName;
-                router.push({
-                  query: {
-                    ...newQuery,
-                  },
-                });
+                removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
               <Icon.FiArrowLeft className="mr-4 w-4" />
             </button>
@@ -871,9 +868,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 <div
                   className={classNames(
                     "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    embedType === "floating-popup" ? "" : "hidden"
                   )}>
-                  <div className="text-sm">Button Text</div>
+                  <div className="mb-2 text-sm">Button Text</div>
                   {/* Default Values should come from preview iframe */}
                   <TextField
                     name="buttonText"
@@ -895,10 +892,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 </div>
                 <div
                   className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    "mt-4 flex items-center justify-start",
+                    embedType === "floating-popup" ? "space-x-2" : "hidden"
                   )}>
-                  <div className="text-sm">Display Calendar Icon Button</div>
                   <Switch
                     defaultChecked={true}
                     onCheckedChange={(checked) => {
@@ -913,13 +909,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       });
                     }}
                   />
+                  <div className="text-sm">Display Calendar Icon Button</div>
                 </div>
                 <div
                   className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    "mt-4 items-center justify-between",
+                    embedType === "floating-popup" ? "" : "hidden"
                   )}>
-                  <div>Position of Button</div>
+                  <div className="mb-2">Position of Button</div>
                   <Select
                     onChange={(position) => {
                       setPreviewState((previewState) => {
@@ -936,13 +933,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     options={FloatingPopupPositionOptions}
                   />
                 </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
                   <div>Button Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                     <ColorPicker
                       defaultValue="#000000"
                       onChange={(color) => {
@@ -959,13 +952,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     />
                   </div>
                 </div>
-                <div
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
                   <div>Text Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                     <ColorPicker
                       defaultValue="#000000"
                       onChange={(color) => {
@@ -1000,10 +989,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               </CollapsibleTrigger>
               <CollapsibleContent>
                 <div className="mt-6 text-sm">
-                  <Label className="flex items-center justify-between">
-                    <div>Theme</div>
+                  <Label className="">
+                    <div className="mb-2">Theme</div>
                     <Select
-                      className="w-36"
+                      className="w-full"
                       defaultValue={ThemeOptions[0]}
                       components={{
                         Control: ThemeSelectControl,
@@ -1030,9 +1019,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     // { name: "highlightColor", title: "Highlight Color" },
                     // { name: "medianColor", title: "Median Color" },
                   ].map((palette) => (
-                    <Label key={palette.name} className="flex items-center justify-between">
-                      <div>{palette.title}</div>
-                      <div className="w-36">
+                    <Label key={palette.name} className="pb-4">
+                      <div className="mb-2 pt-2">{palette.title}</div>
+                      <div className="w-full">
                         <ColorPicker
                           defaultValue="#000000"
                           onChange={(color) => {
@@ -1049,33 +1038,33 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </Collapsible>
           </div>
         </div>
-        <div className="w-2/3 bg-gray-50 p-6">
-          <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />
+        <div className="flex w-2/3 flex-col p-8">
+          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
           {tabs.map((tab) => {
             return (
               <div
-                key={tab.tabName}
-                className={classNames(router.query.tabName === tab.tabName ? "block" : "hidden")}>
-                <div>
-                  <div className={classNames(tab.type === "code" ? "h-[75vh]" : "")}>
-                    {tab.type === "code" ? (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={refOfEmbedCodesRefs.current[tab.name]}
-                      />
-                    ) : (
-                      <tab.Component
-                        embedType={embedType}
-                        calLink={calLink}
-                        previewState={previewState}
-                        ref={iframeRef}
-                      />
-                    )}
-                  </div>
-                  <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"} />
+                key={tab.href}
+                className={classNames(
+                  router.query.embedTabName === tab.href.split("=")[1] ? "flex flex-grow flex-col" : "hidden"
+                )}>
+                <div className="flex h-[55vh] flex-grow flex-col">
+                  {tab.type === "code" ? (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={refOfEmbedCodesRefs.current[tab.name]}
+                    />
+                  ) : (
+                    <tab.Component
+                      embedType={embedType}
+                      calLink={calLink}
+                      previewState={previewState}
+                      ref={iframeRef}
+                    />
+                  )}
                 </div>
+                <div className={router.query.embedTabName == "embed-preview" ? "block" : "hidden"} />
                 <div className="mt-8 flex flex-row-reverse gap-x-2">
                   {tab.type === "code" ? (
                     <Button
@@ -1128,7 +1117,7 @@ export const EmbedDialog = () => {
 type EmbedButtonProps<T> = {
   embedUrl: string;
   children?: React.ReactNode;
-  className: string;
+  className?: string;
   as?: T;
 };
 
@@ -1140,21 +1129,12 @@ 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,
+    goto(router, {
       dialog: "embed",
       embedUrl,
-    };
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
+    });
   };
   const Component = as ?? Button;
 
@@ -1164,7 +1144,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,50 @@
+import dynamic from "next/dynamic";
+import { Dispatch, useState, useEffect } from "react";
+import { JSONObject } from "superjson/dist/types";
+
+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>>;
+};
+
+const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));
+
+// 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/I18nLanguageHandler.tsx

@@ -10,7 +10,9 @@ export function useViewerI18n() {
      * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
      * We intend to not cache i18n query
      **/
-    context: { skipBatch: true },
+    trpc: {
+      context: { skipBatch: true },
+    },
   });
 }
 

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,18 +31,13 @@ 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" ? (
-            <Badge className="ml-2" variant="default">
-              PRO
-            </Badge>
-          ) : null}
+          <h3 className="font-medium">{props.app.name}</h3>
         </div>
         {/* TODO: add reviews <div className="flex text-sm text-gray-800">
           <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

@@ -2,9 +2,10 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
+/** @deprecated Use `apps/web/components/v2/availability/SkeletonLoader.tsx` */
 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

@@ -6,29 +6,27 @@ import { Props } from "./pages/AvailabilityPage";
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   return locations.length ? (
     <div>
-      <div className="flex-warp mr-6 flex break-words text-sm text-gray-600 dark:text-white">
-        <p className="w-full">
-          {locations.map((location) => {
-            const eventLocationType = getEventLocationType(location.type);
-            if (!eventLocationType) {
-              // It's possible that the location app got uninstalled
-              return null;
-            }
-            return (
-              <span 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>
-              </span>
-            );
-          })}
-        </p>
+      <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="dark:bg-darkgray-200 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 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-4  font-medium opacity-25 dark:border-transparent ",
-                      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,9 +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 dark:bg-darkgray-50 dark:hover:border-darkgray-900 mb-2 block rounded-md border-2 bg-white py-4 text-sm font-medium hover:text-white dark:border-transparent dark:text-neutral-200",
-                        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

@@ -9,11 +9,12 @@ 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 useMeQuery from "@lib/hooks/useMeQuery";
 import { extractRecurringDates } from "@lib/parseDate";
@@ -43,6 +44,11 @@ function BookingListItem(booking: BookingItemProps) {
   const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
     onSuccess: () => {
       setRejectionDialogIsOpen(false);
+      showToast(t("booking_confirmation_success"), "success");
+      utils.invalidateQueries("viewer.bookings");
+    },
+    onError: () => {
+      showToast(t("booking_confirmation_failed"), "error");
       utils.invalidateQueries("viewer.bookings");
     },
   });
@@ -64,6 +70,7 @@ function BookingListItem(booking: BookingItemProps) {
   };
 
   const isUpcoming = new Date(booking.endTime) >= new Date();
+  const isPast = new Date(booking.endTime) < new Date();
   const isCancelled = booking.status === BookingStatus.CANCELLED;
   const isConfirmed = booking.status === BookingStatus.ACCEPTED;
   const isRejected = booking.status === BookingStatus.REJECTED;
@@ -115,8 +122,7 @@ function BookingListItem(booking: BookingItemProps) {
     },
     {
       id: "edit_booking",
-      label: t("edit_booking"),
-      icon: Icon.FiEdit,
+      label: t("edit"),
       actions: [
         {
           id: "reschedule",
@@ -260,90 +266,103 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </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}>
+      <tr className="flex flex-col hover:bg-neutral-50 sm:flex-row">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[10rem]" onClick={onClick}>
           <div className="cursor-pointer py-4">
             <div className="text-sm leading-6 text-gray-900">{startTime}</div>
             <div className="text-sm text-gray-500">
               {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
               {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
             </div>
-            <div className="text-sm text-gray-400">
-              {booking.recurringBookings &&
-                booking.eventType?.recurringEvent?.freq &&
-                (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
-                  <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
-                    <div className="flex">
-                      <Tooltip
-                        content={recurringStrings.map((aDate, key) => (
-                          <p key={key}>{aDate}</p>
-                        ))}>
-                        <div className="text-gray-600 dark:text-white">
-                          <Icon.FiRefreshCcw
-                            stroke-width="3"
-                            className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
-                          />
-                          <p className="mt-1 pl-5 text-xs">
-                            {booking.status === BookingStatus.ACCEPTED
-                              ? `${t("event_remaining", {
-                                  count: recurringDates.length,
-                                })}`
-                              : getEveryFreqFor({
-                                  t,
-                                  recurringEvent: booking.eventType.recurringEvent,
-                                  recurringCount: booking.recurringBookings.length,
-                                })}
-                          </p>
-                        </div>
-                      </Tooltip>
-                    </div>
-                  </div>
-                )}
+
+            {isPending && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                {t("unconfirmed")}
+              </Badge>
+            )}
+
+            {booking.eventType?.team && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+                {booking.eventType.team.name}
+              </Badge>
+            )}
+            {!!booking?.eventType?.price && !booking.paid && (
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                {t("pending_payment")}
+              </Badge>
+            )}
+
+            <div className="mt-2 text-sm text-gray-400">
+              <RecurringBookingsTooltip
+                booking={booking}
+                recurringStrings={recurringStrings}
+                recurringDates={recurringDates}
+              />
             </div>
           </div>
         </td>
-        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
-          <div className="cursor-pointer py-4">
-            <div className="sm:hidden">
-              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
-              {!!booking?.eventType?.price && !booking.paid && (
-                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
-              )}
-              <div className="text-sm font-medium text-gray-900">
-                {startTime}:{" "}
-                <small className="text-sm text-gray-500">
-                  {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-                </small>
+        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+          {/* Time and Badges for mobile */}
+          <div className="w-full pt-4 pb-2 sm:hidden">
+            <div className="flex w-full items-center justify-between sm:hidden">
+              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
+              <div className="pr-2 text-sm text-gray-500">
+                {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
+                {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
               </div>
             </div>
+
+            {isPending && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                {t("unconfirmed")}
+              </Badge>
+            )}
+            {booking.eventType?.team && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
+                {booking.eventType.team.name}
+              </Badge>
+            )}
+            {!!booking?.eventType?.price && !booking.paid && (
+              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                {t("pending_payment")}
+              </Badge>
+            )}
+            <div className="text-sm text-gray-400 sm:hidden">
+              <RecurringBookingsTooltip
+                booking={booking}
+                recurringStrings={recurringStrings}
+                recurringDates={recurringDates}
+              />
+            </div>
+          </div>
+
+          <div className="cursor-pointer py-4">
             <div
               title={booking.title}
               className={classNames(
-                "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
+                "max-w-10/12 sm:max-w-56 text-sm font-medium leading-6 text-neutral-900 md:max-w-full",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
               {booking.title}
+              <span> </span>
+
               {!!booking?.eventType?.price && !booking.paid && (
                 <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
               )}
-              {isPending && <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">{t("unconfirmed")}</Tag>}
             </div>
             {booking.description && (
               <div
-                className="max-w-52 md:max-w-96 truncate text-sm text-gray-500"
+                className="max-w-52 md:max-w-96 truncate text-sm text-gray-600"
                 title={booking.description}>
                 &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">
@@ -352,8 +371,7 @@ function BookingListItem(booking: BookingItemProps) {
             )}
           </div>
         </td>
-
-        <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
+        <td className="py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -361,6 +379,7 @@ function BookingListItem(booking: BookingItemProps) {
               {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
             </>
           ) : null}
+          {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
           {isCancelled && booking.rescheduled && (
             <div className="hidden h-full items-center md:flex">
               <RequestSentMessage />
@@ -372,6 +391,138 @@ function BookingListItem(booking: BookingItemProps) {
   );
 }
 
+interface RecurringBookingsTooltipProps {
+  booking: BookingItemProps;
+  recurringStrings: string[];
+  recurringDates: Date[];
+}
+
+const RecurringBookingsTooltip = ({
+  booking,
+  recurringStrings,
+  recurringDates,
+}: RecurringBookingsTooltipProps) => {
+  const { t } = useLocale();
+
+  return (
+    (booking.recurringBookings &&
+      booking.eventType?.recurringEvent?.freq &&
+      (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
+        <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
+          <div className="flex">
+            <Tooltip
+              content={recurringStrings.map((aDate, key) => (
+                <p key={key}>{aDate}</p>
+              ))}>
+              <div className="text-gray-600 dark:text-white">
+                <Icon.FiRefreshCcw
+                  strokeWidth="3"
+                  className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
+                />
+                <p className="mt-1 pl-5 text-xs">
+                  {booking.status === BookingStatus.ACCEPTED
+                    ? `${t("event_remaining", {
+                        count: recurringDates.length,
+                      })}`
+                    : getEveryFreqFor({
+                        t,
+                        recurringEvent: booking.eventType.recurringEvent,
+                        recurringCount: booking.recurringBookings.length,
+                      })}
+                </p>
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+      )) ||
+    null
+  );
+};
+
+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

@@ -2,9 +2,10 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
+/** @deprecated Use `apps/web/components/v2/bookings/SkeletonLoader.tsx` */
 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 +17,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 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,7 +4,8 @@ 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";
 
@@ -15,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";
@@ -24,8 +24,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
-import { localStorage } from "@calcom/lib/webstorage";
+import { detectBrowserTimeFormat, getIs24hClockFromLocalStorage } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
 import { Icon } from "@calcom/ui/Icon";
 import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
@@ -35,6 +34,7 @@ import { timeZone as localStorageTimeZone } 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";
@@ -47,8 +47,6 @@ import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 import { AvailableEventLocations } from "../AvailableEventLocations";
 
-export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
-
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   const router = useRouter();
   const path = router.asPath.split("/");
@@ -80,7 +78,7 @@ const useSlots = ({
   usernameList: string[];
   timeZone?: string;
 }) => {
-  const { data, isLoading, isIdle } = trpc.useQuery(
+  const { data, isLoading, isPaused } = trpc.useQuery(
     [
       "viewer.public.slots.getSchedule",
       {
@@ -102,8 +100,8 @@ const useSlots = ({
     }
   }, [data]);
 
-  // The very first time isIdle is set if auto-fetch is disabled, so isIdle should also be considered a loading state.
-  return { slots: cachedSlots, isLoading: isLoading || isIdle };
+  // The very first time isPaused is set if auto-fetch is disabled, so isPaused should also be considered a loading state.
+  return { slots: cachedSlots, isLoading: isLoading || isPaused };
 };
 
 const SlotPicker = ({
@@ -114,6 +112,7 @@ const SlotPicker = ({
   users,
   seatsPerTimeSlot,
   weekStart = 0,
+  ethSignature,
 }: {
   eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
   timeFormat: string;
@@ -122,6 +121,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>();
@@ -168,16 +168,16 @@ const SlotPicker = ({
     timeZone,
   });
 
-  const slots = useMemo(() => ({ ..._1, ..._2 }), [_1, _2]);
+  const slots = useMemo(() => ({ ..._2, ..._1 }), [_1, _2]);
 
   return (
     <>
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 w-full sm:mt-0 sm:min-w-[455px]",
+          "mt-8 w-full px-4 pb-4 sm:mt-0 sm:min-w-[455px] md:px-5",
           selectedDate
-            ? "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: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)}
@@ -203,6 +203,7 @@ const SlotPicker = ({
           eventTypeSlug={eventType.slug}
           seatsPerTimeSlot={seatsPerTimeSlot}
           recurringCount={recurringEventCount}
+          ethSignature={ethSignature}
         />
       )}
     </>
@@ -223,7 +224,7 @@ function TimezoneDropdown({
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
 
   useEffect(() => {
-    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
+    handleToggle24hClock(!!getIs24hClockFromLocalStorage());
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -240,14 +241,14 @@ function TimezoneDropdown({
 
   return (
     <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 mb-2 -ml-2 px-2 text-left text-gray-600 dark:text-white">
+      <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 inline-block h-4 w-4 " />
+            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4" />
           ) : (
-            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4 " />
+            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
           )}
         </p>
       </Collapsible.Trigger>
@@ -285,6 +286,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();
@@ -292,7 +295,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;
@@ -301,6 +303,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());
@@ -313,15 +322,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();
@@ -336,7 +336,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
@@ -360,8 +360,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}`}
@@ -384,8 +392,10 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
           <div
             style={availabilityDatePickerEmbedStyles}
             className={classNames(
-              isBackgroundTransparent ? "" : "dark:bg-darkgray-300 sm:dark:border-darkgray-300 bg-white",
-              "border-bookinglightest rounded-md md:border",
+              isBackgroundTransparent
+                ? ""
+                : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white pb-4 md:pb-0",
+              "border-bookinglightest overflow-hidden rounded-md md:border",
               isEmbed ? "mx-auto" : maxWidth
             )}>
             {/* mobile: details */}
@@ -399,16 +409,16 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   truncateAfter={5}
                 />
                 <div className="mt-4">
-                  <p className="dark:text-darkgray-600 break-words text-sm font-medium text-black">
-                    {profile.name}
-                  </p>
                   <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] inline-block h-4 w-4" />
                           </div>
@@ -416,18 +426,18 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       {eventType?.requiresConfirmation && (
-                        <p className="dark:text-darkgray-600 text-gray-600 dark:text-white">
+                        <p className="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>
                       )}
                       <AvailableEventLocations locations={eventType.locations} />
-                      <p className="text-gray-600 dark:text-white">
+                      <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">
+                        <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
@@ -455,7 +465,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
                               }}
                             />
-                            <p className="dark:text-darkgray-600 inline text-gray-600 ">
+                            <p className="dark:text-darkgray-600 inline text-gray-600">
                               {t("occurrence", {
                                 count: recurringEventCount,
                               })}
@@ -500,15 +510,15 @@ 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 dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
+                <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 text-sm font-medium text-gray-600 dark:text-white">
+                    <div className="flex">
                       <div>
                         <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                       </div>
@@ -516,7 +526,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </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 " />
                       </div>
@@ -524,12 +534,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   <AvailableEventLocations locations={eventType.locations} />
-                  <p className="text-sm font-medium text-gray-600 dark:text-white">
+                  <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-start text-sm font-medium text-gray-600 dark:text-white">
+                    <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">
@@ -554,7 +564,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType.price > 0 && (
-                    <p className="-ml-2 px-2 text-sm font-medium text-gray-600 dark:text-white">
+                    <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
@@ -598,13 +608,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

@@ -1,15 +1,15 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
 import { SchedulingType } from "@prisma/client";
+import { useMutation } from "@tanstack/react-query";
 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";
-import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
@@ -27,7 +27,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 { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -35,11 +34,11 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Button } from "@calcom/ui/Button";
 import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
+import { Button } from "@calcom/ui/v2";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -49,6 +48,7 @@ import createRecurringBooking from "@lib/mutations/bookings/create-recurring-boo
 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";
 
@@ -56,15 +56,6 @@ 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;
 
 type BookingFormValues = {
@@ -96,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) {
@@ -112,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;
@@ -192,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[]) || [],
@@ -214,16 +199,12 @@ const BookingPage = ({
 
   // There should only exists one default userData variable for primaryAttendee.
   const defaultUserValues = {
-    email: booking?.attendees[0].email
-      ? booking.attendees[0].email
+    email: rescheduleUid
+      ? booking?.attendees[0].email
       : router.query.email
       ? (router.query.email as string)
       : "",
-    name: booking?.attendees[0].name
-      ? booking.attendees[0].name
-      : router.query.name
-      ? (router.query.name as string)
-      : "",
+    name: rescheduleUid ? booking?.attendees[0].name : router.query.name ? (router.query.name as string) : "",
   };
 
   const defaultValues = () => {
@@ -257,6 +238,7 @@ const BookingPage = ({
       guests: guestListEmails,
       notes: booking.description || "",
       rescheduleReason: "",
+      smsReminderNumber: booking.smsReminderNumber || undefined,
       customInputs: eventType.customInputs.reduce(
         (customInputs, input) => ({
           ...customInputs,
@@ -344,20 +326,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,
@@ -382,12 +355,12 @@ const BookingPage = ({
         hashedLink,
         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,
@@ -410,6 +383,7 @@ const BookingPage = ({
         hashedLink,
         smsReminderNumber:
           selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+        ethSignature: gateState.rainbowToken,
       });
     }
   };
@@ -436,8 +410,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
@@ -463,12 +445,11 @@ const BookingPage = ({
         <div
           className={classNames(
             "main overflow-hidden",
-            isEmbed ? "" : "border border-gray-200",
-            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-200 bg-white",
+            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
             "dark:border-darkgray-300 rounded-md sm:border"
           )}>
           <div className="sm:flex">
-            <div className="sm:dark:border-darkgray-50 dark:text-darkgray-600 px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
+            <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}
@@ -479,42 +460,27 @@ const BookingPage = ({
               <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
                 {profile.name}
               </h2>
-              <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900 ">
+              <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 && (
-                <div className="dark:text-darkgray-600 flex py-1 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 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>
+                    <EventTypeDescriptionSafeHTML eventType={eventType} />
                   </div>
-                  <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 " />
+                )}
+                {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>
-                  {t("requires_confirmation")}
-                </div>
-              )}
-              <div className="flex flex-col space-y-2">
-                <p className="text-sm font-medium text-gray-600 dark:text-white">
+                )}
+                <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>
@@ -556,7 +522,7 @@ const BookingPage = ({
                           content={recurringStrings.slice(5).map((aDate, key) => (
                             <p key={key}>{aDate}</p>
                           ))}>
-                          <p className="dark:text-darkgray-600  text-sm">
+                          <p className="dark:text-darkgray-600 text-sm">
                             {t("plus_more", { count: recurringStrings.length - 5 })}
                           </p>
                         </Tooltip>
@@ -564,11 +530,6 @@ const BookingPage = ({
                     )}
                   </div>
                 </div>
-                {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
-                  <p className="text-bookinglight mb-1 -ml-2 px-2">
-                    {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
-                  </p>
-                )}
                 {booking?.startTime && rescheduleUid && (
                   <div>
                     <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
@@ -580,6 +541,24 @@ const BookingPage = ({
                     </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">
@@ -611,9 +590,7 @@ const BookingPage = ({
                       required
                       className={classNames(
                         inputClassName,
-                        bookingForm.formState.errors.email
-                          ? "border-red-700 focus:ring-red-700"
-                          : " border-gray-300  dark:border-gray-900"
+                        bookingForm.formState.errors.email && "!focus:ring-red-700 !border-red-700"
                       )}
                       placeholder="you@example.com"
                       type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
@@ -645,12 +622,12 @@ const BookingPage = ({
                           <input
                             type="radio"
                             disabled={!!disableLocations}
-                            className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                            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-gray-500">
+                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
                             {locationKeyToString(location)}
                           </span>
                         </label>
@@ -756,69 +733,58 @@ const BookingPage = ({
                       )}
                     </div>
                   ))}
-                {!eventType.disableGuests && (
+                {!eventType.disableGuests && guestToggle && (
                   <div className="mb-4">
-                    {!guestToggle && (
+                    <div>
                       <label
-                        onClick={() => setGuestToggle(!guestToggle)}
                         htmlFor="guests"
-                        className="mb-1 block text-sm font-medium hover:cursor-pointer dark:text-white">
-                        {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
-                        {t("additional_guests")}
+                        className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                        {t("guests")}
                       </label>
-                    )}
-                    {guestToggle && (
-                      <div>
-                        <label
-                          htmlFor="guests"
-                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                          {t("guests")}
-                        </label>
-                        {!disableInput && (
-                          <Controller
-                            control={bookingForm.control}
-                            name="guests"
-                            render={({ field: { onChange, value } }) => (
-                              <ReactMultiEmail
-                                className="relative"
-                                placeholder="guest@example.com"
-                                emails={value}
-                                onChange={onChange}
-                                getLabel={(
-                                  email: string,
-                                  index: number,
-                                  removeEmail: (index: number) => void
-                                ) => {
-                                  return (
-                                    <div data-tag key={index} className="cursor-pointer">
-                                      {email}
-                                      {!disableInput && (
-                                        <span data-tag-handle onClick={() => removeEmail(index)}>
-                                          ×
-                                        </span>
-                                      )}
-                                    </div>
-                                  );
-                                }}
-                              />
-                            )}
-                          />
-                        )}
-                        {/* Custom code when guest emails should not be editable */}
-                        {disableInput && guestListEmails && guestListEmails.length > 0 && (
-                          <div data-tag className="react-multi-email">
-                            {/* // @TODO: user owners are appearing as guest here when should be only user input */}
-                            {guestListEmails.map((email, index) => {
-                              return (
-                                <div key={index} className="cursor-pointer">
-                                  <span data-tag>{email}</span>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        )}
-                      </div>
-                    )}
+                      {!disableInput && (
+                        <Controller
+                          control={bookingForm.control}
+                          name="guests"
+                          render={({ field: { onChange, value } }) => (
+                            <ReactMultiEmail
+                              className="relative"
+                              placeholder={<span className="dark:text-darkgray-600">guest@example.com</span>}
+                              emails={value}
+                              onChange={onChange}
+                              getLabel={(
+                                email: string,
+                                index: number,
+                                removeEmail: (index: number) => void
+                              ) => {
+                                return (
+                                  <div data-tag key={index} className="cursor-pointer">
+                                    {email}
+                                    {!disableInput && (
+                                      <span data-tag-handle onClick={() => removeEmail(index)}>
+                                        ×
+                                      </span>
+                                    )}
+                                  </div>
+                                );
+                              }}
+                            />
+                          )}
+                        />
+                      )}
+                      {/* Custom code when guest emails should not be editable */}
+                      {disableInput && guestListEmails && guestListEmails.length > 0 && (
+                        <div data-tag className="react-multi-email">
+                          {/* // @TODO: user owners are appearing as guest here when should be only user input */}
+                          {guestListEmails.map((email, index) => {
+                            return (
+                              <div key={index} className="cursor-pointer">
+                                <span data-tag>{email}</span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
                   </div>
                 )}
                 {isSmsReminderNumberNeeded && selectedLocationType !== LocationType.Phone && (
@@ -835,7 +801,6 @@ const BookingPage = ({
                         placeholder={t("enter_phone_number")}
                         id="smsReminderNumber"
                         required
-                        disabled={disableInput}
                       />
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
@@ -874,17 +839,33 @@ 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">
+                  {!eventType.disableGuests && !guestToggle && (
+                    <Button
+                      type="button"
+                      color="minimalSecondary"
+                      size="icon"
+                      tooltip={t("additional_guests")}
+                      StartIcon={Icon.FiUserPlus}
+                      onClick={() => setGuestToggle(!guestToggle)}
+                      className="mr-auto"
+                    />
+                  )}
+                  <Button
+                    color="minimal"
+                    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:hover:bg-darkgray-200 dark:border-none dark:text-white">
+                    {t("cancel")}
+                  </Button>
                   <Button
                     type="submit"
-                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
+                    className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent"
                     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) && (
@@ -894,7 +875,7 @@ const BookingPage = ({
           </div>
         </div>
       </main>
-    </div>
+    </Gates>
   );
 };
 

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,14 +1,14 @@
+import { useMutation } from "@tanstack/react-query";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
-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

@@ -49,9 +49,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 +138,9 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
       { shallow: true }
     );
   };
-
+  if (!isLocaleReady) {
+    return null;
+  }
   return (
     <Dialog
       name="new-eventtype"
@@ -338,7 +339,7 @@ function CreateEventTeamsItem(props: {
       onSelect={() => props.openModal(props.option)}>
       <Avatar
         alt={props.option.name || ""}
-        imageSrc={props.option.image}
+        imageSrc={props.option.image || WEBAPP_URL + "/" + props.option.slug + "/avatar.png"}
         size={6}
         className="inline ltr:mr-2 rtl:ml-2"
       />

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -30,9 +30,9 @@ 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]">
+          <h2 className="max-w-[280px] overflow-hidden text-ellipsis sm:max-w-[500px]">
             {eventType.description.substring(0, 100)}
             {eventType.description.length > 100 && "..."}
           </h2>

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,19 +1,18 @@
-import React from "react";
-
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
 import { Icon } from "@calcom/ui/Icon";
 
+/** @deprecated Use `apps/web/components/v2/eventtype/SkeletonLoader.tsx` */
 function SkeletonLoader() {
   return (
     <SkeletonContainer>
       <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 +43,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 justify-between p-5">
+      <div className="flex items-center space-x-3">
+        <img src={imageSrc} alt={title} className="h-8 w-8" />
+        <p className="text-sm font-bold">{title}</p>
+      </div>
+      <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;SameSite=Lax`;
+              buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
+            }}>
+            {t("connect")}
+          </Button>
+        )}
+      />
+    </div>
+  );
+};
+
+export { CalendarItem };

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

@@ -0,0 +1,86 @@
+import { useMutation } from "@tanstack/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,76 @@
+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}
+            {/* Temporarily removed till we use it on another place */}
+            {/* <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>
+        {/* Temporarily removed */}
+        {/* <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,108 @@
+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  */}
+      {!queryConnectedCalendars.isLoading &&
+        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-4 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>
+      )}
+
+      {queryIntegrations.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,88 @@
+import { ArrowRightIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+import { Schedule } from "@calcom/features/schedules";
+import { DEFAULT_SCHEDULE } from "@calcom/lib/availability";
+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";
+
+interface ISetupAvailabilityProps {
+  nextStep: () => void;
+  defaultScheduleId?: number | null;
+}
+
+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
+      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 control={availabilityForm.control} name="schedule" weekStart={1} />
+
+      <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="py-2 text-xs 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="py-2 text-xs 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/integrations/CalendarListContainer.tsx

@@ -1,5 +1,5 @@
+import { useMutation } from "@tanstack/react-query";
 import { Fragment } from "react";
-import { useMutation } from "react-query";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -185,8 +185,8 @@ function ConnectedCalendarsList(props: Props) {
                 ) : (
                   <Alert
                     severity="warning"
-                    title={t("calendar_error")}
-                    message={item.error?.message}
+                    title={t("something_went_wrong")}
+                    message={t("calendar_error")}
                     actions={
                       <DisconnectIntegration
                         id={item.credentialId}

apps/web/components/integrations/DisconnectStripeIntegration.tsx

@@ -1,5 +1,5 @@
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
-import { useMutation } from "react-query";
 
 import showToast from "@calcom/lib/notification";
 import { ButtonBaseProps } from "@calcom/ui/Button";

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/TeamCreateModal.tsx

@@ -3,9 +3,9 @@ import { useRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
-import { Alert } from "@calcom/ui/Alert";
-import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
+import { Alert } from "@calcom/ui/v2/core/Alert";
+import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/v2/core/Dialog";
 
 interface Props {
   isOpen: boolean;
@@ -28,15 +28,14 @@ export default function TeamCreate(props: Props) {
     },
   });
 
-  const createTeam = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const createTeam = () => {
     createTeamMutation.mutate({ name: nameRef?.current?.value });
   };
 
   return (
     <>
       <Dialog open={props.isOpen} onOpenChange={props.onClose}>
-        <DialogContent>
+        <DialogContent type="creation" actionText={t("create_new_team")} actionOnClick={createTeam}>
           <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">
               <Icon.FiUsers className="text-brandcontrast h-6 w-6" />
@@ -50,7 +49,7 @@ export default function TeamCreate(props: Props) {
               </div>
             </div>
           </div>
-          <form onSubmit={createTeam}>
+          <form>
             <div className="mb-4">
               <label htmlFor="name" className="block text-sm font-medium text-gray-700">
                 {t("name")}
@@ -66,18 +65,6 @@ export default function TeamCreate(props: Props) {
               />
             </div>
             {errorMessage && <Alert severity="error" title={errorMessage} />}
-            <DialogFooter>
-              <Button type="button" color="secondary" onClick={props.onClose}>
-                {t("cancel")}
-              </Button>
-              <Button
-                type="submit"
-                color="primary"
-                className="ltr:ml-2 rtl:mr-2"
-                data-testid="create-new-team-button">
-                {t("create_team")}
-              </Button>
-            </DialogFooter>
           </form>
         </DialogContent>
       </Dialog>

apps/web/components/team/TeamList.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
+import showToast from "@calcom/ui/v2/core/notifications";
 
 import TeamListItem from "./TeamListItem";
 

apps/web/components/team/TeamListItem.tsx

@@ -4,19 +4,21 @@ import Link from "next/link";
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import ConfirmationDialogContent from "@calcom/ui/ConfirmationDialogContent";
-import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
+import Button from "@calcom/ui/v2/core/Button";
+import ButtonGroup from "@calcom/ui/v2/core/ButtonGroup";
+import ConfirmationDialogContent from "@calcom/ui/v2/core/ConfirmationDialogContent";
+import { Dialog, DialogTrigger } from "@calcom/ui/v2/core/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import { Icon } from "@calcom/ui/Icon";
-import { Tooltip } from "@calcom/ui/Tooltip";
+  DropdownItem,
+} from "@calcom/ui/v2/core/Dropdown";
+import { Tooltip } from "@calcom/ui/v2/core/Tooltip";
+import showToast from "@calcom/ui/v2/core/notifications";
 
 import Avatar from "@components/ui/Avatar";
 
@@ -84,7 +86,7 @@ export default function TeamListItem(props: Props) {
           !isInvitee && "group hover:bg-neutral-50"
         )}>
         {!isInvitee ? (
-          <Link href={"/settings/teams/" + team.id}>
+          <Link href={"/settings/teams/" + team.id + "/profile"}>
             <a className="flex-grow cursor-pointer truncate text-sm" title={`${team.name}`}>
               {teamInfo}
             </a>
@@ -112,7 +114,6 @@ export default function TeamListItem(props: Props) {
                     <DropdownMenuItem>
                       <Button
                         color="minimal"
-                        size="sm"
                         className="w-full rounded-none font-medium"
                         StartIcon={Icon.FiCheck}
                         onClick={acceptInvite}>
@@ -121,8 +122,7 @@ export default function TeamListItem(props: Props) {
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                       <Button
-                        color="warn"
-                        size="sm"
+                        color="destructive"
                         className="w-full rounded-none font-medium"
                         StartIcon={Icon.FiX}
                         onClick={declineInvite}>
@@ -137,111 +137,103 @@ export default function TeamListItem(props: Props) {
           {!isInvitee && (
             <div className="flex space-x-2 rtl:space-x-reverse">
               <TeamRole role={team.role} />
-
-              <Tooltip side="top" content={t("copy_link_team")}>
-                <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(process.env.NEXT_PUBLIC_WEBSITE_URL + "/team/" + team.slug);
-                    showToast(t("link_copied"), "success");
-                  }}
-                  className="h-10 w-10 transition-none"
-                  size="icon"
-                  color="minimal"
-                  type="button">
-                  <Icon.FiLink className="h-5 w-5 group-hover:text-gray-600" />
-                </Button>
-              </Tooltip>
-              <Dropdown>
-                <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent hidden={hideDropdown}>
-                  {isAdmin && (
+              <ButtonGroup combined>
+                <Tooltip content={t("copy_link_team")}>
+                  <Button
+                    color="secondary"
+                    onClick={() => {
+                      navigator.clipboard.writeText(
+                        process.env.NEXT_PUBLIC_WEBSITE_URL + "/team/" + team.slug
+                      );
+                      showToast(t("link_copied"), "success");
+                    }}
+                    size="icon"
+                    StartIcon={Icon.FiLink}
+                    combined
+                  />
+                </Tooltip>
+                <Dropdown>
+                  <DropdownMenuTrigger asChild>
+                    <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent hidden={hideDropdown}>
+                    {isAdmin && (
+                      <DropdownMenuItem>
+                        <DropdownItem
+                          type="button"
+                          href={"/settings/teams/" + team.id + "/profile"}
+                          StartIcon={Icon.FiEdit2}>
+                          {t("edit_team") as string}
+                        </DropdownItem>
+                      </DropdownMenuItem>
+                    )}
                     <DropdownMenuItem>
-                      <Link href={"/settings/teams/" + team.id}>
-                        <a>
-                          <Button
-                            color="minimal"
-                            size="sm"
-                            className="w-full rounded-none font-medium"
-                            StartIcon={Icon.FiEdit2}>
-                            {t("edit_team")}
-                          </Button>
-                        </a>
-                      </Link>
+                      <DropdownItem
+                        type="button"
+                        target="_blank"
+                        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`}
+                        StartIcon={Icon.FiExternalLink}>
+                        {t("preview_team") as string}
+                      </DropdownItem>
                     </DropdownMenuItem>
-                  )}
-                  <DropdownMenuItem>
-                    <Link href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`} passHref={true}>
-                      <a target="_blank">
-                        <Button
-                          color="minimal"
-                          size="sm"
-                          className="w-full rounded-none font-medium"
-                          StartIcon={Icon.FiExternalLink}>
-                          {t("preview_team")}
-                        </Button>
-                      </a>
-                    </Link>
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator className="h-px bg-gray-200" />
-                  {isOwner && (
-                    <DropdownMenuItem>
-                      <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
-                        <DialogTrigger asChild>
-                          <Button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                            }}
-                            color="warn"
-                            size="sm"
-                            className="w-full rounded-none font-medium"
-                            StartIcon={Icon.FiTrash}>
-                            {t("disband_team")}
-                          </Button>
-                        </DialogTrigger>
-                        <ConfirmationDialogContent
-                          variety="danger"
-                          title={t("disband_team")}
-                          confirmBtnText={t("confirm_disband_team")}
-                          isLoading={props.isLoading}
-                          onConfirm={() => {
-                            props.onActionSelect("disband");
-                          }}>
-                          {t("disband_team_confirmation_message")}
-                        </ConfirmationDialogContent>
-                      </Dialog>
-                    </DropdownMenuItem>
-                  )}
-
-                  {!isOwner && (
-                    <DropdownMenuItem>
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button
-                            type="button"
-                            color="warn"
-                            size="lg"
-                            StartIcon={Icon.FiLogOut}
-                            className="w-full rounded-none"
-                            onClick={(e) => {
-                              e.stopPropagation();
+                    <DropdownMenuSeparator className="h-px bg-gray-200" />
+                    {isOwner && (
+                      <DropdownMenuItem>
+                        <Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
+                          <DialogTrigger asChild>
+                            <Button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                              }}
+                              color="destructive"
+                              className="rounded-none px-3 font-normal"
+                              StartIcon={Icon.FiTrash}>
+                              {t("disband_team")}
+                            </Button>
+                          </DialogTrigger>
+                          <ConfirmationDialogContent
+                            variety="danger"
+                            title={t("disband_team")}
+                            confirmBtnText={t("confirm_disband_team")}
+                            isLoading={props.isLoading}
+                            onConfirm={() => {
+                              props.onActionSelect("disband");
                             }}>
-                            {t("leave_team")}
-                          </Button>
-                        </DialogTrigger>
-                        <ConfirmationDialogContent
-                          variety="danger"
-                          title={t("leave_team")}
-                          confirmBtnText={t("confirm_leave_team")}
-                          onConfirm={declineInvite}>
-                          {t("leave_team_confirmation_message")}
-                        </ConfirmationDialogContent>
-                      </Dialog>
-                    </DropdownMenuItem>
-                  )}
-                </DropdownMenuContent>
-              </Dropdown>
+                            {t("disband_team_confirmation_message")}
+                          </ConfirmationDialogContent>
+                        </Dialog>
+                      </DropdownMenuItem>
+                    )}
+
+                    {!isOwner && (
+                      <DropdownMenuItem>
+                        <Dialog>
+                          <DialogTrigger asChild>
+                            <Button
+                              type="button"
+                              color="destructive"
+                              size="lg"
+                              StartIcon={Icon.FiLogOut}
+                              className="w-full rounded-none"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                              }}>
+                              {t("leave_team")}
+                            </Button>
+                          </DialogTrigger>
+                          <ConfirmationDialogContent
+                            variety="danger"
+                            title={t("leave_team")}
+                            confirmBtnText={t("confirm_leave_team")}
+                            onConfirm={declineInvite}>
+                            {t("leave_team_confirmation_message")}
+                          </ConfirmationDialogContent>
+                        </Dialog>
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </Dropdown>
+              </ButtonGroup>
             </div>
           )}
         </div>

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,94 +1,55 @@
-import classnames from "classnames";
 import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
-import React from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import Button from "@calcom/ui/Button";
-import { 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];
 
-const Team = ({ team }: TeamPageProps) => {
+const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   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="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full w-[90%] 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"}
+        />
+        <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: teamName })}
+          </p>
+        </section>
+      </div>
+    </Link>
+  );
+};
 
-    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>
-            <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>
-        </div>
-      </Link>
-    );
-  };
-
-  const Members = ({ members }: { members: MembersType }) => {
-    if (!members || members.length === 0) {
-      return null;
-    }
-
-    return (
-      <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
-        {members.map((member) => {
-          return member.username !== null && <Member key={member.id} member={member} />;
-        })}
-      </section>
-    );
-  };
+const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
+  if (!members || members.length === 0) {
+    return null;
+  }
 
+  return (
+    <section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
+      {members.map((member) => {
+        return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
+      })}
+    </section>
+  );
+};
+
+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>
-      )}
+      <Members members={team.members} teamName={team.name} />
     </div>
   );
 };

apps/web/components/ui/AdminRequired.tsx

@@ -6,6 +6,7 @@ type AdminRequiredProps = {
   children?: React.ReactNode;
 };
 
+/** @deprecated use PermssionContainer instead. Will delete once V2 goes live */
 export const AdminRequired: FC<AdminRequiredProps> = ({ children, as, ...rest }) => {
   const session = useSession();
 

apps/web/components/ui/AuthContainer.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 export default function AuthContainer(props: React.PropsWithChildren<Props>) {
   return (
-    <div className="flex min-h-screen flex-col justify-center bg-neutral-50 py-12 sm:px-6 lg:px-8">
+    <div className="flex min-h-screen flex-col justify-center border-gray-200 bg-neutral-50 py-12 sm:px-6 lg:px-8">
       <HeadSeo title={props.title} description={props.description} />
       <div className={classNames(props.showLogo ? "text-center" : "", "sm:mx-auto sm:w-full sm:max-w-md")}>
         {props.showLogo && (
@@ -34,7 +34,7 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         </div>
       )}
       <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="mx-2 rounded-sm border border-neutral-200 bg-white px-4 py-8 sm:px-10">
+        <div className="mx-2 rounded-md border border-gray-300 bg-white px-4 py-8 sm:px-10">
           {props.children}
         </div>
         <div className="mt-4 text-center text-sm text-neutral-600">{props.footerText}</div>

apps/web/components/ui/AvatarGroup.tsx

@@ -2,7 +2,6 @@ import React from "react";
 
 import classNames from "@lib/classNames";
 
-import Avatar from "@components/ui/Avatar";
 import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 export type AvatarGroupProps = {

apps/web/components/ui/AvatarSSR.tsx

@@ -20,7 +20,7 @@ export type AvatarProps = (
 
 // defaultAvatarSrc from profile.tsx can't be used as it imports crypto
 function defaultAvatarSrc(md5: string) {
-  return `https://www.gravatar.com/avatar/${md5}?s=160&d=identicon&r=PG`;
+  return `https://www.gravatar.com/avatar/${md5}?s=160&d=mp&r=PG`;
 }
 
 // An SSR Supported version of Avatar component.

apps/web/components/ui/EditableHeading.tsx

@@ -1,50 +1,48 @@
-import { useState } from "react";
+import classNames from "classnames";
+import React, { useState } from "react";
+import { ControllerRenderProps } from "react-hook-form";
 
 import { Icon } from "@calcom/ui/Icon";
 
-const EditableHeading = ({
-  title,
+const EditableHeading = function EditableHeading({
+  value,
   onChange,
-  placeholder = "",
-  readOnly = false,
+  isReady,
+  ...passThroughProps
 }: {
-  title: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  readOnly?: boolean;
-}) => {
+  isReady?: boolean;
+} & Omit<JSX.IntrinsicElements["input"], "name" | "onChange"> &
+  ControllerRenderProps) {
   const [isEditing, setIsEditing] = useState(false);
-  const enableEditing = () => !readOnly && setIsEditing(true);
+  const enableEditing = () => setIsEditing(true);
   return (
     <div className="group relative cursor-pointer" onClick={enableEditing}>
-      {!isEditing ? (
-        <>
-          <h1
-            style={{ fontSize: 22, letterSpacing: "-0.0009em" }}
-            className="inline pl-0 normal-case text-gray-900 focus:text-black group-hover:text-gray-500">
-            {title}
-          </h1>
-          {!readOnly ? (
-            <Icon.FiEdit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
-          ) : null}
-        </>
-      ) : (
-        <div style={{ marginBottom: -11 }}>
+      <div className="flex items-center">
+        <label className="min-w-8 relative inline-block">
+          <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
+          {!isEditing && isReady && (
+            <Icon.FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
+          )}
           <input
+            {...passThroughProps}
             type="text"
-            autoFocus
-            style={{ top: -6, fontSize: 22 }}
+            value={value}
             required
-            className="relative h-10 w-full cursor-pointer border-none bg-transparent pl-0 text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
-            placeholder={placeholder}
-            defaultValue={title}
+            className={classNames(
+              "absolute top-0 left-0 w-full cursor-pointer border-none bg-transparent p-0 align-top text-xl text-gray-900 hover:text-gray-700 focus:text-black focus:outline-none focus:ring-0"
+            )}
+            onFocus={(e) => {
+              setIsEditing(true);
+              passThroughProps.onFocus && passThroughProps.onFocus(e);
+            }}
             onBlur={(e) => {
               setIsEditing(false);
-              onChange && onChange(e.target.value);
+              passThroughProps.onBlur && passThroughProps.onBlur(e);
             }}
+            onChange={(e) => onChange && onChange(e.target.value)}
           />
-        </div>
-      )}
+        </label>
+      </div>
     </div>
   );
 };

apps/web/components/ui/TableActions.tsx

@@ -1,8 +1,13 @@
 import React, { FC } from "react";
 
-import Button from "@calcom/ui/Button";
-import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import Dropdown, {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+} from "@calcom/ui/Dropdown";
 import { Icon } from "@calcom/ui/Icon";
+import Button from "@calcom/ui/v2/core/Button";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
@@ -38,43 +43,37 @@ const DropdownActions = ({
     <Dropdown>
       {!actionTrigger ? (
         <DropdownMenuTrigger asChild>
-          <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+          <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
       )}
-      <DropdownMenuContent portalled>
-        {actions.map((action) => (
-          <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
-            <Button
-              type="button"
-              size="sm"
-              color="minimal"
-              className="w-full rounded-none font-normal"
-              href={action.href}
-              StartIcon={action.icon}
-              startIconClassName={action.iconClassName}
-              onClick={action.onClick || defaultAction}
-              data-testid={action.id}>
-              {action.label}
-            </Button>
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
+      <DropdownMenuPortal>
+        <DropdownMenuContent>
+          {actions.map((action) => (
+            <DropdownMenuItem key={action.id} className="focus-visible:outline-none">
+              <Button
+                type="button"
+                color="minimal"
+                className="w-full rounded-none font-normal"
+                href={action.href}
+                StartIcon={action.icon}
+                onClick={action.onClick || defaultAction}
+                data-testid={action.id}>
+                {action.label}
+              </Button>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenuPortal>
     </Dropdown>
   );
 };
 
 const TableActions: FC<Props> = ({ actions }) => {
-  const mobileActions = actions.flatMap((action) => {
-    if (action.actions) {
-      return action.actions;
-    }
-    return action;
-  });
   return (
     <>
-      <div className="hidden space-x-2 rtl:space-x-reverse lg:block">
+      <div className="flex space-x-2 rtl:space-x-reverse">
         {actions.map((action) => {
           const button = (
             <Button
@@ -83,7 +82,6 @@ const TableActions: FC<Props> = ({ actions }) => {
               href={action.href}
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
-              startIconClassName={action.iconClassName}
               {...(action?.actions ? { EndIcon: Icon.FiChevronDown } : null)}
               disabled={action.disabled}
               color={action.color || "secondary"}>
@@ -96,9 +94,6 @@ const TableActions: FC<Props> = ({ actions }) => {
           return <DropdownActions key={action.id} actions={action.actions} actionTrigger={button} />;
         })}
       </div>
-      <div className="inline-block text-left lg:hidden">
-        <DropdownActions actions={mobileActions} />
-      </div>
     </>
   );
 };

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

@@ -1,18 +1,20 @@
 import classNames from "classnames";
 import { debounce } from "lodash";
+import { useRouter } from "next/router";
 import { MutableRefObject, useCallback, useEffect, useState } from "react";
 
+import { getPremiumPlanMode, getPremiumPlanPriceValue } from "@calcom/app-store/stripepayment/lib/utils";
 import { fetchUsername } from "@calcom/lib/fetchUsername";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
-import { trpc } from "@calcom/trpc/react";
+import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
-import { Icon } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Icon, StarIconSolid } from "@calcom/ui/Icon";
+import { Button } from "@calcom/ui/v2";
+import { Input, Label } from "@calcom/ui/v2";
 
 export enum UsernameChangeStatusEnum {
   NORMAL = "NORMAL",
@@ -24,7 +26,7 @@ interface ICustomUsernameProps {
   currentUsername: string | undefined;
   setCurrentUsername: (value: string | undefined) => void;
   inputUsernameValue: string | undefined;
-  usernameRef: MutableRefObject<HTMLInputElement>;
+  usernameRef: MutableRefObject<HTMLInputElement | null>;
   setInputUsernameValue: (value: string) => void;
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
@@ -42,12 +44,31 @@ interface ICustomUsernameProps {
     | "plan"
     | "brandColor"
     | "darkBrandColor"
-    | "metadata"
     | "timeFormat"
-    | "allowDynamicBooking"
+    | "metadata"
   >;
+  readonly?: boolean;
 }
 
+const obtainNewUsernameChangeCondition = ({
+  userIsPremium,
+  isNewUsernamePremium,
+  stripeCustomer,
+}: {
+  userIsPremium: boolean;
+  isNewUsernamePremium: boolean;
+  stripeCustomer: inferQueryOutput<"viewer.stripeCustomer"> | undefined;
+}) => {
+  if (!userIsPremium && isNewUsernamePremium && !stripeCustomer?.paidForPremium) {
+    return UsernameChangeStatusEnum.UPGRADE;
+  }
+
+  if (userIsPremium && !isNewUsernamePremium && getPremiumPlanMode() === "subscription") {
+    return UsernameChangeStatusEnum.DOWNGRADE;
+  }
+  return UsernameChangeStatusEnum.NORMAL;
+};
+
 const PremiumTextfield = (props: ICustomUsernameProps) => {
   const { t } = useLocale();
   const {
@@ -58,73 +79,39 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     usernameRef,
     onSuccessMutation,
     onErrorMutation,
+    readonly: disabled,
     user,
   } = props;
   const [usernameIsAvailable, setUsernameIsAvailable] = useState(false);
   const [markAsError, setMarkAsError] = useState(false);
+  const router = useRouter();
+  const { paymentStatus: recentAttemptPaymentStatus } = router.query;
   const [openDialogSaveUsername, setOpenDialogSaveUsername] = useState(false);
-  const [usernameChangeCondition, setUsernameChangeCondition] = useState<UsernameChangeStatusEnum | null>(
-    null
-  );
-
-  const userIsPremium =
+  const { data: stripeCustomer } = trpc.useQuery(["viewer.stripeCustomer"]);
+  const isCurrentUsernamePremium =
     user && user.metadata && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
-  const [premiumUsername, setPremiumUsername] = useState(false);
-
+  const [isInputUsernamePremium, setIsInputUsernamePremium] = useState(false);
   const debouncedApiCall = useCallback(
-    debounce(async (username) => {
+    debounce(async (username: string) => {
       const { data } = await fetchUsername(username);
-      setMarkAsError(!data.available);
-      setPremiumUsername(data.premium);
+      setMarkAsError(!data.available && !!currentUsername && username !== currentUsername);
+      setIsInputUsernamePremium(data.premium);
       setUsernameIsAvailable(data.available);
     }, 150),
     []
   );
 
   useEffect(() => {
-    if (currentUsername !== inputUsernameValue) {
-      debouncedApiCall(inputUsernameValue);
-    } else if (inputUsernameValue === "") {
-      setMarkAsError(false);
-      setPremiumUsername(false);
-      setUsernameIsAvailable(false);
-    } else {
-      setPremiumUsername(userIsPremium);
-      setUsernameIsAvailable(false);
-    }
-  }, [inputUsernameValue]);
+    // Use the current username or if it's not set, use the one available from stripe
+    setInputUsernameValue(currentUsername || stripeCustomer?.username || "");
+  }, [setInputUsernameValue, currentUsername, stripeCustomer?.username]);
 
   useEffect(() => {
-    if (usernameIsAvailable || premiumUsername) {
-      const condition = obtainNewUsernameChangeCondition({
-        userIsPremium,
-        isNewUsernamePremium: premiumUsername,
-      });
-
-      setUsernameChangeCondition(condition);
-    }
-  }, [usernameIsAvailable, premiumUsername]);
-
-  const obtainNewUsernameChangeCondition = ({
-    userIsPremium,
-    isNewUsernamePremium,
-  }: {
-    userIsPremium: boolean;
-    isNewUsernamePremium: boolean;
-  }) => {
-    let resultCondition: UsernameChangeStatusEnum;
-    if (!userIsPremium && isNewUsernamePremium) {
-      resultCondition = UsernameChangeStatusEnum.UPGRADE;
-    } else if (userIsPremium && !isNewUsernamePremium) {
-      resultCondition = UsernameChangeStatusEnum.DOWNGRADE;
-    } else {
-      resultCondition = UsernameChangeStatusEnum.NORMAL;
-    }
-    return resultCondition;
-  };
+    if (!inputUsernameValue) return;
+    debouncedApiCall(inputUsernameValue);
+  }, [debouncedApiCall, inputUsernameValue]);
 
   const utils = trpc.useContext();
-
   const updateUsername = trpc.useMutation("viewer.updateProfile", {
     onSuccess: async () => {
       onSuccessMutation && (await onSuccessMutation());
@@ -139,34 +126,64 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     },
   });
 
-  const ActionButtons = (props: { index: string }) => {
-    const { index } = props;
-    return (usernameIsAvailable || premiumUsername) && currentUsername !== inputUsernameValue ? (
-      <div className="flex flex-row">
-        <Button
-          type="button"
-          color="primary"
-          className="mx-2"
-          onClick={() => setOpenDialogSaveUsername(true)}
-          data-testid={`update-username-btn-${index}`}>
-          {t("update")}
-        </Button>
-        <Button
-          type="button"
-          color="secondary"
-          className="mx-2"
-          onClick={() => {
-            if (currentUsername) {
-              setInputUsernameValue(currentUsername);
-              usernameRef.current.value = currentUsername;
-            }
-          }}>
-          {t("cancel")}
-        </Button>
-      </div>
-    ) : (
-      <></>
-    );
+  // when current username isn't set - Go to stripe to check what username he wanted to buy and was it a premium and was it paid for
+  const paymentRequired = !currentUsername && stripeCustomer?.isPremium && !stripeCustomer?.paidForPremium;
+
+  const usernameChangeCondition = obtainNewUsernameChangeCondition({
+    userIsPremium: isCurrentUsernamePremium,
+    isNewUsernamePremium: isInputUsernamePremium,
+    stripeCustomer,
+  });
+
+  const usernameFromStripe = stripeCustomer?.username;
+
+  const paymentLink = `/api/integrations/stripepayment/subscription?intentUsername=${
+    inputUsernameValue || usernameFromStripe
+  }&action=${usernameChangeCondition}&callbackUrl=${router.asPath}`;
+
+  const ActionButtons = () => {
+    if (paymentRequired) {
+      return (
+        <div className="flex flex-row">
+          <Button
+            type="button"
+            color="primary"
+            className="mx-2"
+            href={paymentLink}
+            data-testid="reserve-username-btn">
+            {t("Reserve")}
+          </Button>
+        </div>
+      );
+    }
+    if ((usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue) {
+      return (
+        <div className="flex flex-row">
+          <Button
+            type="button"
+            color="primary"
+            className="mx-2"
+            onClick={() => setOpenDialogSaveUsername(true)}
+            data-testid="update-username-btn">
+            {t("update")}
+          </Button>
+          <Button
+            type="button"
+            color="secondary"
+            onClick={() => {
+              if (currentUsername) {
+                setInputUsernameValue(currentUsername);
+                if (usernameRef.current) {
+                  usernameRef.current.value = currentUsername;
+                }
+              }
+            }}>
+            {t("cancel")}
+          </Button>
+        </div>
+      );
+    }
+    return <></>;
   };
 
   const saveUsername = () => {
@@ -177,81 +194,94 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
     }
   };
 
+  let paymentMsg = !currentUsername ? (
+    <span className="text-xs text-orange-400">
+      You need to reserve your premium username for {getPremiumPlanPriceValue()}
+    </span>
+  ) : null;
+
+  if (recentAttemptPaymentStatus && recentAttemptPaymentStatus !== "paid") {
+    paymentMsg = (
+      <span className="text-sm text-red-500">
+        Your payment could not be completed. Your username is still not reserved
+      </span>
+    );
+  }
+
   return (
-    <>
-      <div style={{ display: "flex", justifyItems: "center" }}>
+    <div>
+      <div className="flex justify-items-center">
         <Label htmlFor="username">{t("username")}</Label>
       </div>
-      <div className="mt-1 flex rounded-md">
+      <div className="mt-2 flex rounded-md">
         <span
           className={classNames(
-            "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+            isInputUsernamePremium ? "border-1 border-orange-400 " : "",
+            "hidden h-9 items-center rounded-l-md border border-r-0 border-gray-300 border-r-gray-300 bg-gray-50 px-3 text-sm text-gray-500 md:inline-flex"
           )}>
-          {process.env.NEXT_PUBLIC_WEBSITE_URL}/
+          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
-        <div style={{ position: "relative", width: "100%" }}>
+
+        <div className="relative w-full">
           <Input
             ref={usernameRef}
             name="username"
             autoComplete="none"
             autoCapitalize="none"
             autoCorrect="none"
+            disabled={disabled}
             className={classNames(
-              "mt-0 rounded-l-none",
+              "border-l-1 mb-0 mt-0 rounded-md rounded-l-none font-sans text-sm leading-4 focus:!ring-0",
+              isInputUsernamePremium
+                ? "border-1 focus:border-1 border-orange-400 focus:border-orange-400"
+                : "border-1 focus:border-2",
               markAsError
-                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
-                : ""
+                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
+                : "border-l-gray-300",
+              disabled ? "bg-gray-100 text-gray-400 focus:border-0" : ""
             )}
-            defaultValue={currentUsername}
+            value={inputUsernameValue}
             onChange={(event) => {
               event.preventDefault();
+              // Reset payment status
+              delete router.query.paymentStatus;
               setInputUsernameValue(event.target.value);
             }}
             data-testid="username-input"
           />
-          {currentUsername !== inputUsernameValue && (
-            <div
-              className="top-0"
-              style={{
-                position: "absolute",
-                right: 2,
-                display: "flex",
-                flexDirection: "row",
-              }}>
-              <span
-                className={classNames(
-                  "mx-2 py-1",
-                  premiumUsername ? "text-orange-500" : "",
-                  usernameIsAvailable ? "" : ""
-                )}>
-                {premiumUsername ? <Icon.FiStar className="mt-[4px] w-6" /> : <></>}
-                {!premiumUsername && usernameIsAvailable ? <Icon.FiCheck className="mt-[4px] w-6" /> : <></>}
-              </span>
-            </div>
-          )}
-        </div>
-        <div className="xs:hidden">
-          <ActionButtons index="desktop" />
+          <div className="absolute top-0 right-2 flex flex-row">
+            <span
+              className={classNames(
+                "mx-2 py-1",
+                isInputUsernamePremium ? "text-orange-400" : "",
+                usernameIsAvailable ? "" : ""
+              )}>
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
+            </span>
+          </div>
         </div>
+
+        {(usernameIsAvailable || isInputUsernamePremium) && currentUsername !== inputUsernameValue && (
+          <div className="flex justify-end">
+            <ActionButtons />
+          </div>
+        )}
       </div>
+      {paymentMsg}
       {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
 
       {usernameIsAvailable && (
         <p className={classNames("mt-1 text-xs text-gray-900")}>
           {usernameChangeCondition === UsernameChangeStatusEnum.DOWNGRADE && (
-            <>{t("standard_to_premium_username_description")}</>
+            <>{t("premium_to_standard_username_description")}</>
           )}
         </p>
       )}
 
-      {(usernameIsAvailable || premiumUsername) && currentUsername !== inputUsernameValue && (
-        <div className="mt-2 flex justify-end sm:hidden">
-          <ActionButtons index="mobile" />
-        </div>
-      )}
       <Dialog open={openDialogSaveUsername}>
         <DialogContent>
-          <div style={{ display: "flex", flexDirection: "row" }}>
+          <div className="flex flex-row">
             <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
               <Icon.FiEdit2 className="m-auto h-6 w-6" />
             </div>
@@ -291,7 +321,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 type="button"
                 loading={updateUsername.isLoading}
                 data-testid="go-to-billing"
-                href={`/api/integrations/stripepayment/subscription?intentUsername=${inputUsernameValue}`}>
+                href={paymentLink}>
                 <>
                   {t("go_to_stripe_billing")} <Icon.FiExternalLink className="ml-1 h-4 w-4" />
                 </>
@@ -317,7 +347,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
           </div>
         </DialogContent>
       </Dialog>
-    </>
+    </div>
   );
 };
 

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

@@ -7,16 +7,15 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
 import { Icon } from "@calcom/ui/Icon";
-import { Input, Label } from "@calcom/ui/form/fields";
+import { Input, Label, Button } from "@calcom/ui/v2";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
   setCurrentUsername: (value: string | undefined) => void;
   inputUsernameValue: string | undefined;
-  usernameRef: MutableRefObject<HTMLInputElement>;
+  usernameRef: MutableRefObject<HTMLInputElement | null>;
   setInputUsernameValue: (value: string) => void;
   onSuccessMutation?: () => void;
   onErrorMutation?: (error: TRPCClientErrorLike<AppRouter>) => void;
@@ -73,15 +72,14 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
     },
   });
 
-  const ActionButtons = (props: { index: string }) => {
-    const { index } = props;
+  const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
       <div className="flex flex-row">
         <Button
           type="button"
           className="mx-2"
           onClick={() => setOpenDialogSaveUsername(true)}
-          data-testid={`update-username-btn-${index}`}>
+          data-testid="update-username-btn">
           {t("update")}
         </Button>
         <Button
@@ -91,7 +89,9 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           onClick={() => {
             if (currentUsername) {
               setInputUsernameValue(currentUsername);
-              usernameRef.current.value = currentUsername;
+              if (usernameRef.current) {
+                usernameRef.current.value = currentUsername;
+              }
             }
           }}>
           {t("cancel")}
@@ -103,16 +103,16 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
   };
 
   return (
-    <>
+    <div>
       <div>
         <Label htmlFor="username">{t("username")}</Label>
       </div>
-      <div className="mt-1 flex rounded-md">
+      <div className="mt-2 flex rounded-md">
         <span
           className={classNames(
-            "inline-flex items-center rounded-l-sm border border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
+            "inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-sm text-gray-500"
           )}>
-          {process.env.NEXT_PUBLIC_WEBSITE_URL}/
+          {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
         <div className="relative w-full">
           <Input
@@ -122,7 +122,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             autoCapitalize="none"
             autoCorrect="none"
             className={classNames(
-              "mt-0 rounded-l-none",
+              "mb-0 mt-0 h-6 rounded-md rounded-l-none",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                 : ""
@@ -136,21 +136,21 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           />
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-0 flex flex-row">
-              <span className={classNames("mx-2 py-1")}>
-                {usernameIsAvailable ? <Icon.FiCheck className="mt-[4px] w-6" /> : <></>}
+              <span className={classNames("mx-2 py-2")}>
+                {usernameIsAvailable ? <Icon.FiCheck className="mt-[2px] w-6" /> : <></>}
               </span>
             </div>
           )}
         </div>
         <div className="hidden  md:inline">
-          <ActionButtons index="desktop" />
+          <ActionButtons />
         </div>
       </div>
       {markAsError && <p className="mt-1 text-xs text-red-500">Username is already taken</p>}
 
       {usernameIsAvailable && currentUsername !== inputUsernameValue && (
-        <div className="mt-2 flex justify-end sm:hidden">
-          <ActionButtons index="mobile" />
+        <div className="mt-2 flex justify-end md:hidden">
+          <ActionButtons />
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
@@ -200,7 +200,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           </div>
         </DialogContent>
       </Dialog>
-    </>
+    </div>
   );
 };
 

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

@@ -80,7 +80,7 @@ function Select<
     <ReactSelect
       theme={(theme) => ({
         ...theme,
-        borderRadius: 2,
+        borderRadius: 6,
         colors: {
           ...theme.colors,
           ...(hasDarkTheme
@@ -88,7 +88,6 @@ function Select<
             : {
                 /** Light Theme starts */
                 primary: "var(--brand-color)",
-
                 primary50: "rgba(209 , 213, 219, var(--tw-bg-opacity))",
                 primary25: "rgba(244, 245, 246, var(--tw-bg-opacity))",
                 /** Light Theme Ends */

apps/web/components/v2/apps/AdditionalCalendarSelector.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import Select from "react-select";
+import { OptionProps } from "react-select";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import type { App } from "@calcom/types/App";
+import { Button } from "@calcom/ui";
+import { Icon } from "@calcom/ui/Icon";
+
+import { QueryCell } from "@lib/QueryCell";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { t } = useLocale();
+  const { data } = optionProps;
+  return data.slug !== "add-new" ? (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="w-full" color="minimal">
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p>{data.label}</p>
+          </Button>
+        );
+      }}
+    />
+  ) : (
+    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
+      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <p>{t("add_new_calendar")}...</p>
+    </Button>
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.logo,
+          type: item.type,
+        }));
+        options.push({
+          label: "Add new calendars",
+          slug: "add-new",
+          image: "",
+          type: "new_other",
+        });
+        return (
+          <Select
+            name="additionalCalendar"
+            placeholder={t("install_another")}
+            options={options}
+            styles={{
+              placeholder: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  color: "#3E3E3E",
+                  marginLeft: "3px",
+                };
+              },
+              control: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  borderRadius: "6px",
+                };
+              },
+            }}
+            isSearchable={false}
+            className="min-w-52 block w-full flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;

apps/web/components/v2/apps/App.tsx

@@ -0,0 +1,313 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useState } from "react";
+
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { InstallAppButton } from "@calcom/app-store/components";
+import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { App as AppType } from "@calcom/types/App";
+import { Icon } from "@calcom/ui/Icon";
+import { showToast, SkeletonText } from "@calcom/ui/v2";
+import { Button, SkeletonButton, Shell } from "@calcom/ui/v2";
+import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+
+const Component = ({
+  name,
+  type,
+  logo,
+  slug,
+  variant,
+  body,
+  categories,
+  author,
+  price = 0,
+  commission,
+  isGlobal = false,
+  feeType,
+  docs,
+  website,
+  email,
+  tos,
+  privacy,
+  isProOnly,
+  images,
+}: Parameters<typeof App>[0]) => {
+  const { t } = useLocale();
+  const hasImages = images && images.length > 0;
+  const router = useRouter();
+
+  const mutation = useAddAppMutation(null, {
+    onSuccess: () => {
+      showToast(t("app_successfully_installed"), "success");
+    },
+    onError: (error) => {
+      if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
+    },
+  });
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
+  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
+    onSuccess(data) {
+      setExistingCredentials(data);
+    },
+  });
+
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+
+  return (
+    <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
+      {hasImages && (
+        <div className="flex-2 mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100  p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:rounded-md">
+          {images ? (
+            images.map((img) => (
+              <img
+                key={img}
+                src={img}
+                alt={`Screenshot of app ${name}`}
+                className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
+              />
+            ))
+          ) : (
+            <SkeletonText />
+          )}
+        </div>
+      )}
+      <div
+        className={classNames(
+          "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
+          hasImages && "lg:ml-8"
+        )}>
+        <div className="mb-8 flex pt-4">
+          <header>
+            <div className="mb-4 flex items-center">
+              <img className="min-h-16 min-w-16 h-16 w-16" src={logo} alt={name} />
+              <h1 className="font-cal ml-4 text-3xl text-gray-900">{name}</h1>
+            </div>
+            <h2 className="text-sm font-medium text-gray-600">
+              <Link href={`categories/${categories[0]}`}>
+                <a className="rounded-md bg-gray-100 p-1 text-xs capitalize text-gray-800">{categories[0]}</a>
+              </Link>{" "}
+              • {t("published_by", { author })}
+            </h2>
+          </header>
+        </div>
+        {!appCredentials.isLoading ? (
+          isGlobal ||
+          (existingCredentials.length > 0 && allowedMultipleInstalls ? (
+            <div className="flex space-x-3">
+              <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+                {existingCredentials.length > 0
+                  ? t("active_install", { count: existingCredentials.length })
+                  : t("default")}
+              </Button>
+              {!isGlobal && (
+                <InstallAppButton
+                  type={type}
+                  isProOnly={isProOnly}
+                  render={({ useDefaultComponent, ...props }) => {
+                    if (useDefaultComponent) {
+                      props = {
+                        onClick: () => {
+                          mutation.mutate({ type, variant, slug });
+                        },
+                        loading: mutation.isLoading,
+                      };
+                    }
+                    return (
+                      <Button
+                        StartIcon={Icon.FiPlus}
+                        {...props}
+                        // @TODO: Overriding color and size prevent us from
+                        // having to duplicate InstallAppButton for now.
+                        color="primary"
+                        size="base"
+                        data-testid="install-app-button">
+                        {t("install_another")}
+                      </Button>
+                    );
+                  }}
+                />
+              )}
+            </div>
+          ) : existingCredentials.length > 0 ? (
+            <DisconnectIntegration
+              label={t("disconnect")}
+              credentialId={existingCredentials[0]}
+              onSuccess={() => {
+                router.replace("/apps/installed");
+              }}
+            />
+          ) : (
+            <InstallAppButton
+              type={type}
+              isProOnly={isProOnly}
+              render={({ useDefaultComponent, ...props }) => {
+                if (useDefaultComponent) {
+                  props = {
+                    onClick: () => {
+                      mutation.mutate({ type, variant, slug });
+                    },
+                    loading: mutation.isLoading,
+                  };
+                }
+                return (
+                  <Button
+                    data-testid="install-app-button"
+                    {...props}
+                    // @TODO: Overriding color and size prevent us from
+                    // having to duplicate InstallAppButton for now.
+                    color="primary"
+                    size="base">
+                    {t("install_app")}
+                  </Button>
+                );
+              }}
+            />
+          ))
+        ) : (
+          <SkeletonButton className="h-10 w-24" />
+        )}
+        {price !== 0 && (
+          <span className="block text-right">
+            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
+            {feeType === "monthly" && "/" + t("month")}
+          </span>
+        )}
+
+        <div className="prose prose-sm mt-8">{body}</div>
+        <h4 className="mt-8 font-semibold text-gray-900 ">{t("pricing")}</h4>
+        <span>
+          {price === 0 ? (
+            "Free"
+          ) : (
+            <>
+              {Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "USD",
+                useGrouping: false,
+              }).format(price)}
+              {feeType === "monthly" && "/" + t("month")}
+            </>
+          )}
+        </span>
+
+        <h4 className="mt-8 mb-2 font-semibold text-gray-900 ">{t("learn_more")}</h4>
+        <ul className="prose-sm -ml-1 -mr-1 leading-5">
+          {docs && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="text-sm font-normal text-black no-underline hover:underline"
+                href={docs}>
+                <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                {t("documentation")}
+              </a>
+            </li>
+          )}
+          {website && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={website}>
+                <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {website.replace("https://", "")}
+              </a>
+            </li>
+          )}
+          {email && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={"mailto:" + email}>
+                <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+
+                {email}
+              </a>
+            </li>
+          )}
+          {tos && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={tos}>
+                <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("terms_of_service")}
+              </a>
+            </li>
+          )}
+          {privacy && (
+            <li>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                className="font-normal text-black no-underline hover:underline"
+                href={privacy}>
+                <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                {t("privacy_policy")}
+              </a>
+            </li>
+          )}
+        </ul>
+        <hr className="my-8" />
+        <span className="leading-1 block text-xs text-gray-500">{t("every_app_published")}</span>
+        <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
+          <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default function App(props: {
+  name: string;
+  type: AppType["type"];
+  isGlobal?: AppType["isGlobal"];
+  logo: string;
+  slug: string;
+  variant: string;
+  body: React.ReactNode;
+  categories: string[];
+  author: string;
+  pro?: boolean;
+  price?: number;
+  commission?: number;
+  feeType?: AppType["feeType"];
+  docs?: string;
+  website?: string;
+  email: string; // required
+  tos?: string;
+  privacy?: string;
+  licenseRequired: AppType["licenseRequired"];
+  isProOnly: AppType["isProOnly"];
+  images?: string[];
+}) {
+  const { t } = useLocale();
+
+  return (
+    <Shell large isPublic heading={t("app_store")} backPath="/apps">
+      {props.licenseRequired ? (
+        <LicenseRequired>
+          <Component {...props} />
+        </LicenseRequired>
+      ) : (
+        <Component {...props} />
+      )}
+    </Shell>
+  );
+}

apps/web/components/v2/apps/CalendarListContainer.tsx

@@ -0,0 +1,332 @@
+import { useMutation } from "@tanstack/react-query";
+import Link from "next/link";
+import { Fragment } from "react";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { trpc } from "@calcom/trpc/react";
+import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
+import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader";
+import { Alert, EmptyScreen } from "@calcom/ui/v2";
+import { List } from "@calcom/ui/v2/core/List";
+import { ShellSubHeading } from "@calcom/ui/v2/core/Shell";
+import Switch from "@calcom/ui/v2/core/Switch";
+import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration";
+
+import { QueryCell } from "@lib/QueryCell";
+
+import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
+import AdditionalCalendarSelector from "@components/v2/apps/AdditionalCalendarSelector";
+import DestinationCalendarSelector from "@components/v2/apps/DestinationCalendarSelector";
+import IntegrationListItem from "@components/v2/apps/IntegrationListItem";
+
+type Props = {
+  onChanged: () => unknown | Promise<unknown>;
+  fromOnboarding?: boolean;
+  destinationCalendarId?: string;
+};
+
+function CalendarSwitch(props: {
+  type: string;
+  externalId: string;
+  title: string;
+  defaultSelected: boolean;
+  destination?: boolean;
+}) {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const mutation = useMutation<
+    unknown,
+    unknown,
+    {
+      isOn: boolean;
+    }
+  >(
+    async ({ isOn }) => {
+      const body = {
+        integration: props.type,
+        externalId: props.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 "${props.title}""`, "error");
+      },
+    }
+  );
+  return (
+    <div className="flex py-1">
+      <Switch
+        key={props.externalId}
+        name="enabled"
+        label={props.title}
+        defaultChecked={props.defaultSelected}
+        onCheckedChange={(isOn: boolean) => {
+          mutation.mutate({ isOn });
+        }}
+      />
+      {!!props.destination && (
+        <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
+          <Icon.FiArrowLeft className="h-4 w-4" />
+          {t("adding_events_to")}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function CalendarList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <List>
+          {data.items.map((item) => (
+            <IntegrationListItem
+              name={item.name}
+              slug={item.slug}
+              key={item.title}
+              title={item.title}
+              logo={item.logo}
+              description={item.description}
+              actions={
+                <InstallAppButton
+                  type={item.type}
+                  render={(buttonProps) => (
+                    <Button color="secondary" {...buttonProps}>
+                      {t("connect")}
+                    </Button>
+                  )}
+                  onChanged={() => props.onChanged()}
+                />
+              }
+            />
+          ))}
+        </List>
+      )}
+    />
+  );
+}
+
+function ConnectedCalendarsList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
+  const { fromOnboarding } = props;
+  return (
+    <QueryCell
+      query={query}
+      empty={() => null}
+      success={({ data }) => {
+        if (!data.connectedCalendars.length) {
+          return null;
+        }
+        return (
+          <List className="flex flex-col gap-6" noBorderTreatment>
+            {data.connectedCalendars.map((item) => (
+              <Fragment key={item.credentialId}>
+                {item.calendars ? (
+                  <IntegrationListItem
+                    slug={item.integration.slug}
+                    title={item.integration.title}
+                    logo={item.integration.logo}
+                    description={item.primary?.externalId || "No external Id"}
+                    actions={
+                      <div className="flex w-32 justify-end">
+                        <DisconnectIntegration
+                          credentialId={item.credentialId}
+                          trashIcon
+                          onSuccess={props.onChanged}
+                          buttonProps={{ className: "border border-gray-300" }}
+                        />
+                      </div>
+                    }>
+                    {!fromOnboarding && (
+                      <>
+                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
+                        <ul className="space-y-2 p-4">
+                          {item.calendars.map((cal) => (
+                            <CalendarSwitch
+                              key={cal.externalId}
+                              externalId={cal.externalId}
+                              title={cal.name || "Nameless calendar"}
+                              type={item.integration.type}
+                              defaultSelected={cal.isSelected}
+                              destination={cal.externalId === props.destinationCalendarId}
+                            />
+                          ))}
+                        </ul>
+                      </>
+                    )}
+                  </IntegrationListItem>
+                ) : (
+                  <Alert
+                    severity="warning"
+                    title={t("something_went_wrong")}
+                    message={
+                      <span>
+                        <Link href={"/apps/" + item.integration.slug}>{item.integration.name}</Link>:{" "}
+                        {t("calendar_error")}
+                      </span>
+                    }
+                    iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
+                    actions={
+                      <div className="flex w-32 justify-end md:pr-1">
+                        <DisconnectIntegration
+                          credentialId={item.credentialId}
+                          trashIcon
+                          onSuccess={props.onChanged}
+                          buttonProps={{ className: "border border-gray-300" }}
+                        />
+                      </div>
+                    }
+                  />
+                )}
+              </Fragment>
+            ))}
+          </List>
+        );
+      }}
+    />
+  );
+}
+
+export function CalendarListContainer(props: { heading?: boolean; fromOnboarding?: boolean }) {
+  const { t } = useLocale();
+  const { heading = true, fromOnboarding } = props;
+  const utils = trpc.useContext();
+  const onChanged = () =>
+    Promise.allSettled([
+      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
+        exact: true,
+      }),
+      utils.invalidateQueries(["viewer.connectedCalendars"]),
+    ]);
+  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const installedCalendars = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: true },
+  ]);
+  const mutation = trpc.useMutation("viewer.setDestinationCalendar", {
+    onSuccess: () => {
+      utils.invalidateQueries(["viewer.connectedCalendars"]);
+    },
+  });
+  return (
+    <QueryCell
+      query={query}
+      customLoader={<SkeletonLoader />}
+      success={({ data }) => {
+        return (
+          <>
+            {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
+              <>
+                {heading && (
+                  <div className="flex flex-col gap-6 rounded-md border border-gray-200 p-7">
+                    <ShellSubHeading
+                      title={t("calendar")}
+                      subtitle={t("installed_app_calendar_description")}
+                      className="mb-0 flex flex-wrap items-center gap-4 md:mb-3 md:gap-0"
+                      actions={
+                        <div className="flex flex-col xl:flex-row xl:space-x-5">
+                          {!!data.connectedCalendars.length && (
+                            <div className=" flex items-center">
+                              <AdditionalCalendarSelector isLoading={mutation.isLoading} />
+                            </div>
+                          )}
+                        </div>
+                      }
+                    />
+                    <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
+                      <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
+                        <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
+                          <Icon.FiCalendar className="h-8 w-8" strokeWidth="1" />
+                          <Icon.FiPlus
+                            className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
+                            strokeWidth="4"
+                          />
+                        </div>
+                        <div className="md:w-6/12">
+                          <h1 className="text-sm font-semibold">{t("create_events_on")}</h1>
+                          <p className="text-sm font-normal">{t("set_calendar")}</p>
+                        </div>
+                        <div className="flex justify-end md:w-6/12">
+                          <DestinationCalendarSelector
+                            onChange={mutation.mutate}
+                            hidePlaceholder
+                            isLoading={mutation.isLoading}
+                            value={data.destinationCalendar?.externalId}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                    <ConnectedCalendarsList
+                      onChanged={onChanged}
+                      fromOnboarding={fromOnboarding}
+                      destinationCalendarId={data.destinationCalendar?.externalId}
+                    />
+                  </div>
+                )}
+              </>
+            ) : fromOnboarding ? (
+              <>
+                {!!query.data?.connectedCalendars.length && (
+                  <ShellSubHeading
+                    className="mt-4"
+                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
+                  />
+                )}
+                <CalendarList onChanged={onChanged} />
+              </>
+            ) : (
+              <EmptyScreen
+                Icon={Icon.FiCalendar}
+                headline={t("no_category_apps", {
+                  category: t("calendar").toLowerCase(),
+                })}
+                description={t(`no_category_apps_description_calendar`)}
+                buttonRaw={
+                  <Button color="secondary" href="/apps/categories/calendar">
+                    {t(`connect_calendar_apps`)}
+                  </Button>
+                }
+              />
+            )}
+          </>
+        );
+      }}
+    />
+  );
+}

apps/web/components/v2/apps/DestinationCalendarSelector.tsx

@@ -0,0 +1,149 @@
+import classNames from "classnames";
+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 {
+  onChange: (value: { externalId: string; integration: string }) => void;
+  isLoading?: boolean;
+  hidePlaceholder?: boolean;
+  /** The external Id of the connected calendar */
+  value: string | undefined;
+  destinationCalendar?: DestinationCalendar | null;
+}
+
+const DestinationCalendarSelector = ({
+  onChange,
+  isLoading,
+  value,
+  hidePlaceholder,
+  destinationCalendar,
+}: Props): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
+
+  // Extra styles to show prefixed text in react-select
+  const content = (hidePlaceholder = false) => {
+    if (!hidePlaceholder) {
+      return {
+        alignItems: "center",
+        display: "flex",
+        ":before": {
+          content: `'${t("select_destination_calendar")}:'`,
+          display: "block",
+          marginRight: 8,
+        },
+      };
+    }
+    return {};
+  };
+
+  useEffect(() => {
+    const selected = query.data?.connectedCalendars
+      .map((connected) => connected.calendars ?? [])
+      .flat()
+      .find((cal) => cal.externalId === value);
+
+    if (selected) {
+      setSelectedOption({
+        value: `${selected.integration}:${selected.externalId}`,
+        label: `${selected.name} (${selected.externalId})` || "",
+      });
+    }
+  }, [query.data?.connectedCalendars, value]);
+
+  if (!query.data?.connectedCalendars.length) {
+    return null;
+  }
+  const options =
+    query.data.connectedCalendars.map((selectedCalendar) => ({
+      key: selectedCalendar.credentialId,
+      label: `${selectedCalendar.integration.title} (${selectedCalendar.primary?.name})`,
+      options: (selectedCalendar.calendars ?? [])
+        .filter((cal) => cal.readOnly === false)
+        .map((cal) => ({
+          label: `${cal.name} (${cal.externalId})` || "",
+          value: `${cal.integration}:${cal.externalId}`,
+        })),
+    })) ?? [];
+  const defaultCalendarSelectedString = destinationCalendar?.externalId
+    ? `(${
+        destinationCalendar.externalId.length > 15
+          ? destinationCalendar.externalId.substring(0, 15) + "..."
+          : destinationCalendar.externalId
+      })`
+    : "";
+  return (
+    <div
+      className="relative flex items-center"
+      title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
+      <Select
+        name="primarySelectedCalendar"
+        placeholder={
+          !hidePlaceholder ? (
+            `${t("select_destination_calendar")}`
+          ) : (
+            <span className="whitespace-nowrap">
+              {t("default_calendar_selected")} {defaultCalendarSelectedString}
+            </span>
+          )
+        }
+        options={options}
+        styles={{
+          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          option: (defaultStyles, state) => ({
+            ...defaultStyles,
+            backgroundColor: state.isSelected
+              ? state.isFocused
+                ? "var(--brand-color)"
+                : "var(--brand-color)"
+              : state.isFocused
+              ? "var(--brand-color-dark-mode)"
+              : "var(--brand-text-color)",
+          }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "6px",
+              "@media only screen and (min-width: 640px)": {
+                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                width: "100%",
+              },
+            };
+          },
+        }}
+        isSearchable={false}
+        className={classNames(
+          "block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
+          !hidePlaceholder && "font-medium"
+        )}
+        onChange={(option) => {
+          setSelectedOption(option);
+          if (!option) {
+            return;
+          }
+
+          /* Split only the first `:`, since Apple uses the full URL as externalId */
+          const [integration, externalId] = option.value.split(/:(.+)/);
+
+          onChange({
+            integration,
+            externalId,
+          });
+        }}
+        isLoading={isLoading}
+        value={selectedOption}
+        components={{
+          IndicatorSeparator: () => null,
+        }}
+      />
+    </div>
+  );
+};
+
+export default DestinationCalendarSelector;