react-cookie-kit/dist/CookieKit.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 _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 cx from "classnames";
import PropTypes from "prop-types";
import React from "react";
import { animations, consentsSources, consentStatuses, cookieTypes, positions, themes } from "xcoobee-cookie-kit-core/src/configs";
import { clearLocale, clearCountryCode } from "xcoobee-cookie-kit-core/src/LocaleManager";
import cookieConsentsCache from "xcoobee-cookie-kit-core/src/cookieConsentsCache";
import CookieConsentShape from "./lib/CookieConsentShape";
import CookieKitPopup from "./CookieKitPopup";
var COMPLETE = consentStatuses.complete;
var CLOSED = consentStatuses.closed;
var BLOCK = "xb-cookie-kit";

function reset() {
  clearLocale();
  clearCountryCode();
  cookieConsentsCache.clear();
  window.location.reload();
}

function ResetButton() {
  var className = "xb-cookie-kit__button xb-cookie-kit__reset-button";
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: className,
    onClick: reset
  }, "Reset");
}

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

  var _super = _createSuper(CookieKit);

  function CookieKit(props) {
    var _this;

    _classCallCheck(this, CookieKit);

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

    _defineProperty(_assertThisInitialized(_this), "handleOpen", function () {
      // console.log("CookieKit#handleOpen");
      var transparent = _this.state.transparent;

      if (transparent) {
        return;
      }

      _this.clearTimers();

      _this.stopPulsing();

      _this.setState({
        isOpen: true
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handlePopupClose", function () {
      // console.log("CookieKit#handlePopupClose");
      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
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handlePopupLogin", function () {
      // console.log("CookieKit#handlePopupLogin");
      _this.clearTimers();

      _this.setState({
        isOpen: false
      }); // HACK: Because `startPulsing` depends on `props.consentsSource` and it
      // could be changed in `onAuthentication` 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(_this), "handlePopupSubmit", function (nextConsentSettings, doNotSellConsent, fingerprintConsent) {
      // console.log("CookieKit#handlePopupSubmit");
      // console.dir(nextConsentSettings);
      var _this$props2 = _this.props,
          hideOnComplete = _this$props2.hideOnComplete,
          onCookieConsentsChange = _this$props2.onCookieConsentsChange;
      onCookieConsentsChange(nextConsentSettings, doNotSellConsent, fingerprintConsent);

      _this.clearTimers();

      _this.setState({
        isOpen: false
      });

      if (hideOnComplete) {
        _this.setState({
          pulsing: false,
          transparent: true
        });

        _this.timers.push(setTimeout(function () {
          _this.setState({
            isShown: false
          });
        }, 1000));
      } else {
        // HACK: Because `startPulsing` depends on `props.consentsSource` and it
        // is changed in `onCookieConsentsChange` 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);
      }
    });

    var isOpen = props.consentsSource === "unknown";
    _this.state = {
      animated: true,
      hasClosed: false,
      isOpen: false,
      isShown: true,
      pulsing: false,
      transparent: false
    };
    _this.timers = [];

    if (props.isAnimated) {
      _this.startPulsing();
    }

    if (!isOpen) {
      _this.startDismissTimer();
    }

    return _this;
  } // componentDidMount() {
  //   console.log("CookieKit#componentDidMount");
  //   console.dir(this.props);
  //   console.dir(this.state);
  // }
  // componentDidUpdate(prevProps, prevState) {
  //   console.log("CookieKit#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);
  //   }
  // }


  _createClass(CookieKit, [{
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.timers.forEach(function (timer) {
        return clearTimeout(timer);
      });
    }
  }, {
    key: "clearTimers",
    value: function clearTimers() {
      // console.log("CookieKit#clearTimers");
      this.timers.forEach(function (timer) {
        return clearTimeout(timer);
      });
      this.timers = [];
    }
  }, {
    key: "startPulsing",
    value: function startPulsing() {
      var _this2 = this;

      // console.log("CookieKit#startPulsing");
      var _this$props3 = this.props,
          consentsSource = _this$props3.consentsSource,
          hideOnComplete = _this$props3.hideOnComplete;
      var animation = animations[consentsSource];

      if (animation && animation !== "default") {
        this.timers.push(setTimeout(function () {
          return _this2.setState({
            animated: true,
            pulsing: true
          });
        }, 500));
        this.timers.push(setTimeout(function () {
          return _this2.stopPulsing();
        }, 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));
        }
      }
    }
  }, {
    key: "stopPulsing",
    value: function stopPulsing() {
      // console.log("CookieKit#stopPulsing");
      this.setState({
        pulsing: false
      });
    }
  }, {
    key: "startDismissTimer",
    value: function startDismissTimer() {
      var _this3 = this;

      // console.log("CookieKit#startDismissTimer");
      var expirationTime = this.props.expirationTime;
      var timeOut = expirationTime;

      if (timeOut && timeOut > 0) {
        this.timers.push(setTimeout(function () {
          _this3.setState({
            transparent: true
          });
        }, timeOut * 1000));
        this.timers.push(setTimeout(function () {
          _this3.setState({
            isShown: false
          });
        }, timeOut * 1000 + 1000));
      }
    }
  }, {
    key: "render",
    value: function render() {
      // console.log("CookieKit#render");
      var _this$props4 = this.props,
          campaignReference = _this$props4.campaignReference,
          companyLogo = _this$props4.companyLogo,
          consentsSource = _this$props4.consentsSource,
          cookieConsents = _this$props4.cookieConsents,
          doNotSellConsent = _this$props4.doNotSellConsent,
          display = _this$props4.display,
          displayDoNotSell = _this$props4.displayDoNotSell,
          displayFingerprint = _this$props4.displayFingerprint,
          fingerprintConsent = _this$props4.fingerprintConsent,
          hideBrandTag = _this$props4.hideBrandTag,
          isAnimated = _this$props4.isAnimated,
          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,
          theme = _this$props4.theme;
      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,
          transparent = _this$state.transparent;
      var animation = animated && isAnimated ? animations[consentsSource] : animations.unknown;
      var renderPopup = isOpen || consentsSource === "unknown" && !hasClosed;
      var renderResetButton = testMode;
      return isShown && /*#__PURE__*/React.createElement("div", {
        className: cx(BLOCK, position, {
          transparent: transparent
        }, {
          scroll: isOpen
        }, {
          "d-none": !display
        })
      }, renderPopup ? /*#__PURE__*/React.createElement(CookieKitPopup, {
        companyLogo: companyLogo,
        cookieConsents: cookieConsents,
        displayDoNotSell: displayDoNotSell,
        displayFingerprint: displayFingerprint,
        doNotSellConsent: doNotSellConsent,
        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,
        theme: theme
      }) : /*#__PURE__*/React.createElement("button", {
        type: "button",
        className: "".concat(BLOCK, "__button ").concat(BLOCK, "__cookie-button"),
        onClick: this.handleOpen
      }, /*#__PURE__*/React.createElement("div", {
        className: cx("".concat(BLOCK, "__cookie-icon"), "".concat(BLOCK, "__cookie-icon--").concat(animation), _defineProperty({}, "".concat(BLOCK, "__pulsing"), pulsing))
      })), renderResetButton && /*#__PURE__*/React.createElement(ResetButton, null));
    }
  }]);

  return CookieKit;
}(React.PureComponent);

