feat: add banner for upgrade when using company email (#24829)

* Add banner plus mail icon

* Update MailIcon.tsx

* Update profile-view.tsx

* Fix weird line

apps/web/modules/settings/my-account/components/CompanyEmailOrganizationBanner.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+import { useFlagMap } from "@calcom/features/flags/context/provider";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+
+import { MailIcon } from "./MailIcon";
+
+type CompanyEmailOrganizationBannerProps = {
+  onDismissAction: () => void;
+};
+
+export const CompanyEmailOrganizationBanner = ({ onDismissAction }: CompanyEmailOrganizationBannerProps) => {
+  const { t } = useLocale();
+  const router = useRouter();
+  const flags = useFlagMap();
+
+  const handleLearnMore = () => {
+    const redirectPath = flags["onboarding-v3"]
+      ? "/onboarding/organization/details"
+      : "/settings/organizations/new";
+    router.push(redirectPath);
+  };
+
+  if (!flags["onboarding-v3"]) {
+    return null;
+  }
+
+  return (
+    <div className="border-subtle from-muted relative mb-6 overflow-hidden rounded-lg border bg-gradient-to-r to-transparent p-4">
+      {/* Dot grid background with fade */}
+      <svg className="pointer-events-none absolute inset-0 h-full w-full" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          {/* Dot pattern - 12px spacing */}
+          <pattern id="banner-dot-pattern" x="0" y="0" width="12" height="12" patternUnits="userSpaceOnUse">
+            <circle cx="1" cy="1" r="0.8" fill="currentColor" className="text-subtle" opacity="0.3" />
+          </pattern>
+          {/* Fade mask from left to right */}
+          <linearGradient id="banner-fade-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stopColor="white" stopOpacity="1" />
+            <stop offset="10%" stopColor="white" stopOpacity="0.4" />
+            <stop offset="100%" stopColor="white" stopOpacity="0" />
+          </linearGradient>
+          <mask id="banner-fade-mask">
+            <rect x="0" y="0" width="100%" height="100%" fill="url(#banner-fade-gradient)" />
+          </mask>
+        </defs>
+        {/* Apply pattern with mask */}
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          fill="url(#banner-dot-pattern)"
+          mask="url(#banner-fade-mask)"
+        />
+      </svg>
+
+      <div className="relative z-10 flex gap-4">
+        <div>
+          <MailIcon />
+        </div>
+        <div className="flex flex-1 flex-col gap-2">
+          <div className="flex flex-col">
+            <h3 className="text-default text-sm font-semibold">
+              {t("it_appears_you_are_using_company_email")}
+            </h3>
+            <p className="text-default text-sm">{t("explore_organizational_plan_description")}</p>
+          </div>
+          <div className="mt-2 flex gap-2">
+            <Button color="secondary" onClick={onDismissAction}>
+              {t("dismiss")}
+            </Button>
+            <Button color="primary" EndIcon="external-link" onClick={handleLearnMore}>
+              {t("upgrade")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/modules/settings/my-account/profile-view.tsx

@@ -12,6 +12,7 @@ import { z } from "zod";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
+import { isCompanyEmail } from "@calcom/features/ee/organizations/lib/utils";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 import { DisplayInfo } from "@calcom/features/users/components/UserTable/EditSheet/DisplayInfo";
@@ -46,6 +47,8 @@ import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
 import type { TRPCClientErrorLike } from "@trpc/client";
 
+import { CompanyEmailOrganizationBanner } from "./components/CompanyEmailOrganizationBanner";
+
 interface DeleteAccountValues {
   totpCode: string;
 }
@@ -72,7 +75,8 @@ type Props = {
 const ProfileView = ({ user }: Props) => {
   const { t } = useLocale();
   const utils = trpc.useUtils();
-  const { update } = useSession();
+  const session = useSession();
+  const { update } = session;
   const updateProfileMutation = trpc.viewer.me.updateProfile.useMutation({
     onSuccess: async (res) => {
       await update(res);
@@ -138,6 +142,7 @@ const ProfileView = ({ user }: Props) => {
   const [deleteAccountOpen, setDeleteAccountOpen] = useState(false);
   const [hasDeleteErrors, setHasDeleteErrors] = useState(false);
   const [deleteErrorMessage, setDeleteErrorMessage] = useState("");
+  const [isCompanyEmailAlertDismissed, setIsCompanyEmailAlertDismissed] = useState(false);
   const form = useForm<DeleteAccountValues>();
 
   const onDeleteMeSuccessMutation = async () => {
@@ -250,6 +255,14 @@ const ProfileView = ({ user }: Props) => {
     ],
   };
 
+  // Check if user should see company email alert
+  const shouldShowCompanyEmailAlert =
+    !isCompanyEmailAlertDismissed &&
+    !session.data?.user?.org?.id &&
+    !user.organization?.id &&
+    userEmail &&
+    isCompanyEmail(userEmail);
+
   return (
     <SettingsHeader
       title={t("profile")}
@@ -301,6 +314,12 @@ const ProfileView = ({ user }: Props) => {
         isCALIdentityProvider={isCALIdentityProvider}
       />
 
+      {shouldShowCompanyEmailAlert && (
+        <div className="mt-6">
+          <CompanyEmailOrganizationBanner onDismissAction={() => setIsCompanyEmailAlertDismissed(true)} />
+        </div>
+      )}
+
       <div className="border-subtle mt-6 rounded-lg rounded-b-none border border-b-0 p-6">
         <Label className="mb-0 text-base font-semibold text-red-700">{t("danger_zone")}</Label>
         <p className="text-subtle text-sm">{t("account_deletion_cannot_be_undone")}</p>

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

@@ -1692,6 +1692,8 @@
   "profile_picture": "Profile Picture",
   "upload": "Upload",
   "add_profile_photo": "Add profile photo",
+  "it_appears_you_are_using_company_email": "It appears that you are utilizing your company email.",
+  "explore_organizational_plan_description": "Explore our new organizational plan! It boosts collaboration across event types and directs lost customers to the right team member.",
   "token_address": "Token Address",
   "blockchain": "Blockchain",
   "old_password": "Old password",