Display change metrics feature tour.

assets/js/components/KeyMetrics/ChangeMetricsLink.js

@@ -33,6 +33,7 @@ import Link from '../Link';
 import PencilIcon from '../../../svg/icons/pencil-alt.svg';
 import { trackEvent } from '../../util';
 import useViewContext from '../../hooks/useViewContext';
+import { useChangeMetricsFeatureTourEffect } from './hooks/useChangeMetricsFeatureTourEffect';
 const { useSelect, useDispatch } = Data;
 
 export default function ChangeMetricsLink() {
@@ -48,7 +49,12 @@ export default function ChangeMetricsLink() {
 		trackEvent( `${ viewContext }_kmw`, 'change_metrics' );
 	}, [ setValue, viewContext ] );
 
-	if ( ! Array.isArray( keyMetrics ) || ! keyMetrics?.length > 0 ) {
+	const renderChangeMetricLink =
+		Array.isArray( keyMetrics ) || keyMetrics?.length > 0;
+
+	useChangeMetricsFeatureTourEffect( renderChangeMetricLink );
+
+	if ( ! renderChangeMetricLink ) {
 		return null;
 	}
 

assets/js/components/KeyMetrics/hooks/useChangeMetricsFeatureTourEffect.js

@@ -0,0 +1,65 @@
+/**
+ * Change metrics feature tour hook.
+ *
+ * Site Kit by Google, Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { CORE_SITE } from '../../../googlesitekit/datastore/site/constants';
+import { CORE_USER } from '../../../googlesitekit/datastore/user/constants';
+import sharedKeyMetrics from '../../../feature-tours/shared-key-metrics';
+const { useSelect, useDispatch } = Data;
+
+/**
+ * Triggers on demand tour for shared key metrics if all conditions are met.
+ *
+ * @since n.e.x.t
+ *
+ * @param {boolean} renderChangeMetricLink If metric link meets the conditions to render.
+ */
+export const useChangeMetricsFeatureTourEffect = ( renderChangeMetricLink ) => {
+	const keyMetricsSetupCompletedByUserID = useSelect( ( select ) =>
+		select( CORE_SITE ).getKeyMetricsSetupCompletedByUserID()
+	);
+	const currentUserID = useSelect( ( select ) =>
+		select( CORE_USER ).getID()
+	);
+	const { triggerOnDemandTour } = useDispatch( CORE_USER );
+
+	useEffect( () => {
+		const isUserEligibleForTour =
+			Number.isInteger( keyMetricsSetupCompletedByUserID ) &&
+			Number.isInteger( currentUserID ) &&
+			keyMetricsSetupCompletedByUserID > 0 &&
+			currentUserID !== keyMetricsSetupCompletedByUserID;
+
+		if ( renderChangeMetricLink && isUserEligibleForTour ) {
+			triggerOnDemandTour( sharedKeyMetrics );
+		}
+	}, [
+		renderChangeMetricLink,
+		keyMetricsSetupCompletedByUserID,
+		currentUserID,
+		triggerOnDemandTour,
+	] );
+};

assets/js/feature-tours/shared-key-metrics.js

@@ -0,0 +1,56 @@
+/**
+ * Site Kit by Google, Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/*
+ * Internal dependencies
+ */
+import {
+	VIEW_CONTEXT_MAIN_DASHBOARD,
+	VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+	VIEW_CONTEXT_ENTITY_DASHBOARD,
+	VIEW_CONTEXT_ENTITY_DASHBOARD_VIEW_ONLY,
+} from '../googlesitekit/constants';
+import { isFeatureEnabled } from '../features';
+
+const sharedKeyMetrics = {
+	slug: 'sharedKeyMetrics',
+	contexts: [
+		VIEW_CONTEXT_MAIN_DASHBOARD,
+		VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+		VIEW_CONTEXT_ENTITY_DASHBOARD,
+		VIEW_CONTEXT_ENTITY_DASHBOARD_VIEW_ONLY,
+	],
+	gaEventCategory: ( viewContext ) => `${ viewContext }_shared_key-metrics`,
+	checkRequirements: () => isFeatureEnabled( 'userInput' ),
+	steps: [
+		{
+			target: '.googlesitekit-km-change-metrics-cta',
+			title: __( 'Personalize your key metrics', 'google-site-kit' ),
+			content: __(
+				'Another admin has set up these tailored metrics for your site. Click here to personalize them.',
+				'google-site-kit'
+			),
+			placement: 'bottom-start',
+		},
+	],
+};
+
+export default sharedKeyMetrics;

assets/js/googlesitekit/datastore/site/info.js

@@ -36,9 +36,16 @@ import { normalizeURL, untrailingslashit } from '../../../util';
 
 const { createRegistrySelector } = Data;
 
-function getSiteInfoProperty( propName ) {
+function getSiteInfoProperty( propName, castToBool = false ) {
 	return createRegistrySelector( ( select ) => () => {
 		const siteInfo = select( CORE_SITE ).getSiteInfo() || {};
+
+		// Added to convert keyMetricsSetupCompleted user ID to
+		// boolean, for flexibility it is made as parameter.
+		if ( castToBool && undefined !== siteInfo[ propName ] ) {
+			return !! siteInfo[ propName ];
+		}
+
 		return siteInfo[ propName ];
 	} );
 }
@@ -112,14 +119,15 @@ export const actions = {
 	 * Sets the `keyMetricsSetupCompleted` boolean value.
 	 *
 	 * @since 1.108.0
+	 * @since n.e.x.t Changed boolean to number since value is holding user ID.
 	 *
-	 * @param {boolean} keyMetricsSetupCompleted Whether key metrics setup is completed.
+	 * @param {number} keyMetricsSetupCompleted Positive integer if key metrics setup is completed, otherwise 0.
 	 * @return {Object} Redux-style action.
 	 */
 	setKeyMetricsSetupCompleted( keyMetricsSetupCompleted ) {
 		invariant(
-			typeof keyMetricsSetupCompleted === 'boolean',
-			'keyMetricsSetupCompleted must be a boolean.'
+			typeof keyMetricsSetupCompleted === 'number',
+			'keyMetricsSetupCompleted must be a number.'
 		);
 
 		return {
@@ -162,6 +170,7 @@ export const reducer = ( state, { payload, type } ) => {
 				pluginBasename,
 				productBasePaths,
 				keyMetricsSetupCompleted,
+				keyMetricsSetupCompletedByUserID,
 			} = payload.siteInfo;
 
 			return {
@@ -194,6 +203,7 @@ export const reducer = ( state, { payload, type } ) => {
 					pluginBasename,
 					productBasePaths,
 					keyMetricsSetupCompleted,
+					keyMetricsSetupCompletedByUserID,
 				},
 			};
 		}
@@ -271,6 +281,7 @@ export const resolvers = {
 			pluginBasename,
 			productBasePaths,
 			keyMetricsSetupCompleted,
+			keyMetricsSetupCompletedByUserID,
 		} = global._googlesitekitBaseData;
 
 		const {
@@ -308,6 +319,7 @@ export const resolvers = {
 			pluginBasename,
 			productBasePaths,
 			keyMetricsSetupCompleted,
+			keyMetricsSetupCompletedByUserID,
 		} );
 	},
 };
@@ -769,6 +781,17 @@ export const selectors = {
 	 */
 	getPluginBasename: getSiteInfoProperty( 'pluginBasename' ),
 
+	/**
+	 * Get the `userID` of the user who setup Key Metrics widget if present.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @return {number} `userID` of the user who did initial setup of the Key Metrics widget, if setup was done, otherwise `0`.
+	 */
+	getKeyMetricsSetupCompletedByUserID: getSiteInfoProperty(
+		'keyMetricsSetupCompleted'
+	),
+
 	/**
 	 * Determines whether the current WordPress site has the minimum required version.
 	 * Currently, the minimum required version is 5.2.
@@ -816,7 +839,8 @@ export const selectors = {
 	 * @return {(boolean)} `true` if the Key Metrics widget has been setup, otherwise `false`.
 	 */
 	isKeyMetricsSetupCompleted: getSiteInfoProperty(
-		'keyMetricsSetupCompleted'
+		'keyMetricsSetupCompleted',
+		true
 	),
 };
 

assets/js/googlesitekit/datastore/site/info.test.js

@@ -147,53 +147,47 @@ describe( 'core/site site info', () => {
 
 		describe( 'setKeyMetricsSetupCompleted', () => {
 			it( 'sets the keyMetricsSetupCompleted property', () => {
-				registry
-					.dispatch( CORE_SITE )
-					.setKeyMetricsSetupCompleted( true );
+				registry.dispatch( CORE_SITE ).setKeyMetricsSetupCompleted( 1 );
 
 				expect(
 					registry.select( CORE_SITE ).isKeyMetricsSetupCompleted()
 				).toBe( true );
 
-				registry
-					.dispatch( CORE_SITE )
-					.setKeyMetricsSetupCompleted( false );
+				registry.dispatch( CORE_SITE ).setKeyMetricsSetupCompleted( 0 );
 
 				expect(
 					registry.select( CORE_SITE ).isKeyMetricsSetupCompleted()
 				).toBe( false );
 			} );
 
-			it( 'requires a boolean argument', () => {
+			it( 'requires a number argument', () => {
 				expect( () => {
 					registry
 						.dispatch( CORE_SITE )
 						.setKeyMetricsSetupCompleted();
-				} ).toThrow( 'keyMetricsSetupCompleted must be a boolean.' );
+				} ).toThrow( 'keyMetricsSetupCompleted must be a number.' );
 
 				expect( () => {
 					registry
 						.dispatch( CORE_SITE )
 						.setKeyMetricsSetupCompleted( undefined );
-				} ).toThrow( 'keyMetricsSetupCompleted must be a boolean.' );
+				} ).toThrow( 'keyMetricsSetupCompleted must be a number.' );
 
 				expect( () => {
 					registry
 						.dispatch( CORE_SITE )
-						.setKeyMetricsSetupCompleted( 0 );
-				} ).toThrow( 'keyMetricsSetupCompleted must be a boolean.' );
+						.setKeyMetricsSetupCompleted( true );
+				} ).toThrow( 'keyMetricsSetupCompleted must be a number.' );
 
 				expect( () => {
 					registry
 						.dispatch( CORE_SITE )
-						.setKeyMetricsSetupCompleted( true );
+						.setKeyMetricsSetupCompleted( 1 );
 
 					registry
 						.dispatch( CORE_SITE )
-						.setKeyMetricsSetupCompleted( false );
-				} ).not.toThrow(
-					'keyMetricsSetupCompleted must be a boolean.'
-				);
+						.setKeyMetricsSetupCompleted( 0 );
+				} ).not.toThrow( 'keyMetricsSetupCompleted must be a number.' );
 			} );
 		} );
 	} );
