@stokr/components-library 0.5.4 → 0.5.6

package/dist/KYCFlow/BasicInfo.js

@@ -0,0 +1,396 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,240 @@
+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);