@pactsafe/pactsafe-react-sdk
Version:
Ironclad Clickwrap React SDK - SDK for easy Ironclad Clickwrap implementations leveraging the Ironclad JavaScript Library & API
363 lines • 16 kB
JavaScript
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 */
import React from 'react';
import PropTypes from 'prop-types';
import isRequiredIf from 'react-proptype-conditional-require';
import { v4 as uuidv4 } from 'uuid';
import isEqual from 'lodash.isequal';
import PSSnippet from './PSSnippet';
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.isSnippetLoaded(psScriptUrl, backupScriptURL)) {
PSSnippet.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 (!isEqual(customData, prevProps.customData)) {
_ps('set', 'custom_data', customData);
}
if (acceptanceLanguage !== prevProps.acceptanceLanguage) {
_ps('set', 'acceptance_language', acceptanceLanguage);
}
if (!isEqual(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 = uuidv4();
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.createElement("div", {
id: containerId
});
};
return PSClickWrap;
}(React.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.string,
accessId: isRequiredIf(PropTypes.string, function (props) {
return !props.hasOwnProperty('injectSnippetOnly');
}),
clickWrapStyle: PropTypes.oneOf(['full', 'scroll', 'checkbox', 'combined', 'embedded']),
confirmationEmail: PropTypes.bool,
confirmationEmailSubject: PropTypes.string,
customData: PropTypes.object,
disableSending: PropTypes.bool,
displayAll: PropTypes.bool,
displayImmediately: PropTypes.bool,
dynamic: PropTypes.bool,
containerId: PropTypes.string,
filter: isRequiredIf(PropTypes.string, function (props) {
return !props.hasOwnProperty('groupKey') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
forceScroll: PropTypes.bool,
groupKey: isRequiredIf(PropTypes.string, function (props) {
return !props.hasOwnProperty('filter') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.FILTER_OR_GROUPKEY_REQUIRED_ERROR_MESSAGE),
injectSnippetOnly: PropTypes.bool,
psScriptUrl: PropTypes.string,
backupScriptURL: PropTypes.string,
oversized: PropTypes.bool,
renderData: isRequiredIf(PropTypes.object, function (props) {
return props.hasOwnProperty('dynamic') && props.dynamic === true;
}, PSClickWrap.MUST_PROVIDE_RENDER_DATA_ERROR_MESSAGE),
signerIdSelector: isRequiredIf(PropTypes.string, function (props) {
return !props.hasOwnProperty('signerId') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
signerId: isRequiredIf(PropTypes.string, function (props) {
return !props.hasOwnProperty('signerIdSelector') && !props.hasOwnProperty('injectSnippetOnly');
}, PSClickWrap.MUST_PROVIDE_SIGNER_ID_OR_SIGNER_ID_SELECTOR),
snapshotLocation: PropTypes.string,
testMode: PropTypes.bool,
allowDisagreed: isRequiredIf(PropTypes.bool, function (props) {
return props.hasOwnProperty('onInvalid');
}, PSClickWrap.MUST_SET_ALLOW_DISAGREED),
debug: PropTypes.bool,
onAll: PropTypes.func,
onSent: PropTypes.func,
onRetrieved: PropTypes.func,
onSet: PropTypes.func,
onSetSignerId: PropTypes.func,
onValid: PropTypes.func,
onInvalid: PropTypes.func,
onChecked: PropTypes.func,
onUnchecked: PropTypes.func,
onRendered: PropTypes.func,
onDisplayed: PropTypes.func,
onScrolledContract: PropTypes.func,
onScrolled: PropTypes.func,
onError: PropTypes.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
};
export default PSClickWrap;