feat(WEB-93): add Header to CMS and render it in Next

components/Current/AdobeScript.tsx

@@ -0,0 +1,23 @@
+import { env } from "@/env/server"
+
+import Script from "next/script"
+
+const scriptScrs = {
+  // TODO: decide on naming and environments (development vs. test vs. staging etc)
+  development: "",
+  test: "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-84c70d82a50c-staging.min.js",
+  production:
+    "https://assets.adobedtm.com/c1bd08b1e4e7/d64a7c1f5f17/launch-e56085bbe998.min.js",
+}
+
+export default function AdobeScript() {
+  return (
+    <>
+      <Script
+        strategy="beforeInteractive"
+        id="ensure-datalayer"
+      >{`window.datalayer = window.datalayer || {}`}</Script>
+      <Script src={scriptScrs[env.NODE_ENV]} />
+    </>
+  )
+}

components/Current/Aside/Puffs/Puff/index.tsx

@@ -1,12 +1,12 @@
 import { renderOptions } from "./renderOptions"
 
+import Image from "@/components/Image"
 import JsonToHtml from "@/components/JsonToHtml"
 import Link from "next/link"
 
 import styles from "./puff.module.css"
 
 import type { PuffProps } from "@/types/components/current/asides/puff"
-import Image from "@/components/Image"
 
 export default function Puff({
   imageConnection,
@@ -22,7 +22,7 @@ export default function Puff({
       return null
     }
     return (
-      <Link className={styles.link} href={page.node.url}>
+      <Link className={styles.link} href={`/${page.node.system.locale}${page.node.url}`}>
         <PuffContent
           imageConnection={imageConnection}
           text={text}

components/Current/ContentPage/index.tsx

@@ -1,6 +1,5 @@
 import Aside from "@/components/Current/Aside"
 import Blocks from "@/components/Current/Blocks"
-import Header from "@/components/Current/Header"
 import Hero from "@/components/Current/Hero"
 import Preamble from "@/components/Current/Preamble"
 import Section from "@/components/Current/Section"
@@ -10,7 +9,7 @@ import styles from "./contentPage.module.css"
 
 import type { ContentPageProps } from "@/types/components/current/contentPage"
 
-export default function ContentPage({ data, lang, uri }: ContentPageProps) {
+export default function ContentPage({ data }: ContentPageProps) {
   const page = data.all_current_blocks_page.items[0]
   const images = page.hero?.imagesConnection
   const breadcrumbs = page.breadcrumbs.parentsConnection
@@ -18,7 +17,6 @@ export default function ContentPage({ data, lang, uri }: ContentPageProps) {
 
   return (
     <>
-      <Header lang={lang} pathname={uri} />
       {images?.totalCount ? <Hero images={images.edges} /> : null}
       <main className={styles.wrapper} id="maincontent" role="main">
         <input

components/Current/Header/MainMenu/index.tsx

@@ -0,0 +1,102 @@
+"use client"
+import { useState } from "react"
+
+import Image from "@/components/Image"
+import Link from "next/link"
+// import Mobile from "../LanguageSwitcher/Mobile"
+
+import styles from "./mainMenu.module.css"
+
+import type { MainMenuProps } from "@/types/components/current/header/mainMenu"
+
+/**
+ * Mobile is commented out as it relates to
+ * LanguageSwitcher and will be handled in another task
+ */
+export default function MainMenu({ frontpageLinkText, homeHref, links, logo, topMenuMobileLinks }: MainMenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  function toogleIsOpen() {
+    setIsOpen(prevIsOpen => !prevIsOpen)
+  }
+
+  return (
+    <div className={styles.mainMenu}>
+      <div
+        className={styles.container}
+        itemScope
+        itemType="http://schema.org/Organization"
+      >
+        <meta itemProp="name" content="Scandic" />
+        <button
+          aria-pressed="false"
+          className={`${styles.expanderBtn} ${isOpen ? styles.expanded : ""}`}
+          data-js="main-nav-toggler"
+          data-target="#main-menu"
+          onClick={toogleIsOpen}
+          type="button"
+        >
+          <span className={styles.iconBars}></span>
+          <span className={styles.hiddenAccessible}>Menu</span>
+        </button>
+
+        <Link
+          className={styles.logoLink}
+          href={homeHref}
+          id="scandic-logo"
+          itemProp="url"
+        >
+          <span className={styles.hiddenAccessible}>
+            {frontpageLinkText}
+          </span>
+          <Image
+            alt="Scandic Hotels logo"
+            className={styles.logo}
+            data-js="scandiclogoimg"
+            data-nosvgsrc="/Static/img/scandic-logotype.png"
+            itemProp="logo"
+            height={22}
+            src={logo.url}
+            width={logo.dimension.width}
+          />
+        </Link>
+
+        <nav>
+          <ul
+            className={`${styles.list} ${isOpen ? styles.isOpen : ""}`}
+            data-collapsable="main-menu"
+            id="main-menu"
+          >
+            {links.map(({ link }) => (
+              <li
+                className={styles.li}
+                key={link.href}
+              >
+                <Link
+                  className={styles.link}
+                  href={link.href}
+                >
+                  {link.title}
+                </Link>
+              </li>
+            ))}
+
+            <ul className={styles.mobileList}>
+              {topMenuMobileLinks.map(({ link }) => (
+                <li className={styles.mobileLi} key={link.href}>
+                  <Link className={styles.mobileLink} href={link.href}>
+                    {link.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+
+            {/* <li className="nav-primary__item hidden-medium hidden-large">
+            {links ? <Mobile currentLanguage={currentLanguage} links={links} /> : null}
+          </li> */}
+          </ul>
+        </nav>
+      </div>
+    </div>
+  )
+}

components/Current/Header/MainMenu/mainMenu.module.css

@@ -0,0 +1,219 @@
+.mainMenu {
+  background-color: #fff;
+  background-image: none;
+  position: fixed;
+  top: 0;
+  max-height: 100%;
+  width: 100%;
+  z-index: 99999;
+  overflow: visible;
+}
+
+.container {
+  box-sizing: content-box;
+  display: grid;
+  /** Third column is Book button */
+  grid-template-columns: repeat(3, 1fr);
+  height: 100%;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0;
+}
+
+.expanderBtn {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  justify-self: flex-start;
+  left: 0;
+  padding: 0.75rem 0.5rem 1rem;
+  transition: .3s;
+  user-select: none;
+}
+
+.iconBars,
+.iconBars::after,
+.iconBars::before {
+  background: #757575;
+  border-radius: 0.1428571429rem;
+  display: inline-block;
+  height: 0.2857142857rem;
+  position: relative;
+  transition: .3s;
+  width: 2rem;
+}
+
+.iconBars::after,
+.iconBars::before {
+  content: "";
+  left: 0;
+  position: absolute;
+  transform-origin: 0.1428571429rem center;
+}
+
+.iconBars::after {
+  top: -0.5rem;
+}
+
+.iconBars::before {
+  top: 0.5rem;
+}
+
+.expanded .iconBars {
+  background: transparent;
+}
+
+.expanded .iconBars::after,
+.expanded .iconBars::before {
+  top: 0;
+  transform-origin: 50% 50%;
+  width: 2rem;
+}
+
+.expanded .iconBars::after {
+  transform: rotate(-45deg);
+}
+
+.expanded .iconBars::before {
+  transform: rotate(45deg);
+}
+
+.hiddenAccessible {
+  display: block;
+  height: 1px;
+  left: -100000em;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+
+.logoLink {
+  align-items: center;
+  display: flex;
+  justify-self: center;
+}
+
+.list {
+  background-color: #fff;
+  border-top: 1px solid #e3e0db;
+  display: none;
+  list-style: none;
+  overflow-y: visible;
+  padding-bottom: 20px;
+}
+
+.list.isOpen {
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+
+.li {
+  border-bottom: none;
+  display: block;
+  line-height: 17px;
+  position: relative;
+  text-align: center;
+}
+
+.link {
+  color: #000;
+  display: block;
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-size: .875rem;
+  font-weight: 700;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  text-transform: uppercase;
+}
+
+.link:hover {
+  color: #7f7369;
+  text-decoration: none;
+}
+
+.mobileList {
+  padding-top: 6px;
+}
+
+.mobileLi {
+  display: block;
+  position: relative;
+  text-align: center;
+}
+
+.mobileLink {
+  color: #000;
+  display: block;
+  font-family: Helvetica;
+  font-size: .875rem;
+  padding: 5px 0;
+}
+
+@media screen and (max-width: 950px) {
+  .logoLink {
+    width: 5rem;
+  }
+
+  .li {
+    background-color: #f3f2f1;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .mainMenu {
+    background-color: hsla(0, 0%, 100%, .95);
+    position: relative;
+  }
+
+  .container {
+    gap: 30px;
+    grid-template-columns: minmax(100px, auto) 1fr;
+    padding: 0px 30px;
+  }
+
+  .expanderBtn {
+    display: none;
+  }
+
+  .logo {
+    max-width: none;
+    min-width: 98px;
+    width: auto;
+  }
+
+  .list {
+    border-top: none;
+    display: block;
+    padding-bottom: 0;
+    padding-top: 0;
+    position: static;
+    width: 100%;
+  }
+
+  .list.isOpen {
+    position: static;
+  }
+
+  .li {
+    display: table-cell;
+    float: none;
+    vertical-align: middle;
+  }
+
+  .link {
+    background-image: none;
+    font-family: Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    line-height: 1.15;
+    padding: 30px 15px;
+  }
+
+  .mobileList {
+    display: none;
+    padding-top: 0px;
+  }
+}

components/Current/Header/OfflineBanner/banner.module.css

@@ -0,0 +1,23 @@
+.banner {
+  align-items: center;
+  background: #606060;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  position: relative;
+  z-index: 10;
+}
+
+.hidden {
+  display: none;
+}
+
+.reloadBtn {
+  color: #fff;
+  background-color: #00838e;
+  border: 0;
+  border-radius: 18px;
+  outline: 0 none;
+  padding: 5px 15px;
+}

components/Current/Header/OfflineBanner/index.tsx

@@ -0,0 +1,10 @@
+import styles from "./banner.module.css"
+
+export default function OfflineBanner() {
+  return (
+    <div className={`${styles.banner} ${styles.hidden}`}>
+      You are offline, some content may be out of date.
+      <button className={styles.reloadBtn} type="button">Reload</button>
+    </div>
+  )
+}

components/Current/Header/TopMenu/index.tsx

@@ -0,0 +1,41 @@
+// import Desktop from "../LanguageSwitcher/Desktop"
+import Link from "next/link"
+
+import styles from "./topMenu.module.css"
+
+import type { TopMenuProps } from "@/types/components/current/header/topMenu"
+
+/**
+ * Desktop is commented out as it relates to
+ * LanguageSwitcher and will be handled in another task
+ */
+export default function TopMenu({ frontpageLinkText, homeHref, links }: TopMenuProps) {
+  return (
+    <div className={styles.topMenu}>
+      <div className={styles.container}>
+        <Link
+          className={styles.homeLink}
+          href={homeHref}
+        >
+          {frontpageLinkText}
+        </Link>
+
+        <ul className={styles.list}>
+          {/* <li className="nav-secondary__item hidden-xxsmall hidden-xsmall hidden-small">
+          {links ? <Desktop currentLanguage={currentLanguage} links={links} /> : null}
+        </li> */}
+          {links.map(({ link }) => (
+            <li key={link.href}>
+              <Link
+                className={styles.link}
+                href={link.href}
+              >
+                {link.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}

components/Current/Header/TopMenu/topMenu.module.css

@@ -0,0 +1,51 @@
+.topMenu {
+  background-color: #8d3a7c;
+  color: #fff;
+  display: none;
+  font-size: .8125rem;
+  position: relative;
+  z-index: 1;
+}
+
+.container {
+  box-sizing: content-box;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 auto;
+  max-width: 1200px;
+  padding: 0 10px;
+}
+
+.homeLink {
+  display: none;
+}
+
+.list {
+  display: flex;
+  list-style: none;
+}
+
+.link {
+  color: #fff;
+  display: inline-block;
+  padding: 3px 10px;
+  text-decoration: none;
+}
+
+@media screen and (min-width: 740px) {
+  .container {
+    padding: 0 30px;
+  }
+}
+
+@media screen and (min-width: 950px) {
+  .topMenu {
+    background-color: #3d3835;
+    display: block;
+  }
+
+  .link {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}

components/Current/Header/header.module.css

@@ -0,0 +1,3 @@
+.header {
+  display: grid;
+}

components/Current/Header/index.tsx

@@ -1,30 +1,47 @@
-import { langEnum } from "@/types/lang"
+import { request } from "@/lib/request"
+import { GetHeader } from "@/lib/graphql/Query/Header.graphql"
 
-import Da from "./Da"
-import De from "./De"
-import En from "./En"
-import Fi from "./Fi"
-import No from "./No"
-import Sv from "./Sv"
+import MainMenu from "./MainMenu"
+import OfflineBanner from "./OfflineBanner"
+import TopMenu from "./TopMenu"
+
+import styles from "./header.module.css"
 
-import type { HeaderProps } from "@/types/components/current/header"
 import { LangParams } from "@/types/params"
+import type { HeaderQueryData } from "@/types/requests/header"
 
-export default function Header({ lang, pathname }: LangParams & HeaderProps) {
-  switch (lang) {
-    case langEnum.sv:
-      return <Sv pathname={pathname} />
-    case langEnum.fi:
-      return <Fi pathname={pathname} />
-    case langEnum.en:
-      return <En pathname={pathname} />
-    case langEnum.da:
-      return <Da pathname={pathname} />
-    case langEnum.de:
-      return <De pathname={pathname} />
-    case langEnum.no:
-      return <No pathname={pathname} />
-    default:
+export default async function Header({ lang }: LangParams) {
+  try {
+    const { data } = await request<HeaderQueryData>(GetHeader, { locale: lang })
+    if (!data.all_header.items.length) {
       return null
+    }
+
+    const homeHref = `https://www.scandichotels.com/${lang}`
+    const { frontpage_link_text, logoConnection, menu, top_menu } = data.all_header.items[0]
+    const logo = logoConnection.edges?.[0]?.node
+    const topMenuMobileLinks = top_menu.links.filter(link => link.show_on_mobile)
+      .sort((a, b) => a.sort_order_mobile < b.sort_order_mobile ? 1 : -1)
+
+    return (
+      <header className={styles.header} role="banner">
+        <OfflineBanner />
+        <TopMenu
+          frontpageLinkText={frontpage_link_text}
+          homeHref={homeHref}
+          links={top_menu.links}
+        />
+        <MainMenu
+          frontpageLinkText={frontpage_link_text}
+          homeHref={homeHref}
+          links={menu.links}
+          logo={logo}
+          topMenuMobileLinks={topMenuMobileLinks}
+        />
+      </header>
+    )
+  } catch (error) {
+    console.error(error)
+    return null
   }
 }

components/Current/Preamble/Breadcrumbs/index.tsx

@@ -14,7 +14,7 @@ export default function Breadcrumbs({
       <ul className={styles.list}>
         {parent ? (
           <li className={styles.parent}>
-            <Link href={parent.node.url}>
+            <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
               {parent.node.breadcrumbs?.title ?? parent.node.title}
             </Link>
           </li>
@@ -25,7 +25,7 @@ export default function Breadcrumbs({
             itemProp="breadcrumb"
             key={breadcrumb.node.title}
           >
-            <Link className={styles.link} href={breadcrumb.node.url}>
+            <Link className={styles.link} href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
               {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
             </Link>
           </li>

components/Current/SubnavMobile.tsx

@@ -13,14 +13,14 @@ export default async function SubnavMobile({
         <ul className="breadcrumb-list hidden-small hidden-medium hidden-large">
           {parent ? (
             <li className="breadcrumb-list__parent hidden-medium hidden-large">
-              <Link href={parent.node.url}>
+              <Link href={`/${parent.node.system.locale}${parent.node.url}`}>
                 {parent.node.breadcrumbs?.title ?? parent.node.title}
               </Link>
             </li>
           ) : null}
           {breadcrumbs.edges.map((breadcrumb) => (
             <li className="breadcrumb-list__body" key={breadcrumb.node.url}>
-              <Link href={breadcrumb.node.url}>
+              <Link href={`/${breadcrumb.node.system.locale}${breadcrumb.node.url}`}>
                 {breadcrumb.node.breadcrumbs?.title ?? breadcrumb.node.title}
               </Link>
             </li>

components/Current/Tracking.tsx

@@ -0,0 +1,85 @@
+"use client"
+
+import {
+  SiteSectionObject,
+  TrackingData,
+  TrackingProps,
+} from "@/types/components/tracking"
+import { usePathname, useSearchParams } from "next/navigation"
+import { useEffect } from "react"
+
+function createPageObject(trackingData: TrackingData) {
+  const [lang, ...segments] = trackingData.pathName
+    .split("/")
+    .filter((v: string) => v)
+
+  function getSiteSections(segments: string[]): SiteSectionObject {
+    /* 
+      Adobe expects the properties sitesection1 - sitessection6, hence the for-loop below
+      The segments ['explore-scandic', 'wifi'] should result in:
+      {
+        sitesection1: "explore-scandic",
+        sitesection2: "explore-scandic|wifi",
+        sitesection3: "explore-scandic|wifi|",
+        sitesection4: "explore-scandic|wifi||",
+        sitesection5: "explore-scandic|wifi|||",
+        sitesection6: "explore-scandic|wifi||||",
+      } 
+    */
+    const sitesections = {} as SiteSectionObject
+    for (let i = 0; i < 6; i++) {
+      const key = ("sitesection" + (i + 1)) as keyof SiteSectionObject
+
+      sitesections[key] = segments.slice(0, i + 1).join("|")
+      if (i > 0 && !segments[i]) {
+        sitesections[key] = sitesections[key].concat(
+          "|".repeat(i + 1 - segments.length)
+        )
+      }
+    }
+    return sitesections
+  }
+  const sitesections = getSiteSections(segments)
+  const { host: domain, href: pageurl } = window.location
+
+  const page_obj = {
+    pagename: trackingData.pageName,
+    pagetype: trackingData.pageType,
+    pageurl, // is window.location.href viable?
+    createDate: trackingData.createdDate,
+    publishDate: trackingData.publishedDate,
+    domain, // is window.location.host viable?
+    errorcode: null, // handle
+    querystring: trackingData.queryString || "",
+    pageid: trackingData.pageId,
+    sessionid: "<unique identifier of session>", // base on what?
+    domainlanguage: lang,
+    hotelbrand: "scandic",
+    siteversion: "new-web",
+    ...sitesections,
+  }
+  return page_obj
+}
+
+export default function Tracking({ pageData }: TrackingProps) {
+  const pathName = usePathname()
+  const queryString = useSearchParams().toString()
+
+  useEffect(() => {
+    const trackingData = { ...pageData, pathName, queryString }
+    const pageObject = createPageObject(trackingData)
+
+    window.datalayer.page = pageObject
+
+    // NOTE: Is this irrelevant för drop 1?
+    // var user_obj = {
+    //   loginstatus: "<if the user is logged in or not>",
+    //   memberid: "<unique meeting package membership id for the user>",
+    //   memberlevel: "<member level of user>",
+    // }
+
+    // datalayer.user = user_obj;
+  }, [pathName, queryString, pageData])
+
+  return null
+}

components/JsonToHtml/renderOptions.tsx

@@ -263,8 +263,9 @@ export const renderOptions: RenderOptions = {
         }
       } else {
         const props = extractPossibleAttributes(node.attrs)
+        const href = node.attrs?.locale ? `/${node.attrs.locale}${node.attrs.href}` : node.attrs.href
         return (
-          <Link {...props} href={node.attrs.href} key={node.uid}>
+          <Link {...props} href={href} key={node.uid}>
             {next(node.children, embeds, fullRenderOptions)}
           </Link>
         )