Wallet Detail and Wallet Select

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

@@ -37,10 +37,12 @@
     "WITHDRAWAL": "Wirthdrawal",
     "COMMISSION_ACCOUNT_TITLE": "Commission account",
     "PRINCIPAL_ACCOUNT_TITLE": "Principal account",
+    "NO_WALLET_ACTIVED": "PNo wallet is activated for your account",
     "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
     "PRINCIPAL": "Principal",
     "ENTER_YOUR_CARD_ID": "Please enter your bank card ID",
     "SELECT_YOUR_WALLET": "Selec your wallet",
+    "TRANSACTIONS": "Transactions",
     "THE_ACCOUNT": "Account ",
     "NO_GEO_POINT_CODE": "You have no free geolocated point",
     "NO_DEMAND_ADHESION": "You have no membership request",

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

@@ -37,6 +37,8 @@
     "WITHDRAWAL": "Retrait",
     "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
     "PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
+    "TRANSACTIONS": "Transactions",
+    "NO_WALLET_ACTIVED": "Aucun wallet n'est activé pour votre compte",
     "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer les commissions",
     "PRINCIPAL": "Principal",
     "ENTER_YOUR_CARD_ID": "Entrer vos identifiants bancaires",

components/CustomText/index.js

@@ -2,8 +2,10 @@ import React from 'react';
 import { Text, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
 import { Typography, FontWeight } from '../../config/typography';
+import Tag from '../Tag';
 
 export default function CustomText(props) {
+
      const {
           //props style
           header,

config/Images.js

@@ -1,3 +1,6 @@
 export const Images = {
-     userAvatar: require('../datas/img/users/man.png')
+     userAvatar: require('../datas/img/users/man.png'),
+     bgprimarycolor: require('../datas/img/bgprimarycolor.png'),
+     logo: require('../datas/img/ilinklogo.png'),
+     room6: require('../datas/img/room-6.jpg'),
 }

package.json

@@ -91,4 +91,4 @@
     "jest": {
         "preset": "react-native"
     }
-}
+}

redux/actions/AuthKeyActions.js

@@ -12,4 +12,4 @@ export const fetchAuthKeySuccess = (res) => ({
 export const fetchAuthKeyError = (error) => ({
      type: AUTH_KEY_ERROR,
      result: error
-});
+});  

redux/reducers/AuthKeyReducer.js

@@ -28,7 +28,7 @@ export default (state = initialState, action) => {
           case REHYDRATE: return {
                ...state,
                loading: false,
-               authKey: action.payload.authKeyReducer.authKey,
+               authKey: typeof action.payload !== 'undefined' ? action.payload.authKeyReducer.authKey : null,
                error: null
           }
 

screens/ads/BannerAds.js

@@ -1,78 +1,77 @@
-import React,{Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-    Platform, StyleSheet, Text,
+     Platform, StyleSheet, Text,
-    TouchableWithoutFeedback, View, TextInput,
+     TouchableWithoutFeedback, View, TextInput,
-    WebView,
+     WebView,
-    Animated, Dimensions, Image, PermissionsAndroid,
+     Animated, Dimensions, Image, PermissionsAndroid,
-    StatusBar, TouchableNativeFeedback, TouchableOpacity,BackHandler,Alert,ProgressBarAndroid
+     StatusBar, TouchableNativeFeedback, TouchableOpacity, BackHandler, Alert, ProgressBarAndroid
-    , NativeModules, Picker, FlatList
+     , NativeModules, Picker, FlatList
 } from 'react-native';
 import CardView from "react-native-cardview"
-import {responsiveHeight,responsiveWidth} from "react-native-responsive-dimensions"
+import { responsiveHeight, responsiveWidth } from "react-native-responsive-dimensions"
 import BaseScreen from "../BaseScreen";
 import Icon from "react-native-vector-icons/MaterialIcons";
 import Button from "apsl-react-native-button"
-type Props = {};
+const route = require("./../../route.json")
-const route=require("./../../route.json")
 const BannerAds = (props) => {
-    const { children, hide, style } = props;
+     const { children, hide, style } = props;
-    if (hide) {
+     if (hide) {
-        return null;
+          return null;
-    }
+     }
-    return (
+     return (
-        <View {...this.props} style={style}>
+          <View {...this.props} style={style}>
-            <View style={styles.parent} >
+               <View style={styles.parent} >
-            <CardView style={styles.container}>
+                    <CardView style={styles.container}>
-                <Icon.Button
+                         <Icon.Button
-                    name={"close"}
+                              name={"close"}
-                    color={"white"}
+                              color={"white"}
-                    onPress={()=>{
+                              onPress={() => {
-                        this.hide=true
+                                   this.hide = true
-                    }}
+                              }}
-                    style={{borderRadius:0}}
+                              style={{ borderRadius: 0 }}
-                >Fermer</Icon.Button>
+                         >Fermer</Icon.Button>
-                <WebView
+                         <WebView
-                    source={{uri: 'https://github.com/facebook/react-native'}}
+                              source={{ uri: 'https://github.com/facebook/react-native' }}
-                    style={{flex:1}}
+                              style={{ flex: 1 }}
-                />
+                         />
-            </CardView>
+                    </CardView>
-        </View></View>
+               </View></View>
-    );
+     );
 
 
 }
 
 BannerAds.propTypes = {
-    children: PropTypes.oneOfType([
+     children: PropTypes.oneOfType([
-        PropTypes.string,
+          PropTypes.string,
-        PropTypes.element,
+          PropTypes.element,
-        PropTypes.number,
+          PropTypes.number,
-        PropTypes.arrayOf(PropTypes.oneOfType([
+          PropTypes.arrayOf(PropTypes.oneOfType([
-            PropTypes.string,
+               PropTypes.string,
-            PropTypes.number,
+               PropTypes.number,
-            PropTypes.element,
+               PropTypes.element,
-        ])),
+          ])),
-    ]).isRequired,
+     ]).isRequired,
-    hide: PropTypes.bool,
+     hide: PropTypes.bool,
 };
-const styles=StyleSheet.create({
+const styles = StyleSheet.create({
-    container:{
+     container: {
-        flex:1,
+          flex: 1,
 
-        width:responsiveWidth(100),
+          width: responsiveWidth(100),
-        height:responsiveHeight(15),
+          height: responsiveHeight(15),
 
-        justifyContent:'center',
+          justifyContent: 'center',
-        backgroundColor:"white"
+          backgroundColor: "white"
-    },
+     },
-    parent:{
+     parent: {
-        width:responsiveWidth(100),
+          width: responsiveWidth(100),
-        height:responsiveHeight(15),
+          height: responsiveHeight(15),
-        justifyContent:'center',
+          justifyContent: 'center',
-        alignItems:'center',
+          alignItems: 'center',
-        backgroundColor:"#000000AE"
+          backgroundColor: "#000000AE"
-    }
+     }
 })
-export  default BannerAds
+export default BannerAds

screens/home/Home.js

@@ -48,6 +48,8 @@ import MarkerManager from './../../webservice/persistences/MarkerManager'
 import { bindActionCreators } from 'redux';
 import getAuthApiKey from '../../webservice/AuthKeyApi';
 import { connect } from 'react-redux';
+import getWalletActivated from '../../webservice/WalletApi';
+
 
 const slideHeight = responsiveHeight(30) > 270 ? 270 : responsiveHeight(30)
 //var Fabric = require('react-native-fabric');
@@ -167,11 +169,19 @@ class Home extends BaseScreen {
                          });
                     }); */
 
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         if (user.phone !== undefined)
+                              this.props.getAuthApiKey(user.phone);
+                         //this.props.getWalletActivated(user.agentId);
+                    }
+               }
+          });
           this.mounted = true;
           this.configuration = new Configuration()
           const { navigation } = this.props;
           this.markerManager = new MarkerManager()
