Bug/6763 web data stream not available

assets/js/components/notifications/BannerNotifications.js

@@ -41,6 +41,7 @@ import EnableAutoUpdateBannerNotification from './EnableAutoUpdateBannerNotifica
 import GoogleTagIDMismatchNotification from './GoogleTagIDMismatchNotification';
 import SwitchGA4DashboardViewNotification from './SwitchGA4DashboardViewNotification';
 import { GTM_SCOPE } from '../../modules/analytics-4/datastore/constants';
+import WebDataStreamNotAvailableNotification from './WebDataStreamNotAvailableNotification';
 
 const { useSelect } = Data;
 
@@ -84,9 +85,12 @@ export default function BannerNotifications() {
 					{ isAuthenticated && <CoreSiteBannerNotifications /> }
 					{ dashboardSharingEnabled && <ModuleRecoveryAlert /> }
 					{ ga4ActivationBannerEnabled && <ActivationBanner /> }
-					{ gteSupportEnabled &&
-						ga4ModuleConnected &&
-						hasGTMScope && <GoogleTagIDMismatchNotification /> }
+					{ gteSupportEnabled && ga4ModuleConnected && hasGTMScope && (
+						<Fragment>
+							<GoogleTagIDMismatchNotification />
+							<WebDataStreamNotAvailableNotification />
+						</Fragment>
+					) }
 				</Fragment>
 			) }
 			<ZeroDataStateNotifications />

assets/js/components/notifications/WebDataStreamNotAvailableNotification.js

@@ -0,0 +1,94 @@
+/**
+ * WebDataStreamNotAvailableNotification 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 { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { ProgressBar } from 'googlesitekit-components';
+import Data from 'googlesitekit-data';
+import BannerNotification from './BannerNotification';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
+import { getTimeInSeconds } from '../../util';
+import { Cell, Grid, Row } from '../../material-components';
+
+const { useSelect } = Data;
+
+export default function WebDataStreamNotAvailableNotification() {
+	const isWebDataStreamAvailable = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).isWebDataStreamAvailable()
+	);
+
+	const measurementID = useSelect( ( select ) =>
+		select( MODULES_ANALYTICS_4 ).getMeasurementID()
+	);
+
+	const settingsURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getAdminURL( 'googlesitekit-settings' )
+	);
+
+	// If the data stream is available, we don't have to show a warning to the user.
+	if ( isWebDataStreamAvailable ) {
+		return null;
+	}
+
+	if ( measurementID === undefined ) {
+		// Wrap in the googlesitekit-publisher-win class to ensure the output is treated in the same way as BannerNotification,
+		// with only one instance visible on the screen at a time.
+		return (
+			<div className="googlesitekit-publisher-win">
+				<Grid>
+					<Row>
+						<Cell size={ 12 }>
+							<ProgressBar />
+						</Cell>
+					</Row>
+				</Grid>
+			</div>
+		);
+	}
+
+	return (
+		<BannerNotification
+			id="web-data-stream-not-available"
+			title={ __(
+				'Your Analytics 4 configuration has changed',
+				'google-site-kit'
+			) }
+			description={ sprintf(
+				/* translators: 1: Google Analytics 4 Measurement ID. */
+				__(
+					'The previously selected web data stream with measurement ID %1$s is no longer available. Please select a new web data stream to continue collecting data with Google Analytics 4.',
+					'google-site-kit'
+				),
+				measurementID
+			) }
+			ctaLink={ `${ settingsURL }#connected-services/analytics/edit` }
+			ctaLabel={ __( 'Update Analytics settings', 'google-site-kit' ) }
+			dismiss={ __( 'Maybe later', 'google-site-kit' ) }
+			// This is arbitrarily set to 55 minutes to ensure that the notification
+			// will become ready to be displayed again in an hour.
+			dismissExpires={ getTimeInSeconds( 'minute' ) * 55 }
+		/>
+	);
+}

assets/js/components/notifications/WebDataStreamNotAvailableNotification.stories.js

