From f1ecec5487529c264ec441f773fe9ad3f6d3e2a5 Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Thu, 22 Aug 2024 18:18:43 +0800 Subject: [PATCH] fix(console): remove legacy charge notification components (#6505) --- .../components/ChargeNotification/index.tsx | 91 ------------------- .../src/pages/ApiResources/index.module.scss | 4 - .../console/src/pages/ApiResources/index.tsx | 14 --- .../src/pages/Applications/index.module.scss | 4 - .../console/src/pages/Applications/index.tsx | 13 --- .../CurrentPlan/index.module.scss | 4 - .../Subscription/CurrentPlan/index.tsx | 21 +---- .../TenantMembers/index.module.scss | 4 - .../TenantSettings/TenantMembers/index.tsx | 9 -- 9 files changed, 1 insertion(+), 163 deletions(-) delete mode 100644 packages/console/src/components/ChargeNotification/index.tsx diff --git a/packages/console/src/components/ChargeNotification/index.tsx b/packages/console/src/components/ChargeNotification/index.tsx deleted file mode 100644 index 2c99afa59..000000000 --- a/packages/console/src/components/ChargeNotification/index.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { type AdminConsoleData, ReservedPlanId } from '@logto/schemas'; -import { cond, type Truthy } from '@silverhand/essentials'; -import { type TFuncKey } from 'i18next'; -import { useContext } from 'react'; -import { Trans, useTranslation } from 'react-i18next'; - -import { addOnPricingExplanationLink } from '@/consts'; -import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; -import InlineNotification from '@/ds-components/InlineNotification'; -import TextLink from '@/ds-components/TextLink'; -import useConfigs from '@/hooks/use-configs'; - -type Props = { - readonly hasSurpassedLimit: boolean; - readonly quotaItemPhraseKey: TFuncKey<'translation', 'admin_console.upsell.add_on_quota_item'>; - readonly quotaLimit?: number; - readonly className?: string; - /** - * The key of the flag in `checkedChargeNotification` config from the AdminConsoleData. - * Used to determine whether the notification has been checked. - * @see{@link AdminConsoleData} - */ - readonly checkedFlagKey: keyof Truthy; -}; - -/** - * Charge notification for add-on quota limit features - * - * CAUTION: - * - This notification will be rendered only when the tenant's subscription plan is a paid plan. We won't render it for free plan since we will not charge for free plan. - * - If the notification has been marked as checked, it will not be rendered. - */ -function ChargeNotification({ - hasSurpassedLimit, - quotaItemPhraseKey, - quotaLimit, - className, - checkedFlagKey, -}: Props) { - const { t } = useTranslation(undefined, { keyPrefix: 'admin_console.upsell' }); - const { currentSku } = useContext(SubscriptionDataContext); - const { configs, updateConfigs } = useConfigs(); - - // Display null when loading - if (!configs) { - return null; - } - - const { checkedChargeNotification } = configs; - - if ( - Boolean(checkedChargeNotification?.[checkedFlagKey]) || - !hasSurpassedLimit || - // No charge notification for free plan - currentSku.id === ReservedPlanId.Free - ) { - return null; - } - - return ( - { - void updateConfigs({ - checkedChargeNotification: { - ...checkedChargeNotification, - [checkedFlagKey]: true, - }, - }); - }} - > - }} - > - {t('charge_notification_for_quota_limit', { - item: t(`add_on_quota_item.${quotaItemPhraseKey}`, { - ...cond( - // Note: tokens use 'M' as unit - quotaLimit && { - limit: quotaItemPhraseKey === 'tokens' ? quotaLimit / 1_000_000 : quotaLimit, - } - ), - }), - })} - - - ); -} - -export default ChargeNotification; diff --git a/packages/console/src/pages/ApiResources/index.module.scss b/packages/console/src/pages/ApiResources/index.module.scss index 9a9ecfb15..b600047dd 100644 --- a/packages/console/src/pages/ApiResources/index.module.scss +++ b/packages/console/src/pages/ApiResources/index.module.scss @@ -3,7 +3,3 @@ .icon { flex-shrink: 0; } - -.chargeNotification { - margin-top: _.unit(4); -} diff --git a/packages/console/src/pages/ApiResources/index.tsx b/packages/console/src/pages/ApiResources/index.tsx index a9aafb156..fedcfd9b9 100644 --- a/packages/console/src/pages/ApiResources/index.tsx +++ b/packages/console/src/pages/ApiResources/index.tsx @@ -8,17 +8,14 @@ import ApiResourceDark from '@/assets/icons/api-resource-dark.svg?react'; import ApiResource from '@/assets/icons/api-resource.svg?react'; import ManagementApiResourceDark from '@/assets/icons/management-api-resource-dark.svg?react'; import ManagementApiResource from '@/assets/icons/management-api-resource.svg?react'; -import ChargeNotification from '@/components/ChargeNotification'; import EmptyDataPlaceholder from '@/components/EmptyDataPlaceholder'; import ItemPreview from '@/components/ItemPreview'; import ListPage from '@/components/ListPage'; import { defaultPageSize } from '@/consts'; -import { isCloud } from '@/consts/env'; import { ApiResourceDetailsTabs } from '@/consts/page-tabs'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import Tag from '@/ds-components/Tag'; import type { RequestError } from '@/hooks/use-api'; -import useApiResourcesUsage from '@/hooks/use-api-resources-usage'; import useSearchParametersWatcher from '@/hooks/use-search-parameters-watcher'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import useTheme from '@/hooks/use-theme'; @@ -41,7 +38,6 @@ const icons = { function ApiResources() { const { search } = useLocation(); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { hasSurpassedLimit } = useApiResourcesUsage(); const [{ page }, updateSearchParameters] = useSearchParametersWatcher({ page: 1, }); @@ -78,16 +74,6 @@ function ApiResources() { }); }, }} - subHeader={ - isCloud && ( - - ) - } table={{ rowGroups: [{ key: 'apiResources', data: apiResources }], rowIndexKey: 'id', diff --git a/packages/console/src/pages/Applications/index.module.scss b/packages/console/src/pages/Applications/index.module.scss index e34e24b15..fcde4a1c2 100644 --- a/packages/console/src/pages/Applications/index.module.scss +++ b/packages/console/src/pages/Applications/index.module.scss @@ -1,9 +1,5 @@ @use '@/scss/underscore' as _; -.chargeNotification { - margin: _.unit(4) 0 0; -} - .icon { flex-shrink: 0; } diff --git a/packages/console/src/pages/Applications/index.tsx b/packages/console/src/pages/Applications/index.tsx index 56c870b25..76ef70ead 100644 --- a/packages/console/src/pages/Applications/index.tsx +++ b/packages/console/src/pages/Applications/index.tsx @@ -6,17 +6,14 @@ import { useLocation } from 'react-router-dom'; import Plus from '@/assets/icons/plus.svg?react'; import ApplicationCreation from '@/components/ApplicationCreation'; -import ChargeNotification from '@/components/ChargeNotification'; import { type SelectedGuide } from '@/components/Guide/GuideCard'; import ApplicationPreview from '@/components/ItemPreview/ApplicationPreview'; import PageMeta from '@/components/PageMeta'; -import { isCloud } from '@/consts/env'; import Button from '@/ds-components/Button'; import CardTitle from '@/ds-components/CardTitle'; import CopyToClipboard from '@/ds-components/CopyToClipboard'; import TabNav, { TabNavItem } from '@/ds-components/TabNav'; import Table from '@/ds-components/Table'; -import useApplicationsUsage from '@/hooks/use-applications-usage'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import pageLayout from '@/scss/page-layout.module.scss'; import { buildUrl } from '@/utils/url'; @@ -54,7 +51,6 @@ function Applications({ tab }: Props) { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const isCreating = match(createApplicationPathname); - const { hasMachineToMachineAppsSurpassedLimit } = useApplicationsUsage(); /** * Selected guide from the guide library * - `undefined`: No guide is selected @@ -121,15 +117,6 @@ function Applications({ tab }: Props) { /> )} - {isCloud && ( - - )} - {showThirdPartyApplicationTab && (
@@ -81,16 +72,6 @@ function CurrentPlan({ periodicUsage: rawPeriodicUsage }: Props) { periodicUsage={rawPeriodicUsage} className={styles.notification} /> - ); diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss index d99149905..7966848fd 100644 --- a/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss +++ b/packages/console/src/pages/TenantSettings/TenantMembers/index.module.scss @@ -5,10 +5,6 @@ flex-direction: column; gap: _.unit(4); - .chargeNotification { - margin: _.unit(4) 0 0; - } - .tabButtons { display: flex; align-items: center; diff --git a/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx b/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx index b989698f9..965c71ea8 100644 --- a/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx +++ b/packages/console/src/pages/TenantSettings/TenantMembers/index.tsx @@ -7,7 +7,6 @@ import InvitationIcon from '@/assets/icons/invitation.svg?react'; import MembersIcon from '@/assets/icons/members.svg?react'; import PlusIcon from '@/assets/icons/plus.svg?react'; import { useAuthedCloudApi } from '@/cloud/hooks/use-cloud-api'; -import ChargeNotification from '@/components/ChargeNotification'; import { TenantSettingsTabs } from '@/consts'; import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; @@ -16,11 +15,9 @@ import useCurrentTenantScopes from '@/hooks/use-current-tenant-scopes'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import InviteMemberModal from './InviteMemberModal'; -import useTenantMembersUsage from './hooks'; import styles from './index.module.scss'; function TenantMembers() { - const { hasTenantMembersSurpassedLimit } = useTenantMembersUsage(); const { navigate, match } = useTenantPathname(); const [showInviteModal, setShowInviteModal] = useState(false); const { @@ -39,12 +36,6 @@ function TenantMembers() { return (
- {canInviteMember && (