Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update XPF currency formatting #8722

Merged
merged 8 commits into from May 14, 2024
Merged

Update XPF currency formatting #8722

merged 8 commits into from May 14, 2024

Conversation

cesarcosta99
Copy link
Contributor

@cesarcosta99 cesarcosta99 commented Apr 26, 2024

Fixes #5150.

Changes proposed in this Pull Request

I shared all my findings and decisions on why I'm doing these changes in woocommerce/woocommerce#46960. So here I'll stick to explaining the list of issues that have been flagged and what I did (or didn't) to fix them.

Issue 1

[In the] Currency management screen, the currency preview is producing incorrect previews given my configurations for rounding rules and price charming.

This is no longer an issue, and must have been fixed eventually between the time it's been reported and now. At the moment, the conversion is resulting in the correct price and that can be confirmed by comparing it in any online currency conversion tool.

Issue 2

[In the] Currency management screen, for the Pacific Franc (XPF) the currency symbol is incorrectly placed, and the wrong symbol.

The symbol is being replaced in WC core. As for the formatting, it's being fixed here, and in WC core, through the changes in the currency and locale infos. These changes should be consistent here and in WC core.

The fix for the formatting here is going beyond updating the currency and locale infos. I explain more about it in the comments below.

Issue 3

On the front end of the store, [...] for the XPF currency, they're missing the coma separator for thousands, and also using the incorrect symbol (Trailing Fr, rather than the correct XPF preceding with a space).

The formatting is being fixed here, and in WC core, through the changes in the currency and locale infos. These changes should be consistent here and in WC core.

Testing instructions

Test: XPF currency is formatted correctly in the currency preview

Important

This test replaces the test of same name in woocommerce/woocommerce#46960 as we're applying changes in this PR that are modifying the expected outcome. The difference in the outcome is only relevant from WooPayments' perspective, not WooCommerce's.

  1. Go through the testing instructions' pre-requisites in Update symbol and formatting of the XPF currency woocommerce/woocommerce#46960.
  2. Checkout to this branch and build assets: npm run build:client.
  3. As a merchant, navigate to WooCommerce > Settings > Multi-currency.
  4. Add the XPF currency, if needed.
  5. Click on the manage link for the XPF currency.
  6. In the Preview section, the CFP franc value should be formatted like XPF 1,234.

Test: XPF currency conversion is working as expected

  1. As a merchant, navigate to WooCommerce > Settings > Multi-currency.
  2. Add the XPF currency, if needed.
  3. Click on the manage link for the XPF currency.
  4. Select 1 for Price rounding and note the CFP franc value.
  5. Go to any online currency conversion tool and perform the same conversion.
  6. The price you've got in the conversion tool (step 5) should be close to the price you've got in the currency preview (step 4).

Test: Another currency (BRL) is formatted correctly in the currency preview

  1. As a merchant, navigate to WooCommerce > Settings > Multi-currency.
  2. Add the BRL currency, if needed.
  3. Click on the manage link for the BRL currency.
  4. In the Preview section, the Brazilian real value should be formatted like R$ 1.234,56. Without these changes, it was previously being formatted like R$1,234.56, and from the Brazilian perspective, that is not correct.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@botwoo
Copy link
Collaborator

botwoo commented Apr 26, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8722 or branch name fix/5150-xpf-currency in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: d8a1a8a
  • Build time: 2024-04-30 16:27:59 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

github-actions bot commented Apr 26, 2024

Size Change: +608 B (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 292 kB +106 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.6 kB +98 B (0%)
release/woocommerce-payments/dist/multi-currency.js 54.7 kB +107 B (0%)
release/woocommerce-payments/dist/order.js 41.9 kB +100 B (0%)
release/woocommerce-payments/dist/payment-gateways.js 38.7 kB +97 B (0%)
release/woocommerce-payments/dist/settings.js 201 kB +100 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/assets/css/success.rtl.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.06 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.js 56.3 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 530 B
release/woocommerce-payments/dist/bnpl-announcement.css 531 B
release/woocommerce-payments/dist/bnpl-announcement.js 20 kB
release/woocommerce-payments/dist/cart-block.js 21.4 kB
release/woocommerce-payments/dist/cart.js 4.38 kB
release/woocommerce-payments/dist/checkout-rtl.css 599 B
release/woocommerce-payments/dist/checkout.css 599 B
release/woocommerce-payments/dist/checkout.js 37.5 kB
release/woocommerce-payments/dist/index-rtl.css 40.7 kB
release/woocommerce-payments/dist/index.css 40.6 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.21 kB
release/woocommerce-payments/dist/payment-gateways.css 1.21 kB
release/woocommerce-payments/dist/payment-request-rtl.css 155 B
release/woocommerce-payments/dist/payment-request.css 155 B
release/woocommerce-payments/dist/payment-request.js 12 kB
release/woocommerce-payments/dist/product-details-rtl.css 398 B
release/woocommerce-payments/dist/product-details.css 402 B
release/woocommerce-payments/dist/product-details.js 17.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11.1 kB
release/woocommerce-payments/dist/settings.css 10.9 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 236 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 4.54 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 155 B
release/woocommerce-payments/dist/woopay-express-button.css 155 B
release/woocommerce-payments/dist/woopay-express-button.js 21 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.37 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.5 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.37 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.05 kB

compressed-size-action

@cesarcosta99 cesarcosta99 marked this pull request as ready for review April 30, 2024 16:28
@cesarcosta99 cesarcosta99 requested review from a team and rafaelzaleski and removed request for a team April 30, 2024 16:28
Copy link
Contributor Author

@cesarcosta99 cesarcosta99 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leaving a few comments to provide extra context and reasoning.

Comment on lines +71 to +80
/**
* Gets wc-admin currency for the given currency code. Unlike `getCurrency`, this function
* will return the currency based only on the currency itself and locale. This means that the
* currency object will not be modified based on the store's country settings,
* or on another given currency.
*
* @param {string} currencyCode Currency code
* @return {Object} Currency object.
*/
export const getCurrencyByLocale = ( currencyCode ) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I created this new helper because I didn't want to risk messing with how getCurrency and formatCurrency work in other parts of the project. The outcome of this function is the same as in getCurrency but it works a little bit differently.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it was a good trade-off between code repetition and reduced risk of regressions.

Comment on lines +171 to +173
const currency = useLocaleFormatting
? getCurrencyByLocale( currencyCode )
: getCurrency( currencyCode, baseCurrencyCode );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't want to duplicate logic and, at the same time, wanted it to keep the current behavior in all of its calls. So I just added the useLocaleFormatting param and used it in the currency preview only.

@@ -930,7 +930,7 @@
'fr_NC' => $global_formats['rs_comma_space_ltr'],
'fr_PF' => $global_formats['rs_comma_space_ltr'],
'fr_WF' => $global_formats['rs_comma_space_ltr'],
'default' => $global_formats['rs_comma_space_ltr'],
'default' => $global_formats['ls_dot_comma_ltr'],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change should be consistent with woocommerce/woocommerce#46960.

@@ -2559,7 +2559,7 @@
'currency_code' => 'XPF',
'currency_pos' => 'right_space',
'thousand_sep' => ' ',
'decimal_sep' => ',',
'decimal_sep' => '.',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The changes in this files should be consistent with woocommerce/woocommerce#46960.

Comment on lines +768 to +772
'defaultLocale' => [
'symbolPosition' => $default_locale_formatting['currency_pos'] ?? '',
'thousandSeparator' => $default_locale_formatting['thousand_sep'] ?? '',
'decimalSeparator' => $default_locale_formatting['decimal_sep'] ?? '',
],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I needed to add this new property here because we may need to format a currency from another's country perspective (like in the currency preview). By doing that, the formatting might look odd, that's why I pass on the default locale formatting info.

Copy link
Contributor

@rafaelzaleski rafaelzaleski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work! The code looks good, and all tests are passing as described.

✅ Test: XPF currency is formatted correctly in the currency preview
✅ Test: XPF currency conversion is working as expected
✅ Test: Another currency (BRL) is formatted correctly in the currency preview

Comment on lines +71 to +80
/**
* Gets wc-admin currency for the given currency code. Unlike `getCurrency`, this function
* will return the currency based only on the currency itself and locale. This means that the
* currency object will not be modified based on the store's country settings,
* or on another given currency.
*
* @param {string} currencyCode Currency code
* @return {Object} Currency object.
*/
export const getCurrencyByLocale = ( currencyCode ) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe it was a good trade-off between code repetition and reduced risk of regressions.

@cesarcosta99
Copy link
Contributor Author

Thanks for the review, @rafaelzaleski! I'll merge this as soon as woocommerce/woocommerce#46960 gets merged.

@cesarcosta99 cesarcosta99 added the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label May 2, 2024
@cesarcosta99 cesarcosta99 removed the status: blocked The issue is blocked from progressing, waiting for another piece of work to be done. label May 14, 2024
@cesarcosta99 cesarcosta99 added this pull request to the merge queue May 14, 2024
Merged via the queue into develop with commit 038fd72 May 14, 2024
23 checks passed
@cesarcosta99 cesarcosta99 deleted the fix/5150-xpf-currency branch May 14, 2024 22:04
hsingyuc pushed a commit that referenced this pull request May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Non-decimal currency and XPF multi-currency bugs
3 participants