Boost: Remove global state from Purchase Success component (#33105)

* Remove global state from PurchaseSuccess component * add changelog
Automattic · Sep 18, 2023 · e6fd13f · e6fd13f
1 parent 2fe76e5
commit e6fd13f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 5 deletions.
diff --git a/projects/plugins/boost/app/assets/src/js/Main.svelte b/projects/plugins/boost/app/assets/src/js/Main.svelte
@@ -27,7 +27,9 @@
 
 <Router history={routerHistory}>
 	<Route path="upgrade" component={BenefitsInterstitial} />
-	<Route path="purchase-successful" component={PurchaseSuccess} />
+	<Route path="purchase-successful" let:location let:navigate>
+		<PurchaseSuccess {location} {navigate} isImageGuideActive={$modulesState.image_guide.active} />
+	</Route>
 	<Route path="getting-started" component={GettingStarted} />
 	{#if $modulesState.image_size_analysis.available && $modulesState.image_size_analysis.active}
 		<Route path="image-size-analysis/:group/:page" component={RecommendationsPage} />

diff --git a/projects/plugins/boost/app/assets/src/js/pages/purchase-success/PurchaseSuccess.svelte b/projects/plugins/boost/app/assets/src/js/pages/purchase-success/PurchaseSuccess.svelte
@@ -6,21 +6,21 @@
 	import ReactComponent from '../../elements/ReactComponent.svelte';
 	import TemplatedString from '../../elements/TemplatedString.svelte';
 	import { requestImageAnalysis } from '../../modules/image-size-analysis/store/isa-summary';
-	import { modulesState } from '../../stores/modules';
 	import Logo from '../../svg/jetpack-green.svg';
+	import enableCloudCss from '../../utils/enable-cloud-css';
 	import externalLinkTemplateVar from '../../utils/external-link-template-var';
 
 	const wpcomPricingUrl = getRedirectUrl( 'wpcom-pricing' );
 
 	// svelte-ignore unused-export-let - Ignored values supplied by svelte-navigator.
 	export let location, navigate;
+	export let isImageGuideActive: boolean;
 
 	onMount( async () => {
-		// Enable cloud css module on upgrade.
-		$modulesState.cloud_css.active = true;
+		enableCloudCss();
 
 		// If image guide is enabled, request a new ISA report.
-		if ( $modulesState.image_guide.active ) {
+		if ( isImageGuideActive ) {
 			// Check if images can be resized.
 			if ( false !== Jetpack_Boost.site.canResizeImages ) {
 				await requestImageAnalysis();

diff --git a/projects/plugins/boost/app/assets/src/js/utils/enable-cloud-css.ts b/projects/plugins/boost/app/assets/src/js/utils/enable-cloud-css.ts
@@ -0,0 +1,8 @@
+import { modulesState } from '../stores/modules';
+
+export default function enableCloudCss() {
+	// Enable cloud css module on upgrade.
+	modulesState.update( oldValue => {
+		return { ...oldValue, cloud_css: { ...oldValue.cloud_css, active: true } };
+	} );
+}
diff --git a/projects/plugins/boost/changelog/remove-state-purchase-success-component b/projects/plugins/boost/changelog/remove-state-purchase-success-component
@@ -0,0 +1,5 @@
+Significance: patch
+Type: removed
+Comment: Removed global state from Purchase Success component.
+
+