Detail historique OK

This commit is contained in:
Brice Zele 2020-07-09 20:15:11 +01:00
parent 3dbb45ef2a
commit 27acb86dff
7 changed files with 225 additions and 37 deletions

View File

@ -20,10 +20,11 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import Tag from '../../components/Tag'; import Tag from '../../components/Tag';
import { Color } from '../../config/Color'; import { Color } from '../../config/Color';
import Dialog from "react-native-dialog";
import { Typography } from '../../config/typography'; import { Typography } from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils'; import * as Utils from '../../utils/DeviceUtils';
import { IlinkEmitter } from "../../utils/events"; 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 { depositActionReset } from '../../webservice/DepositApi';
import { baseUrl } from '../../webservice/IlinkConstants'; import { baseUrl } from '../../webservice/IlinkConstants';
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi'; import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
@ -48,11 +49,13 @@ class WalletDetail extends Component {
], ],
heightHeader: Utils.heightHeader(), heightHeader: Utils.heightHeader(),
isModalConfirmVisible: false, isModalConfirmVisible: false,
wallet: null, wallet: { currency_code: '' },
triggerTransferCommission: false, triggerTransferCommission: false,
loading: false, loading: false,
isTriggerRefresh: false, isTriggerRefresh: false,
scrollHeaderY: 0 scrollHeaderY: 0,
displayModalHistory: false,
historyItemDetail: null
}; };
this.renderContent = null; this.renderContent = null;
@ -81,7 +84,10 @@ class WalletDetail extends Component {
} }
else { else {
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false); 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) { if (!this.isHomeRootView) {
const { wallet } = this.props.navigation.state.params; const { wallet } = this.props.navigation.state.params;
this.props.getWalletDetailActivated(wallet.id, false); 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({ this.setState({
isTriggerRefresh: true isTriggerRefresh: true
}); });
@ -445,7 +454,7 @@ class WalletDetail extends Component {
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}> <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')} {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
</Text> </Text>
<Text style={[Typography.body2]}>{thousands(wallet.balance_princ, ' ')}</Text> <Text style={[Typography.body2]}>{`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`}</Text>
</View> </View>
</View> </View>
@ -468,15 +477,136 @@ class WalletDetail extends Component {
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}> <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('COMMISSION_ACCOUNT_TITLE')} {I18n.t('COMMISSION_ACCOUNT_TITLE')}
</Text> </Text>
<Text style={Typography.body2}>{thousands(wallet.balance_com, ' ')}</Text> <Text style={Typography.body2}>{`${thousands(wallet.balance_com, ' ')} ${wallet.currency_code}`}</Text>
</View> </View>
</View> </View>
</View> </View>
); );
renderModalHistoryDetail = () => {
const { historyItemDetail } = this.state;
return (
<Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
<Dialog.Title>Détail de l'historique</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('OPERATION')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.operation}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('TRANSACTION_ID')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_transaction}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>Date</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date}</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]}>{this.state.historyItemDetail.init_country}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant}</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]}>{this.state.historyItemDetail.frais}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_init}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('EMETTEUR')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.emetteur}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DESTINATAIRE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.destinataire}</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]}>{this.state.historyItemDetail.final_country}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('NET_AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_net_final}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('ACTIVE_WALLET')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.reseau_payeur}</Text>
</View>
</View>
</View>
</View>
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
this.setState({
displayModalHistory: !this.state.displayModalHistory,
});
}} />
</Dialog.Container>
);
}
renderDetailWallet = (wallet) => { renderDetailWallet = (wallet) => {
console.log("WALLET NAME SLUGIFY", slugify(wallet.network));
return ( return (
!isEmptyObject(wallet) ? !isEmptyObject(wallet) ?
@ -773,7 +903,7 @@ class WalletDetail extends Component {
</> </>
)} )}
{!this.isHomeRootView && this.renderHistoryTransaction()} {!this.isHomeRootView && this.renderHistoryTransaction(wallet)}
</View> </View>
@ -791,27 +921,44 @@ class WalletDetail extends Component {
) )
} }
renderHistoryTransactionItem = (item, index) => { renderHistoryTransactionItem = (item, index, wallet) => {
return ( return (
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}> <TouchableOpacity onPress={() => { this.setState({ displayModalHistory: true, historyItemDetail: item }) }} style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{ {
Object.keys(omit(item, ['id'])).map((element, i) => ( isIlinkWorldWallet(wallet.type) ?
<View style={{ alignItems: 'center' }} key={i}> 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) => (
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}> <View style={{ alignItems: 'center' }} key={i}>
{isEqual(element, 'date') <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
? this.getCreationDateToHumanFormat(item[element]) {
: isEqual(element, 'montant') ?
isEqual(element, 'destinataire') `${thousands(item[element], ' ')}`
? cutString(item[element], 6) : isEqual(element, 'destinataire') ?
: item[element].length > 13 ? cutString(item[element], 13) : item[element]
item[element] : isEqual(element, 'date') ?
} cutStringWithoutDot(item[element], 16)
</Text> : item[element]
</View> }
)) </Text>
</View>
)) :
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) => (
<View style={{ alignItems: 'center' }} key={i}>
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
{
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]
}
</Text>
</View>
))
} }
</View> </TouchableOpacity>
); );
/* <View /* <View
@ -833,7 +980,7 @@ class WalletDetail extends Component {
} }
renderHistoryTransactionList = () => { renderHistoryTransactionList = (wallet) => {
const { resultTransaction, errorTransaction } = this.props; const { resultTransaction, errorTransaction } = this.props;
if (errorTransaction !== null) { if (errorTransaction !== null) {
if (typeof errorTransaction.data !== 'undefined') { if (typeof errorTransaction.data !== 'undefined') {
@ -860,7 +1007,7 @@ class WalletDetail extends Component {
<> <>
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}> <View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{ {
transactionHistoryLabel().map((item, index) => ( transactionHistoryIlinkLabel().map((item, index) => (
<View style={{ alignItems: 'center' }} key={index}> <View style={{ alignItems: 'center' }} key={index}>
<Icon name={item.icon} size={24} color={Color.primaryColor} /> <Icon name={item.icon} size={24} color={Color.primaryColor} />
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}> <Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
@ -872,7 +1019,7 @@ class WalletDetail extends Component {
</View> </View>
{ {
resultTransaction.response.map((item, index) => ( 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 ( return (
<> <>
@ -920,7 +1067,7 @@ class WalletDetail extends Component {
</Text> </Text>
</View> </View>
{this.renderHistoryTransactionList()} {this.renderHistoryTransactionList(wallet)}
</> </>
} }
</> </>
@ -1003,6 +1150,7 @@ class WalletDetail extends Component {
render() { render() {
return ( return (
<> <>
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
<StatusBar <StatusBar
backgroundColor={Color.primaryDarkColor} backgroundColor={Color.primaryDarkColor}
barStyle="light-content" barStyle="light-content"

View File

@ -80,7 +80,7 @@ class WalletDetailUser extends Component {
this.props.resetWalletListDetailReducer(); this.props.resetWalletListDetailReducer();
this.props.getWalletDetailActivated(this.props.navigation.state.params.userId, null); this.props.getWalletDetailActivated(this.props.navigation.state.params.userId, null);
this.props.getWalletTransactionHistory(this.props.navigation.state.params.userId); this.props.getWalletTransactionHistory(this.props.navigation.state.params.userId, true);
this.props.getUserIdentificationResetAction(); this.props.getUserIdentificationResetAction();
readUser().then((user) => { readUser().then((user) => {

View File

@ -12,7 +12,12 @@ export const thousandsSeparators = (num) => {
} }
export const cutString = (word, max) => { 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) => { export const isNormalInteger = (str) => {
@ -139,14 +144,38 @@ export const inputCardSource = () => [
export const transactionHistoryLabel = () => { export const transactionHistoryLabel = () => {
return [ 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', icon: 'arrow-expand',
label: 'Type' label: 'Type'
}, },
{ {
icon: 'inbox-arrow-up', icon: 'inbox-arrow-up',
label: 'Source' label: 'Source'
}, }, */
{ {
icon: 'cash', icon: 'cash',
label: I18n.t('AMOUNT_LABEL') label: I18n.t('AMOUNT_LABEL')

View File

@ -102,6 +102,8 @@
"FEES_AND_TAXES": "Fees and taxes", "FEES_AND_TAXES": "Fees and taxes",
"INIT_COUNTRY": "Departure countryt", "INIT_COUNTRY": "Departure countryt",
"FINAL_COUNTRY": "Arrival country", "FINAL_COUNTRY": "Arrival country",
"INIT_AMOUNT": "Init amount",
"FINAL_AMOUNT": "Final amount",
"NET_AMOUNT": "Net amount", "NET_AMOUNT": "Net amount",
"CODE_WALLET": "Wallet Code", "CODE_WALLET": "Wallet Code",
"CODE_RETRAIT": "Withdrawal code", "CODE_RETRAIT": "Withdrawal code",
@ -133,6 +135,8 @@
"PRINCIPAL": "Principal", "PRINCIPAL": "Principal",
"ENTER_YOUR_CARD_ID": "Please enter your bank card ID", "ENTER_YOUR_CARD_ID": "Please enter your bank card ID",
"SELECT_YOUR_WALLET": "Select your wallet", "SELECT_YOUR_WALLET": "Select your wallet",
"TRANSACTION_ID": "Transaction number",
"OPERATION": "Operation",
"TRANSACTIONS": "Transactions", "TRANSACTIONS": "Transactions",
"TRANSACTION_HISTORY": "Transactions history", "TRANSACTION_HISTORY": "Transactions history",
"HISTORY": "History", "HISTORY": "History",
@ -161,6 +165,7 @@
"NAME": "Last name(s)", "NAME": "Last name(s)",
"FIRSTNAME": "First name(s) ", "FIRSTNAME": "First name(s) ",
"NAME_EMETTEUR": "Issuer first name(s)", "NAME_EMETTEUR": "Issuer first name(s)",
"EMETTEUR": "Issuer",
"FIRSTNAME_EMETTEUR": "Issuer last name(s) ", "FIRSTNAME_EMETTEUR": "Issuer last name(s) ",
"EMAIL_EMETTEUR": "Issuer email ", "EMAIL_EMETTEUR": "Issuer email ",
"ID_DESTINATAIRE": "Destination ID", "ID_DESTINATAIRE": "Destination ID",

View File

@ -107,6 +107,8 @@
"CODE_IBAN": "Code IBAN", "CODE_IBAN": "Code IBAN",
"INIT_COUNTRY": "Pays de départ", "INIT_COUNTRY": "Pays de départ",
"FINAL_COUNTRY": "Pays d'arrivée", "FINAL_COUNTRY": "Pays d'arrivée",
"INIT_AMOUNT": "Montant initial",
"FINAL_AMOUNT": "Montant final",
"NET_AMOUNT": "Montant net", "NET_AMOUNT": "Montant net",
"CODE_WALLET": "Code Wallet", "CODE_WALLET": "Code Wallet",
"CODE_RETRAIT": "Code Retrait", "CODE_RETRAIT": "Code Retrait",
@ -131,6 +133,8 @@
"NUMERO_COMPTE": "N° de compte", "NUMERO_COMPTE": "N° de compte",
"COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal", "COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal",
"COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide", "COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
"TRANSACTION_ID": "Numéro de transaction",
"OPERATION": "Opération",
"TRANSACTIONS": "Transactions", "TRANSACTIONS": "Transactions",
"TRANSACTION_HISTORY": "Historique des transactions", "TRANSACTION_HISTORY": "Historique des transactions",
"HISTORY": "Historique", "HISTORY": "Historique",
@ -165,6 +169,7 @@
"NAME": "Nom(s)", "NAME": "Nom(s)",
"FIRSTNAME": "Prénom(s) ", "FIRSTNAME": "Prénom(s) ",
"NAME_EMETTEUR": "Nom(s) émetteur", "NAME_EMETTEUR": "Nom(s) émetteur",
"EMETTEUR": "Emetteur",
"FIRSTNAME_EMETTEUR": "Prénom(s) émetteur", "FIRSTNAME_EMETTEUR": "Prénom(s) émetteur",
"EMAIL_EMETTEUR": "Email émetteur ", "EMAIL_EMETTEUR": "Email émetteur ",
"ID_DESTINATAIRE": "Identifiant destinataire ", "ID_DESTINATAIRE": "Identifiant destinataire ",

View File

@ -33,6 +33,7 @@ export const creditCancelDemand = testBaseUrl + '/walletService/credits/cancelDe
export const commissionAmount = testBaseUrl + '/walletService/transactions/commission'; export const commissionAmount = testBaseUrl + '/walletService/transactions/commission';
export const transactionUrl = testBaseUrl + '/walletService/transactions'; export const transactionUrl = testBaseUrl + '/walletService/transactions';
export const transactionIlinkUrl = testBaseUrl + '/walletService/transactions/ilink/agent';
export const transferCommission = testBaseUrl + '/walletService/virement'; export const transferCommission = testBaseUrl + '/walletService/virement';
export const createIdentificationUrl = testBaseUrl + '/walletService/identifications'; export const createIdentificationUrl = testBaseUrl + '/walletService/identifications';

View File

@ -1,11 +1,11 @@
import { transactionUrl } from "./IlinkConstants"; import { transactionUrl, transactionIlinkUrl } from "./IlinkConstants";
import { store } from "../redux/store"; import { store } from "../redux/store";
import axios from "axios"; import axios from "axios";
import I18n from 'react-native-i18n' import I18n from 'react-native-i18n'
import { fetchWalletHistoryPending, fetchWalletHistorySuccess, fetchWalletHistoryError, fetchWalletHistoryReset } from "../redux/actions/WalletActions"; import { fetchWalletHistoryPending, fetchWalletHistorySuccess, fetchWalletHistoryError, fetchWalletHistoryReset } from "../redux/actions/WalletActions";
export const getWalletTransactionHistory = (walletID) => { export const getWalletTransactionHistory = (walletID, isiLinkWorldWallet) => {
const auth = store.getState().authKeyReducer; const auth = store.getState().authKeyReducer;
const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : ''; const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
@ -14,7 +14,7 @@ export const getWalletTransactionHistory = (walletID) => {
dispatch(fetchWalletHistoryPending()); dispatch(fetchWalletHistoryPending());
axios({ axios({
url: `${transactionUrl}/${walletID}`, url: isiLinkWorldWallet ? `${transactionIlinkUrl}/${walletID}` : `${transactionUrl}/${walletID}`,
method: 'GET', method: 'GET',
headers: { headers: {
'Authorization': authKey, 'Authorization': authKey,