-          this.props.getAuthApiKey();
           this.configuration.getCurrentPubValue().then((value) => {
                try {
                     const val = parseInt(value)
@@ -2170,7 +2180,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
-     getAuthApiKey
+     getAuthApiKey,
+     getWalletActivated
 }, dispatch);
 
 export default connect(mapStateToProps, mapDispatchToProps)(Home);

screens/optionMenu/OptionsMenu.js

@@ -43,8 +43,16 @@ export default class OptionsMenu extends Component {
           IlinkEmitter.on("userdisconnect", this.hideSideMenu.bind(this))
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
           this.configuration = new Configuration();
+          readUser().then((user) => {
+               if (user.id !== this.state.user.id) {
+                    if (user !== null && user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
      }
 
+
      retrieveAndroidInformation() {
           this.configuration._getData().then((lang) => {
                if (lang) {
@@ -209,17 +217,42 @@ export default class OptionsMenu extends Component {
                , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', 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 }]
+     }
+     redirectToScreen = (item) => {
+          console.log("Item Menu Click", item);
+
+          switch (this.state.user.category) {
+               case "super":
+                    if (item === "walletSelect")
+                         item = "walletDetail";
+                    this.props.navigation.navigate(item, { agentId: this.state.user.agentId });
+
+                    break;
+               case "hyper":
+                    if (item === "walletSelect")
+                         item = "walletDetail";
+                    this.props.navigation.navigate(item, { agentId: this.state.user.agentId });
+
+                    break;
+
+               default:
+                    this.props.navigation.navigate(item);
+                    break;
+          }
+
+
      }
      _renderItem = (item) => {
           if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"
+               //console.log("ITEM OPTION MENU", item);
                return (
                     <TouchableOpacity onPress={() => {
                          this.props.navigation.toggleDrawer();
-                         this.setState({ currentId: item.id })
+                         this.setState({ currentId: item.id });
-                         this.props.navigation.navigate(item)
+                         this.redirectToScreen(item);
                     }}
                     >
                          <View

screens/wallet/WalletDetail.js

@@ -1,19 +1,31 @@
 import React, { Component } from 'react';
-import { Animated, StyleSheet, View, Image, StatusBar, ScrollView, TouchableOpacity } from 'react-native';
+import { Animated, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-const route = require('./../../route.json')
 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 CustomText from '../../components/CustomText';
 import CustomButton from '../../components/CustomButton';
 import { Color } from '../../config/Color';
 import Tag from '../../components/Tag';
-import { SafeAreaView } from 'react-navigation';
 import { IlinkEmitter } from "../../utils/events";
 import { CreditCardInput } from "react-native-credit-card-input";
+import { Typography, FontWeight } from '../../config/typography';
+import getWalletActivated from '../../webservice/WalletApi';
+import { 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 { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
+let slugify = require('slugify');
 require('../../utils/Translations');
 
 const FirstRoute = () => (
@@ -21,9 +33,9 @@ const FirstRoute = () => (
 
           <View style={{ flex: 1 }}>
                <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
-                    <CustomText body2>
+                    <Text style={Typography.body2}>
                          {I18n.t('ENTER_YOUR_CARD_ID')}
-                    </CustomText>
+                    </Text>
                </View>
           </View>
 
@@ -45,7 +57,7 @@ const SecondRoute = () => (
      </ScrollView>
 );
 
-export default class WalletDetail extends Component {
+class WalletDetail extends Component {
 
      constructor(props) {
           super(props);
@@ -54,13 +66,24 @@ export default class WalletDetail extends Component {
                routes: [
                     { key: 'depot', title: I18n.t('DEPOSIT') },
                     { key: 'retrait', title: I18n.t('WITHDRAWAL') }
-               ]
+               ],
+               heightHeader: Utils.heightHeader(),
           };
+
+          slugify.extend({ '+': 'plus' });
+
           this.scrollY = new Animated.Value(0);
+          this.deltaY = new Animated.Value(0);
+
+          this.heightImageBanner = Utils.scaleWithPixel(250, 1);
+          this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
+
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
 
      }
 
+
+
      static options(passProps) {
           return {
                topBar: {
@@ -101,6 +124,22 @@ export default class WalletDetail extends Component {
           }
      };
 
+     componentDidMount() {
+          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
+               let agentId = this.props.navigation.state.params.agentId;
+               this.props.getWalletActivated(agentId);
+          }
+     }
+
+     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()
@@ -125,6 +164,7 @@ export default class WalletDetail extends Component {
           });
      }
 
+
      renderTabBar = props => (
           <TabBar
                {...props}
@@ -140,7 +180,7 @@ export default class WalletDetail extends Component {
                          width: Utils.getWidthDevice() / 2,
                          alignItems: 'center'
                     }}>
-                         <CustomText headline semibold={focused} style={{ color }}>
+                         <Text style={Typography.headline} style={{ color }}>
                               {
                                    (route.key === 'depot') ?
                                         (<Icon name='arrow-bottom-right'
@@ -151,7 +191,7 @@ export default class WalletDetail extends Component {
                               }
                               {`  ${route.title}`}
 
-                         </CustomText>
+                         </Text>
 
                     </View>
                )}
@@ -159,20 +199,153 @@ export default class WalletDetail extends Component {
           />
      );
 
+     renderHeader = (wallet) => (
+          <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}>{wallet.country}</Text>
+               </View>
 
-     render() {
+               <View style={{
-          const { index, routes } = this.state;
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+               }}>
+                    <Animated.Image
+                         source={{ uri: this.getWalletIcon(wallet) }}
+                         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}>{wallet.network}</Text>
+                         <Tag primary style={styles.tagFollow}>
+                              {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
+                         </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}>{this.getCreationDateToHumanFormat(wallet.created_date)}</Text>
+               </View>
+          </View>
+     );
+
+     renderLoader = () => {
           return (
-               <SafeAreaView forceInset={{ top: 'always' }} style={styles.container}>
+               <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                    {Platform.OS === 'android'
+                         ?
+                         (
+                              <>
+                                   <ProgressBarAndroid />
+                                   <Text>{I18n.t('LOADING_DOTS')}</Text>
 
-                    <StatusBar
+                              </>
-                         backgroundColor={Color.primaryDarkColor}
+                         ) :
-                         barStyle="light-content"
+                         <>
-                         translucent={false}
+                              <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]}>{wallet.balance_princ}</Text>
+                    </View>
+               </View>
+
+               <View
+                    style={{
+                         flexDirection: 'row',
+                         alignItems: 'center',
+                    }}>
+                    <View
+                         style={[
+                              styles.circlePoint,
+                              { backgroundColor: Color.primaryColor },
+                         ]}>
+                         <Icons name='md-cash'
+                              size={28}
+                              color={Color.whiteColor}
+                         />
+                    </View>
+                    <View>
+                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
+                              {I18n.t('COMMISSION_ACCOUNT_TITLE')}
+                         </Text>
+                         <Text style={Typography.body2}>{wallet.balance_com}</Text>
+                    </View>
+               </View>
+
+          </View>
+     );
+
+     renderDetailWallet = (wallet) => {
+          return (
+               <View
+                    style={styles.container}>
+
+                    <Animated.View style={{
+                         position: 'absolute',
+                         width: "100%",
+                         zIndex: 1,
+                         backgroundColor: Color.primaryColor,
+                         height: 150
+                    }} />
 
                     <ScrollView style={{
-                         flex: 1
+                         paddingHorizontal: 20, position: 'absolute',
+                         width: '100%',
+                         height: '100%',
+                         zIndex: 2
                     }}
                          scrollEventThrottle={8}
                          onScroll={Animated.event([
@@ -182,67 +355,131 @@ export default class WalletDetail extends Component {
                                    },
                               },
                          ])}>
+                         <View style={{ marginTop: 80, }}>
 
-                         <View style={[styles.containField, { backgroundColor: Color.cardBackgroundColor }]}>
+                              {this.renderHeader(wallet)}
-                              <View style={styles.contentLeftItem}>
-                                   <CustomText numberOfLines={1} caption1 >{I18n.t('COMMISSION_ACCOUNT_TITLE')}</CustomText>
-                                   <CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>100 000F</CustomText>
-                              </View>
 
-                              <View style={{
+                              <View
-                                   flex: 1,
+                                   style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
-                                   alignItems: 'center',
-                                   justifyContent: 'flex-end'
-                              }}>
-                                   <Animated.Image
-                                        source={Images.userAvatar}
-                                        style={{
-                                             width: 120,
-                                             height: 120,
-                                             borderRadius: 60,
-                                             position: 'absolute',
-                                             alignSelf: 'center',
-                                             bottom: 70,
-                                             transform: [{
-                                                  scale: this.imageScale()
-                                             },
-                                             {
-                                                  translateY: this.imageTranslateY()
-                                             }]
-                                        }} />
 
-                                   <View style={{
+                                   {this.renderAccountDetail(wallet)}
-                                        marginTop: 1, flex: 1,
+
-                                        alignItems: 'center',
+                                   <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
-                                        justifyContent: 'flex-end'
+                                        <Text
-                                   }}>
+                                             style={[Typography.title3, Typography.semibold]}>
-                                        <CustomText headline semibold numberOfLines={1}>Brice Zele</CustomText>
+                                             {I18n.t('TRANSACTIONS')}
-                                        <Tag primary style={styles.tagFollow}>
+                                        </Text>
-                                             {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')} ->
-                                        </Tag>
                                    </View>
+
+                                   <View style={styles.transactionContainer}>
+
+                                        <View style={[styles.containerTouch]}>
+
+                                             <TouchableOpacity style={styles.contain}
+                                                  onPress={() => console.log('click')}
+                                                  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 style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                 {I18n.t('DEPOSIT_DESCRIPTION')}
+                                                            </Text>
+                                                       </View>
+
+                                                  </View>
+                                             </TouchableOpacity>
+                                        </View>
+
+                                        <View style={styles.containerTouch}>
+                                             <TouchableOpacity style={styles.contain}
+                                                  onPress={() => console.log('click')}
+                                                  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.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
+                                                                 {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                            </Text>
+                                                       </View>
+
+                                                  </View>
+                                             </TouchableOpacity>
+                                        </View>
+                                   </View>
+
                               </View>
-                              <View style={styles.contentLeftItem}>
+
-                                   <CustomText numberOfLines={1} caption1 >{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}</CustomText>
+                              {/*                           <TabView
-                                   <CustomText numberOfLines={1} adjustsFontSizeToFit={true} body1 semibold>1000 000F</CustomText>
+                                   lazy
-                              </View>
+                                   navigationState={{ index, routes }}
+                                   renderScene={SceneMap({
+                                        'depot': FirstRoute,
+                                        'retrait': SecondRoute
+                                   })}
+                                   onIndexChange={this.handleIndexChange}
+                                   renderTabBar={this.renderTabBar}
+                              /> */}
                          </View>
-                         <TabView
+
-                              lazy
-                              navigationState={{ index, routes }}
-                              renderScene={SceneMap({
-                                   'depot': FirstRoute,
-                                   'retrait': SecondRoute
-                              })}
-                              onIndexChange={this.handleIndexChange}
-                              renderTabBar={this.renderTabBar}
-                         />
                     </ScrollView>
-               </SafeAreaView>
+               </View>
+          )
+     }
+
+
+     render() {
+          const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
+          //const { wallet } = this.props.navigation.state.params;
+
+          console.log("WALLET DETAILS is From Root", isHomeRootView);
+          console.log("WALLET DETAILS PROPS", this.props);
+          return (
+               !isHomeRootView ?
+                    this.renderDetailWallet(this.props.navigation.state.params.wallet)
+                    :
+                    (this.props.loading ?
+                         this.renderLoader() :
+                         this.renderDetailWallet(this.props.result.response[0])
+                    )
           );
      }
 }
 
+
+const mapStateToProps = state => ({
+     loading: state.walletReducer.loading,
+     result: state.walletReducer.result,
+     error: state.walletReducer.error
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+     getWalletActivated
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
 const styles = StyleSheet.create({
      container: {
           flex: 1,
@@ -257,9 +494,18 @@ const styles = StyleSheet.create({
      tabbar: {
           height: 40
      },
+     imgBanner: {
+          width: '100%',
+          height: 250,
+          position: 'absolute',
+     },
      containField: {
-          margin: 20,
+          padding: 10,
-          marginTop: 90,
+          marginBottom: 20,
+          borderWidth: 0.5,
+          shadowOffset: { width: 1.5, height: 1.5 },
+          shadowOpacity: 1.0,
+          elevation: 5,
           flexDirection: "row",
           height: 140,
           borderRadius: 10
@@ -286,5 +532,55 @@ const styles = StyleSheet.create({
           borderBottomWidth: 1,
           paddingVertical: 15,
           marginTop: 10
+     },
+     blockView: {
+          paddingVertical: 10,
+          borderBottomWidth: 0.5,
+     },
+     circlePoint: {
+          width: 50,
+          height: 50,
+          borderRadius: 25,
+          marginRight: 5,
+          alignItems: 'center',
+          justifyContent: 'center',
+     },
+     transactionContainer: {
+          flexDirection: 'row',
+          paddingTop: 20,
+     },
+     containerTouch: {
+          flex: 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          shadowColor: Color.borderColor,
+          borderColor: Color.borderColor,
+          borderWidth: 0.5,
+          shadowOffset: { width: 1.5, height: 1.5 },
+          shadowOpacity: 1.0,
+          elevation: 5,
+          borderRadius: 10,
+          backgroundColor: Color.cardBackgroundColor
+     },
+
+     contain: {
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+     },
+     imageBanner: {
+          marginTop: 15,
+          marginLeft: 5,
+          width: Utils.scaleWithPixel(30),
+          height: Utils.scaleWithPixel(30)
+     },
+     content: {
+          height: Utils.scaleWithPixel(50),
+          paddingHorizontal: 10,
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          flex: 1,
+     },
+     contentTitle: {
+          paddingTop: 5,
      }
 })

screens/wallet/WalletSelect.js

@@ -1,12 +1,11 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Image, StatusBar, ScrollView, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
+import { StyleSheet, View, Image, StatusBar, Alert, ScrollView, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 const route = require('./../../route.json');
 let slugify = require('slugify');
 import I18n from 'react-native-i18n'
 import * as Utils from '../../utils/DeviceUtils';
 import { Images } from '../../config/Images';
-import CustomText from '../../components/CustomText';
 import { Color } from '../../config/Color';
 import { baseUrl } from '../../webservice/IlinkConstants';
 import { IlinkEmitter } from "../../utils/events";
@@ -15,6 +14,7 @@ import getWalletActivated from '../../webservice/WalletApi';
 import { connect } from 'react-redux';
 import { readUser } from '../../webservice/AuthApi';
 import { bindActionCreators } from 'redux';
+import { FontWeight, Typography } from '../../config/typography';
 
 class WalletSelect extends Component {
 
@@ -22,6 +22,10 @@ class WalletSelect extends Component {
           super(props);
           slugify.extend({ '+': 'plus' });
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
+          this.state = {
+               result: null,
+               isDataLoaded: false
+          }
      }
 
      static navigationOptions = ({ navigation }) => ({
@@ -44,7 +48,10 @@ class WalletSelect extends Component {
 
           readUser().then((user) => {
                if (user) {
-                    this.props.getWalletActivated(user.agentId);
+                    if (user !== undefined) {
+                         if (user.phone !== undefined)
+                              this.props.getWalletActivated(user.agentId);
+                    }
                }
           });
 
@@ -82,16 +89,16 @@ class WalletSelect extends Component {
                <TouchableOpacity
                     key={item.id}
                     style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
-                    onPress={() => this.props.navigation.push('walletDetail')}>
+                    onPress={() => this.props.navigation.push('walletDetail', { wallet: item })}>
                     <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                          <View style={styles.iconContent}>
                               <Image style={{ width: 48, height: 48 }} source={{ uri: icon }} />
                          </View>
                          <View>
-                              <CustomText body1>{item.network}</CustomText>
+                              <Text style={Typography.body1}>{item.network}</Text>
-                              <CustomText footnote grayColor style={{ marginTop: 5 }}>
+                              <Text style={[Typography.footnote, Color.grayColor]} style={{ marginTop: 5 }}>
                                    {I18n.t('COUNTRY')}: {item.country}
-                              </CustomText>
+                              </Text>
                          </View>
                     </View>
                </TouchableOpacity>
@@ -104,26 +111,33 @@ class WalletSelect extends Component {
           if (error !== null) {
                return (
                     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-                         <CustomText body1>{error}</CustomText>
+                         <Text style={Typography.body1}>{error}</Text>
                     </View>
                )
           }
-          if (result !== null)
+          if (result !== null) {
-               return (
+               if (result.response !== null) {
-                    <ScrollView style={{ flex: 1, padding: 20 }}>
+                    return (
-                         {
+                         Array.isArray(result.response) && (result.response.length) > 0 ?
-                              result != null && (
+                              (<ScrollView style={{ flex: 1, padding: 20 }}>
-                                   result.response.map((item, index) => (
+                                   {
-                                        this.renderWalletItem(item)
+                                        result.response.map((item, ) => (
-                                   ))
+                                             this.renderWalletItem(item)
+                                        ))
+                                   }
+                              </ScrollView>) :
+                              (
+                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+                                        <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
+                                   </View>
                               )
-                         }
+                    )
-                    </ScrollView>
+               }
-               )
+          }
+
      }
 
      render() {
-          console.log("WALLET PROPS", this.props);
           return (
                <Provider>
                     <View style={{ flex: 1 }}>

utils/i18n/en.json

@@ -33,14 +33,19 @@
     "ASK_MEMBERS": "Membership applications",
     "MY_ACCOUNT": "My account",
     "WALLET": "Wallet",
+    "DEPOSIT_DESCRIPTION": "Make a deposit",
     "DEPOSIT": "Deposit",
-    "WITHDRAWAL": "Wirthdrawal",
+    "WITHDRAWAL": "Withdrawal",
+    "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
     "COMMISSION_ACCOUNT_TITLE": "Commission account",
+    "CREATION_DATE": "Creation date",
     "PRINCIPAL_ACCOUNT_TITLE": "Principal account",
+    "NO_WALLET_ACTIVED": "PNo wallet is activated for your account",
     "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
     "PRINCIPAL": "Principal",
     "ENTER_YOUR_CARD_ID": "Please enter your bank card ID",
     "SELECT_YOUR_WALLET": "Selec your wallet",
+    "TRANSACTIONS": "Transactions",
     "THE_ACCOUNT": "Account ",
     "NO_GEO_POINT_CODE": "You have no free geolocated point",
     "NO_DEMAND_ADHESION": "You have no membership request",

utils/i18n/fr.json

@@ -34,11 +34,16 @@
     "MY_ACCOUNT": "Mon compte",
     "WALLET": "Wallet",
     "DEPOSIT": "Dépôt",
+    "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
     "WITHDRAWAL": "Retrait",
+    "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
     "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
     "PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
+    "TRANSACTIONS": "Transactions",
+    "NO_WALLET_ACTIVED": "Aucun wallet n'est activé pour votre compte",
     "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer les commissions",
     "PRINCIPAL": "Principal",
+    "CREATION_DATE": "Date de création",
     "ENTER_YOUR_CARD_ID": "Entrer vos identifiants bancaires",
     "THE_ACCOUNT": "Le compte ",
     "NO_GEO_POINT_CODE": "Vous n'avez aucun point geolocalisé libre",

webservice/AuthKeyApi.js

@@ -2,10 +2,14 @@ import axios from "axios";
 import { authKeyUrl, authKeyData } from "./IlinkConstants";
 import { fetchAuthKeySuccess, fetchAuthKeyPending, fetchAuthKeyError } from "../redux/actions/AuthKeyActions";
 
-const getAuthApiKey = (email) => {
+const getAuthApiKey = (phone) => {
+
+     const data = authKeyData;
+     authKeyData.username = phone;
+     authKeyData.password = "";
+
      return dispatch => {
           dispatch(fetchAuthKeyPending());
-
           axios.post(authKeyUrl, authKeyData)
                .then(response => {
                     dispatch(fetchAuthKeySuccess(response));

webservice/FetchQuery.js

@@ -1,15 +0,0 @@
-import { store } from "../redux/store";
-import axios from "axios";
-
-const auth = store.getState().authKeyReducer;
-
-console.log("STORE", auth);
-
-const fetchQuery = axios.create({
-     timeout: 10000,
-     /*      headers: {
-               'Authorization': auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : ''
-          } */
-});
-
-export default fetchQuery;

webservice/IlinkConstants.js

@@ -22,7 +22,7 @@ export const videoUrl = "https://www.youtube.com/watch?v=wwGPDPsSLWY";
 export const MARKER_URL = baseUrl + "/interacted/LocationAction.php";
 
 export const authKeyData = {
-     "grant_type": "client_credentials",
+     "grant_type": "password",
-     "client_id": "3",
+     "client_id": "2",
-     "client_secret": "E3jAPczLLGvQu87ulQqKB5yM7BXXQUwpL68CPBXe"
+     "client_secret": "rrbvxACJPBOG4cqjDNlstSljlmjydLon3P55JMav",
 };

webservice/WalletApi.js

@@ -1,7 +1,6 @@
 
 import { walletActionUrl } from "./IlinkConstants";
 import { fetchWalletListPending, fetchWalletListSuccess, fetchWalletListError } from "../redux/actions/WalletActions";
-import fetchQuery from "./FetchQuery";
 import { store } from "../redux/store";
 import axios from "axios";
 
@@ -10,8 +9,6 @@ const getWalletActivated = (userID) => {
      const auth = store.getState().authKeyReducer;
      const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
 
-     console.log('AUTHKEY', authKey);
-
      return dispatch => {
           dispatch(fetchWalletListPending());
 
@@ -23,11 +20,16 @@ const getWalletActivated = (userID) => {
                }
           })
                .then(response => {
-                    console.log(response);
                     dispatch(fetchWalletListSuccess(response));
                })
                .catch(error => {
                     dispatch(fetchWalletListError(error.message));
+                    if (error.response)
+                         dispatch(fetchWalletListError(error.response));
+                    else if (error.request)
+                         dispatch(fetchWalletListError(error.request))
+                    else
+                         dispatch(fetchWalletListError(error.message))
                });
      }
 }

yarn.lock

@@ -880,6 +880,11 @@
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
+"@monterosa/react-native-parallax-scroll@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@monterosa/react-native-parallax-scroll/-/react-native-parallax-scroll-1.8.0.tgz#04339a772c02818b229582a8b903aca4f9106005"
+  integrity sha512-fFzJvMNN77d78haErRrZ/X64H0Vjz+5CvXSHBqxjlRQmhUB/R7BnqHwO3WFKGv2/Hv30LpL+0MSfHZeukglvDA==
+
 "@react-native-community/async-storage@^1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@react-native-community/async-storage/-/async-storage-1.9.0.tgz#af26a8879bd2987970fbbe81a9623851d29a56f1"