feature/XW-101/Footer-refactor

pwa/package.json

@@ -4,9 +4,7 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": [
-    "gatsby"
-  ],
+  "keywords": ["gatsby"],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -27,6 +25,8 @@
     "@conduction/components": "2.2.18",
     "@conduction/theme": "1.0.51",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-brands-svg-icons": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.107",

pwa/src/apiService/apiService.ts

@@ -1,8 +1,11 @@
-import axios, { AxiosInstance, AxiosResponse } from "axios";
 import toast from "react-hot-toast";
+import axios, { AxiosInstance, AxiosResponse } from "axios";
+import { removeFileNameFromUrl } from "../services/FileNameFromUrl";
+import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate";
 
 // Resources
 import OpenWoo from "./resources/openWoo";
+import FooterContent from "./resources/footerContent";
 
 interface PromiseMessage {
   loading?: string;
@@ -28,9 +31,22 @@ export default class APIService {
     });
   }
 
+  public get FooterContentClient(): AxiosInstance {
+    return axios.create({
+      baseURL: removeFileNameFromUrl(
+        process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0
+          ? process.env.GATSBY_FOOTER_CONTENT
+          : DEFAULT_FOOTER_CONTENT_URL,
+      ),
+    });
+  }
+
   public get OpenWoo(): OpenWoo {
     return new OpenWoo(this.BaseClient, this.Send);
   }
+  public get FooterContent(): FooterContent {
+    return new FooterContent(this.FooterContentClient, this.Send);
+  }
 
   // Send method
   public Send: TSendFunction = (instance, method, endpoint, payload, promiseMessage) => {

pwa/src/apiService/resources/footerContent.ts

@@ -0,0 +1,18 @@
+import { TSendFunction } from "../apiService";
+import { AxiosInstance } from "axios";
+
+export default class FooterContent {
+  private _instance: AxiosInstance;
+  private _send: TSendFunction;
+
+  constructor(_instance: AxiosInstance, send: TSendFunction) {
+    this._instance = _instance;
+    this._send = send;
+  }
+
+  public getContent = async (fileName: string): Promise<any> => {
+    const { data } = await this._send(this._instance, "GET", fileName);
+
+    return data;
+  };
+}

pwa/src/hooks/footerContent.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useQuery } from "react-query";
+import APIService from "../apiService/apiService";
+import APIContext from "../apiService/apiContext";
+import { getFileNameFromUrl } from "../services/FileNameFromUrl";
+import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate";
+
+export const useFooterContent = () => {
+  const API: APIService | null = React.useContext(APIContext);
+
+  const fileName = getFileNameFromUrl(
+    process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0
+      ? process.env.GATSBY_FOOTER_CONTENT
+      : DEFAULT_FOOTER_CONTENT_URL,
+  );
+
+  const getContent = () =>
+    useQuery<any, Error>(["contents", fileName], () => API?.FooterContent.getContent(fileName), {
+      onError: (error) => {
+        console.warn(error.message);
+      },
+    });
+
+  return { getContent };
+};

pwa/src/layout/Layout.tsx

@@ -8,6 +8,10 @@ import { Head } from "./Head";
 import { Content } from "../Content";
 import { Document, Surface } from "@utrecht/component-library-react/dist/css-module";
 import { Toaster } from "react-hot-toast";
+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";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -19,6 +23,8 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext, location }) => {
   const [API, setAPI] = React.useState<APIService>(React.useContext(APIContext));
   const [globalContext, setGlobalContext] = React.useState<IGlobalContext>(defaultGlobalContext);
 
+  library.add(fas, fab as IconPack, far as IconPack);
+
   React.useEffect(() => {
     setAPI(new APIService());
   }, [pageContext]);

pwa/src/services/FileNameFromUrl.ts

@@ -0,0 +1,9 @@
+export const getFileNameFromUrl = (url: string) => {
+  const finalSlashIndex = url.lastIndexOf("/");
+  return url.substring(finalSlashIndex + 1);
+};
+
+export const removeFileNameFromUrl = (url: string) => {
+  const finalSlashIndex = url.lastIndexOf("/");
+  return url.replace(`/${url.substring(finalSlashIndex + 1)}`, "");
+};

pwa/src/templates/templateParts/footer/FooterContent.json

@@ -0,0 +1,24 @@
+[
+  {
+    "title": "Contact",
+    "items": [
+      {
+        "ariaLabel": "Phone number",
+        "value": "+31 (0)85 3036840",
+        "link": "tel:+31 (0)85 3036840",
+        "icon": { "prefix": "fas", "icon": "phone", "placement": "left" }
+      },
+      {
+        "ariaLabel": "Email address",
+        "value": "[email protected]",
+        "link": "mailto:[email protected]",
+        "icon": { "prefix": "fas", "icon": "envelope", "placement": "left" }
+      },
+      {
+        "label": "Address",
+        "ariaLabel": "Address",
+        "value": "Lauriergracht 14h"
+      }
+    ]
+  }
+]

pwa/src/templates/templateParts/footer/FooterTemplate.module.css

@@ -67,7 +67,7 @@
 .dynamicSectionContent {
   display: flex;
   flex-direction: column;
-  margin-block-end: 8px;
+  margin-block-end: 12px;
 }
 
 .logoAndConduction {
@@ -77,6 +77,13 @@
   align-items: flex-end;
 }
 
+.iconLeft {
+  margin-inline-end: var(--utrecht-icon-gap);
+}
+.iconRight {
+  margin-inline-start: var(--utrecht-icon-gap);
+}
+
 @media only screen and (max-width: 992px) {
   /* Tablet */
   .contentGrid {