Merged PR 2267: added ai guidance overlay

added ai guidance overlay Related work items: #21744
2026-04-22 13:28:05 +00:00
parent b0004381ed
commit 7a14b7e8c9
5 changed files with 107 additions and 2 deletions
@@ -0,0 +1,94 @@
+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 fade show"
+            style={{
+                display: "flex",
+                alignItems: "top",
+                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")}
+                    </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>
+    );
+}