@stokr/components-library 0.5.4 → 0.5.6

package/dist/KYCFlow/DocumentScan.js

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'formik';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { RefreshSvg } from 'components/SvgIcons';
+import { Wrapper, Header, Body, HeaderTitle, ColumnInner, RetakeButton, DoneButton, BodyTitle, Mask } from './_styles';
+const 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 '';
+  }
+};
+const DocumentScan = ({
+  changeStep,
+  setPrevStep,
+  scanItem,
+  formik
+}) => {
+  useEffect(() => {
+    setPrevStep('kycDocumentScan');
+  }, []);
+  const {
+    setFieldValue
+  } = formik;
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "DOCUMENT RECOGNITION"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, getSectionTitle(scanItem)))), /*#__PURE__*/React.createElement(Body, {
+    noHorizontalPadding: true
+  }, /*#__PURE__*/React.createElement(Row, {
+    center: true,
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 3
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, {
+    faceScan: true
+  }, "RETAKE"), /*#__PURE__*/React.createElement(RetakeButton, null, /*#__PURE__*/React.createElement(RefreshSvg, null)))), /*#__PURE__*/React.createElement(Column, {
+    part: 10
+  }, /*#__PURE__*/React.createElement(Mask, null)), /*#__PURE__*/React.createElement(Column, {
+    part: 3
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalCenter: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, {
+    faceScan: true
+  }, "DONE"), /*#__PURE__*/React.createElement(DoneButton, {
+    onClick: () => {
+      setFieldValue(scanItem, 'TODO: GET PHOTO FROM CAMERA');
+      changeStep('kycDocumentScan');
+    }
+  }))))));
+};
+DocumentScan.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  scanItem: PropTypes.string.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(DocumentScan);

package/dist/KYCFlow/DocumentScanUpload.js

