Small refactor to make changes more easy in the future

Automattic · May 2, 2024 · 01c49fd · 01c49fd
1 parent 27494b6
commit 01c49fd
Showing 1 changed file with 18 additions and 14 deletions.
diff --git a/...ects/packages/my-jetpack/_inc/components/product-interstitial/jetpack-ai/product-page.jsx b/...ects/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' ] }>
 										{ __(