wip

Author: luantr

src/actions/form/submitForm.ts

@@ -4,6 +4,7 @@ import { KartleggingssporsmalForm, kartleggingssporsmalFormSchema } from '@/doma
 import { getServerEnv, isLocalOrDemo } from '@/constants/envs'
 import { verifyUserLoggedIn } from '@/auth/rsc'
 import { exchangeIdportenTokenForMeroppfolgingBackendTokenx } from '@/auth/tokenUtils'
+import { mapAppFormToSnapshot } from '@/utils/form'
 
 export async function submitFormAction(formValues: KartleggingssporsmalForm) {
   //await new Promise((resolve) => setTimeout(resolve, 2000))
@@ -22,8 +23,10 @@ export async function submitFormAction(formValues: KartleggingssporsmalForm) {
 
   const { MEROPPFOLGING_BACKEND_URL } = getServerEnv()
   const url = new URL('/api/v1/kartleggingssporsmal', MEROPPFOLGING_BACKEND_URL)
+
+  const fieldSnapshots = mapAppFormToSnapshot({ values: parsed.data })
+
   try {
-    console.log('fieldsnapshot: ', formData)
     await fetch(url, {
       method: 'POST',
       headers: {
@@ -35,7 +38,7 @@ export async function submitFormAction(formValues: KartleggingssporsmalForm) {
           formIdentifier: 'kartleggingsporsmal',
           formSemanticVersion: '1.0.0',
           formSnapshotVersion: '1.0.0',
-          fieldSnapshots: formData,
+          fieldSnapshots: fieldSnapshots,
         },
       }),
     })

src/app/form/FormClient.tsx

@@ -13,8 +13,8 @@ import { submitFormAction } from '@/actions/form/submitForm'
 import NextLink from 'next/link'
 import { CONTACT_NAV_URL } from '@/constants'
 import KartleggingssporsmalFormSummary, {
-  type FormSummaryItem,
-} from '@/features/kartleggingssporsmal/KartleggingssporsmalFormSummary'
+  FormSummaryItem,
+} from '@/features/kartleggingssporsmal/summary/KartleggingssporsmalFormSummary'
 
 type Props = { alreadyAnswered: boolean; initialSummaryItems?: FormSummaryItem[] | null }
 
@@ -73,7 +73,6 @@ export default function FormClient({ alreadyAnswered, initialSummaryItems }: Pro
 
   return (
     <>
-      <h1>Kartlegging av din situasjon</h1>
       {displaySummary && (
         <>
           {justSubmitted && (
@@ -95,7 +94,7 @@ export default function FormClient({ alreadyAnswered, initialSummaryItems }: Pro
             </Link>{' '}
             (åpner i ny fane) hvis det skulle være noe.{' '}
           </BodyShort>
-          <KartleggingssporsmalFormSummary items={summaryItems} />
+          <KartleggingssporsmalFormSummary items={summaryItems || []} />
         </>
       )}
 

src/app/form/page.tsx

@@ -1,16 +1,5 @@
-import { fetchKandidatStatus } from '@/services/meroppfolging/meroppfolging-service'
+import FormClient from '@/app/form/FormClient'
 
 export default async function FormPage() {
-  let lastestResponse = null
-  let initialSummaryItems: FormSummaryItem[] | null = null
-
-  try {
-    const status = await fetchKandidatStatus()
-    lastestResponse = status.formResponse?.formSnapshot
-    if (lastestResponse) {
-      initialSummaryItems = mapFormSnapshotResponseToSummaryItems(lastestResponse)
-    }
-  } catch {}
-
-  return <FormClient alreadyAnswered={!!lastestResponse} initialSummaryItems={initialSummaryItems} />
+  return <FormClient alreadyAnswered={false} initialSummaryItems={null} />
 }

src/app/layout.tsx

@@ -5,17 +5,35 @@ import Script from 'next/script'
 import '@navikt/ds-css'
 import { fetchDecoratorReact } from '@navikt/nav-dekoratoren-moduler/ssr'
 
-import { Page } from '@navikt/ds-react'
+import { Box, Page } from '@navikt/ds-react'
 import { PageBlock } from '@navikt/ds-react/Page'
+import { publicEnv } from '@/constants/envs'
 
 export const metadata: Metadata = {
   title: 'Behovsrettet oppfølging',
   description: 'Skjema for behovsrettet oppfølging',
 }
 
+function getDecoratorEnv(): 'dev' | 'prod' {
+  switch (publicEnv.NEXT_PUBLIC_RUNTIME_ENVIRONMENT) {
+    case 'local':
+    case 'test':
+    case 'dev':
+      return 'dev'
+    default:
+      return 'prod'
+  }
+}
+
 const RootLayout = async ({ children }: Readonly<{ children: React.ReactNode }>) => {
   const Decorator = await fetchDecoratorReact({
-    env: 'dev',
+    env: getDecoratorEnv(),
+    params: {
+      language: 'nb',
+      context: 'privatperson',
+      logoutWarning: true,
+      redirectToApp: true,
+    },
   })
 
   return (
@@ -27,7 +45,7 @@ const RootLayout = async ({ children }: Readonly<{ children: React.ReactNode }>)
         <Page footer={<Decorator.Footer />}>
           <Decorator.Header />
           <PageBlock as="main" width="lg" gutters>
-            {children}
+            <Box className="pt-6">{children}</Box>
           </PageBlock>
           <Decorator.Scripts loader={Script} />
         </Page>

src/domain/kartleggingsspormaFormValues.ts

@@ -18,17 +18,17 @@ export const kartleggingsspormalFormQuestions = {
     label: 'Hvordan vil du beskrive samarbeidet og relasjonen mellom deg og arbeidsgiveren din?',
     required: true,
     options: [
-      { id: '2a', label: 'Jeg opplever forholdet vårt som godt' },
-      { id: '2b', label: 'Jeg opplever ikke forholdet vårt som godt' },
+      { id: '2a', label: 'Jeg opplever samarbeidet og relasjonen som god' },
+      { id: '2b', label: 'Jeg opplever samarbeidet og relasjonen som dårlig' },
     ],
   },
   naarTilbakeTilJobben: {
     type: 'RADIO_GROUP',
-    label: 'Hvor lenge tror du at du har behov for å være sykmeldt?',
+    label: 'Hvor lenge tror du at du kommer til å være sykmeldt?',
     required: true,
     options: [
-      { id: '3a', label: 'Mindre enn 26 uker (6 måneder) totalt' },
-      { id: '3b', label: 'Mer enn 26 uker (6 måneder) totalt' },
+      { id: '3a', label: 'Mindre enn seks måneder' },
+      { id: '3b', label: 'Mer enn seks måneder' },
     ],
   },
 } as const satisfies QuestionsObject

src/features/kartleggingssporsmal/KartleggingssporsmalLanding.tsx

@@ -1,25 +1,33 @@
 'use client'
 
-import { mapFormSnapshotToSummaryItems } from '@/utils/form'
 import NoAccessInformation from '@/features/no-access/NoAccess'
-import { FieldSnapshotsResponse, KandidatStatusResponse } from '@/services/meroppfolging/schemas/formSnapshotSchema'
+import {
+  FieldSnapshotsRequest,
+  FieldSnapshotsResponse,
+  KandidatStatusResponse,
+} from '@/services/meroppfolging/schemas/formSnapshotSchema'
 import { useState } from 'react'
-import KartleggingssporsmalFormSummary from '@/features/kartleggingssporsmal/summary/KartleggingssporsmalFormSummary'
 import KartleggingssporsmalFormPage from '@/features/kartleggingssporsmal/form/KartleggingssporsmalFormPage'
+import KartleggingssporsmalFormSummaryPage from '@/features/kartleggingssporsmal/summary/KartleggingssporsmalFormSummaryPage'
+
+export type KartleggingssporsmalFieldValues = {
+  fieldSnapshots: FieldSnapshotsRequest | FieldSnapshotsResponse
+  createdAt: Date
+}
+export type NullableKartleggingssporsmalFieldValues = KartleggingssporsmalFieldValues | null
 
 export default function KartleggingssporsmalLanding({ kandidatStatus }: { kandidatStatus: KandidatStatusResponse }) {
-  const fieldSnapshots = kandidatStatus.formResponse?.formSnapshot.fieldSnapshots || null
-  const [formValues, setFormValues] = useState<FieldSnapshotsResponse | null>(fieldSnapshots)
-  const [justSubmitted, setJustSubmitted] = useState<boolean>(false)
+  const [formValues, setFormValues] = useState<NullableKartleggingssporsmalFieldValues>(null)
 
   if (kandidatStatus.isKandidat === false) {
     return <NoAccessInformation />
   }
 
-  if (formValues && formValues?.length > 0) {
-    const summaryItems = mapFormSnapshotToSummaryItems(formValues)
-    return <KartleggingssporsmalFormSummary items={summaryItems} />
+  const formResponse = kandidatStatus.formResponse?.formSnapshot || formValues
+
+  if (formResponse) {
+    return <KartleggingssporsmalFormSummaryPage formSnapshot={formResponse} />
   }
 
-  return <KartleggingssporsmalFormPage setSummaryItems={setFormValues} setJustSubmitted={setJustSubmitted} />
+  return <KartleggingssporsmalFormPage setSummaryItems={setFormValues} />
 }

src/features/kartleggingssporsmal/form/KartleggingssporsmalForm.tsx

@@ -6,19 +6,18 @@ import {
   kartleggingssporsmalFormSchema,
 } from '@/domain/kartleggingsspormaFormValues'
 import { useAppForm } from '@/hooks/form'
-import { Box, Button } from '@navikt/ds-react'
+import { Button } from '@navikt/ds-react'
 import { revalidateLogic } from '@tanstack/form-core'
 import { type Dispatch, type SetStateAction, useState } from 'react'
 import { submitFormAction } from '@/actions/form/submitForm'
-import { mapAppFormToSnapshot, mapFormSnapshotToSummaryItems } from '@/utils/form'
-import { type FormSummaryItem } from '@/features/kartleggingssporsmal/KartleggingssporsmalFormSummary'
+import { mapAppFormToSnapshot } from '@/utils/form'
+import { NullableKartleggingssporsmalFieldValues } from '@/features/kartleggingssporsmal/KartleggingssporsmalLanding'
 
 type Props = {
-  setSummaryItems: Dispatch<SetStateAction<FormSummaryItem[]>>
-  setJustSubmitted: Dispatch<SetStateAction<boolean>>
+  setSummaryItems: Dispatch<SetStateAction<NullableKartleggingssporsmalFieldValues>>
 }
 
-export default function KartleggingssporsmalForm({ setSummaryItems, setJustSubmitted }: Props) {
+export default function KartleggingssporsmalForm({ setSummaryItems }: Props) {
   const [submitting, setSubmitting] = useState<boolean>(false)
 
   const form = useAppForm({
@@ -35,9 +34,7 @@ export default function KartleggingssporsmalForm({ setSummaryItems, setJustSubmi
         setSubmitting(true)
         await submitFormAction(value)
         const fieldSnapshots = mapAppFormToSnapshot({ values: value })
-        const summaryItems = mapFormSnapshotToSummaryItems(fieldSnapshots)
-        setSummaryItems(summaryItems)
-        setJustSubmitted(true)
+        setSummaryItems({ fieldSnapshots: fieldSnapshots, createdAt: new Date() })
       } catch (e) {
         console.error('Submission failed', e)
       } finally {
@@ -47,34 +44,33 @@ export default function KartleggingssporsmalForm({ setSummaryItems, setJustSubmi
   })
 
   return (
-    <Box background="bg-subtle" padding="6" borderRadius="large" borderColor="border-subtle" borderWidth="1">
-      <form
-        onSubmit={(e) => {
-          e.preventDefault()
-          e.stopPropagation()
-        }}
-      >
-        <form.AppForm>
-          <div className={'grid gap-4 mb-4'}>
-            <form.AppField name="hvorSannsynligTilbakeTilJobben">
-              {(field) => (
-                <field.RadioGroup question={kartleggingsspormalFormQuestions['hvorSannsynligTilbakeTilJobben']} />
-              )}
-            </form.AppField>
-            <form.AppField name="samarbeidOgRelasjonTilArbeidsgiver">
-              {(field) => (
-                <field.RadioGroup question={kartleggingsspormalFormQuestions['samarbeidOgRelasjonTilArbeidsgiver']} />
-              )}
-            </form.AppField>
-            <form.AppField name="naarTilbakeTilJobben">
-              {(field) => <field.RadioGroup question={kartleggingsspormalFormQuestions['naarTilbakeTilJobben']} />}
-            </form.AppField>
-          </div>
-          <Button type="submit" className="mt-4" onClick={() => form.handleSubmit()} disabled={submitting}>
-            {submitting ? 'Sender…' : 'Send skjema'}
-          </Button>
-        </form.AppForm>
-      </form>
-    </Box>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+      className="mt-8"
+    >
+      <form.AppForm>
+        <div className={'grid gap-4 mb-4'}>
+          <form.AppField name="hvorSannsynligTilbakeTilJobben">
+            {(field) => (
+              <field.RadioGroup question={kartleggingsspormalFormQuestions['hvorSannsynligTilbakeTilJobben']} />
+            )}
+          </form.AppField>
+          <form.AppField name="samarbeidOgRelasjonTilArbeidsgiver">
+            {(field) => (
+              <field.RadioGroup question={kartleggingsspormalFormQuestions['samarbeidOgRelasjonTilArbeidsgiver']} />
+            )}
+          </form.AppField>
+          <form.AppField name="naarTilbakeTilJobben">
+            {(field) => <field.RadioGroup question={kartleggingsspormalFormQuestions['naarTilbakeTilJobben']} />}
+          </form.AppField>
+        </div>
+        <Button type="submit" className="mt-4" onClick={() => form.handleSubmit()} disabled={submitting}>
+          {submitting ? 'Sender…' : 'Send svarene til Nav'}
+        </Button>
+      </form.AppForm>
+    </form>
   )
 }

src/features/kartleggingssporsmal/form/KartleggingssporsmalFormPage.ts

@@ -0,0 +1,26 @@
+import KartleggingssporsmalForm from './KartleggingssporsmalForm'
+import { type Dispatch, type SetStateAction } from 'react'
+import { BodyShort, Heading } from '@navikt/ds-react'
+import { NullableKartleggingssporsmalFieldValues } from '@/features/kartleggingssporsmal/KartleggingssporsmalLanding'
+
+type KartleggingssporsmalFormPageProps = {
+  setSummaryItems: Dispatch<SetStateAction<NullableKartleggingssporsmalFieldValues>>
+}
+
+export default function KartleggingssporsmalFormPage({ setSummaryItems }: KartleggingssporsmalFormPageProps) {
+  return (
+    <>
+      <Heading size={'large'} level="1" spacing>
+        Kartlegging av din situasjon
+      </Heading>
+      <BodyShort spacing>
+        Siden du har vært sykmeldt en stund, ønsker vi å få bedre kjennskap til din situasjon ved at du svarer på disse
+        tre spørsmålene.
+      </BodyShort>
+      <BodyShort spacing>
+        Svarene dine blir kun delt med Nav og gir oss innsikt i hvordan vi kan følge deg opp fremover.
+      </BodyShort>
+      <KartleggingssporsmalForm setSummaryItems={setSummaryItems} />
+    </>
+  )
+}

src/features/kartleggingssporsmal/form/KartleggingssporsmalFormPage.tsx

@@ -1,4 +1,3 @@
-import { BodyShort } from '@navikt/ds-react'
 import { FormSummary as AkselFormSummary } from '@navikt/ds-react'
 import {
   FormSummaryAnswer,
@@ -15,31 +14,23 @@ export type FormSummaryItem = {
 }
 
 type Props = {
-  title?: string
-  items?: FormSummaryItem[] | null
+  items: FormSummaryItem[]
 }
 
 export default function KartleggingssporsmalFormSummary({ items }: Props) {
-  const hasItems = !!items && items.length > 0
-
   return (
-    <AkselFormSummary className="max-w-3xl">
+    <AkselFormSummary>
       <FormSummaryHeader>
         <FormSummaryHeading level="2">Oppsummering av svar</FormSummaryHeading>
       </FormSummaryHeader>
-
-      {!hasItems && <BodyShort>Skjemaet er sendt inn. Takk for svarene dine.</BodyShort>}
-
-      {hasItems && (
-        <FormSummaryAnswers>
-          {items!.map((it, idx) => (
-            <FormSummaryAnswer key={idx}>
-              <FormSummaryLabel>{it.label}</FormSummaryLabel>
-              <FormSummaryValue>{it.value}</FormSummaryValue>
-            </FormSummaryAnswer>
-          ))}
-        </FormSummaryAnswers>
-      )}
+      <FormSummaryAnswers>
+        {items.map((it, idx) => (
+          <FormSummaryAnswer key={idx}>
+            <FormSummaryLabel>{it.label}</FormSummaryLabel>
+            <FormSummaryValue>{it.value}</FormSummaryValue>
+          </FormSummaryAnswer>
+        ))}
+      </FormSummaryAnswers>
     </AkselFormSummary>
   )
 }