@@ -0,0 +1,77 @@
+/**
+ * WebDataStreamNotAvailableNotification 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 WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
+import { MODULES_ANALYTICS } from '../../modules/analytics/datastore/constants';
+import { MODULES_ANALYTICS_4 } from '../../modules/analytics-4/datastore/constants';
+import WebDataStreamNotAvailableNotification from './WebDataStreamNotAvailableNotification';
+
+function Template( { ...args } ) {
+	return <WebDataStreamNotAvailableNotification { ...args } />;
+}
+
+export const Loading = Template.bind( {} );
+Loading.storyName = 'Loading';
+
+export const Default = Template.bind( {} );
+Default.storyName = 'Default';
+Default.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			registry
+				.dispatch( MODULES_ANALYTICS_4 )
+				.setMeasurementID( 'G-2B7M8YQ1K6' );
+		};
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+Default.scenario = {
+	label: 'Global/WebDataStreamNotAvailableNotification/Default',
+};
+
+export default {
+	title: 'Components/WebDataStreamNotAvailableNotification',
+	component: WebDataStreamNotAvailableNotification,
+	decorators: [
+		( Story ) => {
+			const setupRegistry = ( registry ) => {
+				registry.dispatch( MODULES_ANALYTICS ).setSettings( {} );
+
+				registry
+					.dispatch( MODULES_ANALYTICS_4 )
+					.setIsWebDataStreamAvailable( false );
+
+				registry.dispatch( MODULES_ANALYTICS_4 ).setSettings( {} );
+			};
+
+			return (
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			);
+		},
+	],
+};

assets/js/modules/analytics-4/datastore/properties.js

@@ -164,12 +164,14 @@ const fetchGetGoogleTagSettingsStore = createFetchStore( {
 const WAIT_FOR_PROPERTIES = 'WAIT_FOR_PROPERTIES';
 const MATCHING_ACCOUNT_PROPERTY = 'MATCHING_ACCOUNT_PROPERTY';
 const SET_HAS_MISMATCHED_TAG = 'SET_HAS_MISMATCHED_GOOGLE_TAG_ID';
+const SET_IS_WEBDATASTREAM_AVAILABLE = 'SET_IS_WEBDATASTREAM_AVAILABLE';
 
 const baseInitialState = {
 	properties: {},
 	propertiesByID: {},
 	hasMismatchedTag: false,
 	isMatchingAccountProperty: false,
+	isWebDataStreamAvailable: true,
 };
 
 const baseActions = {
@@ -525,6 +527,21 @@ const baseActions = {
 		};
 	},
 
+	/**
+	 * Sets whether the Web Data Stream is available.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {boolean} isWebDataStreamAvailable Whether the Web Data Stream is available.
+	 * @return {Object} Redux-style action.
+	 */
+	*setIsWebDataStreamAvailable( isWebDataStreamAvailable ) {
+		return {
+			type: SET_IS_WEBDATASTREAM_AVAILABLE,
+			payload: { isWebDataStreamAvailable },
+		};
+	},
+
 	/**
 	 * Syncs Google Tag settings.
 	 *
@@ -590,10 +607,8 @@ const baseActions = {
 			);
 
 			if ( ! googleTagContainer ) {
-				return;
-			}
-
-			if ( ! googleTagContainer.tagIds.includes( googleTagID ) ) {
+				yield baseActions.setIsWebDataStreamAvailable( false );
+			} else if ( ! googleTagContainer.tagIds.includes( googleTagID ) ) {
 				yield baseActions.setHasMismatchedGoogleTagID( true );
 			}
 		} else {
@@ -630,6 +645,11 @@ function baseReducer( state, { type, payload } ) {
 				...state,
 				hasMismatchedTag: payload.hasMismatchedTag,
 			};
+		case SET_IS_WEBDATASTREAM_AVAILABLE:
+			return {
+				...state,
+				isWebDataStreamAvailable: payload.isWebDataStreamAvailable,
+			};
 		default:
 			return state;
 	}
@@ -713,6 +733,18 @@ const baseSelectors = {
 	hasMismatchedGoogleTagID( state ) {
 		return state.hasMismatchedTag;
 	},
+
+	/**
+	 * Checks if the Web Data Stream is available.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {Object} state Data store's state.
+	 * @return {boolean} TRUE if the Web Data Stream is available, otherwise FALSE.
+	 */
+	isWebDataStreamAvailable( state ) {
+		return state.isWebDataStreamAvailable;
+	},
 };
 
 const store = Data.combineStores(