From 3125f00b391284bda8aae9a72cbc4d0562772e36 Mon Sep 17 00:00:00 2001 From: Erick Danzer Date: Fri, 20 Dec 2024 16:09:13 -0700 Subject: [PATCH 1/3] Add 'sending email notice --- .../my-sites/stats/stats-email-detail/index.jsx | 7 ++++++- .../stats/stats-email-top-row/index.jsx | 17 +++++++++++++++-- .../stats/stats-email-top-row/style.scss | 6 ++++++ .../stats/stats-email-top-row/top-card.jsx | 11 ++++++++--- 4 files changed, 35 insertions(+), 6 deletions(-) diff --git a/client/my-sites/stats/stats-email-detail/index.jsx b/client/my-sites/stats/stats-email-detail/index.jsx index 54e5dd48404948..80df1893e483b4 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,16 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className isRequestingEmailStats( state, siteId, postId, PERIOD_ALL_TIME, statType ) ); + /** + * Only show some email stats if post published more than 5 minutes ago. + * As part of this, we fix the date sometimes object having wrong time of day + * and normalize to utc to account for time zones differences. + */ + const correctedPostDateWithTime = moment.parseZone( date._i ).utc(); + const now = moment().utc(); + const minutesSincePublishing = now.diff( correctedPostDateWithTime, 'minutes' ); + const emailIsSending = minutesSincePublishing < 5; + const boxes = useMemo( () => { switch ( statType ) { case 'opens': @@ -33,6 +44,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 +95,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 8b6c2506afc019..8e2249f66d79c5 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; + .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 36a8c4a377be5d..675685e7e507f3 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 }
-
- +
+
); From 8ded4499f625005af3292bb8d456402ce8a7495f Mon Sep 17 00:00:00 2001 From: Erick Danzer Date: Sun, 22 Dec 2024 23:24:49 -0700 Subject: [PATCH 2/3] Use raw post date --- client/my-sites/stats/stats-email-detail/index.jsx | 2 +- client/my-sites/stats/stats-email-top-row/index.jsx | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/client/my-sites/stats/stats-email-detail/index.jsx b/client/my-sites/stats/stats-email-detail/index.jsx index 80df1893e483b4..9efcaca3fc6f88 100644 --- a/client/my-sites/stats/stats-email-detail/index.jsx +++ b/client/my-sites/stats/stats-email-detail/index.jsx @@ -251,7 +251,7 @@ class StatsEmailDetail extends Component { siteId={ siteId } postId={ postId } statType={ statType } - date={ date } + post={ post } /> diff --git a/client/my-sites/stats/stats-email-top-row/index.jsx b/client/my-sites/stats/stats-email-top-row/index.jsx index c7577ecc24dfa2..d48bf31cf9f0fd 100644 --- a/client/my-sites/stats/stats-email-top-row/index.jsx +++ b/client/my-sites/stats/stats-email-top-row/index.jsx @@ -14,7 +14,7 @@ import { import TopCard from './top-card'; import './style.scss'; -export default function StatsEmailTopRow( { siteId, postId, statType, className, date } ) { +export default function StatsEmailTopRow( { siteId, postId, statType, className, post } ) { const translate = useTranslate(); const counts = useSelector( ( state ) => @@ -25,14 +25,10 @@ export default function StatsEmailTopRow( { siteId, postId, statType, className, ); /** - * Only show some email stats if post published more than 5 minutes ago. - * As part of this, we fix the date sometimes object having wrong time of day - * and normalize to utc to account for time zones differences. + * Only show email stats if post was published more than 5 minutes ago. */ - const correctedPostDateWithTime = moment.parseZone( date._i ).utc(); - const now = moment().utc(); - const minutesSincePublishing = now.diff( correctedPostDateWithTime, 'minutes' ); - const emailIsSending = minutesSincePublishing < 5; + const now = moment(); + const emailIsSending = post?.date ? now.diff( moment( post?.date ), 'minutes' ) < 5 : false; const boxes = useMemo( () => { switch ( statType ) { From 80dfd0fa97b620e90abb919c5d52a2bdd61b9b65 Mon Sep 17 00:00:00 2001 From: Erick Danzer Date: Mon, 23 Dec 2024 11:10:19 -0700 Subject: [PATCH 3/3] Use is- prefix on class --- client/my-sites/stats/stats-email-top-row/style.scss | 2 +- client/my-sites/stats/stats-email-top-row/top-card.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 8e2249f66d79c5..6db144ca227e53 100644 --- a/client/my-sites/stats/stats-email-top-row/style.scss +++ b/client/my-sites/stats/stats-email-top-row/style.scss @@ -9,7 +9,7 @@ $vertical-margin: 32px; color: var(--studio-gray-100); font-size: $font-body-small; margin-bottom: $vertical-margin; - .sending-email .highlight-card-count-value { + .is-sending-email .highlight-card-count-value { font-size: $font-body-small; font-style: italic; font-family: $sans; 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 675685e7e507f3..72b4b75248821a 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 @@ -36,7 +36,7 @@ const TopCard = ( { heading, icon, value, isLoading, emailIsSending = false } )
{ icon }
{ heading }
-
+