Skip to content

CES modal modifications #38643

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
octaedro merged 18 commits into from
Jun 14, 2023
Merged

CES modal modifications #38643

octaedro merged 18 commits into from
Jun 14, 2023

Conversation

@octaedro
Copy link
Contributor

@octaedro octaedro commented Jun 7, 2023 •
edited
Loading

Submission Review Guidelines:

Changes proposed in this Pull Request:

This PR introduces several modifications to the CES modal.

Screenshot 2023-06-09 at 16 51 02

Acceptance criteria

  • Remove the modal description.
  • Add the fields Additional thoughts and Your email address. Both are optional.
    • Add an email validation for the second field.
    • [ ]Validate the Additional thoughts field to ensure it is smaller than 500 characters. This wasn't in the original requirements, but I thought it would be good to add it.
  • Modify the first question from The product editing screen is easy to use to PRODUCT FORM IS EASY TO USE.
  • Modify the second question from The product editing screen's functionality meets my needs to PRODUCT FORM’S FUNCTIONALITY MEETS MY NEEDS.
  • The border and background when havering an icon now look different.
  • The icon's height is now smaller.
  • The distance between each icon now is smaller too.

Closes #38502.

How to test the changes in this Pull Request:

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

  1. Checkout this branch, and enable the blocks product management experience
  2. Go to WooCommerce > Add New and press Share feedback in the bottom bar.

Screenshot 2023-06-11 at 22 09 56

  1. The CES modal should be displayed.
  2. Verify that the validation is working correctly for the fields.
  3. Confirm that the score is being recorded correctly.
  4. Also click the three dots next to the Add button in the header and select Share feedback. The same form should be shown.

Screenshot 2023-06-11 at 22 15 36

// cc @jarekmorawski

@github-actions github-actions bot added package: @woocommerce/customer-effort-score issues related to @woocommerce/customer-effort-score plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jun 7, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 920b109

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 59s
E2E Tests1950010020514m 39s
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.

@octaedro octaedro changed the title Fix/38502 ces modal styling fixes CES modal modifications Jun 9, 2023
octaedro added 8 commits June 11, 2023 17:18
@octaedro
Add extraFields prop
fc7f15f 
# Conflicts:
#	packages/js/product-editor/src/components/product-mvp-ces-footer/product-mvp-ces-footer.tsx
@octaedro
Add changelog
fe0f5f4
@octaedro
Add changelogs
f2e220c
@octaedro
Fix styles
f3a952b 
# Conflicts:
#	packages/js/product-editor/src/components/product-mvp-ces-footer/style.scss
@octaedro
Add extraFields validation
0fe815a
@octaedro
Remove files
5b3d25f
@octaedro
Add styles and js
e1b4f58
@octaedro
Modify the other share feedback form
9d1f572
@octaedro octaedro force-pushed the fix/38502_ces_modal_styling_fixes branch from 5a6b5b7 to 9d1f572 Compare June 12, 2023 01:07
@octaedro
Copy link
Contributor Author

octaedro commented Jun 12, 2023

Hey @jarekmorawski,

Just to confirm, should the same form be shown after pressing the Share feedback button at the bottom and in the menu next to the Add button in the header?

@octaedro octaedro marked this pull request as ready for review June 12, 2023 01:23
@octaedro octaedro requested a review from a team June 12, 2023 01:23
@octaedro octaedro self-assigned this Jun 12, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 12, 2023 •
edited
Loading

Hi @nathanss,

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

@jarekmorawski
Copy link

jarekmorawski commented Jun 12, 2023

Just to confirm, should the same form be shown after pressing the Share feedback button at the bottom and in the menu next to the Add button in the header?

Yes!

@nathanss nathanss self-requested a review June 12, 2023 14:04
nathanss
nathanss suggested changes Jun 12, 2023
View reviewed changes
Copy link
Contributor

@nathanss nathanss left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Issues I found:

  1. Scroll is showing for me:
image 2. I tried clicking "Share" with an invalid email and with blank "PRODUCT FORM IS EASY TO USE". The email validation only happens when the mandatory fields are filled.
  1. After filling all the mandatory information, the error was still submitted on tracks:
image

nathanss
nathanss suggested changes Jun 12, 2023
View reviewed changes
@octaedro
Copy link
Contributor Author

octaedro commented Jun 12, 2023

Hey @jarekmorawski,
I noticed that the error message when the user doesn't select any scores wasn't highlighted in red. Can I change that?

It would look like this:

color-change

@octaedro
Copy link
Contributor Author

octaedro commented Jun 12, 2023

Hey @nathanss,
Thank you for reviewing this PR. I just addressed the changes you suggested.
Regarding the scroll, it is expected for small screens. The only consideration when the scroll is visible is to keep the Cancel and Save buttons fixed.
Could you take another look at this PR?

@octaedro octaedro requested a review from nathanss June 12, 2023 23:54
@jarekmorawski
Copy link

jarekmorawski commented Jun 13, 2023

I noticed that the error message when the user doesn't select any scores wasn't highlighted in red. Can I change that?

Yeah, it looks good! Thanks for taking care of this. Can we tweak the copy in the emoji questions to:

Please tell us to what extent you agree or disagree with the statements above.

As for the email address, the field should also be highlighted in red.

@nathanss
Copy link
Contributor

nathanss commented Jun 14, 2023

Thanks for handling all the found issues. It's working great now.

@octaedro octaedro merged commit 4748149 into trunk Jun 14, 2023
@octaedro octaedro deleted the fix/38502_ces_modal_styling_fixes branch June 14, 2023 14:25
@github-actions github-actions bot added this to the 7.9.0 milestone Jun 14, 2023
@ismaeldcom ismaeldcom mentioned this pull request Jun 15, 2023
Merged
@louwie17 louwie17 mentioned this pull request Jun 26, 2023
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@nathanss nathanss nathanss approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@octaedro octaedro

Labels

package: @woocommerce/customer-effort-score issues related to @woocommerce/customer-effort-score plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.9.0

Development

Successfully merging this pull request may close these issues.

CES modal: styling fixes

4 participants

@octaedro @jarekmorawski @nathanss