Resolve collision between WooPayments header and Woo Express survey banner #8400

mordeth · 2024-03-15T16:03:21Z

Fixes #8093

Changes proposed in this Pull Request

This PR removes the JITM notices on onboarding page to prevent any distractions during onboarding.

Testing instructions

Start Woo Express trial.
Make sure that you don't finish Woo Express survey. It should be on the top of the page.
Once the initial setup is finished, click on the action item to start with setting up WooPayments.
Upload WooPayment plugin with current change.
Use the following [gist].(https://gist.githubusercontent.com/ilyasfoo/a2901efacd62f69be737778ba7721e69/raw/5e18c6fc82f52ecf4c552cec5bc3b092540338dd/jQueryJITM) to force show the survey banner.
Verify on the wizard page the survey banner is hidden.

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 · 2024-03-15T16:06:22Z

Test the build

Option 1. Jetpack Beta

Install and activate Jetpack Beta.
Use this build by searching for PR number 8400 or branch name fix/8093-onboarding-collides-with-jitm-banners 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: 5df331f
Build time: 2024-03-28 12:03:12 UTC

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

github-actions · 2024-03-15T16:09:17Z

Size Change: +29 B (0%)

Total Size: 1.2 MB

Filename	Size	Change
`release/woocommerce-payments/dist/index-rtl.css`	40.1 kB	+14 B (0%)
`release/woocommerce-payments/dist/index.css`	40 kB	+15 B (0%)

ℹ️ View Unchanged

Filename	Size
`release/woocommerce-payments/assets/css/admin.css`	1.06 kB
`release/woocommerce-payments/assets/css/admin.rtl.css`	1.06 kB
`release/woocommerce-payments/assets/css/success.css`	158 B
`release/woocommerce-payments/assets/css/success.rtl.css`	158 B
`release/woocommerce-payments/dist/blocks-checkout-rtl.css`	1.92 kB
`release/woocommerce-payments/dist/blocks-checkout.css`	1.91 kB
`release/woocommerce-payments/dist/blocks-checkout.js`	54.1 kB
`release/woocommerce-payments/dist/cart.js`	4.45 kB
`release/woocommerce-payments/dist/checkout-rtl.css`	405 B
`release/woocommerce-payments/dist/checkout.css`	406 B
`release/woocommerce-payments/dist/checkout.js`	37 kB
`release/woocommerce-payments/dist/index.js`	290 kB
`release/woocommerce-payments/dist/multi-currency-analytics.js`	1.05 kB
`release/woocommerce-payments/dist/multi-currency-rtl.css`	3.28 kB
`release/woocommerce-payments/dist/multi-currency-switcher-block.js`	59.4 kB
`release/woocommerce-payments/dist/multi-currency.css`	3.29 kB
`release/woocommerce-payments/dist/multi-currency.js`	54.5 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.7 kB
`release/woocommerce-payments/dist/payment-gateways-rtl.css`	1.21 kB
`release/woocommerce-payments/dist/payment-gateways.css`	1.21 kB
`release/woocommerce-payments/dist/payment-gateways.js`	38.5 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`	12.4 kB
`release/woocommerce-payments/dist/product-details-rtl.css`	155 B
`release/woocommerce-payments/dist/product-details.css`	155 B
`release/woocommerce-payments/dist/product-details.js`	16.6 kB
`release/woocommerce-payments/dist/settings-rtl.css`	11 kB
`release/woocommerce-payments/dist/settings.css`	10.8 kB
`release/woocommerce-payments/dist/settings.js`	199 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`	710 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/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.58 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`	21.1 kB
`release/woocommerce-payments/dist/woopay-rtl.css`	4.44 kB
`release/woocommerce-payments/dist/woopay.css`	4.41 kB
`release/woocommerce-payments/dist/woopay.js`	71 kB
`release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css`	622 B
`release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js`	812 B
`release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js`	2.43 kB
`release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js`	1.01 kB
`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-identity-crisis/babel.config.js`	160 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css`	2.37 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.37 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}

…nners

elazzabi

Left a small request to make the comment clearer.

Also, for my curiosity, I asked on Slack for more details about this decision p1710986366846829/1710986315.983159-slack-C03KTTK2YMA

client/onboarding/style.scss

elazzabi

After the discussion on Slack, it's up to the team to decide what's the best approach here. Removing my block to merge if we decide to do so.

