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

Support tokenized cart PRBs on blocks cart and checkout #9150

Merged
merged 17 commits into from
Aug 2, 2024

Conversation

mdmoore
Copy link
Member

@mdmoore mdmoore commented Jul 22, 2024

Fixes #8527

Changes proposed in this Pull Request

This adds tokenized cart PRBs to the cart and checkout blocks. The goal is implement the PRB component on the blocks cart and checkout pages, removing any reliance on the older implementation.

Testing instructions

  • Disable the Express Checkout Buttons feature flag as it's now the default - npm run wp option update _wcpay_feature_stripe_ece 0. To verify it's disabled you can check the WooPayments Express Checkout settings for a border radius option. Border radius only appears for the ECE buttons.
  • Enable the tokenized cart PRB feature flag in the dev tools
  • Visit the blocks cart page and check that the PRB is appearing
  • Click the PRB and check that totals are correct
  • Update shipping methods and options and check that totals update correctly
  • Place an order and verify that the order totals are correct
  • Check that the Origin in the order is no Unknown.
  • Repeat the above 4 steps on the checkout block

  • 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

@mdmoore mdmoore requested review from a team and FangedParakeet and removed request for a team July 22, 2024 22:52
@botwoo
Copy link
Collaborator

botwoo commented Jul 22, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9150 or branch name tokenized-cart-prb-blocks-cart-checkout 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: 7082f3a
  • Build time: 2024-08-01 21:47:28 UTC

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

Copy link
Contributor

github-actions bot commented Jul 22, 2024

Size Change: +4.48 kB (0%)

Total Size: 1.33 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 65 kB +3.94 kB (+6%) 🔍
release/woocommerce-payments/dist/cart-block.js 16.2 kB +47 B (0%)
release/woocommerce-payments/dist/checkout.js 31.7 kB +50 B (0%)
release/woocommerce-payments/dist/express-checkout.js 14 kB +42 B (0%)
release/woocommerce-payments/dist/index.js 296 kB +86 B (0%)
release/woocommerce-payments/dist/payment-request.js 13.5 kB +47 B (0%)
release/woocommerce-payments/dist/product-details-rtl.css 433 B +36 B (+9%) 🔍
release/woocommerce-payments/dist/product-details.css 436 B +38 B (+10%) ⚠️
release/woocommerce-payments/dist/product-details.js 11.3 kB +79 B (+1%)
release/woocommerce-payments/dist/settings.js 223 kB +44 B (0%)
release/woocommerce-payments/dist/tokenized-payment-request.js 14.3 kB +33 B (0%)
release/woocommerce-payments/dist/woopay-express-button.js 23.9 kB +43 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/blocks-checkout-rtl.css 2.21 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.21 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 528 B
release/woocommerce-payments/dist/bnpl-announcement.css 529 B
release/woocommerce-payments/dist/bnpl-announcement.js 20.8 kB
release/woocommerce-payments/dist/cart.js 5.72 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/express-checkout-rtl.css 235 B
release/woocommerce-payments/dist/express-checkout.css 235 B
release/woocommerce-payments/dist/index-rtl.css 39.1 kB
release/woocommerce-payments/dist/index.css 39 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-switcher-block.js 60.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.5 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42.7 kB
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-gateways.js 39.2 kB
release/woocommerce-payments/dist/payment-request-rtl.css 235 B
release/woocommerce-payments/dist/payment-request.css 235 B
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/settings-rtl.css 11.2 kB
release/woocommerce-payments/dist/settings.css 11.1 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 235 B
release/woocommerce-payments/dist/tokenized-payment-request.css 235 B
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-express-button-rtl.css 235 B
release/woocommerce-payments/dist/woopay-express-button.css 235 B
release/woocommerce-payments/dist/woopay-rtl.css 4.5 kB
release/woocommerce-payments/dist/woopay.css 4.48 kB
release/woocommerce-payments/dist/woopay.js 71.1 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/src/js/i18n-loader.js 1.02 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 20 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 20 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 392 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 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
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

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

For the most part, this worked as expected and looks pretty neat and tidy. 🙌

There is quite a lot of duplicated code inside event-handlers.js, which is unfortunate, but unfortunately I can't really think of a better way to recommend improving this without performing a considerable refactor of the entire implementation...which I would not recommend. 😅

I think that's fine for now, but I've left a few little queries, comments, and suggestions for your perusal nonetheless. Let me know your thoughts and hopefully there won't be anything that requires too much additional work to amend. 🙏

@mdmoore mdmoore requested a review from FangedParakeet July 24, 2024 21:24
@mdmoore
Copy link
Member Author

mdmoore commented Jul 24, 2024

@FangedParakeet I think I've taken care of all comments. Let me know if see anything else out of place.

Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

I tested this out purchasing regular, variable, virtual, and subscription products and all succeeded as expected. 🎉

However, when the checkout/payment processing failed for some reason, I'm not sure that we are handling this correctly and the modal hangs for some time before failing with an unknown error. I think I've mentioned in a separate comment where I believe this can be resolved. Can you just review some of the error handling with this implementation please?

Once that's all set, I think this one should be good to go. 💪

@mdmoore mdmoore requested a review from FangedParakeet July 29, 2024 20:35
Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

Does exactly what it says on the tin: tested a variety of products and failures from both blocks cart and checkout pages without unexpected behaviour. Nice one! Left a minor query, but other than that this looks good to 🚢.

Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

Cheers for that last little change. Error parsing LGTM and works as expected now. 🙌

@mdmoore mdmoore added this pull request to the merge queue Aug 2, 2024
Merged via the queue into develop with commit f525f7c Aug 2, 2024
23 checks passed
@mdmoore mdmoore deleted the tokenized-cart-prb-blocks-cart-checkout branch August 2, 2024 03:16
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.

PRB tokenized cart on block-based cart and checkout
4 participants