Amplitude: Rettet og refaktorert logging for alle Accordion-typer

Author: PerOlavM

src/components/_common/productPanelExpandable/ProductPanelExpandable.tsx

@@ -63,7 +63,7 @@ export const ProductPanelExpandable = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const handleClick = (isOpening: boolean, tittel: string) => {
+    const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
         setIsOpen(isOpening);
         contentLoaderCallback?.();
         logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
@@ -79,7 +79,7 @@ export const ProductPanelExpandable = ({
             className={style.expandable}
             id={anchorId}
             open={isOpen}
-            onToggle={(isOpen) => handleClick(isOpen, header)}
+            onToggle={(isOpen) => toggleExpandCollapse(isOpen, header)}
             aria-label={header}
         >
             <ExpansionCard.Header

src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx

@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import { ExpansionCard, BodyShort, Heading } from '@navikt/ds-react';
 import { usePageContentProps } from 'store/pageContext';
 import { translator } from 'translations';
+import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude';
 import { OfficeDetailsData } from 'types/content-props/office-details-props';
 import { officeDetailsFormatAddress } from 'components/pages/office-page/office-details/utils';
 
@@ -11,17 +13,31 @@ export interface OfficeInformationProps {
 }
 
 export const OfficeInformation = ({ officeData }: OfficeInformationProps) => {
+    const [isOpen, setIsOpen] = useState(false);
     const { language } = usePageContentProps();
     const getOfficeTranslations = translator('office', language);
-
     const title = getOfficeTranslations('officeInformation');
     const { postadresse, beliggenhet, organisasjonsnummer, enhetNr } = officeData;
-
     const visitingAddress = officeDetailsFormatAddress(beliggenhet, true);
     const postalAddress = officeDetailsFormatAddress(postadresse, true);
 
+    const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
+        setIsOpen(isOpening);
+        logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
+            tittel,
+            opprinnelse: 'kontorinformasjon',
+            komponent: 'OfficeInformation',
+        });
+    };
+
     return (
-        <ExpansionCard aria-label={title} className={styles.officeInformation} size="small">
+        <ExpansionCard
+            size="small"
+            aria-label={title}
+            className={styles.officeInformation}
+            onToggle={(isOpen) => toggleExpandCollapse(isOpen, title)}
+            open={isOpen}
+        >
             <ExpansionCard.Header className={styles.expansionCardHeader}>
                 <ExpansionCard.Title as="h2" size="small">
                     {title}