bruk LinkWithIngressMixin

Author: bdahle

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx

@@ -4,41 +4,21 @@ import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
 import { ContentType, ContentCommonProps } from 'types/content-props/_content-common';
 import { IllustrationStatic } from 'components/_common/illustration/static/IllustrationStatic';
 import { PictogramsProps } from 'types/content-props/pictograms';
-import { stripXpPathPrefix } from 'utils/urls';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { LenkeInline } from 'components/_common/lenke/lenkeInline/LenkeInline';
+import { LinkWithIngressMixin } from 'types/component-props/_mixins';
 import style from './ContactStepPage.module.scss';
 
-export type LinkInternal = {
-    external?: never;
-    internal: { internalContent: Pick<ContentCommonProps, '_path'> };
-    _selected: 'internal';
-};
-
-export type LinkExternal = {
-    external: { externalUrl: string };
-    internal?: never;
-    _selected: 'external';
-};
-
-export type Link = LinkInternal | LinkExternal;
-
-export interface LinkPanel {
-    label: string;
-    explanation?: string;
-    link: Link;
-}
-
 export type ContactStepPageProps = ContentCommonProps & {
     type: ContentType.ContactStepPage;
     data: {
         title: string;
         illustration: PictogramsProps;
         textAboveTitle?: string;
         html: string;
-        linksHeading: string;
-        linksSubHeadline: string;
-        links: LinkPanel[];
+        linkPanelsHeading: string;
+        linkPanelsSubHeading: string;
+        linkPanels: LinkWithIngressMixin[];
         link: {
             internal: {
                 target: { _path: string };
@@ -55,21 +35,12 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
         illustration,
         textAboveTitle,
         html,
-        links: linkPanels,
-        linksHeading: linksPanelHeading,
-        linksSubHeadline: linksPanelSubHeadline,
+        linkPanelsHeading,
+        linkPanelsSubHeading,
+        linkPanels,
         link,
     } = data;
 
-    const getHref = (link: Link) => {
-        if (link._selected === 'internal') {
-            return stripXpPathPrefix(link.internal?.internalContent._path);
-        }
-        return link.external.externalUrl;
-    };
-
-    const { target, text } = link.internal;
-
     return (
         <div className={style.contactStepPage}>
             <IllustrationStatic illustration={illustration} className={style.pictogram} />
@@ -86,40 +57,39 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
             <div className={style.content}>
                 <ParsedHtml htmlProps={html} />
 
-                {linksPanelHeading && (
+                {linkPanelsHeading && (
                     <Heading size="medium" level="2">
-                        {linksPanelHeading}
+                        {linkPanelsHeading}
                     </Heading>
                 )}
-                {linksPanelSubHeadline && <BodyShort>{linksPanelSubHeadline}</BodyShort>}
+                {linkPanelsSubHeading && <BodyShort>{linkPanelsSubHeading}</BodyShort>}
 
-                {linkPanels && linkPanels.length > 0 && (
-                    <ul className={style.linkPanels}>
-                        {linkPanels.map((linkPanel, index) => (
-                            <li key={index}>
-                                <LinkPanel
-                                    as={LenkeBase}
-                                    href={getHref(linkPanel.link)}
-                                    className={style.linkPanel}
-                                    // TODO finn utav analytics
-                                    // analyticsComponent={'mellomsteg'}
-                                    // analyticsLinkGroup={currentStepData.stepsHeadline}
-                                    // analyticsLabel={step.label}s
-                                >
-                                    <LinkPanel.Title>{linkPanel.label}</LinkPanel.Title>
-                                    {linkPanel.explanation && (
-                                        <LinkPanel.Description>
-                                            {linkPanel.explanation}
-                                        </LinkPanel.Description>
-                                    )}
-                                </LinkPanel>
-                            </li>
-                        ))}
-                    </ul>
-                )}
+                <ul className={style.linkPanels}>
+                    {linkPanels.map((linkPanel, index) => (
+                        <li key={index}>
+                            <LinkPanel
+                                as={LenkeBase}
+                                //TODO finn utav ekstern lenke
+                                href={linkPanel.link.internal.target._path}
+                                className={style.linkPanel}
+                                // TODO finn utav analytics
+                                // analyticsComponent={'mellomsteg'}
+                                // analyticsLinkGroup={currentStepData.stepsHeadline}
+                                // analyticsLabel={step.label}s
+                            >
+                                <LinkPanel.Title>{linkPanel.link.internal.text}</LinkPanel.Title>
+                                {linkPanel.ingress && (
+                                    <LinkPanel.Description>
+                                        {linkPanel.ingress}
+                                    </LinkPanel.Description>
+                                )}
+                            </LinkPanel>
+                        </li>
+                    ))}
+                </ul>
             </div>
             <div className={style.link}>
-                <LenkeInline href={target._path}>{text}</LenkeInline>
+                <LenkeInline href={link.internal.target._path}>{link.internal.text}</LenkeInline>
             </div>
         </div>
     );