mirror of
https://github.com/Unleash/unleash.git
synced 2025-03-27 00:19:39 +01:00
fix: attempt a react friendly fix of summing (#7151)
## About the changes Summing on Billing page got a little wonky after changing how the summing worked when the estimation flag is off. This attempts to return it to previous way of showing numbers when flag is off If you go directly to the billing page it will not add user calculations to the total. If you however interact with the UI, like change tabs back and forth, it will suddenly show the correct sum:   --------- Co-authored-by: Nuno Góis <github@nunogois.com> Co-authored-by: Gastón Fournier <gaston@getunleash.io>
This commit is contained in:
parent
73f0cb6180
commit
bc6b23c740
1
.github/workflows/build_frontend_prs.yml
vendored
1
.github/workflows/build_frontend_prs.yml
vendored
@ -8,6 +8,7 @@ on:
|
|||||||
jobs:
|
jobs:
|
||||||
build:
|
build:
|
||||||
runs-on: ubuntu-latest
|
runs-on: ubuntu-latest
|
||||||
|
name: build
|
||||||
defaults:
|
defaults:
|
||||||
run:
|
run:
|
||||||
working-directory: frontend
|
working-directory: frontend
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import type { FC } from 'react';
|
import type { FC } from 'react';
|
||||||
import { useState, useEffect } from 'react';
|
import { useMemo } from 'react';
|
||||||
import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
|
import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import CheckIcon from '@mui/icons-material/Check';
|
import CheckIcon from '@mui/icons-material/Check';
|
||||||
@ -16,9 +16,9 @@ import { GridRow } from 'component/common/GridRow/GridRow';
|
|||||||
import { GridCol } from 'component/common/GridCol/GridCol';
|
import { GridCol } from 'component/common/GridCol/GridCol';
|
||||||
import { Badge } from 'component/common/Badge/Badge';
|
import { Badge } from 'component/common/Badge/Badge';
|
||||||
import { GridColLink } from './GridColLink/GridColLink';
|
import { GridColLink } from './GridColLink/GridColLink';
|
||||||
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
|
|
||||||
import { useTrafficDataEstimation } from 'hooks/useTrafficData';
|
import { useTrafficDataEstimation } from 'hooks/useTrafficData';
|
||||||
import { useUiFlag } from 'hooks/useUiFlag';
|
import { useUiFlag } from 'hooks/useUiFlag';
|
||||||
|
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
|
||||||
|
|
||||||
const StyledPlanBox = styled('aside')(({ theme }) => ({
|
const StyledPlanBox = styled('aside')(({ theme }) => ({
|
||||||
padding: theme.spacing(2.5),
|
padding: theme.spacing(2.5),
|
||||||
@ -78,9 +78,9 @@ interface IBillingPlanProps {
|
|||||||
const proPlanIncludedRequests = 53_000_000;
|
const proPlanIncludedRequests = 53_000_000;
|
||||||
|
|
||||||
export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
|
export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
|
||||||
const { users } = useUsers();
|
const { users, loading } = useUsers();
|
||||||
const expired = trialHasExpired(instanceStatus);
|
const expired = trialHasExpired(instanceStatus);
|
||||||
const { uiConfig, isPro } = useUiConfig();
|
const { isPro } = useUiConfig();
|
||||||
|
|
||||||
const {
|
const {
|
||||||
currentPeriod,
|
currentPeriod,
|
||||||
@ -104,37 +104,39 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
|
|||||||
|
|
||||||
const planPrice = price[instanceStatus.plan];
|
const planPrice = price[instanceStatus.plan];
|
||||||
const seats = instanceStatus.seats ?? 5;
|
const seats = instanceStatus.seats ?? 5;
|
||||||
|
|
||||||
const freeAssigned = Math.min(eligibleUsers.length, seats);
|
const freeAssigned = Math.min(eligibleUsers.length, seats);
|
||||||
const paidAssigned = eligibleUsers.length - freeAssigned;
|
const paidAssigned = eligibleUsers.length - freeAssigned;
|
||||||
const paidAssignedPrice = price.user * paidAssigned;
|
const paidAssignedPrice = price.user * paidAssigned;
|
||||||
const finalPrice = planPrice + paidAssignedPrice;
|
|
||||||
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
|
|
||||||
const [totalCost, setTotalCost] = useState(0);
|
|
||||||
|
|
||||||
const flagEnabled = useUiFlag('displayTrafficDataUsage');
|
|
||||||
const [overageCost, setOverageCost] = useState(0);
|
|
||||||
|
|
||||||
|
const displayTrafficDataUsageEnabled = useUiFlag('displayTrafficDataUsage');
|
||||||
const includedTraffic = isPro() ? proPlanIncludedRequests : 0;
|
const includedTraffic = isPro() ? proPlanIncludedRequests : 0;
|
||||||
const traffic = useInstanceTrafficMetrics(currentPeriod.key);
|
const traffic = useInstanceTrafficMetrics(currentPeriod.key);
|
||||||
|
|
||||||
useEffect(() => {
|
const overageCost = useMemo(() => {
|
||||||
if (flagEnabled && includedTraffic > 0) {
|
if (!displayTrafficDataUsageEnabled || !includedTraffic) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
const trafficData = toChartData(
|
const trafficData = toChartData(
|
||||||
getDayLabels(currentPeriod.dayCount),
|
getDayLabels(currentPeriod.dayCount),
|
||||||
traffic,
|
traffic,
|
||||||
endpointsInfo,
|
endpointsInfo,
|
||||||
);
|
);
|
||||||
const totalTraffic = toTrafficUsageSum(trafficData);
|
const totalTraffic = toTrafficUsageSum(trafficData);
|
||||||
const overageCostCalc = calculateOverageCost(
|
return calculateOverageCost(totalTraffic, includedTraffic);
|
||||||
totalTraffic,
|
}, [
|
||||||
|
displayTrafficDataUsageEnabled,
|
||||||
includedTraffic,
|
includedTraffic,
|
||||||
);
|
traffic,
|
||||||
setOverageCost(overageCostCalc);
|
currentPeriod,
|
||||||
setTotalCost(finalPrice + overageCostCalc);
|
endpointsInfo,
|
||||||
} else {
|
]);
|
||||||
setTotalCost(finalPrice);
|
|
||||||
}
|
const totalCost = planPrice + paidAssignedPrice + overageCost;
|
||||||
}, [traffic]);
|
|
||||||
|
const inactive = instanceStatus.state !== InstanceState.ACTIVE;
|
||||||
|
|
||||||
|
if (loading) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid item xs={12} md={7}>
|
<Grid item xs={12} md={7}>
|
||||||
@ -256,7 +258,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
|
|||||||
</GridCol>
|
</GridCol>
|
||||||
</GridRow>
|
</GridRow>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={flagEnabled && overageCost > 0}
|
condition={overageCost > 0}
|
||||||
show={
|
show={
|
||||||
<GridRow>
|
<GridRow>
|
||||||
<GridCol vertical>
|
<GridCol vertical>
|
||||||
|
Loading…
Reference in New Issue
Block a user