0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-06 20:40:08 -05:00

refactor(console): update billing info showed in subscription details page (#6384)

This commit is contained in:
Darcy Ye 2024-08-02 11:47:25 +08:00 committed by GitHub
parent 0671208d0f
commit 08e7c52365
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,5 +1,5 @@
import { cond } from '@silverhand/essentials'; import { cond } from '@silverhand/essentials';
import { useContext } from 'react'; import { useContext, useMemo } from 'react';
import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router'; import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router';
import BillInfo from '@/components/BillInfo'; import BillInfo from '@/components/BillInfo';
@ -28,7 +28,7 @@ type Props = {
}; };
function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) { function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) {
const { currentSku, currentSubscriptionUsage, currentSubscriptionQuota } = const { currentSku, currentSubscription, currentSubscriptionUsage, currentSubscriptionQuota } =
useContext(SubscriptionDataContext); useContext(SubscriptionDataContext);
const { const {
id, id,
@ -36,6 +36,14 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
quota: { tokenLimit }, quota: { tokenLimit },
} = subscriptionPlan; } = subscriptionPlan;
/**
* After the new pricing model goes live, `upcomingInvoice` will always exist. However, for compatibility reasons, the price of the SKU's corresponding `unitPrice` will be used as a fallback when it does not exist. If `unitPrice` also does not exist, it means that the tenant does not have any applicable paid subscription, and the bill will be 0.
*/
const upcomingCost = useMemo(
() => currentSubscription.upcomingInvoice?.subtotal ?? currentSku.unitPrice ?? 0,
[currentSku.unitPrice, currentSubscription.upcomingInvoice?.subtotal]
);
const hasTokenSurpassedLimit = isDevFeaturesEnabled const hasTokenSurpassedLimit = isDevFeaturesEnabled
? hasSurpassedSubscriptionQuotaLimit({ ? hasSurpassedSubscriptionQuotaLimit({
quotaKey: 'tokenLimit', quotaKey: 'tokenLimit',
@ -66,10 +74,11 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
/> />
</FormField> </FormField>
<FormField title="subscription.next_bill"> <FormField title="subscription.next_bill">
{/* TODO: update the value once https://github.com/logto-io/cloud/pull/830 is merged. */}
<BillInfo <BillInfo
cost={subscriptionUsage.cost} cost={isDevFeaturesEnabled ? upcomingCost : subscriptionUsage.cost}
isManagePaymentVisible={Boolean(subscriptionUsage.cost)} isManagePaymentVisible={Boolean(
isDevFeaturesEnabled ? upcomingCost : subscriptionUsage.cost
)}
/> />
</FormField> </FormField>
<MauLimitExceedNotification <MauLimitExceedNotification