From 27acb86dff932d617611d1973bc37f6d46010114 Mon Sep 17 00:00:00 2001 From: Brice Zele Date: Thu, 9 Jul 2020 20:15:11 +0100 Subject: [PATCH] Detail historique OK --- screens/wallet/WalletDetail.js | 210 ++++++++++++++++++---- screens/wallet/WalletDetailUser.js | 2 +- utils/UtilsFunction.js | 33 +++- utils/i18n/en.json | 5 + utils/i18n/fr.json | 5 + webservice/IlinkConstants.js | 1 + webservice/WalletTransactionHistoryApi.js | 6 +- 7 files changed, 225 insertions(+), 37 deletions(-) diff --git a/screens/wallet/WalletDetail.js b/screens/wallet/WalletDetail.js index 232f28fa..3e346170 100644 --- a/screens/wallet/WalletDetail.js +++ b/screens/wallet/WalletDetail.js @@ -20,10 +20,11 @@ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import Tag from '../../components/Tag'; import { Color } from '../../config/Color'; +import Dialog from "react-native-dialog"; import { Typography } from '../../config/typography'; import * as Utils from '../../utils/DeviceUtils'; import { IlinkEmitter } from "../../utils/events"; -import { cutString, isEmptyObject, isIlinkWorldWallet, optionDepotScreen, optionIdentificationScreen, optionPaiementFacture, optionRetraitScreen, transactionHistoryLabel } from '../../utils/UtilsFunction'; +import { cutString, cutStringWithoutDot, isEmptyObject, transactionHistoryIlinkLabel, isIlinkWorldWallet, optionDepotScreen, optionIdentificationScreen, optionPaiementFacture, optionRetraitScreen, transactionHistoryLabel } from '../../utils/UtilsFunction'; import { depositActionReset } from '../../webservice/DepositApi'; import { baseUrl } from '../../webservice/IlinkConstants'; import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi'; @@ -48,11 +49,13 @@ class WalletDetail extends Component { ], heightHeader: Utils.heightHeader(), isModalConfirmVisible: false, - wallet: null, + wallet: { currency_code: '' }, triggerTransferCommission: false, loading: false, isTriggerRefresh: false, - scrollHeaderY: 0 + scrollHeaderY: 0, + displayModalHistory: false, + historyItemDetail: null }; this.renderContent = null; @@ -81,7 +84,10 @@ class WalletDetail extends Component { } else { this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false); - this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id); + if (isIlinkWorldWallet(this.props.navigation.state.params.wallet.type)) + this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, true); + else + this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, false); } } /* @@ -237,7 +243,10 @@ class WalletDetail extends Component { if (!this.isHomeRootView) { const { wallet } = this.props.navigation.state.params; this.props.getWalletDetailActivated(wallet.id, false); - this.props.getWalletTransactionHistory(wallet.id); + if (isIlinkWorldWallet(wallet.type)) + this.props.getWalletTransactionHistory(wallet.id, true); + else + this.props.getWalletTransactionHistory(wallet.id, false); this.setState({ isTriggerRefresh: true }); @@ -445,7 +454,7 @@ class WalletDetail extends Component { {I18n.t('PRINCIPAL_ACCOUNT_TITLE')} - {thousands(wallet.balance_princ, ' ')} + {`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`} @@ -468,15 +477,136 @@ class WalletDetail extends Component { {I18n.t('COMMISSION_ACCOUNT_TITLE')} - {thousands(wallet.balance_com, ' ')} + {`${thousands(wallet.balance_com, ' ')} ${wallet.currency_code}`} ); + renderModalHistoryDetail = () => { + const { historyItemDetail } = this.state; + + return ( + + + + Détail de l'historique + + + + + + {I18n.t('OPERATION')} + + + {this.state.historyItemDetail.operation} + + + + + {I18n.t('TRANSACTION_ID')} + + + {this.state.historyItemDetail.id_transaction} + + + + + Date + + + {this.state.historyItemDetail.date} + + + + + {I18n.t('INIT_COUNTRY')} + + + {this.state.historyItemDetail.init_country} + + + + + {I18n.t('AMOUNT')} + + + {this.state.historyItemDetail.montant} + + + + + {I18n.t('FEES_AND_TAXES')} + + + {this.state.historyItemDetail.frais} + + + + + {I18n.t('NET_AMOUNT')} + + + {this.state.historyItemDetail.montant_net_init} + + + + + {I18n.t('EMETTEUR')} + + + {this.state.historyItemDetail.emetteur} + + + + + {I18n.t('DESTINATAIRE')} + + + {this.state.historyItemDetail.destinataire} + + + + + {I18n.t('FINAL_COUNTRY')} + + + {this.state.historyItemDetail.final_country} + + + + + {I18n.t('NET_AMOUNT')} + + + {this.state.historyItemDetail.montant_net_final} + + + + + {I18n.t('ACTIVE_WALLET')} + + + {this.state.historyItemDetail.reseau_payeur} + + + + + + + { + this.setState({ + displayModalHistory: !this.state.displayModalHistory, + }); + + }} /> + + + + ); + } renderDetailWallet = (wallet) => { - console.log("WALLET NAME SLUGIFY", slugify(wallet.network)); return ( !isEmptyObject(wallet) ? @@ -773,7 +903,7 @@ class WalletDetail extends Component { )} - {!this.isHomeRootView && this.renderHistoryTransaction()} + {!this.isHomeRootView && this.renderHistoryTransaction(wallet)} @@ -791,27 +921,44 @@ class WalletDetail extends Component { ) } - renderHistoryTransactionItem = (item, index) => { + renderHistoryTransactionItem = (item, index, wallet) => { return ( - + { this.setState({ displayModalHistory: true, historyItemDetail: item }) }} style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}> { - Object.keys(omit(item, ['id'])).map((element, i) => ( - - - {isEqual(element, 'date') - ? this.getCreationDateToHumanFormat(item[element]) - : - isEqual(element, 'destinataire') - ? cutString(item[element], 6) - : - item[element] - } - - - )) + isIlinkWorldWallet(wallet.type) ? + Object.keys(omit(item, ['id', 'id_transaction', 'type', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation'])).map((element, i) => ( + + + { + isEqual(element, 'montant') ? + `${thousands(item[element], ' ')}` + : isEqual(element, 'destinataire') ? + item[element].length > 13 ? cutString(item[element], 13) : item[element] + : isEqual(element, 'date') ? + cutStringWithoutDot(item[element], 16) + : item[element] + } + + + )) : + Object.keys(omit(item, ['id', 'id_transaction', 'type', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation'])).map((element, i) => ( + + + { + isEqual(element, 'montant') ? + `${thousands(item[element], ' ')}` + : isEqual(element, 'destinataire') ? + item[element].length > 13 ? cutString(item[element], 13) : item[element] + : isEqual(element, 'date') ? + cutStringWithoutDot(item[element], 16) + : item[element] + } + + + )) } - + ); /* { + renderHistoryTransactionList = (wallet) => { const { resultTransaction, errorTransaction } = this.props; if (errorTransaction !== null) { if (typeof errorTransaction.data !== 'undefined') { @@ -860,7 +1007,7 @@ class WalletDetail extends Component { <> { - transactionHistoryLabel().map((item, index) => ( + transactionHistoryIlinkLabel().map((item, index) => ( @@ -872,7 +1019,7 @@ class WalletDetail extends Component { { resultTransaction.response.map((item, index) => ( - this.renderHistoryTransactionItem(item, index) + this.renderHistoryTransactionItem(item, index, wallet) )) } @@ -888,7 +1035,7 @@ class WalletDetail extends Component { } - renderHistoryTransaction = () => { + renderHistoryTransaction = (wallet) => { return ( <> @@ -920,7 +1067,7 @@ class WalletDetail extends Component { - {this.renderHistoryTransactionList()} + {this.renderHistoryTransactionList(wallet)} } @@ -1003,6 +1150,7 @@ class WalletDetail extends Component { render() { return ( <> + {this.state.displayModalHistory && this.renderModalHistoryDetail()} { diff --git a/utils/UtilsFunction.js b/utils/UtilsFunction.js index 94220eb9..b5e79597 100644 --- a/utils/UtilsFunction.js +++ b/utils/UtilsFunction.js @@ -12,7 +12,12 @@ export const thousandsSeparators = (num) => { } export const cutString = (word, max) => { - return `${word.slice(0, max)}...`; + + return word === null ? ' ' : `${word.slice(0, max)}...`; +} +export const cutStringWithoutDot = (word, max) => { + + return word === null ? ' ' : `${word.slice(0, max)}`; } export const isNormalInteger = (str) => { @@ -139,14 +144,38 @@ export const inputCardSource = () => [ export const transactionHistoryLabel = () => { return [ + /* { + icon: 'arrow-expand', + label: 'Type' + }, */ { + icon: 'inbox-arrow-up', + label: 'Source' + }, + { + icon: 'cash', + label: I18n.t('AMOUNT_LABEL') + }, + { + icon: 'account-arrow-right', + label: I18n.t('DESTINATAIRE') + }, + { + icon: 'calendar-clock', + label: 'Date' + }, + ] +} +export const transactionHistoryIlinkLabel = () => { + return [ + /*{ icon: 'arrow-expand', label: 'Type' }, { icon: 'inbox-arrow-up', label: 'Source' - }, + }, */ { icon: 'cash', label: I18n.t('AMOUNT_LABEL') diff --git a/utils/i18n/en.json b/utils/i18n/en.json index 1391b8f5..56cfd603 100644 --- a/utils/i18n/en.json +++ b/utils/i18n/en.json @@ -102,6 +102,8 @@ "FEES_AND_TAXES": "Fees and taxes", "INIT_COUNTRY": "Departure countryt", "FINAL_COUNTRY": "Arrival country", + "INIT_AMOUNT": "Init amount", + "FINAL_AMOUNT": "Final amount", "NET_AMOUNT": "Net amount", "CODE_WALLET": "Wallet Code", "CODE_RETRAIT": "Withdrawal code", @@ -133,6 +135,8 @@ "PRINCIPAL": "Principal", "ENTER_YOUR_CARD_ID": "Please enter your bank card ID", "SELECT_YOUR_WALLET": "Select your wallet", + "TRANSACTION_ID": "Transaction number", + "OPERATION": "Operation", "TRANSACTIONS": "Transactions", "TRANSACTION_HISTORY": "Transactions history", "HISTORY": "History", @@ -161,6 +165,7 @@ "NAME": "Last name(s)", "FIRSTNAME": "First name(s) ", "NAME_EMETTEUR": "Issuer first name(s)", + "EMETTEUR": "Issuer", "FIRSTNAME_EMETTEUR": "Issuer last name(s) ", "EMAIL_EMETTEUR": "Issuer email ", "ID_DESTINATAIRE": "Destination ID", diff --git a/utils/i18n/fr.json b/utils/i18n/fr.json index 5cca6984..957576cd 100644 --- a/utils/i18n/fr.json +++ b/utils/i18n/fr.json @@ -107,6 +107,8 @@ "CODE_IBAN": "Code IBAN", "INIT_COUNTRY": "Pays de départ", "FINAL_COUNTRY": "Pays d'arrivée", + "INIT_AMOUNT": "Montant initial", + "FINAL_AMOUNT": "Montant final", "NET_AMOUNT": "Montant net", "CODE_WALLET": "Code Wallet", "CODE_RETRAIT": "Code Retrait", @@ -131,6 +133,8 @@ "NUMERO_COMPTE": "N° de compte", "COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal", "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide", + "TRANSACTION_ID": "Numéro de transaction", + "OPERATION": "Opération", "TRANSACTIONS": "Transactions", "TRANSACTION_HISTORY": "Historique des transactions", "HISTORY": "Historique", @@ -165,6 +169,7 @@ "NAME": "Nom(s)", "FIRSTNAME": "Prénom(s) ", "NAME_EMETTEUR": "Nom(s) émetteur", + "EMETTEUR": "Emetteur", "FIRSTNAME_EMETTEUR": "Prénom(s) émetteur", "EMAIL_EMETTEUR": "Email émetteur ", "ID_DESTINATAIRE": "Identifiant destinataire ", diff --git a/webservice/IlinkConstants.js b/webservice/IlinkConstants.js index 1a2d46d9..b5b3c325 100644 --- a/webservice/IlinkConstants.js +++ b/webservice/IlinkConstants.js @@ -33,6 +33,7 @@ export const creditCancelDemand = testBaseUrl + '/walletService/credits/cancelDe export const commissionAmount = testBaseUrl + '/walletService/transactions/commission'; export const transactionUrl = testBaseUrl + '/walletService/transactions'; +export const transactionIlinkUrl = testBaseUrl + '/walletService/transactions/ilink/agent'; export const transferCommission = testBaseUrl + '/walletService/virement'; export const createIdentificationUrl = testBaseUrl + '/walletService/identifications'; diff --git a/webservice/WalletTransactionHistoryApi.js b/webservice/WalletTransactionHistoryApi.js index 42f8db1e..c6835dd2 100644 --- a/webservice/WalletTransactionHistoryApi.js +++ b/webservice/WalletTransactionHistoryApi.js @@ -1,11 +1,11 @@ -import { transactionUrl } from "./IlinkConstants"; +import { transactionUrl, transactionIlinkUrl } from "./IlinkConstants"; import { store } from "../redux/store"; import axios from "axios"; import I18n from 'react-native-i18n' import { fetchWalletHistoryPending, fetchWalletHistorySuccess, fetchWalletHistoryError, fetchWalletHistoryReset } from "../redux/actions/WalletActions"; -export const getWalletTransactionHistory = (walletID) => { +export const getWalletTransactionHistory = (walletID, isiLinkWorldWallet) => { const auth = store.getState().authKeyReducer; const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : ''; @@ -14,7 +14,7 @@ export const getWalletTransactionHistory = (walletID) => { dispatch(fetchWalletHistoryPending()); axios({ - url: `${transactionUrl}/${walletID}`, + url: isiLinkWorldWallet ? `${transactionIlinkUrl}/${walletID}` : `${transactionUrl}/${walletID}`, method: 'GET', headers: { 'Authorization': authKey,