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

Fix BNPL payment method messaging loading state #9355

Merged
merged 8 commits into from
Aug 30, 2024

Conversation

cesarcosta99
Copy link
Contributor

Fixes #9244.

Changes proposed in this Pull Request

This fixes the BNPL payment method messaging loading state. Previously, the skeleton was being displayed even if the product amount was lower than the minimum.

I needed to make the frontend aware of the minimum value so it has a value to compare to. Stripe doesn't provide a way to retrieve that information from their API, so I needed to build up a hardcoded list - sourced this idea from the Stripe extension [ref]. I pulled the values for this list from the Stripe docs.

Testing instructions

Setup

  1. After switching to this branch, build the assets: npm run build:client.
  2. As a merchant, navigate to Payments > Settings.
  3. Scroll down to the Buy now, pay later section and enable Affirm, Afterpay and Klarna.
  4. Save the changes.
  5. Navigate to Products > Add New.
  6. Insert a product that is less than $0.50 and publish it.

Test: Ensure the payment method messaging skeleton works as expected

  1. As a shopper, navigate to the shop and set your currency to USD.
  2. Click on a regular product.
  3. You should see a skeleton indicating the messaging component is loading - as in the screenshot below.
  4. The messaging component should load and be displayed as expected.
image
  1. Navigate to the shop and click on the product you created that is less than $0.50.
  2. You should not see the skeleton and the messaging component should not load or be displayed.
  3. No new console errors should be observed.

  • 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

@cesarcosta99 cesarcosta99 requested review from a team and rafaelzaleski and removed request for a team August 28, 2024 23:28
@botwoo
Copy link
Collaborator

botwoo commented Aug 28, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9355 or branch name fix/9244-pmme-skeleton 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: db76836
  • Build time: 2024-08-30 18:41:19 UTC

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

Copy link
Contributor

github-actions bot commented Aug 28, 2024

Size Change: +235 B (0%)

Total Size: 1.32 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.44 kB -6 B (0%)
release/woocommerce-payments/dist/blocks-checkout.css 2.44 kB -4 B (0%)
release/woocommerce-payments/dist/blocks-checkout.js 65.8 kB +6 B (0%)
release/woocommerce-payments/dist/index.js 298 kB +18 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.5 kB +17 B (0%)
release/woocommerce-payments/dist/multi-currency.js 55.5 kB +28 B (0%)
release/woocommerce-payments/dist/order.js 42.7 kB +26 B (0%)
release/woocommerce-payments/dist/payment-gateways.js 39.3 kB +26 B (0%)
release/woocommerce-payments/dist/product-details.js 11.5 kB +44 B (0%)
release/woocommerce-payments/dist/settings.js 224 kB +62 B (0%)
release/woocommerce-payments/dist/woopay-express-button.js 24 kB +7 B (0%)
release/woocommerce-payments/dist/woopay.js 71.3 kB +11 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 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/cart-block.js 16.3 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 817 B
release/woocommerce-payments/dist/checkout.css 816 B
release/woocommerce-payments/dist/checkout.js 32.5 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 240 B
release/woocommerce-payments/dist/express-checkout.css 240 B
release/woocommerce-payments/dist/express-checkout.js 14.1 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/index.css 39.2 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-request-rtl.css 240 B
release/woocommerce-payments/dist/payment-request.css 240 B
release/woocommerce-payments/dist/payment-request.js 13.7 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/subscription-edit-page.js 703 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 730 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 19.3 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 240 B
release/woocommerce-payments/dist/tokenized-payment-request.css 240 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.5 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.54 kB
release/woocommerce-payments/dist/woopay.css 4.51 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/jetpack-script-data.js 737 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 554 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 280 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 333 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 417 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 621 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 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.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 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.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 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 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 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 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

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.

Hiding the skeleton worked, but we still have a blank space that looks a bit odd.

Screen Shot 2024-08-30 at 10 15 59 AM

Screen Shot 2024-08-30 at 10 16 40 AM

@cesarcosta99
Copy link
Contributor Author

cesarcosta99 commented Aug 30, 2024

Hiding the skeleton worked, but we still have a blank space that looks a bit odd.

@rafaelzaleski, good call. I initially had thought about conditionally call initializeBnplSiteMessaging based on the amount condition we're introducing, however, I wasn't sure what could be impacted since BNPL is new to us.

We can achieve a good UI flow by hiding the container via CSS and I did that in db76836. It's a low-risk approach and it keeps the UI looking good. I opted for hiding the message container by default in the product pages (instead of the opposite) as the majority of products should have an amount higher than the minimum, being those an exception.


Update: It looks like Playwright tests are failing, but I'm pretty sure it's flakiness as we can see the same in other PRs and the changes here are unrelated to the failing tests. There is an issue open tracking that. They passed in the 3rd attempt 😅

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.

@cesarcosta99, I tested a product below the minimum amount and another above it, and the UI looks good in both scenarios now. The blank space is gone—thanks for the changes!

@cesarcosta99 cesarcosta99 added this pull request to the merge queue Aug 30, 2024
Merged via the queue into develop with commit 638a650 Aug 30, 2024
23 checks passed
@cesarcosta99 cesarcosta99 deleted the fix/9244-pmme-skeleton branch August 30, 2024 22:22
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.

BNPL - Respect minimum order amounts when adding the PMME to the page
3 participants