419 lines
13 KiB
JavaScript
419 lines
13 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 {Alert, ScrollView, StyleSheet, Text, View} from 'react-native';
|
|
import * as Animatable from 'react-native-animatable';
|
|
import I18n from 'react-native-i18n';
|
|
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 {FontWeight, Typography} from '../../../config/typography';
|
|
import {store} from "../../../redux/store";
|
|
import {readUser} from '../../../webservice/AuthApi';
|
|
import {isNormalInteger} from '../../../utils/UtilsFunction';
|
|
import {askNanoCreditAction, getNanoCreditDemandDurationAction} from '../../../webservice/NanoCreditApi';
|
|
import {Dropdown} from 'react-native-material-dropdown-v2';
|
|
import {
|
|
getIlinkBankAction,
|
|
getIlinkBankReset,
|
|
reattachAccountAction,
|
|
reattachAccountReset
|
|
} from "../../../webservice/WalletApi";
|
|
|
|
let theme = require('../../../utils/theme.json');
|
|
let route = require('../../../route.json');
|
|
|
|
|
|
class ReattachAccountUser extends Component {
|
|
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: Color.primaryColor,
|
|
statusBarColor: Color.primaryDarkColor,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF'
|
|
|
|
};
|
|
|
|
static navigationOptions = () => {
|
|
return {
|
|
drawerLabel: () => null,
|
|
headerTitle: I18n.t('REATTACH_CARD'),
|
|
headerTintColor: 'white',
|
|
headerStyle: {
|
|
backgroundColor: Color.primaryColor,
|
|
marginTop: 0,
|
|
color: 'white'
|
|
},
|
|
headerTitleStyle: {
|
|
color: "white"
|
|
},
|
|
title: I18n.t('REATTACH_CARD')
|
|
}
|
|
};
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
codeGroupe: null,
|
|
codeSponsor: null,
|
|
nomGroupe: null,
|
|
user: null,
|
|
iban: null,
|
|
bankToSend: null,
|
|
ilinkBanks: [],
|
|
bankSelect: null,
|
|
triggerSubmitClick: false,
|
|
hasLoadBank: false,
|
|
modalVisible: false,
|
|
isSubmitClick: false,
|
|
isDataSubmit: false,
|
|
isModalConfirmVisible: false,
|
|
wallet: store.getState().walletDetailReducer.result.response
|
|
};
|
|
|
|
this.props.getIlinkBankReset();
|
|
this.props.getIlinkBankAction(this.state.wallet.id_wallet_network);
|
|
|
|
}
|
|
|
|
componentDidMount() {
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({user});
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
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
|
|
};
|
|
}
|
|
|
|
renderIlinkBankList = () => {
|
|
const {resultGetBank, errorGetBank} = this.props;
|
|
if (resultGetBank !== null) {
|
|
if (typeof resultGetBank.response !== 'undefined') {
|
|
if (resultGetBank.response.length > 0) {
|
|
this.setState({
|
|
hasLoadBank: true,
|
|
ilinkBanks: resultGetBank.response,
|
|
bankSelect: resultGetBank.response[0].bank_name + " - " + resultGetBank.response[0].bank_address,
|
|
bankToSend: resultGetBank.response[0],
|
|
modalVisible: false
|
|
});
|
|
} else if (resultGetBank.response.length === 0) {
|
|
this.setState({
|
|
hasLoadBank: true,
|
|
ilinkBanks: [],
|
|
bankSelect: '',
|
|
bankToSend: null,
|
|
modalVisible: false
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
if (errorGetBank !== null) {
|
|
if (typeof errorGetBank.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
errorGetBank.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.getIlinkBankReset();
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
} else {
|
|
Alert.alert(
|
|
I18n.t('ERROR_LABEL'),
|
|
JSON.stringify(errorGetBank),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.getIlinkBankReset();
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
renderReattachAccountResponse = () => {
|
|
|
|
const {result, error} = this.props;
|
|
|
|
if (error !== null) {
|
|
if (typeof error.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_LABLE"),
|
|
error.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.reattachAccountReset();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
}
|
|
|
|
if (result !== null) {
|
|
if (result.response !== null) {
|
|
Alert.alert(
|
|
I18n.t("DEMAND_SEND"),
|
|
result.response,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.reattachAccountReset();
|
|
//IlinkEmitter.emit("treatNanoGroupDemand");
|
|
this.props.navigation.pop();
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({name: I18n.t('DEPOSIT_TO_CARD')})
|
|
this.forceUpdate()
|
|
}
|
|
|
|
|
|
onSubmitSendWalletToCard = () => {
|
|
const {iban, bankSelect} = this.state;
|
|
|
|
if (this.ckeckIfFieldIsOK(bankSelect))
|
|
this.listBankAnim.shake(800);
|
|
else if (this.ckeckIfFieldIsOK(iban))
|
|
this.ibanAnim.shake(800);
|
|
else {
|
|
console.warn("Code Iban", this.state.iban);
|
|
console.warn("Bank", this.state.bankToSend);
|
|
|
|
this.props.reattachAccountAction({
|
|
iban: this.state.iban,
|
|
id_bank: this.state.bankToSend.id_bank,
|
|
id_wallet_network: this.state.wallet.id_wallet_network,
|
|
id_user: this.state.user.id
|
|
});
|
|
|
|
}
|
|
this.setState({
|
|
isDataSubmit: true
|
|
});
|
|
}
|
|
|
|
|
|
renderLoader = () => {
|
|
return (
|
|
<ProgressDialog
|
|
visible={this.props.loading || this.props.loadingGetBank}
|
|
title={I18n.t('LOADING')}
|
|
message={I18n.t('LOADING_INFO')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
render() {
|
|
console.log(this.state);
|
|
return (
|
|
<>
|
|
{(this.props.loading || this.props.loadingGetBank) && this.renderLoader()}
|
|
{this.state.isDataSubmit && this.renderReattachAccountResponse()}
|
|
{!this.state.hasLoadBank && this.renderIlinkBankList()}
|
|
<ScrollView style={styles.container}>
|
|
|
|
<Text style={styles.subbigtitle}>{I18n.t('FILL_INFORMATION')}</Text>
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
this.listBankAnim = comp
|
|
}}
|
|
style={{
|
|
width: responsiveWidth(90),
|
|
height: 60,
|
|
marginTop: 20,
|
|
alignSelf: 'center',
|
|
borderRadius: 10,
|
|
paddingLeft: 20,
|
|
paddingRight: 20,
|
|
backgroundColor: 'white'
|
|
}}>
|
|
<Dropdown
|
|
label={I18n.t('BANK_LIST')}
|
|
data={this.state.ilinkBanks}
|
|
useNativeDriver={true}
|
|
value={this.state.bankSelect !== null ? this.state.bankSelect : ''}
|
|
onChangeText={(value, index, data) => {
|
|
console.log(value);
|
|
this.setState({
|
|
bankSelect: value.bank_name + " - " + value.bank_address,
|
|
bankToSend: value
|
|
});
|
|
}}
|
|
valueExtractor={(value) => {
|
|
return value
|
|
}}
|
|
labelExtractor={(value) => {
|
|
return value.bank_name + " - " + value.bank_address
|
|
}}
|
|
/>
|
|
</Animatable.View>
|
|
|
|
<Animatable.View ref={(comp) => {
|
|
this.ibanAnim = comp
|
|
}}>
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
|
|
label={I18n.t('CODE_IBAN')}
|
|
iconColor={'#f95a25'}
|
|
iconSize={20}
|
|
value={this.state.iban}
|
|
onChangeText={(iban) => {
|
|
this.setState({iban})
|
|
}}
|
|
style={styles.input}
|
|
>
|
|
</Fumi>
|
|
</Animatable.View>
|
|
|
|
<Button style={styles.btnvalide}
|
|
textStyle={styles.textbtnvalide}
|
|
onPress={() => {
|
|
this.onSubmitSendWalletToCard();
|
|
}}>
|
|
{I18n.t('SUBMIT_LABEL')}</Button>
|
|
</ScrollView>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
const maptStateToProps = state => ({
|
|
loadingGetBank: state.getIlinkBankReducer.loading,
|
|
resultGetBank: state.getIlinkBankReducer.result,
|
|
errorGetBank: state.getIlinkBankReducer.error,
|
|
|
|
loading: state.reattachAccountReducer.loading,
|
|
result: state.reattachAccountReducer.result,
|
|
error: state.reattachAccountReducer.error,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
|
|
getIlinkBankAction,
|
|
getIlinkBankReset,
|
|
|
|
reattachAccountAction,
|
|
reattachAccountReset,
|
|
|
|
askNanoCreditAction,
|
|
|
|
getNanoCreditDemandDurationAction,
|
|
|
|
}, dispatch);
|
|
|
|
export default connect(maptStateToProps, mapDispatchToProps)(ReattachAccountUser);
|
|
|
|
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,
|
|
}
|
|
}); |