Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revise forms meld svar #841

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Revise forms meld svar #841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cc9d783
Revise question and answer texts on svar page
haakomol Sep 27, 2024
702dfbf
Revise forms on meld- and svar-pages
haakomol Sep 29, 2024
5930b4e
Some label text changes after meeting, and some refactoring
haakomol Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 148 additions & 86 deletions src/common/components/motebehov/MeldBehovForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Controller, useForm } from "react-hook-form";
import { BodyLong, Checkbox, CheckboxGroup, Textarea } from "@navikt/ds-react";
import { Checkbox, CheckboxGroup, Textarea, TextField } from "@navikt/ds-react";

import { useAmplitude } from "@/common/hooks/useAmplitude";
import DialogmotePanel from "@/common/components/panel/DialogmotePanel";
Expand All @@ -10,46 +10,63 @@ import { Events } from "@/common/amplitude/events";
import { useErrorSummaryFormatter } from "@/common/hooks/useErrorSummaryFormatter";
import { MotebehovSvarRequest } from "types/shared/motebehov";
import { commonTexts } from "@/common/constants/commonTexts";
import { commonTextsForSvarAndMeld } from "./SvarBehovForm";

const BEGRUNNELSE_MAX_LENGTH = 1000;
const MAX_LENGTH_BEHOV_BEGRUNNELSE = 1000;
const MAX_LENGTH_ONSKER_BEHANDLER_BEGRUNNELSE = 500;
const MAX_LENGTH_HVA_SLAGS_TOLK = 100;

const texts = {
aboutRequiredFields:
"Alle felt må fylles ut, bortsett fra de som er markert som valgfrie.",
formLabels: {
checkboxesLegend: "Meld behov for møte",
textAreaBegrunnelse: "Begrunnelse (valgfri)",
checkboxesLegend: "Andre valg",
},
validation: {
requiredHarBehovCheckbox:
"Du må krysse av for møtebehov for å kunne sende inn skjemaet.",
mustAnswerYesOrNo:
"Du må velge ja eller nei for å kunne sende inn skjemaet.",
maxLengthBegrunnelse: `Maks ${BEGRUNNELSE_MAX_LENGTH} tegn er tillatt.`,
requiredBehovBegrunnelse: "Du må oppgi hvorfor du ønsker et dialogmøte.",
maxLengthBehovBegrunnelse: `Maks ${MAX_LENGTH_BEHOV_BEGRUNNELSE} tegn er tillatt i dette feltet.`,
requiredOnskerBehandlerBegrunnelse:
"Du må begrunne hvorfor du ønsker at behandler deltar.",
maxLengthOnskerBehandlerBegrunnelse: `Maks ${MAX_LENGTH_ONSKER_BEHANDLER_BEGRUNNELSE} tegn er tillatt i dette feltet.`,
requiredHvaSlagsTolk: "Du må oppgi hva slags tolk dere har behov for.",
},
buttonSendInn: "Send inn",
buttonSendInn: "Be om møte",
};

const motebehovCheckbox = "motebehovCheckbox";
const behandlerCheckbox = "behandlerCheckbox";
const begrunnelseTextArea = "begrunnelseTextArea";
const behovBegrunnelseTextArea = "behovBegrunnelseTextArea";
const onskerBehandlerCheckbox = "onskerBehandlerCheckbox";
const onskerBehandlerBegrunnelseTextArea = "onskerBehandlerBegrunnelseTextArea";
const harBehovForTolkCheckbox = "harBehovForTolkCheckbox";
const hvaSlagsTolkTextField = "hvaSlagsTolkTextField";

type FormValues = {
[motebehovCheckbox]: boolean;
[behandlerCheckbox]: boolean;
[begrunnelseTextArea]: string;
[behovBegrunnelseTextArea]: string;
[onskerBehandlerCheckbox]: boolean;
[onskerBehandlerBegrunnelseTextArea]: string;
[harBehovForTolkCheckbox]: boolean;
[hvaSlagsTolkTextField]: string;
};

interface FormLabelProps {
begrunnelseLabel: string;
begrunnelseDescription?: string;
checkboxOnskerBehandlerLabel: string;
checkboxHarBehovForTolkLabel: string;
hvaSlagsTolkLabel: string;
}

interface Props {
checkboxLabelHarBehov: string;
checkboxLabelOnskerAtBehandlerBlirMed: string;
formLabels: FormLabelProps;
isSubmitting: boolean;
onSubmitForm: (svar: MotebehovSvarRequest) => void;
}

