1172 lines
60 KiB
JavaScript
1172 lines
60 KiB
JavaScript
import React, {Component} from 'react';
|
|
import {
|
|
ActivityIndicator,
|
|
Platform,
|
|
ProgressBarAndroid,
|
|
ScrollView,
|
|
StatusBar,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import {connectActionSheet} from '@expo/react-native-action-sheet'
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import I18n from 'react-native-i18n';
|
|
import isEqual from 'lodash/isEqual';
|
|
import isNil from 'lodash/isNil';
|
|
import omit from 'lodash/omit';
|
|
import * as Utils from '../../utils/DeviceUtils';
|
|
import {Color} from '../../config/Color';
|
|
import {IlinkEmitter} from "../../utils/events";
|
|
import {Appbar, Provider} from 'react-native-paper';
|
|
import {readUser} from '../../webservice/AuthApi';
|
|
import {
|
|
getNanoCreditAccountAction,
|
|
getNanoCreditAccountReset,
|
|
getNanoCreditUserHistoryAction,
|
|
getNanoCreditUserHistoryReset
|
|
} from '../../webservice/user/NanoCreditApi';
|
|
import _ from 'lodash';
|
|
import Icons from 'react-native-vector-icons/Ionicons'
|
|
import {Typography} from '../../config/typography';
|
|
import LottieView from 'lottie-react-native';
|
|
import {
|
|
cutString,
|
|
cutStringWithoutDot,
|
|
displayToast,
|
|
displayTransactionType,
|
|
transactionHistoryIlinkLabel
|
|
} from '../../utils/UtilsFunction';
|
|
import chunk from 'lodash/chunk';
|
|
import thousands from 'thousands';
|
|
import Tag from '../../components/Tag';
|
|
import Dialog from "react-native-dialog";
|
|
import {connect} from 'react-redux';
|
|
import {bindActionCreators} from 'redux';
|
|
import {responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import {getWalletDetailActivated} from "../../webservice/WalletApi";
|
|
import {getWalletTransactionHistoryUser} from "../../webservice/WalletTransactionHistoryApi";
|
|
import {getUserIdentificationAction} from "../../webservice/IdentificationApi";
|
|
import {store} from "../../redux/store";
|
|
|
|
const route = require('./../../route.json');
|
|
let slugify = require('slugify');
|
|
|
|
class WalletOptionSelect extends Component {
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
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,
|
|
type: this.props.navigation.state.params.optionSelect.type,
|
|
wallet: this.props.navigation.state.params.wallet,
|
|
lottie: this.props.navigation.state.params.lottie,
|
|
onGoBack: this.props.navigation.state.params.onGoBack,
|
|
isIdentified: store.getState().getUserIdentificationReducer.result !== null ? store.getState().getUserIdentificationReducer.result.response.isIdentified : false,
|
|
isNanoCredit: this.props.navigation.state.params.hasOwnProperty('isNanoCredit'),
|
|
user: null,
|
|
displayModalHistory: false,
|
|
historyItemDetail: null,
|
|
isDataHasLoaded: false
|
|
}
|
|
console.log("WALLET OPTION PROPS", this.props);
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
|
|
this.props.getNanoCreditAccountReset();
|
|
this.props.getNanoCreditUserHistoryReset();
|
|
|
|
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);
|
|
}
|
|
this.setState({user});
|
|
}
|
|
}
|
|
});
|
|
|
|
this.willFocus = this.props.navigation.addListener(
|
|
'willFocus',
|
|
payload => {
|
|
console.log("WIIL FOCUS CALL");
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
if (user.category === undefined) {
|
|
this.props.getNanoCreditAccountAction(user.id);
|
|
this.props.getNanoCreditUserHistoryAction(user.id, true);
|
|
//refresh wallet
|
|
this.props.getWalletDetailActivated(user.id, null);
|
|
this.props.getUserIdentificationAction(user.phone);
|
|
this.props.getWalletTransactionHistoryUser(user.id);
|
|
} else {
|
|
if (user.category === 'geolocated')
|
|
this.props.getNanoCreditUserHistoryAction(this.state.wallet.id, false);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
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}
|
|
/>)
|
|
});
|
|
|
|
renderResultGetNanoCreditAccount() {
|
|
const {result} = this.props;
|
|
console.log("BEFORE", this.props);
|
|
if (result !== null) {
|
|
if (result.response !== null) {
|
|
this.setState({
|
|
balance_credit: result.response.balance_credit,
|
|
balance_epargne: result.response.balance_epargne,
|
|
user: {
|
|
...this.state.user,
|
|
balance_credit: result.response.balance_credit,
|
|
balance_epargne: result.response.balance_epargne
|
|
},
|
|
isDataHasLoaded: true
|
|
});
|
|
console.log("AFTER", this.props);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({name: I18n.t('WALLET')});
|
|
this.forceUpdate()
|
|
}
|
|
|
|
redirectToRoute = (optionsParam) => {
|
|
console.warn("Wallet Select Props", 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);
|
|
},
|
|
);
|
|
} 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;
|
|
case 'NANO_SANTE':
|
|
console.log("Option param", optionsParam);
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
renderItem = (options, isOneElement, index) => (
|
|
isOneElement ?
|
|
<>
|
|
<View key={index} style={[styles.containerTouch]}>
|
|
|
|
<TouchableOpacity style={styles.contain}
|
|
onPress={() => {
|
|
this.redirectToRoute(options);
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name={options.icon}
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={[styles.contentTitle], {paddingTop: options.title.length > 20 ? 0 : 5}}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t(options.title)}
|
|
</Text>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}/>
|
|
</> :
|
|
|
|
<>
|
|
<View style={[styles.containerTouch]}>
|
|
|
|
<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') || _.isEqual(options.screen, 'askPrestationUser')) {
|
|
if (!this.state.isIdentified)
|
|
displayToast(I18n.t('NOT_YET_IDENTIFY'));
|
|
else
|
|
this.redirectToRoute(options);
|
|
} else
|
|
this.redirectToRoute(options);
|
|
|
|
} else
|
|
this.redirectToRoute(options);
|
|
|
|
}}
|
|
activeOpacity={0.9}>
|
|
|
|
<Icon name={options.icon}
|
|
color={Color.primaryColor}
|
|
size={30}
|
|
style={styles.imageBanner}/>
|
|
|
|
<View style={[styles.content]}>
|
|
|
|
<View style={[styles.contentTitle], {paddingTop: options.title.length > 20 ? 0 : 5}}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{I18n.t(options.title)}
|
|
</Text>
|
|
</View>
|
|
|
|
<View style={{flex: 1}}>
|
|
</View>
|
|
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</>
|
|
|
|
);
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({name: I18n.t('WALLET')})
|
|
this.forceUpdate();
|
|
}
|
|
|
|
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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_credit, ' ')} ${this.state.wallet.currency_code}` : `${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]}>{this.props.result != null ? `${thousands(this.props.result.response.balance_epargne, ' ')} ${this.state.wallet.currency_code}` : `${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}}
|
|
primary
|
|
onPress={() => {
|
|
this._scrollView.scrollToEnd();
|
|
}}>{I18n.t('HISTORY')}
|
|
</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}]}>
|
|
{
|
|
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}}>
|
|
{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}]}>
|
|
{
|
|
|
|
!isNil(this.state.user.category) ?
|
|
Object.keys(omit(item, ['id', 'retrait_cash', 'montant_retire', '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) => (
|
|
<View style={{alignItems: 'center'}} key={i}>
|
|
|
|
<Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
|
|
{
|
|
isEqual(element, 'montant') ?
|
|
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
|
|
: isEqual(element, 'date_creation') ?
|
|
cutStringWithoutDot(item[element], 16)
|
|
: item[element]
|
|
}
|
|
</Text>
|
|
</View>
|
|
))
|
|
:
|
|
Object.keys(omit(item, ['id', 'type', 'montant_retire', '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') ?
|
|
` ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : 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}>
|
|
|
|
<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'}}>
|
|
<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('CAUTION_TYPE')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type_caution}</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 == 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>
|
|
:
|
|
<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'}}>
|
|
<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_SAVINGS')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</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('AMOUNT_WITHDRAWAL')}</Text>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'flex-end'}}>
|
|
<Text
|
|
style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + 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]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : 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'}}>
|
|
<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 == 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>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
!this.state.isDataHasLoaded && this.renderResultGetNanoCreditAccount();
|
|
return (
|
|
<Provider>
|
|
<View style={{flex: 1}}>
|
|
|
|
<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
|
|
title={I18n.t(this.state.title)}
|
|
subtitle={I18n.t(this.state.subTitle)}
|
|
/>
|
|
</Appbar.Header>
|
|
|
|
<ScrollView style={styles.container} ref={component => this._scrollView = component}>
|
|
|
|
{this.state.displayModalHistory && this.renderModalHistoryDetail()}
|
|
|
|
<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>
|
|
}
|
|
|
|
</View>
|
|
|
|
<View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
|
|
<Text
|
|
style={[Typography.title3, Typography.semibold]}>
|
|
{I18n.t('OPERATIONS')}
|
|
</Text>
|
|
</View>
|
|
{
|
|
chunk(this.state.options, 2).map((item, index) => (
|
|
|
|
<View key={index} style={styles.transactionContainer}>
|
|
{
|
|
item.length === 1 ?
|
|
|
|
item.map((wallet, i) => (
|
|
this.renderItem(wallet, true, i)
|
|
)) :
|
|
item.map((wallet, i) => (
|
|
this.renderItem(wallet, false, i)
|
|
))
|
|
}
|
|
</View>
|
|
))
|
|
}
|
|
|
|
{
|
|
isEqual(this.props.navigation.state.params.optionSelect.type, 'NANO_CREDIT') ?
|
|
this.renderHistory()
|
|
: <View style={{flex: 1}}/>
|
|
}
|
|
|
|
</ScrollView>
|
|
|
|
</View>
|
|
</Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
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,
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => bindActionCreators({
|
|
getNanoCreditAccountAction,
|
|
getNanoCreditAccountReset,
|
|
|
|
getNanoCreditUserHistoryAction,
|
|
getNanoCreditUserHistoryReset,
|
|
|
|
getWalletDetailActivated,
|
|
getUserIdentificationAction,
|
|
getWalletTransactionHistoryUser
|
|
}, dispatch);
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(connectActionSheet(WalletOptionSelect));
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: Color.containerBackgroundColor,
|
|
paddingHorizontal: 20,
|
|
},
|
|
item: {
|
|
paddingVertical: 15,
|
|
borderBottomWidth: 1,
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center"
|
|
},
|
|
lottie: {
|
|
width: 540,
|
|
height: 240
|
|
},
|
|
circlePoint: {
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 25,
|
|
marginRight: 5,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
checkDefault: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderBottomWidth: 1,
|
|
paddingVertical: 10,
|
|
marginTop: 5
|
|
},
|
|
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(65),
|
|
paddingHorizontal: 10,
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-start',
|
|
flex: 1,
|
|
},
|
|
contentTitle: {
|
|
paddingTop: 12,
|
|
},
|
|
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},
|
|
|
|
});
|