Keep guest registration form state between tab changes

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

@@ -11,7 +11,7 @@ export type GuestRegisterData = {
   nationalIdNumber: string
   passportNumber: string
   passportNationality: string
-  dateOfBirth?: Date
+  dateOfBirth: Date | null
 }
 
 export type GuestConsentData = {

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

@@ -17,7 +17,6 @@ export type GuestInviteInformation = {
   comment?: string
 
   feide_id?: string
-
   email?: string
 
   // These fields are in the form, but it is not expected that
@@ -28,7 +27,7 @@ export type GuestInviteInformation = {
   passport?: string
   passportNationality?: string
   countryForCallingCode?: string
-  dateOfBirth?: Date
+  date_of_birth: Date | null
 
   authentication_method: AuthenticationMethod
 }

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

@@ -20,8 +20,8 @@ const testData = {
   role: {
     ou_name_en: 'English organizational unit name',
     ou_name_nb: 'Norsk navn organisasjonsenhet',
-    name_en: 'Guest role',
-    name_nb: 'Gjesterolle',
+    role_name_en: 'Guest role',
+    role_name_nb: 'Gjesterolle',
     start: '2021-08-10',
     end: '2021-08-16',
     contact_person_unit: 'Test contact person',

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

@@ -11,6 +11,7 @@ import {
   getCountryCallingCode,
 } from 'libphonenumber-js'
 import format from 'date-fns/format'
+import parse from 'date-fns/parse'
 import { splitPhoneNumber, submitJsonOpts, fetchJsonOpts } from 'utils'
 import OverviewGuestButton from '../../components/overviewGuestButton'
 import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods'
@@ -42,6 +43,7 @@ type InvitationData = {
     fnr?: string
     passport?: string
     feide_id?: string
+    date_of_birth?: string
   }
   sponsor: {
     first_name: string
@@ -67,36 +69,18 @@ type InvitationData = {
 export default function GuestRegister() {
   const { t } = useTranslation(['common'])
   const history = useHistory()
+
+  const guestRegisterRef = useRef<GuestRegisterCallableMethods>(null)
+
   // 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)
-  // TODO Set step when user moves between pages
   const [activeStep, setActiveStep] = useState(0)
 
   const [initialGuestData, setInitialGuestData] =
-    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: '',
-      dateOfBirth: undefined,
-      fnr: '',
-      passport: '',
-      passportNationality: '',
-      countryForCallingCode: '',
-      authentication_method: AuthenticationMethod.Invite,
-    })
-
+    useState<GuestInviteInformation | null>(null)
   const [guestRegisterData, setGuestRegisterData] =
     useState<GuestRegisterData | null>(null)
   const [guestConsentData, setGuestConsentData] =
@@ -132,33 +116,38 @@ export default function GuestRegister() {
     let passportNumber = ''
     let passportNationality = ''
     if (data.person.passport) {
-      const parts = data.person.passport.split('-', 1)
+      const parts = data.person.passport.split('-', 2)
       if (parts.length === 2) {
         ;[passportNationality, passportNumber] = parts
       }
     }
 
+    let dateOfBirth = null
+    if (data.person.date_of_birth) {
+      dateOfBirth = parse(data.person.date_of_birth, 'yyyy-MM-dd', new Date())
+    }
+
     setInitialGuestData({
-      first_name: data.person.first_name,
-      last_name: data.person.last_name,
-      ou_name_en: data.role.ou_name_en,
-      ou_name_nb: data.role.ou_name_nb,
-      role_name_en: data.role.role_name_en,
-      role_name_nb: data.role.role_name_nb,
-      role_start: data.role.start,
-      role_end: data.role.end,
-      comment: data.role.comments,
-
-      email: data.person.email,
-      feide_id: data.person.feide_id,
-      fnr: data.person.fnr,
-
-      passport: passportNumber,
-      passportNationality,
-
-      mobile_phone_country_code: countryCode,
-      mobile_phone: nationalNumber,
-      countryForCallingCode: extractedCountryCode,
+      first_name: data.person.first_name ?? '',
+      last_name: data.person.last_name ?? '',
+      date_of_birth: dateOfBirth,
+      email: data.person.email ?? '',
+      feide_id: data.person.feide_id ?? '',
+      fnr: data.person.fnr ?? '',
+      passport: passportNumber ?? '',
+      passportNationality: passportNationality ?? '',
+
+      mobile_phone_country_code: countryCode ?? '',
+      mobile_phone: nationalNumber ?? '',
+      countryForCallingCode: extractedCountryCode ?? '',
+
+      ou_name_en: data.role.ou_name_en ?? '',
+      ou_name_nb: data.role.ou_name_nb ?? '',
+      role_name_en: data.role.role_name_en ?? '',
+      role_name_nb: data.role.role_name_nb ?? '',
+      role_start: data.role.start ?? '',
+      role_end: data.role.end ?? '',
+      comment: data.role.comments ?? '',
 
       authentication_method: authenticationMethod,
     })
@@ -168,6 +157,23 @@ export default function GuestRegister() {
     fetchInvitationData()
   }, [])
 
+  useEffect(() => {
+    console.log('index useEffect initialGuestData', initialGuestData)
+    if (!initialGuestData) {
+      return
+    }
+    setGuestRegisterData({
+      firstName: initialGuestData.first_name,
+      lastName: initialGuestData.last_name,
+      dateOfBirth: initialGuestData.date_of_birth ?? null,
+      mobilePhone: initialGuestData.mobile_phone ?? '',
+      mobilePhoneCountry: initialGuestData.mobile_phone_country_code ?? '',
+      nationalIdNumber: initialGuestData.fnr ?? '',
+      passportNumber: initialGuestData.passport ?? '',
+      passportNationality: initialGuestData.passportNationality ?? '',
+    })
+  }, [initialGuestData])
+
   const handleNext = () => {
     if (activeStep === Step.RegisterStep) {
       if (guestRegisterRef.current) {
@@ -194,7 +200,7 @@ export default function GuestRegister() {
     )}${registerData.mobilePhone}`
 
     if (
-      initialGuestData.authentication_method === AuthenticationMethod.Invite
+      initialGuestData?.authentication_method === AuthenticationMethod.Invite
     ) {
       // The authentication method is Invite, so the name does not come from a
       // trusted third-party source, and the user can update it
@@ -210,10 +216,6 @@ export default function GuestRegister() {
       payload.person.fnr = registerData.nationalIdNumber
     }
 
-    if (consentData.consents) {
-      payload.person.consents = consentData.consents
-    }
-
     if (registerData.dateOfBirth) {
       payload.person.date_of_birth = format(
         registerData.dateOfBirth as Date,
@@ -221,6 +223,10 @@ export default function GuestRegister() {
       )
     }
 
+    if (consentData.consents) {
+      payload.person.consents = consentData.consents
+    }
+
     return payload
   }
 
@@ -264,7 +270,6 @@ export default function GuestRegister() {
       setActiveStep(Step.RegisterStep)
       return
     }
-
     if (!guestConsentData) {
       setActiveStep(Step.ConsentStep)
       return
@@ -280,16 +285,18 @@ export default function GuestRegister() {
     <Page>
       <OverviewGuestButton />
       {/* Step: Registration  */}
-      {activeStep === Step.RegisterStep && (
-        <Box sx={{ width: '100%' }}>
-          <GuestRegisterStep
-            nextHandler={handleForwardFromRegister}
-            initialGuestData={initialGuestData}
-            registerData={guestRegisterData}
-            ref={guestRegisterRef}
-          />
-        </Box>
-      )}
+      {activeStep === Step.RegisterStep &&
+        guestRegisterData &&
+        initialGuestData && (
+          <Box sx={{ width: '100%' }}>
+            <GuestRegisterStep
+              nextHandler={handleForwardFromRegister}
+              initialGuestData={initialGuestData}
+              registerData={guestRegisterData}
+              ref={guestRegisterRef}
+            />
+          </Box>
+        )}
 
       {/* Step: Consent */}
       {activeStep === Step.ConsentStep && (

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

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from 'test-utils'
 import AdapterDateFns from '@mui/lab/AdapterDateFns'
 import { LocalizationProvider } from '@mui/lab'
 import GuestRegisterStep from './register'
-import { EnteredGuestData } from '../enteredGuestData'
+import { GuestRegisterData } from '../enteredGuestData'
 import AuthenticationMethod from '../authenticationMethod'
 import { GuestInviteInformation } from '../guestDataForm'
 
@@ -20,6 +20,7 @@ function getEmptyGuestData(): GuestInviteInformation {
     comment: '',
     email: '',
     mobile_phone: '',
+    date_of_birth: null,
     fnr: '',
     passport: '',
     countryForCallingCode: '',
@@ -28,8 +29,8 @@ function getEmptyGuestData(): GuestInviteInformation {
 }
 
 test('Guest register page showing passport field on manual registration', async () => {
-  const nextHandler = (enteredGuestData: EnteredGuestData) => {
-    console.log(`Entered data: ${enteredGuestData}`)
+  const nextHandler = (registerData: GuestRegisterData) => {
+    console.log(`Entered data: ${registerData}`)
   }
 
   render(
@@ -37,6 +38,7 @@ test('Guest register page showing passport field on manual registration', async
       <GuestRegisterStep
         nextHandler={nextHandler}
         initialGuestData={getEmptyGuestData()}
+        registerData={null}
       />
     </LocalizationProvider>
   )

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

@@ -58,6 +58,8 @@ const GuestRegisterStep = forwardRef(
     >(undefined)
     const [idErrorState, setIdErrorState] = useState<string>('')
 
+    console.log('register step registerData', registerData)
+
     const {
       register,
       handleSubmit,
@@ -154,42 +156,13 @@ const GuestRegisterStep = forwardRef(
     const maxBirthDate = subYears(1)(today)
 
     useEffect(() => {
-      // Take values coming from the server, if present, and insert them into the form.
-      // This effect has guestData as a dependency, so the data will be reloaded
-      // if guestData changes
-      setValue('firstName', initialGuestData.first_name)
-      setValue('lastName', initialGuestData.last_name)
-      setValue(
-        'mobilePhone',
-        registerData?.mobilePhone ?? (initialGuestData.mobile_phone || '')
-      )
-
-      setValue(
-        'nationalIdNumber',
-        initialGuestData.fnr === undefined ? '' : initialGuestData.fnr
-      )
-      setValue(
-        'passportNationality',
-        initialGuestData.passportNationality === undefined
-          ? ''
-          : initialGuestData.passportNationality
-      )
-      setPassportNationality(initialGuestData.passportNationality)
-      setValue(
-        'passportNumber',
-        initialGuestData.passport === undefined ? '' : initialGuestData.passport
-      )
-
-      setCountryCode(initialGuestData.countryForCallingCode)
-      setValue(
-        'mobilePhoneCountry',
-        initialGuestData.countryForCallingCode
-          ? initialGuestData.countryForCallingCode
-          : ''
-      )
-
-      setValue('dateOfBirth', initialGuestData.dateOfBirth)
-    }, [initialGuestData])
+      if (registerData?.passportNationality) {
+        setPassportNationality(registerData.passportNationality)
+      }
+      if (registerData?.mobilePhoneCountry) {
+        setCountryCode(registerData.mobilePhoneCountry)
+      }
+    }, [registerData])
 
     register('mobilePhoneCountry')
     register('passportNationality')
@@ -226,7 +199,7 @@ const GuestRegisterStep = forwardRef(
                   <TextField
                     id="lastName"
                     label={t('input.lastName')}
-                    value={initialGuestData.last_name}
+                    // value={initialGuestData.last_name}
                     disabled
                   />
                 </>
@@ -235,7 +208,6 @@ const GuestRegisterStep = forwardRef(
                   <Controller
                     name="firstName"
                     control={control}
-                    defaultValue=""
                     rules={{
                       required: t(
                         'common:validation.firstNameRequired'
@@ -257,7 +229,6 @@ const GuestRegisterStep = forwardRef(
                   <Controller
                     name="lastName"
                     control={control}
-                    defaultValue=""
                     rules={{
                       required: t(
                         'common:validation.lastNameRequired'
@@ -280,19 +251,32 @@ const GuestRegisterStep = forwardRef(
               <Controller
                 name="dateOfBirth"
                 control={control}
+                rules={{
+                  required: t(
+                    'common:validation.dateOfBirthRequired'
+                  ).toString(),
+                }}
                 render={({ field }) => (
                   <DatePicker
                     mask="____-__-__"
                     label={t('input.dateOfBirth')}
                     // If value is set to undefined the birth date is set to today. Using null makes the field blank
-                    value={field.value === undefined ? null : field.value}
+                    value={field.value ?? null}
                     minDate={minBirthDate}
                     maxDate={maxBirthDate}
                     inputFormat="yyyy-MM-dd"
                     onChange={(value) => {
                       field.onChange(value)
                     }}
-                    renderInput={(params) => <TextField {...params} />}
+                    renderInput={(params) => (
+                      <TextField
+                        data-testid="date-of-birth-input-text"
+                        // FIXME: works, but color is wrong
+                        // error={!!errors.dateOfBirth}
+                        // helperText={errors.dateOfBirth && errors.dateOfBirth.message}
+                        {...params}
+                      />
+                    )}
                   />
                 )}
               />
@@ -390,13 +374,12 @@ const GuestRegisterStep = forwardRef(
                   rules={{
                     required: true,
                   }}
-                  defaultValue=""
                   render={({ field }) => (
                     <TextField
                       sx={{ flexGrow: 2 }}
                       label={t('input.mobilePhone')}
                       error={!!errors.mobilePhone}
-                      value={field.value === undefined ? null : field.value}
+                      value={field.value ?? ''}
                       helperText={
                         errors.mobilePhone && errors.mobilePhone.message
                       }
@@ -412,7 +395,6 @@ const GuestRegisterStep = forwardRef(
                   <Controller
                     name="nationalIdNumber"
                     control={control}
-                    defaultValue=""
                     rules={{
                       // It is not required that the national ID number be filled in, the guest may not have
                       // one, so allow empty values for the validation to pass
@@ -436,7 +418,6 @@ const GuestRegisterStep = forwardRef(
                   <Controller
                     name="passportNumber"
                     control={control}
-                    defaultValue=""
                     render={({ field }) => (
                       <TextField
                         id="passportNumber"
@@ -456,12 +437,7 @@ const GuestRegisterStep = forwardRef(
                     labelId="passport-nationality-label"
                     label={t('input.passportNationality')}
                     displayEmpty
-                    defaultValue=""
-                    value={
-                      passportNationality === undefined
-                        ? ''
-                        : passportNationality
-                    }
+                    value={passportNationality ?? ''}
                     onChange={handlePassportNationalityChange}
                     renderValue={(selected: any) => {
                       if (!selected || selected.length === 0) {