v1.7.2

* Save currency to db

* Add missing translation

* Get currency from user credentials server side

* Adds stripe data schema

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.env.appStore.example

@@ -0,0 +1,89 @@
+# ********** INDEX **********
+#
+# - APP STORE
+#   - DAILY.CO VIDEO
+#   - GOOGLE CALENDAR/MEET/LOGIN
+#   - HUBSPOT
+#   - OFFICE 365
+#   - SLACK
+#   - STRIPE
+#   - TANDEM
+#   - ZOOM
+#   - GIPHY
+#   - VITAL
+
+# - APP STORE **********************************************************************************************
+# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+#   - DAILY.CO VIDEO
+DAILY_API_KEY=
+DAILY_SCALE_PLAN=''
+
+#   - GOOGLE CALENDAR/MEET/LOGIN
+# Needed to enable Google Calendar integration and Login with Google
+# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+GOOGLE_API_CREDENTIALS='{}'
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - HUBSPOT
+# Used for the HubSpot integration
+# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
+HUBSPOT_CLIENT_ID=""
+HUBSPOT_CLIENT_SECRET=""
+
+#   - OFFICE 365
+# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
+# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
+MS_GRAPH_CLIENT_ID=
+MS_GRAPH_CLIENT_SECRET=
+
+#   - SLACK
+# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
+SLACK_SIGNING_SECRET=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+#   - STRIPE
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
+STRIPE_PRIVATE_KEY=            # sk_test_...
+STRIPE_WEBHOOK_SECRET=         # whsec_...
+STRIPE_CLIENT_ID=              # ca_...
+PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
+PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
+
+#   - TANDEM
+# Used for the Tandem integration -- contact support@tandem.chat for API access.
+TANDEM_CLIENT_ID=""
+TANDEM_CLIENT_SECRET=""
+TANDEM_BASE_URL="https://tandem.chat"
+
+#   - ZOOM
+# Used for the Zoom integration
+# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=
+
+#   - GIPHY
+# Used for the Giphy integration
+# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
+GIPHY_API_KEY=
+
+#   - VITAL
+# Used for the vital integration
+# @see https://github.com/calcom/cal.com/#obtaining-vital-api-keys
+VITAL_API_KEY=
+VITAL_WEBHOOK_SECRET=
+# "sandbox" | "prod" | "production" | "development"
+VITAL_DEVELOPMENT_MODE="sandbox"
+# "us" | "eu"
+VITAL_REGION="us"
+
+#   - ZAPIER
+# Used for the Zapier integration
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
+ZAPIER_INVITE_LINK=""
+# *********************************************************************************************************

.env.example

@@ -1,2 +1,116 @@
-# It now lives at `apps/web/.env.example`
-# DATABASE_URL got moved to `packages/prisma/.env.example`
+# ********** INDEX **********
+#
+# - LICENSE
+# - DATABASE
+# - SHARED
+#   - NEXTAUTH
+# - E-MAIL SETTINGS
+
+# - LICENSE *************************************************************************************************
+# Set this value to 'agree' to accept our license:
+# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
+#
+# Summary of terms:
+# - The codebase has to stay open source, whether it was modified or not
+# - You can not repackage or sell the codebase
+# - Acquire a commercial license to remove these terms by visiting: cal.com/sales
+NEXT_PUBLIC_LICENSE_CONSENT=''
+# To enable enterprise-only features, fill your license key in here.
+# @see https://console.cal.com
+CALCOM_LICENSE_KEY=
+# ***********************************************************************************************************
+
+# - DATABASE ************************************************************************************************
+# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
+# ***********************************************************************************************************
+
+# - SHARED **************************************************************************************************
+NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
+# Change to 'http://localhost:3001' if running the website simultaneously
+NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+NEXT_PUBLIC_CONSOLE_URL='http://localhost:3004'
+NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
+
+# To enable SAML login, set both these variables
+# @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
+# SAML_DATABASE_URL="postgresql://postgres:@localhost:5450/cal-saml"
+SAML_DATABASE_URL=
+# SAML_ADMINS='pro@example.com'
+SAML_ADMINS=
+# If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
+# @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
+# PGSSLMODE='no-verify'
+PGSSLMODE=
+
+#   - NEXTAUTH
+# @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=
+# @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
+
+# Set this to '1' if you don't want Cal to collect anonymous usage
+CALCOM_TELEMETRY_DISABLED=
+
+# ApiKey for cronjobs
+CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
+
+# Application Key for symmetric encryption and decryption
+# must be 32 bytes for AES256 encryption algorithm
+# You can use: `openssl rand -base64 24` to generate one
+CALENDSO_ENCRYPTION_KEY=
+
+# Intercom Config
+NEXT_PUBLIC_INTERCOM_APP_ID=
+
+# Zendesk Config
+NEXT_PUBLIC_ZENDESK_KEY=
+
+# Help Scout Config
+NEXT_PUBLIC_HELPSCOUT_KEY=
+
+# Inbox to send user feedback
+SEND_FEEDBACK_EMAIL=
+
+# This is used so we can bypass emails in auth flows for E2E testing
+# Set it to "1" if you need to run E2E tests locally
+NEXT_PUBLIC_IS_E2E=
+
+# Used for internal billing system
+NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT=
+NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
+NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
+NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_WEBHOOK_SECRET=
+
+# Use for internal Public API Keys and optional
+API_KEY_PREFIX=cal_
+# ***********************************************************************************************************
+
+# - E-MAIL SETTINGS *****************************************************************************************
+# Cal uses nodemailer (@see https://nodemailer.com/about/) to provide email sending. As such we are trying to
+# allow access to the nodemailer transports from the .env file. E-mail templates are accessible within lib/emails/
+# Configures the global From: header whilst sending emails.
+EMAIL_FROM='notifications@yourselfhostedcal.com'
+
+# Configure SMTP settings (@see https://nodemailer.com/smtp/).
+# Note: The below configuration for Office 365 has been verified to work.
+EMAIL_SERVER_HOST='smtp.office365.com'
+EMAIL_SERVER_PORT=587
+EMAIL_SERVER_USER='<office365_emailAddress>'
+# Keep in mind that if you have 2FA enabled, you will need to provision an App Password.
+EMAIL_SERVER_PASSWORD='<office365_password>'
+
+# The following configuration for Gmail has been verified to work.
+# EMAIL_SERVER_HOST='smtp.gmail.com'
+# EMAIL_SERVER_PORT=465
+# EMAIL_SERVER_USER='<gmail_emailAddress>'
+## You will need to provision an App Password.
+## @see https://support.google.com/accounts/answer/185833
+# EMAIL_SERVER_PASSWORD='<gmail_app_password>'
+# **********************************************************************************************************

.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-packages/prisma/zod

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,6 +4,12 @@
 
 Fixes # (issue)
 
+<!-- Please provide a loom video for visual changes to speed up reviews
+ Loom Video: https://www.loom.com/
+-->
+
+**Environment**: Staging(main branch) / Production
+
 ## Type of change
 
 <!-- Please delete options that are not relevant. -->

.github/workflows/check-types.yml

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

.github/workflows/crowdin.yml

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

.github/workflows/e2e-embed.yml

@@ -0,0 +1,108 @@
+name: E2E test
+on:
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
+    paths-ignore:
+      - apps/api/**
+      - apps/console/**
+      - apps/docs/**
+      - apps/swagger/**
+      - apps/website/**
+      - apps/web/public/**
+      - tests/**
+      - playwright/**
+jobs:
+  test:
+    timeout-minutes: 20
+    name: Embed and booking flow(for non-embed as well)
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+
+    env:
+      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+      NEXTAUTH_SECRET: secret
+      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+      GOOGLE_LOGIN_ENABLED: true
+      # CRON_API_KEY: xxx
+      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+      PAYMENT_FEE_PERCENTAGE: 0.005
+      PAYMENT_FEE_FIXED: 10
+      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      SAML_ADMINS: pro@example.com
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      NEXT_PUBLIC_IS_E2E: 1
+      # EMAIL_FROM: e2e@cal.com
+      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+      # MS_GRAPH_CLIENT_ID: xxx
+      # MS_GRAPH_CLIENT_SECRET: xxx
+      # ZOOM_CLIENT_ID: xxx
+      # ZOOM_CLIENT_SECRET: xxx
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 2
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v2
+        id: playwright-cache
+        with:
+          path: |
+            ~/Library/Caches/ms-playwright
+            ~/.cache/ms-playwright
+            ${{ github.workspace }}/node_modules/playwright
+          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: cache-playwright-
+      - run: yarn --frozen-lockfile
+      - name: Install playwright deps
+        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install --with-deps
+      - run: yarn embed-tests-prepare
+      - run: yarn workspace @calcom/embed-core embed-tests-update-snapshots:ci
+      - run: yarn workspace @calcom/embed-react embed-tests-update-snapshots:ci
+
+      - name: Upload embed-core results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-core
+          path: packages/embeds/embed-core/playwright/results
+
+      - name: Upload embed-react results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-react
+          path: packages/embeds/embed-react/playwright/results

.github/workflows/e2e.yml

@@ -1,19 +1,25 @@
 name: E2E test
 on:
-  pull_request_target:
+  pull_request_target: # So we can test on forks
     branches:
       - main
     paths-ignore:
-      - public/static/locales/**
+      - apps/web/public/static/locales/**
 jobs:
   test:
-    timeout-minutes: 10
+    timeout-minutes: 20
     name: Testing ${{ matrix.node }} and ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+
     env:
       DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      BASE_URL: http://localhost:3000
-      JWT_SECRET: secret
-      PLAYWRIGHT_SECRET: ${{ secrets.CI_PLAYWRIGHT_SECRET }}
+      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+      NEXTAUTH_SECRET: secret
       GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
       GOOGLE_LOGIN_ENABLED: true
       # CRON_API_KEY: xxx
@@ -26,16 +32,19 @@ jobs:
       PAYMENT_FEE_FIXED: 10
       SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
       SAML_ADMINS: pro@example.com
-      # NEXTAUTH_URL: xxx
-      EMAIL_FROM: e2e@cal.com
-      EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-      EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-      EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-      EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      NEXT_PUBLIC_IS_E2E: 1
+      # EMAIL_FROM: e2e@cal.com
+      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
       # MS_GRAPH_CLIENT_ID: xxx
       # MS_GRAPH_CLIENT_SECRET: xxx
       # ZOOM_CLIENT_ID: xxx
       # ZOOM_CLIENT_SECRET: xxx
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -44,35 +53,20 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
 
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
         with:
-          ref: ${{ github.event.pull_request.head.sha }}
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 2
-
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          cache: "yarn"
-          cache-dependency-path: yarn.lock
           node-version: ${{ matrix.node }}
+          cache: "yarn"
 
-      - name: Turbo Cache
-        id: turbo-cache
-        uses: actions/cache@v2
-        with:
-          path: .turbo
-          key: turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-${{ github.event.pull_request.head.sha }}
-          restore-keys: |
-            turbo-${{ github.job }}-${{ github.event.pull_request.head.ref }}-
-      - run: yarn
       - name: Cache playwright binaries
         uses: actions/cache@v2
         id: playwright-cache
@@ -80,22 +74,18 @@ jobs:
           path: |
             ~/Library/Caches/ms-playwright
             ~/.cache/ms-playwright
-            **/node_modules/playwright
+            ${{ github.workspace }}/node_modules/playwright
           key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
-
+          restore-keys: cache-playwright-
+      - run: yarn --frozen-lockfile
       - name: Install playwright deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
       - run: yarn test-e2e
 
-      - name: Upload videos
+      - name: Upload test results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: videos
-          path: |
-            test-results
-            playwright/screenshots
-            playwright/videos
-            playwright/results
-            playwright/reports
+          name: test-results
+          path: test-results

.github/workflows/lint.yml

@@ -1,27 +1,32 @@
 name: Lint
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
 
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout repo
+        uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v2
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: ${{ matrix.node }}
           cache: "yarn"
-          cache-dependency-path: yarn.lock
 
       - name: Install deps
         if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn
+        run: yarn --frozen-lockfile
 
       - name: Lint
         run: yarn lint:report

.github/workflows/submodule-sync.yml

@@ -0,0 +1,21 @@
+name: Submodule Sync
+on:
+  schedule:
+    - cron: "15 */4 * * *"
+  workflow_dispatch: ~
+
+jobs:
+  submodule-sync:
+    name: Submodule update
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+      - name: run action
+        uses: releasehub-com/github-action-create-pr-parent-submodule@v1
+        with:
+          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
+          parent_repository: "calcom/cal.com"
+          checkout_branch: "main"
+          pr_against_branch: "main"
+          owner: "calcom"

.gitignore

@@ -11,11 +11,11 @@ node_modules
 # testing
 coverage
 /test-results/
