Files
pedwfrontend/components/header.js
T

274 lines
20 KiB
JavaScript

import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setLogout } from "../store/accountDetails/action";
const Header = (props) => {
let { t, lang } = useTranslation();
const router = useRouter();
const { locale } = router;
const { setLogout, serviceName } = props;
const noSignoutLink = [
"/",
"/logout",
"/dns",
"/dns/application-process",
"/dns/help",
"/dns/contact-us",
"/dns/applications",
"/dns/application-view",
"/searchresults",
"/case",
"advancedsearch",
"/dnsapplications",
"/dnsdetails",
];
const hasContactLink = [
"/dns",
"/dns/application-process",
"/dns/help",
"/dns/contact-us",
"/dns/applications",
"/dns/application-view",
];
return (
<header
className="govuk-header "
role="banner"
data-module="govuk-header"
>
<div className="govuk-header__container govuk-width-container">
<div className="govuk-header__logo govuk-!-width-one-quarter">
<Link href="/">
<a className="govuk-header__link govuk-header__link--homepage">
<span className="govuk-header__logotype header__logo">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 140 34"
>
<g>
<path
fill="currentColor"
d="M.5 12.9a1.5 1.5 0 0 1 .6-.7 3.9 3.9 0 0 1 1.6-.2A9.1 9.1 0 0 1 6 14a29.6 29.6 0 0 1 3.2 3l.7-1.4a42.1 42.1 0 0 0-6-4C2.5 11.2.7 11 .5 12.9zM1.9 10.6c1.6-.5 1.8.6 2.1.9l1.2.7c-1.6-3.7-3.3-1.6-3.3-1.6z"
/>
<path
fill="currentColor"
d="M2.6 12.5c3.8 2.8.6 4.1.6 4.1a1.3 1.3 0 0 0 1.7-.4l.3-.6a1.7 1.7 0 0 0 .1-.5A40.2 40.2 0 0 1 9 19.9a11 11 0 0 1-.2-1.8c-1.2-1.4-1.5-1.9-2.3-2.7-2.2-2.7-4-3-4-3M18.4 12.2a7.1 7.1 0 0 1-.1-2 8.7 8.7 0 0 0 .5-1.5h.1l.6.4a8.4 8.4 0 0 1-.6-1.7v-.1a4.1 4.1 0 0 0-.9-1.8 4.6 4.6 0 0 1 .3 1.9c-.1 1.7-2.6 3.7-2 6.6a5.7 5.7 0 0 0 2 3 15.3 15.3 0 0 1-.9-3.2 4.1 4.1 0 0 1 .5-2.5h.2zM35.3.5a56.6 56.6 0 0 0-6.4 1.4c-2.1.7-5.2 2-6.6 3.8s-.2 4.6-.6 6.4-3.2 3.8-3.2 3.8 3.3-.9 4.4-3.5-.2-3.3 1.1-6.1S35.3.5 35.3.5z"
/>
<path d="M35.4.7a7.8 7.8 0 0 0-4.8 4.6l1.6-.3s.1-2.2 3.2-4.3zM41 5.4a26.7 26.7 0 0 0-11.1.5c-5.5 1.7-4.8 4.5-4.9 6s-1.4 5.2-6.3 4.8a5.5 5.5 0 0 0 6-1c3.2-2.6 1-5.7 3.6-7.2S33 5.8 41 5.4z" />
<path
fill="currentColor"
d="M27 13.5a6.2 6.2 0 0 1 3.5 1.8 5.2 5.2 0 0 0-3.8-1zM36.5 11s-5.2.1-5.3 4.6c-.2-.1-3-5 5.3-4.6zM40.6 5.7c-5.3 1.1-4.1 5.3-4.1 5.3-2.7-5.4 4.1-5.3 4.1-5.3zM25.9 19.6a6.1 6.1 0 0 1 5.2-4c-4.1-.8-5.1 1.2-5.2 2.7a36 36 0 0 0-6.3-.7 18.2 18.2 0 0 1 6.3 2zM4.2 30.8a3.6 3.6 0 0 1 1.8-.4 4.7 4.7 0 0 0 1.8-.4l-2.7-.5c-1 .1-.9 1.3-.9 1.3zM23.9 28a.8.8 0 0 1 .7-.9 4.6 4.6 0 0 1 2 .4l-1.3.3a2.6 2.6 0 0 0-1.4.2zM31.4 31.2a3.1 3.1 0 0 1 1.7-.3h1.4c-.4 0-1.2-.9-2.2-.7a.9.9 0 0 0-.9 1zM36.1 10.8c-6.4-1.5-8.4-.4-8.4-.4a2 2 0 0 0 .2-.6c.2-.3.2-.4.2-.5a19.1 19.1 0 0 1 8 1.5zM11.3 6.7a2.4 2.4 0 0 0-1.6-.8c-1.2 0-2.3 1.4-3.3 1.4a3.2 3.2 0 0 1-1.7-.4 2.4 2.4 0 0 0 1.7.9c1.4 0 2.4-1.3 3.3-1.3zM14.2 8.1a6.2 6.2 0 0 1 .1 2c-.1 2.2-4.3 5.2-4.3 8.7a5.1 5.1 0 0 0 1.6 3.4 8.5 8.5 0 0 1-.4-3.8c.4-2.6 3.7-5.6 3.6-8.1a3.5 3.5 0 0 0-.6-2.2z"
/>
<path
fill="currentColor"
d="M12.1 22.1a4.8 4.8 0 0 1-.2-2.8c.3-.9 1.1-1.6 2.7-2 0 0-2.8 2.6-.7 4.8a9.8 9.8 0 0 0-2 2.9c-.6 1.3-1.8 4.2-2.2 4.8A5.4 5.4 0 0 1 7.1 32c-1.7.1-3.7.4-3.8 1.7a1.7 1.7 0 0 1-.3-1.2c.1-.9 1.5-1.9 3-1.8a3.2 3.2 0 0 0 3.6-2.1 60.4 60.4 0 0 1 2.5-6.5z"
/>
<path
fill="currentColor"
d="M14.5 22.3s-2.3 6.9-6.3 9.6a10.3 10.3 0 0 1 3.2-.1c.7.3 1.5.8.8 2s1.4-.8 1.1-2-1.8-1-1.8-1-.4-.2-.2-.8 1.8-2.6 2-3l2.3-3.6a2.5 2.5 0 0 0 2.4-1.3c.9-1.8-1-3.4-1-3.4s.8 1.9-.1 2.8a3.1 3.1 0 0 1-2.4.8z"
/>
<path
fill="currentColor"
d="M16.4 23.9l1.1-.4s.4.4 2 .4h.3a30.3 30.3 0 0 0 7.4-2.3l.4.6c-2.7.9-5.8 3.5-9.9 3l-1.9-.4zM28 27.2a3.8 3.8 0 0 1-2 1.7c-1.2 0-2.7.3-2.8 1.3a1 1 0 0 1-.2-.9c0-.6.9-1.4 2.2-1.3a2 2 0 0 0 2.3-1.7c.3-.9 0-2.6.4-3.7l.9.7v.3c-.5 1.2-.3 2.6-.8 3.6zM29.7 23.9l.7.4a4.7 4.7 0 0 0-.4 1.2l-.7 2.1c-.2.5.1.6.1.6s1.1.1 1.3.8-.8 1.5-.8 1.5-.1-1.3-.6-1.5a6.8 6.8 0 0 0-2.2.1c1.7-1.2 2.3-4.6 2.6-5.2z"
/>
<path
fill="currentColor"
d="M36.3 30.9s.5 1 .2 1.3-1.8 0-3.4.2-2.4.3-2.5 1.5a1.6 1.6 0 0 1-.3-1.1 2.5 2.5 0 0 1 2.7-1.6h1.9c.4-.2-.6-2.2-.8-2.6-1.5-3-1.5-4-1.5-4.2s-4.2-.8-5.2-3.7c3.4 2.8 6 2.8 6 2.8a56.1 56.1 0 0 0 2.9 7.4zM37.3 15.2h1.2c1.8-3.9 5-7.9 5-10.3a4 4 0 0 0-1.1-2.6l-.2.6A10.6 10.6 0 0 0 40.7.4l2.7 1.3h-.5a4.1 4.1 0 0 1 1.2 3c.1 2.8-3 6-4.8 10.3 4 .5 6.7 3 6.7 5.6s-2.3 5.2-4.4 5.2a4.8 4.8 0 0 1-2.6-.7c-1-.5-2-1.7-2-4.1a10.8 10.8 0 0 1 .9-4.7l-2.7.3-1.1.3a4.2 4.2 0 0 1 2.1 2.7 7.2 7.2 0 0 1-.4 3.7 15.2 15.2 0 0 0 1.1 5.3l.6 1.5a1.7 1.7 0 0 0 .8.9s1.2.2 1.5.9a1 1 0 0 1-.3 1.4c.3-1.1-.7-1.3-1.3-1.3h-1a11.9 11.9 0 0 0-.6-2.3s-1-2.7-1.3-4a24.3 24.3 0 0 1-.7-3s2.8-4.8-3.5-6.8h.9l1.7-.5zm1.6 1.3a13.3 13.3 0 0 0-.8 5c.1 1.7 1.1 4 3.8 3.7a3.3 3.3 0 0 0 2.7-1.9 5.6 5.6 0 0 0 .5-2.1 4.2 4.2 0 0 0-1.6-3.2 6.9 6.9 0 0 0-4.6-1.5M11 4.3s-2.2-.7-3.6.4l.7 1.2a2.3 2.3 0 0 1 3.3.2l.3.5a3.8 3.8 0 0 1-3.6 1 2.5 2.5 0 0 0 2.3 1.1c1.6 0 3.2-1.7 3.7-1.1s-.2-2.3 2.7-3.2l.7.8a3.1 3.1 0 0 0 .9-2.5A3.2 3.2 0 0 0 16.9.1a3.7 3.7 0 0 1-.3 2.1 2.1 2.1 0 0 1-1.8 1.3l-1.3-.2c-.3-.1-2.4-.8-2.5 1zm2.4-.1s-.7 1.2-1.7.5 0-.7.6-.6.5.2 1.1.1zM60.1 6.9h1v6.5h2.5v.8h-3.4zM64.4 6.4h.9v7.9h-.9zM68.4 15.5c-.3.9-.6 1.3-1.3 1.3h-.6V16h.5c.3 0 .4-.1.6-.7l.2-.9-1.6-5.6h1l1.2 4.4 1.1-4.4h.9zM76 14.4h-1l-1.1-4.6-1.1 4.6h-1L70.4 9h1l1 4.5 1-4.5h1.1l1.1 4.5 1-4.5h.9zM80.1 8.9c1.4 0 2.2 1.1 2.2 2.8s-.7 2.8-2.2 2.8-2.1-1.1-2.1-2.8.7-2.8 2.1-2.8zm0 4.8c.9 0 1.2-.7 1.2-2.1s-.4-2.1-1.2-2.1-1.2.7-1.2 2.1.3 2.1 1.2 2.1zM87.2 13.4c0 .3.1.7.1 1h-.9v-.8a1.5 1.5 0 0 1-1.4.9c-1.1 0-1.9-.9-1.9-2.8s.7-2.8 1.9-2.8a1.7 1.7 0 0 1 1.4.8V6.4h.9zm-2.1-3.8q-1.2 0-1.2 2.1t1.2 2.1 1.2-2.1q0-2.1-1.2-2.1zM88.4 10.1c0-.4-.1-.8-.1-1.2h.9v.9a1.4 1.4 0 0 1 1.5-.9v.9h-.3c-.7 0-1.2.6-1.2 1.8v2.9h-.9zM91.7 9.3a2.6 2.6 0 0 1 1.5-.4 1.7 1.7 0 0 1 1.4.5 1.7 1.7 0 0 1 .5 1.3v2.8a2.7 2.7 0 0 0 .1.9h-.8v-.7a1.7 1.7 0 0 1-1.5.8 1.4 1.4 0 0 1-1.6-1.5c0-1.1.7-1.8 2.6-1.8h.5v-.3a2.4 2.4 0 0 0-.2-.9c-.2-.3-.5-.3-.9-.3a1.8 1.8 0 0 0-1.4.6zm2.6 2.4h-.6c-1.1 0-1.5.5-1.5 1.1s.3 1 .9 1a1.3 1.3 0 0 0 1.3-1.3v-.7zM97.1 11.9c0 1.3.5 1.9 1.5 1.9a2.1 2.1 0 0 0 1.2-.4v.8a3.6 3.6 0 0 1-1.5.3c-1.4 0-2.2-1.1-2.2-2.8s.7-2.8 2.1-2.8 1.9 1 1.9 2.6v.5zm2.2-.6c0-1.1-.4-1.7-1.1-1.7s-1.1.4-1.1 1.7zM103.5 14.3l-.7.2c-.8 0-1.3-.3-1.3-1.3V9.7h-.9V9h.9V7.8l.9-.3v1.4h1.1v.7h-1.1v3.2q0 .9.6.9l.5-.2zM104.2 6.4h.9v3.3a1.3 1.3 0 0 1 1.3-.8c1 0 1.6.5 1.6 1.8v3.8h-.9V11c0-.9-.3-1.2-.9-1.2s-1.2.5-1.2 1.5v3.3h-.9zM116.4 14.3l-1.3.2c-2.3 0-3.4-1.8-3.4-3.8s1.3-3.8 3.3-3.8a2.9 2.9 0 0 1 1.4.3v.9a2.3 2.3 0 0 0-1.4-.4c-1.2 0-2.3 1-2.3 2.8s.7 3.2 2.4 3.2a1.8 1.8 0 0 0 1.3-.4zM119.3 15.5c-.3.9-.6 1.3-1.3 1.3h-.6V16h.5c.3 0 .4-.1.6-.7l.2-.9-1.7-5.5h1l1.2 4.4 1.1-4.4h.9zM121.8 10.1c0-.4-.1-.8-.1-1.2h.9v.8a1.4 1.4 0 0 1 2.6 0 1.5 1.5 0 0 1 1.3-.9c1 0 1.6.5 1.6 1.8v3.8h-.9v-3.7c0-.7-.3-1-.9-1s-1 .4-1 1.4v3.4h-.9v-3.7c0-.7-.3-1-.9-1s-1 .4-1 1.4v3.4h-.9zM129.5 10.1c0-.4-.1-.8-.1-1.2h.9v.9a1.4 1.4 0 0 1 1.5-.9v.9h-.3c-.7 0-1.2.6-1.2 1.8v2.9h-.9zM136.4 13.2c0 .4.1.8.1 1.2h-.9v-.8a1.4 1.4 0 0 1-1.4.9c-1 0-1.6-.5-1.6-1.8V8.9h.9v3.6c0 .9.3 1.2.9 1.2s1.2-.5 1.2-1.5V8.9h.9v4.3zM59.4 19.7h1l1.2 5.9 1.3-5.9h1.2l1.3 5.9 1.3-5.9h.9l-1.7 7.4h-1.1l-1.4-6.3-1.4 6.3h-1.1zM68.9 24.6c0 1.3.5 1.9 1.5 1.9a2.8 2.8 0 0 0 1.3-.4v.8a3.6 3.6 0 0 1-1.5.3c-1.4 0-2.2-1.1-2.2-2.8s.7-2.8 2.1-2.8 1.9 1 1.9 2.6v.5zm2.2-.6c0-1.1-.4-1.7-1.1-1.7s-1.1.4-1.1 1.7zM73.1 19.1h.9V27h-.9zM75.2 26.1a2.2 2.2 0 0 0 1.3.4c.7 0 1.1-.4 1.1-.7s-.2-.6-.7-.9l-.6-.3c-.8-.4-1.1-.7-1.1-1.4a1.6 1.6 0 0 1 1.7-1.6h.1l1.2.2v.7H77c-.6 0-.9.3-.9.7s.3.7.9.9h.3c.7.3 1.1.7 1.1 1.4s-.5 1.7-1.8 1.7a3.3 3.3 0 0 1-1.5-.3zM79.3 19.1h.9v3.3a1.3 1.3 0 0 1 1.3-.8c1 0 1.6.5 1.6 1.8v3.8h-.9v-3.5c0-.9-.3-1.2-.9-1.2s-1.2.5-1.2 1.5v3.3h-.9zM92.1 26.7a4.8 4.8 0 0 1-1.9.4c-2.4 0-3.4-1.8-3.4-3.8s1.4-3.8 3.3-3.8l1.8.3v1a4 4 0 0 0-1.8-.5c-1.2 0-2.3 1-2.3 2.8s.8 3.2 2.4 3.2l1-.2v-2.2h-1.3v-.8h2.2zM95.6 21.6c1.4 0 2.2 1.1 2.2 2.8s-.7 2.8-2.2 2.8-2.2-1.1-2.2-2.8.7-2.8 2.2-2.8zm0 4.8c.9 0 1.3-.7 1.3-2.1s-.4-2.1-1.3-2.1-1.3.7-1.3 2.1.4 2 1.3 2zM98.2 21.6h1l1.2 4.5 1.2-4.5h1l-1.7 5.3h-1.1zM104 24.6c0 1.3.5 1.9 1.5 1.9a2.8 2.8 0 0 0 1.3-.4v.8a3.6 3.6 0 0 1-1.5.3c-1.4 0-2.2-1.1-2.2-2.8s.7-2.8 2.1-2.8 1.9 1 1.9 2.6v.5zm2.2-.6c0-1.1-.4-1.7-1.1-1.7s-1.1.4-1.1 1.7zM108.1 22.8c0-.4-.1-.8-.1-1.2h.9v.9a1.4 1.4 0 0 1 1.5-.9v.9h-.3c-.7 0-1.2.6-1.2 1.8V27h-.9zM111.2 22.8c0-.4-.1-.8-.1-1.2h.9v.8a1.4 1.4 0 0 1 1.4-.9c1 0 1.6.5 1.6 1.8V27h-.9v-3.4c0-.9-.3-1.2-.9-1.2s-1.2.5-1.2 1.5v3.3h-.9zM116.4 22.8c0-.4-.1-.8-.1-1.2h.9v.8a1.4 1.4 0 0 1 2.6 0 1.5 1.5 0 0 1 1.3-.9c1 0 1.6.5 1.6 1.8V27h-.9v-3.6c0-.7-.3-1-.9-1s-1 .4-1 1.4v3.4h-.9v-3.7c0-.7-.3-1-.9-1s-1 .4-1 1.4v3.4h-.9zM124.7 24.6c0 1.3.5 1.9 1.5 1.9a2.8 2.8 0 0 0 1.3-.4v.8a3.6 3.6 0 0 1-1.5.3c-1.4 0-2.2-1.1-2.2-2.8s.7-2.8 2.1-2.8 1.9 1 1.9 2.6v.5zm2.3-.6c0-1.1-.4-1.7-1.1-1.7s-1.1.4-1.1 1.7zM128.8 22.8c0-.4-.1-.8-.1-1.2h.9v.8a1.4 1.4 0 0 1 1.4-.9c1 0 1.6.5 1.6 1.8V27h-.9v-3.4c0-.9-.3-1.2-.9-1.2s-1.2.5-1.2 1.5v3.3h-.9v-4.4zM136.4 26.9l-.7.2c-.9 0-1.3-.3-1.3-1.3v-3.4h-.9v-.7h.9v-1.1l.9-.3v1.4h1.1v.7h-1.2v3.2q0 .9.6.9l.6-.2v.7zM52 0h1v33.88h-1z"
/>
</g>
</svg>
</span>
</a>
</Link>
</div>
<div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
<Link href="/logout">
<a
onClick={() => {
window.localStorage.clear();
}}
className="govuk-header__link
govuk-header__link--service-name"
>
{serviceName || t("common:service-name")}
</a>
</Link>
</div>
<div className="languageSwitch">
<div className="mobileNav">
<div className="mobileMenu">
<input
type="radio"
id="mobileMenu-1"
name="mobileMenu-group-1"
/>
<label htmlFor="mobileMenu-1">
{t("common:mobile-nav-label")} <i></i>
</label>
<div className="mobileMenu close-mobileMenu">
<input
type="radio"
id="mobileMenu-close"
name="mobileMenu-group-1"
/>
<label htmlFor="mobileMenu-close">
{t("common:mobile-nav-label")} <i></i>
</label>
</div>
<div className="content">
<ul>
{hasContactLink.includes(router.pathname) ==
true ? (
<li>
<Link href="/dns/contact-us">
<a className="govuk-header__link ">
Contact
</a>
</Link>
</li>
) : (
""
)}
{noSignoutLink.includes(router.pathname) ==
true ? (
""
) : (
<li>
<Link href="/logout">
<a
onClick={() => {
window.localStorage.clear();
}}
className="govuk-header__link "
>
{t("common:signout-label")}
</a>
</Link>
</li>
)}
<li>
<Link
href={
locale == "en"
? router.query.q != null
? router.pathname +
"?q=" +
router.query.q
: router.pathname
: router.query.q != null
? router.pathname +
"?q=" +
router.query.q
: router.pathname
}
locale={
locale == "en" ? "cy" : "en"
}
>
<a
className="govuk-header__link "
lang={
locale == "en" ? "cy" : "en"
}
hrefLang={
locale == "en" ? "cy" : "en"
}
data-journey-click={
locale == "en"
? "link - click:lang-select:Cymraeg"
: "link - click:lang-select:English"
}
aria-label={
locale == "en"
? "Dewiswch Cymraeg"
: "Select English"
}
>
{" "}
{t("common:available-in")}
</a>
</Link>
</li>
</ul>
</div>
</div>
</div>
<div className="fullNav">
{hasContactLink.includes(router.pathname) == true ? (
<Link href="/dns/contact-us">
<a className="govuk-header__link govuk-!-margin-right-3">
Contact
</a>
</Link>
) : (
""
)}
{noSignoutLink.includes(router.pathname) == true ? (
""
) : (
<Link href="/logout">
<a
onClick={() => {
window.localStorage.clear();
}}
className="govuk-header__link govuk-!-margin-right-3"
>
{t("common:signout-label")}
</a>
</Link>
)}
<Link
href={
locale == "en"
? router.query.q != null
? router.pathname +
"?q=" +
router.query.q
: router.pathname
: router.query.q != null
? router.pathname + "?q=" + router.query.q
: router.pathname
}
locale={locale == "en" ? "cy" : "en"}
>
<a
className="govuk-header__link "
lang={locale == "en" ? "cy" : "en"}
hrefLang={locale == "en" ? "cy" : "en"}
data-journey-click={
locale == "en"
? "link - click:lang-select:Cymraeg"
: "link - click:lang-select:English"
}
aria-label={
locale == "en"
? "Dewiswch Cymraeg"
: "Select English"
}
>
{" "}
{t("common:available-in")}
</a>
</Link>
</div>
</div>
</div>
</header>
);
};
const mapDispatchToProps = (dispatch) => {
return {
setLogout: () => {
dispatch(setLogout());
},
};
};
export default connect(null, mapDispatchToProps)(Header);