From 35df62c37e529316beea58f6dacb94161628b955 Mon Sep 17 00:00:00 2001
From: Peter Petrov <peter.petrov89@gmail.com>
Date: Mon, 18 Dec 2023 19:26:23 +0200
Subject: [PATCH 1/2] Update Tips to react

---
 .../boost/app/assets/src/css/admin-style.scss |  1 -
 .../layout/SettingsPage/SettingsPage.svelte   |  4 +-
 .../src/js/layout/SettingsPage/Tips.svelte    | 45 ----------------
 .../SettingsPage/tips/tips.module.scss}       | 17 +++---
 .../src/js/layout/SettingsPage/tips/tips.tsx  | 53 +++++++++++++++++++
 5 files changed, 65 insertions(+), 55 deletions(-)
 delete mode 100644 projects/plugins/boost/app/assets/src/js/layout/SettingsPage/Tips.svelte
 rename projects/plugins/boost/app/assets/src/{css/components/benchmarks.scss => js/layout/SettingsPage/tips/tips.module.scss} (78%)
 create mode 100644 projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.tsx

diff --git a/projects/plugins/boost/app/assets/src/css/admin-style.scss b/projects/plugins/boost/app/assets/src/css/admin-style.scss
index ac77d6b0a4578..fb0f03c51e008 100644
--- a/projects/plugins/boost/app/assets/src/css/admin-style.scss
+++ b/projects/plugins/boost/app/assets/src/css/admin-style.scss
@@ -8,7 +8,6 @@
 // Components
 @import 'components/connection';
 @import 'components/feature-toggle';
-@import 'components/benchmarks';
 @import 'components/error-message';
 @import 'components/critical-css';
 @import 'components/close-button';
diff --git a/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/SettingsPage.svelte b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/SettingsPage.svelte
index 1c87a736dcde6..bddee0999edff 100644
--- a/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/SettingsPage.svelte
+++ b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/SettingsPage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SpeedScore from '../../features/speed-score/speed-score';
 	import Support from './support/support';
-	import Tips from './Tips.svelte';
+	import Tips from './tips/tips';
 	import ReactComponent from '$features/ReactComponent.svelte';
 	import Footer from '$layout/footer/footer';
 	import Header from '$layout/header/header';
@@ -37,7 +37,7 @@
 		<slot />
 	</div>
 
