ilink-world/screens/wallet/WalletDetailUser.js

907 lines
42 KiB
JavaScript
Raw Normal View History

2020-05-30 21:58:22 +00:00
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';
2020-06-17 14:09:27 +00:00
import { getUserIdentificationAction, getUserIdentificationResetAction } from '../../webservice/IdentificationApi';
2020-05-30 21:58:22 +00:00
import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
2020-06-02 17:12:39 +00:00
import isEqual from 'lodash/isEqual';
2020-05-30 21:58:22 +00:00
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';
2020-06-17 14:09:27 +00:00
import { thousandsSeparators, isEmptyObject, transactionHistoryUser, optionDepotUserScreen, optionRetraitUserScreen, transactionHistoryLabel, optionPaiementFacture, displayToast } from '../../utils/UtilsFunction';
2020-06-10 03:10:45 +00:00
import DeviceInfo from 'react-native-device-info';
2020-06-17 14:09:27 +00:00
import { readUser } from '../../webservice/AuthApi';
2020-06-10 03:10:45 +00:00
const thousands = require('thousands');
2020-05-30 21:58:22 +00:00
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,
2020-06-17 14:09:27 +00:00
scrollHeaderY: 0,
user: null,
isIdentified: false,
isIdentifiedValidated: false,
2020-05-30 21:58:22 +00:00
};
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));
2020-06-02 09:05:50 +00:00
this.props.getWalletTransactionHistoryReset();
this.props.depositActionReset();
this.props.resetWalletListDetailReducer();
this.props.getWalletDetailActivated(this.props.navigation.state.params.userId, null);
this.props.getWalletTransactionHistory(this.props.navigation.state.params.userId);
2020-06-17 14:09:27 +00:00
this.props.getUserIdentificationResetAction();
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.setState({ user });
this.props.getUserIdentificationAction(user.id);
}
}
});
2020-05-30 21:58:22 +00:00
}
2020-06-02 09:05:50 +00:00
2020-05-30 21:58:22 +00:00
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() {
2020-06-17 14:09:27 +00:00
const { result, resultUserIdentification, errorUserIdentification } = this.props;
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
if (result !== null) {
if (typeof result.response !== 'undefined') {
const wallet = result.response[0];
this.setState({
wallet: wallet,
isTriggerRefresh: false
})
}
}
2020-05-30 21:58:22 +00:00
2020-06-17 14:09:27 +00:00
if (resultUserIdentification !== null) {
console.log("RESULT NUMBER DETAIL", resultUserIdentification);
if (typeof resultUserIdentification.response !== 'undefined') {
this.setState({
isIdentified: resultUserIdentification.response.isIdentified,
isIdentifiedValidated: resultUserIdentification.response.isIdentifiedValidated,
})
}
}
2020-05-30 21:58:22 +00:00
}
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 = () => {
2020-06-02 17:12:39 +00:00
let userId = this.props.navigation.state.params.userId;
this.props.getWalletDetailActivated(userId, null);
2020-05-30 21:58:22 +00:00
}
2020-06-02 09:05:50 +00:00
renderHeader = (wallet) => (
2020-05-30 21:58:22 +00:00
<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>
2020-06-02 09:05:50 +00:00
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Pays</Text>
2020-05-30 21:58:22 +00:00
</View>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
}}>
<Animated.Image
2020-06-02 09:05:50 +00:00
source={{ uri: this.getWalletIcon(wallet) }}
2020-05-30 21:58:22 +00:00
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'
}}>
2020-06-02 09:05:50 +00:00
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
2020-06-10 03:10:45 +00:00
<Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary style={styles.tagFollow}
onPress={() => {
this._scrollView.scrollToEnd();
}}>
{I18n.t('TRANSACTION_HISTORY')}
2020-05-30 21:58:22 +00:00
</Tag>
</View>
</View>
<View style={styles.contentLeftItem}>
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
2020-06-02 09:05:50 +00:00
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{this.getCreationDateToHumanFormat(wallet.createdAt)}</Text>
2020-05-30 21:58:22 +00:00
</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>
2020-06-10 03:10:45 +00:00
<Text style={[Typography.body2]}>{thousands(wallet.balance, ' ')}</Text>
2020-05-30 21:58:22 +00:00
</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>
2020-06-02 09:05:50 +00:00
<Text style={[Typography.body2]}>{wallet.user_code}</Text>
2020-05-30 21:58:22 +00:00
</View>
</View>
</View>
);
2020-06-02 09:05:50 +00:00
renderDetailWallet = (wallet) => {
2020-05-30 21:58:22 +00:00
return (
2020-06-02 09:05:50 +00:00
!isEmptyObject(wallet) ?
(<>
{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,
}} />
2020-06-10 03:10:45 +00:00
<ScrollView ref={component => this._scrollView = component}
style={{
paddingHorizontal: 20, position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
}}
2020-06-02 09:05:50 +00:00
scrollEventThrottle={8}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: { y: this.scrollY },
},
2020-05-30 21:58:22 +00:00
},
2020-06-02 09:05:50 +00:00
],
{ listener: (event) => { this.setState({ scrollHeaderY: event.nativeEvent.contentOffset.y }); } })}>
<View style={{ marginTop: 80, }}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
{this.renderHeader(wallet)}
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View
style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
{this.renderAccountDetail(wallet)}
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTIONS')}
</Text>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.push(route.walletOptionSelect, {
2020-06-10 03:10:45 +00:00
optionSelect: optionDepotUserScreen,
lottie: {
source: require("./../../datas/json/wallet_with_cash.json"),
loop: false
}
2020-06-02 09:05:50 +00:00
})
}}
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>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.push(route.walletOptionSelect, {
2020-06-10 03:10:45 +00:00
optionSelect: optionRetraitUserScreen,
lottie: {
source: require("./../../datas/json/wallet_with_cash.json"),
loop: true
}
2020-06-02 09:05:50 +00:00
})
}}
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>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
</TouchableOpacity>
</View>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
<View style={styles.transactionContainer}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={[styles.containerTouch]}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<TouchableOpacity style={styles.contain}
2020-06-02 17:12:39 +00:00
onPress={() => { }}
2020-06-02 09:05:50 +00:00
activeOpacity={0.9}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<Icon name='cash-multiple'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={[styles.content]}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_CREDIT')}
</Text>
</View>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
2020-06-10 03:10:45 +00:00
2020-06-02 09:05:50 +00:00
</Text>
</View>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
</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}>
2020-06-10 03:10:45 +00:00
{I18n.t('NANO_SANTE_DESCRIPTION')}
2020-06-02 09:05:50 +00:00
</Text>
</View>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
</TouchableOpacity>
</View>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
<View style={styles.transactionContainer}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={[styles.containerTouch]}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<TouchableOpacity style={styles.contain}
2020-06-16 09:25:46 +00:00
onPress={() => {
this.props.navigation.push(route.walletOptionSelect, {
optionSelect: optionPaiementFacture,
onGoBack: () => this.refresh(),
lottie: {
source: require("./../../datas/json/paiement_facture.json"),
loop: true
}
})
}} activeOpacity={0.9}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<Icon name='file-document'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={[styles.content]}>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('PAIEMENT_FACTURE')}
</Text>
</View>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
</Text>
</View>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
</View>
</TouchableOpacity>
</View>
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
<View style={[styles.containerTouch]}>
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
<TouchableOpacity style={styles.contain}
onPress={() => {
2020-06-17 14:09:27 +00:00
if (this.state.isIdentified)
this.props.navigation.push(route.createIdentificationUser)
else
displayToast(I18n.t('ALREADY_IDENTIFIED'))
2020-06-10 03:10:45 +00:00
}}
activeOpacity={0.9}>
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
<Icon name='pencil-plus'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
<View style={[styles.content]}>
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
2020-06-17 14:09:27 +00:00
{I18n.t('CREATION_IDENTIFICATION_CLIENT')}
2020-06-10 03:10:45 +00:00
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
</Text>
</View>
2020-05-30 21:58:22 +00:00
2020-06-10 03:10:45 +00:00
</View>
</TouchableOpacity>
2020-06-02 09:05:50 +00:00
</View>
2020-05-30 21:58:22 +00:00
</View>
2020-06-02 09:05:50 +00:00
</>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
{this.renderHistoryTransaction()}
</View>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
</View>
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
</ScrollView>
</View>
</>)
:
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
</View>
)
2020-05-30 21:58:22 +00:00
)
2020-06-02 09:05:50 +00:00
2020-05-30 21:58:22 +00:00
}
2020-06-02 17:12:39 +00:00
renderHistoryTransactionItem = (item, index) => {
2020-05-30 21:58:22 +00:00
return (
2020-06-02 17:12:39 +00:00
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{
Object.keys(item).map((element, i) => (
<View style={{ alignItems: 'center' }} key={i}>
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
{isEqual(element, 'date')
? this.getCreationDateToHumanFormat(item[element])
:
item[element]
}
</Text>
</View>
))
}
2020-05-30 21:58:22 +00:00
</View>
);
2020-06-02 17:12:39 +00:00
/* <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> */
2020-05-30 21:58:22 +00:00
}
renderHistoryTransactionList = () => {
return (
2020-06-02 17:12:39 +00:00
<>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTION_HISTORY')}
</Text>
</View>
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{
transactionHistoryLabel().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 }}>
{item.label}
</Text>
</View>
))
}
</View>
{
transactionHistoryUser().map((item, index) => (
this.renderHistoryTransactionItem(item, index)
))
}
</>
2020-05-30 21:58:22 +00:00
)
}
renderHistoryTransaction = () => {
return (
<>
2020-06-02 17:12:39 +00:00
{
this.props.loadingTransaction ?
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{Platform.OS === 'android'
?
(
2020-05-30 21:58:22 +00:00
<>
2020-06-02 17:12:39 +00:00
<ProgressBarAndroid />
2020-05-30 21:58:22 +00:00
<Text>{I18n.t('LOADING_DOTS')}</Text>
2020-06-02 17:12:39 +00:00
2020-05-30 21:58:22 +00:00
</>
2020-06-02 17:12:39 +00:00
) :
<>
<ActivityIndicator size="large" color={'#ccc'} />
<Text>{I18n.t('LOADING_DOTS')}</Text>
</>
}
</View>
) : this.renderHistoryTransactionList()
}
2020-05-30 21:58:22 +00:00
</>
)
}
render() {
return (
<>
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={true}
/>
{
2020-06-17 14:09:27 +00:00
((this.props.loading || this.props.loadingUserIdentification) ?
2020-06-02 09:05:50 +00:00
this.renderLoader() :
(
this.props.result !== null ?
Array.isArray(this.props.result.response) && (this.props.result.response.length) === 0 ?
2020-05-30 21:58:22 +00:00
2020-06-02 09:05:50 +00:00
<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
)
)
2020-05-30 21:58:22 +00:00
}
</>
);
}
}
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,
2020-06-17 14:09:27 +00:00
loadingUserIdentification: state.getUserIdentificationReducer.loading,
resultUserIdentification: state.getUserIdentificationReducer.result,
errorUserIdentification: state.getUserIdentificationReducer.error,
2020-05-30 21:58:22 +00:00
});
const mapDispatchToProps = dispatch => bindActionCreators({
getWalletDetailActivated,
getWalletTransactionHistory,
transferCommissionAction,
resetWalletListDetailReducer,
resetCommissionReducer,
getWalletTransactionHistoryReset,
2020-06-17 14:09:27 +00:00
depositActionReset,
getUserIdentificationAction,
getUserIdentificationResetAction
2020-05-30 21:58:22 +00:00
}, 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',
},
2020-06-02 09:05:50 +00:00
contentService: {
paddingVertical: 10,
borderBottomWidth: 0.5,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 0.5,
},
2020-05-30 21:58:22 +00:00
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',
2020-06-02 17:12:39 +00:00
flex: 1,
2020-05-30 21:58:22 +00:00
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,
}
})