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

Fix onboarding flows edge cases around onboarding mode #9346

Merged

Conversation

vladolaru
Copy link
Contributor

@vladolaru vladolaru commented Aug 27, 2024

Fixes #9342

Changes proposed in this Pull Request

We've investigated some weird edge cases (p1724745169469109-slack-C03KTTK2YMA) and while we haven't been able to pinpoint a single source of trouble, we've come to a set of highly confident suspicions:

  • on JN sites with Memcached active (the default when creating them from the web UI), we could end up with the test mode onboarding option cached as active even if it was not longer in the WP DB: we fixed this by using yes and no values rather than boolean (WP is wonky about saving booleans in options (https://core.trac.wordpress.org/ticket/40007)
  • when switching from test to live accounts, there were potential code paths where the account cache would not be cleared: we've implemented a more opportunistic approach to clearing the account cache (after establishing a Jetpack connection and after we attempt a Stripe account init). This will provide some escape hatches via connect links from the Connect page in case something goes wrong with the account data.
  • there was a possibility of double-clicking the CTA buttons for switching from test to live or resetting the account: we've added disabled and busy states to these buttons to prevent that.

Testing instructions

Testing without Dev Tools on JurassicNinja

  1. Spin up a JN site with WooCommerce but without Dev Tools (direct JN create link).
  2. Install WooPayments from the actions built ZIP
  3. On your JN site, go to the Payments page.
  4. Click Enable sandbox mode at the bottom, in the "I'm setting up a store for someone else" section.
  5. Connect your site to WordPress.com and you will be redirected to the test-drive account loading screen.
  6. Wait for the test account to finish creating.
  7. You'll be redirected to the Payments Overview page.
  8. Go to Payments > Settings.
  9. Add a real phone number to get around Don't check for valid support phone in dev mode #6782.
  10. Save Changes.
  11. Still on Payments > Settings, check that test mode can't be disabled:
    lSvSJn.png
  12. Use the "Set up payments" prompt on the Payments > Settings page to switch to live mode. Go through the onboarding again, ensure that it is not in test/sandbox mode (there should be no test label in the Stripe KYC).
  13. After the onboarding, you should be taken to the Overview page with a fully onboarded account.

Testing with Dev Tools locally, in dev mode

  1. Checkout the PR branch on your local environment

  2. Build the assets by running npm run build:client

  3. Make sure the "Enable the WCPay dev mode" checkbox is checked on the WCPay Dev page.

  4. Go to the Payments page and you should see a notice at the top saying "Sandbox mode is enabled, only test accounts will be created. If you want to process live transactions, please disable it."

  5. Onboard a test-drive account from the Payments page, "I'm setting up a store for someone else" section.

  6. Then use "Reset account" from the Account tools section on the Payments > Overview page

  7. Onboard another test-drive account from the Payments page, "I'm setting up a store for someone else" section.

  8. Go to Payments > Settings, click on "Set up payments" button, click on the "Continue setup" button in the modal, and you should be redirected to the MOX wizard.

  9. Finish the MOX and you should be taken to the Stripe KYC for our WCPay Dev Express platform account
    5V7j3O.png

  10. Finish the Stripe KYC and you should have a working account and see the sandbox notice at the top of the Payments > Overview page.
    bBJGiF.png

  11. Click on the "set up a live WooPayments account" link in the notice. A modal should open. Click on "Continue setup" and you should be redirected to the MOX.

  12. Close the MOX and you should be taken to the Connect page with a sandbox mode notice at the top:
    L6b030.png

Testing with Dev Tools locally, without dev mode

  1. Checkout the PR branch on your local environment
  2. Build the assets by running npm run build:client
  3. Make sure the "Enable the WCPay dev mode" checkbox is NOT checked on the WCPay Dev Tools page.
  4. Go to the Payments page and you should NOT see a sandbox notice at the top
    ePUevR.png
  5. Onboard a test-drive account from the Payments page, "I'm setting up a store for someone else" section.
  6. Then use "Reset account" from the Account tools section on the Payments > Overview page
  7. Onboard another test-drive account from the Payments page, "I'm setting up a store for someone else" section.
  8. Go to Payments > Settings, click on "Set up payments" button, click on the "Continue setup" button in the modal, and you should be redirected to the MOX wizard.
  9. Finish the MOX and you should be taken to the Stripe KYC for our WooPayments production platform account (still in test mode because of the Stripe API keys you are using locally). As far as WooPayments is concerned, this is a live account.
    s7vxlR.png
  10. Finish the Stripe KYC and you should have a working account and NOT see the sandbox notice at the top of the Payments > Overview page.
    zF5qCd.png
  11. Go to Payments > Settings and you should be able to enable test mode
    P8ShXv.png
    Please note that retrieving deposits and transactions will not work with test mode active because of the "double test mode"; that is expected, at least until we decide to make some changes to our platform to cover this case - but since it is only a testing scenario for devs, we are OK with it.

  • 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

@vladolaru vladolaru self-assigned this Aug 27, 2024
@vladolaru vladolaru changed the base branch from develop to release/8.1.1 August 27, 2024 14:48
@botwoo
Copy link
Collaborator

botwoo commented Aug 27, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9346 or branch name fix/onboarding-flows-edge-cases-around-onboarding-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: 54c8c3a
  • Build time: 2024-08-29 06:41:14 UTC

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

Copy link
Contributor

github-actions bot commented Aug 27, 2024

Size Change: +59 B (0%)

Total Size: 1.32 MB

Filename Size Change
release/woocommerce-payments/dist/index.js 298 kB +38 B (0%)
release/woocommerce-payments/dist/settings.js 224 kB +21 B (0%)
ℹ️ 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.27 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.27 kB
release/woocommerce-payments/dist/blocks-checkout.js 65.5 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 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/index-rtl.css 39.2 kB
release/woocommerce-payments/dist/index.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.3 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.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/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.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.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

@vladolaru vladolaru changed the title Fix/onboarding flows edge cases around onboarding mode Fix onboarding flows edge cases around onboarding mode Aug 28, 2024
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.

Tested and can confirm that the scenarios work like a charm and the edge cases seem to have been addressed. Great job!

Copy link
Contributor

@mordeth mordeth left a comment

Choose a reason for hiding this comment

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

Thanks for working on the issue, Vlad!

I’ve tested all the scenarios mentioned and can no longer replicate the issue.

Just a small suggestion regarding the testing instructions for the first case: it might be better to use the actions built ZIP rather than a locally built one, since we never encountered the issue with ZIPs built locally.

@mordeth mordeth merged commit 0cb272a into release/8.1.1 Aug 29, 2024
22 checks passed
@mordeth mordeth deleted the fix/onboarding-flows-edge-cases-around-onboarding-mode branch August 29, 2024 06:46
@vladolaru
Copy link
Contributor Author

Thank you @mordeth! I've updated the instructions.

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.

5 participants