feat: Kansalaisen header (HASSU-38) (#350)

finnishtransportagency · Sep 8, 2022 · ede1a9e · ede1a9e
1 parent c09c344
commit ede1a9e
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 66 deletions.
diff --git a/src/components/layout/header/kansalaisHeader.tsx b/src/components/layout/header/kansalaisHeader.tsx
@@ -1,57 +1,92 @@
 import { Container } from "@mui/material";
-import React, { ReactElement, useCallback } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 import useTranslation from "next-translate/useTranslation";
 import { HeaderProps } from "./header";
 import { useRouter } from "next/router";
-import Button from "@components/button/Button";
 import { useProjektiJulkinen } from "src/hooks/useProjektiJulkinen";
 import { Kieli } from "@services/api";
 import useSnackbars from "src/hooks/useSnackbars";
+import Link from "next/link";
+import setLanguage from "next-translate/setLanguage";
+import HeaderNavigationItem, { NavigationRoute } from "../navigation/HeaderNavigationItem";
 
-export function KansalaisHeader({}: HeaderProps): ReactElement {
+export function KansalaisHeader({ scrolledPastOffset }: HeaderProps): ReactElement {
   const { t } = useTranslation("common");
   const router = useRouter();
   const { data: projekti } = useProjektiJulkinen();
   const { showInfoMessage } = useSnackbars();
+  const [headerTop, setHeaderTop] = useState<number>(0);
+  const headerTopPortion = useRef<HTMLDivElement>(null);
 
-  const replacer = useCallback(
-    (_substring: string, key: string, _offset: number, _string: number): string => {
-      const returned: string =
-        router.query[key.replace(/[\[\]]/, "")] !== undefined
-          ? router.query[key.replace(/[\[\]]/, "")]?.toString() || key
-          : key;
-      return returned;
+  useEffect(() => {
+    const offset = headerTopPortion.current?.clientHeight;
+    if (offset) {
+      setHeaderTop(offset);
+    }
+  }, [headerTopPortion]);
+
+  const navigationRoutes: NavigationRoute[] = [
+    {
+      label: "Etusivu",
+      href: "/",
+      icon: "home",
     },
-    [router]
-  );
+    {
+      label: "Tietoja palvelusta",
+      href: "/",
+    },
+  ];
 
   return (
-    <Container>
-      <div className="bg-gray-light py-4 pl-4">
-        {t("kansalaisheader")}
-        <Button
-          className="inline m-3"
-          onClick={() => router.push(router.pathname.replace(/\[(.*)\]/, replacer), undefined, { locale: "fi" })}
-        >
-          Suomeksi
-        </Button>
-        <Button
-          className="inline m-3"
-          onClick={() => {
-            if (
-              projekti &&
-              projekti.kielitiedot?.ensisijainenKieli !== Kieli.RUOTSI &&
-              projekti.kielitiedot?.toissijainenKieli !== Kieli.RUOTSI
-            ) {
-              showInfoMessage("RUOTSIKSI Projektia ei ole saatavilla ruotsin kielellä");
-              return router.push("/", undefined, { locale: "sv" });
-            }
-            router.push(router.pathname.replace(/\[(.*)\]/, replacer), undefined, { locale: "sv" });
-          }}
-        >
-          Ruotsiksi
-        </Button>
+    <Container
+      className="sticky bg-white z-20 w-full transition-all"
+      component="header"
+      sx={{ top: `${scrolledPastOffset ? -headerTop : 0}px` }}
+    >
+      <div ref={headerTopPortion}>
+        <div className="flex border-b border-gray-light py-5 flex-wrap justify-between gap-x-5 gap-y-5">
+          <Link href="/">
+            <a className="flex flex-col uppercase vayla-small-title">
+              <span>{t("commonFI:sivustonimi")}</span>
+              <span className="font-normal">{t("commonSV:sivustonimi")}</span>
+            </a>
+          </Link>
+          <div className="flex flex-wrap items-end gap-x-5 gap-y-3">
+            <span
+              className={router.locale === "fi" ? undefined : "text-primary-dark"}
+              style={{ cursor: "pointer" }}
+              onClick={async () => await setLanguage("fi")}
+            >
+              Suomi
+            </span>
+            <span
+              className={router.locale === "sv" ? undefined : "text-primary-dark"}
+              style={{ cursor: "pointer" }}
+              onClick={async () => {
+                if (
+                  projekti &&
+                  projekti.kielitiedot?.ensisijainenKieli !== Kieli.RUOTSI &&
+                  projekti.kielitiedot?.toissijainenKieli !== Kieli.RUOTSI
+                ) {
+                  showInfoMessage(t("commonSV:projekti_ei_ruotsin_kielella"));
+                  return router.push("/", undefined, { locale: "sv" });
+                }
+                await setLanguage("sv");
+              }}
+            >
+              Svenska
+            </span>
+          </div>
+        </div>
       </div>
+      <nav className="flex py-6 vayla-navigation uppercase">
+        <ul className="flex float-left flex-wrap space-x-20">
+          {navigationRoutes.map((route, index) => (
+            <HeaderNavigationItem key={index} {...route} />
+          ))}
+        </ul>
+      </nav>
+      <div className="pb-2" style={{ background: "linear-gradient(117deg, #009ae0, #49c2f1)" }}></div>
     </Container>
   );
 }

diff --git a/src/components/layout/header/virkamiesHeader.tsx b/src/components/layout/header/virkamiesHeader.tsx
@@ -1,20 +1,11 @@
 import React, { ReactElement, useEffect, useRef, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import { HeaderProps } from "./header";
 import ButtonLink from "@components/button/ButtonLink";
-
 import useTranslation from "next-translate/useTranslation";
 import useCurrentUser from "../../../hooks/useCurrentUser";
 import { Container } from "@mui/material";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
-interface NavigationRoute {
-  label: string;
-  href: string;
-  icon?: IconProp;
-  children?: Omit<NavigationRoute, "children">[];
-}
+import HeaderNavigationItem, { NavigationRoute } from "../navigation/HeaderNavigationItem";
 
 export function VirkamiesHeader({ scrolledPastOffset }: HeaderProps): ReactElement {
   const [headerTop, setHeaderTop] = useState<number>(0);
@@ -80,17 +71,4 @@ export function VirkamiesHeader({ scrolledPastOffset }: HeaderProps): ReactEleme
   );
 }
 
-function HeaderNavigationItem({ href, label, icon }: NavigationRoute): ReactElement {
-  return (
-    <li>
-      <Link href={href}>
-        <a>
-          {icon && <FontAwesomeIcon icon={icon} size="lg" className="text-primary-dark mr-10" />}
-          {label}
-        </a>
-      </Link>
-    </li>
-  );
-}
-
 export default VirkamiesHeader;
diff --git a/src/components/layout/navigation/HeaderNavigationItem.tsx b/src/components/layout/navigation/HeaderNavigationItem.tsx
@@ -0,0 +1,26 @@
+import React, { ReactElement } from "react";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
+
+export interface NavigationRoute {
+  label: string;
+  href: string;
+  icon?: IconProp;
+  children?: Omit<NavigationRoute, "children">[];
+}
+
+export function HeaderNavigationItem({ href, label, icon }: NavigationRoute): ReactElement {
+  return (
+    <li>
+      <Link href={href}>
+        <a>
+          {icon && <FontAwesomeIcon icon={icon} size="lg" className="text-primary-dark mr-10" />}
+          {label}
+        </a>
+      </Link>
+    </li>
+  );
+}
+
+export default HeaderNavigationItem;
diff --git a/src/locales/sv/common.json b/src/locales/sv/common.json
@@ -2,6 +2,7 @@
   "kansalaisheader": "RUOTSIKSI KANSALAISHEADER - TBD",
   "sivua-ei-loydy": "RUOTSIKSI Sivua ei löydy",
   "vayla-tietosuojasivu": "https://vayla.fi/sv/trafikledsverket/kontaktuppgifter/dataskyddspolicy",
+  "projekti_ei_ruotsin_kielella": "RUOTSIKSI Projekti ei ole saatavilla ruotsin kielellä",
   "polut": {
     "etusivu": "RUOTSIKSI Etusivu",
     "projektin_perustaminen": "RUOTSIKSI Projektin perustaminen",

diff --git a/src/pages/suunnitelma/[oid]/aloituskuulutus.tsx b/src/pages/suunnitelma/[oid]/aloituskuulutus.tsx
@@ -19,6 +19,7 @@ import { formatDate } from "src/util/dateUtils";
 import HassuStack from "@components/layout/HassuStack";
 import useProjektiBreadcrumbsJulkinen from "src/hooks/useProjektiBreadcrumbsJulkinen";
 import { splitFilePath } from "../../../util/fileUtil";
+import useKansalaiskieli from "src/hooks/useKansalaiskieli";
 
 function formatYhteystiedotText(kuulutus: AloitusKuulutusJulkaisuJulkinen) {
   const yhteystiedotList = kuulutus.yhteystiedot.map(
@@ -52,6 +53,7 @@ export default function AloituskuulutusJulkinen({ setRouteLabels }: PageProps):
   const kuulutus = projekti?.aloitusKuulutusJulkaisut?.[0];
   const velho = kuulutus?.velho;
   const suunnittelusopimus = kuulutus?.suunnitteluSopimus;
+  const kieli = useKansalaiskieli();
 
   useProjektiBreadcrumbsJulkinen(setRouteLabels);
 
@@ -76,8 +78,9 @@ export default function AloituskuulutusJulkinen({ setRouteLabels }: PageProps):
     { header: t(`ui-otsikot.suunnitelman_tyyppi`), data: velho?.tyyppi && t(`projekti-tyyppi.${velho?.tyyppi}`) },
   ];
 
-  const aloituskuulutusPDFPath =
-    splitFilePath(kuulutus.aloituskuulutusPDFt?.[kuulutus.kielitiedot?.ensisijainenKieli || Kieli.SUOMI]?.aloituskuulutusPDFPath);
+  const aloituskuulutusPDFPath = splitFilePath(
+    kuulutus.aloituskuulutusPDFt?.[kuulutus.kielitiedot?.ensisijainenKieli || Kieli.SUOMI]?.aloituskuulutusPDFPath
+  );
 
   if (kuulutus.tila == AloitusKuulutusTila.MIGROITU) {
     return (
@@ -100,8 +103,7 @@ export default function AloituskuulutusJulkinen({ setRouteLabels }: PageProps):
             <SectionContent>
               {suunnittelusopimus && (
                 <p>
-                  {suunnittelusopimus.kunta} ja{" "}
-                  { t(`vastaava-viranomainen.${velho.suunnittelustaVastaavaViranomainen}`)}{" "}
+                  {suunnittelusopimus.kunta} ja {t(`vastaava-viranomainen.${velho.suunnittelustaVastaavaViranomainen}`)}{" "}
                   {t(`info.ei-rata.aloittavat_yleissuunnitelman_laatimisen`)}
                 </p>
               )}
@@ -124,7 +126,7 @@ export default function AloituskuulutusJulkinen({ setRouteLabels }: PageProps):
 
           <h4 className="vayla-small-title">{t(`ui-otsikot.suunnitteluhankkeen_kuvaus`)}</h4>
           <SectionContent>
-            <p>{kuulutus.hankkeenKuvaus?.[kuulutus.kielitiedot?.ensisijainenKieli || Kieli.SUOMI]}</p>
+            <p>{kuulutus.hankkeenKuvaus?.[kieli]}</p>
           </SectionContent>
           <h4 className="vayla-small-title">{t(`ui-otsikot.asianosaisen_oikeudet`)}</h4>
           <Notification type={NotificationType.INFO} hideIcon>
@@ -157,7 +159,8 @@ export default function AloituskuulutusJulkinen({ setRouteLabels }: PageProps):
           </SectionContent>
           <h4 className="vayla-small-title">{t(`ui-otsikot.ladattava_kuulutus`)}</h4>
           <SectionContent className="flex gap-4">
-            <ExtLink href={aloituskuulutusPDFPath.path}>{aloituskuulutusPDFPath.fileName}</ExtLink> ({aloituskuulutusPDFPath.fileExt}) (
+            <ExtLink href={aloituskuulutusPDFPath.path}>{aloituskuulutusPDFPath.fileName}</ExtLink> (
+            {aloituskuulutusPDFPath.fileExt}) (
             <FormatDate date={kuulutus.kuulutusPaiva} />-
             <FormatDate date={kuulutus.siirtyySuunnitteluVaiheeseen} />)
           </SectionContent>