Add maintenance page

This PR adds a down-for-maintenance page that can be manually enabled by setting a new ENABLE_MAINTENANCE_PAGE environment variable to 'enabled'.

components/Maintenance.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'next-i18next'
+
+export const Maintenance: React.FC = () => {
+  const { t } = useTranslation('common')
+
+  return (
+    <div className="error-content">
+      <div className="error-label">{t('maintenance.label')}</div>
+      <div className="error-entry">{t('maintenance.entry')}</div>
+      <div className="error-entry">{t('maintenance.entry2')}</div>
+    </div>
+  )
+}

pages/_error.tsx

@@ -1,4 +1,3 @@
-import { NextPageContext } from 'next'
 import { useTranslation } from 'next-i18next'
 import { ReactElement } from 'react'
 

pages/index.tsx

@@ -11,6 +11,7 @@ import { Header } from '../components/Header'
 import { Title } from '../components/Title'
 import { ClaimSection } from '../components/ClaimSection'
 import { TimeoutModal } from '../components/TimeoutModal'
+import { Maintenance } from '../components/Maintenance'
 import { Footer } from '../components/Footer'
 
 import { ScenarioContent, UrlPrefixes } from '../types/common'
@@ -26,6 +27,7 @@ export interface HomeProps {
   userArrivedFromUioMobile?: boolean
   urlPrefixes: UrlPrefixes
   enableGoogleAnalytics: string
+  enableMaintenancePage: string
 }
 
 export default function Home({
@@ -36,6 +38,7 @@ export default function Home({
   userArrivedFromUioMobile = false,
   urlPrefixes,
   enableGoogleAnalytics,
+  enableMaintenancePage,
 }: HomeProps): ReactElement {
   const { t } = useTranslation('common')
 
@@ -64,28 +67,22 @@ export default function Home({
   )
 
   // If any errorCode is provided, render the error page.
-  let mainComponent: JSX.Element
-  if (errorCode) {
-    mainComponent = (
-      <main className="main">
-        <Container className="main-content">
-          <Error userArrivedFromUioMobile />
-        </Container>
-      </main>
-    )
+  let mainContent: JSX.Element
+  if (enableMaintenancePage) {
+    mainContent = <Maintenance />
+  } else if (errorCode) {
+    mainContent = <Error userArrivedFromUioMobile />
   } else {
-    mainComponent = (
-      <main className="main">
-        <Container className="main-content">
-          <Title />
-          <ClaimSection
-            loading={loading}
-            userArrivedFromUioMobile={userArrivedFromUioMobile}
-            statusContent={scenarioContent.statusContent}
-            detailsContent={scenarioContent.detailsContent}
-          />
-        </Container>
-      </main>
+    mainContent = (
+      <>
+        <Title />
+        <ClaimSection
+          loading={loading}
+          userArrivedFromUioMobile={userArrivedFromUioMobile}
+          statusContent={scenarioContent.statusContent}
+          detailsContent={scenarioContent.detailsContent}
+        />
+      </>
     )
   }
 
@@ -104,7 +101,9 @@ export default function Home({
         {enableGoogleAnalytics === 'enabled' && googleAnalytics}
       </Head>
       <Header userArrivedFromUioMobile={userArrivedFromUioMobile} />
-      {mainComponent}
+      <main className="main">
+        <Container className="main-content">{mainContent}</Container>
+      </main>
       <TimeoutModal userArrivedFromUioMobile={userArrivedFromUioMobile} timedOut={timedOut} urlPrefixes={urlPrefixes} />
       <Footer />
     </Container>
@@ -128,6 +127,9 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
   // Set to 'enabled' to include Google Analytics code
   const ENABLE_GOOGLE_ANALYTICS = process.env.ENABLE_GOOGLE_ANALYTICS ?? ''
 
+  // Set to 'enabled' to display down-for-maintenance page
+  const ENABLE_MAINTENANCE_PAGE = process.env.ENABLE_MAINTENANCE_PAGE ?? ''
+
   // Other vars.
   let errorCode: number | null = null
   let scenarioContent: ScenarioContent | null = null
@@ -199,6 +201,7 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res, locale,
       userArrivedFromUioMobile: userArrivedFromUioMobile,
       urlPrefixes: URL_PREFIXES,
       enableGoogleAnalytics: ENABLE_GOOGLE_ANALYTICS,
+      enableMaintenancePage: ENABLE_MAINTENANCE_PAGE,
       ...(await serverSideTranslations(locale || 'en', ['common', 'claim-details', 'claim-status'])),
     },
   }

public/locales/en/common.json

@@ -20,6 +20,11 @@
       "entry": "We are unable to perform your request."
     }
   },
+  "maintenance": {
+    "label": "We'll Be Back Soon",
+    "entry": "This page is currently unavailable during system maintenance.",
+    "entry2": "Thank you for your patience as we continue to improve our services."
+  },
   "claim-status": {
     "title": "Claim Status",
     "your-next-steps": "Your Next Steps",

public/locales/es/common.json

@@ -20,6 +20,11 @@
       "entry": "We are unable to perform your request."
     }
   },
+  "maintenance": {
+    "label": "We'll Be Back Soon",
+    "entry": "This page is currently unavailable during system maintenance.",
+    "entry2": "Thank you for your patience as we continue to improve our services."
+  },
   "claim-status": {
     "title": "Estatus de solicitud",
     "your-next-steps": "Sus próximos pasos",