583 lines
24 KiB
JavaScript
Executable File
583 lines
24 KiB
JavaScript
Executable File
import isEqual from 'lodash/isEqual';
|
|
import LottieView from 'lottie-react-native';
|
|
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 'moment/locale/es-us';
|
|
import 'moment/locale/fr';
|
|
import React, { Component } from 'react';
|
|
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
|
|
import { CreditCardInput } from "react-native-credit-card-input";
|
|
import Dialog from "react-native-dialog";
|
|
import I18n from 'react-native-i18n';
|
|
import { Dropdown } from 'react-native-material-dropdown';
|
|
import { Appbar, Provider } from 'react-native-paper';
|
|
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
|
|
import { ProgressDialog } from 'react-native-simple-dialogs';
|
|
import { connect } from 'react-redux';
|
|
import { bindActionCreators } from 'redux';
|
|
import CustomButton from '../../components/CustomButton';
|
|
import OutlineTextInput from '../../components/OutlineTextInput';
|
|
import style from '../../components/TextInput/styles';
|
|
import { Color } from '../../config/Color';
|
|
import { Typography } from '../../config/typography';
|
|
import { IlinkEmitter } from "../../utils/events";
|
|
import { inputCardSource } from '../../utils/UtilsFunction';
|
|
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
|
|
import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
|
|
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
|
|
let moment = require('moment-timezone');
|
|
|
|
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 {
|
|
header: null,
|
|
headerMode: 'none',
|
|
headerTitle: null,
|
|
activeColor: '#f0edf6',
|
|
inactiveColor: '#3e2465',
|
|
};
|
|
}
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
type: "credit",
|
|
montant: '',
|
|
numeroSerie: '',
|
|
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,
|
|
isSubmitClick: false,
|
|
displayCardError: false,
|
|
inputCardSource: inputCardSource(),
|
|
isDisplaySerialTextInput: true,
|
|
facade: "back"
|
|
};
|
|
this.props.walletCommissionAmountReset();
|
|
this.props.depositActionReset();
|
|
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
}
|
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if (nextProps.resultGetCommission != null) {
|
|
|
|
if (typeof nextProps.resultGetCommission.response !== 'undefined') {
|
|
|
|
if (!nextProps.loadingGetCommission)
|
|
this.setState({
|
|
isModalConfirmVisible: true
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({ name: I18n.t('WALLET') })
|
|
this.forceUpdate()
|
|
}
|
|
|
|
onCreditCardChange = (form) => {
|
|
console.log(form);
|
|
this.setState({
|
|
creditCardInput: form,
|
|
displayCardError: false
|
|
});
|
|
}
|
|
|
|
isNormalInteger = (str) => {
|
|
if (/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str))
|
|
return false;
|
|
else
|
|
return true;
|
|
}
|
|
|
|
isMontantValid = () => {
|
|
const { montant } = this.state;
|
|
if ((parseInt(isEqual(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
|
|
};
|
|
}
|
|
|
|
|
|
isNumeroSerieValid = () => {
|
|
const { numeroSerie } = this.state;
|
|
if ((parseInt(isEqual(numeroSerie, 0)) || numeroSerie < 0))
|
|
return {
|
|
errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
|
|
isValid: false
|
|
};
|
|
|
|
else if (!this.isNormalInteger(numeroSerie)) {
|
|
return {
|
|
errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
|
|
isValid: false
|
|
};
|
|
}
|
|
else if (numeroSerie.length > 11) {
|
|
return {
|
|
errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
|
|
isValid: false
|
|
};
|
|
}
|
|
|
|
else
|
|
return {
|
|
errorMessage: '',
|
|
isValid: true
|
|
};
|
|
}
|
|
|
|
isCreditCardValid = () => {
|
|
const { creditCardInput } = this.state;
|
|
const errorMessage = [];
|
|
|
|
if (typeof creditCardInput.status !== 'undefined') {
|
|
|
|
if (creditCardInput.status.cvc === 'incomplete')
|
|
errorMessage.push(I18n.t('CVC_CARD_ERROR'));
|
|
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;
|
|
}
|
|
|
|
commissionsLoading = () => {
|
|
return (
|
|
<ProgressDialog
|
|
visible={this.props.loadingGetCommission}
|
|
title={I18n.t('LOADING')}
|
|
message={I18n.t('LOADING_INFO')}
|
|
/>
|
|
)
|
|
}
|
|
|
|
modalConfirmTransaction = (data) => {
|
|
const commission = data.response.commission;
|
|
const montant_calcule = data.response.montant_calcule;
|
|
|
|
console.log("DATA SEND TO CONFIRM DIALOG", data);
|
|
return (
|
|
|
|
<Dialog.Container useNativeDriver={true} visible={this.state.isModalConfirmVisible}>
|
|
|
|
<Dialog.Title>{I18n.t('CONFIRM_DEPOSIT')}</Dialog.Title>
|
|
|
|
<View>
|
|
|
|
<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]}>{commission}</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]}>{montant_calcule}</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
|
|
});
|
|
this.props.walletCommissionAmountReset();
|
|
if (isEqual(this.state.facade, 'front')) {
|
|
this.props.depositAction({
|
|
numCarte: this.state.creditCardInput.values.number.replace(/\s/g, ''),
|
|
cvv: this.state.creditCardInput.values.cvc,
|
|
expiration_date: this.state.creditCardInput.values.expiry,
|
|
type: "credit",
|
|
montant: this.state.montant,
|
|
id_wallet: this.state.id,
|
|
facade: this.state.facade
|
|
});
|
|
}
|
|
else {
|
|
this.props.depositAction({
|
|
numCarte: this.state.numeroSerie,
|
|
type: "credit",
|
|
montant: this.state.montant,
|
|
id_wallet: this.state.id,
|
|
facade: this.state.facade
|
|
});
|
|
}
|
|
}} />
|
|
|
|
</Dialog.Container>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
onSubmitDeposit = () => {
|
|
const { creditCardInput } = this.state;
|
|
|
|
if (isEqual(this.state.facade, 'back')) {
|
|
if (this.isMontantValid().isValid && this.isNumeroSerieValid().isValid && this.state.montant.length > 0) {
|
|
|
|
this.setState({
|
|
numCarte: this.state.numeroSerie
|
|
});
|
|
this.props.getWalletCommissionAmount({
|
|
type: "credit",
|
|
montant: this.state.montant,
|
|
id_wallet: this.state.id
|
|
});
|
|
}
|
|
} else {
|
|
if (this.isMontantValid().isValid && creditCardInput.valid && this.state.montant.length > 0) {
|
|
|
|
this.setState({
|
|
numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
|
|
cvv: creditCardInput.values.cvc,
|
|
expiration_date: creditCardInput.values.expiry,
|
|
});
|
|
this.props.getWalletCommissionAmount({
|
|
type: "credit",
|
|
montant: this.state.montant,
|
|
id_wallet: this.state.id
|
|
});
|
|
}
|
|
else if (!creditCardInput.valid) {
|
|
this.setState({
|
|
displayCardError: true
|
|
})
|
|
}
|
|
}
|
|
|
|
this.setState({ isSubmitClick: true });
|
|
}
|
|
|
|
|
|
renderDialogGetCommissionResponse = () => {
|
|
|
|
const { errorGetCommission } = this.props;
|
|
|
|
if (errorGetCommission !== null) {
|
|
if (typeof errorGetCommission.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_LABLE"),
|
|
errorGetCommission.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
//this.props.resetCommissionReducer();
|
|
}
|
|
}
|
|
],
|
|
{ cancelable: false }
|
|
)
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
isHasError = () => {
|
|
const { error, result } = this.props;
|
|
|
|
if (this.state.isDataSubmit) {
|
|
|
|
if (error !== null) {
|
|
if (typeof error.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_LABEL"),
|
|
error.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => { }
|
|
}
|
|
|
|
],
|
|
{ cancelable: false }
|
|
);
|
|
|
|
this.props.navigation.state.params.onGoBack();
|
|
this.props.navigation.pop();
|
|
|
|
}
|
|
return null;
|
|
}
|
|
|
|
else if (result !== null) {
|
|
|
|
setTimeout(() => {
|
|
this.props.resetWalletListDetailReducer();
|
|
this.props.navigation.state.params.onGoBack();
|
|
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() {
|
|
console.log("STATE", this.state);
|
|
const { resultGetCommission } = this.props;
|
|
return (
|
|
<Provider>
|
|
<View style={{ flex: 1 }}>
|
|
|
|
<StatusBar
|
|
backgroundColor={Color.primaryDarkColor}
|
|
barStyle="light-content"
|
|
translucent={false}
|
|
/>
|
|
|
|
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
|
|
<Appbar.BackAction
|
|
onPress={() => { this.props.navigation.pop() }}
|
|
/>
|
|
<Appbar.Content
|
|
title={I18n.t('MAKE_DEPOSIT')}
|
|
/>
|
|
</Appbar.Header>
|
|
<View style={[styles.container]}>
|
|
|
|
{
|
|
(resultGetCommission !== null) &&
|
|
(typeof resultGetCommission.response !== 'undefined') &&
|
|
this.modalConfirmTransaction(resultGetCommission)
|
|
}
|
|
|
|
{this.isHasError()}
|
|
{this.commissionsLoading()}
|
|
{this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
|
|
<ScrollView style={{ padding: 20 }}>
|
|
|
|
<View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
|
|
|
|
<Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
|
|
<Dropdown
|
|
containerStyle={{ marginTop: -20 }}
|
|
value='serial-number'
|
|
data={this.state.inputCardSource}
|
|
onChangeText={(value, index, data) => {
|
|
this.setState({
|
|
isDisplaySerialTextInput: isEqual(value, 'serial-number'),
|
|
facade: isEqual(value, 'serial-number') ? 'back' : 'front'
|
|
})
|
|
}}
|
|
valueExtractor={(value) => value.value}
|
|
labelExtractor={(value) => I18n.t(value.name)}
|
|
/>
|
|
</View>
|
|
|
|
{!this.state.isDisplaySerialTextInput &&
|
|
<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'),
|
|
}} />
|
|
{
|
|
(this.state.displayCardError) &&
|
|
this.isCreditCardValid().map((item) => (
|
|
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
|
|
))
|
|
}
|
|
</View>
|
|
}
|
|
|
|
{this.state.isDisplaySerialTextInput &&
|
|
|
|
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
|
|
<OutlineTextInput
|
|
borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
|
|
value={this.state.numeroSerie}
|
|
keyboardType="numeric"
|
|
label={I18n.t('NUMERO_DE_SERIE')}
|
|
style={{ marginTop: 10 }}
|
|
placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
|
|
onChangeText={(numeroSerie) => {
|
|
this.setState({ numeroSerie });
|
|
this.isNumeroSerieValid();
|
|
}}
|
|
/>
|
|
{
|
|
(!this.isNumeroSerieValid().isValid) &&
|
|
<Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
|
|
}
|
|
{
|
|
(this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
|
|
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
|
|
}
|
|
<Text></Text>
|
|
</View>
|
|
}
|
|
|
|
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
|
|
<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_DESCRIPTION')}
|
|
onChangeText={(montant) => {
|
|
this.setState({ montant });
|
|
this.isMontantValid();
|
|
}}
|
|
/>
|
|
{
|
|
(!this.isMontantValid().isValid) &&
|
|
<Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
|
|
}
|
|
{
|
|
(this.state.isSubmitClick && this.state.montant.length === 0) &&
|
|
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
|
|
}
|
|
<Text></Text>
|
|
</View>
|
|
|
|
<View style={{ margin: 10 }}>
|
|
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
|
|
{I18n.t('VALIDATE')}
|
|
</CustomButton>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
</View>
|
|
</Provider>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
const mapStateToProps = state => ({
|
|
loading: state.depositReducer.loading,
|
|
result: state.depositReducer.result,
|
|
error: state.depositReducer.error,
|
|
|
|
loadingGetCommission: state.walletGetCommission.loadingGetCommission,
|
|
resultGetCommission: state.walletGetCommission.resultGetCommission,
|
|
errorGetCommission: state.walletGetCommission.errorGetCommission,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
depositAction: depositAction,
|
|
getWalletCommissionAmount: getWalletCommissionAmount,
|
|
walletCommissionAmountReset: walletCommissionAmountReset,
|
|
resetWalletListDetailReducer: resetWalletListDetailReducer,
|
|
depositActionReset
|
|
}, 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
|
|
},
|
|
}); |