frontend/package.json

@@ -84,6 +84,7 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "jest-fetch-mock": "^3.0.3",
     "jest-junit": "^12.2.0"
   }
 }

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.",
@@ -97,5 +97,9 @@
     "yourGuestPeriod": "Your guest period",
     "guestPeriodDescription": "Period registered for your guest role."
   },
-  "yourGuestAccount": "Your guest account"
+  "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.",
+  "guestSubmitSuccessDescription": "Your registration is now completed. You will receive an e-mail or SMS when your account has been created."
 }

frontend/public/locales/en/invite.json

+{
+  "description": "Please choose how you want to log in to complete your registration. The recommended way is to log in with either Feide or ID-porten. If that is not possible you can manually fill out the registration form with your passport number.",
+  "header": "Guest Registration",
+  "login": "Log in with FEIDE",
+  "manual": "Registrate manually"
+}

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.",
@@ -96,5 +97,9 @@
     "yourGuestPeriod": "Din gjesteperiode",
     "guestPeriodDescription": "Registrert periode for din gjesterolle."
   },
-  "yourGuestAccount": "Din gjestekonto"
+  "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.",
+  "guestSubmitSuccessDescription": "Din registrering er nå fullført. Du vil få en e-post eller SMS når kontoen er opprettet."
 }

frontend/public/locales/nb/invite.json

+{
+  "description": "Vennligst velg hvordan du vil logge inn for å fullføre registreringen. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikke er mulig kan du fylle ut registreringskjemaet manuelt med passnummer",
+  "header": "Gjestetjenesten",
+  "login": "Logg inn med FEIDE",
+  "manual": "Registrer manuelt"
+}

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.",
@@ -97,5 +98,9 @@
     "yourGuestPeriod": "Din gjesteperiode",
     "guestPeriodDescription": "Registrert periode for di gjesterolle."
   },
-  "yourGuestAccount": "Din gjestekonto"
+  "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.",
+  "guestSubmitSuccessDescription": "Di registrering er no fullført. Du vil få ein e-post eller SMS når kontoen er oppretta."
 }

frontend/public/locales/nn/invite.json

+{
+  "description": "Ver venleg og vel korleis du vil logge inn for å fullføre registreringa. Den anbefalte metoden er å logge inn gjennom Feide eller ID-porten. Dersom det ikkje er mogeleg kan du fylle ut registreringskjemaet manuelt med passnummer",
+  "header": "Gjestetjenesten",
+  "login": "Logg inn med FEIDE",
+  "manual": "Registrer manuelt"
+}

frontend/src/components/button/index.tsx

