remboursement nano credit OK

android/app/src/main/res/raw/utils_i18n_en.json

@@ -167,6 +167,7 @@
   "SAVE_MONEY": "Save money",
   "SAVE_MONEY_TYPE": "Savings type",
   "CAUTION_CREDIT": "Caution credit demand",
+  "CAUTIONNEMENT_DONE": "Caution done",
   "ID_DEMAND": "Demand ID",
   "DATE": "Date",
   "PAIEMENT_EAU_ELECTRICITY": "Water/electricity bill",

android/app/src/main/res/raw/utils_i18n_fr.json

@@ -174,6 +174,7 @@
   "SAVE_MONEY_TYPE": "Type d'épargne",
   "REFUND_DONE": "Remboursement effectué",
   "CAUTION_CREDIT": "Cautionner une demande de crédit",
+  "CAUTIONNEMENT_DONE": "Cautionnement effectué",
   "ID_DEMAND": "Identifiant de la demande",
   "PAIEMENT_EAU_ELECTRICITY": "Paiement eau/électricité",
   "PAIEMENT_ECOLE": "Paiement école",

redux/actions/NanoCreditAction.js

@@ -1,55 +1,76 @@
 import {
-     CREATE_GROUP_PENDING,
+    ASK_NANO_CREDIT_ERROR,
-     CREATE_GROUP_SUCCESS,
+    ASK_NANO_CREDIT_PENDING,
-     CREATE_GROUP_ERROR,
+    ASK_NANO_CREDIT_RESET,
-     CREATE_GROUP_RESET,
+    ASK_NANO_CREDIT_SUCCESS,
-     GET_DEMAND_GROUP_PENDING,
+    CASSER_EPARGNE_USER_ERROR,
-     GET_DEMAND_GROUP_SUCCESS,
+    CASSER_EPARGNE_USER_PENDING,
-     GET_DEMAND_GROUP_ERROR,
+    CASSER_EPARGNE_USER_RESET,
-     GET_DEMAND_GROUP_RESET,
+    CASSER_EPARGNE_USER_SUCCESS,
-     GET_UNIQUE_DEMAND_GROUP_PENDING,
+    CAUTION_CREDIT_DEMAND_AGENT_ERROR,
-     GET_UNIQUE_DEMAND_GROUP_RESET,
-     GET_UNIQUE_DEMAND_GROUP_ERROR,
-     GET_UNIQUE_DEMAND_GROUP_SUCCESS,
-     TREAT_DEMAND_GROUP_PENDING,
-     TREAT_DEMAND_GROUP_SUCCESS,
-     TREAT_DEMAND_GROUP_ERROR,
-     TREAT_DEMAND_GROUP_RESET,
-     JOIN_GROUP_PENDING,
-     JOIN_GROUP_SUCCESS,
-     JOIN_GROUP_RESET,
-     JOIN_GROUP_ERROR,
-     GET_USER_GROUP_DETAIL_PENDING,
-     GET_USER_GROUP_DETAIL_SUCCESS,
-     GET_USER_GROUP_DETAIL_RESET,
-     GET_USER_GROUP_DETAIL_ERROR,
-     GET_NOTIFICATIONS_ERROR,
-     GET_NOTIFICATIONS_RESET,
-     GET_NOTIFICATIONS_PENDING,
-     GET_NOTIFICATIONS_SUCCESS, ASK_NANO_CREDIT_PENDING, ASK_NANO_CREDIT_SUCCESS, ASK_NANO_CREDIT_ERROR, ASK_NANO_CREDIT_RESET,
-     GET_NANO_CREDIT_DEMAND_DURATION_PENDING,
-     GET_NANO_CREDIT_DEMAND_DURATION_SUCCESS,
-     GET_NANO_CREDIT_DEMAND_DURATION_ERROR,
-     GET_NANO_CREDIT_DEMAND_DURATION_RESET,
-     REFUND_CREDIT_DEMAND_USER_PENDING,
-     REFUND_CREDIT_DEMAND_USER_RESET,
-     REFUND_CREDIT_DEMAND_USER_ERROR,
     CAUTION_CREDIT_DEMAND_AGENT_PENDING,
     CAUTION_CREDIT_DEMAND_AGENT_RESET,
-     CAUTION_CREDIT_DEMAND_AGENT_ERROR,
-     GET_NANO_CREDIT_DEMAND_DETAIL_PENDING,
-     GET_NANO_CREDIT_DEMAND_DETAIL_SUCCESS,
-     GET_NANO_CREDIT_DEMAND_DETAIL_ERROR,
-     GET_NANO_CREDIT_DEMAND_DETAIL_RESET,
     CAUTION_CREDIT_DEMAND_AGENT_SUCCESS,
-     EPARGNER_ARGENT_USER_PENDING,
+    CREATE_GROUP_ERROR,
-     EPARGNER_ARGENT_USER_SUCCESS,
+    CREATE_GROUP_PENDING,
+    CREATE_GROUP_RESET,
+    CREATE_GROUP_SUCCESS,
     EPARGNER_ARGENT_USER_ERROR,
+    EPARGNER_ARGENT_USER_PENDING,
     EPARGNER_ARGENT_USER_RESET,
-     CASSER_EPARGNE_USER_PENDING,
+    EPARGNER_ARGENT_USER_SUCCESS,
-     CASSER_EPARGNE_USER_SUCCESS,
+    GET_DEMAND_GROUP_ERROR,
-     CASSER_EPARGNE_USER_ERROR,
+    GET_DEMAND_GROUP_PENDING,
-     CASSER_EPARGNE_USER_RESET, GET_NANO_CREDIT_ACCOUNT_USER_PENDING, GET_NANO_CREDIT_ACCOUNT_USER_SUCCESS, GET_NANO_CREDIT_ACCOUNT_USER_ERROR, GET_NANO_CREDIT_ACCOUNT_USER_RESET, GET_NANO_CREDIT_HISTORY_USER_PENDING, GET_NANO_CREDIT_HISTORY_USER_SUCCESS, GET_NANO_CREDIT_HISTORY_USER_RESET, GET_NANO_CREDIT_HISTORY_USER_ERROR
+    GET_DEMAND_GROUP_RESET,
+    GET_DEMAND_GROUP_SUCCESS,
+    GET_EPARGNE_HISTORY_PENDING_USER_ERROR,
+    GET_EPARGNE_HISTORY_PENDING_USER_PENDING,
+    GET_EPARGNE_HISTORY_PENDING_USER_RESET,
+    GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS,
+    GET_NANO_CREDIT_ACCOUNT_USER_ERROR,
+    GET_NANO_CREDIT_ACCOUNT_USER_PENDING,
+    GET_NANO_CREDIT_ACCOUNT_USER_RESET,
+    GET_NANO_CREDIT_ACCOUNT_USER_SUCCESS,
+    GET_NANO_CREDIT_DEMAND_DETAIL_ERROR,
+    GET_NANO_CREDIT_DEMAND_DETAIL_PENDING,
+    GET_NANO_CREDIT_DEMAND_DETAIL_RESET,
+    GET_NANO_CREDIT_DEMAND_DETAIL_SUCCESS,
+    GET_NANO_CREDIT_DEMAND_DURATION_ERROR,
+    GET_NANO_CREDIT_DEMAND_DURATION_PENDING,
+    GET_NANO_CREDIT_DEMAND_DURATION_RESET,
+    GET_NANO_CREDIT_DEMAND_DURATION_SUCCESS,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS,
+    GET_NANO_CREDIT_HISTORY_USER_ERROR,
+    GET_NANO_CREDIT_HISTORY_USER_PENDING,
+    GET_NANO_CREDIT_HISTORY_USER_RESET,
+    GET_NANO_CREDIT_HISTORY_USER_SUCCESS,
+    GET_NOTIFICATIONS_ERROR,
+    GET_NOTIFICATIONS_PENDING,
+    GET_NOTIFICATIONS_RESET,
+    GET_NOTIFICATIONS_SUCCESS,
+    GET_UNIQUE_DEMAND_GROUP_ERROR,
+    GET_UNIQUE_DEMAND_GROUP_PENDING,
+    GET_UNIQUE_DEMAND_GROUP_RESET,
+    GET_UNIQUE_DEMAND_GROUP_SUCCESS,
+    GET_USER_GROUP_DETAIL_ERROR,
+    GET_USER_GROUP_DETAIL_PENDING,
+    GET_USER_GROUP_DETAIL_RESET,
+    GET_USER_GROUP_DETAIL_SUCCESS,
+    JOIN_GROUP_ERROR,
+    JOIN_GROUP_PENDING,
+    JOIN_GROUP_RESET,
+    JOIN_GROUP_SUCCESS,
+    REFUND_CREDIT_DEMAND_USER_ERROR,
+    REFUND_CREDIT_DEMAND_USER_PENDING,
+    REFUND_CREDIT_DEMAND_USER_RESET,
+    REFUND_CREDIT_DEMAND_USER_SUCCESS,
+    TREAT_DEMAND_GROUP_ERROR,
+    TREAT_DEMAND_GROUP_PENDING,
+    TREAT_DEMAND_GROUP_RESET,
+    TREAT_DEMAND_GROUP_SUCCESS
 } from "../types/NanoCreditType";
 
 export const fetchCreateGroupPending = () => ({
@@ -225,7 +246,7 @@ export const fetchCautionCreditDemandUserPending = () => ({
 });
 
 export const fetchCautionCreditDemandUserSuccess = (res) => ({
-     type: REFUND_CREDIT_DEMAND_USER_RESET,
+    type: REFUND_CREDIT_DEMAND_USER_SUCCESS,
     result: res,
 });
 
@@ -351,3 +372,41 @@ export const fetchGetNanoCreditUserHistoryError = (error) => ({
 export const fetchGetNanoCreditUserHistoryReset = () => ({
     type: GET_NANO_CREDIT_HISTORY_USER_RESET
 });
+
+
+export const fetchGetNanoCreditUserHistoryInProgressPending = () => ({
+    type: GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING
+});
+
+export const fetchGetNanoCreditUserHistoryInProgressSuccess = (res) => ({
+    type: GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS,
+    result: res,
+});
+
+export const fetchGetNanoCreditUserHistoryInProgressError = (error) => ({
+    type: GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR,
+    result: error
+});
+
+export const fetchGetNanoCreditUserHistoryInProgressReset = () => ({
+    type: GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET
+});
+
+
+export const fetchGetEpargneInProgressPending = () => ({
+    type: GET_EPARGNE_HISTORY_PENDING_USER_PENDING
+});
+
+export const fetchGetEpargneInProgressSuccess = (res) => ({
+    type: GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS,
+    result: res,
+});
+
+export const fetchGetEpargneInProgressError = (error) => ({
+    type: GET_EPARGNE_HISTORY_PENDING_USER_ERROR,
+    result: error
+});
+
+export const fetchGetEpargneInProgressReset = () => ({
+    type: GET_EPARGNE_HISTORY_PENDING_USER_RESET
+});

redux/reducers/GetDemandsGroupReducer.js

@@ -1,4 +1,9 @@
-import { GET_DEMAND_GROUP_ERROR, GET_DEMAND_GROUP_PENDING, GET_DEMAND_GROUP_RESET, GET_DEMAND_GROUP_SUCCESS } from "../types/NanoCreditType";
+import {
+    GET_DEMAND_GROUP_ERROR,
+    GET_DEMAND_GROUP_PENDING,
+    GET_DEMAND_GROUP_RESET,
+    GET_DEMAND_GROUP_SUCCESS
+} from "../types/NanoCreditType";
 
 const initialState = {
     loading: false,
@@ -8,23 +13,27 @@ const initialState = {
 
 export default (state = initialState, action) => {
     switch (action.type) {
-          case GET_DEMAND_GROUP_PENDING: return {
+        case GET_DEMAND_GROUP_PENDING:
+            return {
                 ...state,
                 loading: true
             }
-          case GET_DEMAND_GROUP_SUCCESS: return {
+        case GET_DEMAND_GROUP_SUCCESS:
+            return {
                 ...state,
                 loading: false,
                 result: action.result.data,
                 error: null
             }
-          case GET_DEMAND_GROUP_ERROR: return {
+        case GET_DEMAND_GROUP_ERROR:
+            return {
                 ...state,
                 loading: false,
                 result: null,
                 error: action.result
             }
-          case GET_DEMAND_GROUP_RESET: return initialState;
+        case GET_DEMAND_GROUP_RESET:
+            return initialState;
 
         default: {
             return state;

redux/reducers/GetEpargneInProgressReducer.js

@@ -0,0 +1,42 @@
+import {
+    GET_EPARGNE_HISTORY_PENDING_USER_ERROR,
+    GET_EPARGNE_HISTORY_PENDING_USER_PENDING,
+    GET_EPARGNE_HISTORY_PENDING_USER_RESET,
+    GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS
+} from "../types/NanoCreditType";
+
+const initialState = {
+    loading: false,
+    result: null,
+    error: null
+};
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case GET_EPARGNE_HISTORY_PENDING_USER_PENDING:
+            return {
+                ...state,
+                loading: true
+            }
+        case GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                result: action.result.data,
+                error: null
+            }
+        case GET_EPARGNE_HISTORY_PENDING_USER_ERROR:
+            return {
+                ...state,
+                loading: false,
+                result: null,
+                error: action.result
+            }
+        case GET_EPARGNE_HISTORY_PENDING_USER_RESET:
+            return initialState;
+
+        default: {
+            return state;
+        }
+    }
+};

redux/reducers/GetNanoCreditUserHistoryInProgressReducer.js

@@ -0,0 +1,42 @@
+import {
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET,
+    GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS
+} from "../types/NanoCreditType";
+
+const initialState = {
+    loading: false,
+    result: null,
+    error: null
+};
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING:
+            return {
+                ...state,
+                loading: true
+            }
+        case GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS:
+            return {
+                ...state,
+                loading: false,
+                result: action.result.data,
+                error: null
+            }
+        case GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR:
+            return {
+                ...state,
+                loading: false,
+                result: null,
+                error: action.result
+            }
+        case GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET:
+            return initialState;
+
+        default: {
+            return state;
+        }
+    }
+};

redux/reducers/index.js

@@ -44,6 +44,8 @@ import GetNanoCreditHistoryUserReducer from "./GetNanoCreditHistoryUserReducer";
 import GetHyperSuperHistoryReducer from "./GetHyperSuperHistoryReducer";
 import GetBankListReducer from "./GetBankListReducer";
 import EnvoieUserWalletToBank from "./EnvoieUserWalletToBankReducer";
+import GetEpargneInProgressReducer from "./GetEpargneInProgressReducer";
+import GetNanoCreditUserHistoryInProgressReducer from "./GetNanoCreditUserHistoryInProgressReducer";
 
 const persistConfig = {
     key: 'root',
@@ -96,7 +98,9 @@ const rootReducer = persistCombineReducers(persistConfig, {
     getNanoCreditHistoryUserReducer: GetNanoCreditHistoryUserReducer,
     getHyperSuperHistoryReducer: GetHyperSuperHistoryReducer,
     getBankListReducer: GetBankListReducer,
-    envoieUserWalletToBank: EnvoieUserWalletToBank
+    envoieUserWalletToBank: EnvoieUserWalletToBank,
+    getEpargneInProgressReducer: GetEpargneInProgressReducer,
+    getNanoCreditUserHistoryInProgressReducer: GetNanoCreditUserHistoryInProgressReducer
 });
 
 export default rootReducer;

redux/types/NanoCreditType.js

@@ -68,12 +68,22 @@ export const CASSER_EPARGNE_USER_SUCCESS = 'CASSER_EPARGNE_USER_SUCCESS';
 export const CASSER_EPARGNE_USER_ERROR = 'CASSER_EPARGNE_USER_ERROR';
 export const CASSER_EPARGNE_USER_RESET = 'CASSER_EPARGNE_USER_RESET';
 
+export const GET_NANO_CREDIT_HISTORY_USER_ERROR = 'GET_NANO_CREDIT_HISTORY_USER_ERROR';
+export const GET_NANO_CREDIT_HISTORY_USER_RESET = 'GET_NANO_CREDIT_HISTORY_USER_RESET';
+export const GET_NANO_CREDIT_HISTORY_USER_SUCCESS = 'GET_NANO_CREDIT_HISTORY_USER_SUCCESS';
+export const GET_NANO_CREDIT_HISTORY_USER_PENDING = 'GET_NANO_CREDIT_HISTORY_USER_PENDING';
+
 export const GET_NANO_CREDIT_ACCOUNT_USER_PENDING = 'GET_NANO_CREDIT_ACCOUNT_USER_PENDING';
 export const GET_NANO_CREDIT_ACCOUNT_USER_SUCCESS = 'GET_NANO_CREDIT_ACCOUNT_USER_SUCCESS';
 export const GET_NANO_CREDIT_ACCOUNT_USER_ERROR = 'GET_NANO_CREDIT_ACCOUNT_USER_ERROR';
 export const GET_NANO_CREDIT_ACCOUNT_USER_RESET = 'GET_NANO_CREDIT_ACCOUNT_USER_RESET';
 
-export const GET_NANO_CREDIT_HISTORY_USER_PENDING = 'GET_NANO_CREDIT_HISTORY_USER_PENDING';
+export const GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING = 'GET_NANO_CREDIT_HISTORY_PENDING_USER_PENDING';
-export const GET_NANO_CREDIT_HISTORY_USER_SUCCESS = 'GET_NANO_CREDIT_HISTORY_USER_SUCCESS';
+export const GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS = 'GET_NANO_CREDIT_HISTORY_PENDING_USER_SUCCESS';
-export const GET_NANO_CREDIT_HISTORY_USER_ERROR = 'GET_NANO_CREDIT_HISTORY_USER_ERROR';
+export const GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR = 'GET_NANO_CREDIT_HISTORY_PENDING_USER_ERROR';
-export const GET_NANO_CREDIT_HISTORY_USER_RESET = 'GET_NANO_CREDIT_HISTORY_USER_RESET';
+export const GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET = 'GET_NANO_CREDIT_HISTORY_PENDING_USER_RESET';
+
+export const GET_EPARGNE_HISTORY_PENDING_USER_PENDING = 'GET_EPARGNE_HISTORY_PENDING_USER_PENDING';
+export const GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS = 'GET_EPARGNE_HISTORY_PENDING_USER_SUCCESS';
+export const GET_EPARGNE_HISTORY_PENDING_USER_ERROR = 'GET_EPARGNE_HISTORY_PENDING_USER_ERROR';
+export const GET_EPARGNE_HISTORY_PENDING_USER_RESET = 'GET_EPARGNE_HISTORY_PENDING_USER_RESET';

screens/nano-credit/CautionNanoCreditAgent.js

@@ -15,12 +15,18 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {Color} from '../../config/Color';
-import { FontWeight, Typography } from '../../config/typography';
+import {Typography} from '../../config/typography';
 import {IlinkEmitter} from '../../utils/events';
-import { cautionCreditDemandAgentAction, cautionCreditDemandAgentReset, getNanoCreditDemandDetailAction, getNanoCreditDemandDetailReset } from '../../webservice/agent/NanoCreditAgentApi';
+import {
+    cautionCreditDemandAgentAction,
+    cautionCreditDemandAgentReset,
+    getNanoCreditDemandDetailAction,
+    getNanoCreditDemandDetailReset
+} from '../../webservice/agent/NanoCreditAgentApi';
 import {readUser} from '../../webservice/AuthApi';
 import {withdrawalMode} from '../../utils/UtilsFunction';
 import thousands from 'thousands';
+
 const moment = require('moment');
 
 let theme = require('../../utils/theme.json');
@@ -45,7 +51,6 @@ class CautionNanoCreditAgent extends Component {
             withdrawalInCashTypeName: withdrawalMode()[0].name,
             isModalConfirmVisible: false,
             isGroupToModify: false,
-               isModalConfirmVisible: false,
             withdrawalInCash: true,
             wallet: store.getState().walletDetailReducer.result.response
         };
@@ -142,7 +147,8 @@ class CautionNanoCreditAgent extends Component {
                                 <Text style={[styles.body2]}>{I18n.t('AMOUNT')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant, ' ')} ${this.state.wallet.currency_code}`}</Text>
                             </View>
                         </View>
                         <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -150,7 +156,8 @@ class CautionNanoCreditAgent extends Component {
                                 <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(taxe, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(taxe, ' ')} ${this.state.wallet.currency_code}`}</Text>
                             </View>
                         </View>
                         <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -158,7 +165,8 @@ class CautionNanoCreditAgent extends Component {
                                 <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(interet, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(interet, ' ')} ${this.state.wallet.currency_code}`}</Text>
                             </View>
                         </View>
                         <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -166,7 +174,8 @@ class CautionNanoCreditAgent extends Component {
                                 <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_TYPE')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{retraitCash ? I18n.t('WITHDRAWAL_IN_CASH') : I18n.t('TRANSFER_IN_ACCOUNT')}</Text>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{retraitCash ? I18n.t('WITHDRAWAL_IN_CASH') : I18n.t('TRANSFER_IN_ACCOUNT')}</Text>
                             </View>
                         </View>
                         <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -174,7 +183,7 @@ class CautionNanoCreditAgent extends Component {
                                 <Text tyle={[Typography.body2]}>{I18n.t('ETAT')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(etat)}</Text>
+                                <Text style={[Typography.caption1, Color.grayColor]}>{etat}</Text>
                             </View>
                         </View>
                         <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -190,7 +199,8 @@ class CautionNanoCreditAgent extends Component {
                                 <Text tyle={[Typography.body2]}>{I18n.t('CREATION_DATE')}</Text>
                             </View>
                             <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                        <Text style={[Typography.caption1, Color.grayColor]}>{moment(dateCreation).format('DD-MM-YYYY')}</Text>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{moment(dateCreation).format('DD-MM-YYYY')}</Text>
                             </View>
                         </View>
                     </View>
@@ -250,7 +260,7 @@ class CautionNanoCreditAgent extends Component {
         if (result !== null) {
             if (result.response !== null) {
                 Alert.alert(
-                         I18n.t("REFUND_DONE"),
+                    I18n.t("CAUTIONNEMENT_DONE"),
                     result.response,
                     [
                         {
@@ -356,7 +366,9 @@ class CautionNanoCreditAgent extends Component {
 
                     <Text style={styles.subbigtitle}>{I18n.t('DEMAND_INFO')}</Text>
 
-                         <Animatable.View ref={(comp) => { this.idDemandAnim = comp }}>
+                    <Animatable.View ref={(comp) => {
+                        this.idDemandAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
                               label={I18n.t('ID_DEMAND')}
                               iconColor={'#f95a25'}
@@ -371,7 +383,9 @@ class CautionNanoCreditAgent extends Component {
                         </Fumi>
                     </Animatable.View>
 
-                         <Animatable.View ref={(comp) => { this.typeRetraitAnim = comp }}
+                    <Animatable.View ref={(comp) => {
+                        this.typeRetraitAnim = comp
+                    }}
                                      style={{
                                          width: responsiveWidth(90),
                                          height: 60,
@@ -386,7 +400,7 @@ class CautionNanoCreditAgent extends Component {
                             label={I18n.t('WITHDRAWAL_TYPE')}
                             data={this.state.withdrawalInCashType}
                             useNativeDriver={true}
-                                   value={this.state.withdrawalInCashTypeName}
+                            value={I18n.t(this.state.withdrawalInCashTypeName)}
                             onChangeText={(value, index, data) => {
                                 if (value === I18n.t('WITHDRAWAL_IN_CASH'))
                                     this.setState({
@@ -399,13 +413,19 @@ class CautionNanoCreditAgent extends Component {
                                         withdrawalInCashTypeName: I18n.t('TRANSFER_IN_ACCOUNT')
                                     })
                             }}
-                                   valueExtractor={(value) => { return value.name }}
+                            valueExtractor={(value) => {
-                                   labelExtractor={(value) => { return value.name }}
+                                return value.name
+                            }}
+                            labelExtractor={(value) => {
+                                return value.name
+                            }}
                         />
                     </Animatable.View>
 
 
-                         <Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
+                    <Animatable.View ref={(comp) => {
+                        this.passwordAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                               label={I18n.t('PASSWORD')}
                               iconColor={'#f95a25'}
@@ -422,7 +442,9 @@ class CautionNanoCreditAgent extends Component {
 
                     <Button style={styles.btnvalide}
                             textStyle={styles.textbtnvalide}
-                              onPress={() => { this.onSubmitCautionnerNanoCredit(); }}>
+                            onPress={() => {
+                                this.onSubmitCautionnerNanoCredit();
+                            }}>
                         {this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>
                 </ScrollView>
             </>

screens/nano-credit/EpargnerArgentUser.js

@@ -19,6 +19,8 @@ import { isNormalInteger, typeEpargne } from '../../utils/UtilsFunction';
 import {readUser} from '../../webservice/AuthApi';
 import {getNanoCreditDemandDurationAction, getNanoCreditDemandDurationReset} from '../../webservice/NanoCreditApi';
 import {epargnerArgentUserAction, epargnerArgentUserReset} from "../../webservice/user/NanoCreditApi";
+import {IlinkEmitter} from "../../utils/events";
+
 let theme = require('../../utils/theme.json');
 let route = require('../../route.json');
 
@@ -82,7 +84,8 @@ class EpargnerArgentUser extends Component {
             if (user) {
                 if (user !== undefined) {
                     this.props.getNanoCreditDemandDurationAction({id_user: user.id, type: "epargne"});
-                    };
+                }
+                ;
             }
         })
 
@@ -143,8 +146,7 @@ class EpargnerArgentUser extends Component {
                         durationSelect: resultGetNanoCreditDuration.response[0].value,
                         modalVisible: false
                     });
-                    }
+                } else if (resultGetNanoCreditDuration.response.length === 0) {
-                    else if (resultGetNanoCreditDuration.response.length === 0) {
                     this.setState({
                         hasLoadDuration: true,
                         durations: [],
@@ -220,6 +222,7 @@ class EpargnerArgentUser extends Component {
                             text: I18n.t("OK"), onPress: () => {
                                 this.props.epargnerArgentUserReset();
                                 //IlinkEmitter.emit("treatNanoGroupDemand");
+                                IlinkEmitter.emit("updateNanoCreditAccount");
                                 this.props.navigation.pop();
                             }
                         }
@@ -283,7 +286,9 @@ class EpargnerArgentUser extends Component {
 
                     <Text style={styles.subbigtitle}>{I18n.t('FILL_INFORMATION')}</Text>
 
-                         <Animatable.View ref={(comp) => { this.typeEpargneAnim = comp }}
+                    <Animatable.View ref={(comp) => {
+                        this.typeEpargneAnim = comp
+                    }}
                                      style={{
                                          width: responsiveWidth(90),
                                          height: 60,
@@ -314,14 +319,20 @@ class EpargnerArgentUser extends Component {
                                         displayDuration: true
                                     })
                             }}
-                                   valueExtractor={(value) => { return I18n.t(value.name) }}
+                            valueExtractor={(value) => {
-                                   labelExtractor={(value) => { return I18n.t(value.name) }}
+                                return I18n.t(value.name)
+                            }}
+                            labelExtractor={(value) => {
+                                return I18n.t(value.name)
+                            }}
                         />
                     </Animatable.View>
 
                     {
                         this.state.displayDuration &&
-                              <Animatable.View ref={(comp) => { this.durationAnim = comp }}
+                        <Animatable.View ref={(comp) => {
+                            this.durationAnim = comp
+                        }}
                                          style={{
                                              width: responsiveWidth(90),
                                              height: 60,
@@ -340,13 +351,19 @@ class EpargnerArgentUser extends Component {
                                 onChangeText={(value, index, data) => {
                                     this.setState({durationSelect: value});
                                 }}
-                                        valueExtractor={(value) => { return I18n.t(value.value) }}
+                                valueExtractor={(value) => {
-                                        labelExtractor={(value) => { return I18n.t(value.value) }}
+                                    return I18n.t(value.value)
+                                }}
+                                labelExtractor={(value) => {
+                                    return I18n.t(value.value)
+                                }}
                             />
                         </Animatable.View>
                     }
 
-                         <Animatable.View ref={(comp) => { this.montantAnim = comp }}>
+                    <Animatable.View ref={(comp) => {
+                        this.montantAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
                               label={I18n.t('AMOUNT')}
                               iconColor={'#f95a25'}
@@ -380,7 +397,9 @@ class EpargnerArgentUser extends Component {
                         </View>
                     </Animatable.View>
 
-                         <Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
+                    <Animatable.View ref={(comp) => {
+                        this.passwordAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                               label={I18n.t('PASSWORD')}
                               iconColor={'#f95a25'}
@@ -397,7 +416,9 @@ class EpargnerArgentUser extends Component {
 
                     <Button style={styles.btnvalide}
                             textStyle={styles.textbtnvalide}
-                              onPress={() => { this.onSubmitEpargnerArgent(); }}>
+                            onPress={() => {
+                                this.onSubmitEpargnerArgent();
+                            }}>
                         {I18n.t('SUBMIT_LABEL')}</Button>
                 </ScrollView>
             </>

screens/nano-credit/ForEpargne

@@ -0,0 +1,692 @@
+import isEqual from 'lodash/isEqual';
+import isNil from 'lodash/isNil';
+import React, {Component} from 'react';
+import {
+    ActivityIndicator,
+    Alert,
+    Platform,
+    ProgressBarAndroid,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import I18n from 'react-native-i18n';
+import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
+import {ProgressDialog} from 'react-native-simple-dialogs';
+import {connect} from 'react-redux';
+import omit from 'lodash/omit';
+import {bindActionCreators} from 'redux';
+import {Color} from '../../config/Color';
+import {IlinkEmitter} from '../../utils/events';
+import {readUser} from '../../webservice/AuthApi';
+import {refundCreditDemandUserAction, refundCreditDemandUserReset} from '../../webservice/user/NanoCreditApi';
+import {
+    getNanoCreditUserHistoryInProgressAction,
+    getNanoCreditUserHistoryInProgressReset,
+} from "../../webservice/NanoCreditApi";
+import {Typography} from "../../config/typography";
+import {cutStringWithoutDot, nanoCreditHistoryLabel} from "../../utils/UtilsFunction";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import thousands from "thousands";
+import * as Utils from "../../utils/DeviceUtils";
+import Dialog from "react-native-dialog";
+
+let theme = require('../../utils/theme.json');
+let route = require('../../route.json');
+
+
+class RefundNanoCreditUser extends Component {
+
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            password: null,
+            idDemand: null,
+            codeGroup: null,
+            loading: false,
+            user: null,
+            triggerSubmitClick: false,
+            isSubmitClick: false,
+            isDataSubmit: false,
+            isModalConfirmVisible: false,
+            isGroupToModify: false,
+            displayModalHistory: false,
+            historyItemDetail: null,
+            isDataHasLoaded: false,
+            displayPasswordModal: false,
+            wallet: this.props.navigation.state.params.wallet,
+
+        };
+        this.props.getNanoCreditUserHistoryInProgressReset();
+
+    }
+
+    static navigatorStyle = {
+        navBarBackgroundColor: Color.primaryColor,
+        statusBarColor: Color.primaryDarkColor,
+        navBarTextColor: '#FFFFFF',
+        navBarButtonColor: '#FFFFFF'
+
+    };
+
+    static navigationOptions = () => {
+        return {
+            drawerLabel: () => null,
+            headerTitle: I18n.t('REFUND_NANO_CREDIT'),
+            headerTintColor: 'white',
+            headerStyle: {
+                backgroundColor: Color.primaryColor,
+                marginTop: 0,
+                color: 'white'
+            },
+            headerTitleStyle: {
+                color: "white"
+            },
+            title: I18n.t('REFUND_NANO_CREDIT')
+        }
+    };
+
+    componentDidMount() {
+
+        readUser().then((user) => {
+            if (user) {
+                if (user !== undefined) {
+                    this.setState({user});
+                    this.props.getNanoCreditUserHistoryInProgressAction(user.id);
+                }
+            }
+        });
+
+    }
+
+    ckeckIfFieldIsOK(champ) {
+        return (isNil(champ) || isEqual(champ.length, 0));
+    }
+
+    renderRefundNanoCreditResponse = () => {
+
+        const {result, error} = this.props;
+
+        if (error !== null) {
+            if (typeof error.data !== 'undefined') {
+                Alert.alert(
+                    I18n.t("ERROR_LABLE"),
+                    error.data.error,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.refundCreditDemandUserReset();
+                            }
+                        }
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+
+        if (result !== null) {
+            if (result.response !== null) {
+                Alert.alert(
+                    I18n.t("REFUND_DONE"),
+                    result.response,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.refundCreditDemandUserReset();
+                                IlinkEmitter.emit("refreshWallet");
+                                IlinkEmitter.emit("updateNanoCreditAccount");
+                                this.props.navigation.pop();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+    }
+
+    updateLangue() {
+        this.props.navigation.setParams({name: I18n.t('REFUND_NANO_CREDIT')})
+        this.forceUpdate()
+    }
+
+    ckeckIfFieldIsOK(champ) {
+        return (isNil(champ) || isEqual(champ.length, 0));
+    }
+
+    onSubmitRefundNanoCredit = () => {
+        const {idDemand, password} = this.state;
+
+        if (this.ckeckIfFieldIsOK(idDemand))
+            this.idDemandAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(password))
+            this.passwordAnim.shake(800);
+        else {
+
+            this.props.refundCreditDemandUserAction({
+                id_user: this.state.user.id,
+                id_demande: this.state.idDemand,
+                password: this.state.password
+            }, 0);
+        }
+        this.setState({
+            isDataSubmit: true
+        });
+    }
+
+
+    renderLoader = () => {
+        return (
+            <ProgressDialog
+                visible={this.props.loading || this.props.loadingGetCommission}
+                title={I18n.t('LOADING')}
+                message={I18n.t('LOADING_INFO')}
+            />
+        )
+    }
+
+    renderModalHistoryDetail = () => {
+        return (
+
+            <Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
+
+                <Dialog.Title>{I18n.t('DEMAND_DETAIL')}</Dialog.Title>
+                {
+                    <ScrollView>
+                        <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('ID_EPARGNE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('ETAT')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('HISTORY_TYPE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_fin}</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </ScrollView>
+
+                }
+                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
+                    this.setState({
+                        displayModalHistory: !this.state.displayModalHistory,
+                    });
+
+                }}/>
+
+                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
+
+                    this.setState({
+                        displayPasswordModal: !this.state.displayPasswordModal,
+                    });
+
+                }}/>
+
+            </Dialog.Container>
+
+        );
+    }
+
+    renderPasswordDialog = () => {
+        return (
+            <Dialog.Container useNativeDriver={true} visible={this.state.displayPasswordModal}>
+
+                <Dialog.Title>{I18n.t('PASSWORD')}</Dialog.Title>
+
+                <Dialog.Input placeholder={I18n.t('PLEASE_ENTER_THE_PASSWORD')}
+                              style={{borderBottomWidth: 1, borderBottomColor: Color.borderColor}}
+                              showSoftInputOnFocus={true}
+                              onChangeText={(password) => {
+                                  this.setState({password})
+                              }}
+                              secureTextEntry={true}
+                              value={this.state.password}
+                              onSubmitEditing={() => {
+                                  this.props.refundCreditDemandUserAction({
+                                      id_user: this.state.user.id,
+                                      id_demande: this.state.historyItemDetail.id_epargne,
+                                      password: this.state.password
+                                  });
+                              }}/>
+
+                <Dialog.Button label={I18n.t('CANCEL_LABEL')} onPress={() => {
+                    this.setState({displayPasswordModal: !this.state.displayPasswordModal});
+                }}/>
+                <Dialog.Button label={I18n.t('SUBMIT_LABEL')} onPress={() => {
+                    this.setState({
+                        displayPasswordModal: false,
+                        displayModalHistory: false,
+                        isDataSubmit: true
+                    })
+                    this.props.refundCreditDemandUserAction({
+                        id_user: this.state.user.id,
+                        id_demande: this.state.historyItemDetail.id_epargne,
+                        password: this.state.password
+                    });
+                }}/>
+            </Dialog.Container>
+        );
+    }
+
+    renderNanoCreditItem = (item, index) => {
+
+        return (
+            <TouchableOpacity onPress={() => {
+                this.setState({displayModalHistory: true, historyItemDetail: item})
+            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
+                {
+                    Object.keys(omit(item, ['id', 'id_epargne', 'duree_mois', 'date_fin', 'interet', 'taxe'])).map((element, i) => (
+                        <View style={{alignItems: 'center'}} key={i}>
+
+                            <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
+                                {
+                                    isEqual(element, 'montant') ?
+                                        `  ${thousands(item[element], ' ')}`
+                                        : isEqual(element, 'date_creation') ?
+                                        cutStringWithoutDot(item[element], 16)
+                                        : item[element]
+                                }
+                            </Text>
+                        </View>
+                    ))
+                }
+            </TouchableOpacity>
+        );
+    }
+
+    renderNanoCreditList = () => {
+        const {errorNanoCreditHistory, resultNanoCreditHistory} = this.props;
+        if (errorNanoCreditHistory !== null) {
+            if (typeof errorNanoCreditHistory.data !== 'undefined') {
+                return (
+                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+                        <Text style={Typography.body1}>{errorNanoCreditHistory.data.error}</Text>
+                    </View>
+                )
+            } else {
+                return (
+                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+                        <Text style={Typography.body1}>{errorNanoCreditHistory}</Text>
+                    </View>
+                )
+            }
+        }
+
+
+        if (resultNanoCreditHistory !== null) {
+            if (resultNanoCreditHistory.response !== null) {
+                return (
+                    Array.isArray(resultNanoCreditHistory.response) && (resultNanoCreditHistory.response.length) > 0 ?
+                        (
+                            <>
+                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
+                                    {
+                                        nanoCreditHistoryLabel().map((item, index) => (
+                                            <View style={{alignItems: 'center'}} key={index}>
+                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
+                                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
+                                                    {I18n.t(item.label)}
+                                                </Text>
+                                            </View>
+                                        ))
+                                    }
+                                </View>
+                                {
+                                    resultNanoCreditHistory.response.map((item, index) => (
+                                        this.renderNanoCreditItem(item, index)
+                                    ))
+                                }
+                            </>
+                        ) :
+                        (
+                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
+                                <Text style={Typography.body1}>{I18n.t('NO_NANO_CREDIT')}</Text>
+                            </View>
+                        )
+                )
+            }
+        }
+    }
+
+    renderNanoCreditHistory = () => {
+        return (
+            <View style={{backgroundColor: Color.containerBackgroundColor, flex: 1}}>
+
+                {
+                    this.props.loadingNanoCreditHistory ?
+                        (
+                            <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.renderNanoCreditList()
+
+                }
+            </View>
+        );
+    }
+
+    render() {
+        return (
+            <>
+                {(this.props.loading || this.props.loadingGetCommission) && this.renderLoader()}
+                {this.state.isDataSubmit && this.renderRefundNanoCreditResponse()}
+                {this.state.displayModalHistory && this.renderModalHistoryDetail()}
+                {this.state.displayPasswordModal && this.renderPasswordDialog()}
+                <ScrollView style={styles.container}>
+
+                    <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
+                        <Text
+                            style={[Typography.title3, Typography.semibold]}>
+                            {I18n.t('NANO_CREDIT_LIST')}
+                        </Text>
+                    </View>
+
+                    {
+                        this.renderNanoCreditHistory()
+                    }
+                    {/*                    <Text style={styles.subbigtitle}>{I18n.t('DEMAND_INFO')}</Text>
+
+                    <Animatable.View ref={(comp) => {
+                        this.idDemandAnim = comp
+                    }}>
+                        <Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
+                              label={I18n.t('ID_DEMAND')}
+                              iconColor={'#f95a25'}
+                              iconSize={20}
+                              value={this.state.idDemand}
+                              onChangeText={(idDemand) => {
+
+                                  this.setState({idDemand})
+                              }}
+                              style={styles.input}
+                        >
+                        </Fumi>
+                    </Animatable.View>
+
+
+                    <Animatable.View ref={(comp) => {
+                        this.passwordAnim = comp
+                    }}>
+                        <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
+                              label={I18n.t('PASSWORD')}
+                              iconColor={'#f95a25'}
+                              iconSize={20}
+                              secureTextEntry={true}
+                              value={this.state.password}
+                              onChangeText={(password) => {
+                                  this.setState({password})
+                              }}
+                              style={styles.input}
+                        >
+                        </Fumi>
+                    </Animatable.View>
+
+                    <Button style={styles.btnvalide}
+                            textStyle={styles.textbtnvalide}
+                            onPress={() => {
+                                this.onSubmitRefundNanoCredit();
+                            }}>
+                        {this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>*/}
+                </ScrollView>
+            </>
+        )
+    }
+}
+
+const maptStateToProps = state => ({
+
+    loading: state.refundCreditDemandReducer.loading,
+    result: state.refundCreditDemandReducer.result,
+    error: state.refundCreditDemandReducer.error,
+
+    loadingNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.loading,
+    resultNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.result,
+    errorNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+    refundCreditDemandUserAction,
+    refundCreditDemandUserReset,
+    getNanoCreditUserHistoryInProgressAction,
+    getNanoCreditUserHistoryInProgressReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(RefundNanoCreditUser);
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: Color.containerBackgroundColor,
+        paddingHorizontal: 20
+    },
+    textbtnvalide: {
+        color: 'white',
+        fontWeight: 'bold'
+    },
+    bigtitle: {
+        color: 'white',
+        fontSize: 20,
+        flex: 1,
+        fontWeight: 'bold',
+        textAlign: 'center',
+        margin: 20,
+    },
+    blockView: {
+        paddingVertical: 10,
+        borderBottomWidth: 1
+    },
+    subbigtitle: {
+        color: 'white',
+        fontSize: 17,
+        textAlign: 'center',
+        margin: 5,
+    },
+    btnvalide: {
+        marginTop: 20,
+        marginLeft: 20,
+        marginRight: 20,
+        borderColor: 'transparent',
+        backgroundColor: Color.accentLightColor,
+        height: 52
+    },
+    btnSubmit: {
+        marginTop: 20,
+        borderColor: 'transparent',
+        backgroundColor: Color.accentLightColor,
+        height: 52,
+        width: "30%",
+        marginLeft: 20,
+        marginRight: 20,
+    },
+    input: {
+        height: 60,
+        marginTop: responsiveHeight(2),
+        marginLeft: responsiveWidth(5),
+        marginRight: responsiveWidth(5),
+        borderRadius: 5,
+    },
+    circlePoint: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkDefault: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderBottomWidth: 1,
+        paddingVertical: 10,
+        marginTop: 5
+    },
+    transactionContainer: {
+        flexDirection: 'row',
+        paddingTop: 10,
+    },
+    containerTouch: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        shadowColor: Color.borderColor,
+        borderColor: Color.borderColor,
+        borderWidth: 0.5,
+        shadowOffset: {width: 1.5, height: 1.5},
+        shadowOpacity: 1.0,
+        elevation: 5,
+        borderRadius: 10,
+        backgroundColor: Color.cardBackgroundColor
+    },
+
+    contain: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    imageBanner: {
+        marginTop: 15,
+        marginLeft: 5,
+        width: Utils.scaleWithPixel(30),
+        height: Utils.scaleWithPixel(30)
+    },
+    content: {
+        height: Utils.scaleWithPixel(65),
+        paddingHorizontal: 10,
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        flex: 1,
+    },
+    contentTitle: {
+        paddingTop: 12,
+    },
+    contentService: {
+        paddingVertical: 10,
+        borderBottomWidth: 0.5,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    containField: {
+        padding: 10,
+        marginBottom: 20,
+        borderWidth: 0.5,
+        shadowOffset: {width: 1.5, height: 1.5},
+        shadowOpacity: 1.0,
+        elevation: 5,
+        flexDirection: "row",
+        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,
+        paddingLeft: 10,
+        paddingRight: 10,
+        alignItems: "center"
+    },
+});

screens/nano-credit/RefundNanoCreditUser.js

@@ -1,24 +1,38 @@
-import Button from 'apsl-react-native-button';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
 import React, {Component} from 'react';
-import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
+import {
-import * as Animatable from 'react-native-animatable';
+    ActivityIndicator,
+    Alert,
+    Platform,
+    ProgressBarAndroid,
+    ScrollView,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
 import I18n from 'react-native-i18n';
 import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
 import {ProgressDialog} from 'react-native-simple-dialogs';
-import { Fumi } from 'react-native-textinput-effects';
-import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import {connect} from 'react-redux';
+import omit from 'lodash/omit';
 import {bindActionCreators} from 'redux';
 import {Color} from '../../config/Color';
-import { FontWeight, Typography } from '../../config/typography';
-import { store } from "../../redux/store";
 import {IlinkEmitter} from '../../utils/events';
 import {readUser} from '../../webservice/AuthApi';
-import { createGroupAction, createGroupReset } from '../../webservice/NanoCreditApi';
-import { isNormalInteger } from '../../utils/UtilsFunction';
 import {refundCreditDemandUserAction, refundCreditDemandUserReset} from '../../webservice/user/NanoCreditApi';
+import {
+    getNanoCreditUserHistoryInProgressAction,
+    getNanoCreditUserHistoryInProgressReset,
+} from "../../webservice/NanoCreditApi";
+import {Typography} from "../../config/typography";
+import {cutStringWithoutDot, displayTransactionType, nanoCreditHistoryLabel} from "../../utils/UtilsFunction";
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import thousands from "thousands";
+import * as Utils from "../../utils/DeviceUtils";
+import Dialog from "react-native-dialog";
+
 let theme = require('../../utils/theme.json');
 let route = require('../../route.json');
 
@@ -39,7 +53,14 @@ class RefundNanoCreditUser extends Component {
             isDataSubmit: false,
             isModalConfirmVisible: false,
             isGroupToModify: false,
+            displayModalHistory: false,
+            historyItemDetail: null,
+            isDataHasLoaded: false,
+            displayPasswordModal: false,
+            wallet: this.props.navigation.state.params.wallet,
+
         };
+        this.props.getNanoCreditUserHistoryInProgressReset();
 
     }
 
@@ -74,6 +95,7 @@ class RefundNanoCreditUser extends Component {
             if (user) {
                 if (user !== undefined) {
                     this.setState({user});
+                    this.props.getNanoCreditUserHistoryInProgressAction(user.id);
                 }
             }
         });
@@ -115,6 +137,7 @@ class RefundNanoCreditUser extends Component {
                             text: I18n.t("OK"), onPress: () => {
                                 this.props.refundCreditDemandUserReset();
                                 IlinkEmitter.emit("refreshWallet");
+                                IlinkEmitter.emit("updateNanoCreditAccount");
                                 this.props.navigation.pop();
                             }
                         }
@@ -166,16 +189,345 @@ class RefundNanoCreditUser extends Component {
         )
     }
 
+    renderModalHistoryDetail = () => {
+        return (
+
+            <Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
+
+                <Dialog.Title>{I18n.t('DEMAND_DETAIL')}</Dialog.Title>
+                {
+                    <ScrollView persistentScrollbar={true}>
+                        <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>Type</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
+                                </View>
+                            </View>
+                            <View style={{flexDirection: 'row', marginTop: 10}}>
+                                <View style={{flex: 1}}>
+                                    <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
+                                </View>
+                                <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                    <Text
+                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
+                                </View>
+                            </View>
+                        </View>
+                    </ScrollView>
+
+                }
+                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
+                    this.setState({
+                        displayModalHistory: !this.state.displayModalHistory,
+                    });
+
+                }}/>
+
+                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
+
+                    this.setState({
+                        displayPasswordModal: !this.state.displayPasswordModal,
+                    });
+
+                }}/>
+
+            </Dialog.Container>
+
+        );
+    }
+
+    renderPasswordDialog = () => {
+        return (
+            <Dialog.Container useNativeDriver={true} visible={this.state.displayPasswordModal}>
+
+                <Dialog.Title>{I18n.t('PASSWORD')}</Dialog.Title>
+
+                <Dialog.Input placeholder={I18n.t('PLEASE_ENTER_THE_PASSWORD')}
+                              style={{borderBottomWidth: 1, borderBottomColor: Color.borderColor}}
+                              showSoftInputOnFocus={true}
+                              onChangeText={(password) => {
+                                  this.setState({password})
+                              }}
+                              secureTextEntry={true}
+                              value={this.state.password}
+                              onSubmitEditing={() => {
+                                  this.setState({
+                                      displayPasswordModal: false,
+                                      displayModalHistory: false,
+                                      isDataSubmit: true
+                                  });
+                                  this.props.refundCreditDemandUserAction({
+                                      id_user: this.state.user.id,
+                                      id_demande: this.state.historyItemDetail.id_demande,
+                                      password: this.state.password
+                                  });
+                              }}/>
+
+                <Dialog.Button label={I18n.t('CANCEL_LABEL')} onPress={() => {
+                    this.setState({displayPasswordModal: !this.state.displayPasswordModal});
+                }}/>
+                <Dialog.Button label={I18n.t('SUBMIT_LABEL')} onPress={() => {
+                    this.setState({
+                        displayPasswordModal: false,
+                        displayModalHistory: false,
+                        isDataSubmit: true
+                    });
+                    this.props.refundCreditDemandUserAction({
+                        id_user: this.state.user.id,
+                        id_demande: this.state.historyItemDetail.id_demande,
+                        password: this.state.password
+                    });
+                }}/>
+            </Dialog.Container>
+        );
+    }
+
+    renderNanoCreditItem = (item, index) => {
+
+        return (
+            <TouchableOpacity onPress={() => {
+                this.setState({displayModalHistory: true, historyItemDetail: item})
+            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
+                {
+                    Object.keys(omit(item, ['id', 'id_demande', 'agent', 'retrait_cash', 'date_remboursement_prevu', 'taxe', 'date_validation', 'duree_mois', 'interet', 'montant_rembourse', 'partiellement_rembourse',])).map((element, i) => (
+                        <View style={{alignItems: 'center'}} key={i}>
+
+                            <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
+                                {
+                                    isEqual(element, 'montant') ?
+                                        `  ${thousands(item[element], ' ')}`
+                                        : isEqual(element, 'date_creation') ?
+                                        cutStringWithoutDot(item[element], 16)
+                                        : item[element]
+                                }
+                            </Text>
+                        </View>
+                    ))
+                }
+            </TouchableOpacity>
+        );
+    }
+
+    renderNanoCreditList = () => {
+        const {errorNanoCreditHistory, resultNanoCreditHistory} = this.props;
+        if (errorNanoCreditHistory !== null) {
+            if (typeof errorNanoCreditHistory.data !== 'undefined') {
+                return (
+                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+                        <Text style={Typography.body1}>{errorNanoCreditHistory.data.error}</Text>
+                    </View>
+                )
+            } else {
+                return (
+                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+                        <Text style={Typography.body1}>{errorNanoCreditHistory}</Text>
+                    </View>
+                )
+            }
+        }
+
+
+        if (resultNanoCreditHistory !== null) {
+            if (resultNanoCreditHistory.response !== null) {
+                return (
+                    Array.isArray(resultNanoCreditHistory.response) && (resultNanoCreditHistory.response.length) > 0 ?
+                        (
+                            <>
+                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
+                                    {
+                                        nanoCreditHistoryLabel().map((item, index) => (
+                                            <View style={{alignItems: 'center'}} key={index}>
+                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
+                                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
+                                                    {I18n.t(item.label)}
+                                                </Text>
+                                            </View>
+                                        ))
+                                    }
+                                </View>
+                                {
+                                    resultNanoCreditHistory.response.map((item, index) => (
+                                        this.renderNanoCreditItem(item, index)
+                                    ))
+                                }
+                            </>
+                        ) :
+                        (
+                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
+                                <Text style={Typography.body1}>{I18n.t('NO_NANO_CREDIT')}</Text>
+                            </View>
+                        )
+                )
+            }
+        }
+    }
+
+    renderNanoCreditHistory = () => {
+        return (
+            <View style={{backgroundColor: Color.containerBackgroundColor, flex: 1}}>
+
+                {
+                    this.props.loadingNanoCreditHistory ?
+                        (
+                            <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.renderNanoCreditList()
+
+                }
+            </View>
+        );
+    }
+
     render() {
         return (
             <>
                 {(this.props.loading || this.props.loadingGetCommission) && this.renderLoader()}
                 {this.state.isDataSubmit && this.renderRefundNanoCreditResponse()}
+                {this.state.displayModalHistory && this.renderModalHistoryDetail()}
+                {this.state.displayPasswordModal && this.renderPasswordDialog()}
                 <ScrollView style={styles.container}>
 
-                         <Text style={styles.subbigtitle}>{I18n.t('DEMAND_INFO')}</Text>
+                    <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
+                        <Text
+                            style={[Typography.title3, Typography.semibold]}>
+                            {I18n.t('NANO_CREDIT_LIST')}
+                        </Text>
+                    </View>
 
-                         <Animatable.View ref={(comp) => { this.idDemandAnim = comp }}>
+                    {
+                        this.renderNanoCreditHistory()
+                    }
+                    {/*                    <Text style={styles.subbigtitle}>{I18n.t('DEMAND_INFO')}</Text>
+
+                    <Animatable.View ref={(comp) => {
+                        this.idDemandAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
                               label={I18n.t('ID_DEMAND')}
                               iconColor={'#f95a25'}
@@ -191,7 +543,9 @@ class RefundNanoCreditUser extends Component {
                     </Animatable.View>
 
 
-                         <Animatable.View ref={(comp) => { this.passwordAnim = comp }}>
+                    <Animatable.View ref={(comp) => {
+                        this.passwordAnim = comp
+                    }}>
                         <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                               label={I18n.t('PASSWORD')}
                               iconColor={'#f95a25'}
@@ -208,8 +562,10 @@ class RefundNanoCreditUser extends Component {
 
                     <Button style={styles.btnvalide}
                             textStyle={styles.textbtnvalide}
-                              onPress={() => { this.onSubmitRefundNanoCredit(); }}>
+                            onPress={() => {
-                              {this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>
+                                this.onSubmitRefundNanoCredit();
+                            }}>
+                        {this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>*/}
                 </ScrollView>
             </>
         )
@@ -221,12 +577,18 @@ const maptStateToProps = state => ({
     loading: state.refundCreditDemandReducer.loading,
     result: state.refundCreditDemandReducer.result,
     error: state.refundCreditDemandReducer.error,
+
+    loadingNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.loading,
+    resultNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.result,
+    errorNanoCreditHistory: state.getNanoCreditUserHistoryInProgressReducer.error,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
 
     refundCreditDemandUserAction,
     refundCreditDemandUserReset,
+    getNanoCreditUserHistoryInProgressAction,
+    getNanoCreditUserHistoryInProgressReset
 
 }, dispatch);
 
@@ -235,7 +597,8 @@ export default connect(maptStateToProps, mapDispatchToProps)(RefundNanoCreditUse
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-          backgroundColor: Color.primaryDarkColor,
+        backgroundColor: Color.containerBackgroundColor,
+        paddingHorizontal: 20
     },
     textbtnvalide: {
         color: 'white',
@@ -282,5 +645,98 @@ const styles = StyleSheet.create({
         marginLeft: responsiveWidth(5),
         marginRight: responsiveWidth(5),
         borderRadius: 5,
-     }
+    },
+    circlePoint: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        marginRight: 5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkDefault: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        borderBottomWidth: 1,
+        paddingVertical: 10,
+        marginTop: 5
+    },
+    transactionContainer: {
+        flexDirection: 'row',
+        paddingTop: 10,
+    },
+    containerTouch: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        shadowColor: Color.borderColor,
+        borderColor: Color.borderColor,
+        borderWidth: 0.5,
+        shadowOffset: {width: 1.5, height: 1.5},
+        shadowOpacity: 1.0,
+        elevation: 5,
+        borderRadius: 10,
+        backgroundColor: Color.cardBackgroundColor
+    },
+
+    contain: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    imageBanner: {
+        marginTop: 15,
+        marginLeft: 5,
+        width: Utils.scaleWithPixel(30),
+        height: Utils.scaleWithPixel(30)
+    },
+    content: {
+        height: Utils.scaleWithPixel(65),
+        paddingHorizontal: 10,
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        flex: 1,
+    },
+    contentTitle: {
+        paddingTop: 12,
+    },
+    contentService: {
+        paddingVertical: 10,
+        borderBottomWidth: 0.5,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    containField: {
+        padding: 10,
+        marginBottom: 20,
+        borderWidth: 0.5,
+        shadowOffset: {width: 1.5, height: 1.5},
+        shadowOpacity: 1.0,
+        elevation: 5,
+        flexDirection: "row",
+        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,
+        paddingLeft: 10,
+        paddingRight: 10,
+        alignItems: "center"
+    },
 });

screens/optionMenu/OptionsMenu.js

@@ -8,26 +8,23 @@
 
 
 import React, {Component} from 'react';
-import { Platform, StyleSheet, Alert, FlatList, Text, View, TouchableOpacity, Linking, AsyncStorage } from 'react-native';
+import {Alert, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import ActionButton from 'react-native-action-button';
 import Icon from 'react-native-vector-icons/Ionicons';
 import {responsiveFontSize, responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
-import HeaderMenu from './HeaderMenu';
-import { historiques as histo, first, useraccount, notification, configurations } from './../../route.json';
 import {primary, primaryDarkAdvanced} from './../../utils/theme.json';
-import { readUser, disconnect } from './../../webservice/AuthApi';
+import {disconnect, readUser} from './../../webservice/AuthApi';
 import I18n from 'react-native-i18n'
+import Button from 'apsl-react-native-button'
+import {IlinkEmitter} from "./../../utils/events"
+import {SafeAreaView} from 'react-navigation';
+import DeviceInfo from "react-native-device-info"
+import Configuration from "../../webservice/persistences/Configuration";
+import {ScrollView} from 'react-native-gesture-handler';
+
 const route = require("./../../route.json")
 require('./../../utils/Translations')
 var DBEvents = require('react-native-db-models').DBEvents
 let theme = require('./../../utils/theme.json')
-import Button from 'apsl-react-native-button'
-import { IlinkEmitter } from "./../../utils/events"
-import { DrawerItems, SafeAreaView } from 'react-navigation';
-import DeviceInfo from "react-native-device-info"
-import AppContainer, { AppNavigator } from "../../App";
-import Configuration from "../../webservice/persistences/Configuration";
-import { ScrollView } from 'react-native-gesture-handler';
 
 export default class OptionsMenu extends Component {
 
@@ -35,6 +32,7 @@ export default class OptionsMenu extends Component {
         statusBarColor: primaryDarkAdvanced,
     };
     commandeListe
+
     constructor(props) {
         super(props);
         this.state = this.initState();
@@ -95,13 +93,16 @@ export default class OptionsMenu extends Component {
 
 
     }
+
     updateLangue() {
         this.setState({lang: "change"})
         this.forceUpdate()
     }
+
     componentWillUnmount() {
 
     }
+
     onMenuNavigationEvent(menuOption) {
         /* Navigation.mergeOptions(this.props.componentId,{
              sideMenu: {
@@ -120,6 +121,7 @@ export default class OptionsMenu extends Component {
              }
          }*/
     }
+
     onUserConnect() {
         readUser().then((user) => {
             if (user !== null && user !== undefined) {
@@ -127,9 +129,11 @@ export default class OptionsMenu extends Component {
             }
         });
     }
+
     onNavigatorEvent(event) {
 
     }
+
     hideSideMenu() {
         /*  Navigation.mergeOptions("drawer", {
               sideMenu: {
@@ -140,6 +144,7 @@ export default class OptionsMenu extends Component {
               }
           });*/
     }
+
     initState() {
         return {
             user: null,
@@ -147,6 +152,7 @@ export default class OptionsMenu extends Component {
             currentId: 0,
         }
     }
+
     getGeolocatedUserMenu() {
         return [
             {title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
@@ -158,6 +164,7 @@ export default class OptionsMenu extends Component {
             , {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
             , {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
     }
+
     getSuperUserMenu() {
         return [
             {title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
@@ -168,6 +175,7 @@ export default class OptionsMenu extends Component {
             , {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
             , {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
     }
+
     getHyperUsermenu() {
         return [
             {title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
@@ -178,6 +186,7 @@ export default class OptionsMenu extends Component {
             , {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
             , {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
     }
+
     updateUser(user) {
         let menu = [];
         if (user !== undefined) {
@@ -210,6 +219,7 @@ export default class OptionsMenu extends Component {
 
         this.setState({user: user, menu: menu});
     }
+
     getUserMenu() {
         return [
             {title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
@@ -218,6 +228,7 @@ export default class OptionsMenu extends Component {
             , {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
             , {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
     }
+
     redirectToScreen = (item) => {
         console.log("Item Menu Click", item);
 
@@ -260,7 +271,7 @@ export default class OptionsMenu extends Component {
             || item === 'envoieCashVersAutreWalletAgent' || item === 'retraitCarteVersCashUser' || item === 'envoiCashVersCashAgent' || item === 'envoieCashVersCashAgent'
             || item === 'envoieCashVersCarteAgent' || item === 'modifyIdentificationUser' || item === 'createGroupNanoCredit' || item === 'groupNanoCredit' || item === 'demandeValidationGroupe'
             || item === 'adhererGroupNanoCredit' || item === 'myNanoCreditGroup' || item === 'askNanoCredit' || item === 'refundNanoCreditUser' || item === 'cautionNanoCreditAgent'
-               || item === 'epargnerArgentUser' || item === 'askNanoCredit' || item === 'casserEpargneUser') {
+            || item === 'epargnerArgentUser' || item === 'askNanoCredit' || item === 'casserEpargneUser' || item === 'envoieWalletToBankAgent') {
             return null
         } else {
             const color = this.state.currentId === item.id ? theme.accent : "grey"
@@ -290,7 +301,9 @@ export default class OptionsMenu extends Component {
     _onPress = ((item) => {
 
         this.setState({currentId: item.id})
-          let current = this.state.menu.filter((item) => { return item.active })[0]
+        let current = this.state.menu.filter((item) => {
+            return item.active
+        })[0]
         current.active = false;
         item.active = true;
         let newMenu = [];
@@ -444,59 +457,83 @@ export default class OptionsMenu extends Component {
                      }
                  }
              })
-     */ });
+      */
+    });
+
     getNameItems(item) {
 
         let icon = item
         switch (item) {
-               case "home": icon = I18n.t('MAP')
+            case "home":
+                icon = I18n.t('MAP')
                 break
-               case 'useraccount': icon = I18n.t('MY_ACCOUNT')
+            case 'useraccount':
+                icon = I18n.t('MY_ACCOUNT')
                 break
-               case 'walletSelect': icon = I18n.t('WALLET')
+            case 'walletSelect':
+                icon = I18n.t('WALLET')
                 break
-               case 'Historique': icon = I18n.t('CREDIT_MANAGE')
+            case 'Historique':
+                icon = I18n.t('CREDIT_MANAGE')
                 break
-               case "superviseurgroup": icon = I18n.t('GROUP_MANAGE')
+            case "superviseurgroup":
+                icon = I18n.t('GROUP_MANAGE')
                 break
-               case "updateinformation": icon = I18n.t("CHANGE_INFORMATION")
+            case "updateinformation":
+                icon = I18n.t("CHANGE_INFORMATION")
                 break
-               case 'notificationview': icon = I18n.t('NOTIFICATIONS')
+            case 'notificationview':
+                icon = I18n.t('NOTIFICATIONS')
                 break
-               case 'configuration': icon = I18n.t('CONFIGURATIONS')
+            case 'configuration':
+                icon = I18n.t('CONFIGURATIONS')
                 break;
-               case 'addNetwork': icon = I18n.t('ADD_NETWORK')
+            case 'addNetwork':
+                icon = I18n.t('ADD_NETWORK')
                 break
-               case 'about': icon = I18n.t('ABOUT')
+            case 'about':
+                icon = I18n.t('ABOUT')
         }
         return icon;
     }
+
     getIcon(item) {
         let icon = "md-map"
         switch (item) {
-               case "home": icon = "md-map"
+            case "home":
+                icon = "md-map"
                 break
-               case 'useraccount': icon = "md-person"
+            case 'useraccount':
+                icon = "md-person"
                 break
-               case 'walletSelect': icon = "md-wallet"
+            case 'walletSelect':
+                icon = "md-wallet"
                 break
-               case 'Historique': icon = "md-card"
+            case 'Historique':
+                icon = "md-card"
                 break
-               case "superviseurgroup": icon = "md-people"
+            case "superviseurgroup":
+                icon = "md-people"
                 break
-               case 'notificationview': icon = "md-notifications";
+            case 'notificationview':
+                icon = "md-notifications";
                 break
-               case "updateinformation": icon = "md-people"
+            case "updateinformation":
+                icon = "md-people"
                 break
-               case 'configuration': icon = 'md-settings'
+            case 'configuration':
+                icon = 'md-settings'
                 break;
-               case 'addNetwork': icon = "md-people"
+            case 'addNetwork':
+                icon = "md-people"
                 break
-               case 'about': icon = 'md-contacts';
+            case 'about':
+                icon = 'md-contacts';
                 break;
         }
         return icon;
     }
+
     render() {
         var name = this.state.user ? this.state.user.firstname : "";
         const surname = this.state.user ? this.state.user.lastname : "";
@@ -533,6 +570,7 @@ export default class OptionsMenu extends Component {
             return (<View/>)
         }
     }
+
     userDeconnect() {
         Alert.alert(
             I18n.t('DISCONNEXION'),
@@ -553,6 +591,7 @@ export default class OptionsMenu extends Component {
             {cancelable: false}
         )
     }
+
     watchUser() {
         readUser().then((user) => {
             if (user !== null && user !== undefined) {
@@ -621,8 +660,7 @@ const styles = StyleSheet.create({
     backgroundd_drawer: {
         backgroundColor: '#000',
     },
-     listbackground: {
+    listbackground: {},
-     },
     actionButtonIcon: {
         fontSize: 20,
         height: 22,

screens/wallet/OperateurOptionSelect.js

@@ -120,9 +120,9 @@ class OperateurOptionSelect extends Component {
                 }}>
                 <View style={{flexDirection: 'row', alignItems: 'center'}}>
                     <View>
-                        <Text style={Typography.body1}>{item.bank_name}</Text>
+                        <Text style={Typography.body1}>{item.operator_name}</Text>
                         <Text style={[Typography.footnote, Color.grayColor]} style={{marginTop: 5}}>
-                            {I18n.t('COUNTRY')}: {item.country}
+                            {I18n.t('COUNTRY')}: {`${item.operator_address}, ${item.country}`}
                         </Text>
                     </View>
                 </View>
@@ -177,7 +177,10 @@ class OperateurOptionSelect extends Component {
                 key={index}
                 style={[styles.paymentItem, {borderBottomColor: Color.borderColor}]}
                 onPress={() => {
-
+                    this.props.navigation.navigate(item.screen, {
+                        type: item.type,
+                        title: item.title
+                    })
                 }}>
 
                 <View style={{flexDirection: 'row', alignItems: 'center'}}>

screens/wallet/WalletOptionSelect.js

@@ -1,41 +1,57 @@
 import React, {Component} from 'react';
-import { StyleSheet, ScrollView, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
+import {
-import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet'
+    ActivityIndicator,
+    Platform,
+    ProgressBarAndroid,
+    ScrollView,
+    StatusBar,
+    StyleSheet,
+    Text,
+    TouchableOpacity,
+    View
+} from 'react-native';
+import {connectActionSheet} from '@expo/react-native-action-sheet'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useActionSheet } from '@expo/react-native-action-sheet'
-const route = require('./../../route.json');
-let slugify = require('slugify');
 import I18n from 'react-native-i18n';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import * as Utils from '../../utils/DeviceUtils';
-import { Images } from '../../config/Images';
 import {Color} from '../../config/Color';
-import { baseUrl } from '../../webservice/IlinkConstants';
 import {IlinkEmitter} from "../../utils/events";
-import { Provider, Appbar } from 'react-native-paper';
+import {Appbar, Provider} from 'react-native-paper';
 import {readUser} from '../../webservice/AuthApi';
-import { getNanoCreditAccountReset, getNanoCreditAccountAction, getNanoCreditUserHistoryAction, getNanoCreditUserHistoryReset } from '../../webservice/user/NanoCreditApi';
+import {
+    getNanoCreditAccountAction,
+    getNanoCreditAccountReset,
+    getNanoCreditUserHistoryAction,
+    getNanoCreditUserHistoryReset
+} from '../../webservice/user/NanoCreditApi';
 import _ from 'lodash';
 import Icons from 'react-native-vector-icons/Ionicons'
-import { FontWeight, Typography } from '../../config/typography';
+import {Typography} from '../../config/typography';
 import LottieView from 'lottie-react-native';
-import { isIlinkWorldWallet, optionDepotScreen, optionPaiementFactureSubScreen, displayTransactionType, displayToast, cutStringWithoutDot, cutString, transactionHistoryIlinkLabel } from '../../utils/UtilsFunction';
+import {
+    cutStringWithoutDot,
+    displayToast,
+    displayTransactionType,
+    transactionHistoryIlinkLabel
+} from '../../utils/UtilsFunction';
 import chunk from 'lodash/chunk';
 import thousands from 'thousands';
 import Tag from '../../components/Tag';
 import Dialog from "react-native-dialog";
-import { transactionHistoryNanoCreditLabel } from '../../utils/UtilsFunction';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {responsiveWidth} from 'react-native-responsive-dimensions';
 
+const route = require('./../../route.json');
+let slugify = require('slugify');
+
 class WalletOptionSelect extends Component {
 
     constructor(props) {
         super(props);
-          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
         this.state = {
             options: this.props.navigation.state.params.optionSelect.options,
             title: this.props.navigation.state.params.optionSelect.title,
@@ -114,7 +130,13 @@ class WalletOptionSelect extends Component {
         if (result !== null) {
             if (result.response !== null) {
                 this.setState({
-                         user: { ...this.state.user, balance_credit: result.response.balance_credit, balance_epargne: result.response.balance_epargne },
+                    balance_credit: result.response.balance_credit,
+                    balance_epargne: result.response.balance_epargne,
+                    user: {
+                        ...this.state.user,
+                        balance_credit: result.response.balance_credit,
+                        balance_epargne: result.response.balance_epargne
+                    },
                     isDataHasLoaded: true
                 });
                 console.log("AFTER", this.props);
@@ -244,15 +266,13 @@ class WalletOptionSelect extends Component {
                                                       displayToast(I18n.t('ALREADY_IDENTIFIED'));
                                                   else
                                                       this.redirectToRoute(options);
-                                        }
+                                              } else if (_.isEqual(options.screen, 'modifyIdentificationUser')) {
-                                        else if (_.isEqual(options.screen, 'modifyIdentificationUser')) {
                                                   if (!this.state.isIdentified)
                                                       displayToast(I18n.t('NOT_YET_IDENTIFY'));
                                                   else
                                                       this.redirectToRoute(options);
                                               }
-                                   }
+                                          } else
-                                   else
                                               this.redirectToRoute(options);
 
                                       }}
@@ -312,7 +332,8 @@ class WalletOptionSelect extends Component {
                                 {I18n.t('CREDIT_ACCOUNT')}
                             </Text>
                             {this.state.user !== null ?
-                                        <Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_credit, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                                <Text
+                                    style={[Typography.body2]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_credit, ' ')} ${this.state.wallet.currency_code}` : `${thousands(this.state.user.balance_credit, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                 : null}
                         </View>
                     </View>
@@ -336,14 +357,22 @@ class WalletOptionSelect extends Component {
                                 {I18n.t('SAVINGS_ACCOUNT')}
                             </Text>
                             {this.state.user !== null ?
-                                        <Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_epargne, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                                <Text
+                                    style={[Typography.body2]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_epargne, ' ')} ${this.state.wallet.currency_code}` : `${thousands(this.state.user.balance_epargne, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                 : null}
                         </View>
                     </View>
 
                 </View>
             </View>
-               <View style={{ flexDirection: 'row', marginTop: 30, marginBottom: 10, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <View style={{
+                flexDirection: 'row',
+                marginTop: 30,
+                marginBottom: 10,
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center'
+            }}>
                 <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{marginLeft: -15}}/>}
                      style={{paddingRight: 10, width: 120, borderRightWidth: 1, borderRightColor: Color.whiteColor}}
                      primary
@@ -365,8 +394,7 @@ class WalletOptionSelect extends Component {
                         <Text style={Typography.body1}>{errorHistory.data.error}</Text>
                     </View>
                 )
-               }
+            } else {
-               else {
                 return (
                     <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                         <Text style={Typography.body1}>{errorHistory}</Text>
@@ -414,7 +442,9 @@ class WalletOptionSelect extends Component {
     renderHistoryTransactionItem = (item, index) => {
 
         return (
-               <TouchableOpacity onPress={() => { this.setState({ displayModalHistory: true, historyItemDetail: item }) }} style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
+            <TouchableOpacity onPress={() => {
+                this.setState({displayModalHistory: true, historyItemDetail: item})
+            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                 {
 
                     !isNil(this.state.user.category) ?
@@ -470,7 +500,8 @@ class WalletOptionSelect extends Component {
                                             <Text style={[styles.body2]}>Type</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -478,7 +509,8 @@ class WalletOptionSelect extends Component {
                                             <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -486,7 +518,8 @@ class WalletOptionSelect extends Component {
                                             <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -494,7 +527,8 @@ class WalletOptionSelect extends Component {
                                             <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -502,7 +536,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -510,7 +545,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -518,7 +554,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -526,7 +563,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -534,7 +572,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -542,7 +581,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash + ' ' + this.state.wallet.currency_code}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -550,15 +590,17 @@ class WalletOptionSelect extends Component {
                                             <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
                                         <View style={{flex: 1}}>
-                                                       <Text tyle={[Typography.body2]}>{I18n.t('DEMAND_DATE')}</Text>
+                                            <Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_demande}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -566,7 +608,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
                                         </View>
                                     </View>
                                     <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -574,7 +617,8 @@ class WalletOptionSelect extends Component {
                                             <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
                                         </View>
                                         <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                       <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
+                                            <Text
+                                                style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
                                         </View>
                                     </View>
                                 </View>
@@ -586,7 +630,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>Type</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -594,7 +639,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -602,7 +648,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -610,7 +657,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -618,7 +666,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>Type</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -626,7 +675,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -634,7 +684,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -642,7 +693,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -650,7 +702,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -658,7 +711,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_fin}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_fin}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -666,7 +720,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
                                     </View>
                                 </View>
                             </View>
@@ -678,7 +733,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>Type</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -686,7 +742,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -694,7 +751,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -702,7 +760,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -710,7 +769,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -718,7 +778,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -726,7 +787,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -734,7 +796,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -742,7 +805,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -750,7 +814,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -758,7 +823,8 @@ class WalletOptionSelect extends Component {
                                         <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -766,7 +832,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -774,7 +841,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
                                     </View>
                                 </View>
                                 <View style={{flexDirection: 'row', marginTop: 10}}>
@@ -782,7 +850,8 @@ class WalletOptionSelect extends Component {
                                         <Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
                                     </View>
                                     <View style={{flex: 1, alignItems: 'flex-end'}}>
-                                                  <Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
+                                        <Text
+                                            style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
                                     </View>
                                 </View>
                             </View>
@@ -836,6 +905,7 @@ class WalletOptionSelect extends Component {
             </View>
         );
     }
+
     render() {
         !this.state.isDataHasLoaded && this.renderResultGetNanoCreditAccount();
         return (
@@ -850,7 +920,9 @@ class WalletOptionSelect extends Component {
 
                     <Appbar.Header dark={true} style={{backgroundColor: Color.primaryColor}}>
                         <Appbar.BackAction
-                                   onPress={() => { this.props.navigation.pop() }}
+                            onPress={() => {
+                                this.props.navigation.pop()
+                            }}
                         />
                         <Appbar.Content
                             title={I18n.t(this.state.title)}

screens/wallet/agent/EnvoieWalletToBankAgent.js

@@ -285,7 +285,7 @@ class EnvoieWalletToBankAgent extends Component {
                 id_wallet_agent: this.state.wallet.id,
                 id_wallet_network: this.state.wallet.id_network,
                 iban: codeIban,
-                id_bank: this.state.bank.id_bank,
+                id_bank: this.state.bank.id_operator,
                 montant: montant,
                 password: password
 

utils/UtilsFunction.js

@@ -223,6 +223,26 @@ export const transactionHistoryIlinkLabel = () => {
         },
     ]
 }
+export const nanoCreditHistoryLabel = () => {
+    return [
+        {
+            icon: 'arrow-expand',
+            label: 'HISTORY_TYPE'
+        },
+        {
+            icon: 'inbox-arrow-up',
+            label: 'ETAT'
+        },
+        {
+            icon: 'cash',
+            label: 'AMOUNT_LABEL'
+        },
+        {
+            icon: 'calendar-clock',
+            label: 'DATE'
+        },
+    ]
+}
 export const transactionHistoryNanoCreditLabel = () => {
     return [
         /*{

utils/i18n/en.json

@@ -155,6 +155,8 @@
   "DEPOSIT_TO_CARD": "Your Wallet to card",
   "DEPOSIT_TO_BANK": "Your Wallet to bank",
   "NANO_CREDIT": "Nano credit",
+  "NANO_CREDIT_LIST": "Nano credit list",
+  "NO_NANO_CREDIT": "No nano credit demand",
   "NANO_CREDIT_DESCRIPTION": "Nano credit description",
   "NANO_SANTE": "Nano health",
   "NANO_SANTE_DESCRIPTION": "Nano health description",
@@ -165,6 +167,7 @@
   "SAVE_MONEY": "Save money",
   "SAVE_MONEY_TYPE": "Savings type",
   "CAUTION_CREDIT": "Caution credit demand",
+  "CAUTIONNEMENT_DONE": "Caution done",
   "ID_DEMAND": "Demand ID",
   "DATE": "Date",
   "PAIEMENT_EAU_ELECTRICITY": "Water/electricity bill",

utils/i18n/fr.json

@@ -162,6 +162,8 @@
   "DEPOSIT_TO_CARD": "Votre Wallet vers carte",
   "DEPOSIT_TO_BANK": "Votre Wallet vers banque",
   "NANO_CREDIT": "Nano crédit",
+  "NANO_CREDIT_LIST": "Liste des nano crédit",
+  "NO_NANO_CREDIT": "Aucune demande de nano crédit",
   "NANO_CREDIT_DESCRIPTION": "Nano crédit iLink",
   "NANO_SANTE": "Nano santé",
   "NANO_SANTE_DESCRIPTION": "Nano santé iLink",
@@ -172,6 +174,7 @@
   "SAVE_MONEY_TYPE": "Type d'épargne",
   "REFUND_DONE": "Remboursement effectué",
   "CAUTION_CREDIT": "Cautionner une demande de crédit",
+  "CAUTIONNEMENT_DONE": "Cautionnement effectué",
   "ID_DEMAND": "Identifiant de la demande",
   "PAIEMENT_EAU_ELECTRICITY": "Paiement eau/électricité",
   "PAIEMENT_ECOLE": "Paiement école",

webservice/IlinkConstants.js

@@ -69,7 +69,9 @@ export const getNanoCreditAccount = testBaseUrl + '/walletService/groups/nanoCre
 export const getNanoCreditUserHistoryUrl = testBaseUrl + '/walletService/groups/nanoCredit/all_demands';
 export const getNanoCreditAgentHistoryUrl = testBaseUrl + '/walletService/groups/nanoCredit/guarantee_demands';
 export const getHyperviseurHistoriqueUrl = testBaseUrl + '/walletService/wallets/all_hyper_history';
-export const getBankUrl = testBaseUrl + '/walletService/wallets/users/banks';
+export const getBankUrl = testBaseUrl + '/walletService/wallets/users/operators/bank';
+export const getHistoryNanoPendingCreditUrl = testBaseUrl + '/walletService/groups/nanoCredit/demands_in_progress';
+export const getHistoryEpargnePendingUrl = testBaseUrl + '/walletService/groups/nanoCredit/savings/demands_in_progress';
 
 export const authKeyUrl = testBaseUrl + '/oauth/token';
 export const videoUrl = "https://www.youtube.com/watch?v=wwGPDPsSLWY";

webservice/NanoCreditApi.js

@@ -1,9 +1,45 @@
-
 import axios from "axios";
 import I18n from 'react-native-i18n';
-import { fetchCreateGroupError, fetchCreateGroupPending, fetchCreateGroupReset, fetchCreateGroupSuccess, fetchTreatDemandsGroupPending, fetchTreatDemandsGroupSuccess, fetchTreatDemandsGroupError, fetchTreatDemandsGroupReset, fetchJoinGroupPending, fetchJoinGroupSuccess, fetchJoinGroupError, fetchJoinGroupReset, fetchAskNanoCreditPending, fetchAskNanoCreditSuccess, fetchAskNanoCreditError, fetchAskNanoCreditReset, fetchGetNanoCreditDemandDurationPending, fetchGetNanoCreditDemandDurationSuccess, fetchGetNanoCreditDemandDurationError, fetchGetNanoCreditDemandDurationReset } from "../redux/actions/NanoCreditAction";
+import {
+    fetchAskNanoCreditError,
+    fetchAskNanoCreditPending,
+    fetchAskNanoCreditReset,
+    fetchAskNanoCreditSuccess,
+    fetchCreateGroupError,
+    fetchCreateGroupPending,
+    fetchCreateGroupReset,
+    fetchCreateGroupSuccess,
+    fetchGetEpargneInProgressError,
+    fetchGetEpargneInProgressPending,
+    fetchGetEpargneInProgressReset,
+    fetchGetEpargneInProgressSuccess,
+    fetchGetNanoCreditDemandDurationError,
+    fetchGetNanoCreditDemandDurationPending,
+    fetchGetNanoCreditDemandDurationReset,
+    fetchGetNanoCreditDemandDurationSuccess,
+    fetchGetNanoCreditUserHistoryInProgressError,
+    fetchGetNanoCreditUserHistoryInProgressPending,
+    fetchGetNanoCreditUserHistoryInProgressReset,
+    fetchGetNanoCreditUserHistoryInProgressSuccess,
+    fetchJoinGroupError,
+    fetchJoinGroupPending,
+    fetchJoinGroupReset,
+    fetchJoinGroupSuccess,
+    fetchTreatDemandsGroupError,
+    fetchTreatDemandsGroupPending,
+    fetchTreatDemandsGroupReset,
+    fetchTreatDemandsGroupSuccess
+} from "../redux/actions/NanoCreditAction";
 import {store} from "../redux/store";
-import { groupUrl, getNanoCreditDemandDureationUrl, treatDemandUrl, joinGroupUrl, cancelDemandUrl, askNanoCreditUrl } from "./IlinkConstants";
+import {
+    askNanoCreditUrl,
+    cancelDemandUrl,
+    getHistoryNanoPendingCreditUrl,
+    getNanoCreditDemandDureationUrl,
+    groupUrl,
+    joinGroupUrl,
+    treatDemandUrl
+} from "./IlinkConstants";
 
 /**
  *
@@ -235,3 +271,79 @@ export const getNanoCreditDemandDurationReset = () => {
         dispatch(fetchGetNanoCreditDemandDurationReset());
     }
 }
+
+
+export const getEpargneInProgressAction = (data) => {
+
+    const auth = store.getState().authKeyReducer;
+    const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+    return dispatch => {
+        dispatch(fetchGetEpargneInProgressPending());
+
+        axios({
+            url: `${getHistoryNanoPendingCreditUrl}`,
+            method: 'POST',
+            data,
+            headers: {
+                'Authorization': authKey,
+                'X-Localization': I18n.currentLocale()
+            }
+        })
+            .then(response => {
+                console.log(response);
+                dispatch(fetchGetEpargneInProgressSuccess(response));
+            })
+            .catch(error => {
+                if (error.response)
+                    dispatch(fetchGetEpargneInProgressError(error.response));
+                else if (error.request)
+                    dispatch(fetchGetEpargneInProgressError(error.request))
+                else
+                    dispatch(fetchGetEpargneInProgressError(error.message))
+            });
+    }
+}
+
+
+export const getEpargneInProgressReset = () => {
+    return dispatch => {
+        dispatch(fetchGetEpargneInProgressReset());
+    }
+}
+export const getNanoCreditUserHistoryInProgressAction = (data) => {
+
+    const auth = store.getState().authKeyReducer;
+    const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+    return dispatch => {
+        dispatch(fetchGetNanoCreditUserHistoryInProgressPending());
+
+        axios({
+            url: `${getHistoryNanoPendingCreditUrl}/${data}`,
+            method: 'GET',
+            headers: {
+                'Authorization': authKey,
+                'X-Localization': I18n.currentLocale()
+            }
+        })
+            .then(response => {
+                console.log(response);
+                dispatch(fetchGetNanoCreditUserHistoryInProgressSuccess(response));
+            })
+            .catch(error => {
+                if (error.response)
+                    dispatch(fetchGetNanoCreditUserHistoryInProgressError(error.response));
+                else if (error.request)
+                    dispatch(fetchGetNanoCreditUserHistoryInProgressError(error.request))
+                else
+                    dispatch(fetchGetNanoCreditUserHistoryInProgressError(error.message))
+            });
+    }
+}
+
+export const getNanoCreditUserHistoryInProgressReset = () => {
+    return dispatch => {
+        dispatch(fetchGetNanoCreditUserHistoryInProgressReset());
+    }
+}