Skip to content
Snippets Groups Projects
Commit 2ead46b1 authored by Tore.Brede's avatar Tore.Brede
Browse files

GREG-165: Work on configuring form based on type of invite and information present

parent 4daee930
No related branches found
No related tags found
1 merge request!239GREG-165: Part 1 : Handle missing information from Feide
Pipeline #109504 failed
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      frontend/src/routes/guest/register/steps/formSetup.ts 0 → 100644
      + 8
      − 0
      View file @ 2ead46b1
      /**
      * Controls how the register form looks. Depending on the invite type and whether there already exists data
      * the form needs to enable and disable fields.
      */
      export type FormSetup = {
      allow_first_name_editable: boolean
      allow_last_name_editable: boolean
      }
      frontend/src/routes/guest/register/steps/register.test.tsx
      + 50
      − 0
      View file @ 2ead46b1
      ...@@ -47,3 +47,53 @@ test('Guest register page showing passport field on manual registration', async ...@@ -47,3 +47,53 @@ test('Guest register page showing passport field on manual registration', async
      expect(screen.queryByTestId('passport_number_input')).toBeInTheDocument() expect(screen.queryByTestId('passport_number_input')).toBeInTheDocument()
      }) })
      }) })
      test('Name not editable if present and invite is Feide', async () => {
      const nextHandler = (registerData: GuestRegisterData) => {
      console.log(`Entered data: ${registerData}`)
      }
      const testData = getEmptyGuestData()
      testData.authentication_method = AuthenticationMethod.Feide
      testData.first_name = 'Test'
      testData.last_name = 'Tester'
      render(
      <LocalizationProvider dateAdapter={AdapterDateFns}>
      <GuestRegisterStep
      nextHandler={nextHandler}
      initialGuestData={testData}
      registerData={null}
      />
      </LocalizationProvider>
      )
      await waitFor(() => {
      expect(screen.queryByTestId('first-name-input-text')).toBeDisabled()
      expect(screen.queryByTestId('last-name-input-text')).toBeDisabled()
      })
      })
      test('Name editable if missing and invite is Feide', async () => {
      const nextHandler = (registerData: GuestRegisterData) => {
      console.log(`Entered data: ${registerData}`)
      }
      const testData = getEmptyGuestData()
      testData.authentication_method = AuthenticationMethod.Feide
      render(
      <LocalizationProvider dateAdapter={AdapterDateFns}>
      <GuestRegisterStep
      nextHandler={nextHandler}
      initialGuestData={testData}
      registerData={null}
      />
      </LocalizationProvider>
      )
      await waitFor(() => {
      expect(screen.queryByTestId('first-name-input-text')).toBeEnabled()
      expect(screen.queryByTestId('last-name-input-text')).toBeEnabled()
      })
      })
      frontend/src/routes/guest/register/steps/register.tsx
      + 116
      − 125
      View file @ 2ead46b1
      ...@@ -33,6 +33,7 @@ import { GuestRegisterData } from '../enteredGuestData' ...@@ -33,6 +33,7 @@ import { GuestRegisterData } from '../enteredGuestData'
      import { GuestRegisterCallableMethods } from '../guestRegisterCallableMethods' import { GuestRegisterCallableMethods } from '../guestRegisterCallableMethods'
      import AuthenticationMethod from '../authenticationMethod' import AuthenticationMethod from '../authenticationMethod'
      import { FeatureContext } from '../../../../contexts' import { FeatureContext } from '../../../../contexts'
      import { FormSetup } from './formSetup'
      interface GuestRegisterProperties { interface GuestRegisterProperties {
      nextHandler(registerData: GuestRegisterData): void nextHandler(registerData: GuestRegisterData): void
      ...@@ -222,6 +223,18 @@ const GuestRegisterStep = forwardRef( ...@@ -222,6 +223,18 @@ const GuestRegisterStep = forwardRef(
      (countryTuple1: [string, string], countryTuple2: [string, string]) => (countryTuple1: [string, string], countryTuple2: [string, string]) =>
      countryTuple1[1].localeCompare(countryTuple2[1]) countryTuple1[1].localeCompare(countryTuple2[1])
      ) )
      const formSetup: FormSetup = {
      allow_first_name_editable:
      initialGuestData.authentication_method ===
      AuthenticationMethod.Invite ||
      initialGuestData.first_name.length === 0,
      allow_last_name_editable:
      initialGuestData.authentication_method ===
      AuthenticationMethod.Invite ||
      initialGuestData.last_name.length === 0,
      }
      return ( return (
      <> <>
      <Box sx={{ maxWidth: '30rem' }}> <Box sx={{ maxWidth: '30rem' }}>
      ...@@ -240,15 +253,6 @@ const GuestRegisterStep = forwardRef( ...@@ -240,15 +253,6 @@ const GuestRegisterStep = forwardRef(
      </Typography> </Typography>
      <form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
      <Stack spacing={2}> <Stack spacing={2}>
      {/* First name */}
      {/*{initialGuestData.authentication_method !==*/}
      {/* AuthenticationMethod.Invite && initialGuestData.first_name ? (*/}
      {/* <TextField*/}
      {/* id="firstName"*/}
      {/* label={t('input.firstName')}*/}
      {/* value={initialGuestData.first_name}*/}
      {/* disabled*/}
      {/* />*/}
      <Controller <Controller
      name="firstName" name="firstName"
      control={control} control={control}
      ...@@ -263,25 +267,14 @@ const GuestRegisterStep = forwardRef( ...@@ -263,25 +267,14 @@ const GuestRegisterStep = forwardRef(
      onChange={onChange} onChange={onChange}
      error={!!errors.firstName} error={!!errors.firstName}
      helperText={errors.firstName && errors.firstName.message} helperText={errors.firstName && errors.firstName.message}
      disabled={ disabled={!formSetup.allow_first_name_editable}
      initialGuestData.authentication_method === inputProps={{
      AuthenticationMethod.Invite || 'data-testid': 'first-name-input-text',
      initialGuestData.first_name }}
      }
      /> />
      )} )}
      /> />
      {/* Last name */}
      {/*{initialGuestData.authentication_method !==*/}
      {/* AuthenticationMethod.Invite && initialGuestData.last_name ? (*/}
      {/* <TextField*/}
      {/* id="lastName"*/}
      {/* label={t('input.lastName')}*/}
      {/* value={initialGuestData.last_name}*/}
      {/* disabled*/}
      {/* />*/}
      <Controller <Controller
      name="lastName" name="lastName"
      control={control} control={control}
      ...@@ -296,11 +289,10 @@ const GuestRegisterStep = forwardRef( ...@@ -296,11 +289,10 @@ const GuestRegisterStep = forwardRef(
      onChange={onChange} onChange={onChange}
      error={!!errors.lastName} error={!!errors.lastName}
      helperText={errors.lastName && errors.lastName.message} helperText={errors.lastName && errors.lastName.message}
      disabled={ disabled={!formSetup.allow_last_name_editable}
      initialGuestData.authentication_method === inputProps={{
      AuthenticationMethod.Invite || 'data-testid': 'last-name-input-text',
      initialGuestData.last_name }}
      }
      /> />
      )} )}
      /> />
      ...@@ -473,108 +465,107 @@ const GuestRegisterStep = forwardRef( ...@@ -473,108 +465,107 @@ const GuestRegisterStep = forwardRef(
      )} )}
      /> />
      </Box> </Box>
      {initialGuestData.authentication_method === <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
      AuthenticationMethod.Invite && ( {t('guestRegisterWizardText.identityHeader')}
      <> </Typography>
      <Typography variant="h5" sx={{ paddingTop: '1rem' }}> <Typography sx={{ paddingBottom: '1rem' }}>
      {t('guestRegisterWizardText.identityHeader')} <Trans i18nKey="common:guestRegisterWizardText.identityBody">
      </Typography> Enter national identity number if you have one.
      <Typography sx={{ paddingBottom: '1rem' }}> <strong>Otherwise</strong> use passport information.
      <Trans i18nKey="common:guestRegisterWizardText.identityBody"> </Trans>
      Enter national identity number if you have one. <Divider sx={{ border: '1px solid' }} />
      <strong>Otherwise</strong> use passport information. </Typography>
      </Trans> {/* The guest should fill in one of national ID number or passport number */}
      <Divider sx={{ border: '1px solid' }} /> <Controller
      </Typography> name="nationalIdNumber"
      {/* The guest should fill in one of national ID number or passport number */} control={control}
      <Controller rules={{
      name="nationalIdNumber" // It is not required that the national ID number be filled in, the guest may not have
      control={control} // one, so allow empty values for the validation to pass. Note that both "fødselsnummer" and
      rules={{ // D-number are allowed as input
      // It is not required that the national ID number be filled in, the guest may not have validate: (value) => isValidFnr(value, true),
      // one, so allow empty values for the validation to pass. Note that both "fødselsnummer" and }}
      // D-number are allowed as input render={({ field }) => (
      validate: (value) => isValidFnr(value, true), <TextField
      }} id="nationalIdNumber"
      render={({ field }) => ( label={t('input.nationalIdNumber')}
      <TextField error={!!errors.nationalIdNumber}
      id="nationalIdNumber" value={field.value}
      label={t('input.nationalIdNumber')} onChange={field.onChange}
      error={!!errors.nationalIdNumber} helperText={
      value={field.value} errors.nationalIdNumber && errors.nationalIdNumber.message
      onChange={field.onChange} }
      helperText={
      errors.nationalIdNumber &&
      errors.nationalIdNumber.message
      }
      />
      )}
      /> />
      <Box )}
      sx={{ />
      display: 'flex', <Box
      flexDirection: 'row', sx={{
      }} display: 'flex',
      > flexDirection: 'row',
      <Select }}
      sx={{ >
      maxHeight: '2.5rem', <Select
      minWidth: '5rem', sx={{
      marginRight: '0.5rem', maxHeight: '2.5rem',
      }} minWidth: '5rem',
      id="passport-nationality-id" marginRight: '0.5rem',
      labelId="passport-nationality-label" }}
      label={t('input.passportNationality')} id="passport-nationality-id"
      displayEmpty labelId="passport-nationality-label"
      value={passportNationality ?? ''} label={t('input.passportNationality')}
      onChange={handlePassportNationalityChange} displayEmpty
      renderValue={(selected: any) => { value={passportNationality ?? ''}
      if (!selected || selected.length === 0) { onChange={handlePassportNationalityChange}
      return t('input.passportNationality') renderValue={(selected: any) => {
      } if (!selected || selected.length === 0) {
      return selected return t('input.passportNationality')
      }} }
      > return selected
      <MenuItem disabled value=""> }}
      {t('input.passportNationality')} >
      </MenuItem> <MenuItem disabled value="">
      {passportCountries.map((countryTuple) => ( {t('input.passportNationality')}
      <MenuItem key={countryTuple[1]} value={countryTuple[0]}> </MenuItem>
      {`${countryTuple[1]} (${countryTuple[0]})`} {passportCountries.map((countryTuple) => (
      </MenuItem> <MenuItem key={countryTuple[1]} value={countryTuple[0]}>
      ))} {`${countryTuple[1]} (${countryTuple[0]})`}
      </Select> </MenuItem>
      <Controller ))}
      name="passportNumber" </Select>
      control={control} <Controller
      render={({ field }) => ( name="passportNumber"
      <TextField control={control}
      id="passportNumber" render={({ field }) => (
      data-testid="passport_number_input" <TextField
      value={field.value} id="passportNumber"
      label={t('input.passportNumber')} data-testid="passport_number_input"
      onChange={field.onChange} value={field.value}
      /> label={t('input.passportNumber')}
      )} onChange={field.onChange}
      disabled={
      initialGuestData.authentication_method !==
      AuthenticationMethod.Invite &&
      initialGuestData.passport !== null
      }
      /> />
      </Box>
      {idErrorState && (
      <Typography color="error">{idErrorState}</Typography>
      )} )}
      </>
      )}
      {initialGuestData.authentication_method ===
      AuthenticationMethod.Feide && (
      <TextField
      id="national_id_number"
      data-testid="national_id_number_feide"
      label={t('input.nationalIdNumber')}
      value={initialGuestData.fnr}
      disabled
      /> />
      </Box>
      {idErrorState && (
      <Typography color="error">{idErrorState}</Typography>
      )} )}
      {/* {initialGuestData.authentication_method === */}
      {/* AuthenticationMethod.Feide && ( */}
      {/* <TextField */}
      {/* id="national_id_number" */}
      {/* data-testid="national_id_number_feide" */}
      {/* label={t('input.nationalIdNumber')} */}
      {/* value={initialGuestData.fnr} */}
      {/* disabled */}
      {/* /> */}
      {/* )} */}
      <Typography variant="h5" sx={{ paddingTop: '1rem' }}> <Typography variant="h5" sx={{ paddingTop: '1rem' }}>
      {t('guestRegisterWizardText.yourGuestPeriod')} {t('guestRegisterWizardText.yourGuestPeriod')}
      </Typography> </Typography>
      ......
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment