Enhancement/11459 User Engagement Selection Panel Notices

assets/js/components/email-reporting/UserSettingsSelectionPanel/Notices.js

@@ -0,0 +1,41 @@
+/**
+ * User Settings Selection Notices
+ *
+ * Site Kit by Google, Copyright 2025 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 { Fragment } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import AnalyticsDisconnectedNotice from '@/js/components/email-reporting/notices/AnalyticsDisconnectedNotice';
+import EmailReportingDisabledNotice from '@/js/components/email-reporting/notices/EmailReportingDisabledNotice';
+import EmailReportingDisabledViewOnlyNotice from '@/js/components/email-reporting/notices/EmailReportingDisabledViewOnlyNotice';
+import SetupAnalyticsNotice from '@/js/components/email-reporting/notices/SetupAnalyticsNotice';
+
+export default function Notices() {
+	return (
+		<Fragment>
+			<AnalyticsDisconnectedNotice />
+			<SetupAnalyticsNotice />
+			<EmailReportingDisabledNotice />
+			<EmailReportingDisabledViewOnlyNotice />
+		</Fragment>
+	);
+}

assets/js/components/email-reporting/UserSettingsSelectionPanel/PanelContent.js

@@ -38,6 +38,7 @@ import P from '@/js/components/Typography/P';
 import Typography from '@/js/components/Typography';
 import FrequencySelector from '@/js/components/email-reporting/FrequencySelector';
 import SubscribeActions from '@/js/components/email-reporting/UserSettingsSelectionPanel/SubscribeActions';
+import Notices from './Notices';
 
 export default function PanelContent( {
 	notice,
@@ -57,6 +58,8 @@ export default function PanelContent( {
 			<div className="googlesitekit-user-settings-selection__panel-content">
 				<Header closePanel={ closePanel } />
 
+				<Notices />
+
 				<div className="googlesitekit-user-settings-selection__panel-description">
 					<P type="body" size="small">
 						{ __(

assets/js/components/email-reporting/UserSettingsSelectionPanel/index.stories.js

@@ -24,6 +24,8 @@ import {
 	provideUserAuthentication,
 	provideSiteInfo,
 	provideUserInfo,
+	provideModules,
+	provideUserCapabilities,
 } from '../../../../../tests/js/utils';
 import {
 	VIEW_CONTEXT_MAIN_DASHBOARD,
@@ -34,6 +36,8 @@ import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { USER_SETTINGS_SELECTION_PANEL_OPENED_KEY } from '@/js/components/email-reporting/constants';
 import { Provider as ViewContextProvider } from '@/js/components/Root/ViewContextContext';
 import UserSettingsSelectionPanel from '.';
+import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
+import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 
 function Template( { viewContext } ) {
 	return (
@@ -48,6 +52,11 @@ function Template( { viewContext } ) {
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
 Default.scenario = {};
+Default.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_USER ).receiveGetEmailReportingSettings( {} );
+	},
+};
 
 export const ViewOnly = Template.bind( {} );
 ViewOnly.storyName = 'View-only user';
@@ -65,17 +74,134 @@ Subscribed.args = {
 	},
 };
 
+export const AnalyticsWasConnected = Template.bind( {} );
+AnalyticsWasConnected.storyName =
+	'Analytics disconnected, was connected before';
+AnalyticsWasConnected.args = {
+	setupRegistry: ( registry ) => {
+		provideModules( registry, [
+			{
+				slug: MODULE_SLUG_ANALYTICS_4,
+				active: false,
+				connected: false,
+			},
+		] );
+		registry.dispatch( CORE_USER ).receiveGetEmailReportingSettings( {
+			subscribed: true,
+		} );
+		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
+			enabled: true,
+		} );
+	},
+};
+
+export const AnalyticsWasConnectedViewOnly = Template.bind( {} );
+AnalyticsWasConnectedViewOnly.storyName =
+	'Analytics disconnected, was connected before, view-only user';
+AnalyticsWasConnectedViewOnly.args = {
+	setupRegistry: ( registry ) => {
+		provideModules( registry, [
+			{
+				slug: MODULE_SLUG_ANALYTICS_4,
+				active: false,
+				connected: false,
+			},
+		] );
+		registry.dispatch( CORE_USER ).receiveGetEmailReportingSettings( {
+			subscribed: true,
+		} );
+		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
+			enabled: true,
+		} );
+	},
+	viewContext: VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+};
+
+export const AnalyticsWasNeverConnected = Template.bind( {} );
+AnalyticsWasNeverConnected.storyName =
+	'Analytics disconnected, never connected before';
+AnalyticsWasNeverConnected.args = {
+	setupRegistry: ( registry ) => {
+		provideModules( registry, [
+			{
+				slug: MODULE_SLUG_ANALYTICS_4,
+				active: false,
+				connected: false,
+			},
+		] );
+		registry.dispatch( CORE_USER ).receiveGetEmailReportingSettings( {
+			subscribed: true,
+		} );
+		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
+			enabled: true,
+		} );
+		registry
+			.dispatch( CORE_SITE )
+			.receiveGetWasAnalytics4Connected( { wasConnected: false } );
+	},
+};
+
+export const EmailReportingDisabled = Template.bind( {} );
+EmailReportingDisabled.storyName = 'Email reporting disabled';
+EmailReportingDisabled.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
+			enabled: false,
+		} );
+		registry
+			.dispatch( CORE_SITE )
+			.receiveGetWasAnalytics4Connected( { wasConnected: false } );
+	},
+};
+
+export const EmailReportingDisabledViewOnly = Template.bind( {} );
+EmailReportingDisabledViewOnly.storyName =
+	'Email reporting disabled, view-only user';
+EmailReportingDisabledViewOnly.args = {
+	setupRegistry: ( registry ) => {
+		registry.dispatch( CORE_SITE ).receiveGetEmailReportingSettings( {
+			enabled: false,
+		} );
+		registry
+			.dispatch( CORE_SITE )
+			.receiveGetWasAnalytics4Connected( { wasConnected: false } );
+	},
+	viewContext: VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+};
+
 export default {
-	title: 'EmailReporting/UserSettingsSelectionPanel',
+	title: 'Components/EmailReporting/UserSettingsSelectionPanel',
 	component: UserSettingsSelectionPanel,
 	decorators: [
 		( Story, { args } ) => {
 			function setupRegistry( registry ) {
+				provideModules( registry, [
+					{
+						slug: MODULE_SLUG_ANALYTICS_4,
+						active: true,
+						connected: true,
+					},
+				] );
 				provideUserAuthentication( registry );
+				provideUserCapabilities( registry );
 				provideSiteInfo( registry );
 				provideUserInfo( registry, {
 					wpEmail: 'someone@anybusiness.com',
 				} );
+				registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
+				registry
+					.dispatch( CORE_SITE )
+					.receiveGetWasAnalytics4Connected( { wasConnected: true } );
+				registry
+					.dispatch( CORE_SITE )
+					.receiveGetEmailReportingSettings( {
+						enabled: true,
+					} );
+				registry
+					.dispatch( CORE_USER )
+					.receiveGetEmailReportingSettings( {
+						subscribed: true,
+					} );
 
 				registry
 					.dispatch( CORE_UI )

assets/js/components/email-reporting/AnalyticsDisconnectedNotice.js → assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.js

@@ -33,11 +33,14 @@ import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import useActivateModuleCallback from '@/js/hooks/useActivateModuleCallback';
+import useViewOnly from '@/js/hooks/useViewOnly';
 
 export const EMAIL_REPORTING_ANALYTICS_DISCONNECTED_NOTICE_DISMISSED_ITEM =
 	'email-reporting-analytics-disconnected-notice';
 
 export default function AnalyticsDisconnectedNotice() {
+	const isViewOnly = useViewOnly();
+
 	const isEmailReportingEnabled = useSelect( ( select ) =>
 		select( CORE_SITE ).isEmailReportingEnabled()
 	);
@@ -77,19 +80,32 @@ export default function AnalyticsDisconnectedNotice() {
 		return null;
 	}
 
+	let description = __(
+		'Email reports won’t include Analytics data and metrics',
+		'google-site-kit'
+	);
+
+	if ( isViewOnly ) {
+		description = __(
+			'Email reports won’t include Analytics data and metrics. To fix the issue contact your administrator.',
+			'google-site-kit'
+		);
+	}
+
 	return (
 		<Notice
 			className="googlesitekit-email-reporting__analytics-disconnected-notice"
 			type={ TYPES.WARNING }
 			title={ __( 'Analytics is disconnected', 'google-site-kit' ) }
-			description={ __(
-				'Email reports won’t include Analytics data and metrics',
-				'google-site-kit'
-			) }
-			ctaButton={ {
-				label: __( 'Connect Analytics', 'google-site-kit' ),
-				onClick: activateAnalytics,
-			} }
+			description={ description }
+			ctaButton={
+				isViewOnly
+					? undefined
+					: {
+							label: __( 'Connect Analytics', 'google-site-kit' ),
+							onClick: activateAnalytics,
+					  }
+			}
 			dismissButton={ {
 				label: __( 'Got it', 'google-site-kit' ),
 				onClick: handleDismiss,

assets/js/components/email-reporting/AnalyticsDisconnectedNotice.test.js → assets/js/components/email-reporting/notices/AnalyticsDisconnectedNotice.test.js

@@ -36,11 +36,12 @@ import {
 	provideUserAuthentication,
 	provideModuleRegistrations,
 	provideSiteInfo,
-} from '../../../../tests/js/test-utils';
+} from '../../../../../tests/js/test-utils';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
-import { mockLocation } from '../../../../tests/js/mock-browser-utils';
+import { mockLocation } from '../../../../../tests/js/mock-browser-utils';
+import { VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY } from '@/js/googlesitekit/constants';
 
 describe( 'AnalyticsDisconnectedNotice', () => {
 	mockLocation();
@@ -90,6 +91,29 @@ describe( 'AnalyticsDisconnectedNotice', () => {
 		).toBeInTheDocument();
 	} );
 
+	it( 'renders the view only description without action buttons when the user is view only', () => {
+		const { getByText, container } = render(
+			<AnalyticsDisconnectedNotice />,
+			{
+				registry,
+				viewContext: VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
+			}
+		);
+
+		// Title and description should be present.
+		expect( getByText( /Analytics is disconnected/i ) ).toBeInTheDocument();
+		expect(
+			getByText(
+				/Email reports won’t include Analytics data and metrics. To fix the issue contact your administrator./i
+			)
+		).toBeInTheDocument();
+
+		// CTA button should not be present.
+		expect(
+			container.querySelector( '.googlesitekit-notice__cta-button' )
+		).not.toBeInTheDocument();
+	} );
+
 	it( 'renders the "Reconnect Analytics" button and activates the module on click', async () => {
 		const moduleActivationEndpoint = RegExp(
 			'google-site-kit/v1/core/modules/data/activation'

assets/js/components/email-reporting/EmailReportingCardNotice.test.js → assets/js/components/email-reporting/notices/EmailReportingCardNotice.test.js

@@ -32,7 +32,7 @@ import {
 	render,
 	fireEvent,
 	freezeFetch,
-} from '../../../../tests/js/test-utils';
+} from '../../../../../tests/js/test-utils';
 import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
 import { CORE_UI } from '@/js/googlesitekit/datastore/ui/constants';
 import { USER_SETTINGS_SELECTION_PANEL_OPENED_KEY } from '@/js/components/email-reporting/constants';