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 connect.js library and embedded onboarding integration #9251

Merged
merged 59 commits into from
Sep 6, 2024

Conversation

dmallory42
Copy link
Contributor

@dmallory42 dmallory42 commented Aug 13, 2024

Fixes #9222, #9224, #9223, https://github.com/Automattic/woocommerce-payments-server/issues/6189

Changes proposed in this Pull Request

  • Pull Stripe libraries needed to make embedded components work (@stripe/connect-js, @stripe/react-connect-js)
  • Add the embedded onboarding step to MOX
  • Add GET payments/onboarding/session and POST payments/onboarding/finalise to our client

Testing instructions

Before testing

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

Before each test (prerequisites)

  • Remove current account if you have one. You can do this by going to localhost:8087 and either marking the current account as deleted in the wcpay_accounts table, or updating the account_type value to be something other than wcpay (e.g. wcpay+testing).

Happy path

  • 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 is left

  • 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).

Regression: check test drive KYC still work

  • Start test drive account onboarding from the connect page
  • Wait a little bit
  • Check that the test-drive account was created successfully

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.

TODO

Implementation

  • pull publishable key from server @oaratovskyi - need to sync with architects
  • pass the onboarding data params to the server and then to Stripe component @oaratovskyi
  • add a loading state
  • implement localization of embedded component depending on the user locale
  • clean up cache after/during finalise API call similarly how it's done for non-embedded onboarding/redirect @dmallory42
    • implement redirect to the overview/connect page with an error in case of failure

Tests/other

  • ask design what to do with finish verification link (post a video showing the problem)
  • ask Stripe about the popup or figure out from docs if it can be changed
  • embedded component unit test
  • [not to forget] test the embedded component with WooPayments publishable key

  • 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 Aug 13, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9251 or branch name dev/include-connect-js 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: 495f4ae
  • Build time: 2024-09-06 16:33:57 UTC

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

Copy link
Contributor

github-actions bot commented Aug 13, 2024

Size Change: +3.97 kB (0%)

Total Size: 1.33 MB

Filename Size Change
release/woocommerce-payments/dist/index.css 39.2 kB +3 B (0%)
release/woocommerce-payments/dist/index.js 302 kB +3.97 kB (+1%)
ℹ️ 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.5 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.5 kB
release/woocommerce-payments/dist/blocks-checkout.js 65.8 kB
release/woocommerce-payments/dist/cart-block.js 16.3 kB
release/woocommerce-payments/dist/cart.js 5.73 kB
release/woocommerce-payments/dist/checkout-rtl.css 927 B
release/woocommerce-payments/dist/checkout.css 927 B
release/woocommerce-payments/dist/checkout.js 32.5 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 240 B
release/woocommerce-payments/dist/express-checkout.css 240 B
release/woocommerce-payments/dist/express-checkout.js 14.1 kB
release/woocommerce-payments/dist/frontend-tracks.js 858 B
release/woocommerce-payments/dist/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.08 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 60.5 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55.5 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.7 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 39.2 kB
release/woocommerce-payments/dist/payment-request-rtl.css 240 B
release/woocommerce-payments/dist/payment-request.css 240 B
release/woocommerce-payments/dist/payment-request.js 13.7 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 11.5 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 240 B
release/woocommerce-payments/dist/tokenized-payment-request.css 240 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.5 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 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.54 kB
release/woocommerce-payments/dist/woopay.css 4.51 kB
release/woocommerce-payments/dist/woopay.js 71.3 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

@dmallory42 dmallory42 changed the title WIP: Adding connect.js library for Stripe. Add connect.js library and embedded onboarding integration Aug 14, 2024
@oaratovskyi oaratovskyi linked an issue Aug 21, 2024 that may be closed by this pull request
@oaratovskyi
Copy link
Contributor

@dmallory42 I've added jest unit test for the embedded component 6120c1c and checked that the submit button works fine on mobile! it was the simulator issue, look how it works on the real phone
https://github.com/user-attachments/assets/aa003685-a3c9-4f0a-95ff-096a905cab95

@oaratovskyi oaratovskyi self-requested a review September 6, 2024 14:26
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.

Works well and looks good to me! Now I feel confident about it. The only thingy left is the loader on mobile, we can tweak it separately.

@dmallory42 dmallory42 added this pull request to the merge queue Sep 6, 2024
Merged via the queue into develop with commit 1b17a55 Sep 6, 2024
25 checks passed
@dmallory42 dmallory42 deleted the dev/include-connect-js branch September 6, 2024 17:06
@ismaeldcom ismaeldcom mentioned this pull request Nov 5, 2024
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants