diff --git a/src/components/_common/accordion/Accordion.tsx b/src/components/_common/accordion/Accordion.tsx index bc624538e..62f6076df 100644 --- a/src/components/_common/accordion/Accordion.tsx +++ b/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', }); }; diff --git a/src/components/_common/expandable/Expandable.tsx b/src/components/_common/expandable/Expandable.tsx index 587cd56a0..f087df119 100644 --- a/src/components/_common/expandable/Expandable.tsx +++ b/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} > diff --git a/src/components/_common/productPanelExpandable/ProductPanelExpandable.tsx b/src/components/_common/productPanelExpandable/ProductPanelExpandable.tsx index be92502a0..9c1e55452 100644 --- a/src/components/_common/productPanelExpandable/ProductPanelExpandable.tsx +++ b/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 ( - + toggleExpandCollapse(isOpen, header)} + aria-label={header} + > diff --git a/src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx b/src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx index 2ca70dd03..68a5f33b2 100644 --- a/src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx +++ b/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 ( - + toggleExpandCollapse(isOpen, title)} + open={isOpen} + > {title} diff --git a/src/components/parts/read-more/ReadMorePart.tsx b/src/components/parts/read-more/ReadMorePart.tsx index 3f6a9b782..48b9162e4 100644 --- a/src/components/parts/read-more/ReadMorePart.tsx +++ b/src/components/parts/read-more/ReadMorePart.tsx @@ -27,11 +27,12 @@ export const ReadMorePart = ({ config }: PartComponentProps) return ; } - 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', }); };