react-cookie-kit - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/CookieKit.js

@@ -25,3 +25,2 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import { animations, consentsSources, consentStatuses, cookieTypes, positions } from "xcoobee-cookie-kit-core/src/configs";
-import { clearAccessToken } from "xcoobee-cookie-kit-core/src/AccessTokenManager";
 import { clearLocale, clearCountryCode } from "xcoobee-cookie-kit-core/src/LocaleManager";
@@ -31,6 +30,7 @@ import cookieConsentsCache from "xcoobee-cookie-kit-core/src/cookieConsentsCache";
 import CookieKitPopup from "./CookieKitPopup";
+var COMPLETE = consentStatuses.complete;
+var CLOSED = consentStatuses.closed;
 var BLOCK = "xb-cookie-kit";
 
 function reset() {
-  clearAccessToken();
   clearLocale();
@@ -66,5 +66,5 @@ clearCountryCode();
       // console.log("CookieKit#handleOpen");
-      var pulsing = _this.state.pulsing;
+      var transparent = _this.state.transparent;
 
-      if (pulsing) {
+      if (transparent) {
         return;
@@ -84,28 +84,22 @@ }
       // console.log("CookieKit#handlePopupClose");
-      var onConsentStatusChange = _this.props.onConsentStatusChange;
-      onConsentStatusChange(consentStatuses.closed);
+      var _this$props = _this.props,
+          consentStatus = _this$props.consentStatus,
+          onConsentStatusChange = _this$props.onConsentStatusChange;
 
+      if (consentStatus !== COMPLETE) {
+        onConsentStatusChange(CLOSED);
+      }
+
       _this.clearTimers();
 
+      _this.startDismissTimer();
+
       _this.setState({
         hasClosed: true,
         isOpen: false
-      }); // HACK: Because `startPulsing` depends on `props.consentsSource` and it
-      // could be changed in `onConsentStatusChange` in what seems to be the next
-      // event loop, we are also delaying the calls to these methods in the next
-      // event loop. Without this, the pulsing is not started.
-
-
-      setTimeout(function () {
-        _this.startPulsing();
-
-        _this.startDismissTimer();
-      }, 1);
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePopupLogin", function (accessToken) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePopupLogin", function () {
       // console.log("CookieKit#handlePopupLogin");
-      var onAuthentication = _this.props.onAuthentication;
-      onAuthentication(accessToken);
-
       _this.clearTimers();
@@ -128,9 +122,9 @@
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePopupSubmit", function (nextConsentSettings) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handlePopupSubmit", function (nextConsentSettings, fingerprintConsent) {
       // console.log("CookieKit#handlePopupSubmit");
       // console.dir(nextConsentSettings);
-      var _this$props = _this.props,
-          hideOnComplete = _this$props.hideOnComplete,
-          onCookieConsentsChange = _this$props.onCookieConsentsChange;
-      onCookieConsentsChange(nextConsentSettings);
+      var _this$props2 = _this.props,
+          hideOnComplete = _this$props2.hideOnComplete,
+          onCookieConsentsChange = _this$props2.onCookieConsentsChange;
+      onCookieConsentsChange(nextConsentSettings, fingerprintConsent);
 
@@ -145,5 +139,11 @@ _this.clearTimers();
         _this.setState({
-          isShown: false,
-          pulsing: false
+          pulsing: false,
+          transparent: true
         });
+
+        _this.timers.push(setTimeout(function () {
+          _this.setState({
+            isShown: false
+          });
+        }, 1000));
       } else {
@@ -164,6 +164,8 @@ // HACK: Because `startPulsing` depends on `props.consentsSource` and it
     _this.state = {
+      animated: true,
       hasClosed: false,
       isOpen: isOpen,
       isShown: true,
-      pulsing: false
+      pulsing: false,
+      transparent: false
     };
@@ -219,3 +221,5 @@ _this.timers = [];
       // console.log("CookieKit#startPulsing");
-      var consentsSource = this.props.consentsSource;
+      var _this$props3 = this.props,
+          consentsSource = _this$props3.consentsSource,
+          hideOnComplete = _this$props3.hideOnComplete;
       var animation = animations[consentsSource];
@@ -226,2 +230,3 @@
           return _this2.setState({
+            animated: true,
             pulsing: true
@@ -233,2 +238,20 @@ });
         }, 4500));
+        this.timers.push(setTimeout(function () {
+          return _this2.setState({
+            animated: false
+          });
+        }, 5000));
+
+        if (hideOnComplete) {
+          this.timers.push(setTimeout(function () {
+            _this2.setState({
+              transparent: true
+            });
+          }, 5000));
+          this.timers.push(setTimeout(function () {
+            _this2.setState({
+              isShown: false
+            });
+          }, 6000));
+        }
       }
@@ -256,5 +279,10 @@ }
           _this3.setState({
+            transparent: true
+          });
+        }, timeOut * 1000));
+        this.timers.push(setTimeout(function () {
+          _this3.setState({
             isShown: false
           });
-        }, timeOut * 1000));
+        }, timeOut * 1000 + 1000));
       }
@@ -266,32 +294,32 @@ }
       // console.log("CookieKit#render");
-      var _this$props2 = this.props,
-          accessToken = _this$props2.accessToken,
-          campaignReference = _this$props2.campaignReference,
-          companyLogo = _this$props2.companyLogo,
-          consentsSource = _this$props2.consentsSource,
-          cookieConsents = _this$props2.cookieConsents,
-          countryCode = _this$props2.countryCode,
-          hideBrandTag = _this$props2.hideBrandTag,
-          position = _this$props2.position,
-          privacyUrl = _this$props2.privacyUrl,
-          requestDataTypes = _this$props2.requestDataTypes,
-          termsUrl = _this$props2.termsUrl,
-          testMode = _this$props2.testMode,
-          textMessage = _this$props2.textMessage;
+      var _this$props4 = this.props,
+          campaignReference = _this$props4.campaignReference,
+          companyLogo = _this$props4.companyLogo,
+          consentsSource = _this$props4.consentsSource,
+          cookieConsents = _this$props4.cookieConsents,
+          detectCountry = _this$props4.detectCountry,
+          displayFingerprint = _this$props4.displayFingerprint,
+          fingerprintConsent = _this$props4.fingerprintConsent,
+          hideBrandTag = _this$props4.hideBrandTag,
+          loginStatus = _this$props4.loginStatus,
+          position = _this$props4.position,
+          privacyUrl = _this$props4.privacyUrl,
+          requestDataTypes = _this$props4.requestDataTypes,
+          termsUrl = _this$props4.termsUrl,
+          testMode = _this$props4.testMode,
+          textMessage = _this$props4.textMessage;
       var _this$state = this.state,
+          animated = _this$state.animated,
           hasClosed = _this$state.hasClosed,
           isOpen = _this$state.isOpen,
           isShown = _this$state.isShown,
-          pulsing = _this$state.pulsing;
-      var animation = animations[consentsSource];
+          pulsing = _this$state.pulsing,
+          transparent = _this$state.transparent;
+      var animation = animated ? animations[consentsSource] : animations.unknown;
       var renderPopup = isOpen || consentsSource === "unknown" && !hasClosed;
       var renderButton = !renderPopup;
