Skip to content

Commit

Permalink
fix: attempt a react friendly fix of summing (#7151)
Browse files Browse the repository at this point in the history
## 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:


![image](https://github.com/Unleash/unleash/assets/707867/af6eeddf-be3f-42ae-a588-f57c30d739ca)


![image](https://github.com/Unleash/unleash/assets/707867/b4a0b832-a550-4e87-aa69-7b27f96d3beb)

---------

Co-authored-by: Nuno Góis <github@nunogois.com>
Co-authored-by: Gastón Fournier <gaston@getunleash.io>
  • Loading branch information
3 people committed May 28, 2024
1 parent 73f0cb6 commit bc6b23c
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 28 deletions.
1 change: 1 addition & 0 deletions .github/workflows/build_frontend_prs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ on:
jobs:
build:
runs-on: ubuntu-latest
name: build
defaults:
run:
working-directory: frontend
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { FC } from 'react';
import { useState, useEffect } from 'react';
import { useMemo } from 'react';
import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import CheckIcon from '@mui/icons-material/Check';
Expand All @@ -16,9 +16,9 @@ import { GridRow } from 'component/common/GridRow/GridRow';
import { GridCol } from 'component/common/GridCol/GridCol';
import { Badge } from 'component/common/Badge/Badge';
import { GridColLink } from './GridColLink/GridColLink';
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
import { useTrafficDataEstimation } from 'hooks/useTrafficData';
import { useUiFlag } from 'hooks/useUiFlag';
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';

const StyledPlanBox = styled('aside')(({ theme }) => ({
padding: theme.spacing(2.5),
Expand Down Expand Up @@ -78,9 +78,9 @@ interface IBillingPlanProps {
const proPlanIncludedRequests = 53_000_000;

export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
const { users } = useUsers();
const { users, loading } = useUsers();
const expired = trialHasExpired(instanceStatus);
const { uiConfig, isPro } = useUiConfig();
const { isPro } = useUiConfig();

const {
currentPeriod,
Expand All @@ -104,37 +104,39 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {

const planPrice = price[instanceStatus.plan];
const seats = instanceStatus.seats ?? 5;

const freeAssigned = Math.min(eligibleUsers.length, seats);
const paidAssigned = eligibleUsers.length - freeAssigned;
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 traffic = useInstanceTrafficMetrics(currentPeriod.key);

useEffect(() => {
if (flagEnabled && includedTraffic > 0) {
const trafficData = toChartData(
getDayLabels(currentPeriod.dayCount),
traffic,
endpointsInfo,
);
const totalTraffic = toTrafficUsageSum(trafficData);
const overageCostCalc = calculateOverageCost(
totalTraffic,
includedTraffic,
);
setOverageCost(overageCostCalc);
setTotalCost(finalPrice + overageCostCalc);
} else {
setTotalCost(finalPrice);
const overageCost = useMemo(() => {
if (!displayTrafficDataUsageEnabled || !includedTraffic) {
return 0;
}
}, [traffic]);
const trafficData = toChartData(
getDayLabels(currentPeriod.dayCount),
traffic,
endpointsInfo,
);
const totalTraffic = toTrafficUsageSum(trafficData);
return calculateOverageCost(totalTraffic, includedTraffic);
}, [
displayTrafficDataUsageEnabled,
includedTraffic,
traffic,
currentPeriod,
endpointsInfo,
]);

const totalCost = planPrice + paidAssignedPrice + overageCost;

const inactive = instanceStatus.state !== InstanceState.ACTIVE;

if (loading) return null;

return (
<Grid item xs={12} md={7}>
Expand Down Expand Up @@ -256,7 +258,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
</GridCol>
</GridRow>
<ConditionallyRender
condition={flagEnabled && overageCost > 0}
condition={overageCost > 0}
show={
<GridRow>
<GridCol vertical>
Expand Down

0 comments on commit bc6b23c

Please sign in to comment.