v3.5.5

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

.env.appStore.example

@@ -37,6 +37,7 @@ BASECAMP3_USER_AGENT=
 
 DAILY_API_KEY=
 DAILY_SCALE_PLAN=''
+DAILY_WEBHOOK_SECRET=''
 
 #   - GOOGLE CALENDAR/MEET/LOGIN
 # Needed to enable Google Calendar integration and Login with Google

.env.example

@@ -25,6 +25,7 @@ CALCOM_LICENSE_KEY=
 DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
+INSIGHTS_DATABASE_URL=
 
 # Uncomment to enable a dedicated connection pool for Prisma using Prisma Data Proxy
 # Cold boots will be faster and you'll be able to scale your DB independently of your app.
@@ -106,6 +107,19 @@ NEXT_PUBLIC_HELPSCOUT_KEY=
 NEXT_PUBLIC_FRESHCHAT_TOKEN=
 NEXT_PUBLIC_FRESHCHAT_HOST=
 
+# Google OAuth credentials
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - GOOGLE CALENDAR/MEET/LOGIN
+# Needed to enable Google Calendar integration and Login with Google
+# @see https://github.com/calcom/cal.com#obtaining-the-google-api-credentials
+GOOGLE_API_CREDENTIALS=
+
 # Inbox to send user feedback
 SEND_FEEDBACK_EMAIL=
 
@@ -141,6 +155,7 @@ NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 STRIPE_TEAM_MONTHLY_PRICE_ID=
 STRIPE_ORG_MONTHLY_PRICE_ID=
 STRIPE_WEBHOOK_SECRET=
+STRIPE_WEBHOOK_SECRET_APPS=
 STRIPE_PRIVATE_KEY=
 STRIPE_CLIENT_ID=
 PAYMENT_FEE_FIXED=
@@ -181,6 +196,10 @@ EMAIL_SERVER_PORT=1025
 # Make sure to run mailhog container manually or with `yarn dx`
 E2E_TEST_MAILHOG_ENABLED=
 
+# Resend
+# Send transactional email using resend
+# RESEND_API_KEY=
+
 # **********************************************************************************************************
 
 # Set the following value to true if you wish to enable Team Impersonation
@@ -207,6 +226,8 @@ CSP_POLICY=
 EDGE_CONFIG=
 
 NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
+# Control time intervals on a user's Schedule availability
+NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL=
 
 # - ORGANIZATIONS *******************************************************************************************
 # Enable Organizations non-prod domain setup, works in combination with organizations feature flag
@@ -234,6 +255,12 @@ AUTH_BEARER_TOKEN_VERCEL=
 E2E_TEST_APPLE_CALENDAR_EMAIL=""
 E2E_TEST_APPLE_CALENDAR_PASSWORD=""
 
+# - CALCOM QA ACCOUNT
+# Used for E2E tests on Cal.com that require 3rd party integrations
+E2E_TEST_CALCOM_QA_EMAIL="qa@example.com"
+# Replace with your own password
+E2E_TEST_CALCOM_QA_PASSWORD="password"
+
 # - APP CREDENTIAL SYNC ***********************************************************************************
 # Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
 # Under settings/admin/apps ensure that all app secrets are set the same as the parent application
@@ -243,7 +270,7 @@ CALCOM_WEBHOOK_SECRET=""
 CALCOM_WEBHOOK_HEADER_NAME="calcom-webhook-secret"
 CALCOM_CREDENTIAL_SYNC_ENDPOINT=""
 # Key should match on Cal.com and your application
-# must be 32 bytes for AES256 encryption algorithm
+# must be 24 bytes for AES256 encryption algorithm
 # You can use: `openssl rand -base64 24` to generate one
 CALCOM_APP_CREDENTIAL_ENCRYPTION_KEY=""
 
@@ -261,3 +288,12 @@ E2E_TEST_OIDC_USER_EMAIL=
 E2E_TEST_OIDC_USER_PASSWORD=
 
 # ***********************************************************************************************************
+
+# provide a value between 0 and 100 to ensure the percentage of traffic
+# redirected from the legacy to the future pages
+AB_TEST_BUCKET_PROBABILITY=50
+# whether we redirect to the future/event-types from event-types or not
+APP_ROUTER_EVENT_TYPES_ENABLED=1
+APP_ROUTER_SETTINGS_ADMIN_ENABLED=1
+APP_ROUTER_APPS_SLUG_ENABLED=1
+APP_ROUTER_APPS_SLUG_SETUP_ENABLED=1

.github/PULL_REQUEST_TEMPLATE.md

@@ -23,6 +23,7 @@ Fixes # (issue)
 - [ ] Chore (refactoring code, technical debt, workflow improvements)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Tests (Unit/Integration/E2E or any other test)
 - [ ] This change requires a documentation update
 
 ## How should this be tested?

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

@@ -24,6 +24,8 @@ runs:
           **/.turbo/**
           **/dist/**
         key: ${{ runner.os }}-${{ env.cache-name }}-${{ env.key-1 }}-${{ env.key-2 }}-${{ env.key-3 }}-${{ env.key-4 }}
-    - run: yarn build
+    - run: |
+        export NODE_OPTIONS="--max_old_space_size=8192"
+        yarn build
       if: steps.cache-build.outputs.cache-hit != 'true'
       shell: bash

.github/workflows/e2e.yml

@@ -24,7 +24,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shard: [1, 2, 3, 4, 5]
+        shard: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout

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

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

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

@@ -1,27 +0,0 @@
-name: "Welcome new contributors"
-
-on:
-  issues:
-    types: opened
-  pull_request:
-    types: opened
-
-permissions:
-  pull-requests: write
-  issues: write
-
-jobs:
-  welcome-message:
-    name: Welcoming New Users
-    runs-on: ubuntu-latest
-    timeout-minutes: 10
-    if: github.event.action == 'opened'
-    steps:
-      - uses: actions/first-interaction@v1
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          pr-message: |-
-            Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-            Feel free to join our [discord](https://go.cal.com/discord) and post your PR link to [collect XP and win prizes!](https://cal.com/blog/community-incentives)            
-          issue-message: |
-            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

.yarn/patches/libphonenumber-js-npm-1.10.51-4ff79b15f8.patch

@@ -1,15 +1,15 @@
 diff --git a/index.cjs b/index.cjs
-index b645707a3549fc298508726e404243499bbed499..f34b0891e99b275a9218e253f303f43d31ef3f73 100644
+index c83f700ae9998cd87b4c2d66ecbb2ad3d7b4603c..76a2200b57f0b9243e2c61464d578b67746ad5a4 100644
 --- a/index.cjs
 +++ b/index.cjs
 @@ -13,8 +13,8 @@ function withMetadataArgument(func, _arguments) {
- // https://github.com/babel/babel/issues/2212#issuecomment-131827986
- // An alternative approach:
- // https://www.npmjs.com/package/babel-plugin-add-module-exports
--exports = module.exports = min.parsePhoneNumberFromString
--exports['default'] = min.parsePhoneNumberFromString
-+// exports = module.exports = min.parsePhoneNumberFromString
-+// exports['default'] = min.parsePhoneNumberFromString
- 
- // `parsePhoneNumberFromString()` named export is now considered legacy:
- // it has been promoted to a default export due to being too verbose.
+ // https://github.com/babel/babel/issues/2212#issuecomment-131827986
+ // An alternative approach:
+ // https://www.npmjs.com/package/babel-plugin-add-module-exports
+-exports = module.exports = min.parsePhoneNumberFromString
+-exports['default'] = min.parsePhoneNumberFromString
++// exports = module.exports = min.parsePhoneNumberFromString
++// exports['default'] = min.parsePhoneNumberFromString
+ 
+ // `parsePhoneNumberFromString()` named export is now considered legacy:
+ // it has been promoted to a default export due to being too verbose.

README.md

@@ -7,7 +7,7 @@
   <h3 align="center">Cal.com (formerly Calendso)</h3>
 
   <p align="center">
-    The open-source Calendly alternative.
+    The open-source Calendly successor.
     <br />
     <a href="https://cal.com"><strong>Learn more »</strong></a>
     <br />
@@ -50,7 +50,7 @@
 
 # Scheduling infrastructure for absolutely everyone
 
-The open source Calendly alternative. You are in charge
+The open source Calendly successor. You are in charge
 of your own data, workflow, and appearance.
 
 Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes, and even calls with our families. However, most tools are very limited in terms of control and customization.
@@ -221,7 +221,6 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 1. Copy and paste your `DATABASE_URL` from `.env` to `.env.appStore`.
 
-1. Set a 24 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
 1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
 
    In a development environment, run:

app.json

@@ -83,6 +83,10 @@
     "NEXT_PUBLIC_TEAM_IMPERSONATION": {
       "description": "Set the following value to true if you wish to enable Team Impersonation",
       "value": "false"
+    },
+    "NEXT_PUBLIC_AVAILABILITY_SCHEDULE_INTERVAL": {
+      "description": "Control time intervals on a user's Schedule availability",
+      "value": "15"
     }
   },
   "scripts": {

apps/api/lib/validations/availability.ts

@@ -26,6 +26,7 @@ const schemaAvailabilityCreateParams = z
     startTime: z.date().or(z.string()),
     endTime: z.date().or(z.string()),
     days: z.array(z.number()).optional(),
+    date: z.date().or(z.string()).optional(),
   })
   .strict();
 
@@ -34,6 +35,7 @@ const schemaAvailabilityEditParams = z
     startTime: z.date().or(z.string()).optional(),
     endTime: z.date().or(z.string()).optional(),
     days: z.array(z.number()).optional(),
+    date: z.date().or(z.string()).optional(),
   })
   .strict();
 

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

@@ -60,6 +60,7 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   successRedirectUrl: true,
   locations: true,
   bookingLimits: true,
+  onlyShowFirstAvailableSlot: true,
   durationLimits: true,
 })
   .merge(
@@ -147,6 +148,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
   seatsShowAvailabilityCount: true,
   bookingFields: true,
   bookingLimits: true,
+  onlyShowFirstAvailableSlot: true,
   durationLimits: true,
 }).merge(
   z.object({

apps/api/lib/validations/schedule.ts

@@ -21,7 +21,16 @@ export const schemaSchedulePublic = z
   .merge(
     z.object({
       availability: z
-        .array(Availability.pick({ id: true, eventTypeId: true, days: true, startTime: true, endTime: true }))
+        .array(
+          Availability.pick({
+            id: true,
+            eventTypeId: true,
+            date: true,
+            days: true,
+            startTime: true,
+            endTime: true,
+          })
+        )
         .transform((v) =>
           v.map((item) => ({
             ...item,

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

@@ -6,18 +6,44 @@ import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransform
 
 async function authMiddleware(req: NextApiRequest) {
   const { userId, prisma, isAdmin, query } = req;
+  if (isAdmin) {
+    return;
+  }
+
   const { id } = schemaQueryIdParseInt.parse(query);
-  const userWithBookings = await prisma.user.findUnique({
+  const userWithBookingsAndTeamIds = await prisma.user.findUnique({
     where: { id: userId },
-    include: { bookings: true },
+    include: {
+      bookings: true,
+      teams: {
+        select: {
+          teamId: true,
+        },
+      },
+    },
   });
 
-  if (!userWithBookings) throw new HttpError({ statusCode: 404, message: "User not found" });
+  if (!userWithBookingsAndTeamIds) throw new HttpError({ statusCode: 404, message: "User not found" });
 
-  const userBookingIds = userWithBookings.bookings.map((booking) => booking.id);
+  const userBookingIds = userWithBookingsAndTeamIds.bookings.map((booking) => booking.id);
 
-  if (!isAdmin && !userBookingIds.includes(id)) {
-    throw new HttpError({ statusCode: 401, message: "You are not authorized" });
+  if (!userBookingIds.includes(id)) {
+    const teamBookings = await prisma.booking.findUnique({
+      where: {
+        id: id,
+        eventType: {
+          team: {
+            id: {
+              in: userWithBookingsAndTeamIds.teams.map((team) => team.teamId),
+            },
+          },
+        },
+      },
+    });
+
+    if (!teamBookings) {
+      throw new HttpError({ statusCode: 401, message: "You are not authorized" });
+    }
   }
 }
 

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

@@ -205,8 +205,8 @@ import { defaultResponder } from "@calcom/lib/server";
 async function handler(req: NextApiRequest) {
   const { userId, isAdmin } = req;
   if (isAdmin) req.userId = req.body.userId || userId;
-  const booking = await handleNewBooking(req);
-  return booking;
+
+  return await handleNewBooking(req);
 }
 
 export default defaultResponder(handler);

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

@@ -2,6 +2,7 @@ import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import { MembershipRole } from "@calcom/prisma/enums";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
@@ -89,7 +90,9 @@ async function checkPermissions<T extends BaseEventTypeCheckPermissions>(
   if (req.isAdmin) return true;
   if (eventType?.teamId) {
     req.query.teamId = String(eventType.teamId);
-    await canAccessTeamEventOrThrow(req, "MEMBER");
+    await canAccessTeamEventOrThrow(req, {
+      in: [MembershipRole.OWNER, MembershipRole.ADMIN, MembershipRole.MEMBER],
+    });
   }
   if (eventType?.userId === req.userId) return true; // is owner.
   throw new HttpError({ statusCode: 403, message: "Forbidden" });

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

@@ -299,7 +299,7 @@ async function postHandler(req: NextApiRequest) {
     data.hosts = { createMany: { data: hosts } };
   }
 
-  const eventType = await prisma.eventType.create({ data });
+  const eventType = await prisma.eventType.create({ data, include: { hosts: true } });
 
   return {
     event_type: schemaEventTypeReadPublic.parse(eventType),
@@ -316,8 +316,13 @@ async function checkPermissions(req: NextApiRequest) {
       statusCode: 401,
       message: "ADMIN required for `userId`",
     });
+  if (!isAdmin && body.teamId)
+    throw new HttpError({
+      statusCode: 401,
+      message: "ADMIN required for `teamId`",
+    });
   /* Admin users are required to pass in a userId or teamId */
-  if (isAdmin && (!body.userId || !body.teamId))
+  if (isAdmin && !body.userId && !body.teamId)
     throw new HttpError({ statusCode: 400, message: "`userId` or `teamId` required" });
 }
 

apps/api/pages/api/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function CalcomApi(_: NextApiRequest, res: NextApiResponse) {
-  res.status(201).json({ message: "Welcome to Cal.com API - docs are at https://developer.cal.com/api" });
+  res.status(200).json({ message: "Welcome to Cal.com API - docs are at https://developer.cal.com/api" });
 }

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

@@ -1,5 +1,9 @@
+import timezone from "dayjs/plugin/timezone";
+import utc from "dayjs/plugin/utc";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import dayjs from "@calcom/dayjs";
+import { isSupportedTimeZone } from "@calcom/lib/date-fns";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { createContext } from "@calcom/trpc/server/createContext";
@@ -9,10 +13,34 @@ import { getAvailableSlots } from "@calcom/trpc/server/routers/viewer/slots/util
 import { TRPCError } from "@trpc/server";
 import { getHTTPStatusCodeFromError } from "@trpc/server/http";
 
