2044 lines
102 KiB
JavaScript
2044 lines
102 KiB
JavaScript
import isEqual from 'lodash/isEqual';
|
|
import omit from 'lodash/omit';
|
|
import 'moment/locale/en-au';
|
|
import 'moment/locale/en-ca';
|
|
import 'moment/locale/en-gb';
|
|
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 {
|
|
ActivityIndicator,
|
|
Alert,
|
|
Animated,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StatusBar,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import I18n from 'react-native-i18n';
|
|
import {responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import {TabBar} from 'react-native-tab-view';
|
|
import Icons from 'react-native-vector-icons/Ionicons';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
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,
|
|
cutStringWithoutDot,
|
|
displayTransactionType,
|
|
isEmptyObject,
|
|
isIlinkWorldWallet,
|
|
optionDepotScreen,
|
|
optionIdentificationScreen,
|
|
optionNanoCreditAgentScreen, optionNanoSanteAgent, optionNanoSanteUser,
|
|
optionPaiementFacture,
|
|
optionRetraitScreen,
|
|
transactionHistoryIlinkLabel
|
|
} from '../../utils/UtilsFunction';
|
|
import {depositActionReset} from '../../webservice/DepositApi';
|
|
import {baseUrl} from '../../webservice/IlinkConstants';
|
|
import {getWalletDetailActivated, resetWalletListDetailReducer} from '../../webservice/WalletApi';
|
|
import {
|
|
getHyperSuperTransactionHistoryAction,
|
|
getHyperSuperTransactionHistoryReset,
|
|
getWalletTransactionHistory,
|
|
getWalletTransactionHistoryReset
|
|
} from '../../webservice/WalletTransactionHistoryApi';
|
|
import {resetCommissionReducer, transferCommissionAction} from '../../webservice/WalletTransferCommission';
|
|
import {readUser} from '../../webservice/AuthApi';
|
|
|
|
let moment = require('moment-timezone');
|
|
const thousands = require('thousands');
|
|
|
|
let route = require('./../../route.json');
|
|
let slugify = require('slugify');
|
|
require('../../utils/Translations');
|
|
|
|
class WalletDetail extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
index: 0,
|
|
routes: [
|
|
{key: 'depot', title: I18n.t('DEPOSIT')},
|
|
{key: 'retrait', title: I18n.t('WITHDRAWAL')}
|
|
],
|
|
heightHeader: Utils.heightHeader(),
|
|
isModalConfirmVisible: false,
|
|
wallet: {currency_code: ''},
|
|
triggerTransferCommission: false,
|
|
loading: false,
|
|
isTriggerRefresh: false,
|
|
scrollHeaderY: 0,
|
|
displayModalHistory: false,
|
|
displaySuperHyperModalHistory: false,
|
|
historyItemDetail: null,
|
|
};
|
|
|
|
this.renderContent = null;
|
|
slugify.extend({'+': 'plus'});
|
|
|
|
this.scrollY = new Animated.Value(0);
|
|
this.scrollHeaderY = new Animated.Value(0);
|
|
this.deltaY = new Animated.Value(0);
|
|
this.bgBannerY = new Animated.Value(0);
|
|
|
|
this.heightImageBanner = Utils.scaleWithPixel(250, 1);
|
|
this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
|
|
this.isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
|
|
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
|
|
this.props.getWalletTransactionHistoryReset();
|
|
this.props.depositActionReset();
|
|
this.props.resetWalletListDetailReducer();
|
|
|
|
this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
|
|
moment.locale(this.currentLocale);
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
if (user.category !== undefined) {
|
|
if (user.category === "super" || user.category === "hyper") {
|
|
let agentId = this.props.navigation.state.params.agentId;
|
|
this.props.getWalletDetailActivated(agentId, true);
|
|
this.props.getHyperSuperTransactionHistoryReset();
|
|
}
|
|
if (user.category === "geolocated") {
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
/* if (this.isHomeRootView) {
|
|
let agentId = this.props.navigation.state.params.agentId;
|
|
this.props.getWalletDetailActivated(agentId, true);
|
|
this.props.getHyperSuperTransactionHistoryReset();
|
|
} else {
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
|
|
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);
|
|
}*/
|
|
|
|
this.getWalletDetail();
|
|
|
|
this.willFocus = this.props.navigation.addListener(
|
|
'willFocus',
|
|
payload => {
|
|
const {result} = this.props;
|
|
console.warn("will focus detail");
|
|
this.getWalletDetail();
|
|
this.setState({
|
|
wallet: {currency_code: ''}
|
|
}, () => {
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
const wallet = result.response[0];
|
|
readUser().then((user) => {
|
|
if (user !== null && user !== undefined) {
|
|
if (user.category !== undefined) {
|
|
switch (user.category) {
|
|
case "super":
|
|
this.props.getHyperSuperTransactionHistoryAction(user.code_membre, false);
|
|
break;
|
|
case "hyper":
|
|
this.props.getHyperSuperTransactionHistoryAction(user.network_id, true);
|
|
break;
|
|
}
|
|
this.setState({});
|
|
}
|
|
}
|
|
});
|
|
this.setState({
|
|
wallet: wallet,
|
|
isTriggerRefresh: false
|
|
})
|
|
}
|
|
}
|
|
})
|
|
});
|
|
|
|
}
|
|
|
|
getWalletDetail = () => {
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
if (user.category !== undefined) {
|
|
if (user.category === "super" || user.category === "hyper") {
|
|
let agentId = this.props.navigation.state.params.agentId;
|
|
this.props.getWalletDetailActivated(agentId, true);
|
|
this.props.getHyperSuperTransactionHistoryReset();
|
|
}
|
|
if (user.category === "geolocated") {
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
/*
|
|
static options(passProps) {
|
|
return {
|
|
topBar: {
|
|
drawBehind: false,
|
|
visible: true,
|
|
animate: true,
|
|
buttonColor: 'white',
|
|
background: {
|
|
color: 'white',
|
|
},
|
|
rightButtons: []
|
|
},
|
|
backButton: {
|
|
visible: true,
|
|
color: "white"
|
|
},
|
|
buttonColor: "white",
|
|
background: {
|
|
color: Color.primaryDarkColor
|
|
},
|
|
statusBar: {
|
|
drawBehind: false,
|
|
visible: true,
|
|
}
|
|
};
|
|
}
|
|
*/
|
|
static navigatorStyle = {
|
|
navBarBackgroundColor: Color.primaryColor,
|
|
statusBarColor: Color.primaryDarkColor,
|
|
navBarTextColor: '#FFFFFF',
|
|
navBarButtonColor: '#FFFFFF'
|
|
|
|
};
|
|
|
|
static navigationOptions = () => {
|
|
return {
|
|
//title: I18n.t('WALLET'),
|
|
//title: this.isHomeRootView ? I18n.t('WALLET') : ((typeof this.props.navigation.state.params !== 'undefined') && this.props.navigation.state.params.wallet.network),
|
|
drawerLabel: () => null,
|
|
headerTitle: I18n.t('WALLET'),
|
|
headerTintColor: 'white',
|
|
headerStyle: {
|
|
backgroundColor: Color.primaryColor,
|
|
marginTop: 23,
|
|
color: 'white'
|
|
},
|
|
headerTitleStyle: {
|
|
color: "white"
|
|
},
|
|
title: I18n.t('WALLET')
|
|
}
|
|
};
|
|
|
|
componentDidMount() {
|
|
console.log('RESULT REQUEST', result);
|
|
const {result} = this.props;
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
const wallet = result.response[0];
|
|
/* readUser().then((user) => {
|
|
if (user !== null && user !== undefined) {
|
|
if (user.category !== undefined) {
|
|
switch (user.category) {
|
|
case "super":
|
|
this.props.getHyperSuperTransactionHistoryAction(result.response.id, false);
|
|
break;
|
|
case "hyper":
|
|
this.props.getHyperSuperTransactionHistoryAction(user.network_id, true);
|
|
break;
|
|
}
|
|
this.setState({});
|
|
}
|
|
}
|
|
});*/
|
|
this.setState({
|
|
wallet: wallet,
|
|
isTriggerRefresh: false
|
|
})
|
|
}
|
|
}
|
|
/*else {
|
|
if (this.state.isTriggerRefresh) {
|
|
console.log("this.state.isTriggerRefresh", result);
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
const wallet = result.response.filter((item) => item.id === this.state.wallet.id);
|
|
this.setState({
|
|
wallet: wallet,
|
|
isTriggerRefresh: false
|
|
})
|
|
console.log("REPONSE FILTER", result.response.filter((item) => item.id === this.state.wallet.id));
|
|
}
|
|
}
|
|
}
|
|
} */
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
|
|
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
/* componentWillReceiveProps(nextProps) {
|
|
|
|
if (nextProps.loading || nextProps.loadingTransferCommission)
|
|
this.setState({
|
|
loading: true
|
|
})
|
|
else
|
|
this.setState({
|
|
loading: false
|
|
})
|
|
} */
|
|
getWalletIcon = (wallet) => {
|
|
return `${baseUrl}/datas/img/network/${slugify(wallet.network, {lower: true})}-logo.png`;
|
|
|
|
}
|
|
|
|
getCreationDateToHumanFormat = (date) => {
|
|
let re = moment.tz(date, moment.tz.guess()).format();
|
|
return moment(re).fromNow();
|
|
}
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({name: I18n.t('WALLET')})
|
|
this.forceUpdate()
|
|
}
|
|
|
|
handleIndexChange = index => this.setState({index});
|
|
|
|
imageScale = () => {
|
|
return this.scrollY.interpolate({
|
|
inputRange: [0, 100],
|
|
outputRange: [1, 0.5],
|
|
extrapolate: 'clamp',
|
|
});
|
|
}
|
|
|
|
imageTranslateY = () => {
|
|
return this.scrollY.interpolate({
|
|
inputRange: [0, 100],
|
|
outputRange: [-5, 50],
|
|
extrapolate: 'clamp',
|
|
});
|
|
}
|
|
|
|
bgHeaderTranslateY = () => {
|
|
return this.scrollY.interpolate({
|
|
inputRange: [0, 150],
|
|
outputRange: [-5, 0],
|
|
extrapolate: 'clamp',
|
|
});
|
|
}
|
|
|
|
refresh = () => {
|
|
const {result} = this.props;
|
|
console.log("STATE NAVIGATION PARAMS REFRESH", this.props.navigation.state);
|
|
|
|
if (!this.isHomeRootView) {
|
|
const {wallet} = this.props.navigation.state.params;
|
|
this.props.getWalletDetailActivated(wallet.id, false);
|
|
if (isIlinkWorldWallet(wallet.type))
|
|
this.props.getWalletTransactionHistory(wallet.id, true);
|
|
else
|
|
this.props.getWalletTransactionHistory(wallet.id, false);
|
|
this.setState({
|
|
isTriggerRefresh: true
|
|
});
|
|
|
|
/* if (typeof this.props.navigation.state.params.onRefreshDetail !== 'undefined')
|
|
this.props.navigation.state.params.onRefreshDetail(); */
|
|
|
|
} else {
|
|
let agentId = this.props.navigation.state.params.agentId;
|
|
this.props.getWalletDetailActivated(agentId, true);
|
|
}
|
|
}
|
|
|
|
renderTabBar = props => (
|
|
<TabBar
|
|
{...props}
|
|
scrollEnabled
|
|
indicatorStyle={[styles.indicator, {backgroundColor: Color.primaryColor}]}
|
|
style={[styles.tabBar, {backgroundColor: Color.containerBackgroundColor}]}
|
|
inactiveColor={Color.dividerColor}
|
|
activeColor={Color.grayColor}
|
|
tabStyle={styles.tab}
|
|
renderLabel={({route, focused, color}) => (
|
|
<View style={{
|
|
flex: 1,
|
|
width: Utils.getWidthDevice() / 2,
|
|
alignItems: 'center'
|
|
}}>
|
|
<Text style={Typography.headline} style={{color}}>
|
|
{
|
|
(route.key === 'depot') ?
|
|
(<Icon name='arrow-bottom-right'
|
|
color={color} size={20}/>)
|
|
:
|
|
(<Icon name='arrow-top-left'
|
|
color={color} size={20}/>)
|
|
}
|
|
{` ${route.title}`}
|
|
|
|
</Text>
|
|
|
|
</View>
|
|
)}
|
|
|
|
/>
|
|
);
|
|
|
|
renderHeader = (wallet) => (
|
|
<View style={[
|
|
styles.containField,
|
|
{
|
|
backgroundColor: Color.cardBackgroundColor,
|
|
zIndex: 11,
|
|
shadowColor: Color.borderColor,
|
|
borderColor: Color.borderColor,
|
|
}
|
|
]}>
|
|
<View style={[styles.contentLeftItem]}>
|
|
<Text numberOfLines={1} style={[Typography.caption2, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
|
|
</View>
|
|
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
}}>
|
|
<Animated.Image
|
|
source={{uri: this.getWalletIcon(wallet)}}
|
|
style={{
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
position: 'absolute',
|
|
alignSelf: 'center',
|
|
backgroundColor: Color.whiteColor,
|
|
bottom: 70,
|
|
transform: [{
|
|
scale: this.imageScale()
|
|
},
|
|
{
|
|
translateY: this.imageTranslateY()
|
|
}]
|
|
}}/>
|
|
|
|
<View style={{
|
|
marginTop: 1, flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end'
|
|
}}>
|
|
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
|
|
<Tag primary
|
|
icon={<Icon name='swap-horizontal' size={20} color={Color.whiteColor}
|
|
style={{marginLeft: 15}}/>}
|
|
style={{
|
|
paddingRight: 10,
|
|
width: 120,
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
borderRightWidth: 1,
|
|
borderRightColor: Color.whiteColor
|
|
}}
|
|
onPress={() => {
|
|
const {result} = this.props;
|
|
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
|
|
if (parseInt(result.response.balance_com) === 0) {
|
|
Alert.alert(
|
|
I18n.t("TRANSFER_COMMISSION_IMPOSSIBLE"),
|
|
I18n.t("COMMISSION_TRANSFER_ERROR_EMPTY"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.resetCommissionReducer();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
} else
|
|
this.renderDialogConfirmTransferCommission()
|
|
}
|
|
|
|
}
|
|
|
|
/* else {
|
|
if (parseInt(this.state.wallet.balance_com) === 0) {
|
|
Alert.alert(
|
|
I18n.t("ERROR_TRANSFER_COMMISSION"),
|
|
I18n.t("COMMISSION_TRANSFER_ERROR_EMPTY"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.resetCommissionReducer();
|
|
}
|
|
}
|
|
],
|
|
{ cancelable: false }
|
|
)
|
|
}
|
|
else
|
|
this.renderDialogConfirmTransferCommission()
|
|
} */
|
|
}}>
|
|
{I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
|
|
</Tag>
|
|
<Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{marginLeft: -15}}/>}
|
|
style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
|
|
primary
|
|
onPress={() => {
|
|
this._scrollView.scrollToEnd();
|
|
}}>
|
|
{I18n.t('HISTORY')}
|
|
|
|
</Tag>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.contentLeftItem}>
|
|
<Text numberOfLines={1}
|
|
style={[Typography.caption2, Typography.semibold]}>{I18n.t('CREATION_DATE')}</Text>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true}
|
|
style={Typography.caption1}>{moment(wallet.created_date).format('DD/MM/YYYY')}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
renderLoader = () => {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{Platform.OS === 'android'
|
|
?
|
|
(
|
|
<>
|
|
<ProgressBarAndroid/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
|
|
</>
|
|
) :
|
|
<>
|
|
<ActivityIndicator size="large" color={'#ccc'}/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
renderAccountDetail = (wallet) => (
|
|
<View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
}}>
|
|
<View
|
|
style={[
|
|
styles.circlePoint,
|
|
{backgroundColor: Color.primaryColor},
|
|
]}>
|
|
<Icons name='md-wallet'
|
|
size={28}
|
|
color={Color.whiteColor}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<Text style={[Typography.title3, Color.primaryColor], {marginBottom: 3}}>
|
|
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
|
|
</Text>
|
|
<Text
|
|
style={[Typography.body2]}>{`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
}}>
|
|
<View
|
|
style={[
|
|
styles.circlePoint,
|
|
{backgroundColor: Color.primaryColor},
|
|
]}>
|
|
<Icons name='md-cash'
|
|
size={28}
|
|
color={Color.whiteColor}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<Text style={[Typography.title3, Color.primaryColor], {marginBottom: 3}}>
|
|
{I18n.t('COMMISSION_ACCOUNT_TITLE')}
|
|
</Text>
|
|
<Text
|
|
style={Typography.body2}>{`${thousands(wallet.balance_com, ' ')} ${wallet.currency_code}`}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
);
|
|
|
|
renderModalHistoryDetail = (wallet) => {
|
|
const {historyItemDetail} = this.state;
|
|
|
|
return (
|
|
|
|
<Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
|
|
|
|
<Dialog.Title>{I18n.t('HISTORY_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('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>
|
|
|
|
);
|
|
}
|
|
|
|
renderSuperHyperHistoryTransactionItem = (item, index) => {
|
|
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.setState({displaySuperHyperModalHistory: true, historyItemDetail: item})
|
|
}} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
Object.keys(omit(item, ['id', 'id_transaction', 'montant_retire', 'montant2', 'date_cassation', 'etat', 'type', 'date_fin', 'duree_mois', 'id_epargne', 'type_historique', 'frais', 'init_country', 'final_country', 'source', 'emetteur', 'montant_net_final', 'montant_net_init', 'reseau_payeur', 'operation', 'retrait_cash', 'type_historique', 'type_caution', 'id_demande', 'montant_rembourse', 'partiellement_rembourse', 'duree_mois', 'etat', 'interet', 'taxe', 'date_validation', 'date_remboursement_prevu', 'date_remboursement', 'id_user', 'id_wallet_agent', 'id_network', 'user', 'user_phone', 'agent', 'codeParrain'])).map((element, i) => (
|
|
<View style={{alignItems: 'center'}} key={i}>
|
|
<Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
|
|
{
|
|
isEqual(element, 'montant') ?
|
|
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
|
|
: isEqual(element, 'destinataire') ?
|
|
item[element].length > 13 ? cutString(item[element], 13) : item[element]
|
|
: isEqual(element, 'date_creation') ?
|
|
cutStringWithoutDot(item[element], 16)
|
|
: item[element]
|
|
}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
}
|
|
|
|
renderModalSuperHyperHistoryDetail = (wallet) => {
|
|
const {historyItemDetail} = this.state;
|
|
|
|
return (
|
|
|
|
<Dialog.Container useNativeDriver={true} visible={this.state.displaySuperHyperModalHistory}>
|
|
|
|
<Dialog.Title>{I18n.t('HISTORY_DETAIL')}</Dialog.Title>
|
|
|
|
{isEqual(historyItemDetail.type_historique, 'N') &&
|
|
<ScrollView persistentScrollbar={true}>
|
|
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>Type</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('CAUTION_TYPE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type_caution}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</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 + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
}
|
|
|
|
{isEqual(historyItemDetail.type_historique, 'E') &&
|
|
|
|
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>Type</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('ID_SAVINGS')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>Type</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</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 + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_WITHDRAWAL')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + wallet.currency_code}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : this.state.historyItemDetail.date_fin}</Text>
|
|
</View>
|
|
</View>
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
|
<View style={{flex: 1}}>
|
|
<Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
}
|
|
|
|
{isEqual(historyItemDetail.type_historique, 'T') &&
|
|
|
|
<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_creation}</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.montant2}</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({
|
|
displaySuperHyperModalHistory: !this.state.displaySuperHyperModalHistory,
|
|
});
|
|
|
|
}}/>
|
|
|
|
</Dialog.Container>
|
|
|
|
);
|
|
}
|
|
|
|
renderSuperHyperHistoryTransactionList = () => {
|
|
|
|
const {resultHistoryHyperSuper, errorHistoryHyperSuper} = this.props;
|
|
if (errorHistoryHyperSuper !== null) {
|
|
if (typeof errorHistoryHyperSuper.data !== 'undefined') {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorHistoryHyperSuper.data.error}</Text>
|
|
</View>
|
|
)
|
|
} else {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorHistoryHyperSuper}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
if (resultHistoryHyperSuper !== null) {
|
|
if (resultHistoryHyperSuper.response !== null) {
|
|
return (
|
|
Array.isArray(resultHistoryHyperSuper.response) && (resultHistoryHyperSuper.response.length) > 0 ?
|
|
(
|
|
<>
|
|
<View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
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}}>
|
|
{I18n.t(item.label)}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</View>
|
|
{
|
|
resultHistoryHyperSuper.response.map((item, index) => (
|
|
this.renderSuperHyperHistoryTransactionItem(item, index)
|
|
))
|
|
}
|
|
</>
|
|
) :
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
|
|
</View>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
renderSuperHyperHistoryTransaction = () => {
|
|
|
|
return (
|
|
<>
|
|
{
|
|
this.props.loadingHistoryHyperSuper ?
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{Platform.OS === 'android'
|
|
?
|
|
(
|
|
<>
|
|
<ProgressBarAndroid/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
|
|
</>
|
|
) :
|
|
<>
|
|
<ActivityIndicator size="large" color={'#ccc'}/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
}
|
|
</View>
|
|
) :
|
|
<>
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
|
<Text
|
|
style={[Typography.title3, Typography.semibold]}>
|
|
{I18n.t('TRANSACTION_HISTORY')}
|
|
</Text>
|
|
</View>
|
|
|
|
{this.renderSuperHyperHistoryTransactionList()}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
renderDetailWallet = (wallet) => {
|
|
return (
|
|
|
|
!isEmptyObject(wallet) ?
|
|
(<>
|
|
{this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
|
|
{/* {this.state.loading ?
|
|
<View
|
|
style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.state.loading ? responsiveWidth(100) : 0, height: this.state.loading ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
|
<Text style={{ fontSize: 20, color: 'white', fontWeight: 'bold' }}>{I18n.t("LOADING_DOTS")}</Text>
|
|
</View> : null
|
|
} */}
|
|
|
|
<View
|
|
style={styles.container}>
|
|
|
|
<Animated.View style={{
|
|
position: 'absolute',
|
|
width: "100%",
|
|
zIndex: 1,
|
|
backgroundColor: Color.primaryColor,
|
|
height: 140 - this.state.scrollHeaderY,
|
|
}}/>
|
|
|
|
<ScrollView ref={component => this._scrollView = component}
|
|
style={{
|
|
paddingHorizontal: 20, position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 2
|
|
}}
|
|
scrollEventThrottle={8}
|
|
onScroll={Animated.event([
|
|
{
|
|
nativeEvent: {
|
|
contentOffset: {y: this.scrollY},
|
|
},
|
|
},
|
|
],
|
|
{
|
|
listener: (event) => {
|
|
this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y});
|
|
}
|
|
})}>
|
|
<View style={{marginTop: 80,}}>
|
|
|
|
{this.renderHeader(wallet)}
|
|
|
|
<View
|
|
style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
|
|
{this.renderAccountDetail(wallet)}
|
|
|
|
{!this.isHomeRootView && (
|
|
<>
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
|
<Text
|
|
style={[Typography.title3, Typography.semibold]}>
|
|
{I18n.t('TRANSACTIONS')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={styles.transactionContainer}>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
if (isIlinkWorldWallet(wallet.type)) {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionDepotScreen,
|
|
wallet,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/wallet_with_cash.json"),
|
|
loop: false
|
|
}
|
|
})
|
|
} else {
|
|
this.props.navigation.push(route.walletDepot, {
|
|
wallet,
|
|
onGoBack: () => this.refresh(),
|
|
|
|
})
|
|
}
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='arrow-bottom-right'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={styles.contentTitle}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('DEPOSIT')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
{/*I18n.t('DEPOSIT_DESCRIPTION')*/}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={styles.containerTouch}>
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
if (isIlinkWorldWallet(wallet.type)) {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionRetraitScreen,
|
|
wallet,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/wallet_with_cash.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
} else {
|
|
this.props.navigation.push(route.walletRetrait, {
|
|
wallet,
|
|
onGoBack: () => this.refresh(),
|
|
})
|
|
}
|
|
}
|
|
}
|
|
activeOpacity={0.9}>
|
|
<Icon name='arrow-top-left'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={styles.contentTitle}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('WITHDRAWAL')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
{/*I18n.t('WITHDRAWAL_DESCRIPTION')*/}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
{isIlinkWorldWallet(wallet.type) &&
|
|
<>
|
|
<View style={styles.transactionContainer}>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={
|
|
() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionNanoCreditAgentScreen,
|
|
wallet,
|
|
lottie: {
|
|
source: require("./../../datas/json/cedit-cards.json"),
|
|
loop: true
|
|
}
|
|
});
|
|
}
|
|
}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='cash-multiple'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={{paddingTop: 5,}}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('NANO_CREDIT')}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionNanoSanteAgent,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/spend-healthies.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
}}
|
|
activeOpacity={0.9}>
|
|
<Icon name='heart-multiple'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={{paddingTop: 20,}}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('NANO_SANTE')}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.transactionContainer}>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionPaiementFacture,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/paiement_facture.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='file-document'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={styles.contentTitle}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('PAIEMENT_FACTURE')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionIdentificationScreen,
|
|
lottie: {
|
|
source: require("./../../datas/json/identification.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='pencil-plus'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={styles.contentTitle}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
|
|
</View>
|
|
|
|
</>
|
|
}
|
|
</>
|
|
)}
|
|
|
|
{!this.isHomeRootView && this.renderHistoryTransaction(wallet)}
|
|
{this.isHomeRootView && this.renderSuperHyperHistoryTransaction()}
|
|
</View>
|
|
|
|
|
|
</View>
|
|
|
|
</ScrollView>
|
|
</View>
|
|
</>)
|
|
:
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
|
|
</View>
|
|
)
|
|
)
|
|
}
|
|
|
|
renderHistoryTransactionItem = (item, index, wallet) => {
|
|
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.setState({displayModalHistory: true, historyItemDetail: item})
|
|
}} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
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') ?
|
|
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
|
|
: 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') ?
|
|
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}`
|
|
: isEqual(element, 'destinataire') ?
|
|
item[element].length > 13 ? cutString(item[element], 13) : item[element]
|
|
: isEqual(element, 'date') ?
|
|
cutStringWithoutDot(item[element], 16)
|
|
: item[element]
|
|
}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
/* <View
|
|
key={item.id}
|
|
style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View style={styles.iconContent}>
|
|
<Icon name='arrow-bottom-right'
|
|
color={Color.primaryColor} size={20} />
|
|
</View>
|
|
<View>
|
|
<Text style={Typography.subhead}>{item.description}</Text>
|
|
<Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
|
|
{date}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View> */
|
|
|
|
}
|
|
|
|
renderHistoryTransactionList = (wallet) => {
|
|
const {resultTransaction, errorTransaction} = this.props;
|
|
if (errorTransaction !== null) {
|
|
if (typeof errorTransaction.data !== 'undefined') {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorTransaction.data.error}</Text>
|
|
</View>
|
|
)
|
|
} else {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorTransaction}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
if (resultTransaction !== null) {
|
|
if (resultTransaction.response !== null) {
|
|
return (
|
|
Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
|
|
(
|
|
<>
|
|
<View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
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}}>
|
|
{I18n.t(item.label)}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</View>
|
|
{
|
|
resultTransaction.response.map((item, index) => (
|
|
this.renderHistoryTransactionItem(item, index, wallet)
|
|
))
|
|
}
|
|
</>
|
|
) :
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
|
|
</View>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
renderHistoryTransaction = (wallet) => {
|
|
|
|
return (
|
|
<>
|
|
{
|
|
this.props.loadingTransaction ?
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{Platform.OS === 'android'
|
|
?
|
|
(
|
|
<>
|
|
<ProgressBarAndroid/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
|
|
</>
|
|
) :
|
|
<>
|
|
<ActivityIndicator size="large" color={'#ccc'}/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
}
|
|
</View>
|
|
) :
|
|
<>
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
|
<Text
|
|
style={[Typography.title3, Typography.semibold]}>
|
|
{I18n.t('TRANSACTION_HISTORY')}
|
|
</Text>
|
|
</View>
|
|
|
|
{this.renderHistoryTransactionList(wallet)}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
renderDialogConfirmTransferCommission = () => {
|
|
Alert.alert(
|
|
I18n.t("CONFIRM"),
|
|
I18n.t('CONFIRM_TRANSFER_COMMISSION')
|
|
,
|
|
[
|
|
{
|
|
text: I18n.t("NO"), onPress: () => {
|
|
|
|
}
|
|
},
|
|
{
|
|
text: I18n.t("YES"), onPress: () => {
|
|
const {result} = this.props;
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
this.props.transferCommissionAction(result.response.id);
|
|
}
|
|
}/*
|
|
else
|
|
this.props.transferCommissionAction(this.state.wallet.id); */
|
|
|
|
this.setState({
|
|
triggerTransferCommission: true
|
|
});
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
|
|
renderDialogTransferCommissionResponse = () => {
|
|
const {resultTransferCommission, errorTransferCommission} = this.props;
|
|
|
|
if (errorTransferCommission !== null) {
|
|
if (typeof errorTransferCommission.data !== 'undefined') {
|
|
Alert.alert(
|
|
I18n.t("ERROR_TRANSFER_COMMISSION"),
|
|
errorTransferCommission.data.error,
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.resetCommissionReducer();
|
|
}
|
|
}
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
}
|
|
|
|
if (resultTransferCommission !== null) {
|
|
if (resultTransferCommission.response !== null) {
|
|
Alert.alert(
|
|
I18n.t("SUCCESS_TRANSFER_COMMISSION"),
|
|
I18n.t("COMMISSION_TRANSFER_SUCCESS"),
|
|
[
|
|
{
|
|
text: I18n.t("OK"), onPress: () => {
|
|
this.props.resetCommissionReducer();
|
|
this.refresh();
|
|
}
|
|
}
|
|
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<>
|
|
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
|
|
{this.props.result !== null &&
|
|
this.state.displaySuperHyperModalHistory &&
|
|
this.renderModalSuperHyperHistoryDetail(this.props.result.response)}
|
|
|
|
<StatusBar
|
|
backgroundColor={Color.primaryDarkColor}
|
|
barStyle="light-content"
|
|
translucent={true}
|
|
/>
|
|
{
|
|
((this.props.loading || this.props.loadingTransferCommission) ?
|
|
this.renderLoader() :
|
|
(
|
|
this.props.result !== null ?
|
|
|
|
Array.isArray(this.props.result.response) && (this.props.result.response.length) === 0 ?
|
|
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
|
|
</View>
|
|
:
|
|
|
|
this.renderDetailWallet(this.props.result.response)
|
|
:
|
|
null
|
|
)
|
|
)
|
|
|
|
}
|
|
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
loading: state.walletDetailReducer.loading,
|
|
result: state.walletDetailReducer.result,
|
|
error: state.walletDetailReducer.error,
|
|
|
|
loadingTransaction: state.walletHistoryReducer.loadingTransaction,
|
|
resultTransaction: state.walletHistoryReducer.resultTransaction,
|
|
errorTransaction: state.walletHistoryReducer.errorTransaction,
|
|
|
|
loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
|
|
resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
|
|
errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
|
|
|
|
loadingHistoryHyperSuper: state.getHyperSuperHistoryReducer.loading,
|
|
resultHistoryHyperSuper: state.getHyperSuperHistoryReducer.result,
|
|
errorHistoryHyperSuper: state.getHyperSuperHistoryReducer.error,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
getWalletDetailActivated,
|
|
getWalletTransactionHistory,
|
|
transferCommissionAction,
|
|
resetWalletListDetailReducer,
|
|
resetCommissionReducer,
|
|
getWalletTransactionHistoryReset,
|
|
depositActionReset,
|
|
getHyperSuperTransactionHistoryAction,
|
|
getHyperSuperTransactionHistoryReset
|
|
}, dispatch);
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Color.containerBackgroundColor
|
|
},
|
|
indicator: {
|
|
height: 2
|
|
},
|
|
tab: {
|
|
width: Utils.getWidthDevice() / 2
|
|
},
|
|
tabbar: {
|
|
height: 40
|
|
},
|
|
imgBanner: {
|
|
width: '100%',
|
|
height: 250,
|
|
position: 'absolute',
|
|
},
|
|
contentService: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
blockView: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
},
|
|
containField: {
|
|
padding: 10,
|
|
marginBottom: 20,
|
|
borderWidth: 0.5,
|
|
shadowOffset: {width: 1.5, height: 1.5},
|
|
shadowOpacity: 1.0,
|
|
elevation: 5,
|
|
flexDirection: "row",
|
|
height: 140,
|
|
borderRadius: 10
|
|
},
|
|
paymentItem: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
borderBottomWidth: 1,
|
|
paddingVertical: 5,
|
|
width: responsiveWidth(100),
|
|
marginBottom: 15
|
|
},
|
|
iconContent: {
|
|
width: 60,
|
|
marginRight: 10,
|
|
alignItems: "center"
|
|
},
|
|
contentLeftItem: {
|
|
flex: 1,
|
|
paddingTop: 40,
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
alignItems: "center"
|
|
},
|
|
tagFollow: {width: 150, margin: 10},
|
|
profileItem: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingBottom: 20,
|
|
paddingTop: 20
|
|
},
|
|
checkDefault: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderBottomWidth: 1,
|
|
paddingVertical: 10,
|
|
marginTop: 5
|
|
},
|
|
blockView: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
},
|
|
circlePoint: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
marginRight: 5,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
transactionContainer: {
|
|
flexDirection: 'row',
|
|
paddingTop: 10,
|
|
},
|
|
containerTouch: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
shadowColor: Color.borderColor,
|
|
borderColor: Color.borderColor,
|
|
borderWidth: 0.5,
|
|
shadowOffset: {width: 1.5, height: 1.5},
|
|
shadowOpacity: 1.0,
|
|
elevation: 5,
|
|
borderRadius: 10,
|
|
backgroundColor: Color.cardBackgroundColor
|
|
},
|
|
contain: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
},
|
|
imageBanner: {
|
|
marginTop: 15,
|
|
marginLeft: 5,
|
|
width: Utils.scaleWithPixel(30),
|
|
height: Utils.scaleWithPixel(30)
|
|
},
|
|
content: {
|
|
height: Utils.scaleWithPixel(60),
|
|
paddingHorizontal: 10,
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
flex: 1,
|
|
},
|
|
contentTitle: {
|
|
paddingTop: 5,
|
|
}
|
|
})
|