@weahead/consent-manager - npm Package Compare versions

Comparing version 2.1.5 to 2.2.0

dist/components/Buttons/Button/index.js

@@ -10,5 +10,5 @@ "use strict";
     var children = _a.children, _b = _a.className, className = _b === void 0 ? 'cmp-primary' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onClick = _a.onClick;
-    return (react_1["default"].createElement("button", { className: "modal-btn ".concat(className), disabled: disabled, onClick: onClick, type: "button" },
+    return (react_1["default"].createElement("button", { className: "modal-btn ".concat(disabled ? className + '-disabled' : className, " "), disabled: disabled, onClick: onClick, type: "button" },
         react_1["default"].createElement("span", null, children)));
 }
 exports["default"] = Button;

dist/components/Buttons/index.js

@@ -16,3 +16,5 @@ "use strict";
     if (showCookieSettings) {
-        return react_1["default"].createElement(Settings_1["default"], { approveLabel: approveLabel, revokeLabel: revokeLabel });
+        return (react_1["default"].createElement("div", { className: "consent-button-container" },
+            react_1["default"].createElement(Button_1["default"], { className: "cmp-secondary", onClick: actions.approveAllCookies }, approveAllLabel),
+            react_1["default"].createElement(Settings_1["default"], { approveLabel: approveLabel, revokeLabel: revokeLabel })));
     }
@@ -19,0 +21,0 @@ var allCookiesApproved = (cookies === null || cookies === void 0 ? void 0 : cookies[keys_1.analyticsKey]) && (cookies === null || cookies === void 0 ? void 0 : cookies[keys_1.externalKey]);

dist/components/Modal/index.d.ts

 import React from 'react';
 import type { ModalProps } from '../../types/Modal';
-export default function Modal({ analyticsLabel, approveAllLabel, approveLabel, content, externalLabel, functionLabel, moreSettingsLabel, settingsContent, title, revokeLabel, }: ModalProps): React.JSX.Element | null;
+export default function Modal({ analyticsLabel, approveAllLabel, approveLabel, content, externalLabel, functionLabel, moreSettingsLabel, settingsContent, title, revokeLabel, policyLinkLabel, linkUrl, requiredText, }: ModalProps): React.JSX.Element | null;

dist/components/Modal/index.js

@@ -10,6 +10,6 @@ "use strict";
 function Modal(_a) {
-    var _b = _a.analyticsLabel, analyticsLabel = _b === void 0 ? 'Cookies för analys och utveckling' : _b, _c = _a.approveAllLabel, approveAllLabel = _c === void 0 ? 'Godkänn alla' : _c, _d = _a.approveLabel, approveLabel = _d === void 0 ? 'Godkänn val' : _d, content = _a.content, _e = _a.externalLabel, externalLabel = _e === void 0 ? 'Cookies för externt innehåll/teknik (t.ex. sociala medier, ljud, video)' : _e, _f = _a.functionLabel, functionLabel = _f === void 0 ? 'Nödvändiga cookies, tekniker och funktioner' : _f, _g = _a.moreSettingsLabel, moreSettingsLabel = _g === void 0 ? 'Fler inställningar' : _g, settingsContent = _a.settingsContent, _h = _a.title, title = _h === void 0 ? 'Vi använder cookies' : _h, _j = _a.revokeLabel, revokeLabel = _j === void 0 ? 'Återkalla medgivande' : _j;
+    var _b = _a.analyticsLabel, analyticsLabel = _b === void 0 ? 'Cookies för analys och utveckling' : _b, _c = _a.approveAllLabel, approveAllLabel = _c === void 0 ? 'Godkänn alla' : _c, _d = _a.approveLabel, approveLabel = _d === void 0 ? 'Godkänn val' : _d, content = _a.content, _e = _a.externalLabel, externalLabel = _e === void 0 ? 'Cookies för externt innehåll/teknik (t.ex. sociala medier, ljud, video)' : _e, _f = _a.functionLabel, functionLabel = _f === void 0 ? 'Nödvändiga cookies, tekniker och funktioner' : _f, _g = _a.moreSettingsLabel, moreSettingsLabel = _g === void 0 ? 'Fler inställningar' : _g, settingsContent = _a.settingsContent, _h = _a.title, title = _h === void 0 ? 'Vi använder cookies' : _h, _j = _a.revokeLabel, revokeLabel = _j === void 0 ? 'Återkalla medgivande' : _j, _k = _a.policyLinkLabel, policyLinkLabel = _k === void 0 ? 'Personuppgifts- och cookiepolicy' : _k, linkUrl = _a.linkUrl, _l = _a.requiredText, requiredText = _l === void 0 ? 'Alltid påslagna' : _l;
     var isOpen = (0, useConstentManagerContext_1["default"])().isOpen;
-    return isOpen ? (react_1["default"].createElement(Modal_1["default"], { analyticsLabel: analyticsLabel, approveAllLabel: approveAllLabel, approveLabel: approveLabel, content: content, externalLabel: externalLabel, functionLabel: functionLabel, moreSettingsLabel: moreSettingsLabel, settingsContent: settingsContent, title: title, revokeLabel: revokeLabel })) : null;
+    return isOpen ? (react_1["default"].createElement(Modal_1["default"], { analyticsLabel: analyticsLabel, approveAllLabel: approveAllLabel, approveLabel: approveLabel, content: content, externalLabel: externalLabel, functionLabel: functionLabel, moreSettingsLabel: moreSettingsLabel, settingsContent: settingsContent, title: title, revokeLabel: revokeLabel, policyLinkLabel: policyLinkLabel, linkUrl: linkUrl, requiredText: requiredText })) : null;
 }
 exports["default"] = Modal;

dist/components/Modal/Modal.d.ts

 import React from 'react';
 import type { ModalProps } from '../../types/Modal';
 import './style.css';
-export default function ConsentModal({ analyticsLabel, approveAllLabel, approveLabel, content, externalLabel, functionLabel, moreSettingsLabel, settingsContent, title, revokeLabel, }: ModalProps): React.JSX.Element;
+export default function ConsentModal({ analyticsLabel, approveAllLabel, approveLabel, content, externalLabel, functionLabel, moreSettingsLabel, settingsContent, title, revokeLabel, policyLinkLabel, linkUrl, requiredText, }: ModalProps): React.JSX.Element;

dist/components/Modal/Modal.js

@@ -12,5 +12,6 @@ "use strict";
 var Content_1 = __importDefault(require("./Settings/Content"));
+var PolicyLink_1 = __importDefault(require("./PolicyLink"));
 require("./style.css");
 function ConsentModal(_a) {
-    var analyticsLabel = _a.analyticsLabel, approveAllLabel = _a.approveAllLabel, approveLabel = _a.approveLabel, content = _a.content, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel, moreSettingsLabel = _a.moreSettingsLabel, settingsContent = _a.settingsContent, title = _a.title, revokeLabel = _a.revokeLabel;
+    var analyticsLabel = _a.analyticsLabel, approveAllLabel = _a.approveAllLabel, approveLabel = _a.approveLabel, content = _a.content, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel, moreSettingsLabel = _a.moreSettingsLabel, settingsContent = _a.settingsContent, title = _a.title, revokeLabel = _a.revokeLabel, policyLinkLabel = _a.policyLinkLabel, linkUrl = _a.linkUrl, requiredText = _a.requiredText;
     return (react_1["default"].createElement(react_customizable_modal_1.ModalPortal, { id: "consent-portal" },
@@ -20,5 +21,6 @@ react_1["default"].createElement(Overlay_1["default"], null,
                 react_1["default"].createElement(Header_1["default"], { content: content, settingsContent: settingsContent, title: title }),
-                react_1["default"].createElement(Content_1["default"], { analyticsLabel: analyticsLabel, externalLabel: externalLabel, functionLabel: functionLabel }),
+                react_1["default"].createElement(PolicyLink_1["default"], { policyLinkLabel: policyLinkLabel, linkUrl: linkUrl }),
+                react_1["default"].createElement(Content_1["default"], { requiredText: requiredText, analyticsLabel: analyticsLabel, externalLabel: externalLabel, functionLabel: functionLabel }),
                 react_1["default"].createElement(Buttons_1["default"], { approveAllLabel: approveAllLabel, approveLabel: approveLabel, moreSettingsLabel: moreSettingsLabel, revokeLabel: revokeLabel })))));
 }
 exports["default"] = ConsentModal;

