@stokr/components-library 0.6.7 → 0.6.9

package/dist/components/KYCFlow/DocumentFileUpload.js

@@ -0,0 +1,276 @@
+"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 _Grid = require("../Grid/Grid.styles");
+var _SvgIcons = require("../SvgIcons");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
+var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
+var _styles = require("./_styles");
+var _DocumentSelect = require("./DocumentSelect");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+var DocumentFileUpload = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DocumentFileUpload, _PureComponent);
+  var _super = _createSuper(DocumentFileUpload);
+  function DocumentFileUpload() {
+    var _this;
+    _classCallCheck(this, DocumentFileUpload);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      popupOpen: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlePopup", function (isOpen) {
+      var formik = _this.props.formik;
+      var values = formik.values;
+      var canGoNext = values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+      _this.validate();
+      _this.setState({
+        popupOpen: !canGoNext ? isOpen : false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFileUpload", function (e, fieldName) {
+      var formik = _this.props.formik;
+      var setFieldValue = formik.setFieldValue;
+      if (!e.target.files) {
+        return;
+      }
+      setFieldValue(fieldName, e.target.files[0]);
+    });
+    _defineProperty(_assertThisInitialized(_this), "removeFile", function (fieldName) {
+      var formik = _this.props.formik;
+      var setFieldValue = formik.setFieldValue;
+      setFieldValue(fieldName, '');
+    });
+    _defineProperty(_assertThisInitialized(_this), "validate", function () {
+      var formik = _this.props.formik;
+      var validationSchema = formik.validationSchema,
+        values = formik.values,
+        setFieldError = formik.setFieldError;
+      var fieldNames = ['passportPicture', 'cardFrontPicture', 'cardBackPicture'];
+      try {
+        validationSchema.validateSync(values, {
+          abortEarly: false
+        });
+      } catch (validateError) {
+        var errors = validateError.inner.filter(function (error) {
+          return fieldNames.includes(error.path);
+        });
+        errors.forEach(function (error) {
+          setFieldError(error.path, error.errors[0]);
+        });
+      }
+    });
+    return _this;
+  }
+  _createClass(DocumentFileUpload, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var setPrevStep = this.props.setPrevStep;
+      setPrevStep('kycDocumentVerificationType');
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        changeStep = _this$props.changeStep,
+        formik = _this$props.formik;
+      var values = formik.values,
+        errors = formik.errors;
+      var popupOpen = this.state.popupOpen;
+      var canGoNext = values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+      return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Verify your identity"), /*#__PURE__*/_react.default.createElement(_styles.HeaderTitle, {
+        withMargin: true
+      }, "Upload Picture")), /*#__PURE__*/_react.default.createElement(_styles.HeaderButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+        open: popupOpen,
+        position: "bottom",
+        title: values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? errors.passportPicture : errors.cardFrontPicture || errors.cardBackPicture,
+        theme: "light",
+        arrow: true,
+        duration: 200
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        onMouseEnter: function onMouseEnter() {
+          return _this2.handlePopup(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this2.handlePopup(false);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: function onClick() {
+          return changeStep('kycDocumentSuccess');
+        },
+        disabled: !canGoNext
+      }, "Next"))))), /*#__PURE__*/_react.default.createElement(_styles.Body, {
+        noVerticalPadding: true
+      }, values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT && /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "PASSPORT"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.PassportSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "Please use a JPG, PNG or PDF image below 2MB (we recommend a 2MP photo or 200-300 dpi scan)"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "passportPicture",
+        validate: this.validate
+      }, function (_ref) {
+        var field = _ref.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value ? /*#__PURE__*/_react.default.createElement(_styles.FileInputList, null, /*#__PURE__*/_react.default.createElement(_styles.FileInputItem, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value.name, /*#__PURE__*/_react.default.createElement(_styles.FileInputRemove, {
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this2.removeFile(field.name);
+          }
+        })))) : /*#__PURE__*/_react.default.createElement(_styles.FileInputWrapper, {
+          center: true,
+          minWidth: "188px"
+        }, "Select Passport", /*#__PURE__*/_react.default.createElement(_styles.FileInput, {
+          name: field.name,
+          accept: "image/png,image/jpeg,application/pdf",
+          onChange: function onChange(e) {
+            return _this2.handleFileUpload(e, field.name);
+          }
+        })));
+      })))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
+        noMobileScroll: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Please select an image file showing the page of the document with your photo on it"), /*#__PURE__*/_react.default.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/_react.default.createElement("p", null, "Be careful that none of your fingers are covering the document, and that all of the document is visible and contrasted against the background."), /*#__PURE__*/_react.default.createElement("p", null, "Ensure that the document is in focus. Avoid bad lighting conditions which can lead to motion blur and image noise."), /*#__PURE__*/_react.default.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/_react.default.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy."))))))), values.documentType === _DocumentSelect.DocumentSelectEnum.TWO_SIDED_DOCUMENT && /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "UPLOAD CARD FRONT"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.DocumentSmallSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        noPaddingHorizontal: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "With your picture"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "cardFrontPicture",
+        validate: this.validate
+      }, function (_ref2) {
+        var field = _ref2.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value ? /*#__PURE__*/_react.default.createElement(_styles.FileInputList, null, /*#__PURE__*/_react.default.createElement(_styles.FileInputItem, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value.name, /*#__PURE__*/_react.default.createElement(_styles.FileInputRemove, {
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this2.removeFile(field.name);
+          }
+        })))) : /*#__PURE__*/_react.default.createElement(_styles.FileInputWrapper, {
+          center: true
+        }, "Select", /*#__PURE__*/_react.default.createElement(_styles.FileInput, {
+          name: field.name,
+          accept: "image/png,image/jpeg,application/pdf",
+          onChange: function onChange(e) {
+            return _this2.handleFileUpload(e, field.name);
+          }
+        })));
+      })))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "UPLOAD CARD BACK"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.DocumentBackSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        noPaddingHorizontal: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "The other one"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "cardBackPicture",
+        validate: this.validate
+      }, function (_ref3) {
+        var field = _ref3.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value ? /*#__PURE__*/_react.default.createElement(_styles.FileInputList, null, /*#__PURE__*/_react.default.createElement(_styles.FileInputItem, null, /*#__PURE__*/_react.default.createElement(_react.Fragment, null, field.value.name, /*#__PURE__*/_react.default.createElement(_styles.FileInputRemove, {
+          onClick: function onClick(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            _this2.removeFile(field.name);
+          }
+        })))) : /*#__PURE__*/_react.default.createElement(_styles.FileInputWrapper, {
+          center: true
+        }, "Select", /*#__PURE__*/_react.default.createElement(_styles.FileInput, {
+          name: field.name,
+          accept: "image/png,image/jpeg,application/pdf",
+          onChange: function onChange(e) {
+            return _this2.handleFileUpload(e, field.name);
+          }
+        })));
+      }))))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
+        noMobileScroll: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Please use a JPG, PNG or PDF image below 2MB (we recommend a 2MP photo or 200-300 dpi scan)"), /*#__PURE__*/_react.default.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/_react.default.createElement("p", null, "Be careful that none of your fingers are covering the document, and that all of the document is visible and contrasted against the background."), /*#__PURE__*/_react.default.createElement("p", null, "Ensure that the document is in focus. Avoid bad lighting conditions which can lead to motion blur and image noise."), /*#__PURE__*/_react.default.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/_react.default.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy.")))))))));
+    }
+  }]);
+  return DocumentFileUpload;
+}(_react.PureComponent);
+DocumentFileUpload.propTypes = {
+  changeStep: _propTypes.default.func.isRequired,
+  setPrevStep: _propTypes.default.func.isRequired,
+  formik: _propTypes.default.instanceOf(Object).isRequired
+};
+var _default = (0, _formik.connect)(DocumentFileUpload);
+exports.default = _default;

