@pactsafe/pactsafe-react-sdk
Version:
Ironclad Clickwrap React SDK - SDK for easy Ironclad Clickwrap implementations leveraging the Ironclad JavaScript Library & API
368 lines (367 loc) • 17.2 kB
JavaScript
"use strict";
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactProptypeConditionalRequire = _interopRequireDefault(require("react-proptype-conditional-require"));
var _uuid = require("uuid");
var _lodash = _interopRequireDefault(require("lodash.isequal"));
var _PSSnippet = _interopRequireDefault(require("./PSSnippet"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /* global _ps */
var PSClickWrap = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(PSClickWrap, _React$Component);
function PSClickWrap(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_defineProperty(_assertThisInitialized(_this), "_isMounted", false);
_this.createClickWrap = _this.createClickWrap.bind(_assertThisInitialized(_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',
onChecked: 'checked',
onUnchecked: 'unchecked',
onRendered: 'rendered',
onDisplayed: 'displayed',
onScrolledContract: 'scrolled:contract',
onScrolled: 'scrolled',
onError: 'error'
};
var _this$props = _this.props,
accessId = _this$props.accessId,
backupScriptURL = _this$props.backupScriptURL,
debug = _this$props.debug,
disableSending = _this$props.disableSending,
dynamic = _this$props.dynamic,
injectSnippetOnly = _this$props.injectSnippetOnly,
oversized = _this$props.oversized,
psScriptUrl = _this$props.psScriptUrl,
signerId = _this$props.signerId,
testMode = _this$props.testMode;
if (!_PSSnippet["default"].isSnippetLoaded(psScriptUrl, backupScriptURL)) {
_PSSnippet["default"].injectSnippet(psScriptUrl, backupScriptURL);
}
if (debug) {
_ps.debug = true;
}
if (injectSnippetOnly) return _assertThisInitialized(_this);
_ps('create', accessId, {
test_mode: testMode,
disable_sending: disableSending,
dynamic: dynamic,
signer_id: signerId,
oversized: oversized
});
_ps('set', 'client_library', 'react-sdk');
_ps('set', 'client_version', "2.15.0");
return _this;
}
var _proto = PSClickWrap.prototype;
_proto.componentDidMount = function componentDidMount() {
var injectSnippetOnly = this.props.injectSnippetOnly;
this._isMounted = true;
if (injectSnippetOnly) return;
this.createClickWrap();
};
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var _this$props2 = this.props,
acceptanceLanguage = _this$props2.acceptanceLanguage,
clickWrapStyle = _this$props2.clickWrapStyle,
customData = _this$props2.customData,
filter = _this$props2.filter,
groupKey = _this$props2.groupKey,
injectSnippetOnly = _this$props2.injectSnippetOnly,
renderData = _this$props2.renderData,
signerId = _this$props2.signerId,
snapshotLocation = _this$props2.snapshotLocation;
var _this$state = this.state,
clickwrapGroupKey = _this$state.clickwrapGroupKey,
dynamicGroup = _this$state.dynamicGroup;
var _psLoadedValidGroup = _ps && _ps.getByKey && typeof _ps.getByKey === 'function' && clickwrapGroupKey && _ps.getByKey(clickwrapGroupKey);
if (injectSnippetOnly) return;
if (clickWrapStyle !== prevProps.clickWrapStyle && !dynamicGroup && _psLoadedValidGroup) {
_ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
_ps.getByKey(clickwrapGroupKey).retrieveHTML();
}
if (!(0, _lodash["default"])(customData, prevProps.customData)) {
_ps('set', 'custom_data', customData);
}
if (acceptanceLanguage !== prevProps.acceptanceLanguage) {
_ps('set', 'acceptance_language', acceptanceLanguage);
}
if (!(0, _lodash["default"])(renderData, prevProps.renderData)) {
if (clickWrapStyle && _psLoadedValidGroup) {
_ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
}
_ps(clickwrapGroupKey + ":retrieveHTML", renderData);
}
if (signerId !== prevProps.signerId) {
if (clickWrapStyle && _psLoadedValidGroup) {
_ps.getByKey(clickwrapGroupKey).site.set('style', clickWrapStyle);
}
_ps('set', 'signer_id', signerId);
}
if (snapshotLocation !== prevProps.snapshotLocation) {
_ps('set', 'snapshot_location', snapshotLocation);
}
if (clickWrapStyle !== prevProps.clickWrapStyle && dynamicGroup) {
this.createClickWrap();
}
if (filter !== prevProps.filter) {
this.createClickWrap();
}
if (groupKey !== prevProps.groupKey && !dynamicGroup) {
this.createClickWrap();
if (_psLoadedValidGroup) _ps.getByKey(clickwrapGroupKey).retrieveHTML();
}
};
_proto.componentWillUnmount = function componentWillUnmount() {
this._isMounted = false;
var _this$props3 = this.props,
injectSnippetOnly = _this$props3.injectSnippetOnly,
groupKey = _this$props3.groupKey;
if (injectSnippetOnly) return;
if (_ps && _ps.getByKey && typeof _ps.getByKey === 'function' && _ps.getByKey(groupKey)) {
if (_ps.getByKey(groupKey).rendered) {
_ps.getByKey(groupKey).rendered = false;
}
_ps.getByKey(groupKey).resetData();
}
this.unregisterEventListeners();
};
_proto.registerEventListener = function registerEventListener(eventProp, groupKey) {
var _this2 = this;
var eventCallbackFn = function eventCallbackFn() {
var shouldFireListener = false;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
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 && 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 && arg.toString() === '[object Site]') {
shouldFireListener = true;
}
});
if (shouldFireListener) {
var _this2$props;
(_this2$props = _this2.props)[eventProp].apply(_this2$props, 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, _uuid.v4)();
eventCallbackFn.toString = function () {
return newEventListenerID;
};
_ps.on(this.propsEventMap[eventProp], eventCallbackFn);
return eventCallbackFn.toString();
};
_proto.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
if (this._isMounted) {
this.setState({
eventListeners: eventListeners
});
}
};
_proto.unregisterEventListeners = function unregisterEventListeners() {
var _this4 = this;
if (this.state.eventListeners) {
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);
});
}
};
_proto.createClickWrap = function createClickWrap() {
var _this5 = this;
var _this$props4 = this.props,
acceptanceLanguage = _this$props4.acceptanceLanguage,
clickWrapStyle = _this$props4.clickWrapStyle,
customData = _this$props4.customData,
confirmationEmail = _this$props4.confirmationEmail,
confirmationEmailSubject = _this$props4.confirmationEmailSubject,
containerId = _this$props4.containerId,
displayAll = _this$props4.displayAll,
displayImmediately = _this$props4.displayImmediately,
filter = _this$props4.filter,
forceScroll = _this$props4.forceScroll,
groupKey = _this$props4.groupKey,
injectSnippetOnly = _this$props4.injectSnippetOnly,
renderData = _this$props4.renderData,
signerIdSelector = _this$props4.signerIdSelector,
snapshotLocation = _this$props4.snapshotLocation,
allowDisagreed = _this$props4.allowDisagreed;
var options = _extends({}, allowDisagreed !== undefined && {
allow_disagreed: allowDisagreed
}, acceptanceLanguage !== undefined && {
acceptance_language: acceptanceLanguage
}, {
auto_run: displayImmediately
}, confirmationEmail !== undefined && {
confirmation_email: confirmationEmail
}, confirmationEmailSubject !== undefined && {
confirmation_email_subject: confirmationEmailSubject
}, {
container_selector: containerId,
display_all: displayAll
}, filter !== undefined && {
filter: filter
}, forceScroll !== undefined && {
force_scroll: forceScroll
}, renderData !== undefined && {
render_data: renderData
}, signerIdSelector !== undefined && {
signer_id_selector: signerIdSelector
}, clickWrapStyle !== undefined && {
style: clickWrapStyle
});
if (injectSnippetOnly) return;
if (groupKey && this._isMounted) {
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;
if (_this5._isMounted) {
_this5.setState(state);
}
if (!isDynamic) group.render();
_this5.registerEventListeners(key);
}
};
if (customData) {
_ps('set', 'custom_data', customData);
}
if (snapshotLocation) {
_ps('set', 'snapshot_location', snapshotLocation);
}
if (groupKey) {
_ps('load', groupKey, _extends({}, options, {
event_callback: eventCallback
}));
} else _ps('load', _extends({}, options, {
event_callback: eventCallback
}));
};
_proto.render = function render() {
var containerId = this.props.containerId;
return /*#__PURE__*/_react["default"].createElement("div", {
id: containerId
});
};
return PSClickWrap;
}(_react["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.MUST_SET_ALLOW_DISAGREED = 'PSClickWrap Error: You must set allowDisagreed as true to make onInvalid work';
PSClickWrap.propTypes = process.env.NODE_ENV !== "production" ? {
acceptanceLanguage: _propTypes["default"].string,
accessId: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].string, function (props) {
return !props.hasOwnProperty('injectSnippetOnly');
}),
clickWrapStyle: _propTypes["default"].oneOf(['full', 'scroll', 'checkbox', 'combined', 'embedded']),
confirmationEmail: _propTypes["default"].bool,
confirmationEmailSubject: _propTypes["default"].string,
customData: _propTypes["default"].object,
disableSending: _propTypes["default"].bool,
displayAll: _propTypes["default"].bool,
displayImmediately: _propTypes["default"].bool,
dynamic: _propTypes["default"].bool,
containerId: _propTypes["default"].string,
filter: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].string, function (props) {
return !props.hasOwnProperty('groupKey') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
forceScroll: _propTypes["default"].bool,
groupKey: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].string, function (props) {
return !props.hasOwnProperty('filter') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
injectSnippetOnly: _propTypes["default"].bool,
psScriptUrl: _propTypes["default"].string,
backupScriptURL: _propTypes["default"].string,
oversized: _propTypes["default"].bool,
renderData: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].object, function (props) {
return props.hasOwnProperty('dynamic') && props.dynamic === true;
}, PSClickWrap.MUST_PROVIDE_RENDER_DATA_ERROR_MESSAGE),
signerIdSelector: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].string, function (props) {
return !props.hasOwnProperty('signerId') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
signerId: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].string, function (props) {
return !props.hasOwnProperty('signerIdSelector') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
snapshotLocation: _propTypes["default"].string,
testMode: _propTypes["default"].bool,
allowDisagreed: (0, _reactProptypeConditionalRequire["default"])(_propTypes["default"].bool, function (props) {
return props.hasOwnProperty('onInvalid');
}, PSClickWrap.MUST_SET_ALLOW_DISAGREED),
debug: _propTypes["default"].bool,
onAll: _propTypes["default"].func,
onSent: _propTypes["default"].func,
onRetrieved: _propTypes["default"].func,
onSet: _propTypes["default"].func,
onSetSignerId: _propTypes["default"].func,
onValid: _propTypes["default"].func,
onInvalid: _propTypes["default"].func,
onChecked: _propTypes["default"].func,
onUnchecked: _propTypes["default"].func,
onRendered: _propTypes["default"].func,
onDisplayed: _propTypes["default"].func,
onScrolledContract: _propTypes["default"].func,
onScrolled: _propTypes["default"].func,
onError: _propTypes["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,
oversized: false
};
var _default = exports["default"] = PSClickWrap;
module.exports = exports.default;