mu-wpcom: Add a Protect page offering Scan on WordPress.com sites

projects/packages/jetpack-mu-wpcom/changelog/add-mu-wpcom-scan-page

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Add a Protect page to wp-admin on WordPress.com sites, offering an upgrade or activation for sites where Protect is not available yet. Registered but not linked from the menu.

projects/packages/jetpack-mu-wpcom/package.json

@@ -159,7 +159,8 @@
 		"handlePrefix": "jetpack-mu-wpcom",
 		"pages": [
 			"site-setup",
-			"wpcom-backup"
+			"wpcom-backup",
+			"wpcom-scan"
 		]
 	}
 }

projects/packages/jetpack-mu-wpcom/routes/wpcom-scan/package.json

@@ -0,0 +1,18 @@
+{
+	"version": "1.0.0",
+	"private": true,
+	"dependencies": {
+		"@automattic/jetpack-components": "workspace:*",
+		"@types/react": "^18.3.28",
+		"@wordpress/admin-ui": "2.12.0",
+		"@wordpress/element": "9.0.0",
+		"@wordpress/i18n": "6.30.0",
+		"@wordpress/icons": "18.0.0",
+		"@wordpress/primitives": "4.57.0",
+		"@wordpress/ui": "0.24.0"
+	},
+	"route": {
+		"path": "/",
+		"page": "wpcom-scan"
+	}
+}

projects/packages/jetpack-mu-wpcom/routes/wpcom-scan/stage.tsx

@@ -0,0 +1,9 @@
+import { App } from '../../src/features/wpcom-scan/js/app.tsx';
+import './style.scss';
+
+// The wp-build route entry; state comes from PHP, so there is no provider to mount.
+const Stage = () => {
+	return <App />;
+};
+
+export { Stage as stage };

projects/packages/jetpack-mu-wpcom/routes/wpcom-scan/style.scss

@@ -0,0 +1,10 @@
+// Route-level styles for the Protect page. The layout mixin is
+// included per route because each wp-build route bundles its own CSS.
+
+@use "@automattic/jetpack-base-styles/admin-page-layout" as *;
+
+// Scoped to the body class so the layout cannot leak onto other Jetpack pages.
+body.jetpack_page_jetpack-protect {
+
+	@include jetpack-admin-page-layout-wp-build;
+}

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -125,10 +125,11 @@ public static function init() {
 			add_action( 'plugins_loaded', array( __CLASS__, 'load_wpcom_random_redirect' ) );
 		}
 
-		// The Backup page serves both platforms: it offers the transfer on Simple
-		// and the plan upgrade on WoA, and steps aside once backups are live.
+		// The Backup and Protect pages serve both platforms: they offer the transfer on Simple
+		// and the plan upgrade on WoA, and step aside once the feature is live.
 		if ( ( defined( 'IS_WPCOM' ) && IS_WPCOM ) || Constants::is_true( 'IS_ATOMIC' ) ) {
 			add_action( 'plugins_loaded', array( __CLASS__, 'load_wpcom_backup' ) );
+			add_action( 'plugins_loaded', array( __CLASS__, 'load_wpcom_scan' ) );
 		}
 
 		// At mu-plugin scope, because the Jetpack plugin resolves this filter at the earliest plugins_loaded priority.
@@ -900,6 +901,15 @@ public static function load_wpcom_backup() {
 		require_once __DIR__ . '/features/wpcom-backup/wpcom-backup.php';
 	}
 
+	/**
+	 * Load the Protect page, which offers Scan, on WordPress.com Simple and WoA sites.
+	 *
+	 * The file hooks its own `init`, where the plan lookup it gates on is ready.
+	 */
+	public static function load_wpcom_scan() {
+		require_once __DIR__ . '/features/wpcom-scan/wpcom-scan.php';
+	}
+
 	/**
 	 * Load Odyssey Stats in Simple sites.
 	 */

projects/packages/jetpack-mu-wpcom/src/features/wpcom-backup/js/app.tsx

@@ -1,42 +1,63 @@
-import JetpackFooter from '@automattic/jetpack-components/jetpack-footer';
-import JetpackLogo from '@automattic/jetpack-components/jetpack-logo';
-import { Page } from '@wordpress/admin-ui';
 import { __ } from '@wordpress/i18n';
