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

Fix invalid value error for paymentMethodMessaging in product details page #7153

Merged
merged 28 commits into from
Sep 28, 2023

Conversation

mgascam
Copy link
Contributor

@mgascam mgascam commented Sep 7, 2023

Fixes #6819 (reopened)

This issue has been reopened. We received reports of errors in the plugin in the product details page after the previous fix was released. This time, errors seem to happen due to merchants customizing this page by removing the quantity input.

Changes proposed in this Pull Request

  • Improved the method of fetching the product quantity and handling cases where the input element might be missing.
  • Introduced safeguards against potential undefined values for productVariations and related fields.
  • Established 'USD' as the fallback currency in case it's not defined in productVariations.
  • Added more strict checks for potentially missing DOM elements to prevent script errors.

Testing instructions

To replicate the issue we need to remove the quantity input from the product details page. This can be achieved by several means. We got reports of merchants using a page builder. I was able to replicate the issue locally, using this hook woocommerce_is_sold_individually. In the functions.php file of the Storefront theme add the following:

function custom_woocommerce_remove_quantity_input() {
    return true;
}
add_filter( 'woocommerce_is_sold_individually', 'custom_woocommerce_remove_quantity_input' );
  • Enable Affirm or Afterpay in your local store.
  • Navigate to the details page of a product with variations.
  • Check the Affirm and Afterpay messaging is displayed when the page loads.
  • Check there are no errors in the browser console related to paymentMethodMessaging.
  • Check you are able to select variations with no errors happening.
  • Check you are able to add the product to the cart without issues.
  • Navigate to the details page of a product without variations.
  • Check the same steps as before.
  • Enable the quantity selector back (you can return false in the custom_woocommerce_remove_quantity_input)
  • Repeat the same steps to check you are able to add the product to the cart.

  • 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 Sep 7, 2023

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 7153 or branch name fix/6819-payment-method-messaging-invalid-value 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: 3df9836
  • Build time: 2023-09-28 07:55:31 UTC

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 7, 2023

Size Change: +109 B (0%)

Total Size: 1.42 MB

Filename Size Change
release/woocommerce-payments/dist/product-details.js 898 B +109 B (+14%) ⚠️
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.03 kB
release/woocommerce-payments/assets/css/success.css 158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/blocks-checkout.js 74 kB
release/woocommerce-payments/dist/checkout-rtl.css 440 B
release/woocommerce-payments/dist/checkout.css 441 B
release/woocommerce-payments/dist/checkout.js 28.8 kB
release/woocommerce-payments/dist/index-rtl.css 36.4 kB
release/woocommerce-payments/dist/index.css 36.4 kB
release/woocommerce-payments/dist/index.js 282 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 2.88 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.1 kB
release/woocommerce-payments/dist/multi-currency.css 2.88 kB
release/woocommerce-payments/dist/multi-currency.js 54.7 kB
release/woocommerce-payments/dist/order-rtl.css 676 B
release/woocommerce-payments/dist/order.css 679 B
release/woocommerce-payments/dist/order.js 40.9 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 690 B
release/woocommerce-payments/dist/payment-gateways.css 692 B
release/woocommerce-payments/dist/payment-gateways.js 38.4 kB
release/woocommerce-payments/dist/payment-request-rtl.css 146 B
release/woocommerce-payments/dist/payment-request.css 146 B
release/woocommerce-payments/dist/payment-request.js 11.7 kB
release/woocommerce-payments/dist/settings-rtl.css 8.92 kB
release/woocommerce-payments/dist/settings.css 8.92 kB
release/woocommerce-payments/dist/settings.js 231 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.3 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 693 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.4 kB
release/woocommerce-payments/dist/tos-rtl.css 230 B
release/woocommerce-payments/dist/tos.css 231 B
release/woocommerce-payments/dist/tos.js 21.9 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_checkout.css 441 B
release/woocommerce-payments/dist/upe_checkout.js 34.1 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css 440 B
release/woocommerce-payments/dist/upe_split_checkout.css 441 B
release/woocommerce-payments/dist/upe_split_checkout.js 34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js 36.7 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js 39.6 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css 1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js 41 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 146 B
release/woocommerce-payments/dist/woopay-express-button.css 146 B
release/woocommerce-payments/dist/woopay-express-button.js 50.9 kB
release/woocommerce-payments/dist/woopay-rtl.css 3.85 kB
release/woocommerce-payments/dist/woopay.css 3.85 kB
release/woocommerce-payments/dist/woopay.js 71.5 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 720 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.2 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.56 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.63 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.38 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.06 kB

