feat(add-unavailable-text): add unavailable text to main page

src/components/UnavailableText/index.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components/macro'
+
+const Info = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 1.5rem;
+`
+
+export const UnavailableText = () => (
+  <Info>
+    The site is temporarily unavailable
+    <br />
+    El sitio está temporalmente fuera de servicio
+    <br />
+    Сайт временно не доступен
+  </Info>
+)

src/config/env.tsx

@@ -10,6 +10,8 @@ export const isValidEnv = (value: string): value is ENVType => (
 
 export const ENV = process.env.REACT_APP_ENV || 'staging'
 
+export const isAvailable = true
+
 export const isProduction = ENV === 'production' || ENV === 'preproduction'
 
 export const stageENV = process.env.REACT_APP_STAGE || 'test'

src/features/App/index.tsx

@@ -6,6 +6,7 @@ import { MatomoProvider } from '@jonkoops/matomo-tracker-react'
 import { history } from 'config/history'
 import { client } from 'config/clients'
 import { matomoInstance } from 'config/matomo'
+import { isAvailable } from 'config/env'
 
 import { setClientTitleAndDescription } from 'helpers/setClientHeads'
 import { isMatchPage, isMatchPageRFEF } from 'helpers/isMatchPage'
@@ -18,6 +19,8 @@ import { Theme } from 'features/Theme'
 import { JoinMatchPage } from 'features/JoinMatchPage'
 import { JoinMatchPageRFEF } from 'features/JoinMatchPageRFEF'
 
+import { UnavailableText } from 'components/UnavailableText'
+
 import { AuthenticatedApp } from './AuthenticatedApp'
 import { checkPage } from '../../helpers/checkPage'
 import { PAGES } from '../../config'
@@ -49,7 +52,7 @@ const OTTApp = () => (
         <GlobalStores>
           <Background>
             <Suspense fallback={null}>
-              <Main />
+              {isAvailable ? (<Main />) : (<UnavailableText />)}
             </Suspense>
           </Background>
         </GlobalStores>