Protect: add home page

Rebase on admin hero section refactor

Revert accidental type changes

Remove testing code

Init project branch

Protect: Add ShieldIcon Component (#40402)

Refactor AdminSectionHero component

projects/js-packages/components/components/stat-card/index.tsx

@@ -18,7 +18,14 @@ import type React from 'react';
  * @param {StatCardProps} props - Component props.
  * @return {React.ReactNode} - StatCard react component.
  */
-const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => {
+const StatCard = ( {
+	className,
+	icon,
+	label,
+	value,
+	variant = 'square',
+	hideValue = false,
+}: StatCardProps ) => {
 	const formattedValue = numberFormat( value );
 	const compactValue = numberFormat( value, {
 		notation: 'compact',
@@ -33,12 +40,12 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa
 				{ variant === 'square' ? (
 					<Tooltip text={ formattedValue } placement="top">
 						<Text variant="headline-small" className={ clsx( styles.value ) }>
-							{ compactValue }
+							{ hideValue ? '-' : compactValue }
 						</Text>
 					</Tooltip>
 				) : (
 					<Text variant="title-medium-semi-bold" className={ clsx( styles.value ) }>
-						{ formattedValue }
+						{ hideValue ? '-' : formattedValue }
 					</Text>
 				) }
 			</div>

projects/js-packages/components/components/stat-card/types.ts

@@ -25,4 +25,9 @@ export type StatCardProps = {
 	 * @default 'square'
 	 */
 	variant?: 'square' | 'horizontal';
+
+	/**
+	 * Whether to hide the value.
+	 */
+	hideValue?: boolean;
 };

projects/plugins/protect/changelog/add-protect-home

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Adds a Home page and StatCards

projects/plugins/protect/src/class-jetpack-protect.php

@@ -457,8 +457,9 @@ public static function get_waf_stats() {
 		}
 
 		return array(
-			'blockedRequests'           => Plan::has_required_plan() ? Waf_Stats::get_blocked_requests() : false,
+			'blockedRequests'           => Waf_Stats::get_blocked_requests(),
 			'automaticRulesLastUpdated' => Waf_Stats::get_automatic_rules_last_updated(),
+			'blockedLogins'             => (int) get_option( 'jetpack_protect_blocked_attempts', 0 ),
 		);
 	}
 }

projects/plugins/protect/src/js/components/admin-page/index.jsx

@@ -63,6 +63,7 @@ const AdminPage = ( { children } ) => {
 			{ notice && <Notice floating={ true } dismissable={ true } { ...notice } /> }
 			<Container horizontalSpacing={ 0 }>
 				<Tabs className={ styles.navigation }>
+					<Tab link="/" label={ __( 'Home', 'jetpack-protect' ) } />
 					<Tab
 						link="/scan"
 						label={

projects/plugins/protect/src/js/components/pricing-table/index.jsx

@@ -48,7 +48,7 @@ const ConnectedPricingTable = () => {
 	const getProtectFree = useCallback( async () => {
 		recordEvent( 'jetpack_protect_connected_product_activated' );
 		await connectSiteMutation.mutateAsync();
-		navigate( '/scan' );
+		navigate( '/' );
 	}, [ connectSiteMutation, recordEvent, navigate ] );
 
 	const args = {

projects/plugins/protect/src/js/hooks/use-plan.tsx

@@ -48,7 +48,7 @@ export default function usePlan( { redirectUrl }: { redirectUrl?: string } = {}
 
 	const { run: checkout } = useProductCheckoutWorkflow( {
 		productSlug: JETPACK_SCAN_SLUG,
-		redirectUrl: redirectUrl || adminUrl,
+		redirectUrl: redirectUrl || adminUrl + '#/scan',
 		siteProductAvailabilityHandler: API.checkPlan,
 		useBlogIdSuffix: true,
 		connectAfterCheckout: false,

projects/plugins/protect/src/js/index.tsx

@@ -11,6 +11,7 @@ import { NoticeProvider } from './hooks/use-notices';
 import { OnboardingRenderedContextProvider } from './hooks/use-onboarding';
 import { CheckoutProvider } from './hooks/use-plan';
 import FirewallRoute from './routes/firewall';
+import HomeRoute from './routes/home';
 import ScanRoute from './routes/scan';
 import SetupRoute from './routes/setup';
 import './styles.module.scss';
@@ -56,6 +57,7 @@ function render() {
 									<ScrollToTop />
 									<Routes>
 										<Route path="/setup" element={ <SetupRoute /> } />
+										<Route path="/" element={ <HomeRoute /> } />
 										<Route path="/scan" element={ <ScanRoute /> } />
 										<Route
 											path="/scan/history"
@@ -74,7 +76,7 @@ function render() {
 											}
 										/>
 										<Route path="/firewall" element={ <FirewallRoute /> } />
-										<Route path="*" element={ <Navigate to="/scan" replace /> } />
+										<Route path="*" element={ <Navigate to="/" replace /> } />
 									</Routes>
 								</HashRouter>
 								<Modal />

projects/plugins/protect/src/js/routes/home/home-admin-section-hero.tsx

@@ -0,0 +1,52 @@
+import { Text, Button } from '@automattic/jetpack-components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import AdminSectionHero from '../../components/admin-section-hero';
+import usePlan from '../../hooks/use-plan';
+import HomeStatCards from './home-statcards';
+import styles from './styles.module.scss';
+
+const HomeAdminSectionHero: React.FC = () => {
+	const { hasPlan } = usePlan();
+	const navigate = useNavigate();
+	const handleScanReportClick = useCallback( () => {
+		navigate( '/scan' );
+	}, [ navigate ] );
+
+	return (
+		<AdminSectionHero>
+			<AdminSectionHero.Main>
+				<>
+					<AdminSectionHero.Heading>
+						{ __( 'Your site is safe with us', 'jetpack-protect' ) }
+					</AdminSectionHero.Heading>
+					<Text>
+						{ sprintf(
+							// translators: %s is replaced with "threats" or "vulnerabilities" depending on the user's plan.
+							__( 'We stay ahead of security %s to keep your site protected.', 'jetpack-protect' ),
+							hasPlan
+								? __( 'threats', 'jetpack-protect' )
+								: __(
+										'vulnerabilities',
+										'jetpack-protect',
+										/* dummy arg to avoid bad minification */ 0
+								  )
+						) }
+					</Text>
+					<Button
+						className={ styles[ 'view-scan-report' ] }
+						variant="primary"
+						weight="regular"
+						onClick={ handleScanReportClick }
+					>
+						{ __( 'View scan report', 'jetpack-protect' ) }
+					</Button>
+				</>
+			</AdminSectionHero.Main>
+			<AdminSectionHero.Aside>{ <HomeStatCards /> }</AdminSectionHero.Aside>
+		</AdminSectionHero>
+	);
+};
+
+export default HomeAdminSectionHero;