IS-3110: Endret tekster og utseende i skjemaet for å skrive innstilling ifm. manglende medvirkning for å reflektere at man ikke lenger trenger å trykke manuelt på stoppknappen

Author: mariusfoss

src/components/Paragraph.tsx

@@ -1,4 +1,4 @@
-import { BodyLong, Label } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Label } from "@navikt/ds-react";
 import React from "react";
 
 interface ParagraphProps {
@@ -14,3 +14,14 @@ export const Paragraph = ({ label, body }: ParagraphProps) => {
     </div>
   );
 };
+
+export const ParagraphLarge = ({ label, body }: ParagraphProps) => {
+  return (
+    <div className="mb-4">
+      <div className={"navds-label text-xl mt-0 mb-2"}>{label}</div>
+      <BodyShort size={"small"} className={"leading-7"}>
+        {body}
+      </BodyShort>
+    </div>
+  );
+};

src/components/Sidetopp.tsx

@@ -5,12 +5,19 @@ const SIDETOPP_ID = "sidetopp";
 
 interface Props {
   tittel: string;
+  className?: string;
 }
 
-const Sidetopp = ({ tittel }: Props) => {
+const Sidetopp = ({ tittel, className }: Props) => {
   return (
     <header>
-      <Heading spacing size="large" id={SIDETOPP_ID} level="1">
+      <Heading
+        spacing
+        size="large"
+        id={SIDETOPP_ID}
+        level="1"
+        className={className}
+      >
         {tittel}
       </Heading>
     </header>

src/sider/manglendemedvirkning/ManglendeMedvirkningButtons.tsx

@@ -9,7 +9,7 @@ import {
 import React from "react";
 
 const texts = {
-  stans: "Innstilling om stans",
+  stans: "Skriv innstilling",
   oppfylt: "Oppfylt",
   unntak: "Unntak",
   ikkeAktuell: "Ikke aktuell",

src/sider/manglendemedvirkning/ManglendeMedvirkningSide.tsx

@@ -60,7 +60,7 @@ export default function ManglendeMedvirkningSide({
       tittel={texts.title}
       aktivtMenypunkt={Menypunkter.MANGLENDE_MEDVIRKNING}
     >
-      <Sidetopp tittel={texts.title} />
+      <Sidetopp tittel={texts.title} className={"text-2xl"} />
       <SideLaster
         henter={isLoading}
         hentingFeilet={isError}

src/sider/manglendemedvirkning/stans/StansSkjema.tsx

@@ -1,11 +1,11 @@
 import { Forhandsvisning } from "@/components/Forhandsvisning";
 import { manglendeMedvirkningPath } from "@/routers/AppRouter";
 import {
-  BodyShort,
   Box,
   Button,
   Heading,
   HStack,
+  Label,
   List,
   Textarea,
 } from "@navikt/ds-react";
@@ -21,31 +21,35 @@ import { useValgtPersonident } from "@/hooks/useValgtBruker";
 import { useNotification } from "@/context/notification/NotificationContext";
 import { useSendVurdering } from "@/data/manglendemedvirkning/useSendVurderingManglendeMedvirkning";
 import { StansdatoDatePicker } from "@/sider/manglendemedvirkning/stans/StansdatoDatePicker";
+import { ParagraphLarge } from "@/components/Paragraph";
 
 const texts = {
-  heading: "Skriv innstilling til NAY",
-  p1: "Skriv kort hvilke opplysninger som ligger til grunn for stans, samt din vurdering av hvorfor vilkåret ikke er oppfylt og vurdering av eventuelle nye opplysninger.",
-  begrunnelseLabel: "Innstilling om stans (obligatorisk)",
+  heading: "Skriv innstilling om stans til NAY",
+  innstillingInfoLabel: "Når du skriver innstillingen",
+  innstillingInfoParagraph:
+    "Om du har vurdert § 8-8 allerede, så burde dette komme frem i innstillingen. Om personen har flere arbeidsgivere burde dette også komme frem i innstillingen.",
+  begrunnelseLabel: "Innstilling om avslag (obligatorisk)",
   afterSendInfo: {
-    title: "Før du trykker Stans må du huske å:",
-    gosysoppgave: "Sende oppgave til NAY i Gosys:",
+    title: "Videre må du huske å:",
+    gosysoppgave:
+      "Sende beskjed i Gosys til Nav Arbeid og Ytelser. Dette er for å gjøre saksbehandler oppmerksom på at det har kommet en innstilling og at utbetalingen skal stanses.",
     gosysoppgaveListe: {
       tema: "Tema: Sykepenger",
       gjelder: "Gjelder: Aktivitetskrav",
       oppgavetype: "Oppgavetype: Vurder konsekvens for ytelse",
       prioritet: "Prioritet: Høy",
     },
-    stoppknapp:
-      "Gi beskjed om stans til ny saksbehandlingsløsning via Stoppknappen under fanen Sykmeldinger i Modia.",
   },
+  buttonDescriptionLabel:
+    "Send innstilling om stans og stans automatisk utbetaling",
   buttonDescription:
-    "Når du trykker “Stans” blir innstillingen journalført og kan sees i Gosys.",
+    "Når du sender innstillingen blir den journalført og kan sees i Gosys. Den automatiske utbetalingen til bruker stanses og oppgaven blir deretter plukket opp av saksbehandler fra Gosys.",
   forhandsvisningLabel: "Forhåndsvis innstillingen",
   missingBegrunnelse: "Vennligst angi begrunnelse",
-  sendVarselButtonText: "Stans",
+  sendVarselButtonText: "Send",
   avbrytButton: "Avbryt",
   success:
-    "Innstillingen om stans av sykepenger i forbindelse med medvirkningsplikten § 8-8 er lagret i historikken og blir journalført automatisk.",
+    "Du har gitt avslag og stanset automatisk utbetaling. Oppgaven er fjernet fra oversikten og innstillingen er journalført.",
 };
 
 const begrunnelseMaxLength = 5000;
@@ -96,47 +100,66 @@ export default function StansSkjema({ varselSvarfrist }: Props) {
   }
 
   return (
-    <Box background="surface-default" padding="6">
+    <Box
+      background="surface-default"
+      padding="5"
+      className={"rounded-lg py-[1.875rem]"}
+    >
       <FormProvider {...formMethods}>
-        <form onSubmit={handleSubmit(submit)} className="[&>*]:mb-4">
-          <Heading level="2" size="medium">
+        <form
+          onSubmit={handleSubmit(submit)}
+          className="[&>*:not(:last-child)]:mb-[1.875rem]"
+        >
+          <Heading level="2" size="small">
             {texts.heading}
           </Heading>
           <StansdatoDatePicker varselSvarfrist={varselSvarfrist} />
+          <ParagraphLarge
+            label={texts.innstillingInfoLabel}
+            body={texts.innstillingInfoParagraph}
+          />
           <Textarea
             {...register("begrunnelse", {
               maxLength: begrunnelseMaxLength,
               required: texts.missingBegrunnelse,
             })}
             value={watch("begrunnelse")}
-            label={texts.begrunnelseLabel}
-            description={texts.p1}
+            label={
+              <Label className={"text-lg"}>{texts.begrunnelseLabel}</Label>
+            }
             error={errors.begrunnelse?.message}
             size="small"
             minRows={6}
             maxLength={begrunnelseMaxLength}
+            className={"[&>textarea]:rounded-lg"}
           />
-          <List as="ul" title={texts.afterSendInfo.title}>
-            <List.Item>
-              {texts.afterSendInfo.gosysoppgave}
-              <List as="ul" className="ml-1">
-                <List.Item>
-                  {texts.afterSendInfo.gosysoppgaveListe.tema}
-                </List.Item>
-                <List.Item>
-                  {texts.afterSendInfo.gosysoppgaveListe.gjelder}
-                </List.Item>
-                <List.Item>
-                  {texts.afterSendInfo.gosysoppgaveListe.oppgavetype}
-                </List.Item>
-                <List.Item>
-                  {texts.afterSendInfo.gosysoppgaveListe.prioritet}
-                </List.Item>
-              </List>
-            </List.Item>
-            <List.Item>{texts.afterSendInfo.stoppknapp}</List.Item>
+          <List
+            as="ul"
+            title={texts.afterSendInfo.title}
+            className={
+              "[&>ul]:mt-0 [&>h3]:mb-2 [&_li]:mb-0.5 [&_*:not(h3)]:text-medium"
+            }
+          >
+            <div className={"mb-4"}>{texts.afterSendInfo.gosysoppgave}</div>
+            <List as="ul" className="ml-1">
+              <List.Item>
+                {texts.afterSendInfo.gosysoppgaveListe.tema}
+              </List.Item>
+              <List.Item>
+                {texts.afterSendInfo.gosysoppgaveListe.oppgavetype}
+              </List.Item>
+              <List.Item>
+                {texts.afterSendInfo.gosysoppgaveListe.gjelder}
+              </List.Item>
+              <List.Item>
+                {texts.afterSendInfo.gosysoppgaveListe.prioritet}
+              </List.Item>
+            </List>
           </List>
-          <BodyShort>{texts.buttonDescription}</BodyShort>
+          <ParagraphLarge
+            label={texts.buttonDescriptionLabel}
+            body={texts.buttonDescription}
+          />
           <HStack gap="4">
             <Button loading={sendVurdering.isPending} type="submit">
               {texts.sendVarselButtonText}

src/sider/manglendemedvirkning/stans/StansdatoDatePicker.tsx

@@ -1,11 +1,10 @@
-import { DatePicker, useDatepicker } from "@navikt/ds-react";
+import { DatePicker, Label, useDatepicker } from "@navikt/ds-react";
 import { useController } from "react-hook-form";
 import React from "react";
 import { StansSkjemaValues } from "@/sider/manglendemedvirkning/stans/StansSkjema";
 
 const texts = {
-  label: "Velg dato for stans (obligatorisk)",
-  description: "Første mulige dato for stans er svarfristen i forhåndsvarselet",
+  label: "Innstillingen gjelder fra",
   missingStansdatoError: "Du må velge en dato",
 };
 
@@ -31,10 +30,10 @@ export function StansdatoDatePicker({ varselSvarfrist }: Props) {
     <DatePicker {...datepickerProps}>
       <DatePicker.Input
         {...inputProps}
-        label={texts.label}
-        description={texts.description}
+        label={<Label className={"text-lg"}>{texts.label}</Label>}
         error={fieldState.error?.message}
-        size="small"
+        size="medium"
+        className={"[&_input]:rounded-lg"}
       />
     </DatePicker>
   );

test/manglendemedvirkning/ForhandsvarselTest.tsx

@@ -144,7 +144,7 @@ describe("Manglendemedvirkning Forhandsvarsel", () => {
       ).to.exist;
       expect(screen.getByRole("img", { name: "klokkeikon" })).to.exist;
       expect(
-        screen.getByRole("button", { name: "Innstilling om stans" })
+        screen.getByRole("button", { name: "Skriv innstilling" })
       ).to.have.property("disabled", true);
       expect(screen.getByRole("button", { name: "Oppfylt" })).to.exist;
       expect(screen.getByRole("button", { name: "Ikke aktuell" })).to.exist;
@@ -191,7 +191,7 @@ describe("Manglendemedvirkning Forhandsvarsel", () => {
           "dersom det ikke lenger er aktuelt å vurdere medvirkningsplikten, for eksempel ved friskmelding."
         )
       ).to.exist;
-      expect(screen.getByRole("button", { name: "Innstilling om stans" })).to
+      expect(screen.getByRole("button", { name: "Skriv innstilling" })).to
         .exist;
       expect(screen.getByRole("button", { name: "Oppfylt" })).to.exist;
       expect(screen.getByRole("button", { name: "Ikke aktuell" })).to.exist;

test/manglendemedvirkning/StansTest.tsx

@@ -59,35 +59,40 @@ describe("Manglendemedvirkning Stans", () => {
 
       renderStansSide();
 
-      expect(screen.getByText("Skriv innstilling til NAY")).to.exist;
+      expect(screen.getByText("Skriv innstilling om stans til NAY")).to.exist;
+      expect(screen.getByText("Når du skriver innstillingen")).to.exist;
       expect(
         screen.getByText(
-          "Skriv kort hvilke opplysninger som ligger til grunn for stans, samt din vurdering av hvorfor vilkåret ikke er oppfylt og vurdering av eventuelle nye opplysninger."
+          "Om du har vurdert § 8-8 allerede, så burde dette komme frem i innstillingen. Om personen har flere arbeidsgivere burde dette også komme frem i innstillingen."
         )
       ).to.exist;
       expect(
         screen.getByRole("textbox", {
-          name: "Innstilling om stans (obligatorisk)",
+          name: "Innstilling om avslag (obligatorisk)",
         })
       ).to.exist;
-      expect(screen.getByText("Før du trykker Stans må du huske å:")).to.exist;
-      expect(screen.getByText("Sende oppgave til NAY i Gosys:")).to.exist;
+      expect(screen.getByText("Videre må du huske å:")).to.exist;
+      expect(
+        screen.getByText(
+          "Sende beskjed i Gosys til Nav Arbeid og Ytelser. Dette er for å gjøre saksbehandler oppmerksom på at det har kommet en innstilling og at utbetalingen skal stanses."
+        )
+      ).to.exist;
       expect(screen.getByText("Tema: Sykepenger")).to.exist;
       expect(screen.getByText("Gjelder: Aktivitetskrav")).to.exist;
       expect(screen.getByText("Oppgavetype: Vurder konsekvens for ytelse")).to
         .exist;
       expect(screen.getByText("Prioritet: Høy")).to.exist;
       expect(
         screen.getByText(
-          "Gi beskjed om stans til ny saksbehandlingsløsning via Stoppknappen under fanen Sykmeldinger i Modia."
+          "Send innstilling om stans og stans automatisk utbetaling"
         )
       ).to.exist;
       expect(
         screen.getByText(
-          "Når du trykker “Stans” blir innstillingen journalført og kan sees i Gosys."
+          "Når du sender innstillingen blir den journalført og kan sees i Gosys. Den automatiske utbetalingen til bruker stanses og oppgaven blir deretter plukket opp av saksbehandler fra Gosys."
         )
       ).to.exist;
-      expect(screen.getByRole("button", { name: "Stans" })).to.exist;
+      expect(screen.getByRole("button", { name: "Send" })).to.exist;
       expect(screen.getByRole("button", { name: "Avbryt" })).to.exist;
       expect(screen.getByRole("button", { name: "Forhåndsvisning" })).to.exist;
     });
@@ -97,7 +102,7 @@ describe("Manglendemedvirkning Stans", () => {
 
       renderStansSide();
 
-      await clickButton("Stans");
+      await clickButton("Send");
 
       expect(await screen.findByText("Vennligst angi begrunnelse")).to.exist;
     });
@@ -109,18 +114,18 @@ describe("Manglendemedvirkning Stans", () => {
 
       const today = dayjs();
       const datoInput = screen.getByRole("textbox", {
-        name: "Velg dato for stans (obligatorisk)",
+        name: "Innstillingen gjelder fra",
         hidden: true,
       });
       changeTextInput(datoInput, today.format("DD.MM.YYYY"));
 
       const begrunnelse = "En begrunnelse";
       const begrunnelseInput = getTextInput(
-        "Innstilling om stans (obligatorisk)"
+        "Innstilling om avslag (obligatorisk)"
       );
       changeTextInput(begrunnelseInput, begrunnelse);
 
-      await clickButton("Stans");
+      await clickButton("Send");
 
       const expectedRequestBody: StansVurdering = {
         personident: ARBEIDSTAKER_DEFAULT.personIdent,