transfer commission

redux/actions/WalletActions.js

@@ -1,4 +1,14 @@
-import { WALLET_LIST_PENDING, WALLET_LIST_SUCCESS, WALLET_LIST_ERROR } from "../types/WalletType";
+import {
+     WALLET_LIST_PENDING,
+     WALLET_LIST_SUCCESS,
+     WALLET_LIST_ERROR,
+     WALLET_HISTORY_PENDING,
+     WALLET_HISTORY_SUCCESS,
+     WALLET_HISTORY_ERROR,
+     WALLET_TRANSFER_COMMISSION_PENDING,
+     WALLET_TRANSFER_COMMISSION_SUCCESS,
+     WALLET_TRANSFER_COMMISSION_ERROR
+} from "../types/WalletType";
 
 
 export const fetchWalletListPending = () => ({
@@ -14,3 +24,31 @@ export const fetchWalletListError = (error) => ({
      type: WALLET_LIST_ERROR,
      result: error
 });
+
+export const fetchWalletHistoryPending = () => ({
+     type: WALLET_HISTORY_PENDING
+});
+
+export const fetchWalletHistorySuccess = (res) => ({
+     type: WALLET_HISTORY_SUCCESS,
+     result: res,
+});
+
+export const fetchWalletHistoryError = (error) => ({
+     type: WALLET_HISTORY_ERROR,
+     result: error
+});
+
+export const fetchWalletTransferCommissionPending = () => ({
+     type: WALLET_TRANSFER_COMMISSION_PENDING
+});
+
+export const fetchWalletTransferCommissionSuccess = (res) => ({
+     type: WALLET_TRANSFER_COMMISSION_SUCCESS,
+     result: res,
+});
+
+export const fetchWalletTransferCommssionError = (error) => ({
+     type: WALLET_TRANSFER_COMMISSION_ERROR,
+     result: error
+});

redux/reducers/WalletTransactionHistoryReducer.js

@@ -0,0 +1,33 @@
+import { WALLET_HISTORY_PENDING, WALLET_HISTORY_SUCCESS, WALLET_HISTORY_ERROR } from "../types/WalletType";
+
+const initialState = {
+     loadingTransaction: false,
+     resultTransaction: null,
+     errorTransaction: null,
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case WALLET_HISTORY_PENDING: return {
+               ...state,
+               loadingTransaction: true
+          }
+          case WALLET_HISTORY_SUCCESS: return {
+               ...state,
+               loadingTransaction: false,
+               resultTransaction: action.result.data,
+               errorTransaction: null
+          }
+          case WALLET_HISTORY_ERROR: return {
+               ...state,
+               loadingTransaction: false,
+               resultTransaction: null,
+               errorTransaction: action.result
+          }
+
+          default: {
+               return state;
+          }
+
+     }
+};

redux/reducers/WalletTransferCommission.js

@@ -0,0 +1,33 @@
+import { WALLET_TRANSFER_COMMISSION_PENDING, WALLET_TRANSFER_COMMISSION_SUCCESS, WALLET_TRANSFER_COMMISSION_ERROR } from "../types/WalletType";
+
+const initialState = {
+     loadingTransferCommission: false,
+     resultTransferCommission: null,
+     errorTransferCommission: null,
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case WALLET_TRANSFER_COMMISSION_PENDING: return {
+               ...state,
+               loadingTransferCommission: true
+          }
+          case WALLET_TRANSFER_COMMISSION_SUCCESS: return {
+               ...state,
+               loadingTransferCommission: false,
+               resultTransferCommission: action.result.data,
+               errorTransferCommission: null
+          }
+          case WALLET_TRANSFER_COMMISSION_ERROR: return {
+               ...state,
+               loadingTransferCommission: false,
+               resultTransferCommission: null,
+               errorTransferCommission: action.result
+          }
+
+          default: {
+               return state;
+          }
+
+     }
+};

redux/reducers/index.js

@@ -2,6 +2,8 @@ import { combineReducers } from "redux";
 import walletReducer from "./WalletReducer";
 import authKeyReducer from "./AuthKeyReducer";
 import depositReducer from "./DepositReducer";
+import walletHistoryReducer from "./WalletTransactionHistoryReducer";
+import walletTransferCommissionReducer from "./WalletTransferCommission";
 import { persistCombineReducers } from "redux-persist";
 import { AsyncStorage } from "react-native";
 
