Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • andretol/greg
1 result
Show changes
Commits on Source (11)
Hide whitespace changes
Inline Side-by-side
Showing
with 525 additions and 436 deletions
frontend/src/routes/index.tsx
View file @ ba22c5a6
......@@ -8,7 +8,7 @@ import fetchIntercept from 'fetch-intercept'
import { useUserContext } from 'contexts'
import Sponsor from 'routes/sponsor'
import Register from 'routes/register'
import Register from 'routes/sponsor/register'
import FrontPage from 'routes/frontpage'
import Invite from 'routes/invite'
import InviteLink from 'routes/invitelink'
......
frontend/src/routes/register/stepPersonForm.tsx deleted 100644 → 0
View file @ 3c278321
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'
import { useTranslation } from 'react-i18next'
import { RegisterFormData } from './formData'
import { PersonFormMethods } from './personFormMethods'
import useOus, { OuData } from '../../hooks/useOus'
import useRoleTypes, { RoleTypeData } from '../../hooks/useRoleTypes'
import { isValidEmail } from '../../utils'
interface StepPersonFormProperties {
nextHandler(formState: RegisterFormData): void
formData: RegisterFormData
}
const StepPersonForm = forwardRef((props: StepPersonFormProperties, ref: Ref<PersonFormMethods>) => {
const { i18n, t } = useTranslation(['common'])
const { nextHandler, formData } = props
const ous = useOus()
const [ouChoice, setOuChoice] = useState(formData.ou_id ? formData.ou_id : '')
const [selectedRoleType, setSelectedRoleType] = useState(formData.role_type ? formData.role_type : '')
const roleTypes = useRoleTypes()
const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
if (i18n.language === 'en') {
return a.name_nb.localeCompare(b.name_nb)
}
return a.name_en.localeCompare(b.name_en)
}
const enSort = (a: OuData, b: OuData) => {
if (a.en > b.en) {
return 1
}
if (b.en > a.en) {
return -1
}
return 0
}
const nbSort = (a: OuData, b: OuData) => {
if (a.nb > b.nb) {
return 1
}
if (b.nb > a.nb) {
return -1
}
return 0
}
const submit: SubmitHandler<RegisterFormData> = (data) => {
nextHandler(data)
}
const {
register,
control,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
useEffect(() => {
reset(formData)
}, [])
const handleOuChange = (event: SelectChangeEvent) => {
if (event.target.value) {
setOuChoice(event.target.value)
setValue('ou_id', parseInt(event.target.value, 10))
} else {
setValue('ou_id', undefined)
}
}
register('role_type', {
required: t<string>('validation.roleTypeRequired'),
})
const handleRoleTypeChange = (event: any) => {
setValue('role_type', event.target.value)
setSelectedRoleType(event.target.value)
}
function doSubmit() {
return onSubmit()
}
useImperativeHandle(ref, () => ({ doSubmit }))
return (
<>
<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')}
error={!!errors.first_name}
helperText={errors.first_name && errors.first_name.message}
{...register(`first_name`, {
required: t<string>('validation.firstNameRequired'),
})}
/>
<TextField
id='lastName'
label={t('input.lastName')}
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
required: t<string>('validation.lastNameRequired'),
})}
/>
<TextField
id='email'
label={t('input.email')}
error={!!errors.email}
helperText={errors.email && errors.email.message}
{...register(`email`, {
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
labelId='ou-select-label'
id='ou-select-label'
value={ouChoice?.toString()}
label={t('common:ou')}
onChange={handleOuChange}
>
{ous.length > 0 ? (
ous
.sort(i18n.language === 'en' ? enSort : nbSort)
.map((ou) => (
<MenuItem key={ou.id.toString()} value={ou.id}>
{i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
</MenuItem>
))
) : ('')}
</Select>
</FormControl>
<TextField
id='roletype-select'
select
value={selectedRoleType}
error={!!errors.role_type}
label={t('input.roleType')}
onChange={handleRoleTypeChange}
>
{
roleTypes.sort(roleTypeSort())
.map((roleType) => (
<MenuItem
key={roleType.id.toString()}
value={roleType.id}>{i18n.language === 'en' ? roleType.name_en : roleType.name_nb}</MenuItem>
))
}
</TextField>
<Controller name='role_start'
control={control}
render={({ field }) => (
<DatePicker
mask='____-__-__'
label={t('input.roleStartDate')}
value={field.value}
inputFormat='yyyy-MM-dd'
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>)}
/>
<Controller name='role_end'
control={control}
defaultValue={undefined}
render={({ field }) => (
<DatePicker
mask='____-__-__'
label={t('input.roleEndDate')}
value={field.value}
inputFormat='yyyy-MM-dd'
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>)}
/>
<TextField
id='comment'
label={t('input.comment')}
multiline
rows={5}
{...register(`comment`)}
/>
</Stack>
</form>
</Box>
</>
)
})
export default StepPersonForm
frontend/src/routes/register/stepSummary.tsx deleted 100644 → 0
View file @ 3c278321
import React, { forwardRef, Ref, useImperativeHandle, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
Box,
Grid,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from '@mui/material'
import format from 'date-fns/format'
import i18n from 'i18next'
import { RegisterFormData } from './formData'
import { postJsonOpts } from '../../utils'
import { PersonFormMethods } from './personFormMethods'
import useOus from '../../hooks/useOus'
import useRoleTypes from '../../hooks/useRoleTypes'
import SubmitState from './submitState'
interface StepSummaryProperties {
formData: RegisterFormData
onSubmitSuccess: () => void
onSubmitFailure: () => void
}
const StepSummary = forwardRef((props: StepSummaryProperties, ref: Ref<PersonFormMethods>) => {
const { t } = useTranslation(['common'])
const { formData, onSubmitSuccess, onSubmitFailure } = props
const ous = useOus()
const roleTypes = useRoleTypes()
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
const submit = () => {
const payload = {
first_name: formData.first_name,
last_name: formData.last_name,
email: formData.email,
role: {
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,
},
}
console.log('submitting', JSON.stringify(payload))
fetch('/api/ui/v1/invite/', postJsonOpts(payload))
.then((res) => {
if (!res.ok) {
onSubmitFailure()
setSubmitState(SubmitState.SubmitFailure)
return null
}
return res.text()
})
.then((result) => {
if (result !== null) {
console.log('result', result)
onSubmitSuccess()
setSubmitState(SubmitState.SubmitSuccess)
}
})
.catch((error) => {
console.log('error', error)
onSubmitFailure()
setSubmitState(SubmitState.SubmitFailure)
})
}
function doSubmit() {
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 (
<>
<Box sx={{
paddingTop: '1rem',
paddingBottom: '1rem',
}}>
{t('registerWizardText.summaryContactInformation')}
</Box>
<Box sx={{ typography: 'body2' }}>
{t('registerWizardText.summaryPage')}
</Box>
<Box sx={{ marginTop: '1rem', maxWidth: '50rem' }}>
<Box sx={{
typography: 'subtitle2',
marginBottom: '0.5rem',
paddingLeft: '0.5rem',
bgcolor: 'primary.dark',
}}>{t('registerWizardText.contactInformation')}</Box>
<Grid sx={{ typography: 'body2', paddingLeft: '0.5rem' }} 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>
<Box sx={{
paddingTop: '1rem',
paddingBottom: '1rem',
}}>
{t('registerWizardText.summaryPeriod')}
</Box>
<Table>
<TableHead sx={{
paddingLeft: '0.5rem',
bgcolor: 'primary.dark',
}}>
<TableRow>
<TableCell>{t('registerWizardText.guestRole')}</TableCell>
<TableCell>{t('registerWizardText.guestPeriod')}</TableCell>
<TableCell>{t('registerWizardText.guestDepartment')}</TableCell>
<TableCell>{t('input.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 && (
<Box>
<h2>Submit success</h2>
</Box>
)}
{submitState === SubmitState.SubmitFailure && (
<Box>
<h2>Submit failure</h2>
</Box>
)}
</Box>
</>
)
},
)
export default StepSummary
frontend/src/routes/register/summaryFormMethods.ts deleted 100644 → 0
View file @ 3c278321
export interface SummaryFormMethods {
doSubmit: () => Promise<void>
}
frontend/src/routes/register/index.test.tsx → frontend/src/routes/sponsor/register/index.test.tsx
View file @ ba22c5a6
import React from 'react'
import { render, waitFor, screen } from 'test-utils'
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import userEvent from '@testing-library/user-event'
import AdapterDateFns from '@mui/lab/AdapterDateFns'
import { LocalizationProvider } from '@mui/lab'
import Register from './index'
// TODO: can this be initialized in 'test-utils'? should we stub it?
// see https://react.i18next.com/misc/testing
i18n.use(initReactI18next).init({
lng: 'en',
fallbackLng: 'en',
// Have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',
debug: false,
resources: { en: { translations: {} } },
})
test('Validation message showing if last name is missing', async () => {
render(
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Register />
</LocalizationProvider>)
const firstNameLabel = i18n.t('input.firstName').toString()
const firstNameComponent = screen.getByLabelText(firstNameLabel)
expect(firstNameComponent).toBeInTheDocument()
userEvent.type(firstNameComponent, 'Test')
</LocalizationProvider>
)
// Try to go to the next step and check that the validation message is showing
const submitButton = screen.getByTestId('button-next')
userEvent.click(submitButton)
const validationLastName = i18n
.t('common:validation.lastNameRequired')
.toString()
await waitFor(() => screen.getByText(validationLastName))
const validationMessage = screen.getByText(validationLastName)
const validationMessage = await waitFor(() =>
screen.getByText('validation.lastNameRequired')
)
expect(validationMessage).toBeInTheDocument()
screen.queryByText('validation.lastNameRequired')
const inputValue = 'Test input value'
// Note that we need to use the test-ID of the input field inside the Material UI TextField-component
userEvent.type(screen.getByTestId('lastName-input-field'), inputValue)
expect(screen.getByDisplayValue(inputValue)).toBeInTheDocument()
// Type in text, the message should disappear
screen.queryByText('validation.lastNameRequired')
userEvent.click(submitButton)
await waitFor(() => {
expect(
screen.queryByText('validation.lastNameRequired')
).not.toBeInTheDocument()
})
})
frontend/src/routes/register/index.tsx → frontend/src/routes/sponsor/register/index.tsx
View file @ ba22c5a6
......@@ -5,15 +5,21 @@ import { Box, Button } from '@mui/material'
import Page from 'components/page'
import { useHistory } from 'react-router-dom'
import format from 'date-fns/format'
import { RegisterFormData } from './formData'
import StepSummary from './stepSummary'
import StepPersonForm from './stepPersonForm'
import { PersonFormMethods } from './personFormMethods'
import { SummaryFormMethods } from './summaryFormMethods'
import SubmitState from './submitState'
import SponsorGuestButtons from '../components/sponsorGuestButtons'
import SponsorGuestButtons from '../../components/sponsorGuestButtons'
import { postJsonOpts } from '../../../utils'
/**
*
* This component controls the invite process where the sponsor
* enters the initial information about a guest.
*
*/
export default function StepRegistration() {
const { t } = useTranslation(['common'])
const [formData, setFormData] = useState<RegisterFormData>({
......@@ -32,7 +38,6 @@ export default function StepRegistration() {
const SUMMARY_STEP = 1
const [activeStep, setActiveStep] = useState(0)
const personFormRef = useRef<PersonFormMethods>(null)
const summaryStepRef = useRef<SummaryFormMethods>(null)
const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
const handleNext = () => {
......@@ -46,9 +51,44 @@ export default function StepRegistration() {
}
const registerGuest = () => {
if (summaryStepRef.current) {
summaryStepRef.current.doSubmit()
const payload = {
first_name: formData.first_name,
last_name: formData.last_name,
email: formData.email,
role: {
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,
},
}
console.log('submitting', JSON.stringify(payload))
fetch('/api/ui/v1/invite/', postJsonOpts(payload))
.then((res) => {
if (!res.ok) {
setSubmitState(SubmitState.SubmitFailure)
return null
}
return res.text()
})
.then((result) => {
if (result !== null) {
console.log('result', result)
setSubmitState(SubmitState.SubmitSuccess)
}
})
.catch((error) => {
console.log('error', error)
setSubmitState(SubmitState.SubmitFailure)
})
}
const handleBack = () => {
......@@ -56,7 +96,7 @@ export default function StepRegistration() {
}
const handleForwardFromRegister = (
updateFormData: RegisterFormData,
updateFormData: RegisterFormData
): void => {
setFormData(updateFormData)
setActiveStep((prevActiveStep) => prevActiveStep + 1)
......@@ -66,14 +106,6 @@ export default function StepRegistration() {
history.push('/')
}
const handleSubmitSuccess = () => {
setSubmitState(SubmitState.SubmitSuccess)
}
const handleSubmitFailure = () => {
setSubmitState(SubmitState.SubmitFailure)
}
return (
<Page>
<SponsorGuestButtons registerNewGuestActive />
......@@ -86,21 +118,24 @@ export default function StepRegistration() {
ref={personFormRef}
/>
)}
{activeStep === SUMMARY_STEP && (
<StepSummary
formData={formData}
onSubmitSuccess={handleSubmitSuccess}
onSubmitFailure={handleSubmitFailure}
ref={summaryStepRef}
/>
)}
{activeStep === SUMMARY_STEP && <StepSummary formData={formData} />}
</Box>
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, color: 'primary.main', paddingBottom: '1rem' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
pt: 2,
color: 'primary.main',
paddingBottom: '1rem',
}}
>
{activeStep === REGISTER_STEP && (
<Button data-testid='button-next'
sx={{ color: 'theme.palette.secondary', mr: 1 }}
onClick={handleNext}>
<Button
data-testid="button-next"
sx={{ color: 'theme.palette.secondary', mr: 1 }}
onClick={handleNext}
>
{t('button.next')}
</Button>
)}
......@@ -132,6 +167,19 @@ export default function StepRegistration() {
{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>
)}
{submitState === SubmitState.SubmitFailure && (
<Box>
<h2>Submit failure</h2>
</Box>
)}
</Page>
)
}
frontend/src/routes/sponsor/register/stepPersonForm.tsx 0 → 100644
View file @ ba22c5a6
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'
import { useTranslation } from 'react-i18next'
import { RegisterFormData } from './formData'
import { PersonFormMethods } from './personFormMethods'
import useOus, { OuData } from '../../../hooks/useOus'
import useRoleTypes, { RoleTypeData } from '../../../hooks/useRoleTypes'
import { isValidEmail } from '../../../utils'
interface StepPersonFormProperties {
nextHandler(formState: RegisterFormData): void
formData: RegisterFormData
}
const StepPersonForm = forwardRef(
(props: StepPersonFormProperties, ref: Ref<PersonFormMethods>) => {
const { i18n, t } = useTranslation(['common'])
const { nextHandler, formData } = props
const ous = useOus()
const [ouChoice, setOuChoice] = useState(
formData.ou_id ? formData.ou_id : ''
)
const [selectedRoleType, setSelectedRoleType] = useState(
formData.role_type ? formData.role_type : ''
)
const roleTypes = useRoleTypes()
const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
if (i18n.language === 'en') {
return a.name_nb.localeCompare(b.name_nb)
}
return a.name_en.localeCompare(b.name_en)
}
const enSort = (a: OuData, b: OuData) => {
if (a.en > b.en) {
return 1
}
if (b.en > a.en) {
return -1
}
return 0
}
const nbSort = (a: OuData, b: OuData) => {
if (a.nb > b.nb) {
return 1
}
if (b.nb > a.nb) {
return -1
}
return 0
}
const submit: SubmitHandler<RegisterFormData> = (data) => {
nextHandler(data)
}
const {
register,
control,
handleSubmit,
formState: { errors },
reset,
setValue,
} = useForm<RegisterFormData>()
const onSubmit = handleSubmit(submit)
useEffect(() => {
reset(formData)
}, [])
const handleOuChange = (event: SelectChangeEvent) => {
if (event.target.value) {
setOuChoice(event.target.value)
setValue('ou_id', parseInt(event.target.value, 10))
} else {
setValue('ou_id', undefined)
}
}
register('role_type', {
required: t<string>('validation.roleTypeRequired'),
})
const handleRoleTypeChange = (event: any) => {
setValue('role_type', event.target.value)
setSelectedRoleType(event.target.value)
}
function doSubmit() {
return onSubmit()
}
useImperativeHandle(ref, () => ({ doSubmit }))
return (
<>
<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')}
error={!!errors.first_name}
helperText={errors.first_name && errors.first_name.message}
{...register(`first_name`, {
required: t<string>('validation.firstNameRequired'),
})}
/>
<TextField
id="lastName"
label={t('input.lastName')}
error={!!errors.last_name}
helperText={errors.last_name && errors.last_name.message}
{...register(`last_name`, {
required: t<string>('validation.lastNameRequired'),
})}
inputProps={{ 'data-testid': 'lastName-input-field' }}
/>
<TextField
id="email"
label={t('input.email')}
error={!!errors.email}
helperText={errors.email && errors.email.message}
{...register(`email`, {
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
labelId="ou-select-label"
id="ou-select-label"
value={ouChoice?.toString()}
label={t('common:ou')}
onChange={handleOuChange}
>
{ous.length > 0 ? (
ous
.sort(i18n.language === 'en' ? enSort : nbSort)
.map((ou) => (
<MenuItem key={ou.id.toString()} value={ou.id}>
{i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
</MenuItem>
))
) : (
<></>
)}
</Select>
</FormControl>
<TextField
id="roletype-select"
select
value={selectedRoleType}
error={!!errors.role_type}
label={t('input.roleType')}
onChange={handleRoleTypeChange}
>
{roleTypes.sort(roleTypeSort()).map((roleType) => (
<MenuItem key={roleType.id.toString()} value={roleType.id}>
{i18n.language === 'en'
? roleType.name_en
: roleType.name_nb}
</MenuItem>
))}
</TextField>
<Controller
name="role_start"
control={control}
render={({ field }) => (
<DatePicker
mask="____-__-__"
label={t('input.roleStartDate')}
value={field.value}
inputFormat="yyyy-MM-dd"
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>
)}
/>
<Controller
name="role_end"
control={control}
defaultValue={undefined}
render={({ field }) => (
<DatePicker
mask="____-__-__"
label={t('input.roleEndDate')}
value={field.value}
inputFormat="yyyy-MM-dd"
onChange={(value) => {
field.onChange(value)
}}
renderInput={(params) => <TextField {...params} />}
/>
)}
/>
<TextField
id="comment"
label={t('input.comment')}
multiline
rows={5}
{...register(`comment`)}
/>
</Stack>
</form>
</Box>
</>
)
}
)
export default StepPersonForm
frontend/src/routes/sponsor/register/stepSummary.tsx 0 → 100644
View file @ ba22c5a6
import React, { forwardRef } from 'react'
import { useTranslation } from 'react-i18next'
import {
Box,
Grid,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
} from '@mui/material'
import format from 'date-fns/format'
import i18n from 'i18next'
import { RegisterFormData } from './formData'
import useOus from '../../../hooks/useOus'
import useRoleTypes from '../../../hooks/useRoleTypes'
interface StepSummaryProperties {
formData: RegisterFormData
}
const StepSummary = forwardRef((props: StepSummaryProperties) => {
const { t } = useTranslation(['common'])
const { formData } = props
const ous = useOus()
const roleTypes = useRoleTypes()
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 (
<>
<Box
sx={{
paddingTop: '1rem',
paddingBottom: '1rem',
}}
>
{t('registerWizardText.summaryContactInformation')}
</Box>
<Box sx={{ typography: 'body2' }}>
{t('registerWizardText.summaryPage')}
</Box>
<Box sx={{ marginTop: '1rem', maxWidth: '50rem' }}>
<Box
sx={{
typography: 'subtitle2',
marginBottom: '0.5rem',
paddingLeft: '0.5rem',
bgcolor: 'primary.light',
}}
>
{t('registerWizardText.contactInformation')}
</Box>
<Grid sx={{ typography: 'body2', paddingLeft: '0.5rem' }} 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>
<Box
sx={{
paddingTop: '1rem',
paddingBottom: '1rem',
}}
>
{t('registerWizardText.summaryPeriod')}
</Box>
<Table>
<TableHead
sx={{
paddingLeft: '0.5rem',
bgcolor: 'primary.light',
}}
>
<TableRow>
<TableCell>{t('registerWizardText.guestRole')}</TableCell>
<TableCell>{t('registerWizardText.guestPeriod')}</TableCell>
<TableCell>{t('registerWizardText.guestDepartment')}</TableCell>
<TableCell>{t('input.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>
</Box>
</>
)
})
export default StepSummary
frontend/src/routes/register/submitState.ts → frontend/src/routes/sponsor/register/submitState.ts
View file @ ba22c5a6
enum SubmitState {
NotSubmitted,
SubmitSuccess,
SubmitFailure
SubmitFailure,
}
export default SubmitState
frontend/src/test-utils.tsx
View file @ ba22c5a6
......@@ -18,3 +18,13 @@ export * from '@testing-library/react'
// override render method
export { customRender as render }
// Mock react-i18next module to return a translation that just returns the key
jest.mock('react-i18next', () => ({
useTranslation: () => ({
t: (value: string) => value,
i18n: {
changeLanguage: () => new Promise(() => {}),
},
}),
}))