Merge pull request #1703 from navikt/Kontaktinfo

Kontaktinfo
navikt · Oct 13, 2023 · b196260 · b196260
2 parents 083ea5b + 3028945
commit b196260
Show file tree

Hide file tree

Showing 14 changed files with 372 additions and 160 deletions.
diff --git a/server/mock/innloggetMock.js b/server/mock/innloggetMock.js
@@ -1,26 +1,8 @@
-const sessions = {};
 export const mock = function (app) {
     app.get('/min-side-arbeidsgiver/api/innlogget', (req, res) => {
-        const token = sessions[req.ip];
-        if (token) {
-            console.log('innlogget? ja (session eksisterer)');
-            res.status(200).send();
-        } else {
-            console.log('innlogget? nei (session mangler)');
-            res.status(401).send();
-        }
+        res.status(200).send();
     });
     app.get('/min-side-arbeidsgiver/redirect-til-login', async (req, res) => {
-        const response = await fetch('https://fakedings.intern.dev.nav.no/fake/custom', {
-            method: 'POST',
-            headers: {
-                'Content-type': 'application/x-www-form-urlencoded',
-            },
-            body: `sub=00112233445&aud=${encodeURIComponent('bruker-api')}&acr=Level4`,
-        });
-        const token = await response.text();
-        sessions[req.ip] = token;
-        console.log(`login: setter session til ${token}`);
         res.redirect(req.get('referer'));
     });
 };
