Render modal separately

Automattic · Jan 28, 2025 · fe094a0 · fe094a0
1 parent d51a42d
commit fe094a0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 24 deletions.
diff --git a/...aunchpad-widget/celebrate-launch-modal.js → ...elebrate-launch/celebrate-launch-modal.js b/...aunchpad-widget/celebrate-launch-modal.js → ...elebrate-launch/celebrate-launch-modal.js
@@ -14,7 +14,7 @@ import './celebrate-launch-modal.scss';
  * @param {object}   props                 - Props.
  * @param {Function} props.onRequestClose  - Callback on modal close.
  * @param {object}   props.sitePlan        - The site plan.
- * @param {string}   props.siteSlug        - The site slug.
+ * @param {string}   props.siteDomain      - The site domain.
  * @param {string}   props.siteUrl         - The site URL.
  * @param {boolean}  props.hasCustomDomain - Whether the site has a custom domain.
  *
@@ -23,7 +23,7 @@ import './celebrate-launch-modal.scss';
 export default function CelebrateLaunchModal( {
 	onRequestClose,
 	sitePlan = {},
-	siteSlug,
+	siteDomain: siteSlug,
 	siteUrl,
 	hasCustomDomain,
 } ) {

diff --git a/...nchpad-widget/celebrate-launch-modal.scss → ...ebrate-launch/celebrate-launch-modal.scss b/...nchpad-widget/celebrate-launch-modal.scss → ...ebrate-launch/celebrate-launch-modal.scss
diff --git a/...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/...packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js
@@ -1,6 +1,7 @@
 import '../../common/public-path';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import CelebrateLaunchModal from './celebrate-launch/celebrate-launch-modal';
 import WpcomLaunchpadWidget from './wpcom-launchpad-widget';
 import WpcomSiteManagementWidget from './wpcom-site-management-widget';
 const data = typeof window === 'object' ? window.JETPACK_MU_WPCOM_DASHBOARD_WIDGETS : {};
@@ -23,3 +24,21 @@ widgets.forEach( ( { id, Widget } ) => {
 		root.render( <Widget { ...data } /> );
 	}
 } );
+
+const url = new URL( window.location.href );
+if ( url.searchParams.has( 'celebrate-launch' ) ) {
+	url.searchParams.delete( 'celebrate-launch' );
+	window.history.replaceState( null, '', url.toString() );
+	const rootElement = document.createElement( 'div' );
+	document.body.appendChild( rootElement );
+	const root = ReactDOM.createRoot( rootElement );
+	root.render(
+		<CelebrateLaunchModal
+			{ ...data }
+			onRequestClose={ () => {
+				root.unmount();
+				rootElement.remove();
+			} }
+		/>
+	);
+}
diff --git a/...ges/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/index.js b/...ges/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/index.js
@@ -1,8 +1,6 @@
 import { Launchpad } from '@automattic/launchpad';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useRefEffect } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
-import CelebrateLaunchModal from './celebrate-launch-modal';
 
 import './style.scss';
 
@@ -35,16 +33,7 @@ function useSetHrefBase() {
 	}, [] );
 }
 
-export default ( { siteDomain, siteIntent, sitePlan, siteUrl, hasCustomDomain } ) => {
-	const [ celebrateLaunchModalIsOpen, setCelebrateLaunchModalIsOpen ] = useState( false );
-	useEffect( () => {
-		const url = new URL( window.location.href );
-		if ( url.searchParams.has( 'celebrate-launch' ) ) {
-			setCelebrateLaunchModalIsOpen( true );
-			url.searchParams.delete( 'celebrate-launch' );
-			window.history.replaceState( null, '', url );
-		}
-	}, [] );
+export default ( { siteDomain, siteIntent } ) => {
 	return (
 		<QueryClientProvider client={ queryClient }>
 			<div ref={ useSetHrefBase() }>
@@ -53,19 +42,12 @@ export default ( { siteDomain, siteIntent, sitePlan, siteUrl, hasCustomDomain }
 					checklistSlug={ siteIntent }
 					launchpadContext="customer-home"
 					onSiteLaunched={ () => {
-						window.location.href = window.location.href + '?celebrate-launch';
+						const url = new URL( window.location.href );
+						url.searchParams.set( 'celebrate-launch', 'true' );
+						window.location.href = url.toString();
 					} }
 				/>
 			</div>
-			{ celebrateLaunchModalIsOpen && (
-				<CelebrateLaunchModal
-					onRequestClose={ () => setCelebrateLaunchModalIsOpen( false ) }
-					sitePlan={ sitePlan }
-					siteUrl={ siteUrl }
-					siteSlug={ siteDomain }
-					hasCustomDomain={ hasCustomDomain }
-				/>
-			) }
 		</QueryClientProvider>
 	);
 };