v2.7.7

* feat: optimize tips component

* fix: use dynamic rendering

* fix: remove unnecessary memo

* fix: prefetch warning

* fix: use reverse list

.env.appStore.example

@@ -15,16 +15,22 @@
 #   - LARK
 #   - WEB3
 #   - SALESFORCE
+#   - ZOHOCRM
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
 #   - DAILY.CO VIDEO
+# Enables Cal Video. to get your key 
+# 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
+# 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
+# @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials
+
 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
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
 GOOGLE_API_CREDENTIALS=
 
 # To enable Login with Google you need to:
@@ -109,4 +115,10 @@ INFURA_API_KEY=""
 # Used for the Salesforce (Sales Cloud) app
 SALESFORCE_CONSUMER_KEY=""
 SALESFORCE_CONSUMER_SECRET=""
+
+#   - ZOHOCRM
+# Used for the Zoho CRM integration
+ZOHOCRM_CLIENT_ID=""
+ZOHOCRM_CLIENT_SECRET=""
+
 # *********************************************************************************************************

.env.example

@@ -22,6 +22,13 @@ CALCOM_LICENSE_KEY=
 
 # - DATABASE ************************************************************************************************
 DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+
+# Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
+# Cold boots will be faster and you'll be able to scale your DB independently of your app.
+# @see https://www.prisma.io/docs/data-platform/data-proxy/use-data-proxy
+# PRISMA_GENERATE_DATAPROXY=true
+PRISMA_GENERATE_DATAPROXY=
+
 # ***********************************************************************************************************
 
 # - SHARED **************************************************************************************************

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+**/**/node_modules
+**/**/.next
+**/**/public
+packages/prisma/zod
+apps/web/public/embed

.github/CODEOWNERS

@@ -30,4 +30,4 @@ packages/features/ee/workflows        @CarinaWolli @calcom/core
 packages/features/tips                @PeerRich @calcom/core
 packages/ui                           @calcom/ui
 packages/config                       @calcom/core
-packages/app-store/ee/routing-forms   @hariombalhara @calcom/core
+packages/app-store/routing-forms   @hariombalhara @calcom/core

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,13 +12,13 @@ Fixes # (issue)
 
 ## Type of change
 
-<!-- Please delete options that are not relevant. -->
+<!-- Please delete bullets that are not relevant. -->
 
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] Chore (refactoring code, technical debt, workflow improvements)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
+- Bug fix (non-breaking change which fixes an issue)
+- Chore (refactoring code, technical debt, workflow improvements)
+- New feature (non-breaking change which adds functionality)
+- Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- This change requires a documentation update
 
 ## How should this be tested?
 

.github/actions/cache-build/action.yml

@@ -3,7 +3,7 @@ description: "Cache or restore if necessary"
 inputs:
   node_version:
     required: false
-    default: v16.x
+    default: v18.x
 runs:
   using: "composite"
   steps:
@@ -20,6 +20,7 @@ runs:
       with:
         path: |
           ${{ github.workspace }}/apps/web/.next
+          ${{ github.workspace }}/apps/web/public/embed
           **/.turbo/**
           **/dist/**
         key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}-${{ env.key-4 }}

.github/actions/yarn-install/action.yml

@@ -1,9 +1,21 @@
-name: Yarn install
-description: "Install all NPM dependencies, caches them and restores if necessary"
+########################################################################################
+# "yarn install" composite action for yarn 2/3/4+ and "nodeLinker: node-modules"       #
+#--------------------------------------------------------------------------------------#
+# Cache:                                                                               #
+#   - Downloaded zip archive (multi-arch, preserved across yarn.lock changes)          #
+#   - Yarn install state (discarded on yarn.lock changes)                              #
+# References:                                                                          #
+#   - bench: https://gist.github.com/belgattitude/0ecd26155b47e7be1be6163ecfbb0f0b     #
+#   - vs @setup/node: https://github.com/actions/setup-node/issues/325                 #
+########################################################################################
+
+name: "Yarn install"
+description: "Run yarn install with node_modules linker and cache enabled"
 inputs:
   node_version:
     required: false
-    default: v16.x
+    default: v18.x
+
 runs:
   using: "composite"
   steps:
@@ -11,9 +23,40 @@ runs:
       uses: actions/setup-node@v3
       with:
         node-version: ${{ inputs.node_version }}
-        cache: "yarn"
-    - name: Yarn install
+    - name: Expose yarn config as "$GITHUB_OUTPUT"
+      id: yarn-config
       shell: bash
       run: |
-        yarn install --prefer-offline --frozen-lockfile
+        echo "CACHE_FOLDER=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
+
+    # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
+    # Yarn cache is also reusable between arch and os.
+    - name: Restore yarn cache
+      uses: actions/cache@v3
+      id: yarn-download-cache
+      with:
+        path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
+        key: yarn-download-cache-${{ hashFiles('yarn.lock') }}
+        restore-keys: |
+          yarn-download-cache-
+
+    # Invalidated on yarn.lock changes
+    - name: Restore yarn install state
+      id: yarn-install-state-cache
+      uses: actions/cache@v3
+      with:
+        path: .yarn/ci-cache/
+        key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}
+
+    - name: Install dependencies
+      shell: bash
+      run: |
+        yarn install --inline-builds
         yarn prisma generate
+      env:
+        # CI optimizations. Overrides yarnrc.yml options (or their defaults) in the CI action.
+        YARN_ENABLE_IMMUTABLE_INSTALLS: "false" # So it doesn't try to remove our private submodule deps
+        YARN_ENABLE_GLOBAL_CACHE: "false" # Use local cache folder to keep downloaded archives
+        YARN_INSTALL_STATE_PATH: .yarn/ci-cache/install-state.gz # Very small speedup when lock does not change
+        # Other environment variables
+        HUSKY: "0" # By default do not run HUSKY install

.github/matchers/tsc-absolute.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+    {
+      "owner": "tsc-absolute",
+      "pattern": [
+        {
+          "regexp": "(?:^|\\s)([^\\s].*)[\\(:](\\d+)[,:](\\d+)(?:\\):\\s+|\\s+-\\s+)(error|warning|info)\\s+(TS\\d+)\\s*:\\s*(.*)$",
+          "file": 1,
+          "line": 2,
+          "column": 3,
+          "severity": 4,
+          "code": 5,
+          "message": 6
+        }
+      ]
+    }
+  ]
+}

.github/workflows/check-types.yml

@@ -10,8 +10,10 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install
-
       - name: Show info
         run: node -e "console.log(require('v8').getHeapStatistics())"
-
-      - run: yarn type-check
+      - name: Configure TSC problem matcher
+        run: |
+          echo "::remove-matcher owner=tsc::"
+          echo "::add-matcher::.github/matchers/tsc-absolute.json"
+      - run: yarn type-check:ci

.github/workflows/cleanup-preview-databases.yml

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

.github/workflows/cron-downgradeUsers.yml

@@ -1,11 +1,12 @@
 name: Cron - downgradeUsers
 
 on:
+  workflow_dispatch:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs “Every month at 1st (see https://crontab.guru)
+    - cron: "0 0 1 * *"
 jobs:
   cron-downgradeUsers:
     env:

.github/workflows/cron-stale-issue.yml

@@ -18,5 +18,3 @@ jobs:
           days-before-stale: 60
           include-only-assigned: true
           days-before-close: -1
-
-

.github/workflows/crowdin.yml

@@ -17,11 +17,14 @@ jobs:
         uses: actions/checkout@v3
 
       - name: crowdin action
-        uses: crowdin/github-action@1.4.9
+        uses: crowdin/github-action@1.5.1
         with:
-          upload_translations: true
+          upload_sources: true
           download_translations: true
-          pull_request_labels: "♻️ autoupdate, automerge"
+          push_translations: true
+          commit_message: "New Crowdin translations by Github Action"
+          localization_branch_name: main
+          create_pull_request: false
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}

.github/workflows/db-preview.yml

@@ -1,37 +0,0 @@
-# .github/workflows/preview.yml
-
-name: Preview Environment
-
-env:
-  SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-  SNAPLET_PROJECT_ID: ${{ secrets.SNAPLET_PROJECT_ID }}
-  VERCEL_ACCESS_TOKEN: ${{ secrets.VERCEL_ACCESS_TOKEN }}
-  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
-
-on:
-  pull_request:
-    types: [opened, synchronize, closed]
-    branches:
-      - main
-
-jobs:
-  db-preview-deploy:
-    if: ${{ github.event.action == 'opened' || github.event.action == 'synchronize' }}
-    runs-on: ubuntu-latest
-    steps:
-      - id: snaplet
-        uses: snaplet/action@v1
-      - uses: snaplet/vercel-action@v1
-        with:
-          env: |
-            DATABASE_URL=${{ steps.snaplet.outputs.database-url }}
-  db-preview-delete:
-    if: ${{ github.event.action == 'closed' }}
-    runs-on: ubuntu-latest
-    steps:
-      - uses: snaplet/action@v1
-        with:
-          delete: true
-      - uses: snaplet/vercel-action@v1
-        with:
-          delete: true

.github/workflows/db-staging-snapshot.yml

@@ -1,18 +0,0 @@
-name: Staging DB Snapshot
-on:
-  schedule:
-    - cron: "0 4 * * 1-5" # At 04:00 on every day-of-week from Monday through Friday.
-  workflow_dispatch:
-jobs:
-  db-staging-snapshot:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - name: Install Snaplet CLI
-        run: curl -sL https://app.snaplet.dev/get-cli/ | bash
-      - name: Restore Snapshot
-        run: snaplet snapshot restore -y
-        env:
-          SNAPLET_DATABASE_URL: ${{ secrets.SNAPLET_DATA_TARGET_DB_URL }}
-          SNAPLET_ACCESS_TOKEN: ${{ secrets.SNAPLET_ACCESS_TOKEN }}
-          SNAPLET_DATABASE_ID: ${{ secrets.SNAPLET_DATABASE_ID }}

.github/workflows/e2e-embed-react.yml

@@ -0,0 +1,36 @@
+name: E2E Embed tests and booking flow(for non-embed as well)
+on:
+  workflow_call:
+
+jobs:
+  e2e-embed:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/yarn-playwright-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-db
+      - uses: ./.github/actions/cache-build
+      - name: Run Tests
+        run: yarn test-e2e:embed-react
+        env:
+          DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+      - name: Upload Test Results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results
+          path: test-results

.github/workflows/e2e-embed.yml

@@ -25,19 +25,12 @@ jobs:
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn turbo run embed-tests-update-snapshots:ci --scope=@calcom/embed-react --concurrency=1
+        run: yarn test-e2e:embed
         env:
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
-      - name: Upload embed-core results
+      - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results-embed-core
-          path: packages/embeds/embed-core/playwright/results
-
-      - name: Upload embed-react results
-        if: ${{ always() }}
-        uses: actions/upload-artifact@v2
-        with:
-          name: test-results-embed-react
-          path: packages/embeds/embed-react/playwright/results
+          name: test-results
+          path: test-results

.github/workflows/env-create-file.yml

@@ -20,7 +20,7 @@ env:
   INPUT_ENV_PAYMENT_FEE_FIXED: 10
   INPUT_ENV_SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
   INPUT_ENV_SAML_ADMINS: pro@example.com
-  INPUT_ENV_NEXTAUTH_URL: http://localhost:3000/api/auth
+  INPUT_ENV_NEXTAUTH_URL: http://127.0.0.1:3000/api/auth
   INPUT_ENV_NEXT_PUBLIC_IS_E2E: 1
   # INPUT_ENV_EMAIL_FROM: e2e@cal.com
   # INPUT_ENV_EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
@@ -39,6 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
       - uses: ozaytsev86/create-env-file@v1
         with:
           file-name: ${{ github.workspace }}/gh.env

.github/workflows/pr.yml

@@ -21,6 +21,7 @@ jobs:
     outputs:
       app-store: ${{ steps.filter.outputs.app-store }}
       embed: ${{ steps.filter.outputs.embed }}
+      embed-react: ${{ steps.filter.outputs.embed-react }}
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
@@ -34,6 +35,9 @@ jobs:
             embed:
               - 'apps/web/**'
               - 'packages/embeds/**'
+            embed-react:
+              - 'apps/web/**'
+              - 'packages/embeds/**'
 
   env:
     name: Create env file
@@ -81,6 +85,13 @@ jobs:
     uses: ./.github/workflows/e2e-embed.yml
     secrets: inherit
 
+  e2e-embed-react:
+    name: E2E React embeds tests
+    if: ${{ needs.changes.outputs.embed-react == 'true' }}
+    needs: [changes, lint, build]
+    uses: ./.github/workflows/e2e-embed-react.yml
+    secrets: inherit
+
   analyze:
     needs: build
     uses: ./.github/workflows/nextjs-bundle-analysis.yml

.gitignore

@@ -87,3 +87,12 @@ apps/api
 apps/website
 apps/console
 apps/auth
+
+# Yarn Modern
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.nvmrc

@@ -1 +1 @@
-v16
+v18

.prettierignore

@@ -14,3 +14,4 @@ public
 .DS_Store
 .eslintignore
 packages/prisma/zod
+apps/web/public/embed

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.4.1.cjs

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Contributions are what make the open source community such an amazing place to l
 
 - 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.
 
-## Priorities 
+## Priorities
 
 <table>
   <tr>
@@ -57,7 +57,6 @@ Contributions are what make the open source community such an amazing place to l
   </tr>
 </table>
 
-
 ## Developing
 
 The development branch is `main`. This is the branch that all pull

README.md

@@ -88,6 +88,7 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 - [React](https://reactjs.org/?ref=cal.com)
 - [Tailwind](https://tailwindcss.com/?ref=cal.com)
 - [Prisma](https://prisma.io/?ref=cal.com)
+- [Daily.co](https://go.cal.com/daily)
 
 ## Stay Up-to-Date
 
@@ -349,18 +350,16 @@ We have a list of [help wanted](https://github.com/calcom/cal.com/issues?q=is:is
     <source media="(prefers-color-scheme: dark)" srcset="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=dark">
     <img alt="Bounties of cal" src="https://console.algora.io/api/og/cal/bounties.png?p=0&status=open&theme=light">
   </picture>
-</a>  
-  
+</a>
 
 <!-- CONTRIBUTORS -->
 
 ### Contributors
-  
+
 <a href="https://github.com/calcom/cal.com/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=calcom/cal.com" />
 </a>
 
- 
 <!-- TRANSLATIONS -->
 
 ### Translations
@@ -433,7 +432,7 @@ following
 
 ### Obtaining Daily API Credentials
 
-1. Open [Daily](https://www.daily.co/) and sign into your account.
+1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information
 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
 3. Copy your API key.
 4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
@@ -452,6 +451,19 @@ following
 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 ZohoCRM Client ID and Secret
+
+1. Open [Zoho API Console](https://api-console.zoho.com/) and sign into your account, or create a new one.
+2. From within the API console page, go to "Applications".
+3. Click "ADD CLIENT" button top right and select "Server-based Applications".
+4. Fill in any information you want in the "Client Details" tab
+5. Go to tab "Client Secret" tab.
+6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs.
+8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers.
+9. Click the "Save"/ "UPDATE" button at the bottom footer.
+10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings.
+
 ## Workflows
 
 ### Setting up SendGrid for Email reminders

apps/docs/.nvmrc

@@ -1 +1 @@
-14.17
+v18

apps/docs/package.json

@@ -11,7 +11,8 @@
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
     "start": "PORT=4000 next start",
-    "type-check": "tsc --pretty --noEmit"
+    "type-check": "tsc --pretty --noEmit",
+    "type-check:ci": "tsc-absolute --pretty --noEmit"
   },
   "author": "Cal.com, Inc.",
   "license": "MIT",
@@ -24,7 +25,6 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@calcom/config": "*",
-    "eslint": "^8.34.0"
+    "@calcom/config": "*"
   }
 }

apps/web/.eslintignore

@@ -1,2 +1,2 @@
 node_modules
-prisma/zod
+public/embed

apps/web/.nvmrc

@@ -1 +1 @@
-v16
+v18

apps/web/.prettierignore

@@ -0,0 +1 @@
+public/embed

apps/web/components/AdditionalCalendarSelector.tsx

@@ -1,86 +0,0 @@
-import React from "react";
-import Select from "react-select";
-import type { OptionProps } from "react-select";
-
-import { InstallAppButton } from "@calcom/app-store/components";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button } from "@calcom/ui";
-
-import { QueryCell } from "@lib/QueryCell";
-
-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.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
-
-  return (
-    <QueryCell
-      query={query}
-      success={({ data }) => {
-        const options = data.items.map((item) => ({
-          label: item.name,
-          slug: item.slug,
-          image: item.logo,
-          type: item.type,
-        }));
-        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 text-sm font-medium text-gray-700"
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export default AdditionalCalendarSelector;

apps/web/components/DestinationCalendarSelector.tsx

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

apps/web/components/Embed.tsx

@@ -1,4 +1,4 @@
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import type { NextRouter } from "next/router";
 import { useRouter } from "next/router";
@@ -22,7 +22,7 @@ import {
   TextField,
   ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
+import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -167,7 +167,7 @@ const Codes: Record<string, Record<string, (...args: any[]) => string>> = {
       const height = getDimension(previewState.inline.height);
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -187,12 +187,12 @@ function MyComponent() {
     }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
       const cal = await getCalApi();
-      Cal("floatingButton", ${floatingButtonArg});
+      cal("floatingButton", ${floatingButtonArg});
       ${uiInstructionCode}
     })();
   }, [])
@@ -201,7 +201,7 @@ function MyComponent() {
     "element-click": ({ calLink, uiInstructionCode }: { calLink: string; uiInstructionCode: string }) => {
       return code`
 import Cal, { getCalApi } from "@calcom/embed-react";
-
+import { useEffect } from "react";
 function MyComponent() {
   useEffect(()=>{
     (async function () {
@@ -313,7 +313,7 @@ const embeds: {
 }[] = [
   {
     title: "Inline Embed",
-    subtitle: "Loads your Cal scheduling page directly inline with your other website content",
+    subtitle: "Loads your event type directly inline with your other website content.",
     type: "inline",
     illustration: (
       <svg
@@ -327,10 +327,10 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
         <rect x="24.5" y="51" width="139" height="163" rx="1.5" fill="#F8F8F8" />
-        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="2" fill="#E1E1E1" />
-        <rect x="48" y="86.5" width="48" height="4" rx="1" fill="#E1E1E1" />
+        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="6" fill="#F3F4F6" />
+        <rect x="48" y="86.5" width="48" height="4" rx="6" fill="#F3F4F6" />
         <rect x="49" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
         <rect x="61" y="99.5" width="6" height="6" rx="1" fill="#3E3E3E" />
         <rect x="73" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
@@ -378,9 +378,9 @@ const embeds: {
         <rect x="85" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
         <rect x="97" y="161.5" width="6" height="6" rx="1" fill="#3E3E3E" />
         <rect x="109" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="24.5" y="51" width="139" height="163" rx="1.5" stroke="#292929" />
-        <rect x="176" y="50.5" width="108" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24.5" y="51" width="139" height="163" rx="6" stroke="#292929" />
+        <rect x="176" y="50.5" width="108" height="164" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
       </svg>
     ),
   },
@@ -400,12 +400,12 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="226" y="223.5" width="66" height="26" rx="2" fill="#292929" />
+        <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="50.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="138.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+        <rect x="156" y="50.5" width="128" height="164" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+        <rect x="226" y="223.5" width="66" height="26" rx="6" fill="#292929" />
         <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
       </svg>
     ),
@@ -426,62 +426,65 @@ const embeds: {
           d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
           fill="white"
         />
-        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
-        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
-        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
-        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" fill="#F8F8F8" />
-        <rect opacity="0.8" x="108" y="85" width="80" height="8" rx="2" fill="#E1E1E1" />
-        <rect x="108" y="97" width="48" height="4" rx="1" fill="#E1E1E1" />
-        <rect x="109" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="110" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="133" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="136" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <path
-          d="M121 135H127V133H121V135ZM128 136V142H130V136H128ZM127 143H121V145H127V143ZM120 142V136H118V142H120ZM121 143C120.448 143 120 142.552 120 142H118C118 143.657 119.343 145 121 145V143ZM128 142C128 142.552 127.552 143 127 143V145C128.657 145 130 143.657 130 142H128ZM127 135C127.552 135 128 135.448 128 136H130C130 134.343 128.657 133 127 133V135ZM121 133C119.343 133 118 134.343 118 136H120C120 135.448 120.448 135 121 135V133Z"
-          fill="#3E3E3E"
-        />
-        <rect x="133" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="169" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="181" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="181" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="181" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="193" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="109" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="121" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="133" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="145" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="157" y="172" width="6" height="6" rx="1" fill="#3E3E3E" />
-        <rect x="169" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
-        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" stroke="#292929" />
+        <rect x="24" y="0.50293" width="260" height="24" rx="6" fill="#F3F4F6" />
+        <rect x="24" y="35" width="259" height="192" rx="5.5" fill="#F9FAFB" />
+        <g filter="url(#filter0_i_3223_14162)">
+          <rect opacity="0.8" x="40" y="99" width="24" height="24" rx="2" fill="#E5E7EB" />
+          <rect x="40" y="127" width="48" height="8" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="139" width="82" height="8" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="151" width="34" height="4" rx="1" fill="#E5E7EB" />
+          <rect x="40" y="159" width="34" height="4" rx="1" fill="#E5E7EB" />
+        </g>
+        <rect x="152" y="48" width="2" height="169" rx="2" fill="#E5E7EB" />
+
+        <rect opacity="0.8" x="176" y="84" width="80" height="8" rx="2" fill="#E5E7EB" />
+        <rect x="176" y="96" width="48" height="4" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="109" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="201" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="109" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="123" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="135" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="187.3" y="133.4" width="9" height="9" rx="1.5" stroke="#0D121D" />
+        <rect x="201" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="237" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="249" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="135" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="147" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="249" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="147" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="159" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="249" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="261" y="159" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="177" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="189" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="201" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="213" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="225" y="171" width="6" height="6" rx="1" fill="#0D121D" />
+        <rect x="237" y="171" width="6" height="6" rx="1" fill="#E5E7EB" />
+        <rect x="24" y="35" width="259" height="192" rx="5.5" stroke="#101010" />
+        <rect x="24" y="241.503" width="260" height="24" rx="6" fill="#F3F4F6" />
       </svg>
     ),
   },
@@ -629,9 +632,9 @@ const ChooseEmbedTypesDialogContent = () => {
   const { t } = useLocale();
   const router = useRouter();
   return (
-    <DialogContent type="creation" size="lg">
-      <div className="mb-4">
-        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+    <DialogContent className="rounded-lg p-10" type="creation" size="lg">
+      <div className="mb-2">
+        <h3 className="mb-2 text-2xl font-bold leading-none text-gray-900" id="modal-title">
           {t("how_you_want_add_cal_site", { appName: APP_NAME })}
         </h3>
         <div>
@@ -641,7 +644,7 @@ const ChooseEmbedTypesDialogContent = () => {
       <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-gray-100 ltr:mr-2 rtl:ml-2"
+            className="hover:border-primary-900 w-1/3 rounded-md border border-gray-200 bg-gray-50 p-6 text-left hover:rounded-md hover:bg-gray-100 ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -649,11 +652,11 @@ const ChooseEmbedTypesDialogContent = () => {
                 embedType: embed.type,
               });
             }}>
-            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
+            <div className="order-none box-border flex-none rounded-md border border-solid bg-white">
               {embed.illustration}
             </div>
-            <div className="mt-2 font-medium text-gray-900">{embed.title}</div>
-            <p className="text-sm text-gray-500">{embed.subtitle}</p>
+            <div className="mt-4 font-semibold leading-none text-gray-900">{embed.title}</div>
+            <p className="mt-2 text-sm text-gray-500">{embed.subtitle}</p>
           </button>
         ))}
       </div>
@@ -669,8 +672,11 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   embedUrl: string;
 }) => {
   const { t } = useLocale();
+
   const router = useRouter();
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
   const s = (href: string) => {
     const searchParams = new URLSearchParams(router.asPath.split("?")[1] || "");
     const [a, b] = href.split("=");
@@ -792,7 +798,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   }
 
   const ThemeOptions = [
-    { value: Theme.auto, label: "Auto Theme" },
+    { value: Theme.auto, label: "Auto" },
     { value: Theme.dark, label: "Dark Theme" },
     { value: Theme.light, label: "Light Theme" },
   ];
@@ -809,11 +815,18 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   ];
 
   return (
-    <DialogContent size="xl" className="p-0.5" type="creation">
+    <DialogContent
+      ref={dialogContentRef}
+      className="rounded-lg p-0.5 sm:max-w-[80rem]"
+      enableOverflow
+      type="creation">
       <div className="flex">
         <div className="flex w-1/3 flex-col bg-gray-50 p-8">
-          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+          <h3
+            className="mb-2.5 flex items-center text-xl font-semibold leading-5 text-gray-900"
+            id="modal-title">
             <button
+              className="h-6 w-6"
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
@@ -821,55 +834,43 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             </button>
             {embed.title}
           </h3>
-          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")} />
-          <div className="flex flex-col overflow-y-auto">
-            <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+          <h4 className="mb-6 text-sm font-normal text-gray-500">{embed.subtitle}</h4>
+          <div className="flex flex-col">
+            <div className={classNames("font-medium", embedType === "element-click" ? "hidden" : "")}>
               <Collapsible
                 open={isEmbedCustomizationOpen}
                 onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger
-                  type="button"
-                  className="flex w-full items-center text-base font-medium text-gray-900">
-                  <div>
-                    {embedType === "inline"
-                      ? "Inline Embed Customization"
-                      : embedType === "floating-popup"
-                      ? "Floating Popup Customization"
-                      : "Element Click Customization"}
-                  </div>
-                  <FiChevronRight
-                    className={`${
-                      isEmbedCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent className="text-sm">
-                  <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                  <div className={classNames(embedType === "inline" ? "block" : "hidden")}>
                     {/*TODO: Add Auto/Fixed toggle from Figma */}
