FO-2916: Lagt inn prelansering info side

sneha-d-desai · sneha-d-desai · commit f4d0dc362e68 · 2020-06-10T13:09:16.000+02:00
diff --git a/src/app.tsx b/src/app.tsx
@@ -3,16 +3,33 @@ import StoreProvider from './stores/store-provider';
 import { Header } from './components/header/header';
 import { InternflateDecorator } from './components/internflate-decorator/internflate-decorator';
 import { Hovedside } from './hovedside/hovedside';
-import { SokSync } from './components/sok-sync';
+import { DataFetcher } from './components/datafetcher';
+import { useDataFetcherStore } from './stores/data-fetcher-store';
+import { PRELANSERING_INFO_OM_LOSNING_TOGGLE } from './rest/feature';
+import { Prelansering } from './prelansering-side/prelansering';
 
 function App() {
 	return (
 		<StoreProvider>
 			<InternflateDecorator />
+			<DataFetcher>
+				<Innhold />
+			</DataFetcher>
+		</StoreProvider>
+	);
+}
+
+function Innhold() {
+	const { featuresFetcher } = useDataFetcherStore();
+	const erPrelanseringPa = featuresFetcher.data[PRELANSERING_INFO_OM_LOSNING_TOGGLE];
+
+	return erPrelanseringPa ? (
+		<Prelansering />
+	) : (
+		<>
 			<Header />
 			<Hovedside />
-			<SokSync />
-		</StoreProvider>
+		</>
 	);
 }
 
