Update package.json

Co-authored-by: alannnc <alannnc@gmail.com>

.devcontainer/devcontainer.json

@@ -0,0 +1,42 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/docker-outside-of-docker
+{
+  "name": "Docker outside of Docker",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/base:bullseye",
+
+  "features": {
+    "ghcr.io/devcontainers/features/docker-from-docker:1": {
+      "version": "latest",
+      "enableNonRootDocker": "true",
+      "moby": "true"
+    },
+    "ghcr.io/devcontainers/features/node:1": {},
+    "ghcr.io/devcontainers-contrib/features/npm-package:1": {},
+    "ghcr.io/devcontainers-contrib/features/jest:2": {},
+    "ghcr.io/devcontainers-contrib/features/prisma:2": {},
+    "ghcr.io/guiyomh/features/vim:0": {}
+  },
+
+  // Use this environment variable if you need to bind mount your local source code into a new container.
+  "remoteEnv": {
+    "LOCAL_WORKSPACE_FOLDER": "${localWorkspaceFolder}"
+  },
+
+  "hostRequirements": {
+    "cpus": 4,
+    "memory": "8gb"
+  },
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "./deploy/install.sh"
+
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Configure tool-specific properties.
+  // "customizations": {},
+
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  // "remoteUser": "root"
+}

.devcontainer/first-run-notice.txt

@@ -0,0 +1 @@
+🚀 Welcome to Cal.com! Try typing 'yarn dx' to get a quick dev envionment.

README.md

@@ -293,6 +293,10 @@ Currently Vercel Pro Plan is required to be able to Deploy this application with
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com&env=DATABASE_URL,NEXT_PUBLIC_WEBAPP_URL,NEXTAUTH_URL,NEXTAUTH_SECRET,CRON_API_KEY,CALENDSO_ENCRYPTION_KEY&envDescription=See%20all%20available%20env%20vars&envLink=https%3A%2F%2Fgithub.com%2Fcalcom%2Fcal.com%2Fblob%2Fmain%2F.env.example&project-name=cal&repo-name=cal.com&build-command=cd%20../..%20%26%26%20yarn%20build&root-directory=apps%2Fweb%2F)
 
+### Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/calcom/docker)
+
 <!-- ROADMAP -->
 
 ## Roadmap
@@ -353,7 +357,6 @@ following
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
 
