feat(core,console): add paywall for hide watermark (#7917)

Author: wangsijie

packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx

@@ -1,11 +1,13 @@
 import { generateDarkColor } from '@logto/core-kit';
 import { Theme } from '@logto/schemas';
-import { useMemo, useCallback, useEffect } from 'react';
+import { useMemo, useCallback, useEffect, useContext } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import LogoAndFavicon from '@/components/ImageInputs/LogoAndFavicon';
 import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { latestProPlanId } from '@/consts/subscriptions';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 import ColorPicker from '@/ds-components/ColorPicker';
@@ -26,6 +28,8 @@ function BrandingForm() {
     control,
     formState: { errors, isDirty },
   } = useFormContext<SignInExperienceForm>();
+  const { currentSubscriptionQuota } = useContext(SubscriptionDataContext);
+  const isHideLogtoBrandingEnabled = currentSubscriptionQuota.bringYourUiEnabled;
 
   const isDarkModeEnabled = watch('color.isDarkModeEnabled');
   const primaryColor = watch('color.primaryColor');
@@ -117,10 +121,17 @@ function BrandingForm() {
         </>
       )}
       {showHideLogtoBranding && (
-        <FormField title="sign_in_exp.branding.hide_logto_branding">
+        <FormField
+          title="sign_in_exp.branding.hide_logto_branding"
+          featureTag={{
+            isVisible: !isHideLogtoBrandingEnabled,
+            plan: latestProPlanId,
+          }}
+        >
           <Switch
             label={t('sign_in_exp.branding.hide_logto_branding_description')}
             {...register('hideLogtoBranding')}
+            disabled={!isHideLogtoBrandingEnabled}
           />
         </FormField>
       )}

packages/console/src/pages/SignInExperience/PageContent/Branding/CustomUiForm/index.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 
 import CustomCssEditorField from '@/components/CustomCssEditorField';
 import InlineUpsell from '@/components/InlineUpsell';
-import { isCloud } from '@/consts/env';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import { latestProPlanId } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Card from '@/ds-components/Card';
@@ -63,7 +63,7 @@ function CustomUiForm() {
               />
             )}
           />
-          {!isBringYourUiEnabled && (
+          {!isBringYourUiEnabled && !isDevFeaturesEnabled && (
             <InlineUpsell
               className={brandingStyles.upsell}
               for="bring_your_ui"

packages/console/src/pages/SignInExperience/PageContent/Branding/UpsellNotice/index.module.scss

@@ -0,0 +1,41 @@
+@use '@/scss/underscore' as _;
+
+.inlineNotification {
+  padding: _.unit(3) _.unit(4);
+  font: var(--font-body-2);
+  display: flex;
+  border-radius: 8px;
+  align-items: center;
+  gap: _.unit(3);
+  margin-bottom: _.unit(4);
+
+  &.shadow {
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow-1);
+  }
+
+  .icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  .content {
+    flex: 1;
+    overflow: hidden;
+    overflow-wrap: break-word;
+
+    // Cancel the margin from MDX generated paragraphs
+    &:has(> p) {
+      margin: _.unit(-4) 0;
+    }
+  }
+
+  &.info {
+    background: var(--color-info-container);
+
+    .icon {
+      color: var(--color-on-info-container);
+    }
+  }
+}

packages/console/src/pages/SignInExperience/PageContent/Branding/UpsellNotice/index.tsx

@@ -0,0 +1,39 @@
+import classNames from 'classnames';
+import { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
+import TextLink from '@/ds-components/TextLink';
+import useTenantPathname from '@/hooks/use-tenant-pathname';
+
+import styles from './index.module.scss';
+
+function UpsellNotice() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { navigate } = useTenantPathname();
+  const { currentSubscriptionQuota } = useContext(SubscriptionDataContext);
+  const isBringYourUiEnabled = currentSubscriptionQuota.bringYourUiEnabled;
+  const showHideLogtoBranding = isCloud && isDevFeaturesEnabled;
+
+  if (!showHideLogtoBranding || isBringYourUiEnabled) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.inlineNotification, styles.info, styles.plain)}>
+      <div className={styles.content}>{t('upsell.paywall.branding_customization')}</div>
+      <div className={styles.action}>
+        <TextLink
+          onClick={() => {
+            navigate('/tenant-settings/subscription');
+          }}
+        >
+          {t('upsell.view_plans')}
+        </TextLink>
+      </div>
+    </div>
+  );
+}
+
+export default UpsellNotice;