-playwright/videos
-playwright/screenshots
-playwright/artifacts
-playwright/results
-playwright/reports/*
+**/playwright/videos
+**/playwright/screenshots
+**/playwright/artifacts
+**/playwright/results
+**/playwright/reports/*
 
 # next.js
 .next/
@@ -39,6 +39,7 @@ yarn-error.log*
 .env.production.local
 .env.*
 !.env.example
+!.env.appStore.example
 
 # vercel
 .vercel

.gitmodules

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

.nvmrc

@@ -1 +1 @@
-14.17
+v16

.vscode/extensions.json

@@ -7,6 +7,7 @@
     "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe", // stripe VSCode extension
-    "Prisma.prisma" // syntax|format|completion for prisma
+    "Prisma.prisma", // syntax|format|completion for prisma
+    "rebornix.project-snippets" // Share useful snippets between collaborators
   ]
 }

.vscode/settings.json

@@ -1,11 +1,9 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
-  // Auto-fix issues with ESLint when you save code changes
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.run": "onSave",
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
   "spellright.documentTypes": ["markdown"]

.vscode/tasks.json

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

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+bailey@cal.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

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

README.md

@@ -18,22 +18,26 @@
     <a href="https://cal.com">Website</a>
     ·
     <a href="https://github.com/calcom/cal.com/issues">Issues</a>
+    ·
+    <a href="https://cal.com/roadmap">Roadmap</a>
   </p>
 </p>
 
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-  <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
-  <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
-  <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
-  <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
-  <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
-  <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
-    <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
-    <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=social"></a>
-    <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-
+   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
+   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
+   <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></a>
+   <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
+   <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>
 
 <!-- ABOUT THE PROJECT -->
@@ -80,7 +84,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
+- Node.js (Version: >=14.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -90,7 +94,7 @@ Here is what you need to be able to run Cal.
 
 ### Setup
 
-1. Clone the repo
+1. Clone the repo into a public GitHub repository (to comply with AGPLv3. To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
 
    ```sh
    git clone https://github.com/calcom/cal.com.git
@@ -102,19 +106,14 @@ Here is what you need to be able to run Cal.
    cd cal.com
    ```
 
-1. Copy `apps/web/.env.example` to `apps/web/.env`
-
-   ```sh
-   cp apps/web/.env.example apps/web/.env
-   cp packages/prisma/.env.example packages/prisma/.env
-   ```
-
 1. Install packages with yarn
 
    ```sh
    yarn
    ```
 
+1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
+
 #### Quick start with `yarn dx`
 
 > - **Requires Docker and Docker Compose to be installed**
@@ -126,15 +125,15 @@ yarn dx
 
 #### Development tip
 
-> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `apps/web/.env` to get logging information for all the queries and mutations driven by **trpc**.
+> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **trpc**.
 
 ```sh
-echo 'NEXT_PUBLIC_DEBUG=1' >> apps/web/.env
+echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```
 
 #### Manual setup
 
-1. Configure environment variables in the .env file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
@@ -195,11 +194,11 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> apps/web/.env
 
 ### E2E-Testing
 
+Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
+
 ```sh
-# In first terminal
-yarn dx
-# In second terminal
-yarn workspace @calcom/web test-e2e
+# In a terminal just run:
+yarn test-e2e
 
 # To open last HTML report run:
 yarn workspace @calcom/web playwright-report
@@ -213,7 +212,13 @@ yarn workspace @calcom/web playwright-report
    git pull
    ```
 
-2. Apply database migrations by running <b>one of</b> the following commands:
+1. Check if dependencies got added/updated/removed
+
+   ```sh
+   yarn
+   ```
+
+1. Apply database migrations by running <b>one of</b> the following commands:
 
    In a development environment, run:
 
@@ -229,16 +234,13 @@ yarn workspace @calcom/web playwright-report
    yarn workspace @calcom/prisma db-deploy
    ```
 
-3. Check the `.env.example` and compare it to your current `.env` file. In case there are any fields not present
-   in your current `.env`, add them there.
+1. Check for `.env` variables changes
 
-   For the current version, especially check if the variable `BASE_URL` is present and properly set in your environment, for example:
-
-   ```
-   BASE_URL='https://yourdomain.com'
+   ```sh
+   yarn predev
    ```
 
-4. Start the server. In a development environment, just do:
+1. Start the server. In a development environment, just do:
 
    ```sh
    yarn dev
@@ -251,7 +253,7 @@ yarn workspace @calcom/web playwright-report
    yarn start
    ```
 
-5. Enjoy the new version.
+1. Enjoy the new version.
 <!-- DEPLOYMENT -->
 
 ## Deployment
@@ -317,6 +319,57 @@ We have a list of [good first issues](https://github.com/calcom/cal.com/labels/
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
 
+### Obtaining Slack Client ID and Secret and Signing Secret
+
+To test this you will need to create a Slack app for yourself on [their apps website](https://api.slack.com/apps).
+
+Copy and paste the app manifest below into the setting on your slack app. Be sure to replace `YOUR_DOMAIN` with your own domain or your proxy host if you're testing locally.
+
+<details>
+  <summary>App Manifest</summary>
+  
+ ```yaml
+ display_information:
+  name: Cal.com Slack
+features:
+  bot_user:
+    display_name: Cal.com Slack
+    always_online: false
+  slash_commands:
+    - command: /create-event
+      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
+      description: Create an event within Cal!
+      should_escape: false
+    - command: /today
+      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
+      description: View all your bookings for today
+      should_escape: false
+oauth_config:
+  redirect_urls:
+    - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
+  scopes:
+    bot:
+      - chat:write
+      - commands
+      - chat:write.public 
+settings:
+  interactivity:
+    is_enabled: true
+    request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
+    message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
+  org_deploy_enabled: false
+  socket_mode_enabled: false
+  token_rotation_enabled: false
+```
+
+</details>
+
+Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.
+
+Next make sure you have your app running `yarn dx`. Then in the slack chat type one of these commands: `/create-event` or `/today`
+
+> NOTE: Next you will need to setup a proxy server like [ngrok](https://ngrok.com/) to allow your local host machine to be hosted on a public https server.
+
 ### Obtaining Zoom Client ID and Secret
 
 1. Open [Zoom Marketplace](https://marketplace.zoom.us/) and sign in with your Zoom account.
@@ -341,6 +394,30 @@ We have a list of [good first issues](https://github.com/calcom/cal.com/labels/
 4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
 5. If you have the [Daily Scale Plan](https://www.daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.
 
+### Obtaining HubSpot Client ID and Secret
+
+1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.
+2. From within the home of the Developer account page, go to "Manage apps".
+3. Click "Create app" button top right.
+4. Fill in any information you want in the "App info" tab
+5. Go to tab "Auth"
+6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
+9. Click the "Save" button at the bottom footer.
+10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.
+
+### Obtaining Vital API Keys
+
+1. Open [Vital](https://tryvital.io/) and click Get API Keys.
+1. Create a team with the team name you desire
+1. Head to the configuration section on the sidebar of the dashboard
+1. Click on API keys and you'll find your sandbox `api_key`.
+1. Copy your `api_key` to `VITAL_API_KEY` in the .env.appStore file.
+1. Open [Vital Webhooks](https://app.tryvital.io/team/{team_id}/webhooks) and add `<CALCOM BASE URL>/api/integrations/vital/webhook` as webhook for connected applications.
+1. Select all events for the webhook you interested, e.g. `sleep_created`
+1. Copy the webhook secret (`sec...`) to `VITAL_WEBHOOK_SECRET` in the .env.appStore file.
+
 <!-- LICENSE -->
 
 ## License
@@ -360,7 +437,7 @@ Special thanks to these amazing projects which help power Cal.com:
 - [Day.js](https://day.js.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Prisma](https://prisma.io/)
+  
+ <a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
 
-[<img src="https://jitsu.com/img/powered-by-jitsu.png?gh=true">](https://jitsu.com/?utm_source=cal.com-gihub)
-
-Cal.com is an [open startup](https://jitsu.com) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.
+Cal.com is an [open startup](https://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.

app.json

@@ -18,7 +18,11 @@
       "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
       "value": "secret"
     },
-    "JWT_SECRET": "secret"
+    "NEXTAUTH_SECRET": "secret",
+    "NEXTAUTH_URL": {
+      "description": "Replace HEROKU_APP_NAME with the name given to your app",
+      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    }
   },
   "scripts": {
     "postdeploy": "cd packages/prisma && npx prisma migrate deploy"

apps/docs/README.md

@@ -5,7 +5,7 @@
   </a>
   <a href="https://cal.com">Website</a>
   ·
-  <a href="https://github.com/calcom/docs/issues">Community Support</a>
+  <a href="https://github.com/calcom/cal.com/issues">Community Support</a>
 </div>
 
 # Cal.com Documentation

apps/docs/components/Anchor.tsx

@@ -0,0 +1,21 @@
+function getAnchor(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, "")
+    .replace(/[ ]/g, "-")
+    .replace(/ /g, "%20");
+}
+
+export default function Anchor({ as, children }) {
+  const anchor = getAnchor(children);
+  const link = `#${anchor}`;
+  const Component = as || "div";
+  return (
+    <Component id={anchor}>
+      <a href={link} className="anchor-link">
+        §
+      </a>
+      {children}
+    </Component>
+  );
+}

apps/docs/lib/useWindowSize.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+// Define general type for useWindowSize hook, which includes width and height
+export interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+// Hook from: https://usehooks.com/useWindowSize/
+export function useWindowSize(): Size {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

apps/docs/next.config.js

@@ -1,6 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const withNextra = require("nextra")({
   theme: "nextra-theme-docs",
   themeConfig: "./theme.config.js",
   unstable_staticImage: true,
 });
-module.exports = withNextra();
+module.exports = withNextra({
+  async rewrites() {
+    return [
+      // This redirects requests recieved at /api to /public-api to workaround nextjs default use of /api.
+      {
+        source: "/api",
+        destination: "/public-api",
+      },
+    ];
+  },
+});

apps/docs/package.json

@@ -7,6 +7,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=4000 next",
     "lint": "next lint",
+    "type-check": "tsc --pretty --noEmit",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
     "build": "next build"
@@ -14,14 +15,15 @@
   "author": "Cal.com, Inc.",
   "license": "MIT",
   "dependencies": {
-    "next": "^12.1.0",
+    "iframe-resizer-react": "^1.1.0",
+    "next": "^12.1.6",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   },
   "devDependencies": {
     "@calcom/config": "*",
-    "eslint": "^8.10.0"
+    "eslint": "^8.15.0"
   }
 }

apps/docs/pages/_app.tsx

@@ -1,7 +1,8 @@
+import { AppProps } from "next/app";
 import "nextra-theme-docs/style.css";
 
 import "./style.css";
 
-export default function Nextra({ Component, pageProps }) {
+export default function Nextra({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }

apps/docs/pages/developer/app-store.mdx

@@ -12,20 +12,26 @@ All apps can be found under `packages/app-store`. In this folder is `_example` w
 
 ```sh
 ├──_example
-|   ├──index.ts
-|   ├──package.json
-|   ├──.env.example
 |
 |   ├──api
 |   |   ├──example.ts
 |   |   ├──index.ts
 |
+|   ├──components
+|   |   ├──InstallAppButton.tsx
+|   |   ├──index.ts
+|
 |   ├──lib
 |   |   ├──adaptor.ts
 |   |   ├──index.ts
 |
 |   ├──static
 |   |   ├──icon.svg
+|
+|   ├──index.ts
+|   ├──package.json
+|   ├──.env.example
+|	├──README.mdx
 ```
 
 ## Getting Started
@@ -38,8 +44,17 @@ In `index.js` fill out the meta data that will be rendered on the app page. Unde
 
 Under the `/api` folder, this is where any API calls that are associated with your app will be handled. Since cal.com uses Next.js we use dynamic API routes. In this example if we want to hit `/api/example.ts` the route would be `{BASE_URL}/api/integrations/_example/example`. Export your endpoints in an `index.ts` file under `/api` folder and import them in your main `index.ts` file.
 
+Under the `/components` folder, this is where the install button for your app should live. Follow the template under `_example` to add your on click action (ex. Redirecting to a log in page or opening a modal).
+
 The `/lib` folder is where the functions of your app live. For example, when creating a booking with a MS Teams link the function to make the call to grab the link lives in the `/lib` folder. Export your endpoints in an `index.ts` file under `/lib` folder and import them in your main `index.ts` file.
 
-The `/static` folder is where your assets live.
+On the app store page you can customize your apps description by adding a markdown file called `README.mdx`. If you do not add one then the description from you `package.json` will be used instead.
+
+The `/static` folder is where you can store your app icon and any images that your `README.mdx` may use.
+
+## Adding Your App to the App Store
+To render your app on the app store page, go to `packages/app-store/index.ts`. Import your app into the file and add it to the `appStore` object.
+
+Under `packages/app-store/components.tsx`,  in the `InstallAppButtonMap` object dynamically import your install button. Your install button should live under `{your_app}/components`.
 
 If you need any help feel free to join us on [Slack](https://cal.com/slack)

apps/docs/pages/index.mdx

@@ -12,6 +12,6 @@ This is also the home of our design system documentation and developer docs.
 
 If you don't already know what Cal.com is about, please head over to [our website](https://cal.com), where you can learn more about the product before venturing into the documentation.
 
-Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.
+Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/cal.com/tree/main/apps/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.
 
 <Bleed>![Telemedicine Example](https://cal.com/telemedicine-example.svg)</Bleed>

apps/docs/pages/integrations/embed.mdx

@@ -0,0 +1,262 @@
+---
+title: Embed
+---
+
+import Anchor from "../../components/Anchor"
+
+# Embed
+
+The Embed allows your website visitors to book a meeting with you directly from your website.
+
+## Install on any website
+
+Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website">choose any of the ways</a> to show your Cal Link embedded on your website.
+
+```html
+<script>
+  (function (C, A, L) {
+    let p = function (a, ar) {
+      a.q.push(ar);
+    };
+    let d = C.document;
+    C.Cal =
+      C.Cal ||
+      function () {
+        let cal = C.Cal;
+        let ar = arguments;
+        if (!cal.loaded) {
+          cal.ns = {};
+          cal.q = cal.q || [];
+          d.head.appendChild(d.createElement("script")).src = A;
+          cal.loaded = true;
+        }
+        if (ar[0] === L) {
+          const api = function () {
+            p(api, arguments);
+          };
+          const namespace = ar[1];
+          api.q = api.q || [];
+          typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
+          return;
+        }
+        p(cal, ar);
+      };
+    })(window, "https://cal.com/embed.js", "init");
+    Cal("init")
+  </script>
+```
+
+## Install with a Framework
+
+### embed-react
+
+It provides a react component `<Cal>` that can be used to show the embed inline at that place.
+
+```bash
+yarn add @calcom/embed-react
+```
+
+### Any XYZ Framework
+
+You can use Vanilla JS Snippet to install
+
+<Anchor as="H2">Popular ways in which you can embed on your website</Anchor>
+
+Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in following ways:
+
+### Inline
+
+Show the embed inline inside a container element. It would take the width and height of the container element.
+
+<details>
+  <summary>_Vanilla JS_</summary>
+
+```html
+<script>
+  Cal("inline", {
+    elementOrSelector: "Your Embed Container Selector Path", // You can also provide an element directly
+    calLink: "jane", // The link that you want to embed. It would open https://cal.com/jane in embed
+    config: {
+      name: "John Doe", // Prefill Name
+      email: "johndoe@gmail.com", // Prefill Email
+      notes: "Test Meeting", // Prefill Notes
+      guests: ["janedoe@gmail.com", "test@gmail.com"], // Prefill Guests
+      theme: "dark", // "dark" or "light" theme
+    },
+  });
+</script>
+
+*Sample sandbox*
+```
+<iframe src="https://codesandbox.io/embed/vanilla-js-inline-embed-r27n67?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+</details>
+
+####
+
+<details>
+<summary>_React_</summary>
+
+```jsx
+import Cal from "@calcom/embed-react";
+
+const MyComponent = () => (
+  <Cal
+    calLink="pro"
+    config={{
+      name: "John Doe",
+      email: "johndoe@gmail.com",
+      notes: "Test Meeting",
+      guests: ["janedoe@gmail.com"],
+      theme: "dark",
+    }}
+  />
+);
+```
+
+*Sample sandbox*
+
+<iframe src="https://codesandbox.io/embed/cal-component-embed-inline-demo-react-typescript-d1zlcn?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+</details>
+
+### Popup on any existing element
+
+To show the embed as a popup on clicking an element, add `data-cal-link` attribute to the element.
+
+<details>
+
+<summary>Vanilla JS</summary>
+
+To show the embed as a popup on clicking an element, simply add `data-cal-link` attribute to the element.
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+  <button data-cal-link="jane" data-cal-config="A valid config JSON"></button>
+</details>
+<details>
+  <summary>React</summary>
+  ```jsx
+    import "@calcom/embed-react";
+
+    const MyComponent = ()=> {
+      return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
+    }
+```
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-popup-on-click-of-an-existing-element-demo-react-sc967e?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+</details>
+
+### Floating pop-up button
+
+```html
+<script>
+  Cal("floatingButton", {
+    // The link that you want to embed. It would open https://cal.com/jane in embed
+    calLink: "jane",
+  });
+</script>
+```
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+## Supported Instructions
+
+Consider an instruction as a function with that name and that would be called with the given arguments.
+
+### `inline`
+
+Appends embed inline as the child of the element.
+
+```html
+<script>
+Cal("inline", { elementOrSelector, calLink });
+</script>
+````
+
+- `elementOrSelector` - Give it either a valid CSS selector or an HTMLElement instance directly
+
+- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john](). It makes it easy to configure the calendar host once and use as many links you want with just usernames
+
+### `ui`
+
+Configure UI for embed. Make it look part of your webpage.
+
+```html
+<script>
+Cal("inline", { styles });
+</script>
+```
+
+- `styles` - It supports styling for `body` and `eventTypeListItem`. Right now we support just background on these two.
+
+### preload
+
+Usage:
+
+If you want to open cal link on some action. Make it pop open instantly by preloading it.
+
+```html
+<script>
+Cal("preload", { calLink });
+</script>
+```
+
+- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john]()
+
+## Actions
+You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term "events" to not confuse it with Cal Events.
+```html
+<script>
+Cal("on", {
+  action: "ANY_ACTION_NAME",
+  callback: (e)=>{
+    // `data` is properties for the event.
+    // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
+    // `namespace` tells you the Cal namespace for which the event is fired/
+    const {data, type, namespace} = e.detail;
+  }
+})
+</script>
+```
+
+Following are the list of supported actions.
+- 
+| Action               | Description                                                                                                                        | Properties                                                                                                                                                                                                                                                                             |
+|----------------------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| eventTypeSelected    | When user chooses an event-type from the listing.                                                                                  | eventType:object // Event Type that has been selected"                                                                                                                                                                                                                               |
+| bookingSuccessful    | When the booking is successfully done. It might not be confirmed.                                                                  | confirmed: boolean; //Whether confirmation from organizer is pending or not  <br/><br/>eventType: "Object for Event Type that has been booked";  <br/><br/>date: string; // Date of Event  <br/><br/>duration: number; //Duration of booked Event  <br/><br/>organizer: object //Organizer details like name, timezone, email  |
+| linkReady            | Tells that the link is ready to be shown now.                                                                                      | None                                                                                                                                                                                                                                                                                   |
+| linkFailed           | Fired if link fails to load                                                                                                        | code: number; // Error Code <br/><br/>msg: string;  //Human Readable msg  <br/><br/>data: object // More details to debug the error                                                                                                                                                                     |
+| __iframeReady        | It is fired when the embedded iframe is ready to communicate with parent snippet. This is mostly for internal use by Embed Snippet | None                                                                                                                                                                                                                                                                                   |
+| __windowLoadComplete | Tells that window load for iframe is complete                                                                                      | None                                                                                                                                                                                                                                                                                   |
+| __dimensionChanged   | Tells that dimensions of the content inside the iframe changed.                                                                    | iframeWidth:number, iframeHeight:number                                                                                                                                                                                                                                              |
+
+_Actions that start with __ are internal._

apps/docs/pages/integrations/introduction.mdx

@@ -5,17 +5,17 @@ title: Introduction
 # Integrations
 
 ## Connecting new calendars
-1. Go to the [Cal App Store](https://app.cal.com/integrations).
+1. Go to the [Cal App Store](https://app.cal.com/apps).
 2. Located at the top right of the screen, press the button saying '+ Connect A New App'
 3. Choose the account your calendar is connected too by clicking 'Add'. (e.g. Google, Office 365, Zoom)
 4. You will be redirected to the log in page of the chosen account.
 5. Allow Cal access to view and edit your calendars.
-6. You will be sent back to the [Cal App Store](https://app.cal.com/integrations). From here you will now be able to see your connected calendar!
+6. You will be sent back to the [Cal App Store](https://app.cal.com/apps/installed). From here you will now be able to see your connected calendar!
 
 ## How to choose the primary Calendar?
 
 If you have two or more integrated calendars and you want your events to show in only one, you can define a primary calendar like this:
 
-1. Go to your [Integrations](https://app.cal.com/integrations) page.
+1. Go to your [Installed](https://app.cal.com/apps/installed) page.
 2. Next to your `Calendars` you will see a dropdown that says `Create events on:`.
 3. Select your primary calendar.

apps/docs/pages/integrations/slack.mdx

@@ -0,0 +1,21 @@
+---
+Title: Slack
+---
+
+# Slack
+
+## Connecting 
+Connecting the bot is easy - If you are a workspace admin, the install button will add the bot to the workspace and also authorize your account with the bot. If you are a normal user, the install button will connect your Slack account with Cal.com. This will allow you to perform commands in Slack.
+
+## Commands
+`/today` - This command will display all meetings you have in your Cal.com profile for the current day. This will send a hidden message (not visible to anyone other than you) to the channel you issued the command in.
+
+`/create-event` - It will display a modal allowing you to simply create a meeting invite with anyone in Slack. Success/Error information will be displayed in a private direct message from the bot.
+
+`/links` - This command will post all your Cal.com meeting links into the current Slack channel you are in. **Note**: The bot needs to have permission to talk in the channel you are sending the message in. Otherwise, you won't be able to send your links. 
+
+As this is the beggining stage of our Slack integration, we plan on adding more commands in the future that will further improve your Cal.com experience.
+
+## Self-Hosted
+If you are using our self-hosted version, please refer to our documentation in 
+[cal.com/README.md](https://github.com/calcom/cal.com/blob/main/README.md#obtaining-slack-client-id-and-secret-and-signing-secret)

apps/docs/pages/meta.json

@@ -6,6 +6,7 @@
   "event-types": "Event Types",
   "teams": "Teams",
   "integrations": "Integrations",
+  "public-api": "API",
   "webhooks": "Webhooks",
   "settings": "Settings",
   "import": "Import",

apps/docs/pages/public-api.mdx

@@ -0,0 +1,20 @@
+import Bleed from 'nextra-theme-docs/bleed'
+import Head from "next/head";
+import IframeResizer from "iframe-resizer-react";
+import {useWindowSize} from "../lib/useWindowSize";
+
+
+<Bleed full>
+  <Head><title>Public API | Cal.com</title></Head>
+  <IframeResizer
+    autoResize
+    src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
+    frameBorder="0"
+    style={{
+      width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
+      minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
+      height: "auto",
+      border: 0,
+    }}
+  />
+</Bleed>

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

@@ -27,7 +27,7 @@ or
 1. Clone calendso-docker
 
    ```bash
-   git clone git@github.com:calendso/calendso-docker.git --recursive
+   git clone --recursive https://github.com/calendso/docker.git calendso-docker
    ```
 
 2. Update `.env` if needed
@@ -40,7 +40,7 @@ or
 
 4. Start prisma studio
    ```bash
-   docker-compose exec calendso -- npx prisma studio
+   docker-compose exec calendso npx prisma studio
    ```
 5. Open a browser to [port 5555](http://localhost:5555) on your localhost to look at or modify the database content.
 

apps/docs/tsconfig.json

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

apps/swagger/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs

apps/swagger/.gitignore

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

apps/swagger/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/swagger/lib/snippets.ts

@@ -0,0 +1,353 @@
+import * as OpenAPISnippet from "openapi-snippet";
+
+export const requestSnippets = {
+  generators: {
+    curl_bash: {
+      title: "cURL (bash)",
+      syntax: "bash",
+    },
+    curl_powershell: {
+      title: "cURL (PowerShell)",
+      syntax: "powershell",
+    },
+    curl_cmd: {
+      title: "cURL (CMD)",
+      syntax: "bash",
+    },
+    node: {
+      title: "Node",
+      syntax: "node",
+    },
+  },
+  defaultExpanded: true,
+  languages: ["node", "curl_bash"],
+};
+// Since swagger-ui-react was not configured to change the request snippets some workarounds required
+// configuration will be added programatically
+// Custom Plugin
+export const SnippedGenerator = {
+  statePlugins: {
+    // extend some internals to gain information about current path, method and spec in the generator function metioned later
+    spec: {
+      wrapSelectors: {
+        requestFor: (ori, system) => (state, path, method) => {
+          return ori(path, method)
+            ?.set("spec", state.get("json", {}))
+            ?.setIn(["oasPathMethod", "path"], path)
+            ?.setIn(["oasPathMethod", "method"], method);
+        },
+        mutatedRequestFor: (ori) => (state, path, method) => {
+          return ori(path, method)
+            ?.set("spec", state.get("json", {}))
+            ?.setIn(["oasPathMethod", "path"], path)
+            ?.setIn(["oasPathMethod", "method"], method);
+        },
+      },
+    },
+    // extend the request snippets core plugin
+    requestSnippets: {
+      wrapSelectors: {
+        // add additional snippet generators here
+        getSnippetGenerators:
+          (ori, system) =>
+          (state, ...args) =>
+            ori(state, ...args)
+              // add node native snippet generator
+              //   .set(
+              //     // key
+              //     "node_native",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "NodeJs Native",
+              //       syntax: "javascript",
+              //       hostname: "test",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["node_native"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //             // Since I don't know why hostname was undefinedundefined, I harcoded it here
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              .set(
+                // key
+                "node_fetch",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "NodeJS",
+                  syntax: "javascript",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["node_fetch"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "shell_httpie",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "HTTPie",
+                  syntax: "bash",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["shell_httpie"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "php_curl",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "PHP",
+                  syntax: "php",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["php_curl"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "java_okhttp",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Java",
+                  syntax: "java",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+                    console.log(spec, oasPathMethod, path, method);
+                    // run OpenAPISnippet for target node
+                    const targets = ["java_okhttp"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              //   .set(
+              //     // key
+              //     "java",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "Java (Unirest)",
+              //       syntax: "java",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["java"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              //   .set(
+              //     // key
+              //     "c_libcurl",
+              //     // config and generator function
+              //     system.Im.fromJS({
+              //       title: "C (libcurl)  ",
+              //       syntax: "bash",
+              //       fn: (req) => {
+              //         // get extended info about request
+              //         const { spec, oasPathMethod } = req.toJS();
+              //         const { path, method } = oasPathMethod;
+
+              //         // run OpenAPISnippet for target node
+              //         const targets = ["c_libcurl"];
+              //         let snippet;
+              //         try {
+              //           // set request snippet content
+              //           snippet = OpenAPISnippet.getEndpointSnippets(
+              //             spec,
+              //             path,
+              //             method,
+              //             targets
+              //           ).snippets[0].content;
+              //         } catch (err) {
+              //           // set to error in case it happens the npm package has some flaws
+              //           snippet = JSON.stringify(snippet);
+              //         }
+              //         // return stringified snipped
+              //         return snippet;
+              //       },
+              //     })
+              //   )
+              .set(
+                // key
+                "go_native",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Go",
+                  syntax: "bash",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["go_native"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "ruby",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Ruby",
+                  syntax: "ruby",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["ruby"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              )
+              .set(
+                // key
+                "python",
+                // config and generator function
+                system.Im.fromJS({
+                  title: "Python",
+                  syntax: "python",
+                  fn: (req) => {
+                    // get extended info about request
+                    const { spec, oasPathMethod } = req.toJS();
+                    const { path, method } = oasPathMethod;
+
+                    // run OpenAPISnippet for target node
+                    const targets = ["python"];
+                    let snippet;
+                    try {
+                      // set request snippet content
+                      snippet = OpenAPISnippet.getEndpointSnippets(spec, path, method, targets).snippets[0]
+                        .content;
+                    } catch (err) {
+                      // set to error in case it happens the npm package has some flaws
+                      snippet = JSON.stringify(snippet);
+                    }
+                    // return stringified snipped
+                    return snippet;
+                  },
+                })
+              ),
+      },
+    },
+  },
+};

apps/swagger/next-env.d.ts

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

apps/swagger/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@calcom/swagger",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "PORT=4200 next dev",
+    "build": "next build",
+    "start": "PORT=4200 next start"
+  },
+  "dependencies": {
+    "highlight.js": "^11.5.1",
+    "isarray": "2.0.5",
+    "next": "12.1.6",
+    "openapi-snippet": "^0.13.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "swagger-ui-react": "4.11.1"
+  },
+  "devDependencies": {
+    "@types/node": "16.9.1",
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.4",
+    "typescript": "4.6.4"
+  }
+}

apps/swagger/pages/_app.tsx

@@ -0,0 +1,10 @@
+import "highlight.js/styles/default.css";
+import "swagger-ui-react/swagger-ui.css";
+
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp;

apps/swagger/pages/index.tsx

@@ -0,0 +1,26 @@
+import dynamic from "next/dynamic";
+import { SwaggerUI } from "swagger-ui-react";
+
+import { SnippedGenerator, requestSnippets } from "@lib/snippets";
+
+const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
+  ssr: false,
+});
+
+export default function APIDocs() {
+  return (
+    <SwaggerUIDynamic
+      url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
+      persistAuthorization={true}
+      supportedSubmitMethods={["get", "post", "delete", "put", "options", "patch"]}
+      requestSnippetsEnabled={true}
+      requestSnippets={requestSnippets}
+      plugins={[SnippedGenerator]}
+      tryItOutEnabled={true}
+      syntaxHighlight={true}
+      enableCORS={false} // Doesn't seem to work either
+      docExpansion="list"
+      filter={true}
+    />
+  );
+}

apps/swagger/styles/globals.css

@@ -0,0 +1,102 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+@media (max-width: 768px) {
+  .swagger-ui .opblock-tag {
+    font-size: 90% !important;
+  }
+  .swagger-ui .opblock .opblock-summary {
+    display: grid;
+  flex-direction: column;
+  }
+  .opblock-summary-path {
+    flex-shrink: 0;
+    max-width: 100% !important;
+    padding: 10px 5px !important;
+  }
+  .opblock-summary-description {
+    font-size: 16px !important;
+    padding: 0px 5px;
+  }
+  .swagger-ui .scheme-container .schemes {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .swagger-ui .info .title {
+    color: #3b4151;
+    font-family: sans-serif;
+    font-size: 22px;
+  }
+  .swagger-ui .scheme-container {
+  padding: 14px 0;
+  }
+  .swagger-ui .info {
+      margin: 10px 0;
+  }
+  .swagger-ui .auth-wrapper {
+    margin: 10px 0;
+  }
+  .swagger-ui .authorization__btn {
+  display: none;
+  }
+  .swagger-ui .opblock {
+    margin: 0 0 5px;
+  }
+  button.opblock-summary-control > svg {
+    display: none;  
+  }
+  .swagger-ui .filter .operation-filter-input {
+    border: 2px solid #d8dde7;
+    margin: 5px 5px;
+    padding: 5px;
+    width: 100vw;
+  }
+  .swagger-ui .wrapper {
+    padding: 0 4px;
+    width: 100%;
+  }
+  .swagger-ui .info .title small {
+    top: 5px;
+  }
+  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+    width: 100%;
+  }
+  div.request-snippets > div.curl-command > div:nth-child(1) {
+    overscroll-behavior: contain;
+    overflow-x: scroll;
+  }
+  .swagger-ui .opblock-body pre.microlight {  
+    font-size: 9px; 
+  }
+  .swagger-ui table tbody tr td {
+    padding: 0px 0 0;
+    vertical-align: none;
+  }
+  td.response-col_description > div > div > p {
+    font-size: 12px;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
+        display: flex;
+    width: 100vw;
+    flex-direction: column;
+    font-size: 60%;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
+    display: none;
+  }
+}

apps/swagger/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["lib/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

apps/web/.env.example

@@ -1,104 +0,0 @@
-# Set this value to 'agree' to accept our license:
-# LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
-#
-# Summary of terms:
-# - The codebase has to stay open source, whether it was modified or not
-# - You can not repackage or sell the codebase
-# - Acquire a commercial license to remove these terms by visiting: cal.com/sales
-NEXT_PUBLIC_LICENSE_CONSENT=''
-
-# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
-
-# Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
-GOOGLE_API_CREDENTIALS='{}'
-
-# To enable Login with Google you need to:
-# 1. Set `GOOGLE_API_CREDENTIALS` above
-# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
-# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
-# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
-GOOGLE_LOGIN_ENABLED=false
-
-BASE_URL='http://localhost:3000'
-NEXT_PUBLIC_APP_URL='http://localhost:3000'
-
-JWT_SECRET='secret'
-# This is used so we can bypass emails in auth flows for E2E testing
-PLAYWRIGHT_SECRET=
-
-# To enable SAML login, set both these variables
-# @see https://github.com/calendso/calendso/tree/main/ee#setting-up-saml-login
-# SAML_DATABASE_URL="postgresql://postgres:@localhost:5450/cal-saml"
-# SAML_ADMINS='pro@example.com'
-# If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
-# @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
-##PGSSLMODE='no-verify'
-
-# @see: https://github.com/calendso/calendso/issues/263
-# Required for Vercel hosting - set NEXTAUTH_URL to equal your BASE_URL
-# NEXTAUTH_URL='http://localhost:3000'
-
-# Remove this var if you don't want Cal to collect anonymous usage
-NEXT_PUBLIC_TELEMETRY_KEY=js.2pvs2bbpqq1zxna97wcml.oi2jzirnbj1ev4tc57c5r
-
-# Used for the Office 365 / Outlook.com Calendar integration
-MS_GRAPH_CLIENT_ID=
-MS_GRAPH_CLIENT_SECRET=
-
-# Used for the Zoom integration
-ZOOM_CLIENT_ID=
-ZOOM_CLIENT_SECRET=
-
-#Used for the Daily integration
-DAILY_API_KEY=
-DAILY_SCALE_PLAN=''
-
-# Used for the Tandem integration -- contact support@tandem.chat to for API access.
-TANDEM_CLIENT_ID=""
-TANDEM_CLIENT_SECRET=""
-TANDEM_BASE_URL="https://tandem.chat"
-
-# E-mail settings
-
-# Cal uses nodemailer (@see https://nodemailer.com/about/) to provide email sending. As such we are trying to
-# allow access to the nodemailer transports from the .env file. E-mail templates are accessible within lib/emails/
-
-# Configures the global From: header whilst sending emails.
-EMAIL_FROM='notifications@yourselfhostedcal.com'
-
-# Configure SMTP settings (@see https://nodemailer.com/smtp/).
-# Note: The below configuration for Office 365 has been verified to work.
-EMAIL_SERVER_HOST='smtp.office365.com'
-EMAIL_SERVER_PORT=587
-EMAIL_SERVER_USER='<office365_emailAddress>'
-# Keep in mind that if you have 2FA enabled, you will need to provision an App Password.
-EMAIL_SERVER_PASSWORD='<office365_password>'
-# The following configuration for Gmail has been verified to work.
-# EMAIL_SERVER_HOST='smtp.gmail.com'
-# EMAIL_SERVER_PORT=465
-# EMAIL_SERVER_USER='<gmail_emailAddress>'
-## You will need to provision an App Password.
-## @see https://support.google.com/accounts/answer/185833
-# EMAIL_SERVER_PASSWORD='<gmail_app_password>'
-
-# ApiKey for cronjobs
-CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
-
-# Stripe Config
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
-STRIPE_PRIVATE_KEY=            # sk_test_...
-STRIPE_CLIENT_ID=              # ca_...
-STRIPE_WEBHOOK_SECRET=         # whsec_...
-PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
-PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
-
-# Application Key for symmetric encryption and decryption
-# must be 32 bytes for AES256 encryption algorithm
-CALENDSO_ENCRYPTION_KEY=
-
-# Intercom Config
-NEXT_PUBLIC_INTERCOM_APP_ID=
-
-# Zendesk Config
-NEXT_PUBLIC_ZENDESK_KEY=

apps/web/.gitignore

@@ -61,3 +61,6 @@ yarn-error.log*
 
 # Typescript
 tsconfig.tsbuildinfo
+
+# Autogenerated embed content
+public/embed

apps/web/components/AdditionalCalendarSelector.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import Select from "react-select";
+import { OptionProps } from "react-select";
+
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { App } from "@calcom/types/App";
+import { Button } from "@calcom/ui";
+
+import { QueryCell } from "@lib/QueryCell";
+import { trpc } from "@lib/trpc";
+
+interface AdditionalCalendarSelectorProps {
+  isLoading?: boolean;
+}
+
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+  const { data } = optionProps;
+  return (
+    <InstallAppButton
+      type={data.type}
+      render={(installProps) => {
+        return (
+          <Button {...installProps} className="w-full" color="minimal">
+            {/* eslint-disable @next/next/no-img-element */}
+            {data.image && (
+              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
+            )}
+            <p>{data.label}</p>
+          </Button>
+        );
+      }}
+    />
+  );
+};
+
+const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: true }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => {
+        const options = data.items.map((item) => ({
+          label: item.name,
+          slug: item.slug,
+          image: item.imageSrc,
+          type: item.type,
+        }));
+        return (
+          <Select
+            name={"additionalCalendar"}
+            placeholder={t("connect_additional_calendar")}
+            options={options}
+            styles={{
+              placeholder: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  color: "#3E3E3E",
+                  marginLeft: "3px",
+                };
+              },
+              control: (defaultStyles) => {
+                return {
+                  ...defaultStyles,
+                  borderRadius: "2px",
+                  "@media only screen and (min-width: 640px)": {
+                    ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                    maxWidth: "320px",
+                  },
+                };
+              },
+            }}
+            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"
+            isLoading={isLoading}
+            components={{ Option: ImageOption }}
+          />
+        );
+      }}
+    />
+  );
+};
+
+export default AdditionalCalendarSelector;

apps/web/components/App.tsx

