From b4cfce6b50a7ffef535f250002673c31bcc7f7db Mon Sep 17 00:00:00 2001
From: Bryan Elliott <bryan@elliottprogrammer.com>
Date: Fri, 20 Dec 2024 13:32:26 -0500
Subject: [PATCH] Status card, rename prop to suppressNeedsAttention, per
 feedback.

---
 .../_inc/components/product-card/index.tsx    |  2 +-
 .../_inc/components/product-card/status.tsx   | 32 +++++++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
index 26164309851f4..c05126d83b359 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
@@ -221,11 +221,11 @@ const ProductCard: FC< ProductCardProps > = props => {
 						) }
 					</div>
 					<Status
-						slug={ slug }
 						status={ status }
 						isFetching={ isLoading }
 						isInstallingStandalone={ isInstallingStandalone }
 						isOwned={ isOwned }
+						suppressNeedsAttention={ slug === 'protect' }
 					/>
 				</div>
 			) }
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/status.tsx b/projects/packages/my-jetpack/_inc/components/product-card/status.tsx
index c56003f8df0f8..6ef4c935173a9 100644
--- a/projects/packages/my-jetpack/_inc/components/product-card/status.tsx
+++ b/projects/packages/my-jetpack/_inc/components/product-card/status.tsx
@@ -6,20 +6,20 @@ import styles from './style.module.scss';
 import type { FC } from 'react';
 
 interface StatusProps {
-	productSlug: JetpackModule;
 	status: ProductStatus;
 	isFetching: boolean;
 	isInstallingStandalone: boolean;
 	isOwned: boolean;
+	suppressNeedsAttention?: boolean;
 }
 
 type StatusStateFunction = (
-	slug: JetpackModule,
 	status: ProductStatus,
-	isOwned: boolean
+	isOwned: boolean,
+	suppressNeedsAttention: boolean
 ) => string;
 
-const getStatusLabel: StatusStateFunction = ( slug, status, isOwned ) => {
+const getStatusLabel: StatusStateFunction = ( status, isOwned, suppressNeedsAttention ) => {
 	switch ( status ) {
 		case PRODUCT_STATUSES.ACTIVE:
 		case PRODUCT_STATUSES.CAN_UPGRADE:
@@ -49,7 +49,7 @@ const getStatusLabel: StatusStateFunction = ( slug, status, isOwned ) => {
 		case PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR: {
 			const activeText = __( 'Active', 'jetpack-my-jetpack' );
 			const needsAttentionText = __( 'Needs attention', 'jetpack-my-jetpack' );
-			if ( slug === 'protect' ) {
+			if ( suppressNeedsAttention ) {
 				return activeText;
 			}
 			return needsAttentionText;
@@ -59,7 +59,7 @@ const getStatusLabel: StatusStateFunction = ( slug, status, isOwned ) => {
 	}
 };
 
-const getStatusClassName: StatusStateFunction = ( productSlug, status, isOwned ) => {
+const getStatusClassName: StatusStateFunction = ( status, isOwned, suppressNeedsAttention ) => {
 	switch ( status ) {
 		case PRODUCT_STATUSES.ACTIVE:
 		case PRODUCT_STATUSES.CAN_UPGRADE:
@@ -79,15 +79,15 @@ const getStatusClassName: StatusStateFunction = ( productSlug, status, isOwned )
 		case PRODUCT_STATUSES.NEEDS_ATTENTION__WARNING:
 			/**
 			 * For the Protect card, even when it has a NEEDS_ATTENTION__{WARNING | ERROR}
-			 * status (it means threats have been detected), we still want to show the card
+			 * status (it means Threats have been detected), we still want to show the card
 			 * status as 'Active'.
 			 */
-			if ( productSlug === 'protect' ) {
+			if ( suppressNeedsAttention ) {
 				return styles.active;
 			}
 			return styles.warning;
 		case PRODUCT_STATUSES.NEEDS_ATTENTION__ERROR:
-			if ( productSlug === 'protect' ) {
+			if ( suppressNeedsAttention ) {
 				return styles.active;
 			}
 			return styles.error;
@@ -97,16 +97,20 @@ const getStatusClassName: StatusStateFunction = ( productSlug, status, isOwned )
 };
 
 const Status: FC< StatusProps > = ( {
-	productSlug,
 	status,
 	isFetching,
 	isInstallingStandalone,
 	isOwned,
+	suppressNeedsAttention = false,
 } ) => {
-	const flagLabel = getStatusLabel( productSlug, status, isOwned );
-	const statusClassName = clsx( styles.status, getStatusClassName( productSlug, status, isOwned ), {
-		[ styles[ 'is-fetching' ] ]: isFetching || isInstallingStandalone,
-	} );
+	const flagLabel = getStatusLabel( status, isOwned, suppressNeedsAttention );
+	const statusClassName = clsx(
+		styles.status,
+		getStatusClassName( status, isOwned, suppressNeedsAttention ),
+		{
+			[ styles[ 'is-fetching' ] ]: isFetching || isInstallingStandalone,
+		}
+	);
 
 	return (
 		<Text variant="label" className={ statusClassName }>