packages/console/src/pages/SignInExperience/PageContent/index.tsx

@@ -34,6 +34,7 @@ import {
 
 import AccountCenter from './AccountCenter';
 import Branding from './Branding';
+import UpsellNotice from './Branding/UpsellNotice';
 import CollectUserProfile from './CollectUserProfile';
 import Content from './Content';
 import SignUpAndSignIn from './SignUpAndSignIn';
@@ -219,6 +220,7 @@ function PageContent({ data, onSignInExperienceUpdated, onAccountCenterUpdated }
         </PageTab>
       </TabNav>
       <div className={styles.content}>
+        {tab === SignInExperienceTab.Branding && <UpsellNotice />}
         <div className={classNames(styles.contentTop, isDirty && styles.withSubmitActionBar)}>
           <FormProvider {...methods}>
             <form>

packages/core/src/queries/tenant-usage/index.ts

@@ -252,6 +252,7 @@ export default class TenantUsageQuery {
         select exists (
           select * from ${signInExperiencesTable}
           where ${signInExperiencesFields.customUiAssets} is not null
+          or ${signInExperiencesFields.hideLogtoBranding} = true
         )
       `,
       sql`bringYourUiEnabled`,

packages/core/src/routes/sign-in-experience/index.ts

@@ -188,6 +188,11 @@ export default function signInExperiencesRoutes<T extends ManagementApiRouter>(
         );
       }
 
+      // Guard the quota for BYUI if the hideLogtoBranding is set to true
+      if (hideLogtoBranding) {
+        await quota.guardTenantUsageByKey('bringYourUiEnabled');
+      }
+
       const payload = {
         ...rest,
         ...conditional(

packages/phrases/src/locales/ar/translation/admin-console/upsell/paywall.ts

@@ -66,6 +66,8 @@ const paywall = {
     description:
       'قم بالترقية إلى خطة مدفوعة للحصول على وظيفة JWT المخصصة والفوائد المتميزة. لا تتردد في <a>الاتصال بنا</a> إذا كان لديك أي أسئلة.',
   },
+  branding_customization:
+    'افتح التحكم الكامل في الهوية البصرية باستخدام ميزتي "إخفاء علامة Logto" و"أحضر واجهتك" عن طريق ترقية خطتك.',
   bring_your_ui:
     'قم بالترقية إلى خطة مدفوعة للحصول على وظيفة إحضار واجهة المستخدم المخصصة والفوائد المتميزة.',
   security_features:

packages/phrases/src/locales/de/translation/admin-console/upsell/paywall.ts

@@ -66,6 +66,8 @@ const paywall = {
     description:
       'Upgrade auf einen kostenpflichtigen Plan für benutzerdefinierte JWT-Funktionalität und Premium-Vorteile. Wenn Sie Fragen haben, zögern Sie nicht, uns zu <a>kontaktieren</a>.',
   },
+  branding_customization:
+    'Schalten Sie die vollständige Branding-Kontrolle mit den Funktionen "Logto-Branding ausblenden" und "Bring your UI" frei, indem Sie Ihren Plan upgraden.',
   bring_your_ui:
     'Upgrade auf einen kostenpflichtigen Plan für benutzerdefinierte UI-Funktionalität und Premium-Vorteile.',
   security_features:

packages/phrases/src/locales/en/translation/admin-console/upsell/paywall.ts

@@ -66,6 +66,8 @@ const paywall = {
     description:
       "Upgrade to a paid plan for custom JWT functionality and premium benefits. Don't hesitate to <a>contact us</a> if you have any questions.",
   },
+  branding_customization:
+    'Unlock complete branding control with "Hide Logto branding" and "Bring your UI" features by upgrading your plan.',
   bring_your_ui:
     'Upgrade to a paid plan for bring your custom UI functionality and premium benefits.',
   security_features: