From 22f288b0b94c8c4caaccde6b45630b7d4a688762 Mon Sep 17 00:00:00 2001
From: Dylan Munson <65001528+CodeyGuyDylan@users.noreply.github.com>
Date: Fri, 8 Mar 2024 10:05:25 -0700
Subject: [PATCH] Show stats card in products table when large card isnt shown
 (#36136)

* Show small stats card when large one is not shown

* changelog
---
 .../my-jetpack/_inc/components/my-jetpack-screen/index.jsx   | 4 ++--
 .../_inc/components/product-cards-section/index.jsx          | 5 ++++-
 ...w-stats-card-in-products-table-when-large-card-isnt-shown | 4 ++++
 projects/packages/my-jetpack/global.d.ts                     | 2 +-
 projects/packages/my-jetpack/src/class-initializer.php       | 4 ++--
 5 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 projects/packages/my-jetpack/changelog/update-show-stats-card-in-products-table-when-large-card-isnt-shown

diff --git a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
index d6fbe535ecc12..bb50488089426 100644
--- a/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/my-jetpack-screen/index.jsx
@@ -95,7 +95,7 @@ const GlobalNotice = ( { message, options } ) => {
 export default function MyJetpackScreen() {
 	useConnectionWatcher();
 	const { hasBeenDismissed = false } = getMyJetpackWindowState( 'welcomeBanner' );
-	const { showJetpackStatsCard = false } = getMyJetpackWindowState( 'myJetpackFlags' );
+	const { showFullJetpackStatsCard = false } = getMyJetpackWindowState( 'myJetpackFlags' );
 	const { jetpackManage = {}, adminUrl } = getMyJetpackWindowState();
 
 	const { currentNotice } = useContext( NoticeContext );
@@ -163,7 +163,7 @@ export default function MyJetpackScreen() {
 					{ message && ( hasBeenDismissed || ! isNewUser ) && (
 						<Col>{ <GlobalNotice message={ message } options={ options } /> }</Col>
 					) }
-					{ showJetpackStatsCard && (
+					{ showFullJetpackStatsCard && (
 						<Col
 							className={ classnames( {
 								[ styles.stats ]: statsDetails?.status !== PRODUCT_STATUSES.ERROR,
diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
index e103359c1ce32..0f8ca14a15db9 100644
--- a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.jsx
@@ -10,6 +10,7 @@ import CrmCard from './crm-card';
 import ProtectCard from './protect-card';
 import SearchCard from './search-card';
 import SocialCard from './social-card';
+import StatsCard from './stats-card';
 import styles from './style.module.scss';
 import VideopressCard from './videopress-card';
 
@@ -20,6 +21,7 @@ import VideopressCard from './videopress-card';
  */
 const ProductCardsSection = () => {
 	const { isAtomic = false, userIsAdmin = false } = getMyJetpackWindowState();
+	const { showFullJetpackStatsCard = false } = getMyJetpackWindowState( 'myJetpackFlags' );
 
 	const items = {
 		backups: BackupCard,
@@ -28,7 +30,8 @@ const ProductCardsSection = () => {
 		boost: BoostCard,
 		search: SearchCard,
 		videopress: VideopressCard,
-		// Stats card is shown in the <StatsSection/> component.
+		// If we aren't showing the big stats card, we show the smaller one with the rest.
+		stats: ! showFullJetpackStatsCard ? StatsCard : null,
 		crm: CrmCard,
 		creator: ! isAtomic ? CreatorCard : null,
 		social: SocialCard,
diff --git a/projects/packages/my-jetpack/changelog/update-show-stats-card-in-products-table-when-large-card-isnt-shown b/projects/packages/my-jetpack/changelog/update-show-stats-card-in-products-table-when-large-card-isnt-shown
new file mode 100644
index 0000000000000..6854f2aff81ec
--- /dev/null
+++ b/projects/packages/my-jetpack/changelog/update-show-stats-card-in-products-table-when-large-card-isnt-shown
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Show small stats card in table if large stats card isn't showing
diff --git a/projects/packages/my-jetpack/global.d.ts b/projects/packages/my-jetpack/global.d.ts
index 50ab60b3ae4a4..8f188f1f7fc03 100644
--- a/projects/packages/my-jetpack/global.d.ts
+++ b/projects/packages/my-jetpack/global.d.ts
@@ -22,7 +22,7 @@ interface Window {
 		loadAddLicenseScreen: string;
 		myJetpackCheckoutUri: string;
 		myJetpackFlags: {
-			showJetpackStatsCard: boolean;
+			showFullJetpackStatsCard: boolean;
 			videoPressStats: boolean;
 		};
 		lifecycleStats: {
diff --git a/projects/packages/my-jetpack/src/class-initializer.php b/projects/packages/my-jetpack/src/class-initializer.php
index 8bf19a44ccf9e..17693901cbbc1 100644
--- a/projects/packages/my-jetpack/src/class-initializer.php
+++ b/projects/packages/my-jetpack/src/class-initializer.php
@@ -396,8 +396,8 @@ public static function is_user_from_known_host() {
 	 */
 	public static function get_my_jetpack_flags() {
 		$flags = array(
-			'videoPressStats'      => Jetpack_Constants::is_true( 'JETPACK_MY_JETPACK_VIDEOPRESS_STATS_ENABLED' ),
-			'showJetpackStatsCard' => class_exists( 'Jetpack' ),
+			'videoPressStats'          => Jetpack_Constants::is_true( 'JETPACK_MY_JETPACK_VIDEOPRESS_STATS_ENABLED' ),
+			'showFullJetpackStatsCard' => class_exists( 'Jetpack' ),
 		);
 
 		return $flags;