ajout de la fontionnalité retrait de cart vers autre wallet et avec une carte lier egalement

android/app/proguard-rules.pro

@@ -8,3 +8,4 @@
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
 # Add any project specific keep options here:
+-dontwarn com.polidea.reactnativeble.**

android/app/src/main/AndroidManifest.xml

@@ -5,7 +5,6 @@
     <uses-permission android:name="android.permission.INTERNET"/>
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
-    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
     <uses-permission android:name="android.permission.VIBRATE"/>
     <uses-permission android:name="android.permission.CALL_PHONE"/>
     <uses-permission android:name="android.permission.CAMERA"/>
@@ -13,6 +12,21 @@
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 
+<!-- /* add the permissions below before the aplication tag */ -->
+ <!-- <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.BLUETOOTH" />
+  <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> -->
+
+  <uses-permission android:name="android.permission.BLUETOOTH"/>
+    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
+    <uses-permission-sdk-23 android:name="android.permission.ACCESS_FINE_LOCATION"/>
+
+    <!-- Add this line if your application always requires BLE. More info can be found on:
+        https://developer.android.com/guide/topics/connectivity/bluetooth-le.html#permissions
+      -->
+    <uses-feature android:name="android.hardware.bluetooth_le" android:required="true"/>
+
     <uses-sdk tools:overrideLibrary="com.shazam.android.widget.text.reflow"/>
 
     <application

android/build.gradle

