diff --git a/src/sider/sokperson/SokPerson.tsx b/src/sider/sokperson/SokPerson.tsx index 4004400b..1251bfcc 100644 --- a/src/sider/sokperson/SokPerson.tsx +++ b/src/sider/sokperson/SokPerson.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react'; import { Alert, - BodyShort, + BodyLong, Box, Button, ErrorMessage, Heading, - HStack, + HelpText, + Label, TextField, VStack, } from '@navikt/ds-react'; @@ -20,10 +21,39 @@ import * as Amplitude from '@/utils/amplitude'; const texts = { header: 'Søk etter sykmeldt', - info: - 'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato.', + info: 'Her kan du søke for å finne brukere med aktivt sykefravær.', + label: { + initials: 'Initialer (valgfri)', + birthdate: 'Fødselsdato (obligatorisk)', + }, + helpText: { + info: { + title: 'Hvordan søke etter sykmeldt?', + p1: + 'Fyll inn fødselsdato for å finne en sykmeldt du har tilgang til, vedkommende må ha et aktivt sykefravær. ', + p2: + 'Ønsker man et mer nøyaktig søk kan man legge til initialer til den sykmeldte, men dette er valgfritt. Det er ikke mulig å søke på initialer uten å skrive inn fødselsdato. Dette er for å minimere risiko for feil søkeresultat, og at du finner akkurat den personen du er på leting etter.', + }, + initials: { + title: 'Hvordan fyller jeg inn initialer?', + text: + 'Her kan du fylle inn initialene til den du vil søke opp. Feltet krever forbokstaven for fornavn og etternavn. Det er mulig å legge til forbokstavene for mellomnavn for mer nøyaktig søkeresultat. ', + }, + birthdate: { + title: 'Hvordan fyller jeg inn fødselsdato?', + text: ( + <> + Her kan du fylle inn fødselsdato til den du vil søke opp. For å kunne + søke må sifrene fylles inn på formatet: + dag måned år, i den rekkefølgen. Ønsker man et mer + nøyaktig søk kan man legge til initialer til den sykmeldte i initial + feltet. + + ), + }, + }, validation: { - initials: 'Vennligst angi gyldige initialer', + initials: 'Vennligst angi to til fire initialer', birthdate: 'Vennligst angi en gyldig fødselsdato', }, error: 'Noe gikk galt under søket. Vennligst prøv igjen.', @@ -55,6 +85,30 @@ function logSokPersonResults(amount: number, requestDTO: SokDTO) { }); } +function InitialerLabel() { + return ( +
+ {texts.label.initials} + + + {texts.helpText.initials.text} + +
+ ); +} + +function FodselsdatoLabel() { + return ( +
+ {texts.label.birthdate} + + + {texts.helpText.birthdate.text} + +
+ ); +} + export default function SokPerson() { const [initials, setInitials] = useState(''); const [birthdate, setBirthdate] = useState(''); @@ -78,14 +132,15 @@ export default function SokPerson() { }; const isValidInitials = (initials: string): boolean => { - return initials === '' || (initials.length <= 3 && initials.length > 1); + return initials === '' || (initials.length <= 4 && initials.length > 1); }; const handleSubmit = () => { const parsedBirthdate = parseBirthdate(birthdate); + const parsedInitials = removePunctuation(initials); if (isValidInitials(initials) && !!parsedBirthdate) { const requestDTO: SokDTO = { - initials: initials.toLowerCase(), + initials: parsedInitials.toLowerCase(), birthdate: parsedBirthdate, }; mutate(requestDTO, { @@ -109,46 +164,54 @@ export default function SokPerson() { handleSubmit(); }} > - - {texts.header} - +
+ + {texts.header} + + + + {texts.helpText.info.p1} + {texts.helpText.info.p2} + +
- {texts.info} - + {texts.info} +
} + description="ddmmåå" htmlSize={10} type="text" - onChange={(e) => setInitials(e.target.value)} - error={isFormError && !isValidInitials(initials)} + onChange={(e) => setBirthdate(e.target.value)} + error={isInvalidBirthdate} /> } + description="Eks: Oline Nordmann blir ON" + htmlSize={6} type="text" - onChange={(e) => setBirthdate(e.target.value)} - error={isInvalidBirthdate} + onChange={(e) => setInitials(e.target.value)} + error={isFormError && !isValidInitials(initials)} /> - - {isInvalidInitials && ( - - {texts.validation.initials} - - )} - {isInvalidBirthdate && ( - - {texts.validation.birthdate} - - )} + {isInvalidBirthdate && ( + + {texts.validation.birthdate} + + )} + {isInvalidInitials && ( + + {texts.validation.initials} + + )} +
{isError && ( {texts.error} diff --git a/test/components/SokPersonTest.tsx b/test/components/SokPersonTest.tsx index 531d6e4f..795aaa76 100644 --- a/test/components/SokPersonTest.tsx +++ b/test/components/SokPersonTest.tsx @@ -38,11 +38,21 @@ describe('SokPerson', () => { .exist; expect( screen.getByText( - 'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato.' + 'Her kan du søke for å finne brukere med aktivt sykefravær.' ) ).to.exist; - expect(screen.getByRole('textbox', { name: 'Initialer' })).to.exist; - expect(screen.getByRole('textbox', { name: 'Fødselsdato' })).to.exist; + expect( + screen.getByRole('textbox', { + name: + 'Initialer (valgfri) Hvordan fyller jeg inn initialer? Hvordan fyller jeg inn initialer?', + }) + ).to.exist; + expect( + screen.getByRole('textbox', { + name: + 'Fødselsdato (obligatorisk) Hvordan fyller jeg inn fødselsdato? Hvordan fyller jeg inn fødselsdato?', + }) + ).to.exist; expect(screen.getByRole('button', { name: 'Søk' })).to.exist; }); @@ -52,23 +62,26 @@ describe('SokPerson', () => { await userEvent.click(screen.getByRole('button', { name: 'Søk' })); expect(screen.getByText('Vennligst angi en gyldig fødselsdato')).to.exist; - expect(screen.queryByText('Vennligst angi gyldige initialer')).to.not.exist; + expect(screen.queryByText('Vennligst angi to til fire initialer')).to.not + .exist; }); it('should render validation error for initialer when blank and too many characters', async () => { renderSokPerson(); - const initialsInput = screen.getByRole('textbox', { name: 'Initialer' }); + const initialsInput = screen.getByRole('textbox', { name: /^Initialer/ }); fireEvent.change(initialsInput, { target: { value: ' ' } }); await userEvent.click(screen.getByRole('button', { name: 'Søk' })); - expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist; - fireEvent.change(initialsInput, { target: { value: 'ABCD' } }); - expect(screen.getByText('Vennligst angi gyldige initialer')).to.exist; + expect(screen.getByText('Vennligst angi to til fire initialer')).to.exist; + fireEvent.change(initialsInput, { target: { value: 'ABCDE' } }); + expect(screen.getByText('Vennligst angi to til fire initialer')).to.exist; }); it('should send correct parameters', async () => { renderSokPerson(); - const initialsInput = screen.getByRole('textbox', { name: 'Initialer' }); - const birthdateInput = screen.getByRole('textbox', { name: 'Fødselsdato' }); + const initialsInput = screen.getByRole('textbox', { name: /^Initialer/ }); + const birthdateInput = screen.getByRole('textbox', { + name: /^Fødselsdato/, + }); const initialsValue = 'kk'; const birthdateValue = '101010'; @@ -104,8 +117,10 @@ describe('SokPerson', () => { it('should show correct results', async () => { renderSokPerson(); - const initialsInput = screen.getByRole('textbox', { name: 'Initialer' }); - const birthdateInput = screen.getByRole('textbox', { name: 'Fødselsdato' }); + const initialsInput = screen.getByRole('textbox', { name: /^Initialer/ }); + const birthdateInput = screen.getByRole('textbox', { + name: /^Fødselsdato/, + }); const initialsValue = 'kh'; const birthdateValue = '101010';