2020-06-16 09:25:46 +00:00
import React , { Component } from 'react' ;
import { Alert , ActivityIndicator , StyleSheet , Text , View , Image , ScrollView , Platform , ProgressBarAndroid , PermissionsAndroid , Keyboard } from 'react-native' ;
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' ;
import isNil from 'lodash/isNil' ;
import { Color } from '../../config/Color' ;
import DateTimePicker from '@react-native-community/datetimepicker' ;
import { Dropdown } from 'react-native-material-dropdown' ;
import { getPositionInformation } from './../../webservice/MapService' ;
import { ProgressDialog } from 'react-native-simple-dialogs' ;
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' ;
import { connect } from 'react-redux' ;
import { bindActionCreators } from 'redux' ;
2020-10-17 19:42:00 +00:00
import { createIndentificationAction , createIndentificationResetAction , getUserIdentificationAction } from '../../webservice/IdentificationApi' ;
2020-06-16 09:25:46 +00:00
const GEOLOCATION _OPTIONS = { enableHighAccuracy : true , timeout : 20000 , maximumAge : 1000 , useSignificantChanges : true } ;
const moment = require ( 'moment' ) ;
class CreateIdentificationUser extends Component {
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 = {
lastname : '' ,
numeroIdentite : null ,
dateNaissance : null ,
dateExpiration : null ,
networksinglePickerVisible : false ,
isLoging : false ,
countries : [ ] ,
town : [ ] ,
townName : null ,
country : null ,
identityPieces : identityPieces ( ) ,
identityPiecesName : ( identityPieces ( ) [ 0 ] ) . name ,
snackVisible : false ,
snackText : '' ,
disableNetwork : false ,
networks : [ ] ,
showPickerDateNaissance : false ,
showPickerDateExpiration : false ,
modalVisible : true ,
select _network : I18n . t ( "SELECT_NETWORK" ) ,
user : null ,
triggerSubmitClick : false
} ;
this . dateNaissanceFumiProps = { } ;
this . dateExpirationFumiProps = { } ;
this . props . createIndentificationResetAction ( ) ;
}
componentDidMount ( ) {
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user !== undefined ) {
2020-07-28 17:37:46 +00:00
let firstname = user . firstname !== null ? user . firstname : '' ;
2020-06-16 09:25:46 +00:00
this . setState ( {
user ,
2020-07-28 17:37:46 +00:00
lastname : ` ${ firstname } ${ user . lastname } `
2020-06-16 09:25:46 +00:00
} ) ;
}
}
} ) ;
if ( Platform . OS === 'android' ) {
this . requestCameraPermission ( ) ;
} else {
this . watchLocation ( ) ;
}
}
renderCreateIdentificationResponse ( ) {
const { result , error } = this . props ;
console . log ( "PROPS" , this . props ) ;
if ( result !== null ) {
if ( typeof result . response !== 'undefined' ) {
Alert . alert (
I18n . t ( 'SUCCESS_IDENTIFICATION' ) ,
result . response ,
[
{
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 ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
if ( error !== null ) {
if ( typeof error . data !== 'undefined' ) {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
error . data . error ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
this . setState ( { triggerSubmitClick : false } ) ;
}
}
] ,
{ cancelable : false }
)
} else {
Alert . alert (
I18n . t ( 'ERROR_IDENTIFICATION' ) ,
JSON . stringify ( error ) ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . createIndentificationResetAction ( ) ;
}
}
] ,
{ cancelable : false }
)
}
}
}
componentWillUpdate ( nextProps , nextState ) {
let dateNaissance = nextState . dateNaissance || new Date ( ) ;
if ( this . state . showPickerDateNaissance )
this . dateNaissanceFumiProps . value = moment ( dateNaissance ) . format ( 'DD-MM-YYYY' ) ;
if ( this . state . showPickerDateExpiration )
this . dateExpirationFumiProps . value = moment ( nextState . dateExpiration ) . format ( 'DD-MM-YYYY' ) ;
}
componentWillUnmount ( ) {
this . mounted = false ;
if ( this . watchID ) Geolocation . clearWatch ( this . watchID ) ;
}
showErrorDialog ( ) {
this . setState ( { modalDialog : false } )
Aler . alert ( "Une erreur est survenue" , "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
"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 ] ;
} else {
town = result ;
}
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 , 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 )
} * /
}
}
onChangeDateNaissance = ( event , selectedDate ) => {
let dateNaissance = isNil ( this . state . dateNaissance ) ? new Date ( ) : this . state . dateNaissance ;
const currentDate = selectedDate || dateNaissance ;
this . setState ( {
showPickerDateNaissance : Platform . OS === 'ios' || false ,
dateNaissance : currentDate ,
} ) ;
} ;
onChangeDateExpiration = ( event , selectedDate ) => {
let dateExpiration = isNil ( this . state . dateExpiration ) ? new Date ( ) : this . state . dateExpiration ;
const currentDate = selectedDate || dateExpiration ;
this . setState ( {
showPickerDateExpiration : Platform . OS === 'ios' || false ,
dateExpiration : currentDate ,
} ) ;
} ;
ckeckIfFieldIsOK ( champ ) {
return ( isNil ( champ ) || isEqual ( champ . length , 0 ) ) ;
}
onSubmitIdentityClient = ( ) => {
const { lastname , 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 {
this . props . createIndentificationAction ( {
lastname : this . state . lastname ,
firstname : "" ,
birth _date : moment ( this . state . dateNaissance ) . format ( 'DD-MM-YYYY' ) ,
town : this . state . townName ,
country : this . state . country ,
identity _document : this . state . identityPiecesName ,
id _identity _document : this . state . numeroIdentite ,
expiry _date _document : moment ( this . state . dateExpiration ) . format ( 'DD-MM-YYYY' ) ,
phone _number : null ,
2020-07-28 17:37:46 +00:00
id _user : this . state . user . id
2020-06-16 09:25:46 +00:00
} ) ;
}
this . setState ( {
triggerSubmitClick : true
} )
}
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 > )
}
renderLoader = ( ) => {
return (
< ProgressDialog
visible = { this . props . loading }
title = { I18n . t ( 'LOADING' ) }
message = { I18n . t ( 'LOADING_INFO' ) }
/ >
)
}
renderDateNaissancePicker = ( ) => {
return (
< DateTimePicker
testID = "dateTimePicker"
timeZoneOffsetInMinutes = { 0 }
is24Hour = { true }
value = { isNil ( this . state . dateNaissance ) ? new Date ( ) : this . state . dateNaissance }
mode = 'date'
maximumDate = { new Date ( ) }
display = "spinner"
onChange = { this . onChangeDateNaissance }
/ >
) ;
}
renderDateExpirationPicker = ( ) => {
return (
< DateTimePicker
testID = "dateTimePicker"
timeZoneOffsetInMinutes = { 0 }
is24Hour = { true }
value = { isNil ( this . state . dateExpiration ) ? new Date ( ) : this . state . dateExpiration }
mode = 'date'
maximumDate = { new Date ( 2300 , 10 , 20 ) }
display = "spinner"
onChange = { this . onChangeDateExpiration }
/ >
) ;
}
render ( ) {
console . log ( "STATE" , this . state ) ;
return (
< >
{ this . state . showPickerDateNaissance && this . renderDateNaissancePicker ( ) }
{ this . state . showPickerDateExpiration && this . renderDateExpirationPicker ( ) }
{ this . state . modalVisible && this . renderLoaderModal ( ) }
{ this . props . loading && this . renderLoader ( ) }
{ this . state . triggerSubmitClick && this . renderCreateIdentificationResponse ( ) }
< ScrollView style = { styles . container } >
< Text style = { styles . subbigtitle } > { I18n . t ( 'CREATE_IDENTIFICATION_TITLE' ) } < / T e x t >
< 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 . 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 >
< 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 } ) ;
} }
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 . 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 >
< Button style = { styles . btnvalide }
textStyle = { styles . textbtnvalide }
isLoading = { this . state . isLoging }
onPress = { ( ) => { this . onSubmitIdentityClient ( ) } } >
{ I18n . t ( 'SUBMIT_LABEL' ) } < / B u t t o n >
< / S c r o l l V i e w >
< / >
)
}
}
const maptStateToProps = state => ( {
loading : state . createIdentificationReducer . loading ,
result : state . createIdentificationReducer . result ,
error : state . createIdentificationReducer . error ,
} ) ;
const mapDispatchToProps = dispatch => bindActionCreators ( {
createIndentificationAction ,
2020-10-17 19:42:00 +00:00
createIndentificationResetAction ,
getUserIdentificationAction
2020-06-16 09:25:46 +00:00
} , dispatch ) ;
export default connect ( maptStateToProps , mapDispatchToProps ) ( CreateIdentificationUser ) ;
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
} ,
input : {
height : 60 ,
marginTop : responsiveHeight ( 2 ) ,
marginLeft : responsiveWidth ( 5 ) ,
marginRight : responsiveWidth ( 5 ) ,
borderRadius : 5 ,
}
} ) ;