Key Metrics “Connect GA” CTA

assets/js/components/KeyMetrics/ConnectGA4CTAWidget.js

@@ -0,0 +1,208 @@
+/**
+ * ConnectGA4CTA component.
+ *
+ * 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';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import { SpinnerButton } from 'googlesitekit-components';
+import KeyMetricsCTAContent from './KeyMetricsCTAContent';
+import KeyMetricsCTAFooter from './KeyMetricsCTAFooter';
+import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
+import { CORE_USER } from '../../googlesitekit/datastore/user/constants';
+import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
+import { AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY } from '../../googlesitekit/widgets/default-areas';
+import {
+	FORM_SETUP,
+	MODULES_ANALYTICS,
+} from '../../modules/analytics/datastore/constants';
+import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
+import { CORE_FORMS } from '../../googlesitekit/datastore/forms/constants';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import useActivateModuleCallback from '../../hooks/useActivateModuleCallback';
+import useCompleteModuleActivationCallback from '../../hooks/useCompleteModuleActivationCallback';
+import { useDebounce } from '../../hooks/useDebounce';
+import { snapshotAllStores } from '../../googlesitekit/data/create-snapshot-store';
+const { useSelect, useDispatch } = Data;
+
+export default function ConnectGA4CTAWidget( { Widget, WidgetNull } ) {
+	const DISMISSED_ITEM_KEY = 'key-metrics-connect-ga4-cta-widget';
+
+	const isCTADismissed = useSelect( ( select ) =>
+		select( CORE_USER ).isItemDismissed( DISMISSED_ITEM_KEY )
+	);
+	const isUserInputCompleted = useSelect( ( select ) =>
+		select( CORE_USER ).isUserInputCompleted()
+	);
+	const isGA4Connected = useSelect( ( select ) =>
+		select( CORE_MODULES ).isModuleConnected( 'analytics-4' )
+	);
+	const ga4DependantKeyMetrics = useSelect( ( select ) => {
+		const keyMetrics = select( CORE_USER ).getKeyMetrics();
+		const widgets = select( CORE_WIDGETS ).getWidgets(
+			AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY
+		);
+
+		if ( ! keyMetrics || ! widgets ) {
+			return [];
+		}
+
+		return widgets.filter(
+			( { slug, modules } ) =>
+				keyMetrics.includes( slug ) && modules.includes( 'analytics-4' )
+		);
+	} );
+	const isAnalyticsActive = useSelect( ( select ) =>
+		select( CORE_MODULES ).isModuleActive( 'analytics' )
+	);
+	const isNavigatingToReauthURL = useSelect( ( select ) => {
+		const adminReauthURL = select( MODULES_ANALYTICS ).getAdminReauthURL();
+
+		if ( ! adminReauthURL ) {
+			return false;
+		}
+
+		return select( CORE_LOCATION ).isNavigatingTo( adminReauthURL );
+	} );
+	const isActivatingAnalytics = useSelect( ( select ) =>
+		select( CORE_MODULES ).isFetchingSetModuleActivation(
+			'analytics',
+			true
+		)
+	);
+	const settingsURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' )
+	);
+	const isAnalyticsConnected = useSelect( ( select ) =>
+		select( CORE_MODULES ).isModuleConnected( 'analytics' )
+	);
+	const connectGA4URL = `${ settingsURL }#connected-services/analytics/edit`;
+	const isNavigatingToGA4URL = useSelect( ( select ) =>
+		select( CORE_LOCATION ).isNavigatingTo( connectGA4URL )
+	);
+
+	const { dismissItem } = useDispatch( CORE_USER );
+	const { setValues } = useDispatch( CORE_FORMS );
+	const { navigateTo } = useDispatch( CORE_LOCATION );
+
+	const activateAnalytics = useActivateModuleCallback( 'analytics' );
+	const completeAnalyticsActivation =
+		useCompleteModuleActivationCallback( 'analytics' );
+
+	const handleCTAClick = useCallback( async () => {
+		if ( ! isAnalyticsConnected ) {
+			if ( isAnalyticsActive ) {
+				completeAnalyticsActivation();
+			} else {
+				activateAnalytics();
+			}
+		} else if ( ! isGA4Connected ) {
+			setValues( FORM_SETUP, {
+				// Pre-enable GA4 controls.
+				enableGA4: true,
+				// Enable tooltip highlighting GA4 property select.
+				enableGA4PropertyTooltip: true,
+			} );
+
+			await snapshotAllStores();
+
+			navigateTo( `${ settingsURL }#connected-services/analytics/edit` );
+		}
+	}, [
+		activateAnalytics,
+		completeAnalyticsActivation,
+		isAnalyticsActive,
+		isAnalyticsConnected,
+		isGA4Connected,
+		navigateTo,
+		setValues,
+		settingsURL,
+	] );
+
+	const [ inProgress, setInProgress ] = useState( false );
+
+	/*
+	 * Using debounce here because the spinner has to render across two separate calls.
+	 * Rather than risk it flickering on and off in between the activation call completing and
+	 * the navigate call starting, we will just set a debounce to keep the spinner for 3 seconds.
+	 */
+	const debouncedSetInProgress = useDebounce( setInProgress, 3000 );
+
+	useEffect( () => {
+		if (
+			isActivatingAnalytics ||
+			isNavigatingToReauthURL ||
+			isNavigatingToGA4URL
+		) {
+			setInProgress( true );
+		} else {
+			debouncedSetInProgress( false );
+		}
+	}, [
+		isActivatingAnalytics,
+		isNavigatingToReauthURL,
+		debouncedSetInProgress,
+		isNavigatingToGA4URL,
+	] );
+
+	if (
+		isCTADismissed ||
+		! isUserInputCompleted ||
+		isGA4Connected ||
+		ga4DependantKeyMetrics.length < 3
+	) {
+		return <WidgetNull />;
+	}
+
+	return (
+		<Widget
+			noPadding
+			Footer={ () => (
+				<KeyMetricsCTAFooter
+					onActionClick={ () => dismissItem( DISMISSED_ITEM_KEY ) }
+				/>
+			) }
+		>
+			<KeyMetricsCTAContent
+				className="googlesitekit-km-connect-ga4-cta"
+				title={ __(
+					'Google Analytics is disconnected',
+					'google-site-kit'
+				) }
+				description={ __(
+					'Metrics cannot be displayed without Google Analytics',
+					'google-site-kit'
+				) }
+				actions={
+					<SpinnerButton
+						onClick={ handleCTAClick }
+						isSaving={ inProgress }
+					>
+						{ __( 'Connect Google Analytics', 'google-site-kit' ) }
+					</SpinnerButton>
+				}
+			/>
+		</Widget>
+	);
+}

