Merge pull request #176 from ConductionNL/feature/XW-111/koophulpje

Feature/xw 111/koophulpje

pwa/src/Content.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as styles from "./Content.module.css";
 import { FooterTemplate } from "./templates/templateParts/footer/FooterTemplate";
 import { HeaderTemplate } from "./templates/templateParts/header/HeaderTemplate";
+import { ThemeSwitcherTopBar } from "./templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar";
 
 interface ContentProps {
   children: React.ReactNode;
@@ -10,6 +11,8 @@ interface ContentProps {
 export const Content: React.FC<ContentProps> = ({ children }) => {
   return (
     <div className={styles.container}>
+      <ThemeSwitcherTopBar />
+
       <HeaderTemplate layoutClassName={styles.header} />
 
       <div className={styles.pageContent}>{children}</div>

pwa/src/hooks/footerContent.ts

@@ -11,11 +11,15 @@ export const useFooterContent = () => {
   const fileName = getFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL);
 
   const getContent = () =>
-    useQuery<any, Error>(["contents", fileName], () => API?.FooterContent.getContent(fileName), {
-      onError: (error) => {
-        console.warn(error.message);
+    useQuery<any, Error>(
+      ["contents", window.sessionStorage.getItem("FOOTER_CONTENT")],
+      () => API?.FooterContent.getContent(fileName),
+      {
+        onError: (error) => {
+          console.warn(error.message);
+        },
       },
-    });
+    );
 
   return { getContent };
 };

pwa/src/hooks/openWoo.ts

@@ -9,7 +9,7 @@ export const useOpenWoo = (queryClient: QueryClient) => {
 
   const getAll = (filters: IFiltersContext, currentPage: number, limit: number) =>
     useQuery<any, Error>(
-      ["OpenWoo", filters, currentPage, limit],
+      ["OpenWoo", filters, currentPage, limit, window.sessionStorage.getItem("OIDN_NUMBER")],
       () => API?.OpenWoo.getAll(filters, currentPage, limit),
       {
         onError: (error) => {
@@ -19,13 +19,17 @@ export const useOpenWoo = (queryClient: QueryClient) => {
     );
 
   const getOne = (requestId: string) =>
-    useQuery<any, Error>(["OpenWoo", requestId], () => API?.OpenWoo.getOne(requestId), {
-      initialData: () => queryClient.getQueryData<any[]>("OpenWoo")?.find((_OpenWoo) => _OpenWoo.id === requestId),
-      onError: (error) => {
-        throw new Error(error.message);
+    useQuery<any, Error>(
+      ["OpenWoo", requestId, window.sessionStorage.getItem("OIDN_NUMBER")],
+      () => API?.OpenWoo.getOne(requestId),
+      {
+        initialData: () => queryClient.getQueryData<any[]>("OpenWoo")?.find((_OpenWoo) => _OpenWoo.id === requestId),
+        onError: (error) => {
+          throw new Error(error.message);
+        },
+        enabled: !!requestId,
       },
-      enabled: !!requestId,
-    });
+    );
 
   return { getAll, getOne };
 };

pwa/src/hooks/useEnvironment.ts

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { getConfig } from "../services/getConfig";
+import { uniqueId } from "lodash";
+
+export const useEnvironment = () => {
+  const [, setSessionStorageUpdatedId] = React.useState("-1");
+
+  const handleStorageChange = () => {
+    setSessionStorageUpdatedId(uniqueId());
+    themeSwitcherMiddleware();
+  };
+
+  const updateSessionStorage = () => {
+    window.dispatchEvent(new Event("sessionStorageChange"));
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("sessionStorageChange", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("sessionStorageChange", handleStorageChange);
+    };
+  }, []);
+
+  const initiateFromEnv = () => {
+    window.sessionStorage.setItem("SHOW_THEME_SWITCHER", process.env.GATSBY_SHOW_THEME_SWITCHER ?? "");
+    window.sessionStorage.setItem("API_BASE_URL", process.env.GATSBY_API_BASE_URL ?? "");
+    window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+    window.sessionStorage.setItem("FAVICON_URL", process.env.GATSBY_FAVICON_URL ?? "");
+    window.sessionStorage.setItem("ORGANISATION_NAME", process.env.GATSBY_ORGANISATION_NAME ?? "");
+    window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", process.env.GATSBY_JUMBOTRON_IMAGE_URL ?? "");
+    window.sessionStorage.setItem("FOOTER_LOGO_HREF", process.env.GATSBY_FOOTER_LOGO_HREF ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT", process.env.GATSBY_FOOTER_CONTENT ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
+    window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? "");
+
+    updateSessionStorage();
+  };
+
+  const initiateFromJSON = (themeOrDomainName: string) => {
+    const config = getConfig(themeOrDomainName);
+
+    if (!config) return; // no config found, nothing else to do
+
+    window.sessionStorage.setItem("SHOW_THEME_SWITCHER", config.GATSBY_SHOW_THEME_SWITCHER ?? "");
+    window.sessionStorage.setItem("API_BASE_URL", config.GATSBY_API_BASE_URL ?? "");
+    window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", config.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+    window.sessionStorage.setItem("FAVICON_URL", config.GATSBY_FAVICON_URL ?? "");
+    window.sessionStorage.setItem("ORGANISATION_NAME", config.GATSBY_ORGANISATION_NAME ?? "");
+    window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", config.GATSBY_JUMBOTRON_IMAGE_URL ?? "");
+    window.sessionStorage.setItem("FOOTER_LOGO_HREF", config.GATSBY_FOOTER_LOGO_HREF ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? "");
+    window.sessionStorage.setItem("OIDN_NUMBER", config.GATSBY_OIDN_NUMBER ?? "");
+
+    updateSessionStorage();
+  };
+
+  const themeSwitcherMiddleware = () => {
+    switch (window.location.hostname) {
+      case "koophulpje.nl":
+        // case "localhost": // development purposes
+        window.sessionStorage.setItem("SHOW_THEME_SWITCHER", "true");
+        break;
+    }
+
+    if (process.env.GATSBY_SHOW_THEME_SWITCHER === "true") window.sessionStorage.setItem("SHOW_THEME_SWITCHER", "true");
+  };
+
+  return { initiateFromEnv, initiateFromJSON };
+};

pwa/src/layout/Layout.tsx

@@ -12,7 +12,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 import { fab } from "@fortawesome/free-brands-svg-icons";
 import { far } from "@fortawesome/free-regular-svg-icons";
 import { IconPack, library } from "@fortawesome/fontawesome-svg-core";
-import { initiateEnvironment } from "../services/initiateEnvironment";
+import { useEnvironment } from "../hooks/useEnvironment";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -23,11 +23,16 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children, pageContext, location }) => {
   const [API, setAPI] = React.useState<APIService>(React.useContext(APIContext));
   const [globalContext, setGlobalContext] = React.useState<IGlobalContext>(defaultGlobalContext);
+  const { initiateFromEnv, initiateFromJSON } = useEnvironment();
 
   library.add(fas, fab as IconPack, far as IconPack);
 
   React.useEffect(() => {
-    initiateEnvironment();
+    if (process.env.GATSBY_ENV_VARS_SET === "true") {
+      initiateFromEnv();
+    } else {
+      initiateFromJSON(window.location.hostname);
+    }
   }, []);
 
   React.useEffect(() => {

pwa/src/services/getConfig.ts

@@ -3,27 +3,78 @@ import Dinkelland from "./../../static/configFiles/dinkelland.json";
 import Epe from "./../../static/configFiles/epe.json";
 import Noaberkracht from "./../../static/configFiles/noaberkracht.json";
 import Noordwijk from "./../../static/configFiles/noordwijk.json";
+import OpenWebconcept from "./../../static/configFiles/open-webconcept.json";
 import Rotterdam from "./../../static/configFiles/rotterdam.json";
 import Tubbergen from "./../../static/configFiles/tubbergen.json";
 import Xxllnc from "./../../static/configFiles/xxllnc.json";
 
-export const getConfig = (domain: string): Record<string, any> | undefined => {
-  switch (domain) {
+export const getConfig = (themeOrDomainName: string): Record<string, any> | undefined => {
+  switch (themeOrDomainName) {
     case "open.epe.nl":
-      return Epe as Record<string, any>;
+    case "epe-theme":
+      return Epe;
     case "open.noordwijk.nl":
-      return Noordwijk as Record<string, any>;
-    // case "open.rotterdam.nl":
-    //   return Rotterdam as Record<string, any>;
-    // case "open.noaberkracht.nl":
-    //   return Noaberkracht as Record<string, any>;
-    // case "open.tubbergen.nl":
-    //   return Tubbergen as Record<string, any>;
-    // case "open.dinkelland.nl":
-    //   return Dinkelland as Record<string, any>;
-    // case "open.xxllnc.nl":
-    //   return Xxllnc as Record<string, any>;
+    case "noordwijk-theme":
+      return Noordwijk;
+    case "open.rotterdam.nl":
+    case "rotterdam-theme":
+      return Rotterdam;
+    case "open.noaberkracht.nl":
+    case "noaberkracht-theme":
+      return Noaberkracht;
+    case "open.tubbergen.nl":
+    case "tubbergen-theme":
+      return Tubbergen;
+    case "open.dinkelland.nl":
+    case "dinkelland-theme":
+      return Dinkelland;
+    case "open.xxllnc.nl":
+    case "xxllnc-theme":
+      return Xxllnc;
+    case "koophulpje.nl":
+    case "open-webconcept-theme":
+      // case "localhost": // development purposes
+      return OpenWebconcept;
     default:
-      return Conduction as Record<string, any>;
+      return Conduction;
   }
 };
+
+export const availableThemes: { label: string; value: string }[] = [
+  {
+    label: "Koophulpje",
+    value: "open-webconcept-theme",
+  },
+  {
+    label: "Conduction",
+    value: "conduction-theme",
+  },
+  {
+    label: "Dinkelland",
+    value: "dinkelland-theme",
+  },
+  {
+    label: "Epe",
+    value: "epe-theme",
+  },
+  {
+    label: "Noaberkracht",
+    value: "noaberkracht-theme",
+  },
+  {
+    label: "Noordwijk",
+    value: "noordwijk-theme",
+  },
+  {
+    label: "Rotterdam",
+    value: "rotterdam-theme",
+  },
+  {
+    label: "Tubbergen",
+    value: "tubbergen-theme",
+  },
+  {
+    label: "XXLLNC",
+    value: "xxllnc-theme",
+  },
+];

pwa/src/templates/templateParts/footer/FooterTemplate.tsx

@@ -43,16 +43,9 @@ type TDynamicContentItem = {
 };
 
 export const FooterTemplate: React.FC = () => {
-  const [footerContent, setFooterContent] = React.useState<TDynamicContentItem[]>([]);
-
   const _useFooterContent = useFooterContent();
   const getFooterContent = _useFooterContent.getContent();
 
-  // For production
-  React.useEffect(() => {
-    setFooterContent(getFooterContent.data);
-  }, [getFooterContent]);
-
   // For development
   // React.useEffect(() => {
   //   const data = require("./FooterContent.json");
@@ -63,7 +56,7 @@ export const FooterTemplate: React.FC = () => {
     <PageFooter className={styles.footer}>
       <div className={styles.container}>
         <div className={styles.contentGrid}>
-          {footerContent?.map((content, idx) => (
+          {getFooterContent.data?.map((content: any, idx: string) => (
             <DynamicSection key={idx} {...{ content }} />
           ))}
         </div>

pwa/src/templates/templateParts/themeSwitcherTopBar/ThemeSwitcherTopBar.module.css

@@ -0,0 +1,22 @@
+.container {
+  top: 12px;
+  width: 80%;
+  z-index: 100;
+  padding: 12px 32px;
+  display: flex;
+  position: sticky;
+  border-radius: 5px;
+  align-items: center;
+  margin: 0 auto 24px;
+  background-color: white;
+  justify-content: space-between;
+  box-shadow: rgb(0, 0, 0, 0.1) 0px 0px 11px 0px;
+}
+
+.container > * {
+  flex: 1;
+}
+
+.label {
+  font-weight: 700 !important;
+}