@@ -0,0 +1,265 @@
+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 { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { App as AppType } from "@calcom/types/App";
+import { Button, SkeletonButton } from "@calcom/ui";
+
+import Shell from "@components/Shell";
+import Badge from "@components/ui/Badge";
+
+export default function App({
+  name,
+  type,
+  logo,
+  body,
+  categories,
+  author,
+  price = 0,
+  commission,
+  isGlobal = false,
+  feeType,
+  docs,
+  website,
+  email,
+  tos,
+  privacy,
+}: {
+  name: string;
+  type: AppType["type"];
+  isGlobal?: AppType["isGlobal"];
+  logo: string;
+  body: React.ReactNode;
+  categories: string[];
+  author: string;
+  pro?: boolean;
+  price?: number;
+  commission?: number;
+  feeType?: AppType["feeType"];
+  docs?: string;
+  website?: string;
+  email: string; // required
+  tos?: string;
+  privacy?: string;
+}) {
+  const { t } = useLocale();
+
+  const priceInDollar = Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    useGrouping: false,
+  }).format(price);
+  const [installedAppCount, setInstalledAppCount] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    async function getInstalledApp(appCredentialType: string) {
+      const queryParam = new URLSearchParams();
+      queryParam.set("app-credential-type", appCredentialType);
+      try {
+        const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }).then((data) => {
+          setIsLoading(false);
+          return data;
+        });
+        if (result.status === 200) {
+          const res = await result.json();
+          setInstalledAppCount(res.count);
+        }
+      } catch (error) {
+        if (error instanceof Error) {
+          console.log(error.message);
+        }
+      }
+    }
+    getInstalledApp(type);
+  }, [type]);
+  const allowedMultipleInstalls = categories.indexOf("calendar") > -1;
+  return (
+    <>
+      <Shell large isPublic>
+        <div className="-mx-4 md:-mx-8">
+          <div className="bg-gray-50 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")}
+              </a>
+            </Link>
+            <div className="items-center justify-between py-4 sm:flex sm:py-8">
+              <div className="flex">
+                <img className="h-16 w-16 rounded-sm" src={logo} alt={name} />
+                <header className="px-4 py-2">
+                  <h1 className="font-cal text-xl text-gray-900">{name}</h1>
+                  <h2 className="text-sm text-gray-500">
+                    <span className="capitalize">{categories[0]}</span> • {t("published_by", { author })}
+                  </h2>
+                </header>
+              </div>
+
+              <div className="mt-4 sm:mt-0 sm:text-right">
+                {!isLoading ? (
+                  isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
+                    <div className="space-x-3">
+                      <Button StartIcon={CheckIcon} color="secondary" disabled>
+                        {installedAppCount > 0
+                          ? t("active_install", { count: installedAppCount })
+                          : t("globally_install")}
+                      </Button>
+                      <InstallAppButton
+                        type={type}
+                        render={(buttonProps) => (
+                          <Button StartIcon={PlusIcon} data-testid="install-app-button" {...buttonProps}>
+                            {t("add_another")}
+                          </Button>
+                        )}
+                      />
+                    </div>
+                  ) : (
+                    <InstallAppButton
+                      type={type}
+                      render={(buttonProps) => (
+                        <Button data-testid="install-app-button" {...buttonProps}>
+                          {t("install_app")}
+                        </Button>
+                      )}
+                    />
+                  )
+                ) : (
+                  <SkeletonButton width="24" height="10" />
+                )}
+                {price !== 0 && (
+                  <small className="block text-right">
+                    {feeType === "usage-based"
+                      ? commission + "% + " + priceInDollar + "/booking"
+                      : priceInDollar}
+                    {feeType === "monthly" && "/" + t("month")}
+                  </small>
+                )}
+              </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">
+            <div className="prose-sm prose mb-6">{body}</div>
+            <div className="md:max-w-80 flex-1 md:ml-8">
+              <h4 className="font-medium text-gray-900 ">{t("categories")}</h4>
+              <div className="space-x-2">
+                {categories.map((category) => (
+                  <Link href={"/apps/categories/" + category} key={category}>
+                    <a>
+                      <Badge variant="success">{category}</Badge>
+                    </a>
+                  </Link>
+                ))}
+              </div>
+              <h4 className="mt-8 font-medium text-gray-900 ">{t("pricing")}</h4>
+              <small>
+                {price === 0 ? (
+                  "Free"
+                ) : (
+                  <>
+                    {Intl.NumberFormat("en-US", {
+                      style: "currency",
+                      currency: "USD",
+                      useGrouping: false,
+                    }).format(price)}
+                    {feeType === "monthly" && "/" + t("month")}
+                  </>
+                )}
+              </small>
+              <h4 className="mt-8 mb-2 font-medium text-gray-900 ">{t("learn_more")}</h4>
+              <ul className="prose -ml-1 -mr-1 text-xs leading-5">
+                {docs && (
+                  <li>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-500 no-underline hover:underline"
+                      href={docs}>
+                      <BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
+                      {t("documentation")}
+                    </a>
+                  </li>
+                )}
+                {website && (
+                  <li>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-500 no-underline hover:underline"
+                      href={website}>
+                      <ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
+                      {website.replace("https://", "")}
+                    </a>
+                  </li>
+                )}
+                {email && (
+                  <li>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-500 no-underline hover:underline"
+                      href={"mailto:" + email}>
+                      <MailIcon className="mr-1 -mt-px inline h-4 w-4" />
+                      {email}
+                    </a>
+                  </li>
+                )}
+                {tos && (
+                  <li>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-500 no-underline hover:underline"
+                      href={tos}>
+                      <DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
+                      {t("terms_of_service")}
+                    </a>
+                  </li>
+                )}
+                {privacy && (
+                  <li>
+                    <a
+                      target="_blank"
+                      rel="noreferrer"
+                      className="text-blue-500 no-underline hover:underline"
+                      href={privacy}>
+                      <ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
+                      {t("privacy_policy")}
+                    </a>
+                  </li>
+                )}
+              </ul>
+              <hr className="my-6" />
+              <small className="leading-1 block text-gray-500">
+                Every app published on the Cal.com App Store is open source and thoroughly tested via peer
+                reviews. Nevertheless, Cal.com, Inc. does not endorse or certify these apps unless they are
+                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
+              </a>
+            </div>
+          </div>
+        </div>
+      </Shell>
+    </>
+  );
+}

apps/web/components/AppsShell.tsx

@@ -0,0 +1,28 @@
+import { useSession } from "next-auth/react";
+import React from "react";
+
+import NavTabs from "./NavTabs";
+
+const tabs = [
+  {
+    name: "app_store",
+    href: "/apps",
+  },
+  {
+    name: "installed_apps",
+    href: "/apps/installed",
+  },
+];
+
+export default function AppsShell({ children }: { children: React.ReactNode }) {
+  const { status } = useSession();
+
+  return (
+    <>
+      <div className="mb-12 block lg:hidden">
+        {status === "authenticated" && <NavTabs tabs={tabs} linkProps={{ shallow: true }} />}
+      </div>
+      <main className="pb-6">{children}</main>
+    </>
+  );
+}

apps/web/components/BookingsShell.tsx

@@ -1,26 +1,27 @@
 import React from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
-
 import NavTabs from "./NavTabs";
 
-export default function BookingsShell({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
-  const tabs = [
-    {
-      name: t("upcoming"),
-      href: "/bookings/upcoming",
-    },
-    {
-      name: t("past"),
-      href: "/bookings/past",
-    },
-    {
-      name: t("cancelled"),
-      href: "/bookings/cancelled",
-    },
-  ];
+const tabs = [
+  {
+    name: "upcoming",
+    href: "/bookings/upcoming",
+  },
+  {
+    name: "recurring",
+    href: "/bookings/recurring",
+  },
+  {
+    name: "past",
+    href: "/bookings/past",
+  },
+  {
+    name: "cancelled",
+    href: "/bookings/cancelled",
+  },
+];
 
+export default function BookingsShell({ children }: { children: React.ReactNode }) {
   return (
     <>
       <NavTabs tabs={tabs} linkProps={{ shallow: true }} />

apps/web/components/CustomBranding.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from "react";
 
+import { useBrandColors } from "@calcom/embed-core/embed-iframe";
+
 const brandColor = "#292929";
 const brandTextColor = "#ffffff";
 const darkBrandColor = "#fafafa";
@@ -220,6 +222,8 @@ const BrandColor = ({
   lightVal: string | undefined | null;
   darkVal: string | undefined | null;
 }) => {
+  const embedBrandingColors = useBrandColors();
+  lightVal = embedBrandingColors.brandColor || lightVal;
   // convert to 6 digit equivalent if 3 digit code is entered
   lightVal = normalizeHexCode(lightVal, false);
   darkVal = normalizeHexCode(darkVal, true);
@@ -235,6 +239,34 @@ const BrandColor = ({
       : "#" + darkVal
     : fallBackHex(darkVal, true);
   useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--booking-highlight-color",
+      embedBrandingColors.highlightColor || "#10B981" // green--500
+    );
+    document.documentElement.style.setProperty(
+      "--booking-lightest-color",
+      embedBrandingColors.lightestColor || "#E1E1E1" // gray--200
+    );
+    document.documentElement.style.setProperty(
+      "--booking-lighter-color",
+      embedBrandingColors.lighterColor || "#ACACAC" // gray--400
+    );
+    document.documentElement.style.setProperty(
+      "--booking-light-color",
+      embedBrandingColors.lightColor || "#888888" // gray--500
+    );
+    document.documentElement.style.setProperty(
+      "--booking-median-color",
+      embedBrandingColors.medianColor || "#494949" // gray--600
+    );
+    document.documentElement.style.setProperty(
+      "--booking-dark-color",
+      embedBrandingColors.darkColor || "#313131" // gray--800
+    );
+    document.documentElement.style.setProperty(
+      "--booking-darker-color",
+      embedBrandingColors.darkerColor || "#292929" // gray--900
+    );
     document.documentElement.style.setProperty("--brand-color", lightVal);
     document.documentElement.style.setProperty("--brand-text-color", getContrastingTextColor(lightVal, true));
     document.documentElement.style.setProperty("--brand-color-dark-mode", darkVal);
@@ -242,7 +274,17 @@ const BrandColor = ({
       "--brand-text-color-dark-mode",
       getContrastingTextColor(darkVal, true)
     );
-  }, [lightVal, darkVal]);
+  }, [
+    embedBrandingColors.highlightColor,
+    embedBrandingColors.lightestColor,
+    embedBrandingColors.lighterColor,
+    embedBrandingColors.lightColor,
+    embedBrandingColors.medianColor,
+    embedBrandingColors.darkColor,
+    embedBrandingColors.darkerColor,
+    lightVal,
+    darkVal,
+  ]);
   return null;
 };
 

apps/web/components/DestinationCalendarSelector.tsx

@@ -1,10 +1,10 @@
+import classNames from "classnames";
 import React, { useEffect, useState } from "react";
 import Select from "react-select";
 
-import { useLocale } from "@lib/hooks/useLocale";
-import { trpc } from "@lib/trpc";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import Button from "@components/ui/Button";
+import { trpc } from "@lib/trpc";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
@@ -24,21 +24,35 @@ const DestinationCalendarSelector = ({
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
   const [selectedOption, setSelectedOption] = useState<{ value: string; label: string } | null>(null);
 
-  useEffect(() => {
-    if (!selectedOption) {
-      const selected = query.data?.connectedCalendars
-        .map((connected) => connected.calendars ?? [])
-        .flat()
-        .find((cal) => cal.externalId === value);
-
-      if (selected) {
-        setSelectedOption({
-          value: `${selected.integration}:${selected.externalId}`,
-          label: selected.name || "",
-        });
-      }
+  // Extra styles to show prefixed text in react-select
+  const content = (hidePlaceholder = false) => {
+    if (!hidePlaceholder) {
+      return {
+        alignItems: "center",
+        display: "flex",
+        ":before": {
+          content: `'${t("select_destination_calendar")}:'`,
+          display: "block",
+          marginRight: 8,
+        },
+      };
     }
-  }, [query.data?.connectedCalendars, selectedOption, value]);
+    return {};
+  };
+
+  useEffect(() => {
+    const selected = query.data?.connectedCalendars
+      .map((connected) => connected.calendars ?? [])
+      .flat()
+      .find((cal) => cal.externalId === value);
+
+    if (selected) {
+      setSelectedOption({
+        value: `${selected.integration}:${selected.externalId}`,
+        label: selected.name || "",
+      });
+    }
+  }, [query.data?.connectedCalendars, value]);
 
   if (!query.data?.connectedCalendars.length) {
     return null;
@@ -53,21 +67,40 @@ const DestinationCalendarSelector = ({
       })),
     })) ?? [];
   return (
-    <div className="relative">
-      {/* There's no easy way to customize the displayed value for a Select, so we fake it. */}
-      {!hidePlaceholder && (
-        <div className="pointer-events-none absolute z-10">
-          <Button size="sm" color="secondary" className="m-[1px] rounded-sm border-transparent">
-            {t("select_destination_calendar")}: {selectedOption?.label || ""}
-          </Button>
-        </div>
-      )}
+    <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
       <Select
         name={"primarySelectedCalendar"}
         placeholder={!hidePlaceholder ? `${t("select_destination_calendar")}:` : undefined}
         options={options}
+        styles={{
+          placeholder: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          singleValue: (styles) => ({ ...styles, ...content(hidePlaceholder) }),
+          option: (defaultStyles, state) => ({
+            ...defaultStyles,
+            backgroundColor: state.isSelected
+              ? state.isFocused
+                ? "var(--brand-color)"
+                : "var(--brand-color)"
+              : state.isFocused
+              ? "var(--brand-color-dark-mode)"
+              : "var(--brand-text-color)",
+          }),
+          control: (defaultStyles) => {
+            return {
+              ...defaultStyles,
+              borderRadius: "2px",
+              "@media only screen and (min-width: 640px)": {
+                ...(defaultStyles["@media only screen and (min-width: 640px)"] as object),
+                maxWidth: "320px",
+              },
+            };
+          },
+        }}
         isSearchable={false}
-        className="focus:border-primary-500 focus:ring-primary-500 mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-md border-gray-300 sm:text-sm"
+        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",
+          !hidePlaceholder && "font-medium"
+        )}
         onChange={(option) => {
           setSelectedOption(option);
           if (!option) {

apps/web/components/EmptyScreen.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-
-import { SVGComponent } from "@lib/types/SVGComponent";
-
-export default function EmptyScreen({
-  Icon,
-  headline,
-  description,
-}: {
-  Icon: SVGComponent;
-  headline: string;
-  description: string;
-}) {
-  return (
-    <>
-      <div className="min-h-80 my-6 flex flex-col items-center justify-center rounded-sm border border-dashed">
-        <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-white">
-          <Icon className="inline-block h-10 w-10 bg-white" />
-        </div>
-        <div className="max-w-[420px] text-center">
-          <h2 className="mt-6 mb-1 text-lg font-medium">{headline}</h2>
-          <p className="text-sm leading-6 text-gray-600">{description}</p>
-        </div>
-      </div>
-    </>
-  );
-}

apps/web/components/I18nLanguageHandler.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { trpc } from "@lib/trpc";
 
 export function useViewerI18n() {
-  return trpc.useQuery(["viewer.i18n"], {
+  return trpc.useQuery(["viewer.public.i18n"], {
     staleTime: Infinity,
   });
 }

apps/web/components/ImageUploader.tsx

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

apps/web/components/Loader.tsx

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

apps/web/components/Logo.tsx

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

apps/web/components/NavTabs.tsx

@@ -1,49 +1,89 @@
+import { AdminRequired } from "components/ui/AdminRequired";
+import noop from "lodash/noop";
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React, { ElementType, FC } from "react";
+import { FC, Fragment, MouseEventHandler } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
+import { SVGComponent } from "@lib/types/SVGComponent";
 
-interface Props {
+export interface NavTabProps {
   tabs: {
     name: string;
-    href: string;
-    icon?: ElementType;
+    /** If you want to change the path as per current tab */
+    href?: string;
+    /** If you want to change query param tabName as per current tab */
+    tabName?: string;
+    icon?: SVGComponent;
+    adminRequired?: boolean;
   }[];
   linkProps?: Omit<LinkProps, "href">;
 }
 
-const NavTabs: FC<Props> = ({ tabs, linkProps }) => {
+const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
   const router = useRouter();
+  const { t } = useLocale();
   return (
     <>
       <nav
-        className="-mb-px flex space-x-2 space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse"
-        aria-label="Tabs">
+        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
+        aria-label="Tabs"
+        {...props}>
         {tabs.map((tab) => {
-          const isCurrent = router.asPath === tab.href;
+          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
+            throw new Error("Use either tabName or href");
+          }
+          let href = "";
+          let isCurrent;
+          if (tab.href) {
+            href = tab.href;
+            isCurrent = router.asPath === tab.href;
+          } else if (tab.tabName) {
+            href = "";
+            isCurrent = router.query.tabName === tab.tabName;
+          }
+
+          const onClick: MouseEventHandler = tab.tabName
+            ? (e) => {
+                e.preventDefault();
+                router.push({
+                  query: {
+                    ...router.query,
+                    tabName: tab.tabName,
+                  },
+                });
+              }
+            : noop;
+
+          const Component = tab.adminRequired ? AdminRequired : Fragment;
+
           return (
-            <Link key={tab.name} href={tab.href} {...linkProps}>
-              <a
-                className={classNames(
-                  isCurrent
-                    ? "border-neutral-900 text-neutral-900"
-                    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
-                  "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
-                )}
-                aria-current={isCurrent ? "page" : undefined}>
-                {tab.icon && (
-                  <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"
-                    )}
-                    aria-hidden="true"
-                  />
-                )}
-                <span>{tab.name}</span>
-              </a>
-            </Link>
+            <Component key={tab.name}>
+              <Link key={tab.name} href={href} {...linkProps}>
+                <a
+                  onClick={onClick}
+                  className={classNames(
+                    isCurrent
+                      ? "border-neutral-900 text-neutral-900"
+                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                    "group inline-flex items-center border-b-2 py-4 px-1 text-sm font-medium"
+                  )}
+                  aria-current={isCurrent ? "page" : undefined}>
+                  {tab.icon && (
+                    <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"
+                      )}
+                      aria-hidden="true"
+                    />
+                  )}
+                  <span>{t(tab.name)}</span>
+                </a>
+              </Link>
+            </Component>
           );
         })}
       </nav>

apps/web/components/SettingsShell.tsx

@@ -1,42 +1,66 @@
-import { CreditCardIcon, KeyIcon, UserGroupIcon, UserIcon } from "@heroicons/react/solid";
-import React from "react";
+import {
+  CreditCardIcon,
+  KeyIcon,
+  LockClosedIcon,
+  UserGroupIcon,
+  UserIcon,
+  CodeIcon,
+} from "@heroicons/react/solid";
+import React, { ComponentProps } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import ErrorBoundary from "@lib/ErrorBoundary";
 
 import NavTabs from "./NavTabs";
+import Shell from "./Shell";
 
-export default function SettingsShell({ children }: { children: React.ReactNode }) {
-  const { t } = useLocale();
-
-  const tabs = [
-    {
-      name: t("profile"),
-      href: "/settings/profile",
-      icon: UserIcon,
-    },
-    {
-      name: t("security"),
-      href: "/settings/security",
-      icon: KeyIcon,
-    },
-    {
-      name: t("teams"),
-      href: "/settings/teams",
-      icon: UserGroupIcon,
-    },
-    {
-      name: t("billing"),
-      href: "/settings/billing",
-      icon: CreditCardIcon,
-    },
-  ];
+const tabs = [
+  {
+    name: "profile",
+    href: "/settings/profile",
+    icon: UserIcon,
+  },
+  {
+    name: "teams",
+    href: "/settings/teams",
+    icon: UserGroupIcon,
+  },
+  {
+    name: "security",
+    href: "/settings/security",
+    icon: KeyIcon,
+  },
+  {
+    name: "developer",
+    href: "/settings/developer",
+    icon: CodeIcon,
+  },
+  {
+    name: "billing",
+    href: "/settings/billing",
+    icon: CreditCardIcon,
+  },
+  {
+    name: "admin",
+    href: "/settings/admin",
+    icon: LockClosedIcon,
+    adminRequired: true,
+  },
+];
 
+export default function SettingsShell({
+  children,
+  ...rest
+}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
   return (
-    <>
+    <Shell {...rest}>
       <div className="sm:mx-auto">
         <NavTabs tabs={tabs} />
       </div>
-      <main className="max-w-4xl">{children}</main>
-    </>
+      <main className="max-w-4xl">
+        <>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </>
+      </main>
+    </Shell>
   );
 }

apps/web/components/Shell.tsx

@@ -1,78 +1,78 @@
 import { SelectorIcon } from "@heroicons/react/outline";
 import {
-  CalendarIcon,
   ArrowLeftIcon,
+  CalendarIcon,
   ClockIcon,
   CogIcon,
   ExternalLinkIcon,
   LinkIcon,
   LogoutIcon,
-  PuzzleIcon,
-  MoonIcon,
   MapIcon,
+  MoonIcon,
+  ViewGridIcon,
+  QuestionMarkCircleIcon,
 } from "@heroicons/react/solid";
-import { signOut, useSession } from "next-auth/react";
+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, { ReactNode, useEffect, useState } from "react";
+import React, { Fragment, ReactNode, useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import LicenseBanner from "@ee/components/LicenseBanner";
-import TrialBanner from "@ee/components/TrialBanner";
-import IntercomMenuItem from "@ee/lib/intercom/IntercomMenuItem";
-import ZendeskMenuItem from "@ee/lib/zendesk/ZendeskMenuItem";
-
-import classNames from "@lib/classNames";
-import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
-import { shouldShowOnboarding } from "@lib/getting-started";
-import { useLocale } from "@lib/hooks/useLocale";
-import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { trpc } from "@lib/trpc";
-
-import CustomBranding from "@components/CustomBranding";
-import Loader from "@components/Loader";
-import { HeadSeo } from "@components/seo/head-seo";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@components/ui/Dropdown";
+} 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 { WEBAPP_URL } from "@lib/config/constants";
+import { shouldShowOnboarding } from "@lib/getting-started";
+import useMeQuery from "@lib/hooks/useMeQuery";
+import useTheme from "@lib/hooks/useTheme";
+import { trpc } from "@lib/trpc";
+
+import CustomBranding from "@components/CustomBranding";
+import Loader from "@components/Loader";
+import { HeadSeo } from "@components/seo/head-seo";
+import ImpersonatingBanner from "@components/ui/ImpersonatingBanner";
 
 import pkg from "../package.json";
 import { useViewerI18n } from "./I18nLanguageHandler";
 import Logo from "./Logo";
-import Button from "./ui/Button";
 
-export function useMeQuery() {
-  const meQuery = trpc.useQuery(["viewer.me"], {
-    retry(failureCount) {
-      return failureCount > 3;
-    },
-  });
-
-  return meQuery;
-}
-
-function useRedirectToLoginIfUnauthenticated() {
+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: `${NEXT_PUBLIC_BASE_URL}/${location.pathname}${location.search}`,
+          callbackUrl: `${WEBAPP_URL}${location.pathname}${location.search}`,
         },
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, session]);
+  }, [loading, session, isPublic]);
 
   return {
     loading: loading && !session,
+    session,
   };
 }
 
@@ -81,11 +81,7 @@ function useRedirectToOnboardingIfNeeded() {
   const query = useMeQuery();
   const user = query.data;
 
-  const [isRedirectingToOnboarding, setRedirecting] = useState(false);
-
-  useEffect(() => {
-    user && setRedirecting(shouldShowOnboarding(user));
-  }, [router, user]);
+  const isRedirectingToOnboarding = user && shouldShowOnboarding(user);
 
   useEffect(() => {
     if (isRedirectingToOnboarding) {
@@ -119,25 +115,15 @@ export function ShellSubHeading(props: {
   );
 }
 
-export default function Shell(props: {
-  centered?: boolean;
-  title?: string;
-  heading: ReactNode;
-  subtitle?: ReactNode;
-  children: ReactNode;
-  CTA?: ReactNode;
-  HeadingLeftIcon?: ReactNode;
-  backPath?: string; // renders back button to specified path
-  // use when content needs to expand with flex
-  flexChildrenContainer?: boolean;
-}) {
-  const { t } = useLocale();
+const Layout = ({
+  status,
+  plan,
+  ...props
+}: LayoutProps & { status: SessionContextValue["status"]; plan?: UserPlan; isLoading: boolean }) => {
+  const isEmbed = useIsEmbed();
   const router = useRouter();
-  const { loading } = useRedirectToLoginIfUnauthenticated();
-  const { isRedirectingToOnboarding } = useRedirectToOnboardingIfNeeded();
-
-  const telemetry = useTelemetry();
 
+  const { t } = useLocale();
   const navigation = [
     {
       name: t("event_types_page_title"),
@@ -158,10 +144,22 @@ export default function Shell(props: {
       current: router.asPath.startsWith("/availability"),
     },
     {
-      name: t("integrations"),
-      href: "/integrations",
-      icon: PuzzleIcon,
-      current: router.asPath.startsWith("/integrations"),
+      name: t("apps"),
+      href: "/apps",
+      icon: ViewGridIcon,
+      current: router.asPath.startsWith("/apps"),
+      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"),
@@ -170,31 +168,10 @@ export default function Shell(props: {
       current: router.asPath.startsWith("/settings"),
     },
   ];
-
-  useEffect(() => {
-    telemetry.withJitsu((jitsu) => {
-      return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.asPath));
-    });
-  }, [telemetry, router.asPath]);
-
   const pageTitle = typeof props.heading === "string" ? props.heading : props.title;
 
-  const query = useMeQuery();
-  const user = query.data;
-
-  const i18n = useViewerI18n();
-
-  if (i18n.status === "loading" || isRedirectingToOnboarding || loading) {
-    // show spinner whilst i18n is loading to avoid language flicker
-    return (
-      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-50">
-        <Loader />
-      </div>
-    );
-  }
   return (
     <>
-      <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
       <HeadSeo
         title={pageTitle ?? "Cal.com"}
         description={props.subtitle ? props.subtitle?.toString() : ""}
@@ -207,96 +184,130 @@ export default function Shell(props: {
         <Toaster position="bottom-right" />
       </div>
 
-      <div className="flex h-screen overflow-hidden bg-gray-100" data-testid="dashboard-shell">
-        <div 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">
-                <Link href="/event-types">
-                  <a className="px-4 md:hidden lg:inline">
-                    <Logo small />
-                  </a>
-                </Link>
-                {/* logo icon for tablet */}
-                <Link href="/event-types">
-                  <a className="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) => (
-                    <Link key={item.name} href={item.href}>
-                      <a
-                        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>
-                      </a>
-                    </Link>
-                  ))}
-                </nav>
+      <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">
+                  <Link href="/event-types">
+                    <a className="px-4 md:hidden lg:inline">
+                      <Logo small />
+                    </a>
+                  </Link>
+                  {/* 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) => (
+                      <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>
+                          </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>
+                    ))}
+                  </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>
-              <TrialBanner />
-              <div className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2">
-                <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_APP_URL === "https://cal.com" ? "h" : "sh"}
-                <span className="lowercase">-{user && user.plan}</span>
-              </small>
             </div>
           </div>
-        </div>
+        )}
 
         <div className="flex w-0 flex-1 flex-col overflow-hidden">
           <main
             className={classNames(
-              "relative z-0 max-w-[1700px] flex-1 overflow-y-auto focus:outline-none",
+              "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) */}
-            <nav 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-3 self-center">
-                <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("view_notifications")}</span>
-                  <Link href="/settings/profile">
-                    <a>
-                      <CogIcon className="h-6 w-6" aria-hidden="true" />
-                    </a>
-                  </Link>
-                </button>
-                <UserDropdown small />
-              </div>
-            </nav>
+            {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-3 self-center">
+                  <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("view_notifications")}</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",
-                "py-8"
+                !props.large && "py-8"
               )}>
+              <ImpersonatingBanner />
               {!!props.backPath && (
                 <div className="mx-3 mb-8 sm:mx-8">
                   <Button
@@ -307,50 +318,73 @@ export default function Shell(props: {
                   </Button>
                 </div>
               )}
-              <div className="block min-h-[80px] 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">
-                  <h1 className="font-cal mb-1 text-xl text-gray-900">{props.heading}</h1>
-                  <p className="text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p>
+              {props.heading && (
+                <div
+                  className={classNames(
+                    props.large && "bg-gray-100 py-8 lg:mb-8 lg:pt-16 lg:pb-7",
+                    "block min-h-[80px] 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>
+                        <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200"></div>
+                      </>
+                    ) : (
+                      <>
+                        <h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900">
+                          {props.heading}
+                        </h1>
+                        <p className="min-h-10 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="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"
                 )}>
-                {props.children}
+                <ErrorBoundary>{!props.isLoading ? props.children : props.customLoader}</ErrorBoundary>
               </div>
               {/* show bottom navigation for md and smaller (tablet and phones) */}
-              <nav 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) =>
-                  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
+              {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) =>
+                    item.href === "/settings/profile" ? (
+                      []
+                    ) : (
+                      <Link key={item.name} href={item.href}>
+                        <a
                           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"
+                            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-hidden="true"
-                        />
-                        <span className="truncate">{item.name}</span>
-                      </a>
-                    </Link>
-                  )
-                )}
-              </nav>
+                          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="truncate">{item.name}</span>
+                        </a>
+                      </Link>
+                    )
+                  )}
+                </nav>
+              )}
               {/* add padding to content for mobile navigation*/}
               <div className="block pt-12 md:hidden" />
             </div>
@@ -360,6 +394,61 @@ export default function Shell(props: {
       </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 { isReady, Theme } = useTheme("light");
+
+  const query = useMeQuery();
+  const user = query.data;
+
+  const i18n = useViewerI18n();
+  const { status } = useSession();
+
+  const isLoading =
+    i18n.status === "loading" ||
+    query.status === "loading" ||
+    isRedirectingToOnboarding ||
+    loading ||
+    !isReady;
+
+  if (isLoading) {
+    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 (
+    <>
+      <Theme />
+      <CustomBranding lightVal={user?.brandColor} darkVal={user?.darkBrandColor} />
+      <MemoizedLayout plan={user?.plan} status={status} {...props} isLoading={isLoading} />
+    </>
+  );
 }
 
 function UserDropdown({ small }: { small?: boolean }) {
@@ -372,26 +461,31 @@ function UserDropdown({ small }: { small?: boolean }) {
     },
   });
   const utils = trpc.useContext();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const onHelpItemSelect = () => {
+    setHelpOpen(false);
+    setMenuOpen(false);
+  };
 
   return (
-    <Dropdown>
-      <DropdownMenuTrigger asChild>
-        <div className="group flex w-full cursor-pointer appearance-none items-center">
+    <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"
             )}>
-            <img
-              className="rounded-full"
-              src={
-                (process.env.NEXT_PUBLIC_APP_URL || process.env.NEXT_PUBLIC_BASE_URL) +
-                "/" +
-                user?.username +
-                "/avatar.png"
-              }
-              alt={user?.username || "Nameless User"}
-            />
+            {
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                className="rounded-full"
+                src={WEBAPP_URL + "/" + user?.username + "/avatar.png"}
+                alt={user?.username || "Nameless User"}
+              />
+            }
             {!user?.away && (
               <div className="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></div>
             )}
@@ -415,98 +509,118 @@ function UserDropdown({ small }: { small?: boolean }) {
               />
             </span>
           )}
