Merge pull request #648 from digitalfabrik/625_Application_end_screen

625: Application end screen
digitalfabrik · Dec 14, 2022 · 54cb77b · 54cb77b
2 parents 29471e3 + acb33a7
commit 54cb77b
Showing 1 changed file with 36 additions and 6 deletions.
diff --git a/administration/src/application/components/ApplyController.tsx b/administration/src/application/components/ApplyController.tsx
@@ -9,8 +9,9 @@ import useVersionedLocallyStoredState from '../useVersionedLocallyStoredState'
 import DiscardAllInputsButton from './DiscardAllInputsButton'
 import { useGarbageCollectArrayBuffers, useInitializeGlobalArrayBuffersManager } from '../globalArrayBuffersManager'
 import ApplicationForm from './forms/ApplicationForm'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { SnackbarProvider, useSnackbar } from 'notistack'
+import styled from 'styled-components'
 import ApplicationErrorBoundary from '../ApplicationErrorBoundary'
 
 // This env variable is determined by '../../../application_commit.sh'. It holds the hash of the last commit to the
@@ -19,8 +20,30 @@ const lastCommitForApplicationForm = process.env.REACT_APP_APPLICATION_COMMIT as
 
 export const applicationStorageKey = 'applicationState'
 
+const SuccessContent = styled.div`
+  white-space: pre-line;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1rem;
+`
+
 const ApplyController = () => {
-  const [addBlueEakApplication, { loading }] = useAddBlueEakApplicationMutation()
+  const [formSubmitted, setFormSubmitted] = useState<boolean>(false)
+  const { enqueueSnackbar } = useSnackbar()
+  const [addBlueEakApplication, { loading }] = useAddBlueEakApplicationMutation({
+    onError: error => {
+      console.error(error)
+      enqueueSnackbar('Beim Absenden des Antrags is ein Fehler aufgetreten', { variant: 'error' })
+    },
+    onCompleted: result => {
+      if (result) {
+        setState(() => ApplicationForm.initialState)
+        setFormSubmitted(true)
+      } else {
+        enqueueSnackbar('Beim Absenden des Antrags is ein Fehler aufgetreten.', { variant: 'error' })
+      }
+    },
+  })
   const { status, state, setState } = useVersionedLocallyStoredState(
     ApplicationForm.initialState,
     applicationStorageKey,
@@ -31,7 +54,6 @@ const ApplyController = () => {
     () => (status === 'loading' ? null : () => ApplicationForm.getArrayBufferKeys(state)),
     [state, status]
   )
-  const { enqueueSnackbar } = useSnackbar()
   useGarbageCollectArrayBuffers(getArrayBufferKeys)
 
   const discardAll = useCallback(() => setState(() => ApplicationForm.initialState), [setState])
@@ -58,13 +80,21 @@ const ApplyController = () => {
       },
     })
   }
+  const successText = `Ihr Antrag für die Ehrenamtskarte wurde erfolgreich übermittelt.
+            Sie können das Fenster schließen.`
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'start', margin: '16px' }}>
       <div style={{ maxWidth: '1000px', width: '100%' }}>
-        <h2 style={{ textAlign: 'center' }}>Blaue Ehrenamtskarte beantragen</h2>
-        <ApplicationForm.Component state={state} setState={setState} onSubmit={submit} loading={loading} />
-        <DialogActions>{loading ? null : <DiscardAllInputsButton discardAll={discardAll} />}</DialogActions>
+        <h2 style={{ textAlign: 'center' }}>{formSubmitted ? 'Erfolgreich gesendet' : 'Ehrenamtskarte beantragen'}</h2>
+        {formSubmitted ? (
+          <SuccessContent>{successText}</SuccessContent>
+        ) : (
+          <ApplicationForm.Component state={state} setState={setState} onSubmit={submit} loading={loading} />
+        )}
+        <DialogActions>
+          {loading || formSubmitted ? null : <DiscardAllInputsButton discardAll={discardAll} />}
+        </DialogActions>
       </div>
     </div>
   )