Status card, rename prop to suppressNeedsAttention, per feedback.

Automattic · Dec 20, 2024 · b4cfce6 · b4cfce6
1 parent b70b4b5
commit b4cfce6
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 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
@@ -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
@@ -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 }>