ilink-world/screens/wallet/WalletOptionSelect.js

1059 lines
60 KiB
JavaScript
Raw Normal View History

2020-06-02 09:05:50 +00:00
import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
2020-08-11 09:42:31 +00:00
import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet'
2020-06-02 09:05:50 +00:00
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
2020-08-11 09:42:31 +00:00
import { useActionSheet } from '@expo/react-native-action-sheet'
2020-06-02 09:05:50 +00:00
const route = require('./../../route.json');
let slugify = require('slugify');
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
2020-10-06 19:56:50 +00:00
import isNil from 'lodash/isNil';
import omit from 'lodash/omit';
2020-06-02 09:05:50 +00:00
import * as Utils from '../../utils/DeviceUtils';
import { Images } from '../../config/Images';
import { Color } from '../../config/Color';
import { baseUrl } from '../../webservice/IlinkConstants';
import { IlinkEmitter } from "../../utils/events";
import { Provider, Appbar } from 'react-native-paper';
import { readUser } from '../../webservice/AuthApi';
import { getNanoCreditAccountReset, getNanoCreditAccountAction, getNanoCreditUserHistoryAction, getNanoCreditUserHistoryReset } from '../../webservice/user/NanoCreditApi';
2020-08-11 09:42:31 +00:00
import _ from 'lodash';
2020-09-15 13:53:59 +00:00
import Icons from 'react-native-vector-icons/Ionicons'
2020-06-02 09:05:50 +00:00
import { FontWeight, Typography } from '../../config/typography';
2020-06-05 16:51:15 +00:00
import LottieView from 'lottie-react-native';
2020-10-16 19:14:18 +00:00
import { isIlinkWorldWallet, optionDepotScreen, optionPaiementFactureSubScreen, displayTransactionType, displayToast, cutStringWithoutDot, cutString, transactionHistoryIlinkLabel } from '../../utils/UtilsFunction';
2020-06-09 10:11:19 +00:00
import chunk from 'lodash/chunk';
2020-09-15 13:53:59 +00:00
import thousands from 'thousands';
import Tag from '../../components/Tag';
import Dialog from "react-native-dialog";
import { transactionHistoryNanoCreditLabel } from '../../utils/UtilsFunction';
2020-09-30 05:46:30 +00:00
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { responsiveWidth } from 'react-native-responsive-dimensions';
2020-06-02 09:05:50 +00:00
2020-08-11 09:42:31 +00:00
class WalletOptionSelect extends Component {
2020-06-02 09:05:50 +00:00
constructor(props) {
super(props);
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
this.state = {
options: this.props.navigation.state.params.optionSelect.options,
title: this.props.navigation.state.params.optionSelect.title,
subTitle: this.props.navigation.state.params.optionSelect.subTitle,
2020-06-18 05:38:10 +00:00
type: this.props.navigation.state.params.optionSelect.type,
wallet: this.props.navigation.state.params.wallet,
2020-07-02 14:35:00 +00:00
lottie: this.props.navigation.state.params.lottie,
onGoBack: this.props.navigation.state.params.onGoBack,
2020-08-11 09:42:31 +00:00
isIdentified: this.props.navigation.state.params.isIdentified || null,
2020-09-15 13:53:59 +00:00
isNanoCredit: this.props.navigation.state.params.hasOwnProperty('isNanoCredit'),
2020-09-30 05:46:30 +00:00
user: null,
displayModalHistory: false,
historyItemDetail: null,
2020-09-30 05:46:30 +00:00
isDataHasLoaded: false
2020-06-02 09:05:50 +00:00
}
2020-06-18 05:38:10 +00:00
console.log("WALLET OPTION PROPS", this.props);
2020-07-02 14:35:00 +00:00
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
2020-09-15 13:53:59 +00:00
2020-09-30 05:46:30 +00:00
this.props.getNanoCreditAccountReset();
this.props.getNanoCreditUserHistoryReset();
2020-09-15 13:53:59 +00:00
readUser().then((user) => {
if (user) {
if (user !== undefined) {
if (user.category === undefined) {
this.props.getNanoCreditAccountAction(user.id);
this.props.getNanoCreditUserHistoryAction(user.id, true);
} else {
if (user.category === 'geolocated')
this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
}
2020-09-15 13:53:59 +00:00
this.setState({ user });
}
}
});
2020-09-30 05:46:30 +00:00
this.willFocus = this.props.navigation.addListener(
'willFocus',
payload => {
console.log("WIIL FOCUS CALL");
2020-09-30 05:46:30 +00:00
readUser().then((user) => {
if (user) {
if (user !== undefined) {
if (user.category === undefined) {
this.props.getNanoCreditAccountAction(user.id);
this.props.getNanoCreditUserHistoryAction(user.id, true);
} else {
if (user.category === 'geolocated')
this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
}
2020-09-30 05:46:30 +00:00
}
}
});
});
2020-06-02 09:05:50 +00:00
}
static navigationOptions = ({ navigation }) => ({
header: null,
headerMode: 'none',
headerTitle: null,
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
barStyle: { backgroundColor: '#694fad' },
drawerLabel: I18n.t('CREDIT_MANAGE'),
drawerIcon: ({ tintColor }) => (
<Icon
name={'credit-card'}
size={24}
/>)
});
2020-09-30 05:46:30 +00:00
renderResultGetNanoCreditAccount() {
const { result } = this.props;
console.log("BEFORE", this.props);
if (result !== null) {
if (result.response !== null) {
this.setState({
user: { ...this.state.user, balance_credit: result.response.balance_credit, balance_epargne: result.response.balance_epargne },
isDataHasLoaded: true
});
console.log("AFTER", this.props);
}
2020-08-11 09:42:31 +00:00
2020-09-30 05:46:30 +00:00
}
}
2020-08-11 09:42:31 +00:00
2020-07-02 14:35:00 +00:00
updateLangue() {
2020-11-04 20:02:23 +00:00
this.props.navigation.setParams({ name: I18n.t('WALLET') });
2020-07-02 14:35:00 +00:00
this.forceUpdate()
}
2020-08-11 09:42:31 +00:00
redirectToRoute = (optionsParam) => {
if (optionsParam.hasOwnProperty('hasSubMenu')) {
let options = [];
for (let index = 0; index < optionsParam.subMenuOption.length; index++) {
options.push(optionsParam.subMenuOption[index].title);
}
const destructiveButtonIndex = 0;
const cancelButtonIndex = 2;
this.props.showActionSheetWithOptions(
{
options,
cancelButtonIndex,
destructiveButtonIndex,
},
buttonIndex => {
this.props.navigation.push(optionsParam.subMenuOption[buttonIndex].screen);
},
);
console.log(this.props);
} else {
switch (this.state.type) {
case 'FACTURE':
this.props.navigation.push(optionsParam.screen, {
optionSelect: optionsParam.subScreenOption,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
});
break;
case 'DEPOT':
this.props.navigation.push(optionsParam.screen, {
optionSelect: optionsParam.subScreenOption,
wallet: this.state.wallet,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
});
break;
case 'DEPOT_USER':
this.props.navigation.push(optionsParam.screen, {
wallet: this.state.wallet,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
optionSelect: optionsParam.subScreenOption,
});
break;
case 'RETRAIT':
this.props.navigation.push(optionsParam.screen, {
wallet: this.state.wallet,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
});
break;
case 'WALLET_TO_BANK':
this.props.navigation.push(optionsParam.screen, {
wallet: this.state.wallet,
optionSelect: optionsParam.subScreenOption,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
});
break;
case 'NANO_CREDIT':
this.props.navigation.push(optionsParam.screen, {
wallet: this.state.wallet,
optionSelect: optionsParam.subScreenOption,
onGoBack: () => this.props.navigation.state.params.onGoBack(),
});
break;
default:
this.props.navigation.push(optionsParam.screen)
break;
}
2020-06-18 05:38:10 +00:00
}
2020-08-11 09:42:31 +00:00
2020-06-18 05:38:10 +00:00
}
renderItem = (options, isOneElement, index) => (
2020-06-09 10:11:19 +00:00
isOneElement ?
<>
2020-06-18 05:38:10 +00:00
<View key={index} style={[styles.containerTouch]}>
2020-06-09 10:11:19 +00:00
<TouchableOpacity style={styles.contain}
onPress={() => {
2020-06-18 05:38:10 +00:00
this.redirectToRoute(options);
2020-06-09 10:11:19 +00:00
}}
activeOpacity={0.9}>
<Icon name={options.icon}
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
2020-11-04 20:02:23 +00:00
{I18n.t(options.title)}
2020-06-09 10:11:19 +00:00
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }} />
</> :
2020-08-11 09:42:31 +00:00
<>
<View style={[styles.containerTouch]}>
2020-06-09 10:11:19 +00:00
2020-08-11 09:42:31 +00:00
<TouchableOpacity style={styles.contain}
onPress={() => {
if (!_.isNil(this.state.isIdentified)) {
console.log(options);
if (_.isEqual(options.screen, 'createIdentificationUser')) {
if (this.state.isIdentified)
displayToast(I18n.t('ALREADY_IDENTIFIED'));
else
this.redirectToRoute(options);
}
else if (_.isEqual(options.screen, 'modifyIdentificationUser')) {
if (!this.state.isIdentified)
displayToast(I18n.t('NOT_YET_IDENTIFY'));
else
this.redirectToRoute(options);
}
}
else
this.redirectToRoute(options);
2020-06-09 10:11:19 +00:00
2020-08-11 09:42:31 +00:00
}}
activeOpacity={0.9}>
2020-06-09 10:11:19 +00:00
2020-08-11 09:42:31 +00:00
<Icon name={options.icon}
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
2020-06-09 10:11:19 +00:00
2020-08-11 09:42:31 +00:00
<View style={[styles.content]}>
2020-06-09 10:11:19 +00:00
2020-08-11 09:42:31 +00:00
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
2020-11-04 20:02:23 +00:00
{I18n.t(options.title)}
2020-08-11 09:42:31 +00:00
</Text>
</View>
<View style={{ flex: 1 }}>
</View>
</View>
</TouchableOpacity>
</View>
</>
2020-06-09 10:11:19 +00:00
);
2020-06-02 09:05:50 +00:00
updateLangue() {
this.props.navigation.setParams({ name: I18n.t('WALLET') })
this.forceUpdate();
}
2020-09-15 13:53:59 +00:00
renderAccountDetail = (options) => (
<>
<View
style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', 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('CREDIT_ACCOUNT')}
</Text>
{this.state.user !== null ?
<Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_credit, ' ')} ${this.state.wallet.currency_code}`}</Text>
: null}
</View>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={[
styles.circlePoint,
{ backgroundColor: Color.primaryColor },
]}>
<Icons name='md-key'
size={28}
color={Color.whiteColor}
/>
</View>
<View>
<Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
{I18n.t('SAVINGS_ACCOUNT')}
</Text>
{this.state.user !== null ?
<Text style={[Typography.body2]}>{`${thousands(this.state.user.balance_epargne, ' ')} ${this.state.wallet.currency_code}`}</Text>
: null}
</View>
</View>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 30, marginBottom: 10, flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Tag icon={<Icon name='update' size={20} color={Color.whiteColor} style={{ marginLeft: -15 }} />}
style={{ paddingRight: 10, width: 120, borderRightWidth: 1, borderRightColor: Color.whiteColor }}
2020-09-15 13:53:59 +00:00
primary
onPress={() => {
this._scrollView.scrollToEnd();
}}>{I18n.t('HISTORY')}
2020-09-15 13:53:59 +00:00
</Tag>
</View>
</>
);
renderHistoryTransactionList = () => {
const { resultHistory, errorHistory } = this.props;
if (errorHistory !== null) {
if (typeof errorHistory.data !== 'undefined') {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{errorHistory.data.error}</Text>
</View>
)
}
else {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={Typography.body1}>{errorHistory}</Text>
</View>
)
}
}
if (resultHistory !== null) {
if (resultHistory.response !== null) {
return (
Array.isArray(resultHistory.response) && (resultHistory.response.length) > 0 ?
(
<>
<View style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{
2020-10-16 19:14:18 +00:00
transactionHistoryIlinkLabel().map((item, index) => (
<View style={{ alignItems: 'center' }} key={index}>
<Icon name={item.icon} size={24} color={Color.primaryColor} />
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
2020-11-04 20:02:23 +00:00
{I18n.t(item.label)}
</Text>
</View>
))
}
</View>
{
resultHistory.response.map((item, index) => (
this.renderHistoryTransactionItem(item, index)
))
}
</>
) :
(
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start' }}>
<Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
</View>
)
)
}
}
}
renderHistoryTransactionItem = (item, index) => {
return (
<TouchableOpacity onPress={() => { this.setState({ displayModalHistory: true, historyItemDetail: item }) }} style={[styles.contentService, { borderBottomColor: Color.primaryColor }]}>
{
2020-10-06 19:56:50 +00:00
!isNil(this.state.user.category) ?
2020-10-16 19:14:18 +00:00
Object.keys(omit(item, ['id', 'retrait_cash', 'type_historique', 'type_caution', 'id_demande', 'montant_rembourse', 'partiellement_rembourse', 'duree_mois', 'etat', 'interet', 'taxe', 'date_validation', 'date_remboursement_prevu', 'date_remboursement', 'id_user', 'id_wallet_agent', 'id_network', 'user', 'user_phone', 'agent', 'codeParrain'])).map((element, i) => (
2020-10-06 19:56:50 +00:00
<View style={{ alignItems: 'center' }} key={i}>
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
{
isEqual(element, 'montant') ?
` ${thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
: isEqual(element, 'date_creation') ?
2020-10-16 19:14:18 +00:00
cutStringWithoutDot(item[element], 16)
2020-10-06 19:56:50 +00:00
: item[element]
}
</Text>
</View>
))
:
2020-10-25 16:39:19 +00:00
Object.keys(omit(item, ['id', 'type', 'id_epargne', 'type_historique', 'date_demande', 'date_fin', 'date_remboursement_prevu', 'date_validation', 'date_cassation', 'date_remboursement', 'id_demande', 'duree_mois', 'taxe', '', 'date_fin', 'date_cassation', 'etat', 'id_user', 'id_network', 'user', 'partiellement_rembourse', 'user_phone', 'type_caution', 'interet', 'date_remboursement_prevu', 'date_remboursement', 'id_wallet_agent', 'retrait_cash', 'codeParrain', 'agent', 'montant_rembourse', ''])).map((element, i) => (
<View style={{ alignItems: 'center' }} key={i}>
<Text style={[Typography.overline, Color.grayColor], { marginTop: 4 }}>
{
isEqual(element, 'montant') ?
` ${thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
: isEqual(element, 'date_creation') ?
cutStringWithoutDot(item[element], 16)
: item[element]
}
</Text>
</View>
))
}
</TouchableOpacity>
);
}
renderModalHistoryDetail = () => {
const { historyItemDetail } = this.state;
return (
<Dialog.Container useNativeDriver={true} visible={this.state.displayModalHistory}>
2020-11-04 20:02:23 +00:00
<Dialog.Title>{I18n.t('HISTORY_DETAIL')}</Dialog.Title>
{
isNil(this.state.user.category) ?
isEqual(historyItemDetail.type_historique, 'N') ?
<ScrollView persistentScrollbar={true}>
<View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>Type</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
2020-11-04 20:02:23 +00:00
<Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DEMAND_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_demande}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
</View>
</View>
</View>
</ScrollView>
:
<View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>Type</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
2020-11-04 20:02:23 +00:00
<Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>Type</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_fin}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
</View>
</View>
</View>
: <ScrollView persistentScrollbar={true}>
<View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>Type</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
2020-11-04 20:02:23 +00:00
<Text style={[Typography.caption1, Color.grayColor]}>{I18n.t(displayTransactionType(this.state.historyItemDetail.type_historique))}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('ID_DEMAND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_demande}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_REFUND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_rembourse + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('AMOUNT_PARTIALLY_REFUND')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.partiellement_rembourse + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('WITHDRAWAL_IN_CASH')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
2020-10-12 06:34:33 +00:00
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.retrait_cash == 1 ? I18n.t('YES') : I18n.t('NO')}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('VALIDATION_DATE')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_validation}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT_PREVU')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement_prevu}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<View style={{ flex: 1 }}>
<Text tyle={[Typography.body2]}>{I18n.t('DATE_REMBOURSEMENT')}</Text>
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
<Text style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_remboursement}</Text>
</View>
</View>
</View>
</ScrollView>
}
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
this.setState({
displayModalHistory: !this.state.displayModalHistory,
});
}} />
</Dialog.Container>
);
}
renderHistory = () => {
return (
<View style={{ backgroundColor: Color.containerBackgroundColor, flex: 1 }}>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTION_HISTORY')}
</Text>
</View>
{
this.props.loadingHistory ?
(
<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>
) : !isNil(this.state.user) &&
this.renderHistoryTransactionList()
}
</View>
);
}
2020-06-02 09:05:50 +00:00
render() {
2020-09-30 05:46:30 +00:00
!this.state.isDataHasLoaded && this.renderResultGetNanoCreditAccount();
2020-06-02 09:05:50 +00:00
return (
<Provider>
<View style={{ flex: 1 }}>
2020-06-02 09:05:50 +00:00
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={false}
/>
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
<Appbar.BackAction
onPress={() => { this.props.navigation.pop() }}
/>
<Appbar.Content
2020-11-04 20:02:23 +00:00
title={I18n.t(this.state.title)}
subtitle={I18n.t(this.state.subTitle)}
2020-06-02 09:05:50 +00:00
/>
</Appbar.Header>
<ScrollView style={styles.container} ref={component => this._scrollView = component} >
2020-06-05 16:51:15 +00:00
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
2020-09-15 13:53:59 +00:00
<View>
{
this.state.isNanoCredit ?
this.renderAccountDetail()
:
<View style={{
justifyContent: 'center',
alignItems: 'center'
}}>
<LottieView
style={styles.lottie}
source={this.state.lottie.source}
autoPlay
loop={this.state.lottie.loop}
/>
</View>
}
2020-06-09 10:11:19 +00:00
</View>
2020-06-05 16:51:15 +00:00
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
2020-08-11 09:42:31 +00:00
{I18n.t('OPERATIONS')}
2020-06-05 16:51:15 +00:00
</Text>
</View>
2020-06-09 10:11:19 +00:00
{
2020-06-18 05:38:10 +00:00
chunk(this.state.options, 2).map((item, index) => (
2020-06-09 10:11:19 +00:00
2020-06-18 05:38:10 +00:00
<View key={index} style={styles.transactionContainer}>
2020-06-09 10:11:19 +00:00
{
item.length === 1 ?
2020-06-18 05:38:10 +00:00
item.map((wallet, i) => (
this.renderItem(wallet, true, i)
2020-06-09 10:11:19 +00:00
)) :
2020-06-18 05:38:10 +00:00
item.map((wallet, i) => (
this.renderItem(wallet, false, i)
2020-06-09 10:11:19 +00:00
))
}
</View>
))
}
{
isEqual(this.props.navigation.state.params.optionSelect.type, 'NANO_CREDIT') ?
this.renderHistory()
: <View style={{ flex: 1 }} />
}
</ScrollView>
2020-06-02 09:05:50 +00:00
</View>
2020-06-02 09:05:50 +00:00
</Provider>
);
}
}
2020-09-30 05:46:30 +00:00
const mapStateToProps = state => ({
loading: state.getNanoCreditAccountUserReducer.loading,
result: state.getNanoCreditAccountUserReducer.result,
error: state.getNanoCreditAccountUserReducer.error,
loadingHistory: state.getNanoCreditHistoryUserReducer.loading,
resultHistory: state.getNanoCreditHistoryUserReducer.result,
errorHistory: state.getNanoCreditHistoryUserReducer.error,
2020-09-30 05:46:30 +00:00
});
const mapDispatchToProps = dispatch => bindActionCreators({
getNanoCreditAccountAction,
getNanoCreditAccountReset,
getNanoCreditUserHistoryAction,
getNanoCreditUserHistoryReset
2020-09-30 05:46:30 +00:00
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(connectActionSheet(WalletOptionSelect));
2020-06-02 09:05:50 +00:00
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.containerBackgroundColor,
2020-06-05 16:51:15 +00:00
paddingHorizontal: 20,
2020-06-02 09:05:50 +00:00
},
item: {
paddingVertical: 15,
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
2020-06-05 16:51:15 +00:00
},
lottie: {
2020-06-09 10:11:19 +00:00
width: 540,
height: 240
2020-06-05 16:51:15 +00:00
},
2020-09-15 13:53:59 +00:00
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
2020-06-05 16:51:15 +00:00
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
paddingVertical: 10,
marginTop: 5
},
2020-06-09 10:11:19 +00:00
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: {
2020-07-08 19:01:56 +00:00
height: Utils.scaleWithPixel(65),
2020-06-09 10:11:19 +00:00
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 12,
2020-09-15 13:53:59 +00:00
},
contentService: {
paddingVertical: 10,
borderBottomWidth: 0.5,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
2020-09-15 13:53:59 +00:00
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 },
2020-06-09 10:11:19 +00:00
2020-06-02 09:05:50 +00:00
});