-        </div>
+        </button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent portalled={true}>
-        <DropdownMenuItem>
-          <a
-            onClick={() => {
-              mutation.mutate({ away: !user?.away });
-              utils.invalidateQueries("viewer.me");
-            }}
-            className="flex 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_APP_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>
+      <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="https://cal.com/slack"
+                target="_blank"
+                rel="noreferrer"
+                className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+                <svg
+                  viewBox="0 0 2447.6 2452.5"
+                  className={classNames(
+                    "text-gray-500 group-hover:text-gray-700",
+                    "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
+                  )}
+                  xmlns="http://www.w3.org/2000/svg">
+                  <g clipRule="evenodd" fillRule="evenodd">
+                    <path
+                      d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
+                      fill="currentColor"></path>
+                    <path
+                      d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
+                      fill="currentColor"></path>
+                    <path
+                      d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
+                      fill="currentColor"></path>
+                    <path
+                      d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
+                      fill="currentColor"></path>
+                  </g>
+                </svg>
+                {t("join_our_slack")}
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://cal.com/roadmap"
+                className="flex items-center px-4 py-2 text-sm text-gray-700">
+                <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
+              </a>
+            </DropdownMenuItem>
+
+            <button
+              className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
+              onClick={() => setHelpOpen(true)}>
+              <QuestionMarkCircleIcon
+                className={classNames(
+                  "text-gray-500 group-hover:text-neutral-500",
+                  "h-5 w-5 flex-shrink-0 ltr:mr-3"
+                )}
+                aria-hidden="true"
+              />
+
+              {t("help")}
+            </button>
+
+            <DropdownMenuSeparator className="h-px bg-gray-200" />
+            <DropdownMenuItem>
+              <a
+                onClick={() => signOut({ callbackUrl: "/auth/logout" })}
+                className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <LogoutIcon
+                  className={classNames(
+                    "text-gray-500 group-hover:text-gray-700",
+                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  )}
+                  aria-hidden="true"
+                />
+                {t("sign_out")}
+              </a>
+            </DropdownMenuItem>
+          </>
         )}
-        <DropdownMenuSeparator className="h-px bg-gray-200" />
-        <DropdownMenuItem>
-          <a
-            href="https://cal.com/slack"
-            target="_blank"
-            rel="noreferrer"
-            className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
-            <svg
-              viewBox="0 0 2447.6 2452.5"
-              className={classNames(
-                "text-gray-500 group-hover:text-gray-700",
-                "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
-              )}
-              xmlns="http://www.w3.org/2000/svg">
-              <g clipRule="evenodd" fillRule="evenodd">
-                <path
-                  d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                  fill="currentColor"></path>
-                <path
-                  d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                  fill="currentColor"></path>
-              </g>
-            </svg>
-            {t("join_our_slack")}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://cal.com/roadmap"
-            className="flex items-center px-4 py-2 text-sm text-gray-700">
-            <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
-          </a>
-        </DropdownMenuItem>
-        <IntercomMenuItem />
-        <ZendeskMenuItem />
-        <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/UpgradeToProDialog.tsx

