Bug/10034 current selection

assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.js

@@ -60,46 +60,32 @@ function ConfirmSitePurposeChangeModal( {
 	const viewContext = useViewContext();
 	const [ isSaving, setIsSaving ] = useState( false );
 
-	const includeConversionTailoredMetrics = useSelect( ( select ) => {
-		const isGA4Connected =
-			select( CORE_MODULES ).isModuleConnected( 'analytics-4' );
-
-		if ( ! isGA4Connected ) {
-			return false;
-		}
-
-		const haveConversionEventsForTailoredMetrics =
-			select(
-				MODULES_ANALYTICS_4
-			).haveConversionEventsForTailoredMetrics();
-
-		if ( haveConversionEventsForTailoredMetrics ) {
-			return select( MODULES_ANALYTICS_4 ).getDetectedEvents() || [];
-		}
-
-		return [];
-	} );
+	const includeConversionTailoredMetrics = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).shouldIncludeConversionTailoredMetrics()
+	);
 
-	const newMetrics = useSelect( ( select ) => {
-		return select( CORE_USER ).getAnswerBasedMetrics(
+	const newMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getAnswerBasedMetrics(
 			null,
 			includeConversionTailoredMetrics
-		);
-	} );
+		)
+	);
 
 	const savedPurpose = useSelect( ( select ) =>
-		select( CORE_FORMS ).getValue(
-			FORM_USER_INPUT_QUESTION_SNAPSHOT,
-			USER_INPUT_QUESTIONS_PURPOSE
-		)
+		select( CORE_USER ).getSavedUserInputSettings()
 	);
 
 	const currentMetrics = useSelect( ( select ) => {
-		if ( savedPurpose === undefined ) {
+		if (
+			savedPurpose === undefined ||
+			! savedPurpose?.purpose?.values?.length
+		) {
 			return [];
 		}
 
-		return select( CORE_USER ).getAnswerBasedMetrics( savedPurpose[ 0 ] );
+		return select( CORE_USER ).getAnswerBasedMetrics(
+			savedPurpose?.purpose?.values?.[ 0 ]
+		);
 	} );
 
 	const { setValues } = useDispatch( CORE_FORMS );

assets/js/components/KeyMetrics/ConfirmSitePurposeChangeModal.stories.js

@@ -27,6 +27,7 @@ import {
 } from '../../../../tests/js/utils';
 import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
 import { CORE_FORMS } from '../../googlesitekit/datastore/forms/constants';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
 import {
 	FORM_USER_INPUT_QUESTION_SNAPSHOT,
 	USER_INPUT_QUESTIONS_PURPOSE,
@@ -47,6 +48,7 @@ function Template( args ) {
 export const Default = Template.bind( {} );
 Default.storyName = 'ConfirmSitePurposeChangeModal';
 Default.scenario = {
+	// eslint-disable-next-line sitekit/no-storybook-scenario-label
 	label: 'KeyMetrics/ConfirmSitePurposeChangeModal',
 };
 
@@ -67,6 +69,9 @@ export default {
 						scope: 'site',
 					},
 				} );
+				registry
+					.dispatch( CORE_USER )
+					.setUserInputSetting( 'purpose', [ 'sell_products' ] );
 				provideSiteInfo( registry );
 			};
 

assets/js/components/user-input/UserInputPreview.js

