656 lines
29 KiB
JavaScript
656 lines
29 KiB
JavaScript
|
import Button from 'apsl-react-native-button';
|
||
|
|
import isEqual from 'lodash/isEqual';
|
||
|
|
import isNil from 'lodash/isNil';
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { Keyboard, PermissionsAndroid, ProgressBarAndroid, ScrollView, StyleSheet, Text, View, Platform, Alert } from 'react-native';
|
||
|
|
import * as Animatable from 'react-native-animatable';
|
||
|
|
import I18n from 'react-native-i18n';
|
||
|
|
import { MaterialDialog } from "react-native-material-dialog";
|
||
|
|
import { Dropdown } from 'react-native-material-dropdown';
|
||
|
|
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
|
||
|
|
import { ProgressDialog } from 'react-native-simple-dialogs';
|
||
|
|
import { Fumi } from 'react-native-textinput-effects';
|
||
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { bindActionCreators } from 'redux';
|
||
|
|
import Geolocation from 'react-native-geolocation-service';
|
||
|
|
import { identityPieces, paysDestinationData, walletActifData, typeIdIDestinataire, isIlinkWorldWallet } from '../../../utils/UtilsFunction';
|
||
|
|
import { Color } from '../../../config/Color';
|
||
|
|
import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi';
|
||
|
|
import { readUser, getTownInformationName, getListCountriesActive } from '../../../webservice/AuthApi';
|
||
|
|
import { getPositionInformation } from '../../../webservice/MapService';
|
||
|
|
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 EnvoieWalletToWalletUser extends Component {
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarBackgroundColor: Color.primaryColor,
|
||
|
|
statusBarColor: Color.primaryDarkColor,
|
||
|
|
navBarTextColor: '#FFFFFF',
|
||
|
|
navBarButtonColor: '#FFFFFF'
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
static navigationOptions = () => {
|
||
|
|
return {
|
||
|
|
drawerLabel: () => null,
|
||
|
|
headerTitle: I18n.t('DEPOSIT_WALLET_TO_WALLET'),
|
||
|
|
headerTintColor: 'white',
|
||
|
|
headerStyle: {
|
||
|
|
backgroundColor: Color.primaryColor,
|
||
|
|
marginTop: 0,
|
||
|
|
color: 'white'
|
||
|
|
},
|
||
|
|
headerTitleStyle: {
|
||
|
|
color: "white"
|
||
|
|
},
|
||
|
|
title: I18n.t('DEPOSIT_WALLET_TO_WALLET')
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
identityPieces: identityPieces(),
|
||
|
|
identityPiecesName: (identityPieces()[0]).name,
|
||
|
|
paysDestination: [],
|
||
|
|
paysDestinationSelect: null,
|
||
|
|
walletActifs: [],
|
||
|
|
walletActifSelect: null,
|
||
|
|
typeIdDestinataire: typeIdIDestinataire(),
|
||
|
|
typeIdDestinataireSelect: (typeIdIDestinataire()[0].name),
|
||
|
|
numeroTelephoneOrWalletCode: null,
|
||
|
|
numeroIdentite: null,
|
||
|
|
montant: null,
|
||
|
|
password: null,
|
||
|
|
isIlinkWorldWalletSelect: false,
|
||
|
|
loading: false,
|
||
|
|
user: null,
|
||
|
|
modalVisible: true,
|
||
|
|
hasLoadActiveCountryList: true,
|
||
|
|
hasLoadActivePayCountryNetworkList: true,
|
||
|
|
triggerSubmitClick: false
|
||
|
|
};
|
||
|
|
|
||
|
|
this.props.getActiveCountryReset();
|
||
|
|
this.props.getActiveCountryByDialCodeReset();
|
||
|
|
this.props.getPayCountryNetworkReset();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
if (user !== undefined) {
|
||
|
|
this.setState({ user });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
if (Platform.OS === 'android') {
|
||
|
|
this.requestCameraPermission();
|
||
|
|
} else {
|
||
|
|
this.watchLocation();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillUnmount() {
|
||
|
|
this.mounted = false;
|
||
|
|
if (this.watchID) Geolocation.clearWatch(this.watchID);
|
||
|
|
}
|
||
|
|
|
||
|
|
renderGetActionCountryList = () => {
|
||
|
|
|
||
|
|
const { resultActiveCountryList, errorActiveCountryList } = this.props;
|
||
|
|
if (resultActiveCountryList !== null) {
|
||
|
|
if (typeof resultActiveCountryList.response !== 'undefined') {
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
hasLoadActiveCountryList: false,
|
||
|
|
paysDestination: resultActiveCountryList.response,
|
||
|
|
modalVisible: false
|
||
|
|
});
|
||
|
|
this.watchLocation();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (errorActiveCountryList !== null) {
|
||
|
|
if (typeof errorActiveCountryList.data !== 'undefined') {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
errorActiveCountryList.data.error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getActiveCountryReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
JSON.stringify(errorActiveCountryList),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getActiveCountryReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
renderGetPayCountryNetworkResponse = () => {
|
||
|
|
const { resultPayCountryNetwork, errorPayCountryNetwork } = this.props;
|
||
|
|
if (resultPayCountryNetwork !== null) {
|
||
|
|
if (typeof resultPayCountryNetwork.response !== 'undefined') {
|
||
|
|
let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
|
||
|
|
this.setState({
|
||
|
|
hasLoadActivePayCountryNetworkList: false,
|
||
|
|
walletActifs: resultPayCountryNetwork.response,
|
||
|
|
walletActifSelect: resultPayCountryNetwork.response[0].name,
|
||
|
|
typeIdDestinataireSelect: typeIdentifiant,
|
||
|
|
isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (errorPayCountryNetwork !== null) {
|
||
|
|
if (typeof errorPayCountryNetwork.data !== 'undefined') {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
errorPayCountryNetwork.data.error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getPayCountryNetworkReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t('ERROR_LABEL'),
|
||
|
|
JSON.stringify(errorPayCountryNetwork),
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => {
|
||
|
|
this.props.getPayCountryNetworkReset();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
showErrorDialog() {
|
||
|
|
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.pop() } }])
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
async watchLocation() {
|
||
|
|
Geolocation.getCurrentPosition((position) => {
|
||
|
|
this.props.getActiveCountryAction();
|
||
|
|
this.treatPosition(position);
|
||
|
|
return position;
|
||
|
|
}, (e) => {
|
||
|
|
this.showErrorDialog()
|
||
|
|
}, this.props.geolocationOptions);
|
||
|
|
if (!this.watchID) {
|
||
|
|
Geolocation.watchPosition((position) => { this.treatPosition(position); return 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 {
|
||
|
|
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.pop()
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
Alert.alert("Une erreur est Survenue",
|
||
|
|
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
|
||
|
|
[{
|
||
|
|
text: "Ok", onPress: () => {
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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 !== undefined) {
|
||
|
|
if (response.results.length > 0) {
|
||
|
|
|
||
|
|
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 })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.state.paysDestination.length > 0) {
|
||
|
|
|
||
|
|
var found = false;
|
||
|
|
for (let country of this.state.paysDestination) {
|
||
|
|
if (country.code_country === shortcountry) {
|
||
|
|
found = true;
|
||
|
|
this.setState({
|
||
|
|
modalVisible: false, indicatifCountry: country.code_dial,
|
||
|
|
paysDestinationSelect: country.name
|
||
|
|
});
|
||
|
|
if (this.state.hasLoadActivePayCountryNetworkList)
|
||
|
|
this.props.getPayCountryNetworkAction(country.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
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" }]);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("UNABLE_TO_CONNECT_TITLE"),
|
||
|
|
I18n.t('TEXT_NETWORK_UNABLE')
|
||
|
|
,
|
||
|
|
[
|
||
|
|
{ text: I18n.t("NO"), onPress: () => { this.props.navigation.pop() } },
|
||
|
|
{
|
||
|
|
text: I18n.t("YES"), onPress: () => {
|
||
|
|
this.treatPosition(myPosition)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).catch((e) => {
|
||
|
|
console.log("CATCH", e);
|
||
|
|
this.showErrorDialog();
|
||
|
|
});
|
||
|
|
this.setState({ myPosition: myPosition });
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
ckeckIfFieldIsOK(champ) {
|
||
|
|
return (isNil(champ) || isEqual(champ.length, 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
isMontantValid = () => {
|
||
|
|
const { montant } = this.state;
|
||
|
|
if ((parseInt(isEqual(montant, 0)) || montant < 0))
|
||
|
|
return {
|
||
|
|
errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
|
||
|
|
isValid: false
|
||
|
|
};
|
||
|
|
|
||
|
|
else if (!this.isNormalInteger(montant))
|
||
|
|
return {
|
||
|
|
errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
|
||
|
|
isValid: false
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
else if (montant > parseInt(this.state.comptePrincipal))
|
||
|
|
return {
|
||
|
|
errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
|
||
|
|
isValid: false
|
||
|
|
};
|
||
|
|
|
||
|
|
else
|
||
|
|
return {
|
||
|
|
errorMessage: '',
|
||
|
|
isValid: true
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
onSubmitSendWalletToWallet = () => {
|
||
|
|
const { identityPiecesName, paysDestinationSelect, numeroIdentite, walletActifSelect, typeIdDestinataireSelect, numeroTelephoneOrWalletCode, montant, password } = this.state;
|
||
|
|
|
||
|
|
if (this.ckeckIfFieldIsOK(identityPiecesName))
|
||
|
|
this.identityPiecesAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(paysDestinationSelect))
|
||
|
|
this.paysDestinationAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(walletActifSelect))
|
||
|
|
this.walletActifAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
|
||
|
|
this.typeIdDestinataireAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(numeroIdentite))
|
||
|
|
this.numeroIdentiteAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(numeroTelephoneOrWalletCode))
|
||
|
|
this.numeroTelephoneAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(montant) || this.isMontantValid().isValid)
|
||
|
|
this.montantAnim.shake(800);
|
||
|
|
else if (this.ckeckIfFieldIsOK(password))
|
||
|
|
this.passwordAnim.shake(800);
|
||
|
|
else {
|
||
|
|
this
|
||
|
|
}
|
||
|
|
this.setState({
|
||
|
|
triggerSubmitClick: true
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
renderLoader = () => {
|
||
|
|
return (
|
||
|
|
<ProgressDialog
|
||
|
|
visible={this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingPayCountryNetwork}
|
||
|
|
title={I18n.t('LOADING')}
|
||
|
|
message={I18n.t('LOADING_INFO')}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
console.log("STATE", this.state);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{(this.state.modalVisible || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
|
||
|
|
{this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
|
||
|
|
{this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
|
||
|
|
{this.state.triggerSubmitClick && this.renderEnvoieWalletToWalletResponse()}
|
||
|
|
{this.state.triggerNextClick && this.renderGetNumberResponse()} */}
|
||
|
|
<ScrollView style={styles.container}>
|
||
|
|
|
||
|
|
<Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_WALLET')}</Text>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { this.paysDestinationAnim = comp }}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('PAYS_DESTINATION')}
|
||
|
|
data={this.state.paysDestination}
|
||
|
|
useNativeDriver={true}
|
||
|
|
value={this.state.paysDestinationSelect === null ? '' : this.state.paysDestinationSelect}
|
||
|
|
onChangeText={(value, index, data) => {
|
||
|
|
this.props.getPayCountryNetworkReset();
|
||
|
|
|
||
|
|
let countrySelect = data.filter(element => element.name === value);
|
||
|
|
this.setState({ paysDestinationSelect: value, hasLoadActivePayCountryNetworkList: true }, () => {
|
||
|
|
this.props.getPayCountryNetworkAction(countrySelect[0].id);
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
valueExtractor={(value) => { return value.name }}
|
||
|
|
labelExtractor={(value) => { return value.name }}
|
||
|
|
/>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { this.walletActifAnim = comp }}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('ACTIVE_WALLET')}
|
||
|
|
data={this.state.walletActifs}
|
||
|
|
useNativeDriver={true}
|
||
|
|
value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
|
||
|
|
onChangeText={(value, index, data) => {
|
||
|
|
this.setState({ walletActifSelect: 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 value.name }}
|
||
|
|
labelExtractor={(value) => { return 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.typeIdDestinataireAnim = comp }}
|
||
|
|
style={{
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
height: 60,
|
||
|
|
marginTop: 20,
|
||
|
|
alignSelf: 'center',
|
||
|
|
borderRadius: 10,
|
||
|
|
paddingLeft: 20,
|
||
|
|
paddingRight: 20,
|
||
|
|
backgroundColor: 'white'
|
||
|
|
}}>
|
||
|
|
<Dropdown
|
||
|
|
disabled={this.state.isIlinkWorldWalletSelect}
|
||
|
|
label={I18n.t('TYPE_IDENTIFIANT')}
|
||
|
|
data={this.state.typeIdDestinataire}
|
||
|
|
useNativeDriver={true}
|
||
|
|
value={this.state.typeIdDestinataireSelect}
|
||
|
|
onChangeText={(value, index, data) => {
|
||
|
|
this.setState({ typeIdDestinataireSelect: value });
|
||
|
|
}}
|
||
|
|
valueExtractor={(value) => { return value.name }}
|
||
|
|
labelExtractor={(value) => { return value.name }}
|
||
|
|
/>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={isEqual(this.state.typeIdDestinataireSelect, I18n.t('PHONE')) ? 'phone' : 'lock'}
|
||
|
|
label={isEqual(this.state.typeIdDestinataireSelect, I18n.t('PHONE')) ? I18n.t('PHONE') : I18n.t('CODE_WALLET')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
value={this.state.numeroTelephoneOrWalletCode}
|
||
|
|
onChangeText={(numeroTelephoneOrWalletCode) => {
|
||
|
|
this.setState({ numeroTelephoneOrWalletCode })
|
||
|
|
}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { this.montantAnim = comp }}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'money'}
|
||
|
|
label={I18n.t('AMOUNT')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
value={this.state.montant}
|
||
|
|
onChangeText={(montant) => {
|
||
|
|
this.setState({ montant })
|
||
|
|
}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
|
||
|
|
label={I18n.t('PASSWORD')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
iconSize={20}
|
||
|
|
value={this.state.password}
|
||
|
|
onChangeText={(password) => {
|
||
|
|
this.setState({ password })
|
||
|
|
}}
|
||
|
|
style={styles.input}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Button style={styles.btnvalide}
|
||
|
|
textStyle={styles.textbtnvalide}
|
||
|
|
isLoading={this.state.isLoging}
|
||
|
|
onPress={() => { this.onSubmitSendWalletToWallet() }}>
|
||
|
|
{I18n.t('SUBMIT_LABEL')}</Button>
|
||
|
|
</ScrollView>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const maptStateToProps = state => ({
|
||
|
|
loadingCountryByDialCode: state.countryByDialCode.loading,
|
||
|
|
resultCountryByDialCode: state.countryByDialCode.result,
|
||
|
|
errorCountryByDialCode: state.countryByDialCode.error,
|
||
|
|
|
||
|
|
loadingActiveCountryList: state.activeCountryListReducer.loading,
|
||
|
|
resultActiveCountryList: state.activeCountryListReducer.result,
|
||
|
|
errorActiveCountryList: state.activeCountryListReducer.error,
|
||
|
|
|
||
|
|
loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
|
||
|
|
resultPayCountryNetwork: state.payCountryNetworkReducer.result,
|
||
|
|
errorPayCountryNetwork: state.payCountryNetworkReducer.error,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
||
|
|
getActiveCountryByDialCodeAction,
|
||
|
|
getActiveCountryByDialCodeReset,
|
||
|
|
|
||
|
|
getPayCountryNetworkAction,
|
||
|
|
getPayCountryNetworkReset,
|
||
|
|
|
||
|
|
getActiveCountryAction,
|
||
|
|
getActiveCountryReset
|
||
|
|
|
||
|
|
}, dispatch);
|
||
|
|
|
||
|
|
export default connect(maptStateToProps, mapDispatchToProps)(EnvoieWalletToWalletUser);
|
||
|
|
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
});
|