feat: added /enterprise upgrade tip (#12207)

apps/web/pages/enterprise/index.tsx

@@ -0,0 +1,74 @@
+import { getLayout } from "@calcom/features/MainLayout";
+import { ShellMain } from "@calcom/features/shell/Shell";
+import { UpgradeTip } from "@calcom/features/tips";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, ButtonGroup } from "@calcom/ui";
+import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
+
+import PageWrapper from "@components/PageWrapper";
+
+export default function EnterprisePage() {
+  const { t } = useLocale();
+
+  const features = [
+    {
+      icon: <Globe className="h-5 w-5 text-red-500" />,
+      title: t("branded_subdomain"),
+      description: t("branded_subdomain_description"),
+    },
+    {
+      icon: <BarChart className="h-5 w-5 text-blue-500" />,
+      title: t("org_insights"),
+      description: t("org_insights_description"),
+    },
+    {
+      icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
+      title: t("extensive_whitelabeling"),
+      description: t("extensive_whitelabeling_description"),
+    },
+    {
+      icon: <Users className="h-5 w-5 text-orange-500" />,
+      title: t("unlimited_teams"),
+      description: t("unlimited_teams_description"),
+    },
+    {
+      icon: <CreditCard className="h-5 w-5 text-green-500" />,
+      title: t("unified_billing"),
+      description: t("unified_billing_description"),
+    },
+    {
+      icon: <Lock className="h-5 w-5 text-purple-500" />,
+      title: t("advanced_managed_events"),
+      description: t("advanced_managed_events_description"),
+    },
+  ];
+  return (
+    <div>
+      <ShellMain heading="Enterprise" subtitle={t("enterprise_description")}>
+        <UpgradeTip
+          plan="enterprise"
+          title={t("create_your_org")}
+          description={t("create_your_org_description")}
+          features={features}
+          background="/tips/enterprise"
+          buttons={
+            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+              <ButtonGroup>
+                <Button color="primary" href="https://i.cal.com/sales/enterprise?duration=25" target="_blank">
+                  {t("contact_sales")}
+                </Button>
+                <Button color="minimal" href="https://cal.com/enterprise" target="_blank">
+                  {t("learn_more")}
+                </Button>
+              </ButtonGroup>
+            </div>
+          }>
+          <>Create Org</>
+        </UpgradeTip>
+      </ShellMain>
+    </div>
+  );
+}
+
+EnterprisePage.PageWrapper = PageWrapper;
+EnterprisePage.getLayout = getLayout;

apps/web/pages/insights/index.tsx

@@ -46,6 +46,7 @@ export default function InsightsPage() {
     <div>
       <ShellMain heading="Insights" subtitle={t("insights_subtitle")}>
         <UpgradeTip
+          plan="team"
           title={t("make_informed_decisions")}
           description={t("make_informed_decisions_description")}
           features={features}

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

@@ -2098,5 +2098,20 @@
   "view_overlay_calendar_events":"View your calendar events to prevent clashed booking.",
   "lock_timezone_toggle_on_booking_page": "Lock timezone on booking page",
   "description_lock_timezone_toggle_on_booking_page" : "To lock the timezone on booking page, useful for in-person events.",
+  "branded_subdomain": "Branded Subdomain",
+  "branded_subdomain_description": "Get your own branded subdomain, such as acme.cal.com",
+  "org_insights": "Organization-wide Insights",
+  "org_insights_description": "Understand how your entire organization is spending time",
+  "extensive_whitelabeling": "Extensive Whitelabeling",
+  "extensive_whitelabeling_description": "Customize your scheduling experience with your own logo, colors, and more",
+  "unlimited_teams": "Unlimited Teams",
+  "unlimited_teams_description": "Add as many subteams as you need to your organization",
+  "unified_billing": "Unified Billing",
+  "unified_billing_description": "Add a single credit card to pay for all your team's subscriptions",
+  "advanced_managed_events": "Advanced Managed Event Types",
+  "advanced_managed_events_description": "Add a single credit card to pay for all your team's subscriptions",
+  "enterprise_description": "Upgrade to Enterprise to create your Organization",
+  "create_your_org": "Create your Organization",
+  "create_your_org_description": "Upgrade to Enterprise and receive a subdomain, unified billing, Insights, extensive whitelabeling and more",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

packages/app-store/routing-forms/pages/forms/[...appPages].tsx

@@ -174,6 +174,7 @@ export default function RoutingForms({
         CTA={hasPaidPlan && forms?.length ? <NewFormButton /> : null}
         subtitle={t("routing_forms_description")}>
         <UpgradeTip
+          plan="team"
           title={t("teams_plan_required")}
           description={t("routing_forms_are_a_great_way")}
           features={features}

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

@@ -103,6 +103,7 @@ export function TeamsListing() {
       )}
 
       <UpgradeTip
+        plan="team"
         title={t("calcom_is_better_with_team", { appName: APP_NAME })}
         description="add_your_team_members"
         features={features}

packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx

@@ -33,6 +33,7 @@ function UpgradeTeamTip() {
 
   return (
     <UpgradeTip
+      plan="team"
       title={t("calcom_is_better_with_team", { appName: APP_NAME }) as string}
       description="add_your_team_members"
       background="/tips/teams"

packages/features/tips/UpgradeTip.tsx

@@ -13,6 +13,7 @@ export function UpgradeTip({
   buttons,
   isParentLoading,
   children,
+  plan,
 }: {
   dark?: boolean;
   title: string;
@@ -24,11 +25,16 @@ export function UpgradeTip({
   /**Chldren renders when the user is in a team */
   children: JSX.Element;
   isParentLoading?: ReactNode;
+  plan: "team" | "enterprise";
 }) {
   const { t } = useLocale();
   const { isLoading, hasTeamPlan } = useHasTeamPlan();
+  const hasEnterprisePlan = false;
+  //const { isLoading , hasEnterprisePlan } = useHasEnterprisePlan();
 
-  if (hasTeamPlan) return children;
+  if (plan === "team" && hasTeamPlan) return children;
+
+  if (plan === "enterprise" && hasEnterprisePlan) return children;
 
   if (isLoading) return <>{isParentLoading}</>;
 

packages/lib/hooks/useHasPaidPlan.ts

@@ -32,4 +32,11 @@ export function useHasTeamPlan() {
   return { isLoading, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
 }
 
+export function useHasEnterprisePlan() {
+  // TODO: figure out how to get "has Enterprise / has Org" from the backend
+  const { data: hasTeamPlan, isLoading } = trpc.viewer.teams.hasTeamPlan.useQuery();
+
+  return { isLoading, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
+}
+
 export default useHasPaidPlan;