463 lines
19 KiB
JavaScript
463 lines
19 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { StyleSheet, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
|
|
import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet'
|
|
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
import { useActionSheet } from '@expo/react-native-action-sheet'
|
|
const route = require('./../../route.json');
|
|
let slugify = require('slugify');
|
|
import I18n from 'react-native-i18n'
|
|
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 _ from 'lodash';
|
|
import Icons from 'react-native-vector-icons/Ionicons'
|
|
import { FontWeight, Typography } from '../../config/typography';
|
|
import LottieView from 'lottie-react-native';
|
|
import { isIlinkWorldWallet, optionDepotScreen, optionPaiementFactureSubScreen, displayToast } from '../../utils/UtilsFunction';
|
|
import chunk from 'lodash/chunk';
|
|
import thousands from 'thousands';
|
|
import Tag from '../../components/Tag';
|
|
|
|
class WalletOptionSelect extends Component {
|
|
|
|
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,
|
|
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: this.props.navigation.state.params.isIdentified || null,
|
|
isNanoCredit: this.props.navigation.state.params.hasOwnProperty('isNanoCredit'),
|
|
user: null
|
|
}
|
|
console.log("WALLET OPTION PROPS", this.props);
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
|
|
|
|
|
|
readUser().then((user) => {
|
|
if (user) {
|
|
if (user !== undefined) {
|
|
this.setState({ user });
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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}
|
|
/>)
|
|
});
|
|
|
|
|
|
|
|
updateLangue() {
|
|
this.props.navigation.setParams({ name: I18n.t('WALLET') })
|
|
this.forceUpdate()
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
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}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{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')) {
|
|
if (!this.state.isIdentified)
|
|
displayToast(I18n.t('NOT_YET_IDENTIFY'));
|
|
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}>
|
|
<Text style={[Typography.headline, Typography.semibold]}>
|
|
{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]}>{`${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, borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 1, borderRightColor: Color.whiteColor }}
|
|
primary
|
|
onPress={() => {
|
|
|
|
}}>{I18n.t('SAVINGS')}
|
|
</Tag>
|
|
<Tag icon={<Icon name='update' size={20} color={Color.whiteColor} />} primary
|
|
style={{ width: 110, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, }}>
|
|
{I18n.t('CREDIT')}
|
|
</Tag>
|
|
|
|
</View>
|
|
</>
|
|
);
|
|
|
|
render() {
|
|
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={this.state.title}
|
|
subtitle={this.state.subTitle}
|
|
/>
|
|
</Appbar.Header>
|
|
|
|
<View style={styles.container}>
|
|
|
|
<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>
|
|
))
|
|
}
|
|
|
|
</View>
|
|
|
|
</View>
|
|
</Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default 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,
|
|
},
|
|
blockView: {
|
|
paddingVertical: 10,
|
|
borderBottomWidth: 0.5,
|
|
},
|
|
|
|
}); |