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

Add bnpl logos to thank you page. #8650

Merged
merged 29 commits into from
Apr 30, 2024

Conversation

brettshumaker
Copy link
Contributor

@brettshumaker brettshumaker commented Apr 16, 2024

Fixes #8249

Changes proposed in this Pull Request

This PR adds the bnpl payment method logo to the thank you page. I'm utilizing the get_theme_icon() to get the light/dark icon based on whichever checkout upe transient has been set (classic or block checkout). WooPay also adds a logo in this spot so I borrowed the approach used there but then generalized the wrapper class so I didn't have to repeat CSS. I also added a WooPay-specific class to that wrapper as well as the new bnpl wrappers in case we ever need to scope CSS to them individually. This implementation also adds a wc_payments_thank_you_page_bnpl_payment_method_logo_url filter to allow users to change the logo URL in case our transient specifies the dark logo but a light logo works better on the thank you page. It also falls back to the payment method title (how it currently works) if it can't get the logo URL for some reason.

Testing instructions

  • Complete a checkout with a BNPL method and you should see the logo on the thank you page instead of the plain title.
  • Please check multiple themes with both light and dark versions to ensure that the proper logo style is pulled. You'll need to visit the checkout page after the theme change to make sure that the UPE appearances are generated and saved.

  • 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

* Adds the bnpl logo to the thank you page.
* Generalizes and reuses CSS class for both WooPay and BNPL
* Add max-height to bnpl logos
@botwoo
Copy link
Collaborator

botwoo commented Apr 16, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 8650 or branch name 8249/add-bnpl-icons-to-thank-you-page 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: 9f92c52
  • Build time: 2024-04-30 10:22:52 UTC

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

Copy link
Contributor

github-actions bot commented Apr 16, 2024

Size Change: +28 B (0%)

Total Size: 1.25 MB

Filename Size Change
release/woocommerce-payments/assets/css/success.css 172 B +14 B (+9%) 🔍
release/woocommerce-payments/assets/css/success.rtl.css 172 B +14 B (+9%) 🔍
ℹ️ 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/dist/blocks-checkout-rtl.css 2.06 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.07 kB
release/woocommerce-payments/dist/blocks-checkout.js 56.3 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.4 kB
release/woocommerce-payments/dist/cart.js 4.38 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.5 kB
release/woocommerce-payments/dist/index-rtl.css 40.7 kB
release/woocommerce-payments/dist/index.css 40.6 kB
release/woocommerce-payments/dist/index.js 292 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-switcher-block.js 59.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.29 kB
release/woocommerce-payments/dist/multi-currency.js 54.6 kB
release/woocommerce-payments/dist/order-rtl.css 733 B
release/woocommerce-payments/dist/order.css 735 B
release/woocommerce-payments/dist/order.js 41.8 kB
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-gateways.js 38.6 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 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.1 kB
release/woocommerce-payments/dist/settings.css 10.9 kB
release/woocommerce-payments/dist/settings.js 201 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 693 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.54 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 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.25 kB
release/woocommerce-payments/dist/woopay.css 4.22 kB
release/woocommerce-payments/dist/woopay.js 69.4 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

@brettshumaker brettshumaker requested review from a team and FangedParakeet and removed request for a team April 17, 2024 14:57
@FangedParakeet
Copy link
Contributor

I've left a few comments, but I'm to regretfully reassign my review, since I won't have time to give this a second look this afternoon, will be travelling tomorrow, and do not want to be a blocker for this PR. 🙏

@FangedParakeet FangedParakeet requested review from a team and gpressutto5 and removed request for a team April 18, 2024 19:51
Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

Testing pretty well for me. Nice one! Just have a couple more comments about a few little things I stumbled upon along the way.

includes/class-wc-payments-order-success-page.php Outdated Show resolved Hide resolved
includes/class-wc-payments-order-success-page.php Outdated Show resolved Hide resolved
includes/class-wc-payments-order-success-page.php Outdated Show resolved Hide resolved
includes/class-wc-payments-order-success-page.php Outdated Show resolved Hide resolved
includes/class-wc-payments-utils.php Show resolved Hide resolved
includes/payment-methods/class-upe-payment-method.php Outdated Show resolved Hide resolved
tests/unit/test-class-wc-payments-utils.php Outdated Show resolved Hide resolved
Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

Sorry, I should have gotten to this earlier today as I only have one small suggestion this time! There's a duplicate conditional we should probably remove; the second item, I'll leave at your own discretion.

This is still testing as expected for me, so if you can have one last look tomorrow morning, hopefully we can merge this in shortly after. 🙏

includes/class-wc-payments-order-success-page.php Outdated Show resolved Hide resolved
Copy link
Contributor

@FangedParakeet FangedParakeet left a comment

Choose a reason for hiding this comment

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

LGTM. Thanks for responding to all of my minor suggestions on this PR! 🙌 🚢

@brettshumaker brettshumaker added this pull request to the merge queue Apr 30, 2024
Merged via the queue into develop with commit 0d5b2e1 Apr 30, 2024
23 checks passed
@brettshumaker brettshumaker deleted the 8249/add-bnpl-icons-to-thank-you-page branch April 30, 2024 17:41
github-merge-queue bot pushed a commit that referenced this pull request May 6, 2024
gpressutto5 added a commit that referenced this pull request May 6, 2024
gpressutto5 added a commit that referenced this pull request May 6, 2024
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.

Include more payment method icons on the order received page
3 participants