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 handleClick = (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) => handleClick(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/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',
         });
     };