package/dist/components/KYCFlow/DocumentScan.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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 _Grid = require("../Grid/Grid.styles");
+var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
+var _SvgIcons = require("../SvgIcons");
+var _styles = require("./_styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var getSectionTitle = function getSectionTitle(scanItem) {
+  switch (scanItem) {
+    case 'passportPicture':
+      return 'Scan identity page';
+    case 'cardFrontPicture':
+      return 'Scan front of ID card';
+    case 'cardBackPicture':
+      return 'Scan back of ID card';
+    default:
+      return '';
+  }
+};
+var DocumentScan = function DocumentScan(_ref) {
+  var changeStep = _ref.changeStep,
+    setPrevStep = _ref.setPrevStep,
+    scanItem = _ref.scanItem,
+    formik = _ref.formik;
+  (0, _react.useEffect)(function () {
+    setPrevStep('kycDocumentScan');
+  }, []);
+  var setFieldValue = formik.setFieldValue;
+  return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "DOCUMENT RECOGNITION"), /*#__PURE__*/_react.default.createElement(_styles.HeaderTitle, {
+    withMargin: true
+  }, getSectionTitle(scanItem)))), /*#__PURE__*/_react.default.createElement(_styles.Body, {
+    noHorizontalPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+    center: true,
+    stretch: true
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 3
+  }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, {
+    faceScan: true
+  }, "RETAKE"), /*#__PURE__*/_react.default.createElement(_styles.RetakeButton, null, /*#__PURE__*/_react.default.createElement(_SvgIcons.RefreshSvg, null)))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 10
+  }, /*#__PURE__*/_react.default.createElement(_styles.Mask, null)), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 3
+  }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, {
+    faceScan: true
+  }, "DONE"), /*#__PURE__*/_react.default.createElement(_styles.DoneButton, {
+    onClick: function onClick() {
+      setFieldValue(scanItem, 'TODO: GET PHOTO FROM CAMERA');
+      changeStep('kycDocumentScan');
+    }
+  }))))));
+};
+DocumentScan.propTypes = {
+  changeStep: _propTypes.default.func.isRequired,
+  setPrevStep: _propTypes.default.func.isRequired,
+  scanItem: _propTypes.default.string.isRequired,
+  formik: _propTypes.default.instanceOf(Object).isRequired
+};
+var _default = (0, _formik.connect)(DocumentScan);
+exports.default = _default;

