Remove duplicate views: Show notices

projects/packages/jetpack-mu-wpcom/changelog/update-remove-duplicate-views-notices

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Remove duplicate views: Show notices

projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-interface/removed-calypso-screen-notice.scss

@@ -0,0 +1,36 @@
+.components-modal__frame.removed-calypso-screen-notice {
+	width: 512px;
+
+	.removed-calypso-screen-notice__image {
+		background-color: #7b90ff;
+		padding-top: 60px;
+		padding-left: 32px;
+		padding-right: 32px;
+
+		img {
+			border-top-left-radius: 4px;
+			border-top-right-radius: 4px;
+			width: 100%;
+			display: block;
+		}
+	}
+
+	h1 {
+		font-weight: 500;
+		font-size: 20px;
+		line-height: 24px;
+		margin: 16px 0;
+		padding: 8px 32px 0;
+		color: #1e1e1e;
+	}
+
+	p {
+		line-height: 20px;
+		margin: 0 0 16px;
+		padding: 0 32px;
+		color: #1e1e1e;
+	}
+}
+
+
+

projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-interface/removed-calypso-screen-notice.tsx

@@ -0,0 +1,70 @@
+/* global removedCalypsoScreenNoticeConfig */
+
+import { Guide } from '@wordpress/components';
+import { createRoot, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import './removed-calypso-screen-notice.scss';
+
+const Notice = () => {
+	const [ isOpen, setIsOpen ] = useState( true );
+
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	const dismiss = () => {
+		setIsOpen( false );
+		fetch(
+			addQueryArgs( removedCalypsoScreenNoticeConfig.ajaxUrl, {
+				action: 'wpcom_dismiss_removed_calypso_screen_notice',
+				_ajax_nonce: removedCalypsoScreenNoticeConfig.dismissNonce,
+				screen: removedCalypsoScreenNoticeConfig.screen,
+			} )
+		);
+	};
+
+	const title = sprintf(
+		// translators: %s: page name
+		__( 'A better %s view for everyone', 'jetpack-mu-wpcom' ),
+		removedCalypsoScreenNoticeConfig.title
+	);
+
+	return (
+		<Guide
+			className="removed-calypso-screen-notice"
+			contentLabel={ title }
+			finishButtonText={ __( 'Got it', 'jetpack-mu-wpcom' ) }
+			onFinish={ dismiss }
+			pages={ [
+				{
+					image: (
+						<div className="removed-calypso-screen-notice__image">
+							<img alt="" src={ removedCalypsoScreenNoticeConfig.imageUrl } />
+						</div>
+					),
+					content: (
+						<>
+							<h1>{ title }</h1>
+							<p>
+								{ sprintf(
+									// translators: %s: page name
+									__(
+										"We've switched to the standard WordPress %s view to bring you improvements that also benefit the entire WordPress community.",
+										'jetpack-mu-wpcom'
+									),
+									removedCalypsoScreenNoticeConfig.title
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+};
+
+const container = document.createElement( 'div' );
+document.body.appendChild( container );
+const root = createRoot( container );
+root.render( <Notice /> );

projects/packages/jetpack-mu-wpcom/src/features/wpcom-admin-interface/wpcom-admin-interface.php

@@ -416,3 +416,77 @@ function wpcom_is_duplicate_views_experiment_enabled() {
 		return $is_enabled;
 	}
 }
+
+/**
+ * Displays a notice when a user visits the enforced WP Admin view of a removed Calypso screen for
+ * the first time.
+ */
+function wpcom_show_removed_calypso_screen_notice() {
+	$current_screen = wpcom_admin_get_current_screen();
+
+	if ( ! in_array( $current_screen, WPCOM_DUPLICATED_VIEW, true ) ) {
+		return;
+	}
+
+	$dismissed_notices = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
+	if ( is_array( $dismissed_notices ) && in_array( $current_screen, $dismissed_notices, true ) ) {
+		return;
+	}
+
+	if ( ! wpcom_is_duplicate_views_experiment_enabled() ) {
+		return;
+	}
+
+	remove_filter( 'pre_option_wpcom_admin_interface', 'wpcom_admin_interface_pre_get_option' );
+	$uses_wp_admin_interface = get_option( 'wpcom_admin_interface' ) === 'wp-admin';
+	add_filter( 'pre_option_wpcom_admin_interface', 'wpcom_admin_interface_pre_get_option', 10 );
+	if ( $uses_wp_admin_interface ) {
+		return;
+	}
+
+	remove_filter( 'get_user_option_jetpack_admin_menu_preferred_views', 'wpcom_admin_get_user_option_jetpack' );
+	$preferred_views = get_user_option( 'jetpack_admin_menu_preferred_views' );
+	add_filter( 'get_user_option_jetpack_admin_menu_preferred_views', 'wpcom_admin_get_user_option_jetpack' );
+	if ( ! empty( $preferred_views ) && isset( $preferred_views[ $current_screen ] ) && $preferred_views[ $current_screen ] === 'classic' ) {
+		return;
+	}
+
+	$handle = jetpack_mu_wpcom_enqueue_assets( 'removed-calypso-screen-notice', array( 'js', 'css' ) );
+	wp_set_script_translations( $handle, 'jetpack-mu-wpcom', Jetpack_Mu_Wpcom::PKG_DIR . 'languages' );
+
+	global $title;
+	$config = wp_json_encode(
+		array(
+			'imageUrl'     => plugins_url( 'screens/' . sanitize_title( $current_screen ) . '.webp', __FILE__ ),
+			'title'        => $title,
+			'screen'       => $current_screen,
+			'ajaxUrl'      => admin_url( 'admin-ajax.php' ),
+			'dismissNonce' => wp_create_nonce( 'wpcom_dismiss_removed_calypso_screen_notice' ),
+		)
+	);
+
+	wp_add_inline_script(
+		$handle,
+		"window.removedCalypsoScreenNoticeConfig = $config;",
+		'before'
+	);
+}
+add_action( 'admin_enqueue_scripts', 'wpcom_show_removed_calypso_screen_notice' );
+
+/**
+ * Handles the AJAX request to dismiss a notice of a removed Calypsos screen.
+ */
+function wpcom_dismiss_removed_calypso_screen_notice() {
+	check_ajax_referer( 'wpcom_dismiss_removed_calypso_screen_notice' );
+	if ( isset( $_REQUEST['screen'] ) ) {
+		$screen            = sanitize_text_field( wp_unslash( $_REQUEST['screen'] ) );
+		$dismissed_notices = get_user_option( 'wpcom_removed_calypso_screen_dismissed_notices' );
+		if ( ! is_array( $dismissed_notices ) ) {
+			$dismissed_notices = array();
+		}
+		$dismissed_notices[] = $screen;
+		update_user_option( get_current_user_id(), 'wpcom_removed_calypso_screen_dismissed_notices', $dismissed_notices, true );
+	}
+	wp_die();
+}
+add_action( 'wp_ajax_wpcom_dismiss_removed_calypso_screen_notice', 'wpcom_dismiss_removed_calypso_screen_notice' );

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -50,6 +50,8 @@ module.exports = [
 				'./src/features/wpcom-profile-settings/profile-settings-link-to-wpcom.ts',
 			'wpcom-sidebar-notice': './src/features/wpcom-sidebar-notice/wpcom-sidebar-notice.js',
 			'starter-page-templates': './src/features/starter-page-templates/index.tsx',
+			'removed-calypso-screen-notice':
+				'./src/features/wpcom-admin-interface/removed-calypso-screen-notice.tsx',
 		},
 		mode: jetpackWebpackConfig.mode,
 		devtool: jetpackWebpackConfig.devtool,