calcom · PeerRich · Feb 22, 2025
diff --git a/apps/web/app/(use-page-wrapper)/enterprise/page.tsx b/apps/web/app/(use-page-wrapper)/enterprise/page.tsx
@@ -1,11 +1,11 @@
 import { _generateMetadata } from "app/_utils";
 
-import EnterprisePage from "@components/EnterprisePage";
+import UpgradeToEnterprise from "@components/UpgradePageWrapper";
 
 export const generateMetadata = async () =>
   await _generateMetadata(
-    (t) => t("create_your_org"),
+    (t) => t("enterprise_description"),
     (t) => t("create_your_org_description")
   );
 
-export default EnterprisePage;
+export default UpgradeToEnterprise;
diff --git a/apps/web/app/(use-page-wrapper)/insights/layout.tsx b/apps/web/app/(use-page-wrapper)/insights/layout.tsx
@@ -2,14 +2,14 @@ import { getTranslate } from "app/_utils";
 
 import Shell from "@calcom/features/shell/Shell";
 
-import UpgradeTipWrapper from "./UpgradeTipWrapper";
+import { UpgradeInsights } from "@components/UpgradePageWrapper";
 
 export default async function InsightsLayout({ children }: { children: React.ReactNode }) {
   const t = await getTranslate();
   return (
     <div>
       <Shell withoutMain={false} withoutSeo={true} heading={t("insights")} subtitle={t("insights_subtitle")}>
-        <UpgradeTipWrapper>{children}</UpgradeTipWrapper>
+        <UpgradeInsights>{children}</UpgradeInsights>
       </Shell>
     </div>
   );

diff --git a/apps/web/app/(use-page-wrapper)/organizations/page.tsx b/apps/web/app/(use-page-wrapper)/organizations/page.tsx
@@ -0,0 +1,13 @@
+import { _generateMetadata } from "app/_utils";
+
+import { UpgradeToOrganizations } from "@components/UpgradePageWrapper";
+
+export default function OrganizationsPage() {
+  return <UpgradeToOrganizations />;
+}
+
+export const generateMetadata = async () =>
+  await _generateMetadata(
+    (t) => t("create_your_org"),
+    (t) => t("create_your_org_description")
+  );
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/admin-api/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/admin-api/page.tsx
@@ -1,8 +1,9 @@
 import { getTranslate, _generateMetadata } from "app/_utils";
 
-import { AdminAPIView } from "@calcom/features/ee/organizations/pages/settings/admin-api";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
+import EnterprisePage from "@components/EnterprisePage";
+
 export const generateMetadata = async () =>
   await _generateMetadata(
     (t) => `${t("admin")} ${t("api_reference")}`,
@@ -17,7 +18,7 @@ const Page = async () => {
       title={`${t("admin")} ${t("api_reference")}`}
       description={t("leverage_our_api")}
       borderInShellHeader={false}>
-      <AdminAPIView />
+      <EnterprisePage />
     </SettingsHeader>
   );
 };

diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
diff --git a/apps/web/components/OrganizationsPage.tsx b/apps/web/components/OrganizationsPage.tsx
@@ -0,0 +1 @@
+"use client";
diff --git a/apps/web/components/UpgradePageWrapper.tsx b/apps/web/components/UpgradePageWrapper.tsx
@@ -0,0 +1,215 @@
+"use client";
+
+import { useSession } from "next-auth/react";
+
+import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
+import Shell from "@calcom/features/shell/Shell";
+import { UpgradeTip } from "@calcom/features/tips";
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button, Icon, ButtonGroup } from "@calcom/ui";
+
+export default function UpgradeToTeams({ children }: { children: React.ReactNode }) {
+  const { t } = useLocale();
+  const session = useSession();
+  const features = [
+    {
+      icon: <Icon name="users" className="h-5 w-5" />,
+      title: t("view_bookings_across"),
+      description: t("view_bookings_across_description"),
+    },
+    {
+      icon: <Icon name="refresh-ccw" className="h-5 w-5" />,
+      title: t("identify_booking_trends"),
+      description: t("identify_booking_trends_description"),
+    },
+    {
+      icon: <Icon name="user-plus" className="h-5 w-5" />,
+      title: t("spot_popular_event_types"),
+      description: t("spot_popular_event_types_description"),
+    },
+  ];
+
+  return (
+    <Shell heading={t("insights")} subtitle={t("insights_subtitle")} withoutSeo={true}>
+      <UpgradeTip
+        plan="team"
+        title={t("make_informed_decisions")}
+        description={t("make_informed_decisions_description")}
+        features={features}
+        background="/tips/insights"
+        buttons={
+          <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <ButtonGroup>
+              <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                {t("create_team")}
+              </Button>
+              <Button color="minimal" href="https://go.cal.com/insights" target="_blank">
+                {t("learn_more")}
+              </Button>
+            </ButtonGroup>
+          </div>
+        }>
+        {!session.data?.user ? null : children}
+      </UpgradeTip>
+    </Shell>
+  );
+}
+
+export function UpgradeInsights({ children }: { children: React.ReactNode }) {
+  const { t } = useLocale();
+  const session = useSession();
+  const features = [
+    {
+      icon: <Icon name="users" className="h-5 w-5" />,
+      title: t("view_bookings_across"),
+      description: t("view_bookings_across_description"),
+    },
+    {
+      icon: <Icon name="refresh-ccw" className="h-5 w-5" />,
+      title: t("identify_booking_trends"),
+      description: t("identify_booking_trends_description"),
+    },
+    {
+      icon: <Icon name="user-plus" className="h-5 w-5" />,
+      title: t("spot_popular_event_types"),
+      description: t("spot_popular_event_types_description"),
+    },
+  ];
+
+  return (
+    <UpgradeTip
+      plan="team"
+      title={t("make_informed_decisions")}
+      description={t("make_informed_decisions_description")}
+      features={features}
+      background="/tips/insights"
+      buttons={
+        <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+          <ButtonGroup>
+            <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
+              {t("create_team")}
+            </Button>
+            <Button color="minimal" href="https://go.cal.com/insights" target="_blank">
+              {t("learn_more")}
+            </Button>
+          </ButtonGroup>
+        </div>
+      }>
+      {!session.data?.user ? null : children}
+    </UpgradeTip>
+  );
+}
+
+export function UpgradeToEnterprise() {
+  const { t } = useLocale();
+
+  const features = [
+    {
+      icon: <Icon name="terminal" className="h-5 w-5 text-pink-500" />,
+      title: t("admin_api"),
+      description: t("leverage_our_api"),
+    },
+    {
+      icon: <Icon name="folder" className="h-5 w-5 text-red-500" />,
+      title: `SCIM & ${t("directory_sync")}`,
+      description: t("directory_sync_description"),
+    },
+    {
+      icon: <Icon name="sparkles" className="h-5 w-5 text-blue-500" />,
+      title: "Cal.ai",
+      description: t("use_cal_ai_to_make_call_description"),
+    },
+  ];
+  return (
+    <Shell heading={t("enterprise")} subtitle={t("enterprise_description")} withoutSeo={true}>
+      <LicenseRequired>
+        <div className="mt-8">
+          <UpgradeTip
+            plan="enterprise"
+            title={t("enterprise_license")}
+            description={t("create_your_enterprise_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://cal.com/sales" target="_blank">
+                    {t("contact_sales")}
+                  </Button>
+                  <Button color="minimal" href="https://cal.com/enterprise" target="_blank">
+                    {t("learn_more")}
+                  </Button>
+                </ButtonGroup>
+              </div>
+            }>
+            {/* TODO: Show your Organization */}
+          </UpgradeTip>
+        </div>
+      </LicenseRequired>
+    </Shell>
+  );
+}
+
+export function UpgradeToOrganizations() {
+  const { t } = useLocale();
+
+  const features = [
+    {
+      icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
+      title: t("branded_subdomain"),
+      description: t("branded_subdomain_description"),
+    },
+    {
+      icon: <Icon name="chart-bar" className="h-5 w-5 text-blue-500" />,
+      title: t("org_insights"),
+      description: t("org_insights_description"),
+    },
+    {
+      icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
+      title: t("extensive_whitelabeling"),
+      description: t("extensive_whitelabeling_description"),
+    },
+    {
+      icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
+      title: t("unlimited_teams"),
+      description: t("unlimited_teams_description"),
+    },
+    {
+      icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
+      title: t("unified_billing"),
+      description: t("unified_billing_description"),
+    },
+    {
+      icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
+      title: t("advanced_managed_events"),
+      description: t("advanced_managed_events_description"),
+    },
+  ];
+  return (
+    <div>
+      <Shell heading={t("organizations")} subtitle={t("organizations_description")} withoutSeo={true}>
+        <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("create_your_org")}
+                </Button>
+                <Button color="minimal" href="https://cal.com/enterprise" target="_blank">
+                  {t("learn_more")}
+                </Button>
+              </ButtonGroup>
+            </div>
+          }>
+          <>Create Org</>
+        </UpgradeTip>
+      </Shell>
+    </div>
+  );
+}
diff --git a/apps/web/modules/settings/my-account/appearance-view.tsx b/apps/web/modules/settings/my-account/appearance-view.tsx
@@ -29,7 +29,7 @@ import {
   SkeletonContainer,
   SkeletonText,
   SettingsToggle,
-  UpgradeTeamsBadge,
+  UpgradeBadge,
   useCalcomTheme,
 } from "@calcom/ui";
 
