@stokr/components-library
Version:
STOKR - Components Library
118 lines (117 loc) • 6.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.DocumentSelectEnum = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _formik = require("formik");
var _Form = require("../Form/Form");
var _Button = _interopRequireDefault(require("../Button/Button.styles"));
var _KYCSelectBox = _interopRequireDefault(require("../KYCSelectBox/KYCSelectBox.styles"));
var _Grid = require("../Grid/Grid.styles");
var _SvgIcons = require("../SvgIcons");
var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.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 _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); }
const DocumentSelectEnum = exports.DocumentSelectEnum = {
PASSPORT: 'passport',
TWO_SIDED_DOCUMENT: 'twoSidedDocument'
};
class DocumentSelect extends _react.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
hovered: ''
});
_defineProperty(this, "handleHover", hovered => {
this.setState({
hovered
});
});
}
componentDidMount() {
const {
setPrevStep
} = this.props;
setPrevStep('kycDocumentUpload');
}
render() {
const {
changeStep,
formik
} = this.props;
const {
setFieldValue
} = formik;
const {
hovered
} = this.state;
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
}, "What do you have at hand?"))), /*#__PURE__*/_react.default.createElement(_styles.Body, {
noVerticalPadding: true
}, /*#__PURE__*/_react.default.createElement(_formik.Field, {
name: "documentType",
validate: () => (0, _Form.validate)('documentType', formik)
}, _ref => {
let {
field
} = _ref;
return /*#__PURE__*/_react.default.createElement(_Grid.Row, {
stretch: true
}, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 8
}, /*#__PURE__*/_react.default.createElement(_KYCSelectBox.default, {
name: DocumentSelectEnum.PASSPORT,
selectedItem: field.value,
isGreyedOut: hovered === DocumentSelectEnum.TWO_SIDED_DOCUMENT,
onMouseEnter: () => this.handleHover(DocumentSelectEnum.PASSPORT),
onMouseLeave: () => this.handleHover('')
}, /*#__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(_Button.default, {
center: true,
minWidth: "188px",
onClick: () => {
setFieldValue(field.name, DocumentSelectEnum.PASSPORT);
changeStep('kycDocumentVerificationType');
}
}, "Let's go")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
part: 8
}, /*#__PURE__*/_react.default.createElement(_KYCSelectBox.default, {
name: DocumentSelectEnum.TWO_SIDED_DOCUMENT,
selectedItem: field.value,
isGreyedOut: hovered === DocumentSelectEnum.PASSPORT,
onMouseEnter: () => this.handleHover(DocumentSelectEnum.TWO_SIDED_DOCUMENT),
onMouseLeave: () => this.handleHover('')
}, /*#__PURE__*/_react.default.createElement(_styles.BodyTitle, null, "IDENTITY CARD"), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
center: true
}, /*#__PURE__*/_react.default.createElement(_SvgIcons.DocumentSvg, null)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
noPaddingTop: true,
center: true
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
center: true,
minWidth: "188px",
onClick: () => {
setFieldValue(field.name, DocumentSelectEnum.TWO_SIDED_DOCUMENT);
changeStep('kycDocumentVerificationType');
}
}, "Let's go")))));
})));
}
}
DocumentSelect.propTypes = {
changeStep: _propTypes.default.func.isRequired,
setPrevStep: _propTypes.default.func.isRequired,
formik: _propTypes.default.instanceOf(Object).isRequired
};
var _default = exports.default = (0, _formik.connect)(DocumentSelect);