From fe094a0184ca6f99c2782261b083f053fb5b9fc7 Mon Sep 17 00:00:00 2001 From: Ella Date: Tue, 28 Jan 2025 14:58:25 +0100 Subject: [PATCH] Render modal separately --- .../celebrate-launch-modal.js | 4 +-- .../celebrate-launch-modal.scss | 0 .../wpcom-dashboard-widgets.js | 19 ++++++++++++++ .../wpcom-launchpad-widget/index.js | 26 +++---------------- 4 files changed, 25 insertions(+), 24 deletions(-) rename projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/{wpcom-launchpad-widget => celebrate-launch}/celebrate-launch-modal.js (98%) rename projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/{wpcom-launchpad-widget => celebrate-launch}/celebrate-launch-modal.scss (100%) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/celebrate-launch-modal.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/celebrate-launch/celebrate-launch-modal.js similarity index 98% rename from projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/celebrate-launch-modal.js rename to projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/celebrate-launch/celebrate-launch-modal.js index 976be70f19a8b..8dd7fb3ef00aa 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/celebrate-launch-modal.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/celebrate-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/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/celebrate-launch-modal.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/celebrate-launch/celebrate-launch-modal.scss similarity index 100% rename from projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/celebrate-launch-modal.scss rename to projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/celebrate-launch/celebrate-launch-modal.scss diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js index 3ec6e0aa61d7e..c43566acda982 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.js +++ b/projects/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( ); } } ); + +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( + { + root.unmount(); + rootElement.remove(); + } } + /> + ); +} diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/index.js b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/index.js index 19ba4fcbe9955..c64942f34a5aa 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-launchpad-widget/index.js +++ b/projects/packages/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 (
@@ -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(); } } />
- { celebrateLaunchModalIsOpen && ( - setCelebrateLaunchModalIsOpen( false ) } - sitePlan={ sitePlan } - siteUrl={ siteUrl } - siteSlug={ siteDomain } - hasCustomDomain={ hasCustomDomain } - /> - ) } ); };