@@ -422,7 +422,7 @@ const AppearanceView = ({
             disabled={!hasPaidPlan || mutation?.isPending}
             description={t("removes_cal_branding", { appName: APP_NAME })}
             checked={hasPaidPlan ? hideBrandingValue : false}
-            Badge={<UpgradeTeamsBadge />}
+            Badge={<UpgradeBadge />}
             onCheckedChange={(checked) => {
               setHideBrandingValue(checked);
               mutation.mutate({ hideBranding: checked });

diff --git a/apps/web/public/static/locales/ar/common.json b/apps/web/public/static/locales/ar/common.json
@@ -1869,8 +1869,8 @@
   "round_robin_hosts": "مضيفون بنظام دوار",
   "minimum_round_robin_hosts_count": "عدد المضيفين المطلوب حضورهم",
   "hosts": "المضيفون",
-  "upgrade_to_enable_feature": "تحتاج إلى إنشاء فريق لتفعيل هذه الميزة. انقر هنا لإنشاء فريق.",
-  "orgs_upgrade_to_enable_feature": "تحتاج إلى الترقية إلى خطة enterprise لتفعيل هذه الميزة.",
+  "upgrade_to_team": "تحتاج إلى إنشاء فريق لتفعيل هذه الميزة. انقر هنا لإنشاء فريق.",
+  "upgrade_to_enterprise": "تحتاج إلى الترقية إلى خطة enterprise لتفعيل هذه الميزة.",
   "new_attendee": "حضور جديد",
   "awaiting_approval": "في انتظار الموافقة",
   "requires_google_calendar": "يتطلب هذا التطبيق اتصال تقويم Google",

diff --git a/apps/web/public/static/locales/az/common.json b/apps/web/public/static/locales/az/common.json
@@ -1869,8 +1869,8 @@
   "round_robin_hosts": "Round-Robin Hostlar",
   "minimum_round_robin_hosts_count": "Tələb olunan host sayı",
   "hosts": "Hostlar",
-  "upgrade_to_enable_feature": "Bu funksiyanı aktivləşdirmək üçün komanda yaratmalısınız. Komanda yaratmaq üçün buraya klikləyin.",
-  "orgs_upgrade_to_enable_feature": "Bu funksiyanı aktivləşdirmək üçün enterprise planımıza yüksəltməlisiniz.",
+  "upgrade_to_team": "Bu funksiyanı aktivləşdirmək üçün komanda yaratmalısınız. Komanda yaratmaq üçün buraya klikləyin.",
+  "upgrade_to_enterprise": "Bu funksiyanı aktivləşdirmək üçün enterprise planımıza yüksəltməlisiniz.",
   "new_attendee": "Yeni İştirakçı",
   "awaiting_approval": "Təsdiq gözləyir",
   "requires_google_calendar": "Bu tətbiq Google Calendar bağlantısı tələb edir",