Behovsavklaring med nytt api

package.json

@@ -26,7 +26,7 @@
         "@grafana/faro-web-tracing": "1.3.5",
         "@navikt/aksel-icons": "5.13.0",
         "@navikt/ds-react": "5.13.0",
-        "@navikt/arbeidssokerregisteret-utils": "0.8.0",
+        "@navikt/arbeidssokerregisteret-utils": "0.10.0",
         "classnames": "2.5.1",
         "core-js": "3.35.0",
         "intersection-observer": "0.12.2",

src/contexts/behov-for-veiledning.tsx

@@ -9,12 +9,14 @@ export type BehovForVeiledningRequest = {
     tekst?: string;
     overskrift?: string;
     venterPaaSvarFraNav?: boolean;
+    profileringId?: string;
 };
 
 export type BehovForVeiledningResponse = {
     dato?: string;
     oppfolging: ForeslattInnsatsgruppe;
     dialogId?: string;
+    profileringId?: string;
 } | null;
 
 interface BehovForVeiledningProviderType {

src/hooks/use-har-gyldig-behovsvurdering.ts

@@ -2,6 +2,7 @@ import { useBehovForVeiledning } from '../contexts/behov-for-veiledning';
 import { useArbeidssokerPerioder } from '../contexts/arbeidssoker';
 import beregnArbeidssokerperioder from '../lib/beregn-arbeidssokerperioder';
 import { Servicegruppe, useOppfolgingData } from './use-oppfolging-data';
+import { useProfilering } from '../contexts/profilering';
 
 function useHarGyldigBehovsvurdering() {
     const behov = useBehovForVeiledning();
@@ -17,4 +18,11 @@ function useHarGyldigBehovsvurdering() {
     return servicegruppe === Servicegruppe.IVURD && harGyldigBehovsvurdering;
 }
 
+export function useHarGyldigBehovsvurderingNyttApi() {
+    const behov = useBehovForVeiledning();
+    const { behovForVeiledning } = behov;
+    const { profilering: profileringer } = useProfilering();
+    return profileringer.some((p) => p.profileringId === behovForVeiledning?.profileringId);
+}
+
 export default useHarGyldigBehovsvurdering;

src/komponenter/behovsavklaring-nytt-api/behovsavklaring-avklart-situasjonsbestemt.tsx

@@ -0,0 +1,68 @@
+import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react';
+
+import { useSprakValg } from '../../contexts/sprak';
+
+import lagHentTekstForSprak from '../../lib/lag-hent-tekst-for-sprak';
+import ReadMoreVeileder from './readmore-veileder';
+import ErRendret from '../er-rendret/er-rendret';
+import InViewport from '../in-viewport/in-viewport';
+
+import spacingStyles from '../../spacing.module.css';
+
+import { AktivitetsplanLenke, DialogLenke } from './lenker';
+import useSkalBrukeTabs from '../../hooks/use-skal-bruke-tabs';
+
+const TEKSTER = {
+    nb: {
+        overskrift: 'Hjelp og støtte',
+        headingEnig: 'Dine samhandlingsverktøy mellom deg og din veileder',
+        headingUenig: 'Du har sagt at du vil klare deg selv',
+        beskrivelseEnigDialog:
+            'Du kan skrive til din veileder i dialogen og du kan planlegge arbeidsrettede aktiviteter i aktivitetsplanen',
+        beskrivelseUenig: 'En veileder vil ta stilling til ønsket ditt. Du vil få et vedtaksbrev om dette.',
+        beskrivelseUenigDialog: 'Om du ønsker å skrive til veilederen, kan du gjøre det via dialogen',
+        skrivTilVeileder: 'Skriv til veileder',
+        aktivitetsplan: 'aktivitetsplanen',
+    },
+    en: {
+        overskrift: 'Hjelp og støtte',
+        headingEnig: 'Dine samhandlingsverktøy mellom deg og din veileder',
+        headingUenig: 'Du ønsker å klare deg selv',
+        beskrivelseUenig:
+            'Enn så lenge er du satt opp til å motta veiledning for å nå arbeidsmålene dine. En veileder vil vurdere det du har gitt av innspill og kanskje ta kontakt så dere kan vurdere dette sammen.',
+        dialog: 'Gå til dialogen',
+        aktivitetsplan: 'Gå til din aktivitetsplan',
+    },
+};
+
+function BehovsavklaringAvklartSituasjonsbestemt() {
+    const sprak = useSprakValg().sprak;
+    const tekst = lagHentTekstForSprak(TEKSTER, sprak);
+    const brukTabsDemo = useSkalBrukeTabs();
+    return (
+        <Box>
+            <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - situasjonsbestemt" />
+            {!brukTabsDemo && (
+                <Detail uppercase className={spacingStyles.mt1}>
+                    {tekst('overskrift')}
+                </Detail>
+            )}
+            <Heading className={spacingStyles.mb1} size="small">
+                {tekst('headingEnig')}
+            </Heading>
+            <BodyLong className={spacingStyles.mb1}>{tekst('beskrivelseEnigDialog')}.</BodyLong>
+            <ReadMoreVeileder />
+            <BodyLong className={spacingStyles.mt1}>
+                <DialogLenke aktivitet={'Behovsavklaring - avklart - situasjonsbestemt - går til dialogen'} />
+            </BodyLong>
+            <BodyLong className={spacingStyles.mt1}>
+                <AktivitetsplanLenke
+                    aktivitet={'Behovsavklaring - avklart - situasjonsbestemt - går til aktivitetsplanen'}
+                />
+            </BodyLong>
+            <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - situasjonsbestemt i viewport" />
+        </Box>
+    );
+}
+
+export default BehovsavklaringAvklartSituasjonsbestemt;

src/komponenter/behovsavklaring-nytt-api/behovsavklaring-avklart-standard.tsx

@@ -0,0 +1,57 @@
+import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react';
+
+import { useSprakValg } from '../../contexts/sprak';
+
+import lagHentTekstForSprak from '../../lib/lag-hent-tekst-for-sprak';
+import ReadMoreVeileder from './readmore-veileder';
+import ErRendret from '../er-rendret/er-rendret';
+import InViewport from '../in-viewport/in-viewport';
+
+import spacingStyles from '../../spacing.module.css';
+
+import { AktivitetsplanLenke, GaaTilDialogKnapp } from './lenker';
+import useSkalBrukeTabs from '../../hooks/use-skal-bruke-tabs';
+
+const TEKSTER = {
+    nb: {
+        overskrift: 'Hjelp og støtte',
+        headingEnig: 'Du har gode muligheter til å komme i jobb uten en veileder eller tiltak fra NAV',
+        headingUenig: 'Du har sagt at du ønsker hjelp',
+        beskrivelseEnig: 'Du har ansvar for å aktivt lete etter jobber og å søke på relevante stillinger på egen hånd.',
+        hvaTenkerDu: 'Hva tenker du?',
+        klareDegSelv: 'Ønsker du å klare deg selv?',
+        behovForVeiledningLikevel: 'Gi beskjed i dialogen dersom du likevel har behov for veiledning.',
+    },
+    en: {
+        heading: 'Get in touch if you need help',
+        readMoreHeading: 'What kind of help can I get?',
+    },
+};
+
+function BehovsavklaringAvklartStandard() {
+    const sprak = useSprakValg().sprak;
+    const tekst = lagHentTekstForSprak(TEKSTER, sprak);
+    const skalVisesITabs = useSkalBrukeTabs();
+
+    return (
+        <Box>
+            <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - standard" />
+            {!skalVisesITabs && <Detail uppercase>{tekst('overskrift')}</Detail>}
+            <Heading className={spacingStyles.mb1} size="small">
+                {tekst('headingEnig')}
+            </Heading>
+            <BodyLong className={spacingStyles.mb1}>{tekst('beskrivelseEnig')}</BodyLong>
+            <BodyLong className={spacingStyles.blokkXs}>{tekst('behovForVeiledningLikevel')}</BodyLong>
+            <GaaTilDialogKnapp variant={'secondary'} />
+            <div className={spacingStyles.mt1}>
+                <ReadMoreVeileder />
+            </div>
+            <BodyLong className={spacingStyles.mt1}>
+                <AktivitetsplanLenke aktivitet={'Behovsavklaring - avklart - standard - går til aktivitetsplanen'} />
+            </BodyLong>
+            <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - standard i viewport" />
+        </Box>
+    );
+}
+
+export default BehovsavklaringAvklartStandard;

src/komponenter/behovsavklaring-nytt-api/behovsavklaring-avklart.tsx

@@ -0,0 +1,11 @@
+import BehovsavklaringAvklartSituasjonsbestemt from './behovsavklaring-avklart-situasjonsbestemt';
+import BehovsavklaringAvklartStandard from './behovsavklaring-avklart-standard';
+import { Servicegruppe, ServicegruppeOrNull } from '../../hooks/use-oppfolging-data';
+
+function BehovsavklaringAvklart({ servicegruppe }: { servicegruppe: ServicegruppeOrNull }) {
+    const erStandard = servicegruppe === Servicegruppe.IKVAL;
+
+    return erStandard ? <BehovsavklaringAvklartStandard /> : <BehovsavklaringAvklartSituasjonsbestemt />;
+}
+
+export default BehovsavklaringAvklart;

src/komponenter/behovsavklaring-nytt-api/behovsavklaring-ikke-svart-situasjonsbestemt.tsx

@@ -0,0 +1,110 @@
+import { BodyLong, BodyShort, Box, Button, Detail, Heading } from '@navikt/ds-react';
+
+import { useSprakValg } from '../../contexts/sprak';
+import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning';
+
+import lagHentTekstForSprak from '../../lib/lag-hent-tekst-for-sprak';
+import { loggAktivitet } from '../../metrics/metrics';
+import ReadMoreVeileder from './readmore-veileder';
+import ReadMoreVurdering from './readmore-vurdering';
+import ErRendret from '../er-rendret/er-rendret';
+import InViewport from '../in-viewport/in-viewport';
+
+import spacingStyles from '../../spacing.module.css';
+
+import { useState } from 'react';
+import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
+import useSkalBrukeTabs from '../../hooks/use-skal-bruke-tabs';
+import { ForeslattInnsatsgruppe } from '../../hooks/use-brukerregistrering-data';
+import { useProfilering } from '../../contexts/profilering';
+
+const TEKSTER = {
+    nb: {
+        overskrift: 'Hjelp og støtte',
+        heading: 'Ønsker du hjelp fra en veileder?',
+        beskrivelse: 'Vi tror du vil trenge hjelp fra en veileder for å nå ditt mål om arbeid.',
+        hvaTenkerDu: 'Hva tenker du?',
+        klareDegSelv: 'Ønsker du å få hjelp fra en veileder?',
+        readMoreHeading: 'Hva slags hjelp kan jeg få?',
+        behovOverskrift: 'Mitt behov for veiledning',
+        behovSvarEnig:
+            'Spørsmål: Ønsker du å få hjelp fra en veileder?\n\nMitt svar: Ja, jeg ønsker hjelp\n\nDette er en automatisk generert melding',
+        behovSvarUenig:
+            'Spørsmål: Ønsker du å få hjelp fra en veileder?\n\nMitt svar: Nei, jeg vil gjerne klare meg selv\n\nDette er en automatisk generert melding',
+    },
+    en: {
+        heading: 'Get in touch if you need help',
+        readMoreHeading: 'What kind of help can I get?',
+    },
+};
+
+function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() {
+    const { lagreBehovForVeiledning } = useBehovForVeiledning();
+    const { amplitudeData } = useAmplitudeData();
+    const sprak = useSprakValg().sprak;
+    const tekst = lagHentTekstForSprak(TEKSTER, sprak);
+    const [pendingRequest, settPendingRequest] = useState<ForeslattInnsatsgruppe | null>(null);
+    const brukTabsDemo = useSkalBrukeTabs();
+    const { profilering } = useProfilering();
+    const profileringId = profilering[0]?.profileringId;
+
+    async function onLagreBehovForVeiledning(behov: ForeslattInnsatsgruppe) {
+        settPendingRequest(behov);
+        try {
+            await lagreBehovForVeiledning({
+                oppfolging: behov,
+                overskrift: tekst('behovOverskrift'),
+                tekst: tekst(
+                    behov === ForeslattInnsatsgruppe.SITUASJONSBESTEMT_INNSATS ? 'behovSvarEnig' : 'behovSvarUenig',
+                ),
+                profileringId,
+            });
+            loggAktivitet({
+                ...amplitudeData,
+                aktivitet: `Velger ${behov} fra behovsavklaringkomponent - ikke svart - situasjonsbestemt`,
+            });
+        } finally {
+            settPendingRequest(null);
+        }
+    }
+
+    return (
+        <Box>
+            <ErRendret loggTekst="Rendrer behovsavklaringkomponent - ikke svart - situasjonsbestemt" />{' '}
+            {!brukTabsDemo && (
+                <Detail uppercase className={spacingStyles.mt1}>
+                    {tekst('overskrift')}
+                </Detail>
+            )}
+            <Heading className={spacingStyles.mb1} size="small">
+                {tekst('heading')}
+            </Heading>
+            <BodyLong className={`${spacingStyles.mb1}`}>{tekst('beskrivelse')}</BodyLong>
+            <BodyShort className={`${spacingStyles.mb1}`}>{tekst('hvaTenkerDu')}</BodyShort>
+            <BodyShort className={`${spacingStyles.mb1}`}>{tekst('klareDegSelv')}</BodyShort>
+            <Button
+                onClick={() => onLagreBehovForVeiledning(ForeslattInnsatsgruppe.SITUASJONSBESTEMT_INNSATS)}
+                disabled={pendingRequest !== null}
+                loading={pendingRequest === ForeslattInnsatsgruppe.SITUASJONSBESTEMT_INNSATS}
+            >
+                Ja, jeg ønsker hjelp
+            </Button>
+            <div className={spacingStyles.mb1}>
+                <Button
+                    onClick={() => onLagreBehovForVeiledning(ForeslattInnsatsgruppe.STANDARD_INNSATS)}
+                    disabled={pendingRequest !== null}
+                    loading={pendingRequest === ForeslattInnsatsgruppe.STANDARD_INNSATS}
+                    variant="secondary"
+                    className={`${spacingStyles.mt1}`}
+                >
+                    Nei, jeg vil gjerne klare meg selv
+                </Button>
+            </div>
+            <ReadMoreVeileder />
+            <ReadMoreVurdering />
+            <InViewport loggTekst="Viser behovsavklaringkomponent - ikke svart - situasjonsbestemt i viewport" />
+        </Box>
+    );
+}
+
+export default IkkeSvartPaaBehovsavklaringSituasjonsbestemt;