Retraits OK

App.js

@@ -56,6 +56,12 @@ import OperateurOptionSelect from './screens/wallet/OperateurOptionSelect';
 import PaiementFacture from './screens/wallet/PaiementFacture';
 import EnvoieWalletToWalletUser from './screens/wallet/user/EnvoieWalletToWalletUser';
 import EnvoieWalletToCashUser from './screens/wallet/user/EnvoieWalletToCash';
+import LinkCard from './screens/wallet/user/LinkCard';
+import EnvoieWalletToCardUser from './screens/wallet/user/EnvoieWalletToCardUser';
+import EnvoieWalletToBankUser from './screens/wallet/user/EnvoieWalletToBankUser';
+import RetraitWalletVersCashUser from './screens/wallet/user/RetraitWalletVersCashUser';
+import RetraitCarteVersCashUser from './screens/wallet/user/RetraitCarteVersCashUser';
+import RetraitCarteVersWalletUser from './screens/wallet/user/RetraitCarteVersWalletUser';
 
 const instructions = Platform.select({
      ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@@ -100,7 +106,13 @@ const AppStack = createDrawerNavigator({
           operateurOptionSelect: OperateurOptionSelect,
           paiementFacture: PaiementFacture,
           envoieWalletToWalletUser: EnvoieWalletToWalletUser,
-          envoieWalletToCashUser: EnvoieWalletToCashUser
+          envoieWalletToCashUser: EnvoieWalletToCashUser,
+          envoieWalletToCardUser: EnvoieWalletToCardUser,
+          envoieWalletToBankUser: EnvoieWalletToBankUser,
+          retraitWalletVersCashUser: RetraitWalletVersCashUser,
+          retraitCarteVersCashUser: RetraitCarteVersCashUser,
+          retraitCarteVersWalletUser: RetraitCarteVersWalletUser,
+          linkCard: LinkCard
 
      })
 }, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })

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

@@ -38,5 +38,9 @@
   "validateIdentification": "validateIdentification",
   "operateurOptionSelect": "operateurOptionSelect",
   "paiementFacture": "paiementFacture",
-  "envoieWalletToWalletUser": "envoieWalletToWalletUser"
+  "envoieWalletToWalletUser": "envoieWalletToWalletUser",
+  "envoieWalletToCashUser": "envoieWalletToCashUser",
+  "envoieWalletToCardUser": "envoieWalletToCardUser",
+  "linkCard": "linkCard",
+  "envoieWalletToBankUser": "envoieWalletToBankUser"
 }

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

@@ -41,7 +41,12 @@
   "MAKE_DEPOSIT": "Make a deposit",
   "MAKE_WITHDRAWAL": "Make withdrawal",
   "DEPOSIT_DESCRIPTION": "Make a deposit",
+  "ERROR_TRANSFER": "Transfer error",
+  "SUCCESS_TRANSFER": "Transfer done",
+  "WALLET_TO_WALLET_SUCCESS_TRANSFER": "Wallet to wallet transfer successfully completed",
   "DEPOSIT": "Deposit",
+  "ENVOIE_ARGENT": "Send money",
+  "RETRAIT_ARGENT": "Receive money",
   "CONFIRM_DEPOSIT": "Confirm deposit",
   "CONFIRM_WITHDRAWAL": "Confirm withdrawal",
   "CHANGE_SOURCE_CARD": "Change the type of entry number",
@@ -63,6 +68,7 @@
   "AMOUNT_LABEL_DESCRIPTION": "Please enter the amount",
   "DESTINATAIRE": "Recipient",
   "WITHDRAWAL": "Withdrawal",
+  "LINK_CARD": "Link my card",
   "WITHDRAWAL_IN_CASH": "Withdrawal in cash",
   "WITHDRAWAL_WALLET_TO_CASH": "Withdrawal wallet to cash",
   "WITHDRAWAL_CARD_TO_WALLET": "Withdrawal card to wallet",
@@ -73,13 +79,25 @@
   "DEPOSIT_CASH_TO_BANK": "Cash to bank",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet to wallet",
   "ENVOIE_WALLET_TO_WALLET": "Send Wallet to wallet",
+  "DEPOSIT_WALLET_TO_CASH": "Your Wallet to cash",
+  "DEPOSIT_WALLET_TO_CARD": "Your Wallet to card",
+  "ENVOIE_WALLET_TO_CARD": "Send Wallet to card",
+  "ENVOIE_WALLET_TO_CASH": "Send Wallet to cash",
+  "DEPOSIT_WALLET_TO_BANK": "Your Wallet to bank",
+  "ENVOIE_WALLET_TO_BANK": "Send Wallet to bank",
+  "TRANSACTION_DETAIL": "Transaction detail",
+  "CODE_IBAN": "IBAN Code",
+  "FEES_AND_TAXES": "Fees and taxes",
+  "INIT_COUNTRY": "Departure countryt",
+  "FINAL_COUNTRY": "Arrival country",
+  "NET_AMOUNT": "Net amount",
   "CODE_WALLET": "Wallet Code",
   "ACTIVE_WALLET": "Active wallet",
   "TYPE_IDENTIFIANT": "ID type",
   "PAYS_DESTINATION": "Destination country",
-  "DEPOSIT_TO_CASH": "Wallet to cash",
+  "DEPOSIT_TO_CASH": "Your Wallet to cash",
-  "DEPOSIT_TO_CARD": "Wallet to card",
+  "DEPOSIT_TO_CARD": "Your Wallet to card",
-  "DEPOSIT_TO_BANK": "Wallet to bank",
+  "DEPOSIT_TO_BANK": "Your Wallet to bank",
   "NANO_CREDIT": "Nano credit",
   "NANO_CREDIT_DESCRIPTION": "Nano credit description",
   "NANO_SANTE": "Nano health",
@@ -220,6 +238,7 @@
   "CONNECT_USER": "Connect",
   "PASSWORD": "Password",
   "CONFIRM_PASSWORD": "Confirm the password",
+  "PLEASE_ENTER_THE_PASSWORD": "Please enter the password",
   "PASSWORD_MODIFY": "Change your password",
   "OLD_PASSWORD": "Old password",
   "NEW_PASSWORD": "New password",
@@ -308,9 +327,11 @@
   "ACCOUNT_INFO": "My Account Information",
   "ALREADY_IDENTIFIED": "You are already identified",
   "NOT_IDENTIFIED": "This number exists, its identification is not yet entered",
+  "NOT_VALIDATED": "Your identicaiton is not yet validated",
   "ALREADY_VALIDATED": "The identification of this client has already been validated",
   "IDENTIFICATION": " Identification",
   "CREATION_IDENTIFICATION": "Creation",
+  "CREATION_IDENTIFICATION_CLIENT": "Identify me",
   "CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
   "CREATION_IDENTIFICATION_DESCRIPTION_SUBSCREEN": "Enter the identity of a client",
   "VALIDATE_IDENTIFICATION": "Validation",

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

@@ -43,6 +43,8 @@
   "MY_ACCOUNT": "Mon compte",
   "WALLET": "Wallet",
   "DEPOSIT": "Dépôt",
+  "ENVOIE_ARGENT": "Envoyer de l'argent",
+  "RETRAIT_ARGENT": "Retirer de l'argent",
   "CONFIRM_DEPOSIT": "Confirmer le dépôt",
   "CONFIRM_WITHDRAWAL": "Confirmer le retrait",
   "ENTER_VALID_AMOUNT": "Entrer un montant valide",
@@ -67,24 +69,40 @@
   "CHOOSE_OPTION": "Veuillez sélectionner une option",
   "CHOOSE_OPERATOR": "Veuillez sélectionner un opérateur",
   "DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
+  "ERROR_TRANSFER": "Erreur de transfert",
+  "SUCCESS_TRANSFER": "Transfert effectué",
+  "WALLET_TO_WALLET_SUCCESS_TRANSFER": "Transfert de wallet à wallet effectué avec succès",
   "WITHDRAWAL": "Retrait",
+  "LINK_CARD": "Lier ma carte",
   "WITHDRAWAL_IN_CASH": "Retrait en cash",
-  "WITHDRAWAL_WALLET_TO_CASH": "Retrait wallet vers cash",
+  "WITHDRAWAL_WALLET_TO_CASH": "Retrait de votre wallet vers cash",
-  "WITHDRAWAL_CARD_TO_WALLET": "Retrait carte vers wallet",
+  "WITHDRAWAL_CARD_TO_WALLET": "Retrait de votre carte vers wallet",
-  "WITHDRAWAL_CARD_TO_CASH": "Retrait carte vers cash",
+  "WITHDRAWAL_CARD_TO_CASH": "Retrait de votre carte vers cash",
   "DEPOSIT_CASH_TO_WALLET": "Cash vers wallet",
   "DEPOSIT_CASH_TO_OTHER_WALLET": "Cash vers autre wallet",
   "DEPOSIT_CASH_TO_VISA": "Cash vers carte visa",
   "DEPOSIT_CASH_TO_BANK": "Cash vers banque",
-  "DEPOSIT_WALLET_TO_WALLET": "Wallet vers wallet",
+  "DEPOSIT_WALLET_TO_WALLET": "Votre Wallet vers wallet",
   "ENVOIE_WALLET_TO_WALLET": "Envoie Wallet vers wallet",
+  "DEPOSIT_WALLET_TO_CASH": "Votre Wallet vers cash",
+  "ENVOIE_WALLET_TO_CASH": "Envoie Wallet vers cash",
+  "DEPOSIT_WALLET_TO_CARD": "Votre Wallet vers carte",
+  "ENVOIE_WALLET_TO_CARD": "Envoie Wallet vers carte",
+  "DEPOSIT_WALLET_TO_BANK": "Votre Wallet vers banque",
+  "ENVOIE_WALLET_TO_BANK": "Envoie Wallet vers banque",
+  "TRANSACTION_DETAIL": "Détail de la transaction",
+  "FEES_AND_TAXES": "Frais et taxes",
+  "CODE_IBAN": "Code IBAN",
+  "INIT_COUNTRY": "Pays de départ",
+  "FINAL_COUNTRY": "Pays d'arrivée",
+  "NET_AMOUNT": "Montant net",
   "CODE_WALLET": "Code Wallet",
   "TYPE_IDENTIFIANT": "Type d'identifiant",
   "PAYS_DESTINATION": "Pays destination",
   "ACTIVE_WALLET": "Wallet actif",
-  "DEPOSIT_TO_CASH": "Wallet vers cash",
+  "DEPOSIT_TO_CASH": "Votre Wallet vers cash",
-  "DEPOSIT_TO_CARD": "Wallet vers carte",
+  "DEPOSIT_TO_CARD": "Votre Wallet vers carte",
-  "DEPOSIT_TO_BANK": "Wallet vers banque",
+  "DEPOSIT_TO_BANK": "Votre Wallet vers banque",
   "NANO_CREDIT": "Nano crédit",
   "NANO_CREDIT_DESCRIPTION": "Nano crédit iLink",
   "NANO_SANTE": "Nano santé",
@@ -131,8 +149,8 @@
   "PRINT_MY_NETWORK": "Afficher mon reseau",
   "MY_GROUP_MAP": "Carte de mon groupe",
   "GROUP_MEMBERS": "Les membres du groupe",
-  "NAME": "Nom (s)",
+  "NAME": "Nom(s)",
-  "FIRSTNAME": "Prénom (s) ",
+  "FIRSTNAME": "Prénom(s) ",
   "AND": "et",
   "ADMIN": "Administrateur",
   "SUPER_ADMIN": "Super administrateur",
@@ -228,7 +246,8 @@
   "PASSWORD_MODIFY": "Modifiez votre mot de passe",
   "OLD_PASSWORD": "Ancien mot de passe",
   "NEW_PASSWORD": "Nouveau mot de passe",
-  "CONFIRM_NEW_PASSWORD": "Confirmerzle nouveau mot de passe",
+  "CONFIRM_NEW_PASSWORD": "Confirmerz le nouveau mot de passe",
+  "PLEASE_ENTER_THE_PASSWORD": "Veuillez renseigner le mot de passe",
   "MODIFY_AMOUNT": " Modifier le montant",
   "ENTER_NEW_AMOUNT_TO_SEND": " Entrer le nouveau montant à envoyer",
   "AMOUNT": "Montant",
@@ -311,6 +330,7 @@
   "ACCOUNT_INFO": " Information sur mon compte",
   "ALREADY_IDENTIFIED": "Vous êtes déjà identifié",
   "NOT_IDENTIFIED": "Ce numéro existe, son identification n'est pas encore saisi",
+  "NOT_VALIDATED": "Votre identicaiton n'est pas encore validé",
   "ALREADY_VALIDATED": "L'identification de ce client a déjà été validée",
   "IDENTIFICATION": " Identification",
   "CREATION_IDENTIFICATION": "Création",

redux/actions/EnvoieUserType.js

@@ -1,4 +1,10 @@
-import { ENVOIE_WALLET_TO_WALLET_USER_PENDING, ENVOIE_WALLET_TO_WALLET_USER_SUCCESS, ENVOIE_WALLET_TO_WALLET_USER_ERROR, ENVOIE_WALLET_TO_WALLET_USER_RESET } from "../types/EnvoieUserType";
+import {
+     ENVOIE_WALLET_TO_WALLET_USER_PENDING, ENVOIE_WALLET_TO_WALLET_USER_SUCCESS, ENVOIE_WALLET_TO_WALLET_USER_ERROR, ENVOIE_WALLET_TO_WALLET_USER_RESET, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR,
+     ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_CASH_USER_SUCCESS, ENVOIE_WALLET_TO_CASH_USER_ERROR, ENVOIE_WALLET_TO_CASH_USER_RESET,
+     ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET,
+     ENVOIE_WALLET_TO_CARD_USER_PENDING, ENVOIE_WALLET_TO_CARD_USER_SUCCESS, ENVOIE_WALLET_TO_CARD_USER_ERROR, ENVOIE_WALLET_TO_CARD_USER_RESET,
+     ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET
+} from "../types/EnvoieUserType";
 
 export const fetchEnvoieUserWalletToWalletPending = () => ({
      type: ENVOIE_WALLET_TO_WALLET_USER_PENDING
@@ -17,3 +23,103 @@ export const fetchEnvoieUserWalletToWalletError = (error) => ({
 export const fetchEnvoieUserWalletToWalletReset = (error) => ({
      type: ENVOIE_WALLET_TO_WALLET_USER_RESET
 });
+
+/****************/
+
+export const fetchEnvoieUserWalletToWalleGetCommissiontPending = () => ({
+     type: ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING
+});
+
+export const fetchEnvoieUserWalletToWalletGetCommissionSuccess = (res) => ({
+     type: ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS,
+     result: res,
+});
+
+export const fetchEnvoieUserWalletToWalletGetCommissionError = (error) => ({
+     type: ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR,
+     result: error
+});
+
+export const fetchEnvoieUserWalletToWalleGetCommissiontReset = (error) => ({
+     type: ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET
+});
+
+/*--------------------------------------------------------------------*/
+
+export const fetchEnvoieUserWalletToCashPending = () => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING
+});
+
+export const fetchEnvoieUserWalletToCashSuccess = (res) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_SUCCESS,
+     result: res,
+});
+
+export const fetchEnvoieUserWalletToCashError = (error) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_ERROR,
+     result: error
+});
+
+export const fetchEnvoieUserWalletToCashReset = (error) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_RESET
+});
+
+/****************/
+
+export const fetchEnvoieUserWalletToCashGetCommissiontPending = () => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING
+});
+
+export const fetchEnvoieUserWalletToCashGetCommissionSuccess = (res) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS,
+     result: res,
+});
+
+export const fetchEnvoieUserWalletToCashGetCommissionError = (error) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR,
+     result: error
+});
+
+export const fetchEnvoieUserWalletToCashGetCommissiontReset = (error) => ({
+     type: ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET
+});
+
+/*--------------------------------------------------------------------*/
+
+export const fetchEnvoieUserWalletToCardPending = () => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_PENDING
+});
+
+export const fetchEnvoieUserWalletToCardSuccess = (res) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_SUCCESS,
+     result: res,
+});
+
+export const fetchEnvoieUserWalletToCardError = (error) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_ERROR,
+     result: error
+});
+
+export const fetchEnvoieUserWalletToCardReset = (error) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_RESET
+});
+
+/****************/
+
+export const fetchEnvoieUserWalletToCardGetCommissiontPending = () => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING
+});
+
+export const fetchEnvoieUserWalletToCardGetCommissionSuccess = (res) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS,
+     result: res,
+});
+
+export const fetchEnvoieUserWalletToCardGetCommissionError = (error) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR,
+     result: error
+});
+
+export const fetchEnvoieUserWalletToCardGetCommissiontReset = (error) => ({
+     type: ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET
+});  

