105 lines
3.4 KiB
JavaScript
105 lines
3.4 KiB
JavaScript
import useTranslation from "next-translate/useTranslation";
|
|
import { parseCookies, setCookie } from "nookies";
|
|
import { useEffect, useRef, useState } from "react";
|
|
|
|
const COOKIE_NAME = "pedwAiPolicyNoticeHidden";
|
|
const COOKIE_DAYS = 7;
|
|
|
|
export default function AIPolicyNotice() {
|
|
let { t } = useTranslation();
|
|
|
|
const [hasCheckedCookie, setHasCheckedCookie] = useState(false);
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const dismissButtonRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const cookies = parseCookies();
|
|
const isHidden = cookies[COOKIE_NAME] === "true";
|
|
|
|
setIsOpen(!isHidden);
|
|
setHasCheckedCookie(true);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isOpen && dismissButtonRef.current) {
|
|
dismissButtonRef.current.focus();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
const dismissNotice = () => {
|
|
const now = new Date();
|
|
const expDate = new Date(now);
|
|
|
|
expDate.setDate(now.getDate() + COOKIE_DAYS);
|
|
|
|
setCookie(null, COOKIE_NAME, "true", {
|
|
path: "/",
|
|
expires: expDate
|
|
});
|
|
|
|
setIsOpen(false);
|
|
};
|
|
|
|
if (!hasCheckedCookie || !isOpen) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="modal aiModal fade show"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "1rem"
|
|
}}
|
|
aria-hidden={false}
|
|
>
|
|
<div className="modal-dialog" style={{ margin: 0 }}>
|
|
<div
|
|
className="modal-content govuk-!-padding-6"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="ai-policy-notice-title"
|
|
>
|
|
<h2
|
|
id="ai-policy-notice-title"
|
|
className="govuk-heading-m govuk-!-margin-bottom-3"
|
|
>
|
|
{t("home:ai-policy-notice-title")}
|
|
</h2>
|
|
<p className="govuk-body">
|
|
{t("home:ai-policy-notice-paragraph-one")}
|
|
</p>
|
|
<p className="govuk-body govuk-!-margin-bottom-4">
|
|
{t("home:ai-policy-notice-paragraph-two")}{" "}
|
|
<a
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={t(
|
|
"home:ai-policy-notice-paragraph-two-a-link"
|
|
)}
|
|
>
|
|
{t("home:ai-policy-notice-paragraph-two-a-label")}
|
|
</a>{" "}
|
|
{t("home:ai-policy-notice-paragraph-two-b")}
|
|
</p>
|
|
<button
|
|
ref={dismissButtonRef}
|
|
type="button"
|
|
className="govuk-button govuk-!-margin-bottom-0"
|
|
data-module="govuk-button"
|
|
onClick={dismissNotice}
|
|
>
|
|
{t("home:ai-policy-notice-dismiss-button")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="modal-backdrop fade show"
|
|
style={{ opacity: 0.2 }}
|
|
></div>
|
|
</div>
|
|
);
|
|
}
|