Move remaining CES-related components to @woocommerce/customer-effort-score (#37316)

* Add @woocommerce/tracks to dev dependencies
* Move remaining CES-related components to @woocommerce/customer-effort-score
* Update imports in woocommerce/client/admin

packages/js/customer-effort-score/changelog/update-move-remaining-ces-to-package

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Move additional components to @woocommerce/customer-effort-score.

packages/js/customer-effort-score/package.json

@@ -51,6 +51,7 @@
 		"@woocommerce/eslint-plugin": "workspace:*",
 		"@woocommerce/internal-style-build": "workspace:*",
 		"@woocommerce/navigation": "workspace:*",
+		"@woocommerce/tracks": "workspace:*",
 		"@wordpress/browserslist-config": "wp-6.0",
 		"concurrently": "^7.0.0",
 		"css-loader": "^3.6.0",

packages/js/customer-effort-score/src/components/customer-effort-score-modal-container/index.tsx

@@ -3,18 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	CustomerFeedbackModal,
-	STORE_KEY,
-} from '@woocommerce/customer-effort-score';
-import { recordEvent } from '@woocommerce/tracks';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
+import { createElement } from '@wordpress/element';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
  */
-import { getStoreAgeInWeeks } from './utils';
-import { ADMIN_INSTALL_TIMESTAMP_OPTION_NAME } from './constants';
+import { CustomerFeedbackModal } from '../';
+import { getStoreAgeInWeeks } from '../../utils';
+import { STORE_KEY } from '../../store';
+import { ADMIN_INSTALL_TIMESTAMP_OPTION_NAME } from '../../constants';
 
 export const PRODUCT_MVP_CES_ACTION_OPTION_NAME =
 	'woocommerce_ces_product_mvp_ces_action';

packages/js/customer-effort-score/src/components/customer-effort-score-tracks-container/index.js

@@ -4,17 +4,15 @@
 import { useEffect } from 'react';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
-import {
-	QUEUE_OPTION_NAME,
-	STORE_KEY,
-} from '@woocommerce/customer-effort-score';
+import { createElement, Fragment } from '@wordpress/element';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
-import CustomerEffortScoreTracks from './customer-effort-score-tracks';
+import { CustomerEffortScoreTracks } from '../';
+import { QUEUE_OPTION_NAME, STORE_KEY } from '../../store';
 
 /**
  * Maps the queue of CES tracks surveys to CustomerEffortScoreTracks
@@ -27,7 +25,7 @@ import CustomerEffortScoreTracks from './customer-effort-score-tracks';
  * @param {boolean}  props.resolving  Whether the queue is resolving.
  * @param {Function} props.clearQueue Sets up clearing of the queue on the next page load.
  */
