v3.4.0

reduced the toast timeout, so button is not overlayed.

.env.appStore.example

@@ -125,4 +125,5 @@ SALESFORCE_CONSUMER_SECRET=""
 ZOHOCRM_CLIENT_ID=""
 ZOHOCRM_CLIENT_SECRET=""
 
+
 # *********************************************************************************************************

.env.example

@@ -213,6 +213,10 @@ NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
 # use organizations
 ORGANIZATIONS_ENABLED=
 
+# This variable should only be set to 1 or true if you want to autolink external provider sing-ups with
+# existing organizations based on email domain address
+ORGANIZATIONS_AUTOLINK=
+
 # Vercel Config to create subdomains for organizations
 # Get it from https://vercel.com/<TEAM_OR_USER_NAME>/<PROJECT_SLUG>/settings
 PROJECT_ID_VERCEL=
@@ -225,3 +229,31 @@ AUTH_BEARER_TOKEN_VERCEL=
 # Used for E2E tests on Apple Calendar
 E2E_TEST_APPLE_CALENDAR_EMAIL=""
 E2E_TEST_APPLE_CALENDAR_PASSWORD=""
+
+# - APP CREDENTIAL SYNC ***********************************************************************************
+# Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
+# Under settings/admin/apps ensure that all app secrets are set the same as the parent application
+# You can use: `openssl rand -base64 32` to generate one
+CALCOM_WEBHOOK_SECRET=""
+# This is the header name that will be used to verify the webhook secret. Should be in lowercase
+CALCOM_WEBHOOK_HEADER_NAME="calcom-webhook-secret"
+CALCOM_CREDENTIAL_SYNC_ENDPOINT=""
+# Key should match on Cal.com and your application
+# must be 32 bytes for AES256 encryption algorithm
+# You can use: `openssl rand -base64 24` to generate one
+CALCOM_APP_CREDENTIAL_ENCRYPTION_KEY=""
+
+# - OIDC E2E TEST *******************************************************************************************
+
+# Ensure this ADMIN EMAIL is present in the SAML_ADMINS list
+E2E_TEST_SAML_ADMIN_EMAIL=
+E2E_TEST_SAML_ADMIN_PASSWORD=
+
+E2E_TEST_OIDC_CLIENT_ID=
+E2E_TEST_OIDC_CLIENT_SECRET=
+E2E_TEST_OIDC_PROVIDER_DOMAIN=
+
+E2E_TEST_OIDC_USER_EMAIL=
+E2E_TEST_OIDC_USER_PASSWORD=
+
+# ***********************************************************************************************************

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

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

.github/workflows/cron-monthlyDigestEmail.yml

@@ -0,0 +1,33 @@
+name: Cron - monthlyDigestEmail
+
+on:
+  # "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 on the 28th, 29th, 30th and 31st of every month (see https://crontab.guru)
+    - cron: "59 23 28-31 * *"
+jobs:
+  cron-monthlyDigestEmail:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if today is the last day of the month
+        id: check-last-day
+        run: |
+          LAST_DAY=$(date -d tomorrow +%d)
+          if [ "$LAST_DAY" == "01" ]; then
+            echo "::set-output name=is_last_day::true"
+          else
+            echo "::set-output name=is_last_day::false"
+          fi
+
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY && steps.check-last-day.outputs.is_last_day == 'true' }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/monthlyDigestEmail \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/cron-webhooks-triggers.yml

@@ -0,0 +1,23 @@
+name: Cron - webhookTriggers
+
+on:
+  # "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 “every 5 minutes” (see https://crontab.guru)
+    - cron: "*/5 * * * *"
+jobs:
+  cron-webhookTriggers:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/webhookTriggers \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/crowdin.yml

@@ -19,12 +19,20 @@ jobs:
           token: ${{ secrets.GH_ACCESS_TOKEN }}
 
       - name: crowdin action
-        uses: crowdin/github-action@1.5.1
+        uses: crowdin/github-action@v1.13.0
         with:
+          # upload sources
           upload_sources: true
+          
+          # upload translations (& auto-approve 'em)
+          upload_translations_args: '--auto-approve-imported'
           upload_translations: true
-          download_translations: true
           push_translations: true
+          
+          # download translations
+          download_translations: true
+          
+          # GH config
           commit_message: "New Crowdin translations by Github Action"
           localization_branch_name: main
           create_pull_request: false

.github/workflows/merge-conflict.yml

@@ -0,0 +1,18 @@
+name: Auto Comment Merge Conflicts
+on: push
+
+permissions:
+  pull-requests: write
+
+jobs:
+  auto-comment-merge-conflicts:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: codytseng/auto-comment-merge-conflicts@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          comment-body: "Hey there, there is a merge conflict, can you take a look?"
+          wait-ms: 3000
+          max-retries: 5
+          label-name: "🚨 merge conflict"
+          ignore-authors: dependabot,otherAuthor

.github/workflows/pr-assign-team-label.yml

@@ -13,4 +13,4 @@ jobs:
         with:
           repo-token: ${{ secrets.GH_ACCESS_TOKEN }}
           organization-name: calcom
-          ignore-labels: "app-store, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"
+          ignore-labels: "app-store, ai, authentication, automated-testing, billing, bookings, caldav, calendar-apps, ci, console, crm-apps, docs, documentation, emails, embeds, event-types, i18n, impersonation, manual-testing, ui, performance, ops-stack, organizations, public-api, routing-forms, seats, teams, webhooks, workflows, zapier"

.github/workflows/semantic-pull-requests.yml

@@ -44,4 +44,5 @@ jobs:
         with:
           header: pr-title-lint-error
           message: |
-            Thank you for following the naming conventions! 🙏
+            Thank you for following the naming conventions! 🙏 Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
+

.github/workflows/welcome-new-contributors.yml

