fix(money-input): avoid rounding errors (#229)

Author: dferber90

src/components/inputs/money-input/money-input.js

@@ -164,9 +164,24 @@ export const createMoneyValue = (currencyCode, rawAmount) => {
   const amountAsNumber = parseRawAmountToNumber(rawAmount);
   if (isNaN(amountAsNumber)) return null;
 
-  const centAmount = amountAsNumber * 10 ** currency.fractionDigits;
+  // The cent amount is rounded to the currencie's default number
+  // of fraction digits for prices with high precision.
+  //
+  // Additionally, JavaScript is sometimes incorrect when multiplying floats,
+  //   e.g. 2.49 * 100 -> 249.00000000000003
+  // While inaccuracy from multiplying floating point numbers is a
+  // general problem in JS, we can avoid it by cutting off all
+  // decimals. This is possible since cents is the base unit, so we
+  // operate on integers anyways
+  // Also we should the round the value to ensure that we come close
+  // to the nearest decimal value
+  // ref: https://github.com/commercetools/merchant-center-frontend/pull/770
+  const centAmount = Math.trunc(
+    Math.round(amountAsNumber * 10 ** currency.fractionDigits)
+  );
+
   const fractionDigitsOfAmount =
-    // The input will always use a dot as the separator.
+    // The conversion to a string will always use a dot as the separator.
     // That means we don't have to handle a comma.
     String(amountAsNumber).indexOf('.') === -1
       ? 0
@@ -176,9 +191,7 @@ export const createMoneyValue = (currencyCode, rawAmount) => {
     return {
       type: 'highPrecision',
       currencyCode,
-      // For prices with high precision, the cent amount is rounded to the
-      // currencies default number of fraction digits
-      centAmount: parseFloat(centAmount.toFixed(0), 10),
+      centAmount,
       preciseAmount: parseInt(
         amountAsNumber * 10 ** fractionDigitsOfAmount,
         10
@@ -211,13 +224,13 @@ const formatAmount = (rawAmount, currencyCode, locale) => {
 
   const amount = getAmountAsNumberFromMoneyValue(moneyValue);
 
+  const fractionDigits = moneyValue.preciseAmount
+    ? moneyValue.fractionDigits
+    : currencies[moneyValue.currencyCode].fractionDigits;
+
   return isNaN(amount)
     ? ''
-    : amount.toLocaleString(locale, {
-        minimumFractionDigits: moneyValue.preciseAmount
-          ? moneyValue.fractionDigits
-          : currencies[moneyValue.currencyCode].fractionDigits,
-      });
+    : amount.toLocaleString(locale, { minimumFractionDigits: fractionDigits });
 };
 
 const getAmountStyles = props => {

src/components/inputs/money-input/money-input.spec.js

@@ -152,6 +152,33 @@ describe('MoneyInput.convertToMoneyValue', () => {
     });
   });
 
+  describe('when called with a centPrecision price with weird JS rounding', () => {
+    it('should treat it as a decimal separator', () => {
+      expect(
+        MoneyInput.convertToMoneyValue({ currencyCode: 'EUR', amount: '2.49' })
+      ).toEqual({
+        type: 'centPrecision',
+        currencyCode: 'EUR',
+        centAmount: 249,
+        fractionDigits: 2,
+      });
+
+      // This test ensures that rounding is used instead of just cutting the
+      // number of. Cutting it of would result in an incorrect 239998.
+      expect(
+        MoneyInput.convertToMoneyValue({
+          currencyCode: 'EUR',
+          amount: '2399.99',
+        })
+      ).toEqual({
+        type: 'centPrecision',
+        currencyCode: 'EUR',
+        centAmount: 239999,
+        fractionDigits: 2,
+      });
+    });
+  });
+
   describe('when called with a high precision price', () => {
     it('should return a money value of type "highPrecision"', () => {
       expect(