Key Metrics “Connect GA” CTA

assets/js/components/KeyMetrics/KeyMetricsCTAContent.js

@@ -0,0 +1,87 @@
+/**
+ * KeyMetricsCTAContent 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.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { Cell, Grid, Row } from '../../material-components';
+import GhostCardsSVG from './GhostCards';
+import { BREAKPOINT_SMALL, useBreakpoint } from '../../hooks/useBreakpoint';
+
+export default function KeyMetricsCTAContent( {
+	className,
+	title,
+	description,
+	actions,
+} ) {
+	const breakpoint = useBreakpoint();
+	const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
+
+	return (
+		<section
+			className={ classnames(
+				'googlesitekit-setup__wrapper',
+				'googlesitekit-setup__wrapper--key-metrics-setup-cta',
+				className
+			) }
+		>
+			<Grid>
+				<Row>
+					<Cell smSize={ 6 } mdSize={ 5 } lgSize={ 6 }>
+						<div className="googlesitekit-widget-key-metrics-text__wrapper">
+							<h3 className="googlesitekit-publisher-win__title">
+								{ title }
+							</h3>
+							<p>{ description }</p>
+						</div>
+						{ isMobileBreakpoint && (
+							<Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
+								<GhostCardsSVG />
+							</Cell>
+						) }
+						<div className="googlesitekit-widget-key-metrics-actions__wrapper">
+							{ actions }
+						</div>
+					</Cell>
+					{ ! isMobileBreakpoint && (
+						<Cell
+							className="googlesitekit-widget-key-metrics-svg__wrapper"
+							smSize={ 6 }
+							mdSize={ 3 }
+							lgSize={ 6 }
+						>
+							<GhostCardsSVG />
+						</Cell>
+					) }
+				</Row>
+			</Grid>
+		</section>
+	);
+}
+
+KeyMetricsCTAContent.propTypes = {
+	title: PropTypes.string,
+	description: PropTypes.string,
+	actions: PropTypes.node,
+};

assets/js/components/KeyMetrics/KeyMetricsCTAFooter.js

@@ -0,0 +1,49 @@
+/**
+ * KeyMetricsCTAFooter 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.
+ */
+
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { Cell, Row } from '../../material-components';
+import Link from '../Link';
+
+export default function KeyMetricsCTAFooter( { onActionClick = () => {} } ) {
+	return (
+		<Row className="googlesitekit-widget-key-metrics-footer">
+			<Cell size={ 12 }>
+				<Link onClick={ onActionClick }>
+					{ __( 'Maybe later', 'google-site-kit' ) }
+				</Link>
+			</Cell>
+		</Row>
+	);
+}
+
+KeyMetricsCTAFooter.propTypes = {
+	onActionClick: PropTypes.func,
+};

assets/js/components/KeyMetrics/KeyMetricsSetupCTAWidget.js

@@ -25,20 +25,20 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import { Button } from 'googlesitekit-components';
-import { Cell, Grid, Row } from '../../material-components';
-import GhostCardsSVG from './GhostCards';
+import Link from '../Link';
+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 { useFeature } from '../../hooks/useFeature';
-import Link from '../Link';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
-import { BREAKPOINT_SMALL, useBreakpoint } from '../../hooks/useBreakpoint';
 const { useSelect } = Data;
 
 function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
@@ -57,9 +57,6 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
 		select( CORE_SITE ).getAdminURL( 'googlesitekit-user-input' )
 	);
 
