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

Register Expresss Checkout block only when enabled in the settings #9646

Merged
merged 2 commits into from
Oct 31, 2024

Conversation

gpressutto5
Copy link
Contributor

@gpressutto5 gpressutto5 commented Oct 30, 2024

Fixes #9444

Changes proposed in this Pull Request

The Google & Apple Pay buttons were displayed in editor even when the payment method is disabled in WooPayments settings because they were always registered. This PR adds a check before registering them.

Testing instructions

  1. In wp-admin, go to WooCommerce > Settings > Payments > WooPayments page
  2. Disable Apple / Google Pay
  3. Open the checkout page in the editor
  4. See that the Apple & Google pay buttons are still rendered in the editor when using develop
  5. Checkout this branch and ensure they are not rendered anymore
  6. Enable Apple / Google Pay and ensurethey are rendered
  7. Smoke test to ensure everything still work as exptected

  • 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 Oct 30, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9646 or branch name fix/express-checkout-block-registering 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: d2af736
  • Build time: 2024-10-30 15:00:58 UTC

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

@gpressutto5 gpressutto5 requested review from alexflorisca, a team and timur27 and removed request for a team October 30, 2024 15:01
@gpressutto5 gpressutto5 marked this pull request as ready for review October 30, 2024 15:01
Copy link
Contributor

Size Change: +8 B (0%)

Total Size: 1.34 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 67.3 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.37 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.37 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.64 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.64 kB
release/woocommerce-payments/dist/cart-block.js 16.8 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.21 kB
release/woocommerce-payments/dist/checkout.css 1.21 kB
release/woocommerce-payments/dist/checkout.js 32.8 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 230 B
release/woocommerce-payments/dist/express-checkout.css 230 B
release/woocommerce-payments/dist/express-checkout.js 14.8 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.3 kB
release/woocommerce-payments/dist/index.css 39.3 kB
release/woocommerce-payments/dist/index.js 302 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 4.46 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.6 kB
release/woocommerce-payments/dist/multi-currency.css 4.46 kB
release/woocommerce-payments/dist/multi-currency.js 57.3 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.32 kB
release/woocommerce-payments/dist/payment-gateways.css 1.32 kB
release/woocommerce-payments/dist/payment-gateways.js 38.4 kB
release/woocommerce-payments/dist/payment-request-rtl.css 230 B
release/woocommerce-payments/dist/payment-request.css 230 B
release/woocommerce-payments/dist/payment-request.js 14.2 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 20.1 kB
release/woocommerce-payments/dist/product-details-rtl.css 433 B
release/woocommerce-payments/dist/product-details.css 436 B
release/woocommerce-payments/dist/product-details.js 12 kB
release/woocommerce-payments/dist/settings-rtl.css 11.6 kB
release/woocommerce-payments/dist/settings.css 11.5 kB
release/woocommerce-payments/dist/settings.js 224 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 230 B
release/woocommerce-payments/dist/tokenized-payment-request.css 230 B
release/woocommerce-payments/dist/tokenized-payment-request.js 15 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.8 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 6.14 kB
release/woocommerce-payments/dist/woopay-express-button.js 24.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.52 kB
release/woocommerce-payments/dist/woopay.css 4.49 kB
release/woocommerce-payments/dist/woopay.js 71.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/build/jetpack-script-data.js 735 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/react-jsx-runtime.js 553 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/script-data.js 69 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/babel.config.js 163 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.css 2.45 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.js 14.2 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/identity-crisis.rtl.css 2.45 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 280 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 333 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 417 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 621 B
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

@timur27 timur27 left a comment

Choose a reason for hiding this comment

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

Clear change and tests well, I just left one minor comment, up to you to decide on whether you want to apply it or not. Thanks @gpressutto5

Comment on lines +160 to 171
if ( getUPEConfig( 'isPaymentRequestEnabled' ) ) {
if ( getUPEConfig( 'isTokenizedCartPrbEnabled' ) ) {
registerExpressPaymentMethod(
tokenizedCartPaymentRequestPaymentMethod( api )
);
} else if ( getUPEConfig( 'isExpressCheckoutElementEnabled' ) ) {
registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
} else {
registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
}
}
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a matter of preference, but I started to find the below approach more readable after some time in our back-end PHP:

Suggested change
if ( getUPEConfig( 'isPaymentRequestEnabled' ) ) {
if ( getUPEConfig( 'isTokenizedCartPrbEnabled' ) ) {
registerExpressPaymentMethod(
tokenizedCartPaymentRequestPaymentMethod( api )
);
} else if ( getUPEConfig( 'isExpressCheckoutElementEnabled' ) ) {
registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
} else {
registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
}
}
if (!getUPEConfig('isPaymentRequestEnabled')) {
return;
}
if (getUPEConfig('isTokenizedCartPrbEnabled')) {
registerExpressPaymentMethod(tokenizedCartPaymentRequestPaymentMethod(api));
return;
}
if (getUPEConfig('isExpressCheckoutElementEnabled')) {
registerExpressPaymentMethod(expressCheckoutElementApplePay(api));
registerExpressPaymentMethod(expressCheckoutElementGooglePay(api));
return;
}
registerExpressPaymentMethod(paymentRequestPaymentMethod(api));

feel free to ignore it if the change does not seem convincing.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It is indeed more readable, but we have more code after that we want to execute regardless of PRB/ECE settings. If we want to early return we need to create a new function for this so it doesn't affect the rest of the code. But then I think it starts to get less readable, what do you think?

Suggested change
if ( getUPEConfig( 'isPaymentRequestEnabled' ) ) {
if ( getUPEConfig( 'isTokenizedCartPrbEnabled' ) ) {
registerExpressPaymentMethod(
tokenizedCartPaymentRequestPaymentMethod( api )
);
} else if ( getUPEConfig( 'isExpressCheckoutElementEnabled' ) ) {
registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
} else {
registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
}
}
const maybeRegisterExpressCheckoutMethod = () => {
if (!getUPEConfig('isPaymentRequestEnabled')) {
return;
}
if (getUPEConfig('isTokenizedCartPrbEnabled')) {
registerExpressPaymentMethod(tokenizedCartPaymentRequestPaymentMethod(api));
return;
}
if (getUPEConfig('isExpressCheckoutElementEnabled')) {
registerExpressPaymentMethod(expressCheckoutElementApplePay(api));
registerExpressPaymentMethod(expressCheckoutElementGooglePay(api));
return;
}
registerExpressPaymentMethod(paymentRequestPaymentMethod(api));
}
maybeRegisterExpressCheckoutMethod();

Copy link
Contributor

Choose a reason for hiding this comment

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

Yeah, agreed, I'd keep it as it is then without changing your final version 👍 🚢

@gpressutto5 gpressutto5 added this pull request to the merge queue Oct 31, 2024
Merged via the queue into develop with commit e1778b0 Oct 31, 2024
25 checks passed
@gpressutto5 gpressutto5 deleted the fix/express-checkout-block-registering branch October 31, 2024 14:39
@alexflorisca
Copy link
Member

Thanks for the review ping, just got round to it but looks like I'm a bit late. Great to see this shipped though, nice work! 🎉

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.

Google & Apple Pay buttons are displayed in editor even when the payment method is disabled
4 participants