ilink-world/app/screens/optionMenu/OptionsMenu.js

904 lines
23 KiB
JavaScript
Executable File

/* eslint-disable no-unused-vars */
/* eslint-disable no-shadow */
/* eslint-disable react-native/no-inline-styles */
/**
* 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 === 'insuranceSubscriptionScreen' ||
item === 'addBeneficiaryScreen' ||
item === 'activateBuySubscriptionScreen' ||
item === 'saisirFeuilleSoinScreen' ||
item === 'validateConsultationScreen' ||
item === 'validateConsultationDetailScreen' ||
item === 'executerPrescriptionScreen' ||
item === 'modifierFeuilleSoinScreen' ||
item === 'modifierExecutionPrescriptionScreen' ||
item === 'historiqueNanoSanteUserScreen' ||
item === 'demandeAutorisationSoinScreen' ||
item === 'deleteBeneficiaryScreen' ||
item === 'StopSubscriptionScreen' ||
item === 'stopSubscriptionScreen' ||
item === 'renewAssuranceScreen' ||
item === 'webviewScreen' ||
item === 'historiqueNanoSanteAgentScreen' ||
item === 'historiqueNanoSanteSuperHyperScreen' ||
item === 'PDFViewerScreen' ||
item === 'ubaFormScreen'
) {
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');
break;
}
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;
case 'ubaFormScreen':
icon = 'md-person-add';
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,
},
});