Feedback Igor.

Yoast · Nov 20, 2024 · 1535c21 · 1535c21
1 parent 0040ea6
commit 1535c21
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 13 deletions.
diff --git a/packages/js/src/dashboard/components/dashboard.js b/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>

diff --git a/packages/js/src/general/components/connected-premium-upsell-list.js b/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 }
+	/>;
+};
+
diff --git a/packages/js/src/general/components/sidebar-layout.js b/packages/js/src/general/components/sidebar-layout.js
@@ -1,7 +1,7 @@
 import { useSelect } from "@wordpress/data";
 import classNames from "classnames";
 import PropTypes from "prop-types";
-import { PremiumUpsellList, SidebarRecommendations } from "../../shared-admin/components";
+import { SidebarRecommendations } from "../../shared-admin/components";
 import { STORE_NAME } from "../constants";
 import { useSelectGeneralPage } from "../hooks";
 
@@ -15,20 +15,12 @@ export const SidebarLayout = ( { contentClassName, children } ) => {
 	const premiumLinkSidebar = useSelectGeneralPage( "selectLink", [], "https://yoa.st/jj" );
 	const premiumUpsellConfig = useSelectGeneralPage( "selectUpsellSettingsAsProps" );
 	const academyLink = useSelectGeneralPage( "selectLink", [], "https://yoa.st/3t6" );
-	const premiumLinkList = useSelectGeneralPage( "selectLink", [], "https://yoa.st/17h" );
 	const { isPromotionActive } = useSelect( STORE_NAME );
 
 	return (
 		<div className="yst-flex yst-gap-6 xl:yst-flex-row yst-flex-col">
 			<div className={ classNames( "yst-@container yst-flex yst-flex-grow yst-flex-col", contentClassName ) }>
 				{ children }
-				{ isPremium ? null : (
-					<PremiumUpsellList
-						premiumLink={ premiumLinkList }
-						premiumUpsellConfig={ premiumUpsellConfig }
-						isPromotionActive={ isPromotionActive }
-					/>
-				) }
 			</div>
 			{ ! isPremium &&
 				<div className="yst-min-w-[16rem] xl:yst-max-w-[16rem]">

diff --git a/packages/js/src/general/initialize.js b/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";
@@ -57,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 /> } />

diff --git a/packages/js/src/general/routes/alert-center.js b/packages/js/src/general/routes/alert-center.js
@@ -16,7 +16,7 @@ export const AlertCenter = () => {
 					</p>
 				</header>
 			</Paper>
-			<div className="yst-grid yst-grid-cols-1 @3xl:yst-grid-cols-2 yst-gap-6 yst-mt-6 yst-grow yst-items-start">
+			<div className="yst-grid yst-grid-cols-1 @3xl:yst-grid-cols-2 yst-gap-6 yst-my-6 yst-grow yst-items-start">
 				<Problems />
 				<Notifications />
 			</div>

diff --git a/packages/js/src/shared-admin/components/premium-upsell-list.js b/packages/js/src/shared-admin/components/premium-upsell-list.js
@@ -16,7 +16,7 @@ export const PremiumUpsellList = ( { premiumLink, premiumUpsellConfig, isPromoti
 	const isBlackFriday = isPromotionActive( "black-friday-2024-promotion" );
 
 	return (
-		<Paper as="div" className="yst-mt-6 xl:yst-max-w-3xl">
+		<Paper as="div" className="xl:yst-max-w-3xl">
 			{ isBlackFriday && <div
 				className="yst-rounded-t-lg yst-h-9 yst-flex yst-justify-between yst-items-center yst-bg-black yst-text-amber-300 yst-px-4 yst-text-lg yst-border-b yst-border-amber-300 yst-border-solid yst-font-semibold"
 			>