Fix small issues with customer effort score package (https://github.com/woocommerce/woocommerce-admin/pull/5754)

* Add package dependencies and bump version

* don't use lodash's noop

* Use useEffect instead of changing state right in the render :-O

* Add dependencies for ces to Loader.php

* undo add dependencies for ces to Loader.php

* 🎶 found a typo

Co-authored-by: Rebecca Scott <me@becdetat.com>

plugins/woocommerce-admin/packages/customer-effort-score/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@woocommerce/customer-effort-score",
-	"version": "0.0.0",
+	"version": "1.0.0",
-	"description": "WooCommerce utility to measuring user satisfaction.",
+	"description": "WooCommerce utility to measure user effort.",
 	"author": "Automattic",
 	"license": "GPL-3.0-or-later",
 	"keywords": [
@@ -21,10 +21,16 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime-corejs2": "7.12.5",
-		"@wordpress/components": "11.0.0",
+		"@testing-library/react": "11.2.2",
+		"@wordpress/components": "^11.1.1",
 		"@wordpress/compose": "^3.22.0",
 		"@wordpress/data": "^4.25.0",
-		"@wordpress/notices": "^2.11.0"
+		"@wordpress/element": "2.13.1",
+		"@wordpress/i18n": "3.11.0",
+		"@wordpress/notices": "^2.11.0",
+		"classnames": "2.2.6",
+		"prop-types": "15.7.2",
+		"react-transition-group": "4.3.0"
 	},
 	"publishConfig": {
 		"access": "public"

plugins/woocommerce-admin/packages/customer-effort-score/src/index.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
+import { useState, useEffect } from '@wordpress/element';
-import { useState } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
@@ -13,6 +12,8 @@ import { withDispatch } from '@wordpress/data';
  */
 import CustomerFeedbackModal from './customer-feedback-modal';
 
+const noop = () => {};
+
 /**
  * Use `CustomerEffortScore` to gather a customer effort score.
  *
@@ -40,7 +41,11 @@ function CustomerEffortScore( {
 	const [ shouldCreateNotice, setShouldCreateNotice ] = useState( true );
 	const [ visible, setVisible ] = useState( false );
 
-	if ( shouldCreateNotice ) {
+	useEffect( () => {
+		if ( ! shouldCreateNotice ) {
+			return;
+		}
+
 		createNotice( 'success', label, {
 			actions: [
 				{
@@ -59,7 +64,9 @@ function CustomerEffortScore( {
 		setShouldCreateNotice( false );
 
 		onNoticeShownCallback();
+	}, [ shouldCreateNotice ] );
 
+	if ( shouldCreateNotice ) {
 		return null;
 	}
 

plugins/woocommerce-admin/src/Loader.php

@@ -367,7 +367,14 @@ class Loader {
 		wp_register_script(
 			'wc-customer-effort-score',
 			self::get_url( 'customer-effort-score/index', 'js' ),
-			array(),
+			array(
+				'wp-components',
+				'wp-compose',
+				'wp-data',
+				'wp-element',
+				'wp-i18n',
+				'wp-notices',
+			),
 			$js_file_version,
 			true
 		);