Amplitude: Rettet og refaktorert logging for alle Accordion-typer (#2007)

* Amplitude: Rettet og refaktorert logging for alle Accordion-typer

Author: PerOlavM

src/components/_common/accordion/Accordion.tsx

@@ -26,15 +26,16 @@ export const Accordion = ({ accordion }: AccordionProps) => {
 
     useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll });
 
-    const openChangeHandler = (isOpening: boolean, title: string, index: number) => {
+    const openChangeHandler = (isOpening: boolean, tittel: string, index: number) => {
         if (isOpening) {
             setOpenAccordions([...openAccordions, index]);
         } else {
             setOpenAccordions(openAccordions.filter((i) => i !== index));
         }
         logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
-            tittel: title,
+            tittel,
             opprinnelse: 'trekkspill',
+            komponent: 'Accordion',
         });
     };
 

src/components/_common/expandable/Expandable.tsx

@@ -38,12 +38,13 @@ export const Expandable = ({
         },
     });
 
-    const toggleExpandCollapse = () => {
-        logAmplitudeEvent(isOpen ? AnalyticsEvents.ACC_COLLAPSE : AnalyticsEvents.ACC_EXPAND, {
-            tittel: title,
+    const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
+        setIsOpen(isOpening);
+        logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
+            tittel,
             opprinnelse: analyticsOriginTag,
+            komponent: 'Expandable',
         });
-        setIsOpen(!isOpen);
     };
 
     const checkAndOpenPanel = () => {
@@ -113,7 +114,7 @@ export const Expandable = ({
             id={anchorId}
             className={classNames(className, style.expandable, isLegacyUsage && style.legacy)}
             ref={accordionRef}
-            onToggle={toggleExpandCollapse}
+            onToggle={(isOpen) => toggleExpandCollapse(isOpen, title)}
             open={isOpen}
             aria-label={ariaLabel || title}
         >

src/components/_common/productPanelExpandable/ProductPanelExpandable.tsx

@@ -63,23 +63,29 @@ export const ProductPanelExpandable = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    const handleClick = () => {
-        logAmplitudeEvent(isOpen ? AnalyticsEvents.ACC_COLLAPSE : AnalyticsEvents.ACC_EXPAND, {
-            tittel: header,
+    const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
+        setIsOpen(isOpening);
+        contentLoaderCallback?.();
+        logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
+            tittel,
+            opprinnelse: 'produktdetalj',
+            komponent: 'ProductPanelExpandable',
             ...analyticsData,
         });
-
-        setIsOpen(!isOpen);
-        contentLoaderCallback?.();
     };
 
     return (
-        <ExpansionCard open={isOpen} className={style.expandable} id={anchorId} aria-label={header}>
+        <ExpansionCard
+            className={style.expandable}
+            id={anchorId}
+            open={isOpen}
+            onToggle={(isOpen) => toggleExpandCollapse(isOpen, header)}
+            aria-label={header}
+        >
             <ExpansionCard.Header
-                onClick={handleClick}
+                className={style.expandableHeader}
                 onMouseOver={contentLoaderCallback}
                 onFocus={contentLoaderCallback}
-                className={style.expandableHeader}
             >
                 <IllustrationStatic className={style.illustration} illustration={illustration} />
                 <span className={style.panelHeader}>

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}

src/components/parts/read-more/ReadMorePart.tsx

@@ -27,11 +27,12 @@ export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>)
         return <EditorHelp text={'Legg inn tittel og beskrivelse for "les mer".'} type={'error'} />;
     }
 
-    const openChangeHandler = (isOpen: boolean, _title: string) => {
-        setIsOpen(isOpen);
-        logAmplitudeEvent(isOpen ? AnalyticsEvents.ACC_COLLAPSE : AnalyticsEvents.ACC_EXPAND, {
-            tittel: _title,
+    const openChangeHandler = (isOpening: boolean, tittel: string) => {
+        setIsOpen(isOpening);
+        logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, {
+            tittel,
             opprinnelse: 'lesmer',
+            komponent: 'ReadMore',
         });
     };