GREG-139: Adding error message if the submit failed

frontend/src/routes/guest/register/index.tsx

@@ -76,7 +76,6 @@ export default function GuestRegister() {
   const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
   const guestConsentRef = useRef<GuestRegisterCallableMethods>(null)
 
-  // TODO On submit successful the user should be directed to some page telling
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [submitState, setSubmitState] = useState<SubmitState>(
     SubmitState.NotSubmitted
@@ -92,6 +91,8 @@ export default function GuestRegister() {
     useState<GuestConsentData | null>(null)
   const [fetchInvitationDataError, setFetchInvitationDataError] =
     useState<ErrorReportProps | null>(null)
+  const [submitGuestDataError, setSubmitGuestDataError] =
+    useState<ErrorReportProps | null>(null)
 
   const fetchInvitationData = async () => {
     const response = await fetch('/api/ui/v1/invited/', fetchJsonOpts())
@@ -288,11 +289,12 @@ export default function GuestRegister() {
           setSubmitState(SubmitState.Submitted)
           setActiveStep(Step.SuccessStep)
         } else {
-          // Expect that the error will contain some JSON-data in the body
+          // Expect that the error will contain JSON-data in the body
+          // and that there will be a code field there
           response
             .json()
             .then((errorData) => {
-              setFetchInvitationDataError({
+              setSubmitGuestDataError({
                 errorHeading: t('error.guestRegistrationFailed'),
                 statusCode: response.status,
                 statusText: response.statusText,
@@ -304,7 +306,7 @@ export default function GuestRegister() {
 
               // Probably some unknown data in the body, create an error message
               // using the rest of the information in the response
-              setFetchInvitationDataError({
+              setSubmitGuestDataError({
                 errorHeading: t('error.guestRegistrationFailed'),
                 statusCode: response.status,
                 statusText: response.statusText,
@@ -317,6 +319,13 @@ export default function GuestRegister() {
         }
       })
       .catch((error) => {
+        // Something went wrong before/during the backend was called
+        setSubmitGuestDataError({
+          errorHeading: t('error.guestRegistrationFailed'),
+          statusCode: undefined,
+          statusText: undefined,
+          errorBodyText: undefined,
+        })
         setSubmitState(SubmitState.SubmittedError)
         console.error(error)
       })
@@ -433,6 +442,15 @@ export default function GuestRegister() {
           errorBodyText={fetchInvitationDataError?.errorBodyText}
         />
       )}
+
+      {submitGuestDataError !== null && (
+        <ServerErrorReport
+          errorHeading={submitGuestDataError?.errorHeading}
+          statusCode={submitGuestDataError?.statusCode}
+          statusText={submitGuestDataError?.statusText}
+          errorBodyText={submitGuestDataError?.errorBodyText}
+        />
+      )}
     </Page>
   )
 }