@@ -0,0 +1,54 @@
+import { InformationCircleIcon } from "@heroicons/react/outline";
+import { Trans } from "next-i18next";
+
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
+
+import { useLocale } from "@lib/hooks/useLocale";
+
+export function UpgradeToProDialog({
+  modalOpen,
+  setModalOpen,
+  children,
+}: {
+  modalOpen: boolean;
+  setModalOpen: (open: boolean) => void;
+  children: React.ReactNode;
+}) {
+  const { t } = useLocale();
+  return (
+    <Dialog open={modalOpen}>
+      <DialogContent>
+        <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
+          <InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
+        </div>
+        <div className="mb-4 sm:flex sm:items-start">
+          <div className="mt-3 sm:mt-0 sm:text-left">
+            <h3 className="font-cal text-lg font-bold leading-6 text-gray-900" id="modal-title">
+              {t("only_available_on_pro_plan")}
+            </h3>
+          </div>
+        </div>
+        <div className="flex flex-col space-y-3">
+          <p>{children}</p>
+          <p>
+            <Trans i18nKey="plan_upgrade_instructions">
+              You can
+              <a href="/api/upgrade" className="underline">
+                upgrade here
+              </a>
+              .
+            </Trans>
+          </p>
+        </div>
+        <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
+          <DialogClose asChild>
+            <Button className="btn-wide table-cell text-center" onClick={() => setModalOpen(false)}>
+              {t("dismiss")}
+            </Button>
+          </DialogClose>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/components/apps/AllApps.tsx

@@ -0,0 +1,27 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { App } from "@calcom/types/App";
+
+import AppCard from "./AppCard";
+
+export default function AllApps({ apps }: { apps: App[] }) {
+  const { t } = useLocale();
+
+  return (
+    <div className="mb-16">
+      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("all_apps")}</h2>
+      <div className="grid-col-1 grid grid-cols-1 gap-3 md:grid-cols-3">
+        {apps.map((app) => (
+          <AppCard
+            key={app.name}
+            name={app.name}
+            slug={app.slug}
+            description={app.description}
+            logo={app.logo}
+            rating={app.rating}
+            reviews={app.reviews}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/apps/AppCard.tsx

@@ -0,0 +1,44 @@
+import Link from "next/link";
+
+import Button from "@calcom/ui/Button";
+
+interface AppCardProps {
+  logo: string;
+  name: string;
+  slug?: string;
+  category?: string;
+  description: string;
+  rating: number;
+  reviews?: number;
+}
+
+export default function AppCard(props: AppCardProps) {
+  return (
+    <Link href={"/apps/" + props.slug}>
+      <a
+        className="block h-full rounded-sm border border-gray-300 p-5 hover:bg-neutral-50"
+        data-testid={`app-store-app-card-${props.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" />
+          }
+          <Button
+            color="secondary"
+            className="ml-auto flex self-start"
+            onClick={() => {
+              console.log("The magic is supposed to happen here");
+            }}>
+            Add
+          </Button>
+        </div>
+        <h3 className="font-medium">{props.name}</h3>
+        {/* 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>
+      </a>
+    </Link>
+  );
+}

apps/web/components/apps/Categories.tsx

@@ -0,0 +1,43 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+export default function AppStoreCategories({
+  categories,
+}: {
+  categories: {
+    name: string;
+    count: number;
+  }[];
+}) {
+  const { t } = useLocale();
+  return (
+    <div className="mb-16">
+      <h2 className="mb-2 text-lg font-semibold text-gray-900">{t("popular_categories")}</h2>
+      <div className="grid-col-1 grid w-full gap-3 overflow-scroll sm:grid-flow-col">
+        {categories.map((category) => (
+          <Link key={category.name} href={"/apps/categories/" + category.name}>
+            <a
+              data-testid={`app-store-category-${category.name}`}
+              className="relative flex rounded-sm bg-gray-100 px-6 py-4 sm:block">
+              <div className="min-w-24 -ml-5 text-center sm:ml-0">
+                <Image
+                  alt={category.name}
+                  width="352"
+                  height="252"
+                  layout="responsive"
+                  src={"/app-store/" + category.name + ".svg"}
+                />
+              </div>
+              <div className="self-center">
+                <h3 className="font-medium capitalize">{category.name}</h3>
+                <p className="text-sm text-gray-500">{category.count} apps</p>
+              </div>
+            </a>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/apps/SkeletonLoader.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui";
+
+import { ShellSubHeading } from "@components/Shell";
+
+function SkeletonLoader({ className }: { className?: string }) {
+  return (
+    <>
+      <ShellSubHeading title={<div className="h-6 w-32 rounded-sm bg-gray-100"></div>} {...{ className }} />
+      <ul className="-mx-4 animate-pulse divide-y divide-neutral-200 rounded-sm border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between p-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-start space-x-2">
+          <SkeletonText width="10" height="10"></SkeletonText>
+          <div className="space-y-2">
+            <SkeletonText height="4" width="32"></SkeletonText>
+            <SkeletonText height="4" width="16"></SkeletonText>
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText width="32" height="11"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+}

apps/web/components/apps/Slider.tsx

@@ -0,0 +1,78 @@
+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";
+
+const Slider = <T extends string | unknown>({
+  title = "",
+  className = "",
+  items,
+  itemKey = (item) => `${item}`,
+  renderItem,
+  options = {},
+}: {
+  title?: string;
+  className?: string;
+  items: T[];
+  itemKey?: (item: T) => string;
+  renderItem?: (item: T) => JSX.Element;
+  options?: Options;
+}) => {
+  const glide = useRef(null);
+  const slider = useRef<Glide.Properties | null>(null);
+
+  useEffect(() => {
+    if (glide.current) {
+      slider.current = new Glide(glide.current, {
+        type: "carousel",
+        ...options,
+      }).mount();
+    }
+
+    return () => slider.current?.destroy();
+  }, [options]);
+
+  return (
+    <div className={`mb-2 ${className}`}>
+      <style jsx global>
+        {`
+          .glide__slide {
+            height: auto !important;
+          }
+        `}
+      </style>
+      <div className="glide" ref={glide}>
+        <div className="flex cursor-default">
+          {title && (
+            <div>
+              <h2 className="mt-0 mb-2 text-lg font-semibold text-gray-900">{title}</h2>
+            </div>
+          )}
+          <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" />
+            </button>
+            <button data-glide-dir=">">
+              <ArrowRightIcon className="h-5 w-5 text-gray-600 hover:text-black" />
+            </button>
+          </div>
+        </div>
+        <div className="glide__track" data-glide-el="track">
+          <ul className="glide__slides">
+            {items.map((item) => {
+              if (typeof renderItem !== "function") return null;
+              return (
+                <li key={itemKey(item)} className="glide__slide h-auto pl-0">
+                  {renderItem(item)}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Slider;

apps/web/components/apps/TrendingAppsSlider.tsx

@@ -0,0 +1,39 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { App } from "@calcom/types/App";
+
+import AppCard from "./AppCard";
+import Slider from "./Slider";
+
+const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
+  const { t } = useLocale();
+
+  return (
+    <Slider<T>
+      className="mb-16"
+      title={t("trending_apps")}
+      items={items.filter((app) => !!app.trending)}
+      itemKey={(app) => app.name}
+      options={{
+        perView: 3,
+        breakpoints: {
+          768 /* and below */: {
+            perView: 1,
+          },
+        },
+      }}
+      renderItem={(app) => (
+        <AppCard
+          key={app.name}
+          name={app.name}
+          slug={app.slug}
+          description={app.description}
+          logo={app.logo}
+          rating={app.rating}
+          reviews={app.reviews}
+        />
+      )}
+    />
+  );
+};
+
+export default TrendingAppsSlider;

apps/web/components/auth/SAMLLogin.tsx

@@ -2,12 +2,12 @@ import { signIn } from "next-auth/react";
 import { Dispatch, SetStateAction } from "react";
 import { useFormContext } from "react-hook-form";
 
+import Button from "@calcom/ui/Button";
+
 import { useLocale } from "@lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { trpc } from "@lib/trpc";
 
-import Button from "@components/ui/Button";
-
 interface Props {
   email: string;
   samlTenantID: string;
@@ -21,7 +21,7 @@ export default function SAMLLogin(props: Props) {
   const methods = useFormContext();
   const telemetry = useTelemetry();
 
-  const mutation = trpc.useMutation("viewer.samlTenantProduct", {
+  const mutation = trpc.useMutation("viewer.public.samlTenantProduct", {
     onSuccess: async (data) => {
       await signIn("saml", {}, { tenant: data.tenant, product: data.product });
     },
@@ -40,9 +40,7 @@ export default function SAMLLogin(props: Props) {
           event.preventDefault();
 
           // track Google logins. Without personal data/payload
-          telemetry.withJitsu((jitsu) =>
-            jitsu.track(telemetryEventTypes.googleLogin, collectPageParameters())
-          );
+          telemetry.event(telemetryEventTypes.googleLogin, collectPageParameters());
 
           if (!props.hostedCal) {
             await signIn("saml", {}, { tenant: props.samlTenantID, product: props.samlProductID });

apps/web/components/auth/TwoFactor.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from "react";
 import useDigitInput from "react-digit-input";
 import { useFormContext } from "react-hook-form";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { Input } from "@calcom/ui/form/fields";
 
-import { Input } from "@components/form/fields";
+import { useLocale } from "@lib/hooks/useLocale";
 
 export default function TwoFactor() {
   const [value, onChange] = useState("");
@@ -29,8 +29,15 @@ export default function TwoFactor() {
     <div className="mx-auto !mt-0 max-w-sm">
       <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 space-x-1">
-        <Input className={className} name="2fa1" inputMode="decimal" {...digits[0]} autoFocus />
+      <div className="flex flex-row justify-between">
+        <Input
+          className={className}
+          name="2fa1"
+          inputMode="decimal"
+          {...digits[0]}
+          autoFocus
+          autoComplete="one-time-code"
+        />
         <Input className={className} name="2fa2" inputMode="decimal" {...digits[1]} />
         <Input className={className} name="2fa3" inputMode="decimal" {...digits[2]} />
         <Input className={className} name="2fa4" inputMode="decimal" {...digits[3]} />

apps/web/components/availability/NewScheduleButton.tsx

@@ -0,0 +1,86 @@
+import { PlusIcon } from "@heroicons/react/solid";
+import { useRouter } from "next/router";
+import { useForm } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { Button } from "@calcom/ui";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Form } from "@calcom/ui/form/fields";
+
+import { HttpError } from "@lib/core/http/error";
+import { trpc } from "@lib/trpc";
+
+export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const form = useForm<{
+    name: string;
+  }>();
+  const { register } = form;
+
+  const createMutation = trpc.useMutation("viewer.availability.schedule.create", {
+    onSuccess: async ({ schedule }) => {
+      await router.push("/availability/" + schedule.id);
+      showToast(t("schedule_created_successfully", { scheduleName: schedule.name }), "success");
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+
+      if (err.data?.code === "UNAUTHORIZED") {
+        const message = `${err.data.code}: You are not able to create this event`;
+        showToast(message, "error");
+      }
+    },
+  });
+
+  return (
+    <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
+      <DialogTrigger asChild>
+        <Button data-testid={name} StartIcon={PlusIcon}>
+          {t("new_schedule_btn")}
+        </Button>
+      </DialogTrigger>
+      <DialogContent>
+        <div className="mb-8">
+          <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+            {t("add_new_schedule")}
+          </h3>
+        </div>
+        <Form
+          form={form}
+          handleSubmit={(values) => {
+            createMutation.mutate(values);
+          }}>
+          <div className="mt-3 space-y-2">
+            <label htmlFor="label" className="block text-sm font-medium text-gray-700">
+              {t("name")}
+            </label>
+            <div className="mt-1">
+              <input
+                type="text"
+                id="name"
+                required
+                className="block w-full rounded-sm border-gray-300 text-sm shadow-sm"
+                placeholder={t("default_schedule_name")}
+                {...register("name")}
+              />
+            </div>
+          </div>
+          <div className="mt-8 flex flex-row-reverse gap-x-2">
+            <Button type="submit" loading={createMutation.isLoading}>
+              {t("continue")}
+            </Button>
+            <DialogClose asChild>
+              <Button color="secondary">{t("cancel")}</Button>
+            </DialogClose>
+          </div>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/components/availability/Schedule.tsx

@@ -0,0 +1,339 @@
+import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
+import { DuplicateIcon } from "@heroicons/react/solid";
+import classNames from "classnames";
+import dayjs, { Dayjs, ConfigType } from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
+import { GroupBase, Props } from "react-select";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import Button from "@calcom/ui/Button";
+import Dropdown, { DropdownMenuTrigger, DropdownMenuContent } from "@calcom/ui/Dropdown";
+
+import { defaultDayRange } from "@lib/availability";
+import { weekdayNames } from "@lib/core/i18n/weekday";
+import useMeQuery from "@lib/hooks/useMeQuery";
+import { TimeRange } from "@lib/types/schedule";
+
+import Select from "@components/ui/form/Select";
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+/** Begin Time Increments For Select */
+const increment = 15;
+
+type Option = {
+  readonly label: string;
+  readonly value: number;
+};
+
+/**
+ * Creates an array of times on a 15 minute interval from
+ * 00:00:00 (Start of day) to
+ * 23:45:00 (End of day with enough time for 15 min booking)
+ */
+const useOptions = () => {
+  // Get user so we can determine 12/24 hour format preferences
+  const query = useMeQuery();
+  const { timeFormat } = query.data || { timeFormat: null };
+
+  const [filteredOptions, setFilteredOptions] = useState<Option[]>([]);
+
+  const options = useMemo(() => {
+    const end = dayjs().utc().endOf("day");
+    let t: Dayjs = dayjs().utc().startOf("day");
+
+    const options: Option[] = [];
+    while (t.isBefore(end)) {
+      options.push({
+        value: t.toDate().valueOf(),
+        label: dayjs(t)
+          .utc()
+          .format(timeFormat === 12 ? "h:mma" : "HH:mm"),
+      });
+      t = t.add(increment, "minutes");
+    }
+    return options;
+  }, [timeFormat]);
+
+  const filter = useCallback(
+    ({ offset, limit, current }: { offset?: ConfigType; limit?: ConfigType; current?: ConfigType }) => {
+      if (current) {
+        const currentOption = options.find((option) => option.value === dayjs(current).toDate().valueOf());
+        if (currentOption) setFilteredOptions([currentOption]);
+      } else
+        setFilteredOptions(
+          options.filter((option) => {
+            const time = dayjs(option.value);
+            return (!limit || time.isBefore(limit)) && (!offset || time.isAfter(offset));
+          })
+        );
+    },
+    [options]
+  );
+
+  return { options: filteredOptions, filter };
+};
+
+type TimeRangeFieldProps = {
+  name: string;
+  className?: string;
+};
+
+const LazySelect = ({
+  value,
+  min,
+  max,
+  ...props
+}: Omit<Props<Option, false, GroupBase<Option>>, "value"> & {
+  value: ConfigType;
+  min?: ConfigType;
+  max?: ConfigType;
+}) => {
+  // Lazy-loaded options, otherwise adding a field has a noticable redraw delay.
+  const { options, filter } = useOptions();
+
+  useEffect(() => {
+    filter({ current: value });
+  }, [filter, value]);
+
+  return (
+    <Select
+      options={options}
+      onMenuOpen={() => {
+        if (min) filter({ offset: min });
+        if (max) filter({ limit: max });
+      }}
+      value={options.find((option) => option.value === dayjs(value).toDate().valueOf())}
+      onMenuClose={() => filter({ current: value })}
+      {...props}
+    />
+  );
+};
+
+const TimeRangeField = ({ name, className }: TimeRangeFieldProps) => {
+  const { watch } = useFormContext();
+  const minEnd = watch(`${name}.start`);
+  const maxStart = watch(`${name}.end`);
+  return (
+    <div className={classNames("flex flex-grow items-center space-x-3", className)}>
+      <Controller
+        name={`${name}.start`}
+        render={({ field: { onChange, value } }) => {
+          return (
+            <LazySelect
+              className="w-[120px]"
+              value={value}
+              max={maxStart}
+              onChange={(option) => {
+                onChange(new Date(option?.value as number));
+              }}
+            />
+          );
+        }}
+      />
+      <span>-</span>
+      <Controller
+        name={`${name}.end`}
+        render={({ field: { onChange, value } }) => (
+          <LazySelect
+            className="flex-grow sm:w-[120px]"
+            value={value}
+            min={minEnd}
+            onChange={(option) => {
+              onChange(new Date(option?.value as number));
+            }}
+          />
+        )}
+      />
+    </div>
+  );
+};
+
+type ScheduleBlockProps = {
+  day: number;
+  weekday: string;
+  name: string;
+};
+
+const CopyTimes = ({ disabled, onApply }: { disabled: number[]; onApply: (selected: number[]) => void }) => {
+  const [selected, setSelected] = useState<number[]>([]);
+  const { i18n, t } = useLocale();
+  return (
+    <div className="m-4 space-y-2 py-4">
+      <p className="h6 text-xs font-medium uppercase text-neutral-400">Copy times to</p>
+      <ol className="space-y-2">
+        {weekdayNames(i18n.language).map((weekday, num) => (
+          <li key={weekday}>
+            <label className="flex w-full items-center justify-between">
+              <span>{weekday}</span>
+              <input
+                value={num}
+                defaultChecked={disabled.includes(num)}
+                disabled={disabled.includes(num)}
+                onChange={(e) => {
+                  if (e.target.checked && !selected.includes(num)) {
+                    setSelected(selected.concat([num]));
+                  } else if (!e.target.checked && selected.includes(num)) {
+                    setSelected(selected.slice(selected.indexOf(num), 1));
+                  }
+                }}
+                type="checkbox"
+                className="inline-block rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500 disabled:text-neutral-400"
+              />
+            </label>
+          </li>
+        ))}
+      </ol>
+      <div className="pt-2">
+        <Button className="w-full justify-center" color="primary" onClick={() => onApply(selected)}>
+          {t("apply")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export const DayRanges = ({
+  name,
+  defaultValue = [defaultDayRange],
+}: {
+  name: string;
+  defaultValue?: TimeRange[];
+}) => {
+  const { setValue, watch } = useFormContext();
+  // XXX: Hack to make copying times work; `fields` is out of date until save.
+  const watcher = watch(name);
+
+  const { fields, replace, append, remove } = useFieldArray({
+    name,
+  });
+
+  useEffect(() => {
+    if (defaultValue.length && !fields.length) {
+      replace(defaultValue);
+    }
+  }, [replace, defaultValue, fields.length]);
+
+  const handleAppend = () => {
+    // FIXME: Fix type-inference, can't get this to work. @see https://github.com/react-hook-form/react-hook-form/issues/4499
+    const nextRangeStart = dayjs((fields[fields.length - 1] as unknown as TimeRange).end);
+    const nextRangeEnd = dayjs(nextRangeStart).add(1, "hour");
+
+    if (nextRangeEnd.isBefore(nextRangeStart.endOf("day"))) {
+      return append({
+        start: nextRangeStart.toDate(),
+        end: nextRangeEnd.toDate(),
+      });
+    }
+  };
+
+  return (
+    <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">
+            <TimeRangeField name={`${name}.${index}`} />
+            <Button
+              size="icon"
+              color="minimal"
+              StartIcon={TrashIcon}
+              type="button"
+              onClick={() => remove(index)}
+            />
+          </div>
+          {index === 0 && (
+            <div className="absolute top-2 right-0 text-right sm:relative sm:top-0 sm:flex-grow">
+              <Button
+                className="text-neutral-400"
+                type="button"
+                color="minimal"
+                size="icon"
+                StartIcon={PlusIcon}
+                onClick={handleAppend}
+              />
+              <Dropdown>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    type="button"
+                    color="minimal"
+                    size="icon"
+                    StartIcon={DuplicateIcon}
+                    onClick={handleAppend}
+                  />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  <CopyTimes
+                    disabled={[parseInt(name.substring(name.lastIndexOf(".") + 1), 10)]}
+                    onApply={(selected) =>
+                      selected.forEach((day) => {
+                        // TODO: Figure out why this is different?
+                        // console.log(watcher, fields);
+                        setValue(name.substring(0, name.lastIndexOf(".") + 1) + day, watcher);
+                      })
+                    }
+                  />
+                </DropdownMenuContent>
+              </Dropdown>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const ScheduleBlock = ({ name, day, weekday }: ScheduleBlockProps) => {
+  const { t } = useLocale();
+
+  const form = useFormContext();
+  const watchAvailable = form.watch(`${name}.${day}`, []);
+
+  return (
+    <fieldset className="relative flex flex-col justify-between space-y-2 py-5 sm:flex-row sm:space-y-0">
+      <label
+        className={classNames(
+          "flex space-x-2 rtl:space-x-reverse",
+          !watchAvailable.length ? "w-full" : "w-1/3"
+        )}>
+        <div className={classNames(!watchAvailable.length ? "w-1/3" : "w-full")}>
+          <input
+            type="checkbox"
+            checked={watchAvailable.length}
+            onChange={(e) => {
+              form.setValue(`${name}.${day}`, e.target.checked ? [defaultDayRange] : []);
+            }}
+            className="inline-block rounded-sm border-gray-300 text-neutral-900 focus:ring-neutral-500"
+          />
+          <span className="ml-2 inline-block text-sm capitalize">{weekday}</span>
+        </div>
+        {!watchAvailable.length && (
+          <div className="flex-grow text-right text-sm text-gray-500 sm:flex-shrink">
+            {t("no_availability")}
+          </div>
+        )}
+      </label>
+      {!!watchAvailable.length && (
+        <div className="flex-grow">
+          <DayRanges name={`${name}.${day}`} defaultValue={[]} />
+        </div>
+      )}
+    </fieldset>
+  );
+};
+
+const Schedule = ({ name }: { name: string }) => {
+  const { i18n } = useLocale();
+  return (
+    <fieldset className="divide-y divide-gray-200">
+      {weekdayNames(i18n.language).map((weekday, num) => (
+        <ScheduleBlock key={num} name={name} weekday={weekday} day={num} />
+      ))}
+    </fieldset>
+  );
+};
+
+export default Schedule;

apps/web/components/availability/ScheduleListItem.tsx

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

apps/web/components/availability/SkeletonLoader.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui";
+
+function SkeletonLoader() {
+  return (
+    <ul className="animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-2 py-[23px] sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex flex-col space-y-2">
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="32" height="2"></SkeletonText>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText width="12" height="6"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+}
+
+export const AvailabilitySelectSkeletonLoader = () => {
+  return (
+    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="4" height="4"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+};

apps/web/components/booking/AvailableTimes.tsx

@@ -1,59 +1,45 @@
-import { ExclamationIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { nameOfDay } from "@calcom/lib/weekday";
 
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
-import { useSlots } from "@lib/hooks/useSlots";
+import { timeZone } from "@lib/clock";
 
-import Loader from "@components/Loader";
+import type { Slot } from "@server/routers/viewer/slots";
 
 type AvailableTimesProps = {
   timeFormat: string;
-  minimumBookingNotice: number;
-  beforeBufferTime: number;
-  afterBufferTime: number;
   eventTypeId: number;
-  eventLength: number;
-  slotInterval: number | null;
+  recurringCount: number | undefined;
+  eventTypeSlug: string;
   date: Dayjs;
   users: {
     username: string | null;
   }[];
   schedulingType: SchedulingType | null;
+  seatsPerTimeSlot?: number | null;
+  slots?: Slot[];
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
+  slots = [],
   date,
-  eventLength,
   eventTypeId,
-  slotInterval,
-  minimumBookingNotice,
+  eventTypeSlug,
+  recurringCount,
   timeFormat,
-  users,
   schedulingType,
-  beforeBufferTime,
-  afterBufferTime,
+  seatsPerTimeSlot,
 }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
   const { rescheduleUid } = router.query;
 
-  const { slots, loading, error } = useSlots({
-    date,
-    slotInterval,
-    eventLength,
-    schedulingType,
-    users,
-    minimumBookingNotice,
-    beforeBufferTime,
-    afterBufferTime,
-    eventTypeId,
-  });
-
   const [brand, setBrand] = useState("#292929");
 
   useEffect(() => {
@@ -63,17 +49,16 @@ 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="mb-4 text-left text-lg font-light text-gray-600">
-        <span className="w-1/2 text-gray-600 dark:text-white">
-          <strong>{date.toDate().toLocaleString(i18n.language, { weekday: "long" })}</strong>
-          <span className="text-gray-500">
+        <span className="text-bookingdarker w-1/2 dark:text-white">
+          <strong>{nameOfDay(i18n.language, Number(date.format("d")))}</strong>
+          <span className="text-bookinglight">
             {date.format(", D ")}
             {date.toDate().toLocaleString(i18n.language, { month: "long" })}
           </span>
         </span>
       </div>
       <div className="flex-grow overflow-y-auto md:h-[364px]">
-        {!loading &&
-          slots?.length > 0 &&
+        {slots?.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
               pathname: string;
@@ -83,8 +68,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               pathname: "book",
               query: {
                 ...router.query,
-                date: slot.time.format(),
+                date: dayjs(slot.time).format(),
                 type: eventTypeId,
+                slug: eventTypeSlug,
+                /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
+                count: recurringCount && !rescheduleUid ? recurringCount : undefined,
               },
             };
 
@@ -96,41 +84,56 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               bookingUrl.query.user = slot.users;
             }
 
+            // If event already has an attendee add booking id
+            if (slot.bookingUid) {
+              bookingUrl.query.bookingUid = slot.bookingUid;
+            }
+
             return (
-              <div key={slot.time.format()}>
-                <Link href={bookingUrl}>
-                  <a
+              <div key={dayjs(slot.time).format()}>
+                {/* Current there is no way to disable Next.js Links */}
+                {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
+                  <div
                     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 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25  dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
-                    )}
-                    data-testid="time">
-                    {slot.time.format(timeFormat)}
-                  </a>
-                </Link>
+                    )}>
+                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                    {!!seatsPerTimeSlot && <p className={`text-sm`}>{t("booking_full")}</p>}
+                  </div>
+                ) : (
+                  <Link href={bookingUrl}>
+                    <a
+                      className={classNames(
+                        "text-primary-500 hover:bg-brand hover:text-brandcontrast dark:hover:bg-darkmodebrand dark:hover:text-darkmodebrandcontrast mb-2 block rounded-sm border bg-white py-4 font-medium hover:text-white dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 dark:hover:border-black",
+                        brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
+                      )}
+                      data-testid="time">
+                      {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
+                      {!!seatsPerTimeSlot && (
+                        <p
+                          className={`${
+                            slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.8
+                              ? "text-rose-600"
+                              : slot.attendees && slot.attendees / seatsPerTimeSlot >= 0.33
+                              ? "text-yellow-500"
+                              : "text-emerald-400"
+                          } text-sm`}>
+                          {slot.attendees ? seatsPerTimeSlot - slot.attendees : seatsPerTimeSlot} /{" "}
+                          {seatsPerTimeSlot} {t("seats_available")}
+                        </p>
+                      )}
+                    </a>
+                  </Link>
+                )}
               </div>
             );
           })}
-        {!loading && !error && !slots.length && (
+        {!slots.length && (
           <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
             <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
           </div>
         )}
-
-        {loading && <Loader />}
-
-        {error && (
-          <div className="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" />
-              </div>
-              <div className="ltr:ml-3 rtl:mr-3">
-                <p className="text-sm text-yellow-700">{t("slots_load_fail")}</p>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

apps/web/components/booking/BookingListItem.tsx

@@ -1,39 +1,76 @@
-import { BanIcon, CheckIcon, ClockIcon, XIcon } from "@heroicons/react/outline";
+import {
+  BanIcon,
+  CheckIcon,
+  ClockIcon,
+  LocationMarkerIcon,
+  PaperAirplaneIcon,
+  PencilAltIcon,
+  XIcon,
+} from "@heroicons/react/outline";
+import { RefreshIcon } from "@heroicons/react/solid";
 import { BookingStatus } from "@prisma/client";
 import dayjs from "dayjs";
+import { useRouter } from "next/router";
 import { useState } from "react";
 import { useMutation } from "react-query";
 
-import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import { inferQueryOutput, trpc } from "@lib/trpc";
+import { parseRecurringEvent } from "@calcom/lib";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Tooltip } from "@calcom/ui/Tooltip";
+import { TextArea } from "@calcom/ui/form/fields";
 
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@components/Dialog";
-import { useMeQuery } from "@components/Shell";
-import { TextArea } from "@components/form/fields";
-import Button from "@components/ui/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 { parseRecurringDates } from "@lib/parseDate";
+import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";
+
+import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
+import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";
 
+type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
+
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
-function BookingListItem(booking: BookingItem) {
+type BookingItemProps = BookingItem & {
+  listingStatus: BookingListingStatus;
+  recurringCount?: number;
+};
+
+function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
   const { t, i18n } = useLocale();
   const utils = trpc.useContext();
+  const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const mutation = useMutation(
     async (confirm: boolean) => {
+      let body = {
+        id: booking.id,
+        confirmed: confirm,
+        language: i18n.language,
+        reason: rejectionReason,
+      };
+      /**
+       * Only pass down the recurring event id when we need to confirm the entire series, which happens in
+       * the "Recurring" tab, to support confirming discretionally in the "Recurring" tab.
+       */
+      if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+        body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
+      }
       const res = await fetch("/api/book/confirm", {
         method: "PATCH",
-        body: JSON.stringify({
-          id: booking.id,
-          confirmed: confirm,
-          language: i18n.language,
-          reason: rejectionReason,
-        }),
+        body: JSON.stringify(body),
         headers: {
           "Content-Type": "application/json",
         },
@@ -41,6 +78,7 @@ function BookingListItem(booking: BookingItem) {
       if (!res.ok) {
         throw new HttpError({ statusCode: res.status });
       }
+      setRejectionDialogIsOpen(false);
     },
     {
       async onSettled() {
@@ -50,44 +88,184 @@ function BookingListItem(booking: BookingItem) {
   );
   const isUpcoming = new Date(booking.endTime) >= new Date();
   const isCancelled = booking.status === BookingStatus.CANCELLED;
+  const isConfirmed = booking.status === BookingStatus.ACCEPTED;
+  const isRejected = booking.status === BookingStatus.REJECTED;
+  const isPending = booking.status === BookingStatus.PENDING;
 
   const pendingActions: ActionType[] = [
     {
       id: "reject",
-      label: t("reject"),
-      onClick: () => setRejectionDialogIsOpen(true),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("reject_all")
+          : t("reject"),
+      onClick: () => {
+        setRejectionDialogIsOpen(true);
+      },
       icon: BanIcon,
       disabled: mutation.isLoading,
     },
     {
       id: "confirm",
-      label: t("confirm"),
-      onClick: () => mutation.mutate(true),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("confirm_all")
+          : t("confirm"),
+      onClick: () => {
+        mutation.mutate(true);
+      },
       icon: CheckIcon,
       disabled: mutation.isLoading,
       color: "primary",
     },
   ];
 
-  const bookedActions: ActionType[] = [
+  let bookedActions: ActionType[] = [
     {
       id: "cancel",
-      label: t("cancel"),
+      label:
+        booking.listingStatus === "recurring" && booking.recurringEventId !== null
+          ? t("cancel_all_remaining")
+          : t("cancel"),
       href: `/cancel/${booking.uid}`,
       icon: XIcon,
     },
     {
-      id: "reschedule",
-      label: t("reschedule"),
-      href: `/reschedule/${booking.uid}`,
-      icon: ClockIcon,
+      id: "edit_booking",
+      label: t("edit_booking"),
+      icon: PencilAltIcon,
+      actions: [
+        {
+          id: "reschedule",
+          icon: ClockIcon,
+          label: t("reschedule_booking"),
+          href: `/reschedule/${booking.uid}`,
+        },
+        {
+          id: "reschedule_request",
+          icon: PaperAirplaneIcon,
+          iconClassName: "rotate-45 w-[18px] -ml-[2px]",
+          label: t("send_reschedule_request"),
+          onClick: () => {
+            setIsOpenRescheduleDialog(true);
+          },
+        },
+        {
+          id: "change_location",
+          label: t("edit_location"),
+          onClick: () => {
+            setIsOpenLocationDialog(true);
+          },
+          icon: LocationMarkerIcon,
+        },
+      ],
     },
   ];
 
-  const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
+  if (booking.listingStatus === "recurring" && booking.recurringEventId !== null) {
+    bookedActions = bookedActions.filter((action) => action.id !== "edit_booking");
+  }
 
+  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" />
+        <p className="ml-2 ">{t("reschedule_request_sent")}</p>
+      </div>
+    );
+  };
+
+  const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
+  const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
+  const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
+  const setLocationMutation = trpc.useMutation("viewer.bookings.editLocation", {
+    onSuccess: () => {
+      showToast(t("location_updated"), "success");
+      setIsOpenLocationDialog(false);
+      utils.invalidateQueries("viewer.bookings");
+    },
+  });
+
+  const saveLocation = (newLocationType: LocationType, details: { [key: string]: string }) => {
+    let newLocation = newLocationType as string;
+    if (
+      newLocationType === LocationType.InPerson ||
+      newLocationType === LocationType.Link ||
+      newLocationType === LocationType.UserPhone
+    ) {
+      newLocation = details[Object.keys(details)[0]];
+    }
+    setLocationMutation.mutate({ bookingId: booking.id, newLocation });
+  };
+
+  // Calculate the booking date(s) and setup recurring event data to show
+  let recurringStrings: string[] = [];
+  let recurringDates: Date[] = [];
+  const today = new Date();
+  if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== undefined) {
+    [recurringStrings, recurringDates] = parseRecurringDates(
+      {
+        startDate: booking.startTime,
+        recurringEvent: parseRecurringEvent(booking.eventType.recurringEvent),
+        recurringCount: booking.recurringCount,
+      },
+      i18n
+    );
+    if (booking.status === BookingStatus.PENDING) {
+      // Only take into consideration next up instances if booking is confirmed
+      recurringDates = recurringDates.filter((aDate) => aDate >= today);
+      recurringStrings = recurringDates.map((_, key) => recurringStrings[key]);
+    }
+  }
+
+  let location = booking.location || "";
+
+  if (location.includes("integration")) {
+    if (booking.status === BookingStatus.CANCELLED || booking.status === BookingStatus.REJECTED) {
+      location = t("web_conference");
+    } else if (isConfirmed) {
+      location = linkValueToString(booking.location, t);
+    } else {
+      location = t("web_conferencing_details_to_follow");
+    }
+  }
+
+  const onClick = () => {
+    router.push({
+      pathname: "/success",
+      query: {
+        date: booking.startTime,
+        // TODO: Booking when fetched should have id 0 already(for Dynamic Events).
+        type: booking.eventType.id || 0,
+        eventSlug: booking.eventType.slug,
+        user: user?.username || "",
+        name: booking.attendees[0] ? booking.attendees[0].name : undefined,
+        email: booking.attendees[0] ? booking.attendees[0].email : undefined,
+        location: location,
+        eventName: booking.eventType.eventName || "",
+        bookingId: booking.id,
+        recur: booking.recurringEventId,
+        reschedule: isConfirmed,
+        listingStatus: booking.listingStatus,
+        status: booking.status,
+      },
+    });
+  };
   return (
     <>
+      <RescheduleDialog
+        isOpenDialog={isOpenRescheduleDialog}
+        setIsOpenDialog={setIsOpenRescheduleDialog}
+        bookingUId={booking.uid}
+      />
+      <EditLocationDialog
+        booking={booking}
+        saveLocation={saveLocation}
+        isOpenDialog={isOpenSetLocationDialog}
+        setShowLocationModal={setIsOpenLocationDialog}
+      />
+
+      {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
       <Dialog open={rejectionDialogIsOpen} onOpenChange={setRejectionDialogIsOpen}>
         <DialogContent>
           <DialogHeader title={t("rejection_reason_title")} />
@@ -120,65 +298,109 @@ function BookingListItem(booking: BookingItem) {
         </DialogContent>
       </Dialog>
 
-      <tr className="flex">
-        <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell">
-          <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")}
+      <tr className="flex hover:bg-neutral-50">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-64" onClick={onClick}>
+          <div className="cursor-pointer py-4">
+            <div className="text-sm leading-6 text-gray-900">{startTime}</div>
+            <div className="text-sm text-gray-500">
+              {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
+              {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
+            </div>
+            <div className="text-sm text-gray-400">
+              {booking.recurringCount &&
+                booking.eventType?.recurringEvent?.freq &&
+                (booking.listingStatus === "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">
+                          <RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <p className="pl-[21px]">
+                            {booking.status === BookingStatus.ACCEPTED
+                              ? `${t("event_remaining", {
+                                  count: recurringDates.length,
+                                })}`
+                              : getEveryFreqFor({
+                                  t,
+                                  recurringEvent: booking.eventType.recurringEvent,
+                                  recurringCount: booking.recurringCount,
+                                })}
+                          </p>
+                        </div>
+                      </Tooltip>
+                    </div>
+                  </div>
+                )}
+            </div>
           </div>
         </td>
-        <td className={"flex-1 py-4 ltr:pl-4 rtl:pr-4" + (booking.rejected ? " line-through" : "")}>
-          <div className="sm:hidden">
-            {!booking.confirmed && !booking.rejected && (
-              <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>
-            )}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
-            )}
-            <div className="text-sm font-medium text-gray-900">
-              {startTime}:{" "}
-              <small className="text-sm text-gray-500">
-                {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
-              </small>
+        <td className={"flex-1 ltr:pl-4 rtl:pr-4" + (isRejected ? " line-through" : "")} onClick={onClick}>
+          <div className="cursor-pointer py-4">
+            <div className="sm:hidden">
+              {isPending && <Tag className="mb-2 ltr:mr-2 rtl:ml-2">{t("unconfirmed")}</Tag>}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Tag className="mb-2 ltr:mr-2 rtl:ml-2">Pending payment</Tag>
+              )}
+              <div className="text-sm font-medium text-gray-900">
+                {startTime}:{" "}
+                <small className="text-sm text-gray-500">
+                  {dayjs(booking.startTime).format("HH:mm")} - {dayjs(booking.endTime).format("HH:mm")}
+                </small>
+              </div>
             </div>
-          </div>
-          <div
-            title={booking.title}
-            className="max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max">
-            {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
-            {booking.title}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
+            <div
+              title={booking.title}
+              className={classNames(
+                "max-w-56 truncate text-sm font-medium leading-6 text-neutral-900 md:max-w-max",
+                isCancelled ? "line-through" : ""
+              )}>
+              {booking.eventType?.team && <strong>{booking.eventType.team.name}: </strong>}
+              {booking.title}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">Pending payment</Tag>
+              )}
+              {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"
+                title={booking.description}>
+                &quot;{booking.description}&quot;
+              </div>
             )}
-            {!booking.confirmed && !booking.rejected && (
-              <Tag className="hidden ltr:ml-2 rtl:mr-2 sm:inline-flex">{t("unconfirmed")}</Tag>
+
+            {booking.attendees.length !== 0 && (
+              <a
+                className="text-sm text-gray-900 hover:text-blue-500"
+                href={"mailto:" + booking.attendees[0].email}
+                onClick={(e) => e.stopPropagation()}>
+                {booking.attendees[0].email}
+              </a>
+            )}
+            {isCancelled && booking.rescheduled && (
+              <div className="mt-2 inline-block text-left text-sm md:hidden">
+                <RequestSentMessage />
+              </div>
             )}
           </div>
-          {booking.description && (
-            <div className="max-w-52 md:max-w-96 truncate text-sm text-gray-500" title={booking.description}>
-              &quot;{booking.description}&quot;
-            </div>
-          )}
-          {booking.attendees.length !== 0 && (
-            <div className="text-sm text-gray-900 hover:text-blue-500">
-              <a href={"mailto:" + booking.attendees[0].email}>{booking.attendees[0].email}</a>
-            </div>
-          )}
         </td>
 
         <td className="whitespace-nowrap py-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4">
           {isUpcoming && !isCancelled ? (
             <>
-              {!booking.confirmed && !booking.rejected && user!.id === booking.user!.id && (
-                <TableActions actions={pendingActions} />
-              )}
-              {booking.confirmed && !booking.rejected && <TableActions actions={bookedActions} />}
-              {!booking.confirmed && booking.rejected && (
-                <div className="text-sm text-gray-500">{t("rejected")}</div>
-              )}
+              {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}
+          {isCancelled && booking.rescheduled && (
+            <div className="hidden h-full items-center md:flex">
+              <RequestSentMessage />
+            </div>
+          )}
         </td>
       </tr>
     </>

apps/web/components/booking/CancelBooking.tsx

@@ -0,0 +1,121 @@
+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 { Button } from "@calcom/ui/Button";
+
+import useTheme from "@lib/hooks/useTheme";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
+
+type Props = {
+  booking: {
+    title?: string;
+    uid?: string;
+  };
+  profile: {
+    name: string | null;
+    slug: string | null;
+  };
+  recurringEvent: RecurringEvent | null;
+  team?: string | null;
+  setIsCancellationMode: (value: boolean) => void;
+  theme: string | null;
+};
+
+export default function CancelBooking(props: Props) {
+  const [cancellationReason, setCancellationReason] = useState<string>("");
+  const { t } = useLocale();
+  const router = useRouter();
+  const { booking, profile, team } = props;
+  const [loading, setLoading] = useState(false);
+  const telemetry = useTelemetry();
+  const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
+  const { isReady, Theme } = useTheme(props.theme);
+
+  if (isReady) {
+    return (
+      <>
+        <Theme />
+        {error && (
+          <div>
+            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+              <XIcon className="h-6 w-6 text-red-600" />
+            </div>
+            <div className="mt-3 text-center sm:mt-5">
+              <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
+                {error}
+              </h3>
+            </div>
+          </div>
+        )}
+        {!error && (
+          <div className="mt-5 sm:mt-6">
+            <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
+            <textarea
+              placeholder={t("cancellation_reason_placeholder")}
+              value={cancellationReason}
+              onChange={(e) => setCancellationReason(e.target.value)}
+              className="mt-2 mb-3 w-full dark:border-gray-900 dark:bg-gray-700 dark:text-white sm:mb-3 "
+              rows={3}
+            />
+            <div className="flex rtl:space-x-reverse">
+              {!props.recurringEvent && (
+                <div className="w-full">
+                  <Button color="secondary" onClick={() => router.push("/reschedule/" + booking?.uid)}>
+                    {t("reschedule_this")}
+                  </Button>
+                </div>
+              )}
+              <div className="w-full space-x-2 text-right">
+                <Button color="secondary" onClick={() => props.setIsCancellationMode(false)}>
+                  {t("nevermind")}
+                </Button>
+                <Button
+                  data-testid="cancel"
+                  onClick={async () => {
+                    setLoading(true);
+
+                    const payload = {
+                      uid: booking?.uid,
+                      reason: cancellationReason,
+                    };
+
+                    telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+
+                    const res = await fetch("/api/cancel", {
+                      body: JSON.stringify(payload),
+                      headers: {
+                        "Content-Type": "application/json",
+                      },
+                      method: "DELETE",
+                    });
+
+                    if (res.status >= 200 && res.status < 300) {
+                      await router.push(
+                        `/cancel/success?name=${props.profile.name}&title=${booking?.title}&eventPage=${
+                          profile.slug
+                        }&team=${team ? 1 : 0}&recurring=${!!props.recurringEvent}`
+                      );
+                    } else {
+                      setLoading(false);
+                      setError(
+                        `${t("error_with_status_code_occured", { status: res.status })} ${t(
+                          "please_try_again"
+                        )}`
+                      );
+                    }
+                  }}
+                  loading={loading}>
+                  {t("cancel_event")}
+                </Button>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  }
+  return <></>;
+}

apps/web/components/booking/DatePicker.tsx

@@ -1,17 +1,20 @@
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
-import { EventType, PeriodType } from "@prisma/client";
+import { PeriodType } from "@prisma/client";
 import dayjs, { Dayjs } from "dayjs";
-import dayjsBusinessTime from "dayjs-business-time";
+import dayjsBusinessTime from "dayjs-business-days2";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { memoize } from "lodash";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { useEmbedStyles } from "@calcom/embed-core/embed-iframe";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
 import { weekdayNames } from "@lib/core/i18n/weekday";
 import { doWorkAsync } from "@lib/doWorkAsync";
-import { useLocale } from "@lib/hooks/useLocale";
+import isOutOfBounds from "@lib/isOutOfBounds";
 import getSlots from "@lib/slots";
 import { WorkingHours } from "@lib/types/schedule";
 
@@ -35,41 +38,6 @@ type DatePickerProps = {
   minimumBookingNotice: number;
 };
 
-function isOutOfBounds(
-  time: dayjs.ConfigType,
-  {
-    periodType,
-    periodDays,
-    periodCountCalendarDays,
-    periodStartDate,
-    periodEndDate,
-  }: Pick<
-    EventType,
-    "periodType" | "periodDays" | "periodCountCalendarDays" | "periodStartDate" | "periodEndDate"
-  >
-) {
-  const date = dayjs(time);
-
-  switch (periodType) {
-    case PeriodType.ROLLING: {
-      const periodRollingEndDay = periodCountCalendarDays
-        ? dayjs().utcOffset(date.utcOffset()).add(periodDays!, "days").endOf("day")
-        : dayjs().utcOffset(date.utcOffset()).addBusinessTime(periodDays!, "days").endOf("day");
-      return date.endOf("day").isAfter(periodRollingEndDay);
-    }
-
-    case PeriodType.RANGE: {
-      const periodRangeStartDay = dayjs(periodStartDate).utcOffset(date.utcOffset()).endOf("day");
-      const periodRangeEndDay = dayjs(periodEndDate).utcOffset(date.utcOffset()).endOf("day");
-      return date.endOf("day").isBefore(periodRangeStartDay) || date.endOf("day").isAfter(periodRangeEndDay);
-    }
-
-    case PeriodType.UNLIMITED:
-    default:
-      return false;
-  }
-}
-
 function DatePicker({
   weekStart,
   onDatePicked,
@@ -85,13 +53,14 @@ function DatePicker({
 }: DatePickerProps): JSX.Element {
   const { i18n } = useLocale();
   const [browsingDate, setBrowsingDate] = useState<Dayjs | null>(date);
-
+  const enabledDateButtonEmbedStyles = useEmbedStyles("enabledDateButton");
+  const disabledDateButtonEmbedStyles = useEmbedStyles("disabledDateButton");
   const [month, setMonth] = useState<string>("");
   const [year, setYear] = useState<string>("");
   const [isFirstMonth, setIsFirstMonth] = useState<boolean>(false);
   const [daysFromState, setDays] = useState<
     | {
-        disabled: Boolean;
+        disabled: boolean;
         date: number;
       }[]
     | null
@@ -123,6 +92,8 @@ function DatePicker({
       eventLength,
       minimumBookingNotice,
       workingHours,
+    }: Omit<DatePickerProps, "weekStart" | "onDatePicked" | "date"> & {
+      browsingDate: Dayjs;
     }
   ) => {
     const date = browsingDate.startOf("day").date(day);
@@ -185,8 +156,8 @@ function DatePicker({
       batch: 1,
       name: "DatePicker",
       length: daysInMonth,
-      callback: (i: number, isLast) => {
-        let day = i + 1;
+      callback: (i: number) => {
+        const day = i + 1;
         days[daysInitialOffset + i] = {
           disabled: isDisabledMemoized(day, {
             browsingDate,
@@ -229,20 +200,20 @@ function DatePicker({
       className={
         "mt-8 sm:mt-0 sm:min-w-[455px] " +
         (date
-          ? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-800 md:w-1/3 "
+          ? "w-full sm:w-1/2 sm:border-r sm:pl-4 sm:pr-6 sm:dark:border-gray-700 md:w-1/3 "
           : "w-full sm:pl-4")
       }>
-      <div className="mb-4 flex text-xl font-light text-gray-600">
-        <span className="w-1/2 text-gray-600 dark:text-white">
-          <strong className="text-gray-900 dark:text-white">{month}</strong>{" "}
-          <span className="text-gray-500">{year}</span>
+      <div className="mb-4 flex text-xl font-light">
+        <span className="w-1/2 dark:text-white">
+          <strong className="text-bookingdarker dark:text-white">{month}</strong>{" "}
+          <span className="text-bookinglight">{year}</span>
         </span>
-        <div className="w-1/2 text-right text-gray-600 dark:text-gray-400">
+        <div className="w-1/2 text-right dark:text-gray-400">
           <button
             onClick={decrementMonth}
             className={classNames(
               "group p-1 ltr:mr-2 rtl:ml-2",
-              isFirstMonth && "text-gray-400 dark:text-gray-600"
+              isFirstMonth && "text-bookinglighter dark:text-gray-600"
             )}
             disabled={isFirstMonth}
             data-testid="decrementMonth">
@@ -253,9 +224,9 @@ function DatePicker({
           </button>
         </div>
       </div>
-      <div className="grid grid-cols-7 gap-4 border-t border-b text-center dark:border-gray-800 sm:border-0">
+      <div className="border-bookinglightest grid grid-cols-7 gap-4 border-t border-b text-center dark:border-gray-800 sm:border-0">
         {weekdayNames(i18n.language, weekStart === "Sunday" ? 0 : 1, "short").map((weekDay) => (
-          <div key={weekDay} className="my-4 text-xs uppercase tracking-widest text-gray-500">
+          <div key={weekDay} className="text-bookinglight my-4 text-xs uppercase tracking-widest">
             {weekDay}
           </div>
         ))}
@@ -274,14 +245,13 @@ function DatePicker({
               <button
                 onClick={() => onDatePicked(browsingDate.date(day.date))}
                 disabled={day.disabled}
+                style={
+                  day.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }
+                }
                 className={classNames(
-                  "absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
-                  "hover:border-brand hover:border dark:hover:border-white",
-                  day.disabled ? "cursor-default font-light text-gray-400 hover:border-0" : "font-medium",
+                  "hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center font-medium hover:border disabled:cursor-default disabled:font-light disabled:hover:border-0 dark:hover:border-white",
                   date && date.isSame(browsingDate.date(day.date), "day")
-                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
-                    : !day.disabled
-                    ? " bg-gray-100 dark:bg-gray-600 dark:text-white"
+                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast disabled:bg-gray-100 disabled:dark:bg-gray-600 disabled:dark:text-white"
                     : ""
                 )}
                 data-testid="day"

apps/web/components/booking/SkeletonLoader.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+import { SkeletonText } from "@calcom/ui";
+
+function SkeletonLoader() {
+  return (
+    <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+      <SkeletonItem />
+      <SkeletonItem />
+      <SkeletonItem />
+    </ul>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <li className="group flex w-full items-center justify-between px-2 py-4 sm:px-6">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex">
+          <div className="flex flex-col space-y-2">
+            <SkeletonText width="16" height="5" />
+            <SkeletonText width="32" height="4" />
+          </div>
+        </div>
+      </div>
+      <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">
+        <div className="flex justify-between space-x-2 rtl:space-x-reverse">
+          <SkeletonText width="16" height="6" />
+          <SkeletonText width="32" height="6" />
+        </div>
+      </div>
+    </li>
+  );
+}

apps/web/components/booking/TimeOptions.tsx

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

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

@@ -3,110 +3,365 @@ import {
   ArrowLeftIcon,
   ChevronDownIcon,
   ChevronUpIcon,
+  ClipboardCheckIcon,
   ClockIcon,
   CreditCardIcon,
   GlobeIcon,
+  InformationCircleIcon,
+  LocationMarkerIcon,
+  RefreshIcon,
+  VideoCameraIcon,
 } from "@heroicons/react/solid";
+import { EventType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useContracts } from "contexts/contractsContext";
-import dayjs, { Dayjs } from "dayjs";
+import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import utc from "dayjs/plugin/utc";
+import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
+import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations";
+import {
+  useEmbedNonStylesConfig,
+  useEmbedStyles,
+  useIsBackgroundTransparent,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
+import classNames from "@calcom/lib/classNames";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
+import { yyyymmdd } from "@calcom/lib/date-fns";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { getRecurringFreq } from "@calcom/lib/recurringStrings";
+import { localStorage } from "@calcom/lib/webstorage";
+import DatePicker, { Day } from "@calcom/ui/booker/DatePicker";
+
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
-import { BASE_URL } from "@lib/config/constants";
-import { useLocale } from "@lib/hooks/useLocale";
+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 { trpc } from "@lib/trpc";
 
 import CustomBranding from "@components/CustomBranding";
 import AvailableTimes from "@components/booking/AvailableTimes";
-import DatePicker from "@components/booking/DatePicker";
 import TimeOptions from "@components/booking/TimeOptions";
 import { HeadSeo } from "@components/seo/head-seo";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
-import { AvailabilityPageProps } from "../../../pages/[user]/[type]";
-import { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
+import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
+import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
+import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
 
 dayjs.extend(utc);
 dayjs.extend(customParseFormat);
 
-type Props = AvailabilityTeamPageProps | AvailabilityPageProps;
+type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
-const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Props) => {
+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 = ({ slug }: { slug: string }) => {
   const router = useRouter();
+  const [previousPage, setPreviousPage] = useState<string>();
+  useEffect(() => {
+    setPreviousPage(document.referrer);
+  }, []);
+
+  return previousPage === `${WEBAPP_URL}/${slug}` ? (
+    <div className="flex h-full flex-col justify-end">
+      <ArrowLeftIcon
+        className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white"
+        onClick={() => router.back()}
+      />
+      <p className="sr-only">Go Back</p>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+const useSlots = ({
+  eventTypeId,
+  startTime,
+  endTime,
+}: {
+  eventTypeId: number;
+  startTime: Date;
+  endTime: Date;
+}) => {
+  const { data, isLoading } = trpc.useQuery(
+    [
+      "viewer.public.slots.getSchedule",
+      {
+        eventTypeId,
+        startTime: startTime.toISOString(),
+        endTime: endTime.toISOString(),
+      },
+    ],
+    /** Prevents fetching past dates */
+    { enabled: dayjs(startTime).isAfter(dayjs().subtract(1, "day")) }
+  );
+
+  return { slots: data?.slots || {}, isLoading };
+};
+
+const SlotPicker = ({
+  eventType,
+  timezoneDropdown,
+  timeFormat,
+  timeZone,
+  recurringEventCount,
+  seatsPerTimeSlot,
+  weekStart = 0,
+}: {
+  eventType: Pick<EventType, "id" | "schedulingType" | "slug">;
+  timezoneDropdown: JSX.Element;
+  timeFormat: string;
+  timeZone?: string;
+  seatsPerTimeSlot?: number;
+  recurringEventCount?: number;
+  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+}) => {
+  const { selectedDate, setSelectedDate } = useDateSelected({ timeZone });
+
+  const { i18n, isLocaleReady } = useLocale();
+  const [startDate, setStartDate] = useState(new Date());
+
+  useEffect(() => {
+    if (dayjs(selectedDate).startOf("month").isAfter(dayjs())) {
+      setStartDate(dayjs(selectedDate).startOf("month").toDate());
+    }
+  }, [selectedDate]);
+
+  const { slots, isLoading } = useSlots({
+    eventTypeId: eventType.id,
+    startTime: dayjs(startDate).startOf("day").toDate(),
+    endTime: dayjs(startDate).endOf("month").toDate(),
+  });
+
+  return (
+    <>
+      <DatePicker
+        isLoading={isLoading}
+        className={
+          "mt-8 w-full sm:mt-0 sm:min-w-[455px] " +
+          (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")
+        }
+        includedDates={Object.keys(slots).filter((k) => slots[k].length > 0)}
+        locale={isLocaleReady ? i18n.language : "en"}
+        selected={selectedDate}
+        onChange={setSelectedDate}
+        onMonthChange={(startDate) => {
+          // set the minimum day to today in the current month, not the beginning of the month
+          setStartDate(
+            dayjs(startDate).isBefore(dayjs().subtract(1, "day"))
+              ? dayjs(new Date()).startOf("day").toDate()
+              : startDate
+          );
+        }}
+        weekStart={weekStart}
+        // DayComponent={(props) => <DayContainer {...props} eventTypeId={eventType.id} />}
+      />
+
+      <div className="mt-4 ml-1 block sm:hidden">{timezoneDropdown}</div>
+
+      {selectedDate && (
+        <AvailableTimes
+          slots={slots[yyyymmdd(selectedDate)]}
+          date={dayjs(selectedDate)}
+          timeFormat={timeFormat}
+          eventTypeId={eventType.id}
+          eventTypeSlug={eventType.slug}
+          seatsPerTimeSlot={seatsPerTimeSlot}
+          recurringCount={recurringEventCount}
+          schedulingType={eventType.schedulingType}
+          users={[]}
+        />
+      )}
+    </>
+  );
+};
+
+function TimezoneDropdown({
+  onChangeTimeFormat,
+  onChangeTimeZone,
+}: {
+  onChangeTimeFormat: (newTimeFormat: string) => void;
+  onChangeTimeZone: (newTimeZone: string) => void;
+}) {
+  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
+
+  useEffect(() => {
+    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleSelectTimeZone = (newTimeZone: string) => {
+    timeZone(newTimeZone);
+    onChangeTimeZone(newTimeZone);
+    setIsTimeOptionsOpen(false);
+  };
+
+  const handleToggle24hClock = (is24hClock: boolean) => {
+    onChangeTimeFormat(is24hClock ? "HH:mm" : "h:mma");
+  };
+
+  return (
+    <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
+      <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
+        <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+        {timeZone()}
+        {isTimeOptionsOpen ? (
+          <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
+        ) : (
+          <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
+        )}
+      </Collapsible.Trigger>
+      <Collapsible.Content>
+        <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+}
+
+const useDateSelected = ({ timeZone }: { timeZone?: string }) => {
+  const router = useRouter();
+  const [selectedDate, _setSelectedDate] = useState<Date>();
+
+  useEffect(() => {
+    /** TODO: router.query.date is comming as `null` even when set like this:
+     * `/user/type?date=2022-06-22-0600`
+     */
+    const dateString = asStringOrNull(router.query.date);
+    if (dateString) {
+      const offsetString = dateString.substr(11, 14); // hhmm
+      const offsetSign = dateString.substr(10, 1); // + or -
+
+      const offsetHour = offsetString.slice(0, -2);
+      const offsetMinute = offsetString.slice(-2);
+
+      const utcOffsetInMinutes =
+        (offsetSign === "-" ? -1 : 1) *
+        (60 * (offsetHour !== "" ? parseInt(offsetHour) : 0) +
+          (offsetMinute !== "" ? parseInt(offsetMinute) : 0));
+
+      const date = dayjs(dateString.substr(0, 10)).utcOffset(utcOffsetInMinutes, true);
+      console.log("date.isValid()", date.isValid());
+      if (date.isValid()) {
+        setSelectedDate(date.toDate());
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const setSelectedDate = (newDate: Date) => {
+    router.replace(
+      {
+        query: {
+          ...router.query,
+          date: dayjs(newDate).tz(timeZone, true).format("YYYY-MM-DDZZ"),
+        },
+      },
+      undefined,
+      { shallow: true }
+    );
+    _setSelectedDate(newDate);
+  };
+
+  return { selectedDate, setSelectedDate };
+};
+
+const AvailabilityPage = ({ profile, eventType }: Props) => {
+  const router = useRouter();
+  const isEmbed = useIsEmbed();
   const { rescheduleUid } = router.query;
-  const { isReady, Theme } = useTheme(profile.theme);
+  const { Theme } = useTheme(profile.theme);
   const { t } = useLocale();
   const { contracts } = useContracts();
+  const availabilityDatePickerEmbedStyles = useEmbedStyles("availabilityDatePicker");
+  const shouldAlignCentrallyInEmbed = useEmbedNonStylesConfig("align") !== "left";
+  const shouldAlignCentrally = !isEmbed || shouldAlignCentrallyInEmbed;
+  const isBackgroundTransparent = useIsBackgroundTransparent();
 
+  const [timeZone, setTimeZone] = useState<string>();
+  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
+
+  useEffect(() => {
+    setIsAvailableTimesVisible(!!router.query.date);
+  }, [router.query.date]);
+
+  // 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, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
-  const selectedDate = useMemo(() => {
-    const dateString = asStringOrNull(router.query.date);
-    if (dateString) {
-      // todo some extra validation maybe.
-      const utcOffsetAsDate = dayjs(dateString.substr(11, 14), "Hmm");
-      const utcOffset = parseInt(
-        dateString.substr(10, 1) + (utcOffsetAsDate.hour() * 60 + utcOffsetAsDate.minute())
-      );
-      const date = dayjs(dateString.substr(0, 10)).utcOffset(utcOffset, true);
-      return date.isValid() ? date : null;
-    }
-    return null;
-  }, [router.query.date]);
-
-  const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
-
   useEffect(() => {
-    handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true");
-
-    telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()));
+    if (top !== window) {
+      //page_view will be collected automatically by _middleware.ts
+      telemetry.event(
+        telemetryEventTypes.embedView,
+        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
+      );
+    }
   }, [telemetry]);
 
-  const changeDate = (newDate: Dayjs) => {
-    router.replace(
-      {
-        query: {
-          ...router.query,
-          date: newDate.format("YYYY-MM-DDZZ"),
-        },
-      },
-      undefined,
-      {
-        shallow: true,
-      }
-    );
-  };
+  // Recurring event sidebar requires more space
+  const maxWidth = isAvailableTimesVisible
+    ? recurringEventCount
+      ? "max-w-6xl"
+      : "max-w-5xl"
+    : recurringEventCount
+    ? "max-w-4xl"
+    : "max-w-3xl";
 
-  const handleSelectTimeZone = (selectedTimeZone: string): void => {
-    if (selectedDate) {
-      changeDate(selectedDate.tz(selectedTimeZone, true));
-    }
-    timeZone(selectedTimeZone);
-    setIsTimeOptionsOpen(false);
-  };
-
-  const handleToggle24hClock = (is24hClock: boolean) => {
-    setTimeFormat(is24hClock ? "HH:mm" : "h:mma");
-  };
+  const timezoneDropdown = (
+    <TimezoneDropdown onChangeTimeFormat={setTimeFormat} onChangeTimeZone={setTimeZone} />
+  );
 
   return (
     <>
@@ -121,43 +376,97 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
       <div>
         <main
-          className={
-            "transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24 " +
-            (selectedDate ? "max-w-5xl" : "max-w-3xl")
-          }>
-          {isReady && (
-            <div className="rounded-sm border-gray-200 bg-white dark:bg-gray-900 sm:dark:border-gray-600 md:border">
-              {/* mobile: details */}
-              <div className="block p-4 sm:p-8 md:hidden">
-                <div className="flex items-center">
-                  <AvatarGroup
-                    border="border-2 dark:border-gray-900 border-white"
-                    items={
-                      [
-                        { image: profile.image, alt: profile.name, title: profile.name },
-                        ...eventType.users
-                          .filter((user) => user.name !== profile.name)
-                          .map((user) => ({
-                            title: user.name,
-                            image: `${process.env.NEXT_PUBLIC_APP_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="ltr:ml-3 rtl:mr-3">
-                    <p className="text-sm font-medium text-black dark:text-gray-300">{profile.name}</p>
-                    <div className="flex gap-2 text-xs font-medium text-gray-600">
+          className={classNames(
+            shouldAlignCentrally ? "mx-auto" : "",
+            isEmbed
+              ? classNames(maxWidth)
+              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
+          )}>
+          <div
+            style={availabilityDatePickerEmbedStyles}
+            className={classNames(
+              isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
+              "border-bookinglightest rounded-md md:border",
+              isEmbed ? "mx-auto" : maxWidth
+            )}>
+            {/* mobile: details */}
+            <div className="block p-4 sm:p-8 md:hidden">
+              <div>
+                <AvatarGroup
+                  border="border-2 dark:border-gray-800 border-white"
+                  items={
+                    [
+                      { 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="mt-2 gap-2 dark:text-gray-100">
+                    <h1 className="text-bookingdark mb-4 break-words text-xl font-semibold dark:text-white">
                       {eventType.title}
-                      <div>
-                        <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                    </h1>
+                    <div className="flex flex-col space-y-4">
+                      {eventType?.description && (
+                        <p className="text-gray-600 dark:text-white">
+                          <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          {eventType.description}
+                        </p>
+                      )}
+                      {eventType?.requiresConfirmation && (
+                        <p className="text-gray-600 dark:text-white">
+                          <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          {t("requires_confirmation")}
+                        </p>
+                      )}
+                      {eventType.locations.length === 1 && (
+                        <p className="text-gray-600 dark:text-white">
+                          {Object.values(AppStoreLocationType).includes(
+                            eventType.locations[0].type as unknown as AppStoreLocationType
+                          ) ? (
+                            <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")}
-                      </div>
+                      </p>
                       {eventType.price > 0 && (
-                        <div>
-                          <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                        <div className="text-gray-600 dark:text-white">
+                          <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -167,46 +476,165 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
                           </IntlProvider>
                         </div>
                       )}
+                      {!rescheduleUid && eventType.recurringEvent && (
+                        <div className="text-gray-600 dark:text-white">
+                          <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <div className="ml-[27px]">
+                            <p className="mb-1 -ml-2 inline px-2 py-1">
+                              {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                            </p>
+                            <input
+                              type="number"
+                              min="1"
+                              max={eventType.recurringEvent.count}
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              defaultValue={eventType.recurringEvent.count}
+                              onChange={(event) => {
+                                setRecurringEventCount(parseInt(event?.target.value));
+                              }}
+                            />
+                            <p className="inline text-gray-600 dark:text-white">
+                              {t("occurrence", {
+                                count: recurringEventCount,
+                              })}
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                      {timezoneDropdown}
+
+                      <div className="md:hidden">
+                        {/* Temp disabled booking?.startTime && rescheduleUid && (
+                            <div>
+                              <p
+                                className="mt-8 text-gray-600 dark:text-white"
+                                data-testid="former_time_p_mobile">
+                                {t("former_time")}
+                              </p>
+                              <p className="text-gray-500 line-through dark:text-white">
+                                <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                                {typeof booking.startTime === "string" &&
+                                  parseDate(dayjs(booking.startTime), i18n)}
+                              </p>
+                            </div>
+                          )*/}
+                      </div>
                     </div>
                   </div>
                 </div>
-                <p className="mt-3 text-gray-600 dark:text-gray-200">{eventType.description}</p>
               </div>
+            </div>
 
-              <div className="px-4 sm:flex sm:p-4 sm:py-5">
-                <div
-                  className={
-                    "hidden pr-8 sm:border-r sm:dark:border-gray-800 md:flex md:flex-col " +
-                    (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
-                  }>
-                  <AvatarGroup
-                    border="border-2 dark:border-gray-900 border-white"
-                    items={
-                      [
-                        { 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: `${process.env.NEXT_PUBLIC_APP_URL}/${user.username}/avatar.png`,
-                          })),
-                      ].filter((item) => !!item.image) as { image: string; alt?: string; title?: string }[]
-                    }
-                    size={10}
-                    truncateAfter={3}
-                  />
-                  <h2 className="mt-3 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
-                  <h1 className="font-cal mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
-                    {eventType.title}
-                  </h1>
-                  <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
-                    <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+            <div className="px-4 sm:flex sm:p-4 sm:py-5">
+              <div
+                className={
+                  "hidden overflow-hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
+                  (isAvailableTimesVisible ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
+                }>
+                <AvatarGroup
+                  border="border-2 dark:border-gray-800 border-white"
+                  items={
+                    [
+                      { 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">
+                  {profile.name}
+                </h2>
+                <h1 className="font-cal mb-4 break-words text-xl font-semibold text-gray-900 dark:text-white">
+                  {eventType.title}
+                </h1>
+                <div className="flex flex-col space-y-4">
+                  {eventType?.description && (
+                    <div className="flex text-gray-600 dark:text-white">
+                      <div>
+                        <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      </div>
+                      <p>{eventType.description}</p>
+                    </div>
+                  )}
+                  {eventType?.requiresConfirmation && (
+                    <div className="flex text-gray-600 dark:text-white">
+                      <div>
+                        <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      </div>
+                      {t("requires_confirmation")}
+                    </div>
+                  )}
+                  {eventType.locations.length === 1 && (
+                    <p className="text-gray-600 dark:text-white">
+                      {Object.values(AppStoreLocationType).includes(
+                        eventType.locations[0].type as unknown as AppStoreLocationType
+                      ) ? (
+                        <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      ) : (
+                        <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      )}
+
+                      {locationKeyToString(eventType.locations[0], t)}
+                    </p>
+                  )}
+                  {eventType.locations.length > 1 && (
+                    <div className="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">
+                      <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                      <div className="ml-[27px]">
+                        <p className="mb-1 -ml-2 inline px-2 py-1">
+                          {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
+                        </p>
+                        <input
+                          type="number"
+                          min="1"
+                          max={eventType.recurringEvent.count}
+                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          defaultValue={eventType.recurringEvent.count}
+                          onChange={(event) => {
+                            setRecurringEventCount(parseInt(event?.target.value));
+                          }}
+                        />
+                        <p className="inline text-gray-600 dark:text-white">
+                          {t("occurrence", {
+                            count: recurringEventCount,
+                          })}
+                        </p>
+                      </div>
+                    </div>
+                  )}
                   {eventType.price > 0 && (
-                    <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
-                      <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                    <p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
+                      <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={eventType.price / 100.0}
@@ -216,79 +644,72 @@ const AvailabilityPage = ({ profile, eventType, workingHours, previousPage }: Pr
                       </IntlProvider>
                     </p>
                   )}
+                  {timezoneDropdown}
+                </div>
 
-                  <TimezoneDropdown />
+                <GoBackToPreviousPage slug={profile.slug || ""} />
 
-                  <p className="mt-3 mb-8 text-gray-600 dark:text-gray-200">{eventType.description}</p>
-                  {previousPage === `${BASE_URL}/${profile.slug}` && (
-                    <div className="flex h-full flex-col justify-end">
-                      <ArrowLeftIcon
-                        className="h-4 w-4 text-black  transition-opacity hover:cursor-pointer dark:text-white"
-                        onClick={() => router.back()}
-                      />
-                      <p className="sr-only">Go Back</p>
+                {/* Temporarily disabled - booking?.startTime && rescheduleUid && (
+                    <div>
+                      <p
+                        className="mt-4 mb-3 text-gray-600 dark:text-white"
+                        data-testid="former_time_p_desktop">
+                        {t("former_time")}
+                      </p>
+                      <p className="text-gray-500 line-through dark:text-white">
+                        <CalendarIcon className="mr-[10px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                      </p>
                     </div>
-                  )}
-                </div>
-                <DatePicker
-                  date={selectedDate}
-                  periodType={eventType?.periodType}
-                  periodStartDate={eventType?.periodStartDate}
-                  periodEndDate={eventType?.periodEndDate}
-                  periodDays={eventType?.periodDays}
-                  periodCountCalendarDays={eventType?.periodCountCalendarDays}
-                  onDatePicked={changeDate}
-                  workingHours={workingHours}
-                  weekStart={profile.weekStart || "Sunday"}
-                  eventLength={eventType.length}
-                  minimumBookingNotice={eventType.minimumBookingNotice}
-                />
-
-                <div className="mt-4 ml-1 block sm:hidden">
-                  <TimezoneDropdown />
-                </div>
-
-                {selectedDate && (
-                  <AvailableTimes
-                    timeFormat={timeFormat}
-                    minimumBookingNotice={eventType.minimumBookingNotice}
-                    eventTypeId={eventType.id}
-                    slotInterval={eventType.slotInterval}
-                    eventLength={eventType.length}
-                    date={selectedDate}
-                    users={eventType.users}
-                    schedulingType={eventType.schedulingType ?? null}
-                    beforeBufferTime={eventType.beforeEventBuffer}
-                    afterBufferTime={eventType.afterEventBuffer}
-                  />
-                )}
+                  )*/}
               </div>
+              <SlotPicker
+                weekStart={
+                  typeof profile.weekStart === "string"
+                    ? (["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
+                        profile.weekStart
+                      ) as 0 | 1 | 2 | 3 | 4 | 5 | 6)
+                    : profile.weekStart /* Allows providing weekStart as number */
+                }
+                eventType={eventType}
+                timezoneDropdown={timezoneDropdown}
+                timeZone={timeZone}
+                timeFormat={timeFormat}
+                seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                recurringEventCount={recurringEventCount}
+              />
             </div>
-          )}
-          {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && <PoweredByCal />}
+          </div>
+          {(!eventType.users[0] || !isBrandingHidden(eventType.users[0])) && !isEmbed && <PoweredByCal />}
         </main>
       </div>
     </>
   );
+};
 
-  function TimezoneDropdown() {
-    return (
-      <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
-        <Collapsible.Trigger className="min-w-32 mb-1 -ml-2 px-2 py-1 text-left text-gray-500">
-          <GlobeIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
-          {timeZone()}
-          {isTimeOptionsOpen ? (
-            <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
-          ) : (
-            <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4" />
-          )}
-        </Collapsible.Trigger>
-        <Collapsible.Content>
-          <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
-        </Collapsible.Content>
-      </Collapsible.Root>
-    );
-  }
+const DayContainer = (props: React.ComponentProps<typeof Day> & { eventTypeId: number }) => {
+  const { eventTypeId, ...rest } = props;
+  /** :
+   * Fetch each individual day here. All these are batched with tRPC anyways.
+   **/
+  const { slots } = useSlots({
+    eventTypeId,
+    startTime: dayjs(props.date).startOf("day").toDate(),
+    endTime: dayjs(props.date).endOf("day").toDate(),
+  });
+  const includedDates = Object.keys(slots).filter((k) => slots[k].length > 0);
+  const disabled = includedDates.length > 0 ? !includedDates.includes(yyyymmdd(props.date)) : props.disabled;
+  return <Day {...{ ...rest, disabled }} />;
+};
+
+const AvailableTimesContainer = (props: React.ComponentProps<typeof AvailableTimes>) => {
+  const { date, eventTypeId } = props;
+  const { slots } = useSlots({
+    eventTypeId,
+    startTime: dayjs(date).startOf("day").toDate(),
+    endTime: dayjs(date).endOf("day").toDate(),
+  });
+  return <AvailableTimes {...props} slots={slots[date.format("YYYY-MM-DD")]} />;
 };
 
 export default AvailabilityPage;

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

@@ -1,4 +1,14 @@
-import { CalendarIcon, ClockIcon, CreditCardIcon, ExclamationIcon } from "@heroicons/react/solid";
+import {
+  CalendarIcon,
+  ClockIcon,
+  CreditCardIcon,
+  ExclamationCircleIcon,
+  ExclamationIcon,
+  InformationCircleIcon,
+  ClipboardCheckIcon,
+  RefreshIcon,
+} from "@heroicons/react/solid";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType } from "@prisma/client";
 import { useContracts } from "contexts/contractsContext";
 import dayjs from "dayjs";
@@ -6,39 +16,64 @@ import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
 import { useMutation } from "react-query";
 import { v4 as uuidv4 } from "uuid";
+import { z } from "zod";
 
+import {
+  useEmbedNonStylesConfig,
+  useIsBackgroundTransparent,
+  useIsEmbed,
+} from "@calcom/embed-core/embed-iframe";
+import classNames from "@calcom/lib/classNames";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
+import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { createPaymentLink } from "@calcom/stripe/client";
+import { Button } from "@calcom/ui/Button";
+import { Tooltip } from "@calcom/ui/Tooltip";
+import { EmailInput, Form } from "@calcom/ui/form/fields";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import { ensureArray } from "@lib/ensureArray";
-import { useLocale } from "@lib/hooks/useLocale";
 import useTheme from "@lib/hooks/useTheme";
-import { LocationType } from "@lib/location";
+import { LocationObject, LocationType } from "@lib/location";
 import createBooking from "@lib/mutations/bookings/create-booking";
-import { parseZone } from "@lib/parseZone";
+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 { detectBrowserTimeFormat } from "@lib/timeFormat";
 
 import CustomBranding from "@components/CustomBranding";
-import { EmailInput, Form } from "@components/form/fields";
 import AvatarGroup from "@components/ui/AvatarGroup";
-import { Button } from "@components/ui/Button";
+import type PhoneInputType from "@components/ui/form/PhoneInput";
 
 import { BookPageProps } from "../../../pages/[user]/book";
+import { HashLinkPageProps } from "../../../pages/d/[link]/book";
 import { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
-/** These are like 40kb that not every user needs */
-const PhoneInput = dynamic(() => import("@components/ui/form/PhoneInput"));
+declare global {
+  // eslint-disable-next-line no-var
+  var web3: {
+    currentProvider: {
+      selectedAddress: string;
+    };
+  };
+}
 
-type BookingPageProps = BookPageProps | TeamBookingPageProps;
+/** 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;
@@ -47,35 +82,63 @@ type BookingFormValues = {
   locationType?: LocationType;
   guests?: string[];
   phone?: string;
+  hostPhoneNumber?: string; // Maybe come up with a better way to name this to distingish between two types of phone numbers
   customInputs?: {
-    [key: string]: string;
+    [key: string]: string | boolean;
   };
+  rescheduleReason?: string;
 };
 
-const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
+const BookingPage = ({
+  eventType,
+  booking,
+  profile,
+  isDynamicGroupBooking,
+  recurringEventCount,
+  locationLabels,
+  hasHashedBookingLink,
+  hashedLink,
+}: BookingPageProps) => {
   const { t, i18n } = useLocale();
+  const isEmbed = useIsEmbed();
+  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();
+
+  useEffect(() => {
+    if (top !== window) {
+      //page_view will be collected automatically by _middleware.ts
+      telemetry.event(
+        telemetryEventTypes.embedView,
+        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     if (eventType.metadata.smartContractAddress) {
       const eventOwner = eventType.users[0];
 
       if (!contracts[(eventType.metadata.smartContractAddress || null) as number])
-        /* @ts-ignore */
         router.replace(`/${eventOwner.username}`);
     }
-  }, [contracts, eventType.metadata.smartContractAddress, router]);
+  }, [contracts, eventType.metadata.smartContractAddress, eventType.users, router]);
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
-      const { attendees, paymentUid } = responseData;
+      const { id, attendees, paymentUid } = responseData;
       if (paymentUid) {
         return await router.push(
           createPaymentLink({
             paymentUid,
             date,
             name: attendees[0].name,
+            email: attendees[0].email,
             absolute: false,
           })
         );
@@ -96,11 +159,47 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
         query: {
           date,
           type: eventType.id,
+          eventSlug: eventType.slug,
           user: profile.slug,
           reschedule: !!rescheduleUid,
           name: attendees[0].name,
           email: attendees[0].email,
           location,
+          eventName: profile.eventName || "",
+          bookingId: id,
+          isSuccessBookingPage: true,
+        },
+      });
+    },
+  });
+
+  const recurringMutation = useMutation(createRecurringBooking, {
+    onSuccess: async (responseData = []) => {
+      const { attendees = [], id, recurringEventId } = responseData[0] || {};
+      const location = (function humanReadableLocation(location) {
+        if (!location) {
+          return;
+        }
+        if (location.includes("integration")) {
+          return t("web_conferencing_details_to_follow");
+        }
+        return location;
+      })(responseData[0].location);
+
+      return router.push({
+        pathname: "/success",
+        query: {
+          date,
+          type: eventType.id,
+          eventSlug: eventType.slug,
+          recur: recurringEventId,
+          user: profile.slug,
+          reschedule: !!rescheduleUid,
+          name: attendees[0].name,
+          email: attendees[0].email,
+          location,
+          eventName: profile.eventName || "",
+          bookingId: id,
         },
       });
     },
@@ -114,10 +213,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
 
   const eventTypeDetail = { isWeb3Active: false, ...eventType };
 
-  type Location = { type: LocationType; address?: string };
   // it would be nice if Prisma at some point in the future allowed for Json<Location>; as of now this is not the case.
-  const locations: Location[] = useMemo(
-    () => (eventType.locations as Location[]) || [],
+  const locations: LocationObject[] = useMemo(
+    () => (eventType.locations as LocationObject[]) || [],
     [eventType.locations]
   );
 
@@ -127,27 +225,17 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
     }
   }, [router.query.guest]);
 
-  const telemetry = useTelemetry();
-
   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)
+    : [];
 
-  // TODO: Move to translations
-  const locationLabels = {
-    [LocationType.InPerson]: t("in_person_meeting"),
-    [LocationType.Phone]: t("phone_call"),
-    [LocationType.GoogleMeet]: "Google Meet",
-    [LocationType.Zoom]: "Zoom Video",
-    [LocationType.Jitsi]: "Jitsi Meet",
-    [LocationType.Daily]: "Daily.co Video",
-    [LocationType.Huddle01]: "Huddle01 Video",
-    [LocationType.Tandem]: "Tandem Video",
-  };
-  const loggedInIsOwner = eventType.users[0].name === session?.user.name;
   const defaultValues = () => {
     if (!rescheduleUid) {
       return {
-        name: loggedInIsOwner ? "" : session?.user?.name || (router.query.name as string) || "",
-        email: loggedInIsOwner ? "" : session?.user?.email || (router.query.email as string) || "",
+        name: (router.query.name as string) || (!loggedInIsOwner && session?.user?.name) || "",
+        email: (router.query.email as string) || (!loggedInIsOwner && session?.user?.email) || "",
         notes: (router.query.notes as string) || "",
         guests: ensureArray(router.query.guest) as string[],
         customInputs: eventType.customInputs.reduce(
@@ -166,15 +254,36 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
     if (!primaryAttendee) {
       return {};
     }
+
+    const customInputType = booking.customInputs;
     return {
       name: primaryAttendee.name || "",
       email: primaryAttendee.email || "",
-      guests: booking.attendees.slice(1).map((attendee) => attendee.email),
+      guests: guestListEmails,
+      notes: booking.description || "",
+      rescheduleReason: "",
+      customInputs: eventType.customInputs.reduce(
+        (customInputs, input) => ({
+          ...customInputs,
+          [input.id]: booking.customInputs
+            ? booking.customInputs[input.label as keyof typeof customInputType]
+            : "",
+        }),
+        {}
+      ),
     };
   };
 
+  const bookingFormSchema = z
+    .object({
+      name: z.string().min(1),
+      email: z.string().email(),
+    })
+    .passthrough();
+
   const bookingForm = useForm<BookingFormValues>({
     defaultValues: defaultValues(),
+    resolver: zodResolver(bookingFormSchema), // Since this isn't set to strict we only validate the fields in the schema
   });
 
   const selectedLocation = useWatch({
@@ -190,7 +299,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
     })(),
   });
 
-  const getLocationValue = (booking: Pick<BookingFormValues, "locationType" | "phone">) => {
+  const getLocationValue = (
+    booking: Pick<BookingFormValues, "locationType" | "phone" | "hostPhoneNumber">
+  ) => {
     const { locationType } = booking;
     switch (locationType) {
       case LocationType.Phone: {
@@ -199,25 +310,37 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
       case LocationType.InPerson: {
         return locationInfo(locationType)?.address || "";
       }
+      case LocationType.Link: {
+        return locationInfo(locationType)?.link || "";
+      }
+      case LocationType.UserPhone: {
+        return locationInfo(locationType)?.hostPhoneNumber || "";
+      }
       // Catches all other location types, such as Google Meet, Zoom etc.
       default:
         return selectedLocation || "";
     }
   };
 
-  const parseDate = (date: string | null) => {
-    if (!date) return "No date";
-    const parsedZone = parseZone(date);
-    if (!parsedZone?.isValid()) return "Invalid date";
-    const formattedTime = parsedZone?.format(detectBrowserTimeFormat);
-    return formattedTime + ", " + dayjs(date).toDate().toLocaleString(i18n.language, { dateStyle: "full" });
-  };
+  // Calculate the booking date(s)
+  let recurringStrings: string[] = [],
+    recurringDates: Date[] = [];
+  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
+    [recurringStrings, recurringDates] = parseRecurringDates(
+      {
+        startDate: date,
+        recurringEvent: eventType.recurringEvent,
+        recurringCount: parseInt(recurringEventCount.toString()),
+      },
+      i18n
+    );
+  }
 
   const bookEvent = (booking: BookingFormValues) => {
-    telemetry.withJitsu((jitsu) =>
-      jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())
+    telemetry.event(
+      top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
+      { isTeamBooking: document.URL.includes("team/") }
     );
-
     // "metadata" is a reserved key to allow for connecting external users without relying on the email address.
     // <...url>&metadata[user_id]=123 will be send as a custom input field as the hidden type.
 
@@ -232,36 +355,75 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
         {}
       );
 
-    let web3Details;
+    let web3Details: Record<"userWallet" | "userSignature", string> | undefined;
     if (eventTypeDetail.metadata.smartContractAddress) {
       web3Details = {
-        // @ts-ignore
         userWallet: window.web3.currentProvider.selectedAddress,
         userSignature: contracts[(eventTypeDetail.metadata.smartContractAddress || null) as number],
       };
     }
 
-    mutation.mutate({
-      ...booking,
-      web3Details,
-      start: dayjs(date).format(),
-      end: dayjs(date).add(eventType.length, "minute").format(),
-      eventTypeId: eventType.id,
-      timeZone: timeZone(),
-      language: i18n.language,
-      rescheduleUid,
-      user: router.query.user,
-      location: getLocationValue(
-        booking.locationType ? booking : { ...booking, locationType: selectedLocation }
-      ),
-      metadata,
-      customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-        label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
-        value: booking.customInputs![inputId],
-      })),
-    });
+    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,
+        eventTypeSlug: eventType.slug,
+        recurringEventId,
+        // Added to track down the number of actual occurrences selected by the user
+        recurringCount: recurringDates.length,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      }));
+      recurringMutation.mutate(recurringBookings);
+    } else {
+      mutation.mutate({
+        ...booking,
+        web3Details,
+        start: dayjs(date).format(),
+        end: dayjs(date).add(eventType.length, "minute").format(),
+        eventTypeId: eventType.id,
+        eventTypeSlug: eventType.slug,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        bookingUid: router.query.bookingUid as string,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))?.label || "",
+          value: booking.customInputs && inputId in booking.customInputs ? booking.customInputs[inputId] : "",
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      });
+    }
   };
 
+  const disableInput = !!rescheduleUid;
+  const disabledExceptForOwner = disableInput && !loggedInIsOwner;
+  const inputClassName =
+    "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
+
   return (
     <div>
       <Theme />
@@ -281,13 +443,24 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
-      <main className="mx-auto my-0 max-w-3xl rounded-sm sm:my-24 sm:border sm:dark:border-gray-600">
+      <main
+        className={classNames(
+          shouldAlignCentrally ? "mx-auto" : "",
+          isEmbed ? "" : "sm:my-24",
+          "my-0 max-w-3xl "
+        )}>
         {isReady && (
-          <div className="overflow-hidden border border-gray-200 bg-white dark:border-0 dark:bg-neutral-900 sm:rounded-sm">
+          <div
+            className={classNames(
+              "main overflow-hidden",
+              isEmbed ? "" : "border border-gray-200",
+              isBackgroundTransparent ? "" : "dark:border-1 bg-white dark:bg-gray-800",
+              "rounded-md dark:border-gray-600 sm:border"
+            )}>
             <div className="px-4 py-5 sm:flex sm:p-4">
-              <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-800">
+              <div className="sm:w-1/2 sm:border-r sm:dark:border-gray-700">
                 <AvatarGroup
-                  border="border-2 border-white dark:border-gray-900"
+                  border="border-2 border-white dark:border-gray-800"
                   size={14}
                   items={[{ image: profile.image || "", alt: profile.name || "" }].concat(
                     eventType.users
@@ -298,17 +471,46 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                       }))
                   )}
                 />
-                <h2 className="font-cal mt-2 font-medium text-gray-500 dark:text-gray-300">{profile.name}</h2>
-                <h1 className="mb-4 text-3xl font-semibold text-gray-800 dark:text-white">
+                <h2 className="font-cal text-bookinglight mt-2 font-medium dark:text-gray-300">
+                  {profile.name}
+                </h2>
+                <h1 className="text-bookingdark mb-4 text-xl font-semibold dark:text-white">
                   {eventType.title}
                 </h1>
-                <p className="mb-2 text-gray-500">
-                  <ClockIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                {!!eventType.seatsPerTimeSlot && (
+                  <p
+                    className={`${
+                      booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                        ? "text-rose-600"
+                        : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                        ? "text-yellow-500"
+                        : "text-emerald-400"
+                    } mb-2`}>
+                    {booking
+                      ? eventType.seatsPerTimeSlot - booking.attendees.length
+                      : eventType.seatsPerTimeSlot}{" "}
+                    / {eventType.seatsPerTimeSlot} {t("seats_available")}
+                  </p>
+                )}
+                {eventType?.description && (
+                  <p className="text-bookinglight mb-2 dark:text-white">
+                    <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    {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="mb-1 -ml-2 px-2 py-1 text-gray-500">
-                    <CreditCardIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                  <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}
@@ -318,18 +520,58 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                     </IntlProvider>
                   </p>
                 )}
-                <p className="mb-4 text-green-500">
-                  <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
-                  {parseDate(date)}
-                </p>
+                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                  <div className="mb-3 text-gray-600 dark:text-white">
+                    <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                    <p className="mb-1 -ml-2 inline px-2 py-1">
+                      {getEveryFreqFor({
+                        t,
+                        recurringEvent: eventType.recurringEvent,
+                        recurringCount: recurringEventCount,
+                      })}
+                    </p>
+                  </div>
+                )}
+                <div className="text-bookinghighlight mb-4 flex">
+                  <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                  <div className="-mt-1">
+                    {(rescheduleUid || !eventType.recurringEvent?.freq) &&
+                      parseDate(dayjs(date).tz(timeZone()), i18n)}
+                    {!rescheduleUid &&
+                      eventType.recurringEvent?.freq &&
+                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                    {!rescheduleUid && eventType.recurringEvent?.freq && recurringStrings.length > 5 && (
+                      <div className="flex">
+                        <Tooltip
+                          content={recurringStrings.slice(5).map((aDate, key) => (
+                            <p key={key}>{aDate}</p>
+                          ))}>
+                          <p className="text-gray-600 dark:text-white">
+                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
+                </div>
                 {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
-                  <p className="mb-1 -ml-2 px-2 py-1 text-gray-500">
+                  <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
                     {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
                   </p>
                 )}
-                <p className="mb-8 text-gray-600 dark:text-white">{eventType.description}</p>
+                {booking?.startTime && rescheduleUid && (
+                  <div>
+                    <p className="mt-8 mb-2 text-gray-600 dark:text-white" data-testid="former_time_p">
+                      {t("former_time")}
+                    </p>
+                    <p className="text-gray-500 line-through dark:text-white">
+                      <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
+                    </p>
+                  </div>
+                )}
               </div>
-              <div className="sm:w-1/2 sm:pl-8 sm:pr-4">
+              <div className="mt-8 sm:w-1/2 sm:pl-8 sm:pr-4">
                 <Form form={bookingForm} handleSubmit={bookEvent}>
                   <div className="mb-4">
                     <label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-white">
@@ -337,13 +579,14 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                     </label>
                     <div className="mt-1">
                       <input
-                        {...bookingForm.register("name")}
+                        {...bookingForm.register("name", { required: true })}
                         type="text"
                         name="name"
                         id="name"
                         required
-                        className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                        className={inputClassName}
                         placeholder={t("example_name")}
+                        disabled={disableInput}
                       />
                     </div>
                   </div>
@@ -357,9 +600,22 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                       <EmailInput
                         {...bookingForm.register("email")}
                         required
-                        className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                        className={classNames(
+                          inputClassName,
+                          bookingForm.formState.errors.email
+                            ? "border-red-700 focus:ring-red-700"
+                            : " border-gray-300  dark:border-gray-900"
+                        )}
                         placeholder="you@example.com"
+                        type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
+                        disabled={disableInput}
                       />
+                      {bookingForm.formState.errors.email && (
+                        <div className="mt-2 flex items-center text-sm text-red-700 ">
+                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                          <p>{t("email_validation_error")}</p>
+                        </div>
+                      )}
                     </div>
                   </div>
                   {locations.length > 1 && (
@@ -391,13 +647,13 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                         {t("phone_number")}
                       </label>
                       <div className="mt-1">
-                        <PhoneInput
-                          // @ts-expect-error
+                        <PhoneInput<BookingFormValues>
                           control={bookingForm.control}
                           name="phone"
                           placeholder={t("enter_phone_number")}
                           id="phone"
                           required
+                          disabled={disableInput}
                         />
                       </div>
                     </div>
@@ -420,8 +676,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                             })}
                             id={"custom_" + input.id}
                             rows={3}
-                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                            className={inputClassName}
                             placeholder={input.placeholder}
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.TEXT && (
@@ -431,8 +688,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                            className={inputClassName}
                             placeholder={input.placeholder}
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.NUMBER && (
@@ -442,8 +700,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                               required: input.required,
                             })}
                             id={"custom_" + input.id}
-                            className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
+                            className={inputClassName}
                             placeholder=""
+                            disabled={disabledExceptForOwner}
                           />
                         )}
                         {input.type === EventTypeCustomInputType.BOOL && (
@@ -454,8 +713,9 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                                 required: input.required,
                               })}
                               id={"custom_" + input.id}
-                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black ltr:mr-2 rtl:ml-2"
+                              className="h-4 w-4 rounded border-gray-300 text-black focus:ring-black disabled:bg-gray-200 ltr:mr-2 rtl:ml-2 disabled:dark:text-gray-500"
                               placeholder=""
+                              disabled={disabledExceptForOwner}
                             />
                             <label
                               htmlFor={"custom_" + input.id}
@@ -484,32 +744,49 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                             className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
                             {t("guests")}
                           </label>
-                          <Controller
-                            control={bookingForm.control}
-                            name="guests"
-                            render={({ field: { onChange, value } }) => (
-                              <ReactMultiEmail
-                                className="relative"
-                                placeholder="guest@example.com"
-                                emails={value}
-                                onChange={onChange}
-                                getLabel={(
-                                  email: string,
-                                  index: number,
-                                  removeEmail: (index: number) => void
-                                ) => {
-                                  return (
-                                    <div data-tag key={index}>
-                                      {email}
-                                      <span data-tag-handle onClick={() => removeEmail(index)}>
-                                        ×
-                                      </span>
-                                    </div>
-                                  );
-                                }}
-                              />
-                            )}
-                          />
+                          {!disableInput && (
+                            <Controller
+                              control={bookingForm.control}
+                              name="guests"
+                              render={({ field: { onChange, value } }) => (
+                                <ReactMultiEmail
+                                  className="relative"
+                                  placeholder="guest@example.com"
+                                  emails={value}
+                                  onChange={onChange}
+                                  getLabel={(
+                                    email: string,
+                                    index: number,
+                                    removeEmail: (index: number) => void
+                                  ) => {
+                                    return (
+                                      <div data-tag key={index} className="cursor-pointer">
+                                        {email}
+                                        {!disableInput && (
+                                          <span data-tag-handle onClick={() => removeEmail(index)}>
+                                            ×
+                                          </span>
+                                        )}
+                                      </div>
+                                    );
+                                  }}
+                                />
+                              )}
+                            />
+                          )}
+                          {/* Custom code when guest emails should not be editable */}
+                          {disableInput && guestListEmails && guestListEmails.length > 0 && (
+                            <div data-tag className="react-multi-email">
+                              {/* // @TODO: user owners are appearing as guest here when should be only user input */}
+                              {guestListEmails.map((email, index) => {
+                                return (
+                                  <div key={index} className="cursor-pointer">
+                                    <span data-tag>{email}</span>
+                                  </div>
+                                );
+                              })}
+                            </div>
+                          )}
                         </div>
                       )}
                     </div>