elizaan36 · 2024-03-27T16:14:55Z

imo this survey should be removed. There shouldn't be any competing calls to action during WooPayments onboarding, especially non-essential ones like this. It's a distraction that can impact activation.

vladolaru · 2024-03-28T07:45:11Z

imo this survey should be removed. There shouldn't be any competing calls to action during WooPayments onboarding, especially non-essential ones like this. It's a distraction that can impact activation.

Totally agree, @elizaan36

mordeth · 2024-03-28T09:07:49Z

I've revised the initial approach and eliminated the JITM notices entirely from the onboarding page to ensure there are no distractions.

…nners

oaratovskyi

It was tricky to test, but it works!
Testing instructions are slightly different, see p1711623868207219-slack-C03KTTK2YMA

elazzabi

Removing it completely looks like a better choice! Approving

…nners

Reposition JITM banners below the fixed onboarding header

e3a89f1

mordeth added 2 commits March 20, 2024 17:32

Add changelog

886fe31

Merge branch 'develop' into fix/8093-onboarding-collides-with-jitm-ba…

289242c

…nners

mordeth requested a review from a team March 20, 2024 15:40

mordeth self-assigned this Mar 20, 2024

mordeth added the pr: needs review label Mar 20, 2024

elazzabi requested changes Mar 21, 2024

View reviewed changes

client/onboarding/style.scss Outdated Show resolved Hide resolved

mordeth requested a review from a team March 25, 2024 18:06

oaratovskyi requested a review from elazzabi March 26, 2024 13:28

elazzabi approved these changes Mar 26, 2024

View reviewed changes

Completely hide JITM wrapper for onboarding page

791cc45

mordeth requested a review from a team March 28, 2024 09:06

Merge branch 'develop' into fix/8093-onboarding-collides-with-jitm-ba…

85993a8

…nners

mordeth requested a review from elazzabi March 28, 2024 10:09

oaratovskyi approved these changes Mar 28, 2024

View reviewed changes

oaratovskyi added pr: ready to merge and removed pr: needs review labels Mar 28, 2024

elazzabi approved these changes Mar 28, 2024

View reviewed changes

mordeth added 2 commits March 28, 2024 13:32

Merge branch 'develop' into fix/8093-onboarding-collides-with-jitm-ba…

a238212

…nners

Merge branch 'develop' into fix/8093-onboarding-collides-with-jitm-ba…

5df331f

…nners

mordeth added this pull request to the merge queue Mar 28, 2024

Merged via the queue into develop with commit f6b8bf4 Mar 28, 2024
22 checks passed

mordeth deleted the fix/8093-onboarding-collides-with-jitm-banners branch March 28, 2024 12:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Resolve collision between WooPayments header and Woo Express survey banner #8400

Resolve collision between WooPayments header and Woo Express survey banner #8400

mordeth commented Mar 15, 2024 •

edited

Loading

botwoo commented Mar 15, 2024 •

edited

Loading

github-actions bot commented Mar 15, 2024 •

edited

Loading

elazzabi left a comment

elazzabi left a comment

elizaan36 commented Mar 27, 2024

vladolaru commented Mar 28, 2024

mordeth commented Mar 28, 2024

oaratovskyi left a comment

elazzabi left a comment

Resolve collision between WooPayments header and Woo Express survey banner #8400

Resolve collision between WooPayments header and Woo Express survey banner #8400

Conversation

mordeth commented Mar 15, 2024 • edited Loading

Changes proposed in this Pull Request

Testing instructions

botwoo commented Mar 15, 2024 • edited Loading

Test the build

Option 1. Jetpack Beta

Option 2. Jurassic Ninja - available for logged-in A12s

github-actions bot commented Mar 15, 2024 • edited Loading

elazzabi left a comment

Choose a reason for hiding this comment

elazzabi left a comment

Choose a reason for hiding this comment

elizaan36 commented Mar 27, 2024

vladolaru commented Mar 28, 2024

mordeth commented Mar 28, 2024

oaratovskyi left a comment

Choose a reason for hiding this comment

elazzabi left a comment

Choose a reason for hiding this comment

mordeth commented Mar 15, 2024 •

edited

Loading

botwoo commented Mar 15, 2024 •

edited

Loading

github-actions bot commented Mar 15, 2024 •

edited

Loading