1178 lines
53 KiB
JavaScript
1178 lines
53 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Animated,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StatusBar,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import I18n from 'react-native-i18n'
|
|
import * as Utils from '../../utils/DeviceUtils';
|
|
import Icons from 'react-native-vector-icons/Ionicons'
|
|
import {Color} from '../../config/Color';
|
|
import omit from 'lodash/omit';
|
|
import Tag from '../../components/Tag';
|
|
import {IlinkEmitter} from "../../utils/events";
|
|
import {Typography} from '../../config/typography';
|
|
import {responsiveWidth,} from 'react-native-responsive-dimensions';
|
|
import {getWalletDetailActivated, resetWalletListDetailReducer} from '../../webservice/WalletApi';
|
|
import {depositActionReset} from '../../webservice/DepositApi';
|
|
import {
|
|
getWalletTransactionHistoryReset,
|
|
getWalletTransactionHistoryUser
|
|
} from '../../webservice/WalletTransactionHistoryApi';
|
|
import {getUserIdentificationAction, getUserIdentificationResetAction} from '../../webservice/IdentificationApi';
|
|
import {resetCommissionReducer, transferCommissionAction} from '../../webservice/WalletTransferCommission';
|
|
import Dialog from "react-native-dialog";
|
|
import isEqual from 'lodash/isEqual';
|
|
import {baseUrl} from '../../webservice/IlinkConstants';
|
|
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 {
|
|
cutString,
|
|
cutStringWithoutDot,
|
|
isEmptyObject,
|
|
optionDepotUserScreen,
|
|
optionIdentificationUserScreen,
|
|
optionLinkAccountUserScreen,
|
|
optionNanoCreditScreen, optionNanoSanteUser,
|
|
optionPaiementFacture,
|
|
optionRetraitUserScreen,
|
|
transactionHistoryIlinkLabel
|
|
} from '../../utils/UtilsFunction';
|
|
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 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,
|
|
user: null,
|
|
displayModalHistory: false,
|
|
historyItemDetail: null,
|
|
isIdentified: false,
|
|
isIdentifiedValidated: false,
|
|
|
|
};
|
|
|
|
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 = I18n.locale.includes("fr") ? "fr" : "en-gb";
|
|
moment.locale(this.currentLocale);
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
IlinkEmitter.on("refreshWallet", this.refresh);
|
|
|
|
this.props.getWalletTransactionHistoryReset();
|
|
this.props.depositActionReset();
|
|
this.props.resetWalletListDetailReducer();
|
|
|
|
this.props.getUserIdentificationResetAction();
|
|
console.warn("Wallet User Props", this.props);
|
|
|
|
this.getWalletDetail();
|
|
|
|
this.willFocus = this.props.navigation.addListener(
|
|
'willFocus',
|
|
payload => {
|
|
this.getWalletDetail();
|
|
});
|
|
}
|
|
|
|
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')
|
|
}
|
|
};
|
|
|
|
getWalletDetail = () => {
|
|
this.props.getWalletDetailActivated(this.props.navigation.state.params.userId, null);
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({user});
|
|
this.props.getUserIdentificationAction(user.phone);
|
|
this.props.getWalletTransactionHistoryUser(user.id);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
componentDidMount() {
|
|
const {result, resultUserIdentification, errorUserIdentification} = this.props;
|
|
|
|
if (result !== null) {
|
|
if (typeof result.response !== 'undefined') {
|
|
const wallet = result.response[0];
|
|
console.log("WALLET RECUPERER", wallet);
|
|
this.setState({
|
|
wallet: wallet,
|
|
isTriggerRefresh: false
|
|
});
|
|
}
|
|
}
|
|
|
|
if (resultUserIdentification !== null) {
|
|
console.log("RESULT NUMBER DETAIL", resultUserIdentification);
|
|
if (typeof resultUserIdentification.response !== 'undefined') {
|
|
this.setState({
|
|
isIdentified: resultUserIdentification.response.isIdentified,
|
|
isIdentifiedValidated: resultUserIdentification.response.isIdentifiedValidated,
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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, 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 = () => {
|
|
let userId = this.props.navigation.state.params.userId;
|
|
this.props.getWalletDetailActivated(userId, null);
|
|
}
|
|
|
|
|
|
renderHeader = (wallet) => (
|
|
<View style={[
|
|
styles.containField,
|
|
{
|
|
backgroundColor: Color.cardBackgroundColor,
|
|
zIndex: 11,
|
|
shadowColor: Color.borderColor,
|
|
borderColor: Color.borderColor,
|
|
}
|
|
]}>
|
|
<View style={[styles.contentLeftItem]}>
|
|
<Text numberOfLines={1} style={[Typography.caption2, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
|
|
</View>
|
|
|
|
<View style={{
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
}}>
|
|
<Animated.Image
|
|
source={{uri: this.getWalletIcon(wallet)}}
|
|
style={{
|
|
width: 120,
|
|
height: 120,
|
|
borderRadius: 60,
|
|
position: 'absolute',
|
|
alignSelf: 'center',
|
|
backgroundColor: Color.whiteColor,
|
|
bottom: 70,
|
|
transform: [{
|
|
scale: this.imageScale()
|
|
},
|
|
{
|
|
translateY: this.imageTranslateY()
|
|
}]
|
|
}}/>
|
|
|
|
<View style={{
|
|
marginTop: 1, flex: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end'
|
|
}}>
|
|
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
|
|
<View style={{flexDirection: 'row'}}>
|
|
<Tag icon={<Icon name='link' size={20} color={Color.whiteColor} style={{marginLeft: -15}}/>}
|
|
style={{
|
|
paddingRight: 10,
|
|
width: 120,
|
|
borderTopRightRadius: 0,
|
|
borderBottomRightRadius: 0,
|
|
borderRightWidth: 1,
|
|
borderRightColor: Color.whiteColor
|
|
}}
|
|
primary
|
|
onPress={() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionLinkAccountUserScreen,
|
|
lottie: {
|
|
source: require("./../../datas/json/link_card.json"),
|
|
loop: true
|
|
},
|
|
isIdentified: this.props.resultUserIdentification.response.isIdentified
|
|
});
|
|
}}>
|
|
{I18n.t('LINK_CARD_REATTACH')}
|
|
</Tag>
|
|
<Tag icon={<Icon name='update' size={20} color={Color.whiteColor}/>} primary
|
|
style={{width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0,}}
|
|
onPress={() => {
|
|
this._scrollView.scrollToEnd();
|
|
}}>
|
|
{I18n.t('HISTORY')}
|
|
</Tag>
|
|
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.contentLeftItem}>
|
|
<Text numberOfLines={1}
|
|
style={[Typography.caption2, Typography.semibold]}>{I18n.t('CREATION_DATE')}</Text>
|
|
<Text numberOfLines={1} adjustsFontSizeToFit={true}
|
|
style={Typography.caption1}>{moment(wallet.created_date).format('DD/MM/YYYY')}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
renderLoader = () => {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{Platform.OS === 'android'
|
|
?
|
|
(
|
|
<>
|
|
<ProgressBarAndroid/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
) :
|
|
<>
|
|
<ActivityIndicator size="large" color={'#ccc'}/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
renderAccountDetail = (wallet) => (
|
|
<View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-between'}}>
|
|
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
}}>
|
|
<View
|
|
style={[
|
|
styles.circlePoint,
|
|
{backgroundColor: Color.primaryColor},
|
|
]}>
|
|
<Icons name='md-wallet'
|
|
size={28}
|
|
color={Color.whiteColor}
|
|
/>
|
|
</View>
|
|
<View>
|
|
<Text style={[Typography.title3, Color.primaryColor], {marginBottom: 3}}>
|
|
{I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
|
|
</Text>
|
|
<Text
|
|
style={[Typography.body2]}>{`${thousands(wallet.balance, ' ')} ${wallet.currency_code}`}</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]}>{wallet.user_code}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
);
|
|
|
|
renderDetailWallet = (wallet) => {
|
|
return (
|
|
!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,
|
|
}}/>
|
|
|
|
<ScrollView ref={component => this._scrollView = component}
|
|
style={{
|
|
paddingHorizontal: 20, position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: 2
|
|
}}
|
|
scrollEventThrottle={8}
|
|
onScroll={Animated.event([
|
|
{
|
|
nativeEvent: {
|
|
contentOffset: {y: this.scrollY},
|
|
},
|
|
},
|
|
],
|
|
{
|
|
listener: (event) => {
|
|
this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y});
|
|
}
|
|
})}>
|
|
<View style={{marginTop: 80,}}>
|
|
|
|
{this.renderHeader(wallet)}
|
|
|
|
<View
|
|
style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
|
|
|
|
{this.renderAccountDetail(wallet)}
|
|
|
|
<>
|
|
<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.walletOptionSelect, {
|
|
optionSelect: optionDepotUserScreen,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/wallet_with_cash.json"),
|
|
loop: false
|
|
}
|
|
})
|
|
}}
|
|
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('ENVOIE_ARGENT')}
|
|
</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.walletOptionSelect, {
|
|
optionSelect: optionRetraitUserScreen,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/wallet_with_cash.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
}}
|
|
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('RETRAIT_ARGENT')}
|
|
</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: optionNanoCreditScreen,
|
|
wallet,
|
|
lottie: {
|
|
source: require("./../../datas/json/cedit-cards.json"),
|
|
loop: true
|
|
},
|
|
isNanoCredit: true
|
|
});
|
|
}
|
|
}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='cash-multiple'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={{paddingTop: 5,}}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('NANO_CREDIT')}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionNanoSanteUser,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/spend-healthies.json"),
|
|
loop: true
|
|
}
|
|
})
|
|
}}
|
|
activeOpacity={0.9}>
|
|
<Icon name='heart-multiple'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={{paddingTop: 20,}}>
|
|
<Text
|
|
style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('NANO_SANTE')}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.transactionContainer}>
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionPaiementFacture,
|
|
onGoBack: () => this.refresh(),
|
|
lottie: {
|
|
source: require("./../../datas/json/paiement_facture.json"),
|
|
loop: true
|
|
}
|
|
});
|
|
}} activeOpacity={0.9}>
|
|
|
|
<Icon name='file-document'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={styles.contentTitle}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('PAIEMENT_FACTURE')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
/*if (!this.state.isIdentified)
|
|
this.props.navigation.push(route.createIdentificationUser)
|
|
else
|
|
displayToast(I18n.t('ALREADY_IDENTIFIED')); */
|
|
this.props.navigation.push(route.walletOptionSelect, {
|
|
optionSelect: optionIdentificationUserScreen,
|
|
lottie: {
|
|
source: require("./../../datas/json/identification.json"),
|
|
loop: true
|
|
},
|
|
isIdentified: this.props.resultUserIdentification.response.isIdentified
|
|
})
|
|
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name='pencil-plus'
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={{paddingTop: 20,}}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t('CREATION_IDENTIFICATION_CLIENT')}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
<Text
|
|
style={[Typography.overline, Color.grayColor], {paddingVertical: 5}}
|
|
numberOfLines={5}>
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</>
|
|
|
|
{this.renderHistoryTransaction(wallet)}
|
|
</View>
|
|
</View>
|
|
|
|
</ScrollView>
|
|
</View>
|
|
</>)
|
|
:
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
|
|
</View>
|
|
)
|
|
)
|
|
|
|
}
|
|
|
|
renderModalHistoryDetail = () => {
|
|
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>
|
|
|
|
);
|
|
}
|
|
|
|
renderHistoryTransactionItem = (item, index, wallet) => {
|
|
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.setState({displayModalHistory: true, historyItemDetail: item})
|
|
}} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
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], ' ')}`
|
|
: isEqual(element, 'destinataire') ?
|
|
item[element].length > 13 ? cutString(item[element], 13) : item[element]
|
|
: isEqual(element, 'date') ?
|
|
cutStringWithoutDot(item[element], 16)
|
|
: item[element]
|
|
}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</TouchableOpacity>
|
|
);
|
|
|
|
/* <View
|
|
key={item.id}
|
|
style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
|
|
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
|
|
<View style={styles.iconContent}>
|
|
<Icon name='arrow-bottom-right'
|
|
color={Color.primaryColor} size={20} />
|
|
</View>
|
|
<View>
|
|
<Text style={Typography.subhead}>{item.description}</Text>
|
|
<Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
|
|
{date}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View> */
|
|
|
|
}
|
|
|
|
renderHistoryTransactionList = (wallet) => {
|
|
const {resultTransaction, errorTransaction} = this.props;
|
|
if (errorTransaction !== null) {
|
|
if (typeof errorTransaction.data !== 'undefined') {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorTransaction.data.error}</Text>
|
|
</View>
|
|
)
|
|
} else {
|
|
return (
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
<Text style={Typography.body1}>{errorTransaction}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
}
|
|
|
|
if (resultTransaction !== null) {
|
|
if (resultTransaction.response !== null) {
|
|
return (
|
|
Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
|
|
(
|
|
<>
|
|
<View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
|
|
{
|
|
transactionHistoryIlinkLabel().map((item, index) => (
|
|
<View style={{alignItems: 'center'}} key={index}>
|
|
<Icon name={item.icon} size={24} color={Color.primaryColor}/>
|
|
<Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
|
|
{I18n.t(item.label)}
|
|
</Text>
|
|
</View>
|
|
))
|
|
}
|
|
</View>
|
|
{
|
|
resultTransaction.response.map((item, index) => (
|
|
this.renderHistoryTransactionItem(item, index, wallet)
|
|
))
|
|
}
|
|
</>
|
|
) :
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
|
|
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
|
|
</View>
|
|
)
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
renderHistoryTransaction = (wallet) => {
|
|
|
|
return (
|
|
<>
|
|
{
|
|
this.props.loadingTransaction ?
|
|
(
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
|
{Platform.OS === 'android'
|
|
?
|
|
(
|
|
<>
|
|
<ProgressBarAndroid/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
|
|
</>
|
|
) :
|
|
<>
|
|
<ActivityIndicator size="large" color={'#ccc'}/>
|
|
<Text>{I18n.t('LOADING_DOTS')}</Text>
|
|
</>
|
|
}
|
|
</View>
|
|
) :
|
|
<>
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
|
<Text
|
|
style={[Typography.title3, Typography.semibold]}>
|
|
{I18n.t('TRANSACTION_HISTORY')}
|
|
</Text>
|
|
</View>
|
|
|
|
{this.renderHistoryTransactionList(wallet)}
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
<>
|
|
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
|
|
<StatusBar
|
|
backgroundColor={Color.primaryDarkColor}
|
|
barStyle="light-content"
|
|
translucent={true}
|
|
/>
|
|
{
|
|
((this.props.loading || this.props.loadingUserIdentification) ?
|
|
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,
|
|
|
|
loadingUserIdentification: state.getUserIdentificationReducer.loading,
|
|
resultUserIdentification: state.getUserIdentificationReducer.result,
|
|
errorUserIdentification: state.getUserIdentificationReducer.error,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
getWalletDetailActivated,
|
|
getWalletTransactionHistoryUser,
|
|
transferCommissionAction,
|
|
resetWalletListDetailReducer,
|
|
resetCommissionReducer,
|
|
getWalletTransactionHistoryReset,
|
|
depositActionReset,
|
|
getUserIdentificationAction,
|
|
getUserIdentificationResetAction
|
|
}, 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',
|
|
},
|
|
contentService: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'space-between',
|
|
},
|
|
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',
|
|
flex: 1,
|
|
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,
|
|
}
|
|
})
|