@@ -61,6 +61,7 @@ import { hasErrorForAnswer } from './util/validation';
 import Portal from '../Portal';
 import ConfirmSitePurposeChangeModal from '../KeyMetrics/ConfirmSitePurposeChangeModal';
 import { CORE_FORMS } from '../../googlesitekit/datastore/forms/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
 import KeyMetricsSettingsSellProductsSubtleNotification from './KeyMetricsSettingsSellProductsSubtleNotification';
 
 export default function UserInputPreview( props ) {
@@ -113,24 +114,39 @@ export default function UserInputPreview( props ) {
 
 	const { saveUserInputSettings } = useDispatch( CORE_USER );
 
-	const savedPurpose = useSelect( ( select ) =>
+	const savedPurposeSnapshot = useSelect( ( select ) =>
 		select( CORE_FORMS ).getValue(
 			FORM_USER_INPUT_QUESTION_SNAPSHOT,
 			USER_INPUT_QUESTIONS_PURPOSE
 		)
 	);
 
+	const savedPurpose = useSelect( ( select ) =>
+		select( CORE_USER ).getSavedUserInputSettings()
+	);
+
 	const currentMetrics = useSelect( ( select ) => {
-		if ( savedPurpose === undefined ) {
+		if (
+			savedPurpose === undefined ||
+			! savedPurpose?.purpose?.values?.length
+		) {
 			return [];
 		}
 
-		return select( CORE_USER ).getAnswerBasedMetrics( savedPurpose[ 0 ] );
+		return select( CORE_USER ).getAnswerBasedMetrics(
+			savedPurpose?.purpose?.values?.[ 0 ]
+		);
 	} );
 
-	const newMetrics = useSelect( ( select ) => {
-		return select( CORE_USER ).getKeyMetrics();
-	} );
+	const includeConversionTailoredMetrics = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).shouldIncludeConversionTailoredMetrics()
+	);
+	const newMetrics = useSelect( ( select ) =>
+		select( CORE_USER ).getAnswerBasedMetrics(
+			null,
+			includeConversionTailoredMetrics
+		)
+	);
 
 	const { resetUserInputSettings } = useDispatch( CORE_USER );
 	const { setValues } = useDispatch( CORE_FORMS );
@@ -146,7 +162,7 @@ export default function UserInputPreview( props ) {
 		} else {
 			await saveUserInputSettings();
 
-			if ( savedPurpose?.length ) {
+			if ( savedPurposeSnapshot?.length ) {
 				await resetUserInputSettings();
 				setValues( FORM_USER_INPUT_QUESTION_SNAPSHOT, {
 					[ USER_INPUT_QUESTIONS_PURPOSE ]: undefined,

assets/js/modules/analytics-4/datastore/conversion-reporting.js

@@ -305,6 +305,35 @@ export const selectors = {
 		}
 	),
 
+	/**
+	 * Returns the conversion events if detected events are suitable for tailored metrics.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {Array} List of detected conversion events or empty array.
+	 */
+	shouldIncludeConversionTailoredMetrics: createRegistrySelector(
+		( select ) => () => {
+			const isGA4Connected =
+				select( CORE_MODULES ).isModuleConnected( 'analytics-4' );
+
+			if ( ! isGA4Connected ) {
+				return [];
+			}
+
+			const {
+				haveConversionEventsForTailoredMetrics,
+				getDetectedEvents,
+			} = select( MODULES_ANALYTICS_4 );
+
+			if ( haveConversionEventsForTailoredMetrics() ) {
+				return getDetectedEvents() || [];
+			}
+
+			return [];
+		}
+	),
+
 	/**
 	 * Gets conversion events related metrics.
 	 *

assets/js/modules/analytics-4/datastore/conversion-reporting.test.js

@@ -346,6 +346,96 @@ describe( 'modules/analytics-4 conversion-reporting', () => {
 			} );
 		} );
 
+		describe( 'shouldIncludeConversionTailoredMetrics', () => {
+			beforeEach( () => {
+				enabledFeatures.add( 'conversionReporting' );
+
+				provideKeyMetricsUserInputSettings( registry );
+
+				provideModules( registry, [
+					{
+						active: true,
+						connected: true,
+						slug: 'analytics-4',
+					},
+				] );
+
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setDetectedEvents( [] );
+
+				registry.dispatch( CORE_USER ).receiveGetKeyMetricsSettings( {
+					widgetSlugs: [],
+					isWidgetHidden: false,
+				} );
+			} );
+
+			afterEach( () => {
+				enabledFeatures.delete( 'conversionReporting' );
+			} );
+
+			it( 'should return empty array if Analytics module is not connected', () => {
+				provideModules( registry, [
+					{
+						active: true,
+						connected: false,
+						slug: 'analytics-4',
+					},
+				] );
+
+				const shouldIncludeConversionTailoredMetrics = registry
+					.select( MODULES_ANALYTICS_4 )
+					.shouldIncludeConversionTailoredMetrics();
+
+				expect( shouldIncludeConversionTailoredMetrics ).toEqual( [] );
+			} );
+
+			it( 'should return empty array if haveConversionEventsForTailoredMetrics is false', () => {
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setDetectedEvents( [] );
+
+				const haveConversionEventsForTailoredMetrics = registry
+					.select( MODULES_ANALYTICS_4 )
+					.haveConversionEventsForTailoredMetrics();
+
+				// Since by default site purpose is `publish_blog` and we have no events detected
+				// (or detected events are not matching this site purpose), haveConversionEventsForTailoredMetrics
+				// will be false.
+				expect( haveConversionEventsForTailoredMetrics ).toEqual(
+					false
+				);
+
+				const shouldIncludeConversionTailoredMetrics = registry
+					.select( MODULES_ANALYTICS_4 )
+					.shouldIncludeConversionTailoredMetrics();
+
+				expect( shouldIncludeConversionTailoredMetrics ).toEqual( [] );
+			} );
+
+			it( 'should return detected events haveConversionEventsForTailoredMetrics is true and there are detected events', () => {
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setDetectedEvents( [ ENUM_CONVERSION_EVENTS.CONTACT ] );
+
+				const haveConversionEventsForTailoredMetrics = registry
+					.select( MODULES_ANALYTICS_4 )
+					.haveConversionEventsForTailoredMetrics();
+
+				expect( haveConversionEventsForTailoredMetrics ).toEqual(
+					true
+				);
+
+				const shouldIncludeConversionTailoredMetrics = registry
+					.select( MODULES_ANALYTICS_4 )
+					.shouldIncludeConversionTailoredMetrics();
+
+				expect( shouldIncludeConversionTailoredMetrics ).toEqual( [
+					ENUM_CONVERSION_EVENTS.CONTACT,
+				] );
+			} );
+		} );
+
 		describe( 'haveLostEventsForCurrentMetrics', () => {
 			beforeEach( () => {
 				enabledFeatures.add( 'conversionReporting' );