Merge pull request #7941 from google/7940-km-new-badge

Add key metrics setup new badge

assets/js/components/KeyMetrics/KeyMetricsNewBadge.js

@@ -0,0 +1,45 @@
+/**
+ * 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 Data from 'googlesitekit-data';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import Badge from '../Badge';
+const { useSelect } = Data;
+
+export default function KeyMetricsNewBadge() {
+	// This is necessary to conditionally render the badge
+	// as this component is used in a context where `select` is not in scope.
+	const isNew = useSelect( ( select ) =>
+		select( CORE_SITE ).getKeyMetricsSetupNew()
+	);
+
+	return (
+		isNew && (
+			<Badge
+				className="googlesitekit-new-badge"
+				label={ __( 'New', 'google-site-kit' ) }
+			/>
+		)
+	);
+}

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

@@ -163,6 +163,7 @@ export const reducer = ( state, { payload, type } ) => {
 				pluginBasename,
 				productBasePaths,
 				keyMetricsSetupCompletedBy,
+				keyMetricsSetupNew,
 			} = payload.siteInfo;
 
 			return {
@@ -195,6 +196,7 @@ export const reducer = ( state, { payload, type } ) => {
 					pluginBasename,
 					productBasePaths,
 					keyMetricsSetupCompletedBy,
+					keyMetricsSetupNew,
 				},
 			};
 		}
@@ -272,6 +274,7 @@ export const resolvers = {
 			pluginBasename,
 			productBasePaths,
 			keyMetricsSetupCompletedBy,
+			keyMetricsSetupNew,
 		} = global._googlesitekitBaseData;
 
 		const {
@@ -309,6 +312,7 @@ export const resolvers = {
 			pluginBasename,
 			productBasePaths,
 			keyMetricsSetupCompletedBy,
+			keyMetricsSetupNew,
 		} );
 	},
 };
@@ -781,6 +785,15 @@ export const selectors = {
 		'keyMetricsSetupCompletedBy'
 	),
 
+	/**
+	 * Gets the state of whether or not Key Metrics was recently set up.
+	 *
+	 * @since 1.115.0
+	 *
+	 * @return {boolean} `true` if recently set up, otherwise `false`.
+	 */
+	getKeyMetricsSetupNew: getSiteInfoProperty( 'keyMetricsSetupNew' ),
+
 	/**
 	 * Determines whether the current WordPress site has the minimum required version.
 	 * Currently, the minimum required version is 5.2.

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

@@ -366,6 +366,7 @@ describe( 'core/site site info', () => {
 			[ 'getTimezone', 'timezone' ],
 			[ 'getPostTypes', 'postTypes' ],
 			[ 'getKeyMetricsSetupCompletedBy', 'keyMetricsSetupCompletedBy' ],
+			[ 'getKeyMetricsSetupNew', 'keyMetricsSetupNew' ],
 			[ 'isUsingProxy', 'usingProxy' ],
 			[ 'isAMP', 'ampMode' ],
 			[ 'isPrimaryAMP', 'ampMode' ],

assets/js/googlesitekit/widgets/register-defaults.js

@@ -19,6 +19,7 @@
 /**
  * WordPress dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -41,6 +42,7 @@ import {
 } from '../../components/KeyMetrics';
 import AddMetricCTATile from '../../components/KeyMetrics/AddMetricCTATile';
 import ConnectGA4CTAWidget from '../../modules/analytics-4/components/widgets/ConnectGA4CTAWidget';
+import KeyMetricsNewBadge from '../../components/KeyMetrics/KeyMetricsNewBadge';
 
 const { ...ADDITIONAL_WIDGET_CONTEXTS } = WIDGET_CONTEXTS;
 
@@ -90,7 +92,12 @@ export function registerDefaults( widgetsAPI ) {
 	widgetsAPI.registerWidgetArea(
 		AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
 		{
-			title: __( 'Key metrics', 'google-site-kit' ),
+			title: (
+				<Fragment>
+					{ __( 'Key metrics', 'google-site-kit' ) }
+					<KeyMetricsNewBadge />
+				</Fragment>
+			),
 			subtitle: __(
 				'Track progress towards your goals with tailored metrics',
 				'google-site-kit'

includes/Core/Key_Metrics/Key_Metrics.php

@@ -12,6 +12,7 @@
 
 use Google\Site_Kit\Context;
 use Google\Site_Kit\Core\Storage\Options;
+use Google\Site_Kit\Core\Storage\Transients;
 use Google\Site_Kit\Core\Storage\User_Options;
 use Google\Site_Kit\Core\Util\Method_Proxy_Trait;
 
@@ -50,6 +51,14 @@ class Key_Metrics {
 	 */
 	protected $rest_controller;
 
