v2.9.8

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>

.env.appStore.example

@@ -106,12 +106,6 @@ LARK_OPEN_APP_ID=""
 LARK_OPEN_APP_SECRET=""
 LARK_OPEN_VERIFICATION_TOKEN=""
 
-#   - WEB3
-# Used for the Web3 plugin
-# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/rainbow/README.md
-ALCHEMY_API_KEY=""
-INFURA_API_KEY=""
-
 #   - SALESFORCE
 # Used for the Salesforce (Sales Cloud) app
 SALESFORCE_CONSUMER_KEY=""

.github/PULL_REQUEST_TEMPLATE.md

@@ -8,8 +8,6 @@ Fixes # (issue)
  Loom Video: https://www.loom.com/
 -->
 
-**Environment**: Staging(main branch) / Production
-
 ## Type of change
 
 <!-- Please delete bullets that are not relevant. -->
@@ -27,13 +25,14 @@ Fixes # (issue)
 - [ ] Test A
 - [ ] Test B
 
+## Mandatory Tasks
+- [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
+
 ## Checklist
 
 <!-- Please remove all the irrelevant bullets to your PR -->
-
 - I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
 - My code doesn't follow the style guidelines of this project
-- I haven't performed a self-review of my own code and corrected any misspellings
 - I haven't commented my code, particularly in hard-to-understand areas
 - I haven't checked if my PR needs changes to the documentation
 - I haven't checked if my changes generate no new warnings

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

@@ -8,7 +8,7 @@ runs:
   using: "composite"
   steps:
     - name: Cache production build
-      uses: actions/cache@v3
+      uses: buildjet/cache@v3
       id: cache-build
       env:
         cache-name: prod-build

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

@@ -12,7 +12,7 @@ runs:
   steps:
     - name: Cache database
       id: cache-db
-      uses: actions/cache@v3
+      uses: buildjet/cache@v3
       env:
         cache-name: cache-db
         key-1: ${{ hashFiles('packages/prisma/schema.prisma', 'packages/prisma/migrations/**/**.sql', 'packages/prisma/*.ts') }}

.github/actions/env-read-file/action.yml

@@ -4,7 +4,7 @@ runs:
   using: "composite"
   steps:
     - name: Create env file
-      uses: actions/cache@v3
+      uses: buildjet/cache@v3
       id: env-cache
       with:
         path: gh.env
@@ -13,4 +13,4 @@ runs:
     - name: Set Environment Variables
       uses: tw3lveparsecs/github-actions-setvars@latest
       with:
-        envFilePath: gh.env
+        envFilePath: gh.env

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

@@ -20,7 +20,7 @@ runs:
   using: "composite"
   steps:
     - name: Use Node ${{ inputs.node_version }}
-      uses: actions/setup-node@v3
+      uses: buildjet/setup-node@v3
       with:
         node-version: ${{ inputs.node_version }}
     - name: Expose yarn config as "$GITHUB_OUTPUT"
@@ -32,7 +32,7 @@ runs:
     # Yarn rotates the downloaded cache archives, @see https://github.com/actions/setup-node/issues/325
     # Yarn cache is also reusable between arch and os.
     - name: Restore yarn cache
-      uses: actions/cache@v3
+      uses: buildjet/cache@v3
       id: yarn-download-cache
       with:
         path: ${{ steps.yarn-config.outputs.CACHE_FOLDER }}
@@ -43,7 +43,7 @@ runs:
     # Invalidated on yarn.lock changes
     - name: Restore yarn install state
       id: yarn-install-state-cache
-      uses: actions/cache@v3
+      uses: buildjet/cache@v3
       with:
         path: .yarn/ci-cache/
         key: ${{ runner.os }}-yarn-install-state-cache-${{ hashFiles('yarn.lock', '.yarnrc.yml') }}

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

@@ -5,7 +5,7 @@ runs:
   steps:
     - name: Cache playwright binaries
       id: playwright-cache
-      uses: actions/cache@v2
+      uses: buildjet/cache@v2
       with:
         path: |
           ~/Library/Caches/ms-playwright

.github/workflows/apply-issue-labels-to-pr.yml

@@ -1,27 +1,75 @@
 name: "Apply issue labels to PR"
 
 on:
-  pull_request:
-    types: [opened]
+  pull_request_target:
+    types:
+      - opened
+
 
 jobs:
   label_on_pr:
     runs-on: ubuntu-latest
-
+    
     permissions:
+      contents: none
+      issues: read
       pull-requests: write
-
+    
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16
-
       - name: Apply labels from linked issue to PR
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          PR_DATA: ${{ toJson(github.event.pull_request) }}
-        run: node ./.github/workflows/scripts/apply-issue-labels-to-pr.ts
+        uses: actions/github-script@v5
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            async function getLinkedIssues(owner, repo, prNumber) {
+              const query = `query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
+                repository(owner: $owner, name: $repo) {
+                  pullRequest(number: $prNumber) {
+                    closingIssuesReferences(first: 10) {
+                      nodes {
+                        number
+                        labels(first: 10) {
+                          nodes {
+                            name
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }`;
+
+              const variables = {
+                owner: owner,
+                repo: repo,
+                prNumber: prNumber,
+              };
+
+              const result = await github.graphql(query, variables);
+              return result.repository.pullRequest.closingIssuesReferences.nodes;
+            }
+
+            const pr = context.payload.pull_request;
+            const linkedIssues = await getLinkedIssues(
+              context.repo.owner,
+              context.repo.repo,
+              pr.number
+            );
+
+            const labelsToAdd = new Set();
+            for (const issue of linkedIssues) {
+              if (issue.labels && issue.labels.nodes) {
+                for (const label of issue.labels.nodes) {
+                  labelsToAdd.add(label.name);
+                }
+              }
+            }
+
+            if (labelsToAdd.size) {
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pr.number,
+                labels: Array.from(labelsToAdd),
+              });
+            }

.github/workflows/cache-clean.yml

@@ -6,7 +6,7 @@ on:
 
 jobs:
   cleanup:
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - name: Check out code
         uses: actions/checkout@v3

.github/workflows/check-types.yml

@@ -5,7 +5,7 @@ env:
   NODE_OPTIONS: "--max-old-space-size=8192"
 jobs:
   check-types:
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout

.github/workflows/e2e-app-store.yml

@@ -6,7 +6,7 @@ jobs:
   e2e-app-store:
     timeout-minutes: 20
     name: E2E App-Store Apps
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
         image: postgres:12.1

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

@@ -5,7 +5,7 @@ on:
 jobs:
   e2e-embed:
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
         image: postgres:12.1
@@ -25,7 +25,9 @@ jobs:
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e:embed-react
+        run: |
+          yarn test-e2e:embed-react
+          yarn workspace @calcom/embed-react packaged:tests
         env:
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload Test Results

.github/workflows/e2e-embed.yml

@@ -5,7 +5,7 @@ on:
 jobs:
   e2e-embed:
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
         image: postgres:12.1

.github/workflows/e2e.yml

@@ -4,8 +4,8 @@ on:
 jobs:
   e2e:
     timeout-minutes: 20
-    name: E2E tests
-    runs-on: ubuntu-latest
+    name: E2E tests (${{ matrix.shard }}/${{ strategy.job-total }})
+    runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
         image: postgres:12.1
@@ -14,6 +14,10 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+    strategy:
+      fail-fast: false
+      matrix:
+        shard: [1, 2, 3, 4, 5]
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
@@ -24,12 +28,12 @@ jobs:
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e
+        run: yarn e2e --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: test-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

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

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

.github/workflows/lint.yml

@@ -3,7 +3,7 @@ on:
   workflow_call:
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
 
     steps:
       - uses: actions/checkout@v3

.github/workflows/nextjs-bundle-analysis.yml

@@ -15,7 +15,7 @@ jobs:
   analyze:
     needs: build
     if: always()
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout

.github/workflows/pr.yml

@@ -16,7 +16,7 @@ concurrency:
 
 jobs:
   changes:
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     permissions:
       pull-requests: read
     outputs:
@@ -66,6 +66,12 @@ jobs:
     uses: ./.github/workflows/production-build.yml
     secrets: inherit
 
+  build-without-database:
+    name: Production build (without database)
+    needs: env
+    uses: ./.github/workflows/production-build-without-database.yml
+    secrets: inherit
+
   e2e:
     name: E2E tests
     needs: [changes, lint, build]
@@ -101,7 +107,7 @@ jobs:
   required:
     needs: [lint, type-check, test, build, e2e]
     if: always()
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - name: fail if conditional jobs failed
         if: contains(needs.*.result, 'failure') || contains(needs.*.result, 'skipped') || contains(needs.*.result, 'cancelled')

.github/workflows/production-build-without-database.yml

@@ -0,0 +1,16 @@
+name: Production Build (without database)
+
+on:
+  workflow_call:
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+      - uses: ./.github/actions/dangerous-git-checkout
+      - uses: ./.github/actions/yarn-install
+      - uses: ./.github/actions/env-read-file
+      - uses: ./.github/actions/cache-build

.github/workflows/production-build.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     timeout-minutes: 30
     services:
       postgres:

.github/workflows/scripts/apply-issue-labels-to-pr.ts

@@ -1,139 +0,0 @@
-const https = require("https");
-
-async function applyLabelFromLinkedIssueToPR(pr, token) {
-  // Get the labels from issues linked to the PR
-  const query = `
-    query GetLinkedIssues($owner: String!, $repo: String!, $prNumber: Int!) {
-      repository(owner: $owner, name: $repo) {
-        pullRequest(number: $prNumber) {
-          closingIssuesReferences(first: 10) {
-            nodes {
-              number
-              labels(first: 10) {
-                nodes {
-                  name
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  `;
-
-  const graphqlData = JSON.stringify({
-    query,
-    variables: {
-      owner: pr.base.repo.owner.login,
-      repo: pr.base.repo.name,
-      prNumber: pr.number,
-    },
-  });
-
-  const requestOptions = {
-    hostname: "api.github.com",
-    path: "/graphql",
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      "Content-Length": graphqlData.length,
-      Authorization: "Bearer " + token,
-      "User-Agent": "Node.js",
-    },
-  };
-
-  // Use the native Node.js request library to make the request
-  let linkedIssues;
-  linkedIssues = await new Promise((resolve, reject) => {
-    const request = https.request(requestOptions, (response) => {
-      let responseBody = "";
-      response.on("data", (chunk) => {
-        responseBody += chunk;
-      });
-      response.on("end", () => {
-        resolve(JSON.parse(responseBody)?.data?.repository?.pullRequest?.closingIssuesReferences?.nodes);
-      });
-    });
-
-    request.on("error", (error) => {
-      reject(error);
-    });
-
-    request.write(graphqlData);
-    request.end();
-  });
-
-  if (!linkedIssues || linkedIssues.length === 0) {
-    console.log("No issue linked.");
-    return;
-  }
-
-  // Iterate over linked issues and apply labels to PR
-  for (const issue of linkedIssues) {
-    const labels = issue?.labels?.nodes?.map((label) => label.name);
-
-    if (!labels || labels.length === 0) {
-      console.log(`No labels found on the linked issue #${issue.number}.`);
-      continue;
-    }
-
-    const labelsData = JSON.stringify({
-      labels: labels,
-    });
-
-    const requestOptions = {
-      hostname: "api.github.com",
-      path: `/repos/${pr.base.repo.owner.login}/${pr.base.repo.name}/issues/${pr.number}/labels`,
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "Content-Length": labelsData.length,
-        Authorization: "Bearer " + token,
-        "User-Agent": "Node.js",
-      },
-    };
-
-    let labelResult;
-    labelResult = await new Promise((resolve, reject) => {
-      const request = https.request(requestOptions, (response) => {
-        let responseBody = "";
-        response.on("data", (chunk) => {
-          responseBody += chunk;
-        });
-        response.on("data", () => {});
-        response.on("end", () => {
-          resolve(JSON.parse(responseBody));
-        });
-      });
-
-      request.on("error", (error) => {
-        reject(error);
-      });
-
-      request.write(labelsData);
-      request.end();
-    });
-
-    if (labelResult.message) {
-      console.log(`Error labelling PR: ${labelResult.message}`);
-      continue;
-    }
-
-    console.log(
-      `Applied labels: ${labels.join(", ")} to PR #${pr.number} from linked issue #${issue.number}`
-    );
-  }
-}
-
-// Pass the PR data and GitHub token to the script
-(async () => {
-  if (!process.env.PR_DATA) {
-    console.log("No PR data found.");
-    return;
-  }
-
-  const prData = JSON.parse(process.env.PR_DATA);
-  const token = process.env.GITHUB_TOKEN;
-
-  await applyLabelFromLinkedIssueToPR(prData, token);
-})();

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

@@ -0,0 +1,21 @@
+name: "Validate PRs"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - edited
+      - synchronize
+
+permissions:
+  pull-requests: read
+
+jobs:
+  validate-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   test:
     timeout-minutes: 20
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout

