diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss index 5e704d3f7ae06..c9f3ee18557a2 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss @@ -20,13 +20,19 @@ p.description { .videopress-card__value-section { display: flex; + gap: 0.75rem; + justify-content: space-between; &__container { display: flex; flex-direction: column; align-items: flex-start; + } - width: 50%; + &__value-container { + display: flex; + align-items: flex-end; + flex-wrap: wrap; } &__value { @@ -35,9 +41,32 @@ p.description { line-height: 1.125; } + &__previous-value { + display: flex; + align-items: center; + + font-size: var( --font-body-extra-small ); + font-weight: 600; + } + + &__previous-value.increase { + * { + color: var( --jp-green-50 ); + fill: var( --jp-green-50 ); + } + } + + &__previous-value.decrease { + * { + color: var( --jp-red-50 ); + fill: var( --jp-red-50 ); + } + } + &__heading { display: flex; align-items: center; + text-wrap: nowrap; } } diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts index 5709f45c237bc..b64db028266e1 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts @@ -66,11 +66,10 @@ const useTooltipCopy = () => { ), }; - // todo: Add "comparing it with the performance of the previous 30 days." once we have the comparison in place. const watchTime = { title: __( '30-Day viewing time', 'jetpack-my-jetpack' ), text: __( - 'This metric shows total video viewing time for the last 30 days.', + 'This metric shows total video viewing time for the last 30 days, comparing it with the performance of the previous 30 days.', 'jetpack-my-jetpack' ), }; diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx index f28fd5fffb532..d6e5b06490fce 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +import { arrowUp, arrowDown, Icon } from '@wordpress/icons'; import clsx from 'clsx'; import { PRODUCT_SLUGS } from '../../../data/constants'; import useProduct from '../../../data/products/use-product'; @@ -16,6 +17,39 @@ interface VideoPressValueSectionProps { data: Window[ 'myJetpackInitialState' ][ 'videopress' ]; } +interface ValueSectionProps { + value: number; + previousValue: number; + formattedValue: string; + formattedDifference: string; +} + +const ValueSection: FC< ValueSectionProps > = ( { + value, + previousValue, + formattedValue, + formattedDifference, +} ) => { + const hasValueIncreased = value > previousValue; + return ( +
+ { formattedValue } + + { value !== previousValue && ( +
+ + { formattedDifference } +
+ ) } +
+ ); +}; + const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginActive, data } ) => { const { detail } = useProduct( PRODUCT_SLUGS.VIDEOPRESS ); const { status, hasPaidPlanForProduct } = detail || {}; @@ -64,6 +98,11 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc const currentViews = featuredStats?.data?.views?.current; const currentWatchTime = featuredStats?.data?.watch_time?.current; + const previousViews = featuredStats?.data?.views?.previous; + const previousWatchTime = featuredStats?.data?.watch_time?.previous; + + const viewsDifference = Math.abs( currentViews - previousViews ); + const watchTimeDifference = Math.abs( currentWatchTime - previousWatchTime ); if ( currentViews === undefined || currentWatchTime === undefined ) { return null; @@ -85,6 +124,7 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc tracksEventProps={ { location: 'views', current_views: currentViews, + previous_views: previousViews, ...tracksProps, } } > @@ -102,9 +142,12 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc - - { formatNumber( currentViews, shortenedNumberConfig ) } - +
@@ -121,6 +164,7 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc tracksEventProps={ { location: 'watch_time', current_watch_time: currentWatchTime, + previous_watch_time: previousWatchTime, ...tracksProps, } } > @@ -130,9 +174,12 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc - - { formatTime( currentWatchTime ) } - +
);