From 61f0707b26971c75bebf4d3c43cacb7543aabe7b Mon Sep 17 00:00:00 2001 From: David Leek Date: Fri, 24 May 2024 15:48:41 +0200 Subject: [PATCH 1/4] fix: attempt a react friendly fix of summing --- .../BillingDashboard/BillingPlan/BillingPlan.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx index 96b6fe75bf60..b8d270c5c371 100644 --- a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx +++ b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx @@ -131,8 +131,6 @@ export const BillingPlan: FC = ({ instanceStatus }) => { ); setOverageCost(overageCostCalc); setTotalCost(finalPrice + overageCostCalc); - } else { - setTotalCost(finalPrice); } }, [traffic]); @@ -313,7 +311,18 @@ export const BillingPlan: FC = ({ instanceStatus }) => { fontSize: '2rem', })} > - ${totalCost.toFixed(2)} + 0 + } + show={`$${totalCost.toFixed( + 2, + )}`} + elseShow={`$${finalPrice.toFixed( + 2, + )}`} + /> From 457b1c6f78a7793ecfb3d47c50f726d50f3ca625 Mon Sep 17 00:00:00 2001 From: David Leek Date: Mon, 27 May 2024 08:57:27 +0200 Subject: [PATCH 2/4] fix: billing total calculated with useEffect chain --- .../BillingPlan/BillingPlan.tsx | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx index b8d270c5c371..2b043eff2df9 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 { useEffect, useState } 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), @@ -104,19 +104,33 @@ export const BillingPlan: FC = ({ 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 [freeAssigned, setFreeAssigned] = useState(0); + const [paidAssigned, setPaidAssigned] = useState(0); + const [paidAssignedPrice, setPaidAssignedPrice] = useState(0); + const [finalPrice, setFinalPrice] = useState(planPrice); const [totalCost, setTotalCost] = useState(0); - - const flagEnabled = useUiFlag('displayTrafficDataUsage'); - const [overageCost, setOverageCost] = useState(0); - const includedTraffic = isPro() ? proPlanIncludedRequests : 0; + const [overageCost, setOverageCost] = useState(0); const traffic = useInstanceTrafficMetrics(currentPeriod.key); + useEffect(() => { + setFreeAssigned(Math.min(eligibleUsers.length, seats)); + }, [users]); + + useEffect(() => { + setPaidAssigned(eligibleUsers.length - freeAssigned); + }, [freeAssigned]); + + useEffect(() => { + setPaidAssignedPrice(price.user * paidAssigned); + }, [paidAssigned]); + + useEffect(() => { + setFinalPrice(planPrice + paidAssignedPrice); + }, [paidAssignedPrice]); + + const flagEnabled = useUiFlag('displayTrafficDataUsage'); + useEffect(() => { if (flagEnabled && includedTraffic > 0) { const trafficData = toChartData( @@ -132,7 +146,9 @@ export const BillingPlan: FC = ({ instanceStatus }) => { setOverageCost(overageCostCalc); setTotalCost(finalPrice + overageCostCalc); } - }, [traffic]); + }, [finalPrice, traffic]); + + const inactive = instanceStatus.state !== InstanceState.ACTIVE; return ( From 08d1aee31ab09e2188e5d18993ef01594e778dd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Mon, 27 May 2024 14:44:03 +0100 Subject: [PATCH 3/4] refactor: billing page counting weirdness (#7168) --- .../BillingPlan/BillingPlan.tsx | 87 +++++++------------ 1 file changed, 32 insertions(+), 55 deletions(-) diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingPlan/BillingPlan.tsx index 2b043eff2df9..67bb86eac3e5 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 { useEffect, useState } 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'; @@ -78,9 +78,9 @@ interface IBillingPlanProps { const proPlanIncludedRequests = 53_000_000; export const BillingPlan: FC = ({ instanceStatus }) => { - const { users } = useUsers(); + const { users, loading } = useUsers(); const expired = trialHasExpired(instanceStatus); - const { uiConfig, isPro } = useUiConfig(); + const { isPro } = useUiConfig(); const { currentPeriod, @@ -104,52 +104,40 @@ export const BillingPlan: FC = ({ instanceStatus }) => { const planPrice = price[instanceStatus.plan]; const seats = instanceStatus.seats ?? 5; - const [freeAssigned, setFreeAssigned] = useState(0); - const [paidAssigned, setPaidAssigned] = useState(0); - const [paidAssignedPrice, setPaidAssignedPrice] = useState(0); - const [finalPrice, setFinalPrice] = useState(planPrice); - const [totalCost, setTotalCost] = useState(0); - const includedTraffic = isPro() ? proPlanIncludedRequests : 0; - const [overageCost, setOverageCost] = useState(0); - const traffic = useInstanceTrafficMetrics(currentPeriod.key); - - useEffect(() => { - setFreeAssigned(Math.min(eligibleUsers.length, seats)); - }, [users]); - useEffect(() => { - setPaidAssigned(eligibleUsers.length - freeAssigned); - }, [freeAssigned]); + const freeAssigned = Math.min(eligibleUsers.length, seats); + const paidAssigned = eligibleUsers.length - freeAssigned; + const paidAssignedPrice = price.user * paidAssigned; - useEffect(() => { - setPaidAssignedPrice(price.user * paidAssigned); - }, [paidAssigned]); - - useEffect(() => { - setFinalPrice(planPrice + paidAssignedPrice); - }, [paidAssignedPrice]); - - const flagEnabled = useUiFlag('displayTrafficDataUsage'); + 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); + const overageCost = useMemo(() => { + if (!displayTrafficDataUsageEnabled || !includedTraffic) { + return 0; } - }, [finalPrice, 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 ( @@ -270,7 +258,7 @@ export const BillingPlan: FC = ({ instanceStatus }) => { 0} + condition={overageCost > 0} show={ @@ -327,18 +315,7 @@ export const BillingPlan: FC = ({ instanceStatus }) => { fontSize: '2rem', })} > - 0 - } - show={`$${totalCost.toFixed( - 2, - )}`} - elseShow={`$${finalPrice.toFixed( - 2, - )}`} - /> + ${totalCost.toFixed(2)} From 2dde5207c65c68c298db8758ec1ded82f59b0153 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gast=C3=B3n=20Fournier?= Date: Tue, 28 May 2024 08:55:09 +0200 Subject: [PATCH 4/4] Fix build workflow name --- .github/workflows/build_frontend_prs.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/build_frontend_prs.yml b/.github/workflows/build_frontend_prs.yml index cce3085b0b5e..0addcd569122 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