Validation identification

App.js

@@ -50,6 +50,7 @@ import WalletRetrait from './screens/wallet/WalletRetrait';
 import CreateIdentification from './screens/identification/createIdentification';
 import WalletDetailUser from './screens/wallet/WalletDetailUser';
 import WalletOptionSelect from './screens/wallet/WalletOptionSelect';
+import ValidateIdentification from './screens/identification/validateIdentification';
 
 const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -99,6 +100,7 @@ const AppAgentStack = createDrawerNavigator({
           useraccount: UserAccount,
           walletSelect: WalletSelect,
           createIdentification: CreateIdentification,
+          validateIdentification: ValidateIdentification,
           Historique:
           {
                screen: createBottomTabNavigator({ myDemand: MyHistory }, {

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

@@ -32,5 +32,7 @@
   "walletDepot": "walletDepot",
   "walletRetrait": "walletRetrait",
   "walletSelect": "walletSelect",
-  "walletOptionSelect": "walletOptionSelect"
+  "walletOptionSelect": "walletOptionSelect",
+  "createIdentification": "createIdentification",
+  "validateIdentification": "validateIdentification"
 }

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

@@ -71,11 +71,13 @@
   "DEPOSIT_CASH_TO_VISA": "Cash to visa card",
   "DEPOSIT_CASH_TO_BANK": "Cash to bank",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet to wallet",
-  "DEPOSIT_TO_CASH": "Deposit to cash",
+  "DEPOSIT_TO_CASH": "Wallet to cash",
-  "DEPOSIT_TO_CARD": "Deposit to card",
+  "DEPOSIT_TO_CARD": "Wallet to card",
-  "DEPOSIT_TO_BANK": "Deposit to bank",
+  "DEPOSIT_TO_BANK": "Wallet to bank",
   "NANO_CREDIT": "Nano credit",
+  "NANO_CREDIT_DESCRIPTION": "Nano credit description",
   "NANO_SANTE": "Nano health",
+  "NANO_SANTE_DESCRIPTION": "Nano health description",
   "PAIEMENT_FACTURE": "Bill payment",
   "DEMAND_SEND": "Demand send",
   "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
@@ -94,6 +96,7 @@
   "SELECT_YOUR_WALLET": "Select your wallet",
   "TRANSACTIONS": "Transactions",
   "TRANSACTION_HISTORY": "Transactions history",
+  "HISTORY": "History",
   "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Deposit of",
   "NO_WALLET_HISTORY": "No transaction",
   "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Withdrawal of",
@@ -141,6 +144,7 @@
   "CHOICE_TOWN": "Choose a town",
   "PIECE_IDENTITE": "Identity piece",
   "IDENTITY_CARD": "Identity card",
+  "NUMERO_IDENTITE": "Identity number",
   "PASSEPORT": "Passeport",
   "OTHER_IDENTITY_PIECE": "Other",
   "IDENTITY_NUMBER": "N° of piece",

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

@@ -76,11 +76,13 @@
   "DEPOSIT_CASH_TO_VISA": "Cash vers carte visa",
   "DEPOSIT_CASH_TO_BANK": "Cash vers banque",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet vers wallet",
-  "DEPOSIT_TO_CASH": "Dépôt vers cash",
+  "DEPOSIT_TO_CASH": "Wallet vers cash",
-  "DEPOSIT_TO_CARD": "Dépôt vers carte",
+  "DEPOSIT_TO_CARD": "Wallet vers carte",
-  "DEPOSIT_TO_BANK": "Dépôt vers banque",
+  "DEPOSIT_TO_BANK": "Wallet vers banque",
   "NANO_CREDIT": "Nano crédit",
+  "NANO_CREDIT_DESCRIPTION": "Nano crédit iLink",
   "NANO_SANTE": "Nano santé",
+  "NANO_SANTE_DESCRIPTION": "Nano santé iLink",
   "PAIEMENT_FACTURE": "Paiement de facture",
   "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
   "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
@@ -92,12 +94,13 @@
   "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
   "TRANSACTIONS": "Transactions",
   "TRANSACTION_HISTORY": "Historique des transactions",
+  "HISTORY": "Historique",
   "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Retrait de",
   "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Dépôt de",
   "NO_WALLET_HISTORY": "Aucune transaction à ce jour",
   "DEMAND_SEND": "Demande envoyé",
   "NO_WALLET_ACTIVED": "Aucun wallet n'est activé pour votre compte",
-  "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer les commissions",
+  "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer commissions",
   "PRINCIPAL": "Principal",
   "CREATION_DATE": "Date de création",
   "ENTER_YOUR_CARD_ID": "Entrer vos identifiants bancaires",
@@ -146,6 +149,7 @@
   "CHOICE_TOWN": "Choisissez une ville",
   "PIECE_IDENTITE": "Pièce d'identité",
   "IDENTITY_CARD": "Carte d'identité",
+  "NUMERO_IDENTITE": "Numéro d'identité",
   "PASSEPORT": "Passeport",
   "OTHER_IDENTITY_PIECE": "Autre",
   "IDENTITY_NUMBER": "N° de la pièce",
@@ -295,7 +299,7 @@
   "CREATION_IDENTIFICATION_CLIENT": "M'identifier",
   "CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
   "VALIDATE_IDENTIFICATION": "Validation",
-  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identification",
   "CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
   "DATE_NAISSANCE": "Date de naissance",
   "REGISTER_YOURSELF": "Enregistrez-vous",

components/Tag/index.js

@@ -85,7 +85,7 @@ export default function Tag(props) {
                          textStyle,
                     ])}
                     numberOfLines={1}>
-                    {children || 'Tag'}
+                    {children || ''}
                </CustomText>
           </TouchableOpacity>
      );

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.9.0",
+    "@react-native-community/datetimepicker": "^2.4.0",
     "@react-native-community/viewpager": "^3.3.0",
     "apsl-react-native-button": "^3.1.1",
     "axios": "^0.19.2",
@@ -79,7 +80,8 @@
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.3.0",
-    "slugify": "^1.4.0"
+    "slugify": "^1.4.0",
+    "thousands": "^1.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",

route.json

@@ -32,5 +32,7 @@
   "walletDepot": "walletDepot",
   "walletRetrait": "walletRetrait",
   "walletSelect": "walletSelect",
-  "walletOptionSelect": "walletOptionSelect"
+  "walletOptionSelect": "walletOptionSelect",
+  "createIdentification": "createIdentification",
+  "validateIdentification": "validateIdentification"
 }