-                    <div className="text-sm">Embed Window Sizing</div>
-                    <div className="justify-left flex items-center">
-                      <TextField
-                        labelProps={{ className: "hidden" }}
-                        required
-                        value={previewState.inline.width}
-                        onChange={(e) => {
-                          setPreviewState((previewState) => {
-                            const width = e.target.value || "100%";
+                    <div className="mb-[9px] text-sm">Window sizing</div>
+                    <div className="justify-left flex items-center !font-normal">
+                      <div className="mr-[9px]">
+                        <TextField
+                          labelProps={{ className: "hidden" }}
+                          className="focus:ring-offset-0"
+                          required
+                          value={previewState.inline.width}
+                          onChange={(e) => {
+                            setPreviewState((previewState) => {
+                              const width = e.target.value || "100%";
+
+                              return {
+                                ...previewState,
+                                inline: {
+                                  ...previewState.inline,
+                                  width,
+                                },
+                              };
+                            });
+                          }}
+                          addOnLeading={<>W</>}
+                        />
+                      </div>
 
-                            return {
-                              ...previewState,
-                              inline: {
-                                ...previewState.inline,
-                                width,
-                              },
-                            };
-                          });
-                        }}
-                        addOnLeading={<>W</>}
-                      />
-                      <span className="p-2">×</span>
                       <TextField
                         labelProps={{ className: "hidden" }}
