Add/35129 product mvp ces #35652

louwie17 · 2022-11-21T10:29:00Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Add's a CES bar to the footer of the Product MVP page when a user saves or publishes a product for the first time.

Closes #35129

Kapture.2022-11-21.at.11.23.33.mp4

This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

Load this branch, build it, and make sure you have the new-product-management-experience feature flag enabled (you can do so using the latest version of the Beta tester within the mono repo).
Make sure you have tracks enabled and also outputted in the console: localStorage.setItem( 'debug', 'wc-admin:*' );
Go to Products > Add New (MVP)
Add a name and click Save draft
A bar in the footer should show up saying: You're using the new product editor (currently in development). How is your experience so far? and give the option to share feedback
Refresh the page, the bar should show up again after the product has been loaded.
When clicking share feedback the CES modal should show up. You can fill it out and click Send
This should trigger a track event with new_product action and the score.
The bar should stay put after submitting feedback
Now click Publish and enter feedback again, this should trigger the new_product action once finished.
The feedback footer should still show up after, even after refresh.
Now click the x or Turn it off on the notice, the notice should not show up there after, also on refresh.

If you wanted to re-test you can delete the woocommerce_ces_product_mvp_ces_action option.

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

github-actions · 2022-11-21T10:58:58Z

Test Results Summary

Commit SHA: 61989a6

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	1m 6s
E2E Tests	186	0	0	6	0	192	11m 12s

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 · 2022-11-22T14:49:42Z

plugins/woocommerce-admin/client/layout/footer/footer.tsx

