import Button from 'apsl-react-native-button'; import isEqual from 'lodash/isEqual'; import isNil from 'lodash/isNil'; import React, {Component} from 'react'; import {Alert, ScrollView, StyleSheet, Text, View} from 'react-native'; 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, isNormalInteger} from '../../../utils/UtilsFunction'; import {readUser} from '../../../webservice/AuthApi'; import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi'; import { envoieUserWalletToCashAction, envoieUserWalletToCashReset, getCommissionUserWalletToCashAction, getCommissionUserWalletToCashReset } from '../../../webservice/EnvoieUserApi'; 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 EnvoiCashVersCashAgent extends Component { static navigatorStyle = { navBarBackgroundColor: Color.primaryColor, statusBarColor: Color.primaryDarkColor, navBarTextColor: '#FFFFFF', navBarButtonColor: '#FFFFFF' }; static navigationOptions = () => { return { drawerLabel: () => null, headerTitle: I18n.t('DEPOSIT_CASH_TO_CASH'), headerTintColor: 'white', headerStyle: { backgroundColor: Color.primaryColor, marginTop: 0, color: 'white' }, headerTitleStyle: { color: "white" }, title: I18n.t('DEPOSIT_CASH_TO_CASH') } }; constructor(props) { super(props); this.state = { identityPiecesEmetteur: identityPieces(), identityPiecesNameEmetteur: I18n.t((identityPieces()[0]).name), paysDestination: [], paysDestinationSelect: null, walletActifs: [], walletActifSelect: null, nomsEmetteur: null, prenomsEmetteur: null, emailEmetteur: null, numeroIdentiteEmetteur: null, nomsDestinataire: null, prenomsDestinataire: null, idDestinataire: null, numeroIdentiteDestinataire: null, montant: null, password: null, loading: false, user: null, triggerNextClick: false, displayFirstStep: true, displaySecondStep: false, modalVisible: false, hasLoadActiveCountryList: false, hasLoadActivePayCountryNetworkList: false, triggerSubmitClick: false, isDataSubmit: false, isModalConfirmVisible: false, wallet: store.getState().walletDetailReducer.result.response }; this.props.getActiveCountryReset(); this.props.getActiveCountryByDialCodeReset(); this.props.getPayCountryNetworkReset(); this.props.envoieUserWalletToCashReset(); this.props.getCommissionUserWalletToCashReset(); } componentDidMount() { readUser().then((user) => { if (user) { if (user !== undefined) { this.setState({user}); } } }); } componentWillReceiveProps(nextProps) { if (nextProps.resultEnvoieWalletToCashGetCommission != null) { if (typeof nextProps.resultEnvoieWalletToCashGetCommission.response !== 'undefined') { if (!nextProps.loadingEnvoieWalletToCashGetCommission) 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_agent: 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) { this.setState({ hasLoadActivePayCountryNetworkList: false, walletActifs: resultPayCountryNetwork.response, walletActifSelect: resultPayCountryNetwork.response[0].name, 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} ) } } } renderEnvoieWalletToWalletResponse = () => { const {resultEnvoieWalletToCash, errorEnvoieWalletToCash} = this.props; if (errorEnvoieWalletToCash !== null) { if (typeof errorEnvoieWalletToCash.data !== 'undefined') { Alert.alert( I18n.t("ERROR_TRANSFER"), errorEnvoieWalletToCash.data.error, [ { text: I18n.t("OK"), onPress: () => { this.props.envoieUserWalletToCashReset(); } } ], {cancelable: false} ) } } if (resultEnvoieWalletToCash !== null) { if (resultEnvoieWalletToCash.response !== null) { Alert.alert( I18n.t("SUCCESS_TRANSFER"), resultEnvoieWalletToCash.response, [ { text: I18n.t("OK"), onPress: () => { this.props.envoieUserWalletToCashReset(); IlinkEmitter.emit("refreshWallet"); this.props.navigation.pop(); } } ], {cancelable: false} ) } } } renderDialogGetCommissionResponse = () => { const {errorEnvoieWalletToCashGetCommission} = this.props; if (errorEnvoieWalletToCashGetCommission !== null) { if (typeof errorEnvoieWalletToCashGetCommission.data !== 'undefined') { Alert.alert( I18n.t("ERROR_LABLE"), errorEnvoieWalletToCashGetCommission.data.error, [ { text: I18n.t("OK"), onPress: () => { this.props.getCommissionUserWalletToCashReset(); } } ], {cancelable: false} ) } } } 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 exchange_rate = data.response.exchange_rate; console.log("DATA SEND TO CONFIRM DIALOG", data); return ( {I18n.t('TRANSACTION_DETAIL')} {I18n.t('AMOUNT')} {`${thousands(this.state.montant, ' ')} ${this.state.wallet.currency_code}`} {I18n.t('FEES_AND_TAXES')} {`${thousands(commission, ' ')} ${this.state.wallet.currency_code}`} {I18n.t('EXCHANGE_TAUX')}: {exchange_rate} {I18n.t('NET_AMOUNT')}: {`${thousands(montant_net_final, ' ')}`} { this.setState({ isModalConfirmVisible: false }); }}/> { this.setState({ isModalConfirmVisible: false, isDataSubmit: true }); this.props.envoieUserWalletToCashAction({ type: 17, id_wallet_agent: this.state.wallet.id, nom_emetteur: this.state.nomsEmetteur, prenom_emetteur: this.state.prenomsDestinataire, email_emetteur: this.state.emailEmetteur, type_document_emetteur: this.state.identityPiecesNameEmetteur, id_document_emetteur: this.state.numeroIdentiteEmetteur, final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id, id_destinataire: this.state.numeroIdentiteEmetteur, type_document_destinataire: this.state.identityPiecesNameEmetteur, nom_destinataire: this.state.nomsDestinataire, prenom_destinataire: this.state.prenomsDestinataire, id_document_destinataire: this.state.numeroIdentiteDestinataire, network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id, montant: this.state.montant, password: this.state.password }); this.props.getCommissionUserWalletToCashReset(); }}/> ); } onSubmitNextStep = () => { const {nomsEmetteur, prenomsEmetteur, emailEmetteur, numeroIdentiteEmetteur} = this.state; if (this.ckeckIfFieldIsOK(nomsEmetteur)) this.nomsEmetteurAnim.shake(800); else if (this.ckeckIfFieldIsOK(prenomsEmetteur)) this.prenomsEmetteurAnim.shake(800); else if (this.ckeckIfFieldIsOK(emailEmetteur)) this.emailEmetteurAnim.shake(800); else if (this.ckeckIfFieldIsOK(numeroIdentiteEmetteur)) this.numeroIdentiteEmetteurAnim.shake(800); else { this.setState({ triggerNextClick: true, modalVisible: true, hasLoadActiveCountryList: true, hasLoadActivePayCountryNetworkList: true, displayFirstStep: !this.state.displayFirstStep, displaySecondStep: !this.state.displaySecondSte }, () => { this.props.getActiveCountryAction(); console.log("ENVOIE WALLET PROPS", this.props); }); } } onSubmitCashVersAutreWallet = () => { const {nomsDestinataire, prenomsDestinataire, montant, password, numeroIdentiteDestinataire} = this.state; if (this.ckeckIfFieldIsOK(nomsDestinataire)) this.nomDestinataireAnim.shake(800); else if (this.ckeckIfFieldIsOK(prenomsDestinataire)) this.prenomsDestinataireAnim.shake(800); else if (this.ckeckIfFieldIsOK(numeroIdentiteDestinataire)) this.identityPiecesDestinataireAnim.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 { this.props.getCommissionUserWalletToCashAction({ type: 17, id_wallet_agent: this.state.wallet.id, final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id, montant: this.state.montant, network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id, }); } this.setState({ isDataSubmit: false, triggerSubmitClick: true }) } renderLoader = () => { return ( ) } render() { console.log("STATE", this.state); const {resultEnvoieWalletToCashGetCommission} = this.props; return ( <> {(this.state.modalVisible || this.props.loadingEnvoieWalletToCashGetCommission || this.props.loadingEnvoieWalletToCash || 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()} { (resultEnvoieWalletToCashGetCommission !== null) && (typeof resultEnvoieWalletToCashGetCommission.response !== 'undefined') && this.modalConfirmTransaction(resultEnvoieWalletToCashGetCommission) } {this.state.displayFirstStep && <> {I18n.t('ENVOIE_CASH_TO_CASH')} { this.nomsEmetteurAnim = comp }}> { this.setState({nomsEmetteur}) }} style={styles.input} > { this.prenomsEmetteurAnim = comp }}> { this.setState({prenomsEmetteur}) }} style={styles.input} > { this.emailEmetteurAnim = comp }}> { this.setState({emailEmetteur}) }} style={styles.input} > { this.identityPiecesEmetteurAnim = comp }} style={{ width: responsiveWidth(90), height: 60, marginTop: 20, alignSelf: 'center', borderRadius: 10, paddingLeft: 20, paddingRight: 20, backgroundColor: 'white' }}> { this.setState({identityPiecesNameEmetteur: value, isDataSubmit: false}); }} valueExtractor={(value) => { return I18n.t(value.name) }} labelExtractor={(value) => { return I18n.t(value.name) }} /> { this.numeroIdentiteEmetteurAnim = comp }}> { this.setState({numeroIdentiteEmetteur}) }} style={styles.input} > } {this.state.displaySecondStep && <> { this.nomDestinataireAnim = comp }}> { this.setState({nomsDestinataire}) }} style={styles.input} > { this.prenomsDestinataireAnim = comp }}> { this.setState({prenomsDestinataire}) }} style={styles.input} > { this.identityPiecesDestinataireAnim = comp }}> { this.setState({numeroIdentiteDestinataire}) }} style={styles.input} > { this.paysDestinationAnim = comp }} style={{ width: responsiveWidth(90), height: 60, marginTop: 20, alignSelf: 'center', borderRadius: 10, paddingLeft: 20, paddingRight: 20, backgroundColor: 'white' }}> { this.props.getPayCountryNetworkReset(); let countrySelect = data.filter(element => element.name === value); this.setState({ paysDestinationSelect: value, hasLoadActivePayCountryNetworkList: true, isDataSubmit: false }, () => { this.props.getPayCountryNetworkAction({ id_wallet_agent: this.state.wallet.id, id_country: countrySelect[0].id }); }); this.props.getCommissionUserWalletToCashReset(); }} valueExtractor={(value) => { return value.name }} labelExtractor={(value) => { return value.name }} /> { this.walletActifAnim = comp }} style={{ width: responsiveWidth(90), height: 60, marginTop: 20, alignSelf: 'center', borderRadius: 10, paddingLeft: 20, paddingRight: 20, backgroundColor: 'white' }}> { this.setState({ walletActifSelect: value, isDataSubmit: false }); }} valueExtractor={(value) => { return value.name }} labelExtractor={(value) => { return value.name }} /> { this.montantAnim = comp }}> { this.setState({montant}) }} style={styles.input} > {this.state.wallet.currency_code} { this.passwordAnim = comp }}> { this.setState({password}) }} style={styles.input} > } ) } } 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, loadingEnvoieWalletToCash: state.envoieUserWalletToCashReducer.loading, resultEnvoieWalletToCash: state.envoieUserWalletToCashReducer.result, errorEnvoieWalletToCash: state.envoieUserWalletToCashReducer.error, loadingEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.loading, resultEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.result, errorEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.error, }); const mapDispatchToProps = dispatch => bindActionCreators({ getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getPayCountryNetworkAction, getPayCountryNetworkReset, getActiveCountryAction, getActiveCountryReset, envoieUserWalletToCashAction, envoieUserWalletToCashReset, getCommissionUserWalletToCashAction, getCommissionUserWalletToCashReset }, dispatch); export default connect(maptStateToProps, mapDispatchToProps)(EnvoiCashVersCashAgent); 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, } });