Merge branch 'GREG-60_wizard_updates' into 'master'

GREG-60: Making the registration and summary page look more like the design

See merge request !94

frontend/public/locales/en/common.json

@@ -21,7 +21,9 @@
     "roleStartDate": "From",
     "roleEndDate": "To",
     "comment": "Comment",
-    "email": "E-mail"
+    "email": "E-mail",
+    "fullName": "Full name",
+    "mobilePhone": "Mobile phone"
   },
   "loading": "Loading...",
   "termsHeader": "Terms",
@@ -44,7 +46,8 @@
   "details": "Details",
   "nationalIdNumber": "National ID number",
   "validation": {
-    "lastNameRequired": "Last name required",
+    "firstNameRequired": "First name is required",
+    "lastNameRequired": "Last name is required",
     "dateOfBirthRequired": "Date of birth is required",
     "invalidIdNumber": "Invalid national ID number",
     "nationalIdNumberRequired": "National ID number required",
@@ -62,6 +65,12 @@
   },
   "registerWizardText": {
     "registerPage": "Enter the contact information for the guest below. All fields are mandatory.",
-    "summaryPage": "Check that the values are correct before saving."
+    "summaryPage": "Check that the values are correct before saving.",
+    "registerContactInfo": "Register contact info",
+    "registerPeriod": "Register period",
+    "registerPeriodText": "Enter role and duration.",
+    "summaryContactInformation": "Summary contact information",
+    "summaryPeriod": "Summary period",
+    "contactInformation": "Contact information"
   }
 }

frontend/public/locales/nb/common.json

@@ -21,7 +21,9 @@
     "roleStartDate": "Fra",
     "roleEndDate": "Til",
     "comment": "Kommentar",
-    "email": "E-post"
+    "email": "E-post",
+    "fullName": "Full navn",
+    "mobilePhone": "Mobilnummer"
   },
   "loading": "Laster...",
   "termsHeader": "Vilkår",
@@ -44,12 +46,13 @@
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {
-    "lastNameRequired": "Etternavn er påkrevd",
-    "dateOfBirthRequired": "Fødselsdato er påkrevd",
+    "firstNameRequired": "Fornavn er obligatorisk",
+    "lastNameRequired": "Etternavn er obligatorisk",
+    "dateOfBirthRequired": "Fødselsdato er obligatorisk",
     "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
-    "roleTypeRequired": "Rolletype er påkrevd",
-    "roleEndRequired": "Sluttdato for rolle er påkrevd",
+    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "roleTypeRequired": "Rolletype er obligatorisk",
+    "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",
     "invalidEmail": "Ugyldig e-postadresse"
@@ -62,6 +65,12 @@
   },
   "registerWizardText": {
     "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
-    "summaryPage": "Sjekk at alt stemmer før lagring."
+    "summaryPage": "Sjekk at alt stemmer før lagring.",
+    "registerContactInfo": "Registrere kontaktinfo",
+    "registerPeriod": "Registrere periode",
+    "registerPeriodText": "Fyll inn rolle og periode.",
+    "summaryContactInformation": "Summary contact information",
+    "summaryPeriod": "Summary period",
+    "contactInformation": "Kontaktinformasjon"
   }
 }

frontend/public/locales/nn/common.json

@@ -22,7 +22,9 @@
     "roleStartDate": "Frå",
     "roleEndDate": "Til",
     "comment": "Kommentar",
-    "email": "E-post"
+    "email": "E-post",
+    "fullName": "Fullt namn",
+    "mobilePhone": "Mobilnummer"
   },
   "loading": "Lastar...",
   "termsHeader": "Vilkår",
@@ -30,7 +32,7 @@
   "firstName": "Fornamn",
   "lastName": "Etternamn",
   "dateOfBirth": "Fødselsdato",
-  "name": "Navn",
+  "name": "Namn",
   "role": "Gjesterolle",
   "period": "Periode",
   "ou": "Organisasjon",
