adminnistrateur
/
ilink-world
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wallet user and agent update

This commit is contained in:
Brice Zele 2020-05-30 22:58:22 +01:00
parent 9d935108f4
commit 21f51c7cf5
18 changed files with 2351 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
App.js
View File

@ -47,6 +47,8 @@ import { store, persistor } from './redux/store';
import { Provider } from 'react-redux';
import WalletDepot from './screens/wallet/WalletDepot';
import WalletRetrait from './screens/wallet/WalletRetrait';
import CreateIdentification from './screens/identification/createIdentification';
import WalletDetailUser from './screens/wallet/WalletDetailUser';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@ -80,9 +82,11 @@ const AppStack = createDrawerNavigator({
navigationOptions: {
},
},
walletSelect: WalletSelect,
notificationview: Notifications,
configuration: Configurations,
about: About
about: About,
walletDetailUser: WalletDetailUser
})
}, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })
@ -92,6 +96,7 @@ const AppAgentStack = createDrawerNavigator({
home: Home,
useraccount: UserAccount,
walletSelect: WalletSelect,
createIdentification: CreateIdentification,
Historique:
{
screen: createBottomTabNavigator({ myDemand: MyHistory }, {

1281
android/app/src/main/assets/index.android.bundle
View File

File diff suppressed because one or more lines are too long

19
android/app/src/main/res/raw/utils_i18n_en.json
View File

@ -54,6 +54,9 @@
"CARD_NUMBER_ERROR": "Card number incorrect",
"AMOUNT_LABEL": "Amount",
"WITHDRAWAL": "Withdrawal",
"NANO_CREDIT": "Nano credit",
"NANO_SANTE": "Nano health",
"PAIEMENT_FACTURE": "Bill payment",
"DEMAND_SEND": "Demand send",
"WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
"COMMISSION_ACCOUNT_TITLE": "Commission account",
@ -63,6 +66,7 @@
"CONFIRM_TRANSFER_COMMISSION": "Confirm commission transfer",
"CREATION_DATE": "Creation date",
"PRINCIPAL_ACCOUNT_TITLE": "Principal account",
"NUMERO_COMPTE": "Account number",
"NO_WALLET_ACTIVED": "No wallet is activated for your account",
"TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
"PRINCIPAL": "Principal",
@ -94,6 +98,7 @@
"GROUP_MEMBERS": "The group members",
"NAME": "Last name(s)",
"FIRSTNAME": "First name(s) ",
"AND": "and",
"ADMIN": "Administrator",
"SUPER_ADMIN": "Super administrator",
"GEOLOCATED": "Geo located agent",
@ -113,6 +118,13 @@
"PHONE_NUMBER": "Phone",
"CHOICE_NETWORK": "Choose a network",
"COUNTRY_CHOICE": "Choose a country",
"CHOICE_TOWN": "Choose a town",
"PIECE_IDENTITE": "Identity piece",
"IDENTITY_CARD": "Identity card",
"PASSEPORT": "Passeport",
"OTHER_IDENTITY_PIECE": "Other",
"IDENTITY_NUMBER": "N° of piece",
"IDENTITY_PIECE_EXPIRY_DATE": "Expiry date",
"LAST_STEP": "Last step",
"ACTIVE_ACCOUNT": "Activate the account !",
"ACTIVE_USER": "Active",
@ -255,6 +267,13 @@
"FREE": "Available",
"SAVED": "Registered",
"ACCOUNT_INFO": "My Account Information",
"IDENTIFICATION": " Identification",
"CREATION_IDENTIFICATION": "Creation",
"CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
"VALIDATE_IDENTIFICATION": "Validation",
"VALIDATE_IDENTIFICATION_DESCRIPTION": "Validate an identi...",
"CREATE_IDENTIFICATION_TITLE": "Please fill in customer information",
"DATE_NAISSANCE": "Date of birth",
"REGISTER_YOURSELF": "Register",
"REGISTRATION": "Registration",
"CHANGE_LANG_LABEL": "Change language",

20
android/app/src/main/res/raw/utils_i18n_fr.json
View File

@ -58,11 +58,15 @@
"PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
"DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
"WITHDRAWAL": "Retrait",
"NANO_CREDIT": "Nano crédit",
"NANO_SANTE": "Nano santé",
"PAIEMENT_FACTURE": "Paiement de facture",
"WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
"COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
"CONFIRM": "Confirmer",
"CONFIRM_TRANSFER_COMMISSION": "Confirmer le transfert des commissions",
"PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
"NUMERO_COMPTE": "N° de compte",
"COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal",
"COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
"TRANSACTIONS": "Transactions",
@ -97,6 +101,7 @@
"GROUP_MEMBERS": "Les membres du groupe",
"NAME": "Nom (s)",
"FIRSTNAME": "Prénom (s) ",
"AND": "et",
"ADMIN": "Administrateur",
"SUPER_ADMIN": "Super administrateur",
"GEOLOCATED": "Agent géo-localisé",
@ -117,6 +122,13 @@
"PHONE_NUMBER": "Numéro de téléphone",
"CHOICE_NETWORK": "Choisissez un réseau",
"COUNTRY_CHOICE": "Choisissez un pays",
"CHOICE_TOWN": "Choisissez une ville",
"PIECE_IDENTITE": "Pièce d'identité",
"IDENTITY_CARD": "Carte d'identité",
"PASSEPORT": "Passeport",
"OTHER_IDENTITY_PIECE": "Autre",
"IDENTITY_NUMBER": "N° de la pièce",
"IDENTITY_PIECE_EXPIRY_DATE": "Date d'expiration",
"LAST_STEP": "Derniere étape",
"ACTIVE_ACCOUNT": "Activez le compte !",
"ACTIVE_USER": "Activer",
@ -257,6 +269,14 @@
"FREE": "disponibles",
"SAVED": "enregistrés",
"ACCOUNT_INFO": " Information sur mon compte",
"IDENTIFICATION": " Identification",
"CREATION_IDENTIFICATION": "Création",
"CREATION_IDENTIFICATION_CLIENT": "M'identifier",
"CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
"VALIDATE_IDENTIFICATION": "Validation",
"VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
"CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
"DATE_NAISSANCE": "Date de naissance",
"REGISTER_YOURSELF": "Enregistrez-vous",
"REGISTRATION": "Inscription",
"CHANGE_LANG_LABEL": "Changer la langue",

55
screens/account/UserAccount.js
View File

@ -1,17 +1,21 @@
import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, StatusBar, ScrollView, ProgressBarAndroid, Alert } from 'react-native';
import { StyleSheet, View, Text, Image, StatusBar, TouchableOpacity, ScrollView, ProgressBarAndroid, Alert } from 'react-native';
let theme = require('./../../utils/theme.json');
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { readUser, deleteUser } from './../../webservice/AuthApi';
import { getAgentNetworksList } from './../../webservice/NetworkApi'
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import MapView, { Marker } from 'react-native-maps';
import Icon from 'react-native-vector-icons/MaterialIcons'
import Button from 'apsl-react-native-button'
import * as Utils from '../../utils/DeviceUtils';
import Button from 'apsl-react-native-button';
import { Typography, FontWeight } from '../../config/typography';
import CardView from "react-native-cardview";
import I18n from 'react-native-i18n'
import { Header } from 'react-native-elements'
import { IlinkEmitter } from "../../utils/events";
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
import { Color } from '../../config/Color';
let route = require('../../route.json');
require('./../../utils/Translations')
const height = responsiveHeight(100) - 250;
@ -101,7 +105,6 @@ export default class UserAccount extends Component {
this.setState({ user: user });
}
initState() {
return {
user: {},
@ -371,7 +374,49 @@ const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#EEEEEE',
},
contain: {
flexDirection: 'row',
justifyContent: 'space-between',
},
identificationOptionMenuContainer: {
flexDirection: 'row',
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
},
containerTouch: {
flex: 1,
flexDirection: 'row',
marginRight: 2.5,
alignItems: 'center',
shadowColor: Color.borderColor,
borderColor: Color.borderColor,
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(60),
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 5,
},
textInformation: {
fontSize: 16,

96
screens/home/Home.js
View File

@ -105,9 +105,7 @@ class Home extends BaseScreen {
this.setState({ isNeedLoadMore: false, isLoadingMap: true })
const camera = await this.mapRef.getCamera()
const zoom = camera.zoom - 10
let res = []
this.setState({ isLoadingMap: true });
let res = [];
if (this.state.filternetworkTemp !== undefined) {
let net = this.state.filternetworkTemp.id
@ -117,6 +115,8 @@ class Home extends BaseScreen {
}
if (res.length > 0) {
this.setState({ isLoadingMap: false })
let reseau = res[0];
const pos = { longitude: user.longitude, latitude: user.latitude }
try {
@ -1514,7 +1514,7 @@ class Home extends BaseScreen {
const user = usr === null ? this.state.user : usr
let { myNetwork } = this.state;
this.setState({ filternetwork: myNetwork, page: 0, filternetworkTemp: myNetwork, loadingDialog: true })
this.setState({ filternetwork: myNetwork, page: 0, increasePas: 0, filternetworkTemp: myNetwork, loadingDialog: true })
return new Promise(() => {
if (myNetwork !== undefined) {
this.loadingMarkers(this.state.myPosition, myNetwork, this.state.value).then((data) => {
@ -2021,16 +2021,16 @@ class Home extends BaseScreen {
return geolib.getDistance(myPosition, location) <= (value * 1000)
&& mark.network === filternetwork.name
})
this.setState({ currentNetworkSize: currentNetwork.length, currentNetworkMarkers: currentNetwork })
this.setState({ currentNetworkSize: currentNetwork.length, showProgress: false, currentNetworkMarkers: currentNetwork })
} catch (e) {
console.debug("after " + e.message)
}
/* if (this.state.user.category !== 'geolocated' && this.state.user.category !== 'super'
&& this.state.user.category !== 'hyper') {
if (data.length === 0) {
this.loadMoreIfHasNoPoint();
}
} */
if (this.state.user.category !== 'geolocated' && this.state.user.category !== 'super'
&& this.state.user.category !== 'hyper') {
if (data.length === 0) {
this.loadMoreIfHasNoPoint();
}
}
console.debug("data:", data, "value" + value * 1000)
resolve(data)
})
@ -2038,37 +2038,38 @@ class Home extends BaseScreen {
loadMoreIfHasNoPoint = () => {
Alert.alert(
I18n.t("NO_NETWORK_MARKER"),
`${I18n.t('LAUNCH_POINT_WITH_FILTER')} ${this.filterOptions[this.state.increasePas + 1].label} ?`,
[
{ text: I18n.t("NO"), onPress: () => { } },
{
text: I18n.t("YES"), onPress: () => {
if (this.state.increasePas === this.filterOptions.length - 1) {
this.setState({ snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_MARKER') })
setTimeout(() => {
this.setState({ snack_visible: false })
}, 5000)
}
else {
this.setState({ increasePas: this.state.increasePas + 1, isLoadingMap: true });
this.onLoadMore();
/* Alert.alert(
'INFORMATIONS',
'' + this.state.increasePas
,
[
{ text: I18n.t("NO"), onPress: () => { } },
{
text: I18n.t("YES"), onPress: () => { }
}
],
{ cancelable: false }
); */
if (this.state.increasePas === this.filterOptions.length - 1) {
this.setState({ increasePas: 0, snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_MARKER'), isLoadingMap: false })
setTimeout(() => {
this.setState({ snack_visible: false })
}, 5000);
}
else {
if (this.state.increasePas + 1 !== this.filterOptions.length) {
this.setState({ increasePas: this.state.increasePas + 1, isLoadingMap: true }, () => {
this.onLoadMore();
});
}
}
}
}
],
{ cancelable: false }
)
}
treatNewData(pos, data, isFilter = false) {
this.setState({ isLoadingMap: false });
/*
this.setState({ isLoadingMap: false }); */
let items = data;
if (data.length > 0) {
@ -2082,25 +2083,16 @@ class Home extends BaseScreen {
if (items.length < this.state.currentNetworkSize) {
this.setState({ isNeedLoadMore: true })
} else {
/* if (isFilter && items.length <= 0) {
this.loadMoreIfHasNoPoint();
} */
if (isFilter && items.length <= 0) {
this.setState({ increasePas: 0, showProgress: false }, () => {
this.loadMoreIfHasNoPoint();
});
}
this.setState({ isNeedLoadMore: false })
}
} else if (isFilter) {
this.setState({ markers: data });
this.setState({
snack_visible: true, snack_text_message: I18n.t('NO_NETWORK_CORRESPONDING')
})
setTimeout(() => {
this.setState({ snack_visible: false })
}, 5000)
} else {
this.setState({ markers: data });
this.setState({ showProgress: false, markers: data });
}
}

445
screens/identification/createIdentification.js Normal file
View File

@ -0,0 +1,445 @@
import React, { Component } from 'react';
import { Alert, StyleSheet, Text, View, Image, ScrollView, Platform, ProgressBarAndroid, PermissionsAndroid, Keyboard } from 'react-native';
import PropTypes from 'prop-types';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
import { Fumi, Kaede } from 'react-native-textinput-effects'
import * as Animatable from 'react-native-animatable';
import Button from 'apsl-react-native-button';
let theme = require('./../../utils/theme.json');
let route = require('./../../route.json');
import I18n from 'react-native-i18n';
import isEqual from 'lodash/isEqual';
import { Color } from '../../config/Color';
import DateTimePicker from '@react-native-community/datetimepicker';
import { Dropdown } from 'react-native-material-dropdown';
import { getPositionInformation } from './../../webservice/MapService';
import { getCountryNetwork, createGeolocatedAccount, createUserAccount, getTownInformationName, getListCountriesActive, getCodeInformation, readUser } from './../../webservice/AuthApi';
import { SinglePickerMaterialDialog, MultiPickerMaterialDialog, MaterialDialog } from "react-native-material-dialog";
import Geolocation from 'react-native-geolocation-service';
import { identityPieces } from '../../utils/UtilsFunction';
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, useSignificantChanges: true };
const moment = require('moment');
export default class CreateIdentification extends Component {
static navigatorStyle = {
navBarBackgroundColor: Color.primaryColor,
statusBarColor: Color.primaryDarkColor,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF'
};
static navigationOptions = () => {
return {
drawerLabel: () => null,
headerTitle: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION'),
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 0,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
title: I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')
}
};
constructor(props) {
super(props);
this.state = {
password: null,
enterPhone: null,
nameanim: null,
dateNaissance: new Date(),
networksinglePickerVisible: false,
passwordanim: null,
confirmpassanim: null,
isLoging: false,
countries: [],
town: [],
identityPieces: identityPieces(),
identityPiecesName: (identityPieces()[0]).name,
snackVisible: false,
snackText: '',
disableNetwork: false,
networks: [],
showPickerDateNaissance: false,
modalVisible: true,
select_network: I18n.t("SELECT_NETWORK"),
user: null
};
this.dateNaissanceRef = null;
this.surnameanim = null;
this.dateNaissanceFumiProps = {};
}
componentDidMount() {
readUser().then((user) => {
if (user) {
if (user !== undefined) {
this.setState({ user });
}
}
});
if (Platform.OS === 'android') {
this.requestCameraPermission();
} else {
this.watchLocation();
}
}
componentWillUpdate(nextProps, nextState) {
if (this.state.showPickerDateNaissance)
this.dateNaissanceFumiProps.value = moment(nextState.dateNaissance).format('DD-MM-YYYY');
}
componentWillUnmount() {
this.mounted = false;
if (this.watchID) Geolocation.clearWatch(this.watchID);
}
showErrorDialog() {
this.setState({ modalDialog: false })
Aler.alert("Une erreur est survenue", "Impossible de récuperer des informations du pays verifier que votre gps est activé," +
"et que vous êtes connecté à internet puis ressayer", [{
text: "Recommencer", onPress: () => {
this.watchLocation()
}
}, { text: "Annuler", onPress: () => { this.props.navigation.popToTop() } }])
}
async watchLocation() {
Geolocation.getCurrentPosition((position) => {
this.treatPosition(position)
}, (e) => {
this.showErrorDialog()
}, this.props.geolocationOptions);
if (!this.watchID) {
Geolocation.watchPosition((position) => { this.treatPosition(position) }, (e) => { this.showErrorDialog() }, this.props.geolocationOptions)
}
}
async requestCameraPermission() {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
{
'title': 'Cool Photo App Camera Permission',
'message': 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
}
)
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
this.watchLocation();
} else {
this.setState({ modalDialog: false })
Alert.alert("Echec à l'autorisation",
"L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
[{
text: "Ok", onPress: () => {
this.props.navigation.popToTop()
}
}])
}
} catch (err) {
this.setState({ modalDialog: false })
Alert.alert("Une erreur est Survenue",
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
[{
text: "Ok", onPress: () => {
BackHandler.exitApp()
}
}])
}
}
treatPosition(position) {
const myLastPosition = this.state.myPosition;
const myPosition = position.coords;
if (!isEqual(myPosition, myLastPosition)) {
getPositionInformation(myPosition).then((response) => {
if (response.results !== undefined) {
if (response.results.length > 0) {
let most = response.results[0]
let { address_components, formatted_address, place_id } = most
this.setState({ address: address_components, textadress: formatted_address, place: place_id })
let results = response.results;
let shortcountry;
let mcountry;
for (let i = 0; i < results[0].address_components.length; i++) {
for (let j = 0; j < results[0].address_components[i].types.length; j++) {
if (results[0].address_components[i].types[j] === "country") {
mcountry = results[0].address_components[i];
shortcountry = mcountry.short_name;
this.setState({ shortCountry: mcountry.short_name, longCountry: mcountry.long_name })
} else if (results[0].address_components[i].types[j] === "locality") {
const name = results[0].address_components[i].short_name;
this.setState({ townName: name });
getTownInformationName(name).then((result) => {
let town = null;
if (result instanceof Array) {
town = result[0];
} else
town = result;
this.setState({ modalVisible: false, town: new Array(town) });
})
}
}
}
getListCountriesActive().then((cnt) => {
this.setState({ countries: cnt })
console.debug(cnt, shortcountry);
var found = false
for (let i of cnt) {
if (i.code_country === shortcountry) {
found = true;
this.setState({ modalVisible: false, indicatif: i.code_dial, country: i.name })
/* this.getNetworks(i.code_dial); */
}
}
if (!found) {
Alert.alert("Impossible de recupérer vos informations", "Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs", [{ text: "OK" }]);
}
})
}
}
}).catch((e) => {
this.showErrorDialog()
});
this.setState({ myPosition: myPosition });
/* if (this.mapRef !== undefined && this.mapRef !== null) {
this.mapRef.animateToCoordinate({
latitude: myPosition.latitude,
longitude: myPosition.longitude
}, 1000);
this.mapRef.animateToRegion({
latitude: myPosition.latitude,
longitude: myPosition.longitude,
latitudeDelta: 0.03,
longitudeDelta: 0.01,
}, 1000)
} */
}
}
onChange = (event, selectedDate) => {
const currentDate = selectedDate || this.state.dateNaissance;
this.setState({
showPickerDateNaissance: Platform.OS === 'ios' || false,
dateNaissance: currentDate,
});
};
renderLoaderModal() {
return (<MaterialDialog
visible={this.state.modalVisible}
title={I18n.t("LOADING_INFO")}
>
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
<ProgressBarAndroid />
</View>
</MaterialDialog>)
}
renderDateNaissancePicker = () => {
return (
<DateTimePicker
testID="dateTimePicker"
timeZoneOffsetInMinutes={0}
is24Hour={true}
value={this.state.dateNaissance}
mode='date'
maximumDate={new Date()}
display="calendar"
onChange={this.onChange}
/>
);
}
render() {
console.log("STATE", this.state);
const { showPickerDateNaissance } = this.state;
return (
<>
{this.state.showPickerDateNaissance && this.renderDateNaissancePicker()}
{this.state.modalVisible && this.renderLoaderModal()}
<ScrollView style={styles.container}>
<Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
<Animatable.View ref={(comp) => { this.nameanim = comp }}>
<Fumi ref={(ref) => { this.dateNaissance = ref }}
iconClass={FontAwesomeIcon} iconName={'user'}
label={`${I18n.t('NAME')} ${I18n.t('AND')} ${I18n.t('FIRSTNAME')}`}
iconColor={'#f95a25'}
iconSize={20}
onChangeText={(text) => {
let use = this.state.user;
use.lastname = text;
this.setState({ user: use })
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
<Animatable.View ref={(comp) => { this.surnameanim = comp }}>
<Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
label={I18n.t('DATE_NAISSANCE')}
iconColor={'#f95a25'}
iconSize={20}
style={styles.input}
onFocus={() => {
Keyboard.dismiss();
this.setState({ showPickerDateNaissance: true })
}}
{...this.dateNaissanceFumiProps}>
</Fumi>
</Animatable.View>
<View
style={{
width: responsiveWidth(90),
height: 60,
marginTop: 20,
alignSelf: 'center',
borderRadius: 10,
paddingLeft: 20,
paddingRight: 20,
backgroundColor: 'white'
}}>
<Dropdown
label={I18n.t('COUNTRY_CHOICE')}
data={this.state.countries}
useNativeDriver={true}
value={this.state.country === null ? "" :
this.state.country}
onChangeText={(value, index, data) => {
this.setState({ country: value });
}}
valueExtractor={(value) => { return value.name }}
labelExtractor={(value) => { return value.name }}
/>
</View>
<View
style={{
width: responsiveWidth(90),
height: 60,
marginTop: 20,
alignSelf: 'center',
borderRadius: 10,
paddingLeft: 20,
paddingRight: 20,
backgroundColor: 'white'
}}>
<Dropdown
label={I18n.t('CHOICE_TOWN')}
data={this.state.town}
useNativeDriver={true}
value={this.state.townName === null ? "" :
this.state.townName}
onChangeText={(value, index, data) => {
this.setState({ townName: value });
}}
valueExtractor={(value) => { return value.name }}
labelExtractor={(value) => { return value.name }}
/>
</View>
<View
style={{
width: responsiveWidth(90),
height: 60,
marginTop: 20,
alignSelf: 'center',
borderRadius: 10,
paddingLeft: 20,
paddingRight: 20,
backgroundColor: 'white'
}}>
<Dropdown
label={I18n.t('PIECE_IDENTITE')}
data={this.state.identityPieces}
useNativeDriver={true}
value={this.state.identityPiecesName}
onChangeText={(value, index, data) => {
this.setState({ identityPiecesName: value });
}}
valueExtractor={(value) => { return value.name }}
labelExtractor={(value) => { return value.name }}
/>
</View>
<Animatable.View ref={(comp) => { this.surnameanim = comp }}>
<Fumi iconClass={FontAwesomeIcon} iconName={'calendar-times-o'}
label={I18n.t('IDENTITY_PIECE_EXPIRY_DATE')}
iconColor={'#f95a25'}
iconSize={20}
style={styles.input}
onFocus={() => {
Keyboard.dismiss();
this.setState({ showPickerDateNaissance: true })
}}
{...this.dateNaissanceFumiProps}>
</Fumi>
</Animatable.View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.state.isLoging}
onPress={() => { this.checkUserGeolocated() }}>
{I18n.t('NEXT')}</Button>
</ScrollView>
</>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.primaryDarkColor,
},
textbtnvalide: {
color: 'white',
fontWeight: 'bold'
},
bigtitle: {
color: 'white',
fontSize: 20,
flex: 1,
fontWeight: 'bold',
textAlign: 'center',
margin: 20,
},
subbigtitle: {
color: 'white',
fontSize: 17,
textAlign: 'center',
margin: 5,
},
btnvalide: {
marginTop: 20,
marginLeft: 20,
marginRight: 20,
borderColor: 'transparent',
backgroundColor: Color.accentLightColor,
height: 52
},
input: {
height: 60,
marginTop: responsiveHeight(2),
marginLeft: responsiveWidth(5),
marginRight: responsiveWidth(5),
borderRadius: 5,
}
});

0
screens/identification/validateIdentification.js Normal file
View File

2
screens/index.js
View File

@ -34,6 +34,7 @@ import WalletDetail from './wallet/WalletDetail';
import walletDepot from './wallet/WalletDepot';
import WalletRetrait from './wallet/WalletRetrait';
import WalletSelect from './wallet/WalletSelect';
import CreateIdentification from './identification/createIdentification';
let route = require('./../route.json')
export function registerScreens() {
@ -50,6 +51,7 @@ export function registerScreens() {
Navigation.registerComponent(route.configurations, () => Configurations);
Navigation.registerComponent(route.typeaccountcreate, () => TypeChoiser);
Navigation.registerComponent(route.simpleusercreate, () => CreateAccount);
Navigation.registerComponent(route.createIdentification, () => CreateIdentification);
Navigation.registerComponent(route.historyItemDetails, () => HistoryItemDetails);
Navigation.registerComponent(route.modalhistoryfilter, () => DateFilterHistoryDemand);
Navigation.registerComponent(route.superviseurgroup, () => SuperViseurGroupeHome);

4
screens/login/createAccount.js
View File

@ -44,8 +44,6 @@ export default class CreateAccount extends Component {
}
initState() {
return {
password: null,
@ -421,5 +419,5 @@ const styles = StyleSheet.create({
marginRight: responsiveWidth(5),
borderRadius: 5,
}
})
});

4
screens/login/createUserStep2.js
View File

@ -379,9 +379,7 @@ export default class CreateUserStep2 extends Component {
paddingLeft: 20,
paddingRight: 20,
backgroundColor: 'white'
}}
>
}}>
<Dropdown
label={I18n.t('COUNTRY_CHOICE')}
data={this.state.countries}

63
screens/optionMenu/OptionsMenu.js
View File

@ -28,14 +28,8 @@ import DeviceInfo from "react-native-device-info"
import AppContainer, { AppNavigator } from "../../App";
import Configuration from "../../webservice/persistences/Configuration";
import { ScrollView } from 'react-native-gesture-handler';
import { store } from "../../redux/store";
import axios from "axios";
import { logoutActionUrl } from '../../webservice/IlinkConstants';
import { bindActionCreators } from 'redux';
import getAuthApiKey from '../../webservice/AuthKeyApi';
import { connect } from 'react-redux';
class OptionsMenu extends Component {
export default class OptionsMenu extends Component {
static navigatorStyle = {
statusBarColor: primaryDarkAdvanced,
@ -54,22 +48,6 @@ class OptionsMenu extends Component {
this.setState({ user });
}
});
let prevStore = store.getState().authKeyReducer
store.subscribe(() => {
const { authKeyReducer } = store.getState();
console.log("authKeyReducer", authKeyReducer);
if (prevStore !== authKeyReducer) {
if (authKeyReducer.authKey !== null) {
this.setState({
authKey: `${authKeyReducer.authKey.token_type} ${authKeyReducer.authKey.access_token}`,
});
}
}
})
}
@ -109,10 +87,13 @@ class OptionsMenu extends Component {
return ""
}
componentDidMount() {
const items = this.props.navigation.router.childRouters.sta.childRouters;
this.setState({ items: items })
this.retrieveAndroidInformation()
}
updateLangue() {
this.setState({ lang: "change" })
@ -164,8 +145,6 @@ class OptionsMenu extends Component {
user: null,
menu: [],
currentId: 0,
auth: null,
authKey: null
}
}
getGeolocatedUserMenu() {
@ -221,7 +200,6 @@ class OptionsMenu extends Component {
case "hyper":
menu = this.getHyperUsermenu();
break;
}
} else {
menu = this.getUserMenu();
@ -235,6 +213,7 @@ class OptionsMenu extends Component {
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 }]
}
@ -257,16 +236,22 @@ class OptionsMenu extends Component {
this.props.navigation.navigate(item, { agentId: this.state.user.agentId });
break;
case "geolocated":
this.props.navigation.navigate(item);
break;
default:
this.props.navigation.navigate(item);
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 === 'walletDepot' || item === 'walletRetrait') {
if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'walletDetail' || item === 'walletDetailUser' || item === 'walletDepot' || item === 'walletRetrait' || item === 'createIdentification') {
return null
} else {
const color = this.state.currentId === item.id ? theme.accent : "grey"
@ -548,17 +533,6 @@ class OptionsMenu extends Component {
{ text: I18n.t('NO'), onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
{
text: I18n.t('YES'), onPress: () => {
axios({
url: logoutActionUrl,
method: 'POST',
headers: {
'Authorization': this.state.authKey
}
}).then((response) => {
console.log("DECONNECTE", response);
}).catch((error) => {
console.warn("DECONNECTE", error);
})
disconnect().then(() => {
IlinkEmitter.emit("userdisconnect");
this.props.navigation.navigate("Auth")
@ -580,17 +554,6 @@ class OptionsMenu extends Component {
}
}
const mapStateToProps = state => ({
loading: state.authKeyReducer.loading,
authKey: state.authKeyReducer.authKey,
error: state.authKeyReducer.error
});
const mapDispatchToProps = dispatch => bindActionCreators({
getAuthApiKey,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(OptionsMenu);
const items = StyleSheet.create({
content: {
width: responsiveWidth(100),

2
screens/optionMenu/qOptionsMenu.js
View File

@ -210,7 +210,7 @@ export default class OptionsMenu extends Component<Props> {
, { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]
}
_renderItem = (item) => {
if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks') {
if (item === "creditrequest" || item === 'historyItemDetails' || item === 'filter' || item === 'networks' || item === 'createIdentification') {
return null
} else {
const color = this.state.currentId === item.id ? theme.accent : "grey"

205
screens/wallet/WalletDetail.js
View File

@ -31,7 +31,7 @@ import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { thousandsSeparators } from '../../utils/UtilsFunction';
import { thousandsSeparators, isEmptyObject } from '../../utils/UtilsFunction';
import DeviceInfo from 'react-native-device-info'
let route = require('./../../route.json');
@ -191,17 +191,6 @@ class WalletDetail extends Component {
loading: false
})
} */
isEmptyObject = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
return false;
}
}
return JSON.stringify(obj) === JSON.stringify({});
}
getWalletIcon = (wallet) => {
return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
@ -478,7 +467,7 @@ class WalletDetail extends Component {
console.log("WALLET SEND", wallet);
return (
!this.isEmptyObject(wallet) ?
!isEmptyObject(wallet) ?
(<>
{this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
{/* {this.state.loading ?
@ -596,6 +585,196 @@ class WalletDetail extends Component {
</TouchableOpacity>
</View>
</View>
{wallet.network.toLowerCase().includes('ilink') &&
<>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='cash-multiple'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_CREDIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { }}
activeOpacity={0.9}>
<Icon name='heart-multiple'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_SANTE')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='file-document'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('PAIEMENT_FACTURE')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
{/* <TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='md-outline'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_CREDIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity> */}
</View>
</View>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('IDENTIFICATION')}
</Text>
</View>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='pencil-plus'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('CREATION_IDENTIFICATION')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('CREATION_IDENTIFICATION_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { }}
activeOpacity={0.9}>
<Icon name='check-circle'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('VALIDATE_IDENTIFICATION')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
</>
}
</>
)}

834
screens/wallet/WalletDetailUser.js Normal file
View File

@ -0,0 +1,834 @@
import React, { Component } from 'react';
import { Animated, Alert, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import * as Utils from '../../utils/DeviceUtils';
import Icons from 'react-native-vector-icons/Ionicons'
import { Images } from '../../config/Images';
import CustomButton from '../../components/CustomButton';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput } from "react-native-credit-card-input";
import { Typography, FontWeight } from '../../config/typography';
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import { depositActionReset } from '../../webservice/DepositApi';
import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
import { transferCommissionAction } from '../../webservice/WalletTransferCommission';
import { resetCommissionReducer } from '../../webservice/WalletTransferCommission';
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
import { baseUrl } from '../../webservice/IlinkConstants';
let moment = require('moment-timezone');
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { thousandsSeparators, isEmptyObject, transactionHistoryUser } from '../../utils/UtilsFunction';
import DeviceInfo from 'react-native-device-info'
let route = require('./../../route.json');
let slugify = require('slugify');
require('../../utils/Translations');
class WalletDetailUser extends Component {
constructor(props) {
super(props);
this.state = {
index: 0,
heightHeader: Utils.heightHeader(),
isModalConfirmVisible: false,
wallet: null,
triggerTransferCommission: false,
loading: false,
isTriggerRefresh: false,
scrollHeaderY: 0
};
slugify.extend({ '+': 'plus' });
this.scrollY = new Animated.Value(0);
this.scrollHeaderY = new Animated.Value(0);
this.deltaY = new Animated.Value(0);
this.bgBannerY = new Animated.Value(0);
this.heightImageBanner = Utils.scaleWithPixel(250, 1);
this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;
this.currentLocale = DeviceInfo.getDeviceLocale().includes("fr") ? "fr" : "en-gb";
moment.locale(this.currentLocale);
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
/* this.props.getWalletTransactionHistoryReset();
this.props.depositActionReset();
this.props.resetWalletListDetailReducer();
if (this.isHomeRootView) {
let agentId = this.props.navigation.state.params.agentId;
this.props.getWalletDetailActivated(agentId, true);
}
else {
this.props.getWalletDetailActivated(this.props.navigation.state.params.wallet.id, false);
this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
} */
}
/*
static options(passProps) {
return {
topBar: {
drawBehind: false,
visible: true,
animate: true,
buttonColor: 'white',
background: {
color: 'white',
},
rightButtons: []
},
backButton: {
visible: true,
color: "white"
},
buttonColor: "white",
background: {
color: Color.primaryDarkColor
},
statusBar: {
drawBehind: false,
visible: true,
}
};
}
*/
static navigatorStyle = {
navBarBackgroundColor: Color.primaryColor,
statusBarColor: Color.primaryDarkColor,
navBarTextColor: '#FFFFFF',
navBarButtonColor: '#FFFFFF'
};
static navigationOptions = () => {
return {
//title: I18n.t('WALLET'),
//title: this.isHomeRootView ? I18n.t('WALLET') : ((typeof this.props.navigation.state.params !== 'undefined') && this.props.navigation.state.params.wallet.network),
drawerLabel: () => null,
headerTitle: I18n.t('WALLET'),
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 23,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
title: I18n.t('WALLET')
}
};
componentDidMount() {
/* const { result } = this.props;
if (result !== null) {
if (typeof result.response !== 'undefined') {
const wallet = result.response[0];
this.setState({
wallet: wallet,
isTriggerRefresh: false
})
}
} */
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
return false;
} else {
return true;
}
}
getWalletIcon = (wallet) => {
return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;
}
getCreationDateToHumanFormat = (date) => {
let re = moment.tz(date, 'Etc/GMT+0').format();
return moment(re).fromNow();
}
updateLangue() {
this.props.navigation.setParams({ name: I18n.t('WALLET') })
this.forceUpdate()
}
handleIndexChange = index => this.setState({ index });
imageScale = () => {
return this.scrollY.interpolate({
inputRange: [0, 100],
outputRange: [1, 0.5],
extrapolate: 'clamp',
});
}
imageTranslateY = () => {
return this.scrollY.interpolate({
inputRange: [0, 100],
outputRange: [-5, 50],
extrapolate: 'clamp',
});
}
bgHeaderTranslateY = () => {
return this.scrollY.interpolate({
inputRange: [0, 150],
outputRange: [-5, 0],
extrapolate: 'clamp',
});
}
refresh = () => {
const { result } = this.props;
console.log("STATE NAVIGATION PARAMS REFRESH", this.props.navigation.state);
if (!this.isHomeRootView) {
const { wallet } = this.props.navigation.state.params;
this.props.getWalletDetailActivated(wallet.id, false);
this.props.getWalletTransactionHistory(wallet.id);
this.setState({
isTriggerRefresh: true
});
/* if (typeof this.props.navigation.state.params.onRefreshDetail !== 'undefined')
this.props.navigation.state.params.onRefreshDetail(); */
}
else {
let agentId = this.props.navigation.state.params.agentId;
this.props.getWalletDetailActivated(agentId, true);
}
}
renderHeader = () => (
<View style={[
styles.containField,
{
backgroundColor: Color.cardBackgroundColor,
zIndex: 11,
shadowColor: Color.borderColor,
borderColor: Color.borderColor,
}
]}>
<View style={[styles.contentLeftItem]}>
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Gabon</Text>
</View>
<View style={{
flex: 1,
alignItems: 'center',
justifyContent: 'flex-end',
}}>
<Animated.Image
source={{ uri: `https://ilink-app.com/mobilebackend/datas/img/network/uba-fs-ilink-logo.png` }}
style={{
width: 120,
height: 120,
borderRadius: 60,
position: 'absolute',
alignSelf: 'center',
backgroundColor: Color.whiteColor,
bottom: 70,
transform: [{
scale: this.imageScale()
},
{
translateY: this.imageTranslateY()
}]
}} />
<View style={{
marginTop: 1, flex: 1,
alignItems: 'center',
justifyContent: 'flex-end'
}}>
<Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>UBA FS iLink</Text>
<Tag primary style={styles.tagFollow}>
{I18n.t('CREATION_IDENTIFICATION_CLIENT')}
</Tag>
</View>
</View>
<View style={styles.contentLeftItem}>
<Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
<Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>Il y'a deux jours</Text>
</View>
</View>
);
renderLoader = () => {
return (
<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>
)
}
renderAccountDetail = (wallet) => (
<View style={{ flexDirection: 'row', flex: 1, 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('PRINCIPAL_ACCOUNT_TITLE')}
</Text>
<Text style={[Typography.body2]}>0</Text>
</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('NUMERO_COMPTE')}
</Text>
<Text style={[Typography.body2]}>123456789</Text>
</View>
</View>
</View>
);
renderDetailWallet = () => {
return (
(<>
{this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
<View
style={styles.container}>
<Animated.View style={{
position: 'absolute',
width: "100%",
zIndex: 1,
backgroundColor: Color.primaryColor,
height: 140 - this.state.scrollHeaderY,
}} />
<ScrollView style={{
paddingHorizontal: 20, position: 'absolute',
width: '100%',
height: '100%',
zIndex: 2
}}
scrollEventThrottle={8}
onScroll={Animated.event([
{
nativeEvent: {
contentOffset: { y: this.scrollY },
},
},
],
{ listener: (event) => { this.setState({ scrollHeaderY: event.nativeEvent.contentOffset.y }); } })}>
<View style={{ marginTop: 80, }}>
{this.renderHeader()}
<View
style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
{this.renderAccountDetail()}
<>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTIONS')}
</Text>
</View>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { }}
activeOpacity={0.9}>
<Icon name='arrow-bottom-right'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('DEPOSIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('DEPOSIT_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='arrow-top-left'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('WITHDRAWAL')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='cash-multiple'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_CREDIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { }}
activeOpacity={0.9}>
<Icon name='heart-multiple'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_SANTE')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text numberOfLines={1} style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('VALIDATE_IDENTIFICATION_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
<View style={styles.transactionContainer}>
<View style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='file-document'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('PAIEMENT_FACTURE')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
</Text>
</View>
</View>
</TouchableOpacity>
</View>
<View style={{ flex: 1 }}>
{/* <TouchableOpacity style={styles.contain}
onPress={() => { this.props.navigation.push(route.createIdentification) }}
activeOpacity={0.9}>
<Icon name='md-outline'
color={Color.primaryColor}
size={30}
style={styles.imageBanner} />
<View style={[styles.content]}>
<View style={styles.contentTitle}>
<Text style={[Typography.headline, Typography.semibold]}>
{I18n.t('NANO_CREDIT')}
</Text>
</View>
<View style={{ flex: 1 }}>
<Text style={[Typography.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
{I18n.t('WITHDRAWAL_DESCRIPTION')}
</Text>
</View>
</View>
</TouchableOpacity> */}
</View>
</View>
</>
{this.renderHistoryTransaction()}
</View>
</View>
</ScrollView>
</View>
</>)
)
}
renderHistoryTransactionItem = (item) => {
let re = moment.tz(item.date, 'Etc/GMT+0').format();
let date = moment(re).fromNow();
return (
<View
key={item.id}
style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View style={styles.iconContent}>
<Icon name='arrow-bottom-right'
color={Color.primaryColor} size={20} />
</View>
<View>
<Text style={Typography.subhead}>{item.description}</Text>
<Text style={[Typography.caption1, Color.grayColor]} style={{ marginTop: 5 }}>
{date}
</Text>
</View>
</View>
</View>
);
}
renderHistoryTransactionList = () => {
return (
transactionHistoryUser().map((item, ) => (
this.renderHistoryTransactionItem(item)
))
)
}
renderHistoryTransaction = () => {
return (
<>
<View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
<Text
style={[Typography.title3, Typography.semibold]}>
{I18n.t('TRANSACTION_HISTORY')}
</Text>
</View>
<ScrollView style={styles.transactionContainer}>
{
this.props.loadingTransaction ?
(
<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>
) : this.renderHistoryTransactionList()
}
</ScrollView>
</>
)
}
render() {
return (
<>
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={true}
/>
{
this.renderDetailWallet()
}
</>
);
}
}
const mapStateToProps = state => ({
loading: state.walletDetailReducer.loading,
result: state.walletDetailReducer.result,
error: state.walletDetailReducer.error,
loadingTransaction: state.walletHistoryReducer.loadingTransaction,
resultTransaction: state.walletHistoryReducer.resultTransaction,
errorTransaction: state.walletHistoryReducer.errorTransaction,
loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
});
const mapDispatchToProps = dispatch => bindActionCreators({
getWalletDetailActivated,
getWalletTransactionHistory,
transferCommissionAction,
resetWalletListDetailReducer,
resetCommissionReducer,
getWalletTransactionHistoryReset,
depositActionReset
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(WalletDetailUser);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.containerBackgroundColor
},
indicator: {
height: 2
},
tab: {
width: Utils.getWidthDevice() / 2
},
tabbar: {
height: 40
},
imgBanner: {
width: '100%',
height: 250,
position: 'absolute',
},
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 },
profileItem: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingBottom: 20,
paddingTop: 20
},
checkDefault: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderBottomWidth: 1,
paddingVertical: 10,
marginTop: 5
},
blockView: {
paddingVertical: 10,
borderBottomWidth: 0.5,
},
circlePoint: {
width: 50,
height: 50,
borderRadius: 25,
marginRight: 5,
alignItems: 'center',
justifyContent: 'center',
},
transactionContainer: {
flexDirection: 'row',
paddingTop: 10,
paddingTop: 10,
paddingLeft: 10,
paddingRight: 10,
},
containerTouch: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginRight: 1,
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(60),
paddingHorizontal: 10,
justifyContent: 'space-between',
alignItems: 'flex-start',
flex: 1,
},
contentTitle: {
paddingTop: 5,
}
})

39
utils/UtilsFunction.js
View File

@ -1,5 +1,44 @@
import I18n from 'react-native-i18n';
export const thousandsSeparators = (num) => {
var num_parts = num.toString().split(".");
num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, " ");
return num_parts.join(".");
}
export const identityPieces = () => {
return [
{
name: I18n.t('IDENTITY_CARD')
},
{
name: I18n.t('PASSEPORT')
},
{
name: I18n.t('OTHER_IDENTITY_PIECE')
},
]
}
export const transactionHistoryUser = () => {
return [
{
description: `Dépôt de 10 000 dans le wallet UBA Fs iLink à destination de Brice Zele (+237690662238) `,
date: '2020-05-15'
},
{
description: `Retrait de 10 000 dans le wallet UBA Fs iLink à destination de Brice Zele (+237690662238) `,
date: '2020-05-20'
},
];
}
export const isEmptyObject = (obj) => {
for (let prop in obj) {
if (obj.hasOwnProperty(prop)) {
return false;
}
}
return JSON.stringify(obj) === JSON.stringify({});
}

19
utils/i18n/en.json
View File

@ -54,6 +54,9 @@
"CARD_NUMBER_ERROR": "Card number incorrect",
"AMOUNT_LABEL": "Amount",
"WITHDRAWAL": "Withdrawal",
"NANO_CREDIT": "Nano credit",
"NANO_SANTE": "Nano health",
"PAIEMENT_FACTURE": "Bill payment",
"DEMAND_SEND": "Demand send",
"WITHDRAWAL_DESCRIPTION": "Make a withdrawal",
"COMMISSION_ACCOUNT_TITLE": "Commission account",
@ -63,6 +66,7 @@
"CONFIRM_TRANSFER_COMMISSION": "Confirm commission transfer",
"CREATION_DATE": "Creation date",
"PRINCIPAL_ACCOUNT_TITLE": "Principal account",
"NUMERO_COMPTE": "Account number",
"NO_WALLET_ACTIVED": "No wallet is activated for your account",
"TRANSFER_TO_PRINCIPAL_ACCOUNT": "Transfer commissions",
"PRINCIPAL": "Principal",
@ -94,6 +98,7 @@
"GROUP_MEMBERS": "The group members",
"NAME": "Last name(s)",
"FIRSTNAME": "First name(s) ",
"AND": "and",
"ADMIN": "Administrator",
"SUPER_ADMIN": "Super administrator",
"GEOLOCATED": "Geo located agent",
@ -113,6 +118,13 @@
"PHONE_NUMBER": "Phone",
"CHOICE_NETWORK": "Choose a network",
"COUNTRY_CHOICE": "Choose a country",
"CHOICE_TOWN": "Choose a town",
"PIECE_IDENTITE": "Identity piece",
"IDENTITY_CARD": "Identity card",
"PASSEPORT": "Passeport",
"OTHER_IDENTITY_PIECE": "Other",
"IDENTITY_NUMBER": "N° of piece",
"IDENTITY_PIECE_EXPIRY_DATE": "Expiry date",
"LAST_STEP": "Last step",
"ACTIVE_ACCOUNT": "Activate the account !",
"ACTIVE_USER": "Active",
@ -255,6 +267,13 @@
"FREE": "Available",
"SAVED": "Registered",
"ACCOUNT_INFO": "My Account Information",
"IDENTIFICATION": " Identification",
"CREATION_IDENTIFICATION": "Creation",
"CREATION_IDENTIFICATION_DESCRIPTION": "Identify a client",
"VALIDATE_IDENTIFICATION": "Validation",
"VALIDATE_IDENTIFICATION_DESCRIPTION": "Validate an identi...",
"CREATE_IDENTIFICATION_TITLE": "Please fill in customer information",
"DATE_NAISSANCE": "Date of birth",
"REGISTER_YOURSELF": "Register",
"REGISTRATION": "Registration",
"CHANGE_LANG_LABEL": "Change language",

20
utils/i18n/fr.json
View File

@ -58,11 +58,15 @@
"PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
"DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
"WITHDRAWAL": "Retrait",
"NANO_CREDIT": "Nano crédit",
"NANO_SANTE": "Nano santé",
"PAIEMENT_FACTURE": "Paiement de facture",
"WITHDRAWAL_DESCRIPTION": "Effectuer un retrait",
"COMMISSION_ACCOUNT_TITLE": "Cpt. commission",
"CONFIRM": "Confirmer",
"CONFIRM_TRANSFER_COMMISSION": "Confirmer le transfert des commissions",
"PRINCIPAL_ACCOUNT_TITLE": "Cpt. principal",
"NUMERO_COMPTE": "N° de compte",
"COMMISSION_TRANSFER_SUCCESS": "Les commissions ont été transférées vers le compte principal",
"COMMISSION_TRANSFER_ERROR_EMPTY": "Le solde commission est vide",
"TRANSACTIONS": "Transactions",
@ -97,6 +101,7 @@
"GROUP_MEMBERS": "Les membres du groupe",
"NAME": "Nom (s)",
"FIRSTNAME": "Prénom (s) ",
"AND": "et",
"ADMIN": "Administrateur",
"SUPER_ADMIN": "Super administrateur",
"GEOLOCATED": "Agent géo-localisé",
@ -117,6 +122,13 @@
"PHONE_NUMBER": "Numéro de téléphone",
"CHOICE_NETWORK": "Choisissez un réseau",
"COUNTRY_CHOICE": "Choisissez un pays",
"CHOICE_TOWN": "Choisissez une ville",
"PIECE_IDENTITE": "Pièce d'identité",
"IDENTITY_CARD": "Carte d'identité",
"PASSEPORT": "Passeport",
"OTHER_IDENTITY_PIECE": "Autre",
"IDENTITY_NUMBER": "N° de la pièce",
"IDENTITY_PIECE_EXPIRY_DATE": "Date d'expiration",
"LAST_STEP": "Derniere étape",
"ACTIVE_ACCOUNT": "Activez le compte !",
"ACTIVE_USER": "Activer",
@ -257,6 +269,14 @@
"FREE": "disponibles",
"SAVED": "enregistrés",
"ACCOUNT_INFO": " Information sur mon compte",
"IDENTIFICATION": " Identification",
"CREATION_IDENTIFICATION": "Création",
"CREATION_IDENTIFICATION_CLIENT": "M'identifier",
"CREATION_IDENTIFICATION_DESCRIPTION": "Identifier un client",
"VALIDATE_IDENTIFICATION": "Validation",
"VALIDATE_IDENTIFICATION_DESCRIPTION": "Valider une identi...",
"CREATE_IDENTIFICATION_TITLE": "Veuillez renseigner les informations du client",
"DATE_NAISSANCE": "Date de naissance",
"REGISTER_YOURSELF": "Enregistrez-vous",
"REGISTRATION": "Inscription",
"CHANGE_LANG_LABEL": "Changer la langue",