diff --git a/next-env.d.ts b/next-env.d.ts index a4a7b3f5c..4f11a03dc 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/_common/accordion/Accordion.tsx b/src/components/_common/accordion/Accordion.tsx index 492b4bcd2..8d0615f9b 100644 --- a/src/components/_common/accordion/Accordion.tsx +++ b/src/components/_common/accordion/Accordion.tsx @@ -4,6 +4,8 @@ import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; import { Shortcuts, useShortcuts } from 'utils/useShortcuts'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp'; import { PartConfigAccordion } from 'components/parts/accordion/AccordionPart'; import { classNames } from 'utils/classnames'; @@ -17,14 +19,13 @@ type PanelItem = AccordionProps['accordion'][number]; export const Accordion = ({ accordion }: AccordionProps) => { const itemRefs = useRef<(HTMLDivElement | null)[]>([]); - - const { editorView } = usePageContentProps(); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const { editorView, type } = contentProps; const [openAccordions, setOpenAccordions] = useState([]); - const expandAll = () => { setOpenAccordions(accordion.map((_, index) => index)); }; - const validatePanel = (item: PanelItem) => !!(item.title && item.html); useShortcuts({ shortcut: Shortcuts.SEARCH, callback: expandAll }); @@ -41,6 +42,8 @@ export const Accordion = ({ accordion }: AccordionProps) => { tittel, opprinnelse: 'trekkspill', komponent: 'Accordion', + målgruppe: context, + innholdstype: innholdsTypeMap[type], }); }; diff --git a/src/components/_common/card/useCard.tsx b/src/components/_common/card/useCard.tsx index b18b400f4..399dacfd2 100644 --- a/src/components/_common/card/useCard.tsx +++ b/src/components/_common/card/useCard.tsx @@ -7,6 +7,8 @@ import { LinkProps } from 'types/link-props'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; import { usePublicUrl } from 'utils/usePublicUrl'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; type AnalyticsProps = { analyticsLinkGroup?: string; @@ -36,10 +38,10 @@ type UseCardSettings = { export const useCard = ({ link, size, type }: UseCardSettings): UseCardState => { const router = useRouter(); - const { editorView } = usePageContentProps(); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const { editorView } = contentProps; const { layoutConfig } = useLayoutConfig(); - const { url, canRouteClientSide } = usePublicUrl(link.url); const getComponentAnalyticsName = (type: CardType, size: CardSize) => { @@ -64,6 +66,8 @@ export const useCard = ({ link, size, type }: UseCardSettings): UseCardState => seksjon: layoutConfig.title, destinasjon: link.url, lenketekst: link.text, + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }; const handleUserEvent = (e: React.MouseEvent | React.TouchEvent): void => { diff --git a/src/components/_common/copyLink/copyLink.tsx b/src/components/_common/copyLink/copyLink.tsx index 34f01303f..d51a3c9d1 100644 --- a/src/components/_common/copyLink/copyLink.tsx +++ b/src/components/_common/copyLink/copyLink.tsx @@ -2,8 +2,10 @@ import React, { useState } from 'react'; import { LinkIcon } from '@navikt/aksel-icons'; import { translator } from 'translations'; import { classNames } from 'utils/classnames'; -import { usePageContentProps } from 'store/pageContext'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { useLayoutConfig } from 'components/layouts/useLayoutConfig'; import style from './copyLink.module.scss'; @@ -19,7 +21,9 @@ const linkCopiedDisplayTimeMs = 2500; export const CopyLink = ({ anchor, heading, className, showLabel = true }: CopyLinkProps) => { const [showCopyTooltip, setShowCopyTooltip] = useState(false); - const { language } = usePageContentProps(); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const { language, type } = contentProps; const { layoutConfig } = useLayoutConfig(); const getLabel = translator('header', language); @@ -38,7 +42,9 @@ export const CopyLink = ({ anchor, heading, className, showLabel = true }: CopyL setTimeout(() => setShowCopyTooltip(false), linkCopiedDisplayTimeMs); } logAmplitudeEvent(AnalyticsEvents.COPY_LINK, { + målgruppe: context, seksjon: layoutConfig.title, + innholdstype: innholdsTypeMap[type], }); } }; diff --git a/src/components/_common/expandable/Expandable.tsx b/src/components/_common/expandable/Expandable.tsx index 3634a8dc6..ffa792307 100644 --- a/src/components/_common/expandable/Expandable.tsx +++ b/src/components/_common/expandable/Expandable.tsx @@ -2,6 +2,9 @@ import React, { useEffect, useRef, useState } from 'react'; import { ExpansionCard } from '@navikt/ds-react'; import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { classNames } from 'utils/classnames'; import { smoothScrollToTarget, handleStickyScrollOffset } from 'utils/scroll-to'; import { Shortcuts, useShortcuts } from 'utils/useShortcuts'; @@ -32,6 +35,8 @@ export const Expandable = ({ }: Props) => { const [isOpen, setIsOpen] = useState(isOpenDefault ?? false); const accordionRef = useRef(null); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); useShortcuts({ shortcut: Shortcuts.SEARCH, @@ -48,6 +53,8 @@ export const Expandable = ({ tittel, opprinnelse: analyticsOriginTag || 'utvidbar tekst', komponent: 'Expandable', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); }; diff --git a/src/components/_common/filter-bar/FilterBar.tsx b/src/components/_common/filter-bar/FilterBar.tsx index e3a411dcf..deefadce7 100644 --- a/src/components/_common/filter-bar/FilterBar.tsx +++ b/src/components/_common/filter-bar/FilterBar.tsx @@ -4,6 +4,8 @@ import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; import { translator } from 'translations'; import { useFilterState } from 'store/hooks/useFilteredContent'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { FilterCheckbox } from 'components/parts/filters-menu/FilterCheckbox'; import { SectionWithHeaderProps } from 'types/component-props/layouts/section-with-header'; import { useScrollPosition } from 'utils/useStickyScroll'; @@ -24,19 +26,15 @@ type Props = { /** @deprecated */ export const FilterBar = ({ layoutProps }: Props) => { const filterBarRef = useRef(null); - - const { language } = usePageContentProps(); - const getLabel = translator('filteredContent', language); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const getLabel = translator('filteredContent', contentProps.language); const { selectedFilters, availableFilters, toggleFilter } = useFilterState(); - const { saveScrollPosition, scrollBackToElement } = useScrollPosition(filterBarRef.current); - const [filtersToDisplay, setFiltersToDisplay] = useState([]); useEffect(() => { const { content, intro } = layoutProps.regions; - const components = [ ...(content ? content.components : []), ...(intro ? intro.components : []), @@ -92,6 +90,8 @@ export const FilterBar = ({ layoutProps }: Props) => { filternavn: filter.filterName, opprinnelse: 'innholdtekst', komponent: 'FilterBar', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); saveScrollPosition(); toggleFilter(filter.id); diff --git a/src/components/_common/lenke/lenkeBase/LenkeBase.tsx b/src/components/_common/lenke/lenkeBase/LenkeBase.tsx index 2abfd7be8..9514fd2e9 100644 --- a/src/components/_common/lenke/lenkeBase/LenkeBase.tsx +++ b/src/components/_common/lenke/lenkeBase/LenkeBase.tsx @@ -6,6 +6,8 @@ import { onlyText } from 'utils/react-children'; import { useLayoutConfig } from 'components/layouts/useLayoutConfig'; import { usePublicUrl } from 'utils/usePublicUrl'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import style from 'components/_common/lenke/lenkeBase/LenkeBase.module.scss'; @@ -46,9 +48,10 @@ export const LenkeBase = ({ children, ...rest }: Props) => { - const { editorView } = usePageContentProps(); + const contentProps = usePageContentProps(); + const { editorView } = contentProps; + const { context } = getDecoratorParams(contentProps); const { layoutConfig } = useLayoutConfig(); - const { url, canRouteClientSide } = usePublicUrl(href); const analyticsData = { komponent: analyticsComponent, @@ -56,6 +59,8 @@ export const LenkeBase = ({ seksjon: analyticsLinkGroup || layoutConfig.title, destinasjon: url, lenketekst: analyticsLabel || onlyText(children), + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }; const WrapperComponent = diff --git a/src/components/_common/overview-filters/OverviewFilters.tsx b/src/components/_common/overview-filters/OverviewFilters.tsx index f4e7968dd..571916b74 100644 --- a/src/components/_common/overview-filters/OverviewFilters.tsx +++ b/src/components/_common/overview-filters/OverviewFilters.tsx @@ -7,8 +7,10 @@ import { OverviewTextFilter } from 'components/_common/overview-filters/text-fil import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters'; import { classNames } from 'utils/classnames'; import { translator } from 'translations'; -import { usePageContentProps } from 'store/pageContext'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import style from './OverviewFilters.module.scss'; @@ -18,16 +20,14 @@ const MobileView = ({ showAreaFilter, showTaxonomyFilter, }: Props) => { - const { language } = usePageContentProps(); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); const [isOpen, setIsOpen] = useState(false); const filtersRef = useRef(null); - const hasToggleFilters = showAreaFilter || showTaxonomyFilter; - const searchLabel = translator( 'overview', - language + contentProps.language )(hasToggleFilters ? 'filterOrSearch' : 'search'); return ( @@ -53,6 +53,8 @@ const MobileView = ({ kategori: 'mobile-toggle', opprinnelse: 'oversiktsside filter mobil', komponent: 'MobileView', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); }} className={style.mobileFilterButton} diff --git a/src/components/_common/overview-filters/area-filter/OverviewAreaFilter.tsx b/src/components/_common/overview-filters/area-filter/OverviewAreaFilter.tsx index 7ca9ecca9..ca98601c0 100644 --- a/src/components/_common/overview-filters/area-filter/OverviewAreaFilter.tsx +++ b/src/components/_common/overview-filters/area-filter/OverviewAreaFilter.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { Area } from 'types/areas'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { OverviewFilterBase } from 'components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase'; import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters'; @@ -37,13 +40,16 @@ type Props = { export const OverviewAreaFilter = ({ items }: Props) => { const { areaFilter, setAreaFilter } = useOverviewFilters(); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); const handleFilterUpdate = (area: Area) => { logAmplitudeEvent(AnalyticsEvents.FILTER, { kategori: 'område', filternavn: analyticsAreas[area], opprinnelse: 'oversiktsside områder', komponent: 'OverviewAreaFilter', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); setAreaFilter(area); }; diff --git a/src/components/_common/overview-filters/taxonomy-filter/OverviewTaxonomyFilter.tsx b/src/components/_common/overview-filters/taxonomy-filter/OverviewTaxonomyFilter.tsx index 4928e9f4a..276132d91 100644 --- a/src/components/_common/overview-filters/taxonomy-filter/OverviewTaxonomyFilter.tsx +++ b/src/components/_common/overview-filters/taxonomy-filter/OverviewTaxonomyFilter.tsx @@ -1,6 +1,9 @@ import React from 'react'; import { ProductTaxonomy } from 'types/taxonomies'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { OverviewFilterBase } from 'components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase'; import { OverviewFilterableItem, useOverviewFilters } from 'store/hooks/useOverviewFilters'; @@ -35,6 +38,8 @@ type Props = { export const OverviewTaxonomyFilter = ({ items }: Props) => { const { taxonomyFilter, setTaxonomyFilter } = useOverviewFilters(); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); const handleFilterUpdate = (taxonomy: ProductTaxonomy) => { logAmplitudeEvent(AnalyticsEvents.FILTER, { @@ -42,6 +47,8 @@ export const OverviewTaxonomyFilter = ({ items }: Props) => { filternavn: analyticsTaxonomi[taxonomy], opprinnelse: 'oversiktsside typer', komponent: 'OverviewTaxonomyFilter', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); setTaxonomyFilter(taxonomy); }; diff --git a/src/components/_common/overview-filters/text-filter/OverviewTextFilter.tsx b/src/components/_common/overview-filters/text-filter/OverviewTextFilter.tsx index 115721484..869bcb4d0 100644 --- a/src/components/_common/overview-filters/text-filter/OverviewTextFilter.tsx +++ b/src/components/_common/overview-filters/text-filter/OverviewTextFilter.tsx @@ -2,14 +2,17 @@ import React, { useCallback, useEffect, useId, useState } from 'react'; import { Search } from '@navikt/ds-react'; import debounce from 'lodash.debounce'; import { translator } from 'translations'; +import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { useOverviewFilters } from 'store/hooks/useOverviewFilters'; import { windowScrollTo } from 'utils/scroll-to'; -import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; import { OVERVIEW_FILTERS_TEXT_INPUT_EVENT, OverviewFiltersTextInputEventDetail, } from 'store/slices/overviewFilters'; + import style from './OverviewTextFilter.module.scss'; type Props = { @@ -23,9 +26,10 @@ const analyticsRedaction = (value: string) => export const OverviewTextFilter = ({ hideLabel }: Props) => { const { setTextFilter } = useOverviewFilters(); - const { language } = usePageContentProps(); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const label = translator('overview', contentProps.language)('search'); const inputId = useId(); - const [textInput, setTextInput] = useState(''); // eslint-disable-next-line react-hooks/exhaustive-deps @@ -44,6 +48,8 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => { kategori: 'fritekst', filternavn: analyticsRedaction(value), komponent: 'OverviewTextFilter', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); }, 500), [setTextFilter] @@ -61,7 +67,6 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => { setTextInput(value); } }; - window.addEventListener(OVERVIEW_FILTERS_TEXT_INPUT_EVENT, handleInputFromEvent); return () => { window.removeEventListener(OVERVIEW_FILTERS_TEXT_INPUT_EVENT, handleInputFromEvent); @@ -95,7 +100,7 @@ export const OverviewTextFilter = ({ hideLabel }: Props) => { { const [isOpen, setIsOpen] = useState(false); - - const { language } = usePageContentProps(); - const loadingText = translator('overview', language)('loading'); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const loadingText = translator('overview', contentProps.language)('loading'); const anchorIdWithHash = `#${anchorId}`; - const checkHashAndExpandPanel = () => { if (window.location.hash === anchorIdWithHash) { contentLoaderCallback?.(); @@ -70,6 +70,8 @@ export const ProductPanelExpandable = ({ tittel, opprinnelse: 'produktdetalj', komponent: 'ProductPanelExpandable', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], ...analyticsData, }); }; diff --git a/src/components/_common/qbrick-video/QbrickVideo.tsx b/src/components/_common/qbrick-video/QbrickVideo.tsx index ad0680b36..cf89e7903 100644 --- a/src/components/_common/qbrick-video/QbrickVideo.tsx +++ b/src/components/_common/qbrick-video/QbrickVideo.tsx @@ -4,10 +4,12 @@ import Script from 'next/script'; import { translator } from 'translations'; import { getMediaUrl } from 'utils/urls'; import { classNames } from 'utils/classnames'; -import { AlertBox } from 'components/_common/alertBox/AlertBox'; import { logger } from 'srcCommon/logger'; +import { AlertBox } from 'components/_common/alertBox/AlertBox'; import { NextImage } from 'components/_common/image/NextImage'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { QbrickVideoProps } from './utils/videoProps'; import { getTimestampFromDuration } from './utils/videoHelpers'; import { useQbrickPlayerState } from './useQbrickPlayerState'; @@ -15,16 +17,17 @@ import { useQbrickPlayerState } from './useQbrickPlayerState'; import style from './QbrickVideo.module.scss'; export const QbrickVideo = (props: QbrickVideoProps) => { - const { language: contentLanguage, editorView } = usePageContentProps(); - + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const { language: contentLanguage, editorView } = contentProps; const { title, duration, poster } = props; - const videoContainerId = useId(); - const { createAndStartPlayer, resetPlayer, playerState, setPlayerState } = useQbrickPlayerState( { videoProps: props, videoContainerId, + context, + innholdstype: innholdsTypeMap[contentProps.type], } ); @@ -33,9 +36,7 @@ export const QbrickVideo = (props: QbrickVideoProps) => { }, [resetPlayer]); const translations = translator('macroVideo', contentLanguage); - const durationAsString = getTimestampFromDuration(duration); - const imageUrl = poster?.startsWith('http') ? poster : getMediaUrl(poster, !!editorView, contentLanguage); diff --git a/src/components/_common/qbrick-video/useQbrickPlayerState.tsx b/src/components/_common/qbrick-video/useQbrickPlayerState.tsx index 5d806305e..e07a7201e 100644 --- a/src/components/_common/qbrick-video/useQbrickPlayerState.tsx +++ b/src/components/_common/qbrick-video/useQbrickPlayerState.tsx @@ -11,9 +11,16 @@ const PLAYER_POLLING_RATE_MS = 50; type Props = { videoProps: QbrickVideoProps; videoContainerId: string; + context?: string; + innholdstype?: string; }; -export const useQbrickPlayerState = ({ videoProps, videoContainerId }: Props) => { +export const useQbrickPlayerState = ({ + videoProps, + videoContainerId, + context, + innholdstype, +}: Props) => { const [playerState, setPlayerState] = useState('stopped'); const widgetId = useId(); @@ -28,8 +35,16 @@ export const useQbrickPlayerState = ({ videoProps, videoContainerId }: Props) => return; } - createAndStart(videoProps, videoContainer, widgetId, setPlayerState); - }, [videoProps, videoContainerId, widgetId, playerState, setPlayerState]); + createAndStart(videoProps, videoContainer, widgetId, setPlayerState, context, innholdstype); + }, [ + videoProps, + videoContainerId, + widgetId, + playerState, + setPlayerState, + context, + innholdstype, + ]); const resetPlayer = useCallback(() => { setPlayerState('stopped'); @@ -51,7 +66,9 @@ const createAndStart = ( { accountId, mediaId, language, title, duration }: QbrickVideoProps, videoContainer: HTMLElement, widgetId: string, - setPlayerState: (state: PlayerState) => void + setPlayerState: (state: PlayerState) => void, + context?: string, + innholdstype?: string ) => { const createPlayer = (timeLeft: number = PLAYER_TIMEOUT_MS) => { if (timeLeft <= 0) { @@ -88,6 +105,8 @@ const createAndStart = ( tittel: title, varighet: duration, språk: language, + målgruppe: context, + innholdstype, }); }) .on('playable', () => { diff --git a/src/components/_common/user-tests/public-view/UserTestsPublicView.test.tsx b/src/components/_common/user-tests/public-view/UserTestsPublicView.test.tsx index 9495723b6..5b77f5952 100644 --- a/src/components/_common/user-tests/public-view/UserTestsPublicView.test.tsx +++ b/src/components/_common/user-tests/public-view/UserTestsPublicView.test.tsx @@ -11,7 +11,7 @@ import { PageContextProvider } from 'store/pageContext'; const cookieId = 'cookie-1234'; -const baseProps: UserTestsComponentProps = { +const baseProps: UserTestsComponentProps & { _path: string } = { selectedTestIds: [], tests: { data: { @@ -21,6 +21,7 @@ const baseProps: UserTestsComponentProps = { variants: [], }, }, + _path: 'test', }; const buildProps = (variants: UserTestVariantProps[], selectedTestIds: string[] = []) => { 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 68a5f33b2..2397cee1a 100644 --- a/src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx +++ b/src/components/pages/office-page/office-details/officeInformation/OfficeInformation.tsx @@ -1,8 +1,10 @@ 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 { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { OfficeDetailsData } from 'types/content-props/office-details-props'; import { officeDetailsFormatAddress } from 'components/pages/office-page/office-details/utils'; @@ -14,8 +16,9 @@ export interface OfficeInformationProps { export const OfficeInformation = ({ officeData }: OfficeInformationProps) => { const [isOpen, setIsOpen] = useState(false); - const { language } = usePageContentProps(); - const getOfficeTranslations = translator('office', language); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const getOfficeTranslations = translator('office', contentProps.language); const title = getOfficeTranslations('officeInformation'); const { postadresse, beliggenhet, organisasjonsnummer, enhetNr } = officeData; const visitingAddress = officeDetailsFormatAddress(beliggenhet, true); @@ -27,6 +30,8 @@ export const OfficeInformation = ({ officeData }: OfficeInformationProps) => { tittel, opprinnelse: 'kontorinformasjon', komponent: 'OfficeInformation', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); }; diff --git a/src/components/parts/filters-menu/FiltersMenuPart.tsx b/src/components/parts/filters-menu/FiltersMenuPart.tsx index f55df13c8..9ba30f789 100644 --- a/src/components/parts/filters-menu/FiltersMenuPart.tsx +++ b/src/components/parts/filters-menu/FiltersMenuPart.tsx @@ -10,6 +10,8 @@ import { Header } from 'components/_common/headers/Header'; import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp'; import { PartComponentProps, PartType } from 'types/component-props/parts'; import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { ExpandableMixin } from 'types/component-props/_mixins'; import { checkIfFilterFirstInPage } from './helpers'; import { FilterCheckbox } from './FilterCheckbox'; @@ -33,16 +35,13 @@ export type PartConfigFilterMenu = { } & ExpandableMixin; export const FiltersMenuPart = ({ config, path }: PartComponentProps) => { - const { language, editorView, page } = usePageContentProps(); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); + const { language, editorView, page } = contentProps; const { categories, description, expandableTitle, title } = config; - const { clearFiltersForPage, selectedFilters, setAvailableFilters, toggleFilter } = useFilterState(); - - const isFirstFilterInPage = checkIfFilterFirstInPage({ - path, - page, - }); + const isFirstFilterInPage = checkIfFilterFirstInPage({ path, page }); useEffect(() => { // Multiple FilterMenus in same page will break. @@ -64,13 +63,14 @@ export const FiltersMenuPart = ({ config, path }: PartComponentProps { logAmplitudeEvent(AnalyticsEvents.FILTER, { kategori: category.categoryName, filternavn: filter.filterName, opprinnelse: 'filtermeny', komponent: 'FiltersMenuPart', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); toggleFilter(filter.id); }; diff --git a/src/components/parts/readMorePart/ReadMorePart.tsx b/src/components/parts/readMorePart/ReadMorePart.tsx index c0ee0aeb1..5dd333920 100644 --- a/src/components/parts/readMorePart/ReadMorePart.tsx +++ b/src/components/parts/readMorePart/ReadMorePart.tsx @@ -2,12 +2,15 @@ import React, { useRef, useState } from 'react'; import { ReadMore } from '@navikt/ds-react'; import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp'; import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; +import { classNames } from 'utils/classnames'; +import { handleStickyScrollOffset } from 'utils/scroll-to'; import { AnalyticsEvents, logAmplitudeEvent } from 'utils/amplitude'; +import { usePageContentProps } from 'store/pageContext'; +import { getDecoratorParams } from 'utils/decorator-utils'; +import { innholdsTypeMap } from 'types/content-props/_content-common'; import { Shortcuts, useShortcuts } from 'utils/useShortcuts'; import { PartComponentProps, PartType } from 'types/component-props/parts'; import { ProcessedHtmlProps } from 'types/processed-html-props'; -import { classNames } from 'utils/classnames'; -import { handleStickyScrollOffset } from 'utils/scroll-to'; import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss'; import styles from './ReadMorePart.module.scss'; @@ -21,6 +24,8 @@ export type PartConfigReadMore = { export const ReadMorePart = ({ config }: PartComponentProps) => { const [isOpen, setIsOpen] = useState(config?.isOpen ?? false); const divRef = useRef(null); + const contentProps = usePageContentProps(); + const { context } = getDecoratorParams(contentProps); useShortcuts({ shortcut: Shortcuts.SEARCH, @@ -33,12 +38,13 @@ export const ReadMorePart = ({ config }: PartComponentProps) const openChangeHandler = (isOpening: boolean, tittel: string) => { handleStickyScrollOffset(isOpening, divRef.current); - setIsOpen(isOpening); logAmplitudeEvent(isOpening ? AnalyticsEvents.ACC_EXPAND : AnalyticsEvents.ACC_COLLAPSE, { tittel, opprinnelse: 'lesmer', komponent: 'ReadMore', + målgruppe: context, + innholdstype: innholdsTypeMap[contentProps.type], }); }; diff --git a/src/types/content-props/_content-common.ts b/src/types/content-props/_content-common.ts index ecbd7ef3a..837d9a114 100644 --- a/src/types/content-props/_content-common.ts +++ b/src/types/content-props/_content-common.ts @@ -95,6 +95,57 @@ export enum ContentType { FallbackPage = 'no.nav.navno:fallback-page', } +export const innholdsTypeMap: Record = { + [ContentType.InternalLink]: 'Intern Lenke', + [ContentType.ExternalLink]: 'Ekstern Lenke', + [ContentType.SectionPage]: 'Oppslagstavle', + [ContentType.TransportPage]: 'Transportside', + [ContentType.DynamicPage]: 'Dynamisk side', + [ContentType.ContentList]: 'Innholdsliste', + [ContentType.ContactInformationPage]: 'Kontaktinformasjon', + [ContentType.GenericPage]: 'Generisk side', + [ContentType.PageList]: 'Artikkelliste', + [ContentType.MainArticle]: 'Artikkel', + [ContentType.MainArticleChapter]: 'Kapittel', + [ContentType.Melding]: 'Driftsmelding', + [ContentType.LargeTable]: 'Ekstra stor tabell', + [ContentType.OfficeInformation]: 'Enhetsinformasjon', + [ContentType.PublishingCalendar]: 'Publiseringskalender', + [ContentType.PublishingCalendarEntry]: 'Kalenderhendelse', + [ContentType.GlobalNumberValuesSet]: 'Globale tall-verdier', + [ContentType.ProductPage]: 'Produktside', + [ContentType.ProductDetails]: 'Produktdetaljer', + [ContentType.OfficeEditorialPage]: 'Kontorside for redaktørinnhold', + [ContentType.GuidePage]: 'Slik gjør du det', + [ContentType.ThemedArticlePage]: 'Temaartikkel', + [ContentType.CurrentTopicPage]: 'Aktuelt', + [ContentType.SituationPage]: 'Situasjonsside', + [ContentType.Pictograms]: 'Piktogram', + [ContentType.ToolsPage]: 'Verktøy-side', + [ContentType.Calculator]: 'Kalkulator', + [ContentType.Overview]: 'Oversiktsside', + [ContentType.GlobalCaseTimeSet]: 'Saksbehandlingstider', + [ContentType.PayoutDates]: 'Utbetalingsdatoer', + [ContentType.FrontPage]: 'Forside', + [ContentType.FrontPageNested]: 'Underforside', + [ContentType.AreaPage]: 'Områdeside', + [ContentType.PressLandingPage]: 'Landingsside for presse', + [ContentType.FormDetails]: 'Skjemadetaljer', + [ContentType.FormIntermediateStepPage]: 'Mellomsteg for søknad, skjema, klage og ettersendelse', + [ContentType.FormsOverview]: 'Skjemaoversikt', + [ContentType.UserTestsConfig]: 'Brukertester', + [ContentType.Video]: 'Qbrick Video', + [ContentType.AlertInContext]: 'Varsel i kontekst', + [ContentType.OfficePage]: 'Kontorside (gammel)', + + [ContentType.Error]: `Ugyldig type: [${ContentType.Error}]`, + [ContentType.Site]: `Ugyldig type: [${ContentType.Site}]`, + [ContentType.Fragment]: `Ugyldig type: [${ContentType.Fragment}]`, + [ContentType.TemplatePage]: `Ugyldig type: [${ContentType.TemplatePage}]`, + [ContentType.Url]: `Ugyldig type: [${ContentType.Url}]`, + [ContentType.FallbackPage]: `Ugyldig type: [${ContentType.FallbackPage}]`, +}; + export type ContentAndMediaCommonProps = { type: ContentType | MediaType; _id: string;