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