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

Detect multiple enabled payment methods of the same type #8513

Merged
merged 61 commits into from
Apr 18, 2024

Conversation

timur27
Copy link
Contributor

@timur27 timur27 commented Mar 28, 2024

Closes #8384

Changes proposed in this Pull Request

This PR is the first iteration of the feature which should help merchants identify payment methods of the same type that are enabled by multiple plugins. It implements the simple solution mentioned in paJDYF-ck0-p2. The inline notice pops up under the payment method and can be dismissed. Once dismissed, it won't appear again upon page refresh.

Note: as mentioned in the solution description, the downside of the simple solution implemented in this PR is that we base on the hardcoded keywords list. Due to the fact that there are currently no rules for gateways (internal & third-party) to follow in terms of gateway ID, this solution cannot guarantee its effectiveness in every use case, as some third-party plugin is free to call card gateway in any other way, e.g. third-party-gateway. This limitation is known.

For testing steps outlined below, you can use multiple plugins. During development, I used WooPayments, Mollie, Stripe and Klarna). If you'd like to quickly setup Mollie, contact @timur27 for test API keys which hopefully will save you a bit of time. For more inspiration on which plugins you could use, please see paJDYF-ck0-p2#comment-23134 which refers the duplicates data.

Testing instructions

💡 The inline notice text was confirmed with Product & Design and is following: 
This payment method is enabled by other extensions. Review extensions to improve the shopper experience.

Here's how the inline notice looks like:

image

  • Enable credit card by any other plugin e.g. Mollie or Stripe
  • Navigate to Payments settings and confirm there's an inline notice under credit card payment method. Review extensions should open the WooCommerce payment settings page
  • Enable any other payment method from APMs list. You can use Klarna gateway to check with Klarna or Stripe for any other payment method.
  • Confirm that the notice appears.
  • Test the scenario when a payment method is enabled in three different places, including WooPayments. At this point, you will see the notice. However, if we disable payment method by WooPayments, the notice should disappear, although it's still enabled by two other plugins. The goal is to show the notice only if WooPayments is part of the plugins group that introduce a duplicate.
  • Check Apple Pay/Google Pay by enabling them e.g. under Stripe gateway and checking if the notice appears. Stripe gateway allows PRBs to be enabled with both disabled and enabled CC, and both use-cases should be covered by this PR.
  • Dismiss any notice and confirm that it's not shown after closing. Refresh the page and confirm no notice is present.
  • Confirm that notice is handled separately, meaning that only part of the notices can be dismissed. After such action, the rest should still be present on the page.

  • 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

@botwoo
Copy link
Collaborator

botwoo commented Mar 28, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8513 or branch name add/duplicates-detection 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: f45bac0
  • Build time: 2024-04-18 10:38:47 UTC

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

Copy link
Contributor

github-actions bot commented Mar 28, 2024

Size Change: +487 B (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 292 kB +34 B (0%)
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.7 kB +18 B (0%)
release/woocommerce-payments/dist/multi-currency.js 54.8 kB +18 B (0%)
release/woocommerce-payments/dist/order.js 42 kB +17 B (0%)
release/woocommerce-payments/dist/payment-gateways.js 38.8 kB +28 B (0%)
release/woocommerce-payments/dist/settings.js 202 kB +372 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/blocks-checkout.js 57.1 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 20 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/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.28 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
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-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/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

@timur27 timur27 force-pushed the add/duplicates-detection branch from 349854f to f3de0a6 Compare March 29, 2024 12:10
@timur27 timur27 force-pushed the add/duplicates-detection branch from 1343fda to d0854b0 Compare April 8, 2024 10:54
@timur27 timur27 force-pushed the add/duplicates-detection branch from 82a59a6 to 18d0e08 Compare April 15, 2024 13:50
@timur27 timur27 force-pushed the add/duplicates-detection branch from 18d0e08 to 5e1741a Compare April 15, 2024 13:53
@timur27 timur27 marked this pull request as ready for review April 15, 2024 16:12
@timur27 timur27 requested review from a team and mdmoore and removed request for a team April 15, 2024 16:21
@timur27
Copy link
Contributor Author

timur27 commented Apr 16, 2024

@mdmoore I added an optimization in e6a5165 which allows to share the state of dismissed notices between ExpressCheckout and PaymentMethods components by using useContext (in practice, this means a merchant can dismiss PRB notice & any payment method notice in one go and both will effectively be dismissed). The usage of context also eliminates repeating the code in some places. Just FYI about this addition, I hope it's not interfering with your review much, in case you already started it. Thanks!

@timur27 timur27 force-pushed the add/duplicates-detection branch from 934dfbd to e6a5165 Compare April 16, 2024 09:23
Copy link
Member

@mdmoore mdmoore left a comment

Choose a reason for hiding this comment

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

This all LGTM! Only one minor comment about an unused useState hook which GH pointed out.

✅ Navigate to Payments settings and confirm there's an inline notice under credit card payment method. Review extensions should open the WooCommerce payment settings page

✅ Enable any other payment method from APMs list. You can use Klarna gateway to check with Klarna or Stripe for any other payment method.
Confirm that the notice appears.

✅ Test the scenario when a payment method is enabled in three different places, including WooPayments. At this point, you will see the notice. However, if we disable payment method by WooPayments, the notice should disappear, although it's still enabled by two other plugins. The goal is to show the notice only if WooPayments is part of the plugins group that introduce a duplicate.

✅ Check Apple Pay/Google Pay by enabling them e.g. under Stripe gateway and checking if the notice appears. Stripe gateway allows PRBs to be enabled with both disabled and enabled CC, and both use-cases should be covered by this PR.

✅ Dismiss any notice and confirm that it's not shown after closing. Refresh the page and confirm no notice is present.

✅ Confirm that notice is handled separately, meaning that only part of the notices can be dismissed. After such action, the rest should still be present on the page.

All is testing well and I have no critiques here. 🚢

client/settings/express-checkout/apple-google-pay-item.tsx Outdated Show resolved Hide resolved
@timur27 timur27 added this pull request to the merge queue Apr 18, 2024
Merged via the queue into develop with commit 3e4160e Apr 18, 2024
20 of 22 checks passed
@timur27 timur27 deleted the add/duplicates-detection branch April 18, 2024 10:52
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.

Implement duplicated payment methods detection mechanism
3 participants