@@ -45,12 +47,13 @@
   "details": "Detaljer",
   "nationalIdNumber": "Fødselsnummer",
   "validation": {
-    "lastNameRequired": "Etternamn er påkrevd",
-    "dateOfBirthRequired": "Fødselsdato er påkrevd",
+    "firstNameRequired": "Fornamn er obligatorisk",
+    "lastNameRequired": "Etternamn er obligatorisk",
+    "dateOfBirthRequired": "Fødselsdato er obligatorisk",
     "invalidIdNumber": "Ugyldig fødselsnummer",
-    "nationalIdNumberRequired": "Fødselsnummer er påkrevd",
-    "roleTypeRequired": "Rolletype er påkrevd",
-    "roleEndRequired": "Sluttdato for rolle er påkrevd",
+    "nationalIdNumberRequired": "Fødselsnummer er obligatorisk",
+    "roleTypeRequired": "Rolletype er obligatorisk",
+    "roleEndRequired": "Sluttdato for rolle er obligatorisk",
     "emailRequired": "E-post er obligatorisk",
     "invalidMobilePhoneNumber": "Ugyldig telefonnummer",
     "invalidEmail": "Ugyldig e-postadresse"
@@ -63,6 +66,12 @@
   },
   "registerWizardText": {
     "registerPage": "Fyll inn kontaktinformasjonen til gjesten under. Alle feltene er obligatoriske.",
-    "summaryPage": "Sjekk at alt stemmer før lagring."
+    "summaryPage": "Sjekk at alt stemmer før lagring.",
+    "registerContactInfo": "Registrere kontaktinfo",
+    "registerPeriod": "Registrere periode",
+    "registerPeriodText": "Fyll inn rolle og periode.",
+    "summaryContactInformation": "Summary contact information",
+    "summaryPeriod": "Summary period",
+    "contactInformation": "Kontaktinformasjon"
   }
 }

frontend/src/routes/register/formData.ts

@@ -7,4 +7,4 @@ export type RegisterFormData = {
   comment?: string
   ou_id?: number
   email?: string
-}
\ No newline at end of file
+}

frontend/src/routes/register/index.tsx