@@ -0,0 +1,228 @@
+import React, { PureComponent, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { connect, Field } from 'formik';
+import { Tooltip } from 'react-tippy';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { PassportSvg, DocumentSmallSvg, DocumentBackSvg } from 'components/SvgIcons';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import ComponentScroll from 'components/ComponentScroll/ComponentScroll';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, HeaderButtonWrapper, Body, HeaderTitle, BodyTitle, ColumnInner, SuccessMark } from './_styles';
+import { DocumentSelectEnum } from './DocumentSelect';
+class DocumentScanUpload extends PureComponent {
+  state = {
+    popupOpen: false
+  };
+  componentDidMount() {
+    const {
+      setPrevStep
+    } = this.props;
+    setPrevStep('kycDocumentVerificationType');
+  }
+  handlePopup = isOpen => {
+    const {
+      formik
+    } = this.props;
+    const {
+      values
+    } = formik;
+    const canGoNext = values.documentType === DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+    this.validate();
+    this.setState({
+      popupOpen: !canGoNext ? isOpen : false
+    });
+  };
+  handleFileUpload = (e, fieldName) => {
+    const {
+      formik
+    } = this.props;
+    const {
+      setFieldValue
+    } = formik;
+    if (!e.target.files) {
+      return;
+    }
+    setFieldValue(fieldName, e.target.files[0]);
+  };
+  removeFile = fieldName => {
+    const {
+      formik
+    } = this.props;
+    const {
+      setFieldValue
+    } = formik;
+    setFieldValue(fieldName, '');
+  };
+  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]);
+      });
+    }
+  };
+  render() {
+    const {
+      changeStep,
+      formik,
+      setScanItem
+    } = this.props;
+    const {
+      values,
+      errors
+    } = formik;
+    const {
+      popupOpen
+    } = this.state;
+    const canGoNext = values.documentType === DocumentSelectEnum.PASSPORT ? !!values.passportPicture : !!values.cardFrontPicture && !!values.cardBackPicture;
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+      withMargin: true
+    }, "Upload Picture")), /*#__PURE__*/React.createElement(HeaderButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+      open: popupOpen,
+      position: "bottom",
+      title: values.documentType === DocumentSelectEnum.PASSPORT ? errors.passportPicture : errors.cardFrontPicture || errors.cardBackPicture,
+      theme: "light",
+      arrow: true,
+      duration: 200
+    }, /*#__PURE__*/React.createElement("span", {
+      onMouseEnter: () => this.handlePopup(true),
+      onMouseLeave: () => this.handlePopup(false)
+    }, /*#__PURE__*/React.createElement(Button, {
+      onClick: () => changeStep('kycDocumentSuccess'),
+      disabled: !canGoNext
+    }, "Next"))))), /*#__PURE__*/React.createElement(Body, {
+      noVerticalPadding: true
+    }, values.documentType === DocumentSelectEnum.PASSPORT && /*#__PURE__*/React.createElement(Row, {
+      stretch: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, {
+      verticalPadding: true,
+      verticalCenter: true
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "PASSPORT"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(PassportSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      center: true
+    }, /*#__PURE__*/React.createElement("p", null, "Please scan the identity page with your photo on it"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "passportPicture",
+      validate: this.validate
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SuccessMark, {
+      isHidden: !field.value
+    }), /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      minWidth: "188px",
+      onClick: () => {
+        setScanItem(field.name);
+        changeStep('kycDocumentCameraScan');
+      }
+    }, "Scan Document")))))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, {
+      verticalPadding: true
+    }, /*#__PURE__*/React.createElement(ComponentScroll, {
+      noMobileScroll: true
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/React.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.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.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/React.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy."))))))), values.documentType === DocumentSelectEnum.TWO_SIDED_DOCUMENT && /*#__PURE__*/React.createElement(Row, {
+      stretch: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, null, /*#__PURE__*/React.createElement(Row, {
+      stretch: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, {
+      verticalPadding: true,
+      verticalCenter: true
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "UPLOAD CARD FRONT"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(DocumentSmallSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      center: true
+    }, /*#__PURE__*/React.createElement("p", null, "With your picture"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "cardFrontPicture",
+      validate: this.validate
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SuccessMark, {
+      isHidden: !field.value
+    }), /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      onClick: () => {
+        setScanItem(field.name);
+        changeStep('kycDocumentCameraScan');
+      }
+    }, "Scan")))))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, {
+      verticalPadding: true,
+      verticalCenter: true
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "UPLOAD CARD BACK"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(DocumentBackSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      center: true
+    }, /*#__PURE__*/React.createElement("p", null, "The other one"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "cardBackPicture",
+      validate: this.validate
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(SuccessMark, {
+      isHidden: !field.value
+    }), /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      onClick: () => {
+        setScanItem(field.name);
+        changeStep('kycDocumentCameraScan');
+      }
+    }, "Scan"))))))))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(ColumnInner, {
+      verticalPadding: true
+    }, /*#__PURE__*/React.createElement(ComponentScroll, {
+      noMobileScroll: true
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingVertical: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.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.createElement("p", null, "Make sure that your personal information is readable. Also, nothing on the document should be covered or censored"), /*#__PURE__*/React.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.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.createElement("p", null, "The surface of the background should be evenly lit. The ID document should not present perspective distortion."), /*#__PURE__*/React.createElement("p", null, "If your photo or scan is not of high enough quality, we will request a better copy.")))))))));
+  }
+}
+DocumentScanUpload.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  setScanItem: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(DocumentScanUpload);

package/dist/KYCFlow/DocumentSelect.js

@@ -0,0 +1,101 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect, Field } from 'formik';
+import { validate } from 'components/Form/Form';
+import Button from 'components/Button/Button.styles';
+import KYCSelectBox from 'components/KYCSelectBox/KYCSelectBox.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { PassportSvg, DocumentSvg } from 'components/SvgIcons';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle } from './_styles';
+export const DocumentSelectEnum = {
+  PASSPORT: 'passport',
+  TWO_SIDED_DOCUMENT: 'twoSidedDocument'
+};
+class DocumentSelect extends PureComponent {
+  state = {
+    hovered: ''
+  };
+  componentDidMount() {
+    const {
+      setPrevStep
+    } = this.props;
+    setPrevStep('kycDocumentUpload');
+  }
+  handleHover = hovered => {
+    this.setState({
+      hovered
+    });
+  };
+  render() {
+    const {
+      changeStep,
+      formik
+    } = this.props;
+    const {
+      setFieldValue
+    } = formik;
+    const {
+      hovered
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+      withMargin: true
+    }, "What do you have at hand?"))), /*#__PURE__*/React.createElement(Body, {
+      noVerticalPadding: true
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "documentType",
+      validate: () => validate('documentType', formik)
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Row, {
+      stretch: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(KYCSelectBox, {
+      name: DocumentSelectEnum.PASSPORT,
+      selectedItem: field.value,
+      isGreyedOut: hovered === DocumentSelectEnum.TWO_SIDED_DOCUMENT,
+      onMouseEnter: () => this.handleHover(DocumentSelectEnum.PASSPORT),
+      onMouseLeave: () => this.handleHover('')
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "PASSPORT"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(PassportSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      minWidth: "188px",
+      onClick: () => {
+        setFieldValue(field.name, DocumentSelectEnum.PASSPORT);
+        changeStep('kycDocumentVerificationType');
+      }
+    }, "Let's go")))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(KYCSelectBox, {
+      name: DocumentSelectEnum.TWO_SIDED_DOCUMENT,
+      selectedItem: field.value,
+      isGreyedOut: hovered === DocumentSelectEnum.PASSPORT,
+      onMouseEnter: () => this.handleHover(DocumentSelectEnum.TWO_SIDED_DOCUMENT),
+      onMouseLeave: () => this.handleHover('')
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "IDENTITY CARD"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(DocumentSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      minWidth: "188px",
+      onClick: () => {
+        setFieldValue(field.name, DocumentSelectEnum.TWO_SIDED_DOCUMENT);
+        changeStep('kycDocumentVerificationType');
+      }
+    }, "Let's go"))))))));
+  }
+}
+DocumentSelect.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(DocumentSelect);

