diff --git a/administration/src/application/components/ApplyController.tsx b/administration/src/application/components/ApplyController.tsx index d6c0ac3d9..8317a28ba 100644 --- 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(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 (
-

Blaue Ehrenamtskarte beantragen

- - {loading ? null : } +

{formSubmitted ? 'Erfolgreich gesendet' : 'Ehrenamtskarte beantragen'}

+ {formSubmitted ? ( + {successText} + ) : ( + + )} + + {loading || formSubmitted ? null : } +
)