From 644920e73268b9d7a892b5d8e8bc6f5787b47aa6 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 21 May 2024 17:31:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20coming=20soon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a coming soon page bind to the
docs.numerique.gouv.fr domain.
---
 .../apps/impress/src/components/Box.tsx       |  4 +++
 .../apps/impress/src/core/auth/Auth.tsx       | 27 +++++++++++---
 .../apps/impress/src/layouts/PageLayout.tsx   |  4 +--
 .../impress/src/pages/coming-soon/index.tsx   | 35 +++++++++++++++++++
 4 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/pages/coming-soon/index.tsx

diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index 0191d77f..1417c23e 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/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};`}
diff --git a/src/frontend/apps/impress/src/core/auth/Auth.tsx b/src/frontend/apps/impress/src/core/auth/Auth.tsx
index 865a815f..7cc312dc 100644
--- a/src/frontend/apps/impress/src/core/auth/Auth.tsx
+++ b/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 />
diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
index 5a6340dc..16dcf81d 100644
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/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 />
diff --git a/src/frontend/apps/impress/src/pages/coming-soon/index.tsx b/src/frontend/apps/impress/src/pages/coming-soon/index.tsx
new file mode 100644
index 00000000..cd5de772
--- /dev/null
+++ b/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;