IS-2828: Add amplitude logging for sok

src/components/sokperson/SokPerson.tsx

@@ -16,6 +16,7 @@ import SokPersonResultat from '@/components/sokperson/SokPersonResultat';
 import { MagnifyingGlassIcon } from '@navikt/aksel-icons';
 import { isNumeric, removePunctuation } from '@/utils/stringUtil';
 import { parseDateString } from '@/utils/dateUtils';
+import * as Amplitude from '@/utils/amplitude';
 
 const texts = {
   header: 'Søk etter sykmeldt',
@@ -28,6 +29,27 @@ const texts = {
   error: 'Noe gikk galt under søket. Vennligst prøv igjen.',
 };
 
+function logSokPersonEvent() {
+  Amplitude.logEvent({
+    type: Amplitude.EventType.ButtonClick,
+    data: {
+      url: window.location.href,
+      tekst: 'Søk etter sykmeldt',
+    },
+  });
+}
+
+function logSokPersonResults(amount: number) {
+  Amplitude.logEvent({
+    type: Amplitude.EventType.AmountDisplayed,
+    data: {
+      url: window.location.href,
+      antall: amount,
+      handling: 'Søk etter sykmeldt - resultater',
+    },
+  });
+}
+
 export default function SokPerson() {
   const [nameInitials, setNameInitials] = useState<string>('');
   const [birthdate, setBirthdate] = useState<string>('');
@@ -61,7 +83,10 @@ export default function SokPerson() {
         initials: nameInitials.toLowerCase(),
         birthdate: parsedBirthdate,
       };
-      mutate(requestDTO);
+      mutate(requestDTO, {
+        onSuccess: (data) => logSokPersonResults(data.length),
+        onSettled: () => logSokPersonEvent(),
+      });
     } else {
       setIsFormError(true);
     }

src/utils/amplitude.ts

@@ -11,6 +11,7 @@ export enum EventType {
   OptionSelected = 'alternativ valgt',
   ButtonClick = 'knapp trykket',
   SortingColumn = 'kolonne sortert på',
+  AmountDisplayed = 'antall vist',
 }
 
 type EventPageView = {
@@ -56,12 +57,22 @@ type EventSortingColumn = {
   };
 };
 
+type EventAmountDisplayed = {
+  type: EventType.AmountDisplayed;
+  data: {
+    url: string;
+    antall: number;
+    handling: string;
+  };
+};
+
 type Event =
   | EventPageView
   | Navigation
   | OptionSelected
   | EventButtonClick
-  | EventSortingColumn;
+  | EventSortingColumn
+  | EventAmountDisplayed;
 
 export const logEvent = (event: Event) =>
   amplitude.track(event.type, { ...event.data });