IS-3017: log error message søk

navikt · Jan 29, 2025 · c719c8d · c719c8d
1 parent 05cdbf2
commit c719c8d
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 89 deletions.
diff --git a/src/sider/sokperson/SokPerson.tsx b/src/sider/sokperson/SokPerson.tsx
@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
 import {
   Alert,
-  BodyLong,
+  BodyShort,
   Box,
   Button,
   ErrorMessage,
   Heading,
-  HelpText,
-  Label,
+  HStack,
   TextField,
   VStack,
 } from '@navikt/ds-react';
@@ -21,37 +20,8 @@ import * as Amplitude from '@/utils/amplitude';
 
 const texts = {
   header: 'Søk etter sykmeldt',
-  info: 'Her kan du søke for å finne brukere med aktivt sykefravær.',
-  label: {
-    initials: 'Initialer (valgfri)',
-    birthdate: 'Fødselsdato (obligatorisk)',
-  },
-  helpText: {
-    info: {
-      title: 'Hvordan søke etter sykmeldt?',
-      p1:
-        'Fyll inn fødselsdato for å finne en sykmeldt du har tilgang til, vedkommende må ha et aktivt sykefravær. ',
-      p2:
-        'Ønsker man et mer nøyaktig søk kan man legge til initialer til den sykmeldte, men dette er valgfritt. Det er ikke mulig å søke på initialer uten å skrive inn fødselsdato. Dette er for å minimere risiko for feil søkeresultat, og at du finner akkurat den personen du er på leting etter.',
-    },
-    initials: {
-      title: 'Hvordan fyller jeg inn initialer?',
-      text:
-        'Her kan du fylle inn initialene til den du vil søke opp. Feltet krever forbokstaven for fornavn og etternavn uten punktum mellom bokstavene. Det er mulig å legge til forbokstavene for mellomnavn for mer nøyaktig søkeresultat. ',
-    },
-    birthdate: {
-      title: 'Hvordan fyller jeg inn fødselsdato?',
-      text: (
-        <>
-          Her kan du fylle inn fødselsdato til den du vil søke opp. For å kunne
-          søke må sifrene fylles inn på formatet:
-          <strong> dag, måned, år</strong>, i den rekkefølgen. Ønsker man et mer
-          nøyaktig søk kan man legge til initialer til den sykmeldte i initial
-          feltet.
-        </>
-      ),
-    },
-  },
+  info:
+    'Her kan du søke opp sykmeldte personer basert på initialer og fødselsdato.',
   validation: {
     initials: 'Vennligst angi gyldige initialer',
     birthdate: 'Vennligst angi en gyldig fødselsdato',
@@ -85,28 +55,69 @@ function logSokPersonResults(amount: number, requestDTO: SokDTO) {
   });
 }
 
-function InitialerLabel() {
-  return (
-    <div className="flex gap-2">
-      {texts.label.initials}
-      <HelpText title={texts.helpText.initials.title}>
-        <Label>{texts.helpText.initials.title}</Label>
-        <BodyLong>{texts.helpText.initials.text}</BodyLong>
-      </HelpText>
-    </div>
-  );
+interface LogSokPersonErrorProps {
+  birthdate: string;
+  isValidBirthdate: boolean;
+  isInvalidBirthdate: boolean;
+  initials: string;
+  isValidInitials: boolean;
+  isInvalidInitials: boolean;
+  isError: boolean;
 }
 
-function FodselsdatoLabel() {
-  return (
-    <div className="flex gap-2">
-      {texts.label.birthdate}
-      <HelpText title={texts.helpText.birthdate.title}>
-        <Label>{texts.helpText.birthdate.title}</Label>
-        <BodyLong>{texts.helpText.birthdate.text}</BodyLong>
-      </HelpText>
-    </div>
-  );
+function logSokPersonError({
+  birthdate,
+  isValidBirthdate,
+  isInvalidBirthdate,
+  initials,
+  isValidInitials,
+  isInvalidInitials,
+  isError,
+}: LogSokPersonErrorProps) {
+  Amplitude.logEvent({
+    type: Amplitude.EventType.ErrorMessageShowed,
+    data: {
+      url: window.location.href,
+      handling: 'Søk etter sykmeldt - feilmeldinger',
+      feilmelding:
+        'Fødselsdato: ' +
+        getValidationMessage({
+          isEmpty: !!birthdate,
+          isValid: isValidBirthdate,
+          isInvalid: isInvalidBirthdate,
+        }) +
+        'Initialer: ' +
+        getValidationMessage({
+          isEmpty: !!initials,
+          isValid: isValidInitials,
+          isInvalid: isInvalidInitials,
+        }) +
+        (isError ? 'Feil ved søk' : ''),
+    },
+  });
+}
+
+interface ValidationArgs {
+  isEmpty: boolean;
+  isValid: boolean;
+  isInvalid: boolean;
+}
+
+function getValidationMessage({
+  isEmpty,
+  isValid,
+  isInvalid,
+}: ValidationArgs): string {
+  if (isEmpty) {
+    return 'ingen innhold';
+  }
+  if (isValid) {
+    return 'gyldig innhold';
+  }
+  if (isInvalid) {
+    return 'ugyldig innhold';
+  }
+  return '';
 }
 
 export default function SokPerson() {
@@ -132,7 +143,7 @@ export default function SokPerson() {
   };
 
   const isValidInitials = (initials: string): boolean => {
-    return initials === '' || (initials.length <= 4 && initials.length > 1);
+    return initials === '' || (initials.length <= 3 && initials.length > 1);
   };
 
   const handleSubmit = () => {
@@ -148,6 +159,15 @@ export default function SokPerson() {
       });
     } else {
       setIsFormError(true);
+      logSokPersonError({
+        birthdate: birthdate,
+        isValidBirthdate: !!parsedBirthdate,
+        isInvalidBirthdate: isInvalidBirthdate,
+        initials: initials,
+        isValidInitials: isValidInitials(initials),
+        isInvalidInitials: isInvalidInitials,
+        isError: isError,
+      });
     }
   };
 
@@ -163,54 +183,46 @@ export default function SokPerson() {
             handleSubmit();
           }}
         >