+                        className="focus:ring-offset-0"
                         value={previewState.inline.height}
                         required
                         onChange={(e) => {
@@ -960,6 +961,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Button Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -979,6 +982,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     <div>Text Color</div>
                     <div className="w-full">
                       <ColorPicker
+                        popoverAlign="start"
+                        container={dialogContentRef?.current ?? undefined}
                         defaultValue="#000000"
                         onChange={(color) => {
                           setPreviewState((previewState) => {
@@ -997,22 +1002,13 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 </CollapsibleContent>
               </Collapsible>
             </div>
-            <hr className="mt-4" />
-            <div className="mt-4 font-medium">
+            <div className="font-medium">
               <Collapsible
                 open={isBookingCustomizationOpen}
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
-                <CollapsibleTrigger className="flex w-full" type="button">
-                  <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
-                  <FiChevronRight
-                    className={`${
-                      isBookingCustomizationOpen ? "rotate-90 transform" : ""
-                    } ml-auto h-5 w-5 text-gray-500`}
-                  />
-                </CollapsibleTrigger>
                 <CollapsibleContent>
                   <div className="mt-6 text-sm">
-                    <div className="mb-4 flex items-center justify-start space-x-2 rtl:space-x-reverse">
+                    <div className="mb-6 flex items-center justify-start space-x-2 rtl:space-x-reverse">
                       <Switch
                         checked={previewState.hideEventTypeDetails}
                         onCheckedChange={(checked) => {
@@ -1026,13 +1022,38 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       />
                       <div className="text-sm">{t("hide_eventtype_details")}</div>
                     </div>
-                    <Label className="">
+                    {[
+                      { name: "brandColor", title: "Brand Color" },
+                      // { name: "lightColor", title: "Light Color" },
+                      // { name: "lighterColor", title: "Lighter Color" },
+                      // { name: "lightestColor", title: "Lightest Color" },
+                      // { name: "highlightColor", title: "Highlight Color" },
+                      // { name: "medianColor", title: "Median Color" },
+                    ].map((palette) => (
+                      <Label key={palette.name} className="mb-6">
+                        <div className="mb-2">{palette.title}</div>
+                        <div className="w-full">
+                          <ColorPicker
+                            popoverAlign="start"
+                            container={dialogContentRef?.current ?? undefined}
+                            defaultValue="#000000"
+                            onChange={(color) => {
+                              addToPalette({
+                                [palette.name as keyof (typeof previewState)["palette"]]: color,
+                              });
+                            }}
+                          />
+                        </div>
+                      </Label>
+                    ))}
+                    <Label>
                       <div className="mb-2">Theme</div>
                       <Select
                         className="w-full"
                         defaultValue={ThemeOptions[0]}
                         components={{
                           Control: ThemeSelectControl,
+                          IndicatorSeparator: () => null,
                         }}
                         onChange={(option) => {
                           if (!option) {
@@ -1048,28 +1069,6 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                         options={ThemeOptions}
                       />
                     </Label>
-                    {[
-                      { name: "brandColor", title: "Brand Color" },
-                      // { name: "lightColor", title: "Light Color" },
-                      // { name: "lighterColor", title: "Lighter Color" },
-                      // { name: "lightestColor", title: "Lightest Color" },
-                      // { name: "highlightColor", title: "Highlight Color" },
-                      // { name: "medianColor", title: "Median Color" },
-                    ].map((palette) => (
-                      <Label key={palette.name} className="pb-4">
-                        <div className="mb-2 pt-2">{palette.title}</div>
-                        <div className="w-full">
-                          <ColorPicker
-                            defaultValue="#000000"
-                            onChange={(color) => {
-                              addToPalette({
-                                [palette.name as keyof (typeof previewState)["palette"]]: color,
-                              });
-                            }}
-                          />
-                        </div>
-                      </Label>
-                    ))}
                   </div>
                 </CollapsibleContent>
               </Collapsible>

apps/web/components/NavTabs.tsx

@@ -1,5 +1,5 @@
 import { AdminRequired } from "components/ui/AdminRequired";
-import noop from "lodash/noop";
+import { noop } from "lodash";
 import type { LinkProps } from "next/link";
 import Link from "next/link";
 import { useRouter } from "next/router";

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,10 +1,14 @@
-import type { OptionProps } from "react-select";
-
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
-import { Button, Select } from "@calcom/ui";
+import {
+  Button,
+  Dropdown,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuItem,
+  DropdownItem,
+} from "@calcom/ui";
 import { FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -13,31 +17,6 @@ interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;
 }
 
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
-  const { t } = useLocale();
-  const { data } = optionProps;
-  return data.slug !== "add-new" ? (
-    <InstallAppButton
-      type={data.type}
-      render={(installProps) => {
-        return (
-          <Button {...installProps} className="flex w-full align-top" color="minimal">
-            {data.image && (
-              <img className="float-left mr-3 inline h-5 w-5" src={data.image} alt={data.label} />
-            )}
-            <p className="text-left">{`${t("add")} ${data.label}`}</p>
-          </Button>
-        );
-      }}
-    />
-  ) : (
-    <Button className="w-full" color="minimal" href="/apps/categories/calendar">
-      <FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
-      <p>{t("install_new_calendar_app")}</p>
-    </Button>
-  );
-};
-
 const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
@@ -59,51 +38,39 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           type: "new_other",
         });
         return (
-          <Select
-            name="additionalCalendar"
-            placeholder={
-              <Button StartIcon={FiPlus} color="secondary">
+          <Dropdown modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
                 {t("add")}
               </Button>
-            }
-            options={options}
-            isSearchable={false}
-            isLoading={isLoading}
-            components={{ Option: ImageOption }}
-            styles={{
-              menu: (defaultStyles) => ({
-                ...defaultStyles,
-                "@media only screen and (max-width: 640px)": {
-                  left: "0",
-                },
-                width: "max-content",
-                right: "0",
-              }),
-              indicatorSeparator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              control: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-                border: "0",
-                borderRadius: "6px",
-                minHeight: "auto",
-              }),
-              dropdownIndicator: (defaultStyles) => ({
-                ...defaultStyles,
-                display: "none",
-              }),
-              valueContainer: (defaultStyles) => ({
-                ...defaultStyles,
-                padding: "0",
-              }),
-              placeholder: (defaultStyles) => ({
-                ...defaultStyles,
-                margin: "0",
-              }),
-            }}
-          />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {options.map((data) => (
+                <DropdownMenuItem key={data.slug} className="focus:outline-none">
+                  {data.slug === "add-new" ? (
+                    <DropdownItem StartIcon={FiPlus} color="minimal" href="/apps/categories/calendar">
+                      {t("install_new_calendar_app")}
+                    </DropdownItem>
+                  ) : (
+                    <InstallAppButton
+                      type={data.type}
+                      render={(installProps) => {
+                        const props = { ...installProps } as any;
+                        return (
+                          <DropdownItem {...props} color="minimal" type="button">
+                            <span className="flex items-center gap-x-2">
+                              {data.image && <img className="h-5 w-5" src={data.image} alt={data.label} />}
+                              {`${t("add")} ${data.label}`}
+                            </span>
+                          </DropdownItem>
+                        );
+                      }}
+                    />
+                  )}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </Dropdown>
         );
       }}
     />

apps/web/components/apps/App.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import type { IframeHTMLAttributes } from "react";
 import React, { useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
@@ -45,12 +46,12 @@ const Component = ({
   tos,
   privacy,
   isProOnly,
-  images,
+  descriptionItems,
   isTemplate,
   dependencies,
 }: Parameters<typeof App>[0]) => {
   const { t } = useLocale();
-  const hasImages = images && images.length > 0;
+  const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
   const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
@@ -94,17 +95,25 @@ const Component = ({
 
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
-      {hasImages && (
+      {hasDescriptionItems && (
         <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
-          {images ? (
-            images.map((img) => (
-              <img
-                key={img}
-                src={img}
-                alt={`Screenshot of app ${name}`}
-                className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
-              />
-            ))
+          {descriptionItems ? (
+            descriptionItems.map((descriptionItem, index) =>
+              typeof descriptionItem === "object" ? (
+                <div
+                  key={`iframe-${index}`}
+                  className="mr-4 max-h-full min-h-[315px] min-w-[90%] max-w-full snap-center last:mb-0 lg:mb-4 lg:mr-0 [&_iframe]:h-full [&_iframe]:min-h-[315px] [&_iframe]:w-full">
+                  <iframe allowFullScreen {...descriptionItem.iframe} />
+                </div>
+              ) : (
+                <img
+                  key={descriptionItem}
+                  src={descriptionItem}
+                  alt={`Screenshot of app ${name}`}
+                  className="mr-4 h-auto max-h-80 max-w-[90%] snap-center rounded-md object-contain last:mb-0 md:max-h-min lg:mb-4 lg:mr-0  lg:max-w-full"
+                />
+              )
+            )
           ) : (
             <SkeletonText />
           )}
@@ -113,7 +122,7 @@ const Component = ({
       <div
         className={classNames(
           "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
-          hasImages && "lg:ml-8"
+          hasDescriptionItems && "lg:ml-8"
         )}>
         <div className="mb-8 flex pt-4">
           <header>
@@ -354,7 +363,7 @@ export default function App(props: {
   privacy?: string;
   licenseRequired: AppType["licenseRequired"];
   isProOnly: AppType["isProOnly"];
-  images?: string[];
+  descriptionItems?: Array<string | { iframe: IframeHTMLAttributes<HTMLIFrameElement> }>;
   isTemplate?: boolean;
   disableInstall?: boolean;
   dependencies?: string[];

apps/web/components/apps/DestinationCalendarSelector.tsx

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

apps/web/components/booking/AvailableEventLocations.tsx

@@ -8,54 +8,61 @@ import { FiLink } from "@calcom/ui/components/icon";
 
 import type { Props } from "./pages/AvailabilityPage";
 
+const excludeNullValues = (value: unknown) => !!value;
+
 export function AvailableEventLocations({ locations }: { locations: Props["eventType"]["locations"] }) {
   const { t } = useLocale();
 
-  return locations.length ? (
-    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
-      {locations.map((location, index) => {
-        const eventLocationType = getEventLocationType(location.type);
-        if (!eventLocationType) {
-          // It's possible that the location app got uninstalled
-          return null;
-        }
+  const renderLocations = locations.map((location, index) => {
+    const eventLocationType = getEventLocationType(location.type);
+    if (!eventLocationType) {
+      // It's possible that the location app got uninstalled
+      return null;
+    }
+    if (eventLocationType.variable === "hostDefault") {
+      return null;
+    }
 
-        const translateAbleKeys = [
-          "attendee_in_person",
-          "in_person",
-          "attendee_phone_number",
-          "link_meeting",
-          "organizer_phone_number",
-        ];
+    const translateAbleKeys = [
+      "attendee_in_person",
+      "in_person",
+      "attendee_phone_number",
+      "link_meeting",
+      "organizer_phone_number",
+    ];
 
-        const locationKey = z.string().default("").parse(locationKeyToString(location));
+    const locationKey = z.string().default("").parse(locationKeyToString(location));
+    const translatedLocation = location.type.startsWith("integrations:")
+      ? eventLocationType.label
+      : translateAbleKeys.includes(locationKey)
+      ? t(locationKey)
+      : locationKey;
 
-        const translatedLocation = location.type.startsWith("integrations:")
-          ? eventLocationType.label
-          : translateAbleKeys.includes(locationKey)
-          ? t(locationKey)
-          : locationKey;
-
-        return (
-          <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
-            {eventLocationType.iconUrl === "/link.svg" ? (
-              <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
-            ) : (
-              <img
-                src={eventLocationType.iconUrl}
-                className={classNames(
-                  "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
-                  !eventLocationType.iconUrl?.includes("api") ? "dark:invert-[.65]" : ""
-                )}
-                alt={`${eventLocationType.label} icon`}
-              />
+    return (
+      <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
+        {eventLocationType.iconUrl === "/link.svg" ? (
+          <FiLink className="dark:text-darkgray-600 min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+        ) : (
+          <img
+            src={eventLocationType.iconUrl}
+            className={classNames(
+              "ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 ",
+              !eventLocationType.iconUrl?.includes("api") ? "dark:invert-[.65]" : ""
             )}
-            <Tooltip content={translatedLocation}>
-              <p className="line-clamp-1">{translatedLocation}</p>
-            </Tooltip>
-          </div>
-        );
-      })}
+            alt={`${eventLocationType.label} icon`}
+          />
+        )}
+        <Tooltip content={translatedLocation}>
+          <p className="line-clamp-1">{translatedLocation}</p>
+        </Tooltip>
+      </div>
+    );
+  });
+
+  const filteredLocations = renderLocations.filter(excludeNullValues) as JSX.Element[];
+  return filteredLocations.length ? (
+    <div className="dark:text-darkgray-600 mr-6 flex w-full flex-col space-y-4 break-words text-sm text-gray-600">
+      {filteredLocations}
     </div>
   ) : null;
 }

apps/web/components/booking/AvailableTimes.tsx

@@ -24,6 +24,7 @@ type AvailableTimesProps = {
   eventTypeSlug: string;
   date?: Dayjs;
   seatsPerTimeSlot?: number | null;
+  bookingAttendees?: number | null;
   slots?: Slot[];
   isLoading: boolean;
   ethSignature?: string;
@@ -39,6 +40,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   timeFormat,
   onTimeFormatChange,
   seatsPerTimeSlot,
+  bookingAttendees,
   ethSignature,
 }) => {
   const [slotPickerRef] = useAutoAnimate<HTMLDivElement>();
@@ -64,13 +66,13 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   return (
     <div ref={slotPickerRef}>
       {!!date ? (
-        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col px-4 text-center sm:mt-0 sm:p-5 md:-mb-5 md:min-w-[200px] lg:min-w-[300px]">
-          <div className="mb-6 flex items-center text-left text-base">
+        <div className="dark:bg-darkgray-100 mt-8 flex h-full w-full flex-col rounded-md px-4 text-center sm:mt-0 sm:p-4 md:-mb-5 md:min-w-[200px] md:p-4 lg:min-w-[300px]">
+          <div className="mb-4 flex items-center text-left text-base">
             <div className="mr-4">
               <span className="text-bookingdarker dark:text-darkgray-800 font-semibold text-gray-900">
                 {nameOfDay(i18n.language, Number(date.format("d")), "short")}
               </span>
-              <span className="text-bookinglight font-medium">
+              <span className="text-bookinglight">
                 , {date.toDate().toLocaleString(i18n.language, { month: "short" })} {date.format(" D ")}
               </span>
             </div>
@@ -85,12 +87,14 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               />
             </div>
           </div>
-          <div ref={ref} className="flex-grow overflow-y-auto sm:block md:h-[364px]">
+          <div
+            ref={ref}
+            className="scroll-bar scrollbar-track-w-20 relative -mb-4 flex-grow overflow-y-auto sm:block md:h-[364px]">
             {slots.length > 0 &&
               slots.map((slot) => {
                 type BookingURL = {
                   pathname: string;
-                  query: Record<string, string | number | string[] | undefined>;
+                  query: Record<string, string | number | string[] | undefined | TimeFormat>;
                 };
                 const bookingUrl: BookingURL = {
                   pathname: router.pathname.endsWith("/embed") ? "../book" : "book",
@@ -99,6 +103,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     date: dayjs.utc(slot.time).tz(timeZone()).format(),
                     type: eventTypeId,
                     slug: eventTypeSlug,
+                    timeFormat,
                     /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
                     count: recurringCount && !rescheduleUid ? recurringCount : undefined,
                     ...(ethSignature ? { ethSignature } : {}),
@@ -114,18 +119,28 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                   bookingUrl.query.bookingUid = slot.bookingUid;
                 }
 
+                let slotFull, notEnoughSeats;
+
+                if (slot.attendees && seatsPerTimeSlot) slotFull = slot.attendees >= seatsPerTimeSlot;
+                if (slot.attendees && bookingAttendees && seatsPerTimeSlot)
+                  notEnoughSeats = slot.attendees + bookingAttendees > seatsPerTimeSlot;
+
                 return (
                   <div data-slot-owner={(slot.userIds || []).join(",")} key={`${dayjs(slot.time).format()}`}>
                     {/* ^ data-slot-owner is helpful in debugging and used to identify the owners of the slot. Owners are the users which have the timeslot in their schedule. It doesn't consider if a user has that timeslot booked */}
                     {/* Current there is no way to disable Next.js Links */}
-                    {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
+                    {seatsPerTimeSlot && slot.attendees && (slotFull || notEnoughSeats) ? (
                       <div
                         className={classNames(
                           "text-primary-500 dark:bg-darkgray-200 dark:text-darkgray-900 mb-2 block rounded-sm border bg-white py-2 font-medium opacity-25 dark:border-transparent ",
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}>
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
-                        {!!seatsPerTimeSlot && <p className="text-sm">{t("booking_full")}</p>}
+                        {notEnoughSeats ? (
+                          <p className="text-sm">{t("not_enough_seats")}</p>
+                        ) : slots ? (
+                          <p className="text-sm">{t("booking_full")}</p>
+                        ) : null}
                       </div>
                     ) : (
                       <Link

apps/web/components/booking/BookingDescription.tsx

@@ -83,20 +83,20 @@ const BookingDescription: FC<Props> = (props) => {
         size="sm"
         truncateAfter={3}
       />
-      <h2 className="mt-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
+      <h2 className="mt-1 mb-2 break-words text-sm font-medium text-gray-600 dark:text-gray-300">
         {profile.name}
       </h2>
-      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold text-gray-900">
+      <h1 className="font-cal dark:text-darkgray-900 mb-6 break-words text-2xl font-semibold leading-none text-gray-900">
         {eventType.title}
       </h1>
       <div className="dark:text-darkgray-600 flex flex-col space-y-4 text-sm font-medium text-gray-600">
         {eventType?.description && (
           <div
             className={classNames(
-              "flex",
+              "scroll-bar scrollbar-track-w-20 -mx-5 flex max-h-[180px] overflow-y-scroll px-5 ",
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
-            <div className="scroll-bar scrollbar-track-w-20 max-h-[200px] max-w-full flex-shrink overflow-scroll break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
+            <div className="max-w-full flex-shrink break-words [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600">
               <EventTypeDescriptionSafeHTML eventType={eventType} />
             </div>
           </div>
@@ -135,7 +135,6 @@ const BookingDescription: FC<Props> = (props) => {
                   <li key={idx}>
                     <Badge
                       variant="gray"
-                      size="lg"
                       className={classNames(
                         duration === dur.toString()
                           ? "bg-darkgray-200 text-darkgray-900 dark:bg-darkmodebrand dark:!text-darkmodebrandcontrast"

apps/web/components/booking/BookingListItem.tsx

@@ -5,6 +5,8 @@ import { useState } from "react";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
+// TODO: Use browser locale, implement Intl in Dayjs maybe?
+import "@calcom/dayjs/locales";
 import ViewRecordingsDialog from "@calcom/features/ee/video/ViewRecordingsDialog";
 import classNames from "@calcom/lib/classNames";
 import { formatTime } from "@calcom/lib/date-fns";
@@ -46,7 +48,10 @@ function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
-  const { t } = useLocale();
+  const {
+    t,
+    i18n: { language },
+  } = useLocale();
   const utils = trpc.useContext();
   const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
@@ -94,6 +99,13 @@ function BookingListItem(booking: BookingItemProps) {
     mutation.mutate(body);
   };
 
+  const getSeatReferenceUid = () => {
+    if (!booking.seatsReferences[0]) {
+      return undefined;
+    }
+    return booking.seatsReferences[0].referenceUid;
+  };
+
   const pendingActions: ActionType[] = [
     {
       id: "reject",
@@ -135,7 +147,8 @@ function BookingListItem(booking: BookingItemProps) {
          cancel all remaining bookings or just that booking instance. */
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
-      }`,
+      }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
+      `,
       icon: FiX,
     },
     {
@@ -146,7 +159,9 @@ function BookingListItem(booking: BookingItemProps) {
           id: "reschedule",
           icon: FiClock,
           label: t("reschedule_booking"),
-          href: `/reschedule/${booking.uid}`,
+          href: `/reschedule/${booking.uid}${
+            booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
+          }`,
         },
         {
           id: "reschedule_request",
@@ -179,14 +194,15 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <FiSend className="-mt-[1px] w-4 rotate-45" />
-        <p className="ml-2 ">{t("reschedule_request_sent")}</p>
-      </div>
+      <Badge startIcon={FiSend} size="md" variant="gray" data-testid="request_reschedule_sent">
+        {t("reschedule_request_sent")}
+      </Badge>
     );
   };
 
-  const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
+  const startTime = dayjs(booking.startTime)
+    .locale(language)
+    .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
   const [isOpenSetLocationDialog, setIsOpenLocationDialog] = useState(false);
   const setLocationMutation = trpc.viewer.bookings.editLocation.useMutation({
@@ -224,7 +240,7 @@ function BookingListItem(booking: BookingItemProps) {
   const showRecordingsButtons =
     (booking.location === "integrations:daily" || booking?.location?.trim() === "") && isPast && isConfirmed;
 
-  const title = decodeURIComponent(booking.title);
+  const title = booking.title;
   return (
     <>
       <RescheduleDialog
@@ -386,13 +402,13 @@ function BookingListItem(booking: BookingItemProps) {
               />
             )}
             {isCancelled && booking.rescheduled && (
-              <div className="mt-2 inline-block text-left text-sm md:hidden">
+              <div className="mt-2 inline-block md:hidden">
                 <RequestSentMessage />
               </div>
             )}
           </div>
         </td>
-        <td className="py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
+        <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
               {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
@@ -422,7 +438,10 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
-  const { t } = useLocale();
+  const {
+    t,
+    i18n: { language },
+  } = useLocale();
   const now = new Date();
   const recurringCount = recurringDates.filter((date) => {
     return (
@@ -452,7 +471,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                   <p key={key} className={classNames(pastOrCancelled && "line-through")}>
                     {formatTime(aDate, user?.timeFormat, user?.timeZone)}
                     {" - "}
-                    {dayjs(aDate).format("D MMMM YYYY")}
+                    {dayjs(aDate).locale(language).format("D MMMM YYYY")}
                   </p>
                 );
               })}>

apps/web/components/booking/CancelBooking.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -23,18 +23,26 @@ type Props = {
   setIsCancellationMode: (value: boolean) => void;
   theme: string | null;
   allRemainingBookings: boolean;
+  seatReferenceUid?: string;
 };
 
 export default function CancelBooking(props: Props) {
   const [cancellationReason, setCancellationReason] = useState<string>("");
   const { t } = useLocale();
   const router = useRouter();
-  const { booking, allRemainingBookings } = props;
+  const { booking, allRemainingBookings, seatReferenceUid } = props;
   const [loading, setLoading] = useState(false);
   const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
   useTheme(props.theme);
 
+  const cancelBookingRef = useCallback((node: HTMLTextAreaElement) => {
+    if (node !== null) {
+      node.scrollIntoView({ behavior: "smooth" });
+      node.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     <>
       {error && (
@@ -53,6 +61,7 @@ export default function CancelBooking(props: Props) {
         <div className="mt-5 sm:mt-6">
           <label className="text-bookingdark font-medium dark:text-white">{t("cancellation_reason")}</label>
           <TextArea
+            ref={cancelBookingRef}
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
             onChange={(e) => setCancellationReason(e.target.value)}
@@ -68,21 +77,21 @@ export default function CancelBooking(props: Props) {
                 {t("nevermind")}
               </Button>
               <Button
-                className="flex justify-center"
+                className="dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand hover:border-brand text-brandcontrast flex justify-center"
                 data-testid="cancel"
                 onClick={async () => {
                   setLoading(true);
 
-                  const payload = {
-                    id: booking?.id,
-                    cancellationReason: cancellationReason,
-                    allRemainingBookings,
-                  };
-
                   telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
 
                   const res = await fetch("/api/cancel", {
-                    body: JSON.stringify(payload),
+                    body: JSON.stringify({
+                      uid: booking?.uid,
+                      cancellationReason: cancellationReason,
+                      allRemainingBookings,
+                      // @NOTE: very important this shouldn't cancel with number ID use uid instead
+                      seatReferenceUid,
+                    }),
                     headers: {
                       "Content-Type": "application/json",
                     },

apps/web/components/booking/SlotPicker.tsx

@@ -78,6 +78,7 @@ export const SlotPicker = ({
   recurringEventCount,
   users,
   seatsPerTimeSlot,
+  bookingAttendees,
   weekStart = 0,
   ethSignature,
 }: {
@@ -89,6 +90,7 @@ export const SlotPicker = ({
   onTimeFormatChange: (is24Hour: boolean) => void;
   timeZone?: string;
   seatsPerTimeSlot?: number;
+  bookingAttendees?: number;
   recurringEventCount?: number;
   users: string[];
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -131,10 +133,7 @@ export const SlotPicker = ({
     eventTypeId: eventType.id,
     eventTypeSlug: eventType.slug,
     usernameList: users,
-    startTime:
-      browsingDate === undefined || browsingDate.get("month") === dayjs.tz(undefined, timeZone).get("month")
-        ? dayjs.tz(undefined, timeZone).subtract(2, "days").startOf("day")
-        : browsingDate?.startOf("month"),
+    startTime: dayjs().startOf("day"),
     endTime: browsingDate?.endOf("month"),
     timeZone,
     duration,
@@ -164,7 +163,7 @@ export const SlotPicker = ({
       <DatePicker
         isLoading={isLoading}
         className={classNames(
-          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-5 lg:min-w-[455px]",
+          "mt-8 px-4 pb-4 sm:mt-0 md:min-w-[300px] md:px-4 lg:min-w-[455px]",
           selectedDate ? "sm:dark:border-darkgray-200 border-gray-200 sm:border-r sm:p-4 sm:pr-6" : "sm:p-4"
         )}
         includedDates={Object.keys(monthSlots).filter((k) => monthSlots[k].length > 0)}
@@ -192,6 +191,7 @@ export const SlotPicker = ({
         eventTypeId={eventType.id}
         eventTypeSlug={eventType.slug}
         seatsPerTimeSlot={seatsPerTimeSlot}
+        bookingAttendees={bookingAttendees}
         recurringCount={recurringEventCount}
         ethSignature={ethSignature}
       />

apps/web/components/booking/TimeOptions.tsx

@@ -1,12 +1,9 @@
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 
-import useTheme from "@calcom/lib/hooks/useTheme";
 import type { ITimezoneOption } from "@calcom/ui";
 import { TimezoneSelect } from "@calcom/ui";
 
-import useMeQuery from "@lib/hooks/useMeQuery";
-
 import { timeZone } from "../../lib/clock";
 
 type Props = {
@@ -15,8 +12,6 @@ type Props = {
 
 const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const query = useMeQuery();
-  const userTheme = useTheme(query?.data?.theme).resolvedTheme;
 
   useEffect(() => {
     setSelectedTimeZone(timeZone());
@@ -28,59 +23,16 @@ const TimeOptions: FC<Props> = ({ onSelectTimeZone }) => {
     }
   }, [selectedTimeZone, onSelectTimeZone]);
 
-  const customStyles = {
-    option: (_provided: object, state: { isSelected: boolean; isFocused: boolean }) => ({
-      padding: "10px 12px !important",
-      color: state.isSelected || state.isFocused ? "#101010" : "#374151",
-      backgroundColor: state.isSelected ? "#E5E7EB !important" : "white",
-      ...(userTheme === "dark" && {
-        color: state.isSelected || state.isFocused ? "white" : "#80868B",
-      }),
-    }),
-    control: () => ({
-      display: "flex",
-      cursor: "pointer",
-      backgroundColor: "transparent !important",
-      minWidth: "5rem",
-      height: "24px",
-      minHeight: "24px !important",
-      boxShadow: "none !important",
-    }),
-    singleValue: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      ...(userTheme === "dark" && {
-        color: "#a5a5a5 !important",
-      }),
-    }),
-    menu: (provided: object) => ({
-      ...provided,
-      minWidth: "20rem",
-      margin: "8px 0 0 -20px",
-    }),
-    valueContainer: (provided: object) => ({
-      ...provided,
-      padding: "0 0 0 6px",
-    }),
-    dropdownIndicator: (provided: object, state: { selectProps: { menuIsOpen: boolean } }) => ({
-      ...provided,
-      transform: state.selectProps.menuIsOpen ? "rotate(180deg)" : "",
-      color: state.selectProps.menuIsOpen ? "#111827" : "#4B5563",
-      marginLeft: 4,
-      padding: 0,
-      ...(userTheme === "dark" && {
-        color: "#80868B",
-      }),
-    }),
-  };
-
   return !!selectedTimeZone ? (
     <TimezoneSelect
       id="timeZone"
+      classNames={{
+        singleValue: () => "dark:text-darkgray-600 text-gray-600",
+        menu: () => "!w-64 max-w-[90vw]",
+      }}
+      variant="minimal"
       value={selectedTimeZone}
       onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-      className="flex h-6 text-sm font-medium"
-      styles={customStyles}
     />
   ) : null;
 };

apps/web/components/booking/TimezoneDropdown.tsx

@@ -17,8 +17,8 @@ export function TimezoneDropdown({
 
   return (
     <>
-      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 -mx-[2px] !mt-3 flex w-fit max-w-[20rem] items-center rounded-[4px] px-1 py-[2px] text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-[2px] rtl:ml-[2px]" />
+      <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
+        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
     </>

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

@@ -23,8 +23,9 @@ import notEmpty from "@calcom/lib/notEmpty";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
+import { trpc } from "@calcom/trpc";
 import { HeadSeo } from "@calcom/ui";
-import { FiCreditCard, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -52,6 +53,7 @@ const dateQuerySchema = z.object({
   rescheduleUid: z.string().optional().default(""),
   date: z.string().optional().default(""),
   timeZone: z.string().optional().default(""),
+  seatReferenceUid: z.string().optional(),
 });
 
 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
@@ -124,6 +126,15 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
       : undefined,
   ];
 
+  const { data: bookingAttendees } = trpc.viewer.bookings.getBookingAttendees.useQuery(
+    {
+      seatReferenceUid: rescheduleUid,
+    },
+    {
+      enabled: !!(rescheduleUid && eventType.seatsPerTimeSlot),
+    }
+  );
+
   return (
     <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
       <HeadSeo
@@ -143,6 +154,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
           nofollow: eventType.hidden,
           noindex: eventType.hidden,
         }}
+        isBrandingHidden={restProps.isBrandingHidden}
       />
       <BookingPageTagManager eventType={eventType} />
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -168,10 +180,26 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   <div
                     className={classNames(
                       "sm:dark:border-darkgray-200 flex flex-col border-gray-200 p-5 sm:border-r",
-                      "min-w-full md:w-[230px] md:min-w-[230px]",
+                      "min-w-full md:w-[280px] md:min-w-[280px]",
                       recurringEventCount && "xl:w-[380px] xl:min-w-[380px]"
                     )}>
                     <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
+                      {rescheduleUid && eventType.seatsPerTimeSlot && bookingAttendees && (
+                        <div
+                          className={classNames(
+                            "flex flex-nowrap items-center text-sm font-medium",
+                            "dark:text-darkgray-600 text-gray-600",
+                            "ltr:mr-[10px] rtl:ml-[10px]"
+                          )}>
+                          <FiUser
+                            className={classNames(
+                              "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
+                              "mt-[2px]"
+                            )}
+                          />{" "}
+                          {t("event_type_seats", { numberOfSeats: bookingAttendees })}
+                        </div>
+                      )}
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="flex items-start text-sm font-medium">
                           <FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
@@ -247,6 +275,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   timeZone={timeZone}
                   users={userList}
                   seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
+                  bookingAttendees={bookingAttendees || undefined}
                   recurringEventCount={recurringEventCount}
                   ethSignature={gateState.rainbowToken}
                 />

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

@@ -35,18 +35,19 @@ import classNames from "@calcom/lib/classNames";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
+import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { TimeFormat } from "@calcom/lib/timeFormat";
 import { Button, Form, Tooltip } from "@calcom/ui";
 import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
 
-import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 import createBooking from "@lib/mutations/bookings/create-booking";
 import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
-import { parseDate, parseRecurringDates } from "@lib/parseDate";
+import { parseRecurringDates, parseDate } from "@lib/parseDate";
 
 import type { Gate, GateState } from "@components/Gates";
 import Gates from "@components/Gates";
@@ -56,6 +57,8 @@ import type { BookPageProps } from "../../../pages/[user]/book";
 import type { HashLinkPageProps } from "../../../pages/d/[link]/book";
 import type { TeamBookingPageProps } from "../../../pages/team/[slug]/book";
 
+const Toaster = dynamic(() => import("react-hot-toast").then((mod) => mod.Toaster), { ssr: false });
+
 /** These are like 40kb that not every user needs */
 const BookingDescriptionPayment = dynamic(
   () => import("@components/booking/BookingDescriptionPayment")
@@ -76,6 +79,7 @@ const BookingFields = ({
   const { t } = useLocale();
   const { watch, setValue } = useFormContext();
   const locationResponse = watch("responses.location");
+  const currentView = rescheduleUid ? "reschedule" : "";
 
   return (
     // TODO: It might make sense to extract this logic into BookingFields config, that would allow to quickly configure system fields and their editability in fresh booking and reschedule booking view
@@ -85,12 +89,16 @@ const BookingFields = ({
         // Allowing a system field to be edited might require sending emails to attendees, so we need to be careful
         let readOnly =
           (field.editable === "system" || field.editable === "system-but-optional") && !!rescheduleUid;
+
         let noLabel = false;
         let hidden = !!field.hidden;
+        const fieldViews = field.views;
+
+        if (fieldViews && !fieldViews.find((view) => view.id === currentView)) {
+          return null;
+        }
+
         if (field.name === SystemField.Enum.rescheduleReason) {
-          if (!rescheduleUid) {
-            return null;
-          }
           // rescheduleReason is a reschedule specific field and thus should be editable during reschedule
           readOnly = false;
         }
@@ -113,7 +121,10 @@ const BookingFields = ({
         }
 
         // We don't show `notes` field during reschedule
-        if (field.name === SystemField.Enum.notes && !!rescheduleUid) {
+        if (
+          (field.name === SystemField.Enum.notes || field.name === SystemField.Enum.guests) &&
+          !!rescheduleUid
+        ) {
           return null;
         }
 
@@ -175,9 +186,26 @@ const BookingFields = ({
   );
 };
 
+const routerQuerySchema = z
+  .object({
+    timeFormat: z.nativeEnum(TimeFormat),
+    rescheduleUid: z.string().optional(),
+    date: z
+      .string()
+      .optional()
+      .transform((date) => {
+        if (date === undefined) {
+          return null;
+        }
+        return date;
+      }),
+  })
+  .passthrough();
+
 const BookingPage = ({
   eventType,
   booking,
+  currentSlotBooking,
   profile,
   isDynamicGroupBooking,
   recurringEventCount,
@@ -226,12 +254,12 @@ const BookingPage = ({
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
-      const { uid, paymentUid } = responseData;
+      const { uid } = responseData;
 
-      if (paymentUid) {
+      if ("paymentUid" in responseData && !!responseData.paymentUid) {
         return await router.push(
           createPaymentLink({
-            paymentUid,
+            paymentUid: responseData.paymentUid,
             date,
             name: bookingForm.getValues("responses.name"),
             email: bookingForm.getValues("responses.email"),
@@ -246,6 +274,7 @@ const BookingPage = ({
           isSuccessBookingPage: true,
           email: bookingForm.getValues("responses.email"),
           eventTypeSlug: eventType.slug,
+          seatReferenceUid: "seatReferenceUid" in responseData ? responseData.seatReferenceUid : null,
           ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
         },
       });
@@ -259,6 +288,7 @@ const BookingPage = ({
       return router.push({
         pathname: `/booking/${uid}`,
         query: {
+          isSuccessBookingPage: true,
           allRemainingBookings: true,
           email: bookingForm.getValues("responses.email"),
           eventTypeSlug: eventType.slug,
@@ -268,11 +298,17 @@ const BookingPage = ({
     },
   });
 
-  const rescheduleUid = router.query.rescheduleUid as string;
+  const {
+    data: { timeFormat, rescheduleUid, date },
+  } = useTypedQuery(routerQuerySchema);
+
   useTheme(profile.theme);
-  const date = asStringOrNull(router.query.date);
+
   const querySchema = getBookingResponsesPartialSchema({
-    bookingFields: getBookingFieldsWithSystemFields(eventType),
+    eventType: {
+      bookingFields: getBookingFieldsWithSystemFields(eventType),
+    },
+    view: rescheduleUid ? "reschedule" : "booking",
   });
 
   const parsedQuery = querySchema.parse({
@@ -352,7 +388,8 @@ const BookingPage = ({
   const bookingFormSchema = z
     .object({
       responses: getBookingResponsesSchema({
-        bookingFields: getBookingFieldsWithSystemFields(eventType),
+        eventType: { bookingFields: getBookingFieldsWithSystemFields(eventType) },
+        view: rescheduleUid ? "reschedule" : "booking",
       }),
     })
     .passthrough();
@@ -370,6 +407,7 @@ const BookingPage = ({
   // Calculate the booking date(s)
   let recurringStrings: string[] = [],
     recurringDates: Date[] = [];
+
   if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
     [recurringStrings, recurringDates] = parseRecurringDates(
       {
@@ -377,12 +415,13 @@ const BookingPage = ({
         timeZone: timeZone(),
         recurringEvent: eventType.recurringEvent,
         recurringCount: parseInt(recurringEventCount.toString()),
+        selectedTimeFormat: timeFormat,
       },
       i18n
     );
   }
 
-  const bookEvent = (booking: BookingFormValues) => {
+  const bookEvent = (bookingValues: BookingFormValues) => {
     telemetry.event(
       top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
       { isTeamBooking: document.URL.includes("team/") }
@@ -405,9 +444,9 @@ const BookingPage = ({
       // Identify set of bookings to one intance of recurring event to support batch changes
       const recurringEventId = uuidv4();
       const recurringBookings = recurringDates.map((recurringDate) => ({
-        ...booking,
-        start: dayjs(recurringDate).format(),
-        end: dayjs(recurringDate).add(duration, "minute").format(),
+        ...bookingValues,
+        start: dayjs(recurringDate).utc().format(),
+        end: dayjs(recurringDate).utc().add(duration, "minute").format(),
         eventTypeId: eventType.id,
         eventTypeSlug: eventType.slug,
         recurringEventId,
@@ -425,20 +464,21 @@ const BookingPage = ({
       recurringMutation.mutate(recurringBookings);
     } else {
       mutation.mutate({
-        ...booking,
-        start: dayjs(date).tz(timeZone()).format(),
-        end: dayjs(date).tz(timeZone()).add(duration, "minute").format(),
+        ...bookingValues,
+        start: dayjs(date).utc().format(),
+        end: dayjs(date).utc().add(duration, "minute").format(),
         eventTypeId: eventType.id,
         eventTypeSlug: eventType.slug,
         timeZone: timeZone(),
         language: i18n.language,
         rescheduleUid,
-        bookingUid: router.query.bookingUid as string,
+        bookingUid: (router.query.bookingUid as string) || booking?.uid,
         user: router.query.user,
         metadata,
         hasHashedBookingLink,
         hashedLink,
         ethSignature: gateState.rainbowToken,
+        seatReferenceUid: router.query.seatReferenceUid as string,
       });
     }
   };
@@ -507,7 +547,7 @@ const BookingPage = ({
                     <div className="text-sm font-medium">
                       {isClientTimezoneAvailable &&
                         (rescheduleUid || !eventType.recurringEvent?.freq) &&
-                        `${parseDate(date, i18n)}`}
+                        `${parseDate(date, i18n, timeFormat)}`}
                       {isClientTimezoneAvailable &&
                         !rescheduleUid &&
                         eventType.recurringEvent?.freq &&
@@ -537,7 +577,7 @@ const BookingPage = ({
                         <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {isClientTimezoneAvailable &&
                           typeof booking.startTime === "string" &&
-                          parseDate(dayjs(booking.startTime), i18n)}
+                          parseDate(dayjs(booking.startTime), i18n, timeFormat)}
                       </p>
                     </div>
                   )}
@@ -545,23 +585,27 @@ const BookingPage = ({
                     <div className="text-bookinghighlight flex items-start text-sm">
                       <FiUser
                         className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
-                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                          currentSlotBooking &&
+                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                             ? "text-rose-600"
-                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            : currentSlotBooking &&
+                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                             ? "text-yellow-500"
                             : "text-bookinghighlight"
                         }`}
                       />
                       <p
                         className={`${
-                          booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
+                          currentSlotBooking &&
+                          currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                             ? "text-rose-600"
-                            : booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
+                            : currentSlotBooking &&
+                              currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.33
                             ? "text-yellow-500"
                             : "text-bookinghighlight"
                         } mb-2 font-medium`}>
-                        {booking
-                          ? eventType.seatsPerTimeSlot - booking.attendees.length
+                        {currentSlotBooking
+                          ? eventType.seatsPerTimeSlot - currentSlotBooking.attendees.length
                           : eventType.seatsPerTimeSlot}{" "}
                         / {eventType.seatsPerTimeSlot} {t("seats_available")}
                       </p>
@@ -593,6 +637,7 @@ const BookingPage = ({
                   </Button>
                   <Button
                     type="submit"
+                    className="dark:bg-darkmodebrand dark:hover:border-darkmodebrand dark:text-darkmodebrandcontrast bg-brand hover:border-brand text-brandcontrast"
                     data-testid={rescheduleUid ? "confirm-reschedule-button" : "confirm-book-button"}
                     loading={mutation.isLoading || recurringMutation.isLoading}>
                     {rescheduleUid ? t("reschedule") : t("confirm")}
@@ -606,6 +651,7 @@ const BookingPage = ({
           </div>
         </div>
       </main>
+      <Toaster position="bottom-right" />
     </Gates>
   );
 };

apps/web/components/dialog/EditLocationDialog.tsx

@@ -17,6 +17,7 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
+import { Input } from "@calcom/ui";
 import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
 import { FiMapPin } from "@calcom/ui/components/icon";
 
@@ -32,6 +33,7 @@ interface ISetLocationDialog {
   saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
   selection?: LocationOption;
   booking?: BookingItem;
+  isTeamEvent?: boolean;
   defaultValues?: LocationObject[];
   setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
   isOpenDialog: boolean;
@@ -52,7 +54,7 @@ const LocationInput = (props: {
   const { control } = useFormContext() as typeof locationFormMethods;
   if (eventLocationType?.organizerInputType === "text") {
     return (
-      <input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
+      <Input {...locationFormMethods.register(eventLocationType.variable)} type="text" {...remainingProps} />
     );
   } else if (eventLocationType?.organizerInputType === "phone") {
     return (
@@ -73,6 +75,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
     saveLocation,
     selection,
     booking,
+    isTeamEvent,
     setShowLocationModal,
     isOpenDialog,
     defaultValues,
@@ -171,7 +174,6 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
               id="locationInput"
               placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
               required
-              className="block w-full rounded-sm border-gray-300 text-sm"
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
               defaultValue={
                 defaultLocation ? defaultLocation[eventLocationType.defaultValueVariable] : undefined
@@ -290,7 +292,9 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 query={locationsQuery}
                 success={({ data }) => {
                   if (!data.length) return null;
-                  const locationOptions = [...data];
+                  const locationOptions = [...data].filter((option) => {
+                    return !isTeamEvent ? option.label !== "Conferencing" : true;
+                  });
                   if (booking) {
                     locationOptions.map((location) =>
                       location.options.filter((l) => !["phone", "attendeeInPerson"].includes(l.value))

apps/web/components/eventtype/AvailabilityTab.tsx

@@ -4,13 +4,15 @@ import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
 
 import dayjs from "@calcom/dayjs";
+import { NewScheduleButton } from "@calcom/features/schedules";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
+import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
-import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
+import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
+import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -52,23 +54,24 @@ const SingleValue = ({ ...props }: SingleValueProps<AvailabilityOption>) => {
 
 const AvailabilitySelect = ({
   className = "",
+  isLoading,
+  schedules,
   ...props
 }: {
   className?: string;
   name: string;
   value: number;
+  isLoading: boolean;
+  schedules: RouterOutputs["viewer"]["availability"]["list"]["schedules"] | [];
   onBlur: () => void;
   onChange: (value: AvailabilityOption | null) => void;
 }) => {
-  const { data, isLoading } = trpc.viewer.availability.list.useQuery();
   const { t } = useLocale();
 
   if (isLoading) {
     return <SelectSkeletonLoader />;
   }
 
-  const schedules = data?.schedules || [];
-
   const options = schedules.map((schedule) => ({
     value: schedule.id,
     label: schedule.name,
@@ -107,6 +110,7 @@ const EventTypeScheduleDetails = () => {
   const { watch } = useFormContext<FormValues>();
 
   const scheduleId = watch("schedule");
+
   const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId: scheduleId || loggedInUser?.defaultScheduleId || undefined },
     { enabled: !!scheduleId || !!loggedInUser?.defaultScheduleId }
@@ -174,6 +178,19 @@ const EventTypeScheduleDetails = () => {
 
 const EventTypeSchedule = () => {
   const { t } = useLocale();
+  const { data: schedules, isLoading } = trpc.viewer.availability.list.useQuery();
+
+  if (!schedules?.schedules.length && !isLoading)
+    return (
+      <EmptyScreen
+        Icon={FiClock}
+        headline={t("new_schedule_heading")}
+        description={t("new_schedule_description")}
+        buttonRaw={<NewScheduleButton fromEventType />}
+        border={false}
+      />
+    );
+
   return (
     <div className="space-y-4">
       <div>
@@ -183,14 +200,18 @@ const EventTypeSchedule = () => {
         <Controller
           name="schedule"
           render={({ field }) => (
-            <AvailabilitySelect
-              value={field.value}
-              onBlur={field.onBlur}
-              name={field.name}
-              onChange={(selected) => {
-                field.onChange(selected?.value || null);
-              }}
-            />
+            <>
+              <AvailabilitySelect
+                value={field.value}
+                onBlur={field.onBlur}
+                name={field.name}
+                schedules={schedules?.schedules || []}
+                isLoading={isLoading}
+                onChange={(selected) => {
+                  field.onChange(selected?.value || null);
+                }}
+              />
+            </>
           )}
         />
       </div>

apps/web/components/eventtype/CustomEventTypeModal.tsx

@@ -52,7 +52,8 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
         type="text"
         placeholder={placeHolder_}
         {...register("customEventName", {
-          validate: (value) => validateCustomEventName(value, t("invalid_event_name_variables")),
+          validate: (value) =>
+            validateCustomEventName(value, t("invalid_event_name_variables"), event.bookingFields),
         })}
         className="mb-0"
       />

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -12,6 +12,7 @@ import DestinationCalendarSelector from "@calcom/features/calendars/DestinationC
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
 import { APP_NAME, CAL_URL, IS_SELF_HOSTED } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip } from "@calcom/ui";
 import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
@@ -36,11 +37,19 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
   const [redirectUrlVisible, setRedirectUrlVisible] = useState(!!eventType.successRedirectUrl);
   const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
+
+  const bookingFields: Prisma.JsonObject = {};
+
+  eventType.bookingFields.forEach(({ name }) => {
+    bookingFields[name] = name + " input";
+  });
+
   const eventNameObject: EventNameObjectType = {
     attendeeName: t("scheduler"),
     eventType: eventType.title,
     eventName: eventType.eventName,
     host: eventType.users[0]?.name || "Nameless",
+    bookingFields: bookingFields,
     t,
   };
 
@@ -255,6 +264,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         defaultValue={!!eventType.seatsPerTimeSlot}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            data-testid="offer-seats-toggle"
             title={t("offer_seats")}
             description={t("offer_seats_description")}
             checked={value}
@@ -308,7 +318,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         <CustomEventTypeModal
           close={closeEventNameTip}
           setValue={setEventName}
-          defaultValue={eventType.eventName || ""}
+          defaultValue={formMethods.getValues("eventName") || eventType.eventName || ""}
           placeHolder={eventNamePlaceholder}
           event={eventNameObject}
         />

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -1,9 +1,11 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
+import type { Key } from "react";
 import React, { useEffect, useState } from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
+import type { SingleValue } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import type { DurationType } from "@calcom/lib/convertToNewDurationType";
@@ -11,8 +13,17 @@ import convertToNewDurationType from "@calcom/lib/convertToNewDurationType";
 import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { PeriodType } from "@calcom/prisma/client";
-import type { BookingLimit } from "@calcom/types/Calendar";
-import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import type { IntervalLimit } from "@calcom/types/Calendar";
+import {
+  Button,
+  DateRangePicker,
+  Input,
+  InputField,
+  Label,
+  Select,
+  SettingsToggle,
+  TextField,
+} from "@calcom/ui";
 import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
@@ -77,6 +88,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
           label={t("minimum_booking_notice")}
           type="number"
           placeholder="0"
+          min={0}
           className="mb-0 h-[38px] rounded-[4px] ltr:mr-2 rtl:ml-2"
         />
         <input type="hidden" ref={ref} {...passThroughProps} />
@@ -260,7 +272,34 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
                 formMethods.setValue("bookingLimits", {});
               }
             }}>
-            <BookingLimits />
+            <IntervalLimitsManager propertyName="bookingLimits" defaultLimit={1} step={1} />
+          </SettingsToggle>
+        )}
+      />
+      <hr />
+      <Controller
+        name="durationLimits"
+        control={formMethods.control}
+        render={({ field: { value } }) => (
+          <SettingsToggle
+            title={t("limit_total_booking_duration")}
+            description={t("limit_total_booking_duration_description")}
+            checked={Object.keys(value ?? {}).length > 0}
+            onCheckedChange={(active) => {
+              if (active) {
+                formMethods.setValue("durationLimits", {
+                  PER_DAY: 60,
+                });
+              } else {
+                formMethods.setValue("durationLimits", {});
+              }
+            }}>
+            <IntervalLimitsManager
+              propertyName="durationLimits"
+              defaultLimit={60}
+              step={15}
+              textFieldSuffix={t("minutes")}
+            />
           </SettingsToggle>
         )}
       />
@@ -348,124 +387,159 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   );
 };
 
-const validationOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"];
-type BookingLimitsKey = keyof BookingLimit;
-const BookingLimits = () => {
+type IntervalLimitsKey = keyof IntervalLimit;
+
+const intervalOrderKeys = ["PER_DAY", "PER_WEEK", "PER_MONTH", "PER_YEAR"] as const;
+
+const INTERVAL_LIMIT_OPTIONS = intervalOrderKeys.map((key) => ({
+  value: key as keyof IntervalLimit,
+  label: `Per ${key.split("_")[1].toLocaleLowerCase()}`,
+}));
+
+type IntervalLimitItemProps = {
+  key: Key;
+  limitKey: IntervalLimitsKey;
+  step: number;
+  value: number;
+  textFieldSuffix?: string;
+  selectOptions: { value: keyof IntervalLimit; label: string }[];
+  hasDeleteButton?: boolean;
+  onDelete: (intervalLimitsKey: IntervalLimitsKey) => void;
+  onLimitChange: (intervalLimitsKey: IntervalLimitsKey, limit: number) => void;
+  onIntervalSelect: (interval: SingleValue<{ value: keyof IntervalLimit; label: string }>) => void;
+};
+
+const IntervalLimitItem = ({
+  limitKey,
+  step,
+  value,
+  textFieldSuffix,
+  selectOptions,
+  hasDeleteButton,
+  onDelete,
+  onLimitChange,
+  onIntervalSelect,
+}: IntervalLimitItemProps) => {
+  return (
+    <div className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse" key={limitKey}>
+      <TextField
+        required
+        type="number"
+        containerClassName={textFieldSuffix ? "w-44 -mb-1" : "w-16 mb-0"}
+        className="mb-0"
+        placeholder={`${value}`}
+        min={step}
+        step={step}
+        defaultValue={value}
+        addOnSuffix={textFieldSuffix}
+        onChange={(e) => onLimitChange(limitKey, parseInt(e.target.value))}
+      />
+      <Select
+        options={selectOptions}
+        isSearchable={false}
+        defaultValue={INTERVAL_LIMIT_OPTIONS.find((option) => option.value === limitKey)}
+        onChange={onIntervalSelect}
+      />
+      {hasDeleteButton && (
+        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+      )}
+    </div>
+  );
+};
+
+type IntervalLimitsManagerProps<K extends "durationLimits" | "bookingLimits"> = {
+  propertyName: K;
+  defaultLimit: number;
+  step: number;
+  textFieldSuffix?: string;
+};
+
+const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
+  propertyName,
+  defaultLimit,
+  step,
+  textFieldSuffix,
+}: IntervalLimitsManagerProps<K>) => {
   const { watch, setValue, control } = useFormContext<FormValues>();
-  const watchBookingLimits = watch("bookingLimits");
+  const watchIntervalLimits = watch(propertyName);
   const { t } = useLocale();
 
   const [animateRef] = useAutoAnimate<HTMLUListElement>();
 
-  const BOOKING_LIMIT_OPTIONS: {
-    value: keyof BookingLimit;
-    label: string;
-  }[] = [
-    {
-      value: "PER_DAY",
-      label: "Per Day",
-    },
-    {
-      value: "PER_WEEK",
-      label: "Per Week",
-    },
-    {
-      value: "PER_MONTH",
-      label: "Per Month",
-    },
-    {
-      value: "PER_YEAR",
-      label: "Per Year",
-    },
-  ];
-
   return (
     <Controller
-      name="bookingLimits"
+      name={propertyName}
       control={control}
       render={({ field: { value, onChange } }) => {
-        const currentBookingLimits = value;
+        const currentIntervalLimits = value;
+
+        const addLimit = () => {
+          if (!currentIntervalLimits || !watchIntervalLimits) return;
+          const currentKeys = Object.keys(watchIntervalLimits);
+
+          const [rest] = Object.values(INTERVAL_LIMIT_OPTIONS).filter(
+            (option) => !currentKeys.includes(option.value)
+          );
+          if (!rest || !currentKeys.length) return;
+          //currentDurationLimits is always defined so can be casted
+          // @ts-expect-error FIXME Fix these typings
+          setValue(propertyName, {
+            ...watchIntervalLimits,
+            [rest.value]: defaultLimit,
+          });
+        };
+
         return (
           <ul ref={animateRef}>
-            {currentBookingLimits &&
-              watchBookingLimits &&
-              Object.entries(currentBookingLimits)
-                .sort(([limitkeyA], [limitKeyB]) => {
+            {currentIntervalLimits &&
+              watchIntervalLimits &&
+              Object.entries(currentIntervalLimits)
+                .sort(([limitKeyA], [limitKeyB]) => {
                   return (
-                    validationOrderKeys.indexOf(limitkeyA as BookingLimitsKey) -
-                    validationOrderKeys.indexOf(limitKeyB as BookingLimitsKey)
+                    intervalOrderKeys.indexOf(limitKeyA as IntervalLimitsKey) -
+                    intervalOrderKeys.indexOf(limitKeyB as IntervalLimitsKey)
                   );
                 })
-                .map(([key, bookingAmount]) => {
-                  const bookingLimitKey = key as BookingLimitsKey;
+                .map(([key, value]) => {
+                  const limitKey = key as IntervalLimitsKey;
                   return (
-                    <div
-                      className="mb-2 flex items-center space-x-2 text-sm rtl:space-x-reverse"
-                      key={bookingLimitKey}>
-                      <Input
-                        id={`${bookingLimitKey}-limit`}
-                        type="number"
-                        className="mb-0 block w-16 rounded-md border-gray-300 text-sm  [appearance:textfield]"
-                        placeholder="1"
-                        min={1}
-                        defaultValue={bookingAmount}
-                        onChange={(e) => {
-                          const val = e.target.value;
-                          setValue(`bookingLimits.${bookingLimitKey}`, parseInt(val));
-                        }}
-                      />
-                      <Select
-                        options={BOOKING_LIMIT_OPTIONS.filter(
-                          (option) => !Object.keys(currentBookingLimits).includes(option.value)
-                        )}
-                        isSearchable={false}
-                        defaultValue={BOOKING_LIMIT_OPTIONS.find((option) => option.value === key)}
-                        onChange={(val) => {
-                          const current = currentBookingLimits;
-                          const currentValue = watchBookingLimits[bookingLimitKey];
+                    <IntervalLimitItem
+                      key={key}
+                      limitKey={limitKey}
+                      step={step}
+                      value={value}
+                      textFieldSuffix={textFieldSuffix}
+                      hasDeleteButton={Object.keys(currentIntervalLimits).length > 1}
+                      selectOptions={INTERVAL_LIMIT_OPTIONS.filter(
+                        (option) => !Object.keys(currentIntervalLimits).includes(option.value)
+                      )}
+                      onLimitChange={(intervalLimitKey, val) =>
+                        // @ts-expect-error FIXME Fix these typings
+                        setValue(`${propertyName}.${intervalLimitKey}`, val)
+                      }
+                      onDelete={(intervalLimitKey) => {
+                        const current = currentIntervalLimits;
+                        delete current[intervalLimitKey];
+                        onChange(current);
+                      }}
+                      onIntervalSelect={(interval) => {
+                        const current = currentIntervalLimits;
+                        const currentValue = watchIntervalLimits[limitKey];
 
-                          // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
-                          delete current[bookingLimitKey];
-                          const newData = {
-                            ...current,
-                            // Set limit to new selected value (in the example above this means we set the limit to per_week here).
-                            [val?.value as BookingLimitsKey]: currentValue,
-                          };
-                          onChange(newData);
-                        }}
-                      />
-                      <Button
-                        variant="icon"
-                        StartIcon={FiTrash}
-                        color="destructive"
-                        onClick={() => {
-                          const current = currentBookingLimits;
-                          delete current[key as BookingLimitsKey];
-                          onChange(current);
-                        }}
-                      />
-                    </div>
+                        // Removes limit from previous selected value (eg when changed from per_week to per_month, we unset per_week here)
+                        delete current[limitKey];
+                        const newData = {
+                          ...current,
+                          // Set limit to new selected value (in the example above this means we set the limit to per_week here).
+                          [interval?.value as IntervalLimitsKey]: currentValue,
+                        };
+                        onChange(newData);
+                      }}
+                    />
                   );
                 })}
-            {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
-              <Button
-                color="minimal"
-                StartIcon={FiPlus}
-                onClick={() => {
-                  if (!currentBookingLimits || !watchBookingLimits) return;
-                  const currentKeys = Object.keys(watchBookingLimits);
-
-                  const rest = Object.values(BOOKING_LIMIT_OPTIONS).filter(
-                    (option) => !currentKeys.includes(option.value)
-                  );
-                  if (!rest || !currentKeys) return;
-                  //currentBookingLimits is always defined so can be casted
-
-                  setValue("bookingLimits", {
-                    ...watchBookingLimits,
-                    [rest[0].value]: 1,
-                  });
-                }}>
+            {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
+              <Button color="minimal" StartIcon={FiPlus} onClick={addLimit}>
                 {t("add_limit")}
               </Button>
             )}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -4,7 +4,7 @@ import { isValidPhoneNumber } from "libphonenumber-js";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm, useFormContext } from "react-hook-form";
 import type { MultiValue } from "react-select";
 import { z } from "zod";
@@ -16,7 +16,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { slugify } from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
-import { Button, Editor, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import {
+  Button,
+  Label,
+  Select,
+  SettingsToggle,
+  Skeleton,
+  TextField,
+  Editor,
+  SkeletonContainer,
+  SkeletonText,
+} from "@calcom/ui";
 import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -35,14 +45,31 @@ const getLocationFromType = (
   }
 };
 
-const getDefaultLocationValue = (options: EventTypeSetupProps["locationOptions"], type: string) => {
-  for (const locationType of options) {
-    for (const location of locationType.options) {
-      if (location.value === type && location.disabled === false) {
-        return location;
-      }
-    }
-  }
+interface DescriptionEditorProps {
+  description?: string | null;
+}
+
+const DescriptionEditor = (props: DescriptionEditorProps) => {
+  const formMethods = useFormContext<FormValues>();
+  const [mounted, setIsMounted] = useState(false);
+  const { t } = useLocale();
+  const { description } = props;
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return mounted ? (
+    <Editor
+      getText={() => md.render(formMethods.getValues("description") || description || "")}
+      setText={(value: string) => formMethods.setValue("description", turndown(value))}
+      excludedToolbarItems={["blockType"]}
+      placeholder={t("quick_video_meeting")}
+    />
+  ) : (
+    <SkeletonContainer>
+      <SkeletonText className="block h-24 w-full" />
+    </SkeletonContainer>
+  );
 };
 
 export const EventSetupTab = (
@@ -53,12 +80,16 @@ export const EventSetupTab = (
 ) => {
   const { t } = useLocale();
   const formMethods = useFormContext<FormValues>();
-  const { eventType, locationOptions, team, destinationCalendar } = props;
+  const { eventType, team, destinationCalendar } = props;
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
   const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
 
+  const locationOptions = props.locationOptions.filter((option) => {
+    return !team ? option.label !== "Conferencing" : true;
+  });
+
   const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
     value: mins,
     label: t("multiple_duration_mins", { count: mins }),
@@ -198,8 +229,16 @@ export const EventSetupTab = (
 
               return (
                 <li
+                  onClick={() => {
+                    locationFormMethods.setValue("locationType", location.type);
+                    locationFormMethods.unregister("locationLink");
+                    locationFormMethods.unregister("locationAddress");
+                    locationFormMethods.unregister("locationPhoneNumber");
+                    setEditingLocationType(location.type);
+                    openLocationModal(location.type);
+                  }}
                   key={`${location.type}${index}`}
-                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2">
+                  className="mb-2 rounded-md border border-gray-300 py-1.5 px-2 hover:cursor-pointer">
                   <div className="flex items-center justify-between">
                     <div className="flex items-center">
                       <img
@@ -279,12 +318,7 @@ export const EventSetupTab = (
         />
         <div>
           <Label>{t("description")}</Label>
-          <Editor
-            getText={() => md.render(formMethods.getValues("description") || eventType.description || "")}
-            setText={(value: string) => formMethods.setValue("description", turndown(value))}
-            excludedToolbarItems={["blockType"]}
-            placeholder={t("quick_video_meeting")}
-          />
+          <DescriptionEditor description={eventType?.description} />
         </div>
         <TextField
           required
@@ -401,6 +435,7 @@ export const EventSetupTab = (
 
       {/* We portal this modal so we can submit the form inside. Otherwise we get issues submitting two forms at once  */}
       <EditLocationDialog
+        isTeamEvent={!!team}
         isOpenDialog={showLocationModal}
         setShowLocationModal={setShowLocationModal}
         saveLocation={saveLocation}

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

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

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -247,7 +247,7 @@ function EventTypeSingleLayout({
               tooltip={t("embed")}
             />
             <Button
-              color="secondary"
+              color="destructive"
               variant="icon"
               StartIcon={FiTrash}
               tooltip={t("delete")}

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

@@ -1,9 +1,8 @@
+import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 
-import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
-
 interface ICreateEventsOnCalendarSelectProps {
   calendar?: RouterInputs["viewer"]["setDestinationCalendar"] | null;
 }

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

@@ -1,8 +1,11 @@
 import { ArrowRightIcon } from "@heroicons/react/outline";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
+import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
@@ -22,23 +25,30 @@ const UserSettings = (props: IUserSettingsProps) => {
   const { t } = useLocale();
   const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess());
   const telemetry = useTelemetry();
+  const userSettingsSchema = z.object({
+    name: z
+      .string()
+      .min(1)
+      .max(FULL_NAME_LENGTH_MAX_LIMIT, {
+        message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
+      }),
+  });
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm({
+  } = useForm<z.infer<typeof userSettingsSchema>>({
     defaultValues: {
       name: user?.name || "",
     },
     reValidateMode: "onChange",
+    resolver: zodResolver(userSettingsSchema),
   });
 
   useEffect(() => {
     telemetry.event(telemetryEventTypes.onboardingStarted);
   }, [telemetry]);
 
-  const defaultOptions = { required: true, maxLength: 255 };
-
   const utils = trpc.useContext();
   const onSuccess = async () => {
     await utils.viewer.me.invalidate();
@@ -67,7 +77,9 @@ const UserSettings = (props: IUserSettingsProps) => {
             {t("full_name")}
           </label>
           <input
-            {...register("name", defaultOptions)}
+            {...register("name", {
+              required: true,
+            })}
             id="name"
             name="name"
             type="text"
@@ -77,7 +89,7 @@ const UserSettings = (props: IUserSettingsProps) => {
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
-              {t("required")}
+              {errors.name.message}
             </p>
           )}
         </div>

apps/web/components/security/ChangePasswordSection.tsx

@@ -1,7 +1,7 @@
 import type { SyntheticEvent } from "react";
 import { useState } from "react";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form } from "@calcom/ui";
 

apps/web/components/settings/CalendarSwitch.tsx

@@ -75,7 +75,9 @@ export function CalendarSwitch(props: {
       />
       {props.defaultSelected && (
         <Badge variant="gray">
-          <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          <div className="flex">
+            <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          </div>
         </Badge>
       )}
     </div>

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, Label, PasswordField } from "@calcom/ui";
 

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -2,7 +2,7 @@ import type { BaseSyntheticEvent } from "react";
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
-import { ErrorCode } from "@calcom/lib/auth";
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, Form, TextField } from "@calcom/ui";
 

apps/web/components/setup/AdminUser.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 import * as z from "zod";
 
-import { isPasswordValid } from "@calcom/lib/auth";
+import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";

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

@@ -1,14 +1,15 @@
 import Link from "next/link";
-import type { TeamPageProps } from "pages/team/[slug]";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { md } from "@calcom/lib/markdownIt";
+import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
-type TeamType = TeamPageProps["team"];
+type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
-type MemberType = MembersType[number];
+type MemberType = MembersType[number] & { safeBio: string | null };
+
+type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
@@ -30,7 +31,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
               <>
                 <div
                   className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
+                  dangerouslySetInnerHTML={{ __html: member.safeBio || "" }}
                 />
               </>
             ) : (
@@ -43,7 +44,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   );
 };
 
-const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
+const Members = ({ members, teamName }: { members: MemberType[]; teamName: string | null }) => {
   if (!members || members.length === 0) {
     return null;
   }
@@ -57,7 +58,7 @@ const Members = ({ members, teamName }: { members: MembersType; teamName: string
   );
 };
 
-const Team = ({ team }: Omit<TeamPageProps, "trpcState">) => {
+const Team = ({ team }: { team: TeamTypeWithSafeHtml }) => {
   return (
     <div>
       <Members members={team.members} teamName={team.name} />

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

@@ -3,8 +3,7 @@ import { components } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
-
-import Select from "@components/ui/form/Select";
+import { Select } from "@calcom/ui";
 
 export type LocationOption = {
   label: string;
@@ -17,21 +16,11 @@ export type SingleValueLocationOption = SingleValue<LocationOption>;
 
 export type GroupOptionType = GroupBase<LocationOption>;
 
-const OptionWithIcon = ({
-  icon,
-  isSelected,
-  label,
-}: {
-  icon?: string;
-  isSelected?: boolean;
-  label: string;
-}) => {
+const OptionWithIcon = ({ icon, label }: { icon?: string; label: string }) => {
   return (
     <div className="flex items-center gap-3">
       {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
-      <span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
-        {label}
-      </span>
+      <span className={classNames("text-sm font-medium")}>{label}</span>
     </div>
   );
 };
@@ -44,7 +33,7 @@ export default function LocationSelect(props: Props<LocationOption, false, Group
       components={{
         Option: (props) => (
           <components.Option {...props}>
-            <OptionWithIcon icon={props.data.icon} label={props.data.label} isSelected={props.isSelected} />
+            <OptionWithIcon icon={props.data.icon} label={props.data.label} />
           </components.Option>
         ),
         SingleValue: (props) => (

apps/web/lib/app-providers.tsx

@@ -10,6 +10,8 @@ import type { ComponentProps, ReactNode } from "react";
 
 import DynamicHelpscoutProvider from "@calcom/features/ee/support/lib/helpscout/providerDynamic";
 import DynamicIntercomProvider from "@calcom/features/ee/support/lib/intercom/providerDynamic";
+import { FeatureProvider } from "@calcom/features/flags/context/provider";
+import { useFlags } from "@calcom/features/flags/hooks";
 import { trpc } from "@calcom/trpc/react";
 import { MetaProvider } from "@calcom/ui";
 
@@ -58,6 +60,11 @@ const CustomI18nextProvider = (props: AppPropsWithChildren) => {
   return <I18nextAdapter {...passedProps} />;
 };
 
+function FeatureFlagsProvider({ children }: { children: React.ReactNode }) {
+  const flags = useFlags();
+  return <FeatureProvider value={flags}>{children}</FeatureProvider>;
+}
+
 const AppProviders = (props: AppPropsWithChildren) => {
   const session = trpc.viewer.public.session.useQuery().data;
   // No need to have intercom on public pages - Good for Page Performance
@@ -85,7 +92,9 @@ const AppProviders = (props: AppPropsWithChildren) => {
               storageKey={storageKey}
               forcedTheme={forcedTheme}
               attribute="class">
-              <MetaProvider>{props.children}</MetaProvider>
+              <FeatureFlagsProvider>
+                <MetaProvider>{props.children}</MetaProvider>
+              </FeatureFlagsProvider>
             </ThemeProvider>
           </TooltipProvider>
         </CustomI18nextProvider>

apps/web/lib/auth.ts

@@ -1,45 +0,0 @@
-import { IdentityProvider } from "@prisma/client";
-import { compare, hash } from "bcryptjs";
-import type { Session } from "next-auth";
-import type { GetSessionParams } from "next-auth/react";
-import { getSession as getSessionInner } from "next-auth/react";
-
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function hashPassword(password: string) {
-  const hashedPassword = await hash(password, 12);
-  return hashedPassword;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function verifyPassword(password: string, hashedPassword: string) {
-  const isValid = await compare(password, hashedPassword);
-  return isValid;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export async function getSession(options: GetSessionParams): Promise<Session | null> {
-  const session = await getSessionInner(options);
-
-  // that these are equal are ensured in `[...nextauth]`'s callback
-  return session as Session | null;
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export enum ErrorCode {
-  UserNotFound = "user-not-found",
-  IncorrectPassword = "incorrect-password",
-  UserMissingPassword = "missing-password",
-  TwoFactorDisabled = "two-factor-disabled",
-  TwoFactorAlreadyEnabled = "two-factor-already-enabled",
-  TwoFactorSetupRequired = "two-factor-setup-required",
-  SecondFactorRequired = "second-factor-required",
-  IncorrectTwoFactorCode = "incorrect-two-factor-code",
-  InternalServerError = "internal-server-error",
-  NewPasswordMatchesOld = "new-password-matches-old",
-  ThirdPartyIdentityProviderEnabled = "third-party-identity-provider-enabled",
-  RateLimitExceeded = "rate-limit-exceeded",
-  InvalidPassword = "invalid-password",
-}
-/** @deprecated use the one from `@calcom/lib/auth` */
-export const identityProviderNameMap: { [key in IdentityProvider]: string } = {
-  [IdentityProvider.CAL]: "Cal",
-  [IdentityProvider.GOOGLE]: "Google",
-  [IdentityProvider.SAML]: "SAML",
-};

apps/web/lib/core/i18n/i18n.utils.ts

@@ -1,10 +1,10 @@
 import parser from "accept-language-parser";
 import type { IncomingMessage } from "http";
+import type { GetServerSidePropsContext } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import type { Maybe } from "@calcom/trpc/server";
 
-import { getSession } from "@lib/auth";
-
 import { i18n } from "../../../next-i18next.config";
 
 export function getLocaleFromHeaders(req: IncomingMessage): string {
@@ -15,9 +15,13 @@ export function getLocaleFromHeaders(req: IncomingMessage): string {
   return preferredLocale ?? i18n.defaultLocale;
 }
 
-export const getOrSetUserLocaleFromHeaders = async (req: IncomingMessage): Promise<string> => {
-  const prisma = (await import("@calcom/prisma")).default;
-  const session = await getSession({ req });
+export const getOrSetUserLocaleFromHeaders = async (
+  req: GetServerSidePropsContext["req"],
+  res: GetServerSidePropsContext["res"]
+): Promise<string> => {
+  const { default: prisma } = await import("@calcom/prisma");
+
+  const session = await getServerSession({ req, res });
   const preferredLocale = getLocaleFromHeaders(req);
 
   if (session?.user?.id) {

apps/web/lib/getBooking.tsx

@@ -1,9 +1,8 @@
 import type { Prisma, PrismaClient } from "@prisma/client";
 import type { z } from "zod";
 
-import { getBookingResponsesPartialSchema } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
+import { bookingResponsesDbSchema } from "@calcom/features/bookings/lib/getBookingResponsesSchema";
 import slugify from "@calcom/lib/slugify";
-import type { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
 
 type BookingSelect = {
   description: true;
@@ -45,16 +44,14 @@ function getResponsesFromOldBooking(
   };
 }
 
-async function getBooking(
-  prisma: PrismaClient,
-  uid: string,
-  bookingFields: z.infer<typeof eventTypeBookingFields> & z.BRAND<"HAS_SYSTEM_FIELDS">
-) {
+async function getBooking(prisma: PrismaClient, uid: string) {
   const rawBooking = await prisma.booking.findFirst({
     where: {
       uid,
     },
     select: {
+      id: true,
+      uid: true,
       startTime: true,
       description: true,
       customInputs: true,
@@ -65,6 +62,12 @@ async function getBooking(
         select: {
           email: true,
           name: true,
+          bookingSeat: true,
+        },
+      },
+      user: {
+        select: {
+          id: true,
         },
       },
     },
@@ -74,9 +77,7 @@ async function getBooking(
     return rawBooking;
   }
 
-  const booking = getBookingWithResponses(rawBooking, {
-    bookingFields,
-  });
+  const booking = getBookingWithResponses(rawBooking);
 
   if (booking) {
     // @NOTE: had to do this because Server side cant return [Object objects]
@@ -96,16 +97,11 @@ export const getBookingWithResponses = <
     };
   }>
 >(
-  booking: T,
-  eventType: {
-    bookingFields: z.infer<typeof eventTypeBookingFields> & z.BRAND<"HAS_SYSTEM_FIELDS">;
-  }
+  booking: T
 ) => {
   return {
     ...booking,
-    responses: getBookingResponsesPartialSchema({
-      bookingFields: eventType.bookingFields,
-    }).parse(booking.responses || getResponsesFromOldBooking(booking)),
-  };
+    responses: bookingResponsesDbSchema.parse(booking.responses || getResponsesFromOldBooking(booking)),
+  } as Omit<T, "responses"> & { responses: z.infer<typeof bookingResponsesDbSchema> };
 };
 export default getBooking;

apps/web/lib/parseDate.ts

@@ -3,21 +3,22 @@ import { RRule } from "rrule";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
+import type { TimeFormat } from "@calcom/lib/timeFormat";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 
 import { parseZone } from "./parseZone";
 
-const processDate = (date: string | null | Dayjs, i18n: I18n) => {
+const processDate = (date: string | null | Dayjs, i18n: I18n, selectedTimeFormat?: TimeFormat) => {
   const parsedZone = parseZone(date);
   if (!parsedZone?.isValid()) return "Invalid date";
-  const formattedTime = parsedZone?.format(detectBrowserTimeFormat);
+  const formattedTime = parsedZone?.format(selectedTimeFormat || detectBrowserTimeFormat);
   return formattedTime + ", " + dayjs(date).toDate().toLocaleString(i18n.language, { dateStyle: "full" });
 };
 
-export const parseDate = (date: string | null | Dayjs, i18n: I18n) => {
+export const parseDate = (date: string | null | Dayjs, i18n: I18n, selectedTimeFormat?: TimeFormat) => {
   if (!date) return ["No date"];
-  return processDate(date, i18n);
+  return processDate(date, i18n, selectedTimeFormat);
 };
 
 export const parseRecurringDates = (
@@ -26,11 +27,13 @@ export const parseRecurringDates = (
     timeZone,
     recurringEvent,
     recurringCount,
+    selectedTimeFormat,
   }: {
     startDate: string | null | Dayjs;
     timeZone?: string;
     recurringEvent: RecurringEvent | null;
     recurringCount: number;
+    selectedTimeFormat?: TimeFormat;
   },
   i18n: I18n
 ): [string[], Date[]] => {
@@ -50,7 +53,7 @@ export const parseRecurringDates = (
   });
   const dateStrings = times.map((t) => {
     // finally; show in local timeZone again
-    return processDate(t.tz(timeZone), i18n);
+    return processDate(t.tz(timeZone), i18n, selectedTimeFormat);
   });
 
   return [dateStrings, times.map((t) => t.toDate())];

apps/web/lib/types/booking.ts

@@ -1,9 +1,3 @@
-import type { Attendee, Booking } from "@prisma/client";
-
-import type { AppsStatus } from "@calcom/types/Calendar";
-
-export type BookingResponse = Booking & {
-  paymentUid?: string;
-  attendees: Attendee[];
-  appsStatus?: AppsStatus[];
-};
+export type BookingResponse = Awaited<
+  ReturnType<typeof import("@calcom/features/bookings/lib/handleNewBooking").default>
+>;

apps/web/next.config.js

@@ -99,6 +99,14 @@ const nextConfig = {
       skipDefaultConversion: true,
       preventFullImport: true,
     },
+    "@calcom/features/insights/components": {
+      transform: "@calcom/features/insights/components/{{member}}",
+      skipDefaultConversion: true,
+      preventFullImport: true,
+    },
+    lodash: {
+      transform: "lodash/{{member}}",
+    },
     // TODO: We need to have all components in `@calcom/ui/components` in order to use this
     // "@calcom/ui": {
     //   transform: "@calcom/ui/components/{{member}}",

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.6.9",
+  "version": "2.7.7",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -11,27 +11,27 @@
     "dx": "yarn dev",
     "test-codegen": "yarn playwright codegen http://localhost:3000",
     "type-check": "tsc --pretty --noEmit",
+    "type-check:ci": "tsc-absolute --pretty --noEmit",
     "build": "next build",
     "start": "next start",
-    "start:bg": "next start &",
     "lint": "eslint . --ignore-path .gitignore",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "lint:report": "eslint . --format json --output-file ../../lint-results/web.json",
     "check-changed-files": "ts-node scripts/ts-check-changed-files.ts"
   },
   "engines": {
-    "node": "16.x || 18.x",
-    "yarn": ">=1.19.0 < 2.0.0"
+    "node": "18",
+    "yarn": "3.4.1"
   },
   "dependencies": {
-    "@boxyhq/saml-jackson": "1.7.1",
+    "@boxyhq/saml-jackson": "1.8.2",
     "@calcom/app-store": "*",
     "@calcom/app-store-cli": "*",
     "@calcom/core": "*",
     "@calcom/dayjs": "*",
-    "@calcom/embed-core": "*",
-    "@calcom/embed-react": "*",
-    "@calcom/embed-snippet": "*",
+    "@calcom/embed-core": "workspace:*",
+    "@calcom/embed-react": "workspace:*",
+    "@calcom/embed-snippet": "workspace:*",
     "@calcom/features": "*",
     "@calcom/lib": "*",
     "@calcom/prisma": "*",
@@ -61,15 +61,17 @@
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
+    "@tremor/react": "^2.0.0",
     "@types/turndown": "^5.0.1",
     "@vercel/edge-config": "^0.1.1",
     "@vercel/edge-functions-ui": "^0.2.1",
-    "@vercel/og": "^0.0.21",
+    "@vercel/og": "^0.5.0",
     "accept-language-parser": "^1.5.0",
     "async": "^3.2.4",
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
+    "entities": "^4.4.0",
     "eslint-config-next": "^13.2.1",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
@@ -87,7 +89,7 @@
     "micro": "^10.0.1",
     "mime-types": "^2.1.35",
     "next": "^13.2.1",
-    "next-auth": "^4.18.8",
+    "next-auth": "^4.20.1",
     "next-axiom": "^0.16.0",
     "next-collect": "^0.2.1",
     "next-i18next": "^11.3.0",
@@ -111,13 +113,14 @@
     "react-multi-email": "^0.5.3",
     "react-phone-number-input": "^3.2.7",
     "react-schemaorg": "^2.0.0",
-    "react-select": "^5.4.0",
-    "react-timezone-select": "^1.3.2",
+    "react-select": "^5.7.0",
+    "react-timezone-select": "^1.4.0",
     "react-use-intercom": "1.5.1",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
     "remark": "^14.0.2",
     "rrule": "^2.7.1",
+    "sanitize-html": "^2.10.0",
     "schema-dts": "^1.1.0",
     "short-uuid": "^4.2.0",
     "strip-markdown": "^5.0.0",
@@ -134,7 +137,7 @@
     "@calcom/config": "*",
     "@calcom/types": "*",
     "@microsoft/microsoft-graph-types-beta": "0.15.0-preview",
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.31.2",
     "@testing-library/react": "^13.3.0",
     "@types/accept-language-parser": "1.5.2",
     "@types/async": "^3.2.15",
@@ -155,6 +158,7 @@
     "@types/react-phone-number-input": "^3.0.14",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
+    "@types/sanitize-html": "^2.9.0",
     "@types/stripe": "^8.0.417",
     "@types/uuid": "8.3.1",
     "autoprefixer": "^10.4.12",
@@ -162,7 +166,6 @@
     "copy-webpack-plugin": "^11.0.0",
     "detect-port": "^1.3.0",
     "env-cmd": "^10.1.0",
-    "eslint": "^8.34.0",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.2",
     "msw": "^0.42.3",

apps/web/pages/404.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon";
+import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
 
 import { ssgInit } from "@server/lib/ssg";
 
@@ -40,6 +40,43 @@ export default function Custom404() {
   const isSubpage = router.asPath.includes("/", 2) || isSuccessPage;
   const isSignup = router.asPath.startsWith("/signup");
   const isCalcom = process.env.NEXT_PUBLIC_WEBAPP_URL === "https://app.cal.com";
+  /**
+   * If we're on 404 and the route is insights it means it is disabled
+   * TODO: Abstract this for all disabled features
+   **/
+  const isInsights = router.asPath.startsWith("/insights");
+  if (isInsights) {
+    return (
+      <>
+        <HeadSeo
+          title="Feature is currently disabled"
+          description={t("404_page_not_found")}
+          nextSeoProps={{
+            nofollow: true,
+            noindex: true,
+          }}
+        />
+        <div className="min-h-screen bg-white px-4" data-testid="404-page">
+          <main className="mx-auto max-w-xl pt-16 pb-6 sm:pt-24">
+            <div className="text-center">
+              <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
+              <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
+                Feature is currently disabled
+              </h1>
+            </div>
+            <div className="mt-12">
+              <div className="mt-8">
+                <Link href="/" className="text-base font-medium text-black hover:text-gray-500">
+                  {t("or_go_back_home")}
+                  <span aria-hidden="true"> &rarr;</span>
+                </Link>
+              </div>
+            </div>
+          </main>
+        </div>
+      </>
+    );
+  }
 
   return (
     <>

apps/web/pages/[user].tsx

@@ -24,7 +24,7 @@ import defaultEvents, {
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { md } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
@@ -147,7 +147,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <>
                   <div
                     className=" dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                    dangerouslySetInnerHTML={{ __html: md.render(user.bio || "") }}
+                    dangerouslySetInnerHTML={{ __html: props.safeBio }}
                   />
                 </>
               )}
@@ -343,6 +343,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const eventTypes = eventTypesRaw.map((eventType) => ({
     ...eventType,
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
+    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   }));
 
   const isSingleUser = users.length === 1;
@@ -352,9 +353,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       })
     : [];
 
+  const safeBio = markdownToSafeHTML(user.bio) || "";
+
   return {
     props: {
       users,
+      safeBio,
       profile,
       user: {
         emailMd5: crypto.createHash("md5").update(user.email).digest("hex"),

apps/web/pages/[user]/[type].tsx

@@ -5,7 +5,7 @@ import type { LocationObject } from "@calcom/app-store/locations";
 import { IS_TEAM_BILLING_ENABLED, WEBAPP_URL } from "@calcom/lib/constants";
 import hasKeyInMetadata from "@calcom/lib/hasKeyInMetadata";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { addListFormatting } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { User } from "@calcom/prisma/client";
 
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -59,7 +59,6 @@ Type.isThemeSupported = true;
 const paramsSchema = z.object({ type: z.string(), user: z.string() });
 async function getUserPageProps(context: GetStaticPropsContext) {
   // load server side dependencies
-  const MarkdownIt = await import("markdown-it").then((mod) => mod.default);
   const prisma = await import("@calcom/prisma").then((mod) => mod.default);
   const { privacyFilteredLocations } = await import("@calcom/app-store/locations");
   const { parseRecurringEvent } = await import("@calcom/lib/isRecurringEvent");
@@ -124,9 +123,6 @@ async function getUserPageProps(context: GetStaticPropsContext) {
       },
     },
   });
-
-  const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
-
   if (!user || !user.eventTypes.length) return { notFound: true };
 
   const [eventType]: ((typeof user.eventTypes)[number] & {
@@ -153,7 +149,7 @@ async function getUserPageProps(context: GetStaticPropsContext) {
     metadata: EventTypeMetaDataSchema.parse(eventType.metadata || {}),
     recurringEvent: parseRecurringEvent(eventType.recurringEvent),
     locations: privacyFilteredLocations(locations),
-    descriptionAsSafeHTML: eventType.description ? addListFormatting(md.render(eventType.description)) : null,
+    descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   });
   // Check if the user you are logging into has any active teams or premium user name
   const hasActiveTeam =

apps/web/pages/[user]/book.tsx

@@ -1,8 +1,10 @@
 import type { GetServerSidePropsContext } from "next";
+import { z } from "zod";
 
 import type { LocationObject } from "@calcom/app-store/locations";
 import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
+import dayjs from "@calcom/dayjs";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseRecurringEvent } from "@calcom/lib";
 import {
@@ -12,15 +14,14 @@ import {
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { bookEventTypeSelect } from "@calcom/prisma";
-import prisma from "@calcom/prisma";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
+import prisma, { bookEventTypeSelect } from "@calcom/prisma";
 import {
   customInputSchema,
   EventTypeMetaDataSchema,
   userMetadata as userMetadataSchema,
 } from "@calcom/prisma/zod-utils";
 
-import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import type { GetBookingType } from "@lib/getBooking";
 import getBooking from "@lib/getBooking";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -70,11 +71,26 @@ export default function Book(props: BookPageProps) {
 
 Book.isThemeSupported = true;
 
+const querySchema = z.object({
+  bookingUid: z.string().optional(),
+  count: z.coerce.number().optional(),
+  embed: z.string().optional(),
+  rescheduleUid: z.string().optional(),
+  slug: z.string().optional(),
+  /** This is the event "type" ID */
+  type: z.coerce.number().optional(),
+  user: z.string(),
+  seatReferenceUid: z.string().optional(),
+  date: z.string().optional(),
+  duration: z.coerce.number().optional(),
+});
+
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
-  const usernameList = getUsernameList(asStringOrThrow(context.query.user as string));
-  const eventTypeSlug = context.query.slug as string;
-  const recurringEventCountQuery = asStringOrNull(context.query.count);
+  const query = querySchema.parse(context.query);
+  const usernameList = getUsernameList(query.user);
+  const eventTypeSlug = query.slug;
+  const recurringEventCountQuery = query.count;
   const users = await prisma.user.findMany({
     where: {
       username: {
@@ -99,24 +115,23 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   if (!users.length) return { notFound: true };
   const [user] = users;
-  const isDynamicGroupBooking = users.length > 1;
+  const isDynamicGroupBooking = users.length > 1 && !!eventTypeSlug;
 
   // Dynamic Group link doesn't need a type but it must have a slug
-  if ((!isDynamicGroupBooking && !context.query.type) || (isDynamicGroupBooking && !eventTypeSlug)) {
+  if ((!isDynamicGroupBooking && !query.type) || (users.length > 1 && !eventTypeSlug)) {
     return { notFound: true };
   }
 
-  const eventTypeRaw =
-    usernameList.length > 1
-      ? getDefaultEvent(eventTypeSlug)
-      : await prisma.eventType.findUnique({
-          where: {
-            id: parseInt(asStringOrThrow(context.query.type)),
-          },
-          select: {
-            ...bookEventTypeSelect,
-          },
-        });
+  const eventTypeRaw = isDynamicGroupBooking
+    ? getDefaultEvent(eventTypeSlug)
+    : await prisma.eventType.findUnique({
+        where: {
+          id: query.type,
+        },
+        select: {
+          ...bookEventTypeSelect,
+        },
+      });
 
   if (!eventTypeRaw) return { notFound: true };
   const eventType = {
@@ -175,25 +190,70 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         slug: u.username,
         theme: u.theme,
       })),
+      descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
     };
   })[0];
 
-  let booking: GetBookingType | null = null;
-  if (context.query.rescheduleUid || context.query.bookingUid) {
-    booking = await getBooking(
-      prisma,
-      context.query.rescheduleUid
-        ? (context.query.rescheduleUid as string)
-        : (context.query.bookingUid as string),
-      eventTypeObject.bookingFields
-    );
+  // If rescheduleUid and event has seats lets convert Uid to bookingUid
+  let rescheduleUid = query.rescheduleUid;
+  const rescheduleEventTypeHasSeats = query.rescheduleUid && eventTypeRaw.seatsPerTimeSlot;
+  let attendeeEmail: string;
+  let bookingUidWithSeats: string | null = null;
+
+  if (rescheduleEventTypeHasSeats) {
+    const bookingSeat = await prisma.bookingSeat.findFirst({
+      where: {
+        referenceUid: query.rescheduleUid,
+      },
+      select: {
+        id: true,
+        attendee: true,
+        booking: {
+          select: {
+            uid: true,
+          },
+        },
+      },
+    });
+    if (bookingSeat) {
+      rescheduleUid = bookingSeat.booking.uid;
+      attendeeEmail = bookingSeat.attendee.email;
+    }
   }
 
-  const dynamicNames = isDynamicGroupBooking
-    ? users.map((user) => {
-        return user.name || "";
-      })
-    : [];
+  if (query.duration) {
+    // If it's not reschedule but event Type has seats we should obtain
+    // the bookingUid regardless and use it to get the booking
+    const currentSeats = await prisma.booking.findFirst({
+      where: {
+        eventTypeId: eventTypeRaw.id,
+        startTime: dayjs(query.date).toISOString(),
+        endTime: dayjs(query.date).add(query.duration, "minutes").toISOString(),
+      },
+      select: {
+        uid: true,
+      },
+    });
+    if (currentSeats && currentSeats) {
+      bookingUidWithSeats = currentSeats.uid;
+    }
+  }
+
+  let booking: GetBookingType | null = null;
+  if (rescheduleUid || query.bookingUid || bookingUidWithSeats) {
+    booking = await getBooking(prisma, rescheduleUid || query.bookingUid || bookingUidWithSeats || "");
+  }
+
+  if (rescheduleEventTypeHasSeats && booking?.attendees && booking?.attendees.length > 0) {
+    const currentAttendee = booking?.attendees.find((attendee) => {
+      return attendee.email === attendeeEmail;
+    });
+    if (currentAttendee) {
+      booking.attendees = [currentAttendee] || [];
+    }
+  }
+
+  const dynamicNames = isDynamicGroupBooking ? users.map((user) => user.name || "") : [];
 
   const profile = isDynamicGroupBooking
     ? {
@@ -203,9 +263,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
         theme: null,
         brandColor: "",
         darkBrandColor: "",
-        allowDynamicBooking: !users.some((user) => {
-          return !user.allowDynamicBooking;
-        }),
+        allowDynamicBooking: !users.some((user) => !user.allowDynamicBooking),
         eventName: getDynamicEventName(dynamicNames, eventTypeSlug),
       }
     : {
@@ -222,23 +280,26 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const recurringEventCount =
     (eventType.recurringEvent?.count &&
       recurringEventCountQuery &&
-      (parseInt(recurringEventCountQuery) <= eventType.recurringEvent.count
-        ? parseInt(recurringEventCountQuery)
+      (recurringEventCountQuery <= eventType.recurringEvent.count
+        ? recurringEventCountQuery
         : eventType.recurringEvent.count)) ||
     null;
 
+  const currentSlotBooking = await getBooking(prisma, bookingUidWithSeats || "");
+
   return {
     props: {
       away: user.away,
       profile,
       eventType: eventTypeObject,
       booking,
+      currentSlotBooking: currentSlotBooking,
       recurringEventCount,
       trpcState: ssr.dehydrate(),
       isDynamicGroupBooking,
       hasHashedBookingLink: false,
       hashedLink: null,
-      isEmbed: typeof context.query.embed === "string",
+      isEmbed: !!query.embed,
     },
   };
 }

apps/web/pages/api/auth/[...nextauth].tsx

@@ -1,659 +1,5 @@
-import type { UserPermissionRole } from "@prisma/client";
-import { IdentityProvider } from "@prisma/client";
-import { readFileSync } from "fs";
-import Handlebars from "handlebars";
-import { SignJWT } from "jose";
-import type { Session } from "next-auth";
 import NextAuth from "next-auth";
-import { encode } from "next-auth/jwt";
-import type { Provider } from "next-auth/providers";
-import CredentialsProvider from "next-auth/providers/credentials";
-import EmailProvider from "next-auth/providers/email";
-import GoogleProvider from "next-auth/providers/google";
-import type { TransportOptions } from "nodemailer";
-import nodemailer from "nodemailer";
-import { authenticator } from "otplib";
-import path from "path";
 
-import checkLicense from "@calcom/features/ee/common/server/checkLicense";
-import ImpersonationProvider from "@calcom/features/ee/impersonation/lib/ImpersonationProvider";
-import jackson from "@calcom/features/ee/sso/lib/jackson";
-import { hostedCal, isSAMLLoginEnabled, clientSecretVerifier } from "@calcom/features/ee/sso/lib/saml";
-import { ErrorCode, isPasswordValid, verifyPassword } from "@calcom/lib/auth";
-import { APP_NAME, IS_TEAM_BILLING_ENABLED, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
-import { symmetricDecrypt } from "@calcom/lib/crypto";
-import { defaultCookies } from "@calcom/lib/default-cookies";
-import { randomString } from "@calcom/lib/random";
-import rateLimit from "@calcom/lib/rateLimit";
-import { serverConfig } from "@calcom/lib/serverConfig";
-import slugify from "@calcom/lib/slugify";
-import prisma from "@calcom/prisma";
-import { teamMetadataSchema, userMetadata } from "@calcom/prisma/zod-utils";
+import { AUTH_OPTIONS } from "@calcom/features/auth/lib/next-auth-options";
 
-import CalComAdapter from "@lib/auth/next-auth-custom-adapter";
-
-import { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants";
-
-const transporter = nodemailer.createTransport<TransportOptions>({
-  ...(serverConfig.transport as TransportOptions),
-} as TransportOptions);
-
-const usernameSlug = (username: string) => slugify(username) + "-" + randomString(6).toLowerCase();
-
-const signJwt = async (payload: { email: string }) => {
-  const secret = new TextEncoder().encode(process.env.CALENDSO_ENCRYPTION_KEY);
-  return new SignJWT(payload)
-    .setProtectedHeader({ alg: "HS256" })
-    .setSubject(payload.email)
-    .setIssuedAt()
-    .setIssuer(WEBSITE_URL)
-    .setAudience(`${WEBSITE_URL}/auth/login`)
-    .setExpirationTime("2m")
-    .sign(secret);
-};
-
-const loginWithTotp = async (user: { email: string }) =>
-  `/auth/login?totp=${await signJwt({ email: user.email })}`;
-
-const providers: Provider[] = [
-  CredentialsProvider({
-    id: "credentials",
-    name: "Cal.com",
-    type: "credentials",
-    credentials: {
-      email: { label: "Email Address", type: "email", placeholder: "john.doe@example.com" },
-      password: { label: "Password", type: "password", placeholder: "Your super secure password" },
-      totpCode: { label: "Two-factor Code", type: "input", placeholder: "Code from authenticator app" },
-    },
-    async authorize(credentials) {
-      if (!credentials) {
-        console.error(`For some reason credentials are missing`);
-        throw new Error(ErrorCode.InternalServerError);
-      }
-
-      const user = await prisma.user.findUnique({
-        where: {
-          email: credentials.email.toLowerCase(),
-        },
-        select: {
-          role: true,
-          id: true,
-          username: true,
-          name: true,
-          email: true,
-          metadata: true,
-          identityProvider: true,
-          password: true,
-          twoFactorEnabled: true,
-          twoFactorSecret: true,
-          teams: {
-            include: {
-              team: true,
-            },
-          },
-        },
-      });
-
-      // Don't leak information about it being username or password that is invalid
-      if (!user) {
-        throw new Error(ErrorCode.IncorrectUsernamePassword);
-      }
-
-      if (user.identityProvider !== IdentityProvider.CAL && !credentials.totpCode) {
-        throw new Error(ErrorCode.ThirdPartyIdentityProviderEnabled);
-      }
-
-      if (!user.password && user.identityProvider !== IdentityProvider.CAL && !credentials.totpCode) {
-        throw new Error(ErrorCode.IncorrectUsernamePassword);
-      }
-
-      if (user.password) {
-        const isCorrectPassword = await verifyPassword(credentials.password, user.password);
-        if (!isCorrectPassword) {
-          throw new Error(ErrorCode.IncorrectUsernamePassword);
-        }
-      }
-
-      if (user.twoFactorEnabled) {
-        if (!credentials.totpCode) {
-          throw new Error(ErrorCode.SecondFactorRequired);
-        }
-
-        if (!user.twoFactorSecret) {
-          console.error(`Two factor is enabled for user ${user.id} but they have no secret`);
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        if (!process.env.CALENDSO_ENCRYPTION_KEY) {
-          console.error(`"Missing encryption key; cannot proceed with two factor login."`);
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        const secret = symmetricDecrypt(user.twoFactorSecret, process.env.CALENDSO_ENCRYPTION_KEY);
-        if (secret.length !== 32) {
-          console.error(
-            `Two factor secret decryption failed. Expected key with length 32 but got ${secret.length}`
-          );
-          throw new Error(ErrorCode.InternalServerError);
-        }
-
-        const isValidToken = authenticator.check(credentials.totpCode, secret);
-        if (!isValidToken) {
-          throw new Error(ErrorCode.IncorrectTwoFactorCode);
-        }
-      }
-
-      const limiter = rateLimit({
-        intervalInMs: 60 * 1000, // 1 minute
-      });
-      await limiter.check(10, user.email); // 10 requests per minute
-      // Check if the user you are logging into has any active teams
-      const hasActiveTeams =
-        user.teams.filter((m: { team: { metadata: unknown } }) => {
-          if (!IS_TEAM_BILLING_ENABLED) return true;
-          const metadata = teamMetadataSchema.safeParse(m.team.metadata);
-          if (metadata.success && metadata.data?.subscriptionId) return true;
-          return false;
-        }).length > 0;
-
-      // authentication success- but does it meet the minimum password requirements?
-      if (user.role === "ADMIN" && !isPasswordValid(credentials.password, false, true)) {
-        return {
-          id: user.id,
-          username: user.username,
-          email: user.email,
-          name: user.name,
-          role: "INACTIVE_ADMIN",
-          belongsToActiveTeam: hasActiveTeams,
-        };
-      }
-
-      return {
-        id: user.id,
-        username: user.username,
-        email: user.email,
-        name: user.name,
-        role: user.role,
-        belongsToActiveTeam: hasActiveTeams,
-      };
-    },
-  }),
-  ImpersonationProvider,
-];
-
-if (IS_GOOGLE_LOGIN_ENABLED) {
-  providers.push(
-    GoogleProvider({
-      clientId: GOOGLE_CLIENT_ID,
-      clientSecret: GOOGLE_CLIENT_SECRET,
-      allowDangerousEmailAccountLinking: true,
-    })
-  );
-}
-
-if (isSAMLLoginEnabled) {
-  providers.push({
-    id: "saml",
-    name: "BoxyHQ",
-    type: "oauth",
-    version: "2.0",
-    checks: ["pkce", "state"],
-    authorization: {
-      url: `${WEBAPP_URL}/api/auth/saml/authorize`,
-      params: {
-        scope: "",
-        response_type: "code",
-        provider: "saml",
-      },
-    },
-    token: {
-      url: `${WEBAPP_URL}/api/auth/saml/token`,
-      params: { grant_type: "authorization_code" },
-    },
-    userinfo: `${WEBAPP_URL}/api/auth/saml/userinfo`,
-    profile: (profile) => {
-      return {
-        id: profile.id || "",
-        firstName: profile.firstName || "",
-        lastName: profile.lastName || "",
-        email: profile.email || "",
-        name: `${profile.firstName || ""} ${profile.lastName || ""}`.trim(),
-        email_verified: true,
-      };
-    },
-    options: {
-      clientId: "dummy",
-      clientSecret: clientSecretVerifier,
-    },
-    allowDangerousEmailAccountLinking: true,
-  });
-
-  // Idp initiated login
-  providers.push(
-    CredentialsProvider({
-      id: "saml-idp",
-      name: "IdP Login",
-      credentials: {
-        code: {},
-      },
-      async authorize(credentials) {
-        if (!credentials) {
-          return null;
-        }
-
-        const { code } = credentials;
-
-        if (!code) {
-          return null;
-        }
-
-        const { oauthController } = await jackson();
-
-        // Fetch access token
-        const { access_token } = await oauthController.token({
-          code,
-          grant_type: "authorization_code",
-          redirect_uri: `${process.env.NEXTAUTH_URL}`,
-          client_id: "dummy",
-          client_secret: clientSecretVerifier,
-        });
-
-        if (!access_token) {
-          return null;
-        }
-
-        // Fetch user info
-        const userInfo = await oauthController.userInfo(access_token);
-
-        if (!userInfo) {
-          return null;
-        }
-
-        const { id, firstName, lastName, email } = userInfo;
-
-        return {
-          id: id as unknown as number,
-          firstName,
-          lastName,
-          email,
-          name: `${firstName} ${lastName}`.trim(),
-          email_verified: true,
-        };
-      },
-    })
-  );
-}
-
-if (true) {
-  const emailsDir = path.resolve(process.cwd(), "..", "..", "packages/emails", "templates");
-  providers.push(
-    EmailProvider({
-      type: "email",
-      maxAge: 10 * 60 * 60, // Magic links are valid for 10 min only
-      // Here we setup the sendVerificationRequest that calls the email template with the identifier (email) and token to verify.
-      sendVerificationRequest: ({ identifier, url }) => {
-        const originalUrl = new URL(url);
-        const webappUrl = new URL(WEBAPP_URL);
-        if (originalUrl.origin !== webappUrl.origin) {
-          url = url.replace(originalUrl.origin, webappUrl.origin);
-        }
-        const emailFile = readFileSync(path.join(emailsDir, "confirm-email.html"), {
-          encoding: "utf8",
-        });
-        const emailTemplate = Handlebars.compile(emailFile);
-        transporter.sendMail({
-          from: `${process.env.EMAIL_FROM}` || APP_NAME,
-          to: identifier,
-          subject: "Your sign-in link for " + APP_NAME,
-          html: emailTemplate({
-            base_url: WEBAPP_URL,
-            signin_url: url,
-            email: identifier,
-          }),
-        });
-      },
-    })
-  );
-}
-
-function isNumber(n: string) {
-  return !isNaN(parseFloat(n)) && !isNaN(+n);
-}
-
-const calcomAdapter = CalComAdapter(prisma);
-
-export default NextAuth({
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  adapter: calcomAdapter,
-  session: {
-    strategy: "jwt",
-  },
-  jwt: {
-    // decorate the native JWT encode function
-    // Impl. detail: We don't pass through as this function is called with encode/decode functions.
-    encode: async ({ token, maxAge, secret }) => {
-      if (token?.sub && isNumber(token.sub)) {
-        const user = await prisma.user.findFirst({
-          where: { id: Number(token.sub) },
-          select: { metadata: true },
-        });
-        // if no user is found, we still don't want to crash here.
-        if (user) {
-          const metadata = userMetadata.parse(user.metadata);
-          if (metadata?.sessionTimeout) {
-            maxAge = metadata.sessionTimeout * 60;
-          }
-        }
-      }
-      return encode({ secret, token, maxAge });
-    },
-  },
-  cookies: defaultCookies(WEBAPP_URL?.startsWith("https://")),
-  pages: {
-    signIn: "/auth/login",
-    signOut: "/auth/logout",
-    error: "/auth/error", // Error code passed in query string as ?error=
-    verifyRequest: "/auth/verify",
-    // newUser: "/auth/new", // New users will be directed here on first sign in (leave the property out if not of interest)
-  },
-  providers,
-  callbacks: {
-    async jwt({ token, user, account }) {
-      const autoMergeIdentities = async () => {
-        const existingUser = await prisma.user.findFirst({
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          where: { email: token.email! },
-          select: {
-            id: true,
-            username: true,
-            name: true,
-            email: true,
-            role: true,
-          },
-        });
-
-        if (!existingUser) {
-          return token;
-        }
-
-        return {
-          ...existingUser,
-          ...token,
-        };
-      };
-      if (!user) {
-        return await autoMergeIdentities();
-      }
-      if (!account) {
-        return token;
-      }
-      if (account.type === "credentials") {
-        // return token if credentials,saml-idp
-        if (account.provider === "saml-idp") {
-          return token;
-        }
-        // any other credentials, add user info
-        return {
-          ...token,
-          id: user.id,
-          name: user.name,
-          username: user.username,
-          email: user.email,
-          role: user.role,
-          impersonatedByUID: user?.impersonatedByUID,
-          belongsToActiveTeam: user?.belongsToActiveTeam,
-        };
-      }
-
-      // The arguments above are from the provider so we need to look up the
-      // user based on those values in order to construct a JWT.
-      if (account.type === "oauth") {
-        if (!account.provider || !account.providerAccountId) {
-          return token;
-        }
-        const idP = account.provider === "saml" ? IdentityProvider.SAML : IdentityProvider.GOOGLE;
-
-        const existingUser = await prisma.user.findFirst({
-          where: {
-            AND: [
-              {
-                identityProvider: idP,
-              },
-              {
-                identityProviderId: account.providerAccountId as string,
-              },
-            ],
-          },
-        });
-
-        if (!existingUser) {
-          return await autoMergeIdentities();
-        }
-
-        return {
-          ...token,
-          id: existingUser.id,
-          name: existingUser.name,
-          username: existingUser.username,
-          email: existingUser.email,
-          role: existingUser.role,
-          impersonatedByUID: token.impersonatedByUID as number,
-          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
-        };
-      }
-
-      return token;
-    },
-    async session({ session, token }) {
-      const hasValidLicense = await checkLicense(prisma);
-      const calendsoSession: Session = {
-        ...session,
-        hasValidLicense,
-        user: {
-          ...session.user,
-          id: token.id as number,
-          name: token.name,
-          username: token.username as string,
-          role: token.role as UserPermissionRole,
-          impersonatedByUID: token.impersonatedByUID as number,
-          belongsToActiveTeam: token?.belongsToActiveTeam as boolean,
-        },
-      };
-      return calendsoSession;
-    },
-    async signIn(params) {
-      const { user, account, profile } = params;
-
-      if (account?.provider === "email") {
-        return true;
-      }
-
-      // In this case we've already verified the credentials in the authorize
-      // callback so we can sign the user in.
-      // Only if provider is not saml-idp
-      if (account?.provider !== "saml-idp") {
-        if (account?.type === "credentials") {
-          return true;
-        }
-
-        if (account?.type !== "oauth") {
-          return false;
-        }
-      }
-
-      if (!user.email) {
-        return false;
-      }
-
-      if (!user.name) {
-        return false;
-      }
-
-      if (account?.provider) {
-        let idP: IdentityProvider = IdentityProvider.GOOGLE;
-        if (account.provider === "saml" || account.provider === "saml-idp") {
-          idP = IdentityProvider.SAML;
-        }
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore-error TODO validate email_verified key on profile
-        user.email_verified = user.email_verified || !!user.emailVerified || profile.email_verified;
-
-        if (!user.email_verified) {
-          return "/auth/error?error=unverified-email";
-        }
-
-        // Only google oauth on this path
-        const existingUser = await prisma.user.findFirst({
-          include: {
-            accounts: {
-              where: {
-                provider: idP,
-              },
-            },
-          },
-          where: {
-            identityProvider: idP as IdentityProvider,
-            identityProviderId: account.providerAccountId,
-          },
-        });
-
-        if (existingUser) {
-          // In this case there's an existing user and their email address
-          // hasn't changed since they last logged in.
-          if (existingUser.email === user.email) {
-            try {
-              // If old user without Account entry we link their google account
-              if (existingUser.accounts.length === 0) {
-                const linkAccountWithUserData = { ...account, userId: existingUser.id };
-                await calcomAdapter.linkAccount(linkAccountWithUserData);
-              }
-            } catch (error) {
-              if (error instanceof Error) {
-                console.error("Error while linking account of already existing user");
-              }
-            }
-            if (existingUser.twoFactorEnabled) {
-              return loginWithTotp(existingUser);
-            } else {
-              return true;
-            }
-          }
-
-          // If the email address doesn't match, check if an account already exists
-          // with the new email address. If it does, for now we return an error. If
-          // not, update the email of their account and log them in.
-          const userWithNewEmail = await prisma.user.findFirst({
-            where: { email: user.email },
-          });
-
-          if (!userWithNewEmail) {
-            await prisma.user.update({ where: { id: existingUser.id }, data: { email: user.email } });
-            if (existingUser.twoFactorEnabled) {
-              return loginWithTotp(existingUser);
-            } else {
-              return true;
-            }
-          } else {
-            return "/auth/error?error=new-email-conflict";
-          }
-        }
-
-        // If there's no existing user for this identity provider and id, create
-        // a new account. If an account already exists with the incoming email
-        // address return an error for now.
-        const existingUserWithEmail = await prisma.user.findFirst({
-          where: { email: user.email },
-        });
-
-        if (existingUserWithEmail) {
-          // if self-hosted then we can allow auto-merge of identity providers if email is verified
-          if (!hostedCal && existingUserWithEmail.emailVerified) {
-            if (existingUserWithEmail.twoFactorEnabled) {
-              return loginWithTotp(existingUserWithEmail);
-            } else {
-              return true;
-            }
-          }
-
-          // check if user was invited
-          if (
-            !existingUserWithEmail.password &&
-            !existingUserWithEmail.emailVerified &&
-            !existingUserWithEmail.username
-          ) {
-            await prisma.user.update({
-              where: { email: user.email },
-              data: {
-                // Slugify the incoming name and append a few random characters to
-                // prevent conflicts for users with the same name.
-                username: usernameSlug(user.name),
-                emailVerified: new Date(Date.now()),
-                name: user.name,
-                identityProvider: idP,
-                identityProviderId: String(user.id),
-              },
-            });
-
-            if (existingUserWithEmail.twoFactorEnabled) {
-              return loginWithTotp(existingUserWithEmail);
-            } else {
-              return true;
-            }
-          }
-
-          // User signs up with email/password and then tries to login with Google/SAML using the same email
-          if (
-            existingUserWithEmail.identityProvider === IdentityProvider.CAL &&
-            (idP === IdentityProvider.GOOGLE || idP === IdentityProvider.SAML)
-          ) {
-            await prisma.user.update({
-              where: { email: existingUserWithEmail.email },
-              data: { password: null },
-            });
-            if (existingUserWithEmail.twoFactorEnabled) {
-              return loginWithTotp(existingUserWithEmail);
-            } else {
-              return true;
-            }
-          } else if (existingUserWithEmail.identityProvider === IdentityProvider.CAL) {
-            return "/auth/error?error=use-password-login";
-          }
-
-          return "/auth/error?error=use-identity-login";
-        }
-
-        const newUser = await prisma.user.create({
-          data: {
-            // Slugify the incoming name and append a few random characters to
-            // prevent conflicts for users with the same name.
-            username: usernameSlug(user.name),
-            emailVerified: new Date(Date.now()),
-            name: user.name,
-            email: user.email,
-            identityProvider: idP,
-            identityProviderId: String(user.id),
-          },
-        });
-
-        const linkAccountNewUserData = { ...account, userId: newUser.id };
-        await calcomAdapter.linkAccount(linkAccountNewUserData);
-
-        if (account.twoFactorEnabled) {
-          return loginWithTotp(newUser);
-        } else {
-          return true;
-        }
-      }
-
-      return false;
-    },
-    async redirect({ url, baseUrl }) {
-      // Allows relative callback URLs
-      if (url.startsWith("/")) return `${baseUrl}${url}`;
-      // Allows callback URLs on the same domain
-      else if (new URL(url).hostname === new URL(WEBAPP_URL).hostname) return url;
-      return baseUrl;
-    },
-  },
-});
+export default NextAuth(AUTH_OPTIONS);

apps/web/pages/api/auth/changepw.ts

@@ -1,14 +1,14 @@
 import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import prisma from "@calcom/prisma";
 
-import { getSession } from "@lib/auth";
-
-import { ErrorCode, hashPassword, verifyPassword } from "../../../lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getSession({ req: req });
+  const session = await getServerSession({ req, res });
 
   if (!session || !session.user || !session.user.email) {
     res.status(401).json({ message: "Not authenticated" });

apps/web/pages/api/auth/forgot-password.ts

@@ -1,14 +1,31 @@
 import type { ResetPasswordRequest } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
 import { sendPasswordResetEmail } from "@calcom/emails";
 import { PASSWORD_RESET_EXPIRY_HOURS } from "@calcom/emails/templates/forgot-password-email";
+import rateLimit from "@calcom/lib/rateLimit";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma from "@calcom/prisma";
 
+const limiter = rateLimit({
+  intervalInMs: 60 * 1000, // 1 minute
+});
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const t = await getTranslation(req.body.language ?? "en", "common");
+  const email = z
+    .string()
+    .email()
+    .transform((val) => val.toLowerCase())
+    .parse(req.body?.email);
+
+  const { isRateLimited } = limiter.check(10, email); // 10 requests per minute
+
+  if (isRateLimited) {
+    return res.status(429).json({ message: "Too Many Requests." });
+  }
 
   if (req.method !== "POST") {
     return res.status(405).end();
@@ -17,7 +34,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   try {
     const maybeUser = await prisma.user.findUnique({
       where: {
-        email: req.body?.email?.toLowerCase(),
+        email,
       },
       select: {
         name: true,

apps/web/pages/api/auth/reset-password.ts

@@ -1,9 +1,8 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
 import prisma from "@calcom/prisma";
 
-import { hashPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(400).json({ message: "" });

apps/web/pages/api/auth/setup.ts

@@ -2,8 +2,8 @@ import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import z from "zod";
 
-import { isPasswordValid } from "@calcom/lib/auth";
-import { hashPassword } from "@calcom/lib/auth";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultHandler, defaultResponder } from "@calcom/lib/server";
 import slugify from "@calcom/lib/slugify";

apps/web/pages/api/auth/signup.ts

@@ -1,7 +1,7 @@
 import { IdentityProvider } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { hashPassword } from "@calcom/lib/auth";
+import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
 import slugify from "@calcom/lib/slugify";
 import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
 import prisma from "@calcom/prisma";

apps/web/pages/api/auth/two-factor/totp/disable.ts

@@ -1,17 +1,18 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession, verifyPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/auth/two-factor/totp/enable.ts

@@ -1,17 +1,17 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { symmetricDecrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/auth/two-factor/totp/setup.ts

@@ -3,17 +3,18 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { authenticator } from "otplib";
 import qrcode from "qrcode";
 
+import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { verifyPassword } from "@calcom/features/auth/lib/verifyPassword";
 import { symmetricEncrypt } from "@calcom/lib/crypto";
 import prisma from "@calcom/prisma";
 
-import { ErrorCode, getSession, verifyPassword } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return res.status(405).json({ message: "Method not allowed" });
   }
 
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) {
     return res.status(401).json({ message: "Not authenticated" });
   }

apps/web/pages/api/availability/calendar.ts

@@ -1,14 +1,13 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 import { getCalendarCredentials, getConnectedCalendars } from "@calcom/core/CalendarManager";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import notEmpty from "@calcom/lib/notEmpty";
 import { revalidateCalendarCache } from "@calcom/lib/server/revalidateCalendarCache";
 import prisma from "@calcom/prisma";
 
-import { getSession } from "@lib/auth";
-
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
 
   if (!session?.user?.id) {
     res.status(401).json({ message: "Not authenticated" });

apps/web/pages/api/book/event.ts

@@ -1,11 +1,11 @@
-import type { NextApiRequest } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
-import { getSession } from "@calcom/lib/auth";
 import { defaultResponder } from "@calcom/lib/server";
 
-async function handler(req: NextApiRequest & { userId?: number }) {
-  const session = await getSession({ req });
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
   const booking = await handleNewBooking(req, {

apps/web/pages/api/cancel.ts

@@ -1,11 +1,11 @@
-import type { NextApiRequest } from "next";
+import type { NextApiRequest, NextApiResponse } from "next";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleCancelBooking from "@calcom/features/bookings/lib/handleCancelBooking";
-import { getSession } from "@calcom/lib/auth";
 import { defaultResponder, defaultHandler } from "@calcom/lib/server";
 
-async function handler(req: NextApiRequest & { userId?: number }) {
-  const session = await getSession({ req });
+async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const session = await getServerSession({ req, res });
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
   return await handleCancelBooking(req);

apps/web/pages/api/cron/downgradeUsers.ts

@@ -1,4 +1,12 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { updateQuantitySubscriptionFromStripe } from "@calcom/features/ee/teams/lib/payments";
+import prisma from "@calcom/prisma";
+
+const querySchema = z.object({
+  page: z.coerce.number().min(0).optional().default(0),
+});
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const apiKey = req.headers.authorization || req.query.apiKey;
@@ -11,10 +19,35 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return;
   }
 
-  /**
-   * TODO:
-   * Remove this endpoint
-   */
+  const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+  const pageSize = 90; // Adjust this value based on the total number of teams and the available processing time
+  let { page: pageNumber } = querySchema.parse(req.query);
+
+  while (true) {
+    const teams = await prisma.team.findMany({
+      where: {
+        slug: {
+          not: null,
+        },
+      },
+      select: {
+        id: true,
+      },
+      skip: pageNumber * pageSize,
+      take: pageSize,
+    });
+
+    if (teams.length === 0) {
+      break;
+    }
+
+    for (const team of teams) {
+      await updateQuantitySubscriptionFromStripe(team.id);
+      await delay(100); // Adjust the delay as needed to avoid rate limiting
+    }
+
+    pageNumber++;
+  }
 
   res.json({ ok: true });
 }

apps/web/pages/api/email.ts

@@ -60,7 +60,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   res.setHeader("Content-Type", "text/html");
   res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate");
   res.write(
-    renderEmail("OrganizerScheduledEmail", {
+    renderEmail("OrganizerRequestEmail", {
       calEvent: evt,
       attendee: evt.organizer,
     })

apps/web/pages/api/integrations/[...args].ts

@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import type { Session } from "next-auth";
 
 import getInstalledAppPath from "@calcom/app-store/_utils/getInstalledAppPath";
-import { getSession } from "@calcom/lib/auth";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
 import { revalidateCalendarCache } from "@calcom/lib/server/revalidateCalendarCache";
 import prisma from "@calcom/prisma";
@@ -42,7 +42,7 @@ const defaultIntegrationAddHandler = async ({
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   // Check that user is authenticated
-  req.session = await getSession({ req });
+  req.session = await getServerSession({ req, res });
 
   const { args } = req.query;
 

apps/web/pages/api/me.ts

@@ -1,6 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { performance } from "@calcom/lib/server/perfObserver";
 
 let isCold = true;
@@ -9,7 +9,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const prePrismaDate = performance.now();
   const prisma = (await import("@calcom/prisma")).default;
   const preSessionDate = performance.now();
-  const session = await getSession({ req });
+  const session = await getServerSession({ req, res });
   if (!session) return res.status(409).json({ message: "Unauthorized" });
   const preUserDate = performance.now();
   const user = await prisma.user.findUnique({ where: { id: session.user.id } });

apps/web/pages/api/social/og/image.tsx

@@ -1,11 +1,10 @@
 import { ImageResponse } from "@vercel/og";
 import type { NextApiRequest } from "next";
-import { remark } from "remark";
 import type { SatoriOptions } from "satori";
-import strip from "strip-markdown";
 import { z } from "zod";
 
 import { Meeting, App, Generic } from "@calcom/lib/OgImages";
+import { md } from "@calcom/lib/markdownIt";
 
 const calFont = fetch(new URL("../../../../public/fonts/cal.ttf", import.meta.url)).then((res) =>
   res.arrayBuffer()
@@ -75,10 +74,13 @@ export default async function handler(req: NextApiRequest) {
         meetingImage: searchParams.get("meetingImage"),
         imageType,
       });
+
+      const title_ = md.render(title).replace(/(<([^>]+)>)/gi, "");
+
       const img = new ImageResponse(
         (
           <Meeting
-            title={title}
+            title={title_}
             profile={{ name: meetingProfileName, image: meetingImage }}
             users={names.map((name, index) => ({ name, username: usernames[index] }))}
           />
@@ -86,7 +88,7 @@ export default async function handler(req: NextApiRequest) {
         ogConfig
       ) as { body: Buffer };
 
-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
     }
     case "app": {
       const { name, description, slug } = appSchema.parse({
@@ -99,7 +101,7 @@ export default async function handler(req: NextApiRequest) {
         body: Buffer;
       };
 
-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
     }
 
     case "generic": {
@@ -108,12 +110,12 @@ export default async function handler(req: NextApiRequest) {
         description: searchParams.get("description"),
         imageType,
       });
-      const description_ = await (await remark().use(strip).process(description)).toString();
-      const img = new ImageResponse(<Generic title={title} description={description_} />, ogConfig) as {
+
+      const img = new ImageResponse(<Generic title={title} description={description} />, ogConfig) as {
         body: Buffer;
       };
 
-      return new Response(img.body, { status: 200 });
+      return new Response(img.body, { status: 200, headers: { "Content-Type": "image/png" } });
     }
 
     default:

apps/web/pages/api/trpc/[trpc].ts

@@ -3,8 +3,9 @@
  */
 import { z } from "zod";
 
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import * as trpcNext from "@calcom/trpc/server/adapters/next";
-import { createContext } from "@calcom/trpc/server/createContext";
+import { createContext as createTrpcContext } from "@calcom/trpc/server/createContext";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
 export default trpcNext.createNextApiHandler({
@@ -12,7 +13,11 @@ export default trpcNext.createNextApiHandler({
   /**
    * @link https://trpc.io/docs/context
    */
-  createContext,
+  createContext: ({ req, res }) => {
+    const sessionGetter = () => getServerSession({ req, res });
+
+    return createTrpcContext({ req, res }, sessionGetter);
+  },
   /**
    * @link https://trpc.io/docs/error-handling
    */

apps/web/pages/api/user/avatar.ts

@@ -2,7 +2,7 @@ import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
-import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import prisma from "@calcom/prisma";
 
 import { defaultAvatarSrc } from "@lib/profile";

apps/web/pages/apps/[slug]/[...pages].tsx

@@ -1,13 +1,13 @@
 import type { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 
-import RoutingFormsRoutingConfig from "@calcom/app-store/ee/routing-forms/pages/app-routing.config";
+import RoutingFormsRoutingConfig from "@calcom/app-store/routing-forms/pages/app-routing.config";
 import TypeformRoutingConfig from "@calcom/app-store/typeform/pages/app-routing.config";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import prisma from "@calcom/prisma";
 import type { AppGetServerSideProps } from "@calcom/types/AppGetServerSideProps";
 
 import type { AppProps } from "@lib/app-providers";
-import { getSession } from "@lib/auth";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -103,7 +103,7 @@ export async function getServerSideProps(
     appPages?: string[];
   }>
 ) {
-  const { params } = context;
+  const { params, req, res } = context;
   if (!params) {
     return {
       notFound: true,
@@ -120,7 +120,7 @@ export async function getServerSideProps(
     // appPages is actually hardcoded here and no matter the fileName the same variable would be used.
     // We can write some validation logic later on that ensures that [...appPages].tsx file exists
     params.appPages = pages.slice(1);
-    const session = await getSession({ req: context.req });
+    const session = await getServerSession({ req, res });
     const user = session?.user;
 
     const result = await route.getServerSideProps(