834 lines
36 KiB
JavaScript
834 lines
36 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
|
||
|
|
import * as Utils from '../../utils/DeviceUtils';
|
||
|
|
import Icons from 'react-native-vector-icons/Ionicons'
|
||
|
|
import { Images } from '../../config/Images';
|
||
|
|
import CustomButton from '../../components/CustomButton';
|
||
|
|
import { Color } from '../../config/Color';
|
||
|
|
import Tag from '../../components/Tag';
|
||
|
|
import { IlinkEmitter } from "../../utils/events";
|
||
|
|
import { CreditCardInput } from "react-native-credit-card-input";
|
||
|
|
import { Typography, FontWeight } from '../../config/typography';
|
||
|
|
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
|
||
|
|
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
|
||
|
|
import { depositActionReset } from '../../webservice/DepositApi';
|
||
|
|
import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
|
||
|
|
import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
|
||
|
|
import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
|
||
|
|
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
|
||
|
|
import { baseUrl } from '../../webservice/IlinkConstants';
|
||
|
|
let moment = require('moment-timezone');
|
||
|
|
import 'moment/locale/fr'
|
||
|
|
import 'moment/locale/es-us'
|
||
|
|
import 'moment/locale/en-au'
|
||
|
|
import 'moment/locale/en-ca'
|
||
|
|
import 'moment/locale/en-ie'
|
||
|
|
import 'moment/locale/en-il'
|
||
|
|
import 'moment/locale/en-nz'
|
||
|
|
import 'moment/locale/en-gb'
|
||
|
|
import { connect } from 'react-redux';
|
||
|
|
import { bindActionCreators } from 'redux';
|
||
|
|
import { thousandsSeparators, isEmptyObject, transactionHistoryUser } from '../../utils/UtilsFunction';
|
||
|
|
import DeviceInfo from 'react-native-device-info'
|
||
|
|
|
||
|
|
let route = require('./../../route.json');
|
||
|
|
let slugify = require('slugify');
|
||
|
|
require('../../utils/Translations');
|
||
|
|
|
||
|
|
class WalletDetailUser extends Component {
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
this.state = {
|
||
|
|
index: 0,
|
||
|
|
heightHeader: Utils.heightHeader(),
|
||
|
|
isModalConfirmVisible: false,
|
||
|
|
wallet: null,
|
||
|
|
triggerTransferCommission: false,
|
||
|
|
loading: false,
|
||
|
|
isTriggerRefresh: false,
|
||
|
|
scrollHeaderY: 0
|
||
|
|
};
|
||
|
|
|
||
|
|
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.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
|
||
|
|
moment.locale(this.currentLocale);
|
||
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
||
|
|
|
||
|
|
/* this.props.getWalletTransactionHistoryReset();
|
||
|
|
this.props.depositActionReset();
|
||
|
|
this.props.resetWalletListDetailReducer();
|
||
|
|
|
||
|
|
if (this.isHomeRootView) {
|
||
|
|
let agentId = this.props.navigation.state.params.agentId;
|
||
|
|
this.props.getWalletDetailActivated(agentId, true);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
|
||
|
|
this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
|
||
|
|
} */
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
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() {
|
||
|
|
|
||
|
|
/* const { result } = this.props;
|
||
|
|
if (result !== null) {
|
||
|
|
if (typeof result.response !== 'undefined') {
|
||
|
|
const wallet = result.response[0];
|
||
|
|
this.setState({
|
||
|
|
wallet: wallet,
|
||
|
|
isTriggerRefresh: false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
} */
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
shouldComponentUpdate(nextProps, nextState) {
|
||
|
|
|
||
|
|
if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
|
||
|
|
|
||
|
|
return false;
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getWalletIcon = (wallet) => {
|
||
|
|
return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
getCreationDateToHumanFormat = (date) => {
|
||
|
|
let re = moment.tz(date, 'Etc/GMT+0').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);
|
||
|
|
this.props.getWalletTransactionHistory(wallet.id);
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
renderHeader = () => (
|
||
|
|
<View style={[
|
||
|
|
styles.containField,
|
||
|
|
{
|
||
|
|
backgroundColor: Color.cardBackgroundColor,
|
||
|
|
zIndex: 11,
|
||
|
|
shadowColor: Color.borderColor,
|
||
|
|
borderColor: Color.borderColor,
|
||
|
|
}
|
||
|
|
]}>
|
||
|
|
<View style={[styles.contentLeftItem]}>
|
||
|
|
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
|
||
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Gabon</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{
|
||
|
|
flex: 1,
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'flex-end',
|
||
|
|
}}>
|
||
|
|
<Animated.Image
|
||
|
|
source={{ uri: `https://ilink-app.com/mobilebackend/datas/img/network/uba-fs-ilink-logo.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'
|
||
|
|
}}>
|
||
|
|
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>UBA FS iLink</Text>
|
||
|
|
<Tag primary style={styles.tagFollow}>
|
||
|
|
{I18n.t('CREATION_IDENTIFICATION_CLIENT')}
|
||
|
|
</Tag>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
<View style={styles.contentLeftItem}>
|
||
|
|
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
|
||
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Il y'a deux jours</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]}>0</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
}}>
|
||
|
|
<View
|
||
|
|
style={[
|
||
|
|
styles.circlePoint,
|
||
|
|
{ backgroundColor: Color.primaryColor },
|
||
|
|
]}>
|
||
|
|
<Icons name='md-key'
|
||
|
|
size={28}
|
||
|
|
color={Color.whiteColor}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View>
|
||
|
|
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
|
||
|
|
{I18n.t('NUMERO_COMPTE')}
|
||
|
|
</Text>
|
||
|
|
<Text style={[Typography.body2]}>123456789</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
|
||
|
|
renderDetailWallet = () => {
|
||
|
|
return (
|
||
|
|
|
||
|
|
(<>
|
||
|
|
{this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
|
||
|
|
|
||
|
|
<View
|
||
|
|
style={styles.container}>
|
||
|
|
|
||
|
|
<Animated.View style={{
|
||
|
|
position: 'absolute',
|
||
|
|
width: "100%",
|
||
|
|
zIndex: 1,
|
||
|
|
backgroundColor: Color.primaryColor,
|
||
|
|
height: 140 - this.state.scrollHeaderY,
|
||
|
|
}} />
|
||
|
|
|
||
|
|
<ScrollView 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()}
|
||
|
|
|
||
|
|
<View
|
||
|
|
style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
|
||
|
|
|
||
|
|
{this.renderAccountDetail()}
|
||
|
|
|
||
|
|
<>
|
||
|
|
<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={() => { }}
|
||
|
|
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 numberOfLines={1} 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.createIdentification) }}
|
||
|
|
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>
|
||
|
|
|
||
|
|
<View style={styles.transactionContainer}>
|
||
|
|
|
||
|
|
<View style={[styles.containerTouch]}>
|
||
|
|
|
||
|
|
<TouchableOpacity style={styles.contain}
|
||
|
|
onPress={() => { this.props.navigation.push(route.createIdentification) }}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='cash-multiple'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner} />
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('NANO_CREDIT')}
|
||
|
|
</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 style={[styles.containerTouch]}>
|
||
|
|
<TouchableOpacity style={styles.contain}
|
||
|
|
onPress={() => { }}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
<Icon name='heart-multiple'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner} />
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('NANO_SANTE')}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
|
||
|
|
{I18n.t('VALIDATE_IDENTIFICATION_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.createIdentification) }}
|
||
|
|
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={{ flex: 1 }}>
|
||
|
|
|
||
|
|
{/* <TouchableOpacity style={styles.contain}
|
||
|
|
onPress={() => { this.props.navigation.push(route.createIdentification) }}
|
||
|
|
activeOpacity={0.9}>
|
||
|
|
|
||
|
|
<Icon name='md-outline'
|
||
|
|
color={Color.primaryColor}
|
||
|
|
size={30}
|
||
|
|
style={styles.imageBanner} />
|
||
|
|
|
||
|
|
<View style={[styles.content]}>
|
||
|
|
|
||
|
|
<View style={styles.contentTitle}>
|
||
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
||
|
|
{I18n.t('NANO_CREDIT')}
|
||
|
|
</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>
|
||
|
|
</>
|
||
|
|
|
||
|
|
|
||
|
|
{this.renderHistoryTransaction()}
|
||
|
|
</View>
|
||
|
|
|
||
|
|
|
||
|
|
</View>
|
||
|
|
|
||
|
|
</ScrollView>
|
||
|
|
</View>
|
||
|
|
</>)
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
renderHistoryTransactionItem = (item) => {
|
||
|
|
let re = moment.tz(item.date, 'Etc/GMT+0').format();
|
||
|
|
let date = moment(re).fromNow();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<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 = () => {
|
||
|
|
return (
|
||
|
|
transactionHistoryUser().map((item, ) => (
|
||
|
|
this.renderHistoryTransactionItem(item)
|
||
|
|
))
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
renderHistoryTransaction = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
|
||
|
|
<Text
|
||
|
|
style={[Typography.title3, Typography.semibold]}>
|
||
|
|
{I18n.t('TRANSACTION_HISTORY')}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<ScrollView style={styles.transactionContainer}>
|
||
|
|
{
|
||
|
|
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>
|
||
|
|
) : this.renderHistoryTransactionList()
|
||
|
|
}
|
||
|
|
</ScrollView>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<StatusBar
|
||
|
|
backgroundColor={Color.primaryDarkColor}
|
||
|
|
barStyle="light-content"
|
||
|
|
translucent={true}
|
||
|
|
/>
|
||
|
|
{
|
||
|
|
this.renderDetailWallet()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
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,
|
||
|
|
});
|
||
|
|
|
||
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
||
|
|
getWalletDetailActivated,
|
||
|
|
getWalletTransactionHistory,
|
||
|
|
transferCommissionAction,
|
||
|
|
resetWalletListDetailReducer,
|
||
|
|
resetCommissionReducer,
|
||
|
|
getWalletTransactionHistoryReset,
|
||
|
|
depositActionReset
|
||
|
|
}, dispatch);
|
||
|
|
|
||
|
|
export default connect(mapStateToProps, mapDispatchToProps)(WalletDetailUser);
|
||
|
|
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',
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
paddingTop: 10,
|
||
|
|
paddingLeft: 10,
|
||
|
|
paddingRight: 10,
|
||
|
|
},
|
||
|
|
containerTouch: {
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
alignItems: 'center',
|
||
|
|
marginRight: 1,
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
})
|