compressed-size-action

@mgascam mgascam force-pushed the fix/6819-payment-method-messaging-invalid-value branch from 213ec27 to c30f9cf Compare September 8, 2023 16:54
@mgascam mgascam changed the title Fix invalid value error for paymentMethodMessaging Fix invalid value error for paymentMethodMessaging in product details page Sep 8, 2023
@mgascam mgascam marked this pull request as ready for review September 11, 2023 08:44
@mgascam mgascam requested a review from a team September 11, 2023 08:44
@mgascam mgascam self-assigned this Sep 11, 2023
Copy link
Contributor

@kalessil kalessil left a comment

Choose a reason for hiding this comment

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

Like the direction, but we shouldn't be updating element if we can not reliable calculate price. See my comments.

client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@kalessil kalessil left a comment

Choose a reason for hiding this comment

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

Pre-approving, as handed further reviews to @KarlisJ.

client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
client/product-details/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@KarlisJ KarlisJ left a comment

Choose a reason for hiding this comment

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

Overall, when looking strictly at the changes and comparing old vs new code it's a nice improvement, I like the changes.

But my first though seeing the resetBnplPaymentMessage and quantityInput.on( 'change', was "why can't we trigger the change event from resetBnplPaymentMessage?" . I believe that's the "jQuery approch" for less code duplication.

On the surface level it seems that both blocks operate with different values, but digging deeper it seems to me that it's not true.

In resetBnplPaymentMessage we access productVariations.base_product.amount but in the change handler we access productVariations[ productId ].amount. Looking at the source productId that we define at the top will always be base_product so essentially both blocks perform the same action.

Or have I misunderstood something?

…hub.com:Automattic/woocommerce-payments into fix/6819-payment-method-messaging-invalid-value
…hub.com:Automattic/woocommerce-payments into fix/6819-payment-method-messaging-invalid-value
@mgascam
Copy link
Contributor Author

mgascam commented Sep 22, 2023

Overall, when looking strictly at the changes and comparing old vs new code it's a nice improvement, I like the changes.

But my first though seeing the resetBnplPaymentMessage and quantityInput.on( 'change', was "why can't we trigger the change event from resetBnplPaymentMessage?" . I believe that's the "jQuery approch" for less code duplication.

On the surface level it seems that both blocks operate with different values, but digging deeper it seems to me that it's not true.

In resetBnplPaymentMessage we access productVariations.base_product.amount but in the change handler we access productVariations[ productId ].amount. Looking at the source productId that we define at the top will always be base_product so essentially both blocks perform the same action.

Or have I misunderstood something?

Thanks @KarlisJ I looked into your comment about variations and refactored the code. Also fixed some buggy scenarios where the messaging element was not being updated. Please take a look and let me know if you like it better.

But my first though seeing the resetBnplPaymentMessage and quantityInput.on( 'change', was "why can't we trigger the change event from resetBnplPaymentMessage?" . I believe that's the "jQuery approch" for less code duplication.

Apologies but I'm not following you here. resetBnplPaymentMessage is a function we use as event handler, not sure what you mean when you suggest to trigger the change event from there?

@KarlisJ
Copy link
Contributor

KarlisJ commented Sep 27, 2023

@mgascam

Apologies but I'm not following you here. resetBnplPaymentMessage is a function we use as event handler, not sure what you mean when you suggest to trigger the change event from there?

Before your last commits it seemed that both resetBnplPaymentMessage and event handler perform the same action. So it seemed to me that we are duplicating logic I suggested to simply call resetBnplPaymentMessage in the event handler to avoid duplication.

Now I see that they do not perform same action thus can't be reused is such way.

Copy link
Contributor

@KarlisJ KarlisJ left a comment

Choose a reason for hiding this comment

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

LGTM, approving with one minor comment.

client/product-details/index.js Outdated Show resolved Hide resolved
@mgascam mgascam added this pull request to the merge queue Sep 28, 2023
Merged via the queue into develop with commit af41db7 Sep 28, 2023
26 of 27 checks passed
@mgascam mgascam deleted the fix/6819-payment-method-messaging-invalid-value branch September 28, 2023 12:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants