From bc6b23c740715b40b2a8d3bffc739fa59a85b097 Mon Sep 17 00:00:00 2001
From: David Leek <david@getunleash.io>
Date: Tue, 28 May 2024 09:08:23 +0200
Subject: [PATCH] fix: attempt a react friendly fix of summing (#7151)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .github/workflows/build_frontend_prs.yml      |  1 +
 .../BillingPlan/BillingPlan.tsx               | 58 ++++++++++---------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/.github/workflows/build_frontend_prs.yml b/.github/workflows/build_frontend_prs.yml
index cce3085b0b5..0addcd56912 100644
--- a/.github/workflows/build_frontend_prs.yml
+++ b/.github/workflows/build_frontend_prs.yml
@@ -8,6 +8,7 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    name: build
     defaults:
       run:
         working-directory: frontend
diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx
index 96b6fe75bf6..67bb86eac3e 100644
--- a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx
+++ b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx
@@ -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';
@@ -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),
@@ -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,
@@ -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}>
@@ -256,7 +258,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                                     </GridCol>
                                 </GridRow>
                                 <ConditionallyRender
-                                    condition={flagEnabled && overageCost > 0}
+                                    condition={overageCost > 0}
                                     show={
                                         <GridRow>
                                             <GridCol vertical>