pedwfrontend/components/footer.js

import useTranslation from "next-translate/useTranslation";
import Link from "next/link";
import { useRouter } from "next/router";
import { useState } from "react";

export default function Footer(props) {
    let { t } = useTranslation();

    const router = useRouter();
    const { locale } = router;

    var linksArr = props.footerLinks || [{}];

    const linksBlock = Object.keys(linksArr).map((key) => (
        <li className="govuk-footer__inline-list-item" key={key}>
            <Link
                href={linksArr[key].path || "/"}
                className="govuk-footer__link"
            >
                {linksArr[key].title}
            </Link>
        </li>
    ));

    const [showShareState, setShowShareState] = useState(false);
    const [copySuccess, setCopySuccess] = useState("");

    let shareState = () => {
        showShareState == true
            ? (setShowShareState(false), setCopySuccess(""))
            : setShowShareState(true);
    };

    const copyToClipBoard = async (copyMe) => {
        try {
            await navigator.clipboard.writeText(copyMe);
            setCopySuccess(" - " + t("common:social-bar-share-copy-link-done"));
        } catch (err) {
            setCopySuccess("Failed to copy!");
        }
    };

    const origin =
        typeof window !== "undefined" && window.location.origin
            ? window.location.origin
            : process.env.API_ROOT;

    const URL = `${origin}`;

    const shareBodyStr =
        // t("common:service-home-url") +
        URL +
        (locale == "cy" ? "/cy" : "") +
        (router.route == "/case" ||
        router.route == "/dnsdetails" ||
        router.route == "/myportal/case"
            ? (router.route == "/dnsdetails" ? "/dns/" : "/case/") +
              encodeURIComponent(props.ticketnumber)
            : router.asPath);
    const shareSubjectStr =
        t("common:social-shared-from") +
        " " +
        t("common:gov-wales-label").toLowerCase();

    return (
        <>
            <div
                className="sharebar"
                id="sharebar"
                role="complementary"
                aria-label="Share this page"
            >
                <div className="sharebar__components container-fluid">
                    <div className="main__sharebar">
                        <div
                            className={
                                showShareState
                                    ? "block-share active"
                                    : "block-share"
                            }
                        >
                            <button
                                id="sharePage"
                                aria-controls="sharePageLinks"
                                aria-expanded="true"
                                onClick={() => {
                                    shareState();
                                }}
                            >
                                {t("common:social-bar-share-link")}
                            </button>
                            <ul
                                className={
                                    showShareState
                                        ? "block-share active"
                                        : "block-share"
                                }
                                id="sharePageLinks"
                                aria-labelledby="sharePage"
                            >
                                <li>
                                    <a
                                        href={
                                            "https://twitter.com/intent/tweet?url=" +
                                            shareBodyStr
                                        }
                                        className="twitter"
                                    >
                                        <span className="vo_hidden">
                                            {t(
                                                "common:social-bar-share-via-link",
                                            )}{" "}
                                        </span>
                                        Twitter
                                    </a>
                                </li>
                                <li>
                                    <a
                                        href={
                                            "https://www.facebook.com/sharer/sharer.php?u=" +
                                            shareBodyStr
                                        }
                                        className="facebook"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        Facebook
                                    </a>
                                </li>
                                <li>
                                    <a
                                        href={
                                            "mailto:?body=" +
                                            shareBodyStr +
                                            "&subject=" +
                                            shareSubjectStr
                                        }
                                        className="email"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        Email
                                    </a>
                                </li>
                                <li>
                                    <a
                                        onClick={() => {
                                            copyToClipBoard(shareBodyStr);
                                        }}
                                        className="link"
                                    >
                                        <span className="vo_hidden">
                                            Share this page via{" "}
                                        </span>
                                        {t("common:social-bar-share-copy-link")}{" "}
                                        {copySuccess}
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div
                            id="sharebar__backtotop"
                            className="btn--outlined btn--arrow-up"
                        >
                            <a href="#page_wrapper">
                                {t("common:back-to-top-link")}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <footer className="govuk-footer " role="contentinfo">
                <div className="govuk-width-container ">
                    <div className="govuk-footer__meta">
                        <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
                            <h2 className="govuk-visually-hidden">
                                Support links
                            </h2>
                            <nav
                                role="navigation"
                                aria-labelledby="footer_links"
                            >
                                <ul className="govuk-footer__inline-list">
                                    <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
                                        <a
                                            href={t(
                                                "common:footer-guidance-link",
                                            )}
                                            className="nav-link"
                                        >
                                            {t(
                                                "common:footer-guidance-link-label",
                                            )}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
                                        <a
                                            href={t(
                                                "common:footer-announcements-link",
                                            )}
                                            className="nav-link"
                                        >
                                            {t(
                                                "common:footer-announcements-link-label",
                                            )}
                                        </a>
                                    </li>
                                    <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold">
                                        <a
                                            href={t(
                                                "common:footer-contact-us-link",
                                            )}
                                            className="govuk-footer__link"
                                            id="aContactUs"
                                        >
                                            {t(
                                                "common:footer-contact-us-link-label",
                                            )}
                                        </a>
                                    </li>
                                </ul>
                                <ul
                                    className="govuk-footer__inline-list"
                                    id="footer_links"
                                >
                                    <li className="govuk-footer__inline-list-item">
                                        <Link
                                            href={
                                                router.locale == "cy"
                                                    ? "/hygyrchedd"
                                                    : "/accessibility"
                                            }
                                            className="govuk-footer__link"
                                            id="aAccessibility"
                                        >
                                            {t(
                                                "common:footer-accessibility-link-label",
                                            )}
                                        </Link>
                                    </li>

                                    <li className="govuk-footer__inline-list-item">
                                        <Link
                                            href={
                                                router.locale == "cy"
                                                    ? "/help/cwcis"
                                                    : "/help/cookies"
                                            }
                                            id="aCookies"
                                            className="govuk-footer__link"
                                        >
                                            {t("common:footer-cookies-link")}
                                        </Link>
                                    </li>
                                    <li className="govuk-footer__inline-list-item">
                                        <a
                                            href={t(
                                                "common:footer-copyright-link",
                                            )}
                                            className="govuk-footer__link"
                                            id="Access"
                                        >
                                            {t(
                                                "common:footer-copyright-link-label",
                                            )}
                                        </a>
                                    </li>

                                    <li className="govuk-footer__inline-list-item">
                                        <Link
                                            href={t(
                                                "common:footer-privacy-link",
                                            )}
                                            id="aPrivacy"
                                            className="govuk-footer__link"
                                        >
                                            {t(
                                                "common:footer-privacy-link-label",
                                            )}
                                        </Link>
                                    </li>

                                    <li className="govuk-footer__inline-list-item">
                                        <Link
                                            href={t(
                                                "common:footer-terms-conditions-link",
                                            )}
                                            id="aTermsConds"
                                            className="govuk-footer__link"
                                        >
                                            {t(
                                                "common:footer-terms-conditions-link-label",
                                            )}
                                        </Link>
                                    </li>
                                </ul>
                            </nav>
                            <div
                                className="footer_logo container-fluid"
                                id="footer_logo"
                            >
                                <a
                                    href={t("common:gov-wales-link")}
                                    className="footer__logo"
                                    id="footerlogo"
                                >
                                    <span className="visually-hidden">
                                        {t("common:gov-wales-label")}
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </>
    );
}