Extract upsell to sidebar-layout.js

packages/js/src/dashboard/components/dashboard.js

@@ -17,7 +17,7 @@ export const Dashboard = ( { contentTypes, userName, features } ) => {
 	return (
 		<>
 			<PageTitle userName={ userName } features={ features } />
-			<div className="yst-flex yst-flex-col @7xl:yst-flex-row yst-gap-6 yst-mt-6">
+			<div className="yst-flex yst-flex-col @7xl:yst-flex-row yst-gap-6 yst-my-6">
 				{ features.indexables && features.seoAnalysis && <SeoScores contentTypes={ contentTypes } /> }
 				{ features.indexables && features.readabilityAnalysis && <ReadabilityScores contentTypes={ contentTypes } /> }
 			</div>

packages/js/src/general/components/connected-premium-upsell-list.js

@@ -0,0 +1,24 @@
+import { useSelect } from "@wordpress/data";
+import { PremiumUpsellList } from "../../shared-admin/components";
+import { STORE_NAME } from "../constants";
+import { useSelectGeneralPage } from "../hooks";
+
+/**
+ * @returns {JSX.Element|null} The premium upsell list or null if not applicable.
+ */
+export const ConnectedPremiumUpsellList = () => {
+	const isPremium = useSelectGeneralPage( "selectPreference", [], "isPremium" );
+	const premiumUpsellConfig = useSelectGeneralPage( "selectUpsellSettingsAsProps" );
+	const { isPromotionActive } = useSelect( STORE_NAME );
+	const premiumLinkList = useSelectGeneralPage( "selectLink", [], "https://yoa.st/17h" );
+
+	if ( isPremium ) {
+		return null;
+	}
+	return <PremiumUpsellList
+		premiumLink={ premiumLinkList }
+		premiumUpsellConfig={ premiumUpsellConfig }
+		isPromotionActive={ isPromotionActive }
+	/>;
+};
+

packages/js/src/general/initialize.js

@@ -9,6 +9,7 @@ import { Dashboard } from "../dashboard";
 import { LINK_PARAMS_NAME } from "../shared-admin/store";
 import App from "./app";
 import { RouteErrorFallback } from "./components";
+import { ConnectedPremiumUpsellList } from "./components/connected-premium-upsell-list";
 import { SidebarLayout } from "./components/sidebar-layout";
 import { STORE_NAME } from "./constants";
 import { AlertCenter, FirstTimeConfiguration, ROUTES } from "./routes";
@@ -49,7 +50,6 @@ domReady( () => {
 		seoAnalysis: get( window, "wpseoScriptData.dashboard.enabledAnalysisFeatures.keyphraseAnalysis", false ),
 		readabilityAnalysis: get( window, "wpseoScriptData.dashboard.enabledAnalysisFeatures.readabilityAnalysis", false ),
 	};
-
 	const router = createHashRouter(
 		createRoutesFromElements(
 			<Route path="/" element={ <App /> } errorElement={ <RouteErrorFallback className="yst-m-8" /> }>
@@ -58,13 +58,14 @@ domReady( () => {
 					element={
 						<SidebarLayout>
 							<Dashboard contentTypes={ contentTypes } userName={ userName } features={ features } />
+							<ConnectedPremiumUpsellList />
 						</SidebarLayout>
 					}
 					errorElement={ <RouteErrorFallback /> }
 				/>
 				<Route
 					path={ ROUTES.alertCenter }
-					element={ <SidebarLayout><AlertCenter /></SidebarLayout> }
+					element={ <SidebarLayout><AlertCenter /><ConnectedPremiumUpsellList /></SidebarLayout> }
 					errorElement={ <RouteErrorFallback /> }
 				/>
 				<Route path={ ROUTES.firstTimeConfiguration } element={ <FirstTimeConfiguration /> } errorElement={ <RouteErrorFallback /> } />

packages/js/src/general/routes/alert-center.js

@@ -1,20 +1,11 @@
-import { useSelect } from "@wordpress/data";
 import { __ } from "@wordpress/i18n";
 import { Paper, Title } from "@yoast/ui-library";
-import { PremiumUpsellList } from "../../shared-admin/components";
 import { Notifications, Problems } from "../components";
-import { STORE_NAME } from "../constants";
-import { useSelectGeneralPage } from "../hooks";
 
 /**
  * @returns {JSX.Element} The general page content placeholder.
  */
 export const AlertCenter = () => {
-	const isPremium = useSelectGeneralPage( "selectPreference", [], "isPremium" );
-	const premiumLinkList = useSelectGeneralPage( "selectLink", [], "https://yoa.st/17h" );
-	const premiumUpsellConfig = useSelectGeneralPage( "selectUpsellSettingsAsProps" );
-	const { isPromotionActive } = useSelect( STORE_NAME );
-
 	return (
 		<>
 			<Paper className="yst-p-8 yst-grow">
@@ -29,13 +20,6 @@ export const AlertCenter = () => {
 				<Problems />
 				<Notifications />
 			</div>
-			{ isPremium ? null : (
-				<PremiumUpsellList
-					premiumLink={ premiumLinkList }
-					premiumUpsellConfig={ premiumUpsellConfig }
-					isPromotionActive={ isPromotionActive }
-				/>
-			) }
 		</>
 	);
 };

packages/js/src/shared-admin/components/premium-upsell-list.js

@@ -1,8 +1,8 @@
-import { noop } from "lodash";
 import { ArrowNarrowRightIcon } from "@heroicons/react/outline";
 import { createInterpolateElement } from "@wordpress/element";
 import { __, sprintf } from "@wordpress/i18n";
-import { Button, Title, Paper } from "@yoast/ui-library";
+import { Button, Paper, Title } from "@yoast/ui-library";
+import { noop } from "lodash";
 import PropTypes from "prop-types";
 import { getPremiumBenefits } from "../../helpers/get-premium-benefits";