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, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire} from '../../../utils/UtilsFunction'; import { LiteCreditCardInput } from "react-native-credit-card-input"; import {selectActivatePaySubscription, selectSubscriptionList} from "../../../redux/insurance/insurance.selector"; import {readUser} from '../../../webservice/AuthApi'; import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi'; import { envoieUserWalletToWalletAction, envoieUserWalletToWalletReset, envoieUserWalletToCardReset, envoieUserWalletToCardAction } from '../../../webservice/EnvoieUserApi'; import {FontWeight, Typography} from '../../../config/typography'; import thousands from 'thousands'; import {IlinkEmitter} from '../../../utils/events'; import { fetchActivePaySubscription, fetchGetSubscriptionListPending, fetchGetSubscriptionListReset, fetchActivePaySubscriptionReset } from "../../../redux/insurance/insurance.actions"; let theme = require('../../../utils/theme.json'); let route = require('../../../route.json'); import SelectAssurance from './selectAssurance'; class AutreCarteN extends Component { static navigatorStyle = { navBarBackgroundColor: Color.primaryColor, statusBarColor: Color.primaryDarkColor, navBarTextColor: '#FFFFFF', navBarButtonColor: '#FFFFFF' }; static navigationOptions = () => { return { drawerLabel: () => null, headerTitle: I18n.t('ENVOIE_ARGENT'), headerTintColor: 'white', headerStyle: { backgroundColor: Color.primaryColor, marginTop: 30, color: 'white' }, headerTitleStyle: { color: "white" }, title: I18n.t('ENVOIE_ARGENT') } }; constructor(props) { super(props); this.state = { subscription: this.props.subscription, identityPieces: identityPieces(), identityPiecesName: I18n.t((identityPieces()[0]).name), paysDestination: [], countryCustomer: [], subscriptionListTemp : [], paysDestinationSelect: null, paysCarteSelect: null, subscriptions: [], assuranceCarteSelect: null, typeIdDestinataire: typeIdIDestinataire(), typeIdDestinataireSelect: (typeIdIDestinataire()[0].value), amount: null, password: null, isIlinkWorldWalletSelect: false, loading: false, numeroSerie: '', numCarte: 0, cvv: 0, codeCVV: null, expiration_date: '', creditCardInput: {}, user: null, nomsDestinataire: null, prenomsDestinataire: null, modalVisible: false, hasLoadActiveCountryList: false, hasLoadActivePayCountryNetworkList: false, triggerSubmitClick: false, isDataSubmit: false, isModalConfirmVisible: false, wallet: store.getState().walletDetailReducer.result.response, with_linked_card: false, displayFirstStep: true, displaySecondStep: false, //subscription: null, }; const { subscription } = this.props; //4066082009294100 this.props.envoieUserWalletToCardReset(); this.props.getActiveCountryReset(); this.props.getActiveCountryByDialCodeReset(); this.props.getPayCountryNetworkReset(); this.props.envoieUserWalletToWalletReset(); this.props.fetchActivePaySubscription(); this.props.getActiveCountryAction(); console.log("ENVOIE WALLET PROPS", this.props); } componentDidMount() { readUser().then((user) => { if (user) { if (user !== undefined) { this.setState({user}); } } }); } setSubscriptions(newSubscriptions) { this.setState({ subscriptions: newSubscriptions }); } renderGetActionCountryList = () => { const {resultActiveCountryList, errorActiveCountryList, subscriptionList} = this.props; if (resultActiveCountryList !== null) { //if (typeof resultActiveCountryList.response !== 'undefined') { this.setState({ hasLoadActiveCountryList: false, countryCustomer: resultActiveCountryList.response, paysDestination: resultActiveCountryList.response, paysDestinationSelect: resultActiveCountryList.response[0].name, paysCarteSelect: resultActiveCountryList.response[0].name, assuranceCarteSelect: subscriptionList.response, }); 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} ) } } } // renderEnvoieWalletToWalletResponse = () => { // const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props; // // 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} // // ) // // } // // } // if (errorEnvoieWalletToWallet !== null) { // if (typeof errorEnvoieWalletToWallet.data !== 'undefined') { // Alert.alert( // I18n.t("WITHDRAWAL_ERROR"), // errorEnvoieWalletToWallet.data.error, // [ // { // text: I18n.t("OK"), onPress: () => { // this.props.envoieUserWalletToCardReset(); // } // } // ], // { cancelable: false } // ) // } // } // if (resultEnvoieWalletToWallet !== null) { // if (resultEnvoieWalletToWallet.status === 301) { // this.props.envoieUserWalletToCardReset(); // try{ // this.props.navigation.push('webviewScreen', { // url: resultEnvoieWalletToWallet.response.payment_url, // requestBody: this.getRequestBody() // }); // } catch(error) { // console.log('error', error); // } // } // if (resultEnvoieWalletToWallet.status === 200) { // if (resultEnvoieWalletToWallet.response !== null) { // Alert.alert( // I18n.t("WITHDRAWAL_SUCCESS"), // resultEnvoieWalletToWallet.response, // [ // { // text: I18n.t("OK"), onPress: () => { // this.props.envoieUserWalletToCardReset(); // IlinkEmitter.emit("refreshWallet"); // this.props.navigation.pop(); // } // } // ], // { cancelable: false } // ) // } // } // } // } renderEnvoieWalletToWalletResponse = () => { const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props; // 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} // ) // } // } if (errorEnvoieWalletToWallet !== null) { if (errorEnvoieWalletToWallet.error) { Alert.alert( I18n.t("ERROR_LABLE"), Utils.getErrorMsg(errorEnvoieWalletToWallet), [ { text: I18n.t("OK"), onPress: () => { //dispatch(fetchGetSubscriptionListReset()); this.props.fetchGetSubscriptionListReset(); } } ], {cancelable: false} ); /* dropDownAlertRef.alertWithType( 'error', I18n.t('ERROR_LABEL'), Utils.getErrorMsg(subscriptionList), ); dispatch(fetchGetSubscriptionListReset());*/ } // if (typeof errorEnvoieWalletToWallet.data !== 'undefined') { // Alert.alert( // I18n.t("WITHDRAWAL_ERROR"), // errorEnvoieWalletToWallet.data.error, // [ // { // text: I18n.t("OK"), onPress: () => { // this.props.envoieUserWalletToCardReset(); // } // } // ], // { cancelable: false } // ) // } } 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_PAY_INSURANCE", // subscription: subscription, }); } catch(error) { console.log('error', error); } } if (resultEnvoieWalletToWallet.status === 200) { if (resultEnvoieWalletToWallet.response !== null) { Alert.alert( I18n.t("WITHDRAWAL_SUCCESS"), resultEnvoieWalletToWallet.response, [ { text: I18n.t("OK"), onPress: () => { this.props.fetchGetSubscriptionListReset(); IlinkEmitter.emit("refreshWallet"); this.props.navigation.pop(); navigation.goBack() } } ], { cancelable: false } ) } } } } getRequestBody () { return { numero_carte: this.state.creditCardInput.values.number.replace(/\s/g, ''), cvv: this.state.creditCardInput.values.cvc, expiration_date: this.state.creditCardInput.values.expiry, id_wallet_user: this.state.wallet.id, //montant: this.state.montant, password: this.state.password, customer_surname: this.state.surnameCustomer, customer_address: this.state.adressCustomer, customer_city: this.state.cityCustomer, customer_country: (this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect))[0].code_country, payment_method: 'CARD', amount: this.state.amount, } } 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; } onCreditCardChange = (form) => { this.setState({ creditCardInput: form, displayCardError: 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 }; } onSubmitNextStep = () => { const { surnameCustomer, adressCustomer, cityCustomer, } = this.state; if (this.ckeckIfFieldIsOK(surnameCustomer)) this.surnameCustomerAnim.shake(800); else if (this.ckeckIfFieldIsOK(adressCustomer)) this.adressCustomerAnim.shake(800); else if (this.ckeckIfFieldIsOK(cityCustomer)) this.cityCustomerAnim.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); }); } } onSubmitSendWalletToWallet = () => { const { paysDestinationSelect, creditCardInput, amount, password } = this.state; if (this.ckeckIfFieldIsOK(paysDestinationSelect)) this.paysDestinationAnim.shake(800); else if (!creditCardInput.valid) this.codeCVVAnim.shake(800); else if (this.ckeckIfFieldIsOK(amount) || !this.isMontantValid().isValid) { this.montantAnim.shake(800); } else if (this.ckeckIfFieldIsOK(password)) this.passwordAnim.shake(800); else { console.warn("febfAAAAAf: ", this.getRequestBody()) //this.props.envoieUserWalletToWalletAction(this.getRequestBody()); this.props.fetchActivePaySubscription(this.getRequestBody()); } this.setState({ //triggerSubmitClick: true, //isDataSubmit: false }) } renderLoader = () => { return ( ) } render() { const { subscription } = this.props; console.log("STATE", this.state); return ( <> {(this.state.modalVisible || 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.displayFirstStep && <> {I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')} { this.surnameCustomerAnim = comp }}> { console.log('mot de passe :',surnameCustomer) this.setState({surnameCustomer}) }} style={styles.input} > { this.nameCustomerAnim= comp }}> { this.setState({nameCustomer}) }} style={styles.input} > { this.adressCustomerAnim = comp }}> { this.setState({adressCustomer}) }} style={styles.input} > { this.cityCustomerAnim = comp }}> { this.setState({cityCustomer}) }} style={styles.input} > { this.codeZipCustomerAnim = comp }}> { this.setState({codeZipCustomer}) }} style={styles.input} > } {this.state.displaySecondStep && <> {I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')} { 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({ // paysCarteSelect: value, // hasLoadActivePayCountryNetworkList: true, // isDataSubmit: false // }, () => { // this.props.getPayCountryNetworkAction({ // id_wallet_user: this.state.wallet.id, // id_country: countrySelect[0].id // }); // }); // this.props.getCommissionUserWalletToCashReset(); }} valueExtractor={(value) => { return value.name }} labelExtractor={(value) => { return value.name }} /> { this.codeCVVAnim = comp }}> { (this.state.displayCardError) && this.isCreditCardValid().map((item) => ( {item} )) } { this.montantAnim = comp }}> { console.log('mot de passe :',amount) this.setState({amount}) }} style={styles.input} > {this.state.wallet.currency_code} {/* {this.state.countryCustomer.filter(element => element.name === this.state.paysCarteSelect)[0]?.currency_code} */} { this.passwordAnim = comp }}> { console.log('mot de passe :',password ) 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, loadingEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.loading, resultEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.result, errorEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.error, }); const mapDispatchToProps = dispatch => bindActionCreators({ subscriptionList: selectSubscriptionList, activatePaySubscription: selectActivatePaySubscription, fetchActivePaySubscription, fetchGetSubscriptionListPending, fetchGetSubscriptionListReset, fetchActivePaySubscriptionReset, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getPayCountryNetworkAction, getPayCountryNetworkReset, getActiveCountryAction, getActiveCountryReset, envoieUserWalletToWalletAction, envoieUserWalletToWalletReset, envoieUserWalletToCardReset, envoieUserWalletToCardAction, }, dispatch); export default connect(maptStateToProps, mapDispatchToProps)(AutreCarteN); 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, } });