Enhance/8156 connect analytics cta

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/ConnectAnalyticsCTAWidget.js

@@ -0,0 +1,102 @@
+/**
+ * ConnectAnalyticsCTAWidget component.
+ *
+ * Site Kit by Google, Copyright 2024 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 Data from 'googlesitekit-data';
+import AudienceConnectAnalyticsCTAGraphic from '../../../../../../svg/graphics/audience-connect-analytics-cta-graphic.svg';
+import AudienceConnectAnalyticsCTAGraphicTablet from '../../../../../../svg/graphics/audience-connect-analytics-cta-graphic-tablet.svg';
+import Link from '../../../../../components/Link';
+import { CORE_MODULES } from '../../../../../googlesitekit/modules/datastore/constants';
+import useActivateModuleCallback from '../../../../../hooks/useActivateModuleCallback';
+import {
+	BREAKPOINT_TABLET,
+	useBreakpoint,
+} from '../../../../../hooks/useBreakpoint';
+
+const { useSelect } = Data;
+
+export default function ConnectAnalyticsCTAWidget( { Widget } ) {
+	const breakpoint = useBreakpoint();
+
+	const isTabletBreakpoint = breakpoint === BREAKPOINT_TABLET;
+
+	const handleConnectModule = useActivateModuleCallback( 'analytics-4' );
+
+	const Icon = useSelect( ( select ) =>
+		select( CORE_MODULES ).getModuleIcon( 'analytics-4' )
+	);
+
+	const content = isTabletBreakpoint
+		? __(
+				'Google Analytics is disconnected, your audience metrics can’t be displayed.',
+				'google-site-kit'
+		  )
+		: __(
+				'Google Analytics is disconnected, your audience metrics can’t be displayed',
+				'google-site-kit'
+		  );
+
+	return (
+		<Widget noPadding>
+			<div className="googlesitekit-widget--connectAnalyticsCTA">
+				<div className="googlesitekit-audience-connect-analytics-cta">
+					{ Icon && (
+						<div className="googlesitekit-audience-connect-analytics-cta__icon">
+							<Icon width="32" height="32" />
+						</div>
+					) }
+
+					<div className="googlesitekit-audience-connect-analytics-cta__content">
+						<p className="googlesitekit-audience-connect-analytics-cta__text">
+							{ content }{ ' ' }
+						</p>
+						<Link secondary onClick={ handleConnectModule }>
+							{ __(
+								'Connect Google Analytics',
+								'google-site-kit'
+							) }
+						</Link>
+					</div>
+				</div>
+				<div className="googlesitekit-audience-connect-analytics-cta-graphic">
+					{ isTabletBreakpoint ? (
+						<AudienceConnectAnalyticsCTAGraphicTablet />
+					) : (
+						<AudienceConnectAnalyticsCTAGraphic />
+					) }
+				</div>
+			</div>
+		</Widget>
+	);
+}
+
+ConnectAnalyticsCTAWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+};

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/ConnectAnalyticsCTAWidget.stories.js

@@ -0,0 +1,56 @@
+/**
+ * ConnectAnalyticsCTAWidget Component Stories.
+ *
+ * Site Kit by Google, Copyright 2024 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 WithRegistrySetup from '../../../../../../../tests/js/WithRegistrySetup';
+import { provideModuleRegistrations } from '../../../../../../../tests/js/utils';
+import { withWidgetComponentProps } from '../../../../../googlesitekit/widgets/util';
+import ConnectAnalyticsCTAWidget from './ConnectAnalyticsCTAWidget';
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'audienceSegmentationConnectAnalytics'
+)( ConnectAnalyticsCTAWidget );
+
+function Template() {
+	return <WidgetWithComponentProps />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'ConnectAnalyticsCTAWidget';
+Default.scenario = {
+	label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/ConnectAnalyticsCTAWidget',
+};
+
+export default {
+	title: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/ConnectAnalyticsCTAWidget',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				provideModuleRegistrations( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/modules/analytics-4/components/audience-segmentation/dashboard/index.js

@@ -24,6 +24,7 @@ export { default as AudienceTilesWidget } from './AudienceTilesWidget';
 export { default as AudienceTooltipMessage } from './AudienceTooltipMessage';
 export { default as AudienceSelectionPanel } from './AudienceSelectionPanel';
 export { default as AudienceAreaFooter } from './AudienceAreaFooter';
-export { default as InfoNoticeWidget } from '../dashboard/InfoNoticeWidget';
 export { default as ChangeGroupsLink } from './ChangeGroupsLink';
+export { default as ConnectAnalyticsCTAWidget } from './ConnectAnalyticsCTAWidget';
+export { default as InfoNoticeWidget } from './InfoNoticeWidget';
 export { default as InfoNotice } from './InfoNotice';

assets/js/modules/analytics-4/index.js

@@ -84,8 +84,10 @@ import {
 import { ModulePopularPagesWidgetGA4 } from './components/module';
 import {
 	AudienceTilesWidget,
+	ConnectAnalyticsCTAWidget,
 	InfoNoticeWidget,
 } from './components/audience-segmentation/dashboard';
+import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
 
 export { registerStore } from './datastore';
 
@@ -138,6 +140,33 @@ export const registerWidgets = ( widgets ) => {
 		[ AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION ]
 	);
 
+	widgets.registerWidget(
+		'audienceConnectAnalyticsCTA',
+		{
+			Component: ConnectAnalyticsCTAWidget,
+			width: widgets.WIDGET_WIDTHS.FULL,
+			priority: 1,
+			wrapWidget: false,
+			modules: [ 'analytics-4' ],
+			isActive: ( select ) => {
+				const isAnalyticsConnected =
+					select( CORE_MODULES ).isModuleConnected( 'analytics-4' );
+
+				/**
+				 * TODO: This widget should be shown only if the audience group
+				 * is set up for the current user. This should be fixed once
+				 * the audience settings become accessible without `analytics-4`
+				 * module being connected.
+				 * See: https://github.com/google/site-kit-wp/issues/8810 for
+				 * more details.
+				 */
+
+				return ! isAnalyticsConnected;
+			},
+		},
+		[ AREA_MAIN_DASHBOARD_TRAFFIC_AUDIENCE_SEGMENTATION ]
+	);
+
 	widgets.registerWidget(
 		'analyticsAudienceInfoNotice',
 		{

assets/sass/components/analytics-4/_index.scss

@@ -21,6 +21,7 @@
 @import "googlesitekit-analytics-settings-module";
 @import "googlesitekit-analytics-setup-module";
 @import "googlesitekit-analytics-enhanced-measurement";
+@import "audience-segmentation/googlesitekit-audience-connect-analytics-cta";
 @import "audience-segmentation/googlesitekit-audience-segmentation-setup-cta";
 @import "audience-segmentation/googlesitekit-audience-segmentation-tile";
 @import "audience-segmentation/googlesitekit-audience-segmentation-tile-error";

assets/sass/components/analytics-4/audience-segmentation/_googlesitekit-audience-connect-analytics-cta.scss

@@ -0,0 +1,107 @@
+/**
+ * Audience Segmentation ConnectAnalyticsCTAWidget styles.
+ *
+ * Site Kit by Google, Copyright 2024 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.
+ */
+
+.googlesitekit-plugin {
+
+	.googlesitekit-widget--connectAnalyticsCTA {
+		display: flex;
+		flex-direction: column;
+
+		@media (min-width: $bp-nonTablet) {
+			align-items: center;
+			flex: 1;
+			flex-direction: row;
+			padding-inline: 36px;
+		}
+
+		.googlesitekit-audience-connect-analytics-cta {
+			display: flex;
+			flex-direction: column;
+			padding-block: 20px;
+			padding-inline: $grid-gap-phone;
+
+			@media (min-width: $bp-nonMobile) {
+				align-items: center;
+				flex-direction: row;
+				padding-inline: $grid-gap-desktop;
+			}
+
+			@media (min-width: $bp-nonTablet) {
+				flex: 0 1 auto;
+				margin-right: $grid-gap-desktop;
+				padding: 0;
+			}
+
+			.googlesitekit-audience-connect-analytics-cta__icon {
+				display: flex;
+				margin-bottom: 6px;
+
+				@media (min-width: $bp-nonMobile) {
+					justify-content: right;
+					margin-bottom: 0;
+				}
+			}
+
+			.googlesitekit-audience-connect-analytics-cta__content {
+
+				@media (min-width: $bp-nonMobile) {
+					margin-left: 20px;
+				}
+
+				@media (min-width: $bp-nonTablet) {
+					margin-left: $grid-gap-desktop;
+				}
+
+				.googlesitekit-audience-connect-analytics-cta__text {
+					margin: 0 0 4px;
+
+					@media (min-width: $bp-nonMobile) {
+						display: inline;
+					}
+
+					@media (min-width: $bp-nonTablet) {
+						display: block;
+					}
+				}
+			}
+		}
+
+		.googlesitekit-audience-connect-analytics-cta-graphic {
+			display: flex;
+			justify-content: center;
+			padding-inline: $grid-gap-desktop;
+
+			svg {
+				max-height: 128px;
+			}
+
+			@media (min-width: $bp-nonMobile) {
+				padding-inline: 0;
+
+				svg {
+					height: 150px;
+					max-height: unset;
+				}
+			}
+
+			@media (min-width: $bp-nonTablet) {
+				flex: 1 1 auto;
+			}
+		}
+	}
+}

assets/sass/config/_variables.scss

@@ -273,6 +273,7 @@ $bp-xsmallOnly: $width-xsmall - 1 + px;
 $bp-mobileOnly: $width-tablet - 1 + px;
 $bp-tablet: $width-tablet + px;
 $bp-nonMobile: $width-tablet + 1 + px;
+$bp-nonTablet: $width-desktop + 1 + px;
 $bp-wpAdminBarTablet: $width-wpAdminBarTablet + px;
 $bp-desktop: $width-desktop + px;
 $bp-xlarge: $width-xlarge + px;