react-cookie-kit/dist/CookieKitContainer.js

GDPR / CCPA Easy Cookie, Script, Do-Not-Sell, and Fingerprint Consent Management for Websites.

function _typeof(obj) { "@babel/helpers - typeof"; 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); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import fetch from "isomorphic-fetch";
import PropTypes from "prop-types";
import React from "react";
import { cookieOptionsKeys, consentStatuses, cookieTypes, cssHrefTheme1, cssHrefTheme2, euCountries, positions, themes } from "xcoobee-cookie-kit-core/src/configs";
import cookieConsentsCache from "xcoobee-cookie-kit-core/src/cookieConsentsCache";
import { countryCodes, countryMapping } from "xcoobee-cookie-kit-core/src/countryData";
import CookieManager from "xcoobee-cookie-kit-core/src/CookieManager";
import { getCountryCode, saveCountryCode, saveLocale, fetchCountryCode, fetchCountryCodeForSubscribers } from "xcoobee-cookie-kit-core/src/LocaleManager";
import NotAuthorizedError from "xcoobee-cookie-kit-core/src/NotAuthorizedError";
import { xckDomain } from "./configs";
import BridgeCommunicator from "./BridgeCommunicator";
import CookieKit from "./CookieKit";
var COMPLETE = consentStatuses.complete;
var OPEN = consentStatuses.open;
var SAVED_PREFERENCES = cookieOptionsKeys.savedPreferences;
var USER_SETTINGS = cookieOptionsKeys.userSettings;
var CROWD_AI = cookieOptionsKeys.crowdAi;
var DEFAULT_COUNTRY_CODE = "EU";

function callCookieManagingFunctions(consentSettings) {
  CookieManager.xckClearCookies(consentSettings);
  CookieManager.xckHandleXbeeScriptTags(consentSettings);
  CookieManager.xckHandleXbeeCookieTags(consentSettings);
}

function callCookieHandler(cookieHandler, consentSettings) {
  if (typeof cookieHandler === "string") {
    if (typeof window[cookieHandler] === "function") {
      window[cookieHandler](consentSettings);
    } else {
      console.error("Cookie handler function \"".concat(cookieHandler, "\" is missing"));
    }
  } else {
    cookieHandler(consentSettings);
  }
}

function callTargetUrl(targetUrl, consentSettings) {
  var result = {
    time: new Date().toISOString(),
    code: 200,
    result: consentSettings
  };
  fetch(targetUrl, {
    headers: {
      "Content-Type": "application/json"
    },
    method: "POST",
    body: JSON.stringify(result),
    mode: "no-cors"
  });
}

function handleErrors(error) {
  if (Array.isArray(error)) {
    error.forEach(function (e) {
      if (e instanceof NotAuthorizedError) {
        console.error(error.message);
      } else {
        throw Error(e.message);
      }
    });
  } else if (error) {
    if (error instanceof NotAuthorizedError) {
      console.error(error.message);
    } else {
      throw Error(error.message);
    }
  }
}

