485 lines
24 KiB
JavaScript
485 lines
24 KiB
JavaScript
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import useTranslation from "next-translate/useTranslation";
|
|
import { Field, reduxForm } from "redux-form";
|
|
import { parseCookies, setCookie, destroyCookie } from "nookies";
|
|
import { connect } from "react-redux";
|
|
|
|
import cookie from "cookie-cutter";
|
|
|
|
const CookieManagementMain = (props) => {
|
|
let { t } = useTranslation();
|
|
|
|
const router = useRouter();
|
|
const { locale } = router;
|
|
|
|
const { handleSubmit } = props;
|
|
|
|
const onHandleSubmit = (values) => {
|
|
Object.assign(values, {
|
|
"essential": "accepted",
|
|
"usage": usageState,
|
|
// "communications": communicationsState,
|
|
"settings": settingsState,
|
|
});
|
|
|
|
let now = new Date();
|
|
let expDate = new Date(now);
|
|
expDate.setDate(now.getDate() + 365);
|
|
|
|
cookie.set("CookiePolicy", JSON.stringify(values).toString(), {
|
|
expires: expDate,
|
|
path: "/",
|
|
});
|
|
|
|
function delete_cookie(name, path, domain) {
|
|
document.cookie =
|
|
name +
|
|
"=" +
|
|
(path ? ";path=" + path : "") +
|
|
(domain ? ";domain=" + domain : "") +
|
|
";expires=Thu, 01 Jan 1970 00:00:01 GMT";
|
|
}
|
|
|
|
usageState == "revoked" && delete_cookie("_ga", "/"),
|
|
delete_cookie("_gid", "/");
|
|
|
|
cookie.set("planning_casework", true, {
|
|
expires: expDate,
|
|
path: "/",
|
|
});
|
|
|
|
setSavedState(true);
|
|
};
|
|
|
|
let cookieCheck = parseCookies();
|
|
|
|
let cookieObj =
|
|
typeof cookieCheck.CookiePolicy == "undefined"
|
|
? {}
|
|
: JSON.parse(cookieCheck.CookiePolicy);
|
|
|
|
const [savedState, setSavedState] = useState(false);
|
|
|
|
const [usageState, setUsageState] = useState(
|
|
typeof cookieCheck.CookiePolicy == "undefined" ? null : cookieObj.usage
|
|
);
|
|
// const [communicationsState, setCommunicationsState] = useState(
|
|
// typeof cookieCheck.CookiePolicy == "undefined"
|
|
// ? null
|
|
// : cookieObj.communications
|
|
// );
|
|
const [settingsState, setSettingsState] = useState(
|
|
typeof cookieCheck.CookiePolicy == "undefined"
|
|
? null
|
|
: cookieObj.settings
|
|
);
|
|
|
|
let updateObj = (key, value) => {
|
|
switch (key) {
|
|
case "usage":
|
|
setUsageState(value);
|
|
break;
|
|
// case "communications":
|
|
// setCommunicationsState(value);
|
|
// break;
|
|
case "settings":
|
|
setSettingsState(value);
|
|
break;
|
|
default:
|
|
// code block
|
|
}
|
|
};
|
|
|
|
const CookieForm = () => {
|
|
return (
|
|
<main
|
|
className="govuk-main-wrapper govuk-!-padding-top-9 govuk-main-wrapper--auto-spacing"
|
|
id="main-content"
|
|
role="main"
|
|
>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<h1 className="govuk-heading-l govuk-!-margin-bottom-5">
|
|
{t("cookies:cookie-title-heading")}
|
|
</h1>
|
|
<hr className="govuk-section-break govuk-section-break--visible" />
|
|
|
|
{savedState && (
|
|
<div
|
|
id="cookieSettingsMessageSuccess"
|
|
className="govuk-inset-text paragraph--type--call-out-message call-out-type-positive-alert-message"
|
|
>
|
|
<h2 className="govuk-heading-l">
|
|
<strong>
|
|
{t("cookies:cookie-saved-heading")}
|
|
</strong>
|
|
</h2>
|
|
<p className="govuk-body">
|
|
{t("cookies:cookie-saved-paragraph")}
|
|
</p>
|
|
</div>
|
|
)}
|
|
{typeof cookieCheck.CookiePolicy == "undefined" ? (
|
|
<>
|
|
<div className="govuk-inset-text paragraph--type--call-out-message">
|
|
<h2 className="govuk-heading-l">
|
|
{t("cookies:cookie-not-saved-heading")}
|
|
</h2>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-not-saved-paragraph"
|
|
)}
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
|
|
<div
|
|
className={
|
|
typeof cookieCheck.CookiePolicy != "undefined"
|
|
? "govuk-body govuk-!-margin-top-5"
|
|
: "govuk-body"
|
|
}
|
|
>
|
|
<p className="govuk-body">
|
|
{t("cookies:cookie-intro-paragraph-1")}
|
|
</p>
|
|
<p className="govuk-body">
|
|
{t("cookies:cookie-intro-paragraph-2")}
|
|
</p>
|
|
|
|
<p className="govuk-body">
|
|
{t("cookies:cookie-intro-paragraph-3")}
|
|
</p>
|
|
</div>
|
|
<div id="cookies-js">
|
|
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
|
<div>
|
|
<h3 className="govuk-heading-l">
|
|
{t("cookies:cookie-settings-heading")}
|
|
</h3>
|
|
</div>
|
|
<fieldset className="govuk-fieldset">
|
|
<legend className="govuk-fieldset__legend">
|
|
<h4 className="govuk-!-font-size-27">
|
|
{t(
|
|
"cookies:cookie-settings-usage-heading"
|
|
)}
|
|
</h4>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-usage-paragraph-1"
|
|
)}
|
|
</p>
|
|
|
|
<ul className="govuk-list govuk-list--bullet">
|
|
<li>
|
|
{t(
|
|
"cookies:cookie-settings-usage-list-item-1"
|
|
)}
|
|
</li>
|
|
<li>
|
|
{t(
|
|
"cookies:cookie-settings-usage-list-item-2"
|
|
)}
|
|
</li>
|
|
|
|
<li>
|
|
{t(
|
|
"cookies:cookie-settings-usage-list-item-3"
|
|
)}
|
|
</li>
|
|
</ul>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-usage-list-item-4"
|
|
)}
|
|
</p>
|
|
<div className="govuk-radios govuk-radios--small">
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
name="usage"
|
|
className="govuk-radios__input"
|
|
id="usage-1"
|
|
type="radio"
|
|
value="revoked"
|
|
checked={
|
|
usageState === "revoked"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"usage",
|
|
"revoked"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="usage-1"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-usage-radio-1-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
className="govuk-radios__input"
|
|
id="usage-2"
|
|
name="usage"
|
|
type="radio"
|
|
value="accepted"
|
|
checked={
|
|
usageState ===
|
|
"accepted"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"usage",
|
|
"accepted"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="usage-2"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-usage-radio-2-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</legend>
|
|
</fieldset>
|
|
{/* <fieldset className="govuk-fieldset">
|
|
<legend className="govuk-fieldset__legend">
|
|
<h4 className="govuk-!-font-size-27">
|
|
{t(
|
|
"cookies:cookie-settings-communications-heading"
|
|
)}
|
|
</h4>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-communications-paragraph-1"
|
|
)}
|
|
</p>
|
|
</legend>
|
|
<div className="govuk-radios govuk-radios--small">
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
className="govuk-radios__input"
|
|
id="communications-1"
|
|
name="communications"
|
|
type="radio"
|
|
value="revoked"
|
|
component="input"
|
|
checked={
|
|
communicationsState ===
|
|
"revoked"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"communications",
|
|
"revoked"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="communications-1"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-communications-radio-1-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
className="govuk-radios__input"
|
|
id="communications-2"
|
|
name="communications"
|
|
type="radio"
|
|
value="accepted"
|
|
component="input"
|
|
checked={
|
|
communicationsState ===
|
|
"accepted"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"communications",
|
|
"accepted"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="communications-2"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-communications-radio-2-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset> */}
|
|
|
|
<fieldset className="govuk-fieldset">
|
|
<legend className="govuk-fieldset__legend">
|
|
<h4 className="govuk-!-font-size-27">
|
|
{t(
|
|
"cookies:cookie-settings-settings-heading"
|
|
)}
|
|
</h4>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-settings-paragraph-1"
|
|
)}
|
|
</p>
|
|
</legend>
|
|
<div className="govuk-radios govuk-radios--small">
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
className="govuk-radios__input"
|
|
id="settings-1"
|
|
name="settings"
|
|
type="radio"
|
|
value="revoked"
|
|
checked={
|
|
settingsState === "revoked"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"settings",
|
|
"revoked"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="settings-1"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-settings-radio-1-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
<div className="govuk-radios__item">
|
|
<input
|
|
className="govuk-radios__input"
|
|
id="settings-2"
|
|
name="settings"
|
|
type="radio"
|
|
value="accepted"
|
|
checked={
|
|
settingsState === "accepted"
|
|
}
|
|
onChange={() => {
|
|
updateObj(
|
|
"settings",
|
|
"accepted"
|
|
);
|
|
}}
|
|
/>
|
|
<label
|
|
className="govuk-label govuk-radios__label"
|
|
htmlFor="settings-2"
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-settings-radio-2-label"
|
|
)}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset className="govuk-fieldset">
|
|
<legend className="govuk-fieldset__legend">
|
|
<h4 className="govuk-!-font-size-27">
|
|
{t(
|
|
"cookies:cookie-settings-essential-heading"
|
|
)}
|
|
</h4>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-essential-paragraph-1"
|
|
)}
|
|
</p>
|
|
<ul className="govuk-list govuk-list--bullet">
|
|
<li>
|
|
{t(
|
|
"cookies:cookie-settings-essential-list-item-1"
|
|
)}
|
|
</li>
|
|
<li>
|
|
{t(
|
|
"cookies:cookie-settings-essential-list-item-2"
|
|
)}
|
|
</li>
|
|
</ul>
|
|
<p className="govuk-body">
|
|
{t(
|
|
"cookies:cookie-settings-essential-paragraph-2"
|
|
)}
|
|
</p>
|
|
<p className="govuk-body">
|
|
<Link
|
|
href={t(
|
|
"cookies:cookie-settings-essential-link"
|
|
)}
|
|
>
|
|
<a className="govuk-link govuk-link--no-underline govuk-!-font-weight-bold">
|
|
{t(
|
|
"cookies:cookie-settings-essential-link-label"
|
|
)}
|
|
</a>
|
|
</Link>
|
|
</p>
|
|
</legend>
|
|
</fieldset>
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="govuk-button "
|
|
>
|
|
{t(
|
|
"cookies:cookie-settings-save-button-label"
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<CookieForm />
|
|
</>
|
|
);
|
|
};
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
initialValues: {
|
|
usage: state.accountDetails.cookieObj.usage,
|
|
//communications: state.accountDetails.cookieObj.communications,
|
|
settings: state.accountDetails.cookieObj.settings,
|
|
},
|
|
};
|
|
};
|
|
|
|
export default connect(mapStateToProps)(
|
|
reduxForm({
|
|
form: "CookieManagementForm",
|
|
enableReinitialize: true,
|
|
})(CookieManagementMain)
|
|
);
|