0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-30 20:33:54 -05:00

fix(console): fix PlanUsage not displayed for enterprise plan w/o subscription (#6611)

* fix(console): fix PlanUsage not displayed for enterprise plan w/o subscription

* fix(console): do not show next billing hint for enterprise plan

* fix(console): add comments
This commit is contained in:
Darcy Ye 2024-09-20 19:55:33 +08:00 committed by GitHub
parent 9df5866553
commit 1aa5b262b0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 16 deletions

View file

@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
import Tip from '@/assets/icons/tip.svg?react'; import Tip from '@/assets/icons/tip.svg?react';
import { addOnPricingExplanationLink } from '@/consts'; import { addOnPricingExplanationLink } from '@/consts';
import { SubscriptionDataContext } from '@/contexts/SubscriptionDataProvider';
import { TenantsContext } from '@/contexts/TenantsProvider'; import { TenantsContext } from '@/contexts/TenantsProvider';
import Button from '@/ds-components/Button'; import Button from '@/ds-components/Button';
import DynamicT from '@/ds-components/DynamicT'; import DynamicT from '@/ds-components/DynamicT';
@ -22,6 +23,9 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
const { currentTenantId } = useContext(TenantsContext); const { currentTenantId } = useContext(TenantsContext);
const { visitManagePaymentPage } = useSubscribe(); const { visitManagePaymentPage } = useSubscribe();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const {
currentSubscription: { isEnterprisePlan },
} = useContext(SubscriptionDataContext);
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
@ -38,21 +42,23 @@ function BillInfo({ cost, isManagePaymentVisible }: Props) {
</ToggleTip> </ToggleTip>
)} )}
</div> </div>
<div className={styles.description}> {!isEnterprisePlan && (
<Trans <div className={styles.description}>
components={{ <Trans
a: ( components={{
<TextLink a: (
className={styles.articleLink} <TextLink
href={addOnPricingExplanationLink} className={styles.articleLink}
targetBlank="noopener" href={addOnPricingExplanationLink}
/> targetBlank="noopener"
), />
}} ),
> }}
{t('subscription.next_bill_hint')} >
</Trans> {t('subscription.next_bill_hint')}
</div> </Trans>
</div>
)}
</div> </div>
{isManagePaymentVisible && ( {isManagePaymentVisible && (
<Button <Button

View file

@ -83,7 +83,11 @@ function PlanUsage({ periodicUsage: rawPeriodicUsage }: Props) {
.filter( .filter(
(key) => (key) =>
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
isAddOnAvailable || (onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit')) isAddOnAvailable ||
// TODO: design a flow for enterprise tenants onboarding.
// Show all usages for Enterprise plan since some of the enterprise tenants does not have Stripe subscription, as a result, the `isAddOnAvailable` will be undefined in this case, even if we will deprecate `isAddOnAvailable` soon, the plan usage will not be automatically fixed for these enterprise tenants.
isEnterprisePlan ||
(onlyShowPeriodicUsage && (key === 'mauLimit' || key === 'tokenLimit'))
) )
.map((key) => ({ .map((key) => ({
usage: getUsageByKey(key, { periodicUsage, countBasedUsage: currentSubscriptionUsage }), usage: getUsageByKey(key, { periodicUsage, countBasedUsage: currentSubscriptionUsage }),