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:
parent
0671208d0f
commit
08e7c52365
1 changed files with 14 additions and 5 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue