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