[Bug] Checkout blocks thow error when thousand and decimal separators are identical

ralucaStan commented 6 months ago

Prerequisites

[X] I have carried out troubleshooting steps and I believe I have found a bug.
[X] I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

When a store uses the same symbol for the Thousand separator and Decimal separator and a user adds a product to cart with a price bigger then 1000 the checkout blocks don't render the product. In the back the blocks throw an error.

A separate ticket was opened for handling this on the Admin https://github.com/woocommerce/woocommerce/issues/46047

Expected behavior

The product should show up. To fix this bug we need to be defensive in the checkout blocks and remove (not render) the Thousand separator in the case the separator characters are similar.

Actual behavior

When a merchant repeats the process he sees this error in any of the blocks:


Error: Decimal separator can't be same as thousand separator. thousandSeparator: , (thousandSeparator = {true} is same as thousandSeparator = ",") decimalSeparator: , (default value for decimalSeparator is .)

This error originates from the https://github.com/s-yadav/react-number-format library which we use for formatting the prices. p1711634732317289-slack-C8X6Q7XQU

Another approach would be to reconsider the use of https://github.com/s-yadav/react-number-format , considering the prices are showing as expected in the product blocks.

Steps to reproduce

A site uses the same values for the Thousand separator & Decimal separator
A shopper adds a product to the cart with a price bigger then 1000
The shopper goes to any of the Cart, Checkout and Mini-Cart blocks; they are empty and the product does not show up

WordPress Environment

-

Isolating the problem

[X] I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
[X] This bug happens with a default WordPress theme active, or Storefront.
[X] I can reproduce this bug consistently using the steps above.

cat-og commented 6 months ago

Ran into this issue today in 7980072-zd-a8c. This was triggered by this related issue: https://github.com/Automattic/woocommerce-payments/issues/8559 which set their decimal separator to be a comma, despite appearing to be a period in their settings. While heir thousands separator was set to use a comma in their settings, their cart would not load.

To get around this on their site, they have updated the thousands separator to use another symbol, but they would like to be updated when this is resolved so they can set that back to use a comma again.

m155y commented 6 months ago

Another here: 7987217-zd-a8c

ralucaStan commented 6 months ago

To get around this on their site, they have updated the thousands separator to use another symbol, but they would like to be updated when this is resolved so they can set that back to use a comma again.

@cat-og having the same character is not an official format for any country. I am curious why the merchant needs such a setup. Is this something you can help with?

ralucaStan commented 6 months ago

Another here: 7987217-zd-a8c

@m155y From what I understood they hope to get 1,000.00, but they introduced , for the decimal separator, instead of ..

To fix this issue they should have the following setup:

Note: the official Swedish format is 1 000,00

cat-og commented 6 months ago

@cat-og having the same character is not an official format for any country. I am curious why the merchant needs such a setup. Is this something you can help with?

@ralucaStan The user does not want to use the same character for both, they'd like to use the format 1,000.00, but the bug here https://github.com/Automattic/woocommerce-payments/issues/8559 is updating the decimal separator to , despite their settings, as though they'd tried to use the format 1,000,00. This triggered the current bug.