Add additional question to CES modal #35680

joelclimbsthings · 2022-11-22T23:31:47Z

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:

Reworking CES modal to present two distinct questions for every CES event site wide, although with subtle styling and UI changes.

Closes #35124 .

Screenshots

How to test the changes in this Pull Request:

Checkout this branch on a fresh site.
Run localStorage.setItem( 'debug', 'wc-admin:tracks' ); in the console to view tracks events.
Complete the steps below to trigger each CES event, and then click "Give feedback" in the notice at the lower-left corner. Ensure that the modal appears as it does in the screenshot above, and the verbiage of the questions and title make sense for that event.
For each event, observe the console and ensure that the tracks event wcadmin_ces_feedback fires with the correct action, score, score_second_question and score_combined properties.

Change settings

Navigate to WooCommerce -> Settings and change any setting.
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Add attribute

Go to Products > Attributes.
Add a new attribute.
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Add product category

Go to Products > Categories.
Add a new category.
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Add product tag

Go to Products > Tags.
Add a new tag.
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Add new product

Go to Products > Add new.
Create your first product and hit "publish."
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Update product

Go to Products > All Products.
Click the product you just created.
Update title or description in any way and hit "publish."
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Update order

Go to WooCommerce > Orders.
Click "Add Order," add the product you just created, and change status to "processing."
Click "Create."
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Search

Go to Products > All Products
Enter any term into search field in top-right and hit enter.
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Import products

Go to Products > All Products.
Click the "Export" button at the top.
Click "Generate CSV."
Go to Products > All Products.
Click the "Import" button at the top.
Select the CSV you just generated, and click "Continue."
Click "Run the importer."
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Filter Analytics

Go to Analytics > (any report)
Enter any filter above and click "Up- Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.date."
Click "Give feedback" in notice that appears in the bottom-left and complete steps 3-4 above.

Setup task list

Complete the setup task list on the Homescreen
You should see this simple CES component displayed:
Select a score of 1-2.
Observe the CES modal open and complete steps 3-4 above.

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.

…s score component

github-actions · 2022-11-22T23:46:24Z

Test Results Summary

Commit SHA: 28d7ca3

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

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.

joelclimbsthings · 2022-11-23T01:57:48Z

packages/js/customer-effort-score/src/customer-effort-score.tsx

+		comments: string
+	) => void;
+	title: string;
+	firstQuestion: string;


Just a note that these are currently hardcoded in fairly brittle fashion, but that was the approach decided on in the original issue.

plugins/woocommerce-admin/client/two-column-tasks/completed-header.tsx

octaedro · 2022-11-23T19:05:38Z

