Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Prevent saved payment methods showing if their main method canPay function returns false #9917

Merged
merged 11 commits into from
Jun 28, 2023
Merged

Prevent saved payment methods showing if their main method canPay function returns false #9917

merged 11 commits into from
Jun 28, 2023

Conversation

opr
Copy link
Contributor

@opr opr commented Jun 20, 2023 •
edited
Loading

This PR will update the code used to display saved payment methods to ensure the saved methods for a specific gateway only display if that gateway's canPay function is true.

To achieve this, this PR introduces the following changes:

  • Introduce new type CanMakePaymentArgumentCart - necessary because the cart passed to canPay functions is a little different to the one in the data store (the keys are named differently, we can deprecate this later, but it is not in scope for the current PR)
  • Add a new function getCanMakePaymentArg which will get the arg passed to canMakePayment - having this in a "getter" makes it reusable. Previously this was only needed in checkPaymentMethodsCanPay but now it is also used when checking whether the saved methods can pay.
  • When displaying saved methods, get all individual gateways the saved methods belong to, and check the result of the parent gateway's canPay function, if it is false then do not display any saved methods for that gateway.
  • Update SavedPaymentMethodOptions to TypeScript

Fixes #8678

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User-facing Testing

  1. Install the Gocardless payment method and set up a dev account there.
  2. Using UK as your country, buy a product using GoCardless and opt to save the payment method. Check out.
  3. Add another product to the cart and go to the Checkout block.
  4. Enter a valid UK address and ensure the saved GoCardless method shows up as expected.
  5. Change to an invalid address (Afghanistan for example) and ensure the saved GoCardless method is not visible.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Ensure saved payment methods do not show if the payment gateway they belong to cannot be used to make payments for the current cart configuration.

@opr opr added status: needs review focus: blocks Specific work involving or impacting how blocks behave. block: checkout Issues related to the checkout block. focus: data-store Related to the data management layer. labels Jun 20, 2023
@opr opr self-assigned this Jun 20, 2023
@woocommercebot woocommercebot requested review from a team and nielslange and removed request for a team June 20, 2023 12:43
@opr opr requested a review from tarunvijwani June 20, 2023 12:43
@github-actions
Copy link
Contributor

github-actions bot commented Jun 20, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9917.zip

Script Dependencies Report

The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.

Script Handle Added Removed
reviews-frontend.js wc-settings, wp-a11y, wp-api-fetch, wp-compose, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill ⚠️
active-filters-frontend.js wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
attribute-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
cart-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-context, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-blocks, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️
checkout-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-blocks-shared-hocs, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-plugins, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
filter-wrapper-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning ⚠️
mini-cart-frontend.js wc-price-format, wc-settings, wp-i18n, wp-polyfill ⚠️
price-filter-frontend.js react, wc-blocks-data-store, wc-price-format, wc-settings, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-url ⚠️
rating-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
stock-filter-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-url, wp-warning ⚠️
mini-cart-component-frontend.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-keycodes, wp-polyfill, wp-primitives, wp-style-engine, wp-url, wp-warning, wp-wordcount ⚠️

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 461
  • Total errors: 2228

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@opr opr force-pushed the fix/saved-payment-methods branch from 6bb4ad7 to b68abe1 Compare June 20, 2023 12:45
@github-actions
Copy link
Contributor

github-actions bot commented Jun 20, 2023 •
edited
Loading

Size Change: +1.81 kB (0%)

Total Size: 1.17 MB

