138 lines
5.4 KiB
JavaScript
138 lines
5.4 KiB
JavaScript
import CookieConsent from "react-cookie-consent";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import cookie from "cookie-cutter";
|
|
import { useState, useEffect } from "react";
|
|
|
|
const CookieBanner = () => {
|
|
let { t, lang } = useTranslation();
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const [bannerVisible, setBannerVisible] = useState(true);
|
|
|
|
const accept = () => {
|
|
let now = new Date();
|
|
let expDate = new Date(now);
|
|
|
|
expDate.setDate(now.getDate() + 365);
|
|
cookie.set("planning_casework", true, {
|
|
expires: expDate,
|
|
});
|
|
|
|
let cookieStr = {
|
|
"essential": "accepted",
|
|
"usage": "accepted",
|
|
"communications": "accepted",
|
|
"settings": "accepted",
|
|
};
|
|
|
|
cookie.set("CookiePolicy", JSON.stringify(cookieStr).toString(), {
|
|
expires: expDate,
|
|
path: "/",
|
|
});
|
|
|
|
setBannerVisible(false);
|
|
};
|
|
|
|
return <>
|
|
{bannerVisible ? (
|
|
<CookieConsent
|
|
style={{
|
|
position: "inherit",
|
|
background: "#eeeeee",
|
|
display: "block",
|
|
}}
|
|
containerClasses="app-cookie-banner"
|
|
buttonClasses="cookies-banner__button"
|
|
buttonWrapperClasses="govuk-width-container consentBanner hidden"
|
|
declineButtonClasses="cookies-banner__button"
|
|
buttonText={t("common:cookie-banner-accept")}
|
|
declineButtonText={t("common:cookie-banner-decline")}
|
|
disableStyles={true}
|
|
enableDeclineButton={true}
|
|
flipButtons={true}
|
|
hideOnAccept={true}
|
|
cookieName="planning_casework"
|
|
>
|
|
<div className="app-cookie-banner">
|
|
<div
|
|
id="global-cookie-message"
|
|
className="govuk-clearfix"
|
|
data-module="cookie-banner"
|
|
role="region"
|
|
aria-label="cookie banner"
|
|
data-nosnippet=""
|
|
>
|
|
<div className="govuk-width-container">
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-two-thirds">
|
|
<div className="">
|
|
<p className="cookies-banner__description">
|
|
{t(
|
|
"common:cookie-banner-line-1"
|
|
)}
|
|
</p>
|
|
<ul className="cookies-banner__description">
|
|
<li>
|
|
{" "}
|
|
{t(
|
|
"common:cookie-banner-list-item-1"
|
|
)}
|
|
</li>
|
|
</ul>
|
|
<p className="cookies-banner__description">
|
|
{t(
|
|
"common:cookie-banner-line-2"
|
|
)}
|
|
</p>
|
|
<ul className="cookies-banner__description">
|
|
<li>
|
|
{t(
|
|
"common:cookie-banner-list-item-2"
|
|
)}
|
|
</li>
|
|
<li>
|
|
{t(
|
|
"common:cookie-banner-list-item-3"
|
|
)}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="govuk-width-container consentBannerShow">
|
|
<button
|
|
className="cookies-banner__button"
|
|
id="rcc-confirm-button"
|
|
aria-label="Accept cookies"
|
|
onClick={() => {
|
|
accept();
|
|
}}
|
|
>
|
|
{t("common:cookie-banner-accept")}
|
|
</button>
|
|
|
|
<Link
|
|
href="/help/cookies"
|
|
className="cookies-banner__button govuk-link--no-underline"
|
|
id="rcc-decline-button"
|
|
aria-label="Decline cookies">
|
|
|
|
{t("common:cookie-banner-change-settings")}
|
|
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</CookieConsent>
|
|
) : (
|
|
""
|
|
)}
|
|
</>;
|
|
};
|
|
|
|
export default CookieBanner;
|