2271 lines
120 KiB
JavaScript
2271 lines
120 KiB
JavaScript
|
import isEqual from 'lodash/isEqual';
|
||
|
|
import isArray from 'lodash/isArray';
|
||
|
|
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,
|
||
|
|
FlatList,
|
||
|
|
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,
|
||
|
|
isEmptyObject,
|
||
|
|
isIlinkCityWallet,
|
||
|
|
optionNumeroQuitanceScreen,
|
||
|
|
optionOrdreRecetteScreen,
|
||
|
|
transactionHistoryHyperOrdreRecetteLabel,
|
||
|
|
transactionHistorySuperOrdreRecetteLabel,
|
||
|
|
transactionHistorySuperTaxNoticeLabel
|
||
|
|
} 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,
|
||
|
|
user: null,
|
||
|
|
isDisplayHistoryOrdreRecette: false,
|
||
|
|
isDisplayHistoryDeclaration: true,
|
||
|
|
isDisplayHistoryReceipt: false,
|
||
|
|
historyTransactionMessage: I18n.t('HISTORY_OF') + ' ' + I18n.t('AVIS_IMPOSITIONS'),
|
||
|
|
historyResult: [],
|
||
|
|
page: 1,
|
||
|
|
perPage: 20,
|
||
|
|
loadMore: false,
|
||
|
|
};
|
||
|
|
|
||
|
|
this.renderContent = null;
|
||
|
|
slugify.extend({'+': 'plus'});
|
||
|
|
this.onEndReachedCalledDuringMomentum = true;
|
||
|
|
|
||
|
|
this.user = null;
|
||
|
|
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 === "hyper" || user.category === "geolocated" || user.category === "super") {
|
||
|
|
let agentId = this.props.navigation.state.params.agentId;
|
||
|
|
this.props.getWalletDetailActivated(agentId, false);
|
||
|
|
this.props.getHyperSuperTransactionHistoryReset();
|
||
|
|
this.user = user;
|
||
|
|
}
|
||
|
|
if (user.category === "super") {
|
||
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
|
||
|
|
if (isIlinkCityWallet(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":
|
||
|
|
console.log("ON est pas superviseur nous");
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, false, 1);
|
||
|
|
break;
|
||
|
|
case "hyper":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.network_id}?page=1&perPage=20`, true, 1);
|
||
|
|
break;
|
||
|
|
case "geolocated":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, null, 0);
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.setState({
|
||
|
|
wallet: wallet,
|
||
|
|
isTriggerRefresh: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
getWalletDetail = () => {
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user) {
|
||
|
|
if (user !== undefined) {
|
||
|
|
if (user.category !== undefined) {
|
||
|
|
let agentId = this.props.navigation.state.params.agentId;
|
||
|
|
this.props.getWalletDetailActivated(agentId, false);
|
||
|
|
if (user.category === "super") {
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, false, 1);
|
||
|
|
}
|
||
|
|
if (user.category === "hyper") {
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.network_id}?page=1&perPage=20`, true, 1);
|
||
|
|
}
|
||
|
|
if (user.category === "geolocated") {
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, null, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
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() {
|
||
|
|
const {result, resultHistoryHyperSuper} = this.props;
|
||
|
|
if (result !== null) {
|
||
|
|
if (result.response !== null) {
|
||
|
|
const wallet = result.response;
|
||
|
|
console.warn('RESULT REQUEST', result.response);
|
||
|
|
|
||
|
|
this.setState({
|
||
|
|
wallet: wallet,
|
||
|
|
isTriggerRefresh: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (resultHistoryHyperSuper !== null) {
|
||
|
|
this.setState({loadMore: true});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
componentWillReceiveProps(nextProps, nextContext) {
|
||
|
|
|
||
|
|
this.setState({historyResult: []}, () => {
|
||
|
|
const {resultHistoryHyperSuper} = nextProps;
|
||
|
|
if (resultHistoryHyperSuper !== null) {
|
||
|
|
if (resultHistoryHyperSuper.response !== null) {
|
||
|
|
if (this.state.page < resultHistoryHyperSuper.response.last_page) {
|
||
|
|
this.setState({
|
||
|
|
historyResult: resultHistoryHyperSuper.response.data
|
||
|
|
});
|
||
|
|
}
|
||
|
|
if (this.state.page === resultHistoryHyperSuper.response.last_page) {
|
||
|
|
this.setState({
|
||
|
|
historyResult: resultHistoryHyperSuper.response.data
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
shouldComponentUpdate(nextProps, nextState) {
|
||
|
|
|
||
|
|
if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
|
||
|
|
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// getWalletIcon = (wallet) => {
|
||
|
|
// return `${baseUrl}/datas/img/network/${slugify(wallet.type, {lower: true})}-logo.png`;
|
||
|
|
|
||
|
|
// }
|
||
|
|
// getWalletIcon = (wallet) => {
|
||
|
|
// return '../';
|
||
|
|
|
||
|
|
// }
|
||
|
|
|
||
|
|
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 (isIlinkCityWallet(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={require('../../assets/img/png/wallet.png')}
|
||
|
|
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'
|
||
|
|
}}>
|
||
|
|
{(this.user !== null) ?
|
||
|
|
(this.user.role === "REFILL_AGENT") &&
|
||
|
|
<View style={{flexDirection: 'row'}}>
|
||
|
|
<Tag primary
|
||
|
|
icon={<Icon name='swap-horizontal' size={20} color={Color.whiteColor}
|
||
|
|
style={{marginLeft: 15}}/>}
|
||
|
|
style={{
|
||
|
|
paddingRight: 10,
|
||
|
|
width: 120,
|
||
|
|
}}
|
||
|
|
onPress={() => {
|
||
|
|
const {result} = this.props.result;
|
||
|
|
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}}>
|
||
|
|
{I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
|
||
|
|
</Tag>
|
||
|
|
</View>
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
|
||
|
|
{this.user !== null ?
|
||
|
|
this.user.category === "hyper" &&
|
||
|
|
<Text style={[Typography.headline, Typography.semibold]}
|
||
|
|
numberOfLines={1}>{wallet.network}</Text>
|
||
|
|
: null}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
{
|
||
|
|
(this.user !== null) ?
|
||
|
|
(this.user.role === "REFILL_AGENT") ?
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginLeft: 30
|
||
|
|
}}>
|
||
|
|
<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>
|
||
|
|
: null
|
||
|
|
:null
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
handleLoadMore = () => {
|
||
|
|
|
||
|
|
//this.props.getHyperSuperTransactionHistoryReset();
|
||
|
|
console.log('load more call isDisplayHistoryOrdreRecette', this.state.isDisplayHistoryOrdreRecette);
|
||
|
|
console.log('load more call isDisplayHistoryDeclaration', this.state.isDisplayHistoryDeclaration);
|
||
|
|
console.log('load more call isDisplayHistoryReceipt', this.state.isDisplayHistoryReceipt);
|
||
|
|
if (this.state.isDisplayHistoryOrdreRecette) {
|
||
|
|
if (this.user !== null) {
|
||
|
|
if (this.user.category !== null) {
|
||
|
|
switch (this.user.category) {
|
||
|
|
case "hyper":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 2);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "super":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${this.user.agentId}?page=1&perPage=${this.state.perPage + 20}`, false, 2);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "geolocated":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=${this.state.perPage + 20}`, null, 0);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.state.isDisplayHistoryDeclaration) {
|
||
|
|
if (this.user !== null) {
|
||
|
|
if (this.user.category !== null) {
|
||
|
|
switch (this.user.category) {
|
||
|
|
case "hyper":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 1);
|
||
|
|
break;
|
||
|
|
|
||
|
|
case "super":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${this.user.agentId}?page=1&perPage=${this.state.perPage + 20}`, false, 1);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.state.isDisplayHistoryReceipt) {
|
||
|
|
if (this.user !== null) {
|
||
|
|
if (this.user.category !== null) {
|
||
|
|
switch (this.user.category) {
|
||
|
|
case "hyper":
|
||
|
|
this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 3);
|
||
|
|
break;
|
||
|
|
|
||
|
|
default:
|
||
|
|
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.setState({perPage: this.state.perPage + 20});
|
||
|
|
}
|
||
|
|
|
||
|
|
renderFooterLoader = () => {
|
||
|
|
|
||
|
|
if (!this.state.loadMore)
|
||
|
|
return null;
|
||
|
|
else
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}
|
||
|
|
>
|
||
|
|
{Platform.OS === 'android'
|
||
|
|
?
|
||
|
|
(
|
||
|
|
<>
|
||
|
|
<ProgressBarAndroid/>
|
||
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
||
|
|
|
||
|
|
</>
|
||
|
|
) :
|
||
|
|
<>
|
||
|
|
<ActivityIndicator size="small" color={'#ccc'}/>
|
||
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
||
|
|
</>
|
||
|
|
}
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
renderSuperHyperHistoryTransactionItem = (item, index) => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<TouchableOpacity onPress={() => {
|
||
|
|
this.setState({displaySuperHyperModalHistory: true, historyItemDetail: item})
|
||
|
|
}} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
||
|
|
{
|
||
|
|
this.state.isDisplayHistoryOrdreRecette ?
|
||
|
|
|
||
|
|
Object.keys(omit(item, ['id', 'id_actor', 'action', 'old_tax_units_count', 'id_network_tax', 'tax_units_count', 'old_data_id', 'id_royalty_fee', 'tax_deleted', 'amount', 'tax_name', 'prototype', 'tax_billing_period', 'tax_measurement_unit', 'tax_notice_amount', 'tax_notice_created_at', 'tax_unit_price', 'new_data_id', 'new_data_id', 'registration_year',
|
||
|
|
'id_receipt', 'image', 'id_agent', 'id_super', 'updated_at', 'created_at', 'id_tax_notice', 'is_company', 'recall_number',
|
||
|
|
'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date',
|
||
|
|
'revenue_order_created_at', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email', 'status',
|
||
|
|
'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone',
|
||
|
|
'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district',
|
||
|
|
'id_tax_notice', 'year_tax_paid_N_3', 'issuer_id', 'image', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval',
|
||
|
|
'neighborhood', 'network_id', 'id_network', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).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, 'history_action') ?
|
||
|
|
item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD")
|
||
|
|
: isEqual(element, 'date') ?
|
||
|
|
cutStringWithoutDot(item[element], 16)
|
||
|
|
: isArray(item[element]) ? "" : item[element]
|
||
|
|
}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
)) : this.state.isDisplayHistoryReceipt ?
|
||
|
|
|
||
|
|
Object.keys(omit(item, ['old_data_id', 'old_tax_units_count', 'id_actor', 'id_network_tax', 'tax_units_count', 'id', 'id_network', 'id_royalty_fee', 'tax_deleted', 'network_amount', 'registration_year', 'receipt_created_at', 'revenue_order_created_at', 'history_status', 'new_data_id', 'new_data_id',
|
||
|
|
'image', 'id_agent', 'id_super', 'date', 'id_revenue_order', 'is_company', 'recall_number',
|
||
|
|
'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date', 'status',
|
||
|
|
'status', 'revenue_order_created_at', 'issuer_id', 'image', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email',
|
||
|
|
'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone',
|
||
|
|
'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district', 'year_tax_paid_N_3', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval',
|
||
|
|
'neighborhood', 'network_id', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).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, 'history_action') ?
|
||
|
|
item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD")
|
||
|
|
: isEqual(element, 'updated_at') ?
|
||
|
|
cutStringWithoutDot(item[element], 16)
|
||
|
|
: isArray(item[element]) ? "" : item[element]
|
||
|
|
}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
)) :
|
||
|
|
Object.keys(omit(item, ['old_data_id', 'old_tax_units_count', 'id_actor', 'id_network_tax', 'tax_units_count', 'id', 'id_network', 'id_royalty_fee', 'tax_deleted', 'network_amount', 'registration_year', 'receipt_created_at', 'revenue_order_created_at', 'history_status', 'new_data_id', 'new_data_id',
|
||
|
|
'id_receipt', 'image', 'id_agent', 'id_super', 'date', 'updated_at', 'id_revenue_order', 'is_company', 'recall_number',
|
||
|
|
'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date', 'status',
|
||
|
|
'status', 'revenue_order_created_at', 'issuer_id', 'image', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email',
|
||
|
|
'action', 'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone',
|
||
|
|
'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district', 'year_tax_paid_N_3', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval',
|
||
|
|
'neighborhood', 'network_id', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).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, 'history_action') ?
|
||
|
|
item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD")
|
||
|
|
: isEqual(element, 'date') ?
|
||
|
|
cutStringWithoutDot(item[element], 16)
|
||
|
|
: isArray(item[element]) ? "" : 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>
|
||
|
|
|
||
|
|
{
|
||
|
|
this.state.isDisplayHistoryOrdreRecette ?
|
||
|
|
<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]}>{(this.state.historyItemDetail.type)}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{
|
||
|
|
this.user !== null ?
|
||
|
|
this.user.category !== "geolocated" &&
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ACTION')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('NAME')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.lastname}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('EMAIL')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.email}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('PHONE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.phone}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ISSUER_LASTNAME')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.issuer_lastname}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ISSUER_PHONE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.issuer_phone}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('OLD_VALUE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.old_data_id}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('NEW_VALUE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.new_data_id}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.hasOwnProperty("revenue_orders") &&
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('ORDRE_DE_RECETTE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.revenue_orders.map((ordreRecette) => {
|
||
|
|
let message = "";
|
||
|
|
message = ordreRecette.tax_name + " | " + ordreRecette.amount + " | " + ordreRecette.payment_deadline_date + "\n\n";
|
||
|
|
return message;
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
}
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('PRINCIPAL_AMOUNT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.amount}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('TOTAL_AMOUNT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.amount}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('DATE_AVIS_IMPOSITION')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.created_at}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('UPDATE_DATE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.updated_at}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('PAYMENT_DEADLINE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.payment_deadline_date}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('YEAR')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.year}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
:
|
||
|
|
<ScrollView persistentScrollbar={true}>
|
||
|
|
<View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
||
|
|
{
|
||
|
|
this.user !== null ?
|
||
|
|
this.user.category !== "geolocated" &&
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ACTION')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
: null
|
||
|
|
}
|
||
|
|
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ID_TAX_NOTICE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_tax_notice}</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.status}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('NAME')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.lastname}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('EMAIL')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.email}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('ARRONDISSEMENT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.district}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('NEIGHTBORHOOD')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.neighborhood}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('NOM_RESPONSABLE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.responsable_name}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('TECHNICAL_AGREMENT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.technical_approval}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('PHONE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.phone}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('PRINCIPAL_AMOUNT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.amount}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('OFFICE_PENALITIES')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.office_penalties}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('MONTH_DELAY_PENALTIES')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.month_delay_penalties}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('TOTAL_AMOUNT')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.amount}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.hasOwnProperty("penalties") ?
|
||
|
|
this.state.historyItemDetail.penalties.length > 0 ?
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('PENALITE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.penalties.map((penalite) => {
|
||
|
|
let message = "";
|
||
|
|
message = penalite.name + " \n " + (penalite.n_order === 2 ? penalite.tax_amount : penalite.amount) + (penalite.n_order === 1 ? ` | ${penalite.rate} %` : "") + "\n\n";
|
||
|
|
return message;
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View> : null : null
|
||
|
|
}
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.hasOwnProperty("taxes") &&
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('AVIS_IMPOSITION')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>
|
||
|
|
{
|
||
|
|
this.state.historyItemDetail.taxes.map((taxe) => {
|
||
|
|
let message = "";
|
||
|
|
if (taxe.hasOwnProperty('new_quantity'))
|
||
|
|
message = taxe.name + " | " + taxe.unit_price + " | (" + taxe.old_quantity + ", " + taxe.old_quantity + ")\n\n";
|
||
|
|
else
|
||
|
|
message = taxe.name + " | " + taxe.quantity + " | " + taxe.amount + "\n\n";
|
||
|
|
return message;
|
||
|
|
}
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
}
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('DATE_AVIS_IMPOSITION')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.created_at}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text style={[styles.body2]}>{I18n.t('UPDATE_DATE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.updated_at}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('PAYMENT_DEADLINE')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.payment_deadline_date}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={{flexDirection: 'row', marginTop: 10}}>
|
||
|
|
<View style={{flex: 1}}>
|
||
|
|
<Text tyle={[Typography.body2]}>{I18n.t('YEAR')}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.year}</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
<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 (
|
||
|
|
<>
|
||
|
|
<View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
||
|
|
{
|
||
|
|
this.state.isDisplayHistoryOrdreRecette ?
|
||
|
|
this.user.category === "hyper" ?
|
||
|
|
transactionHistoryHyperOrdreRecetteLabel().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>
|
||
|
|
)) :
|
||
|
|
transactionHistorySuperOrdreRecetteLabel().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>
|
||
|
|
)) :
|
||
|
|
transactionHistorySuperTaxNoticeLabel().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>
|
||
|
|
<FlatList
|
||
|
|
style={{flex: 1}}
|
||
|
|
ListEmptyComponent={() => {
|
||
|
|
return (
|
||
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
|
||
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
|
||
|
|
</View>)
|
||
|
|
}}
|
||
|
|
data={this.state.historyResult}
|
||
|
|
keyExtractor={(item, index) => item.id}
|
||
|
|
renderItem={({item, index}) => (
|
||
|
|
this.renderSuperHyperHistoryTransactionItem(item, index)
|
||
|
|
)}
|
||
|
|
onEndReached={({distanceFromEnd}) => {
|
||
|
|
if (this.state.page < resultHistoryHyperSuper.response.last_page) {
|
||
|
|
this.setState({loadMore: true}, () => {
|
||
|
|
this.handleLoadMore();
|
||
|
|
this.onEndReachedCalledDuringMomentum = true;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
ListFooterComponent={this.renderFooterLoader()}
|
||
|
|
onEndReachedThreshold={0.5}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
renderSuperHyperHistoryTransaction = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{
|
||
|
|
this.props.resultHistoryHyperSuper &&
|
||
|
|
<>
|
||
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.title3, Typography.semibold]}>
|
||
|
|
{
|
||
|
|
this.user !== null ?
|
||
|
|
this.user.category === "super" || this.user.category === "hyper" ?
|
||
|
|
this.state.historyTransactionMessage
|
||
|
|
:
|
||
|
|
I18n.t('HISTORY_OF') + ' ' + I18n.t('AVIS_IMPOSITIONS') :
|
||
|
|
null
|
||
|
|
}
|
||
|
|
</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,
|
||
|
|
flex: 1,
|
||
|
|
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.user !== null ?
|
||
|
|
this.user.category === "super" && this.user.role !== "REFILL_AGENT" ? (
|
||
|
|
<>
|
||
|
|
<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={() => {
|
||
|
|
this.props.navigation.push(route.modifyTaxeImposition);
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='pencil'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('MODIFY_AVIS_IMPOSITION')}
|
||
|
|
</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={() => {
|
||
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
||
|
|
optionSelect: optionOrdreRecetteScreen,
|
||
|
|
wallet,
|
||
|
|
onGoBack: () => this.refresh(),
|
||
|
|
lottie: {
|
||
|
|
source: require("../../assets/json/25237-receipt"),
|
||
|
|
loop: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//this.props.navigation.navigate(route.ordreRecette);
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<Icon name='file'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('ORDRE_DE_RECETTE')}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<View style={styles.transactionContainer}>
|
||
|
|
|
||
|
|
<View style={[styles.containerTouch]}>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.contain}
|
||
|
|
onPress={() => {
|
||
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
||
|
|
optionSelect: optionNumeroQuitanceScreen,
|
||
|
|
wallet,
|
||
|
|
onGoBack: () => this.refresh(),
|
||
|
|
lottie: {
|
||
|
|
source: require("../../assets/json/25237-receipt"),
|
||
|
|
loop: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='file'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('NUMERO_QUITANCE')}
|
||
|
|
</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={() => {
|
||
|
|
this.props.navigation.push(route.penalteTaxe, {
|
||
|
|
wallet,
|
||
|
|
onGoBack: () => this.refresh()
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='file'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('PENALITE_MANAGE')}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<View style={styles.transactionContainer}>
|
||
|
|
|
||
|
|
<View style={[styles.containerTouch]}>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.contain}
|
||
|
|
onPress={() => {
|
||
|
|
this.props.navigation.push(route.historicScreen, {
|
||
|
|
isAgentGeolocated: false,
|
||
|
|
isSuper: true,
|
||
|
|
isHyper: false
|
||
|
|
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='history'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('HISTORY')}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</>
|
||
|
|
) :
|
||
|
|
this.user.category === "geolocated" ?
|
||
|
|
|
||
|
|
<>
|
||
|
|
<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={() => {
|
||
|
|
this.props.navigation.push(route.numeroQuitance, {
|
||
|
|
isModify: false,
|
||
|
|
isAgentGeolocated: true
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='pencil'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('SAISIR_QUITANCE')}
|
||
|
|
</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={() => {
|
||
|
|
this.props.navigation.push(route.historicScreen, {
|
||
|
|
isAgentGeolocated: true,
|
||
|
|
isSuper: false,
|
||
|
|
isHyper: false
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='history'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('HISTORY')}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
</>
|
||
|
|
:
|
||
|
|
this.user.category === "hyper" &&
|
||
|
|
<>
|
||
|
|
<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={() => {
|
||
|
|
this.props.navigation.push(route.historicScreen, {
|
||
|
|
isAgentGeolocated: false,
|
||
|
|
isSuper: false,
|
||
|
|
isHyper: true
|
||
|
|
});
|
||
|
|
}}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='history'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner}/>
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('HISTORY')}
|
||
|
|
</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>
|
||
|
|
|
||
|
|
</> : null}
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</ScrollView>
|
||
|
|
{/* <View style={{flex: 1, paddingHorizontal: 20,}}>
|
||
|
|
{!this.isHomeRootView && this.renderHistoryTransaction(wallet)}
|
||
|
|
{this.isHomeRootView && this.renderSuperHyperHistoryTransaction()}
|
||
|
|
</View>*/}
|
||
|
|
</View>
|
||
|
|
</>)
|
||
|
|
:
|
||
|
|
(
|
||
|
|
<View style={{
|
||
|
|
flex: 1,
|
||
|
|
width: "100%",
|
||
|
|
height: "30%",
|
||
|
|
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}]}>
|
||
|
|
{
|
||
|
|
isIlinkCityWallet(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}]}>
|
||
|
|
{
|
||
|
|
transactionHistorySuperOrdreRecetteLabel().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 && this.state.loadMore ?
|
||
|
|
(
|
||
|
|
<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,
|
||
|
|
flexDirection: 'column',
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
})
|