Add marketplace feedback component

[Dan-Q]

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 WCCOM #17602. by adding a component that requests feedback on the new marketplace.

How to test the changes in this Pull Request:

Happy Path

1. Visit http://localhost:8888/wp-admin/admin.php?page=wc-admin&path=%2Fextensions&tab=extensions and see a snackbar prompt you to provide feedback.
2. Click the link and fill the form.
3. Observe that a Tracks event would be sent in a way that's compatible with internal documentation (FG "Importing CES Feedback")
4. Refresh the page and see that the prompt does not reappear

Sad Paths

• If dismissed either using the "Cancel" button on the model or using the "cross" icon on the snackbar, the snackbar should not reappear until tomorrow (i.e. no more than once per day); you can check/change the "date on which you last dismissed it" for testing purposes with localStorage.getItem('marketplace_redesign_2023_last_shown_date') / localStorage.setItem('marketplace_redesign_2023_last_shown_date', ' ... ')
• If dismissed a total of two times OR feedback is submitted, the snackbar should not reappear ever again; you can check/change the "number of dismissals" for testing purposes with localStorage.getItem('marketplace_redesign_2023_dismissals') / localStorage.setItem('marketplace_redesign_2023_dismissals', ' ... ')
• After 2023, you should never be prompted for feedback; ideally the user would upgrade WC to a version in which this feature is removed, but we need a time-based check in case the user DOESN'T upgrade (we don't want to keep nagging them for feedback for years!); you can change this date by modifying SUPPRESS_IF_AFTER_DATE in plugins/woocommerce-admin/client/marketplace/components/feedback-modal/feedback-modal.tsx
• If either of the mandatory fields (the likert scales) are not answered, a border appears as a validation warning and submission does not continue

Impact/significance

Part of a feature branch.

[github-actions]

Hi @jonathansadowski, @andfinally, @raicem, @kdevnel, @simranvijwani, @poligilad-auto,

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: 0d2e2b6

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 50s
E2E Tests	189	0	0	19	0	208	15m 4s

---

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.

[andfinally]

Thanks for the tweaks, snackbar is nicely positioned now!

Looks like we need to rebase this branch on feature/marketplace, after that was updated... That should get rid of the HeaderSearchButton and HeaderSearch changes.

We've been using the domain woocommerce for our translations, i.e. in __ calls.

I guess we want to change the sad paths in the testing steps, i.e.

If dismissed either using the "Cancel" button on the model or using the "cross" icon on the snackbar, the snackbar should not reappear until tomorrow

If dismissed a total of two times OR feedback is submitted, the snackbar should not reappear ever again; you can check/change the "number of dismissals" for testing purposes with

as the snackbar now doesn't reappear if dismissed once (which I think it what we were happy with).

[Dan-Q]

@poligilad-auto: Latest video -

Screen.Capture.on.2023-08-09.at.15-09-33.mp4

[Dan-Q]

Biggest outstanding question for @poligilad-auto is: how should the "invalid upon submission" mandatory fields be highlighted. See the video in the comment above for an example. Right now I'm giving them a red border if you try to submit without answering the first two questions, but I imagine there might be a better way!

[Dan-Q]

@poligilad-auto asked:

Where did we land on conditions for showing the feedback snackbar?

Right now it will appear until one of the following things happens:
(a) it's dismissed (either by clicking close in the snackbar, cancel in the modal, or close in the modal),
(b) it's answered and submitted,
(c) the end of this year, or
(d) a future version of WooCommerce removes it (and that version is installed by the user)

[raicem]

Loved the code. Thank you so much @Dan-Q.

I find it a little weird that the snackbar is not position: fixed. But it's been discussed previously and I guess people are happy with that.

I also couldn't figure out how to observe the CES tracks event. My network tab and my console is empty when submitting the form.

Happy to give this another round of review after ESlint fixes.

[raicem]

Loved these functions. You made it really easy to read and understand.

[raicem]

Huh, cool that core provides this to us.

[simranvijwani]

Works great! I left a few non-blocking comments.

[andfinally]

--- Deleted -- clicked the "Comment" button instead of "Approve" ---

[andfinally]

Thanks for the tweaks! I think this is good.

Applied Simran's suggestions. Reset the branch on the latest feature branch, and squashed all the commits.