redux/actions/WalletActions.js

@@ -21,7 +21,11 @@ import {
      WALLET_GET_RETREAIT_COMMISSION_PENDING,
      WALLET_GET_RETREAIT_COMMISSION_SUCCESS,
      WALLET_GET_RETREAIT_COMMISSION_ERROR,
-     WALLET_GET_RETREAIT_COMMISSION_RESET
+     WALLET_GET_RETREAIT_COMMISSION_RESET,
+     LINK_CARD_PENDING,
+     LINK_CARD_RESET,
+     LINK_CARD_SUCCESS,
+     LINK_CARD_ERROR
 } from "../types/WalletType";
 
 
@@ -43,7 +47,9 @@ export const fetchWalletListReset = (error) => ({
      type: WALLET_LIST_RESET,
      result: error
 });
-
+/**
+ * ---------------------------------------------------
+ */
 export const fetchWalletListDetailPending = () => ({
      type: WALLET_LIST_DETAIL_PENDING
 });
@@ -62,7 +68,9 @@ export const fetchWalletListDetailReset = (error) => ({
      type: WALLET_LIST_DETAIL_RESET,
      result: error
 });
-
+/**
+ * ---------------------------------------------------
+ */
 export const fetchWalletHistoryPending = () => ({
      type: WALLET_HISTORY_PENDING
 });
@@ -80,7 +88,9 @@ export const fetchWalletHistoryError = (error) => ({
      type: WALLET_HISTORY_ERROR,
      result: error
 });
-
+/**
+ * ---------------------------------------------------
+ */
 export const fetchWalletTransferCommissionPending = () => ({
      type: WALLET_TRANSFER_COMMISSION_PENDING
 });
@@ -98,7 +108,9 @@ export const fetchWalletTransferCommssionError = (error) => ({
      type: WALLET_TRANSFER_COMMISSION_ERROR,
      result: error
 });
-
+/**
+ * ---------------------------------------------------
+ */
 export const fetchWalletGetCommissionPending = () => ({
      type: WALLET_GET_COMMISSION_PENDING
 });
@@ -116,6 +128,26 @@ export const fetchWalleGetCommissionError = (error) => ({
      type: WALLET_GET_COMMISSION_ERROR,
      result: error
 });
+/**
+ * ---------------------------------------------------
+ */
+export const fetchLinkCardPending = () => ({
+     type: LINK_CARD_PENDING
+});
+
+export const fetchLinkCardReset = () => ({
+     type: LINK_CARD_RESET
+});
+
+export const fetchLinkCardSuccess = (res) => ({
+     type: LINK_CARD_SUCCESS,
+     result: res,
+});
+
+export const fetchLinkCardError = (error) => ({
+     type: LINK_CARD_ERROR,
+     result: error
+});
 
 /* export const fetchWalletGetRetraitCommissionPending = () => ({
      type: WALLET_GET_RETREAIT_COMMISSION_PENDING

redux/reducers/EnvoieUserWalletToCardGetCommissionReducer.js

@@ -0,0 +1,33 @@
+import { ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR, ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET } from "../types/EnvoieUserType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/EnvoieUserWalletToCardReducer.js

@@ -0,0 +1,33 @@
+import { ENVOIE_WALLET_TO_CARD_USER_SUCCESS, ENVOIE_WALLET_TO_CARD_USER_PENDING, ENVOIE_WALLET_TO_CARD_USER_RESET, ENVOIE_WALLET_TO_CARD_USER_ERROR } from "../types/EnvoieUserType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case ENVOIE_WALLET_TO_CARD_USER_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case ENVOIE_WALLET_TO_CARD_USER_RESET: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/EnvoieUserWalletToCashGetCommissionReducer.js

@@ -0,0 +1,33 @@
+import { ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR, ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET } from "../types/EnvoieUserType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/EnvoieUserWalletToCashReducer.js

@@ -0,0 +1,33 @@
+import { ENVOIE_WALLET_TO_CASH_USER_PENDING, ENVOIE_WALLET_TO_CASH_USER_SUCCESS, ENVOIE_WALLET_TO_CASH_USER_ERROR } from "../types/EnvoieUserType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case ENVOIE_WALLET_TO_CASH_USER_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case ENVOIE_WALLET_TO_CASH_USER_PENDING: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/EnvoieUserWalletToWalletGetCommissionReducer.js

@@ -0,0 +1,33 @@
+import { ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR, ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET } from "../types/EnvoieUserType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/LinkCardReducer.js

@@ -0,0 +1,33 @@
+import { LINK_CARD_PENDING, LINK_CARD_SUCCESS, LINK_CARD_ERROR, LINK_CARD_RESET } from "../types/WalletType";
+
+const initialState = {
+     loading: false,
+     result: null,
+     error: null
+};
+
+export default (state = initialState, action) => {
+     switch (action.type) {
+          case LINK_CARD_PENDING: return {
+               ...state,
+               loading: true
+          }
+          case LINK_CARD_SUCCESS: return {
+               ...state,
+               loading: false,
+               result: action.result.data,
+               error: null
+          }
+          case LINK_CARD_ERROR: return {
+               ...state,
+               loading: false,
+               result: null,
+               error: action.result
+          }
+          case LINK_CARD_RESET: return initialState;
+
+          default: {
+               return state;
+          }
+     }
+};

redux/reducers/index.js

@@ -17,6 +17,12 @@ import walletHistoryReducer from "./WalletTransactionHistoryReducer";
 import walletTransferCommissionReducer from "./WalletTransferCommission";
 import CountryByDialCodeReducer from "./CountryByDialCodeReducer";
 import EnvoieUserWalletToWalletReducer from "./EnvoieUserWalletToWalletReducer";
+import EnvoieUserWalletToWalletGetCommissionReducer from "./EnvoieUserWalletToWalletGetCommissionReducer";
+import EnvoieUserWalletToCashReducer from "./EnvoieUserWalletToCashReducer";
+import EnvoieUserWalletToCashGetCommissionReducer from "./EnvoieUserWalletToCashGetCommissionReducer";
+import EnvoieUserWalletToCardReducer from "./EnvoieUserWalletToCardReducer";
+import EnvoieUserWalletToCardGetCommissionReducer from "./EnvoieUserWalletToCardGetCommissionReducer";
+import LinkCardReducer from "./LinkCardReducer";
 
 const persistConfig = {
      key: 'root',
@@ -42,9 +48,14 @@ const rootReducer = persistCombineReducers(persistConfig, {
      payCountryNetworkReducer: PayCountryNetworkReducer,
      activeCountryListReducer: ActiveCountryListReducer,
      countryByDialCode: CountryByDialCodeReducer,
-     envoieUserWalletToWalletReducer: EnvoieUserWalletToWalletReducer
+     envoieUserWalletToWalletReducer: EnvoieUserWalletToWalletReducer,
-
+     envoieUserWalletToWalletGetCommissionReducer: EnvoieUserWalletToWalletGetCommissionReducer,
-
+     countryByDialCode: CountryByDialCodeReducer,
+     envoieUserWalletToCashReducer: EnvoieUserWalletToCashReducer,
+     envoieUserWalletToCashGetCommissionReducer: EnvoieUserWalletToCashGetCommissionReducer,
+     envoieUserWalletToCardReducer: EnvoieUserWalletToCardReducer,
+     envoieUserWalletToCardGetCommissionReducer: EnvoieUserWalletToCardGetCommissionReducer,
+     linkCardReduder: LinkCardReducer
 });
 
 export default rootReducer;

redux/types/EnvoieUserType.js

@@ -2,3 +2,28 @@ export const ENVOIE_WALLET_TO_WALLET_USER_PENDING = 'ENVOIE_WALLET_TO_WALLET_USE
 export const ENVOIE_WALLET_TO_WALLET_USER_SUCCESS = 'ENVOIE_WALLET_TO_WALLET_USER_SUCCESS';
 export const ENVOIE_WALLET_TO_WALLET_USER_ERROR = 'ENVOIE_WALLET_TO_WALLET_USER_ERROR';
 export const ENVOIE_WALLET_TO_WALLET_USER_RESET = 'ENVOIE_WALLET_TO_WALLET_USER_RESET';
+
+export const ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING = 'ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_PENDING';
+export const ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS = 'ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_SUCCESS';
+export const ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR = 'ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_ERROR';
+export const ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET = 'ENVOIE_WALLET_TO_WALLET_USER_GET_COMMISSION_RESET';
+
+export const ENVOIE_WALLET_TO_CASH_USER_PENDING = 'ENVOIE_WALLET_TO_CASH_USER_PENDING';
+export const ENVOIE_WALLET_TO_CASH_USER_SUCCESS = 'ENVOIE_WALLET_TO_CASH_USER_SUCCESS';
+export const ENVOIE_WALLET_TO_CASH_USER_ERROR = 'ENVOIE_WALLET_TO_CASH_USER_ERROR';
+export const ENVOIE_WALLET_TO_CASH_USER_RESET = 'ENVOIE_WALLET_TO_CASH_USER_RESET';
+
+export const ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING = 'ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_PENDING';
+export const ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS = 'ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_SUCCESS';
+export const ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR = 'ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_ERROR';
+export const ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET = 'ENVOIE_WALLET_TO_CASH_USER_GET_COMMISSION_RESET';
+
+export const ENVOIE_WALLET_TO_CARD_USER_PENDING = 'ENVOIE_WALLET_TO_CARD_USER_PENDING';
+export const ENVOIE_WALLET_TO_CARD_USER_SUCCESS = 'ENVOIE_WALLET_TO_CARD_USER_SUCCESS';
+export const ENVOIE_WALLET_TO_CARD_USER_ERROR = 'ENVOIE_WALLET_TO_CARD_USER_ERROR';
+export const ENVOIE_WALLET_TO_CARD_USER_RESET = 'ENVOIE_WALLET_TO_CARD_USER_RESET';
+
+export const ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING = 'ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_PENDING';
+export const ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS = 'ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_SUCCESS';
+export const ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR = 'ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_ERROR';
+export const ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET = 'ENVOIE_WALLET_TO_CARD_USER_GET_COMMISSION_RESET';

redux/types/WalletType.js

@@ -27,3 +27,8 @@ export const WALLET_TRANSFER_COMMISSION_PENDING = 'WALLET_TRANSFER_COMMISSION_PE
 export const WALLET_TRANSFER_COMMISSION_SUCCESS = 'WALLET_TRANSFER_COMMISSION_SUCCESS';
 export const WALLET_TRANSFER_COMMISSION_ERROR = 'WALLET_TRANSFER_COMMISSION_ERROR';
 export const WALLET_TRANSFER_COMMISSION_RESET = 'WALLET_TRANSFER_COMMISSION_RESET';
+
+export const LINK_CARD_PENDING = 'LINK_CARD_PENDING';
+export const LINK_CARD_SUCCESS = 'LINK_CARD_SUCCESS';
+export const LINK_CARD_ERROR = 'LINK_CARD_ERROR';
+export const LINK_CARD_RESET = 'LINK_CARD_RESET';

route.json

@@ -39,5 +39,11 @@
   "operateurOptionSelect": "operateurOptionSelect",
   "paiementFacture": "paiementFacture",
   "envoieWalletToWalletUser": "envoieWalletToWalletUser",
-  "envoieWalletToCashUser": "envoieWalletToCashUser"
+  "envoieWalletToCashUser": "envoieWalletToCashUser",
+  "envoieWalletToCardUser": "envoieWalletToCardUser",
+  "linkCard": "linkCard",
+  "envoieWalletToBankUser": "envoieWalletToBankUser",
+  "retraitWalletVersCashUser": "retraitWalletVersCashUser",
+  "retraitCarteVersCashUser": "retraitCarteVersCashUser",
+  "retraitCarteVersWalletUser": "retraitCarteVersWalletUser"
 }

screens/home/Home.js

@@ -629,56 +629,56 @@ class Home extends BaseScreen {
           } */
 
      makeCardSearch() {
-          if (!this.state.isPubShow) {
+          /* if (!this.state.isPubShow) { */
-               return (
+          return (
-                    <View style={styles.topBar}>
+               <View style={styles.topBar}>
-                         <Surface
+                    <Surface
 
-                              style={{
+                         style={{
-                                   elevation: 4,
+                              elevation: 4,
-                                   borderRadius: 10
+                              borderRadius: 10
-                              }}>
+                         }}>
-                              <View style={{
+                         <View style={{
-                                   flexDirection: 'row',
+                              flexDirection: 'row',
-                                   alignSelf: 'center',
+                              alignSelf: 'center',
-                                   justifyContent: 'center',
+                              justifyContent: 'center',
-                                   flex: 1,
+                              flex: 1,
-                                   borderRadius: 10,
+                              borderRadius: 10,
-                                   margin: 10,
+                              margin: 10,
-                                   alignItems: 'center',
+                              alignItems: 'center',
-                                   height: 48,
+                              height: 48,
-                              }}>
+                         }}>
-                                   <TouchableOpacity onPress={() => this.openDrawer()}
+                              <TouchableOpacity onPress={() => this.openDrawer()}
+                              >
+
+                                   <Text
+                                        style={styles.hambuger}
                                    >
-
+                                        Menu
-                                        <Text
-                                             style={styles.hambuger}
-                                        >
-                                             Menu
                            </Text>
 
-                                   </TouchableOpacity>
+                              </TouchableOpacity>
-                                   <View style={{ flex: 1 }}></View>
+                              <View style={{ flex: 1 }}></View>
 
-                                   <Text style={{
+                              <Text style={{
-                                        backgroundColor: this.state.myNetwork.id === this.state.filternetwork.id ? theme.primary : theme.accent,
+                                   backgroundColor: this.state.myNetwork.id === this.state.filternetwork.id ? theme.primary : theme.accent,
-                                        padding: 5,
+                                   padding: 5,
-                                        color: "white",
+                                   color: "white",
-                                        marginRight: 10,
+                                   marginRight: 10,
-                                        fontSize: 10,
+                                   fontSize: 10,
-                                        borderRadius: 12,
+                                   borderRadius: 12,
-                                   }}
+                              }}
-                                   >{this.state.filternetwork.name ? this.state.filternetwork.name : this.state.network}</Text>
+                              >{this.state.filternetwork.name ? this.state.filternetwork.name : this.state.network}</Text>
-                                   {this.renderSupplementInformation()}
+                              {this.renderSupplementInformation()}
-                              </View>
+                         </View>
-                              {this.showLoadingMapView()}
+                         {this.showLoadingMapView()}
 
-                         </Surface>
+                    </Surface>
 
-                    </View>
+               </View>
 
-               )
+          )
-          }
+          /* } */
 
      }
 
@@ -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/optionMenu/OptionsMenu.js

