@stokr/components-library
Version:
STOKR - Components Library
263 lines (262 loc) • 15.3 kB
JavaScript
"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(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 _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 DocumentFileUpload extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
popupOpen: false
});
_defineProperty(this, "handlePopup", isOpen => {
const {
formik
} = this.props;
const {
values
} = formik;
const canGoNext = values.documentType === _DocumentSelect.DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
this.validate();
this.setState({
popupOpen: !canGoNext ? isOpen : false
});
});
_defineProperty(this, "handleFileUpload", (e, fieldName) => {
const {
formik
} = this.props;
const {
setFieldValue
} = formik;
if (!e.target.files) {
return;
}
setFieldValue(fieldName, e.target.files[0]);
});
_defineProperty(this, "removeFile", fieldName => {
const {
formik
} = this.props;
const {
setFieldValue
} = formik;
setFieldValue(fieldName, '');
});
_defineProperty(this, "validate", () => {
const {
formik
} = this.props;
const {
validationSchema,
values,
setFieldError
} = formik;
const fieldNames = ['passportPicture', 'cardFrontPicture', 'cardBackPicture'];
try {
validationSchema.validateSync(values, {
abortEarly: false
});
} catch (validateError) {
const errors = validateError.inner.filter(error => fieldNames.includes(error.path));
errors.forEach(error => {
setFieldError(error.path, error.errors[0]);
});
}
});
}
componentDidMount() {
const {
setPrevStep
} = this.props;
setPrevStep('kycDocumentVerificationType');
}
render() {
const {
changeStep,
formik
} = this.props;
const {
values,
errors
} = formik;
const {
popupOpen
} = this.state;
const 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: () => this.handlePopup(true),
onMouseLeave: () => this.handlePopup(false)
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: () => 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
}, _ref => {
let {
field
} = _ref;
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: e => {
e.preventDefault();
e.stopPropagation();
this.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: e => this.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
}, _ref2 => {
let {
field
} = _ref2;
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: e => {
e.preventDefault();
e.stopPropagation();
this.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: e => this.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
}, _ref3 => {
let {
field
} = _ref3;
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: e => {
e.preventDefault();
e.stopPropagation();
this.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: e => this.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.")))))))));
}
}
DocumentFileUpload.propTypes = {
changeStep: _propTypes.default.func.isRequired,
setPrevStep: _propTypes.default.func.isRequired,
formik: _propTypes.default.instanceOf(Object).isRequired
};
var _default = exports.default = (0, _formik.connect)(DocumentFileUpload);