From 01c49fd4d68b9d608024c71c0d13ce79ecfb7ce5 Mon Sep 17 00:00:00 2001
From: Luiz Kowalski <lhkowalski@gmail.com>
Date: Thu, 2 May 2024 15:38:38 -0300
Subject: [PATCH] Small refactor to make changes more easy in the future

---
 .../jetpack-ai/product-page.jsx               | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

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 d4b504c6ac255..1997a2363ee81 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
@@ -40,14 +40,16 @@ export default function () {
 	const [ showNotice, setShowNotice ] = useState( false );
 	const { isRegistered } = useConnection();
 
-	const videoTitle1 = __(
+	const videoTitleContentGeneration = __(
 		'Generate and edit content faster with Jetpack AI Assistant',
 		'jetpack-my-jetpack'
 	);
-	const videoTitle2 = __( 'Build forms using prompts', 'jetpack-my-jetpack' );
-	const videoTitle3 = __( 'Get feedback on posts', 'jetpack-my-jetpack' );
-	const videoTitle4 = __( 'Create featured images with one click', 'jetpack-my-jetpack' );
-	const featuredImageLink = getRedirectUrl( 'jetpack-ai-product-page-featured-image-link' );
+	const videoTitleFeaturedImages = __(
+		'Create featured images with one click',
+		'jetpack-my-jetpack'
+	);
+	const videoTitleForms = __( 'Build forms using prompts', 'jetpack-my-jetpack' );
+	const videoTitleContentFeedback = __( 'Get feedback on posts', 'jetpack-my-jetpack' );
 
 	debug( aiAssistantFeature );
 	const {
@@ -67,6 +69,7 @@ export default function () {
 	const showAllTimeUsage = hasPaidTier || hasUnlimited;
 	const contactHref = getRedirectUrl( 'jetpack-ai-tiers-more-requests-contact' );
 	const feedbackURL = getRedirectUrl( 'jetpack-ai-feedback' );
+	const videoLinkFeaturedImages = getRedirectUrl( 'jetpack-ai-product-page-featured-image-link' );
 
 	// isRegistered works as a flag to know if the page can link to a post creation or not
 	const ctaURL = isRegistered
@@ -266,13 +269,13 @@ export default function () {
 										src="https://videopress.com/embed/GdXmtVtW?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-37.png%3Fw%3D560"
 										allowFullScreen
 										allow="clipboard-write"
-										title={ videoTitle1 }
+										title={ videoTitleContentGeneration }
 									></iframe>
 									<script src="https://videopress.com/videopress-iframe.js"></script>
 								</div>
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
-										{ videoTitle1 }
+										{ videoTitleContentGeneration }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(
@@ -298,13 +301,13 @@ export default function () {
 										src="https://videopress.com/embed/HJCf8cXc?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fone-click-featured-images.png%3Fw%3D560"
 										allowFullScreen
 										allow="clipboard-write"
-										title={ videoTitle4 }
+										title={ videoTitleFeaturedImages }
 									></iframe>
 									<script src="https://videopress.com/videopress-iframe.js"></script>
 								</div>
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
-										{ videoTitle4 }
+										{ videoTitleFeaturedImages }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(
@@ -316,7 +319,7 @@ export default function () {
 										className={ styles[ 'product-interstitial__usage-videos-link' ] }
 										icon={ help }
 										target="_blank"
-										href={ featuredImageLink }
+										href={ videoLinkFeaturedImages }
 									>
 										{ __( 'Learn about featured images', 'jetpack-my-jetpack' ) }
 									</Button>
@@ -331,13 +334,13 @@ export default function () {
 										src="https://videopress.com/embed/OMI3zqid?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-38.png%3Fw%3D560"
 										allowFullScreen
 										allow="clipboard-write"
-										title={ videoTitle2 }
+										title={ videoTitleForms }
 									></iframe>
 									<script src="https://videopress.com/videopress-iframe.js"></script>
 								</div>
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
-										{ videoTitle2 }
+										{ videoTitleForms }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(
@@ -355,6 +358,7 @@ export default function () {
 									</Button>
 								</div>
 							</div>
+
 							<div className={ styles[ 'product-interstitial__usage-videos-item' ] }>
 								<div className={ styles[ 'product-interstitial__usage-videos-video' ] }>
 									<iframe
@@ -363,13 +367,13 @@ export default function () {
 										src="https://videopress.com/embed/0vb0OJm7?posterUrl=https%3A%2F%2Fjetpackme.files.wordpress.com%2F2024%2F02%2Fimage-39.png%3Fw%3D560"
 										allowFullScreen
 										allow="clipboard-write"
-										title={ videoTitle3 }
+										title={ videoTitleContentFeedback }
 									></iframe>
 									<script src="https://videopress.com/videopress-iframe.js"></script>
 								</div>
 								<div className={ styles[ 'product-interstitial__usage-videos-content' ] }>
 									<div className={ styles[ 'product-interstitial__usage-videos-heading' ] }>
-										{ videoTitle3 }
+										{ videoTitleContentFeedback }
 									</div>
 									<div className={ styles[ 'product-interstitial__usage-videos-text' ] }>
 										{ __(