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

Introduce a test drive mode into the onboarding process #9109

Merged
merged 74 commits into from
Aug 16, 2024

Conversation

mordeth
Copy link
Contributor

@mordeth mordeth commented Jul 17, 2024

Fixes #9140

Changes proposed in this Pull Request

This PR replaces the existing Sandbox mode functionality and introduces one-click onboarding for test-drive accounts. This new feature aims to replicate a fully onboarded production account, excluding the ability to process live payments.

This PR is paired with this server PR: https://github.com/Automattic/woocommerce-payments-server/pull/5896

Test-Drive onboarding with Jetpack connected

Connect.Payments.WooCommerce.Payments.WooCommerce.-.25.July.2024.mp4

Test-Drive onboarding with Jetpack disconnected

Connect.Payments.WooCommerce.Payments.WooCommerce.-.25.July.2024.1.mp4

Testing instructions

Note

To test the feature, use the add/5770-test-drive-mode branch on the server.

Case 1

  1. Ensure Jetpack is connected.
  2. Delete any existing onboarded accounts.
  3. Navigate to the Payments page.
  4. Scroll down and expand the “I’m setting up a store for someone else.” section.
  5. Click “Enable sandbox mode.”
  6. Verify that the loader displays “Creating your sandbox account.”
  7. Ensure the loader progress bar functions correctly.
  8. After the progress bar completes, confirm the page redirects to the Overview page.
  9. Check the Account details to ensure the following:
  • Account details - Completed.
  • Payments - Enabled.
  • Deposits - Automatic.

Case 2

  1. Ensure Jetpack is disconnected.
  2. Delete any existing onboarded accounts.
  3. Navigate to the Payments page.
  4. Scroll down and expand the “I’m setting up a store for someone else.” section.
  5. Click “Enable sandbox mode.”
  6. Ensure the page is redirected to the Jetpack connection screen.
  7. Finish the Jetpack connection and return to the site.
  8. Verify that the page is successfully redirected back and the loader that displays “Creating your sandbox account.” is started automatically.
  9. Ensure the loader progress bar functions correctly.
  10. After the progress bar completes, confirm the page redirects to the Overview page.
  11. Check the Account details to ensure the following:
  • Account details - Completed.
  • Payments - Enabled.
  • Deposits - Automatic.

Important

Ensure all the unit tests are passing!


  • 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 17, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9109 or branch name add/test-drive-mode 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: fbe7b82
  • Build time: 2024-08-16 16:17:28 UTC

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

Copy link
Contributor

github-actions bot commented Jul 17, 2024

Size Change: +1.87 kB (0%)

Total Size: 1.32 MB

Filename Size Change
release/woocommerce-payments/dist/index-rtl.css 39.2 kB +50 B (0%)
release/woocommerce-payments/dist/index.css 39.2 kB +53 B (0%)
release/woocommerce-payments/dist/index.js 298 kB +1.77 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.22 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.22 kB
release/woocommerce-payments/dist/blocks-checkout.js 65.3 kB
release/woocommerce-payments/dist/cart-block.js 16.3 kB
release/woocommerce-payments/dist/cart.js 5.72 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/checkout.js 32 kB
release/woocommerce-payments/dist/express-checkout-rtl.css 235 B
release/woocommerce-payments/dist/express-checkout.css 235 B
release/woocommerce-payments/dist/express-checkout.js 14.1 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 235 B
release/woocommerce-payments/dist/payment-request.css 235 B
release/woocommerce-payments/dist/payment-request.js 13.6 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.4 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 235 B
release/woocommerce-payments/dist/tokenized-payment-request.css 235 B
release/woocommerce-payments/dist/tokenized-payment-request.js 14.4 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-rtl.css 235 B
release/woocommerce-payments/dist/woopay-express-button.css 235 B
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.2 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

@mordeth mordeth self-assigned this Jul 26, 2024
@mordeth mordeth requested a review from a team July 26, 2024 08:00
@mordeth mordeth marked this pull request as ready for review July 26, 2024 08:00
@mordeth mordeth requested a review from orcungogus July 26, 2024 08:01
updateLoaderProgress( 100, 5 );

// If the account status is complete, redirect to the overview page.
// Otherwise, schedule another check after 5 seconds.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggestion: if it takes longer than 5/10 seconds, maybe we should update the message on the loader? Something like "This is taking a bit longer than expected"? Maybe one to check with design/product to see if that is something they want, though.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I discussed this with Orcun and Elizabeth, and they stated that the progress bar should clearly indicate the remaining time. @orcunomattic, do you think we should update the messages?

Choose a reason for hiding this comment

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

I don’t think we need to update the message but animating the progress bar would be sufficient.


