diff --git a/plugins/woocommerce-admin/packages/customer-effort-score/package.json b/plugins/woocommerce-admin/packages/customer-effort-score/package.json index 6008d02ff4a..b1461b2e7c6 100644 --- a/plugins/woocommerce-admin/packages/customer-effort-score/package.json +++ b/plugins/woocommerce-admin/packages/customer-effort-score/package.json @@ -1,7 +1,7 @@ { "name": "@woocommerce/customer-effort-score", - "version": "0.0.0", - "description": "WooCommerce utility to measuring user satisfaction.", + "version": "1.0.0", + "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" diff --git a/plugins/woocommerce-admin/packages/customer-effort-score/src/index.js b/plugins/woocommerce-admin/packages/customer-effort-score/src/index.js index 48e2e6e0405..919c53b5187 100644 --- a/plugins/woocommerce-admin/packages/customer-effort-score/src/index.js +++ b/plugins/woocommerce-admin/packages/customer-effort-score/src/index.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { noop } from 'lodash'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } 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; } diff --git a/plugins/woocommerce-admin/src/Loader.php b/plugins/woocommerce-admin/src/Loader.php index 4bee1e024a8..956a4458058 100644 --- a/plugins/woocommerce-admin/src/Loader.php +++ b/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 );