refactor: refactor SkuName component to make isEnterprisePlan as input (#6580)

2024-12-30 20:33:54 -05:00 · 2024-09-13 11:42:48 +08:00 · 2024-09-13 11:42:48 +08:00 · 560cb23b30
commit 560cb23b30
parent 193b4a4011
12 changed files with 46 additions and 31 deletions
--- 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 })}
--- 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', {
--- 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')}
--- 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];
--- 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>
--- a/packages/console/src/pages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
+++ b/packages/console/src/pages/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', {
--- 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', {
--- 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', {
--- a/packages/console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
+++ b/packages/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', {
--- 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 */}
--- 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} />
--- 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', {