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

Rerender Woopay Button on jQuery Events #7981

Merged
merged 3 commits into from
Jan 8, 2024

Conversation

lovo-h
Copy link
Contributor

@lovo-h lovo-h commented Jan 5, 2024

Fixes:

  • 2395-gh-Automattic/woopay
  • 2398-gh-Automattic/woopay

Changes proposed in this Pull Request

This PR adds jQuery listeners for the following events: updated_cart_totals and updated_checkout.

Previously, there were DOM element listeners (e.g. document.body.addEventListener( ... ) ), but it seems the jQuery.trigger( ... ) wasn't always calling the dispatchEvent(...).

This was causing the issue where the WooPay button would not receive the event and, therefore, would not re-render the WooPay button.

Testing instructions

2395-gh-Automattic/woopay

Confirm: WooPay Button Does Not Re-render On trunk

  • In the terminal, checkout to the trunk branch.
  • As a shopper, navigate to the merchant's shop and add a product to your cart.
  • Navigate to the cart.
  • Update the quantity of your product and click the Update cart button.
  • Confirm that the WooPay button does not re-render.

Test: WooPay Button Re-renders When Updating Cart Totals

  • In the terminal, checkout to the 2395-rerender-woopay-button-on-cart-update branch.
  • As a shopper, navigate to the merchant's shop and add a product to your cart.
  • Navigate to the cart.
  • Update the quantity of your product and click the Update cart button.
  • Confirm that the WooPay button re-renders as expected.

Regression Test: WooPay Button Navigates to Woopay

  • In the terminal, checkout to the 2395-rerender-woopay-button-on-cart-update branch.
  • As a shopper, navigate to the merchant's shop and add a product to your cart.
  • Navigate to the cart and click the Buy with WooPay button.
  • Confirm that the WooPay button navigates to WooPay as expected.
  • Confirm that in WooPay, the cart shows the expected products.

Regression Test: WooPay Button Navigates to Woopay, Even After Re-render

  • In the terminal, checkout to the 2395-rerender-woopay-button-on-cart-update branch.
  • As a shopper, navigate to the merchant's shop and add a product to your cart.
  • Navigate to the cart.
  • Update the quantity of your product and click the Update cart button. Repeat this step twice.
  • Confirm that the WooPay button navigates to WooPay as expected.
  • Confirm that in WooPay, the cart shows the expected products.

2398-gh-Automattic/woopay

Confirm: Implemented Solution Matches Suggested Solution

  • Compare implemented solution to suggested solution in 18798-gh-Automattic/woocommerce.com.

  • 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

@lovo-h lovo-h requested review from a team and rafaelzaleski and removed request for a team January 5, 2024 17:13
@botwoo
Copy link
Collaborator

botwoo commented Jan 5, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7981 or branch name fix/2395-rerender-woopay-button-on-cart-update 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: 825e0dc
  • Build time: 2024-01-08 21:05:10 UTC

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

Copy link
Contributor

github-actions bot commented Jan 5, 2024

Size Change: -3 B (0%)

Total Size: 1.27 MB

Filename Size Change
release/woocommerce-payments/dist/woopay-express-button.js 52.5 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.06 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.8 kB
release/woocommerce-payments/dist/blocks-checkout.js 85.5 kB
release/woocommerce-payments/dist/checkout-rtl.css 318 B
release/woocommerce-payments/dist/checkout.css 319 B
release/woocommerce-payments/dist/checkout.js 37 kB
release/woocommerce-payments/dist/index-rtl.css 37.8 kB
release/woocommerce-payments/dist/index.css 37.9 kB
release/woocommerce-payments/dist/index.js 289 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.4 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.7 kB
release/woocommerce-payments/dist/multi-currency.css 3.4 kB
release/woocommerce-payments/dist/multi-currency.js 55.9 kB
release/woocommerce-payments/dist/order-rtl.css 676 B
release/woocommerce-payments/dist/order.css 679 B
release/woocommerce-payments/dist/order.js 42.3 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.css 1.31 kB
release/woocommerce-payments/dist/payment-gateways.js 39.5 kB
release/woocommerce-payments/dist/payment-request-rtl.css 153 B
release/woocommerce-payments/dist/payment-request.css 153 B
release/woocommerce-payments/dist/payment-request.js 13.4 kB
release/woocommerce-payments/dist/product-details.js 919 B
release/woocommerce-payments/dist/settings-rtl.css 10.4 kB
release/woocommerce-payments/dist/settings.css 10.4 kB
release/woocommerce-payments/dist/settings.js 234 kB
release/woocommerce-payments/dist/subscription-edit-page.js 669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 20.5 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 19.6 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 22 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 153 B
release/woocommerce-payments/dist/woopay-express-button.css 153 B
release/woocommerce-payments/dist/woopay-rtl.css 4.18 kB
release/woocommerce-payments/dist/woopay.css 4.19 kB
release/woocommerce-payments/dist/woopay.js 71.9 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 812 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.43 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.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.32 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

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

LGTM!

✅ Confirm: WooPay Button Does Not Re-render On trunk
✅ Test: WooPay Button Re-renders When Updating Cart Totals
✅ Regression Test: WooPay Button Navigates to Woopay
✅ Regression Test: WooPay Button Navigates to Woopay, Even After Re-render
✅ Confirm: Implemented Solution Matches Suggested Solution

@lovo-h lovo-h added this pull request to the merge queue Jan 8, 2024
Merged via the queue into develop with commit e37aa7d Jan 8, 2024
27 of 28 checks passed
@lovo-h lovo-h deleted the fix/2395-rerender-woopay-button-on-cart-update branch January 8, 2024 21:28
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.

3 participants