diff --git a/site/source/hooks/useIframeResizer.ts b/site/source/components/IframeResizer.ts similarity index 69% rename from site/source/hooks/useIframeResizer.ts rename to site/source/components/IframeResizer.ts index 2d6127c52..5fe04ca3a 100644 --- a/site/source/hooks/useIframeResizer.ts +++ b/site/source/components/IframeResizer.ts @@ -1,22 +1,15 @@ import { useEffect } from 'react' -/** - * @deprecated Prefer the use of useIsEmbedded() if possible */ -export function isIframe() { - try { - return window.self !== window.top - } catch (e) { - return true - } -} +import { useIsEmbedded } from '../hooks/useIsEmbedded' -export function useIframeResizer() { +export function IframeResizer() { + const isEmbedded = useIsEmbedded() useEffect(() => { // The code below communicate with the iframe.js script on a host site // to automatically resize the iframe when its inner content height // change. - if (!isIframe()) { + if (!isEmbedded) { return } @@ -28,5 +21,7 @@ export function useIframeResizer() { observer.observe(window.document.body) return () => observer.disconnect() - }, []) + }, [isEmbedded]) + + return null } diff --git a/site/source/components/Provider.tsx b/site/source/components/Provider.tsx index 0dce9d644..1cfb3fd8c 100644 --- a/site/source/components/Provider.tsx +++ b/site/source/components/Provider.tsx @@ -15,15 +15,14 @@ import DesignSystemThemeProvider from '@/design-system/root' import { H1, H4 } from '@/design-system/typography/heading' import { Link } from '@/design-system/typography/link' import { Body, Intro } from '@/design-system/typography/paragraphs' -import { useIframeResizer } from '@/hooks/useIframeResizer' import { EmbededContextProvider } from '@/hooks/useIsEmbedded' import { Message } from '../design-system' import * as safeLocalStorage from '../storage/safeLocalStorage' import { store } from '../store/store' -import { inIframe } from '../utils' import { TrackingContext } from './ATInternetTracking' import { createTracker } from './ATInternetTracking/Tracker' +import { IframeResizer } from './IframeResizer' import { ServiceWorker } from './ServiceWorker' import { DarkModeProvider } from './utils/DarkModeContext' @@ -40,8 +39,6 @@ export default function Provider({ basename, children, }: ProviderProps): JSX.Element { - useIframeResizer() - return ( @@ -49,8 +46,8 @@ export default function Provider({ {!import.meta.env.SSR && import.meta.env.MODE === 'production' && - 'serviceWorker' in navigator && - !inIframe() && } + 'serviceWorker' in navigator && } + diff --git a/site/source/components/ServiceWorker.tsx b/site/source/components/ServiceWorker.tsx index 4010d7835..f5f3fb7c2 100644 --- a/site/source/components/ServiceWorker.tsx +++ b/site/source/components/ServiceWorker.tsx @@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next' import styled from 'styled-components' import { useRegisterSW } from 'virtual:pwa-register/react' +import { useIsEmbedded } from '@/hooks/useIsEmbedded' import { getItem, removeItem, setItem } from '@/storage/safeLocalStorage' import { Message } from '../design-system' @@ -43,6 +44,7 @@ const pwaPromptDelayKey = 'update-pwa-prompt-delay' export const ServiceWorker = () => { const { t } = useTranslation() const [showPrompt, setShowPrompt] = useState(false) + const isEmbedded = useIsEmbedded() const { needRefresh: [needRefresh, setNeedRefresh], @@ -85,6 +87,9 @@ export const ServiceWorker = () => { console.error('SW registration error', error) }, }) + if (isEmbedded) { + return null + } return ( diff --git a/site/source/components/SimulateurOrAssistantPage.tsx b/site/source/components/SimulateurOrAssistantPage.tsx index f9d3d241b..c97bcd40a 100644 --- a/site/source/components/SimulateurOrAssistantPage.tsx +++ b/site/source/components/SimulateurOrAssistantPage.tsx @@ -86,7 +86,7 @@ export default function SimulateurOrAssistantPage() { {title && !inIframe && ( <>

- {title} + {title}{' '} {year && ( }> {year} diff --git a/site/source/design-system/global-style.ts b/site/source/design-system/global-style.ts index b0309dfba..57411fd29 100644 --- a/site/source/design-system/global-style.ts +++ b/site/source/design-system/global-style.ts @@ -1,6 +1,6 @@ import { createGlobalStyle, css } from 'styled-components' -import { isIframe } from '@/hooks/useIframeResizer' +import { inIframe } from '@/utils' export const SROnly = css` position: absolute !important; @@ -112,7 +112,7 @@ html { html, body, #js, #js > *, [data-overlay-container] { ${ - isIframe() + inIframe() ? css` min-height: 100%; ` diff --git a/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx b/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx index 956d3fcec..b634fbae5 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Layout.tsx @@ -12,12 +12,12 @@ export default function Layout({ }) { return ( <> - - + +

{title}

{children}
- + diff --git a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx index 721706386..ff15a4dff 100644 --- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx +++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx @@ -42,13 +42,19 @@ export default function Navigation({ {!small && } - + {children && ( {children} )} - + + + Code : {codeApe} + + + + + + {open && ( {contenuCentral.length ? ( diff --git a/site/source/utils/index.ts b/site/source/utils/index.ts index f1fbfaccd..08122593f 100644 --- a/site/source/utils/index.ts +++ b/site/source/utils/index.ts @@ -41,6 +41,8 @@ export const debounce = (waitFor: number, fn: (...args: T[]) => void) => { export const fetcher = (url: RequestInfo) => fetch(url).then((r) => r.json()) +/** + * @deprecated Prefer the use of useIsEmbedded() if possible */ export function inIframe(): boolean { try { return window.self !== window.top