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

Validation camera ok

This commit is contained in:
Brice Zele 2020-06-18 06:38:10 +01:00
parent 70de834ec0
commit 7d700f725d
17 changed files with 856 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
App.js
View File

@ -52,7 +52,8 @@ import WalletDetailUser from './screens/wallet/WalletDetailUser';
import WalletOptionSelect from './screens/wallet/WalletOptionSelect';
import ValidateIdentification from './screens/identification/validateIdentification';
import CreateIdentificationUser from './screens/identification/CreateIdentificationUser';
import PaiementOptionSelect from './screens/wallet/PaiementOptionSelect';
import OperateurOptionSelect from './screens/wallet/OperateurOptionSelect';
import PaiementFacture from './screens/wallet/PaiementFacture';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
@ -93,7 +94,9 @@ const AppStack = createDrawerNavigator({
about: About,
walletDetailUser: WalletDetailUser,
walletOptionSelect: WalletOptionSelect,
paiementOptionSelect: PaiementOptionSelect
operateurOptionSelect: OperateurOptionSelect,
operateurOptionSelect: OperateurOptionSelect,
paiementFacture: PaiementFacture
})
}, { contentComponent: OptionsMenu, headerMode: 'none', contentOptions: { activeTintColor: theme.accent } })
@ -147,7 +150,8 @@ const AppAgentStack = createDrawerNavigator({
walletDepot: WalletDepot,
walletRetrait: WalletRetrait,
walletOptionSelect: WalletOptionSelect,
paiementOptionSelect: PaiementOptionSelect
operateurOptionSelect: OperateurOptionSelect,
paiementFacture: PaiementFacture
})
}, {
contentComponent: OptionsMenu,

4
components/OutlineTextInput/index.js
View File

@ -18,7 +18,8 @@ export default function Index(props) {
textAlignVertical,
label,
onSubmitEditing,
borderBottomColor
borderBottomColor,
icon
} = props;
return (
<TouchableOpacity
@ -51,6 +52,7 @@ export default function Index(props) {
onFocus={() => onFocus()}
textAlignVertical={textAlignVertical}
onSubmitEditing={onSubmitEditing} />
{icon}
</View>
</TouchableOpacity>
);

2
package.json
View File

@ -45,6 +45,7 @@
"react-native-geolocation-service": "4.0.0",
"react-native-gesture-handler": "1.6.1",
"react-native-i18n": "^2.0.15",
"react-native-image-crop-picker": "^0.32.0",
"react-native-loader": "^1.2.1",
"react-native-loading-spinner-overlay": "^1.0.1",
"react-native-local-mongodb": "^2.2.9",
@ -57,6 +58,7 @@
"react-native-material-dropdown": "^0.11.1",
"react-native-paper": "^2.16.0",
"react-native-phone-call": "^1.0.9",
"react-native-popover-tooltip": "^1.1.4",
"react-native-popup-dialog": "^0.18.3",
"react-native-progress": "^3.6.0",
"react-native-range-datepicker": "^1.8.2",

3
route.json
View File

@ -36,5 +36,6 @@
"createIdentification": "createIdentification",
"createIdentificationUser": "createIdentificationUser",
"validateIdentification": "validateIdentification",
"paiementOptionSelect": "paiementOptionSelect"
"operateurOptionSelect": "operateurOptionSelect",
"paiementFacture": "paiementFacture"
}

4
screens/home/Home.js
View File

@ -1390,7 +1390,7 @@ class Home extends BaseScreen {
translucent={true}
/>
{/* Start here to comment */}
{/* {
{
(this.state.loadingDialog || this.props.loading) ?
<View
style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.state.loadingDialog ? responsiveWidth(100) : 0, height: this.state.loadingDialog ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}
@ -1426,7 +1426,7 @@ class Home extends BaseScreen {
this.setState({ showProgress: false })
Alert.alert(I18n.t("PROBLEM_OCCUR"), I18n.t("PROBLEM_OCCUR_DIRECTION"), [{ text: "Ok", onPress: () => { } }])
}}
/> */}
/>
{this.makeCardSearch()}
{this.makeSlidingUp()}
{this.makeDialogLoader()}

256
screens/identification/validateIdentification.js
View File

@ -1,30 +1,22 @@
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';
import React, { Component } from 'react';
import { Alert, PermissionsAndroid, ScrollView, StyleSheet, Image, Text, View } from 'react-native';
import * as Animatable from 'react-native-animatable';
import { TouchableOpacity } from 'react-native-gesture-handler';
import I18n from 'react-native-i18n';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { Fumi } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import PopoverTooltip from 'react-native-popover-tooltip';
import ImagePicker from 'react-native-image-crop-picker';
import Dialog from "react-native-dialog";
import { Color } from '../../config/Color';
import { readUser } from './../../webservice/AuthApi';
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');
import LottieView from 'lottie-react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import Camera from '../../components/Camera';
export default class ValidateIdentification extends Component {
@ -58,7 +50,10 @@ export default class ValidateIdentification extends Component {
this.state = {
memberCode: null,
image: null,
displayCamera: false
displayImage: false,
userPhoto: null,
cardFront: null,
cardBack: null,
};
}
@ -128,16 +123,36 @@ export default class ValidateIdentification extends Component {
this.setState({ image: null, displayCamera: false });
}
renderDialogImage = () => {
return (
<Dialog.Container useNativeDriver={true} visible={this.state.displayImage}>
<Dialog.Title>Image</Dialog.Title>
<View>
<Image source={{ uri: this.state.image.path }} style={{ width: this.state.image.width, height: this.state.image.height }} />
</View>
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
this.setState({
displayImage: false
});
}} />
</Dialog.Container>
)
}
render() {
console.log("STATE", this.state);
const { showPickerDateNaissance } = this.state;
return (
<>
<ScrollView style={styles.container}>
{this.state.displayImage && this.renderDialogImage()}
<Text style={styles.subbigtitle}>{I18n.t('CREATE_IDENTIFICATION_TITLE')}</Text>
<Animatable.View style={{
{/* <Animatable.View style={{
justifyContent: 'center',
alignItems: 'center'
}} ref={(comp) => { this.nameanim = comp }}>
@ -164,7 +179,7 @@ export default class ValidateIdentification extends Component {
/>
}
</TouchableOpacity>
</Animatable.View>
</Animatable.View> */}
<Animatable.View ref={(comp) => { this.nameanim = comp }}>
<Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
@ -179,6 +194,168 @@ export default class ValidateIdentification extends Component {
</Fumi>
</Animatable.View>
<View style={{ marginTop: 20, flexDirection: 'row' }}>
<View style={[styles.contentPicker]}>
<PopoverTooltip
ref='toolTipVisibleUserPhoto'
buttonComponent={
<TouchableOpacity
style={[styles.contain]}
onPress={() => { this.refs['toolTipVisibleUserPhoto'].toggle(); }}
activeOpacity={0.9}>
<View style={[styles.contcontainerCenterentLeft]}>
<View>
<Icon name='account-circle' color={Color.whiteColor} style={[styles.thumb]} size={80} />
<View style={[styles.point, { backgroundColor: Color.accentColor }]}>
<Icon name='camera-image' color={Color.whiteColor} size={20} />
</View>
</View>
</View>
</TouchableOpacity>
}
items={[
{
label: 'Camera',
onPress: () => {
ImagePicker.openCamera({
width: 200,
height: 200,
cropping: true,
}).then(image => {
this.setState({ image, displayImage: true });
})
}
},
{
label: 'Galerie',
onPress: () => {
ImagePicker.openPicker({
width: 300,
height: 400,
cropping: true
}).then(image => {
this.setState({ image, displayImage: true });
});
}
}
]}
animationType='spring'
overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
tooltipContainerStyle={{ borderRadius: 0 }}
labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
labelSeparatorColor={Color.dividerColor}
/>
</View>
<View style={[styles.contentPicker]}>
<PopoverTooltip
ref='toolTipVisibleCardFront'
buttonComponent={
<TouchableOpacity
style={[styles.contain]}
onPress={() => { this.refs['toolTipVisibleCardFront'].toggle(); }}
activeOpacity={0.9}>
<View style={[styles.contcontainerCenterentLeft]}>
<View>
<Icon name='credit-card-scan' color={Color.whiteColor} style={[styles.thumb]} size={80} />
<View style={[styles.point, { backgroundColor: Color.accentColor }]}>
<Icon name='camera-image' color={Color.whiteColor} size={20} />
</View>
</View>
</View>
</TouchableOpacity>
}
items={[
{
label: 'Camera',
onPress: () => {
ImagePicker.openCamera({
width: 400,
height: 200,
cropping: true,
}).then(image => {
this.setState({ image, displayImage: true });
})
}
},
{
label: 'Galerie',
onPress: () => {
ImagePicker.openPicker({
width: 400,
height: 200,
cropping: true
}).then(image => {
this.setState({ image, displayImage: true });
});
}
}
]}
animationType='spring'
overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
tooltipContainerStyle={{ borderRadius: 0 }}
labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
labelSeparatorColor={Color.dividerColor}
/>
</View>
<View style={[styles.contentPicker]}>
<PopoverTooltip
ref='toolTipVisibleCardBack'
buttonComponent={
<TouchableOpacity
style={[styles.contain]}
onPress={() => { this.refs['toolTipVisibleCardBack'].toggle(); }}
activeOpacity={0.9}>
<View style={[styles.contcontainerCenterentLeft]}>
<View>
<Icon name='credit-card-off' color={Color.whiteColor} style={[styles.thumb]} size={80} />
<View style={[styles.point, { backgroundColor: Color.accentColor }]}>
<Icon name='camera-image' color={Color.whiteColor} size={20} />
</View>
</View>
</View>
</TouchableOpacity>
}
items={[
{
label: 'Camera',
onPress: () => {
ImagePicker.openCamera({
width: 400,
height: 200,
cropping: true,
}).then(image => {
this.setState({ image, displayImage: true });
})
}
},
{
label: 'Galerie',
onPress: () => {
ImagePicker.openPicker({
width: 400,
height: 200,
cropping: true
}).then(image => {
this.setState({ image, displayImage: true });
});
}
}
]}
animationType='spring'
overlayStyle={{ backgroundColor: 'transparent' }} // set the overlay invisible
tooltipContainerStyle={{ borderRadius: 0 }}
labelContainerStyle={{ backgroundColor: Color.whiteColor, width: 120, alignItems: 'center' }}
labelSeparatorColor={Color.dividerColor}
/>
</View>
</View>
<Button style={styles.btnvalide}
textStyle={styles.textbtnvalide}
isLoading={this.state.isLoging}
@ -196,6 +373,27 @@ const styles = StyleSheet.create({
flex: 1,
backgroundColor: Color.primaryDarkColor,
},
contain: { flexDirection: "row" },
containerCenter: {
flex: 8,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
thumb: {
borderRadius: 30,
marginRight: 10
},
point: {
width: 25,
height: 25,
borderRadius: 11,
alignItems: "center",
justifyContent: "center",
position: "absolute",
right: 9,
bottom: 0
},
textbtnvalide: {
color: 'white',
fontWeight: 'bold'
@ -208,6 +406,12 @@ const styles = StyleSheet.create({
textAlign: 'center',
margin: 20,
},
contentPicker: {
padding: 10,
borderRadius: 8,
flex: 1,
alignItems: "center"
},
subbigtitle: {
color: 'white',
fontSize: 17,

2
screens/optionMenu/OptionsMenu.js
View File

@ -253,7 +253,7 @@ export default class OptionsMenu extends Component {
_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 === 'paiementOptionSelect') {
|| item === 'createIdentificationUser' || item === 'operateurOptionSelect' || item === 'paiementFacture') {
return null
} else {
const color = this.state.currentId === item.id ? theme.accent : "grey"

106
screens/wallet/PaiementOptionSelect.js → screens/wallet/OperateurOptionSelect.js
View File

@ -1,30 +1,27 @@
import React, { Component } from 'react';
import { StyleSheet, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } from 'react-native';
import { FlatList, Image, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import I18n from 'react-native-i18n';
import { Appbar, Provider } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import { IlinkEmitter } from "../../utils/events";
const route = require('../../route.json');
let slugify = require('slugify');
import I18n from 'react-native-i18n'
import * as Utils from '../../utils/DeviceUtils';
import { Images } from '../../config/Images';
import { Color } from '../../config/Color';
import { baseUrl } from '../../webservice/IlinkConstants';
import { IlinkEmitter } from "../../utils/events";
import { Provider, Appbar } from 'react-native-paper';
import { readUser } from '../../webservice/AuthApi';
import { FontWeight, Typography } from '../../config/typography';
import LottieView from 'lottie-react-native';
import { isIlinkWorldWallet, optionDepotScreen } from '../../utils/UtilsFunction';
import chunk from 'lodash/chunk';
import { ScrollView } from 'react-native-gesture-handler';
export default class PaiementOptionSelect extends Component {
export default class OperateurOptionSelect extends Component {
constructor(props) {
super(props);
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
/* this.state = {
options: this.props.navigation.state.params.optionSelect
} */
console.log("OPERATEUR OPTION PROPS", this.props);
this.state = {
options: this.props.navigation.state.params.optionSelect.options,
title: this.props.navigation.state.params.optionSelect.title,
subTitle: this.props.navigation.state.params.optionSelect.subTitle,
}
}
@ -48,11 +45,28 @@ export default class PaiementOptionSelect extends Component {
/>)
});
renderItem = (item) => {
redirectToRoute = (item) => {
switch (item.type) {
case 'PAIEMENT_ECOLE':
this.props.navigation.push(item.screen, {
title: item.title
});
break;
default:
this.props.navigation.push(item.screen, {
title: item.title
});
break;
}
}
renderItem = (item, index) => {
return (
<TouchableOpacity
key={item.id}
key={index}
style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
onPress={() => {
@ -74,13 +88,13 @@ export default class PaiementOptionSelect extends Component {
renderList = () => {
const { optionSelect } = this.props;
const { options } = this.state;
return (
<ScrollView style={{ flex: 1, padding: 20 }}>
{
options.map((item) => (
this.renderItem(item)
options.map((item, index) => (
this.renderItem(item, index)
))
}
</ScrollView>
@ -88,9 +102,6 @@ export default class PaiementOptionSelect extends Component {
}
render() {
console.log("PAIEMENT FACTURE PROPS", this.props);
console.log("PAIEMENT FACTURE GET PARAMS", this.props.navigation.getParam('optionSelect'));
return (
<Provider>
<View style={{ flex: 1 }}>
@ -106,16 +117,40 @@ export default class PaiementOptionSelect extends Component {
onPress={() => { this.props.navigation.pop() }}
/>
<Appbar.Content
title="Paiement facture"
subtitle="Veuillez sélectionner une option"
title={this.state.title}
subtitle={this.state.subTitle}
/>
</Appbar.Header>
<View style={styles.container}>
{/* {
this.renderList()
} */}
<FlatList
contentContainerStyle={{
paddingHorizontal: 20,
paddingBottom: 10,
}}
data={this.state.options}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<TouchableOpacity
style={[styles.item, { borderBottomColor: Color.borderColor }]}
onPress={() => {
this.redirectToRoute(item);
}}>
<View style={{ flexDirection: 'row' }}>
<Image style={{ width: 30, height: 30 }} source={{ uri: item.icon }} />
<Text style={[Typography.body1]}>{item.title}</Text>
</View>
<Icon
name="chevron-right"
size={20}
color={Color.primaryColor}
enableRTL={true}
/>
</TouchableOpacity>
)}
/>
</View>
@ -129,8 +164,6 @@ export default class PaiementOptionSelect extends Component {
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.containerBackgroundColor,
paddingHorizontal: 20,
},
paymentItem: {
flexDirection: "row",
@ -153,6 +186,13 @@ const styles = StyleSheet.create({
justifyContent: "space-between",
alignItems: "center"
},
/* item: {
paddingVertical: 15,
borderBottomWidth: 1,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center"
}, */
lottie: {
width: 540,
height: 240

113
screens/wallet/PaiementFacture.js Normal file
View File

@ -0,0 +1,113 @@
import React, { Component } from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import I18n from 'react-native-i18n';
import { Appbar, Provider } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { Color } from '../../config/Color';
import { IlinkEmitter } from "../../utils/events";
import OutlineTextInput from '../../components/OutlineTextInput';
import CustomButton from '../../components/CustomButton';
import { ScrollView } from 'react-native-gesture-handler';
const route = require('../../route.json');
let slugify = require('slugify');
export default class PaiementFacture extends Component {
constructor(props) {
super(props);
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
this.state = {
title: this.props.navigation.state.params.title,
}
}
updateLangue() {
this.props.navigation.setParams({ name: I18n.t('WALLET') })
this.forceUpdate();
}
static navigationOptions = ({ navigation }) => ({
header: null,
headerMode: 'none',
headerTitle: null,
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
barStyle: { backgroundColor: '#694fad' },
drawerLabel: I18n.t('CREDIT_MANAGE'),
drawerIcon: ({ tintColor }) => (
<Icon
name={'credit-card'}
size={24}
/>)
});
render() {
return (
<Provider>
<View style={{ flex: 1 }}>
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={false}
/>
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
<Appbar.BackAction
onPress={() => { this.props.navigation.pop() }}
/>
<Appbar.Content
title={this.state.title}
/>
</Appbar.Header>
<View style={styles.container}>
<ScrollView style={{ padding: 20 }}>
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
<OutlineTextInput
borderBottomColor={'black'}
keyboardType="numeric"
label={I18n.t('NUMERO_DE_SERIE')}
style={{ marginTop: 10 }}
placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
/>
</View>
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
<OutlineTextInput
borderBottomColor={'black'}
keyboardType="numeric"
label={I18n.t('AMOUNT')}
style={{ marginTop: 10 }}
placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
/>
</View>
<View style={{ margin: 10 }}>
<CustomButton outline onPress={() => { }}>
{I18n.t('VALIDATE')}
</CustomButton>
</View>
</ScrollView>
</View>
</View>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Color.containerBackgroundColor
},
});

300
screens/wallet/WalletDepot.js
View File

@ -1,38 +1,35 @@
import React, { Component } from 'react';
import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import LottieView from 'lottie-react-native';
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 OutlineTextInput from '../../components/OutlineTextInput';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input";
import { Typography, FontWeight } from '../../config/typography';
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, walletCommissionAmountReset, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import Dialog from "react-native-dialog";
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Dropdown } from 'react-native-material-dropdown';
import isEqual from 'lodash/isEqual';
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
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 LottieView from 'lottie-react-native';
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/es-us';
import 'moment/locale/fr';
import React, { Component } from 'react';
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
import { CreditCardInput } from "react-native-credit-card-input";
import Dialog from "react-native-dialog";
import I18n from 'react-native-i18n';
import Icon from 'react-native-vector-icons/FontAwesome5';
import { Dropdown } from 'react-native-material-dropdown';
import { Appbar, Provider } from 'react-native-paper';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import CustomButton from '../../components/CustomButton';
import OutlineTextInput from '../../components/OutlineTextInput';
import style from '../../components/TextInput/styles';
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
import { identityPieces, inputCardSource } from '../../utils/UtilsFunction';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
import { IlinkEmitter } from "../../utils/events";
import { inputCardSource } from '../../utils/UtilsFunction';
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
let moment = require('moment-timezone');
const CONTAINER_WIDTH = Dimensions.get("window").width;
@ -47,17 +44,11 @@ class WalletDepot extends Component {
};
static navigationOptions = ({ navigation }) => {
return {
drawerLabel: () => null,
title: I18n.t('MAKE_DEPOSIT'),
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 23,
color: 'white'
},
headerTitleStyle: {
color: "white"
}
header: null,
headerMode: 'none',
headerTitle: null,
activeColor: '#f0edf6',
inactiveColor: '#3e2465',
};
}
@ -408,115 +399,134 @@ class WalletDepot extends Component {
console.log("STATE", this.state);
const { resultGetCommission } = this.props;
return (
<View style={[styles.container]}>
<Provider>
<View style={{ flex: 1 }}>
{
(resultGetCommission !== null) &&
(typeof resultGetCommission.response !== 'undefined') &&
this.modalConfirmTransaction(resultGetCommission)
}
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={false}
/>
{this.isHasError()}
{this.commissionsLoading()}
{this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
<ScrollView style={{ padding: 20 }}>
<View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
<Dropdown
containerStyle={{ marginTop: -20 }}
value='serial-number'
data={this.state.inputCardSource}
onChangeText={(value, index, data) => {
this.setState({
isDisplaySerialTextInput: isEqual(value, 'serial-number'),
facade: isEqual(value, 'serial-number') ? 'back' : 'front'
})
}}
valueExtractor={(value) => value.value}
labelExtractor={(value) => value.name}
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
<Appbar.BackAction
onPress={() => { this.props.navigation.pop() }}
/>
</View>
{!this.state.isDisplaySerialTextInput &&
<View style={{ marginTop: 10 }}>
<CreditCardInput
validColor={this.state.creditCardInput.valid ? 'green' : ''}
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
onChange={this.onCreditCardChange}
labels={{
number: I18n.t('CARD_NUMBER_LABEL'),
expiry: I18n.t('CARD_EXPIRY_LABEL'),
cvc: I18n.t('CARD_CVC_LABEL'),
}} />
{
(this.state.displayCardError) &&
this.isCreditCardValid().map((item) => (
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
))
}
</View>
}
{this.state.isDisplaySerialTextInput &&
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
<OutlineTextInput
borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
value={this.state.numeroSerie}
keyboardType="numeric"
label={I18n.t('NUMERO_DE_SERIE')}
style={{ marginTop: 10 }}
placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
onChangeText={(numeroSerie) => {
this.setState({ numeroSerie });
this.isNumeroSerieValid();
}}
/>
{
(!this.isNumeroSerieValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
}
<Text></Text>
</View>
}
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
<OutlineTextInput
borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
value={this.state.montant}
keyboardType="numeric"
label={I18n.t('AMOUNT_LABEL')}
style={{ marginTop: 10 }}
placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
onChangeText={(montant) => {
this.setState({ montant });
this.isMontantValid();
}}
<Appbar.Content
title={I18n.t('MAKE_DEPOSIT')}
/>
{
(!this.isMontantValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.montant.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
}
<Text></Text>
</View>
</Appbar.Header>
<View style={[styles.container]}>
<View style={{ margin: 10 }}>
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
{I18n.t('VALIDATE')}
</CustomButton>
{
(resultGetCommission !== null) &&
(typeof resultGetCommission.response !== 'undefined') &&
this.modalConfirmTransaction(resultGetCommission)
}
{this.isHasError()}
{this.commissionsLoading()}
{this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
<ScrollView style={{ padding: 20 }}>
<View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
<Dropdown
containerStyle={{ marginTop: -20 }}
value='serial-number'
data={this.state.inputCardSource}
onChangeText={(value, index, data) => {
this.setState({
isDisplaySerialTextInput: isEqual(value, 'serial-number'),
facade: isEqual(value, 'serial-number') ? 'back' : 'front'
})
}}
valueExtractor={(value) => value.value}
labelExtractor={(value) => value.name}
/>
</View>
{!this.state.isDisplaySerialTextInput &&
<View style={{ marginTop: 10 }}>
<CreditCardInput
validColor={this.state.creditCardInput.valid ? 'green' : ''}
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
onChange={this.onCreditCardChange}
labels={{
number: I18n.t('CARD_NUMBER_LABEL'),
expiry: I18n.t('CARD_EXPIRY_LABEL'),
cvc: I18n.t('CARD_CVC_LABEL'),
}} />
{
(this.state.displayCardError) &&
this.isCreditCardValid().map((item) => (
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
))
}
</View>
}
{this.state.isDisplaySerialTextInput &&
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
<OutlineTextInput
borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
value={this.state.numeroSerie}
keyboardType="numeric"
label={I18n.t('NUMERO_DE_SERIE')}
style={{ marginTop: 10 }}
placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
onChangeText={(numeroSerie) => {
this.setState({ numeroSerie });
this.isNumeroSerieValid();
}}
/>
{
(!this.isNumeroSerieValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
}
<Text></Text>
</View>
}
<View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
<OutlineTextInput
borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
value={this.state.montant}
keyboardType="numeric"
label={I18n.t('AMOUNT_LABEL')}
style={{ marginTop: 10 }}
placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
onChangeText={(montant) => {
this.setState({ montant });
this.isMontantValid();
}}
/>
{
(!this.isMontantValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.montant.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
}
<Text></Text>
</View>
<View style={{ margin: 10 }}>
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
{I18n.t('VALIDATE')}
</CustomButton>
</View>
</ScrollView>
</View>
</ScrollView>
</View>
</View>
</Provider>
)
}

59
screens/wallet/WalletDetail.js
View File

@ -1,38 +1,35 @@
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 { 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 isEqual from 'lodash/isEqual';
import omit from 'lodash/omit';
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 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-gb';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';
import 'moment/locale/es-us';
import 'moment/locale/fr';
import React, { Component } from 'react';
import { ActivityIndicator, Alert, Animated, Platform, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import I18n from 'react-native-i18n';
import { responsiveWidth } from 'react-native-responsive-dimensions';
import { TabBar } from 'react-native-tab-view';
import Icons from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { thousandsSeparators, isEmptyObject, optionPaiementFacture, transactionHistoryUser, optionDepotUserScreen, optionDepotScreen, optionRetraitScreen, optionRetraitUserScreen, transactionHistoryLabel, isIlinkWorldWallet, cutString, optionIdentificationScreen } from '../../utils/UtilsFunction';
import DeviceInfo from 'react-native-device-info';
import Tag from '../../components/Tag';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import { IlinkEmitter } from "../../utils/events";
import { cutString, isEmptyObject, isIlinkWorldWallet, optionDepotScreen, optionIdentificationScreen, optionPaiementFacture, optionRetraitScreen, transactionHistoryLabel } from '../../utils/UtilsFunction';
import { depositActionReset } from '../../webservice/DepositApi';
import { baseUrl } from '../../webservice/IlinkConstants';
import { getWalletDetailActivated, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import { getWalletTransactionHistory, getWalletTransactionHistoryReset } from '../../webservice/WalletTransactionHistoryApi';
import { resetCommissionReducer, transferCommissionAction } from '../../webservice/WalletTransferCommission';
let moment = require('moment-timezone');
const thousands = require('thousands');
let route = require('./../../route.json');

95
screens/wallet/WalletOptionSelect.js
View File

@ -25,9 +25,12 @@ export default class WalletOptionSelect extends Component {
options: this.props.navigation.state.params.optionSelect.options,
title: this.props.navigation.state.params.optionSelect.title,
subTitle: this.props.navigation.state.params.optionSelect.subTitle,
hasWallet: this.props.navigation.state.params.hasOwnProperty('wallet'),
type: this.props.navigation.state.params.optionSelect.type,
wallet: this.props.navigation.state.params.wallet,
lottie: this.props.navigation.state.params.lottie
}
console.log("WALLET OPTION PROPS", this.props);
}
@ -47,20 +50,38 @@ export default class WalletOptionSelect extends Component {
/>)
});
renderItem = (options, isOneElement) => (
redirectToRoute = (options) => {
switch (this.state.type) {
case 'FACTURE':
this.props.navigation.push(options.screen, {
optionSelect: options.subScreenOption
});
break;
case 'DEPOT':
this.props.navigation.push(options.screen, {
wallet: this.state.wallet
});
break;
case 'RETRAIT':
this.props.navigation.push(options.screen, {
wallet: this.state.wallet
});
break;
default:
this.props.navigation.push(options.screen)
break;
}
}
renderItem = (options, isOneElement, index) => (
isOneElement ?
<>
<View style={[styles.containerTouch]}>
<View key={index} style={[styles.containerTouch]}>
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.setParams({
optionSelect: optionPaiementFactureSubScreen
});
this.props.navigation.push(options.screen, {
optionSelect: optionPaiementFactureSubScreen
});
this.redirectToRoute(options);
}}
activeOpacity={0.9}>
@ -87,7 +108,7 @@ export default class WalletOptionSelect extends Component {
<TouchableOpacity style={styles.contain}
onPress={() => {
this.props.navigation.push(options.screen)
this.redirectToRoute(options);
}}
activeOpacity={0.9}>
@ -160,63 +181,23 @@ export default class WalletOptionSelect extends Component {
</Text>
</View>
{
chunk(this.state.options, 2).map((item) => (
chunk(this.state.options, 2).map((item, index) => (
<View style={styles.transactionContainer}>
<View key={index} style={styles.transactionContainer}>
{
item.length === 1 ?
item.map((wallet) => (
this.renderItem(wallet, true)
item.map((wallet, i) => (
this.renderItem(wallet, true, i)
)) :
item.map((wallet) => (
this.renderItem(wallet, false)
item.map((wallet, i) => (
this.renderItem(wallet, false, i)
))
}
</View>
))
}
{/* <FlatList
contentContainerStyle={{
paddingHorizontal: 20,
paddingBottom: 10,
}}
data={this.state.options}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => (
<TouchableOpacity
style={[styles.item, { borderBottomColor: Color.borderColor }]}
onPress={() => {
if (this.state.hasWallet) {
this.props.navigation.push(item.screen, {
wallet: this.props.navigation.state.params.wallet,
onGoBack: () => this.props.navigation.state.params.onGoBack()
})
} else {
this.props.navigation.push(item.screen)
}
}}>
<View style={{ flexDirection: 'row' }}>
<Icon
name={item.icon}
color={Color.primaryColor}
size={20}
solid
style={{ marginHorizontal: 10 }}
/>
<Text style={[Typography.body1]}>{item.title}</Text>
</View>
<Icon
name="chevron-right"
size={20}
color={Color.primaryColor}
enableRTL={true}
/>
</TouchableOpacity>
)}
/> */}
</View>
</View>

194
screens/wallet/WalletRetrait.js
View File

@ -1,35 +1,31 @@
import React, { Component } from 'react';
import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import LottieView from 'lottie-react-native';
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 OutlineTextInput from '../../components/OutlineTextInput';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
import { IlinkEmitter } from "../../utils/events";
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/es-us';
import 'moment/locale/fr';
import React, { Component } from 'react';
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
import { CreditCardInput } from "react-native-credit-card-input";
import { Typography, FontWeight } from '../../config/typography';
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, walletCommissionAmountReset, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import Dialog from "react-native-dialog";
import { ProgressDialog } from 'react-native-simple-dialogs'
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
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 I18n from 'react-native-i18n';
import { Appbar, Provider } from 'react-native-paper';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import CustomButton from '../../components/CustomButton';
import OutlineTextInput from '../../components/OutlineTextInput';
import style from '../../components/TextInput/styles';
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
import { IlinkEmitter } from "../../utils/events";
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
let moment = require('moment-timezone');
const CONTAINER_WIDTH = Dimensions.get("window").width;
@ -45,16 +41,9 @@ class WalletRetrait extends Component {
};
static navigationOptions = ({ navigation }) => {
return {
drawerLabel: () => null,
title: I18n.t('MAKE_WITHDRAWAL'),
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 23,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
header: null,
headerMode: 'none',
headerTitle: null,
}
};
@ -351,68 +340,87 @@ class WalletRetrait extends Component {
console.log("STATE", this.state);
const { error, resultGetCommission } = this.props;
return (
<View style={[styles.container]}>
<Provider>
<View style={{ flex: 1 }}>
{
(resultGetCommission !== null) &&
(typeof resultGetCommission.response !== 'undefined') &&
this.modalConfirmTransaction(resultGetCommission)
}
{this.isHasError()}
{this.commissionsLoading()}
{this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
<ScrollView style={{ padding: 20 }}>
<StatusBar
backgroundColor={Color.primaryDarkColor}
barStyle="light-content"
translucent={false}
/>
<View style={{ marginTop: 10 }}>
<CreditCardInput
validColor={this.state.creditCardInput.valid ? 'green' : ''}
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
onChange={this.onCreditCardChange}
labels={{
number: I18n.t('CARD_NUMBER_LABEL'),
expiry: I18n.t('CARD_EXPIRY_LABEL'),
cvc: I18n.t('CARD_CVC_LABEL'),
}} />
{
(this.state.displayCardError) &&
this.isCreditCardValid().map((item) => (
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
))
}
</View>
<View style={{ margin: 20 }}>
<OutlineTextInput
borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
value={this.state.montant}
keyboardType="numeric"
label={I18n.t('AMOUNT_LABEL')}
style={{ marginTop: 10 }}
placeholder={I18n.t('AMOUNT_LABEL')}
onChangeText={(montant) => {
this.setState({ montant });
this.isMontantValid();
}}
<Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
<Appbar.BackAction
onPress={() => { this.props.navigation.pop() }}
/>
{
(!this.isMontantValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.montant.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
}
<Text></Text>
</View>
<Appbar.Content
title={I18n.t('MAKE_WITHDRAWAL')}
/>
</Appbar.Header>
<View style={[styles.container]}>
<View style={{ margin: 10 }}>
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
{I18n.t('VALIDATE')}
</CustomButton>
{
(resultGetCommission !== null) &&
(typeof resultGetCommission.response !== 'undefined') &&
this.modalConfirmTransaction(resultGetCommission)
}
{this.isHasError()}
{this.commissionsLoading()}
{this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
<ScrollView style={{ padding: 20 }}>
<View style={{ marginTop: 10 }}>
<CreditCardInput
validColor={this.state.creditCardInput.valid ? 'green' : ''}
invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
onChange={this.onCreditCardChange}
labels={{
number: I18n.t('CARD_NUMBER_LABEL'),
expiry: I18n.t('CARD_EXPIRY_LABEL'),
cvc: I18n.t('CARD_CVC_LABEL'),
}} />
{
(this.state.displayCardError) &&
this.isCreditCardValid().map((item) => (
<Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
))
}
</View>
<View style={{ margin: 20 }}>
<OutlineTextInput
borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
value={this.state.montant}
keyboardType="numeric"
label={I18n.t('AMOUNT_LABEL')}
style={{ marginTop: 10 }}
placeholder={I18n.t('AMOUNT_LABEL')}
onChangeText={(montant) => {
this.setState({ montant });
this.isMontantValid();
}}
/>
{
(!this.isMontantValid().isValid) &&
<Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
}
{
(this.state.isSubmitClick && this.state.montant.length === 0) &&
<Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
}
<Text></Text>
</View>
<View style={{ margin: 10 }}>
<CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
{I18n.t('VALIDATE')}
</CustomButton>
</View>
</ScrollView>
</View>
</ScrollView>
</View>
</View>
</Provider>
)
}

112
utils/UtilsFunction.js
View File

@ -130,6 +130,7 @@ export const transactionHistoryUser = () => {
}
export const optionDepotScreen = {
type: 'DEPOT',
title: I18n.t('DEPOSIT'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
@ -157,6 +158,7 @@ export const optionDepotScreen = {
}
export const optionRetraitScreen = {
type: 'RETRAIT',
title: I18n.t('WITHDRAWAL'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
@ -169,6 +171,7 @@ export const optionRetraitScreen = {
}
export const optionRetraitUserScreen = {
type: 'RETRAIT_USER',
title: I18n.t('WITHDRAWAL'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
@ -191,6 +194,7 @@ export const optionRetraitUserScreen = {
}
export const optionDepotUserScreen = {
type: 'DEPOT_USER',
title: I18n.t('DEPOSIT'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
@ -218,6 +222,7 @@ export const optionDepotUserScreen = {
}
export const optionIdentificationScreen = {
type: 'IDENTIFICATION',
title: I18n.t('IDENTIFICATION'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
@ -234,70 +239,125 @@ export const optionIdentificationScreen = {
]
}
export const optionPaiementFacture = {
export const optionPaiementEauElectricite = {
title: I18n.t('PAIEMENT_FACTURE'),
subTitle: I18n.t('CHOOSE_OPTION'),
subTitle: I18n.t('CHOOSE_OPERATOR'),
options: [
{
icon: 'water',
title: 'Paiement eau/électricité',
screen: route.paiementOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 1',
},
{
icon: 'school',
title: 'Paiement école',
screen: route.paiementOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 2',
},
{
icon: 'phone-classic',
title: 'Paiement crédit téléphonique',
screen: route.paiementOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 3',
},
{
icon: 'television-classic',
title: 'Paiement abonnement TV',
screen: route.paiementOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 4',
},
{
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 5',
},
{
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur eau-électricité 6',
},
]
}
export const optionPaiementFactureSubScreen = {
title: I18n.t('PAIEMENT_FACTURE'),
subTitle: I18n.t('CHOOSE_OPTION'),
subTitle: I18n.t('CHOOSE_OPERATOR'),
options: [
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 1',
},
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 2',
},
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 3',
},
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 4',
},
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 5',
},
{
screen: '',
type: 'PAIEMENT_ECOLE',
screen: route.paiementFacture,
icon: 'http://test.ilink-app.com:8080/mobilebackend/datas/img/network/ilink-world-logo.png',
title: 'Opérateur 6',
},
]
}
}
export const optionPaiementFacture = {
type: 'FACTURE',
title: I18n.t('PAIEMENT_FACTURE'),
subTitle: I18n.t('CHOOSE_OPTION'),
options: [
{
type: 'FACTURE_WATER_ELECTRICITY',
icon: 'water',
title: 'Paiement eau/électricité',
screen: route.operateurOptionSelect,
subScreenOption: optionPaiementEauElectricite
},
{
type: 'FACTURE_SCHOOL',
icon: 'school',
title: 'Paiement école',
screen: route.operateurOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
},
{
type: 'FACTURE_PHONE',
icon: 'phone-classic',
title: 'Paiement crédit téléphonique',
screen: route.operateurOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
},
{
type: 'FACTURE_TV',
icon: 'television-classic',
title: 'Paiement abonnement TV',
screen: route.operateurOptionSelect,
subScreenOption: optionPaiementFactureSubScreen
},
]
}

1
utils/i18n/en.json
View File

@ -56,6 +56,7 @@
"THIS_FIELD_IS_REQUIRED": "This field is required",
"PLEASE_ENTER_THE_AMOUNT": "Please enter the amount",
"CHOOSE_OPTION": "Please choose an option",
"CHOOSE_OPERATOR": "Please choose an operator",
"EXPIRY_CARD_ERROR": "Date incorrect",
"CARD_NUMBER_ERROR": "Card number incorrect",
"AMOUNT_LABEL": "Amount",

1
utils/i18n/fr.json
View File

@ -65,6 +65,7 @@
"THIS_FIELD_IS_REQUIRED": "Ce champ est requis",
"PLEASE_ENTER_THE_AMOUNT": "Veuillez renseigne le montant",
"CHOOSE_OPTION": "Veuillez sélectionner une option",
"CHOOSE_OPERATOR": "Veuillez sélectionner un opérateur",
"DEPOSIT_DESCRIPTION": "Effectuer un dépôt",
"WITHDRAWAL": "Retrait",
"WITHDRAWAL_IN_CASH": "Retrait en cash",

13
yarn.lock
View File

@ -6482,6 +6482,11 @@ react-native-i18n@^2.0.15:
dependencies:
i18n-js "3.0.11"
react-native-image-crop-picker@^0.32.0:
version "0.32.0"
resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.32.0.tgz#c881d309fb0950d63fec40cfd0a5679b381f9a75"
integrity sha512-DRnUB3fsb/Vcg/SguGljx10PuJXaVt8XcmwgNaDZs77G2oLYiufkAlbJmHpdZT/GaYhzlRjF5aw6IPrTYxxMfw==
react-native-loader@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/react-native-loader/-/react-native-loader-1.2.1.tgz#e08589a89cfcd076595b9301c1d618f54da73329"
@ -6611,6 +6616,14 @@ react-native-phone-call@^1.0.9:
resolved "https://registry.yarnpkg.com/react-native-phone-call/-/react-native-phone-call-1.0.9.tgz#4468ec6f95856557fbff9bd69a0db04b54c35e1d"
integrity sha512-OPWYg8qeWNG/U4bWGMAKcQTH/ifqJnsvUPCH4lOkvWFHbQS3fbH5M8rFhXCzcfS0GVNzHhZX9ZByMM368TFAUQ==
react-native-popover-tooltip@^1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/react-native-popover-tooltip/-/react-native-popover-tooltip-1.1.4.tgz#f6f2121e6725e9da2c014a33b946162c197a4eb4"
integrity sha1-9vISHmcl6dosAUozuUYWLBl6TrQ=
dependencies:
invariant "^2.2.2"
prop-types "^15.6.0"
react-native-popup-dialog@^0.18.3:
version "0.18.3"
resolved "https://registry.yarnpkg.com/react-native-popup-dialog/-/react-native-popup-dialog-0.18.3.tgz#5d7a13fd7d9f817cf2121965a3b100a257201b67"