plugins/woocommerce/src/Internal/Admin/CustomerEffortScoreTracks.php


 		$this->enqueue_to_ces_tracks(
 			array(
 				'action'         => self::SHOP_ORDER_UPDATE_ACTION_NAME,


This event is also triggered when the order is created, is that expected?

I noticed this as well, but this was the preexisting behavior so I'd assumed it was expected. We could loop in @pmcpinto . I know it's triggered when we create the order manually through wc-admin. Glancing at the code it's triggered by a change in the order post status.

the way it's working now is fine. Thanks for the heads up.

plugins/woocommerce-admin/client/customer-effort-score-tracks/data/actions.js

octaedro

Nice job @joelclimbsthings! This is testing well here and code looks mainly good. I just left a couple of small comments and questions.

joelclimbsthings · 2022-11-23T22:16:34Z

Thanks @octaedro , I believe I've made the requested changes, although pending Pedro's feedback if we like regarding the order creation event.

I also had to direct some attention to the customer effort score tests. It seems that they're not run when you run the command from the root of the monorepo? 🤔

octaedro

Great job @joelclimbsthings!

It seems that they're not run when you run the command from the root of the monorepo?

I would create a new issue to handle that in a follow-up PR.

I'm going to pre-approve this PR, waiting for Pedro's feedback.

ecgan · 2023-01-02T17:50:19Z

Hi @joelclimbsthings , just want to let you know that the changed CustomerEffortScore component is causing an issue in Google Listings and Ads extension that make use of the component. See issue woocommerce/google-listings-and-ads#1836.

I noticed that the https://github.com/woocommerce/woocommerce/blob/16386238cccdb2dfe2197832d0c169c3df261958/packages/js/customer-effort-score/README.md is outdated and does not match the code in https://github.com/woocommerce/woocommerce/blob/16386238cccdb2dfe2197832d0c169c3df261958/packages/js/customer-effort-score/src/customer-effort-score.tsx. Could you get it updated please? It would be really helpful for us who use the component.

Will there be a new npm package version release for https://www.npmjs.com/package/@woocommerce/customer-effort-score?

puntope · 2023-01-03T05:14:45Z

is causing an issue in Google Listings and Ads

I would suggest to do the next tweaks to make the component backwards compatible:

Make title parameter optional. In case it's not set fallback to __( 'Please share your feedback', 'woocommerce' )
Name firstQuestion as label
Name secondQuestion as secondLabel or labelSecondQuestion
Only show the second question if it's defined by the user.
Add the required new params in the propTypes

joelclimbsthings · 2023-01-03T23:50:05Z

Thanks @ecgan and @puntope . Good observations. Looking at this now, and I'll try to get this prioritized.

puntope · 2023-01-04T10:32:34Z

Here you can find a PR I did yesterday. I guess that covers the main pain point which is to have second Option as not mandatory and the fallback for the title

#36270

joelclimbsthings added 6 commits November 18, 2022 16:43

Reworking CES code to support second question for settings event.

1a34baa

Implementing partial support in setup task, exception being simple ce…

e73bd34

…s score component

Adding intro text and minor fixes to ces modal

688cd9e

Style and typo fixes

8b9422b

Implementing on generic ces events within CustomerEffortScoreTracks.php

4fa37b0

Implement additional questions in all CES events

cecdc1e

github-actions bot added focus: react admin package: @woocommerce/customer-effort-score issues related to @woocommerce/customer-effort-score plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 22, 2022

joelclimbsthings marked this pull request as draft November 22, 2022 23:32

Adding changelogs

a623c5b

joelclimbsthings self-assigned this Nov 23, 2022

joelclimbsthings marked this pull request as ready for review November 23, 2022 01:56

joelclimbsthings requested a review from a team November 23, 2022 01:56

joelclimbsthings commented Nov 23, 2022

View reviewed changes

octaedro requested review from octaedro and removed request for a team November 23, 2022 13:00

octaedro reviewed Nov 23, 2022

View reviewed changes

plugins/woocommerce-admin/client/two-column-tasks/completed-header.tsx Outdated Show resolved Hide resolved

octaedro reviewed Nov 23, 2022

View reviewed changes

plugins/woocommerce-admin/client/customer-effort-score-tracks/data/actions.js Outdated Show resolved Hide resolved

octaedro reviewed Nov 23, 2022

View reviewed changes

joelclimbsthings added 4 commits November 23, 2022 12:40

Replacing typo score with firstScore and simplifying logic via feedback

07da554

Repairing JSDOC for object arguments

1b088f3

Fixing linting issues

dc95f14

Updating customer effort score tests

28d7ca3

joelclimbsthings requested a review from octaedro November 23, 2022 22:16

octaedro approved these changes Nov 24, 2022

View reviewed changes

joelclimbsthings merged commit 4db5c0d into trunk Nov 29, 2022

joelclimbsthings deleted the add/35124-ces-add-question branch November 29, 2022 16:16

github-actions bot added this to the 7.3.0 milestone Nov 29, 2022

joelclimbsthings mentioned this pull request Nov 29, 2022

Add/35129 product mvp ces #35652

Merged

8 tasks

ecgan mentioned this pull request Jan 2, 2023

Customer effort score prompt is showing undefined woocommerce/google-listings-and-ads#1836

Closed

puntope mentioned this pull request Jan 3, 2023

Make secondQuestion and title params optional in CES Prompt #36270

Merged

8 tasks

joelclimbsthings mentioned this pull request Jan 3, 2023

Changes in CES component are not backwards compatible #36278

Open

3 tasks

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

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

Closed

Add additional question to CES modal #35680

Add additional question to CES modal #35680

Uh oh!

Conversation

joelclimbsthings commented Nov 22, 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:

Screenshots

How to test the changes in this Pull Request:

Change settings

Add attribute

Add product category

Add product tag

Add new product

Update product

Update order

Search

Import products

Filter Analytics

Setup task list

Other information:

FOR PR REVIEWER ONLY:

Uh oh!

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

Uh oh!

Test Results Summary

Uh oh!

joelclimbsthings Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

octaedro 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!

pmcpinto Nov 24, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

octaedro left a comment

Choose a reason for hiding this comment

Uh oh!

joelclimbsthings commented Nov 23, 2022

Uh oh!

octaedro left a comment

Choose a reason for hiding this comment

Uh oh!

ecgan commented Jan 2, 2023

Uh oh!

puntope commented Jan 3, 2023

Uh oh!

joelclimbsthings commented Jan 3, 2023

Uh oh!

puntope commented Jan 4, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

joelclimbsthings commented Nov 22, 2022 •

edited

Loading

github-actions bot commented Nov 22, 2022 •

edited

Loading

puntope commented Jan 4, 2023 •

edited

Loading