@griddo/ax 12.7.1 → 12.8.1

package/src/components/Browser/index.tsx

@@ -81,6 +81,14 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 
 	useOnMessageReceivedFromIframe(actions);
 
+	const handleIframeLoad = (e: React.SyntheticEvent<HTMLIFrameElement>) => {
+		setIsIframeLoading(false);
+		const iframeWindow = (e.target as HTMLIFrameElement)?.contentWindow;
+		if (iframeWindow && (content as any)?.template) {
+			iframeWindow.postMessage({ type: "content-update", message: content }, "*");
+		}
+	};
+
 	useEffect(() => {
 		localStorage.setItem("selectedID", "0");
 		(window as any).browserRef = null;
@@ -326,7 +334,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 									src={urlPreview}
 									loading="lazy"
 									className="frame-content"
-									onLoad={() => setIsIframeLoading(false)}
+									onLoad={handleIframeLoad}
 									style={{ visibility: isIframeLoading ? "hidden" : "visible" }}
 								/>
 							) : (
@@ -344,7 +352,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
 										src={urlPreview}
 										loading="lazy"
 										className="frame-content"
-										onLoad={() => setIsIframeLoading(false)}
+										onLoad={handleIframeLoad}
 										style={{
 											display: "block",
 											transform: isZoomEditor ? `scale(${parseInt(dimensions.zoom) / 100})` : "scale(1)",

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -34,10 +34,9 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
 	const handleClick = async () => {
 		if (isAllowedToEditGlobalData) {
 			const navigate = async () => {
-				await actions.getGlobalFromLocalPageAction();
-				const path = "/data/pages/editor";
-				setHistoryPush?.(path, true);
+				const pageID = await actions.getGlobalFromLocalPageAction();
 				actions.saveCurrentSiteInfoAction();
+				setHistoryPush?.(`/data/pages/editor/${pageID}`, true);
 			};
 
 			if (isDirty && onNavigateWithDirty) {
@@ -195,7 +194,7 @@ export interface IGlobalPageFormProps {
 	isDirty?: boolean;
 	onNavigateWithDirty?: (navigateCallback: () => void) => void;
 	actions: {
-		getGlobalFromLocalPageAction(): Promise<void>;
+		getGlobalFromLocalPageAction(): Promise<number | null>;
 		saveCurrentSiteInfoAction(): Promise<void>;
 		restorePageNavigationAction(type: string): Promise<void>;
 		setNotificationAction(notification: INotification): void;

package/src/components/Fields/Wysiwyg/atoms.tsx

@@ -86,7 +86,7 @@ const LinkPopover = (props: ILinkPopoverProps) => {
 	return createPortal(
 		<>
 			<S.PopoverOverlay onClick={handleOverlayClick} />
-			<S.PopoverContainer ref={popoverRef} x={position.x} y={position.y}>
+			<S.PopoverContainer ref={popoverRef} x={position.x} y={position.y} data-testid="link-popover">
 				{!linkData?.isImageLink && (
 					<FieldsBehavior
 						title="Text"

package/src/components/Fields/Wysiwyg/index.tsx

@@ -286,6 +286,33 @@ const Wysiwyg = (props: IWysiwygProps) => {
 						});
 					}
 				},
+				// Froala's fullscreen stashes the editor's z-index in `opts.z_index` but
+				// reads the option back from `opts.zIndex`, so leaving it restores
+				// undefined. Any popup opened while in fullscreen pins the toolbar at
+				// Froala's own 2147483642, and with the option gone nothing ever clears
+				// it: the toolbar then paints over every modal the field opens. Seed the
+				// key the plugin reads, and drop what it left inline on the way out.
+				"commands.before": function (this: any, cmd: string) {
+					if (cmd === "fullscreen" && !this.fullscreen.isActive()) {
+						this.opts.z_index = this.opts.zIndex;
+					}
+				},
+				"commands.after": function (this: any, cmd: string) {
+					if (cmd === "fullscreen" && !this.fullscreen.isActive()) {
+						this.$tb.css("z-index", "");
+					}
+				},
+				// Froala's shortcut dispatcher calls plugin commands unbound, so its own
+				// Ctrl/Cmd+K throws instead of opening anything. Returning false cancels
+				// it; commands.exec runs ours with the editor bound.
+				shortcut: function (this: any, e: KeyboardEvent, cmd: string) {
+					if (cmd !== "insertLink") return;
+					e.preventDefault();
+					if (!inline) {
+						this.commands.exec("insertLinkGriddo");
+					}
+					return false;
+				},
 				blur: function (this: any) {
 					const html = this.html.get();
 					const stripedHtml = decodeEntities(html);
@@ -318,6 +345,7 @@ const Wysiwyg = (props: IWysiwygProps) => {
 
 	return (
 		<>
+			<S.FullscreenGlobalStyle />
 			<S.EditorWrapper error={error} disabled={disabled} data-testid="wysiwyg-wrapper">
 				<FroalaEditorComponent tag="textarea" model={value} config={config} onModelChange={handleChange} />
 			</S.EditorWrapper>

package/src/components/Fields/Wysiwyg/style.tsx

@@ -1,6 +1,7 @@
 import { Wrapper } from "@ax/components/FieldsBehavior/style";
+import { Wrapper as FloatingPanelWrapper } from "@ax/components/FloatingPanel/style";
 
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 
 export const PopoverOverlay = styled.div`
 	position: fixed;
@@ -193,3 +194,42 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
     }
   }
 `;
+
+// Froala's fullscreen raises the editor and every ancestor up to <body> to
+// z-index 2147483640, which buries everything the field portals into <body>.
+// Bring the editor back into the app's scale and lift the overlays it can open
+// over it. It has to be global because both the ancestors it marks and the
+// portals live outside this file's tree, and scoped to `body.fr-fullscreen` so
+// nothing moves while the editor is inline.
+//
+// The editor goes over the app chrome and under the overlay layer (Modal), and
+// the overlays it can open ride over it: the link popover, and the page finder
+// panel that the popover opens on top of itself. The galleries need nothing,
+// Modal already sits above. Exported because these only hold as long as the
+// components they stack against keep their own values.
+export const FULLSCREEN_LAYER = {
+	editor: 1210,
+	popoverOverlay: 1220,
+	popover: 1230,
+	panel: 1235,
+};
+
+export const FullscreenGlobalStyle = createGlobalStyle`
+	body.fr-fullscreen {
+		/* An ancestor panel that *contains* the editor keeps the editor's own value
+		   here, because Froala marks it as a wrapper too and !important wins. */
+		.fr-fullscreen-wrapper {
+			z-index: ${FULLSCREEN_LAYER.editor} !important;
+		}
+
+		${PopoverOverlay} {
+			z-index: ${FULLSCREEN_LAYER.popoverOverlay};
+		}
+		${PopoverContainer} {
+			z-index: ${FULLSCREEN_LAYER.popover};
+		}
+		${FloatingPanelWrapper} {
+			z-index: ${FULLSCREEN_LAYER.panel};
+		}
+	}
+`;

package/src/components/MainWrapper/index.tsx

@@ -6,12 +6,12 @@ import AppBar, { type IAppBarProps } from "./AppBar";
 import * as S from "./style";
 
 const MainWrapper = (props: IWrapperProps): JSX.Element => {
-	const { children, fixedAppBar, fullWidth, hasAnimation } = props;
+	const { children, fixedAppBar, fullWidth, hasAnimation, screen } = props;
 
 	const { isOnline } = useNetworkStatus();
 
 	return (
-		<S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper">
+		<S.Wrapper fixedAppBar={fixedAppBar} data-testid="main-wrapper" data-screen={screen}>
 			{hasAnimation && <S.BackgroundAnimation />}
 			<AppBar {...props} />
 			<S.Main fullWidth={fullWidth} data-testid="main-component" id="main-component">
@@ -30,6 +30,18 @@ const MainWrapper = (props: IWrapperProps): JSX.Element => {
 export interface IWrapperProps extends IAppBarProps {
 	children?: any[] | JSX.Element;
 	fullWidth?: boolean;
+	/**
+	 * Stable per-screen identifier for e2e, emitted as `data-screen`. Separate from
+	 * `data-testid="main-wrapper"`, which is the same on all 32 screens and is already
+	 * consumed by tests here and in griddo-qa's `identifiers.ts`.
+	 *
+	 * It exists because nothing else identifies a screen: `title` is display copy and
+	 * is not even unique — Robots and Redirects are both "SEO Settings", and the global
+	 * and the site Analytics screens are both "Analytics Settings". The e2e specs had
+	 * to assert on `location.pathname` with exact equality, and `/settings/analytics`
+	 * is a substring of `/sites/settings/analytics`.
+	 */
+	screen?: string;
 }
 
 export default MainWrapper;

package/src/components/Nav/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { NavLink } from "react-router-dom";
 
 import { SubNav, MenuItem } from "@ax/components";
 import type { INavItem } from "@ax/types";
@@ -18,13 +17,29 @@ const Nav = (props: INavProps): JSX.Element => {
 					const selectedClass = isSelected ? "selected" : "";
 					const handleClick = () => onClick(item.path);
 
+					// No `NavLink` wrapping the label, on purpose (sc-118192). It used to be here with
+					// `to="#"`, which made every click navigate TWICE: the link's transition fires first —
+					// it is the inner element, so its handler runs first as the event bubbles, and by the
+					// time `MenuItem` calls `preventDefault` react-router has already read
+					// `defaultPrevented` as false and pushed — and then the real one from `onClick`.
+					//
+					// On a clean screen that left a spurious history entry before every real one. On a
+					// screen with unsaved changes it was worse: a `RouteLeavingGuard`'s `<Prompt>`
+					// intercepted both transitions and its handler toggles the modal
+					// (`hooks/modals.tsx:6-8`), so it opened and shut in the same tick — the click did
+					// nothing at all, no navigation and no warning, on the five settings screens that
+					// mount both.
+					//
+					// Nothing was lost by dropping it: `S.Link` is a `styled.div` that only reads `active`,
+					// no style hangs off the anchor, and `MenuItem` is already the focusable,
+					// keyboard-operable element (`role="button"`, `tabIndex={0}`, Enter handled) — so the
+					// `<a>` was a nested interactive element inside a button, which is worse semantics
+					// rather than better.
 					const menuItem = (
 						<MenuItem onClick={handleClick} key={key} className={selectedClass}>
-							<NavLink to="#">
-								<S.Link active={isSelected} data-testid="nav-link">
-									{item.title}
-								</S.Link>
-							</NavLink>
+							<S.Link active={isSelected} data-testid="nav-link">
+								{item.title}
+							</S.Link>
 						</MenuItem>
 					);
 

package/src/components/ResizePanel/index.tsx

@@ -31,9 +31,14 @@ const ResizePanel = (props: IResizePanelProps): JSX.Element => {
 
 		const updateWidth = () => {
 			frame = requestAnimationFrame(() => {
-				if (rightPanelRef.current) {
-					setRwidth(rightPanelRef.current.offsetWidth);
-				}
+				const panel = rightPanelRef.current;
+				// Froala's fullscreen tags every ancestor of the editor with
+				// .fr-fullscreen-wrapper, and its `width: 100% !important` lands on this
+				// panel too. Reading it while that class is on would store the width the
+				// editor borrowed as the panel's own, and the panel would keep it once
+				// fullscreen is closed.
+				if (!panel || panel.classList.contains("fr-fullscreen-wrapper")) return;
+				setRwidth(panel.offsetWidth);
 			});
 		};
 

package/src/components/Toast/index.tsx

@@ -11,7 +11,10 @@ const Toast = (props: IToastProps): JSX.Element => {
 	const toast = useRef<HTMLDivElement>(null);
 
 	const { pathname } = useLocation();
-	const isEditor = pathname.includes("/editor");
+	// Structured data items live under `/data/:id/content[/:contentId]`, page editors
+	// under `/editor`. Matched as a whole segment so `/settings/content-types` doesn't
+	// count as an editor.
+	const isEditor = /\/(editor|content)(\/|$)/.test(pathname);
 
 	let temp: NodeJS.Timeout;
 	const setTemp = (time: number) => {

package/src/containers/ActivityLog/actions.tsx

@@ -13,7 +13,6 @@ import type {
 import { logs } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { integrationsActions } from "@ax/containers/Integrations";
 import { formsActions } from "@ax/containers/Forms";
@@ -228,13 +227,11 @@ function goToLogContent(
 				case "template":
 					if (site) {
 						await sitesActions.getSite(site)(dispatch, getState);
-						dispatch(pageEditorActions.setCurrentPageID(contentType.id));
 						dispatch(appActions.setLanguage(language));
-						appActions.setHistoryPush("/sites/pages/editor", true)(dispatch);
+						appActions.setHistoryPush(`/sites/pages/editor/${contentType.id}`, true)(dispatch);
 					} else {
-						dispatch(pageEditorActions.setCurrentPageID(contentType.id));
 						dispatch(appActions.setLanguage(language));
-						appActions.setHistoryPush("/data/pages/editor", true)(dispatch);
+						appActions.setHistoryPush(`/data/pages/editor/${contentType.id}`, true)(dispatch);
 					}
 					break;
 				case "structuredData":
@@ -245,13 +242,13 @@ function goToLogContent(
 							dispatch(structuredDataActions.setCurrentDataID(contentType.id));
 							await structuredDataActions.getDataContent(contentType.id)(dispatch);
 							dispatch(appActions.setLanguage(language));
-							appActions.setHistoryPush(`/sites/data/${contentType.content.id}/editor`)(dispatch);
+							appActions.setHistoryPush(`/sites/data/${contentType.content.id}/content`)(dispatch);
 						} else {
 							structuredDataActions.setSelectedStructuredData(contentType.content.id, "global")(dispatch, getState);
 							dispatch(structuredDataActions.setCurrentDataID(contentType.id));
 							await structuredDataActions.getDataContent(contentType.id)(dispatch);
 							dispatch(appActions.setLanguage(language));
-							appActions.setHistoryPush(`/data/${contentType.content.id}/editor`)(dispatch);
+							appActions.setHistoryPush(`/data/${contentType.content.id}/content`)(dispatch);
 						}
 					}
 					break;

package/src/containers/PageEditor/actions.tsx

@@ -338,6 +338,10 @@ function getPage(
 	return async (dispatch, getState) => {
 		try {
 			dispatch(setIsLoading(true));
+
+			const savedCopy = localStorage.getItem("pageCopyModule");
+			if (savedCopy) dispatch(setCopyModule(JSON.parse(savedCopy)));
+
 			const {
 				sites: { currentSiteInfo },
 				pageEditor: { isNewTranslation, template },
@@ -688,15 +692,18 @@ function getPageLanguages(
 	};
 }
 
-function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: Dispatch) => Promise<boolean> {
+function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: Dispatch) => Promise<number | false> {
 	return async (dispatch) => {
 		try {
+			let duplicatedId: number | null = null;
+
 			const responseActions = {
 				handleSuccess: (data: any) => {
 					if (!siteID) {
 						dispatch(setCurrentPageID(data.id));
 						dispatch(setCurrentPageStatus(pageStatus.OFFLINE));
 					}
+					duplicatedId = data.id;
 					return true;
 				},
 				handleError: (response: any) => {
@@ -706,8 +713,9 @@ function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: D
 			};
 
 			const callback = async () => pages.duplicatePage(pageID, data, siteID);
+			const success = await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 
-			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+			return success && duplicatedId !== null ? duplicatedId : false;
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -1037,6 +1045,7 @@ function copyModule(editorID: number[]): (dispatch: Dispatch, getState: () => IR
 			};
 
 			dispatch(setCopyModule(payload));
+			localStorage.setItem("pageCopyModule", JSON.stringify(payload));
 
 			return payload.elements.length;
 		} else {
@@ -1441,7 +1450,7 @@ function deleteError(error: IErrorItem): (dispatch: Dispatch, getState: () => IR
 	};
 }
 
-function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promise<number | null> {
 	return async (dispatch, getState) => {
 		try {
 			dispatch(setIsLoading(true));
@@ -1457,8 +1466,10 @@ function getGlobalFromLocalPage(): (dispatch: Dispatch, getState: any) => Promis
 			structuredDataActions.setSelectedStructuredData(structuredData, "global")(dispatch, getState);
 			usersActions.getUserCurrentPermissions("global")(dispatch, getState);
 			dispatch(setIsLoading(false));
+			return originalGlobalPage as number;
 		} catch (e) {
 			console.log(e);
+			return null;
 		}
 	};
 }

package/src/helpers/containerEvaluations.tsx

@@ -1,4 +1,5 @@
 import type { IComponent, IContainedComponent, IContainerEvaluation } from "@ax/types";
+
 import { getDisplayName } from "./schemas";
 
 const isComponentEmpty = (component: IComponent): boolean => {
@@ -58,6 +59,13 @@ const areEqual = (prevProps: any, newProps: any): boolean => {
 		return false;
 	}
 
+	// Re-render si moduleCopy cambia (e.g. cross-tab clipboard broadcast)
+	const prevModuleCopyDate = prevProps.moduleCopy?.date?.getTime?.();
+	const newModuleCopyDate = newProps.moduleCopy?.date?.getTime?.();
+	if (prevModuleCopyDate !== newModuleCopyDate) {
+		return false;
+	}
+
 	const {
 		selectedContent: { type },
 	} = prevProps;

package/src/hooks/broadcast.ts

@@ -0,0 +1,160 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { SET_COPY_MODULE } from "@ax/containers/PageEditor/constants";
+import type { IRootState } from "@ax/types";
+
+// Types
+interface BroadcastMessage {
+	type: string;
+	payload?: any;
+	timestamp?: number;
+	senderId?: string;
+}
+
+interface ContentUpdateMessage {
+	contentID: number;
+	timestamp: number;
+}
+
+// Unique ID for this tab instance to filter own broadcasts
+const TAB_ID = Math.random().toString(36).substring(2, 11);
+
+// Generic Broadcast Channel wrapper
+const useBroadcastChannel = (channelName: string, onMessage: (message: BroadcastMessage) => void) => {
+	const channelRef = useRef<BroadcastChannel | null>(null);
+	const onMessageRef = useRef(onMessage);
+
+	useEffect(() => {
+		onMessageRef.current = onMessage;
+	}, [onMessage]);
+
+	useEffect(() => {
+		const channel = new BroadcastChannel(channelName);
+		channelRef.current = channel;
+
+		const handleMessage = (event: MessageEvent<BroadcastMessage>) => {
+			onMessageRef.current(event.data);
+		};
+
+		channel.addEventListener("message", handleMessage);
+
+		return () => {
+			channel.removeEventListener("message", handleMessage);
+			channel.close();
+		};
+	}, [channelName]);
+
+	const postMessage = useCallback((message: BroadcastMessage) => {
+		if (channelRef.current) {
+			channelRef.current.postMessage({
+				...message,
+				timestamp: Date.now(),
+			});
+		}
+	}, []);
+
+	return { postMessage };
+};
+
+// Broadcast clipboard (module copy) across tabs
+const useBroadcastClipboard = () => {
+	const dispatch = useDispatch();
+	const channelName = "griddo-clipboard";
+	const moduleCopy = useSelector((state: IRootState) => state.pageEditor.moduleCopy);
+	const isFromBroadcastRef = useRef(false);
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.senderId === TAB_ID) {
+				return;
+			}
+			if (message.type === "module-copied" && message.payload) {
+				isFromBroadcastRef.current = true;
+				const moduleDataWithDate = {
+					...message.payload,
+					date: new Date(message.payload.date),
+				};
+				dispatch({
+					type: SET_COPY_MODULE,
+					payload: { moduleCopy: moduleDataWithDate },
+				});
+			}
+		},
+		[dispatch],
+	);
+
+	const { postMessage } = useBroadcastChannel(channelName, handleMessage);
+
+	useEffect(() => {
+		if (moduleCopy) {
+			if (isFromBroadcastRef.current) {
+				isFromBroadcastRef.current = false;
+				return;
+			}
+			postMessage({
+				type: "module-copied",
+				payload: moduleCopy,
+				senderId: TAB_ID,
+			});
+		}
+	}, [moduleCopy, postMessage]);
+
+	return {};
+};
+
+// Broadcast content updates (page/data saves) across tabs
+const useBroadcastContentUpdate = (contentID: number | null) => {
+	const [remotePageUpdate, setRemotePageUpdate] = useState<ContentUpdateMessage | null>(null);
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.type === "page-saved" && message.payload?.contentID === contentID) {
+				setRemotePageUpdate(message.payload);
+			}
+		},
+		[contentID],
+	);
+
+	const { postMessage } = useBroadcastChannel("griddo-page-updates", handleMessage);
+
+	const broadcastPageSave = useCallback(
+		(id: number) => {
+			postMessage({
+				type: "page-saved",
+				payload: { contentID: id },
+			});
+		},
+		[postMessage],
+	);
+
+	return { broadcastPageSave, remotePageUpdate, clearRemoteUpdate: () => setRemotePageUpdate(null) };
+};
+
+// Broadcast logout across tabs.
+// The logout action is injected by the consumer so this generic hook does not depend on
+// the App container (which would create a load-time circular dependency: hooks → App → … → hooks).
+const useBroadcastLogout = (onRemoteLogout?: () => void) => {
+	const channelName = "griddo-logout";
+
+	const handleMessage = useCallback(
+		(message: any) => {
+			if (message.type === "user-logout") {
+				onRemoteLogout?.();
+			}
+		},
+		[onRemoteLogout],
+	);
+
+	const { postMessage } = useBroadcastChannel(channelName, handleMessage);
+
+	const broadcastLogout = useCallback(() => {
+		postMessage({
+			type: "user-logout",
+		});
+	}, [postMessage]);
+
+	return { broadcastLogout };
+};
+
+export { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout };

package/src/hooks/index.tsx

@@ -1,3 +1,4 @@
+import { useBroadcastChannel, useBroadcastClipboard, useBroadcastContentUpdate, useBroadcastLogout } from "./broadcast";
 import { type IBulkSelectedItems, useBulkSelection } from "./bulk";
 import { useAdaptiveText, useCategoryColors, useEmptyState } from "./content";
 import {
@@ -25,6 +26,10 @@ import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
 	useAdaptiveText,
+	useBroadcastChannel,
+	useBroadcastClipboard,
+	useBroadcastLogout,
+	useBroadcastContentUpdate,
 	useBulkSelection,
 	useCategoryColors,
 	useContextMenu,

package/src/modules/ActivityLog/index.tsx

@@ -211,6 +211,7 @@ const ActivityLog = (props: IActivityLogProps) => {
 	return (
 		<MainWrapper
 			title="Logs"
+			screen="activity-log"
 			rightButton={rightButtonProps}
 			rightLineButton={rightLineButtonProps}
 			searchAction={handleSearch}

package/src/modules/Analytics/index.tsx

@@ -123,7 +123,7 @@ const Analytics = (props: IProps): JSX.Element => {
 	return (
 		<>
 			<RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+			<MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps} screen="analytics-global">
 				<ErrorToast />
 				<S.Wrapper>
 					<S.FormWrapper>

package/src/modules/App/index.tsx

@@ -1,15 +1,25 @@
-import React from "react";
-import { connect } from "react-redux";
+import { useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
+import { connect, useSelector } from "react-redux";
 
-import type { IRootState } from "@ax/types";
 import { ErrorPage, Loading } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { useBroadcastLogout } from "@ax/hooks";
+import type { IRootState } from "@ax/types";
 
-import Routing from "./Routing";
 import Style from "../../Style";
+import Routing from "./Routing";
 
 const App = (props: IProps) => {
-	const { isRehydrated } = props;
+	const { isRehydrated, logoutAndNavigate } = props;
+	const token = useSelector((state: IRootState) => state.app.token);
+	const { broadcastLogout } = useBroadcastLogout(logoutAndNavigate);
+
+	useEffect(() => {
+		if (token === "") {
+			broadcastLogout();
+		}
+	}, [token, broadcastLogout]);
 
 	return (
 		<Style>
@@ -32,8 +42,13 @@ function mapStateToProps(state: IRootState) {
 	};
 }
 
+const mapDispatchToProps = {
+	logoutAndNavigate: appActions.logoutAndNavigate,
+};
+
 interface IProps {
 	isRehydrated: boolean;
+	logoutAndNavigate: () => void;
 }
 
-export default connect(mapStateToProps)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);