From 3c879e02c9f0a9822e66bb97435ee1b40d6b87bf Mon Sep 17 00:00:00 2001
From: Luiz Kowalski <lhkowalski@gmail.com>
Date: Thu, 2 May 2024 18:31:27 -0300
Subject: [PATCH] Add 'new' badge to featured image video on Jetpack AI product
 page

---
 .../jetpack-ai/product-page.jsx                    |  7 +++++++
 .../jetpack-ai/style.module.scss                   | 14 ++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
index 7089c73725828..92f1b085eeddb 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx
@@ -148,6 +148,12 @@ export default function () {
 		setShowNotice( showRenewalNotice || showUpgradeNotice );
 	}, [ showRenewalNotice, showUpgradeNotice ] );
 
+	const newBadge = (
+		<span className={ styles[ 'product-interstitial__new-badge' ] }>
+			{ __( 'New', 'jetpack-my-jetpack' ) }{ ' ' }
+		</span>
+	);
+
 	return (
 		<AdminPage showHeader={ false } showBackground={ true }>
 			<Container fluid horizontalSpacing={ 3 } horizontalGap={ 2 }>
@@ -312,6 +318,7 @@ export default function () {
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
 										{ videoTitleFeaturedImages }
+										{ newBadge }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(
diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss
index d2da56ccf9b3a..c7b649dbfa3f0 100644
--- a/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss
+++ b/projects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/style.module.scss
@@ -247,3 +247,17 @@
 .product-interstitial__ai-notice {
 	margin-bottom: calc( var( --spacing-base ) * 8 );
 }
+
+.product-interstitial__new-badge {
+	color: var( --jp-green-40 );
+	border: 1px solid var( --jp-green-40 );
+	border-radius: 4px;
+	text-transform: uppercase;
+	padding: 2px 8px 2px 8px;
+	font-size: 12px;
+	font-weight: 500;
+	margin-left: 5px;
+	height: 22px;
+	position: relative;
+	top: -2px;
+}