import isEqual from 'lodash/isEqual'; import isArray from 'lodash/isArray'; import omit from 'lodash/omit'; import 'moment/locale/en-au'; import 'moment/locale/en-ca'; import 'moment/locale/en-gb'; import 'moment/locale/en-ie'; import 'moment/locale/en-il'; import 'moment/locale/en-nz'; import 'moment/locale/es-us'; import 'moment/locale/fr'; import React, {Component} from 'react'; import { ActivityIndicator, Alert, Animated, FlatList, Platform, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import I18n from 'react-native-i18n'; import {responsiveWidth} from 'react-native-responsive-dimensions'; import {TabBar} from 'react-native-tab-view'; import Icons from 'react-native-vector-icons/Ionicons'; import Icon from 'react-native-vector-icons/MaterialCommunityIcons'; import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import Tag from '../../components/Tag'; import {Color} from '../../config/Color'; import Dialog from "react-native-dialog"; import {Typography} from '../../config/typography'; import * as Utils from '../../utils/DeviceUtils'; import {IlinkEmitter} from "../../utils/events"; import { cutString, cutStringWithoutDot, isEmptyObject, isIlinkCityWallet, optionNumeroQuitanceScreen, optionOrdreRecetteScreen, transactionHistoryHyperOrdreRecetteLabel, transactionHistorySuperOrdreRecetteLabel, transactionHistorySuperTaxNoticeLabel } from '../../utils/UtilsFunction'; import {depositActionReset} from '../../webservice/DepositApi'; import {baseUrl} from '../../webservice/IlinkConstants'; import {getWalletDetailActivated, resetWalletListDetailReducer} from '../../webservice/WalletApi'; import { getHyperSuperTransactionHistoryAction, getHyperSuperTransactionHistoryReset, getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi'; import {resetCommissionReducer, transferCommissionAction} from '../../webservice/WalletTransferCommission'; 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 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(), isModalConfirmVisible: false, wallet: {currency_code: ''}, triggerTransferCommission: false, loading: false, isTriggerRefresh: false, scrollHeaderY: 0, displayModalHistory: false, displaySuperHyperModalHistory: false, historyItemDetail: null, user: null, isDisplayHistoryOrdreRecette: false, isDisplayHistoryDeclaration: true, isDisplayHistoryReceipt: false, historyTransactionMessage: I18n.t('HISTORY_OF') + ' ' + I18n.t('AVIS_IMPOSITIONS'), historyResult: [], page: 1, perPage: 20, loadMore: false, }; this.renderContent = null; slugify.extend({'+': 'plus'}); this.onEndReachedCalledDuringMomentum = true; this.user = null; 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.isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId'); IlinkEmitter.on("langueChange", this.updateLangue.bind(this)); this.props.getWalletTransactionHistoryReset(); this.props.depositActionReset(); this.props.resetWalletListDetailReducer(); this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb"; moment.locale(this.currentLocale); readUser().then((user) => { if (user) { if (user !== undefined) { if (user.category !== undefined) { if (user.category === "hyper" || user.category === "geolocated" || user.category === "super") { let agentId = this.props.navigation.state.params.agentId; this.props.getWalletDetailActivated(agentId, false); this.props.getHyperSuperTransactionHistoryReset(); this.user = user; } if (user.category === "super") { this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false); if (isIlinkCityWallet(this.props.navigation.state.params.wallet.type)) this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, true); else this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id, false); } } } } }); this.getWalletDetail(); this.willFocus = this.props.navigation.addListener( 'willFocus', payload => { const {result} = this.props; console.warn("will focus detail"); this.getWalletDetail(); this.setState({ wallet: {currency_code: ''} }, () => { if (result !== null) { if (typeof result.response !== 'undefined') { const wallet = result.response[0]; readUser().then((user) => { if (user !== null && user !== undefined) { if (user.category !== undefined) { switch (user.category) { case "super": console.log("ON est pas superviseur nous"); this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, false, 1); break; case "hyper": this.props.getHyperSuperTransactionHistoryAction(`${user.network_id}?page=1&perPage=20`, true, 1); break; case "geolocated": this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, null, 0); break; } } } }); this.setState({ wallet: wallet, isTriggerRefresh: false }) } } }) }); } getWalletDetail = () => { readUser().then((user) => { if (user) { if (user !== undefined) { if (user.category !== undefined) { let agentId = this.props.navigation.state.params.agentId; this.props.getWalletDetailActivated(agentId, false); if (user.category === "super") { this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, false, 1); } if (user.category === "hyper") { this.props.getHyperSuperTransactionHistoryAction(`${user.network_id}?page=1&perPage=20`, true, 1); } if (user.category === "geolocated") { this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=20`, null, 0); } } } } }); }; 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, resultHistoryHyperSuper} = this.props; if (result !== null) { if (result.response !== null) { const wallet = result.response; console.warn('RESULT REQUEST', result.response); this.setState({ wallet: wallet, isTriggerRefresh: false }) } } if (resultHistoryHyperSuper !== null) { this.setState({loadMore: true}); } } componentWillReceiveProps(nextProps, nextContext) { this.setState({historyResult: []}, () => { const {resultHistoryHyperSuper} = nextProps; if (resultHistoryHyperSuper !== null) { if (resultHistoryHyperSuper.response !== null) { if (this.state.page < resultHistoryHyperSuper.response.last_page) { this.setState({ historyResult: resultHistoryHyperSuper.response.data }); } if (this.state.page === resultHistoryHyperSuper.response.last_page) { this.setState({ historyResult: resultHistoryHyperSuper.response.data }) } } } }); } shouldComponentUpdate(nextProps, nextState) { if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) { return false; } else { return true; } } // getWalletIcon = (wallet) => { // return `${baseUrl}/datas/img/network/${slugify(wallet.type, {lower: true})}-logo.png`; // } // getWalletIcon = (wallet) => { // return '../'; // } 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 = () => { 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); if (isIlinkCityWallet(wallet.type)) this.props.getWalletTransactionHistory(wallet.id, true); else this.props.getWalletTransactionHistory(wallet.id, false); 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); } } renderTabBar = props => ( ( { (route.key === 'depot') ? () : () } {` ${route.title}`} )} /> ); renderHeader = (wallet) => ( {I18n.t('COUNTRY')} {wallet.country} {(this.user !== null) ? (this.user.role === "REFILL_AGENT") && } style={{ paddingRight: 10, width: 120, }} onPress={() => { const {result} = this.props.result; if (result !== null) { if (typeof result.response !== 'undefined') { if (parseInt(result.response.balance_com) === 0) { Alert.alert( I18n.t("TRANSFER_COMMISSION_IMPOSSIBLE"), I18n.t("COMMISSION_TRANSFER_ERROR_EMPTY"), [ { text: I18n.t("OK"), onPress: () => { this.props.resetCommissionReducer(); } } ], {cancelable: false} ) } else this.renderDialogConfirmTransferCommission() } } }}> {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')} : null } {this.user !== null ? this.user.category === "hyper" && {wallet.network} : null} {I18n.t('CREATION_DATE')} {moment(wallet.created_date).format('DD/MM/YYYY')} ); renderLoader = () => { return ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ) } renderAccountDetail = (wallet) => ( {I18n.t('PRINCIPAL_ACCOUNT_TITLE')} {`${thousands(wallet.balance_princ, ' ')} ${wallet.currency_code}`} { (this.user !== null) ? (this.user.role === "REFILL_AGENT") ? {I18n.t('COMMISSION_ACCOUNT_TITLE')} {`${thousands(wallet.balance_com, ' ')} ${wallet.currency_code}`} : null :null } ); renderModalHistoryDetail = (wallet) => { const {historyItemDetail} = this.state; return ( {I18n.t('HISTORY_DETAIL')} {I18n.t('OPERATION')} {this.state.historyItemDetail.operation} {I18n.t('TRANSACTION_ID')} {this.state.historyItemDetail.id_transaction} Date {this.state.historyItemDetail.date} {I18n.t('INIT_COUNTRY')} {this.state.historyItemDetail.init_country} {I18n.t('AMOUNT')} {this.state.historyItemDetail.montant} {I18n.t('FEES_AND_TAXES')} {this.state.historyItemDetail.frais} {I18n.t('NET_AMOUNT')} {this.state.historyItemDetail.montant_net_init} {I18n.t('EMETTEUR')} {this.state.historyItemDetail.emetteur} {I18n.t('DESTINATAIRE')} {this.state.historyItemDetail.destinataire} {I18n.t('FINAL_COUNTRY')} {this.state.historyItemDetail.final_country} {I18n.t('NET_AMOUNT')} {this.state.historyItemDetail.montant_net_final} {I18n.t('ACTIVE_WALLET')} {this.state.historyItemDetail.reseau_payeur} { this.setState({ displayModalHistory: !this.state.displayModalHistory, }); }}/> ); } handleLoadMore = () => { //this.props.getHyperSuperTransactionHistoryReset(); console.log('load more call isDisplayHistoryOrdreRecette', this.state.isDisplayHistoryOrdreRecette); console.log('load more call isDisplayHistoryDeclaration', this.state.isDisplayHistoryDeclaration); console.log('load more call isDisplayHistoryReceipt', this.state.isDisplayHistoryReceipt); if (this.state.isDisplayHistoryOrdreRecette) { if (this.user !== null) { if (this.user.category !== null) { switch (this.user.category) { case "hyper": this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 2); break; case "super": this.props.getHyperSuperTransactionHistoryAction(`${this.user.agentId}?page=1&perPage=${this.state.perPage + 20}`, false, 2); break; case "geolocated": this.props.getHyperSuperTransactionHistoryAction(`${user.agentId}?page=1&perPage=${this.state.perPage + 20}`, null, 0); break; default: break; } } } } if (this.state.isDisplayHistoryDeclaration) { if (this.user !== null) { if (this.user.category !== null) { switch (this.user.category) { case "hyper": this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 1); break; case "super": this.props.getHyperSuperTransactionHistoryAction(`${this.user.agentId}?page=1&perPage=${this.state.perPage + 20}`, false, 1); break; default: break; } } } } if (this.state.isDisplayHistoryReceipt) { if (this.user !== null) { if (this.user.category !== null) { switch (this.user.category) { case "hyper": this.props.getHyperSuperTransactionHistoryAction(`${this.user.network_id}?page=1&perPage=${this.state.perPage + 20}`, true, 3); break; default: break; } } } } this.setState({perPage: this.state.perPage + 20}); } renderFooterLoader = () => { if (!this.state.loadMore) return null; else return ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ); }; renderSuperHyperHistoryTransactionItem = (item, index) => { return ( { this.setState({displaySuperHyperModalHistory: true, historyItemDetail: item}) }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}> { this.state.isDisplayHistoryOrdreRecette ? Object.keys(omit(item, ['id', 'id_actor', 'action', 'old_tax_units_count', 'id_network_tax', 'tax_units_count', 'old_data_id', 'id_royalty_fee', 'tax_deleted', 'amount', 'tax_name', 'prototype', 'tax_billing_period', 'tax_measurement_unit', 'tax_notice_amount', 'tax_notice_created_at', 'tax_unit_price', 'new_data_id', 'new_data_id', 'registration_year', 'id_receipt', 'image', 'id_agent', 'id_super', 'updated_at', 'created_at', 'id_tax_notice', 'is_company', 'recall_number', 'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date', 'revenue_order_created_at', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email', 'status', 'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone', 'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district', 'id_tax_notice', 'year_tax_paid_N_3', 'issuer_id', 'image', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval', 'neighborhood', 'network_id', 'id_network', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).map((element, i) => ( { isEqual(element, 'montant') ? ` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}` : isEqual(element, 'history_action') ? item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD") : isEqual(element, 'date') ? cutStringWithoutDot(item[element], 16) : isArray(item[element]) ? "" : item[element] } )) : this.state.isDisplayHistoryReceipt ? Object.keys(omit(item, ['old_data_id', 'old_tax_units_count', 'id_actor', 'id_network_tax', 'tax_units_count', 'id', 'id_network', 'id_royalty_fee', 'tax_deleted', 'network_amount', 'registration_year', 'receipt_created_at', 'revenue_order_created_at', 'history_status', 'new_data_id', 'new_data_id', 'image', 'id_agent', 'id_super', 'date', 'id_revenue_order', 'is_company', 'recall_number', 'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date', 'status', 'status', 'revenue_order_created_at', 'issuer_id', 'image', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email', 'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone', 'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district', 'year_tax_paid_N_3', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval', 'neighborhood', 'network_id', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).map((element, i) => ( { isEqual(element, 'montant') ? ` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}` : isEqual(element, 'history_action') ? item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD") : isEqual(element, 'updated_at') ? cutStringWithoutDot(item[element], 16) : isArray(item[element]) ? "" : item[element] } )) : Object.keys(omit(item, ['old_data_id', 'old_tax_units_count', 'id_actor', 'id_network_tax', 'tax_units_count', 'id', 'id_network', 'id_royalty_fee', 'tax_deleted', 'network_amount', 'registration_year', 'receipt_created_at', 'revenue_order_created_at', 'history_status', 'new_data_id', 'new_data_id', 'id_receipt', 'image', 'id_agent', 'id_super', 'date', 'updated_at', 'id_revenue_order', 'is_company', 'recall_number', 'year', 'office_penalties', 'month_delay_penalties', 'month_delay_penalties', 'payment_deadline_date', 'status', 'status', 'revenue_order_created_at', 'issuer_id', 'image', 'adresse', 'lastname', 'code_membre', 'code_parrain', 'phone', 'email', 'action', 'currency_code', 'owner_id', 'owner_id', 'issuer_lastname', 'issuer_phone', 'IRPP', 'tax_notice_created_at', 'TVA', 'activity_type', 'responsable_name', 'taxes', 'identification_number', 'district', 'year_tax_paid_N_3', 'year_tax_paid_N_1', 'year_tax_paid_N_2', 'trade_registry', 'technical_approval', 'neighborhood', 'network_id', 'office_penalties', 'payment_deadline_date', 'recall_number', 'id_patente', 'id_country', 'id_agent', 'municipality'])).map((element, i) => ( { isEqual(element, 'montant') ? ` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}` : isEqual(element, 'history_action') ? item[element] === "M" ? I18n.t("UPDATE") : I18n.t("ADD") : isEqual(element, 'date') ? cutStringWithoutDot(item[element], 16) : isArray(item[element]) ? "" : item[element] } )) } ); } renderModalSuperHyperHistoryDetail = (wallet) => { const {historyItemDetail} = this.state; return ( {I18n.t('HISTORY_DETAIL')} { this.state.isDisplayHistoryOrdreRecette ? Type {(this.state.historyItemDetail.type)} { this.user !== null ? this.user.category !== "geolocated" && {I18n.t('ACTION')} {this.state.historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('NAME')} {this.state.historyItemDetail.lastname} {I18n.t('EMAIL')} {this.state.historyItemDetail.email} {I18n.t('PHONE')} {this.state.historyItemDetail.phone} {I18n.t('ISSUER_LASTNAME')} {this.state.historyItemDetail.issuer_lastname} {I18n.t('ISSUER_PHONE')} {this.state.historyItemDetail.issuer_phone} {I18n.t('OLD_VALUE')} {this.state.historyItemDetail.old_data_id} {I18n.t('NEW_VALUE')} {this.state.historyItemDetail.new_data_id} { this.state.historyItemDetail.hasOwnProperty("revenue_orders") && {I18n.t('ORDRE_DE_RECETTE')} { this.state.historyItemDetail.revenue_orders.map((ordreRecette) => { let message = ""; message = ordreRecette.tax_name + " | " + ordreRecette.amount + " | " + ordreRecette.payment_deadline_date + "\n\n"; return message; } ) } } {I18n.t('PRINCIPAL_AMOUNT')} {this.state.historyItemDetail.amount} {I18n.t('TOTAL_AMOUNT')} {this.state.historyItemDetail.amount} {I18n.t('DATE_AVIS_IMPOSITION')} {this.state.historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {this.state.historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {this.state.historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {this.state.historyItemDetail.year} : { this.user !== null ? this.user.category !== "geolocated" && {I18n.t('ACTION')} {this.state.historyItemDetail.history_action === "M" ? I18n.t('UPDATE') : I18n.t('ADD')} : null } {I18n.t('ID_TAX_NOTICE')} {this.state.historyItemDetail.id_tax_notice} {I18n.t('STATUS')} {this.state.historyItemDetail.status} {I18n.t('NAME')} {this.state.historyItemDetail.lastname} {I18n.t('EMAIL')} {this.state.historyItemDetail.email} {I18n.t('ARRONDISSEMENT')} {this.state.historyItemDetail.district} {I18n.t('NEIGHTBORHOOD')} {this.state.historyItemDetail.neighborhood} {I18n.t('NOM_RESPONSABLE')} {this.state.historyItemDetail.responsable_name} {I18n.t('TECHNICAL_AGREMENT')} {this.state.historyItemDetail.technical_approval} {I18n.t('PHONE')} {this.state.historyItemDetail.phone} {I18n.t('PRINCIPAL_AMOUNT')} {this.state.historyItemDetail.amount} {I18n.t('OFFICE_PENALITIES')} {this.state.historyItemDetail.office_penalties} {I18n.t('MONTH_DELAY_PENALTIES')} {this.state.historyItemDetail.month_delay_penalties} {I18n.t('TOTAL_AMOUNT')} {this.state.historyItemDetail.amount} { this.state.historyItemDetail.hasOwnProperty("penalties") ? this.state.historyItemDetail.penalties.length > 0 ? {I18n.t('PENALITE')} { this.state.historyItemDetail.penalties.map((penalite) => { let message = ""; message = penalite.name + " \n " + (penalite.n_order === 2 ? penalite.tax_amount : penalite.amount) + (penalite.n_order === 1 ? ` | ${penalite.rate} %` : "") + "\n\n"; return message; } ) } : null : null } { this.state.historyItemDetail.hasOwnProperty("taxes") && {I18n.t('AVIS_IMPOSITION')} { this.state.historyItemDetail.taxes.map((taxe) => { let message = ""; if (taxe.hasOwnProperty('new_quantity')) message = taxe.name + " | " + taxe.unit_price + " | (" + taxe.old_quantity + ", " + taxe.old_quantity + ")\n\n"; else message = taxe.name + " | " + taxe.quantity + " | " + taxe.amount + "\n\n"; return message; } ) } } {I18n.t('DATE_AVIS_IMPOSITION')} {this.state.historyItemDetail.created_at} {I18n.t('UPDATE_DATE')} {this.state.historyItemDetail.updated_at} {I18n.t('PAYMENT_DEADLINE')} {this.state.historyItemDetail.payment_deadline_date} {I18n.t('YEAR')} {this.state.historyItemDetail.year} } { this.setState({ displaySuperHyperModalHistory: !this.state.displaySuperHyperModalHistory, }); }}/> ); } renderSuperHyperHistoryTransactionList = () => { const {resultHistoryHyperSuper, errorHistoryHyperSuper} = this.props; if (errorHistoryHyperSuper !== null) { if (typeof errorHistoryHyperSuper.data !== 'undefined') { return ( {errorHistoryHyperSuper.data.error} ) } else { return ( {errorHistoryHyperSuper} ) } } if (resultHistoryHyperSuper !== null) { if (resultHistoryHyperSuper.response !== null) { return ( <> { this.state.isDisplayHistoryOrdreRecette ? this.user.category === "hyper" ? transactionHistoryHyperOrdreRecetteLabel().map((item, index) => ( {I18n.t(item.label)} )) : transactionHistorySuperOrdreRecetteLabel().map((item, index) => ( {I18n.t(item.label)} )) : transactionHistorySuperTaxNoticeLabel().map((item, index) => ( {I18n.t(item.label)} )) } { return ( {I18n.t('NO_WALLET_HISTORY')} ) }} data={this.state.historyResult} keyExtractor={(item, index) => item.id} renderItem={({item, index}) => ( this.renderSuperHyperHistoryTransactionItem(item, index) )} onEndReached={({distanceFromEnd}) => { if (this.state.page < resultHistoryHyperSuper.response.last_page) { this.setState({loadMore: true}, () => { this.handleLoadMore(); this.onEndReachedCalledDuringMomentum = true; }); } }} ListFooterComponent={this.renderFooterLoader()} onEndReachedThreshold={0.5} /> ) } } } renderSuperHyperHistoryTransaction = () => { return ( <> { this.props.resultHistoryHyperSuper && <> { this.user !== null ? this.user.category === "super" || this.user.category === "hyper" ? this.state.historyTransactionMessage : I18n.t('HISTORY_OF') + ' ' + I18n.t('AVIS_IMPOSITIONS') : null } {this.renderSuperHyperHistoryTransactionList()} } ) } renderDetailWallet = (wallet) => { return ( !isEmptyObject(wallet) ? (<> {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()} {/* {this.state.loading ? {I18n.t("LOADING_DOTS")} : null } */} this._scrollView = component} style={{ paddingHorizontal: 20, flex: 1, zIndex: 2 }} scrollEventThrottle={8} onScroll={Animated.event([ { nativeEvent: { contentOffset: {y: this.scrollY}, }, }, ], { listener: (event) => { this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y}); } })}> {this.renderHeader(wallet)} {this.renderAccountDetail(wallet)} {this.user !== null ? this.user.category === "super" && this.user.role !== "REFILL_AGENT" ? ( <> {I18n.t('TRANSACTIONS')} { this.props.navigation.push(route.modifyTaxeImposition); }} activeOpacity={0.9}> {I18n.t('MODIFY_AVIS_IMPOSITION')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} { this.props.navigation.push(route.walletOptionSelect, { optionSelect: optionOrdreRecetteScreen, wallet, onGoBack: () => this.refresh(), lottie: { source: require("../../assets/json/25237-receipt"), loop: false } }); //this.props.navigation.navigate(route.ordreRecette); }} activeOpacity={0.9}> {I18n.t('ORDRE_DE_RECETTE')} {/*I18n.t('WITHDRAWAL_DESCRIPTION')*/} { this.props.navigation.push(route.walletOptionSelect, { optionSelect: optionNumeroQuitanceScreen, wallet, onGoBack: () => this.refresh(), lottie: { source: require("../../assets/json/25237-receipt"), loop: false } }); }} activeOpacity={0.9}> {I18n.t('NUMERO_QUITANCE')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} { this.props.navigation.push(route.penalteTaxe, { wallet, onGoBack: () => this.refresh() }); }} activeOpacity={0.9}> {I18n.t('PENALITE_MANAGE')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} { this.props.navigation.push(route.historicScreen, { isAgentGeolocated: false, isSuper: true, isHyper: false }); }} activeOpacity={0.9}> {I18n.t('HISTORY')} ) : this.user.category === "geolocated" ? <> {I18n.t('TRANSACTIONS')} { this.props.navigation.push(route.numeroQuitance, { isModify: false, isAgentGeolocated: true }); }} activeOpacity={0.9}> {I18n.t('SAISIR_QUITANCE')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} { this.props.navigation.push(route.historicScreen, { isAgentGeolocated: true, isSuper: false, isHyper: false }); }} activeOpacity={0.9}> {I18n.t('HISTORY')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} : this.user.category === "hyper" && <> {I18n.t('TRANSACTIONS')} { this.props.navigation.push(route.historicScreen, { isAgentGeolocated: false, isSuper: false, isHyper: true }); }} activeOpacity={0.9}> {I18n.t('HISTORY')} {/*I18n.t('DEPOSIT_DESCRIPTION')*/} : null} {/* {!this.isHomeRootView && this.renderHistoryTransaction(wallet)} {this.isHomeRootView && this.renderSuperHyperHistoryTransaction()} */} ) : ( {I18n.t('NO_WALLET_ACTIVED')} ) ) } renderHistoryTransactionItem = (item, index, wallet) => { return ( { this.setState({displayModalHistory: true, historyItemDetail: item}) }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}> { isIlinkCityWallet(wallet.type) ? 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) => ( { isEqual(element, 'montant') ? ` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}` : isEqual(element, 'destinataire') ? item[element].length > 13 ? cutString(item[element], 13) : item[element] : isEqual(element, 'date') ? cutStringWithoutDot(item[element], 16) : item[element] } )) : 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) => ( { isEqual(element, 'montant') ? ` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet !== undefined ? this.state.wallet.currency_code : ""}` : isEqual(element, 'destinataire') ? item[element].length > 13 ? cutString(item[element], 13) : item[element] : isEqual(element, 'date') ? cutStringWithoutDot(item[element], 16) : item[element] } )) } ); /* {item.description} {date} */ } renderHistoryTransactionList = (wallet) => { const {resultTransaction, errorTransaction} = this.props; if (errorTransaction !== null) { if (typeof errorTransaction.data !== 'undefined') { return ( {errorTransaction.data.error} ) } else { return ( {errorTransaction} ) } } if (resultTransaction !== null) { if (resultTransaction.response !== null) { return ( Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ? ( <> { transactionHistorySuperOrdreRecetteLabel().map((item, index) => ( {I18n.t(item.label)} )) } { resultTransaction.response.map((item, index) => ( this.renderHistoryTransactionItem(item, index, wallet) )) } ) : ( {I18n.t('NO_WALLET_HISTORY')} ) ) } } } renderHistoryTransaction = (wallet) => { return ( <> { this.props.loadingTransaction && this.state.loadMore ? ( {Platform.OS === 'android' ? ( <> {I18n.t('LOADING_DOTS')} ) : <> {I18n.t('LOADING_DOTS')} } ) : <> {I18n.t('TRANSACTION_HISTORY')} {this.renderHistoryTransactionList(wallet)} } ) } renderDialogConfirmTransferCommission = () => { Alert.alert( I18n.t("CONFIRM"), I18n.t('CONFIRM_TRANSFER_COMMISSION') , [ { text: I18n.t("NO"), onPress: () => { } }, { text: I18n.t("YES"), onPress: () => { const {result} = this.props; if (result !== null) { if (typeof result.response !== 'undefined') { this.props.transferCommissionAction(result.response.id); } }/* else this.props.transferCommissionAction(this.state.wallet.id); */ this.setState({ triggerTransferCommission: true }); } } ], {cancelable: false} ) } renderDialogTransferCommissionResponse = () => { const {resultTransferCommission, errorTransferCommission} = this.props; if (errorTransferCommission !== null) { if (typeof errorTransferCommission.data !== 'undefined') { Alert.alert( I18n.t("ERROR_TRANSFER_COMMISSION"), errorTransferCommission.data.error, [ { text: I18n.t("OK"), onPress: () => { this.props.resetCommissionReducer(); } } ], {cancelable: false} ) } } if (resultTransferCommission !== null) { if (resultTransferCommission.response !== null) { Alert.alert( I18n.t("SUCCESS_TRANSFER_COMMISSION"), I18n.t("COMMISSION_TRANSFER_SUCCESS"), [ { text: I18n.t("OK"), onPress: () => { this.props.resetCommissionReducer(); this.refresh(); } } ], {cancelable: false} ) } } } render() { return ( <> {this.state.displayModalHistory && this.renderModalHistoryDetail()} {this.props.result !== null && this.state.displaySuperHyperModalHistory && this.renderModalSuperHyperHistoryDetail(this.props.result.response)} { ((this.props.loading || this.props.loadingTransferCommission) ? this.renderLoader() : ( this.props.result !== null ? Array.isArray(this.props.result.response) && (this.props.result.response.length) === 0 ? {I18n.t('NO_WALLET_ACTIVED')} : 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, loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission, resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission, errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission, loadingHistoryHyperSuper: state.getHyperSuperHistoryReducer.loading, resultHistoryHyperSuper: state.getHyperSuperHistoryReducer.result, errorHistoryHyperSuper: state.getHyperSuperHistoryReducer.error, }); const mapDispatchToProps = dispatch => bindActionCreators({ getWalletDetailActivated, getWalletTransactionHistory, transferCommissionAction, resetWalletListDetailReducer, resetCommissionReducer, getWalletTransactionHistoryReset, depositActionReset, getHyperSuperTransactionHistoryAction, getHyperSuperTransactionHistoryReset }, dispatch); export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail); const styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'column', 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', }, blockView: { paddingVertical: 10, borderBottomWidth: 0.5, }, 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, }, 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(60), paddingHorizontal: 10, justifyContent: 'space-between', alignItems: 'flex-start', flex: 1, }, contentTitle: { paddingTop: 5, } })