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

Extract the Account Session logic from Embedded components onboarding into a reusable utility hook #10273

Open
wants to merge 14 commits into
base: develop
Choose a base branch
from

Conversation

mordeth
Copy link
Contributor

@mordeth mordeth commented Jan 29, 2025

Fixes #10256

Changes proposed in this Pull Request

To reduce code duplication and improve maintainability, this PR extracts the shared JavaScript logic for retrieving the account session from the embedded components onboarding flow into a reusable utility hook. This refactoring ensures consistency across components, making the logic easier to manage, reuse, and update in the future.

Testing instructions

Before testing

  • Run npm install to install the Stripe libraries.
  • Run npm run watch

Before each test (prerequisites)

  • Reset or remove current account if you have one.

Non-progressive onboarding

  • Start new onboarding from the connect page
  • After specifying Planned revenue more than 100 M and time to go live more than 6m you should see an embedded onboarding component. Check styling of the component is right.
  • Provide the necessary data in the component and submit the KYC.
  • You should get redirected to the overview page with connection success (to see the congrats component)

Progressive onboarding

  • Start new onboarding from the connect page
  • Ensure you are using United States as the country
  • After specifying Planned revenue less than 250k and time to go live less than 1 month you should see an embedded onboarding component for progressive onboarding.
  • Provide the necessary data in the component and submit the KYC.
  • You should get redirected to the overview page with connection success and start selling / add deposits popup

Onboarding isresumed

  • Start new onboarding from the connect page
  • After specifying Planned revenue and time to go live you should see an embedded onboarding component.
  • Provide the necessary data in the component but don't submit the KYC, close the current page using X in top right corner.
  • You should get redirected to the connect page with the ability to continue onboarding
  • When returning to the onboarding via the connect page, you should be taken to the MOX and placed back into the embedded component (ideally at the step you left at).

Localisation

  • Start new onboarding from the connect page
  • Pick a site locale different than the en_US (e.g. de_DE)
  • After specifying Planned revenue and time to go live you should see an embedded onboarding component.
  • Check that the component is localised to Deutsch.
  • Complete the KYC and check the overview page for successful onboarding

Tracking

  • Make sure you have the Tracks Vigilante (p7H4VZ-3cB-p2) browser extension installed and set up. Open up the Tracks Vigilante browser extension and put it in standalone mode (click on the "Standalone popup" button).
  • Run through the embedded onboarding. You should see the following events:
  • wcadmin_wcpay_onboarding_flow_started - upon redirect to the MOX
  • wcadmin_wcpay_onboarding_flow_step_completed - after completion of a step in the MOX
  • wcadmin_wcpay_onboarding_flow_redirected - after loading the embedded component (note that the name of this event is slightly inaccurate to maintain backwards compatibility)
  • wcadmin_wcpay_stripe_connected - after completion of the embedded onboarding.

  • 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

@mordeth mordeth self-assigned this Jan 29, 2025
@botwoo
Copy link
Collaborator

botwoo commented Jan 29, 2025

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 10273 or branch name update/10256-extract-account-settings-logic 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: 3599e66
  • Build time: 2025-02-03 22:24:31 UTC

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

Copy link
Contributor

github-actions bot commented Jan 29, 2025

Size Change: -8.25 kB (-1%)

Total Size: 1.36 MB

