@pactsafe/pactsafe-react-sdk/lib/PSClickWrap.js

PactSafe React SDK - React SDK for easy Clickwrap/Browsewrap implementation leveraging PactSafe's JavaScript API

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');

var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);

var _v = require('uuid/v4');

var _v2 = _interopRequireDefault(_v);

var _PSSnippet = require('./PSSnippet');

var _PSSnippet2 = _interopRequireDefault(_PSSnippet);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* global _ps */


var PSClickWrap = function (_React$Component) {
  _inherits(PSClickWrap, _React$Component);

  function PSClickWrap(props) {
    _classCallCheck(this, PSClickWrap);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.createClickWrap = _this.createClickWrap.bind(_this);
    _this.state = {
      clickwrapGroupKey: null,
      dynamicGroup: false
    };
    _this.propsEventMap = {
      onAll: 'all',
      onSent: 'sent',
      onRetrieved: 'retrieved',
      onSet: 'set',
      onSetSignerId: 'set:signer_id',
      onValid: 'valid',
      onInvalid: 'invalid',
      onRendered: 'rendered',
      onDisplayed: 'displayed',
      onScrolledContract: 'scrolled:contract',
      onScrolled: 'scrolled',
      onError: 'error'
    };
    var _this$props = _this.props,
        psScriptUrl = _this$props.psScriptUrl,
        backupScriptURL = _this$props.backupScriptURL,
        accessId = _this$props.accessId,
        testMode = _this$props.testMode,
        disableSending = _this$props.disableSending,
        dynamic = _this$props.dynamic,
        signerId = _this$props.signerId,
        debug = _this$props.debug;

    if (!_PSSnippet2.default.isSnippetLoaded(psScriptUrl, backupScriptURL)) {
      _PSSnippet2.default.injectSnippet(psScriptUrl, backupScriptURL);
    }
    _ps('create', accessId, {
      test_mode: testMode,
      disable_sending: disableSending,
      dynamic: dynamic,
      signer_id: signerId
    });
    if (debug) {
      _ps.debug = true;
    }
    return _this;
  }

  PSClickWrap.prototype.componentDidMount = function componentDidMount() {
    this.createClickWrap();
  };

  PSClickWrap.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
    var _props = this.props,
        clickWrapStyle = _props.clickWrapStyle,
        renderData = _props.renderData,
        filter = _props.filter,
        groupKey = _props.groupKey;
    var _state = this.state,
        clickwrapGroupKey = _state.clickwrapGroupKey,
        dynamicGroup = _state.dynamicGroup;

    if (clickWrapStyle !== prevProps.clickWrapStyle && !dynamicGroup) {
      _ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
      _ps.getByKey(clickwrapGroupKey).retrieveHTML();
    }
    if (renderData !== prevProps.renderData) {
      _ps(clickwrapGroupKey + ':retrieveHTML', renderData);
    }
    if (clickWrapStyle !== prevProps.clickWrapStyle && dynamicGroup) {
      this.createClickWrap();
    }
    if (filter !== prevProps.filter && dynamicGroup) {
      this.createClickWrap();
    }
    if (groupKey !== prevProps.groupKey && !dynamicGroup) {
      this.createClickWrap();
      _ps.getByKey(clickwrapGroupKey).retrieveHTML();
    }
  };

  PSClickWrap.prototype.componentWillUnmount = function componentWillUnmount() {
    var groupKey = this.props.groupKey;

    if (_ps && _ps.getByKey(groupKey) && _ps.getByKey(groupKey).rendered) {
      _ps.getByKey(groupKey).rendered = false;
    }
    this.unregisterEventListeners();
  };

  PSClickWrap.prototype.registerEventListener = function registerEventListener(eventProp, groupKey) {
    var _this2 = this;

    var eventCallbackFn = function eventCallbackFn() {
      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      var shouldFireListener = false;
      args.forEach(function (arg) {
        // We need to check the context variable and see if it matches the groupKey, if it does -> fire the event (context argument position varies)
        if (arg.get && arg.get('key') && arg.get('key') === groupKey) {
          shouldFireListener = true;
          // Else we should check if the context is for the entire site, and as such the context variable is a Site object.
        } else if (arg.toString() === '[object Site]') {
          shouldFireListener = true;
        }
      });
      if (shouldFireListener) {
        var _props2;

        (_props2 = _this2.props)[eventProp].apply(_props2, args);
      }
    };
    // In order to handle unregistration of event listeners, we override the toString function to identify the
    // function by a UUID rather than the default toString of a function.
    var newEventListenerID = (0, _v2.default)();
    eventCallbackFn.toString = function () {
      return newEventListenerID;
    };
    _ps.on(this.propsEventMap[eventProp], eventCallbackFn);
    return eventCallbackFn.toString();
  };

  PSClickWrap.prototype.registerEventListeners = function registerEventListeners(groupKey) {
    var _this3 = this;

    var eventListeners = {};
    Object.keys(this.propsEventMap).forEach(function (eventProp) {
      if (_this3.props[eventProp]) {
        eventListeners[_this3.propsEventMap[eventProp]] = _this3.registerEventListener(eventProp, groupKey);
      }
    });
    // Store event listeners in state so we can unregister them later on unmount
    this.setState({ eventListeners: eventListeners });
  };

  PSClickWrap.prototype.unregisterEventListeners = function unregisterEventListeners() {
    var _this4 = this;

    Object.keys(this.state.eventListeners).forEach(function (event) {
      var eventUUID = _this4.state.eventListeners[event];
      // In order to unregister the event, we must create a fake function (typeof passed to _ps.off must be a function),
      // that returns the UUID we want to unregister.
      var fakeEventListener = function fakeEventListener() {
        return eventUUID;
      };
      fakeEventListener.toString = function () {
        return eventUUID;
      };
      _ps.off(event, fakeEventListener);
    });
  };

  PSClickWrap.prototype.createClickWrap = function createClickWrap() {
    var _this5 = this;

    var _props3 = this.props,
        filter = _props3.filter,
        containerId = _props3.containerId,
        signerIdSelector = _props3.signerIdSelector,
        clickWrapStyle = _props3.clickWrapStyle,
        displayAll = _props3.displayAll,
        renderData = _props3.renderData,
        displayImmediately = _props3.displayImmediately,
        forceScroll = _props3.forceScroll,
        groupKey = _props3.groupKey,
        confirmationEmail = _props3.confirmationEmail;

    var options = { filter: filter, container_selector: containerId, confirmation_email: confirmationEmail, signer_id_selector: signerIdSelector, style: clickWrapStyle, display_all: displayAll, render_data: renderData, auto_run: displayImmediately, force_scroll: forceScroll };

    if (groupKey) this.setState({ clickwrapGroupKey: groupKey, dynamicGroup: false });
    var isDynamic = !groupKey;

    var eventCallback = function eventCallback(err, group) {
      if (group) {
        var key = groupKey || group.get('key');

        var state = { clickwrapGroupKey: key };
        if (isDynamic) state.dynamicGroup = true;
        _this5.setState(state);

        if (!isDynamic) group.render();
        _this5.registerEventListeners(key);
      }
    };

    if (groupKey) _ps('load', groupKey, _extends({}, options, { event_callback: eventCallback }));else _ps('load', _extends({}, options, { event_callback: eventCallback }));
  };

  PSClickWrap.prototype.render = function render() {
    var containerId = this.props.containerId;

    return _react2.default.createElement('div', { id: containerId });
  };

  return PSClickWrap;
}(_react2.default.Component);

PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE = 'PSClickWrap Error: You must provide either a groupKey or filter prop in order to use the PactSafe ClickWrap component!';
PSClickWrap.MUST_PROVIDE_RENDER_DATA_ERROR_MESSAGE = 'PSClickWrap Error: You must provide a renderData prop when passing down the dynamic prop';
PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR = 'PSClickWrap Error: You must provide either a signer ID or a signer ID selector';

PSClickWrap.propTypes = process.env.NODE_ENV !== "production" ? {
  accessId: _propTypes2.default.string.isRequired,
  clickWrapStyle: _propTypes2.default.oneOf(['full', 'scroll', 'checkbox', 'combined', 'embedded']),
  confirmationEmail: _propTypes2.default.bool,
  disableSending: _propTypes2.default.bool,
  displayAll: _propTypes2.default.bool,
  displayImmediately: _propTypes2.default.bool,
  dynamic: _propTypes2.default.bool,
  containerId: _propTypes2.default.string,
  filter: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
    return !props.hasOwnProperty('groupKey');
  }, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
  forceScroll: _propTypes2.default.bool,
  groupKey: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
    return !props.hasOwnProperty('filter');
  }, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
  psScriptUrl: _propTypes2.default.string,
  backupScriptURL: _propTypes2.default.string,
  renderData: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.object, function (props) {
    return props.hasOwnProperty('dynamic') && props.dynamic === true;
  }, PSClickWrap.MUST_PROVIDE_RENDER_DATA_ERROR_MESSAGE),
  signerIdSelector: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
    return !props.hasOwnProperty('signerId');
  }, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
  signerId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
    return !props.hasOwnProperty('signerIdSelector');
  }, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
  testMode: _propTypes2.default.bool,
  debug: _propTypes2.default.bool,
  onAll: _propTypes2.default.func,
  onSent: _propTypes2.default.func,
  onRetrieved: _propTypes2.default.func,
  onSet: _propTypes2.default.func,
  onSetSignerId: _propTypes2.default.func,
  onValid: _propTypes2.default.func,
  onInvalid: _propTypes2.default.func,
  onRendered: _propTypes2.default.func,
  onDisplayed: _propTypes2.default.func,
  onScrolledContract: _propTypes2.default.func,
  onScrolled: _propTypes2.default.func,
  onError: _propTypes2.default.func
} : {};

PSClickWrap.defaultProps = {
  psScriptUrl: '//vault.pactsafe.io/ps.min.js',
  backupScriptURL: '//d3l1mqnl5xpsuc.cloudfront.net/ps.min.js',
  containerId: 'ps-clickwrap',
  displayImmediately: true,
  disableSending: false,
  displayAll: true,
  dynamic: false,
  testMode: false
};

exports.default = PSClickWrap;
module.exports = exports['default'];