✨(frontend) coming soon

Add a coming soon page bind to the
docs.numerique.gouv.fr domain.

src/frontend/apps/impress/src/components/Box.tsx

@@ -26,6 +26,8 @@ export interface BoxProps {
   $justify?: CSSProperties['justifyContent'];
   $overflow?: CSSProperties['overflow'];
   $margin?: MarginPadding;
+  $maxHeight?: CSSProperties['maxHeight'];
+  $minHeight?: CSSProperties['minHeight'];
   $maxWidth?: CSSProperties['maxWidth'];
   $minWidth?: CSSProperties['minWidth'];
   $padding?: MarginPadding;
@@ -53,6 +55,8 @@ export const Box = styled('div')<BoxProps>`
     $hasTransition && `transition: all 0.3s ease-in-out;`}
   ${({ $justify }) => $justify && `justify-content: ${$justify};`}
   ${({ $margin }) => $margin && stylesMargin($margin)}
+  ${({ $maxHeight }) => $maxHeight && `max-height: ${$maxHeight};`}
+  ${({ $minHeight }) => $minHeight && `min-height: ${$minHeight};`}
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $overflow }) => $overflow && `overflow: ${$overflow};`}

src/frontend/apps/impress/src/core/auth/Auth.tsx

@@ -1,18 +1,35 @@
 import { Loader } from '@openfun/cunningham-react';
-import { PropsWithChildren, useEffect } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { PropsWithChildren, useEffect, useState } from 'react';
 
 import { Box } from '@/components';
 
 import { useAuthStore } from './useAuthStore';
-
 export const Auth = ({ children }: PropsWithChildren) => {
   const { authenticated, initAuth } = useAuthStore();
+  const router = useRouter();
+  const [isDomainComingSoon, setIsDomainComingSoon] = useState(false);
+  const domainComingSoon = 'docs.numerique.gouv.fr';
+  const pathComingSoon = '/coming-soon/';
+  const pathname = usePathname();
 
   useEffect(() => {
-    initAuth();
-  }, [initAuth]);
+    if (window.location.origin.includes(domainComingSoon)) {
+      router.push(pathComingSoon);
+      return;
+    }
 
-  if (!authenticated) {
+    initAuth();
+  }, [initAuth, router]);
+
+  useEffect(() => {
+    setIsDomainComingSoon(
+      window.location.origin.includes(domainComingSoon) &&
+        pathname === pathComingSoon,
+    );
+  }, [pathname]);
+
+  if (!authenticated && !isDomainComingSoon) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">
         <Loader />

src/frontend/apps/impress/src/layouts/PageLayout.tsx

@@ -6,9 +6,9 @@ import { Header } from '@/features/header';
 
 export function PageLayout({ children }: PropsWithChildren) {
   return (
-    <Box>
+    <Box $minHeight="100vh">
       <Header />
-      <Box as="main" $width="100%">
+      <Box as="main" $width="100%" $css="flex-grow:1;">
         {children}
       </Box>
       <Footer />

src/frontend/apps/impress/src/pages/coming-soon/index.tsx

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import Icon404 from '@/assets/icons/icon-404.svg';
+import { Box, Text } from '@/components';
+import { NextPageWithLayout } from '@/types/next';
+
+const Page: NextPageWithLayout = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box $margin="auto">
+      <Box $align="center" $gap="3rem">
+        <Icon404 aria-label="Image 404" role="img" />
+        <Box $direction="row" $align="flex-end" $gap="1rem">
+          <Text
+            as="h1"
+            $margin="auto"
+            $direction="row"
+            $align="center"
+            $gap="1rem"
+          >
+            {t('Coming soon ...')}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+Page.getLayout = function getLayout(page: ReactElement) {
+  return <Box $minHeight="100vh">{page}</Box>;
+};
+
+export default Page;