2020-11-04 20:02:23 +00:00
import React , { Component } from 'react' ;
import {
ActivityIndicator ,
2022-04-24 22:09:59 +00:00
Alert ,
2020-11-04 20:02:23 +00:00
Animated ,
Platform ,
ProgressBarAndroid ,
ScrollView ,
StatusBar ,
StyleSheet ,
Text ,
TouchableOpacity ,
View
} from 'react-native' ;
2020-05-30 21:58:22 +00:00
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'
2020-11-04 20:02:23 +00:00
import { Color } from '../../config/Color' ;
2020-07-15 16:25:32 +00:00
import omit from 'lodash/omit' ;
2020-05-30 21:58:22 +00:00
import Tag from '../../components/Tag' ;
2020-11-04 20:02:23 +00:00
import { IlinkEmitter } from "../../utils/events" ;
import { Typography } from '../../config/typography' ;
import { responsiveWidth , } from 'react-native-responsive-dimensions' ;
2022-04-24 22:09:59 +00:00
import {
getWalletDetailActivated ,
passwordValidationAction ,
passwordValidationReset ,
resetWalletListDetailReducer
} from '../../webservice/WalletApi' ;
2020-11-04 20:02:23 +00:00
import { depositActionReset } from '../../webservice/DepositApi' ;
import {
getWalletTransactionHistoryReset ,
getWalletTransactionHistoryUser
} from '../../webservice/WalletTransactionHistoryApi' ;
import { getUserIdentificationAction , getUserIdentificationResetAction } from '../../webservice/IdentificationApi' ;
import { resetCommissionReducer , transferCommissionAction } from '../../webservice/WalletTransferCommission' ;
2020-07-15 16:25:32 +00:00
import Dialog from "react-native-dialog" ;
2020-06-02 17:12:39 +00:00
import isEqual from 'lodash/isEqual' ;
2020-11-04 20:02:23 +00:00
import { baseUrl } from '../../webservice/IlinkConstants' ;
2020-05-30 21:58:22 +00:00
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'
2020-11-04 20:02:23 +00:00
import { connect } from 'react-redux' ;
import { bindActionCreators } from 'redux' ;
import {
cutString ,
2021-10-26 19:47:52 +00:00
cutStringWithoutDot ,
displayToast ,
2020-11-04 20:02:23 +00:00
isEmptyObject ,
optionDepotUserScreen ,
optionIdentificationUserScreen ,
2021-10-26 19:47:52 +00:00
optionLinkAccountUserScreen ,
optionNanoCreditScreen ,
optionNanoSanteUserScreen ,
2020-11-04 20:02:23 +00:00
optionPaiementFacture ,
optionRetraitUserScreen ,
transactionHistoryIlinkLabel
} from '../../utils/UtilsFunction' ;
import { readUser } from '../../webservice/AuthApi' ;
2021-05-24 11:11:55 +00:00
import LottieView from "lottie-react-native" ;
2022-04-24 22:09:59 +00:00
import * as Animatable from "react-native-animatable" ;
import { Fumi } from "react-native-textinput-effects" ;
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome" ;
import Button from "../../components/Button" ;
2022-05-16 15:01:45 +00:00
import Entypo from "react-native-vector-icons/Entypo" ;
2020-11-04 20:02:23 +00:00
let moment = require ( 'moment-timezone' ) ;
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 {
2020-11-04 20:02:23 +00:00
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 ,
2022-04-24 22:09:59 +00:00
password : '' ,
isLogged : false
2020-11-04 20:02:23 +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 ;
2020-11-20 17:06:19 +00:00
this . currentLocale = I18n . locale . includes ( "fr" ) ? "fr" : "en-gb" ;
2020-11-04 20:02:23 +00:00
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 ( ) ;
2022-04-24 22:09:59 +00:00
this . props . passwordValidationReset ( ) ;
2020-11-04 20:02:23 +00:00
this . props . getUserIdentificationResetAction ( ) ;
2020-12-05 13:26:44 +00:00
console . warn ( "Wallet User Props" , this . props ) ;
2020-11-04 20:02:23 +00:00
2020-12-05 13:26:44 +00:00
this . getWalletDetail ( ) ;
2020-11-18 11:22:53 +00:00
2020-11-15 17:22:59 +00:00
this . willFocus = this . props . navigation . addListener (
'willFocus' ,
payload => {
2020-12-05 13:26:44 +00:00
this . getWalletDetail ( ) ;
2020-11-15 17:22:59 +00:00
} ) ;
2020-11-04 20:02:23 +00:00
}
static navigatorStyle = {
navBarBackgroundColor : Color . primaryColor ,
statusBarColor : Color . primaryDarkColor ,
navBarTextColor : '#FFFFFF' ,
navBarButtonColor : '#FFFFFF'
} ;
2022-05-16 15:01:45 +00:00
static navigationOptions = ( { navigation } ) => {
2020-11-04 20:02:23 +00:00
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"
} ,
2022-05-16 15:01:45 +00:00
title : I18n . t ( 'WALLET' ) ,
2022-06-08 11:30:08 +00:00
/ * h e a d e r L e f t : (
2022-05-16 15:01:45 +00:00
< Entypo
name = "menu"
color = "#fff"
onPress = { ( ) => { navigation . openDrawer ( ) } }
size = { 24 }
/ >
2022-06-08 11:30:08 +00:00
) * /
2020-11-04 20:02:23 +00:00
}
} ;
2020-12-05 13:26:44 +00:00
getWalletDetail = ( ) => {
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user !== undefined ) {
this . setState ( { user } ) ;
2022-05-16 15:01:45 +00:00
this . props . getWalletDetailActivated ( user . id , null ) ;
2020-12-05 13:26:44 +00:00
this . props . getUserIdentificationAction ( user . phone ) ;
this . props . getWalletTransactionHistoryUser ( user . id ) ;
}
}
} ) ;
} ;
2020-11-04 20:02:23 +00:00
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 ,
} )
}
}
}
2022-04-24 22:09:59 +00:00
componentWillReceiveProps ( nextProps ) {
if ( nextProps . resultPasswordValidation !== null ) {
if ( nextProps . resultPasswordValidation . status === 200 ) {
this . setState ( {
isLogged : true
} ) ;
this . props . passwordValidationReset ( ) ;
}
}
if ( nextProps . errorPasswordValidation !== null ) {
console . log ( nextProps . errorPasswordValidation ) ;
Alert . alert (
I18n . t ( "ERROR_LABEL" ) ,
'' + nextProps . errorPasswordValidation ,
[
{
text : I18n . t ( "OK" ) , onPress : ( ) => {
this . props . passwordValidationReset ( ) ;
}
}
] ,
{ cancelable : false }
) ;
this . setState ( {
isLogged : false
} ) ;
}
/ * i f ( n e x t P r o p s . l o a d i n g | | n e x t P r o p s . l o a d i n g T r a n s f e r C o m m i s s i o n )
this . setState ( {
loading : true
} )
else
this . setState ( {
loading : false
} ) * /
}
2020-11-04 20:02:23 +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 ) => {
2020-11-18 11:22:53 +00:00
let re = moment . tz ( date , moment . tz . guess ( ) ) . format ( ) ;
2020-11-04 20:02:23 +00:00
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 = ( ) => {
2022-05-16 15:01:45 +00:00
readUser ( ) . then ( ( user ) => {
if ( user ) {
if ( user !== undefined ) {
this . props . getWalletDetailActivated ( user . id , null ) ;
}
}
} ) ;
2020-11-04 20:02:23 +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 . caption2 , Typography . semibold ] } > { I18n . t ( 'COUNTRY' ) } < / T e x t >
< Text numberOfLines = { 1 } adjustsFontSizeToFit = { true } style = { Typography . caption1 } > { wallet . country } < / T e x t >
< / V i e w >
< View style = { {
flex : 1 ,
alignItems : 'center' ,
justifyContent : 'flex-end' ,
} } >
< Animated . Image
source = { { uri : this . getWalletIcon ( wallet ) } }
2020-05-30 21:58:22 +00:00
style = { {
2020-11-04 20:02:23 +00:00
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 } < / T e x t >
< 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 = { ( ) => {
2020-12-05 13:26:44 +00:00
this . props . navigation . push ( route . walletOptionSelect , {
optionSelect : optionLinkAccountUserScreen ,
lottie : {
source : require ( "./../../datas/json/link_card.json" ) ,
loop : true
} ,
isIdentified : this . props . resultUserIdentification . response . isIdentified
} ) ;
2020-11-04 20:02:23 +00:00
} } >
2020-12-05 13:26:44 +00:00
& nbsp ; { I18n . t ( 'LINK_CARD_REATTACH' ) }
2020-11-04 20:02:23 +00:00
< / T a g >
< Tag icon = { < Icon name = 'update' size = { 20 } color = { Color . whiteColor } / > } primary
2020-12-05 13:26:44 +00:00
style = { { width : 110 , borderTopLeftRadius : 0 , borderBottomLeftRadius : 0 , } }
onPress = { ( ) => {
this . _scrollView . scrollToEnd ( ) ;
} } >
2020-11-04 20:02:23 +00:00
& nbsp ; & nbsp ; { I18n . t ( 'HISTORY' ) }
< / T a g >
2020-05-30 21:58:22 +00:00
< / V i e w >
2020-11-04 20:02:23 +00:00
< / V i e w >
< / V i e w >
< View style = { styles . contentLeftItem } >
< Text numberOfLines = { 1 }
style = { [ Typography . caption2 , Typography . semibold ] } > { I18n . t ( 'CREATION_DATE' ) } < / T e x t >
< Text numberOfLines = { 1 } adjustsFontSizeToFit = { true }
style = { Typography . caption1 } > { moment ( wallet . created _date ) . format ( 'DD/MM/YYYY' ) } < / T e x t >
< / V i e w >
< / V i e w >
) ;
renderLoader = ( ) => {
return (
< View style = { { flex : 1 , justifyContent : 'center' , alignItems : 'center' } } >
{ Platform . OS === 'android'
?
(
< >
< ProgressBarAndroid / >
< Text > { I18n . t ( 'LOADING_DOTS' ) } < / T e x t >
< / >
) :
< >
< ActivityIndicator size = "large" color = { '#ccc' } / >
< Text > { I18n . t ( 'LOADING_DOTS' ) } < / T e x t >
< / >
}
< / V i e w >
)
}
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 }
/ >
< / V i e w >
< View >
2023-06-22 17:41:26 +00:00
< Text style = { [ Typography . title3 , Color . primaryColor , { marginBottom : 3 } ] } >
2020-11-04 20:02:23 +00:00
{ I18n . t ( 'PRINCIPAL_ACCOUNT_TITLE' ) }
< / T e x t >
< Text
style = { [ Typography . body2 ] } > { ` ${ thousands ( wallet . balance , ' ' ) } ${ wallet . currency _code } ` } < / T e x t >
< / V i e w >
< / V i e w >
< View
style = { {
flexDirection : 'row' ,
alignItems : 'center' ,
} } >
< View
style = { [
styles . circlePoint ,
{ backgroundColor : Color . primaryColor } ,
] } >
< Icons name = 'md-key'
size = { 28 }
color = { Color . whiteColor }
/ >
< / V i e w >
< View >
2023-06-22 17:41:26 +00:00
< Text style = { [ Typography . title3 , Color . primaryColor , { marginBottom : 3 } ] } >
2020-11-04 20:02:23 +00:00
{ I18n . t ( 'NUMERO_COMPTE' ) }
< / T e x t >
< Text style = { [ Typography . body2 ] } > { wallet . user _code } < / T e x t >
< / V i e w >
< / V i e w >
< / V i e w >
) ;
renderDetailWallet = ( wallet ) => {
return (
! isEmptyObject ( wallet ) ?
( < >
{ this . state . triggerTransferCommission && this . renderDialogTransferCommissionResponse ( ) }
2020-05-30 21:58:22 +00:00
< View
2020-11-04 20:02:23 +00:00
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 = { {
2020-06-10 03:10:45 +00:00
paddingHorizontal : 20 , position : 'absolute' ,
width : '100%' ,
height : '100%' ,
zIndex : 2
2020-11-04 20:02:23 +00:00
} }
scrollEventThrottle = { 8 }
onScroll = { Animated . event ( [
{
nativeEvent : {
contentOffset : { y : this . scrollY } ,
} ,
} ,
] ,
2020-06-02 09:05:50 +00:00
{
2020-11-04 20:02:23 +00:00
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' ) }
< / T e x t >
< / V i e w >
< View style = { styles . transactionContainer } >
< View style = { [ styles . containerTouch ] } >
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
2020-07-02 14:35:00 +00:00
this . props . navigation . push ( route . walletOptionSelect , {
2020-11-04 20:02:23 +00:00
optionSelect : optionDepotUserScreen ,
onGoBack : ( ) => this . refresh ( ) ,
lottie : {
source : require ( "./../../datas/json/wallet_with_cash.json" ) ,
loop : false
}
2020-07-02 14:35:00 +00:00
} )
2020-11-04 20:02:23 +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 ( 'ENVOIE_ARGENT' ) }
< / T e x t >
< / V i e w >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
{ / * < V i e w s t y l e = { { f l e x : 1 } } >
2020-06-02 09:05:50 +00:00
< Text numberOfLines = { 1 } style = { [ Typography . overline , Color . grayColor ] , { paddingVertical : 5 } } numberOfLines = { 5 } >
{ I18n . t ( 'DEPOSIT_DESCRIPTION' ) }
< / T e x t >
2020-07-02 14:35:00 +00:00
< /View> */ }
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . containerTouch ] } >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
2020-07-02 14:35:00 +00:00
this . props . navigation . push ( route . walletOptionSelect , {
2020-11-04 20:02:23 +00:00
optionSelect : optionRetraitUserScreen ,
onGoBack : ( ) => this . refresh ( ) ,
lottie : {
source : require ( "./../../datas/json/wallet_with_cash.json" ) ,
loop : true
}
2020-07-02 14:35:00 +00:00
} )
2020-11-04 20:02:23 +00:00
} }
activeOpacity = { 0.9 } >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< Icon name = 'arrow-top-left'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . content ] } >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< View style = { styles . contentTitle } >
< Text style = { [ Typography . headline , Typography . semibold ] } >
{ I18n . t ( 'RETRAIT_ARGENT' ) }
< / T e x t >
< / V i e w >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
{ / * < V i e w s t y l e = { { f l e x : 1 } } >
2020-06-02 09:05:50 +00:00
< Text style = { [ Typography . overline , Color . grayColor ] , { paddingVertical : 5 } } numberOfLines = { 5 } >
{ I18n . t ( 'WITHDRAWAL_DESCRIPTION' ) }
< / T e x t >
2020-07-02 14:35:00 +00:00
< /View> */ }
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { styles . transactionContainer } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . containerTouch ] } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< TouchableOpacity style = { styles . contain }
onPress = {
2020-08-11 09:42:31 +00:00
( ) => {
2021-05-24 11:11:55 +00:00
if ( this . props . result . response . has _nano _credit === 1 ) {
this . props . navigation . push ( route . walletOptionSelect , {
optionSelect : optionNanoCreditScreen ,
wallet ,
lottie : {
source : require ( "./../../datas/json/cedit-cards.json" ) ,
loop : true
} ,
isNanoCredit : true
} ) ;
} else {
displayToast ( I18n . t ( 'NANO_CREDIT_DISABLE' ) ) ;
}
2020-08-11 09:42:31 +00:00
}
2020-11-04 20:02:23 +00:00
}
activeOpacity = { 0.9 } >
< Icon name = 'cash-multiple'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
< View style = { [ styles . content ] } >
< View style = { [ styles . content ] } >
2020-11-27 09:28:47 +00:00
< View style = { { paddingTop : 5 , } } >
2020-11-04 20:02:23 +00:00
< Text
style = { [ Typography . headline , Typography . semibold ] } >
{ I18n . t ( 'NANO_CREDIT' ) }
< / T e x t >
< / V i e w >
< / V i e w >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
< View style = { [ styles . containerTouch ] } >
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
2021-10-26 18:19:13 +00:00
this . props . navigation . push ( route . walletOptionSelect , {
optionSelect : optionNanoSanteUserScreen ,
wallet ,
lottie : {
source : require ( "./../../datas/json/cedit-cards.json" ) ,
loop : true
} ,
isNanoSante : true
} ) ;
2020-11-04 20:02:23 +00:00
} }
activeOpacity = { 0.9 } >
< Icon name = 'heart-multiple'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
< View style = { [ styles . content ] } >
< View style = { { paddingTop : 20 , } } >
2021-05-24 11:11:55 +00:00
< Text style = { [ Typography . headline , Typography . semibold ] } >
2020-11-04 20:02:23 +00:00
{ I18n . t ( 'NANO_SANTE' ) }
< / T e x t >
< / V i e w >
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { styles . transactionContainer } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . containerTouch ] } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
2020-06-23 10:28:52 +00:00
2020-07-02 14:35:00 +00:00
this . props . navigation . push ( route . walletOptionSelect , {
2020-11-04 20:02:23 +00:00
optionSelect : optionPaiementFacture ,
onGoBack : ( ) => this . refresh ( ) ,
lottie : {
source : require ( "./../../datas/json/paiement_facture.json" ) ,
loop : true
}
2020-07-02 14:35:00 +00:00
} ) ;
2020-11-04 20:02:23 +00:00
} } activeOpacity = { 0.9 } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< Icon name = 'file-document'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . content ] } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { styles . contentTitle } >
< Text style = { [ Typography . headline , Typography . semibold ] } >
{ I18n . t ( 'PAIEMENT_FACTURE' ) }
< / T e x t >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { { flex : 1 } } >
< Text
2023-06-22 17:41:26 +00:00
style = { [ Typography . overline , Color . grayColor , { paddingVertical : 5 } ] }
2020-11-04 20:02:23 +00:00
numberOfLines = { 5 } >
< / T e x t >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . containerTouch ] } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
2020-08-11 09:42:31 +00:00
/ * i f ( ! t h i s . s t a t e . i s I d e n t i f i e d )
2020-06-17 14:09:27 +00:00
this . props . navigation . push ( route . createIdentificationUser )
else
2020-08-11 09:42:31 +00:00
displayToast ( I18n . t ( 'ALREADY_IDENTIFIED' ) ) ; * /
this . props . navigation . push ( route . walletOptionSelect , {
2020-11-04 20:02:23 +00:00
optionSelect : optionIdentificationUserScreen ,
lottie : {
source : require ( "./../../datas/json/identification.json" ) ,
loop : true
} ,
isIdentified : this . props . resultUserIdentification . response . isIdentified
2020-08-11 09:42:31 +00:00
} )
2020-11-04 20:02:23 +00:00
} }
activeOpacity = { 0.9 } >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< Icon name = 'pencil-plus'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { [ styles . content ] } >
2020-06-10 03:10:45 +00:00
2020-11-04 20:02:23 +00:00
< View style = { { paddingTop : 20 , } } >
< Text style = { [ Typography . headline , Typography . semibold ] } >
{ I18n . t ( 'CREATION_IDENTIFICATION_CLIENT' ) }
< / T e x t >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< View style = { { flex : 1 } } >
< Text
2023-06-22 17:41:26 +00:00
style = { [ Typography . overline , Color . grayColor , { paddingVertical : 5 } ] }
2020-11-04 20:02:23 +00:00
numberOfLines = { 5 } >
< / T e x t >
< / V i e w >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
2020-06-02 09:05:50 +00:00
< / V i e w >
2023-03-16 10:19:39 +00:00
< View style = { styles . transactionContainer } >
< View style = { [ styles . containerTouch ] } >
< TouchableOpacity style = { styles . contain }
onPress = { ( ) => {
this . props . navigation . push ( 'ubaFormScreen' ) ;
} } activeOpacity = { 0.9 } >
< Icon name = 'bank'
color = { Color . primaryColor }
size = { 30 }
style = { styles . imageBanner } / >
< View style = { [ styles . content ] } >
< View style = { styles . contentTitle } >
< Text style = { [ Typography . headline , Typography . semibold ] } >
Agency Banking
< / T e x t >
< / V i e w >
< View style = { { flex : 1 } } >
< Text
2023-06-22 17:41:26 +00:00
style = { [ Typography . overline , Color . grayColor , { paddingVertical : 5 } ] }
2023-03-16 10:19:39 +00:00
numberOfLines = { 5 } >
< / T e x t >
< / V i e w >
< / V i e w >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
< View style = { { flex : 1 } } / >
< / V i e w >
2020-11-04 20:02:23 +00:00
< / >
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
{ this . renderHistoryTransaction ( wallet ) }
< / V i e w >
< / V i e w >
2020-07-15 16:25:32 +00:00
2020-11-04 20:02:23 +00:00
< / S c r o l l V i e w >
< / V i e w >
< / > )
:
(
< View style = { { flex : 1 , justifyContent : 'center' , alignItems : 'center' } } >
< Text style = { Typography . body1 } > { I18n . t ( 'NO_WALLET_ACTIVED' ) } < / T e x t >
< / V i e w >
)
)
}
renderModalHistoryDetail = ( ) => {
const { historyItemDetail } = this . state ;
2023-10-10 20:04:43 +00:00
const ma _condition = historyItemDetail . operation === "Retrait de carte vers wallet" || historyItemDetail . operation === "Retrait de carte vers cash" || historyItemDetail . operation === "Envoi de carte vers autre wallet" ;
2020-11-04 20:02:23 +00:00
return (
2023-10-06 14:14:32 +00:00
2020-11-04 20:02:23 +00:00
< Dialog . Container useNativeDriver = { true } visible = { this . state . displayModalHistory } >
< Dialog . Title > { I18n . t ( 'HISTORY_DETAIL' ) } < / D i a l o g . T i t l e >
2023-10-10 20:04:43 +00:00
{ ma _condition ? (
2023-10-06 14:14:32 +00:00
< 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' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . operation } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text style = { [ styles . body2 ] } > { I18n . t ( 'TRANSACTION_ID' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . id _transaction } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text style = { [ styles . body2 ] } > Date < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . date } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'CARD_ISSUING_COUNTRY' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . init _country } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'FEES_AND_TAXES' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . frais } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'TTC_AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant _net _init } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'EMETTEUR' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . emetteur } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'DESTINATAIRE' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . destinataire } < / T e x t >
2020-07-15 16:25:32 +00:00
< / V i e w >
2023-10-06 14:14:32 +00:00
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'FINAL_COUNTRY' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . final _country } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'EXCHANGE_TAUX' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
2023-10-10 13:30:27 +00:00
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . exchange _rate } < / T e x t >
2023-10-06 14:14:32 +00:00
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'NET_AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant _net _final } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'ACTIVE_WALLET' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . reseau _payeur } < / T e x t >
< / V i e w >
< / V i e w >
< / V i e w >
2020-07-15 16:25:32 +00:00
2023-10-06 14:14:32 +00:00
< / V i e w >
) : (
2023-10-10 20:04:43 +00:00
< 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' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . operation } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text style = { [ styles . body2 ] } > { I18n . t ( 'TRANSACTION_ID' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . id _transaction } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text style = { [ styles . body2 ] } > Date < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . date } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'INIT_COUNTRY' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . init _country } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'FEES_AND_TAXES' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . frais } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'NET_AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant _net _init } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'EMETTEUR' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . emetteur } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'DESTINATAIRE' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . destinataire } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'FINAL_COUNTRY' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . final _country } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'NET_AMOUNT' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . montant _net _final } < / T e x t >
< / V i e w >
< / V i e w >
< View style = { { flexDirection : 'row' , marginTop : 10 } } >
< View style = { { flex : 1 } } >
< Text tyle = { [ Typography . body2 ] } > { I18n . t ( 'ACTIVE_WALLET' ) } < / T e x t >
< / V i e w >
< View style = { { flex : 1 , alignItems : 'flex-end' } } >
2023-10-06 14:14:32 +00:00
< Text
style = { [ Typography . caption1 , Color . grayColor ] } > { this . state . historyItemDetail . reseau _payeur } < / T e x t >
< / V i e w >
2023-10-10 20:04:43 +00:00
< / V i e w >
< / V i e w >
< / V i e w >
2023-10-06 14:14:32 +00:00
) }
2020-06-02 17:12:39 +00:00
2020-11-04 20:02:23 +00:00
< Dialog . Button bold = { true } label = { I18n . t ( 'OK' ) } onPress = { ( ) => {
this . setState ( {
displayModalHistory : ! this . state . displayModalHistory ,
} ) ;
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
} } / >
< / D i a l o g . C o n t a i n e r >
) ;
}
renderHistoryTransactionItem = ( item , index , wallet ) => {
return (
< TouchableOpacity onPress = { ( ) => {
this . setState ( { displayModalHistory : true , historyItemDetail : item } )
} } style = { [ styles . contentService , { borderBottomColor : Color . primaryColor } ] } >
{
2023-10-10 13:30:27 +00:00
Object . keys ( omit ( item , [ 'id' , 'id_transaction' , 'type' , 'frais' , 'init_country' , 'final_country' , 'exchange_rate' , 'source' , 'emetteur' , 'montant_net_final' , 'montant_net_init' , 'reseau_payeur' , 'operation' ] ) ) . map ( ( element , i ) => (
2020-11-04 20:02:23 +00:00
< View style = { { alignItems : 'center' } } key = { i } >
2023-06-22 17:41:26 +00:00
< Text style = { [ Typography . overline , Color . grayColor , { marginTop : 4 } ] } >
2020-11-04 20:02:23 +00:00
{
isEqual ( element , 'montant' ) ?
2020-11-27 09:28:47 +00:00
` ${ item [ element ] . length > 8 ? cutString ( thousands ( item [ element ] , ' ' ) , 6 ) : thousands ( item [ element ] , ' ' ) } `
2020-11-04 20:02:23 +00:00
: isEqual ( element , 'destinataire' ) ?
2021-10-26 19:47:52 +00:00
item [ element ] . length > 13 ? cutString ( item [ element ] , 13 ) : item [ element ]
: isEqual ( element , 'date' ) ?
cutStringWithoutDot ( item [ element ] , 16 )
: item [ element ]
2020-11-04 20:02:23 +00:00
}
< / T e x t >
< / V i e w >
) )
}
< / T o u c h a b l e O p a c i t y >
) ;
/ * < V i e w
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 } / >
< / V i e w >
< View >
< Text style = { Typography . subhead } > { item . description } < / T e x t >
< Text style = { [ Typography . caption1 , Color . grayColor ] } style = { { marginTop : 5 } } >
{ date }
< / T e x t >
< / V i e w >
< / V i e w >
< /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 } < / T e x t >
< / V i e w >
)
} else {
return (
< View style = { { flex : 1 , justifyContent : 'center' , alignItems : 'center' } } >
< Text style = { Typography . body1 } > { errorTransaction } < / T e x t >
< / V i e w >
)
}
}
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 } / >
2023-06-22 17:41:26 +00:00
< Text style = { [ Typography . overline , Color . grayColor , { marginTop : 4 } ] } >
2020-11-04 20:02:23 +00:00
{ I18n . t ( item . label ) }
< / T e x t >
< / V i e w >
) )
}
< / V i e w >
{
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' ) } < / T e x t >
< / V i e w >
)
)
}
}
}
renderHistoryTransaction = ( wallet ) => {
return (
< >
{
this . props . loadingTransaction ?
(
< View style = { { flex : 1 , justifyContent : 'center' , alignItems : 'center' } } >
{ Platform . OS === 'android'
?
(
< >
< ProgressBarAndroid / >
< Text > { I18n . t ( 'LOADING_DOTS' ) } < / T e x t >
< / >
) :
< >
< ActivityIndicator size = "large" color = { '#ccc' } / >
< Text > { I18n . t ( 'LOADING_DOTS' ) } < / T e x t >
< / >
}
< / V i e w >
) :
< >
< View style = { [ styles . checkDefault , { borderBottomColor : Color . borderColor } ] } >
< Text
style = { [ Typography . title3 , Typography . semibold ] } >
{ I18n . t ( 'TRANSACTION_HISTORY' ) }
< / T e x t >
< / V i e w >
{ this . renderHistoryTransactionList ( wallet ) }
< / >
}
< / >
)
}
render ( ) {
2021-05-24 11:11:55 +00:00
console . warn ( "Wallet Detail user Props" , this . props ) ;
2020-11-04 20:02:23 +00:00
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' ) } < / T e x t >
2020-07-15 16:25:32 +00:00
< / V i e w >
2020-11-04 20:02:23 +00:00
:
2022-04-24 22:09:59 +00:00
this . props . result . response . password _validation === "MIN" && ! this . state . isLogged ?
< ScrollView style = { { flex : 1 , padding : 20 } } >
< Animatable . View ref = { ( comp ) => {
this . codeAgentAnim = comp
} } >
< Fumi iconClass = { FontAwesomeIcon }
label = { I18n . t ( 'PASSWORD' ) }
iconColor = { '#f95a25' }
iconSize = { 20 }
secureTextEntry
iconName = "lock"
value = { this . state . password }
onChangeText = { ( password ) => {
this . setState ( { password } ) ;
} }
style = { styles . input } / >
< / A n i m a t a b l e . V i e w >
< Button
loading = { this . props . loadingPasswordValidation }
onPress = { ( ) => {
this . props . passwordValidationAction ( {
password : this . state . password ,
user _id : this . props . navigation . state . params . agentId ,
network _agent _id : this . props . result . response . network _agent _id
} ) ;
} } >
{ I18n . t ( 'SUBMIT_LABEL' ) }
< / B u t t o n >
< / S c r o l l V i e w >
:
this . renderDetailWallet ( this . props . result . response )
2021-05-24 11:11:55 +00:00
: this . props . error !== null &&
this . props . error . data !== null &&
< View style = { { flex : 1 , justifyContent : 'center' , alignItems : 'center' } } >
< LottieView
style = { styles . lottie }
source = { require ( "./../../datas/json/no_wallet" ) }
autoPlay = { true }
loop = { false }
/ >
< Text style = { Typography . body1 } > { this . props . error . data . error } < / T e x t >
< / V i e w >
2020-11-04 20:02:23 +00:00
)
)
}
2020-06-02 09:05:50 +00:00
2020-11-04 20:02:23 +00:00
< / >
) ;
}
2020-05-30 21:58:22 +00:00
}
const mapStateToProps = state => ( {
2020-11-04 20:02:23 +00:00
loading : state . walletDetailReducer . loading ,
result : state . walletDetailReducer . result ,
error : state . walletDetailReducer . error ,
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
loadingTransaction : state . walletHistoryReducer . loadingTransaction ,
resultTransaction : state . walletHistoryReducer . resultTransaction ,
errorTransaction : state . walletHistoryReducer . errorTransaction ,
2020-05-30 21:58:22 +00:00
2020-11-04 20:02:23 +00:00
loadingUserIdentification : state . getUserIdentificationReducer . loading ,
resultUserIdentification : state . getUserIdentificationReducer . result ,
errorUserIdentification : state . getUserIdentificationReducer . error ,
2022-04-24 22:09:59 +00:00
loadingPasswordValidation : state . passwordValidationReducer . loading ,
resultPasswordValidation : state . passwordValidationReducer . result ,
errorPasswordValidation : state . passwordValidationReducer . error ,
2020-05-30 21:58:22 +00:00
} ) ;
const mapDispatchToProps = dispatch => bindActionCreators ( {
2020-11-04 20:02:23 +00:00
getWalletDetailActivated ,
getWalletTransactionHistoryUser ,
transferCommissionAction ,
resetWalletListDetailReducer ,
resetCommissionReducer ,
getWalletTransactionHistoryReset ,
depositActionReset ,
getUserIdentificationAction ,
2022-04-24 22:09:59 +00:00
getUserIdentificationResetAction ,
passwordValidationAction ,
passwordValidationReset ,
2020-05-30 21:58:22 +00:00
} , dispatch ) ;
export default connect ( mapStateToProps , mapDispatchToProps ) ( WalletDetailUser ) ;
const styles = StyleSheet . create ( {
2020-11-04 20:02:23 +00:00
container : {
flex : 1 ,
backgroundColor : Color . containerBackgroundColor
} ,
indicator : {
height : 2
} ,
tab : {
width : Utils . getWidthDevice ( ) / 2
} ,
tabbar : {
height : 40
} ,
2021-05-24 11:11:55 +00:00
lottie : {
width : 248 ,
height : 248
} ,
2020-11-04 20:02:23 +00:00
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 ,
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 ,
}
2021-10-26 18:19:13 +00:00
} )
