mon-entreprise/site/source/Provider.tsx

139 lines
4.0 KiB
TypeScript
Raw Normal View History

import { ThemeColorsProvider } from '@/components/utils/colors'
import { DisableAnimationOnPrintProvider } from '@/components/utils/DisableAnimationContext'
import { IsEmbeddedProvider } from '@/components/utils/embeddedContext'
import { GlobalStyle } from '@/design-system/global-style'
import { Container } from '@/design-system/layout'
import DesignSystemThemeProvider from '@/design-system/root'
import { H1 } 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 logo from '@/images/logo-monentreprise.svg'
import { OverlayProvider } from '@react-aria/overlays'
import { ErrorBoundary } from '@sentry/react'
import i18next from 'i18next'
import { createContext, ReactNode } from 'react'
import { HelmetProvider } from 'react-helmet-async'
import { I18nextProvider } from 'react-i18next'
import { Provider as ReduxProvider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
2022-06-30 17:32:57 +00:00
import { ServiceWorker } from './ServiceWorker'
2022-04-06 09:34:13 +00:00
import * as safeLocalStorage from './storage/safeLocalStorage'
import { store } from './store'
import { inIframe } from './utils'
2021-02-10 17:11:10 +00:00
// ATInternet Tracking
import { TrackingContext } from './ATInternetTracking'
import { createTracker } from './ATInternetTracking/Tracker'
type SiteName = 'mon-entreprise' | 'infrance' | 'publicodes'
export const SiteNameContext = createContext<SiteName | null>(null)
export type ProviderProps = {
basename: SiteName
children: ReactNode
}
export default function Provider({
basename,
children,
}: ProviderProps): JSX.Element {
useIframeResizer()
return (
<DesignSystemThemeProvider>
<GlobalStyle />
<ErrorBoundary
showDialog
fallback={
<Container>
2022-07-28 18:04:44 +00:00
<Link href="/">
<img
src={logo}
alt="Logo mon-entreprise"
style={{
maxWidth: '200px',
width: '100%',
marginTop: '1rem',
}}
></img>
</Link>
<H1>Une erreur est survenue</H1>
<Intro>
L'équipe technique mon-entreprise a été automatiquement prévenue.
</Intro>
<Body>
Vous pouvez également nous contacter directement à l'adresse{' '}
<Link href="mailto:contact@mon-entreprise.beta.gouv.fr">
contact@mon-entreprise.beta.gouv.fr
</Link>{' '}
si vous souhaitez partager une remarque. Veuillez nous excuser
pour la gêne occasionnée.
</Body>
</Container>
}
>
2022-06-30 17:32:57 +00:00
{!import.meta.env.SSR &&
import.meta.env.MODE === 'production' &&
'serviceWorker' in navigator &&
!inIframe() && <ServiceWorker />}
<OverlayProvider>
<ReduxProvider store={store}>
<IsEmbeddedProvider>
<ThemeColorsProvider>
<DisableAnimationOnPrintProvider>
<SiteNameContext.Provider value={basename}>
2022-07-28 18:04:44 +00:00
<I18nextProvider i18n={i18next}>
<BrowserRouterProvider basename={basename}>
{children}
</BrowserRouterProvider>
</I18nextProvider>
</SiteNameContext.Provider>
</DisableAnimationOnPrintProvider>
</ThemeColorsProvider>
</IsEmbeddedProvider>
</ReduxProvider>
</OverlayProvider>
</ErrorBoundary>
</DesignSystemThemeProvider>
)
2018-07-12 08:09:41 +00:00
}
function BrowserRouterProvider({
children,
basename,
}: {
children: ReactNode
basename: string
}) {
2022-07-25 09:02:08 +00:00
// The server router is only provided in the entry-server file
if (import.meta.env.SSR) {
return <>{children}</>
}
const ATTracker = createTracker(
import.meta.env.VITE_AT_INTERNET_SITE_ID,
safeLocalStorage.getItem('tracking:do_not_track') === '1' ||
navigator.doNotTrack === '1'
)
return (
<HelmetProvider>
<TrackingContext.Provider
value={
new ATTracker({
language: i18next.language as 'fr' | 'en',
})
}
>
<BrowserRouter
basename={import.meta.env.MODE === 'production' ? '' : basename}
>
2022-07-25 09:02:08 +00:00
{children}
</BrowserRouter>
</TrackingContext.Provider>
</HelmetProvider>
)
}