Adding success page for guest registration wizard

frontend/public/locales/en/common.json

@@ -100,5 +100,6 @@
   "yourGuestAccount": "Your guest account",
   "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."
+  "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.",
+  "guestSubmitSuccessDescription": "Your registration is now completed. You will receive an e-mail or SMS when your account has been created."
 }

frontend/public/locales/nb/common.json

@@ -100,5 +100,6 @@
   "yourGuestAccount": "Din gjestekonto",
   "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."
+  "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.",
+  "guestSubmitSuccessDescription": "Din registrering er nå fullført. Du vil få en e-post eller SMS når kontoen er opprettet."
 }

frontend/public/locales/nn/common.json

@@ -101,5 +101,6 @@
   "yourGuestAccount": "Din gjestekonto",
   "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."
+  "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.",
+  "guestSubmitSuccessDescription": "Di registrering er no fullført. Du vil få ein e-post eller SMS når kontoen er oppretta."
 }

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

@@ -17,6 +17,7 @@ import { EnteredGuestData } from './enteredGuestData'
 import { GuestInviteInformation } from './guestDataForm'
 import AuthenticationMethod from './authenticationMethod'
 import { splitPhoneNumber, submitJsonOpts } from '../../../utils'
+import StepSubmitSuccessGuest from './submitSuccessPage'
 
 enum SubmitState {
   NotSubmitted,
@@ -24,6 +25,11 @@ enum SubmitState {
   SubmittedError,
 }
 
+enum Step {
+  RegisterStep = 0,
+  SubmitSuccessStep = 1,
+}
+
 /*
  * When the guest reaches this page he has already an invite ID set in his session.
  */
@@ -36,7 +42,6 @@ export default function GuestRegister() {
     SubmitState.NotSubmitted
   )
   const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
-  const REGISTER_STEP = 0
   // TODO Set step when user moves between pages
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [activeStep, setActiveStep] = useState(0)
@@ -141,6 +146,8 @@ export default function GuestRegister() {
   const handleForwardFromRegister = (
     updateFormData: EnteredGuestData
   ): void => {
+    // TODO Should go to consent page here. Submit should after after consent page
+
     const payload: any = {}
     payload.person = {}
     payload.person.mobile_phone = `+${getCountryCallingCode(
@@ -175,6 +182,7 @@ export default function GuestRegister() {
       .then((response) => {
         if (response.ok) {
           setSubmitState(SubmitState.Submitted)
+          setActiveStep(Step.SubmitSuccessStep)
         } else {
           setSubmitState(SubmitState.SubmittedError)
           console.error(`Server responded with status: ${response.status}`)
@@ -195,7 +203,7 @@ export default function GuestRegister() {
       <OverviewGuestButton />
       {/* Current page in wizard */}
       <Box sx={{ width: '100%' }}>
-        {activeStep === REGISTER_STEP && (
+        {activeStep === Step.RegisterStep && (
           <GuestRegisterStep
             nextHandler={handleForwardFromRegister}
             guestData={guestFormData}
@@ -213,7 +221,7 @@ export default function GuestRegister() {
           paddingBottom: '1rem',
         }}
       >
-        {activeStep === REGISTER_STEP && (
+        {activeStep === Step.RegisterStep && (
           <Button
             data-testid="button-next"
             sx={{ color: 'theme.palette.secondary', mr: 1 }}
@@ -223,12 +231,18 @@ export default function GuestRegister() {
           </Button>
         )}
 
-        <Button onClick={handleCancel}>{t('button.cancel')}</Button>
+        {activeStep !== Step.SubmitSuccessStep && (
+          <>
+            <Button onClick={handleCancel}>{t('button.cancel')}</Button>
 
-        {/* TODO This button is only for testing while developing */}
-        <Button onClick={handleSave}>{t('button.save')}</Button>
+            {/* TODO This button is only for testing while developing */}
+            <Button onClick={handleSave}>{t('button.save')}</Button>
+          </>
+        )}
       </Box>
 
+      {activeStep === Step.SubmitSuccessStep && <StepSubmitSuccessGuest />}
+
       {/* TODO Give better feedback to user */}
       {errorState && <h2>{errorState}</h2>}
     </Page>

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

+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Box, Button } from '@mui/material'
+
+import { useHistory } from 'react-router-dom'
+
+const StepSubmitSuccessGuest = () => {
+  const { t } = useTranslation(['common'])
+  const history = useHistory()
+
+  return (
+    <>
+      <Box
+        sx={{
+          paddingTop: '1rem',
+          paddingBottom: '1rem',
+          typography: 'h3',
+        }}
+      >
+        {t('thankYou')}
+      </Box>
+
+      <Box sx={{ marginTop: '2rem' }}>{t('guestSubmitSuccessDescription')}</Box>
+
+      <Button
+        sx={{
+          marginTop: '2rem',
+          color: 'theme.palette.dark',
+        }}
+        onClick={() => {
+          history.push('/')
+        }}
+      >
+        {t('button.backToFrontPage')}
+      </Button>
+    </>
+  )
+}
+
+export default StepSubmitSuccessGuest