screens/groupes/SuperViseurGroupeHome.js

@@ -34,7 +34,7 @@ import DeviceInfo from 'react-native-device-info'
 import { Color } from '../../config/Color'
 import { Typography, FontWeight } from '../../config/typography'
 import { thousandsSeparators } from '../../utils/UtilsFunction'
-
+const thousands = require('thousands');
 
 var users = null;
 var chart = null;
@@ -326,7 +326,7 @@ export default class SuperViseurGroupeHome extends BaseScreen {
                                                   <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 1 }}>
                                                        {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                                                   </Text>
-                                                  <Text style={[Typography.body2]}>{item.balance_princ === null ? 0 : thousandsSeparators(item.balance_princ)}</Text>
+                                                  <Text style={[Typography.body2]}>{item.balance_princ === null ? 0 : thousands(item.balance_princ, ' ')}</Text>
                                              </View>
                                         </View>
 
@@ -350,7 +350,7 @@ export default class SuperViseurGroupeHome extends BaseScreen {
                                                   <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 1 }}>
                                                        {I18n.t('COMMISSION_ACCOUNT_TITLE')}
                                                   </Text>
-                                                  <Text style={Typography.body2}>{item.balance_com === null ? 0 : thousandsSeparators(item.balance_com)}</Text>
+                                                  <Text style={Typography.body2}>{item.balance_com === null ? 0 : thousands(item.balance_com, ' ')}</Text>
                                              </View>
                                         </View>
                                    </View>

screens/home/Home.js

