woocommerce / woocommerce-ios

WooCommerce iOS app
https://www.woocommerce.com/mobile
GNU General Public License v2.0
299 stars 109 forks source link

RTL currencies displaying the currency symbol and "-" (minus) incorrectly #10913

Open iamgabrielma opened 1 year ago

iamgabrielma commented 1 year ago

Quick report to investigate further, we seem to display the - symbol, for example for discounts or refunds in the incorrect place when RTL is set as per store settings. Along with this, we display the symbol inconsistently left or right to the amount depending on the case.

Even though the language is read from right to left, the numerical and financial contexts such as prices, especially involving arithmetic symbols, maintain a left-to-right order.

Some current examples:

Discounts Refunds
Simulator Screenshot - iPhone 15 - 2023-10-11 at 11 15 01 Simulator Screenshot - iPhone 15 - 2023-10-11 at 11 04 20
peril-woocommerce[bot] commented 1 year ago
Fails
:no_entry_sign: Please add a feature label to this issue. e.g. 'feature: stats'

Generated by :no_entry_sign: dangerJS

hafizrahman commented 8 months ago

Just had a quick look at this, seems like one way to do it is the use of the unicode marker "\u{200E}" ref: https://stackoverflow.com/a/31744355

So e.g:

Text(minusSign + discountAmount)

Should become:

Text(minusSign + "\u{200E}" + discountAmount)

Or actually using NumberFormatter might work:

if let discountAmount = discountDetailsViewModel.finalAmountString, let discountNumber = Double(discountAmount) {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    if let formattedString = formatter.string(from: NSNumber(value: -discountNumber)) {
        Text(formattedString)
            .foregroundColor(Color(uiColor: .withColorStudio(.green, shade: .shade50)))
    }
}
iamgabrielma commented 8 months ago

using NumberFormatter might work

That sounds good, I'd say we should rely on a NumberFormatter solution for consistency across different views/models, reusability, and easy testing.