@@ -22,6 +22,6 @@ jobs:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           pr-message: |-
             Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-            Feel free to join the conversation at [discord](https://go.cal.com/discord)
+            Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
           issue-message: |
             Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

.gitpod.yml

@@ -5,7 +5,9 @@ tasks:
       next_auth_secret=$(openssl rand -base64 32) &&
       calendso_encryption_key=$(openssl rand -base64 24) &&
       sed -i -e "s|^NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET=$next_auth_secret|" \
-             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" .env
+             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" \
+             -e "s|http://localhost:3000|https://localhost:3000|" \
+             -e "s|localhost:3000|3000-$GITPOD_WORKSPACE_ID.$GITPOD_WORKSPACE_CLUSTER_HOST|" .env
     command: yarn dx
 
 ports:

.husky/.gitignore

@@ -1 +0,0 @@
-_

.prettierignore

@@ -7,7 +7,6 @@ public
 
 *.lock
 *.log
-*.test.ts
 
 .gitignore
 .npmignore

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to Cal.com
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what makes the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
 
 - 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.
 
@@ -37,7 +37,7 @@ Contributions are what make the open source community such an amazing place to l
   </tr>
   <tr>
     <td>
-      Core Features (Booking page, availabilty, timezone calculation)
+      Core Features (Booking page, availability, timezone calculation)
     </td>
     <td>
       <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22High+priority%22">
@@ -92,7 +92,22 @@ To develop locally:
    - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
    - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
 
-6. Start developing and watch for code changes:
+6. Setup Node
+   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
+
+   ```sh
+   nvm use
+   ```
+
+   You first might need to install the specific version and then use it:
+
+   ```sh
+   nvm install && nvm use
+   ```
+
+   You can install nvm from [here](https://github.com/nvm-sh/nvm).
+
+7. Start developing and watch for code changes:
 
    ```sh
    yarn dev
@@ -120,6 +135,16 @@ This will run and test all flows in multiple Chromium windows to verify that no
 yarn test-e2e
 ```
 
+#### Resolving issues
+
+##### E2E test browsers not installed
+
+Run `npx playwright install` to download test browsers and resolve the error below when running `yarn test-e2e`:
+
+```
+Executable doesn't exist at /Users/alice/Library/Caches/ms-playwright/chromium-1048/chrome-mac/Chromium.app/Contents/MacOS/Chromium
+```
+
 ## Linting
 
 To check the formatting of your code:
@@ -132,7 +157,52 @@ If you get errors, be sure to fix them before committing.
 
 ## Making a Pull Request
 
-- Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
-- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue
-  ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+- Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating your PR.
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. See more about [Linking a pull request to an issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
 - Be sure to fill the PR Template accordingly.
+- Review [App Contribution Guidelines](./packages/app-store/CONTRIBUTING.md) when building integrations
+
+## Guidelines for committing yarn lockfile
+
+Do not commit your `yarn.lock` unless you've made changes to the `package.json`. If you've already committed `yarn.lock` unintentionally, follow these steps to undo:
+
+If your last commit has the `yarn.lock` file alongside other files and you only wish to uncommit the `yarn.lock`:
+   ```bash
+   git checkout HEAD~1 yarn.lock
+   git commit -m "Revert yarn.lock changes"
+   ```
+If you've pushed the commit with the `yarn.lock`:
+   1. Correct the commit locally using the above method.
+   2. Carefully force push:
+
+   ```bash
+   git push origin <your-branch-name> --force
+   ```
+
+If `yarn.lock` was committed a while ago and there have been several commits since, you can use the following steps to revert just the `yarn.lock` changes without impacting the subsequent changes:
+
+1. **Checkout a Previous Version**:
+   - Find the commit hash before the `yarn.lock` was unintentionally committed. You can do this by viewing the Git log:
+     ```bash
+     git log yarn.lock
+     ```
+   - Once you have identified the commit hash, use it to checkout the previous version of `yarn.lock`:
+     ```bash
+     git checkout <commit_hash> yarn.lock
+     ```
+
+2. **Commit the Reverted Version**:
+   - After checking out the previous version of the `yarn.lock`, commit this change:
+     ```bash
+     git commit -m "Revert yarn.lock to its state before unintended changes"
+     ```
+
+3. **Proceed with Caution**:
+   - If you need to push this change, first pull the latest changes from your remote branch to ensure you're not overwriting other recent changes:
+     ```bash
+     git pull origin <your-branch-name>
+     ```
+   - Then push the updated branch:
+     ```bash
+     git push origin <your-branch-name>
+     ```

README.md

@@ -131,23 +131,39 @@ Here is what you need to be able to run Cal.com.
    > If you are on Windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
    > See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.
 
-1. Go to the project folder
+2. Go to the project folder
 
    ```sh
    cd cal.com
    ```
 
-1. Install packages with yarn
+3. Install packages with yarn
 
    ```sh
    yarn
    ```
 
-1. Set up your `.env` file
+4. Set up your `.env` file
+
    - Duplicate `.env.example` to `.env`
    - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file.
    - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file.
 
+5. Setup Node
+   If your Node version does not meet the project's requirements as instructed by the docs, "nvm" (Node Version Manager) allows using Node at the version required by the project:
+
+   ```sh
+   nvm use
+   ```
+
+   You first might need to install the specific version and then use it:
+
+   ```sh
+   nvm install && nvm use
+   ```
+
+   You can install nvm from [here](https://github.com/nvm-sh/nvm).
+
 #### Quick start with `yarn dx`
 
 > - **Requires Docker and Docker Compose to be installed**
@@ -221,6 +237,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
 
 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+
    > **_NOTE:_** Required when `E2E_TEST_MAILHOG_ENABLED` is "1"
 
    ```sh
@@ -236,6 +253,8 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 #### Setting up your first user
 
+##### Approach 1
+
 1. Open [Prisma Studio](https://prisma.io/studio) to look at or modify the database content:
 
    ```sh
@@ -247,6 +266,17 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `packages/prisma/schema.prisma` file.
 1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
 
+##### Approach 2
+
+Seed the local db by running
+
+```sh
+cd packages/prisma
+yarn db-seed
+```
+
+The above command will populate the local db with dummy users.
+
 ### E2E-Testing
 
 Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
@@ -259,6 +289,16 @@ yarn test-e2e
 yarn playwright show-report test-results/reports/playwright-html-report
 ```
 
+#### Resolving issues
+
+##### E2E test browsers not installed
+
+Run `npx playwright install` to download test browsers and resolve the error below when running `yarn test-e2e`:
+
+```
+Executable doesn't exist at /Users/alice/Library/Caches/ms-playwright/chromium-1048/chrome-mac/Chromium.app/Contents/MacOS/Chromium
+```
+
 ### Upgrading from earlier versions
 
 1. Pull the current version:
@@ -341,6 +381,10 @@ Currently Vercel Pro Plan is required to be able to Deploy this application with
 
 [![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/calcom/docker)
 
+### Elestio
+
+[![Deploy on Elestio](https://pub-da36157c854648669813f3f76c526c2b.r2.dev/deploy-on-elestio-black.png)](https://elest.io/open-source/cal.com)
+
 <!-- ROADMAP -->
 
 ## Roadmap
@@ -423,7 +467,7 @@ yarn seed-app-store
 ```
 
 You will need to complete a few more steps to activate Google Calendar App.
-Make sure to complete section "Obtaining the Google API Credentials". After the do the
+Make sure to complete section "Obtaining the Google API Credentials". After that do the
 following
 
 1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
@@ -449,8 +493,8 @@ following
 7. Click "Create".
 8. Now copy the Client ID and Client Secret to your `.env` file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
 9. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/zoomvideo/callback` replacing Cal.com URL with the URI at which your application runs.
-10. Also add the redirect URL given above as a allow list URL and enable "Subdomain check". Make sure, it says "saved" below the form.
-11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
+10. Also add the redirect URL given above as an allow list URL and enable "Subdomain check". Make sure, it says "saved" below the form.
+11. You don't need to provide basic information about your app. Instead click on "Scopes" and then on "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
 12. Click "Done".
 13. You're good to go. Now you can easily add your Zoom integration in the Cal.com settings.
 
@@ -470,9 +514,8 @@ following
 4. Select Basecamp 4 as the product to integrate with.
 5. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/basecamp3/callback` replacing Cal.com URL with the URI at which your application runs.
 6. Click on done and copy the Client ID and secret into the `BASECAMP3_CLIENT_ID` and `BASECAMP3_CLIENT_SECRET` fields.
-7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`. 
-For example, `Cal.com (support@cal.com)`.
-
+7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`.
+   For example, `Cal.com (support@cal.com)`.
 
 ### Obtaining HubSpot Client ID and Secret
 
@@ -504,6 +547,10 @@ For example, `Cal.com (support@cal.com)`.
 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.
 
+### Obtaining Zoho Calendar Client ID and Secret
+
+[Follow these steps](./packages/app-store/zohocalendar/)
+
 ### Obtaining Zoho Bigin Client ID and Secret
 
 [Follow these steps](./packages/app-store/zoho-bigin/)
@@ -526,7 +573,7 @@ For example, `Cal.com (support@cal.com)`.
 3. Copy Account SID to your `.env` file into the `TWILIO_SID` field
 4. Copy Auth Token to your `.env` file into the `TWILIO_TOKEN` field
 5. Copy your Twilio phone number to your `.env` file into the `TWILIO_PHONE_NUMBER` field
-6. Add your own sender id to the `.env` file into the `NEXT_PUBLIC_SENDER_ID` field (fallback is Cal.com)
+6. Add your own sender ID to the `.env` file into the `NEXT_PUBLIC_SENDER_ID` field (fallback is Cal.com)
 7. Create a messaging service (Develop -> Messaging -> Services)
 8. Choose any name for the messaging service
 9. Click 'Add Senders'

apps/ai/.env.example

@@ -0,0 +1,21 @@
+BACKEND_URL=http://localhost:3002/api
+# BACKEND_URL=https://api.cal.com/v1
+FRONTEND_URL=http://localhost:3000
+# FRONTEND_URL=https://cal.com
+
+APP_ID=cal-ai
+APP_URL=http://localhost:3000/apps/cal-ai
+
+# This is for the onboard route. Which domain should we send emails from?
+SENDER_DOMAIN=cal.ai
+
+# Used to verify requests from sendgrid. You can generate a new one with: `openssl rand -hex 32`
+PARSE_KEY=
+
+OPENAI_API_KEY=
+
+# Optionally trace completions at https://smith.langchain.com
+# LANGCHAIN_TRACING_V2=true
+# LANGCHAIN_ENDPOINT=
+# LANGCHAIN_API_KEY=
+# LANGCHAIN_PROJECT=

apps/ai/README.md

@@ -0,0 +1,60 @@
+# Cal.ai
+
+Welcome to [Cal.ai](https://cal.ai)!
+
+This app lets you chat with your calendar via email:
+
+- Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
+- List and rearrange your bookings eg. "clear my afternoon"
+- Answer basic questions about your busiest times eg. "how does my Tuesday look?"
+
+The core logic is contained in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts). Here, a [LangChain Agent Executor](https://docs.langchain.com/docs/components/agents/agent-executor) is tasked with following your instructions. Given your last-known timezone, working hours, and busy times, it attempts to CRUD your bookings.
+
+_The AI agent can only choose from a set of tools, without ever seeing your API key._
+
+Emails are cleaned and routed in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts) using [MailParser](https://nodemailer.com/extras/mailparser/).
+
+Incoming emails are routed by email address. Addresses are verified by [DKIM record](https://support.google.com/a/answer/174124?hl=en), making them hard to spoof.
+
+## Getting Started
+
+### Development
+
+If you haven't yet, please run the [root setup](/README.md) steps.
+
+Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. Run `cp .env.example .env` in this folder to get started. You'll need:
+
+- An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
+- A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
+- A default sender email (for example, `me@dev.example.com`)
+- The Cal.ai app's ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+- A unique value for `PARSE_KEY` with `openssl rand -hex 32`
+
+To stand up the API and AI apps simultaneously, simply run `yarn dev:ai`.
+
+### Agent Architecture
+
+The scheduling agent in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts) calls an LLM (in this case, GPT-4) in a loop to accomplish a multi-step task. We use an [OpenAI Functions agent](https://js.langchain.com/docs/modules/agents/agent_types/openai_functions_agent), which is fine-tuned to output text suited for passing to tools.
+
+Tools (eg. [`createBooking`](/apps/ai/src/tools/createBooking.ts)) are simply JavaScript methods wrapped by Zod schemas, telling the agent what format to output.
+
+Here is the full architecture:
+
+![Cal.ai architecture](/apps/ai/src/public/architecture.png)
+
+### Email Router
+
+To expose the AI app, run `ngrok http 3000` (or the AI app's port number) in a new terminal. You may need to install [nGrok](https://ngrok.com/).
+
+To forward incoming emails to the serverless function at `/agent`, we use [SendGrid's Inbound Parse](https://docs.sendgrid.com/for-developers/parsing-email/setting-up-the-inbound-parse-webhook).
+
+1.  Ensure you have a [SendGrid account](https://signup.sendgrid.com/)
+2.  Ensure you have an authenticated domain. Go to Settings > Sender Authentication > Authenticate. For DNS host, select `I'm not sure`. Click Next and add your domain, eg. `example.com`. Choose Manual Setup. You'll be given three CNAME records to add to your DNS settings, eg. in [Vercel Domains](https://vercel.com/dashboard/domains). After adding those records, click Verify. To troubleshoot, see the [full instructions](https://docs.sendgrid.com/ui/account-and-settings/how-to-set-up-domain-authentication).
+3.  Authorize your domain for email with MX records: one with name `[your domain].com` and value `mx.sendgrid.net.`, and another with name `bounces.[your domain].com` and value `feedback-smtp.us-east-1.amazonses.com`, both with priority `10` if prompted.
+4.  Go to Settings > [Inbound Parse](https://app.sendgrid.com/settings/parse) > Add Host & URL. Choose your authenticated domain.
+5.  In the Destination URL field, use the nGrok URL from above along with the path, `/api/receive`, and one param, `parseKey`, which lives in [this app's .env](/apps/ai/.env.example) under `PARSE_KEY`. The full URL should look like `https://abc.ngrok.io/api/receive?parseKey=ABC-123`.
+6.  Activate "POST the raw, full MIME message".
+7.  Send an email to `[anyUsername]@example.com`. You should see a ping on the nGrok listener and server.
+8.  Adjust the logic in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts), save to hot-reload, and send another email to test the behaviour.
+
+Please feel free to improve any part of this architecture!

apps/ai/next-env.d.ts

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

apps/ai/next.config.js

@@ -0,0 +1,24 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer");
+
+const plugins = [];
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "https://cal.com/ai",
+        permanent: true,
+      },
+    ];
+  },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  reactStrictMode: true,
+};
+
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/ai/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@calcom/ai",
+  "version": "1.2.0",
+  "private": true,
+  "author": "Cal.com Inc.",
+  "dependencies": {
+    "@calcom/prisma": "*",
+    "@t3-oss/env-nextjs": "^0.6.1",
+    "langchain": "^0.0.131",
+    "mailparser": "^3.6.5",
+    "next": "^13.5.4",
+    "supports-color": "8.1.1",
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@types/mailparser": "^3.4.0"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev -p 3005",
+    "format": "npx prettier . --write",
+    "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "start": "next start"
+  }
+}

apps/ai/src/app/api/agent/route.ts

@@ -0,0 +1,48 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import agent from "../../../utils/agent";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+// Allow agent loop to run for up to 5 minutes
+export const maxDuration = 300;
+
+/**
+ * Launches a LangChain agent to process an incoming email,
+ * then sends the response to the user.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const json = await request.json();
+
+  const { apiKey, userId, message, subject, user, users, replyTo: agentEmail } = json;
+
+  if ((!message && !subject) || !user) {
+    return new NextResponse("Missing fields", { status: 400 });
+  }
+
+  try {
+    const response = await agent(`${subject}\n\n${message}`, { ...user }, users, apiKey, userId, agentEmail);
+
+    // Send response to user
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: response.replace(/(?:\r\n|\r|\n)/g, "\n"),
+      to: user.email,
+      from: agentEmail,
+    });
+
+    return new NextResponse("ok");
+  } catch (error) {
+    return new NextResponse(
+      (error as Error).message || "Something went wrong. Please try again or reach out for help.",
+      { status: 500 }
+    );
+  }
+};

apps/ai/src/app/api/onboard/route.ts

@@ -0,0 +1,44 @@
+import type { NextRequest } from "next/server";
+
+import prisma from "@calcom/prisma";
+
+import { env } from "../../../env.mjs";
+import sendEmail from "../../../utils/sendEmail";
+
+export const POST = async (request: NextRequest) => {
+  const { userId } = await request.json();
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+      name: true,
+      username: true,
+    },
+    where: {
+      id: userId,
+    },
+  });
+
+  if (!user) {
+    return new Response("User not found", { status: 404 });
+  }
+
+  await sendEmail({
+    subject: "Welcome to Cal AI",
+    to: user.email,
+    from: `${user.username}@${env.SENDER_DOMAIN}`,
+    text: `Hi ${
+      user.name || `@${user.username}`
+    },\n\nI'm Cal AI, your personal booking assistant! I'll be here, 24/7 to help manage your busy schedule and find times to meet with the people you care about.\n\nHere are some things you can ask me:\n\n- "Book a meeting with @someone" (The @ symbol lets you tag Cal.com users)\n- "What meetings do I have today?" (I'll show you your schedule)\n- "Find a time for coffee with someone@gmail.com" (I'll intro and send them some good times)\n\nI'm still learning, so if you have any feedback, please tweet it to @calcom!\n\nRemember, you can always reach me here, at ${
+      user.username
+    }@${
+      env.SENDER_DOMAIN
+    }.\n\nLooking forward to working together (:\n\n- Cal AI, Your personal booking assistant`,
+    html: `Hi ${
+      user.name || `@${user.username}`
+    },<br><br>I'm Cal AI, your personal booking assistant! I'll be here, 24/7 to help manage your busy schedule and find times to meet with the people you care about.<br><br>Here are some things you can ask me:<br><br>- "Book a meeting with @someone" (The @ symbol lets you tag Cal.com users)<br>- "What meetings do I have today?" (I'll show you your schedule)<br>- "Find a time for coffee with someone@gmail.com" (I'll intro and send them some good times)<br><br>I'm still learning, so if you have any feedback, please send it to <a href="https://twitter.com/calcom">@calcom</a> on X!<br><br>Remember, you can always reach me here, at ${
+      user.username
+    }@${env.SENDER_DOMAIN}.<br><br>Looking forward to working together (:<br><br>- Cal AI`,
+  });
+  return new Response("OK", { status: 200 });
+};

apps/ai/src/app/api/receive/route.ts

@@ -0,0 +1,163 @@
+import type { ParsedMail, Source } from "mailparser";
+import { simpleParser } from "mailparser";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import prisma from "@calcom/prisma";
+
+import { env } from "../../../env.mjs";
+import { fetchAvailability } from "../../../tools/getAvailability";
+import { fetchEventTypes } from "../../../tools/getEventTypes";
+import { extractUsers } from "../../../utils/extractUsers";
+import getHostFromHeaders from "../../../utils/host";
+import now from "../../../utils/now";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+// Allow receive loop to run for up to 30 seconds
+// Why so long? the rate determining API call (getAvailability, getEventTypes) can take up to 15 seconds at peak times so we give it a little extra time to complete.
+export const maxDuration = 30;
+
+/**
+ * Verifies email signature and app authorization,
+ * then hands off to booking agent.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const formData = await request.formData();
+  const body = Object.fromEntries(formData);
+
+  // body.dkim looks like {@domain-com.22222222.gappssmtp.com : pass}
+  const signature = (body.dkim as string).includes(" : pass");
+
+  const envelope = JSON.parse(body.envelope as string);
+
+  const aiEmail = envelope.to[0];
+
+  // Parse email from mixed MIME type
+  const parsed: ParsedMail = await simpleParser(body.email as Source);
+
+  if (!parsed.text && !parsed.subject) {
+    return new NextResponse("Email missing text and subject", { status: 400 });
+  }
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+      id: true,
+      username: true,
+      timeZone: true,
+      credentials: {
+        select: {
+          appId: true,
+          key: true,
+        },
+      },
+    },
+    where: { email: envelope.from },
+  });
+
+  // User is not a cal.com user or is using an unverified email.
+  if (!signature || !user) {
+    await sendEmail({
+      html: `Thanks for your interest in Cal.ai! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address.`,
+      subject: `Re: ${body.subject}`,
+      text: `Thanks for your interest in Cal.ai! To get started, Make sure you have a cal.com account with this email address. You can sign up for an account at: https://cal.com/signup`,
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("ok");
+  }
+
+  const credential = user.credentials.find((c) => c.appId === env.APP_ID)?.key;
+
+  // User has not installed the app from the app store. Direct them to install it.
+  if (!(credential as { apiKey: string })?.apiKey) {
+    const url = env.APP_URL;
+
+    await sendEmail({
+      html: `Thanks for using Cal.ai! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
+      subject: `Re: ${body.subject}`,
+      text: `Thanks for using Cal.ai! To get started, the app must be installed. Click this link to install the Cal.ai app: ${url}`,
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("ok");
+  }
+
+  const { apiKey } = credential as { apiKey: string };
+
+  // Pre-fetch data relevant to most bookings.
+  const [eventTypes, availability, users] = await Promise.all([
+    fetchEventTypes({
+      apiKey,
+    }),
+    fetchAvailability({
+      apiKey,
+      userId: user.id,
+      dateFrom: now(user.timeZone),
+      dateTo: now(user.timeZone),
+    }),
+    extractUsers(`${parsed.text} ${parsed.subject}`),
+  ]);
+
+  if ("error" in availability) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your availability. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(availability.error);
+    return new NextResponse("Error fetching availability. Please try again.", { status: 400 });
+  }
+
+  if ("error" in eventTypes) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your event types. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(eventTypes.error);
+    return new NextResponse("Error fetching event types. Please try again.", { status: 400 });
+  }
+
+  const { workingHours } = availability;
+
+  const appHost = getHostFromHeaders(request.headers);
+
+  // Hand off to long-running agent endpoint to handle the email. (don't await)
+  fetch(`${appHost}/api/agent?parseKey=${env.PARSE_KEY}`, {
+    body: JSON.stringify({
+      apiKey,
+      userId: user.id,
+      message: parsed.text,
+      subject: parsed.subject,
+      replyTo: aiEmail,
+      user: {
+        email: user.email,
+        eventTypes,
+        username: user.username,
+        timeZone: user.timeZone,
+        workingHours,
+      },
+      users,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  await new Promise((r) => setTimeout(r, 1000));
+
+  return new NextResponse("ok");
+};

apps/ai/src/env.mjs

@@ -0,0 +1,47 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    BACKEND_URL: process.env.BACKEND_URL,
+    FRONTEND_URL: process.env.FRONTEND_URL,
+    APP_ID: process.env.APP_ID,
+    APP_URL: process.env.APP_URL,
+    SENDER_DOMAIN: process.env.SENDER_DOMAIN,
+    PARSE_KEY: process.env.PARSE_KEY,
+    NODE_ENV: process.env.NODE_ENV,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
+    DATABASE_URL: process.env.DATABASE_URL,
+  },
+
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    BACKEND_URL: z.string().url(),
+    FRONTEND_URL: z.string().url(),
+    APP_ID: z.string().min(1),
+    APP_URL: z.string().url(),
+    SENDER_DOMAIN: z.string().min(1),
+    PARSE_KEY: z.string().min(1),
+    NODE_ENV: z.enum(["development", "test", "production"]),
+    OPENAI_API_KEY: z.string().min(1),
+    SENDGRID_API_KEY: z.string().min(1),
+    DATABASE_URL: z.string().url(),
+  },
+});

apps/ai/src/tools/createBooking.ts

@@ -0,0 +1,121 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import type { UserList } from "~/src/types/user";
+
+import { env } from "../env.mjs";
+
+/**
+ * Creates a booking for a user by event type, times, and timezone.
+ */
+const createBooking = async ({
+  apiKey,
+  userId,
+  users,
+  eventTypeId,
+  start,
+  end,
+  timeZone,
+  language,
+  invite,
+}: {
+  apiKey: string;
+  userId: number;
+  users: UserList;
+  eventTypeId: number;
+  start: string;
+  end: string;
+  timeZone: string;
+  language: string;
+  invite: number;
+  title?: string;
+  status?: string;
+}): Promise<string | Error | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const user = users.find((u) => u.id === invite);
+
+  if (!user) {
+    return { error: `User with id ${invite} not found to invite` };
+  }
+
+  const responses = {
+    id: invite.toString(),
+    name: user.username,
+    email: user.email,
+  };
+
+  const response = await fetch(url, {
+    body: JSON.stringify({
+      end,
+      eventTypeId,
+      language,
+      metadata: {},
+      responses,
+      start,
+      timeZone,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  // Let GPT handle this. This will happen when wrong event type id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return {
+      error: data.message,
+    };
+  }
+
+  return "Booking created";
+};
+
+const createBookingTool = (apiKey: string, userId: number, users: UserList) => {
+  return new DynamicStructuredTool({
+    description: "Creates a booking on the primary user's calendar.",
+    func: async ({ eventTypeId, start, end, timeZone, language, invite, title, status }) => {
+      return JSON.stringify(
+        await createBooking({
+          apiKey,
+          userId,
+          users,
+          end,
+          eventTypeId,
+          language,
+          invite,
+          start,
+          status,
+          timeZone,
+          title,
+        })
+      );
+    },
+    name: "createBooking",
+    schema: z.object({
+      end: z
+        .string()
+        .describe("This should correspond to the event type's length, unless otherwise specified."),
+      eventTypeId: z.number(),
+      language: z.string(),
+      invite: z.number().describe("External user id to invite."),
+      start: z.string(),
+      status: z.string().optional().describe("ACCEPTED, PENDING, CANCELLED or REJECTED"),
+      timeZone: z.string(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default createBookingTool;

apps/ai/src/tools/deleteBooking.ts

@@ -0,0 +1,66 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Cancels a booking for a user by ID with reason.
+ */
+const cancelBooking = async ({
+  apiKey,
+  id,
+  reason,
+}: {
+  apiKey: string;
+  id: string;
+  reason: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}/cancel?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ reason }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "DELETE",
+  });
+
+  // Let GPT handle this. This will happen when wrong booking id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking cancelled";
+};
+
+const cancelBookingTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Cancel a booking",
+    func: async ({ id, reason }) => {
+      return JSON.stringify(
+        await cancelBooking({
+          apiKey,
+          id,
+          reason,
+        })
+      );
+    },
+    name: "cancelBooking",
+    schema: z.object({
+      id: z.string(),
+      reason: z.string(),
+    }),
+  });
+};
+
+export default cancelBookingTool;

apps/ai/src/tools/getAvailability.ts

@@ -0,0 +1,77 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Availability } from "../types/availability";
+
+/**
+ * Fetches availability for a user by date range and event type.
+ */
+export const fetchAvailability = async ({
+  apiKey,
+  userId,
+  dateFrom,
+  dateTo,
+}: {
+  apiKey: string;
+  userId: number;
+  dateFrom: string;
+  dateTo: string;
+}): Promise<Partial<Availability> | { error: string }> => {
+  const params: { [k: string]: string } = {
+    apiKey,
+    userId: userId.toString(),
+    dateFrom,
+    dateTo,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/availability?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return {
+    busy: data.busy,
+    dateRanges: data.dateRanges,
+    timeZone: data.timeZone,
+    workingHours: data.workingHours,
+  };
+};
+
+const getAvailabilityTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Get availability of users within range.",
+    func: async ({ userIds, dateFrom, dateTo }) => {
+      return JSON.stringify(
+        await Promise.all(
+          userIds.map(
+            async (userId) =>
+              await fetchAvailability({
+                userId: userId,
+                apiKey,
+                dateFrom,
+                dateTo,
+              })
+          )
+        )
+      );
+    },
+    name: "getAvailability",
+    schema: z.object({
+      userIds: z.array(z.number()).describe("The users to fetch availability for."),
+      dateFrom: z.string(),
+      dateTo: z.string(),
+    }),
+  });
+};
+
+export default getAvailabilityTool;

apps/ai/src/tools/getBookings.ts

@@ -0,0 +1,75 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Booking } from "../types/booking";
+import { BOOKING_STATUS } from "../types/booking";
+
+/**
+ * Fetches bookings for a user by date range.
+ */
+const fetchBookings = async ({
+  apiKey,
+  userId,
+  from,
+  to,
+}: {
+  apiKey: string;
+  userId: number;
+  from: string;
+  to: string;
+}): Promise<Booking[] | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  const bookings: Booking[] = data.bookings
+    .filter((booking: Booking) => {
+      const afterFrom = new Date(booking.startTime).getTime() > new Date(from).getTime();
+      const beforeTo = new Date(booking.endTime).getTime() < new Date(to).getTime();
+      const notCancelled = booking.status !== BOOKING_STATUS.CANCELLED;
+
+      return afterFrom && beforeTo && notCancelled;
+    })
+    .map(({ endTime, eventTypeId, id, startTime, status, title }: Booking) => ({
+      endTime,
+      eventTypeId,
+      id,
+      startTime,
+      status,
+      title,
+    }));
+
+  return bookings;
+};
+
+const getBookingsTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Get bookings for the primary user between two dates.",
+    func: async ({ from, to }) => {
+      return JSON.stringify(await fetchBookings({ apiKey, userId, from, to }));
+    },
+    name: "getBookings",
+    schema: z.object({
+      from: z.string().describe("ISO 8601 datetime string"),
+      to: z.string().describe("ISO 8601 datetime string"),
+    }),
+  });
+};
+
+export default getBookingsTool;

