ilink-world/app/screens/identification/CreateIdentificationUser.js

720 lines
28 KiB
JavaScript
Executable File

import React, {Component} from 'react';
import {
Alert,
Keyboard,
PermissionsAndroid,
Platform,
ProgressBarAndroid,
ScrollView,
StyleSheet,
Text,
View
} from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {Fumi} from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable';
import Button from 'apsl-react-native-button';
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-v2';
import {getPositionInformation} from './../../webservice/MapService';
import {ProgressDialog} from 'react-native-simple-dialogs';
import {getListCountriesActive, getTownInformationName, readUser} from './../../webservice/AuthApi';
import {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';
import {
createIndentificationAction,
createIndentificationResetAction,
getUserIdentificationAction
} from '../../webservice/IdentificationApi';
import SwitchSelector from "react-native-switch-selector";
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
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: I18n.t((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,
sexe: [
{label: I18n.t('MASCULIN'), value: "M"},
{label: I18n.t('FEMININ'), value: "F"},
],
gender: 'M'
};
this.dateNaissanceFumiProps = {};
this.dateExpirationFumiProps = {};
this.props.createIndentificationResetAction();
}
componentDidMount() {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
let firstname = user.firstname !== null ? user.firstname : '';
this.setState({
user,
lastname: `${firstname} ${user.lastname}`
});
}
}
});
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();
this.props.getUserIdentificationAction(this.state.user.phone);
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});
/* if (this.mapRef !== undefined && this.mapRef !== null) {
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,
id_user: this.state.user.id,
gender: this.state.gender
});
}
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")}</Text>
<ProgressBarAndroid/>
</View>
</MaterialDialog>)
}
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')}</Text>
<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}
>
</Fumi>
</Animatable.View>
<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}>
</Fumi>
</Animatable.View>
<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
}}
/>
</Animatable.View>
<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
}}
/>
</Animatable.View>
<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 I18n.t(value.name)
}}
labelExtractor={(value) => {
return I18n.t(value.name)
}}
/>
</Animatable.View>
<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}
>
</Fumi>
</Animatable.View>
<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}>
</Fumi>
</Animatable.View>
<View style={{
paddingLeft: 20,
paddingRight: 20,
marginTop: 10,
flexDirection: 'row',
justifyContent: "space-between"
}}>
<Text style={{color: Color.whiteColor}}>{I18n.t('SEXE')}</Text>
<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})
}}/>
</View>
</View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.state.isLoging}
onPress={() => {
this.onSubmitIdentityClient()
}}>
{I18n.t('SUBMIT_LABEL')}</Button>
</ScrollView>
</>
)
}
}
const maptStateToProps = state => ({
loading: state.createIdentificationReducer.loading,
result: state.createIdentificationReducer.result,
error: state.createIdentificationReducer.error,
});
const mapDispatchToProps = dispatch => bindActionCreators({
createIndentificationAction,
createIndentificationResetAction,
getUserIdentificationAction
}, 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,
},
contentSwitch: {
width: responsiveWidth(40),
},
});