Merge pull request #293 from City-of-Helsinki/UHF-11043

UHF-11043: Style the Askem block with InfoFinland styling

.env.example.local

@@ -61,3 +61,18 @@ SENTRY_PROJECT='infofinland-ui'
 SENTRY_URL="https://sentry.test.hel.ninja"
 ## Source map uploading, get auth token from azure keyvault.
 # SENTRY_AUTH_TOKEN=xxxx
+
+## Askem (previously known as React & Share)
+## Uncomment the following lines and add the API-keys from askem.com to use the tool locally.
+# REACT_AND_SHARE_APIKEY_FI=example_api_key
+# REACT_AND_SHARE_APIKEY_SV=example_api_key
+# REACT_AND_SHARE_APIKEY_EN=example_api_key
+# REACT_AND_SHARE_APIKEY_RU=example_api_key
+# REACT_AND_SHARE_APIKEY_ET=example_api_key
+# REACT_AND_SHARE_APIKEY_UK=example_api_key
+# REACT_AND_SHARE_APIKEY_FR=example_api_key
+# REACT_AND_SHARE_APIKEY_ES=example_api_key
+# REACT_AND_SHARE_APIKEY_TR=example_api_key
+# REACT_AND_SHARE_APIKEY_ZH=example_api_key
+# REACT_AND_SHARE_APIKEY_FA=example_api_key
+# REACT_AND_SHARE_APIKEY_AR=example_api_key

pages/[[...slug]].jsx

