304 lines
13 KiB
JavaScript
304 lines
13 KiB
JavaScript
import _ from "lodash";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { destroyCookie, setCookie } from "nookies";
|
|
import { connect } from "react-redux";
|
|
import Banner from "../components/banner";
|
|
import { setLogout } from "../store/accountDetails/action";
|
|
|
|
import { signOut } from "next-auth/react";
|
|
|
|
const Header = (props) => {
|
|
let { t, lang } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
const { setLogout, serviceName } = props;
|
|
const noSignoutLink = [
|
|
"/",
|
|
"/logout",
|
|
"/dns",
|
|
"/dns/[developmentName]",
|
|
"/dns/application-process",
|
|
"/dns/help",
|
|
"/dns/contact-us",
|
|
"/dns/applications",
|
|
"/dns/application-view",
|
|
"/searchresults",
|
|
"/case",
|
|
"/advancedsearch",
|
|
"/advancedsearchresults",
|
|
"/addresssearch",
|
|
"/addresssearchresults",
|
|
"/case/id/[incident]",
|
|
"/case/[ticketnumber]",
|
|
"/dnsapplications",
|
|
"/dnsdetails",
|
|
"/404",
|
|
"/account/register",
|
|
"/myportal/error",
|
|
"/accessibility",
|
|
"/details-about-cookies",
|
|
"/auth/verify-request",
|
|
"/auth/signin",
|
|
"/auth/error",
|
|
"/myportal",
|
|
"/myportal/[appealtypes]",
|
|
"/newappeal/[appealtypes]",
|
|
"/newappeal",
|
|
"/myportal/dnsapplications",
|
|
"/myportal/dns/[developmentName]",
|
|
"/myportal/dnsdetails",
|
|
"/myportal/addresssearch",
|
|
"/myportal/addresssearchresults",
|
|
"/myportal/advancedsearch",
|
|
"/myportal/advancedsearchresults",
|
|
"/myportal/case/[ticketnumber]",
|
|
"/account/personaldetails",
|
|
"/register",
|
|
"/myportal/searchresults",
|
|
"/myportal/representation",
|
|
"/myportal/viewall",
|
|
"/contactus",
|
|
"/unsubscribe/[watchlistid]",
|
|
"/unsubscribeall/[watchlistid]",
|
|
];
|
|
|
|
const hasContactLink = [
|
|
"/dns/application-process",
|
|
"/dns/help",
|
|
"/dns/contact-us",
|
|
"/dns/applications",
|
|
"/dns/application-view",
|
|
];
|
|
|
|
let domainSwitch;
|
|
|
|
if (process.browser) {
|
|
domainSwitch = window.switchDomain;
|
|
} else {
|
|
domainSwitch = process.env.I18N_DOMAIN;
|
|
}
|
|
|
|
const handleLogout = () => {
|
|
console.info("////////////\n" + "logout" + "\n////////////");
|
|
window.localStorage.clear(),
|
|
destroyCookie(null, "next-auth.csrf-token", { path: "/" }),
|
|
destroyCookie(null, "next-auth.callback-url", { path: "/" }),
|
|
destroyCookie(null, "pedw_locale", { path: "/" }),
|
|
destroyCookie(null, "pinsUser", { path: "/" }),
|
|
signOut({
|
|
callbackUrl: locale == "cy" ? "/cy/allgofnodi" : "/logout",
|
|
});
|
|
};
|
|
|
|
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={t("common:gov-wales-link")}
|
|
className="govuk-header__link govuk-link--no-underline govuk-header__link--homepage"
|
|
>
|
|
<span className="govuk-header__logotype header__logo">
|
|
<img
|
|
alt="gov.wales"
|
|
src="/assets/images/cymru.svg"
|
|
/>
|
|
</span>
|
|
</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>
|
|
<a
|
|
href={
|
|
router.locale == "cy"
|
|
? "/allgofnodi"
|
|
: "/logout"
|
|
}
|
|
onClick={() => {
|
|
setLogout(),
|
|
window.localStorage.clear();
|
|
}}
|
|
className="govuk-header__link "
|
|
>
|
|
{t("common:signout-label")}
|
|
</a>
|
|
</li>
|
|
)}
|
|
|
|
<li>
|
|
<Link
|
|
href={
|
|
locale == "en"
|
|
? router.query.q != null
|
|
? router.pathname +
|
|
"?q=" +
|
|
router.query.q
|
|
: router.pathname
|
|
: router.query.q != null
|
|
? process.env.I18N_DOMAIN +
|
|
"/" +
|
|
router.asPath +
|
|
"?q=" +
|
|
router.query.q
|
|
: router.asPath
|
|
}
|
|
locale={
|
|
locale == "en" ? "cy" : "en"
|
|
}
|
|
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")}
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> */}
|
|
<div className="fullNavs">
|
|
{hasContactLink.includes(router.pathname) == true ? (
|
|
<Link
|
|
href="/dns/contact-us"
|
|
className="govuk-header__link govuk-!-margin-right-3"
|
|
>
|
|
Contact
|
|
</Link>
|
|
) : (
|
|
""
|
|
)}
|
|
{noSignoutLink.includes(router.pathname) == true ? (
|
|
""
|
|
) : (
|
|
<Link
|
|
href={
|
|
router.locale == "cy"
|
|
? "/cy/allgofnodi"
|
|
: "/logout"
|
|
}
|
|
onClick={() => {
|
|
handleLogout();
|
|
}}
|
|
className="govuk-header__link govuk-!-margin-right-3"
|
|
>
|
|
{t("common:signout-label")}
|
|
</Link>
|
|
)}
|
|
|
|
<Link
|
|
href={
|
|
Object.keys(router.query).length > 0
|
|
? router.pathname +
|
|
"?" +
|
|
Object.keys(router.query)
|
|
.map(
|
|
(key) =>
|
|
key + "=" + router.query[key]
|
|
)
|
|
.join("&")
|
|
: router.pathname
|
|
}
|
|
locale={locale == "en" ? "cy" : "en"}
|
|
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"
|
|
}
|
|
onClick={() => {
|
|
setCookie(
|
|
null,
|
|
"pedw_locale",
|
|
locale == "en" ? "cy" : "en",
|
|
{
|
|
path: "/",
|
|
}
|
|
);
|
|
}}
|
|
>
|
|
{" "}
|
|
{t("common:available-in")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Banner />
|
|
</header>
|
|
);
|
|
};
|
|
const mapDispatchToProps = (dispatch) => {
|
|
return {
|
|
setLogout: () => {
|
|
dispatch(setLogout());
|
|
},
|
|
};
|
|
};
|
|
|
|
export default connect(null, mapDispatchToProps)(Header);
|