package/dist/KYCFlow/DocumentSuccess.js

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'formik';
+import { PassportSvg, DocumentSvg } from 'components/SvgIcons';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle, ColumnInner, SuccessMark } from './_styles';
+import { DocumentSelectEnum } from './DocumentSelect';
+const DocumentSuccess = ({
+  changeStep,
+  setPrevStep,
+  formik
+}) => {
+  useEffect(() => {
+    setPrevStep('kycDocumentScan');
+  }, []);
+  const {
+    values
+  } = formik;
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, "Upload successfull"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Row, {
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 4
+  }), /*#__PURE__*/React.createElement(Column, {
+    part: 8
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalPadding: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, null, "THANK YOU"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingBottom: true,
+    center: true
+  }, values.documentType === DocumentSelectEnum.PASSPORT ? /*#__PURE__*/React.createElement(PassportSvg, null) : /*#__PURE__*/React.createElement(DocumentSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(SuccessMark, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    noPaddingTop: true,
+    center: true
+  }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("p", null, "Our robots are having a look"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => changeStep('kycFaceScan', 2, 1)
+  }, "Continue")))), /*#__PURE__*/React.createElement(Column, {
+    part: 4
+  }))));
+};
+DocumentSuccess.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(DocumentSuccess);

package/dist/KYCFlow/DocumentUpload.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { DocumentSvg } from 'components/SvgIcons';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle, ColumnInner } from './_styles';
+const DocumentUpload = ({
+  changeStep,
+  setPrevStep
+}) => {
+  useEffect(() => {
+    setPrevStep('kycTerms', 0);
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, "Upload ID Document"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Row, {
+    center: true,
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 8
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalPadding: true,
+    verticalSpaceAround: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, null, "DOCUMENT VERIFICATION"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(DocumentSvg, null)), /*#__PURE__*/React.createElement(Text, {
+    center: true
+  }, /*#__PURE__*/React.createElement("p", null, "Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    minWidth: "188px",
+    onClick: () => {
+      changeStep('kycDocumentSelect');
+    }
+  }, "Begin")))))));
+};
+DocumentUpload.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired
+};
+export default DocumentUpload;

package/dist/KYCFlow/DocumentVerificationType.js

