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

[ECE] Add ECE support for WooCommerce Deposits. #9081

Merged
merged 13 commits into from
Jul 17, 2024

Conversation

asumaran
Copy link
Contributor

@asumaran asumaran commented Jul 11, 2024

Closes #9067

Changes proposed in this Pull Request

Testing instructions

Based on testing instructions of #7910 which added support for WooCommerce Deposits with PRBs. The functionality should be identical with ECE.

  • Enable Express Checkouts (Google and Apple Pay) to be displayed on product pages.
  • Install and enable WooCommerce Deposits. You can download it from here

Virtual Product

  • Create a virtual simple product with an optional deposit of 50%
  • image
  • Visit virtual simple product with optional deposit of 50%
  • Select "Pay Deposit" (if not already selected)
  • Click Apple/Google Pay button.
  • The price in the payment sheet should reflect the deposit amount (Only the 50% of the total amount in this case).
  • Proceed with purchase.
  • The deposit amount should be recorded as paid against the order.
  • The remaining amount should be recorded against the order.

Physical Product

  • Create a simple product with optional deposit of 30%
  • image
  • Visit the product page then click the express checkout button.
  • Check the paid amount is only the 30% of the total (product price + shipping) * 0.3

Virtual product with payment plan

  • Go to Products > Payment Plans and create a 30%/70% payment plan.
  • Screenshot 2024-07-10 at 8 53 18 PM
  • Create a virtual product with optional plan
  • Screenshot 2024-07-10 at 8 52 17 PM
  • Go to the product page.
  • Select "Pay Deposit".
  • Select payment plan.
  • Click Apple/Google Pay button.
  • Proceed with purchase.
  • The first payment amount should be recorded as paid against the order.
  • The remaining amount should be recorded against the order.

Note
If you want to test to pay the remaining balance you have to go to the order page in the admin area then click "Invoice Remaining Balance"

image

It will create a new order, and you will be able to pay the remaining using the "Customer payment page" link. Note that the ECE button didn't work on the Pay for Order page, so code has been added to disable it on that page in this PR.

image
  • 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

@asumaran asumaran self-assigned this Jul 11, 2024
@botwoo
Copy link
Collaborator

botwoo commented Jul 11, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9081 or branch name as-ece-wc-deposits-support 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: c519b21
  • Build time: 2024-07-16 13:29:22 UTC

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

Copy link
Contributor

github-actions bot commented Jul 11, 2024

Size Change: +80 B (0%)

Total Size: 1.28 MB

Filename Size Change
release/woocommerce-payments/dist/express-checkout.js 6.39 kB +80 B (+1%)
ℹ️ 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.08 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.08 kB
release/woocommerce-payments/dist/blocks-checkout.js 60.9 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.1 kB
release/woocommerce-payments/dist/cart-block.js 15.4 kB
release/woocommerce-payments/dist/cart.js 4.87 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/checkout.js 31.7 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 219 B
release/woocommerce-payments/dist/express-checkout.css 219 B
release/woocommerce-payments/dist/index-rtl.css 41.1 kB
release/woocommerce-payments/dist/index.css 41 kB
release/woocommerce-payments/dist/index.js 295 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.9 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55 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 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 38.9 kB
release/woocommerce-payments/dist/payment-request-rtl.css 219 B
release/woocommerce-payments/dist/payment-request.css 219 B
release/woocommerce-payments/dist/payment-request.js 5.9 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 19.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 397 B
release/woocommerce-payments/dist/product-details.css 398 B
release/woocommerce-payments/dist/product-details.js 11.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11.2 kB
release/woocommerce-payments/dist/settings.css 11.1 kB
release/woocommerce-payments/dist/settings.js 215 kB
release/woocommerce-payments/dist/subscription-edit-page.js 668 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 19.5 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 694 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.6 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 219 B
release/woocommerce-payments/dist/tokenized-payment-request.css 219 B
release/woocommerce-payments/dist/tokenized-payment-request.js 6.62 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 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 5.25 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 219 B
release/woocommerce-payments/dist/woopay-express-button.css 219 B
release/woocommerce-payments/dist/woopay-express-button.js 15.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.26 kB
release/woocommerce-payments/dist/woopay.css 4.23 kB
release/woocommerce-payments/dist/woopay.js 69.6 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

@asumaran asumaran changed the title As ece wc deposits support [ECE] Add ECE support for WooCommerce Deposits. Jul 11, 2024
@asumaran asumaran marked this pull request as ready for review July 11, 2024 01:56
@asumaran asumaran requested review from a team and reykjalin and removed request for a team July 11, 2024 01:59
Copy link
Contributor

