feat: add upgrade banners for teams and organizations (calcom#27650)

Author: eunjae-lee

apps/web/app/(use-page-wrapper)/(main-nav)/teams/page.tsx

@@ -1,13 +1,10 @@
-import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 import type { PageProps as ServerPageProps } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-
-import { buildLegacyRequest } from "@lib/buildLegacyCtx";
-
 import { ServerTeamsListing } from "./server-page";
 
 export const generateMetadata = async () =>
@@ -37,10 +34,14 @@ const ServerPage = async ({ searchParams: _searchParams }: ServerPageProps) => {
   }
 
   const t = await getTranslate();
-  const { Main, CTA } = await ServerTeamsListing({ searchParams, session });
+  const { Main, CTA, showHeader } = await ServerTeamsListing({ searchParams, session });
 
   return (
-    <ShellMainAppDir CTA={CTA} heading={t("teams")} subtitle={t("create_manage_teams_collaborative")}>
+    <ShellMainAppDir
+      CTA={showHeader ? CTA : null}
+      heading={showHeader ? t("teams") : undefined}
+      subtitle={showHeader ? t("create_manage_teams_collaborative") : undefined}
+      flexChildrenContainer={!showHeader}>
       {Main}
     </ShellMainAppDir>
   );

apps/web/app/(use-page-wrapper)/(main-nav)/teams/server-page.tsx

@@ -1,16 +1,13 @@
-import type { SearchParams } from "app/_types";
-import type { Session } from "next-auth";
-import { unstable_cache } from "next/cache";
-
 import { TeamRepository } from "@calcom/features/ee/teams/repositories/TeamRepository";
 import { TeamService } from "@calcom/features/ee/teams/services/teamService";
 import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
 import { ErrorWithCode } from "@calcom/lib/errors";
 import prisma from "@calcom/prisma";
 import { MembershipRole } from "@calcom/prisma/enums";
-
+import type { SearchParams } from "app/_types";
+import { unstable_cache } from "next/cache";
+import type { Session } from "next-auth";
 import { TeamsListing } from "~/ee/teams/components/TeamsListing";
-
 import { TeamsCTA } from "./CTA";
 
 const getCachedTeams = unstable_cache(
@@ -31,7 +28,11 @@ export const ServerTeamsListing = async ({
 }: {
   searchParams: SearchParams;
   session: Session;
-}) => {
+}): Promise<{
+  Main: JSX.Element;
+  CTA: JSX.Element | null;
+  showHeader: boolean;
+}> => {
   const token = Array.isArray(searchParams?.token) ? searchParams.token[0] : searchParams?.token;
   const autoAccept = Array.isArray(searchParams?.autoAccept)
     ? searchParams.autoAccept[0]
@@ -60,6 +61,15 @@ export const ServerTeamsListing = async ({
   const userProfile = session?.user?.profile;
   const orgId = userProfile?.organizationId ?? session?.user.org?.id;
 
+  // Filter to get accepted non-organization teams (same logic as TeamsListing)
+  const acceptedTeams = teams.filter((m) => m.accepted && !m.isOrganization);
+
+  // Check if user has a team plan (any accepted team with a slug)
+  const hasTeamPlan = teams.some((team) => team.accepted === true && team.slug !== null);
+
+  // Show header unless we're showing the upgrade banner (no teams and no team plan)
+  const showHeader = acceptedTeams.length > 0 || hasTeamPlan;
+
   const permissionCheckService = new PermissionCheckService();
   const canCreateTeam = orgId
     ? await permissionCheckService.checkPermission({
@@ -84,5 +94,6 @@ export const ServerTeamsListing = async ({
       />
     ),
     CTA: !orgId || canCreateTeam ? <TeamsCTA /> : null,
+    showHeader,
   };
 };

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx

@@ -5,14 +5,12 @@ import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-for
 import { FilterResults } from "~/filters/components/FilterResults";
 import { TeamsFilter } from "~/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { ArrowButton } from "@calcom/ui/components/arrow-button";
 import { Badge } from "@calcom/ui/components/badge";
-import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { List, ListLinkItem } from "@calcom/ui/components/list";
@@ -26,24 +24,15 @@ import {
   FormActionsDropdown,
   FormActionsProvider,
 } from "@calcom/web/components/apps/routing-forms/FormActions";
-import {
-  ChartBarIcon,
-  CircleCheckIcon,
-  DownloadIcon,
-  FileTextIcon,
-  MailIcon,
-  ShuffleIcon,
-} from "@coss/ui/icons";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import posthog from "posthog-js";
 import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
-import { useHasPaidPlan } from "~/billing/hooks/useHasPaidPlan";
+import { useHasPaidPlan, useHasTeamPlan } from "~/billing/hooks/useHasPaidPlan";
 import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import { CreateButtonWithTeamsList } from "~/ee/teams/components/createButton/CreateButtonWithTeamsList";
 import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
 import { ShellMain } from "~/shell/Shell";
-import { UpgradeTip } from "~/shell/UpgradeTip";
 
 function NewFormButton({ setNewFormDialogState }: { setNewFormDialogState: SetNewFormDialogState }) {
   const { t } = useLocale();
@@ -66,6 +55,7 @@ function NewFormButton({ setNewFormDialogState }: { setNewFormDialogState: SetNe
 export default function RoutingForms({ appUrl }: { appUrl: string }) {
   const { t } = useLocale();
   const { hasPaidPlan } = useHasPaidPlan();
+  const { hasTeamPlan, isPending: isPendingTeamPlan } = useHasTeamPlan();
   const routerQuery = useRouterQuery();
   const hookForm = useFormContext<RoutingFormWithResponseCount>();
   const utils = trpc.useUtils();
@@ -95,38 +85,6 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
   const [newFormDialogState, setNewFormDialogState] = useState<NewFormDialogState>(null);
 
   const forms = queryRes.data?.filtered;
-  const features = [
-    {
-      icon: <FileTextIcon className="h-5 w-5 text-orange-500" />,
-      title: t("create_your_first_form"),
-      description: t("create_your_first_form_description"),
-    },
-    {
-      icon: <ShuffleIcon className="h-5 w-5 text-lime-500" />,
-      title: t("create_your_first_route"),
-      description: t("route_to_the_right_person"),
-    },
-    {
-      icon: <ChartBarIcon className="h-5 w-5 text-blue-500" />,
-      title: t("reporting"),
-      description: t("reporting_feature"),
-    },
-    {
-      icon: <CircleCheckIcon className="h-5 w-5 text-teal-500" />,
-      title: t("test_routing_form"),
-      description: t("test_preview_description"),
-    },
-    {
-      icon: <MailIcon className="h-5 w-5 text-yellow-500" />,
-      title: t("routing_forms_send_email_owner"),
-      description: t("routing_forms_send_email_owner_description"),
-    },
-    {
-      icon: <DownloadIcon className="h-5 w-5 text-violet-500" />,
-      title: t("download_responses"),
-      description: t("download_responses_description"),
-    },
-  ];
 
   async function moveRoutingForm(index: number, increment: 1 | -1) {
     const types = forms?.map((type) => {
@@ -162,25 +120,8 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
           ) : null
         }
         subtitle={t("routing_forms_description")}>
-        <UpgradeTip
-          plan="team"
-          title={t("routing_that_grows_with_you")}
-          description={t("routing_forms_upgrade_description")}
-          features={features}
-          background="/tips/routing-forms"
-          isParentLoading={<SkeletonLoaderTeamList />}
-          buttons={
-            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
-              <ButtonGroup>
-                <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
-                  {t("get_started")}
-                </Button>
-                <Button color="minimal" href="https://cal.com/routing" target="_blank">
-                  {t("learn_more")}
-                </Button>
-              </ButtonGroup>
-            </div>
-          }>
+        {isPendingTeamPlan && <SkeletonLoaderTeamList />}
+        {!isPendingTeamPlan && hasTeamPlan && (
           <FormActionsProvider
             appUrl={appUrl}
             newFormDialogState={newFormDialogState}
@@ -340,7 +281,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
               </FilterResults>
             </div>
           </FormActionsProvider>
-        </UpgradeTip>
+        )}
       </ShellMain>
     </LicenseRequired>
   );

apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/page.tsx

@@ -1,5 +1,9 @@
+import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
+import { MembershipRepository } from "@calcom/features/membership/repositories/MembershipRepository";
+import { FullscreenUpgradeBannerForRoutingFormPage } from "@calcom/web/modules/billing/upgrade-banners/FullscreenUpgradeBannerForRoutingFormPage";
+import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 import { _generateMetadata } from "app/_utils";
-
+import { cookies, headers } from "next/headers";
 import Forms from "./Forms";
 
 export const generateMetadata = async ({ params }: { params: Promise<{ pages: string[] }> }) => {
@@ -15,6 +19,14 @@ export const generateMetadata = async ({ params }: { params: Promise<{ pages: st
 };
 
 const ServerPage = async () => {
+  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
+  const userId = session?.user?.id;
+  const hasTeamPlan = userId && (await MembershipRepository.hasAnyAcceptedMembershipByUserId(userId));
+
+  if (!hasTeamPlan) {
+    return <FullscreenUpgradeBannerForRoutingFormPage />;
+  }
+
   return <Forms appUrl="/routing" />;
 };
 

apps/web/app/(use-page-wrapper)/insights/call-history/page.tsx

@@ -1,6 +1,8 @@
-import { _generateMetadata } from "app/_utils";
-
+import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import InsightsCallHistoryPage from "~/insights/views/insights-call-history-view";
+import Shell from "~/shell/Shell";
 
 import { checkInsightsPagePermission } from "../checkInsightsPagePermission";
 
@@ -16,5 +18,16 @@ export const generateMetadata = async () =>
 export default async function Page() {
   await checkInsightsPagePermission();
 
-  return <InsightsCallHistoryPage />;
+  const t = await getTranslate();
+
+  return (
+    <Shell withoutMain={true}>
+      <ShellMainAppDir
+        heading={t("insights")}
+        subtitle={t("insights_subtitle")}
+        actions={<div className={`flex items-center gap-2 ${CTA_CONTAINER_CLASS_NAME}`} />}>
+        <InsightsCallHistoryPage />
+      </ShellMainAppDir>
+    </Shell>
+  );
 }

apps/web/app/(use-page-wrapper)/insights/getInsightsUpgradeBanner.tsx

@@ -0,0 +1,18 @@
+import { MembershipRepository } from "@calcom/features/membership/repositories/MembershipRepository";
+import { FullscreenUpgradeBannerForInsightsPage } from "@calcom/web/modules/billing/upgrade-banners/FullscreenUpgradeBannerForInsightsPage";
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
+import Shell from "~/shell/Shell";
+
+export async function getInsightsUpgradeBanner(userId: number) {
+  const hasMembership = await MembershipRepository.hasAnyAcceptedMembershipByUserId(userId);
+
+  if (hasMembership) return null;
+
+  return (
+    <Shell withoutMain={true}>
+      <ShellMainAppDir>
+        <FullscreenUpgradeBannerForInsightsPage />
+      </ShellMainAppDir>
+    </Shell>
+  );
+}

apps/web/app/(use-page-wrapper)/insights/layout.tsx

@@ -1,10 +1,13 @@
-import { _generateMetadata } from "app/_utils";
-
+import { CTA_CONTAINER_CLASS_NAME } from "@calcom/features/data-table/lib/utils";
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
 import prisma from "@calcom/prisma";
-
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { ShellMainAppDir } from "app/(use-page-wrapper)/(main-nav)/ShellMainAppDir";
 import InsightsPage from "~/insights/views/insights-view";
+import Shell from "~/shell/Shell";
 
 import { checkInsightsPagePermission } from "./checkInsightsPagePermission";
+import { getInsightsUpgradeBanner } from "./getInsightsUpgradeBanner";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
@@ -15,17 +18,26 @@ export const generateMetadata = async () =>
     "/insights"
   );
 
-const ServerPage = async () => {
+export default async function Page() {
   const session = await checkInsightsPagePermission();
 
-  const { timeZone } = await prisma.user.findUniqueOrThrow({
-    where: { id: session?.user.id ?? -1 },
-    select: {
-      timeZone: true,
-    },
-  });
+  const banner = await getInsightsUpgradeBanner(session.user.id);
+  if (banner) return banner;
 
-  return <InsightsPage timeZone={timeZone} />;
-};
+  const t = await getTranslate();
 
-export default ServerPage;
+  const userRepository = new UserRepository(prisma);
+  const user = await userRepository.getTimeZoneAndDefaultScheduleId({ userId: session.user.id });
+  const timeZone = user?.timeZone ?? "UTC";
+
+  return (
+    <Shell withoutMain={true}>
+      <ShellMainAppDir
+        heading={t("insights")}
+        subtitle={t("insights_subtitle")}
+        actions={<div className={`flex items-center gap-2 ${CTA_CONTAINER_CLASS_NAME}`} />}>
+        <InsightsPage timeZone={timeZone} />
+      </ShellMainAppDir>
+    </Shell>
+  );
+}