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

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
 

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>

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>
   );
 };