From 7d700f725d5451b8fccd45550c8180c7833b7c6c Mon Sep 17 00:00:00 2001 From: Brice Zele Date: Thu, 18 Jun 2020 06:38:10 +0100 Subject: [PATCH] Validation camera ok --- App.js | 10 +- components/OutlineTextInput/index.js | 4 +- package.json | 2 + route.json | 3 +- screens/home/Home.js | 4 +- .../identification/validateIdentification.js | 256 +++++++++++++-- screens/optionMenu/OptionsMenu.js | 2 +- ...tionSelect.js => OperateurOptionSelect.js} | 106 +++++-- screens/wallet/PaiementFacture.js | 113 +++++++ screens/wallet/WalletDepot.js | 300 +++++++++--------- screens/wallet/WalletDetail.js | 59 ++-- screens/wallet/WalletOptionSelect.js | 95 +++--- screens/wallet/WalletRetrait.js | 194 +++++------ utils/UtilsFunction.js | 112 +++++-- utils/i18n/en.json | 1 + utils/i18n/fr.json | 1 + yarn.lock | 13 + 17 files changed, 856 insertions(+), 419 deletions(-) rename screens/wallet/{PaiementOptionSelect.js => OperateurOptionSelect.js} (59%) create mode 100644 screens/wallet/PaiementFacture.js diff --git a/App.js b/App.js index d20fe66f..abddae2a 100644 --- a/App.js +++ b/App.js @@ -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, diff --git a/components/OutlineTextInput/index.js b/components/OutlineTextInput/index.js index 26ae9d60..ab55c981 100644 --- a/components/OutlineTextInput/index.js +++ b/components/OutlineTextInput/index.js @@ -18,7 +18,8 @@ export default function Index(props) { textAlignVertical, label, onSubmitEditing, - borderBottomColor + borderBottomColor, + icon } = props; return ( onFocus()} textAlignVertical={textAlignVertical} onSubmitEditing={onSubmitEditing} /> + {icon} ); diff --git a/package.json b/package.json index 4bfc3a74..066ea22e 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/route.json b/route.json index 79c0ba41..83856ae7 100644 --- a/route.json +++ b/route.json @@ -36,5 +36,6 @@ "createIdentification": "createIdentification", "createIdentificationUser": "createIdentificationUser", "validateIdentification": "validateIdentification", - "paiementOptionSelect": "paiementOptionSelect" + "operateurOptionSelect": "operateurOptionSelect", + "paiementFacture": "paiementFacture" } diff --git a/screens/home/Home.js b/screens/home/Home.js index ddb91a73..498764b1 100644 --- a/screens/home/Home.js +++ b/screens/home/Home.js @@ -1390,7 +1390,7 @@ class Home extends BaseScreen { translucent={true} /> {/* Start here to comment */} - {/* { + { (this.state.loadingDialog || this.props.loading) ? { } }]) }} - /> */} + /> {this.makeCardSearch()} {this.makeSlidingUp()} {this.makeDialogLoader()} diff --git a/screens/identification/validateIdentification.js b/screens/identification/validateIdentification.js index c63b01a1..c02ee238 100644 --- a/screens/identification/validateIdentification.js +++ b/screens/identification/validateIdentification.js @@ -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 ( + + + Image + + + + + + { + this.setState({ + displayImage: false + }); + }} /> + + ) + } + render() { console.log("STATE", this.state); const { showPickerDateNaissance } = this.state; return ( <> - + {this.state.displayImage && this.renderDialogImage()} {I18n.t('CREATE_IDENTIFICATION_TITLE')} - { this.nameanim = comp }}> @@ -164,7 +179,7 @@ export default class ValidateIdentification extends Component { /> } - + */} { this.nameanim = comp }}> + + + + + + { this.refs['toolTipVisibleUserPhoto'].toggle(); }} + activeOpacity={0.9}> + + + + + + + + + + } + 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} + /> + + + + { this.refs['toolTipVisibleCardFront'].toggle(); }} + activeOpacity={0.9}> + + + + + + + + + + } + 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} + /> + + + + { this.refs['toolTipVisibleCardBack'].toggle(); }} + activeOpacity={0.9}> + + + + + + + + + + } + 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} + /> + + + +