diff --git a/server/mock/kontaktinfoApiMock.js b/server/mock/kontaktinfoApiMock.js
@@ -0,0 +1,53 @@
+const response = [
+    {
+        hovedenhet: null,
+        underenhet: null,
+    },
+    {
+        hovedenhet: {
+            eposter: [],
+            telefonnumre: [],
+        },
+        underenhet: {
+            eposter: [],
+            telefonnumre: [],
+        },
+    },
+    {
+        hovedenhet: {
+            eposter: ['[email protected]'],
+            telefonnumre: [],
+        },
+        underenhet: {
+            eposter: [],
+            telefonnumre: ['+4700000'],
+        },
+    },
+    {
+        hovedenhet: {
+            eposter: ['[email protected]', '[email protected]'],
+            telefonnumre: [],
+        },
+        underenhet: {
+            eposter: ['[email protected]'],
+            telefonnumre: ['+4700000'],
+        },
+    },
+    {
+        hovedenhet: {
+            eposter: ['[email protected]', '[email protected]'],
+            telefonnumre: ['+4700000'],
+        },
+        underenhet: {
+            eposter: [],
+            telefonnumre: ['+4700000'],
+        },
+    },
+];
+
+export const mock = (app) => {
+    app.post('/min-side-arbeidsgiver/api/kontaktinfo/v1', (req, res) => {
+        const randomRespons = response[Math.floor(Math.random() * 5)];
+        return res.send(randomRespons);
+    });
+};
diff --git a/server/server.js b/server/server.js
@@ -175,6 +175,7 @@ const main = async () => {
         (await import('./mock/refusjonsStatusMock.js')).mock(app);
         (await import('./mock/presenterteKandidaterMock.js')).mock(app);
         (await import('./mock/storageMock.js')).mock(app);
+        (await import('./mock/kontaktinfoApiMock.js')).mock(app);
 
         const {
             applyNotifikasjonMockMiddleware,

diff --git a/src/App/App.tsx b/src/App/App.tsx
@@ -84,7 +84,7 @@ const App: FunctionComponent = () => {
                                                                     element={
                                                                         <SideTittelWrapper
                                                                             tittel={
-                                                                                'Virksomhetsprofil'
+                                                                                'Om virksomheten'
                                                                             }
                                                                             setTittel={
                                                                                 setSidetittel

diff --git a/src/App/Hovedside/NyttigForDegContainer/Bedriftsinfoknapp/Bedriftsinfoknapp.tsx b/src/App/Hovedside/NyttigForDegContainer/Bedriftsinfoknapp/Bedriftsinfoknapp.tsx
@@ -3,7 +3,7 @@ import { OrganisasjonsDetaljerContext } from '../../../OrganisasjonDetaljerProvi
 import bedriftinfoikon from './infoombedriftikon.svg';
 import './Bedriftsinfoknapp.css';
 import { InternalLenkepanelMedLogging } from '../../../../GeneriskeElementer/LenkepanelMedLogging';
-import {TittelMedIkon} from "../../../../GeneriskeElementer/TittelMedIkon";
+import { TittelMedIkon } from '../../../../GeneriskeElementer/TittelMedIkon';
 
 const Bedriftsinfoknapp = () => {
     const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
@@ -14,14 +14,18 @@ const Bedriftsinfoknapp = () => {
 
     return (
         <InternalLenkepanelMedLogging
-            to={"/bedriftsinformasjon" + '?bedrift=' + valgtOrganisasjon.organisasjon.OrganizationNumber}
-            onClick={()=>scroll(0,0)}
+            to={
+                '/bedriftsinformasjon' +
+                '?bedrift=' +
+                valgtOrganisasjon.organisasjon.OrganizationNumber
+            }
+            onClick={() => scroll(0, 0)}
             className="bedriftsinfo-knapp"
             loggLenketekst="Informasjon om din virksomhet"
         >
-            <TittelMedIkon tittel={"Informasjon fra enhetsregisteret"} ikon={bedriftinfoikon}/>
+            <TittelMedIkon tittel={'Om virksomheten'} ikon={bedriftinfoikon} />
         </InternalLenkepanelMedLogging>
     );
 };
 
-export default Bedriftsinfoknapp;
+export default Bedriftsinfoknapp;
diff --git a/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css b/src/App/InformasjonOmBedrift/InformasjonOmBedrift.css
@@ -1,5 +1,5 @@
 .informasjon-om-bedrift {
-  margin: 2rem auto;
+  margin: 24px auto;
   padding: 2rem;
   max-width: 60rem;
   width: 100%;

diff --git a/src/App/InformasjonOmBedrift/InformasjonOmBedrift.tsx b/src/App/InformasjonOmBedrift/InformasjonOmBedrift.tsx
@@ -1,60 +1,72 @@
-import React, {FunctionComponent, useContext, useEffect, useState} from 'react';
-import {OrganisasjonsDetaljerContext} from '../OrganisasjonDetaljerProvider';
-import {Enhet, hentOverordnetEnhet, hentUnderenhet} from '../../api/enhetsregisteretApi';
+import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
+import { OrganisasjonsDetaljerContext } from '../OrganisasjonDetaljerProvider';
+import { Enhet, hentOverordnetEnhet, hentUnderenhet } from '../../api/enhetsregisteretApi';
 import Underenhet from './Underenhet/Underenhet';
 import OverordnetEnhet from './OverordnetEnhet/OverordnetEnhet';
 import Brodsmulesti from '../Brodsmulesti/Brodsmulesti';
 import './InformasjonOmBedrift.css';
-import {Panel} from "@navikt/ds-react";
+import { Panel } from '@navikt/ds-react';
 
-interface Enheter {
+export interface Enheter {
     underenhet: Enhet;
     hovedenhet: Enhet;
 }
 
 const hentEnheter = async (orgnr: string): Promise<Enheter | undefined> => {
-    const underenhet = await hentUnderenhet(orgnr)
+    const underenhet = await hentUnderenhet(orgnr);
     if (underenhet === undefined) {
-        return undefined
+        return undefined;
     }
     if (underenhet.overordnetEnhet === undefined) {
-        return undefined
+        return undefined;
     }
-    const hovedenhet = await hentOverordnetEnhet(underenhet.overordnetEnhet)
+    const hovedenhet = await hentOverordnetEnhet(underenhet.overordnetEnhet);
     if (hovedenhet === undefined) {
-        return undefined
+        return undefined;
     }
-    return {underenhet, hovedenhet}
-}
+    return { underenhet, hovedenhet };
+};
+
+const Kontaktpanel = ({ children }: { children: React.ReactNode }) => (
+    <Panel className="informasjon-om-bedrift">{children}</Panel>
+);
 
 const InformasjonOmBedrift: FunctionComponent = () => {
-    const {valgtOrganisasjon} = useContext(OrganisasjonsDetaljerContext);
+    const { valgtOrganisasjon } = useContext(OrganisasjonsDetaljerContext);
     const [enheter, setEnheter] = useState<Enheter | undefined>(undefined);
-    const orgnr = valgtOrganisasjon?.organisasjon.OrganizationNumber ?? '';
+    const orgnr = valgtOrganisasjon?.organisasjon.OrganizationNumber;
 
     useEffect(() => {
-        if (orgnr !== '') {
-            hentEnheter(orgnr).then(setEnheter)
+        if (orgnr !== undefined) {
+            hentEnheter(orgnr).then(setEnheter);
         } else {
-            setEnheter(undefined)
+            setEnheter(undefined);
         }
     }, [orgnr]);
 
     return (
         <>
-            <Brodsmulesti brodsmuler={[{url: '/bedriftsinformasjon', title: 'Bedriftsprofil', handleInApp: true}]}/>
-            <Panel className='informasjon-om-bedrift'>
-                {enheter !== undefined ? (
-                    <>
-                        <Underenhet underenhet={enheter.underenhet}/>
-                        <OverordnetEnhet overordnetenhet={enheter.hovedenhet}/>
-                    </>
-                ) : (
+            <Brodsmulesti
+                brodsmuler={[
+                    { url: '/bedriftsinformasjon', title: 'Bedriftsprofil', handleInApp: true },
+                ]}
+            />
+            {enheter !== undefined ? (
+                <>
+                    <Kontaktpanel>
+                        <Underenhet underenhet={enheter.underenhet} />
+                    </Kontaktpanel>
+                    <Kontaktpanel>
+                        <OverordnetEnhet overordnetenhet={enheter.hovedenhet} />
+                    </Kontaktpanel>
+                </>
+            ) : (
+                <Kontaktpanel>
                     <div>Kunne ikke hente informasjon</div>
-                )}
-            </Panel>
+                </Kontaktpanel>
+            )}
         </>
     );
 };
 
-export default InformasjonOmBedrift;
+export default InformasjonOmBedrift;
diff --git a/src/App/InformasjonOmBedrift/Kontaktinfo.css b/src/App/InformasjonOmBedrift/Kontaktinfo.css
@@ -0,0 +1,23 @@
+.kontaktinfo{
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-width: 32rem;
+    margin-top: 16px;
+}
+
+.kontaktinfo li {
+    margin: 0;
+    list-style: none;
+}
+
+.kontaktinfo ul {
+    margin: 0;
+    padding: 0;
+}
+
+.kontaktinfo-tittel{
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}