var CookieKitContainer = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(CookieKitContainer, _React$PureComponent);

  var _super = _createSuper(CookieKitContainer);

  function CookieKitContainer(props) {
    var _this;

    _classCallCheck(this, CookieKitContainer);

    // console.log("CookieKitContainer#constructor");
    _this = _super.call(this, props);

    _defineProperty(_assertThisInitialized(_this), "onLoginStatusChange", function (loginStatus) {
      // console.log("CookieKitContainer#onLoginStatusChange");
      var isLoginStatusChecked = _this.state.isLoginStatusChecked;

      _this.setState({
        loginStatus: loginStatus
      });

      if (!isLoginStatusChecked) {
        _this.setState({
          isLoginStatusChecked: true
        });

        _this.getCountryCode().then(function () {
          return _this.getCookieConsents();
        }).catch(handleErrors);
      }
    });

    _defineProperty(_assertThisInitialized(_this), "handleConsentStatusChange", function (nextConsentStatus) {
      // console.log("CookieKitContainer#handleConsentStatusChange");
      // console.log("nextConsentStatus:", nextConsentStatus);
      _this.setState({
        consentStatus: nextConsentStatus
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleCookieConsentsChange", function (consentSettings, doNotSellConsent, fingerprintConsent) {
      // console.log("CookieKitContainer#handleCookieConsentsChange");
      var _this$state = _this.state,
          campaignReference = _this$state.campaignReference,
          loginStatus = _this$state.loginStatus;
      var cookieConsents = cookieTypes.map(function (type) {
        return {
          type: type,
          checked: !!consentSettings[type]
        };
      });
      cookieConsents.push({
        type: "donotsell",
        checked: doNotSellConsent
      });
      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(_this), "handleBridgeError", function (errorMessage) {
      // eslint-disable-next-line max-len
      console.error("Something went wrong because of error: ".concat(errorMessage, ". We are experiencing issues saving your cookie category selection. Please contact the site administrator."));
      var error = new NotAuthorizedError();

      if (errorMessage === error.message) {
        _this.setState({
          loginStatus: false
        });

        _this.fallBackToHostDefaults();
      } else {
        _this.setState({
          campaignReference: null
        });
      }
    });

    _defineProperty(_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 = {
      campaignReference: props.campaignReference,
      consentsSource: "unknown",
      consentStatus: OPEN,
      cookieConsents: null,
      countryCode: getCountryCode(),
      defaultCountryCode: countryCodes.includes(props.defaultCountryCode) ? props.defaultCountryCode : DEFAULT_COUNTRY_CODE,
      display: true,
      initializing: true,
      isAnimated: true,
      isConsentCached: false,
      isLoginStatusChecked: false,
      loginStatus: false
    };

    if (props.cssAutoLoad) {
      var linkDom = document.createElement("link");
      var cssHref = props.theme === "popup" ? cssHrefTheme1 : cssHrefTheme2;
      linkDom.setAttribute("rel", "stylesheet");
      linkDom.setAttribute("href", "".concat(xckDomain, "/").concat(cssHref));
      document.head.appendChild(linkDom);
    }

    return _this;
  }

  _createClass(CookieKitContainer, [{
    key: "getCookieConsents",
    value: function getCookieConsents() {
      // console.log("CookieKitContainer#getCookieConsents");
      var suspendAnimationTime = this.props.suspendAnimationTime;

      var _cookieConsentsCache$ = cookieConsentsCache.get(),
          cookieConsents = _cookieConsentsCache$.cookieConsents,
          lastUpdated = _cookieConsentsCache$.lastUpdated;

      if (lastUpdated && !!suspendAnimationTime && Date.now() - lastUpdated < suspendAnimationTime * 1000) {
        this.setState({
          isAnimated: false
        });
      }

      if (cookieConsents) {
        // console.log("Using cached cookie consents!");
        this.setCookieConsents("cached", cookieConsents);
        this.setState({
          isConsentCached: true
        });
        return;
      }

      var campaignReference = this.props.campaignReference;
      var loginStatus = this.state.loginStatus;
      var isConnected = !!campaignReference;

      if (!isConnected || !loginStatus) {
        this.fallBackToHostDefaults();
      }
    }
  }, {
    key: "getCountryCode",
    value: function getCountryCode() {
      var _this2 = this,
          _countryMapping$defau;

      var _this$props = this.props,
          campaignReference = _this$props.campaignReference,
          detectCountry = _this$props.detectCountry;
      var _this$state3 = this.state,
          countryCode = _this$state3.countryCode,
          defaultCountryCode = _this$state3.defaultCountryCode;

      if (countryCode) {
        return Promise.resolve(countryCode);
      }

      if (detectCountry) {
        var promise;

        if (campaignReference) {
          promise = Promise.resolve(fetchCountryCodeForSubscribers(campaignReference));
        } else {
          promise = Promise.resolve(fetchCountryCode());
        }

        return promise.then(function (cCode) {
          saveCountryCode(cCode);

          _this2.setState({
            countryCode: cCode
          });

          return cCode;
        }).catch(function (error) {
          console.error(error);

          _this2.setState({
            countryCode: defaultCountryCode
          });

          return defaultCountryCode;
        });
      }

      this.setState({
        countryCode: defaultCountryCode
      });
      saveCountryCode(defaultCountryCode);
      saveLocale(((_countryMapping$defau = countryMapping[defaultCountryCode]) === null || _countryMapping$defau === void 0 ? void 0 : _countryMapping$defau.locale) || "en-us");
      return Promise.resolve(defaultCountryCode);
    }
  }, {
    key: "getConsentStatus",
    value: function getConsentStatus() {
      var consentStatus = this.state.consentStatus;
      return consentStatus;
    }
  }, {
    key: "getCookieTypes",
    value: function getCookieTypes() {
      var _this$state4 = this.state,
          consentStatus = _this$state4.consentStatus,
          cookieConsents = _this$state4.cookieConsents;
      var consentSettings = {};

      if (consentStatus === COMPLETE) {
        cookieConsents.forEach(function (consent) {
          consentSettings[consent.type] = consent.checked;
        });
      }

      return consentSettings;
    } // Convenience method

  }, {
    key: "setCookieConsents",
    value: function setCookieConsents(consentsSource, cookieConsents) {
      var _this3 = this;

      // console.log("CookieKitContainer#setCookieConsents");
      cookieConsentsCache.put(cookieConsents);
      var consentStatus = COMPLETE;
      this.setState({
        consentsSource: consentsSource,
        consentStatus: consentStatus,
        cookieConsents: cookieConsents,
        initializing: false
      }, function () {
        return _this3.callCallbacks(cookieConsents);
      });
    }
  }, {
    key: "fallBackToHostDefaults",
    // Convenience method
    value: function fallBackToHostDefaults() {
      // console.log("CookieKitContainer#fallBackToHostDefaults");
      var _this$props2 = this.props,
          checkByDefaultTypes = _this$props2.checkByDefaultTypes,
          displayOnlyForEU = _this$props2.displayOnlyForEU,
          requestDataTypes = _this$props2.requestDataTypes;
      var _this$state5 = this.state,
          countryCode = _this$state5.countryCode,
          isConsentCached = _this$state5.isConsentCached;

      if (isConsentCached) {
        return;
      } // If we were unable to resolve the user's country code, then assume it is in
      // the EU.


      var cCode = countryCode || euCountries[0];

      if (displayOnlyForEU && !euCountries.includes(cCode)) {
        var hostsDefaultCookieConsents = checkByDefaultTypes.map(function (type) {
          return {
            type: type,
            checked: requestDataTypes.includes(type)
          };
        });
        hostsDefaultCookieConsents.push({
          type: "donotsell",
          checked: false
        });
        hostsDefaultCookieConsents.push({
          type: "fingerprint",
          checked: false
        });
        this.setCookieConsents("hostsDefaults", hostsDefaultCookieConsents);
      } else {
        var consentsSource = "unknown"; // Note: We can always set "application" to checked even if it is not in
        // requestDataTypes because CookieKitPopup will filter everything based on
        // requestDataTypes. Alternatively, we can pre-filter here too. We opted for the
        // former.

        var cookieConsents = [{
          type: "application",
          checked: true
        }];
        this.setState({
          consentsSource: consentsSource,
          cookieConsents: cookieConsents,
          initializing: false
        });
      }
    }
  }, {
    key: "callCallbacks",
    value: function callCallbacks(cookieConsents) {
      // console.log("CookieKitContainer#callCallbacks");
      var _this$props3 = this.props,
          cookieHandler = _this$props3.cookieHandler,
          targetUrl = _this$props3.targetUrl; // type ConsentSettings = {
      //   [ConsentType]: bool,
      // }

      var consentSettings = {};
      cookieConsents.forEach(function (cookieConsent) {
        consentSettings[cookieConsent.type] = cookieConsent.checked;
      });
      callCookieManagingFunctions(consentSettings);

      if (cookieHandler) {
        callCookieHandler(cookieHandler, consentSettings);
      }

      if (targetUrl) {
        callTargetUrl(targetUrl, consentSettings);
      }
    }
  }, {
    key: "display",
    value: function display(value) {
      this.setState({
        display: value
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      // console.log("CookieKitContainer#render");
      var _this$props4 = this.props,
          companyLogo = _this$props4.companyLogo,
          displayDoNotSell = _this$props4.displayDoNotSell,
          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,
          theme = _this$props4.theme;
      var _this$state6 = this.state,
          campaignReference = _this$state6.campaignReference,
          consentsSource = _this$state6.consentsSource,
          consentStatus = _this$state6.consentStatus,
          cookieConsents = _this$state6.cookieConsents,
          countryCode = _this$state6.countryCode,
          display = _this$state6.display,
          initializing = _this$state6.initializing,
          isAnimated = _this$state6.isAnimated,
          loginStatus = _this$state6.loginStatus;
      var defaultPositionIndex = theme === "overlay" ? 4 : 0;
      var redefinedPosition = positions.includes(position) ? position : positions[defaultPositionIndex];
      var cookies = cookieConsents ? cookieConsents.filter(function (consent) {
        return consent.type !== "fingerprint" && consent.type !== "donotsell";
      }) : null;
      var donotsell = cookieConsents ? cookieConsents.find(function (consent) {
        return consent.type === "donotsell";
      }) : null;
      var fingerprint = cookieConsents ? cookieConsents.find(function (consent) {
        return consent.type === "fingerprint";
      }) : null;
      var doNotSellConsent = donotsell ? donotsell.checked : false;
      var fingerprintConsent = fingerprint ? fingerprint.checked : false; // console.log("initializing:", initializing);

      return /*#__PURE__*/React.createElement(React.Fragment, null, !initializing && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CookieKit, {
        campaignReference: campaignReference,
        companyLogo: companyLogo,
        consentsSource: consentsSource,
        consentStatus: consentStatus,
        cookieConsents: cookies,
        countryCode: countryCode,
        display: display,
        displayDoNotSell: displayDoNotSell,
        displayFingerprint: displayFingerprint,
        doNotSellConsent: doNotSellConsent,
        expirationTime: expirationTime,
        fingerprintConsent: fingerprintConsent,
        hideBrandTag: hideBrandTag,
        hideOnComplete: hideOnComplete,
        isAnimated: isAnimated,
        loginStatus: loginStatus,
        onConsentStatusChange: this.handleConsentStatusChange,
        onCookieConsentsChange: this.handleCookieConsentsChange,
        position: redefinedPosition,
        privacyUrl: privacyUrl,
        requestDataTypes: requestDataTypes,
        termsUrl: termsUrl,
        testMode: testMode,
        textMessage: textMessage,
        theme: theme
      })), /*#__PURE__*/React.createElement(BridgeCommunicator, {
        ref: function ref(bridgeRef) {
          _this4.bridgeRef = bridgeRef;
        },
        campaignReference: campaignReference,
        onCookieOptionsLoad: this.resolveConnectedCookieConsents,
        onLoginStatusChange: this.onLoginStatusChange,
        handleBridgeError: this.handleBridgeError
      }));
    }
  }]);

  return CookieKitContainer;
}(React.PureComponent);

_defineProperty(CookieKitContainer, "propTypes", {
  campaignReference: PropTypes.string,
  checkByDefaultTypes: PropTypes.arrayOf(PropTypes.oneOf(cookieTypes).isRequired),
  companyLogo: PropTypes.string,
  cookieHandler: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  cssAutoLoad: PropTypes.bool,
  defaultCountryCode: PropTypes.oneOf([].concat(_toConsumableArray(countryCodes), [DEFAULT_COUNTRY_CODE])),
  detectCountry: PropTypes.bool,
  displayDoNotSell: PropTypes.bool,
  displayFingerprint: PropTypes.bool,
  displayOnlyForEU: PropTypes.bool,
  expirationTime: PropTypes.number,
  hideBrandTag: PropTypes.bool,
  hideOnComplete: PropTypes.bool,
  position: PropTypes.oneOf(positions),
  privacyUrl: PropTypes.string.isRequired,
  requestDataTypes: PropTypes.arrayOf(PropTypes.oneOf(cookieTypes).isRequired),
  suspendAnimationTime: PropTypes.number,
  targetUrl: PropTypes.string,
  termsUrl: PropTypes.string.isRequired,
  testMode: PropTypes.bool,
  textMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    "en-us": PropTypes.string,
    "de-de": PropTypes.string,
    "es-419": PropTypes.string,
    "fr-fr": PropTypes.string
  })]).isRequired,
  theme: PropTypes.oneOf(themes)
});

_defineProperty(CookieKitContainer, "defaultProps", {
  campaignReference: null,
  checkByDefaultTypes: [],
  companyLogo: null,
  cookieHandler: function cookieHandler() {},
  cssAutoLoad: true,
  defaultCountryCode: DEFAULT_COUNTRY_CODE,
  detectCountry: false,
  displayDoNotSell: false,
  displayFingerprint: false,
  displayOnlyForEU: false,
  expirationTime: 0,
  hideBrandTag: false,
  hideOnComplete: false,
  position: "right_bottom",
  requestDataTypes: ["application"],
  suspendAnimationTime: 600,
  targetUrl: null,
  testMode: false,
  theme: "popup"
});

export { CookieKitContainer as default };