import React, { Component } from 'react'; import { Animated, 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 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'; let route = require('./../../route.json'); let slugify = require('slugify'); require('../../utils/Translations'); class WalletDetail extends Component { constructor(props) { super(props); this.state = { index: 0, routes: [ { key: 'depot', title: I18n.t('DEPOSIT') }, { key: 'retrait', title: I18n.t('WITHDRAWAL') } ], heightHeader: Utils.heightHeader(), }; slugify.extend({ '+': 'plus' }); this.scrollY = new Animated.Value(0); this.deltaY = new Animated.Value(0); this.heightImageBanner = Utils.scaleWithPixel(250, 1); this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40; IlinkEmitter.on("langueChange", this.updateLangue.bind(this)); /* if (this.props.navigation.state.params.hasOwnProperty('agentId')) { let agentId = this.props.navigation.state.params.agentId; console.log("AGENT id", agentId); this.props.getWalletActivated(agentId); } */ } 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: this.props.navigation.state.params.wallet.network, headerStyle: { backgroundColor: Color.primaryColor, paddingTop: 10 }, headerTitleStyle: { color: "white" } } }; isEmptyObject = (obj) => { for (let prop in obj) { if (obj.hasOwnProperty(prop)) { return false; } } return JSON.stringify(obj) === JSON.stringify({}); } 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', }); } renderTabBar = props => ( ( { (route.key === 'depot') ? () : () } {` ${route.title}`} )} /> ); renderHeader = (wallet) => ( {I18n.t('COUNTRY')} {wallet.country} {wallet.network} {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')} {I18n.t('CREATION_DATE')} {this.getCreationDateToHumanFormat(wallet.created_date)} ); renderLoader = () => { return ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ) } renderAccountDetail = (wallet) => ( {I18n.t('PRINCIPAL_ACCOUNT_TITLE')} {wallet.balance_princ} {I18n.t('COMMISSION_ACCOUNT_TITLE')} {wallet.balance_com} ); renderDetailWallet = (walletParam) => { const wallet = Array.isArray(walletParam) ? walletParam[0] : walletParam; return ( !this.isEmptyObject(wallet) ? ( {this.renderHeader(wallet)} {this.renderAccountDetail(wallet)} {I18n.t('TRANSACTIONS')} this.props.navigation.push(route.walletDepot, { wallet })} activeOpacity={0.9}> {I18n.t('DEPOSIT')} {I18n.t('DEPOSIT_DESCRIPTION')} console.log('click')} activeOpacity={0.9}> {I18n.t('WITHDRAWAL')} {I18n.t('WITHDRAWAL_DESCRIPTION')} ) : ( {I18n.t('NO_WALLET_ACTIVED')} ) ) } render() { console.log('Wallet Detail props', this.props); const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId'); console.log("WALLET PARAMS", this.props.navigation.state.params.wallet); return ( !isHomeRootView ? this.renderDetailWallet(this.props.navigation.state.params.wallet) : (this.props.loading ? this.renderLoader() : ( this.props.result !== null && this.renderDetailWallet(this.props.result.response) ) ) ); } } 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); 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 }, 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: 15, marginTop: 10 }, 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, } })