@@ -11,6 +11,7 @@ buildscript {
         google()
         //jcenter()
         mavenCentral()
+         maven { url 'https://www.jitpack.io' }
     }
     dependencies {
         classpath('com.android.tools.build:gradle:4.2.1')

app/App.js

@@ -55,6 +55,7 @@ import ValidateIdentification from './screens/identification/validateIdentificat
 import CreateIdentificationUser from './screens/identification/CreateIdentificationUser';
 import OperateurOptionSelect from './screens/wallet/OperateurOptionSelect';
 import PaiementFacture from './screens/wallet/PaiementFacture';
+// import BluetoothConnection from './screens/wallet/Bluetooth';
 import EnvoieWalletToWalletUser from './screens/wallet/user/EnvoieWalletToWalletUser';
 import EnvoieWalletToCashUser from './screens/wallet/user/EnvoieWalletToCash';
 import LinkCard from './screens/wallet/user/LinkCard';
@@ -65,6 +66,9 @@ import RetraitCarteVersCashUser from './screens/wallet/user/RetraitCarteVersCash
 import RetraitCarteVersWalletUser from './screens/wallet/user/RetraitCarteVersWalletUser';
 import RetraitEnCashAgent from './screens/wallet/agent/RetraitEnCashAgent';
 import RetraitCarteVersAutreWalletUser from './screens/wallet/user/RetraitCarteVersAutreWalletUser';
+import Modal from './screens/wallet/user/modal';
+import AutreCarte from './screens/wallet/user/AutreCarte';
+import CarteLier from './screens/wallet/user/CarteLier';
 import RetraitCarteVersCashAgent from './screens/wallet/agent/RetraitCarteVersCashAgent';
 import EnvoieCashVersWalletAgent from './screens/wallet/agent/EnvoieCashVersWalletAgent';
 import EnvoieCashVersAutreWalletAgent from './screens/wallet/agent/EnvoieCashVersAutreWalletAgent';
@@ -148,6 +152,7 @@ const AppStack = createDrawerNavigator(
       walletOptionSelect: WalletOptionSelect,
       operateurOptionSelect: OperateurOptionSelect,
       paiementFacture: PaiementFacture,
+      // bluetoothConnection: BluetoothConnection,
       envoieWalletToWalletUser: EnvoieWalletToWalletUser,
       envoieWalletToCashUser: EnvoieWalletToCashUser,
       envoieWalletToCardUser: EnvoieWalletToCardUser,
@@ -400,6 +405,7 @@ const AppAgentStack = createDrawerNavigator(
       walletOptionSelect: WalletOptionSelect,
       operateurOptionSelect: OperateurOptionSelect,
       paiementFacture: PaiementFacture,
+      // bluetoothConnection: BluetoothConnection,
       retraitEnCashAgent: RetraitEnCashAgent,
       retraitCarteVersCashAgent: RetraitCarteVersCashAgent,
       retraitCarteVersAutreWalletUser: RetraitCarteVersAutreWalletUser,
@@ -411,6 +417,9 @@ const AppAgentStack = createDrawerNavigator(
       createGroupNanoCredit: CreateGroupNanoCredit,
       cautionNanoCreditAgent: CautionNanoCreditAgent,
       PDFViewerScreen: PDFViewerScreen,
+      modal: Modal,
+      autreCarte: AutreCarte,
+      carteLier: CarteLier,
     }),
   },
   {

app/route.json

@@ -39,6 +39,7 @@
   "validateIdentification": "validateIdentification",
   "operateurOptionSelect": "operateurOptionSelect",
   "paiementFacture": "paiementFacture",
+  "bluetoothConnection": "bluetoothConnection",
   "envoieWalletToWalletUser": "envoieWalletToWalletUser",
   "envoieWalletToCashUser": "envoieWalletToCashUser",
   "envoieWalletToCardUser": "envoieWalletToCardUser",
@@ -52,6 +53,8 @@
   "retraitCarteVersCashAgent": "retraitCarteVersCashAgent",
   "retraitCarteVersAutreWalletUser": "retraitCarteVersAutreWalletUser",
   "modal": "modal",
+  "autreCarte": "autreCarte",
+  "carteLier": "carteLier",
   "envoieCashVersWalletAgent": "envoieCashVersWalletAgent",
   "envoieCashVersAutreWalletAgent": "envoieCashVersAutreWalletAgent",
   "envoieCashVersCarteAgent": "envoieCashVersCarteAgent",

app/screens/optionMenu/OptionsMenu.js

@@ -448,6 +448,8 @@ export default class OptionsMenu extends Component {
       item === 'retraitCarteVersCashAgent' ||
       item === 'retraitCarteVersAutreWalletUser' ||
       item === 'modal' ||
+      item === 'autreCarte' ||
+      item === 'carteLier' ||
       item === 'envoieCashVersWalletAgent' ||
       item === 'envoieCashVersAutreWalletAgent' ||
       item === 'retraitCarteVersCashUser' ||

app/screens/wallet/Bluetooth.js

@@ -0,0 +1,262 @@
+// import React, {useState, useEffect} from 'react';
+// import {
+//   Text,
+//   View,
+//   Platform,
+//   StatusBar,
+//   ScrollView,
+//   StyleSheet,
+//   Dimensions,
+//   SafeAreaView,
+//   NativeModules,
+//   useColorScheme,
+//   TouchableOpacity,
+//   NativeEventEmitter,
+//   PermissionsAndroid,
+// } from 'react-native';
+// import BleManager from 'react-native-ble-manager';
+// import {Colors} from 'react-native/Libraries/NewAppScreen';
+// const BleManagerModule = NativeModules.BleManager;
+// const BleManagerEmitter = new NativeEventEmitter(BleManagerModule);
+
+import { View, Text } from "react-native";
+
+// const BluetoothConnection = () => {
+//   const peripherals = new Map();
+//   const [isScanning, setIsScanning] = useState(false);
+//   const [connected, setConnected] = useState(false);
+//   const [bluetoothDevices, setBluetoothDevices] = useState([]);
+//   useEffect(() => {
+//     // turn on bluetooth if it is not on
+//     BleManager.enableBluetooth().then(() => {
+//       console.log('Bluetooth is turned on!');
+//     });
+//     // start bluetooth manager
+//     BleManager.start({showAlert: false}).then(() => {
+//       console.log('BLE Manager initialized');
+//     });
+//     let stopListener = BleManagerEmitter.addListener(
+//       'BleManagerStopScan',
+//       () => {
+//         setIsScanning(false);
+//         console.log('Scan is stopped');
+//         handleGetConnectedDevices();
+//       },
+//     );
+//     if (Platform.OS === 'android' && Platform.Version >= 23) {
+//       PermissionsAndroid.check(
+//         PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+//       ).then(result => {
+//         if (result) {
+//           console.log('Permission is OK');
+//         } else {
+//           PermissionsAndroid.request(
+//             PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+//           ).then(result => {
+//             if (result) {
+//               console.log('User accept');
+//             } else {
+//               console.log('User refuse');
+//             }
+//           });
+//         }
+//       });
+//     }
+//     return () => {
+//       stopListener.remove();
+//     };
+//   }, []);
+//   const startScan = () => {
+//     if (!isScanning) {
+//       BleManager.scan([], 5, true)
+//         .then(() => {
+//           setIsScanning(true);
+//         })
+//         .catch(error => {
+//           console.error(error);
+//         });
+//     }
+//   };
+//   const handleGetConnectedDevices = () => {
+//     BleManager.getConnectedPeripherals([]).then(results => {
+//       if (results.length == 0) {
+//         console.log('No connected bluetooth devices');
+//       } else {
+//         for (let i = 0; i < results.length; i++) {
+//           let peripheral = results[i];
+//           peripheral.connected = true;
+//           peripherals.set(peripheral.id, peripheral);
+//           setConnected(true);
+//           setBluetoothDevices(Array.from(peripherals.values()));
+//         }
+//       }
+//     });
+//   };
+//   const connectToPeripheral = peripheral => {
+//     if (peripheral.connected) {
+//       BleManager.disconnect(peripheral.id).then(() => {
+//         peripheral.connected = false;
+//         setConnected(false);
+//         alert(`Disconnected from ${peripheral.name}`);
+//       });
+//     } else {
+//       BleManager.connect(peripheral.id)
+//         .then(() => {
+//           let peripheralResponse = peripherals.get(peripheral.id);
+//           if (peripheralResponse) {
+//             peripheralResponse.connected = true;
+//             peripherals.set(peripheral.id, peripheralResponse);
+//             setConnected(true);
+//             setBluetoothDevices(Array.from(peripherals.values()));
+//           }
+//           alert('Connected to ' + peripheral.name);
+//         })
+//         .catch(error => console.log(error));
+//       /* Read current RSSI value */
+//       setTimeout(() => {
+//         BleManager.retrieveServices(peripheral.id).then(peripheralData => {
+//           console.log('Peripheral services:', peripheralData);
+//         });
+//       }, 900);
+//     }
+//   };
+//   const isDarkMode = useColorScheme() === 'dark';
+//   const backgroundStyle = {
+//     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+//   };
+//   // render list of bluetooth devices
+//   const RenderItem = ({peripheral}) => {
+//     const color = peripheral.connected ? 'green' : '#fff';
+//     return (
+//       <>
+//         <Text
+//           style={{
+//             fontSize: 20,
+//             marginLeft: 10,
+//             marginBottom: 5,
+//             color: isDarkMode ? Colors.white : Colors.black,
+//           }}>
+//           Nearby Devices:
+//         </Text>
+//         <TouchableOpacity onPress={() => connectToPeripheral(peripheral)}>
+//           <View
+//             style={{
+//               backgroundColor: color,
+//               borderRadius: 5,
+//               paddingVertical: 5,
+//               marginHorizontal: 10,
+//               paddingHorizontal: 10,
+//             }}>
+//             <Text
+//               style={{
+//                 fontSize: 18,
+//                 textTransform: 'capitalize',
+//                 color: connected ? Colors.white : Colors.black,
+//               }}>
+//               {peripheral.name}
+//             </Text>
+//             <View
+//               style={{
+//                 backgroundColor: color,
+//                 flexDirection: 'row',
+//                 justifyContent: 'space-between',
+//                 alignItems: 'center',
+//               }}>
+//               <Text
+//                 style={{
+//                   fontSize: 14,
+//                   color: connected ? Colors.white : Colors.black,
+//                 }}>
+//                 RSSI: {peripheral.rssi}
+//               </Text>
+//               <Text
+//                 style={{
+//                   fontSize: 14,
+//                   color: connected ? Colors.white : Colors.black,
+//                 }}>
+//                 ID: {peripheral.id}
+//               </Text>
+//             </View>
+//           </View>
+//         </TouchableOpacity>
+//       </>
+//     );
+//   };
+//   return (
+//     <SafeAreaView style={[backgroundStyle, styles.mainBody]}>
+//       <StatusBar
+//         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
+//         backgroundColor={backgroundStyle.backgroundColor}
+//       />
+//       <ScrollView
+//         style={backgroundStyle}
+//         contentContainerStyle={styles.mainBody}
+//         contentInsetAdjustmentBehavior="automatic">
+//         <View
+//           style={{
+//             backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+//             marginBottom: 40,
+//           }}>
+//           <View>
+//             <Text
+//               style={{
+//                 fontSize: 30,
+//                 textAlign: 'center',
+//                 color: isDarkMode ? Colors.white : Colors.black,
+//               }}>
+//               React Native BLE Manager Tutorial
+//             </Text>
+//           </View>
+//           <TouchableOpacity
+//             activeOpacity={0.5}
+//             style={styles.buttonStyle}
+//             onPress={startScan}>
+//             <Text style={styles.buttonTextStyle}>
+//               {isScanning ? 'Scanning...' : 'Scan Bluetooth Devices'}
+//             </Text>
+//           </TouchableOpacity>
+//         </View>
+//         {/* list of scanned bluetooth devices */}
+//         {bluetoothDevices.map(device => (
+//           <View key={device.id}>
+//             <RenderItem peripheral={device} />
+//           </View>
+//         ))}
+//       </ScrollView>
+//     </SafeAreaView>
+//   );
+// };
+// const windowHeight = Dimensions.get('window').height;
+// const styles = StyleSheet.create({
+//   mainBody: {
+//     flex: 1,
+//     justifyContent: 'center',
+//     height: windowHeight,
+//   },
+//   buttonStyle: {
+//     backgroundColor: '#307ecc',
+//     borderWidth: 0,
+//     color: '#FFFFFF',
+//     borderColor: '#307ecc',
+//     height: 40,
+//     alignItems: 'center',
+//     borderRadius: 30,
+//     marginLeft: 35,
+//     marginRight: 35,
+//     marginTop: 15,
+//   },
+//   buttonTextStyle: {
+//     color: '#FFFFFF',
+//     paddingVertical: 10,
+//     fontSize: 16,
+//   },
+// });
+// export default BluetoothConnection;
+
+export default function BluetoothConnection() {
+  return(
+    <View>
+      <Text>Bluetooth</Text>
+    </View>
+  )
+}

app/screens/wallet/user/CarteLier.js

@@ -0,0 +1,980 @@
+import Button from 'apsl-react-native-button';
+import isEqual from 'lodash/isEqual';
+import isNil from 'lodash/isNil';
+import React, {Component} from 'react';
+import {Alert, ScrollView, StyleSheet, Text, View} from 'react-native';
+import * as Animatable from 'react-native-animatable';
+import I18n from 'react-native-i18n';
+import Dialog from "react-native-dialog";
+import {Dropdown} from 'react-native-material-dropdown-v2';
+import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
+import {ProgressDialog} from 'react-native-simple-dialogs';
+import {Fumi} from 'react-native-textinput-effects';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {Color} from '../../../config/Color';
+import {store} from "../../../redux/store";
+import {identityPieces, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire} from '../../../utils/UtilsFunction';
+import { LiteCreditCardInput } from "react-native-credit-card-input";
+import {readUser} from '../../../webservice/AuthApi';
+import {
+    getActiveCountryAction,
+    getActiveCountryByDialCodeAction,
+    getActiveCountryByDialCodeReset,
+    getActiveCountryReset,
+    getPayCountryNetworkAction,
+    getPayCountryNetworkReset
+} from '../../../webservice/CountryApi';
+import {
+    envoieUserWalletToWalletAction,
+    envoieUserWalletToWalletReset,
+    getCommissionUserWalletToWalletAction,
+    getCommissionUserWalletToWalletReset
+} from '../../../webservice/EnvoieUserApi';
+import {FontWeight, Typography} from '../../../config/typography';
+import thousands from 'thousands';
+import {IlinkEmitter} from '../../../utils/events';
+
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+class CarteLier extends Component {
+    static navigatorStyle = {
+        navBarBackgroundColor: Color.primaryColor,
+        statusBarColor: Color.primaryDarkColor,
+        navBarTextColor: '#FFFFFF',
+        navBarButtonColor: '#FFFFFF'
+    };
+
+    static navigationOptions = () => {
+        return {
+            drawerLabel: () => null,
+            headerTitle: I18n.t('ENVOIE_WALLET_TO_ORDER_WALLET'),
+            headerTintColor: 'white',
+            headerStyle: {
+                backgroundColor: Color.primaryColor,
+                marginTop: 30,
+                color: 'white'
+            },
+            headerTitleStyle: {
+                color: "white"
+            },
+            title: I18n.t('ENVOIE_WALLET_TO_ORDER_WALLET')
+        }
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            identityPieces: identityPieces(),
+            identityPiecesName: I18n.t((identityPieces()[0]).name),
+            paysDestination: [],
+            paysDestinationSelect: null,
+            walletActifs: [],
+            walletActifSelect: null,
+            typeIdDestinataire: typeIdIDestinataire(),
+            typeIdDestinataireSelect: (typeIdIDestinataire()[0].value),
+            numeroTelephoneOrWalletCode: null,
+            numeroIdentite: null,
+            montant: null,
+            password: null,
+            isIlinkWorldWalletSelect: false,
+            loading: false,
+            numeroSerie: '',
+            numCarte: 0,
+            cvv: 0,
+            codeCVV: null,
+            expiration_date: '',
+            creditCardInput: {},
+            user: null,
+            nomsDestinataire: null,
+            prenomsDestinataire: null,
+            modalVisible: true,
+            hasLoadActiveCountryList: true,
+            hasLoadActivePayCountryNetworkList: true,
+            triggerSubmitClick: false,
+            isDataSubmit: false,
+            isModalConfirmVisible: false,
+            wallet: store.getState().walletDetailReducer.result.response,
+            with_linked_card: true
+        };
+
+        this.props.getActiveCountryReset();
+        this.props.getActiveCountryByDialCodeReset();
+        this.props.getPayCountryNetworkReset();
+        this.props.envoieUserWalletToWalletReset();
+        this.props.getCommissionUserWalletToWalletReset();
+
+        this.props.getActiveCountryAction();
+        console.log("ENVOIE WALLET PROPS", this.props);
+    }
+
+    componentDidMount() {
+        
+        readUser().then((user) => {
+            if (user) {
+                if (user !== undefined) {
+                    this.setState({user});
+                }
+            }
+        });
+
+    }
+
+    componentWillReceiveProps(nextProps) {
+
+        if (nextProps.resultEnvoieWalletToWalletGetCommission != null) {
+
+            if (typeof nextProps.resultEnvoieWalletToWalletGetCommission.response !== 'undefined') {
+
+                if (!nextProps.loadingEnvoieWalletToWalletGetCommission)
+                    this.setState({
+                        isModalConfirmVisible: true
+                    });
+            }
+        }
+    }
+
+    renderGetActionCountryList = () => {
+
+        const {resultActiveCountryList, errorActiveCountryList} = this.props;
+        if (resultActiveCountryList !== null) {
+            if (typeof resultActiveCountryList.response !== 'undefined') {
+
+                this.setState({
+                    hasLoadActiveCountryList: false,
+                    paysDestination: resultActiveCountryList.response,
+                    paysDestinationSelect: resultActiveCountryList.response[0].name,
+                });
+                if (this.state.hasLoadActivePayCountryNetworkList)
+                    this.props.getPayCountryNetworkAction({
+                        id_wallet_user: this.state.wallet.id,
+                        id_country: resultActiveCountryList.response[0].id
+                    });
+            }
+        }
+
+        if (errorActiveCountryList !== null) {
+            if (typeof errorActiveCountryList.data !== 'undefined') {
+                Alert.alert(
+                    I18n.t('ERROR_LABEL'),
+                    errorActiveCountryList.data.error,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.getActiveCountryReset();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            } else {
+                Alert.alert(
+                    I18n.t('ERROR_LABEL'),
+                    JSON.stringify(errorActiveCountryList),
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.getActiveCountryReset();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+    }
+
+    renderGetPayCountryNetworkResponse = () => {
+        const {resultPayCountryNetwork, errorPayCountryNetwork} = this.props;
+        if (resultPayCountryNetwork !== null) {
+            if (typeof resultPayCountryNetwork.response !== 'undefined') {
+                if (resultPayCountryNetwork.response.length > 0) {
+                    let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? 'user_code' : 'phone';
+                    this.setState({
+                        hasLoadActivePayCountryNetworkList: false,
+                        walletActifs: resultPayCountryNetwork.response,
+                        walletActifSelect: resultPayCountryNetwork.response[0].name,
+                        typeIdDestinataireSelect: typeIdentifiant,
+                        isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type),
+                        modalVisible: false
+                    });
+                } else if (resultPayCountryNetwork.response.length === 0) {
+                    this.setState({
+                        walletActifs: [],
+                        walletActifSelect: '',
+                        modalVisible: false,
+                        hasLoadActivePayCountryNetworkList: false,
+                    });
+                }
+            }
+        }
+
+        if (errorPayCountryNetwork !== null) {
+            if (typeof errorPayCountryNetwork.data !== 'undefined') {
+                Alert.alert(
+                    I18n.t('ERROR_LABEL'),
+                    errorPayCountryNetwork.data.error,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.getPayCountryNetworkReset();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            } else {
+                Alert.alert(
+                    I18n.t('ERROR_LABEL'),
+                    JSON.stringify(errorPayCountryNetwork),
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.getPayCountryNetworkReset();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+    }
+
+    renderEnvoieWalletToWalletResponse = () => {
+   
+        const {resultEnvoieWalletToWallet, errorEnvoieWalletToWallet} = this.props;
+        if (errorEnvoieWalletToWallet !== null) {
+            if (typeof errorEnvoieWalletToWallet.data !== 'undefined') {
+                Alert.alert(
+                    I18n.t("ERROR_TRANSFER"),
+                    errorEnvoieWalletToWallet.data.error,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.envoieUserWalletToWalletReset();
+                            }
+                        }
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+
+        if (resultEnvoieWalletToWallet !== null) {
+            if (resultEnvoieWalletToWallet.response !== null) {
+                Alert.alert(
+                    I18n.t("SUCCESS_TRANSFER"),
+                    resultEnvoieWalletToWallet.response,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.envoieUserWalletToWalletReset();
+                                IlinkEmitter.emit("refreshWallet");
+                                this.props.navigation.pop();
+                            }
+                        }
+
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+    }
+    
+
+    renderDialogGetCommissionResponse = () => {
+
+        const {errorEnvoieWalletToWalletGetCommission} = this.props;
+
+        if (errorEnvoieWalletToWalletGetCommission !== null) {
+            if (typeof errorEnvoieWalletToWalletGetCommission.data !== 'undefined') {
+                Alert.alert(
+                    I18n.t("ERROR_LABLE"),
+                    errorEnvoieWalletToWalletGetCommission.data.error,
+                    [
+                        {
+                            text: I18n.t("OK"), onPress: () => {
+                                this.props.getCommissionUserWalletToWalletReset();
+                            }
+                        }
+                    ],
+                    {cancelable: false}
+                )
+            }
+        }
+
+    }
+
+    isCreditCardValid = () => {
+        const { creditCardInput } = this.state;
+        const errorMessage = [];
+
+        if (typeof creditCardInput.status !== 'undefined') {
+
+             if (creditCardInput.status.cvc === 'incomplete')
+                  errorMessage.push(I18n.t('CVC_CARD_ERROR') || secureTextEntry=='true');
+             if (creditCardInput.status.expiry === 'incomplete')
+                  errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
+             if (creditCardInput.status.number === 'incomplete')
+                  errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
+        }
+        else
+             errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))
+
+        return errorMessage;
+   }
+
+    ckeckIfFieldIsOK(champ) {
+        return (isNil(champ) || isEqual(champ.length, 0));
+    }
+
+    isMontantValid = () => {
+        const {montant} = this.state;
+        if ((parseInt(isEqual(montant, 0)) || montant < 0))
+            return {
+                errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
+                isValid: false
+            };
+
+        else if (!isNormalInteger(montant))
+            return {
+                errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
+                isValid: false
+            };
+
+
+        else if (montant > parseInt(this.state.comptePrincipal))
+            return {
+                errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
+                isValid: false
+            };
+
+        else
+            return {
+                errorMessage: '',
+                isValid: true
+            };
+    }
+
+    modalConfirmTransaction = (data) => {
+        const commission = data.response.frais;
+        const montant_net_final = data.response.montant_net_final;
+        const montant_net_init = data.response.montant_net_init;
+        const destinataire = data.response.destinataire;
+
+        console.log("DATA SEND TO CONFIRM DIALOG", data);
+        return (
+
+            <Dialog.Container useNativeDriver={true} visible={this.state.isModalConfirmVisible}>
+
+                <Dialog.Title>{I18n.t('TRANSACTION_DETAIL')}</Dialog.Title>
+
+                <View>
+
+                    <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text style={[styles.body2]}>{I18n.t('DESTINATAIRE')}</Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text style={[Typography.caption1, Color.grayColor]}>{destinataire}</Text>
+                            </View>
+                        </View>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text style={[styles.body2]}>{I18n.t('AMOUNT')}</Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(this.state.montant, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                            </View>
+                        </View>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text tyle={[Typography.body2]}>{I18n.t('FEES_AND_TAXES')}</Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(commission, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                            </View>
+                        </View>
+                    </View>
+                    <View style={{paddingVertical: 10}}>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('NET_AMOUNT')}: </Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text style={[Typography.caption1, Color.grayColor]}></Text>
+                            </View>
+                        </View>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text tyle={[Typography.body2]}>{I18n.t('INIT_COUNTRY')}</Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text
+                                    style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net_init, ' ')} ${this.state.wallet.currency_code}`}</Text>
+                            </View>
+                        </View>
+                        <View style={{flexDirection: 'row', marginTop: 10}}>
+                            <View style={{flex: 1}}>
+                                <Text tyle={[Typography.body2]}>{I18n.t('FINAL_COUNTRY')}</Text>
+                            </View>
+                            <View style={{flex: 1, alignItems: 'flex-end'}}>
+                                <Text style={[Typography.caption1, Color.grayColor]}>{montant_net_final}</Text>
+                            </View>
+                        </View>
+                    </View>
+                </View>
+
+                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
+                    this.setState({
+                        isModalConfirmVisible: false
+                    });
+                }}/>
+                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
+                    this.setState({
+                        isModalConfirmVisible: false,
+                        isDataSubmit: true
+                    });
+                    
+                    this.props.envoieUserWalletToWalletAction({
+                        type: 21,
+                        id_wallet_user: this.state.wallet.id,
+                        type_id_destinataire : this.state.typeIdDestinataireSelect,
+                        final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
+                        id_destinataire: this.state.numeroTelephoneOrWalletCode,
+                        type_document_destinataire: this.state.identityPiecesName,
+                        prenom_destianataire: this.state.prenom_destianataire,
+                        id_document_destinataire: this.state.numeroIdentite,
+                        nom_destinataire: this.state.nomsDestinataire,
+                        prenom_destinataire: this.state.prenomsDestinataire,
+                        network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
+                        montant: this.state.montant,
+                        password: this.state.password,
+                        cvv: this.state.codeCVV,
+                        with_linked_card: true,
+                    });
+                    this.props.getCommissionUserWalletToWalletReset();
+                }}
+                />
+
+            </Dialog.Container>
+
+        );
+
+    }
+
+   onSubmitSendWalletToWallet  = () => {
+        const {
+            nomsDestinataire,
+            prenomsDestinataire,
+            identityPiecesName,
+            paysDestinationSelect,
+            numeroIdentite,
+            walletActifSelect,
+            typeIdDestinataireSelect,
+            numeroTelephoneOrWalletCode,
+            //creditCardInput,
+            codeCVV,
+            montant,
+            password
+        } = this.state;
+
+             if (this.ckeckIfFieldIsOK(nomsDestinataire))
+            this.nomDestinataireAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(prenomsDestinataire))
+            this.prenomsDestinataireAnim.shake(800);
+            else if (this.ckeckIfFieldIsOK(identityPiecesName))
+            this.identityPiecesAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(paysDestinationSelect))
+            this.paysDestinationAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(walletActifSelect))
+            this.walletActifAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
+            this.typeIdDestinataireAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(numeroIdentite))
+            this.numeroIdentiteAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(numeroTelephoneOrWalletCode))
+            this.numeroTelephoneAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(codeCVV) && codeCVV === 3)
+               this.codeCVVAnim.shake(800);
+        else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+            console.log("IS MONTANT VALID", this.isMontantValid())
+            this.montantAnim.shake(800);
+        } else if (this.ckeckIfFieldIsOK(password))
+            this.passwordAnim.shake(800);
+        else {
+
+            this.props.getCommissionUserWalletToWalletAction({
+                type: 21,
+                network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
+                id_wallet_user: this.state.wallet.id,
+                final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
+                id_destinataire: this.state.numeroTelephoneOrWalletCode,
+                montant: this.state.montant,
+            });
+
+        }
+        this.setState({
+            triggerSubmitClick: true
+        })
+
+    }
+
+    renderLoader = () => {
+        return (
+            <ProgressDialog
+                visible={this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode}
+                title={I18n.t('LOADING')}
+                message={I18n.t('LOADING_INFO')}
+            />
+        )
+    }
+
+    render() {
+        console.log("STATE", this.state);
+        const {resultEnvoieWalletToWalletGetCommission} = this.props;
+        return (
+            <>
+                {(this.state.modalVisible || this.props.loadingEnvoieWalletToWalletGetCommission || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
+                {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
+                {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
+                {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                {
+                    (resultEnvoieWalletToWalletGetCommission !== null) &&
+                    (typeof resultEnvoieWalletToWalletGetCommission.response !== 'undefined') &&
+                    this.modalConfirmTransaction(resultEnvoieWalletToWalletGetCommission)
+                }
+                <ScrollView style={styles.container}>
+
+                    <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_ORDER_WALLET')} </Text>
+
+                    <Animatable.View ref={(comp) => {
+                            this.nomDestinataireAnim = comp
+                        }}>
+                            <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
+                                  label={`${I18n.t('NAME_DESTINATAIRE')}`}
+                                  iconColor={'#f95a25'}
+                                  iconSize={20}
+                                  value={this.state.nomsDestinataire}
+                                  onChangeText={(nomsDestinataire) => {
+                                      this.setState({nomsDestinataire})
+                                  }}
+                                  style={styles.input}
+                            >
+                            </Fumi>
+                        </Animatable.View>
+
+                        <Animatable.View ref={(comp) => {
+                            this.prenomsDestinataireAnim = comp
+                        }}>
+                            <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
+                                  label={`${I18n.t('FIRSTNAME_DESTINATAIRE')}`}
+                                  iconColor={'#f95a25'}
+                                  iconSize={20}
+                                  value={this.state.prenomsDestinataire}
+                                  onChangeText={(prenomsDestinataire) => {
+                                      this.setState({prenomsDestinataire})
+                                  }}
+                                  style={styles.input}
+                            >
+                            </Fumi>
+                        </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.paysDestinationAnim = comp
+                    }}
+                                     style={{
+                                         width: responsiveWidth(90),
+                                         height: 60,
+                                         marginTop: 20,
+                                         alignSelf: 'center',
+                                         borderRadius: 10,
+                                         paddingLeft: 20,
+                                         paddingRight: 20,
+                                         backgroundColor: 'white'
+                                     }}>
+                        <Dropdown
+                            label={I18n.t('PAYS_DESTINATION')}
+                            data={this.state.paysDestination}
+                            useNativeDriver={true}
+                            value={this.state.paysDestinationSelect === null ? '' : this.state.paysDestinationSelect}
+                            onChangeText={(value, index, data) => {
+                                this.props.getPayCountryNetworkReset();
+
+                                let countrySelect = data.filter(element => element.name === value);
+                                this.setState({
+                                    paysDestinationSelect: value,
+                                    hasLoadActivePayCountryNetworkList: true
+                                }, () => {
+                                    this.props.getPayCountryNetworkAction({
+                                        id_wallet_user: this.state.wallet.id,
+                                        id_country: countrySelect[0].id
+                                    });
+                                });
+                                this.props.getCommissionUserWalletToWalletReset();
+                            }}
+                            valueExtractor={(value) => {
+                                return value.name
+                            }}
+                            labelExtractor={(value) => {
+                                return value.name
+                            }}
+                        />
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.walletActifAnim = comp
+                    }}
+                                     style={{
+                                         width: responsiveWidth(90),
+                                         height: 60,
+                                         marginTop: 20,
+                                         alignSelf: 'center',
+                                         borderRadius: 10,
+                                         paddingLeft: 20,
+                                         paddingRight: 20,
+                                         backgroundColor: 'white'
+                                     }}>
+                        <Dropdown
+                            label={I18n.t('ACTIVE_WALLET')}
+                            data={this.state.walletActifs}
+                            useNativeDriver={true}
+                            value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
+                            onChangeText={(value, index, data) => {
+                                let activeWalletSelect = data.filter(element => element.name === value);
+                                let typeIdentifiant = isIlinkWorldWallet(activeWalletSelect[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
+                                this.setState({
+                                    walletActifSelect: value,
+                                    typeIdDestinataireSelect: typeIdentifiant
+                                });
+
+                            }}
+                            valueExtractor={(value) => {
+                                return value.name
+                            }}
+                            labelExtractor={(value) => {
+                                return value.name
+                            }}
+                        />
+
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.typeIdDestinataireAnim = comp
+                    }}
+                                     style={{
+                                         width: responsiveWidth(90),
+                                         height: 60,
+                                         marginTop: 20,
+                                         alignSelf: 'center',
+                                         borderRadius: 10,
+                                         paddingLeft: 20,
+                                         paddingRight: 20,
+                                         backgroundColor: 'white'
+                                     }}>
+                        <Dropdown
+                            disabled={this.state.isIlinkWorldWalletSelect}
+                            label={I18n.t('TYPE_IDENTIFIANT')}
+                            data={this.state.typeIdDestinataire}
+                            useNativeDriver={true}
+                            value={this.state.typeIdDestinataireSelect}
+                            onChangeText={(value, index, data) => {
+                                this.setState({typeIdDestinataireSelect: value});
+                            }}
+                            valueExtractor={(value) => {
+                                return value.value
+                            }}
+                            labelExtractor={(value) => {
+                                return I18n.t(value.name)
+                            }}
+
+                        />
+                
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.numeroTelephoneAnim = comp
+                    }}>
+                        <Fumi iconClass={FontAwesomeIcon}
+                              iconName={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone' : 'lock'}
+                              label={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? I18n.t('PHONE') : I18n.t('CODE_WALLET')}
+                              iconColor={'#f95a25'}
+                              keyboardType={isEqual(this.state.typeIdDestinataireSelect, 'phone') ? 'phone-pad' : 'default'}
+                              iconSize={20}
+                              value={this.state.numeroTelephoneOrWalletCode}
+                              onChangeText={(numeroTelephoneOrWalletCode) => {
+                                  this.setState({numeroTelephoneOrWalletCode})
+                              }}
+                              style={styles.input}
+                        >
+                        </Fumi>
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.identityPiecesAnim = comp
+                    }}
+                                     style={{
+                                         width: responsiveWidth(90),
+                                         height: 60,
+                                         marginTop: 20,
+                                         alignSelf: 'center',
+                                         borderRadius: 10,
+                                         paddingLeft: 20,
+                                         paddingRight: 20,
+                                         backgroundColor: 'white'
+                                     }}>
+                        <Dropdown
+                            label={I18n.t('PIECE_IDENTITE')}
+                            data={this.state.identityPieces}
+                            useNativeDriver={true}
+                            value={this.state.identityPiecesName}
+                            onChangeText={(value, index, data) => {
+                                this.setState({identityPiecesName: value});
+                            }}
+                            valueExtractor={(value) => {
+                                return I18n.t(value.name)
+                            }}
+                            labelExtractor={(value) => {
+                                return I18n.t(value.name)
+                            }}
+                        />
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.numeroIdentiteAnim = 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.montantAnim = comp
+                    }}>
+                        <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
+                              label={I18n.t('AMOUNT')}
+                              iconColor={'#f95a25'}
+                              keyboardType='numeric'
+                              iconSize={20}
+                              value={this.state.montant}
+                              onChangeText={(montant) => {
+                                  this.setState({montant})
+                              }}
+                              style={styles.input}
+                        >
+                        </Fumi>
+                        <View style={{
+                            position: 'absolute',
+                            left: responsiveWidth(82),
+                            top: 35,
+                            flexDirection: 'row'
+                        }}>
+                            <View
+                                style={{
+                                    width: 1,
+                                    borderLeftColor: '#f0f0f0',
+                                    height: 40,
+                                    left: -8,
+                                    top: -10,
+                                    borderLeftWidth: 1,
+
+                                }}
+                            />
+                            <Text style={[Typography.body1, FontWeight.bold]}>{this.state.wallet.currency_code}</Text>
+                        </View>
+                    </Animatable.View>
+
+                    <Animatable.View ref={(comp) => {
+                        this.passwordAnim = comp
+                    }}>
+                        <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
+                              label={I18n.t('PASSWORD')}
+                              iconColor={'#f95a25'}
+                              iconSize={20}
+                              secureTextEntry={true}
+                              value={this.state.password}
+                              onChangeText={(password) => {
+                                  this.setState({password})
+                              }}
+                              style={styles.input}
+                        >
+                        </Fumi>
+                    </Animatable.View>
+                    {/* <Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
+                                        <View style={{
+                                             overflow: 'hidden',
+                                             paddingTop: 16,
+                                             backgroundColor: 'white',
+                                             marginTop: responsiveHeight(2),
+                                             marginLeft: responsiveWidth(5),
+                                             marginRight: responsiveWidth(5),
+                                             borderRadius: 5,
+                                        }}>
+                                             <LiteCreditCardInput
+                                                  inputStyle={{
+                                                       flex: 1,
+                                                       color: 'black',
+                                                       fontSize: 18,
+                                                       padding: 7,
+                                                       paddingLeft: 0,
+                                                  }}
+                                                  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>
+                                   </Animatable.View> */}
+                                
+                                   <Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'credit-card'}
+                                   label={I18n.t('CARD_CVC_LABEL')}
+                                   iconColor={'#f95a25'}
+                                   keyboardType='numeric'
+                                   iconSize={20}
+                                   value={this.state.codeCVV}
+                                   onChangeText={(codeCVV) => {
+                                        if (codeCVV.length > 3) {
+                                             this.setState({ codeCVV: this.state.codeCVV.substring(0, 3) })
+                                        }
+                                        else
+                                             this.setState({ codeCVV })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+
+                    <Button style={styles.btnvalide}
+                            textStyle={styles.textbtnvalide}
+                            isLoading={this.state.isLoging}
+                            onPress={() => {
+                                this.onSubmitSendWalletToWallet()
+                            }}>
+                        {I18n.t('SUBMIT_LABEL')}</Button>
+                </ScrollView>
+            </>
+        )
+    }
+}
+
+const maptStateToProps = state => ({
+    loadingCountryByDialCode: state.countryByDialCode.loading,
+    resultCountryByDialCode: state.countryByDialCode.result,
+    errorCountryByDialCode: state.countryByDialCode.error,
+
+    loadingActiveCountryList: state.activeCountryListReducer.loading,
+    resultActiveCountryList: state.activeCountryListReducer.result,
+    errorActiveCountryList: state.activeCountryListReducer.error,
+
+    loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
+    resultPayCountryNetwork: state.payCountryNetworkReducer.result,
+    errorPayCountryNetwork: state.payCountryNetworkReducer.error,
+
+    loadingEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.loading,
+    resultEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.result,
+    errorEnvoieWalletToWallet: state.envoieUserWalletToWalletReducer.error,
+
+    loadingEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.loading,
+    resultEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.result,
+    errorEnvoieWalletToWalletGetCommission: state.envoieUserWalletToWalletGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+    getActiveCountryByDialCodeAction,
+    getActiveCountryByDialCodeReset,
+
+    getPayCountryNetworkAction,
+    getPayCountryNetworkReset,
+
+    getActiveCountryAction,
+    getActiveCountryReset,
+
+    envoieUserWalletToWalletAction,
+    envoieUserWalletToWalletReset,
+
+    getCommissionUserWalletToWalletAction,
+    getCommissionUserWalletToWalletReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(CarteLier);
+
+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,
+    },
+    blockView: {
+        paddingVertical: 10,
+        borderBottomWidth: 1
+    },
+    subbigtitle: {
+        color: 'white',
+        fontSize: 17,
+        textAlign: 'center',
+        margin: 5,
+    },
+    btnvalide: {
+        marginTop: 20,
+        marginLeft: 20,
+        marginRight: 20,
+        borderColor: 'transparent',
+        backgroundColor: Color.accentLightColor,
+        height: 52
+    },
+    btnSubmit: {
+        marginTop: 20,
+        borderColor: 'transparent',
+        backgroundColor: Color.accentLightColor,
+        height: 52,
+        width: "30%",
+        marginLeft: 20,
+        marginRight: 20,
+    },
+    input: {
+        height: 60,
+        marginTop: responsiveHeight(2),
+        marginLeft: responsiveWidth(5),
+        marginRight: responsiveWidth(5),
+        borderRadius: 5,
+    }
+});

app/screens/wallet/user/RetraitCarteVersAutreWalletUser.js

@@ -78,7 +78,6 @@ class RetraitCarteVersAutreWalletUser extends Component {
                user: null,
                displayFirstStep: true,
                displaySecondStep: false,
-               displayTercerStep: false,
                triggerSubmitClick: false,
                isSubmitClick: false,
                isDataSubmit: false,
@@ -436,14 +435,7 @@ class RetraitCarteVersAutreWalletUser extends Component {
           this.setState({
                triggerSubmitClick: true,
                isDataSubmit: false
-               
+,
-               // triggerSubmitClick: true,
-               // hasLoadActiveCountryList: true,
-               // hasLoadActivePayCountryNetworkList: true,
-               // numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
-               // cvv: creditCardInput.values.cvc,
-               // expiration_date: creditCardInput.values.expiry,
-               // final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
           });
          
      }
@@ -757,12 +749,22 @@ class RetraitCarteVersAutreWalletUser extends Component {
                                         </Fumi>
                                    </Animatable.View>
 
-                                   <Button 
+                                   {/* <Button 
                                         style={styles.btnvalide}
                                         isLoading={this.state.isLoging}
                                         textStyle={styles.textbtnvalide}
                                         onPress={() => { this.onSubmitSendWalletToCard() }}>
-                                        {I18n.t('SUBMIT_LABEL')}</Button>
+                                        {I18n.t('SUBMIT_LABEL')}</Button> */}
+
+                                        <Button style={styles.btnvalide}
+                                textStyle={styles.textbtnvalide}
+                                isLoading={this.state.isLoging}
+                                onPress={() => {
+                                   //  this.onSubmitNextStep()
+                                   this.props.navigation.push(route.autreCarte);                           
+                                    
+                                }}>
+                            {I18n.t('NEXT')}</Button>
 
                               </>
                          }

app/screens/wallet/user/modal.js

@@ -1,33 +1,190 @@
-import React from "react"
+//import React, {Component} from "react"
-import { View, Text, Alert, StyleSheet } from "react-native"
+// import { View, Text, Image, Animated,  TouchableOpacity, StyleSheet } from "react-native"
+// let route = require('../../../route.json');
 
+// export default class Modal extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
           
+//         }
+//     }
+//     render(){
+//     return(
      
-export default function Modal() {
+//         <>
-    return(
       
-     <View>
+//         <View style={styles.container}>
-        <Text>modal</Text>
+//                 <Text style={styles.text}>Voulez vous utiliser votre carte de rattaché ? ou voulez vous effectuer un retait d'une autre carte? </Text>
-        {/* {
+//                 <View style={styles.buttons}>
-            Alert.alert(
+//                     <TouchableOpacity
-                                        I18n.t("CONNEXION_CHOICE"),
+//                         style={styles.buttons1}
-                                        I18n.t("CONNEXION_CHOICE_DESCRIPTION"),
+//                         onPress={() => {
-                                        [
+//                             this.props.navigation.push(route.retraitCarteVersAutreWalletUser);
-                                            {
+//                         } }
+//                     >
+//                         <Text style={{ color: 'white' }}>utiliser une Autre carte</Text>
+//                     </TouchableOpacity>
 
-                                            },   {
+//                     <TouchableOpacity
-                                            text: I18n.t('NO'), onPress: () => {
+//                         style={styles.buttons2}
-                                                this.connectClicked(false)
+//                         onPress={() => {
-                                            }
+//                             this.props.navigation.push(route.envoieWalletToWalletUser);
-                                        },
+//                         } }
-                                        ],
+//                     >
+//                         <Text style={{ color: 'white' }}>utiliser Ma carte lier</Text>
+//                     </TouchableOpacity>
+//                 </View>
+//             </View></>
+//     )
+//                     } 
+//                 }                        
+// const styles = StyleSheet.create({
+//     container: {
+//         flex: 1,
+//         justifyContent: 'center',
+//         alignItems: 'center',
+//       },
+//       text: {
+//         fontSize: 20,
+//         margin: 10,
+//         fontWeight: 'bold'
+//       },
+//       buttons: {
+//         flexDirection: 'row',
+//           justifyContent: 'space-between',
+//           width: '90%',
+//           marginTop: 20,
+//       },
+//       buttons1: {
+//         backgroundColor: 'blue',
+//         padding: 10,
+//         borderRadius: 10,
+//       },
+//       buttons2: {
+//         backgroundColor: 'green',
+//         padding: 10,
+//         borderRadius: 10,
+//       },
+// })
+import React, { Component } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { Typography } from "../../../config/typography";
+import { Color } from "../../../config/Color";
+import route from '../../../route.json';
+import I18n from 'react-native-i18n';
 
-                                    )
+class Modal extends Component {
-                                    }  */}
+    static navigatorStyle = {
+        navBarBackgroundColor: Color.primaryColor,
+        statusBarColor: Color.primaryDarkColor,
+        navBarTextColor: '#FFFFFF',
+        navBarButtonColor: '#FFFFFF'
+    };
+
+    static navigationOptions = () => {
+        return {
+            drawerLabel: () => null,
+            headerTitle: I18n.t('WITHDRAWAL_CARD_ORDER_WALLET'),
+            headerTintColor: 'white',
+            headerStyle: {
+                backgroundColor: Color.primaryColor,
+                marginTop: 30,
+                color: 'white'
+            },
+            headerTitleStyle: {
+                color: "white"
+            },
+            title: I18n.t('WITHDRAWAL_CARD_ORDER_WALLET')
+        }
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            with_linked_card: true
+        };
+    }
+
+    handleCarteVersAutreWallet = () => {
+        this.props.navigation.push(route.autreCarte);
+        this.setState((prevState) => ({ with_linked_card: !prevState.with_linked_card }));
+    };
+
+    handleWalletToWallet = () => {
+        this.props.navigation.push(route.carteLier);
+        this.setState((prevState) => ({ with_linked_card: prevState.with_linked_card }));
+    }
+
+    render() {
+        return (
+            <>
+                <View style={styles.container}>
+                    <Text style={styles.subbigtitle}>Voulez vous utiliser votre carte de rattaché ? ou voulez vous effectuer un retait d'une autre carte? </Text>
+                    <View style={styles.buttons}>
+                        <TouchableOpacity    
+
+                        style={styles.buttons1}
+                        onPress={
+                            this.handleCarteVersAutreWallet
+                        }
+                    >
+                            <View style={{paddingTop: 20,}}>
+                    <Text style={[Typography.headline, Typography.semibold]}>
+                    utiliser une Autre carte
+                    </Text>
+                </View>
+                       
+                    </TouchableOpacity>
+               
+                    <TouchableOpacity
+                        style={styles.buttons2}
+                        onPress={
+                            this.handleWalletToWallet
+                        }
+                    >
+                        <View style={{paddingTop: 20,}}>
+                    <Text style={[Typography.headline, Typography.semibold]}>utiliser Ma carte lier</Text>
+                      
+                        </View>
+                    </TouchableOpacity>
+                
+                </View>
+            </View>
+        </>
+    );
+                    }
+}
 
-                                    </View>
-    )
-                                }
 const styles = StyleSheet.create({
+    container: {
+        backgroundColor: "#eee",
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+   subbigtitle: {
+        color: 'black',
+        fontSize: 17,
+        textAlign: 'center',
+        margin: 5,
+    },
+    buttons: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        width: '90%',
+        marginTop: 20,
+    },
+    buttons1: {
+        backgroundColor: 'white',
+        padding: 10,
+        borderRadius: 10,
+    },
+    buttons2: {
+        backgroundColor: 'white',
+        padding: 10,
+        borderRadius: 10,
+    },
+});
 
-})
+export default Modal;

app/utils/UtilsFunction.js

@@ -415,11 +415,7 @@ export const optionRetraitUserScreen = {
         //     icon: 'wallet',
         //     title: 'WITHDRAWAL_CARD_ORDER_WALLET',
         // },
-        {
+      
-            screen: route.modal,
-            icon: 'wallet',
-            title: 'WITHDRAWAL_CARD_ORDER_WALLET',
-        },
     
 
     ]
@@ -452,6 +448,11 @@ export const optionDepotUserScreen = {
             title: 'DEPOSIT_TO_BANK',
             subScreenOption: optionWalletToBank
         },
+        {
+            screen: route.modal,
+            icon: 'wallet',
+            title: 'WITHDRAWAL_CARD_ORDER_WALLET',
+        },
       
     ]
 };

app/utils/i18n/fr.json

@@ -123,6 +123,7 @@
   "DEPOSIT_CASH_TO_BANK": "Cash vers banque",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet vers wallet",
   "ENVOIE_WALLET_TO_WALLET": "Envoie Wallet vers wallet",
+  "ENVOIE_WALLET_TO_ORDER_WALLET" :"Envoie Wallet vers autre wallet",
   "DEPOSIT_WALLET_TO_CASH": "Wallet vers cash",
   "ENVOIE_WALLET_TO_CASH": "Wallet vers cash",
   "DEPOSIT_WALLET_TO_CARD": "Wallet vers carte",
@@ -775,6 +776,7 @@
   "SELECT_COUNTRY": "Sélectionnez un pays",
   "CITY": "Ville",
   "SURNAME": "Noms de famille",
-  "CARD_COUNTRY": "Pays de la carte"
+  "CARD_COUNTRY": "Pays de la carte",
+  "EXCHANGE_TAUX": "taux d'echange"
 
 }

package.json

@@ -98,7 +98,7 @@
     "react-navigation-tabs": "^2.11.2",
     "react-navigation-transitions": "^1.0.12",
     "react-redux": "^7.2.0",
-    "realm": "^3.6.5",
+    "realm": "^10.21.1",
     "reanimated-bottom-sheet": "^1.0.0-alpha.10",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",

yarn.lock

@@ -8702,28 +8702,6 @@
   "resolved" "https://registry.npmjs.org/readline/-/readline-1.3.0.tgz"
   "version" "1.3.0"
 
-"realm@^3.6.5":
-  "integrity" "sha512-rFk3P4hh0RXWU8rEcNeX5MnC+H5yUBxzUIgoRgYDR/gJ/znrB3k0jTtZYhUcCCCRIRPkE91d1omX9dIvT84R+Q=="
-  "resolved" "https://registry.npmjs.org/realm/-/realm-3.6.5.tgz"
-  "version" "3.6.5"
-  dependencies:
-    "command-line-args" "^4.0.6"
-    "decompress" "^4.2.0"
-    "deepmerge" "2.1.0"
-    "deprecated-react-native-listview" "0.0.6"
-    "fs-extra" "^4.0.3"
-    "https-proxy-agent" "^2.2.4"
-    "ini" "^1.3.5"
-    "nan" "^2.12.1"
-    "node-fetch" "^1.7.3"
-    "node-machine-id" "^1.1.10"
-    "node-pre-gyp" "^0.13.0"
-    "progress" "^2.0.3"
-    "prop-types" "^15.6.2"
-    "request" "^2.88.0"
-    "stream-counter" "^1.0.0"
-    "sync-request" "^3.0.1"
-    "url-parse" "^1.4.4"
 
 "reanimated-bottom-sheet@^1.0.0-alpha.10":
   "integrity" "sha512-Q0sGUHYdr5h2n/AY7pKQty35zcUAxxYM1nCl+luSQAyqiY6a5Kf8IBQRsOVvs60sDzqXxtbwxHgM5mkwaiQC4Q=="