dist/components/Modal/Settings/Content.d.ts

 import React from 'react';
 import type { SettingsContentProps } from '../../../types/Settings';
 import './style.css';
-export default function SettingsContent({ analyticsLabel, externalLabel, functionLabel, }: SettingsContentProps): React.ReactElement | null;
+export default function SettingsContent({ analyticsLabel, externalLabel, functionLabel, requiredText, }: SettingsContentProps): React.ReactElement | null;

dist/components/Modal/Settings/Content.js

@@ -9,7 +9,7 @@ "use strict";
 var useConstentManagerContext_1 = __importDefault(require("../../../hooks/useConstentManagerContext"));
-var Disabled_1 = __importDefault(require("../../Buttons/Button/Toggle/Disabled"));
+var Required_1 = __importDefault(require("../../Buttons/Button/Toggle/Required"));
 var Toggle_1 = __importDefault(require("../../Buttons/Button/Toggle"));
 require("./style.css");
 function SettingsContent(_a) {
-    var analyticsLabel = _a.analyticsLabel, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel;
+    var analyticsLabel = _a.analyticsLabel, externalLabel = _a.externalLabel, functionLabel = _a.functionLabel, requiredText = _a.requiredText;
     var showCookieSettings = (0, useConstentManagerContext_1["default"])().showCookieSettings;
@@ -21,11 +21,11 @@ if (!showCookieSettings) {
         react_1["default"].createElement("div", { className: "consent-toggle" },
-            react_1["default"].createElement(Disabled_1["default"], { active: true }),
-            react_1["default"].createElement("span", { className: "consent-toggle-text" }, functionLabel)),
+            react_1["default"].createElement("span", { className: "consent-toggle-text" }, functionLabel),
+            react_1["default"].createElement(Required_1["default"], { requiredText: requiredText })),
         react_1["default"].createElement("div", { className: "consent-toggle" },
-            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.analyticsKey }),
-            react_1["default"].createElement("span", { className: "consent-toggle-text" }, analyticsLabel)),
+            react_1["default"].createElement("span", { className: "consent-toggle-text" }, analyticsLabel),
+            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.analyticsKey })),
         react_1["default"].createElement("div", { className: "consent-toggle" },
-            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.externalKey }),
-            react_1["default"].createElement("span", { className: "consent-toggle-text" }, externalLabel))));
+            react_1["default"].createElement("span", { className: "consent-toggle-text" }, externalLabel),
+            react_1["default"].createElement(Toggle_1["default"], { cookieName: keys_1.externalKey }))));
 }
 exports["default"] = SettingsContent;