_defineProperty(CookieKit, "propTypes", {
  campaignReference: PropTypes.string,
  companyLogo: PropTypes.string,
  consentsSource: PropTypes.oneOf(consentsSources).isRequired,
  consentStatus: PropTypes.oneOf(Object.values(consentStatuses)).isRequired,
  cookieConsents: PropTypes.arrayOf(CookieConsentShape.isRequired).isRequired,
  display: PropTypes.bool,
  displayDoNotSell: PropTypes.bool,
  displayFingerprint: PropTypes.bool,
  doNotSellConsent: PropTypes.bool,
  expirationTime: PropTypes.number,
  fingerprintConsent: PropTypes.bool,
  hideBrandTag: PropTypes.bool.isRequired,
  hideOnComplete: PropTypes.bool.isRequired,
  isAnimated: PropTypes.bool,
  loginStatus: PropTypes.bool,
  onConsentStatusChange: PropTypes.func.isRequired,
  onCookieConsentsChange: PropTypes.func.isRequired,
  position: PropTypes.oneOf(positions).isRequired,
  privacyUrl: PropTypes.string.isRequired,
  requestDataTypes: PropTypes.arrayOf(PropTypes.oneOf(cookieTypes).isRequired).isRequired,
  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(CookieKit, "defaultProps", {
  campaignReference: null,
  companyLogo: null,
  display: true,
  displayDoNotSell: false,
  displayFingerprint: false,
  doNotSellConsent: false,
  expirationTime: 0,
  fingerprintConsent: false,
  isAnimated: true,
  loginStatus: false,
  testMode: false,
  theme: "popup"
});

export { CookieKit as default };