Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

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

Browse source
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
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/console/src/pages/TenantSettings/Subscription/CurrentPlan/index.tsx
View file

@ -1,5 +1,5 @@
import { cond } from '@silverhand/essentials';
import { useContext } from 'react';
import { useContext, useMemo } from 'react';
import { type SubscriptionUsage, type Subscription } from '@/cloud/types/router';
import BillInfo from '@/components/BillInfo';
@ -28,7 +28,7 @@ type Props = {
};
function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Props) {
const { currentSku, currentSubscriptionUsage, currentSubscriptionQuota } =
const { currentSku, currentSubscription, currentSubscriptionUsage, currentSubscriptionQuota } =
useContext(SubscriptionDataContext);
const {
id,
@ -36,6 +36,14 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
quota: { tokenLimit },
} = 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
? hasSurpassedSubscriptionQuotaLimit({
quotaKey: 'tokenLimit',
@ -66,10 +74,11 @@ function CurrentPlan({ subscription, subscriptionPlan, subscriptionUsage }: Prop
/>
</FormField>
<FormField title="subscription.next_bill">
{/* TODO: update the value once https://github.com/logto-io/cloud/pull/830 is merged. */}
<BillInfo
cost={subscriptionUsage.cost}
isManagePaymentVisible={Boolean(subscriptionUsage.cost)}
cost={isDevFeaturesEnabled ? upcomingCost : subscriptionUsage.cost}
isManagePaymentVisible={Boolean(
isDevFeaturesEnabled ? upcomingCost : subscriptionUsage.cost
)}
/>
</FormField>
<MauLimitExceedNotification