assets/js/components/KeyMetrics/ConnectGA4CTAWidget.stories.js

@@ -0,0 +1,113 @@
+/**
+ * ConnectGA4CTAWidget Component Stories.
+ *
+ * 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.
+ */
+
+/**
+ * Internal dependencies
+ */
+import {
+	CORE_USER,
+	KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+	KM_ANALYTICS_LOYAL_VISITORS,
+	KM_ANALYTICS_NEW_VISITORS,
+	KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+} from '../../googlesitekit/datastore/user/constants';
+import { CORE_WIDGETS } from '../../googlesitekit/widgets/datastore/constants';
+import { AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY } from '../../googlesitekit/widgets/default-areas';
+import { CONTEXT_MAIN_DASHBOARD_KEY_METRICS } from '../../googlesitekit/widgets/default-contexts';
+import { provideKeyMetrics, provideModules } from '../../../../tests/js/utils';
+import { withWidgetComponentProps } from '../../googlesitekit/widgets/util';
+import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import ConnectGA4CTAWidget from './ConnectGA4CTAWidget';
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'keyMetricsConnectGA4CTA'
+)( ConnectGA4CTAWidget );
+
+const Template = () => <WidgetWithComponentProps />;
+
+export const Default = Template.bind( {} );
+Default.storyName = 'ConnectGA4CTAWidget';
+Default.scenario = {
+	label: 'KeyMetrics/ConnectGA4CTAWidget',
+	delay: 250,
+};
+
+export default {
+	title: 'Key Metrics/ConnectGA4CTAWidget',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
+				global._googlesitekitUserData.isUserInputCompleted = true;
+
+				provideModules( registry, [
+					{
+						slug: 'analytics-4',
+						active: false,
+						connected: false,
+					},
+				] );
+
+				const keyMetricWidgets = [
+					KM_ANALYTICS_LOYAL_VISITORS,
+					KM_ANALYTICS_NEW_VISITORS,
+					KM_ANALYTICS_TOP_TRAFFIC_SOURCE,
+					KM_ANALYTICS_ENGAGED_TRAFFIC_SOURCE,
+				];
+
+				provideKeyMetrics( registry, {
+					widgetSlugs: keyMetricWidgets,
+				} );
+
+				registry
+					.dispatch( CORE_WIDGETS )
+					.registerWidgetArea(
+						AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
+						{
+							title: 'Key metrics',
+						}
+					);
+				registry
+					.dispatch( CORE_WIDGETS )
+					.assignWidgetArea(
+						AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY,
+						CONTEXT_MAIN_DASHBOARD_KEY_METRICS
+					);
+
+				keyMetricWidgets.forEach( ( slug ) => {
+					registry.dispatch( CORE_WIDGETS ).registerWidget( slug, {
+						Component: () => <div>Hello test.</div>,
+						modules: [ 'analytics-4' ],
+					} );
+					registry
+						.dispatch( CORE_WIDGETS )
+						.assignWidget(
+							slug,
+							AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY
+						);
+				} );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};