Fix rounding error when displaying fee percentages (Automattic#2172)

* Fix rounding error when displaying fee percentages

* Add changelog entry.

* Update readme.txt

Co-authored-by: Chris <[email protected]@[email protected]>

Author: aprea

changelog.txt

@@ -6,6 +6,7 @@
 * Fix - Fix fatal error if store currency is changed after enabled (multi) currencies set.
 * Fix - Use of deprecated call-style to registerPaymentMethods. WooCommerce Payments now requires WooCommerce Blocks of at least version 3.9.0.
 * Fix - Deposit date on Transactions list page.
+* Fix - Rounding error when displaying fee percentages on the Overview and Transactions pages.
 * Add - Error message when total size of dispute evidence files uploaded goes over limit.
 * Update - Pass currency to wc_price when adding intent notes to orders.
 * Update - Instant deposit inbox note wording.

client/components/account-status/account-fees/test/__snapshots__/index.js.snap

@@ -7,7 +7,7 @@ exports[`AccountFees renders discounted base fee 1`] = `
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.0% + $0.20 per transaction
+   2% + $0.20 per transaction
   <div
     class="progressbar"
   >
@@ -54,7 +54,7 @@ exports[`AccountFees renders discounted fee with end date 1`] = `
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.0% + $0.21 per transaction (30% discount)
+   2.03% + $0.21 per transaction (30% discount)
   <p
     class="description"
   >
@@ -79,7 +79,7 @@ exports[`AccountFees renders discounted fee with volume limit 1`] = `
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.0% + $0.21 per transaction (30% discount)
+   2.03% + $0.21 per transaction (30% discount)
   <div
     class="progressbar"
   >
@@ -126,7 +126,7 @@ exports[`AccountFees renders discounted fee with volume limit and end date 1`] =
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.0% + $0.21 per transaction (30% discount)
+   2.03% + $0.21 per transaction (30% discount)
   <div
     class="progressbar"
   >
@@ -173,7 +173,7 @@ exports[`AccountFees renders discounted fee without volume limit 1`] = `
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.0% + $0.21 per transaction (30% discount)
+   2.03% + $0.21 per transaction (30% discount)
   <p>
     <a
       href="https://woocommerce.com/terms-conditions/woocommerce-payments-promotion/"
@@ -240,7 +240,7 @@ exports[`AccountFees renders first discounted fee ignoring the rest 1`] = `
   <s>
     2.9% + $0.30 per transaction
   </s>
-   2.3% + $0.24 per transaction (20% discount)
+   2.32% + $0.24 per transaction (20% discount)
   <p>
     <a
       href="https://woocommerce.com/terms-conditions/woocommerce-payments-promotion/"

client/payment-details/timeline/map-events.js

@@ -16,6 +16,7 @@ import { __experimentalCreateInterpolateElement as createInterpolateElement } fr
  */
 import { reasons as disputeReasons } from 'disputes/strings';
 import { formatCurrency, formatFX } from 'utils/currency';
+import { formatFee } from 'utils/fees';
 
 /**
  * Creates a Gridicon
@@ -194,9 +195,9 @@ const composeFeeString = ( event ) => {
 
 	return sprintf(
 		/* translators: %1$s is the total fee amount, %2$f%% is the fee percentage, and %3$s is the fixed fee amount. */
-		__( 'Fee (%2$.1f%% + %3$s): %1$s', 'woocommerce-payments' ),
+		__( 'Fee (%2$f%% + %3$s): %1$s', 'woocommerce-payments' ),
 		formatCurrency( -feeAmount, feeCurrency ),
-		percentage * 100,
+		formatFee( percentage ),
 		formatCurrency( fixed, fixedCurrency )
 	);
 };

client/payment-details/timeline/test/__snapshots__/map-events.js.snap

@@ -490,7 +490,7 @@ Array [
   Object {
     "body": Array [
       undefined,
-      "Fee (1.9% + $0.15): $-3.50",
+      "Fee (1.95% + $0.15): $-3.50",
       "Net deposit: $59.50",
     ],
     "date": 2020-04-01T14:37:54.000Z,

client/utils/account-fees.js

@@ -10,6 +10,7 @@ import { __experimentalCreateInterpolateElement as createInterpolateElement } fr
  * Internal dependencies
  */
 import { formatCurrency } from 'utils/currency';
+import { formatFee } from 'utils/fees';
 
 export const getCurrentFee = ( accountFees ) => {
 	return accountFees.discount.length
@@ -23,8 +24,8 @@ export const formatAccountFeesDescription = ( accountFees ) => {
 
 	let feeDescription = sprintf(
 		/* translators: %1: Percentage part of the fee. %2: Fixed part of the fee */
-		__( '%1$.1f%% + %2$s per transaction', 'woocommerce-payments' ),
-		baseFee.percentage_rate * 100,
+		__( '%1$f%% + %2$s per transaction', 'woocommerce-payments' ),
+		formatFee( baseFee.percentage_rate ),
 		formatCurrency( baseFee.fixed_rate, baseFee.currency )
 	);
 
@@ -45,21 +46,21 @@ export const formatAccountFeesDescription = ( accountFees ) => {
 		let descriptionString = sprintf(
 			/* translators: %1 Base fee (that don't apply to this account at this moment), %2 and %3: Current fee (e.g: 2.9% + $.30) */
 			__(
-				'<s>%1$s</s> %2$.1f%% + %3$s per transaction',
+				'<s>%1$s</s> %2$f%% + %3$s per transaction',
 				'woocommerce-payments'
 			),
 			feeDescription,
-			percentage * 100,
+			formatFee( percentage ),
 			formatCurrency( fixed, baseFee.currency )
 		);
 
 		if ( currentFee.discount ) {
 			descriptionString +=
 				' ' +
 				sprintf(
-					/* translators: %d percentage discount to apply */
-					__( '(%1$d%% discount)', 'woocommerce-payments' ),
-					currentFee.discount * 100
+					/* translators: %f percentage discount to apply */
+					__( '(%f%% discount)', 'woocommerce-payments' ),
+					formatFee( currentFee.discount )
 				);
 		}
 

client/utils/fees/index.test.ts

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { formatFee } from 'utils/fees';
+
+describe( 'Fees utilities', () => {
+	it.each( [
+		[ 0.03, 3 ],
+		[ 0.0175, 1.75 ],
+		[ 0.005, 0.5 ],
+		[ 0.0005, 0.05 ],
+		[ 0.00011, 0.011 ],
+		[ 0.00019, 0.019 ],
+		[ 0.000011, 0.001 ],
+		[ 0.000019, 0.002 ],
+	] )(
+		'returns an input fee (%f) as a formatted fee (%f)',
+		( inputFee, expectedFee ) => {
+			expect( formatFee( inputFee ) ).toBe( expectedFee );
+		}
+	);
+} );

client/utils/fees/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the given decimal fee as a percentage with
+ * a maximum of 3 decimal places.
+ *
+ * @param {number} fee The fee represented as a decimal.
+ * @return {number} The fee represented as a percentage.
+ */
+export const formatFee = ( fee: number ): number => {
+	return Number( ( fee * 100 ).toFixed( 3 ) );
+};

lint-staged.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	'*.{js,jsx,ts,tsx}': [ 'npm run format:provided', 'eslint' ],
+	'*.{ts,tsx}': [ () => 'tsc --noEmit' ],
+	'*.{scss,css}': [ 'npm run format:provided', 'npm run lint:css' ],
+	'*.php':
+		'./vendor/bin/phpcs --standard=phpcs.xml.dist --basepath=. --colors',
+	'composer.json': 'composer validate --strict --no-check-all',
+};

package.json

@@ -56,21 +56,6 @@
     "tube:start": "./docker/bin/jt/tunnel.sh",
     "tube:stop": "./docker/bin/jt/tunnel.sh break"
   },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "npm run format:provided",
-      "eslint"
-    ],
-    "*.{ts,tsx}": [
-      "tsc --noEmit --jsx react"
-    ],
-    "*.{scss,css}": [
-      "npm run format:provided",
-      "npm run lint:css"
-    ],
-    "*.php": "./vendor/bin/phpcs --standard=phpcs.xml.dist --basepath=. --colors",
-    "composer.json": "composer validate --strict --no-check-all"
-  },
   "dependencies": {
     "@stripe/react-stripe-js": "1.1.2",
     "@stripe/stripe-js": "1.12.1",

readme.txt

@@ -106,6 +106,7 @@ Please note that our support for the checkout block is still experimental and th
 * Fix - Fix fatal error if store currency is changed after enabled (multi) currencies set.
 * Fix - Use of deprecated call-style to registerPaymentMethods. WooCommerce Payments now requires WooCommerce Blocks of at least version 3.9.0.
 * Fix - Deposit date on Transactions list page.
+* Fix - Rounding error when displaying fee percentages on the Overview and Transactions pages.
 * Add - Error message when total size of dispute evidence files uploaded goes over limit.
 * Update - Pass currency to wc_price when adding intent notes to orders.
 * Update - Instant deposit inbox note wording.