diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index fa5ff10a6627576d0439d7012fd7a7a72f19b430..72dc93f99c41110ed0bff661a0a2f503dc954921 100644 --- a/frontend/public/locales/en/common.json +++ b/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." } diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json index b6dec5bb1a4d12279cad8319df1a11759eebc7b8..4a8c036881fb149cf71cd602d25c1fa14cb81c58 100644 --- a/frontend/public/locales/nb/common.json +++ b/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." } diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json index 11c098b9948c77ccd399a11ebf44f4c12be2543f..f58c9dd1c25ee44e92497fdf7ab74cbb4ce6e923 100644 --- a/frontend/public/locales/nn/common.json +++ b/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." } diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx index be010f6e8977b9f656ddf88e6fa5a5beda2683e3..4fa17263838f99d201569bc7b0837447ec945e6b 100644 --- a/frontend/src/routes/guest/register/index.tsx +++ b/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> diff --git a/frontend/src/routes/guest/register/submitSuccessPage.tsx b/frontend/src/routes/guest/register/submitSuccessPage.tsx new file mode 100644 index 0000000000000000000000000000000000000000..e139c067b87f0f1cd25dfb97a0ea152918a64aa1 --- /dev/null +++ b/frontend/src/routes/guest/register/submitSuccessPage.tsx @@ -0,0 +1,41 @@ +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