From 8918ff4a8a1462d8cf90397958b9165f0eac1b51 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Sun, 24 Oct 2021 15:09:39 +0200
Subject: [PATCH] Adding page in sponsor wizard on for successful submission
---
frontend/public/locales/en/common.json | 8 ++--
frontend/public/locales/nb/common.json | 7 ++-
frontend/public/locales/nn/common.json | 7 ++-
.../src/routes/sponsor/register/index.tsx | 42 ++++++++++--------
.../sponsor/register/stepSubmitSuccess.tsx | 43 +++++++++++++++++++
5 files changed, 82 insertions(+), 25 deletions(-)
create mode 100644 frontend/src/routes/sponsor/register/stepSubmitSuccess.tsx
diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json
index 99cb2eb4..fa5ff10a 100644
--- a/frontend/public/locales/en/common.json
+++ b/frontend/public/locales/en/common.json
@@ -34,7 +34,6 @@
"endNow": "End role",
"overviewGuest": "Guest overview"
},
-
"loading": "Loading...",
"termsHeader": "Terms",
"staging": "Staging",
@@ -73,7 +72,8 @@
"back": "Back",
"next": "Next",
"save": "Save",
- "cancel": "Cancel"
+ "cancel": "Cancel",
+ "backToFrontPage": "Go to front page"
},
"registerWizardText": {
"registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
@@ -98,5 +98,7 @@
"guestPeriodDescription": "Period registered for your guest role."
},
"yourGuestAccount": "Your guest account",
- "feideId": "Feide ID"
+ "feideId": "Feide ID",
+ "thankYou": "Thanks!",
+ "sponsorSubmitSuccessDescription": "Your registration has been completed. You will receive an e-mail when the guest has filled in the missing information, so that the guest account can be approved."
}
diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json
index d00ca77e..b6dec5bb 100644
--- a/frontend/public/locales/nb/common.json
+++ b/frontend/public/locales/nb/common.json
@@ -72,7 +72,8 @@
"back": "Tilbake",
"next": "Neste",
"save": "Lagre",
- "cancel": "Avbryt"
+ "cancel": "Avbryt",
+ "backToFrontPage": "Tilbake til forsiden"
},
"registerWizardText": {
"registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
@@ -97,5 +98,7 @@
"guestPeriodDescription": "Registrert periode for din gjesterolle."
},
"yourGuestAccount": "Din gjestekonto",
- "feideId": "Feide ID"
+ "feideId": "Feide ID",
+ "thankYou": "Takk!",
+ "sponsorSubmitSuccessDescription": "Din registrering er nå fullført. Du vil få en e-post når gjesten har fylt inn informasjonen som mangler, slik at gjestekontoen kan godkjennes."
}
diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json
index b82e4f09..11c098b9 100644
--- a/frontend/public/locales/nn/common.json
+++ b/frontend/public/locales/nn/common.json
@@ -73,7 +73,8 @@
"back": "Tilbake",
"next": "Neste",
"save": "Lagre",
- "cancel": "Avbryt"
+ "cancel": "Avbryt",
+ "backToFrontPage": "Tilbake til forsida"
},
"registerWizardText": {
"registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
@@ -98,5 +99,7 @@
"guestPeriodDescription": "Registrert periode for di gjesterolle."
},
"yourGuestAccount": "Din gjestekonto",
- "feideId": "Feide ID"
+ "feideId": "Feide ID",
+ "thankYou": "Takk!",
+ "sponsorSubmitSuccessDescription": "Di registrering er no fullført. Du vil få ein e-post når gjesten har fylt inn informasjonen som manglar, slik at gjestekontoen kan godkjennast."
}
diff --git a/frontend/src/routes/sponsor/register/index.tsx b/frontend/src/routes/sponsor/register/index.tsx
index 035bc953..a93b29c9 100644
--- a/frontend/src/routes/sponsor/register/index.tsx
+++ b/frontend/src/routes/sponsor/register/index.tsx
@@ -13,6 +13,13 @@ import { PersonFormMethods } from './personFormMethods'
import SubmitState from './submitState'
import SponsorGuestButtons from '../../components/sponsorGuestButtons'
import { submitJsonOpts } from '../../../utils'
+import StepSubmitSuccess from './stepSubmitSuccess'
+
+enum Steps {
+ RegisterStep = 0,
+ SummaryStep = 1,
+ SuccessStep = 2,
+}
/**
*
@@ -34,8 +41,6 @@ export default function StepRegistration() {
})
const history = useHistory()
- const REGISTER_STEP = 0
- const SUMMARY_STEP = 1
const [activeStep, setActiveStep] = useState(0)
const personFormRef = useRef<PersonFormMethods>(null)
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
@@ -83,6 +88,7 @@ export default function StepRegistration() {
if (result !== null) {
console.log('result', result)
setSubmitState(SubmitState.SubmitSuccess)
+ setActiveStep(Steps.SuccessStep)
}
})
.catch((error) => {
@@ -111,14 +117,16 @@ export default function StepRegistration() {
<SponsorGuestButtons registerNewGuestActive />
{/* Current page in wizard */}
<Box sx={{ width: '100%' }}>
- {activeStep === REGISTER_STEP && (
+ {activeStep === Steps.RegisterStep && (
<StepPersonForm
nextHandler={handleForwardFromRegister}
formData={formData}
ref={personFormRef}
/>
)}
- {activeStep === SUMMARY_STEP && <StepSummary formData={formData} />}
+ {activeStep === Steps.SummaryStep && (
+ <StepSummary formData={formData} />
+ )}
</Box>
<Box
@@ -130,7 +138,7 @@ export default function StepRegistration() {
paddingBottom: '1rem',
}}
>
- {activeStep === REGISTER_STEP && (
+ {activeStep === Steps.RegisterStep && (
<Button
data-testid="button-next"
sx={{ color: 'theme.palette.secondary', mr: 1 }}
@@ -140,7 +148,7 @@ export default function StepRegistration() {
</Button>
)}
- {activeStep === SUMMARY_STEP && (
+ {activeStep === Steps.SummaryStep && (
<>
<Button
onClick={handleBack}
@@ -160,21 +168,19 @@ export default function StepRegistration() {
</>
)}
- <Button
- onClick={handleCancel}
- disabled={submitState === SubmitState.SubmitSuccess}
- >
- {t('button.cancel')}
- </Button>
+ {activeStep !== Steps.SuccessStep && (
+ <Button
+ onClick={handleCancel}
+ disabled={submitState === SubmitState.SubmitSuccess}
+ >
+ {t('button.cancel')}
+ </Button>
+ )}
</Box>
- {/* TODO For now just showing a heading to give the user some feedback. Should probably go to a different page on success */}
- {submitState === SubmitState.SubmitSuccess && (
- <Box>
- <h2>Submit success</h2>
- </Box>
- )}
+ {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>
diff --git a/frontend/src/routes/sponsor/register/stepSubmitSuccess.tsx b/frontend/src/routes/sponsor/register/stepSubmitSuccess.tsx
new file mode 100644
index 00000000..428390ae
--- /dev/null
+++ b/frontend/src/routes/sponsor/register/stepSubmitSuccess.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Box, Button } from '@mui/material'
+
+import { useHistory } from 'react-router-dom'
+
+const StepSubmitSuccess = () => {
+ const { t } = useTranslation(['common'])
+ const history = useHistory()
+
+ return (
+ <>
+ <Box
+ sx={{
+ paddingTop: '1rem',
+ paddingBottom: '1rem',
+ typography: 'h3',
+ }}
+ >
+ {t('thankYou')}
+ </Box>
+
+ <Box sx={{ marginTop: '2rem' }}>
+ {t('sponsorSubmitSuccessDescription')}
+ </Box>
+
+ <Button
+ sx={{
+ marginTop: '2rem',
+ color: 'theme.palette.dark',
+ }}
+ onClick={() => {
+ history.push('/')
+ }}
+ >
+ {t('button.backToFrontPage')}
+ </Button>
+ </>
+ )
+}
+
+export default StepSubmitSuccess
--
GitLab