Add stat trends for videopress my jetpack card (#38868)

* Add tooltip for installed with no videos * Add tooltip for inactive with videos * Add tooltips for active states * Update tooltip location when videos are present but plugin is inactive * Move info tooltip to heading * Move info tooltip to heading * Update definition of videopress active * Simplify logic of videopress value section * Add stats trends * Add changelog * Adjust placement of arrow * Re-add period
Automattic · Aug 19, 2024 · 290118d · 290118d
1 parent 822544b
commit 290118d
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 10 deletions.
diff --git a/...ects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss b/...ects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss
@@ -20,24 +20,54 @@ 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 {
         font-size: calc( var( --font-headline-small ) - 4px );
         color: var( --jp-gray-90 );
-        line-height: 1.125;       
+        line-height: 1;
+    }
+
+    &__previous-value {
+        display: flex;
+        align-items: center;
+
+        font-size: var( --font-body-extra-small );
+        line-height: 18px;
+        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/...ages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts b/...ages/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/...etpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx b/...etpack/_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 (
+		<div className="videopress-card__value-section__value-container">
+			<span className="videopress-card__value-section__value">{ formattedValue }</span>
+
+			{ value !== previousValue && (
+				<div
+					className={ clsx(
+						'videopress-card__value-section__previous-value',
+						hasValueIncreased ? 'increase' : 'decrease'
+					) }
+				>
+					<Icon size={ 18 } icon={ hasValueIncreased ? arrowUp : arrowDown } />
+					<span>{ formattedDifference }</span>
+				</div>
+			) }
+		</div>
+	);
+};
+
 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
 					</InfoTooltip>
 				</span>
 
-				<span className="videopress-card__value-section__value">
-					{ formatNumber( currentViews, shortenedNumberConfig ) }
-				</span>
+				<ValueSection
+					value={ currentViews }
+					previousValue={ previousViews }
+					formattedValue={ formatNumber( currentViews, shortenedNumberConfig ) }
+					formattedDifference={ formatNumber( viewsDifference, shortenedNumberConfig ) }
+				/>
 			</div>
 
 			<div className="videopress-card__value-section__container">
@@ -121,6 +164,7 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 						tracksEventProps={ {
 							location: 'watch_time',
 							current_watch_time: currentWatchTime,
+							previous_watch_time: previousWatchTime,
 							...tracksProps,
 						} }
 					>
@@ -129,9 +173,12 @@ const VideoPressValueSection: FC< VideoPressValueSectionProps > = ( { isPluginAc
 					</InfoTooltip>
 				</span>
 
-				<span className="videopress-card__value-section__value">
-					{ formatTime( currentWatchTime ) }
-				</span>
+				<ValueSection
+					value={ currentWatchTime }
+					previousValue={ previousWatchTime }
+					formattedValue={ formatTime( currentWatchTime ) }
+					formattedDifference={ formatTime( watchTimeDifference ) }
+				/>
 			</div>
 		</div>
 	);

diff --git a/projects/packages/my-jetpack/changelog/add-stat-trends-videopress-card b/projects/packages/my-jetpack/changelog/add-stat-trends-videopress-card
@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+Add stat trends for videopress card