@stokr/components-library 0.5.6 → 0.5.7

package/dist/KYCFlow/BasicInfo.js

@@ -1,396 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { PureComponent, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { connect, Field } from 'formik';
-import { Tooltip } from 'react-tippy';
-import { FormField, FormError, validate } from 'components/Form/Form';
-import Input from 'components/Input/Input';
-import Select from 'components/Input/Select';
-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 countriesList from 'utils/countries-list'
-import Checkbox from 'components/Checkbox/Checkbox';
-import { Wrapper, Header, Body, HeaderTitle, ColumnInner, FormBottomRow, FormBottomButtonWrap } from './_styles';
-import countriesList from '../../utils/countries-list';
-class BasicInfo extends PureComponent {
-  state = {
-    popupOpen: false,
-    hasErrors: true
-  };
-  fields = ['firstName', 'middleName', 'lastName', 'phonePrefix', 'phone', 'postalCode', 'city', 'street', 'country', 'occupation', 'occupationDetails', 'dataConfirmation'];
-  componentDidMount() {
-    const {
-      setPrevStep
-    } = this.props;
-    setPrevStep('kycFaceScanSuccess', 2);
-  }
-  handlePopup = async isOpen => {
-    const {
-      formik
-    } = this.props;
-    const {
-      validateForm,
-      errors,
-      setFieldTouched
-    } = formik;
-    this.fields.forEach(field => setFieldTouched(field));
-    await validateForm();
-    this.setState({
-      popupOpen: Object.keys(errors).length ? isOpen : false,
-      hasErrors: !!Object.keys(errors).length
-    });
-  };
-  render() {
-    const {
-      changeStep,
-      formik
-    } = this.props;
-    const {
-      errors,
-      setFieldValue,
-      setFieldTouched,
-      touched
-    } = formik;
-    const {
-      popupOpen,
-      hasErrors
-    } = this.state;
-    const handleChangeSelect = field => {
-      setFieldValue(field.name, field.value, false);
-      setFieldTouched(field.name);
-    };
-    const handleBlurSelect = field => {
-      setFieldTouched(field.name);
-    };
-    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
-    }, "Basic info"))), /*#__PURE__*/React.createElement(Body, {
-      form: true
-    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "firstName",
-      validation: () => validate('firstName', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "First Name",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name])))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "middleName",
-      validation: () => validate('middleName', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "Middle Name",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "lastName",
-      validation: () => validate('lastName', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "Last Name",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name])))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "phonePrefix",
-      validation: () => validate('phonePrefix', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Select, {
-      options: [{
-        key: 1,
-        value: '+01',
-        label: '+01'
-      }, {
-        key: 2,
-        value: '+02',
-        label: '+02'
-      }, {
-        key: 3,
-        value: '+03',
-        label: '+03'
-      }, {
-        key: 4,
-        value: '+04',
-        label: '+04'
-      }, {
-        key: 5,
-        value: '+05',
-        label: '+05'
-      }, {
-        key: 6,
-        value: '+06',
-        label: '+06'
-      }],
-      label: "Prefix",
-      id: field.name,
-      name: field.name,
-      value: field.value,
-      error: !!errors[field.name],
-      touched: !!touched[field.name],
-      onChange: handleChangeSelect,
-      onBlur: handleBlurSelect
-    }), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "phone",
-      validation: () => validate('phone', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "Mobile phone",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))))))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "country",
-      validation: () => validate('country', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Select, {
-      options: countriesList.map(({
-        name
-      }) => ({
-        key: name,
-        value: name,
-        label: name
-      })),
-      label: "Country",
-      id: field.name,
-      name: field.name,
-      value: field.value,
-      error: !!errors[field.name],
-      touched: !!touched[field.name],
-      onChange: handleChangeSelect,
-      onBlur: handleBlurSelect,
-      search: true
-    }), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name])))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "postalCode",
-      validation: () => validate('postalCode', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "Postal Code",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "city",
-      validation: () => validate('city', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "City",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name])))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "street",
-      validation: () => validate('street', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "Street",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))))), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "occupation",
-      validation: () => validate('occupation', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Select, {
-      options: [{
-        key: 1,
-        value: 'student',
-        label: 'Student'
-      }, {
-        key: 2,
-        value: 'worker',
-        label: 'Worker'
-      }, {
-        key: 3,
-        value: 'other',
-        label: 'Other, precise:'
-      }],
-      label: "Occupation",
-      id: field.name,
-      name: field.name,
-      value: field.value,
-      error: !!errors[field.name],
-      touched: !!touched[field.name],
-      onChange: handleChangeSelect,
-      onBlur: handleBlurSelect
-    }), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name])))))), /*#__PURE__*/React.createElement(Column, {
-      part: 1,
-      full: 2
-    }, /*#__PURE__*/React.createElement(ColumnInner, {
-      formInner: true
-    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
-      noPaddingTop: true,
-      noPaddingHorizontal: true,
-      fluid: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "occupationDetails",
-      validation: () => validate('occupationDetails', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Input, _extends({
-      label: "",
-      id: field.name,
-      error: !!errors[field.name],
-      touched: !!touched[field.name]
-    }, field)), /*#__PURE__*/React.createElement(FormError, {
-      show: touched[field.name] && errors[field.name]
-    }, errors[field.name]))))))), /*#__PURE__*/React.createElement(FormBottomRow, null, /*#__PURE__*/React.createElement(FormField, null, /*#__PURE__*/React.createElement(Field, {
-      name: "dataConfirmation",
-      validate: () => validate('dataConfirmation', formik)
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Checkbox, _extends({
-      id: "data-confirmation",
-      text: "I confirm that all information is correct",
-      checked: field.value,
-      error: !!errors[field.name]
-    }, field, {
-      value: "yes"
-    })), /*#__PURE__*/React.createElement(FormError, {
-      show: errors[field.name]
-    }, errors[field.name])))), /*#__PURE__*/React.createElement(FormBottomButtonWrap, null, /*#__PURE__*/React.createElement(Tooltip, {
-      open: popupOpen,
-      position: "bottom",
-      title: "Please fill all required fields",
-      theme: "light",
-      arrow: true,
-      duration: 200
-    }, /*#__PURE__*/React.createElement("span", {
-      onMouseEnter: () => this.handlePopup(true),
-      onMouseLeave: () => this.handlePopup(false)
-    }, /*#__PURE__*/React.createElement(Button, {
-      onClick: () => changeStep('kycConfirmation', 5, 3),
-      disabled: hasErrors
-    }, "Continue")))))));
-  }
-}
-BasicInfo.propTypes = {
-  changeStep: PropTypes.func.isRequired,
-  setPrevStep: PropTypes.func.isRequired,
-  formik: PropTypes.instanceOf(Object).isRequired
-};
-export default connect(BasicInfo);

