react-zapier-form/dist/index.js

A React component for creating forms that post to Zapier's API. It posts directly to a [catch hook](https://zapier.com/apps/webhook/integrations), so you don't have to use another third party service to collect data from forms on your website.

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require('babel-runtime/helpers/asyncToGenerator');

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _isomorphicFetch = require('isomorphic-fetch');

var _isomorphicFetch2 = _interopRequireDefault(_isomorphicFetch);

var _noop = require('./noop');

var _noop2 = _interopRequireDefault(_noop);

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

var ZapierForm = function (_React$Component) {
	(0, _inherits3.default)(ZapierForm, _React$Component);

	function ZapierForm(props) {
		(0, _classCallCheck3.default)(this, ZapierForm);

		var _this = (0, _possibleConstructorReturn3.default)(this, (ZapierForm.__proto__ || Object.getPrototypeOf(ZapierForm)).call(this, props));

		_this.state = {
			error: false,
			loading: false,
			success: false
		};
		_this.onSubmit = _this.onSubmit.bind(_this);
		_this.onSuccess = _this.onSuccess.bind(_this);
		_this.onError = _this.onError.bind(_this);
		return _this;
	}

	(0, _createClass3.default)(ZapierForm, [{
		key: 'onSubmit',
		value: function () {
			var _ref = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee(e) {
				var data, notValid, res, body;
				return _regenerator2.default.wrap(function _callee$(_context) {
					while (1) {
						switch (_context.prev = _context.next) {
							case 0:
								e.preventDefault();

								if (!(!this.props.canSubmit || this.honeypot.value)) {
									_context.next = 3;
									break;
								}

								return _context.abrupt('return');

							case 3:

								this.setState({
									loading: true,
									error: false,
									success: false
								});

								data = new FormData(this.form);
								_context.next = 7;
								return this.props.validate(data);

							case 7:
								notValid = _context.sent;

								if (!notValid) {
									_context.next = 10;
									break;
								}

								return _context.abrupt('return', this.setState({
									loading: false,
									error: false,
									success: false
								}));

							case 10:

								this.props.onSubmit(data);

								res = void 0;
								body = void 0;
								_context.prev = 13;
								_context.next = 16;
								return (0, _isomorphicFetch2.default)(this.props.action, {
									method: 'post',
									body: data
								});

							case 16:
								res = _context.sent;
								_context.next = 22;
								break;

							case 19:
								_context.prev = 19;
								_context.t0 = _context['catch'](13);
								return _context.abrupt('return', this.onError('Connection error'));

							case 22:
								if (!(res.status !== 200)) {
									_context.next = 24;
									break;
								}

								return _context.abrupt('return', this.onError('Error code ' + res.statusText));

							case 24:
								_context.prev = 24;
								_context.next = 27;
								return res.json();

							case 27:
								body = _context.sent;
								_context.next = 33;
								break;

							case 30:
								_context.prev = 30;
								_context.t1 = _context['catch'](24);
								return _context.abrupt('return', this.onError('Error parsing JSON'));

							case 33:
								if (!(body.status !== 'success')) {
									_context.next = 35;
									break;
								}

								return _context.abrupt('return', this.onError(body));

							case 35:
								this.onSuccess(res);

							case 36:
							case 'end':
								return _context.stop();
						}
					}
				}, _callee, this, [[13, 19], [24, 30]]);
			}));

			function onSubmit(_x) {
				return _ref.apply(this, arguments);
			}

			return onSubmit;
		}()
	}, {
		key: 'onSuccess',
		value: function onSuccess(body) {
			this.props.onSuccess(body);
			this.setState({
				loading: false,
				success: body,
				error: false
			});
		}
	}, {
		key: 'onError',
		value: function onError(err) {
			console.error(err);
			this.props.onError(err);
			return this.setState({
				loading: false,
				error: err,
				success: false
			});
		}
	}, {
		key: 'render',
		value: function render() {
			var _this2 = this;

			return _react2.default.createElement(
				'form',
				(0, _extends3.default)({
					ref: function ref(form) {
						return _this2.form = form;
					},
					onSubmit: this.onSubmit
				}, this.formProps),
				_react2.default.createElement(
					'div',
					{ style: { display: 'none' } },
					_react2.default.createElement('input', {
						type: 'text',
						name: this.props.honeyPotName,
						ref: function ref(honeypot) {
							return _this2.honeypot = honeypot;
						}
					})
				),
				this.props.children(this.state)
			);
		}
	}]);
	return ZapierForm;
}(_react2.default.Component);

ZapierForm.defaultProps = {
	canSubmit: true,
	honeyPotName: 'p_number',
	onSubmit: _noop2.default,
	onSuccess: _noop2.default,
	onError: _noop2.default,
	validate: _noop2.default
};

exports.default = ZapierForm;
//# sourceMappingURL=index.js.map