@@ -1389,6 +1389,7 @@ class Home extends BaseScreen {
                          barStyle="light-content"
                          translucent={true}
                     />
+                    {/* Start here to comment */}
                     {
                          (this.state.loadingDialog || this.props.loading) ?
                               <View

screens/identification/createIdentification.js

@@ -54,8 +54,10 @@ export default class CreateIdentification extends Component {
           this.state = {
                password: null,
                enterPhone: null,
+               numeroIdentite: null,
                nameanim: null,
                dateNaissance: new Date(),
+               dateExpiration: new Date(),
                networksinglePickerVisible: false,
                passwordanim: null,
                confirmpassanim: null,
@@ -69,6 +71,7 @@ export default class CreateIdentification extends Component {
                disableNetwork: false,
                networks: [],
                showPickerDateNaissance: false,
+               showPickerDateExpiration: false,
                modalVisible: true,
                select_network: I18n.t("SELECT_NETWORK"),
                user: null
@@ -76,6 +79,7 @@ export default class CreateIdentification extends Component {
           this.dateNaissanceRef = null;
           this.surnameanim = null;
           this.dateNaissanceFumiProps = {};
+          this.dateExpirationFumiProps = {};
      }
 
      componentDidMount() {
@@ -96,6 +100,8 @@ export default class CreateIdentification extends Component {
      componentWillUpdate(nextProps, nextState) {
           if (this.state.showPickerDateNaissance)
                this.dateNaissanceFumiProps.value = moment(nextState.dateNaissance).format('DD-MM-YYYY');
+          if (this.state.showPickerDateExpiration)
+               this.dateExpirationFumiProps.value = moment(nextState.dateExpiration).format('DD-MM-YYYY');
      }
 
      componentWillUnmount() {
@@ -235,7 +241,7 @@ export default class CreateIdentification extends Component {
 
      }
 
-     onChange = (event, selectedDate) => {
+     onChangeDateNaissance = (event, selectedDate) => {
           const currentDate = selectedDate || this.state.dateNaissance;
           this.setState({
                showPickerDateNaissance: Platform.OS === 'ios' || false,
@@ -243,6 +249,14 @@ export default class CreateIdentification extends Component {
           });
      };
 
+     onChangeDateExpiration = (event, selectedDate) => {
+          const currentDate = selectedDate || this.state.dateExpiration;
+          this.setState({
+               showPickerDateExpiration: Platform.OS === 'ios' || false,
+               dateExpiration: currentDate,
+          });
+     };
+
      renderLoaderModal() {
           return (<MaterialDialog
                visible={this.state.modalVisible}
@@ -264,8 +278,23 @@ export default class CreateIdentification extends Component {
                     value={this.state.dateNaissance}
                     mode='date'
                     maximumDate={new Date()}
-                    display="calendar"
+                    display="spinner"
-                    onChange={this.onChange}
+                    onChange={this.onChangeDateNaissance}
+               />
+          );
+     }
+
+     renderDateExpirationPicker = () => {
+          return (
+               <DateTimePicker
+                    testID="dateTimePicker"
+                    timeZoneOffsetInMinutes={0}
+                    is24Hour={true}
+                    value={this.state.dateExpiration}
+                    mode='date'
+                    maximumDate={new Date(2300, 10, 20)}
+                    display="spinner"
+                    onChange={this.onChangeDateExpiration}
                />
           );
      }
@@ -276,12 +305,12 @@ export default class CreateIdentification extends Component {
           return (
                <>
                     {this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
+                    {this.state.showPickerDateExpiration && this.renderDateExpirationPicker()}
                     {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 }}
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
-                                   iconClass={FontAwesomeIcon} iconName={'user'}
                                    label={`${I18n.t('NAME')} ${I18n.t('AND')} ${I18n.t('FIRSTNAME')}`}
                                    iconColor={'#f95a25'}
                                    iconSize={20}
@@ -378,6 +407,18 @@ export default class CreateIdentification extends Component {
                                    labelExtractor={(value) => { return value.name }}
                               />
                          </View>
+                         <Animatable.View ref={(comp) => { this.nameanim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
+                                   label={`${I18n.t('NUMERO_IDENTITE')}`}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   onChangeText={(numeroIdentite) => {
+                                        this.setState({ numeroIdentite })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
                          <Animatable.View ref={(comp) => { this.surnameanim = comp }}>
                               <Fumi iconClass={FontAwesomeIcon} iconName={'calendar-times-o'}
                                    label={I18n.t('IDENTITY_PIECE_EXPIRY_DATE')}
@@ -386,17 +427,17 @@ export default class CreateIdentification extends Component {
                                    style={styles.input}
                                    onFocus={() => {
                                         Keyboard.dismiss();
-                                        this.setState({ showPickerDateNaissance: true })
+                                        this.setState({ showPickerDateExpiration: true })
                                    }}
-                                   {...this.dateNaissanceFumiProps}>
+                                   {...this.dateExpirationFumiProps}>
                               </Fumi>
                          </Animatable.View>
 
                          <Button style={styles.btnvalide}
                               textStyle={styles.textbtnvalide}
                               isLoading={this.state.isLoging}
-                              onPress={() => { this.checkUserGeolocated() }}>
+                              onPress={() => { }}>
-                              {I18n.t('NEXT')}</Button>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
 
                     </ScrollView>
                </>

screens/identification/validateIdentification.js

@@ -0,0 +1,206 @@
+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');
+import LottieView from 'lottie-react-native';
+
+
+export default class ValidateIdentification extends Component {
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               memberCode: null
+          };
+     }
+
+     componentDidMount() {
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+     }
+
+     componentWillUnmount() {
+     }
+
+     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 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()
+                         }
+                    }])
+          }
+     }
+
+     render() {
+          console.log("STATE", this.state);
+          const { showPickerDateNaissance } = this.state;
+          return (
+               <>
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
+
+                         <Animatable.View style={{
+                              justifyContent: 'center',
+                              alignItems: 'center'
+                         }} ref={(comp) => { this.nameanim = comp }}>
+                              <LottieView
+                                   style={styles.lottie}
+                                   source={require('../../datas/json/identity_scan.json')}
+                                   autoPlay
+                                   loop={true}
+                              />
+                         </Animatable.View>
+
+                         <Animatable.View ref={(comp) => { this.nameanim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
+                                   label={`${I18n.t('MEMBER_CODE')}`}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   onChangeText={(memberCode) => {
+                                        this.setState({ memberCode })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              isLoading={this.state.isLoging}
+                              onPress={() => { }}>
+                              {I18n.t('SUBMIT_LABEL')}</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,
+     },
+     lottie: {
+          width: 540,
+          height: 300
+     },
+});

screens/optionMenu/OptionsMenu.js

@@ -252,7 +252,7 @@ export default class OptionsMenu extends Component {
      }
      _renderItem = (item) => {
           if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDetailUser'
-               || item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification' || item === 'walletOptionSelect') {
+               || item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification' || item === 'walletOptionSelect' || item === 'validateIdentification') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"

screens/wallet/WalletDetail.js

@@ -31,8 +31,9 @@ import 'moment/locale/en-nz'
 import 'moment/locale/en-gb'
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { thousandsSeparators, isEmptyObject, transactionHistoryUser, optionDepotUserScreen, optionDepotScreen, optionRetraitScreen, optionRetraitUserScreen, transactionHistoryLabel, isIlinkWorldWallet, cutString } from '../../utils/UtilsFunction';
+import { thousandsSeparators, isEmptyObject, transactionHistoryUser, optionDepotUserScreen, optionDepotScreen, optionRetraitScreen, optionRetraitUserScreen, transactionHistoryLabel, isIlinkWorldWallet, cutString, optionIdentificationScreen } from '../../utils/UtilsFunction';
 import DeviceInfo from 'react-native-device-info';
+const thousands = require('thousands');
 
 let route = require('./../../route.json');
 let slugify = require('slugify');
@@ -333,7 +334,11 @@ class WalletDetail extends Component {
                          justifyContent: 'flex-end'
                     }}>
                          <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
-                         <Tag primary style={styles.tagFollow}
+                         <View style={{ flexDirection: 'row' }}>
+
+                              <Tag primary
+                                   icon={<Icon name='swap-horizontal' size={20} color={Color.whiteColor} style={{ marginLeft: 15 }} />}
+                                   style={{ paddingRight: 10, width: 120, borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 1, borderRightColor: Color.whiteColor }}
                                    onPress={() => {
                                         const { result } = this.props;
 
@@ -381,6 +386,16 @@ class WalletDetail extends Component {
                                    }}>
                                    {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
                               </Tag>
+                              <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{ marginLeft: -15 }} />}
+                                   style={{ width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }}
+                                   primary
+                                   onPress={() => {
+                                        this._scrollView.scrollToEnd();
+                                   }}>
+                                   {I18n.t('HISTORY')}
+
+                              </Tag>
+                         </View>
                     </View>
                </View>
                <View style={styles.contentLeftItem}>
@@ -433,7 +448,7 @@ class WalletDetail extends Component {
                          <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                               {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                          </Text>
-                         <Text style={[Typography.body2]}>{thousandsSeparators(wallet.balance_princ)}</Text>
+                         <Text style={[Typography.body2]}>{thousands(wallet.balance_princ, ' ')}</Text>
                     </View>
                </View>
 
@@ -456,7 +471,7 @@ class WalletDetail extends Component {
                          <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                               {I18n.t('COMMISSION_ACCOUNT_TITLE')}
                          </Text>
-                         <Text style={Typography.body2}>{thousandsSeparators(wallet.balance_com)}</Text>
+                         <Text style={Typography.body2}>{thousands(wallet.balance_com, ' ')}</Text>
                     </View>
                </View>
 
@@ -488,7 +503,8 @@ class WalletDetail extends Component {
                                    height: 140 - this.state.scrollHeaderY,
                               }} />
 
-                              <ScrollView style={{
+                              <ScrollView ref={component => this._scrollView = component}
+                                   style={{
                                         paddingHorizontal: 20, position: 'absolute',
                                         width: '100%',
                                         height: '100%',
@@ -532,6 +548,10 @@ class WalletDetail extends Component {
                                                                                      optionSelect: optionDepotScreen,
                                                                                      wallet,
                                                                                      onGoBack: () => this.refresh(),
+                                                                                     lottie: {
+                                                                                          source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                          loop: false
+                                                                                     }
                                                                                 })
                                                                            } else {
                                                                                 this.props.navigation.push(route.walletDepot, {
@@ -573,6 +593,10 @@ class WalletDetail extends Component {
                                                                                      optionSelect: optionRetraitScreen,
                                                                                      wallet,
                                                                                      onGoBack: () => this.refresh(),
+                                                                                     lottie: {
+                                                                                          source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                          loop: true
+                                                                                     }
                                                                                 })
                                                                            } else {
                                                                                 this.props.navigation.push(route.walletRetrait, {
@@ -632,7 +656,7 @@ class WalletDetail extends Component {
 
                                                                                      <View style={{ flex: 1 }}>
                                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
-                                                                                               {I18n.t('WITHDRAWAL_DESCRIPTION')}
+                                                                                               {I18n.t('NANO_CREDIT_DESCRIPTION')}
                                                                                           </Text>
                                                                                      </View>
 
@@ -659,7 +683,7 @@ class WalletDetail extends Component {
 
                                                                                      <View style={{ flex: 1 }}>
                                                                                           <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
-                                                                                               {I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
+                                                                                               {I18n.t('NANO_SANTE_DESCRIPTION')}
                                                                                           </Text>
                                                                                      </View>
 
@@ -698,50 +722,18 @@ class WalletDetail extends Component {
                                                                            </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) }}
+                                                                                onPress={() => {
+                                                                                     this.props.navigation.push(route.walletOptionSelect, {
+                                                                                          optionSelect: optionIdentificationScreen,
+                                                                                          lottie: {
+                                                                                               source: require("./../../datas/json/identification.json"),
+                                                                                               loop: true
+                                                                                          }
+                                                                                     })
+                                                                                }}
                                                                                 activeOpacity={0.9}>
 
                                                                                 <Icon name='pencil-plus'
@@ -753,13 +745,12 @@ class WalletDetail extends Component {
 
                                                                                      <View style={styles.contentTitle}>
                                                                                           <Text style={[Typography.headline, Typography.semibold]}>
-                                                                                               {I18n.t('CREATION_IDENTIFICATION')}
+                                                                                               {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
                                                                                           </Text>
                                                                                      </View>
 
                                                                                      <View style={{ flex: 1 }}>
                                                                                           <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
-                                                                                               {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
                                                                                           </Text>
                                                                                      </View>
 
@@ -767,33 +758,9 @@ class WalletDetail extends Component {
                                                                            </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

@@ -33,7 +33,8 @@ import 'moment/locale/en-gb'
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { thousandsSeparators, isEmptyObject, transactionHistoryUser, optionDepotUserScreen, optionRetraitUserScreen, transactionHistoryLabel } from '../../utils/UtilsFunction';
-import DeviceInfo from 'react-native-device-info'
+import DeviceInfo from 'react-native-device-info';
+const thousands = require('thousands');
 
 let route = require('./../../route.json');
 let slugify = require('slugify');
@@ -218,8 +219,11 @@ class WalletDetailUser extends Component {
                          justifyContent: 'flex-end'
                     }}>
                          <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
-                         <Tag primary style={styles.tagFollow}>
+                         <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary style={styles.tagFollow}
-                              {I18n.t('CREATION_IDENTIFICATION_CLIENT')}
+                              onPress={() => {
+                                   this._scrollView.scrollToEnd();
+                              }}>
+                              {I18n.t('TRANSACTION_HISTORY')}
                          </Tag>
                     </View>
                </View>
@@ -273,7 +277,7 @@ class WalletDetailUser extends Component {
                          <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                               {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                          </Text>
-                         <Text style={[Typography.body2]}>{thousandsSeparators(wallet.balance)}</Text>
+                         <Text style={[Typography.body2]}>{thousands(wallet.balance, ' ')}</Text>
                     </View>
                </View>
 
@@ -320,7 +324,8 @@ class WalletDetailUser extends Component {
                                    height: 140 - this.state.scrollHeaderY,
                               }} />
 
-                              <ScrollView style={{
+                              <ScrollView ref={component => this._scrollView = component}
+                                   style={{
                                         paddingHorizontal: 20, position: 'absolute',
                                         width: '100%',
                                         height: '100%',
@@ -358,7 +363,11 @@ class WalletDetailUser extends Component {
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
                                                                       this.props.navigation.push(route.walletOptionSelect, {
-                                                                           optionSelect: optionDepotUserScreen
+                                                                           optionSelect: optionDepotUserScreen,
+                                                                           lottie: {
+                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                loop: false
+                                                                           }
                                                                       })
                                                                  }}
                                                                  activeOpacity={0.9}>
@@ -390,7 +399,11 @@ class WalletDetailUser extends Component {
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
                                                                       this.props.navigation.push(route.walletOptionSelect, {
-                                                                           optionSelect: optionRetraitUserScreen
+                                                                           optionSelect: optionRetraitUserScreen,
+                                                                           lottie: {
+                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                loop: true
+                                                                           }
                                                                       })
                                                                  }}
                                                                  activeOpacity={0.9}>
@@ -442,7 +455,7 @@ class WalletDetailUser extends Component {
 
                                                                       <View style={{ flex: 1 }}>
                                                                            <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
-                                                                                {I18n.t('WITHDRAWAL_DESCRIPTION')}
+
                                                                            </Text>
                                                                       </View>
 
@@ -469,7 +482,7 @@ class WalletDetailUser extends Component {
 
                                                                       <View style={{ flex: 1 }}>
                                                                            <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
-                                                                                {I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
+                                                                                {I18n.t('NANO_SANTE_DESCRIPTION')}
                                                                            </Text>
                                                                       </View>
 
@@ -508,13 +521,16 @@ class WalletDetailUser extends Component {
                                                             </TouchableOpacity>
                                                        </View>
 
-                                                       <View style={{ flex: 1 }}>
 
-                                                            {/* <TouchableOpacity style={styles.contain}
+                                                       <View style={[styles.containerTouch]}>
-                                                            onPress={() => { this.props.navigation.push(route.createIdentification) }}
+
+                                                            <TouchableOpacity style={styles.contain}
+                                                                 onPress={() => {
+                                                                      this.props.navigation.push(route.createIdentification)
+                                                                 }}
                                                                  activeOpacity={0.9}>
 
-                                                            <Icon name='md-outline'
+                                                                 <Icon name='pencil-plus'
                                                                       color={Color.primaryColor}
                                                                       size={30}
                                                                       style={styles.imageBanner} />
@@ -523,19 +539,17 @@ class WalletDetailUser extends Component {
 
                                                                       <View style={styles.contentTitle}>
                                                                            <Text style={[Typography.headline, Typography.semibold]}>
-                                                                           {I18n.t('NANO_CREDIT')}
+                                                                                {I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
                                                                            </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>
                                              </>

screens/wallet/WalletOptionSelect.js

@@ -25,7 +25,8 @@ export default class WalletOptionSelect extends Component {
                options: this.props.navigation.state.params.optionSelect.options,
                title: this.props.navigation.state.params.optionSelect.title,
                subTitle: this.props.navigation.state.params.optionSelect.subTitle,
-               hasWallet: this.props.navigation.state.params.hasOwnProperty('wallet')
+               hasWallet: this.props.navigation.state.params.hasOwnProperty('wallet'),
+               lottie: this.props.navigation.state.params.lottie
           }
 
      }
@@ -53,7 +54,7 @@ export default class WalletOptionSelect extends Component {
 
                          <TouchableOpacity style={styles.contain}
                               onPress={() => {
-                                   /* this.props.navigation.push(options.screen) */
+                                   this.props.navigation.push(options.screen)
                               }}
                               activeOpacity={0.9}>
 
@@ -80,7 +81,7 @@ export default class WalletOptionSelect extends Component {
 
                     <TouchableOpacity style={styles.contain}
                          onPress={() => {
-                              /* this.props.navigation.push(options.screen) */
+                              this.props.navigation.push(options.screen)
                          }}
                          activeOpacity={0.9}>
 
@@ -140,9 +141,9 @@ export default class WalletOptionSelect extends Component {
                               }}>
                                    <LottieView
                                         style={styles.lottie}
-                                        source={require("./../../datas/json/wallet_with_cash.json")}
+                                        source={this.state.lottie.source}
                                         autoPlay
-                                        loop={false}
+                                        loop={this.state.lottie.loop}
                                    />
                               </View>
 

utils/UtilsFunction.js

@@ -190,3 +190,20 @@ export const optionDepotUserScreen = {
           },
      ]
 }
+
+export const optionIdentificationScreen = {
+     title: I18n.t('IDENTIFICATION'),
+     subTitle: I18n.t('CHOOSE_OPTION'),
+     options: [
+          {
+               screen: route.createIdentification,
+               icon: 'pencil-plus',
+               title: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION'),
+          },
+          {
+               screen: route.validateIdentification,
+               icon: 'check-circle',
+               title: I18n.t('VALIDATE_IDENTIFICATION'),
+          },
+     ]
+}

utils/i18n/en.json

@@ -71,11 +71,13 @@
   "DEPOSIT_CASH_TO_VISA": "Cash to visa card",
   "DEPOSIT_CASH_TO_BANK": "Cash to bank",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet to wallet",
-  "DEPOSIT_TO_CASH": "Deposit to cash",
+  "DEPOSIT_TO_CASH": "Wallet to cash",
-  "DEPOSIT_TO_CARD": "Deposit to card",
+  "DEPOSIT_TO_CARD": "Wallet to card",
-  "DEPOSIT_TO_BANK": "Deposit to bank",
+  "DEPOSIT_TO_BANK": "Wallet to bank",
   "NANO_CREDIT": "Nano credit",
+  "NANO_CREDIT_DESCRIPTION": "Nano credit description",
   "NANO_SANTE": "Nano health",
+  "NANO_SANTE_DESCRIPTION": "Nano health description",
   "PAIEMENT_FACTURE": "Bill payment",
   "DEMAND_SEND": "Demand send",
   "WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
@@ -94,6 +96,7 @@
   "SELECT_YOUR_WALLET": "Select your wallet",
   "TRANSACTIONS": "Transactions",
   "TRANSACTION_HISTORY": "Transactions history",
+  "HISTORY": "History",
   "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Deposit of",
   "NO_WALLET_HISTORY": "No transaction",
   "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Withdrawal of",
@@ -141,6 +144,7 @@
   "CHOICE_TOWN": "Choose a town",
   "PIECE_IDENTITE": "Identity piece",
   "IDENTITY_CARD": "Identity card",
+  "NUMERO_IDENTITE": "Identity number",
   "PASSEPORT": "Passeport",
   "OTHER_IDENTITY_PIECE": "Other",
   "IDENTITY_NUMBER": "N° of piece",

utils/i18n/fr.json

@@ -76,11 +76,13 @@
   "DEPOSIT_CASH_TO_VISA": "Cash vers carte visa",
   "DEPOSIT_CASH_TO_BANK": "Cash vers banque",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet vers wallet",
-  "DEPOSIT_TO_CASH": "Dépôt vers cash",
+  "DEPOSIT_TO_CASH": "Wallet vers cash",
-  "DEPOSIT_TO_CARD": "Dépôt vers carte",
+  "DEPOSIT_TO_CARD": "Wallet vers carte",
-  "DEPOSIT_TO_BANK": "Dépôt vers banque",
+  "DEPOSIT_TO_BANK": "Wallet vers banque",
   "NANO_CREDIT": "Nano crédit",
+  "NANO_CREDIT_DESCRIPTION": "Nano crédit iLink",
   "NANO_SANTE": "Nano santé",
+  "NANO_SANTE_DESCRIPTION": "Nano santé iLink",
   "PAIEMENT_FACTURE": "Paiement de facture",
   "WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
   "COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
@@ -92,12 +94,13 @@
   "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
   "TRANSACTIONS": "Transactions",
   "TRANSACTION_HISTORY": "Historique des transactions",
+  "HISTORY": "Historique",
   "WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION": "Retrait de",
   "DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION": "Dépôt de",
   "NO_WALLET_HISTORY": "Aucune transaction à ce jour",
   "DEMAND_SEND": "Demande envoyé",
   "NO_WALLET_ACTIVED": "Aucun wallet n'est activé pour votre compte",
-  "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer les commissions",
+  "TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transférer commissions",
   "PRINCIPAL": "Principal",
   "CREATION_DATE": "Date de création",
   "ENTER_YOUR_CARD_ID": "Entrer vos identifiants bancaires",
@@ -146,6 +149,7 @@
   "CHOICE_TOWN": "Choisissez une ville",
   "PIECE_IDENTITE": "Pièce d'identité",
   "IDENTITY_CARD": "Carte d'identité",
+  "NUMERO_IDENTITE": "Numéro d'identité",
   "PASSEPORT": "Passeport",
   "OTHER_IDENTITY_PIECE": "Autre",
   "IDENTITY_NUMBER": "N° de la pièce",
@@ -295,7 +299,7 @@
   "CREATION_IDENTIFICATION_CLIENT": "M'identifier",
   "CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
   "VALIDATE_IDENTIFICATION": "Validation",
-  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
+  "VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identification",
   "CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
   "DATE_NAISSANCE": "Date de naissance",
   "REGISTER_YOURSELF": "Enregistrez-vous",

yarn.lock

@@ -978,6 +978,13 @@
     wcwidth "^1.0.1"
     ws "^1.1.0"
 
+"@react-native-community/datetimepicker@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@react-native-community/datetimepicker/-/datetimepicker-2.4.0.tgz#6b3cf050f507f9b70d31d5a572e1153bb5bd50c9"
+  integrity sha512-ZXPwNAQt4T66PTL20l2nSEbtsn6vtsvFqdYWBfx8aaNKBoCPDygR6SsYzWcIoexKH5wmX0zctSzIsryl+Gtngg==
+  dependencies:
+    invariant "^2.2.4"
+
 "@react-native-community/geolocation@^1.4.2":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/geolocation/-/geolocation-1.4.2.tgz#7228c6d37c2f55017af9c49c2b9ad586d9bcb9f8"
@@ -7922,6 +7929,11 @@ then-request@^2.0.1:
     promise "^7.1.1"
     qs "^6.1.0"
 
+thousands@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/thousands/-/thousands-1.0.1.tgz#59eb5b6d179ab20a42d9d1bdd05c2ca07fbc2d94"
+  integrity sha1-WetbbReasgpC2dG90FwsoH+8LZQ=
+
 throat@^4.0.0, throat@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"