Show feedback footer on product editor page #38599

mattsherman · 2023-06-03T18:30:04Z

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 #38519.

No footer (ignore section backgrounds; see #38607)

Footer

Footer with overlapping transient notice (to be addressed outside of this PR)

How to test the changes in this Pull Request:

Note: To reset the state of the system so that the feedback footer will be shown, delete the following options:

woocommerce_product_editor_show_feedback_bar
woocommerce_ces_shown_for_actions

Enable experimental "new product editor" (beta) in WooCommerce > Settings > Advanced > Features
Go to Products > Add New
Verify no feedback footer is shown.
Fill out some fields and save draft (or publish).
Verify feedback footer is shown.
Refresh the page.
Verify feedback footer is still shown.

Note: For the following, you will want to reset the state of the system between verifications to get the feedback footer to show (see above).

Verify that if the "X" button is clicked:
- the feedback footer is hidden permanently
- the wcadmin_product_editor_feedback_bar_dismiss_click Tracks event is logged
Verify that if the "Share feedback" link is clicked:
- the standard CES feedback modal is shown (exact style will be handled in CES modal: styling fixes #38502 and Product Editor Onboarding: Add email address field to product editor CES modal #38521)
- the feedback footer is hidden permanently
- the wcadmin_product_editor_feedback_bar_share_feedback_click Tracks event is logged
Verify that if the "turn if off" link is clicked:
- a custom feedback modal is shown (exact style will be handled in Update product editor CES modal to match new designs #38592 and Product Editor Onboarding: Add email address field to product editor CES modal #38521)
- the feedback footer is hidden permanently
- the wcadmin_product_editor_feedback_bar_turnoff_editor_click Tracks event is logged

github-actions · 2023-06-03T19:05:04Z

Test Results Summary

Commit SHA: 4d218c6

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 51s
E2E Tests	195	0	0	10	0	205	19m 14s

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.

github-actions · 2023-06-05T23:55:48Z

Hi , @woocommerce/mothra

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

joshuatf

Really like the use of the new hook!

Left a few comments, mostly opinionated nitpicks around naming.

joshuatf · 2023-06-06T01:18:25Z

packages/js/product-editor/src/components/footer/footer.tsx

+		>
+			<WooFooterItem.Slot name="product" />
+
+			<FeedbackBar product={ product } />


Optional, but it might be nice to move the FeedbackBar and ProductMVPFeedbackModalContainer to a fill for WooFooterItem.

FeedbackBar actually already is a fill. It feels odd to include it here, but seemed like the most natural place to do so. Any suggestions?

packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts

packages/js/product-editor/src/components/feedback-bar/style.scss

packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx

packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts

mattsherman · 2023-06-07T01:16:31Z

Ready for another round of review, @joshuatf, assuming the checks pass. 🤞

joshuatf

Love the refactor! Really nice work, @mattsherman.

I left a couple thoughts, but those don't need to be addressed in this PR. Just one comment about using the window tracking flag to avoid fetching.

Otherwise this PR is testing perfectly and ready to go after rebase.

joshuatf · 2023-06-08T18:40:21Z

packages/js/product-editor/src/components/feedback-bar/feedback-bar.tsx

+	};
+
+	const onShareFeedbackClick = () => {
+		recordEvent( 'product_editor_feedback_bar_share_feedback_click', {


Not something we need to do in this PR, but just thinking out loud about a helper util in the future: something like recordProductEditorEvent( eventName ) might be nice that handles prefixing with product_editor_ and adding in entity props such as the product_type.

I like the idea of auto-adding entity props.

I'm not sure about prefixing the Tracks event name... doing dynamic generation of event page makes it harder to find events in code when searching. But, I'm not totally opposed to it.

joshuatf · 2023-06-08T18:43:40Z

packages/js/product-editor/src/hooks/use-feedback-bar/use-feedback-bar.ts

+				PRODUCT_EDITOR_SHOW_FEEDBACK_BAR_OPTION_NAME
+			) as string;
+
+			const allowTrackingOption =


Sorry I missed this on the first pass, but we have window.wcTracks.isEnabled on the window that we can grab instead of fetching the option.

Same comment for areas getting the tracking option below.

Ah, cool.... I'll make that change. So, in general, should we never have to get the tracking option client-side by fetching it?

Exactly. The only case where it could become out of sync is when it gets enabled client-side without a refresh, but that won't happen if anyone doing this is hitting the correct tracks API (window.wcTracks.enable) to enable this:

woocommerce/plugins/woocommerce/includes/tracks/class-wc-site-tracking.php

Line 156 in 607324d

window.wcTracks.isEnabled = true;

mattsherman · 2023-06-08T20:12:00Z

@joshuatf Rebased and updated to use window.wcTracks.isEnabled. Ready for a re-review... hopefully all checks pass! 🤞

joshuatf

Tested with and without tracks enabled and still working as expected! Thanks for all the effor on this feature, Matt!

LGTM 🚢

mattsherman self-assigned this Jun 3, 2023

github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 3, 2023

github-actions bot added the package: @woocommerce/customer-effort-score issues related to @woocommerce/customer-effort-score label Jun 5, 2023

mattsherman marked this pull request as ready for review June 5, 2023 23:55

mattsherman requested a review from a team June 5, 2023 23:55

mattsherman changed the title ~~Add/product editor feedback footer~~ Show feedback footer on product editor page Jun 5, 2023

joshuatf reviewed Jun 6, 2023

View reviewed changes

mattsherman added focus: product Issues related to product or product page. focus: product management Related to product creation and editing. focus: new product ux revamped product management experience labels Jun 8, 2023

mattsherman mentioned this pull request Jun 8, 2023

Product Block Editor: Notices should not overlap feedback footer #38651

Closed

joshuatf reviewed Jun 8, 2023

View reviewed changes

mattsherman added 14 commits June 8, 2023 15:49

Footer component

c322000

Add Footer to interface skeleton

60e7f5a

Show footer on mobile

e65e8aa

Footer styles

91066a5

Update feedback footer styling

bb7376e

Update label for close button

44bd9b2

Changelog

f2fcdf1

Changelog

2af6753

Pass product to Footer

ce171a2

Old editor - pass product to footer

3706f21

Add Tracks events

59f61e5

Remove unused constant

39bbfc8

Update option name for tracking if feedback bar should be shown

a8478ca

Rename product editor feedback hook

e27f0ad

mattsherman added 20 commits June 8, 2023 15:49

Clean up feedback bar component naming

114d54e

Clean up feedback bar naming in old new editor

c2aeef6

Add hideFeedback to useFeedbackBar hook

97ca651

Rename const

ceedba3

Changelog

6e3b3c6

Hook feedback bar up to draft and publish

300c8c0

Remove unused functions from useFeedbackBar hook

5b963c4

Update use of useFeedbackBar hook in old new editor

f008ee2

Do not expose showFeedbackBar from useFeedbackBar

38e6f51

Remove obsolete option to disable editor

3eddfea

Clean up logic for if feedback bar should be shown

6c5f0b3

Add comment to padding

38e29e0

Rename to maybeShowFeedbackBar

45fa71f

Rename to maybeShowFeedbackBar in old new editor

390cb3a

Move shouldShowFeedbackBar to hook

3ee0a03

Create useCustomerEffortScoreModal hook

7fd27f3

Move additional logic to useFeedbackBar hook

9e35af3

Tweak useFeedbackBar so it handles when previously shown is updated

08b7a18

Add wcTracks to window global type

4c61728

Use window.wcTracks.isEnable instead of fetching option

4d218c6

mattsherman force-pushed the add/product-editor-feedback-footer branch from a7c6633 to 4d218c6 Compare June 8, 2023 20:10

joshuatf approved these changes Jun 8, 2023

View reviewed changes

mattsherman merged commit dadc0eb into trunk Jun 9, 2023
17 checks passed

mattsherman deleted the add/product-editor-feedback-footer branch June 9, 2023 00:56

github-actions bot added this to the 7.9.0 milestone Jun 9, 2023

This was referenced Jun 9, 2023

Fix transient notices overlapping product editor footer #38668

Closed

Fix transient notices overlapping product editor footer (take 2) #38698

Merged

Keep showing product editor feedback bar after feedback modal shown #38773

Merged

mattsherman mentioned this pull request Jul 13, 2023

Product Editor: Feedback bar is mis-aligned; transient notices overlap #39228

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show feedback footer on product editor page #38599

Show feedback footer on product editor page #38599

mattsherman commented Jun 3, 2023 •

edited

github-actions bot commented Jun 3, 2023 •

edited

github-actions bot commented Jun 5, 2023

joshuatf left a comment

joshuatf Jun 6, 2023

mattsherman Jun 7, 2023

mattsherman commented Jun 7, 2023

joshuatf left a comment

joshuatf Jun 8, 2023

mattsherman Jun 8, 2023

joshuatf Jun 8, 2023

mattsherman Jun 8, 2023

joshuatf Jun 8, 2023

mattsherman commented Jun 8, 2023

joshuatf left a comment

Show feedback footer on product editor page #38599

Show feedback footer on product editor page #38599

Conversation

mattsherman commented Jun 3, 2023 • edited

Submission Review Guidelines:

Changes proposed in this Pull Request:

No footer (ignore section backgrounds; see #38607)

Footer

Footer with overlapping transient notice (to be addressed outside of this PR)

How to test the changes in this Pull Request:

github-actions bot commented Jun 3, 2023 • edited

Test Results Summary

github-actions bot commented Jun 5, 2023

joshuatf left a comment

Choose a reason for hiding this comment

joshuatf Jun 6, 2023

Choose a reason for hiding this comment

mattsherman Jun 7, 2023

Choose a reason for hiding this comment

mattsherman commented Jun 7, 2023

joshuatf left a comment

Choose a reason for hiding this comment

joshuatf Jun 8, 2023

Choose a reason for hiding this comment

mattsherman Jun 8, 2023

Choose a reason for hiding this comment

joshuatf Jun 8, 2023

Choose a reason for hiding this comment

mattsherman Jun 8, 2023

Choose a reason for hiding this comment

joshuatf Jun 8, 2023

Choose a reason for hiding this comment

mattsherman commented Jun 8, 2023

joshuatf left a comment

Choose a reason for hiding this comment

mattsherman commented Jun 3, 2023 •

edited

github-actions bot commented Jun 3, 2023 •

edited