feat: refactor data usage into hooks, estimate monthly added fees (#7048

) - Refactors data processing and overage calculations to separate hooks - Adds support for estimating traffic costs based on monthly usage up to current point - Adds accrued traffic charges to the billing page ![image](https://github.com/Unleash/unleash/assets/707867/39a837c2-5092-49b8-8bbf-46d8757635c0) ![image](https://github.com/Unleash/unleash/assets/707867/55ecfa5e-afe1-4cb6-9aa4-7dd67db4248c)
Unleash · May 17, 2024 · dfc0c3c · dfc0c3c
1 parent 5c4b835
commit dfc0c3c
Show file tree

Hide file tree

Showing 8 changed files with 601 additions and 237 deletions.
diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx
@@ -1,4 +1,5 @@
 import type { FC } from 'react';
+import { useState, useEffect } from 'react';
 import { Alert, Divider, Grid, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import CheckIcon from '@mui/icons-material/Check';
@@ -15,6 +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';
 
 const StyledPlanBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(2.5),
@@ -71,10 +75,21 @@ interface IBillingPlanProps {
     instanceStatus: IInstanceStatus;
 }
 
+const proPlanIncludedRequests = 53_000_000;
+
 export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
     const { users } = useUsers();
     const expired = trialHasExpired(instanceStatus);
-    const { uiConfig } = useUiConfig();
+    const { uiConfig, isPro } = useUiConfig();
+
+    const {
+        currentPeriod,
+        toChartData,
+        toTrafficUsageSum,
+        endpointsInfo,
+        getDayLabels,
+        calculateOverageCost,
+    } = useTrafficDataEstimation();
 
     const eligibleUsers = users.filter((user: any) => user.email);
 
@@ -94,6 +109,32 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
     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 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);
+        }
+    }, [traffic]);
 
     return (
         <Grid item xs={12} md={7}>
@@ -185,7 +226,11 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                                         </Typography>
                                     </GridCol>
                                 </GridRow>
-                                <GridRow>
+                                <GridRow
+                                    sx={(theme) => ({
+                                        marginBottom: theme.spacing(1.5),
+                                    })}
+                                >
                                     <GridCol vertical>
                                         <Typography>
                                             <strong>Paid members</strong>
@@ -210,6 +255,40 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                                         </Typography>
                                     </GridCol>
                                 </GridRow>
+                                <ConditionallyRender
+                                    condition={flagEnabled && overageCost > 0}
+                                    show={
+                                        <GridRow>
+                                            <GridCol vertical>
+                                                <Typography>
+                                                    <strong>
+                                                        Accrued traffic charges
+                                                    </strong>
+                                                    <GridColLink>
+                                                        <Link to='/admin/network/data-usage'>
+                                                            view details
+                                                        </Link>
+                                                    </GridColLink>
+                                                </Typography>
+                                                <StyledInfoLabel>
+                                                    $5 dollar per 1 million
+                                                    started above included data
+                                                </StyledInfoLabel>
+                                            </GridCol>
+                                            <GridCol>
+                                                <Typography
+                                                    sx={(theme) => ({
+                                                        fontSize:
+                                                            theme.fontSizes
+                                                                .mainHeader,
+                                                    })}
+                                                >
+                                                    ${overageCost.toFixed(2)}
+                                                </Typography>
+                                            </GridCol>
+                                        </GridRow>
+                                    }
+                                />
                             </Grid>
                             <StyledDivider />
                             <Grid container>
@@ -223,7 +302,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                                                     theme.fontSizes.mainHeader,
                                             })}
                                         >
-                                            Total per month
+                                            Total
                                         </Typography>
                                     </GridCol>
                                     <GridCol>
@@ -234,7 +313,7 @@ export const BillingPlan: FC<IBillingPlanProps> = ({ instanceStatus }) => {
                                                 fontSize: '2rem',
                                             })}
                                         >
-                                            ${finalPrice.toFixed(2)}
+                                            ${totalCost.toFixed(2)}
                                         </Typography>
                                     </GridCol>
                                 </GridRow>