diff --git a/client/my-sites/stats/stats-email-detail/index.jsx b/client/my-sites/stats/stats-email-detail/index.jsx index 54e5dd4840494..9efcaca3fc6f8 100644 --- 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 {

{ this.getTitle( statType ) }

- + @@ -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={ } + emailIsSending={ emailIsSending } /> { counts?.unique_opens ? ( } + 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 (
diff --git a/client/my-sites/stats/stats-email-top-row/style.scss b/client/my-sites/stats/stats-email-top-row/style.scss index 8b6c2506afc01..6db144ca227e5 100644 --- 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 index 36a8c4a377be5..72b4b75248821 100644 --- 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 (
{ icon }
{ heading }
-
- +
+
);