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

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

@@ -1,20 +1,50 @@
 import { __ } from '@wordpress/i18n';
-import { PRODUCT_STATUSES } from '../../../constants';
+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';
-import type { FC } from 'react';
 
 const ProtectCard: FC< { admin: boolean } > = ( { admin } ) => {
-	// Override the primary action button to read "Protect your site" instead
-	// of the default text, "Learn more".
-	const primaryActionOverride = {
-		[ PRODUCT_STATUSES.ABSENT ]: {
-			label: __( 'Protect your site', 'jetpack-my-jetpack' ),
-		},
+	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="protect" primaryActionOverride={ primaryActionOverride }>
+		<ProductCard
+			admin={ admin }
+			slug={ slug }
+			upgradeInInterstitial={ true }
+			secondaryAction={ viewButton }
+			Description={ noDescription }
+		>
 			<ProtectValueSection />
 		</ProductCard>
 	);

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

@@ -1,11 +1,10 @@
-import { Gridicon } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
-import { __, sprintf } from '@wordpress/i18n';
-import { useState, useCallback, useMemo, useRef } from 'react';
+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';
@@ -39,11 +38,21 @@ const ProtectValueSection = () => {
 			}
 			return null;
 		}
-		return sprintf(
-			/* translators: `\xa0` is a non-breaking space. %1$d is the number (integer) of plugins and %2$d is the number (integer) of themes the site has. */
-			__( '%1$d plugins &\xa0%2$d\xa0themes', 'jetpack-my-jetpack' ),
-			pluginsCount,
-			themesCount
+		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 ] );
 
@@ -65,59 +74,30 @@ const ValueSection: FC< {
 	lastScanText?: string;
 	tooltipContent: TooltipContent;
 } > = ( { isProtectActive, lastScanText, tooltipContent } ) => {
-	const useTooltipRef = useRef< HTMLButtonElement >();
-	const isMobileViewport: boolean = useViewportMatch( 'medium', '<' );
-	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
-	// TODO: `scanThreatsTooltip` will be utilized in a followup PR.
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	const { pluginsThemesTooltip, scanThreatsTooltip } = tooltipContent;
-
-	const toggleTooltip = useCallback(
-		() => setIsPopoverVisible( prevState => ! prevState ),
-		[ setIsPopoverVisible ]
-	);
-	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 ] );
+	const { pluginsThemesTooltip } = tooltipContent;
 
 	return (
 		<>
 			<div className="value-section__last-scan">
 				{ lastScanText && <div>{ lastScanText }</div> }
 				{ ! isProtectActive && (
-					<div>
-						<button
-							className="value-section__tooltip-button"
-							onClick={ toggleTooltip }
-							ref={ useTooltipRef }
-						>
-							<Gridicon icon="info-outline" size={ 14 } />
-						</button>
-						{ isPopoverVisible && (
-							<Popover
-								placement={ isMobileViewport ? 'top-end' : 'right' }
-								noArrow={ false }
-								offset={ 10 }
-								focusOnMount={ 'container' }
-								onClose={ hideTooltip }
-							>
-								<>
-									<h3 className="value-section__tooltip-heading">{ pluginsThemesTooltip.title }</h3>
-									<p className="value-section__tooltip-content">{ pluginsThemesTooltip.text }</p>
-								</>
-							</Popover>
-						) }
-					</div>
+					<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">
-					<div className="value-section__heading">Scan</div>
-					<div></div>
+					<ScanAndThreatStatus />
 				</div>
 				<div className="value-section__auto-firewall">
 					<div className="value-section__heading">Auto-Firewall</div>