+	/**
+	 * Key_Metrics_Setup_New instance.
+	 *
+	 * @since 1.115.0
+	 * @var Key_Metrics_Setup_New
+	 */
+	protected $key_metrics_setup_new;
+
 	/**
 	 * Constructor.
 	 *
@@ -62,6 +71,7 @@ class Key_Metrics {
 	public function __construct( Context $context, User_Options $user_options = null, Options $options = null ) {
 		$this->key_metrics_settings           = new Key_Metrics_Settings( $user_options ?: new User_Options( $context ) );
 		$this->key_metrics_setup_completed_by = new Key_Metrics_Setup_Completed_By( $options ?: new Options( $context ) );
+		$this->key_metrics_setup_new          = new Key_Metrics_Setup_New( new Transients( $context ) );
 		$this->rest_controller                = new REST_Key_Metrics_Controller( $this->key_metrics_settings, $this->key_metrics_setup_completed_by );
 	}
 
@@ -73,6 +83,7 @@ public function __construct( Context $context, User_Options $user_options = null
 	public function register() {
 		$this->key_metrics_settings->register();
 		$this->key_metrics_setup_completed_by->register();
+		$this->key_metrics_setup_new->register();
 		$this->rest_controller->register();
 
 		add_filter( 'googlesitekit_inline_base_data', $this->get_method_proxy( 'inline_js_base_data' ) );

includes/Core/Key_Metrics/Key_Metrics_Setup_New.php

@@ -0,0 +1,90 @@
+<?php
+/**
+ * Class Google\Site_Kit\Core\Key_Metrics\Key_Metrics_Setup_New
+ *
+ * @package   Google\Site_Kit\Core\Key_Metrics
+ * @copyright 2023 Google LLC
+ * @license   https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
+ * @link      https://sitekit.withgoogle.com
+ */
+
+namespace Google\Site_Kit\Core\Key_Metrics;
+
+use Google\Site_Kit\Core\Storage\Transients;
+use Google\Site_Kit\Core\Util\Method_Proxy_Trait;
+
+/**
+ * Class for handling Key_Metrics_Setup_New state.
+ *
+ * @since 1.115.0
+ * @access private
+ * @ignore
+ */
+class Key_Metrics_Setup_New {
+
+	use Method_Proxy_Trait;
+
+	const TRANSIENT = 'googlesitekit_key_metrics_setup_new';
+
+	/**
+	 * Transients instance.
+	 *
+	 * @var Transients
+	 */
+	private $transients;
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 1.115.0
+	 *
+	 * @param Transients $transients Transients instance.
+	 */
+	public function __construct( Transients $transients ) {
+		$this->transients = $transients;
+	}
+
+	/**
+	 * Registers functionality through WordPress hooks.
+	 *
+	 * @since 1.115.0
+	 */
+	public function register() {
+		add_action(
+			'add_option_' . Key_Metrics_Setup_Completed_By::OPTION,
+			$this->get_method_proxy( 'mark_setup_completed' ),
+			10,
+			2
+		);
+
+		add_filter( 'googlesitekit_inline_base_data', $this->get_method_proxy( 'inline_js_base_data' ) );
+	}
+
+	/**
+	 * Marks Key Metrics setup as just completed for a limited period of time.
+	 *
+	 * @since 1.115.0
+	 *
+	 * @param string $option Key_Metrics_Setup_Completed_By option name.
+	 * @param mixed  $value  Option value added.
+	 */
+	protected function mark_setup_completed( $option, $value ) {
+		if ( $value ) {
+			$this->transients->set( self::TRANSIENT, true, 2 * WEEK_IN_SECONDS );
+		}
+	}
+
+	/**
+	 * Extends base data with setup new state.
+	 *
+	 * @since 1.115.0
+	 *
+	 * @param array $data Inline base data.
+	 * @return array
+	 */
+	protected function inline_js_base_data( $data ) {
+		$data['keyMetricsSetupNew'] = (bool) $this->transients->get( self::TRANSIENT );
+
+		return $data;
+	}
+}

tests/js/utils.js

@@ -249,6 +249,7 @@ export const provideSiteInfo = ( registry, extraData = {} ) => {
 		],
 		productBasePaths: [ '^/product/' ],
 		keyMetricsSetupCompletedBy: 0,
+		keyMetricsSetupNew: false,
 	};
 
 	registry.dispatch( CORE_SITE ).receiveSiteInfo( {