nextjs-cookie-consent
Version:
A GDPR/DSGVO-compliant cookie consent banner for Next.js
99 lines (98 loc) • 5.72 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
import { useConsent } from '../context/ConsentContext';
import { storageUtils } from '../utils/storage';
export var CookieBanner = function (_a) {
var _b = _a.categories, categories = _b === void 0 ? [] : _b, content = _a.content, _c = _a.storageStrategy, storageStrategy = _c === void 0 ? 'localStorage' : _c;
var _d = useState(false), showBanner = _d[0], setShowBanner = _d[1];
var _e = useState(false), showSettings = _e[0], setShowSettings = _e[1];
var _f = useState({ necessary: true }), tempConsent = _f[0], setTempConsent = _f[1];
var _g = useConsent(), consent = _g.consent, updateConsent = _g.updateConsent;
var isInitialized = useRef(false);
// Initialize consent state only once
useEffect(function () {
if (isInitialized.current)
return;
var savedConsent = storageUtils.get(storageStrategy);
if (savedConsent) {
updateConsent(savedConsent);
setShowBanner(false);
}
else {
// Initialize with necessary only
var initialConsent_1 = { necessary: true };
categories.forEach(function (cat) {
initialConsent_1[cat.key] = false;
});
updateConsent(initialConsent_1);
setTempConsent(initialConsent_1);
setShowBanner(true);
}
isInitialized.current = true;
}, []); // Empty dependency array - run only once
// Separate effect to handle categories change (if needed)
useEffect(function () {
if (!isInitialized.current)
return;
// Update tempConsent if categories change after initialization
var newTempConsent = { necessary: true };
categories.forEach(function (cat) {
newTempConsent[cat.key] = consent[cat.key] || false;
});
setTempConsent(newTempConsent);
}, [categories, consent]);
var handleAcceptNecessary = function () {
var necessaryOnly = { necessary: true };
categories.forEach(function (cat) {
necessaryOnly[cat.key] = false;
});
updateConsent(necessaryOnly);
storageUtils.set(storageStrategy, necessaryOnly);
setShowBanner(false);
};
var handleAcceptAll = function () {
var acceptAll = { necessary: true };
categories.forEach(function (cat) {
acceptAll[cat.key] = true;
});
updateConsent(acceptAll);
storageUtils.set(storageStrategy, acceptAll);
setShowBanner(false);
};
var handleShowSettings = function () {
setTempConsent(__assign({}, consent));
setShowSettings(true);
};
var handleSaveSettings = function () {
updateConsent(tempConsent);
storageUtils.set(storageStrategy, tempConsent);
setShowSettings(false);
setShowBanner(false);
};
var handleBackToDefault = function () {
setShowSettings(false);
};
var handleCategoryToggle = function (categoryKey) {
if (categoryKey === 'necessary')
return; // Can't toggle necessary
setTempConsent(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[categoryKey] = !prev[categoryKey], _a)));
});
};
if (!showBanner) {
return null;
}
return (_jsx("div", { className: "njs-cookie-banner-container", children: !showSettings ? (_jsxs("div", { className: "njs-cookie-banner-default", children: [content && _jsx("div", { className: "njs-cookie-banner-content", children: content }), _jsxs("div", { className: "njs-cookie-banner-buttons", children: [_jsx("button", { className: "njs-cookie-banner-button-necessary", onClick: handleAcceptNecessary, children: "Nur notwendige" }), _jsx("button", { className: "njs-cookie-banner-button-accept-all", onClick: handleAcceptAll, children: "Alle akzeptieren" }), _jsx("button", { className: "njs-cookie-banner-button-settings", onClick: handleShowSettings, children: "Einstellungen" })] })] })) : (_jsxs("div", { className: "njs-cookie-banner-settings", children: [_jsx("h3", { className: "njs-cookie-banner-settings-heading", children: "Cookie-Settings" }), _jsxs("div", { className: "njs-cookie-banner-categories", children: [_jsxs("div", { className: "njs-cookie-banner-category", children: [_jsx("input", { type: "checkbox", id: "cookie-necessary", checked: true, disabled: true }), _jsx("label", { htmlFor: "cookie-necessary", children: "Necessary (always active)" })] }), categories.map(function (category) { return (_jsxs("div", { className: "njs-cookie-banner-category", children: [_jsx("input", { type: "checkbox", id: "cookie-".concat(category.key), checked: tempConsent[category.key] || false, onChange: function () { return handleCategoryToggle(category.key); } }), _jsx("label", { htmlFor: "cookie-".concat(category.key), children: category.label })] }, category.key)); })] }), _jsxs("div", { className: "njs-cookie-banner-buttons", children: [_jsx("button", { className: "njs-cookie-banner-button-back", onClick: handleBackToDefault, children: "Back" }), _jsx("button", { className: "njs-cookie-banner-button-save", onClick: handleSaveSettings, children: "Save" })] })] })) }));
};