Adding the feedback button on activity panel for the classic product page #35810

joelclimbsthings · 2022-12-01T21:42:46Z

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:

Closes #35806 .

How to test the changes in this Pull Request:

Checkout branch.
Navigate to classic product editor. (Menu -> Products -> Add New)
Notice that the Feedback button appears in the header above:
Click the feedback button.
Notice that the icon color changes, and the CES modal is displayed.
Open the console and enable tracks debugging with localStorage.setItem( 'debug', 'wc-admin:*' );
Click "Send" on the modal, and ensure that the wcadmin_ces_feedback event is sent with the product_feedback action and correct score(s).

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-12-01T22:05:38Z

Test Results Summary

Commit SHA: 017fcbb

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 57s
E2E Tests	187	0	0	6	0	193	15m 13s

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.

joshuatf

Thanks for adding this in to the old experience, Joel! The CES modal is testing well for me and all tracks events work as expected 👍

I'm running into 2 issues (not sure if it's just my env):

After opening the feedback modal, the "Activity Panel" and "Finish setup" buttons no longer work for me.

After opening and closing the feedback modal a couple times, the activity panel icon remains highlighted like its active even when the modal is closed.

joshuatf · 2022-12-05T16:10:37Z

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

 	};

-	const isProductPage = () => {
+	const isProductScreen = () => {


Don't disagree or feel strongly about this change, but just curious if there are reasons to change this name to encompass more screens.

This was an off the cuff thought to discern the MVP from the current product UI. Basically I associate the term screen a bit more with the reactified MVP, and page moreso with the current UI.

Not sure if this is just me, and something more explicit might be better. I didn't want to use the term "MVP" since that will soon be obsolete, but open to suggestions.

Basically I associate the term screen a bit more with the reactified MVP, and page moreso with the current UI.

I'm fine with either, though I do know we still refer to some areas as "pages." I guess we should figure out which we like and be consistent, but I'm fine with this change for now.

I didn't want to use the term "MVP" since that will soon be obsolete

Definitely agree with this. We need to name what we want it to be going forward and not something "future-y" since it won't always be.

joshuatf · 2022-12-05T16:16:12Z

plugins/woocommerce-admin/client/products/product-more-menu.tsx

 									{
 										action: 'new_product',
-										label: __(
+										title: __(


joelclimbsthings · 2022-12-06T23:14:36Z

Thanks for the review @joshuatf ! I'd actually seen that behavior, but thought I'd resolved it with my last change. Seems not.

After opening and closing the feedback modal a couple times, the activity panel icon remains highlighted like its active even when the modal is closed.

I've noticed that some of the above behavior is preexisting (such as the "preview" button the appearance task), but resolving it in all cases might require a bit more nuance on a case-by-case basis. The change I made in 84635fb I believe will result in the best behavior for this particular instance, although IMO the logic in this component is a little unintuitive and overly complex. Perhaps due to revisit in another issue.

One other way to approach this is just using the component prop (seen here), with the <Tab /> component, but that ends up being a lot more verbose for the same behavior.

All that said, I believe everything is resolved! Let me know.

joshuatf

Thanks for the changes, Joel!

This is testing really for me now. One minor quirk remaining, but pre-approving. ✅

After completing the feedback form, the tab is still active. Is that possible to update after completion?

joshuatf · 2022-12-07T21:29:25Z

plugins/woocommerce-admin/client/activity-panel/activity-panel.js

 	};

-	const isProductPage = () => {
+	const isProductScreen = () => {


Basically I associate the term screen a bit more with the reactified MVP, and page moreso with the current UI.

I'm fine with either, though I do know we still refer to some areas as "pages." I guess we should figure out which we like and be consistent, but I'm fine with this change for now.

I didn't want to use the term "MVP" since that will soon be obsolete

Definitely agree with this. We need to name what we want it to be going forward and not something "future-y" since it won't always be.

joelclimbsthings · 2022-12-08T00:41:39Z

Thanks @joshuatf , looks like that handler isn't called on submission. Remedied in a4b6739.

joshuatf

Testing well! Thanks for fixing the state after feedback submission. This LGTM, but there is a conflict so feel free to ping me if you need another ✅

…odal

joshuatf

Still testing well! 🚢

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

joelclimbsthings self-assigned this Dec 1, 2022

joelclimbsthings added the focus: customer effort score label Dec 1, 2022

louwie17 force-pushed the add/35300_ces_feedback_product_mvp branch from ccfe5fd to e44dc68 Compare December 2, 2022 10:32

joelclimbsthings linked an issue Dec 2, 2022 that may be closed by this pull request

CES: Add the feedback button to the navbar on classic product management page #35806

Closed

Base automatically changed from add/35300_ces_feedback_product_mvp to trunk December 2, 2022 15:59

joelclimbsthings force-pushed the add/35806-classic-product-feedback branch 2 times, most recently from fbbe50b to 3a11101 Compare December 2, 2022 20:42

joshuatf reviewed Dec 5, 2022

View reviewed changes

joelclimbsthings requested a review from joshuatf December 6, 2022 23:14

joshuatf previously approved these changes Dec 7, 2022

View reviewed changes

joelclimbsthings dismissed joshuatf’s stale review via a4b6739 December 8, 2022 00:39

joelclimbsthings requested a review from joshuatf December 8, 2022 00:41

joshuatf previously approved these changes Dec 13, 2022

View reviewed changes

joelclimbsthings dismissed joshuatf’s stale review via ba31a27 December 14, 2022 00:27

joelclimbsthings force-pushed the add/35806-classic-product-feedback branch from ba31a27 to 5ea33af Compare December 14, 2022 02:03

joelclimbsthings added 7 commits December 15, 2022 11:19

Adding the feedback button on the classic product page, trigger CES m…

78cc0a6

…odal

Adding changelog

25853a6

Changing label prop to title to keep it consistent with CES component

60d0fb0

Closing panel when modal is closed

d55aaa3

Fixing issues with Activity panel state associated with feedback button

3d88b5e

Removing obsolete comment

10a9586

Setting activity panel state again after recording score with modal

017fcbb

joelclimbsthings force-pushed the add/35806-classic-product-feedback branch from 5ea33af to 017fcbb Compare December 15, 2022 19:19

joshuatf approved these changes Dec 15, 2022

View reviewed changes

joelclimbsthings merged commit 6e20f66 into trunk Dec 15, 2022

joelclimbsthings deleted the add/35806-classic-product-feedback branch December 15, 2022 22:31

github-actions bot added this to the 7.4.0 milestone Dec 15, 2022

github-actions bot mentioned this pull request Feb 15, 2023

Test WooCommerce 7.4 UVLabs/location-picker-at-checkout-for-woocommerce#60

Closed

Adding the feedback button on activity panel for the classic product page #35810

Adding the feedback button on activity panel for the classic product page #35810

Uh oh!

Conversation

joelclimbsthings commented Dec 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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 Dec 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test Results Summary

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

joshuatf Dec 5, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings Dec 6, 2022

Choose a reason for hiding this comment

Uh oh!

joshuatf Dec 7, 2022

Choose a reason for hiding this comment

Uh oh!

joshuatf Dec 5, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings commented Dec 6, 2022

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

joshuatf Dec 7, 2022

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings commented Dec 8, 2022

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

joshuatf left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joelclimbsthings commented Dec 1, 2022 •

edited

Loading

github-actions bot commented Dec 1, 2022 •

edited

Loading