fix(frontend): fixing total sum for the cart page (open-telemetry#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

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