Merge branch 'main' into contact-step-page

Author: bdahle

packages/nextjs/src/components/_common/areaCard/AreaCard.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { LinkPanel } from '@navikt/ds-react';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { classNames } from 'utils/classnames';
+import { useLayoutConfig } from 'components/layouts/useLayoutConfig';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { AreaCardGraphics } from './graphics/AreaCardGraphics';
 
@@ -17,6 +18,9 @@ type Props = {
 } & Omit<React.ComponentProps<typeof LinkPanel>, 'as'>;
 
 export const AreaCard = ({ path, title, area, linkGroup, className, ...rest }: Props) => {
+    const { layoutConfig } = useLayoutConfig();
+    const analyticsLinkGroup= linkGroup ?? layoutConfig.title;
+
     if (!area) {
         return <EditorHelp text={'Velg en grafikk for kortet'} />;
     }
@@ -28,7 +32,7 @@ export const AreaCard = ({ path, title, area, linkGroup, className, ...rest }: P
             href={path}
             analyticsLabel={title}
             analyticsComponent={'Områdekort'}
-            analyticsLinkGroup={linkGroup}
+            analyticsLinkGroup={analyticsLinkGroup}
             className={classNames(style.linkPanel, graphicsStyle.expandOnHover, className)}
             as={LenkeBase}
         >

packages/nextjs/src/components/_common/moreLink/MoreLink.tsx

@@ -5,15 +5,25 @@ import { LenkeStandalone } from 'components/_common/lenke/lenkeStandalone/LenkeS
 
 import styles from './MoreLink.module.scss';
 
-export const MoreLink = ({ link }: { link?: LinkSelectable }) => {
-    if (!link) {
+type Props = {
+    link: LinkSelectable;
+    analyticsGroup?: string;
+};
+
+export const MoreLink = ( props: Props) => {
+    if (!props.link) {
         return null;
     }
 
-    const { text, url } = getSelectableLinkProps(link);
+    const { text, url } = getSelectableLinkProps(props.link);
 
     return (
-        <LenkeStandalone href={url} className={styles.moreLink} withChevron={false}>
+        <LenkeStandalone
+            href={url}
+            linkGroup={props.analyticsGroup}
+            className={styles.moreLink}
+            withChevron={false}
+        >
             <ArrowRightIcon aria-hidden={true} className={styles.arrow} />
             {text}
         </LenkeStandalone>

packages/nextjs/src/components/_common/uxsignalsWidget/UxSignalsWidget.tsx

@@ -1,22 +1,70 @@
 import React, { useEffect } from 'react';
+import { getCurrentConsent } from '@navikt/nav-dekoratoren-moduler';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 
 import style from './UxSignalsWidget.module.scss';
 
-type Props = {
+type UxSignalsWidgetProps = {
     embedCode: string;
 };
 
-export const UxSignalsWidget = ({ embedCode }: Props) => {
-    useEffect(() => {
+type Consent = {
+    consent: {
+        analytics: boolean;
+        surveys: boolean;
+    };
+    userActionTaken: boolean;
+};
+
+const uxSignalsScriptUrl = 'https://widget.uxsignals.com/embed.js';
+let scriptAddTimeout: ReturnType<typeof setTimeout>;
+
+export const UxSignalsWidget = ({ embedCode }: UxSignalsWidgetProps) => {
+    // If the cookie banner is visible, the user has not taken any action yet.
+    // Wait and see if the user takes action before adding the script if consent is given..
+    const checkConsentOrWait = (tries: number = 0) => {
+        const { consent, userActionTaken }: Consent = getCurrentConsent();
+        if (consent.surveys && consent.analytics) {
+            addUXSignalsScript();
+            return;
+        }
+        // Wait max 60 seconds for user respond to the cookie banner
+        // (userActionTaken) or give up.
+        if (!userActionTaken && tries < 60) {
+            scriptAddTimeout = setTimeout(() => {
+                checkConsentOrWait(tries + 1);
+            }, 1000);
+        }
+    };
+
+    const addUXSignalsScript = () => {
+        if (document.querySelector(`script[src="${uxSignalsScriptUrl}"]`)) {
+            return;
+        }
+
         const script = document.createElement('script');
-        script.src = 'https://widget.uxsignals.com/embed.js';
+        script.src = uxSignalsScriptUrl;
         script.async = true;
         document.body.appendChild(script);
-        return () => {
+    };
+
+    const removeUXSignalsScript = () => {
+        const script = document.querySelector(`script[src="${uxSignalsScriptUrl}"]`);
+        if (script) {
             document.body.removeChild(script);
+        }
+    };
+
+    useEffect(() => {
+        checkConsentOrWait();
+        return () => {
+            if (scriptAddTimeout) {
+                clearTimeout(scriptAddTimeout);
+            }
+            removeUXSignalsScript();
         };
-    });
+        /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, []);
 
     return (
         <>

packages/nextjs/src/components/layouts/LayoutContainer.tsx

@@ -20,6 +20,8 @@ export const LayoutContainer = ({
     layoutProps,
     layoutStyle,
     children,
+    /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+    pageProps,
     ...divElementProps
 }: Props) => {
     const { editorView } = usePageContentProps();

packages/nextjs/src/components/layouts/frontpage-loggedin-section/FrontpageLoggedinSectionLayout.tsx

@@ -43,6 +43,8 @@ export const FrontpageLoggedinSectionLayout = ({ layoutProps, pageProps }: Props
     }
 
     const { header, mypage } = config;
+    const title = yourServicesText('yourServices');
+    layoutProps.config.title = title; //for at kortene i region skal kunne plukke opp title til analytics
 
     return (
         <AuthDependantRender renderOn={'loggedIn'}>
@@ -53,11 +55,11 @@ export const FrontpageLoggedinSectionLayout = ({ layoutProps, pageProps }: Props
                 data-hj-suppress
             >
                 <HeaderWithName headerText={header} />
-                <Header level={'2'} size={'small'} className={style.services}>
-                    {yourServicesText('yourServices')}
+                <Header level="3" size="small" className={style.services}>
+                    {title}
                 </Header>
                 <Region pageProps={pageProps} regionProps={regions.cards} className={style.cards} />
-                <MoreLink link={mypage?.link} />
+                <MoreLink analyticsGroup={title} link={mypage?.link} />
             </LayoutContainer>
         </AuthDependantRender>
     );

packages/nextjs/src/components/parts/frontpage-current-topics/FrontpageCurrentTopicsPart.tsx

@@ -82,7 +82,7 @@ export const FrontpageCurrentTopicsPart = ({
                     );
                 })}
             </ul>
-            {link && <MoreLink link={link} />}
+            {link && <MoreLink analyticsGroup={title} link={link} />}
         </div>
     );
 };

packages/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx

@@ -61,7 +61,7 @@ export const FrontpagePersonShortcutsPart = ({
                                 href={href}
                                 className={style.linkPanel}
                                 analyticsComponent="Lenkepanel navno enkel"
-                                analyticsLinkGroup={title}
+                                analyticsLinkGroup={sectionTitle}
                             >
                                 <div className={style.icon}>
                                     {

packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx

@@ -79,7 +79,7 @@ export const FrontpageShortcutsPart = ({
                         <li key={title}>
                             <LinkPanelNavnoSimple
                                 href={href}
-                                analyticsLinkGroup={title}
+                                analyticsLinkGroup={sectionTitle}
                                 icon={<IllustrationStatic illustration={illustration} />}
                                 className={classNames(
                                     style.item,

packages/nextjs/src/types/component-props/layouts/frontpage-loggedin-section.ts

@@ -8,6 +8,7 @@ export interface FrontpageLoggedinSectionLayoutProps extends LayoutBaseProps {
     regions: Regions<'cards'>;
     config: {
         header: string;
+        title: string;
         mypage: {
             link: LinkSelectable;
         };