2020-05-30 21:58:22 +00:00
import React , { Component } from 'react' ;
2020-06-12 11:13:59 +00:00
import { Alert , ActivityIndicator , StyleSheet , Text , View , Image , ScrollView , Platform , ProgressBarAndroid , PermissionsAndroid , Keyboard } from 'react-native' ;
2020-05-30 21:58:22 +00:00
import PropTypes from 'prop-types' ;
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome' ;
import Ionicons from 'react-native-vector-icons/Ionicons' ;
import Icon from 'react-native-vector-icons/MaterialIcons' ;
import { responsiveHeight , responsiveWidth , responsiveFontSize } from 'react-native-responsive-dimensions' ;
import { Fumi , Kaede } from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable' ;
import Button from 'apsl-react-native-button' ;
let theme = require ( './../../utils/theme.json' ) ;
let route = require ( './../../route.json' ) ;
import I18n from 'react-native-i18n' ;
import isEqual from 'lodash/isEqual' ;
2020-06-12 11:13:59 +00:00
import isNil from 'lodash/isNil' ;
2020-05-30 21:58:22 +00:00
import { Color } from '../../config/Color' ;
import DateTimePicker from '@react-native-community/datetimepicker' ;
import { Dropdown } from 'react-native-material-dropdown' ;
import { getPositionInformation } from './../../webservice/MapService' ;
2020-06-12 11:13:59 +00:00
import { ProgressDialog } from 'react-native-simple-dialogs' ;
2020-05-30 21:58:22 +00:00
import { getCountryNetwork , createGeolocatedAccount , createUserAccount , getTownInformationName , getListCountriesActive , getCodeInformation , readUser } from './../../webservice/AuthApi' ;
import { SinglePickerMaterialDialog , MultiPickerMaterialDialog , MaterialDialog } from "react-native-material-dialog" ;
import Geolocation from 'react-native-geolocation-service' ;
import { identityPieces } from '../../utils/UtilsFunction' ;
2020-06-12 11:13:59 +00:00
import { connect } from 'react-redux' ;
import { bindActionCreators } from 'redux' ;
2020-10-17 19:42:00 +00:00
import { createIndentificationAction , createIndentificationResetAction , getNumberResetAction , getNumberDetailAction , getUserIdentificationAction } from '../../webservice/IdentificationApi' ;
2021-11-11 11:43:33 +00:00
import SwitchSelector from "react-native-switch-selector" ;
2020-05-30 21:58:22 +00:00
const GEOLOCATION _OPTIONS = { enableHighAccuracy : true , timeout : 20000 , maximumAge : 1000 , useSignificantChanges : true } ;
const moment = require ( 'moment' ) ;
2020-06-12 11:13:59 +00:00
class CreateIdentification extends Component {
2020-05-30 21:58:22 +00:00
static navigatorStyle = {
navBarBackgroundColor : Color . primaryColor ,
statusBarColor : Color . primaryDarkColor ,
navBarTextColor : '#FFFFFF' ,
navBarButtonColor : '#FFFFFF'
} ;
static navigationOptions = ( ) => {
return {
drawerLabel : ( ) => null ,
headerTitle : I18n . t ( 'CREATION_IDENTIFICATION_DESCRIPTION' ) ,
headerTintColor : 'white' ,
headerStyle : {
backgroundColor : Color . primaryColor ,
marginTop : 0 ,
color : 'white'
} ,
headerTitleStyle : {
color : "white"
} ,
title : I18n . t ( 'CREATION_IDENTIFICATION_DESCRIPTION' )
}
} ;
constructor ( props ) {
super ( props ) ;
this . state = {
enterPhone : null ,
2020-06-12 11:13:59 +00:00
firstname : null ,
lastname : null ,
2020-06-10 03:10:45 +00:00
numeroIdentite : null ,
2020-06-12 11:13:59 +00:00
dateNaissance : null ,
dateExpiration : null ,
numeroTelephone : null ,
2020-05-30 21:58:22 +00:00
networksinglePickerVisible : false ,
confirmpassanim : null ,
2020-06-16 09:25:46 +00:00
userId : null ,
2020-05-30 21:58:22 +00:00
isLoging : false ,
countries : [ ] ,
town : [ ] ,
2020-06-12 11:13:59 +00:00
townName : null ,
country : null ,
2020-05-30 21:58:22 +00:00
identityPieces : identityPieces ( ) ,
2020-11-04 20:02:23 +00:00
identityPiecesName : I18n . t ( ( identityPieces ( ) [ 0 ] ) . name ) ,
2020-05-30 21:58:22 +00:00
snackVisible : false ,
snackText : '' ,
disableNetwork : false ,
networks : [ ] ,
showPickerDateNaissance : false ,
2020-06-10 03:10:45 +00:00
showPickerDateExpiration : false ,
2020-05-30 21:58:22 +00:00
modalVisible : true ,
select _network : I18n . t ( "SELECT_NETWORK" ) ,
2020-06-12 11:13:59 +00:00
user : null ,
2020-06-16 09:25:46 +00:00
triggerSubmitClick : false ,
triggerNextClick : false ,
displayFirstStep : true ,
displaySecondStep : false ,
2021-11-11 11:43:33 +00:00
sexe : [
{ label : I18n . t ( 'MASCULIN' ) , value : "M" } ,
{ label : I18n . t ( 'FEMININ' ) , value : "F" } ,
] ,
gender : 'M'
2020-05-30 21:58:22 +00:00
} ;
this . dateNaissanceFumiProps = { } ;
2020-06-10 03:10:45 +00:00
this . dateExpirationFumiProps = { } ;
2020-06-12 11:13:59 +00:00
this . props . createIndentificationResetAction ( ) ;
2020-06-16 09:25:46 +00:00
this . props . getNumberResetAction ( ) ;
2020-05-30 21:58:22 +00:00
}
componentDidMount ( ) {
2020-06-12 11:13:59 +00:00
2020-05-30 21:58:22 +00:00
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user !== undefined ) {
this . setState ( { user } ) ;
}
}
} ) ;
2020-06-12 11:13:59 +00:00
2020-05-30 21:58:22 +00:00
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . watchLocation ( ) ;
}
2020-06-12 11:13:59 +00:00
2020-05-30 21:58:22 +00:00
}
2020-06-12 11:13:59 +00:00
renderCreateIdentificationResponse ( ) {
const { result , error } = this . props ;
console . log ( "PROPS" , this . props ) ;
if ( result !== null ) {
if ( typeof result . response !== 'undefined' ) {
Alert . alert (
2020-06-16 09:25:46 +00:00
I18n . t ( 'SUCCESS_IDENTIFICATION' ) ,
result . response ,
2020-06-12 11:13:59 +00:00
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
2020-10-17 19:42:00 +00:00
this . props . getUserIdentificationAction ( this . state . user . phone ) ;
2020-06-16 09:25:46 +00:00
this . setState ( { triggerSubmitClick : false } ) ;
this . props . navigation . pop ( ) ;
2020-06-12 11:13:59 +00:00
}
}
] ,
{ cancelable : false }
)
}
}
if ( error !== null ) {
if ( typeof error . data !== 'undefined' ) {
Alert . alert (
2020-06-16 09:25:46 +00:00
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
error . data . error ,
2020-06-12 11:13:59 +00:00
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
2020-06-16 09:25:46 +00:00
this . setState ( { triggerSubmitClick : false } ) ;
2020-06-12 11:13:59 +00:00
}
}
] ,
{ cancelable : false }
)
} else {
Alert . alert (
2020-06-16 09:25:46 +00:00
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
2020-06-12 11:13:59 +00:00
JSON . stringify ( error ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
2020-06-16 09:25:46 +00:00
2020-05-30 21:58:22 +00:00
componentWillUpdate ( nextProps , nextState ) {
2020-06-16 09:25:46 +00:00
let dateNaissance = nextState . dateNaissance || new Date ( ) ;
2020-05-30 21:58:22 +00:00
if ( this . state . showPickerDateNaissance )
2020-06-16 09:25:46 +00:00
this . dateNaissanceFumiProps . value = moment ( dateNaissance ) . format ( 'DD-MM-YYYY' ) ;
2020-06-10 03:10:45 +00:00
if ( this . state . showPickerDateExpiration )
this . dateExpirationFumiProps . value = moment ( nextState . dateExpiration ) . format ( 'DD-MM-YYYY' ) ;
2020-05-30 21:58:22 +00:00
}
componentWillUnmount ( ) {
this . mounted = false ;
if ( this . watchID ) Geolocation . clearWatch ( this . watchID ) ;
}
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-05-30 21:58:22 +00:00
"et que vous êtes connecté à internet puis ressayer" , [ {
text : "Recommencer" , onPress : ( ) => {
this . watchLocation ( )
}
} , { text : "Annuler" , onPress : ( ) => { this . props . navigation . popToTop ( ) } } ] )
}
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 )
}
}
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 ( )
}
} ] )
}
}
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 ;
this . setState ( { townName : name } ) ;
getTownInformationName ( name ) . then ( ( result ) => {
let town = null ;
if ( result instanceof Array ) {
town = result [ 0 ] ;
2020-06-12 11:13:59 +00:00
} else {
2020-05-30 21:58:22 +00:00
town = result ;
2020-06-12 11:13:59 +00:00
}
2020-05-30 21:58:22 +00:00
this . setState ( { modalVisible : false , town : new Array ( town ) } ) ;
} )
}
}
}
getListCountriesActive ( ) . then ( ( cnt ) => {
this . setState ( { countries : cnt } )
console . debug ( cnt , shortcountry ) ;
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 } ) ;
}
}
2020-06-10 03:10:45 +00:00
onChangeDateNaissance = ( event , selectedDate ) => {
2020-06-16 09:25:46 +00:00
let dateNaissance = isNil ( this . state . dateNaissance ) ? new Date ( ) : this . state . dateNaissance ;
const currentDate = selectedDate || dateNaissance ;
2020-05-30 21:58:22 +00:00
this . setState ( {
showPickerDateNaissance : Platform . OS === 'ios' || false ,
2020-06-16 09:25:46 +00:00
dateNaissance : currentDate ,
2020-05-30 21:58:22 +00:00
} ) ;
} ;
2020-06-10 03:10:45 +00:00
onChangeDateExpiration = ( event , selectedDate ) => {
2020-06-16 09:25:46 +00:00
let dateExpiration = isNil ( this . state . dateExpiration ) ? new Date ( ) : this . state . dateExpiration ;
const currentDate = selectedDate || dateExpiration ;
2020-06-10 03:10:45 +00:00
this . setState ( {
showPickerDateExpiration : Platform . OS === 'ios' || false ,
2020-06-16 09:25:46 +00:00
dateExpiration : currentDate ,
2020-06-10 03:10:45 +00:00
} ) ;
} ;
2020-06-16 09:25:46 +00:00
onSubmitNextStep = ( ) => {
const { numeroTelephone } = this . state ;
this . props . getNumberResetAction ( ) ;
if ( this . ckeckIfFieldIsOK ( numeroTelephone ) )
this . numeroTelephoneAnim . shake ( 800 ) ;
else {
this . props . getNumberDetailAction ( numeroTelephone ) ;
this . setState ( { triggerNextClick : true } ) ;
}
}
onSubmitPrevious = ( ) => {
this . setState ( {
displayFirstStep : ! this . state . displayFirstStep ,
displaySecondStep : ! this . state . displaySecondStep ,
} )
}
2020-06-12 11:13:59 +00:00
ckeckIfFieldIsOK ( champ ) {
return ( isNil ( champ ) || isEqual ( champ . length , 0 ) ) ;
}
onSubmitIdentityClient = ( ) => {
const { lastname , numeroTelephone , numeroIdentite , dateNaissance , dateExpiration , country , townName , identityPiecesName } = this . state ;
if ( this . ckeckIfFieldIsOK ( lastname ) )
this . lastnameAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( dateNaissance ) )
this . datenaissanceAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( country ) )
this . countryAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( townName ) )
this . townAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( identityPiecesName ) )
this . identityPiecesAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( numeroIdentite ) )
this . numeroIdentiteAnim . shake ( 800 ) ;
else if ( this . ckeckIfFieldIsOK ( dateExpiration ) )
this . identityDateExpiryAnim . shake ( 800 ) ;
else {
2020-06-16 09:25:46 +00:00
moment ( dateNaissance ) . format ( 'DD-MM-YYYY' )
2020-06-12 11:13:59 +00:00
this . props . createIndentificationAction ( {
lastname : this . state . lastname ,
firstname : "" ,
2020-06-16 09:25:46 +00:00
birth _date : moment ( this . state . dateNaissance ) . format ( 'DD-MM-YYYY' ) ,
2020-06-12 11:13:59 +00:00
town : this . state . townName ,
country : this . state . country ,
identity _document : this . state . identityPiecesName ,
id _identity _document : this . state . numeroIdentite ,
2020-06-16 09:25:46 +00:00
expiry _date _document : moment ( this . state . dateExpiration ) . format ( 'DD-MM-YYYY' ) ,
phone _number : this . state . numeroTelephone ,
2021-11-11 11:43:33 +00:00
id _user : this . state . userId ,
gender : this . state . gender
2020-06-12 11:13:59 +00:00
} ) ;
}
this . setState ( {
triggerSubmitClick : true
} )
}
2020-06-16 09:25:46 +00:00
renderGetNumberResponse = ( ) => {
const { resultNumberDetail , errorNumberDetail } = this . props ;
console . log ( "PROPS" , this . props ) ;
if ( resultNumberDetail !== null ) {
if ( resultNumberDetail . status === 200 ) {
this . setState ( {
lastname : resultNumberDetail . response . lastname ,
userId : resultNumberDetail . response . id ,
displayFirstStep : ! this . state . displayFirstStep ,
displaySecondStep : ! this . state . displaySecondStep ,
} ) ;
this . props . getNumberResetAction ( ) ;
}
/ * i f ( t y p e o f r e s u l t N u m b e r D e t a i l . r e s p o n s e ! = = ' u n d e f i n e d ' ) {
Alert . alert (
"SUCCES" ,
JSON . stringify ( resultNumberDetail . response ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . getNumberResetAction ( ) ;
this . setState ( { triggerNextClick : false } )
}
}
2021-11-11 11:43:33 +00:00
2020-06-16 09:25:46 +00:00
] ,
{ cancelable : false }
)
} * /
}
if ( errorNumberDetail !== null ) {
if ( typeof errorNumberDetail . data !== 'undefined' ) {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
errorNumberDetail . data . error ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
this . setState ( { triggerNextClick : false } )
}
}
] ,
{ cancelable : false }
)
} else {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
JSON . stringify ( errorNumberDetail ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
2020-05-30 21:58:22 +00:00
renderLoaderModal ( ) {
2020-06-12 11:13:59 +00:00
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 > )
}
renderLoader = ( ) => {
return (
< ProgressDialog
2020-06-16 09:25:46 +00:00
visible = { this . props . loading || this . props . loadingNumberDetail }
2020-06-12 11:13:59 +00:00
title = { I18n . t ( 'LOADING' ) }
message = { I18n . t ( 'LOADING_INFO' ) }
/ >
)
2020-05-30 21:58:22 +00:00
}
renderDateNaissancePicker = ( ) => {
return (
< DateTimePicker
testID = "dateTimePicker"
timeZoneOffsetInMinutes = { 0 }
is24Hour = { true }
2020-06-16 09:25:46 +00:00
value = { isNil ( this . state . dateNaissance ) ? new Date ( ) : this . state . dateNaissance }
2020-05-30 21:58:22 +00:00
mode = 'date'
maximumDate = { new Date ( ) }
2020-06-10 03:10:45 +00:00
display = "spinner"
onChange = { this . onChangeDateNaissance }
/ >
) ;
}
renderDateExpirationPicker = ( ) => {
return (
< DateTimePicker
testID = "dateTimePicker"
timeZoneOffsetInMinutes = { 0 }
is24Hour = { true }
2020-06-16 09:25:46 +00:00
value = { isNil ( this . state . dateExpiration ) ? new Date ( ) : this . state . dateExpiration }
2020-06-10 03:10:45 +00:00
mode = 'date'
maximumDate = { new Date ( 2300 , 10 , 20 ) }
display = "spinner"
onChange = { this . onChangeDateExpiration }
2020-05-30 21:58:22 +00:00
/ >
) ;
}
render ( ) {
console . log ( "STATE" , this . state ) ;
const { showPickerDateNaissance } = this . state ;
return (
< >
{ this . state . showPickerDateNaissance && this . renderDateNaissancePicker ( ) }
2020-06-10 03:10:45 +00:00
{ this . state . showPickerDateExpiration && this . renderDateExpirationPicker ( ) }
2020-05-30 21:58:22 +00:00
{ this . state . modalVisible && this . renderLoaderModal ( ) }
2020-06-16 09:25:46 +00:00
{ ( this . props . loading || this . props . loadingNumberDetail ) && this . renderLoader ( ) }
2020-06-12 11:13:59 +00:00
{ this . state . triggerSubmitClick && this . renderCreateIdentificationResponse ( ) }
2020-06-16 09:25:46 +00:00
{ this . state . triggerNextClick && this . renderGetNumberResponse ( ) }
2020-05-30 21:58:22 +00:00
< ScrollView style = { styles . container } >
2020-06-16 09:25:46 +00:00
{ this . state . displayFirstStep &&
< >
< Text style = { styles . subbigtitle } > { I18n . t ( 'CREATE_IDENTIFICATION_TITLE' ) } < / T e x t >
< Animatable . View ref = { ( comp ) => { this . numeroTelephoneAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'phone' }
label = { I18n . t ( 'PHONE' ) }
iconColor = { '#f95a25' }
2020-06-23 10:28:52 +00:00
keyboardType = 'phone-pad'
2020-06-16 09:25:46 +00:00
value = { this . state . numeroTelephone === null ? this . state . indicatif : this . state . numeroTelephone }
iconSize = { 20 }
onChangeText = { ( numeroTelephone ) => {
this . setState ( { numeroTelephone } )
} }
style = { styles . input }
>
< / F u m i >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . countryAnim = comp } }
style = { {
width : responsiveWidth ( 90 ) ,
height : 60 ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
backgroundColor : 'white'
} } >
< Dropdown
label = { I18n . t ( 'COUNTRY_CHOICE' ) }
data = { this . state . countries }
useNativeDriver = { true }
value = { this . state . country === null ? "" :
this . state . country }
onChangeText = { ( value , index , data ) => {
this . setState ( { country : value } ) ;
} }
valueExtractor = { ( value ) => { return value . name } }
labelExtractor = { ( value ) => { return value . name } }
/ >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . townAnim = comp } }
style = { {
width : responsiveWidth ( 90 ) ,
height : 60 ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
backgroundColor : 'white'
} } >
< Dropdown
label = { I18n . t ( 'CHOICE_TOWN' ) }
data = { this . state . town }
useNativeDriver = { true }
value = { this . state . townName === null ? "" :
this . state . townName }
onChangeText = { ( value , index , data ) => {
this . setState ( { townName : value } ) ;
} }
valueExtractor = { ( value ) => { return value . name } }
labelExtractor = { ( value ) => { return value . name } }
/ >
< / A n i m a t a b l e . V i e w >
< Button style = { styles . btnvalide }
textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoging }
onPress = { ( ) => { this . onSubmitNextStep ( ) } } >
{ I18n . t ( 'NEXT' ) } < / B u t t o n >
< / > }
{ this . state . displaySecondStep &&
< >
< Animatable . View ref = { ( comp ) => { this . lastnameAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'user' }
label = { ` ${ I18n . t ( 'NAME' ) } ${ I18n . t ( 'AND' ) } ${ I18n . t ( 'FIRSTNAME' ) } ` }
iconColor = { '#f95a25' }
iconSize = { 20 }
value = { this . state . lastname }
onChangeText = { ( lastname ) => {
this . setState ( { lastname } )
} }
style = { styles . input }
>
< / F u m i >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . datenaissanceAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'calendar' }
label = { I18n . t ( 'DATE_NAISSANCE' ) }
iconColor = { '#f95a25' }
iconSize = { 20 }
style = { styles . input }
onFocus = { ( ) => {
Keyboard . dismiss ( ) ;
this . setState ( { showPickerDateNaissance : true } )
} }
{ ... this . dateNaissanceFumiProps } >
< / F u m i >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . identityPiecesAnim = comp } }
style = { {
width : responsiveWidth ( 90 ) ,
height : 60 ,
marginTop : 20 ,
alignSelf : 'center' ,
borderRadius : 10 ,
paddingLeft : 20 ,
paddingRight : 20 ,
backgroundColor : 'white'
} } >
< Dropdown
label = { I18n . t ( 'PIECE_IDENTITE' ) }
data = { this . state . identityPieces }
useNativeDriver = { true }
value = { this . state . identityPiecesName }
onChangeText = { ( value , index , data ) => {
this . setState ( { identityPiecesName : value } ) ;
} }
2020-11-04 20:02:23 +00:00
valueExtractor = { ( value ) => { return I18n . t ( value . name ) } }
labelExtractor = { ( value ) => { return I18n . t ( value . name ) } }
2020-06-16 09:25:46 +00:00
/ >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . numeroIdentiteAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'address-card' }
label = { ` ${ I18n . t ( 'NUMERO_IDENTITE' ) } ` }
iconColor = { '#f95a25' }
iconSize = { 20 }
onChangeText = { ( numeroIdentite ) => {
this . setState ( { numeroIdentite } )
} }
style = { styles . input }
>
< / F u m i >
< / A n i m a t a b l e . V i e w >
< Animatable . View ref = { ( comp ) => { this . identityDateExpiryAnim = comp } } >
< Fumi iconClass = { FontAwesomeIcon } iconName = { 'calendar-times-o' }
label = { I18n . t ( 'IDENTITY_PIECE_EXPIRY_DATE' ) }
iconColor = { '#f95a25' }
iconSize = { 20 }
style = { styles . input }
onFocus = { ( ) => {
Keyboard . dismiss ( ) ;
this . setState ( { showPickerDateExpiration : true } )
} }
{ ... this . dateExpirationFumiProps } >
< / F u m i >
< / A n i m a t a b l e . V i e w >
2021-11-11 11:43:33 +00:00
< View style = { {
paddingLeft : 20 ,
paddingRight : 20 ,
marginTop : 10 ,
flexDirection : 'row' ,
justifyContent : "space-between"
} } >
< Text style = { { color : Color . whiteColor } } > { I18n . t ( 'SEXE' ) } < / T e x t >
< View style = { styles . contentSwitch } >
< SwitchSelector options = { this . state . sexe }
initial = { 0 }
buttonColor = { Color . accentColor }
backgroundColor = { Color . primaryDarkColor }
textColor = 'white'
bold = { true }
hasPadding
height = { 32 }
onPress = { ( value ) => {
this . setState ( { gender : value } )
} } / >
< / V i e w >
< / V i e w >
2020-06-16 09:25:46 +00:00
< View style = { { flexDirection : 'row' , justifyContent : 'space-between' , flex : 1 } } >
< Button style = { styles . btnSubmit }
textStyle = { styles . textbtnvalide }
onPress = { ( ) => { this . onSubmitPrevious ( ) } } >
{ I18n . t ( 'PREVIOUS' ) } < / B u t t o n >
< Button style = { styles . btnSubmit }
textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoging }
onPress = { ( ) => { this . onSubmitIdentityClient ( ) } } >
{ I18n . t ( 'SUBMIT_LABEL' ) } < / B u t t o n >
< / V i e w >
< / >
}
2020-05-30 21:58:22 +00:00
< / S c r o l l V i e w >
< / >
)
}
}
2020-06-12 11:13:59 +00:00
const maptStateToProps = state => ( {
loading : state . createIdentificationReducer . loading ,
result : state . createIdentificationReducer . result ,
error : state . createIdentificationReducer . error ,
2020-06-16 09:25:46 +00:00
loadingNumberDetail : state . getNumberInformationReducer . loading ,
resultNumberDetail : state . getNumberInformationReducer . result ,
errorNumberDetail : state . getNumberInformationReducer . error ,
2020-06-12 11:13:59 +00:00
} ) ;
const mapDispatchToProps = dispatch => bindActionCreators ( {
createIndentificationAction ,
2020-06-16 09:25:46 +00:00
createIndentificationResetAction ,
getNumberDetailAction ,
2020-10-17 19:42:00 +00:00
getNumberResetAction ,
getUserIdentificationAction
2020-06-12 11:13:59 +00:00
} , dispatch ) ;
export default connect ( maptStateToProps , mapDispatchToProps ) ( CreateIdentification ) ;
2020-05-30 21:58:22 +00:00
const styles = StyleSheet . create ( {
container : {
flex : 1 ,
backgroundColor : Color . primaryDarkColor ,
} ,
textbtnvalide : {
color : 'white' ,
fontWeight : 'bold'
} ,
bigtitle : {
color : 'white' ,
fontSize : 20 ,
flex : 1 ,
fontWeight : 'bold' ,
textAlign : 'center' ,
margin : 20 ,
} ,
subbigtitle : {
color : 'white' ,
fontSize : 17 ,
textAlign : 'center' ,
margin : 5 ,
} ,
btnvalide : {
marginTop : 20 ,
marginLeft : 20 ,
marginRight : 20 ,
borderColor : 'transparent' ,
backgroundColor : Color . accentLightColor ,
height : 52
} ,
2020-06-16 09:25:46 +00:00
btnSubmit : {
marginTop : 20 ,
borderColor : 'transparent' ,
backgroundColor : Color . accentLightColor ,
height : 52 ,
width : "30%" ,
marginLeft : 20 ,
marginRight : 20 ,
} ,
2020-05-30 21:58:22 +00:00
input : {
height : 60 ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
}
2021-11-11 11:43:33 +00:00
} ) ;
