Adding page in sponsor wizard on for successful submission

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."
 }

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."
 }

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."
 }

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>

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

+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