apps/ai/src/tools/getEventTypes.ts

@@ -0,0 +1,59 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { EventType } from "../types/eventType";
+
+/**
+ * Fetches event types by user ID.
+ */
+export const fetchEventTypes = async ({ apiKey, userId }: { apiKey: string; userId?: number }) => {
+  const params: Record<string, string> = {
+    apiKey,
+  };
+
+  if (userId) {
+    params["userId"] = userId.toString();
+  }
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/event-types?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return data.event_types.map((eventType: EventType) => ({
+    id: eventType.id,
+    slug: eventType.slug,
+    length: eventType.length,
+    title: eventType.title,
+  }));
+};
+
+const getEventTypesTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Get a user's event type IDs. Usually necessary to book a meeting.",
+    func: async ({ userId }) => {
+      return JSON.stringify(
+        await fetchEventTypes({
+          apiKey,
+          userId,
+        })
+      );
+    },
+    name: "getEventTypes",
+    schema: z.object({
+      userId: z.number().optional().describe("The user ID. Defaults to the primary user's ID."),
+    }),
+  });
+};
+
+export default getEventTypesTool;

apps/ai/src/tools/sendBookingEmail.ts

@@ -0,0 +1,124 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "~/src/env.mjs";
+import type { User, UserList } from "~/src/types/user";
+import sendEmail from "~/src/utils/sendEmail";
+
+export const sendBookingEmail = async ({
+  user,
+  agentEmail,
+  subject,
+  to,
+  message,
+  eventTypeSlug,
+  slots,
+  date,
+}: {
+  apiKey: string;
+  user: User;
+  users: UserList;
+  agentEmail: string;
+  subject: string;
+  to: string;
+  message: string;
+  eventTypeSlug: string;
+  slots?: {
+    time: string;
+    text: string;
+  }[];
+  date: {
+    date: string;
+    text: string;
+  };
+}) => {
+  // const url = `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date}`;
+  const timeUrls = slots?.map(({ time, text }) => {
+    return {
+      url: `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?slot=${time}`,
+      text,
+    };
+  });
+
+  const dateUrl = {
+    url: `${env.FRONTEND_URL}/${user.username}/${eventTypeSlug}?date=${date.date}`,
+    text: date.text,
+  };
+
+  await sendEmail({
+    subject,
+    to,
+    cc: user.email,
+    from: agentEmail,
+    text: message
+      .split("[[[Slots]]]")
+      .join(timeUrls?.map(({ url, text }) => `${text}: ${url}`).join("\n"))
+      .split("[[[Link]]]")
+      .join(`${dateUrl.text}: ${dateUrl.url}`),
+    html: message
+      .split("\n")
+      .join("<br>")
+      .split("[[[Slots]]]")
+      .join(timeUrls?.map(({ url, text }) => `<a href="${url}">${text}</a>`).join("<br>"))
+      .split("[[[Link]]]")
+      .join(`<a href="${dateUrl.url}">${dateUrl.text}</a>`),
+  });
+
+  return "Booking link sent";
+};
+
+const sendBookingEmailTool = (apiKey: string, user: User, users: UserList, agentEmail: string) => {
+  return new DynamicStructuredTool({
+    description:
+      "Send a booking link via email. Useful for scheduling with non cal users. Be confident, suggesting a good date/time with a fallback to a link to select a date/time.",
+    func: async ({ message, subject, to, eventTypeSlug, slots, date }) => {
+      return JSON.stringify(
+        await sendBookingEmail({
+          apiKey,
+          user,
+          users,
+          agentEmail,
+          subject,
+          to,
+          message,
+          eventTypeSlug,
+          slots,
+          date,
+        })
+      );
+    },
+    name: "sendBookingEmail",
+
+    schema: z.object({
+      message: z
+        .string()
+        .describe(
+          "A polite and professional email with an intro and signature at the end. Specify you are the AI booking assistant of the primary user. Use [[[Slots]]] and a fallback [[[Link]]] to inject good times and 'see all times' into messages"
+        ),
+      subject: z.string(),
+      to: z
+        .string()
+        .describe("email address to send the booking link to. Primary user is automatically CC'd"),
+      eventTypeSlug: z.string().describe("the slug of the event type to book"),
+      slots: z
+        .array(
+          z.object({
+            time: z.string().describe("YYYY-MM-DDTHH:mm in UTC"),
+            text: z.string().describe("minimum readable label. Ex. 4pm."),
+          })
+        )
+        .optional()
+        .describe("Time slots the external user can click"),
+      date: z
+        .object({
+          date: z.string().describe("YYYY-MM-DD"),
+          text: z.string().describe('"See all times" or similar'),
+        })
+        .describe(
+          "A booking link that allows the external user to select a date / time. Should be a fallback to time slots"
+        ),
+    }),
+  });
+};
+
+export default sendBookingEmailTool;

apps/ai/src/tools/updateBooking.ts

@@ -0,0 +1,85 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Edits a booking for a user by booking ID with new times, title, description, or status.
+ */
+const editBooking = async ({
+  apiKey,
+  userId,
+  id,
+  startTime, // In the docs it says start, but it's startTime: https://cal.com/docs/enterprise-features/api/api-reference/bookings#edit-an-existing-booking.
+  endTime, // Same here: it says end but it's endTime.
+  title,
+  description,
+  status,
+}: {
+  apiKey: string;
+  userId: number;
+  id: string;
+  startTime?: string;
+  endTime?: string;
+  title?: string;
+  description?: string;
+  status?: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ description, endTime, startTime, status, title }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "PATCH",
+  });
+
+  // Let GPT handle this. This will happen when wrong booking id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking edited";
+};
+
+const editBookingTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Edit a booking",
+    func: async ({ description, endTime, id, startTime, status, title }) => {
+      return JSON.stringify(
+        await editBooking({
+          apiKey,
+          userId,
+          description,
+          endTime,
+          id,
+          startTime,
+          status,
+          title,
+        })
+      );
+    },
+    name: "editBooking",
+    schema: z.object({
+      description: z.string().optional(),
+      endTime: z.string().optional(),
+      id: z.string(),
+      startTime: z.string().optional(),
+      status: z.string().optional(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default editBookingTool;

apps/ai/src/types/availability.ts

@@ -0,0 +1,25 @@
+export type Availability = {
+  busy: {
+    start: string;
+    end: string;
+    title?: string;
+  }[];
+  timeZone: string;
+  dateRanges: {
+    start: string;
+    end: string;
+  }[];
+  workingHours: {
+    days: number[];
+    startTime: number;
+    endTime: number;
+    userId: number;
+  }[];
+  dateOverrides: {
+    date: string;
+    startTime: number;
+    endTime: number;
+    userId: number;
+  };
+  currentSeats: number;
+};

apps/ai/src/types/booking.ts

@@ -0,0 +1,23 @@
+export enum BOOKING_STATUS {
+  ACCEPTED = "ACCEPTED",
+  PENDING = "PENDING",
+  CANCELLED = "CANCELLED",
+  REJECTED = "REJECTED",
+}
+
+export type Booking = {
+  id: number;
+  userId: number;
+  description: string | null;
+  eventTypeId: number;
+  uid: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  attendees: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  user: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  payment: { id: number; success: boolean; paymentOption: string }[];
+  metadata: object | null;
+  status: BOOKING_STATUS;
+  responses: { email: string; name: string; location: string } | null;
+};

apps/ai/src/types/eventType.ts

@@ -0,0 +1,13 @@
+export type EventType = {
+  id: number;
+  title: string;
+  length: number;
+  metadata: object;
+  slug: string;
+  hosts: {
+    userId: number;
+    isFixed: boolean;
+  }[];
+  hidden: boolean;
+  // ...
+};

apps/ai/src/types/user.ts

@@ -0,0 +1,18 @@
+import type { EventType } from "./eventType";
+import type { WorkingHours } from "./workingHours";
+
+export type User = {
+  id: number;
+  email: string;
+  username: string;
+  timeZone: string;
+  eventTypes: EventType[];
+  workingHours: WorkingHours[];
+};
+
+export type UserList = {
+  id?: number;
+  email?: string;
+  username?: string;
+  type: "fromUsername" | "fromEmail";
+}[];

apps/ai/src/types/workingHours.ts

@@ -0,0 +1,5 @@
+export type WorkingHours = {
+  days: number[];
+  startTime: number;
+  endTime: number;
+};

apps/ai/src/utils/agent.ts

@@ -0,0 +1,109 @@
+import { initializeAgentExecutorWithOptions } from "langchain/agents";
+import { ChatOpenAI } from "langchain/chat_models/openai";
+
+import { env } from "../env.mjs";
+import createBookingIfAvailable from "../tools/createBooking";
+import deleteBooking from "../tools/deleteBooking";
+import getAvailability from "../tools/getAvailability";
+import getBookings from "../tools/getBookings";
+import sendBookingEmail from "../tools/sendBookingEmail";
+import updateBooking from "../tools/updateBooking";
+import type { EventType } from "../types/eventType";
+import type { User, UserList } from "../types/user";
+import type { WorkingHours } from "../types/workingHours";
+import now from "./now";
+
+const gptModel = "gpt-4";
+
+/**
+ * Core of the Cal.ai booking agent: a LangChain Agent Executor.
+ * Uses a toolchain to book meetings, list available slots, etc.
+ * Uses OpenAI functions to better enforce JSON-parsable output from the LLM.
+ */
+const agent = async (
+  input: string,
+  user: User,
+  users: UserList,
+  apiKey: string,
+  userId: number,
+  agentEmail: string
+) => {
+  const tools = [
+    // getEventTypes(apiKey),
+    getAvailability(apiKey),
+    getBookings(apiKey, userId),
+    createBookingIfAvailable(apiKey, userId, users),
+    updateBooking(apiKey, userId),
+    deleteBooking(apiKey),
+    sendBookingEmail(apiKey, user, users, agentEmail),
+  ];
+
+  const model = new ChatOpenAI({
+    modelName: gptModel,
+    openAIApiKey: env.OPENAI_API_KEY,
+    temperature: 0,
+  });
+
+  /**
+   * Initialize the agent executor with arguments.
+   */
+  const executor = await initializeAgentExecutorWithOptions(tools, model, {
+    agentArgs: {
+      prefix: `You are Cal.ai - a bleeding edge scheduling assistant that interfaces via email.
+Make sure your final answers are definitive, complete and well formatted.
+Sometimes, tools return errors. In this case, try to handle the error intelligently or ask the user for more information.
+Tools will always handle times in UTC, but times sent to users should be formatted per that user's timezone.
+In responses to users, always summarize necessary context and open the door to follow ups. For example "I have booked your chat with @username for 3pm on Wednesday, December 20th, 2023 EST. Please let me know if you need to reschedule."
+If you can't find a referenced user, ask the user for their email or @username. Make sure to specify that usernames require the @username format. Users don't know other users' userIds.
+
+The primary user's id is: ${userId}
+The primary user's username is: ${user.username}
+The current time in the primary user's timezone is: ${now(user.timeZone)}
+The primary user's time zone is: ${user.timeZone}
+The primary user's event types are: ${user.eventTypes
+        .map((e: EventType) => `ID: ${e.id}, Slug: ${e.slug}, Title: ${e.title}, Length: ${e.length};`)
+        .join("\n")}
+The primary user's working hours are: ${user.workingHours
+        .map(
+          (w: WorkingHours) =>
+            `Days: ${w.days.join(", ")}, Start Time (minutes in UTC): ${
+              w.startTime
+            }, End Time (minutes in UTC): ${w.endTime};`
+        )
+        .join("\n")}
+${
+  users.length
+    ? `The email references the following @usernames and emails: ${users
+        .map(
+          (u) =>
+            `${
+              (u.id ? `, id: ${u.id}` : "id: (non user)") +
+              (u.username
+                ? u.type === "fromUsername"
+                  ? `, username: @${u.username}`
+                  : ", username: REDACTED"
+                : ", (no username)") +
+              (u.email
+                ? u.type === "fromEmail"
+                  ? `, email: ${u.email}`
+                  : ", email: REDACTED"
+                : ", (no email)")
+            };`
+        )
+        .join("\n")}`
+    : ""
+}
+            `,
+    },
+    agentType: "openai-functions",
+    returnIntermediateSteps: env.NODE_ENV === "development",
+    verbose: env.NODE_ENV === "development",
+  });
+
+  const result = await executor.call({ input });
+  const { output } = result;
+
+  return output;
+};
+
+export default agent;

apps/ai/src/utils/context.ts

@@ -0,0 +1 @@
+export const context = { apiKey: "", userId: "" };

apps/ai/src/utils/extractUsers.ts

@@ -0,0 +1,85 @@
+import prisma from "@calcom/prisma";
+
+import type { UserList } from "../types/user";
+
+/*
+ * Extracts usernames (@Example) and emails (hi@example.com) from a string
+ */
+export const extractUsers = async (text: string) => {
+  const usernames = text
+    .match(/(?<![a-zA-Z0-9_.])@[a-zA-Z0-9_]+/g)
+    ?.map((username) => username.slice(1).toLowerCase());
+  const emails = text
+    .match(/[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+/g)
+    ?.map((email) => email.toLowerCase());
+
+  const dbUsersFromUsernames = usernames
+    ? await prisma.user.findMany({
+        select: {
+          id: true,
+          username: true,
+          email: true,
+        },
+        where: {
+          username: {
+            in: usernames,
+          },
+        },
+      })
+    : [];
+
+  const usersFromUsernames = usernames
+    ? usernames.map((username) => {
+        const user = dbUsersFromUsernames.find((u) => u.username === username);
+        return user
+          ? {
+              username,
+              id: user.id,
+              email: user.email,
+              type: "fromUsername",
+            }
+          : {
+              username,
+              id: null,
+              email: null,
+              type: "fromUsername",
+            };
+      })
+    : [];
+
+  const dbUsersFromEmails = emails
+    ? await prisma.user.findMany({
+        select: {
+          id: true,
+          email: true,
+          username: true,
+        },
+        where: {
+          email: {
+            in: emails,
+          },
+        },
+      })
+    : [];
+
+  const usersFromEmails = emails
+    ? emails.map((email) => {
+        const user = dbUsersFromEmails.find((u) => u.email === email);
+        return user
+          ? {
+              email,
+              id: user.id,
+              username: user.username,
+              type: "fromEmail",
+            }
+          : {
+              email,
+              id: null,
+              username: null,
+              type: "fromEmail",
+            };
+      })
+    : [];
+
+  return [...usersFromUsernames, ...usersFromEmails] as UserList;
+};

apps/ai/src/utils/host.ts

@@ -0,0 +1,7 @@
+import type { NextRequest } from "next/server";
+
+const getHostFromHeaders = (headers: NextRequest["headers"]): string => {
+  return `https://${headers.get("host")}`;
+};
+
+export default getHostFromHeaders;

apps/ai/src/utils/now.ts

@@ -0,0 +1,5 @@
+export default function now(timeZone: string) {
+  return new Date().toLocaleString("en-US", {
+    timeZone,
+  });
+}

apps/ai/src/utils/sendEmail.ts

@@ -0,0 +1,43 @@
+import mail from "@sendgrid/mail";
+
+const sendgridAPIKey = process.env.SENDGRID_API_KEY as string;
+
+/**
+ * Simply send an email by address, subject, and body.
+ */
+const send = async ({
+  subject,
+  to,
+  cc,
+  from,
+  text,
+  html,
+}: {
+  subject: string;
+  to: string | string[];
+  cc?: string | string[];
+  from: string;
+  text: string;
+  html?: string;
+}): Promise<boolean> => {
+  mail.setApiKey(sendgridAPIKey);
+
+  const msg = {
+    to,
+    cc,
+    from: {
+      email: from,
+      name: "Cal.ai",
+    },
+    text,
+    html,
+    subject,
+  };
+
+  const res = await mail.send(msg);
+  const success = !!res;
+
+  return success;
+};
+
+export default send;

apps/ai/src/utils/verifyParseKey.ts

@@ -0,0 +1,13 @@
+import type { NextRequest } from "next/server";
+
+import { env } from "../env.mjs";
+
+/**
+ * Verifies that the request contains the correct parse key.
+ * env.PARSE_KEY must be configured as a query param in the sendgrid inbound parse settings.
+ */
+export const verifyParseKey = (url: NextRequest["url"]) => {
+  const verified = new URL(url).searchParams.get("parseKey") === env.PARSE_KEY;
+
+  return verified;
+};

apps/ai/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/api/lib/helpers/customPrisma.ts

@@ -1,7 +1,7 @@
-import { PrismaClient } from "@prisma/client";
 import type { NextMiddleware } from "next-api-middleware";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
+import { customPrisma } from "@calcom/prisma";
 
 const LOCAL_CONSOLE_URL = process.env.NEXT_PUBLIC_CONSOLE_URL || CONSOLE_URL;
 
@@ -12,7 +12,7 @@ export const customPrismaClient: NextMiddleware = async (req, res, next) => {
   } = req;
   // If no custom api Id is provided, attach to request the regular cal.com prisma client.
   if (!key) {
-    req.prisma = new PrismaClient();
+    req.prisma = customPrisma();
     await next();
     return;
   }
@@ -26,7 +26,7 @@ export const customPrismaClient: NextMiddleware = async (req, res, next) => {
     res.status(400).json({ error: "no databaseUrl set up at your instance yet" });
     return;
   }
-  req.prisma = new PrismaClient({ datasources: { db: { url: databaseUrl } } });
+  req.prisma = customPrisma({ datasources: { db: { url: databaseUrl } } });
   /* @note:
     In order to skip verifyApiKey for customPrisma requests, 
     we pass isAdmin true, and userId 0, if we detect them later, 

apps/api/lib/helpers/rateLimitApiKey.ts

@@ -0,0 +1,15 @@
+import type { NextMiddleware } from "next-api-middleware";
+
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+
+export const rateLimitApiKey: NextMiddleware = async (req, res, next) => {
+  if (!req.query.apiKey) return res.status(401).json({ message: "No apiKey provided" });
+
+  // TODO: Add a way to add trusted api keys
+  await checkRateLimitAndThrowError({
+    identifier: req.query.apiKey as string,
+    rateLimitingType: "api",
+  });
+
+  await next();
+};

apps/api/lib/helpers/withMiddleware.ts

@@ -12,6 +12,7 @@ import {
   HTTP_GET_OR_POST,
   HTTP_GET_DELETE_PATCH,
 } from "./httpMethods";
+import { rateLimitApiKey } from "./rateLimitApiKey";
 import { verifyApiKey } from "./verifyApiKey";
 import { withPagination } from "./withPagination";
 
@@ -25,6 +26,7 @@ const withMiddleware = label(
     HTTP_DELETE,
     addRequestId,
     verifyApiKey,
+    rateLimitApiKey,
     customPrismaClient,
     extendRequest,
     pagination: withPagination,
@@ -37,6 +39,7 @@ const withMiddleware = label(
     // - Put customPrismaClient before verifyApiKey always.
     "customPrismaClient",
     "verifyApiKey",
+    "rateLimitApiKey",
     "addRequestId",
   ] // <-- Provide a list of middleware to call automatically
 );

apps/api/lib/utils/extractUserIdsFromQuery.ts

@@ -0,0 +1,14 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
+
+export function extractUserIdsFromQuery({ isAdmin, query }: NextApiRequest) {
+  /** Guard: Only admins can query other users */
+  if (!isAdmin) {
+    throw new HttpError({ statusCode: 401, message: "ADMIN required" });
+  }
+  const { userId: userIdOrUserIds } = schemaQuerySingleOrMultipleUserIds.parse(query);
+  return Array.isArray(userIdOrUserIds) ? userIdOrUserIds : [userIdOrUserIds];
+}

apps/api/lib/validations/booking.ts

@@ -58,6 +58,7 @@ export const schemaBookingReadPublic = Booking.extend({
       })
     )
     .optional(),
+  responses: z.record(z.any()).nullable(),
 }).pick({
   id: true,
   userId: true,

apps/api/lib/validations/destination-calendar.ts

@@ -14,9 +14,9 @@ const schemaDestinationCalendarCreateParams = z
   .object({
     integration: z.string(),
     externalId: z.string(),
-    eventTypeId: z.number(),
-    bookingId: z.number(),
-    userId: z.number(),
+    eventTypeId: z.number().optional(),
+    bookingId: z.number().optional(),
+    userId: z.number().optional(),
   })
   .strict();
 

apps/api/lib/validations/event-type.ts

@@ -24,6 +24,11 @@ const hostSchema = _HostModel.pick({
   userId: true,
 });
 
+export const childrenSchema = z.object({
+  id: z.number().int(),
+  userId: z.number().int(),
+});
+
 export const schemaEventTypeBaseBodyParams = EventType.pick({
   title: true,
   description: true,
@@ -33,16 +38,19 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   position: true,
   eventName: true,
   timeZone: true,
+  schedulingType: true,
+  // START Limit future bookings
   periodType: true,
   periodStartDate: true,
-  schedulingType: true,
   periodEndDate: true,
   periodDays: true,
   periodCountCalendarDays: true,
+  // END Limit future bookings
   requiresConfirmation: true,
   disableGuests: true,
   hideCalendarNotes: true,
   minimumBookingNotice: true,
+  parentId: true,
   beforeEventBuffer: true,
   afterEventBuffer: true,
   teamId: true,
@@ -51,8 +59,15 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   slotInterval: true,
   successRedirectUrl: true,
   locations: true,
+  bookingLimits: true,
+  durationLimits: true,
 })
-  .merge(z.object({ hosts: z.array(hostSchema).optional().default([]) }))
+  .merge(
+    z.object({
+      children: z.array(childrenSchema).optional().default([]),
+      hosts: z.array(hostSchema).optional().default([]),
+    })
+  )
   .partial()
   .strict();
 
@@ -66,8 +81,10 @@ const schemaEventTypeCreateParams = z
     recurringEvent: recurringEventInputSchema.optional(),
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
+    seatsShowAvailabilityCount: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
     scheduleId: z.number().optional(),
+    parentId: z.number().optional(),
   })
   .strict();
 
