795 lines
37 KiB
JavaScript
Executable File
795 lines
37 KiB
JavaScript
Executable File
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';
|
|
import { createIndentificationAction, createIndentificationResetAction, getNumberResetAction, getNumberDetailAction, getUserIdentificationAction } from '../../webservice/IdentificationApi';
|
|
import SwitchSelector from "react-native-switch-selector";
|
|
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
|
|
const moment = require('moment');
|
|
|
|
class CreateIdentification 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 = {
|
|
enterPhone: null,
|
|
firstname: null,
|
|
lastname: null,
|
|
numeroIdentite: null,
|
|
dateNaissance: null,
|
|
dateExpiration: null,
|
|
numeroTelephone: null,
|
|
networksinglePickerVisible: false,
|
|
confirmpassanim: null,
|
|
userId: null,
|
|
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,
|
|
triggerNextClick: false,
|
|
displayFirstStep: true,
|
|
displaySecondStep: false,
|
|
sexe: [
|
|
{label: I18n.t('MASCULIN'), value: "M"},
|
|
{label: I18n.t('FEMININ'), value: "F"},
|
|
],
|
|
gender: 'M'
|
|
};
|
|
this.dateNaissanceFumiProps = {};
|
|
this.dateExpirationFumiProps = {};
|
|
this.props.createIndentificationResetAction();
|
|
this.props.getNumberResetAction();
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({ user });
|
|
}
|
|
}
|
|
});
|
|
|
|
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 })
|
|
Alert.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, 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 });
|
|
}
|
|
|
|
}
|
|
|
|
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,
|
|
});
|
|
};
|
|
|
|
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,
|
|
})
|
|
}
|
|
|
|
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 {
|
|
moment(dateNaissance).format('DD-MM-YYYY')
|
|
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: this.state.numeroTelephone,
|
|
id_user: this.state.userId,
|
|
gender: this.state.gender
|
|
});
|
|
}
|
|
this.setState({
|
|
triggerSubmitClick: true
|
|
})
|
|
|
|
}
|
|
|
|
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();
|
|
}
|
|
/* if (typeof resultNumberDetail.response !== 'undefined') {
|
|
Alert.alert(
|
|
"SUCCES",
|
|
JSON.stringify(resultNumberDetail.response),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.getNumberResetAction();
|
|
this.setState({ triggerNextClick: false })
|
|
}
|
|
}
|
|
|
|
],
|
|
{ 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 }
|
|
)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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 || this.props.loadingNumberDetail}
|
|
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);
|
|
const { showPickerDateNaissance } = this.state;
|
|
return (
|
|
<>
|
|
{this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
|
|
{this.state.showPickerDateExpiration && this.renderDateExpirationPicker()}
|
|
{this.state.modalVisible && this.renderLoaderModal()}
|
|
{(this.props.loading || this.props.loadingNumberDetail) && this.renderLoader()}
|
|
{this.state.triggerSubmitClick && this.renderCreateIdentificationResponse()}
|
|
{this.state.triggerNextClick && this.renderGetNumberResponse()}
|
|
<ScrollView style={styles.container}>
|
|
|
|
{this.state.displayFirstStep &&
|
|
<>
|
|
<Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
|
|
<Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
|
label={I18n.t('PHONE')}
|
|
iconColor={'#f95a25'}
|
|
keyboardType='phone-pad'
|
|
value={this.state.numeroTelephone === null ? this.state.indicatif : this.state.numeroTelephone}
|
|
iconSize={20}
|
|
onChangeText={(numeroTelephone) => {
|
|
this.setState({ numeroTelephone })
|
|
}}
|
|
style={styles.input}
|
|
>
|
|
</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>
|
|
<Button style={styles.btnvalide}
|
|
textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoging}
|
|
onPress={() => { this.onSubmitNextStep() }}>
|
|
{I18n.t('NEXT')}</Button>
|
|
</>}
|
|
|
|
|
|
{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}
|
|
>
|
|
</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.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}
|
|
style={{
|
|
width: responsiveWidth(40),
|
|
}}
|
|
buttonColor={Color.accentColor}
|
|
backgroundColor={Color.primaryDarkColor}
|
|
textColor='white'
|
|
bold={true}
|
|
hasPadding
|
|
height={32}
|
|
onPress={(value) => {
|
|
this.setState({gender: value})
|
|
}}/>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
|
|
<Button style={styles.btnSubmit}
|
|
textStyle={styles.textbtnvalide}
|
|
onPress={() => { this.onSubmitPrevious() }}>
|
|
{I18n.t('PREVIOUS')}</Button>
|
|
|
|
<Button style={styles.btnSubmit}
|
|
textStyle={styles.textbtnvalide}
|
|
isLoading={this.state.isLoging}
|
|
onPress={() => { this.onSubmitIdentityClient() }}>
|
|
{I18n.t('SUBMIT_LABEL')}</Button>
|
|
|
|
</View>
|
|
</>
|
|
}
|
|
</ScrollView>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
const maptStateToProps = state => ({
|
|
loading: state.createIdentificationReducer.loading,
|
|
result: state.createIdentificationReducer.result,
|
|
error: state.createIdentificationReducer.error,
|
|
|
|
loadingNumberDetail: state.getNumberInformationReducer.loading,
|
|
resultNumberDetail: state.getNumberInformationReducer.result,
|
|
errorNumberDetail: state.getNumberInformationReducer.error,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
createIndentificationAction,
|
|
createIndentificationResetAction,
|
|
getNumberDetailAction,
|
|
getNumberResetAction,
|
|
getUserIdentificationAction
|
|
}, dispatch);
|
|
|
|
export default connect(maptStateToProps, mapDispatchToProps)(CreateIdentification);
|
|
|
|
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
|
|
},
|
|
btnSubmit: {
|
|
marginTop: 20,
|
|
borderColor: 'transparent',
|
|
backgroundColor: Color.accentLightColor,
|
|
height: 52,
|
|
width: "30%",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
},
|
|
input: {
|
|
height: 60,
|
|
marginTop: responsiveHeight(2),
|
|
marginLeft: responsiveWidth(5),
|
|
marginRight: responsiveWidth(5),
|
|
borderRadius: 5,
|
|
}
|
|
});
|