681 lines
23 KiB
JavaScript
681 lines
23 KiB
JavaScript
/**
|
|
* Sample React Native App
|
|
* https://github.com/facebook/react-native
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
|
|
import React, {Component} from 'react';
|
|
import {Alert, AsyncStorage, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import {responsiveFontSize, responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
|
import {primary, primaryDarkAdvanced} from './../../utils/theme.json';
|
|
import {disconnect, readUser} from './../../webservice/AuthApi';
|
|
import I18n from 'react-native-i18n'
|
|
import Button from 'apsl-react-native-button'
|
|
import {IlinkEmitter} from "./../../utils/events"
|
|
import {SafeAreaView} from 'react-navigation';
|
|
import DeviceInfo from "react-native-device-info"
|
|
import Configuration from "../../webservice/persistences/Configuration";
|
|
import {ScrollView} from 'react-native-gesture-handler';
|
|
|
|
const route = require("./../../route.json")
|
|
require('./../../utils/Translations')
|
|
var DBEvents = require('react-native-db-models').DBEvents
|
|
let theme = require('./../../utils/theme.json')
|
|
|
|
export default class OptionsMenu extends Component {
|
|
|
|
static navigatorStyle = {
|
|
statusBarColor: primaryDarkAdvanced,
|
|
};
|
|
commandeListe
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this.initState();
|
|
IlinkEmitter.on("menuLink", this.onMenuNavigationEvent.bind(this))
|
|
IlinkEmitter.on("userconnect", this.onUserConnect.bind(this))
|
|
IlinkEmitter.on("userdisconnect", this.hideSideMenu.bind(this))
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
|
|
this.configuration = new Configuration();
|
|
readUser().then((user) => {
|
|
if (user !== null && user !== undefined) {
|
|
this.setState({user});
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
retrieveAndroidInformation() {
|
|
this.configuration._getData().then((lang) => {
|
|
if (lang) {
|
|
I18n.locale = lang
|
|
readUser().then((result) => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000)
|
|
})
|
|
} else {
|
|
let code = DeviceInfo.getDeviceLocale();
|
|
I18n.locale = code.toLowerCase()
|
|
readUser().then((result) => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000)
|
|
}).catch((e) => {
|
|
this.props.navigation.navigate("Auth")
|
|
});
|
|
}
|
|
}).catch((e) => {
|
|
let code = DeviceInfo.getDeviceLocale()
|
|
I18n.locale = code.toLowerCase()
|
|
readUser().then((result) => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000)
|
|
}).catch((e) => {
|
|
this.props.navigation.navigate("Auth")
|
|
});
|
|
|
|
|
|
})
|
|
|
|
return ""
|
|
}
|
|
|
|
componentDidMount() {
|
|
const items = this.props.navigation.router.childRouters.sta.childRouters;
|
|
this.setState({items: items})
|
|
this.retrieveAndroidInformation()
|
|
|
|
|
|
}
|
|
|
|
updateLangue() {
|
|
this.setState({lang: "change"})
|
|
this.forceUpdate()
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
onMenuNavigationEvent(menuOption) {
|
|
/* Navigation.mergeOptions(this.props.componentId,{
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
}
|
|
}
|
|
})
|
|
switch (menuOption){
|
|
case "home":{
|
|
this.setState({currentId:0})
|
|
}
|
|
break;
|
|
case "userInfo":{
|
|
this.setState({currentId:1})
|
|
}
|
|
}*/
|
|
}
|
|
|
|
onUserConnect() {
|
|
readUser().then((user) => {
|
|
if (user !== null && user !== undefined) {
|
|
this.updateUser(user);
|
|
}
|
|
});
|
|
}
|
|
|
|
onNavigatorEvent(event) {
|
|
|
|
}
|
|
|
|
hideSideMenu() {
|
|
/* Navigation.mergeOptions("drawer", {
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
enabled:false
|
|
}
|
|
}
|
|
});*/
|
|
}
|
|
|
|
initState() {
|
|
return {
|
|
user: null,
|
|
menu: [],
|
|
currentId: 0,
|
|
}
|
|
}
|
|
|
|
getGeolocatedUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
|
|
, {title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false}
|
|
, {title: I18n.t('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', active: false}
|
|
, {title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false}
|
|
, {title: I18n.t('ADD_NETWORK'), id: 11, key: 11, icon: 'md-people', active: false}
|
|
, {title: I18n.t('CHANGE_INFORMATION'), id: 13, key: 13, icon: 'md-person', active: false}
|
|
, {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
|
|
, {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
|
|
}
|
|
|
|
getSuperUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
|
|
, {title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false}
|
|
, {title: I18n.t('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', active: false}
|
|
, {title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false}
|
|
, {title: I18n.t('GROUP_MANAGE'), id: 5, key: 5, icon: 'md-people', active: false}
|
|
, {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
|
|
, {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
|
|
}
|
|
|
|
getHyperUsermenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
|
|
, {title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false}
|
|
, {title: I18n.t('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', active: false}
|
|
, {title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false}
|
|
, {title: I18n.t('GROUP_MANAGE'), id: 5, key: 5, icon: 'md-people', active: false}
|
|
, {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
|
|
, {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
|
|
}
|
|
|
|
updateUser(user) {
|
|
let menu = [];
|
|
if (user !== undefined) {
|
|
console.log("USER", user.category);
|
|
/* Navigation.mergeOptions("drawer", {
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
enabled:true
|
|
}
|
|
}
|
|
});*/
|
|
if (user.category !== undefined) {
|
|
switch (user.category) {
|
|
case "geolocated":
|
|
menu = this.getGeolocatedUserMenu();
|
|
break;
|
|
case "super":
|
|
menu = this.getSuperUserMenu();
|
|
break;
|
|
case "hyper":
|
|
menu = this.getHyperUsermenu();
|
|
break;
|
|
}
|
|
} else {
|
|
menu = this.getUserMenu();
|
|
}
|
|
}
|
|
|
|
|
|
this.setState({user: user, menu: menu});
|
|
}
|
|
|
|
getUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true}
|
|
, {title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false}
|
|
, {title: I18n.t('WALLET'), id: 6, key: 6, icon: 'md-wallet-outline', active: false}
|
|
, {title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false}
|
|
, {title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false}]
|
|
}
|
|
|
|
redirectToScreen = (item) => {
|
|
console.log("Item Menu Click", item);
|
|
|
|
if (this.state.user === null)
|
|
return;
|
|
else {
|
|
switch (this.state.user.category) {
|
|
case "super":
|
|
if (item === "walletSelect")
|
|
item = "walletDetail";
|
|
this.props.navigation.navigate(item, {agentId: this.state.user.agentId});
|
|
|
|
break;
|
|
case "hyper":
|
|
if (item === "walletSelect")
|
|
item = "walletDetail";
|
|
this.props.navigation.navigate(item, {agentId: this.state.user.agentId});
|
|
|
|
break;
|
|
case "geolocated":
|
|
this.props.navigation.navigate(item);
|
|
break;
|
|
|
|
default:
|
|
if (item === "walletSelect")
|
|
item = "walletDetailUser";
|
|
this.props.navigation.navigate(item, {userId: this.state.user.id});
|
|
|
|
break;
|
|
}
|
|
}
|
|
|
|
}
|
|
_renderItem = (item) => {
|
|
if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDetailUser'
|
|
|| item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification' || item === 'walletOptionSelect' || item === 'validateIdentification'
|
|
|| item === 'createIdentificationUser' || item === 'operateurOptionSelect' || item === 'paiementFacture' || item === 'envoieWalletToWalletUser'
|
|
|| item === 'envoieWalletToCashUser' || item === 'linkCard' || item === 'envoieWalletToCardUser' || item === 'envoieWalletToBankUser' || item === 'retraitWalletVersCashUser'
|
|
|| item === 'retraitCarteVersWalletUser' || item === 'retraitEnCashAgent' || item === 'retraitCarteVersCashAgent' || item === 'envoieCashVersWalletAgent'
|
|
|| item === 'envoieCashVersAutreWalletAgent' || item === 'retraitCarteVersCashUser' || item === 'envoiCashVersCashAgent' || item === 'envoieCashVersCashAgent'
|
|
|| item === 'envoieCashVersCarteAgent' || item === 'modifyIdentificationUser' || item === 'createGroupNanoCredit' || item === 'groupNanoCredit' || item === 'demandeValidationGroupe'
|
|
|| item === 'adhererGroupNanoCredit' || item === 'myNanoCreditGroup' || item === 'askNanoCredit' || item === 'refundNanoCreditUser' || item === 'cautionNanoCreditAgent'
|
|
|| item === 'epargnerArgentUser' || item === 'askNanoCredit' || item === 'casserEpargneUser' || item === 'envoieWalletToBankAgent' || item === 'reattachAccountUser'
|
|
|| item === 'acceptPrestationAgent' || item === 'souscrireAssuranceUser' || item === 'askPrestationUser') {
|
|
return null
|
|
} else {
|
|
const color = this.state.currentId === item.id ? theme.accent : "grey"
|
|
//console.log("ITEM OPTION MENU", item);
|
|
return (
|
|
<TouchableOpacity onPress={() => {
|
|
this.props.navigation.toggleDrawer();
|
|
this.setState({currentId: item.id});
|
|
this.redirectToScreen(item);
|
|
}}
|
|
>
|
|
<View
|
|
style={items.content}
|
|
>
|
|
<Icon
|
|
name={this.getIcon(item)}
|
|
size={32}
|
|
/>
|
|
<Text style={{
|
|
marginLeft: 20,
|
|
fontSize: 16,
|
|
}}>{this.getNameItems(item)}
|
|
</Text>
|
|
</View></TouchableOpacity>)
|
|
}
|
|
};
|
|
_onPress = ((item) => {
|
|
|
|
this.setState({currentId: item.id})
|
|
let current = this.state.menu.filter((item) => {
|
|
return item.active
|
|
})[0]
|
|
current.active = false;
|
|
item.active = true;
|
|
let newMenu = [];
|
|
this.state.menu.forEach(function (it) {
|
|
if (it.id === current.id) newMenu.push(current)
|
|
else if (it.id === item.id) newMenu.push(item)
|
|
else newMenu.push(it)
|
|
}
|
|
)
|
|
this.setState({menu: newMenu})
|
|
/* switch(item.id){
|
|
case 2:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name: histo,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text: I18n.t('CREDIT_MANAGE')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 0:
|
|
Navigation.popToRoot(route.stackRoot)
|
|
IlinkEmitter.emit("menuLink","home");
|
|
break;
|
|
case 1:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:useraccount,
|
|
},
|
|
options: {
|
|
sideMenu:{
|
|
visibility:false
|
|
},
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('MY_ACCOUNT')
|
|
},
|
|
hideOnScroll: true,
|
|
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","userInfo");
|
|
break;
|
|
case 3:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:notification,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('NOTIFICATION')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","notification");
|
|
|
|
break;
|
|
case 4:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:configurations,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('CONFIGURATIONS')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","config");
|
|
break;
|
|
case 5:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.superviseurgroup,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('GROUP_MANAGE')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","manage_group");
|
|
|
|
break;
|
|
case 7: Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.credrequester,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 11:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.addNetwork,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 12:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.generateNetwork,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 13:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.updateinfo,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
};
|
|
Navigation.mergeOptions(this.props.componentId,{
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
}
|
|
}
|
|
})
|
|
*/
|
|
});
|
|
|
|
getNameItems(item) {
|
|
|
|
let icon = item
|
|
switch (item) {
|
|
case "home":
|
|
icon = I18n.t('MAP')
|
|
break
|
|
case 'useraccount':
|
|
icon = I18n.t('MY_ACCOUNT')
|
|
break
|
|
case 'walletSelect':
|
|
icon = I18n.t('WALLET')
|
|
break
|
|
case 'Historique':
|
|
icon = I18n.t('CREDIT_MANAGE')
|
|
break
|
|
case "superviseurgroup":
|
|
icon = I18n.t('GROUP_MANAGE')
|
|
break
|
|
case "updateinformation":
|
|
icon = I18n.t("CHANGE_INFORMATION")
|
|
break
|
|
case 'notificationview':
|
|
icon = I18n.t('NOTIFICATIONS')
|
|
break
|
|
case 'configuration':
|
|
icon = I18n.t('CONFIGURATIONS')
|
|
break;
|
|
case 'addNetwork':
|
|
icon = I18n.t('ADD_NETWORK')
|
|
break
|
|
case 'about':
|
|
icon = I18n.t('ABOUT')
|
|
}
|
|
return icon;
|
|
}
|
|
|
|
getIcon(item) {
|
|
let icon = "md-map"
|
|
switch (item) {
|
|
case "home":
|
|
icon = "md-map"
|
|
break
|
|
case 'useraccount':
|
|
icon = "md-person"
|
|
break
|
|
case 'walletSelect':
|
|
icon = "md-wallet"
|
|
break
|
|
case 'Historique':
|
|
icon = "md-card"
|
|
break
|
|
case "superviseurgroup":
|
|
icon = "md-people"
|
|
break
|
|
case 'notificationview':
|
|
icon = "md-notifications";
|
|
break
|
|
case "updateinformation":
|
|
icon = "md-people"
|
|
break
|
|
case 'configuration':
|
|
icon = 'md-settings'
|
|
break;
|
|
case 'addNetwork':
|
|
icon = "md-people"
|
|
break
|
|
case 'about':
|
|
icon = 'md-contacts';
|
|
break;
|
|
}
|
|
return icon;
|
|
}
|
|
|
|
render() {
|
|
var name = this.state.user ? this.state.user.firstname : "";
|
|
const surname = this.state.user ? this.state.user.lastname : "";
|
|
if (!this.state.lang && this.state.lang !== "change")
|
|
return (
|
|
<View style={styles.container}>
|
|
<View
|
|
style={styles.headercontent}
|
|
>
|
|
<Text style={styles.headerTitle}>{name}</Text>
|
|
<Text style={styles.headerTitle}>{surname}</Text>
|
|
<Text style={styles.headerPhone}>{this.state.user ? "" + this.state.user.phone : ""}</Text>
|
|
</View>
|
|
<ScrollView style={{
|
|
flex: 1, height: responsiveHeight(40)
|
|
}}>
|
|
<SafeAreaView forceInset={{top: 'always', horizontal: 'never'}}>
|
|
{
|
|
this.state.items && Object.keys(this.state.items).map((item, key) => {
|
|
return this._renderItem(item)
|
|
})
|
|
}
|
|
</SafeAreaView>
|
|
</ScrollView>
|
|
<Button
|
|
textStyle={styles.btntext}
|
|
style={styles.btnDeconnect}
|
|
onPress={() => this.userDeconnect()}
|
|
>{I18n.t('DISCONNEXION')}</Button>
|
|
</View>
|
|
)
|
|
else {
|
|
setTimeout(() => this.setState({lang: ""}), 500)
|
|
return (<View/>)
|
|
}
|
|
}
|
|
|
|
userDeconnect() {
|
|
Alert.alert(
|
|
I18n.t('DISCONNEXION'),
|
|
I18n.t('DISCONNEXION_TEXT'),
|
|
[
|
|
{},
|
|
{text: I18n.t('NO'), onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
|
|
{
|
|
text: I18n.t('YES'), onPress: () => {
|
|
disconnect().then(() => {
|
|
IlinkEmitter.emit("userdisconnect");
|
|
AsyncStorage.removeItem('@config:onesignalIds');
|
|
this.props.navigation.navigate("Auth");
|
|
})
|
|
}
|
|
},
|
|
],
|
|
{cancelable: false}
|
|
)
|
|
}
|
|
|
|
watchUser() {
|
|
readUser().then((user) => {
|
|
if (user !== null && user !== undefined) {
|
|
if (user.id !== this.state.user.id) {
|
|
this.updateUser(user);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
const items = StyleSheet.create({
|
|
content: {
|
|
width: responsiveWidth(100),
|
|
height: 50,
|
|
paddingLeft: 20,
|
|
flexDirection: 'row',
|
|
alignItems: 'center'
|
|
},
|
|
itemText: {
|
|
color: '#000000',
|
|
marginLeft: 20,
|
|
fontSize: responsiveFontSize(2),
|
|
}
|
|
});
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "white",
|
|
},
|
|
btnDeconnect: {
|
|
borderColor: "transparent",
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
backgroundColor: theme.accent
|
|
},
|
|
btntext: {
|
|
color: "white",
|
|
fontSize: 17,
|
|
fontWeight: "bold"
|
|
},
|
|
headerTitle: {
|
|
fontSize: 14,
|
|
marginBottom: 5,
|
|
color: "white",
|
|
fontWeight: 'bold',
|
|
},
|
|
headerPhone: {
|
|
fontSize: 12,
|
|
marginBottom: 20,
|
|
color: "white",
|
|
justifyContent: 'flex-end'
|
|
|
|
},
|
|
listMenu: {
|
|
paddingTop: 15,
|
|
},
|
|
headercontent: {
|
|
height: responsiveHeight(30),
|
|
backgroundColor: primary,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'flex-start',
|
|
paddingLeft: 20
|
|
|
|
},
|
|
backgroundd_drawer: {
|
|
backgroundColor: '#000',
|
|
},
|
|
listbackground: {},
|
|
actionButtonIcon: {
|
|
fontSize: 20,
|
|
height: 22,
|
|
color: 'white',
|
|
},
|
|
welcome: {
|
|
fontSize: 20,
|
|
textAlign: 'center',
|
|
margin: 10,
|
|
},
|
|
instructions: {
|
|
textAlign: 'center',
|
|
color: '#333333',
|
|
marginBottom: 5,
|
|
},
|
|
});
|