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

Pass Blocks checkout appearance on init WooPay #9075

Merged
merged 10 commits into from
Jul 19, 2024

Conversation

hsingyuc
Copy link
Contributor

@hsingyuc hsingyuc commented Jul 9, 2024

Changes proposed in this Pull Request

This PR is part of Spike – Global Themes Support proof of concept.

We reuse getAppearance to select styles by elements from the blocks checkout page and send them to WooPay on initialization.

EPIC https://github.com/Automattic/woopay/issues/2781
SPIKE here
PT here

Screen.Recording.2024-07-17.at.7.22.50.AM.mov

Testing instructions

  • Test with WooPay PR
  • Go to WooPay admin -> WCPay Dev and enable WooPay global theme support feature flag
  • Update the merchant styles:
  1. Install and activate a theme that supports the site editor from admin -> appearance -> theme
  2. Update typography by visiting Theme -> Editor -> Styles
    OR
  3. Update merchant styles ( ex. background color, text color, border styles, etc ) without using theme that supports the site editor from wp-admin appearance

Test 1:

  1. Test this PR with the latest WooPayments version that include getAppearance
  2. As an existing WooPay shopper, go to the blocks checkout page and initialize WooPay with the email field redirect
  3. Should see WooPay support background color, color, and font family
  4. Test Return to cart -> Blocks checkout page -> WooPay button
  5. Should see WooPay support background color, color, and font family
  6. Test Checkout as guest and initialize WooPay as a new WooPay shopper with the email field redirect
  7. Should see WooPay support background color, color, and font family
  8. Test Return to cart -> Blocks checkout page
  9. As a new WooPay shopper, initialize WooPay with the WooPay button
  10. Should see WooPay support background color, color, and font family

Test 2:

  1. Test an older version of WooPayments that doesn't have getAppearance for regression
  2. As an existing WooPay shopper, go to the blocks checkout page and initialize WooPay with the email field redirect
  3. Should see WooPay support background color, color, and font family
  4. Test Return to cart -> Blocks checkout page -> WooPay button
  5. Should see WooPay support background color, color, and font family
  6. Test Checkout as guest and initialize WooPay as a new WooPay shopper with the email field redirect
  7. Should see WooPay support background color, color, and font family
  8. Test Return to cart -> Blocks checkout page
  9. As a new WooPay shopper, initialize WooPay with the WooPay button
  10. Should see WooPay support background color, color, and font family

  • 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 Jul 9, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9075 or branch name add/pass-blocks-checkout-appearance-on-init-woopay 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: a65681b
  • Build time: 2024-07-18 17:52:37 UTC

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

Copy link
Contributor

github-actions bot commented Jul 9, 2024

Size Change: +37.5 kB (+3%)

Total Size: 1.32 MB

