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

@@ -6,127 +6,133 @@
  * @flow
  */
 
-import React, {Component} from 'react';
+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';
+import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
 import CardView from 'react-native-cardview';
-import {Sae} from 'react-native-textinput-effects';
+import { Sae } from 'react-native-textinput-effects';
 import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import Button from 'apsl-react-native-button';
-import {primary,primaryDark,accent} from '../../utils/theme.json';
+import { primary, primaryDark, accent } from '../../utils/theme.json';
 import * as Animatable from 'react-native-animatable';
 import { isNumber } from 'util';
-import {readUser} from './../../webservice/AuthApi'
+import { readUser } from './../../webservice/AuthApi'
-import {sendDemande} from './../../webservice/HistoryRequestApi'
+import { sendDemande } from './../../webservice/HistoryRequestApi'
-import {sendDemandeSpecificque} from "../../webservice/HistoryRequestApi";
+import { sendDemandeSpecificque } from "../../webservice/HistoryRequestApi";
-import {getAgentNetworksList} from "../../webservice/NetworkApi";
+import { getAgentNetworksList } from "../../webservice/NetworkApi";
-import {HelperText,TextInput,TextInputMask} from 'react-native-paper'
+import { HelperText, TextInput, TextInputMask } from 'react-native-paper'
 import I18n from "react-native-i18n"
 type Props = {}
