Protect card: Add the Scan/Threats status column (with tooltip)

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/index.tsx

@@ -0,0 +1,53 @@
+import { __ } from '@wordpress/i18n';
+import { useCallback, type FC } from 'react';
+import useProduct from '../../../data/products/use-product';
+import useAnalytics from '../../../hooks/use-analytics';
+import ProductCard from '../../connected-product-card';
+import ProtectValueSection from './protect-value-section';
+
+const ProtectCard: FC< { admin: boolean } > = ( { admin } ) => {
+	const { recordEvent } = useAnalytics();
+	const slug = 'protect';
+	const { detail } = useProduct( slug );
+	const { hasPaidPlanForProduct: hasProtectPaidPlan } = detail;
+
+	/**
+	 * Called when secondary "View" button is clicked.
+	 */
+	const onViewButtonClick = useCallback( () => {
+		recordEvent( 'jetpack_myjetpack_product_card_manage_click', {
+			product: slug,
+		} );
+	}, [ recordEvent ] );
+
+	const shouldShowSecondaryButton = useCallback(
+		() => ! hasProtectPaidPlan,
+		[ hasProtectPaidPlan ]
+	);
+
+	const viewButton = {
+		href: 'admin.php?page=jetpack-protect',
+		label: __( 'View', 'jetpack-my-jetpack' ),
+		onClick: onViewButtonClick,
+		shouldShowButton: shouldShowSecondaryButton,
+	};
+
+	// This is a workaround to remove the Description from the product card. However if we end
+	// up needing to remove the Description from additional cards in the future, we might consider
+	// extending <ProductCard /> functionality to support that.
+	const noDescription = useCallback( () => null, [] );
+
+	return (
+		<ProductCard
+			admin={ admin }
+			slug={ slug }
+			upgradeInInterstitial={ true }
+			secondaryAction={ viewButton }
+			Description={ noDescription }
+		>
+			<ProtectValueSection />
+		</ProductCard>
+	);
+};
+
+export default ProtectCard;

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/info-tooltip/index.tsx

@@ -0,0 +1,71 @@
+import { Gridicon } from '@automattic/jetpack-components';
+import { Popover } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useState, useCallback, useRef } from 'react';
+import useAnalytics from '../../../../hooks/use-analytics';
+import type { FC, ReactNode } from 'react';
+
+import './style.scss';
+
+type Props = {
+	children: ReactNode;
+	icon?: string;
+	iconSize?: number;
+	tracksEventName?: string;
+	tracksEventProps?: { [ key: string ]: string | boolean | number };
+};
+
+export const InfoTooltip: FC< Props > = ( {
+	children,
+	icon = 'info-outline',
+	iconSize = 14,
+	tracksEventName,
+	tracksEventProps = {},
+} ) => {
+	const { recordEvent } = useAnalytics();
+	const useTooltipRef = useRef< HTMLButtonElement >();
+	const isMobileViewport: boolean = useViewportMatch( 'medium', '<' );
+	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
+
+	const toggleTooltip = useCallback(
+		() =>
+			setIsPopoverVisible( prevState => {
+				if ( ! prevState === true && tracksEventName ) {
+					recordEvent( `jetpack_${ tracksEventName }`, {
+						page: 'my-jetpack',
+						feature: 'jetpack-protect',
+						...tracksEventProps,
+					} );
+				}
+				return ! prevState;
+			} ),
+		[ recordEvent, tracksEventName, tracksEventProps ]
+	);
+
+	const hideTooltip = useCallback( () => {
+		// Don't hide the tooltip here if it's the tooltip button that was clicked (the button
+		// becoming the document's activeElement). Instead let toggleTooltip() handle the closing.
+		if ( useTooltipRef.current && ! useTooltipRef.current.contains( document.activeElement ) ) {
+			setIsPopoverVisible( false );
+		}
+	}, [ setIsPopoverVisible, useTooltipRef ] );
+
+	return (
+		<span>
+			<button className="info-tooltip__button" onClick={ toggleTooltip } ref={ useTooltipRef }>
+				<Gridicon icon={ icon } size={ iconSize } />
+			</button>
+			{ isPopoverVisible && (
+				<Popover
+					placement={ isMobileViewport ? 'top-end' : 'right' }
+					noArrow={ false }
+					offset={ 10 }
+					focusOnMount={ 'container' }
+					onClose={ hideTooltip }
+				>
+					{ children }
+				</Popover>
+			) }
+		</span>
+	);
+};

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/info-tooltip/style.scss

