2020-06-18 05:38:10 +00:00
import Button from 'apsl-react-native-button' ;
2020-06-10 03:10:45 +00:00
import React , { Component } from 'react' ;
2020-06-23 08:55:19 +00:00
import { Alert , Image , PermissionsAndroid , Platform , ProgressBarAndroid , ScrollView , StyleSheet , Text , View } from 'react-native' ;
2020-06-10 03:10:45 +00:00
import * as Animatable from 'react-native-animatable' ;
2020-06-23 08:55:19 +00:00
import Dialog from "react-native-dialog" ;
2020-06-18 05:38:10 +00:00
import { TouchableOpacity } from 'react-native-gesture-handler' ;
2020-06-10 03:10:45 +00:00
import I18n from 'react-native-i18n' ;
2020-06-23 08:55:19 +00:00
import ImagePicker from 'react-native-image-crop-picker' ;
2020-06-18 05:38:10 +00:00
import { responsiveHeight , responsiveWidth } from 'react-native-responsive-dimensions' ;
import { Fumi } from 'react-native-textinput-effects' ;
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome' ;
import Icon from 'react-native-vector-icons/MaterialCommunityIcons' ;
2020-06-10 03:10:45 +00:00
import { Color } from '../../config/Color' ;
2020-06-23 08:55:19 +00:00
import isNil from 'lodash/isNil' ;
import isEqual from 'lodash/isEqual' ;
import { SinglePickerMaterialDialog , MultiPickerMaterialDialog , MaterialDialog } from "react-native-material-dialog" ;
import { readUser , getTownInformationName , getListCountriesActive } from './../../webservice/AuthApi' ;
import { Typography , FontWeight } from '../../config/typography' ;
import { connect } from 'react-redux' ;
import Geolocation from 'react-native-geolocation-service' ;
import { bindActionCreators } from 'redux' ;
import { ProgressDialog } from 'react-native-simple-dialogs' ;
import { getUserIdentificationResetAction , getUserIdentificationAction , validateIdentificationAction , validateIdentificationResetAction } from '../../webservice/IdentificationApi'
import { getPositionInformation } from '../../webservice/MapService' ;
2020-06-18 05:38:10 +00:00
let theme = require ( './../../utils/theme.json' ) ;
let route = require ( './../../route.json' ) ;
2020-06-10 03:10:45 +00:00
const GEOLOCATION _OPTIONS = { enableHighAccuracy : true , timeout : 20000 , maximumAge : 1000 , useSignificantChanges : true } ;
const moment = require ( 'moment' ) ;
2020-06-23 08:55:19 +00:00
class ValidateIdentification extends Component {
2020-06-10 03:10:45 +00:00
static navigatorStyle = {
navBarBackgroundColor : Color . primaryColor ,
statusBarColor : Color . primaryDarkColor ,
navBarTextColor : '#FFFFFF' ,
navBarButtonColor : '#FFFFFF'
} ;
static navigationOptions = ( ) => {
return {
drawerLabel : ( ) => null ,
headerTitle : I18n . t ( 'VALIDATE_IDENTIFICATION_DESCRIPTION' ) ,
headerTintColor : 'white' ,
headerStyle : {
backgroundColor : Color . primaryColor ,
marginTop : 0 ,
color : 'white'
} ,
headerTitleStyle : {
color : "white"
} ,
2020-06-16 09:25:46 +00:00
title : I18n . t ( 'VALIDATE_IDENTIFICATION_DESCRIPTION' ) ,
2020-06-10 03:10:45 +00:00
}
} ;
constructor ( props ) {
super ( props ) ;
this . state = {
2020-06-23 08:55:19 +00:00
numeroTelephone : null ,
2020-06-16 09:25:46 +00:00
image : null ,
2020-06-18 05:38:10 +00:00
displayImage : false ,
2020-06-23 08:55:19 +00:00
idNetwork : null ,
idUser : null ,
idIdentification : null ,
displayUploadButtons : false ,
triggerSubmitClick : false ,
triggerValidateClick : false ,
isIdentified : false ,
modalVisible : true ,
isIdentifiedValidated : false ,
userId : null ,
isLoging : false ,
countries : [ ] ,
town : [ ] ,
townName : null ,
country : null ,
datatoSend : null
2020-06-10 03:10:45 +00:00
} ;
2020-06-23 08:55:19 +00:00
this . dataToSendTemp = new FormData ( ) ;
this . props . getUserIdentificationResetAction ( ) ;
this . props . validateIdentificationResetAction ( ) ;
2020-06-10 03:10:45 +00:00
}
componentDidMount ( ) {
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user !== undefined ) {
this . setState ( { user } ) ;
}
}
} ) ;
2020-06-23 08:55:19 +00:00
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . watchLocation ( ) ;
}
}
2020-06-10 03:10:45 +00:00
componentWillUnmount ( ) {
2020-06-23 08:55:19 +00:00
this . mounted = false ;
if ( this . watchID ) Geolocation . clearWatch ( this . watchID ) ;
2020-06-10 03:10:45 +00:00
}
showErrorDialog ( ) {
this . setState ( { modalDialog : false } )
2020-06-23 08:55:19 +00:00
Alert . alert ( "Une erreur est survenue" , "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
2020-06-10 03:10:45 +00:00
"et que vous êtes connecté à internet puis ressayer" , [ {
text : "Recommencer" , onPress : ( ) => {
this . watchLocation ( )
}
} , { text : "Annuler" , onPress : ( ) => { this . props . navigation . popToTop ( ) } } ] )
}
2020-06-23 08:55:19 +00:00
async watchLocation ( ) {
Geolocation . getCurrentPosition ( ( position ) => {
this . treatPosition ( position )
} , ( e ) => {
this . showErrorDialog ( )
} , this . props . geolocationOptions ) ;
if ( ! this . watchID ) {
Geolocation . watchPosition ( ( position ) => { this . treatPosition ( position ) } , ( e ) => { this . showErrorDialog ( ) } , this . props . geolocationOptions )
}
}
2020-06-10 03:10:45 +00:00
async requestCameraPermission ( ) {
try {
const granted = await PermissionsAndroid . request (
PermissionsAndroid . PERMISSIONS . ACCESS _FINE _LOCATION ,
{
'title' : 'Cool Photo App Camera Permission' ,
'message' : 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if ( granted === PermissionsAndroid . RESULTS . GRANTED ) {
this . watchLocation ( ) ;
} else {
this . setState ( { modalDialog : false } )
Alert . alert ( "Echec à l'autorisation" ,
"L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision" ,
[ {
text : "Ok" , onPress : ( ) => {
this . props . navigation . popToTop ( )
}
} ] )
}
} catch ( err ) {
this . setState ( { modalDialog : false } )
Alert . alert ( "Une erreur est Survenue" ,
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application" ,
[ {
text : "Ok" , onPress : ( ) => {
BackHandler . exitApp ( )
}
} ] )
}
}
2020-06-23 08:55:19 +00:00
treatPosition ( position ) {
const myLastPosition = this . state . myPosition ;
const myPosition = position . coords ;
if ( ! isEqual ( myPosition , myLastPosition ) ) {
getPositionInformation ( myPosition ) . then ( ( response ) => {
if ( response . results !== undefined ) {
if ( response . results . length > 0 ) {
let most = response . results [ 0 ]
let { address _components , formatted _address , place _id } = most
this . setState ( { address : address _components , textadress : formatted _address , place : place _id } )
let results = response . results ;
let shortcountry ;
let mcountry ;
for ( let i = 0 ; i < results [ 0 ] . address _components . length ; i ++ ) {
for ( let j = 0 ; j < results [ 0 ] . address _components [ i ] . types . length ; j ++ ) {
if ( results [ 0 ] . address _components [ i ] . types [ j ] === "country" ) {
mcountry = results [ 0 ] . address _components [ i ] ;
shortcountry = mcountry . short _name ;
this . setState ( { shortCountry : mcountry . short _name , longCountry : mcountry . long _name } )
} else if ( results [ 0 ] . address _components [ i ] . types [ j ] === "locality" ) {
const name = results [ 0 ] . address _components [ i ] . short _name ;
getTownInformationName ( name ) . then ( ( result ) => {
let town = null ;
if ( result instanceof Array ) {
town = result [ 0 ] ;
} else {
town = result ;
}
this . setState ( { modalVisible : false } ) ;
} )
}
}
}
getListCountriesActive ( ) . then ( ( cnt ) => {
this . setState ( { countries : cnt } )
var found = false
for ( let i of cnt ) {
if ( i . code _country === shortcountry ) {
found = true ;
this . setState ( { modalVisible : false , indicatif : i . code _dial , country : i . name } )
/* this.getNetworks(i.code_dial); */
}
}
if ( ! found ) {
Alert . alert ( "Impossible de recupérer vos informations" , "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs" , [ { text : "OK" } ] ) ;
}
} )
}
}
} ) . catch ( ( e ) => {
this . showErrorDialog ( )
} ) ;
this . setState ( { myPosition : myPosition } ) ;
/ * i f ( t h i s . m a p R e f ! = = u n d e f i n e d & & t h i s . m a p R e f ! = = n u l l ) {
this . mapRef . animateToCoordinate ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude
} , 1000 ) ;
this . mapRef . animateToRegion ( {
latitude : myPosition . latitude ,
longitude : myPosition . longitude ,
latitudeDelta : 0.03 ,
longitudeDelta : 0.01 ,
} , 1000 )
} * /
}
}
createFormData = ( key , photo ) => {
this . dataToSendTemp . append ( key , {
name : photo . path . split ( '/' ) . pop ( ) ,
type : photo . mime ,
uri :
Platform . OS === "android" ? photo . path : photo . path . replace ( "file://" , "" )
} ) ;
} ;
renderLoader = ( ) => {
return (
< ProgressDialog
visible = { this . props . loadingUserIndentification || this . props . loadingValidateIdentification }
title = { I18n . t ( 'LOADING' ) }
message = { I18n . t ( 'LOADING_INFO' ) }
/ >
)
}
renderLoaderModal ( ) {
return (
< MaterialDialog
visible = { this . state . modalVisible }
title = { I18n . t ( "LOADING_INFO" ) } >
< View style = { { justifyContent : 'center' , alignItems : 'center' } } >
< Text > { I18n . t ( "LOADING_DESCRIPTION_COUNTRY" ) } < / T e x t >
< ProgressBarAndroid / >
< / V i e w >
< / M a t e r i a l D i a l o g > )
}
ckeckIfFieldIsOK ( champ ) {
return ( isNil ( champ ) || isEqual ( champ . length , 0 ) ) ;
}
renderGetUserIdentificationResponse = ( ) => {
const { resultUserIndentification , errorUserIndentification } = this . props ;
if ( resultUserIndentification !== null ) {
if ( typeof resultUserIndentification . response !== 'undefined' ) {
if ( resultUserIndentification . status === 200 ) {
if ( resultUserIndentification . response . isIdentifiedValidated ) {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
I18n . t ( 'ALREADY_VALIDATED' ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . getUserIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } )
}
}
] ,
{ cancelable : false }
)
}
if ( ! resultUserIndentification . response . isIdentified && ! resultUserIndentification . response . isIdentifiedValidated ) {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
I18n . t ( 'NOT_IDENTIFIED' ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . getUserIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
this . props . navigation . pop ( ) ;
}
}
] ,
{ cancelable : false }
)
}
if ( resultUserIndentification . response . isIdentified && ! resultUserIndentification . response . isIdentifiedValidated ) {
this . setState ( {
isIdentified : resultUserIndentification . response . isIdentified ,
isIdentifiedValidated : resultUserIndentification . response . isIdentifiedValidated ,
idIdentification : resultUserIndentification . response . data . id ,
idNetwork : resultUserIndentification . response . data . idNetwork ,
idUser : resultUserIndentification . response . data . id _user ,
displayUploadButtons : true ,
triggerSubmitClick : false
} ) ;
}
}
}
}
if ( errorUserIndentification !== null ) {
if ( typeof errorUserIndentification . data !== 'undefined' ) {
Alert . alert (
I18n . t ( 'ERROR_LABEL' ) ,
errorUserIndentification . data . error ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . getUserIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
this . props . navigation . pop ( ) ;
}
}
] ,
{ cancelable : false }
)
} else {
Alert . alert (
I18n . t ( 'ERROR_LABEL' ) ,
JSON . stringify ( errorUserIndentification ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . setState ( { triggerSubmitClick : false } ) ;
this . props . getUserIdentificationResetAction ( ) ;
this . props . navigation . pop ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
renderValidationResponse = ( ) => {
const { resultValidateIdentification , errorValidateIdentification } = this . props ;
if ( resultValidateIdentification !== null ) {
if ( typeof resultValidateIdentification . response !== 'undefined' ) {
if ( resultValidateIdentification . status === 200 ) {
Alert . alert (
'Validation effectué' ,
'Utilisateur validé avec succès' ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . validateIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
this . props . navigation . pop ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
if ( errorValidateIdentification !== null ) {
if ( typeof errorValidateIdentification . data !== 'undefined' ) {
Alert . alert (
I18n . t ( 'ERROR_LABEL' ) ,
errorValidateIdentification . data . error ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . validateIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
}
}
] ,
{ cancelable : false }
)
} else {
Alert . alert (
I18n . t ( 'ERROR_LABEL' ) ,
JSON . stringify ( errorValidateIdentification ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . validateIdentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
onSubmitValidationClient = ( ) => {
const { displayUploadButtons , numeroTelephone } = this . state ;
if ( displayUploadButtons ) {
console . log ( 'TRUE' , displayUploadButtons ) ;
this . dataToSendTemp . append ( 'id_network' , 1 ) ;
this . dataToSendTemp . append ( 'id_country' , 1 ) ;
this . props . validateIdentificationAction ( this . dataToSendTemp , this . state . idIdentification ) ;
} else {
if ( this . ckeckIfFieldIsOK ( numeroTelephone ) )
this . numeroTelephoneAnim . shake ( 800 ) ;
else {
this . props . getUserIdentificationAction ( numeroTelephone ) ;
}
}
}
2020-06-16 09:25:46 +00:00
onPicture = ( { uri } ) => {
this . setState ( { image : uri , displayCamera : true } ) ;
console . log ( "URI" , uri ) ;
}
onBackToCamera = ( ) => {
this . setState ( { image : null , displayCamera : false } ) ;
}
2020-06-18 05:38:10 +00:00
renderDialogImage = ( ) => {
return (
2020-06-23 08:55:19 +00:00
< Dialog . Container contentStyle = { { width : responsiveWidth ( 80 ) } } useNativeDriver = { true } visible = { this . state . displayImage } >
2020-06-18 05:38:10 +00:00
2020-06-23 08:55:19 +00:00
< Dialog . Title > { I18n . t ( 'PREVISUALISATION' ) } < / D i a l o g . T i t l e >
2020-06-18 05:38:10 +00:00
< View >
2020-06-23 08:55:19 +00:00
< View style = { { width : 50 } } / >
< View style = { { justifyContent : 'center' , alignContent : 'center' , alignItems : 'center' } } >
< Image source = { { uri : this . state . image . path } } style = { {
width : this . state . image . width , height : this . state . image . height , aspectRatio : 1 ,
resizeMode : 'contain'
} } / >
< / V i e w >
< View style = { { width : 50 } } / >
2020-06-18 05:38:10 +00:00
< / V i e w >
< Dialog . Button bold = { true } label = { I18n . t ( 'OK' ) } onPress = { ( ) => {
this . setState ( {
displayImage : false
} ) ;
} } / >
< / D i a l o g . C o n t a i n e r >
)
}
2020-06-10 03:10:45 +00:00
render ( ) {
console . log ( "STATE" , this . state ) ;
const { showPickerDateNaissance } = this . state ;
return (
< >
2020-06-23 08:55:19 +00:00
{ ( this . props . loadingUserIndentification || this . props . loadingValidateIdentification ) && this . renderLoader ( ) }
{ this . state . displayImage && this . renderDialogImage ( ) }
{ this . state . modalVisible && this . renderLoaderModal ( ) }
{ this . state . triggerSubmitClick && this . renderGetUserIdentificationResponse ( ) }
{ this . state . triggerValidateClick && this . renderValidationResponse ( ) }
2020-06-10 03:10:45 +00:00
< ScrollView style = { styles . container } >
< Text style = { styles . subbigtitle } > { I18n . t ( 'CREATE_IDENTIFICATION_TITLE' ) } < / T e x t >
2020-06-18 05:38:10 +00:00
{ / * < A n i m a t a b l e . V i e w s t y l e = { {
2020-06-10 03:10:45 +00:00
justifyContent : 'center' ,
alignItems : 'center'
} } ref = { ( comp ) => { this . nameanim = comp } } >
2020-06-16 09:25:46 +00:00
< TouchableOpacity onPress = { ( ) => {
this . onBackToCamera ( ) ;
this . setState ( { displayCamera : true } )
} } >
{
this . state . displayCamera ?
< View style = { styles . lottie } >
{
this . state . image ?
< Image source = { { uri : this . state . image } } style = { { flex : 1 } } / >
: < Camera onPicture = { this . onPicture } / >
}
< / V i e w >
:
< LottieView
style = { styles . lottie }
source = { require ( '../../datas/json/identity_scan.json' ) }
autoPlay
loop = { true }
/ >
}
< / T o u c h a b l e O p a c i t y >
2020-06-18 05:38:10 +00:00
< /Animatable.View> */ }
2020-06-10 03:10:45 +00:00
2020-06-23 08:55:19 +00:00
< Animatable . View ref = { ( comp ) => { this . numeroTelephoneAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'phone' }
label = { ` ${ I18n . t ( 'PHONE_NUMBER' ) } ` }
2020-06-10 03:10:45 +00:00
iconColor = { '#f95a25' }
2020-06-23 08:55:19 +00:00
value = { this . state . numeroTelephone === null ? this . state . indicatif : this . state . numeroTelephone }
2020-06-10 03:10:45 +00:00
iconSize = { 20 }
2020-06-23 08:55:19 +00:00
onChangeText = { ( numeroTelephone ) => {
this . setState ( { numeroTelephone } )
2020-06-10 03:10:45 +00:00
} }
style = { styles . input }
>
< / F u m i >
< / A n i m a t a b l e . V i e w >
2020-06-23 08:55:19 +00:00
{
this . state . displayUploadButtons &&
< View style = { { marginTop : 20 , flexDirection : 'row' } } >
2020-06-18 05:38:10 +00:00
2020-06-23 08:55:19 +00:00
< View style = { [ styles . contentPicker ] } >
2020-06-18 05:38:10 +00:00
2020-06-23 08:55:19 +00:00
< View style = { [ styles . contentPicker ] } >
2020-06-18 05:38:10 +00:00
< TouchableOpacity
style = { [ styles . contain ] }
2020-06-23 08:55:19 +00:00
onPress = { ( ) => {
2020-06-18 05:38:10 +00:00
ImagePicker . openCamera ( {
width : 200 ,
height : 200 ,
cropping : true ,
2020-06-23 08:55:19 +00:00
useFrontCamera : true
2020-06-18 05:38:10 +00:00
} ) . then ( image => {
2020-06-23 08:55:19 +00:00
this . createFormData ( 'user_image' , image ) ;
2020-06-18 05:38:10 +00:00
this . setState ( { image , displayImage : true } ) ;
} )
2020-06-23 08:55:19 +00:00
} }
2020-06-18 05:38:10 +00:00
activeOpacity = { 0.9 } >
< View style = { [ styles . contcontainerCenterentLeft ] } >
< View >
2020-06-23 08:55:19 +00:00
< Icon name = 'account-circle' color = { Color . whiteColor } style = { [ styles . thumb ] } size = { 80 } / >
2020-06-18 05:38:10 +00:00
< View style = { [ styles . point , { backgroundColor : Color . accentColor } ] } >
< Icon name = 'camera-image' color = { Color . whiteColor } size = { 20 } / >
< / V i e w >
< / V i e w >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
2020-06-23 08:55:19 +00:00
< Text style = { [ Typography . footnote , FontWeight . semibold ] , { color : Color . whiteColor } } > { I18n . t ( 'PROFILE_PICTURE' ) } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { [ styles . contentPicker ] } >
< View style = { [ styles . contentPicker ] } >
< TouchableOpacity
style = { [ styles . contain ] }
onPress = { ( ) => {
2020-06-18 05:38:10 +00:00
ImagePicker . openCamera ( {
width : 400 ,
2020-06-23 08:55:19 +00:00
height : 281 ,
2020-06-18 05:38:10 +00:00
cropping : true ,
2020-06-23 08:55:19 +00:00
useFrontCamera : false
2020-06-18 05:38:10 +00:00
} ) . then ( image => {
2020-06-23 08:55:19 +00:00
this . createFormData ( 'document_image_front' , image ) ;
2020-06-18 05:38:10 +00:00
this . setState ( { image , displayImage : true } ) ;
} )
2020-06-23 08:55:19 +00:00
} }
2020-06-18 05:38:10 +00:00
activeOpacity = { 0.9 } >
< View style = { [ styles . contcontainerCenterentLeft ] } >
< View >
2020-06-23 08:55:19 +00:00
< Icon name = 'credit-card-scan' color = { Color . whiteColor } style = { [ styles . thumb ] } size = { 80 } / >
2020-06-18 05:38:10 +00:00
< View style = { [ styles . point , { backgroundColor : Color . accentColor } ] } >
< Icon name = 'camera-image' color = { Color . whiteColor } size = { 20 } / >
< / V i e w >
< / V i e w >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
2020-06-23 08:55:19 +00:00
< Text style = { [ Typography . footnote , FontWeight . semibold ] , { color : Color . whiteColor } } > { I18n . t ( 'FRONT_FACE_CB' ) } < / T e x t >
< / V i e w >
< / V i e w >
2020-06-18 05:38:10 +00:00
2020-06-23 08:55:19 +00:00
< View style = { [ styles . contentPicker ] } >
< TouchableOpacity
style = { [ styles . contain ] }
onPress = { ( ) => {
ImagePicker . openCamera ( {
width : 400 ,
height : 281 ,
cropping : true ,
useFrontCamera : false
} ) . then ( image => {
this . createFormData ( 'document_image_back' , image ) ;
this . setState ( { image , displayImage : true } ) ;
} )
} }
activeOpacity = { 0.9 } >
< View style = { [ styles . contcontainerCenterentLeft ] } >
< View >
< Icon name = 'credit-card-off' color = { Color . whiteColor } style = { [ styles . thumb ] } size = { 80 } / >
< View style = { [ styles . point , { backgroundColor : Color . accentColor } ] } >
< Icon name = 'camera-image' color = { Color . whiteColor } size = { 20 } / >
< / V i e w >
< / V i e w >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< Text style = { [ Typography . footnote , FontWeight . semibold ] , { color : Color . whiteColor } } > { I18n . t ( 'BACK_FACE_CB' ) } < / T e x t >
< / V i e w >
< / V i e w >
}
2020-06-18 05:38:10 +00:00
2020-06-10 03:10:45 +00:00
< Button style = { styles . btnvalide }
textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoging }
2020-06-23 08:55:19 +00:00
onPress = { ( ) => {
this . onSubmitValidationClient ( ) ;
if ( this . state . displayUploadButtons )
this . setState ( { triggerValidateClick : true } ) ;
this . setState ( {
triggerSubmitClick : true
} )
} } >
2020-06-10 03:10:45 +00:00
{ I18n . t ( 'SUBMIT_LABEL' ) } < / B u t t o n >
< / S c r o l l V i e w >
< / >
)
}
}
2020-06-23 08:55:19 +00:00
const maptStateToProps = state => ( {
loadingUserIndentification : state . getUserIdentificationReducer . loading ,
resultUserIndentification : state . getUserIdentificationReducer . result ,
errorUserIndentification : state . getUserIdentificationReducer . error ,
loadingValidateIdentification : state . validateIdentificationReducer . loading ,
resultValidateIdentification : state . validateIdentificationReducer . result ,
errorValidateIdentification : state . validateIdentificationReducer . error ,
} ) ;
const mapDispatchToProps = dispatch => bindActionCreators ( {
getUserIdentificationAction ,
getUserIdentificationResetAction ,
validateIdentificationResetAction ,
validateIdentificationAction
} , dispatch ) ;
export default connect ( maptStateToProps , mapDispatchToProps ) ( ValidateIdentification ) ;
2020-06-10 03:10:45 +00:00
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
backgroundColor : Color . primaryDarkColor ,
} ,
2020-06-18 05:38:10 +00:00
contain : { flexDirection : "row" } ,
containerCenter : {
flex : 8 ,
flexDirection : "row" ,
justifyContent : "center" ,
alignItems : "center"
} ,
thumb : {
borderRadius : 30 ,
marginRight : 10
} ,
point : {
width : 25 ,
height : 25 ,
borderRadius : 11 ,
alignItems : "center" ,
justifyContent : "center" ,
position : "absolute" ,
right : 9 ,
bottom : 0
} ,
2020-06-10 03:10:45 +00:00
textbtnvalide : {
color : 'white' ,
fontWeight : 'bold'
} ,
bigtitle : {
color : 'white' ,
fontSize : 20 ,
flex : 1 ,
fontWeight : 'bold' ,
textAlign : 'center' ,
margin : 20 ,
} ,
2020-06-18 05:38:10 +00:00
contentPicker : {
padding : 10 ,
borderRadius : 8 ,
flex : 1 ,
alignItems : "center"
} ,
2020-06-10 03:10:45 +00:00
subbigtitle : {
color : 'white' ,
fontSize : 17 ,
textAlign : 'center' ,
margin : 5 ,
} ,
btnvalide : {
marginTop : 20 ,
marginLeft : 20 ,
marginRight : 20 ,
borderColor : 'transparent' ,
backgroundColor : Color . accentLightColor ,
height : 52
} ,
input : {
height : 60 ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
} ,
lottie : {
width : 540 ,
height : 300
} ,
} ) ;