ilink-world/screens/wallet/WalletDepot.js

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: "credit",
               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,
               isSubmitClick: false,
               displayCardError: 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) => {
          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(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
               };
     }

     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;
     }

     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: "credit",
                                             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);
          }
          else if (!creditCardInput.valid) {
               this.setState({
                    displayCardError: true
               })
          }
          this.setState({ isSubmitClick: true })
     }

     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.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() {
          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'),
                                   }} />
                              {
                                   (this.state.displayCardError) &&
                                   this.isCreditCardValid().map((item) => (
                                        <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
                                   ))
                              }
                         </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) &&
                                   <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
                              }
                              {
                                   (this.state.isSubmitClick && this.state.montant === null) &&
                                   <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>
          )
     }

}

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
     },
});