refactor: correct component usage

logto-io · Jul 25, 2024 · b2291fb · b2291fb
1 parent 8778407
commit b2291fb
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 14 deletions.
diff --git a/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx b/packages/console/src/components/ApplicationCreation/CreateForm/Footer/index.tsx
@@ -1,4 +1,5 @@
 import { ApplicationType, ReservedPlanId } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -69,7 +70,12 @@ function Footer({ selectedType, isLoading, onClickCreate, isThirdParty }: Props)
           <Trans
             components={{
               a: <ContactUsPhraseLink />,
-              planName: <PlanName name={planName} />,
+              planName: (
+                <PlanName
+                  skuId={currentSku.id}
+                  name={cond(isDevFeaturesEnabled && currentSku.name) ?? planName}
+                />
+              ),
             }}
           >
             {t('applications', { count: quota.applicationsLimit ?? 0 })}

diff --git a/packages/console/src/components/CreateConnectorForm/Footer/index.tsx b/packages/console/src/components/CreateConnectorForm/Footer/index.tsx
@@ -90,6 +90,7 @@ function Footer({
               a: <ContactUsPhraseLink />,
               planName: (
                 <PlanName
+                  skuId={currentSku.id}
                   name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName}
                 />
               ),
@@ -118,6 +119,7 @@ function Footer({
               a: <ContactUsPhraseLink />,
               planName: (
                 <PlanName
+                  skuId={currentSku.id}
                   name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName}
                 />
               ),

diff --git a/...mponents/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx b/...mponents/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/FeaturedSkuContent/index.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Failed from '@/assets/icons/failed.svg';
 import Success from '@/assets/icons/success.svg';
 
-import * as styles from '../../PlanCardItem/FeaturedPlanContent/index.module.scss';
+import styles from '../../PlanCardItem/FeaturedPlanContent/index.module.scss';
 
 import useFeaturedSkuContent from './use-featured-sku-content';
 

diff --git a/...ages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx b/...ages/console/src/components/CreateTenantModal/SelectTenantPlanModal/SkuCardItem/index.tsx
@@ -14,7 +14,7 @@ import DangerousRaw from '@/ds-components/DangerousRaw';
 import DynamicT from '@/ds-components/DynamicT';
 import TextLink from '@/ds-components/TextLink';
 
-import * as styles from '../PlanCardItem/index.module.scss';
+import styles from '../PlanCardItem/index.module.scss';
 
 import FeaturedSkuContent from './FeaturedSkuContent';
 
@@ -27,7 +27,7 @@ type Props = {
 function SkuCardItem({ sku, onSelect, buttonProps }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell.create_tenant' });
   const { tenants } = useContext(TenantsContext);
-  const { unitPrice: basePrice, id: skuId } = sku;
+  const { unitPrice: basePrice, id: skuId, name: skuName } = sku;
 
   const isFreeSku = skuId === ReservedPlanId.Free;
 
@@ -43,7 +43,7 @@ function SkuCardItem({ sku, onSelect, buttonProps }: Props) {
     <div className={styles.container}>
       <div className={styles.planInfo}>
         <div className={styles.title}>
-          <PlanName skuId={skuId} name={skuId} />
+          <PlanName skuId={skuId} name={skuName ?? skuId} />
         </div>
         <div className={styles.priceInfo}>
           <div className={styles.priceLabel}>{t('base_price')}</div>
@@ -78,7 +78,7 @@ function SkuCardItem({ sku, onSelect, buttonProps }: Props) {
         <Button
           title={
             <DangerousRaw>
-              <Trans components={{ name: <PlanName skuId={skuId} name={skuId} /> }}>
+              <Trans components={{ name: <PlanName skuId={skuId} name={skuName ?? skuId} /> }}>
                 {t('select_plan')}
               </Trans>
             </DangerousRaw>

diff --git a/packages/console/src/components/MauExceededModal/index.tsx b/packages/console/src/components/MauExceededModal/index.tsx
@@ -88,7 +88,10 @@ function MauExceededModal() {
           <Trans
             components={{
               planName: (
-                <PlanName name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName} />
+                <PlanName
+                  skuId={currentSku.id}
+                  name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName}
+                />
               ),
             }}
           >

diff --git a/...ages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx b/...ages/ApiResourceDetails/ApiResourcePermissions/components/CreatePermissionModal/index.tsx
@@ -97,6 +97,7 @@ function CreatePermissionModal({ resourceId, totalResourceCount, onClose }: Prop
                   a: <ContactUsPhraseLink />,
                   planName: (
                     <PlanName
+                      skuId={currentSku.id}
                       name={
                         conditional(isDevFeaturesEnabled && currentSku.name) ?? currentPlan.name
                       }

diff --git a/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx b/packages/console/src/pages/ApiResources/components/CreateForm/Footer.tsx
@@ -1,4 +1,5 @@
 import { ReservedPlanId } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 
@@ -36,7 +37,12 @@ function Footer({ isCreationLoading, onClickCreate }: Props) {
         <Trans
           components={{
             a: <ContactUsPhraseLink />,
-            planName: <PlanName name={currentPlan.name} />,
+            planName: (
+              <PlanName
+                skuId={currentSku.id}
+                name={cond(isDevFeaturesEnabled && currentSku.name) ?? currentPlan.name}
+              />
+            ),
           }}
         >
           {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
@@ -209,7 +209,10 @@ function ProtectedAppForm({
             components={{
               a: <ContactUsPhraseLink />,
               planName: (
-                <PlanName name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName} />
+                <PlanName
+                  skuId={currentSku.id}
+                  name={conditional(isDevFeaturesEnabled && currentSku.name) ?? planName}
+                />
               ),
             }}
           >

diff --git a/...console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx b/...console/src/pages/RoleDetails/RolePermissions/components/AssignPermissionsModal/index.tsx
@@ -91,6 +91,7 @@ function AssignPermissionsModal({ roleId, roleType, totalRoleScopeCount, onClose
                   a: <ContactUsPhraseLink />,
                   planName: (
                     <PlanName
+                      skuId={currentSku.id}
                       name={
                         conditional(isDevFeaturesEnabled && currentSku.name) ?? currentPlan.name
                       }

diff --git a/packages/console/src/pages/Roles/components/CreateRoleForm/Footer.tsx b/packages/console/src/pages/Roles/components/CreateRoleForm/Footer.tsx
@@ -1,4 +1,5 @@
 import { type RoleResponse, RoleType } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import useSWR from 'swr';
@@ -26,7 +27,7 @@ type Props = {
 
 function Footer({ roleType, selectedScopesCount, isCreating, onClickCreate }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-  const { currentPlan, currentSubscriptionQuota, currentSubscriptionUsage } =
+  const { currentPlan, currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
     useContext(SubscriptionDataContext);
 
   const { data: [, roleCount] = [] } = useSWR<[RoleResponse[], number]>(
@@ -71,7 +72,12 @@ function Footer({ roleType, selectedScopesCount, isCreating, onClickCreate }: Pr
         <Trans
           components={{
             a: <ContactUsPhraseLink />,
-            planName: <PlanName name={currentPlan.name} />,
+            planName: (
+              <PlanName
+                skuId={currentSku.id}
+                name={cond(isDevFeaturesEnabled && currentSku.name) ?? currentPlan.name}
+              />
+            ),
           }}
         >
           {/* 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
@@ -52,7 +52,10 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
     <FormCard title="subscription.current_plan" description="subscription.current_plan_description">
       <div className={styles.planInfo}>
         <div className={styles.name}>
-          <PlanName skuId={currentSku.id} name={name} />
+          <PlanName
+            skuId={currentSku.id}
+            name={cond(isDevFeaturesEnabled && currentSku.name) ?? name}
+          />
         </div>
         <div className={styles.description}>
           <PlanDescription skuId={currentSku.id} planId={id} />

diff --git a/packages/console/src/pages/Webhooks/CreateFormModal/CreateForm.tsx b/packages/console/src/pages/Webhooks/CreateFormModal/CreateForm.tsx
@@ -1,4 +1,5 @@
 import { type Hook, type CreateHook, type HookEvent, type HookConfig } from '@logto/schemas';
+import { cond } from '@silverhand/essentials';
 import { useContext } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
@@ -28,7 +29,7 @@ type CreateHookPayload = Pick<CreateHook, 'name'> & {
 };
 
 function CreateForm({ totalWebhookCount, onClose }: Props) {
-  const { currentPlan, currentSubscriptionQuota, currentSubscriptionUsage } =
+  const { currentPlan, currentSku, currentSubscriptionQuota, currentSubscriptionUsage } =
     useContext(SubscriptionDataContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
@@ -78,7 +79,12 @@ function CreateForm({ totalWebhookCount, onClose }: Props) {
             <Trans
               components={{
                 a: <ContactUsPhraseLink />,
-                planName: <PlanName name={currentPlan.name} />,
+                planName: (
+                  <PlanName
+                    skuId={currentSku.id}
+                    name={cond(isDevFeaturesEnabled && currentSku.name) ?? currentPlan.name}
+                  />
+                ),
               }}
             >
               {t('upsell.paywall.hooks', {