@@ -76,10 +76,10 @@ export default function StepRegistration() {
   }
 
   return (
-    <Page header='Register as a guest'>
-
+    <Page>
       {/* Stepper at top of wizard */}
-      <Stepper activeStep={activeStep}>
+      <Stepper sx={{ paddingTop: '2rem' }}
+               activeStep={activeStep}>
         {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
         {steps.map((label, index) => {
           const stepProps = {}
@@ -105,9 +105,11 @@ export default function StepRegistration() {
         )}
       </Box>
 
-      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main' }}>
+      <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem'}}>
         {activeStep === REGISTER_STEP && (
-          <Button data-testid='button-next' onClick={handleNext}>
+          <Button data-testid='button-next'
+                  sx={{ color: 'theme.palette.secondary', mr: 1 }}
+                  onClick={handleNext}>
             {t('button.next')}
           </Button>
         )}

frontend/src/routes/register/personFormMethods.ts

 export interface PersonFormMethods {
-  doSubmit: () => Promise<void>
+  doSubmit: () => void
 }

frontend/src/routes/register/stepPersonForm.tsx

-import { Box, FormControl, InputLabel, MenuItem, Select, SelectChangeEvent, Stack, TextField } from '@mui/material'
+import {
+  Box,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectChangeEvent,
+  Stack,
+  TextField,
+  Typography,
+} from '@mui/material'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { DatePicker } from '@mui/lab'
 import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
@@ -81,7 +91,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
   }
 
   register('role_type', {
-    required: t('validation.roleTypeRequired').toString(),
+    required: t<string>('validation.roleTypeRequired'),
   })
 
   const handleRoleTypeChange = (event: any) => {
@@ -97,16 +107,22 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
 
   return (
     <>
-      <Box sx={{ typography: 'subtitle2' }}>
-        {t('registerWizardText.registerPage')}
-      </Box>
+      <Typography variant='h5' sx={{
+        paddingTop: '1rem',
+        paddingBottom: '1rem',
+      }}>{t('registerWizardText.registerContactInfo')}</Typography>
+      <Typography sx={{ paddingBottom: '2rem' }}>{t('registerWizardText.registerPage')}</Typography>
       <Box sx={{ maxWidth: '30rem' }}>
         <form onSubmit={onSubmit}>
           <Stack spacing={2}>
             <TextField
               id='firstName'
               label={t('input.firstName')}
-              {...register(`first_name`)}
+              error={!!errors.first_name}
+              helperText={errors.first_name && errors.first_name.message}
+              {...register(`first_name`, {
+                required: t<string>('validation.firstNameRequired'),
+              })}
             />
             <TextField
               id='lastName'
@@ -114,7 +130,7 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
               error={!!errors.last_name}
               helperText={errors.last_name && errors.last_name.message}
               {...register(`last_name`, {
-                required: t('validation.lastNameRequired').toString(),
+                required: t<string>('validation.lastNameRequired'),
               })}
             />
             <TextField
@@ -126,6 +142,9 @@ const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<Per
                 validate: isValidEmail,
               })}
             />
+
+            <Typography variant='h5' sx={{ paddingTop: '1rem' }}>{t('registerWizardText.registerPeriod')}</Typography>
+            <Typography sx={{ paddingBottom: '1rem' }}>{t('registerWizardText.registerPeriodText')}</Typography>
             <FormControl fullWidth>
               <InputLabel id='ou-select-label'>{t('common:ou')}</InputLabel>
               <Select

frontend/src/routes/register/stepSummary.tsx

-import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 
-import { Box, Stack, TextField } from '@mui/material'
+import {
+  Box,
+  Grid,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  Typography,
+} from '@mui/material'
 
 import format from 'date-fns/format'
-import { DatePicker } from '@mui/lab'
+import i18n from 'i18next'
 import { RegisterFormData } from './formData'
 import { postJsonOpts } from '../../utils'
 import { PersonFormMethods } from './personFormMethods'
@@ -21,23 +29,23 @@ interface StepSummaryProperties {
 }
 
 const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFormMethods>) => {
-    const { i18n, t } = useTranslation(['common'])
+    const { t } = useTranslation(['common'])
     const { formData, onSubmitSuccess, onSubmitFailure } = props
     const ous = useOus()
     const roleTypes = useRoleTypes()
     const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
 
-    const submit: SubmitHandler<RegisterFormData> = (data) => {
+    const submit = () => {
       const payload = {
-        first_name: data.first_name,
-        last_name: data.last_name,
-        email: data.email,
+        first_name: formData.first_name,
+        last_name: formData.last_name,
+        email: formData.email,
         role: {
-          type: data.role_type,
-          start_date: data.role_start === null ? null : format(data.role_start as Date, 'yyyy-MM-dd'),
-          end_date: data.role_end === null ? null : format(data.role_end as Date, 'yyyy-MM-dd'),
-          comments: data.comment,
-          orgunit_id: data.ou_id,
+          type: formData.role_type,
+          start_date: formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd'),
+          end_date: formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd'),
+          comments: formData.comment,
+          orgunit_id: formData.ou_id,
         },
       }
 
@@ -65,141 +73,73 @@ const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFor
         })
     }
 
-    const getSelectedOrganisationalUnit = () => {
-      if (formData?.ou_id) {
-        const ousArray = ous.filter(((value) => value.id === formData.ou_id))
-
-        if (ousArray.length === 0) {
-          return ''
-        }
-
-        if (i18n.language === 'en') {
-          return ousArray[0].en
-        }
-        return ousArray[0].nb
-      }
-      return ''
-    }
-
-    const getSelectedRoleType = () => {
-      if (formData?.role_type) {
-        const roleTypeArray = roleTypes.filter(((value) => value.identifier === formData.role_type))
-
-        if (roleTypeArray.length === 0) {
-          return ''
-        }
-
-        if (i18n.language === 'en') {
-          return roleTypeArray[0].name_en
-        }
-        return roleTypeArray[0].name_nb
-      }
-      return ''
-    }
-
-    const {
-      reset,
-      register,
-      handleSubmit,
-      control,
-    } = useForm<RegisterFormData>()
-    const onSubmit = handleSubmit(submit)
-
-    useEffect(() => {
-      reset(formData)
-    }, [])
-
     function doSubmit() {
-      return onSubmit()
+      return submit()
     }
 
     useImperativeHandle(ref, () => ({ doSubmit }))
 
+    const selectedOus = ous.find((value) => value.id === formData.ou_id)
+    const ousName = selectedOus === undefined ? '' : (`${i18n.language === 'en' ? selectedOus.en : selectedOus.nb} (${selectedOus.id})`)
+
+    // TODO Fix this confusing mix between use of id and identifier
+    const selectedRoleType = roleTypes.find((value) => value.id === (formData.role_type === undefined ? -1 : parseInt(formData.role_type, 10)))
+    const roleTypeName = selectedRoleType === undefined ? '' : `${i18n.language === 'en' ? selectedRoleType.name_en : selectedRoleType.name_nb}`
+
     return (
       <>
+        <Typography variant='h5' sx={{
+          paddingTop: '1rem',
+          paddingBottom: '1rem',
+        }}>{t('registerWizardText.summaryContactInformation')}</Typography>
         <Box sx={{ typography: 'subtitle2' }}>
           {t('registerWizardText.summaryPage')}
         </Box>
         <Box sx={{ maxWidth: '30rem' }}>
-          <form onSubmit={onSubmit}>
-            <Stack spacing={2}>
-              <TextField
-                id='firstName'
-                label={t('input.firstName')}
-                disabled
-                {...register('first_name')}
-              />
-              <TextField
-                id='lastName'
-                label={t('input.lastName')}
-                disabled
-                {...register('last_name')}
-              />
-
-              <TextField
-                id='email'
-                label={t('input.email')}
-                disabled
-                {...register('email')}
-              />
-
-              <TextField
-                id='ou'
-                value={getSelectedOrganisationalUnit()}
-                label={t('ou')}
-                disabled
-              />
-
-              <TextField
-                id='roletype-select'
-                value={getSelectedRoleType()}
-                label={t('input.roleType')}
-                disabled
-              />
-
-              <Controller name='role_start'
-                          control={control}
-                          render={({ field }) => (
-                            <DatePicker
-                              mask='____-__-__'
-                              label={t('input.roleStartDate')}
-                              disabled
-                              value={field.value}
-                              inputFormat='yyyy-MM-dd'
-                              onChange={(value) => {
-                                field.onChange(value)
-                              }}
-                              renderInput={(params) => <TextField {...params} />}
-                            />)}
-              />
-
-              <Controller name='role_end'
-                          control={control}
-                          render={({ field }) => (
-                            <DatePicker
-                              mask='____-__-__'
-                              label={t('input.roleEndDate')}
-                              disabled
-                              value={field.value}
-                              inputFormat='yyyy-MM-dd'
-                              onChange={(value) => {
-                                field.onChange(value)
-                              }}
-                              renderInput={(params) => <TextField {...params} />}
-                            />)}
-              />
-
-              <TextField
-                id='comment'
-                label={t('input.comment')}
-                disabled
-                multiline
-                rows={5}
-                {...register(`comment`)}
-              />
-
-            </Stack>
-          </form>
+          <Box sx={{ padding: '1rem', bgcolor: 'primary.dark' }}>{t('registerWizardText.contactInformation')}</Box>
+
+          <Grid container>
+            <Grid item xs={4}>
+              {t('input.fullName')}
+            </Grid>
+            <Grid item xs={8}>
+              {formData.first_name} {formData.last_name}
+            </Grid>
+            <Grid item xs={4}>
+              {t('input.email')}
+            </Grid>
+            <Grid item xs={8}>
+              {formData.email}
+            </Grid>
+          </Grid>
+
+          <Typography variant='h5' sx={{
+            paddingTop: '1rem',
+            paddingBottom: '1rem',
+          }}>{t('registerWizardText.summaryPeriod')}</Typography>
+
+          <Table>
+            <TableHead sx={{
+              padding: '1rem',
+              bgcolor: 'primary.dark',
+            }}>
+
+              <TableRow>
+                <TableCell>Guest role</TableCell>
+                <TableCell>Period</TableCell>
+                <TableCell>Department</TableCell>
+                <TableCell>Comment</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                <TableCell>{roleTypeName}</TableCell>
+                <TableCell>{formData.role_start === null ? null : format(formData.role_start as Date, 'yyyy-MM-dd')}-{formData.role_end === null ? null : format(formData.role_end as Date, 'yyyy-MM-dd')}</TableCell>
+                <TableCell>{ousName}</TableCell>
+                <TableCell>{formData.comment}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
 
           {/* TODO For now just showing a heading to give the user some feedback */}
           {submitState === SubmitState.SubmitSuccess && (

frontend/src/themes/main.ts

@@ -15,6 +15,7 @@ const mainTheme: ThemeOptions = {
   palette: {
     primary: {
       main: '#3293ED',
+      dark: '#1565c0'
     },
   },
   components: {

frontend/src/themes/uib.ts

@@ -4,6 +4,7 @@ const uibTheme: ThemeOptions = {
   palette: {
     primary: {
       main: '#ba000d',
+      dark: '#1565c0'
     },
   },
 }

frontend/src/themes/uio.ts

@@ -3,7 +3,8 @@ import { ThemeOptions } from "@mui/material"
 const uioTheme: ThemeOptions = {
   palette: {
     primary: {
-      main: "#4977af"
+      main: "#4977af",
+      dark: '#1565c0'
     }
   },
 }