From b556416aae3ee8ff853e8d4a044bd0b1d900c61a Mon Sep 17 00:00:00 2001
From: Andrei Dekterev <avdekterev@gmail.com>
Date: Wed, 23 Nov 2022 13:15:57 +0300
Subject: [PATCH] feat(add-unavailable-text): add unavailable text to main page

---
 src/components/UnavailableText/index.tsx | 19 +++++++++++++++++++
 src/config/env.tsx                       |  2 ++
 src/features/App/index.tsx               |  5 ++++-
 3 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 src/components/UnavailableText/index.tsx

diff --git a/src/components/UnavailableText/index.tsx b/src/components/UnavailableText/index.tsx
new file mode 100644
index 00000000..e2cc3500
--- /dev/null
+++ b/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>
+)
diff --git a/src/config/env.tsx b/src/config/env.tsx
index 43f9a9fc..ebe71c86 100644
--- a/src/config/env.tsx
+++ b/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'
diff --git a/src/features/App/index.tsx b/src/features/App/index.tsx
index ae52a456..6c1764eb 100644
--- a/src/features/App/index.tsx
+++ b/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>