Enhance/8156 connect analytics cta

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

@@ -45,6 +45,7 @@ import ConnectGA4CTAWidget from '../../modules/analytics-4/components/widgets/Co
 import {
 	AudienceAreaFooter,
 	ChangeGroupsLink,
+	ConnectAnalyticsCTATileWidget,
 } from '../../modules/analytics-4/components/audience-segmentation/dashboard';
 import { isFeatureEnabled } from '../../features';
 
@@ -160,6 +161,35 @@ export function registerDefaults( widgetsAPI ) {
 			},
 			CONTEXT_MAIN_DASHBOARD_TRAFFIC
 		);
+
+		widgetsAPI.registerWidget(
+			'audienceConnectAnalyticsCTA',
+			{
+				Component: ConnectAnalyticsCTATileWidget,
+				width: widgetsAPI.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 ]
+		);
 	}
 
 	widgetsAPI.registerWidgetArea(

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

@@ -0,0 +1,102 @@
+/**
+ * ConnectAnalyticsCTATileWidget 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 ConnectAnalyticsCTATileWidget( { 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--connectAnalyticsCTATile">
+				<div className="googlesitekit-audience-connect-analytics-cta-tile">
+					{ Icon && (
+						<div className="googlesitekit-audience-connect-analytics-cta-tile__icon">
+							<Icon width="32" height="32" />
+						</div>
+					) }
+
+					<div className="googlesitekit-audience-connect-analytics-cta-tile__content">
+						<p className="googlesitekit-audience-connect-analytics-cta-tile__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>
+	);
+}
+
+ConnectAnalyticsCTATileWidget.propTypes = {
+	Widget: PropTypes.elementType.isRequired,
+};

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

@@ -0,0 +1,57 @@
+/**
+ * ConnectAnalyticsCTATileWidget 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 ConnectAnalyticsCTATileWidget from './ConnectAnalyticsCTATileWidget';
+
+const WidgetWithComponentProps = withWidgetComponentProps(
+	'audienceSegmentationConnectAnalytics'
+)( ConnectAnalyticsCTATileWidget );
+
+function Template() {
+	return <WidgetWithComponentProps />;
+}
+
+export const Default = Template.bind( {} );
+Default.storyName = 'ConnectAnalyticsCTATileWidget';
+Default.scenario = {
+	label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/ConnectAnalyticsCTATileWidget',
+	delay: 250,
+};
+
+export default {
+	title: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/ConnectAnalyticsCTATileWidget',
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				provideModuleRegistrations( registry );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

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

@@ -25,5 +25,6 @@ export { default as AudienceTooltipMessage } from './AudienceTooltipMessage';
 export { default as AudienceSelectionPanel } from './AudienceSelectionPanel';
 export { default as AudienceAreaFooter } from './AudienceAreaFooter';
 export { default as ChangeGroupsLink } from './ChangeGroupsLink';
+export { default as ConnectAnalyticsCTATileWidget } from './ConnectAnalyticsCTATileWidget';
 export { default as InfoNoticeWidget } from './InfoNoticeWidget';
 export { default as InfoNotice } from './InfoNotice';

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-tile";
 @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-tile.scss

@@ -0,0 +1,107 @@
+/**
+ * Audience Segmentation ConnectAnalyticsCTATileWidget 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--connectAnalyticsCTATile {
+		display: flex;
+		flex-direction: column;
+
+		@media (min-width: $minWidth-desktop) {
+			align-items: center;
+			flex: 1;
+			flex-direction: row;
+			padding-inline: 36px;
+		}
+
+		.googlesitekit-audience-connect-analytics-cta-tile {
+			display: flex;
+			flex-direction: column;
+			padding-block: 20px;
+			padding-inline: $grid-gap-phone;
+
+			@media (min-width: $minWidth-tablet) {
+				align-items: center;
+				flex-direction: row;
+				padding-inline: $grid-gap-desktop;
+			}
+
+			@media (min-width: $minWidth-desktop) {
+				flex: 0 1 auto;
+				margin-right: $grid-gap-desktop;
+				padding: 0;
+			}
+
+			.googlesitekit-audience-connect-analytics-cta-tile__icon {
+				display: flex;
+				margin-bottom: 6px;
+
+				@media (min-width: $minWidth-tablet) {
+					justify-content: right;
+					margin-bottom: 0;
+				}
+			}
+
+			.googlesitekit-audience-connect-analytics-cta-tile__content {
+
+				@media (min-width: $minWidth-tablet) {
+					margin-left: 20px;
+				}
+
+				@media (min-width: $minWidth-desktop) {
+					margin-left: $grid-gap-desktop;
+				}
+
+				.googlesitekit-audience-connect-analytics-cta-tile__text {
+					margin: 0 0 4px;
+
+					@media (min-width: $minWidth-tablet) {
+						display: inline;
+					}
+
+					@media (min-width: $minWidth-desktop) {
+						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: $minWidth-tablet) {
+				padding-inline: 0;
+
+				svg {
+					height: 150px;
+					max-height: unset;
+				}
+			}
+
+			@media (min-width: $minWidth-desktop) {
+				flex: 1 1 auto;
+			}
+		}
+	}
+}

assets/sass/config/_variables.scss

@@ -277,6 +277,8 @@ $bp-wpAdminBarTablet: $width-wpAdminBarTablet + px;
 $bp-desktop: $width-desktop + px;
 $bp-xlarge: $width-xlarge + px;
 $bp-xxlarge: $width-xxlarge + px;
+$minWidth-tablet: $width-tablet + 1 + px;
+$minWidth-desktop: $width-desktop + 1 + px;
 
 // Specific for WP Dashboard
 $bp-wpdb1: 800px;