Merge pull request #21793 from Yoast/21769-new-general-page-local-seo…

…-notice-still-visible

Hide Local notice when site representation is completed via the FTC

packages/js/src/first-time-configuration/first-time-configuration-steps.js

@@ -159,7 +159,7 @@ function calculateInitialState( windowObject, isStepFinished ) {
  * @returns {WPElement} The FirstTimeConfigurationSteps component.
  */
 export default function FirstTimeConfigurationSteps() {
-	const { removeAlert } = useDispatch( STORE_NAME );
+	const { removeAlert, resolveNotice, unresolveNotice } = useDispatch( STORE_NAME );
 	const [ finishedSteps, setFinishedSteps ] = useState( window.wpseoFirstTimeConfigurationData.finishedSteps );
 
 	const isStepFinished = useCallback( ( stepId ) => {
@@ -212,6 +212,18 @@ export default function FirstTimeConfigurationSteps() {
 		dispatch( { type: "SET_ERROR_FIELDS", payload: value } );
 	} );
 
+	const resolveLocalNotice = useCallback( () => {
+		if ( state.companyLogo !== "" && state.companyLogoId !== 0 && state.companyName !== "" ) {
+			resolveNotice( "yoast-local-missing-organization-info-notice" );
+		} else {
+			unresolveNotice( "yoast-local-missing-organization-info-notice" );
+		}
+	}, [ resolveNotice, unresolveNotice, state.companyLogo, state.companyLogoId, state.companyName ] );
+
+	const resolveFTCNotice = useCallback( () => {
+		resolveNotice( "yoast-first-time-configuration-notice" );
+	}, [ resolveNotice ] );
+
 	const isCompanyAndEmpty = state.companyOrPerson === "company" && ( ! state.companyName || ( ! state.companyLogo && ! state.companyLogoFallback ) || ! state.websiteName );
 	const isPersonAndEmpty = state.companyOrPerson === "person" && ( ! state.personId || ( ! state.personLogo && ! state.personLogoFallback ) || ! state.websiteName );
 
@@ -238,6 +250,9 @@ export default function FirstTimeConfigurationSteps() {
 				removeStepError( STEPS.siteRepresentation );
 				finishSteps( STEPS.siteRepresentation );
 				window.wpseoFirstTimeConfigurationData = { ...window.wpseoFirstTimeConfigurationData,  ...state };
+
+				resolveLocalNotice();
+
 				return true;
 			} )
 			.catch( ( e ) => {
@@ -304,6 +319,9 @@ export default function FirstTimeConfigurationSteps() {
 			.then( () => {
 				removeStepError( STEPS.personalPreferences );
 				window.wpseoFirstTimeConfigurationData.tracking = state.tracking;
+
+				resolveFTCNotice();
+
 				return true;
 			} )
 			.catch( e => {

packages/js/src/general/app.js

@@ -1,17 +1,15 @@
 /* eslint-disable complexity */
-/* global wpseoFirstTimeConfigurationData */
 
 import { Transition } from "@headlessui/react";
 import { AdjustmentsIcon, BellIcon } from "@heroicons/react/outline";
-import { select, useDispatch } from "@wordpress/data";
+import { useDispatch, useSelect } from "@wordpress/data";
 import { useCallback, useEffect, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { addQueryArgs } from "@wordpress/url";
 import { Notifications, SidebarNavigation, useSvgAria } from "@yoast/ui-library";
 import PropTypes from "prop-types";
 import { Link, Outlet, useLocation } from "react-router-dom";
 import WebinarPromoNotification from "../components/WebinarPromoNotification";
-import { STEPS as FTC_STEPS } from "../first-time-configuration/constants";
 import { deleteMigratingNotices, getMigratingNoticeInfo } from "../helpers/migrateNotices";
 import { shouldShowWebinarPromotionNotificationInDashboard } from "../helpers/shouldShowWebinarPromotionNotification";
 import { MenuItemLink, YoastLogo } from "../shared-admin/components";
@@ -71,6 +69,7 @@ Menu.propTypes = {
  */
 const App = () => {
 	const notices = useMemo( getMigratingNoticeInfo, [] );
+	const resolvedNotices = useSelect( select => select( STORE_NAME ).selectResolvedNotices(), [] );
 
 	useEffect( () => {
 		deleteMigratingNotices( notices );
@@ -85,7 +84,7 @@ const App = () => {
 		setAlertToggleError( null );
 	}, [ setAlertToggleError ] );
 
-	const linkParams = select( STORE_NAME ).selectLinkParams();
+	const linkParams = useSelect( select => select( STORE_NAME ).selectLinkParams(), [] );
 	const webinarIntroSettingsUrl = addQueryArgs( "https://yoa.st/webinar-intro-settings", linkParams );
 
 	return (
@@ -125,15 +124,16 @@ const App = () => {
 										}
 										{ notices.length > 0 && <div className="yst-space-y-3 yoast-general-page-notices"> {
 											notices.map( ( notice, index ) => {
-												/* If the last step of the First-time configuration has been completed,
-												 we remove the First-time configuration notice. */
-												if ( notice.id === "yoast-first-time-configuration-notice" && wpseoFirstTimeConfigurationData.finishedSteps.includes( FTC_STEPS.personalPreferences ) ) {
+												const noticeID = notice.id || "yoast-general-page-notice-" + index;
+
+												if ( resolvedNotices.includes( noticeID ) ) {
 													return null;
 												}
+
 												return (
 													<Notice
 														key={ index }
-														id={ notice.id || "yoast-general-page-notice-" + index }
+														id={ noticeID }
 														title={ notice.header }
 														isDismissable={ notice.isDismissable }
 													>

packages/js/src/general/initialize.js

@@ -6,6 +6,7 @@ import { Root } from "@yoast/ui-library";
 import { get } from "lodash";
 import { createHashRouter, createRoutesFromElements, Navigate, Route, RouterProvider } from "react-router-dom";
 import { LINK_PARAMS_NAME } from "../shared-admin/store";
+import { FTC_NAME } from "./store/first-time-configuration";
 import App from "./app";
 import { RouteErrorFallback } from "./components";
 import { STORE_NAME } from "./constants";
@@ -25,6 +26,7 @@ domReady( () => {
 			currentPromotions: { promotions: get( window, "wpseoScriptData.currentPromotions", [] ) },
 			dismissedAlerts: get( window, "wpseoScriptData.dismissedAlerts", {} ),
 			isPremium: get( window, "wpseoScriptData.preferences.isPremium", false ),
+			[ FTC_NAME ]: { resolvedNotices: [] },
 		},
 	} );
 	const isRtl = select( STORE_NAME ).selectPreference( "isRtl", false );

packages/js/src/general/store/first-time-configuration.js

@@ -0,0 +1,42 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { get } from "lodash";
+
+export const FTC_NAME = "firstTimeConfiguration";
+
+const slice = createSlice( {
+	name: FTC_NAME,
+	initialState: { resolvedNotices: [] },
+	reducers: {
+		/**
+		 * @param {Object} state The state of the slice.
+		 * @param {string} noticeID The ID of the notice to resolve.
+		 * @returns {void}
+		 */
+		resolveNotice( state, { payload: noticeID } ) {
+			if ( ! state.resolvedNotices.includes( noticeID ) ) {
+				state.resolvedNotices.push( noticeID );
+			}
+		},
+		/**
+		 * @param {Object} state The state of the slice.
+		 * @param {string} noticeID The ID of the notice to unresolve.
+		 * @returns {void}
+		 */
+		unresolveNotice( state, { payload: noticeID } ) {
+			state.resolvedNotices = state.resolvedNotices.filter( ( id ) => id !== noticeID );
+		},
+	},
+} );
+
+/**
+ * @returns {Object} The initial state.
+ */
+export const getInitialFirstTimeConfigurationState = slice.getInitialState;
+
+export const firstTimeConfigurationSelectors = {
+	selectResolvedNotices: state => get( state, `${ FTC_NAME }.resolvedNotices`, [] ),
+};
+
+export const firstTimeConfigurationActions = slice.actions;
+
+export const firstTimeConfigurationReducer = slice.reducer;

packages/js/src/general/store/index.js

@@ -7,8 +7,9 @@ import preferences, { createInitialPreferencesState, preferencesActions, prefere
 import { reducers, selectors, actions } from "@yoast/externals/redux";
 import * as dismissedAlertsControls from "../../redux/controls/dismissedAlerts";
 import { alertCenterReducer, alertCenterActions, alertCenterSelectors, getInitialAlertCenterState, alertCenterControls, ALERT_CENTER_NAME } from "./alert-center";
+import { firstTimeConfigurationActions, firstTimeConfigurationReducer, firstTimeConfigurationSelectors, FTC_NAME, getInitialFirstTimeConfigurationState } from "./first-time-configuration";
 
-const { currentPromotions, dismissedAlerts, isPremium  } = reducers;
+const { currentPromotions, dismissedAlerts, isPremium } = reducers;
 const { isAlertDismissed, getIsPremium, isPromotionActive } = selectors;
 const { dismissAlert, setCurrentPromotions, setDismissedAlerts, setIsPremium } = actions;
 
@@ -28,6 +29,7 @@ const createStore = ( { initialState } ) => {
 			setCurrentPromotions,
 			setDismissedAlerts,
 			setIsPremium,
+			...firstTimeConfigurationActions,
 		},
 		selectors: {
 			...linkParamsSelectors,
@@ -36,6 +38,7 @@ const createStore = ( { initialState } ) => {
 			isAlertDismissed,
 			getIsPremium,
 			isPromotionActive,
+			...firstTimeConfigurationSelectors,
 		},
 		initialState: merge(
 			{},
@@ -44,6 +47,7 @@ const createStore = ( { initialState } ) => {
 				preferences: createInitialPreferencesState(),
 				[ ALERT_CENTER_NAME ]: getInitialAlertCenterState(),
 				currentPromotions: { promotions: [] },
+				[ FTC_NAME ]: getInitialFirstTimeConfigurationState(),
 			},
 			initialState
 		),
@@ -54,6 +58,7 @@ const createStore = ( { initialState } ) => {
 			currentPromotions,
 			dismissedAlerts,
 			isPremium,
+			[ FTC_NAME ]: firstTimeConfigurationReducer,
 		} ),
 		controls: {
 			...alertCenterControls,