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 => {
) }
) }
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 (