From 921e9fb40f06c01eee96af8697f008269a2b28de Mon Sep 17 00:00:00 2001
From: Oscar Reyes <oscar-rreyes1@hotmail.com>
Date: Tue, 13 Dec 2022 23:23:42 -0600
Subject: [PATCH] fix(frontend): fixing total sum for the cart page (#633)

* fix(frontend): fixing total sum for the cart page

* fix(frontend): fixing total sum for the cart page

* fix(frontend): fixing total sum for the cart page
---
 src/frontend/Dockerfile                       |  2 +-
 .../components/CartItems/CartItems.tsx        | 34 +++++++++++--------
 .../components/ProductPrice/ProductPrice.tsx  |  4 ++-
 3 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/frontend/Dockerfile b/src/frontend/Dockerfile
index 51fdaa743b..f7db0a331c 100644
--- a/src/frontend/Dockerfile
+++ b/src/frontend/Dockerfile
@@ -18,7 +18,7 @@ RUN npm run build
 
 FROM node:18-alpine AS runner
 WORKDIR /app
-RUN apk add --no-cache protoc
+RUN apk add --no-cache protobuf-dev protoc
 
 ENV NODE_ENV=production
 
diff --git a/src/frontend/components/CartItems/CartItems.tsx b/src/frontend/components/CartItems/CartItems.tsx
index b192ff245d..40e30f7a69 100644
--- a/src/frontend/components/CartItems/CartItems.tsx
+++ b/src/frontend/components/CartItems/CartItems.tsx
@@ -16,26 +16,32 @@ interface IProps {
 const CartItems = ({ productList, shouldShowPrice = true }: IProps) => {
   const { selectedCurrency } = useCurrency();
   const address: Address = {
-      streetAddress: '1600 Amphitheatre Parkway',
-      city: 'Mountain View',
-      state: 'CA',
-      country: 'United States',
-      zipCode: "94043",
+    streetAddress: '1600 Amphitheatre Parkway',
+    city: 'Mountain View',
+    state: 'CA',
+    country: 'United States',
+    zipCode: '94043',
   };
   const { data: shippingConst = { units: 0, currencyCode: 'USD', nanos: 0 } } = useQuery('shipping', () =>
     ApiGateway.getShippingCost(productList, selectedCurrency, address)
   );
 
-  const total = useMemo<Money>(
-    () => ({
-      units:
-        productList.reduce((acc, item) => acc + (item.product.priceUsd?.units || 0) * item.quantity, 0) +
-        (shippingConst?.units || 0),
+  const total = useMemo<Money>(() => {
+    const nanoSum =
+      productList.reduce((acc, { product: { priceUsd: { nanos = 0 } = {} } }) => acc + Number(nanos), 0) +
+        shippingConst?.nanos || 0;
+    const nanoExceed = Math.floor(nanoSum / 1000000000);
+
+    const unitSum =
+      productList.reduce((acc, { product: { priceUsd: { units = 0 } = {} } }) => acc + Number(units), 0) +
+        shippingConst?.units || 0 + nanoExceed;
+
+    return {
+      units: unitSum,
       currencyCode: selectedCurrency,
-      nanos: 0,
-    }),
-    [productList, shippingConst?.units, selectedCurrency]
-  );
+      nanos: nanoSum % 1000000000,
+    };
+  }, [shippingConst?.units, shippingConst?.nanos, productList, selectedCurrency]);
 
   return (
     <S.CartItems>
diff --git a/src/frontend/components/ProductPrice/ProductPrice.tsx b/src/frontend/components/ProductPrice/ProductPrice.tsx
index dd9382069d..ac14f066eb 100644
--- a/src/frontend/components/ProductPrice/ProductPrice.tsx
+++ b/src/frontend/components/ProductPrice/ProductPrice.tsx
@@ -16,9 +16,11 @@ const ProductPrice = ({ price: { units, currencyCode, nanos } }: IProps) => {
     [currencyCode, selectedCurrency]
   );
 
+  const total = units + nanos / 1000000000;
+
   return (
     <span data-cy={CypressFields.ProductPrice}>
-      {currencySymbol} {units}.{nanos.toString().slice(0, 2)}
+      {currencySymbol} {total.toFixed(2)}
     </span>
   );
 };