Merge remote-tracking branch 'origin/develop' into enhancement/10091-storybook-dependencies-latest-nodejs.

benbowler · benbowler · commit 7af2775d0caf · 2025-09-09T10:00:50.000+01:00
diff --git a/assets/js/googlesitekit/datastore/site/google-tag-gateway.js b/assets/js/googlesitekit/datastore/site/google-tag-gateway.js
@@ -41,6 +41,7 @@ import { MODULE_SLUG_ADS } from '@/js/modules/ads/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
 import { createFetchStore } from '@/js/googlesitekit/data/create-fetch-store';
 import { isFeatureEnabled } from '@/js/features';
+import { MODULE_SLUG_TAGMANAGER } from '@/js/modules/tagmanager/constants';
 
 const SET_GOOGLE_TAG_GATEWAY_ENABLED = 'SET_GOOGLE_TAG_GATEWAY_ENABLED';
 const RESET_GOOGLE_TAG_GATEWAY_SETTINGS = 'RESET_GOOGLE_TAG_GATEWAY_SETTINGS';
@@ -295,7 +296,8 @@ const baseSelectors = {
 
 			return (
 				isModuleConnected( MODULE_SLUG_ANALYTICS_4 ) ||
-				isModuleConnected( MODULE_SLUG_ADS )
+				isModuleConnected( MODULE_SLUG_ADS ) ||
+				isModuleConnected( MODULE_SLUG_TAGMANAGER )
 			);
 		}
 	),