dist/contexts/Context/index.d.ts

 import React from 'react';
 import type { PropsWithChildren } from 'react';
 export declare const Context: React.Context<import("../../types/Context").State>;
-export default function ConsentManagerContext({ children, }: PropsWithChildren<{}>): React.JSX.Element;
+export default function ConsentManagerContext({ consentMode, children, }: PropsWithChildren<{
+    consentMode?: boolean;
+}>): React.JSX.Element;

dist/contexts/Context/index.js

@@ -30,11 +30,24 @@ "use strict";
 exports.Context = void 0;
+var react_cookie_consent_hook_1 = require("@weahead/react-cookie-consent-hook");
+var immer_1 = __importDefault(require("immer"));
 var react_1 = __importStar(require("react"));
-var immer_1 = __importDefault(require("immer"));
-var react_cookie_consent_hook_1 = require("@weahead/react-cookie-consent-hook");
+var keys_1 = require("../../helpers/keys");
+var replaceScript_1 = __importDefault(require("../../helpers/replaceScript"));
 var Context_1 = require("../../types/Context");
-var keys_1 = require("../../helpers/keys");
 var reducer_1 = __importStar(require("./reducer"));
-var replaceScript_1 = __importDefault(require("../../helpers/replaceScript"));
 exports.Context = (0, react_1.createContext)(reducer_1.initialState);
 exports.Context.displayName = 'ConsentManagerContext';