Filename Size Change
release/woocommerce-payments/dist/blocks-checkout.js 60.6 kB -289 B (0%)
release/woocommerce-payments/dist/cart-block.js 15.4 kB +13 B (0%)
release/woocommerce-payments/dist/checkout.js 31.7 kB +17 B (0%)
release/woocommerce-payments/dist/express-checkout.js 13.9 kB +7.53 kB (+118%) 🆘
release/woocommerce-payments/dist/payment-request.js 13.4 kB +7.55 kB (+128%) 🆘
release/woocommerce-payments/dist/product-details.js 11.2 kB -7 B (0%)
release/woocommerce-payments/dist/settings.js 223 kB +7.61 kB (+4%)
release/woocommerce-payments/dist/tokenized-payment-request.js 14.2 kB +7.55 kB (+114%) 🆘
release/woocommerce-payments/dist/woopay-express-button.js 23.2 kB +7.54 kB (+48%) 🚨
ℹ️ 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 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.08 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.08 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 528 B
release/woocommerce-payments/dist/bnpl-announcement.css 529 B
release/woocommerce-payments/dist/bnpl-announcement.js 20.1 kB
release/woocommerce-payments/dist/cart.js 4.87 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/express-checkout-rtl.css 235 B
release/woocommerce-payments/dist/express-checkout.css 235 B
release/woocommerce-payments/dist/index-rtl.css 41.1 kB
release/woocommerce-payments/dist/index.css 41.1 kB
release/woocommerce-payments/dist/index.js 295 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.9 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55 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.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 38.9 kB
release/woocommerce-payments/dist/payment-request-rtl.css 235 B
release/woocommerce-payments/dist/payment-request.css 235 B
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 19.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 397 B
release/woocommerce-payments/dist/product-details.css 398 B
release/woocommerce-payments/dist/settings-rtl.css 11.2 kB
release/woocommerce-payments/dist/settings.css 11.1 kB
release/woocommerce-payments/dist/subscription-edit-page.js 668 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 19.5 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 694 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.6 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 235 B
release/woocommerce-payments/dist/tokenized-payment-request.css 235 B
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 5.25 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css 235 B
release/woocommerce-payments/dist/woopay-express-button.css 235 B
release/woocommerce-payments/dist/woopay-rtl.css 4.26 kB
release/woocommerce-payments/dist/woopay.css 4.23 kB
release/woocommerce-payments/dist/woopay.js 69.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/src/js/i18n-loader.js 1.02 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 20 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 20 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 392 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 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
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

@hsingyuc hsingyuc marked this pull request as ready for review July 10, 2024 17:01
@hsingyuc hsingyuc requested review from a team and alefesouza and removed request for a team July 11, 2024 21:40
@hsingyuc hsingyuc force-pushed the add/pass-blocks-checkout-appearance-on-init-woopay branch from c93bf51 to acd2af3 Compare July 11, 2024 21:51
@hsingyuc hsingyuc force-pushed the add/pass-blocks-checkout-appearance-on-init-woopay branch from 8ef4604 to 3fe78b8 Compare July 12, 2024 14:47
@alefesouza
Copy link
Member

alefesouza commented Jul 12, 2024

@hsingyuc the appearance data is not being sent when clicking the WooPay button on blocks checkout page, only works on the email field redirect, is that expected?

@hsingyuc
Copy link
Contributor Author

@hsingyuc the appearance data is not being sent

Do you mean you log appearance here and nothing logged?

when clicking the WooPay button on blocks checkout page, only works on the email field redirect, is that expected?

@alefesouza When click the WooPay button on the Blocks checkout page, it should work as below:

Screen.Recording.2024-07-15.at.3.43.33.PM.mov

Copy link
Member

@alefesouza alefesouza left a comment

Choose a reason for hiding this comment

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

@hsingyuc on your video for some reason the express checkout button is using the fallback instead of redirect to WooPay without opening the popup, could you take a look? On the following video the styles are being applied when using the email redirect but not when clicking the button without the fallback:

Screen.Recording.2024-07-15.at.9.50.32.PM.mov

@hsingyuc hsingyuc force-pushed the add/pass-blocks-checkout-appearance-on-init-woopay branch from 2618344 to 464ade4 Compare July 16, 2024 21:55
@hsingyuc
Copy link
Contributor Author

@alefesouza I'm having hard time to hit first-party auth but I pass blocks checkout appearance on first-party auth, can you test it for me? Thanks!

@hsingyuc hsingyuc force-pushed the add/pass-blocks-checkout-appearance-on-init-woopay branch from 32bd0d3 to bf2749f Compare July 17, 2024 00:03
@hsingyuc
Copy link
Contributor Author

@alefesouza I got first-party auth working, added a fix when on NUX and updated the test instructions. Thank you!

Copy link
Member

@alefesouza alefesouza 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 @hsingyuc!

@hsingyuc hsingyuc added this pull request to the merge queue Jul 19, 2024
Merged via the queue into develop with commit ecb9976 Jul 19, 2024
23 checks passed
@hsingyuc hsingyuc deleted the add/pass-blocks-checkout-appearance-on-init-woopay branch July 19, 2024 02:23
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.

3 participants