From 6dae2bf4f64864f4e06cf1f28b6f9ca23eb1747c Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 23 Dec 2024 10:22:26 +0800 Subject: [PATCH] refactor(console): show token usage exceed modal (#6897) show token usage limit exceed modal --- .../index.module.scss | 0 .../index.tsx | 55 ++++++++++++++----- .../TenantNotificationContainer/index.tsx | 6 +- .../translation/admin-console/upsell/index.ts | 5 ++ 4 files changed, 49 insertions(+), 17 deletions(-) rename packages/console/src/components/{MauExceededModal => MauTokenExceededModal}/index.module.scss (100%) rename packages/console/src/components/{MauExceededModal => MauTokenExceededModal}/index.tsx (65%) diff --git a/packages/console/src/components/MauExceededModal/index.module.scss b/packages/console/src/components/MauTokenExceededModal/index.module.scss similarity index 100% rename from packages/console/src/components/MauExceededModal/index.module.scss rename to packages/console/src/components/MauTokenExceededModal/index.module.scss diff --git a/packages/console/src/components/MauExceededModal/index.tsx b/packages/console/src/components/MauTokenExceededModal/index.tsx similarity index 65% rename from packages/console/src/components/MauExceededModal/index.tsx rename to packages/console/src/components/MauTokenExceededModal/index.tsx index 692289ed2..8c4ba9718 100644 --- a/packages/console/src/components/MauExceededModal/index.tsx +++ b/packages/console/src/components/MauTokenExceededModal/index.tsx @@ -14,20 +14,26 @@ import InlineNotification from '@/ds-components/InlineNotification'; import ModalLayout from '@/ds-components/ModalLayout'; import useTenantPathname from '@/hooks/use-tenant-pathname'; import modalStyles from '@/scss/modal.module.scss'; +import { isPaidPlan } from '@/utils/subscription'; import SkuName from '../SkuName'; import styles from './index.module.scss'; -function MauExceededModal() { +function MauTokenExceededModal() { const { - currentSubscription: { planId }, + currentSubscription: { planId, isEnterprisePlan }, } = useContext(SubscriptionDataContext); const { currentTenant } = useContext(TenantsContext); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { navigate } = useTenantPathname(); + const isPaidSubscriptionPlan = useMemo( + () => isPaidPlan(planId, isEnterprisePlan), + [planId, isEnterprisePlan] + ); + const [hasClosed, setHasClosed] = useState(false); const handleCloseModal = () => { setHasClosed(true); @@ -51,7 +57,15 @@ function MauExceededModal() { currentTenant.usage.activeUsers >= currentTenant.quota.mauLimit ); - if (hasClosed || !isMauExceeded) { + const isTokenExceeded = conditional( + currentTenant && + // Token usage add-on will be automatically applied for paid plans + !isPaidSubscriptionPlan && + currentTenant.quota.tokenLimit !== null && + currentTenant.usage.tokenUsage >= currentTenant.quota.tokenLimit + ); + + if (hasClosed || (!isMauExceeded && !isTokenExceeded)) { return null; } @@ -64,7 +78,7 @@ function MauExceededModal() { onRequestClose={handleCloseModal} > @@ -82,15 +96,28 @@ function MauExceededModal() { } onClose={handleCloseModal} > - - , - }} - > - {t('upsell.mau_exceeded_modal.notification')} - - + {isMauExceeded && ( + + , + }} + > + {t('upsell.mau_exceeded_modal.notification')} + + + )} + {isTokenExceeded && ( + + , + }} + > + {t('upsell.token_exceeded_modal.notification')} + + + )} @@ -99,4 +126,4 @@ function MauExceededModal() { ); } -export default MauExceededModal; +export default MauTokenExceededModal; diff --git a/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx b/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx index 40c201448..7523d95cf 100644 --- a/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx +++ b/packages/console/src/containers/AppContent/TenantNotificationContainer/index.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import MauExceededModal from '@/components/MauExceededModal'; +import MauTokenExceededModal from '@/components/MauTokenExceededModal'; import PaymentOverdueModal from '@/components/PaymentOverdueModal'; import { isCloud } from '@/consts/env'; import { TenantsContext } from '@/contexts/TenantsProvider'; @@ -18,10 +18,10 @@ function TenantNotificationContainer() { return ( <> - {/* Note: we won't check the MAU limit and payment for dev tenants */} + {/* Note: we won't check the MAU limit, token limit and payment for dev tenants */} {!isDevTenant && ( <> - + )} diff --git a/packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts b/packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts index aa4776702..a5359e424 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/upsell/index.ts @@ -25,6 +25,11 @@ const upsell = { 'Your current MAU has exceeded the limit of . Please upgrade your plan to premium promptly to avoid suspension of Logto service. ', update_plan: 'Update Plan', }, + token_exceeded_modal: { + title: 'Token usage exceeded the limit. Upgrade your plan.', + notification: + 'You have exceeded your token usage limit. Users will not be able to access the Logto service properly. Please upgrade your plan to premium promptly to avoid any inconvenience.', + }, payment_overdue_modal: { title: 'Bill payment overdue', notification: