refactor(console): refactor third-party and saml app paywall tag (#7713)

simeng-li · web-flow · commit e5724efaaf92 · 2025-08-22T03:54:43.000Z
* refactor(console): refactor third-party and saml app paywall tag

refactor third-party and daml app paywall tag

* fix(console): fix third-party paywall tag display logic

fix third-party paywall tag display logic
diff --git a/packages/console/src/assets/docs/guides/saml-idp/index.ts b/packages/console/src/assets/docs/guides/saml-idp/index.ts
@@ -4,7 +4,7 @@ import { type GuideMetadata } from '../types';
 
 const metadata = Object.freeze({
   name: 'SAML',
-  description: 'Use Logto as a SAML identity provider (IdP) for your application.',
+  description: 'XML-based framework for SSO. Use if apps only support SAML.',
   target: ApplicationType.SAML,
   isThirdParty: false,
   skipGuideAfterCreation: true,
diff --git a/packages/console/src/assets/docs/guides/third-party-oidc/index.ts b/packages/console/src/assets/docs/guides/third-party-oidc/index.ts
@@ -4,7 +4,7 @@ import { type GuideMetadata } from '../types';
 
 const metadata: Readonly<GuideMetadata> = Object.freeze({
   name: 'OIDC',
-  description: 'Use Logto as a third-party OIDC identity provider (IdP) for your application.',
+  description: 'Use Logto as a third-party OAuth / OIDC identity provider to offer user consent.',
   target: ApplicationType.Traditional,
   isThirdParty: true,
   skipGuideAfterCreation: true,
diff --git a/packages/console/src/components/Guide/GuideCard/index.tsx b/packages/console/src/components/Guide/GuideCard/index.tsx
@@ -1,10 +1,9 @@
-import { ApplicationType, Theme } from '@logto/schemas';
+import { Theme } from '@logto/schemas';
 import classNames from 'classnames';
-import { Suspense, useCallback, useContext } from 'react';
+import { type ReactNode, Suspense, useCallback, useContext } from 'react';
 
 import { type Guide, type GuideMetadata } from '@/assets/docs/guides/types';
-import FeatureTag, { BetaTag } from '@/components/FeatureTag';
-import { latestProPlanId } from '@/consts/subscriptions';
+import { BetaTag } from '@/components/FeatureTag';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import Button from '@/ds-components/Button';
 import useTheme from '@/hooks/use-theme';
@@ -22,11 +21,11 @@ type Props = {
   readonly onClick: (data: SelectedGuide) => void;
   readonly hasBorder?: boolean;
   readonly hasButton?: boolean;
-  readonly hasPaywall?: boolean;
+  readonly paywallTag?: ReactNode;
   readonly isBeta?: boolean;
 };
 
-function GuideCard({ data, onClick, hasBorder, hasButton, hasPaywall, isBeta }: Props) {
+function GuideCard({ data, onClick, hasBorder, hasButton, paywallTag, isBeta }: Props) {
   const { id, Logo, DarkLogo, metadata } = data;
   const {
     currentSubscription: { isEnterprisePlan },
@@ -35,7 +34,7 @@ function GuideCard({ data, onClick, hasBorder, hasButton, hasPaywall, isBeta }:
   const { target, name, description } = metadata;
   const buttonText = target === 'API' ? 'guide.get_started' : 'guide.start_building';
   const theme = useTheme();
-  const hasTags = Boolean(hasPaywall) || Boolean(isBeta);
+  const hasTags = Boolean(paywallTag) || Boolean(isBeta);
 
   const handleClick = useCallback(() => {
     onClick({ id, metadata });
@@ -66,12 +65,7 @@ function GuideCard({ data, onClick, hasBorder, hasButton, hasPaywall, isBeta }:
             <div className={styles.name}>{name}</div>
             {hasTags && (
               <div className={styles.tagWrapper}>
-                {hasPaywall &&
-                  (target === ApplicationType.SAML ? (
-                    <FeatureTag isEnterprise isVisible={!isEnterprisePlan} />
-                  ) : (
-                    <FeatureTag isVisible plan={latestProPlanId} />
-                  ))}
+                {paywallTag}
                 {isBeta && <BetaTag />}
               </div>
             )}
diff --git a/packages/console/src/components/Guide/GuideCardGroup/index.tsx b/packages/console/src/components/Guide/GuideCardGroup/index.tsx
@@ -1,11 +1,15 @@
 import { ApplicationType } from '@logto/schemas';
+import { conditional } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { type Ref, forwardRef, useContext } from 'react';
 
-import { type Guide } from '@/assets/docs/guides/types';
-import { isCloud } from '@/consts/env';
+import { type GuideMetadata, type Guide } from '@/assets/docs/guides/types';
+import { type NewSubscriptionQuota } from '@/cloud/types/router';
+import FeatureTag, { CombinedAddOnAndFeatureTag } from '@/components/FeatureTag';
+import { isDevFeaturesEnabled } from '@/consts/env';
+import { latestProPlanId } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
-import { TenantsContext } from '@/contexts/TenantsProvider';
+import { isPaidPlan } from '@/utils/subscription';
 
 import GuideCard, { type SelectedGuide } from '../GuideCard';
 
@@ -20,12 +24,46 @@ type Props = {
   readonly onClickGuide: (data: SelectedGuide) => void;
 };
 
+function getPaywallTag(
+  guideMetadata: GuideMetadata,
+  currentSubscriptionQuota: NewSubscriptionQuota,
+  isPaidPlan: boolean,
+  isEnterprisePlan: boolean
+) {
+  // TODO: remove the dev feature guard when the new add-on plan is ready for release
+  if (guideMetadata.isThirdParty) {
+    return isDevFeaturesEnabled ? (
+      <CombinedAddOnAndFeatureTag
+        hasAddOnTag={isPaidPlan && currentSubscriptionQuota.thirdPartyApplicationsLimit !== null}
+        paywall={conditional(!isPaidPlan && latestProPlanId)}
+      />
+    ) : (
+      <FeatureTag isVisible={!isPaidPlan} plan={latestProPlanId} />
+    );
+  }
+
+  if (guideMetadata.target === ApplicationType.SAML) {
+    return isDevFeaturesEnabled ? (
+      <CombinedAddOnAndFeatureTag
+        hasAddOnTag={isPaidPlan}
+        paywall={conditional(!isPaidPlan && latestProPlanId)}
+      />
+    ) : (
+      <FeatureTag isEnterprise isVisible={!isEnterprisePlan} />
+    );
+  }
+}
+
 function GuideCardGroup(
   { className, categoryName, guides, hasCardBorder, hasCardButton, onClickGuide }: Props,
   ref: Ref<HTMLDivElement>
 ) {
-  const { isDevTenant } = useContext(TenantsContext);
-  const { currentSubscriptionQuota } = useContext(SubscriptionDataContext);
+  const {
+    currentSubscriptionQuota,
+    currentSubscription: { planId, isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
+
+  const isPaidTenant = isPaidPlan(planId, isEnterprisePlan);
 
   if (!guides?.length) {
     return null;
@@ -41,14 +79,12 @@ function GuideCardGroup(
             hasBorder={hasCardBorder}
             hasButton={hasCardButton}
             data={guide}
-            hasPaywall={
-              isCloud &&
-              ((guide.metadata.isThirdParty &&
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                (currentSubscriptionQuota.thirdPartyApplicationsLimit === 0 || isDevTenant)) ||
-                (guide.metadata.target === ApplicationType.SAML &&
-                  (currentSubscriptionQuota.samlApplicationsLimit === 0 || isDevTenant)))
-            }
+            paywallTag={getPaywallTag(
+              guide.metadata,
+              currentSubscriptionQuota,
+              isPaidTenant,
+              isEnterprisePlan
+            )}
             onClick={onClickGuide}
           />
         ))}
diff --git a/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx b/packages/console/src/pages/Applications/components/GuideLibrary/index.tsx
@@ -1,17 +1,14 @@
-import { cond } from '@silverhand/essentials';
 import classNames from 'classnames';
 import { useCallback, useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import SearchIcon from '@/assets/icons/search.svg?react';
 import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder';
-import FeatureTag from '@/components/FeatureTag';
 import { type SelectedGuide } from '@/components/Guide/GuideCard';
 import GuideCardGroup from '@/components/Guide/GuideCardGroup';
 import { useAppGuideMetadata } from '@/components/Guide/hooks';
 import { isCloud } from '@/consts/env';
-import { latestProPlanId } from '@/consts/subscriptions';
 import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { CheckboxGroup } from '@/ds-components/Checkbox';
 import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
@@ -100,25 +97,6 @@ function GuideLibrary({ className, hasCardBorder, hasCardButton, onSelectGuide }
                       .map((category) => ({
                         title: `guide.categories.${category}`,
                         value: category,
-                        ...cond(
-                          isCloud &&
-                            category === 'ThirdParty' && {
-                              tag: (
-                                <FeatureTag
-                                  isVisible={
-                                    currentSubscriptionQuota.thirdPartyApplicationsLimit === 0
-                                  }
-                                  plan={latestProPlanId}
-                                />
-                              ),
-                            }
-                        ),
-                        ...cond(
-                          isCloud &&
-                            category === 'SAML' && {
-                              tag: <FeatureTag isEnterprise isVisible={!isEnterprisePlan} />,
-                            }
-                        ),
                       }))}
                     value={filterCategories}
                     onChange={(value) => {
