pedwfrontend/components/header.js

import Link from "next/link";
import Image from "next/image";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import Banner from "../components/banner";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setLogout } from "../store/accountDetails/action";
import _ from "lodash";
import { parseCookies, setCookie, destroyCookie } from "nookies";

import { useSession, signIn, 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/application-process",
        "/dns/help",
        "/dns/contact-us",
        "/dns/applications",
        "/dns/application-view",
        "/searchresults",
        "/case",
        "/advancedsearch",
        "/advancedsearchresults",
        "/dnsapplications",
        "/dnsdetails",
        "/404",
        "/account/register",
        "/myportal/error",
        "/accessibility",
        "/details-about-cookies",
        "/auth/verify-request",
        "/auth/signin",
        "/auth/error",
    ];
    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;
    }

    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")}>
                        <a 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>
                        </a>
                    </Link>
                </div>

                {/* <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
                    <Link
                        href={router.locale == "cy" ? "/allgofnodi" : "/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>
                                            <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"
                                            }
                                        >
                                            <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="fullNavs">
                        {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={
                                    router.locale == "cy"
                                        ? "/allgofnodi"
                                        : "/logout"
                                }
                            >
                                <a
                                    onClick={() => {
                                        window.localStorage.clear(),
                                            destroyCookie(
                                                null,
                                                "next-auth.csrf-token"
                                            ),
                                            destroyCookie(
                                                null,
                                                "next-auth.callback-url"
                                            ),
                                            destroyCookie(null, "pedw_locale"),
                                            destroyCookie(null, "pinsUser"),
                                            signOut({
                                                callbackUrl:
                                                    locale == "cy"
                                                        ? "/allgofnodi"
                                                        : "/logout",
                                            });
                                    }}
                                    className="govuk-header__link govuk-!-margin-right-3"
                                >
                                    {t("common:signout-label")}
                                </a>
                            </Link>
                        )}

                        <Link
                            href={
                                locale == "en"
                                    ? _.isEmpty(router.query)
                                        ? router.pathname
                                        : router.pathname +
                                          "?" +
                                          Object.keys(router.query)
                                              .map(
                                                  (key) =>
                                                      key +
                                                      "=" +
                                                      router.query[key]
                                              )
                                              .join("&")
                                    : _.isEmpty(router.query) != false
                                    ? router.asPath +
                                      "?" +
                                      Object.keys(router.query)
                                          .map(
                                              (key) =>
                                                  key + "=" + router.query[key]
                                          )
                                          .join("&")
                                    : router.asPath
                            }
                            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"
                                }
                                onClick={() => {
                                    setCookie(
                                        null,
                                        "pedw_locale",
                                        locale == "en" ? "cy" : "en",
                                        {
                                            path: "/",
                                        }
                                    );
                                }}
                            >
                                {" "}
                                {t("common:available-in")}
                            </a>
                        </Link>
                    </div>
                </div>
            </div>
            <Banner />
        </header>
    );
};
const mapDispatchToProps = (dispatch) => {
    return {
        setLogout: () => {
            dispatch(setLogout());
        },
    };
};

export default connect(null, mapDispatchToProps)(Header);