356 lines
14 KiB
JavaScript
356 lines
14 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
import LottieView from 'lottie-react-native';
|
||
|
|
import * as Utils from '../../utils/DeviceUtils';
|
||
|
|
import Icons from 'react-native-vector-icons/Ionicons'
|
||
|
|
import { Images } from '../../config/Images';
|
||
|
|
import CustomButton from '../../components/CustomButton';
|
||
|
|
import OutlineTextInput from '../../components/OutlineTextInput';
|
||
|
|
import { Color } from '../../config/Color';
|
||
|
|
import Tag from '../../components/Tag';
|
||
|
|
import { IlinkEmitter } from "../../utils/events";
|
||
|
|
import { CreditCardInput } from "react-native-credit-card-input";
|
||
|
|
import { Typography, FontWeight } from '../../config/typography';
|
||
|
|
import depositAction from '../../webservice/DepositApi';
|
||
|
|
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
|
||
|
|
let moment = require('moment-timezone');
|
||
|
|
import 'moment/locale/fr'
|
||
|
|
import 'moment/locale/es-us'
|
||
|
|
import 'moment/locale/en-au'
|
||
|
|
import 'moment/locale/en-ca'
|
||
|
|
import 'moment/locale/en-ie'
|
||
|
|
import 'moment/locale/en-il'
|
||
|
|
import 'moment/locale/en-nz'
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { bindActionCreators } from 'redux';
|
||
|
|
import style from '../../components/TextInput/styles';
|
||
|
|
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
|
||
|
|
|
||
|
|
|
||
|
|
const CONTAINER_WIDTH = Dimensions.get("window").width;
|
||
|
|
|
||
|
|
class WalletDepot extends Component {
|
||
|
|
|
||
|
|
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarBackgroundColor: Color.accentLightColor,
|
||
|
|
statusBarColor: Color.accentColor,
|
||
|
|
navBarTextColor: '#FFFFFF',
|
||
|
|
navBarButtonColor: '#FFFFFF',
|
||
|
|
};
|
||
|
|
static navigationOptions = ({ navigation }) => {
|
||
|
|
return {
|
||
|
|
drawerLabel: () => null,
|
||
|
|
title: I18n.t('MAKE_DEPOSIT')
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
type: "debit",
|
||
|
|
montant: null,
|
||
|
|
numCarte: 0,
|
||
|
|
cvv: 0,
|
||
|
|
expiration_date: '',
|
||
|
|
creditCardInput: {},
|
||
|
|
comptePrincipal: this.props.navigation.state.params.wallet.balance_princ,
|
||
|
|
id: this.props.navigation.state.params.wallet.id,
|
||
|
|
isModalConfirmVisible: false,
|
||
|
|
isDataSubmit: false
|
||
|
|
};
|
||
|
|
|
||
|
|
console.log("Wallet Params", this.props.navigation.state.params.wallet);
|
||
|
|
|
||
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
updateLangue() {
|
||
|
|
this.props.navigation.setParams({ name: I18n.t('WALLET') })
|
||
|
|
this.forceUpdate()
|
||
|
|
}
|
||
|
|
|
||
|
|
onCreditCardChange = (form) => {
|
||
|
|
this.setState({
|
||
|
|
creditCardInput: form
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
isNormalInteger = (str) => {
|
||
|
|
if (/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str))
|
||
|
|
return false;
|
||
|
|
else
|
||
|
|
return true;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
isMontantValid = () => {
|
||
|
|
const { montant } = this.state;
|
||
|
|
if ((parseInt(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
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
commissionsFees = (amount, tauxComClientDepot, fraisMinBanquedepot) => {
|
||
|
|
let tauxComClientDepotTemp = ((amount * tauxComClientDepot) / 100);
|
||
|
|
return Math.round(tauxComClientDepotTemp + fraisMinBanquedepot);
|
||
|
|
}
|
||
|
|
|
||
|
|
modalConfirmTransaction = () => {
|
||
|
|
const { frais_min_banque_depot, taux_com_client_depot, } = this.props.navigation.state.params.wallet;
|
||
|
|
|
||
|
|
return (
|
||
|
|
|
||
|
|
<Dialog
|
||
|
|
visible={this.state.isModalConfirmVisible}
|
||
|
|
onTouchOutside={() => {
|
||
|
|
this.setState({ isModalConfirmVisible: false });
|
||
|
|
}}
|
||
|
|
width={0.7}
|
||
|
|
dialogTitle={<DialogTitle title={I18n.t('CONFIRM_DEPOSIT')} />}
|
||
|
|
footer={
|
||
|
|
<DialogFooter>
|
||
|
|
<DialogButton
|
||
|
|
text={I18n.t('CANCEL_LABEL')}
|
||
|
|
onPress={() => {
|
||
|
|
this.setState({
|
||
|
|
isModalConfirmVisible: false
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<DialogButton
|
||
|
|
text={I18n.t('SUBMIT_LABEL')}
|
||
|
|
onPress={() => {
|
||
|
|
this.setState({
|
||
|
|
isModalConfirmVisible: false,
|
||
|
|
isDataSubmit: true
|
||
|
|
});
|
||
|
|
this.props.depositAction({
|
||
|
|
numCarte: parseInt((this.state.creditCardInput.values.number).replace(/ /g, ' ')),
|
||
|
|
cvv: this.state.creditCardInput.values.cvc,
|
||
|
|
expiration_date: this.state.creditCardInput.values.expiry,
|
||
|
|
type: "debit",
|
||
|
|
montant: this.state.montant,
|
||
|
|
id_wallet: this.state.id
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</DialogFooter>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<DialogContent>
|
||
|
|
|
||
|
|
<View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
|
||
|
|
<View style={{ flexDirection: 'row', marginTop: 10 }}>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<Text style={[style.body2]}>{I18n.t('AMOUNT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{ flex: 1, alignItems: 'flex-end' }}>
|
||
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.montant}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{ flexDirection: 'row', marginTop: 10 }}>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('COMMISSION_FEES')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{ flex: 1, alignItems: 'flex-end' }}>
|
||
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{this.commissionsFees(this.state.montant, taux_com_client_depot, frais_min_banque_depot)}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{ paddingVertical: 10 }}>
|
||
|
|
<View style={{ flexDirection: 'row', marginTop: 10 }}>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('TOTAL')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{ flex: 1, alignItems: 'flex-end' }}>
|
||
|
|
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.montant - this.commissionsFees(this.state.montant, taux_com_client_depot, frais_min_banque_depot)}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
onSubmitDeposit = () => {
|
||
|
|
const { creditCardInput } = this.state;
|
||
|
|
|
||
|
|
if (this.isMontantValid().isValid && creditCardInput.valid) {
|
||
|
|
this.setState({
|
||
|
|
numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
|
||
|
|
cvv: creditCardInput.values.cvc,
|
||
|
|
expiration_date: creditCardInput.values.expiry,
|
||
|
|
isModalConfirmVisible: true
|
||
|
|
});
|
||
|
|
|
||
|
|
//this.props.depositAction(this.state);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
isHasError = () => {
|
||
|
|
const { error, result } = this.props;
|
||
|
|
|
||
|
|
if (this.state.isDataSubmit) {
|
||
|
|
|
||
|
|
if (error !== null) {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("ERROR_LABEL"),
|
||
|
|
error,
|
||
|
|
[
|
||
|
|
{
|
||
|
|
text: I18n.t("OK"), onPress: () => { }
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
{ cancelable: false }
|
||
|
|
);
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
else if (result !== null) {
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
this.props.navigation.pop();
|
||
|
|
}, 1500);
|
||
|
|
|
||
|
|
return <View
|
||
|
|
style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: responsiveWidth(100), height: responsiveHeight(100), flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||
|
|
<LottieView
|
||
|
|
style={styles.lottie}
|
||
|
|
source={require("../../datas/json/success.json")}
|
||
|
|
autoPlay
|
||
|
|
loop
|
||
|
|
/>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
else
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { error } = this.props;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={[styles.container]}>
|
||
|
|
|
||
|
|
{this.isHasError()}
|
||
|
|
{this.modalConfirmTransaction()}
|
||
|
|
<ScrollView style={{ padding: 20 }}>
|
||
|
|
|
||
|
|
|
||
|
|
<View style={{ marginTop: 10 }}>
|
||
|
|
<CreditCardInput
|
||
|
|
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'),
|
||
|
|
}} />
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{ margin: 20 }}>
|
||
|
|
<OutlineTextInput
|
||
|
|
borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
|
||
|
|
value={this.state.montant}
|
||
|
|
keyboardType="numeric"
|
||
|
|
label={I18n.t('AMOUNT_LABEL')}
|
||
|
|
style={{ marginTop: 10 }}
|
||
|
|
placeholder={I18n.t('AMOUNT_LABEL')}
|
||
|
|
onChangeText={(montant) => {
|
||
|
|
this.setState({ montant });
|
||
|
|
this.isMontantValid();
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
{
|
||
|
|
(!this.isMontantValid().isValid && this.state.montant !== null) &&
|
||
|
|
<Text style={{ color: 'red' }}>{this.isMontantValid().errorMessage}</Text>
|
||
|
|
}
|
||
|
|
<Text></Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{ margin: 10 }}>
|
||
|
|
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
|
||
|
|
{I18n.t('VALIDATE')}
|
||
|
|
</CustomButton>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
const mapStateToProps = state => ({
|
||
|
|
loading: state.depositReducer.loading,
|
||
|
|
result: state.depositReducer.result,
|
||
|
|
error: state.depositReducer.error
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
||
|
|
depositAction: depositAction
|
||
|
|
}, dispatch);
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, mapDispatchToProps)(WalletDepot);
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: Color.containerBackgroundColor
|
||
|
|
},
|
||
|
|
checkDefault: {
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
paddingVertical: 15,
|
||
|
|
marginTop: 10
|
||
|
|
},
|
||
|
|
contentButtonBottom: {
|
||
|
|
borderTopWidth: 1,
|
||
|
|
paddingVertical: 10,
|
||
|
|
paddingHorizontal: 20,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center"
|
||
|
|
},
|
||
|
|
blockView: {
|
||
|
|
paddingVertical: 10,
|
||
|
|
borderBottomWidth: 1
|
||
|
|
},
|
||
|
|
lottie: {
|
||
|
|
width: 248,
|
||
|
|
height: 248
|
||
|
|
},
|
||
|
|
});
|