From f1656676326a63bfa5c36c064cdd4a29a3137633 Mon Sep 17 00:00:00 2001 From: Raluca Stan Date: Thu, 18 Apr 2024 15:17:30 +0300 Subject: [PATCH] Prevent checkout blocks breakage for stores using similar number separators (#46241) * Add a safety check for the numbers with the same value for the separators This case breaks the library we are using for number formatting. This is not documented on their end and can't be fixed by passing a different configuration. We are fixing it on our end by overwriting the thousand separator. This change will only surface in the checkout blocks, at they are the only blocks doing formatting via React (the products blocks use php). This will not apply to the order confirmation. This change is preventing a fatal error thrown by the library and allowing users to see the content of the cart. It's an edge case, because it happens only why people have the same values for the separators, which is an non-standard way to format. * Add unit tests and changelog * Add a safety check for the numbers with the same value for the separators This case breaks the library we are using for number formatting. This is not documented on their end and can't be fixed by passing a different configuration. We are fixing it on our end by overwriting the thousand separator. This change will only surface in the checkout blocks, at they are the only blocks doing formatting via React (the products blocks use php). This will not apply to the order confirmation. This change is preventing a fatal error thrown by the library and allowing users to see the content of the cart. It's an edge case, because it happens only why people have the same values for the separators, which is an non-standard way to format. * Add unit tests and changelog * Improve tests * "Improve tests" --- .../formatted-monetary-amount/index.tsx | 12 +- .../formatted-monetary-amount/test/index.js | 139 ++++++++++++++++++ .../changelog/fix-same-number-separators | 4 + 3 files changed, 154 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/test/index.js create mode 100644 plugins/woocommerce/changelog/fix-same-number-separators diff --git a/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx index a81e1781f28..6f7a5c9bcb6 100644 --- a/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx +++ b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/index.tsx @@ -34,8 +34,18 @@ export interface FormattedMonetaryAmountProps const currencyToNumberFormat = ( currency: FormattedMonetaryAmountProps[ 'currency' ] ) => { + const hasSimiliarSeparators = + currency?.thousandSeparator === currency?.decimalSeparator; + if ( hasSimiliarSeparators ) { + // eslint-disable-next-line no-console + console.warn( + 'Thousand separator and decimal separator are the same. This may cause formatting issues.' + ); + } return { - thousandSeparator: currency?.thousandSeparator, + thousandSeparator: hasSimiliarSeparators + ? '' + : currency?.thousandSeparator, decimalSeparator: currency?.decimalSeparator, fixedDecimalScale: true, prefix: currency?.prefix, diff --git a/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/test/index.js b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/test/index.js new file mode 100644 index 00000000000..eedfab44185 --- /dev/null +++ b/plugins/woocommerce-blocks/packages/components/formatted-monetary-amount/test/index.js @@ -0,0 +1,139 @@ +/** + * External dependencies + */ +import { render, screen } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import FormattedMonetaryAmount from '../index'; + +describe( 'FormattedMonetaryAmount', () => { + describe( 'separators', () => { + test( 'should add the thousand separator', () => { + render( + + ); + + expect( screen.getByText( '1.563,45 €' ) ).toBeInTheDocument(); + } ); + + test( 'should not add thousand separator', () => { + render( + + ); + expect( screen.getByText( '1563,45 €' ) ).toBeInTheDocument(); + } ); + + test( 'should remove the thousand separator when identical to the decimal one', () => { + render( + + ); + expect( console ).toHaveWarned(); + expect( screen.getByText( '1563,45 €' ) ).toBeInTheDocument(); + } ); + } ); + describe( 'suffix/prefix', () => { + test( 'should add the currency suffix', () => { + render( + + ); + expect( screen.getByText( '0,15 €' ) ).toBeInTheDocument(); + } ); + + test( 'should add the currency prefix', () => { + render( + + ); + expect( screen.getByText( '€ 0,15' ) ).toBeInTheDocument(); + } ); + } ); + + describe( 'supports different value types', () => { + test( 'should support numbers', () => { + render( + + ); + expect( screen.getByText( '15 €' ) ).toBeInTheDocument(); + } ); + + test( 'should support strings', () => { + render( + + ); + expect( screen.getByText( '€ 15' ) ).toBeInTheDocument(); + } ); + } ); +} ); diff --git a/plugins/woocommerce/changelog/fix-same-number-separators b/plugins/woocommerce/changelog/fix-same-number-separators new file mode 100644 index 00000000000..f3fca6dcb22 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-same-number-separators @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Add a safety check for the numbers with the same value for the separators