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

add currency code to cart and checkout block totals when mccy is enabled #8636

Merged

Conversation

reykjalin
Copy link
Contributor

Fixes #2648

Changes proposed in this Pull Request

  • Adds an explicit currency code to the totals in the Cart and Checkout Blocks when multi-currency is enabled, just like we do for the Shortcode Cart and Checkout.

Screenshots

Before After
Cart image image
Checkout image image

Testing instructions

Note

This feature uses a blocks filter introduced in WC v8.8 which has not yet been released. See testing instructions for details.

Make sure WC 8.7 and/or 8.6 are still properly supported

  1. Make sure you're running either WC 8.6 or 8.7 (test both for extra bonus points 🏆 ).
  2. Make sure multi-currency is enabled with at least 2 currencies configured.
  3. Add a product to your cart.
  4. Check the Cart page and make sure there are no new JS errors (i.e. compare with develop).
  5. Check the Cart page and make sure there is not a currency code added to the total.
  6. Check the Checkout page and make sure there are no new JS errors (i.e. compare with develop).
  7. Check the Checkout page and make sure there is not a currency code added to the total.
  8. Change the currency with the currency switcher and check steps (4) - (7) again.

Make sure currency code is displayed when using WC 8.8

  1. Download WC v8.8 from here and install it on your store.
  2. Make sure multi-currency is enabled with at least 2 currencies configured.
  3. Add a product to your cart.
  4. Check the Cart page and make sure there is now a currency code added to the total.
  5. Check the Checkout page and make sure there is now a currency code added to the total.
  6. Make sure the formatting of the currency code matches the Shortcode version (compare against the Shortcode Cart and Checkout)
  7. Change the currency with the currency switcher and check steps (4) - (6) again.

  • 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

@reykjalin reykjalin requested review from a team and cesarcosta99 and removed request for a team April 13, 2024 05:14
@botwoo
Copy link
Collaborator

botwoo commented Apr 13, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8636 or branch name fix/total-amounts-not-displayed-with-explicit-currency-code 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: 0328f13
  • Build time: 2024-04-16 23:12:23 UTC

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

Copy link
Contributor

github-actions bot commented Apr 13, 2024

Size Change: +109 B (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 57.1 kB +109 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.02 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.02 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 19.9 kB
release/woocommerce-payments/dist/cart-block.js 21.5 kB
release/woocommerce-payments/dist/cart.js 4.52 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.8 kB
release/woocommerce-payments/dist/index-rtl.css 40.4 kB
release/woocommerce-payments/dist/index.css 40.4 kB
release/woocommerce-payments/dist/index.js 291 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-switcher-block.js 59.4 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.5 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.7 kB
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-gateways.js 38.5 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.4 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 kB
release/woocommerce-payments/dist/settings.css 10.8 kB
release/woocommerce-payments/dist/settings.js 201 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 710 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.67 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.1 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.44 kB
release/woocommerce-payments/dist/woopay.css 4.41 kB
release/woocommerce-payments/dist/woopay.js 70.9 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

Copy link
Contributor

@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.

Code looks good and tests well! But I ran into something interesting while testing this.

  • Make sure WC 8.7 and/or 8.6 are still properly supported ✅
    • I tested it on both versions and everything seems to be ok 🎉
  • Make sure currency code is displayed when using WC 8.8 ⚠️
    • I tested with USD and EUR and everything worked as expected, except one thing: while using EUR the formatting of the currency didn't match the shortcode version. Any idea why? This issue also triggered me a thought about whether it'd be feasible to perform this change in the backend rather than in the frontend 🤔
Shortcode version Blocks version
image image

@reykjalin
Copy link
Contributor Author

Thanks for the review @cesarcosta99!

while using EUR the formatting of the currency didn't match the shortcode version. Any idea why?

I have no idea why. And the shortcode version is hilariously wrong about the formatting. The correct formatting for EUR is €, definitely not €. There has to be some bug somewhere causing this, but I don't have a clue what it is.

I even have my store currency set to USD with the correct USD formatting, so it's not like the store currency formatting is messing with things.

I can, however, say with confidence that it's not this PR. The filter I'm using in the blocks expects a string returned with a <price/> placeholder, that will be filled with a formatted price, e.g. "$12.00" or "€13.21".

This definitely warrants an issue though, nice catch! I'll open one 👍

[is it] feasible to perform this change in the backend rather than in the frontend 🤔

Not to my knowledge, no. AFAICT the Cart and Checkout blocks apply their own formatting based on configurations available in the front-end. They don't receive a formatted amount from the backend 😕 .

@reykjalin
Copy link
Contributor Author

reykjalin commented Apr 16, 2024

I have just learned that both formats are valid 😮 . So maybe this is a consistency bug, but it's not introduced in this version. I went back to 4d46126 (middle-ish of March this year) and it was still present there.

@reykjalin reykjalin enabled auto-merge April 16, 2024 23:09
@reykjalin
Copy link
Contributor Author

@cesarcosta99 FYI I've enabled merge when ready 👍

Copy link
Contributor

@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.

I have just learned that both formats are valid 😮 . So maybe this is a consistency bug, but it's not introduced in this version

Yeah, I didn't see anything wrong in the code itself as you do <price/> ${ cart.cartTotals.currency_code }. This issue is somewhat unrelated to your changes, but I still wanted to ask to see if anything popped up.

Thanks for creating an issue for this 💯 :shipit:

@reykjalin reykjalin added this pull request to the merge queue Apr 17, 2024
Merged via the queue into develop with commit 166c038 Apr 17, 2024
22 checks passed
@reykjalin reykjalin deleted the fix/total-amounts-not-displayed-with-explicit-currency-code branch April 17, 2024 18:10
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.

[GlobalStep] Total Amounts are not displayed in an Explicit format on pages with Cart and Checkout blocks.
3 participants