+import './footer.scss';
+import { WC_FOOTER_SLOT_NAME, WooFooterItem } from './utils';
+
+export const Footer: React.FC = () => {


A simple Footer component with a SlotFill, this allows us to easily fill it with the CES footer and correctly use the full width.

joelclimbsthings · 2022-11-23T23:06:10Z

plugins/woocommerce-admin/client/layout/footer/utils.tsx

+
+export const WC_FOOTER_SLOT_NAME = 'woocommerce_footer_item';
+/**
+ * Create a Fill for extensions to add items to the WooCommerce Admin header.


Typo here:

Suggested change

* Create a Fill for extensions to add items to the WooCommerce Admin header.

* Create a Fill for extensions to add items to the WooCommerce Admin footer.

joelclimbsthings · 2022-11-23T23:25:51Z

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx

+		cesShownForActions,
+		resolving: isLoading,
+	} = useSelect( ( select ) => {
+		const { getOption, isResolving } = select( OPTIONS_STORE_NAME );


Just a note here that isResolving will actually be false before it's true, which can cause some erratic behavior. I think it's more reliable to use hasFinishedResolution if that can serve your use case.

joelclimbsthings

Nice work @louwie17 ! Made a couple minor comments.

I also noticed that the display breaks around a viewport width of ~1050px, which seems a bit fragile even if we're not putting attention towards mobile on this screen so far.

Once we do support mobile this will be additional technical debt, so perhaps it's worth trying to accommodate it here in some fashion? @jarekmorawski

Also, not at all required but I wonder if there is an argument for adding the UI layer of this component to the customer-effort-score package?

louwie17 · 2022-11-24T09:21:41Z

Thanks for the review @joelclimbsthings, I addressed your feedback and fixed the styling around the viewport.

Also, not at all required but I wonder if there is an argument for adding the UI layer of this component to the customer-effort-score package?

Yeah potentially, given this is mostly geared towards the Product MVP, I don't think it be useful for users to re-use this, unless they wanted to gather feedback and have access to our tracks :)

The one potential item that probably should be moved is the Footer Slot fill, we did have to move that along with the header slot fill. Given the header hasn't moved yet, I will leave that until we move both, maybe when we implement extensibility.

joelclimbsthings · 2022-11-29T20:22:28Z

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx

+				</WooFooterItem>
+			) }
+			{ showFeedbackModal && (
+				<CustomerFeedbackModal


Since I just merged the CES: Add additional question PR, we'll want to add the additional props here and double-check that it's working properly after a rebase on trunk. Here's an example.

Addressed here: 66ad4d0

joelclimbsthings

Right on, great work @louwie17 . Everything looks good, although I recently merged a PR that will require a minor update. See this comment for details.

louwie17 · 2022-11-30T11:41:51Z

Right on, great work @louwie17 . Everything looks good, although I recently merged a PR that will require a minor update. See this comment for details.

Thanks @joelclimbsthings, I updated it to account for the second question. Also note that I updated the options text in the customer effort modal to match the questions, as from the design that looks to be new normal. Otherwise the options sounded kinda weird.

joelclimbsthings · 2022-11-30T20:26:43Z

packages/js/customer-effort-score/src/customer-feedback-modal/index.tsx

+		customOptions && customOptions.length > 0
+			? customOptions
+			: [
+					{


Nice! Thanks for updating these @louwie17

joelclimbsthings

Also note that I updated the options text in the customer effort modal to match the questions, as from the design that looks to be new normal. Otherwise the options sounded kinda weird.

💯 Looks like that was a miss on my part. Thanks for getting that. Everything looks and works great! 🚢

github-actions bot added focus: react admin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 21, 2022

louwie17 force-pushed the add/35129_product_mvp_ces branch from ea4b177 to 5c85b41 Compare November 22, 2022 14:44

louwie17 commented Nov 22, 2022

View reviewed changes

louwie17 marked this pull request as ready for review November 22, 2022 14:50

louwie17 requested a review from a team November 22, 2022 14:50

louwie17 force-pushed the add/35129_product_mvp_ces branch 2 times, most recently from 203b845 to be6f3fc Compare November 23, 2022 15:48

joelclimbsthings requested review from joelclimbsthings and removed request for a team November 23, 2022 22:33

joelclimbsthings reviewed Nov 23, 2022

View reviewed changes

joelclimbsthings suggested changes Nov 23, 2022

View reviewed changes

louwie17 force-pushed the add/35129_product_mvp_ces branch from be6f3fc to 3952fbc Compare November 24, 2022 08:49

louwie17 requested a review from joelclimbsthings November 24, 2022 09:16

louwie17 self-assigned this Nov 29, 2022

joelclimbsthings reviewed Nov 29, 2022

View reviewed changes

joelclimbsthings suggested changes Nov 29, 2022

View reviewed changes

louwie17 added 10 commits November 30, 2022 12:04

Add product mvp ces footer

0a4a553

Add changelog

b3faf02

Reset action option name after CES action

cb1522e

Make sure we make use of cesAction

515fda5

Add close button

842cc57

Fix formatting

33257af

Fix css styling issues

44731d8

Add icon to success notice

98fc786

Add product mvp CES hook and modify logic a little bit

bad10d0

Update the CES product action name

c4f487c

louwie17 added 3 commits November 30, 2022 12:04

Address PR feedback and fix styling for smaller screens

7cda807

Add second question to CES product footer and update options

66ad4d0

Add changelog

4b5869f

louwie17 force-pushed the add/35129_product_mvp_ces branch from 3952fbc to 4b5869f Compare November 30, 2022 11:39

github-actions bot added the package: @woocommerce/customer-effort-score issues related to @woocommerce/customer-effort-score label Nov 30, 2022

louwie17 requested a review from joelclimbsthings November 30, 2022 11:40

louwie17 added 2 commits November 30, 2022 14:30

Fix lint error

149c43f

Fix tests

61989a6

joelclimbsthings reviewed Nov 30, 2022

View reviewed changes

joelclimbsthings approved these changes Nov 30, 2022

View reviewed changes

louwie17 merged commit 0e8fbe0 into trunk Dec 2, 2022

louwie17 deleted the add/35129_product_mvp_ces branch December 2, 2022 09:35

github-actions bot added this to the 7.3.0 milestone Dec 2, 2022

github-actions bot mentioned this pull request Jan 13, 2023

Test WooCommerce 7.3 UVLabs/location-picker-at-checkout-for-woocommerce#59

Closed

	* Create a Fill for extensions to add items to the WooCommerce Admin header.
	* Create a Fill for extensions to add items to the WooCommerce Admin footer.

Add/35129 product mvp ces #35652

Add/35129 product mvp ces #35652

Uh oh!

Conversation

louwie17 commented Nov 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

github-actions bot commented Nov 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

louwie17 Nov 22, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 commented Nov 24, 2022

Uh oh!

joelclimbsthings Nov 29, 2022

Choose a reason for hiding this comment

Uh oh!

louwie17 Nov 30, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings left a comment

Choose a reason for hiding this comment

Uh oh!

louwie17 commented Nov 30, 2022

Uh oh!

joelclimbsthings Nov 30, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

louwie17 commented Nov 21, 2022 •

edited

Loading

github-actions bot commented Nov 21, 2022 •

edited

Loading