-	const breakpoint = useBreakpoint();
-	const isMobileBreakpoint = breakpoint === BREAKPOINT_SMALL;
-
 	if (
 		! userInputEnabled ||
 		isUserInputCompleted === undefined ||
@@ -70,82 +67,47 @@ function KeyMetricsSetupCTAWidget( { Widget, WidgetNull } ) {
 		return <WidgetNull />;
 	}
 
-	const Footer = () => {
-		return (
-			<Row>
-				<Cell size={ 12 }>
-					{ /*
-					The `onClick` prop is used to ensure consistent styling for the link button across various widgets and banners.
-					In the future, it will be fleshed out with the logic to dismiss the widget.
-					*/ }
-					<Link onClick={ () => {} }>
-						{ __( 'Maybe later', 'google-site-kit' ) }
-					</Link>
-				</Cell>
-			</Row>
-		);
-	};
-
 	return (
-		<Widget noPadding Footer={ Footer }>
-			<section className="googlesitekit-setup__wrapper googlesitekit-setup__wrapper--key-metrics-setup-cta">
-				<Grid>
-					<Row>
-						<Cell smSize={ 6 } mdSize={ 5 } lgSize={ 6 }>
-							<div className="googlesitekit-widget-key-metrics-text__wrapper">
-								<h3 className="googlesitekit-publisher-win__title">
-									{ __(
-										'Get metrics and suggestions tailored to your specific goals',
-										'google-site-kit'
-									) }
-								</h3>
-								<p>
-									{ __(
-										'Answer 3 questions to show relevant stats for your site',
-										'google-site-kit'
-									) }
-								</p>
-							</div>
-							{ isMobileBreakpoint && (
-								<Cell className="googlesitekit-widget-key-metrics-svg__wrapper">
-									<GhostCardsSVG />
-								</Cell>
+		<Widget
+			noPadding
+			Footer={ () => {
+				/*
+				The `onClick` prop is used to ensure consistent styling for the link button across various widgets and banners.
+				In the future, it will be fleshed out with the logic to dismiss the widget.
+				*/
+				return <KeyMetricsCTAFooter onActionClick={ () => {} } />;
+			} }
+		>
+			<KeyMetricsCTAContent
+				title={ __(
+					'Get metrics and suggestions tailored to your specific goals',
+					'google-site-kit'
+				) }
+				description={ __(
+					'Answer 3 questions to show relevant stats for your site',
+					'google-site-kit'
+				) }
+				actions={
+					<Fragment>
+						<Button
+							className="googlesitekit-key-metrics-cta-button"
+							href={ ctaLink }
+						>
+							{ __( 'Get tailored metrics', 'google-site-kit' ) }
+						</Button>
+						{ /*
+							The `onClick` prop is used to ensure consistent styling for the link button across various widgets and banners.
+							In the future, it will also serve the purpose of adding a track event.
+						*/ }
+						<Link onClick={ () => {} }>
+							{ __(
+								'I’ll pick metrics myself',
+								'google-site-kit'
 							) }
-							<div className="googlesitekit-widget-key-metrics-actions__wrapper">
-								<Button
-									className="googlesitekit-key-metrics-cta-button"
-									href={ ctaLink }
-								>
-									{ __(
-										'Get tailored metrics',
-										'google-site-kit'
-									) }
-								</Button>
-								{ /*
-								The `onClick` prop is used to ensure consistent styling for the link button across various widgets and banners.
-								In the future, it will also serve the purpose of adding a track event.
-								*/ }
-								<Link onClick={ () => {} }>
-									{ __(
-										'I’ll pick metrics myself',
-										'google-site-kit'
-									) }
-								</Link>
-							</div>
-						</Cell>
-						{ ! isMobileBreakpoint && (
-							<Cell
-								className="googlesitekit-widget-key-metrics-svg__wrapper"
-								smSize={ 6 }
-								mdSize={ 3 }
-								lgSize={ 6 }
-							>
-								<GhostCardsSVG />
-							</Cell>
-						) }
-					</Row>
-				</Grid>
-			</section>
+						</Link>
+					</Fragment>
+				}
+			/>
 		</Widget>
 	);
 }

assets/js/components/KeyMetrics/test-utils.js

@@ -0,0 +1,62 @@
+/**
+ * Key Metrics test utility functions.
+ *
+ * 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_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';
+
+/**
+ * Provides key metric widgets registration data to the given registry.
+ *
+ * This is a temporary utility until a solidified solution is implemented to effortlessly provide
+ * widget registrations to the registry.
+ *
+ * @since n.e.x.t
+ * @see {@link https://github.com/google/site-kit-wp/issues/7264} Initiative to implement a utility to provide widget registrations.
+ *
+ * @param {Object} registry The registry to set up.
+ * @param {Object} widgets  Object containing options mapped to widget slugs.
+ */
+export const provideKeyMetricsWidgetRegistrations = ( registry, widgets ) => {
+	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
+		);
+
+	Object.keys( widgets ).forEach( ( slug ) => {
+		registry.dispatch( CORE_WIDGETS ).registerWidget( slug, {
+			Component: () => <div>Hello test.</div>,
+			...widgets[ slug ],
+		} );
+
+		registry
+			.dispatch( CORE_WIDGETS )
+			.assignWidget( slug, AREA_MAIN_DASHBOARD_KEY_METRICS_PRIMARY );
+	} );
+};

assets/js/googlesitekit/datastore/user/user-info.js

@@ -264,7 +264,7 @@ export const resolvers = {
 	*isUserInputCompleted() {
 		const { select } = yield Data.commonActions.getRegistry();
 
-		if ( select( CORE_USER ).isUserInputCompleted() ) {
+		if ( undefined !== select( CORE_USER ).isUserInputCompleted() ) {
 			return;
 		}