@@ -518,18 +795,36 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                     <label
                       htmlFor="notes"
                       className="mb-1 block text-sm font-medium text-gray-700 dark:text-white">
-                      {t("additional_notes")}
+                      {rescheduleUid ? t("reschedule_optional") : t("additional_notes")}
                     </label>
-                    <textarea
-                      {...bookingForm.register("notes")}
-                      id="notes"
-                      rows={3}
-                      className="focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white dark:selection:bg-green-500 sm:text-sm"
-                      placeholder={t("share_additional_notes")}
-                    />
+                    {rescheduleUid ? (
+                      <textarea
+                        {...bookingForm.register("rescheduleReason")}
+                        id="rescheduleReason"
+                        name="rescheduleReason"
+                        rows={3}
+                        className={inputClassName}
+                        placeholder={t("reschedule_placeholder")}
+                        disabled={disabledExceptForOwner}
+                      />
+                    ) : (
+                      <textarea
+                        {...bookingForm.register("notes")}
+                        id="notes"
+                        name="notes"
+                        rows={3}
+                        className={inputClassName}
+                        placeholder={t("share_additional_notes")}
+                        disabled={disabledExceptForOwner}
+                      />
+                    )}
                   </div>
+
                   <div className="flex items-start space-x-2 rtl:space-x-reverse">
