2023-07-24 08:43:45 +00:00
|
|
|
import Button from 'apsl-react-native-button';
|
|
|
|
|
import isEqual from 'lodash/isEqual';
|
|
|
|
|
import isNil from 'lodash/isNil';
|
|
|
|
|
import React, {Component} from 'react';
|
2023-10-20 14:23:01 +00:00
|
|
|
import {Alert, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
2023-07-24 08:43:45 +00:00
|
|
|
import * as Animatable from 'react-native-animatable';
|
|
|
|
|
import I18n from 'react-native-i18n';
|
|
|
|
|
import Dialog from "react-native-dialog";
|
|
|
|
|
import {Dropdown} from 'react-native-material-dropdown-v2';
|
|
|
|
|
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 {Color} from '../../../config/Color';
|
|
|
|
|
import {store} from "../../../redux/store";
|
|
|
|
|
import {identityPieces, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire} from '../../../utils/UtilsFunction';
|
|
|
|
|
import { LiteCreditCardInput } from "react-native-credit-card-input";
|
|
|
|
|
import {readUser} from '../../../webservice/AuthApi';
|
|
|
|
|
import {
|
|
|
|
|
getActiveCountryAction,
|
|
|
|
|
getActiveCountryByDialCodeAction,
|
|
|
|
|
getActiveCountryByDialCodeReset,
|
|
|
|
|
getActiveCountryReset,
|
|
|
|
|
getPayCountryNetworkAction,
|
|
|
|
|
getPayCountryNetworkReset
|
|
|
|
|
} from '../../../webservice/CountryApi';
|
|
|
|
|
import {
|
|
|
|
|
envoieUserWalletToWalletAction,
|
|
|
|
|
envoieUserWalletToWalletReset,
|
|
|
|
|
getCommissionUserWalletToWalletAction,
|
2023-10-05 06:09:30 +00:00
|
|
|
getCommissionUserWalletToWalletReset,
|
|
|
|
|
envoieUserWalletToCardReset,
|
|
|
|
|
envoieUserWalletToCardAction
|
2023-07-24 08:43:45 +00:00
|
|
|
} from '../../../webservice/EnvoieUserApi';
|
2023-10-20 14:23:01 +00:00
|
|
|
import { HeaderBackButton } from "react-navigation-stack";
|
2023-07-24 08:43:45 +00:00
|
|
|
import {FontWeight, Typography} from '../../../config/typography';
|
|
|
|
|
import thousands from 'thousands';
|
|
|
|
|
import {IlinkEmitter} from '../../../utils/events';
|
|
|
|
|
|
|
|
|
|
let theme = require('../../../utils/theme.json');
|
|
|
|
|
let route = require('../../../route.json');
|
|
|
|
|
|
|
|
|
|
class CarteLier extends Component {
|
|
|
|
|
static navigatorStyle = {
|
|
|
|
|
navBarBackgroundColor: Color.primaryColor,
|
|
|
|
|
statusBarColor: Color.primaryDarkColor,
|
|
|
|
|
navBarTextColor: '#FFFFFF',
|
|
|
|
|
navBarButtonColor: '#FFFFFF'
|
|
|
|
|
};
|
2023-10-20 14:23:01 +00:00
|
|
|
static navigationOptions = ({ navigation }) => {
|
2023-07-24 08:43:45 +00:00
|
|
|
return {
|
|
|
|
|
drawerLabel: () => null,
|
2023-10-05 06:09:30 +00:00
|
|
|
headerTitle: I18n.t('ENVOIE_ARGENT'),
|
2023-07-24 08:43:45 +00:00
|
|
|
headerTintColor: 'white',
|
|
|
|
|
headerStyle: {
|
|
|
|
|
backgroundColor: Color.primaryColor,
|
|
|
|
|
marginTop: 30,
|
|
|
|
|
color: 'white'
|
|
|
|
|
},
|
|
|
|
|
headerTitleStyle: {
|
|
|
|
|
color: "white"
|
|
|
|
|
},
|
2023-10-20 14:23:01 +00:00
|
|
|
title: I18n.t('ENVOIE_ARGENT'),
|
|
|
|
|
headerLeft: (props) => (
|
|
|
|
|
console.log("cdcdcdccdcdcd"),
|
|
|
|
|
<HeaderBackButton
|
|
|
|
|
{...props}
|
|
|
|
|
onPress={() => {
|
|
|
|
|
console.log("ffffffffffffffffff"),
|
|
|
|
|
navigation.navigate(route.walletDepot);
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
2023-07-24 08:43:45 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2023-10-20 14:23:01 +00:00
|
|
|
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
this.state = {
|
|
|
|
|
identityPieces: identityPieces(),
|
|
|
|
|
identityPiecesName: I18n.t((identityPieces()[0]).name),
|
|
|
|
|
paysDestination: [],
|
|
|
|
|
paysDestinationSelect: null,
|
|
|
|
|
walletActifs: [],
|
|
|
|
|
walletActifSelect: null,
|
|
|
|
|
typeIdDestinataire: typeIdIDestinataire(),
|
|
|
|
|
typeIdDestinataireSelect: (typeIdIDestinataire()[0].value),
|
|
|
|
|
numeroTelephoneOrWalletCode: null,
|
|
|
|
|
numeroIdentite: null,
|
|
|
|
|
montant: null,
|
|
|
|
|
password: null,
|
|
|
|
|
isIlinkWorldWalletSelect: false,
|
|
|
|
|
loading: false,
|
|
|
|
|
numeroSerie: '',
|
|
|
|
|
numCarte: 0,
|
|
|
|
|
cvv: 0,
|
|
|
|
|
codeCVV: null,
|
|
|
|
|
expiration_date: '',
|
|
|
|
|
creditCardInput: {},
|
|
|
|
|
user: null,
|
|
|
|
|
nomsDestinataire: null,
|
|
|
|
|
prenomsDestinataire: null,
|
2023-10-05 06:09:30 +00:00
|
|
|
modalVisible: false,
|
2023-07-24 08:43:45 +00:00
|
|
|
hasLoadActiveCountryList: true,
|
|
|
|
|
hasLoadActivePayCountryNetworkList: true,
|
|
|
|
|
triggerSubmitClick: false,
|
|
|
|
|
isDataSubmit: false,
|
|
|
|
|
isModalConfirmVisible: false,
|
|
|
|
|
wallet: store.getState().walletDetailReducer.result.response,
|
|
|
|
|
};
|
2023-10-05 06:09:30 +00:00
|
|
|
this.props.envoieUserWalletToCardReset();
|
2023-07-24 08:43:45 +00:00
|
|
|
this.props.getActiveCountryReset();
|
|
|
|
|
this.props.getActiveCountryByDialCodeReset();
|
|
|
|
|
this.props.getPayCountryNetworkReset();
|
|
|
|
|
this.props.envoieUserWalletToWalletReset();
|
|
|
|
|
this.props.getCommissionUserWalletToWalletReset();
|
|
|
|
|
|
|
|
|
|
this.props.getActiveCountryAction();
|
|
|
|
|
console.log("ENVOIE WALLET PROPS", this.props);
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-20 14:23:01 +00:00
|
|
|
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
componentDidMount() {
|
|
|
|
|
|
|
|
|
|
readUser().then((user) => {
|
|
|
|
|
if (user) {
|
|
|
|
|
if (user !== undefined) {
|
|
|
|
|
this.setState({user});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
|
|
|
|
|
|
if (nextProps.resultEnvoieWalletToWalletGetCommission != null) {
|
|
|
|
|
|
|
|
|
|
if (typeof nextProps.resultEnvoieWalletToWalletGetCommission.response !== 'undefined') {
|
|
|
|
|
|
|
|
|
|
if (!nextProps.loadingEnvoieWalletToWalletGetCommission)
|
|
|
|
|
this.setState({
|
|
|
|
|
isModalConfirmVisible: true
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderGetActionCountryList = () => {
|
|
|
|
|
|
|
|
|
|
const {resultActiveCountryList, errorActiveCountryList} = this.props;
|
|
|
|
|
if (resultActiveCountryList !== null) {
|
|
|
|
|
if (typeof resultActiveCountryList.response !== 'undefined') {
|
|
|
|
|
|
|
|
|
|
this.setState({
|
|
|
|
|
hasLoadActiveCountryList: false,
|
|
|
|
|
paysDestination: resultActiveCountryList.response,
|
|
|
|
|
paysDestinationSelect: resultActiveCountryList.response[0].name,
|
|
|
|
|
});
|
|
|
|
|
if (this.state.hasLoadActivePayCountryNetworkList)
|
|
|
|
|
this.props.getPayCountryNetworkAction({
|
|
|
|
|
id_wallet_user: this.state.wallet.id,
|
|
|
|
|
id_country: resultActiveCountryList.response[0].id
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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') {
|
|
|
|
|
if (resultPayCountryNetwork.response.length > 0) {
|
|
|
|
|
let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? 'user_code' : 'phone';
|
|
|
|
|
this.setState({
|
|
|
|
|
hasLoadActivePayCountryNetworkList: false,
|
|
|
|
|
walletActifs: resultPayCountryNetwork.response,
|
|
|
|
|
walletActifSelect: resultPayCountryNetwork.response[0].name,
|
|
|
|
|
typeIdDestinataireSelect: typeIdentifiant,
|
|
|
|
|
isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type),
|
|
|
|
|
modalVisible: false
|
|
|
|
|
});
|
|
|
|
|
} else if (resultPayCountryNetwork.response.length === 0) {
|
|
|
|
|
this.setState({
|
|
|
|
|
walletActifs: [],
|
|
|
|
|
walletActifSelect: '',
|
|
|
|
|
modalVisible: false,
|
|
|
|
|
hasLoadActivePayCountryNetworkList: false,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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}
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-05 06:09:30 +00:00
|
|
|
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
renderEnvoieWalletToWalletResponse = () => {
|
|
|
|
|
|
|
|
|
|
const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props;
|
2023-10-05 06:09:30 +00:00
|
|
|
// if (errorEnvoieWalletToWallet !== null) {
|
|
|
|
|
// if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
|
|
|
|
|
// Alert.alert(
|
|
|
|
|
// I18n.t("ERROR_TRANSFER"),
|
|
|
|
|
// errorEnvoieWalletToWallet.data.error,
|
|
|
|
|
// [
|
|
|
|
|
// {
|
|
|
|
|
// text: I18n.t("OK"), onPress: () => {
|
|
|
|
|
// this.props.envoieUserWalletToWalletReset();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// ],
|
|
|
|
|
// {cancelable: false}
|
|
|
|
|
// )
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// if (resultEnvoieWalletToWallet !== null) {
|
|
|
|
|
// if (resultEnvoieWalletToWallet.response !== null) {
|
|
|
|
|
// Alert.alert(
|
|
|
|
|
// I18n.t("SUCCESS_TRANSFER"),
|
|
|
|
|
// resultEnvoieWalletToWallet.response,
|
|
|
|
|
// [
|
|
|
|
|
// {
|
|
|
|
|
// text: I18n.t("OK"), onPress: () => {
|
|
|
|
|
// this.props.envoieUserWalletToWalletReset();
|
|
|
|
|
// IlinkEmitter.emit("refreshWallet");
|
|
|
|
|
// this.props.navigation.pop();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// ],
|
|
|
|
|
// {cancelable: false}
|
|
|
|
|
// )
|
|
|
|
|
// }
|
|
|
|
|
// }
|
2023-07-24 08:43:45 +00:00
|
|
|
if (errorEnvoieWalletToWallet !== null) {
|
|
|
|
|
if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
|
2023-10-05 06:09:30 +00:00
|
|
|
Alert.alert(
|
|
|
|
|
I18n.t("WITHDRAWAL_ERROR"),
|
|
|
|
|
errorEnvoieWalletToWallet.data.error,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
text: I18n.t("OK"), onPress: () => {
|
|
|
|
|
this.props.envoieUserWalletToCardReset();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
{ cancelable: false }
|
|
|
|
|
)
|
2023-07-24 08:43:45 +00:00
|
|
|
}
|
2023-10-05 06:09:30 +00:00
|
|
|
}
|
2023-07-24 08:43:45 +00:00
|
|
|
|
2023-10-05 06:09:30 +00:00
|
|
|
if (resultEnvoieWalletToWallet !== null) {
|
|
|
|
|
if (resultEnvoieWalletToWallet.status === 301) {
|
|
|
|
|
//this.props.envoieUserWalletToCardReset();
|
|
|
|
|
try{
|
|
|
|
|
|
|
|
|
|
this.props.navigation.push('webviewScreen', {
|
|
|
|
|
url: resultEnvoieWalletToWallet.response.payment_url,
|
|
|
|
|
requestBody: this.getRequestBody(),
|
|
|
|
|
transactionType: "USER_CARD_WALLET",
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
console.log("babababa: ", this.getRequestBody())
|
|
|
|
|
} catch(error) {
|
|
|
|
|
console.log('error', error);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (resultEnvoieWalletToWallet.status === 200) {
|
|
|
|
|
console.log("bonjour...response: ", resultEnvoieWalletToWallet.response)
|
|
|
|
|
if (resultEnvoieWalletToWallet.response !== null) {
|
|
|
|
|
Alert.alert(
|
|
|
|
|
I18n.t("WITHDRAWAL_SUCCESS"),
|
|
|
|
|
resultEnvoieWalletToWallet.response,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
text: I18n.t("OK"), onPress: () => {
|
2023-10-20 14:23:01 +00:00
|
|
|
this.props.envoieUserWalletToCardReset();
|
2023-10-05 06:09:30 +00:00
|
|
|
IlinkEmitter.emit("refreshWallet");
|
|
|
|
|
this.props.navigation.pop();
|
|
|
|
|
navigation.goBack()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
{ cancelable: false }
|
|
|
|
|
)
|
|
|
|
|
}
|
2023-07-24 08:43:45 +00:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-10-05 06:09:30 +00:00
|
|
|
|
|
|
|
|
getRequestBody () {
|
|
|
|
|
return {
|
|
|
|
|
type: 21,
|
|
|
|
|
id_wallet_user: this.state.wallet.id,
|
|
|
|
|
type_id_destinataire : this.state.typeIdDestinataireSelect,
|
|
|
|
|
final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
|
|
|
|
|
id_destinataire: this.state.numeroTelephoneOrWalletCode,
|
|
|
|
|
type_document_destinataire: this.state.identityPiecesName,
|
|
|
|
|
prenom_destianataire: this.state.prenom_destianataire,
|
|
|
|
|
id_document_destinataire: this.state.numeroIdentite,
|
|
|
|
|
nom_destinataire: this.state.nomsDestinataire,
|
|
|
|
|
prenom_destinataire: this.state.prenomsDestinataire,
|
|
|
|
|
network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
|
|
|
|
|
montant: this.state.montant,
|
|
|
|
|
password: this.state.password,
|
|
|
|
|
cvv: this.state.codeCVV,
|
|
|
|
|
with_linked_card: true,
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-07-24 08:43:45 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
renderDialogGetCommissionResponse = () => {
|
|
|
|
|
|
|
|
|
|
const {errorEnvoieWalletToWalletGetCommission} = this.props;
|
|
|
|
|
|
|
|
|
|
if (errorEnvoieWalletToWalletGetCommission !== null) {
|
|
|
|
|
if (typeof errorEnvoieWalletToWalletGetCommission.data !== 'undefined') {
|
|
|
|
|
Alert.alert(
|
|
|
|
|
I18n.t("ERROR_LABLE"),
|
|
|
|
|
errorEnvoieWalletToWalletGetCommission.data.error,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
text: I18n.t("OK"), onPress: () => {
|
|
|
|
|
this.props.getCommissionUserWalletToWalletReset();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
{cancelable: false}
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isCreditCardValid = () => {
|
|
|
|
|
const { creditCardInput } = this.state;
|
|
|
|
|
const errorMessage = [];
|
|
|
|
|
|
|
|
|
|
if (typeof creditCardInput.status !== 'undefined') {
|
|
|
|
|
|
|
|
|
|
if (creditCardInput.status.cvc === 'incomplete')
|
|
|
|
|
errorMessage.push(I18n.t('CVC_CARD_ERROR') || secureTextEntry=='true');
|
|
|
|
|
if (creditCardInput.status.expiry === 'incomplete')
|
|
|
|
|
errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
|
|
|
|
|
if (creditCardInput.status.number === 'incomplete')
|
|
|
|
|
errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))
|
|
|
|
|
|
|
|
|
|
return errorMessage;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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 (!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
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
modalConfirmTransaction = (data) => {
|
|
|
|
|
const commission = data.response.frais;
|
|
|
|
|
const montant_net_final = data.response.montant_net_final;
|
|
|
|
|
const montant_net_init = data.response.montant_net_init;
|
|
|
|
|
const destinataire = data.response.destinataire;
|
2023-10-05 06:09:30 +00:00
|
|
|
const exchange_rate = data.response.exchange_rate;
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
console.log("DATA SEND TO CONFIRM DIALOG", data);
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
|
|
<Dialog.Container useNativeDriver={true} visible={this.state.isModalConfirmVisible}>
|
|
|
|
|
|
|
|
|
|
<Dialog.Title>{I18n.t('TRANSACTION_DETAIL')}</Dialog.Title>
|
|
|
|
|
|
|
|
|
|
<View>
|
|
|
|
|
|
|
|
|
|
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
|
|
|
|
<Text style={[styles.body2]}>{I18n.t('DESTINATAIRE')}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
|
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{destinataire}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
|
|
|
|
<Text style={[styles.body2]}>{I18n.t('AMOUNT')}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
2023-10-05 06:09:30 +00:00
|
|
|
<Text
|
|
|
|
|
style={[Typography.caption1, Color.grayColor]}>{`${thousands(this.state.montant, ' ')} ${this.state.wallet.card_currency_code}`}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
|
|
|
|
<Text tyle={[Typography.body2]}>{I18n.t('FEES_AND_TAXES')}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
|
|
|
<Text
|
2023-10-05 06:09:30 +00:00
|
|
|
style={[Typography.caption1, Color.grayColor]}>{`${thousands(commission, ' ')} ${this.state.wallet.card_currency_code}`}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
2023-10-20 14:23:01 +00:00
|
|
|
<View style={{paddingVertical: 10}}>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
2023-10-05 06:09:30 +00:00
|
|
|
<View style={{flex: 1}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('TTC_AMOUNT')}: </Text>
|
2023-10-05 06:09:30 +00:00
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net_init, ' ')} ${this.state.wallet.card_currency_code}`}</Text>
|
2023-10-05 06:09:30 +00:00
|
|
|
</View>
|
|
|
|
|
</View>
|
2023-07-24 08:43:45 +00:00
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_INIT_COUNTRY')}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
{/* <Text
|
|
|
|
|
style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net_init, ' ')} ${this.state.wallet.card_currency_code}`}</Text> */}
|
|
|
|
|
<Text
|
|
|
|
|
style={[Typography.caption1, Color.grayColor]}>{`${thousands(this.state.montant, ' ')} ${this.state.wallet.card_currency_code}`}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('EXCHANGE_TAUX')}: </Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{exchange_rate}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
|
|
|
<View style={{flex: 1}}>
|
2023-10-20 14:23:01 +00:00
|
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_FINAL_COUNTRY')}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
|
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{montant_net_final}</Text>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
isModalConfirmVisible: false
|
|
|
|
|
});
|
|
|
|
|
}}/>
|
|
|
|
|
<Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
isModalConfirmVisible: false,
|
|
|
|
|
isDataSubmit: true
|
|
|
|
|
});
|
2023-10-05 06:09:30 +00:00
|
|
|
this.props.envoieUserWalletToWalletAction(this.getRequestBody());
|
|
|
|
|
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
this.props.getCommissionUserWalletToWalletReset();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</Dialog.Container>
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onSubmitSendWalletToWallet = () => {
|
|
|
|
|
const {
|
2023-10-05 06:09:30 +00:00
|
|
|
// nomsDestinataire,
|
|
|
|
|
// prenomsDestinataire,
|
2023-07-24 08:43:45 +00:00
|
|
|
identityPiecesName,
|
|
|
|
|
paysDestinationSelect,
|
|
|
|
|
numeroIdentite,
|
|
|
|
|
walletActifSelect,
|
|
|
|
|
typeIdDestinataireSelect,
|
|
|
|
|
numeroTelephoneOrWalletCode,
|
|
|
|
|
//creditCardInput,
|
|
|
|
|
codeCVV,
|
|
|
|
|
montant,
|
|
|
|
|
password
|
|
|
|
|
} = this.state;
|
|
|
|
|
|
2023-10-05 06:09:30 +00:00
|
|
|
// if (this.ckeckIfFieldIsOK(nomsDestinataire))
|
|
|
|
|
// this.nomDestinataireAnim.shake(800);
|
|
|
|
|
// else if (this.ckeckIfFieldIsOK(prenomsDestinataire))
|
|
|
|
|
// this.prenomsDestinataireAnim.shake(800);
|
|
|
|
|
if (this.ckeckIfFieldIsOK(identityPiecesName))
|
2023-07-24 08:43:45 +00:00
|
|
|
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(codeCVV) && codeCVV === 3)
|
|
|
|
|
this.codeCVVAnim.shake(800);
|
|
|
|
|
else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
|
|
|
|
|
console.log("IS MONTANT VALID", this.isMontantValid())
|
|
|
|
|
this.montantAnim.shake(800);
|
|
|
|
|
} else if (this.ckeckIfFieldIsOK(password))
|
|
|
|
|
this.passwordAnim.shake(800);
|
|
|
|
|
else {
|
|
|
|
|
|
2023-10-20 14:23:01 +00:00
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
this.props.getCommissionUserWalletToWalletAction({
|
|
|
|
|
type: 21,
|
|
|
|
|
network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
|
|
|
|
|
id_wallet_user: this.state.wallet.id,
|
|
|
|
|
final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
|
|
|
|
|
id_destinataire: this.state.numeroTelephoneOrWalletCode,
|
|
|
|
|
montant: this.state.montant,
|
2023-10-05 06:09:30 +00:00
|
|
|
with_linked_card: true,
|
|
|
|
|
|
2023-07-24 08:43:45 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
triggerSubmitClick: true
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderLoader = () => {
|
|
|
|
|
return (
|
|
|
|
|
<ProgressDialog
|
|
|
|
|
visible={this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode}
|
|
|
|
|
title={I18n.t('LOADING')}
|
|
|
|
|
message={I18n.t('LOADING_INFO')}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
console.log("STATE", this.state);
|
|
|
|
|
const {resultEnvoieWalletToWalletGetCommission} = this.props;
|
2023-10-05 06:09:30 +00:00
|
|
|
const lastTwoWallets = this.state.walletActifs.slice(-2).map(wallet => wallet.name);
|
|
|
|
|
const isLastTwoElementsSelected = lastTwoWallets.includes(this.state.walletActifSelect);
|
2023-07-24 08:43:45 +00:00
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{(this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
|
|
|
|
|
{this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
|
|
|
|
|
{this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
|
|
|
|
|
{this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
|
|
|
|
|
{this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
|
|
|
|
|
{
|
|
|
|
|
(resultEnvoieWalletToWalletGetCommission !== null) &&
|
|
|
|
|
(typeof resultEnvoieWalletToWalletGetCommission.response !== 'undefined') &&
|
|
|
|
|
this.modalConfirmTransaction(resultEnvoieWalletToWalletGetCommission)
|
|
|
|
|
}
|
2023-10-20 14:23:01 +00:00
|
|
|
<TouchableOpacity
|
|
|
|
|
onPress={() => console.log("cdcdcdcdcdcdc")}>
|
|
|
|
|
<Text>frfnrrfr</Text>
|
|
|
|
|
</TouchableOpacity>
|
2023-07-24 08:43:45 +00:00
|
|
|
<ScrollView style={styles.container}>
|
|
|
|
|
|
2023-10-05 06:09:30 +00:00
|
|
|
<Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_ORDER_WALLET_LIER')} </Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
|
|
|
|
|
<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({
|
|
|
|
|
id_wallet_user: this.state.wallet.id,
|
|
|
|
|
id_country: countrySelect[0].id
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
this.props.getCommissionUserWalletToWalletReset();
|
|
|
|
|
}}
|
|
|
|
|
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) => {
|
|
|
|
|
let activeWalletSelect = data.filter(element => element.name === value);
|
2023-10-05 06:09:30 +00:00
|
|
|
let typeIdentifiant = isIlinkWorldWallet(activeWalletSelect[0].type) ? I18n.t('PHONE') : I18n.t('CODE_WALLET');
|
2023-07-24 08:43:45 +00:00
|
|
|
this.setState({
|
|
|
|
|
walletActifSelect: value,
|
|
|
|
|
typeIdDestinataireSelect: typeIdentifiant
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
valueExtractor={(value) => {
|
|
|
|
|
return value.name
|
|
|
|
|
}}
|
|
|
|
|
labelExtractor={(value) => {
|
|
|
|
|
return value.name
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
|
2023-10-05 06:09:30 +00:00
|
|
|
{isLastTwoElementsSelected && (
|
|
|
|
|
<>
|
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
|
|
|
this.nomDestinataireAnim = comp
|
|
|
|
|
}}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user'}
|
|
|
|
|
label={`${I18n.t('NAME_DESTINATAIRE')}`}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
iconSize={20}
|
|
|
|
|
value={this.state.nomsDestinataire}
|
|
|
|
|
onChangeText={(nomsDestinataire) => {
|
|
|
|
|
this.setState({nomsDestinataire})
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
>
|
|
|
|
|
</Fumi>
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
|
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
|
|
|
this.prenomsDestinataireAnim = comp
|
|
|
|
|
}}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
|
|
|
|
|
label={`${I18n.t('FIRSTNAME_DESTINATAIRE')}`}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
iconSize={20}
|
|
|
|
|
value={this.state.prenomsDestinataire}
|
|
|
|
|
onChangeText={(prenomsDestinataire) => {
|
|
|
|
|
this.setState({prenomsDestinataire})
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
>
|
|
|
|
|
</Fumi>
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2023-07-24 08:43:45 +00:00
|
|
|
<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.value
|
|
|
|
|
}}
|
|
|
|
|
labelExtractor={(value) => {
|
|
|
|
|
return I18n.t(value.name)
|
|
|
|
|
}}
|
|
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
|
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
|
|
|
this.numeroTelephoneAnim = comp
|
|
|
|
|
}}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon}
|
|
|
|
|
iconName={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone' : 'lock'}
|
|
|
|
|
label={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? I18n.t('PHONE') : I18n.t('CODE_WALLET')}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
keyboardType={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone-pad' : 'default'}
|
|
|
|
|
iconSize={20}
|
|
|
|
|
value={this.state.numeroTelephoneOrWalletCode}
|
|
|
|
|
onChangeText={(numeroTelephoneOrWalletCode) => {
|
|
|
|
|
this.setState({numeroTelephoneOrWalletCode})
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
>
|
|
|
|
|
</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.montantAnim = comp
|
|
|
|
|
}}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'money'}
|
|
|
|
|
label={I18n.t('AMOUNT')}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
keyboardType='numeric'
|
|
|
|
|
iconSize={20}
|
|
|
|
|
value={this.state.montant}
|
|
|
|
|
onChangeText={(montant) => {
|
|
|
|
|
this.setState({montant})
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
>
|
|
|
|
|
</Fumi>
|
|
|
|
|
<View style={{
|
|
|
|
|
position: 'absolute',
|
|
|
|
|
left: responsiveWidth(82),
|
|
|
|
|
top: 35,
|
|
|
|
|
flexDirection: 'row'
|
|
|
|
|
}}>
|
|
|
|
|
<View
|
|
|
|
|
style={{
|
|
|
|
|
width: 1,
|
|
|
|
|
borderLeftColor: '#f0f0f0',
|
|
|
|
|
height: 40,
|
|
|
|
|
left: -8,
|
|
|
|
|
top: -10,
|
|
|
|
|
borderLeftWidth: 1,
|
|
|
|
|
|
|
|
|
|
}}
|
|
|
|
|
/>
|
2023-10-05 06:09:30 +00:00
|
|
|
<Text style={[Typography.body1, FontWeight.bold]}>{this.state.wallet.card_currency_code}</Text>
|
2023-07-24 08:43:45 +00:00
|
|
|
</View>
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
|
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
|
|
|
this.passwordAnim = comp
|
|
|
|
|
}}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
|
|
|
|
|
label={I18n.t('PASSWORD')}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
iconSize={20}
|
|
|
|
|
secureTextEntry={true}
|
|
|
|
|
value={this.state.password}
|
|
|
|
|
onChangeText={(password) => {
|
|
|
|
|
this.setState({password})
|
|
|
|
|
}}
|
|
|
|
|
style={styles.input}
|
|
|
|
|
>
|
|
|
|
|
</Fumi>
|
|
|
|
|
</Animatable.View>
|
|
|
|
|
{/* <Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
|
|
|
|
|
<View style={{
|
|
|
|
|
overflow: 'hidden',
|
|
|
|
|
paddingTop: 16,
|
|
|
|
|
backgroundColor: 'white',
|
|
|
|
|
marginTop: responsiveHeight(2),
|
|
|
|
|
marginLeft: responsiveWidth(5),
|
|
|
|
|
marginRight: responsiveWidth(5),
|
|
|
|
|
borderRadius: 5,
|
|
|
|
|
}}>
|
|
|
|
|
<LiteCreditCardInput
|
|
|
|
|
inputStyle={{
|
|
|
|
|
flex: 1,
|
|
|
|
|
color: 'black',
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
padding: 7,
|
|
|
|
|
paddingLeft: 0,
|
|
|
|
|
}}
|
|
|
|
|
validColor={this.state.creditCardInput.valid ? 'green' : ''}
|
|
|
|
|
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
|
|
|
|
|
onChange={this.onCreditCardChange}
|
|
|
|
|
labels={{
|
|
|
|
|
number: I18n.t('CARD_NUMBER_LABEL'),
|
|
|
|
|
expiry: I18n.t('CARD_EXPIRY_LABEL'),
|
|
|
|
|
cvc: I18n.t('CARD_CVC_LABEL'),
|
|
|
|
|
}} />
|
|
|
|
|
{
|
|
|
|
|
(this.state.displayCardError) &&
|
|
|
|
|
this.isCreditCardValid().map((item) => (
|
|
|
|
|
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
</View>
|
|
|
|
|
</Animatable.View> */}
|
|
|
|
|
|
|
|
|
|
<Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
|
|
|
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'credit-card'}
|
|
|
|
|
label={I18n.t('CARD_CVC_LABEL')}
|
|
|
|
|
iconColor={'#f95a25'}
|
|
|
|
|
keyboardType='numeric'
|
|
|
|
|
iconSize={20}
|
|
|
|
|
value={this.state.codeCVV}
|
|
|
|
|
onChangeText={(codeCVV) => {
|
|
|
|
|
if (codeCVV.length > 3) {
|
|
|
|
|
this.setState({ codeCVV: this.state.codeCVV.substring(0, 3) })
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
this.setState({ codeCVV })
|
|
|
|
|
}}
|
|
|
|
|
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,
|
|
|
|
|
|
|
|
|
|
loadingEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.loading,
|
|
|
|
|
resultEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.result,
|
|
|
|
|
errorEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.error,
|
|
|
|
|
|
|
|
|
|
loadingEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.loading,
|
|
|
|
|
resultEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.result,
|
|
|
|
|
errorEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.error,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
|
|
|
getActiveCountryByDialCodeAction,
|
|
|
|
|
getActiveCountryByDialCodeReset,
|
|
|
|
|
|
|
|
|
|
getPayCountryNetworkAction,
|
|
|
|
|
getPayCountryNetworkReset,
|
|
|
|
|
|
|
|
|
|
getActiveCountryAction,
|
|
|
|
|
getActiveCountryReset,
|
|
|
|
|
|
|
|
|
|
envoieUserWalletToWalletAction,
|
|
|
|
|
envoieUserWalletToWalletReset,
|
|
|
|
|
|
|
|
|
|
getCommissionUserWalletToWalletAction,
|
2023-10-05 06:09:30 +00:00
|
|
|
getCommissionUserWalletToWalletReset,
|
|
|
|
|
|
|
|
|
|
envoieUserWalletToCardReset,
|
|
|
|
|
envoieUserWalletToCardAction,
|
2023-07-24 08:43:45 +00:00
|
|
|
|
|
|
|
|
}, dispatch);
|
|
|
|
|
|
|
|
|
|
export default connect(maptStateToProps, mapDispatchToProps)(CarteLier);
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
},
|
|
|
|
|
blockView: {
|
|
|
|
|
paddingVertical: 10,
|
|
|
|
|
borderBottomWidth: 1
|
|
|
|
|
},
|
|
|
|
|
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,
|
|
|
|
|
}
|
|
|
|
|
});
|
