chore: remove multiple custom domain feature guard (#7995)

Author: xiaoyijun

packages/console/src/components/RolesTransfer/components/RoleInformation/index.module.scss

@@ -10,13 +10,6 @@
     @include _.text-ellipsis;
   }
 
-  // Todo @xiaoyijun Remove this `count` style together with the dev feature flag
-  .count {
-    flex-shrink: 0;
-    margin-inline-start: _.unit(2);
-    color: var(--color-text-secondary);
-  }
-
   .flag {
     flex-shrink: 0;
     margin-inline-start: _.unit(2);

packages/console/src/hooks/use-custom-domain.ts

@@ -1,10 +1,12 @@
 import { DomainStatus, type Domain } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 import useSWR from 'swr';
 
 import { customDomainSyncInterval } from '@/consts/custom-domain';
 import { isCloud } from '@/consts/env';
+import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
+import { TenantsContext } from '@/contexts/TenantsProvider';
 
 import { type RequestError } from './use-api';
 
@@ -18,6 +20,11 @@ const useCustomDomain = (autoSync = false) => {
     )
   );
 
+  const { currentSubscriptionBasicQuota, currentSubscriptionUsage } =
+    useContext(SubscriptionDataContext);
+
+  const { currentTenant } = useContext(TenantsContext);
+
   const isLoading = !data && !error;
 
   /**
@@ -67,6 +74,50 @@ const useCustomDomain = (autoSync = false) => {
     [allDomains]
   );
 
+  /**
+   * Whether to display the feature add-on tag for custom domains.
+   * Shows the add-on tag when current usage exceeds the basic quota limit (excluding add-on quota).
+   */
+  const shouldDisplayFeatureAddOnTag = useMemo(() => {
+    /**
+     * Specifically for private region users who have enabled multiple custom domains feature flag.
+     *
+     * TODO @xiaoyijun: remove this special handling after enterprise subscription is live
+     */
+    if (currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled) {
+      return false;
+    }
+
+    return (
+      currentSubscriptionUsage.customDomainsLimit >=
+      (currentSubscriptionBasicQuota.customDomainsLimit ?? Number.POSITIVE_INFINITY)
+    );
+  }, [
+    currentSubscriptionBasicQuota.customDomainsLimit,
+    currentSubscriptionUsage.customDomainsLimit,
+    currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled,
+  ]);
+
+  const shouldDisplayUpsellNotification = useMemo(() => {
+    /**
+     * Specifically for private region users who have enabled multiple custom domains feature flag.
+     *
+     * TODO @xiaoyijun: remove this special handling after enterprise subscription is live
+     */
+    if (currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled) {
+      return false;
+    }
+
+    return (
+      currentSubscriptionBasicQuota.customDomainsLimit ===
+      currentSubscriptionUsage.customDomainsLimit
+    );
+  }, [
+    currentSubscriptionBasicQuota.customDomainsLimit,
+    currentSubscriptionUsage.customDomainsLimit,
+    currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled,
+  ]);
+
   return {
     /**
      * Legacy single custom domain.
@@ -85,6 +136,8 @@ const useCustomDomain = (autoSync = false) => {
     isLoading,
     mutate: mutateDomain,
     activeCustomDomains,
+    shouldDisplayFeatureAddOnTag,
+    shouldDisplayUpsellNotification,
   };
 };
 

packages/console/src/pages/TenantSettings/TenantDomainSettings/MultipleCustomDomainsFormField/PaywallNotification.tsx

@@ -6,7 +6,6 @@ import SkuName from '@/components/SkuName';
 import { addOnPricingExplanationLink } from '@/consts';
 import { customDomainAddOnUnitPrice } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
-import { TenantsContext } from '@/contexts/TenantsProvider';
 import InlineNotification from '@/ds-components/InlineNotification';
 import TextLink from '@/ds-components/TextLink';
 import usePaywall from '@/hooks/use-paywall';
@@ -21,9 +20,7 @@ export default function PaywallNotification() {
   const {
     currentSubscription: { planId },
     currentSubscriptionQuota,
-    hasSurpassedSubscriptionQuotaLimit,
   } = useContext(SubscriptionDataContext);
-  const { currentTenant } = useContext(TenantsContext);
 
   if (isFreeTenant) {
     return (
@@ -51,16 +48,7 @@ export default function PaywallNotification() {
     );
   }
 
-  /**
-   * Specifically for private region users who have enabled multiple custom domains feature flag.
-   *
-   * TODO @xiaoyijun: remove this special handling after enterprise subscription is live
-   */
-  if (currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled) {
-    return null;
-  }
-
-  if (isPaidTenant && !hasSurpassedSubscriptionQuotaLimit('customDomainsLimit')) {
+  if (isPaidTenant) {
     return (
       <InlineNotification className={styles.paywallNotification}>
         <Trans

packages/console/src/pages/TenantSettings/TenantDomainSettings/MultipleCustomDomainsFormField/index.tsx

@@ -1,10 +1,10 @@
 import { DomainStatus, type Domain } from '@logto/schemas';
-import { cond } from '@silverhand/essentials';
+import { type Optional } from '@silverhand/essentials';
 import { useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { type CombinedAddOnAndFeatureTagProps } from '@/components/FeatureTag';
 import LearnMore from '@/components/LearnMore';
-import { isDevFeaturesEnabled } from '@/consts/env';
 import { customDomain as customDomainDocumentationLink } from '@/consts/external-links';
 import { latestProPlanId } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
@@ -23,14 +23,16 @@ import styles from './index.module.scss';
 
 function MultipleCustomDomainsFormField() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { allDomains, mutate } = useCustomDomain(true);
+  const { allDomains, mutate, shouldDisplayFeatureAddOnTag, shouldDisplayUpsellNotification } =
+    useCustomDomain(true);
   const api = useApi();
   const {
     access: { canManageTenant },
   } = useCurrentTenantScopes();
   const { hasReachedSubscriptionQuotaLimit } = useContext(SubscriptionDataContext);
   const { isPaidTenant } = usePaywall();
   const { currentTenant } = useContext(TenantsContext);
+  const { isFreeTenant } = usePaywall();
 
   const hasReachedQuotaLimit = hasReachedSubscriptionQuotaLimit('customDomainsLimit');
 
@@ -60,20 +62,20 @@ function MultipleCustomDomainsFormField() {
     isPaidTenant,
   ]);
 
+  const addOnFeatureTagProps = useMemo<Optional<CombinedAddOnAndFeatureTagProps>>(() => {
+    if (shouldDisplayFeatureAddOnTag) {
+      return {
+        hasAddOnTag: !isFreeTenant,
+        paywall: latestProPlanId,
+      };
+    }
+  }, [isFreeTenant, shouldDisplayFeatureAddOnTag]);
+
   return (
     <>
       <FormField
         title="domain.custom.add_custom_domain_field"
-        {...cond(
-          // TODO @xiaoyijun: remove the dev feature flag
-          isDevFeaturesEnabled &&
-            hasReachedQuotaLimit && {
-              addOnFeatureTag: {
-                hasAddOnTag: hasReachedQuotaLimit,
-                paywall: latestProPlanId,
-              },
-            }
-        )}
+        addOnFeatureTag={addOnFeatureTagProps}
       >
         <AddDomainForm
           isReadonly={!canAddDomain}
@@ -82,10 +84,7 @@ function MultipleCustomDomainsFormField() {
             mutate(createdDomain);
           }}
         />
-        {
-          // TODO @xiaoyijun: remove the dev feature flag
-          isDevFeaturesEnabled && hasReachedQuotaLimit && <PaywallNotification />
-        }
+        {shouldDisplayUpsellNotification && <PaywallNotification />}
       </FormField>
       {allDomains.length > 0 && (
         <FormField title="domain.custom.custom_domain_field">

packages/console/src/pages/TenantSettings/TenantDomainSettings/SingleCustomDomainFormField/index.module.scss

@@ -1,9 +1,5 @@
-import { useContext } from 'react';
-
 import FormCard from '@/components/FormCard';
 import PageMeta from '@/components/PageMeta';
-import { isDevFeaturesEnabled } from '@/consts/env';
-import { TenantsContext } from '@/contexts/TenantsProvider';
 import FormField from '@/ds-components/FormField';
 import useCustomDomain from '@/hooks/use-custom-domain';
 import useDocumentationUrl from '@/hooks/use-documentation-url';
@@ -12,17 +8,11 @@ import Skeleton from '../components/Skeleton';
 
 import DefaultDomain from './DefaultDomain';
 import MultipleCustomDomainsFormField from './MultipleCustomDomainsFormField';
-import SingleCustomDomainFormField from './SingleCustomDomainFormField';
 import styles from './index.module.scss';
 
 function TenantDomainSettings() {
   const { isLoading: isLoadingCustomDomain } = useCustomDomain(true);
   const { getDocumentationUrl } = useDocumentationUrl();
-  const { currentTenant } = useContext(TenantsContext);
-
-  // TODO @xiaoyijun: remove the dev feature flag
-  const isMultipleCustomDomainsEnabled =
-    isDevFeaturesEnabled || Boolean(currentTenant?.featureFlags?.isMultipleCustomDomainsEnabled);
 
   if (isLoadingCustomDomain) {
     return <Skeleton />;
@@ -39,11 +29,7 @@ function TenantDomainSettings() {
           targetBlank: 'noopener',
         }}
       >
-        {isMultipleCustomDomainsEnabled ? (
-          <MultipleCustomDomainsFormField />
-        ) : (
-          <SingleCustomDomainFormField />
-        )}
+        <MultipleCustomDomainsFormField />
       </FormCard>
       <FormCard
         title="domain.default.default_domain"

packages/console/src/pages/TenantSettings/TenantDomainSettings/SingleCustomDomainFormField/index.tsx

@@ -24,6 +24,8 @@ export default function domainRoutes<T extends ManagementApiRouter>(
     quota,
   } = libraries;
 
+  const isPrivateRegionFeature = EnvSet.values.isMultipleCustomDomainsEnabled;
+
   router.get(
     '/domains',
     koaGuard({ response: domainResponseGuard.array(), status: 200 }),
@@ -83,8 +85,7 @@ export default function domainRoutes<T extends ManagementApiRouter>(
       const existingDomains = await findAllDomains();
 
       await assertCustomDomainLimit({
-        isPrivateRegionFeature: EnvSet.values.isMultipleCustomDomainsEnabled,
-        isDevelopmentFeatureEnabled: EnvSet.values.isDevFeaturesEnabled,
+        isPrivateRegionFeature,
         quotaLibrary: quota,
         existingDomainCount: existingDomains.length,
       });
@@ -102,7 +103,9 @@ export default function domainRoutes<T extends ManagementApiRouter>(
 
       // Throw 400 error if domain is invalid
       const syncedDomain = await addDomain(ctx.guard.body.domain);
-
+      if (!isPrivateRegionFeature) {
+        void quota.reportSubscriptionUpdatesUsage('customDomainsLimit');
+      }
       ctx.status = 201;
       ctx.body = pick(syncedDomain, ...domainSelectFields);
 
@@ -118,6 +121,10 @@ export default function domainRoutes<T extends ManagementApiRouter>(
       const { id } = ctx.guard.params;
       await deleteDomain(id);
 
+      if (!isPrivateRegionFeature) {
+        void quota.reportSubscriptionUpdatesUsage('customDomainsLimit');
+      }
+
       await trySafe(async () => {
         const domains = await findAllDomains();
         const syncedDomains = await Promise.all(