GREG-138: Adding an error report component

frontend/public/locales/en/common.json

@@ -144,5 +144,11 @@
     "confirmIdentityTitle": "Confirm?",
     "cancelInvitation": "Cancel invitation?",
     "cancelInvitationDescription": "Do you want to cancel the invitation?"
+  },
+  "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."
   }
 }

frontend/public/locales/nb/common.json

@@ -144,5 +144,11 @@
     "confirmIdentityTitle": "Bekrefte?",
     "cancelInvitation": "Kanseller invitasjon?",
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
+  },
+  "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."
   }
 }

frontend/public/locales/nn/common.json

@@ -145,5 +145,11 @@
     "confirmIdentityTitle": "Bekrefte?",
     "cancelInvitation": "Kanseller invitasjon?",
     "cancelInvitationDescription": "Vil du kansellere invitasjonen?"
+  },
+  "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."
   }
 }

frontend/src/components/errorReport/index.tsx

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

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

@@ -14,6 +14,7 @@ import SubmitState from './submitState'
 import SponsorGuestButtons from '../../components/sponsorGuestButtons'
 import { submitJsonOpts } from '../../../utils'
 import StepSubmitSuccess from './stepSubmitSuccess'
+import ServerErrorReport from '../../../components/errorReport'
 
 enum Steps {
   RegisterStep = 0,
@@ -21,6 +22,12 @@ enum Steps {
   SuccessStep = 2,
 }
 
+interface SubmitErrorData {
+  statusCode: number
+  statusText: string
+  bodyText: string
+}
+
 /**
  *
  * This component controls the invite process where the sponsor
@@ -45,6 +52,7 @@ 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 handleNext = () => {
     if (activeStep === 0) {
@@ -81,10 +89,18 @@ export default function StepRegistration() {
     fetch('/api/ui/v1/invite/', submitJsonOpts('POST', payload))
       .then((res) => {
         if (!res.ok) {
-          setSubmitState(SubmitState.SubmitFailure)
-          return null
+          res.text().then((text) => {
+            setSubmitState(SubmitState.SubmitFailure)
+            setErrorReport({
+              statusCode: res.status,
+              statusText: res.statusText,
+              bodyText: text,
+            })
+          })
+        } else {
+          return res.text()
         }
-        return res.text()
+        return null
       })
       .then((result) => {
         if (result !== null) {
@@ -186,12 +202,15 @@ export default function StepRegistration() {
 
       {activeStep === Steps.SuccessStep && <StepSubmitSuccess />}
 
-      {/* TODO For now just showing a heading to give the user some feedback */}
-      {submitState === SubmitState.SubmitFailure && (
-        <Box>
-          <h2>Submit failure</h2>
-        </Box>
-      )}
+      {submitState === SubmitState.SubmitFailure &&
+        errorReport !== undefined && (
+          <ServerErrorReport
+            errorHeading={t('error.invitationCreationFailedHeader')}
+            statusCode={errorReport?.statusCode}
+            statusText={errorReport?.statusText}
+            errorBodyText={errorReport?.bodyText}
+          />
+        )}
     </Page>
   )
 }