+function setGtagConsent(rawConsent) {
+    var consent = rawConsent ? 'granted' : 'denied';
+    //@ts-ignore
+    if (window.gtag) {
+        //@ts-ignore
+        window.gtag('consent', 'update', {
+            analytics_storage: consent
+        });
+    }
+    else {
+        console.log('No gtag on window object');
+    }
+}
 function clearAllCookies() {
@@ -51,5 +64,5 @@ /** Clear any extra cookies set */
 function ConsentManagerContext(_a) {
-    var children = _a.children;
-    var _b = (0, react_cookie_consent_hook_1.useCookieConsent)(), cookies = _b[0], setCookieConsent = _b[1];
-    var _c = (0, react_1.useReducer)(reducer_1["default"], reducer_1.initialState), state = _c[0], dispatch = _c[1];
+    var _b = _a.consentMode, consentMode = _b === void 0 ? false : _b, children = _a.children;
+    var _c = (0, react_cookie_consent_hook_1.useCookieConsent)(), cookies = _c[0], setCookieConsent = _c[1];
+    var _d = (0, react_1.useReducer)(reducer_1["default"], reducer_1.initialState), state = _d[0], dispatch = _d[1];
     function closeModal() {
@@ -85,2 +98,6 @@ dispatch({ type: Context_1.actionType.CLOSE_MODAL });
         });
+        // Update gtag consent mode on every change to analytics cookie
+        if (consentMode) {
+            setGtagConsent(setAnalyticsCookie);
+        }
         if (setAnalyticsCookie) {
@@ -133,2 +150,6 @@ var analyticsScripts = document.head.querySelectorAll('script[type="wa/javascript"]');
         else {
+            // Send found cookies to GA if consent mode is enabled
+            if (consentMode) {
+                setGtagConsent(biscuits['consent-analytics']);
+            }
             dispatch({
@@ -135,0 +156,0 @@ type: Context_1.actionType.SET_INITIAL_COOKIE,

dist/index.d.ts

 import React from 'react';
 import type { PropsWithChildren } from 'react';
-declare function ConsentManager({ children }: PropsWithChildren<{}>): React.JSX.Element;
+declare function ConsentManager({ children, consentMode, }: PropsWithChildren<{
+    consentMode?: boolean;
+}>): React.JSX.Element;
 declare namespace ConsentManager {
@@ -5,0 +7,0 @@ var Modal: typeof import("./components/Modal").default;

dist/index.js

@@ -24,5 +24,5 @@ "use strict";
 function ConsentManager(_a) {
-    var children = _a.children;
+    var children = _a.children, consentMode = _a.consentMode;
     return (react_1["default"].createElement(react_cookie_consent_hook_1.CookieConsentProvider, null,
-        react_1["default"].createElement(Context_1["default"], null, children)));
+        react_1["default"].createElement(Context_1["default"], { consentMode: consentMode }, children)));
 }
@@ -29,0 +29,0 @@ exports["default"] = ConsentManager;

dist/types/Button.d.ts

@@ -6,4 +6,4 @@ import type { PropsWithChildren } from 'react';
 };
-export declare type DisabledButtonProps = {
-    active: boolean;
+export declare type RequiredToggleProps = {
+    requiredText: string;
 };
@@ -10,0 +10,0 @@ export declare type ButtonProps = PropsWithChildren<{

dist/types/Modal.d.ts

@@ -12,2 +12,5 @@ export declare type ModalProps = {
     revokeLabel: string;
+    policyLinkLabel: string;
+    linkUrl: string;
+    requiredText: string;
 };

dist/types/Settings.d.ts

@@ -5,2 +5,3 @@ export declare type SettingsContentProps = {
     functionLabel: string;
+    requiredText: string;
 };

package.json

 {
   "name": "@weahead/consent-manager",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "author": "Weahead AB <[e-mail]>",
@@ -48,3 +48,4 @@ "main": "./dist/index.js",
     "@weahead/react-customizable-modal": "2.0.1",
-    "immer": "9.0.14"
+    "immer": "9.0.14",
+    "react-feather": "2.0.10"
   },
@@ -58,3 +59,3 @@ "peerDependencies": {
     "@commitlint/config-conventional": "^16.0.0",
-    "@types/react": "^18.2.18",
+    "@types/react": "18.2.21",
     "commitizen": "^4.2.4",
@@ -61,0 +62,0 @@ "copyfiles": "2.4.1",

README.md

@@ -49,16 +49,20 @@ # Consent Manager
   /* COLORS */
-  --cmp-theme-background: "";             /* defaults to #f8f8f8 */
-  --cmp-theme-black: "";                  /* defaults to #000000 */
-  --cmp-theme-disabled: "";               /* defaults to #b8b7bf */
-  --cmp-theme-disabled-background: "";    /* defaults to #e0dfe3 */
-  --cmp-theme-link: "";                   /* defaults to #2daf9c */
-  --cmp-theme-link-text: "";              /* defaults to #000 */
-  --cmp-theme-primary: "";                /* defaults to #224 */
-  --cmp-theme-primary-background: "";     /* defaults to #6449da */
-  --cmp-theme-primary-border-color: "";   /* defaults to #224 */
-  --cmp-theme-secondary: "";              /* defaults to #6449da */
-  --cmp-theme-secondary-background: "";   /* defaults to #FFF */
-  --cmp-theme-secondary-border-color: ""; /* defaults to #000 */
-  --cmp-theme-selected: "";               /* defaults to #2daf9c */
-  --cmp-theme-white: "";                  /* defaults to #FFF */
+  --cmp-theme-background: "";                 /* defaults to #f8f8f8 */
+  --cmp-theme-black: "";                      /* defaults to #000000 */
+  --cmp-theme-disabled: "";                   /* defaults to #b8b7bf */
+  --cmp-theme-disabled-background: "";        /* defaults to #e0dfe3 */
+  --cmp-theme-link: "";                       /* defaults to #2daf9c */
+  --cmp-theme-link-text: "";                  /* defaults to #000 */
+  --cmp-theme-primary: "";                    /* defaults to #224 */
+  --cmp-theme-primary-background: "";         /* defaults to #6449da */
+  --cmp-theme-primary-button-text: "";        /* defaults to #000000 */
+  --cmp-theme-primary-button-text-hover: "";  /* defaults to #000000 */
+  --cmp-theme-primary-border-color: "";       /* defaults to #224 */
+  --cmp-theme-secondary: "";                  /* defaults to #6449da */
+  --cmp-theme-secondary-background: "";       /* defaults to #FFF */
+  --cmp-theme-secondary-border-color: "";     /* defaults to #000 */
+  --cmp-theme-secondary-button-text: "";      /* defaults to #000000 */
+  --cmp-theme-secondary-button-text-hover: "";/* defaults to #000000 */
+  --cmp-theme-selected: "";                   /* defaults to #2daf9c */
+  --cmp-theme-white: "";                      /* defaults to #FFF */
 
@@ -76,2 +80,3 @@ /* FONTFAMILY */
   /* FONTWEIGHT */
+  --cmp-theme-medium: "";                 /* defaults to 400 */
   --cmp-theme-bold: "";                 /* defaults to 700 */
@@ -81,4 +86,7 @@ }
 
+## GA4 Consent mode
+The ConsentManager accepts a boolean for if Consent mode is enabled in Google Analytics. If enabled, the consent state is updated for each change of cookie preference. 
+
 ## License
 
 [X11](LICENSE)

src/types/Button.ts

@@ -8,4 +8,4 @@ import type { PropsWithChildren } from 'react'
 
-export type DisabledButtonProps = {
-  active: boolean
+export type RequiredToggleProps = {
+  requiredText: string
 }
@@ -12,0 +12,0 @@

src/types/Modal.ts

@@ -12,2 +12,5 @@ export type ModalProps = {
   revokeLabel: string
+  policyLinkLabel: string
+  linkUrl: string
+  requiredText: string
 }

src/types/Settings.ts

@@ -5,2 +5,3 @@ export type SettingsContentProps = {
   functionLabel: string
+  requiredText: string
 }

No alert changes

Improved metrics

Total package byte prevSize

86642

increased by8.75%

Number of package files

106

increased by4.95%

Lines of code

2247

increased by10.31%

Number of lines in readme file

89

increased by9.88%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedreact-feather@2.0.10

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-feather@2.0.10(transitive)

• + Addedreact-is@16.13.1(transitive)