-
 ### Obtaining Zoom Client ID and Secret
 
 1. Open [Zoom Marketplace](https://marketplace.zoom.us/) and sign in with your Zoom account.

apps/web/.nvmrc

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

apps/web/components/apps/App.tsx

@@ -11,9 +11,7 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
-
-import HeadSeo from "@components/seo/head-seo";
+import { Button, Icon, Shell, showToast, SkeletonButton, SkeletonText, HeadSeo } from "@calcom/ui";
 
 const Component = ({
   name,

apps/web/components/apps/layouts/AppsLayout.tsx

@@ -3,11 +3,7 @@ import { useRouter } from "next/router";
 import React, { ComponentProps } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon } from "@calcom/ui";
-
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
+import { EmptyScreen, Icon, Shell, HorizontalTabs, HorizontalTabItemProps } from "@calcom/ui";
 
 const tabs: HorizontalTabItemProps[] = [
   {

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

@@ -3,11 +3,9 @@ import React, { ComponentProps } from "react";
 import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavigation";
 import { InstalledAppVariants } from "@calcom/app-store/utils";
 import { trpc } from "@calcom/trpc/react";
-
-import { Icon } from "../../../components/icon";
-import Shell from "../Shell";
-import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
-import type { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
+import { Icon, Shell } from "@calcom/ui";
+import type { HorizontalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/HorizontalTabItem";
+import type { VerticalTabItemProps } from "@calcom/ui/v2/core/navigation/tabs/VerticalTabItem";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {

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

@@ -2,9 +2,9 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import React, { ComponentProps, useEffect } from "react";
 
-import { ErrorBoundary } from "../../..";
-import Shell from "../Shell";
-import SettingsLayout from "./SettingsLayout";
+import SettingsLayout from "@calcom/features/settings/layouts/SettingsLayout";
+import { ErrorBoundary, Shell } from "@calcom/ui";
+
 import { UserPermissionRole } from ".prisma/client";
 
 export default function AdminLayout({

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

@@ -28,7 +28,7 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
+import { Icon, HeadSeo } from "@calcom/ui";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -37,7 +37,6 @@ import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
 import BookingDescription from "@components/booking/BookingDescription";
 import TimeOptions from "@components/booking/TimeOptions";
-import { HeadSeo } from "@components/seo/head-seo";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";

apps/web/components/layouts/WizardLayout.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Toaster } from "react-hot-toast";
 
-import { StepCard, Steps } from "../../..";
+import { StepCard, Steps } from "@calcom/ui";
 
 export default function WizardLayout({
   children,

apps/web/components/layouts/_README.md

@@ -0,0 +1,4 @@
+We don't have many layouts currently however, if they are relevant to a features - please put them in their relvant component folder
+in `web/components` if you believe they will be reused in other apps please place them in `packages/features/[feature]`
+
+Thanks Sean 🔥

apps/web/components/ui/AuthContainer.tsx

@@ -1,11 +1,9 @@
 import classNames from "classnames";
 
 import { APP_NAME, LOGO } from "@calcom/lib/constants";
+import { Credits, HeadSeo } from "@calcom/ui";
 
 import Loader from "@components/Loader";
-import { HeadSeo } from "@components/seo/head-seo";
-
-import Credits from "../../../../packages/ui/v2/core/Credits";
 
 interface Props {
   title: string;

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

apps/web/pages/404.tsx

@@ -4,12 +4,10 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
-import { Icon } from "@calcom/ui";
+import { Icon, HeadSeo } from "@calcom/ui";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
-import { HeadSeo } from "@components/seo/head-seo";
-
 import { ssgInit } from "@server/lib/ssg";
 
 export default function Custom404() {

apps/web/pages/[user].tsx

@@ -27,7 +27,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Icon } from "@calcom/ui";
+import { Icon, HeadSeo } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
@@ -37,7 +37,6 @@ import { AvatarSSR } from "@components/ui/AvatarSSR";
 
 import { ssrInit } from "@server/lib/ssr";
 
-const HeadSeo = dynamic(() => import("@components/seo/head-seo"));
 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
   const { users, profile, eventTypes, isDynamicGroup, dynamicNames, dynamicUsernames, isSingleUser } = props;
   const [user] = users; //To be used when we only have a single user, not dynamic group

apps/web/pages/apps/index.tsx

@@ -7,7 +7,9 @@ import { getSession } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/client";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { AllApps, AppsLayout, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+import { AllApps, AppStoreCategories, Icon, TextField, TrendingAppsSlider } from "@calcom/ui";
+
+import AppsLayout from "@components/apps/layouts/AppsLayout";
 
 import { ssgInit } from "@server/lib/ssg";
 

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

@@ -14,7 +14,6 @@ import {
   Button,
   EmptyScreen,
   Icon,
-  InstalledAppsLayout,
   List,
   ShellSubHeading,
   AppSkeletonLoader as SkeletonLoader,
@@ -24,6 +23,7 @@ import { QueryCell } from "@lib/QueryCell";
 
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
 import IntegrationListItem from "@components/apps/IntegrationListItem";
+import InstalledAppsLayout from "@components/apps/layouts/InstalledAppsLayout";
 
 function ConnectOrDisconnectIntegrationButton(props: {
   credentialIds: number[];
@@ -32,7 +32,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   installed?: boolean;
   invalidCredentialIds?: number[];
 }) {
-  const { type, credentialIds, isGlobal, installed, invalidCredentialIds } = props;
+  const { type, credentialIds, isGlobal, installed } = props;
   const { t } = useLocale();
   const [credentialId] = credentialIds;
 

apps/web/pages/auth/verify.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 import { useEffect, useState, useRef } from "react";
 import z from "zod";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
 
@@ -110,7 +110,7 @@ export default function Verify() {
             ? "Your payment failed"
             : sessionId
             ? "Payment successful!"
-            : "Verify your email" + " | Cal.com"}
+            : "Verify your email" + " | " + APP_NAME}
         </title>
       </Head>
       <div className="flex min-h-screen flex-col items-center justify-center px-6">

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

@@ -35,14 +35,13 @@ import { localStorage } from "@calcom/lib/webstorage";
 import prisma, { baseUserSelect } from "@calcom/prisma";
 import { Prisma } from "@calcom/prisma/client";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Button, EmailInput, Icon } from "@calcom/ui";
+import { Button, EmailInput, Icon, HeadSeo } from "@calcom/ui";
 
 import { timeZone } from "@lib/clock";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import CancelBooking from "@components/booking/CancelBooking";
 import EventReservationSchema from "@components/schemas/EventReservationSchema";
-import { HeadSeo } from "@components/seo/head-seo";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/admin/apps/[category].tsx

@@ -2,7 +2,9 @@ import { GetServerSidePropsContext } from "next";
 
 import AdminAppsList from "@calcom/features/apps/AdminAppsList";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -11,7 +13,7 @@ function AdminAppsView() {
   return (
     <>
       <Meta title={t("apps")} description={t("admin_apps_description")} />
-      <AdminAppsList baseURL="/settings/admin/apps" className="w-0" />
+      <AdminAppsList baseURL="/settings/admin/apps" />
     </>
   );
 }

apps/web/pages/settings/admin/apps/index.tsx

@@ -0,0 +1,2 @@
+export { getServerSideProps } from "./[category]";
+export { default } from "./[category]";

apps/web/pages/settings/admin/impersonation.tsx

@@ -3,7 +3,9 @@ import { signIn } from "next-auth/react";
 import { useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, getAdminLayout as getLayout, Meta, TextField } from "@calcom/ui";
+import { Button, Meta, TextField } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/admin/index.tsx

@@ -1,6 +1,8 @@
 import { GetServerSidePropsContext } from "next";
 
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/admin/users.tsx

@@ -1,7 +1,9 @@
 import { GetServerSidePropsContext } from "next";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getAdminLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
+
+import { getLayout } from "@components/auth/layouts/AdminLayout";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/billing/index.tsx

@@ -3,11 +3,12 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import { HelpScout, useChat } from "react-live-chat-loader";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
+import { Button, Icon, Meta } from "@calcom/ui";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/developer/api-keys.tsx

@@ -5,6 +5,7 @@ import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import ApiKeyDialogForm from "@calcom/features/ee/api-keys/components/ApiKeyDialogForm";
 import ApiKeyListItem from "@calcom/features/ee/api-keys/components/ApiKeyListItem";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -13,7 +14,6 @@ import {
   Dialog,
   DialogContent,
   EmptyScreen,
-  getSettingsLayout as getLayout,
   Icon,
   Meta,
   AppSkeletonLoader as SkeletonLoader,

apps/web/pages/settings/my-account/appearance.tsx

@@ -2,6 +2,7 @@ import { GetServerSidePropsContext } from "next";
 import { useSession } from "next-auth/react";
 import { Controller, useForm } from "react-hook-form";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -10,7 +11,6 @@ import {
   Button,
   ColorPicker,
   Form,
-  getSettingsLayout as getLayout,
   Meta,
   showToast,
   SkeletonButton,

apps/web/pages/settings/my-account/calendars.tsx

@@ -6,6 +6,7 @@ import { Fragment } from "react";
 
 import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
 import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector";
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -13,7 +14,6 @@ import {
   Badge,
   Button,
   EmptyScreen,
-  getSettingsLayout as getLayout,
   Icon,
   List,
   ListItem,

apps/web/pages/settings/my-account/conferencing.tsx

@@ -1,6 +1,7 @@
 import { GetServerSidePropsContext } from "next";
 import { useState } from "react";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -13,7 +14,6 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  getSettingsLayout as getLayout,
   Icon,
   List,
   ListItem,

apps/web/pages/settings/my-account/general.tsx

@@ -3,12 +3,12 @@ import { useRouter } from "next/router";
 import { useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import {
   Button,
   Form,
-  getSettingsLayout as getLayout,
   Label,
   Meta,
   Select,

apps/web/pages/settings/my-account/profile.tsx

@@ -5,6 +5,7 @@ import { signOut } from "next-auth/react";
 import { BaseSyntheticEvent, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { ErrorCode } from "@calcom/lib/auth";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -21,7 +22,6 @@ import {
   DialogFooter,
   DialogTrigger,
   Form,
-  getSettingsLayout as getLayout,
   Icon,
   ImageUploader,
   Label,

apps/web/pages/settings/security/impersonation.tsx

@@ -1,18 +1,10 @@
 import { GetServerSidePropsContext } from "next";
 import { useForm } from "react-hook-form";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Form,
-  getSettingsLayout as getLayout,
-  Label,
-  Meta,
-  showToast,
-  Skeleton,
-  Switch,
-} from "@calcom/ui";
+import { Button, Form, Label, Meta, showToast, Skeleton, Switch } from "@calcom/ui";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/security/password.tsx

@@ -3,10 +3,11 @@ import { GetServerSidePropsContext } from "next";
 import { Trans } from "next-i18next";
 import { useForm } from "react-hook-form";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { identityProviderNameMap } from "@calcom/lib/auth";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form, getSettingsLayout as getLayout, Meta, PasswordField, showToast } from "@calcom/ui";
+import { Button, Form, Meta, PasswordField, showToast } from "@calcom/ui";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/settings/security/two-factor-auth.tsx

@@ -1,17 +1,10 @@
 import { GetServerSidePropsContext } from "next";
 import { useState } from "react";
 
+import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Badge,
-  getSettingsLayout as getLayout,
-  Meta,
-  Switch,
-  SkeletonButton,
-  SkeletonContainer,
-  SkeletonText,
-} from "@calcom/ui";
+import { Badge, Meta, Switch, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
 
 import DisableTwoFactorModal from "@components/settings/DisableTwoFactorModal";
 import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";

apps/web/pages/settings/teams/[id]/onboard-members.tsx

@@ -2,7 +2,8 @@ import Head from "next/head";
 
 import AddNewTeamMembers from "@calcom/features/ee/teams/components/AddNewTeamMembers";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WizardLayout } from "@calcom/ui";
+
+import WizardLayout from "@components/layouts/WizardLayout";
 
 const OnboardTeamMembersPage = () => {
   const { t } = useLocale();

apps/web/pages/settings/teams/new/index.tsx

@@ -3,7 +3,8 @@ import Head from "next/head";
 
 import { CreateANewTeamForm } from "@calcom/features/ee/teams/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getWizardLayout as getLayout } from "@calcom/ui";
+
+import { getLayout } from "@components/layouts/WizardLayout";
 
 import { ssrInit } from "@server/lib/ssr";
 

apps/web/pages/signup.tsx

@@ -8,8 +8,7 @@ import { isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Alert, Button, EmailField, PasswordField, TextField } from "@calcom/ui";
-import { HeadSeo } from "@calcom/web/components/seo/head-seo";
+import { Alert, Button, EmailField, PasswordField, TextField, HeadSeo } from "@calcom/ui";
 import { asStringOrNull } from "@calcom/web/lib/asStringOrNull";
 import { WEBAPP_URL } from "@calcom/web/lib/config/constants";
 import prisma from "@calcom/web/lib/prisma";

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

@@ -12,12 +12,11 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Avatar, Button, Icon } from "@calcom/ui";
+import { Avatar, Button, Icon, HeadSeo } from "@calcom/ui";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
-import { HeadSeo } from "@components/seo/head-seo";
 import Team from "@components/team/screens/Team";
 import AvatarGroup from "@components/ui/AvatarGroup";
 

apps/web/pages/teams/index.tsx

@@ -18,7 +18,7 @@ function Teams() {
           size="fab"
           StartIcon={Icon.FiPlus}
           type="button"
-          href={`${WEBAPP_URL}/settings/teams/new?returnTo=/teams`}>
+          href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
           {t("new")}
         </Button>
       }>

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

@@ -4,7 +4,7 @@ import { getSession } from "next-auth/react";
 import Head from "next/head";
 import { useEffect } from "react";
 
-import { SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants";
+import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import { inferSSRProps } from "@calcom/types/inferSSRProps";
@@ -48,18 +48,18 @@ export default function JoinCall(props: JoinCallPageProps) {
   return (
     <>
       <Head>
-        <title>Cal.com Video</title>
-        <meta name="title" content="Cal.com Video" />
+        <title>{APP_NAME} Video</title>
+        <meta name="title" content={APP_NAME + " Video"} />
         <meta name="description" content={t("quick_video_meeting")} />
         <meta property="og:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="og:type" content="website" />
         <meta property="og:url" content={`${WEBSITE_URL}/video`} />
-        <meta property="og:title" content="Cal.com Video" />
+        <meta property="og:title" content={APP_NAME + " Video"} />
         <meta property="og:description" content={t("quick_video_meeting")} />
         <meta property="twitter:image" content={SEO_IMG_OGIMG_VIDEO} />
         <meta property="twitter:card" content="summary_large_image" />
         <meta property="twitter:url" content={`${WEBSITE_URL}/video`} />
-        <meta property="twitter:title" content="Cal.com Video" />
+        <meta property="twitter:title" content={APP_NAME + " Video"} />
         <meta property="twitter:description" content={t("quick_video_meeting")} />
       </Head>
       <div style={{ zIndex: 2, position: "relative" }}>

apps/web/pages/video/meeting-ended/[uid].tsx

@@ -4,12 +4,10 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
-import { Button, Icon } from "@calcom/ui";
+import { Button, Icon, HeadSeo } from "@calcom/ui";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
-import { HeadSeo } from "@components/seo/head-seo";
-
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
 

apps/web/pages/video/meeting-not-started/[uid].tsx

@@ -5,9 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, Icon } from "@calcom/ui";
-
-import { HeadSeo } from "@components/seo/head-seo";
+import { Button, Icon, HeadSeo } from "@calcom/ui";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();

apps/web/pages/video/no-meeting-found.tsx

@@ -1,7 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
-
-import { HeadSeo } from "@components/seo/head-seo";
+import { Button, Icon, HeadSeo } from "@calcom/ui";
 
 export default function NoMeetingFound() {
   const { t } = useLocale();

apps/web/public/static/locales/ar/common.json

@@ -457,6 +457,7 @@
   "email_address": "عنوان البريد الإلكتروني",
   "enter_valid_email": "يرجى إدخال بريد إلكتروني صالح",
   "location": "الموقع",
+  "in_person_attendee_address": "شخصيًا (عنوان من سيحضر)",
   "yes": "نعم",
   "no": "لا",
   "additional_notes": "ملاحظات إضافية",

apps/web/public/static/locales/cs/common.json

@@ -457,6 +457,7 @@
   "email_address": "E-mailová adresa",
   "enter_valid_email": "Zadejte platný e-mail",
   "location": "Místo",
+  "in_person_attendee_address": "Osobně (adresa účastníka)",
   "yes": "ano",
   "no": "ne",
   "additional_notes": "Doplňující poznámky",

apps/web/public/static/locales/de/common.json

@@ -454,7 +454,7 @@
   "additional_guests": "+ Weitere Gäste",
   "your_name": "Ihr Name",
   "email_address": "E-Mail Adresse",
-  "enter_valid_email": "Bitte geben Sie eine gültige E-Mail-Adresse ein",
+  "enter_valid_email": "Bitte geben Sie eine gültige Emaildresse ein",
   "location": "Ort",
   "address": "Adresse",
   "enter_address": "Geben Sie eine Adresse ein",
@@ -464,7 +464,7 @@
   "additional_notes": "Zusätzliche Notizen",
   "booking_fail": "Termin konnte nicht gebucht werden.",
   "reschedule_fail": "Termin konnte nicht neugeplant werden.",
-  "share_additional_notes": "Teilen Sie uns weitere Informationen mit, die zur Vorbereitung des Termins hilfreich sind.",
+  "share_additional_notes": "Bitten teilen Sie Notizen zur Vorbereitung des Termins, falls nötig.",
   "booking_confirmation": "Bestätigen Sie {{eventTypeTitle}} mit {{profileName}}",
   "booking_reschedule_confirmation": "Planen Sie Ihr {{eventTypeTitle}} mit {{profileName}} um",
   "in_person_meeting": "Vor-Ort-Termin",

apps/web/public/static/locales/es/common.json

@@ -457,6 +457,7 @@
   "email_address": "Email",
   "enter_valid_email": "Ingresa un correo electrónico válido",
   "location": "Ubicación",
+  "in_person_attendee_address": "En persona (dirección del asistente)",
   "yes": "Sí",
   "no": "No",
   "additional_notes": "Notas Adicionales",

apps/web/public/static/locales/fr/common.json

@@ -457,6 +457,7 @@
   "email_address": "Adresse e-mail",
   "enter_valid_email": "Veuillez saisir une adresse e-mail valide",
   "location": "Localisation",
+  "in_person_attendee_address": "En personne (adresse du participant)",
   "yes": "oui",
   "no": "non",
   "additional_notes": "Notes additionnelles",

apps/web/public/static/locales/he/common.json

@@ -457,6 +457,7 @@
   "email_address": "כתובת דוא\"ל",
   "enter_valid_email": "יש להזין כתובת דוא״ל תקינה",
   "location": "מיקום",
+  "in_person_attendee_address": "פנים-אל-פנים (הכתובת של המשתתף/ת)",
   "yes": "כן",
   "no": "לא",
   "additional_notes": "הערות נוספות",

apps/web/public/static/locales/it/common.json

@@ -457,6 +457,7 @@
   "email_address": "Indirizzo email",
   "enter_valid_email": "Immettere un indirizzo e-mail valido",
   "location": "Luogo",
+  "in_person_attendee_address": "Di persona (indirizzo del partecipante)",
   "yes": "sì",
   "no": "no",
   "additional_notes": "Note aggiuntive",

apps/web/public/static/locales/ja/common.json

@@ -457,6 +457,7 @@
   "email_address": "メールアドレス",
   "enter_valid_email": "有効なメールアドレスを入力してください",
   "location": "所在地",
+  "in_person_attendee_address": "対面（出席者のアドレス）",
   "yes": "はい",
   "no": "いいえ",
   "additional_notes": "追加メモ",

apps/web/public/static/locales/ko/common.json

@@ -457,6 +457,7 @@
   "email_address": "이메일 주소",
   "enter_valid_email": "유효한 이메일을 입력하세요",
   "location": "위치",
+  "in_person_attendee_address": "직접 방문(참석자 주소)",
   "yes": "네",
   "no": "아니요",
   "additional_notes": "추가 참고 사항",

apps/web/public/static/locales/nl/common.json

@@ -457,6 +457,7 @@
   "email_address": "E-mail adres",
   "enter_valid_email": "Voer een geldig e-mailadres in",
   "location": "Locatie",
+  "in_person_attendee_address": "Persoonlijk (adres deelnemer)",
   "yes": "ja",
   "no": "nee",
   "additional_notes": "Aanvullende notities",

apps/web/public/static/locales/no/common.json

@@ -460,6 +460,7 @@
   "email_address": "Epost adresse",
   "enter_valid_email": "Vennligst skriv inn en gyldig e-postadresse",
   "location": "Sted",
+  "in_person_attendee_address": "Personlig Oppmøte (Deltakers Adresse)",
   "yes": "ja",
   "no": "nei",
   "additional_notes": "Tilleggsinformasjon",

apps/web/public/static/locales/pl/common.json

@@ -457,6 +457,7 @@
   "email_address": "Adres e-mail",
   "enter_valid_email": "Wprowadź prawidłowy adres e-mail",
   "location": "Lokalizacja",
+  "in_person_attendee_address": "Osobiście (adres uczestnika)",
   "yes": "tak",
   "no": "nie",
   "additional_notes": "Dotatkowe uwagi",

apps/web/public/static/locales/pt-BR/common.json

@@ -457,6 +457,7 @@
   "email_address": "Endereço de e-mail",
   "enter_valid_email": "Insira um e-mail válido",
   "location": "Local",
+  "in_person_attendee_address": "Pessoalmente (endereço do participante)",
   "yes": "sim",
   "no": "não",
   "additional_notes": "Observações adicionais",

apps/web/public/static/locales/pt/common.json

@@ -457,6 +457,7 @@
   "email_address": "Endereço de email",
   "enter_valid_email": "Insira um e-mail válido",
   "location": "Localização",
+  "in_person_attendee_address": "Pessoalmente (endereço do participante)",
   "yes": "Sim",
   "no": "Não",
   "additional_notes": "Notas Adicionais",

apps/web/public/static/locales/ro/common.json

@@ -457,6 +457,7 @@
   "email_address": "Adresa de e-mail",
   "enter_valid_email": "Introduceți un e-mail valid",
   "location": "Locaţie",
+  "in_person_attendee_address": "În persoană (adresă participant)",
   "yes": "da",
   "no": "nu",
   "additional_notes": "Date suplimentare",

apps/web/public/static/locales/ru/common.json

@@ -457,6 +457,7 @@
   "email_address": "Адрес электронной почты",
   "enter_valid_email": "Укажите допустимый адрес электронной почты",
   "location": "Местоположение",
+  "in_person_attendee_address": "Лично (адрес участника)",
   "yes": "да",
   "no": "нет",
   "additional_notes": "Дополнительная информация",

apps/web/public/static/locales/sr/common.json

@@ -457,6 +457,7 @@
   "email_address": "E-pošta",
   "enter_valid_email": "Unesite važeću imejl adresu",
   "location": "Lokacija",
+  "in_person_attendee_address": "Lično (adresa polaznika)",
   "yes": "da",
   "no": "ne",
   "additional_notes": "Dodatne beleške",

apps/web/public/static/locales/sv/common.json

@@ -457,6 +457,7 @@
   "email_address": "E-postadress",
   "enter_valid_email": "Ange en giltig e-postadress",
   "location": "Plats",
+  "in_person_attendee_address": "Personligen (deltagandeadress)",
   "yes": "ja",
   "no": "nej",
   "additional_notes": "Ytterligare noteringar",

apps/web/public/static/locales/tr/common.json

@@ -457,6 +457,7 @@
   "email_address": "E-posta adresi",
   "enter_valid_email": "Lütfen geçerli bir e-posta adresi girin",
   "location": "Konum",
+  "in_person_attendee_address": "Şahsen (Katılımcı Adresi)",
   "yes": "evet",
   "no": "hayır",
   "additional_notes": "Ek notlar",

apps/web/public/static/locales/uk/common.json

@@ -457,6 +457,7 @@
   "email_address": "Електронна адреса",
   "enter_valid_email": "Введіть дійсну адресу електронної пошти",
   "location": "Розташування",
+  "in_person_attendee_address": "Особисто (адреса відвідувача)",
   "yes": "так",
   "no": "ні",
   "additional_notes": "Додаткові примітки",

apps/web/public/static/locales/vi/common.json

@@ -457,6 +457,7 @@
   "email_address": "Địa chỉ email",
   "enter_valid_email": "Vui lòng điền vào email hợp lệ",
   "location": "Vị trí",
+  "in_person_attendee_address": "Đích thân (địa chỉ người tham gia)",
   "yes": "có",
   "no": "không",
   "additional_notes": "Ghi chú bổ sung",

apps/web/public/static/locales/zh-CN/common.json

@@ -457,6 +457,7 @@
   "email_address": "邮箱地址",
   "enter_valid_email": "请输入有效的电子邮件",
   "location": "位置",
+  "in_person_attendee_address": "本人(参与者地址)",
   "yes": "是",
   "no": "否",
   "additional_notes": "附加备注",

apps/web/public/static/locales/zh-TW/common.json

@@ -457,6 +457,7 @@
   "email_address": "電子郵件位址",
   "enter_valid_email": "請輸入有效的電子郵件",
   "location": "地點",
+  "in_person_attendee_address": "親自赴會 (與會者地址)",
   "yes": "是",
   "no": "否",
   "additional_notes": "額外提醒",

deploy/codespaces/install.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+set -xeuf -o pipefail
+
+# exit this file if we are not in Codespaces
+if [ -z "${CODESPACES}" ]; then
+  exit 0
+fi
+
+echo "echo \"🚀 Welcome to Cal.com! Try typing 'yarn dx' to get a quick dev envionment.\"" >> ~/.bashrc

deploy/install.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+set -xeuf -o pipefail
+
+cp .env.example .env
+
+sed -i 's|NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET='"$(openssl rand -base64 32)"'|g' .env
+sed -i 's|CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY='"$(openssl rand -base64 32)"'|g' .env
+yarn
+
+./deploy/codespaces/install.sh

packages/app-store/_components/AppCategoryNavigation.tsx

@@ -20,7 +20,7 @@ const AppCategoryNavigation = ({
   fromAdmin?: boolean;
 }) => {
   const [animationRef] = useAutoAnimate<HTMLDivElement>();
-  const appCategories = useMemo(() => getAppCategories(baseURL, fromAdmin), [baseURL, fromAdmin]);
+  const appCategories = useMemo(() => getAppCategories(baseURL), [baseURL]);
 
   return (
     <div className={classNames("flex flex-col p-2 md:p-0 xl:flex-row", className)}>

packages/app-store/_utils/getAppCategories.ts

@@ -1,10 +1,13 @@
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { Icon } from "@calcom/ui";
 
 function getHref(baseURL: string, category: string, useQueryParam: boolean) {
-  return useQueryParam ? `${baseURL}&category=${category}` : `${baseURL}/${category}`;
+  const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
+  baseUrlParsed.searchParams.set("category", category);
+  return useQueryParam ? `${baseUrlParsed.toString()}` : `${baseURL}/${category}`;
 }
 
-const getAppCategories = (baseURL: string, useQueryParam = false) => {
+const getAppCategories = (baseURL: string, useQueryParam = true) => {
   return [
     {
       name: "calendar",

packages/app-store/ee/routing-forms/components/SingleForm.tsx

@@ -13,8 +13,8 @@ import {
   AppUser,
 } from "@calcom/types/AppGetServerSideProps";
 import {
+  Alert,
   Button,
-  Banner,
   Badge,
   ButtonGroup,
   Dialog,
@@ -362,14 +362,14 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
                     </Button>
                   </div>
                   {!form._count?.responses && (
-                    <Banner
-                      className="mt-6"
-                      variant="neutral"
-                      title="No Responses yet"
-                      description="Wait for some time for responses to be collected. You can go and submit the form yourself as well."
-                      Icon={Icon.FiInfo}
-                      onDismiss={() => console.log("dismissed")}
-                    />
+                    <>
+                      <Alert
+                        className="mt-6"
+                        severity="neutral"
+                        title="No responses yet"
+                        message="Wait for some time for responses to be collected. You can go and submit the form yourself as well."
+                      />
+                    </>
                   )}
                 </div>
                 <div className="w-full rounded-md border border-gray-200 p-8">

packages/emails/templates/attendee-request-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import AttendeeScheduledEmail from "./attendee-scheduled-email";
 
@@ -14,7 +16,7 @@ export default class AttendeeRequestEmail extends AttendeeScheduledEmail {
     }
 
     return {
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.calEvent.attendees[0].language.translate("booking_submitted_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/attendee-was-requested-to-reschedule-email.ts

@@ -2,6 +2,7 @@ import { createEvent, DateArray, Person } from "ics";
 
 import dayjs from "@calcom/dayjs";
 import { getManageLink } from "@calcom/lib/CalEventParser";
+import { APP_NAME } from "@calcom/lib/constants";
 import type { CalendarEvent } from "@calcom/types/Calendar";
 
 import { renderEmail } from "..";
@@ -21,7 +22,7 @@ export default class AttendeeWasRequestedToRescheduleEmail extends OrganizerSche
         filename: "event.ics",
         content: this.getiCalEventAsString(),
       },
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("requested_to_reschedule_subject_attendee", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-cancelled-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerScheduledEmail from "./organizer-scheduled-email";
 
@@ -14,7 +16,7 @@ export default class OrganizerCancelledEmail extends OrganizerScheduledEmail {
     }
 
     return {
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("event_cancelled_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-location-change-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerScheduledEmail from "./organizer-scheduled-email";
 
@@ -18,7 +20,7 @@ export default class OrganizerLocationChangeEmail extends OrganizerScheduledEmai
         filename: "event.ics",
         content: this.getiCalEventAsString(),
       },
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("location_changed_event_type_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-payment-refund-failed-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerScheduledEmail from "./organizer-scheduled-email";
 
@@ -14,7 +16,7 @@ export default class OrganizerPaymentRefundFailedEmail extends OrganizerSchedule
     }
 
     return {
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("refund_failed_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-request-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerScheduledEmail from "./organizer-scheduled-email";
 
@@ -14,7 +16,7 @@ export default class OrganizerRequestEmail extends OrganizerScheduledEmail {
     }
 
     return {
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("event_awaiting_approval_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-request-reminder-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerRequestEmail from "./organizer-request-email";
 
@@ -14,7 +16,7 @@ export default class OrganizerRequestReminderEmail extends OrganizerRequestEmail
     }
 
     return {
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("event_awaiting_approval_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-requested-to-reschedule-email.ts

@@ -2,6 +2,7 @@ import { createEvent, DateArray, Person } from "ics";
 
 import dayjs from "@calcom/dayjs";
 import { getRichDescription } from "@calcom/lib/CalEventParser";
+import { APP_NAME } from "@calcom/lib/constants";
 import type { CalendarEvent } from "@calcom/types/Calendar";
 
 import { renderEmail } from "..";
@@ -21,7 +22,7 @@ export default class OrganizerRequestedToRescheduleEmail extends OrganizerSchedu
         filename: "event.ics",
         content: this.getiCalEventAsString(),
       },
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.t("rescheduled_event_type_subject", {
         eventType: this.calEvent.type,

packages/emails/templates/organizer-rescheduled-email.ts

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 import { renderEmail } from "../";
 import OrganizerScheduledEmail from "./organizer-scheduled-email";
 
@@ -18,7 +20,7 @@ export default class OrganizerRescheduledEmail extends OrganizerScheduledEmail {
         filename: "event.ics",
         content: this.getiCalEventAsString(),
       },
-      from: `Cal.com <${this.getMailerOptions().from}>`,
+      from: `${APP_NAME} <${this.getMailerOptions().from}>`,
       to: toAddresses.join(","),
       subject: `${this.calEvent.organizer.language.translate("event_type_has_been_rescheduled_on_time_date", {
         eventType: this.calEvent.type,

packages/embeds/embed-core/README.md

@@ -31,7 +31,7 @@ And from another terminal you can run the following command to execute tests:
 yarn embed-tests-quick
 ```
 
-Note: `getEmbedIframe` and `addEmbedListeners` work as a team but they only support opening up embed in a fresh load. Opening an embed closing it and then opening another embed isn't supported yet. 
+Note: `getEmbedIframe` and `addEmbedListeners` work as a team but they only support opening up embed in a fresh load. Opening an embed closing it and then opening another embed isn't supported yet.
 
 ## Shipping to Production
 

packages/features/apps/AdminAppsList.tsx

@@ -187,7 +187,7 @@ const AdminAppsList = ({ baseURL, className }: { baseURL: string; className?: st
       <AppCategoryNavigation
         baseURL={baseURL}
         fromAdmin
-        containerClassname="w-full xl:ml-5 max-h-97 overflow-scroll"
+        containerClassname="w-full xl:mx-5 xl:w-2/3 xl:pr-5"
         className={className}>
         <AdminAppsListContainer />
       </AppCategoryNavigation>

packages/features/ee/sso/page/teams-sso-view.tsx

@@ -2,8 +2,9 @@ import { useRouter } from "next/router";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
-import { getSettingsLayout as getLayout, AppSkeletonLoader } from "@calcom/ui";
+import { AppSkeletonLoader as SkeletonLoader } from "@calcom/ui";
 
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import SAMLConfiguration from "../components/SAMLConfiguration";
 
 const SAMLSSO = () => {
@@ -25,7 +26,7 @@ const SAMLSSO = () => {
   );
 
   if (isLoading) {
-    return <AppSkeletonLoader />;
+    return <SkeletonLoader />;
   }
 
   if (!team) {

packages/features/ee/sso/page/user-sso-view.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from "next/router";
 
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
-import { getSettingsLayout as getLayout } from "@calcom/ui";
 
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import SAMLConfiguration from "../components/SAMLConfiguration";
 
 const SAMLSSO = () => {

packages/features/ee/teams/components/CreateANewTeamForm.tsx

@@ -2,6 +2,7 @@ import { useRouter } from "next/router";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
@@ -19,7 +20,9 @@ export const CreateANewTeamForm = () => {
 
   const returnToParsed = querySchema.safeParse(router.query);
 
-  const returnToParam = returnToParsed.success ? returnToParsed.data.returnTo : "/settings/teams";
+  const returnToParam =
+    (returnToParsed.success ? getSafeRedirectUrl(returnToParsed.data.returnTo) : "/settings/teams") ||
+    "/settings/teams";
 
   const newTeamFormMethods = useForm<NewTeamFormValues>();
 

packages/features/ee/teams/pages/team-appearance-view.tsx

@@ -5,7 +5,9 @@ import { Controller, useForm } from "react-hook-form";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Form, getSettingsLayout as getLayout, Meta, showToast, Switch } from "@calcom/ui";
+import { Button, Form, Meta, showToast, Switch } from "@calcom/ui";
+
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
 interface TeamAppearanceValues {
   hideBranding: boolean;

packages/features/ee/teams/pages/team-billing-view.tsx

@@ -2,7 +2,9 @@ import { useRouter } from "next/router";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, getSettingsLayout as getLayout, Icon, Meta } from "@calcom/ui";
+import { Button, Icon, Meta } from "@calcom/ui";
+
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
 const BillingView = () => {
   const { t } = useLocale();

packages/features/ee/teams/pages/team-listing-view.tsx

@@ -1,6 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { getSettingsLayout as getLayout, Meta } from "@calcom/ui";
+import { Meta } from "@calcom/ui";
 
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import { TeamsListing } from "../components";
 
 const BillingView = () => {

packages/features/ee/teams/pages/team-members-view.tsx

@@ -5,8 +5,9 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, getSettingsLayout as getLayout, Icon, Meta, showToast } from "@calcom/ui";
+import { Button, Icon, Meta, showToast } from "@calcom/ui";
 
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
 import MemberInvitationModal from "../components/MemberInvitationModal";
 import MemberListItem from "../components/MemberListItem";

packages/features/ee/teams/pages/team-profile-view.tsx

@@ -19,7 +19,6 @@ import {
   Dialog,
   DialogTrigger,
   Form,
-  getSettingsLayout as getLayout,
   Icon,
   ImageUploader,
   Label,
@@ -30,6 +29,8 @@ import {
   TextField,
 } from "@calcom/ui";
 
+import { getLayout } from "../../../settings/layouts/SettingsLayout";
+
 const regex = new RegExp("^[a-zA-Z0-9-]*$");
 
 const teamProfileFormSchema = z.object({

packages/features/ee/workflows/lib/reminders/templates/emailReminderTemplate.ts

@@ -1,4 +1,5 @@
 import dayjs from "@calcom/dayjs";
+import { APP_NAME } from "@calcom/lib/constants";
 
 const emailReminderTemplate = (
   startTime: string,
@@ -32,7 +33,7 @@ const emailReminderTemplate = (
 
   const attendeeHtml = `<div style="font-weight: bold;">Attendees:</div>You & ${attendee}<br><br>`;
 
-  const endingHtml = `This reminder was triggered by a Workflow in Cal.<br><br>_<br><br>Scheduling by Cal.com</body>`;
+  const endingHtml = `This reminder was triggered by a Workflow in Cal.<br><br>_<br><br>Scheduling by ${APP_NAME}</body>`;
 
   const templateBodyHtml = introHtml + eventHtml + dateTimeHtml + attendeeHtml + endingHtml;
 

packages/features/settings/layouts/SettingsLayout.tsx

@@ -10,14 +10,17 @@ import { HOSTED_CAL_FEATURES, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Skeleton } from "@calcom/ui";
-
-import { Badge, Button, ErrorBoundary } from "../../..";
-import { Icon } from "../../../components/icon";
-import { useMeta } from "../Meta";
-import Shell from "../Shell";
-import { VerticalTabItemProps } from "../navigation/tabs/VerticalTabItem";
-import { VerticalTabItem } from "../navigation/tabs/VerticalTabs";
+import {
+  Badge,
+  Button,
+  ErrorBoundary,
+  Icon,
+  VerticalTabItemProps,
+  VerticalTabItem,
+  Shell,
+  Skeleton,
+  useMeta,
+} from "@calcom/ui";
 
 const tabs: VerticalTabItemProps[] = [
   {
@@ -164,10 +167,10 @@ const SettingsSidebarContainer = ({
   return (
     <nav
       className={classNames(
-        "no-scrollbar fixed left-0 bottom-0 top-0 z-10 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll bg-gray-50 px-2 pb-3 transition-transform lg:sticky lg:flex",
+        "no-scrollbar fixed left-0 top-0 z-10 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll bg-gray-50 px-2 pb-3 transition-transform lg:sticky lg:flex",
         className,
         navigationIsOpenedOnMobile
-          ? "translate-x-0 opacity-100"
+          ? "opacity-0 ltr:-translate-x-full rtl:translate-x-full lg:translate-x-0 lg:opacity-100"
           : "-translate-x-full opacity-0 lg:translate-x-0 lg:opacity-100"
       )}
       aria-label="Tabs">

packages/features/tips/Tips.tsx

@@ -1,6 +1,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useState } from "react";
 
+import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 import { Card } from "@calcom/ui";
@@ -43,7 +44,7 @@ export const tips = [
     thumbnailUrl: "https://img.youtube.com/vi/0v_nQtpxC_4/0.jpg",
     mediaLink: "https://go.cal.com/payments-video",
     title: "Accept Payments",
-    description: "Charge for your time with Cal.com's Stripe App",
+    description: "Charge for your time with " + APP_NAME + "'s Stripe App",
     href: "https://app.cal.com/apps/stripe",
   },
   {

packages/features/users/components/UserV2OptInBanner.tsx

@@ -1,3 +1,5 @@
+import { APP_NAME } from "@calcom/lib/constants";
+
 function UserV2OptInBanner() {
   // Only show on client-side
   if (typeof document === "undefined") return null;
@@ -7,7 +9,7 @@ function UserV2OptInBanner() {
   if (hasV2OptInCookie)
     return (
       <p className="text-xs text-gray-400">
-        You&apos;re using the new version of Cal.com.{" "}
+        You&apos;re using the new version of {APP_NAME}.{" "}
         <a href="/api/v2-opt-in" className="text-blue-400 underline">
           Go back
         </a>
@@ -17,7 +19,7 @@ function UserV2OptInBanner() {
 
   return (
     <p className="text-xs text-gray-400">
-      Want to try the new version of Cal.com?{" "}
+      Want to try the new version of {APP_NAME}?{" "}
       <a href="/api/v2-opt-in" className="text-blue-400 underline">
         Opt-in to our v2.0 beta
       </a>

packages/features/webhooks/pages/webhook-edit-view.tsx

@@ -4,8 +4,9 @@ import z from "zod";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { getSettingsLayout as getLayout, Meta, showToast, SkeletonContainer } from "@calcom/ui";
+import { Meta, showToast, SkeletonContainer } from "@calcom/ui";
 
+import { getLayout } from "../../settings/layouts/SettingsLayout";
 import WebhookForm, { WebhookFormSubmitData } from "../components/WebhookForm";
 
 const querySchema = z.object({ id: z.string() });

packages/features/webhooks/pages/webhook-new-view.tsx

@@ -3,8 +3,9 @@ import { useRouter } from "next/router";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { getSettingsLayout as getLayout, Meta, showToast, SkeletonContainer } from "@calcom/ui";
+import { Meta, showToast, SkeletonContainer } from "@calcom/ui";
 
+import { getLayout } from "../../settings/layouts/SettingsLayout";
 import WebhookForm, { WebhookFormSubmitData } from "../components/WebhookForm";
 
 const NewWebhookView = () => {

packages/features/webhooks/pages/webhooks-view.tsx

@@ -4,8 +4,9 @@ import { Suspense } from "react";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, getSettingsLayout as getLayout, Icon, Meta, SkeletonText } from "@calcom/ui";
+import { Button, EmptyScreen, Icon, Meta, SkeletonText } from "@calcom/ui";
 
+import { getLayout } from "../../settings/layouts/SettingsLayout";
 import { WebhookListItem, WebhookListSkeleton } from "../components";
 
 const WebhooksView = () => {