Google Analytics: display deprecation notices (#38078)

Display Google Analytics deprecation notice on non-Jetpack admin pages.
Automattic · Jun 28, 2024 · 925c58d · 925c58d
1 parent affec6d
commit 925c58d
Show file tree

Hide file tree

Showing 33 changed files with 392 additions and 29 deletions.
diff --git a/projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/index.ts b/projects/packages/my-jetpack/_inc/hooks/use-notification-watcher/index.ts
@@ -1,6 +1,7 @@
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
 import useBadInstallNotice from './use-bad-install-notice';
 import useConnectionErrorsNotice from './use-connection-errors-notice';
+import useDeprecateFeatureNotice from './use-deprecate-feature-notice';
 import useSiteConnectionNotice from './use-site-connection-notice';
 
 const useNotificationWatcher = () => {
@@ -9,6 +10,7 @@ const useNotificationWatcher = () => {
 	useBadInstallNotice( redBubbleAlerts );
 	useSiteConnectionNotice( redBubbleAlerts );
 	useConnectionErrorsNotice();
+	useDeprecateFeatureNotice( redBubbleAlerts );
 };
 
 export default useNotificationWatcher;
diff --git a/...s/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-deprecate-feature-notice.ts b/...s/packages/my-jetpack/_inc/hooks/use-notification-watcher/use-deprecate-feature-notice.ts
@@ -0,0 +1,47 @@
+import { useContext, useEffect } from 'react';
+import { NOTICE_PRIORITY_MEDIUM } from '../../context/constants';
+import { NoticeContext } from '../../context/notices/noticeContext';
+import type { NoticeOptions } from '../../context/notices/types';
+
+type RedBubbleAlerts = Window[ 'myJetpackInitialState' ][ 'redBubbleAlerts' ];
+
+const useDeprecateFeatureNotice = ( redBubbleAlerts: RedBubbleAlerts ) => {
+	const { setNotice } = useContext( NoticeContext );
+
+	useEffect( () => {
+		const deprecateAlerts = Object.keys( redBubbleAlerts ).filter( key =>
+			key.endsWith( '-deprecate-feature' )
+		) as Array< `${ string }-deprecate-feature` >;
+
+		if ( deprecateAlerts.length === 0 ) {
+			return;
+		}
+
+		const alert = redBubbleAlerts[ deprecateAlerts[ 0 ] ];
+		const { text, link } = alert.data;
+
+		const onCtaClick = () => {
+			window.open( link.url );
+		};
+
+		const noticeOptions: NoticeOptions = {
+			id: 'deprecate-feature-notice',
+			level: 'error',
+			actions: [
+				{
+					label: link.label,
+					onClick: onCtaClick,
+					noDefaultClasses: true,
+				},
+			],
+			priority: NOTICE_PRIORITY_MEDIUM,
+		};
+
+		setNotice( {
+			message: text,
+			options: noticeOptions,
+		} );
+	}, [ redBubbleAlerts, setNotice ] );
+};
+
+export default useDeprecateFeatureNotice;
diff --git a/projects/packages/my-jetpack/changelog/add-ga-deprecation-notice b/projects/packages/my-jetpack/changelog/add-ga-deprecation-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add the Google Analytics deprecation notice.
diff --git a/projects/packages/my-jetpack/composer.json b/projects/packages/my-jetpack/composer.json
@@ -79,7 +79,7 @@
 			"link-template": "https://github.com/Automattic/jetpack-my-jetpack/compare/${old}...${new}"
 		},
 		"branch-alias": {
-			"dev-trunk": "4.26.x-dev"
+			"dev-trunk": "4.27.x-dev"
 		},
 		"version-constants": {
 			"::PACKAGE_VERSION": "src/class-initializer.php"

diff --git a/projects/packages/my-jetpack/package.json b/projects/packages/my-jetpack/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-my-jetpack",
-	"version": "4.26.1-alpha",
+	"version": "4.27.0-alpha",
 	"description": "WP Admin page with information and configuration shared among all Jetpack stand-alone plugins",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/packages/my-jetpack/#readme",
 	"bugs": {

diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php
@@ -37,7 +37,7 @@ class Initializer {
 	 *
 	 * @var string
 	 */
-	const PACKAGE_VERSION = '4.26.1-alpha';
+	const PACKAGE_VERSION = '4.27.0-alpha';
 
 	/**
 	 * HTML container ID for the IDC screen on My Jetpack page.

diff --git a/projects/plugins/backup/changelog/add-ga-deprecation-notice b/projects/plugins/backup/changelog/add-ga-deprecation-notice
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/backup/composer.json b/projects/plugins/backup/composer.json
@@ -34,7 +34,7 @@
 	"minimum-stability": "dev",
 	"prefer-stable": true,
 	"config": {
-		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ2_7",
+		"autoloader-suffix": "9559eef123208b7d1b9c15b978567267_backupⓥ2_8_alpha",
 		"allow-plugins": {
 			"automattic/jetpack-autoloader": true,
 			"automattic/jetpack-composer-plugin": true

diff --git a/projects/plugins/backup/composer.lock b/projects/plugins/backup/composer.lock
diff --git a/projects/plugins/backup/jetpack-backup.php b/projects/plugins/backup/jetpack-backup.php
@@ -4,7 +4,7 @@
  * Plugin Name: Jetpack VaultPress Backup
  * Plugin URI: https://jetpack.com/jetpack-backup
  * Description: Easily restore or download a backup of your site from a specific moment in time.
- * Version: 2.7
+ * Version: 2.8-alpha
  * Author: Automattic - Jetpack Backup team
  * Author URI: https://jetpack.com/
  * License: GPLv2 or later

diff --git a/projects/plugins/boost/changelog/add-ga-deprecation-notice b/projects/plugins/boost/changelog/add-ga-deprecation-notice
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Updated composer.lock.
+
+
diff --git a/projects/plugins/boost/composer.lock b/projects/plugins/boost/composer.lock
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
@@ -1,5 +1,6 @@
 import { JETPACK_CONTACT_BETA_SUPPORT } from 'constants/urls';
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import ConnectionBanner from 'components/connection-banner';
@@ -29,10 +30,12 @@ import {
 	userIsSubscriber,
 	getConnectionErrors,
 	getSiteAdminUrl,
+	isWoASite,
 } from 'state/initial-state';
 import { getLicensingError, clearLicensingError } from 'state/licensing';
-import { getModule } from 'state/modules';
+import { getModule, isModuleActivated } from 'state/modules';
 import { getSiteDataErrors } from 'state/site';
+import { isFetchingPluginsData, isPluginActive } from 'state/site/plugins';
 import { StartFreshDeprecationWarning } from '../../writing/custom-css';
 import DismissableNotices from './dismissable';
 import JetpackConnectionErrors from './jetpack-connection-errors';
@@ -242,6 +245,22 @@ class JetpackNotices extends React.Component {
 						<StartFreshDeprecationWarning siteAdminUrl={ this.props.siteAdminUrl } />
 					</SimpleNotice>
 				) }
+				{ this.props.showGoogleAnalyticsNotice && (
+					<SimpleNotice status="is-warning" showDismiss={ false }>
+						<div>
+							{ __(
+								"Jetpack's Google Analytics feature will be removed on August 6, 2024.",
+								'jetpack'
+							) }
+						</div>
+						<ExternalLink href={ getRedirectUrl( 'jetpack-support-google-analytics' ) }>
+							{ __(
+								'Read this document for details and how to keep tracking visits with Google Analytics',
+								'jetpack'
+							) }
+						</ExternalLink>
+					</SimpleNotice>
+				) }
 			</div>
 		);
 	}
@@ -268,6 +287,14 @@ export default connect(
 			hasConnectedOwner: hasConnectedOwner( state ),
 			siteAdminUrl: getSiteAdminUrl( state ),
 			startFreshEnabled: !! getModule( state, 'custom-css' )?.options?.replace,
+			showGoogleAnalyticsNotice:
+				isModuleActivated( state, 'google-analytics' ) &&
+				! isWoASite( state ) &&
+				! isFetchingPluginsData( state ) &&
+				! isPluginActive(
+					state,
+					'jetpack-legacy-google-analytics/jetpack-legacy-google-analytics.php'
+				),
 		};
 	},
 	dispatch => {

diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss b/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss
@@ -21,7 +21,7 @@
 	.jp-settings-card__configure-link {
 		display: flex;
 		margin-bottom: 0;
-	
+
 		&:last-child {
 			border-top: 1px solid var( --jp-gray );
 		}
@@ -44,6 +44,20 @@
 		border-top: 1px solid var( --jp-gray );
 	}
 
+	.dops-notice {
+		margin-bottom: 0;
+
+		&, .dops-notice__icon-wrapper {
+			border-radius: 0;
+		}
+
+		.dops-notice__text {
+			&, a {
+				color: var(--jp-white);
+			}
+		}
+	}
+
 	.dops-card.is-card-link + .jp-form-settings-group {
 		border-top: 1px solid var( --jp-gray );
 	}
@@ -54,7 +68,7 @@
 
 		&:hover {
 			box-shadow: none;
-			
+
 			.dops-banner__title {
 				text-decoration: underline;
 			}

diff --git a/projects/plugins/jetpack/_inc/client/traffic/google-analytics.jsx b/projects/plugins/jetpack/_inc/client/traffic/google-analytics.jsx
@@ -1,8 +1,10 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
+import { ExternalLink } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import Card from 'components/card';
 import { withModuleSettingsFormHelpers } from 'components/module-settings/with-module-settings-form-helpers';
+import SimpleNotice from 'components/notice';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import analytics from 'lib/analytics';
@@ -23,6 +25,22 @@ export const GoogleAnalytics = withModuleSettingsFormHelpers(
 					feature={ FEATURE_GOOGLE_ANALYTICS_JETPACK }
 					hideButton
 				>
+					{ this.props.showDeprecationNotice && (
+						<SimpleNotice status="is-warning" showDismiss={ false }>
+							<div>
+								{ __(
+									"Jetpack's Google Analytics feature will be removed on August 6, 2024.",
+									'jetpack'
+								) }
+							</div>
+							<ExternalLink href={ getRedirectUrl( 'jetpack-support-google-analytics' ) }>
+								{ __(
+									'Read this document for details and how to keep tracking visits with Google Analytics',
+									'jetpack'
+								) }
+							</ExternalLink>
+						</SimpleNotice>
+					) }
 					<SettingsGroup
 						disableInOfflineMode
 						module={ { module: 'google-analytics' } }

diff --git a/projects/plugins/jetpack/_inc/client/traffic/index.jsx b/projects/plugins/jetpack/_inc/client/traffic/index.jsx
@@ -9,11 +9,17 @@ import {
 	isUnavailableInOfflineMode,
 	hasConnectedOwner,
 } from 'state/connection';
-import { getLastPostUrl, currentThemeIsBlockTheme, getSiteId } from 'state/initial-state';
-import { getModule, getModuleOverride } from 'state/modules';
+import {
+	getLastPostUrl,
+	currentThemeIsBlockTheme,
+	getSiteId,
+	isWoASite,
+} from 'state/initial-state';
+import { getModule, getModuleOverride, isModuleActivated } from 'state/modules';
 import { isModuleFound } from 'state/search';
 import { getSettings } from 'state/settings';
 import { siteUsesWpAdminInterface } from 'state/site';
+import { isFetchingPluginsData, isPluginActive } from 'state/site/plugins';
 import Blaze from './blaze';
 import { GoogleAnalytics } from './google-analytics';
 import { RelatedPosts } from './related-posts';
@@ -92,7 +98,18 @@ export class Traffic extends React.Component {
 				) }
 				{ foundStats && <SiteStats { ...commonProps } /> }
 				{ foundAnalytics && (
-					<GoogleAnalytics { ...commonProps } site={ this.props.blogID ?? this.props.siteRawUrl } />
+					<GoogleAnalytics
+						{ ...commonProps }
+						site={ this.props.blogID ?? this.props.siteRawUrl }
+						showDeprecationNotice={
+							this.props.isModuleActivated( 'google-analytics' ) &&
+							! this.props.isWoASite &&
+							! this.props.isFetchingPluginsData &&
+							! this.props.isPluginActive(
+								'jetpack-legacy-google-analytics/jetpack-legacy-google-analytics.php'
+							)
+						}
+					/>
 				) }
 				{ foundBlaze && <Blaze { ...commonProps } /> }
 				{ foundShortlinks && <Shortlinks { ...commonProps } /> }
@@ -111,7 +128,11 @@ export default connect( state => {
 		isOfflineMode: isOfflineMode( state ),
 		isUnavailableInOfflineMode: module_name => isUnavailableInOfflineMode( state, module_name ),
 		isModuleFound: module_name => isModuleFound( state, module_name ),
+		isModuleActivated: module_name => isModuleActivated( state, module_name ),
 		isSiteConnected: isSiteConnected( state ),
+		isFetchingPluginsData: isFetchingPluginsData( state ),
+		isPluginActive: plugin_name => isPluginActive( state, plugin_name ),
+		isWoASite: isWoASite( state ),
 		lastPostUrl: getLastPostUrl( state ),
 		getModuleOverride: module_name => getModuleOverride( state, module_name ),
 		hasConnectedOwner: hasConnectedOwner( state ),

diff --git a/projects/plugins/jetpack/_inc/deprecate.js b/projects/plugins/jetpack/_inc/deprecate.js
@@ -0,0 +1,17 @@
+addEventListener( 'DOMContentLoaded', () => {
+	const notices = document.getElementsByClassName( 'jetpack-deprecate-dismissible' );
+	for ( let i = 0; i < notices.length; ++i ) {
+		if ( ! notices[ i ].hasAttribute( 'id' ) ) {
+			continue;
+		}
+
+		notices[ i ].addEventListener( 'click', event => {
+			if ( event.target.classList.contains( 'notice-dismiss' ) ) {
+				document.cookie =
+					'jetpack_deprecate_dismissed[' +
+					notices[ i ].getAttribute( 'id' ) +
+					']=1; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None;';
+			}
+		} );
+	}
+} );
diff --git a/projects/plugins/jetpack/changelog/add-ga-deprecation-notice b/projects/plugins/jetpack/changelog/add-ga-deprecation-notice
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Google Analytics: add deprecation notice for non-Jetpack admin pages."
diff --git a/projects/plugins/jetpack/class.jetpack.php b/projects/plugins/jetpack/class.jetpack.php
@@ -28,6 +28,7 @@
 use Automattic\Jetpack\Modules;
 use Automattic\Jetpack\My_Jetpack\Initializer as My_Jetpack_Initializer;
 use Automattic\Jetpack\Paths;
+use Automattic\Jetpack\Plugin\Deprecate;
 use Automattic\Jetpack\Plugin\Tracking as Plugin_Tracking;
 use Automattic\Jetpack\Redirect;
 use Automattic\Jetpack\Status;
@@ -861,6 +862,8 @@ function () {
 
 		// Add 5-star
 		add_filter( 'plugin_row_meta', array( $this, 'add_5_star_review_link' ), 10, 2 );
+
+		Deprecate::instance();
 	}
 
 	/**