mirror of
https://github.com/Unleash/unleash.git
synced 2025-10-27 11:02:16 +01:00
feat: only show detailed billing for consumption and payg (#10825)
This commit is contained in:
parent
3f9a726db6
commit
adb1d200ea
@ -11,6 +11,7 @@ import useInvoices from 'hooks/api/getters/useInvoices/useInvoices';
|
|||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
import { BillingInvoices } from './BillingInvoices/BillingInvoices.tsx';
|
import { BillingInvoices } from './BillingInvoices/BillingInvoices.tsx';
|
||||||
import { BillingInfo } from './BillingInfo/BillingInfo.tsx';
|
import { BillingInfo } from './BillingInfo/BillingInfo.tsx';
|
||||||
|
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
|
||||||
|
|
||||||
const StyledHeader = styled(Typography)(({ theme }) => ({
|
const StyledHeader = styled(Typography)(({ theme }) => ({
|
||||||
fontSize: theme.fontSizes.mainHeader,
|
fontSize: theme.fontSizes.mainHeader,
|
||||||
@ -32,6 +33,12 @@ export const Billing = () => {
|
|||||||
useInstanceStatus();
|
useInstanceStatus();
|
||||||
const { invoices } = useInvoices();
|
const { invoices } = useInvoices();
|
||||||
const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
|
const trafficBillingDisplay = useUiFlag('trafficBillingDisplay');
|
||||||
|
const {
|
||||||
|
uiConfig: { billing },
|
||||||
|
} = useUiConfig();
|
||||||
|
|
||||||
|
const eligibleForDetailedBilling =
|
||||||
|
billing === 'pay-as-you-go' || billing === 'enterprise-consumption';
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const hardRefresh = async () => {
|
const hardRefresh = async () => {
|
||||||
@ -41,7 +48,7 @@ export const Billing = () => {
|
|||||||
hardRefresh();
|
hardRefresh();
|
||||||
}, [refetchInstanceStatus, refresh]);
|
}, [refetchInstanceStatus, refresh]);
|
||||||
|
|
||||||
if (trafficBillingDisplay) {
|
if (trafficBillingDisplay && eligibleForDetailedBilling) {
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={(theme) => ({
|
sx={(theme) => ({
|
||||||
|
|||||||
@ -80,7 +80,6 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const isPAYG = billing === 'pay-as-you-go';
|
const isPAYG = billing === 'pay-as-you-go';
|
||||||
const isEnterpriseConsumption = billing === 'enterprise-consumption';
|
|
||||||
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
|
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
|
||||||
const { isCustomBilling } = instanceStatus;
|
const { isCustomBilling } = instanceStatus;
|
||||||
|
|
||||||
@ -102,9 +101,7 @@ export const BillingInfo: FC<BillingInfoProps> = () => {
|
|||||||
<StyledRow>
|
<StyledRow>
|
||||||
<StyledItemTitle>Current plan</StyledItemTitle>{' '}
|
<StyledItemTitle>Current plan</StyledItemTitle>{' '}
|
||||||
<StyledItemValue>
|
<StyledItemValue>
|
||||||
{isPAYG && isEnterpriseConsumption
|
{isPAYG ? 'Pay-as-You-Go' : 'Consumption'}
|
||||||
? 'Consumption'
|
|
||||||
: 'Pay-as-You-Go'}
|
|
||||||
</StyledItemValue>
|
</StyledItemValue>
|
||||||
</StyledRow>
|
</StyledRow>
|
||||||
<StyledRow>
|
<StyledRow>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user