Create new launchpad only home structure (#98476)

* Create new launchpad only home structure * Rename feature flag * Allow dismissing the full-screen Launchpad in My Home --------- Co-authored-by: Luis Felipe Zaguini <[email protected]>
Automattic · Jan 17, 2025 · 02eb91b · 02eb91b
1 parent d7fb6bd
commit 02eb91b
Show file tree

Hide file tree

Showing 20 changed files with 70 additions and 43 deletions.
diff --git a/...t/my-sites/customer-home/grid-mixins.scss → ...ylesheets/shared/mixins/_grid-mixins.scss b/...t/my-sites/customer-home/grid-mixins.scss → ...ylesheets/shared/mixins/_grid-mixins.scss
diff --git a/client/assets/stylesheets/shared/mixins/_mixins.scss b/client/assets/stylesheets/shared/mixins/_mixins.scss
@@ -6,6 +6,7 @@
 @import "clear-text";
 @import "dropdown-menu";
 @import "elevation";
+@import "grid-mixins";
 @import "heading";
 @import "hide-content-accessibly";
 @import "long-content-fade";

diff --git a/client/my-sites/customer-home/cards/tasks/site-setup-list/style.scss b/client/my-sites/customer-home/cards/tasks/site-setup-list/style.scss
@@ -1,6 +1,5 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
-@import "../../../grid-mixins";
 
 .site-setup-list {
 	&.card {

diff --git a/client/my-sites/customer-home/components/full-screen-launchpad.tsx b/client/my-sites/customer-home/components/full-screen-launchpad.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@wordpress/components';
+import { useI18n } from '@wordpress/react-i18n';
+import LaunchpadPreLaunch from '../cards/launchpad/pre-launch';
+
+export const FullScreenLaunchpad = ( { onClose }: { onClose: () => void } ) => {
+	const { __ } = useI18n();
+
+	return (
+		<div css={ { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '24px' } }>
+			<div css={ { width: '100%' } }>
+				<LaunchpadPreLaunch />
+			</div>
+			<Button onClick={ onClose }>{ __( 'Hide onboarding setup' ) }</Button>
+		</div>
+	);
+};
diff --git a/client/my-sites/customer-home/main.jsx → ...er-home/components/home-content/index.jsx b/client/my-sites/customer-home/main.jsx → ...er-home/components/home-content/index.jsx
@@ -7,17 +7,14 @@ import { useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import SiteIcon from 'calypso/blocks/site-icon';
 import AsyncLoad from 'calypso/components/async-load';
-import DocumentHead from 'calypso/components/data/document-head';
 import EmptyContent from 'calypso/components/empty-content';
 import { JetpackConnectionHealthBanner } from 'calypso/components/jetpack/connection-health';
-import Main from 'calypso/components/main';
 import NavigationHeader from 'calypso/components/navigation-header';
 import Notice from 'calypso/components/notice';
 import NoticeAction from 'calypso/components/notice/notice-action';
 import useDomainDiagnosticsQuery from 'calypso/data/domains/diagnostics/use-domain-diagnostics-query';
 import { useGetDomainsQuery } from 'calypso/data/domains/use-get-domains-query';
 import useHomeLayoutQuery, { getCacheKey } from 'calypso/data/home/use-home-layout-query';
-import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import TrackComponentView from 'calypso/lib/analytics/track-component-view';
 import { setDomainNotice } from 'calypso/lib/domains/set-domain-notice';
 import { preventWidows } from 'calypso/lib/formatting';
@@ -50,11 +47,11 @@ import {
 } from 'calypso/state/sites/selectors';
 import isJetpackSite from 'calypso/state/sites/selectors/is-jetpack-site';
 import { getSelectedSite, getSelectedSiteId } from 'calypso/state/ui/selectors';
-import CelebrateLaunchModal from './components/celebrate-launch-modal';
+import CelebrateLaunchModal from '../celebrate-launch-modal';
 
 import './style.scss';
 
-const Home = ( {
+const HomeContent = ( {
 	canUserUseCustomerHome,
 	hasWooCommerceInstalled,
 	isJetpack,
@@ -291,9 +288,7 @@ const Home = ( {
 	};
 
 	return (
-		<Main wideLayout className="customer-home__main">
-			<PageViewTracker path="/home/:site" title={ translate( 'My Home' ) } />
-			<DocumentHead title={ translate( 'My Home' ) } />
+		<div className="customer-home__main">
 			{ siteId && isJetpack && isPossibleJetpackConnectionProblem && (
 				<JetpackConnectionHealthBanner siteId={ siteId } />
 			) }
@@ -338,7 +333,7 @@ const Home = ( {
 				/>
 			) }
 			<AsyncLoad require="calypso/lib/analytics/track-resurrections" placeholder={ null } />
-		</Main>
+		</div>
 	);
 };
 
@@ -396,6 +391,8 @@ const mergeProps = ( stateProps, dispatchProps, ownProps ) => {
 	};
 };
 
-const connectHome = connect( mapStateToProps, mapDispatchToProps, mergeProps );
-
-export default connectHome( withJetpackConnectionProblem( Home ) );
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps,
+	mergeProps
+)( withJetpackConnectionProblem( HomeContent ) );
diff --git a/client/my-sites/customer-home/style.scss → ...r-home/components/home-content/style.scss b/client/my-sites/customer-home/style.scss → ...r-home/components/home-content/style.scss
@@ -1,4 +1,3 @@
-@import "./grid-mixins";
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 

diff --git a/client/my-sites/customer-home/controller.jsx b/client/my-sites/customer-home/controller.jsx
@@ -18,7 +18,7 @@ import {
 import { redirectToLaunchpad } from 'calypso/utils';
 import CustomerHome from './main';
 
-export default async function ( context, next ) {
+export default async function renderHome( context, next ) {
 	const state = await context.store.getState();
 	const siteId = getSelectedSiteId( state );
 
@@ -28,7 +28,6 @@ export default async function ( context, next ) {
 	}
 
 	context.primary = <CustomerHome key={ siteId } />;
-
 	next();
 }
 

diff --git a/client/my-sites/customer-home/index.js b/client/my-sites/customer-home/index.js
@@ -1,10 +1,18 @@
 import page from '@automattic/calypso-router';
 import { makeLayout, render as clientRender } from 'calypso/controller';
 import { navigation, siteSelection, sites } from 'calypso/my-sites/controller';
-import home, { maybeRedirect } from './controller';
+import renderHome, { maybeRedirect } from './controller';
 
 export default function () {
 	page( '/home', siteSelection, sites, makeLayout, clientRender );
 
-	page( '/home/:siteId', siteSelection, maybeRedirect, navigation, home, makeLayout, clientRender );
+	page(
+		'/home/:siteId',
+		siteSelection,
+		maybeRedirect,
+		navigation,
+		renderHome,
+		makeLayout,
+		clientRender
+	);
 }
diff --git a/client/my-sites/customer-home/main.tsx b/client/my-sites/customer-home/main.tsx
@@ -0,0 +1,28 @@
+import config from '@automattic/calypso-config';
+import { useTranslate } from 'i18n-calypso';
+import { useState } from 'react';
+import DocumentHead from 'calypso/components/data/document-head';
+import Main from 'calypso/components/main';
+import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
+import { FullScreenLaunchpad } from './components/full-screen-launchpad';
+import HomeContent from './components/home-content';
+
+export default function CustomerHome() {
+	const [ isShowingLaunchpad, setIsShowingLaunchpad ] = useState(
+		config.isEnabled( 'home/launchpad-first' )
+	);
+
+	const translate = useTranslate();
+
+	return (
+		<Main wideLayout>
+			<PageViewTracker path="/home/:site" title={ translate( 'My Home' ) } />
+			<DocumentHead title={ translate( 'My Home' ) } />
+			{ isShowingLaunchpad ? (
+				<FullScreenLaunchpad onClose={ () => setIsShowingLaunchpad( false ) } />
+			) : (
+				<HomeContent />
+			) }
+		</Main>
+	);
+}
diff --git a/client/my-sites/domains/domain-management/dns/add-dns-record.scss b/client/my-sites/domains/domain-management/dns/add-dns-record.scss
@@ -1,4 +1,3 @@
-@import "../../../customer-home/grid-mixins";
 @import "@wordpress/base-styles/mixins";
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/colors";

diff --git a/client/my-sites/domains/domain-management/transfer/transfer-to-any-user/style.scss b/client/my-sites/domains/domain-management/transfer/transfer-to-any-user/style.scss
@@ -1,4 +1,3 @@
-@import "../../../../customer-home/grid-mixins";
 @import "@automattic/onboarding/styles/mixins";
 @import "@automattic/typography/styles/variables";
 @import "@wordpress/base-styles/breakpoints";

diff --git a/client/my-sites/domains/domain-management/transfer/transfer-to-other-user/style.scss b/client/my-sites/domains/domain-management/transfer/transfer-to-other-user/style.scss
@@ -1,4 +1,3 @@
-@import "../../../../customer-home/grid-mixins";
 @import "@automattic/onboarding/styles/mixins";
 @import "@automattic/typography/styles/variables";
 @import "@wordpress/base-styles/breakpoints";

diff --git a/client/my-sites/plugins/grid-mixins.scss b/client/my-sites/plugins/grid-mixins.scss
diff --git a/client/my-sites/plugins/style-compatibilty.scss b/client/my-sites/plugins/style-compatibilty.scss
@@ -1,6 +1,5 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
-@import "./grid-mixins";
 
 body.is-section-plugins .plugin-management-wrapper {
 	@include break-small {

diff --git a/client/my-sites/plugins/style.scss b/client/my-sites/plugins/style.scss
@@ -1,6 +1,5 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
-@import "./grid-mixins";
 @import "./woocommerce-box";
 
 .is-section-plugins .main {

diff --git a/config/development.json b/config/development.json
@@ -74,6 +74,7 @@
 		"global-styles/on-personal-plan": false,
 		"help": true,
 		"help/gpt-response": true,
+		"home/launchpad-first": false,
 		"home/layout-dev": true,
 		"hosting-server-settings-enhancements": true,
 		"hosting/datacenter-picker": true,

diff --git a/config/horizon.json b/config/horizon.json
@@ -40,6 +40,7 @@
 		"google-my-business": false,
 		"global-styles/on-personal-plan": false,
 		"help": true,
+		"home/launchpad-first": false,
 		"home/layout-dev": true,
 		"hosting-server-settings-enhancements": true,
 		"i18n/empathy-mode": false,

diff --git a/config/production.json b/config/production.json
@@ -53,6 +53,7 @@
 		"global-styles/on-personal-plan": false,
 		"help": true,
 		"help/gpt-response": true,
+		"home/launchpad-first": false,
 		"hosting-server-settings-enhancements": true,
 		"i18n/empathy-mode": false,
 		"i18n/translation-scanner": true,

diff --git a/config/stage.json b/config/stage.json
@@ -53,6 +53,7 @@
 		"global-styles/on-personal-plan": false,
 		"help": true,
 		"help/gpt-response": true,
+		"home/launchpad-first": false,
 		"hosting-server-settings-enhancements": true,
 		"i18n/empathy-mode": true,
 		"importer/site-backups": true,

diff --git a/config/wpcalypso.json b/config/wpcalypso.json
@@ -59,6 +59,7 @@
 		"global-styles/on-personal-plan": false,
 		"help": true,
 		"help/gpt-response": true,
+		"home/launchpad-first": false,
 		"home/layout-dev": true,
 		"hosting/datacenter-picker": true,
 		"hosting-server-settings-enhancements": true,