diff --git a/client/src/App/App.container.jsx b/client/src/App/App.container.jsx index 28c6fb838..9566e0626 100644 --- a/client/src/App/App.container.jsx +++ b/client/src/App/App.container.jsx @@ -12,6 +12,7 @@ import GlobalLoadingBar from "../components/global-loading-bar/global-loading-ba import { setDarkMode } from "../redux/application/application.actions"; import { selectDarkMode } from "../redux/application/application.selectors"; import { selectCurrentUser } from "../redux/user/user.selectors.js"; +import { signOutStart } from "../redux/user/user.actions"; import client from "../utils/GraphQLClient"; import App from "./App"; import getTheme from "./themeProvider"; @@ -20,14 +21,13 @@ import getTheme from "./themeProvider"; const config = { core: { authorizationKey: import.meta.env.VITE_APP_SPLIT_API, - key: "anon" // Default key, overridden dynamically by SplitClientProvider + key: "anon" } }; -// Custom provider to manage the Split client key based on imexshopid from Redux function SplitClientProvider({ children }) { - const imexshopid = useSelector((state) => state.user.imexshopid); // Access imexshopid from Redux store - const splitClient = useSplitClient({ key: imexshopid || "anon" }); // Use imexshopid or fallback to "anon" + const imexshopid = useSelector((state) => state.user.imexshopid); + const splitClient = useSplitClient({ key: imexshopid || "anon" }); useEffect(() => { if (splitClient && imexshopid) { console.log(`Split client initialized with key: ${imexshopid}, isReady: ${splitClient.isReady}`); @@ -36,40 +36,66 @@ function SplitClientProvider({ children }) { return children; } -const mapDispatchToProps = (dispatch) => ({ - setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)) -}); - const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser }); -function AppContainer({ currentUser, setDarkMode }) { +const mapDispatchToProps = (dispatch) => ({ + setDarkMode: (isDarkMode) => dispatch(setDarkMode(isDarkMode)), + signOutStart: () => dispatch(signOutStart()) +}); + +function AppContainer({ currentUser, setDarkMode, signOutStart }) { const { t } = useTranslation(); const isDarkMode = useSelector(selectDarkMode); const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]); - // Update data-theme attribute when dark mode changes + // Global seamless logout listener with redirect to /signin + useEffect(() => { + const handleSeamlessLogout = (event) => { + if (event.data?.type !== "seamlessLogoutRequest") return; + + const requestOrigin = event.origin; + + if (currentUser?.authorized !== true) { + window.parent.postMessage( + { type: "seamlessLogoutResponse", status: "already_logged_out" }, + requestOrigin || "*" + ); + return; + } + + signOutStart(); + window.parent.postMessage({ type: "seamlessLogoutResponse", status: "logged_out" }, requestOrigin || "*"); + }; + + window.addEventListener("message", handleSeamlessLogout); + return () => { + window.removeEventListener("message", handleSeamlessLogout); + }; + }, [signOutStart, currentUser]); + + // Update data-theme attribute useEffect(() => { document.documentElement.setAttribute("data-theme", isDarkMode ? "dark" : "light"); return () => document.documentElement.removeAttribute("data-theme"); }, [isDarkMode]); - // Sync Redux darkMode with localStorage on user change + // Sync darkMode with localStorage useEffect(() => { if (currentUser?.uid) { const savedMode = localStorage.getItem(`dark-mode-${currentUser.uid}`); if (savedMode !== null) { setDarkMode(JSON.parse(savedMode)); } else { - setDarkMode(false); // default to light mode + setDarkMode(false); } } else { setDarkMode(false); } - }, [currentUser?.uid]); + }, [currentUser?.uid, setDarkMode]); - // Persist darkMode to localStorage when it or user changes + // Persist darkMode useEffect(() => { if (currentUser?.uid) { localStorage.setItem(`dark-mode-${currentUser.uid}`, JSON.stringify(isDarkMode));