Email stats: Show 'sending' notice (#97726)

Automattic · Dec 23, 2024 · a4ecff1 · a4ecff1
1 parent a64a599
commit a4ecff1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/client/my-sites/stats/stats-email-detail/index.jsx b/client/my-sites/stats/stats-email-detail/index.jsx
@@ -247,7 +247,12 @@ class StatsEmailDetail extends Component {
 							<div className="stats__email-wrapper">
 								<h3 className="highlight-cards-heading">{ this.getTitle( statType ) }</h3>
 
-								<StatsEmailTopRow siteId={ siteId } postId={ postId } statType={ statType } />
+								<StatsEmailTopRow
+									siteId={ siteId }
+									postId={ postId }
+									statType={ statType }
+									post={ post }
+								/>
 
 								<StatsPeriodHeader>
 									<StatsPeriodNavigation

diff --git a/client/my-sites/stats/stats-email-top-row/index.jsx b/client/my-sites/stats/stats-email-top-row/index.jsx
@@ -3,6 +3,7 @@ import { eye } from '@automattic/components/src/icons';
 import { Icon } from '@wordpress/icons';
 import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
+import moment from 'moment';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { PERIOD_ALL_TIME } from 'calypso/state/stats/emails/constants';
@@ -13,7 +14,7 @@ import {
 import TopCard from './top-card';
 import './style.scss';
 
-export default function StatsEmailTopRow( { siteId, postId, statType, className } ) {
+export default function StatsEmailTopRow( { siteId, postId, statType, className, post } ) {
 	const translate = useTranslate();
 
 	const counts = useSelector( ( state ) =>
@@ -23,6 +24,12 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className
 		isRequestingEmailStats( state, siteId, postId, PERIOD_ALL_TIME, statType )
 	);
 
+	/**
+	 * Only show email stats if post was published more than 5 minutes ago.
+	 */
+	const now = moment();
+	const emailIsSending = post?.date ? now.diff( moment( post?.date ), 'minutes' ) < 5 : false;
+
 	const boxes = useMemo( () => {
 		switch ( statType ) {
 			case 'opens':
@@ -33,6 +40,7 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className
 							value={ counts?.total_sends ?? 0 }
 							isLoading={ isRequesting && ! counts?.hasOwnProperty( 'total_sends' ) }
 							icon={ <Gridicon icon="mail" /> }
+							emailIsSending={ emailIsSending }
 						/>
 						{ counts?.unique_opens ? (
 							<TopCard
@@ -53,6 +61,7 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className
 							value={ counts?.opens_rate ? `${ Math.round( counts?.opens_rate * 100 ) }%` : null }
 							isLoading={ isRequesting && ! counts?.hasOwnProperty( 'opens_rate' ) }
 							icon={ <Gridicon icon="trending" /> }
+							emailIsSending={ emailIsSending }
 						/>
 					</>
 				);
@@ -82,7 +91,7 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className
 			default:
 				return null;
 		}
-	}, [ statType, counts, translate, isRequesting ] );
+	}, [ statType, counts, translate, isRequesting, emailIsSending ] );
 
 	return (
 		<div className={ clsx( 'stats-email-open-top-row', className ?? null ) }>

diff --git a/client/my-sites/stats/stats-email-top-row/style.scss b/client/my-sites/stats/stats-email-top-row/style.scss
@@ -9,6 +9,12 @@ $vertical-margin: 32px;
 	color: var(--studio-gray-100);
 	font-size: $font-body-small;
 	margin-bottom: $vertical-margin;
+	.is-sending-email .highlight-card-count-value {
+		font-size: $font-body-small;
+		font-style: italic;
+		font-family: $sans;
+		padding-top: 10px;
+	}
 }
 
 .stats__email-detail {

diff --git a/client/my-sites/stats/stats-email-top-row/top-card.jsx b/client/my-sites/stats/stats-email-top-row/top-card.jsx
@@ -1,4 +1,5 @@
 import { Card, ShortenedNumber, Spinner } from '@automattic/components';
+import { useTranslate } from 'i18n-calypso';
 
 /* This is a very stripped down version of HighlightCard
  * HighlightCard doesn't support non-numeric values
@@ -29,13 +30,17 @@ const TopCardValue = ( { value, isLoading } ) => {
 	);
 };
 
-const TopCard = ( { heading, icon, value, isLoading } ) => {
+const TopCard = ( { heading, icon, value, isLoading, emailIsSending = false } ) => {
+	const translate = useTranslate();
 	return (
 		<Card className="highlight-card">
 			<div className="highlight-card-icon">{ icon }</div>
 			<div className="highlight-card-heading">{ heading }</div>
-			<div className="highlight-card-count">
-				<TopCardValue value={ value } isLoading={ isLoading } />
+			<div className={ `highlight-card-count ${ emailIsSending ? 'is-sending-email' : '' }` }>
+				<TopCardValue
+					value={ emailIsSending ? translate( 'Still sending emails.' ) : value }
+					isLoading={ isLoading }
+				/>
 			</div>
 		</Card>
 	);