import React, { Component } from 'react';
import { reduxForm, SubmissionError, formValueSelector } from 'redux-form';
import { connect } from 'react-redux';
import moment from 'moment';
requiredWithCustomMessage,
import { Button, IconTitle, Image, Editable } from 'hollaex-web-lib';
import { HeaderSection } from 'components/HeaderSection';
import { withKit } from 'components/KitContext';
IdentificationFormSection,
} from './HeaderSection';
import { isMobile } from 'react-device-detect';
const FORM_NAME = 'DocumentsVerification';
const selector = formValueSelector(FORM_NAME);
export const sizeLimitInMB = 6;
const sizeLimit = sizeLimitInMB * 1024 * 1024;
class Documents extends Component {
this.generateFormFields(this.props.activeLanguage);
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.activeLanguage !== this.props.activeLanguage) {
this.generateFormFields(nextProps.activeLanguage);
if (JSON.stringify(nextProps.files) !== JSON.stringify(this.props.files)) {
this.checkTotalFilesSize(nextProps.files)
getFileSize = (file) => {
checkTotalFilesSize = (files = {}) => {
Object.entries(files).forEach(([_, file]) => {
accSize += this.getFileSize(file);
this.setState({ accSize });
generateFormFields = (language) => {
const { strings: STRINGS } = this.props;
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ID_NUMBER_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ID_NUMBER_PLACEHOLDER,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.ID_NUMBER',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ID_NUMBER_LABEL'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ID_NUMBER_PLACEHOLDER'
requiredWithCustomMessage(
'USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.ID_NUMBER'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ISSUED_DATE_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.ISSUED_DATE',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.ISSUED_DATE_LABEL'
requiredWithCustomMessage(
'USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.ISSUED_DATE'
isBefore('', STRINGS['VALIDATIONS.INVALID_DATE']),
endDate: moment().add(1, 'days'),
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.EXPIRATION_DATE_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.EXPIRATION_DATE',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.EXPIRATION_DATE_LABEL'
requiredWithCustomMessage(
'USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.EXPIRATION_DATE'
isBefore(moment().add(15, 'years'), STRINGS['VALIDATIONS.INVALID_DATE']),
endDate: moment().add(15, 'years'),
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.FRONT_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.FRONT_PLACEHOLDER,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.FRONT',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.FRONT_LABEL'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.FRONT_PLACEHOLDER'
requiredWithCustomMessage(
STRINGS['USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.FRONT']
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.POR_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.POR_PLACEHOLDER,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.PROOF_OF_RESIDENCY',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.POR_LABEL'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.POR_PLACEHOLDER'
requiredWithCustomMessage(
'USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.PROOF_OF_RESIDENCY'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.SELFIE_PHOTO_ID_LABEL,USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.SELFIE_PHOTO_ID_PLACEHOLDER,USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.SELFIE_PHOTO_ID',
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.SELFIE_PHOTO_ID_LABEL'
'USER_VERIFICATION.ID_DOCUMENTS_FORM.FORM_FIELDS.SELFIE_PHOTO_ID_PLACEHOLDER'
requiredWithCustomMessage(
'USER_VERIFICATION.ID_DOCUMENTS_FORM.VALIDATIONS.SELFIE_PHOTO_ID'
this.setState({ formFields });
handleSubmit = (formValues) => {
const { moveToNextStep, setActivePageContent, updateDocuments } = this.props;
return updateDocuments(formValues)
number: formValues.number,
expiration_date: formValues.expiration_date,
issued_date: formValues.issued_date,
moveToNextStep('documents', values);
setActivePageContent('email');
const error = { _error: err.message };
if (err.response && err.response.data) {
error._error = err.response.data.message;
throw new SubmissionError(error);
const { setActivePageContent, handleBack } = this.props;
setActivePageContent('email');
const { formFields, accSize } = this.state;
const violated = accSize > sizeLimit;
stringId="USER_VERIFICATION.DOCUMENT_VERIFICATION"
text={STRINGS['USER_VERIFICATION.DOCUMENT_VERIFICATION']}
iconPath={ICONS['VERIFICATION_DOCUMENT_NEW']}
className="d-flex flex-column w-100 verification_content-form-wrapper"
onSubmit={this.handleSubmit}
<div className="verification-form-panel mt-3">
stringId="USER_VERIFICATION.DOCUMENT_PROOF_SUBMISSION"
title={STRINGS['USER_VERIFICATION.DOCUMENT_PROOF_SUBMISSION']}
openContactForm={openContactForm}
<IdentificationFormSection strings={STRINGS} />
{renderFields(formFields.idDocument)}
{renderFields(formFields.id)}
<div className="verification-form-panel">
{formFields.proof_of_residency && (
stringId="USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.PROOF_OF_RESIDENCY"
'USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.PROOF_OF_RESIDENCY'
<PORSection strings={STRINGS}/>
{renderFields(formFields.proof_of_residency)}
<div className="verification-form-panel">
{formFields.selfieWithNote && (
stringId="USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.SELFIE.TITLE"
'USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.SELFIE.TITLE'
<SelfieWithPhotoId strings={STRINGS} />
icon={ICONS['SELF_KYC_ID_EN']}
wrapperClassName="verification_document-sample"
{renderFields(formFields.selfieWithNote)}
<div className="warning_text">{getErrorLocalized(error)}</div>
<div className="warning_text">
<Editable stringId="USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.ID_SECTION.VIOLATION_ERROR">
{STRINGS.formatString(STRINGS['USER_VERIFICATION.ID_DOCUMENTS_FORM.INFORMATION.ID_SECTION.VIOLATION_ERROR'], sizeLimitInMB)}
<div className="d-flex justify-content-center">
<div className="d-flex justify-content-end f-1 verification-buttons-wrapper">
label={STRINGS['USER_VERIFICATION.GO_BACK']}