Updates to Tracks onboarding events props - Take 2

[vladolaru]

Follow up to #9015

Changes proposed in this Pull Request

• We add the URL-based source prop to both Connect page view and Connect CTA click
• We ensure that the PHP-based redirects to Connect page keep the GET from param of the request
• We ensure that connect URLs keep the GET from param of the request
• Updates to source determination to account more for the from param value

Testing instructions

• Checkout the PR branch on your local client install and build it by running npm run build:client
• Remove/reset any onboarded account you currently have so the Connect page is accessible
• Make sure you have the Tracks Vigilante (p7H4VZ-3cB-p2) Chrome extension installed and opened so you can monitor Tracks events
• Deactivate the WooPayments plugin
• Go to WooCommerce > Home and click on the "Get paid" task item.
• You should be redirected to the Connect page with &from=WCADMIN_PAYMENT_TASK in the URL
• In Tracks Vigilante, you should see a wcadmin_page_view event with the source: wcadmin-payment-task prop
• If you already have a working Jetpack connection:
  • install the Jetpack Debug Helper plugin (download the trunk zip files and install+activate on your local client installation)
  • activate the "Broken token Utilities" module and go to its settings page
  • Store your current connection data by clicking on "Store these options"
  • Break your connection completely by clicking successively on: "Clear blog token", "Clear user token", "Clear the Primary user", "Clear the blog ID"
• Go to the Connect page, make sure you have &from=WCADMIN_PAYMENT_TASK in your URL, and that you see a "Connect your store" CTA button.
• Click on "Connect your store" and you should be redirected back to the Connect page but with an error about not being able to establish a connection on localhost
• The page URL should still include &from=WCADMIN_PAYMENT_TASK
• Fire up your Jurassic Tube by running npm run tube:start and access your local WP admin through it.
• Go to WooCommerce > Home, click on the "Get paid" (or "Get paid with WooCommerce") task item and your should see your Connect page with &from=WCADMIN_PAYMENT_TASK in the URL
• Connect your store to your WPCOM account and you should end up in the MOX flow with &source=wcadmin-payment-task in the URL
• Complete onboarding and make sure you can successfully onboard an account.
• Run npm run tube:stop to stop the tunneling
• Go to Jetpack Debug > Broken Token and click on "Restore from stored options" to get your Jetpack connection back as it was.

---

• 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

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 9036 or branch name update/tracks-onboarding-events-props-take2 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: 298523d
• Build time: 2024-07-02 09:20:59 UTC

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

[github-actions]

Size Change: +107 B (0%)

Total Size: 1.26 MB

Filename	Size	Change
release/woocommerce-payments/dist/index.js	295 kB	+107 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	172 B
release/woocommerce-payments/assets/css/success.rtl.css	172 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css	2.07 kB
release/woocommerce-payments/dist/blocks-checkout.css	2.07 kB
release/woocommerce-payments/dist/blocks-checkout.js	52.2 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css	530 B
release/woocommerce-payments/dist/bnpl-announcement.css	531 B
release/woocommerce-payments/dist/bnpl-announcement.js	20 kB
release/woocommerce-payments/dist/cart-block.js	15.3 kB
release/woocommerce-payments/dist/cart.js	4.57 kB
release/woocommerce-payments/dist/checkout-rtl.css	599 B
release/woocommerce-payments/dist/checkout.css	599 B
release/woocommerce-payments/dist/checkout.js	31.5 kB
release/woocommerce-payments/dist/express-checkout-rtl.css	155 B
release/woocommerce-payments/dist/express-checkout.css	155 B
release/woocommerce-payments/dist/express-checkout.js	5.51 kB
release/woocommerce-payments/dist/index-rtl.css	41.3 kB
release/woocommerce-payments/dist/index.css	41.3 kB
release/woocommerce-payments/dist/multi-currency-analytics.js	1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css	3.42 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js	59.5 kB
release/woocommerce-payments/dist/multi-currency.css	3.42 kB
release/woocommerce-payments/dist/multi-currency.js	54.7 kB
release/woocommerce-payments/dist/order-rtl.css	733 B
release/woocommerce-payments/dist/order.css	735 B
release/woocommerce-payments/dist/order.js	41.8 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css	1.36 kB
release/woocommerce-payments/dist/payment-gateways.css	1.36 kB
release/woocommerce-payments/dist/payment-gateways.js	38.6 kB
release/woocommerce-payments/dist/payment-request-rtl.css	155 B
release/woocommerce-payments/dist/payment-request.css	155 B
release/woocommerce-payments/dist/payment-request.js	5.92 kB
release/woocommerce-payments/dist/plugins-page-rtl.css	388 B
release/woocommerce-payments/dist/plugins-page.css	388 B
release/woocommerce-payments/dist/plugins-page.js	19.3 kB
release/woocommerce-payments/dist/product-details-rtl.css	398 B
release/woocommerce-payments/dist/product-details.css	402 B
release/woocommerce-payments/dist/product-details.js	11.2 kB
release/woocommerce-payments/dist/settings-rtl.css	11.1 kB
release/woocommerce-payments/dist/settings.css	11 kB
release/woocommerce-payments/dist/settings.js	201 kB
release/woocommerce-payments/dist/subscription-edit-page.js	669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css	527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css	527 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js	19.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js	693 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.5 kB
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css	155 B
release/woocommerce-payments/dist/tokenized-payment-request.css	155 B
release/woocommerce-payments/dist/tokenized-payment-request.js	6.69 kB
release/woocommerce-payments/dist/tos-rtl.css	235 B
release/woocommerce-payments/dist/tos.css	236 B
release/woocommerce-payments/dist/tos.js	21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js	4.94 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css	155 B
release/woocommerce-payments/dist/woopay-express-button.css	155 B
release/woocommerce-payments/dist/woopay-express-button.js	15.2 kB
release/woocommerce-payments/dist/woopay-rtl.css	4.25 kB
release/woocommerce-payments/dist/woopay.css	4.22 kB
release/woocommerce-payments/dist/woopay.js	69.4 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css	622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js	815 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js	2.44 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js	1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css	196 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	196 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css	627 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	628 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js	390 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js	522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js	581 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css	214 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js	523 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css	722 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js	408 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js	517 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js	160 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.5 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.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css	291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css	403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css	3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css	299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css	742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css	572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css	411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js	544 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.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js	3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js	544 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.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js	11.6 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	502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js	355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js	429 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	781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js	1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js	1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css	392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js	3.05 kB

_{compressed-size-action}

[oaratovskyi]

Regarding testing instructions:

• In my case, both times on the homepage I clicked Get paid with WooPayments.
• I think we should also add npm run tube:stop after testing and restore Jetpack connection from stored options.

[oaratovskyi]

Regarding the changes, they work well 👏
I tested everything according to the instructions 🎉
The code looks almost good, I left a feedback in the comments, I'll be happy to approve once they're addressed!

[vladolaru]

Thank you for reviewing this @oaratovskyi !

I think we should also add npm run tube:stop after testing and restore Jetpack connection from stored options.

I've updated the testing instructions.

The code looks almost good, I left a feedback in the comments, I'll be happy to approve once they're addressed!

I've added PHPUnit tests and fixed the type hinting.

[oaratovskyi]

Thanks for addressing the feedback!