Filename Size Change
release/woocommerce-payments/assets/css/success.css 189 B +7 B (+4%)
release/woocommerce-payments/assets/css/success.rtl.css 190 B +6 B (+3%)
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.56 kB -85 B (-3%)
release/woocommerce-payments/dist/blocks-checkout.css 2.56 kB -84 B (-3%)
release/woocommerce-payments/dist/blocks-checkout.js 53.9 kB -1.8 kB (-3%)
release/woocommerce-payments/dist/express-checkout-rtl.css 236 B +7 B (+3%)
release/woocommerce-payments/dist/express-checkout.css 236 B +7 B (+3%)
release/woocommerce-payments/dist/index-rtl.css 39.8 kB -92 B (0%)
release/woocommerce-payments/dist/index.css 39.8 kB -102 B (0%)
release/woocommerce-payments/dist/index.js 300 kB -1.75 kB (-1%)
release/woocommerce-payments/dist/multi-currency-rtl.css 4.29 kB -182 B (-4%)
release/woocommerce-payments/dist/multi-currency.css 4.29 kB -183 B (-4%)
release/woocommerce-payments/dist/multi-currency.js 57.8 kB +48 B (0%)
release/woocommerce-payments/dist/order-rtl.css 740 B +10 B (+1%)
release/woocommerce-payments/dist/order.css 740 B +10 B (+1%)
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.34 kB +9 B (+1%)
release/woocommerce-payments/dist/payment-gateways.css 1.34 kB +9 B (+1%)
release/woocommerce-payments/dist/payment-gateways.js 38.9 kB -37 B (0%)
release/woocommerce-payments/dist/plugins-page.js 20.1 kB -1 B (0%)
release/woocommerce-payments/dist/settings-rtl.css 11.5 kB -142 B (-1%)
release/woocommerce-payments/dist/settings.css 11.4 kB -131 B (-1%)
release/woocommerce-payments/dist/settings.js 222 kB -2.09 kB (-1%)
release/woocommerce-payments/dist/tokenized-express-checkout-rtl.css 236 B +7 B (+3%)
release/woocommerce-payments/dist/tokenized-express-checkout.css 236 B +7 B (+3%)
release/woocommerce-payments/dist/woopay-express-button.js 23.3 kB -1.7 kB (-7%)
ℹ️ 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/dist/cart-block.js 17.2 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 1.13 kB
release/woocommerce-payments/dist/checkout.css 1.13 kB
release/woocommerce-payments/dist/checkout.js 33.6 kB
release/woocommerce-payments/dist/express-checkout.js 15.7 kB
release/woocommerce-payments/dist/frontend-tracks.js 854 B
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 61.1 kB
release/woocommerce-payments/dist/order.js 42.5 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
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.5 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-express-checkout.js 16.6 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.13 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.31 kB
release/woocommerce-payments/dist/woopay.css 4.28 kB
release/woocommerce-payments/dist/woopay.js 71 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 772 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.47 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.47 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.css 10 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.js 28.4 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-connection.rtl.css 10 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 424 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 585 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 632 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

@mordeth mordeth marked this pull request as ready for review January 29, 2025 21:27
Copy link
Contributor

@oaratovskyi oaratovskyi left a comment

Choose a reason for hiding this comment

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

@mordeth for some readon those requests are in the endless loop. I used the same code as you for the KYC and it does not work as expected - see the video

const stripeConnectInstance = useAccountSession( {
		isOnboarding: false,
		data: [],
		continueKyc: false,
		setLoadErrorMessage: () => {},
		appearance,
	} );
gNFzB9.mp4

in the embedded KYC it works better - only two duplicated requests. Could you please take a look?

cm5S50.png

client/onboarding/steps/embedded-kyc.tsx Outdated Show resolved Hide resolved
client/onboarding/steps/embedded-kyc.tsx Outdated Show resolved Hide resolved
client/utils/embedded-components/account-session.ts Outdated Show resolved Hide resolved
client/utils/embedded-components/account-session.ts Outdated Show resolved Hide resolved
@mordeth
Copy link
Contributor Author

mordeth commented Jan 30, 2025

@mordeth for some readon those requests are in the endless loop. I used the same code as you for the KYC and it does not work as expected - see the video

const stripeConnectInstance = useAccountSession( {
isOnboarding: false,
data: [],
continueKyc: false,
setLoadErrorMessage: () => {},
appearance,
} );

@oaratovskyi I was able to reproduce the loop using the provided code. However, replacing setLoadErrorMessage with an actual method instead of an empty function seems to resolve the issue. Could you confirm this?

@oaratovskyi oaratovskyi self-requested a review January 30, 2025 18:25
@oaratovskyi
Copy link
Contributor

Yes, works for me, thanks!

Copy link
Contributor

@oaratovskyi oaratovskyi left a comment

Choose a reason for hiding this comment

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

Thanks @mordeth ! Pre-approving

Copy link
Contributor

@dmallory42 dmallory42 left a comment

Choose a reason for hiding this comment

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

Looks good to me! I tested everything expect the Progressive flow (I wasn't able to get a slot) - if possible it would be good to test that locally. But since we have a few globalstep cycles prior to the 9.0 release, I think it is okay to go ahead with this, we just need to ensure the critical flows are tested ahead of that release.

A small note that I didn't see the Congratulations component on onboarding completion, but I think it was because I onboarded a test account, so instead I saw the test account notification component, I think it is expected.

Copy link
Contributor

Choose a reason for hiding this comment

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

Nitpick - can we use Kyc instead of KYC to stay consistent with other usages on the client (example)?

e.g. KycAccountSession instead of KYCAccountSession.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Great spot! I’ve renamed all occurrences accordingly.

*
* @return WP_Error|WP_REST_Response
*/
public function get_embedded_session( WP_REST_Request $request ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
public function get_embedded_session( WP_REST_Request $request ) {
public function create_embedded_account_session( WP_REST_Request $request ) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That change makes sense as we are sending a POST request. Updated.

fetchClientSecret,
locale,
] );
const stripeConnectInstance = useKYCAccountSession( {
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
const stripeConnectInstance = useKYCAccountSession( {
const stripeConnectInstance = useKycAccountSession( {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Updated!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Extract the shared JS logic of getting the account session and CSS styling to a single component
4 participants