refactor(console): add pro tag for mfa feature (#4815)

packages/console/src/ds-components/CardTitle/index.module.scss

@@ -5,6 +5,9 @@
 
   .title {
     color: var(--color-text);
+    display: flex;
+    align-items: center;
+    gap: _.unit(2);
   }
 
   .titleEllipsis {

packages/console/src/ds-components/CardTitle/index.tsx

@@ -1,6 +1,6 @@
 import type { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import type DangerousRaw from '../DangerousRaw';
@@ -12,6 +12,7 @@ import * as styles from './index.module.scss';
 export type Props = {
   title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
   subtitle?: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
+  titleTag?: ReactNode;
   size?: 'small' | 'medium' | 'large';
   learnMoreLink?: string;
   isWordWrapEnabled?: boolean;
@@ -24,6 +25,7 @@ export type Props = {
 function CardTitle({
   title,
   subtitle,
+  titleTag,
   size = 'large',
   isWordWrapEnabled = false,
   learnMoreLink,
@@ -35,6 +37,7 @@ function CardTitle({
     <div className={classNames(styles.container, styles[size], className)}>
       <div className={classNames(styles.title, !isWordWrapEnabled && styles.titleEllipsis)}>
         {typeof title === 'string' ? <DynamicT forKey={title} /> : title}
+        {titleTag}
       </div>
       {Boolean(subtitle ?? learnMoreLink) && (
         <div className={styles.subtitle}>

packages/console/src/pages/Mfa/PageWrapper/index.tsx

@@ -1,7 +1,11 @@
-import { type ReactNode } from 'react';
+import { conditional } from '@silverhand/essentials';
+import { useContext, type ReactNode } from 'react';
 
 import PageMeta from '@/components/PageMeta';
+import ProTag from '@/components/ProTag';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 import CardTitle from '@/ds-components/CardTitle';
+import useSubscriptionPlan from '@/hooks/use-subscription-plan';
 
 import * as styles from './index.module.scss';
 
@@ -10,10 +14,20 @@ type Props = {
 };
 
 function PageWrapper({ children }: Props) {
+  const { currentTenantId } = useContext(TenantsContext);
+  const { data: currentPlan } = useSubscriptionPlan(currentTenantId);
+  // Note: fallback to true for OSS version
+  const isMfaEnabled = currentPlan?.quota.mfaEnabled ?? true;
+
   return (
     <div className={styles.container}>
       <PageMeta titleKey="mfa.title" />
-      <CardTitle title="mfa.title" subtitle="mfa.description" className={styles.cardTitle} />
+      <CardTitle
+        title="mfa.title"
+        titleTag={conditional(!isMfaEnabled && <ProTag />)}
+        subtitle="mfa.description"
+        className={styles.cardTitle}
+      />
       {children}
     </div>
   );