-      var renderResetButton = testMode && (accessToken || cookieConsentsCache.get()); // console.log("animation:", animation);
-      // console.log("consentsSource:", consentsSource);
-      // console.log("hasClosed:", hasClosed);
-      // console.log("pulsing:", pulsing);
-
-      return React.createElement("div", {
+      var renderResetButton = testMode && cookieConsentsCache.get();
+      return isShown && React.createElement("div", {
         className: cx(BLOCK, position, {
-          transparent: !isShown
+          transparent: transparent
         }, {
@@ -301,7 +329,9 @@ scroll: isOpen
       }, renderPopup && React.createElement(CookieKitPopup, {
-        accessToken: accessToken,
         companyLogo: companyLogo,
         cookieConsents: cookieConsents,
-        countryCode: countryCode,
+        detectCountry: detectCountry,
+        displayFingerprint: displayFingerprint,
+        fingerprintConsent: fingerprintConsent,
         hideBrandTag: hideBrandTag,
+        loginStatus: loginStatus,
         isConnected: !!campaignReference,
@@ -329,12 +359,14 @@ onClose: this.handlePopupClose,
 _defineProperty(CookieKit, "propTypes", {
-  accessToken: PropTypes.string,
   campaignReference: PropTypes.string,
   companyLogo: PropTypes.string,
   consentsSource: PropTypes.oneOf(consentsSources).isRequired,
+  consentStatus: PropTypes.oneOf(Object.values(consentStatuses)).isRequired,
   cookieConsents: PropTypes.arrayOf(CookieConsentShape.isRequired).isRequired,
-  countryCode: PropTypes.string,
+  detectCountry: PropTypes.bool,
+  displayFingerprint: PropTypes.bool,
   expirationTime: PropTypes.number,
+  fingerprintConsent: PropTypes.bool,
   hideBrandTag: PropTypes.bool.isRequired,
   hideOnComplete: PropTypes.bool.isRequired,
-  onAuthentication: PropTypes.func.isRequired,
+  loginStatus: PropTypes.bool,
   onConsentStatusChange: PropTypes.func.isRequired,
@@ -346,2 +378,3 @@ onCookieConsentsChange: PropTypes.func.isRequired,
   termsUrl: PropTypes.string.isRequired,
+  testMode: PropTypes.bool,
   textMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
@@ -356,9 +389,12 @@ "en-us": PropTypes.string,
 _defineProperty(CookieKit, "defaultProps", {
-  accessToken: null,
   campaignReference: null,
   companyLogo: null,
-  countryCode: null,
-  expirationTime: 0
+  detectCountry: false,
+  displayFingerprint: false,
+  expirationTime: 0,
+  fingerprintConsent: false,
+  loginStatus: false,
+  testMode: false
 });
 
 export { CookieKit as default };

dist/CookieKitContainer.js

@@ -23,14 +23,15 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 import React from "react";
-import { clearAccessToken, getAccessToken, saveAccessToken } from "xcoobee-cookie-kit-core/src/AccessTokenManager";
-import { consentStatuses, cookieTypes, cssHref, euCountries, positions } from "xcoobee-cookie-kit-core/src/configs";
+import { cookieOptionsKeys, consentStatuses, cookieTypes, cssHref, euCountries, positions } from "xcoobee-cookie-kit-core/src/configs";
 import cookieConsentsCache from "xcoobee-cookie-kit-core/src/cookieConsentsCache";
-import CookieConsentsManager from "xcoobee-cookie-kit-core/src/CookieConsentsManager";
-import { getCountryCode, saveCountryCode } from "xcoobee-cookie-kit-core/src/LocaleManager";
+import { getCountryCode, saveCountryCode, fetchCountryCode, fetchCountryCodeForSubscribers } from "xcoobee-cookie-kit-core/src/LocaleManager";
 import CookieManager from "xcoobee-cookie-kit-core/src/CookieManager";
 import NotAuthorizedError from "xcoobee-cookie-kit-core/src/NotAuthorizedError";
 import { xckDomain } from "./configs";
-import CookieKit from "./CookieKit"; // const CLOSED = consentStatuses.closed;
-
+import CookieKit from "./CookieKit";
+import BridgeCommunicator from "./BridgeCommunicator";
 var COMPLETE = consentStatuses.complete;
 var OPEN = consentStatuses.open;
+var SAVED_PREFERENCES = cookieOptionsKeys.savedPreferences;
+var USER_SETTINGS = cookieOptionsKeys.userSettings;
+var CROWD_AI = cookieOptionsKeys.crowdAi;
 
@@ -75,3 +76,2 @@ function callCookieManagingFunctions(consentSettings) {
       if (e instanceof NotAuthorizedError) {
-        clearAccessToken();
         console.error(error.message);
@@ -84,3 +84,2 @@ } else {
     if (error instanceof NotAuthorizedError) {
-      clearAccessToken();
       console.error(error.message);
@@ -106,16 +105,18 @@ } else {
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleAuthentication", function (accessToken) {
-      // console.log("CookieKitContainer#handleAuthentication");
-      // console.log("accessToken:", accessToken);
-      saveAccessToken(accessToken);
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onLoginStatusChange", function (loginStatus) {
+      // console.log("CookieKitContainer#onLoginStatusChange");
+      var isLoginStatusChecked = _this.state.isLoginStatusChecked;
 
       _this.setState({
-        accessToken: accessToken
+        loginStatus: loginStatus
       });
 
-      var campaignReference = _this.props.campaignReference;
-      var isConnected = !!campaignReference;
+      if (!isLoginStatusChecked) {
+        _this.setState({
+          isLoginStatusChecked: true
+        });
 
-      if (isConnected) {
-        _this.resolveConnectedCookieConsents().catch(handleErrors);
+        _this.getCountryCode().then(function () {
+          return _this.getCookieConsents();
+        }).catch(handleErrors);
       }
@@ -132,5 +133,7 @@ });
 
-    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCookieConsentsChange", function (consentSettings) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCookieConsentsChange", function (consentSettings, fingerprintConsent) {
       // console.log("CookieKitContainer#handleCookieConsentsChange");
-      // console.log("consentSettings:", consentSettings);
+      var _this$state = _this.state,
+          campaignReference = _this$state.campaignReference,
+          loginStatus = _this$state.loginStatus;
       var cookieConsents = cookieTypes.map(function (type) {
@@ -142,11 +145,79 @@ return {
       });
-      var campaignReference = _this.props.campaignReference;
-      var accessToken = _this.state.accessToken;
-      CookieConsentsManager.saveRemotely(accessToken, cookieConsents, campaignReference).catch(handleErrors);
+      cookieConsents.push({
+        type: "fingerprint",
+        checked: fingerprintConsent
+      });
 
       _this.setCookieConsents("usersSaved", cookieConsents);
+
+      var cookieConsentsObj = {};
+
+      if (loginStatus && !!campaignReference) {
+        cookieTypes.forEach(function (type) {
+          cookieConsentsObj[type] = !!consentSettings[type];
+        });
+        cookieConsentsObj.fingerprint = fingerprintConsent;
+
+        _this.bridgeRef.saveCookieConsents(cookieConsentsObj);
+      }
     });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleBridgeError", function (message) {
+      // eslint-disable-next-line max-len
+      console.error("Something went wrong because of error: ".concat(message, ". We are experiencing issues saving your cookie category selection. Please contact the site administrator."));
+
+      _this.setState({
+        campaignReference: null
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "resolveConnectedCookieConsents", function (cookieOptions) {
+      // console.log("CookieKitContainer#resolveConnectedCookieConsents");
+      var _this$state2 = _this.state,
+          campaignReference = _this$state2.campaignReference,
+          isConsentCached = _this$state2.isConsentCached,
+          loginStatus = _this$state2.loginStatus;
+
+      if (isConsentCached) {
+        return;
+      }
+
+      var consentsSource = "unknown";
+      var cookieConsents = null;
+
+      if (cookieOptions[USER_SETTINGS] && Object.values(cookieOptions[USER_SETTINGS]).includes(true)) {
+        consentsSource = "usersDefaults";
+        cookieConsents = cookieOptions[USER_SETTINGS];
+      }
+
+      if (cookieOptions[CROWD_AI] && Object.values(cookieOptions[CROWD_AI]).includes(true)) {
+        consentsSource = "crowdAi";
+        cookieConsents = cookieOptions[CROWD_AI];
+      }
+
+      if (cookieOptions[SAVED_PREFERENCES] && Object.values(cookieOptions[SAVED_PREFERENCES]).includes(true)) {
+        consentsSource = "usersSaved";
+        cookieConsents = cookieOptions[SAVED_PREFERENCES];
+      }
+
+      if (consentsSource !== "unknown" && cookieConsents) {
+        var cookieConsentsArray = Object.keys(cookieConsents).map(function (key) {
+          return {
+            type: key,
+            checked: cookieConsents[key]
+          };
+        });
+
+        _this.setCookieConsents(consentsSource, cookieConsentsArray);
+
+        if (loginStatus && !!campaignReference) {
+          _this.bridgeRef.saveCookieConsents(cookieConsents);
+        }
+      } else {
+        _this.fallBackToHostDefaults();
+      }
+    });
+
     _this.state = {
-      accessToken: getAccessToken(),
+      campaignReference: props.campaignReference,
       consentsSource: "unknown",
@@ -156,3 +227,6 @@ consentStatus: OPEN,
       countryCode: getCountryCode(),
-      initializing: true
+      initializing: true,
+      isConsentCached: false,
+      isLoginStatusChecked: false,
+      loginStatus: false
     };
@@ -171,38 +245,5 @@
   _createClass(CookieKitContainer, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-
-      if (this.state.countryCode) {
-        this.getCookieConsents();
-      } else {
-        CookieConsentsManager.fetchCountryCode().catch(function (error) {
-          // console.log("CookieKitContainer#componentDidMount#fetchCountryCode#catch");
-          console.error(error);
-          return null;
-        }).then(function (countryCode) {
-          saveCountryCode(countryCode);
-
-          _this2.setState({
-            countryCode: countryCode
-          });
-
-          _this2.getCookieConsents();
-        }).catch(handleErrors);
-      }
-    } // componentDidUpdate(prevProps, prevState) {
-    //   console.log("CookieKitContainer#componentDidUpdate");
-    //   if (this.props !== prevProps) {
-    //     console.log("props changed:");
-    //     console.dir(this.props);
-    //   }
-    //   if (this.state !== prevState) {
-    //     console.log("state changed:");
-    //     console.dir(this.state);
-    //   }
-    // }
-
-  }, {
     key: "getCookieConsents",
     value: function getCookieConsents() {
+      // console.log("CookieKitContainer#getCookieConsents");
       var cachedCookieConsents = cookieConsentsCache.get();
@@ -213,2 +254,5 @@
         this.setCookieConsents("cached", cachedCookieConsents);
+        this.setState({
+          isConsentCached: true
+        });
         return;
@@ -218,8 +262,6 @@ }
       var campaignReference = this.props.campaignReference;
+      var loginStatus = this.state.loginStatus;
       var isConnected = !!campaignReference;
-      var accessToken = this.state.accessToken;
 
-      if (isConnected && accessToken) {
-        this.resolveConnectedCookieConsents().catch(handleErrors);
-      } else {
+      if (!isConnected || !loginStatus) {
         this.fallBackToHostDefaults();
@@ -229,2 +271,47 @@ }
   }, {
+    key: "getCountryCode",
+    value: function getCountryCode() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          campaignReference = _this$props.campaignReference,
+          detectCountry = _this$props.detectCountry;
+      var countryCode = this.state.countryCode;
+      var defaultCountryCode = "EU";
+
+      if (countryCode) {
+        return Promise.resolve(countryCode);
+      }
+
+      if (detectCountry) {
+        var promise;
+
+        if (campaignReference) {
+          promise = Promise.resolve(fetchCountryCodeForSubscribers(campaignReference));
+        } else {
+          promise = Promise.resolve(fetchCountryCode());
+        }
+
+        return promise.catch(function (error) {
+          console.error(error);
+
+          _this2.setState({
+            countryCode: defaultCountryCode
+          });
+
+          return defaultCountryCode;
+        }).then(function (cCode) {
+          saveCountryCode(cCode);
+
+          _this2.setState({
+            countryCode: cCode
+          });
+
+          return cCode;
+        });
+      }
+
+      return Promise.resolve(defaultCountryCode);
+    }
+  }, {
     key: "getConsentStatus",
@@ -238,5 +325,5 @@ value: function getConsentStatus() {
     value: function getCookieTypes() {
-      var _this$state = this.state,
-          consentStatus = _this$state.consentStatus,
-          cookieConsents = _this$state.cookieConsents;
+      var _this$state3 = this.state,
+          consentStatus = _this$state3.consentStatus,
+          cookieConsents = _this$state3.cookieConsents;
       var consentSettings = {};
@@ -271,30 +358,17 @@
   }, {
-    key: "callCallbacks",
-    value: function callCallbacks(cookieConsents) {
-      // console.log("CookieKitContainer#callCallbacks");
-      var _this$props = this.props,
-          cookieHandler = _this$props.cookieHandler,
-          targetUrl = _this$props.targetUrl;
-      var consentSettings = {};
-      cookieConsents.forEach(function (cookieConsent) {
-        consentSettings[cookieConsent.type] = cookieConsent.checked;
-      });
-      callCookieManagingFunctions(consentSettings);
-
-      if (cookieHandler) {
-        callCookieHandler(cookieHandler, consentSettings);
-      }
-
-      if (targetUrl) {
-        callTargetUrl(targetUrl, consentSettings);
-      }
-    } // Convenience method
-
-  }, {
     key: "fallBackToHostDefaults",
+    // Convenience method
     value: function fallBackToHostDefaults() {
+      // console.log("CookieKitContainer#fallBackToHostDefaults");
       var _this$props2 = this.props,
           checkByDefaultTypes = _this$props2.checkByDefaultTypes,
           displayOnlyForEU = _this$props2.displayOnlyForEU;
-      var countryCode = this.state.countryCode;
+      var _this$state4 = this.state,
+          countryCode = _this$state4.countryCode,
+          isConsentCached = _this$state4.isConsentCached;
+
+      if (isConsentCached) {
+        return;
+      }
+
       var hostsDefaultCookieConsents = cookieTypes.map(function (type) {
@@ -305,2 +379,6 @@ return {
         };
+      });
+      hostsDefaultCookieConsents.push({
+        type: "fingerprint",
+        checked: false
       }); // If we were unable to resolve the user's country code, then assume it is in
@@ -324,56 +402,21 @@ // the EU.
   }, {
-    key: "resolveConnectedCookieConsents",
-    value: function resolveConnectedCookieConsents() {
-      var _this4 = this;
+    key: "callCallbacks",
+    value: function callCallbacks(cookieConsents) {
+      // console.log("CookieKitContainer#callCallbacks");
+      var _this$props3 = this.props,
+          cookieHandler = _this$props3.cookieHandler,
+          targetUrl = _this$props3.targetUrl;
+      var consentSettings = {};
+      cookieConsents.forEach(function (cookieConsent) {
+        consentSettings[cookieConsent.type] = cookieConsent.checked;
+      });
+      callCookieManagingFunctions(consentSettings);
 
-      // console.log("CookieKitContainer#resolveConnectedCookieConsents");
-      var fetchCrowdAiCookieConsents = CookieConsentsManager.fetchCrowdAiCookieConsents,
-          fetchUsersDefaultCookieConsents = CookieConsentsManager.fetchUsersDefaultCookieConsents,
-          fetchUserSettings = CookieConsentsManager.fetchUserSettings,
-          fetchUsersSiteCookieConsents = CookieConsentsManager.fetchUsersSiteCookieConsents;
-      var accessToken = this.state.accessToken;
-      return fetchUserSettings(accessToken).then(function (userSettings) {
-        if (userSettings) {
-          // Check to see if user already has consent settings for the current site
-          var origin = window.location.origin;
-          var userCursor = userSettings.userCursor,
-              xcoobeeId = userSettings.xcoobeeId;
-          fetchUsersSiteCookieConsents(accessToken, origin, xcoobeeId, userCursor).then(function (usersSavedCookieConsents) {
-            if (usersSavedCookieConsents) {
-              _this4.setCookieConsents("usersSaved", usersSavedCookieConsents);
+      if (cookieHandler) {
+        callCookieHandler(cookieHandler, consentSettings);
+      }
 
-              return;
-            }
-
-            var promise;
-
-            if (userSettings.acceptCrowdAI) {
-              var campaignName = window.location.host;
-              promise = fetchCrowdAiCookieConsents(accessToken, campaignName);
-            } else {
-              promise = Promise.resolve();
-            }
-
-            promise.then(function (crowdAiCookieConsents) {
-              if (crowdAiCookieConsents) {
-                _this4.setCookieConsents("crowdAi", crowdAiCookieConsents);
-
-                return;
-              }
-
-              var usersDefaultCookieConsents = fetchUsersDefaultCookieConsents(userSettings);
-
-              if (usersDefaultCookieConsents) {
-                _this4.setCookieConsents("usersDefaults", usersDefaultCookieConsents);
-
-                return;
-              }
-
-              _this4.fallBackToHostDefaults();
-            });
-          });
-        } else {
-          _this4.fallBackToHostDefaults();
-        }
-      });
+      if (targetUrl) {
+        callTargetUrl(targetUrl, consentSettings);
+      }
     }
@@ -383,36 +426,52 @@ }, {
     value: function render() {
+      var _this4 = this;
+
       // console.log("CookieKitContainer#render");
-      var _this$props3 = this.props,
-          campaignReference = _this$props3.campaignReference,
-          companyLogo = _this$props3.companyLogo,
-          expirationTime = _this$props3.expirationTime,
-          hideBrandTag = _this$props3.hideBrandTag,
-          hideOnComplete = _this$props3.hideOnComplete,
-          privacyUrl = _this$props3.privacyUrl,
-          requestDataTypes = _this$props3.requestDataTypes,
-          termsUrl = _this$props3.termsUrl,
-          testMode = _this$props3.testMode,
-          textMessage = _this$props3.textMessage;
-      var _this$state2 = this.state,
-          accessToken = _this$state2.accessToken,
-          consentsSource = _this$state2.consentsSource,
-          cookieConsents = _this$state2.cookieConsents,
-          countryCode = _this$state2.countryCode,
-          initializing = _this$state2.initializing;
-      var position = positions.includes(this.props.position) ? this.props.position : positions[0]; // console.log("initializing:", initializing);
+      var _this$props4 = this.props,
+          companyLogo = _this$props4.companyLogo,
+          detectCountry = _this$props4.detectCountry,
+          displayFingerprint = _this$props4.displayFingerprint,
+          expirationTime = _this$props4.expirationTime,
+          hideBrandTag = _this$props4.hideBrandTag,
+          hideOnComplete = _this$props4.hideOnComplete,
+          position = _this$props4.position,
+          privacyUrl = _this$props4.privacyUrl,
+          requestDataTypes = _this$props4.requestDataTypes,
+          termsUrl = _this$props4.termsUrl,
+          testMode = _this$props4.testMode,
+          textMessage = _this$props4.textMessage;
+      var _this$state5 = this.state,
+          campaignReference = _this$state5.campaignReference,
+          consentsSource = _this$state5.consentsSource,
+          consentStatus = _this$state5.consentStatus,
+          cookieConsents = _this$state5.cookieConsents,
+          countryCode = _this$state5.countryCode,
+          initializing = _this$state5.initializing,
+          loginStatus = _this$state5.loginStatus;
+      var redefinedPosition = positions.includes(position) ? position : positions[0];
+      var cookies = cookieConsents ? cookieConsents.filter(function (consent) {
+        return consent.type !== "fingerprint";
+      }) : null;
+      var fingerprint = cookieConsents ? cookieConsents.find(function (consent) {
+        return consent.type === "fingerprint";
+      }) : null;
+      var fingerprintConsent = fingerprint ? fingerprint.checked : false; // console.log("initializing:", initializing);
 
       return React.createElement(React.Fragment, null, !initializing && React.createElement(React.Fragment, null, React.createElement(CookieKit, {
-        accessToken: accessToken,
         campaignReference: campaignReference,
         companyLogo: companyLogo,
         consentsSource: consentsSource,
-        cookieConsents: cookieConsents,
+        consentStatus: consentStatus,
+        cookieConsents: cookies,
         countryCode: countryCode,
+        detectCountry: detectCountry,
+        displayFingerprint: displayFingerprint,
         expirationTime: expirationTime,
+        fingerprintConsent: fingerprintConsent,
         hideBrandTag: hideBrandTag,
         hideOnComplete: hideOnComplete,
-        onAuthentication: this.handleAuthentication,
+        loginStatus: loginStatus,
         onConsentStatusChange: this.handleConsentStatusChange,
         onCookieConsentsChange: this.handleCookieConsentsChange,
-        position: position,
+        position: redefinedPosition,
         privacyUrl: privacyUrl,
@@ -423,3 +482,11 @@ requestDataTypes: requestDataTypes,
         textMessage: textMessage
-      })));
+      })), React.createElement(BridgeCommunicator, {
+        ref: function ref(bridgeRef) {
+          _this4.bridgeRef = bridgeRef;
+        },
+        campaignReference: campaignReference,
+        onCookieOptionsLoad: this.resolveConnectedCookieConsents,
+        onLoginStatusChange: this.onLoginStatusChange,
+        handleBridgeError: this.handleBridgeError
+      }));
     }
@@ -437,2 +504,4 @@ }]);
   cssAutoLoad: PropTypes.bool,
+  detectCountry: PropTypes.bool,
+  displayFingerprint: PropTypes.bool,
   displayOnlyForEU: PropTypes.bool,
@@ -462,2 +531,4 @@ expirationTime: PropTypes.number,
   cssAutoLoad: true,
+  detectCountry: false,
+  displayFingerprint: false,
   displayOnlyForEU: false,
@@ -464,0 +535,0 @@ expirationTime: 0,

dist/CookieKitPopup.js

@@ -23,8 +23,9 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+import React from "react";
 import PropTypes from "prop-types";
-import React from "react";
 import ReactCountryFlag from "react-country-flag";
 import { cookieDefns as allAvailCookieDefns, cookieTypes, locales, links } from "xcoobee-cookie-kit-core/src/configs";
+import { countryCodes } from "xcoobee-cookie-kit-core/src/countryData";
 import renderText from "xcoobee-cookie-kit-core/src/renderText";
-import { getLocale, saveLocale } from "xcoobee-cookie-kit-core/src/LocaleManager";
+import { getLocale, saveLocale, getCountryCode, saveCountryCode } from "xcoobee-cookie-kit-core/src/LocaleManager";
 import closeIcon from "./assets/close-icon.svg";
@@ -35,2 +36,3 @@ import xbLogo from "./assets/xcoobee-logo.svg";
 var BLOCK = "xb-cookie-kit-popup";
+var OPTION = "loginstatus";
 
@@ -51,8 +53,11 @@ var CookieKitPopup =
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onMessage", function (event) {
-      // console.log('CookieKitPopup#onMessage');
+      if (!event.data || typeof event.data !== "string") {
+        return;
+      }
+
       var onLogin = _this.props.onLogin;
-      var token = event.data.token;
+      var loginStatus = JSON.parse(event.data)[OPTION];
 
-      if (token) {
-        onLogin(token);
+      if (loginStatus) {
+        onLogin();
       }
@@ -65,3 +70,3 @@ });
         selectedLocale: locale,
-        isShown: false
+        isLocaleSelectShown: false
       });
@@ -72,2 +77,36 @@
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCountryChange", function (countryCode) {
+      // console.log('CookieKitPopup#handleCountryChange');
+      _this.setState({
+        countryCode: countryCode,
+        isCountrySelectShown: false
+      });
+
+      saveCountryCode(countryCode);
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCountrySelectToggle", function (e) {
+      // console.log('CookieKitPopup#handleCountrySelectToggle');
+      e.stopPropagation();
+
+      _this.setState(function (state) {
+        return {
+          isCountrySelectShown: !state.isCountrySelectShown,
+          isLocaleSelectShown: false
+        };
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleLocaleSelectToggle", function (e) {
+      // console.log('CookieKitPopup#handleLocaleSelectToggle');
+      e.stopPropagation();
+
+      _this.setState(function (state) {
+        return {
+          isLocaleSelectShown: !state.isLocaleSelectShown,
+          isCountrySelectShown: false
+        };
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleCookieCheck", function (e, type) {
@@ -114,12 +153,26 @@ // console.log('CookieKitPopup#handleCookieCheck');
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleFingerprintCheck", function (e) {
+      // console.log('CookieKitPopup#handleFingerprintCheck');
+      _this.setState({
+        fingerprintConsent: e.target.checked
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleSubmit", function () {
       // console.log('CookieKitPopup#handleSubmit');
       var onSubmit = _this.props.onSubmit;
-      var consentSettings = _this.state.consentSettings;
-      onSubmit(consentSettings);
+      var _this$state = _this.state,
+          consentSettings = _this$state.consentSettings,
+          fingerprintConsent = _this$state.fingerprintConsent;
+      onSubmit(consentSettings, fingerprintConsent);
     });
 
-    var cookieConsents = _this.props.cookieConsents;
+    var _this$props = _this.props,
+        cookieConsents = _this$props.cookieConsents,
+        _fingerprintConsent = _this$props.fingerprintConsent,
+        requestDataTypes = _this$props.requestDataTypes;
     var _consentSettings = {};
-    cookieConsents.forEach(function (cookieConsent) {
+    cookieConsents.filter(function (cookieConsent) {
+      return requestDataTypes.includes(cookieConsent.type);
+    }).forEach(function (cookieConsent) {
       _consentSettings[cookieConsent.type] = cookieConsent.checked;
@@ -129,4 +182,7 @@ });
       consentSettings: _consentSettings,
-      selectedLocale: getLocale() || "EN",
-      isShown: false
+      countryCode: getCountryCode() || "EU",
+      fingerprintConsent: _fingerprintConsent,
+      isCountrySelectShown: false,
+      isLocaleSelectShown: false,
+      selectedLocale: getLocale() || "EN"
     };
@@ -172,19 +228,23 @@ window.addEventListener("message", _this.onMessage);
       // console.log('CookieKitPopup#render');
-      var _this$props = this.props,
-          accessToken = _this$props.accessToken,
-          companyLogo = _this$props.companyLogo,
-          countryCode = _this$props.countryCode,
-          hideBrandTag = _this$props.hideBrandTag,
-          isConnected = _this$props.isConnected,
-          onClose = _this$props.onClose,
-          privacyUrl = _this$props.privacyUrl,
-          requestDataTypes = _this$props.requestDataTypes,
-          termsUrl = _this$props.termsUrl,
-          textMessage = _this$props.textMessage;
-      var _this$state = this.state,
-          consentSettings = _this$state.consentSettings,
-          isShown = _this$state.isShown,
-          selectedLocale = _this$state.selectedLocale; // console.log("countryCode:", countryCode);
+      var _this$props2 = this.props,
+          companyLogo = _this$props2.companyLogo,
+          detectCountry = _this$props2.detectCountry,
+          displayFingerprint = _this$props2.displayFingerprint,
+          hideBrandTag = _this$props2.hideBrandTag,
+          loginStatus = _this$props2.loginStatus,
+          isConnected = _this$props2.isConnected,
+          onClose = _this$props2.onClose,
+          privacyUrl = _this$props2.privacyUrl,
+          requestDataTypes = _this$props2.requestDataTypes,
+          termsUrl = _this$props2.termsUrl,
+          textMessage = _this$props2.textMessage;
+      var _this$state2 = this.state,
+          consentSettings = _this$state2.consentSettings,
+          countryCode = _this$state2.countryCode,
+          fingerprintConsent = _this$state2.fingerprintConsent,
+          isCountrySelectShown = _this$state2.isCountrySelectShown,
+          isLocaleSelectShown = _this$state2.isLocaleSelectShown,
+          selectedLocale = _this$state2.selectedLocale; // console.log("countryCode:", countryCode);
 
-      var appearsToBeLoggedIn = !!accessToken;
+      var appearsToBeLoggedIn = loginStatus;
       var targetUrl = encodeURIComponent(window.location.origin);
@@ -197,4 +257,11 @@ var isAllChecked = Object.values(consentSettings).every(function (checked) {
       });
+      var loginModalFeatures = "left=400, top=100, width=500, height=600";
       return React.createElement("div", {
-        className: BLOCK
+        className: BLOCK,
+        onClick: function onClick() {
+          return _this2.setState({
+            isCountrySelectShown: false,
+            isLocaleSelectShown: false
+          });
+        }
       }, React.createElement("div", {
@@ -229,9 +296,9 @@ className: "".concat(BLOCK, "__header")
         className: "xb-cookie-kit__button ".concat(BLOCK, "__language-picker"),
-        onClick: function onClick() {
-          return _this2.setState({
-            isShown: !isShown
-          });
-        }
-      }, selectedLocale), countryCode && React.createElement("div", {
-        className: "".concat(BLOCK, "__block ").concat(BLOCK, "__block--sm")
+        onClick: this.handleLocaleSelectToggle
+      }, selectedLocale), detectCountry && React.createElement("div", {
+        className: "".concat(BLOCK, "__block ").concat(BLOCK, "__block--sm ").concat(BLOCK, "__country-picker")
+      }, React.createElement("button", {
+        type: "button",
+        className: "xb-cookie-kit__button ".concat(BLOCK, "__country-picker-button"),
+        onClick: this.handleCountrySelectToggle
       }, React.createElement("div", {
@@ -242,3 +309,3 @@ className: "".concat(BLOCK, "__flag")
         svg: true
-      })))), isShown && React.createElement("div", {
+      }))))), isLocaleSelectShown && React.createElement("div", {
         className: "".concat(BLOCK, "__custom-select")
@@ -254,2 +321,19 @@ }, locales.map(function (locale) {
         }, locale);
+      })), isCountrySelectShown && React.createElement("div", {
+        className: "".concat(BLOCK, "__country-picker-select")
+      }, countryCodes.map(function (cCode) {
+        return React.createElement("button", {
+          type: "button",
+          key: "country-flag-".concat(cCode),
+          className: "xb-cookie-kit__button ".concat(BLOCK, "__country-picker-button"),
+          onClick: function onClick() {
+            return _this2.handleCountryChange(cCode);
+          },
+          title: cCode
+        }, React.createElement("div", {
+          className: "".concat(BLOCK, "__flag")
+        }, React.createElement(ReactCountryFlag, {
+          code: cCode,
+          svg: true
+        })));
       })))), React.createElement("div", {
@@ -274,3 +358,4 @@ className: "".concat(BLOCK, "__cookie-list")
         })), React.createElement("div", {
-          className: "".concat(BLOCK, "__cookie-title")
+          className: "".concat(BLOCK, "__cookie-title"),
+          title: renderText("CookieKit.MoreInfo", selectedLocale)
         }, React.createElement("a", {
@@ -286,3 +371,17 @@ className: "".concat(BLOCK, "__cookie-title-link"),
         onClick: this.handleCheckAll
-      }, isAllChecked ? renderText("CookieKit.UncheckButton", selectedLocale) : renderText("CookieKit.CheckAllButton", selectedLocale)), React.createElement("div", {
+      }, isAllChecked ? renderText("CookieKit.UncheckButton", selectedLocale) : renderText("CookieKit.CheckAllButton", selectedLocale)), displayFingerprint && React.createElement("div", {
+        className: "".concat(BLOCK, "__fingerprint")
+      }, React.createElement("div", {
+        className: "".concat(BLOCK, "__fingerprint-checkbox")
+      }, React.createElement("input", {
+        id: "xbCheckbox_fingerprint",
+        type: "checkbox",
+        checked: fingerprintConsent,
+        onChange: this.handleFingerprintCheck
+      }), React.createElement("label", {
+        htmlFor: "xbCheckbox_fingerprint",
+        className: "".concat(BLOCK, "__checkbox")
+      })), React.createElement("div", {
+        className: "".concat(BLOCK, "__fingerprint-label")
+      }, renderText("CookieKit.FingerprintLabel", selectedLocale))), React.createElement("div", {
         className: "".concat(BLOCK, "__actions")
@@ -319,15 +418,15 @@ }, !hideBrandTag && React.createElement("div", {
         onClick: function onClick() {
-          return window.open("".concat(xbOrigin).concat(links.login, "?targetUrl=").concat(targetUrl));
+          return window.open("".concat(xbOrigin).concat(links.login, "?targetUrl=").concat(targetUrl), "", loginModalFeatures);
         }
       }, renderText("CookieKit.LoginLink", selectedLocale))), React.createElement("a", {
         className: "".concat(BLOCK, "__link"),
-        href: termsUrl,
+        href: privacyUrl,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, renderText("CookieKit.TermsLink", selectedLocale)), React.createElement("a", {
+      }, renderText("CookieKit.PolicyLink", selectedLocale)), React.createElement("a", {
         className: "".concat(BLOCK, "__link"),
-        href: privacyUrl,
+        href: termsUrl,
         target: "_blank",
         rel: "noopener noreferrer"
-      }, renderText("CookieKit.PolicyLink", selectedLocale))), !hideBrandTag && React.createElement("div", {
+      }, renderText("CookieKit.TermsLink", selectedLocale))), !hideBrandTag && React.createElement("div", {
         className: "".concat(BLOCK, "__powered-by")
@@ -347,6 +446,7 @@ }, "Powered by", React.createElement("a", {
 _defineProperty(CookieKitPopup, "propTypes", {
-  accessToken: PropTypes.string,
   companyLogo: PropTypes.string,
   cookieConsents: PropTypes.arrayOf(CookieConsentShape.isRequired).isRequired,
-  countryCode: PropTypes.string,
+  detectCountry: PropTypes.bool,
+  displayFingerprint: PropTypes.bool,
+  fingerprintConsent: PropTypes.bool,
   hideBrandTag: PropTypes.bool.isRequired,
@@ -357,2 +457,3 @@ isConnected: PropTypes.bool.isRequired,
   onSubmit: PropTypes.func.isRequired,
+  loginStatus: PropTypes.bool,
   privacyUrl: PropTypes.string.isRequired,
@@ -370,7 +471,9 @@ requestDataTypes: PropTypes.arrayOf(PropTypes.oneOf(cookieTypes).isRequired).isRequired,
 _defineProperty(CookieKitPopup, "defaultProps", {
-  accessToken: null,
   companyLogo: null,
-  countryCode: null
+  detectCountry: false,
+  displayFingerprint: false,
+  fingerprintConsent: false,
+  loginStatus: false
 });
 
 export { CookieKitPopup as default };

package.json

 {
   "name": "react-cookie-kit",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Cookie Consent Management for Websites using ReactJS.",
@@ -5,0 +5,0 @@ "keywords": [

src/CookieKit.js

@@ -12,3 +12,2 @@ import cx from "classnames";
 
-import { clearAccessToken } from "xcoobee-cookie-kit-core/src/AccessTokenManager";
 import {
@@ -25,6 +24,8 @@ clearLocale,
 
+const COMPLETE = consentStatuses.complete;
+const CLOSED = consentStatuses.closed;
+
 const BLOCK = "xb-cookie-kit";
 
 function reset() {
-  clearAccessToken();
   clearLocale();
@@ -45,12 +46,14 @@ clearCountryCode();
   static propTypes = {
-    accessToken: PropTypes.string,
     campaignReference: PropTypes.string,
     companyLogo: PropTypes.string,
     consentsSource: PropTypes.oneOf(consentsSources).isRequired,
+    consentStatus: PropTypes.oneOf(Object.values(consentStatuses)).isRequired,
     cookieConsents: PropTypes.arrayOf(CookieConsentShape.isRequired).isRequired,
-    countryCode: PropTypes.string,
+    detectCountry: PropTypes.bool,
+    displayFingerprint: PropTypes.bool,
     expirationTime: PropTypes.number,
+    fingerprintConsent: PropTypes.bool,
     hideBrandTag: PropTypes.bool.isRequired,
     hideOnComplete: PropTypes.bool.isRequired,
-    onAuthentication: PropTypes.func.isRequired,
+    loginStatus: PropTypes.bool,
     onConsentStatusChange: PropTypes.func.isRequired,
@@ -64,2 +67,3 @@ onCookieConsentsChange: PropTypes.func.isRequired,
     termsUrl: PropTypes.string.isRequired,
+    testMode: PropTypes.bool,
     textMessage: PropTypes.oneOfType([
@@ -77,7 +81,10 @@ PropTypes.string,
   static defaultProps = {
-    accessToken: null,
     campaignReference: null,
     companyLogo: null,
-    countryCode: null,
+    detectCountry: false,
+    displayFingerprint: false,
     expirationTime: 0,
+    fingerprintConsent: false,
+    loginStatus: false,
+    testMode: false,
   };
@@ -91,2 +98,3 @@
     this.state = {
+      animated: true,
       hasClosed: false,
@@ -96,2 +104,3 @@ isOpen,
       pulsing: false,
+      transparent: false,
     };
@@ -131,5 +140,5 @@
     // console.log("CookieKit#handleOpen");
-    const { pulsing } = this.state;
+    const { transparent } = this.state;
 
-    if (pulsing) {
+    if (transparent) {
       return;
@@ -142,30 +151,20 @@ }
     this.setState({ isOpen: true });
-  }
+  };
 
   handlePopupClose = () => {
     // console.log("CookieKit#handlePopupClose");
-    const { onConsentStatusChange } = this.props;
+    const { consentStatus, onConsentStatusChange } = this.props;
 
-    onConsentStatusChange(consentStatuses.closed);
+    if (consentStatus !== COMPLETE) {
+      onConsentStatusChange(CLOSED);
+    }
 
     this.clearTimers();
+    this.startDismissTimer();
 
     this.setState({ hasClosed: true, isOpen: false });
+  };
 
-    // HACK: Because `startPulsing` depends on `props.consentsSource` and it
-    // could be changed in `onConsentStatusChange` in what seems to be the next
-    // event loop, we are also delaying the calls to these methods in the next
-    // event loop. Without this, the pulsing is not started.
-    setTimeout(() => {
-      this.startPulsing();
-      this.startDismissTimer();
-    }, 1);
-  }
-
-  handlePopupLogin = (accessToken) => {
+  handlePopupLogin = () => {
     // console.log("CookieKit#handlePopupLogin");
-    const { onAuthentication } = this.props;
-
-    onAuthentication(accessToken);
-
     this.clearTimers();
@@ -183,5 +182,5 @@
     }, 1);
-  }
+  };
 
-  handlePopupSubmit = (nextConsentSettings) => {
+  handlePopupSubmit = (nextConsentSettings, fingerprintConsent) => {
     // console.log("CookieKit#handlePopupSubmit");
@@ -194,3 +193,3 @@ // console.dir(nextConsentSettings);
 
-    onCookieConsentsChange(nextConsentSettings);
+    onCookieConsentsChange(nextConsentSettings, fingerprintConsent);
 
@@ -201,3 +200,6 @@ this.clearTimers();
     if (hideOnComplete) {
-      this.setState({ isShown: false, pulsing: false });
+      this.setState({ pulsing: false, transparent: true });
+      this.timers.push(setTimeout(() => {
+        this.setState({ isShown: false });
+      }, 1000));
     } else {
@@ -213,3 +215,3 @@ // HACK: Because `startPulsing` depends on `props.consentsSource` and it
     }
-  }
+  };
 
@@ -224,8 +226,18 @@ clearTimers() {
     // console.log("CookieKit#startPulsing");
-    const { consentsSource } = this.props;
+    const { consentsSource, hideOnComplete } = this.props;
     const animation = animations[consentsSource];
 
     if (animation && animation !== "default") {
-      this.timers.push(setTimeout(() => this.setState({ pulsing: true }), 500));
+      this.timers.push(setTimeout(() => this.setState({ animated: true, pulsing: true }), 500));
       this.timers.push(setTimeout(() => this.stopPulsing(), 4500));
+      this.timers.push(setTimeout(() => this.setState({ animated: false }), 5000));
+
+      if (hideOnComplete) {
+        this.timers.push(setTimeout(() => {
+          this.setState({ transparent: true });
+        }, 5000));
+        this.timers.push(setTimeout(() => {
+          this.setState({ isShown: false });
+        }, 6000));
+      }
     }
@@ -246,4 +258,7 @@ }
       this.timers.push(setTimeout(() => {
+        this.setState({ transparent: true });
+      }, timeOut * 1000));
+      this.timers.push(setTimeout(() => {
         this.setState({ isShown: false });
-      }, timeOut * 1000));
+      }, timeOut * 1000 + 1000));
     }
@@ -255,3 +270,2 @@ }
     const {
-      accessToken,
       campaignReference,
@@ -261,4 +275,7 @@ companyLogo,
       cookieConsents,
-      countryCode,
+      detectCountry,
+      displayFingerprint,
+      fingerprintConsent,
       hideBrandTag,
+      loginStatus,
       position,
@@ -271,5 +288,5 @@ privacyUrl,
     } = this.props;
-    const { hasClosed, isOpen, isShown, pulsing } = this.state;
+    const { animated, hasClosed, isOpen, isShown, pulsing, transparent } = this.state;
 
-    const animation = animations[consentsSource];
+    const animation = animated ? animations[consentsSource] : animations.unknown;
 
@@ -279,65 +296,63 @@ const renderPopup = isOpen || (consentsSource === "unknown" && !hasClosed);
 
-    const renderResetButton = testMode
-      && (accessToken || cookieConsentsCache.get());
+    const renderResetButton = testMode && cookieConsentsCache.get();
 
-    // console.log("animation:", animation);
-    // console.log("consentsSource:", consentsSource);
-    // console.log("hasClosed:", hasClosed);
-    // console.log("pulsing:", pulsing);
-
     return (
-      <div
-        className={
-          cx(
-            BLOCK,
-            position,
-            {
-              transparent: !isShown,
-            },
-            {
-              scroll: isOpen,
-            },
-          )
-        }
-      >
-        {renderPopup && (
-          <CookieKitPopup
-            accessToken={accessToken}
-            companyLogo={companyLogo}
-            cookieConsents={cookieConsents}
-            countryCode={countryCode}
-            hideBrandTag={hideBrandTag}
-            isConnected={!!campaignReference}
-            onClose={this.handlePopupClose}
-            onLogin={this.handlePopupLogin}
-            onSubmit={this.handlePopupSubmit}
-            privacyUrl={privacyUrl}
-            requestDataTypes={requestDataTypes}
-            termsUrl={termsUrl}
-            textMessage={textMessage}
-          />
-        )}
-        {renderButton && (
-          <button
-            type="button"
-            className={`${BLOCK}__button ${BLOCK}__cookie-button`}
-            onClick={this.handleOpen}
-          >
-            <div
-              className={
-                cx(
-                  `${BLOCK}__cookie-icon`,
-                  `${BLOCK}__cookie-icon--${animation}`,
-                  {
-                    [`${BLOCK}__pulsing`]: pulsing,
-                  },
-                )
-              }
+      isShown && (
+        <div
+          className={
+            cx(
+              BLOCK,
+              position,
+              {
+                transparent,
+              },
+              {
+                scroll: isOpen,
+              },
+            )
+          }
+        >
+          {renderPopup && (
+            <CookieKitPopup
+              companyLogo={companyLogo}
+              cookieConsents={cookieConsents}
+              detectCountry={detectCountry}
+              displayFingerprint={displayFingerprint}
+              fingerprintConsent={fingerprintConsent}
+              hideBrandTag={hideBrandTag}
+              loginStatus={loginStatus}
+              isConnected={!!campaignReference}
+              onClose={this.handlePopupClose}
+              onLogin={this.handlePopupLogin}
+              onSubmit={this.handlePopupSubmit}
+              privacyUrl={privacyUrl}
+              requestDataTypes={requestDataTypes}
+              termsUrl={termsUrl}
+              textMessage={textMessage}
             />
-          </button>
-        )}
-        {renderResetButton && (<ResetButton />)}
-      </div>
+          )}
+          {renderButton && (
+            <button
+              type="button"
+              className={`${BLOCK}__button ${BLOCK}__cookie-button`}
+              onClick={this.handleOpen}
+            >
+              <div
+                className={
+                  cx(
+                    `${BLOCK}__cookie-icon`,
+                    `${BLOCK}__cookie-icon--${animation}`,
+                    {
+                      [`${BLOCK}__pulsing`]: pulsing,
+                    },
+                  )
+                }
+              />
+            </button>
+          )}
+          {renderResetButton && (<ResetButton />)}
+        </div>
+      )
     );
   }
 }

src/CookieKitContainer.js

@@ -5,7 +5,3 @@ import PropTypes from "prop-types";
 import {
-  clearAccessToken,
-  getAccessToken,
-  saveAccessToken,
-} from "xcoobee-cookie-kit-core/src/AccessTokenManager";
-import {
+  cookieOptionsKeys,
   consentStatuses,
@@ -18,6 +14,7 @@ cookieTypes,
 import cookieConsentsCache from "xcoobee-cookie-kit-core/src/cookieConsentsCache";
-import CookieConsentsManager from "xcoobee-cookie-kit-core/src/CookieConsentsManager";
 import {
   getCountryCode,
   saveCountryCode,
+  fetchCountryCode,
+  fetchCountryCodeForSubscribers,
 } from "xcoobee-cookie-kit-core/src/LocaleManager";
@@ -30,7 +27,11 @@ import CookieManager from "xcoobee-cookie-kit-core/src/CookieManager";
 import CookieKit from "./CookieKit";
+import BridgeCommunicator from "./BridgeCommunicator";
 
-// const CLOSED = consentStatuses.closed;
 const COMPLETE = consentStatuses.complete;
 const OPEN = consentStatuses.open;
 
+const SAVED_PREFERENCES = cookieOptionsKeys.savedPreferences;
+const USER_SETTINGS = cookieOptionsKeys.userSettings;
+const CROWD_AI = cookieOptionsKeys.crowdAi;
+
 function callCookieManagingFunctions(consentSettings) {
@@ -75,3 +76,2 @@ CookieManager.xckClearCookies(consentSettings);
       if (e instanceof NotAuthorizedError) {
-        clearAccessToken();
         console.error(error.message);
@@ -84,3 +84,2 @@ } else {
     if (error instanceof NotAuthorizedError) {
-      clearAccessToken();
       console.error(error.message);
@@ -105,2 +104,4 @@ } else {
     cssAutoLoad: PropTypes.bool,
+    detectCountry: PropTypes.bool,
+    displayFingerprint: PropTypes.bool,
     displayOnlyForEU: PropTypes.bool,
@@ -135,2 +136,4 @@ expirationTime: PropTypes.number,
     cssAutoLoad: true,
+    detectCountry: false,
+    displayFingerprint: false,
     displayOnlyForEU: false,
@@ -151,3 +154,3 @@ expirationTime: 0,
     this.state = {
-      accessToken: getAccessToken(),
+      campaignReference: props.campaignReference,
       consentsSource: "unknown",
@@ -158,2 +161,5 @@ consentStatus: OPEN,
       initializing: true,
+      isConsentCached: false,
+      isLoginStatusChecked: false,
+      loginStatus: false,
     };
@@ -171,38 +177,25 @@
 
-  componentDidMount() {
-    if (this.state.countryCode) {
-      this.getCookieConsents();
-    } else {
-      CookieConsentsManager.fetchCountryCode()
-        .catch((error) => {
-          // console.log("CookieKitContainer#componentDidMount#fetchCountryCode#catch");
-          console.error(error);
-          return null;
-        })
-        .then((countryCode) => {
-          saveCountryCode(countryCode);
-          this.setState({ countryCode });
-          this.getCookieConsents();
-        })
+  onLoginStatusChange = (loginStatus) => {
+    // console.log("CookieKitContainer#onLoginStatusChange");
+    const { isLoginStatusChecked } = this.state;
+
+    this.setState({ loginStatus });
+
+    if (!isLoginStatusChecked) {
+      this.setState({ isLoginStatusChecked: true });
+      this.getCountryCode()
+        .then(() => this.getCookieConsents())
         .catch(handleErrors);
     }
-  }
+  };
 
-  // componentDidUpdate(prevProps, prevState) {
-  //   console.log("CookieKitContainer#componentDidUpdate");
-  //   if (this.props !== prevProps) {
-  //     console.log("props changed:");
-  //     console.dir(this.props);
-  //   }
-  //   if (this.state !== prevState) {
-  //     console.log("state changed:");
-  //     console.dir(this.state);
-  //   }
-  // }
-
   getCookieConsents() {
+    // console.log("CookieKitContainer#getCookieConsents");
     const cachedCookieConsents = cookieConsentsCache.get();
+
     if (cachedCookieConsents) {
       // console.log("Using cached cookie consents!");
       this.setCookieConsents("cached", cachedCookieConsents);
+      this.setState({ isConsentCached: true });
+
       return;
@@ -212,9 +205,7 @@ }
     const { campaignReference } = this.props;
+    const { loginStatus } = this.state;
 
     const isConnected = !!campaignReference;
-    const { accessToken } = this.state;
 
-    if (isConnected && accessToken) {
-      this.resolveConnectedCookieConsents().catch(handleErrors);
-    } else {
+    if (!isConnected || !loginStatus) {
       this.fallBackToHostDefaults();
@@ -224,4 +215,42 @@ }
 
+  getCountryCode() {
+    const { campaignReference, detectCountry } = this.props;
+    const { countryCode } = this.state;
+
+    const defaultCountryCode = "EU";
+
+    if (countryCode) {
+      return Promise.resolve(countryCode);
+    }
+
+    if (detectCountry) {
+      let promise;
+
+      if (campaignReference) {
+        promise = Promise.resolve(fetchCountryCodeForSubscribers(campaignReference));
+      } else {
+        promise = Promise.resolve(fetchCountryCode());
+      }
+
+      return promise
+        .catch((error) => {
+          console.error(error);
+          this.setState({ countryCode: defaultCountryCode });
+
+          return defaultCountryCode;
+        })
+        .then((cCode) => {
+          saveCountryCode(cCode);
+          this.setState({ countryCode: cCode });
+
+          return cCode;
+        });
+    }
+
+    return Promise.resolve(defaultCountryCode);
+  }
+
   getConsentStatus() {
     const { consentStatus } = this.state;
+
     return consentStatus;
@@ -234,2 +263,3 @@ }
     const consentSettings = {};
+
     if (consentStatus === COMPLETE) {
@@ -247,3 +277,5 @@ cookieConsents.forEach((consent) => {
     cookieConsentsCache.put(cookieConsents);
+
     const consentStatus = COMPLETE;
+
     this.setState({
@@ -257,17 +289,2 @@ consentsSource,
 
-  handleAuthentication = (accessToken) => {
-    // console.log("CookieKitContainer#handleAuthentication");
-    // console.log("accessToken:", accessToken);
-    saveAccessToken(accessToken);
-    this.setState({ accessToken });
-
-    const { campaignReference } = this.props;
-
-    const isConnected = !!campaignReference;
-
-    if (isConnected) {
-      this.resolveConnectedCookieConsents().catch(handleErrors);
-    }
-  };
-
   handleConsentStatusChange = (nextConsentStatus) => {
@@ -279,5 +296,5 @@ // console.log("CookieKitContainer#handleConsentStatusChange");
 
-  handleCookieConsentsChange = (consentSettings) => {
+  handleCookieConsentsChange = (consentSettings, fingerprintConsent) => {
     // console.log("CookieKitContainer#handleCookieConsentsChange");
-    // console.log("consentSettings:", consentSettings);
+    const { campaignReference, loginStatus } = this.state;
 
@@ -288,33 +305,67 @@ const cookieConsents = cookieTypes.map(type => ({
     }));
+    cookieConsents.push({ type: "fingerprint", checked: fingerprintConsent });
 
-    const { campaignReference } = this.props;
-    const { accessToken } = this.state;
-    CookieConsentsManager.saveRemotely(accessToken, cookieConsents, campaignReference)
-      .catch(handleErrors);
+    this.setCookieConsents("usersSaved", cookieConsents);
 
-    this.setCookieConsents("usersSaved", cookieConsents);
+    const cookieConsentsObj = {};
+
+    if (loginStatus && !!campaignReference) {
+      cookieTypes.forEach((type) => {
+        cookieConsentsObj[type] = !!consentSettings[type];
+      });
+      cookieConsentsObj.fingerprint = fingerprintConsent;
+
+      this.bridgeRef.saveCookieConsents(cookieConsentsObj);
+    }
   };
 
-  callCallbacks(cookieConsents) {
-    // console.log("CookieKitContainer#callCallbacks");
-    const { cookieHandler, targetUrl } = this.props;
+  handleBridgeError = (message) => {
+    // eslint-disable-next-line max-len
+    console.error(`Something went wrong because of error: ${message}. We are experiencing issues saving your cookie category selection. Please contact the site administrator.`);
 
-    const consentSettings = {};
-    cookieConsents.forEach((cookieConsent) => {
-      consentSettings[cookieConsent.type] = cookieConsent.checked;
-    });
+    this.setState({ campaignReference: null });
+  };
 
-    callCookieManagingFunctions(consentSettings);
+  resolveConnectedCookieConsents = (cookieOptions) => {
+    // console.log("CookieKitContainer#resolveConnectedCookieConsents");
+    const { campaignReference, isConsentCached, loginStatus } = this.state;
 
-    if (cookieHandler) {
-      callCookieHandler(cookieHandler, consentSettings);
+    if (isConsentCached) {
+      return;
     }
 
-    if (targetUrl) {
-      callTargetUrl(targetUrl, consentSettings);
+    let consentsSource = "unknown";
+    let cookieConsents = null;
+
+    if (cookieOptions[USER_SETTINGS] && Object.values(cookieOptions[USER_SETTINGS]).includes(true)) {
+      consentsSource = "usersDefaults";
+      cookieConsents = cookieOptions[USER_SETTINGS];
     }
-  }
 
+    if (cookieOptions[CROWD_AI] && Object.values(cookieOptions[CROWD_AI]).includes(true)) {
+      consentsSource = "crowdAi";
+      cookieConsents = cookieOptions[CROWD_AI];
+    }
+
+    if (cookieOptions[SAVED_PREFERENCES] && Object.values(cookieOptions[SAVED_PREFERENCES]).includes(true)) {
+      consentsSource = "usersSaved";
+      cookieConsents = cookieOptions[SAVED_PREFERENCES];
+    }
+
+    if (consentsSource !== "unknown" && cookieConsents) {
+      const cookieConsentsArray = Object.keys(cookieConsents).map(key => ({ type: key, checked: cookieConsents[key] }));
+
+      this.setCookieConsents(consentsSource, cookieConsentsArray);
+
+      if (loginStatus && !!campaignReference) {
+        this.bridgeRef.saveCookieConsents(cookieConsents);
+      }
+    } else {
+      this.fallBackToHostDefaults();
+    }
+  };
+
   // Convenience method
   fallBackToHostDefaults() {
+    // console.log("CookieKitContainer#fallBackToHostDefaults");
     const {
@@ -324,4 +375,8 @@ checkByDefaultTypes,
     } = this.props;
-    const { countryCode } = this.state;
+    const { countryCode, isConsentCached } = this.state;
 
+    if (isConsentCached) {
+      return;
+    }
+
     const hostsDefaultCookieConsents = cookieTypes.map(type => ({
@@ -331,2 +386,3 @@ type,
     }));
+    hostsDefaultCookieConsents.push({ type: "fingerprint", checked: false });
     // If we were unable to resolve the user's country code, then assume it is in
@@ -344,50 +400,20 @@ // the EU.
 
-  resolveConnectedCookieConsents() {
-    // console.log("CookieKitContainer#resolveConnectedCookieConsents");
-    const {
-      fetchCrowdAiCookieConsents,
-      fetchUsersDefaultCookieConsents,
-      fetchUserSettings,
-      fetchUsersSiteCookieConsents,
-    } = CookieConsentsManager;
-    const { accessToken } = this.state;
-    return fetchUserSettings(accessToken)
-      .then((userSettings) => {
-        if (userSettings) {
-          // Check to see if user already has consent settings for the current site
-          const { origin } = window.location;
-          const { userCursor, xcoobeeId } = userSettings;
-          fetchUsersSiteCookieConsents(accessToken, origin, xcoobeeId, userCursor)
-            .then((usersSavedCookieConsents) => {
-              if (usersSavedCookieConsents) {
-                this.setCookieConsents("usersSaved", usersSavedCookieConsents);
-                return;
-              }
+  callCallbacks(cookieConsents) {
+    // console.log("CookieKitContainer#callCallbacks");
+    const { cookieHandler, targetUrl } = this.props;
 
-              let promise;
-              if (userSettings.acceptCrowdAI) {
-                const campaignName = window.location.host;
-                promise = fetchCrowdAiCookieConsents(accessToken, campaignName);
-              } else {
-                promise = Promise.resolve();
-              }
-              promise.then((crowdAiCookieConsents) => {
-                if (crowdAiCookieConsents) {
-                  this.setCookieConsents("crowdAi", crowdAiCookieConsents);
-                  return;
-                }
+    const consentSettings = {};
+    cookieConsents.forEach((cookieConsent) => {
+      consentSettings[cookieConsent.type] = cookieConsent.checked;
+    });
 
-                const usersDefaultCookieConsents = fetchUsersDefaultCookieConsents(userSettings);
-                if (usersDefaultCookieConsents) {
-                  this.setCookieConsents("usersDefaults", usersDefaultCookieConsents);
-                  return;
-                }
+    callCookieManagingFunctions(consentSettings);
 
-                this.fallBackToHostDefaults();
-              });
-            });
-        } else {
-          this.fallBackToHostDefaults();
-        }
-      });
+    if (cookieHandler) {
+      callCookieHandler(cookieHandler, consentSettings);
+    }
+
+    if (targetUrl) {
+      callTargetUrl(targetUrl, consentSettings);
+    }
   }
@@ -398,7 +424,9 @@
     const {
-      campaignReference,
       companyLogo,
+      detectCountry,
+      displayFingerprint,
       expirationTime,
       hideBrandTag,
       hideOnComplete,
+      position,
       privacyUrl,
@@ -410,6 +438,20 @@ requestDataTypes,
     } = this.props;
-    const { accessToken, consentsSource, cookieConsents, countryCode, initializing } = this.state;
 
-    const position = positions.includes(this.props.position) ? this.props.position : positions[0];
+    const {
+      campaignReference,
+      consentsSource,
+      consentStatus,
+      cookieConsents,
+      countryCode,
+      initializing,
+      loginStatus,
+    } = this.state;
 
+    const redefinedPosition = positions.includes(position) ? position : positions[0];
+
+    const cookies = cookieConsents ? cookieConsents.filter(consent => consent.type !== "fingerprint") : null;
+    const fingerprint = cookieConsents ? cookieConsents.find(consent => consent.type === "fingerprint") : null;
+
+    const fingerprintConsent = fingerprint ? fingerprint.checked : false;
+
     // console.log("initializing:", initializing);
@@ -422,15 +464,18 @@
             <CookieKit
-              accessToken={accessToken}
               campaignReference={campaignReference}
               companyLogo={companyLogo}
               consentsSource={consentsSource}
-              cookieConsents={cookieConsents}
+              consentStatus={consentStatus}
+              cookieConsents={cookies}
               countryCode={countryCode}
+              detectCountry={detectCountry}
+              displayFingerprint={displayFingerprint}
               expirationTime={expirationTime}
+              fingerprintConsent={fingerprintConsent}
               hideBrandTag={hideBrandTag}
               hideOnComplete={hideOnComplete}
-              onAuthentication={this.handleAuthentication}
+              loginStatus={loginStatus}
               onConsentStatusChange={this.handleConsentStatusChange}
               onCookieConsentsChange={this.handleCookieConsentsChange}
-              position={position}
+              position={redefinedPosition}
               privacyUrl={privacyUrl}
@@ -444,2 +489,11 @@ requestDataTypes={requestDataTypes}
         )}
+        <BridgeCommunicator
+          ref={(bridgeRef) => {
+            this.bridgeRef = bridgeRef;
+          }}
+          campaignReference={campaignReference}
+          onCookieOptionsLoad={this.resolveConnectedCookieConsents}
+          onLoginStatusChange={this.onLoginStatusChange}
+          handleBridgeError={this.handleBridgeError}
+        />
       </React.Fragment>
@@ -446,0 +500,0 @@ );

src/CookieKitPopup.js

@@ -0,4 +1,5 @@
+import React from "react";
 import PropTypes from "prop-types";
-import React from "react";
 import ReactCountryFlag from "react-country-flag";
+
 import {
@@ -10,5 +11,7 @@ cookieDefns as allAvailCookieDefns,
 } from "xcoobee-cookie-kit-core/src/configs";
+import { countryCodes } from "xcoobee-cookie-kit-core/src/countryData";
 import renderText from "xcoobee-cookie-kit-core/src/renderText";
-import { getLocale, saveLocale } from "xcoobee-cookie-kit-core/src/LocaleManager";
 
+import { getLocale, saveLocale, getCountryCode, saveCountryCode } from "xcoobee-cookie-kit-core/src/LocaleManager";
+
 import closeIcon from "./assets/close-icon.svg";
@@ -23,8 +26,11 @@ import xbLogo from "./assets/xcoobee-logo.svg";
 
+const OPTION = "loginstatus";
+
 export default class CookieKitPopup extends React.PureComponent {
   static propTypes = {
-    accessToken: PropTypes.string,
     companyLogo: PropTypes.string,
     cookieConsents: PropTypes.arrayOf(CookieConsentShape.isRequired).isRequired,
-    countryCode: PropTypes.string,
+    detectCountry: PropTypes.bool,
+    displayFingerprint: PropTypes.bool,
+    fingerprintConsent: PropTypes.bool,
     hideBrandTag: PropTypes.bool.isRequired,
@@ -35,2 +41,3 @@ isConnected: PropTypes.bool.isRequired,
     onSubmit: PropTypes.func.isRequired,
+    loginStatus: PropTypes.bool,
     privacyUrl: PropTypes.string.isRequired,
@@ -53,5 +60,7 @@ requestDataTypes: PropTypes.arrayOf(
   static defaultProps = {
-    accessToken: null,
     companyLogo: null,
-    countryCode: null,
+    detectCountry: false,
+    displayFingerprint: false,
+    fingerprintConsent: false,
+    loginStatus: false,
   };
@@ -63,5 +72,6 @@
 
-    const { cookieConsents } = this.props;
+    const { cookieConsents, fingerprintConsent, requestDataTypes } = this.props;
     const consentSettings = {};
-    cookieConsents.forEach((cookieConsent) => {
+
+    cookieConsents.filter(cookieConsent => requestDataTypes.includes(cookieConsent.type)).forEach((cookieConsent) => {
       consentSettings[cookieConsent.type] = cookieConsent.checked;
@@ -72,4 +82,7 @@ });
       consentSettings,
+      countryCode: getCountryCode() || "EU",
+      fingerprintConsent,
+      isCountrySelectShown: false,
+      isLocaleSelectShown: false,
       selectedLocale: getLocale() || "EN",
-      isShown: false,
     };
@@ -86,8 +99,11 @@
   onMessage = (event) => {
-    // console.log('CookieKitPopup#onMessage');
+    if (!event.data || typeof event.data !== "string") {
+      return;
+    }
     const { onLogin } = this.props;
-    const { token } = event.data;
 
-    if (token) {
-      onLogin(token);
+    const loginStatus = JSON.parse(event.data)[OPTION];
+
+    if (loginStatus) {
+      onLogin();
     }
@@ -98,6 +114,26 @@ };
     // console.log('CookieKitPopup#handleLocaleChange');
-    this.setState({ selectedLocale: locale, isShown: false });
+    this.setState({ selectedLocale: locale, isLocaleSelectShown: false });
     saveLocale(locale);
   };
 
+  handleCountryChange = (countryCode) => {
+    // console.log('CookieKitPopup#handleCountryChange');
+    this.setState({ countryCode, isCountrySelectShown: false });
+    saveCountryCode(countryCode);
+  };
+
+  handleCountrySelectToggle = (e) => {
+    // console.log('CookieKitPopup#handleCountrySelectToggle');
+
+    e.stopPropagation();
+    this.setState(state => ({ isCountrySelectShown: !state.isCountrySelectShown, isLocaleSelectShown: false }));
+  };
+
+  handleLocaleSelectToggle = (e) => {
+    // console.log('CookieKitPopup#handleLocaleSelectToggle');
+
+    e.stopPropagation();
+    this.setState(state => ({ isLocaleSelectShown: !state.isLocaleSelectShown, isCountrySelectShown: false }));
+  };
+
   handleCookieCheck = (e, type) => {
@@ -136,8 +172,13 @@ // console.log('CookieKitPopup#handleCookieCheck');
 
+  handleFingerprintCheck = (e) => {
+    // console.log('CookieKitPopup#handleFingerprintCheck');
+    this.setState({ fingerprintConsent: e.target.checked });
+  };
+
   handleSubmit = () => {
     // console.log('CookieKitPopup#handleSubmit');
     const { onSubmit } = this.props;
-    const { consentSettings } = this.state;
+    const { consentSettings, fingerprintConsent } = this.state;
 
-    onSubmit(consentSettings);
+    onSubmit(consentSettings, fingerprintConsent);
   };
@@ -166,6 +207,7 @@
     const {
-      accessToken,
       companyLogo,
-      countryCode,
+      detectCountry,
+      displayFingerprint,
       hideBrandTag,
+      loginStatus,
       isConnected,
@@ -178,7 +220,14 @@ onClose,
     } = this.props;
-    const { consentSettings, isShown, selectedLocale } = this.state;
+    const {
+      consentSettings,
+      countryCode,
+      fingerprintConsent,
+      isCountrySelectShown,
+      isLocaleSelectShown,
+      selectedLocale,
+    } = this.state;
 
     // console.log("countryCode:", countryCode);
 
-    const appearsToBeLoggedIn = !!accessToken;
+    const appearsToBeLoggedIn = loginStatus;
     const targetUrl = encodeURIComponent(window.location.origin);
@@ -192,4 +241,9 @@
 
+    const loginModalFeatures = "left=400, top=100, width=500, height=600";
+
     return (
-      <div className={BLOCK}>
+      <div
+        className={BLOCK}
+        onClick={() => this.setState({ isCountrySelectShown: false, isLocaleSelectShown: false })}
+      >
         <div className={`${BLOCK}__header`}>
@@ -230,15 +284,21 @@ <div className={`${BLOCK}__logo`}>
                 className={`xb-cookie-kit__button ${BLOCK}__language-picker`}
-                onClick={() => this.setState({ isShown: !isShown })}
+                onClick={this.handleLocaleSelectToggle}
               >
                 { selectedLocale }
               </button>
-              { countryCode && (
-                <div className={`${BLOCK}__block ${BLOCK}__block--sm`}>
-                  <div className={`${BLOCK}__flag`}>
-                    <ReactCountryFlag code={countryCode} svg />
-                  </div>
+              { detectCountry && (
+                <div className={`${BLOCK}__block ${BLOCK}__block--sm ${BLOCK}__country-picker`}>
+                  <button
+                    type="button"
+                    className={`xb-cookie-kit__button ${BLOCK}__country-picker-button`}
+                    onClick={this.handleCountrySelectToggle}
+                  >
+                    <div className={`${BLOCK}__flag`}>
+                      <ReactCountryFlag code={countryCode} svg />
+                    </div>
+                  </button>
                 </div>
               )}
             </div>
-            { isShown && (
+            { isLocaleSelectShown && (
               <div className={`${BLOCK}__custom-select`}>
@@ -257,2 +317,19 @@ { locales.map(locale => (
             )}
+            { isCountrySelectShown && (
+              <div className={`${BLOCK}__country-picker-select`}>
+                { countryCodes.map(cCode => (
+                  <button
+                    type="button"
+                    key={`country-flag-${cCode}`}
+                    className={`xb-cookie-kit__button ${BLOCK}__country-picker-button`}
+                    onClick={() => this.handleCountryChange(cCode)}
+                    title={cCode}
+                  >
+                    <div className={`${BLOCK}__flag`}>
+                      <ReactCountryFlag code={cCode} svg />
+                    </div>
+                  </button>
+                ))}
+              </div>
+            )}
           </div>
@@ -276,3 +353,6 @@ </div>
                 </div>
-                <div className={`${BLOCK}__cookie-title`}>
+                <div
+                  className={`${BLOCK}__cookie-title`}
+                  title={renderText("CookieKit.MoreInfo", selectedLocale)}
+                >
                   <a
@@ -300,2 +380,21 @@ className={`${BLOCK}__cookie-title-link`}
         </button>
+        { displayFingerprint && (
+          <div className={`${BLOCK}__fingerprint`}>
+            <div className={`${BLOCK}__fingerprint-checkbox`}>
+              <input
+                id="xbCheckbox_fingerprint"
+                type="checkbox"
+                checked={fingerprintConsent}
+                onChange={this.handleFingerprintCheck}
+              />
+              <label
+                htmlFor="xbCheckbox_fingerprint"
+                className={`${BLOCK}__checkbox`}
+              />
+            </div>
+            <div className={`${BLOCK}__fingerprint-label`}>
+              {renderText("CookieKit.FingerprintLabel", selectedLocale)}
+            </div>
+          </div>
+        )}
         <div className={`${BLOCK}__actions`}>
@@ -347,3 +446,3 @@ { !hideBrandTag && (
                 type="button"
-                onClick={() => window.open(`${xbOrigin}${links.login}?targetUrl=${targetUrl}`)}
+                onClick={() => window.open(`${xbOrigin}${links.login}?targetUrl=${targetUrl}`, "", loginModalFeatures)}
               >
@@ -356,15 +455,15 @@ {renderText("CookieKit.LoginLink", selectedLocale)}
             className={`${BLOCK}__link`}
-            href={termsUrl}
+            href={privacyUrl}
             target="_blank"
             rel="noopener noreferrer"
           >
-            {renderText("CookieKit.TermsLink", selectedLocale)}
+            {renderText("CookieKit.PolicyLink", selectedLocale)}
           </a>
           <a
             className={`${BLOCK}__link`}
-            href={privacyUrl}
+            href={termsUrl}
             target="_blank"
             rel="noopener noreferrer"
           >
-            {renderText("CookieKit.PolicyLink", selectedLocale)}
+            {renderText("CookieKit.TermsLink", selectedLocale)}
           </a>
@@ -371,0 +470,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

297718

increased by10.36%

Number of package files

35

increased by6.06%

Lines of code

3134

increased by23.97%

No dependency changes