@@ -8,7 +8,11 @@ interface IHrefButton {
 
 function HrefButton({ to, children }: IHrefButton) {
   return (
-    <Button variant="contained" href={to} sx={{ backgroundColor: '#18191C' }}>
+    <Button
+      variant="contained"
+      href={to}
+      sx={{ backgroundColor: 'theme.palette.secondary' }}
+    >
       {children}
     </Button>
   )

frontend/src/components/button/linebutton.tsx

+import React from 'react'
+import { Button } from '@mui/material'
+
+interface IHrefButton {
+  to: string
+  children: React.ReactNode
+}
+
+function HrefLineButton({ to, children }: IHrefButton) {
+  return (
+    <Button href={to} sx={{ color: 'theme.palette.secondary' }}>
+      {children}
+    </Button>
+  )
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export { HrefLineButton }

frontend/src/routes/guest/register/enteredGuestData.ts

@@ -4,6 +4,7 @@
  * most of the data there the guest cannot change.
  */
 export type EnteredGuestData = {
+  mobilePhoneCountry: string
   mobilePhone: string
   nationalIdNumber?: string
   passportNumber?: string

frontend/src/routes/guest/register/guestDataForm.ts

-/**
- * This is data about the guest that the sponsor has entered when the invitation was created
- */
 import AuthenticationMethod from './authenticationMethod'
 
-export type ContactInformationBySponsor = {
+/**
+ * This is the basis for the data shown in the guest registration form.
+ *
+ * It mostly contains data about the guest that was entered during the invite step.
+ */
+export type GuestInviteInformation = {
   first_name: string
   last_name: string
   ou_name_nb: string
@@ -14,14 +16,20 @@ export type ContactInformationBySponsor = {
   role_end: string
   comment?: string
 
+  feide_id?: string
+
   // These fields are in the form, but it is not expected that
   // they are set, with the exception of e-mail, when the guest
   // first follows the invite link
   email?: string
+
+  mobile_phone_country_code?: string
   mobile_phone?: string
+
   fnr?: string
   passport?: string
   passportNationality?: string
+  countryForCallingCode?: string
 
   authentication_method: AuthenticationMethod
 }

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

+import React from 'react'
+import fetchMock, { enableFetchMocks } from 'jest-fetch-mock'
+import { render, waitFor, screen } from 'test-utils'
+import AdapterDateFns from '@mui/lab/AdapterDateFns'
+import { LocalizationProvider } from '@mui/lab'
+import GuestRegister from './index'
+
+enableFetchMocks()
+
+const testData = {
+  person: {
+    first_name: 'Test',
+    last_name: 'Tester',
+    mobile_phone: '+4797543910',
+    email: 'test@example.org',
+    fnr: '04062141242',
+    passport: 'NO-123456',
+  },
+  role: {
+    ou_name_en: 'English organizational unit name',
+    ou_name_nb: 'Norsk navn organisasjonsenhet',
+    name_en: 'Guest role',
+    name_nb: 'Gjesterolle',
+    start: '2021-08-10',
+    end: '2021-08-16',
+    comment: '',
+  },
+  meta: {
+    session_type: 'invite',
+  },
+}
+
+beforeEach(() => {
+  fetchMock.mockIf('/api/ui/v1/invited', () =>
+    Promise.resolve<any>(JSON.stringify(testData))
+  )
+})
+
+test('Mobile phone number parsed and split correctly', async () => {
+  render(
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <GuestRegister />
+    </LocalizationProvider>
+  )
+
+  await waitFor(() => screen.queryByText(testData.person.first_name))
+  await waitFor(() => screen.queryByText(testData.person.last_name))
+  await waitFor(() => screen.queryByText(testData.person.email))
+  await waitFor(() => screen.queryByText(testData.person.fnr))
+  await waitFor(() => screen.queryByText('NO'))
+  await waitFor(() => screen.queryByText('123456'))
+
+  // There is no proper i18n loaded so the country name will be undefined, the country code should still show though
+  await waitFor(() => screen.queryByText('undefined (47)'))
+  await waitFor(() => screen.queryByText('97543910'))
+})

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

@@ -5,13 +5,19 @@ import { Box, Button } from '@mui/material'
 import Page from 'components/page'
 
 import { useHistory } from 'react-router-dom'
+import {
+  CountryCode,
+  getCountries,
+  getCountryCallingCode,
+} from 'libphonenumber-js'
 import OverviewGuestButton from '../../components/overviewGuestButton'
 import GuestRegisterStep from './registerPage'
 import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods'
 import { EnteredGuestData } from './enteredGuestData'
-import { ContactInformationBySponsor } from './guestDataForm'
+import { GuestInviteInformation } from './guestDataForm'
 import AuthenticationMethod from './authenticationMethod'
-import { submitJsonOpts } from '../../../utils'
+import { splitPhoneNumber, submitJsonOpts } from '../../../utils'
+import StepSubmitSuccessGuest from './submitSuccessPage'
 
 enum SubmitState {
   NotSubmitted,
@@ -19,41 +25,45 @@ 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.
  */
 export default function GuestRegister() {
   const { t } = useTranslation(['common'])
   const history = useHistory()
-  // TODO On submit successful the user should be directed to some page telling h
+  // TODO On submit successful the user should be directed to some page telling
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [submitState, setSubmitState] = useState<SubmitState>(
     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)
 
-  const [guestFormData, setGuestFormData] =
-    useState<ContactInformationBySponsor>({
-      first_name: '',
-      last_name: '',
-      ou_name_en: '',
-      ou_name_nb: '',
-      role_name_en: '',
-      role_name_nb: '',
-      role_start: '',
-      role_end: '',
-      comment: '',
-      email: '',
-      mobile_phone: '',
-      fnr: '',
-      passport: '',
-      passportNationality: '',
-      authentication_method: AuthenticationMethod.Invite,
-    })
+  const [guestFormData, setGuestFormData] = useState<GuestInviteInformation>({
+    first_name: '',
+    last_name: '',
+    ou_name_en: '',
+    ou_name_nb: '',
+    role_name_en: '',
+    role_name_nb: '',
+    role_start: '',
+    role_end: '',
+    comment: '',
+    email: '',
+    mobile_phone: '',
+    fnr: '',
+    passport: '',
+    passportNationality: '',
+    countryForCallingCode: '',
+    authentication_method: AuthenticationMethod.Invite,
+  })
 
   const [errorState, setErrorState] = useState<string>('')
 
@@ -63,13 +73,29 @@ export default function GuestRegister() {
 
       if (response.ok) {
         response.json().then((jsonResponse) => {
-          console.log(`Guest data from server: ${JSON.stringify(jsonResponse)}`)
+          // TODO Remove after development
+          console.log(`Data from server: ${JSON.stringify(jsonResponse)}`)
 
           const authenticationMethod =
             jsonResponse.meta.session_type === 'invite'
               ? AuthenticationMethod.Invite
               : AuthenticationMethod.Feide
 
+          const [countryCode, nationalNumber] = jsonResponse.person.mobile_phone
+            ? splitPhoneNumber(jsonResponse.person.mobile_phone)
+            : ['', '']
+
+          let extractedCountryCode = ''
+          if (countryCode) {
+            const matchingCountries = getCountries().find(
+              (value) => getCountryCallingCode(value) === countryCode
+            )
+
+            if (matchingCountries && matchingCountries.length > 0) {
+              extractedCountryCode = matchingCountries.toString()
+            }
+          }
+
           setGuestFormData({
             first_name: jsonResponse.person.first_name,
             last_name: jsonResponse.person.last_name,
@@ -82,11 +108,14 @@ export default function GuestRegister() {
             comment: jsonResponse.role.comments,
 
             email: jsonResponse.person.email,
-            mobile_phone: jsonResponse.person.mobile_phone,
+            feide_id: jsonResponse.person.feide_id,
+            mobile_phone_country_code: countryCode,
+            mobile_phone: nationalNumber,
             fnr: jsonResponse.fnr,
             passport: jsonResponse.passport,
             // TODO Separate out nationality based on what is in the server response
             passportNationality: '',
+            countryForCallingCode: extractedCountryCode,
 
             authentication_method: authenticationMethod,
           })
@@ -117,9 +146,13 @@ 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 = updateFormData.mobilePhone
+    payload.person.mobile_phone = `+${getCountryCallingCode(
+      updateFormData.mobilePhoneCountry as CountryCode
+    )}${updateFormData.mobilePhone}`
 
     if (updateFormData.passportNumber && updateFormData.passportNationality) {
       // The user has entered some passport information, check that both nationality and number are present
@@ -149,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}`)
@@ -169,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}
@@ -187,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 }}
@@ -197,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/registerPage.test.tsx

@@ -5,12 +5,10 @@ import { LocalizationProvider } from '@mui/lab'
 import GuestRegisterStep from './registerPage'
 import { EnteredGuestData } from './enteredGuestData'
 import AuthenticationMethod from './authenticationMethod'
+import { GuestInviteInformation } from './guestDataForm'
 
-test('Guest register page showing passport field on manual registration', async () => {
-  const nextHandler = (enteredGuestData: EnteredGuestData) => {
-    console.log(`Entered data: ${enteredGuestData}`)
-  }
-  const guestData = {
+function getEmptyGuestData(): GuestInviteInformation {
+  return {
     first_name: '',
     last_name: '',
     ou_name_en: '',
@@ -24,12 +22,22 @@ test('Guest register page showing passport field on manual registration', async
     mobile_phone: '',
     fnr: '',
     passport: '',
+    countryForCallingCode: '',
     authentication_method: AuthenticationMethod.Invite,
   }
+}
+
+test('Guest register page showing passport field on manual registration', async () => {
+  const nextHandler = (enteredGuestData: EnteredGuestData) => {
+    console.log(`Entered data: ${enteredGuestData}`)
+  }
 
   render(
     <LocalizationProvider dateAdapter={AdapterDateFns}>
-      <GuestRegisterStep nextHandler={nextHandler} guestData={guestData} />
+      <GuestRegisterStep
+        nextHandler={nextHandler}
+        guestData={getEmptyGuestData()}
+      />
     </LocalizationProvider>
   )
 

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

@@ -8,7 +8,13 @@ import {
   Typography,
 } from '@mui/material'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
+import React, {
+  forwardRef,
+  Ref,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   CountryCallingCode,
@@ -17,7 +23,7 @@ import {
   getCountryCallingCode,
 } from 'libphonenumber-js'
 import { getAlpha2Codes, getName } from 'i18n-iso-countries'
-import { ContactInformationBySponsor } from './guestDataForm'
+import { GuestInviteInformation } from './guestDataForm'
 import { EnteredGuestData } from './enteredGuestData'
 import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods'
 import { isValidFnr, isValidMobilePhoneNumber } from '../../../utils'
@@ -26,7 +32,7 @@ import AuthenticationMethod from './authenticationMethod'
 interface GuestRegisterProperties {
   nextHandler(guestData: EnteredGuestData): void
 
-  guestData: ContactInformationBySponsor
+  guestData: GuestInviteInformation
 }
 
 /**
@@ -42,19 +48,7 @@ const GuestRegisterStep = forwardRef(
     const [countryCode, setCountryCode] = useState<
       CountryCallingCode | undefined
     >(undefined)
-
-    const handleCountryCodeChange = (event: SelectChangeEvent) => {
-      if (event.target.value) {
-        const countryCodeType = getCountries().find(
-          (value) => value.toString() === event.target.value
-        )
-        if (countryCodeType) {
-          setCountryCode(getCountryCallingCode(countryCodeType))
-        }
-      } else {
-        setCountryCode(undefined)
-      }
-    }
+    const [mobilePhone, setMobilePhone] = useState<string>('')
 
     const submit: SubmitHandler<EnteredGuestData> = (data) => {
       nextHandler(data)
@@ -64,19 +58,66 @@ const GuestRegisterStep = forwardRef(
       register,
       handleSubmit,
       setValue,
-      trigger,
+      setError,
+      clearErrors,
       formState: { errors },
     } = useForm<EnteredGuestData>()
     const onSubmit = handleSubmit<EnteredGuestData>(submit)
 
+    const handleCountryCodeChange = (event: SelectChangeEvent) => {
+      if (event.target.value) {
+        const countryCodeType = event.target.value as CountryCode
+        setCountryCode(countryCodeType)
+        setValue('mobilePhoneCountry', countryCodeType)
+      } else {
+        setCountryCode(undefined)
+      }
+    }
+
+    const handleMobilePhoneChange = (value: any) => {
+      if (countryCode) {
+        // The country code and the rest of the mobile number are in two fields, so cannot
+        // register the field directly in form, but need to have extra logic defined
+        // to combine the values before writing them to the form handling
+
+        const phoneNumberWithCountryCode = `+${getCountryCallingCode(
+          countryCode as CountryCode
+        )}${value.target.value}`
+        const isValidPhoneNumber = isValidMobilePhoneNumber(
+          phoneNumberWithCountryCode
+        )
+
+        if (isValidPhoneNumber === true) {
+          setValue('mobilePhone', value.target.value)
+          clearErrors('mobilePhone')
+        } else {
+          setError('mobilePhone', {
+            type: 'manual',
+            message: isValidPhoneNumber || undefined,
+          })
+        }
+      }
+
+      setMobilePhone(value.target.value)
+    }
+
+    useEffect(() => {
+      setCountryCode(guestData.countryForCallingCode)
+      setMobilePhone(guestData.mobile_phone ? guestData.mobile_phone : '')
+      setValue(
+        'mobilePhoneCountry',
+        guestData.countryForCallingCode ? guestData.countryForCallingCode : ''
+      )
+    }, [guestData])
+
     function doSubmit() {
       return onSubmit()
     }
 
     register('mobilePhone', {
       required: t<string>('validation.mobilePhoneRequired'),
-      validate: isValidMobilePhoneNumber,
     })
+    register('mobilePhoneCountry')
 
     useImperativeHandle(ref, () => ({ doSubmit }))
 
@@ -117,6 +158,16 @@ const GuestRegisterStep = forwardRef(
                 disabled
               />
 
+              {/* Only show the Feide ID field if the value is present */}
+              {guestData.feide_id && (
+                <TextField
+                  id="feide_id"
+                  label={t('feideId')}
+                  value={guestData.feide_id}
+                  disabled
+                />
+              )}
+
               <Box
                 sx={{
                   display: 'flex',
@@ -132,10 +183,10 @@ const GuestRegisterStep = forwardRef(
                   labelId="phone-number-select"
                   id="phone-number-select"
                   displayEmpty
-                  defaultValue=""
                   onChange={handleCountryCodeChange}
+                  value={countryCode ? countryCode.toString() : ''}
                   renderValue={(selected: any) => {
-                    if (selected.length === 0 || selected === '') {
+                    if (!selected) {
                       return t('input.countryCallingCode')
                     }
                     return `${getName(
@@ -143,6 +194,10 @@ const GuestRegisterStep = forwardRef(
                       i18n.language
                     )} (${getCountryCallingCode(selected as CountryCode)})`
                   }}
+                  data-testid="phone-country-code-select"
+                  inputProps={{
+                    'data-testid': 'phone-country-code-select-inner',
+                  }}
                 >
                   <MenuItem disabled value="">
                     {t('input.countryCallingCode')}
@@ -159,19 +214,9 @@ const GuestRegisterStep = forwardRef(
                   sx={{ flexGrow: 2 }}
                   label={t('input.mobilePhone')}
                   error={!!errors.mobilePhone}
+                  value={mobilePhone}
                   helperText={errors.mobilePhone && errors.mobilePhone.message}
-                  onChange={(value) => {
-                    if (countryCode) {
-                      // The country code and the rest of the mobile number are in two fields, so cannot
-                      // register the field directly in form, but need to have extra logic defined
-                      // to combine the values before writing them to the form handling
-                      setValue(
-                        'mobilePhone',
-                        `+${countryCode.toString()}${value.target.value}`
-                      )
-                      trigger('mobilePhone')
-                    }
-                  }}
+                  onChange={handleMobilePhoneChange}
                 />
               </Box>
               {guestData.authentication_method ===

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

frontend/src/routes/invite/index.tsx

+import { useTranslation } from 'react-i18next'
 import Page from 'components/page'
-import { useUserContext } from 'contexts'
-import { Link } from 'react-router-dom'
+
+import { styled } from '@mui/material/styles'
+
+import { HrefButton } from 'components/button'
+import { HrefLineButton } from 'components/button/linebutton'
+
+const FlexDiv = styled('div')(() => ({
+  display: 'flex',
+  gap: '0.5rem',
+}))
 
 function Invite() {
-  const { user } = useUserContext()
+  const { t } = useTranslation(['invite'])
 
   return (
     <Page>
+      <h1>{t('header')}</h1>
       <p>
-        {user.first_name} {user.last_name}
-        TODO: Put information about login options, and buttons to them on this
-        page
+        {t('description')}
       </p>
-      After login or when clicking on the manual registration option, the user
-      should be sent here:
-      <Link to="/guestregister/">Guest Registration</Link>
+      <FlexDiv>
+        <HrefButton to="/oidc/authenticate/">{t('login')}</HrefButton>
+        <HrefLineButton to="/guestregister/">{t('manual')}</HrefLineButton>
+      </FlexDiv>
     </Page>
   )
 }

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

frontend/src/setupJest.js

+// adds the 'fetchMock' global variable and rewires 'fetch' global to call 'fetchMock' instead of the real implementation
+// eslint-disable-next-line import/no-extraneous-dependencies
+require('jest-fetch-mock').enableMocks()
+// changes default behavior of fetchMock to use the real 'fetch' implementation and not mock responses
+// eslint-disable-next-line no-undef
+fetchMock.dontMock()