@stokr/components-library/dist/components/KYCFlow/Terms.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _formik = require("formik");
var _reactTippy = require("react-tippy");
var _Text = _interopRequireDefault(require("../Text/Text.styles"));
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
var _Form = require("../Form/Form");
var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _styles = require("./_styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class KYCTerms extends _react.PureComponent {
  constructor() {
    super(...arguments);
    _defineProperty(this, "state", {
      popupOpen: false
    });
    _defineProperty(this, "handlePopup", isOpen => {
      const {
        formik
      } = this.props;
      const {
        validateField,
        values
      } = formik;
      validateField('notUsResident');
      validateField('termsAccepted');
      const buttonDisabled = !values.termsAccepted || !values.notUsResident;
      this.setState({
        popupOpen: buttonDisabled ? isOpen : false
      });
    });
  }
  render() {
    const {
      changeStep,
      formik
    } = this.props;
    const {
      values,
      errors
    } = formik;
    const {
      popupOpen
    } = this.state;
    const buttonDisabled = !values.termsAccepted || !values.notUsResident;
    return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement(_styles.HeaderTitle, null, "Terms and conditions"), /*#__PURE__*/_react.default.createElement(_styles.HeaderButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
      open: popupOpen,
      position: "bottom",
      title: "Please correct all the required fields",
      theme: "light",
      arrow: true,
      duration: 200
    }, /*#__PURE__*/_react.default.createElement("div", {
      onMouseEnter: () => this.handlePopup(true),
      onMouseLeave: () => this.handlePopup(false)
    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
      onClick: () => changeStep('kycDocumentUpload', 1, 0),
      disabled: buttonDisabled
    }, "Next"))))), /*#__PURE__*/_react.default.createElement(_styles.Body, {
      noHorizontalPadding: true
    }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
      noPaddingVertical: true
    }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "In ac dui quis mi consectetuer lacinia. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero."), /*#__PURE__*/_react.default.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus."), /*#__PURE__*/_react.default.createElement("p", null, "Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero.")))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
      noPaddingBottom: true
    }, /*#__PURE__*/_react.default.createElement(_styles.BottomWrapper, null, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_formik.Field, {
      name: "termsAccepted",
      validate: () => (0, _Form.validate)('termsAccepted', formik)
    }, _ref => {
      let {
        field
      } = _ref;
      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({
        id: "terms-accepted",
        text: "I accept the full Terms and Conditions",
        checked: field.value,
        error: !!errors[field.name]
      }, field, {
        value: "yes"
      })), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
        show: errors[field.name]
      }, errors[field.name]));
    })), /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_formik.Field, {
      name: "notUsResident",
      validate: () => (0, _Form.validate)('notUsResident', formik)
    }, _ref2 => {
      let {
        field
      } = _ref2;
      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, _extends({
        id: "not-us-resident",
        text: "I am not a US resident",
        checked: field.value,
        error: !!errors[field.name]
      }, field, {
        value: "yes"
      })), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
        show: errors[field.name]
      }, errors[field.name]));
    }))))));
  }
}
KYCTerms.propTypes = {
  changeStep: _propTypes.default.func.isRequired,
  formik: _propTypes.default.instanceOf(Object).isRequired
};
var _default = exports.default = (0, _formik.connect)(KYCTerms);