ilink-world/screens/wallet/WalletDetail.js

586 lines
21 KiB
JavaScript
Raw Normal View History

2020-04-11 22:33:59 +00:00
import React, { Component } from 'react';
2020-04-20 10:43:01 +00:00
import { Animated, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
2020-04-11 22:33:59 +00:00
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';
2020-04-20 10:43:01 +00:00
import Icons from 'react-native-vector-icons/Ionicons'
2020-04-11 22:33:59 +00:00
import { Images } from '../../config/Images';
2020-04-17 22:03:04 +00:00
import CustomButton from '../../components/CustomButton';
2020-04-11 22:33:59 +00:00
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
2020-04-17 22:03:04 +00:00
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput } from "react-native-credit-card-input";
2020-04-20 10:43:01 +00:00
import { Typography, FontWeight } from '../../config/typography';
import getWalletActivated from '../../webservice/WalletApi';
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 { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
let slugify = require('slugify');
2020-04-17 22:03:04 +00:00
require('../../utils/Translations');
2020-04-11 22:33:59 +00:00
const FirstRoute = () => (
2020-04-17 22:03:04 +00:00
<ScrollView style={[styles.container, { padding: 20 }]}>
<View style={{ flex: 1 }}>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
2020-04-20 10:43:01 +00:00
<Text style={Typography.body2}>
2020-04-17 22:03:04 +00:00
{I18n.t('ENTER_YOUR_CARD_ID')}
2020-04-20 10:43:01 +00:00
</Text>
2020-04-17 22:03:04 +00:00
</View>
</View>
<View style={{ marginTop: 10 }}>
<CreditCardInput />
</View>
2020-04-11 22:33:59 +00:00
2020-04-17 22:03:04 +00:00
<View style={{ margin: 20 }}>
<CustomButton outline onPress={() => { console.log('click') }}>
{I18n.t('VALIDATE')}
</CustomButton>
</View>
</ScrollView>
2020-04-11 22:33:59 +00:00
);
const SecondRoute = () => (
2020-04-17 22:03:04 +00:00
<ScrollView style={[styles.container, { padding: 20 }]}>
2020-04-11 22:33:59 +00:00
2020-04-17 22:03:04 +00:00
</ScrollView>
2020-04-11 22:33:59 +00:00
);
2020-04-20 10:43:01 +00:00
class WalletDetail extends Component {
2020-04-11 22:33:59 +00:00
constructor(props) {
super(props);
this.state = {
index: 0,
routes: [
{ key: 'depot', title: I18n.t('DEPOSIT') },
{ key: 'retrait', title: I18n.t('WITHDRAWAL') }
2020-04-20 10:43:01 +00:00
],
heightHeader: Utils.heightHeader(),
2020-04-11 22:33:59 +00:00
};
2020-04-20 10:43:01 +00:00
slugify.extend({ '+': 'plus' });
2020-04-11 22:33:59 +00:00
this.scrollY = new Animated.Value(0);
2020-04-20 10:43:01 +00:00
this.deltaY = new Animated.Value(0);
this.heightImageBanner = Utils.scaleWithPixel(250, 1);
this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
2020-04-17 22:03:04 +00:00
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
}
2020-04-20 10:43:01 +00:00
2020-04-17 22:03:04 +00:00
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 navigationOptions = ({ navigation }) => {
return {
headerTitle: I18n.t('WALLET'),
headerStyle: {
backgroundColor: Color.primaryColor,
paddingTop: 10
},
headerTitleStyle: {
color: "white"
}
}
};
2020-04-20 10:43:01 +00:00
componentDidMount() {
if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
let agentId = this.props.navigation.state.params.agentId;
this.props.getWalletActivated(agentId);
}
}
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();
}
2020-04-17 22:03:04 +00:00
updateLangue() {
this.props.navigation.setParams({ name: I18n.t('WALLET') })
this.forceUpdate()
2020-04-11 22:33:59 +00:00
}
2020-04-17 22:03:04 +00:00
2020-04-11 22:33:59 +00:00
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',
});
}
2020-04-20 10:43:01 +00:00
2020-04-11 22:33:59 +00:00
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'
}}>
2020-04-20 10:43:01 +00:00
<Text style={Typography.headline} style={{ color }}>
2020-04-11 22:33:59 +00:00
{
(route.key === 'depot') ?
(<Icon name='arrow-bottom-right'
color={color} size={20} />)
:
(<Icon name='arrow-top-left'
color={color} size={20} />)
}
{` ${route.title}`}
2020-04-20 10:43:01 +00:00
</Text>
2020-04-11 22:33:59 +00:00
</View>
)}
/>
);
2020-04-20 10:43:01 +00:00
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.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
</View>
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
<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>
<Tag primary style={styles.tagFollow}>
{I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
</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}>{this.getCreationDateToHumanFormat(wallet.created_date)}</Text>
</View>
</View>
);
renderLoader = () => {
2020-04-11 22:33:59 +00:00
return (
2020-04-20 10:43:01 +00:00
<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>
)
}
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
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]}>{wallet.balance_princ}</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={[
styles.circlePoint,
{ backgroundColor: Color.primaryColor },
]}>
<Icons name='md-cash'
size={28}
color={Color.whiteColor}
/>
</View>
<View>
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('COMMISSION_ACCOUNT_TITLE')}
</Text>
<Text style={Typography.body2}>{wallet.balance_com}</Text>
</View>
</View>
</View>
);
renderDetailWallet = (wallet) => {
return (
<View
style={styles.container}>
<Animated.View style={{
position: 'absolute',
width: "100%",
zIndex: 1,
backgroundColor: Color.primaryColor,
height: 150
}} />
2020-04-11 22:33:59 +00:00
2020-04-17 22:03:04 +00:00
<ScrollView style={{
2020-04-20 10:43:01 +00:00
paddingHorizontal: 20, position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
2020-04-17 22:03:04 +00:00
}}
scrollEventThrottle={8}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: { y: this.scrollY },
},
},
])}>
2020-04-20 10:43:01 +00:00
<View style={{ marginTop: 80, }}>
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
{this.renderHeader(wallet)}
2020-04-11 22:33:59 +00:00
2020-04-20 10:43:01 +00:00
<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>
2020-04-17 22:03:04 +00:00
</View>
2020-04-20 10:43:01 +00:00
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => console.log('click')}
activeOpacity={0.9}>
<Icon name='arrow-bottom-right'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('DEPOSIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('DEPOSIT_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={styles.containerTouch}>
<TouchableOpacity style={styles.contain}
onPress={() => console.log('click')}
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.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
2020-04-17 22:03:04 +00:00
</View>
2020-04-20 10:43:01 +00:00
{/* <TabView
lazy
navigationState={{ index, routes }}
renderScene={SceneMap({
'depot': FirstRoute,
'retrait': SecondRoute
})}
onIndexChange={this.handleIndexChange}
renderTabBar={this.renderTabBar}
/> */}
2020-04-11 22:33:59 +00:00
</View>
2020-04-20 10:43:01 +00:00
2020-04-17 22:03:04 +00:00
</ScrollView>
2020-04-20 10:43:01 +00:00
</View>
)
}
render() {
const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
//const { wallet } = this.props.navigation.state.params;
console.log("WALLET DETAILS is From Root", isHomeRootView);
console.log("WALLET DETAILS PROPS", this.props);
return (
!isHomeRootView ?
this.renderDetailWallet(this.props.navigation.state.params.wallet)
:
(this.props.loading ?
this.renderLoader() :
this.renderDetailWallet(this.props.result.response[0])
)
2020-04-11 22:33:59 +00:00
);
}
}
2020-04-20 10:43:01 +00:00
const mapStateToProps = state => ({
loading: state.walletReducer.loading,
result: state.walletReducer.result,
error: state.walletReducer.error
});
const mapDispatchToProps = dispatch => bindActionCreators({
getWalletActivated
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
2020-04-11 22:33:59 +00:00
const styles = StyleSheet.create({
container: {
flex: 1,
2020-04-17 22:03:04 +00:00
backgroundColor: Color.containerBackgroundColor
2020-04-11 22:33:59 +00:00
},
indicator: {
height: 2
},
tab: {
width: Utils.getWidthDevice() / 2
},
tabbar: {
height: 40
},
2020-04-20 10:43:01 +00:00
imgBanner: {
width: '100%',
height: 250,
position: 'absolute',
},
2020-04-11 22:33:59 +00:00
containField: {
2020-04-20 10:43:01 +00:00
padding: 10,
marginBottom: 20,
borderWidth: 0.5,
shadowOffset: { width: 1.5, height: 1.5 },
shadowOpacity: 1.0,
elevation: 5,
2020-04-11 22:33:59 +00:00
flexDirection: "row",
height: 140,
borderRadius: 10
},
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
2020-04-17 22:03:04 +00:00
},
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
paddingVertical: 15,
marginTop: 10
2020-04-20 10:43:01 +00:00
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 0.5,
},
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
transactionContainer: {
flexDirection: 'row',
paddingTop: 20,
},
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(50),
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 5,
2020-04-11 22:33:59 +00:00
}
})