@reykjalin reykjalin left a comment

Choose a reason for hiding this comment

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

The payments failed for me in several places which I think we need to address:

Virtual Simple (50% deposit)

  • ⛔️ Fails when using GPay from the product page.
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

Physical product (30% then 70%)

  • ⛔️ Payment sheet doesn't show up from the product page (default choice is Pay full, change to Deposit and click button).
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

Payment Plan (physical)

  • ✅ Success when using GPay from the product page.
    • I have no idea why this one succeeded but the other ones failed.
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

$(
'input[name=wc_deposit_option],input[name=wc_deposit_payment_plan]'
)
.off( 'change' )
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the purpose of this off? Do we need to remove all other event handlers from the change event? 🤔

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 was being extra cautious because the ECE element can be reinitialized, event handlers are attached each time it happens. To avoid attaching multiple handlers to the same selector, I remove any existing event handlers first. Although the elements are not being removed and added again, it seems unnecessary, but I prefer to keep it this way for safety. Does that sound good to you?

Copy link
Contributor

Choose a reason for hiding this comment

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

I appreciate the caution, but if we're going to do that I think we should pass the specific handler we're removing to the function so we're not just removing every single event handler that may have been attached.

See the off() docs for details.

@asumaran
Copy link
Contributor Author

⛔️ Fails when using GPay from the product page.

Nice catch. Fixed via 2203c28

⛔️ Fails when using GPay from the Checkout Block.

Works for me now.

⛔️ Payment sheet doesn't show up from the product page (default choice is Pay full, change to Deposit and click button).

I can reproduce this. I've fixed it via 263027c. Race condition issue.

⛔️ Fails when using GPay from the Checkout Block.

Works for me now.

⛔️ Fails when using GPay from the Checkout Block.

Works for me now.

@asumaran asumaran requested a review from reykjalin July 12, 2024 18:32
Copy link
Contributor

@reykjalin reykjalin left a comment

Choose a reason for hiding this comment

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

I'm still seeing some failures in the Checkout block:

Virtual Simple (50% deposit)

  • ✅ Success when using GPay from the product page.
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

Physical product (30% then 70%)

  • ✅ Success sheet doesn't show up from the product page (default choice is Pay full, change to Deposit and click button).
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

Payment Plan (physical)

  • ✅ Success when using GPay from the product page.
    • I have no idea why this one succeeded but the other ones failed.
  • ✅ Success when using GPay from the Cart Block.
  • ⛔️ Fails when using GPay from the Checkout Block.
  • ✅ Success when using GPay from the Shortcode Checkout.
  • ✅ Success when using GPay from the Shortcode Cart

All I can tell from the network console is that it's failing in the create_order part of the flow. Maybe because I have multi-currency enabled? 🤔 Although I doubt that's the problem since this works via the same APIs from other pages. I suspect there's something that needs to be changed in the blocks integration?

@asumaran
Copy link
Contributor Author

@reykjalin does it fail for you with PRBs too?

@rafaelzaleski
Copy link
Contributor

I couldn’t reproduce the failed test cases reported by @reykjalin in Safari.
I’ve deployed this branch to the Pressable test environments we’re using today, as it includes the WC Deposits integration.

Could @reykjalin check if the issue still persists in the Pressable environment? This could help us understand why it’s failing for Kris and determine whether to address it here or in a new issue, especially if it’s specific to certain setups.

@asumaran
Copy link
Contributor Author

I reran some tests with the failed cases, and it's working fine for me on Chrome. I will need more details to reproduce it, or maybe it's related to your setup, @reykjalin?

@reykjalin
Copy link
Contributor

Could @reykjalin check if the issue still persists in the Pressable environment?

They're not present there so I'll do some more testing in my local tomorrow to try to track this down.

@reykjalin reykjalin self-requested a review July 16, 2024 02:37
Copy link
Contributor

@reykjalin reykjalin left a comment

Choose a reason for hiding this comment

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

The problems I was running into are unrelated to the changes in this PR so I'm approving the PR given that it seems to work for everyone else, including for myself in a different testing environment.

Awesome work 👏 🚀

@asumaran asumaran added this pull request to the merge queue Jul 17, 2024
Merged via the queue into develop with commit a8e648c Jul 17, 2024
23 checks passed
@asumaran asumaran deleted the as-ece-wc-deposits-support branch July 17, 2024 23:22
lovo-h pushed a commit that referenced this pull request Aug 1, 2024
Co-authored-by: Rafael Zaleski <rafaelzaleski@users.noreply.github.com>
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.

[ECE] Add support for WooCommerce Deposits.
5 participants