diff --git a/src/components/datafetcher.tsx b/src/components/datafetcher.tsx
@@ -5,7 +5,7 @@ import { AlertStripeFeil } from 'nav-frontend-alertstriper';
 import Spinner from './felles/spinner/spinner';
 
 export function DataFetcher(props: { children: any }) {
-	const { innloggetVeilederFetcher, aktivEnhetFetcher } = useDataFetcherStore();
+	const { innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher } = useDataFetcherStore();
 
 	useEffect(() => {
 		if (isNotStarted(innloggetVeilederFetcher)) {
@@ -15,13 +15,17 @@ export function DataFetcher(props: { children: any }) {
 		if (isNotStarted(aktivEnhetFetcher)) {
 			aktivEnhetFetcher.fetch(null);
 		}
+
+		if (isNotStarted(featuresFetcher)) {
+			featuresFetcher.fetch(null);
+		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [innloggetVeilederFetcher]);
+	}, [innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher]);
 
 	// Trenger ikke å sjekke om aktivEnhetFetcher er ferdig
-	if (isAnyNotStartedOrPending([innloggetVeilederFetcher])) {
+	if (isAnyNotStartedOrPending([innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher])) {
 		return <Spinner />;
-	} else if (hasAnyFailed([innloggetVeilederFetcher])) {
+	} else if (hasAnyFailed([innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher])) {
 		return (
 			<AlertStripeFeil className="vedtaksstotte-alert">
 				Det oppnås for tiden ikke kontakt med alle baksystemer.
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import App from './app';
 import env from './utils/environment';
 import * as dayjs from 'dayjs';
 import 'dayjs/locale/nb';
 import './index.less';
-import { PrelanseringInfoSide } from './prelansering-side/prelansering-side';
 
 dayjs.locale('nb');
 
 if (env.isDevelopment) {
 	require('./mock');
 }
 
-ReactDOM.render(<PrelanseringInfoSide />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/mock/data/features.ts b/src/mock/data/features.ts
@@ -0,0 +1,8 @@
+import { JSONObject } from 'yet-another-fetch-mock';
+import { Features, PRELANSERING_INFO_OM_LOSNING_TOGGLE } from '../../rest/feature';
+
+const features: Features & JSONObject = {
+    [PRELANSERING_INFO_OM_LOSNING_TOGGLE]: true,
+};
+
+export default features;
diff --git a/src/mock/index.ts b/src/mock/index.ts
@@ -3,6 +3,7 @@ import { mockBeslutteroversiktSok } from './sok-mock';
 import { MODIACONTEXTHOLDER_API, VEILARBVEILEDER_API } from '../rest/api';
 import { innloggetVeileder } from './data/innlogget-veileder';
 import { aktivEnhet } from './data/aktiv-enhet';
+import features from './data/features';
 
 export interface Mock {
 	url: string;
@@ -16,4 +17,5 @@ const fetchMock = FetchMock.configure({
 
 fetchMock.post(mockBeslutteroversiktSok.url, mockBeslutteroversiktSok.handler);
 fetchMock.get(`${VEILARBVEILEDER_API}/veileder/v2/me`, innloggetVeileder as any);
-fetchMock.get(`${MODIACONTEXTHOLDER_API}/context/aktivenhet`, aktivEnhet as any);
+fetchMock.get(`${MODIACONTEXTHOLDER_API}/context/aktivenhet`, aktivEnhet as any);
+fetchMock.get('/veilarbpersonflatefs/api/feature', features);
diff --git a/src/prelansering-side/prelansering-side.less b/src/prelansering-side/prelansering-side.less
@@ -15,17 +15,17 @@
     }
 
     .wrapper-inneholdt {
-      padding: 3rem 2rem 1rem 2rem;
+      padding: 2rem 1rem 1rem 1rem;
       margin-bottom: 0;
-      width: 25rem;
+      width: 27rem;
     }
 
     .info-tekst{
       padding-top: 2rem;
     }
 
     .pcBilde{
-      height: 18rem;
+      height: 19rem;
     }
   }
 }
diff --git a/src/prelansering-side/prelansering-sjekk.tsx b/src/prelansering-side/prelansering-sjekk.tsx
@@ -0,0 +1,32 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import { AlertStripeFeil } from 'nav-frontend-alertstriper';
+import { PRELANSERING_INFO_OM_LOSNING_TOGGLE } from '../rest/feature';
+import Spinner from '../components/felles/spinner/spinner';
+import env from '../utils/environment';
+import { Prelansering } from './prelansering';
+import { useDataFetcherStore } from '../stores/data-fetcher-store';
+import { hasAnyFailed, isAnyNotStartedOrPending, isNotStarted } from '../rest/utils';
+
+
+export function PrelanseringSjekk(props: PropsWithChildren<any>) {
+    const { featuresFetcher } = useDataFetcherStore();
+
+    useEffect(() => {
+        if (isNotStarted(featuresFetcher)) {
+            featuresFetcher.fetch(null);
+        }
+    }, [featuresFetcher]);
+
+    if (isAnyNotStartedOrPending([featuresFetcher])) {
+        return <Spinner />;
+    } else if (hasAnyFailed([featuresFetcher])) {
+        return (
+            <AlertStripeFeil className="vedtaksstotte-alert">
+                Det oppnås for tiden ikke kontakt med alle baksystemer.
+                Vi jobber med å løse saken. Vennligst prøv igjen senere.
+            </AlertStripeFeil>
+        );
+    }
+
+    return (featuresFetcher.data[PRELANSERING_INFO_OM_LOSNING_TOGGLE] && !env.isDevelopment) ? <Prelansering/> : props.children;
+}
diff --git a/src/prelansering-side/prelansering.tsx b/src/prelansering-side/prelansering.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { PrelanseringInfoSide } from './prelansering-side';
+import { PRELANSERING_INFO_OM_LOSNING_TOGGLE } from '../rest/feature';
+import { useDataFetcherStore } from '../stores/data-fetcher-store';
+
+export function Prelansering() {
+    const { featuresFetcher } = useDataFetcherStore();
+
+    return (
+        <>
+            {featuresFetcher.data[PRELANSERING_INFO_OM_LOSNING_TOGGLE] && <PrelanseringInfoSide />}
+        </>
+    );
+}
diff --git a/src/rest/api.ts b/src/rest/api.ts
@@ -1,10 +1,12 @@
 import { FetchInfo } from './utils';
 import { OrNothing } from '../utils/types/ornothing';
 import { UtkastStatus } from './data/bruker';
+import { TOGGLES } from './feature';
 
 export const VEILARBVEDTAKSSTOTTE_API = '/veilarbvedtaksstotte/api';
 export const VEILARBVEILEDER_API = '/veilarbveileder/api';
 export const MODIACONTEXTHOLDER_API = '/modiacontextholder/api';
+export const FEATURE_TOGGLE_URL = '/veilarbpersonflatefs/api/feature';
 
 export interface BeslutteroversiktSok {
 	fra: number;
@@ -38,6 +40,11 @@ export enum OrderByDirection {
 	ASC, DESC
 }
 
+export const lagHentFeaturesFetchInfo = (): FetchInfo => {
+	const toggles = TOGGLES.map(element => 'feature=' + element).join('&');
+	return { url: `${FEATURE_TOGGLE_URL}/?${toggles}` };
+};
+
 export const lagHentBrukereFetchInfo = (params: { sok: BeslutteroversiktSok }): FetchInfo => ({
 	url: `${VEILARBVEDTAKSSTOTTE_API}/beslutteroversikt/sok`,
 	method: 'POST',
diff --git a/src/rest/feature.ts b/src/rest/feature.ts
@@ -0,0 +1,10 @@
+export const PRELANSERING_INFO_OM_LOSNING_TOGGLE = 'pto.vedtaksstotte.pilot';
+
+
+export const TOGGLES = [
+    PRELANSERING_INFO_OM_LOSNING_TOGGLE,
+];
+
+export interface Features {
+    [PRELANSERING_INFO_OM_LOSNING_TOGGLE]: boolean;
+}
diff --git a/src/stores/data-fetcher-store.ts b/src/stores/data-fetcher-store.ts
@@ -3,18 +3,20 @@ import useFetch from '../rest/use-fetch';
 import {
 	BeslutteroversiktSok,
 	lagHentAktivEnhetFetchInfo,
-	lagHentBrukereFetchInfo,
+	lagHentBrukereFetchInfo, lagHentFeaturesFetchInfo,
 	lagHentInnloggetVeilederFetchInfo
 } from '../rest/api';
 import { BrukereMedAntall } from '../rest/data/bruker';
 import { InnloggetVeileder } from '../rest/data/innlogget-veileder';
 import { AktivEnhet } from '../rest/data/aktiv-enhet';
 import { OrNothing } from '../utils/types/ornothing';
+import { Features } from '../rest/feature';
 
 export const useDataFetcherStore = createUseContext(() => {
 	const brukereFetcher = useFetch<BrukereMedAntall, { sok: BeslutteroversiktSok }>(lagHentBrukereFetchInfo);
 	const innloggetVeilederFetcher = useFetch<InnloggetVeileder>(lagHentInnloggetVeilederFetchInfo);
 	const aktivEnhetFetcher = useFetch<OrNothing<AktivEnhet>>(lagHentAktivEnhetFetchInfo);
+	const featuresFetcher = useFetch<Features>(lagHentFeaturesFetchInfo);
 
-	return { brukereFetcher, innloggetVeilederFetcher, aktivEnhetFetcher };
+	return { brukereFetcher, innloggetVeilederFetcher, aktivEnhetFetcher, featuresFetcher };
 });
diff --git a/src/stores/store-provider.tsx b/src/stores/store-provider.tsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { useDataFetcherStore } from './data-fetcher-store';
 import { useSokStore } from './sok-store';
-
 import { ChildrenProps } from '../utils/types/children-props';
+import { SokSync } from '../components/sok-sync';
 
 const StoreProvider = (props: ChildrenProps) => {
 	return (
 		<useDataFetcherStore.Provider>
 			<useSokStore.Provider>
 				{props.children}
+				<SokSync />
 			</useSokStore.Provider>
 		</useDataFetcherStore.Provider>
 	);

Original file line number	Diff line number	Diff line change
`@@ -15,17 +15,17 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.wrapper-inneholdt {`
`18`		`- padding: 3rem 2rem 1rem 2rem;`
	`18`	`+ padding: 2rem 1rem 1rem 1rem;`
`19`	`19`	`margin-bottom: 0;`
`20`		`- width: 25rem;`
	`20`	`+ width: 27rem;`
`21`	`21`	`}`
`22`	`22`
`23`	`23`	`.info-tekst{`
`24`	`24`	`padding-top: 2rem;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.pcBilde{`
`28`		`- height: 18rem;`
	`28`	`+ height: 19rem;`
`29`	`29`	`}`
`30`	`30`	`}`
`31`	`31`	`}`