wallet user and agent update

App.js

@@ -47,6 +47,8 @@ import { store, persistor } from './redux/store';
 import { Provider } from 'react-redux';
 import WalletDepot from './screens/wallet/WalletDepot';
 import WalletRetrait from './screens/wallet/WalletRetrait';
+import CreateIdentification from './screens/identification/createIdentification';
+import WalletDetailUser from './screens/wallet/WalletDetailUser';
 
 const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -80,9 +82,11 @@ const AppStack = createDrawerNavigator({
                navigationOptions: {
                },
           },
+          walletSelect: WalletSelect,
           notificationview: Notifications,
           configuration: Configurations,
-          about: About
+          about: About,
+          walletDetailUser: WalletDetailUser
 
      })
 }, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })
@@ -92,6 +96,7 @@ const AppAgentStack = createDrawerNavigator({
           home: Home,
           useraccount: UserAccount,
           walletSelect: WalletSelect,
+          createIdentification: CreateIdentification,
           Historique:
           {
                screen: createBottomTabNavigator({ myDemand: MyHistory }, {

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

@@ -54,6 +54,9 @@
   "CARD_NUMBER_ERROR": "Card number incorrect",
   "AMOUNT_LABEL": "Amount",
   "WITHDRAWAL": "Withdrawal",
+  "NANO_CREDIT": "Nano credit",
+  "NANO_SANTE": "Nano health",
+  "PAIEMENT_FACTURE": "Bill payment",
   "DEMAND_SEND": "Demand send",
   "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
   "COMMISSION_ACCOUNT_TITLE": "Commission account",
@@ -63,6 +66,7 @@
   "CONFIRM_TRANSFER_COMMISSION": "Confirm commission transfer",
   "CREATION_DATE": "Creation date",
   "PRINCIPAL_ACCOUNT_TITLE": "Principal account",
+  "NUMERO_COMPTE": "Account number",
   "NO_WALLET_ACTIVED": "No wallet is activated for your account",
   "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
   "PRINCIPAL": "Principal",
@@ -94,6 +98,7 @@
   "GROUP_MEMBERS": "The group members",
   "NAME": "Last name(s)",
   "FIRSTNAME": "First name(s) ",
+  "AND": "and",
   "ADMIN": "Administrator",
   "SUPER_ADMIN": "Super administrator",
   "GEOLOCATED": "Geo located agent",
@@ -113,6 +118,13 @@
   "PHONE_NUMBER": "Phone",
   "CHOICE_NETWORK": "Choose a network",
   "COUNTRY_CHOICE": "Choose a country",
+  "CHOICE_TOWN": "Choose a town",
+  "PIECE_IDENTITE": "Identity piece",
+  "IDENTITY_CARD": "Identity card",
+  "PASSEPORT": "Passeport",
+  "OTHER_IDENTITY_PIECE": "Other",
+  "IDENTITY_NUMBER": "N° of piece",
+  "IDENTITY_PIECE_EXPIRY_DATE": "Expiry date",
   "LAST_STEP": "Last step",
   "ACTIVE_ACCOUNT": "Activate the account !",
   "ACTIVE_USER": "Active",
@@ -255,6 +267,13 @@
   "FREE": "Available",
   "SAVED": "Registered",
   "ACCOUNT_INFO": "My Account Information",
+  "IDENTIFICATION": " Identification",
+  "CREATION_IDENTIFICATION": "Creation",
+  "CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
+  "VALIDATE_IDENTIFICATION": "Validation",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Validate an identi...",
+  "CREATE_IDENTIFICATION_TITLE": "Please fill in customer information",
+  "DATE_NAISSANCE": "Date of birth",
   "REGISTER_YOURSELF": "Register",
   "REGISTRATION": "Registration",
   "CHANGE_LANG_LABEL": "Change language",

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

@@ -58,11 +58,15 @@
   "PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
   "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
   "WITHDRAWAL": "Retrait",
+  "NANO_CREDIT": "Nano crédit",
+  "NANO_SANTE": "Nano santé",
+  "PAIEMENT_FACTURE": "Paiement de facture",
   "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
   "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
   "CONFIRM": "Confirmer",
   "CONFIRM_TRANSFER_COMMISSION": "Confirmer le transfert des commissions",
   "PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
+  "NUMERO_COMPTE": "N° de compte",
   "COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal",
   "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
   "TRANSACTIONS": "Transactions",
@@ -97,6 +101,7 @@
   "GROUP_MEMBERS": "Les membres du groupe",
   "NAME": "Nom (s)",
   "FIRSTNAME": "Prénom (s) ",
+  "AND": "et",
   "ADMIN": "Administrateur",
   "SUPER_ADMIN": "Super administrateur",
   "GEOLOCATED": "Agent géo-localisé",
@@ -117,6 +122,13 @@
   "PHONE_NUMBER": "Numéro de téléphone",
   "CHOICE_NETWORK": "Choisissez un réseau",
   "COUNTRY_CHOICE": "Choisissez un pays",
+  "CHOICE_TOWN": "Choisissez une ville",
+  "PIECE_IDENTITE": "Pièce d'identité",
+  "IDENTITY_CARD": "Carte d'identité",
+  "PASSEPORT": "Passeport",
+  "OTHER_IDENTITY_PIECE": "Autre",
+  "IDENTITY_NUMBER": "N° de la pièce",
+  "IDENTITY_PIECE_EXPIRY_DATE": "Date d'expiration",
   "LAST_STEP": "Derniere étape",
   "ACTIVE_ACCOUNT": "Activez le compte !",
   "ACTIVE_USER": "Activer",
@@ -257,6 +269,14 @@
   "FREE": "disponibles",
   "SAVED": "enregistrés",
   "ACCOUNT_INFO": " Information sur mon compte",
+  "IDENTIFICATION": " Identification",
+  "CREATION_IDENTIFICATION": "Création",
+  "CREATION_IDENTIFICATION_CLIENT": "M'identifier",
+  "CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
+  "VALIDATE_IDENTIFICATION": "Validation",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
+  "CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
+  "DATE_NAISSANCE": "Date de naissance",
   "REGISTER_YOURSELF": "Enregistrez-vous",
   "REGISTRATION": "Inscription",
   "CHANGE_LANG_LABEL": "Changer la langue",

screens/account/UserAccount.js

@@ -1,17 +1,21 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Text, Image, StatusBar, ScrollView, ProgressBarAndroid, Alert } from 'react-native';
+import { StyleSheet, View, Text, Image, StatusBar, TouchableOpacity, ScrollView, ProgressBarAndroid, Alert } from 'react-native';
 let theme = require('./../../utils/theme.json');
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { readUser, deleteUser } from './../../webservice/AuthApi';
 import { getAgentNetworksList } from './../../webservice/NetworkApi'
 import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
 import MapView, { Marker } from 'react-native-maps';
-import Icon from 'react-native-vector-icons/MaterialIcons'
+import * as Utils from '../../utils/DeviceUtils';
-import Button from 'apsl-react-native-button'
+import Button from 'apsl-react-native-button';
+import { Typography, FontWeight } from '../../config/typography';
 import CardView from "react-native-cardview";
 import I18n from 'react-native-i18n'
 import { Header } from 'react-native-elements'
 import { IlinkEmitter } from "../../utils/events";
 import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
+import { Color } from '../../config/Color';
+let route = require('../../route.json');
 
 require('./../../utils/Translations')
 const height = responsiveHeight(100) - 250;
@@ -101,7 +105,6 @@ export default class UserAccount extends Component {
           this.setState({ user: user });
      }
 
-
      initState() {
           return {
                user: {},
@@ -371,7 +374,49 @@ const styles = StyleSheet.create({
      container: {
           flex: 1,
           backgroundColor: '#EEEEEE',
-
+     },
+     contain: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+     },
+     identificationOptionMenuContainer: {
+          flexDirection: 'row',
+          paddingTop: 10,
+          paddingLeft: 10,
+          paddingRight: 10,
+     },
+     containerTouch: {
+          flex: 1,
+          flexDirection: 'row',
+          marginRight: 2.5,
+          alignItems: 'center',
+          shadowColor: Color.borderColor,
+          borderColor: Color.borderColor,
+          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(60),
+          paddingHorizontal: 10,
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          flex: 1,
+     },
+     contentTitle: {
+          paddingTop: 5,
      },
      textInformation: {
           fontSize: 16,

screens/home/Home.js

@@ -105,9 +105,7 @@ class Home extends BaseScreen {
                     this.setState({ isNeedLoadMore: false, isLoadingMap: true })
                     const camera = await this.mapRef.getCamera()
                     const zoom = camera.zoom - 10
-                    let res = []
+                    let res = [];
-
-                    this.setState({ isLoadingMap: true });
 
                     if (this.state.filternetworkTemp !== undefined) {
                          let net = this.state.filternetworkTemp.id
@@ -117,6 +115,8 @@ class Home extends BaseScreen {
                     }
 
                     if (res.length > 0) {
+                         this.setState({ isLoadingMap: false })
+
                          let reseau = res[0];
                          const pos = { longitude: user.longitude, latitude: user.latitude }
                          try {
@@ -1514,7 +1514,7 @@ class Home extends BaseScreen {
           const user = usr === null ? this.state.user : usr
           let { myNetwork } = this.state;
 
-          this.setState({ filternetwork: myNetwork, page: 0, filternetworkTemp: myNetwork, loadingDialog: true })
+          this.setState({ filternetwork: myNetwork, page: 0, increasePas: 0, filternetworkTemp: myNetwork, loadingDialog: true })
           return new Promise(() => {
                if (myNetwork !== undefined) {
                     this.loadingMarkers(this.state.myPosition, myNetwork, this.state.value).then((data) => {
@@ -2021,16 +2021,16 @@ class Home extends BaseScreen {
                               return geolib.getDistance(myPosition, location) <= (value * 1000)
                                    && mark.network === filternetwork.name
                          })
-                    this.setState({ currentNetworkSize: currentNetwork.length, currentNetworkMarkers: currentNetwork })
+                    this.setState({ currentNetworkSize: currentNetwork.length, showProgress: false, currentNetworkMarkers: currentNetwork })
                } catch (e) {
                     console.debug("after " + e.message)
                }
-               /*                if (this.state.user.category !== 'geolocated' && this.state.user.category !== 'super'
+               if (this.state.user.category !== 'geolocated' && this.state.user.category !== 'super'
                     && this.state.user.category !== 'hyper') {
                     if (data.length === 0) {
                          this.loadMoreIfHasNoPoint();
                     }
-                              } */
+               }
                console.debug("data:", data, "value" + value * 1000)
                resolve(data)
           })
@@ -2038,37 +2038,38 @@ class Home extends BaseScreen {
 
      loadMoreIfHasNoPoint = () => {
 
-          Alert.alert(
+          /*           Alert.alert(
-               I18n.t("NO_NETWORK_MARKER"),
+                         'INFORMATIONS',
-               `${I18n.t('LAUNCH_POINT_WITH_FILTER')} ${this.filterOptions[this.state.increasePas + 1].label} ?`,
+                         '' + this.state.increasePas
+                         ,
                          [
                               { text: I18n.t("NO"), onPress: () => { } },
                               {
-                         text: I18n.t("YES"), onPress: () => {
+                                   text: I18n.t("YES"), onPress: () => { }
-
-                              if (this.state.increasePas === this.filterOptions.length - 1) {
-
-                                   this.setState({ snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_MARKER') })
-                                   setTimeout(() => {
-                                        this.setState({ snack_visible: false })
-                                   }, 5000)
-                              }
-                              else {
-                                   this.setState({ increasePas: this.state.increasePas + 1, isLoadingMap: true });
-                                   this.onLoadMore();
-                              }
-
-                         }
                               }
           
                          ],
                          { cancelable: false }
-          )
+                    ); */
+          if (this.state.increasePas === this.filterOptions.length - 1) {
+               this.setState({ increasePas: 0, snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_MARKER'), isLoadingMap: false })
+               setTimeout(() => {
+                    this.setState({ snack_visible: false })
+               }, 5000);
+          }
+          else {
+               if (this.state.increasePas + 1 !== this.filterOptions.length) {
+                    this.setState({ increasePas: this.state.increasePas + 1, isLoadingMap: true }, () => {
+                         this.onLoadMore();
+                    });
+               }
+          }
+
      }
 
      treatNewData(pos, data, isFilter = false) {
-
+          /* 
-          this.setState({ isLoadingMap: false });
+                    this.setState({ isLoadingMap: false }); */
           let items = data;
 
           if (data.length > 0) {
@@ -2082,25 +2083,16 @@ class Home extends BaseScreen {
                if (items.length < this.state.currentNetworkSize) {
                     this.setState({ isNeedLoadMore: true })
                } else {
-                    /*                     if (isFilter && items.length <= 0) {
+                    if (isFilter && items.length <= 0) {
+                         this.setState({ increasePas: 0, showProgress: false }, () => {
                               this.loadMoreIfHasNoPoint();
-                                        } */
+                         });
+                    }
                     this.setState({ isNeedLoadMore: false })
 
                }
-          } else if (isFilter) {
-               this.setState({ markers: data });
-               this.setState({
-                    snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_CORRESPONDING')
-
-               })
-               setTimeout(() => {
-                    this.setState({ snack_visible: false })
-               }, 5000)
-
-
           } else {
-               this.setState({ markers: data });
+               this.setState({ showProgress: false, markers: data });
           }
      }
 

screens/identification/createIdentification.js

@@ -0,0 +1,445 @@
+import React, { Component } from 'react';
+import { Alert, StyleSheet, Text, View, Image, ScrollView, Platform, ProgressBarAndroid, PermissionsAndroid, Keyboard } from 'react-native';
+import PropTypes from 'prop-types';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
+import { Fumi, Kaede } from 'react-native-textinput-effects'
+import * as Animatable from 'react-native-animatable';
+import Button from 'apsl-react-native-button';
+let theme = require('./../../utils/theme.json');
+let route = require('./../../route.json');
+import I18n from 'react-native-i18n';
+import isEqual from 'lodash/isEqual';
+import { Color } from '../../config/Color';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Dropdown } from 'react-native-material-dropdown';
+import { getPositionInformation } from './../../webservice/MapService';
+import { getCountryNetwork, createGeolocatedAccount, createUserAccount, getTownInformationName, getListCountriesActive, getCodeInformation, readUser } from './../../webservice/AuthApi';
+import { SinglePickerMaterialDialog, MultiPickerMaterialDialog, MaterialDialog } from "react-native-material-dialog";
+import Geolocation from 'react-native-geolocation-service';
+import { identityPieces } from '../../utils/UtilsFunction';
+const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
+const moment = require('moment');
+
+export default class CreateIdentification extends Component {
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               password: null,
+               enterPhone: null,
+               nameanim: null,
+               dateNaissance: new Date(),
+               networksinglePickerVisible: false,
+               passwordanim: null,
+               confirmpassanim: null,
+               isLoging: false,
+               countries: [],
+               town: [],
+               identityPieces: identityPieces(),
+               identityPiecesName: (identityPieces()[0]).name,
+               snackVisible: false,
+               snackText: '',
+               disableNetwork: false,
+               networks: [],
+               showPickerDateNaissance: false,
+               modalVisible: true,
+               select_network: I18n.t("SELECT_NETWORK"),
+               user: null
+          };
+          this.dateNaissanceRef = null;
+          this.surnameanim = null;
+          this.dateNaissanceFumiProps = {};
+     }
+
+     componentDidMount() {
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+          if (Platform.OS === 'android') {
+               this.requestCameraPermission();
+          } else {
+               this.watchLocation();
+          }
+     }
+
+     componentWillUpdate(nextProps, nextState) {
+          if (this.state.showPickerDateNaissance)
+               this.dateNaissanceFumiProps.value = moment(nextState.dateNaissance).format('DD-MM-YYYY');
+     }
+
+     componentWillUnmount() {
+          this.mounted = false;
+          if (this.watchID) Geolocation.clearWatch(this.watchID);
+     }
+
+     showErrorDialog() {
+          this.setState({ modalDialog: false })
+          Aler.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
+               "et que vous êtes connecté à internet puis ressayer", [{
+                    text: "Recommencer", onPress: () => {
+                         this.watchLocation()
+                    }
+               }, { text: "Annuler", onPress: () => { this.props.navigation.popToTop() } }])
+     }
+
+     async watchLocation() {
+          Geolocation.getCurrentPosition((position) => {
+               this.treatPosition(position)
+          }, (e) => {
+               this.showErrorDialog()
+          }, this.props.geolocationOptions);
+          if (!this.watchID) {
+               Geolocation.watchPosition((position) => { this.treatPosition(position) }, (e) => { this.showErrorDialog() }, this.props.geolocationOptions)
+          }
+     }
+
+     async requestCameraPermission() {
+          try {
+               const granted = await PermissionsAndroid.request(
+                    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+                    {
+                         'title': 'Cool Photo App Camera Permission',
+                         'message': 'Cool Photo App needs access to your camera ' +
+                              'so you can take awesome pictures.'
+                    }
+               )
+               if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+                    this.watchLocation();
+               } else {
+                    this.setState({ modalDialog: false })
+                    Alert.alert("Echec à l'autorisation",
+                         "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
+                         [{
+                              text: "Ok", onPress: () => {
+                                   this.props.navigation.popToTop()
+                              }
+                         }])
+               }
+          } catch (err) {
+               this.setState({ modalDialog: false })
+               Alert.alert("Une erreur est Survenue",
+                    "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
+                    [{
+                         text: "Ok", onPress: () => {
+                              BackHandler.exitApp()
+                         }
+                    }])
+          }
+     }
+
+     treatPosition(position) {
+          const myLastPosition = this.state.myPosition;
+          const myPosition = position.coords;
+
+          if (!isEqual(myPosition, myLastPosition)) {
+               getPositionInformation(myPosition).then((response) => {
+                    if (response.results !== undefined) {
+                         if (response.results.length > 0) {
+                              let most = response.results[0]
+                              let { address_components, formatted_address, place_id } = most
+                              this.setState({ address: address_components, textadress: formatted_address, place: place_id })
+
+                              let results = response.results;
+                              let shortcountry;
+                              let mcountry;
+                              for (let i = 0; i < results[0].address_components.length; i++) {
+                                   for (let j = 0; j < results[0].address_components[i].types.length; j++) {
+                                        if (results[0].address_components[i].types[j] === "country") {
+                                             mcountry = results[0].address_components[i];
+                                             shortcountry = mcountry.short_name;
+                                             this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
+                                        } else if (results[0].address_components[i].types[j] === "locality") {
+                                             const name = results[0].address_components[i].short_name;
+                                             this.setState({ townName: name });
+                                             getTownInformationName(name).then((result) => {
+                                                  let town = null;
+                                                  if (result instanceof Array) {
+                                                       town = result[0];
+                                                  } else
+                                                       town = result;
+
+                                                  this.setState({ modalVisible: false, town: new Array(town) });
+                                             })
+                                        }
+                                   }
+                              }
+                              getListCountriesActive().then((cnt) => {
+                                   this.setState({ countries: cnt })
+                                   console.debug(cnt, shortcountry);
+                                   var found = false
+                                   for (let i of cnt) {
+                                        if (i.code_country === shortcountry) {
+                                             found = true;
+                                             this.setState({ modalVisible: false, indicatif: i.code_dial, country: i.name })
+                                             /*                                              this.getNetworks(i.code_dial); */
+                                        }
+                                   }
+                                   if (!found) {
+                                        Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{ text: "OK" }]);
+
+                                   }
+                              })
+
+
+                         }
+
+                    }
+               }).catch((e) => {
+                    this.showErrorDialog()
+               });
+               this.setState({ myPosition: myPosition });
+               /*                if (this.mapRef !== undefined && this.mapRef !== null) {
+                                   this.mapRef.animateToCoordinate({
+                                        latitude: myPosition.latitude,
+                                        longitude: myPosition.longitude
+                                   }, 1000);
+                                   this.mapRef.animateToRegion({
+                                        latitude: myPosition.latitude,
+                                        longitude: myPosition.longitude,
+                                        latitudeDelta: 0.03,
+                                        longitudeDelta: 0.01,
+                                   }, 1000)
+                              } */
+          }
+
+     }
+
+     onChange = (event, selectedDate) => {
+          const currentDate = selectedDate || this.state.dateNaissance;
+          this.setState({
+               showPickerDateNaissance: Platform.OS === 'ios' || false,
+               dateNaissance: currentDate,
+          });
+     };
+
+     renderLoaderModal() {
+          return (<MaterialDialog
+               visible={this.state.modalVisible}
+               title={I18n.t("LOADING_INFO")}
+          >
+               <View style={{ justifyContent: 'center', alignItems: 'center' }}>
+                    <Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
+                    <ProgressBarAndroid />
+               </View>
+          </MaterialDialog>)
+     }
+
+     renderDateNaissancePicker = () => {
+          return (
+               <DateTimePicker
+                    testID="dateTimePicker"
+                    timeZoneOffsetInMinutes={0}
+                    is24Hour={true}
+                    value={this.state.dateNaissance}
+                    mode='date'
+                    maximumDate={new Date()}
+                    display="calendar"
+                    onChange={this.onChange}
+               />
+          );
+     }
+
+     render() {
+          console.log("STATE", this.state);
+          const { showPickerDateNaissance } = this.state;
+          return (
+               <>
+                    {this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
+                    {this.state.modalVisible && this.renderLoaderModal()}
+                    <ScrollView style={styles.container}>
+                         <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
+                         <Animatable.View ref={(comp) => { this.nameanim = comp }}>
+                              <Fumi ref={(ref) => { this.dateNaissance = ref }}
+                                   iconClass={FontAwesomeIcon} iconName={'user'}
+                                   label={`${I18n.t('NAME')} ${I18n.t('AND')} ${I18n.t('FIRSTNAME')}`}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   onChangeText={(text) => {
+                                        let use = this.state.user;
+                                        use.lastname = text;
+                                        this.setState({ user: use })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+                         <Animatable.View ref={(comp) => { this.surnameanim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
+                                   label={I18n.t('DATE_NAISSANCE')}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   style={styles.input}
+                                   onFocus={() => {
+                                        Keyboard.dismiss();
+                                        this.setState({ showPickerDateNaissance: true })
+                                   }}
+                                   {...this.dateNaissanceFumiProps}>
+                              </Fumi>
+                         </Animatable.View>
+                         <View
+                              style={{
+                                   width: responsiveWidth(90),
+                                   height: 60,
+                                   marginTop: 20,
+                                   alignSelf: 'center',
+                                   borderRadius: 10,
+                                   paddingLeft: 20,
+                                   paddingRight: 20,
+                                   backgroundColor: 'white'
+                              }}>
+                              <Dropdown
+                                   label={I18n.t('COUNTRY_CHOICE')}
+                                   data={this.state.countries}
+                                   useNativeDriver={true}
+                                   value={this.state.country === null ? "" :
+                                        this.state.country}
+                                   onChangeText={(value, index, data) => {
+                                        this.setState({ country: value });
+                                   }}
+                                   valueExtractor={(value) => { return value.name }}
+                                   labelExtractor={(value) => { return value.name }}
+                              />
+                         </View>
+                         <View
+                              style={{
+                                   width: responsiveWidth(90),
+                                   height: 60,
+                                   marginTop: 20,
+                                   alignSelf: 'center',
+                                   borderRadius: 10,
+                                   paddingLeft: 20,
+                                   paddingRight: 20,
+                                   backgroundColor: 'white'
+                              }}>
+                              <Dropdown
+                                   label={I18n.t('CHOICE_TOWN')}
+                                   data={this.state.town}
+                                   useNativeDriver={true}
+                                   value={this.state.townName === null ? "" :
+                                        this.state.townName}
+                                   onChangeText={(value, index, data) => {
+                                        this.setState({ townName: value });
+                                   }}
+                                   valueExtractor={(value) => { return value.name }}
+                                   labelExtractor={(value) => { return value.name }}
+                              />
+                         </View>
+                         <View
+                              style={{
+                                   width: responsiveWidth(90),
+                                   height: 60,
+                                   marginTop: 20,
+                                   alignSelf: 'center',
+                                   borderRadius: 10,
+                                   paddingLeft: 20,
+                                   paddingRight: 20,
+                                   backgroundColor: 'white'
+                              }}>
+                              <Dropdown
+                                   label={I18n.t('PIECE_IDENTITE')}
+                                   data={this.state.identityPieces}
+                                   useNativeDriver={true}
+                                   value={this.state.identityPiecesName}
+                                   onChangeText={(value, index, data) => {
+                                        this.setState({ identityPiecesName: value });
+                                   }}
+                                   valueExtractor={(value) => { return value.name }}
+                                   labelExtractor={(value) => { return value.name }}
+                              />
+                         </View>
+                         <Animatable.View ref={(comp) => { this.surnameanim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'calendar-times-o'}
+                                   label={I18n.t('IDENTITY_PIECE_EXPIRY_DATE')}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   style={styles.input}
+                                   onFocus={() => {
+                                        Keyboard.dismiss();
+                                        this.setState({ showPickerDateNaissance: true })
+                                   }}
+                                   {...this.dateNaissanceFumiProps}>
+                              </Fumi>
+                         </Animatable.View>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              isLoading={this.state.isLoging}
+                              onPress={() => { this.checkUserGeolocated() }}>
+                              {I18n.t('NEXT')}</Button>
+
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const styles = StyleSheet.create({
+     container: {
+          flex: 1,
+          backgroundColor: Color.primaryDarkColor,
+     },
+     textbtnvalide: {
+          color: 'white',
+          fontWeight: 'bold'
+     },
+     bigtitle: {
+          color: 'white',
+          fontSize: 20,
+          flex: 1,
+          fontWeight: 'bold',
+          textAlign: 'center',
+          margin: 20,
+     },
+     subbigtitle: {
+          color: 'white',
+          fontSize: 17,
+          textAlign: 'center',
+          margin: 5,
+     },
+     btnvalide: {
+          marginTop: 20,
+          marginLeft: 20,
+          marginRight: 20,
+          borderColor: 'transparent',
+          backgroundColor: Color.accentLightColor,
+          height: 52
+     },
+     input: {
+          height: 60,
+          marginTop: responsiveHeight(2),
+          marginLeft: responsiveWidth(5),
+          marginRight: responsiveWidth(5),
+          borderRadius: 5,
+     }
+});

screens/index.js

@@ -34,6 +34,7 @@ import WalletDetail from './wallet/WalletDetail';
 import walletDepot from './wallet/WalletDepot';
 import WalletRetrait from './wallet/WalletRetrait';
 import WalletSelect from './wallet/WalletSelect';
+import CreateIdentification from './identification/createIdentification';
 let route = require('./../route.json')
 export function registerScreens() {
 
@@ -50,6 +51,7 @@ export function registerScreens() {
      Navigation.registerComponent(route.configurations, () => Configurations);
      Navigation.registerComponent(route.typeaccountcreate, () => TypeChoiser);
      Navigation.registerComponent(route.simpleusercreate, () => CreateAccount);
+     Navigation.registerComponent(route.createIdentification, () => CreateIdentification);
      Navigation.registerComponent(route.historyItemDetails, () => HistoryItemDetails);
      Navigation.registerComponent(route.modalhistoryfilter, () => DateFilterHistoryDemand);
      Navigation.registerComponent(route.superviseurgroup, () => SuperViseurGroupeHome);

screens/login/createAccount.js

@@ -44,8 +44,6 @@ export default class CreateAccount extends Component {
 
      }
 
-
-
      initState() {
           return {
                password: null,
@@ -421,5 +419,5 @@ const styles = StyleSheet.create({
           marginRight: responsiveWidth(5),
           borderRadius: 5,
      }
-})
+});
 

screens/login/createUserStep2.js

@@ -379,9 +379,7 @@ export default class CreateUserStep2 extends Component {
                                    paddingLeft: 20,
                                    paddingRight: 20,
                                    backgroundColor: 'white'
-                              }}
+                              }}>
-
-                         >
                               <Dropdown
                                    label={I18n.t('COUNTRY_CHOICE')}
                                    data={this.state.countries}

screens/optionMenu/OptionsMenu.js

@@ -28,14 +28,8 @@ 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';
-import { store } from "../../redux/store";
-import axios from "axios";
-import { logoutActionUrl } from '../../webservice/IlinkConstants';
-import { bindActionCreators } from 'redux';
-import getAuthApiKey from '../../webservice/AuthKeyApi';
-import { connect } from 'react-redux';
 
-class OptionsMenu extends Component {
+export default class OptionsMenu extends Component {
 
      static navigatorStyle = {
           statusBarColor: primaryDarkAdvanced,
@@ -54,22 +48,6 @@ class OptionsMenu extends Component {
                     this.setState({ user });
                }
           });
-
-          let prevStore = store.getState().authKeyReducer
-          store.subscribe(() => {
-
-               const { authKeyReducer } = store.getState();
-               console.log("authKeyReducer", authKeyReducer);
-               if (prevStore !== authKeyReducer) {
-                    if (authKeyReducer.authKey !== null) {
-
-                         this.setState({
-                              authKey: `${authKeyReducer.authKey.token_type} ${authKeyReducer.authKey.access_token}`,
-                         });
-                    }
-               }
-
-          })
      }
 
 
@@ -109,10 +87,13 @@ class OptionsMenu extends Component {
 
           return ""
      }
+
      componentDidMount() {
           const items = this.props.navigation.router.childRouters.sta.childRouters;
           this.setState({ items: items })
           this.retrieveAndroidInformation()
+
+
      }
      updateLangue() {
           this.setState({ lang: "change" })
@@ -164,8 +145,6 @@ class OptionsMenu extends Component {
                user: null,
                menu: [],
                currentId: 0,
-               auth: null,
-               authKey: null
           }
      }
      getGeolocatedUserMenu() {
@@ -221,7 +200,6 @@ class OptionsMenu extends Component {
                          case "hyper":
                               menu = this.getHyperUsermenu();
                               break;
-
                     }
                } else {
                     menu = this.getUserMenu();
@@ -235,6 +213,7 @@ class OptionsMenu extends Component {
           return [
                { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }
                , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }
+               , { title: I18n.t('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', active: false }
                , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }
                , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]
      }
@@ -257,16 +236,22 @@ class OptionsMenu extends Component {
                          this.props.navigation.navigate(item, { agentId: this.state.user.agentId });
 
                          break;
+                    case "geolocated":
+                         this.props.navigation.navigate(item);
+                         break;
 
                     default:
-                         this.props.navigation.navigate(item);
+                         if (item === "walletSelect")
+                              item = "walletDetailUser";
+                         this.props.navigation.navigate(item, { userId: this.state.user.id });
+
                          break;
                }
           }
 
      }
      _renderItem = (item) => {
-          if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDepot' || item === 'walletRetrait') {
+          if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDetailUser' || item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"
@@ -548,17 +533,6 @@ class OptionsMenu extends Component {
                     { text: I18n.t('NO'), onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
                     {
                          text: I18n.t('YES'), onPress: () => {
-                              axios({
-                                   url: logoutActionUrl,
-                                   method: 'POST',
-                                   headers: {
-                                        'Authorization': this.state.authKey
-                                   }
-                              }).then((response) => {
-                                   console.log("DECONNECTE", response);
-                              }).catch((error) => {
-                                   console.warn("DECONNECTE", error);
-                              })
                               disconnect().then(() => {
                                    IlinkEmitter.emit("userdisconnect");
                                    this.props.navigation.navigate("Auth")
@@ -580,17 +554,6 @@ class OptionsMenu extends Component {
      }
 }
 
-const mapStateToProps = state => ({
-     loading: state.authKeyReducer.loading,
-     authKey: state.authKeyReducer.authKey,
-     error: state.authKeyReducer.error
-});
-
-const mapDispatchToProps = dispatch => bindActionCreators({
-     getAuthApiKey,
-}, dispatch);
-
-export default connect(mapStateToProps, mapDispatchToProps)(OptionsMenu);
 const items = StyleSheet.create({
      content: {
           width: responsiveWidth(100),

screens/optionMenu/qOptionsMenu.js

@@ -210,7 +210,7 @@ export default class OptionsMenu extends Component<Props> {
                , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]
      }
      _renderItem = (item) => {
-          if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks') {
+          if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'createIdentification') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"

screens/wallet/WalletDetail.js

@@ -31,7 +31,7 @@ import 'moment/locale/en-nz'
 import 'moment/locale/en-gb'
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { thousandsSeparators } from '../../utils/UtilsFunction';
+import { thousandsSeparators, isEmptyObject } from '../../utils/UtilsFunction';
 import DeviceInfo from 'react-native-device-info'
 
 let route = require('./../../route.json');
@@ -191,17 +191,6 @@ class WalletDetail extends Component {
                          loading: false
                     })
           } */
-
-     isEmptyObject = (obj) => {
-          for (let prop in obj) {
-               if (obj.hasOwnProperty(prop)) {
-                    return false;
-               }
-          }
-
-          return JSON.stringify(obj) === JSON.stringify({});
-     }
-
      getWalletIcon = (wallet) => {
           return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
 
@@ -478,7 +467,7 @@ class WalletDetail extends Component {
           console.log("WALLET SEND", wallet);
           return (
 
-               !this.isEmptyObject(wallet) ?
+               !isEmptyObject(wallet) ?
                     (<>
                          {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
                          {/*                          {this.state.loading ?
@@ -596,6 +585,196 @@ class WalletDetail extends Component {
                                                                  </TouchableOpacity>
                                                             </View>
                                                        </View>
+
+                                                       {wallet.network.toLowerCase().includes('ilink') &&
+                                                            <>
+                                                                 <View style={styles.transactionContainer}>
+
+                                                                      <View style={[styles.containerTouch]}>
+
+                                                                           <TouchableOpacity style={styles.contain}
+                                                                                onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                                                activeOpacity={0.9}>
+
+                                                                                <Icon name='cash-multiple'
+                                                                                     color={Color.primaryColor}
+                                                                                     size={30}
+                                                                                     style={styles.imageBanner} />
+
+                                                                                <View style={[styles.content]}>
+
+                                                                                     <View style={styles.contentTitle}>
+                                                                                          <Text style={[Typography.headline, Typography.semibold]}>
+                                                                                               {I18n.t('NANO_CREDIT')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                     <View style={{ flex: 1 }}>
+                                                                                          <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                                               {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                </View>
+                                                                           </TouchableOpacity>
+                                                                      </View>
+
+                                                                      <View style={[styles.containerTouch]}>
+                                                                           <TouchableOpacity style={styles.contain}
+                                                                                onPress={() => { }}
+                                                                                activeOpacity={0.9}>
+                                                                                <Icon name='heart-multiple'
+                                                                                     color={Color.primaryColor}
+                                                                                     size={30}
+                                                                                     style={styles.imageBanner} />
+
+                                                                                <View style={[styles.content]}>
+
+                                                                                     <View style={styles.contentTitle}>
+                                                                                          <Text style={[Typography.headline, Typography.semibold]}>
+                                                                                               {I18n.t('NANO_SANTE')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                     <View style={{ flex: 1 }}>
+                                                                                          <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                                               {I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                </View>
+                                                                           </TouchableOpacity>
+                                                                      </View>
+                                                                 </View>
+
+                                                                 <View style={styles.transactionContainer}>
+
+                                                                      <View style={[styles.containerTouch]}>
+
+                                                                           <TouchableOpacity style={styles.contain}
+                                                                                onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                                                activeOpacity={0.9}>
+
+                                                                                <Icon name='file-document'
+                                                                                     color={Color.primaryColor}
+                                                                                     size={30}
+                                                                                     style={styles.imageBanner} />
+
+                                                                                <View style={[styles.content]}>
+
+                                                                                     <View style={styles.contentTitle}>
+                                                                                          <Text style={[Typography.headline, Typography.semibold]}>
+                                                                                               {I18n.t('PAIEMENT_FACTURE')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                     <View style={{ flex: 1 }}>
+                                                                                          <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                </View>
+                                                                           </TouchableOpacity>
+                                                                      </View>
+
+                                                                      <View style={{ flex: 1 }}>
+
+                                                                           {/* <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                            activeOpacity={0.9}>
+
+                                                            <Icon name='md-outline'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('NANO_CREDIT')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity> */}
+                                                                      </View>
+                                                                 </View>
+
+
+                                                                 <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
+                                                                      <Text
+                                                                           style={[Typography.title3, Typography.semibold]}>
+                                                                           {I18n.t('IDENTIFICATION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={styles.transactionContainer}>
+
+                                                                      <View style={[styles.containerTouch]}>
+
+                                                                           <TouchableOpacity style={styles.contain}
+                                                                                onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                                                activeOpacity={0.9}>
+
+                                                                                <Icon name='pencil-plus'
+                                                                                     color={Color.primaryColor}
+                                                                                     size={30}
+                                                                                     style={styles.imageBanner} />
+
+                                                                                <View style={[styles.content]}>
+
+                                                                                     <View style={styles.contentTitle}>
+                                                                                          <Text style={[Typography.headline, Typography.semibold]}>
+                                                                                               {I18n.t('CREATION_IDENTIFICATION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                     <View style={{ flex: 1 }}>
+                                                                                          <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                                               {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                </View>
+                                                                           </TouchableOpacity>
+                                                                      </View>
+
+                                                                      <View style={[styles.containerTouch]}>
+                                                                           <TouchableOpacity style={styles.contain}
+                                                                                onPress={() => { }}
+                                                                                activeOpacity={0.9}>
+                                                                                <Icon name='check-circle'
+                                                                                     color={Color.primaryColor}
+                                                                                     size={30}
+                                                                                     style={styles.imageBanner} />
+
+                                                                                <View style={[styles.content]}>
+
+                                                                                     <View style={styles.contentTitle}>
+                                                                                          <Text style={[Typography.headline, Typography.semibold]}>
+                                                                                               {I18n.t('VALIDATE_IDENTIFICATION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                     <View style={{ flex: 1 }}>
+                                                                                          <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                                               {I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
+                                                                                          </Text>
+                                                                                     </View>
+
+                                                                                </View>
+                                                                           </TouchableOpacity>
+                                                                      </View>
+                                                                 </View>
+                                                            </>
+                                                       }
                                                   </>
                                              )}
 

screens/wallet/WalletDetailUser.js

@@ -0,0 +1,834 @@
+import React, { Component } from 'react';
+import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import I18n from 'react-native-i18n'
+import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
+import * as Utils from '../../utils/DeviceUtils';
+import Icons from 'react-native-vector-icons/Ionicons'
+import { Images } from '../../config/Images';
+import CustomButton from '../../components/CustomButton';
+import { Color } from '../../config/Color';
+import Tag from '../../components/Tag';
+import { IlinkEmitter } from "../../utils/events";
+import { CreditCardInput } from "react-native-credit-card-input";
+import { Typography, FontWeight } from '../../config/typography';
+import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
+import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
+import { depositActionReset } from '../../webservice/DepositApi';
+import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
+import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
+import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
+import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+import { baseUrl } from '../../webservice/IlinkConstants';
+let moment = require('moment-timezone');
+import 'moment/locale/fr'
+import 'moment/locale/es-us'
+import 'moment/locale/en-au'
+import 'moment/locale/en-ca'
+import 'moment/locale/en-ie'
+import 'moment/locale/en-il'
+import 'moment/locale/en-nz'
+import 'moment/locale/en-gb'
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { thousandsSeparators, isEmptyObject, transactionHistoryUser } from '../../utils/UtilsFunction';
+import DeviceInfo from 'react-native-device-info'
+
+let route = require('./../../route.json');
+let slugify = require('slugify');
+require('../../utils/Translations');
+
+class WalletDetailUser extends Component {
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               index: 0,
+               heightHeader: Utils.heightHeader(),
+               isModalConfirmVisible: false,
+               wallet: null,
+               triggerTransferCommission: false,
+               loading: false,
+               isTriggerRefresh: false,
+               scrollHeaderY: 0
+          };
+
+          slugify.extend({ '+': 'plus' });
+
+          this.scrollY = new Animated.Value(0);
+          this.scrollHeaderY = new Animated.Value(0);
+          this.deltaY = new Animated.Value(0);
+          this.bgBannerY = new Animated.Value(0);
+
+          this.heightImageBanner = Utils.scaleWithPixel(250, 1);
+          this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
+          this.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
+          moment.locale(this.currentLocale);
+          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
+
+          /*           this.props.getWalletTransactionHistoryReset();
+                    this.props.depositActionReset();
+                    this.props.resetWalletListDetailReducer();
+          
+                    if (this.isHomeRootView) {
+                         let agentId = this.props.navigation.state.params.agentId;
+                         this.props.getWalletDetailActivated(agentId, true);
+                    }
+                    else {
+                         this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
+                         this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
+                    } */
+     }
+     /* 
+          static options(passProps) {
+               return {
+                    topBar: {
+                         drawBehind: false,
+                         visible: true,
+                         animate: true,
+                         buttonColor: 'white',
+                         background: {
+                              color: 'white',
+                         },
+                         rightButtons: []
+                    },
+                    backButton: {
+                         visible: true,
+                         color: "white"
+                    },
+                    buttonColor: "white",
+                    background: {
+                         color: Color.primaryDarkColor
+                    },
+                    statusBar: {
+                         drawBehind: false,
+                         visible: true,
+                    }
+               };
+          }
+      */
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               //title: I18n.t('WALLET'),
+               //title: this.isHomeRootView ? I18n.t('WALLET') : ((typeof this.props.navigation.state.params !== 'undefined') && this.props.navigation.state.params.wallet.network),
+               drawerLabel: () => null,
+               headerTitle: I18n.t('WALLET'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 23,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('WALLET')
+          }
+     };
+
+     componentDidMount() {
+
+          /*           const { result } = this.props;
+                    if (result !== null) {
+                         if (typeof result.response !== 'undefined') {
+                              const wallet = result.response[0];
+                              this.setState({
+                                   wallet: wallet,
+                                   isTriggerRefresh: false
+                              })
+                         }
+                    } */
+
+     }
+
+     shouldComponentUpdate(nextProps, nextState) {
+
+          if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
+
+               return false;
+          } else {
+               return true;
+          }
+     }
+
+     getWalletIcon = (wallet) => {
+          return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
+
+     }
+
+     getCreationDateToHumanFormat = (date) => {
+          let re = moment.tz(date, 'Etc/GMT+0').format();
+          return moment(re).fromNow();
+     }
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WALLET') })
+          this.forceUpdate()
+     }
+
+     handleIndexChange = index => this.setState({ index });
+
+     imageScale = () => {
+          return this.scrollY.interpolate({
+               inputRange: [0, 100],
+               outputRange: [1, 0.5],
+               extrapolate: 'clamp',
+          });
+     }
+
+     imageTranslateY = () => {
+          return this.scrollY.interpolate({
+               inputRange: [0, 100],
+               outputRange: [-5, 50],
+               extrapolate: 'clamp',
+          });
+     }
+
+     bgHeaderTranslateY = () => {
+          return this.scrollY.interpolate({
+               inputRange: [0, 150],
+               outputRange: [-5, 0],
+               extrapolate: 'clamp',
+          });
+     }
+
+     refresh = () => {
+          const { result } = this.props;
+          console.log("STATE NAVIGATION PARAMS REFRESH", this.props.navigation.state);
+
+          if (!this.isHomeRootView) {
+               const { wallet } = this.props.navigation.state.params;
+               this.props.getWalletDetailActivated(wallet.id, false);
+               this.props.getWalletTransactionHistory(wallet.id);
+               this.setState({
+                    isTriggerRefresh: true
+               });
+
+               /*      if (typeof this.props.navigation.state.params.onRefreshDetail !== 'undefined')
+                         this.props.navigation.state.params.onRefreshDetail(); */
+
+          }
+
+          else {
+               let agentId = this.props.navigation.state.params.agentId;
+               this.props.getWalletDetailActivated(agentId, true);
+          }
+     }
+
+
+     renderHeader = () => (
+          <View style={[
+               styles.containField,
+               {
+                    backgroundColor: Color.cardBackgroundColor,
+                    zIndex: 11,
+                    shadowColor: Color.borderColor,
+                    borderColor: Color.borderColor,
+               }
+          ]}>
+               <View style={[styles.contentLeftItem]}>
+                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
+                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Gabon</Text>
+               </View>
+
+               <View style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+               }}>
+                    <Animated.Image
+                         source={{ uri: `https://ilink-app.com/mobilebackend/datas/img/network/uba-fs-ilink-logo.png` }}
+                         style={{
+                              width: 120,
+                              height: 120,
+                              borderRadius: 60,
+                              position: 'absolute',
+                              alignSelf: 'center',
+                              backgroundColor: Color.whiteColor,
+                              bottom: 70,
+                              transform: [{
+                                   scale: this.imageScale()
+                              },
+                              {
+                                   translateY: this.imageTranslateY()
+                              }]
+                         }} />
+
+                    <View style={{
+                         marginTop: 1, flex: 1,
+                         alignItems: 'center',
+                         justifyContent: 'flex-end'
+                    }}>
+                         <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>UBA FS iLink</Text>
+                         <Tag primary style={styles.tagFollow}>
+                              {I18n.t('CREATION_IDENTIFICATION_CLIENT')}
+                         </Tag>
+                    </View>
+               </View>
+               <View style={styles.contentLeftItem}>
+                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
+                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Il y'a deux jours</Text>
+               </View>
+          </View>
+     );
+
+     renderLoader = () => {
+          return (
+               <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>
+          )
+     }
+
+     renderAccountDetail = (wallet) => (
+          <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>
+
+               <View
+                    style={{
+                         flexDirection: 'row',
+                         alignItems: 'center',
+                    }}>
+                    <View
+                         style={[
+                              styles.circlePoint,
+                              { backgroundColor: Color.primaryColor },
+                         ]}>
+                         <Icons name='md-wallet'
+                              size={28}
+                              color={Color.whiteColor}
+                         />
+                    </View>
+                    <View>
+                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
+                              {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
+                         </Text>
+                         <Text style={[Typography.body2]}>0</Text>
+                    </View>
+               </View>
+
+               <View
+                    style={{
+                         flexDirection: 'row',
+                         alignItems: 'center',
+                    }}>
+                    <View
+                         style={[
+                              styles.circlePoint,
+                              { backgroundColor: Color.primaryColor },
+                         ]}>
+                         <Icons name='md-key'
+                              size={28}
+                              color={Color.whiteColor}
+                         />
+                    </View>
+                    <View>
+                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
+                              {I18n.t('NUMERO_COMPTE')}
+                         </Text>
+                         <Text style={[Typography.body2]}>123456789</Text>
+                    </View>
+               </View>
+
+          </View>
+     );
+
+     renderDetailWallet = () => {
+          return (
+
+               (<>
+                    {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
+
+                    <View
+                         style={styles.container}>
+
+                         <Animated.View style={{
+                              position: 'absolute',
+                              width: "100%",
+                              zIndex: 1,
+                              backgroundColor: Color.primaryColor,
+                              height: 140 - this.state.scrollHeaderY,
+                         }} />
+
+                         <ScrollView style={{
+                              paddingHorizontal: 20, position: 'absolute',
+                              width: '100%',
+                              height: '100%',
+                              zIndex: 2
+                         }}
+                              scrollEventThrottle={8}
+                              onScroll={Animated.event([
+                                   {
+                                        nativeEvent: {
+                                             contentOffset: { y: this.scrollY },
+                                        },
+                                   },
+                              ],
+                                   { listener: (event) => { this.setState({ scrollHeaderY: event.nativeEvent.contentOffset.y }); } })}>
+                              <View style={{ marginTop: 80, }}>
+
+                                   {this.renderHeader()}
+
+                                   <View
+                                        style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
+
+                                        {this.renderAccountDetail()}
+
+                                        <>
+                                             <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
+                                                  <Text
+                                                       style={[Typography.title3, Typography.semibold]}>
+                                                       {I18n.t('TRANSACTIONS')}
+                                                  </Text>
+                                             </View>
+
+                                             <View style={styles.transactionContainer}>
+
+                                                  <View style={[styles.containerTouch]}>
+                                                       <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { }}
+                                                            activeOpacity={0.9}>
+                                                            <Icon name='arrow-bottom-right'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('DEPOSIT')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('DEPOSIT_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity>
+                                                  </View>
+
+                                                  <View style={[styles.containerTouch]}>
+
+                                                       <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                            activeOpacity={0.9}>
+
+                                                            <Icon name='arrow-top-left'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('WITHDRAWAL')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity>
+                                                  </View>
+                                             </View>
+
+                                             <View style={styles.transactionContainer}>
+
+                                                  <View style={[styles.containerTouch]}>
+
+                                                       <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                            activeOpacity={0.9}>
+
+                                                            <Icon name='cash-multiple'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('NANO_CREDIT')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity>
+                                                  </View>
+
+                                                  <View style={[styles.containerTouch]}>
+                                                       <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { }}
+                                                            activeOpacity={0.9}>
+                                                            <Icon name='heart-multiple'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('NANO_SANTE')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity>
+                                                  </View>
+                                             </View>
+
+                                             <View style={styles.transactionContainer}>
+
+                                                  <View style={[styles.containerTouch]}>
+
+                                                       <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                            activeOpacity={0.9}>
+
+                                                            <Icon name='file-document'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('PAIEMENT_FACTURE')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity>
+                                                  </View>
+
+                                                  <View style={{ flex: 1 }}>
+
+                                                       {/* <TouchableOpacity style={styles.contain}
+                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+                                                            activeOpacity={0.9}>
+
+                                                            <Icon name='md-outline'
+                                                                 color={Color.primaryColor}
+                                                                 size={30}
+                                                                 style={styles.imageBanner} />
+
+                                                            <View style={[styles.content]}>
+
+                                                                 <View style={styles.contentTitle}>
+                                                                      <Text style={[Typography.headline, Typography.semibold]}>
+                                                                           {I18n.t('NANO_CREDIT')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                                 <View style={{ flex: 1 }}>
+                                                                      <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                           {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                      </Text>
+                                                                 </View>
+
+                                                            </View>
+                                                       </TouchableOpacity> */}
+                                                  </View>
+                                             </View>
+                                        </>
+
+
+                                        {this.renderHistoryTransaction()}
+                                   </View>
+
+
+                              </View>
+
+                         </ScrollView>
+                    </View>
+               </>)
+          )
+     }
+
+     renderHistoryTransactionItem = (item) => {
+          let re = moment.tz(item.date, 'Etc/GMT+0').format();
+          let date = moment(re).fromNow();
+
+          return (
+               <View
+                    key={item.id}
+                    style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                         <View style={styles.iconContent}>
+                              <Icon name='arrow-bottom-right'
+                                   color={Color.primaryColor} size={20} />
+                         </View>
+                         <View>
+                              <Text style={Typography.subhead}>{item.description}</Text>
+                              <Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
+                                   {date}
+                              </Text>
+                         </View>
+                    </View>
+               </View>
+          );
+     }
+
+     renderHistoryTransactionList = () => {
+          return (
+               transactionHistoryUser().map((item, ) => (
+                    this.renderHistoryTransactionItem(item)
+               ))
+          )
+     }
+
+
+     renderHistoryTransaction = () => {
+
+          return (
+               <>
+                    <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
+                         <Text
+                              style={[Typography.title3, Typography.semibold]}>
+                              {I18n.t('TRANSACTION_HISTORY')}
+                         </Text>
+                    </View>
+
+                    <ScrollView style={styles.transactionContainer}>
+                         {
+                              this.props.loadingTransaction ?
+                                   (
+                                        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                             {Platform.OS === 'android'
+                                                  ?
+                                                  (
+                                                       <>
+                                                            <ProgressBarAndroid />
+                                                            <Text>{I18n.t('LOADING_DOTS')}</Text>
+
+                                                       </>
+                                                  ) :
+                                                  <>
+                                                       <ActivityIndicator size="large" color={'#ccc'} />
+                                                       <Text>{I18n.t('LOADING_DOTS')}</Text>
+                                                  </>
+                                             }
+                                        </View>
+                                   ) : this.renderHistoryTransactionList()
+                         }
+                    </ScrollView>
+               </>
+          )
+     }
+
+     render() {
+
+          return (
+               <>
+                    <StatusBar
+                         backgroundColor={Color.primaryDarkColor}
+                         barStyle="light-content"
+                         translucent={true}
+                    />
+                    {
+                         this.renderDetailWallet()
+
+                    }
+
+               </>
+          );
+     }
+}
+
+
+const mapStateToProps = state => ({
+     loading: state.walletDetailReducer.loading,
+     result: state.walletDetailReducer.result,
+     error: state.walletDetailReducer.error,
+
+     loadingTransaction: state.walletHistoryReducer.loadingTransaction,
+     resultTransaction: state.walletHistoryReducer.resultTransaction,
+     errorTransaction: state.walletHistoryReducer.errorTransaction,
+
+     loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
+     resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
+     errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+     getWalletDetailActivated,
+     getWalletTransactionHistory,
+     transferCommissionAction,
+     resetWalletListDetailReducer,
+     resetCommissionReducer,
+     getWalletTransactionHistoryReset,
+     depositActionReset
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(WalletDetailUser);
+const styles = StyleSheet.create({
+     container: {
+          flex: 1,
+          backgroundColor: Color.containerBackgroundColor
+     },
+     indicator: {
+          height: 2
+     },
+     tab: {
+          width: Utils.getWidthDevice() / 2
+     },
+     tabbar: {
+          height: 40
+     },
+     imgBanner: {
+          width: '100%',
+          height: 250,
+          position: 'absolute',
+     },
+     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"
+     },
+     tagFollow: { width: 150, margin: 10 },
+     profileItem: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          paddingBottom: 20,
+          paddingTop: 20
+     },
+     checkDefault: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          borderBottomWidth: 1,
+          paddingVertical: 10,
+          marginTop: 5
+     },
+     blockView: {
+          paddingVertical: 10,
+          borderBottomWidth: 0.5,
+     },
+     circlePoint: {
+          width: 50,
+          height: 50,
+          borderRadius: 25,
+          marginRight: 5,
+          alignItems: 'center',
+          justifyContent: 'center',
+     },
+     transactionContainer: {
+          flexDirection: 'row',
+          paddingTop: 10,
+          paddingTop: 10,
+          paddingLeft: 10,
+          paddingRight: 10,
+     },
+     containerTouch: {
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          marginRight: 1,
+          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(60),
+          paddingHorizontal: 10,
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          flex: 1,
+     },
+     contentTitle: {
+          paddingTop: 5,
+     }
+})

utils/UtilsFunction.js

@@ -1,5 +1,44 @@
+import I18n from 'react-native-i18n';
+
 export const thousandsSeparators = (num) => {
      var num_parts = num.toString().split(".");
      num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
      return num_parts.join(".");
 }
+
+export const identityPieces = () => {
+     return [
+          {
+               name: I18n.t('IDENTITY_CARD')
+          },
+          {
+               name: I18n.t('PASSEPORT')
+          },
+          {
+               name: I18n.t('OTHER_IDENTITY_PIECE')
+          },
+     ]
+}
+
+export const transactionHistoryUser = () => {
+     return [
+          {
+               description: `Dépôt de 10 000 dans le wallet UBA Fs iLink à destination de Brice Zele (+237690662238) `,
+               date: '2020-05-15'
+          },
+          {
+               description: `Retrait de 10 000 dans le wallet UBA Fs iLink à destination de Brice Zele (+237690662238) `,
+               date: '2020-05-20'
+          },
+     ];
+}
+
+export const isEmptyObject = (obj) => {
+     for (let prop in obj) {
+          if (obj.hasOwnProperty(prop)) {
+               return false;
+          }
+     }
+
+     return JSON.stringify(obj) === JSON.stringify({});
+}

utils/i18n/en.json

@@ -54,6 +54,9 @@
   "CARD_NUMBER_ERROR": "Card number incorrect",
   "AMOUNT_LABEL": "Amount",
   "WITHDRAWAL": "Withdrawal",
+  "NANO_CREDIT": "Nano credit",
+  "NANO_SANTE": "Nano health",
+  "PAIEMENT_FACTURE": "Bill payment",
   "DEMAND_SEND": "Demand send",
   "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
   "COMMISSION_ACCOUNT_TITLE": "Commission account",
@@ -63,6 +66,7 @@
   "CONFIRM_TRANSFER_COMMISSION": "Confirm commission transfer",
   "CREATION_DATE": "Creation date",
   "PRINCIPAL_ACCOUNT_TITLE": "Principal account",
+  "NUMERO_COMPTE": "Account number",
   "NO_WALLET_ACTIVED": "No wallet is activated for your account",
   "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
   "PRINCIPAL": "Principal",
@@ -94,6 +98,7 @@
   "GROUP_MEMBERS": "The group members",
   "NAME": "Last name(s)",
   "FIRSTNAME": "First name(s) ",
+  "AND": "and",
   "ADMIN": "Administrator",
   "SUPER_ADMIN": "Super administrator",
   "GEOLOCATED": "Geo located agent",
@@ -113,6 +118,13 @@
   "PHONE_NUMBER": "Phone",
   "CHOICE_NETWORK": "Choose a network",
   "COUNTRY_CHOICE": "Choose a country",
+  "CHOICE_TOWN": "Choose a town",
+  "PIECE_IDENTITE": "Identity piece",
+  "IDENTITY_CARD": "Identity card",
+  "PASSEPORT": "Passeport",
+  "OTHER_IDENTITY_PIECE": "Other",
+  "IDENTITY_NUMBER": "N° of piece",
+  "IDENTITY_PIECE_EXPIRY_DATE": "Expiry date",
   "LAST_STEP": "Last step",
   "ACTIVE_ACCOUNT": "Activate the account !",
   "ACTIVE_USER": "Active",
@@ -255,6 +267,13 @@
   "FREE": "Available",
   "SAVED": "Registered",
   "ACCOUNT_INFO": "My Account Information",
+  "IDENTIFICATION": " Identification",
+  "CREATION_IDENTIFICATION": "Creation",
+  "CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
+  "VALIDATE_IDENTIFICATION": "Validation",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Validate an identi...",
+  "CREATE_IDENTIFICATION_TITLE": "Please fill in customer information",
+  "DATE_NAISSANCE": "Date of birth",
   "REGISTER_YOURSELF": "Register",
   "REGISTRATION": "Registration",
   "CHANGE_LANG_LABEL": "Change language",

utils/i18n/fr.json

@@ -58,11 +58,15 @@
   "PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
   "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
   "WITHDRAWAL": "Retrait",
+  "NANO_CREDIT": "Nano crédit",
+  "NANO_SANTE": "Nano santé",
+  "PAIEMENT_FACTURE": "Paiement de facture",
   "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
   "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
   "CONFIRM": "Confirmer",
   "CONFIRM_TRANSFER_COMMISSION": "Confirmer le transfert des commissions",
   "PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
+  "NUMERO_COMPTE": "N° de compte",
   "COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal",
   "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
   "TRANSACTIONS": "Transactions",
@@ -97,6 +101,7 @@
   "GROUP_MEMBERS": "Les membres du groupe",
   "NAME": "Nom (s)",
   "FIRSTNAME": "Prénom (s) ",
+  "AND": "et",
   "ADMIN": "Administrateur",
   "SUPER_ADMIN": "Super administrateur",
   "GEOLOCATED": "Agent géo-localisé",
@@ -117,6 +122,13 @@
   "PHONE_NUMBER": "Numéro de téléphone",
   "CHOICE_NETWORK": "Choisissez un réseau",
   "COUNTRY_CHOICE": "Choisissez un pays",
+  "CHOICE_TOWN": "Choisissez une ville",
+  "PIECE_IDENTITE": "Pièce d'identité",
+  "IDENTITY_CARD": "Carte d'identité",
+  "PASSEPORT": "Passeport",
+  "OTHER_IDENTITY_PIECE": "Autre",
+  "IDENTITY_NUMBER": "N° de la pièce",
+  "IDENTITY_PIECE_EXPIRY_DATE": "Date d'expiration",
   "LAST_STEP": "Derniere étape",
   "ACTIVE_ACCOUNT": "Activez le compte !",
   "ACTIVE_USER": "Activer",
@@ -257,6 +269,14 @@
   "FREE": "disponibles",
   "SAVED": "enregistrés",
   "ACCOUNT_INFO": " Information sur mon compte",
+  "IDENTIFICATION": " Identification",
+  "CREATION_IDENTIFICATION": "Création",
+  "CREATION_IDENTIFICATION_CLIENT": "M'identifier",
+  "CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
+  "VALIDATE_IDENTIFICATION": "Validation",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
+  "CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
+  "DATE_NAISSANCE": "Date de naissance",
   "REGISTER_YOURSELF": "Enregistrez-vous",
   "REGISTRATION": "Inscription",
   "CHANGE_LANG_LABEL": "Changer la langue",