v2.0.2

Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

.env.appStore.example

@@ -87,4 +87,17 @@ 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
+# @see <https://open.larksuite.com/document/ukTMukTMukTM/ukDNz4SO0MjL5QzM/g>
+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

@@ -21,7 +21,7 @@ CALCOM_LICENSE_KEY=
 # ***********************************************************************************************************
 
 # - DATABASE ************************************************************************************************
-# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
+DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
 # ***********************************************************************************************************
 
 # - SHARED **************************************************************************************************
@@ -46,13 +46,12 @@ PGSSLMODE=
 # @see: https://github.com/calendso/calendso/issues/263
 # @see: https://next-auth.js.org/configuration/options#nextauth_url
 # Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
-# NEXTAUTH_URL='http://localhost:3000'
+NEXTAUTH_URL='http://localhost:3000'
-NEXTAUTH_URL=
 # @see: https://next-auth.js.org/configuration/options#nextauth_secret
 # You can use: `openssl rand -base64 32` to generate one
 NEXTAUTH_SECRET=
 # Used for cross-domain cookie authentication
-NEXTAUTH_COOKIE_DOMAIN=.example.com
+NEXTAUTH_COOKIE_DOMAIN=
 
 # Set this to '1' if you don't want Cal to collect anonymous usage
 CALCOM_TELEMETRY_DISABLED=
@@ -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=
@@ -130,3 +131,9 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 
 # Set the following value to true if you wish to enable Team Impersonation
 NEXT_PUBLIC_TEAM_IMPERSONATION=false
+
+# Close.com internal CRM
+CLOSECOM_API_KEY=
+
+# Sendgrid internal email sender
+SENDGRID_API_KEY=

.github/PULL_REQUEST_TEMPLATE.md

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

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

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

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

@@ -12,41 +12,20 @@ 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:
-  check-if-ui-has-changed:
-    runs-on: ubuntu-latest
-    # Declare outputs for next jobs
-    outputs:
-      docs_changed: ${{ steps.check_file_changed.outputs.docs_changed }}
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        # Checkout as many commits as needed for the diff
-        fetch-depth: 2
-    - shell: pwsh
-      id: check_file_changed
-      run: |
-        # Diff HEAD with the previous commit
-        $diff = git diff --name-only HEAD^ HEAD
-
-        # Check if a file under /packages/ui or apps/storybook has been modified since the previous commit
-        $SourceDiff = $diff | Where-Object { $_ -match '^packages/ui/' -or $_ -match '^apps/storybook/' }
-        $HasDiff = $SourceDiff.Length -gt 0
-
-        # Set the output named "hasUiChanges"
-        Write-Host "::set-output name=hasUiChanges::$HasDiff"
   chromatic-deployment:
     runs-on: ubuntu-latest
-    needs: [ check-if-ui-has-changed ]
-    if: needs.checkIfUiHasChanged.outputs.hasUiChanges== 'True'
     steps:
       - name: Checkout repository
         uses: actions/checkout@v2
         with:
           ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
-          fetch-depth: 2
+          fetch-depth: 0
       - name: Install dependencies
         run: yarn
         # 👇 Adds Chromatic as a step in the workflow
@@ -56,3 +35,5 @@ jobs:
         with:
           # 👇 Chromatic projectToken, refer to the manage page to obtain it.
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: "apps/storybook"
+          buildScriptName: "build"

.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/cleanup-preview-databases.yml

@@ -0,0 +1,20 @@
+name: Cleanup Preview Databases
+
+env:
+  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
+  SNAPLET_PROJECT_ID: cl4u26bwz7962859ply7ibuo43t
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  delete:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: snaplet/action@v1
+        if: ${{ env.SNAPLET_ACCESS_TOKEN && env.SNAPLET_PROJECT_ID }}
+        with:
+          delete: true

.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
+      - name: crowdin action
-      uses: actions/checkout@v2
+        uses: crowdin/github-action@1.4.9
-
+        with:
-    - name: crowdin action
+          upload_translations: true
-      uses: crowdin/github-action@1.4.9
+          download_translations: true
-      with:
+        env:
-        upload_translations: true
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        download_translations: true
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
-      env:
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
-        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
+          name: test-results
-          path: packages/app-store/**/playwright/results
+          path: test-results

.github/workflows/e2e-embed.yml

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

.github/workflows/e2e.yml

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

.github/workflows/labeler.yml

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

.github/workflows/lint.yml

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

.github/workflows/required-checks.yml

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

.github/workflows/test.yml

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

.gitignore

@@ -2,6 +2,7 @@
 
 # .env file
 .env
+!packages/prisma/.env
 
 # dependencies
 node_modules

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2020-present Cal.com, Inc.
 
 Portions of this software are licensed as follows:
 
-* All content that resides under "apps/web/ee/" (https://github.com/calcom/cal.com/tree/main/apps/web/ee) directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
+* All content that resides under https://github.com/calcom/cal.com/tree/main/packages/features/ee directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the Cal.com Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 

README.md

@@ -26,6 +26,7 @@
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
+   <a href="https://status.cal.com"><img src="https://betteruptime.com/status-badges/v1/monitor/a9kf.svg" alt="Uptime"></a>
    <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
    <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
    <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
@@ -36,6 +37,8 @@
    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
    <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
    <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://github.com/orgs/calcom/projects/1/views/25"><img src="https://img.shields.io/badge/Help%20Wanted-Contribute-blue"></a>
+   <a href="https://cal.com/figma"><img src="https://img.shields.io/badge/Figma-Design%20System-blueviolet"></a>
    <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
    <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>
@@ -55,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)
 
@@ -84,7 +87,7 @@ To get a local copy up and running, please follow these simple steps.
 
 Here is what you need to be able to run Cal.
 
