legg til kalenderavtale i widget

brukerapi-mock/notifikasjonMockMiddleware.js

@@ -150,15 +150,16 @@ const Notifikasjon = (navn) => {
         : {}
     ),
     ...(navn === 'Kalenderavtale' ? {
+          tekst: 'Dialogmøte Dolly',
           startTidspunkt: '2021-02-04T15:15:00',
-          sluttTidspunkt: null,
+          sluttTidspunkt: casual.boolean ? '2021-02-04T16:15:00' : null,
           lokasjon: {
             adresse: 'Thorvald Meyers gate 2B',
             postnummer: '0473',
             poststed: 'Oslo',
           },
-          avtaletilstand: 'ARBEIDSGIVER_VIL_AVLYSE',
-          digitalt: false,
+          digitalt: casual.boolean,
+          avtaletilstand: casual.random_element(['VENTER_SVAR_FRA_ARBEIDSGIVER', 'ARBEIDSGIVER_HAR_GODTATT', 'ARBEIDSGIVER_VIL_AVLYSE', 'ARBEIDSGIVER_VIL_ENDRE_TID_ELLER_STED', 'AVLYST']),
         }
         : {}
     ),
@@ -198,7 +199,7 @@ const mocks = () => ({
           lenke: '#',
           virksomhet: { navn: 'Gamle Fredikstad og Riksdalen regnskap' },
           tidslinje: [...new Array(casual.integer(0, 3))]
-            .map(_ => TidslinjeElement(casual.random_element(['OppgaveTidslinjeElement', 'BeskjedTidslinjeElement']))),
+            .map(_ => TidslinjeElement(casual.random_element(['OppgaveTidslinjeElement', 'BeskjedTidslinjeElement']))), // TODO: legg til kalenderavtale
           sisteStatus: {
             tekst: casual.random_element(['Mottatt', 'Under behandling', 'Utbetalt']),
             tidspunkt: casualDate().toISOString(),
@@ -220,6 +221,57 @@ const mocks = () => ({
   ISO8601DateTime: () => roundDate(5000).toISOString(),
   ISO8601Date: () => roundDate(5000).toISOString().slice(0, 10),
   Virksomhet: () => ({ navn: casual.catch_phrase }),
+  KalenderavtalerResultat: () => ({
+    avtaler: [
+      {
+        tekst: 'Dialogmøte Mikke',
+        startTidspunkt: '2021-02-04T15:15:00',
+        sluttTidspunkt: null,
+        lokasjon: {
+          adresse: 'Thorvald Meyers gate 2B',
+          postnummer: '0473',
+          poststed: 'Oslo',
+        },
+        avtaletilstand: 'ARBEIDSGIVER_VIL_AVLYSE',
+        digitalt: false,
+      },
+      {
+        tekst: 'Dialogmøte Minni',
+        startTidspunkt: '2021-02-04T15:15:00',
+        sluttTidspunkt: null,
+        avtaletilstand: 'ARBEIDSGIVER_HAR_GODTATT',
+        digitalt: true,
+        lokasjon: null,
+      },
+      {
+        tekst: 'Dialogmøte Dolly',
+        startTidspunkt: '2021-02-04T15:15:00',
+        sluttTidspunkt: '2021-02-04T16:15:00',
+        avtaletilstand: 'ARBEIDSGIVER_VIL_ENDRE_TID_ELLER_STED',
+        digitalt: false,
+        lokasjon: {
+          adresse: 'Thorvald Meyers gate 2B',
+          postnummer: '0473',
+          poststed: 'Oslo',
+        },
+      },
+      {
+        tekst: 'Dialogmøte Donald',
+        startTidspunkt: '2021-02-04T15:15:00',
+        sluttTidspunkt: null,
+        avtaletilstand: 'VENTER_SVAR_FRA_ARBEIDSGIVER',
+        lokasjon: null,
+        digitalt: false,
+      },
+      {
+        tekst: 'Dialogmøte Langbein',
+        startTidspunkt: '2021-02-04T15:15:00',
+        sluttTidspunkt: '2021-02-04T16:15:00',
+        avtaletilstand: 'AVLYST',
+        lokasjon: null,
+      },
+    ],
+  }),
 });
 
 const createApolloServer = ({ mocks: apolloServerOptionsMocks, ...apolloServerOptions } = {}) => {

brukerapi-mock/package.json

@@ -2,7 +2,7 @@
   "name": "@navikt/arbeidsgiver-notifikasjoner-brukerapi-mock",
   "description": "Mocker graphql-endepunkt for brukerapi. Nyttig for utvikling av @navikt/arbeidsgiver-notifikasjon-widget.",
   "repository": "github:navikt/arbeidsgiver-notifikasjon-widget",
-  "version": "6.4.2",
+  "version": "6.5.0-rc0",
   "license": "MIT",
   "main": "dist/notifikasjonMockMiddleware.js",
   "files": [

component/package.json

@@ -2,7 +2,7 @@
   "name": "@navikt/arbeidsgiver-notifikasjon-widget",
   "description": "React component for notifikasjoner for arbeidsgivere",
   "repository": "github:navikt/arbeidsgiver-notifikasjon-widget",
-  "version": "6.4.2",
+  "version": "6.5.0-rc0",
   "main": "./lib/cjs/index.js",
   "module": "./lib/esm/index.js",
   "types": "./lib/esm/lib/esm/index.d.ts",

component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/AvtaletilstandLinje.css

@@ -0,0 +1,7 @@
+
+.notifikasjon_AvtaletilstandLinje.notifikasjon_AvtaletilstandLinje {
+  width: fit-content;
+  --ac-tag-warning-bg: rgba(255, 236, 204, 1);
+  --ac-tag-neutral-bg: rgba(0, 0, 0, 0.05);
+  --ac-tag-success-bg: rgba(204, 241, 214, 1);
+}

component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/AvtaletilstandLinje.tsx

@@ -0,0 +1,55 @@
+import React, {FC} from 'react'
+import {Tag} from '@navikt/ds-react'
+import './AvtaletilstandLinje.css'
+import {KalenderavtaleTilstand, Notifikasjon} from '../../../api/graphql-types'
+
+export interface StatusLinjeProps {
+  notifikasjon: Notifikasjon
+}
+
+export const AvtaletilstandLinje: FC<StatusLinjeProps> = ({ notifikasjon }) => {
+  if (notifikasjon.__typename !== 'Kalenderavtale') {
+    return null
+  }
+
+  switch (notifikasjon.avtaletilstand) {
+    case KalenderavtaleTilstand.VenterSvarFraArbeidsgiver:
+      return (
+        <Tag size='small' className='notifikasjon_AvtaletilstandLinje' variant='warning'>
+          Svar på invitasjonen
+        </Tag>
+      )
+
+    case KalenderavtaleTilstand.ArbeidsgiverHarGodtatt:
+      return (
+        <Tag size='small' className='notifikasjon_AvtaletilstandLinje' variant='success'>
+          Du har takket ja
+        </Tag>
+      )
+
+    case KalenderavtaleTilstand.ArbeidsgiverVilEndreTidEllerSted:
+      return (
+        <Tag size='small' className='notifikasjon_AvtaletilstandLinje' variant='neutral'>
+          Du ønsker å endre tid eller sted
+        </Tag>
+      )
+
+    case KalenderavtaleTilstand.ArbeidsgiverVilAvlyse:
+      return (
+        <Tag size='small' className='notifikasjon_AvtaletilstandLinje' variant='neutral'>
+          Du ønsker å avlyse
+        </Tag>
+      )
+
+    case KalenderavtaleTilstand.Avlyst:
+      return (
+        <Tag size='small' className='notifikasjon_AvtaletilstandLinje' variant='info'>
+          Avlyst
+        </Tag>
+      )
+
+
+    default:
+      return null
+  }
+}

component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/Ikoner.tsx

@@ -11,12 +11,27 @@ const useId = () => useMemo(() => {
   }, []
 )
 
+// TODO: trenger ikon i riktig størrelse
+export const KalenderavtaleIkon = () => {
+  const id = useId()
+  return <svg width="30" height="30" viewBox="0 0 38 38" aria-labelledby={id} fill="none"
+              xmlns="http://www.w3.org/2000/svg" role="img">
+    <title id={id}>Kalenderavtale</title>
+    <rect width="30" height="30" rx="4" fill="#3380A5"/>
+    <path fillRule="evenodd" clipRule="evenodd"
+          d="M12 5.25C12.4142 5.25 12.75 5.58579 12.75 6V7.25H17.25V6C17.25 5.58579 17.5858 5.25 18 5.25C18.4142 5.25 18.75 5.58579 18.75 6V7.25H22.5C23.1904 7.25 23.75 7.80964 23.75 8.5V21.5C23.75 22.1904 23.1904 22.75 22.5 22.75H7.5C6.80964 22.75 6.25 22.1904 6.25 21.5V8.5C6.25 7.80964 6.80964 7.25 7.5 7.25H11.25V6C11.25 5.58579 11.5858 5.25 12 5.25ZM18.75 10C18.75 10.4142 18.4142 10.75 18 10.75C17.5858 10.75 17.25 10.4142 17.25 10V8.75H12.75V10C12.75 10.4142 12.4142 10.75 12 10.75C11.5858 10.75 11.25 10.4142 11.25 10V8.75H7.75V12.25H22.25V8.75H18.75V10ZM7.75 21.25V13.75H22.25V21.25H7.75ZM9.75 16C9.75 15.5858 10.0858 15.25 10.5 15.25H11.5C11.9142 15.25 12.25 15.5858 12.25 16C12.25 16.4142 11.9142 16.75 11.5 16.75H10.5C10.0858 16.75 9.75 16.4142 9.75 16ZM13.75 16C13.75 15.5858 14.0858 15.25 14.5 15.25H15.5C15.9142 15.25 16.25 15.5858 16.25 16C16.25 16.4142 15.9142 16.75 15.5 16.75H14.5C14.0858 16.75 13.75 16.4142 13.75 16ZM18.5 15.25C18.0858 15.25 17.75 15.5858 17.75 16C17.75 16.4142 18.0858 16.75 18.5 16.75H19.5C19.9142 16.75 20.25 16.4142 20.25 16C20.25 15.5858 19.9142 15.25 19.5 15.25H18.5ZM13.75 19C13.75 18.5858 14.0858 18.25 14.5 18.25H15.5C15.9142 18.25 16.25 18.5858 16.25 19C16.25 19.4142 15.9142 19.75 15.5 19.75H14.5C14.0858 19.75 13.75 19.4142 13.75 19ZM18.5 18.25C18.0858 18.25 17.75 18.5858 17.75 19C17.75 19.4142 18.0858 19.75 18.5 19.75H19.5C19.9142 19.75 20.25 19.4142 20.25 19C20.25 18.5858 19.9142 18.25 19.5 18.25H18.5ZM9.75 19C9.75 18.5858 10.0858 18.25 10.5 18.25H11.5C11.9142 18.25 12.25 18.5858 12.25 19C12.25 19.4142 11.9142 19.75 11.5 19.75H10.5C10.0858 19.75 9.75 19.4142 9.75 19Z"
+          fill="white"/>
+  </svg>
+
+}
 export const OppgaveIkon = () => {
   const id = useId()
-  return <svg width="38" height="38" viewBox="0 0 38 38" aria-labelledby={id} fill="none" xmlns="http://www.w3.org/2000/svg" role="img">
+  return <svg width="38" height="38" viewBox="0 0 38 38" aria-labelledby={id} fill="none"
+              xmlns="http://www.w3.org/2000/svg" role="img">
     <title id={id}>Oppgave</title>
     <rect width="38" height="38" rx="4" fill="#C77300"/>
-    <path fillRule="evenodd" clipRule="evenodd" d="M8.66699 7.66667C8.66699 6.74619 9.41318 6 10.3337 6H27.667C28.5875 6 29.3337 6.74619 29.3337 7.66667V30.3333C29.3337 31.2538 28.5875 32 27.667 32H10.3337C9.41318 32 8.66699 31.2538 8.66699 30.3333V7.66667ZM18.0003 24.3333C18.0003 23.781 18.448 23.3333 19.0003 23.3333H23.667C24.2193 23.3333 24.667 23.781 24.667 24.3333C24.667 24.8856 24.2193 25.3333 23.667 25.3333H19.0003C18.448 25.3333 18.0003 24.8856 18.0003 24.3333ZM19.0003 18C18.448 18 18.0003 18.4477 18.0003 19C18.0003 19.5523 18.448 20 19.0003 20H23.667C24.2193 20 24.667 19.5523 24.667 19C24.667 18.4477 24.2193 18 23.667 18H19.0003ZM15.0137 20H15.0003C14.448 20 14.0003 19.5523 14.0003 19C14.0003 18.4477 14.448 18 15.0003 18H15.0137C15.5659 18 16.0137 18.4477 16.0137 19C16.0137 19.5523 15.5659 20 15.0137 20ZM15.0003 23.3333C14.448 23.3333 14.0003 23.781 14.0003 24.3333C14.0003 24.8856 14.448 25.3333 15.0003 25.3333H15.0137C15.5659 25.3333 16.0137 24.8856 16.0137 24.3333C16.0137 23.781 15.5659 23.3333 15.0137 23.3333H15.0003ZM19.3337 12.3333C19.3337 11.781 19.7814 11.3333 20.3337 11.3333H23.667C24.2193 11.3333 24.667 11.781 24.667 12.3333C24.667 12.8856 24.2193 13.3333 23.667 13.3333H20.3337C19.7814 13.3333 19.3337 12.8856 19.3337 12.3333ZM17.8003 11.6001C18.1317 11.1582 18.0422 10.5314 17.6003 10.2001C17.1585 9.86869 16.5317 9.95823 16.2003 10.4001L14.8921 12.1443L14.3741 11.6263C13.9836 11.2358 13.3504 11.2358 12.9599 11.6263C12.5694 12.0168 12.5694 12.65 12.9599 13.0405L14.2932 14.3738C14.4982 14.5788 14.7821 14.6848 15.0712 14.6642C15.3604 14.6437 15.6264 14.4986 15.8003 14.2667L17.8003 11.6001Z" fill="white"/>
+    <path fillRule="evenodd" clipRule="evenodd"
+          d="M8.66699 7.66667C8.66699 6.74619 9.41318 6 10.3337 6H27.667C28.5875 6 29.3337 6.74619 29.3337 7.66667V30.3333C29.3337 31.2538 28.5875 32 27.667 32H10.3337C9.41318 32 8.66699 31.2538 8.66699 30.3333V7.66667ZM18.0003 24.3333C18.0003 23.781 18.448 23.3333 19.0003 23.3333H23.667C24.2193 23.3333 24.667 23.781 24.667 24.3333C24.667 24.8856 24.2193 25.3333 23.667 25.3333H19.0003C18.448 25.3333 18.0003 24.8856 18.0003 24.3333ZM19.0003 18C18.448 18 18.0003 18.4477 18.0003 19C18.0003 19.5523 18.448 20 19.0003 20H23.667C24.2193 20 24.667 19.5523 24.667 19C24.667 18.4477 24.2193 18 23.667 18H19.0003ZM15.0137 20H15.0003C14.448 20 14.0003 19.5523 14.0003 19C14.0003 18.4477 14.448 18 15.0003 18H15.0137C15.5659 18 16.0137 18.4477 16.0137 19C16.0137 19.5523 15.5659 20 15.0137 20ZM15.0003 23.3333C14.448 23.3333 14.0003 23.781 14.0003 24.3333C14.0003 24.8856 14.448 25.3333 15.0003 25.3333H15.0137C15.5659 25.3333 16.0137 24.8856 16.0137 24.3333C16.0137 23.781 15.5659 23.3333 15.0137 23.3333H15.0003ZM19.3337 12.3333C19.3337 11.781 19.7814 11.3333 20.3337 11.3333H23.667C24.2193 11.3333 24.667 11.781 24.667 12.3333C24.667 12.8856 24.2193 13.3333 23.667 13.3333H20.3337C19.7814 13.3333 19.3337 12.8856 19.3337 12.3333ZM17.8003 11.6001C18.1317 11.1582 18.0422 10.5314 17.6003 10.2001C17.1585 9.86869 16.5317 9.95823 16.2003 10.4001L14.8921 12.1443L14.3741 11.6263C13.9836 11.2358 13.3504 11.2358 12.9599 11.6263C12.5694 12.0168 12.5694 12.65 12.9599 13.0405L14.2932 14.3738C14.4982 14.5788 14.7821 14.6848 15.0712 14.6642C15.3604 14.6437 15.6264 14.4986 15.8003 14.2667L17.8003 11.6001Z" fill="white"/>
   </svg>
 
 }

component/src/NotifikasjonWidget/NotifikasjonPanel/NotifikasjonListeElement/NotifikasjonListeElement.tsx

@@ -2,11 +2,12 @@ import React from 'react'
 import { Next as HoyreChevron } from '@navikt/ds-icons'
 import { BodyShort, Detail } from '@navikt/ds-react'
 import { sendtDatotekst } from '../dato-funksjoner'
-import { Notifikasjon, OppgaveTilstand } from '../../../api/graphql-types'
+import {Kalenderavtale, Notifikasjon, OppgaveTilstand} from '../../../api/graphql-types'
 import { useAmplitude } from '../../../utils/amplitude'
 import { StatusLinje } from './StatusLinje'
 import './NotifikasjonListeElement.css'
-import { BeskjedIkon, OppgaveIkkeNyIkon, OppgaveIkon } from './Ikoner'
+import {BeskjedIkon, KalenderavtaleIkon, OppgaveIkkeNyIkon, OppgaveIkon} from './Ikoner'
+import {AvtaletilstandLinje} from "./AvtaletilstandLinje";
 
 interface Props {
   notifikasjon: Notifikasjon
@@ -37,6 +38,58 @@ export const NotifikasjonListeElement = (props: Props) => {
           <OppgaveIkkeNyIkon />
         )
 
+      break
+    case 'Kalenderavtale':
+      ikon = <KalenderavtaleIkon/>
+
+      break
+    default:
+      console.error(
+        // @ts-ignore
+        `ukjent notifikasjonstype ${props.notifikasjon.__typename}: ignorerer`
+      )
+      return null
+  }
+
+  let innhold
+  switch (props.notifikasjon.__typename) {
+    case 'Beskjed':
+      innhold = <>
+        <BodyShort size="small">
+          {notifikasjon.brukerKlikk?.klikketPaa ? (
+            notifikasjon.tekst
+          ) : (
+            <strong>{notifikasjon.tekst}</strong>
+          )}
+        </BodyShort>
+      </>
+      break
+    case 'Oppgave':
+      innhold = <>
+        <BodyShort size="small">
+          {notifikasjon.brukerKlikk?.klikketPaa ? (
+            notifikasjon.tekst
+          ) : (
+            <strong>{notifikasjon.tekst}</strong>
+          )}
+        </BodyShort>
+        <StatusLinje notifikasjon={notifikasjon} />
+      </>
+
+      break
+    case 'Kalenderavtale':
+      let kalenderavtaletekst = kalenderavtaleTekst(notifikasjon as Kalenderavtale)
+      innhold = <>
+        <BodyShort size="small">
+          {notifikasjon.brukerKlikk?.klikketPaa ? (
+            kalenderavtaletekst
+          ) : (
+            <strong>{kalenderavtaletekst}</strong>
+          )}
+        </BodyShort>
+        <AvtaletilstandLinje notifikasjon={notifikasjon} />
+      </>
+
       break
     default:
       console.error(
@@ -71,16 +124,7 @@ export const NotifikasjonListeElement = (props: Props) => {
     >
       <div className='notifikasjon_liste_element-lenkepanel'>
         <div className='notifikasjon_liste_element-lenkepanel-ikon'>{ikon}</div>
-        <div className='notifikasjon_liste_element-lenkepanel-innhold'>
-          <BodyShort size="small">
-            {notifikasjon.brukerKlikk?.klikketPaa ? (
-              notifikasjon.tekst
-            ) : (
-              <strong>{notifikasjon.tekst}</strong>
-            )}
-          </BodyShort>
-          <StatusLinje notifikasjon={notifikasjon} />
-        </div>
+        <div className='notifikasjon_liste_element-lenkepanel-innhold'>{innhold}</div>
         <div className='notifikasjon_liste_element-lenkepanel-chevron'>
           <HoyreChevron aria-hidden={true} />
         </div>
@@ -110,3 +154,24 @@ export const NotifikasjonListeElement = (props: Props) => {
     </a>
   )
 }
+
+const startTidspunktFormat = new Intl.DateTimeFormat('no', {
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+});
+
+const sluttTidsunktFormat = new Intl.DateTimeFormat('no', {
+  hour: 'numeric',
+  minute: 'numeric',
+});
+
+const kalenderavtaleTekst = (kalenderavtale: Kalenderavtale) => {
+  const startTidspunkt = new Date(kalenderavtale.startTidspunkt)
+  const sluttTidspunkt = kalenderavtale.sluttTidspunkt === undefined || kalenderavtale.sluttTidspunkt === null ? undefined : new Date(kalenderavtale.sluttTidspunkt)
+  const tidspunkt = `${startTidspunktFormat.format(startTidspunkt)} ${
+    sluttTidspunkt !== undefined ? `– ${sluttTidsunktFormat.format(sluttTidspunkt)}` : ''
+  }`
+  return `${kalenderavtale.tekst} ${tidspunkt}`
+}

component/src/api/graphql.tsx

@@ -72,20 +72,34 @@ export const HENT_NOTIFIKASJONER: TypedDocumentNode<Pick<Query, "notifikasjoner"
                   tittel
                 }
             }
-          ... on Kalenderavtale {
-            id
-            tekst
-            startTidspunkt
-            sluttTidspunkt
-            avtaletilstand
-            lokasjon {
-              adresse
-              postnummer
-              poststed
+            ... on Kalenderavtale {
+              brukerKlikk {
+                id
+                klikketPaa
+              }
+              virksomhet {
+                navn
+                virksomhetsnummer
+              }
+              lenke
+              tekst
+              merkelapp
+              opprettetTidspunkt
+              sorteringTidspunkt
+              startTidspunkt
+              sluttTidspunkt
+              lokasjon {
+                adresse
+                postnummer
+                poststed
+              }
+              digitalt
+              avtaletilstand
+              id
+              sak {
+                tittel
+              }
             }
-            digitalt
-            lenke
-          }
         }
     }
   }