refactor: refactor SkuName component to make isEnterprisePlan as input (

logto-io#6580)
A-SunsetMkt-Forks · pull · Aug 12, 2024 · Aug 12, 2024 · Aug 12, 2024 · Aug 12, 2024
commit 560cb23b30dcf58c2be2967dcb81c41a6eab3627
diff --git a/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx b/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx
@@ -113,7 +113,7 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props)
           <Trans
             components={{
               a: <ContactUsPhraseLink />,
-              planName: <SkuName skuId={currentSku.id} />,
+              planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
             }}
           >
             {t('paywall.applications', { count: currentSubscriptionQuota.applicationsLimit ?? 0 })}

diff --git a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx
@@ -16,8 +16,11 @@ type Props = {
 
 function Footer({ isCreatingSocialConnector, isCreateButtonDisabled, onClickCreateButton }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.paywall' });
-  const { currentSku, currentSubscriptionUsage, currentSubscriptionQuota } =
-    useContext(SubscriptionDataContext);
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+    currentSubscriptionUsage,
+    currentSubscriptionQuota,
+  } = useContext(SubscriptionDataContext);
 
   const isSocialConnectorsReachLimit = hasReachedSubscriptionQuotaLimit({
     quotaKey: 'socialConnectorsLimit',
@@ -31,7 +34,7 @@ function Footer({ isCreatingSocialConnector, isCreateButtonDisabled, onClickCrea
         <Trans
           components={{
             a: <ContactUsPhraseLink />,
-            planName: <SkuName skuId={currentSku.id} />,
+            planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
           }}
         >
           {t('social_connectors', {

diff --git a/packages/console/src/components/MauExceededModal/index.tsx b/packages/console/src/components/MauExceededModal/index.tsx
@@ -20,7 +20,9 @@ import SkuName from '../SkuName';
 import styles from './index.module.scss';
 
 function MauExceededModal() {
-  const { currentSku } = useContext(SubscriptionDataContext);
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
   const { currentTenant } = useContext(TenantsContext);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@@ -75,7 +77,7 @@ function MauExceededModal() {
         <InlineNotification severity="error">
           <Trans
             components={{
-              planName: <SkuName skuId={currentSku.id} />,
+              planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
             }}
           >
             {t('upsell.mau_exceeded_modal.notification')}

diff --git a/packages/console/src/components/SkuName/index.tsx b/packages/console/src/components/SkuName/index.tsx
@@ -1,9 +1,7 @@
 import { ReservedPlanId } from '@logto/schemas';
 import { type TFuncKey } from 'i18next';
-import { useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
 import { ReservedSkuId } from '@/types/subscriptions';
 
 const registeredSkuIdNamePhraseMap: Record<
@@ -20,13 +18,11 @@ const registeredSkuIdNamePhraseMap: Record<
 
 type Props = {
   readonly skuId: string;
+  readonly isEnterprisePlan?: boolean;
 };
 
-function SkuName({ skuId: rawSkuId }: Props) {
+function SkuName({ skuId: rawSkuId, isEnterprisePlan = false }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.subscription' });
-  const {
-    currentSubscription: { isEnterprisePlan },
-  } = useContext(SubscriptionDataContext);
   const skuId = isEnterprisePlan ? ReservedPlanId.Enterprise : rawSkuId;
 
   const skuNamePhrase = registeredSkuIdNamePhraseMap[skuId];

diff --git a/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx b/packages/console/src/components/Topbar/TenantSelector/TenantDropdownItem/index.tsx
@@ -1,4 +1,4 @@
-import { TenantTag, ReservedPlanId } from '@logto/schemas';
+import { TenantTag } from '@logto/schemas';
 import classNames from 'classnames';
 import { useContext, useMemo } from 'react';
 
@@ -31,7 +31,6 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
     () => logtoSkus.find(({ id }) => id === planId),
     [logtoSkus, planId]
   );
-  const skuId = isEnterprisePlan ? ReservedPlanId.Enterprise : planId;
 
   if (!tenantSubscriptionSku) {
     return null;
@@ -49,7 +48,7 @@ function TenantDropdownItem({ tenantData, isSelected, onClick }: Props) {
           {tag === TenantTag.Development ? (
             <DynamicT forKey="subscription.no_subscription" />
           ) : (
-            <SkuName skuId={skuId} />
+            <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />
           )}
         </div>
       </div>

diff --git a/...ages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx b/...ages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
@@ -28,8 +28,11 @@ type Props = {
 type CreatePermissionFormData = Pick<CreateScope, 'name' | 'description'>;
 
 function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Props) {
-  const { currentSku, currentSubscriptionQuota, currentSubscriptionResourceScopeUsage } =
-    useContext(SubscriptionDataContext);
+  const {
+    currentSubscriptionQuota,
+    currentSubscriptionResourceScopeUsage,
+    currentSubscription: { planId, isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const {
@@ -83,7 +86,7 @@ function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Prop
               <Trans
                 components={{
                   a: <ContactUsPhraseLink />,
-                  planName: <SkuName skuId={currentSku.id} />,
+                  planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
                 }}
               >
                 {t('upsell.paywall.scopes_per_resource', {

diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx
@@ -47,7 +47,7 @@ function Footer({ isCreationLoading, onClickCreate }: Props) {
         <Trans
           components={{
             a: <ContactUsPhraseLink />,
-            planName: <SkuName skuId={currentSku.id} />,
+            planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
           }}
         >
           {t('upsell.paywall.resources', {

diff --git a/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx b/packages/console/src/pages/Applications/components/ProtectedAppForm/index.tsx
@@ -46,7 +46,10 @@ function ProtectedAppForm({
   onCreateSuccess,
 }: Props) {
   const { data } = useSWRImmutable<ProtectedAppsDomainConfig>(isCloud && 'api/systems/application');
-  const { currentSku, currentSubscriptionQuota } = useContext(SubscriptionDataContext);
+  const {
+    currentSubscriptionQuota,
+    currentSubscription: { planId, isEnterprisePlan },
+  } = useContext(SubscriptionDataContext);
   const { hasAppsReachedLimit } = useApplicationsUsage();
   const defaultDomain = data?.protectedApps.defaultDomain ?? '';
   const { navigate } = useTenantPathname();
@@ -202,7 +205,7 @@ function ProtectedAppForm({
           <Trans
             components={{
               a: <ContactUsPhraseLink />,
-              planName: <SkuName skuId={currentSku.id} />,
+              planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
             }}
           >
             {t('upsell.paywall.applications', {

diff --git a/...console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx b/...console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
@@ -24,8 +24,11 @@ type Props = {
 
 function AssignPermissionsModal({ roleId, roleType, onClose }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { currentSku, currentSubscriptionRoleScopeUsage, currentSubscriptionQuota } =
-    useContext(SubscriptionDataContext);
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+    currentSubscriptionRoleScopeUsage,
+    currentSubscriptionQuota,
+  } = useContext(SubscriptionDataContext);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [scopes, setScopes] = useState<ScopeResponse[]>([]);
 
@@ -79,7 +82,7 @@ function AssignPermissionsModal({ roleId, roleType, onClose }: Props) {
               <Trans
                 components={{
                   a: <ContactUsPhraseLink />,
-                  planName: <SkuName skuId={currentSku.id} />,
+                  planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
                 }}
               >
                 {t('upsell.paywall.scopes_per_role', {

diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/Footer.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/Footer.tsx
@@ -20,8 +20,11 @@ type Props = {
 
 function Footer({ roleType, isCreating, onClickCreate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
-    useContext(SubscriptionDataContext);
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+    currentSubscriptionQuota,
+    currentSubscriptionUsage,
+  } = useContext(SubscriptionDataContext);
 
   const hasRoleReachedLimit = hasReachedSubscriptionQuotaLimit({
     quotaKey: roleType === RoleType.User ? 'userRolesLimit' : 'machineToMachineRolesLimit',
@@ -44,7 +47,7 @@ function Footer({ roleType, isCreating, onClickCreate }: Props) {
         <Trans
           components={{
             a: <ContactUsPhraseLink />,
-            planName: <SkuName skuId={currentSku.id} />,
+            planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
           }}
         >
           {/* User roles limit paywall */}

diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
@@ -59,7 +59,7 @@ function CurrentPlan({ periodicUsage: rawPeriodicUsage }: Props) {
     <FormCard title="subscription.current_plan" description="subscription.current_plan_description">
       <div className={styles.planInfo}>
         <div className={styles.name}>
-          <SkuName skuId={currentSkuId} />
+          <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />
         </div>
         <div className={styles.description}>
           <PlanDescription skuId={currentSkuId} planId={planId} />

diff --git a/packages/console/src/pages/Webhooks/CreateFormModal/CreateForm.tsx b/packages/console/src/pages/Webhooks/CreateFormModal/CreateForm.tsx
@@ -26,8 +26,11 @@ type CreateHookPayload = Pick<CreateHook, 'name'> & {
 };
 
 function CreateForm({ onClose }: Props) {
-  const { currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
-    useContext(SubscriptionDataContext);
+  const {
+    currentSubscription: { planId, isEnterprisePlan },
+    currentSubscriptionQuota,
+    currentSubscriptionUsage,
+  } = useContext(SubscriptionDataContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   const shouldBlockCreation = hasReachedSubscriptionQuotaLimit({
@@ -70,7 +73,7 @@ function CreateForm({ onClose }: Props) {
             <Trans
               components={{
                 a: <ContactUsPhraseLink />,
-                planName: <SkuName skuId={currentSku.id} />,
+                planName: <SkuName skuId={planId} isEnterprisePlan={isEnterprisePlan} />,
               }}
             >
               {t('upsell.paywall.hooks', {