.github/workflows/yarn-install.yml

@@ -6,7 +6,7 @@ on:
 jobs:
   setup:
     name: Yarn install & cache
-    runs-on: ubuntu-latest
+    runs-on: buildjet-4vcpu-ubuntu-2204
     timeout-minutes: 10
     steps:
       - uses: actions/checkout@v3

README.md

@@ -106,7 +106,7 @@ To get a local copy up and running, please follow these simple steps.
 
 Here is what you need to be able to run Cal.com.
 
-- Node.js (Version: >=15.x <17)
+- Node.js (Version: >=18.x)
 - PostgreSQL
 - Yarn _(recommended)_
 
@@ -416,7 +416,7 @@ Make sure to complete section "Obtaining the Google API Credentials". After the
 following
 
 1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
-1. Under 'OAuth concent screen', click "PUBLISH APP"
+1. Under 'OAuth consent screen', click "PUBLISH APP"
 
 ### Obtaining Microsoft Graph Client ID and Secret
 

apps/api/.eslintrc.js

@@ -1 +0,0 @@
-module.exports = require("@calcom/config/eslint-preset");

apps/api/lib/validations/booking.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-import { _BookingModel as Booking, _AttendeeModel, _UserModel } from "@calcom/prisma/zod";
+import { _BookingModel as Booking, _AttendeeModel, _UserModel, _PaymentModel } from "@calcom/prisma/zod";
 import { extendedBookingCreateBody, iso8601 } from "@calcom/prisma/zod-utils";
 
 import { schemaQueryUserId } from "./shared/queryUserId";
@@ -49,6 +49,15 @@ export const schemaBookingReadPublic = Booking.extend({
       locale: true,
     })
     .optional(),