@@ -265,8 +265,8 @@ export async function getStaticProps(context) {
  * Layout selector
  */
 const Page = (props) => {
-  const {node} = props;
-  useAddAskem(node.langcode, node.title);
+  const { node } = props
+  useAddAskem(node.langcode, node.title)
 
   if (props?.type === NODE_TYPES.LANDING_PAGE) {
     return <HomePage {...props} />

postcss.config.js

@@ -4,6 +4,7 @@
 module.exports = {
   plugins: {
     'postcss-import': {},
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),

sentry.client.config.js

@@ -5,8 +5,11 @@
 import * as Sentry from '@sentry/nextjs'
 import getConfig from 'next/config'
 
-const { SENTRY_DSN_PUBLIC: dsn, SENTRY_RELEASE: release, SENTRY_ENVIRONMENT: environment } =
-  getConfig().publicRuntimeConfig
+const {
+  SENTRY_DSN_PUBLIC: dsn,
+  SENTRY_RELEASE: release,
+  SENTRY_ENVIRONMENT: environment,
+} = getConfig().publicRuntimeConfig
 
 Sentry.init({
   dsn,

sentry.edge.config.js

@@ -6,8 +6,11 @@
 import * as Sentry from '@sentry/nextjs'
 import getConfig from 'next/config'
 
-const { SENTRY_DSN: dsn, SENTRY_RELEASE: release, SENTRY_ENVIRONMENT: environment } =
-  getConfig().serverRuntimeConfig
+const {
+  SENTRY_DSN: dsn,
+  SENTRY_RELEASE: release,
+  SENTRY_ENVIRONMENT: environment,
+} = getConfig().serverRuntimeConfig
 
 Sentry.init({
   dsn,

sentry.server.config.js

@@ -5,8 +5,11 @@
 import * as Sentry from '@sentry/nextjs'
 import getConfig from 'next/config'
 
-const { SENTRY_DSN: dsn, SENTRY_RELEASE: release, SENTRY_ENVIRONMENT: environment } =
-  getConfig().serverRuntimeConfig
+const {
+  SENTRY_DSN: dsn,
+  SENTRY_RELEASE: release,
+  SENTRY_ENVIRONMENT: environment,
+} = getConfig().serverRuntimeConfig
 
 Sentry.init({
   dsn,

src/components/Askem.jsx

@@ -2,11 +2,15 @@ import cls from 'classnames'
 
 const Askem = () => {
   return (
-    <section className="feedback">
-      <div className={cls('askem px-2 lg:px-0 lg:mx-12 xl:mx-28 2xl:mx-48  3xl:ms-64  3xl:max-w-4xl','h-20')}>
-      </div>
+    <section className="bg-blue-white feedback">
+      <div
+        className={cls(
+          'askem px-2 lg:px-0 lg:mx-12 xl:mx-28 2xl:mx-48  3xl:ms-64  3xl:max-w-4xl',
+          'h-20'
+        )}
+      ></div>
     </section>
   )
 }
 
-export default Askem;
+export default Askem

src/components/navi/Menu.jsx

@@ -4,7 +4,7 @@ import SubMenu from '@/components/navi/SubMenu'
 import useLocalizedPath from '@/hooks/useRouterWithLocalizedPath'
 import { findRootForPath, getRootPages } from '@/lib/menu-utils'
 import { IconExclamationCircle } from '../Icons'
-import NaviLink from "@/components/navi/NaviLink";
+import NaviLink from '@/components/navi/NaviLink'
 
 const getThemeIndexByPathName = ({ items, path }) => {
   let index

src/components/navi/NaviLink.jsx

@@ -1,19 +1,19 @@
-import router from 'next/router';
+import router from 'next/router'
 
 /**
  * Navigation link without Next.js prefetch.
  */
 function NaviLink({ href, children, ...props }) {
   function handleOnClick(e) {
-    e.preventDefault();
-    router.push(href);
+    e.preventDefault()
+    router.push(href)
   }
 
   return (
     <a href={href} {...props} onClick={handleOnClick}>
       {children}
     </a>
-  );
+  )
 }
 
-export default NaviLink;
+export default NaviLink

src/components/navi/SubMenu.jsx

@@ -4,7 +4,7 @@ import useLocalizedPath from '@/hooks/useRouterWithLocalizedPath'
 import { useTranslation } from 'next-i18next'
 import { useEffect } from 'react'
 import { useRef } from 'react'
-import NaviLink from "@/components/navi/NaviLink";
+import NaviLink from '@/components/navi/NaviLink'
 
 const SubMenuItem = ({ title, url, selected, items, level, isOpen }) => {
   return (

src/hooks/useAddAskem.js

@@ -4,47 +4,45 @@ import { loadAskemScript } from '@/lib/askem'
 
 // Only set the script tag once and reset after locale or title changes.
 const useAddAskem = async (locale, title) => {
-  let apiKey = useRef('');
+  let apiKey = useRef('')
 
   useEffect(() => {
-    doAskemReset();
+    doAskemReset()
 
     // Wait for the askem-libary to be initialized on first page load
     // or just reset the library.
-    async function doAskemReset(){
-      let reset = null;
-      const configKey = `REACT_AND_SHARE_APIKEY_${locale.toUpperCase()}`;
-      apiKey.current = getConfig().publicRuntimeConfig[configKey.toUpperCase()];
+    async function doAskemReset() {
+      let reset = null
+      const configKey = `REACT_AND_SHARE_APIKEY_${locale.toUpperCase()}`
+      apiKey.current = getConfig().publicRuntimeConfig[configKey.toUpperCase()]
 
       if (!apiKey.current) {
-        return () => {};
+        return () => {}
       }
 
-      setSettings();
-      reset = await loadAskemScript().catch((error)=>{
-        console.log(`An error occurred while loading Askem script: ${error}`);
-      });
-      reset();
+      setSettings()
+      reset = await loadAskemScript().catch((error) => {
+        console.log(`An error occurred while loading Askem script: ${error}`)
+      })
+      reset()
 
-      return () => {};
+      return () => {}
     }
 
     function setSettings() {
       const settings = {
         apiKey: apiKey.current,
         title: title,
         canonicalUrl: window.location.href,
-        disableFonts: true
+        disableFonts: true,
       }
       if (window.askem) {
         window.askem.settings = settings
-      }
-      else {
-        window.askem = {settings: settings}
+      } else {
+        window.askem = { settings: settings }
       }
     }
-
-  }, [locale, title]);
+  }, [locale, title])
 }
 
-export default useAddAskem;
+export default useAddAskem

src/lib/askem.js

@@ -7,36 +7,36 @@ const loadAskemScript = () => {
       document.body.append(getAskemScriptTag())
     }
 
-    let i = 1;
-    const max = 3;
+    let i = 1
+    const max = 3
 
-    const intervalId = setInterval(()=> {
+    const intervalId = setInterval(() => {
       if (window.askem.reset) {
-        resolve(window.askem.reset);
-        clearInterval(intervalId);
-        return;
+        resolve(window.askem.reset)
+        clearInterval(intervalId)
+        return
       }
       if (i > max) {
-        reject(false);
-        clearInterval(intervalId);
-        return;
+        reject(false)
+        clearInterval(intervalId)
+        return
       }
-      i++;
-    }, 750);
+      i++
+    }, 750)
   })
 }
 
 const removeAskemScript = () => {
-  document.body.removeChild(getAskemScriptTag());
+  document.body.removeChild(getAskemScriptTag())
 }
 
 const getAskemScriptTag = () => {
-  const script = document.createElement('script');
-  script.src = 'https://cdn.askem.com/plugin/askem.js';
-  script.type = 'text/javascript';
-  script.id = 'if-askem-script';
+  const script = document.createElement('script')
+  script.src = 'https://cdn.askem.com/plugin/askem.js'
+  script.type = 'text/javascript'
+  script.id = 'if-askem-script'
 
-  return script;
+  return script
 }
 
-export {loadAskemScript, getAskemScriptTag, removeAskemScript};
+export { loadAskemScript, getAskemScriptTag, removeAskemScript }

src/lib/elastic-notes.md

@@ -1,6 +1,5 @@
 CERT TESTING
 
+- IP:port , nocerts, user/pw -> error: self signed cert
 
-- IP:port , nocerts, user/pw  -> error: self signed cert
-
-- IP:port , ssl- public-cert, user/pw   error: self signed cert
+- IP:port , ssl- public-cert, user/pw error: self signed cert

src/lib/query-params.js

@@ -185,7 +185,12 @@ export const getMunicipalityParams = () =>
 
 export const getMenuParams = () =>
   new DrupalJsonApiParams()
-    .addFields(CONTENT_TYPES.MENU_LINK_CONTENT, ['id', 'url', 'title','parent'])
+    .addFields(CONTENT_TYPES.MENU_LINK_CONTENT, [
+      'id',
+      'url',
+      'title',
+      'parent',
+    ])
     .getQueryObject()
 
 export const getLocalInfoParams = () =>

src/lib/ssr-api.js

@@ -1,7 +1,11 @@
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params'
 import getConfig from 'next/config'
 import { CONTENT_TYPES, NODE_TYPES } from './DRUPAL_API_TYPES'
-import { getMenuParams, getMunicipalityParams, getThemeHeroParams } from './query-params'
+import {
+  getMenuParams,
+  getMunicipalityParams,
+  getThemeHeroParams,
+} from './query-params'
 import { getHeroFromNode, getRedirect } from './ssr-helpers'
 
 import { getQueryParamsFor } from './query-params'
@@ -314,17 +318,20 @@ export const getCachedMunicipalities = async ({ locale, withAuth }) => {
 }
 
 export const getMunicipalities = async ({ locale, withAuth }) =>
-  getDrupalClient(withAuth).getResourceCollection(CONTENT_TYPES.MUNICIPALITY, {
-    locale,
-    defaultLocale: NO_DEFAULT_LOCALE,
-    params: getMunicipalityParams(),
-  }).then(
-    // Filter unused properties:
-    municipalities => municipalities.map(municipality => ({
-      id: municipality.id,
-      name: municipality.name,
-    }))
-  )
+  getDrupalClient(withAuth)
+    .getResourceCollection(CONTENT_TYPES.MUNICIPALITY, {
+      locale,
+      defaultLocale: NO_DEFAULT_LOCALE,
+      params: getMunicipalityParams(),
+    })
+    .then(
+      // Filter unused properties:
+      (municipalities) =>
+        municipalities.map((municipality) => ({
+          id: municipality.id,
+          name: municipality.name,
+        }))
+    )
 
 export const getFeedbackPage = async ({ locale }) => {
   const { FEEDBACK_PAGE_PATH } = getConfig().serverRuntimeConfig