-- Node.js (Version: >=14.x <17)
+- Node.js (Version: >=15.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -112,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`
 
@@ -133,7 +139,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 #### Manual setup
 
-1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -201,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
@@ -260,12 +266,16 @@ yarn workspace @calcom/web playwright-report
 
 ### Docker
 
-The Docker configuration for Cal is an effort powered by people within the community. Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
+The Docker configuration for Cal is an effort powered by people within the community.
 
 If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32).
 
 The Docker configuration can be found [in our docker repository](https://github.com/calcom/docker).
 
+Issues with Docker? Find your answer or open a new discussion [here](https://github.com/calcom/docker/discussions) to ask the community.
+
+Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
+
 ### Heroku
 
 <a href="https://heroku.com/deploy?template=https://github.com/calcom/cal.com">
@@ -274,13 +284,15 @@ The Docker configuration can be found [in our docker repository](https://github.
 
 ### Railway
 
-[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https%3A%2F%2Fgithub.com%2Fcalendso%2Fcalendso&plugins=postgresql&envs=GOOGLE_API_CREDENTIALS%2CBASE_URL%2CNEXTAUTH_URL%2CPORT&BASE_URLDefault=http%3A%2F%2Flocalhost%3A3000&NEXTAUTH_URLDefault=http%3A%2F%2Flocalhost%3A3000&PORTDefault=3000)
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/cal)
 
 You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform.
 
 ### Vercel
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_SECRET,NEXTAUTH_URL,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT,CALCOM_LICENSE_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com)
+Currently Vercel Pro Plan is required to be able to Deploy this application with Vercel, due to limitations on the number of serverless functions on the free plan.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY,NEXT_PUBLIC_LICENSE_CONSENT&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
 
 <!-- ROADMAP -->
 
@@ -298,7 +310,7 @@ Please see our [contributing guide](/CONTRIBUTING.md).
 
 ### Good First Issues
 
-We have a list of [good first issues](https://github.com/calcom/cal.com/labels/✅%20good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
+We have a list of [help wanted](https://github.com/orgs/calcom/projects/1/views/25) that contain small features and bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
 
 ## Integrations
 
@@ -316,6 +328,23 @@ We have a list of [good first issues](https://github.com/calcom/cal.com/labels/
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
 
+#### _Adding google calendar to Cal.com App Store_
+
+After adding Google credentials, you can now Google Calendar App to the app store.
+You can repopulate the App store by running
+
+```
+cd packages/prisma
+yarn seed-app-store
+```
+
+You will need to complete a few more steps to activate Google Calendar App.
+Make sure to complete section "Obtaining the Google API Credentials". After the do the
+following
+
+1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
+1. Under 'OAuth concent screen', click "PUBLISH APP"
+
 ### Obtaining Microsoft Graph Client ID and Secret
 
 1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration

__checks__/calcom-dashboard.check.js

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

app.json

@@ -10,18 +10,73 @@
     }
   ],
   "env": {
-    "BASE_URL": {
+    "PGSSLMODE": {
+      "description": "If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then put 'no-verify' here.",
+      "value": "no-verify"
+    },
+    "NEXT_PUBLIC_WEBAPP_URL": {
       "description": "Replace HEROKU_APP_NAME with the name given to your app",
-      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+      "value": "https://HEROKU_APP_NAME.herokuapp.com",
+      "required": "true"
     },
     "CALENDSO_ENCRYPTION_KEY": {
       "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
-      "value": "secret"
+      "value": "secret",
+      "required": "true"
     },
-    "NEXTAUTH_SECRET": "secret",
     "NEXTAUTH_URL": {
       "description": "Replace HEROKU_APP_NAME with the name given to your app",
       "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    },
+    "NEXTAUTH_SECRET": {
+      "description": "Cookie encryption key",
+      "generator": "secret",
+      "required": "true"
+    },
+    "NEXT_PUBLIC_LICENSE_CONSENT": {
+      "description": "License consent",
+      "value": "true",
+      "required": "true"
+    },
+    "CRON_API_KEY": {
+      "description": "ApiKey for cronjobs",
+      "value": ""
+    },
+    "SEND_FEEDBACK_EMAIL": {
+      "description": "Send feedback email",
+      "value": ""
+    },
+    "SENDGRID_API_KEY": {
+      "description": "Sendgrid api key. Used for email reminders in workflows",
+      "value": ""
+    },
+    "SENDGRID_EMAIL": {
+      "description": "Sendgrid email. Used for email reminders in workflows",
+      "value": ""
+    },
+    "EMAIL_FROM": {
+      "description": "Configures the global From: header whilst sending emails",
+      "value": ""
+    },
+    "EMAIL_SERVER_HOST": {
+      "description": "Configures the global SMTP server host",
+      "value": "smtp.gmail.com"
+    },
+    "EMAIL_SERVER_PORT": {
+      "description": "Configures the global SMTP server port",
+      "value": "465"
+    },
+    "EMAIL_SERVER_USER": {
+      "description": "Configures the global SMTP server user",
+      "value": "<gmail_emailAddress>"
+    },
+    "EMAIL_SERVER_PASSWORD": {
+      "description": "Configures the global SMTP server password",
+      "value": "<gmail_app_password>"
+    },
+    "NEXT_PUBLIC_TEAM_IMPERSONATION": {
+      "description": "Set the following value to true if you wish to enable Team Impersonation",
+      "value": "false"
     }
   },
   "scripts": {

apps/docs/package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
-    "lint": "next lint",
+    "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
@@ -17,14 +17,14 @@
   "license": "MIT",
   "dependencies": {
     "iframe-resizer-react": "^1.1.0",
-    "next": "^12.2.0",
+    "next": "^12.2.5",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.15.0"
+    "eslint": "^8.22.0"
   }
 }

apps/docs/pages/developer/code-styling.mdx

@@ -10,10 +10,10 @@ We use a number of style guides written by other amazing companies, simply becau
 We don't expect you to study every single rule of each style guide, but these are great reference points as to how your code should be styled. We may reject a pull request if your code style significantly differs from these style guides however.
 
 ## ESLint & Prettier
-Calendso uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+Cal.com uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
 
 ## JavaScript/TypeScript
-We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and Typescript code.
+We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and TypeScript code.
 
 ## HTML & CSS
 We use the [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.

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

@@ -34,7 +34,6 @@ Here is what you need to be able to run Cal.
 
    ```sh
    cp apps/web/.env.example apps/web/.env
-   cp packages/prisma/.env.example packages/prisma/.env
    ```
 
 1. Install packages with yarn
@@ -54,7 +53,7 @@ yarn dx
 
 ### Manual setup
 
-1.  Configure database in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1.  Configure database in the `.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
         ```text
         DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'

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/.storybook/main.js

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

apps/storybook/.storybook/preview.js

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

apps/storybook/next-env.d.ts

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

apps/storybook/package.json

@@ -6,7 +6,7 @@
     "dev:next": "next dev",
     "build:next": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ignore-path .gitignore",
     "lint:report": "eslint . --format json --output-file ../../lint-results/storybook.json",
     "dev": "start-storybook -p 6006",
     "build": "build-storybook",
@@ -23,40 +23,42 @@
     "@radix-ui/react-radio-group": "^0.1.1",
     "@radix-ui/react-slider": "^0.1.1",
     "@radix-ui/react-switch": "^0.1.1",
-    "@radix-ui/react-tooltip": "^0.1.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
-    "next": "^12.2.0",
+    "next": "^12.2.5",
     "next-transpile-modules": "^9.0.0",
-    "react": "18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "18.1.0",
+    "react-dom": "^18.2.0",
-    "react-feather": "^2.0.9",
+    "react-feather": "^2.0.10",
-    "react-hot-toast": "^2.2.0"
+    "react-hot-toast": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
+    "@babel/core": "^7.18.10",
     "@calcom/config": "*",
-    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.10",
-    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/react": "^6.5.10",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@types/node": "16.9.1",
-    "@types/react": "18.0.9",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "18.0.4",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
-    "chromatic": "^6.6.4",
+    "chromatic": "^6.7.4",
-    "eslint": "^8.15.0",
+    "eslint": "^8.22.0",
-    "postcss": "^8.4.13",
+    "postcss": "^8.4.16",
     "postcss-loader": "^7.0.0",
     "storybook-addon-designs": "^6.3.1",
     "storybook-addon-next": "^1.6.7",
-    "tailwindcss": "^3.1.3",
+    "tailwindcss": "^3.1.8",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4"
+    "typescript": "^4.7.4"
   },
   "readme": "ERROR: No README data found!",
   "_id": "@calcom/storybook@0.1.0"

apps/storybook/stories/Avatar.stories.tsx

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

apps/storybook/stories/AvatarGroup.stories.tsx

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

apps/storybook/stories/Badge.stories.tsx

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

apps/storybook/stories/Banner.stories.tsx

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

apps/storybook/stories/Breadcrumb.stories.tsx

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

apps/storybook/stories/Button.stories.tsx

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

apps/storybook/stories/ButtonGroup.stories.tsx

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

apps/storybook/stories/Cards.stories.tsx

@@ -0,0 +1,79 @@
+import { ComponentMeta } from "@storybook/react";
+import { useState } from "react";
+
+import Card, { BaseCardProps } from "@calcom/ui/v2/core/Card";
+
+export default {
+  title: "Cards",
+  component: Card,
+} as ComponentMeta<typeof Card>;
+
+const profileProps: BaseCardProps[] = [
+  {
+    variant: "ProfileCard",
+    title: "Alex Fisher",
+    image:
+      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
+    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
+  },
+  {
+    variant: "ProfileCard",
+    title: "Julian Wan",
+    image:
+      "https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1760&q=80",
+    description: "Co-founder at Attio. Book a meeting to discuss enterprise deals.",
+  },
+];
+
+export const Profile = () => {
+  return (
+    <div className="flex w-full space-x-2 bg-gray-200 p-4">
+      <Card {...profileProps[0]} />
+      <Card {...profileProps[1]} />
+    </div>
+  );
+};
+
+const appStoreProps: BaseCardProps = {
+  variant: "AppStore",
+  title: "Giphy",
+  image: "https://app.cal.com/api/app-store/giphy/icon.svg",
+  description: "Add GIFs to spice up your booking confirmations.",
+  actionButton: {
+    href: "#",
+    child: "View Details",
+  },
+};
+
+export const AppStore = () => {
+  return (
+    <div className="w-full bg-gray-200 p-4">
+      <Card {...appStoreProps} />
+    </div>
+  );
+};
+
+const sidebarCardProps: BaseCardProps = {
+  variant: "SidebarCard",
+  thumbnailUrl: "https://img.youtube.com/vi/60HJt8DOVNo/0.jpg",
+  mediaLink: "https://www.youtube.com/watch?v=60HJt8DOVNo",
+  title: "Dynamic boooking links",
+  description: "Booking link that allows people to quickly schedule meetings.",
+  learnMore: {
+    href: "https://cal.com/blog/cal-v-1-9",
+    text: "Learn more",
+  },
+};
+
+export const SidebarCard = () => {
+  const [visible, setVisible] = useState(true); // save state in localStorage, cookie or db
+  return (
+    <header className="w-full max-w-[225px] bg-gray-100 p-3">
+      {visible && (
+        <div>
+          <Card {...sidebarCardProps} actionButton={{ onClick: () => setVisible(false), child: "Dismiss" }} />
+        </div>
+      )}
+    </header>
+  );
+};

apps/storybook/stories/Checkbox.stories.tsx

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

apps/storybook/stories/Colors.stories.tsx

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

apps/storybook/stories/DatePicker.stories.tsx

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

apps/storybook/stories/DateRangePicker.stories.tsx

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

apps/storybook/stories/EmptyScreen.stories.tsx

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

apps/storybook/stories/FormStep.stories.tsx

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

apps/storybook/stories/HorizontalTab.stories.tsx

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

apps/storybook/stories/Input.stories.tsx

@@ -1,8 +1,9 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Copy } from "react-feather";
 
-import DatePicker from "@calcom/ui/v2/form/DatePicker";
+import { TextAreaField, TextField, PasswordField } from "@calcom/ui/v2/core/form/fields";
-import { TextAreaField, TextField } from "@calcom/ui/v2/form/fields";
+import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 export default {
   title: "Inputs",
@@ -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/Modal.stories.tsx

@@ -1,9 +1,7 @@
 import { useState } from "react";
 import { Info } from "react-feather";
 
-import { Button } from "@calcom/ui/v2";
+import { Button, Dialog, DialogContent, DialogTrigger, TextField } from "@calcom/ui/v2";
-import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/v2/Dialog";
-import { TextField } from "@calcom/ui/v2/form/fields";
 
 export default {
   title: "pattern/Modal",

apps/storybook/stories/Notifcations.stories.tsx

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

apps/storybook/stories/PageHeader.stories.tsx

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

apps/storybook/stories/Radio.stories.tsx

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

apps/storybook/stories/Select.stories.tsx

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

apps/storybook/stories/TabItem.stories.tsx

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

apps/storybook/stories/VerticalTab.stories.tsx

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

apps/storybook/styles/globals.css

@@ -2,12 +2,13 @@
 @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;
   --brand-color-dark-mode: #fafafa;
   --brand-text-color-dark-mode: #292929;
   font-family: 'Inter', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }

apps/swagger/package.json

@@ -6,24 +6,24 @@
     "build": "next build",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4200 next dev",
-    "lint": "next lint",
+    "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/swagger.json",
     "start": "PORT=4200 next start"
   },
   "dependencies": {
-    "highlight.js": "^11.5.1",
+    "highlight.js": "^11.6.0",
     "isarray": "2.0.5",
-    "next": "12.2.0",
+    "next": "^12.2.5",
     "openapi-snippet": "^0.13.0",
-    "react": "18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "18.1.0",
+    "react-dom": "^18.2.0",
     "swagger-ui-react": "4.11.1"
   },
   "devDependencies": {
     "@types/node": "16.9.1",
-    "@types/react": "18.0.9",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "18.0.4",
-    "typescript": "4.6.4"
+    "typescript": "^4.7.4"
   }
 }

apps/web/.gitignore

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

apps/web/calendso.yaml

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

@@ -1,7 +1,7 @@
-import { XIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                <Icon.FiX className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AdditionalCalendarSelector.tsx

@@ -45,7 +45,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         const options = data.items.map((item) => ({
           label: item.name,
           slug: item.slug,
-          image: item.imageSrc,
+          image: item.logo,
           type: item.type,
         }));
         return (
@@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               },
             }}
             isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 font-medium text-gray-700 sm:text-sm"
+            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />

apps/web/components/App.tsx

@@ -1,28 +1,20 @@
-import {
-  BookOpenIcon,
-  CheckIcon,
-  DocumentTextIcon,
-  ExternalLinkIcon,
-  FlagIcon,
-  MailIcon,
-  PlusIcon,
-  ShieldCheckIcon,
-} from "@heroicons/react/outline";
-import { ChevronLeftIcon } from "@heroicons/react/solid";
 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";
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
-import LicenseRequired from "@ee/components/LicenseRequired";
+import { Icon } from "@calcom/ui/Icon";
+import Shell from "@calcom/ui/Shell";
+import Badge from "@calcom/ui/v2/core/Badge";
 
-import Shell from "@components/Shell";
+import DisconnectIntegration from "@components/integrations/DisconnectIntegration";
-import Badge from "@components/ui/Badge";
 
 const Component = ({
   name,
@@ -43,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");
@@ -59,42 +58,22 @@ const Component = ({
     currency: "USD",
     useGrouping: false,
   }).format(price);
-  const [installedAppCount, setInstalledAppCount] = useState(0);
+
-  const [isLoading, setIsLoading] = useState(true);
+  const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
-  useEffect(() => {
+  const appCredentials = trpc.useQuery(["viewer.appCredentialsByType", { appType: type }], {
-    async function getInstalledApp(appCredentialType: string) {
+    onSuccess(data) {
-      const queryParam = new URLSearchParams();
+      setExistingCredentials(data);
-      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 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">
-            <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
+            <Icon.FiChevronLeft className="h-5 w-5" /> {t("browse_apps")}
           </a>
         </Link>
         <div className="items-center justify-between py-4 sm:flex sm:py-8">
@@ -103,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 })}
@@ -116,12 +90,13 @@ const Component = ({
           </div>
 
           <div className="mt-4 sm:mt-0 sm:text-right">
-            {!isLoading ? (
+            {!appCredentials.isLoading ? (
-              isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+              isGlobal ||
+              (existingCredentials.length > 0 && allowedMultipleInstalls ? (
                 <div className="flex space-x-3">
-                  <Button StartIcon={CheckIcon} color="secondary" disabled>
+                  <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
-                    {installedAppCount > 0
+                    {existingCredentials.length > 0
-                      ? t("active_install", { count: installedAppCount })
+                      ? t("active_install", { count: existingCredentials.length })
                       : t("globally_install")}
                   </Button>
                   {!isGlobal && (
@@ -138,7 +113,7 @@ const Component = ({
                           };
                         }
                         return (
-                          <Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
+                          <Button StartIcon={Icon.FiPlus} {...props} data-testid="install-app-button">
                             {t("add_another")}
                           </Button>
                         );
@@ -146,10 +121,16 @@ const Component = ({
                     />
                   )}
                 </div>
-              ) : installedAppCount > 0 ? (
+              ) : existingCredentials.length > 0 ? (
-                <Button color="secondary" disabled title="App already installed">
+                <DisconnectIntegration
-                  {t("installed")}
+                  id={existingCredentials[0]}
-                </Button>
+                  render={(btnProps) => (
+                    <Button {...btnProps} color="warn" data-testid={type + "-integration-disconnect-button"}>
+                      {t("disconnect")}
+                    </Button>
+                  )}
+                  onOpenChange={handleOpenChange}
+                />
               ) : (
                 <InstallAppButton
                   type={type}
@@ -170,7 +151,7 @@ const Component = ({
                     );
                   }}
                 />
-              )
+              ))
             ) : (
               <SkeletonButton width="24" height="10" />
             )}
@@ -182,8 +163,6 @@ const Component = ({
             )}
           </div>
         </div>
-        {/* reintroduce once we show permissions and features
-  <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
       </div>
 
       <div className="justify-between px-8 py-10 md:flex">
@@ -223,7 +202,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={docs}>
-                  <BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
+                  <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4" />
                   {t("documentation")}
                 </a>
               </li>
@@ -235,7 +214,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={website}>
-                  <ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4" />
                   {website.replace("https://", "")}
                 </a>
               </li>
@@ -247,7 +226,8 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={"mailto:" + email}>
-                  <MailIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4" />
+
                   {email}
                 </a>
               </li>
@@ -259,7 +239,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={tos}>
-                  <DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4" />
                   {t("terms_of_service")}
                 </a>
               </li>
@@ -271,7 +251,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={privacy}>
-                  <ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4" />
                   {t("privacy_policy")}
                 </a>
               </li>
@@ -284,7 +264,7 @@ const Component = ({
             published by Cal.com. If you encounter inappropriate content or behaviour please report it.
           </small>
           <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-            <FlagIcon className="inline h-3 w-3" /> Report App
+            <Icon.FiFlag className="inline h-3 w-3" /> Report App
           </a>
         </div>
       </div>

apps/web/components/AppsShell.tsx

@@ -19,9 +19,7 @@ export default function AppsShell({ children }: { children: React.ReactNode }) {
 
   return (
     <>
-      <div className="mb-12 block lg:hidden">
+      <div className="mb-12 block lg:hidden">{status === "authenticated" && <NavTabs tabs={tabs} />}</div>
-        {status === "authenticated" && <NavTabs tabs={tabs} linkProps={{ shallow: true }} />}
-      </div>
       <main className="pb-6">{children}</main>
     </>
   );

apps/web/components/DestinationCalendarSelector.tsx

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

apps/web/components/Embed.tsx

@@ -1,21 +1,17 @@
-import { ArrowLeftIcon, ChevronRightIcon, CodeIcon, EyeIcon, SunIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
-import { useRouter } from "next/router";
+import { 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 { Icon } from "@calcom/ui/Icon";
-import { EventType } from "@calcom/prisma/client";
-import { trpc } from "@calcom/trpc/react";
-import { Button, Switch } from "@calcom/ui";
-import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
+import { 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";
 
@@ -40,7 +36,7 @@ type PreviewState = {
     brandColor: string;
   };
 };
-const queryParamsForDialog = ["embedType", "tabName", "eventTypeId"];
+const queryParamsForDialog = ["embedType", "embedTabName", "embedUrl"];
 
 const getDimension = (dimension: string) => {
   if (dimension.match(/^\d+$/)) {
@@ -49,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
@@ -224,7 +237,11 @@ const getEmbedTypeSpecificString = ({
   if (!frameworkCodes) {
     throw new Error(`No code available for the framework:${embedFramework}`);
   }
-  let uiInstructionStringArg = undefined;
+  let uiInstructionStringArg: {
+    apiName: string;
+    theme: PreviewState["theme"];
+    brandColor: string;
+  };
   if (embedFramework === "react") {
     uiInstructionStringArg = {
       apiName: "cal",
@@ -451,8 +468,8 @@ const embeds: {
 const tabs = [
   {
     name: "HTML",
-    tabName: "embed-code",
+    href: "embedTabName=embed-code",
-    icon: CodeIcon,
+    icon: Icon.FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -474,7 +491,8 @@ const tabs = [
             data-testid="embed-code"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-code"
-            className="h-[calc(100%-50px)]"
+            className="h-[calc(100%-50px)] font-mono"
+            style={{ resize: "none", overflow: "auto" }}
             readOnly
             value={
               `<!-- Cal ${embedType} embed code begins -->\n` +
@@ -501,8 +519,8 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   },
   {
     name: "React",
-    tabName: "embed-react",
+    href: "embedTabName=embed-react",
-    icon: CodeIcon,
+    icon: Icon.FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -522,8 +540,9 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-react"
-            className="h-[calc(100%-50px)]"
+            className="h-[calc(100%-50px)] font-mono"
             readOnly
+            style={{ resize: "none", overflow: "auto" }}
             value={`/* First make sure that you have installed the package */
 
 /* If you are using yarn */
@@ -540,12 +559,12 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   },
   {
     name: "Preview",
-    tabName: "embed-preview",
+    href: "embedTabName=embed-preview",
-    icon: EyeIcon,
+    icon: Icon.FiTrello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
-      { calLink: string; embedType: EmbedType }
+      { calLink: string; embedType: EmbedType; previewState: PreviewState }
     >(function Preview({ calLink, embedType }, ref) {
       if (ref instanceof Function || !ref) {
         return null;
@@ -557,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}`}
@@ -577,7 +596,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <SunIcon className="h-[32px] w-[32px] text-gray-500" />
+      <Icon.FiSun className="ml-2 h-4 w-4 text-gray-500" />
       {children}
     </components.Control>
   );
@@ -587,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")}
@@ -596,18 +615,15 @@ const ChooseEmbedTypesDialogContent = () => {
           <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
         </div>
       </div>
-      <div className="flex">
+      <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="mr-2 w-1/3 p-3 text-left hover:rounded-md hover:border hover:bg-neutral-100"
+            className="mr-2 w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100"
             key={index}
             data-testid={embed.type}
             onClick={() => {
-              router.push({
+              goto(router, {
-                query: {
+                embedType: embed.type,
-                  ...router.query,
-                  embedType: embed.type,
-                },
               });
             }}>
             <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
@@ -623,15 +639,22 @@ const ChooseEmbedTypesDialogContent = () => {
 };
 
 const EmbedTypeCodeAndPreviewDialogContent = ({
-  eventTypeId,
   embedType,
+  embedUrl,
 }: {
-  eventTypeId: EventType["id"];
   embedType: EmbedType;
+  embedUrl: string;
 }) => {
   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")
@@ -642,13 +665,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   const refOfEmbedCodesRefs = useRef(embedCodeRefs);
   const embed = embeds.find((embed) => embed.type === embedType);
 
-  const { data: eventType, isLoading } = trpc.useQuery([
-    "viewer.eventTypes.get",
-    {
-      id: +eventTypeId,
-    },
-  ]);
-
   const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true);
   const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true);
   const [previewState, setPreviewState] = useState({
@@ -665,43 +681,22 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   });
 
   const close = () => {
-    const noPopupQuery = {
+    removeQueryParams(router, ["dialog", ...queryParamsForDialog]);
-      ...router.query,
-    };
-
-    delete noPopupQuery.dialog;
-
-    queryParamsForDialog.forEach((queryParam) => {
-      delete noPopupQuery[queryParam];
-    });
-
-    router.push({
-      query: noPopupQuery,
-    });
   };
 
   // Use embed-code as default tab
-  if (!router.query.tabName) {
+  if (!router.query.embedTabName) {
-    router.query.tabName = "embed-code";
+    goto(router, {
-    router.push({
+      embedTabName: "embed-code",
-      query: {
-        ...router.query,
-      },
     });
   }
 
-  if (isLoading) {
+  if (!embed || !embedUrl) {
-    return null;
-  }
-
-  if (!embed || !eventType) {
     close();
     return null;
   }
 
-  const calLink = `${eventType.team ? `team/${eventType.team.slug}` : eventType.users[0].username}/${
+  const calLink = decodeURIComponent(embedUrl);
-    eventType.slug
-  }`;
 
   const addToPalette = (update: typeof previewState["palette"]) => {
     setPreviewState((previewState) => {
@@ -789,22 +784,15 @@ 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 };
+                removeQueryParams(router, ["embedType", "embedTabName"]);
-                delete newQuery.embedType;
-                delete newQuery.tabName;
-                router.push({
-                  query: {
-                    ...newQuery,
-                  },
-                });
               }}>
-              <ArrowLeftIcon className="mr-4 w-4" />
+              <Icon.FiArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
@@ -823,7 +811,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     ? "Floating Popup Customization"
                     : "Element Click Customization"}
                 </div>
-                <ChevronRightIcon
+                <Icon.FiChevronRight
                   className={`${
                     isEmbedCustomizationOpen ? "rotate-90 transform" : ""
                   } ml-auto h-5 w-5 text-neutral-500`}
@@ -854,7 +842,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       }}
                       addOnLeading={<InputLeading>W</InputLeading>}
                     />
-                    <span className="p-2">x</span>
+                    <span className="p-2">×</span>
                     <TextField
                       labelProps={{ className: "hidden" }}
                       name="height"
@@ -880,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"
@@ -904,10 +892,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 </div>
                 <div
                   className={classNames(
-                    "mt-4 flex items-center justify-between",
+                    "mt-4 flex items-center justify-start",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    embedType === "floating-popup" ? "space-x-2" : "hidden"
                   )}>
-                  <div className="text-sm">Display Calendar Icon Button</div>
                   <Switch
                     defaultChecked={true}
                     onCheckedChange={(checked) => {
@@ -922,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",
+                    "mt-4 items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
+                    embedType === "floating-popup" ? "" : "hidden"
                   )}>
-                  <div>Position of Button</div>
+                  <div className="mb-2">Position of Button</div>
                   <Select
                     onChange={(position) => {
                       setPreviewState((previewState) => {
@@ -945,13 +933,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     options={FloatingPopupPositionOptions}
                   />
                 </div>
-                <div
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
                   <div>Button Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                     <ColorPicker
                       defaultValue="#000000"
                       onChange={(color) => {
@@ -968,13 +952,9 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     />
                   </div>
                 </div>
-                <div
+                <div className={classNames("mt-4", embedType === "floating-popup" ? "" : "hidden")}>
-                  className={classNames(
-                    "mt-4 flex items-center justify-between",
-                    embedType === "floating-popup" ? "flex" : "hidden"
-                  )}>
                   <div>Text Color</div>
-                  <div className="w-36">
+                  <div className="w-full">
                     <ColorPicker
                       defaultValue="#000000"
                       onChange={(color) => {
@@ -1001,7 +981,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
               <CollapsibleTrigger className="flex w-full" type="button">
                 <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
-                <ChevronRightIcon
+                <Icon.FiChevronRight
                   className={`${
                     isBookingCustomizationOpen ? "rotate-90 transform" : ""
                   } ml-auto h-5 w-5 text-neutral-500`}
@@ -1009,10 +989,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               </CollapsibleTrigger>
               <CollapsibleContent>
                 <div className="mt-6 text-sm">
-                  <Label className="flex items-center justify-between">
+                  <Label className="">
-                    <div>Theme</div>
+                    <div className="mb-2">Theme</div>
                     <Select
-                      className="w-36"
+                      className="w-full"
                       defaultValue={ThemeOptions[0]}
                       components={{
                         Control: ThemeSelectControl,
@@ -1039,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">
+                    <Label key={palette.name} className="pb-4">
-                      <div>{palette.title}</div>
+                      <div className="mb-2 pt-2">{palette.title}</div>
-                      <div className="w-36">
+                      <div className="w-full">
                         <ColorPicker
                           defaultValue="#000000"
                           onChange={(color) => {
@@ -1058,33 +1038,33 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </Collapsible>
           </div>
         </div>
-        <div className="w-2/3 bg-gray-50 p-6">
+        <div className="flex w-2/3 flex-col p-8">
-          <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />
+          <HorizontalTabs data-testid="embed-tabs" tabs={parsedTabs} linkProps={{ shallow: true }} />
           {tabs.map((tab) => {
             return (
               <div
-                key={tab.tabName}
+                key={tab.href}
-                className={classNames(router.query.tabName === tab.tabName ? "block" : "hidden")}>
+                className={classNames(
-                <div>
+                  router.query.embedTabName === tab.href.split("=")[1] ? "flex flex-grow flex-col" : "hidden"
-                  <div className={classNames(tab.type === "code" ? "h-[75vh]" : "")}>
+                )}>
-                    {tab.type === "code" ? (
+                <div className="flex h-[55vh] flex-grow flex-col">
-                      <tab.Component
+                  {tab.type === "code" ? (
-                        embedType={embedType}
+                    <tab.Component
-                        calLink={calLink}
+                      embedType={embedType}
-                        previewState={previewState}
+                      calLink={calLink}
-                        ref={refOfEmbedCodesRefs.current[tab.name]}
+                      previewState={previewState}
-                      />
+                      ref={refOfEmbedCodesRefs.current[tab.name]}
-                    ) : (
+                    />
-                      <tab.Component
+                  ) : (
-                        embedType={embedType}
+                    <tab.Component
-                        calLink={calLink}
+                      embedType={embedType}
-                        previewState={previewState}
+                      calLink={calLink}
-                        ref={iframeRef}
+                      previewState={previewState}
-                      />
+                      ref={iframeRef}
-                    )}
+                    />
-                  </div>
+                  )}
-                  <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"} />
                 </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
@@ -1115,62 +1095,60 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
 
 export const EmbedDialog = () => {
   const router = useRouter();
-  const eventTypeId: EventType["id"] = +(router.query.eventTypeId as string);
+  const embedUrl: string = router.query.embedUrl as string;
   return (
-    <Dialog name="embed" clearQueryParamsOnClose={queryParamsForDialog}>
+    <Dialog
+      name="embed"
+      clearQueryParamsOnClose={queryParamsForDialog}
+      onOpenChange={(open) => {
+        if (!open) window.resetEmbedStatus();
+      }}>
       {!router.query.embedType ? (
         <ChooseEmbedTypesDialogContent />
       ) : (
         <EmbedTypeCodeAndPreviewDialogContent
-          eventTypeId={eventTypeId}
           embedType={router.query.embedType as EmbedType}
+          embedUrl={embedUrl}
         />
       )}
     </Dialog>
   );
 };
+type EmbedButtonProps<T> = {
+  embedUrl: string;
+  children?: React.ReactNode;
+  className?: string;
+  as?: T;
+};
 
-export const EmbedButton = ({
+export const EmbedButton = <T extends React.ElementType>({
-  eventTypeId,
+  embedUrl,
+  children,
   className = "",
-  dark,
+  as,
   ...props
-}: {
+}: EmbedButtonProps<T> & React.ComponentPropsWithoutRef<T>) => {
-  eventTypeId: EventType["id"];
-  className: string;
-  dark?: boolean;
-}) => {
-  const { t } = useLocale();
   const router = useRouter();
-  className = classNames(className, "hidden lg:flex");
+  className = classNames(className, "hidden lg:inline-flex");
   const openEmbedModal = () => {
-    const query = {
+    goto(router, {
-      ...router.query,
       dialog: "embed",
-      eventTypeId,
+      embedUrl,
-    };
+    });
-    router.push(
-      {
-        pathname: router.pathname,
-        query,
-      },
-      undefined,
-      { shallow: true }
-    );
   };
+  const Component = as ?? Button;
 
   return (
-    <Button
+    <Component
-      type="button"
-      color="minimal"
-      size="sm"
-      className={className}
       {...props}
-      data-test-eventtype-id={eventTypeId}
+      className={className}
-      data-testid="event-type-embed"
+      data-test-embed-url={embedUrl}
-      onClick={() => openEmbedModal()}>
+      data-testid="embed"
-      <CodeIcon className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")} />
+      type="button"
-      {t("Embed")}
+      onClick={() => {
-    </Button>
+        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/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/Logo.tsx

@@ -1,17 +0,0 @@
-import { LOGO_ICON, LOGO } from "@calcom/lib/constants";
-
-export default function Logo({ small, icon }: { small?: boolean; icon?: boolean }) {
-  return (
-    <h1 className="inline">
-      <strong>
-        {icon ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img className="mx-auto w-9" alt="Cal" title="Cal" src={LOGO_ICON} />
-        ) : (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img className={small ? "h-4 w-auto" : "h-5 w-auto"} alt="Cal" title="Cal" src={LOGO} />
-        )}
-      </strong>
-    </h1>
-  );
-}

apps/web/components/NavTabs.tsx

@@ -77,7 +77,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                     <tab.icon
                       className={classNames(
                         isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                        "-ml-0.5 hidden h-5 w-5 ltr:mr-2 rtl:ml-2 sm:inline-block"
+                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"
                     />

apps/web/components/SettingsShell.tsx

@@ -1,48 +1,41 @@
-import {
-  CreditCardIcon,
-  KeyIcon,
-  LockClosedIcon,
-  UserGroupIcon,
-  UserIcon,
-  CodeIcon,
-} from "@heroicons/react/solid";
 import React, { ComponentProps } from "react";
 
-import ErrorBoundary from "@lib/ErrorBoundary";
+import ErrorBoundary from "@calcom/ui/ErrorBoundary";
+import { Icon } from "@calcom/ui/Icon";
+import Shell from "@calcom/ui/Shell";
 
 import NavTabs from "./NavTabs";
-import Shell from "./Shell";
 
 const tabs = [
   {
     name: "profile",
     href: "/settings/profile",
-    icon: UserIcon,
+    icon: Icon.FiUser,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: UserGroupIcon,
+    icon: Icon.FiUsers,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: KeyIcon,
+    icon: Icon.FiKey,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: CodeIcon,
+    icon: Icon.FiTerminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: CreditCardIcon,
+    icon: Icon.FiCreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: LockClosedIcon,
+    icon: Icon.FiLock,
     adminRequired: true,
   },
 ];

apps/web/components/Shell.tsx

@@ -1,689 +0,0 @@
-import { SelectorIcon } from "@heroicons/react/outline";
-import {
-  ArrowLeftIcon,
-  CalendarIcon,
-  ClockIcon,
-  CogIcon,
-  CollectionIcon,
-  ExternalLinkIcon,
-  LightningBoltIcon,
-  LinkIcon,
-  LogoutIcon,
-  MapIcon,
-  MoonIcon,
-  QuestionMarkCircleIcon,
-  ViewGridIcon,
-} from "@heroicons/react/solid";
-import { UserPlan } from "@prisma/client";
-import { SessionContextValue, signOut, useSession } from "next-auth/react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import React, { Fragment, ReactNode, useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
-
-import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import CustomBranding from "@calcom/lib/CustomBranding";
-import { WEBAPP_URL, JOIN_SLACK, ROADMAP } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
-import Dropdown, {
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@calcom/ui/Dropdown";
-import LicenseBanner from "@ee/components/LicenseBanner";
-import TrialBanner from "@ee/components/TrialBanner";
-import HelpMenuItem from "@ee/components/support/HelpMenuItem";
-
-import ErrorBoundary from "@lib/ErrorBoundary";
-import classNames from "@lib/classNames";
-import { shouldShowOnboarding } from "@lib/getting-started";
-import useMeQuery from "@lib/hooks/useMeQuery";
-
-import { KBarRoot, KBarContent, KBarTrigger } from "@components/Kbar";
-import Loader from "@components/Loader";
-import { HeadSeo } from "@components/seo/head-seo";
-import Badge from "@components/ui/Badge";
-import ImpersonatingBanner from "@components/ui/ImpersonatingBanner";
-
-import pkg from "../package.json";
-import { useViewerI18n } from "./I18nLanguageHandler";
-import Logo from "./Logo";
-
-function useRedirectToLoginIfUnauthenticated(isPublic = false) {
-  const { data: session, status } = useSession();
-  const loading = status === "loading";
-  const router = useRouter();
-
-  useEffect(() => {
-    if (isPublic) {
-      return;
-    }
-
-    if (!loading && !session) {
-      router.replace({
-        pathname: "/auth/login",
-        query: {
-          callbackUrl: `${WEBAPP_URL}${location.pathname}${location.search}`,
-        },
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, session, isPublic]);
-
-  return {
-    loading: loading && !session,
-    session,
-  };
-}
-
-function useRedirectToOnboardingIfNeeded() {
-  const router = useRouter();
-  const query = useMeQuery();
-  const user = query.data;
-
-  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
-
-  useEffect(() => {
-    if (isRedirectingToOnboarding) {
-      router.replace({
-        pathname: "/getting-started",
-      });
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isRedirectingToOnboarding]);
-  return {
-    isRedirectingToOnboarding,
-  };
-}
-
-export function ShellSubHeading(props: {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={classNames("mb-3 block justify-between sm:flex", props.className)}>
-      <div>
-        <h2 className="flex content-center items-center space-x-2 text-base font-bold leading-6 text-gray-900 rtl:space-x-reverse">
-          {props.title}
-        </h2>
-        {props.subtitle && <p className="text-sm text-neutral-500 ltr:mr-4">{props.subtitle}</p>}
-      </div>
-      {props.actions && <div className="flex-shrink-0">{props.actions}</div>}
-    </div>
-  );
-}
-
-const Layout = ({
-  status,
-  plan,
-  ...props
-}: LayoutProps & { status: SessionContextValue["status"]; plan?: UserPlan; isLoading: boolean }) => {
-  const isEmbed = useIsEmbed();
-  const router = useRouter();
-  const { data: routingForms } = trpc.useQuery(["viewer.appById", { appId: "routing_forms" }], {
-    enabled: status === "authenticated",
-  });
-
-  const { t } = useLocale();
-  const navigation = [
-    {
-      name: t("event_types_page_title"),
-      href: "/event-types",
-      icon: LinkIcon,
-      current: router.asPath.startsWith("/event-types"),
-    },
-    {
-      name: t("bookings"),
-      href: "/bookings/upcoming",
-      icon: CalendarIcon,
-      current: router.asPath.startsWith("/bookings"),
-    },
-    {
-      name: t("availability"),
-      href: "/availability",
-      icon: ClockIcon,
-      current: router.asPath.startsWith("/availability"),
-    },
-    routingForms
-      ? {
-          name: "Routing Forms",
-          href: "/apps/routing_forms/forms",
-          icon: CollectionIcon,
-          current: router.asPath.startsWith("/apps/routing_forms/"),
-        }
-      : null,
-    {
-      name: t("workflows"),
-      href: "/workflows",
-      icon: LightningBoltIcon,
-      current: router.asPath.startsWith("/workflows"),
-      pro: true,
-    },
-    {
-      name: t("apps"),
-      href: "/apps",
-      icon: ViewGridIcon,
-      current: router.asPath.startsWith("/apps") && !router.asPath.startsWith("/apps/routing_forms/"),
-      child: [
-        {
-          name: t("app_store"),
-          href: "/apps",
-          current: router.asPath === "/apps",
-        },
-        {
-          name: t("installed_apps"),
-          href: "/apps/installed",
-          current: router.asPath === "/apps/installed",
-        },
-      ],
-    },
-    {
-      name: t("settings"),
-      href: "/settings/profile",
-      icon: CogIcon,
-      current: router.asPath.startsWith("/settings"),
-    },
-  ];
-  const pageTitle = typeof props.heading === "string" ? props.heading : props.title;
-
-  return (
-    <>
-      <HeadSeo
-        title={pageTitle ?? "Cal.com"}
-        description={props.subtitle ? props.subtitle?.toString() : ""}
-        nextSeoProps={{
-          nofollow: true,
-          noindex: true,
-        }}
-      />
-      <div>
-        <Toaster position="bottom-right" />
-      </div>
-
-      <div
-        className={classNames("flex h-screen overflow-hidden", props.large ? "bg-white" : "bg-gray-100")}
-        data-testid="dashboard-shell">
-        {status === "authenticated" && (
-          <div style={isEmbed ? { display: "none" } : {}} className="hidden md:flex lg:flex-shrink-0">
-            <div className="flex w-14 flex-col lg:w-56">
-              <div className="flex h-0 flex-1 flex-col border-r border-gray-200 bg-white">
-                <div className="flex flex-1 flex-col overflow-y-auto pt-3 pb-4 lg:pt-5">
-                  <div className="items-center justify-between md:hidden lg:flex">
-                    <Link href="/event-types">
-                      <a className="px-4">
-                        <Logo small />
-                      </a>
-                    </Link>
-                    <div className="px-4">
-                      <KBarTrigger />
-                    </div>
-                  </div>
-                  {/* logo icon for tablet */}
-                  <Link href="/event-types">
-                    <a className="text-center md:inline lg:hidden">
-                      <Logo small icon />
-                    </a>
-                  </Link>
-                  <nav className="mt-2 flex-1 space-y-1 bg-white px-2 lg:mt-5">
-                    {navigation.map((item) =>
-                      !item ? null : (
-                        <Fragment key={item.name}>
-                          <Link href={item.href}>
-                            <a
-                              aria-label={item.name}
-                              className={classNames(
-                                item.current
-                                  ? "bg-neutral-100 text-neutral-900"
-                                  : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                                "group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
-                              )}>
-                              <item.icon
-                                className={classNames(
-                                  item.current
-                                    ? "text-neutral-500"
-                                    : "text-neutral-400 group-hover:text-neutral-500",
-                                  "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-                                )}
-                                aria-hidden="true"
-                              />
-                              <span className="hidden lg:inline">{item.name}</span>
-                              {item.pro && (
-                                <span className="ml-1">
-                                  {plan === "FREE" && <Badge variant="default">PRO</Badge>}
-                                </span>
-                              )}
-                            </a>
-                          </Link>
-                          {item.child &&
-                            router.asPath.startsWith(item.href) &&
-                            item.child.map((item) => {
-                              return (
-                                <Link key={item.name} href={item.href}>
-                                  <a
-                                    className={classNames(
-                                      item.current
-                                        ? "text-neutral-900"
-                                        : "text-neutral-500 hover:text-neutral-900",
-                                      "group hidden items-center rounded-sm px-2 py-2 pl-10 text-sm font-medium lg:flex"
-                                    )}>
-                                    <span className="hidden lg:inline">{item.name}</span>
-                                  </a>
-                                </Link>
-                              );
-                            })}
-                        </Fragment>
-                      )
-                    )}
-                    <span className="group flex items-center rounded-sm px-2 py-2 text-sm font-medium text-neutral-500 hover:bg-gray-50 hover:text-neutral-900 lg:hidden">
-                      <KBarTrigger />
-                    </span>
-                  </nav>
-                </div>
-                <TrialBanner />
-                <div
-                  className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
-                  data-testid="user-dropdown-trigger">
-                  <span className="hidden lg:inline">
-                    <UserDropdown />
-                  </span>
-                  <span className="hidden md:inline lg:hidden">
-                    <UserDropdown small />
-                  </span>
-                </div>
-                <small style={{ fontSize: "0.5rem" }} className="mx-3 mt-1 mb-2 hidden opacity-50 lg:block">
-                  &copy; {new Date().getFullYear()} Cal.com, Inc. v.{pkg.version + "-"}
-                  {process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com" ? "h" : "sh"}
-                  <span className="lowercase" data-testid={`plan-${plan?.toLowerCase()}`}>
-                    -{plan}
-                  </span>
-                </small>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="flex w-0 flex-1 flex-col overflow-hidden">
-          <ImpersonatingBanner />
-          <main
-            className={classNames(
-              "relative z-0 flex-1 overflow-y-auto focus:outline-none",
-              status === "authenticated" && "max-w-[1700px]",
-              props.flexChildrenContainer && "flex flex-col"
-            )}>
-            {/* show top navigation for md and smaller (tablet and phones) */}
-            {status === "authenticated" && (
-              <nav
-                style={isEmbed ? { display: "none" } : {}}
-                className="flex items-center justify-between border-b border-gray-200 bg-white p-4 md:hidden">
-                <Link href="/event-types">
-                  <a>
-                    <Logo />
-                  </a>
-                </Link>
-                <div className="flex items-center gap-2 self-center">
-                  <span className="group flex items-center rounded-full p-2.5 text-sm font-medium text-neutral-500 hover:bg-gray-50 hover:text-neutral-900 lg:hidden">
-                    <KBarTrigger />
-                  </span>
-                  <button className="rounded-full bg-white p-2 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
-                    <span className="sr-only">{t("settings")}</span>
-                    <Link href="/settings/profile">
-                      <a>
-                        <CogIcon className="h-6 w-6" aria-hidden="true" />
-                      </a>
-                    </Link>
-                  </button>
-                  <UserDropdown small />
-                </div>
-              </nav>
-            )}
-            <div
-              className={classNames(
-                props.centered && "mx-auto md:max-w-5xl",
-                props.flexChildrenContainer && "flex flex-1 flex-col",
-                !props.large && "py-8"
-              )}>
-              {!!props.backPath && (
-                <div className="mx-3 mb-8 sm:mx-8">
-                  <Button
-                    onClick={() => router.push(props.backPath as string)}
-                    StartIcon={ArrowLeftIcon}
-                    color="secondary">
-                    Back
-                  </Button>
-                </div>
-              )}
-              {props.heading && (
-                <div
-                  className={classNames(
-                    props.large && "bg-gray-100 py-8 lg:mb-8 lg:pt-16 lg:pb-7",
-                    "block justify-between px-4 sm:flex sm:px-6 md:px-8"
-                  )}>
-                  {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
-                  <div className="mb-8 w-full">
-                    {props.isLoading ? (
-                      <>
-                        <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200" />
-                        <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200" />
-                      </>
-                    ) : (
-                      <>
-                        <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900">
-                          {props.heading}
-                        </h1>
-                        <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
-                      </>
-                    )}
-                  </div>
-                  {props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
-                </div>
-              )}
-              <div
-                className={classNames(
-                  "px-4 sm:px-6 md:px-8",
-                  props.flexChildrenContainer && "flex flex-1 flex-col"
-                )}>
-                <ErrorBoundary>{!props.isLoading ? props.children : props.customLoader}</ErrorBoundary>
-              </div>
-              {/* show bottom navigation for md and smaller (tablet and phones) */}
-              {status === "authenticated" && (
-                <nav
-                  style={isEmbed ? { display: "none" } : {}}
-                  className="bottom-nav fixed bottom-0 z-30 flex w-full bg-white shadow md:hidden">
-                  {/* note(PeerRich): using flatMap instead of map to remove settings from bottom nav */}
-                  {navigation.flatMap((item, itemIdx) => {
-                    if (!item) {
-                      return null;
-                    }
-                    return item.href === "/settings/profile" ? (
-                      []
-                    ) : (
-                      <Link key={item.name} href={item.href}>
-                        <a
-                          className={classNames(
-                            item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
-                            itemIdx === 0 ? "rounded-l-lg" : "",
-                            itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                            "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs font-medium hover:bg-gray-50 focus:z-10 sm:text-sm"
-                          )}
-                          aria-current={item.current ? "page" : undefined}>
-                          <item.icon
-                            className={classNames(
-                              item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                              "mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center"
-                            )}
-                            aria-hidden="true"
-                          />
-                          <span className="block truncate">{item.name}</span>
-                        </a>
-                      </Link>
-                    );
-                  })}
-                </nav>
-              )}
-              {/* add padding to content for mobile navigation*/}
-              <div className="block pt-12 md:hidden" />
-            </div>
-            <LicenseBanner />
-          </main>
-        </div>
-      </div>
-    </>
-  );
-};
-
-const MemoizedLayout = React.memo(Layout);
-
-type LayoutProps = {
-  centered?: boolean;
-  title?: string;
-  heading?: ReactNode;
-  subtitle?: ReactNode;
-  children: ReactNode;
-  CTA?: ReactNode;
-  large?: boolean;
-  HeadingLeftIcon?: ReactNode;
-  backPath?: string; // renders back button to specified path
-  // use when content needs to expand with flex
-  flexChildrenContainer?: boolean;
-  isPublic?: boolean;
-  customLoader?: ReactNode;
-};
-
-export default function Shell(props: LayoutProps) {
-  const { loading, session } = useRedirectToLoginIfUnauthenticated(props.isPublic);
-  const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
-
-  const query = useMeQuery();
-  const user = query.data;
-
-  const i18n = useViewerI18n();
-  const { status } = useSession();
-
-  const isLoading = isRedirectingToOnboarding || loading;
-
-  // Don't show any content till translations are loaded.
-  // As they are cached infintely, this status would be loading just once for the app's lifetime until refresh
-  if (i18n.status === "loading") {
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
-        <Loader />
-      </div>
-    );
-  }
-
-  if (!session && !props.isPublic) return null;
-
-  return (
-    <KBarRoot>
-      <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
-      <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
-      <KBarContent />
-    </KBarRoot>
-  );
-}
-
-function UserDropdown({ small }: { small?: boolean }) {
-  const { t } = useLocale();
-  const query = useMeQuery();
-  const user = query.data;
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    //@ts-ignore
-    const Beacon = window.Beacon;
-    // window.Beacon is defined when user actually opens up HelpScout and username is available here. On every re-render update session info, so that it is always latest.
-    Beacon &&
-      Beacon("session-data", {
-        username: user?.username || "Unknown",
-        screenResolution: `${screen.width}x${screen.height}`,
-      });
-  });
-  const mutation = trpc.useMutation("viewer.away", {
-    onSettled() {
-      utils.invalidateQueries("viewer.me");
-    },
-  });
-  const utils = trpc.useContext();
-  const [helpOpen, setHelpOpen] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
-  if (!user) {
-    return null;
-  }
-  const onHelpItemSelect = () => {
-    setHelpOpen(false);
-    setMenuOpen(false);
-  };
-
-  // Prevent rendering dropdown if user isn't available.
-  // We don't want to show nameless user.
-  if (!user) {
-    return null;
-  }
-  return (
-    <Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
-      <DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>
-        <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
-          <span
-            className={classNames(
-              small ? "h-8 w-8" : "h-10 w-10",
-              "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
-            )}>
-            {
-              // eslint-disable-next-line @next/next/no-img-element
-              <img
-                className="rounded-full"
-                src={WEBAPP_URL + "/" + user.username + "/avatar.png"}
-                alt={user.username || "Nameless User"}
-              />
-            }
-            {!user.away && (
-              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500" />
-            )}
-            {user.away && (
-              <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-yellow-500" />
-            )}
-          </span>
-          {!small && (
-            <span className="flex flex-grow items-center truncate">
-              <span className="flex-grow truncate text-sm">
-                <span className="block truncate font-medium text-gray-900">
-                  {user.name || "Nameless User"}
-                </span>
-                <span className="block truncate font-normal text-neutral-500">
-                  {user.username
-                    ? process.env.NEXT_PUBLIC_WEBSITE_URL === "https://cal.com"
-                      ? `cal.com/${user.username}`
-                      : `/${user.username}`
-                    : "No public page"}
-                </span>
-              </span>
-              <SelectorIcon
-                className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
-                aria-hidden="true"
-              />
-            </span>
-          )}
-        </button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent portalled={true} onInteractOutside={() => setMenuOpen(false)}>
-        {helpOpen ? (
-          <HelpMenuItem onHelpItemSelect={() => onHelpItemSelect()} />
-        ) : (
-          <>
-            <DropdownMenuItem>
-              <a
-                onClick={() => {
-                  mutation.mutate({ away: !user?.away });
-                  utils.invalidateQueries("viewer.me");
-                }}
-                className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-                <MoonIcon
-                  className={classNames(
-                    user.away
-                      ? "text-purple-500 group-hover:text-purple-700"
-                      : "text-gray-500 group-hover:text-gray-700",
-                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-                  )}
-                  aria-hidden="true"
-                />
-                {user.away ? t("set_as_free") : t("set_as_away")}
-              </a>
-            </DropdownMenuItem>
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            {user.username && (
-              <DropdownMenuItem>
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-                  className="flex items-center px-4 py-2 text-sm text-gray-700">
-                  <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" />{" "}
-                  {t("view_public_page")}
-                </a>
-              </DropdownMenuItem>
-            )}
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            <DropdownMenuItem>
-              <a
-                href={JOIN_SLACK}
-                target="_blank"
-                rel="noreferrer"
-                className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
-                <svg
-                  viewBox="0 0 2447.6 2452.5"
-                  className={classNames(
-                    "text-gray-500 group-hover:text-gray-700",
-                    "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
-                  )}
-                  xmlns="http://www.w3.org/2000/svg">
-                  <g clipRule="evenodd" fillRule="evenodd">
-                    <path
-                      d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
-                {t("join_our_slack")}
-              </a>
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={ROADMAP}
-                className="flex items-center px-4 py-2 text-sm text-gray-700">
-                <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
-              </a>
-            </DropdownMenuItem>
-
-            <button
-              className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
-              onClick={() => setHelpOpen(true)}>
-              <QuestionMarkCircleIcon
-                className={classNames(
-                  "text-gray-500 group-hover:text-neutral-500",
-                  "h-5 w-5 flex-shrink-0 ltr:mr-3"
-                )}
-                aria-hidden="true"
-              />
-
-              {t("help")}
-            </button>
-
-            <DropdownMenuSeparator className="h-px bg-gray-200" />
-            <DropdownMenuItem>
-              <a
-                onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-                className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-                <LogoutIcon
-                  className={classNames(
-                    "text-gray-500 group-hover:text-gray-700",
-                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
-                  )}
-                  aria-hidden="true"
-                />
-                {t("sign_out")}
-              </a>
-            </DropdownMenuItem>
-          </>
-        )}
-      </DropdownMenuContent>
-    </Dropdown>
-  );
-}

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
+          <AppCard key={app.name} app={app} />
-            key={app.name}
-            name={app.name}
-            slug={app.slug}
-            description={app.description}
-            logo={app.logo}
-            rating={app.rating}
-            reviews={app.reviews}
-            isProOnly={app.isProOnly}
-          />
         ))}
       </div>
     </div>

apps/web/components/apps/AppCard.tsx

@@ -1,32 +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";
 
-import Badge from "@components/ui/Badge";
-
 interface AppCardProps {
-  logo: string;
+  app: App;
-  name: string;
-  slug?: string;
-  category?: string;
-  description: string;
-  rating: number;
-  reviews?: number;
-  isProOnly?: boolean;
 }
 
 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"
@@ -38,18 +31,13 @@ export default function AppCard(props: AppCardProps) {
           </Button>
         </div>
         <div className="flex items-center">
-          <h3 className="font-medium">{props.name}</h3>
+          <h3 className="font-medium">{props.app.name}</h3>
-          {props.isProOnly && user?.plan === "FREE" ? (
-            <Badge className="ml-2" variant="default">
-              PRO
-            </Badge>
-          ) : null}
         </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/Slider.tsx

@@ -1,9 +1,10 @@
 import Glide, { Options } from "@glidejs/glide";
 import "@glidejs/glide/dist/css/glide.core.min.css";
 import "@glidejs/glide/dist/css/glide.theme.min.css";
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid";
 import { useEffect, useRef } from "react";
 
+import { Icon } from "@calcom/ui/Icon";
+
 const Slider = <T extends string | unknown>({
   title = "",
   className = "",
@@ -51,10 +52,10 @@ const Slider = <T extends string | unknown>({
           )}
           <div className="glide__arrows ml-auto" data-glide-el="controls">
             <button data-glide-dir="<" className="mr-4">
-              <ArrowLeftIcon className="h-5 w-5 text-gray-600 hover:text-black" />
+              <Icon.FiArrowLeft className="h-5 w-5 text-gray-600 hover:text-black" />
             </button>
             <button data-glide-dir=">">
-              <ArrowRightIcon className="h-5 w-5 text-gray-600 hover:text-black" />
+              <Icon.FiArrowRight className="h-5 w-5 text-gray-600 hover:text-black" />
             </button>
           </div>
         </div>

apps/web/components/apps/TrendingAppsSlider.tsx

@@ -21,20 +21,10 @@ const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
           },
         },
       }}
-      renderItem={(app) => (
+      renderItem={(app) => <AppCard app={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}
-        />
-      )}
     />
   );
 };
 
+/** @deprecated use v2 instead, located at packages/ui/v2/core/apps  */
 export default TrendingAppsSlider;

apps/web/components/auth/SAMLLogin.tsx

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

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({ center = true }) {
-
-export default function TwoFactor() {
   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/NewScheduleButton.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 
@@ -7,6 +6,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
@@ -41,7 +41,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
   return (
     <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
       <DialogTrigger asChild>
-        <Button data-testid={name} StartIcon={PlusIcon}>
+        <Button data-testid={name} StartIcon={Icon.FiPlus}>
           {t("new_schedule_btn")}
         </Button>
       </DialogTrigger>

apps/web/components/availability/Schedule.tsx

@@ -1,5 +1,7 @@
-import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
+/**
-import { DuplicateIcon } from "@heroicons/react/solid";
+ * @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";
@@ -8,7 +10,8 @@ import { GroupBase, Props } from "react-select";
 import dayjs, { Dayjs, ConfigType } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
-import Dropdown, { DropdownMenuContent } from "@calcom/ui/Dropdown";
+import Dropdown, { DropdownMenuContent, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { defaultDayRange } from "@lib/availability";
@@ -193,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],
@@ -231,13 +238,13 @@ export const DayRanges = ({
     <div className="space-y-2">
       {fields.map((field, index) => (
         <div key={field.id} className="flex items-center rtl:space-x-reverse">
-          <div className="flex flex-grow sm:flex-grow-0">
+          <div className="flex flex-grow space-x-1 sm:flex-grow-0">
             <TimeRangeField name={`${name}.${index}`} />
             <Button
+              type="button"
               size="icon"
               color="minimal"
-              StartIcon={TrashIcon}
+              StartIcon={Icon.FiTrash}
-              type="button"
               onClick={() => remove(index)}
             />
           </div>
@@ -249,19 +256,21 @@ export const DayRanges = ({
                   type="button"
                   color="minimal"
                   size="icon"
-                  StartIcon={PlusIcon}
+                  StartIcon={Icon.FiPlus}
                   onClick={handleAppend}
                 />
               </Tooltip>
               <Dropdown>
                 <Tooltip content={t("duplicate") as string}>
-                  <Button
+                  <DropdownMenuTrigger asChild>
-                    type="button"
+                    <Button
-                    color="minimal"
+                      type="button"
-                    size="icon"
+                      color="minimal"
-                    StartIcon={DuplicateIcon}
+                      size="icon"
-                    onClick={handleAppend}
+                      StartIcon={Icon.FiCopy}
-                  />
+                      onClick={handleAppend}
+                    />
+                  </DropdownMenuTrigger>
                 </Tooltip>
                 <DropdownMenuContent>
                   <CopyTimes
@@ -323,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,4 +1,7 @@
-import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
+/**
+ * @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";
 
@@ -8,7 +11,12 @@ import { Availability } from "@calcom/prisma/client";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { 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,9 +53,10 @@ 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">
-            <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+            <Icon.FiMoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
@@ -61,7 +70,7 @@ export function ScheduleListItem({
                 type="button"
                 color="warn"
                 className="w-full font-normal"
-                StartIcon={isDeleting ? undefined : TrashIcon}
+                StartIcon={isDeleting ? undefined : Icon.FiTrash}
                 loading={isDeleting}>
                 {isDeleting ? t("deleting") : t("delete_schedule")}
               </Button>

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

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

apps/web/components/booking/AvailableTimes.tsx

@@ -1,4 +1,3 @@
-import { SchedulingType } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { FC, useEffect, useState } from "react";
@@ -18,13 +17,10 @@ type AvailableTimesProps = {
   recurringCount: number | undefined;
   eventTypeSlug: string;
   date: Dayjs;
-  users: {
-    username: string | null;
-  }[];
-  schedulingType: SchedulingType | null;
   seatsPerTimeSlot?: number | null;
   slots?: Slot[];
   isLoading: boolean;
+  ethSignature?: string;
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
@@ -35,8 +31,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   eventTypeSlug,
   recurringCount,
   timeFormat,
-  schedulingType,
   seatsPerTimeSlot,
+  ethSignature,
 }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
@@ -49,17 +45,17 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   }, []);
 
   return (
-    <div className="mt-8 flex flex-col text-center sm:mt-0 sm:w-1/3 sm:pl-4 md:-mb-5">
+    <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-lg font-light text-gray-600">
+      <div className="mb-4 text-left text-base">
-        <span className="text-bookingdarker w-1/2 dark:text-white">
+        <span className="text-bookingdarker dark:text-darkgray-800 mb-8 w-1/2 break-words font-semibold text-gray-900">
-          <strong>{nameOfDay(i18n.language, Number(date.format("d")))}</strong>
+          {nameOfDay(i18n.language, Number(date.format("d")))}
-          <span className="text-bookinglight">
+        </span>
-            {date.format(", D ")}
+        <span className="text-bookinglight font-medium">
-            {date.toDate().toLocaleString(i18n.language, { month: "long" })}
+          {date.format(", D ")}
-          </span>
+          {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 = {
@@ -75,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,
               },
             };
 
@@ -82,10 +79,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               bookingUrl.query.rescheduleUid = rescheduleUid as string;
             }
 
-            if (schedulingType === SchedulingType.ROUND_ROBIN) {
-              bookingUrl.query.user = slot.users;
-            }
-
             // If event already has an attendee add booking id
             if (slot.bookingUid) {
               bookingUrl.query.bookingUid = slot.bookingUid;
@@ -97,8 +90,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                   <div
                     className={classNames(
-                      "text-primary-500 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25  dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
+                      "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" ? "border-brandcontrast" : "border-brand"
+                      brand === "#fff" || brand === "#ffffff" ? "" : ""
                     )}>
                     {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                     {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
@@ -107,8 +100,9 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                   <Link href={bookingUrl} prefetch={false}>
                     <a
                       className={classNames(
-                        "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
+                        "text-primary-500 hover:border-gray-900 hover:bg-gray-50",
-                        brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                        "dark:bg-darkgray-200 dark:hover:bg-darkgray-300 dark:hover:border-darkmodebrand mb-2 block rounded-md border bg-white py-2 text-sm font-medium dark:border-transparent dark:text-neutral-200",
+                        brand === "#fff" || brand === "#ffffff" ? "" : ""
                       )}
                       data-testid="time">
                       {dayjs(slot.time).tz(timeZone()).format(timeFormat)}

apps/web/components/booking/BookingListItem.tsx

@@ -1,33 +1,22 @@
-import {
-  BanIcon,
-  CheckIcon,
-  ClockIcon,
-  LocationMarkerIcon,
-  PaperAirplaneIcon,
-  PencilAltIcon,
-  XIcon,
-} from "@heroicons/react/outline";
-import { RefreshIcon } from "@heroicons/react/solid";
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
-import { useMutation } from "react-query";
 
+import { EventLocationType, getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
+import Badge from "@calcom/ui/v2/core/Badge";
+import Button from "@calcom/ui/v2/core/Button";
 
-import { HttpError } from "@lib/core/http/error";
 import useMeQuery from "@lib/hooks/useMeQuery";
-import { linkValueToString } from "@lib/linkValueToString";
-import { LocationType } from "@lib/location";
 import { extractRecurringDates } from "@lib/parseDate";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -52,40 +41,31 @@ function BookingListItem(booking: BookingItemProps) {
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
-  const mutation = useMutation(
+  const mutation = trpc.useMutation(["viewer.bookings.confirm"], {
-    async (confirm: boolean) => {
+    onSuccess: () => {
-      let body = {
-        id: booking.id,
-        confirmed: confirm,
-        language: i18n.language,
-        reason: rejectionReason,
-      };
-      /**
-       * Only pass down the recurring event id when we need to confirm the entire series, which happens in
-       * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
-       */
-      if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
-        body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
-      }
-      const res = await fetch("/api/book/confirm", {
-        method: "PATCH",
-        body: JSON.stringify(body),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      if (!res.ok) {
-        throw new HttpError({ statusCode: res.status });
-      }
       setRejectionDialogIsOpen(false);
+      utils.invalidateQueries("viewer.bookings");
     },
-    {
+  });
-      async onSettled() {
+
-        await utils.invalidateQueries(["viewer.bookings"]);
+  const bookingConfirm = async (confirm: boolean) => {
-      },
+    let body = {
+      bookingId: booking.id,
+      confirmed: confirm,
+      reason: rejectionReason,
+    };
+    /**
+     * Only pass down the recurring event id when we need to confirm the entire series, which happens in
+     * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+     */
+    if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+      body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
     }
-  );
+    mutation.mutate(body);
+  };
+
   const isUpcoming = new Date(booking.endTime) >= new Date();
+  const 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;
@@ -101,7 +81,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: BanIcon,
+      icon: Icon.FiSlash,
       disabled: mutation.isLoading,
     },
     {
@@ -111,9 +91,9 @@ function BookingListItem(booking: BookingItemProps) {
           ? t("confirm_all")
           : t("confirm"),
       onClick: () => {
-        mutation.mutate(true);
+        bookingConfirm(true);
       },
-      icon: CheckIcon,
+      icon: Icon.FiCheck,
       disabled: mutation.isLoading,
       color: "primary",
     },
@@ -133,23 +113,22 @@ function BookingListItem(booking: BookingItemProps) {
           ? "?allRemainingBookings=true"
           : ""
       }`,
-      icon: XIcon,
+      icon: Icon.FiX,
     },
     {
       id: "edit_booking",
-      label: t("edit_booking"),
+      label: t("edit"),
-      icon: PencilAltIcon,
       actions: [
         {
           id: "reschedule",
-          icon: ClockIcon,
+          icon: Icon.FiClock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}`,
         },
         {
           id: "reschedule_request",
-          icon: PaperAirplaneIcon,
+          icon: Icon.FiSend,
-          iconClassName: "rotate-45 w-[18px] -ml-[2px]",
+          iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
             setIsOpenRescheduleDialog(true);
@@ -161,7 +140,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: LocationMarkerIcon,
+          icon: Icon.FiMapPin,
         },
       ],
     },
@@ -174,7 +153,7 @@ function BookingListItem(booking: BookingItemProps) {
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <PaperAirplaneIcon className="-mt-[1px] w-4 rotate-45" />
+        <Icon.FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
     );
@@ -191,13 +170,10 @@ function BookingListItem(booking: BookingItemProps) {
     },
   });
 
-  const saveLocation = (newLocationType: LocationType, details: { [key: string]: string }) => {
+  const saveLocation = (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => {
     let newLocation = newLocationType as string;
-    if (
+    const eventLocationType = getEventLocationType(newLocationType);
-      newLocationType === LocationType.InPerson ||
+    if (eventLocationType?.organizerInputType) {
-      newLocationType === LocationType.Link ||
-      newLocationType === LocationType.UserPhone
-    ) {
       newLocation = details[Object.keys(details)[0]];
     }
     setLocationMutation.mutate({ bookingId: booking.id, newLocation });
@@ -206,31 +182,16 @@ function BookingListItem(booking: BookingItemProps) {
   // Calculate the booking date(s) and setup recurring event data to show
   let recurringStrings: string[] = [];
   let recurringDates: Date[] = [];
-  const today = new Date();
+
   if (booking.recurringBookings && booking.eventType.recurringEvent?.freq !== undefined) {
     [recurringStrings, recurringDates] = extractRecurringDates(
       booking.recurringBookings,
       user?.timeZone,
       i18n
     );
-    if (booking.status === BookingStatus.PENDING) {
-      // Only take into consideration next up instances if booking is confirmed
-      recurringDates = recurringDates.filter((aDate) => aDate >= today);
-      recurringStrings = recurringDates.map((_, key) => recurringStrings[key]);
-    }
   }
 
-  let location = booking.location || "";
+  const location = booking.location || "";
-
-  if (location.includes("integration")) {
-    if (booking.status === BookingStatus.CANCELLED || booking.status === BookingStatus.REJECTED) {
-      location = t("web_conference");
-    } else if (isConfirmed) {
-      location = linkValueToString(booking.location, t);
-    } else {
-      location = t("web_conferencing_details_to_follow");
-    }
-  }
 
   const onClick = () => {
     router.push({
@@ -292,7 +253,7 @@ function BookingListItem(booking: BookingItemProps) {
             <Button
               disabled={mutation.isLoading}
               onClick={() => {
-                mutation.mutate(false);
+                bookingConfirm(false);
               }}>
               {t("rejection_confirmation")}
             </Button>
@@ -300,87 +261,103 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="flex hover:bg-neutral-50">
+      <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:w-64" onClick={onClick}>
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-48" 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 &&
+            {isPending && (
-                booking.eventType?.recurringEvent?.freq &&
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                (booking.listingStatus === "recurring" || booking.listingStatus === "cancelled") && (
+                {t("unconfirmed")}
-                  <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
+              </Badge>
-                    <div className="flex">
+            )}
-                      <Tooltip
+
-                        content={recurringStrings.map((aDate, key) => (
+            {booking.eventType?.team && (
-                          <p key={key}>{aDate}</p>
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
-                        ))}>
+                {booking.eventType.team.name}
-                        <div className="text-gray-600 dark:text-white">
+              </Badge>
-                          <RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
+            )}
-                          <p className="pl-[21px]">
+            {!!booking?.eventType?.price && !booking.paid && (
-                            {booking.status === BookingStatus.ACCEPTED
+              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                              ? `${t("event_remaining", {
+                {t("pending_payment")}
-                                  count: recurringDates.length,
+              </Badge>
-                                })}`
+            )}
-                              : getEveryFreqFor({
+
-                                  t,
+            <div className="mt-2 text-sm text-gray-400">
-                                  recurringEvent: booking.eventType.recurringEvent,
+              <RecurringBookingsTooltip
-                                  recurringCount: booking.recurringBookings.length,
+                booking={booking}
-                                })}
+                recurringStrings={recurringStrings}
-                          </p>
+                recurringDates={recurringDates}
-                        </div>
+              />
-                      </Tooltip>
-                    </div>
-                  </div>
-                )}
             </div>
           </div>
         </td>
-        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+        <td className={"flex-1 px-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
-          <div className="cursor-pointer py-4">
+          {/* Time and Badges for mobile */}
-            <div className="sm:hidden">
+          <div className="w-full pt-4 pb-2 sm:hidden">
-              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
+            <div className="flex w-full items-center justify-between sm:hidden">
-              {!!booking?.eventType?.price && !booking.paid && (
+              <div className="text-sm leading-6 text-gray-900">{startTime}</div>
-                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
+              <div className="pr-2 text-sm text-gray-500">
-              )}
+                {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
-              <div className="text-sm font-medium text-gray-900">
+                {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
-                {startTime}:{" "}
-                <small className="text-sm text-gray-500">
-                  {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-                </small>
               </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 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
                 isCancelled ? "line-through" : ""
               )}>
-              {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
               {booking.title}
+              <span> </span>
+
               {!!booking?.eventType?.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
+              <DisplayAttendees
-                className="text-sm text-gray-900 hover:text-blue-500"
+                attendees={booking.attendees}
-                href={"mailto:" + booking.attendees[0].email}
+                user={booking.user}
-                onClick={(e) => e.stopPropagation()}>
+                currentEmail={user?.email}
-                {booking.attendees[0].email}
+              />
-              </a>
             )}
             {isCancelled && booking.rescheduled && (
               <div className="mt-2 inline-block text-left text-sm md:hidden">
@@ -388,9 +365,20 @@ function BookingListItem(booking: BookingItemProps) {
               </div>
             )}
           </div>
+          <div className="flex justify-end sm:hidden">
+            <div className="whitespace-nowrap pt-2 pb-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
+              {isUpcoming && !isCancelled ? (
+                <>
+                  {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
+                  {isConfirmed && <TableActions actions={bookedActions} />}
+                  {isRejected && <div className="text-sm text-gray-500">{t("rejected")}</div>}
+                </>
+              ) : null}
+              {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
+            </div>
+          </div>
         </td>
-
+        <td className="hidden whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:block">
-        <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
           {isUpcoming && !isCancelled ? (
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -398,6 +386,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 />
@@ -409,6 +398,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/CancelBooking.tsx

@@ -1,13 +1,12 @@
-import { XIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RecurringEvent } from "@calcom/types/Calendar";
+import useTheme from "@calcom/lib/hooks/useTheme";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button } from "@calcom/ui/Button";
-
+import { Icon } from "@calcom/ui/Icon";
-import useTheme from "@lib/hooks/useTheme";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 
 type Props = {
   booking: {
@@ -39,7 +38,7 @@ export default function CancelBooking(props: Props) {
       {error && (
         <div>
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <XIcon className="h-6 w-6 text-red-600" />
+            <Icon.FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -58,19 +57,23 @@ export default function CancelBooking(props: Props) {
             className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
             rows={3}
           />
-          <div className="flex rtl:space-x-reverse">
+          <div className=" flex flex-col-reverse rtl:space-x-reverse sm:flex-row">
             {!props.recurringEvent && (
-              <div className="w-full">
+              <div className=" border-bookinglightest mt-5 flex w-full justify-center border-t pt-3 sm:mt-0  sm:justify-start sm:border-0 sm:pt-0">
-                <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                <Button
+                  color="secondary"
+                  className="border-0 sm:border"
+                  onClick={() => router.push("/reschedule/" + booking?.uid)}>
                   {t("reschedule_this")}
                 </Button>
               </div>
             )}
-            <div className="w-full space-x-2 text-right">
+            <div className="mb-2 flex w-full space-x-2 text-right sm:mb-0 ">
               <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
                 {t("nevermind")}
               </Button>
               <Button
+                className="flex grow justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);

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,9 +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 TimezoneSelect, { ITimezoneOption } from "@components/ui/form/TimezoneSelect";
 
 import { is24h, timeZone } from "../../lib/clock";
 
@@ -34,9 +33,9 @@ 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 py-2 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="font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
+        <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
         <div className="ml-auto flex items-center">
           <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
             {t("am_pm")}
@@ -53,7 +52,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 focus:ring-black sm:text-sm"
+        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 text-sm focus:ring-black"
       />
     </div>
   ) : null;

apps/web/components/booking/UserAvatars.tsx

@@ -0,0 +1,34 @@
+import { CAL_URL } from "@calcom/lib/constants";
+
+import AvatarGroup, { AvatarGroupProps } from "@components/ui/AvatarGroup";
+
+export const UserAvatars = ({
+  profile,
+  users,
+  ...props
+}: {
+  profile: { image: string | null; name?: string | null };
+  showMembers: boolean;
+  users: { username: string | null; name?: string | null }[];
+} & Pick<AvatarGroupProps, "size" | "truncateAfter">) => {
+  const showMembers = !users.find((user) => user.name === profile.name) && props.showMembers;
+  return (
+    <AvatarGroup
+      border="border-2 dark:border-darkgray-100 border-white"
+      items={
+        [
+          { image: profile.image, alt: profile.name, title: profile.name },
+          ...(showMembers
+            ? users.map((user) => ({
+                title: user.name,
+                image: `${CAL_URL}/${user.username}/avatar.png`,
+                alt: user.name || undefined,
+              }))
+            : []),
+        ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
+      }
+      size={props.size}
+      truncateAfter={props.truncateAfter}
+    />
+  );
+};

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

@@ -1,92 +1,52 @@
 // Get router variables
-import {
-  ArrowLeftIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ClipboardCheckIcon,
-  ClockIcon,
-  CreditCardIcon,
-  GlobeIcon,
-  InformationCircleIcon,
-  LocationMarkerIcon,
-  RefreshIcon,
-  VideoCameraIcon,
-} from "@heroicons/react/solid";
 import { EventType } from "@prisma/client";
+import { SchedulingType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
-import { useContracts } from "contexts/contractsContext";
 import { TFunction } from "next-i18next";
-import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useReducer, useEffect, useMemo, useState } from "react";
+import { Toaster } from "react-hot-toast";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { z } from "zod";
 
-import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
 import dayjs, { Dayjs } from "@calcom/dayjs";
 import {
-  useIsEmbed,
-  useEmbedStyles,
   useEmbedNonStylesConfig,
+  useEmbedStyles,
   useIsBackgroundTransparent,
+  useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
-import { CAL_URL, WEBSITE_URL } from "@calcom/lib/constants";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+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 { trpc } from "@calcom/trpc/react";
-import DatePicker from "@calcom/ui/booker/DatePicker";
+import { Icon } from "@calcom/ui/Icon";
+import DatePicker from "@calcom/ui/v2/modules/booker/DatePicker";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 // import { timeZone } from "@lib/clock";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
-import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { detectBrowserTimeFormat } from "@lib/timeFormat";
 
+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";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 import { HeadSeo } from "@components/seo/head-seo";
-import AvatarGroup from "@components/ui/AvatarGroup";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-
+import { AvailableEventLocations } from "../AvailableEventLocations";
-type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
-
-export const locationKeyToString = (location: LocationObject, t: TFunction) => {
-  switch (location.type) {
-    case LocationType.InPerson:
-      return location.address || "In Person"; // If disabled address won't exist on the object
-    case LocationType.Link:
-      return location.link || "Link"; // If disabled link won't exist on the object
-    case LocationType.Phone:
-      return t("your_number");
-    case LocationType.UserPhone:
-      return t("phone_call");
-    case LocationType.GoogleMeet:
-      return "Google Meet";
-    case LocationType.Zoom:
-      return "Zoom";
-    case LocationType.Daily:
-      return "Cal Video";
-    case LocationType.Jitsi:
-      return "Jitsi";
-    case LocationType.Huddle01:
-      return "Huddle Video";
-    case LocationType.Tandem:
-      return "Tandem";
-    case LocationType.Teams:
-      return "Microsoft Teams";
-    default:
-      return null;
-  }
-};
 
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   const router = useRouter();
@@ -97,7 +57,7 @@ const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   return (
     <div className="flex h-full flex-col justify-end">
       <button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
-        <ArrowLeftIcon className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
+        <Icon.FiArrowLeft className="dark:text-darkgray-600 h-4 w-4 text-black transition-opacity hover:cursor-pointer" />
         <p className="sr-only">Go Back</p>
       </button>
     </div>
@@ -106,13 +66,17 @@ const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
 
 const useSlots = ({
   eventTypeId,
+  eventTypeSlug,
   startTime,
   endTime,
+  usernameList,
   timeZone,
 }: {
   eventTypeId: number;
+  eventTypeSlug: string;
   startTime?: Dayjs;
   endTime?: Dayjs;
+  usernameList: string[];
   timeZone?: string;
 }) => {
   const { data, isLoading, isIdle } = trpc.useQuery(
@@ -120,6 +84,8 @@ const useSlots = ({
       "viewer.public.slots.getSchedule",
       {
         eventTypeId,
+        eventTypeSlug,
+        usernameList,
         startTime: startTime?.toISOString() || "",
         endTime: endTime?.toISOString() || "",
         timeZone,
@@ -127,7 +93,6 @@ const useSlots = ({
     ],
     { enabled: !!startTime && !!endTime }
   );
-
   const [cachedSlots, setCachedSlots] = useState<NonNullable<typeof data>["slots"]>({});
 
   useEffect(() => {
@@ -145,15 +110,19 @@ const SlotPicker = ({
   timeFormat,
   timeZone,
   recurringEventCount,
+  users,
   seatsPerTimeSlot,
   weekStart = 0,
+  ethSignature,
 }: {
   eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
   timeFormat: string;
   timeZone?: string;
   seatsPerTimeSlot?: number;
   recurringEventCount?: number;
+  users: string[];
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  ethSignature?: string;
 }) => {
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
@@ -185,26 +154,32 @@ const SlotPicker = ({
   const { i18n, isLocaleReady } = useLocale();
   const { slots: _1 } = useSlots({
     eventTypeId: eventType.id,
+    eventTypeSlug: eventType.slug,
+    usernameList: users,
     startTime: selectedDate?.startOf("day"),
     endTime: selectedDate?.endOf("day"),
     timeZone,
   });
   const { slots: _2, isLoading } = useSlots({
     eventTypeId: eventType.id,
+    eventTypeSlug: eventType.slug,
+    usernameList: users,
     startTime: browsingDate?.startOf("month"),
     endTime: browsingDate?.endOf("month"),
     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 sm:mt-0 sm:min-w-[455px] md:px-5",
-          selectedDate ? "sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 " : "sm:pl-4"
+          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:p-4"
         )}
         includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
         locale={isLocaleReady ? i18n.language : "en"}
@@ -229,8 +204,7 @@ const SlotPicker = ({
           eventTypeSlug={eventType.slug}
           seatsPerTimeSlot={seatsPerTimeSlot}
           recurringCount={recurringEventCount}
-          schedulingType={eventType.schedulingType}
+          ethSignature={ethSignature}
-          users={[]}
         />
       )}
     </>
@@ -267,15 +241,15 @@ function TimezoneDropdown({
   };
 
   return (
-    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen} className="flex">
-      <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left 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-gray-600 dark:text-white">
+        <p className="text-sm font-medium">
-          <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+          <Icon.FiGlobe className="mr-[10px] ml-[2px] -mt-[2px] inline-block h-4 w-4" />
           {timeZone}
           {isTimeOptionsOpen ? (
-            <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+            <Icon.FiChevronUp className="ml-1 inline-block h-4 w-4" />
           ) : (
-            <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+            <Icon.FiChevronDown className="ml-1 inline-block h-4 w-4" />
           )}
         </p>
       </Collapsible.Trigger>
@@ -298,10 +272,14 @@ const dateQuerySchema = z.object({
 
 const useRouterQuery = <T extends string>(name: T) => {
   const router = useRouter();
-  const query = z.object({ [name]: z.string().optional() }).parse(router.query);
+  const existingQueryParams = router.asPath.split("?")[1];
+
+  const urlParams = new URLSearchParams(existingQueryParams);
+  const query = Object.fromEntries(urlParams);
 
   const setQuery = (newValue: string | number | null | undefined) => {
     router.replace({ query: { ...router.query, [name]: newValue } }, undefined, { shallow: true });
+    router.replace({ query: { ...router.query, ...query, [name]: newValue } }, undefined, { shallow: true });
   };
 
   return { [name]: query[name], setQuery } as {
@@ -309,6 +287,8 @@ const useRouterQuery = <T extends string>(name: T) => {
   } & { setQuery: typeof setQuery };
 };
 
+export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
+
 const AvailabilityPage = ({ profile, eventType }: Props) => {
   const router = useRouter();
   const isEmbed = useIsEmbed();
@@ -316,7 +296,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const { rescheduleUid } = query;
   useTheme(profile.theme);
   const { t } = useLocale();
-  const { contracts } = useContracts();
   const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
   const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
   const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
@@ -325,6 +304,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const [timeZone, setTimeZone] = useState<string>();
   const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
   const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+  const [gateState, gateDispatcher] = useReducer(
+    (state: GateState, newState: Partial<GateState>) => ({
+      ...state,
+      ...newState,
+    }),
+    {}
+  );
 
   useEffect(() => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
@@ -337,15 +323,6 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   // TODO: Improve this;
   useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
 
-  // TODO: this needs to be extracted elsewhere
-  useEffect(() => {
-    if (eventType.metadata.smartContractAddress) {
-      const eventOwner = eventType.users[0];
-      if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        router.replace(`/${eventOwner.username}`);
-    }
-  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
-
   const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
@@ -359,6 +336,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
     }
   }, [telemetry]);
 
+  // get dynamic user list here
+  const userList = eventType.users ? eventType.users.map((user) => user.username).filter(notEmpty) : [];
   // Recurring event sidebar requires more space
   const maxWidth = isAvailableTimesVisible
     ? recurringEventCount
@@ -376,14 +355,22 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
         onChangeTimeZone={setTimeZone}
       />
     ),
-    [timeZone]
+    [timeZone, timeFormat]
   );
   const rawSlug = profile.slug ? profile.slug.split("/") : [];
   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}`}
@@ -406,88 +393,51 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
           <div
             style={availabilityDatePickerEmbedStyles}
             className={classNames(
-              isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
+              isBackgroundTransparent ? "" : "dark:bg-darkgray-100 sm:dark:border-darkgray-300 bg-white",
-              "border-bookinglightest rounded-md md:border",
+              "border-bookinglightest overflow-hidden rounded-md md:border",
               isEmbed ? "mx-auto" : maxWidth
             )}>
             {/* mobile: details */}
             <div className="block px-4 pt-4 sm:p-8 md:hidden">
               <div>
-                <AvatarGroup
+                <UserAvatars
-                  border="border-2 dark:border-gray-800 border-white"
+                  profile={profile}
-                  items={
+                  users={eventType.users}
-                    [
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                      { image: profile.image, alt: profile.name, title: profile.name },
-                      ...eventType.users
-                        .filter((user) => user.name !== profile.name)
-                        .map((user) => ({
-                          title: user.name,
-                          image: `${CAL_URL}/${user.username}/avatar.png`,
-                          alt: user.name || undefined,
-                        })),
-                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                  }
                   size={9}
                   truncateAfter={5}
                 />
                 <div className="mt-4">
-                  <p className="break-words text-sm font-medium text-black dark:text-white">{profile.name}</p>
+                  <div className="dark:text-darkgray-900 mt-2 gap-2">
-                  <div className="mt-2 gap-2 dark:text-gray-100">
+                    <p className="break-words text-sm font-medium text-gray-600 dark:text-gray-300">
-                    <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
+                      {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-4">
+                    <div className="flex flex-col space-y-3">
                       {eventType?.description && (
-                        <p className="text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 flex py-1 text-sm font-medium text-gray-600">
-                          <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          <div>
-                          {eventType.description}
+                            <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                        </p>
+                          </div>
+                          <EventTypeDescriptionSafeHTML eventType={eventType} />
+                        </div>
                       )}
                       {eventType?.requiresConfirmation && (
-                        <p className="text-gray-600 dark:text-white">
+                        <p className="dark:text-darkgray-600 text-gray-600">
-                          <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           {t("requires_confirmation")}
                         </p>
                       )}
-                      {eventType.locations.length === 1 && (
+                      <AvailableEventLocations locations={eventType.locations} />
-                        <p className="text-gray-600 dark:text-white">
+                      <p className="dark:text-darkgray-600 text-gray-600">
-                          {Object.values(AppStoreLocationType).includes(
+                        <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                            eventType.locations[0].type as unknown as AppStoreLocationType
-                          ) ? (
-                            <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                          ) : (
-                            <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                          )}
-
-                          {locationKeyToString(eventType.locations[0], t)}
-                        </p>
-                      )}
-                      {eventType.locations.length > 1 && (
-                        <div className="flex-warp flex text-gray-600 dark:text-white">
-                          <div className="mr-[10px] ml-[2px] -mt-1 ">
-                            <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
-                          </div>
-                          <p>
-                            {eventType.locations.map((el, i, arr) => {
-                              return (
-                                <span key={el.type}>
-                                  {locationKeyToString(el, t)}{" "}
-                                  {arr.length - 1 !== i && (
-                                    <span className="font-light"> {t("or_lowercase")} </span>
-                                  )}
-                                </span>
-                              );
-                            })}
-                          </p>
-                        </div>
-                      )}
-                      <p className="text-gray-600 dark:text-white">
-                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                         {eventType.length} {t("minutes")}
                       </p>
                       {eventType.price > 0 && (
-                        <div className="text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 text-gray-600">
-                          <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
+                          <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -498,9 +448,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
-                        <div className="text-gray-600 dark:text-white">
+                        <div className="dark:text-darkgray-600 flex items-center text-gray-600">
-                          <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <Icon.FiRefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 shrink-0 text-gray-500" />
-                          <div className="ml-[27px]">
+                          <div>
                             <p className="mb-1 -ml-2 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                             </p>
@@ -508,13 +458,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              className="w-15 dark:text-darkgray-600 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
                               }}
                             />
-                            <p className="inline text-gray-600 dark:text-white">
+                            <p className="dark:text-darkgray-600 inline text-gray-600">
                               {t("occurrence", {
                                 count: recurringEventCount,
                               })}
@@ -528,12 +478,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         {/* Temp disabled booking?.startTime && rescheduleUid && (
                             <div>
                               <p
-                                className="mt-8 text-gray-600 dark:text-white"
+                                className="mt-8 text-gray-600 dark:text-darkgray-600"
                                 data-testid="former_time_p_mobile">
                                 {t("former_time")}
                               </p>
-                              <p className="text-gray-500 line-through dark:text-white">
+                              <p className="text-gray-500 line-through dark:text-darkgray-600">
-                                <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                                <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                                 {typeof booking.startTime === "string" &&
                                   parseDate(dayjs(booking.startTime), i18n)}
                               </p>
@@ -546,92 +496,51 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
               </div>
             </div>
 
-            <div className="p-4 sm:flex sm:py-5">
+            <div className="overflow-hidden sm:flex">
               <div
                 className={
-                  "hidden overflow-hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
+                  "sm:dark:border-darkgray-200 hidden overflow-hidden border-gray-200 p-5 sm:border-r md:flex md:flex-col " +
                   (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                 }>
-                <AvatarGroup
+                <UserAvatars
-                  border="border-2 dark:border-gray-800 border-white"
+                  profile={profile}
-                  items={
+                  users={eventType.users}
-                    [
+                  showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                      { image: profile.image, alt: profile.name, title: profile.name },
-                      ...eventType.users
-                        .filter((user) => user.name !== profile.name)
-                        .map((user) => ({
-                          title: user.name,
-                          alt: user.name,
-                          image: `${CAL_URL}/${user.username}/avatar.png`,
-                        })),
-                    ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                  }
                   size={10}
                   truncateAfter={3}
                 />
-                <h2 className="mt-3 break-words font-medium text-gray-500 dark:text-gray-300">
+                <h2 className="break-words text-sm font-medium text-gray-600 dark:text-gray-300 lg:mt-2">
                   {profile.name}
                 </h2>
-                <h1 className="font-cal mb-4 break-words text-xl font-semibold text-gray-900 dark:text-white">
+                <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl text-gray-900">
                   {eventType.title}
                 </h1>
-                <div className="flex flex-col space-y-4">
+                <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-gray-600 dark:text-white">
+                    <div className="flex">
                       <div>
-                        <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.FiInfo className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                       </div>
-                      <p>{eventType.description}</p>
+                      <EventTypeDescriptionSafeHTML eventType={eventType} />
                     </div>
                   )}
                   {eventType?.requiresConfirmation && (
-                    <div className="flex text-gray-600 dark:text-white">
+                    <div className="flex items-center">
                       <div>
-                        <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
                       </div>
                       {t("requires_confirmation")}
                     </div>
                   )}
-                  {eventType.locations.length === 1 && (
+                  <AvailableEventLocations locations={eventType.locations} />
-                    <p className="text-gray-600 dark:text-white">
+                  <p className="text-sm font-medium">
-                      {Object.values(AppStoreLocationType).includes(
+                    <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
-                        eventType.locations[0].type as unknown as AppStoreLocationType
-                      ) ? (
-                        <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      ) : (
-                        <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                      )}
-
-                      {locationKeyToString(eventType.locations[0], t)}
-                    </p>
-                  )}
-                  {eventType.locations.length > 1 && (
-                    <div className="flex-warp flex text-gray-600 dark:text-white">
-                      <div className="mr-[10px] ml-[2px] -mt-1 ">
-                        <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
-                      </div>
-                      <p>
-                        {eventType.locations.map((el, i, arr) => {
-                          return (
-                            <span key={el.type}>
-                              {locationKeyToString(el, t)}{" "}
-                              {arr.length - 1 !== i && (
-                                <span className="font-light"> {t("or_lowercase")} </span>
-                              )}
-                            </span>
-                          );
-                        })}
-                      </p>
-                    </div>
-                  )}
-                  <p className="text-gray-600 dark:text-white">
-                    <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                     {eventType.length} {t("minutes")}
                   </p>
                   {!rescheduleUid && eventType.recurringEvent && (
-                    <div className="text-gray-600 dark:text-white">
+                    <div className="flex items-start text-sm font-medium">
-                      <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                      <Icon.FiRefreshCcw className="float-left mr-[10px] mt-[7px] ml-[2px] inline-block h-4 w-4 " />
-                      <div className="ml-[27px]">
+                      <div>
                         <p className="mb-1 -ml-2 inline px-2 py-1">
                           {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
                         </p>
@@ -639,13 +548,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                           type="number"
                           min="1"
                           max={eventType.recurringEvent.count}
-                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          className="w-15 dark:bg-darkgray-200 h-7 rounded-sm border-gray-300 bg-white text-sm font-medium [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500"
                           defaultValue={eventType.recurringEvent.count}
                           onChange={(event) => {
                             setRecurringEventCount(parseInt(event?.target.value));
                           }}
                         />
-                        <p className="inline text-gray-600 dark:text-white">
+                        <p className="inline">
                           {t("occurrence", {
                             count: recurringEventCount,
                           })}
@@ -654,8 +563,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   {eventType.price > 0 && (
-                    <p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
+                    <p className="-ml-2 px-2 text-sm font-medium">
-                      <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={eventType.price / 100.0}
@@ -673,12 +582,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-3 text-gray-600 dark:text-white"
+                        className="mt-4 mb-3 text-gray-600 dark:text-darkgray-600"
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
-                      <p className="text-gray-500 line-through dark:text-white">
+                      <p className="text-gray-500 line-through dark:text-darkgray-600">
-                        <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-500" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>
@@ -695,15 +604,18 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                 eventType={eventType}
                 timeFormat={timeFormat}
                 timeZone={timeZone}
+                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,22 +1,11 @@
-import {
-  CalendarIcon,
-  ClockIcon,
-  CreditCardIcon,
-  ExclamationCircleIcon,
-  ExclamationIcon,
-  InformationCircleIcon,
-  ClipboardCheckIcon,
-  RefreshIcon,
-} from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
-import { useContracts } from "contexts/contractsContext";
+import { SchedulingType } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useSession } from "next-auth/react";
-import dynamic from "next/dynamic";
 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";
@@ -24,6 +13,14 @@ import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
+import {
+  locationKeyToString,
+  getEventLocationValue,
+  getEventLocationType,
+  EventLocationType,
+} from "@calcom/app-store/locations";
+import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
+import { LocationObject, LocationType } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
@@ -33,54 +30,39 @@ import {
 import CustomBranding from "@calcom/lib/CustomBranding";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
-import { createPaymentLink } from "@calcom/stripe/client";
+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";
 import { ensureArray } from "@lib/ensureArray";
-import useTheme from "@lib/hooks/useTheme";
-import { LocationObject, LocationType } from "@lib/location";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 
-import AvatarGroup from "@components/ui/AvatarGroup";
+import Gates, { Gate, GateState } from "@components/Gates";
-import type PhoneInputType from "@components/ui/form/PhoneInput";
+import { UserAvatars } from "@components/booking/UserAvatars";
+import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 
 import { BookPageProps } from "../../../pages/[user]/book";
 import { HashLinkPageProps } from "../../../pages/d/[link]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
-declare global {
+type BookingPageProps = BookPageProps | TeamBookingPageProps | HashLinkPageProps;
-  // eslint-disable-next-line no-var
-  var web3: {
-    currentProvider: {
-      selectedAddress: string;
-    };
-  };
-}
-
-/** These are like 40kb that not every user needs */
-const PhoneInput = dynamic(
-  () => import("@components/ui/form/PhoneInput")
-) as unknown as typeof PhoneInputType;
-
-type BookingPageProps = (BookPageProps | TeamBookingPageProps | HashLinkPageProps) & {
-  locationLabels: Record<LocationType, string>;
-};
 
 type BookingFormValues = {
   name: string;
   email: string;
   notes?: string;
-  locationType?: LocationType;
+  locationType?: EventLocationType["type"];
   guests?: string[];
   phone?: string;
   hostPhoneNumber?: string; // Maybe come up with a better way to name this to distingish between two types of phone numbers
@@ -97,7 +79,6 @@ const BookingPage = ({
   profile,
   isDynamicGroupBooking,
   recurringEventCount,
-  locationLabels,
   hasHashedBookingLink,
   hashedLink,
 }: BookingPageProps) => {
@@ -106,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) {
@@ -122,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;
@@ -146,16 +124,6 @@ const BookingPage = ({
         );
       }
 
-      const location = (function humanReadableLocation(location) {
-        if (!location) {
-          return;
-        }
-        if (location.includes("integration")) {
-          return t("web_conferencing_details_to_follow");
-        }
-        return location;
-      })(responseData.location);
-
       return router.push({
         pathname: "/success",
         query: {
@@ -166,7 +134,7 @@ const BookingPage = ({
           reschedule: !!rescheduleUid,
           name: attendees[0].name,
           email: attendees[0].email,
-          location,
+          location: responseData.location,
           eventName: profile.eventName || "",
           bookingId: id,
           isSuccessBookingPage: true,
@@ -212,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[]) || [],
@@ -227,17 +192,26 @@ const BookingPage = ({
     }
   }, [router.query.guest]);
 
-  const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
   const loggedInIsOwner = eventType?.users[0]?.id === session?.user?.id;
   const guestListEmails = !isDynamicGroupBooking
     ? booking?.attendees.slice(1).map((attendee) => attendee.email)
     : [];
 
+  // There should only exists one default userData variable for primaryAttendee.
+  const defaultUserValues = {
+    email: rescheduleUid
+      ? booking?.attendees[0].email
+      : router.query.email
+      ? (router.query.email as string)
+      : "",
+    name: rescheduleUid ? booking?.attendees[0].name : router.query.name ? (router.query.name as string) : "",
+  };
+
   const defaultValues = () => {
     if (!rescheduleUid) {
       return {
-        name: (router.query.name as string) || (!loggedInIsOwner && session?.user?.name) || "",
+        name: defaultUserValues.name || (!loggedInIsOwner && session?.user?.name) || "",
-        email: (router.query.email as string) || (!loggedInIsOwner && session?.user?.email) || "",
+        email: defaultUserValues.email || (!loggedInIsOwner && session?.user?.email) || "",
         notes: (router.query.notes as string) || "",
         guests: ensureArray(router.query.guest) as string[],
         customInputs: eventType.customInputs.reduce(
@@ -259,11 +233,12 @@ const BookingPage = ({
 
     const customInputType = booking.customInputs;
     return {
-      name: primaryAttendee.name || "",
+      name: defaultUserValues.name,
-      email: primaryAttendee.email || "",
+      email: defaultUserValues.email || "",
       guests: guestListEmails,
       notes: booking.description || "",
       rescheduleReason: "",
+      smsReminderNumber: booking.smsReminderNumber || undefined,
       customInputs: eventType.customInputs.reduce(
         (customInputs, input) => ({
           ...customInputs,
@@ -296,12 +271,12 @@ const BookingPage = ({
     resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
   });
 
-  const selectedLocation = useWatch({
+  const selectedLocationType = useWatch({
     control: bookingForm.control,
     name: "locationType",
-    defaultValue: ((): LocationType | undefined => {
+    defaultValue: ((): EventLocationType["type"] | undefined => {
       if (router.query.location) {
-        return router.query.location as LocationType;
+        return router.query.location as EventLocationType["type"];
       }
       if (locations.length === 1) {
         return locations[0]?.type;
@@ -309,37 +284,13 @@ const BookingPage = ({
     })(),
   });
 
-  const getLocationValue = (
+  const selectedLocation = getEventLocationType(selectedLocationType);
-    booking: Pick<BookingFormValues, "locationType" | "phone" | "hostPhoneNumber">
+  const AttendeeInput =
-  ) => {
+    selectedLocation?.attendeeInputType === "text"
-    const { locationType } = booking;
+      ? "input"
-    switch (locationType) {
+      : selectedLocation?.attendeeInputType === "phone"
-      case LocationType.Phone: {
+      ? PhoneInput
-        return booking.phone || "";
+      : null;
-      }
-      case LocationType.InPerson: {
-        return locationInfo(locationType)?.address || "";
-      }
-      case LocationType.Link: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.UserPhone: {
-        return locationInfo(locationType)?.hostPhoneNumber || "";
-      }
-      case LocationType.Around: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.Riverside: {
-        return locationInfo(locationType)?.link || "";
-      }
-      case LocationType.Whereby: {
-        return locationInfo(locationType)?.link || "";
-      }
-      // Catches all other location types, such as Google Meet, Zoom etc.
-      default:
-        return selectedLocation || "";
-    }
-  };
 
   // Calculate the booking date(s)
   let recurringStrings: string[] = [],
@@ -375,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,
@@ -400,9 +342,10 @@ const BookingPage = ({
         language: i18n.language,
         rescheduleUid,
         user: router.query.user,
-        location: getLocationValue(
+        location: getEventLocationValue(locations, {
-          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+          type: booking.locationType ? booking.locationType : selectedLocationType || "",
-        ),
+          phone: booking.phone,
+        }),
         metadata,
         customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
           label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
@@ -411,13 +354,13 @@ const BookingPage = ({
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
-          selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+        ethSignature: gateState.rainbowToken,
       }));
       recurringMutation.mutate(recurringBookings);
     } else {
       mutation.mutate({
         ...booking,
-        web3Details,
         start: dayjs(date).format(),
         end: dayjs(date).add(eventType.length, "minute").format(),
         eventTypeId: eventType.id,
@@ -427,9 +370,10 @@ const BookingPage = ({
         rescheduleUid,
         bookingUid: router.query.bookingUid as string,
         user: router.query.user,
-        location: getLocationValue(
+        location: getEventLocationValue(locations, {
-          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+          type: (booking.locationType ? booking.locationType : selectedLocationType) || "",
-        ),
+          phone: booking.phone,
+        }),
         metadata,
         customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
           label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
@@ -438,15 +382,18 @@ const BookingPage = ({
         hasHashedBookingLink,
         hashedLink,
         smsReminderNumber:
-          selectedLocation === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+          selectedLocationType === LocationType.Phone ? booking.phone : booking.smsReminderNumber,
+        ethSignature: gateState.rainbowToken,
       });
     }
   };
 
-  const disableInput = !!rescheduleUid;
+  // Should be disabled when rescheduleUid is present and data was found in defaultUserValues name/email fields.
+  const disableInput = !!rescheduleUid && !!defaultUserValues.email && !!defaultUserValues.name;
+  const disableLocations = !!rescheduleUid;
   const disabledExceptForOwner = disableInput && !loggedInIsOwner;
   const inputClassName =
-    "focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
+    "dark:placeholder:text-darkgray-600 focus:border-brand dark:border-darkgray-300 dark:text-darkgray-900 block w-full rounded-md border-gray-300 text-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:bg-transparent dark:selection:bg-green-500 disabled:dark:text-gray-500";
 
   let isSmsReminderNumberNeeded = false;
 
@@ -463,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
@@ -491,127 +446,123 @@ const BookingPage = ({
           className={classNames(
             "main overflow-hidden",
             isEmbed ? "" : "border border-gray-200",
-            isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
+            isBackgroundTransparent ? "" : "dark:border-1 dark:bg-darkgray-100 bg-white",
-            "rounded-md dark:border-gray-600 sm:border"
+            "dark:border-darkgray-300 rounded-md sm:border"
           )}>
-          <div className="px-4 py-5 sm:flex sm:p-4">
+          <div className="sm:flex">
-            <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
+            <div className="sm:dark:border-darkgray-300 dark:text-darkgray-600 flex flex-col px-6 pt-6 pb-0 text-gray-600 sm:w-1/2 sm:border-r sm:pb-6">
-              <AvatarGroup
+              <UserAvatars
-                border="border-2 border-white dark:border-gray-800"
+                profile={profile}
-                size={14}
+                users={eventType.users}
-                items={[
+                showMembers={eventType.schedulingType !== SchedulingType.ROUND_ROBIN}
-                  { image: profile.image || "", alt: profile.name || "", title: profile.name || "" },
+                size={10}
-                ].concat(
+                truncateAfter={3}
-                  eventType.users
-                    .filter((user) => user.name !== profile.name)
-                    .map((user) => ({
-                      title: user.name || "",
-                      image: user.avatar || "",
-                      alt: user.name || "",
-                    }))
-                )}
               />
-              <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
+              <h2 className="mt-2 break-words text-sm font-medium text-gray-500 dark:text-gray-300">
                 {profile.name}
               </h2>
-              <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
+              <h1 className="font-cal dark:text-darkgray-900 break-words text-2xl text-gray-900 ">
                 {eventType.title}
               </h1>
-              {!!eventType.seatsPerTimeSlot && (
+              <div className="mt-4 flex flex-col space-y-3 lg:mt-9">
-                <p
+                {eventType?.description && (
-                  className={`${
+                  <div className="dark:text-darkgray-600 flex text-sm font-medium text-gray-600">
-                    booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                    <div>
-                      ? "text-rose-600"
+                      <Icon.FiInfo className="dark:text-darkgray-600 mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-500" />
-                      : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
-                      ? "text-yellow-500"
-                      : "text-emerald-400"
-                  } mb-2`}>
-                  {booking
-                    ? eventType.seatsPerTimeSlot - booking.attendees.length
-                    : eventType.seatsPerTimeSlot}{" "}
-                  / {eventType.seatsPerTimeSlot} {t("seats_available")}
-                </p>
-              )}
-              {eventType?.description && (
-                <p className="text-bookinglight mb-2 dark:text-white">
-                  <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                  {eventType.description}
-                </p>
-              )}
-              {eventType?.requiresConfirmation && (
-                <p className="text-bookinglight mb-2 dark:text-white">
-                  <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
-                  {t("requires_confirmation")}
-                </p>
-              )}
-              <p className="text-bookinglight mb-2 dark:text-white">
-                <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                {eventType.length} {t("minutes")}
-              </p>
-              {eventType.price > 0 && (
-                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
-                  <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                  <IntlProvider locale="en">
-                    <FormattedNumber
-                      value={eventType.price / 100.0}
-                      style="currency"
-                      currency={eventType.currency.toUpperCase()}
-                    />
-                  </IntlProvider>
-                </p>
-              )}
-              {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                <div className="mb-3 text-gray-600 dark:text-white">
-                  <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
-                  <p className="mb-1 -ml-2 inline px-2 py-1">
-                    {getEveryFreqFor({
-                      t,
-                      recurringEvent: eventType.recurringEvent,
-                      recurringCount: recurringEventCount,
-                    })}
-                  </p>
-                </div>
-              )}
-              <div className="text-bookinghighlight mb-4 flex">
-                <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
-                <div className="-mt-1">
-                  {(rescheduleUid || !eventType.recurringEvent?.freq) &&
-                    parseDate(dayjs(date).tz(timeZone()), i18n)}
-                  {!rescheduleUid &&
-                    eventType.recurringEvent?.freq &&
-                    recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
-                  {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
-                    <div className="flex">
-                      <Tooltip
-                        content={recurringStrings.slice(5).map((aDate, key) => (
-                          <p key={key}>{aDate}</p>
-                        ))}>
-                        <p className="text-gray-600 dark:text-white">
-                          {t("plus_more", { count: recurringStrings.length - 5 })}
-                        </p>
-                      </Tooltip>
                     </div>
-                  )}
+                    <EventTypeDescriptionSafeHTML eventType={eventType} />
-                </div>
+                  </div>
-              </div>
+                )}
-              {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
+                {eventType?.requiresConfirmation && (
-                <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
+                  <div className="dark:text-darkgray-600 flex items-center text-sm font-medium text-gray-600">
-                  {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
+                    <div>
+                      <Icon.FiCheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 " />
+                    </div>
+                    {t("requires_confirmation")}
+                  </div>
+                )}
+                <p className="dark:text-darkgray-600 text-sm font-medium text-gray-600">
+                  <Icon.FiClock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4" />
+                  {eventType.length} {t("minutes")}
                 </p>
-              )}
+                {eventType.price > 0 && (
-              {booking?.startTime && rescheduleUid && (
+                  <p className="text-bookinglight -ml-2 px-2 text-sm ">
-                <div>
+                    <Icon.FiCreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                  <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
+                    <IntlProvider locale="en">
-                    {t("former_time")}
+                      <FormattedNumber
-                  </p>
+                        value={eventType.price / 100.0}
-                  <p className="text-gray-500 line-through dark:text-white">
+                        style="currency"
-                    <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        currency={eventType.currency.toUpperCase()}
-                    {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                      />
+                    </IntlProvider>
                   </p>
+                )}
+                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                  <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
+                    <Icon.FiRefreshCw className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                    <p className="-ml-2 inline-block items-center px-2">
+                      {getEveryFreqFor({
+                        t,
+                        recurringEvent: eventType.recurringEvent,
+                        recurringCount: recurringEventCount,
+                      })}
+                    </p>
+                  </div>
+                )}
+                <div className="text-bookinghighlight flex items-start text-sm">
+                  <Icon.FiCalendar className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
+                  <div className="text-sm font-medium">
+                    {(rescheduleUid || !eventType.recurringEvent?.freq) &&
+                      parseDate(dayjs(date).tz(timeZone()), i18n)}
+                    {!rescheduleUid &&
+                      eventType.recurringEvent?.freq &&
+                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                      <div className="flex">
+                        <Tooltip
+                          content={recurringStrings.slice(5).map((aDate, key) => (
+                            <p key={key}>{aDate}</p>
+                          ))}>
+                          <p className="dark:text-darkgray-600 text-sm">
+                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              )}
+                {booking?.startTime && rescheduleUid && (
+                  <div>
+                    <p className="mt-8 mb-2 text-sm " data-testid="former_time_p">
+                      {t("former_time")}
+                    </p>
+                    <p className="line-through ">
+                      <Icon.FiCalendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                    </p>
+                  </div>
+                )}
+                {!!eventType.seatsPerTimeSlot && (
+                  <div className="text-bookinghighlight flex items-start text-sm">
+                    <Icon.FiUser className="mr-[10px] ml-[2px] mt-[2px] inline-block h-4 w-4" />
+                    <p
+                      className={`${
+                        booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                          ? "text-rose-600"
+                          : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                          ? "text-yellow-500"
+                          : "text-bookinghighlight"
+                      } mb-2 font-medium`}>
+                      {booking
+                        ? eventType.seatsPerTimeSlot - booking.attendees.length
+                        : eventType.seatsPerTimeSlot}{" "}
+                      / {eventType.seatsPerTimeSlot} {t("seats_available")}
+                    </p>
+                  </div>
+                )}
+              </div>
             </div>
-            <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
+            <div className="p-6 sm:w-1/2">
               <Form form={bookingForm} handleSubmit={bookEvent}>
                 <div className="mb-4">
                   <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
@@ -640,9 +591,7 @@ const BookingPage = ({
                       required
                       className={classNames(
                         inputClassName,
-                        bookingForm.formState.errors.email
+                        bookingForm.formState.errors.email && "!focus:ring-red-700 !border-red-700"
-                          ? "border-red-700 focus:ring-red-700"
-                          : " border-gray-300  dark:border-gray-900"
                       )}
                       placeholder="you@example.com"
                       type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
@@ -650,7 +599,7 @@ const BookingPage = ({
                     />
                     {bookingForm.formState.errors.email && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.FiInfo className="mr-2 h-3 w-3" />
                         <p>{t("email_validation_error")}</p>
                       </div>
                     )}
@@ -661,23 +610,34 @@ const BookingPage = ({
                     <span className="block text-sm font-medium text-gray-700 dark:text-white">
                       {t("location")}
                     </span>
-                    {locations.map((location, i) => (
+                    {locations.map((location, i) => {
-                      <label key={i} className="block">
+                      const locationString = locationKeyToString(location);
-                        <input
+                      // TODO: Right now selectedLocationType isn't send by getSSP. Once that's available defaultChecked should work and show the location in the original booking
-                          type="radio"
+                      const defaultChecked = rescheduleUid ? selectedLocationType === location.type : i === 0;
-                          className="location h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                      if (typeof locationString !== "string") {
-                          {...bookingForm.register("locationType", { required: true })}
+                        // It's possible that location app got uninstalled
-                          value={location.type}
+                        return null;
-                          defaultChecked={selectedLocation === location.type}
+                      }
-                        />
+                      return (
-                        <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-gray-500">
+                        <label key={i} className="block">
-                          {locationLabels[location.type]}
+                          <input
-                        </span>
+                            type="radio"
-                      </label>
+                            disabled={!!disableLocations}
-                    ))}
+                            className="location dark:bg-darkgray-300 dark:border-darkgray-300 h-4 w-4 border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                            {...bookingForm.register("locationType", { required: true })}
+                            value={location.type}
+                            defaultChecked={defaultChecked}
+                          />
+                          <span className="text-sm ltr:ml-2 rtl:mr-2 dark:text-white">
+                            {locationKeyToString(location)}
+                          </span>
+                        </label>
+                      );
+                    })}
                   </div>
                 )}
-                {selectedLocation === LocationType.Phone && (
+                {/* TODO: Change name and id ="phone" to something generic */}
+                {AttendeeInput && (
                   <div className="mb-4">
                     <label
                       htmlFor="phone"
@@ -685,10 +645,10 @@ const BookingPage = ({
                       {t("phone_number")}
                     </label>
                     <div className="mt-1">
-                      <PhoneInput<BookingFormValues>
+                      <AttendeeInput<BookingFormValues>
                         control={bookingForm.control}
                         name="phone"
-                        placeholder={t("enter_phone_number")}
+                        placeholder={t(selectedLocation?.attendeeInputPlaceholder || "")}
                         id="phone"
                         required
                         disabled={disableInput}
@@ -696,7 +656,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.phone && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.FiInfo className="mr-2 h-3 w-3" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -718,6 +678,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           rows={3}
                           className={inputClassName}
@@ -731,6 +692,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder={input.placeholder}
@@ -743,6 +705,7 @@ const BookingPage = ({
                           {...bookingForm.register(`customInputs.${input.id}`, {
                             required: input.required,
                           })}
+                          required={input.required}
                           id={"custom_" + input.id}
                           className={inputClassName}
                           placeholder=""
@@ -756,6 +719,7 @@ const BookingPage = ({
                             {...bookingForm.register(`customInputs.${input.id}`, {
                               required: input.required,
                             })}
+                            required={input.required}
                             id={"custom_" + input.id}
                             className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
                             placeholder=""
@@ -770,72 +734,61 @@ 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">
+                        className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                        {/*<UserAddIcon className="inline-block w-5 h-5 mr-1 -mt-1" />*/}
+                        {t("guests")}
-                        {t("additional_guests")}
                       </label>
-                    )}
+                      {!disableInput && (
-                    {guestToggle && (
+                        <Controller
-                      <div>
+                          control={bookingForm.control}
-                        <label
+                          name="guests"
-                          htmlFor="guests"
+                          render={({ field: { onChange, value } }) => (
-                          className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
+                            <ReactMultiEmail
-                          {t("guests")}
+                              className="relative"
-                        </label>
+                              placeholder={<span className="dark:text-darkgray-600">guest@example.com</span>}
-                        {!disableInput && (
+                              emails={value}
-                          <Controller
+                              onChange={onChange}
-                            control={bookingForm.control}
+                              getLabel={(
-                            name="guests"
+                                email: string,
-                            render={({ field: { onChange, value } }) => (
+                                index: number,
-                              <ReactMultiEmail
+                                removeEmail: (index: number) => void
-                                className="relative"
+                              ) => {
-                                placeholder="guest@example.com"
+                                return (
-                                emails={value}
+                                  <div data-tag key={index} className="cursor-pointer">
-                                onChange={onChange}
+                                    {email}
-                                getLabel={(
+                                    {!disableInput && (
-                                  email: string,
+                                      <span data-tag-handle onClick={() => removeEmail(index)}>
-                                  index: number,
+                                        ×
-                                  removeEmail: (index: number) => void
+                                      </span>
-                                ) => {
+                                    )}
-                                  return (
+                                  </div>
-                                    <div data-tag key={index} className="cursor-pointer">
+                                );
-                                      {email}
+                              }}
-                                      {!disableInput && (
+                            />
-                                        <span data-tag-handle onClick={() => removeEmail(index)}>
+                          )}
-                                          ×
+                        />
-                                        </span>
+                      )}
-                                      )}
+                      {/* Custom code when guest emails should not be editable */}
-                                    </div>
+                      {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>
-                        {/* Custom code when guest emails should not be editable */}
+                              </div>
-                        {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 */}
+                        </div>
-                            {guestListEmails.map((email, index) => {
+                      )}
-                              return (
+                    </div>
-                                <div key={index} className="cursor-pointer">
-                                  <span data-tag>{email}</span>
-                                </div>
-                              );
-                            })}
-                          </div>
-                        )}
-                      </div>
-                    )}
                   </div>
                 )}
-                {isSmsReminderNumberNeeded && selectedLocation !== LocationType.Phone && (
+                {isSmsReminderNumberNeeded && selectedLocationType !== LocationType.Phone && (
                   <div className="mb-4">
                     <label
                       htmlFor="smsReminderNumber"
@@ -849,12 +802,11 @@ const BookingPage = ({
                         placeholder={t("enter_phone_number")}
                         id="smsReminderNumber"
                         required
-                        disabled={disableInput}
                       />
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.FiInfo className="mr-2 h-3 w-3" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -874,7 +826,6 @@ const BookingPage = ({
                       rows={3}
                       className={inputClassName}
                       placeholder={t("reschedule_placeholder")}
-                      disabled={disabledExceptForOwner}
                     />
                   ) : (
                     <textarea
@@ -889,16 +840,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 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) && (
@@ -908,7 +876,7 @@ const BookingPage = ({
           </div>
         </div>
       </main>
-    </div>
+    </Gates>
   );
 };
 
@@ -922,7 +890,7 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+          <Icon.FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
         </div>
         <div className="ltr:ml-3 rtl:mr-3">
           <p className="text-sm text-yellow-700">

apps/web/components/dialog/DeleteStripeDialogContent.tsx

@@ -1,11 +1,10 @@
-import { ExclamationIcon } from "@heroicons/react/outline";
-import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/Button";
 import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 export type DeleteStripeDialogContentProps = {
   cancelAllBookingsBtnText?: string;
@@ -37,17 +36,17 @@ export default function DeleteStripeDialogContent(props: PropsWithChildren<Delet
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-red-600" />
+                <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
               <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-orange-600" />
+                <Icon.FiAlertTriangle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <CheckIcon className="h-5 w-5 text-green-600" />
+                <Icon.FiCheck className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>

apps/web/components/dialog/EditLocationDialog.tsx

@@ -1,62 +1,75 @@
-import { LocationMarkerIcon } from "@heroicons/react/solid";
+import { ErrorMessage } from "@hookform/error-message";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
-import dynamic from "next/dynamic";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { z } from "zod";
 
-import classNames from "@calcom/lib/classNames";
+import {
+  LocationType,
+  getEventLocationType,
+  EventLocationType,
+  LocationObject,
+} from "@calcom/app-store/locations";
+import { getMessageForOrganizer } from "@calcom/app-store/locations";
+import { getHumanReadableLocationValue } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
+import PhoneInput from "@calcom/ui/form/PhoneInputLazy";
 import { Form } from "@calcom/ui/form/fields";
 
 import { QueryCell } from "@lib/QueryCell";
-import { linkValueToString } from "@lib/linkValueToString";
-import { LocationType } from "@lib/location";
-import { LocationOptionsToString } from "@lib/locationOptions";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
-import type PhoneInputType from "@components/ui/form/PhoneInput";
 import Select from "@components/ui/form/Select";
 
-const PhoneInput = dynamic(
-  () => import("@components/ui/form/PhoneInput")
-) as unknown as typeof PhoneInputType;
-
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
 type OptionTypeBase = {
   label: string;
-  value: LocationType;
+  value: EventLocationType["type"];
   disabled?: boolean;
 };
 
-type LocationFormValues = {
-  locationType: LocationType;
-  locationAddress?: string;
-  locationLink?: string;
-  locationPhoneNumber?: string;
-  displayLocationPublicly?: boolean;
-};
 interface ISetLocationDialog {
-  saveLocation: (newLocationType: LocationType, details: { [key: string]: string }) => void;
+  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: OptionTypeBase;
   booking?: BookingItem;
-  defaultValues?: {
+  defaultValues?: LocationObject[];
-    type: LocationType;
-    address?: string | undefined;
-    link?: string | undefined;
-    hostPhoneNumber?: string | undefined;
-    displayLocationPublicly?: boolean | undefined;
-  }[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
   setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
 }
 
+const LocationInput = (props: {
+  eventLocationType: EventLocationType;
+  locationFormMethods: ReturnType<typeof useForm>;
+  id: string;
+  required: boolean;
+  placeholder: string;
+  className?: string;
+  defaultValue?: string;
+}): JSX.Element | null => {
+  const { eventLocationType, locationFormMethods, ...remainingProps } = props;
+  if (eventLocationType?.organizerInputType === "text") {
+    return (
+      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
+    );
+  } else if (eventLocationType?.organizerInputType === "phone") {
+    return (
+      <PhoneInput
+        name={eventLocationType.variable}
+        control={locationFormMethods.control}
+        {...remainingProps}
+      />
+    );
+  }
+  return null;
+};
+
 export const EditLocationDialog = (props: ISetLocationDialog) => {
   const {
     saveLocation,
@@ -79,32 +92,52 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   const locationFormSchema = z.object({
     locationType: z.string(),
+    phone: z.string().optional().nullable(),
     locationAddress: z.string().optional(),
-    locationLink:
+    locationLink: z
-      selection?.value === LocationType.Whereby
+      .string()
-        ? z
+      .optional()
-            .string()
+      .superRefine((val, ctx) => {
-            .regex(/^http(s)?:\/\/(www\.)?whereby.com\/[a-zA-Z0-9]*/)
+        if (
-            .optional()
+          eventLocationType &&
-        : selection?.value === LocationType.Around
+          !eventLocationType.default &&
-        ? z
+          eventLocationType.linkType === "static" &&
-            .string()
+          eventLocationType.urlRegExp
-            .regex(/^http(s)?:\/\/(www\.)?around.co\/[a-zA-Z0-9]*/)
+        ) {
-            .optional()
+          const valid = z.string().regex(new RegExp(eventLocationType.urlRegExp)).safeParse(val).success;
-        : selection?.value === LocationType.Riverside
+          if (!valid) {
-        ? z
+            const sampleUrl = eventLocationType.organizerInputPlaceholder;
-            .string()
+            ctx.addIssue({
-            .regex(/^http(s)?:\/\/(www\.)?riverside.fm\/studio\/[a-zA-Z0-9]*/)
+              code: z.ZodIssueCode.custom,
-            .optional()
+              message: `Invalid URL for ${eventLocationType.label}. ${
-        : z.string().url().optional(),
+                sampleUrl ? "Sample URL: " + sampleUrl : ""
+              }`,
+            });
+          }
+          return;
+        }
+
+        const valid = z.string().url().optional().safeParse(val).success;
+        if (!valid) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: `Invalid URL`,
+          });
+        }
+        return;
+      }),
     displayLocationPublicly: z.boolean().optional(),
     locationPhoneNumber: z
       .string()
-      .refine((val) => isValidPhoneNumber(val))
+      .nullable()
+      .refine((val) => {
+        if (val === null) return false;
+        return isValidPhoneNumber(val);
+      })
       .optional(),
   });
 
-  const locationFormMethods = useForm<LocationFormValues>({
+  const locationFormMethods = useForm({
     mode: "onSubmit",
     resolver: zodResolver(locationFormSchema),
   });
@@ -114,28 +147,43 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     name: "locationType",
   });
 
-  const LocationOptions =
+  const eventLocationType = getEventLocationType(selectedLocation);
-    selectedLocation === LocationType.InPerson ? (
+
-      <>
+  const defaultLocation = defaultValues?.find(
+    (location: { type: EventLocationType["type"] }) => location.type === eventLocationType?.type
+  );
+
+  const LocationOptions = (() => {
+    if (eventLocationType && eventLocationType.organizerInputType && LocationInput) {
+      if (!eventLocationType.variable) {
+        console.error("eventLocationType.variable can't be undefined");
+        return null;
+      }
+
+      return (
         <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
+          <label htmlFor="locationInput" className="block text-sm font-medium text-gray-700">
-            {t("set_address_place")}
+            {t(eventLocationType.messageForOrganizer || "")}
           </label>
           <div className="mt-1">
-            <input
+            <LocationInput
-              type="text"
+              locationFormMethods={locationFormMethods}
-              {...locationFormMethods.register("locationAddress")}
+              eventLocationType={eventLocationType}
-              id="address"
+              id="locationInput"
+              placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
               className="block w-full rounded-sm border-gray-300 text-sm"
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
-                defaultValues
+                defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.InPerson
-                    )?.address
-                  : undefined
               }
             />
+            <ErrorMessage
+              errors={locationFormMethods.formState.errors}
+              name={eventLocationType.variable}
+              className="mt-1 text-sm text-red-500"
+              as="p"
+            />
           </div>
           {!booking && (
             <div className="mt-3">
@@ -144,12 +192,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 control={locationFormMethods.control}
                 render={() => (
                   <CheckboxField
-                    defaultChecked={
+                    defaultChecked={defaultLocation?.displayLocationPublicly}
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.InPerson)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
                     description={t("display_location_label")}
                     onChange={(e) =>
                       locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
@@ -161,226 +204,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             </div>
           )}
         </div>
-      </>
+      );
-    ) : selectedLocation === LocationType.Link ? (
+    } else {
-      <div>
+      return <p className="text-sm">{getMessageForOrganizer(selectedLocation, t)}</p>;
-        <label htmlFor="link" className="block text-sm font-medium text-gray-700">
+    }
-          {t("set_link_meeting")}
+  })();
-        </label>
-        <div className="mt-1">
-          <input
-            type="text"
-            {...locationFormMethods.register("locationLink")}
-            required
-            id="link"
-            className="block w-full rounded-sm border-gray-300 sm:text-sm"
-            defaultValue={
-              defaultValues
-                ? defaultValues.find(
-                    (location: { type: LocationType }) => location.type === LocationType.Link
-                  )?.link
-                : undefined
-            }
-          />
-          {locationFormMethods.formState.errors.locationLink && (
-            <p className="mt-1 text-sm text-red-500">{t("url_start_with_https")}</p>
-          )}
-        </div>
-        {!booking && (
-          <div className="mt-3">
-            <Controller
-              name="displayLocationPublicly"
-              control={locationFormMethods.control}
-              render={() => (
-                <CheckboxField
-                  description={t("display_location_label")}
-                  defaultChecked={
-                    defaultValues
-                      ? defaultValues.find((location) => location.type === LocationType.Link)
-                          ?.displayLocationPublicly
-                      : undefined
-                  }
-                  onChange={(e) => locationFormMethods.setValue("displayLocationPublicly", e.target.checked)}
-                  informationIconText={t("display_location_info_badge")}
-                />
-              )}
-            />
-          </div>
-        )}
-      </div>
-    ) : selectedLocation === LocationType.UserPhone ? (
-      <div>
-        <label htmlFor="phonenumber" className="block text-sm font-medium text-gray-700">
-          {t("set_your_phone_number")}
-          {locationFormMethods.formState?.errors?.locationPhoneNumber?.message}
-        </label>
-        <div className="mt-1">
-          <PhoneInput<LocationFormValues>
-            control={locationFormMethods.control}
-            name="locationPhoneNumber"
-            required
-            id="locationPhoneNumber"
-            placeholder={t("host_phone_number")}
-            defaultValue={
-              defaultValues
-                ? defaultValues.find(
-                    (location: { type: LocationType }) => location.type === LocationType.UserPhone
-                  )?.hostPhoneNumber
-                : undefined
-            }
-          />
-          {locationFormMethods.formState.errors.locationPhoneNumber && (
-            <p className="mt-1 text-sm text-red-500">{t("invalid_number")}</p>
-          )}
-        </div>
-      </div>
-    ) : selectedLocation === LocationType.Whereby ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_whereby_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="wherebylink"
-              placeholder="https://www.whereby.com/cal"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Whereby
-                    )?.address
-                  : undefined
-              }
-            />
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Whereby)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : selectedLocation === LocationType.Around ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_around_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="aroundlink"
-              placeholder="https://www.around.co/rick"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Around
-                    )?.address
-                  : undefined
-              }
-            />
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Around)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : selectedLocation === LocationType.Riverside ? (
-      <>
-        <div>
-          <label htmlFor="address" className="block text-sm font-medium text-gray-700">
-            {t("set_riverside_link")}
-          </label>
-          <div className="mt-1">
-            <input
-              type="text"
-              {...locationFormMethods.register("locationLink")}
-              id="aroundlink"
-              placeholder="https://www.riverside.fm/studio/rick"
-              required
-              className="block w-full rounded-sm border-gray-300 text-sm"
-              defaultValue={
-                defaultValues
-                  ? defaultValues.find(
-                      (location: { type: LocationType }) => location.type === LocationType.Riverside
-                    )?.address
-                  : undefined
-              }
-            />
-          </div>
-          {!booking && (
-            <div className="mt-3">
-              <Controller
-                name="displayLocationPublicly"
-                control={locationFormMethods.control}
-                render={() => (
-                  <CheckboxField
-                    defaultChecked={
-                      defaultValues
-                        ? defaultValues.find((location) => location.type === LocationType.Riverside)
-                            ?.displayLocationPublicly
-                        : undefined
-                    }
-                    description={t("display_location_label")}
-                    onChange={(e) =>
-                      locationFormMethods.setValue("displayLocationPublicly", e.target.checked)
-                    }
-                    informationIconText={t("display_location_info_badge")}
-                  />
-                )}
-              />
-            </div>
-          )}
-        </div>
-      </>
-    ) : (
-      <p className="text-sm">{LocationOptionsToString(selectedLocation, t)}</p>
-    );
 
   return (
     <Dialog open={isOpenDialog}>
@@ -388,7 +216,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
         <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
             <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-              <LocationMarkerIcon className="text-primary-600 h-6 w-6" />
+              <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -403,7 +231,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
           {booking && (
             <>
               <p className="mt-6 mb-2 ml-1 text-sm font-bold text-black">{t("current_location")}:</p>
-              <p className="mb-2 ml-1 text-sm text-black">{linkValueToString(booking.location, t)}</p>
+              <p className="mb-2 ml-1 text-sm text-black">
+                {getHumanReadableLocationValue(booking.location, t)}
+              </p>
             </>
           )}
           <Form
@@ -415,22 +245,29 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               if (newLocation === LocationType.InPerson) {
                 details = {
                   address: values.locationAddress,
-                  displayLocationPublicly,
                 };
               }
+              const eventLocationType = getEventLocationType(newLocation);
+
+              // TODO: There can be a property that tells if it is to be saved in `link`
               if (
                 newLocation === LocationType.Link ||
-                newLocation === LocationType.Whereby ||
+                (!eventLocationType?.default && eventLocationType?.linkType === "static")
-                newLocation === LocationType.Around ||
-                newLocation === LocationType.Riverside
               ) {
-                details = { link: values.locationLink, displayLocationPublicly };
+                details = { link: values.locationLink };
               }
 
               if (newLocation === LocationType.UserPhone) {
                 details = { hostPhoneNumber: values.locationPhoneNumber };
               }
 
+              if (eventLocationType?.organizerInputType) {
+                details = {
+                  ...details,
+                  displayLocationPublicly,
+                };
+              }
+
               saveLocation(newLocation, details);
               setShowLocationModal(false);
               setSelectedLocation?.(undefined);
@@ -459,8 +296,8 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                             ? locationOptions.filter((location) => location.value !== "phone")
                             : locationOptions
                         }
-                        isSearchable={false}
+                        isSearchable
-                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
                         onChange={(val) => {
                           if (val) {
                             locationFormMethods.setValue("locationType", val.value);

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,3 @@
-import { ClockIcon } from "@heroicons/react/outline";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
 import { useMutation } from "react-query";
@@ -6,9 +5,10 @@ import { useMutation } from "react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
-import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { TextArea } from "@calcom/ui/form/fields";
+import Button from "@calcom/ui/v2/core/Button";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
 
@@ -58,7 +58,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <ClockIcon className="m-auto h-6 w-6" />
+            <Icon.FiClock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />

apps/web/components/eventtype/CreateEventType.tsx

@@ -1,4 +1,3 @@
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
 import { useSession } from "next-auth/react";
@@ -23,6 +22,7 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
@@ -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"
@@ -152,7 +153,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
         options={props.options}
       />
 
-      <DialogContent className="overflow-y-auto">
+      <DialogContent>
         <div className="mb-4">
           <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
             {teamId ? t("add_new_team_event_type") : t("add_new_event_type")}
@@ -286,14 +287,14 @@ export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
         <Button
           onClick={() => props.openModal(props.options[0])}
           data-testid="new-event-type"
-          StartIcon={PlusIcon}
+          StartIcon={Icon.FiPlus}
           disabled={!props.canAddEvents}>
           {t("new_event_type_btn")}
         </Button>
       ) : (
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button EndIcon={ChevronDownIcon}>{t("new_event_type_btn")}</Button>
+            <Button EndIcon={Icon.FiChevronDown}>{t("new_event_type_btn")}</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
@@ -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

@@ -1,11 +1,3 @@
-import {
-  ClipboardCheckIcon,
-  ClockIcon,
-  CreditCardIcon,
-  RefreshIcon,
-  UserIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
 import { Prisma, SchedulingType } from "@prisma/client";
 import { useMemo } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
@@ -13,6 +5,7 @@ import { FormattedNumber, IntlProvider } from "react-intl";
 import { parseRecurringEvent } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
+import { Icon } from "@calcom/ui/Icon";
 
 import classNames from "@lib/classNames";
 
@@ -37,41 +30,41 @@ 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>
         )}
-        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
+        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
-          <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <Icon.FiClock className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
-            {eventType.length}m
+            {eventType.length} {t("minutes")}
           </li>
           {eventType.schedulingType ? (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <Icon.FiUsers className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <Icon.FiUser className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <Icon.FiRefreshCw className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("repeats_up_to", {
                 count: recurringEvent.count,
               })}
             </li>
           )}
           {eventType.price > 0 && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <Icon.FiCreditCard className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}
@@ -82,8 +75,8 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             </li>
           )}
           {eventType.requiresConfirmation && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800 dark:bg-gray-900 dark:text-white">
-              <ClipboardCheckIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              <Icon.FiCheckSquare className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("requires_confirmation")}
             </li>
           )}

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

@@ -0,0 +1,12 @@
+export type EventTypeDescriptionSafeProps = {
+  eventType: { description: string | null };
+};
+
+export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
+  const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
+  // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts
+  if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML };
+  return <div {...props} />;
+};
+
+export default EventTypeDescriptionSafeHTML;

apps/web/components/eventtype/RecurringEventController.tsx

@@ -4,7 +4,7 @@ import { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Frequency } from "@calcom/prisma/zod-utils";
-import { RecurringEvent } from "@calcom/types/Calendar";
+import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Alert } from "@calcom/ui/Alert";
 
 import Select from "@components/ui/form/Select";
@@ -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 items-start">
-              <div className="flex h-5 items-center">
+              <div className="flex h-5 items-start">
                 <input
                   onChange={(event) => {
                     onRecurringEventDefined(event?.target.checked);
@@ -82,7 +86,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                     defaultValue={recurringEventState.interval}
                     onChange={(event) => {
                       const newVal = {
@@ -97,7 +101,7 @@ export default function RecurringEventController({
                     options={recurringEventFreqOptions}
                     value={recurringEventFreqOptions[recurringEventState.freq]}
                     isSearchable={false}
-                    className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                    className="w-18 block min-w-0 rounded-sm text-sm"
                     onChange={(event) => {
                       const newVal = {
                         ...recurringEventState,
@@ -114,7 +118,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                     defaultValue={recurringEventState.count}
                     onChange={(event) => {
                       const newVal = {

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,20 +1,18 @@
-import { LinkIcon } from "@heroicons/react/outline";
-import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, UserIcon } from "@heroicons/react/solid";
-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 className="h-4 w-16" />
-          <SkeletonText height="4" width="24" />
+          <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 />
@@ -35,29 +33,16 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText width="12" height="4" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText width="16" height="4" />
             </li>
           </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="btn-icon appearance-none">
-            <ExternalLinkIcon className="h-5 w-5" />
-          </div>
-          <div className="btn-icon appearance-none">
-            <LinkIcon className="h-5 w-5" />
-          </div>
-          <div className="btn-icon appearance-none">
-            <DotsHorizontalIcon className="h-5 w-5" />
-          </div>
-        </div>
-      </div>
     </li>
   );
 }

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

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

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

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