@@ -371,6 +365,10 @@ describe( 'core/site site info', () => {
 			[ 'getUpdateCoreURL', 'updateCoreURL' ],
 			[ 'getTimezone', 'timezone' ],
 			[ 'getPostTypes', 'postTypes' ],
+			[
+				'getKeyMetricsSetupCompletedByUserID',
+				'keyMetricsSetupCompleted',
+			],
 			[ 'isUsingProxy', 'usingProxy' ],
 			[ 'isAMP', 'ampMode' ],
 			[ 'isPrimaryAMP', 'ampMode' ],

assets/js/googlesitekit/datastore/user/key-metrics.js

@@ -139,7 +139,7 @@ const baseActions = {
 			// TODO: We should find a better way of keeping this value synced.
 			yield registry
 				.dispatch( CORE_SITE )
-				.setKeyMetricsSetupCompleted( true );
+				.setKeyMetricsSetupCompleted( 1 ); // Return positive integer
 		}
 
 		return { response, error };
@@ -400,7 +400,7 @@ const baseSelectors = {
 
 				if (
 					! isAuthenticated &&
-					module.shareable &&
+					module?.shareable &&
 					! canViewSharedModule( slug )
 				) {
 					return false;

includes/Core/Key_Metrics/Key_Metrics.php

@@ -82,12 +82,13 @@ public function register() {
 	 * Adds the status of the Key Metrics widget setup to the inline JS data.
 	 *
 	 * @since 1.108.0
+	 * @since n.e.x.t Return casted to integer.
 	 *
 	 * @param array $data Inline JS data.
 	 * @return array Filtered $data.
 	 */
 	private function inline_js_base_data( $data ) {
-		$data['keyMetricsSetupCompleted'] = (bool) $this->key_metrics_setup_completed->get();
+		$data['keyMetricsSetupCompleted'] = (int) $this->key_metrics_setup_completed->get();
 
 		return $data;
 	}

includes/Core/Key_Metrics/Key_Metrics_Setup_Completed.php

@@ -24,16 +24,17 @@ class Key_Metrics_Setup_Completed extends Setting {
 	/**
 	 * The option_name for this setting.
 	 */
-	const OPTION = 'googlesitekit_key_metrics_setup_completed';
+	const OPTION = 'googlesitekit_key_metrics_setup_completed_by_user_id';
 
 	/**
 	 * Gets the expected value type.
 	 *
 	 * @since 1.108.0
+	 * @since n.e.x.t Type changed to integer.
 	 *
 	 * @return string The type name.
 	 */
 	protected function get_type() {
-		return 'boolean';
+		return 'integer';
 	}
 }

includes/Core/Key_Metrics/REST_Key_Metrics_Controller.php

@@ -140,7 +140,13 @@ protected function get_rest_routes() {
 									array( 'status' => 400 )
 								);
 							}
-							$this->key_metrics_setup_completed->set( true );
+
+							$key_metrics_setup_already_done_by_user = $this->key_metrics_setup_completed->get();
+							if ( empty( $key_metrics_setup_already_done_by_user ) ) {
+								$current_user_id = get_current_user_id();
+
+								$this->key_metrics_setup_completed->set( $current_user_id );
+							}
 						}
 
 						$this->settings->merge( $data['settings'] );

includes/Core/User_Input/REST_User_Input_Controller.php

@@ -152,7 +152,13 @@ private function get_rest_routes() {
 							$answers = $this->user_input->set_answers( $data['settings'] );
 
 							if ( ! empty( $answers['purpose']['values'] ) ) {
-								$this->key_metrics_setup_completed->set( true );
+								$key_metrics_setup_already_done_by_user = $this->key_metrics_setup_completed->get();
+
+								if ( empty( $key_metrics_setup_already_done_by_user ) ) {
+									$current_user_id = get_current_user_id();
+
+									$this->key_metrics_setup_completed->set( $current_user_id );
+								}
 							}
 
 							$response = rest_ensure_response( $answers );