billing: calculate overusage into upcoming invoice

livepeer · Jun 29, 2023 · 489a0db · 489a0db
1 parent 5705aa6
commit 489a0db
Showing 1 changed file with 12 additions and 8 deletions.
diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
@@ -88,6 +88,7 @@ const UsageSummary = () => {
   const [overUsageBill, setOverUsageBill] = useState<OverUsageBill | null>(
     null
   );
+  const [upcomingInvoiceTotal, setUpcomingInvoiceTotal] = useState(0);
   const product = getUserProduct(user);
   const prices = product.usage;
   const transcodingPrice = prices[0].price;
@@ -142,6 +143,16 @@ const UsageSummary = () => {
         setOverUsage(overusage);
         const overusageBill = await calculateOverUsageBill(overusage);
         setOverUsageBill(overusageBill);
+        let planPrice =
+          products[user.newStripeProductId]?.monthlyPrice.toLocaleString() ||
+          products[user.stripeProductId]?.monthlyPrice.toLocaleString() ||
+          0;
+        setUpcomingInvoiceTotal(
+          overUsageBill.transcodingBill.total +
+            overUsageBill.deliveryBill.total +
+            overUsageBill.storageBill.total +
+            planPrice
+        );
       }
     };
 
@@ -301,14 +312,7 @@ const UsageSummary = () => {
           <StyledUpcomingIcon />
           Upcoming invoice:{" "}
           <Box css={{ ml: "$1", fontWeight: 600 }}>
-            {usage &&
-              `$${
-                products[
-                  user.newStripeProductId
-                ]?.monthlyPrice.toLocaleString() ||
-                products[user.stripeProductId]?.monthlyPrice.toLocaleString() ||
-                0
-              }`}
+            {usage && `$${upcomingInvoiceTotal}`}
           </Box>
         </Text>
         <Text>