@@ -15,7 +17,9 @@ const persistConfig = {
 const rootReducer = persistCombineReducers(persistConfig, {
      walletReducer: walletReducer,
      authKeyReducer: authKeyReducer,
-     depositReducer: depositReducer
+     depositReducer: depositReducer,
+     walletHistoryReducer: walletHistoryReducer,
+     walletTransferCommissionReducer: walletTransferCommissionReducer
 });
 
 export default rootReducer;

redux/types/WalletType.js

@@ -1,3 +1,11 @@
 export const WALLET_LIST_PENDING = 'WALLET_LIST_PENDING';
 export const WALLET_LIST_SUCCESS = 'WALLET_LIST_SUCCESS';
 export const WALLET_LIST_ERROR = 'WALLET_LIST_ERROR';
+
+export const WALLET_HISTORY_PENDING = 'WALLET_HISTORY_PENDING';
+export const WALLET_HISTORY_SUCCESS = 'WALLET_HISTORY_SUCCESS';
+export const WALLET_HISTORY_ERROR = 'WALLET_HISTORY_ERROR';
+
+export const WALLET_TRANSFER_COMMISSION_PENDING = 'WALLET_TRANSFER_COMMISSION_PENDING';
+export const WALLET_TRANSFER_COMMISSION_SUCCESS = 'WALLET_TRANSFER_COMMISSION_SUCCESS';
+export const WALLET_TRANSFER_COMMISSION_ERROR = 'WALLET_TRANSFER_COMMISSION_ERROR';

screens/history-request/History.js

@@ -540,7 +540,9 @@ class History extends BaseScreen {
                return (<ActionButton buttonColor={accent}>
                     <ActionButton.Item buttonColor={primary} title={I18n.t('MAKE_REQUEST')}
                          onPress={() => {
-                              this.props.navigation.navigate(route.credrequester)
+                              this.props.navigation.push(route.credrequester, {
+                                   onGoBack: () => this.refreshData()
+                              })
                          }}
                     >
                          <Icon name="edit" style={styles.actionButtonIcon} />

screens/history-request/HistoryItemDetails.js

@@ -232,9 +232,10 @@ export default class HistoryItemDetails extends Component {
 
      renderBtn() {
           const { user } = this.state
-          console.warn(this.item)
+          console.warn("ITEM ITEM", this.item);
           if (user) {
                if (this.item.code_parrain === user.code_membre) {
+                    if (this.item.status === '1') {
                          return (<Button
                               style={{
                                    borderColor: 'transparent',
@@ -252,6 +253,57 @@ export default class HistoryItemDetails extends Component {
                               {this.state.statut}
                          </Button>
                          )
+                    } else {
+                         return (<View style={{
+                              flexDirection: 'row',
+                              paddingTop: 10
+                         }}>
+
+                              <View style={{
+                                   flex: 1,
+                                   alignItems: 'center'
+                              }}>
+                                   <Button
+                                        style={{
+                                             borderColor: 'transparent',
+                                             borderRadius: 6,
+                                             marginLeft: 5,
+                                             marginRight: 5,
+                                             backgroundColor: this.state.color
+                                        }}
+                                        isLoading={this.state.loadingTreat}
+                                        onPress={() => {
+                                             this.onTreatDemand()
+                                        }}
+                                        textStyle={this.styles.textbtnstyle}
+                                   >
+                                        {this.state.statut}
+                                   </Button>
+                              </View>
+
+                              <View style={{
+                                   flex: 1,
+                                   alignItems: 'center'
+                              }}>
+                                   <Button
+                                        style={{
+                                             borderColor: 'transparent',
+                                             borderRadius: 6,
+                                             marginLeft: 5,
+                                             marginRight: 5,
+                                             backgroundColor: '#ccc'
+                                        }}
+                                        isLoading={this.state.loadingTreat}
+                                        onPress={() => {
+                                             this.props.navigation.pop();
+                                        }}
+                                        textStyle={this.styles.textbtnstyle}
+                                   >
+                                        {I18n.t('QUIT')}
+                                   </Button>
+                              </View>
+                         </View>)
+                    }
                }
           }
      }

screens/history-request/HistoryRequester.js

@@ -7,9 +7,11 @@
  */
 
 import React, { Component } from 'react';
-import {Platform, StyleSheet, Text, View,ScrollView,
+import {
+     Platform, StyleSheet, Text, View, ScrollView,
      Alert,
-    FlatList,ProgressViewIOS,ProgressBarAndroid,Picker,StatusBar} from 'react-native';
+     FlatList, ProgressViewIOS, ProgressBarAndroid, Picker, StatusBar
+} from 'react-native';
 import ActionButton from 'react-native-action-button';
 import MapView from 'react-native-maps';
 import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
@@ -60,7 +62,9 @@ export default class HistoryRequester extends Component {
      }
 
      onUserCancel() {
-        this.props.navigation.goBack()
+          console.log(this.props);
+          this.props.navigation.state.params.onGoBack();
+          this.props.navigation.goBack();
      }
      onUserSend() {
           var validMontant = true
@@ -93,9 +97,11 @@ export default class HistoryRequester extends Component {
                               message = "Une erreur est survenu lors de l'envoie de la demande"
 
                     }
-                 Alert.alert(title,message,[{text:'Ok',onPress:()=>{       
+                    Alert.alert(title, message, [{
+                         text: 'Ok', onPress: () => {
                               this.setState({ montant: "" })
-                }}])
+                         }
+                    }])
                     setTimeout(() => {
                          this.setState({ isSending: false })
                     }, 800)
@@ -299,10 +305,12 @@ export default class HistoryRequester extends Component {
                                    color="crimson"
                               />
                               <CardButton
-                   onPress={() => {   const {currentNetwork,montant}=this.state
+                                   onPress={() => {
+                                        const { currentNetwork, montant } = this.state
                                         if (currentNetwork !== undefined && currentNetwork.nt === undefined) {
                                              this.onNetworkSend(currentNetwork.phone, currentNetwork.code_membre, montant)
-                   }}}
+                                        }
+                                   }}
                                    title={I18n.t('SEND')}
                                    color="steelblue"
                               />
@@ -419,7 +427,8 @@ export default class HistoryRequester extends Component {
                                                        refBtn.setState({ isDisabled: montant > 0 })
                                                        refBtn.isDisabled = montant > 0
 
-                                        }} catch (e) {
+                                                  }
+                                             } catch (e) {
 
                                              }
                                         }

screens/history-request/MyHistory.js

@@ -660,7 +660,9 @@ class MyHistory extends React.Component {
                return (<ActionButton buttonColor={accent}>
                     <ActionButton.Item buttonColor={primary} title={I18n.t('MAKE_REQUEST')}
                          onPress={() => {
-                              this.props.navigation.navigate(route.credrequester)
+                              this.props.navigation.push(route.credrequester, {
+                                   onGoBack: () => this.refreshData()
+                              })
                          }}
                     >
                          <Icon name="edit" style={styles.actionButtonIcon} />

screens/wallet/WalletDepot.js

@@ -50,7 +50,7 @@ class WalletDepot extends Component {
      constructor(props) {
           super(props);
           this.state = {
-               type: "debit",
+               type: "credit",
                montant: null,
                numCarte: 0,
                cvv: 0,
@@ -59,7 +59,9 @@ class WalletDepot extends Component {
                comptePrincipal: this.props.navigation.state.params.wallet.balance_princ,
                id: this.props.navigation.state.params.wallet.id,
                isModalConfirmVisible: false,
-               isDataSubmit: false
+               isDataSubmit: false,
+               isSubmitClick: false,
+               displayCardError: false
           };
 
           console.log("Wallet Params", this.props.navigation.state.params.wallet);
@@ -73,8 +75,10 @@ class WalletDepot extends Component {
      }
 
      onCreditCardChange = (form) => {
+          console.log(form);
           this.setState({
-               creditCardInput: form
+               creditCardInput: form,
+               displayCardError: false
           });
      }
 
@@ -83,8 +87,6 @@ class WalletDepot extends Component {
                return false;
           else
                return true;
-
-
      }
 
      isMontantValid = () => {
@@ -115,6 +117,25 @@ class WalletDepot extends Component {
                };
      }
 
+     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);
@@ -153,7 +174,7 @@ class WalletDepot extends Component {
                                              numCarte: parseInt((this.state.creditCardInput.values.number).replace(/ /g, ' ')),
                                              cvv: this.state.creditCardInput.values.cvc,
                                              expiration_date: this.state.creditCardInput.values.expiry,
-                                             type: "debit",
+                                             type: "credit",
                                              montant: this.state.montant,
                                              id_wallet: this.state.id
                                         });
@@ -211,6 +232,12 @@ class WalletDepot extends Component {
 
                //this.props.depositAction(this.state);
           }
+          else if (!creditCardInput.valid) {
+               this.setState({
+                    displayCardError: true
+               })
+          }
+          this.setState({ isSubmitClick: true })
      }
 
      isHasError = () => {
@@ -219,9 +246,10 @@ class WalletDepot extends Component {
           if (this.state.isDataSubmit) {
 
                if (error !== null) {
+                    if (typeof error.data !== 'undefined') {
                          Alert.alert(
                               I18n.t("ERROR_LABEL"),
-                         error,
+                              error.data.error,
                               [
                                    {
                                         text: I18n.t("OK"), onPress: () => { }
@@ -230,12 +258,18 @@ class WalletDepot extends Component {
                               ],
                               { cancelable: false }
                          );
-                    return null
+
+                         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);
 
@@ -278,6 +312,12 @@ class WalletDepot extends Component {
                                         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 }}>
@@ -294,8 +334,12 @@ class WalletDepot extends Component {
                                    }}
                               />
                               {
-                                   (!this.isMontantValid().isValid && this.state.montant !== null) &&
+                                   (!this.isMontantValid().isValid) &&
-                                   <Text style={{ color: 'red' }}>{this.isMontantValid().errorMessage}</Text>
+                                   <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>

screens/wallet/WalletDetail.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Animated, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import I18n from 'react-native-i18n'
 import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
@@ -12,7 +12,11 @@ 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 { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
 import getWalletActivated from '../../webservice/WalletApi';
+import getWalletTransactionHistory from '../../webservice/WalletTransactionHistoryApi';
+import transferCommissionAction from '../../webservice/WalletTransferCommission';
+import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
 import { baseUrl } from '../../webservice/IlinkConstants';
 let moment = require('moment-timezone');
 import 'moment/locale/fr'
@@ -40,26 +44,32 @@ class WalletDetail extends Component {
                     { key: 'retrait', title: I18n.t('WITHDRAWAL') }
                ],
                heightHeader: Utils.heightHeader(),
+               isModalConfirmVisible: false,
+               wallet: null,
+               triggerTransferCommission: false
           };
 
           slugify.extend({ '+': 'plus' });
 
           this.scrollY = new Animated.Value(0);
           this.deltaY = new Animated.Value(0);
+          this.bgBannerY = new Animated.Value(0);
 
           this.heightImageBanner = Utils.scaleWithPixel(250, 1);
           this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
 
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
 
-          /*           if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
+          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
                let agentId = this.props.navigation.state.params.agentId;
-                         console.log("AGENT id", agentId);
                this.props.getWalletActivated(agentId);
-                    } */
+          }
-
+          else {
+               this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
+               this.state.wallet = this.props.navigation.state.params.wallet;
           }
 
+     }
 
 
      static options(passProps) {
@@ -102,6 +112,30 @@ class WalletDetail extends Component {
           }
      };
 
+     componentDidMount() {
+          const { result } = this.props;
+
+          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
+
+               if (result !== null) {
+                    const wallet = Array.isArray(result) ? result[0] : result;
+                    this.props.getWalletTransactionHistory(wallet.id);
+                    this.setState({
+                         wallet
+                    })
+               }
+          }
+     }
+
+     shouldComponentUpdate(nextProps, nextState) {
+          if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
+               return false;
+          } else {
+               return true;
+          }
+     }
+
+
      isEmptyObject = (obj) => {
           for (let prop in obj) {
                if (obj.hasOwnProperty(prop)) {
@@ -121,12 +155,12 @@ class WalletDetail extends Component {
           let re = moment.tz(date, 'Etc/GMT+0').format();
           return moment(re).fromNow();
      }
+
      updateLangue() {
           this.props.navigation.setParams({ name: I18n.t('WALLET') })
           this.forceUpdate()
      }
 
-
      handleIndexChange = index => this.setState({ index });
 
      imageScale = () => {
@@ -145,6 +179,23 @@ class WalletDetail extends Component {
           });
      }
 
+     bgBannerY = () => {
+          return this.scrollY.interpolate({
+               inputRange: [0, 100],
+               outputRange: [150, 0],
+               extrapolate: 'clamp',
+          });
+     }
+
+
+     refresh = () => {
+          const { agentId, wallet } = this.props.navigation.state.params;
+          if (typeof agentId !== "undefined") {
+               this.props.getWalletActivated(wallet.agentId);
+          }
+          else
+               this.props.getWalletActivated(agentId);
+     }
 
      renderTabBar = props => (
           <TabBar
@@ -188,6 +239,7 @@ class WalletDetail extends Component {
                     zIndex: 11,
                     shadowColor: Color.borderColor,
                     borderColor: Color.borderColor,
+
                }
           ]}>
                <View style={[styles.contentLeftItem]}>
@@ -224,7 +276,10 @@ class WalletDetail extends Component {
                          justifyContent: 'flex-end'
                     }}>
                          <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
-                         <Tag primary style={styles.tagFollow}>
+                         <Tag primary style={styles.tagFollow}
+                              onPress={() => {
+                                   this.renderDialogConfirmTransferCommission()
+                              }}>
                               {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
                          </Tag>
                     </View>
@@ -315,7 +370,16 @@ class WalletDetail extends Component {
           return (
 
                !this.isEmptyObject(wallet) ?
-                    (<View
+                    (<>
+                         {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
+                         {this.props.loading ?
+                              <View
+                                   style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.props.loading ? responsiveWidth(100) : 0, height: this.props.loading ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                   <Text style={{ fontSize: 20, color: 'white', fontWeight: 'bold' }}>{I18n.t("LOADING_DOTS")}</Text>
+                              </View> : null
+                         }
+
+                         <View
                               style={styles.container}>
 
                               <Animated.View style={{
@@ -361,7 +425,10 @@ class WalletDetail extends Component {
                                                   <View style={[styles.containerTouch]}>
 
                                                        <TouchableOpacity style={styles.contain}
-                                                       onPress={() => this.props.navigation.push(route.walletDepot, { wallet })}
+                                                            onPress={() => this.props.navigation.push(route.walletDepot, {
+                                                                 wallet,
+                                                                 onGoBack: () => this.refresh(),
+                                                            })}
                                                             activeOpacity={0.9}>
 
                                                             <Icon name='arrow-bottom-right'
@@ -378,7 +445,7 @@ class WalletDetail extends Component {
                                                                  </View>
 
                                                                  <View style={{ flex: 1 }}>
-                                                                 <Text style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                            {I18n.t('DEPOSIT_DESCRIPTION')}
                                                                       </Text>
                                                                  </View>
@@ -389,7 +456,10 @@ class WalletDetail extends Component {
 
                                                   <View style={styles.containerTouch}>
                                                        <TouchableOpacity style={styles.contain}
-                                                       onPress={() => console.log('click')}
+                                                            onPress={() => this.props.navigation.push(route.walletRetrait, {
+                                                                 wallet,
+                                                                 onGoBack: () => this.refresh(),
+                                                            })}
                                                             activeOpacity={0.9}>
                                                             <Icon name='arrow-top-left'
                                                                  color={Color.primaryColor}
@@ -405,7 +475,7 @@ class WalletDetail extends Component {
                                                                  </View>
 
                                                                  <View style={{ flex: 1 }}>
-                                                                 <Text style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                            {I18n.t('WITHDRAWAL_DESCRIPTION')}
                                                                       </Text>
                                                                  </View>
@@ -415,11 +485,13 @@ class WalletDetail extends Component {
                                                   </View>
                                              </View>
 
+                                             {this.renderHistoryTransaction()}
                                         </View>
                                    </View>
 
                               </ScrollView>
-                    </View>)
+                         </View>
+                    </>)
                     :
                     (
                          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
@@ -429,6 +501,196 @@ class WalletDetail extends Component {
           )
      }
 
+     renderHistoryTransactionItem = (item) => {
+          let re = moment.tz(item.date, 'Etc/GMT+0').format();
+          let date = moment(re).fromNow();
+
+          return (
+               <View
+                    key={item.id}
+                    style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                         <View style={styles.iconContent}>
+                              <Icon name={item.type === 'credit' ? 'arrow-top-left' : 'arrow-bottom-right'}
+                                   color={Color.primaryColor} size={20} />
+                         </View>
+                         <View>
+                              {item.type === 'credit' ? (
+                                   <Text style={Typography.body1}>{I18n.t('WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
+                              ) :
+                                   (
+                                        <Text style={Typography.body1}>{I18n.t('DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
+                                   )
+                              }
+                              <Text style={[Typography.footnote, Color.grayColor]} style={{ marginTop: 5 }}>
+                                   {date}
+                              </Text>
+                         </View>
+                    </View>
+               </View>
+          );
+     }
+
+     renderHistoryTransactionList = () => {
+
+          const { resultTransaction, errorTransaction } = this.props;
+          if (errorTransaction !== null) {
+               if (typeof errorTransaction.data !== 'undefined') {
+                    return (
+                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                              <Text style={Typography.body1}>{errorTransaction.data.error}</Text>
+                         </View>
+                    )
+               }
+               else {
+                    return (
+                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                              <Text style={Typography.body1}>{errorTransaction}</Text>
+                         </View>
+                    )
+               }
+          }
+          if (resultTransaction !== null) {
+               if (resultTransaction.response !== null) {
+                    return (
+                         Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
+                              (
+                                   resultTransaction.response.map((item, ) => (
+                                        this.renderHistoryTransactionItem(item)
+                                   ))
+                              ) :
+                              (
+                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
+                                   </View>
+                              )
+                    )
+               }
+          }
+
+     }
+
+
+     renderHistoryTransaction = () => {
+
+          return (
+               <>
+                    <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
+                         <Text
+                              style={[Typography.title3, Typography.semibold]}>
+                              {I18n.t('TRANSACTION_HISTORY')}
+                         </Text>
+                    </View>
+
+                    <ScrollView style={styles.transactionContainer}>
+                         {
+                              this.props.loadingTransaction ?
+                                   (
+                                        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                             {Platform.OS === 'android'
+                                                  ?
+                                                  (
+                                                       <>
+                                                            <ProgressBarAndroid />
+                                                            <Text>{I18n.t('LOADING_DOTS')}</Text>
+
+                                                       </>
+                                                  ) :
+                                                  <>
+                                                       <ActivityIndicator size="large" color={'#ccc'} />
+                                                       <Text>{I18n.t('LOADING_DOTS')}</Text>
+                                                  </>
+                                             }
+                                        </View>
+                                   ) : this.renderHistoryTransactionList()
+                         }
+                    </ScrollView>
+               </>
+          )
+     }
+
+     renderDialogConfirmTransferCommission = () => {
+          Alert.alert(
+               I18n.t("CONFIRM"),
+               I18n.t('CONFIRM_TRANSFER_COMMISSION')
+               ,
+               [
+                    {
+                         text: I18n.t("NO"), onPress: () => {
+
+                         }
+                    },
+                    {
+                         text: I18n.t("YES"), onPress: () => {
+                              this.props.transferCommissionAction(this.state.wallet.id);
+                              this.refresh();
+                              this.setState({
+                                   triggerTransferCommission: !this.state.triggerTransferCommission
+                              });
+                         }
+                    }
+
+               ],
+               { cancelable: false }
+          )
+     }
+
+
+     renderDialogTransferCommissionResponse = () => {
+          const { resultTransferCommission, errorTransferCommission } = this.props;
+          if (errorTransferCommission !== null) {
+               if (typeof errorTransferCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorTransferCommission.data.error
+                         ,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+               else {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorTransferCommission
+                         ,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultTransferCommission !== null) {
+               if (resultTransferCommission.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS"),
+                         resultTransferCommission.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
 
      render() {
           console.log('Wallet Detail props', this.props);
@@ -438,7 +700,7 @@ class WalletDetail extends Component {
                !isHomeRootView ?
                     this.renderDetailWallet(this.props.navigation.state.params.wallet)
                     :
-                    (this.props.loading ?
+                    ((this.props.loading || this.props.loadingTransferCommission) ?
                          this.renderLoader() :
                          (
                               this.props.result !== null &&
@@ -453,11 +715,21 @@ class WalletDetail extends Component {
 const mapStateToProps = state => ({
      loading: state.walletReducer.loading,
      result: state.walletReducer.result,
-     error: state.walletReducer.error
+     error: state.walletReducer.error,
+
+     loadingTransaction: state.walletHistoryReducer.loadingTransaction,
+     resultTransaction: state.walletHistoryReducer.resultTransaction,
+     errorTransaction: state.walletHistoryReducer.errorTransaction,
+
+     loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
+     resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
+     errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
-     getWalletActivated
+     getWalletActivated,
+     getWalletTransactionHistory,
+     transferCommissionAction
 }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
@@ -491,6 +763,20 @@ const styles = StyleSheet.create({
           height: 140,
           borderRadius: 10
      },
+     paymentItem: {
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "space-between",
+          borderBottomWidth: 1,
+          paddingVertical: 5,
+          width: responsiveWidth(100),
+          marginBottom: 15
+     },
+     iconContent: {
+          width: 60,
+          marginRight: 10,
+          alignItems: "center"
+     },
      contentLeftItem: {
           flex: 1,
           paddingTop: 40,
@@ -511,8 +797,8 @@ const styles = StyleSheet.create({
           justifyContent: "space-between",
           alignItems: "center",
           borderBottomWidth: 1,
-          paddingVertical: 15,
+          paddingVertical: 10,
-          marginTop: 10
+          marginTop: 5
      },
      blockView: {
           paddingVertical: 10,
@@ -528,7 +814,7 @@ const styles = StyleSheet.create({
      },
      transactionContainer: {
           flexDirection: 'row',
-          paddingTop: 20,
+          paddingTop: 10,
      },
      containerTouch: {
           flex: 1,
@@ -555,7 +841,7 @@ const styles = StyleSheet.create({
           height: Utils.scaleWithPixel(30)
      },
      content: {
-          height: Utils.scaleWithPixel(50),
+          height: Utils.scaleWithPixel(60),
           paddingHorizontal: 10,
           justifyContent: 'space-between',
           alignItems: 'flex-start',

screens/wallet/WalletRetrait.js

@@ -1,19 +1,20 @@
 import React, { Component } from 'react';
-import { Animated, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
+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 { TabView, TabBar, SceneMap } from 'react-native-tab-view';
+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 getWalletActivated from '../../webservice/WalletApi';
+import depositAction from '../../webservice/DepositApi';
-import { baseUrl } from '../../webservice/IlinkConstants';
+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'
@@ -24,16 +25,47 @@ 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 WalletRetrait extends Component {
 
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.accentLightColor,
+          statusBarColor: Color.accentColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF',
+     };
+     static navigationOptions = ({ navigation }) => {
+          return {
+               drawerLabel: () => null,
+               title: I18n.t('MAKE_WITHDRAWAL')
+          }
+     };
+
      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,
+               isSubmitClick: false,
+               displayCardError: false
           };
 
+          console.log("Wallet Params", this.props.navigation.state.params.wallet);
+
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
      }
 
@@ -42,41 +74,296 @@ class WalletRetrait extends Component {
           this.forceUpdate()
      }
 
-     render() {
+     onCreditCardChange = (form) => {
-          return (
+          console.log(form);
-               <ScrollView style={[styles.container, { padding: 20 }]}>
+          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, tauxComClientRetrait) => {
+          let tauxComClientDepotTemp = ((amount * tauxComClientRetrait) / 100);
+          return Math.round(tauxComClientDepotTemp + tauxComClientDepotTemp);
+     }
+
+     modalConfirmTransaction = () => {
+          const { taux_com_client_retrait } = 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 }}>
-                         <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
+                                        <Text style={[style.body2]}>{I18n.t('AMOUNT')}</Text>
-                              <Text style={Typography.body2}>
+                                   </View>
-                                   {I18n.t('ENTER_YOUR_CARD_ID')}
+                                   <View style={{ flex: 1, alignItems: 'flex-end' }}>
-                              </Text>
+                                        <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_retrait)}</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_retrait)}</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
-                         <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 }}>
-                         <CustomButton outline onPress={() => { console.log('click') }}>
+                              <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.walletReducer.loading,
+     loading: state.depositReducer.loading,
-     result: state.walletReducer.result,
+     result: state.depositReducer.result,
-     error: state.walletReducer.error
+     error: state.depositReducer.error
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
+     depositAction: depositAction
 }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(WalletRetrait);
@@ -94,4 +381,20 @@ const styles = StyleSheet.create({
           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
+     },
 });

screens/wallet/WalletSelect.js

@@ -24,7 +24,8 @@ class WalletSelect extends Component {
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
           this.state = {
                result: null,
-               isDataLoaded: false
+               isDataLoaded: false,
+               agentId: null
           }
      }
 
@@ -49,8 +50,10 @@ class WalletSelect extends Component {
           readUser().then((user) => {
                if (user) {
                     if (user !== undefined) {
-                         if (user.phone !== undefined)
+                         if (user.phone !== undefined) {
                               this.props.getWalletActivated(user.agentId);
+                              this.setState({ agentId: user.agentId });
+                         }
                     }
                }
           });
@@ -85,12 +88,14 @@ class WalletSelect extends Component {
 
      renderWalletItem = (item) => {
           let icon = `${baseUrl}/datas/img/network/${slugify(item.network, { lower: true })}-logo.png`;
+          let itemToSend = item;
+          itemToSend.agentId = this.state.agentId;
           return (
 
                <TouchableOpacity
                     key={item.id}
                     style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
-                    onPress={() => this.props.navigation.navigate('walletDetail', { wallet: item })}>
+                    onPress={() => this.props.navigation.navigate('walletDetail', { wallet: itemToSend })}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                          <View style={styles.iconContent}>
                               <Image style={{ width: 48, height: 48 }} source={{ uri: icon }} />

utils/i18n/en.json

@@ -44,10 +44,18 @@
     "CARD_NUMBER_LABEL": "Card number",
     "CARD_EXPIRY_LABEL": "Expiry.",
     "CARD_CVC_LABEL": "CVC/CCV",
+    "CVC_CARD_ERROR": "CVC card error format",
+    "THIS_FIELD_IS_REQUIRED": "This field is required",
+    "PLEASE_ENTER_THE_AMOUNT": "Please enter the amount",
+    "EXPIRY_CARD_ERROR": "Date incorrect",
+    "CARD_NUMBER_ERROR": "Card number incorrect",
     "AMOUNT_LABEL": "Montant",
     "WITHDRAWAL": "Withdrawal",
+    "DEMAND_SEND": "Demand send",
     "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
     "COMMISSION_ACCOUNT_TITLE": "Commission account",
+    "CONFIRM": "Confirm",
+    "CONFIRM_TRANSFER_COMMISSION": "Confirm commission transfer",
     "CREATION_DATE": "Creation date",
     "PRINCIPAL_ACCOUNT_TITLE": "Principal account",
     "NO_WALLET_ACTIVED": "PNo wallet is activated for your account",
@@ -56,6 +64,10 @@
     "ENTER_YOUR_CARD_ID": "Please enter your bank card ID",
     "SELECT_YOUR_WALLET": "Selec your wallet",
     "TRANSACTIONS": "Transactions",
+    "TRANSACTION_HISTORY": "Transactions history",
+    "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Deposit of",
+    "NO_WALLET_HISTORY": "No transaction",
+    "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Withdrawal of",
     "THE_ACCOUNT": "Account ",
     "NO_GEO_POINT_CODE": "You have no free geolocated point",
     "NO_DEMAND_ADHESION": "You have no membership request",

utils/i18n/fr.json

@@ -43,16 +43,28 @@
     "ENTER_AMOUNT_SUPERIOR_ZEROR": "Entrer un montant supérieur à zero",
     "AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT": "Montant supérieur à celui du compte principal de l'agent",
     "MAKE_DEPOSIT": "Effectuer un dépôt",
-    "MAKE_WITHDRAWAL": "Effectuer un dépôt",
+    "MAKE_WITHDRAWAL": "Effectuer un retrait",
     "CARD_NUMBER_LABEL": "Numéro de la carte",
     "CARD_EXPIRY_LABEL": "Date. exp.",
     "CARD_CVC_LABEL": "CVC/CCV",
+    "CVC_CARD_ERROR": "Code CVC est erroné",
+    "EXPIRY_CARD_ERROR": "Date est incorrect",
+    "CARD_NUMBER_ERROR": "Numéro de carte incorrect",
+    "THIS_FIELD_IS_REQUIRED": "Ce champ est requis",
+    "PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
     "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
     "WITHDRAWAL": "Retrait",
     "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
     "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
+    "CONFIRM": "Confirmer",
+    "CONFIRM_TRANSFER_COMMISSION": "Confirmer le transfert des commissions",
     "PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
     "TRANSACTIONS": "Transactions",
+    "TRANSACTION_HISTORY": "Historique des transactions",
+    "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Retrait de",
+    "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Dépôt de",
+    "NO_WALLET_HISTORY": "Aucune transaction à ce jour",
+    "DEMAND_SEND": "Demande envoyé",
     "NO_WALLET_ACTIVED": "Aucun wallet n'est activé pour votre compte",
     "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer les commissions",
     "PRINCIPAL": "Principal",

webservice/IlinkConstants.js

@@ -2,7 +2,9 @@ export const isDebugMode = false
 //base url test
 //const baseUrl = "https://ilink-app.com/mobilebackendbeta"
 //base url production
-export const baseUrl = "https://ilink-app.com/mobilebackend";
+//export const baseUrl = "https://ilink-app.com/mobilebackend";
+//export const baseUrl = "https://test.ilink-app.com/mobilebackendtest";
+export const baseUrl = "http://test.ilink-app.com:8080/mobilebackendtest";
 export const testBaseUrl = "https://test.ilink-app.com";
 //base url agent
 //const baseUrl = "https://ilink-app.com/mobilebackendtest2"
@@ -18,6 +20,7 @@ export const demandeActionUrl = baseUrl + '/interacted/DemandeAction.php';
 export const configActionUrl = baseUrl + '/interacted/ConfigAction.php';
 export const walletActionUrl = testBaseUrl + '/walletService/wallets';
 export const transactionUrl = testBaseUrl + '/walletService/transactions';
+export const transferCommission = testBaseUrl + '/walletService/virement';
 export const authKeyUrl = testBaseUrl + '/oauth/token';
 export const videoUrl = "https://www.youtube.com/watch?v=wwGPDPsSLWY";
 export const MARKER_URL = baseUrl + "/interacted/LocationAction.php";

webservice/WalletTransactionHistoryApi.js

@@ -0,0 +1,39 @@
+
+import { transactionUrl } from "./IlinkConstants";
+import { store } from "../redux/store";
+import axios from "axios";
+import { fetchWalletHistoryPending, fetchWalletHistorySuccess, fetchWalletHistoryError } from "../redux/actions/WalletActions";
+
+const getWalletTransactionHistory = (walletID) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchWalletHistoryPending());
+
+          axios({
+               url: `${transactionUrl}/${walletID}`,
+               method: 'GET',
+               headers: {
+                    'Authorization': authKey
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchWalletHistorySuccess(response));
+               })
+               .catch(error => {
+                    console.log(error);
+                    dispatch(fetchWalletHistoryError(error.message));
+                    if (error.response)
+                         dispatch(fetchWalletHistoryError(error.response));
+                    else if (error.request)
+                         dispatch(fetchWalletHistoryError(error.request))
+                    else
+                         dispatch(fetchWalletHistoryError(error.message))
+               });
+     }
+}
+
+export default getWalletTransactionHistory;

webservice/WalletTransferCommission.js

@@ -0,0 +1,39 @@
+
+import { transferCommission } from "./IlinkConstants";
+import { store } from "../redux/store";
+import axios from "axios";
+import { fetchWalletTransferCommissionPending, fetchWalletTransferCommissionSuccess, fetchWalletTransferCommssionError } from "../redux/actions/WalletActions";
+
+const transferCommissionAction = (walletID) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchWalletTransferCommissionPending());
+
+          axios({
+               url: `${transferCommission}/${walletID}`,
+               method: 'PUT',
+               headers: {
+                    'Authorization': authKey
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchWalletTransferCommissionSuccess(response));
+               })
+               .catch(error => {
+                    console.log(error);
+                    dispatch(fetchWalletTransferCommssionError(error.message));
+                    if (error.response)
+                         dispatch(fetchWalletTransferCommssionError(error.response));
+                    else if (error.request)
+                         dispatch(fetchWalletTransferCommssionError(error.request))
+                    else
+                         dispatch(fetchWalletTransferCommssionError(error.message))
+               });
+     }
+}
+
+export default transferCommissionAction;