Filename Size Change
build/active-filters-frontend.js 8.64 kB +12 B (0%)
build/active-filters-wrapper-frontend.js 7.58 kB +7 B (0%)
build/active-filters.js 7.49 kB +5 B (0%)
build/all-products-frontend.js 12.2 kB +1 B (0%)
build/all-products.js 40.3 kB +1 B (0%)
build/all-reviews.js 7.87 kB +3 B (0%)
build/attribute-filter-frontend.js 23 kB +7 B (0%)
build/attribute-filter-wrapper-frontend.js 7.73 kB +7 B (0%)
build/attribute-filter.js 13.3 kB +4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.77 kB +4 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -5 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 720 B +1 B (0%)
build/cart-blocks/cart-items-frontend.js 301 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.58 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB +2 B (0%)
build/cart-blocks/cart-totals-frontend.js 307 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 656 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -2 B (-1%)
build/cart-blocks/order-summary-heading-frontend.js 334 B +1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB +3 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-frontend.js 29.9 kB -101 B (0%)
build/cart.js 45.1 kB -183 B (0%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.88 kB -1 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.04 kB -7 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB +4 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB +4 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 435 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 9.27 kB +976 B (+12%) ⚠️
build/checkout-blocks/shipping-address-frontend.js 1.17 kB -1 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.63 kB -4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB -2 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 361 B +1 B (0%)
build/checkout-frontend.js 31.8 kB -101 B (0%)
build/checkout.js 47.6 kB +983 B (+2%)
build/customer-account.js 3.19 kB +1 B (0%)
build/featured-category.js 15.1 kB +13 B (0%)
build/featured-product.js 15.3 kB +9 B (0%)
build/filter-wrapper-frontend.js 14.3 kB -27 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8.04 kB -4 B (0%)
build/legacy-template.js 6.82 kB +19 B (0%)
build/mini-cart-component-frontend.js 30.7 kB +15 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB +1 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB +2 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 587 B -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 531 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB +3 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB +3 B (0%)
build/mini-cart-contents.js 18.2 kB +37 B (0%)
build/mini-cart-frontend.js 2.84 kB -1 B (0%)
build/mini-cart.js 5.93 kB +12 B (0%)
build/price-filter-frontend.js 14.7 kB +25 B (0%)
build/price-filter-wrapper-frontend.js 6.79 kB +17 B (0%)
build/price-filter.js 8.56 kB +6 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 272 B +22 B (+9%) 🔍
build/product-add-to-cart-frontend.js 6.52 kB +2 B (0%)
build/product-add-to-cart.js 8.84 kB -7 B (0%)
build/product-best-sellers.js 8.36 kB -1 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B -1 B (0%)
build/product-button-frontend.js 2.67 kB +16 B (+1%)
build/product-categories.js 2.72 kB +12 B (0%)
build/product-category.js 9.36 kB -4 B (0%)
build/product-image-frontend.js 2.63 kB +19 B (+1%)
build/product-image.js 4.14 kB -3 B (0%)
build/product-new.js 8.65 kB -2 B (0%)
build/product-on-sale.js 8.65 kB -4 B (0%)
build/product-price-frontend.js 231 B +27 B (+13%) ⚠️
build/product-price.js 1.68 kB +1 B (0%)
build/product-query.js 11.9 kB +13 B (0%)
build/product-rating-frontend.js 2.34 kB +9 B (0%)
build/product-rating.js 1.03 kB -1 B (0%)
build/product-results-count.js 1.65 kB -4 B (0%)
build/product-sale-badge-frontend.js 1.8 kB +15 B (+1%)
build/product-sale-badge.js 665 B -1 B (0%)
build/product-sku-frontend.js 1.85 kB +18 B (+1%)
build/product-stock-indicator-frontend.js 2.04 kB +12 B (+1%)
build/product-stock-indicator.js 730 B -1 B (0%)
build/product-summary-frontend.js 2.26 kB +16 B (+1%)
build/product-summary.js 1.01 kB +4 B (0%)
build/product-tag.js 9.01 kB -7 B (0%)
build/product-template.js 3.34 kB -2 B (0%)
build/product-title-frontend.js 2.22 kB +12 B (+1%)
build/product-title.js 3.66 kB +1 B (0%)
build/product-top-rated.js 8.91 kB +2 B (0%)
build/products-by-attribute.js 9.76 kB +10 B (0%)
build/rating-filter-frontend.js 21.5 kB +10 B (0%)
build/rating-filter-wrapper-frontend.js 6.25 kB +18 B (0%)
build/rating-filter.js 6.94 kB +6 B (0%)
build/reviews-by-category.js 12.1 kB +4 B (0%)
build/reviews-by-product.js 13.3 kB -3 B (0%)
build/reviews-frontend.js 7.17 kB -1 B (0%)
build/single-product.js 11.1 kB +3 B (0%)
build/stock-filter-frontend.js 21.7 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 6.5 kB +16 B (0%)
build/stock-filter.js 7.67 kB +12 B (0%)
build/store-notices.js 1.69 kB +5 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB -3 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB +2 B (0%)
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB -1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB -5 B (0%)
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB -1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB -5 B (0%)
build/vendors--price-filter-wrapper-frontend.js 2.2 kB +1 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/wc-blocks-data.js 22.4 kB +37 B (0%)
build/wc-blocks-style-rtl.css 28 kB +2 B (0%)
build/wc-blocks-style.css 28 kB +2 B (0%)
build/wc-blocks-vendors.js 65.1 kB +11 B (0%)
build/wc-blocks.js 3.71 kB +11 B (0%)
build/woo-directives-runtime.js 0 B -2.73 kB (removed) 🏆
build/woo-directives-vendors.js 0 B -7.91 kB (removed) 🏆
build/wc-interactivity.js 10.4 kB +10.4 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-button.js 3.97 kB
build/product-collection.js 12.3 kB
build/product-search.js 2.63 kB
build/product-sku.js 535 B
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

@opr opr requested a review from mikejolley June 20, 2023 13:33
nielslange
nielslange approved these changes Jun 27, 2023
View reviewed changes
Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

Thanks for working on this, @opr. I've successfully tested the PR.

Code-wise, I could spot something strange. But I'd appreciate it if @mikejolley could double-check the code.

I just left a comment regarding one TS error that had been introduced by this PR. That said, as the PR works as expected, I'm pre-approving it.

assets/js/blocks/cart-checkout-shared/payment-methods/test/saved-payment-method-options.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 10.6.0 milestone Jun 27, 2023
mikejolley
mikejolley reviewed Jun 28, 2023
View reviewed changes
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Spotted nothing out of the ordinary in the code so looks good. I did not re-test the functionality.

@opr opr merged commit 34fc8ac into trunk Jun 28, 2023
35 checks passed
@opr opr deleted the fix/saved-payment-methods branch June 28, 2023 08:43
@opr opr added the type: bug The issue/PR concerns a confirmed bug. label Jul 4, 2023
@nielslange nielslange mentioned this pull request Jul 6, 2023
Closed
5 tasks
@opr opr mentioned this pull request Jul 7, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mikejolley mikejolley mikejolley left review comments

@nielslange nielslange nielslange approved these changes

@tarunvijwani tarunvijwani Awaiting requested review from tarunvijwani

Assignees

@opr opr

Labels
block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. focus: data-store Related to the data management layer. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
10.6.0
Development

Successfully merging this pull request may close these issues.

Saved Payment Methods showing when canMakePayment is false
3 participants
@opr @mikejolley @nielslange