@@ -85,6 +102,7 @@ const schemaEventTypeEditParams = z
     length: z.number().int().optional(),
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
+    seatsShowAvailabilityCount: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
     scheduleId: z.number().optional(),
   })
@@ -119,15 +137,21 @@ export const schemaEventTypeReadPublic = EventType.pick({
   price: true,
   currency: true,
   slotInterval: true,
+  parentId: true,
   successRedirectUrl: true,
   description: true,
   locations: true,
   metadata: true,
   seatsPerTimeSlot: true,
   seatsShowAttendees: true,
+  seatsShowAvailabilityCount: true,
   bookingFields: true,
+  bookingLimits: true,
+  durationLimits: true,
 }).merge(
   z.object({
+    children: z.array(childrenSchema).optional().default([]),
+    hosts: z.array(hostSchema).optional().default([]),
     locations: z
       .array(
         z.object({

apps/api/lib/validations/membership.ts

@@ -13,16 +13,18 @@ const schemaMembershipRequiredParams = z.object({
   teamId: z.number(),
 });
 
-export const membershipCreateBodySchema = Membership.partial({
-  accepted: true,
-  role: true,
-  disableImpersonation: true,
-}).transform((v) => ({
-  accepted: false,
-  role: MembershipRole.MEMBER,
-  disableImpersonation: false,
-  ...v,
-}));
+export const membershipCreateBodySchema = Membership.omit({ id: true })
+  .partial({
+    accepted: true,
+    role: true,
+    disableImpersonation: true,
+  })
+  .transform((v) => ({
+    accepted: false,
+    role: MembershipRole.MEMBER,
+    disableImpersonation: false,
+    ...v,
+  }));
 
 export const membershipEditBodySchema = Membership.omit({
   /** To avoid complication, let's avoid updating these, instead you can delete and create a new invite */

apps/api/lib/validations/shared/queryUserEmail.ts

@@ -0,0 +1,20 @@
+import { withValidation } from "next-validations";
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+// Extracted out as utility function so can be reused
+// at different endpoints that require this validation.
+export const schemaQueryUserEmail = baseApiParams.extend({
+  email: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleUserEmails = z.object({
+  email: z.union([z.string().email(), z.array(z.string().email())]),
+});
+
+export const withValidQueryUserEmail = withValidation({
+  schema: schemaQueryUserEmail,
+  type: "Zod",
+  mode: "query",
+});

apps/api/next.d.ts

@@ -1,7 +1,7 @@
 import type { Session } from "next-auth";
 import type { NextApiRequest as BaseNextApiRequest } from "next/types";
 
-import type { PrismaClient } from "@calcom/prisma/client";
+import type { PrismaClient } from "@calcom/prisma";
 
 export type * from "next/types";
 

apps/api/package.json

@@ -40,6 +40,6 @@
     "typescript": "^4.9.4",
     "tzdata": "^1.0.30",
     "uuid": "^8.3.2",
-    "zod": "^3.20.2"
+    "zod": "^3.22.2"
   }
 }

apps/api/pages/api/availability/_get.ts

@@ -10,9 +10,9 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
 
 /**
  * @swagger
- * /availability:
+ * /teams/{teamId}/availability:
  *   get:
- *     summary: Find user or team availability
+ *     summary: Find team availability
  *     parameters:
  *       - in: query
  *         name: apiKey
@@ -21,25 +21,14 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *           type: string
  *         example: "1234abcd5678efgh"
  *         description: Your API key
- *       - in: query
- *         name: userId
- *         schema:
- *           type: integer
- *         example: 101
- *         description: ID of the user to fetch the availability for
- *       - in: query
+ *       - in: path
  *         name: teamId
+ *         required: true
  *         schema:
  *           type: integer
  *         example: 123
  *         description: ID of the team to fetch the availability for
  *       - in: query
- *         name: username
- *         schema:
- *           type: string
- *         example: "alice"
- *         description: username of the user to fetch the availability for
- *       - in: query
  *         name: dateFrom
  *         schema:
  *           type: string
@@ -59,7 +48,7 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *           type: integer
  *         example: 123
  *         description: Event Type ID of the event type to fetch the availability for
- *     operationId: availability
+ *     operationId: team-availability
  *     tags:
  *     - availability
  *     responses:
@@ -96,7 +85,89 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *       401:
  *        description: Authorization information is missing or invalid.
  *       404:
- *         description: User not found | Team not found | Team has no members
+ *         description: Team not found | Team has no members
+ *
+ * /availability:
+ *   get:
+ *     summary: Find user availability
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         example: "1234abcd5678efgh"
+ *         description: Your API key
+ *       - in: query
+ *         name: userId
+ *         schema:
+ *           type: integer
+ *         example: 101
+ *         description: ID of the user to fetch the availability for
+ *       - in: query
+ *         name: username
+ *         schema:
+ *           type: string
+ *         example: "alice"
+ *         description: username of the user to fetch the availability for
+ *       - in: query
+ *         name: dateFrom
+ *         schema:
+ *           type: string
+ *           format: date
+ *         example: "2023-05-14 00:00:00"
+ *         description: Start Date of the availability query
+ *       - in: query
+ *         name: dateTo
+ *         schema:
+ *           type: string
+ *           format: date
+ *         example: "2023-05-20 00:00:00"
+ *         description: End Date of the availability query
+ *       - in: query
+ *         name: eventTypeId
+ *         schema:
+ *           type: integer
+ *         example: 123
+ *         description: Event Type ID of the event type to fetch the availability for
+ *     operationId: user-availability
+ *     tags:
+ *     - availability
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               type: object
+ *               example:
+ *                 busy:
+ *                   - start: "2023-05-14T10:00:00.000Z"
+ *                     end: "2023-05-14T11:00:00.000Z"
+ *                     title: "Team meeting between Alice and Bob"
+ *                   - start: "2023-05-15T14:00:00.000Z"
+ *                     end: "2023-05-15T15:00:00.000Z"
+ *                     title: "Project review between Carol and Dave"
+ *                   - start: "2023-05-16T09:00:00.000Z"
+ *                     end: "2023-05-16T10:00:00.000Z"
+ *                   - start: "2023-05-17T13:00:00.000Z"
+ *                     end: "2023-05-17T14:00:00.000Z"
+ *                 timeZone: "America/New_York"
+ *                 workingHours:
+ *                   - days: [1, 2, 3, 4, 5]
+ *                     startTime: 540
+ *                     endTime: 1020
+ *                     userId: 101
+ *                 dateOverrides:
+ *                   - date: "2023-05-15"
+ *                     startTime: 600
+ *                     endTime: 960
+ *                     userId: 101
+ *                 currentSeats: 4
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: User not found
  */
 interface MemberRoles {
   [userId: number | string]: MembershipRole;

apps/api/pages/api/bookings/_post.ts

@@ -94,6 +94,9 @@ import { defaultResponder } from "@calcom/lib/server";
  *               seatsShowAttendees:
  *                 type: boolean
  *                 description: 'Share Attendee information in seats'
+ *               seatsShowAvailabilityCount:
+ *                 type: boolean
+ *                 description: 'Show the number of available seats'
  *               smsReminderNumber:
  *                 type: number
  *                 description: 'SMS reminder number'

apps/api/pages/api/destination-calendars/[id].ts

@@ -1,240 +0,0 @@
-import type { NextApiRequest, NextApiResponse } from "next";
-
-import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import type { DestinationCalendarResponse } from "~/lib/types";
-import {
-  schemaDestinationCalendarEditBodyParams,
-  schemaDestinationCalendarReadPublic,
-} from "~/lib/validations/destination-calendar";
-import {
-  schemaQueryIdParseInt,
-  withValidQueryIdTransformParseInt,
-} from "~/lib/validations/shared/queryIdTransformParseInt";
-
-export async function destionationCalendarById(
-  { method, query, body, userId, prisma }: NextApiRequest,
-  res: NextApiResponse<DestinationCalendarResponse>
-) {
-  const safeQuery = schemaQueryIdParseInt.safeParse(query);
-  const safeBody = schemaDestinationCalendarEditBodyParams.safeParse(body);
-  if (!safeQuery.success) {
-    res.status(400).json({ message: "Your query was invalid" });
-    return;
-  }
-  const data = await prisma.destinationCalendar.findMany({ where: { userId } });
-  const userDestinationCalendars = data.map((destinationCalendar) => destinationCalendar.id);
-  //  FIXME: Should we also check ownership of bokingId and eventTypeId to avoid users cross-pollinating other users calendars.
-  // On a related note, moving from sequential integer IDs to UUIDs would be a good idea. and maybe help avoid having this problem.
-  if (userDestinationCalendars.includes(safeQuery.data.id)) res.status(401).json({ message: "Unauthorized" });
-  else {
-    switch (method) {
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   get:
-       *     summary: Find a destination calendar
-       *     parameters:
-       *       - in: path
-       *         name: id
-       *         schema:
-       *           type: integer
-       *         required: true
-       *         description: ID of the destination calendar to get
-       *       - in: query
-       *         name: apiKey
-       *         required: true
-       *         schema:
-       *           type: string
-       *         description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       200:
-       *         description: OK
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       *       404:
-       *         description: DestinationCalendar was not found
-       *   patch:
-       *     summary: Edit an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to edit
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     requestBody:
-       *       description: Create a new booking related to one of your event-types
-       *       required: true
-       *       content:
-       *         application/json:
-       *           schema:
-       *             type: object
-       *             properties:
-       *               integration:
-       *                 type: string
-       *                 description: 'The integration'
-       *               externalId:
-       *                 type: string
-       *                 description: 'The external ID of the integration'
-       *               eventTypeId:
-       *                 type: integer
-       *                 description: 'The ID of the eventType it is associated with'
-       *               bookingId:
-       *                 type: integer
-       *                 description: 'The booking ID it is associated with'
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar edited successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar body is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       *   delete:
-       *     summary: Remove an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to delete
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar removed successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar id is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "GET":
-        await prisma.destinationCalendar
-          .findUnique({ where: { id: safeQuery.data.id } })
-          .then((data) => schemaDestinationCalendarReadPublic.parse(data))
-          .then((destination_calendar) => res.status(200).json({ destination_calendar }))
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   patch:
-       *     summary: Edit an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to edit
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar edited successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar body is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "PATCH":
-        if (!safeBody.success) {
-          {
-            res.status(400).json({ message: "Invalid request body" });
-            return;
-          }
-        }
-        await prisma.destinationCalendar
-          .update({ where: { id: safeQuery.data.id }, data: safeBody.data })
-          .then((data) => schemaDestinationCalendarReadPublic.parse(data))
-          .then((destination_calendar) => res.status(200).json({ destination_calendar }))
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-      /**
-       * @swagger
-       * /destination-calendars/{id}:
-       *   delete:
-       *     summary: Remove an existing destination calendar
-       *     parameters:
-       *      - in: path
-       *        name: id
-       *        schema:
-       *          type: integer
-       *        required: true
-       *        description: ID of the destination calendar to delete
-       *      - in: query
-       *        name: apiKey
-       *        required: true
-       *        schema:
-       *          type: string
-       *        description: Your API key
-       *     tags:
-       *      - destination-calendars
-       *     responses:
-       *       201:
-       *         description: OK, destinationCalendar removed successfuly
-       *       400:
-       *        description: Bad request. DestinationCalendar id is invalid.
-       *       401:
-       *        description: Authorization information is missing or invalid.
-       */
-      case "DELETE":
-        await prisma.destinationCalendar
-          .delete({
-            where: { id: safeQuery.data.id },
-          })
-          .then(() =>
-            res.status(200).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} deleted`,
-            })
-          )
-          .catch((error: Error) =>
-            res.status(404).json({
-              message: `DestinationCalendar with id: ${safeQuery.data.id} not found`,
-              error,
-            })
-          );
-        break;
-
-      default:
-        res.status(405).json({ message: "Method not allowed" });
-        break;
-    }
-  }
-}
-
-export default withMiddleware("HTTP_GET_DELETE_PATCH")(
-  withValidQueryIdTransformParseInt(destionationCalendarById)
-);

apps/api/pages/api/destination-calendars/[id]/_auth-middleware.ts

@@ -0,0 +1,32 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+async function authMiddleware(req: NextApiRequest) {
+  const { userId, isAdmin, prisma } = req;
+  const { id } = schemaQueryIdParseInt.parse(req.query);
+  if (isAdmin) return;
+  const userEventTypes = await prisma.eventType.findMany({
+    where: { userId },
+    select: { id: true },
+  });
+
+  const userEventTypeIds = userEventTypes.map((eventType) => eventType.id);
+
+  const destinationCalendar = await prisma.destinationCalendar.findFirst({
+    where: {
+      AND: [
+        { id },
+        {
+          OR: [{ userId }, { eventTypeId: { in: userEventTypeIds } }],
+        },
+      ],
+    },
+  });
+  if (!destinationCalendar)
+    throw new HttpError({ statusCode: 404, message: "Destination calendar not found" });
+}
+
+export default authMiddleware;

apps/api/pages/api/destination-calendars/[id]/_delete.ts

@@ -0,0 +1,42 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   delete:
+ *     summary: Remove an existing destination calendar
+ *     parameters:
+ *      - in: path
+ *        name: id
+ *        schema:
+ *          type: integer
+ *        required: true
+ *        description: ID of the destination calendar to delete
+ *      - in: query
+ *        name: apiKey
+ *        required: true
+ *        schema:
+ *          type: string
+ *        description: Your API key
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK, destinationCalendar removed successfully
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *        description: Destination calendar not found
+ */
+export async function deleteHandler(req: NextApiRequest) {
+  const { prisma, query } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+  await prisma.destinationCalendar.delete({ where: { id } });
+  return { message: `OK, Destination Calendar removed successfully` };
+}
+
+export default defaultResponder(deleteHandler);

apps/api/pages/api/destination-calendars/[id]/_get.ts

@@ -0,0 +1,47 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import { schemaDestinationCalendarReadPublic } from "~/lib/validations/destination-calendar";
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   get:
+ *     summary: Find a destination calendar
+ *     parameters:
+ *       - in: path
+ *         name: id
+ *         schema:
+ *           type: integer
+ *         required: true
+ *         description: ID of the destination calendar to get
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: Destination calendar not found
+ */
+export async function getHandler(req: NextApiRequest) {
+  const { prisma, query } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+
+  const destinationCalendar = await prisma.destinationCalendar.findUnique({
+    where: { id },
+  });
+
+  return { destinationCalendar: schemaDestinationCalendarReadPublic.parse({ ...destinationCalendar }) };
+}
+
+export default defaultResponder(getHandler);

apps/api/pages/api/destination-calendars/[id]/_patch.ts

@@ -0,0 +1,71 @@
+import type { NextApiRequest } from "next";
+
+import { defaultResponder } from "@calcom/lib/server";
+
+import {
+  schemaDestinationCalendarEditBodyParams,
+  schemaDestinationCalendarReadPublic,
+} from "~/lib/validations/destination-calendar";
+import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+
+/**
+ * @swagger
+ * /destination-calendars/{id}:
+ *   patch:
+ *     summary: Edit an existing destination calendar
+ *     parameters:
+ *      - in: path
+ *        name: id
+ *        schema:
+ *          type: integer
+ *        required: true
+ *        description: ID of the destination calendar to edit
+ *      - in: query
+ *        name: apiKey
+ *        required: true
+ *        schema:
+ *          type: string
+ *        description: Your API key
+ *     requestBody:
+ *       description: Create a new booking related to one of your event-types
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             properties:
+ *               integration:
+ *                 type: string
+ *                 description: 'The integration'
+ *               externalId:
+ *                 type: string
+ *                 description: 'The external ID of the integration'
+ *               eventTypeId:
+ *                 type: integer
+ *                 description: 'The ID of the eventType it is associated with'
+ *               bookingId:
+ *                 type: integer
+ *                 description: 'The booking ID it is associated with'
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *        description: Destination calendar not found
+ */
+export async function patchHandler(req: NextApiRequest) {
+  const { prisma, query, body } = req;
+  const { id } = schemaQueryIdParseInt.parse(query);
+  const parsedBody = schemaDestinationCalendarEditBodyParams.parse(body);
+
+  const destinationCalendar = await prisma.destinationCalendar.update({
+    where: { id },
+    data: parsedBody,
+  });
+  return { destinationCalendar: schemaDestinationCalendarReadPublic.parse(destinationCalendar) };
+}
+
+export default defaultResponder(patchHandler);

apps/api/pages/api/destination-calendars/[id]/index.ts

@@ -0,0 +1,18 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+import { withMiddleware } from "~/lib/helpers/withMiddleware";
+
+import authMiddleware from "./_auth-middleware";
+
+export default withMiddleware()(
+  defaultResponder(async (req: NextApiRequest, res: NextApiResponse) => {
+    await authMiddleware(req);
+    return defaultHandler({
+      GET: import("./_get"),
+      PATCH: import("./_patch"),
+      DELETE: import("./_delete"),
+    })(req, res);
+  })
+);

apps/api/pages/api/destination-calendars/_get.ts

@@ -0,0 +1,58 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+
+import { extractUserIdsFromQuery } from "~/lib/utils/extractUserIdsFromQuery";
+import { schemaDestinationCalendarReadPublic } from "~/lib/validations/destination-calendar";
+
+/**
+ * @swagger
+ * /destination-calendars:
+ *   get:
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     summary: Find all destination calendars
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       200:
+ *         description: OK
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ *       404:
+ *         description: No destination calendars were found
+ */
+async function getHandler(req: NextApiRequest) {
+  const { userId, prisma } = req;
+  const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
+
+  const userEventTypes = await prisma.eventType.findMany({
+    where: { userId: { in: userIds } },
+    select: { id: true },
+  });
+
+  const userEventTypeIds = userEventTypes.map((eventType) => eventType.id);
+
+  const allDestinationCalendars = await prisma.destinationCalendar.findMany({
+    where: {
+      OR: [{ userId: { in: userIds } }, { eventTypeId: { in: userEventTypeIds } }],
+    },
+  });
+
+  if (allDestinationCalendars.length === 0)
+    new HttpError({ statusCode: 404, message: "No destination calendars were found" });
+
+  return {
+    destinationCalendars: allDestinationCalendars.map((destinationCalendar) =>
+      schemaDestinationCalendarReadPublic.parse(destinationCalendar)
+    ),
+  };
+}
+
+export default defaultResponder(getHandler);

apps/api/pages/api/destination-calendars/_post.ts

@@ -0,0 +1,99 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+import { defaultResponder } from "@calcom/lib/server";
+
+import {
+  schemaDestinationCalendarReadPublic,
+  schemaDestinationCalendarCreateBodyParams,
+} from "~/lib/validations/destination-calendar";
+
+/**
+ * @swagger
+ * /destination-calendars:
+ *   post:
+ *     parameters:
+ *       - in: query
+ *         name: apiKey
+ *         required: true
+ *         schema:
+ *           type: string
+ *         description: Your API key
+ *     summary: Creates a new destination calendar
+ *     requestBody:
+ *       description: Create a new destination calendar for your events
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             type: object
+ *             required:
+ *               - integration
+ *               - externalId
+ *             properties:
+ *               integration:
+ *                 type: string
+ *                 description: 'The integration'
+ *               externalId:
+ *                 type: string
+ *                 description: 'The external ID of the integration'
+ *               eventTypeId:
+ *                 type: integer
+ *                 description: 'The ID of the eventType it is associated with'
+ *               bookingId:
+ *                 type: integer
+ *                 description: 'The booking ID it is associated with'
+ *     tags:
+ *      - destination-calendars
+ *     responses:
+ *       201:
+ *         description: OK, destination calendar created
+ *       400:
+ *        description: Bad request. DestinationCalendar body is invalid.
+ *       401:
+ *        description: Authorization information is missing or invalid.
+ */
+async function postHandler(req: NextApiRequest) {
+  const { userId, isAdmin, prisma, body } = req;
+
+  const parsedBody = schemaDestinationCalendarCreateBodyParams.parse(body);
+
+  await checkPermissions(req, userId);
+
+  if (!parsedBody.eventTypeId) {
+    parsedBody.userId = userId;
+  }
+
+  if (isAdmin) {
+    parsedBody.userId = parsedBody.userId || userId;
+  }
+
+  const destination_calendar = await prisma.destinationCalendar.create({ data: { ...parsedBody } });
+
+  return {
+    destinationCalendar: schemaDestinationCalendarReadPublic.parse(destination_calendar),
+    message: "Destination calendar created successfully",
+  };
+}
+
+async function checkPermissions(req: NextApiRequest, userId: number) {
+  const { isAdmin } = req;
+  const body = schemaDestinationCalendarCreateBodyParams.parse(req.body);
+
+  /* Non-admin users can only create destination calendars for themselves */
+  if (!isAdmin && body.userId)
+    throw new HttpError({
+      statusCode: 401,
+      message: "ADMIN required for `userId`",
+    });
+  /* Admin users are required to pass in a userId */
+  if (isAdmin && !body.userId) throw new HttpError({ statusCode: 400, message: "`userId` required" });
+  /* User should only be able to create for their own destination calendars*/
+  if (!isAdmin && body.eventTypeId) {
+    const ownsEventType = await req.prisma.eventType.findFirst({ where: { id: body.eventTypeId, userId } });
+    if (!ownsEventType) throw new HttpError({ statusCode: 401, message: "Unauthorized" });
+  }
+  // TODO:: Add support for team event types with validation
+}
+
+export default defaultResponder(postHandler);

apps/api/pages/api/destination-calendars/index.ts

@@ -1,114 +1,10 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import { defaultHandler } from "@calcom/lib/server";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
-import type { DestinationCalendarResponse, DestinationCalendarsResponse } from "~/lib/types";
-import {
-  schemaDestinationCalendarCreateBodyParams,
-  schemaDestinationCalendarReadPublic,
-} from "~/lib/validations/destination-calendar";
 
-async function createOrlistAllDestinationCalendars(
-  { method, body, userId, prisma }: NextApiRequest,
-  res: NextApiResponse<DestinationCalendarsResponse | DestinationCalendarResponse>
-) {
-  if (method === "GET") {
-    /**
-     * @swagger
-     * /destination-calendars:
-     *   get:
-     *     parameters:
-     *       - in: query
-     *         name: apiKey
-     *         required: true
-     *         schema:
-     *           type: string
-     *         description: Your API key
-     *     summary: Find all destination calendars
-     *     tags:
-     *      - destination-calendars
-     *     responses:
-     *       200:
-     *         description: OK
-     *       401:
-     *        description: Authorization information is missing or invalid.
-     *       404:
-     *         description: No destination calendars were found
-     */
-    const data = await prisma.destinationCalendar.findMany({ where: { userId } });
-    const destination_calendars = data.map((destinationCalendar) =>
-      schemaDestinationCalendarReadPublic.parse(destinationCalendar)
-    );
-    if (data) res.status(200).json({ destination_calendars });
-    else
-      (error: Error) =>
-        res.status(404).json({
-          message: "No DestinationCalendars were found",
-          error,
-        });
-  } else if (method === "POST") {
-    /**
-     * @swagger
-     * /destination-calendars:
-     *   post:
-     *     parameters:
-     *       - in: query
-     *         name: apiKey
-     *         required: true
-     *         schema:
-     *           type: string
-     *         description: Your API key
-     *     summary: Creates a new destination calendar
-     *     requestBody:
-     *       description: Create a new destination calendar for your events
-     *       required: true
-     *       content:
-     *         application/json:
-     *           schema:
-     *             type: object
-     *             required:
-     *               - integration
-     *               - externalId
-     *             properties:
-     *               integration:
-     *                 type: string
-     *                 description: 'The integration'
-     *               externalId:
-     *                 type: string
-     *                 description: 'The external ID of the integration'
-     *               eventTypeId:
-     *                 type: integer
-     *                 description: 'The ID of the eventType it is associated with'
-     *               bookingId:
-     *                 type: integer
-     *                 description: 'The booking ID it is associated with'
-     *     tags:
-     *      - destination-calendars
-     *     responses:
-     *       201:
-     *         description: OK, destination calendar created
-     *       400:
-     *        description: Bad request. DestinationCalendar body is invalid.
-     *       401:
-     *        description: Authorization information is missing or invalid.
-     */
-    const safe = schemaDestinationCalendarCreateBodyParams.safeParse(body);
-    if (!safe.success) {
-      res.status(400).json({ message: "Invalid request body" });
-      return;
-    }
-
-    const data = await prisma.destinationCalendar.create({ data: { ...safe.data, userId } });
-    const destination_calendar = schemaDestinationCalendarReadPublic.parse(data);
-
-    if (destination_calendar)
-      res.status(201).json({ destination_calendar, message: "DestinationCalendar created successfully" });
-    else
-      (error: Error) =>
-        res.status(400).json({
-          message: "Could not create new destinationCalendar",
-          error,
-        });
-  } else res.status(405).json({ message: `Method ${method} not allowed` });
-}
-
-export default withMiddleware("HTTP_GET_OR_POST")(createOrlistAllDestinationCalendars);
+export default withMiddleware()(
+  defaultHandler({
+    GET: import("./_get"),
+    POST: import("./_post"),
+  })
+);

apps/api/pages/api/event-types/[id]/_get.ts

@@ -52,6 +52,7 @@ export async function getHandler(req: NextApiRequest) {
       team: { select: { slug: true } },
       users: true,
       owner: { select: { username: true, id: true } },
+      children: { select: { id: true, userId: true } },
     },
   });
   await checkPermissions(req, eventType);

apps/api/pages/api/event-types/[id]/_patch.ts

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import type { z } from "zod";
 
@@ -146,6 +146,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
  *               seatsShowAttendees:
  *                 type: boolean
  *                 description: 'Share Attendee information in seats'
+ *               seatsShowAvailabilityCount:
+ *                 type: boolean
+ *                 description: 'Show the number of available seats'
  *               locations:
  *                 type: array
  *                 description: A list of all available locations for the event type
@@ -202,10 +205,19 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 export async function patchHandler(req: NextApiRequest) {
   const { prisma, query, body } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
-  const { hosts = [], ...parsedBody } = schemaEventTypeEditBodyParams.parse(body);
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    /** FIXME: Updating event-type children from API not supported for now  */
+    children: _,
+    ...parsedBody
+  } = schemaEventTypeEditBodyParams.parse(body);
 
   const data: Prisma.EventTypeUpdateArgs["data"] = {
     ...parsedBody,
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   if (hosts) {

apps/api/pages/api/event-types/_get.ts

@@ -2,7 +2,7 @@ import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
-import type { PrismaClient } from "@calcom/prisma/client";
+import type { PrismaClient } from "@calcom/prisma";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
@@ -46,6 +46,7 @@ async function getHandler(req: NextApiRequest) {
       team: { select: { slug: true } },
       users: true,
       owner: { select: { username: true, id: true } },
+      children: { select: { id: true, userId: true } },
     },
   });
   // this really should return [], but backwards compatibility..

apps/api/pages/api/event-types/_post.ts

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
@@ -6,7 +6,9 @@ import { defaultResponder } from "@calcom/lib/server";
 
 import { schemaEventTypeCreateBodyParams, schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 
+import checkParentEventOwnership from "./_utils/checkParentEventOwnership";
 import checkTeamEventEditPermission from "./_utils/checkTeamEventEditPermission";
+import checkUserMembership from "./_utils/checkUserMembership";
 import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 
 /**
@@ -118,10 +120,13 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *               schedulingType:
  *                 type: string
  *                 description: The type of scheduling if a Team event. Required for team events only
- *                 enum: [ROUND_ROBIN, COLLECTIVE]
+ *                 enum: [ROUND_ROBIN, COLLECTIVE, MANAGED]
  *               price:
  *                 type: integer
  *                 description: Price of the event type booking
+ *               parentId:
+ *                 type: integer
+ *                 description: EventTypeId of the parent managed event
  *               currency:
  *                 type: string
  *                 description: Currency acronym. Eg- usd, eur, gbp, etc.
@@ -259,16 +264,30 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 async function postHandler(req: NextApiRequest) {
   const { userId, isAdmin, prisma, body } = req;
 
-  const { hosts = [], ...parsedBody } = schemaEventTypeCreateBodyParams.parse(body || {});
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    /** FIXME: Adding event-type children from API not supported for now  */
+    children: _,
+    ...parsedBody
+  } = schemaEventTypeCreateBodyParams.parse(body || {});
 
   let data: Prisma.EventTypeCreateArgs["data"] = {
     ...parsedBody,
     userId,
     users: { connect: { id: userId } },
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   await checkPermissions(req);
 
+  if (parsedBody.parentId) {
+    await checkParentEventOwnership(req);
+    await checkUserMembership(req);
+  }
+
   if (isAdmin && parsedBody.userId) {
     data = { ...parsedBody, users: { connect: { id: parsedBody.userId } } };
   }

apps/api/pages/api/event-types/_utils/checkParentEventOwnership.ts

@@ -0,0 +1,56 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+/**
+ * Checks if a user, identified by the provided userId, has ownership (or admin rights) over
+ * the team associated with the event type identified by the parentId.
+ *
+ * @param req - The current request
+ *
+ * @throws {HttpError} If the parent event type is not found,
+ *                     if the parent event type doesn't belong to any team,
+ *                     or if the user doesn't have ownership or admin rights to the associated team.
+ */
+export default async function checkParentEventOwnership(req: NextApiRequest) {
+  const { userId, prisma, body } = req;
+  /** These are already parsed upstream, we can assume they're good here. */
+  const parentId = Number(body.parentId);
+  const parentEventType = await prisma.eventType.findUnique({
+    where: {
+      id: parentId,
+    },
+    select: {
+      teamId: true,
+    },
+  });
+
+  if (!parentEventType) {
+    throw new HttpError({
+      statusCode: 404,
+      message: "Parent event type not found.",
+    });
+  }
+
+  if (!parentEventType.teamId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "This event type is not capable of having children",
+    });
+  }
+
+  const teamMember = await prisma.membership.findFirst({
+    where: {
+      teamId: parentEventType.teamId,
+      userId: userId,
+      OR: [{ role: "OWNER" }, { role: "ADMIN" }],
+    },
+  });
+
+  if (!teamMember) {
+    throw new HttpError({
+      statusCode: 403,
+      message: "User is not authorized to access the team to which the parent event type belongs.",
+    });
+  }
+}

apps/api/pages/api/event-types/_utils/checkUserMembership.ts

@@ -0,0 +1,57 @@
+import type { NextApiRequest } from "next";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+/**
+ * Checks if a user, identified by the provided userId, is a member of the team associated
+ * with the event type identified by the parentId.
+ *
+ * @param req - The current request
+ *
+ * @throws {HttpError} If the event type is not found,
+ *                     if the event type doesn't belong to any team,
+ *                     or if the user isn't a member of the associated team.
+ */
+export default async function checkUserMembership(req: NextApiRequest) {
+  const { prisma, body } = req;
+  /** These are already parsed upstream, we can assume they're good here. */
+  const parentId = Number(body.parentId);
+  const userId = Number(body.userId);
+  const parentEventType = await prisma.eventType.findUnique({
+    where: {
+      id: parentId,
+    },
+    select: {
+      teamId: true,
+    },
+  });
+
+  if (!parentEventType) {
+    throw new HttpError({
+      statusCode: 404,
+      message: "Event type not found.",
+    });
+  }
+
+  if (!parentEventType.teamId) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "This event type is not capable of having children.",
+    });
+  }
+
+  const teamMember = await prisma.membership.findFirst({
+    where: {
+      teamId: parentEventType.teamId,
+      userId: userId,
+      accepted: true,
+    },
+  });
+
+  if (!teamMember) {
+    throw new HttpError({
+      statusCode: 400,
+      message: "User is not a team member.",
+    });
+  }
+}

apps/api/pages/api/slots/_get.ts

@@ -3,7 +3,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { createContext } from "@calcom/trpc/server/createContext";
-import { viewerRouter } from "@calcom/trpc/server/routers/viewer/_router";
+import { slotsRouter } from "@calcom/trpc/server/routers/viewer/slots/_router";
 
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
@@ -11,10 +11,10 @@ import { getHTTPStatusCodeFromError } from "@trpc/server/http";
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   /** @see https://trpc.io/docs/server-side-calls */
   const ctx = await createContext({ req, res });
-  const caller = viewerRouter.createCaller(ctx);
+  const caller = slotsRouter.createCaller(ctx);
   try {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return await caller.slots.getSchedule(req.query as any /* Let tRPC handle this */);
+    return await caller.getSchedule(req.query as any /* Let tRPC handle this */);
   } catch (cause) {
     if (cause instanceof TRPCError) {
       const statusCode = getHTTPStatusCodeFromError(cause);

apps/api/pages/api/users/_get.ts

@@ -4,6 +4,7 @@ import type { NextApiRequest } from "next";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
+import { schemaQuerySingleOrMultipleUserEmails } from "~/lib/validations/shared/queryUserEmail";
 import { schemaUsersReadPublic } from "~/lib/validations/user";
 
 /**
@@ -19,6 +20,17 @@ import { schemaUsersReadPublic } from "~/lib/validations/user";
  *         schema:
  *           type: string
  *         description: Your API key
+ *       - in: query
+ *         name: email
+ *         required: false
+ *         schema:
+ *          type: array
+ *          items:
+ *            type: string
+ *            format: email
+ *         style: form
+ *         explode: true
+ *         description: The email address or an array of email addresses to filter by
  *     tags:
  *     - users
  *     responses:
@@ -39,6 +51,14 @@ export async function getHandler(req: NextApiRequest) {
   const where: Prisma.UserWhereInput = {};
   // If user is not ADMIN, return only his data.
   if (!isAdmin) where.id = userId;
+
+  if (req.query.email) {
+    const validationResult = schemaQuerySingleOrMultipleUserEmails.parse(req.query);
+    where.email = {
+      in: Array.isArray(validationResult.email) ? validationResult.email : [validationResult.email],
+    };
+  }
+
   const [total, data] = await prisma.$transaction([
     prisma.user.count({ where }),
     prisma.user.findMany({ where, take, skip }),

apps/api/test/lib/bookings/_post.test.ts

@@ -1,3 +1,6 @@
+// TODO: Fix tests (These test were never running due to the vitest workspace config)
+import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
+
 import type { Request, Response } from "express";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createMocks } from "node-mocks-http";
@@ -8,7 +11,6 @@ import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
 import { buildBooking, buildEventType, buildWebhook } from "@calcom/lib/test/builder";
 import prisma from "@calcom/prisma";
 
-import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
 import handler from "../../../pages/api/bookings/_post";
 
 type CustomNextApiRequest = NextApiRequest & Request;
@@ -20,7 +22,7 @@ vi.mock("@calcom/lib/server/i18n", () => {
   };
 });
 
-describe("POST /api/bookings", () => {
+describe.skipIf(true)("POST /api/bookings", () => {
   describe("Errors", () => {
     test("Missing required data", async () => {
       const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
@@ -30,7 +32,7 @@ describe("POST /api/bookings", () => {
 
       await handler(req, res);
 
-      expect(res._getStatusCode()).toBe(400);
+      expect(res.statusCode).toBe(400);
       expect(JSON.parse(res._getData())).toEqual(
         expect.objectContaining({
           message:

apps/api/test/lib/middleware/addRequestId.test.ts

@@ -0,0 +1,36 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import { addRequestId } from "../../../lib/helpers/addRequestid";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+describe("Adds a request ID", () => {
+  it("Should attach a request ID to the request", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: addRequestId,
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(200);
+    expect(res.getHeader("Calcom-Response-ID")).toBeDefined();
+  });
+});

apps/api/test/lib/middleware/httpMethods.test.ts

@@ -0,0 +1,53 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import { httpMethod } from "../../../lib/helpers/httpMethods";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+describe("HTTP Methods function only allows the correct HTTP Methods", () => {
+  it("Should allow the passed in Method", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: httpMethod("POST"),
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(200);
+  });
+  it("Should allow the passed in Method", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: httpMethod("GET"),
+    };
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(405);
+  });
+});

apps/api/test/lib/middleware/verifyApiKey.test.ts

@@ -0,0 +1,76 @@
+import type { Request, Response } from "express";
+import type { NextApiRequest, NextApiResponse } from "next";
+import { createMocks } from "node-mocks-http";
+import { describe, vi, it, expect, afterEach } from "vitest";
+
+import checkLicense from "@calcom/features/ee/common/server/checkLicense";
+
+import { isAdminGuard } from "~/lib/utils/isAdmin";
+
+import { verifyApiKey } from "../../../lib/helpers/verifyApiKey";
+
+type CustomNextApiRequest = NextApiRequest & Request;
+type CustomNextApiResponse = NextApiResponse & Response;
+
+afterEach(() => {
+  vi.resetAllMocks();
+});
+
+vi.mock("@calcom/features/ee/common/server/checkLicense", () => {
+  return {
+    default: vi.fn(),
+  };
+});
+
+vi.mock("~/lib/utils/isAdmin", () => {
+  return {
+    isAdminGuard: vi.fn(),
+  };
+});
+
+describe("Verify API key", () => {
+  it("It should throw an error if the api key is not valid", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: verifyApiKey,
+    };
+
+    vi.mocked(checkLicense).mockResolvedValue(false);
+    vi.mocked(isAdminGuard).mockResolvedValue(false);
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(401);
+  });
+  it("It should thow an error if no api key is provided", async () => {
+    const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({
+      method: "POST",
+      body: {},
+    });
+
+    const middleware = {
+      fn: verifyApiKey,
+    };
+
+    vi.mocked(checkLicense).mockResolvedValue(true);
+    vi.mocked(isAdminGuard).mockResolvedValue(false);
+
+    const serverNext = vi.fn((next: void) => Promise.resolve(next));
+
+    const middlewareSpy = vi.spyOn(middleware, "fn");
+
+    await middleware.fn(req, res, serverNext);
+
+    expect(middlewareSpy).toBeCalled();
+    expect(res.statusCode).toBe(401);
+  });
+});

apps/storybook/.storybook/i18next.js

@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+const ns = ["common"];
+const supportedLngs = ["en", "fr"];
+const resources = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {};
+    acc[lng] = {
+      ...acc[lng],
+      [n]: require(`../../web/public/static/locales/${lng}/${n}.json`),
+    };
+  });
+  return acc;
+}, {});
+
 i18n.use(initReactI18next).init({
-  resources: [],
   debug: true,
+  fallbackLng: "en",
+  defaultNS: "common",
+  ns,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: { useSuspense: true },
+  resources,
 });
 
 export default i18n;

apps/storybook/.storybook/preview.jsx

@@ -21,6 +21,14 @@ export const parameters = {
     push() {},
     Provider: AppRouterContext.Provider,
   },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };
 
 addDecorator((storyFn) => (

apps/storybook/components/VariantsTable.tsx

@@ -18,6 +18,7 @@ export function VariantsTable({
   const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
   return (
     <div
+      id="light-variant"
       className={classNames(
         isDark &&
           "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
@@ -43,7 +44,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark" className="dark">
+        <div id="dark-variant" data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>

apps/storybook/intro.stories.mdx

@@ -13,7 +13,7 @@ import { Meta } from "@storybook/addon-docs";
     <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
       Figma
     </a>{" "}
-    library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to
+    library is available for anyone to view and use. If you have any questions or concerns, please reach out to
     the design team.
   </p>
 </div>

apps/storybook/styles/storybook-styles.css

@@ -248,10 +248,10 @@
     --cal-bg-inverted: #f3f4f6;
 
     /* background -> components*/
-    --cal-bg-info: #dee9fc;
-    --cal-bg-success: #e2fbe8;
-    --cal-bg-attention: #fceed8;
-    --cal-bg-error: #f9e3e2;
+    --cal-bg-info: #263fa9;
+    --cal-bg-success: #306339;
+    --cal-bg-attention: #8e3b1f;
+    --cal-bg-error: #8c2822;
     --cal-bg-dark-error: #752522;
 
     /* Borders */
@@ -269,10 +269,10 @@
     --cal-text-inverted: #101010;
 
     /* Content/Text -> components */
-    --cal-text-info: #253985;
-    --cal-text-success: #285231;
-    --cal-text-attention: #73321b;
-    --cal-text-error: #752522;
+    --cal-text-info: #dee9fc;
+    --cal-text-success: #e2fbe8;
+    --cal-text-attention: #fceed8;
+    --cal-text-error: #f9e3e2;
 
     /* Brand shenanigans
       -> These will be computed for the users theme at runtime.

apps/web/.prettierignore

@@ -1,2 +1 @@
-public/embed
-*.test.ts
+public/embed

apps/web/components/AddToHomescreen.tsx

@@ -20,7 +20,7 @@ export default function AddToHomescreen() {
             <div className="flex w-0 flex-1 items-center">
               <span className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast flex rounded-lg bg-opacity-30 p-2">
                 <svg
-                  className="h-7 w-7 fill-current text-indigo-500"
+                  className="h-7 w-7 fill-current text-[#5B93F9]"
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 50 50"
                   enableBackground="new 0 0 50 50">
@@ -29,7 +29,7 @@ export default function AddToHomescreen() {
                   <path d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3z" />
                 </svg>
               </span>
-              <p className="text-inverted ms-3 text-xs font-medium">
+              <p className="text-inverted ms-3 text-xs font-medium dark:text-white">
                 <span className="inline">{t("add_to_homescreen")}</span>
               </p>
             </div>
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <X className="text-inverted h-6 w-6" aria-hidden="true" />
+                <X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AppListCard.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import type { CredentialOwner } from "@calcom/app-store/types";
+import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -78,9 +79,15 @@ export default function AppListCard(props: AppListCardProps) {
   }, []);
 
   return (
-    <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
-      <div className="flex items-center gap-x-3 px-5 py-4">
-        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
+    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>
+      <div className="flex items-center gap-x-3 px-4 py-4 sm:px-6">
+        {logo ? (
+          <img
+            className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}
+            src={logo}
+            alt={`${title} logo`}
+          />
+        ) : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
             <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>

apps/web/components/I18nLanguageHandler.tsx

@@ -1,12 +1,7 @@
-import { lookup } from "bcp-47-match";
-import { useSession } from "next-auth/react";
-import { useTranslation } from "next-i18next";
-import { useEffect } from "react";
-
 import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
-function useViewerI18n(locale: string) {
+export function useViewerI18n(locale: string) {
   return trpc.viewer.public.i18n.useQuery(
     { locale, CalComVersion: CALCOM_VERSION },
     {
@@ -19,46 +14,3 @@ function useViewerI18n(locale: string) {
     }
   );
 }
-
-function useClientLocale(locales: string[]) {
-  const session = useSession();
-  // If the user is logged in, use their locale
-  if (session.data?.user.locale) return session.data.user.locale;
-  // If the user is not logged in, use the browser locale
-  if (typeof window !== "undefined") {
-    // This is the only way I found to ensure the prefetched locale is used on first render
-    // FIXME: Find a better way to pick the best matching locale from the browser
-    return lookup(locales, window.navigator.language) || window.navigator.language;
-  }
-  // If the browser is not available, use English
-  return "en";
-}
-
-export function useClientViewerI18n(locales: string[]) {
-  const clientLocale = useClientLocale(locales);
-  return useViewerI18n(clientLocale);
-}
-
-/**
- * Auto-switches locale client-side to the logged in user's preference
- */
-const I18nLanguageHandler = (props: { locales: string[] }) => {
-  const { locales } = props;
-  const { i18n } = useTranslation("common");
-  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
-
-  useEffect(() => {
-    // bail early when i18n = {}
-    if (Object.keys(i18n).length === 0) return;
-    // if locale is ready and the i18n.language does != locale - changeLanguage
-    if (locale && i18n.language !== locale) {
-      i18n.changeLanguage(locale);
-    }
-    // set dir="rtl|ltr"
-    document.dir = i18n.dir();
-    document.documentElement.setAttribute("lang", locale);
-  }, [locale, i18n]);
-  return null;
-};
-
-export default I18nLanguageHandler;

apps/web/components/PageWrapper.tsx

@@ -13,8 +13,6 @@ import type { AppProps } from "@lib/app-providers";
 import AppProviders from "@lib/app-providers";
 import { seoConfig } from "@lib/config/next-seo.config";
 
-import I18nLanguageHandler from "@components/I18nLanguageHandler";
-
 export interface CalPageWrapper {
   (props?: AppProps): JSX.Element;
   PageWrapper?: AppProps["Component"]["PageWrapper"];
@@ -72,7 +70,6 @@ function PageWrapper(props: AppProps) {
         }
         {...seoConfig.defaultNextSeo}
       />
-      <I18nLanguageHandler locales={props.router.locales || []} />
       <Script
         nonce={nonce}
         id="page-status"

apps/web/components/apps/AppList.tsx

@@ -0,0 +1,232 @@
+import { useCallback, useState } from "react";
+
+import { AppSettings } from "@calcom/app-store/_components/AppSettings";
+import { InstallAppButton } from "@calcom/app-store/components";
+import { getEventLocationTypeFromApp, type EventLocationType } from "@calcom/app-store/locations";
+import type { CredentialOwner } from "@calcom/app-store/types";
+import { AppSetDefaultLinkDialog } from "@calcom/features/apps/components/AppSetDefaultLinkDialog";
+import { BulkEditDefaultConferencingModal } from "@calcom/features/eventtypes/components/BulkEditDefaultConferencingModal";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { AppCategories } from "@calcom/prisma/enums";
+import { trpc, type RouterOutputs } from "@calcom/trpc";
+import type { App } from "@calcom/types/App";
+import {
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  List,
+  showToast,
+  Button,
+  DropdownMenuItem,
+  Alert,
+} from "@calcom/ui";
+import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
+
+import AppListCard from "@components/AppListCard";
+
+interface AppListProps {
+  variant?: AppCategories;
+  data: RouterOutputs["viewer"]["integrations"];
+  handleDisconnect: (credentialId: number) => void;
+  listClassName?: string;
+}
+
+export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppListProps) => {
+  const { data: defaultConferencingApp } = trpc.viewer.getUsersDefaultConferencingApp.useQuery();
+  const utils = trpc.useContext();
+  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
+  const [locationType, setLocationType] = useState<(EventLocationType & { slug: string }) | undefined>(
+    undefined
+  );
+
+  const onSuccessCallback = useCallback(() => {
+    setBulkUpdateModal(true);
+    showToast("Default app updated successfully", "success");
+  }, []);
+
+  const updateDefaultAppMutation = trpc.viewer.updateUserDefaultConferencingApp.useMutation({
+    onSuccess: () => {
+      showToast("Default app updated successfully", "success");
+      utils.viewer.getUsersDefaultConferencingApp.invalidate();
+    },
+    onError: (error) => {
+      showToast(`Error: ${error.message}`, "error");
+    },
+  });
+
+  const ChildAppCard = ({
+    item,
+  }: {
+    item: RouterOutputs["viewer"]["integrations"]["items"][number] & {
+      credentialOwner?: CredentialOwner;
+    };
+  }) => {
+    const appSlug = item?.slug;
+    const appIsDefault =
+      appSlug === defaultConferencingApp?.appSlug ||
+      (appSlug === "daily-video" && !defaultConferencingApp?.appSlug);
+    return (
+      <AppListCard
+        key={item.name}
+        description={item.description}
+        title={item.name}
+        logo={item.logo}
+        isDefault={appIsDefault}
+        shouldHighlight
+        slug={item.slug}
+        invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false}
+        credentialOwner={item?.credentialOwner}
+        actions={
+          !item.credentialOwner?.readOnly ? (
+            <div className="flex justify-end">
+              <Dropdown modal={false}>
+                <DropdownMenuTrigger asChild>
+                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                  {!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
+                    <DropdownMenuItem>
+                      <DropdownItem
+                        type="button"
+                        color="secondary"
+                        StartIcon={Video}
+                        onClick={() => {
+                          const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
+                          if (locationType?.linkType === "static") {
+                            setLocationType({ ...locationType, slug: appSlug });
+                          } else {
+                            updateDefaultAppMutation.mutate({
+                              appSlug,
+                            });
+                            setBulkUpdateModal(true);
+                          }
+                        }}>
+                        {t("set_as_default")}
+                      </DropdownItem>
+                    </DropdownMenuItem>
+                  )}
+                  <ConnectOrDisconnectIntegrationMenuItem
+                    credentialId={item.credentialOwner?.credentialId || item.userCredentialIds[0]}
+                    type={item.type}
+                    isGlobal={item.isGlobal}
+                    installed
+                    invalidCredentialIds={item.invalidCredentialIds}
+                    handleDisconnect={handleDisconnect}
+                    teamId={item.credentialOwner ? item.credentialOwner?.teamId : undefined}
+                  />
+                </DropdownMenuContent>
+              </Dropdown>
+            </div>
+          ) : null
+        }>
+        <AppSettings slug={item.slug} />
+      </AppListCard>
+    );
+  };
+
+  const appsWithTeamCredentials = data.items.filter((app) => app.teams.length);
+  const cardsForAppsWithTeams = appsWithTeamCredentials.map((app) => {
+    const appCards = [];
+
+    if (app.userCredentialIds.length) {
+      appCards.push(<ChildAppCard item={app} />);
+    }
+    for (const team of app.teams) {
+      if (team) {
+        appCards.push(
+          <ChildAppCard
+            item={{
+              ...app,
+              credentialOwner: {
+                name: team.name,
+                avatar: team.logo,
+                teamId: team.teamId,
+                credentialId: team.credentialId,
+                readOnly: !team.isAdmin,
+              },
+            }}
+          />
+        );
+      }
+    }
+    return appCards;
+  });
+
+  const { t } = useLocale();
+  return (
+    <>
+      <List className={listClassName}>
+        {cardsForAppsWithTeams.map((apps) => apps.map((cards) => cards))}
+        {data.items
+          .filter((item) => item.invalidCredentialIds)
+          .map((item) => {
+            if (!item.teams.length) return <ChildAppCard item={item} />;
+          })}
+      </List>
+      {locationType && (
+        <AppSetDefaultLinkDialog
+          locationType={locationType}
+          setLocationType={() => setLocationType(undefined)}
+          onSuccess={onSuccessCallback}
+        />
+      )}
+
+      {bulkUpdateModal && (
+        <BulkEditDefaultConferencingModal open={bulkUpdateModal} setOpen={setBulkUpdateModal} />
+      )}
+    </>
+  );
+};
+
+function ConnectOrDisconnectIntegrationMenuItem(props: {
+  credentialId: number;
+  type: App["type"];
+  isGlobal?: boolean;
+  installed?: boolean;
+  invalidCredentialIds?: number[];
+  teamId?: number;
+  handleDisconnect: (credentialId: number, teamId?: number) => void;
+}) {
+  const { type, credentialId, isGlobal, installed, handleDisconnect, teamId } = props;
+  const { t } = useLocale();
+
+  const utils = trpc.useContext();
+  const handleOpenChange = () => {
+    utils.viewer.integrations.invalidate();
+  };
+
+  if (credentialId || type === "stripe_payment" || isGlobal) {
+    return (
+      <DropdownMenuItem>
+        <DropdownItem
+          color="destructive"
+          onClick={() => handleDisconnect(credentialId, teamId)}
+          disabled={isGlobal}
+          StartIcon={Trash}>
+          {t("remove_app")}
+        </DropdownItem>
+      </DropdownMenuItem>
+    );
+  }
+
+  if (!installed) {
+    return (
+      <div className="flex items-center truncate">
+        <Alert severity="warning" title={t("not_installed")} />
+      </div>
+    );
+  }
+
+  return (
+    <InstallAppButton
+      type={type}
+      render={(buttonProps) => (
+        <Button color="secondary" {...buttonProps} data-testid="integration-connection-button">
+          {t("install")}
+        </Button>
+      )}
+      onChanged={handleOpenChange}
+    />
+  );
+}

apps/web/components/apps/AppPage.tsx

@@ -89,6 +89,7 @@ export const AppPage = ({
 
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
   const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+
   const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
     { appType: type },
     {
@@ -264,8 +265,8 @@ export const AppPage = ({
 
         {price !== 0 && (
           <span className="block text-right">
-            {feeType === "usage-based" ? commission + "% + " + priceInDollar + "/booking" : priceInDollar}
-            {feeType === "monthly" && "/" + t("month")}
+            {feeType === "usage-based" ? `${commission}% + ${priceInDollar}/booking` : priceInDollar}
+            {feeType === "monthly" && `/${t("month")}`}
           </span>
         )}
 
@@ -285,7 +286,7 @@ export const AppPage = ({
                 currency: "USD",
                 useGrouping: false,
               }).format(price)}
-              {feeType === "monthly" && "/" + t("month")}
+              {feeType === "monthly" && `/${t("month")}`}
             </>
           )}
         </span>
@@ -322,7 +323,7 @@ export const AppPage = ({
                 target="_blank"
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
-                href={"mailto:" + email}>
+                href={`mailto:${email}`}>
                 <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
 
                 {email}

apps/web/components/apps/CalendarListContainer.tsx

@@ -116,6 +116,7 @@ function ConnectedCalendarsList(props: Props) {
                                 type={item.integration.type}
                                 isChecked={cal.isSelected}
                                 destination={cal.externalId === props.destinationCalendarId}
+                                credentialId={cal.credentialId}
                               />
                             ))}
                           </ul>
@@ -129,7 +130,7 @@ function ConnectedCalendarsList(props: Props) {
                     title={t("something_went_wrong")}
                     message={
                       <span>
-                        <Link href={"/apps/" + item.integration.slug}>{item.integration.name}</Link>:{" "}
+                        <Link href={`/apps/${item.integration.slug}`}>{item.integration.name}</Link>:{" "}
                         {t("calendar_error")}
                       </span>
                     }

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -76,6 +76,7 @@ export const InstallAppButtonChild = ({
       </DropdownMenuTrigger>
       <DropdownMenuPortal>
         <DropdownMenuContent
+          className="w-auto"
           onInteractOutside={(event) => {
             if (mutation.isLoading) event.preventDefault();
           }}>
@@ -94,6 +95,7 @@ export const InstallAppButtonChild = ({
 
             return (
               <DropdownItem
+                className="flex"
                 type="button"
                 data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
                 key={team.id}

apps/web/components/auth/BackupCode.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useFormContext } from "react-hook-form";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Label, TextField } from "@calcom/ui";
+
+export default function TwoFactor({ center = true }) {
+  const { t } = useLocale();
+  const methods = useFormContext();
+
+  return (
+    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+      <Label className="mt-4">{t("backup_code")}</Label>
+
+      <p className="text-subtle mb-4 text-sm">{t("backup_code_instructions")}</p>
+
+      <TextField
+        id="backup-code"
+        label=""
+        defaultValue=""
+        placeholder="XXXXX-XXXXX"
+        minLength={10} // without dash
+        maxLength={11} // with dash
+        required
+        {...methods.register("backupCode")}
+      />
+    </div>
+  );
+}

apps/web/components/auth/TwoFactor.tsx

@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, Input } from "@calcom/ui";
 
-export default function TwoFactor({ center = true }) {
+export default function TwoFactor({ center = true, autoFocus = true }) {
   const [value, onChange] = useState("");
   const { t } = useLocale();
   const methods = useFormContext();
@@ -40,7 +40,7 @@ export default function TwoFactor({ center = true }) {
             name={`2fa${index + 1}`}
             inputMode="decimal"
             {...digit}
-            autoFocus={index === 0}
+            autoFocus={autoFocus && index === 0}
             autoComplete="one-time-code"
           />
         ))}

apps/web/components/booking/BookingListItem.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/navigation";
+import Link from "next/link";
 import { useState } from "react";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
@@ -26,11 +26,11 @@ import {
   DialogFooter,
   MeetingTimeInTimezones,
   showToast,
-  Tooltip,
   TableActions,
   TextAreaField,
+  Tooltip,
 } from "@calcom/ui";
-import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon";
+import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -58,7 +58,6 @@ function BookingListItem(booking: BookingItemProps) {
     i18n: { language },
   } = useLocale();
   const utils = trpc.useContext();
-  const router = useRouter();
   const [rejectionReason, setRejectionReason] = useState<string>("");
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const [chargeCardDialogIsOpen, setChargeCardDialogIsOpen] = useState(false);
@@ -259,14 +258,16 @@ function BookingListItem(booking: BookingItemProps) {
     .concat(booking.recurringInfo?.bookings[BookingStatus.PENDING])
     .sort((date1: Date, date2: Date) => date1.getTime() - date2.getTime());
 
-  const onClickTableData = () => {
+  const buildBookingLink = () => {
     const urlSearchParams = new URLSearchParams({
       allRemainingBookings: isTabRecurring.toString(),
     });
     if (booking.attendees[0]) urlSearchParams.set("email", booking.attendees[0].email);
-    router.push(`/booking/${booking.uid}?${urlSearchParams.toString()}`);
+    return `/booking/${booking.uid}?${urlSearchParams.toString()}`;
   };
 
+  const bookingLink = buildBookingLink();
+
   const title = booking.title;
   // To be used after we run query on legacy bookings
   // const showRecordingsButtons = booking.isRecorded && isPast && isConfirmed;
@@ -336,55 +337,12 @@ function BookingListItem(booking: BookingItemProps) {
         </DialogContent>
       </Dialog>
 
-      <tr className="hover:bg-muted group flex flex-col sm:flex-row">
-        <td
-          className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]"
-          onClick={onClickTableData}>
-          <div className="cursor-pointer py-4">
-            <div className="text-emphasis text-sm leading-6">{startTime}</div>
-            <div className="text-subtle text-sm">
-              {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-              {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
-              <MeetingTimeInTimezones
-                timeFormat={user?.timeFormat}
-                userTimezone={user?.timeZone}
-                startTime={booking.startTime}
-                endTime={booking.endTime}
-                attendees={booking.attendees}
-              />
-            </div>
-            {isPending && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                {t("unconfirmed")}
-              </Badge>
-            )}
-            {booking.eventType?.team && (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
-                {booking.eventType.team.name}
-              </Badge>
-            )}
-            {booking.paid && !booking.payment[0] ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
-                {t("error_collecting_card")}
-              </Badge>
-            ) : booking.paid ? (
-              <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
-                {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
-              </Badge>
-            ) : null}
-            {recurringDates !== undefined && (
-              <div className="text-muted mt-2 text-sm">
-                <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
-              </div>
-            )}
-          </div>
-        </td>
-        <td className={"w-full px-4" + (isRejected ? " line-through" : "")} onClick={onClickTableData}>
-          {/* Time and Badges for mobile */}
-          <div className="w-full pb-2 pt-4 sm:hidden">
-            <div className="flex w-full items-center justify-between sm:hidden">
+      <tr data-testid="booking-item" className="hover:bg-muted group flex flex-col sm:flex-row">
+        <td className="hidden align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
+          <Link href={bookingLink}>
+            <div className="cursor-pointer py-4">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
-              <div className="text-subtle pr-2 text-sm">
+              <div className="text-subtle text-sm">
                 {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
                 {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
                 <MeetingTimeInTimezones
@@ -395,66 +353,111 @@ function BookingListItem(booking: BookingItemProps) {
                   attendees={booking.attendees}
                 />
               </div>
+              {isPending && (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                  {t("unconfirmed")}
+                </Badge>
+              )}
+              {booking.eventType?.team && (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="gray">
+                  {booking.eventType.team.name}
+                </Badge>
+              )}
+              {booking.paid && !booking.payment[0] ? (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="orange">
+                  {t("error_collecting_card")}
+                </Badge>
+              ) : booking.paid ? (
+                <Badge className="ltr:mr-2 rtl:ml-2" variant="green" data-testid="paid_badge">
+                  {booking.payment[0].paymentOption === "HOLD" ? t("card_held") : t("paid")}
+                </Badge>
+              ) : null}
+              {recurringDates !== undefined && (
+                <div className="text-muted mt-2 text-sm">
+                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                </div>
+              )}
             </div>
-
-            {isPending && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
-                {t("unconfirmed")}
-              </Badge>
-            )}
-            {booking.eventType?.team && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
-                {booking.eventType.team.name}
-              </Badge>
-            )}
-            {!!booking?.eventType?.price && !booking.paid && (
-              <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
-                {t("pending_payment")}
-              </Badge>
-            )}
-            {recurringDates !== undefined && (
-              <div className="text-muted text-sm sm:hidden">
-                <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+          </Link>
+        </td>
+        <td className={`w-full px-4${isRejected ? " line-through" : ""}`}>
+          <Link href={bookingLink}>
+            {/* Time and Badges for mobile */}
+            <div className="w-full pb-2 pt-4 sm:hidden">
+              <div className="flex w-full items-center justify-between sm:hidden">
+                <div className="text-emphasis text-sm leading-6">{startTime}</div>
+                <div className="text-subtle pr-2 text-sm">
+                  {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
+                  {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                  <MeetingTimeInTimezones
+                    timeFormat={user?.timeFormat}
+                    userTimezone={user?.timeZone}
+                    startTime={booking.startTime}
+                    endTime={booking.endTime}
+                    attendees={booking.attendees}
+                  />
+                </div>
               </div>
-            )}
-          </div>
 
-          <div className="cursor-pointer py-4">
-            <div
-              title={title}
-              className={classNames(
-                "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
-                isCancelled ? "line-through" : ""
-              )}>
-              {title}
-              <span> </span>
-
-              {paymentAppData.enabled && !booking.paid && booking.payment.length && (
-                <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
+              {isPending && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
+                  {t("unconfirmed")}
+                </Badge>
+              )}
+              {booking.eventType?.team && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="gray">
+                  {booking.eventType.team.name}
+                </Badge>
+              )}
+              {!!booking?.eventType?.price && !booking.paid && (
+                <Badge className="ltr:mr-2 rtl:ml-2 sm:hidden" variant="orange">
                   {t("pending_payment")}
                 </Badge>
               )}
+              {recurringDates !== undefined && (
+                <div className="text-muted text-sm sm:hidden">
+                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                </div>
+              )}
             </div>
-            {booking.description && (
+
+            <div className="cursor-pointer py-4">
               <div
-                className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
-                title={booking.description}>
-                &quot;{booking.description}&quot;
+                title={title}
+                className={classNames(
+                  "max-w-10/12 sm:max-w-56 text-emphasis text-sm font-medium leading-6 md:max-w-full",
+                  isCancelled ? "line-through" : ""
+                )}>
+                {title}
+                <span> </span>
+
+                {paymentAppData.enabled && !booking.paid && booking.payment.length && (
+                  <Badge className="me-2 ms-2 hidden sm:inline-flex" variant="orange">
+                    {t("pending_payment")}
+                  </Badge>
+                )}
               </div>
-            )}
-            {booking.attendees.length !== 0 && (
-              <DisplayAttendees
-                attendees={booking.attendees}
-                user={booking.user}
-                currentEmail={user?.email}
-              />
-            )}
-            {isCancelled && booking.rescheduled && (
-              <div className="mt-2 inline-block md:hidden">
-                <RequestSentMessage />
-              </div>
-            )}
-          </div>
+              {booking.description && (
+                <div
+                  className="max-w-10/12 sm:max-w-32 md:max-w-52 xl:max-w-80 text-default truncate text-sm"
+                  title={booking.description}>
+                  &quot;{booking.description}&quot;
+                </div>
+              )}
+              {booking.attendees.length !== 0 && (
+                <DisplayAttendees
+                  attendees={booking.attendees}
+                  user={booking.user}
+                  currentEmail={user?.email}
+                />
+              )}
+              {isCancelled && booking.rescheduled && (
+                <div className="mt-2 inline-block md:hidden">
+                  <RequestSentMessage />
+                </div>
+              )}
+            </div>
+          </Link>
         </td>
         <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 ? (
@@ -573,7 +576,7 @@ const FirstAttendee = ({
     <a
       key={user.email}
       className=" hover:text-blue-500"
-      href={"mailto:" + user.email}
+      href={`mailto:${user.email}`}
       onClick={(e) => e.stopPropagation()}>
       {user.name}
     </a>
@@ -587,7 +590,7 @@ type AttendeeProps = {
 
 const Attendee = ({ email, name }: AttendeeProps) => {
   return (
-    <a className="hover:text-blue-500" href={"mailto:" + email} onClick={(e) => e.stopPropagation()}>
+    <a className="hover:text-blue-500" href={`mailto:${email}`} onClick={(e) => e.stopPropagation()}>
       {name || email}
     </a>
   );

apps/web/components/dialog/ChargeCardDialog.tsx

@@ -47,7 +47,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
             <CreditCard className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">

apps/web/components/dialog/EditLocationDialog.tsx

@@ -121,7 +121,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             ctx.addIssue({
               code: z.ZodIssueCode.custom,
               message: `Invalid URL for ${eventLocationType.label}. ${
-                sampleUrl ? "Sample URL: " + sampleUrl : ""
+                sampleUrl ? `Sample URL: ${sampleUrl}` : ""
               }`,
             });
           }
@@ -382,24 +382,22 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 }}
               />
               {selectedLocation && LocationOptions}
-              <DialogFooter>
-                <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
-                  <Button
-                    onClick={() => {
-                      setShowLocationModal(false);
-                      setSelectedLocation?.(undefined);
-                      setEditingLocationType?.("");
-                      locationFormMethods.unregister(["locationType", "locationLink"]);
-                    }}
-                    type="button"
-                    color="secondary">
-                    {t("cancel")}
-                  </Button>
+              <DialogFooter className="mt-4">
+                <Button
+                  onClick={() => {
+                    setShowLocationModal(false);
+                    setSelectedLocation?.(undefined);
+                    setEditingLocationType?.("");
+                    locationFormMethods.unregister(["locationType", "locationLink"]);
+                  }}
+                  type="button"
+                  color="secondary">
+                  {t("cancel")}
+                </Button>
 
-                  <Button data-testid="update-location" type="submit">
-                    {t("update")}
-                  </Button>
-                </div>
+                <Button data-testid="update-location" type="submit">
+                  {t("update")}
+                </Button>
               </DialogFooter>
             </Form>
           </div>

apps/web/components/dialog/RescheduleDialog.tsx

@@ -41,9 +41,9 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
-      <DialogContent>
+      <DialogContent enableOverflow>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
             <Clock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -34,7 +34,7 @@ import {
   TextField,
   Tooltip,
 } from "@calcom/ui";
-import { Copy, Edit } from "@calcom/ui/components/icon";
+import { Copy, Edit, Info } from "@calcom/ui/components/icon";
 import { IS_VISUAL_REGRESSION_TESTING } from "@calcom/web/constants";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
@@ -67,7 +67,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
     (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
 
   eventType.bookingFields.forEach(({ name }) => {
-    bookingFields[name] = name + " input";
+    bookingFields[name] = `${name} input`;
   });
 
   const eventNameObject: EventNameObjectType = {
@@ -124,79 +124,81 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
 
   const setEventName = (value: string) => formMethods.setValue("eventName", value);
   return (
-    <div className="flex flex-col space-y-8">
+    <div className="flex flex-col space-y-4">
       {/**
        * Only display calendar selector if user has connected calendars AND if it's not
        * a team event. Since we don't have logic to handle each attendee calendar (for now).
        * This will fallback to each user selected destination calendar.
        */}
-      {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
-        <div className="flex flex-col">
-          <div className="flex justify-between">
-            <Label>{t("add_to_calendar")}</Label>
-            <Link
-              href="/apps/categories/calendar"
-              target="_blank"
-              className="hover:text-emphasis text-default text-sm">
-              {t("add_another_calendar")}
-            </Link>
+      <div className="border-subtle space-y-6 rounded-lg border p-6">
+        {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
+          <div className="flex flex-col">
+            <div className="flex justify-between">
+              <Label className="font-medium">{t("add_to_calendar")}</Label>
+              <Link
+                href="/apps/categories/calendar"
+                target="_blank"
+                className="hover:text-emphasis text-default text-sm">
+                {t("add_another_calendar")}
+              </Link>
+            </div>
+            <div className="-mt-1 w-full">
+              <Controller
+                control={formMethods.control}
+                name="destinationCalendar"
+                defaultValue={eventType.destinationCalendar || undefined}
+                render={({ field: { onChange, value } }) => (
+                  <DestinationCalendarSelector
+                    destinationCalendar={eventType.destinationCalendar}
+                    value={value ? value.externalId : undefined}
+                    onChange={onChange}
+                    hidePlaceholder
+                  />
+                )}
+              />
+            </div>
+            <p className="text-subtle text-sm">{t("select_which_cal")}</p>
           </div>
-          <div className="-mt-1 w-full">
-            <Controller
-              control={formMethods.control}
-              name="destinationCalendar"
-              defaultValue={eventType.destinationCalendar || undefined}
-              render={({ field: { onChange, value } }) => (
-                <DestinationCalendarSelector
-                  destinationCalendar={eventType.destinationCalendar}
-                  value={value ? value.externalId : undefined}
-                  onChange={onChange}
-                  hidePlaceholder
-                />
-              )}
-            />
-          </div>
-          <p className="text-default text-sm">{t("select_which_cal")}</p>
+        )}
+        <div className="w-full">
+          <TextField
+            label={t("event_name_in_calendar")}
+            type="text"
+            {...shouldLockDisableProps("eventName")}
+            placeholder={eventNamePlaceholder}
+            defaultValue={eventType.eventName || ""}
+            {...formMethods.register("eventName")}
+            addOnSuffix={
+              <Button
+                color="minimal"
+                size="sm"
+                aria-label="edit custom name"
+                className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                onClick={() => setShowEventNameTip((old) => !old)}>
+                <Edit className="h-4 w-4" />
+              </Button>
+            }
+          />
         </div>
-      )}
-      <div className="w-full">
-        <TextField
-          label={t("event_name_in_calendar")}
-          type="text"
-          {...shouldLockDisableProps("eventName")}
-          placeholder={eventNamePlaceholder}
-          defaultValue={eventType.eventName || ""}
-          {...formMethods.register("eventName")}
-          addOnSuffix={
-            <Button
-              color="minimal"
-              size="sm"
-              aria-label="edit custom name"
-              className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
-              onClick={() => setShowEventNameTip((old) => !old)}>
-              <Edit className="h-4 w-4" />
-            </Button>
-          }
+      </div>
+
+      <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
+
+      <div className="border-subtle space-y-6 rounded-lg border p-6">
+        <FormBuilder
+          title={t("booking_questions_title")}
+          description={t("booking_questions_description")}
+          addFieldLabel={t("add_a_booking_question")}
+          formProp="bookingFields"
+          {...shouldLockDisableProps("bookingFields")}
+          dataStore={{
+            options: {
+              locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
+            },
+          }}
         />
       </div>
-      <hr className="border-subtle [&:has(+div:empty)]:hidden" />
-      <div>
-        <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
-      </div>
-      <hr className="border-subtle" />
-      <FormBuilder
-        title={t("booking_questions_title")}
-        description={t("booking_questions_description")}
-        addFieldLabel={t("add_a_booking_question")}
-        formProp="bookingFields"
-        {...shouldLockDisableProps("bookingFields")}
-        dataStore={{
-          options: {
-            locations: getLocationsOptionsForSelect(eventType?.locations ?? [], t),
-          },
-        }}
-      />
-      <hr className="border-subtle" />
+
       <RequiresConfirmationController
         eventType={eventType}
         seatsEnabled={seatsEnabled}
@@ -204,13 +206,16 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         requiresConfirmation={requiresConfirmation}
         onRequiresConfirmation={setRequiresConfirmation}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="requiresBookerEmailVerification"
         control={formMethods.control}
         defaultValue={eventType.requiresBookerEmailVerification}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            labelClassName="text-sm"
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("requires_booker_email_verification")}
             {...shouldLockDisableProps("requiresBookerEmailVerification")}
             description={t("description_requires_booker_email_verification")}
@@ -219,13 +224,16 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="hideCalendarNotes"
         control={formMethods.control}
         defaultValue={eventType.hideCalendarNotes}
         render={({ field: { value, onChange } }) => (
           <SettingsToggle
+            labelClassName="text-sm"
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
             title={t("disable_notes")}
             {...shouldLockDisableProps("hideCalendarNotes")}
             description={t("disable_notes_description")}
@@ -234,13 +242,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           />
         )}
       />
-      <hr className="border-subtle" />
+
       <Controller
         name="successRedirectUrl"
         control={formMethods.control}
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              labelClassName="text-sm"
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
+                redirectUrlVisible && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               title={t("redirect_success_booking")}
               {...successRedirectUrlLocked}
               description={t("redirect_url_description")}
@@ -249,8 +264,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 setRedirectUrlVisible(e);
                 onChange(e ? value : "");
               }}>
-              {/* Textfield has some margin by default we remove that so we can keep consistent alignment */}
-              <div className="lg:-mb-2 lg:-ml-2">
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
                 <TextField
                   className="w-full"
                   label={t("redirect_success_booking")}
@@ -274,10 +288,25 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </>
         )}
       />
-      <hr className="border-subtle" />
+
       <SettingsToggle
+        labelClassName="text-sm"
+        toggleSwitchAtTheEnd={true}
+        switchContainerClassName={classNames(
+          "border-subtle rounded-lg border py-6 px-4 sm:px-6",
+          hashedLinkVisible && "rounded-b-none"
+        )}
+        childrenClassName="lg:ml-0"
         data-testid="hashedLinkCheck"
-        title={t("private_link")}
+        title={t("enable_private_url")}
+        Badge={
+          <a
+            target="_blank"
+            rel="noreferrer"
+            href="https://cal.com/docs/core-features/event-types/single-use-private-links">
+            <Info className="ml-1.5 h-4 w-4 cursor-pointer" />
+          </a>
+        }
         {...shouldLockDisableProps("hashedLinkCheck")}
         description={t("private_link_description", { appName: APP_NAME })}
         checked={hashedLinkVisible}
@@ -285,8 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           formMethods.setValue("hashedLink", e ? hashedUrl : undefined);
           setHashedLinkVisible(e);
         }}>
-        {/* Textfield has some margin by default we remove that so we can keep consitant aligment */}
-        <div className="lg:-ml-2">
+        <div className="border-subtle rounded-b-lg border border-t-0 p-6">
           {!IS_VISUAL_REGRESSION_TESTING && (
             <TextField
               disabled
@@ -321,7 +349,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           )}
         </div>
       </SettingsToggle>
-      <hr className="border-subtle" />
+
       <Controller
         name="seatsPerTimeSlotEnabled"
         control={formMethods.control}
@@ -329,6 +357,13 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         render={({ field: { value, onChange } }) => (
           <>
             <SettingsToggle
+              labelClassName="text-sm"
+              toggleSwitchAtTheEnd={true}
+              switchContainerClassName={classNames(
+                "border-subtle rounded-lg border py-6 px-4 sm:px-6",
+                value && "rounded-b-none"
+              )}
+              childrenClassName="lg:ml-0"
               data-testid="offer-seats-toggle"
               title={t("offer_seats")}
               {...seatsLocked}
@@ -349,37 +384,50 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 }
                 onChange(e);
               }}>
-              <Controller
-                name="seatsPerTimeSlot"
-                control={formMethods.control}
-                defaultValue={eventType.seatsPerTimeSlot}
-                render={({ field: { value, onChange } }) => (
-                  <div className="lg:-ml-2">
-                    <TextField
-                      required
-                      name="seatsPerTimeSlot"
-                      labelSrOnly
-                      label={t("number_of_seats")}
-                      type="number"
-                      disabled={seatsLocked.disabled}
-                      defaultValue={value || 2}
-                      min={1}
-                      addOnSuffix={<>{t("seats")}</>}
-                      onChange={(e) => {
-                        onChange(Math.abs(Number(e.target.value)));
-                      }}
-                    />
-                    <div className="mt-2">
-                      <CheckboxField
-                        description={t("show_attendees")}
+              <div className="border-subtle rounded-b-lg border border-t-0 p-6">
+                <Controller
+                  name="seatsPerTimeSlot"
+                  control={formMethods.control}
+                  defaultValue={eventType.seatsPerTimeSlot}
+                  render={({ field: { value, onChange } }) => (
+                    <div>
+                      <TextField
+                        required
+                        name="seatsPerTimeSlot"
+                        labelSrOnly
+                        label={t("number_of_seats")}
+                        type="number"
                         disabled={seatsLocked.disabled}
-                        onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
-                        defaultChecked={!!eventType.seatsShowAttendees}
+                        defaultValue={value || 2}
+                        min={1}
+                        containerClassName="max-w-80"
+                        addOnSuffix={<>{t("seats")}</>}
+                        onChange={(e) => {
+                          onChange(Math.abs(Number(e.target.value)));
+                        }}
                       />
+                      <div className="mt-4">
+                        <CheckboxField
+                          description={t("show_attendees")}
+                          disabled={seatsLocked.disabled}
+                          onChange={(e) => formMethods.setValue("seatsShowAttendees", e.target.checked)}
+                          defaultChecked={!!eventType.seatsShowAttendees}
+                        />
+                      </div>
+                      <div className="mt-2">
+                        <CheckboxField
+                          description={t("show_available_seats_count")}
+                          disabled={seatsLocked.disabled}
+                          onChange={(e) =>
+                            formMethods.setValue("seatsShowAvailabilityCount", e.target.checked)
+                          }
+                          defaultChecked={!!eventType.seatsShowAvailabilityCount}
+                        />
+                      </div>
                     </div>
-                  </div>
-                )}
-              />
+                  )}
+                />
+              </div>
             </SettingsToggle>
             {noShowFeeEnabled && <Alert severity="warning" title={t("seats_and_no_show_fee_error")} />}
           </>
@@ -387,13 +435,15 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       />
       {allowDisablingAttendeeConfirmationEmails(workflows) && (
         <>
-          <hr className="border-subtle" />
           <Controller
             name="metadata.disableStandardEmails.confirmation.attendee"
             control={formMethods.control}
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  labelClassName="text-sm"
+                  toggleSwitchAtTheEnd={true}
+                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
                   title={t("disable_attendees_confirmation_emails")}
                   description={t("disable_attendees_confirmation_emails_description")}
                   checked={value || false}
@@ -409,7 +459,6 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       )}
       {allowDisablingHostConfirmationEmails(workflows) && (
         <>
-          <hr className="border-subtle" />
           <Controller
             name="metadata.disableStandardEmails.confirmation.host"
             control={formMethods.control}
@@ -417,6 +466,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             render={({ field: { value, onChange } }) => (
               <>
                 <SettingsToggle
+                  labelClassName="text-sm"
+                  toggleSwitchAtTheEnd={true}
+                  switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
                   title={t("disable_host_confirmation_emails")}
                   description={t("disable_host_confirmation_emails_description")}
                   checked={value || false}