On-/offboarding copy updates

[mdperez86]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #38960

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

New users flow. Note that for this flow the store should not has any published product.

1. Make sure the New product editor feature is active under /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
2. Make sure woocommerce_block_product_tour_shown is set to no and woocommerce_product_editor_show_feedback_bar is set to yes under /wp-admin/tools.php?page=woocommerce-admin-test-helper so WCA Test Helper should be installed
3. Visit /wp-admin/admin.php?page=wc-admin&path=/add-product you should see the welcome modal with title Meet the product editing form and description Discover the product form's unique features with a quick overview of what's included.
4. After clicking View highlights button you should see a tour modal with title Fresh and modern interface, description Everything you need to create and sell your products, all in one place. From photos and descriptions to pricing and inventory, all of your product settings can be found here.

 and the illustration shared in second AC from [Enhancement] On-/offboarding copy updates #38960
5. Clicking the Next button a second modal should be shown with title Content-rich product descriptions and description Show off what's great about your products and engage your customers with content-rich product descriptions. Add images, videos, and any other content they might need to make a purchase.
6. Clicking the Next button a third modal should be shown with title Lightning fast performance and description Get your products listed and available for purchase in no time! Our modern technology ensures a reliable and streamlined experience.
7. Clicking the Next button a four modal should be shown with title More features are on the way and description We're actively working on adding more features to the product form, including the ability to add digital products, variations, and more. Watch this space!
8. After closing the last modal a bottom bar should slides out from the bottom of the screen and with some background blur. Check the design from [Enhancement] On-/offboarding copy updates #38960
9. Clicking Share feedback link from the bottom bar should show a feedback modal with tile What do you think of the new product form?
10. When clicking turn it off link from the bottom bar should show a new modal with the following checkboxes
    and the primary button should be Send

Old users flow. Note that for this flow the store should has at least one published product.

1. Make sure the New product editor feature is active under /wp-admin/admin.php?page=wc-settings&tab=advanced&section=features
2. Make sure woocommerce_block_product_tour_shown is set to no and woocommerce_product_editor_show_feedback_bar is set to yes under /wp-admin/tools.php?page=woocommerce-admin-test-helper so WCA Test Helper should be installed
3. Visit /wp-admin/admin.php?page=wc-admin&path=/add-product you should see the welcome modal with title Welcome to the new product form! and description Discover its new features and improvements with a quick overview of what's included.

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement

Message

Comment

[github-actions]

Hi @louwie17,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: dca1433

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 54s
E2E Tests	190	0	0	18	0	208	14m 28s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[louwie17]

Nice work on this @mdperez86, this tested well.
I left one comment in relation to the changelog for the CES package, if you could update that.
Also it looks like the Guide in the design uses a primary variant for the next button, I know this wasn't explicitly mentioned in the current issue.
So I can create a separate issue for it, but it should be a relatively simple fix if you could add it.
It just be matching the original Guide component in our copied version for this line: https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/guide/index.tsx#L154
Here is our version:

woocommerce/plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx

Line 101 in e6eda7f

onClick={ goForward }

[louwie17]

We should change this changelog to be CES specific.
In this case we are fixing the onsubmit label.

[mdperez86]

done -> 743725a

[louwie17]

LGTM 🚀 Thanks for the updates, this still tested well, thanks :)

[mattsherman]

@mdperez86 @louwie17 This PR broke the alignment of the feedback bar content... it used to line up with the form (same left/right margins). It now is offset...

[mattsherman]

It also broke the positioning of the snackbar notices... they should appear above the feedback bar (they did). They no longer do -- they now overlap the feedback bar (they shouldn't).

[mattsherman]

(I can create a new issue for these bugs later -- it's too late in the evening right now... just didn't want to lose track of them)

[louwie17]

(I can create a new issue for these bugs later -- it's too late in the evening right now... just didn't want to lose track of them)

Good catch @mattsherman, I had not noticed those when reviewing. It be nice to get those in before the code freeze on Monday (if possible), especially the alignment one (cc @mdperez86 )

[mattsherman]

@louwie17 @mdperez86 Here is the issue for tracking the regressions...

#39228