From c791847879f8b5eecb865a953e25c6d5a9e97452 Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Mon, 12 Aug 2024 19:47:08 +0800 Subject: [PATCH] refactor: stop using GET /:tenantId/usage API and GET /tenants usage field (#6434) --- packages/console/src/cloud/types/router.ts | 3 --- .../src/components/MauExceededModal/index.tsx | 24 +++++------------ .../src/components/PlanUsage/index.tsx | 13 +++++---- .../use-new-subscription-data.ts | 4 +-- .../src/hooks/use-subscription-usage.ts | 18 ------------- .../MauLimitExceededNotification/index.tsx | 6 ++--- .../Subscription/CurrentPlan/index.tsx | 27 +++++-------------- .../TenantSettings/Subscription/index.tsx | 26 +----------------- 8 files changed, 23 insertions(+), 98 deletions(-) delete mode 100644 packages/console/src/hooks/use-subscription-usage.ts diff --git a/packages/console/src/cloud/types/router.ts b/packages/console/src/cloud/types/router.ts index afdce6f43..ac66c42ee 100644 --- a/packages/console/src/cloud/types/router.ts +++ b/packages/console/src/cloud/types/router.ts @@ -15,9 +15,6 @@ export type LogtoSkuResponse = GetArrayElementType; -/** @deprecated */ -export type SubscriptionUsage = GuardedResponse; - /* ===== Use `New` in the naming to avoid confusion with legacy types ===== */ export type NewSubscriptionUsageResponse = GuardedResponse< GetRoutes['/api/tenants/:tenantId/subscription-usage'] diff --git a/packages/console/src/components/MauExceededModal/index.tsx b/packages/console/src/components/MauExceededModal/index.tsx index 835a14b40..fb14bb86c 100644 --- a/packages/console/src/components/MauExceededModal/index.tsx +++ b/packages/console/src/components/MauExceededModal/index.tsx @@ -4,10 +4,8 @@ import ReactModal from 'react-modal'; import PlanUsage from '@/components/PlanUsage'; import { contactEmailLink } from '@/consts'; -import { isDevFeaturesEnabled } from '@/consts/env'; import { subscriptionPage } from '@/consts/pages'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; -import { TenantsContext } from '@/contexts/TenantsProvider'; import Button from '@/ds-components/Button'; import FormField from '@/ds-components/FormField'; import InlineNotification from '@/ds-components/InlineNotification'; @@ -20,8 +18,6 @@ import PlanName from '../PlanName'; import styles from './index.module.scss'; function MauExceededModal() { - const { currentTenant } = useContext(TenantsContext); - const { usage } = currentTenant ?? {}; const { currentPlan, currentSubscription, @@ -38,19 +34,15 @@ function MauExceededModal() { setHasClosed(true); }; - if (!usage || hasClosed) { + if (hasClosed) { return null; } - const { - quota: { mauLimit }, - name: planName, - } = currentPlan; + const { name: planName } = currentPlan; - const isMauExceeded = isDevFeaturesEnabled - ? currentSubscriptionQuota.mauLimit !== null && - currentSubscriptionUsage.mauLimit >= currentSubscriptionQuota.mauLimit - : mauLimit !== null && usage.activeUsers >= mauLimit; + const isMauExceeded = + currentSubscriptionQuota.mauLimit !== null && + currentSubscriptionUsage.mauLimit >= currentSubscriptionQuota.mauLimit; if (!isMauExceeded) { return null; @@ -93,11 +85,7 @@ function MauExceededModal() { - + diff --git a/packages/console/src/components/PlanUsage/index.tsx b/packages/console/src/components/PlanUsage/index.tsx index 6714d41f0..8da722445 100644 --- a/packages/console/src/components/PlanUsage/index.tsx +++ b/packages/console/src/components/PlanUsage/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import dayjs from 'dayjs'; import { useContext } from 'react'; -import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router'; +import { type Subscription } from '@/cloud/types/router'; import { isDevFeaturesEnabled } from '@/consts/env'; import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider'; import DynamicT from '@/ds-components/DynamicT'; @@ -16,15 +16,13 @@ import styles from './index.module.scss'; import { usageKeys, usageKeyMap, titleKeyMap, tooltipKeyMap } from './utils'; type Props = { - /** @deprecated */ - readonly subscriptionUsage: SubscriptionUsage; /** @deprecated */ readonly currentSubscription: Subscription; /** @deprecated */ readonly currentPlan: SubscriptionPlan; }; -function PlanUsage({ subscriptionUsage, currentSubscription, currentPlan }: Props) { +function PlanUsage({ currentSubscription, currentPlan }: Props) { const { currentSubscriptionQuota, currentSubscriptionUsage, @@ -35,9 +33,10 @@ function PlanUsage({ subscriptionUsage, currentSubscription, currentPlan }: Prop ? currentSubscriptionFromNewPricingModel : currentSubscription; - const [activeUsers, mauLimit] = isDevFeaturesEnabled - ? [currentSubscriptionUsage.mauLimit, currentSubscriptionQuota.mauLimit] - : [subscriptionUsage.activeUsers, currentPlan.quota.mauLimit]; + const [activeUsers, mauLimit] = [ + currentSubscriptionUsage.mauLimit, + isDevFeaturesEnabled ? currentSubscriptionQuota.mauLimit : currentPlan.quota.mauLimit, + ]; const usagePercent = conditional(mauLimit && activeUsers / mauLimit); diff --git a/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts b/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts index bee650642..b7118bdb4 100644 --- a/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts +++ b/packages/console/src/contexts/SubscriptionDataProvider/use-new-subscription-data.ts @@ -10,7 +10,7 @@ import { defaultSubscriptionQuota, defaultSubscriptionUsage, } from '@/consts'; -import { isCloud, isDevFeaturesEnabled } from '@/consts/env'; +import { isCloud } from '@/consts/env'; import { TenantsContext } from '@/contexts/TenantsProvider'; import useLogtoSkus from '@/hooks/use-logto-skus'; @@ -36,7 +36,7 @@ const useNewSubscriptionData: () => NewSubscriptionContext & { isLoading: boolea isLoading: isSubscriptionUsageDataLoading, mutate: mutateSubscriptionQuotaAndUsages, } = useSWR( - isCloud && isDevFeaturesEnabled && tenantId && `/api/tenants/${tenantId}/subscription-usage`, + isCloud && tenantId && `/api/tenants/${tenantId}/subscription-usage`, async () => cloudApi.get('/api/tenants/:tenantId/subscription-usage', { params: { tenantId }, diff --git a/packages/console/src/hooks/use-subscription-usage.ts b/packages/console/src/hooks/use-subscription-usage.ts deleted file mode 100644 index 728424f05..000000000 --- a/packages/console/src/hooks/use-subscription-usage.ts +++ /dev/null @@ -1,18 +0,0 @@ -import useSWR from 'swr'; - -import { useCloudApi } from '@/cloud/hooks/use-cloud-api'; -import { type SubscriptionUsage } from '@/cloud/types/router'; -import { isCloud } from '@/consts/env'; - -/** @deprecated */ -const useSubscriptionUsage = (tenantId: string) => { - const cloudApi = useCloudApi(); - - return useSWR(isCloud && `/api/tenants/${tenantId}/usage`, async () => - cloudApi.get('/api/tenants/:tenantId/usage', { - params: { tenantId }, - }) - ); -}; - -export default useSubscriptionUsage; diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx index 722b25844..049c5ddf6 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/MauLimitExceededNotification/index.tsx @@ -20,14 +20,12 @@ import { } from '@/utils/subscription'; type Props = { - /** @deprecated No need to pass in this argument in new pricing model */ - readonly activeUsers: number; /** @deprecated No need to pass in this argument in new pricing model */ readonly currentPlan: SubscriptionPlan; readonly className?: string; }; -function MauLimitExceededNotification({ activeUsers, currentPlan, className }: Props) { +function MauLimitExceededNotification({ currentPlan, className }: Props) { const { currentTenantId } = useContext(TenantsContext); const { subscribe } = useSubscribe(); const { show } = useConfirmModal(); @@ -52,7 +50,7 @@ function MauLimitExceededNotification({ activeUsers, currentPlan, className }: P if ( mauLimit === null || // Unlimited - (isDevFeaturesEnabled ? currentSubscriptionUsage.mauLimit : activeUsers) < mauLimit || + currentSubscriptionUsage.mauLimit < mauLimit || !proPlan || !proSku ) { diff --git a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx index f01a9a590..85789b7b6 100644 --- a/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx +++ b/packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx @@ -1,7 +1,7 @@ import { cond } from '@silverhand/essentials'; import { useContext, useMemo } from 'react'; -import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router'; +import { type Subscription } from '@/cloud/types/router'; import BillInfo from '@/components/BillInfo'; import ChargeNotification from '@/components/ChargeNotification'; import FormCard from '@/components/FormCard'; @@ -23,11 +23,9 @@ type Props = { readonly subscription: Subscription; /** @deprecated */ readonly subscriptionPlan: SubscriptionPlan; - /** @deprecated */ - readonly subscriptionUsage: SubscriptionUsage; }; -function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) { +function CurrentPlan({ subscription, subscriptionPlan }: Props) { const { currentSku, currentSubscription, currentSubscriptionUsage, currentSubscriptionQuota } = useContext(SubscriptionDataContext); const { @@ -52,7 +50,7 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop }) : hasSurpassedQuotaLimit({ quotaKey: 'tokenLimit', - usage: subscriptionUsage.tokenUsage, + usage: currentSubscriptionUsage.tokenLimit, plan: subscriptionPlan, }); @@ -67,25 +65,12 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop - + - + - + ; - } - - if (!subscriptionUsage) { - return null; - } - return (
- +