@@ -0,0 +1,114 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { connect, Field } from 'formik';
+import { validate } from 'components/Form/Form';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import KYCSelectBox from 'components/KYCSelectBox/KYCSelectBox.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { CameraSvg, UploadSvg } from 'components/SvgIcons';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle } from './_styles';
+import { DocumentSelectEnum } from './DocumentSelect';
+export const DocumentVerificationTypeEnum = {
+  UPLOAD_IMAGE: 'uploadImage',
+  DEVICE_CAMERA: 'deviceCamera'
+};
+class DocumentVerificationType extends PureComponent {
+  state = {
+    hovered: ''
+  };
+  componentDidMount() {
+    const {
+      setPrevStep
+    } = this.props;
+    setPrevStep('kycDocumentSelect');
+  }
+  handleHover = hovered => {
+    this.setState({
+      hovered
+    });
+  };
+  render() {
+    const {
+      changeStep,
+      formik
+    } = this.props;
+    const {
+      values,
+      setFieldValue
+    } = formik;
+    const {
+      hovered
+    } = this.state;
+    return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+      withMargin: true
+    }, "Choose verification method"))), /*#__PURE__*/React.createElement(Body, {
+      noVerticalPadding: true
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "verificationType",
+      validate: () => validate('verificationType', formik)
+    }, ({
+      field
+    }) => /*#__PURE__*/React.createElement(Row, {
+      stretch: true
+    }, /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(KYCSelectBox, {
+      name: DocumentVerificationTypeEnum.UPLOAD_IMAGE,
+      selectedItem: field.value,
+      isGreyedOut: hovered === DocumentVerificationTypeEnum.DEVICE_CAMERA,
+      onMouseEnter: () => this.handleHover(DocumentVerificationTypeEnum.UPLOAD_IMAGE),
+      onMouseLeave: () => this.handleHover('')
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "UPLOAD IMAGE FILE"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(UploadSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      center: true
+    }, /*#__PURE__*/React.createElement("p", null, 'You can upload an existing JPG, PNG or PDF image of your ', values.documentType === DocumentSelectEnum.PASSPORT ? 'passport' : 'identity card', " that's under 2MB"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      minWidth: "188px",
+      onClick: () => {
+        setFieldValue(field.name, DocumentVerificationTypeEnum.UPLOAD_IMAGE);
+        changeStep('kycDocumentScan');
+      }
+    }, "Select")))), /*#__PURE__*/React.createElement(Column, {
+      part: 8
+    }, /*#__PURE__*/React.createElement(KYCSelectBox, {
+      name: DocumentVerificationTypeEnum.DEVICE_CAMERA,
+      selectedItem: field.value,
+      isGreyedOut: hovered === DocumentVerificationTypeEnum.UPLOAD_IMAGE,
+      onMouseEnter: () => this.handleHover(DocumentVerificationTypeEnum.DEVICE_CAMERA),
+      onMouseLeave: () => this.handleHover('')
+    }, /*#__PURE__*/React.createElement(BodyTitle, null, "USE DEVICE CAMERA"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      center: true
+    }, /*#__PURE__*/React.createElement(CameraSvg, null)), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Text, {
+      center: true
+    }, /*#__PURE__*/React.createElement("p", null, 'You can use the built-in camera on your device to capture an image of your ', values.documentType === DocumentSelectEnum.PASSPORT ? 'passport' : 'identity card'))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      center: true
+    }, /*#__PURE__*/React.createElement(Button, {
+      center: true,
+      minWidth: "188px",
+      onClick: () => {
+        setFieldValue(field.name, DocumentVerificationTypeEnum.DEVICE_CAMERA);
+        changeStep('kycDocumentScan');
+      }
+    }, "Select"))))))));
+  }
+}
+DocumentVerificationType.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired,
+  formik: PropTypes.instanceOf(Object).isRequired
+};
+export default connect(DocumentVerificationType);

package/dist/KYCFlow/FaceScan.js

@@ -0,0 +1,45 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Text from 'components/Text/Text.styles';
+import Button from 'components/Button/Button.styles';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import { FaceScanIconSvg } from 'components/SvgIcons';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import SectionTitle from 'components/SectionTitle/SectionTitle.styles';
+import { Wrapper, Header, Body, HeaderTitle, BodyTitle, ColumnInner } from './_styles';
+const FaceScan = ({
+  changeStep,
+  setPrevStep
+}) => {
+  useEffect(() => {
+    setPrevStep('kycDocumentSuccess', 1);
+  }, []);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SectionTitle, null, "Verify your identity"), /*#__PURE__*/React.createElement(HeaderTitle, {
+    withMargin: true
+  }, "Face recognition"))), /*#__PURE__*/React.createElement(Body, null, /*#__PURE__*/React.createElement(Row, {
+    center: true,
+    stretch: true
+  }, /*#__PURE__*/React.createElement(Column, {
+    part: 8
+  }, /*#__PURE__*/React.createElement(ColumnInner, {
+    verticalPadding: true,
+    verticalSpaceAround: true
+  }, /*#__PURE__*/React.createElement(BodyTitle, null, "SELFIE TIME!"), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(FaceScanIconSvg, null)), /*#__PURE__*/React.createElement(Text, {
+    center: true
+  }, /*#__PURE__*/React.createElement("p", null, "In the next step you'll take a picture of yourself using your device camera")), /*#__PURE__*/React.createElement(ComponentWrapper, {
+    center: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    center: true,
+    minWidth: "188px",
+    onClick: () => {
+      changeStep('kycFaceScanRecognition');
+    }
+  }, "Begin")))))));
+};
+FaceScan.propTypes = {
+  changeStep: PropTypes.func.isRequired,
+  setPrevStep: PropTypes.func.isRequired
+};
+export default FaceScan;