-          <div className="flex gap-2 items-center">
-            <Heading level="2" size="medium">
-              {texts.header}
-            </Heading>
-            <HelpText title={texts.helpText.info.title}>
-              <Label>{texts.helpText.info.title}</Label>
-              <BodyLong>{texts.helpText.info.p1}</BodyLong>
-              <BodyLong className="pt-2">{texts.helpText.info.p2}</BodyLong>
-            </HelpText>
-          </div>
+          <Heading level="2" size="medium">
+            {texts.header}
+          </Heading>
           <VStack gap="4">
-            <BodyLong>{texts.info}</BodyLong>
-            <div className="grid grid-cols-[auto,auto,auto] gap-x-8 gap-y-2 align-end max-w-max">
+            <BodyShort>{texts.info}</BodyShort>
+            <HStack gap="8" align="end">
+              <TextField
+                label="Initialer"
+                description="AB"
+                htmlSize={10}
+                type="text"
+                onChange={(e) => setInitials(e.target.value)}
+                error={isFormError && !isValidInitials(initials)}
+              />
               <TextField
-                label={<FodselsdatoLabel />}
+                label="Fødselsdato"
                 description="ddmmåå"
                 htmlSize={14}
                 type="text"
                 onChange={(e) => setBirthdate(e.target.value)}
                 error={isInvalidBirthdate}
               />
-              <TextField
-                label={<InitialerLabel />}
-                description="eks: AB"
-                htmlSize={10}
-                type="text"
-                onChange={(e) => setInitials(e.target.value)}
-                error={isFormError && !isValidInitials(initials)}
-              />
               <Button
                 loading={isLoading}
                 icon={<MagnifyingGlassIcon />}
                 type="submit"
-                className="self-end max-w-max"
               >
                 Søk
               </Button>
-              {isInvalidBirthdate && (
-                <ErrorMessage size="small">
-                  {texts.validation.birthdate}
-                </ErrorMessage>
-              )}
-              {isInvalidInitials && (
-                <ErrorMessage size="small" className="col-start-2 col-end-4">
-                  {texts.validation.initials}
-                </ErrorMessage>
-              )}
-            </div>
+            </HStack>
+            {isInvalidInitials && (
+              <ErrorMessage size="small">
+                {texts.validation.initials}
+              </ErrorMessage>
+            )}
+            {isInvalidBirthdate && (
+              <ErrorMessage size="small">
+                {texts.validation.birthdate}
+              </ErrorMessage>
+            )}
             {isError && (
               <Alert variant="error" size="small">
                 {texts.error}

diff --git a/src/utils/amplitude.ts b/src/utils/amplitude.ts
@@ -12,6 +12,7 @@ export enum EventType {
   ButtonClick = 'knapp trykket',
   SortingColumn = 'kolonne sortert på',
   AmountDisplayed = 'antall vist',
+  ErrorMessageShowed = 'feilmelding vist',
 }
 
 type EventPageView = {
@@ -66,13 +67,23 @@ type EventAmountDisplayed = {
   };
 };
 
+type ErrorMessageShowed = {
+  type: EventType.ErrorMessageShowed;
+  data: {
+    url: string;
+    handling: string;
+    feilmelding: string;
+  };
+};
+
 type Event =
   | EventPageView
   | Navigation
   | OptionSelected
   | EventButtonClick
   | EventSortingColumn
-  | EventAmountDisplayed;
+  | EventAmountDisplayed
+  | ErrorMessageShowed;
 
 export const logEvent = (event: Event) =>
   amplitude.track(event.type, { ...event.data });