pedwfrontend/components/header.js

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 { performPortalSignOut } from "../lib/auth/sessionClient";

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",
        "/myportal/contactus",
        "/unsubscribe/[watchlistid]",
        "/unsubscribeall/[watchlistid]",
        "/status"
    ];

    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 = () => {
        performPortalSignOut(locale);
    };

    //const switchLocale = locale === "en" ? "cy" : "en";

    const switchLocale = router.asPath.startsWith("/cy") ? "en" : "cy";

    //console.log("switch locale", locale === "en" ? "cy" : "en");

    // const handleLocaleSwitch = () => {
    //     // const router = useRouter();
    //     const isWelsh = router.asPath.startsWith("/cy");

    //     console.log(
    //         isWelsh,
    //         router.asPath,
    //         router.basePath,
    //         router.pathname,
    //         router.route
    //     );

    //     // Switch path: remove /cy if switching to English, add /cy if switching to Welsh
    //     const newPath = isWelsh
    //         ? router.asPath.replace(/^\/cy/, "") || "/"
    //         : router.asPath === "/"
    //         ? "/cy"
    //         : `/cy${router.asPath}`;

    //     // Persist user's choice in cookie
    //     setCookie(null, "pedw_locale", isWelsh ? "en" : "cy", {
    //         path: "/",
    //         maxAge: 60 * 60 * 24 * 365, // 1 year
    //     });

    //     // Navigate to new language path
    //     router.push(newPath);
    // };

    const handleLocaleSwitch = () => {
        const isWelsh = router.locale === "cy";
        const newLocale = isWelsh ? "en" : "cy";

        // Set cookie first
        setCookie(null, "pedw_locale", newLocale, {
            path: "/"
        });

        // Then navigate with the new locale
        router.push(router.asPath, router.asPath, { locale: newLocale });
    };

    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="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>
                        )}

                        <span
                            onClick={handleLocaleSwitch}
                            className="govuk-header__link"
                            lang={switchLocale}
                            hrefLang={switchLocale}
                            role="link"
                            tabIndex={0}
                            onKeyDown={(e) => {
                                if (e.key === "Enter") handleLocaleSwitch();
                            }}
                            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")}
                        </span>
                        {/* <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);