@@ -254,7 +254,8 @@ export default class OptionsMenu extends Component {
           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 === 'operateurOptionSelect' || item === 'paiementFacture' || item === 'envoieWalletToWalletUser'
-               || item === 'envoieWalletToCashUser') {
+               || item === 'envoieWalletToCashUser' || item === 'linkCard' || item === 'envoieWalletToCardUser' || item === 'envoieWalletToBankUser' || item === 'retraitWalletVersCashUser'
+               || item === 'retraitCarteVersWalletUser') {
                return null
           } else {
                const color = this.state.currentId === item.id ? theme.accent : "grey"

screens/wallet/WalletDetailUser.js

@@ -73,6 +73,7 @@ class WalletDetailUser extends Component {
           this.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
           moment.locale(this.currentLocale);
           IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
+          IlinkEmitter.on("refreshWallet", this.refresh);
 
           this.props.getWalletTransactionHistoryReset();
           this.props.depositActionReset();
@@ -245,12 +246,21 @@ class WalletDetailUser extends Component {
                          justifyContent: 'flex-end'
                     }}>
                          <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
-                         <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary style={styles.tagFollow}
+                         <View style={{ flexDirection: 'row' }}>
-                              onPress={() => {
+                              <Tag icon={<Icon name='link' size={20} color={Color.whiteColor} style={{ marginLeft: -15 }} />}
-                                   this._scrollView.scrollToEnd();
+                                   style={{ paddingRight: 10, width: 120, borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 1, borderRightColor: Color.whiteColor }}
-                              }}>
+                                   primary
-                              {I18n.t('TRANSACTION_HISTORY')}
+                                   onPress={() => {
-                         </Tag>
+                                        this.props.navigation.push(route.linkCard);
+                                   }}>
+                                   &nbsp;{I18n.t('LINK_CARD')}
+                              </Tag>
+                              <Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary
+                                   style={{ width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }}>
+                                   &nbsp;&nbsp;{I18n.t('HISTORY')}
+                              </Tag>
+
+                         </View>
                     </View>
                </View>
                <View style={styles.contentLeftItem}>
@@ -302,7 +312,7 @@ class WalletDetailUser extends Component {
                          <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                               {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                          </Text>
-                         <Text style={[Typography.body2]}>{thousands(wallet.balance, ' ')}</Text>
+                         <Text style={[Typography.body2]}>{`${thousands(wallet.balance, ' ')} ${wallet.currency_code}`}</Text>
                     </View>
                </View>
 
@@ -387,18 +397,14 @@ class WalletDetailUser extends Component {
                                                        <View style={[styles.containerTouch]}>
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
-                                                                      if (this.state.isIdentifiedValidated) {
+                                                                      this.props.navigation.push(route.walletOptionSelect, {
-                                                                           this.props.navigation.push(route.walletOptionSelect, {
+                                                                           optionSelect: optionDepotUserScreen,
-                                                                                optionSelect: optionDepotUserScreen,
+                                                                           onGoBack: () => this.refresh(),
-                                                                                lottie: {
+                                                                           lottie: {
-                                                                                     source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
-                                                                                     loop: false
+                                                                                loop: false
-                                                                                }
+                                                                           }
-                                                                           })
+                                                                      })
-                                                                      } else if (this.state.isIdentified)
-                                                                           displayToast(I18n.t('NOT_IDENTIFIED'))
-                                                                      else
-                                                                           displayToast(I18n.t('NOT_VALIDATED'));
                                                                  }}
                                                                  activeOpacity={0.9}>
                                                                  <Icon name='arrow-bottom-right'
@@ -410,15 +416,15 @@ class WalletDetailUser extends Component {
 
                                                                       <View style={styles.contentTitle}>
                                                                            <Text style={[Typography.headline, Typography.semibold]}>
-                                                                                {I18n.t('DEPOSIT')}
+                                                                                {I18n.t('ENVOIE_ARGENT')}
                                                                            </Text>
                                                                       </View>
 
-                                                                      <View style={{ flex: 1 }}>
+                                                                      {/*                                                                       <View style={{ flex: 1 }}>
                                                                            <Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                 {I18n.t('DEPOSIT_DESCRIPTION')}
                                                                            </Text>
-                                                                      </View>
+                                                                      </View> */}
 
                                                                  </View>
                                                             </TouchableOpacity>
@@ -428,18 +434,14 @@ class WalletDetailUser extends Component {
 
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
-                                                                      if (this.state.isIdentifiedValidated) {
+                                                                      this.props.navigation.push(route.walletOptionSelect, {
-                                                                           this.props.navigation.push(route.walletOptionSelect, {
+                                                                           optionSelect: optionRetraitUserScreen,
-                                                                                optionSelect: optionRetraitUserScreen,
+                                                                           onGoBack: () => this.refresh(),
-                                                                                lottie: {
+                                                                           lottie: {
-                                                                                     source: require("./../../datas/json/wallet_with_cash.json"),
+                                                                                source: require("./../../datas/json/wallet_with_cash.json"),
-                                                                                     loop: true
+                                                                                loop: true
-                                                                                }
+                                                                           }
-                                                                           })
+                                                                      })
-                                                                      } else if (this.state.isIdentified)
-                                                                           displayToast(I18n.t('NOT_IDENTIFIED'))
-                                                                      else
-                                                                           displayToast(I18n.t('NOT_VALIDATED'));
                                                                  }}
                                                                  activeOpacity={0.9}>
 
@@ -452,15 +454,15 @@ class WalletDetailUser extends Component {
 
                                                                       <View style={styles.contentTitle}>
                                                                            <Text style={[Typography.headline, Typography.semibold]}>
-                                                                                {I18n.t('WITHDRAWAL')}
+                                                                                {I18n.t('RETRAIT_ARGENT')}
                                                                            </Text>
                                                                       </View>
 
-                                                                      <View style={{ flex: 1 }}>
+                                                                      {/*                                                                       <View style={{ flex: 1 }}>
                                                                            <Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                                 {I18n.t('WITHDRAWAL_DESCRIPTION')}
                                                                            </Text>
-                                                                      </View>
+                                                                      </View> */}
 
                                                                  </View>
                                                             </TouchableOpacity>
@@ -473,12 +475,7 @@ class WalletDetailUser extends Component {
 
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
-                                                                      if (this.state.isIdentifiedValidated) {
 
-                                                                      } else if (this.state.isIdentified)
-                                                                           displayToast(I18n.t('NOT_IDENTIFIED'))
-                                                                      else
-                                                                           displayToast(I18n.t('NOT_VALIDATED'));
                                                                  }}
                                                                  activeOpacity={0.9}>
 
@@ -508,12 +505,6 @@ class WalletDetailUser extends Component {
                                                        <View style={[styles.containerTouch]}>
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
-                                                                      if (this.state.isIdentifiedValidated) {
-
-                                                                      } else if (this.state.isIdentified)
-                                                                           displayToast(I18n.t('NOT_IDENTIFIED'))
-                                                                      else
-                                                                           displayToast(I18n.t('NOT_VALIDATED'));
                                                                  }}
                                                                  activeOpacity={0.9}>
                                                                  <Icon name='heart-multiple'
@@ -547,20 +538,14 @@ class WalletDetailUser extends Component {
                                                             <TouchableOpacity style={styles.contain}
                                                                  onPress={() => {
 
-                                                                      if (this.state.isIdentifiedValidated) {
+                                                                      this.props.navigation.push(route.walletOptionSelect, {
-                                                                           this.props.navigation.push(route.walletOptionSelect, {
+                                                                           optionSelect: optionPaiementFacture,
-                                                                                optionSelect: optionPaiementFacture,
+                                                                           onGoBack: () => this.refresh(),
-                                                                                onGoBack: () => this.refresh(),
+                                                                           lottie: {
-                                                                                lottie: {
+                                                                                source: require("./../../datas/json/paiement_facture.json"),
-                                                                                     source: require("./../../datas/json/paiement_facture.json"),
+                                                                                loop: true
-                                                                                     loop: true
+                                                                           }
-                                                                                }
+                                                                      });
-                                                                           })
-
-                                                                      } else if (this.state.isIdentified)
-                                                                           displayToast(I18n.t('NOT_IDENTIFIED'))
-                                                                      else
-                                                                           displayToast(I18n.t('NOT_VALIDATED'));
                                                                  }} activeOpacity={0.9}>
 
                                                                  <Icon name='file-document'

screens/wallet/WalletOptionSelect.js

@@ -27,11 +27,12 @@ export default class WalletOptionSelect extends Component {
                subTitle: this.props.navigation.state.params.optionSelect.subTitle,
                type: this.props.navigation.state.params.optionSelect.type,
                wallet: this.props.navigation.state.params.wallet,
-               lottie: this.props.navigation.state.params.lottie
+               lottie: this.props.navigation.state.params.lottie,
+               onGoBack: this.props.navigation.state.params.onGoBack,
           }
           console.log("WALLET OPTION PROPS", this.props);
 
-
+          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
      }
 
      static navigationOptions = ({ navigation }) => ({
@@ -50,21 +51,36 @@ export default class WalletOptionSelect extends Component {
                />)
      });
 
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WALLET') })
+          this.forceUpdate()
+     }
+
      redirectToRoute = (options) => {
           switch (this.state.type) {
                case 'FACTURE':
                     this.props.navigation.push(options.screen, {
-                         optionSelect: options.subScreenOption
+                         optionSelect: options.subScreenOption,
+                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                     });
                     break;
                case 'DEPOT':
                     this.props.navigation.push(options.screen, {
-                         wallet: this.state.wallet
+                         wallet: this.state.wallet,
+                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
+                    });
+                    break;
+               case 'DEPOT_USER':
+                    this.props.navigation.push(options.screen, {
+                         wallet: this.state.wallet,
+                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
+                         optionSelect: options.subScreenOption,
                     });
                     break;
                case 'RETRAIT':
                     this.props.navigation.push(options.screen, {
-                         wallet: this.state.wallet
+                         wallet: this.state.wallet,
+                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                     });
                     break;
 

screens/wallet/user/EnvoieWalletToBankUser.js

@@ -0,0 +1,466 @@
+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 Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import thousands from 'thousands';
+import { Color } from '../../../config/Color';
+import { FontWeight, Typography } from '../../../config/typography';
+import { store } from "../../../redux/store";
+import { IlinkEmitter } from '../../../utils/events';
+import { readUser } from '../../../webservice/AuthApi';
+import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
+import { isNormalInteger } from '../../../utils/UtilsFunction';
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+
+class EnvoieWalletToBankUser extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('DEPOSIT_WALLET_TO_BANK'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('ENVOIE_WALLET_TO_BANK')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               montant: null,
+               password: null,
+               codeCVV: null,
+               loading: false,
+               user: null,
+               triggerSubmitClick: false,
+               isSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
+          };
+
+          this.props.envoieUserWalletToCardReset();
+          this.props.getCommissionUserWalletToCardReset();
+
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     componentWillReceiveProps(nextProps) {
+
+          console.log('PROPS', nextProps)
+
+          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCardGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCardGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
+     }
+
+     renderEnvoieWalletToWalletResponse = () => {
+
+          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;
+
+          if (errorEnvoieWalletToCard !== null) {
+               if (typeof errorEnvoieWalletToCard.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_TRANSFER"),
+                         errorEnvoieWalletToCard.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCard !== null) {
+               if (resultEnvoieWalletToCard.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCard.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     renderDialogGetCommissionResponse = () => {
+
+          const { errorEnvoieWalletToCardGetCommission } = this.props;
+
+          if (errorEnvoieWalletToCardGetCommission !== null) {
+               if (typeof errorEnvoieWalletToCardGetCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorEnvoieWalletToCardGetCommission.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.getCommissionUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+     }
+
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('DEPOSIT_TO_CARD') })
+          this.forceUpdate()
+     }
+
+     modalConfirmTransaction = (data) => {
+
+          const frais = data.response.frais;
+          const montant_net = data.response.montant_net;
+
+          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('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(frais, ' ')} ${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]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
+                              type: 2,
+                              cvv: this.state.codeCVV,
+                              id_wallet_user: this.state.wallet.id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCardReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
+     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
+               return {
+                    errorMessage: '',
+                    isValid: true
+               };
+     }
+
+     onSubmitSendWalletToCard = () => {
+          const { codeCVV, montant, password } = this.state;
+
+          if (this.ckeckIfFieldIsOK(codeCVV) && codeCVV === 3)
+               this.codeCVVAnim.shake(800);
+          else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+               this.montantAnim.shake(800);
+          }
+          else if (this.ckeckIfFieldIsOK(password))
+               this.passwordAnim.shake(800);
+          else {
+
+               this.props.getCommissionUserWalletToCardAction({
+                    type: 2,
+                    id_wallet_user: this.state.wallet.id,
+                    montant: this.state.montant,
+               });
+
+          }
+          this.setState({
+               triggerSubmitClick: true
+          });
+     }
+
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     render() {
+          const { resultEnvoieWalletToCardGetCommission } = this.props;
+          return (
+               <>
+                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) && this.renderLoader()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCardGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
+                    }
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_BANK')}</Text>
+
+                         <Animatable.View ref={(comp) => { this.codeCVVAnim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
+                                   label={I18n.t('CODE_IBAN')}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   value={this.state.codeCVV}
+                                   onChangeText={(codeCVV) => {
+
+                                        this.setState({ codeCVV })
+                                   }}
+                                   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>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              onPress={() => { /* this.onSubmitSendWalletToCard();  */ }}>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const maptStateToProps = state => ({
+
+     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
+     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
+     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
+
+     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
+     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
+     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+     envoieUserWalletToCardAction,
+     envoieUserWalletToCardReset,
+
+     getCommissionUserWalletToCardAction,
+     getCommissionUserWalletToCardReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(EnvoieWalletToBankUser);
+
+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,
+     }
+});

screens/wallet/user/EnvoieWalletToCardUser.js

@@ -0,0 +1,470 @@
+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 Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import thousands from 'thousands';
+import { Color } from '../../../config/Color';
+import { FontWeight, Typography } from '../../../config/typography';
+import { store } from "../../../redux/store";
+import { IlinkEmitter } from '../../../utils/events';
+import { readUser } from '../../../webservice/AuthApi';
+import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
+import { isNormalInteger } from '../../../utils/UtilsFunction';
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+
+class EnvoieWalletToCardUser extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('DEPOSIT_WALLET_TO_CARD'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('DEPOSIT_WALLET_TO_CARD')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               montant: null,
+               password: null,
+               codeCVV: null,
+               loading: false,
+               user: null,
+               triggerSubmitClick: false,
+               isSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
+          };
+
+          this.props.envoieUserWalletToCardReset();
+          this.props.getCommissionUserWalletToCardReset();
+
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     componentWillReceiveProps(nextProps) {
+
+          console.log('PROPS', nextProps)
+
+          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCardGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCardGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
+     }
+
+     renderEnvoieWalletToWalletResponse = () => {
+
+          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;
+
+          if (errorEnvoieWalletToCard !== null) {
+               if (typeof errorEnvoieWalletToCard.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_TRANSFER"),
+                         errorEnvoieWalletToCard.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCard !== null) {
+               if (resultEnvoieWalletToCard.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCard.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     renderDialogGetCommissionResponse = () => {
+
+          const { errorEnvoieWalletToCardGetCommission } = this.props;
+
+          if (errorEnvoieWalletToCardGetCommission !== null) {
+               if (typeof errorEnvoieWalletToCardGetCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorEnvoieWalletToCardGetCommission.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.getCommissionUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+     }
+
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('DEPOSIT_TO_CARD') })
+          this.forceUpdate()
+     }
+
+     modalConfirmTransaction = (data) => {
+
+          const frais = data.response.frais;
+          const montant_net = data.response.montant_net;
+
+          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('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(frais, ' ')} ${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]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
+                              type: 2,
+                              cvv: this.state.codeCVV,
+                              id_wallet_user: this.state.wallet.id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCardReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
+     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
+               return {
+                    errorMessage: '',
+                    isValid: true
+               };
+     }
+
+     onSubmitSendWalletToCard = () => {
+          const { codeCVV, montant, password } = this.state;
+
+          if (this.ckeckIfFieldIsOK(codeCVV) && codeCVV === 3)
+               this.codeCVVAnim.shake(800);
+          else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+               this.montantAnim.shake(800);
+          }
+          else if (this.ckeckIfFieldIsOK(password))
+               this.passwordAnim.shake(800);
+          else {
+
+               this.props.getCommissionUserWalletToCardAction({
+                    type: 2,
+                    id_wallet_user: this.state.wallet.id,
+                    montant: this.state.montant,
+               });
+
+          }
+          this.setState({
+               triggerSubmitClick: true
+          });
+     }
+
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     render() {
+          const { resultEnvoieWalletToCardGetCommission } = this.props;
+          return (
+               <>
+                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) && this.renderLoader()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCardGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
+                    }
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_CARD')}</Text>
+
+                         <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>
+
+                         <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>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              onPress={() => { this.onSubmitSendWalletToCard() }}>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const maptStateToProps = state => ({
+
+     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
+     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
+     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
+
+     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
+     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
+     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+     envoieUserWalletToCardAction,
+     envoieUserWalletToCardReset,
+
+     getCommissionUserWalletToCardAction,
+     getCommissionUserWalletToCardReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(EnvoieWalletToCardUser);
+
+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,
+     }
+});

screens/wallet/user/EnvoieWalletToCash.js

@@ -2,10 +2,10 @@ import Button from 'apsl-react-native-button';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
 import React, { Component } from 'react';
-import { Keyboard, PermissionsAndroid, ProgressBarAndroid, ScrollView, StyleSheet, Text, View, Platform, Alert } from 'react-native';
+import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import I18n from 'react-native-i18n';
-import { MaterialDialog } from "react-native-material-dialog";
+import Dialog from "react-native-dialog";
 import { Dropdown } from 'react-native-material-dropdown';
 import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
 import { ProgressDialog } from 'react-native-simple-dialogs';
@@ -13,16 +13,17 @@ 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 Geolocation from 'react-native-geolocation-service';
-import { identityPieces, paysDestinationData, walletActifData, typeIdIDestinataire } from '../../../utils/UtilsFunction';
 import { Color } from '../../../config/Color';
+import { store } from "../../../redux/store";
+import { identityPieces, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire, thousandsSeparators } from '../../../utils/UtilsFunction';
+import { readUser } from '../../../webservice/AuthApi';
 import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi';
-import { readUser, getTownInformationName, getListCountriesActive } from '../../../webservice/AuthApi';
+import { Typography, FontWeight } from '../../../config/typography';
-import { getPositionInformation } from '../../../webservice/MapService';
+import thousands from 'thousands';
+import { IlinkEmitter } from '../../../utils/events';
 let theme = require('../../../utils/theme.json');
 let route = require('../../../route.json');
-const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
+
-const moment = require('moment');
 
 class EnvoieWalletToCashUser extends Component {
      static navigatorStyle = {
@@ -36,7 +37,7 @@ class EnvoieWalletToCashUser extends Component {
      static navigationOptions = () => {
           return {
                drawerLabel: () => null,
-               headerTitle: I18n.t('DEPOSIT_TO_CASH'),
+               headerTitle: I18n.t('DEPOSIT_WALLET_TO_CASH'),
                headerTintColor: 'white',
                headerStyle: {
                     backgroundColor: Color.primaryColor,
@@ -46,7 +47,7 @@ class EnvoieWalletToCashUser extends Component {
                headerTitleStyle: {
                     color: "white"
                },
-               title: I18n.t('DEPOSIT_TO_CASH')
+               title: I18n.t('DEPOSIT_WALLET_TO_CASH')
           }
      };
 
@@ -59,9 +60,10 @@ class EnvoieWalletToCashUser extends Component {
                paysDestinationSelect: null,
                walletActifs: [],
                walletActifSelect: null,
-               typeIdDestinataire: typeIdIDestinataire(),
+               noms: null,
-               typeIdDestinataireSelect: (typeIdIDestinataire()[0].name),
+               prenoms: null,
                numeroTelephone: null,
+               numeroIdentite: null,
                montant: null,
                password: null,
                loading: false,
@@ -69,12 +71,20 @@ class EnvoieWalletToCashUser extends Component {
                modalVisible: true,
                hasLoadActiveCountryList: true,
                hasLoadActivePayCountryNetworkList: true,
+               triggerSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
           };
 
           this.props.getActiveCountryReset();
           this.props.getActiveCountryByDialCodeReset();
           this.props.getPayCountryNetworkReset();
+          this.props.envoieUserWalletToCashReset();
+          this.props.getCommissionUserWalletToCashReset();
 
+          this.props.getActiveCountryAction();
+          console.log("ENVOIE WALLET PROPS", this.props);
      }
 
      componentDidMount() {
@@ -87,18 +97,20 @@ class EnvoieWalletToCashUser extends Component {
                }
           });
 
-
-          if (Platform.OS === 'android') {
-               this.requestCameraPermission();
-          } else {
-               this.watchLocation();
-          }
-
      }
 
-     componentWillUnmount() {
+     componentWillReceiveProps(nextProps) {
-          this.mounted = false;
+
-          if (this.watchID) Geolocation.clearWatch(this.watchID);
+          if (nextProps.resultEnvoieWalletToCashGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCashGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCashGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
      }
 
      renderGetActionCountryList = () => {
@@ -110,9 +122,10 @@ class EnvoieWalletToCashUser extends Component {
                     this.setState({
                          hasLoadActiveCountryList: false,
                          paysDestination: resultActiveCountryList.response,
-                         modalVisible: false
+                         paysDestinationSelect: resultActiveCountryList.response[0].name,
                     });
-                    this.watchLocation();
+                    if (this.state.hasLoadActivePayCountryNetworkList)
+                         this.props.getPayCountryNetworkAction({ id_wallet_user: this.state.wallet.id, id_country: resultActiveCountryList.response[0].id });
                }
           }
 
@@ -153,11 +166,22 @@ class EnvoieWalletToCashUser extends Component {
           const { resultPayCountryNetwork, errorPayCountryNetwork } = this.props;
           if (resultPayCountryNetwork !== null) {
                if (typeof resultPayCountryNetwork.response !== 'undefined') {
-                    this.setState({
+                    if (resultPayCountryNetwork.response.length > 0) {
-                         hasLoadActivePayCountryNetworkList: false,
+                         this.setState({
-                         walletActifs: resultPayCountryNetwork.response,
+                              hasLoadActivePayCountryNetworkList: false,
-                         walletActifSelect: resultPayCountryNetwork.response[0].name,
+                              walletActifs: resultPayCountryNetwork.response,
-                    })
+                              walletActifSelect: resultPayCountryNetwork.response[0].name,
+                              modalVisible: false
+                         });
+                    }
+                    else if (resultPayCountryNetwork.response.length === 0) {
+                         this.setState({
+                              walletActifs: [],
+                              walletActifSelect: '',
+                              modalVisible: false,
+                              hasLoadActivePayCountryNetworkList: false,
+                         });
+                    }
                }
           }
 
@@ -194,129 +218,67 @@ class EnvoieWalletToCashUser extends Component {
           }
      }
 
-     showErrorDialog() {
+     renderEnvoieWalletToWalletResponse = () => {
-          Alert.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
-               "et que vous êtes connecté à internet puis ressayer", [{
-                    text: "Recommencer", onPress: () => {
-                         this.watchLocation()
-                    }
-               }, { text: "Annuler", onPress: () => { this.props.navigation.pop() } }])
-     }
 
+          const { resultEnvoieWalletToCash, errorEnvoieWalletToCash } = this.props;
 
-     async watchLocation() {
+          if (errorEnvoieWalletToCash !== null) {
-          Geolocation.getCurrentPosition((position) => {
+               if (typeof errorEnvoieWalletToCash.data !== 'undefined') {
-               this.props.getActiveCountryAction();
+                    Alert.alert(
-               this.treatPosition(position);
+                         I18n.t("ERROR_TRANSFER"),
-               return position;
+                         errorEnvoieWalletToCash.data.error,
-          }, (e) => {
+                         [
-               this.showErrorDialog()
+                              {
-          }, this.props.geolocationOptions);
+                                   text: I18n.t("OK"), onPress: () => {
-          if (!this.watchID) {
+                                        this.props.envoieUserWalletToCashReset();
-               Geolocation.watchPosition((position) => { this.treatPosition(position); return position }, (e) => { this.showErrorDialog() }, this.props.geolocationOptions)
+                                   }
-          }
-     }
-
-     async requestCameraPermission() {
-          try {
-               const granted = await PermissionsAndroid.request(
-                    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-                    {
-                         'title': 'Cool Photo App Camera Permission',
-                         'message': 'Cool Photo App needs access to your camera ' +
-                              'so you can take awesome pictures.'
-                    }
-               )
-               if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-                    this.watchLocation();
-               } else {
-                    Alert.alert("Echec à l'autorisation",
-                         "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
-                         [{
-                              text: "Ok", onPress: () => {
-                                   this.props.navigation.pop()
                               }
-                         }])
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCash !== null) {
+               if (resultEnvoieWalletToCash.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCash.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCashReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
                }
-          } catch (err) {
-               Alert.alert("Une erreur est Survenue",
-                    "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
-                    [{
-                         text: "Ok", onPress: () => {
-                              this.props.navigation.pop();
-                         }
-                    }])
           }
      }
 
-     treatPosition(position) {
+     renderDialogGetCommissionResponse = () => {
-          const myLastPosition = this.state.myPosition;
-          const myPosition = position.coords;
 
-          if (!isEqual(myPosition, myLastPosition)) {
+          const { errorEnvoieWalletToCashGetCommission } = this.props;
-               getPositionInformation(myPosition).then((response) => {
-                    if (response.results !== undefined) {
 
-                         if (response.results !== undefined) {
+          if (errorEnvoieWalletToCashGetCommission !== null) {
-                              if (response.results.length > 0) {
+               if (typeof errorEnvoieWalletToCashGetCommission.data !== 'undefined') {
-
+                    Alert.alert(
-                                   let results = response.results;
+                         I18n.t("ERROR_LABLE"),
-                                   let shortcountry;
+                         errorEnvoieWalletToCashGetCommission.data.error,
-                                   let mcountry;
+                         [
-                                   for (let i = 0; i < results[0].address_components.length; i++) {
+                              {
-                                        for (let j = 0; j < results[0].address_components[i].types.length; j++) {
+                                   text: I18n.t("OK"), onPress: () => {
-                                             if (results[0].address_components[i].types[j] === "country") {
+                                        this.props.getCommissionUserWalletToCashReset();
-                                                  mcountry = results[0].address_components[i];
-                                                  shortcountry = mcountry.short_name;
-                                                  this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
-                                             }
-                                        }
                                    }
-                                   if (this.state.paysDestination.length > 0) {
-
-                                        var found = false;
-                                        for (let country of this.state.paysDestination) {
-                                             if (country.code_country === shortcountry) {
-                                                  found = true;
-                                                  this.setState({
-                                                       modalVisible: false, indicatifCountry: country.code_dial,
-                                                       paysDestinationSelect: country.name
-                                                  });
-                                                  if (this.state.hasLoadActivePayCountryNetworkList)
-                                                       this.props.getPayCountryNetworkAction(country.id);
-                                             }
-                                        }
-                                        if (!found) {
-                                             Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{ text: "OK" }]);
-
-                                        }
-                                   }
-
                               }
-
+                         ],
-                         } else {
+                         { cancelable: false }
-                              Alert.alert(
+                    )
-                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
+               }
-                                   I18n.t('TEXT_NETWORK_UNABLE')
-                                   ,
-                                   [
-                                        { text: I18n.t("NO"), onPress: () => { this.props.navigation.pop() } },
-                                        {
-                                             text: I18n.t("YES"), onPress: () => {
-                                                  this.treatPosition(myPosition)
-                                             }
-                                        }
-
-                                   ],
-                                   { cancelable: false }
-                              )
-                         }
-                    }
-               }).catch((e) => {
-                    console.log("CATCH", e);
-                    this.showErrorDialog();
-               });
-               this.setState({ myPosition: myPosition });
           }
 
      }
@@ -325,8 +287,137 @@ class EnvoieWalletToCashUser extends Component {
           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.envoieUserWalletToCashAction({
+                              type: 3,
+                              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.numeroTelephone,
+                              type_document_destinataire: this.state.identityPiecesName,
+                              nom_destinataire: this.state.noms,
+                              prenom_destinataire: this.state.prenoms,
+                              id_document_destinataire: this.state.numeroIdentite,
+                              network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCashReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
      onSubmitSendWalletToWallet = () => {
-          const { identityPiecesName, paysDestinationSelect, walletActifSelect, typeIdDestinataireSelect, numeroTelephone, montant, password } = this.state;
+          const { identityPiecesName, noms, prenoms, paysDestinationSelect, numeroIdentite, walletActifSelect, typeIdDestinataireSelect, numeroTelephone, montant, password } = this.state;
 
           if (this.ckeckIfFieldIsOK(identityPiecesName))
                this.identityPiecesAnim.shake(800);
@@ -334,18 +425,29 @@ class EnvoieWalletToCashUser extends Component {
                this.paysDestinationAnim.shake(800);
           else if (this.ckeckIfFieldIsOK(walletActifSelect))
                this.walletActifAnim.shake(800);
-          else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
+          else if (this.ckeckIfFieldIsOK(noms))
-               this.typeIdDestinataireAnim.shake(800);
+               this.firstnameAnim.shake(800);
-          else if (this.ckeckIfFieldIsOK(typeIdDestinataireSelect))
+          else if (this.ckeckIfFieldIsOK(prenoms))
-               this.typeIdDestinataireAnim.shake(800);
+               this.lastnameAnim.shake(800);
+          else if (this.ckeckIfFieldIsOK(numeroIdentite))
+               this.numeroIdentiteAnim.shake(800);
           else if (this.ckeckIfFieldIsOK(numeroTelephone))
                this.numeroTelephoneAnim.shake(800);
-          else if (this.ckeckIfFieldIsOK(montant))
+          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
+
+               this.props.getCommissionUserWalletToCashAction({
+                    type: 3,
+                    id_wallet_user: this.state.wallet.id,
+                    final_country: (this.state.paysDestination.filter(element => element.name === this.state.paysDestinationSelect))[0].id,
+                    montant: this.state.montant,
+               });
+
           }
           this.setState({
                triggerSubmitClick: true
@@ -353,23 +455,10 @@ class EnvoieWalletToCashUser extends Component {
 
      }
 
-
-     renderLoaderModal() {
-          return (
-               <MaterialDialog
-                    visible={this.state.modalVisible}
-                    title={I18n.t("LOADING_INFO")}>
-                    <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-                         <Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
-                         <ProgressBarAndroid />
-                    </View>
-               </MaterialDialog>)
-     }
-
      renderLoader = () => {
           return (
                <ProgressDialog
-                    visible={this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingPayCountryNetwork}
+                    visible={this.state.modalVisible || this.props.loadingEnvoieWalletToCashGetCommission || this.props.loadingEnvoieWalletToCash || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode}
                     title={I18n.t('LOADING')}
                     message={I18n.t('LOADING_INFO')}
                />
@@ -378,16 +467,22 @@ class EnvoieWalletToCashUser extends Component {
 
      render() {
           console.log("STATE", this.state);
+          const { resultEnvoieWalletToCashGetCommission } = this.props;
           return (
                <>
-                    {(this.state.modalVisible || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
+                    {(this.state.modalVisible || this.props.loadingEnvoieWalletToCashGetCommission || this.props.loadingEnvoieWalletToCash || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
                     {this.state.hasLoadActiveCountryList && this.renderGetActionCountryList()}
                     {this.state.hasLoadActivePayCountryNetworkList && this.renderGetPayCountryNetworkResponse()}
-                    {/*                     {this.state.triggerSubmitClick && this.renderCreateIdentificationResponse()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
-                    {this.state.triggerNextClick && this.renderGetNumberResponse()} */}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCashGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCashGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCashGetCommission)
+                    }
                     <ScrollView style={styles.container}>
 
-                         <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_WALLET')}</Text>
+                         <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_CASH')}</Text>
 
                          <Animatable.View ref={(comp) => { this.paysDestinationAnim = comp }}
                               style={{
@@ -406,7 +501,13 @@ class EnvoieWalletToCashUser extends Component {
                                    useNativeDriver={true}
                                    value={this.state.paysDestinationSelect === null ? '' : this.state.paysDestinationSelect}
                                    onChangeText={(value, index, data) => {
-                                        this.setState({ paysDestinationSelect: value });
+                                        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.getCommissionUserWalletToCashReset();
                                    }}
                                    valueExtractor={(value) => { return value.name }}
                                    labelExtractor={(value) => { return value.name }}
@@ -430,13 +531,59 @@ class EnvoieWalletToCashUser extends Component {
                                    useNativeDriver={true}
                                    value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
                                    onChangeText={(value, index, data) => {
-                                        this.setState({ walletActifSelect: value });
+                                        this.setState({
+                                             walletActifSelect: value,
+                                        });
+
                                    }}
                                    valueExtractor={(value) => { return value.name }}
                                    labelExtractor={(value) => { return value.name }}
                               />
                          </Animatable.View>
 
+                         <Animatable.View ref={(comp) => { this.firstnameAnim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'user'}
+                                   label={`${I18n.t('NAME')}`}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   value={this.state.noms}
+                                   onChangeText={(noms) => {
+                                        this.setState({ noms })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+
+                         <Animatable.View ref={(comp) => { this.lastnameAnim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'user-circle-o'}
+                                   label={`${I18n.t('FIRSTNAME')}`}
+                                   iconColor={'#f95a25'}
+                                   iconSize={20}
+                                   value={this.state.prenoms}
+                                   onChangeText={(prenoms) => {
+                                        this.setState({ prenoms })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+
+                         <Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
+                              <Fumi iconClass={FontAwesomeIcon} iconName={isEqual(this.state.typeIdDestinataireSelect, I18n.t('PHONE')) ? 'phone' : 'lock'}
+                                   label={I18n.t('PHONE')}
+                                   iconColor={'#f95a25'}
+                                   keyboardType='phone-pad'
+                                   iconSize={20}
+                                   value={this.state.numeroTelephone}
+                                   onChangeText={(numeroTelephone) => {
+                                        this.setState({ numeroTelephone })
+                                   }}
+                                   style={styles.input}
+                              >
+                              </Fumi>
+                         </Animatable.View>
+
                          <Animatable.View ref={(comp) => { this.identityPiecesAnim = comp }}
                               style={{
                                    width: responsiveWidth(90),
@@ -461,38 +608,13 @@ class EnvoieWalletToCashUser extends Component {
                               />
                          </Animatable.View>
 
-                         <Animatable.View ref={(comp) => { this.typeIdDestinataireAnim = comp }}
+                         <Animatable.View ref={(comp) => { this.numeroIdentiteAnim = comp }}>
-                              style={{
+                              <Fumi iconClass={FontAwesomeIcon} iconName={'address-card'}
-                                   width: responsiveWidth(90),
+                                   label={`${I18n.t('NUMERO_IDENTITE')}`}
-                                   height: 60,
-                                   marginTop: 20,
-                                   alignSelf: 'center',
-                                   borderRadius: 10,
-                                   paddingLeft: 20,
-                                   paddingRight: 20,
-                                   backgroundColor: 'white'
-                              }}>
-                              <Dropdown
-                                   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.name }}
-                                   labelExtractor={(value) => { return value.name }}
-                              />
-                         </Animatable.View>
-
-                         <Animatable.View ref={(comp) => { this.numeroTelephoneAnim = comp }}>
-                              <Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
-                                   label={I18n.t('PHONE')}
                                    iconColor={'#f95a25'}
                                    iconSize={20}
-                                   value={this.state.numeroTelephone}
+                                   onChangeText={(numeroIdentite) => {
-                                   onChangeText={(numeroTelephone) => {
+                                        this.setState({ numeroIdentite })
-                                        this.setState({ numeroTelephone })
                                    }}
                                    style={styles.input}
                               >
@@ -503,6 +625,7 @@ class EnvoieWalletToCashUser extends Component {
                               <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
                                    label={I18n.t('AMOUNT')}
                                    iconColor={'#f95a25'}
+                                   keyboardType='numeric'
                                    iconSize={20}
                                    value={this.state.montant}
                                    onChangeText={(montant) => {
@@ -511,6 +634,25 @@ class EnvoieWalletToCashUser extends Component {
                                    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 }}>
@@ -518,6 +660,7 @@ class EnvoieWalletToCashUser extends Component {
                                    label={I18n.t('PASSWORD')}
                                    iconColor={'#f95a25'}
                                    iconSize={20}
+                                   secureTextEntry={true}
                                    value={this.state.password}
                                    onChangeText={(password) => {
                                         this.setState({ password })
@@ -550,6 +693,14 @@ const maptStateToProps = state => ({
      loadingPayCountryNetwork: state.payCountryNetworkReducer.loading,
      resultPayCountryNetwork: state.payCountryNetworkReducer.result,
      errorPayCountryNetwork: state.payCountryNetworkReducer.error,
+
+     loadingEnvoieWalletToCash: state.envoieUserWalletToCashReducer.loading,
+     resultEnvoieWalletToCash: state.envoieUserWalletToCashReducer.result,
+     errorEnvoieWalletToCash: state.envoieUserWalletToCashReducer.error,
+
+     loadingEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.loading,
+     resultEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.result,
+     errorEnvoieWalletToCashGetCommission: state.envoieUserWalletToCashGetCommissionReducer.error,
 });
 
 const mapDispatchToProps = dispatch => bindActionCreators({
@@ -560,7 +711,13 @@ const mapDispatchToProps = dispatch => bindActionCreators({
      getPayCountryNetworkReset,
 
      getActiveCountryAction,
-     getActiveCountryReset
+     getActiveCountryReset,
+
+     envoieUserWalletToCashAction,
+     envoieUserWalletToCashReset,
+
+     getCommissionUserWalletToCashAction,
+     getCommissionUserWalletToCashReset
 
 }, dispatch);
 
@@ -583,6 +740,10 @@ const styles = StyleSheet.create({
           textAlign: 'center',
           margin: 20,
      },
+     blockView: {
+          paddingVertical: 10,
+          borderBottomWidth: 1
+     },
      subbigtitle: {
           color: 'white',
           fontSize: 17,

screens/wallet/user/EnvoieWalletToWalletUser.js

@@ -2,10 +2,10 @@ import Button from 'apsl-react-native-button';
 import isEqual from 'lodash/isEqual';
 import isNil from 'lodash/isNil';
 import React, { Component } from 'react';
-import { Alert, PermissionsAndroid, Platform, ScrollView, StyleSheet, Text } from 'react-native';
+import { Alert, ScrollView, StyleSheet, Text, View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import Geolocation from 'react-native-geolocation-service';
 import I18n from 'react-native-i18n';
+import Dialog from "react-native-dialog";
 import { Dropdown } from 'react-native-material-dropdown';
 import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
 import { ProgressDialog } from 'react-native-simple-dialogs';
@@ -14,16 +14,16 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Color } from '../../../config/Color';
-import { identityPieces, isIlinkWorldWallet, typeIdIDestinataire, isNormalInteger } from '../../../utils/UtilsFunction';
+import { store } from "../../../redux/store";
+import { identityPieces, isIlinkWorldWallet, isNormalInteger, typeIdIDestinataire, thousandsSeparators } from '../../../utils/UtilsFunction';
 import { readUser } from '../../../webservice/AuthApi';
 import { getActiveCountryAction, getActiveCountryByDialCodeAction, getActiveCountryByDialCodeReset, getActiveCountryReset, getPayCountryNetworkAction, getPayCountryNetworkReset } from '../../../webservice/CountryApi';
-import { envoieUserWalletToWalletAction, envoieUserWalletToWalletReset } from '../../../webservice/EnvoieUserApi';
+import { envoieUserWalletToWalletAction, envoieUserWalletToWalletReset, getCommissionUserWalletToWalletAction, getCommissionUserWalletToWalletReset } from '../../../webservice/EnvoieUserApi';
-import { getPositionInformation } from '../../../webservice/MapService';
+import { Typography, FontWeight } from '../../../config/typography';
-import { store } from "../../../redux/store";
+import thousands from 'thousands';
+import { IlinkEmitter } from '../../../utils/events';
 let theme = require('../../../utils/theme.json');
 let route = require('../../../route.json');
-const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
-const moment = require('moment');
 
 class EnvoieWalletToWalletUser extends Component {
      static navigatorStyle = {
@@ -31,7 +31,6 @@ class EnvoieWalletToWalletUser extends Component {
           statusBarColor: Color.primaryDarkColor,
           navBarTextColor: '#FFFFFF',
           navBarButtonColor: '#FFFFFF'
-
      };
 
      static navigationOptions = () => {
@@ -73,6 +72,8 @@ class EnvoieWalletToWalletUser extends Component {
                hasLoadActiveCountryList: true,
                hasLoadActivePayCountryNetworkList: true,
                triggerSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
                wallet: store.getState().walletDetailReducer.result.response
           };
 
@@ -80,7 +81,10 @@ class EnvoieWalletToWalletUser extends Component {
           this.props.getActiveCountryByDialCodeReset();
           this.props.getPayCountryNetworkReset();
           this.props.envoieUserWalletToWalletReset();
+          this.props.getCommissionUserWalletToWalletReset();
 
+          this.props.getActiveCountryAction();
+          console.log("ENVOIE WALLET PROPS", this.props);
      }
 
      componentDidMount() {
@@ -93,18 +97,20 @@ class EnvoieWalletToWalletUser extends Component {
                }
           });
 
-
-          if (Platform.OS === 'android') {
-               this.requestCameraPermission();
-          } else {
-               this.watchLocation();
-          }
-
      }
 
-     componentWillUnmount() {
+     componentWillReceiveProps(nextProps) {
-          this.mounted = false;
+
-          if (this.watchID) Geolocation.clearWatch(this.watchID);
+          if (nextProps.resultEnvoieWalletToWalletGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToWalletGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToWalletGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
      }
 
      renderGetActionCountryList = () => {
@@ -116,9 +122,10 @@ class EnvoieWalletToWalletUser extends Component {
                     this.setState({
                          hasLoadActiveCountryList: false,
                          paysDestination: resultActiveCountryList.response,
-                         modalVisible: false
+                         paysDestinationSelect: resultActiveCountryList.response[0].name,
                     });
-                    this.watchLocation();
+                    if (this.state.hasLoadActivePayCountryNetworkList)
+                         this.props.getPayCountryNetworkAction({ id_wallet_user: this.state.wallet.id, id_country: resultActiveCountryList.response[0].id });
                }
           }
 
@@ -159,14 +166,25 @@ class EnvoieWalletToWalletUser extends Component {
           const { resultPayCountryNetwork, errorPayCountryNetwork } = this.props;
           if (resultPayCountryNetwork !== null) {
                if (typeof resultPayCountryNetwork.response !== 'undefined') {
-                    let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
+                    if (resultPayCountryNetwork.response.length > 0) {
-                    this.setState({
+                         let typeIdentifiant = isIlinkWorldWallet(resultPayCountryNetwork.response[0].type) ? I18n.t('CODE_WALLET') : I18n.t('PHONE');
-                         hasLoadActivePayCountryNetworkList: false,
+                         this.setState({
-                         walletActifs: resultPayCountryNetwork.response,
+                              hasLoadActivePayCountryNetworkList: false,
-                         walletActifSelect: resultPayCountryNetwork.response[0].name,
+                              walletActifs: resultPayCountryNetwork.response,
-                         typeIdDestinataireSelect: typeIdentifiant,
+                              walletActifSelect: resultPayCountryNetwork.response[0].name,
-                         isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type)
+                              typeIdDestinataireSelect: typeIdentifiant,
-                    })
+                              isIlinkWorldWalletSelect: isIlinkWorldWallet(resultPayCountryNetwork.response[0].type),
+                              modalVisible: false
+                         });
+                    }
+                    else if (resultPayCountryNetwork.response.length === 0) {
+                         this.setState({
+                              walletActifs: [],
+                              walletActifSelect: '',
+                              modalVisible: false,
+                              hasLoadActivePayCountryNetworkList: false,
+                         });
+                    }
                }
           }
 
@@ -228,11 +246,12 @@ class EnvoieWalletToWalletUser extends Component {
                if (resultEnvoieWalletToWallet.response !== null) {
                     Alert.alert(
                          I18n.t("SUCCESS_TRANSFER"),
-                         I18n.t("WALLET_TO_WALLET_SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToWallet.response,
                          [
                               {
                                    text: I18n.t("OK"), onPress: () => {
                                         this.props.envoieUserWalletToWalletReset();
+                                        IlinkEmitter.emit("refreshWallet");
                                         this.props.navigation.pop();
                                    }
                               }
@@ -244,129 +263,25 @@ class EnvoieWalletToWalletUser extends Component {
           }
      }
 
-     showErrorDialog() {
+     renderDialogGetCommissionResponse = () => {
-          Alert.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
-               "et que vous êtes connecté à internet puis ressayer", [{
-                    text: "Recommencer", onPress: () => {
-                         this.watchLocation()
-                    }
-               }, { text: "Annuler", onPress: () => { this.props.navigation.pop() } }])
-     }
 
+          const { errorEnvoieWalletToWalletGetCommission } = this.props;
 
-     async watchLocation() {
+          if (errorEnvoieWalletToWalletGetCommission !== null) {
-          Geolocation.getCurrentPosition((position) => {
+               if (typeof errorEnvoieWalletToWalletGetCommission.data !== 'undefined') {
-               this.props.getActiveCountryAction();
+                    Alert.alert(
-               this.treatPosition(position);
+                         I18n.t("ERROR_LABLE"),
-               return position;
+                         errorEnvoieWalletToWalletGetCommission.data.error,
-          }, (e) => {
+                         [
-               this.showErrorDialog()
+                              {
-          }, this.props.geolocationOptions);
+                                   text: I18n.t("OK"), onPress: () => {
-          if (!this.watchID) {
+                                        this.props.getCommissionUserWalletToWalletReset();
-               Geolocation.watchPosition((position) => { this.treatPosition(position); return position }, (e) => { this.showErrorDialog() }, this.props.geolocationOptions)
+                                   }
-          }
-     }
-
-     async requestCameraPermission() {
-          try {
-               const granted = await PermissionsAndroid.request(
-                    PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
-                    {
-                         'title': 'Cool Photo App Camera Permission',
-                         'message': 'Cool Photo App needs access to your camera ' +
-                              'so you can take awesome pictures.'
-                    }
-               )
-               if (granted === PermissionsAndroid.RESULTS.GRANTED) {
-                    this.watchLocation();
-               } else {
-                    Alert.alert("Echec à l'autorisation",
-                         "L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
-                         [{
-                              text: "Ok", onPress: () => {
-                                   this.props.navigation.pop()
                               }
-                         }])
+                         ],
+                         { cancelable: false }
+                    )
                }
-          } catch (err) {
-               Alert.alert("Une erreur est Survenue",
-                    "Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
-                    [{
-                         text: "Ok", onPress: () => {
-                              this.props.navigation.pop();
-                         }
-                    }])
-          }
-     }
-
-     treatPosition(position) {
-          const myLastPosition = this.state.myPosition;
-          const myPosition = position.coords;
-
-          if (!isEqual(myPosition, myLastPosition)) {
-               getPositionInformation(myPosition).then((response) => {
-                    if (response.results !== undefined) {
-
-                         if (response.results !== undefined) {
-                              if (response.results.length > 0) {
-
-                                   let results = response.results;
-                                   let shortcountry;
-                                   let mcountry;
-                                   for (let i = 0; i < results[0].address_components.length; i++) {
-                                        for (let j = 0; j < results[0].address_components[i].types.length; j++) {
-                                             if (results[0].address_components[i].types[j] === "country") {
-                                                  mcountry = results[0].address_components[i];
-                                                  shortcountry = mcountry.short_name;
-                                                  this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
-                                             }
-                                        }
-                                   }
-                                   if (this.state.paysDestination.length > 0) {
-
-                                        var found = false;
-                                        for (let country of this.state.paysDestination) {
-                                             if (country.code_country === shortcountry) {
-                                                  found = true;
-                                                  this.setState({
-                                                       modalVisible: false, indicatifCountry: country.code_dial,
-                                                       paysDestinationSelect: country.name
-                                                  });
-                                                  if (this.state.hasLoadActivePayCountryNetworkList)
-                                                       this.props.getPayCountryNetworkAction(country.id);
-                                             }
-                                        }
-                                        if (!found) {
-                                             Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{ text: "OK" }]);
-
-                                        }
-                                   }
-
-                              }
-
-                         } else {
-                              Alert.alert(
-                                   I18n.t("UNABLE_TO_CONNECT_TITLE"),
-                                   I18n.t('TEXT_NETWORK_UNABLE')
-                                   ,
-                                   [
-                                        { text: I18n.t("NO"), onPress: () => { this.props.navigation.pop() } },
-                                        {
-                                             text: I18n.t("YES"), onPress: () => {
-                                                  this.treatPosition(myPosition)
-                                             }
-                                        }
-
-                                   ],
-                                   { cancelable: false }
-                              )
-                         }
-                    }
-               }).catch((e) => {
-                    console.log("CATCH", e);
-                    this.showErrorDialog();
-               });
-               this.setState({ myPosition: myPosition });
           }
 
      }
@@ -403,6 +318,105 @@ class EnvoieWalletToWalletUser extends Component {
                };
      }
 
+     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: 1,
+                              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,
+                              type_document_destinataire: this.state.identityPiecesName,
+                              id_document_destinataire: this.state.numeroIdentite,
+                              network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToWalletReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
      onSubmitSendWalletToWallet = () => {
           const { identityPiecesName, paysDestinationSelect, numeroIdentite, walletActifSelect, typeIdDestinataireSelect, numeroTelephoneOrWalletCode, montant, password } = this.state;
 
@@ -426,19 +440,14 @@ class EnvoieWalletToWalletUser extends Component {
                this.passwordAnim.shake(800);
           else {
 
-               this.props.envoieUserWalletToWalletAction({
+               this.props.getCommissionUserWalletToWalletAction({
                     type: 1,
                     id_wallet_user: this.state.wallet.id,
-                    id_network: this.state.wallet.idNetwork,
-                    init_country: (this.state.paysDestination.filter(element => element.code_country === this.state.shortCountry))[0].id,
                     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,
-                    id_document_destinataire: this.state.numeroIdentite,
-                    network_destinataire: (this.state.walletActifs.filter(element => element.name === this.state.walletActifSelect))[0].id,
                     montant: this.state.montant,
-                    password: this.state.password
                });
+
           }
           this.setState({
                triggerSubmitClick: true
@@ -449,7 +458,7 @@ class EnvoieWalletToWalletUser extends Component {
      renderLoader = () => {
           return (
                <ProgressDialog
-                    visible={this.state.modalVisible || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode}
+                    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')}
                />
@@ -458,12 +467,19 @@ class EnvoieWalletToWalletUser extends Component {
 
      render() {
           console.log("STATE", this.state);
+          const { resultEnvoieWalletToWalletGetCommission } = this.props;
           return (
                <>
-                    {(this.state.modalVisible || this.props.loadingEnvoieWalletToWallet || this.props.loadingCountryByDialCode || this.props.loadingActiveCountryList || this.props.loadingCountryByDialCode) && this.renderLoader()}
+                    {(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.triggerSubmitClick && this.renderEnvoieWalletToWalletResponse()}
+                    {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_WALLET')}</Text>
@@ -489,8 +505,9 @@ class EnvoieWalletToWalletUser extends Component {
 
                                         let countrySelect = data.filter(element => element.name === value);
                                         this.setState({ paysDestinationSelect: value, hasLoadActivePayCountryNetworkList: true }, () => {
-                                             this.props.getPayCountryNetworkAction(countrySelect[0].id);
+                                             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 }}
@@ -514,50 +531,19 @@ class EnvoieWalletToWalletUser extends Component {
                                    useNativeDriver={true}
                                    value={isNil(this.state.walletActifSelect) ? '' : this.state.walletActifSelect}
                                    onChangeText={(value, index, data) => {
-                                        this.setState({ walletActifSelect: value });
+                                        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.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 value.name }}
-                                   labelExtractor={(value) => { return 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.typeIdDestinataireAnim = comp }}
                               style={{
                                    width: responsiveWidth(90),
@@ -598,6 +584,43 @@ class EnvoieWalletToWalletUser extends Component {
                               </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 value.name }}
+                                   labelExtractor={(value) => { return 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')}
@@ -611,6 +634,25 @@ class EnvoieWalletToWalletUser extends Component {
                                    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 }}>
@@ -655,6 +697,10 @@ const maptStateToProps = state => ({
      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({
@@ -668,7 +714,10 @@ const mapDispatchToProps = dispatch => bindActionCreators({
      getActiveCountryReset,
 
      envoieUserWalletToWalletAction,
-     envoieUserWalletToWalletReset
+     envoieUserWalletToWalletReset,
+
+     getCommissionUserWalletToWalletAction,
+     getCommissionUserWalletToWalletReset
 
 }, dispatch);
 
@@ -691,6 +740,10 @@ const styles = StyleSheet.create({
           textAlign: 'center',
           margin: 20,
      },
+     blockView: {
+          paddingVertical: 10,
+          borderBottomWidth: 1
+     },
      subbigtitle: {
           color: 'white',
           fontSize: 17,

screens/wallet/user/LinkCard.js

@@ -0,0 +1,269 @@
+import 'moment/locale/en-au';
+import 'moment/locale/en-ca';
+import 'moment/locale/en-ie';
+import 'moment/locale/en-il';
+import 'moment/locale/en-nz';
+import 'moment/locale/es-us';
+import 'moment/locale/fr';
+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 I18n from 'react-native-i18n';
+import { Appbar, Provider } from 'react-native-paper';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import CustomButton from '../../../components/CustomButton';
+import OutlineTextInput from '../../../components/OutlineTextInput';
+import { Color } from '../../../config/Color';
+import { linkCardReset, linkCardAction } from '../../../webservice/WalletApi';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import { readUser } from '../../../webservice/AuthApi';
+//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
+let moment = require('moment-timezone');
+
+const CONTAINER_WIDTH = Dimensions.get("window").width;
+
+class LinkCard extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.accentLightColor,
+          statusBarColor: Color.accentColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF',
+     };
+
+     static navigationOptions = ({ navigation }) => {
+          return {
+               header: null,
+               headerMode: 'none',
+               headerTitle: null,
+               activeColor: '#f0edf6',
+               inactiveColor: '#3e2465',
+          };
+     }
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               numCarte: 0,
+               cvv: 0,
+               expiration_date: '',
+               creditCardInput: {},
+               displayCardError: false,
+               isSubmitClick: false,
+               user: null
+          };
+          this.props.linkCardReset();
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loading}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     renderDialogResponse = () => {
+          const { result, error } = this.props;
+
+          if (error !== null) {
+               if (typeof error.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         error.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.linkCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (result !== null) {
+               if (result.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS"),
+                         result.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.navigation.pop();
+                                        this.props.linkCardReset();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     onCreditCardChange = (form) => {
+          this.setState({
+               creditCardInput: form
+          });
+     }
+
+     isCreditCardValid = () => {
+          const { creditCardInput } = this.state;
+          const errorMessage = [];
+
+          if (typeof creditCardInput.status !== 'undefined') {
+
+               if (creditCardInput.status.cvc === 'incomplete')
+                    errorMessage.push(I18n.t('CVC_CARD_ERROR'));
+               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;
+     }
+
+
+     onSubmit = () => {
+          const { creditCardInput } = this.state;
+
+          if (creditCardInput.valid) {
+
+               this.setState({
+                    numCarte: parseInt((creditCardInput.values.number).replace(/\s/g, '')),
+                    expiration_date: creditCardInput.values.expiry,
+               }, () => {
+                    this.props.linkCardAction({
+                         numero_carte: this.state.numCarte,
+                         expiration_date: this.state.expiration_date
+                    }, this.state.user.id);
+               });
+          }
+          else if (!creditCardInput.valid) {
+               this.setState({
+                    displayCardError: true
+               });
+          }
+
+          this.setState({ isSubmitClick: true });
+     }
+
+     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={I18n.t('LINK_CARD')}
+                              />
+                         </Appbar.Header>
+                         <View style={[styles.container]}>
+
+                              {this.renderLoader()}
+                              {this.state.isSubmitClick && this.renderDialogResponse()}
+                              <ScrollView style={{ padding: 20 }}>
+
+                                   <View style={{ marginTop: 10 }}>
+                                        <CreditCardInput
+                                             validColor={this.state.creditCardInput.valid ? 'green' : ''}
+                                             invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
+                                             onChange={this.onCreditCardChange}
+                                             requiresCVC={false}
+                                             labels={{
+                                                  number: I18n.t('CARD_NUMBER_LABEL'),
+                                                  expiry: I18n.t('CARD_EXPIRY_LABEL')
+                                             }} />
+                                        {
+                                             (this.state.displayCardError) &&
+                                             this.isCreditCardValid().map((item) => (
+                                                  <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
+                                             ))
+                                        }
+                                   </View>
+
+                                   <View style={{ marginTop: 20, marginLeft: 10, marginRight: 10 }}>
+                                        <CustomButton loading={false} outline onPress={() => this.onSubmit()}>
+                                             {I18n.t('VALIDATE')}
+                                        </CustomButton>
+                                   </View>
+                              </ScrollView>
+                         </View>
+                    </View>
+               </Provider>
+          )
+     }
+
+}
+
+const mapStateToProps = state => ({
+     loading: state.linkCardReduder.loading,
+     result: state.linkCardReduder.result,
+     error: state.linkCardReduder.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+     linkCardAction,
+     linkCardReset
+}, dispatch);
+
+export default connect(mapStateToProps, mapDispatchToProps)(LinkCard);
+
+const styles = StyleSheet.create({
+     container: {
+          flex: 1,
+          backgroundColor: Color.containerBackgroundColor
+     },
+     checkDefault: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          borderBottomWidth: 1,
+          paddingVertical: 15,
+          marginTop: 10
+     },
+     contentButtonBottom: {
+          borderTopWidth: 1,
+          paddingVertical: 10,
+          paddingHorizontal: 20,
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+     },
+     blockView: {
+          paddingVertical: 10,
+          borderBottomWidth: 1
+     },
+     lottie: {
+          width: 248,
+          height: 248
+     },
+});

screens/wallet/user/RetraitCarteVersCashUser.js

@@ -0,0 +1,469 @@
+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 Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import thousands from 'thousands';
+import { Color } from '../../../config/Color';
+import { FontWeight, Typography } from '../../../config/typography';
+import { store } from "../../../redux/store";
+import { IlinkEmitter } from '../../../utils/events';
+import { readUser } from '../../../webservice/AuthApi';
+import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
+import { isNormalInteger } from '../../../utils/UtilsFunction';
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+
+class RetraitCarteVersCashUser extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('WITHDRAWAL_CARD_TO_CASH'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('WITHDRAWAL_CARD_TO_CASH')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               montant: null,
+               password: null,
+               codeCVV: null,
+               loading: false,
+               user: null,
+               triggerSubmitClick: false,
+               isSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
+          };
+
+          this.props.envoieUserWalletToCardReset();
+          this.props.getCommissionUserWalletToCardReset();
+
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     componentWillReceiveProps(nextProps) {
+
+          console.log('PROPS', nextProps)
+
+          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCardGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCardGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
+     }
+
+     renderEnvoieWalletToWalletResponse = () => {
+
+          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;
+
+          if (errorEnvoieWalletToCard !== null) {
+               if (typeof errorEnvoieWalletToCard.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_TRANSFER"),
+                         errorEnvoieWalletToCard.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCard !== null) {
+               if (resultEnvoieWalletToCard.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCard.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     renderDialogGetCommissionResponse = () => {
+
+          const { errorEnvoieWalletToCardGetCommission } = this.props;
+
+          if (errorEnvoieWalletToCardGetCommission !== null) {
+               if (typeof errorEnvoieWalletToCardGetCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorEnvoieWalletToCardGetCommission.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.getCommissionUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+     }
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WITHDRAWAL_WALLET_TO_CASH') })
+          this.forceUpdate()
+     }
+
+     modalConfirmTransaction = (data) => {
+
+          const frais = data.response.frais;
+          const montant_net = data.response.montant_net;
+
+          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('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(frais, ' ')} ${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]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
+                              type: 11,
+                              cvv: this.state.codeCVV,
+                              id_wallet_user: this.state.wallet.id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCardReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
+     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
+               return {
+                    errorMessage: '',
+                    isValid: true
+               };
+     }
+
+     onSubmitSendWalletToCard = () => {
+          const { codeCVV, montant, password } = this.state;
+
+          if (this.ckeckIfFieldIsOK(codeCVV) && codeCVV === 3)
+               this.codeCVVAnim.shake(800);
+          else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+               this.montantAnim.shake(800);
+          }
+          else if (this.ckeckIfFieldIsOK(password))
+               this.passwordAnim.shake(800);
+          else {
+
+               this.props.getCommissionUserWalletToCardAction({
+                    type: 10,
+                    id_wallet_user: this.state.wallet.id,
+                    montant: this.state.montant,
+               });
+
+          }
+          this.setState({
+               triggerSubmitClick: true
+          });
+     }
+
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     render() {
+          const { resultEnvoieWalletToCardGetCommission } = this.props;
+          return (
+               <>
+                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) && this.renderLoader()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCardGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
+                    }
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_TO_CASH_DESCRIPTION')}</Text>
+
+                         <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>
+
+                         <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>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              onPress={() => { this.onSubmitSendWalletToCard() }}>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const maptStateToProps = state => ({
+
+     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
+     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
+     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
+
+     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
+     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
+     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+     envoieUserWalletToCardAction,
+     envoieUserWalletToCardReset,
+
+     getCommissionUserWalletToCardAction,
+     getCommissionUserWalletToCardReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(RetraitCarteVersCashUser);
+
+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,
+     }
+});

screens/wallet/user/RetraitCarteVersWalletUser.js

@@ -0,0 +1,469 @@
+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 Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import thousands from 'thousands';
+import { Color } from '../../../config/Color';
+import { FontWeight, Typography } from '../../../config/typography';
+import { store } from "../../../redux/store";
+import { IlinkEmitter } from '../../../utils/events';
+import { readUser } from '../../../webservice/AuthApi';
+import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
+import { isNormalInteger } from '../../../utils/UtilsFunction';
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+
+class RetraitCarteVersWalletUser extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('WITHDRAWAL_CARD_TO_WALLET'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('WITHDRAWAL_CARD_TO_WALLET')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               montant: null,
+               password: null,
+               codeCVV: null,
+               loading: false,
+               user: null,
+               triggerSubmitClick: false,
+               isSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
+          };
+
+          this.props.envoieUserWalletToCardReset();
+          this.props.getCommissionUserWalletToCardReset();
+
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     componentWillReceiveProps(nextProps) {
+
+          console.log('PROPS', nextProps)
+
+          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCardGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCardGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
+     }
+
+     renderEnvoieWalletToWalletResponse = () => {
+
+          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;
+
+          if (errorEnvoieWalletToCard !== null) {
+               if (typeof errorEnvoieWalletToCard.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_TRANSFER"),
+                         errorEnvoieWalletToCard.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCard !== null) {
+               if (resultEnvoieWalletToCard.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCard.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     renderDialogGetCommissionResponse = () => {
+
+          const { errorEnvoieWalletToCardGetCommission } = this.props;
+
+          if (errorEnvoieWalletToCardGetCommission !== null) {
+               if (typeof errorEnvoieWalletToCardGetCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorEnvoieWalletToCardGetCommission.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.getCommissionUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+     }
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WITHDRAWAL_WALLET_TO_CASH') })
+          this.forceUpdate()
+     }
+
+     modalConfirmTransaction = (data) => {
+
+          const frais = data.response.frais;
+          const montant_net = data.response.montant_net;
+
+          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('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(frais, ' ')} ${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]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
+                              type: 10,
+                              cvv: this.state.codeCVV,
+                              id_wallet_user: this.state.wallet.id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCardReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
+     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
+               return {
+                    errorMessage: '',
+                    isValid: true
+               };
+     }
+
+     onSubmitSendWalletToCard = () => {
+          const { codeCVV, montant, password } = this.state;
+
+          if (this.ckeckIfFieldIsOK(codeCVV) && codeCVV === 3)
+               this.codeCVVAnim.shake(800);
+          else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+               this.montantAnim.shake(800);
+          }
+          else if (this.ckeckIfFieldIsOK(password))
+               this.passwordAnim.shake(800);
+          else {
+
+               this.props.getCommissionUserWalletToCardAction({
+                    type: 10,
+                    id_wallet_user: this.state.wallet.id,
+                    montant: this.state.montant,
+               });
+
+          }
+          this.setState({
+               triggerSubmitClick: true
+          });
+     }
+
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     render() {
+          const { resultEnvoieWalletToCardGetCommission } = this.props;
+          return (
+               <>
+                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) && this.renderLoader()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCardGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
+                    }
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_CARD_TO_WALLET_DESCRIPTION')}</Text>
+
+                         <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>
+
+                         <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>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              onPress={() => { this.onSubmitSendWalletToCard() }}>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const maptStateToProps = state => ({
+
+     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
+     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
+     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
+
+     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
+     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
+     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+     envoieUserWalletToCardAction,
+     envoieUserWalletToCardReset,
+
+     getCommissionUserWalletToCardAction,
+     getCommissionUserWalletToCardReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(RetraitCarteVersWalletUser);
+
+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,
+     }
+});

screens/wallet/user/RetraitWalletVersCashUser.js

@@ -0,0 +1,466 @@
+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 Dialog from "react-native-dialog";
+import I18n from 'react-native-i18n';
+import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
+import { ProgressDialog } from 'react-native-simple-dialogs';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { Fumi } from 'react-native-textinput-effects';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import thousands from 'thousands';
+import { Color } from '../../../config/Color';
+import { FontWeight, Typography } from '../../../config/typography';
+import { store } from "../../../redux/store";
+import { IlinkEmitter } from '../../../utils/events';
+import { readUser } from '../../../webservice/AuthApi';
+import { envoieUserWalletToCardAction, envoieUserWalletToCardReset, getCommissionUserWalletToCardAction, getCommissionUserWalletToCardReset } from '../../../webservice/EnvoieUserApi';
+import { isNormalInteger } from '../../../utils/UtilsFunction';
+let theme = require('../../../utils/theme.json');
+let route = require('../../../route.json');
+
+
+class RetraitWalletVersCashUser extends Component {
+
+     static navigatorStyle = {
+          navBarBackgroundColor: Color.primaryColor,
+          statusBarColor: Color.primaryDarkColor,
+          navBarTextColor: '#FFFFFF',
+          navBarButtonColor: '#FFFFFF'
+
+     };
+
+     static navigationOptions = () => {
+          return {
+               drawerLabel: () => null,
+               headerTitle: I18n.t('WITHDRAWAL_WALLET_TO_CASH'),
+               headerTintColor: 'white',
+               headerStyle: {
+                    backgroundColor: Color.primaryColor,
+                    marginTop: 0,
+                    color: 'white'
+               },
+               headerTitleStyle: {
+                    color: "white"
+               },
+               title: I18n.t('WITHDRAWAL_WALLET_TO_CASH')
+          }
+     };
+
+     constructor(props) {
+          super(props);
+          this.state = {
+               montant: null,
+               password: null,
+               codeCVV: null,
+               loading: false,
+               user: null,
+               triggerSubmitClick: false,
+               isSubmitClick: false,
+               isDataSubmit: false,
+               isModalConfirmVisible: false,
+               wallet: store.getState().walletDetailReducer.result.response
+          };
+
+          this.props.envoieUserWalletToCardReset();
+          this.props.getCommissionUserWalletToCardReset();
+
+     }
+
+     componentDidMount() {
+
+          readUser().then((user) => {
+               if (user) {
+                    if (user !== undefined) {
+                         this.setState({ user });
+                    }
+               }
+          });
+
+     }
+
+     componentWillReceiveProps(nextProps) {
+
+          console.log('PROPS', nextProps)
+
+          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {
+
+               if (typeof nextProps.resultEnvoieWalletToCardGetCommission.response !== 'undefined') {
+
+                    if (!nextProps.loadingEnvoieWalletToCardGetCommission)
+                         this.setState({
+                              isModalConfirmVisible: true
+                         });
+               }
+          }
+     }
+
+     renderEnvoieWalletToWalletResponse = () => {
+
+          const { resultEnvoieWalletToCard, errorEnvoieWalletToCard } = this.props;
+
+          if (errorEnvoieWalletToCard !== null) {
+               if (typeof errorEnvoieWalletToCard.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_TRANSFER"),
+                         errorEnvoieWalletToCard.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+          if (resultEnvoieWalletToCard !== null) {
+               if (resultEnvoieWalletToCard.response !== null) {
+                    Alert.alert(
+                         I18n.t("SUCCESS_TRANSFER"),
+                         resultEnvoieWalletToCard.response,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.envoieUserWalletToCardReset();
+                                        IlinkEmitter.emit("refreshWallet");
+                                        this.props.navigation.pop();
+                                   }
+                              }
+
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+     }
+
+     renderDialogGetCommissionResponse = () => {
+
+          const { errorEnvoieWalletToCardGetCommission } = this.props;
+
+          if (errorEnvoieWalletToCardGetCommission !== null) {
+               if (typeof errorEnvoieWalletToCardGetCommission.data !== 'undefined') {
+                    Alert.alert(
+                         I18n.t("ERROR_LABLE"),
+                         errorEnvoieWalletToCardGetCommission.data.error,
+                         [
+                              {
+                                   text: I18n.t("OK"), onPress: () => {
+                                        this.props.getCommissionUserWalletToCardReset();
+                                   }
+                              }
+                         ],
+                         { cancelable: false }
+                    )
+               }
+          }
+
+     }
+
+     updateLangue() {
+          this.props.navigation.setParams({ name: I18n.t('WITHDRAWAL_WALLET_TO_CASH') })
+          this.forceUpdate()
+     }
+
+     modalConfirmTransaction = (data) => {
+
+          const frais = data.response.frais;
+          const montant_net = data.response.montant_net;
+
+          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('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(frais, ' ')} ${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]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
+                              type: 9,
+                              id_wallet_user: this.state.wallet.id,
+                              montant: this.state.montant,
+                              password: this.state.password
+                         });
+                         this.props.getCommissionUserWalletToCardReset();
+                    }} />
+
+               </Dialog.Container>
+
+          );
+
+     }
+
+     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
+               return {
+                    errorMessage: '',
+                    isValid: true
+               };
+     }
+
+     onSubmitSendWalletToCard = () => {
+          const { codeCVV, montant, password } = this.state;
+
+          if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
+               this.montantAnim.shake(800);
+          }
+          else if (this.ckeckIfFieldIsOK(password))
+               this.passwordAnim.shake(800);
+          else {
+
+               this.props.getCommissionUserWalletToCardAction({
+                    type: 9,
+                    id_wallet_user: this.state.wallet.id,
+                    montant: this.state.montant,
+               });
+
+          }
+          this.setState({
+               triggerSubmitClick: true
+          });
+     }
+
+
+     renderLoader = () => {
+          return (
+               <ProgressDialog
+                    visible={this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission}
+                    title={I18n.t('LOADING')}
+                    message={I18n.t('LOADING_INFO')}
+               />
+          )
+     }
+
+     render() {
+          const { resultEnvoieWalletToCardGetCommission } = this.props;
+          return (
+               <>
+                    {(this.props.loadingEnvoieWalletToCard || this.props.loadingEnvoieWalletToCardGetCommission) && this.renderLoader()}
+                    {this.state.isDataSubmit && this.renderEnvoieWalletToWalletResponse()}
+                    {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
+                    {
+                         (resultEnvoieWalletToCardGetCommission !== null) &&
+                         (typeof resultEnvoieWalletToCardGetCommission.response !== 'undefined') &&
+                         this.modalConfirmTransaction(resultEnvoieWalletToCardGetCommission)
+                    }
+                    <ScrollView style={styles.container}>
+
+                         <Text style={styles.subbigtitle}>{I18n.t('WITHDRAWAL_WALLET_TO_CASH_DESCRIPTION')}</Text>
+
+                         {/*                          <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> */}
+
+                         <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>
+
+                         <Button style={styles.btnvalide}
+                              textStyle={styles.textbtnvalide}
+                              onPress={() => { this.onSubmitSendWalletToCard() }}>
+                              {I18n.t('SUBMIT_LABEL')}</Button>
+                    </ScrollView>
+               </>
+          )
+     }
+}
+
+const maptStateToProps = state => ({
+
+     loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
+     resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
+     errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,
+
+     loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
+     resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
+     errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({
+
+     envoieUserWalletToCardAction,
+     envoieUserWalletToCardReset,
+
+     getCommissionUserWalletToCardAction,
+     getCommissionUserWalletToCardReset
+
+}, dispatch);
+
+export default connect(maptStateToProps, mapDispatchToProps)(RetraitWalletVersCashUser);
+
+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,
+     }
+});

utils/UtilsFunction.js

@@ -183,7 +183,7 @@ export const transactionHistoryUser = () => {
 
 export const optionDepotScreen = {
      type: 'DEPOT',
-     title: I18n.t('DEPOSIT'),
+     title: I18n.t('ENVOIE_ARGENT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
           {
@@ -211,7 +211,7 @@ export const optionDepotScreen = {
 
 export const optionRetraitScreen = {
      type: 'RETRAIT',
-     title: I18n.t('WITHDRAWAL'),
+     title: I18n.t('RETRAIT_ARGENT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
           {
@@ -222,23 +222,66 @@ export const optionRetraitScreen = {
      ]
 }
 
+export const optionWalletToBank = {
+     title: I18n.t('DEPOSIT_TO_BANK'),
+     subTitle: I18n.t('CHOOSE_OPERATOR'),
+     options: [
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.envoieWalletToBankUser,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 1',
+          },
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.envoieWalletToBankUser,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 2',
+          },
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.envoieWalletToBankUser,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 3',
+          },
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.envoieWalletToBankUser,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 4',
+          },
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.envoieWalletToBankUser,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 5',
+          },
+          {
+               type: 'WALLET_TO_BANK_USER',
+               screen: route.paiementFacture,
+               icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
+               title: 'Banque numéro 6',
+          },
+     ]
+}
+
 export const optionRetraitUserScreen = {
      type: 'RETRAIT_USER',
-     title: I18n.t('WITHDRAWAL'),
+     title: I18n.t('RETRAIT_ARGENT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
           {
-               screen: route.walletDepot,
+               screen: route.retraitWalletVersCashUser,
                icon: 'wallet',
                title: I18n.t('WITHDRAWAL_WALLET_TO_CASH'),
           },
           {
-               screen: route.walletRetrait,
+               screen: route.retraitCarteVersCashUser,
                icon: 'credit-card-refund',
                title: I18n.t('WITHDRAWAL_CARD_TO_CASH'),
           },
           {
-               screen: route.walletRetrait,
+               screen: route.retraitCarteVersWalletUser,
                icon: 'card',
                title: I18n.t('WITHDRAWAL_CARD_TO_WALLET'),
           },
@@ -247,7 +290,7 @@ export const optionRetraitUserScreen = {
 
 export const optionDepotUserScreen = {
      type: 'DEPOT_USER',
-     title: I18n.t('DEPOSIT'),
+     title: I18n.t('ENVOIE_ARGENT'),
      subTitle: I18n.t('CHOOSE_OPTION'),
      options: [
           {
@@ -261,14 +304,16 @@ export const optionDepotUserScreen = {
                title: I18n.t('DEPOSIT_TO_CASH'),
           },
           {
-               screen: route.walletDepot,
+               screen: route.envoieWalletToCardUser,
                icon: 'credit-card',
                title: I18n.t('DEPOSIT_TO_CARD'),
           },
           {
-               screen: route.walletDepot,
+               type: 'WALLET_TO_BANK',
+               screen: route.operateurOptionSelect,
                icon: 'bank-transfer-in',
                title: I18n.t('DEPOSIT_TO_BANK'),
+               subScreenOption: optionWalletToBank
           },
      ]
 }
@@ -291,7 +336,6 @@ export const optionIdentificationScreen = {
      ]
 }
 
-
 export const optionPaiementEauElectricite = {
      title: I18n.t('PAIEMENT_FACTURE'),
      subTitle: I18n.t('CHOOSE_OPERATOR'),

utils/i18n/en.json

@@ -45,6 +45,8 @@
   "SUCCESS_TRANSFER": "Transfer done",
   "WALLET_TO_WALLET_SUCCESS_TRANSFER": "Wallet to wallet transfer successfully completed",
   "DEPOSIT": "Deposit",
+  "ENVOIE_ARGENT": "Send money",
+  "RETRAIT_ARGENT": "Receive money",
   "CONFIRM_DEPOSIT": "Confirm deposit",
   "CONFIRM_WITHDRAWAL": "Confirm withdrawal",
   "CHANGE_SOURCE_CARD": "Change the type of entry number",
@@ -66,23 +68,39 @@
   "AMOUNT_LABEL_DESCRIPTION": "Please enter the amount",
   "DESTINATAIRE": "Recipient",
   "WITHDRAWAL": "Withdrawal",
+  "LINK_CARD": "Link my card",
   "WITHDRAWAL_IN_CASH": "Withdrawal in cash",
   "WITHDRAWAL_WALLET_TO_CASH": "Withdrawal wallet to cash",
+  "WITHDRAWAL_WALLET_TO_CASH_DESCRIPTION": "Withdrawal money from wallet to cash",
   "WITHDRAWAL_CARD_TO_WALLET": "Withdrawal card to wallet",
+  "WITHDRAWAL_CARD_TO_WALLET_DESCRIPTION": "Withdrawal money from your card to your wallet",
   "WITHDRAWAL_CARD_TO_CASH": "Withdrawal card to cash",
+  "WITHDRAWAL_CARD_TO_CASH_DESCRIPTION": "Withdrawal money from card to cash",
   "DEPOSIT_CASH_TO_WALLET": "Cash to wallet",
   "DEPOSIT_CASH_TO_OTHER_WALLET": "Cash to another wallet",
   "DEPOSIT_CASH_TO_VISA": "Cash to visa card",
   "DEPOSIT_CASH_TO_BANK": "Cash to bank",
   "DEPOSIT_WALLET_TO_WALLET": "Wallet to wallet",
   "ENVOIE_WALLET_TO_WALLET": "Send Wallet to wallet",
+  "DEPOSIT_WALLET_TO_CASH": "Your Wallet to cash",
+  "DEPOSIT_WALLET_TO_CARD": "Your Wallet to card",
+  "ENVOIE_WALLET_TO_CARD": "Send Wallet to card",
+  "ENVOIE_WALLET_TO_CASH": "Send Wallet to cash",
+  "DEPOSIT_WALLET_TO_BANK": "Your Wallet to bank",
+  "ENVOIE_WALLET_TO_BANK": "Send Wallet to bank",
+  "TRANSACTION_DETAIL": "Transaction detail",
+  "CODE_IBAN": "IBAN Code",
+  "FEES_AND_TAXES": "Fees and taxes",
+  "INIT_COUNTRY": "Departure countryt",
+  "FINAL_COUNTRY": "Arrival country",
+  "NET_AMOUNT": "Net amount",
   "CODE_WALLET": "Wallet Code",
   "ACTIVE_WALLET": "Active wallet",
   "TYPE_IDENTIFIANT": "ID type",
   "PAYS_DESTINATION": "Destination country",
-  "DEPOSIT_TO_CASH": "Wallet to cash",
+  "DEPOSIT_TO_CASH": "Your Wallet to cash",
-  "DEPOSIT_TO_CARD": "Wallet to card",
+  "DEPOSIT_TO_CARD": "Your Wallet to card",
-  "DEPOSIT_TO_BANK": "Wallet to bank",
+  "DEPOSIT_TO_BANK": "Your Wallet to bank",
   "NANO_CREDIT": "Nano credit",
   "NANO_CREDIT_DESCRIPTION": "Nano credit description",
   "NANO_SANTE": "Nano health",
@@ -223,6 +241,7 @@
   "CONNECT_USER": "Connect",
   "PASSWORD": "Password",
   "CONFIRM_PASSWORD": "Confirm the password",
+  "PLEASE_ENTER_THE_PASSWORD": "Please enter the password",
   "PASSWORD_MODIFY": "Change your password",
   "OLD_PASSWORD": "Old password",
   "NEW_PASSWORD": "New password",
@@ -315,6 +334,7 @@
   "ALREADY_VALIDATED": "The identification of this client has already been validated",
   "IDENTIFICATION": " Identification",
   "CREATION_IDENTIFICATION": "Creation",
+  "CREATION_IDENTIFICATION_CLIENT": "Identify me",
   "CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
   "CREATION_IDENTIFICATION_DESCRIPTION_SUBSCREEN": "Enter the identity of a client",
   "VALIDATE_IDENTIFICATION": "Validation",

utils/i18n/fr.json

@@ -43,6 +43,8 @@
   "MY_ACCOUNT": "Mon compte",
   "WALLET": "Wallet",
   "DEPOSIT": "Dépôt",
+  "ENVOIE_ARGENT": "Envoyer de l'argent",
+  "RETRAIT_ARGENT": "Retirer de l'argent",
   "CONFIRM_DEPOSIT": "Confirmer le dépôt",
   "CONFIRM_WITHDRAWAL": "Confirmer le retrait",
   "ENTER_VALID_AMOUNT": "Entrer un montant valide",
@@ -71,23 +73,39 @@
   "SUCCESS_TRANSFER": "Transfert effectué",
   "WALLET_TO_WALLET_SUCCESS_TRANSFER": "Transfert de wallet à wallet effectué avec succès",
   "WITHDRAWAL": "Retrait",
+  "LINK_CARD": "Lier ma carte",
   "WITHDRAWAL_IN_CASH": "Retrait en cash",
-  "WITHDRAWAL_WALLET_TO_CASH": "Retrait wallet vers cash",
+  "WITHDRAWAL_WALLET_TO_CASH": "Retrait de votre wallet vers cash",
-  "WITHDRAWAL_CARD_TO_WALLET": "Retrait carte vers wallet",
+  "WITHDRAWAL_WALLET_TO_CASH_DESCRIPTION": "Retirer de l'argent de votre Wallet vers cash",
-  "WITHDRAWAL_CARD_TO_CASH": "Retrait carte vers cash",
+  "WITHDRAWAL_CARD_TO_WALLET": "Retrait de votre carte vers wallet",
+  "WITHDRAWAL_CARD_TO_WALLET_DESCRIPTION": "Retrait d'argent de votre carte vers wallet",
+  "WITHDRAWAL_CARD_TO_CASH": "Retrait de votre carte vers cash",
+  "WITHDRAWAL_CARD_TO_CASH_DESCRIPTION": "Retrait de l'argent de votre carte vers cash",
   "DEPOSIT_CASH_TO_WALLET": "Cash vers wallet",
   "DEPOSIT_CASH_TO_OTHER_WALLET": "Cash vers autre wallet",
   "DEPOSIT_CASH_TO_VISA": "Cash vers carte visa",
   "DEPOSIT_CASH_TO_BANK": "Cash vers banque",
-  "DEPOSIT_WALLET_TO_WALLET": "Wallet vers wallet",
+  "DEPOSIT_WALLET_TO_WALLET": "Votre Wallet vers wallet",
   "ENVOIE_WALLET_TO_WALLET": "Envoie Wallet vers wallet",
+  "DEPOSIT_WALLET_TO_CASH": "Votre Wallet vers cash",
+  "ENVOIE_WALLET_TO_CASH": "Envoie Wallet vers cash",
+  "DEPOSIT_WALLET_TO_CARD": "Votre Wallet vers carte",
+  "ENVOIE_WALLET_TO_CARD": "Envoie Wallet vers carte",
+  "DEPOSIT_WALLET_TO_BANK": "Votre Wallet vers banque",
+  "ENVOIE_WALLET_TO_BANK": "Envoie Wallet vers banque",
+  "TRANSACTION_DETAIL": "Détail de la transaction",
+  "FEES_AND_TAXES": "Frais et taxes",
+  "CODE_IBAN": "Code IBAN",
+  "INIT_COUNTRY": "Pays de départ",
+  "FINAL_COUNTRY": "Pays d'arrivée",
+  "NET_AMOUNT": "Montant net",
   "CODE_WALLET": "Code Wallet",
   "TYPE_IDENTIFIANT": "Type d'identifiant",
   "PAYS_DESTINATION": "Pays destination",
   "ACTIVE_WALLET": "Wallet actif",
-  "DEPOSIT_TO_CASH": "Wallet vers cash",
+  "DEPOSIT_TO_CASH": "Votre Wallet vers cash",
-  "DEPOSIT_TO_CARD": "Wallet vers carte",
+  "DEPOSIT_TO_CARD": "Votre Wallet vers carte",
-  "DEPOSIT_TO_BANK": "Wallet vers banque",
+  "DEPOSIT_TO_BANK": "Votre Wallet vers banque",
   "NANO_CREDIT": "Nano crédit",
   "NANO_CREDIT_DESCRIPTION": "Nano crédit iLink",
   "NANO_SANTE": "Nano santé",
@@ -134,8 +152,8 @@
   "PRINT_MY_NETWORK": "Afficher mon reseau",
   "MY_GROUP_MAP": "Carte de mon groupe",
   "GROUP_MEMBERS": "Les membres du groupe",
-  "NAME": "Nom (s)",
+  "NAME": "Nom(s)",
-  "FIRSTNAME": "Prénom (s) ",
+  "FIRSTNAME": "Prénom(s) ",
   "AND": "et",
   "ADMIN": "Administrateur",
   "SUPER_ADMIN": "Super administrateur",
@@ -231,7 +249,8 @@
   "PASSWORD_MODIFY": "Modifiez votre mot de passe",
   "OLD_PASSWORD": "Ancien mot de passe",
   "NEW_PASSWORD": "Nouveau mot de passe",
-  "CONFIRM_NEW_PASSWORD": "Confirmerzle nouveau mot de passe",
+  "CONFIRM_NEW_PASSWORD": "Confirmerz le nouveau mot de passe",
+  "PLEASE_ENTER_THE_PASSWORD": "Veuillez renseigner le mot de passe",
   "MODIFY_AMOUNT": " Modifier le montant",
   "ENTER_NEW_AMOUNT_TO_SEND": " Entrer le nouveau montant à envoyer",
   "AMOUNT": "Montant",

webservice/CountryApi.js

@@ -42,7 +42,7 @@ export const getActiveCountryReset = () => {
      }
 }
 
-export const getPayCountryNetworkAction = (idCountryNetwork) => {
+export const getPayCountryNetworkAction = (data) => {
 
      const auth = store.getState().authKeyReducer;
      const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
@@ -51,8 +51,9 @@ export const getPayCountryNetworkAction = (idCountryNetwork) => {
           dispatch(fetchPayCountryNetworkPending());
 
           axios({
-               url: `${payCountryNetworkUrl}/${idCountryNetwork}`,
+               url: `${payCountryNetworkUrl}`,
-               method: 'GET',
+               method: 'POST',
+               data,
                headers: {
                     'Authorization': authKey,
                     'X-Localization': I18n.currentLocale()

webservice/EnvoieUserApi.js

@@ -2,8 +2,8 @@
 import axios from "axios";
 import I18n from 'react-native-i18n';
 import { store } from "../redux/store";
-import { envoieUserWalletToWallet } from "./IlinkConstants";
+import { envoieUserWalletToWallet, envoieCommissionUrl } from "./IlinkConstants";
-import { fetchEnvoieUserWalletToWalletPending, fetchEnvoieUserWalletToWalletSuccess, fetchEnvoieUserWalletToWalletError, fetchEnvoieUserWalletToWalletReset } from "../redux/actions/EnvoieUserType";
+import { fetchEnvoieUserWalletToWalletPending, fetchEnvoieUserWalletToWalletSuccess, fetchEnvoieUserWalletToWalletError, fetchEnvoieUserWalletToWalletReset, fetchEnvoieUserWalletToWalleGetCommissiontPending, fetchEnvoieUserWalletToWalleGetCommissiontReset, fetchEnvoieUserWalletToWalletGetCommissionSuccess, fetchEnvoieUserWalletToWalletGetCommissionError, fetchEnvoieUserWalletToCashPending, fetchEnvoieUserWalletToCashSuccess, fetchEnvoieUserWalletToCashError, fetchEnvoieUserWalletToCashReset, fetchEnvoieUserWalletToCashGetCommissiontPending, fetchEnvoieUserWalletToCashGetCommissiontReset, fetchEnvoieUserWalletToCashGetCommissionError, fetchEnvoieUserWalletToCashGetCommissionSuccess, fetchEnvoieUserWalletToCardPending, fetchEnvoieUserWalletToCardSuccess, fetchEnvoieUserWalletToCardError, fetchEnvoieUserWalletToCardReset, fetchEnvoieUserWalletToCardGetCommissiontPending, fetchEnvoieUserWalletToCardGetCommissionSuccess, fetchEnvoieUserWalletToCardGetCommissiontReset } from "../redux/actions/EnvoieUserType";
 
 export const envoieUserWalletToWalletAction = (data) => {
 
@@ -15,7 +15,7 @@ export const envoieUserWalletToWalletAction = (data) => {
 
           axios({
                url: `${envoieUserWalletToWallet}`,
-               method: 'GET',
+               method: 'POST',
                data,
                headers: {
                     'Authorization': authKey,
@@ -42,3 +42,202 @@ export const envoieUserWalletToWalletReset = () => {
           dispatch(fetchEnvoieUserWalletToWalletReset());
      }
 }
+
+export const getCommissionUserWalletToWalletAction = (data) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToWalleGetCommissiontPending());
+
+          axios({
+               url: `${envoieCommissionUrl}`,
+               method: 'POST',
+               data,
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchEnvoieUserWalletToWalletGetCommissionSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchEnvoieUserWalletToWalletGetCommissionError(error.response));
+                    else if (error.request)
+                         dispatch(fetchEnvoieUserWalletToWalletGetCommissionError(error.request))
+                    else
+                         dispatch(fetchEnvoieUserWalletToWalletGetCommissionError(error.message))
+               });
+     }
+}
+
+export const getCommissionUserWalletToWalletReset = () => {
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToWalleGetCommissiontReset());
+     }
+}
+
+
+/**
+ * -------------------------------------------------------
+ */
+
+export const envoieUserWalletToCashAction = (data) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCashPending());
+
+          axios({
+               url: `${envoieUserWalletToWallet}`,
+               method: 'POST',
+               data,
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchEnvoieUserWalletToCashSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchEnvoieUserWalletToCashError(error.response));
+                    else if (error.request)
+                         dispatch(fetchEnvoieUserWalletToCashError(error.request))
+                    else
+                         dispatch(fetchEnvoieUserWalletToCashError(error.message))
+               });
+     }
+}
+
+export const envoieUserWalletToCashReset = () => {
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCashReset());
+     }
+}
+
+export const getCommissionUserWalletToCashAction = (data) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCashGetCommissiontPending());
+
+          axios({
+               url: `${envoieCommissionUrl}`,
+               method: 'POST',
+               data,
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchEnvoieUserWalletToCashGetCommissionSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchEnvoieUserWalletToCashGetCommissionError(error.response));
+                    else if (error.request)
+                         dispatch(fetchEnvoieUserWalletToCashGetCommissionError(error.request))
+                    else
+                         dispatch(fetchEnvoieUserWalletToCashGetCommissionError(error.message))
+               });
+     }
+}
+
+export const getCommissionUserWalletToCashReset = () => {
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCashGetCommissiontReset());
+     }
+}
+
+/**
+ * -------------------------------------------------------
+ */
+
+export const envoieUserWalletToCardAction = (data) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCardPending());
+
+          axios({
+               url: `${envoieUserWalletToWallet}`,
+               method: 'POST',
+               data,
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchEnvoieUserWalletToCardSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchEnvoieUserWalletToCardError(error.response));
+                    else if (error.request)
+                         dispatch(fetchEnvoieUserWalletToCardError(error.request))
+                    else
+                         dispatch(fetchEnvoieUserWalletToCardError(error.message))
+               });
+     }
+}
+
+export const envoieUserWalletToCardReset = () => {
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCardReset());
+     }
+}
+
+export const getCommissionUserWalletToCardAction = (data) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCardGetCommissiontPending());
+
+          axios({
+               url: `${envoieCommissionUrl}`,
+               method: 'POST',
+               data,
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchEnvoieUserWalletToCardGetCommissionSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchEnvoieUserWalletToCardGetCommissionError(error.response));
+                    else if (error.request)
+                         dispatch(fetchEnvoieUserWalletToCardGetCommissionError(error.request))
+                    else
+                         dispatch(fetchEnvoieUserWalletToCardGetCommissionError(error.message))
+               });
+     }
+}
+
+export const getCommissionUserWalletToCardReset = () => {
+     return dispatch => {
+          dispatch(fetchEnvoieUserWalletToCardGetCommissiontReset());
+     }
+}

webservice/IlinkConstants.js

@@ -45,6 +45,9 @@ export const activeCountryUrl = testBaseUrl + '/walletService/countries';
 export const payCountryNetworkUrl = testBaseUrl + '/walletService/paying_networks';
 
 export const envoieUserWalletToWallet = testBaseUrl + '/walletService/transactions/ilink';
+export const envoieCommissionUrl = testBaseUrl + '/walletService/transactions/ilink/commission';
+
+export const linkCardUrl = testBaseUrl + '/walletService/identifications/rattach_card';
 
 export const authKeyUrl = testBaseUrl + '/oauth/token';
 export const videoUrl = "https://www.youtube.com/watch?v=wwGPDPsSLWY";

webservice/WalletApi.js

@@ -1,6 +1,11 @@
 
-import { walletActionUrl, commissionAmount, walletDetailUrl, walletUserSimpleActionUrl } from "./IlinkConstants";
+import { walletActionUrl, commissionAmount, walletDetailUrl, walletUserSimpleActionUrl, linkCardUrl } from "./IlinkConstants";
-import { fetchWalletListPending, fetchWalletListSuccess, fetchWalletListError, fetchWalletListReset, fetchWalletListDetailPending, fetchWalletListDetailSuccess, fetchWalletListDetailError, fetchWalletListDetailReset, fetchWalletGetCommissionPending, fetchWalletGetCommissionSuccess, fetchWalleGetCommissionError, walletGetCommissionReset } from "../redux/actions/WalletActions";
+import {
+     fetchWalletListPending, fetchWalletListSuccess, fetchWalletListError, fetchWalletListReset,
+     fetchWalletListDetailPending, fetchWalletListDetailSuccess, fetchWalletListDetailError, fetchWalletListDetailReset,
+     fetchWalletGetCommissionPending, fetchWalletGetCommissionSuccess, fetchWalleGetCommissionError, walletGetCommissionReset,
+     fetchLinkCardPending, fetchLinkCardSuccess, fetchLinkCardError, fetchLinkCardReset
+} from "../redux/actions/WalletActions";
 import { store } from "../redux/store";
 import axios from "axios";
 import I18n from 'react-native-i18n'
@@ -125,3 +130,40 @@ export const walletCommissionAmountReset = () => {
           dispatch(walletGetCommissionReset());
      }
 }
+
+export const linkCardAction = (data, userID) => {
+
+     const auth = store.getState().authKeyReducer;
+     const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
+
+     return dispatch => {
+          dispatch(fetchLinkCardPending());
+
+          axios({
+               url: `${linkCardUrl}/${userID}`,
+               data,
+               method: 'POST',
+               headers: {
+                    'Authorization': authKey,
+                    'X-Localization': I18n.currentLocale()
+               }
+          })
+               .then(response => {
+                    console.log(response);
+                    dispatch(fetchLinkCardSuccess(response));
+               })
+               .catch(error => {
+                    if (error.response)
+                         dispatch(fetchLinkCardError(error.response));
+                    else if (error.request)
+                         dispatch(fetchLinkCardError(error.request))
+                    else
+                         dispatch(fetchLinkCardError(error.message))
+               });
+     }
+}
+export const linkCardReset = () => {
+     return dispatch => {
+          dispatch(fetchLinkCardReset());
+     }
+}