+  payment: z
+    .array(
+      _PaymentModel.pick({
+        id: true,
+        success: true,
+        paymentOption: true,
+      })
+    )
+    .optional(),
 }).pick({
   id: true,
   userId: true,
@@ -61,6 +70,7 @@ export const schemaBookingReadPublic = Booking.extend({
   timeZone: true,
   attendees: true,
   user: true,
+  payment: true,
   metadata: true,
   status: true,
   responses: true,

apps/api/lib/validations/shared/queryAttendeeEmail.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 schemaQueryAttendeeEmail = baseApiParams.extend({
+  attendeeEmail: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleAttendeeEmails = z.object({
+  attendeeEmail: z.union([z.string().email(), z.array(z.string().email())]).optional(),
+});
+
+export const withValidQueryAttendeeEmail = withValidation({
+  schema: schemaQueryAttendeeEmail,
+  type: "Zod",
+  mode: "query",
+});

apps/api/package.json

@@ -11,10 +11,8 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
     "dev": "PORT=3002 next dev",
     "lint": "eslint . --ignore-path .gitignore",
-    "lint:report": "eslint . --format json --output-file ../../lint-results/api.json",
     "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
     "start": "PORT=3002 next start",
-    "test": "echo 'No tests yet' && exit 1",
     "type-check": "tsc --pretty --noEmit"
   },
   "devDependencies": {

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

@@ -5,6 +5,7 @@ import { getUserAvailability } from "@calcom/core/getUserAvailability";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { availabilityUserSelect } from "@calcom/prisma";
+import { MembershipRole } from "@calcom/prisma/enums";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 
 /**
@@ -97,6 +98,9 @@ import { stringOrNumber } from "@calcom/prisma/zod-utils";
  *       404:
  *         description: User not found | Team not found | Team has no members
  */
+interface MemberRoles {
+  [userId: number | string]: MembershipRole;
+}
 
 const availabilitySchema = z
   .object({
@@ -113,7 +117,7 @@ const availabilitySchema = z
   );
 
 async function handler(req: NextApiRequest) {
-  const { prisma, isAdmin } = req;
+  const { prisma, isAdmin, userId: reqUserId } = req;
   const { username, userId, eventTypeId, dateTo, dateFrom, teamId } = availabilitySchema.parse(req.query);
   if (!teamId)
     return getUserAvailability({
@@ -129,12 +133,26 @@ async function handler(req: NextApiRequest) {
   });
   if (!team) throw new HttpError({ statusCode: 404, message: "teamId not found" });
   if (!team.members) throw new HttpError({ statusCode: 404, message: "team has no members" });
-  const allMemberIds = team.members.map((membership) => membership.userId);
+  const allMemberIds = team.members.reduce((allMemberIds: number[], member) => {
+    if (member.accepted) {
+      allMemberIds.push(member.userId);
+    }
+    return allMemberIds;
+  }, []);
   const members = await prisma.user.findMany({
     where: { id: { in: allMemberIds } },
     select: availabilityUserSelect,
   });
-  if (!isAdmin) throw new HttpError({ statusCode: 403, message: "Forbidden" });
+  const memberRoles: MemberRoles = team.members.reduce((acc: MemberRoles, membership) => {
+    acc[membership.userId] = membership.role;
+    return acc;
+  }, {} as MemberRoles);
+  // check if the user is a team Admin or Owner, if it is a team request, or a system Admin
+  const isUserAdminOrOwner =
+    memberRoles[reqUserId] == MembershipRole.ADMIN ||
+    memberRoles[reqUserId] == MembershipRole.OWNER ||
+    isAdmin;
+  if (!isUserAdminOrOwner) throw new HttpError({ statusCode: 403, message: "Forbidden" });
   const availabilities = members.map(async (user) => {
     return {
       userId: user.id,

apps/api/pages/api/bookings/[id]/_get.ts

@@ -32,40 +32,65 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
  *         content:
  *           application/json:
  *             schema:
- *               $ref: "#/components/schemas/ArrayOfBookings"
+ *               $ref: "#/components/schemas/Booking"
  *             examples:
- *               bookings:
- *                 value: [
+ *               booking:
+ *                 value:
  *                   {
- *                     "id": 1,
- *                     "description": "Meeting with John",
- *                     "eventTypeId": 2,
- *                     "uid": "a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8",
- *                     "title": "Business Meeting",
- *                     "startTime": "2023-04-20T10:00:00.000Z",
- *                     "endTime": "2023-04-20T11:00:00.000Z",
- *                     "timeZone": "Europe/London",
- *                     "attendees": [
- *                       {
- *                         "email": "example@cal.com",
- *                         "name": "John Doe",
- *                         "timeZone": "Europe/London",
+ *                     "booking": {
+ *                       "id": 91,
+ *                       "userId": 5,
+ *                       "description": "",
+ *                       "eventTypeId": 7,
+ *                       "uid": "bFJeNb2uX8ANpT3JL5EfXw",
+ *                       "title": "60min between Pro Example and John Doe",
+ *                       "startTime": "2023-05-25T09:30:00.000Z",
+ *                       "endTime": "2023-05-25T10:30:00.000Z",
+ *                       "attendees": [
+ *                         {
+ *                           "email": "john.doe@example.com",
+ *                           "name": "John Doe",
+ *                           "timeZone": "Asia/Kolkata",
+ *                           "locale": "en"
+ *                         }
+ *                       ],
+ *                       "user": {
+ *                         "email": "pro@example.com",
+ *                         "name": "Pro Example",
+ *                         "timeZone": "Asia/Kolkata",
  *                         "locale": "en"
+ *                       },
+ *                       "payment": [
+ *                         {
+ *                           "id": 1,
+ *                           "success": true,
+ *                           "paymentOption": "ON_BOOKING"
+ *                         }
+ *                       ],
+ *                       "metadata": {},
+ *                       "status": "ACCEPTED",
+ *                       "responses": {
+ *                         "email": "john.doe@example.com",
+ *                         "name": "John Doe",
+ *                         "location": {
+ *                           "optionValue": "",
+ *                           "value": "inPerson"
+ *                         }
  *                       }
- *                     ]
+ *                     }
  *                   }
- *                 ]
  *       401:
  *        description: Authorization information is missing or invalid.
  *       404:
  *         description: Booking was not found
  */
+
 export async function getHandler(req: NextApiRequest) {
   const { prisma, query } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
   const booking = await prisma.booking.findUnique({
     where: { id },
-    include: { attendees: true, user: true },
+    include: { attendees: true, user: true, payment: true },
   });
   return { booking: schemaBookingReadPublic.parse(booking) };
 }

apps/api/pages/api/bookings/_get.ts

@@ -5,6 +5,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { schemaBookingReadPublic } from "~/lib/validations/booking";
+import { schemaQuerySingleOrMultipleAttendeeEmails } from "~/lib/validations/shared/queryAttendeeEmail";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
 
 /**
@@ -31,6 +32,19 @@ import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/que
  *              items:
  *                type: integer
  *              example: [2, 3, 4]
+ *       - in: query
+ *         name: attendeeEmail
+ *         required: false
+ *         schema:
+ *           oneOf:
+ *            - type: string
+ *              format: email
+ *              example: john.doe@example.com
+ *            - type: array
+ *              items:
+ *                type: string
+ *                format: email
+ *              example: [john.doe@example.com, jane.doe@example.com]
  *     operationId: listBookings
  *     tags:
  *     - bookings
@@ -45,22 +59,47 @@ import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/que
  *               bookings:
  *                 value: [
  *                   {
- *                     "id": 1,
- *                     "description": "Meeting with John",
- *                     "eventTypeId": 2,
- *                     "uid": "a1b2c3d4-e5f6-7890-g1h2-i3j4k5l6m7n8",
- *                     "title": "Business Meeting",
- *                     "startTime": "2023-04-20T10:00:00.000Z",
- *                     "endTime": "2023-04-20T11:00:00.000Z",
- *                     "timeZone": "Europe/London",
- *                     "attendees": [
- *                       {
- *                         "email": "example@cal.com",
- *                         "name": "John Doe",
- *                         "timeZone": "Europe/London",
+ *                     "booking": {
+ *                       "id": 91,
+ *                       "userId": 5,
+ *                       "description": "",
+ *                       "eventTypeId": 7,
+ *                       "uid": "bFJeNb2uX8ANpT3JL5EfXw",
+ *                       "title": "60min between Pro Example and John Doe",
+ *                       "startTime": "2023-05-25T09:30:00.000Z",
+ *                       "endTime": "2023-05-25T10:30:00.000Z",
+ *                       "attendees": [
+ *                         {
+ *                           "email": "john.doe@example.com",
+ *                           "name": "John Doe",
+ *                           "timeZone": "Asia/Kolkata",
+ *                           "locale": "en"
+ *                         }
+ *                       ],
+ *                       "user": {
+ *                         "email": "pro@example.com",
+ *                         "name": "Pro Example",
+ *                         "timeZone": "Asia/Kolkata",
  *                         "locale": "en"
+ *                       },
+ *                       "payment": [
+ *                         {
+ *                           "id": 1,
+ *                           "success": true,
+ *                           "paymentOption": "ON_BOOKING"
+ *                         }
+ *                       ],
+ *                       "metadata": {},
+ *                       "status": "ACCEPTED",
+ *                       "responses": {
+ *                         "email": "john.doe@example.com",
+ *                         "name": "John Doe",
+ *                         "location": {
+ *                           "optionValue": "",
+ *                           "value": "inPerson"
+ *                         }
  *                       }
- *                     ]
+ *                     }
  *                   }
  *                 ]
  *       401:
@@ -69,26 +108,42 @@ import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/que
  *         description: No bookings were found
  */
 
-async function handler(req: NextApiRequest) {
-  const { userId, isAdmin, prisma } = req;
-  const args: Prisma.BookingFindManyArgs = {};
-  args.include = {
-    attendees: true,
-    user: true,
-  };
-
-  /** Only admins can query other users */
-  if (isAdmin && req.query.userId) {
-    const query = schemaQuerySingleOrMultipleUserIds.parse(req.query);
-    const userIds = Array.isArray(query.userId) ? query.userId : [query.userId || userId];
-    const users = await prisma.user.findMany({
-      where: { id: { in: userIds } },
-      select: { email: true },
-    });
-    const userEmails = users.map((u) => u.email);
-    args.where = {
+/**
+ * Constructs the WHERE clause for Prisma booking findMany operation.
+ *
+ * @param userId - The ID of the user making the request. This is used to filter bookings where the user is either the host or an attendee.
+ * @param attendeeEmails - An array of emails provided in the request for filtering bookings by attendee emails, used in case of Admin calls.
+ * @param userIds - An array of user IDs to be included in the filter. Defaults to an empty array, and an array of user IDs in case of Admin call containing it.
+ * @param userEmails - An array of user emails to be included in the filter if it is an Admin call and contains userId in query parameter. Defaults to an empty array.
+ *
+ * @returns An object that represents the WHERE clause for the findMany/findUnique operation.
+ */
+function buildWhereClause(
+  userId: number,
+  attendeeEmails: string[],
+  userIds: number[] = [],
+  userEmails: string[] = []
+) {
+  const filterByAttendeeEmails = attendeeEmails.length > 0;
+  const userFilter = userIds.length > 0 ? { userId: { in: userIds } } : { userId };
+  let whereClause = {};
+  if (filterByAttendeeEmails) {
+    whereClause = {
+      AND: [
+        userFilter,
+        {
+          attendees: {
+            some: {
+              email: { in: attendeeEmails },
+            },
+          },
+        },
+      ],
+    };
+  } else {
+    whereClause = {
       OR: [
-        { userId: { in: userIds } },
+        userFilter,
         {
           attendees: {
             some: {
@@ -98,7 +153,45 @@ async function handler(req: NextApiRequest) {
         },
       ],
     };
-  } else if (!isAdmin) {
+  }
+
+  return {
+    ...whereClause,
+  };
+}
+
+async function handler(req: NextApiRequest) {
+  const { userId, isAdmin, prisma } = req;
+  const args: Prisma.BookingFindManyArgs = {};
+  args.include = {
+    attendees: true,
+    user: true,
+    payment: true,
+  };
+
+  const queryFilterForAttendeeEmails = schemaQuerySingleOrMultipleAttendeeEmails.parse(req.query);
+  const attendeeEmails = Array.isArray(queryFilterForAttendeeEmails.attendeeEmail)
+    ? queryFilterForAttendeeEmails.attendeeEmail
+    : typeof queryFilterForAttendeeEmails.attendeeEmail === "string"
+    ? [queryFilterForAttendeeEmails.attendeeEmail]
+    : [];
+  const filterByAttendeeEmails = attendeeEmails.length > 0;
+
+  /** Only admins can query other users */
+  if (isAdmin) {
+    if (req.query.userId) {
+      const query = schemaQuerySingleOrMultipleUserIds.parse(req.query);
+      const userIds = Array.isArray(query.userId) ? query.userId : [query.userId || userId];
+      const users = await prisma.user.findMany({
+        where: { id: { in: userIds } },
+        select: { email: true },
+      });
+      const userEmails = users.map((u) => u.email);
+      args.where = buildWhereClause(userId, attendeeEmails, userIds, userEmails);
+    } else if (filterByAttendeeEmails) {
+      args.where = buildWhereClause(userId, attendeeEmails, [], []);
+    }
+  } else {
     const user = await prisma.user.findUnique({
       where: { id: userId },
       select: {
@@ -108,20 +201,7 @@ async function handler(req: NextApiRequest) {
     if (!user) {
       throw new HttpError({ message: "User not found", statusCode: 500 });
     }
-    args.where = {
-      OR: [
-        {
-          userId,
-        },
-        {
-          attendees: {
-            some: {
-              email: user.email,
-            },
-          },
-        },
-      ],
-    };
+    args.where = buildWhereClause(userId, attendeeEmails, [], []);
   }
   const data = await prisma.booking.findMany(args);
   return { bookings: data.map((booking) => schemaBookingReadPublic.parse(booking)) };

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

@@ -26,7 +26,6 @@ import { defaultResponder } from "@calcom/lib/server";
  *             required:
  *               - eventTypeId
  *               - start
- *               - end
  *               - name
  *               - email
  *               - timeZone

apps/api/pages/api/docs.ts

@@ -98,6 +98,25 @@ const swaggerHandler = withSwagger({
                 },
               },
             },
+            payment: {
+              type: Array,
+              items: {
+                properties: {
+                  id: {
+                    type: "number",
+                    example: 1,
+                  },
+                  success: {
+                    type: "boolean",
+                    example: true,
+                  },
+                  paymentOption: {
+                    type: "string",
+                    example: "ON_BOOKING",
+                  },
+                },
+              },
+            },
           },
         },
       },

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

@@ -0,0 +1,27 @@
+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 { TRPCError } from "@trpc/server";
+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);
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return await caller.slots.getSchedule(req.query as any /* Let tRPC handle this */);
+  } catch (cause) {
+    if (cause instanceof TRPCError) {
+      const statusCode = getHTTPStatusCodeFromError(cause);
+      throw new HttpError({ statusCode, message: cause.message });
+    }
+    throw cause;
+  }
+}
+
+export default defaultResponder(handler);

apps/api/pages/api/slots/index.ts

@@ -0,0 +1,9 @@
+import { defaultHandler } from "@calcom/lib/server";
+
+import { withMiddleware } from "~/lib/helpers/withMiddleware";
+
+export default withMiddleware()(
+  defaultHandler({
+    GET: import("./_get"),
+  })
+);

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

@@ -1,19 +1,20 @@
 import type { Request, Response } from "express";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createMocks } from "node-mocks-http";
+import { describe, expect, test, vi } from "vitest";
 
 import dayjs from "@calcom/dayjs";
 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/config/singleton";
+import prismaMock from "../../../../../tests/libs/__mocks__/prisma";
 import handler from "../../../pages/api/bookings/_post";
 
 type CustomNextApiRequest = NextApiRequest & Request;
 type CustomNextApiResponse = NextApiResponse & Response;
-jest.mock("@calcom/features/webhooks/lib/sendPayload");
-jest.mock("@calcom/lib/server/i18n", () => {
+vi.mock("@calcom/features/webhooks/lib/sendPayload");
+vi.mock("@calcom/lib/server/i18n", () => {
   return {
     getTranslation: (key: string) => key,
   };
@@ -151,7 +152,7 @@ describe("POST /api/bookings", () => {
     });
   });
 
-  xdescribe("Success", () => {
+  describe("Success", () => {
     describe("Regular event-type", () => {
       test("Creates one single booking", async () => {
         const { req, res } = createMocks<CustomNextApiRequest, CustomNextApiResponse>({

apps/swagger/lib/snippets.ts

@@ -30,7 +30,7 @@ export const SnippedGenerator = {
     // extend some internals to gain information about current path, method and spec in the generator function metioned later
     spec: {
       wrapSelectors: {
-        requestFor: (ori, system) => (state, path, method) => {
+        requestFor: (ori) => (state, path, method) => {
           return ori(path, method)
             ?.set("spec", state.get("json", {}))
             ?.setIn(["oasPathMethod", "path"], path)

apps/web/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @calcom/web
 
+## 2.9.4
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.0.9
+  - @calcom/embed-react@1.1.1
+  - @calcom/embed-core@1.2.1
+
+## 2.9.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-react@1.1.0
+  - @calcom/embed-core@1.2.0
+  - @calcom/embed-snippet@1.0.8
+
 ## 2.7.16
 
 ### Patch Changes

apps/web/components/AppListCard.tsx

@@ -60,6 +60,7 @@ export default function AppListCard(props: AppListCardProps) {
         timeoutRef.current = null;
       }
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

apps/web/components/Embed.tsx

@@ -1133,12 +1133,7 @@ export const EmbedDialog = () => {
   const router = useRouter();
   const embedUrl: string = router.query.embedUrl as string;
   return (
-    <Dialog
-      name="embed"
-      clearQueryParamsOnClose={queryParamsForDialog}
-      onOpenChange={(open) => {
-        if (!open) window.resetEmbedStatus();
-      }}>
+    <Dialog name="embed" clearQueryParamsOnClose={queryParamsForDialog}>
       {!router.query.embedType ? (
         <ChooseEmbedTypesDialogContent />
       ) : (

apps/web/components/Gates.tsx

@@ -1,51 +0,0 @@
-import dynamic from "next/dynamic";
-import type { Dispatch } from "react";
-import { useState, useEffect } from "react";
-import type { JSONObject } from "superjson/dist/types";
-
-export type Gate = undefined | "rainbow"; // Add more like ` | "geolocation" | "payment"`
-
-export type GateState = {
-  rainbowToken?: string;
-};
-
-type GateProps = {
-  children: React.ReactNode;
-  gates: Gate[];
-  appData: JSONObject;
-  dispatch: Dispatch<Partial<GateState>>;
-};
-
-const RainbowGate = dynamic(() => import("@calcom/app-store/rainbow/components/RainbowKit"));
-
-// To add a new Gate just add the gate logic to the switch statement
-const Gates: React.FC<GateProps> = ({ children, gates, appData, dispatch }) => {
-  const [rainbowToken, setRainbowToken] = useState<string>();
-
-  useEffect(() => {
-    dispatch({ rainbowToken });
-  }, [rainbowToken, dispatch]);
-
-  let gateWrappers = <>{children}</>;
-
-  // Recursively wraps the `gateWrappers` with new gates allowing for multiple gates
-  for (const gate of gates) {
-    switch (gate) {
-      case "rainbow":
-        if (appData.blockchainId && appData.smartContractAddress && !rainbowToken) {
-          gateWrappers = (
-            <RainbowGate
-              setToken={setRainbowToken}
-              chainId={appData.blockchainId as number}
-              tokenAddress={appData.smartContractAddress as string}>
-              {gateWrappers}
-            </RainbowGate>
-          );
-        }
-    }
-  }
-
-  return gateWrappers;
-};
-
-export default Gates;

apps/web/components/PageWrapper.tsx

@@ -5,6 +5,8 @@ import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { buildCanonical } from "@calcom/lib/next-seo.config";
 
 import type { AppProps } from "@lib/app-providers";
 import AppProviders from "@lib/app-providers";
@@ -13,7 +15,7 @@ import { seoConfig } from "@lib/config/next-seo.config";
 import I18nLanguageHandler from "@components/I18nLanguageHandler";
 
 export interface CalPageWrapper {
-  (props?: any): JSX.Element;
+  (props?: AppProps): JSX.Element;
   PageWrapper?: AppProps["Component"]["PageWrapper"];
 }
 
@@ -49,9 +51,24 @@ function PageWrapper(props: AppProps) {
   };
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page);
+
+  // Canonical: Check if the URL is from cal.com so that we set the canonical conditionally
+  const isCalcom =
+    WEBAPP_URL &&
+    (new URL(WEBAPP_URL).hostname.endsWith("cal.com") || new URL(WEBAPP_URL).hostname.endsWith("cal.dev"));
+  const path = router.asPath;
+
   return (
     <AppProviders {...providerProps}>
-      <DefaultSeo {...seoConfig.defaultNextSeo} />
+      <DefaultSeo
+        // Set canonical to https://cal.com or self-hosted URL
+        canonical={
+          isCalcom
+            ? buildCanonical({ path, origin: "https://cal.com" }) // cal.com & .dev
+            : buildCanonical({ path, origin: WEBAPP_URL }) // self-hosted
+        }
+        {...seoConfig.defaultNextSeo}
+      />
       <I18nLanguageHandler />
       <Script
         nonce={nonce}

apps/web/components/apps/AdditionalCalendarSelector.tsx

@@ -1,3 +1,5 @@
+import type { FunctionComponent, SVGProps } from "react";
+
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -55,7 +57,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
                     <InstallAppButton
                       type={data.type}
                       render={(installProps) => {
-                        const props = { ...installProps } as any;
+                        const props = { ...installProps } as FunctionComponent<SVGProps<SVGSVGElement>>;
                         return (
                           <DropdownItem {...props} color="minimal" type="button">
                             <span className="flex items-center gap-x-2">

apps/web/components/apps/App.tsx

@@ -129,7 +129,10 @@ const Component = ({
                 className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
                 {categories[0]}
               </Link>{" "}
-              • {t("published_by", { author })}
+              •{" "}
+              <a target="_blank" rel="noreferrer" href={website}>
+                {t("published_by", { author })}
+              </a>
             </h2>
             {isTemplate && (
               <Badge variant="red" className="mt-4">
@@ -257,7 +260,7 @@ const Component = ({
           )}
         </span>
 
-        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("learn_more")}</h4>
+        <h4 className="text-emphasis mt-8 mb-2 font-semibold ">{t("contact")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">
           {docs && (
             <li>

apps/web/components/apps/layouts/InstalledAppsLayout.tsx

@@ -2,60 +2,12 @@ import type { ComponentProps } from "react";
 import React from "react";
 
 import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
-import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
-import { trpc } from "@calcom/trpc/react";
-import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
-import { BarChart, Calendar, CreditCard, Grid, Share2, Video } from "@calcom/ui/components/icon";
-
-const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
-  {
-    name: "calendar",
-    href: "/apps/installed/calendar",
-    icon: Calendar,
-  },
-  {
-    name: "conferencing",
-    href: "/apps/installed/conferencing",
-    icon: Video,
-  },
-  {
-    name: "payment",
-    href: "/apps/installed/payment",
-    icon: CreditCard,
-  },
-  {
-    name: "automation",
-    href: "/apps/installed/automation",
-    icon: Share2,
-  },
-  {
-    name: "analytics",
-    href: "/apps/installed/analytics",
-    icon: BarChart,
-  },
-  {
-    name: "other",
-    href: "/apps/installed/other",
-    icon: Grid,
-  },
-];
 
 export default function InstalledAppsLayout({
   children,
   ...rest
 }: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  const variant: (typeof InstalledAppVariants)[number] = "payment";
-
-  const query = trpc.viewer.integrations.useQuery({
-    variant,
-    onlyInstalled: true,
-  });
-  let actualTabs = tabs;
-  if (query.data?.items.length === 0) {
-    actualTabs = tabs.filter((tab) => tab.name !== variant);
-  }
-
   return (
     <Shell {...rest} hideHeadingOnMobile>
       <AppCategoryNavigation baseURL="/apps/installed" containerClassname="min-w-0 w-full">

apps/web/components/auth/TwoFactor.tsx

@@ -26,24 +26,24 @@ export default function TwoFactor({ center = true }) {
 
   return (
     <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
-      <Label className="mt-4"> {t("2fa_code")}</Label>
+      <Label className="mt-4">{t("2fa_code")}</Label>
 
       <p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
-      <input hidden type="hidden" value={value} {...methods.register("totpCode")} />
+
+      <input type="hidden" value={value} {...methods.register("totpCode")} />
+
       <div className="flex flex-row justify-between">
-        <Input
-          className={className}
-          name="2fa1"
-          inputMode="decimal"
-          {...digits[0]}
-          autoFocus
-          autoComplete="one-time-code"
-        />
-        <Input className={className} name="2fa2" inputMode="decimal" {...digits[1]} />
-        <Input className={className} name="2fa3" inputMode="decimal" {...digits[2]} />
-        <Input className={className} name="2fa4" inputMode="decimal" {...digits[3]} />
-        <Input className={className} name="2fa5" inputMode="decimal" {...digits[4]} />
-        <Input className={className} name="2fa6" inputMode="decimal" {...digits[5]} />
+        {digits.map((digit, index) => (
+          <Input
+            key={`2fa${index}`}
+            className={className}
+            name={`2fa${index + 1}`}
+            inputMode="decimal"
+            {...digit}
+            autoFocus={index === 0}
+            autoComplete="one-time-code"
+          />
+        ))}
       </div>
     </div>
   );

apps/web/components/booking/AvailableEventLocations.tsx

@@ -24,7 +24,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     }
 
     const translateAbleKeys = [
-      "attendee_in_person",
+      "in_person_attendee_address",
       "in_person",
       "attendee_phone_number",
       "link_meeting",

apps/web/components/booking/AvailableTimes.tsx

@@ -28,7 +28,6 @@ type AvailableTimesProps = {
   bookingAttendees?: number | null;
   slots?: Slot[];
   isLoading: boolean;
-  ethSignature?: string;
   duration: number;
 };
 
@@ -43,7 +42,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   onTimeFormatChange,
   seatsPerTimeSlot,
   bookingAttendees,
-  ethSignature,
   duration,
 }) => {
   const reserveSlotMutation = trpc.viewer.public.slots.reserveSlot.useMutation();
@@ -119,7 +117,6 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                     timeFormat,
                     /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
                     count: recurringCount && !rescheduleUid ? recurringCount : undefined,
-                    ...(ethSignature ? { ethSignature } : {}),
                   },
                 };
 
@@ -164,7 +161,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                           brand === "#fff" || brand === "#ffffff" ? "" : ""
                         )}
                         onClick={() => reserveSlot(slot)}
-                        data-testid="time">
+                        data-testid="time"
+                        data-disabled="false">
                         {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                         {!!seatsPerTimeSlot && (
                           <p

apps/web/components/booking/BookingListItem.tsx

@@ -123,7 +123,8 @@ function BookingListItem(booking: BookingItemProps) {
       disabled: mutation.isLoading,
     },
     // For bookings with payment, only confirm if the booking is paid for
-    ...((isPending && !booking?.eventType?.price) || (!!booking?.eventType?.price && booking.paid)
+    ...((isPending && !paymentAppData.enabled) ||
+    (paymentAppData.enabled && !!paymentAppData.price && booking.paid)
       ? [
           {
             id: "confirm",
@@ -318,6 +319,7 @@ function BookingListItem(booking: BookingItemProps) {
             <DialogClose />
             <Button
               disabled={mutation.isLoading}
+              data-testid="rejection-confirm"
               onClick={() => {
                 bookingConfirm(false);
               }}>

apps/web/components/booking/CancelBooking.tsx

@@ -59,6 +59,7 @@ export default function CancelBooking(props: Props) {
         <div className="mt-5 sm:mt-6">
           <label className="text-default font-medium">{t("cancellation_reason")}</label>
           <TextArea
+            data-testid="cancel_reason"
             ref={cancelBookingRef}
             placeholder={t("cancellation_reason_placeholder")}
             value={cancellationReason}
@@ -75,7 +76,7 @@ export default function CancelBooking(props: Props) {
                 {t("nevermind")}
               </Button>
               <Button
-                data-testid="cancel"
+                data-testid="confirm_cancel"
                 onClick={async () => {
                   setLoading(true);
 

apps/web/components/booking/SlotPicker.tsx

@@ -80,7 +80,6 @@ export const SlotPicker = ({
   seatsPerTimeSlot,
   bookingAttendees,
   weekStart = 0,
-  ethSignature,
 }: {
   eventType: Pick<
     EventType & { metadata: z.infer<typeof EventTypeMetaDataSchema> },
@@ -94,7 +93,6 @@ export const SlotPicker = ({
   recurringEventCount?: number;
   users: string[];
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  ethSignature?: string;
 }) => {
   const [selectedDate, setSelectedDate] = useState<Dayjs>();
   const [browsingDate, setBrowsingDate] = useState<Dayjs>();
@@ -193,7 +191,6 @@ export const SlotPicker = ({
         seatsPerTimeSlot={seatsPerTimeSlot}
         bookingAttendees={bookingAttendees}
         recurringCount={recurringEventCount}
-        ethSignature={ethSignature}
         duration={parseInt(duration)}
       />
     </>

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

@@ -1,10 +1,9 @@
 import dynamic from "next/dynamic";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
-import { getEventTypeAppData } from "@calcom/app-store/utils";
 import dayjs from "@calcom/dayjs";
 import {
   useEmbedNonStylesConfig,
@@ -27,8 +26,6 @@ import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
-import type { Gate, GateState } from "@components/Gates";
-import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
 import { SlotPicker } from "@components/booking/SlotPicker";
 
@@ -89,14 +86,6 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
     setIs24hClockInLocalStorage(is24Hours);
   };
 
-  const [gateState, gateDispatcher] = useReducer(
-    (state: GateState, newState: Partial<GateState>) => ({
-      ...state,
-      ...newState,
-    }),
-    {}
-  );
-
   useEffect(() => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
   }, []);
@@ -124,20 +113,11 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   );
   const paymentAppData = getPaymentAppData(eventType);
 
-  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
   const rawSlug = profile.slug ? profile.slug.split("/") : [];
   if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.
 
   const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
 
-  // Define conditional gates here
-  const gates = [
-    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
-      ? ("rainbow" as Gate)
-      : undefined,
-  ];
-
   const { data: bookingAttendees } = trpc.viewer.bookings.getBookingAttendees.useQuery(
     {
       seatReferenceUid: rescheduleUid,
@@ -148,7 +128,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
   );
 
   return (
-    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
+    <>
       <HeadSeo
         title={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title} | ${profile.name}`}
         description={`${rescheduleUid ? t("reschedule") : ""} ${eventType.title}`}
@@ -296,7 +276,6 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                   seatsPerTimeSlot={eventType.seatsPerTimeSlot || undefined}
                   bookingAttendees={bookingAttendees || undefined}
                   recurringEventCount={recurringEventCount}
-                  ethSignature={gateState.rainbowToken}
                 />
               </div>
             </div>
@@ -306,7 +285,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
         </main>
       </div>
       <Toaster position="bottom-right" />
-    </Gates>
+    </>
   );
 };
 

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

@@ -4,7 +4,7 @@ import { useSession } from "next-auth/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useReducer, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm, useFormContext } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
@@ -12,7 +12,6 @@ import { z } from "zod";
 import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager";
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
-import { getEventTypeAppData } from "@calcom/app-store/utils";
 import type { LocationObject } from "@calcom/core/location";
 import dayjs from "@calcom/dayjs";
 import {
@@ -51,8 +50,6 @@ import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/
 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
-import type { Gate, GateState } from "@components/Gates";
-import Gates from "@components/Gates";
 import BookingDescription from "@components/booking/BookingDescription";
 
 import type { BookPageProps } from "../../../pages/[user]/book";
@@ -224,13 +221,6 @@ const BookingPage = ({
   const { data: session } = useSession();
   const isBackgroundTransparent = useIsBackgroundTransparent();
   const telemetry = useTelemetry();
-  const [gateState, gateDispatcher] = useReducer(
-    (state: GateState, newState: Partial<GateState>) => ({
-      ...state,
-      ...newState,
-    }),
-    {}
-  );
 
   const { timezone } = useTimePreferences();
 
@@ -488,7 +478,6 @@ const BookingPage = ({
         metadata,
         hasHashedBookingLink,
         hashedLink,
-        ethSignature: gateState.rainbowToken,
       }));
       recurringMutation.mutate(recurringBookings);
     } else {
@@ -506,25 +495,15 @@ const BookingPage = ({
         metadata,
         hasHashedBookingLink,
         hashedLink,
-        ethSignature: gateState.rainbowToken,
         seatReferenceUid: router.query.seatReferenceUid as string,
       });
     }
   };
 
   const showEventTypeDetails = (isEmbed && !embedUiConfig.hideEventTypeDetails) || !isEmbed;
-  const rainbowAppData = getEventTypeAppData(eventType, "rainbow") || {};
-
-  // Define conditional gates here
-  const gates = [
-    // Rainbow gate is only added if the event has both a `blockchainId` and a `smartContractAddress`
-    rainbowAppData && rainbowAppData.blockchainId && rainbowAppData.smartContractAddress
-      ? ("rainbow" as Gate)
-      : undefined,
-  ];
 
   return (
-    <Gates gates={gates} appData={rainbowAppData} dispatch={gateDispatcher}>
+    <>
       <Head>
         <title>
           {rescheduleUid
@@ -686,7 +665,7 @@ const BookingPage = ({
         </div>
       </main>
       <Toaster position="bottom-right" />
-    </Gates>
+    </>
   );
 };
 

apps/web/components/dialog/RescheduleDialog.tsx

@@ -55,7 +55,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             </p>
             <TextArea
               data-testid="reschedule_reason"
-              name={t("reschedule_reason")}
+              name={t("reason_for_reschedule")}
               value={rescheduleReason}
               onChange={(e) => setRescheduleReason(e.target.value)}
               className="mb-5 sm:mb-6"

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -16,6 +16,7 @@ import {
   allowDisablingHostConfirmationEmails,
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
+import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
 import { classNames } from "@calcom/lib";
 import { APP_NAME, CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -65,7 +66,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
   const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
-  const noShowFeeEnabled = eventType.metadata.apps?.stripe?.paymentOption === "HOLD";
+  const noShowFeeEnabled = eventType.metadata?.apps?.stripe?.paymentOption === "HOLD";
 
   useEffect(() => {
     !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0]?.id ?? team?.id));
@@ -159,6 +160,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           }
         />
       </div>
+      <hr className="border-subtle [&:has(+div:empty)]:hidden" />
+      <div>
+        <BookerLayoutSelector fallbackToUserSettings />
+      </div>
       <hr className="border-subtle" />
       <FormBuilder
         title={t("booking_questions_title")}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -104,9 +104,9 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         </div>
       </div>
       {!shouldLockDisableProps("apps").disabled && (
-        <div>
+        <div className="bg-muted rounded-md p-8">
           {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
+            <h2 className="text-emphasis text-lg font-semibold">{t("available_apps")}</h2>
           ) : null}
           <div className="before:border-0">
             {notInstalledApps?.map((app) => (

apps/web/components/eventtype/EventSetupTab.tsx

@@ -115,7 +115,7 @@ export const EventSetupTab = (
   const [showLocationModal, setShowLocationModal] = useState(false);
   const [editingLocationType, setEditingLocationType] = useState<string>("");
   const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
-  const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);
+  const [multipleDuration, setMultipleDuration] = useState(eventType.metadata?.multipleDuration);
 
   const locationOptions = props.locationOptions.filter((option) => {
     return !team ? option.label !== "Conferencing" : true;

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -75,8 +75,7 @@ function getNavigation(props: {
   installedAppsNumber: number;
   availability: AvailabilityOption | undefined;
 }) {
-  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber, availability } =
-    props;
+  const { eventType, t, enabledAppsNumber, installedAppsNumber, enabledWorkflowsNumber } = props;
   const duration =
     eventType.metadata?.multipleDuration?.map((duration) => ` ${duration}`) || eventType.length;
 
@@ -178,6 +177,7 @@ function EventTypeSingleLayout({
       enabledWorkflowsNumber,
       availability,
     });
+
     navigation.splice(1, 0, {
       name: "availability",
       href: `/event-types/${eventType.id}?tabName=availability`,
@@ -185,7 +185,7 @@ function EventTypeSingleLayout({
       info:
         isManagedEventType || isChildrenManagedEventType
           ? eventType.schedule === null
-            ? "Member's default schedule"
+            ? "members_default_schedule"
             : isChildrenManagedEventType
             ? `${
                 eventType.scheduleName
@@ -193,7 +193,7 @@ function EventTypeSingleLayout({
                   : `default_schedule_name`
               }`
             : eventType.scheduleName ?? `default_schedule_name`
-          : `default_schedule_name`,
+          : eventType.scheduleName ?? `default_schedule_name`,
     });
     // If there is a team put this navigation item within the tabs
     if (team) {
@@ -220,7 +220,18 @@ function EventTypeSingleLayout({
       });
     }
     return navigation;
-  }, [t, eventType, installedAppsNumber, enabledAppsNumber, enabledWorkflowsNumber, team, availability]);
+  }, [
+    t,
+    eventType,
+    enabledAppsNumber,
+    installedAppsNumber,
+    enabledWorkflowsNumber,
+    availability,
+    isManagedEventType,
+    isChildrenManagedEventType,
+    team,
+    formMethods,
+  ]);
 
   const permalink = `${CAL_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
     eventType.slug
@@ -236,22 +247,36 @@ function EventTypeSingleLayout({
       heading={eventType.title}
       CTA={
         <div className="flex items-center justify-end">
-          {!eventType.metadata.managedEventConfig && (
+          {!eventType.metadata?.managedEventConfig && (
             <>
-              <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 lg:flex">
-                <Skeleton
-                  as={Label}
-                  htmlFor="hiddenSwitch"
-                  className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
-                  {t("hide_from_profile")}
-                </Skeleton>
-                <Switch
-                  id="hiddenSwitch"
-                  checked={formMethods.watch("hidden")}
-                  onCheckedChange={(e) => {
-                    formMethods.setValue("hidden", e);
-                  }}
-                />
+              <div
+                className={classNames(
+                  "sm:hover:bg-muted hidden cursor-pointer items-center rounded-md",
+                  formMethods.watch("hidden") ? "px-2" : "",
+                  "lg:flex"
+                )}>
+                {formMethods.watch("hidden") && (
+                  <Skeleton
+                    as={Label}
+                    htmlFor="hiddenSwitch"
+                    className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
+                    {t("hidden")}
+                  </Skeleton>
+                )}
+                <Tooltip
+                  content={
+                    formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
+                  }>
+                  <div className="self-center rounded-md p-2">
+                    <Switch
+                      id="hiddenSwitch"
+                      checked={!formMethods.watch("hidden")}
+                      onCheckedChange={(e) => {
+                        formMethods.setValue("hidden", !e);
+                      }}
+                    />
+                  </div>
+                </Tooltip>
               </div>
               <VerticalDivider className="hidden lg:block" />
             </>
@@ -344,18 +369,18 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="sm:hover:bg-subtle flex h-9 flex-row items-center justify-between py-2 px-4">
+              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
                   className="mt-2 inline cursor-pointer self-center pr-2 ">
-                  {t("hide_from_profile")}
+                  {formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")}
                 </Skeleton>
                 <Switch
                   id="hiddenSwitch"
-                  checked={formMethods.watch("hidden")}
+                  checked={!formMethods.watch("hidden")}
                   onCheckedChange={(e) => {
-                    formMethods.setValue("hidden", e);
+                    formMethods.setValue("hidden", !e);
                   }}
                 />
               </div>
@@ -365,7 +390,7 @@ function EventTypeSingleLayout({
           <Button
             className="ml-4 lg:ml-0"
             type="submit"
-            loading={formMethods.formState.isSubmitting || isUpdateMutationLoading}
+            loading={isUpdateMutationLoading}
             data-testid="update-eventtype"
             form="event-type-form">
             {t("save")}

apps/web/components/eventtype/RequiresConfirmationController.tsx

@@ -39,6 +39,7 @@ export default function RequiresConfirmationController({
     if (!requiresConfirmation) {
       formMethods.setValue("metadata.requiresConfirmationThreshold", undefined);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [requiresConfirmation]);
 
   const { shouldLockDisableProps } = useLockedFieldsManager(

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

@@ -15,7 +15,7 @@ interface IConnectCalendarsProps {
 
 const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
-  const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery();
+  const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true });
   const { t } = useLocale();
   const queryIntegrations = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: false });
 

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

@@ -24,7 +24,7 @@ interface IUserProfileProps {
 const UserProfile = (props: IUserProfileProps) => {
   const { user } = props;
   const { t } = useLocale();
-  const avatarRef = useRef<HTMLInputElement>(null!);
+  const avatarRef = useRef<HTMLInputElement>(null);
   const { setValue, handleSubmit, getValues } = useForm<FormData>({
     defaultValues: { bio: user?.bio || "" },
   });
@@ -76,7 +76,7 @@ const UserProfile = (props: IUserProfileProps) => {
 
   async function updateProfileHandler(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
-    const enteredAvatar = avatarRef.current.value;
+    const enteredAvatar = avatarRef.current?.value;
     mutation.mutate({
       avatar: enteredAvatar,
     });
@@ -127,14 +127,16 @@ const UserProfile = (props: IUserProfileProps) => {
             id="avatar-upload"
             buttonMsg={t("add_profile_photo")}
             handleAvatarChange={(newAvatar) => {
-              avatarRef.current.value = newAvatar;
+              if (avatarRef.current) {
+                avatarRef.current.value = newAvatar;
+              }
               const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
                 window.HTMLInputElement.prototype,
                 "value"
               )?.set;
               nativeInputValueSetter?.call(avatarRef.current, newAvatar);
               const ev2 = new Event("input", { bubbles: true });
-              avatarRef.current.dispatchEvent(ev2);
+              avatarRef.current?.dispatchEvent(ev2);
               updateProfileHandler(ev2 as unknown as FormEvent<HTMLFormElement>);
               setImageSrc(newAvatar);
             }}

apps/web/components/settings/DisableTwoFactorModal.tsx

@@ -90,7 +90,7 @@ const DisableTwoFactorAuthModal = ({
           </div>
 
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <Button type="submit" className="ms-2 me-2" disabled={isDisabling}>
+            <Button type="submit" className="ms-2 me-2" data-testid="disable-2fa" disabled={isDisabling}>
               {t("disable")}
             </Button>
             <Button color="secondary" onClick={onCancel}>

apps/web/components/settings/EnableTwoFactorModal.tsx

@@ -156,7 +156,9 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
                 <img src={dataUri} alt="" />
               }
             </div>
-            <p className="text-center font-mono text-xs">{secret}</p>
+            <p data-testid="two-factor-secret" className="text-center font-mono text-xs">
+              {secret}
+            </p>
           </>
         </WithStep>
         <Form handleSubmit={handleEnable} form={form}>
@@ -164,7 +166,11 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
             <div className="mb-4">
               <TwoFactor center />
 
-              {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
+              {errorMessage && (
+                <p data-testid="error-submitting-code" className="mt-1 text-sm text-red-700">
+                  {errorMessage}
+                </p>
+              )}
             </div>
           </WithStep>
           <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
@@ -178,12 +184,16 @@ const EnableTwoFactorModal = ({ onEnable, onCancel, open, onOpenChange }: Enable
               </Button>
             </WithStep>
             <WithStep step={SetupStep.DisplayQrCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" onClick={() => setStep(SetupStep.EnterTotpCode)}>
+              <Button
+                type="submit"
+                data-testid="goto-otp-screen"
+                className="ms-2 me-2"
+                onClick={() => setStep(SetupStep.EnterTotpCode)}>
                 {t("continue")}
               </Button>
             </WithStep>
             <WithStep step={SetupStep.EnterTotpCode} current={step}>
-              <Button type="submit" className="ms-2 me-2" disabled={isSubmitting}>
+              <Button type="submit" className="ms-2 me-2" data-testid="enable-2fa" disabled={isSubmitting}>
                 {t("enable")}
               </Button>
             </WithStep>

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

@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
+import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { Avatar } from "@calcom/ui";
 
@@ -23,7 +24,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
 
   return (
     <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
-      <div className="sm:min-w-80 sm:max-w-80  bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
+      <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
         <Avatar
           size="md"
           alt={member.name || ""}
@@ -36,7 +37,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
               <>
                 <div
                   className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                  dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
+                  dangerouslySetInnerHTML={{ __html: md.render(markdownToSafeHTML(member.bio)) }}
                 />
               </>
             ) : (

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

@@ -79,7 +79,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
 
   const ActionButtons = () => {
     return usernameIsAvailable && currentUsername !== inputUsernameValue ? (
-      <div className="ms-2 me-2 mt-px flex flex-row space-x-2">
+      <div className="ms-2 me-2 flex flex-row space-x-2">
         <Button
           type="button"
           onClick={() => setOpenDialogSaveUsername(true)}
@@ -142,7 +142,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
             </div>
           )}
         </div>
-        <div className="mt-5 hidden md:inline">
+        <div className="mt-7 hidden md:inline">
           <ActionButtons />
         </div>
       </div>

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

@@ -26,12 +26,6 @@ export const CheckedSelect = ({
   return (
     <>
       <Select
-        styles={{
-          option: (styles, { isDisabled }) => ({
-            ...styles,
-            backgroundColor: isDisabled ? "#F5F5F5" : "inherit",
-          }),
-        }}
         name={props.name}
         placeholder={props.placeholder || t("select")}
         isSearchable={false}

apps/web/lib/QueryCell.tsx

@@ -66,6 +66,7 @@ export function QueryCell<TData, TError extends ErrorLike>(
     if ("empty" in opts && (query.data == null || (Array.isArray(query.data) && query.data.length === 0))) {
       return opts.empty(query);
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return opts.success(query as any);
   }
 
@@ -88,9 +89,10 @@ const withQuery = <
   TInput = inferProcedureInput<TQuery>,
   TOutput = inferProcedureOutput<TQuery>
 >(
-  queryProcedure: DecorateProcedure<TQuery, any, any>,
+  queryProcedure: DecorateProcedure<TQuery, inferProcedureInput<TQuery>, inferProcedureOutput<TQuery>>,
+
   input?: TInput,
-  params?: UseTRPCQueryOptions<any, TInput, TOutput, TOutput, TError>
+  params?: UseTRPCQueryOptions<TQuery, TInput, TOutput, TOutput, TError>
 ) => {
   return function WithQuery(
     opts: Omit<

apps/web/lib/hooks/useRouterQuery.ts

@@ -5,7 +5,25 @@ export default function useRouterQuery<T extends string>(name: T) {
   const existingQueryParams = router.asPath.split("?")[1];
 
   const urlParams = new URLSearchParams(existingQueryParams);
-  const query = Object.fromEntries(urlParams);
+  const query: Record<string, string | string[]> = {};
+  // Following error is thrown by Typescript:
+  // 'Type 'URLSearchParams' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher'
+  // We should change the target to higher ES2019 atleast maybe
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  for (const [key, value] of urlParams) {
+    if (!query[key]) {
+      query[key] = value;
+    } else {
+      let queryValue = query[key];
+      if (queryValue instanceof Array) {
+        queryValue.push(value);
+      } else {
+        queryValue = query[key] = [queryValue];
+        queryValue.push(value);
+      }
+    }
+  }
 
   const setQuery = (newValue: string | number | null | undefined) => {
     router.replace({ query: { ...router.query, [name]: newValue } }, undefined, { shallow: true });

apps/web/lib/types/inferSSRProps.ts

@@ -1,6 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 type GetSSRResult<TProps> =
   //
-  { props: TProps } | { redirect: any } | { notFound: boolean };
+  { props: TProps } | { redirect: { destination: string; permanent: boolean } } | { notFound: boolean };
 
 type GetSSRFn<TProps> = (...args: any[]) => Promise<GetSSRResult<TProps>>;
 

apps/web/middleware.ts

@@ -7,16 +7,10 @@ import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { isIpInBanlist } from "@calcom/lib/getIP";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
-let cold = true;
-
 const middleware: NextMiddleware = async (req) => {
   const url = req.nextUrl;
   const requestHeaders = new Headers(req.headers);
 
-  // This console.log is required to create a report in axios for hot and cold requests
-  console.log(cold ? "Cold Start" : "Hot Start");
-  requestHeaders.set("x-cal-cold-start", cold ? "true" : "false");
-  cold = false;
   if (!url.pathname.startsWith("/api")) {
     //
     // NOTE: When tRPC hits an error a 500 is returned, when this is received

apps/web/next.config.js

@@ -2,7 +2,7 @@ require("dotenv").config({ path: "../../.env" });
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const os = require("os");
 const glob = require("glob");
-
+const englishTranslation = require("./public/static/locales/en/common.json");
 const { withAxiom } = require("next-axiom");
 const { i18n } = require("./next-i18next.config");
 
@@ -57,6 +57,20 @@ if (process.env.GOOGLE_API_CREDENTIALS && !validJson(process.env.GOOGLE_API_CRED
   );
 }
 
+const informAboutDuplicateTranslations = () => {
+  const valueSet = new Set();
+
+  for (const key in englishTranslation) {
+    if (valueSet.has(englishTranslation[key])) {
+      console.warn("\x1b[33mDuplicate value found in:", "\x1b[0m", key);
+    } else {
+      valueSet.add(englishTranslation[key]);
+    }
+  }
+};
+
+informAboutDuplicateTranslations();
+
 const plugins = [];
 if (process.env.ANALYZE === "true") {
   // only load dependency if env `ANALYZE` was set
@@ -215,6 +229,11 @@ const nextConfig = {
         destination: "/new-booker/team/:slug/:type",
         has: [{ type: "cookie", key: "new-booker-enabled" }],
       },
+      {
+        source: "/d/:link/:slug",
+        destination: "/new-booker/d/:link/:slug",
+        has: [{ type: "cookie", key: "new-booker-enabled" }],
+      },
     ];
   },
   async headers() {

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.9.4",
+  "version": "2.9.8",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -109,6 +109,7 @@
     "react-intl": "^5.25.1",
     "react-live-chat-loader": "^2.7.3",
     "react-multi-email": "^0.5.3",
+    "react-phone-input-2": "^2.15.1",
     "react-phone-number-input": "^3.2.7",
     "react-schemaorg": "^2.0.0",
     "react-select": "^5.7.0",

apps/web/pages/404.tsx

@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
+import { BookOpen, Check, ChevronRight, FileText, Slack } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -165,29 +165,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
+                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -313,29 +291,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            viewBox="0 0 2447.6 2452.5"
-                            className="h-6 w-6"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <g clipRule="evenodd" fillRule="evenodd">
-                              <path
-                                d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                                fill="rgba(55, 65, 81)"
-                              />
-                              <path
-                                d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                                fill="rgba(55, 65, 81)"
-                              />
-                            </g>
-                          </svg>
+                          <Slack strokeWidth="1.5" fill="currentColor" className="h-6 w-6" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">

apps/web/pages/[user]/calendar-cache/[month].tsx

@@ -3,18 +3,16 @@
  * caching system that NextJS uses SSG pages.
  * TODO: Redirect to user profile on browser
  */
-import type { GetStaticPaths, GetStaticProps } from "next";
+import type { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
 import { z } from "zod";
 
-import { getCachedResults } from "@calcom/core";
+import getCalendarsEvents from "@calcom/core/getCalendarsEvents";
 import dayjs from "@calcom/dayjs";
 import prisma from "@calcom/prisma";
 
-const CalendarCache = () => <div />;
-
 const paramsSchema = z.object({ user: z.string(), month: z.string() });
 export const getStaticProps: GetStaticProps<
-  { results: Awaited<ReturnType<typeof getCachedResults>> },
+  { results: Awaited<ReturnType<typeof getCalendarsEvents>> },
   { user: string }
 > = async (context) => {
   const { user: username, month } = paramsSchema.parse(context.params);
@@ -29,16 +27,16 @@ export const getStaticProps: GetStaticProps<
       selectedCalendars: true,
     },
   });
-  const startDate = (
-    dayjs(month, "YYYY-MM").isSame(dayjs(), "month") ? dayjs.utc() : dayjs.utc(month, "YYYY-MM")
-  ).startOf("day");
-  const endDate = startDate.endOf("month");
+  // Subtract 11 hours from the start date to avoid problems in UTC- time zones.
+  const startDate = dayjs.utc(month, "YYYY-MM").startOf("day").subtract(11, "hours").format();
+  // Add 14 hours from the start date to avoid problems in UTC+ time zones.
+  const endDate = dayjs.utc(month, "YYYY-MM").endOf("month").add(14, "hours").format();
   try {
     const results = userWithCredentials?.credentials
-      ? await getCachedResults(
+      ? await getCalendarsEvents(
           userWithCredentials?.credentials,
-          startDate.format(),
-          endDate.format(),
+          startDate,
+          endDate,
           userWithCredentials?.selectedCalendars
         )
       : [];
@@ -64,5 +62,8 @@ export const getStaticPaths: GetStaticPaths = () => {
     fallback: "blocking",
   };
 };
+type Props = InferGetStaticPropsType<typeof getStaticProps>;
+const CalendarCache = (props: Props) =>
+  process.env.NODE_ENV === "development" ? <pre>{JSON.stringify(props, null, "  ")}</pre> : <div />;
 
 export default CalendarCache;

apps/web/pages/_document.tsx

@@ -40,14 +40,18 @@ class MyDocument extends Document<Props> {
     return (
       <Html lang={locale}>
         <Head nonce={nonce}>
-          <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-          <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-          <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+          <link rel="apple-touch-icon" sizes="180x180" href="/api/logo?type=apple-touch-icon" />
+          <link rel="icon" type="image/png" sizes="32x32" href="/api/logo?type=favicon-32" />
+          <link rel="icon" type="image/png" sizes="16x16" href="/api/logo?type=favicon-16" />
           <link rel="manifest" href="/site.webmanifest" />
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f9fafb" />
           <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1C1C1C" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+          />
         </Head>
 
         <body

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

@@ -6,6 +6,7 @@ import dayjs from "@calcom/dayjs";
 import { sendPasswordResetEmail } from "@calcom/emails";
 import { PASSWORD_RESET_EXPIRY_HOURS } from "@calcom/emails/templates/forgot-password-email";
 import rateLimit from "@calcom/lib/rateLimit";
+import { defaultHandler } from "@calcom/lib/server";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import prisma from "@calcom/prisma";
 
@@ -13,28 +14,39 @@ const limiter = rateLimit({
   intervalInMs: 60 * 1000, // 1 minute
 });
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+async function handler(req: NextApiRequest, res: NextApiResponse) {
   const t = await getTranslation(req.body.language ?? "en", "common");
+
   const email = z
     .string()
     .email()
     .transform((val) => val.toLowerCase())
-    .parse(req.body?.email);
+    .safeParse(req.body?.email);
 
-  const { isRateLimited } = limiter.check(10, email); // 10 requests per minute
-
-  if (isRateLimited) {
-    return res.status(429).json({ message: "Too Many Requests." });
+  if (!email.success) {
+    return res.status(400).json({ message: "email is required" });
   }
 
-  if (req.method !== "POST") {
-    return res.status(405).end();
+  // fallback to email if ip is not present
+  let ip = (req.headers["x-real-ip"] as string) ?? email.data;
+
+  const forwardedFor = req.headers["x-forwarded-for"] as string;
+  if (!ip && forwardedFor) {
+    ip = forwardedFor?.split(",").at(0) ?? email.data;
+  }
+
+  // 10 requests per minute
+
+  try {
+    limiter.check(10, ip);
+  } catch (e) {
+    return res.status(429).json({ message: "Too Many Requests." });
   }
 
   try {
     const maybeUser = await prisma.user.findUnique({
       where: {
-        email,
+        email: email.data,
       },
       select: {
         name: true,
@@ -97,3 +109,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return res.status(500).json({ message: "Unable to create password reset request" });
   }
 }
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: handler }),
+});

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

@@ -1,11 +1,20 @@
 import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
 
 import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
+import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
 import slugify from "@calcom/lib/slugify";
 import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
 import prisma from "@calcom/prisma";
 import { IdentityProvider } from "@calcom/prisma/enums";
 
+const signupSchema = z.object({
+  username: z.string(),
+  email: z.string().email(),
+  password: z.string().min(7),
+  language: z.string().optional(),
+});
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (req.method !== "POST") {
     return;
@@ -17,7 +26,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   }
 
   const data = req.body;
-  const { email, password } = data;
+  const { email, password, language } = signupSchema.parse(data);
+
   const username = slugify(data.username);
   const userEmail = email.toLowerCase();
 
@@ -26,16 +36,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return;
   }
 
-  if (!userEmail || !userEmail.includes("@")) {
-    res.status(422).json({ message: "Invalid email" });
-    return;
-  }
-
-  if (!password || password.trim().length < 7) {
-    res.status(422).json({ message: "Invalid input - password should be at least 7 characters long." });
-    return;
-  }
-
   // There is an existingUser if the username matches
   // OR if the email matches AND either the email is verified
   // or both username and password are set
@@ -106,5 +106,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }
   }
 
+  await sendEmailVerification({
+    email: userEmail,
+    username,
+    language,
+  });
+
   res.status(201).json({ message: "Created user" });
 }

apps/web/pages/api/auth/verify-email.ts

@@ -0,0 +1,48 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import dayjs from "@calcom/dayjs";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { prisma } from "@calcom/prisma";
+
+const verifySchema = z.object({
+  token: z.string(),
+});
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { token } = verifySchema.parse(req.query);
+
+  const foundToken = await prisma.verificationToken.findFirst({
+    where: {
+      token,
+    },
+  });
+
+  if (!foundToken) {
+    return res.status(401).json({ message: "No token found" });
+  }
+
+  if (dayjs(foundToken?.expires).isBefore(dayjs())) {
+    return res.status(401).json({ message: "Token expired" });
+  }
+
+  const user = await prisma.user.update({
+    where: {
+      email: foundToken?.identifier,
+    },
+    data: {
+      emailVerified: new Date(),
+    },
+  });
+
+  // Delete token from DB after it has been used
+  await prisma.verificationToken.delete({
+    where: {
+      id: foundToken?.id,
+    },
+  });
+
+  const hasCompletedOnboarding = user.completedOnboarding;
+
+  res.redirect(`${WEBAPP_URL}/${hasCompletedOnboarding ? "/event-types" : "/getting-started"}`);
+}

apps/web/pages/api/email.ts

@@ -60,9 +60,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   res.setHeader("Content-Type", "text/html");
   res.setHeader("Cache-Control", "no-cache, no-store, private, must-revalidate");
   res.write(
-    renderEmail("OrganizerRequestEmail", {
-      calEvent: evt,
-      attendee: evt.organizer,
+    renderEmail("VerifyAccountEmail", {
+      language: t,
+      user: {
+        name: "Pro Example",
+        email: "pro@example.com",
+      },
+      verificationEmailLink:
+        "http://localhost:3000/api/auth/verify-email?token=b91af0eee5a9a24a8d83a3d3d6a58c1606496e94ced589441649273c66100f5b",
     })
   );
   res.end();

apps/web/pages/api/link.ts

@@ -26,7 +26,7 @@ const decryptedSchema = z.object({
 
 async function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
   const { action, token, reason } = querySchema.parse(req.query);
-  const { bookingUid } = decryptedSchema.parse(
+  const { bookingUid, userId } = decryptedSchema.parse(
     JSON.parse(symmetricDecrypt(decodeURIComponent(token), process.env.CALENDSO_ENCRYPTION_KEY || ""))
   );
 
@@ -34,10 +34,19 @@ async function handler(req: NextApiRequest, res: NextApiResponse<Response>) {
     where: { uid: bookingUid },
   });
 
+  const user = await prisma.user.findUniqueOrThrow({
+    where: { id: userId },
+  });
+
   try {
     /** @see https://trpc.io/docs/server-side-calls */
     const ctx = await createContext({ req, res });
-    const caller = viewerRouter.createCaller({ ...ctx, req, res });
+    const caller = viewerRouter.createCaller({
+      ...ctx,
+      req,
+      res,
+      user: { ...user, locale: user?.locale ?? "en" },
+    });
     await caller.bookings.confirm({
       bookingId: booking.id,
       recurringEventId: booking.recurringEventId || undefined,

apps/web/pages/api/logo.ts

@@ -1,7 +1,18 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
-import { IS_SELF_HOSTED, LOGO, LOGO_ICON, WEBAPP_URL } from "@calcom/lib/constants";
+import {
+  ANDROID_CHROME_ICON_192,
+  ANDROID_CHROME_ICON_256,
+  APPLE_TOUCH_ICON,
+  FAVICON_16,
+  FAVICON_32,
+  IS_SELF_HOSTED,
+  LOGO,
+  LOGO_ICON,
+  MSTILE_ICON,
+  WEBAPP_URL,
+} from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
 
 const log = logger.getChildLogger({ prefix: ["[api/logo]"] });
@@ -20,11 +31,79 @@ function extractSubdomainAndDomain(hostname: string) {
 }
 
 const logoApiSchema = z.object({
-  icon: z.coerce.boolean().optional(),
+  type: z.coerce.string().optional(),
 });
 
 const SYSTEM_SUBDOMAINS = ["console", "app", "www"];
 
+type LogoType =
+  | "logo"
+  | "icon"
+  | "favicon-16"
+  | "favicon-32"
+  | "apple-touch-icon"
+  | "mstile"
+  | "android-chrome-192"
+  | "android-chrome-256";
+
+type LogoTypeDefinition = {
+  fallback: string;
+  w?: number;
+  h?: number;
+  source: "appLogo" | "appIconLogo";
+};
+
+const logoDefinitions: Record<LogoType, LogoTypeDefinition> = {
+  logo: {
+    fallback: `${WEBAPP_URL}${LOGO}`,
+    source: "appLogo",
+  },
+  icon: {
+    fallback: `${WEBAPP_URL}${LOGO_ICON}`,
+    source: "appIconLogo",
+  },
+  "favicon-16": {
+    fallback: `${WEBAPP_URL}${FAVICON_16}`,
+    w: 16,
+    h: 16,
+    source: "appIconLogo",
+  },
+  "favicon-32": {
+    fallback: `${WEBAPP_URL}${FAVICON_32}`,
+    w: 32,
+    h: 32,
+    source: "appIconLogo",
+  },
+  "apple-touch-icon": {
+    fallback: `${WEBAPP_URL}${APPLE_TOUCH_ICON}`,
+    w: 180,
+    h: 180,
+    source: "appLogo",
+  },
+  mstile: {
+    fallback: `${WEBAPP_URL}${MSTILE_ICON}`,
+    w: 150,
+    h: 150,
+    source: "appLogo",
+  },
+  "android-chrome-192": {
+    fallback: `${WEBAPP_URL}${ANDROID_CHROME_ICON_192}`,
+    w: 192,
+    h: 192,
+    source: "appLogo",
+  },
+  "android-chrome-256": {
+    fallback: `${WEBAPP_URL}${ANDROID_CHROME_ICON_256}`,
+    w: 256,
+    h: 256,
+    source: "appLogo",
+  },
+};
+
+function isValidLogoType(type: string): type is LogoType {
+  return type in logoDefinitions;
+}
+
 async function getTeamLogos(subdomain: string) {
   try {
     if (
@@ -39,7 +118,7 @@ async function getTeamLogos(subdomain: string) {
     }
     // load from DB
     const { default: prisma } = await import("@calcom/prisma");
-    const team = await prisma.team.findUniqueOrThrow({
+    const team = await prisma.team.findUnique({
       where: {
         slug: subdomain,
       },
@@ -48,16 +127,16 @@ async function getTeamLogos(subdomain: string) {
         appIconLogo: true,
       },
     });
-    // try to use team logos, otherwise default to LOGO/LOGO_ICON regardless
+
     return {
-      appLogo: team.appLogo || `${WEBAPP_URL}${LOGO}`,
-      appIconLogo: team.appIconLogo || `${WEBAPP_URL}${LOGO_ICON}`,
+      appLogo: team?.appLogo,
+      appIconLogo: team?.appIconLogo,
     };
   } catch (error) {
     if (error instanceof Error) log.debug(error.message);
     return {
-      appLogo: `${WEBAPP_URL}${LOGO}`,
-      appIconLogo: `${WEBAPP_URL}${LOGO_ICON}`,
+      appLogo: undefined,
+      appIconLogo: undefined,
     };
   }
 }
@@ -75,14 +154,35 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (!domains) throw new Error("No domains");
 
   const [subdomain] = domains;
-  const { appLogo, appIconLogo } = await getTeamLogos(subdomain);
+  const teamLogos = await getTeamLogos(subdomain);
 
-  const filteredLogo = parsedQuery?.icon ? appIconLogo : appLogo;
+  // Resolve all icon types to team logos, falling back to Cal.com defaults.
+  const type: LogoType = parsedQuery?.type && isValidLogoType(parsedQuery.type) ? parsedQuery.type : "logo";
+  const logoDefinition = logoDefinitions[type];
+  const filteredLogo = teamLogos[logoDefinition.source] ?? logoDefinition.fallback;
 
-  const response = await fetch(filteredLogo);
-  const arrayBuffer = await response.arrayBuffer();
-  const buffer = Buffer.from(arrayBuffer);
-  res.setHeader("Content-Type", response.headers.get("content-type") as string);
-  res.setHeader("Cache-Control", "s-maxage=86400");
-  res.send(buffer);
+  try {
+    const response = await fetch(filteredLogo);
+    const arrayBuffer = await response.arrayBuffer();
+    let buffer = Buffer.from(arrayBuffer);
+
+    // If we need to resize the team logos (via Next.js' built-in image processing)
+    if (teamLogos[logoDefinition.source] && logoDefinition.w) {
+      const { detectContentType, optimizeImage } = await import("next/dist/server/image-optimizer");
+      buffer = await optimizeImage({
+        buffer,
+        contentType: detectContentType(buffer) ?? "image/jpeg",
+        quality: 100,
+        width: logoDefinition.w,
+        height: logoDefinition.h, // optional
+      });
+    }
+
+    res.setHeader("Content-Type", response.headers.get("content-type") as string);
+    res.setHeader("Cache-Control", "s-maxage=86400");
+    res.send(buffer);
+  } catch (error) {
+    res.statusCode = 404;
+    res.json({ error: "Failed fetching logo" });
+  }
 }

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

@@ -1,4 +0,0 @@
-import ethRouter from "@calcom/app-store/rainbow/trpc/router";
-import { createNextApiHandler } from "@calcom/trpc/server/createNextApiHandler";
-
-export default createNextApiHandler(ethRouter);

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

@@ -1,3 +1,4 @@
+import { Prisma } from "@prisma/client";
 import fs from "fs";
 import matter from "gray-matter";
 import MarkdownIt from "markdown-it";
@@ -88,8 +89,18 @@ function SingleAppPage(props: inferSSRProps<typeof getStaticProps>) {
 }
 
 export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
-  const appStore = await prisma.app.findMany({ select: { slug: true } });
-  const paths = appStore.map(({ slug }) => ({ params: { slug } }));
+  let paths: { params: { slug: string } }[] = [];
+
+  try {
+    const appStore = await prisma.app.findMany({ select: { slug: true } });
+    paths = appStore.map(({ slug }) => ({ params: { slug } }));
+  } catch (e: unknown) {
+    if (e instanceof Prisma.PrismaClientInitializationError) {
+      // Database is not available at build time, but that's ok – we fall back to resolving paths on demand
+    } else {
+      throw e;
+    }
+  }
 
   return {
     paths,

apps/web/pages/apps/categories/[category].tsx

@@ -1,3 +1,4 @@
+import { Prisma } from "@prisma/client";
 import type { GetStaticPropsContext, InferGetStaticPropsType } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -54,6 +55,20 @@ Apps.PageWrapper = PageWrapper;
 export const getStaticPaths = async () => {
   const paths = Object.keys(AppCategories);
 
+  try {
+    await prisma.$queryRaw`SELECT 1`;
+  } catch (e: unknown) {
+    if (e instanceof Prisma.PrismaClientInitializationError) {
+      // Database is not available at build time. Make sure we fall back to building these pages on demand
+      return {
+        paths: [],
+        fallback: "blocking",
+      };
+    } else {
+      throw e;
+    }
+  }
+
   return {
     paths: paths.map((category) => ({ params: { category } })),
     fallback: false,

apps/web/pages/apps/categories/index.tsx

@@ -1,15 +1,19 @@
-import type { InferGetStaticPropsType } from "next";
+import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 
-import { getAppRegistry } from "@calcom/app-store/_appRegistry";
+import { getAppRegistry, getAppRegistryWithCredentials } from "@calcom/app-store/_appRegistry";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { SkeletonText } from "@calcom/ui";
 import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
-export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
+import { ssrInit } from "@server/lib/ssr";
+
+export default function Apps({ categories }: inferSSRProps<typeof getServerSideProps>) {
   const { t, isLocaleReady } = useLocale();
 
   return (
@@ -47,8 +51,20 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
 
 Apps.PageWrapper = PageWrapper;
 
-export const getStaticProps = async () => {
-  const appStore = await getAppRegistry();
+export const getServerSideProps = async (context: GetServerSidePropsContext) => {
+  const { req, res } = context;
+
+  const ssr = await ssrInit(context);
+
+  const session = await getServerSession({ req, res });
+
+  let appStore;
+  if (session?.user?.id) {
+    appStore = await getAppRegistryWithCredentials(session.user.id);
+  } else {
+    appStore = await getAppRegistry();
+  }
+
   const categories = appStore.reduce((c, app) => {
     for (const category of app.categories) {
       c[category] = c[category] ? c[category] + 1 : 1;
@@ -59,6 +75,7 @@ export const getStaticProps = async () => {
   return {
     props: {
       categories: Object.entries(categories).map(([name, count]) => ({ name, count })),
+      trpcState: ssr.dehydrate(),
     },
   };
 };

apps/web/pages/apps/installed/[category].tsx

@@ -182,7 +182,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                                   setBulkUpdateModal(true);
                                 }
                               }}>
-                              {t("change_default_conferencing_app")}
+                              {t("set_as_default")}
                             </DropdownItem>
                           </DropdownMenuItem>
                         )}

apps/web/pages/auth/saml-idp.tsx

@@ -19,6 +19,7 @@ export default function Page() {
       callbackUrl: "/",
       code,
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return null;

apps/web/pages/auth/setup/index.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import AdminAppsList from "@calcom/features/apps/AdminAppsList";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getDeploymentKey } from "@calcom/features/ee/deployment/lib/getDeploymentKey";
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
 import { UserPermissionRole } from "@calcom/prisma/enums";
@@ -95,7 +96,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
 
   steps.push({
     title: t("enable_apps"),
-    description: t("enable_apps_description"),
+    description: t("enable_apps_description", { appName: APP_NAME }),
     contentClassname: "!pb-0 mb-[-1px]",
     content: (setIsLoading) => {
       const currentStep = isFreeLicense ? 3 : 4;

apps/web/pages/auth/sso/[provider].tsx

@@ -111,8 +111,10 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
         const ret = await samlTenantProduct(prisma, emailParam);
         tenant = ret.tenant;
         product = ret.product;
-      } catch (e: any) {
-        error = e.message;
+      } catch (e) {
+        if (e instanceof Error) {
+          error = e.message;
+        }
       }
     }
   }

apps/web/pages/auth/sso/direct.tsx

@@ -18,6 +18,7 @@ export default function Page({ samlTenantID, samlProductID }: inferSSRProps<type
     if (HOSTED_CAL_FEATURES) {
       router.push("/auth/login");
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -29,6 +30,7 @@ export default function Page({ samlTenantID, samlProductID }: inferSSRProps<type
       },
       { tenant: samlTenantID, product: samlProductID }
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return null;

apps/web/pages/auth/verify-email.tsx

@@ -0,0 +1,60 @@
+import { MailOpenIcon } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc";
+import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
+import { Button, EmptyScreen, showToast } from "@calcom/ui";
+
+import PageWrapper from "@components/PageWrapper";
+
+function VerifyEmailPage() {
+  const { data } = useEmailVerifyCheck();
+  const { data: session } = useSession();
+  const router = useRouter();
+  const { t } = useLocale();
+  const mutation = trpc.viewer.auth.resendVerifyEmail.useMutation();
+
+  useEffect(() => {
+    if (data?.isVerified) {
+      router.replace("/getting-started");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data?.isVerified]);
+
+  return (
+    <div className="h-[100vh] w-full ">
+      <div className="flex h-full w-full flex-col items-center justify-center">
+        <div className="max-w-3xl">
+          <EmptyScreen
+            border
+            dashedBorder={false}
+            Icon={MailOpenIcon}
+            headline={t("check_your_email")}
+            description={t("verify_email_page_body", { email: session?.user?.email, appName: APP_NAME })}
+            className="bg-default"
+            buttonRaw={
+              <Button
+                color="minimal"
+                className="underline"
+                loading={mutation.isLoading}
+                onClick={() => {
+                  showToast("Send email", "success");
+                  mutation.mutate();
+                }}>
+                Resend Email
+              </Button>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VerifyEmailPage;
+
+VerifyEmailPage.PageWrapper = PageWrapper;

apps/web/pages/availability/index.tsx

@@ -105,7 +105,8 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
   );
 }
 
-const WithQuery = withQuery(trpc.viewer.availability.list);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WithQuery = withQuery(trpc.viewer.availability.list as any);
 
 export default function AvailabilityPage() {
   const { t } = useLocale();

apps/web/pages/availability/troubleshoot.tsx

@@ -26,7 +26,7 @@ const AvailabilityView = ({ user }: { user: User }) => {
 
   const { data, isLoading } = trpc.viewer.availability.user.useQuery(
     {
-      username: user.username!,
+      username: user.username || "",
       dateFrom: selectedDate.startOf("day").utc().format(),
       dateTo: selectedDate.endOf("day").utc().format(),
       withSource: true,

apps/web/pages/booking/[uid].tsx

@@ -102,7 +102,6 @@ export default function Success(props: SuccessProps) {
     allRemainingBookings,
     isSuccessBookingPage,
     cancel: isCancellationMode,
-    changes,
     formerTime,
     email,
     seatReferenceUid,
@@ -222,6 +221,7 @@ export default function Success(props: SuccessProps) {
     setCalculatedDuration(
       dayjs(props.bookingInfo.endTime).diff(dayjs(props.bookingInfo.startTime), "minutes")
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function eventLink(): string {
@@ -363,8 +363,8 @@ export default function Success(props: SuccessProps) {
                     id="modal-headline">
                     {needsConfirmation && !isCancelled
                       ? props.recurringBookings
-                        ? t("submitted_recurring")
-                        : t("submitted")
+                        ? t("booking_submitted_recurring")
+                        : t("booking_submitted")
                       : isCancelled
                       ? seatReferenceUid
                         ? t("no_longer_attending")
@@ -400,7 +400,7 @@ export default function Success(props: SuccessProps) {
                       </>
                     )}
                     <div className="font-medium">{t("what")}</div>
-                    <div className="col-span-2 mb-6 last:mb-0">{props.bookingInfo.title}</div>
+                    <div className="col-span-2 mb-6 last:mb-0">{eventName}</div>
                     <div className="font-medium">{t("when")}</div>
                     <div className="col-span-2 mb-6 last:mb-0">
                       {reschedule && !!formerTime && (

apps/web/pages/event-types/[type]/index.tsx

@@ -3,7 +3,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { GetServerSidePropsContext } from "next";
 import { Trans } from "next-i18next";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -17,9 +17,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
+import { validateBookerLayouts } from "@calcom/lib/validateBookerLayouts";
 import type { Prisma } from "@calcom/prisma/client";
 import type { PeriodType, SchedulingType } from "@calcom/prisma/enums";
-import type { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
+import type {
+  BookerLayoutSettings,
+  customInputSchema,
+  EventTypeMetaDataSchema,
+} from "@calcom/prisma/zod-utils";
 import { eventTypeBookingFields } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
@@ -96,6 +101,7 @@ export type FormValues = {
   hosts: { userId: number; isFixed: boolean }[];
   bookingFields: z.infer<typeof eventTypeBookingFields>;
   availability?: AvailabilityOption;
+  bookerLayouts: BookerLayoutSettings;
 };
 
 export type CustomInputParsed = typeof customInputSchema._output;
@@ -184,17 +190,17 @@ const EventTypePage = (props: EventTypeSetupProps) => {
 
   const metadata = eventType.metadata;
   // fallback to !!eventType.schedule when 'useHostSchedulesForTeamEvent' is undefined
-  if (!!team) {
+  if (!!team && metadata !== null) {
     metadata.config = {
       ...metadata.config,
       useHostSchedulesForTeamEvent:
-        typeof eventType.metadata.config?.useHostSchedulesForTeamEvent !== "undefined"
-          ? eventType.metadata.config?.useHostSchedulesForTeamEvent === true
+        typeof eventType.metadata?.config?.useHostSchedulesForTeamEvent !== "undefined"
+          ? eventType.metadata?.config?.useHostSchedulesForTeamEvent === true
           : !!eventType.schedule,
     };
   } else {
     // Make sure non-team events NEVER have this config key;
-    delete metadata.config?.useHostSchedulesForTeamEvent;
+    delete metadata?.config?.useHostSchedulesForTeamEvent;
   }
 
   const bookingFields: Prisma.JsonObject = {};
@@ -203,41 +209,43 @@ const EventTypePage = (props: EventTypeSetupProps) => {
     bookingFields[name] = name;
   });
 
-  const defaultValues = {
-    title: eventType.title,
-    locations: eventType.locations || [],
-    recurringEvent: eventType.recurringEvent || null,
-    description: eventType.description ?? undefined,
-    schedule: eventType.schedule || undefined,
-    bookingLimits: eventType.bookingLimits || undefined,
-    durationLimits: eventType.durationLimits || undefined,
-    length: eventType.length,
-    offsetStart: eventType.offsetStart,
-    hidden: eventType.hidden,
-    periodDates: {
-      startDate: periodDates.startDate,
-      endDate: periodDates.endDate,
-    },
-    bookingFields: eventType.bookingFields,
-    periodType: eventType.periodType,
-    periodCountCalendarDays: eventType.periodCountCalendarDays ? "1" : "0",
-    schedulingType: eventType.schedulingType,
-    minimumBookingNotice: eventType.minimumBookingNotice,
-    metadata,
-    hosts: eventType.hosts,
-    children: eventType.children.map((ch) => ({
-      ...ch,
-      created: true,
-      owner: {
-        ...ch.owner,
-        eventTypeSlugs:
-          eventType.team?.members
-            .find((mem) => mem.user.id === ch.owner.id)
-            ?.user.eventTypes.map((evTy) => evTy.slug)
-            .filter((slug) => slug !== eventType.slug) ?? [],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const defaultValues: any = useMemo(() => {
+    return {
+      title: eventType.title,
+      locations: eventType.locations || [],
+      recurringEvent: eventType.recurringEvent || null,
+      description: eventType.description ?? undefined,
+      schedule: eventType.schedule || undefined,
+      bookingLimits: eventType.bookingLimits || undefined,
+      durationLimits: eventType.durationLimits || undefined,
+      length: eventType.length,
+      hidden: eventType.hidden,
+      periodDates: {
+        startDate: periodDates.startDate,
+        endDate: periodDates.endDate,
       },
-    })),
-  } as const;
+      bookingFields: eventType.bookingFields,
+      periodType: eventType.periodType,
+      periodCountCalendarDays: eventType.periodCountCalendarDays ? "1" : "0",
+      schedulingType: eventType.schedulingType,
+      minimumBookingNotice: eventType.minimumBookingNotice,
+      metadata,
+      hosts: eventType.hosts,
+      children: eventType.children.map((ch) => ({
+        ...ch,
+        created: true,
+        owner: {
+          ...ch.owner,
+          eventTypeSlugs:
+            eventType.team?.members
+              .find((mem) => mem.user.id === ch.owner.id)
+              ?.user.eventTypes.map((evTy) => evTy.slug)
+              .filter((slug) => slug !== eventType.slug) ?? [],
+        },
+      })),
+    };
+  }, [eventType, periodDates, metadata]);
 
   const formMethods = useForm<FormValues>({
     defaultValues,
@@ -270,6 +278,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       //TODO: What's the best way to sync the form with backend
       formMethods.setValue("bookingFields", defaultValues.bookingFields);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultValues]);
 
   const appsMetadata = formMethods.getValues("metadata")?.apps;
@@ -332,6 +341,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       seatsPerTimeSlotEnabled,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       minimumBookingNoticeInDurationType,
+      bookerLayouts,
       ...input
     } = values;
 
@@ -345,6 +355,9 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
     }
 
+    const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+    if (layoutError) throw new Error(t(layoutError));
+
     if (metadata?.multipleDuration !== undefined) {
       if (metadata?.multipleDuration.length < 1) {
         throw new Error(t("event_setup_multiple_duration_error"));
@@ -359,8 +372,9 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       throw new Error(t("seats_and_no_show_fee_error"));
     }
 
+    const { availability, ...rest } = input;
     updateMutation.mutate({
-      ...input,
+      ...rest,
       locations,
       recurringEvent,
       periodStartDate: periodDates.startDate,
@@ -415,9 +429,6 @@ const EventTypePage = (props: EventTypeSetupProps) => {
               // We don't need to send send these values to the backend
               // eslint-disable-next-line @typescript-eslint/no-unused-vars
               seatsPerTimeSlotEnabled,
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              minimumBookingNoticeInDurationType,
-              availability,
               ...input
             } = values;
 
@@ -431,6 +442,9 @@ const EventTypePage = (props: EventTypeSetupProps) => {
               if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
             }
 
+            const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
+            if (layoutError) throw new Error(t(layoutError));
+
             if (metadata?.multipleDuration !== undefined) {
               if (metadata?.multipleDuration.length < 1) {
                 throw new Error(t("event_setup_multiple_duration_error"));
@@ -440,9 +454,9 @@ const EventTypePage = (props: EventTypeSetupProps) => {
                 }
               }
             }
-
+            const { availability, ...rest } = input;
             updateMutation.mutate({
-              ...input,
+              ...rest,
               locations,
               recurringEvent,
               periodStartDate: periodDates.startDate,

apps/web/pages/event-types/index.tsx

@@ -42,6 +42,8 @@ import {
   CreateButton,
   HorizontalTabs,
   HeadSeo,
+  Skeleton,
+  Label,
 } from "@calcom/ui";
 import {
   ArrowDown,
@@ -391,11 +393,13 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           className="relative top-1 right-3"
                           size="sm"
                           truncateAfter={4}
-                          items={type.users.map((organizer: { name: any; username: any }) => ({
-                            alt: organizer.name || "",
-                            image: `${WEBAPP_URL}/${organizer.username}/avatar.png`,
-                            title: organizer.name || "",
-                          }))}
+                          items={type.users.map(
+                            (organizer: { name: string | null; username: string | null }) => ({
+                              alt: organizer.name || "",
+                              image: `${WEBAPP_URL}/${organizer.username}/avatar.png`,
+                              title: organizer.name || "",
+                            })
+                          )}
                         />
                       )}
                       {isManagedEventType && (
@@ -416,7 +420,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {!isManagedEventType && (
                           <>
                             {type.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
-                            <Tooltip content={t("show_eventtype_on_profile")}>
+                            <Tooltip
+                              content={type.hidden ? t("show_eventtype_on_profile") : t("hide_from_profile")}>
                               <div className="self-center rounded-md p-2">
                                 <Switch
                                   name="Hidden"
@@ -607,7 +612,6 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
                           !isChildrenManagedEventType && (
                             <>
-                              <DropdownMenuSeparator />
                               <DropdownMenuItem className="outline-none">
                                 <DropdownItem
                                   color="destructive"
@@ -623,6 +627,25 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               </DropdownMenuItem>
                             </>
                           )}
+                        <DropdownMenuSeparator />
+                        {!isManagedEventType && (
+                          <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
+                            <Skeleton
+                              as={Label}
+                              htmlFor="hiddenSwitch"
+                              className="mt-2 inline cursor-pointer self-center pr-2 ">
+                              {type.hidden ? t("show_eventtype_on_profile") : t("hide_from_profile")}
+                            </Skeleton>
+                            <Switch
+                              id="hiddenSwitch"
+                              name="Hidden"
+                              checked={!type.hidden}
+                              onCheckedChange={() => {
+                                setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
+                              }}
+                            />
+                          </div>
+                        )}
                       </DropdownMenuContent>
                     </DropdownMenuPortal>
                   </Dropdown>
@@ -759,7 +782,8 @@ const CTA = () => {
   );
 };
 
-const WithQuery = withQuery(trpc.viewer.eventTypes.getByViewer);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const WithQuery = withQuery(trpc.viewer.eventTypes.getByViewer as any);
 
 const EventTypesPage = () => {
   const { t } = useLocale();
@@ -772,6 +796,7 @@ const EventTypesPage = () => {
     if (query?.openIntercom && query?.openIntercom === "true") {
       open();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -795,7 +820,7 @@ const EventTypesPage = () => {
                   {isMobile ? (
                     <MobileTeamsTab eventTypeGroups={data.eventTypeGroups} />
                   ) : (
-                    data.eventTypeGroups.map((group, index) => (
+                    data.eventTypeGroups.map((group: EventTypeGroup, index: number) => (
                       <div className="flex flex-col" key={group.profile.slug}>
                         <EventTypeListHeading
                           profile={group.profile}

apps/web/pages/getting-started/[[...step]].tsx

@@ -117,9 +117,7 @@ const OnboardingPage = (props: IOnboardingPageProps) => {
       }
       key={router.asPath}>
       <Head>
-        <title>
-          {APP_NAME} - {t("getting_started")}
-        </title>
+        <title>{`${APP_NAME} - ${t("getting_started")}`}</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 

apps/web/pages/insights/index.tsx

@@ -25,7 +25,7 @@ const Heading = () => {
   return (
     <div className="min-w-52 hidden md:block">
       <h3 className="font-cal max-w-28 sm:max-w-72 md:max-w-80 text-emphasis truncate text-xl font-semibold tracking-wide xl:max-w-full">
-        {t("analytics_for_organisation")}
+        {t("insights")}
       </h3>
       <p className="text-default hidden text-sm md:block">{t("subtitle_analytics")}</p>
     </div>

apps/web/pages/new-booker/[user]/[type].tsx

@@ -66,7 +66,15 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
     booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
   }
 
-  await ssr.viewer.public.event.prefetch({ username: user, eventSlug: slug });
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({ username: user, eventSlug: slug });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    };
+  }
 
   return {
     props: {
@@ -107,7 +115,15 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
     booking = await getBookingByUidOrRescheduleUid(`${rescheduleUid}`);
   }
 
-  await ssr.viewer.public.event.prefetch({ username, eventSlug: slug });
+  // We use this to both prefetch the query on the server,
+  // as well as to check if the event exist, so we c an show a 404 otherwise.
+  const eventData = await ssr.viewer.public.event.fetch({ username, eventSlug: slug });
+
+  if (!eventData) {
+    return {
+      notFound: true,
+    };
+  }
 
   return {
     props: {