-	<Tips />
+	<ReactComponent this={Tips} />
 
 	{#if $hasPrioritySupport}
 		<ReactComponent this={Support} />
diff --git a/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/Tips.svelte b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/Tips.svelte
deleted file mode 100644
index 003c474d02429..0000000000000
--- a/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/Tips.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-	import { getRedirectUrl } from '@automattic/jetpack-components';
-	import { __ } from '@wordpress/i18n';
-	import TemplatedString from '$features/TemplatedString.svelte';
-	import externalLinkTemplateVar from '$lib/utils/external-link-template-var';
-
-	const pingdomLink = getRedirectUrl( 'jetpack-boost-pingdom' );
-	const whySpeedLink = getRedirectUrl( 'jetpack-boost-why-speed' );
-</script>
-
-<div class="jb-section jb-section--alt">
-	<div class="jb-container--narrow">
-		<div class="jb-tips">
-			<h3 class="jb-tips__title">
-				{__( 'Did you know?', 'jetpack-boost' )}
-			</h3>
-			<div class="jb-tips__items">
-				<div class="item">
-					<div class="item__rate">4x</div>
-					<div class="item__description">
-						<TemplatedString
-							template={__(
-								`Pages that take over 3 seconds to load have 4x the bounce rate of pages that load in 2 seconds or less. (source: <link>Pingdom</link>).`,
-								'jetpack-boost'
-							)}
-							vars={externalLinkTemplateVar( pingdomLink )}
-						/>
-					</div>
-				</div>
-				<div class="item">
-					<div class="item__rate">20%</div>
-					<div class="item__description">
-						<TemplatedString
-							template={__(
-								`A one-second delay in loading times can reduce conversion rates by 20%. (source: <link>Google</link>).`,
-								'jetpack-boost'
-							)}
-							vars={externalLinkTemplateVar( whySpeedLink )}
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/projects/plugins/boost/app/assets/src/css/components/benchmarks.scss b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.module.scss
similarity index 78%
rename from projects/plugins/boost/app/assets/src/css/components/benchmarks.scss
rename to projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.module.scss
index 14bb65050c494..be10eda352649 100644
--- a/projects/plugins/boost/app/assets/src/css/components/benchmarks.scss
+++ b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.module.scss
@@ -1,15 +1,19 @@
-.jb-dashboard .jb-tips {
+@import '../../../../css/main/variables.scss';
+@import '../../../../css/main/mixins.scss';
+
+.tips {
 	margin: 0 auto;
 
-	&__title {
+	.tips-title {
 		margin-bottom: $padding;
 	}
 
-	&__items {
+	.tips-items {
 		@include breakpoint(md) {
 			display: grid;
 			grid-template-columns: 1fr 1fr;
-			grid-gap: 2em;		}
+			grid-gap: 2em;
+		}
 	}
 
 	.item {
@@ -17,13 +21,12 @@
 			display: grid;
 			grid-template-columns: 80px 1fr;
 			grid-gap: 1em;
-
 		}
 
 		margin-bottom: 2em;
 
 
-		&__rate {
+		.item-rate {
 			font-size: 24px;
 			font-weight: 400;
 			line-height: 30px;
@@ -36,7 +39,7 @@
 			}
 		}
 
-		&__description {
+		.item-description {
 			flex-basis: 70%;
 			font-weight: 400;
 			line-height: 24px;
diff --git a/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.tsx b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.tsx
new file mode 100644
index 0000000000000..a11acbbc54495
--- /dev/null
+++ b/projects/plugins/boost/app/assets/src/js/layout/SettingsPage/tips/tips.tsx
@@ -0,0 +1,53 @@
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { createInterpolateElement } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import styles from './tips.module.scss';
+
+const Tips = () => {
+	const pingdomLink = getRedirectUrl( 'jetpack-boost-pingdom' );
+	const whySpeedLink = getRedirectUrl( 'jetpack-boost-why-speed' );
+
+	return (
+		<div className="jb-section jb-section--alt">
+			<div className="jb-container--narrow">
+				<div className={ styles.tips }>
+					<h3 className={ styles[ 'tips-title' ] }>{ __( 'Did you know?', 'jetpack-boost' ) }</h3>
+					<div className={ styles[ 'tips-items' ] }>
+						<div className={ styles.item }>
+							<div className={ styles[ 'item-rate' ] }>4x</div>
+							<div className={ styles[ 'item-description' ] }>
+								{ createInterpolateElement(
+									__(
+										`Pages that take over 3 seconds to load have 4x the bounce rate of pages that load in 2 seconds or less. (source: <link>Pingdom</link>).`,
+										'jetpack-boost'
+									),
+									{
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										link: <a href={ pingdomLink } target="_blank" rel="noopener noreferrer" />,
+									}
+								) }
+							</div>
+						</div>
+						<div className={ styles.item }>
+							<div className={ styles[ 'item-rate' ] }>20%</div>
+							<div className={ styles[ 'item-description' ] }>
+								{ createInterpolateElement(
+									__(
+										`A one-second delay in loading times can reduce conversion rates by 20%. (source: <link>Google</link>).`,
+										'jetpack-boost'
+									),
+									{
+										// eslint-disable-next-line jsx-a11y/anchor-has-content
+										link: <a href={ whySpeedLink } target="_blank" rel="noopener noreferrer" />,
+									}
+								) }
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Tips;

From 30e1ce7a01de0f8745ce20388f359dbd9e6eeda6 Mon Sep 17 00:00:00 2001
From: Peter Petrov <peter.petrov89@gmail.com>
Date: Mon, 18 Dec 2023 20:07:07 +0200
Subject: [PATCH 2/2] add changelog

---
 projects/plugins/boost/changelog/migrate-settings-page-tips | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 projects/plugins/boost/changelog/migrate-settings-page-tips

diff --git a/projects/plugins/boost/changelog/migrate-settings-page-tips b/projects/plugins/boost/changelog/migrate-settings-page-tips
new file mode 100644
index 0000000000000..a85602a21b916
--- /dev/null
+++ b/projects/plugins/boost/changelog/migrate-settings-page-tips
@@ -0,0 +1,5 @@
+Significance: patch
+Type: changed
+Comment: Migrate Settings Page Tips to react.
+
+