package/dist/components/KYCFlow/DocumentScanUpload.js

@@ -0,0 +1,258 @@
+"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 _Grid = require("../Grid/Grid.styles");
+var _SvgIcons = require("../SvgIcons");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
+var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
+var _styles = require("./_styles");
+var _DocumentSelect = require("./DocumentSelect");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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); }
+var DocumentScanUpload = /*#__PURE__*/function (_PureComponent) {
+  _inherits(DocumentScanUpload, _PureComponent);
+  var _super = _createSuper(DocumentScanUpload);
+  function DocumentScanUpload() {
+    var _this;
+    _classCallCheck(this, DocumentScanUpload);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      popupOpen: false
+    });
+    _defineProperty(_assertThisInitialized(_this), "handlePopup", function (isOpen) {
+      var formik = _this.props.formik;
+      var values = formik.values;
+      var canGoNext = values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+      _this.validate();
+      _this.setState({
+        popupOpen: !canGoNext ? isOpen : false
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleFileUpload", function (e, fieldName) {
+      var formik = _this.props.formik;
+      var setFieldValue = formik.setFieldValue;
+      if (!e.target.files) {
+        return;
+      }
+      setFieldValue(fieldName, e.target.files[0]);
+    });
+    _defineProperty(_assertThisInitialized(_this), "removeFile", function (fieldName) {
+      var formik = _this.props.formik;
+      var setFieldValue = formik.setFieldValue;
+      setFieldValue(fieldName, '');
+    });
+    _defineProperty(_assertThisInitialized(_this), "validate", function () {
+      var formik = _this.props.formik;
+      var validationSchema = formik.validationSchema,
+        values = formik.values,
+        setFieldError = formik.setFieldError;
+      var fieldNames = ['passportPicture', 'cardFrontPicture', 'cardBackPicture'];
+      try {
+        validationSchema.validateSync(values, {
+          abortEarly: false
+        });
+      } catch (validateError) {
+        var errors = validateError.inner.filter(function (error) {
+          return fieldNames.includes(error.path);
+        });
+        errors.forEach(function (error) {
+          setFieldError(error.path, error.errors[0]);
+        });
+      }
+    });
+    return _this;
+  }
+  _createClass(DocumentScanUpload, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var setPrevStep = this.props.setPrevStep;
+      setPrevStep('kycDocumentVerificationType');
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props = this.props,
+        changeStep = _this$props.changeStep,
+        formik = _this$props.formik,
+        setScanItem = _this$props.setScanItem;
+      var values = formik.values,
+        errors = formik.errors;
+      var popupOpen = this.state.popupOpen;
+      var canGoNext = values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+      return /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "Verify your identity"), /*#__PURE__*/_react.default.createElement(_styles.HeaderTitle, {
+        withMargin: true
+      }, "Upload Picture")), /*#__PURE__*/_react.default.createElement(_styles.HeaderButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+        open: popupOpen,
+        position: "bottom",
+        title: values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? errors.passportPicture : errors.cardFrontPicture || errors.cardBackPicture,
+        theme: "light",
+        arrow: true,
+        duration: 200
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        onMouseEnter: function onMouseEnter() {
+          return _this2.handlePopup(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return _this2.handlePopup(false);
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: function onClick() {
+          return changeStep('kycDocumentSuccess');
+        },
+        disabled: !canGoNext
+      }, "Next"))))), /*#__PURE__*/_react.default.createElement(_styles.Body, {
+        noVerticalPadding: true
+      }, values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT && /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "PASSPORT"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.PassportSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "Please scan the identity page with your photo on it"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingTop: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "passportPicture",
+        validate: this.validate
+      }, function (_ref) {
+        var field = _ref.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SuccessMark, {
+          isHidden: !field.value
+        }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          center: true,
+          minWidth: "188px",
+          onClick: function onClick() {
+            setScanItem(field.name);
+            changeStep('kycDocumentCameraScan');
+          }
+        }, "Scan Document"));
+      })))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
+        noMobileScroll: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/_react.default.createElement("p", null, "Be careful that none of your fingers are covering the document, and that all of the document is visible and contrasted against the background."), /*#__PURE__*/_react.default.createElement("p", null, "Ensure that the document is in focus. Avoid bad lighting conditions which can lead to motion blur and image noise."), /*#__PURE__*/_react.default.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/_react.default.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy."))))))), values.documentType === _DocumentSelect.DocumentSelectEnum.TWO_SIDED_DOCUMENT && /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+        stretch: true
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "UPLOAD CARD FRONT"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.DocumentSmallSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "With your picture"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "cardFrontPicture",
+        validate: this.validate
+      }, function (_ref2) {
+        var field = _ref2.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SuccessMark, {
+          isHidden: !field.value
+        }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          center: true,
+          onClick: function onClick() {
+            setScanItem(field.name);
+            changeStep('kycDocumentCameraScan');
+          }
+        }, "Scan"));
+      })))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true,
+        verticalCenter: true
+      }, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "UPLOAD CARD BACK"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_SvgIcons.DocumentBackSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+        center: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, "The other one"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPadding: true,
+        center: true
+      }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+        name: "cardBackPicture",
+        validate: this.validate
+      }, function (_ref3) {
+        var field = _ref3.field;
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SuccessMark, {
+          isHidden: !field.value
+        }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+          center: true,
+          onClick: function onClick() {
+            setScanItem(field.name);
+            changeStep('kycDocumentCameraScan');
+          }
+        }, "Scan"));
+      }))))))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_styles.ColumnInner, {
+        verticalPadding: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
+        noMobileScroll: true
+      }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+        noPaddingVertical: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Please use a JPG, PNG or PDF image below 2MB (we recommend a 2MP photo or 200-300 dpi scan)"), /*#__PURE__*/_react.default.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/_react.default.createElement("p", null, "Be careful that none of your fingers are covering the document, and that all of the document is visible and contrasted against the background."), /*#__PURE__*/_react.default.createElement("p", null, "Ensure that the document is in focus. Avoid bad lighting conditions which can lead to motion blur and image noise."), /*#__PURE__*/_react.default.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/_react.default.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy.")))))))));
+    }
+  }]);
+  return DocumentScanUpload;
+}(_react.PureComponent);
+DocumentScanUpload.propTypes = {
+  changeStep: _propTypes.default.func.isRequired,
+  setPrevStep: _propTypes.default.func.isRequired,
+  setScanItem: _propTypes.default.func.isRequired,
+  formik: _propTypes.default.instanceOf(Object).isRequired
+};
+var _default = (0, _formik.connect)(DocumentScanUpload);
+exports.default = _default;