function MeldBehovForm({
checkboxLabelHarBehov,
checkboxLabelOnskerAtBehandlerBlirMed,
formLabels: {
begrunnelseLabel,
begrunnelseDescription,
checkboxOnskerBehandlerLabel,
checkboxHarBehovForTolkLabel,
hvaSlagsTolkLabel,
},
isSubmitting,
onSubmitForm,
}: Props) {
Expand All @@ -59,101 +76,146 @@ function MeldBehovForm({
control,
formState: { errors },
handleSubmit,
watch,
} = useForm<FormValues>();

const errorList = useErrorSummaryFormatter(errors);

const isOnskerBehandlerDeltarChecked = watch(onskerBehandlerCheckbox);
const isHarBehovForTolkChecked = watch(harBehovForTolkCheckbox);

const begrunnelseDescriptionWithNoSensitiveInfoText = begrunnelseDescription
? `${begrunnelseDescription} ${commonTexts.noSensitiveInfo}`
: commonTexts.noSensitiveInfo;

function onSubmit({
behandlerCheckbox,
motebehovCheckbox,
begrunnelseTextArea,
}: FormValues) {
const forklaring = !!behandlerCheckbox
? `${checkboxLabelOnskerAtBehandlerBlirMed} ${begrunnelseTextArea}`
: begrunnelseTextArea;
behovBegrunnelseTextArea,
onskerBehandlerCheckbox,
}: // TODO: Submit these fields as well
// onskerBehandlerBegrunnelseTextArea,
// tolkCheckbox,
// hvaSlagsgTolkTextField,
FormValues) {
const forklaring = !!onskerBehandlerCheckbox
? `${commonTextsForSvarAndMeld.formLabels.onskerBehandlerMedBegrunnelseLabel} ${behovBegrunnelseTextArea}`
: behovBegrunnelseTextArea;

onSubmitForm({
harMotebehov: !!motebehovCheckbox,
harMotebehov: true,
forklaring,
});
trackEvent(Events.SendMeldBehov);
}

return (
<>
<BodyLong size="medium" spacing>
{texts.aboutRequiredFields}
</BodyLong>
<form onSubmit={handleSubmit(onSubmit)}>
<DialogmotePanel>
<MotebehovErrorSummary errors={errorList} />

<Controller
name={behovBegrunnelseTextArea}
control={control}
rules={{
required: texts.validation.requiredBehovBegrunnelse,
maxLength: {
value: MAX_LENGTH_BEHOV_BEGRUNNELSE,
message: texts.validation.maxLengthBehovBegrunnelse,
},
}}
render={({ field }) => (
<Textarea
{...field}
id={behovBegrunnelseTextArea}
label={begrunnelseLabel}
description={begrunnelseDescriptionWithNoSensitiveInfoText}
maxLength={MAX_LENGTH_BEHOV_BEGRUNNELSE}
minRows={4}
error={errors[behovBegrunnelseTextArea]?.message}
/>
)}
/>

<form onSubmit={handleSubmit(onSubmit)}>
<DialogmotePanel>
<MotebehovErrorSummary errors={errorList} />
<CheckboxGroup legend={texts.formLabels.checkboxesLegend} hideLegend>
<Controller
name={onskerBehandlerCheckbox}
control={control}
render={({ field }) => (
<Checkbox {...field}>{checkboxOnskerBehandlerLabel}</Checkbox>
)}
/>

<CheckboxGroup legend={texts.formLabels.checkboxesLegend} hideLegend>
{isOnskerBehandlerDeltarChecked && (
<Controller
name={motebehovCheckbox}
name={onskerBehandlerBegrunnelseTextArea}
control={control}
rules={{
required: texts.validation.requiredHarBehovCheckbox,
maxLength: {
value: MAX_LENGTH_ONSKER_BEHANDLER_BEGRUNNELSE,
message: texts.validation.maxLengthOnskerBehandlerBegrunnelse,
},
required: {
value: isOnskerBehandlerDeltarChecked,
message: texts.validation.requiredOnskerBehandlerBegrunnelse,
},
}}
render={({ field }) => (
<Checkbox
{...field}
id={motebehovCheckbox}
value={checkboxLabelHarBehov}
error={!!errors[motebehovCheckbox]}
>
{checkboxLabelHarBehov}
</Checkbox>
)}
/>

<Controller
name={behandlerCheckbox}
control={control}
render={({ field }) => (
<Checkbox
<Textarea
{...field}
value={checkboxLabelOnskerAtBehandlerBlirMed}
>
{checkboxLabelOnskerAtBehandlerBlirMed}
</Checkbox>
id={onskerBehandlerBegrunnelseTextArea}
label={
commonTextsForSvarAndMeld.formLabels
.onskerBehandlerMedBegrunnelseLabel
}
maxLength={MAX_LENGTH_ONSKER_BEHANDLER_BEGRUNNELSE}
minRows={4}
error={errors[onskerBehandlerBegrunnelseTextArea]?.message}
className="mt-3 mb-4"
/>
)}
/>
</CheckboxGroup>
)}

<Controller
name={begrunnelseTextArea}
name={harBehovForTolkCheckbox}
control={control}
rules={{
maxLength: {
value: BEGRUNNELSE_MAX_LENGTH,
message: texts.validation.maxLengthBegrunnelse,
},
}}
render={({ field }) => (
<Textarea
{...field}
id={begrunnelseTextArea}
label={texts.formLabels.textAreaBegrunnelse}
description={commonTexts.noSensitiveInfo}
maxLength={BEGRUNNELSE_MAX_LENGTH}
minRows={4}
error={errors[begrunnelseTextArea]?.message}
/>
<Checkbox {...field}>{checkboxHarBehovForTolkLabel}</Checkbox>
)}
/>

<div className="inline-flex pt-4 gap-4">
<SubmitButton
isLoading={isSubmitting}
label={texts.buttonSendInn}
{isHarBehovForTolkChecked && (
<Controller
name={hvaSlagsTolkTextField}
control={control}
rules={{
required: {
value: isHarBehovForTolkChecked,
message: texts.validation.requiredHvaSlagsTolk,
},
}}
render={({ field }) => (
<TextField
{...field}
id={hvaSlagsTolkTextField}
label={hvaSlagsTolkLabel}
description={
commonTextsForSvarAndMeld.formLabels.hvaSlagsTolkDescription
}
maxLength={MAX_LENGTH_HVA_SLAGS_TOLK}
error={errors[hvaSlagsTolkTextField]?.message}
className="mt-3 mb-2"
/>
)}
/>
<CancelButton />
</div>
</DialogmotePanel>
</form>
</>
)}
</CheckboxGroup>

<div className="inline-flex pt-4 gap-4">
<SubmitButton isLoading={isSubmitting} label={texts.buttonSendInn} />
<CancelButton />
</div>
</DialogmotePanel>
</form>
);
}