@@ -0,0 +1,12 @@
+.info-tooltip__button {
+    display: flex;
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--jp-gray-50);
+    padding: 2px;
+    cursor: pointer;
+    svg {
+        margin: 0 auto;
+    }
+}

projects/packages/my-jetpack/_inc/components/product-cards-section/protect-card/protect-value-section.tsx

@@ -0,0 +1,113 @@
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from 'react';
+import useProduct from '../../../data/products/use-product';
+import { getMyJetpackWindowInitialState } from '../../../data/utils/get-my-jetpack-window-state';
+import { timeSince } from '../../../utils/time-since';
+import { InfoTooltip } from './info-tooltip';
+import { ScanAndThreatStatus } from './scan-threats';
+import { useProtectTooltipCopy } from './use-protect-tooltip-copy';
+import type { TooltipContent } from './use-protect-tooltip-copy';
+import type { FC } from 'react';
+
+import './style.scss';
+
+const ProtectValueSection = () => {
+	const slug = 'protect';
+	const { detail } = useProduct( slug );
+	const { isPluginActive = false } = detail || {};
+	const { plugins, themes, scanData } = getMyJetpackWindowInitialState();
+	const {
+		plugins: fromScanPlugins,
+		themes: fromScanThemes,
+		num_threats: numThreats = 0,
+		last_checked: lastScanTime = null,
+	} = scanData;
+
+	const pluginsCount = fromScanPlugins.length || Object.keys( plugins ).length;
+	const themesCount = fromScanThemes.length || Object.keys( themes ).length;
+
+	const timeSinceLastScan = lastScanTime ? timeSince( Date.parse( lastScanTime ) ) : false;
+	const lastScanText = useMemo( () => {
+		if ( isPluginActive ) {
+			if ( timeSinceLastScan ) {
+				return sprintf(
+					/* translators: %s is how long ago since the last scan took place, i.e.- "17 hours ago" */
+					__( 'Last scan: %s', 'jetpack-my-jetpack' ),
+					timeSinceLastScan
+				);
+			}
+			return null;
+		}
+		return (
+			sprintf(
+				/* translators: %d is the number of plugins installed on the site. */
+				_n( '%d plugin', '%d plugins', pluginsCount, 'jetpack-my-jetpack' ),
+				pluginsCount
+			) +
+			' ' +
+			/* translators: The ampersand symbol here (&) is meaning "and". */
+			__( '&', 'jetpack-my-jetpack' ) +
+			'\xa0' + // `\xa0` is a non-breaking space.
+			sprintf(
+				/* translators: %d is the number of themes installed on the site. */
+				_n( '%d theme', '%d themes', themesCount, 'jetpack-my-jetpack' ).replace( ' ', '\xa0' ), // `\xa0` is a non-breaking space.
+				themesCount
+			)
+		);
+	}, [ isPluginActive, timeSinceLastScan, pluginsCount, themesCount ] );
+
+	const tooltipContent = useProtectTooltipCopy( { pluginsCount, themesCount, numThreats } );
+
+	return (
+		<ValueSection
+			isProtectActive={ isPluginActive }
+			lastScanText={ lastScanText }
+			tooltipContent={ tooltipContent }
+		/>
+	);
+};
+
+export default ProtectValueSection;
+
+const ValueSection: FC< {
+	isProtectActive: boolean;
+	lastScanText?: string;
+	tooltipContent: TooltipContent;
+} > = ( { isProtectActive, lastScanText, tooltipContent } ) => {
+	const { pluginsThemesTooltip } = tooltipContent;
+
+	return (
+		<>
+			<div className="value-section__last-scan">
+				{ lastScanText && <div>{ lastScanText }</div> }
+				{ ! isProtectActive && (
+					<InfoTooltip
+						tracksEventName={ 'protect_card_tooltip_open' }
+						tracksEventProps={ {
+							location: 'plugins&themes',
+							status: 'inactive',
+						} }
+					>
+						<>
+							<h3 className="value-section__tooltip-heading">{ pluginsThemesTooltip.title }</h3>
+							<p className="value-section__tooltip-content">{ pluginsThemesTooltip.text }</p>
+						</>
+					</InfoTooltip>
+				) }
+			</div>
+			<div className="value-section">
+				<div className="value-section__scan-threats">
+					<ScanAndThreatStatus />
+				</div>
+				<div className="value-section__auto-firewall">
+					<div className="value-section__heading">Auto-Firewall</div>
+					<div></div>
+				</div>
+				<div className="value-section__logins-blocked">
+					<div className="value-section__heading">Logins Blocked</div>
+					<div></div>
+				</div>
+			</div>
+		</>
+	);
+};