From 212732ab65de85b29ff26f8b9222ddf393959d12 Mon Sep 17 00:00:00 2001
From: vykes-mac <knrymcleish@gmail.com>
Date: Wed, 18 Sep 2024 17:05:43 -0500
Subject: [PATCH] show jetpack boost upsell when appropriate for recommended
 fixes

---
 .../core-web-vitals-details_v2.tsx              |  1 +
 .../components/metrics-insight/index.tsx        | 14 ++++++++++----
 client/performance-profiler/utils/tips.ts       | 17 +++++++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx b/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx
index 119118d3ec65e6..397de072b3c540 100644
--- a/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx
+++ b/client/performance-profiler/components/core-web-vitals-display/core-web-vitals-details_v2.tsx
@@ -94,6 +94,7 @@ export const CoreWebVitalsDetailsV2: React.FC< CoreWebVitalsDetailsProps > = ( {
 			style={ {
 				flexDirection: 'column',
 				borderRadius: '6px',
+				flex: 1,
 			} }
 		>
 			<div className="core-web-vitals-display__description">
diff --git a/client/performance-profiler/components/metrics-insight/index.tsx b/client/performance-profiler/components/metrics-insight/index.tsx
index f9722056706ecc..8f5e7fd82c5d6b 100644
--- a/client/performance-profiler/components/metrics-insight/index.tsx
+++ b/client/performance-profiler/components/metrics-insight/index.tsx
@@ -3,13 +3,16 @@ import { FoldableCard } from '@automattic/components';
 import styled from '@emotion/styled';
 import { useTranslate } from 'i18n-calypso';
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import {
 	FullPageScreenshot,
 	PerformanceMetricsItemQueryResponse,
 } from 'calypso/data/site-profiler/types';
 import { Tip } from 'calypso/performance-profiler/components/tip';
 import { useSupportChatLLMQuery } from 'calypso/performance-profiler/hooks/use-support-chat-llm-query';
-import { tips } from 'calypso/performance-profiler/utils/tips';
+import { loggedInTips, tips } from 'calypso/performance-profiler/utils/tips';
+import { isUserLoggedIn } from 'calypso/state/current-user/selectors';
+import { getSelectedSite } from 'calypso/state/ui/selectors';
 import { InsightContent } from './insight-content';
 import { InsightHeader } from './insight-header';
 
@@ -105,13 +108,16 @@ export const MetricsInsight: React.FC< MetricsInsightProps > = ( props ) => {
 		isWpcom,
 		isEnabled( 'performance-profiler/llm' ) && retrieveInsight
 	);
-	const tip = tips[ insight.id ];
+	const isLoggedIn = useSelector( isUserLoggedIn );
+	const site = useSelector( getSelectedSite );
 
-	if ( props.url && tip ) {
+	const tip = isLoggedIn && isWpcom ? loggedInTips[ insight.id ] : tips[ insight.id ];
+
+	if ( props.url && tip && ! isWpcom ) {
 		tip.link = `https://wordpress.com/setup/hosted-site-migration?from=${ props.url }&ref=performance-profiler-dashboard`;
 	}
 
-	if ( tip && isWpcom ) {
+	if ( tip && isWpcom && ! site?.is_wpcom_atomic ) {
 		tip.link = '';
 	}
 
diff --git a/client/performance-profiler/utils/tips.ts b/client/performance-profiler/utils/tips.ts
index bd141447c2f076..c7efd1405759ed 100644
--- a/client/performance-profiler/utils/tips.ts
+++ b/client/performance-profiler/utils/tips.ts
@@ -11,3 +11,20 @@ export const tips: Record< string, TipProps > = {
 		link: 'https://wordpress.com/setup/hosted-site-migration?ref=performance-profiler-dashboard',
 	},
 };
+
+const createLoggedInTip = (): TipProps => ( {
+	title: translate( 'Did you know?' ),
+	content: translate(
+		'Jetpack Boost automatically optimizes images and delivers them using a Global CDN to ensure they load lightning fast.'
+	),
+	linkText: translate( 'Get Jetpack Boost' ),
+	link: 'https://wordpress.com/plugins/jetpack-boost',
+} );
+
+export const loggedInTips: Record< string, TipProps > = {
+	'uses-responsive-images': createLoggedInTip(),
+	'uses-long-cache-ttl': createLoggedInTip(),
+	'server-response-time': createLoggedInTip(),
+	'render-blocking-resources': createLoggedInTip(),
+	'unminified-css': createLoggedInTip(),
+};