GREG-138: Adding error message if ous or role types cannot be loaded

frontend/public/locales/en/common.json

@@ -148,7 +148,9 @@
   "error": {
     "invitationCreationFailedHeader": "Failed to create invite",
     "errorStatusCode": "Status code: {{statusCode}} (<3>{{statusText}}</3>)",
-    "genericServerErrorBody": "The server reported:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Contact help through the link in the footer if the problem persists."
+    "genericServerErrorBody": "Message:<1>{{errorBodyText}}</1>",
+    "contactHelp": "Contact help through the link in the footer if the problem persists.",
+    "errorLoadOusRoleTypeHeading": "Error loading form data",
+    "errorLoadOusRoleType": "Could not load organizational units and/or role type from server"
   }
 }

frontend/public/locales/nb/common.json

@@ -148,7 +148,9 @@
   "error": {
     "invitationCreationFailedHeader": "Kunne ikke opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
-    "genericServerErrorBody": "Respons fra server:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer."
+    "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "errorLoadOusRoleTypeHeading": "Feil under lasting av skjemadata",
+    "errorLoadOusRoleType": "Kunne ikke laste organisasjons og/eller rolletype data fra server"
   }
 }

frontend/public/locales/nn/common.json

@@ -149,7 +149,9 @@
   "error": {
     "invitationCreationFailedHeader": "Kunne ikkje opprette invitasjon",
     "errorStatusCode": "Statuskode: {{statusCode}} (<3>{{statusText}}</3>)",
-    "genericServerErrorBody": "Respons frå server:<1>{{errorBodyText}}</1>",
-    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer."
+    "genericServerErrorBody": "Melding:<1>{{errorBodyText}}</1>",
+    "contactHelp": "Kontakt hjelp via link i footer om problemet vedvarer.",
+    "errorLoadOusRoleTypeHeading": "Feil under lasting av skjemadata",
+    "errorLoadOusRoleType": "Kunne ikkje laste organisasjons og/eller rolletype data frå server"
   }
 }

frontend/src/components/errorReport/index.tsx

@@ -2,7 +2,7 @@ import { Alert, AlertTitle } from '@mui/material'
 import { Trans, useTranslation } from 'react-i18next'
 import React from 'react'
 
-interface ErrorReportProps {
+export type ServerErrorReportData = {
   errorHeading: string
   statusCode?: number
   statusText?: string
@@ -14,7 +14,7 @@ export default function ServerErrorReport({
   statusCode,
   statusText,
   errorBodyText,
-}: ErrorReportProps) {
+}: ServerErrorReportData) {
   const [t] = useTranslation(['common'])
   return (
     <Alert severity="error">
@@ -27,7 +27,7 @@ export default function ServerErrorReport({
       <br />
       {errorBodyText !== undefined && (
         <Trans i18nKey="error.genericServerErrorBody" t={t}>
-          The server reported:
+          Message:
           <blockquote>{{ errorBodyText }}</blockquote>
         </Trans>
       )}

frontend/src/routes/sponsor/register/stepRegistration.tsx

-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Box, Button } from '@mui/material'
@@ -14,7 +14,11 @@ import SubmitState from './submitState'
 import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 import { submitJsonOpts } from '../../../utils'
 import StepSubmitSuccess from './stepSubmitSuccess'
-import ServerErrorReport from '../../../components/errorReport'
+import ServerErrorReport, {
+  ServerErrorReportData,
+} from '../../../components/errorReport'
+import useOus from '../../../hooks/useOus'
+import useRoleTypes from '../../../hooks/useRoleTypes'
 
 enum Steps {
   RegisterStep = 0,
@@ -22,12 +26,6 @@ enum Steps {
   SuccessStep = 2,
 }
 
-interface SubmitErrorData {
-  statusCode: number
-  statusText: string
-  bodyText: string
-}
-
 /**
  *
  * This component controls the invite process where the sponsor
@@ -52,7 +50,16 @@ export default function StepRegistration() {
   const [activeStep, setActiveStep] = useState(0)
   const personFormRef = useRef<PersonFormMethods>(null)
   const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
-  const [errorReport, setErrorReport] = useState<SubmitErrorData>()
+  const [submitErrorReport, setSubmitErrorReport] =
+    useState<ServerErrorReportData>()
+  const [formDataErrorReport, setFormDataErrorReport] =
+    useState<ServerErrorReportData>()
+
+  // The organizational unit and role types are not used by this component, but
+  // loading them here anyways to make sure that they can be loaded using the
+  // hooks. If they cannot, an error message will be shown to the user
+  const ous = useOus()
+  const roleTypes = useRoleTypes()
 
   const handleNext = () => {
     if (activeStep === 0) {
@@ -91,10 +98,11 @@ export default function StepRegistration() {
         if (!res.ok) {
           res.text().then((text) => {
             setSubmitState(SubmitState.SubmitFailure)
-            setErrorReport({
+            setSubmitErrorReport({
+              errorHeading: t('error.invitationCreationFailedHeader'),
               statusCode: res.status,
               statusText: res.statusText,
-              bodyText: text,
+              errorBodyText: text,
             })
           })
         } else {
@@ -130,6 +138,20 @@ export default function StepRegistration() {
     history.push('/')
   }
 
+  useEffect(() => {
+    if (ous.length === 0 || roleTypes.length === 0) {
+      // These arrays should have values. There is no information
+      // about the status code at this level, since the values come
+      // from hooks and any server errors are handled there
+      setFormDataErrorReport({
+        errorHeading: t('error.errorLoadOusRoleTypeHeading'),
+        statusCode: undefined,
+        statusText: undefined,
+        errorBodyText: t('error.errorLoadOusRoleType'),
+      })
+    }
+  }, [])
+
   return (
     <Page>
       <SponsorGuestButtons registerNewGuestActive />
@@ -203,14 +225,23 @@ export default function StepRegistration() {
       {activeStep === Steps.SuccessStep && <StepSubmitSuccess />}
 
       {submitState === SubmitState.SubmitFailure &&
-        errorReport !== undefined && (
+        submitErrorReport !== undefined && (
           <ServerErrorReport
-            errorHeading={t('error.invitationCreationFailedHeader')}
-            statusCode={errorReport?.statusCode}
-            statusText={errorReport?.statusText}
-            errorBodyText={errorReport?.bodyText}
+            errorHeading={submitErrorReport?.errorHeading}
+            statusCode={submitErrorReport?.statusCode}
+            statusText={submitErrorReport?.statusText}
+            errorBodyText={submitErrorReport?.errorBodyText}
           />
         )}
+
+      {formDataErrorReport !== undefined && (
+        <ServerErrorReport
+          errorHeading={formDataErrorReport.errorHeading}
+          statusCode={undefined}
+          statusText={undefined}
+          errorBodyText={formDataErrorReport.errorBodyText}
+        />
+      )}
     </Page>
   )
 }