-const route=require('../../route.json')
+const route = require('../../route.json')
-import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage,Title } from 'react-native-material-cards'
+import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage, Title } from 'react-native-material-cards'
 export default class HistoryRequester extends Component {
      static navigatorStyle = {
-    navBarHidden:true,
+          navBarHidden: true,
      };
      static navigationOptions = {
           drawerLabel: () => null,
-        headerTitle:I18n.t('ASK_CREDIT'),
+          headerTitle: I18n.t('ASK_CREDIT'),
-        title:I18n.t('ASK_CREDIT')
+          title: I18n.t('ASK_CREDIT')
      };
-  constructor(props){
+     constructor(props) {
           super(props);
-      this.state=this.initState();
+          this.state = this.initState();
           this.updateState()
      }
-  handleViewRef=ref=>this.numberView=ref;
+     handleViewRef = ref => this.numberView = ref;
-  handleMontantRef=ref=>this.montantView=ref;
+     handleMontantRef = ref => this.montantView = ref;
-    initState(){
+     initState() {
           return {
-        phone:null,
+               phone: null,
-        montant:undefined,
+               montant: undefined,
-        isSending:false,
+               isSending: false,
-        isDisabled:true,
+               isDisabled: true,
-           networks:[],
+               networks: [],
-           user:null,
+               user: null,
-           visibleError:false,
+               visibleError: false,
-     currentNetwork:{nt:1},
+               currentNetwork: { nt: 1 },
-        errorAnimation:"",
+               errorAnimation: "",
           }
      }
 
-    onUserCancel(){
+     onUserCancel() {
-        this.props.navigation.goBack()
+          console.log(this.props);
+          this.props.navigation.state.params.onGoBack();
+          this.props.navigation.goBack();
      }
-    onUserSend(){
+     onUserSend() {
-        var validMontant=true
+          var validMontant = true
-        if( !isNumber(this.state.montant)||this.state.montant>1000000){
+          if (!isNumber(this.state.montant) || this.state.montant > 1000000) {
-          validMontant=false
+               validMontant = false
           }
-        this.setState({visibleError:!validMontant})
+          this.setState({ visibleError: !validMontant })
-         if(!validMontant){
+          if (!validMontant) {
                this.montantView.shake(800)
-             setTimeout(()=>{
+               setTimeout(() => {
-                 this.setState({visibleError:false})
+                    this.setState({ visibleError: false })
-         },3000)
+               }, 3000)
           }
           else {
-          this.setState({isSending:true})
+               this.setState({ isSending: true })
-             let title=""
+               let title = ""
-             let message=""
+               let message = ""
-             sendDemandeSpecificque(this.state.montant,this.state.user.phoneTransaction,this.state.user.code_membre).then((data)=> {
+               sendDemandeSpecificque(this.state.montant, this.state.user.phoneTransaction, this.state.user.code_membre).then((data) => {
                     if (data.success !== undefined) {
                          if (data.success === 1) {
-                         title= I18n.t('DEMAND_SEND'),
+                              title = I18n.t('DEMAND_SEND'),
-                             message=I18n.t('DEMAND_SEND_SUCCESFUL')
+                                   message = I18n.t('DEMAND_SEND_SUCCESFUL')
                          } else {
-                         title= "Erreur survenu lors de l'envoie ",
+                              title = "Erreur survenu lors de l'envoie ",
-                             message="Une erreur est survenu lors de l'envoie de la demande"
+                                   message = "Une erreur est survenu lors de l'envoie de la demande"
                          }
 
-                 }else {
+                    } else {
-                     title= "Erreur survenu lors de l'envoie ",
+                         title = "Erreur survenu lors de l'envoie ",
-                         message="Une erreur est survenu lors de l'envoie de la demande"
+                              message = "Une erreur est survenu lors de l'envoie de la demande"
 
                     }
-                 Alert.alert(title,message,[{text:'Ok',onPress:()=>{       
+                    Alert.alert(title, message, [{
-                                       this.setState({montant: ""})
+                         text: 'Ok', onPress: () => {
-                }}])
+                              this.setState({ montant: "" })
+                         }
+                    }])
                     setTimeout(() => {
-                         this.setState({isSending: false})
+                         this.setState({ isSending: false })
                     }, 800)
 
-             }).catch((error)=>{
+               }).catch((error) => {
-                 title= "Erreur survenu lors de l'envoie ",
+                    title = "Erreur survenu lors de l'envoie ",
-                     message="Une erreur est survenu lors de l'envoie de la demande"
+                         message = "Une erreur est survenu lors de l'envoie de la demande"
-             Alert.alert(title,message,[{text:'Ok'}])
+                    Alert.alert(title, message, [{ text: 'Ok' }])
 
                })
           }
      }
-    render () {
+     render() {
-        const {user}=this.state
+          const { user } = this.state
           return (
-            <View style={{flex:1,alignItems:'center',backgroundColor:"lightgrey",paddingTop:responsiveHeight(10)}}>
+               <View style={{ flex: 1, alignItems: 'center', backgroundColor: "lightgrey", paddingTop: responsiveHeight(10) }}>
                     <StatusBar
                          translucent={false}
                     />
-                {user?((user.category === "geolocated")?
+                    {user ? ((user.category === "geolocated") ?
-               this.multiNetwork(): this.simpleAgent()):
+                         this.multiNetwork() : this.simpleAgent()) :
-      <ProgressBarAndroid/>
+                         <ProgressBarAndroid />
                     }
                </View>
           )
      }
-    simpleAgent(){
+     simpleAgent() {
-        let montant=0
+          let montant = 0
-        if(true){
+          if (true) {
- return (<View style={{height:200}}>
+               return (<View style={{ height: 200 }}>
-            <Card style={{width:responsiveWidth(96),paddingTop:20}}>
+                    <Card style={{ width: responsiveWidth(96), paddingTop: 20 }}>
                          <CardContent>
                               <View>
                                    <Animatable.View
@@ -136,17 +142,17 @@ export default class HistoryRequester extends Component {
                                              label={I18n.t('AMOUNT')}
                                              keyboardType={"numeric"}
                                              style={input.selfitem}
-                            ref={(ref)=> {
+                                             ref={(ref) => {
                                                   this.refInp = ref
                                              }}
 
                                              mode={"outlined"}
                                              inputStyle={input.style}
                                              onChangeText={(text) => {
-                                try{
+                                                  try {
-                                    let neb=parseInt(text)
+                                                       let neb = parseInt(text)
-                                     this.setState({montant:neb,isDisabled:isNaN(neb)})
+                                                       this.setState({ montant: neb, isDisabled: isNaN(neb) })
-                                }catch (e) {
+                                                  } catch (e) {
 
                                                   }
                                              }}
@@ -165,12 +171,12 @@ export default class HistoryRequester extends Component {
                               separator={true}
                               inColumn={false}>
                               <CardButton
-        onPress={() => {this.onUserCancel()}}
+                                   onPress={() => { this.onUserCancel() }}
                                    title={I18n.t('CANCEL')}
                                    color="crimson"
                               />
                               <CardButton
-        onPress={() => {this.onUserSend()}}
+                                   onPress={() => { this.onUserSend() }}
                                    title={I18n.t('SEND')}
                                    color="steelblue"
 
@@ -178,8 +184,8 @@ export default class HistoryRequester extends Component {
                          </CardAction>
                     </Card>
                </View>)
-        }else
+          } else
-        return (          <View style={styles.container}>
+               return (<View style={styles.container}>
                     <CardView style={styles.cardInput}>
                          <View>
                               <Text style={styles.title}>Demande de credit</Text>
@@ -194,14 +200,14 @@ export default class HistoryRequester extends Component {
                                         inputStyle={input.style}
                                         keyboardType={"numeric"}
                                         value={this.state.montant}
-                                ref={(ref)=> {
+                                        ref={(ref) => {
                                              this.refInp = ref
                                         }}
                                         onChangeText={(text) => {
-                                    if(text.length>0) {
+                                             if (text.length > 0) {
                                                   try {
                                                        montant = parseFloat(text);
-                                                this.setState({isDisabled:montant>0,montant:montant})
+                                                       this.setState({ isDisabled: montant > 0, montant: montant })
 
                                                   } catch (e) {
 
@@ -217,12 +223,12 @@ export default class HistoryRequester extends Component {
 
                          </View>
                          <View style={styles.btnContainer}>
-                        <Button style={styles.button_1} textStyle={styles.button_1_text} onPress={()=>this.onUserCancel()}>
+                              <Button style={styles.button_1} textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
                                    {I18n.t('CANCEL')}
                               </Button>
                               <Button isLoading={this.state.isSending} isDisabled={!this.state.isDisabled} style={styles.button_2}
-                                ref={(r)=>{this.refBtn=r}}
+                                   ref={(r) => { this.refBtn = r }}
-                                textStyle={styles.button_2_text} onPress={()=>{
+                                   textStyle={styles.button_2_text} onPress={() => {
                                         this.onUserSend()
                                    }}>
                                    {I18n.t('SEND')}
@@ -236,24 +242,24 @@ export default class HistoryRequester extends Component {
      }
 
      multiNetwork() {
-        if(true){
+          if (true) {
-            return (<View style={{height:250,justifyContent:'center'}}>
+               return (<View style={{ height: 250, justifyContent: 'center' }}>
 
-                <Card style={{width:responsiveWidth(96),justifyContent:'center'}}>
+                    <Card style={{ width: responsiveWidth(96), justifyContent: 'center' }}>
                          <CardContent>
-               <View style={{flex:1}}>
+                              <View style={{ flex: 1 }}>
-                   <View style={{flexDirection:'row'}}>
+                                   <View style={{ flexDirection: 'row' }}>
                                         <Picker
 
                                              selectedValue={this.state.currentNetwork}
                                              prompt={I18n.t("SELECT_NETWORK")}
-                        style={{height: 50,flex:1,marginLeft:20}}
+                                             style={{ height: 50, flex: 1, marginLeft: 20 }}
                                              itemStyle={styles.subtitle}
                                              onValueChange={(itemValue, itemIndex) =>
-                            this.setState({currentNetwork: itemValue})
+                                                  this.setState({ currentNetwork: itemValue })
                                              }>
-                        {this.state.networks.map((item,index)=>{
+                                             {this.state.networks.map((item, index) => {
-                            return(<Picker.Item label={item.nt?I18n.t("SELECT_NETWORK"):I18n.t("FOR_NUMB")+item.phone +" ("+item.name+")"} value={item} />)
+                                                  return (<Picker.Item label={item.nt ? I18n.t("SELECT_NETWORK") : I18n.t("FOR_NUMB") + item.phone + " (" + item.name + ")"} value={item} />)
                                              })}
 
                                         </Picker>
@@ -266,17 +272,17 @@ export default class HistoryRequester extends Component {
                                              label={I18n.t('AMOUNT')}
                                              keyboardType={"numeric"}
                                              style={input.selfitem}
-                            ref={(ref)=> {
+                                             ref={(ref) => {
                                                   this.refInp = ref
                                              }}
 
                                              mode={"outlined"}
                                              inputStyle={input.style}
                                              onChangeText={(text) => {
-                                try{
+                                                  try {
-                                    let neb=parseInt(text)
+                                                       let neb = parseInt(text)
-                                     this.setState({montant:neb,isDisabled:isNaN(neb)})
+                                                       this.setState({ montant: neb, isDisabled: isNaN(neb) })
-                                }catch (e) {
+                                                  } catch (e) {
 
                                                   }
                                              }}
@@ -294,15 +300,17 @@ export default class HistoryRequester extends Component {
                               separator={true}
                               inColumn={false}>
                               <CardButton
-                   onPress={() => {this.onUserCancel()}}
+                                   onPress={() => { this.onUserCancel() }}
                                    title={I18n.t('CANCEL')}
                                    color="crimson"
                               />
                               <CardButton
-                   onPress={() => {   const {currentNetwork,montant}=this.state
+                                   onPress={() => {
-                   if(currentNetwork!==undefined && currentNetwork.nt===undefined) {
+                                        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"
                               />
@@ -319,13 +327,13 @@ export default class HistoryRequester extends Component {
                                    <Picker
                                         selectedValue={this.state.currentNetwork}
                                         prompt={"Selectionner un reseau"}
-                        style={{height: 50, width: responsiveWidth(100)}}
+                                        style={{ height: 50, width: responsiveWidth(100) }}
                                         itemStyle={styles.subtitle}
                                         onValueChange={(itemValue, itemIndex) =>
-                            this.setState({currentNetwork: itemValue})
+                                             this.setState({ currentNetwork: itemValue })
                                         }>
-                        {this.state.networks.map((item,index)=>{
+                                        {this.state.networks.map((item, index) => {
-                            return(<Picker.Item label={item.nt?"Selectionner un reseau":"Pour le "+item.phone +" ("+item.name+")"} value={item} />)
+                                             return (<Picker.Item label={item.nt ? "Selectionner un reseau" : "Pour le " + item.phone + " (" + item.name + ")"} value={item} />)
                                         })}
 
                                    </Picker>
@@ -337,16 +345,16 @@ export default class HistoryRequester extends Component {
                                              iconClass={FontAwesomeIcon}
                                              iconName={'dollar'}
                                              iconColor={primary}
-                            ref={(ref)=> {
+                                             ref={(ref) => {
                                                   this.refInp = ref
                                              }}
                                              inputStyle={input.style}
                                              keyboardType={"numeric"}
                                              onChangeText={(text) => {
-                                try{
+                                                  try {
-                                    let neb=parseInt(text)
+                                                       let neb = parseInt(text)
-                                    this.setState({montant:neb,isDisabled:isNaN(neb)})
+                                                       this.setState({ montant: neb, isDisabled: isNaN(neb) })
-                                }catch (e) {
+                                                  } catch (e) {
 
                                                   }
                                              }}
@@ -360,19 +368,19 @@ export default class HistoryRequester extends Component {
                               </View>
                               <View style={styles.btnContainer}>
                                    <Button style={styles.button_1}
-                            textStyle={styles.button_1_text} onPress={()=>this.onUserCancel()}>
+                                        textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
                                         {I18n.t('CANCEL')}
                                    </Button>
                                    <Button
-                        ref={ref=>{
+                                        ref={ref => {
-                            this.refBtn=ref
+                                             this.refBtn = ref
                                         }}
                                         isDisabled={this.state.isDisabled}
                                         style={styles.button_2}
                                         textStyle={styles.button_2_text}
-                        onPress={()=>{
+                                        onPress={() => {
-                            const {currentNetwork,montant}=this.state
+                                             const { currentNetwork, montant } = this.state
-                            if(currentNetwork!==undefined && currentNetwork.nt===undefined) {
+                                             if (currentNetwork !== undefined && currentNetwork.nt === undefined) {
                                                   this.onNetworkSend(currentNetwork.phone, currentNetwork.code_membre, montant, this.refInp, this.refBtn)
                                              }
                                         }}>
@@ -385,11 +393,11 @@ export default class HistoryRequester extends Component {
      }
 
      renderSingleNetwork(item) {
-        const itm=item.item
+          const itm = item.item
           console.log(item)
-        let refInp=null,refBtn=null
+          let refInp = null, refBtn = null
-        let montant=0
+          let montant = 0
-        return (          <View style={styles.container2}>
+          return (<View style={styles.container2}>
                <CardView style={styles.cardInput2}>
                     <View>
                          <Text style={styles.title}>{I18n.t('ASK_CREDIT')}</Text>
@@ -402,24 +410,25 @@ export default class HistoryRequester extends Component {
                                    iconClass={FontAwesomeIcon}
                                    iconName={'dollar'}
                                    iconColor={primary}
-                            ref={(ref)=> {
+                                   ref={(ref) => {
                                         refInp = ref
-                                this.setState({refIn:refInp})
+                                        this.setState({ refIn: refInp })
                                    }}
                                    inputStyle={input.style}
 
                                    value={this.state.montant}
                                    keyboardType={"numeric"}
                                    onChangeText={(text) => {
-                                if(text.length>0) {
+                                        if (text.length > 0) {
                                              try {
                                                   montant = parseFloat(text);
-                                        this.setStat({montant:montant})
+                                                  this.setStat({ montant: montant })
-                                        if(refBtn){
+                                                  if (refBtn) {
-                                        refBtn.setState({isDisabled:montant>0})
+                                                       refBtn.setState({ isDisabled: montant > 0 })
-                                        refBtn.isDisabled=montant>0
+                                                       refBtn.isDisabled = montant > 0
 
-                                        }} catch (e) {
+                                                  }
+                                             } catch (e) {
 
                                              }
                                         }
@@ -433,17 +442,17 @@ export default class HistoryRequester extends Component {
 
                     </View>
                     <View style={styles.btnContainer}>
-                    <Button style={styles.button_1} textStyle={styles.button_1_text} onPress={()=>this.onUserCancel()}>
+                         <Button style={styles.button_1} textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
                               {I18n.t('CANCEL')}
                          </Button>
                          <Button
-                        ref={ref=>{
+                              ref={ref => {
-                            refBtn=ref
+                                   refBtn = ref
                               }}
                               style={styles.button_2}
                               textStyle={styles.button_2_text}
-                        onPress={()=>{
+                              onPress={() => {
-                        this.onNetworkSend(itm.phone,itm.code_membre,refInp.state.value,refInp,refBtn)
+                                   this.onNetworkSend(itm.phone, itm.code_membre, refInp.state.value, refInp, refBtn)
                               }}>
                               {I18n.t('SEND')}
                          </Button>
@@ -454,24 +463,24 @@ export default class HistoryRequester extends Component {
           </View>)
 
      }
-    onNetworkSend(phone, code_membre,text) {
+     onNetworkSend(phone, code_membre, text) {
-        var validMontant=true
+          var validMontant = true
-        let montant=parseFloat(text)
+          let montant = parseFloat(text)
-        if(montant===null || !isNumber(montant) || montant>1000000){
+          if (montant === null || !isNumber(montant) || montant > 1000000) {
-            validMontant=false
+               validMontant = false
           }
-        this.setState({visibleError:!validMontant})
+          this.setState({ visibleError: !validMontant })
-         if(!validMontant){
+          if (!validMontant) {
                this.montantView.shake(800)
-             setTimeout(()=>{
+               setTimeout(() => {
-                 this.setState({visibleError:false})
+                    this.setState({ visibleError: false })
-         },3000)
+               }, 3000)
           }
           else {
-            sendDemandeSpecificque(montant,phone,code_membre).then((data)=>{
+               sendDemandeSpecificque(montant, phone, code_membre).then((data) => {
-                var title=""
+                    var title = ""
-                var message=""
+                    var message = ""
-                if(data.success!==undefined) {
+                    if (data.success !== undefined) {
                          if (data.success === 1) {
                               title = I18n.t("DEMAND_SEND")
                               message = I18n.t('DEMAND_SEND_SUCCESFUL')
@@ -479,12 +488,12 @@ export default class HistoryRequester extends Component {
                               title = "Erreur survenu lors de l'envoie "
                               message = "Une erreur est survenu lors de l'envoie de la demande"
                          }
-                }else{
+                    } else {
                          title = "Erreur survenu lors de l'envoie "
                          message = "Une erreur est survenu lors de l'envoie de la demande"
                     }
 
-                Alert.alert(title,message,[{text:"Ok",onPress:()=>{this.setState({montant:""})}}])
+                    Alert.alert(title, message, [{ text: "Ok", onPress: () => { this.setState({ montant: "" }) } }])
 
                })
           }
@@ -492,55 +501,55 @@ export default class HistoryRequester extends Component {
 
      async updateState() {
 
-        let user=await readUser();
+          let user = await readUser();
-        if(user.category==="geolocated"){
+          if (user.category === "geolocated") {
-            let networks=await getAgentNetworksList(user.agentId);
+               let networks = await getAgentNetworksList(user.agentId);
                console.log(networks)
-            if(networks.success===1) {
+               if (networks.success === 1) {
-                let net=[this.state.currentNetwork]
+                    let net = [this.state.currentNetwork]
-                networks.networks.forEach((item)=>{
+                    networks.networks.forEach((item) => {
                          net.push(item)
 
                     })
-                this.setState({networks: net})
+                    this.setState({ networks: net })
                }
           }
-        this.setState({user:user})
+          this.setState({ user: user })
 
      }
 }
 
-  const input=StyleSheet.create({
+const input = StyleSheet.create({
-    selfitem:{
+     selfitem: {
 
-        width:responsiveWidth(70),
+          width: responsiveWidth(70),
           alignSelf: 'center',
-        marginBottom:20,
+          marginBottom: 20,
      },
-    label:{
+     label: {
-      color:primary
+          color: primary
      },
-    style:{
+     style: {
-      color:'black'
+          color: 'black'
      }
-  })
+})
-  const styles = StyleSheet.create({
+const styles = StyleSheet.create({
-  title:{
+     title: {
           backgroundColor: primary,
-    color:'white',
+          color: 'white',
           paddingLeft: 20,
           paddingTop: 10,
           fontWeight: 'bold',
-    fontSize:responsiveFontSize(3),
+          fontSize: responsiveFontSize(3),
-    height:responsiveHeight(10),
+          height: responsiveHeight(10),
      },
-    subtitle:{
+     subtitle: {
-        color:'black',
+          color: 'black',
           paddingLeft: 20,
           paddingTop: 10,
           marginBottom: responsiveHeight(3),
           fontWeight: 'bold',
-        fontSize:responsiveFontSize(2),
+          fontSize: responsiveFontSize(2),
      },
      container: {
           flex: 1,
@@ -550,55 +559,55 @@ export default class HistoryRequester extends Component {
 
      container2: {
           flex: 1,
-        height:responsiveHeight(20),
+          height: responsiveHeight(20),
           backgroundColor: '#EEE',
      },
-  btnContainer:{
+     btnContainer: {
           flexDirection: 'row',
           paddingRight: 5,
           paddingLeft: 5,
           paddingTop: 5,
           marginBottom: -2.5,
      },
-  button_1:{
+     button_1: {
-    flex:1,
+          flex: 1,
           borderColor: 'transparent',
 
-},
+     },
-button_2:{
+     button_2: {
-  flex:1,
+          flex: 1,
           borderColor: 'transparent',
           backgroundColor: primary,
           borderRadius: 0,
-},
+     },
 
-button_1_text:{
+     button_1_text: {
-  color:primary,
+          color: primary,
           fontWeight: 'bold',
-},
+     },
 
-button_2_text:{
+     button_2_text: {
-  color:'white',
+          color: 'white',
           fontWeight: 'bold',
-},
+     },
-  cardInput:{
+     cardInput: {
 
           marginLeft: 10,
           marginRight: 10,
           marginTop: responsiveHeight(5),
-    width:responsiveWidth(98),
+          width: responsiveWidth(98),
           alignSelf: 'center',
-    justifyContent:'space-between',
+          justifyContent: 'space-between',
-    height:responsiveHeight(40)
+          height: responsiveHeight(40)
      },
-    cardInput2:{
+     cardInput2: {
 
           marginLeft: 10,
           marginRight: 10,
           marginTop: responsiveHeight(1),
-        width:responsiveWidth(98),
+          width: responsiveWidth(98),
-        height:responsiveHeight(50),
+          height: responsiveHeight(50),
           alignSelf: 'center',
-        justifyContent:'space-between',
+          justifyContent: 'space-between',
      }
 });

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;