-                    <Button type="submit" loading={mutation.isLoading}>
+                    <Button
+                      type="submit"
+                      data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
+                      loading={mutation.isLoading || recurringMutation.isLoading}>
                       {rescheduleUid ? t("reschedule") : t("confirm")}
                     </Button>
                     <Button color="secondary" type="button" onClick={() => router.back()}>
@@ -537,21 +832,8 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
                     </Button>
                   </div>
                 </Form>
-                {mutation.isError && (
-                  <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" />
-                      </div>
-                      <div className="ltr:ml-3 rtl:mr-3">
-                        <p className="text-sm text-yellow-700">
-                          {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
+                {(mutation.isError || recurringMutation.isError) && (
+                  <ErrorMessage error={mutation.error || recurringMutation.error} />
                 )}
               </div>
             </div>
@@ -563,3 +845,24 @@ const BookingPage = ({ eventType, booking, profile }: BookingPageProps) => {
 };
 
 export default BookingPage;
+
+function ErrorMessage({ error }: { error: unknown }) {
+  const { t } = useLocale();
+  const { query: { rescheduleUid } = {} } = useRouter();
+
+  return (
+    <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" />
+        </div>
+        <div className="ltr:ml-3 rtl:mr-3">
+          <p className="text-sm text-yellow-700">
+            {rescheduleUid ? t("reschedule_fail") : t("booking_fail")}{" "}
+            {error instanceof HttpError || error instanceof Error ? error.message : "Unknown error"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/dialog/ConfirmationDialogContent.tsx

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

apps/web/components/dialog/DeleteStripeDialogContent.tsx

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

apps/web/components/dialog/EditLocationDialog.tsx

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

apps/web/components/dialog/RescheduleDialog.tsx

@@ -0,0 +1,97 @@
+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";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import Button from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { TextArea } from "@calcom/ui/form/fields";
+
+import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
+import { trpc } from "@lib/trpc";
+
+interface IRescheduleDialog {
+  isOpenDialog: boolean;
+  setIsOpenDialog: Dispatch<SetStateAction<boolean>>;
+  bookingUId: string;
+}
+
+export const RescheduleDialog = (props: IRescheduleDialog) => {
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+  const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
+  const [rescheduleReason, setRescheduleReason] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const rescheduleApi = useMutation(
+    async () => {
+      setIsLoading(true);
+      try {
+        const result = await fetchWrapper.post<
+          { bookingId: string; rescheduleReason: string },
+          RescheduleResponse
+        >("/api/book/request-reschedule", {
+          bookingId,
+          rescheduleReason,
+        });
+
+        if (result) {
+          showToast(t("reschedule_request_sent"), "success");
+          setIsOpenDialog(false);
+        }
+      } catch (error) {
+        showToast(t("unexpected_error_try_again"), "error");
+        // @TODO: notify sentry
+      }
+      setIsLoading(false);
+    },
+    {
+      async onSettled() {
+        await utils.invalidateQueries(["viewer.bookings"]);
+      },
+    }
+  );
+
+  return (
+    <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
+      <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"></ClockIcon>
+          </div>
+          <div className="pt-1">
+            <DialogHeader title={t("send_reschedule_request")} />
+
+            <p className="-mt-8 text-sm text-gray-500">{t("reschedule_modal_description")}</p>
+            <p className="mt-6 mb-2 text-sm font-bold text-black">
+              {t("reason_for_reschedule_request")}
+              <span className="font-normal text-gray-500"> (Optional)</span>
+            </p>
+            <TextArea
+              data-testid="reschedule_reason"
+              name={t("reschedule_reason")}
+              value={rescheduleReason}
+              onChange={(e) => setRescheduleReason(e.target.value)}
+              className="mb-5 sm:mb-6"
+            />
+
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button color="secondary">{t("cancel")}</Button>
+              </DialogClose>
+              <Button
+                data-testid="send_request"
+                disabled={isLoading}
+                onClick={() => {
+                  rescheduleApi.mutate();
+                }}>
+                {t("send_reschedule_request")}
+              </Button>
+            </DialogFooter>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};

apps/web/components/eventtype/CreateEventType.tsx

@@ -2,34 +2,34 @@ import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
 import { useRouter } from "next/router";
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import type { z } from "zod";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
 import { createEventTypeInput } from "@calcom/prisma/zod/custom/eventtype";
-
-import { HttpError } from "@lib/core/http/error";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-import { slugify } from "@lib/slugify";
-import { trpc } from "@lib/trpc";
-
-import { Dialog, DialogClose, DialogContent } from "@components/Dialog";
-import { Form, InputLeading, TextAreaField, TextField } from "@components/form/fields";
-import { Alert } from "@components/ui/Alert";
-import Avatar from "@components/ui/Avatar";
-import { Button } from "@components/ui/Button";
+import { Alert } from "@calcom/ui/Alert";
+import { Button } from "@calcom/ui/Button";
+import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
 import Dropdown, {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@components/ui/Dropdown";
+} from "@calcom/ui/Dropdown";
+import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
+
+import { HttpError } from "@lib/core/http/error";
+import { slugify } from "@lib/slugify";
+import { trpc } from "@lib/trpc";
+
+import Avatar from "@components/ui/Avatar";
 import * as RadioArea from "@components/ui/form/radio-area";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
-interface EventTypeParent {
+export interface EventTypeParent {
   teamId: number | null | undefined; // if undefined, then it's a profile
   name?: string | null;
   slug?: string | null;
@@ -56,13 +56,33 @@ export default function CreateEventTypeButton(props: Props) {
       : undefined;
   const pageSlug = router.query.eventPage || props.options[0].slug;
   const hasTeams = !!props.options.find((option) => option.teamId);
+  const type: string = typeof router.query.type == "string" && router.query.type ? router.query.type : "";
 
   const form = useForm<z.infer<typeof createEventTypeInput>>({
     resolver: zodResolver(createEventTypeInput),
-    defaultValues: { length: 15 },
   });
   const { setValue, watch, register } = form;
 
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    const title: string =
+      typeof router.query.title === "string" && router.query.title ? router.query.title : "";
+    const length: number =
+      typeof router.query.length === "string" && router.query.length ? parseInt(router.query.length) : 15;
+    const description: string =
+      typeof router.query.description === "string" && router.query.description
+        ? router.query.description
+        : "";
+    const slug: string = typeof router.query.slug === "string" && router.query.slug ? router.query.slug : "";
+
+    setValue("title", title);
+    setValue("length", length);
+    setValue("description", description);
+    setValue("slug", slug);
+    // If query params change, update the form
+  }, [router.isReady, router.query, setValue]);
+
   useEffect(() => {
     const subscription = watch((value, { name, type }) => {
       if (name === "title" && type === "change") {
@@ -75,7 +95,7 @@ export default function CreateEventTypeButton(props: Props) {
 
   const createMutation = trpc.useMutation("viewer.eventTypes.create", {
     onSuccess: async ({ eventType }) => {
-      await router.push("/event-types/" + eventType.id);
+      await router.replace("/event-types/" + eventType.id);
       showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success");
     },
     onError: (err) => {
@@ -84,6 +104,11 @@ export default function CreateEventTypeButton(props: Props) {
         showToast(message, "error");
       }
 
+      if (err.data?.code === "BAD_REQUEST") {
+        const message = `${err.data.code}: URL already exists.`;
+        showToast(message, "error");
+      }
+
       if (err.data?.code === "UNAUTHORIZED") {
         const message = `${err.data.code}: You are not able to create this event`;
         showToast(message, "error");
@@ -113,7 +138,9 @@ export default function CreateEventTypeButton(props: Props) {
   };
 
   return (
-    <Dialog name="new-eventtype" clearQueryParamsOnClose={["eventPage", "teamId"]}>
+    <Dialog
+      name="new-eventtype"
+      clearQueryParamsOnClose={["eventPage", "teamId", "type", "description", "title", "length", "slug"]}>
       {!hasTeams || props.isIndividualTeam ? (
         <Button
           onClick={() => openModal(props.options[0])}
@@ -178,7 +205,7 @@ export default function CreateEventTypeButton(props: Props) {
               required
               addOnLeading={
                 <InputLeading>
-                  {process.env.NEXT_PUBLIC_APP_URL}/{pageSlug}/
+                  {process.env.NEXT_PUBLIC_WEBSITE_URL}/{pageSlug}/
                 </InputLeading>
               }
               {...register("slug")}
@@ -196,7 +223,6 @@ export default function CreateEventTypeButton(props: Props) {
                 required
                 min="10"
                 placeholder="15"
-                defaultValue={15}
                 label={t("length")}
                 className="pr-20"
                 {...register("length", { valueAsNumber: true })}
@@ -222,11 +248,17 @@ export default function CreateEventTypeButton(props: Props) {
                   {...register("schedulingType")}
                   onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}
                   className="relative mt-1 flex space-x-6 rounded-sm shadow-sm rtl:space-x-reverse">
-                  <RadioArea.Item value={SchedulingType.COLLECTIVE} className="w-1/2 text-sm">
+                  <RadioArea.Item
+                    value={SchedulingType.COLLECTIVE}
+                    defaultChecked={type === SchedulingType.COLLECTIVE}
+                    className="w-1/2 text-sm">
                     <strong className="mb-1 block">{t("collective")}</strong>
                     <p>{t("collective_description")}</p>
                   </RadioArea.Item>
-                  <RadioArea.Item value={SchedulingType.ROUND_ROBIN} className="w-1/2 text-sm">
+                  <RadioArea.Item
+                    value={SchedulingType.ROUND_ROBIN}
+                    defaultChecked={type === SchedulingType.ROUND_ROBIN}
+                    className="w-1/2 text-sm">
                     <strong className="mb-1 block">{t("round_robin")}</strong>
                     <p>{t("round_robin_description")}</p>
                   </RadioArea.Item>

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -1,21 +1,23 @@
-import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
-import { SchedulingType } from "@prisma/client";
-import { Prisma } from "@prisma/client";
-import React from "react";
+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";
 
+import { parseRecurringEvent } from "@calcom/lib";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { baseEventTypeSelect } from "@calcom/prisma/selects";
+
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
 
 const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
-  select: {
-    id: true,
-    length: true,
-    price: true,
-    currency: true,
-    schedulingType: true,
-    description: true,
-  },
+  select: baseEventTypeSelect,
 });
 
 type EventType = Prisma.EventTypeGetPayload<typeof eventTypeData>;
@@ -28,6 +30,11 @@ export type EventTypeDescriptionProps = {
 export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
   const { t } = useLocale();
 
+  const recurringEvent = useMemo(
+    () => parseRecurringEvent(eventType.recurringEvent),
+    [eventType.recurringEvent]
+  );
+
   return (
     <>
       <div className={classNames("text-neutral-500 dark:text-white", className)}>
@@ -37,26 +44,34 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
-          <li className="flex whitespace-nowrap">
-            <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
+          <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
             {eventType.length}m
           </li>
           {eventType.schedulingType ? (
-            <li className="flex whitespace-nowrap">
-              <UsersIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="flex whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
+          {recurringEvent?.count && recurringEvent.count > 0 && (
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {t("repeats_up_to", {
+                count: recurringEvent.count,
+              })}
+            </li>
+          )}
           {eventType.price > 0 && (
-            <li className="flex whitespace-nowrap">
-              <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}
@@ -66,6 +81,12 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
               </IntlProvider>
             </li>
           )}
+          {eventType.requiresConfirmation && (
+            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
+              <ClipboardCheckIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {t("requires_confirmation")}
+            </li>
+          )}
         </ul>
       </div>
     </>

apps/web/components/eventtype/RecurringEventController.tsx

@@ -0,0 +1,141 @@
+import type { FormValues } from "pages/event-types/[type]";
+import { useState } from "react";
+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 { Alert } from "@calcom/ui/Alert";
+
+import Select from "@components/ui/form/Select";
+
+type RecurringEventControllerProps = {
+  recurringEvent: RecurringEvent | null;
+  formMethods: UseFormReturn<FormValues>;
+  paymentEnabled: boolean;
+  onRecurringEventDefined: (value: boolean) => void;
+};
+
+export default function RecurringEventController({
+  recurringEvent,
+  formMethods,
+  paymentEnabled,
+  onRecurringEventDefined,
+}: RecurringEventControllerProps) {
+  const { t } = useLocale();
+  const [recurringEventState, setRecurringEventState] = useState<RecurringEvent | null>(recurringEvent);
+
+  /* Just yearly-0, monthly-1 and weekly-2 */
+  const recurringEventFreqOptions = Object.entries(Frequency)
+    .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
+    .map(([key, value]) => ({
+      label: t(`${key.toString().toLowerCase()}`, { count: recurringEventState?.interval }),
+      value: value.toString(),
+    }));
+
+  return (
+    <div className="block items-start sm:flex">
+      <div className="min-w-48 mb-4 sm:mb-0">
+        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
+      </div>
+      <div className={!paymentEnabled ? "w-full" : ""}>
+        {paymentEnabled ? (
+          <Alert severity="warning" title={t("warning_payment_recurring_event")} />
+        ) : (
+          <>
+            <div className="relative flex items-start">
+              <div className="flex h-5 items-center">
+                <input
+                  onChange={(event) => {
+                    onRecurringEventDefined(event?.target.checked);
+                    if (!event?.target.checked) {
+                      formMethods.setValue("recurringEvent", null);
+                      setRecurringEventState(null);
+                    } else {
+                      const newVal = recurringEvent || {
+                        interval: 1,
+                        count: 12,
+                        freq: Frequency.WEEKLY,
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }
+                  }}
+                  type="checkbox"
+                  className="text-primary-600  h-4 w-4 rounded border-gray-300"
+                  defaultChecked={recurringEventState !== null}
+                  data-testid="recurring-event-check"
+                  id="recurringEvent"
+                />
+              </div>
+              <div className="text-sm ltr:ml-3 rtl:mr-3">
+                <label htmlFor="recurringEvent" className="text-neutral-900">
+                  {t("recurring_event_description")}
+                </label>
+              </div>
+            </div>
+            {recurringEventState && (
+              <div data-testid="recurring-event-collapsible" className="mt-4 text-sm">
+                <div className="flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEventState.interval}
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        interval: parseInt(event?.target.value),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                  <Select
+                    options={recurringEventFreqOptions}
+                    value={recurringEventFreqOptions[recurringEventState.freq]}
+                    isSearchable={false}
+                    className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        freq: parseInt(event?.value || `${Frequency.WEEKLY}`),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                </div>
+                <div className="mt-4 flex items-center">
+                  <p className="mr-2 text-neutral-900">{t("max")}</p>
+                  <input
+                    type="number"
+                    min="1"
+                    max="20"
+                    className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    defaultValue={recurringEventState.count}
+                    onChange={(event) => {
+                      const newVal = {
+                        ...recurringEventState,
+                        count: parseInt(event?.target.value),
+                      };
+                      formMethods.setValue("recurringEvent", newVal);
+                      setRecurringEventState(newVal);
+                    }}
+                  />
+                  <p className="mr-2 text-neutral-900">
+                    {t("occurrence", {
+                      count: recurringEventState.count,
+                    })}
+                  </p>
+                </div>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -0,0 +1,63 @@
+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";
+
+function SkeletonLoader() {
+  return (
+    <SkeletonContainer>
+      <div className="mb-4 flex items-center">
+        <SkeletonAvatar width="8" height="8"></SkeletonAvatar>
+        <div className="space-y-1">
+          <SkeletonText height="4" width="16"></SkeletonText>
+          <SkeletonText height="4" width="24"></SkeletonText>
+        </div>
+      </div>
+      <ul className="divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
+        <SkeletonItem />
+        <SkeletonItem />
+        <SkeletonItem />
+      </ul>
+    </SkeletonContainer>
+  );
+}
+
+export default SkeletonLoader;
+
+function SkeletonItem() {
+  return (
+    <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>
+          <SkeletonText width="32" height="5"></SkeletonText>
+        </div>
+        <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"></ClockIcon>
+              <SkeletonText width="12" height="4"></SkeletonText>
+            </li>
+            <li className="flex items-center whitespace-nowrap">
+              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200"></UserIcon>
+              <SkeletonText width="16" height="4"></SkeletonText>
+            </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/integrations/CalendarListContainer.tsx

@@ -1,26 +1,29 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { useMutation } from "react-query";
 
+import { InstallAppButton } from "@calcom/app-store/components";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { Alert } from "@calcom/ui/Alert";
+import Button from "@calcom/ui/Button";
 import Switch from "@calcom/ui/Switch";
 
 import { QueryCell } from "@lib/QueryCell";
-import { useLocale } from "@lib/hooks/useLocale";
-import showToast from "@lib/notification";
-import { trpc } from "@lib/trpc";
+import { inferQueryOutput, trpc } from "@lib/trpc";
 
+import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
 import { List } from "@components/List";
 import { ShellSubHeading } from "@components/Shell";
-import { Alert } from "@components/ui/Alert";
-import Button from "@components/ui/Button";
+import SkeletonLoader from "@components/apps/SkeletonLoader";
 
-import ConnectIntegration from "./ConnectIntegrations";
 import DisconnectIntegration from "./DisconnectIntegration";
 import IntegrationListItem from "./IntegrationListItem";
 import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
 
 type Props = {
   onChanged: () => unknown | Promise<unknown>;
+  fromOnboarding?: boolean;
 };
 
 function CalendarSwitch(props: {
@@ -92,10 +95,44 @@ function CalendarSwitch(props: {
   );
 }
 
+function CalendarList(props: Props) {
+  const { t } = useLocale();
+  const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]);
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => (
+        <List>
+          {data.items.map((item) => (
+            <IntegrationListItem
+              key={item.title}
+              title={item.title}
+              imageSrc={item.imageSrc}
+              description={item.description}
+              actions={
+                <InstallAppButton
+                  type={item.type}
+                  render={(buttonProps) => (
+                    <Button color="secondary" {...buttonProps}>
+                      {t("connect")}
+                    </Button>
+                  )}
+                  onChanged={() => props.onChanged()}
+                />
+              }
+            />
+          ))}
+        </List>
+      )}
+    />
+  );
+}
+
 function ConnectedCalendarsList(props: Props) {
   const { t } = useLocale();
   const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true });
-
+  const { fromOnboarding } = props;
   return (
     <QueryCell
       query={query}
@@ -110,7 +147,8 @@ function ConnectedCalendarsList(props: Props) {
               <Fragment key={item.credentialId}>
                 {item.calendars ? (
                   <IntegrationListItem
-                    {...item.integration}
+                    title={item.integration.title}
+                    imageSrc={item.integration.imageSrc}
                     description={item.primary?.externalId || "No external Id"}
                     actions={
                       <DisconnectIntegration
@@ -123,22 +161,27 @@ function ConnectedCalendarsList(props: Props) {
                         onOpenChange={props.onChanged}
                       />
                     }>
-                    <ul className="space-y-2 p-4">
-                      {item.calendars.map((cal) => (
-                        <CalendarSwitch
-                          key={cal.externalId}
-                          externalId={cal.externalId as string}
-                          title={cal.name as string}
-                          type={item.integration.type}
-                          defaultSelected={cal.isSelected}
-                        />
-                      ))}
-                    </ul>
+                    {!fromOnboarding && (
+                      <>
+                        <p className="px-4 pt-4 text-sm text-neutral-500">{t("toggle_calendars_conflict")}</p>
+                        <ul className="space-y-2 p-4">
+                          {item.calendars.map((cal) => (
+                            <CalendarSwitch
+                              key={cal.externalId}
+                              externalId={cal.externalId}
+                              title={cal.name || "Nameless calendar"}
+                              type={item.integration.type}
+                              defaultSelected={cal.isSelected}
+                            />
+                          ))}
+                        </ul>
+                      </>
+                    )}
                   </IntegrationListItem>
                 ) : (
                   <Alert
                     severity="warning"
-                    title="Something went wrong"
+                    title={t("calendar_error")}
                     message={item.error?.message}
                     actions={
                       <DisconnectIntegration
@@ -162,80 +205,82 @@ function ConnectedCalendarsList(props: Props) {
   );
 }
 
-function CalendarList(props: Props) {
+export function CalendarListContainer(props: {
+  heading?: boolean;
+  items?: inferQueryOutput<"viewer.integrations">["items"];
+  fromOnboarding?: boolean;
+}) {
   const { t } = useLocale();
-  const query = trpc.useQuery(["viewer.integrations"]);
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => (
-        <List>
-          {data.calendar.items.map((item) => (
-            <IntegrationListItem
-              key={item.title}
-              {...item}
-              actions={
-                <ConnectIntegration
-                  type={item.type}
-                  render={(btnProps) => (
-                    <Button color="secondary" {...btnProps} data-testid="integration-connection-button">
-                      {t("connect")}
-                    </Button>
-                  )}
-                  onOpenChange={() => props.onChanged()}
-                />
-              }
-            />
-          ))}
-        </List>
-      )}
-    />
-  );
-}
-export function CalendarListContainer(props: { heading?: false }) {
-  const { t } = useLocale();
-  const { heading = true } = props;
+  const { heading = true, fromOnboarding } = props;
   const utils = trpc.useContext();
   const onChanged = () =>
     Promise.allSettled([
-      utils.invalidateQueries(["viewer.integrations"]),
+      utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], {
+        exact: true,
+      }),
       utils.invalidateQueries(["viewer.connectedCalendars"]),
     ]);
   const query = trpc.useQuery(["viewer.connectedCalendars"]);
+  const installedCalendars = trpc.useQuery([
+    "viewer.integrations",
+    { variant: "calendar", onlyInstalled: true },
+  ]);
   const mutation = trpc.useMutation("viewer.setDestinationCalendar");
-
   return (
-    <>
-      {heading && (
-        <ShellSubHeading
-          className="mt-10 mb-0"
-          title={
-            <SubHeadingTitleWithConnections
-              title="Calendars"
-              numConnections={query.data?.connectedCalendars.length}
-            />
-          }
-          subtitle={t("configure_how_your_event_types_interact")}
-          actions={
-            <div className="sm:min-w-80 block max-w-full">
-              <DestinationCalendarSelector
-                onChange={mutation.mutate}
-                isLoading={mutation.isLoading}
-                value={query.data?.destinationCalendar?.externalId}
-              />
-            </div>
-          }
-        />
-      )}
-      <ConnectedCalendarsList onChanged={onChanged} />
-      {!!query.data?.connectedCalendars.length && (
-        <ShellSubHeading
-          className="mt-6"
-          title={<SubHeadingTitleWithConnections title={t("connect_an_additional_calendar")} />}
-        />
-      )}
-      <CalendarList onChanged={onChanged} />
-    </>
+    <QueryCell
+      query={query}
+      customLoader={<SkeletonLoader className="mt-10" />}
+      success={({ data }) => {
+        return (
+          <>
+            {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && (
+              <>
+                {heading && (
+                  <ShellSubHeading
+                    className="mt-10 mb-0"
+                    title={
+                      <SubHeadingTitleWithConnections
+                        title="Calendars"
+                        numConnections={data.connectedCalendars.length}
+                      />
+                    }
+                    subtitle={t("configure_how_your_event_types_interact")}
+                    actions={
+                      <div className="flex flex-col xl:flex-row xl:space-x-5">
+                        <div className="sm:min-w-80 block max-w-full">
+                          <DestinationCalendarSelector
+                            onChange={mutation.mutate}
+                            isLoading={mutation.isLoading}
+                            value={data.destinationCalendar?.externalId}
+                          />
+                        </div>
+
+                        {!!data.connectedCalendars.length && (
+                          <div className="sm:min-w-80 inline max-w-full">
+                            <AdditionalCalendarSelector isLoading={mutation.isLoading} />
+                          </div>
+                        )}
+                      </div>
+                    }
+                  />
+                )}
+                <ConnectedCalendarsList onChanged={onChanged} fromOnboarding={fromOnboarding} />
+              </>
+            )}
+            {fromOnboarding && (
+              <>
+                {!!query.data?.connectedCalendars.length && (
+                  <ShellSubHeading
+                    className="mt-4"
+                    title={<SubHeadingTitleWithConnections title={t("connect_additional_calendar")} />}
+                  />
+                )}
+                <CalendarList onChanged={onChanged} />
+              </>
+            )}
+          </>
+        );
+      }}
+    />
   );
 }

apps/web/components/integrations/ConnectIntegrations.tsx

@@ -1,64 +0,0 @@
-import type { IntegrationOAuthCallbackState } from "pages/api/integrations/types";
-import { useState } from "react";
-import { useMutation } from "react-query";
-
-import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants";
-import { AddAppleIntegrationModal } from "@lib/integrations/calendar/components/AddAppleIntegration";
-import { AddCalDavIntegrationModal } from "@lib/integrations/calendar/components/AddCalDavIntegration";
-
-import { ButtonBaseProps } from "@components/ui/Button";
-
-export default function ConnectIntegration(props: {
-  type: string;
-  render: (renderProps: ButtonBaseProps) => JSX.Element;
-  onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
-}) {
-  const { type } = props;
-  const [isLoading, setIsLoading] = useState(false);
-
-  const mutation = useMutation(async () => {
-    const state: IntegrationOAuthCallbackState = {
-      returnTo: NEXT_PUBLIC_BASE_URL + location.pathname + location.search,
-    };
-    const stateStr = encodeURIComponent(JSON.stringify(state));
-    const searchParams = `?state=${stateStr}`;
-    const res = await fetch("/api/integrations/" + type.replace("_", "") + "/add" + searchParams);
-    if (!res.ok) {
-      throw new Error("Something went wrong");
-    }
-    const json = await res.json();
-    window.location.href = json.url;
-    setIsLoading(true);
-  });
-  const [isModalOpen, _setIsModalOpen] = useState(false);
-
-  const setIsModalOpen = (v: boolean) => {
-    _setIsModalOpen(v);
-    props.onOpenChange(v);
-  };
-
-  return (
-    <>
-      {props.render({
-        onClick() {
-          if (["caldav_calendar", "apple_calendar"].includes(type)) {
-            // special handlers
-            setIsModalOpen(true);
-            return;
-          }
-
-          mutation.mutate();
-        },
-        loading: mutation.isLoading || isLoading,
-        disabled: isModalOpen,
-      })}
-      {type === "caldav_calendar" && (
-        <AddCalDavIntegrationModal open={isModalOpen} onOpenChange={setIsModalOpen} />
-      )}
-
-      {type === "apple_calendar" && (
-        <AddAppleIntegrationModal open={isModalOpen} onOpenChange={setIsModalOpen} />
-      )}
-    </>
-  );
-}

apps/web/components/integrations/DisconnectIntegration.tsx

@@ -1,9 +1,14 @@
 import { useState } from "react";
 import { useMutation } from "react-query";
 
-import { Dialog } from "@components/Dialog";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { ButtonBaseProps } from "@calcom/ui/Button";
+import { Dialog } from "@calcom/ui/Dialog";
+
+import { trpc } from "@lib/trpc";
+
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
-import { ButtonBaseProps } from "@components/ui/Button";
 
 export default function DisconnectIntegration(props: {
   /** Integration credential id */
@@ -11,41 +16,35 @@ export default function DisconnectIntegration(props: {
   render: (renderProps: ButtonBaseProps) => JSX.Element;
   onOpenChange: (isOpen: boolean) => unknown | Promise<unknown>;
 }) {
+  const { id } = props;
+  const { t } = useLocale();
   const [modalOpen, setModalOpen] = useState(false);
-  const mutation = useMutation(
-    async () => {
-      const res = await fetch("/api/integrations", {
-        method: "DELETE",
-        body: JSON.stringify({ id: props.id }),
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-      if (!res.ok) {
-        throw new Error("Something went wrong");
-      }
+
+  const mutation = trpc.useMutation("viewer.deleteCredential", {
+    onSettled: async () => {
+      await props.onOpenChange(modalOpen);
     },
-    {
-      async onSettled() {
-        await props.onOpenChange(modalOpen);
-      },
-      onSuccess() {
-        setModalOpen(false);
-      },
-    }
-  );
+    onSuccess: () => {
+      showToast("Integration deleted successfully", "success");
+      setModalOpen(false);
+    },
+    onError: () => {
+      throw new Error("Something went wrong");
+    },
+  });
+
   return (
     <>
       <Dialog open={modalOpen} onOpenChange={setModalOpen}>
         <ConfirmationDialogContent
           variety="danger"
-          title="Disconnect Integration"
-          confirmBtnText="Yes, disconnect integration"
+          title={t("remove_app")}
+          confirmBtnText={t("yes_remove_app")}
           cancelBtnText="Cancel"
           onConfirm={() => {
-            mutation.mutate();
+            mutation.mutate({ id });
           }}>
-          Are you sure you want to disconnect this integration?
+          {t("are_you_sure_you_want_to_remove_this_app")}
         </ConfirmationDialogContent>
       </Dialog>
       {props.render({

apps/web/components/integrations/DisconnectStripeIntegration.tsx

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

apps/web/components/integrations/IntegrationListItem.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { ReactNode } from "react";
 
 import classNames from "@lib/classNames";
@@ -6,7 +5,7 @@ import classNames from "@lib/classNames";
 import { ListItem, ListItemText, ListItemTitle } from "@components/List";
 
 function IntegrationListItem(props: {
-  imageSrc: string;
+  imageSrc?: string;
   title: string;
   description: string;
   actions?: ReactNode;
@@ -15,7 +14,10 @@ function IntegrationListItem(props: {
   return (
     <ListItem expanded={!!props.children} className={classNames("flex-col")}>
       <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
+        {
+          // eslint-disable-next-line @next/next/no-img-element
+          props.imageSrc && <img className="h-10 w-10" src={props.imageSrc} alt={props.title} />
+        }
         <div className="flex-grow truncate pl-2">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>