+// Apply plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
 async function handler(req: NextApiRequest, res: NextApiResponse) {
   try {
-    const input = getScheduleSchema.parse(req.query);
-    return await getAvailableSlots({ ctx: await createContext({ req, res }), input });
+    const { usernameList, ...rest } = req.query;
+    let slugs = usernameList;
+    if (!Array.isArray(usernameList)) {
+      slugs = usernameList ? [usernameList] : [];
+    }
+    const input = getScheduleSchema.parse({ usernameList: slugs, ...rest });
+    const timeZoneSupported = input.timeZone ? isSupportedTimeZone(input.timeZone) : false;
+    const availableSlots = await getAvailableSlots({ ctx: await createContext({ req, res }), input });
+    const slotsInProvidedTimeZone = timeZoneSupported
+      ? Object.keys(availableSlots.slots).reduce(
+          (acc: Record<string, { time: string; attendees?: number; bookingUid?: string }[]>, date) => {
+            acc[date] = availableSlots.slots[date].map((slot) => ({
+              ...slot,
+              time: dayjs(slot.time).tz(input.timeZone).format(),
+            }));
+            return acc;
+          },
+          {}
+        )
+      : availableSlots;
+
+    return slotsInProvidedTimeZone;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (cause) {
     if (cause instanceof TRPCError) {

apps/api/pages/api/teams/[teamId]/_auth-middleware.ts

@@ -22,7 +22,11 @@ export async function checkPermissions(
   role: Prisma.MembershipWhereInput["role"] = MembershipRole.OWNER
 ) {
   const { userId, prisma, isAdmin } = req;
-  const { teamId } = schemaQueryTeamId.parse(req.query);
+  const { teamId } = schemaQueryTeamId.parse({
+    teamId: req.query.teamId,
+    version: req.query.version,
+    apiKey: req.query.apiKey,
+  });
   const args: Prisma.TeamFindFirstArgs = { where: { id: teamId } };
   /** If not ADMIN then we check if the actual user belongs to team and matches the required role */
   if (!isAdmin) args.where = { ...args.where, members: { some: { userId, role } } };

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

@@ -56,6 +56,14 @@ async function getHandler(req: NextApiRequest) {
             members: { some: { userId } },
           },
     },
+    include: {
+      customInputs: true,
+      team: { select: { slug: true } },
+      users: true,
+      hosts: { select: { userId: true, isFixed: true } },
+      owner: { select: { username: true, id: true } },
+      children: { select: { id: true, userId: true } },
+    },
   };
 
   const data = await prisma.eventType.findMany(args);

apps/api/pages/api/users/[userId]/_delete.ts

@@ -1,5 +1,6 @@
 import type { NextApiRequest } from "next";
 
+import { deleteUser } from "@calcom/features/users/lib/userDeletionService";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
@@ -41,10 +42,18 @@ export async function deleteHandler(req: NextApiRequest) {
   // Here we only check for ownership of the user if the user is not admin, otherwise we let ADMIN's edit any user
   if (!isAdmin && query.userId !== req.userId) throw new HttpError({ statusCode: 403, message: "Forbidden" });
 
-  const user = await prisma.user.findUnique({ where: { id: query.userId } });
+  const user = await prisma.user.findUnique({
+    where: { id: query.userId },
+    select: {
+      id: true,
+      email: true,
+      metadata: true,
+    },
+  });
   if (!user) throw new HttpError({ statusCode: 404, message: "User not found" });
 
-  await prisma.user.delete({ where: { id: user.id } });
+  await deleteUser(user);
+
   return { message: `User with id: ${user.id} deleted successfully` };
 }
 

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

@@ -8,6 +8,7 @@ import { describe, expect, test, vi } from "vitest";
 
 import dayjs from "@calcom/dayjs";
 import sendPayload from "@calcom/features/webhooks/lib/sendPayload";
+import { ErrorCode } from "@calcom/lib/errorCodes";
 import { buildBooking, buildEventType, buildWebhook } from "@calcom/lib/test/builder";
 import prisma from "@calcom/prisma";
 
@@ -148,7 +149,7 @@ describe.skipIf(true)("POST /api/bookings", () => {
       expect(res._getStatusCode()).toBe(500);
       expect(JSON.parse(res._getData())).toEqual(
         expect.objectContaining({
-          message: "No available users found.",
+          message: ErrorCode.NoAvailableUsersFound,
         })
       );
     });

apps/api/vercel.json

@@ -0,0 +1,7 @@
+{
+  "functions": {
+    "pages/api/slots/*.ts": {
+      "memory": 512
+    }
+  }
+}

apps/storybook/.gitignore

@@ -8,7 +8,9 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-storybook-static
+storybook-static/*
+!storybook-static/favicon.ico
+!storybook-static/sb-cover.jpg
 dist
 dist-ssr
 *.local

apps/storybook/.storybook/main.js

@@ -1,76 +0,0 @@
-const path = require("path");
-
-module.exports = {
-  stories: [
-    "../intro.stories.mdx",
-    "../../../packages/ui/components/**/*.stories.mdx",
-    "../../../packages/atoms/**/*.stories.mdx",
-    "../../../packages/features/**/*.stories.mdx",
-    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "storybook-addon-rtl-direction",
-    "storybook-react-i18next",
-    "storybook-addon-next",
-    "storybook-addon-next-router",
-    /*{
-      name: "storybook-addon-next",
-      options: {
-        nextConfigPath: path.resolve(__dirname, "../../web/next.config.js"),
-      },
-    },*/
-  ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
-  },
-  staticDirs: ["../public"],
-  webpackFinal: async (config, { configType }) => {
-    config.resolve.fallback = {
-      fs: false,
-      assert: false,
-      buffer: false,
-      console: false,
-      constants: false,
-      crypto: false,
-      domain: false,
-      events: false,
-      http: false,
-      https: false,
-      os: false,
-      path: false,
-      punycode: false,
-      process: false,
-      querystring: false,
-      stream: false,
-      string_decoder: false,
-      sys: false,
-      timers: false,
-      tty: false,
-      url: false,
-      util: false,
-      vm: false,
-      zlib: false,
-    };
-
-    config.module.rules.push({
-      test: /\.css$/,
-      use: [
-        "style-loader",
-        {
-          loader: "css-loader",
-          options: {
-            modules: true, // Enable modules to help you using className
-          },
-        },
-      ],
-      include: path.resolve(__dirname, "../src"),
-    });
-
-    return config;
-  },
-  typescript: { reactDocgen: "react-docgen" },
-};

apps/storybook/.storybook/main.ts

@@ -0,0 +1,96 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+import path, { dirname, join } from "path";
+
+const config: StorybookConfig = {
+  stories: [
+    "../intro.stories.mdx",
+    "../../../packages/ui/components/**/*.stories.mdx", // legacy SB6 stories
+    "../../../packages/ui/components/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/ui/components/**/*.docs.mdx",
+    "../../../packages/features/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/features/**/*.docs.mdx",
+    "../../../packages/atoms/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../../packages/atoms/**/*.docs.mdx",
+  ],
+
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("storybook-addon-rtl-direction"),
+    getAbsolutePath("storybook-react-i18next"),
+  ],
+
+  framework: {
+    name: getAbsolutePath("@storybook/nextjs") as "@storybook/nextjs",
+
+    options: {
+      // builder: {
+      //   fsCache: true,
+      //   lazyCompilation: true,
+      // },
+    },
+  },
+
+  staticDirs: ["../public"],
+
+  webpackFinal: async (config, { configType }) => {
+    config.resolve = config.resolve || {};
+    config.resolve.fallback = {
+      fs: false,
+      assert: false,
+      buffer: false,
+      console: false,
+      constants: false,
+      crypto: false,
+      domain: false,
+      events: false,
+      http: false,
+      https: false,
+      os: false,
+      path: false,
+      punycode: false,
+      process: false,
+      querystring: false,
+      stream: false,
+      string_decoder: false,
+      sys: false,
+      timers: false,
+      tty: false,
+      url: false,
+      util: false,
+      vm: false,
+      zlib: false,
+    };
+
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            modules: true, // Enable modules to help you using className
+          },
+        },
+      ],
+      include: path.resolve(__dirname, "../src"),
+    });
+
+    return config;
+  },
+
+  typescript: { reactDocgen: "react-docgen" },
+
+  docs: {
+    autodocs: true,
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

apps/storybook/.storybook/preview.jsx

@@ -1,48 +0,0 @@
-import { addDecorator } from "@storybook/react";
-import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
-import { I18nextProvider } from "react-i18next";
-
-import "../styles/globals.css";
-import "../styles/storybook-styles.css";
-import i18n from "./i18next";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-  nextRouter: {
-    pathname: "/",
-    asPath: "/",
-    query: {},
-    push() {},
-    Provider: AppRouterContext.Provider,
-  },
-  globals: {
-    locale: "en",
-    locales: {
-      en: "English",
-      fr: "Français",
-    },
-  },
-  i18n,
-};
-
-addDecorator((storyFn) => (
-  <I18nextProvider i18n={i18n}>
-    <div style={{ margin: "2rem" }}>{storyFn()}</div>
-  </I18nextProvider>
-));
-
-window.getEmbedNamespace = () => {
-  const url = new URL(document.URL);
-  const namespace = url.searchParams.get("embed");
-  return namespace;
-};
-
-window.getEmbedTheme = () => {
-  return "auto";
-};

apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,73 @@
+// adds tooltip context to all stories
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import type { Preview } from "@storybook/react";
+import React from "react";
+import { I18nextProvider } from "react-i18next";
+
+import type { EmbedThemeConfig } from "@calcom/embed-core/src/types";
+// adds trpc context to all stories (esp. booker)
+import { StorybookTrpcProvider } from "@calcom/ui";
+
+import "../styles/globals.css";
+import "../styles/storybook-styles.css";
+import i18n from "./i18next";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+
+    globals: {
+      locale: "en",
+      locales: {
+        en: "English",
+        fr: "Français",
+      },
+    },
+
+    i18n,
+
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <StorybookTrpcProvider>
+        <TooltipProvider>
+          <I18nextProvider i18n={i18n}>
+            <div style={{ margin: "2rem" }}>
+              <Story />
+            </div>
+          </I18nextProvider>
+        </TooltipProvider>
+      </StorybookTrpcProvider>
+    ),
+  ],
+};
+
+export default preview;
+
+declare global {
+  interface Window {
+    getEmbedNamespace: () => string | null;
+    getEmbedTheme: () => EmbedThemeConfig | null;
+  }
+}
+
+window.getEmbedNamespace = () => {
+  const url = new URL(document.URL);
+  const namespace = url.searchParams.get("embed");
+  return namespace;
+};
+
+window.getEmbedTheme = () => {
+  return "auto";
+};

apps/storybook/components/CustomArgsTable.tsx

@@ -1,6 +1,6 @@
 import { ArgsTable } from "@storybook/addon-docs";
-import { SortType } from "@storybook/components";
-import { PropDescriptor } from "@storybook/store";
+import type { SortType } from "@storybook/blocks";
+import type { PropDescriptor } from "@storybook/preview-api";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any -- ignore storybook addon types component as any so we have to do
 type Component = any;

apps/storybook/intro.stories.mdx

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

apps/storybook/package.json

@@ -3,14 +3,14 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "dependencies": {
     "@calcom/config": "*",
     "@calcom/dayjs": "*",
     "@calcom/ui": "*",
-    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -20,23 +20,25 @@
     "@radix-ui/react-slider": "^1.0.0",
     "@radix-ui/react-switch": "^1.0.0",
     "@radix-ui/react-tooltip": "^1.0.0",
+    "@storybook/addon-docs": "^7.6.3",
+    "@storybook/blocks": "^7.6.3",
+    "@storybook/nextjs": "^7.6.3",
+    "@storybook/preview-api": "^7.6.3",
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook-addon-next-router": "^4.0.2",
     "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/builder-vite": "^0.2.4",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.6.3",
+    "@storybook/addon-designs": "^7.0.7",
+    "@storybook/addon-essentials": "^7.6.3",
+    "@storybook/addon-interactions": "^7.6.3",
+    "@storybook/addon-links": "^7.6.3",
+    "@storybook/nextjs": "^7.6.3",
+    "@storybook/react": "^7.6.3",
+    "@storybook/testing-library": "^0.2.2",
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
@@ -46,10 +48,9 @@
     "postcss": "^8.4.18",
     "postcss-pseudo-companion-classes": "^0.1.1",
     "rollup-plugin-polyfill-node": "^0.10.2",
-    "storybook-addon-designs": "^6.3.1",
-    "storybook-addon-next": "^1.6.9",
-    "storybook-react-i18next": "^1.1.2",
-    "tailwindcss": "^3.3.1",
+    "storybook": "^7.6.3",
+    "storybook-react-i18next": "^2.0.9",
+    "tailwindcss": "^3.3.3",
     "typescript": "^4.9.4",
     "vite": "^4.1.2"
   }

apps/web/abTest/middlewareFactory.ts

@@ -0,0 +1,70 @@
+import { getBucket } from "abTest/utils";
+import type { NextMiddleware, NextRequest } from "next/server";
+import { NextResponse, URLPattern } from "next/server";
+import z from "zod";
+
+const ROUTES: [URLPattern, boolean][] = [
+  ["/event-types", process.env.APP_ROUTER_EVENT_TYPES_ENABLED === "1"] as const,
+  ["/settings/admin/:path*", process.env.APP_ROUTER_SETTINGS_ADMIN_ENABLED === "1"] as const,
+  ["/apps/:slug", Boolean(process.env.APP_ROUTER_APPS_SLUG_ENABLED)] as const,
+  ["/apps/:slug/setup", Boolean(process.env.APP_ROUTER_APPS_SLUG_SETUP_ENABLED)] as const,
+].map(([pathname, enabled]) => [
+  new URLPattern({
+    pathname,
+  }),
+  enabled,
+]);
+
+const FUTURE_ROUTES_OVERRIDE_COOKIE_NAME = "x-calcom-future-routes-override";
+const FUTURE_ROUTES_ENABLED_COOKIE_NAME = "x-calcom-future-routes-enabled";
+
+const bucketSchema = z.union([z.literal("legacy"), z.literal("future")]);
+
+export const abTestMiddlewareFactory =
+  (next: (req: NextRequest) => Promise<NextResponse<unknown>>): NextMiddleware =>
+  async (req: NextRequest) => {
+    const response = await next(req);
+
+    const { pathname } = req.nextUrl;
+
+    const override = req.cookies.has(FUTURE_ROUTES_OVERRIDE_COOKIE_NAME);
+
+    const route = ROUTES.find(([regExp]) => regExp.test(req.url)) ?? null;
+    const enabled = route !== null ? route[1] || override : false;
+
+    if (pathname.includes("future") || !enabled) {
+      return response;
+    }
+
+    const safeParsedBucket = override
+      ? { success: true as const, data: "future" as const }
+      : bucketSchema.safeParse(req.cookies.get(FUTURE_ROUTES_ENABLED_COOKIE_NAME)?.value);
+
+    if (!safeParsedBucket.success) {
+      // cookie does not exist or it has incorrect value
+      const bucket = getBucket();
+
+      response.cookies.set(FUTURE_ROUTES_ENABLED_COOKIE_NAME, bucket, {
+        expires: Date.now() + 1000 * 60 * 30,
+        httpOnly: true,
+      }); // 30 min in ms
+
+      if (bucket === "legacy") {
+        return response;
+      }
+
+      const url = req.nextUrl.clone();
+      url.pathname = `future${pathname}/`;
+
+      return NextResponse.rewrite(url, response);
+    }
+
+    if (safeParsedBucket.data === "legacy") {
+      return response;
+    }
+
+    const url = req.nextUrl.clone();
+    url.pathname = `future${pathname}/`;
+
+    return NextResponse.rewrite(url, response);
+  };

apps/web/abTest/utils.ts

@@ -0,0 +1,9 @@
+import { AB_TEST_BUCKET_PROBABILITY } from "@calcom/lib/constants";
+
+const cryptoRandom = () => {
+  return crypto.getRandomValues(new Uint8Array(1))[0] / 0xff;
+};
+
+export const getBucket = () => {
+  return cryptoRandom() * 100 < AB_TEST_BUCKET_PROBABILITY ? "future" : "legacy";
+};

apps/web/app/_trpc/HydrateClient.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { createHydrateClient } from "app/_trpc/createHydrateClient";
+import superjson from "superjson";
+
+export const HydrateClient = createHydrateClient({
+  transformer: superjson,
+});

apps/web/app/_trpc/client.ts

@@ -0,0 +1,5 @@
+import type { AppRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCReact } from "@trpc/react-query";
+
+export const trpc = createTRPCReact<AppRouter>({});

apps/web/app/_trpc/createHydrateClient.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { type DehydratedState, Hydrate } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import type { DataTransformer } from "@trpc/server";
+
+export function createHydrateClient(opts: { transformer?: DataTransformer }) {
+  return function HydrateClient(props: { children: React.ReactNode; state: DehydratedState }) {
+    const { state, children } = props;
+
+    const transformedState: DehydratedState = useMemo(() => {
+      if (opts.transformer) {
+        return opts.transformer.deserialize(state);
+      }
+      return state;
+    }, [state]);
+
+    return <Hydrate state={transformedState}>{children}</Hydrate>;
+  };
+}

apps/web/app/_trpc/createTRPCNextLayout.ts

