Validation camera ok

App.js

@@ -52,7 +52,8 @@ import WalletDetailUser from './screens/wallet/WalletDetailUser';
 import WalletOptionSelect from './screens/wallet/WalletOptionSelect';
 import ValidateIdentification from './screens/identification/validateIdentification';
 import CreateIdentificationUser from './screens/identification/CreateIdentificationUser';
-import PaiementOptionSelect from './screens/wallet/PaiementOptionSelect';
+import OperateurOptionSelect from './screens/wallet/OperateurOptionSelect';
+import PaiementFacture from './screens/wallet/PaiementFacture';
 
 const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -93,7 +94,9 @@ const AppStack = createDrawerNavigator({
           about: About,
           walletDetailUser: WalletDetailUser,
           walletOptionSelect: WalletOptionSelect,
-          paiementOptionSelect: PaiementOptionSelect
+          operateurOptionSelect: OperateurOptionSelect,
+          operateurOptionSelect: OperateurOptionSelect,
+          paiementFacture: PaiementFacture
 
      })
 }, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })
@@ -147,7 +150,8 @@ const AppAgentStack = createDrawerNavigator({
           walletDepot: WalletDepot,
           walletRetrait: WalletRetrait,
           walletOptionSelect: WalletOptionSelect,
-          paiementOptionSelect: PaiementOptionSelect
+          operateurOptionSelect: OperateurOptionSelect,
+          paiementFacture: PaiementFacture
      })
 }, {
      contentComponent: OptionsMenu,

components/OutlineTextInput/index.js

@@ -18,7 +18,8 @@ export default function Index(props) {
           textAlignVertical,
           label,
           onSubmitEditing,
-          borderBottomColor
+          borderBottomColor,
+          icon
      } = props;
      return (
           <TouchableOpacity
@@ -51,6 +52,7 @@ export default function Index(props) {
                          onFocus={() => onFocus()}
                          textAlignVertical={textAlignVertical}
                          onSubmitEditing={onSubmitEditing} />
+                    {icon}
                </View>
           </TouchableOpacity>
      );

package.json

@@ -45,6 +45,7 @@
     "react-native-geolocation-service": "4.0.0",
     "react-native-gesture-handler": "1.6.1",
     "react-native-i18n": "^2.0.15",
+    "react-native-image-crop-picker": "^0.32.0",
     "react-native-loader": "^1.2.1",
     "react-native-loading-spinner-overlay": "^1.0.1",
     "react-native-local-mongodb": "^2.2.9",
@@ -57,6 +58,7 @@
     "react-native-material-dropdown": "^0.11.1",
     "react-native-paper": "^2.16.0",
     "react-native-phone-call": "^1.0.9",
+    "react-native-popover-tooltip": "^1.1.4",
     "react-native-popup-dialog": "^0.18.3",
     "react-native-progress": "^3.6.0",
     "react-native-range-datepicker": "^1.8.2",

route.json

@@ -36,5 +36,6 @@
   "createIdentification": "createIdentification",
   "createIdentificationUser": "createIdentificationUser",
   "validateIdentification": "validateIdentification",
-  "paiementOptionSelect": "paiementOptionSelect"
+  "operateurOptionSelect": "operateurOptionSelect",
+  "paiementFacture": "paiementFacture"
 }

screens/home/Home.js

@@ -1390,7 +1390,7 @@ class Home extends BaseScreen {
                          translucent={true}
                     />
                     {/* Start here to comment */}
-                    {/*                     {
+                    {
                          (this.state.loadingDialog || this.props.loading) ?
                               <View
                                    style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.state.loadingDialog ? responsiveWidth(100) : 0, height: this.state.loadingDialog ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}
@@ -1426,7 +1426,7 @@ class Home extends BaseScreen {
                               this.setState({ showProgress: false })
                               Alert.alert(I18n.t("PROBLEM_OCCUR"), I18n.t("PROBLEM_OCCUR_DIRECTION"), [{ text: "Ok", onPress: () => { } }])
                          }}
-                    /> */}
+                    />
                     {this.makeCardSearch()}
                     {this.makeSlidingUp()}
                     {this.makeDialogLoader()}

screens/identification/validateIdentification.js

@@ -1,30 +1,22 @@
-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';
+import React, { Component } from 'react';
+import { Alert, PermissionsAndroid, ScrollView, StyleSheet, Image, Text, View } from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { Fumi } from 'react-native-textinput-effects';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import PopoverTooltip from 'react-native-popover-tooltip';
+import ImagePicker from 'react-native-image-crop-picker';
+import Dialog from "react-native-dialog";
+import { Color } from '../../config/Color';
+import { readUser } from './../../webservice/AuthApi';
 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';
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import Camera from '../../components/Camera';
 
 
 export default class ValidateIdentification extends Component {
@@ -58,7 +50,10 @@ export default class ValidateIdentification extends Component {
           this.state = {
                memberCode: null,
                image: null,
-               displayCamera: false
+               displayImage: false,
+               userPhoto: null,
+               cardFront: null,
+               cardBack: null,
           };
      }
 
@@ -128,16 +123,36 @@ export default class ValidateIdentification extends Component {
           this.setState({ image: null, displayCamera: false });
      }
 
+     renderDialogImage = () => {
+
+          return (
+               <Dialog.Container useNativeDriver={true} visible={this.state.displayImage}>
+
+                    <Dialog.Title>Image</Dialog.Title>
+
+                    <View>
+                         <Image source={{ uri: this.state.image.path }} style={{ width: this.state.image.width, height: this.state.image.height }} />
+                    </View>
+
+                    <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
+                         this.setState({
+                              displayImage: false
+                         });
+                    }} />
+               </Dialog.Container>
+          )
+     }
+
      render() {
           console.log("STATE", this.state);
           const { showPickerDateNaissance } = this.state;
           return (
                <>
                     <ScrollView style={styles.container}>
-
+                         {this.state.displayImage && this.renderDialogImage()}
                          <Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
 
-                         <Animatable.View style={{
+                         {/*                          <Animatable.View style={{
                               justifyContent: 'center',
                               alignItems: 'center'
                          }} ref={(comp) => { this.nameanim = comp }}>
@@ -164,7 +179,7 @@ export default class ValidateIdentification extends Component {
                                              />
                                    }
                               </TouchableOpacity>
-                         </Animatable.View>
+                         </Animatable.View> */}
 
                          <Animatable.View ref={(comp) => { this.nameanim = comp }}>
                               <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
@@ -179,6 +194,168 @@ export default class ValidateIdentification extends Component {
                               </Fumi>
                          </Animatable.View>
 
+
+                         <View style={{ marginTop: 20, flexDirection: 'row' }}>
+
+                              <View style={[styles.contentPicker]}>
+
+                                   <PopoverTooltip
+                                        ref='toolTipVisibleUserPhoto'
+                                        buttonComponent={
+                                             <TouchableOpacity
+                                                  style={[styles.contain]}
+                                                  onPress={() => { this.refs['toolTipVisibleUserPhoto'].toggle(); }}
+                                                  activeOpacity={0.9}>
+                                                  <View style={[styles.contcontainerCenterentLeft]}>
+                                                       <View>
+                                                            <Icon name='account-circle' color={Color.whiteColor} style={[styles.thumb]} size={80} />
+                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
+                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
+                                                            </View>
+                                                       </View>
+                                                  </View>
+                                             </TouchableOpacity>
+                                        }
+                                        items={[
+                                             {
+                                                  label: 'Camera',
+                                                  onPress: () => {
+                                                       ImagePicker.openCamera({
+                                                            width: 200,
+                                                            height: 200,
+                                                            cropping: true,
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       })
+                                                  }
+                                             },
+                                             {
+                                                  label: 'Galerie',
+                                                  onPress: () => {
+                                                       ImagePicker.openPicker({
+                                                            width: 300,
+                                                            height: 400,
+                                                            cropping: true
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       });
+                                                  }
+                                             }
+                                        ]}
+                                        animationType='spring'
+                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
+                                        tooltipContainerStyle={{ borderRadius: 0 }}
+                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
+                                        labelSeparatorColor={Color.dividerColor}
+                                   />
+                              </View>
+
+                              <View style={[styles.contentPicker]}>
+                                   <PopoverTooltip
+                                        ref='toolTipVisibleCardFront'
+                                        buttonComponent={
+                                             <TouchableOpacity
+                                                  style={[styles.contain]}
+                                                  onPress={() => { this.refs['toolTipVisibleCardFront'].toggle(); }}
+                                                  activeOpacity={0.9}>
+                                                  <View style={[styles.contcontainerCenterentLeft]}>
+                                                       <View>
+                                                            <Icon name='credit-card-scan' color={Color.whiteColor} style={[styles.thumb]} size={80} />
+                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
+                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
+                                                            </View>
+                                                       </View>
+                                                  </View>
+                                             </TouchableOpacity>
+                                        }
+                                        items={[
+                                             {
+                                                  label: 'Camera',
+                                                  onPress: () => {
+                                                       ImagePicker.openCamera({
+                                                            width: 400,
+                                                            height: 200,
+                                                            cropping: true,
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       })
+                                                  }
+                                             },
+                                             {
+                                                  label: 'Galerie',
+                                                  onPress: () => {
+                                                       ImagePicker.openPicker({
+                                                            width: 400,
+                                                            height: 200,
+                                                            cropping: true
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       });
+                                                  }
+                                             }
+                                        ]}
+                                        animationType='spring'
+                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
+                                        tooltipContainerStyle={{ borderRadius: 0 }}
+                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
+                                        labelSeparatorColor={Color.dividerColor}
+                                   />
+                              </View>
+
+                              <View style={[styles.contentPicker]}>
+                                   <PopoverTooltip
+                                        ref='toolTipVisibleCardBack'
+                                        buttonComponent={
+                                             <TouchableOpacity
+                                                  style={[styles.contain]}
+                                                  onPress={() => { this.refs['toolTipVisibleCardBack'].toggle(); }}
+                                                  activeOpacity={0.9}>
+                                                  <View style={[styles.contcontainerCenterentLeft]}>
+                                                       <View>
+                                                            <Icon name='credit-card-off' color={Color.whiteColor} style={[styles.thumb]} size={80} />
+                                                            <View style={[styles.point, { backgroundColor: Color.accentColor }]}>
+                                                                 <Icon name='camera-image' color={Color.whiteColor} size={20} />
+                                                            </View>
+                                                       </View>
+                                                  </View>
+                                             </TouchableOpacity>
+                                        }
+                                        items={[
+                                             {
+                                                  label: 'Camera',
+                                                  onPress: () => {
+                                                       ImagePicker.openCamera({
+                                                            width: 400,
+                                                            height: 200,
+                                                            cropping: true,
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       })
+                                                  }
+                                             },
+                                             {
+                                                  label: 'Galerie',
+                                                  onPress: () => {
+                                                       ImagePicker.openPicker({
+                                                            width: 400,
+                                                            height: 200,
+                                                            cropping: true
+                                                       }).then(image => {
+                                                            this.setState({ image, displayImage: true });
+                                                       });
+                                                  }
+                                             }
+                                        ]}
+                                        animationType='spring'
+                                        overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
+                                        tooltipContainerStyle={{ borderRadius: 0 }}
+                                        labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
+                                        labelSeparatorColor={Color.dividerColor}
+                                   />
+                              </View>
+
+                         </View>
+
                          <Button style={styles.btnvalide}
                               textStyle={styles.textbtnvalide}
                               isLoading={this.state.isLoging}
@@ -196,6 +373,27 @@ const styles = StyleSheet.create({
           flex: 1,
           backgroundColor: Color.primaryDarkColor,
      },
+     contain: { flexDirection: "row" },
+     containerCenter: {
+          flex: 8,
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center"
+     },
+     thumb: {
+          borderRadius: 30,
+          marginRight: 10
+     },
+     point: {
+          width: 25,
+          height: 25,
+          borderRadius: 11,
+          alignItems: "center",
+          justifyContent: "center",
+          position: "absolute",
+          right: 9,
+          bottom: 0
+     },
      textbtnvalide: {
           color: 'white',
           fontWeight: 'bold'
@@ -208,6 +406,12 @@ const styles = StyleSheet.create({
           textAlign: 'center',
           margin: 20,
      },
+     contentPicker: {
+          padding: 10,
+          borderRadius: 8,
+          flex: 1,
+          alignItems: "center"
+     },
      subbigtitle: {
           color: 'white',
           fontSize: 17,

screens/optionMenu/OptionsMenu.js

@@ -253,7 +253,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 === 'validateIdentification'
-               || item === 'createIdentificationUser' || item === 'paiementOptionSelect') {
+               || item === 'createIdentificationUser' || item === 'operateurOptionSelect' || item === 'paiementFacture') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"

screens/wallet/OperateurOptionSelect.js

@@ -1,30 +1,27 @@
 import React, { Component } from 'react';
-import { StyleSheet, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
+import { FlatList, Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
+import I18n from 'react-native-i18n';
+import { Appbar, Provider } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Color } from '../../config/Color';
+import { Typography } from '../../config/typography';
+import * as Utils from '../../utils/DeviceUtils';
+import { IlinkEmitter } from "../../utils/events";
 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 { Color } from '../../config/Color';
-import { baseUrl } from '../../webservice/IlinkConstants';
-import { IlinkEmitter } from "../../utils/events";
-import { Provider, Appbar } from 'react-native-paper';
-import { readUser } from '../../webservice/AuthApi';
-import { FontWeight, Typography } from '../../config/typography';
-import LottieView from 'lottie-react-native';
-import { isIlinkWorldWallet, optionDepotScreen } from '../../utils/UtilsFunction';
-import chunk from 'lodash/chunk';
-import { ScrollView } from 'react-native-gesture-handler';
 
-export default class PaiementOptionSelect extends Component {
+export default class OperateurOptionSelect extends Component {
 
      constructor(props) {
           super(props);
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
-          /*           this.state = {
+          console.log("OPERATEUR OPTION PROPS", this.props);
-                         options: this.props.navigation.state.params.optionSelect
+          this.state = {
-                    } */
+               options: this.props.navigation.state.params.optionSelect.options,
+               title: this.props.navigation.state.params.optionSelect.title,
+               subTitle: this.props.navigation.state.params.optionSelect.subTitle,
+          }
 
      }
 
@@ -48,11 +45,28 @@ export default class PaiementOptionSelect extends Component {
                />)
      });
 
-     renderItem = (item) => {
+     redirectToRoute = (item) => {
+          switch (item.type) {
+
+               case 'PAIEMENT_ECOLE':
+                    this.props.navigation.push(item.screen, {
+                         title: item.title
+                    });
+                    break;
+
+               default:
+                    this.props.navigation.push(item.screen, {
+                         title: item.title
+                    });
+                    break;
+          }
+     }
+
+     renderItem = (item, index) => {
 
           return (
                <TouchableOpacity
-                    key={item.id}
+                    key={index}
                     style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
                     onPress={() => {
 
@@ -74,13 +88,13 @@ export default class PaiementOptionSelect extends Component {
 
      renderList = () => {
 
-          const { optionSelect } = this.props;
+          const { options } = this.state;
 
           return (
                <ScrollView style={{ flex: 1, padding: 20 }}>
                     {
-                         options.map((item) => (
+                         options.map((item, index) => (
-                              this.renderItem(item)
+                              this.renderItem(item, index)
                          ))
                     }
                </ScrollView>
@@ -88,9 +102,6 @@ export default class PaiementOptionSelect extends Component {
      }
 
      render() {
-
-          console.log("PAIEMENT FACTURE PROPS", this.props);
-          console.log("PAIEMENT FACTURE GET PARAMS", this.props.navigation.getParam('optionSelect'));
           return (
                <Provider>
                     <View style={{ flex: 1 }}>
@@ -106,16 +117,40 @@ export default class PaiementOptionSelect extends Component {
                                    onPress={() => { this.props.navigation.pop() }}
                               />
                               <Appbar.Content
-                                   title="Paiement facture"
+                                   title={this.state.title}
-                                   subtitle="Veuillez sélectionner une option"
+                                   subtitle={this.state.subTitle}
                               />
                          </Appbar.Header>
 
                          <View style={styles.container}>
 
-                              {/*                         {
+                              <FlatList
-                                   this.renderList()
+                                   contentContainerStyle={{
-                              } */}
+                                        paddingHorizontal: 20,
+                                        paddingBottom: 10,
+                                   }}
+                                   data={this.state.options}
+                                   keyExtractor={(item, index) => index.toString()}
+                                   renderItem={({ item, index }) => (
+                                        <TouchableOpacity
+                                             style={[styles.item, { borderBottomColor: Color.borderColor }]}
+                                             onPress={() => {
+                                                  this.redirectToRoute(item);
+                                             }}>
+                                             <View style={{ flexDirection: 'row' }}>
+                                                  <Image style={{ width: 30, height: 30 }} source={{ uri: item.icon }} />
+
+                                                  <Text style={[Typography.body1]}>{item.title}</Text>
+                                             </View>
+                                             <Icon
+                                                  name="chevron-right"
+                                                  size={20}
+                                                  color={Color.primaryColor}
+                                                  enableRTL={true}
+                                             />
+                                        </TouchableOpacity>
+                                   )}
+                              />
 
                          </View>
 
@@ -129,8 +164,6 @@ export default class PaiementOptionSelect extends Component {
 const styles = StyleSheet.create({
      container: {
           flex: 1,
-          backgroundColor: Color.containerBackgroundColor,
-          paddingHorizontal: 20,
      },
      paymentItem: {
           flexDirection: "row",
@@ -153,6 +186,13 @@ const styles = StyleSheet.create({
           justifyContent: "space-between",
           alignItems: "center"
      },
+     /*      item: {
+               paddingVertical: 15,
+               borderBottomWidth: 1,
+               flexDirection: "row",
+               justifyContent: "space-between",
+               alignItems: "center"
+          }, */
      lottie: {
           width: 540,
           height: 240

screens/wallet/PaiementFacture.js

@@ -0,0 +1,113 @@
+import React, { Component } from 'react';
+import { StatusBar, StyleSheet, View } from 'react-native';
+import I18n from 'react-native-i18n';
+import { Appbar, Provider } from 'react-native-paper';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { Color } from '../../config/Color';
+import { IlinkEmitter } from "../../utils/events";
+import OutlineTextInput from '../../components/OutlineTextInput';
+import CustomButton from '../../components/CustomButton';
+import { ScrollView } from 'react-native-gesture-handler';
+const route = require('../../route.json');
+let slugify = require('slugify');
+
+export default class PaiementFacture extends Component {
+
+     constructor(props) {
+          super(props);
+          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
+          this.state = {
+               title: this.props.navigation.state.params.title,
+          }
+
+     }
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WALLET') })
+          this.forceUpdate();
+     }
+
+     static navigationOptions = ({ navigation }) => ({
+          header: null,
+          headerMode: 'none',
+          headerTitle: null,
+          activeColor: '#f0edf6',
+          inactiveColor: '#3e2465',
+          barStyle: { backgroundColor: '#694fad' },
+          drawerLabel: I18n.t('CREDIT_MANAGE'),
+          drawerIcon: ({ tintColor }) => (
+               <Icon
+                    name={'credit-card'}
+                    size={24}
+               />)
+     });
+
+     render() {
+          return (
+               <Provider>
+                    <View style={{ flex: 1 }}>
+
+                         <StatusBar
+                              backgroundColor={Color.primaryDarkColor}
+                              barStyle="light-content"
+                              translucent={false}
+                         />
+
+                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
+                              <Appbar.BackAction
+                                   onPress={() => { this.props.navigation.pop() }}
+                              />
+                              <Appbar.Content
+                                   title={this.state.title}
+                              />
+                         </Appbar.Header>
+
+                         <View style={styles.container}>
+
+                              <ScrollView style={{ padding: 20 }}>
+
+                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
+                                        <OutlineTextInput
+                                             borderBottomColor={'black'}
+                                             keyboardType="numeric"
+                                             label={I18n.t('NUMERO_DE_SERIE')}
+                                             style={{ marginTop: 10 }}
+                                             placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
+                                        />
+                                   </View>
+
+                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
+                                        <OutlineTextInput
+                                             borderBottomColor={'black'}
+                                             keyboardType="numeric"
+                                             label={I18n.t('AMOUNT')}
+                                             style={{ marginTop: 10 }}
+                                             placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
+                                        />
+                                   </View>
+
+
+                                   <View style={{ margin: 10 }}>
+                                        <CustomButton outline onPress={() => { }}>
+                                             {I18n.t('VALIDATE')}
+                                        </CustomButton>
+                                   </View>
+
+                              </ScrollView>
+
+
+                         </View>
+
+                    </View>
+               </Provider>
+          );
+     }
+}
+
+
+const styles = StyleSheet.create({
+     container: {
+          flex: 1,
+          backgroundColor: Color.containerBackgroundColor
+     },
+});

screens/wallet/WalletDepot.js

@@ -1,38 +1,35 @@
-import React, { Component } from 'react';
-import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import I18n from 'react-native-i18n'
-import LottieView from 'lottie-react-native';
-import * as Utils from '../../utils/DeviceUtils';
-import Icons from 'react-native-vector-icons/Ionicons'
-import { Images } from '../../config/Images';
-import CustomButton from '../../components/CustomButton';
-import OutlineTextInput from '../../components/OutlineTextInput';
-import { Color } from '../../config/Color';
-import Tag from '../../components/Tag';
-import { IlinkEmitter } from "../../utils/events";
-import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";
-import { Typography, FontWeight } from '../../config/typography';
-import { depositAction, depositActionReset } from '../../webservice/DepositApi';
-import { getWalletCommissionAmount, walletCommissionAmountReset, resetWalletListDetailReducer } from '../../webservice/WalletApi';
-import Dialog from "react-native-dialog";
-import { ProgressDialog } from 'react-native-simple-dialogs';
-import { Dropdown } from 'react-native-material-dropdown';
 import isEqual from 'lodash/isEqual';
-//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+import LottieView from 'lottie-react-native';
-let moment = require('moment-timezone');
+import 'moment/locale/en-au';
-import 'moment/locale/fr'
+import 'moment/locale/en-ca';
-import 'moment/locale/es-us'
+import 'moment/locale/en-ie';
-import 'moment/locale/en-au'
+import 'moment/locale/en-il';
-import 'moment/locale/en-ca'
+import 'moment/locale/en-nz';
-import 'moment/locale/en-ie'
+import 'moment/locale/es-us';
-import 'moment/locale/en-il'
+import 'moment/locale/fr';
-import 'moment/locale/en-nz'
+import React, { Component } from 'react';
+import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
+import { CreditCardInput } from "react-native-credit-card-input";
+import Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { Dropdown } from 'react-native-material-dropdown';
+import { Appbar, Provider } from 'react-native-paper';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import CustomButton from '../../components/CustomButton';
+import OutlineTextInput from '../../components/OutlineTextInput';
 import style from '../../components/TextInput/styles';
-import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
+import { Color } from '../../config/Color';
-import { identityPieces, inputCardSource } from '../../utils/UtilsFunction';
+import { Typography } from '../../config/typography';
+import { IlinkEmitter } from "../../utils/events";
+import { inputCardSource } from '../../utils/UtilsFunction';
+import { depositAction, depositActionReset } from '../../webservice/DepositApi';
+import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
+//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+let moment = require('moment-timezone');
 
 const CONTAINER_WIDTH = Dimensions.get("window").width;
 
@@ -47,17 +44,11 @@ class WalletDepot extends Component {
      };
      static navigationOptions = ({ navigation }) => {
           return {
-               drawerLabel: () => null,
+               header: null,
-               title: I18n.t('MAKE_DEPOSIT'),
+               headerMode: 'none',
-               headerStyle: {
+               headerTitle: null,
-                    backgroundColor: Color.primaryColor,
+               activeColor: '#f0edf6',
-                    marginTop: 23,
+               inactiveColor: '#3e2465',
-                    color: 'white'
-
-               },
-               headerTitleStyle: {
-                    color: "white"
-               }
           };
      }
 
@@ -408,115 +399,134 @@ class WalletDepot extends Component {
           console.log("STATE", this.state);
           const { resultGetCommission } = this.props;
           return (
-               <View style={[styles.container]}>
+               <Provider>
+                    <View style={{ flex: 1 }}>
 
-                    {
+                         <StatusBar
-                         (resultGetCommission !== null) &&
+                              backgroundColor={Color.primaryDarkColor}
-                         (typeof resultGetCommission.response !== 'undefined') &&
+                              barStyle="light-content"
-                         this.modalConfirmTransaction(resultGetCommission)
+                              translucent={false}
-                    }
+                         />
 
-                    {this.isHasError()}
+                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
-                    {this.commissionsLoading()}
+                              <Appbar.BackAction
-                    {this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
+                                   onPress={() => { this.props.navigation.pop() }}
-                    <ScrollView style={{ padding: 20 }}>
-
-                         <View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
-
-                              <Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
-                              <Dropdown
-                                   containerStyle={{ marginTop: -20 }}
-                                   value='serial-number'
-                                   data={this.state.inputCardSource}
-                                   onChangeText={(value, index, data) => {
-                                        this.setState({
-                                             isDisplaySerialTextInput: isEqual(value, 'serial-number'),
-                                             facade: isEqual(value, 'serial-number') ? 'back' : 'front'
-                                        })
-                                   }}
-                                   valueExtractor={(value) => value.value}
-                                   labelExtractor={(value) => value.name}
                               />
-                         </View>
+                              <Appbar.Content
-
+                                   title={I18n.t('MAKE_DEPOSIT')}
-                         {!this.state.isDisplaySerialTextInput &&
-                              <View style={{ marginTop: 10 }}>
-                                   <CreditCardInput
-                                        validColor={this.state.creditCardInput.valid ? 'green' : ''}
-                                        invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
-                                        onChange={this.onCreditCardChange}
-                                        labels={{
-                                             number: I18n.t('CARD_NUMBER_LABEL'),
-                                             expiry: I18n.t('CARD_EXPIRY_LABEL'),
-                                             cvc: I18n.t('CARD_CVC_LABEL'),
-                                        }} />
-                                   {
-                                        (this.state.displayCardError) &&
-                                        this.isCreditCardValid().map((item) => (
-                                             <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
-                                        ))
-                                   }
-                              </View>
-                         }
-
-                         {this.state.isDisplaySerialTextInput &&
-
-                              <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
-                                   <OutlineTextInput
-                                        borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
-                                        value={this.state.numeroSerie}
-                                        keyboardType="numeric"
-                                        label={I18n.t('NUMERO_DE_SERIE')}
-                                        style={{ marginTop: 10 }}
-                                        placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
-                                        onChangeText={(numeroSerie) => {
-                                             this.setState({ numeroSerie });
-                                             this.isNumeroSerieValid();
-                                        }}
-                                   />
-                                   {
-                                        (!this.isNumeroSerieValid().isValid) &&
-                                        <Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
-                                   }
-                                   {
-                                        (this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
-                                        <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
-                                   }
-                                   <Text></Text>
-                              </View>
-                         }
-
-                         <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
-                              <OutlineTextInput
-                                   borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
-                                   value={this.state.montant}
-                                   keyboardType="numeric"
-                                   label={I18n.t('AMOUNT_LABEL')}
-                                   style={{ marginTop: 10 }}
-                                   placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
-                                   onChangeText={(montant) => {
-                                        this.setState({ montant });
-                                        this.isMontantValid();
-                                   }}
                               />
-                              {
+                         </Appbar.Header>
-                                   (!this.isMontantValid().isValid) &&
+                         <View style={[styles.container]}>
-                                   <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
-                              }
-                              {
-                                   (this.state.isSubmitClick && this.state.montant.length === 0) &&
-                                   <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
-                              }
-                              <Text></Text>
-                         </View>
 
-                         <View style={{ margin: 10 }}>
+                              {
-                              <CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
+                                   (resultGetCommission !== null) &&
-                                   {I18n.t('VALIDATE')}
+                                   (typeof resultGetCommission.response !== 'undefined') &&
-                              </CustomButton>
+                                   this.modalConfirmTransaction(resultGetCommission)
+                              }
+
+                              {this.isHasError()}
+                              {this.commissionsLoading()}
+                              {this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
+                              <ScrollView style={{ padding: 20 }}>
+
+                                   <View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
+
+                                        <Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
+                                        <Dropdown
+                                             containerStyle={{ marginTop: -20 }}
+                                             value='serial-number'
+                                             data={this.state.inputCardSource}
+                                             onChangeText={(value, index, data) => {
+                                                  this.setState({
+                                                       isDisplaySerialTextInput: isEqual(value, 'serial-number'),
+                                                       facade: isEqual(value, 'serial-number') ? 'back' : 'front'
+                                                  })
+                                             }}
+                                             valueExtractor={(value) => value.value}
+                                             labelExtractor={(value) => value.name}
+                                        />
+                                   </View>
+
+                                   {!this.state.isDisplaySerialTextInput &&
+                                        <View style={{ marginTop: 10 }}>
+                                             <CreditCardInput
+                                                  validColor={this.state.creditCardInput.valid ? 'green' : ''}
+                                                  invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
+                                                  onChange={this.onCreditCardChange}
+                                                  labels={{
+                                                       number: I18n.t('CARD_NUMBER_LABEL'),
+                                                       expiry: I18n.t('CARD_EXPIRY_LABEL'),
+                                                       cvc: I18n.t('CARD_CVC_LABEL'),
+                                                  }} />
+                                             {
+                                                  (this.state.displayCardError) &&
+                                                  this.isCreditCardValid().map((item) => (
+                                                       <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
+                                                  ))
+                                             }
+                                        </View>
+                                   }
+
+                                   {this.state.isDisplaySerialTextInput &&
+
+                                        <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
+                                             <OutlineTextInput
+                                                  borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
+                                                  value={this.state.numeroSerie}
+                                                  keyboardType="numeric"
+                                                  label={I18n.t('NUMERO_DE_SERIE')}
+                                                  style={{ marginTop: 10 }}
+                                                  placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
+                                                  onChangeText={(numeroSerie) => {
+                                                       this.setState({ numeroSerie });
+                                                       this.isNumeroSerieValid();
+                                                  }}
+                                             />
+                                             {
+                                                  (!this.isNumeroSerieValid().isValid) &&
+                                                  <Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
+                                             }
+                                             {
+                                                  (this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
+                                                  <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
+                                             }
+                                             <Text></Text>
+                                        </View>
+                                   }
+
+                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
+                                        <OutlineTextInput
+                                             borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
+                                             value={this.state.montant}
+                                             keyboardType="numeric"
+                                             label={I18n.t('AMOUNT_LABEL')}
+                                             style={{ marginTop: 10 }}
+                                             placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
+                                             onChangeText={(montant) => {
+                                                  this.setState({ montant });
+                                                  this.isMontantValid();
+                                             }}
+                                        />
+                                        {
+                                             (!this.isMontantValid().isValid) &&
+                                             <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
+                                        }
+                                        {
+                                             (this.state.isSubmitClick && this.state.montant.length === 0) &&
+                                             <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
+                                        }
+                                        <Text></Text>
+                                   </View>
+
+                                   <View style={{ margin: 10 }}>
+                                        <CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
+                                             {I18n.t('VALIDATE')}
+                                        </CustomButton>
+                                   </View>
+                              </ScrollView>
                          </View>
-                    </ScrollView>
+                    </View>
-               </View>
+               </Provider>
           )
      }
 

screens/wallet/WalletDetail.js

@@ -1,38 +1,35 @@
-import React, { Component } from 'react';
-import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import I18n from 'react-native-i18n'
-import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
-import * as Utils from '../../utils/DeviceUtils';
-import Icons from 'react-native-vector-icons/Ionicons'
-import { Images } from '../../config/Images';
-import CustomButton from '../../components/CustomButton';
-import { Color } from '../../config/Color';
-import Tag from '../../components/Tag';
-import { IlinkEmitter } from "../../utils/events";
-import { Typography, FontWeight } from '../../config/typography';
-import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
-import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
-import { depositActionReset } from '../../webservice/DepositApi';
-import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
-import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
-import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
-import { baseUrl } from '../../webservice/IlinkConstants';
+import 'moment/locale/en-au';
-let moment = require('moment-timezone');
+import 'moment/locale/en-ca';
-import 'moment/locale/fr'
+import 'moment/locale/en-gb';
-import 'moment/locale/es-us'
+import 'moment/locale/en-ie';
-import 'moment/locale/en-au'
+import 'moment/locale/en-il';
-import 'moment/locale/en-ca'
+import 'moment/locale/en-nz';
-import 'moment/locale/en-ie'
+import 'moment/locale/es-us';
-import 'moment/locale/en-il'
+import 'moment/locale/fr';
-import 'moment/locale/en-nz'
+import React, { Component } from 'react';
-import 'moment/locale/en-gb'
+import { ActivityIndicator, Alert, Animated, Platform, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import I18n from 'react-native-i18n';
+import { responsiveWidth } from 'react-native-responsive-dimensions';
+import { TabBar } from 'react-native-tab-view';
+import Icons from 'react-native-vector-icons/Ionicons';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { thousandsSeparators, isEmptyObject, optionPaiementFacture, transactionHistoryUser, optionDepotUserScreen, optionDepotScreen, optionRetraitScreen, optionRetraitUserScreen, transactionHistoryLabel, isIlinkWorldWallet, cutString, optionIdentificationScreen } from '../../utils/UtilsFunction';
+import Tag from '../../components/Tag';
-import DeviceInfo from 'react-native-device-info';
+import { Color } from '../../config/Color';
+import { Typography } from '../../config/typography';
+import * as Utils from '../../utils/DeviceUtils';
+import { IlinkEmitter } from "../../utils/events";
+import { cutString, isEmptyObject, isIlinkWorldWallet, optionDepotScreen, optionIdentificationScreen, optionPaiementFacture, optionRetraitScreen, transactionHistoryLabel } from '../../utils/UtilsFunction';
+import { depositActionReset } from '../../webservice/DepositApi';
+import { baseUrl } from '../../webservice/IlinkConstants';
+import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
+import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
+import { resetCommissionReducer, transferCommissionAction } from '../../webservice/WalletTransferCommission';
+let moment = require('moment-timezone');
 const thousands = require('thousands');
 
 let route = require('./../../route.json');

screens/wallet/WalletOptionSelect.js

@@ -25,9 +25,12 @@ 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'),
+               type: this.props.navigation.state.params.optionSelect.type,
+               wallet: this.props.navigation.state.params.wallet,
                lottie: this.props.navigation.state.params.lottie
           }
+          console.log("WALLET OPTION PROPS", this.props);
+
 
      }
 
@@ -47,20 +50,38 @@ export default class WalletOptionSelect extends Component {
                />)
      });
 
-     renderItem = (options, isOneElement) => (
+     redirectToRoute = (options) => {
+          switch (this.state.type) {
+               case 'FACTURE':
+                    this.props.navigation.push(options.screen, {
+                         optionSelect: options.subScreenOption
+                    });
+                    break;
+               case 'DEPOT':
+                    this.props.navigation.push(options.screen, {
+                         wallet: this.state.wallet
+                    });
+                    break;
+               case 'RETRAIT':
+                    this.props.navigation.push(options.screen, {
+                         wallet: this.state.wallet
+                    });
+                    break;
+
+               default:
+                    this.props.navigation.push(options.screen)
+                    break;
+          }
+     }
+
+     renderItem = (options, isOneElement, index) => (
           isOneElement ?
                <>
-                    <View style={[styles.containerTouch]}>
+                    <View key={index} style={[styles.containerTouch]}>
 
                          <TouchableOpacity style={styles.contain}
                               onPress={() => {
-                                   this.props.navigation.setParams({
+                                   this.redirectToRoute(options);
-                                        optionSelect: optionPaiementFactureSubScreen
-                                   });
-                                   this.props.navigation.push(options.screen, {
-                                        optionSelect: optionPaiementFactureSubScreen
-                                   });
-
                               }}
                               activeOpacity={0.9}>
 
@@ -87,7 +108,7 @@ export default class WalletOptionSelect extends Component {
 
                     <TouchableOpacity style={styles.contain}
                          onPress={() => {
-                              this.props.navigation.push(options.screen)
+                              this.redirectToRoute(options);
                          }}
                          activeOpacity={0.9}>
 
@@ -160,63 +181,23 @@ export default class WalletOptionSelect extends Component {
                                    </Text>
                               </View>
                               {
-                                   chunk(this.state.options, 2).map((item) => (
+                                   chunk(this.state.options, 2).map((item, index) => (
 
-                                        <View style={styles.transactionContainer}>
+                                        <View key={index} style={styles.transactionContainer}>
                                              {
                                                   item.length === 1 ?
 
-                                                       item.map((wallet) => (
+                                                       item.map((wallet, i) => (
-                                                            this.renderItem(wallet, true)
+                                                            this.renderItem(wallet, true, i)
                                                        )) :
-                                                       item.map((wallet) => (
+                                                       item.map((wallet, i) => (
-                                                            this.renderItem(wallet, false)
+                                                            this.renderItem(wallet, false, i)
                                                        ))
                                              }
                                         </View>
                                    ))
                               }
 
-                              {/* <FlatList
-                                   contentContainerStyle={{
-                                        paddingHorizontal: 20,
-                                        paddingBottom: 10,
-                                   }}
-                                   data={this.state.options}
-                                   keyExtractor={(item, index) => index.toString()}
-                                   renderItem={({ item, index }) => (
-                                        <TouchableOpacity
-                                             style={[styles.item, { borderBottomColor: Color.borderColor }]}
-                                             onPress={() => {
-                                                  if (this.state.hasWallet) {
-                                                       this.props.navigation.push(item.screen, {
-                                                            wallet: this.props.navigation.state.params.wallet,
-                                                            onGoBack: () => this.props.navigation.state.params.onGoBack()
-                                                       })
-                                                  } else {
-                                                       this.props.navigation.push(item.screen)
-                                                  }
-
-                                             }}>
-                                             <View style={{ flexDirection: 'row' }}>
-                                                  <Icon
-                                                       name={item.icon}
-                                                       color={Color.primaryColor}
-                                                       size={20}
-                                                       solid
-                                                       style={{ marginHorizontal: 10 }}
-                                                  />
-                                                  <Text style={[Typography.body1]}>{item.title}</Text>
-                                             </View>
-                                             <Icon
-                                                  name="chevron-right"
-                                                  size={20}
-                                                  color={Color.primaryColor}
-                                                  enableRTL={true}
-                                             />
-                                        </TouchableOpacity>
-                                   )}
-                              /> */}
                          </View>
 
                     </View>

screens/wallet/WalletRetrait.js

@@ -1,35 +1,31 @@
-import React, { Component } from 'react';
-import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import I18n from 'react-native-i18n'
 import LottieView from 'lottie-react-native';
-import * as Utils from '../../utils/DeviceUtils';
+import 'moment/locale/en-au';
-import Icons from 'react-native-vector-icons/Ionicons'
+import 'moment/locale/en-ca';
-import { Images } from '../../config/Images';
+import 'moment/locale/en-ie';
-import CustomButton from '../../components/CustomButton';
+import 'moment/locale/en-il';
-import OutlineTextInput from '../../components/OutlineTextInput';
+import 'moment/locale/en-nz';
-import { Color } from '../../config/Color';
+import 'moment/locale/es-us';
-import Tag from '../../components/Tag';
+import 'moment/locale/fr';
-import { IlinkEmitter } from "../../utils/events";
+import React, { Component } from 'react';
+import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
 import { CreditCardInput } from "react-native-credit-card-input";
-import { Typography, FontWeight } from '../../config/typography';
-import { depositAction, depositActionReset } from '../../webservice/DepositApi';
-import { getWalletCommissionAmount, walletCommissionAmountReset, resetWalletListDetailReducer } from '../../webservice/WalletApi';
 import Dialog from "react-native-dialog";
-import { ProgressDialog } from 'react-native-simple-dialogs'
+import I18n from 'react-native-i18n';
-//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+import { Appbar, Provider } from 'react-native-paper';
-let moment = require('moment-timezone');
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
-import 'moment/locale/fr'
+import { ProgressDialog } from 'react-native-simple-dialogs';
-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';
+import CustomButton from '../../components/CustomButton';
+import OutlineTextInput from '../../components/OutlineTextInput';
 import style from '../../components/TextInput/styles';
-import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
+import { Color } from '../../config/Color';
+import { Typography } from '../../config/typography';
+import { IlinkEmitter } from "../../utils/events";
+import { depositAction, depositActionReset } from '../../webservice/DepositApi';
+import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
+//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+let moment = require('moment-timezone');
 
 
 const CONTAINER_WIDTH = Dimensions.get("window").width;
@@ -45,16 +41,9 @@ class WalletRetrait extends Component {
      };
      static navigationOptions = ({ navigation }) => {
           return {
-               drawerLabel: () => null,
+               header: null,
-               title: I18n.t('MAKE_WITHDRAWAL'),
+               headerMode: 'none',
-               headerStyle: {
+               headerTitle: null,
-                    backgroundColor: Color.primaryColor,
-                    marginTop: 23,
-                    color: 'white'
-               },
-               headerTitleStyle: {
-                    color: "white"
-               },
           }
      };
 
@@ -351,68 +340,87 @@ class WalletRetrait extends Component {
           console.log("STATE", this.state);
           const { error, resultGetCommission } = this.props;
           return (
-               <View style={[styles.container]}>
+               <Provider>
+                    <View style={{ flex: 1 }}>
 
-                    {
+                         <StatusBar
-                         (resultGetCommission !== null) &&
+                              backgroundColor={Color.primaryDarkColor}
-                         (typeof resultGetCommission.response !== 'undefined') &&
+                              barStyle="light-content"
-                         this.modalConfirmTransaction(resultGetCommission)
+                              translucent={false}
-                    }
+                         />
-                    {this.isHasError()}
-                    {this.commissionsLoading()}
-                    {this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
-                    <ScrollView style={{ padding: 20 }}>
 
-
+                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
-                         <View style={{ marginTop: 10 }}>
+                              <Appbar.BackAction
-                              <CreditCardInput
+                                   onPress={() => { this.props.navigation.pop() }}
-                                   validColor={this.state.creditCardInput.valid ? 'green' : ''}
-                                   invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
-                                   onChange={this.onCreditCardChange}
-                                   labels={{
-                                        number: I18n.t('CARD_NUMBER_LABEL'),
-                                        expiry: I18n.t('CARD_EXPIRY_LABEL'),
-                                        cvc: I18n.t('CARD_CVC_LABEL'),
-                                   }} />
-                              {
-                                   (this.state.displayCardError) &&
-                                   this.isCreditCardValid().map((item) => (
-                                        <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
-                                   ))
-                              }
-                         </View>
-
-                         <View style={{ margin: 20 }}>
-                              <OutlineTextInput
-                                   borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
-                                   value={this.state.montant}
-                                   keyboardType="numeric"
-                                   label={I18n.t('AMOUNT_LABEL')}
-                                   style={{ marginTop: 10 }}
-                                   placeholder={I18n.t('AMOUNT_LABEL')}
-                                   onChangeText={(montant) => {
-                                        this.setState({ montant });
-                                        this.isMontantValid();
-                                   }}
                               />
-                              {
+                              <Appbar.Content
-                                   (!this.isMontantValid().isValid) &&
+                                   title={I18n.t('MAKE_WITHDRAWAL')}
-                                   <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
+                              />
-                              }
+                         </Appbar.Header>
-                              {
+                         <View style={[styles.container]}>
-                                   (this.state.isSubmitClick && this.state.montant.length === 0) &&
-                                   <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
-                              }
-                              <Text></Text>
-                         </View>
 
-                         <View style={{ margin: 10 }}>
+                              {
-                              <CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
+                                   (resultGetCommission !== null) &&
-                                   {I18n.t('VALIDATE')}
+                                   (typeof resultGetCommission.response !== 'undefined') &&
-                              </CustomButton>
+                                   this.modalConfirmTransaction(resultGetCommission)
+                              }
+                              {this.isHasError()}
+                              {this.commissionsLoading()}
+                              {this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
+                              <ScrollView style={{ padding: 20 }}>
+
+
+                                   <View style={{ marginTop: 10 }}>
+                                        <CreditCardInput
+                                             validColor={this.state.creditCardInput.valid ? 'green' : ''}
+                                             invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
+                                             onChange={this.onCreditCardChange}
+                                             labels={{
+                                                  number: I18n.t('CARD_NUMBER_LABEL'),
+                                                  expiry: I18n.t('CARD_EXPIRY_LABEL'),
+                                                  cvc: I18n.t('CARD_CVC_LABEL'),
+                                             }} />
+                                        {
+                                             (this.state.displayCardError) &&
+                                             this.isCreditCardValid().map((item) => (
+                                                  <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
+                                             ))
+                                        }
+                                   </View>
+
+                                   <View style={{ margin: 20 }}>
+                                        <OutlineTextInput
+                                             borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
+                                             value={this.state.montant}
+                                             keyboardType="numeric"
+                                             label={I18n.t('AMOUNT_LABEL')}
+                                             style={{ marginTop: 10 }}
+                                             placeholder={I18n.t('AMOUNT_LABEL')}
+                                             onChangeText={(montant) => {
+                                                  this.setState({ montant });
+                                                  this.isMontantValid();
+                                             }}
+                                        />
+                                        {
+                                             (!this.isMontantValid().isValid) &&
+                                             <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
+                                        }
+                                        {
+                                             (this.state.isSubmitClick && this.state.montant.length === 0) &&
+                                             <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
+                                        }
+                                        <Text></Text>
+                                   </View>
+
+                                   <View style={{ margin: 10 }}>
+                                        <CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
+                                             {I18n.t('VALIDATE')}
+                                        </CustomButton>
+                                   </View>
+                              </ScrollView>
                          </View>
-                    </ScrollView>
+                    </View>
-               </View>
+               </Provider>
           )
      }
 

utils/UtilsFunction.js

@@ -130,6 +130,7 @@ export const transactionHistoryUser = () => {
 }
 
 export const optionDepotScreen = {
+     type: 'DEPOT',
      title: I18n.t('DEPOSIT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
@@ -157,6 +158,7 @@ export const optionDepotScreen = {
 }
 
 export const optionRetraitScreen = {
+     type: 'RETRAIT',
      title: I18n.t('WITHDRAWAL'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
@@ -169,6 +171,7 @@ export const optionRetraitScreen = {
 }
 
 export const optionRetraitUserScreen = {
+     type: 'RETRAIT_USER',
      title: I18n.t('WITHDRAWAL'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
@@ -191,6 +194,7 @@ export const optionRetraitUserScreen = {
 }
 
 export const optionDepotUserScreen = {
+     type: 'DEPOT_USER',
      title: I18n.t('DEPOSIT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
@@ -218,6 +222,7 @@ export const optionDepotUserScreen = {
 }
 
 export const optionIdentificationScreen = {
+     type: 'IDENTIFICATION',
      title: I18n.t('IDENTIFICATION'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
@@ -234,70 +239,125 @@ export const optionIdentificationScreen = {
      ]
 }
 
-export const optionPaiementFacture = {
+
+export const optionPaiementEauElectricite = {
      title: I18n.t('PAIEMENT_FACTURE'),
-     subTitle: I18n.t('CHOOSE_OPTION'),
+     subTitle: I18n.t('CHOOSE_OPERATOR'),
      options: [
           {
-               icon: 'water',
+               type: 'PAIEMENT_ECOLE',
-               title: 'Paiement eau/électricité',
+               screen: route.paiementFacture,
-               screen: route.paiementOptionSelect,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
-               subScreenOption: optionPaiementFactureSubScreen
+               title: 'Opérateur eau-électricité 1',
           },
           {
-               icon: 'school',
+               type: 'PAIEMENT_ECOLE',
-               title: 'Paiement école',
+               screen: route.paiementFacture,
-               screen: route.paiementOptionSelect,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
-               subScreenOption: optionPaiementFactureSubScreen
+               title: 'Opérateur eau-électricité 2',
           },
           {
-               icon: 'phone-classic',
+               type: 'PAIEMENT_ECOLE',
-               title: 'Paiement crédit téléphonique',
+               screen: route.paiementFacture,
-               screen: route.paiementOptionSelect,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
-               subScreenOption: optionPaiementFactureSubScreen
+               title: 'Opérateur eau-électricité 3',
           },
           {
-               icon: 'television-classic',
+               type: 'PAIEMENT_ECOLE',
-               title: 'Paiement abonnement TV',
+               screen: route.paiementFacture,
-               screen: route.paiementOptionSelect,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
-               subScreenOption: optionPaiementFactureSubScreen
+               title: 'Opérateur eau-électricité 4',
+          },
+          {
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Opérateur eau-électricité 5',
+          },
+          {
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Opérateur eau-électricité 6',
           },
      ]
 }
 
 export const optionPaiementFactureSubScreen = {
      title: I18n.t('PAIEMENT_FACTURE'),
-     subTitle: I18n.t('CHOOSE_OPTION'),
+     subTitle: I18n.t('CHOOSE_OPERATOR'),
      options: [
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 1',
           },
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 2',
           },
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 3',
           },
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 4',
           },
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 5',
           },
           {
-               screen: '',
+               type: 'PAIEMENT_ECOLE',
+               screen: route.paiementFacture,
                icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
                title: 'Opérateur 6',
           },
      ]
-}
+}
+
+export const optionPaiementFacture = {
+     type: 'FACTURE',
+     title: I18n.t('PAIEMENT_FACTURE'),
+     subTitle: I18n.t('CHOOSE_OPTION'),
+     options: [
+          {
+               type: 'FACTURE_WATER_ELECTRICITY',
+               icon: 'water',
+               title: 'Paiement eau/électricité',
+               screen: route.operateurOptionSelect,
+               subScreenOption: optionPaiementEauElectricite
+          },
+          {
+               type: 'FACTURE_SCHOOL',
+               icon: 'school',
+               title: 'Paiement école',
+               screen: route.operateurOptionSelect,
+               subScreenOption: optionPaiementFactureSubScreen
+          },
+          {
+               type: 'FACTURE_PHONE',
+               icon: 'phone-classic',
+               title: 'Paiement crédit téléphonique',
+               screen: route.operateurOptionSelect,
+               subScreenOption: optionPaiementFactureSubScreen
+          },
+          {
+               type: 'FACTURE_TV',
+               icon: 'television-classic',
+               title: 'Paiement abonnement TV',
+               screen: route.operateurOptionSelect,
+               subScreenOption: optionPaiementFactureSubScreen
+          },
+     ]
+}

utils/i18n/en.json

@@ -56,6 +56,7 @@
   "THIS_FIELD_IS_REQUIRED": "This field is required",
   "PLEASE_ENTER_THE_AMOUNT": "Please enter the amount",
   "CHOOSE_OPTION": "Please choose an option",
+  "CHOOSE_OPERATOR": "Please choose an operator",
   "EXPIRY_CARD_ERROR": "Date incorrect",
   "CARD_NUMBER_ERROR": "Card number incorrect",
   "AMOUNT_LABEL": "Amount",

utils/i18n/fr.json

@@ -65,6 +65,7 @@
   "THIS_FIELD_IS_REQUIRED": "Ce champ est requis",
   "PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
   "CHOOSE_OPTION": "Veuillez sélectionner une option",
+  "CHOOSE_OPERATOR": "Veuillez sélectionner un opérateur",
   "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
   "WITHDRAWAL": "Retrait",
   "WITHDRAWAL_IN_CASH": "Retrait en cash",

yarn.lock

@@ -6482,6 +6482,11 @@ react-native-i18n@^2.0.15:
   dependencies:
     i18n-js "3.0.11"
 
+react-native-image-crop-picker@^0.32.0:
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.32.0.tgz#c881d309fb0950d63fec40cfd0a5679b381f9a75"
+  integrity sha512-DRnUB3fsb/Vcg/SguGljx10PuJXaVt8XcmwgNaDZs77G2oLYiufkAlbJmHpdZT/GaYhzlRjF5aw6IPrTYxxMfw==
+
 react-native-loader@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/react-native-loader/-/react-native-loader-1.2.1.tgz#e08589a89cfcd076595b9301c1d618f54da73329"
@@ -6611,6 +6616,14 @@ react-native-phone-call@^1.0.9:
   resolved "https://registry.yarnpkg.com/react-native-phone-call/-/react-native-phone-call-1.0.9.tgz#4468ec6f95856557fbff9bd69a0db04b54c35e1d"
   integrity sha512-OPWYg8qeWNG/U4bWGMAKcQTH/ifqJnsvUPCH4lOkvWFHbQS3fbH5M8rFhXCzcfS0GVNzHhZX9ZByMM368TFAUQ==
 
+react-native-popover-tooltip@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/react-native-popover-tooltip/-/react-native-popover-tooltip-1.1.4.tgz#f6f2121e6725e9da2c014a33b946162c197a4eb4"
+  integrity sha1-9vISHmcl6dosAUozuUYWLBl6TrQ=
+  dependencies:
+    invariant "^2.2.2"
+    prop-types "^15.6.0"
+
 react-native-popup-dialog@^0.18.3:
   version "0.18.3"
   resolved "https://registry.yarnpkg.com/react-native-popup-dialog/-/react-native-popup-dialog-0.18.3.tgz#5d7a13fd7d9f817cf2121965a3b100a257201b67"