-import { ActivateScreen, InProgressScreen, UpgradeScreen } from './screens.tsx';
-import { getInitialState } from './state.ts';
-import './style.scss';
+import { backup } from '@wordpress/icons';
+import { useMemo } from 'react';
+import { HostingFeaturePage } from '../../wpcom-hosting-feature-page/js/page.tsx';
+import { backupsCalloutIllustration } from './illustration.ts';
+import type { FeatureConfig } from '../../wpcom-hosting-feature-page/js/types.ts';
 
-const PRODUCT_NAME = 'VaultPress Backup'; // Product name; do not translate.
+/**
+ * The Backup page's copy, imagery and Tracks IDs.
+ *
+ * @return The config.
+ */
+function getBackupConfig(): FeatureConfig {
+	return {
+		productName: 'VaultPress Backup', // Product name; do not translate.
+		subTitle: __( 'Save changes and restore quickly with one-click recovery.', 'jetpack-mu-wpcom' ),
+		icon: backup,
+		illustration: backupsCalloutIllustration,
+		tracksFeatureId: 'site-backups',
+		tracksPath: '/wp-admin/admin.php?page=jetpack-backup',
+		upgrade: {
+			title: __( 'Secure your content with Jetpack Backups', 'jetpack-mu-wpcom' ),
+			description: __(
+				'Protect your site with scheduled and real-time backups—giving you the ultimate “undo” button and peace of mind that your content is always safe.',
+				'jetpack-mu-wpcom'
+			),
+		},
+		activate: {
+			title: __( 'Activate backups for this site', 'jetpack-mu-wpcom' ),
+			description: __(
+				'Your plan includes backups. To switch them on, your site needs to move to our hosting platform.',
+				'jetpack-mu-wpcom'
+			),
+			action: __( 'Activate backups', 'jetpack-mu-wpcom' ),
+		},
+		inProgress: {
+			title: __( 'Setting up backups', 'jetpack-mu-wpcom' ),
+			description: __(
+				'Your site is being moved to our hosting platform so backups can be switched on.',
+				'jetpack-mu-wpcom'
+			),
+		},
+		modal: {
+			blockedTitle: __( 'Backups cannot be activated', 'jetpack-mu-wpcom' ),
+			intro: __(
+				'To turn Jetpack VaultPress Backup on, we’ll need to move your site over to WordPress.com’s advanced managed cloud hosting.',
+				'jetpack-mu-wpcom'
+			),
+			holdsHeading: __( 'To activate backups you’ll need to:', 'jetpack-mu-wpcom' ),
+		},
+	};
+}
 
 /**
  * The Backup page for WordPress.com Simple and WoA sites.
  *
- * Shown while backups are out of reach: a Simple site shares a multisite install
- * and cannot be backed up, and a WoA site may not have bought them yet.
- *
  * @return The rendered page.
  */
 export function App() {
-	const initialState = getInitialState();
+	const config = useMemo( getBackupConfig, [] );
 
-	return (
-		<Page
-			className="wpcom-backup jp-admin-page"
-			visual={ <JetpackLogo showText={ false } height={ 20 } /> }
-			title={ PRODUCT_NAME }
-			ariaLabel={ PRODUCT_NAME }
-			subTitle={ __(
-				'Save changes and restore quickly with one-click recovery.',
-				'jetpack-mu-wpcom'
-			) }
-			hasPadding={ false }
-		>
-			<div className="wpcom-backup__body">
-				{ initialState.state === 'in_progress' && <InProgressScreen /> }
-				{ initialState.state === 'activate' && <ActivateScreen state={ initialState } /> }
-				{ initialState.state === 'upgrade' && <UpgradeScreen state={ initialState } /> }
-			</div>
-			<JetpackFooter />
-		</Page>
-	);
+	return <HostingFeaturePage config={ config } />;
 }

projects/packages/jetpack-mu-wpcom/src/features/wpcom-backup/tsconfig.json

@@ -1,11 +1,5 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
-	"extends": "jetpack-js-tools/tsconfig.base.json",
-	"compilerOptions": {
-		"lib": [ "ES2022", "DOM", "DOM.Iterable" ]
-	},
-	// `strictNullChecks` would be useful here, but `app.tsx` imports
-	// @automattic/jetpack-components, whose source is not written for it and
-	// reports ~30 errors under it. Turn it on only once that package can take it.
+	"extends": "../wpcom-hosting-feature-page/tsconfig.json",
 	"include": [ "js/**/*" ]
 }