-function CustomerEffortScoreTracksContainer( {
+function _CustomerEffortScoreTracksContainer( {
 	queue,
 	resolving,
 	clearQueue,
@@ -67,7 +65,7 @@ function CustomerEffortScoreTracksContainer( {
 	);
 }
 
-CustomerEffortScoreTracksContainer.propTypes = {
+_CustomerEffortScoreTracksContainer.propTypes = {
 	/**
 	 * The queue of CES tracks surveys to display.
 	 */
@@ -82,7 +80,7 @@ CustomerEffortScoreTracksContainer.propTypes = {
 	clearQueue: PropTypes.func,
 };
 
-export default compose(
+export const CustomerEffortScoreTracksContainer = compose(
 	withSelect( ( select ) => {
 		const { getCesSurveyQueue, isResolving } = select( STORE_KEY );
 		const queue = getCesSurveyQueue();
@@ -109,4 +107,4 @@ export default compose(
 			},
 		};
 	} )
-)( CustomerEffortScoreTracksContainer );
+)( _CustomerEffortScoreTracksContainer );

packages/js/customer-effort-score/src/components/customer-effort-score-tracks/index.js

@@ -1,26 +1,24 @@
 /**
  * External dependencies
  */
-import { useState } from '@wordpress/element';
 import PropTypes from 'prop-types';
-import { recordEvent } from '@woocommerce/tracks';
-import {
-	ALLOW_TRACKING_OPTION_NAME,
-	CustomerEffortScore,
-} from '@woocommerce/customer-effort-score';
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { createElement, useState } from '@wordpress/element';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
 import { __ } from '@wordpress/i18n';
+import { recordEvent } from '@woocommerce/tracks';
 
 /**
  * Internal dependencies
  */
+import { CustomerEffortScore } from '../';
 import {
-	SHOWN_FOR_ACTIONS_OPTION_NAME,
 	ADMIN_INSTALL_TIMESTAMP_OPTION_NAME,
-} from './constants';
-import { getStoreAgeInWeeks } from './utils';
+	ALLOW_TRACKING_OPTION_NAME,
+	SHOWN_FOR_ACTIONS_OPTION_NAME,
+} from '../../constants';
+import { getStoreAgeInWeeks } from '../../utils';
 
 /**
  * A CustomerEffortScore wrapper that uses tracks to track the selected
@@ -43,7 +41,7 @@ import { getStoreAgeInWeeks } from './utils';
  * @param {Function} props.updateOptions      Function to update options.
  * @param {Function} props.createNotice       Function to create a snackbar.
  */
-function CustomerEffortScoreTracks( {
+function _CustomerEffortScoreTracks( {
 	action,
 	trackProps,
 	title,
@@ -176,7 +174,7 @@ function CustomerEffortScoreTracks( {
 	);
 }
 
-CustomerEffortScoreTracks.propTypes = {
+_CustomerEffortScoreTracks.propTypes = {
 	/**
 	 * The action name sent to Tracks.
 	 */
@@ -219,7 +217,7 @@ CustomerEffortScoreTracks.propTypes = {
 	createNotice: PropTypes.func,
 };
 
-export default compose(
+export const CustomerEffortScoreTracks = compose(
 	withSelect( ( select ) => {
 		const { getOption, hasFinishedResolution } =
 			select( OPTIONS_STORE_NAME );
@@ -262,4 +260,4 @@ export default compose(
 			createNotice,
 		};
 	} )
-)( CustomerEffortScoreTracks );
+)( _CustomerEffortScoreTracks );

packages/js/customer-effort-score/src/components/index.ts

@@ -0,0 +1,8 @@
+export * from './customer-effort-score';
+export * from './customer-effort-score-modal-container';
+export * from './customer-effort-score-tracks';
+export * from './customer-effort-score-tracks-container';
+export * from './customer-feedback-simple';
+export * from './customer-feedback-modal';
+export * from './product-mvp-feedback-modal';
+export * from './feedback-modal';

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

@@ -1 +1,7 @@
+export const ADMIN_INSTALL_TIMESTAMP_OPTION_NAME =
+	'woocommerce_admin_install_timestamp';
+
 export const ALLOW_TRACKING_OPTION_NAME = 'woocommerce_allow_tracking';
+
+export const SHOWN_FOR_ACTIONS_OPTION_NAME =
+	'woocommerce_ces_shown_for_actions';

packages/js/customer-effort-score/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-customer-effort-score-exit-page-tracker';

packages/js/customer-effort-score/src/index.ts

@@ -1,9 +1,5 @@
-export * from './components/customer-effort-score';
-export * from './components/customer-feedback-simple';
-export * from './components/customer-feedback-modal';
-export * from './components/product-mvp-feedback-modal';
-export * from './components/feedback-modal';
-export * from './hooks/use-customer-effort-score-exit-page-tracker';
-export * from './store';
-export * from './utils/customer-effort-score-exit-page';
+export * from './components';
 export * from './constants';
+export * from './hooks';
+export * from './store';
+export * from './utils';

packages/js/customer-effort-score/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './customer-effort-score-exit-page';
+export * from './get-store-age-in-weeks';

plugins/woocommerce-admin/client/customer-effort-score-tracks/constants.ts

@@ -1,4 +0,0 @@
-export const SHOWN_FOR_ACTIONS_OPTION_NAME =
-	'woocommerce_ces_shown_for_actions';
-export const ADMIN_INSTALL_TIMESTAMP_OPTION_NAME =
-	'woocommerce_admin_install_timestamp';

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

@@ -1,3 +0,0 @@
-export { default as CustomerEffortScoreTracks } from './customer-effort-score-tracks';
-export { default as CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks-container';
-export * from './customer-effort-score-modal-container.tsx';

plugins/woocommerce-admin/client/customer-effort-score-tracks/product-mvp-ces-footer.tsx

@@ -9,6 +9,7 @@ import { WooFooterItem } from '@woocommerce/admin-layout';
 import { Pill } from '@woocommerce/components';
 import {
 	ALLOW_TRACKING_OPTION_NAME,
+	SHOWN_FOR_ACTIONS_OPTION_NAME,
 	STORE_KEY,
 } from '@woocommerce/customer-effort-score';
 import { OPTIONS_STORE_NAME } from '@woocommerce/data';
@@ -17,7 +18,6 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
  * Internal dependencies
  */
 import './product-mvp-ces-footer.scss';
-import { SHOWN_FOR_ACTIONS_OPTION_NAME } from './constants';
 
 export const PRODUCT_MVP_CES_ACTION_OPTION_NAME =
 	'woocommerce_ces_product_mvp_ces_action';

plugins/woocommerce-admin/client/homescreen/constants.js

@@ -9,9 +9,3 @@ export const WELCOME_MODAL_DISMISSED_OPTION_NAME =
  */
 export const WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME =
 	'woocommerce_welcome_from_calypso_modal_dismissed';
-
-/**
- * WooCommerce Admin installation timestamp option name.
- */
-export const WOOCOMMERCE_ADMIN_INSTALL_TIMESTAMP_OPTION_NAME =
-	'woocommerce_admin_install_timestamp';

plugins/woocommerce-admin/client/index.js

@@ -3,6 +3,7 @@
  */
 import '@wordpress/notices';
 import { render } from '@wordpress/element';
+import { CustomerEffortScoreTracksContainer } from '@woocommerce/customer-effort-score';
 import {
 	withCurrentUserHydration,
 	withSettingsHydration,
@@ -14,7 +15,6 @@ import {
 import './stylesheets/_index.scss';
 import { getAdminSetting } from '~/utils/admin-settings';
 import { PageLayout, EmbedLayout, PrimaryLayout as NoticeArea } from './layout';
-import { CustomerEffortScoreTracksContainer } from './customer-effort-score-tracks';
 import { EmbeddedBodyLayout } from './embedded-body-layout';
 import { WcAdminPaymentsGatewaysBannerSlot } from './payments/payments-settings-banner-slotfill';
 import { WcAdminConflictErrorSlot } from './settings/conflict-error-slotfill.js';

plugins/woocommerce-admin/client/layout/index.js

@@ -17,7 +17,10 @@ import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { get, isFunction, identity, memoize } from 'lodash';
 import { parse } from 'qs';
-import { triggerExitPageCesSurvey } from '@woocommerce/customer-effort-score';
+import {
+	CustomerEffortScoreModalContainer,
+	triggerExitPageCesSurvey,
+} from '@woocommerce/customer-effort-score';
 import { getHistory, getQuery } from '@woocommerce/navigation';
 import {
 	PLUGINS_STORE_NAME,
@@ -38,7 +41,6 @@ import { Header } from '../header';
 import { Footer } from './footer';
 import Notices from './notices';
 import TransientNotices from './transient-notices';
-import { CustomerEffortScoreModalContainer } from '../customer-effort-score-tracks';
 import { getAdminSetting } from '~/utils/admin-settings';
 import '~/activity-panel';
 import '~/mobile-banner';

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

@@ -10,8 +10,11 @@ import { OPTIONS_STORE_NAME, WCDataSelector, WEEK } from '@woocommerce/data';
 import { Button, Card, CardHeader } from '@wordpress/components';
 import { Text } from '@woocommerce/experimental';
 import {
+	ADMIN_INSTALL_TIMESTAMP_OPTION_NAME,
+	ALLOW_TRACKING_OPTION_NAME,
 	CustomerFeedbackModal,
 	CustomerFeedbackSimple,
+	SHOWN_FOR_ACTIONS_OPTION_NAME,
 } from '@woocommerce/customer-effort-score';
 import { __ } from '@wordpress/i18n';
 
@@ -27,11 +30,7 @@ type TaskListCompletedHeaderProps = {
 	customerEffortScore: boolean;
 };
 
-const ADMIN_INSTALL_TIMESTAMP_OPTION_NAME =
-	'woocommerce_admin_install_timestamp';
-const SHOWN_FOR_ACTIONS_OPTION_NAME = 'woocommerce_ces_shown_for_actions';
 const CUSTOMER_EFFORT_SCORE_ACTION = 'store_setup';
-const ALLOW_TRACKING_OPTION_NAME = 'woocommerce_allow_tracking';
 
 function getStoreAgeInWeeks( adminInstallTimestamp: number ) {
 	if ( adminInstallTimestamp === 0 ) {

plugins/woocommerce/changelog/update-move-remaining-ces-to-package

@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Move additional CES-related components to @woocommerce/customer-effort-score.