Expand Down
9 changes: 5 additions & 4 deletions src/common/components/motebehov/MotebehovKvittering.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from "react";
import { BodyLong, Heading, Label } from "@navikt/ds-react";
import { texts as MeldBehovTextsSM } from "@/pages/sykmeldt/motebehov/meld.page";
import { texts as MeldBehovTextsAG } from "@/pages/arbeidsgiver/[narmestelederid]/motebehov/meld.page";

import { getFullDateFormat } from "@/common/utils/dateUtils";
import { Motebehov } from "types/shared/motebehov";
import { useAudience } from "@/common/hooks/routeHooks";
import { commonTextsForSMSvarAndMeld } from "@/pages/sykmeldt/motebehov/svar.page";
import { commonTextsForAGSvarAndMeld } from "@/pages/arbeidsgiver/[narmestelederid]/motebehov/svar.page";

const texts = {
heading: "Svaret ditt om behov for møte",
Expand All @@ -21,8 +22,8 @@ const MotebehovKvittering = ({ motebehov }: Props) => {
const { isAudienceSykmeldt } = useAudience();

const behandlerVaereMedTekst = isAudienceSykmeldt
? MeldBehovTextsSM.checkboxLabelOnskerBehandlerMed
: MeldBehovTextsAG.checkboxLabelOnskerBehandlerMed;
? commonTextsForSMSvarAndMeld.formLabels.checkboxOnskerBehandlerMedLabel
: commonTextsForAGSvarAndMeld.formLabels.checkboxOnskerBehandlerMedLabel;

const onskerAtBehandlerBlirMed = motebehov.svar?.forklaring?.includes(
behandlerVaereMedTekst
Expand Down
Loading
Loading