diff --git a/assets/js/modules/ads/components/settings/SettingsEdit.stories.js b/assets/js/modules/ads/components/settings/SettingsEdit.stories.js
@@ -206,6 +206,9 @@ GTGEnabled.decorators = [
 export const GTGDisabledWithWarning = Template.bind( null );
 GTGDisabledWithWarning.storyName =
 	'With Google tag gateway disabled with warning';
+GTGDisabledWithWarning.parameters = {
+	features: [ 'googleTagGateway' ],
+};
 GTGDisabledWithWarning.decorators = [
 	( Story ) => {
 		function setupRegistry( registry ) {
diff --git a/assets/js/modules/tagmanager/components/settings/SettingsEdit.stories.js b/assets/js/modules/tagmanager/components/settings/SettingsEdit.stories.js
@@ -16,6 +16,11 @@
  * limitations under the License.
  */
 
+/**
+ * External dependencies
+ */
+import fetchMock from 'fetch-mock';
+
 /**
  * Internal dependencies
  */
@@ -40,6 +45,7 @@ import { CORE_FORMS } from '@/js/googlesitekit/datastore/forms/constants';
 import {
 	AMP_MODE_PRIMARY,
 	AMP_MODE_SECONDARY,
+	CORE_SITE,
 } from '@/js/googlesitekit/datastore/site/constants';
 
 const defaultSettings = {
@@ -52,6 +58,38 @@ const defaultSettings = {
 	ownerID: 0,
 };
 
+const gtgServerRequirementsEndpoint = new RegExp(
+	'^/google-site-kit/v1/core/site/data/gtg-server-requirement-status'
+);
+
+function setupRegistryWithDefaultSettings( registry ) {
+	// eslint-disable-next-line sitekit/acronym-case
+	const accountID = fixtures.accounts[ 0 ].accountId;
+	registry.dispatch( MODULES_TAGMANAGER ).setAccountID( accountID );
+	registry
+		.dispatch( MODULES_TAGMANAGER )
+		.receiveGetAccounts( fixtures.accounts );
+	registry
+		.dispatch( MODULES_TAGMANAGER )
+		.receiveGetContainers( fixtures.getContainers.all, {
+			accountID,
+		} );
+	const [ container ] = registry
+		.select( MODULES_TAGMANAGER )
+		.getWebContainers( accountID );
+	registry
+		.dispatch( MODULES_TAGMANAGER )
+		// eslint-disable-next-line sitekit/acronym-case
+		.setContainerID( container.publicId );
+	registry
+		.dispatch( MODULES_TAGMANAGER )
+		// eslint-disable-next-line sitekit/acronym-case
+		.setInternalContainerID( container.containerId );
+	registry
+		.dispatch( MODULES_TAGMANAGER )
+		.receiveGetSettings( defaultSettings );
+}
+
 function Template( args ) {
 	return (
 		<div className="googlesitekit-layout">
@@ -75,33 +113,7 @@ function Template( args ) {
 export const Default = Template.bind( {} );
 Default.storyName = 'Default';
 Default.args = {
-	setupRegistry: ( registry ) => {
-		// eslint-disable-next-line sitekit/acronym-case
-		const accountID = fixtures.accounts[ 0 ].accountId;
-		registry.dispatch( MODULES_TAGMANAGER ).setAccountID( accountID );
-		registry
-			.dispatch( MODULES_TAGMANAGER )
-			.receiveGetAccounts( fixtures.accounts );
-		registry
-			.dispatch( MODULES_TAGMANAGER )
-			.receiveGetContainers( fixtures.getContainers.all, {
-				accountID,
-			} );
-		const [ container ] = registry
-			.select( MODULES_TAGMANAGER )
-			.getWebContainers( accountID );
-		registry
-			.dispatch( MODULES_TAGMANAGER )
-			// eslint-disable-next-line sitekit/acronym-case
-			.setContainerID( container.publicId );
-		registry
-			.dispatch( MODULES_TAGMANAGER )
-			// eslint-disable-next-line sitekit/acronym-case
-			.setInternalContainerID( container.containerId );
-		registry
-			.dispatch( MODULES_TAGMANAGER )
-			.receiveGetSettings( defaultSettings );
-	},
+	setupRegistry: setupRegistryWithDefaultSettings,
 };
 
 export const NoAccounts = Template.bind( {} );
@@ -408,6 +420,81 @@ SecondaryAMPNonUniqueContainer.args = {
 	ampMode: AMP_MODE_SECONDARY,
 };
 
+export const GTGEnabled = Template.bind( null );
+GTGEnabled.storyName = 'With Google tag gateway enabled';
+GTGEnabled.parameters = {
+	features: [ 'googleTagGateway' ],
+};
+GTGEnabled.decorators = [
+	( Story ) => {
+		function setupRegistry( registry ) {
+			setupRegistryWithDefaultSettings( registry );
+
+			const gtgSettings = {
+				isEnabled: true,
+				isGTGHealthy: true,
+				isScriptAccessEnabled: true,
+			};
+
+			fetchMock.getOnce(
+				gtgServerRequirementsEndpoint,
+				{
+					body: gtgSettings,
+				},
+				{ overwriteRoutes: true }
+			);
+
+			registry
+				.dispatch( CORE_SITE )
+				.receiveGetGoogleTagGatewaySettings( gtgSettings );
+		}
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+
+export const GTGDisabledWithWarning = Template.bind( null );
+GTGDisabledWithWarning.storyName =
+	'With Google tag gateway disabled with warning';
+GTGDisabledWithWarning.parameters = {
+	features: [ 'googleTagGateway' ],
+};
+GTGDisabledWithWarning.decorators = [
+	( Story ) => {
+		function setupRegistry( registry ) {
+			setupRegistryWithDefaultSettings( registry );
+
+			const gtgSettings = {
+				isEnabled: true,
+				isGTGHealthy: false,
+				isScriptAccessEnabled: false,
+			};
+
+			fetchMock.getOnce(
+				gtgServerRequirementsEndpoint,
+				{
+					body: gtgSettings,
+				},
+				{ overwriteRoutes: true }
+			);
+
+			registry
+				.dispatch( CORE_SITE )
+				.receiveGetGoogleTagGatewaySettings( gtgSettings );
+		}
+
+		return (
+			<WithRegistrySetup func={ setupRegistry }>
+				<Story />
+			</WithRegistrySetup>
+		);
+	},
+];
+
 export default {
 	title: 'Modules/TagManager/Settings/SettingsEdit',
 	component: SettingsEdit,
diff --git a/assets/js/modules/tagmanager/components/settings/SettingsForm.js b/assets/js/modules/tagmanager/components/settings/SettingsForm.js
@@ -45,8 +45,13 @@ import { MODULE_SLUG_TAGMANAGER } from '@/js/modules/tagmanager/constants';
 import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
 import SettingsUseSnippetSwitch from './SettingsUseSnippetSwitch';
 import Notice from '@/js/components/Notice';
+import SettingsGroup from '@/js/components/settings/SettingsGroup';
+import GoogleTagGatewayToggle from '@/js/components/google-tag-gateway/GoogleTagGatewayToggle';
+import { useFeature } from '@/js/hooks/useFeature';
 
 export default function SettingsForm( { hasModuleAccess } ) {
+	const gtgEnabled = useFeature( 'googleTagGateway' );
+
 	const module = useSelect( ( select ) =>
 		select( CORE_MODULES ).getModule( MODULE_SLUG_TAGMANAGER )
 	);
@@ -99,6 +104,17 @@ export default function SettingsForm( { hasModuleAccess } ) {
 			<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
 				<SettingsUseSnippetSwitch />
 			</div>
+
+			{ gtgEnabled && (
+				<SettingsGroup
+					title={ __(
+						'Improve your measurement',
+						'google-site-kit'
+					) }
+				>
+					<GoogleTagGatewayToggle />
+				</SettingsGroup>
+			) }
 		</div>
 	);
 }
diff --git a/assets/js/modules/tagmanager/datastore/base.js b/assets/js/modules/tagmanager/datastore/base.js
@@ -22,7 +22,12 @@
 import Modules from 'googlesitekit-modules';
 import { MODULES_TAGMANAGER } from './constants';
 import { MODULE_SLUG_TAGMANAGER } from '@/js/modules/tagmanager/constants';
-import { submitChanges, validateCanSubmitChanges } from './settings';
+import {
+	submitChanges,
+	validateCanSubmitChanges,
+	rollbackChanges,
+	validateHaveSettingsChanged,
+} from './settings';
 
 let baseModuleStore = Modules.createModuleStore( MODULE_SLUG_TAGMANAGER, {
 	ownedSettingsSlugs: [
@@ -43,7 +48,9 @@ let baseModuleStore = Modules.createModuleStore( MODULE_SLUG_TAGMANAGER, {
 		'ownerID',
 	],
 	submitChanges,
+	rollbackChanges,
 	validateCanSubmitChanges,
+	validateHaveSettingsChanged,
 } );
 
 // Rename generated pieces to adhere to our convention.
diff --git a/assets/js/modules/tagmanager/datastore/settings.js b/assets/js/modules/tagmanager/datastore/settings.js
@@ -20,6 +20,7 @@
  * External dependencies
  */
 import invariant from 'invariant';
+import { isEqual, pick } from 'lodash';
 
 /**
  * Internal dependencies
@@ -53,6 +54,8 @@ import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
 import { createStrictSelect } from '@/js/googlesitekit/data/utils';
 import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
 import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
+import { CORE_NOTIFICATIONS } from '@/js/googlesitekit/notifications/datastore/constants';
+import { GTG_SETUP_CTA_BANNER_NOTIFICATION } from '@/js/googlesitekit/notifications/constants';
 
 // Invariant error messages.
 export const INVARIANT_INVALID_ACCOUNT_ID =
@@ -153,6 +156,32 @@ export async function submitChanges( { select, dispatch } ) {
 		}
 	}
 
+	if ( select( CORE_SITE ).haveGoogleTagGatewaySettingsChanged() ) {
+		const { error } = await dispatch(
+			CORE_SITE
+		).saveGoogleTagGatewaySettings();
+
+		if ( error ) {
+			return { error };
+		}
+
+		if (
+			select( CORE_SITE ).isGoogleTagGatewayEnabled() &&
+			! select( CORE_NOTIFICATIONS ).isNotificationDismissed(
+				GTG_SETUP_CTA_BANNER_NOTIFICATION
+			)
+		) {
+			const { error: dismissError } =
+				( await dispatch( CORE_NOTIFICATIONS ).dismissNotification(
+					GTG_SETUP_CTA_BANNER_NOTIFICATION
+				) ) || {};
+
+			if ( dismissError ) {
+				return { error: dismissError };
+			}
+		}
+	}
+
 	await invalidateCache( 'modules', MODULE_SLUG_TAGMANAGER );
 
 	return {};
@@ -253,3 +282,30 @@ export function validateCanSubmitChanges( select ) {
 		}
 	}
 }
+
+export function rollbackChanges( { select, dispatch } ) {
+	if ( select( MODULES_TAGMANAGER ).haveSettingsChanged() ) {
+		dispatch( MODULES_TAGMANAGER ).rollbackSettings();
+		dispatch( CORE_SITE ).resetGoogleTagGatewaySettings();
+	}
+}
+
+export function validateHaveSettingsChanged( select, state, keys ) {
+	const { settings, savedSettings } = state;
+	const haveGoogleTagGatewaySettingsChanged =
+		select( CORE_SITE ).haveGoogleTagGatewaySettingsChanged();
+
+	if ( keys ) {
+		invariant(
+			isEqual( pick( settings, keys ), pick( savedSettings, keys ) ) ||
+				haveGoogleTagGatewaySettingsChanged,
+			INVARIANT_SETTINGS_NOT_CHANGED
+		);
+	}
+
+	invariant(
+		! isEqual( settings, savedSettings ) ||
+			haveGoogleTagGatewaySettingsChanged,
+		INVARIANT_SETTINGS_NOT_CHANGED
+	);
+}
diff --git a/assets/js/modules/tagmanager/datastore/settings.test.js b/assets/js/modules/tagmanager/datastore/settings.test.js
diff --git a/includes/Core/Proactive_User_Engagement/Proactive_User_Engagement.php b/includes/Core/Proactive_User_Engagement/Proactive_User_Engagement.php
diff --git a/includes/Plugin.php b/includes/Plugin.php