package/dist/KYCFlow/Confirmation.js

@@ -1,37 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'formik';
-import Button from 'components/Button/Button.styles';
-import { Row, Column } from 'components/Grid/Grid.styles';
-import { Wrapper, Header, HeaderButtonWrapper, Body, HeaderTitle, BodyTitle, ColumnInner } from './_styles';
-const Confirmation = ({
-  changeStep,
-  setPrevStep,
-  formik
-}) => {
-  useEffect(() => {
-    setPrevStep('kycBasicInfo', 3);
-  }, []);
-  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderTitle, null, "Confirmation"), /*#__PURE__*/React.createElement(HeaderButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
-    secondary: true,
-    onClick: () => changeStep('kycBasicInfo', 3)
-  }, "Previous"), /*#__PURE__*/React.createElement(Button, {
-    onClick: () => formik.submitForm()
-  }, "Confirm"))), /*#__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 FOR REGISTERING"))), /*#__PURE__*/React.createElement(Column, {
-    part: 4
-  }))));
-};
-Confirmation.propTypes = {
-  changeStep: PropTypes.func.isRequired,
-  setPrevStep: PropTypes.func.isRequired,
-  formik: PropTypes.instanceOf(Object).isRequired
-};
-export default connect(Confirmation);

package/dist/KYCFlow/DocumentFileUpload.js

@@ -1,240 +0,0 @@
-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, FileInput, FileInputRemove, FileInputWrapper, FileInputList, FileInputItem } from './_styles';
-import { DocumentSelectEnum } from './DocumentSelect';
-class DocumentFileUpload 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
-    } = 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, {
-      noPaddingTop: true,
-      center: true
-    }, /*#__PURE__*/React.createElement(Text, {
-      center: true
-    }, /*#__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(ComponentWrapper, {
-      noPaddingTop: true,
-      center: true
-    }, /*#__PURE__*/React.createElement(Field, {
-      name: "passportPicture",
-      validate: this.validate
-    }, ({
-      field
-    }) => /*#__PURE__*/React.createElement(Fragment, null, field.value ? /*#__PURE__*/React.createElement(FileInputList, null, /*#__PURE__*/React.createElement(FileInputItem, null, /*#__PURE__*/React.createElement(Fragment, null, field.value.name, /*#__PURE__*/React.createElement(FileInputRemove, {
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeFile(field.name);
-      }
-    })))) : /*#__PURE__*/React.createElement(FileInputWrapper, {
-      center: true,
-      minWidth: "188px"
-    }, "Select Passport", /*#__PURE__*/React.createElement(FileInput, {
-      name: field.name,
-      accept: "image/png,image/jpeg,application/pdf",
-      onChange: e => this.handleFileUpload(e, field.name)
-    }))))))), /*#__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 select an image file showing the page of the document with your photo on it"), /*#__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, {
-      noPaddingTop: true,
-      noPaddingHorizontal: 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, field.value ? /*#__PURE__*/React.createElement(FileInputList, null, /*#__PURE__*/React.createElement(FileInputItem, null, /*#__PURE__*/React.createElement(Fragment, null, field.value.name, /*#__PURE__*/React.createElement(FileInputRemove, {
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeFile(field.name);
-      }
-    })))) : /*#__PURE__*/React.createElement(FileInputWrapper, {
-      center: true
-    }, "Select", /*#__PURE__*/React.createElement(FileInput, {
-      name: field.name,
-      accept: "image/png,image/jpeg,application/pdf",
-      onChange: e => this.handleFileUpload(e, field.name)
-    }))))))), /*#__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, {
-      noPaddingTop: true,
-      noPaddingHorizontal: 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, field.value ? /*#__PURE__*/React.createElement(FileInputList, null, /*#__PURE__*/React.createElement(FileInputItem, null, /*#__PURE__*/React.createElement(Fragment, null, field.value.name, /*#__PURE__*/React.createElement(FileInputRemove, {
-      onClick: e => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.removeFile(field.name);
-      }
-    })))) : /*#__PURE__*/React.createElement(FileInputWrapper, {
-      center: true
-    }, "Select", /*#__PURE__*/React.createElement(FileInput, {
-      name: field.name,
-      accept: "image/png,image/jpeg,application/pdf",
-      onChange: e => this.handleFileUpload(e, field.name)
-    })))))))))), /*#__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.")))))))));
-  }
-}
-DocumentFileUpload.propTypes = {
-  changeStep: PropTypes.func.isRequired,
-  setPrevStep: PropTypes.func.isRequired,
-  formik: PropTypes.instanceOf(Object).isRequired
-};
-export default connect(DocumentFileUpload);