@@ -0,0 +1,212 @@
+// originally from in the "experimental playground for tRPC + next.js 13" repo owned by trpc team
+// file link: https://github.com/trpc/next-13/blob/main/%40trpc/next-layout/createTRPCNextLayout.ts
+// repo link: https://github.com/trpc/next-13
+// code is / will continue to be adapted for our usage
+import { dehydrate, QueryClient } from "@tanstack/query-core";
+import type { DehydratedState, QueryKey } from "@tanstack/react-query";
+
+import type { Maybe, TRPCClientError, TRPCClientErrorLike } from "@calcom/trpc";
+import {
+  callProcedure,
+  type AnyProcedure,
+  type AnyQueryProcedure,
+  type AnyRouter,
+  type DataTransformer,
+  type inferProcedureInput,
+  type inferProcedureOutput,
+  type inferRouterContext,
+  type MaybePromise,
+  type ProcedureRouterRecord,
+} from "@calcom/trpc/server";
+
+import { createRecursiveProxy, createFlatProxy } from "@trpc/server/shared";
+
+export function getArrayQueryKey(
+  queryKey: string | [string] | [string, ...unknown[]] | unknown[],
+  type: string
+): QueryKey {
+  const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
+  const [arrayPath, input] = queryKeyArrayed;
+
+  if (!input && (!type || type === "any")) {
+    return Array.isArray(arrayPath) && arrayPath.length !== 0 ? [arrayPath] : ([] as unknown as QueryKey);
+  }
+
+  return [
+    arrayPath,
+    {
+      ...(typeof input !== "undefined" && { input: input }),
+      ...(type && type !== "any" && { type: type }),
+    },
+  ];
+}
+
+// copy starts
+// copied from trpc/trpc repo
+// ref: https://github.com/trpc/trpc/blob/main/packages/next/src/withTRPC.tsx#L37-#L58
+function transformQueryOrMutationCacheErrors<
+  TState extends DehydratedState["queries"][0] | DehydratedState["mutations"][0]
+>(result: TState): TState {
+  const error = result.state.error as Maybe<TRPCClientError<any>>;
+  if (error instanceof Error && error.name === "TRPCClientError") {
+    const newError: TRPCClientErrorLike<any> = {
+      message: error.message,
+      data: error.data,
+      shape: error.shape,
+    };
+    return {
+      ...result,
+      state: {
+        ...result.state,
+        error: newError,
+      },
+    };
+  }
+  return result;
+}
+// copy ends
+
+interface CreateTRPCNextLayoutOptions<TRouter extends AnyRouter> {
+  router: TRouter;
+  createContext: () => MaybePromise<inferRouterContext<TRouter>>;
+  transformer?: DataTransformer;
+}
+
+/**
+ * @internal
+ */
+export type DecorateProcedure<TProcedure extends AnyProcedure> = TProcedure extends AnyQueryProcedure
+  ? {
+      fetch(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      fetchInfinite(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      prefetch(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+      prefetchInfinite(input: inferProcedureInput<TProcedure>): Promise<inferProcedureOutput<TProcedure>>;
+    }
+  : never;
+
+type OmitNever<TType> = Pick<
+  TType,
+  {
+    [K in keyof TType]: TType[K] extends never ? never : K;
+  }[keyof TType]
+>;
+/**
+ * @internal
+ */
+export type DecoratedProcedureRecord<
+  TProcedures extends ProcedureRouterRecord,
+  TPath extends string = ""
+> = OmitNever<{
+  [TKey in keyof TProcedures]: TProcedures[TKey] extends AnyRouter
+    ? DecoratedProcedureRecord<TProcedures[TKey]["_def"]["record"], `${TPath}${TKey & string}.`>
+    : TProcedures[TKey] extends AnyQueryProcedure
+    ? DecorateProcedure<TProcedures[TKey]>
+    : never;
+}>;
+
+type CreateTRPCNextLayout<TRouter extends AnyRouter> = DecoratedProcedureRecord<TRouter["_def"]["record"]> & {
+  dehydrate(): Promise<DehydratedState>;
+  queryClient: QueryClient;
+};
+
+const getStateContainer = <TRouter extends AnyRouter>(opts: CreateTRPCNextLayoutOptions<TRouter>) => {
+  let _trpc: {
+    queryClient: QueryClient;
+    context: inferRouterContext<TRouter>;
+  } | null = null;
+
+  return () => {
+    if (_trpc === null) {
+      _trpc = {
+        context: opts.createContext(),
+        queryClient: new QueryClient(),
+      };
+    }
+
+    return _trpc;
+  };
+};
+
+export function createTRPCNextLayout<TRouter extends AnyRouter>(
+  opts: CreateTRPCNextLayoutOptions<TRouter>
+): CreateTRPCNextLayout<TRouter> {
+  const getState = getStateContainer(opts);
+
+  const transformer = opts.transformer ?? {
+    serialize: (v) => v,
+    deserialize: (v) => v,
+  };
+
+  return createFlatProxy((key) => {
+    const state = getState();
+    const { queryClient } = state;
+    if (key === "queryClient") {
+      return queryClient;
+    }
+
+    if (key === "dehydrate") {
+      // copy starts
+      // copied from trpc/trpc repo
+      // ref: https://github.com/trpc/trpc/blob/main/packages/next/src/withTRPC.tsx#L214-#L229
+      const dehydratedCache = dehydrate(queryClient, {
+        shouldDehydrateQuery() {
+          // makes sure errors are also dehydrated
+          return true;
+        },
+      });
+
+      // since error instances can't be serialized, let's make them into `TRPCClientErrorLike`-objects
+      const dehydratedCacheWithErrors = {
+        ...dehydratedCache,
+        queries: dehydratedCache.queries.map(transformQueryOrMutationCacheErrors),
+        mutations: dehydratedCache.mutations.map(transformQueryOrMutationCacheErrors),
+      };
+
+      return () => transformer.serialize(dehydratedCacheWithErrors);
+    }
+    // copy ends
+
+    return createRecursiveProxy(async (callOpts) => {
+      const path = [key, ...callOpts.path];
+      const utilName = path.pop();
+      const ctx = await state.context;
+
+      const caller = opts.router.createCaller(ctx);
+
+      const pathStr = path.join(".");
+      const input = callOpts.args[0];
+
+      if (utilName === "fetchInfinite") {
+        return queryClient.fetchInfiniteQuery(getArrayQueryKey([path, input], "infinite"), () =>
+          caller.query(pathStr, input)
+        );
+      }
+
+      if (utilName === "prefetch") {
+        return queryClient.prefetchQuery({
+          queryKey: getArrayQueryKey([path, input], "query"),
+          queryFn: async () => {
+            const res = await callProcedure({
+              procedures: opts.router._def.procedures,
+              path: pathStr,
+              rawInput: input,
+              ctx,
+              type: "query",
+            });
+            return res;
+          },
+        });
+      }
+
+      if (utilName === "prefetchInfinite") {
+        return queryClient.prefetchInfiniteQuery(getArrayQueryKey([path, input], "infinite"), () =>
+          caller.query(pathStr, input)
+        );
+      }
+
+      return queryClient.fetchQuery(getArrayQueryKey([path, input], "query"), () =>
+        caller.query(pathStr, input)
+      );
+    }) as CreateTRPCNextLayout<TRouter>;
+  });
+}

apps/web/app/_trpc/serverClient.ts

@@ -0,0 +1,4 @@
+import type { TRPCContext } from "@calcom/trpc/server/createContext";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+export const getServerCaller = (ctx: TRPCContext) => appRouter.createCaller(ctx);

apps/web/app/_trpc/ssgInit.ts

@@ -0,0 +1,34 @@
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { headers } from "next/headers";
+import superjson from "superjson";
+
+import { CALCOM_VERSION } from "@calcom/lib/constants";
+import prisma, { readonlyPrisma } from "@calcom/prisma";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCNextLayout } from "./createTRPCNextLayout";
+
+export async function ssgInit() {
+  const locale = headers().get("x-locale") ?? "en";
+
+  const i18n = (await serverSideTranslations(locale, ["common"])) || "en";
+
+  const ssg = createTRPCNextLayout({
+    router: appRouter,
+    transformer: superjson,
+    createContext() {
+      return { prisma, insightsDb: readonlyPrisma, session: null, locale, i18n };
+    },
+  });
+
+  // i18n translations are already retrieved from serverSideTranslations call, there is no need to run a i18n.fetch
+  // we can set query data directly to the queryClient
+  const queryKey = [
+    ["viewer", "public", "i18n"],
+    { input: { locale, CalComVersion: CALCOM_VERSION }, type: "query" },
+  ];
+
+  ssg.queryClient.setQueryData(queryKey, { i18n });
+
+  return ssg;
+}

apps/web/app/_trpc/ssrInit.ts

@@ -0,0 +1,57 @@
+import { type GetServerSidePropsContext } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { headers, cookies } from "next/headers";
+import superjson from "superjson";
+
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
+import { CALCOM_VERSION } from "@calcom/lib/constants";
+import prisma, { readonlyPrisma } from "@calcom/prisma";
+import { appRouter } from "@calcom/trpc/server/routers/_app";
+
+import { createTRPCNextLayout } from "./createTRPCNextLayout";
+
+export async function ssrInit(options?: { noI18nPreload: boolean }) {
+  const req = {
+    headers: headers(),
+    cookies: cookies(),
+  };
+
+  const locale = await getLocale(req);
+
+  const i18n = (await serverSideTranslations(locale, ["common", "vital"])) || "en";
+
+  const ssr = createTRPCNextLayout({
+    router: appRouter,
+    transformer: superjson,
+    createContext() {
+      return {
+        prisma,
+        insightsDb: readonlyPrisma,
+        session: null,
+        locale,
+        i18n,
+        req: req as unknown as GetServerSidePropsContext["req"],
+      };
+    },
+  });
+
+  // i18n translations are already retrieved from serverSideTranslations call, there is no need to run a i18n.fetch
+  // we can set query data directly to the queryClient
+  const queryKey = [
+    ["viewer", "public", "i18n"],
+    { input: { locale, CalComVersion: CALCOM_VERSION }, type: "query" },
+  ];
+  if (!options?.noI18nPreload) {
+    ssr.queryClient.setQueryData(queryKey, { i18n });
+  }
+
+  await Promise.allSettled([
+    // So feature flags are available on first render
+    ssr.viewer.features.map.prefetch(),
+    // Provides a better UX to the users who have already upgraded.
+    ssr.viewer.teams.hasTeamPlan.prefetch(),
+    ssr.viewer.public.session.prefetch(),
+  ]);
+
+  return ssr;
+}

apps/web/app/_trpc/trpc-provider.tsx

@@ -0,0 +1,103 @@
+import { type DehydratedState, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { HydrateClient } from "app/_trpc/HydrateClient";
+import { trpc } from "app/_trpc/client";
+import { useState } from "react";
+import superjson from "superjson";
+
+import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink";
+import { httpLink } from "@calcom/trpc/client/links/httpLink";
+import { loggerLink } from "@calcom/trpc/client/links/loggerLink";
+import { splitLink } from "@calcom/trpc/client/links/splitLink";
+import { ENDPOINTS } from "@calcom/trpc/react/shared";
+
+export type Endpoint = (typeof ENDPOINTS)[number];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resolveEndpoint = (links: any) => {
+  // TODO: Update our trpc routes so they are more clear.
+  // This function parses paths like the following and maps them
+  // to the correct API endpoints.
+  // - viewer.me - 2 segment paths like this are for logged in requests
+  // - viewer.public.i18n - 3 segments paths can be public or authed
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (ctx: any) => {
+    const parts = ctx.op.path.split(".");
+    let endpoint;
+    let path = "";
+    if (parts.length == 2) {
+      endpoint = parts[0] as keyof typeof links;
+      path = parts[1];
+    } else {
+      endpoint = parts[1] as keyof typeof links;
+      path = parts.splice(2, parts.length - 2).join(".");
+    }
+    return links[endpoint]({ ...ctx, op: { ...ctx.op, path } });
+  };
+};
+
+export const TrpcProvider: React.FC<{ children: React.ReactNode; dehydratedState?: DehydratedState }> = ({
+  children,
+  dehydratedState,
+}) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: 5000 } },
+      })
+  );
+  const url =
+    typeof window !== "undefined"
+      ? "/api/trpc"
+      : process.env.VERCEL_URL
+      ? `https://${process.env.VERCEL_URL}/api/trpc`
+      : `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`;
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        // adds pretty logs to your console in development and logs errors in production
+        loggerLink({
+          enabled: (opts) =>
+            !!process.env.NEXT_PUBLIC_DEBUG || (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        splitLink({
+          // check for context property `skipBatch`
+          condition: (op) => !!op.context.skipBatch,
+          // when condition is true, use normal request
+          true: (runtime) => {
+            const links = Object.fromEntries(
+              ENDPOINTS.map((endpoint) => [
+                endpoint,
+                httpLink({
+                  url: `${url}/${endpoint}`,
+                })(runtime),
+              ])
+            );
+            return resolveEndpoint(links);
+          },
+          // when condition is false, use batch request
+          false: (runtime) => {
+            const links = Object.fromEntries(
+              ENDPOINTS.map((endpoint) => [
+                endpoint,
+                httpBatchLink({
+                  url: `${url}/${endpoint}`,
+                })(runtime),
+              ])
+            );
+            return resolveEndpoint(links);
+          },
+        }),
+      ],
+      transformer: superjson,
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {dehydratedState ? <HydrateClient state={dehydratedState}>{children}</HydrateClient> : children}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+};

apps/web/app/_types.ts

@@ -0,0 +1,3 @@
+export type Params = {
+  [param: string]: string | string[] | undefined;
+};

apps/web/app/_utils.tsx

@@ -0,0 +1,40 @@
+import { type TFunction } from "i18next";
+import { headers } from "next/headers";
+
+import { constructGenericImage } from "@calcom/lib/OgImages";
+import { IS_CALCOM, WEBAPP_URL, APP_NAME, SEO_IMG_OGIMG } from "@calcom/lib/constants";
+import { getFixedT } from "@calcom/lib/server/getFixedT";
+
+import { preparePageMetadata } from "@lib/metadata";
+
+export const _generateMetadata = async (
+  getTitle: (t: TFunction<string, undefined>) => string,
+  getDescription: (t: TFunction<string, undefined>) => string
+) => {
+  const h = headers();
+  const canonical = h.get("x-pathname") ?? "";
+  const locale = h.get("x-locale") ?? "en";
+
+  const t = await getFixedT(locale, "common");
+
+  const title = getTitle(t);
+  const description = getDescription(t);
+
+  const metadataBase = new URL(IS_CALCOM ? "https://cal.com" : WEBAPP_URL);
+
+  const image =
+    SEO_IMG_OGIMG +
+    constructGenericImage({
+      title,
+      description,
+    });
+
+  return preparePageMetadata({
+    title,
+    canonical,
+    image,
+    description,
+    siteName: APP_NAME,
+    metadataBase,
+  });
+};

apps/web/app/error.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * Typescript class based component for custom-error
+ * @link https://nextjs.org/docs/advanced-features/custom-error-page
+ */
+import type { NextPage } from "next";
+import type { ErrorProps } from "next/error";
+import React from "react";
+
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { redactError } from "@calcom/lib/redactError";
+
+import { ErrorPage } from "@components/error/error-page";
+
+type NextError = Error & { digest?: string };
+
+// Ref: https://nextjs.org/docs/app/api-reference/file-conventions/error#props
+export type DefaultErrorProps = {
+  error: NextError;
+  reset: () => void; // A function to reset the error boundary
+};
+
+type AugmentedError = NextError | HttpError | null;
+
+type CustomErrorProps = {
+  err?: AugmentedError;
+  statusCode?: number;
+  message?: string;
+} & Omit<ErrorProps, "err" | "statusCode">;
+
+const log = logger.getSubLogger({ prefix: ["[error]"] });
+
+const CustomError: NextPage<DefaultErrorProps> = (props) => {
+  const { error } = props;
+  let errorObject: CustomErrorProps = {
+    message: error.message,
+    err: error,
+  };
+
+  if (error instanceof HttpError) {
+    const redactedError = redactError(error);
+    errorObject = {
+      statusCode: error.statusCode,
+      title: redactedError.name,
+      message: redactedError.message,
+      err: {
+        ...redactedError,
+        ...error,
+      },
+    };
+  }
+
+  // `error.digest` property contains an automatically generated hash of the error that can be used to match the corresponding error in server-side logs
+  log.debug(`${error?.toString() ?? JSON.stringify(error)}`);
+  log.info("errorObject: ", errorObject);
+
+  return (
+    <ErrorPage statusCode={errorObject.statusCode} error={errorObject.err} message={errorObject.message} />
+  );
+};
+
+export default CustomError;

apps/web/app/future/(individual-page-wrapper)/apps/[slug]/layout.tsx

@@ -0,0 +1,15 @@
+import { type ReactElement } from "react";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type EventTypesLayoutProps = {
+  children: ReactElement;
+};
+
+export default function Layout({ children }: EventTypesLayoutProps) {
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={undefined} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/future/(individual-page-wrapper)/apps/[slug]/page.tsx

@@ -0,0 +1,126 @@
+import AppPage from "@pages/apps/[slug]/index";
+import { Prisma } from "@prisma/client";
+import { _generateMetadata } from "app/_utils";
+import fs from "fs";
+import matter from "gray-matter";
+import { notFound } from "next/navigation";
+import path from "path";
+import { z } from "zod";
+
+import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import { getAppAssetFullPath } from "@calcom/app-store/getAppAssetFullPath";
+import { APP_NAME, IS_PRODUCTION } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const sourceSchema = z.object({
+  content: z.string(),
+  data: z.object({
+    description: z.string().optional(),
+    items: z
+      .array(
+        z.union([
+          z.string(),
+          z.object({
+            iframe: z.object({ src: z.string() }),
+          }),
+        ])
+      )
+      .optional(),
+  }),
+});
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const { data } = await getPageProps({ params });
+
+  return await _generateMetadata(
+    () => `${data.name} | ${APP_NAME}`,
+    () => data.description
+  );
+};
+
+export const generateStaticParams = async () => {
+  try {
+    const appStore = await prisma.app.findMany({ select: { slug: true } });
+    return appStore.map(({ slug }) => ({ 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 [];
+};
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  if (typeof params?.slug !== "string") {
+    notFound();
+  }
+
+  const appMeta = await getAppWithMetadata({
+    slug: params?.slug,
+  });
+
+  const appFromDb = await prisma.app.findUnique({
+    where: { slug: params.slug.toLowerCase() },
+  });
+
+  const isAppAvailableInFileSystem = appMeta;
+  const isAppDisabled = isAppAvailableInFileSystem && (!appFromDb || !appFromDb.enabled);
+
+  if (!IS_PRODUCTION && isAppDisabled) {
+    return {
+      isAppDisabled: true as const,
+      data: {
+        ...appMeta,
+      },
+    };
+  }
+
+  if (!appFromDb || !appMeta || isAppDisabled) {
+    notFound();
+  }
+
+  const isTemplate = appMeta.isTemplate;
+  const appDirname = path.join(isTemplate ? "templates" : "", appFromDb.dirName);
+  const README_PATH = path.join(process.cwd(), "..", "..", `packages/app-store/${appDirname}/DESCRIPTION.md`);
+  const postFilePath = path.join(README_PATH);
+  let source = "";
+
+  try {
+    source = fs.readFileSync(postFilePath).toString();
+    source = source.replace(/{DESCRIPTION}/g, appMeta.description);
+  } catch (error) {
+    /* If the app doesn't have a README we fallback to the package description */
+    console.log(`No DESCRIPTION.md provided for: ${appDirname}`);
+    source = appMeta.description;
+  }
+
+  const result = matter(source);
+  const { content, data } = sourceSchema.parse({ content: result.content, data: result.data });
+  if (data.items) {
+    data.items = data.items.map((item) => {
+      if (typeof item === "string") {
+        return getAppAssetFullPath(item, {
+          dirName: appMeta.dirName,
+          isTemplate: appMeta.isTemplate,
+        });
+      }
+      return item;
+    });
+  }
+  return {
+    isAppDisabled: false as const,
+    source: { content, data },
+    data: appMeta,
+  };
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const pageProps = await getPageProps({ params });
+
+  return <AppPage {...pageProps} />;
+}
+
+export const dynamic = "force-static";

apps/web/app/future/(individual-page-wrapper)/apps/[slug]/setup/page.tsx

@@ -0,0 +1,36 @@
+import SetupPage from "@pages/apps/[slug]/setup";
+import { _generateMetadata } from "app/_utils";
+import type { GetServerSidePropsContext } from "next";
+import { cookies, headers } from "next/headers";
+import { notFound, redirect } from "next/navigation";
+
+import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
+import { APP_NAME } from "@calcom/lib/constants";
+
+export const generateMetadata = async ({ params }: { params: Record<string, string | string[]> }) => {
+  return await _generateMetadata(
+    () => `${params.slug} | ${APP_NAME}`,
+    () => ""
+  );
+};
+
+const getPageProps = async ({ params }: { params: Record<string, string | string[]> }) => {
+  const req = { headers: headers(), cookies: cookies() };
+
+  const result = await getServerSideProps({ params, req } as unknown as GetServerSidePropsContext);
+
+  if (!result || "notFound" in result) {
+    notFound();
+  }
+
+  if ("redirect" in result) {
+    redirect(result.redirect.destination);
+  }
+
+  return result.props;
+};
+
+export default async function Page({ params }: { params: Record<string, string | string[]> }) {
+  const pageProps = await getPageProps({ params });
+  return <SetupPage {...pageProps} />;
+}

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/layout.tsx

@@ -0,0 +1,20 @@
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+import { getLayout } from "@components/auth/layouts/AdminLayoutAppDir";
+
+type WrapperWithLayoutProps = {
+  children: ReactElement;
+};
+
+export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/apps/[category]/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/apps/[category]";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("apps"),
+    (t) => t("admin_apps_description")
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/apps/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/apps/index";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("apps"),
+    (t) => t("admin_apps_description")
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/flags/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/flags";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Feature Flags",
+    () => "Here you can toggle your Cal.com instance features."
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/impersonation/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/impersonation";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("admin"),
+    (t) => t("impersonation")
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/oAuth/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/oAuth/index";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "OAuth",
+    () => "Add new OAuth Clients"
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(admin-layout)/settings/admin/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/index";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Admin",
+    () => "admin_description"
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(layout)/event-types/page.tsx

@@ -0,0 +1,10 @@
+import EventTypes from "@pages/event-types";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("event_types_page_title"),
+    (t) => t("event_types_page_subtitle")
+  );
+
+export default EventTypes;

apps/web/app/future/(shared-page-wrapper)/(layout)/layout.tsx

@@ -0,0 +1,22 @@
+// pages without layout (e.g., /availability/index.tsx) are supposed to go under (layout) folder
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import { getLayout } from "@calcom/features/MainLayoutAppDir";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type WrapperWithLayoutProps = {
+  children: ReactElement;
+};
+
+export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/future/(shared-page-wrapper)/(no-layout)/layout.tsx

@@ -0,0 +1,20 @@
+// pages containing layout (e.g., /availability/[schedule].tsx) are supposed to go under (no-layout) folder
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type WrapperWithoutLayoutProps = {
+  children: ReactElement;
+};
+
+export default async function WrapperWithoutLayout({ children }: WrapperWithoutLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={null} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/future/(shared-page-wrapper)/(no-layout)/settings/admin/oAuth/oAuthView/page.tsx

@@ -0,0 +1,10 @@
+import Page from "@pages/settings/admin/oAuth/oAuthView";
+import { _generateMetadata } from "app/_utils";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "OAuth",
+    () => "Add new OAuth Clients"
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/layout.tsx

@@ -0,0 +1,21 @@
+import { headers } from "next/headers";
+import { type ReactElement } from "react";
+
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayoutAppDir";
+
+import PageWrapper from "@components/PageWrapperAppDir";
+
+type WrapperWithLayoutProps = {
+  children: ReactElement;
+};
+
+export default async function WrapperWithLayout({ children }: WrapperWithLayoutProps) {
+  const h = headers();
+  const nonce = h.get("x-nonce") ?? undefined;
+
+  return (
+    <PageWrapper getLayout={getLayout} requiresLicense={false} nonce={nonce} themeBasis={null}>
+      {children}
+    </PageWrapper>
+  );
+}

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/organizations/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgPage";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("organizations"),
+    (t) => t("orgs_page_description")
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/[id]/edit/page.tsx

@@ -0,0 +1,36 @@
+import { getServerCaller } from "app/_trpc/serverClient";
+import { type Params } from "app/_types";
+import { _generateMetadata } from "app/_utils";
+import { cookies, headers } from "next/headers";
+import { z } from "zod";
+
+import Page from "@calcom/features/ee/users/pages/users-edit-view";
+import prisma from "@calcom/prisma";
+
+const userIdSchema = z.object({ id: z.coerce.number() });
+
+export const generateMetadata = async ({ params }: { params: Params }) => {
+  const input = userIdSchema.safeParse(params);
+
+  let title = "";
+  if (!input.success) {
+    title = "Editing user";
+  } else {
+    const req = {
+      headers: headers(),
+      cookies: cookies(),
+    };
+
+    // @ts-expect-error Type '{ headers: ReadonlyHeaders; cookies: ReadonlyRequestCookies; }' is not assignable to type 'NextApiRequest'
+    const data = await getServerCaller({ req, prisma }).viewer.users.get({ userId: input.data.id });
+    const { user } = data;
+    title = `Editing user: ${user.username}`;
+  }
+
+  return await _generateMetadata(
+    () => title,
+    () => "Here you can edit a current user."
+  );
+};
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/add/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/features/ee/users/pages/users-add-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Add new user",
+    () => "Here you can add a new user."
+  );
+
+export default Page;

apps/web/app/future/(shared-page-wrapper)/(settings-layout)/settings/admin/users/page.tsx

@@ -0,0 +1,11 @@
+import { _generateMetadata } from "app/_utils";
+
+import Page from "@calcom/features/ee/users/pages/users-listing-view";
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    () => "Users",
+    () => "A list of all the users in your account including their name, title, email and role."
+  );
+
+export default Page;

apps/web/app/global-error.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { type NextPage } from "next";
+
+import CustomError, { type DefaultErrorProps } from "./error";
+
+export const GlobalError: NextPage<DefaultErrorProps> = (props) => {
+  return (
+    <html>
+      <body>
+        <CustomError {...props} />
+      </body>
+    </html>
+  );
+};
+
+export default GlobalError;

apps/web/app/layout.tsx

@@ -1,84 +1,63 @@
-import type { Metadata } from "next";
-import { headers as nextHeaders, cookies as nextCookies } from "next/headers";
+import { dir } from "i18next";
+import { headers, cookies } from "next/headers";
 import Script from "next/script";
 import React from "react";
 
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 
+import { prepareRootMetadata } from "@lib/metadata";
+
 import "../styles/globals.css";
 
-export const metadata: Metadata = {
-  icons: {
-    icon: [
-      {
-        sizes: "32x32",
-        url: "/api/logo?type=favicon-32",
-      },
-      {
-        sizes: "16x16",
-        url: "/api/logo?type=favicon-16",
-      },
-    ],
-    apple: {
-      sizes: "180x180",
-      url: "/api/logo?type=apple-touch-icon",
+export const generateMetadata = () =>
+  prepareRootMetadata({
+    twitterCreator: "@calcom",
+    twitterSite: "@calcom",
+    robots: {
+      index: false,
+      follow: false,
     },
-    other: [
-      {
-        url: "/safari-pinned-tab.svg",
-        rel: "mask-icon",
-      },
-    ],
-  },
-  manifest: "/site.webmanifest",
-  themeColor: [
-    { media: "(prefers-color-scheme: light)", color: "#f9fafb" },
-    { media: "(prefers-color-scheme: dark)", color: "#1C1C1C" },
-  ],
-  other: {
-    "msapplication-TileColor": "#000000",
-  },
-};
+  });
 
-const getInitialProps = async (
-  url: string,
-  headers: ReturnType<typeof nextHeaders>,
-  cookies: ReturnType<typeof nextCookies>
-) => {
+const getInitialProps = async (url: string) => {
   const { pathname, searchParams } = new URL(url);
 
   const isEmbed = pathname.endsWith("/embed") || (searchParams?.get("embedType") ?? null) !== null;
   const embedColorScheme = searchParams?.get("ui.color-scheme");
 
-  // @ts-expect-error we cannot access ctx.req in app dir, however headers and cookies are only properties needed to extract the locale
-  const newLocale = await getLocale({ headers, cookies });
-  let direction = "ltr";
-
-  try {
-    const intlLocale = new Intl.Locale(newLocale);
-    // @ts-expect-error INFO: Typescript does not know about the Intl.Locale textInfo attribute
-    direction = intlLocale.textInfo?.direction;
-  } catch (e) {
-    console.error(e);
-  }
+  const req = { headers: headers(), cookies: cookies() };
+  const newLocale = await getLocale(req);
+  const direction = dir(newLocale);
 
   return { isEmbed, embedColorScheme, locale: newLocale, direction };
 };
 
+const getFallbackProps = () => ({
+  locale: "en",
+  direction: "ltr",
+  isEmbed: false,
+  embedColorScheme: false,
+});
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const headers = nextHeaders();
-  const cookies = nextCookies();
+  const h = headers();
 
-  const fullUrl = headers.get("x-url") ?? "";
-  const nonce = headers.get("x-csp") ?? "";
+  const fullUrl = h.get("x-url") ?? "";
+  const nonce = h.get("x-csp") ?? "";
+
+  const isSSG = !fullUrl;
+
+  const { locale, direction, isEmbed, embedColorScheme } = isSSG
+    ? getFallbackProps()
+    : await getInitialProps(fullUrl);
 
-  const { locale, direction, isEmbed, embedColorScheme } = await getInitialProps(fullUrl, headers, cookies);
   return (
     <html
       lang={locale}
       dir={direction}
-      style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}>
+      style={embedColorScheme ? { colorScheme: embedColorScheme as string } : undefined}
+      data-nextjs-router="app">
       <head nonce={nonce}>
         {!IS_PRODUCTION && process.env.VERCEL_ENV === "preview" && (
           // eslint-disable-next-line @next/next/no-sync-scripts

apps/web/components/AppListCard.tsx

@@ -1,4 +1,4 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
@@ -6,6 +6,7 @@ import { z } from "zod";
 import type { CredentialOwner } from "@calcom/app-store/types";
 import classNames from "@calcom/lib/classNames";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText, Avatar } from "@calcom/ui";
@@ -31,6 +32,7 @@ type AppListCardProps = {
   invalidCredential?: boolean;
   children?: ReactNode;
   credentialOwner?: CredentialOwner;
+  className?: string;
 } & ShouldHighlight;
 
 const schema = z.object({ hl: z.string().optional() });
@@ -49,6 +51,7 @@ export default function AppListCard(props: AppListCardProps) {
     invalidCredential,
     children,
     credentialOwner,
+    className,
   } = props;
   const {
     data: { hl },
@@ -56,7 +59,7 @@ export default function AppListCard(props: AppListCardProps) {
   const router = useRouter();
   const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   const pathname = usePathname();
 
   useEffect(() => {
@@ -82,7 +85,7 @@ export default function AppListCard(props: AppListCardProps) {
   }, [highlight, pathname, router, searchParams, shouldHighlight]);
 
   return (
-    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100")}>
+    <div className={classNames(highlight && "dark:bg-muted bg-yellow-100", className)}>
       <div className="flex items-center gap-x-3 px-4 py-4 sm:px-6">
         {logo ? (
           <img

apps/web/components/PageWrapperAppDir.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { type DehydratedState } from "@tanstack/react-query";
 import type { SSRConfig } from "next-i18next";
 import { Inter } from "next/font/google";
 import localFont from "next/font/local";
@@ -10,7 +11,6 @@ import type { ReactNode } from "react";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { trpc } from "@calcom/trpc/react";
 
 import type { AppProps } from "@lib/app-providers-app-dir";
 import AppProviders from "@lib/app-providers-app-dir";
@@ -29,13 +29,14 @@ const calFont = localFont({
 });
 
 export type PageWrapperProps = Readonly<{
-  getLayout: (page: React.ReactElement) => ReactNode;
+  getLayout: ((page: React.ReactElement) => ReactNode) | null;
   children: React.ReactElement;
   requiresLicense: boolean;
-  isThemeSupported: boolean;
-  isBookingPage: boolean;
   nonce: string | undefined;
   themeBasis: string | null;
+  dehydratedState?: DehydratedState;
+  isThemeSupported?: boolean;
+  isBookingPage?: boolean;
   i18n?: SSRConfig;
 }>;
 
@@ -85,4 +86,4 @@ function PageWrapper(props: PageWrapperProps) {
   );
 }
 
-export default trpc.withTRPC(PageWrapper);
+export default PageWrapper;

apps/web/components/apps/AppPage.tsx

@@ -42,6 +42,7 @@ export type AppPageProps = {
   disableInstall?: boolean;
   dependencies?: string[];
   concurrentMeetings: AppType["concurrentMeetings"];
+  paid?: AppType["paid"];
 };
 
 export const AppPage = ({
@@ -67,6 +68,7 @@ export const AppPage = ({
   isTemplate,
   dependencies,
   concurrentMeetings,
+  paid,
 }: AppPageProps) => {
   const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
@@ -163,6 +165,19 @@ export const AppPage = ({
                 className="bg-subtle text-emphasis rounded-md p-1 text-xs capitalize">
                 {categories[0]}
               </Link>{" "}
+              {paid && (
+                <>
+                  <Badge className="mr-1">
+                    {Intl.NumberFormat(i18n.language, {
+                      style: "currency",
+                      currency: "USD",
+                      useGrouping: false,
+                      maximumFractionDigits: 0,
+                    }).format(paid.priceInUsd)}
+                    /{t("month")}
+                  </Badge>
+                </>
+              )}
               •{" "}
               <a target="_blank" rel="noreferrer" href={website}>
                 {t("published_by", { author })}
@@ -206,6 +221,7 @@ export const AppPage = ({
                         addAppMutationInput={{ type, variant, slug }}
                         multiInstall
                         concurrentMeetings={concurrentMeetings}
+                        paid={paid}
                         {...props}
                       />
                     );
@@ -244,6 +260,7 @@ export const AppPage = ({
                     addAppMutationInput={{ type, variant, slug }}
                     credentials={appDbQuery.data?.credentials}
                     concurrentMeetings={concurrentMeetings}
+                    paid={paid}
                     {...props}
                   />
                 );
@@ -263,7 +280,7 @@ export const AppPage = ({
             <SkeletonButton className="mt-6 h-20 grow" />
           ))}
 
-        {price !== 0 && (
+        {price !== 0 && !paid && (
           <span className="block text-right">
             {feeType === "usage-based" ? `${commission}% + ${priceInDollar}/booking` : priceInDollar}
             {feeType === "monthly" && `/${t("month")}`}
@@ -273,23 +290,27 @@ export const AppPage = ({
         <div className="prose-sm prose prose-a:text-default prose-headings:text-emphasis prose-code:text-default prose-strong:text-default text-default mt-8">
           {body}
         </div>
-        <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
-        <span className="text-default">
-          {teamsPlanRequired ? (
-            t("teams_plan_required")
-          ) : price === 0 ? (
-            t("free_to_use_apps")
-          ) : (
-            <>
-              {Intl.NumberFormat(i18n.language, {
-                style: "currency",
-                currency: "USD",
-                useGrouping: false,
-              }).format(price)}
-              {feeType === "monthly" && `/${t("month")}`}
-            </>
-          )}
-        </span>
+        {!paid && (
+          <>
+            <h4 className="text-emphasis mt-8 font-semibold ">{t("pricing")}</h4>
+            <span className="text-default">
+              {teamsPlanRequired ? (
+                t("teams_plan_required")
+              ) : price === 0 ? (
+                t("free_to_use_apps")
+              ) : (
+                <>
+                  {Intl.NumberFormat(i18n.language, {
+                    style: "currency",
+                    currency: "USD",
+                    useGrouping: false,
+                  }).format(price)}
+                  {feeType === "monthly" && `/${t("month")}`}
+                </>
+              )}
+            </span>
+          </>
+        )}
 
         <h4 className="text-emphasis mb-2 mt-8 font-semibold ">{t("contact")}</h4>
         <ul className="prose-sm -ml-1 -mr-1 leading-5">

apps/web/components/apps/CalendarListContainer.tsx

@@ -14,8 +14,9 @@ import {
   List,
   AppSkeletonLoader as SkeletonLoader,
   ShellSubHeading,
+  Label,
 } from "@calcom/ui";
-import { Calendar, Plus } from "@calcom/ui/components/icon";
+import { Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -27,6 +28,7 @@ type Props = {
   onChanged: () => unknown | Promise<unknown>;
   fromOnboarding?: boolean;
   destinationCalendarId?: string;
+  isLoading?: boolean;
 };
 
 function CalendarList(props: Props) {
@@ -70,8 +72,9 @@ function ConnectedCalendarsList(props: Props) {
   const { t } = useLocale();
   const query = trpc.viewer.connectedCalendars.useQuery(undefined, {
     suspense: true,
+    refetchOnWindowFocus: false,
   });
-  const { fromOnboarding } = props;
+  const { fromOnboarding, isLoading } = props;
   return (
     <QueryCell
       query={query}
@@ -82,74 +85,94 @@ function ConnectedCalendarsList(props: Props) {
         }
 
         return (
-          <List>
-            {data.connectedCalendars.map((item) => (
-              <Fragment key={item.credentialId}>
-                {item.calendars ? (
-                  <AppListCard
-                    shouldHighlight
-                    slug={item.integration.slug}
-                    title={item.integration.name}
-                    logo={item.integration.logo}
-                    description={item.primary?.email ?? item.integration.description}
-                    actions={
-                      <div className="flex w-32 justify-end">
-                        <DisconnectIntegration
-                          credentialId={item.credentialId}
-                          trashIcon
-                          onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-default" }}
-                        />
-                      </div>
-                    }>
-                    <div className="border-subtle border-t">
-                      {!fromOnboarding && (
-                        <>
-                          <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                          <ul className="space-y-4 px-5 py-4">
-                            {item.calendars.map((cal) => (
-                              <CalendarSwitch
-                                key={cal.externalId}
-                                externalId={cal.externalId}
-                                title={cal.name || "Nameless calendar"}
-                                name={cal.name || "Nameless calendar"}
-                                type={item.integration.type}
-                                isChecked={cal.isSelected}
-                                destination={cal.externalId === props.destinationCalendarId}
-                                credentialId={cal.credentialId}
-                              />
-                            ))}
-                          </ul>
-                        </>
-                      )}
+          <div className="border-subtle mt-6 rounded-lg border">
+            <div className="border-subtle border-b p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <h4 className="text-emphasis text-base font-semibold leading-5">
+                    {t("check_for_conflicts")}
+                  </h4>
+                  <p className="text-default text-sm leading-tight">{t("select_calendars")}</p>
+                </div>
+                <div className="flex flex-col xl:flex-row xl:space-x-5">
+                  {!!data.connectedCalendars.length && (
+                    <div className="flex items-center">
+                      <AdditionalCalendarSelector isLoading={isLoading} />
                     </div>
-                  </AppListCard>
-                ) : (
-                  <Alert
-                    severity="warning"
-                    title={t("something_went_wrong")}
-                    message={
-                      <span>
-                        <Link href={`/apps/${item.integration.slug}`}>{item.integration.name}</Link>:{" "}
-                        {t("calendar_error")}
-                      </span>
-                    }
-                    iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
-                    actions={
-                      <div className="flex w-32 justify-end md:pr-1">
-                        <DisconnectIntegration
-                          credentialId={item.credentialId}
-                          trashIcon
-                          onSuccess={props.onChanged}
-                          buttonProps={{ className: "border border-default" }}
-                        />
+                  )}
+                </div>
+              </div>
+            </div>
+            <List noBorderTreatment className="p-6 pt-2">
+              {data.connectedCalendars.map((item) => (
+                <Fragment key={item.credentialId}>
+                  {item.calendars ? (
+                    <AppListCard
+                      shouldHighlight
+                      slug={item.integration.slug}
+                      title={item.integration.name}
+                      logo={item.integration.logo}
+                      description={item.primary?.email ?? item.integration.description}
+                      className="border-subtle mt-4 rounded-lg border"
+                      actions={
+                        <div className="flex w-32 justify-end">
+                          <DisconnectIntegration
+                            credentialId={item.credentialId}
+                            trashIcon
+                            onSuccess={props.onChanged}
+                            buttonProps={{ className: "border border-default" }}
+                          />
+                        </div>
+                      }>
+                      <div className="border-subtle border-t">
+                        {!fromOnboarding && (
+                          <>
+                            <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
+                            <ul className="space-y-4 px-5 py-4">
+                              {item.calendars.map((cal) => (
+                                <CalendarSwitch
+                                  key={cal.externalId}
+                                  externalId={cal.externalId}
+                                  title={cal.name || "Nameless calendar"}
+                                  name={cal.name || "Nameless calendar"}
+                                  type={item.integration.type}
+                                  isChecked={cal.isSelected}
+                                  destination={cal.externalId === props.destinationCalendarId}
+                                  credentialId={cal.credentialId}
+                                />
+                              ))}
+                            </ul>
+                          </>
+                        )}
                       </div>
-                    }
-                  />
-                )}
-              </Fragment>
-            ))}
-          </List>
+                    </AppListCard>
+                  ) : (
+                    <Alert
+                      severity="warning"
+                      title={t("something_went_wrong")}
+                      message={
+                        <span>
+                          <Link href={`/apps/${item.integration.slug}`}>{item.integration.name}</Link>:{" "}
+                          {t("calendar_error")}
+                        </span>
+                      }
+                      iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
+                      actions={
+                        <div className="flex w-32 justify-end md:pr-1">
+                          <DisconnectIntegration
+                            credentialId={item.credentialId}
+                            trashIcon
+                            onSuccess={props.onChanged}
+                            buttonProps={{ className: "border border-default" }}
+                          />
+                        </div>
+                      }
+                    />
+                  )}
+                </Fragment>
+              ))}
+            </List>
+          </div>
         );
       }}
     />
@@ -187,42 +210,28 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
             {!!data.connectedCalendars.length || !!installedCalendars.data?.items.length ? (
               <>
                 {heading && (
-                  <div className="border-default flex flex-col gap-6 rounded-md border p-7">
-                    <ShellSubHeading
-                      title={t("calendar")}
-                      subtitle={t("installed_app_calendar_description")}
-                      className="mb-0 flex flex-wrap items-center gap-4 sm:flex-nowrap md:mb-3 md:gap-0"
-                      actions={
-                        <div className="flex flex-col xl:flex-row xl:space-x-5">
-                          {!!data.connectedCalendars.length && (
-                            <div className="flex items-center">
-                              <AdditionalCalendarSelector isLoading={mutation.isLoading} />
-                            </div>
-                          )}
-                        </div>
-                      }
-                    />
-                    <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
-                      <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
-                        <div className="bg-default border-subtle relative rounded-md border p-1.5">
-                          <Calendar className="text-default h-8 w-8" strokeWidth="1" />
-                          <Plus
-                            className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
-                            strokeWidth="4"
-                          />
-                        </div>
-                        <div className="md:w-6/12">
-                          <h1 className="text-emphasis text-sm font-semibold">{t("create_events_on")}</h1>
-                          <p className="text-default text-sm font-normal">{t("set_calendar")}</p>
-                        </div>
-                        <div className="justify-end md:w-6/12">
-                          <DestinationCalendarSelector
-                            onChange={mutation.mutate}
-                            hidePlaceholder
-                            isLoading={mutation.isLoading}
-                            value={data.destinationCalendar?.externalId}
-                            hideAdvancedText
-                          />
+                  <>
+                    <div className="border-subtle mb-6 mt-8 rounded-lg border">
+                      <div className="p-6">
+                        <h2 className="text-emphasis mb-1 text-base font-bold leading-5 tracking-wide">
+                          {t("add_to_calendar")}
+                        </h2>
+
+                        <p className="text-subtle text-sm leading-tight">
+                          {t("add_to_calendar_description")}
+                        </p>
+                      </div>
+                      <div className="border-t">
+                        <div className="border-subtle flex w-full flex-col space-y-3 border-y-0 p-6">
+                          <div>
+                            <Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
+                            <DestinationCalendarSelector
+                              hidePlaceholder
+                              value={data.destinationCalendar?.externalId}
+                              onChange={mutation.mutate}
+                              isLoading={mutation.isLoading}
+                            />
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -230,8 +239,9 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                       onChanged={onChanged}
                       fromOnboarding={fromOnboarding}
                       destinationCalendarId={data.destinationCalendar?.externalId}
+                      isLoading={mutation.isLoading}
                     />
-                  </div>
+                  </>
                 )}
               </>
             ) : fromOnboarding ? (

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -26,6 +26,7 @@ export const InstallAppButtonChild = ({
   multiInstall,
   credentials,
   concurrentMeetings,
+  paid,
   ...props
 }: {
   userAdminTeams?: UserAdminTeams;
@@ -34,6 +35,7 @@ export const InstallAppButtonChild = ({
   multiInstall?: boolean;
   credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
   concurrentMeetings?: boolean;
+  paid?: AppFrontendPayload["paid"];
 } & ButtonProps) => {
   const { t } = useLocale();
 
@@ -46,8 +48,27 @@ export const InstallAppButtonChild = ({
       if (error instanceof Error) showToast(error.message || t("app_could_not_be_installed"), "error");
     },
   });
+  const shouldDisableInstallation = !multiInstall ? !!(credentials && credentials.length) : false;
 
-  if (!userAdminTeams?.length || !doesAppSupportTeamInstall(appCategories, concurrentMeetings)) {
+  // Paid apps don't support team installs at the moment
+  // Also, cal.ai(the only paid app at the moment) doesn't support team install either
+  if (paid) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        {...props}
+        disabled={shouldDisableInstallation}
+        color="primary"
+        size="base">
+        {paid.trial ? t("start_paid_trial") : t("subscribe")}
+      </Button>
+    );
+  }
+
+  if (
+    !userAdminTeams?.length ||
+    !doesAppSupportTeamInstall({ appCategories, concurrentMeetings, isPaid: !!paid })
+  ) {
     return (
       <Button
         data-testid="install-app-button"
@@ -55,6 +76,7 @@ export const InstallAppButtonChild = ({
         // @TODO: Overriding color and size prevent us from
         // having to duplicate InstallAppButton for now.
         color="primary"
+        disabled={shouldDisableInstallation}
         size="base">
         {multiInstall ? t("install_another") : t("install_app")}
       </Button>

apps/web/components/auth/layouts/AdminLayoutAppDir.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import type { ComponentProps } from "react";
+import React, { useEffect } from "react";
+
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import type Shell from "@calcom/features/shell/Shell";
+import { UserPermissionRole } from "@calcom/prisma/enums";
+import { ErrorBoundary } from "@calcom/ui";
+
+export default function AdminLayout({
+  children,
+  ...rest
+}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
+  const pathname = usePathname();
+  const session = useSession();
+  const router = useRouter();
+
+  // Force redirect on component level
+  useEffect(() => {
+    if (session.data && session.data.user.role !== UserPermissionRole.ADMIN) {
+      router.replace("/settings/my-account/profile");
+    }
+  }, [session, router]);
+
+  const isAppsPage = pathname?.startsWith("/settings/admin/apps");
+  return (
+    <SettingsLayout {...rest}>
+      <div className="divide-subtle mx-auto flex max-w-4xl flex-row divide-y">
+        <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </div>
+      </div>
+    </SettingsLayout>
+  );
+}
+
+export const getLayout = (page: React.ReactElement) => <AdminLayout>{page}</AdminLayout>;

apps/web/components/booking/BookingListItem.tsx

@@ -32,8 +32,6 @@ import {
 } from "@calcom/ui";
 import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
 
-import useMeQuery from "@lib/hooks/useMeQuery";
-
 import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
@@ -45,14 +43,18 @@ type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number
 type BookingItemProps = BookingItem & {
   listingStatus: BookingListingStatus;
   recurringInfo: RouterOutputs["viewer"]["bookings"]["get"]["recurringInfo"][number] | undefined;
+  loggedInUser: {
+    userId: number | undefined;
+    userTimeZone: string | undefined;
+    userTimeFormat: number | null | undefined;
+    userEmail: string | undefined;
+  };
 };
 
 function BookingListItem(booking: BookingItemProps) {
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
   const bookerUrl = useBookerUrl();
+  const { userId, userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
 
-  const user = query.data;
   const {
     t,
     i18n: { language },
@@ -215,7 +217,7 @@ function BookingListItem(booking: BookingItemProps) {
   };
 
   const startTime = dayjs(booking.startTime)
-    .tz(user?.timeZone)
+    .tz(userTimeZone)
     .locale(language)
     .format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
@@ -260,15 +262,21 @@ function BookingListItem(booking: BookingItemProps) {
 
   const title = booking.title;
 
-  const showRecordingsButtons = !!(booking.isRecorded && isPast && isConfirmed);
+  const showViewRecordingsButton = !!(booking.isRecorded && isPast && isConfirmed);
+  const showCheckRecordingButton =
+    isPast &&
+    isConfirmed &&
+    !booking.isRecorded &&
+    (!booking.location || booking.location === "integrations:daily" || booking?.location?.trim() === "");
 
   const showRecordingActions: ActionType[] = [
     {
       id: "view_recordings",
-      label: t("view_recordings"),
+      label: showCheckRecordingButton ? t("check_for_recordings") : t("view_recordings"),
       onClick: () => {
         setViewRecordingsDialogIsOpen(true);
       },
+      color: showCheckRecordingButton ? "secondary" : "primary",
       disabled: mutation.isLoading,
     },
   ];
@@ -296,12 +304,12 @@ function BookingListItem(booking: BookingItemProps) {
           paymentCurrency={booking.payment[0].currency}
         />
       )}
-      {showRecordingsButtons && (
+      {(showViewRecordingsButton || showCheckRecordingButton) && (
         <ViewRecordingsDialog
           booking={booking}
           isOpenDialog={viewRecordingsDialogIsOpen}
           setIsOpenDialog={setViewRecordingsDialogIsOpen}
-          timeFormat={user?.timeFormat ?? null}
+          timeFormat={userTimeFormat ?? null}
         />
       )}
       {/* NOTE: Should refactor this dialog component as is being rendered multiple times */}
@@ -341,11 +349,11 @@ function BookingListItem(booking: BookingItemProps) {
             <div className="cursor-pointer py-4">
               <div className="text-emphasis text-sm leading-6">{startTime}</div>
               <div className="text-subtle text-sm">
-                {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-                {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
+                {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
                 <MeetingTimeInTimezones
-                  timeFormat={user?.timeFormat}
-                  userTimezone={user?.timeZone}
+                  timeFormat={userTimeFormat}
+                  userTimezone={userTimeZone}
                   startTime={booking.startTime}
                   endTime={booking.endTime}
                   attendees={booking.attendees}
@@ -372,7 +380,12 @@ function BookingListItem(booking: BookingItemProps) {
               ) : null}
               {recurringDates !== undefined && (
                 <div className="text-muted mt-2 text-sm">
-                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                  <RecurringBookingsTooltip
+                    userTimeFormat={userTimeFormat}
+                    userTimeZone={userTimeZone}
+                    booking={booking}
+                    recurringDates={recurringDates}
+                  />
                 </div>
               )}
             </div>
@@ -385,11 +398,11 @@ function BookingListItem(booking: BookingItemProps) {
               <div className="flex w-full items-center justify-between sm:hidden">
                 <div className="text-emphasis text-sm leading-6">{startTime}</div>
                 <div className="text-subtle pr-2 text-sm">
-                  {formatTime(booking.startTime, user?.timeFormat, user?.timeZone)} -{" "}
-                  {formatTime(booking.endTime, user?.timeFormat, user?.timeZone)}
+                  {formatTime(booking.startTime, userTimeFormat, userTimeZone)} -{" "}
+                  {formatTime(booking.endTime, userTimeFormat, userTimeZone)}
                   <MeetingTimeInTimezones
-                    timeFormat={user?.timeFormat}
-                    userTimezone={user?.timeZone}
+                    timeFormat={userTimeFormat}
+                    userTimezone={userTimeZone}
                     startTime={booking.startTime}
                     endTime={booking.endTime}
                     attendees={booking.attendees}
@@ -414,7 +427,12 @@ function BookingListItem(booking: BookingItemProps) {
               )}
               {recurringDates !== undefined && (
                 <div className="text-muted text-sm sm:hidden">
-                  <RecurringBookingsTooltip booking={booking} recurringDates={recurringDates} />
+                  <RecurringBookingsTooltip
+                    userTimeFormat={userTimeFormat}
+                    userTimeZone={userTimeZone}
+                    booking={booking}
+                    recurringDates={recurringDates}
+                  />
                 </div>
               )}
             </div>
@@ -446,7 +464,7 @@ function BookingListItem(booking: BookingItemProps) {
                 <DisplayAttendees
                   attendees={booking.attendees}
                   user={booking.user}
-                  currentEmail={user?.email}
+                  currentEmail={userEmail}
                 />
               )}
               {isCancelled && booking.rescheduled && (
@@ -460,13 +478,15 @@ function BookingListItem(booking: BookingItemProps) {
         <td className="flex w-full justify-end py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:pl-0">
           {isUpcoming && !isCancelled ? (
             <>
-              {isPending && user?.id === booking.user?.id && <TableActions actions={pendingActions} />}
+              {isPending && userId === booking.user?.id && <TableActions actions={pendingActions} />}
               {isConfirmed && <TableActions actions={bookedActions} />}
               {isRejected && <div className="text-subtle text-sm">{t("rejected")}</div>}
             </>
           ) : null}
           {isPast && isPending && !isConfirmed ? <TableActions actions={bookedActions} /> : null}
-          {showRecordingsButtons && <TableActions actions={showRecordingActions} />}
+          {(showViewRecordingsButton || showCheckRecordingButton) && (
+            <TableActions actions={showRecordingActions} />
+          )}
           {isCancelled && booking.rescheduled && (
             <div className="hidden h-full items-center md:flex">
               <RequestSentMessage />
@@ -486,12 +506,16 @@ function BookingListItem(booking: BookingItemProps) {
 interface RecurringBookingsTooltipProps {
   booking: BookingItemProps;
   recurringDates: Date[];
+  userTimeZone: string | undefined;
+  userTimeFormat: number | null | undefined;
 }
 
-const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookingsTooltipProps) => {
-  // Get user so we can determine 12/24 hour format preferences
-  const query = useMeQuery();
-  const user = query.data;
+const RecurringBookingsTooltip = ({
+  booking,
+  recurringDates,
+  userTimeZone,
+  userTimeFormat,
+}: RecurringBookingsTooltipProps) => {
   const {
     t,
     i18n: { language },
@@ -501,8 +525,8 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
     return (
       recurringDate >= now &&
       !booking.recurringInfo?.bookings[BookingStatus.CANCELLED]
-        .map((date) => date.toDateString())
-        .includes(recurringDate.toDateString())
+        .map((date) => date.toString())
+        .includes(recurringDate.toString())
     );
   }).length;
 
@@ -519,11 +543,11 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 const pastOrCancelled =
                   aDate < now ||
                   booking.recurringInfo?.bookings[BookingStatus.CANCELLED]
-                    .map((date) => date.toDateString())
-                    .includes(aDate.toDateString());
+                    .map((date) => date.toString())
+                    .includes(aDate.toString());
                 return (
                   <p key={key} className={classNames(pastOrCancelled && "line-through")}>
-                    {formatTime(aDate, user?.timeFormat, user?.timeZone)}
+                    {formatTime(aDate, userTimeFormat, userTimeZone)}
                     {" - "}
                     {dayjs(aDate).locale(language).format("D MMMM YYYY")}
                   </p>
@@ -536,7 +560,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 />
                 <p className="mt-1 pl-5 text-xs">
                   {booking.status === BookingStatus.ACCEPTED
-                    ? `${t("event_remaining", {
+                    ? `${t("event_remaining_other", {
                         count: recurringCount,
                       })}`
                     : getEveryFreqFor({

apps/web/components/dialog/EditLocationDialog.tsx

@@ -382,7 +382,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                 }}
               />
               {selectedLocation && LocationOptions}
-              <DialogFooter className="mt-4">
+              <DialogFooter className="relative">
                 <Button
                   onClick={() => {
                     setShowLocationModal(false);

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -134,7 +134,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
         {!!connectedCalendarsQuery.data?.connectedCalendars.length && !team && (
           <div className="flex flex-col">
             <div className="flex justify-between">
-              <Label className="font-medium">{t("add_to_calendar")}</Label>
+              <div>
+                <Label className="text-emphasis mb-0 font-medium">{t("add_to_calendar")}</Label>
+              </div>
               <Link
                 href="/apps/categories/calendar"
                 target="_blank"
@@ -142,21 +144,20 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 {t("add_another_calendar")}
               </Link>
             </div>
-            <div className="-mt-1 w-full">
-              <Controller
-                control={formMethods.control}
-                name="destinationCalendar"
-                defaultValue={eventType.destinationCalendar || undefined}
-                render={({ field: { onChange, value } }) => (
-                  <DestinationCalendarSelector
-                    destinationCalendar={eventType.destinationCalendar}
-                    value={value ? value.externalId : undefined}
-                    onChange={onChange}
-                    hidePlaceholder
-                  />
-                )}
-              />
-            </div>
+            <Controller
+              control={formMethods.control}
+              name="destinationCalendar"
+              defaultValue={eventType.destinationCalendar || undefined}
+              render={({ field: { onChange, value } }) => (
+                <DestinationCalendarSelector
+                  destinationCalendar={eventType.destinationCalendar}
+                  value={value ? value.externalId : undefined}
+                  onChange={onChange}
+                  hidePlaceholder
+                  hideAdvancedText
+                />
+              )}
+            />
             <p className="text-subtle text-sm">{t("select_which_cal")}</p>
           </div>
         )}

apps/web/components/eventtype/EventAppsTab.tsx

@@ -47,7 +47,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
     };
   };
 
-  const getAppDataSetter = (appId: EventTypeAppsList): SetAppData => {
+  const getAppDataSetter = (appId: EventTypeAppsList, credentialId?: number): SetAppData => {
     return function (key, value) {
       // Always get latest data available in Form because consequent calls to setData would update the Form but not allAppsData(it would update during next render)
       const allAppsDataFromForm = methods.getValues("metadata")?.apps || {};
@@ -57,6 +57,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         [appId]: {
           ...appData,
           [key]: value,
+          credentialId,
         },
       });
     };
@@ -76,7 +77,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       appCards.push(
         <EventTypeAppCard
           getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-          setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+          setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
           key={app.slug}
           app={app}
           eventType={eventType}
@@ -90,7 +91,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         appCards.push(
           <EventTypeAppCard
             getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-            setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+            setAppData={getAppDataSetter(app.slug as EventTypeAppsList, team.credentialId)}
             key={app.slug + team?.credentialId}
             app={{
               ...app,
@@ -147,7 +148,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               return (
                 <EventTypeAppCard
                   getAppData={getAppDataGetter(app.slug as EventTypeAppsList)}
-                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList)}
+                  setAppData={getAppDataSetter(app.slug as EventTypeAppsList, app.userCredentialIds[0])}
                   key={app.slug}
                   app={app}
                   eventType={eventType}

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -298,6 +298,29 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           );
         }}
       />
+      <Controller
+        name="onlyShowFirstAvailableSlot"
+        control={formMethods.control}
+        render={({ field: { value } }) => {
+          const isChecked = value;
+          return (
+            <SettingsToggle
+              toggleSwitchAtTheEnd={true}
+              labelClassName="text-sm"
+              title={t("limit_booking_only_first_slot")}
+              description={t("limit_booking_only_first_slot_description")}
+              checked={isChecked}
+              onCheckedChange={(active) => {
+                formMethods.setValue("onlyShowFirstAvailableSlot", active ?? false);
+              }}
+              switchContainerClassName={classNames(
+                "border-subtle mt-6 rounded-lg border py-6 px-4 sm:px-6",
+                isChecked && "rounded-b-none"
+              )}
+            />
+          );
+        }}
+      />
       <Controller
         name="durationLimits"
         control={formMethods.control}

apps/web/components/eventtype/EventSetupTab.tsx

@@ -8,7 +8,7 @@ import { Controller, useFormContext, useFieldArray } from "react-hook-form";
 import type { MultiValue } from "react-select";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
-import { getEventLocationType, LocationType, MeetLocationType } from "@calcom/app-store/locations";
+import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import { CAL_URL } from "@calcom/lib/constants";
@@ -247,15 +247,7 @@ export const EventSetupTab = (
         <ul ref={animationRef} className="space-y-2">
           {locationFields.map((field, index) => {
             const eventLocationType = getEventLocationType(field.type);
-            const defaultLocation = formMethods
-              .getValues("locations")
-              ?.find((location: { type: EventLocationType["type"]; address?: string }) => {
-                if (location.type === LocationType.InPerson) {
-                  return location.type === eventLocationType?.type && location.address === field?.address;
-                } else {
-                  return location.type === eventLocationType?.type;
-                }
-              });
+            const defaultLocation = field;
 
             const option = getLocationFromType(field.type, locationOptions);
 
@@ -337,10 +329,12 @@ export const EventSetupTab = (
                         name={eventLocationType.defaultValueVariable}
                         className="text-error my-1 ml-6 text-sm"
                         as="div"
+                        id="location-error"
                       />
                     </div>
                     <div className="ml-6">
                       <CheckboxField
+                        name={`locations[${index}].displayLocationPublicly`}
                         data-testid="display-location"
                         defaultChecked={defaultLocation?.displayLocationPublicly}
                         description={t("display_location_label")}
@@ -363,7 +357,6 @@ export const EventSetupTab = (
             <div className="flex">
               <LocationSelect
                 defaultMenuIsOpen={showEmptyLocationSelect}
-                autoFocus
                 placeholder={t("select")}
                 options={locationOptions}
                 value={selectedNewOption}

apps/web/components/eventtype/EventTeamTab.tsx

@@ -76,6 +76,8 @@ const ChildrenEventTypesList = ({
       <div>
         <Label>{t("assign_to")}</Label>
         <ChildrenEventTypeSelect
+          aria-label="assignment-dropdown"
+          data-testid="assignment-dropdown"
           onChange={(options) => {
             onChange &&
               onChange(

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

@@ -156,11 +156,8 @@ const UserProfile = () => {
           {t("few_sentences_about_yourself")}
         </p>
       </fieldset>
-      <Button
-        type="submit"
-        className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
+      <Button EndIcon={ArrowRight} type="submit" className="mt-8 w-full items-center justify-center">
         {t("finish")}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
     </form>
   );

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

@@ -9,7 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TimezoneSelect } from "@calcom/ui";
+import { Button, TimezoneSelect, Input } from "@calcom/ui";
 import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -76,7 +76,7 @@ const UserSettings = (props: IUserSettingsProps) => {
           <label htmlFor="name" className="text-default mb-2 block text-sm font-medium">
             {t("full_name")}
           </label>
-          <input
+          <Input
             {...register("name", {
               required: true,
             })}
@@ -85,7 +85,6 @@ const UserSettings = (props: IUserSettingsProps) => {
             type="text"
             autoComplete="off"
             autoCorrect="off"
-            className="border-default w-full rounded-md border text-sm"
           />
           {errors.name && (
             <p data-testid="required" className="py-2 text-xs text-red-500">
@@ -106,7 +105,7 @@ const UserSettings = (props: IUserSettingsProps) => {
             className="mt-2 w-full rounded-md text-sm"
           />
 
-          <p className="text-subtle dark:text-inverted mt-3 flex flex-row font-sans text-xs leading-tight">
+          <p className="text-subtle mt-3 flex flex-row font-sans text-xs leading-tight">
             {t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
           </p>
         </div>

apps/web/components/ui/avatar/UserAvatar.tsx

@@ -14,6 +14,6 @@ type UserAvatarProps = Omit<React.ComponentProps<typeof Avatar>, "alt" | "imageS
  * It is aware of the user's organization to correctly show the avatar from the correct URL
  */
 export function UserAvatar(props: UserAvatarProps) {
-  const { user, previewSrc, ...rest } = props;
-  return <Avatar {...rest} alt={user.name || ""} imageSrc={previewSrc ?? getUserAvatarUrl(user)} />;
+  const { user, previewSrc = getUserAvatarUrl(user), ...rest } = props;
+  return <Avatar {...rest} alt={user.name || "Nameless User"} imageSrc={previewSrc} />;
 }

apps/web/components/ui/avatar/UserAvatarGroup.tsx

@@ -1,3 +1,4 @@
+import { CAL_URL } from "@calcom/lib/constants";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import type { User } from "@calcom/prisma/client";
 import { AvatarGroup } from "@calcom/ui";
@@ -11,6 +12,7 @@ export function UserAvatarGroup(props: UserAvatarProps) {
     <AvatarGroup
       {...rest}
       items={users.map((user) => ({
+        href: `${CAL_URL}/${user.username}?redirect=false`,
         alt: user.name || "",
         title: user.name || "",
         image: getUserAvatarUrl(user),

apps/web/components/ui/avatar/UserAvatarGroupWithOrg.tsx

@@ -1,4 +1,5 @@
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import type { Team, User } from "@calcom/prisma/client";
 import { AvatarGroup } from "@calcom/ui";
@@ -10,8 +11,11 @@ type UserAvatarProps = Omit<React.ComponentProps<typeof AvatarGroup>, "items"> &
 
 export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
   const { users, organization, ...rest } = props;
+  const orgBranding = useOrgBranding();
+  const baseUrl = `${orgBranding?.fullDomain ?? CAL_URL}`;
   const items = [
     {
+      href: baseUrl,
       image: `${WEBAPP_URL}/team/${organization.slug}/avatar.png`,
       alt: organization.name || undefined,
       title: organization.name,
@@ -19,6 +23,7 @@ export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
   ].concat(
     users.map((user) => {
       return {
+        href: `${baseUrl}/${user.username}/?redirect=false`,
         image: getUserAvatarUrl(user),
         alt: user.name || undefined,
         title: user.name || user.username || "",

apps/web/lib/app-providers-app-dir.tsx

@@ -1,4 +1,5 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { TrpcProvider } from "app/_trpc/trpc-provider";
 import { dir } from "i18next";
 import type { Session } from "next-auth";
 import { SessionProvider, useSession } from "next-auth/react";
@@ -255,26 +256,28 @@ const AppProviders = (props: PageWrapperProps) => {
   const isBookingPage = useIsBookingPage();
 
   const RemainingProviders = (
-    <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <SessionProvider>
-        <CustomI18nextProvider i18n={props.i18n}>
-          <TooltipProvider>
-            {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
-            <CalcomThemeProvider
-              themeBasis={props.themeBasis}
-              nonce={props.nonce}
-              isThemeSupported={props.isThemeSupported}
-              isBookingPage={props.isBookingPage || isBookingPage}>
-              <FeatureFlagsProvider>
-                <OrgBrandProvider>
-                  <MetaProvider>{props.children}</MetaProvider>
-                </OrgBrandProvider>
-              </FeatureFlagsProvider>
-            </CalcomThemeProvider>
-          </TooltipProvider>
-        </CustomI18nextProvider>
-      </SessionProvider>
-    </EventCollectionProvider>
+    <TrpcProvider dehydratedState={props.dehydratedState}>
+      <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
+        <SessionProvider>
+          <CustomI18nextProvider i18n={props.i18n}>
+            <TooltipProvider>
+              {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+              <CalcomThemeProvider
+                themeBasis={props.themeBasis}
+                nonce={props.nonce}
+                isThemeSupported={/* undefined gets treated as true */ props.isThemeSupported ?? true}
+                isBookingPage={props.isBookingPage || isBookingPage}>
+                <FeatureFlagsProvider>
+                  <OrgBrandProvider>
+                    <MetaProvider>{props.children}</MetaProvider>
+                  </OrgBrandProvider>
+                </FeatureFlagsProvider>
+              </CalcomThemeProvider>
+            </TooltipProvider>
+          </CustomI18nextProvider>
+        </SessionProvider>
+      </EventCollectionProvider>
+    </TrpcProvider>
   );
 
   if (isBookingPage) {

apps/web/lib/csp.ts

@@ -1,10 +1,11 @@
 import type { IncomingMessage, OutgoingMessage } from "http";
+import type { NextRequest, NextResponse } from "next/server";
 import { z } from "zod";
 
 import { IS_PRODUCTION } from "@calcom/lib/constants";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 
-import { buildNonce } from "@lib/buildNonce";
+import { buildNonce } from "./buildNonce";
 
 function getCspPolicy(nonce: string) {
   //TODO: Do we need to explicitly define it in turbo.json
@@ -46,11 +47,12 @@ const isPagePathRequest = (url: URL) => {
   return !isNonPagePathPrefix.test(pathname) && !isFile.test(pathname);
 };
 
-export function csp(req: IncomingMessage | null, res: OutgoingMessage | null) {
+export function csp(req: IncomingMessage | NextRequest | null, res: OutgoingMessage | NextResponse | null) {
   if (!req) {
     return { nonce: undefined };
   }
-  const existingNonce = req.headers["x-nonce"];
+  const existingNonce = "cache" in req ? req.headers.get("x-nonce") : req.headers["x-nonce"];
+
   if (existingNonce) {
     const existingNoneParsed = z.string().safeParse(existingNonce);
     return { nonce: existingNoneParsed.success ? existingNoneParsed.data : "" };
@@ -71,17 +73,28 @@ export function csp(req: IncomingMessage | null, res: OutgoingMessage | null) {
   }
   // Set x-nonce request header to be used by `getServerSideProps` or similar fns and `Document.getInitialProps` to read the nonce from
   // It is generated for all page requests but only used by pages that need CSP
-  req.headers["x-nonce"] = nonce;
+
+  if ("cache" in req) {
+    req.headers.set("x-nonce", nonce);
+  } else {
+    req.headers["x-nonce"] = nonce;
+  }
 
   if (res) {
-    res.setHeader(
-      req.headers["x-csp-enforce"] === "true"
-        ? "Content-Security-Policy"
-        : "Content-Security-Policy-Report-Only",
-      getCspPolicy(nonce)
-        .replace(/\s{2,}/g, " ")
-        .trim()
-    );
+    const enforced =
+      "cache" in req ? req.headers.get("x-csp-enforce") === "true" : req.headers["x-csp-enforce"] === "true";
+
+    const name = enforced ? "Content-Security-Policy" : "Content-Security-Policy-Report-Only";
+
+    const value = getCspPolicy(nonce)
+      .replace(/\s{2,}/g, " ")
+      .trim();
+
+    if ("body" in res) {
+      res.headers.set(name, value);
+    } else {
+      res.setHeader(name, value);
+    }
   }
 
   return { nonce };

apps/web/lib/hooks/useIsBookingPage.ts

@@ -1,10 +1,12 @@
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname } from "next/navigation";
+
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
 export default function useIsBookingPage(): boolean {
   const pathname = usePathname();
   const isBookingPage = ["/booking/", "/cancel", "/reschedule"].some((route) => pathname?.startsWith(route));
 
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   const userParam = Boolean(searchParams?.get("user"));
   const teamParam = Boolean(searchParams?.get("team"));
 

apps/web/lib/hooks/useRouterQuery.ts

@@ -1,8 +1,10 @@
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useCallback } from "react";
 
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+
 export default function useRouterQuery<T extends string>(name: T) {
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   const pathname = usePathname();
   const router = useRouter();
 

apps/web/lib/hooks/useToggleQuery.tsx

@@ -1,7 +1,7 @@
-import { useSearchParams } from "next/navigation";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 
 export function useToggleQuery(name: string) {
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
 
   return {
     isOn: searchParams?.get(name) === "1",

apps/web/lib/metadata.ts

@@ -0,0 +1,82 @@
+import type { Metadata } from "next";
+
+import { truncateOnWord } from "@calcom/lib/text";
+
+type RootMetadataRecipe = Readonly<{
+  twitterCreator: string;
+  twitterSite: string;
+  robots: {
+    index: boolean;
+    follow: boolean;
+  };
+}>;
+
+export type PageMetadataRecipe = Readonly<{
+  title: string;
+  canonical: string;
+  image: string;
+  description: string;
+  siteName: string;
+  metadataBase: URL;
+}>;
+
+export const prepareRootMetadata = (recipe: RootMetadataRecipe): Metadata => ({
+  icons: {
+    icon: "/favicon.icon",
+    apple: "/api/logo?type=apple-touch-icon",
+    other: [
+      {
+        rel: "icon-mask",
+        url: "/safari-pinned-tab.svg",
+        color: "#000000",
+      },
+      {
+        url: "/api/logo?type=favicon-16",
+        sizes: "16x16",
+        type: "image/png",
+      },
+      {
+        url: "/api/logo?type=favicon-32",
+        sizes: "32x32",
+        type: "image/png",
+      },
+    ],
+  },
+  manifest: "/site.webmanifest",
+  viewport: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+  robots: recipe.robots,
+  other: {
+    "application-TileColor": "#ff0000",
+  },
+  themeColor: [
+    {
+      media: "(prefers-color-scheme: light)",
+      color: "#f9fafb",
+    },
+    {
+      media: "(prefers-color-scheme: dark)",
+      color: "#1C1C1C",
+    },
+  ],
+  twitter: {
+    site: recipe.twitterSite,
+    creator: recipe.twitterCreator,
+    card: "summary_large_image",
+  },
+});
+
+export const preparePageMetadata = (recipe: PageMetadataRecipe): Metadata => ({
+  title: recipe.title,
+  alternates: {
+    canonical: recipe.canonical,
+  },
+  openGraph: {
+    description: truncateOnWord(recipe.description, 158),
+    url: recipe.canonical,
+    type: "website",
+    siteName: recipe.siteName,
+    title: recipe.title,
+    images: [recipe.image],
+  },
+  metadataBase: recipe.metadataBase,
+});

apps/web/middleware.ts

@@ -1,14 +1,21 @@
 import { get } from "@vercel/edge-config";
 import { collectEvents } from "next-collect/server";
-import type { NextMiddleware } from "next/server";
+import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
+import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
-const middleware: NextMiddleware = async (req) => {
+import { csp } from "@lib/csp";
+
+import { abTestMiddlewareFactory } from "./abTest/middlewareFactory";
+
+const middleware = async (req: NextRequest): Promise<NextResponse<unknown>> => {
   const url = req.nextUrl;
   const requestHeaders = new Headers(req.headers);
 
+  requestHeaders.set("x-url", req.url);
+
   if (!url.pathname.startsWith("/api")) {
     //
     // NOTE: When tRPC hits an error a 500 is returned, when this is received
@@ -32,6 +39,18 @@ const middleware: NextMiddleware = async (req) => {
   }
 
   const res = routingForms.handle(url);
+
+  const { nonce } = csp(req, res ?? null);
+
+  if (!process.env.CSP_POLICY) {
+    req.headers.set("x-csp", "not-opted-in");
+  } else if (!req.headers.get("x-csp")) {
+    // If x-csp not set by gSSP, then it's initialPropsOnly
+    req.headers.set("x-csp", "initialPropsOnly");
+  } else {
+    req.headers.set("x-csp", nonce ?? "");
+  }
+
   if (res) {
     return res;
   }
@@ -45,6 +64,12 @@ const middleware: NextMiddleware = async (req) => {
     requestHeaders.set("x-csp-enforce", "true");
   }
 
+  requestHeaders.set("x-pathname", url.pathname);
+
+  const locale = await getLocale(req);
+
+  requestHeaders.set("x-locale", locale);
+
   return NextResponse.next({
     request: {
       headers: requestHeaders,
@@ -74,11 +99,21 @@ export const config = {
      * Paths required by routingForms.handle
      */
     "/apps/routing_forms/:path*",
+    "/event-types",
+    "/future/event-types/",
+    "/settings/admin/:path*",
+    "/future/settings/admin/:path*",
+
+    "/apps/:slug/",
+    "/future/apps/:slug/",
+
+    "/apps/:slug/setup/",
+    "/future/apps/:slug/setup/",
   ],
 };
 
 export default collectEvents({
-  middleware,
+  middleware: abTestMiddlewareFactory(middleware),
   ...nextCollectBasicSettings,
   cookieName: "__clnds",
   extend: extendEventData,

apps/web/next.config.js

@@ -71,13 +71,21 @@ if (process.env.GOOGLE_API_CREDENTIALS && !validJson(process.env.GOOGLE_API_CRED
 }
 
 const informAboutDuplicateTranslations = () => {
-  const valueSet = new Set();
+  const valueMap = {};
 
   for (const key in englishTranslation) {
-    if (valueSet.has(englishTranslation[key])) {
-      console.warn("\x1b[33mDuplicate value found in:", "\x1b[0m", key);
+    const value = englishTranslation[key];
+
+    if (valueMap[value]) {
+      console.warn(
+        "\x1b[33mDuplicate value found in common.json keys:",
+        "\x1b[0m ",
+        key,
+        "and",
+        valueMap[value]
+      );
     } else {
-      valueSet.add(englishTranslation[key]);
+      valueMap[value] = key;
     }
   }
 };
@@ -146,6 +154,9 @@ const matcherConfigUserTypeEmbedRoute = {
 
 /** @type {import("next").NextConfig} */
 const nextConfig = {
+  experimental: {
+    serverComponentsExternalPackages: ["next-i18next"],
+  },
   i18n: {
     ...i18n,
     localeDetection: false,
@@ -223,6 +234,9 @@ const nextConfig = {
       ...config.resolve.fallback, // if you miss it, all the other options in fallback, specified
       // by next.js will be dropped. Doesn't make much sense, but how it is
       fs: false,
+      // ignore module resolve errors caused by the server component bundler
+      "pg-native": false,
+      "superagent-proxy": false,
     };
 
     /**

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "3.4.7",
+  "version": "3.5.5",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -45,7 +45,7 @@
     "@hookform/resolvers": "^2.9.7",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^13.1.6",
-    "@radix-ui/react-avatar": "^1.0.0",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
@@ -83,7 +83,7 @@
     "ics": "^2.37.0",
     "jose": "^4.13.1",
     "kbar": "^0.1.0-beta.36",
-    "libphonenumber-js": "^1.10.12",
+    "libphonenumber-js": "^1.10.51",
     "lodash": "^4.17.21",
     "lottie-react": "^2.3.1",
     "markdown-it": "^13.0.1",
@@ -130,7 +130,6 @@
     "tailwindcss-radix": "^2.6.0",
     "turndown": "^7.1.1",
     "uuid": "^8.3.2",
-    "web3": "^1.7.5",
     "zod": "^3.22.2"
   },
   "devDependencies": {
@@ -168,8 +167,9 @@
     "module-alias": "^2.2.2",
     "msw": "^0.42.3",
     "node-html-parser": "^6.1.10",
+    "node-mocks-http": "^1.11.0",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^3.3.3",
     "tailwindcss-animate": "^1.0.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4"

apps/web/pages/500.tsx

@@ -1,7 +1,7 @@
 import Head from "next/head";
-import { useSearchParams } from "next/navigation";
 
 import { APP_NAME } from "@calcom/lib/constants";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
 import { Copy } from "@calcom/ui/components/icon";
@@ -9,7 +9,7 @@ import { Copy } from "@calcom/ui/components/icon";
 import PageWrapper from "@components/PageWrapper";
 
 export default function Error500() {
-  const searchParams = useSearchParams();
+  const searchParams = useCompatSearchParams();
   const { t } = useLocale();
 
   return (

apps/web/pages/[user].tsx

@@ -54,6 +54,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
     // So it doesn't display in the Link (and make tests fail)
     user: _user,
     orgSlug: _orgSlug,
+    redirect: _redirect,
     ...query
   } = useRouterQuery();
 
@@ -82,7 +83,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
         description={markdownStrippedBio}
         meeting={{
           title: markdownStrippedBio,
-          profile: { name: `${profile.name}`, image: null },
+          profile: { name: `${profile.name}`, image: user.avatarUrl || null },
           users: [{ username: `${user.username}`, name: `${user.name}` }],
         }}
         nextSeoProps={{
@@ -116,7 +117,7 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
                   : null
               }
             />
-            <h1 className="font-cal text-emphasis mb-1 text-3xl" data-testid="name-title">
+            <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
               {profile.name}
               {user.verified && (
                 <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
@@ -245,7 +246,7 @@ export type UserPageProps = {
     allowSEOIndexing: boolean;
     username: string | null;
   };
-  users: Pick<User, "away" | "name" | "username" | "bio" | "verified">[];
+  users: Pick<User, "away" | "name" | "username" | "bio" | "verified" | "avatarUrl">[];
   themeBasis: string | null;
   markdownStrippedBio: string;
   safeBio: string;
@@ -295,6 +296,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
       metadata: true,
       brandColor: true,
       darkBrandColor: true,
+      avatarUrl: true,
       organizationId: true,
       organization: {
         select: {
@@ -363,6 +365,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     image: user.avatar,
     theme: user.theme,
     brandColor: user.brandColor,
+    avatarUrl: user.avatarUrl,
     darkBrandColor: user.darkBrandColor,
     allowSEOIndexing: user.allowSEOIndexing ?? true,
     username: user.username,
@@ -386,6 +389,16 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
     descriptionAsSafeHTML: markdownToSafeHTML(eventType.description),
   }));
 
+  // if profile only has one public event-type, redirect to it
+  if (eventTypes.length === 1 && context.query.redirect !== "false") {
+    return {
+      redirect: {
+        permanent: false,
+        destination: `/${user.username}/${eventTypes[0].slug}`,
+      },
+    };
+  }
+
   const safeBio = markdownToSafeHTML(user.bio) || "";
 
   const markdownStrippedBio = stripMarkdown(user?.bio || "");
@@ -397,6 +410,7 @@ export const getServerSideProps: GetServerSideProps<UserPageProps> = async (cont
         name: user.name,
         username: user.username,
         bio: user.bio,
+        avatarUrl: user.avatarUrl,
         away: user.away,
         verified: user.verified,
       })),

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

@@ -1,15 +1,12 @@
 import type { GetServerSidePropsContext } from "next";
+import { useSearchParams } from "next/navigation";
 import { z } from "zod";
 
 import { Booker } from "@calcom/atoms";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses";
 import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo";
-import {
-  getBookingForReschedule,
-  getBookingForSeatedEvent,
-  getMultipleDurationValue,
-} from "@calcom/features/bookings/lib/get-booking";
+import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getUsernameList } from "@calcom/lib/defaultEvents";
@@ -26,6 +23,16 @@ import { getTemporaryOrgRedirect } from "../../lib/getTemporaryOrgRedirect";
 
 export type PageProps = inferSSRProps<typeof getServerSideProps> & EmbedProps;
 
+export const getMultipleDurationValue = (
+  multipleDurationConfig: number[] | undefined,
+  queryDuration: string | string[] | null | undefined,
+  defaultValue: number
+) => {
+  if (!multipleDurationConfig) return null;
+  if (multipleDurationConfig.includes(Number(queryDuration))) return Number(queryDuration);
+  return defaultValue;
+};
+
 export default function Type({
   slug,
   user,
@@ -35,9 +42,10 @@ export default function Type({
   isBrandingHidden,
   isSEOIndexable,
   rescheduleUid,
-  entity,
-  duration,
+  eventData,
 }: PageProps) {
+  const searchParams = useSearchParams();
+
   return (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
@@ -46,7 +54,7 @@ export default function Type({
         rescheduleUid={rescheduleUid ?? undefined}
         hideBranding={isBrandingHidden}
         isSEOIndexable={isSEOIndexable ?? true}
-        entity={entity}
+        entity={eventData.entity}
         bookingData={booking}
       />
       <Booker
@@ -55,8 +63,16 @@ export default function Type({
         bookingData={booking}
         isAway={away}
         hideBranding={isBrandingHidden}
-        entity={entity}
-        duration={duration}
+        entity={eventData.entity}
+        durationConfig={eventData.metadata?.multipleDuration}
+        /* TODO: Currently unused, evaluate it is needed-
+         *       Possible alternative approach is to have onDurationChange.
+         */
+        duration={getMultipleDurationValue(
+          eventData.metadata?.multipleDuration,
+          searchParams?.get("duration"),
+          eventData.length
+        )}
       />
     </main>
   );
@@ -68,7 +84,7 @@ Type.PageWrapper = PageWrapper;
 async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession(context);
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
-  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
+  const { rescheduleUid, bookingUid } = context.query;
 
   const { ssrInit } = await import("@server/lib/ssr");
   const ssr = await ssrInit(context);
@@ -120,12 +136,14 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) {
 
   return {
     props: {
-      entity: eventData.entity,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: {
+          ...eventData.metadata,
+          multipleDuration: [15, 30, 60],
+        },
+      },
       booking,
       user: usernames.join("+"),
       slug,
@@ -144,7 +162,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   const session = await getServerSession(context);
   const { user: usernames, type: slug } = paramsSchema.parse(context.params);
   const username = usernames[0];
-  const { rescheduleUid, bookingUid, duration: queryDuration } = context.query;
+  const { rescheduleUid, bookingUid } = context.query;
   const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug);
 
   const isOrgContext = currentOrgDomain && isValidOrgDomain;
@@ -207,15 +225,14 @@ async function getUserPageProps(context: GetServerSidePropsContext) {
   return {
     props: {
       booking,
-      duration: getMultipleDurationValue(
-        eventData.metadata?.multipleDuration,
-        queryDuration,
-        eventData.length
-      ),
+      eventData: {
+        entity: eventData.entity,
+        length: eventData.length,
+        metadata: eventData.metadata,
+      },
       away: user?.away,
       user: username,
       slug,
-      entity: eventData.entity,
       trpcState: ssr.dehydrate(),
       isBrandingHidden: user?.hideBranding,
       isSEOIndexable: user?.allowSEOIndexing,

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

@@ -1,218 +1,63 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import type { NextApiResponse } from "next";
 
-import dayjs from "@calcom/dayjs";
-import { checkPremiumUsername } from "@calcom/ee/common/lib/checkPremiumUsername";
-import { hashPassword } from "@calcom/features/auth/lib/hashPassword";
-import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
-import { IS_CALCOM } from "@calcom/lib/constants";
-import slugify from "@calcom/lib/slugify";
-import { closeComUpsertTeamUser } from "@calcom/lib/sync/SyncServiceManager";
-import { validateUsernameInTeam, validateUsername } from "@calcom/lib/validateUsername";
-import prisma from "@calcom/prisma";
-import { IdentityProvider } from "@calcom/prisma/enums";
-import { MembershipRole } from "@calcom/prisma/enums";
+import calcomSignupHandler from "@calcom/feature-auth/signup/handlers/calcomHandler";
+import selfHostedSignupHandler from "@calcom/feature-auth/signup/handlers/selfHostedHandler";
+import { type RequestWithUsernameStatus } from "@calcom/features/auth/signup/username";
+import { IS_PREMIUM_USERNAME_ENABLED } from "@calcom/lib/constants";
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
 import { signupSchema } from "@calcom/prisma/zod-utils";
-import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (req.method !== "POST") {
-    return res.status(405).end();
-  }
+function ensureSignupIsEnabled(req: RequestWithUsernameStatus) {
+  const { token } = signupSchema
+    .pick({
+      token: true,
+    })
+    .parse(req.body);
+
+  // Stil allow signups if there is a team invite
+  if (token) return;
 
   if (process.env.NEXT_PUBLIC_DISABLE_SIGNUP === "true") {
-    res.status(403).json({ message: "Signup is disabled" });
-    return;
-  }
-
-  const data = req.body;
-  const { email, password, language, token } = signupSchema.parse(data);
-
-  const username = slugify(data.username);
-  const userEmail = email.toLowerCase();
-
-  if (!username) {
-    res.status(422).json({ message: "Invalid username" });
-    return;
-  }
-
-  let foundToken: { id: number; teamId: number | null; expires: Date } | null = null;
-  if (token) {
-    foundToken = await prisma.verificationToken.findFirst({
-      where: {
-        token,
-      },
-      select: {
-        id: true,
-        expires: true,
-        teamId: true,
-      },
-    });
-
-    if (!foundToken) {
-      return res.status(401).json({ message: "Invalid Token" });
-    }
-
-    if (dayjs(foundToken?.expires).isBefore(dayjs())) {
-      return res.status(401).json({ message: "Token expired" });
-    }
-    if (foundToken?.teamId) {
-      const teamUserValidation = await validateUsernameInTeam(username, userEmail, foundToken?.teamId);
-      if (!teamUserValidation.isValid) {
-        return res.status(409).json({ message: "Username or email is already taken" });
-      }
-    }
-  } else {
-    const userValidation = await validateUsername(username, userEmail);
-    if (!userValidation.isValid) {
-      return res.status(409).json({ message: "Username or email is already taken" });
-    }
-  }
-
-  const hashedPassword = await hashPassword(password);
-
-  if (foundToken && foundToken?.teamId) {
-    const team = await prisma.team.findUnique({
-      where: {
-        id: foundToken.teamId,
-      },
-    });
-    if (team) {
-      const teamMetadata = teamMetadataSchema.parse(team?.metadata);
-
-      if (IS_CALCOM && (!teamMetadata?.isOrganization || !!team.parentId)) {
-        const checkUsername = await checkPremiumUsername(username);
-        if (checkUsername.premium) {
-          // This signup page is ONLY meant for team invites and local setup. Not for every day users.
-          // In singup redesign/refactor coming up @sean will tackle this to make them the same API/page instead of two.
-          return res.status(422).json({
-            message: "Sign up from https://cal.com/signup to claim your premium username",
-          });
-        }
-      }
-
-      // Identify the org id in an org context signup, either the invited team is an org
-      // or has a parentId, otherwise parentId will be null, making orgId null
-      const orgId = teamMetadata?.isOrganization ? team.id : team.parentId;
-
-      const user = await prisma.user.upsert({
-        where: { email: userEmail },
-        update: {
-          username,
-          password: hashedPassword,
-          emailVerified: new Date(Date.now()),
-          identityProvider: IdentityProvider.CAL,
-          organizationId: orgId,
-        },
-        create: {
-          username,
-          email: userEmail,
-          password: hashedPassword,
-          identityProvider: IdentityProvider.CAL,
-          organizationId: orgId,
-        },
-      });
-
-      const membership = await prisma.membership.upsert({
-        where: {
-          userId_teamId: { userId: user.id, teamId: team.id },
-        },
-        update: {
-          accepted: true,
-        },
-        create: {
-          userId: user.id,
-          teamId: team.id,
-          accepted: true,
-          role: MembershipRole.MEMBER,
-        },
-      });
-      closeComUpsertTeamUser(team, user, membership.role);
-
-      // Accept any child team invites for orgs and create a membership for the org itself
-      if (team.parentId) {
-        // Create (when invite link is used) or Update (when regular email invitation is used) membership for the organization itself
-        await prisma.membership.upsert({
-          where: {
-            userId_teamId: { userId: user.id, teamId: team.parentId },
-          },
-          update: {
-            accepted: true,
-          },
-          create: {
-            userId: user.id,
-            teamId: team.parentId,
-            accepted: true,
-            role: MembershipRole.MEMBER,
-          },
-        });
-
-        // We do a membership update twice so we can join the ORG invite if the user is invited to a team witin a ORG
-        await prisma.membership.updateMany({
-          where: {
-            userId: user.id,
-            team: {
-              id: team.parentId,
-            },
-            accepted: false,
-          },
-          data: {
-            accepted: true,
-          },
-        });
-
-        // Join any other invites
-        await prisma.membership.updateMany({
-          where: {
-            userId: user.id,
-            team: {
-              parentId: team.parentId,
-            },
-            accepted: false,
-          },
-          data: {
-            accepted: true,
-          },
-        });
-      }
-    }
-
-    // Cleanup token after use
-    await prisma.verificationToken.delete({
-      where: {
-        id: foundToken.id,
-      },
-    });
-  } else {
-    if (IS_CALCOM) {
-      const checkUsername = await checkPremiumUsername(username);
-      if (checkUsername.premium) {
-        res.status(422).json({
-          message: "Sign up from https://cal.com/signup to claim your premium username",
-        });
-        return;
-      }
-    }
-    await prisma.user.upsert({
-      where: { email: userEmail },
-      update: {
-        username,
-        password: hashedPassword,
-        emailVerified: new Date(Date.now()),
-        identityProvider: IdentityProvider.CAL,
-      },
-      create: {
-        username,
-        email: userEmail,
-        password: hashedPassword,
-        identityProvider: IdentityProvider.CAL,
-      },
-    });
-    await sendEmailVerification({
-      email: userEmail,
-      username,
-      language,
+    throw new HttpError({
+      statusCode: 403,
+      message: "Signup is disabled",
     });
   }
-
-  res.status(201).json({ message: "Created user" });
+}
+
+function ensureReqIsPost(req: RequestWithUsernameStatus) {
+  if (req.method !== "POST") {
+    throw new HttpError({
+      statusCode: 405,
+      message: "Method not allowed",
+    });
+  }
+}
+
+export default async function handler(req: RequestWithUsernameStatus, res: NextApiResponse) {
+  // Use a try catch instead of returning res every time
+  try {
+    ensureReqIsPost(req);
+    ensureSignupIsEnabled(req);
+
+    /**
+     * Im not sure its worth merging these two handlers. They are different enough to be separate.
+     * Calcom handles things like creating a stripe customer - which we don't need to do for self hosted.
+     * It also handles things like premium username.
+     * TODO: (SEAN) - Extract a lot of the logic from calcomHandler into a separate file and import it into both handlers.
+     * @zomars: We need to be able to test this with E2E. They way it's done RN it will never run on CI.
+     */
+    if (IS_PREMIUM_USERNAME_ENABLED) {
+      return await calcomSignupHandler(req, res);
+    }
+
+    return await selfHostedSignupHandler(req, res);
+  } catch (e) {
+    if (e instanceof HttpError) {
+      return res.status(e.statusCode).json({ message: e.message });
+    }
+    logger.error(e);
+    return res.status(500).json({ message: "Internal server error" });
+  }
 }

apps/web/pages/api/avatar/[uuid].ts

@@ -0,0 +1,61 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { z } from "zod";
+
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
+import prisma from "@calcom/prisma";
+
+const querySchema = z.object({
+  uuid: z.string().transform((objectKey) => objectKey.split(".")[0]),
+});
+
+const handleValidationError = (res: NextApiResponse, error: z.ZodError): void => {
+  const errors = error.errors.map((err) => ({
+    path: err.path.join("."),
+    errorCode: `error.validation.${err.code}`,
+  }));
+
+  res.status(400).json({
+    message: "VALIDATION_ERROR",
+    errors,
+  });
+};
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const result = querySchema.safeParse(req.query);
+  if (!result.success) {
+    return handleValidationError(res, result.error);
+  }
+
+  const { uuid: objectKey } = result.data;
+
+  let img;
+  try {
+    const { data } = await prisma.avatar.findUniqueOrThrow({
+      where: {
+        objectKey,
+      },
+      select: {
+        data: true,
+      },
+    });
+    img = data;
+  } catch (e) {
+    // If anything goes wrong or avatar is not found, use default avatar
+    res.writeHead(302, {
+      Location: AVATAR_FALLBACK,
+    });
+
+    res.end();
+    return;
+  }
+
+  const decoded = img.toString().replace("data:image/png;base64,", "").replace("data:image/jpeg;base64,", "");
+  const imageResp = Buffer.from(decoded, "base64");
+
+  res.writeHead(200, {
+    "Content-Type": "image/png",
+    "Content-Length": imageResp.length,
+  });
+
+  res.end(imageResp);
+}

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

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

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

@@ -3,39 +3,49 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import handleNewBooking from "@calcom/features/bookings/lib/handleNewBooking";
 import type { BookingResponse, RecurringBookingCreateBody } from "@calcom/features/bookings/types";
+import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
+import getIP from "@calcom/lib/getIP";
 import { defaultResponder } from "@calcom/lib/server";
 import type { AppsStatus } from "@calcom/types/Calendar";
 
 // @TODO: Didn't look at the contents of this function in order to not break old booking page.
 
 async function handler(req: NextApiRequest & { userId?: number }, res: NextApiResponse) {
+  const userIp = getIP(req);
+
+  await checkRateLimitAndThrowError({
+    rateLimitingType: "core",
+    identifier: userIp,
+  });
   const data: RecurringBookingCreateBody[] = req.body;
   const session = await getServerSession({ req, res });
   const createdBookings: BookingResponse[] = [];
   const allRecurringDates: string[] = data.map((booking) => booking.start);
-  let appsStatus: AppsStatus[] | undefined = undefined;
+  const appsStatus: AppsStatus[] | undefined = undefined;
 
   /* To mimic API behavior and comply with types */
   req.userId = session?.user?.id || -1;
+  const numSlotsToCheckForAvailability = 2;
 
-  // Reversing to accumulate results for noEmail instances first, to then lastly, create the
-  // emailed booking taking into account accumulated results to send app status accurately
-  for (let key = data.length - 1; key >= 0; key--) {
+  for (let key = 0; key < data.length; key++) {
     const booking = data[key];
-    if (key === 0) {
-      const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
-        .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
-        .reduce((prev, curr) => {
-          if (prev[curr.type]) {
-            prev[curr.type].failures += curr.failures;
-            prev[curr.type].success += curr.success;
-          } else {
-            prev[curr.type] = curr;
-          }
-          return prev;
-        }, {} as { [key: string]: AppsStatus });
-      appsStatus = Object.values(calcAppsStatus);
-    }
+    // Disable AppStatus in Recurring Booking Email as it requires us to iterate backwards to be able to compute the AppsStatus for all the bookings except the very first slot and then send that slot's email with statuses
+    // It is also doubtful that how useful is to have the AppsStatus of all the bookings in the email.
+    // It is more important to iterate forward and check for conflicts for only first few bookings defined by 'numSlotsToCheckForAvailability'
+    // if (key === 0) {
+    //   const calcAppsStatus: { [key: string]: AppsStatus } = createdBookings
+    //     .flatMap((book) => (book.appsStatus !== undefined ? book.appsStatus : []))
+    //     .reduce((prev, curr) => {
+    //       if (prev[curr.type]) {
+    //         prev[curr.type].failures += curr.failures;
+    //         prev[curr.type].success += curr.success;
+    //       } else {
+    //         prev[curr.type] = curr;
+    //       }
+    //       return prev;
+    //     }, {} as { [key: string]: AppsStatus });
+    //   appsStatus = Object.values(calcAppsStatus);
+    // }
 
     const recurringEventReq: NextApiRequest & { userId?: number } = req;
 
@@ -49,6 +59,7 @@ async function handler(req: NextApiRequest & { userId?: number }, res: NextApiRe
 
     const eachRecurringBooking = await handleNewBooking(recurringEventReq, {
       isNotAnApiCall: true,
+      skipAvailabilityCheck: key >= numSlotsToCheckForAvailability,
     });
 
     createdBookings.push(eachRecurringBooking);
@@ -56,4 +67,6 @@ async function handler(req: NextApiRequest & { userId?: number }, res: NextApiRe
   return createdBookings;
 }
 
+export const handleRecurringEventBooking = handler;
+
 export default defaultResponder(handler);