adminnistrateur
/
ilink-world
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
screens/wallet/WalletDetail.js
View File

@ -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 {
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
</Text>
<Text style={[Typography.body2]}>{thousands(wallet.balance_princ, ' ')}</Text>
<Text style={[Typography.body2]}>{`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`}</Text>
</View>
</View>
@ -468,15 +477,136 @@ class WalletDetail extends Component {
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('COMMISSION_ACCOUNT_TITLE')}
</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>
);
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) => {
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)}
</View>
@ -791,27 +921,44 @@ class WalletDetail extends Component {
)
}
renderHistoryTransactionItem = (item, index) => {
renderHistoryTransactionItem = (item, index, wallet) => {
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) => (
<View style={{ alignItems: 'center' }} key={i}>
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
{isEqual(element, 'date')
? this.getCreationDateToHumanFormat(item[element])
:
isEqual(element, 'destinataire')
? cutString(item[element], 6)
:
item[element]
}
</Text>
</View>
))
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) => (
<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>
)) :
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
@ -833,7 +980,7 @@ class WalletDetail extends Component {
}
renderHistoryTransactionList = () => {
renderHistoryTransactionList = (wallet) => {
const { resultTransaction, errorTransaction } = this.props;
if (errorTransaction !== null) {
if (typeof errorTransaction.data !== 'undefined') {
@ -860,7 +1007,7 @@ class WalletDetail extends Component {
<>
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{
transactionHistoryLabel().map((item, index) => (
transactionHistoryIlinkLabel().map((item, index) => (
<View style={{ alignItems: 'center' }} key={index}>
<Icon name={item.icon} size={24} color={Color.primaryColor} />
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
@ -872,7 +1019,7 @@ class WalletDetail extends Component {
</View>
{
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 {
</Text>
</View>
{this.renderHistoryTransactionList()}
{this.renderHistoryTransactionList(wallet)}
</>
}
</>
@ -1003,6 +1150,7 @@ class WalletDetail extends Component {
render() {
return (
<>
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"

2
screens/wallet/WalletDetailUser.js
View File

@ -80,7 +80,7 @@ class WalletDetailUser extends Component {
this.props.resetWalletListDetailReducer();
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();
readUser().then((user) => {

33
utils/UtilsFunction.js
View File

@ -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')

5
utils/i18n/en.json
View File

@ -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",

5
utils/i18n/fr.json
View File

@ -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 ",

1
webservice/IlinkConstants.js
View File

@ -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';

6
webservice/WalletTransactionHistoryApi.js
View File

@ -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,