pedwfrontend/components/AIPolicyNotice.js

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")}
                    </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>
    );
}