// If the account status is complete, redirect to the overview page.
// Otherwise, schedule another check after 5 seconds.
if ( ( account as AccountData ).status === 'complete' ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

We should possibly look to have some sort of fallback logic in case the status doesn't reach complete. At the moment it looks like we'll loop around until it's complete, but I guess if there's a bug on Stripe's side and this doesn't happen, how should we handle it?

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’s a very valid point. I have never encountered a status other than complete, but it would be a good addition.

I have updated the check so that if the progress bar is above 95 percent, we will redirect to the Overview page regardless.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's a great idea. Thanks!

@vladolaru
Copy link
Contributor

Smoke-testing both client and server PR locally (round 3):

  • ✅ for Poland the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to PLN.
    u6STxb.png
    yF6P9x.png
  • ⛑️ for Croatia there was an error (fixed it). After that, the setup process was very quick (under 10 seconds) and resulted in a complete status. All the capabilities are active. The account currency is set to EUR.
    7m4lx2.png
    7129rr.png
  • ✅ for Slovakia the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    n10JZH.png
    rcLLgH.png
  • ⛑️ for Slovenia there was an error (fixed it). After that, the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    BcaeDO.png
    CZd1o5.png
  • ✅ for Portugal the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    9NqKwr.png
    DiXO2t.png
  • ✅ for Malta the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    3GwMEv.png
    KlInQG.png
  • ✅ for Lithuania the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    eytWpE.png
    MRgX2i.png
  • ✅ for Italy the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    RTQ5RJ.png
    rsL2U2.png
  • ⛑️ for Estonia there was an error (fixed it). After that, the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    ysOrHw.png
    Gl5rrg.png
  • ✅ for Ireland the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    O9GSLR.png
    Pkh8q8.png
  • ✅ for Greece the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    gqCllj.png
    sU9YLw.png
  • ⛑️ for France there was an error (fixed it). After that, the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    wQUUuX.png
    mWelRw.png
  • ✅ for Finland the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    habUHW.png
    bKZE9X.png
  • ✅ for Spain the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    G80okW.png
    rJNKDv.png
  • ✅ for Cyprus the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    gZSLum.png
    MXklHK.png
  • ✅ for Belgium the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    62uyHM.png
    cOwRfC.png
  • ✅ for Austria the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to EUR.
    rYuQoi.png
    GRxL20.png
  • ✅ for United Kingdom the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to GBP.
    GRxL20.png
    6x2adu.png
  • ✅ for United States the setup process was not so quick (under 20-30 seconds - tested twice, it is consistent) and resulted in complete status. All the capabilities are active. The account currency is set to USD.
    LjubtX.png
    hOAsCZ.png
  • ✅ for Canada the setup process was not so quick (around 20 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to CAD.
    4lxHmv.png
    xNpSPA.png

@vladolaru
Copy link
Contributor

Smoke-testing both client and server PR locally (round 4):

  • ✅ for Norway the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to NOK.
    AjZElQ.png
    pfMMQv.png
  • ✅ for Switzerland the setup process was very quick (under 10 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to CHF.
    BcaF3S.png
    kbS8gZ.png
  • ⛑️ for Hong Kong there was an error (fixed it). After that, the setup process was not so quick (around 20-30 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to HKD.
    EE6xFL.png
    xPHbqj.png
  • ✅ for New Zeeland the setup process was not so quick (around 20-30 seconds) and resulted in complete status. All the capabilities are active. The account currency is set to NZD.
    EPVG0k.png
    6Soups.png

Copy link
Contributor

@vladolaru vladolaru left a comment

Choose a reason for hiding this comment

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

I have tested (and improved) both the server PR and this PR. I am confident we can merge it. 🚢

@mordeth mordeth added this pull request to the merge queue Aug 16, 2024
Merged via the queue into develop with commit 8bb1124 Aug 16, 2024
23 checks passed
@mordeth mordeth deleted the add/test-drive-mode branch August 16, 2024 16:38
@asumaran
Copy link
Contributor

I'm getting an error when running npm run start it seems to have been introduced in this PR

ERROR in ./client/connect-account-page/index.tsx 17:23-48
[tsl] ERROR in /Users/asumaran/Developer/woocommerce-payments/client/connect-account-page/index.tsx(17,24)
      TS2307: Cannot find module '@woocommerce/onboarding' or its corresponding type declarations.
ts-loader-default_e3b0c44298fc1c14
 @ ./client/index.js 17:0-54 42:15-33

@asumaran
Copy link
Contributor

npm install didn't work initally. Removing the entire node_modules then npm install seems to have worked.

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.

Integrate WooPayments test drive mode into the onboarding flow
8 participants