From ff937e8eac3b4fa0db2cf87bb3c6a0b41a4d6f49 Mon Sep 17 00:00:00 2001
From: Dognose <dognose24@users.noreply.github.com>
Date: Mon, 25 Nov 2024 04:34:38 +0800
Subject: [PATCH] Tweak the static display for the hour period. (#96664)

---
 client/components/stats-interval-dropdown/index.jsx  | 12 ++++++++++--
 client/components/stats-interval-dropdown/style.scss |  8 ++++++++
 client/my-sites/stats/stats-chart-tabs/style.scss    |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/components/stats-interval-dropdown/index.jsx b/client/components/stats-interval-dropdown/index.jsx
index e64b53feb81e2e..c80df41e68b1a2 100644
--- a/client/components/stats-interval-dropdown/index.jsx
+++ b/client/components/stats-interval-dropdown/index.jsx
@@ -80,7 +80,7 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 	function getDisplayLabel() {
 		// If the period is not in the intervals list, capitalize it and show in the label - however user wouldn't be able to select it.
 		// TODO: this is a temporary solution, we should remove this once we have all the intervals in the list.
-		return intervals[ period ]?.label ?? capitalize( period );
+		return intervals[ period ]?.label ?? `${ capitalize( period ) }s`;
 	}
 
 	function onSelectionHandler( interval ) {
@@ -93,7 +93,10 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 		page( generateNewLink( interval ) );
 	}
 
-	return (
+	// Check if the selected period is in the intervals list.
+	const selectedPeriod = intervals[ period ];
+
+	return selectedPeriod ? (
 		<Dropdown
 			className="stats-interval-dropdown"
 			renderToggle={ ( { isOpen, onToggle } ) => (
@@ -114,6 +117,11 @@ const IntervalDropdown = ( { slug, period, queryParams, intervals, onGatedHandle
 			) }
 			focusOnMount={ false }
 		/>
+	) : (
+		// TODO: Tweak the styles or move this to another place for better UX.
+		<div className="stats-interval-display">
+			<label>{ getDisplayLabel() }</label>
+		</div>
 	);
 };
 
diff --git a/client/components/stats-interval-dropdown/style.scss b/client/components/stats-interval-dropdown/style.scss
index d67e2329567ee0..a2960a34c76817 100644
--- a/client/components/stats-interval-dropdown/style.scss
+++ b/client/components/stats-interval-dropdown/style.scss
@@ -64,3 +64,11 @@
 		background-color: var(--color-accent-5);
 	}
 }
+
+// Mimic the style of Button component.
+.stats-interval-display {
+	font-family: $font-sf-pro-text;
+	font-size: 13px; // stylelint-disable-line declaration-property-unit-allowed-list
+	font-weight: 400;
+	line-height: 36px;
+}
\ No newline at end of file
diff --git a/client/my-sites/stats/stats-chart-tabs/style.scss b/client/my-sites/stats/stats-chart-tabs/style.scss
index 62ce4e27cabf17..8404e638dcca8c 100644
--- a/client/my-sites/stats/stats-chart-tabs/style.scss
+++ b/client/my-sites/stats/stats-chart-tabs/style.scss
@@ -263,7 +263,7 @@ ul.module-tabs {
 			border-top-color: #DCDCDE;
 		}
 
-		.stats-interval-dropdown {
+		.stats-interval-dropdown, .stats-interval-display {
 			margin-left: 48px;
 
 			& > .components-button {