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 (