adminnistrateur
/
simba-mobile-cad4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
simba-mobile-cad4/app/screens/account/AddNetwork.js

704 lines
29 KiB
JavaScript
Raw Normal View History

first commit
2025-01-07 09:47:45 +00:00
import React, {Component} from 'react';
import {Alert, Image, Platform, ScrollView, StatusBar, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {Fumi} from 'react-native-textinput-effects';
import * as Animatable from 'react-native-animatable'
import I18n from 'react-native-i18n'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'
import {AssignAgentGeo, getCodeInformationForAddTaxe, readUser} from './../../webservice/AuthApi';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Button from 'apsl-react-native-button'
import {IlinkEmitter} from "../../utils/events";
import {Dropdown} from "react-native-material-dropdown-v2";
import isNil from 'lodash/isNil';
import isEqual from 'lodash/isEqual';
import {Color} from "../../config/Color";
import ImagePicker from "react-native-image-crop-picker";
import {FontWeight, Typography} from "../../config/typography";
import {ProgressDialog} from "react-native-simple-dialogs";
import axios from "axios";
import {uploadImage} from "../../webservice/IlinkConstants";
import Dialog from "react-native-dialog";
let theme = require('./../../utils/theme.json');
require('./../../utils/Translations')
const route = require('./../../route.json');
export default class AddNetwork extends Component {
static navigatorStyle = {
navBarBackgroundColor: theme.primaryDark,
navBarTextColor: 'white',
navBarButtonColor: 'white',
drawUnderStatusBar: false,
statusBarColor: theme.primaryDarkAdvanced,
statusBarTextColorScheme: 'light',
};
static navigationOptions = ({navigation}) => {
return {
drawerLabel: () => null,
title: I18n.t('AVIS_IMPOSITION') + ' N°' + navigation.getParam("item", "-").id_tax_notice,
headerTintColor: 'white',
headerStyle: {
backgroundColor: Color.primaryColor,
marginTop: 20,
color: 'white'
},
headerTitleStyle: {
color: "white"
},
}
};
updateLangue() {
this.props.navigation.setParams({name: I18n.t('CHANGE_INFORMATION')})
this.forceUpdate()
}
static options(passProps) {
return {
topBar: {
title: {
text: "",
},
backButton: {
visible: true,
color: "white"
},
buttonsRight: [],
buttonColor: "white",
background: {
color: theme.primaryDark
}
}
}
}
constructor(props) {
super(props);
this.state = this.generateState();
this.dataToSendTemp = new FormData();
this.user = null;
IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
readUser().then((user) => {
if (user) {
if (user !== undefined) {
if (user.category !== undefined) {
this.user = user;
}
}
}
});
}
generateState() {
return {
isLoading: false,
notifi: false,
isFirstStep: true,
id_network_tax: null,
tax_units_count: [],
units_per_tax_unit_count: [],
id_company_type: null,
identification_number: null,
trade_registry: null,
tabTaxe: [0],
number_of_days: [],
taxes_selected: [],
result: null,
image: null,
index: 0,
displayImage: false,
loadingUpload: false,
item: this.props.navigation.getParam("item", null),
password: null
}
}
createFormData = (photo) => {
this.dataToSendTemp.append("image", {
name: photo.path.split('/').pop(),
type: photo.mime,
uri:
Platform.OS === "android" ? photo.path : photo.path.replace("file://", "")
});
};
retreiveCodeInformation() {
const membre = this.state.validateCode;
return new Promise(async (resolve, reject) => {
let datas = await getCodeInformationForAddTaxe(membre, this.state.item.id_agent);
console.log("DATA", datas);
resolve(datas);
});
}
renderLoader = () => {
return (
<ProgressDialog
visible={this.state.loadingUpload}
title={I18n.t('LOADING')}
message={I18n.t('UPLOAD_PHOTO')}
/>
)
};
ckeckIfFieldIsOK(champ) {
return (isNil(champ) || isEqual(champ.length, 0));
}
uploadImage = () => {
axios({
url: `${uploadImage}`,
method: 'POST',
data: this.dataToSendTemp,
headers: {
'X-Localization': I18n.currentLocale(),
'Content-Type': 'multipart/form-data'
},
})
.then(response => {
console.log(response);
let taxes_selected = this.state.taxes_selected;
taxes_selected[this.state.index].image = response.data.response.filename;
this.setState({taxes_selected, loadingUpload: false});
})
.catch(error => {
console.log(error);
if (error.response)
console.log(error.response);
else if (error.request)
console.log(error.request);
else
console.log(error.message);
Alert.alert("", I18n.t('TITLE_ERROR_SURVENU'), [{
text: "Ok",
onPress: () => {
}
}]);
this.setState({loadingUpload: false});
});
};
renderDialogImage = () => {
return (
<Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
visible={this.state.displayImage}>
<Dialog.Title>{I18n.t('PREVISUALISATION')}</Dialog.Title>
<View>
<View style={{width: 50}}/>
<View style={{justifyContent: 'center', alignContent: 'center', alignItems: 'center'}}>
<Image source={{uri: this.state.image.path}} style={{
width: this.state.image.width, height: this.state.image.height, aspectRatio: 1,
resizeMode: 'contain'
}}/>
</View>
<View style={{width: 50}}/>
</View>
<Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
this.setState({
displayImage: false,
loadingUpload: true
});
this.uploadImage();
}}/>
</Dialog.Container>
)
}
renderTaxesDropdown = (index) => {
return (
<>
<Animatable.View key={index}>
<View
style={{
marginTop: 20,
flexDirection: "row",
paddingRight: 20,
paddingLeft: 20,
}}>
<View style={{
width: responsiveWidth(90),
borderRadius: 10,
alignSelf: "center",
backgroundColor: 'white'
}}>
<Dropdown
label={I18n.t('TAXES')}
data={this.state.result.taxes}
useNativeDriver={true}
valueExtractor={(value) => {
return value
}}
onChangeText={(value, i, data) => {
let taxes_seleted = this.state.taxes_selected;
if (index === 0) {
taxes_seleted = new Array();
taxes_seleted[index] = value;
} else
taxes_seleted[index] = value;
this.setState({taxes_selected: taxes_seleted}, () => {
console.log("Taxes", this.state.taxes_selected);
});
}}
labelExtractor={(value) => {
return value.name
}}
/>
</View>
{
this.state.result.network.has_many_taxes === "1" &&
<View>
<TouchableOpacity
style={[styles.contain], {
backgroundColor: Color.accentColor,
alignItems: "center",
justifyContent: "center",
position: "absolute",
width: 25,
bottom: 0,
zIndex: 10,
left: -10,
height: 25,
borderRadius: 11}}
onPress={() => {
let tabTaxe = this.state.tabTaxe;
if (index === 0) {
let lastElement = this.state.tabTaxe[this.state.tabTaxe.length - 1];
tabTaxe.push(lastElement++);
this.setState({tabTaxe});
} else {
tabTaxe = tabTaxe.filter((element, i) => index !== i);
this.setState({tabTaxe});
}
}}
activeOpacity={0.9}>
<View>
<View>
<Icon name={index > 0 ? 'minus' : 'plus'} color={Color.whiteColor}
size={20}/>
</View>
</View>
</TouchableOpacity>
</View>
}
</View>
</Animatable.View>
{
!isNil(this.state.taxes_selected[index]) ?
this.state.taxes_selected[index].measurement_unit !== "forfait" &&
<>
<Animatable.View>
<Fumi iconClass={FontAwesomeIcon}
iconName={'check-circle'}
label={this.state.taxes_selected[index].labels[0]}
iconColor={'#f95a25'}
keyboardType="decimal-pad"
iconSize={20}
style={styles.input}
onChangeText={(value) => {
let tax_units_count = this.state.tax_units_count;
if (index === 0) {
tax_units_count = [];
tax_units_count[0] = value;
} else
tax_units_count[index] = value;
this.setState({tax_units_count: tax_units_count});
}}
>
</Fumi>
</Animatable.View>
{
this.state.taxes_selected[index].labels.length === 2 &&
<Animatable.View>
<Fumi iconClass={FontAwesomeIcon}
iconName={'check'}
label={isNil(this.state.taxes_selected[index].labels[1]) ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT') : this.state.taxes_selected[index].labels[1]}
iconColor={'#f95a25'}
keyboardType="decimal-pad"
iconSize={20}
style={styles.input}
onChangeText={(value) => {
let units_per_tax_unit_count = this.state.units_per_tax_unit_count;
if (index === 0) {
units_per_tax_unit_count = [];
units_per_tax_unit_count[0] = value;
} else
units_per_tax_unit_count[index] = value;
this.setState({units_per_tax_unit_count: units_per_tax_unit_count});
}}
>
</Fumi>
</Animatable.View>
}
</> :
null
}
{
!isNil(this.state.taxes_selected[index]) ?
this.state.taxes_selected[index].billing_period === 'jour' &&
(<Animatable.View>
<Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
label={I18n.t('NUMBER_OF_DAYS')}
iconColor={'#f95a25'}
iconSize={20}
keyboardType='numeric'
onChangeText={(value) => {
let {number_of_days} = this.state.number_of_days;
if (index === 0) {
number_of_days = [];
number_of_days[0] = value;
} else
number_of_days[index] = value;
this.setState({number_of_days});
}}
style={styles.input}
>
</Fumi>
</Animatable.View>) : null
}
{!isNil(this.state.taxes_selected[index]) ?
this.state.taxes_selected[index].has_image_capture === "1" &&
<View style={[styles.contentPicker]}>
<TouchableOpacity
style={[styles.contain]}
onPress={() => {
ImagePicker.openCamera({
width: 400,
height: 281,
cropping: true,
useFrontCamera: false
}).then(image => {
this.createFormData(image);
this.setState({image, displayImage: true, index});
})
}}
activeOpacity={0.9}>
<View style={[styles.contcontainerCenterentLeft]}>
<View>
<Icon name='image' 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>
<Text
style={[Typography.footnote, FontWeight.semibold], {color: Color.whiteColor}}>{I18n.t('IMAGE_TAKE')}</Text>
</View> : null
}
</>
)
}
render() {
return (
<View style={style.container}>
<StatusBar
backgroundColor="#00000030"
barStyle="light-content"
translucent={true}
/>
{this.state.displayImage && this.renderDialogImage()}
{this.state.loadingUpload && this.renderLoader()}
<ScrollView style={{flex: 1, paddingTop: 30}}>
<View style={style.appContainer}>
Update images and adjust styles across multiple screens
2025-02-21 10:00:37 +00:00
<Image source={require('../../assets/img/icon3.png')}
style={{width: responsiveWidth(90), resizeMode: "contain",
height: responsiveHeight(16), // Delete this line if the image size sucks and change the width and the height of icon3.png to 257 x 112
}}/>
first commit
2025-01-07 09:47:45 +00:00
</View>
<Text style={style.title}>{I18n.t('ADD_NETWORK')}</Text>
{
this.state.isFirstStep ?
<>
<Animatable.View>
<Fumi iconClass={FontAwesomeIcon}
iconName={"code"}
style={style.input}
inputStyle={{color: 'black'}}
value={this.state.validateCode}
label={I18n.t('SPONSOR_CODE')}
onChangeText={(text) => this.setState({validateCode: text})}
style={style.input}/>
</Animatable.View>
</> :
<>
{this.renderTaxesDropdown(0)}
{
this.state.tabTaxe.map((element, index) => (
index > 0 &&
this.renderTaxesDropdown(index)
))
}
<Animatable.View ref={(comp) => {
this.passwordAnim = comp
}}>
<Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
label={I18n.t('PASSWORD')}
iconColor={'#f95a25'}
iconSize={20}
secureTextEntry={true}
value={this.state.password}
onChangeText={(password) => {
this.setState({password})
}}
style={styles.input}
>
</Fumi>
</Animatable.View>
</>
}
<Button style={style.btnStyle} textStyle={style.btnTextStyle}
isLoading={this.state.isLoading} onPress={() => {
if (this.state.isFirstStep) {
this.setState({isLoading: true})
this.retreiveCodeInformation().then((result) => {
console.log(result);
if (result.error !== undefined) {
switch (result.error) {
default:
Alert.alert(I18n.t("ERROR_LABEL"), result.error_msg
, [{
text: 'OK', onPress: () => {
//this.props.navigation.goBack();
}
}], {cancelable: false});
}
this.setState({isLoading: false});
} else
this.setState({isLoading: false, taxes: result.taxes, isFirstStep: false, result});
}).catch((error) => {
console.warn(error);
this.setState({isLoading: false});
});
} else {
feat: Implement internationalization for placeholder and labels in login screens - Added I18n support for the placeholder in FilteredList component. - Updated createAccount component to use I18n for hierarchical and tax code descriptions. - Modified createUserStep2 to change town ID and added console logs for debugging. - Updated English and French translation files to reflect new labels and descriptions. - Changed geocoding URL in MapService to point to the correct endpoint and added debug logs.
2025-04-25 09:51:55 +00:00
console.log("ICI===>")
first commit
2025-01-07 09:47:45 +00:00
if (this.ckeckIfFieldIsOK(this.state.password))
this.passwordAnim.shake(800);
else
this.validateNetwork();
}
}}
>{this.state.isFirstStep ? I18n.t('NEXT') : I18n.t('VALIDATE')}</Button>
</ScrollView>
</View>)
}
async validateNetwork() {
const {validateCode, isLoading, enterPhone, password, item} = this.state;
if (validateCode !== undefined && validateCode !== null) {
this.setState({isLoading: true});
let taxes_to_send = [];
for (let i = 0; i < this.state.tabTaxe.length; i++) {
if (this.state.taxes_selected[i].hasOwnProperty("id")) {
if (this.state.taxes_selected[i].has_image_capture === "1") {
taxes_to_send.push({
has_image_capture: this.state.taxes_selected[i].has_image_capture,
image: this.state.taxes_selected[i].image,
id_network_tax: this.state.taxes_selected[i].id,
tax_units_count: isNil(this.state.tax_units_count[i]) ? null : this.state.tax_units_count[i],
units_per_tax_unit_count: isNil(this.state.units_per_tax_unit_count[i]) ? null : this.state.units_per_tax_unit_count[i],
number_of_days: isNil(this.state.number_of_days[i]) ? null : this.state.number_of_days[i],
});
} else {
taxes_to_send.push({
has_image_capture: this.state.taxes_selected[i].has_image_capture,
id_network_tax: this.state.taxes_selected[i].id,
tax_units_count: isNil(this.state.tax_units_count[i]) ? null : this.state.tax_units_count[i],
units_per_tax_unit_count: isNil(this.state.units_per_tax_unit_count[i]) ? null : this.state.units_per_tax_unit_count[i],
number_of_days: isNil(this.state.number_of_days[i]) ? null : this.state.number_of_days[i],
});
}
}
}
let res = await AssignAgentGeo(validateCode, enterPhone, taxes_to_send, item.id_agent, password, item.id);
this.setState({isLoading: false});
if (res) {
if (res['success'] !== undefined) {
Alert.alert(
I18n.t('ADD_SUCCES'),
I18n.t('ADD_SUCCESS_TEXT')
, [
{
text: 'OK', onPress: () => {
this.setState({validateCode: "", enterPhone: ""});
this.props.navigation.popToTop();
}
}
])
} else {
if (res['error']) {
let error = res["error"];
Alert.alert("Une erreur est survenu",
res["error_msg"]
, [{
text: "Ok", onPress: () => {
}
}]);
} else {
if (res['error']) {
let error = res["error"];
Alert.alert("Une erreur est survenu",
"Verifier que les champs sont bien rempli"
, [{
text: "Ok", onPress: () => {
}
}]);
}
}
}
}
}
}
}
const style = StyleSheet.create({
btnHelpText: {
color: 'white',
fontWeight: 'bold'
},
btnHelp: {
width: responsiveWidth(10),
marginTop: responsiveHeight(10),
alignSelf: 'flex-end',
marginRight: 20,
borderColor: 'transparent',
backgroundColor: theme.primaryDark
},
btnTextStyle: {
color: "white",
fontWeight: 'bold',
},
btnStyle: {
alignSelf: 'center',
width: responsiveWidth(95),
marginTop: 20,
borderColor: 'transparent',
backgroundColor: theme.primaryDarkAdvanced,
height: responsiveHeight(8)
},
appContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
container: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
flex: 1,
width: responsiveWidth(100),
height: responsiveHeight(100),
backgroundColor: theme.primary
},
input: {
height: 60,
width: responsiveWidth(90),
marginTop: responsiveHeight(2),
marginLeft: responsiveWidth(5),
marginRight: responsiveWidth(5),
borderRadius: 5,
},
logo: {
width: 128,
height: 128
},
nameApp: {
fontSize: 27,
fontWeight: 'bold',
color: 'white'
},
title: {
fontSize: 22,
fontWeight: 'bold',
margin: 10,
color: 'white'
},
subtitle: {
fontSize: 20,
margin: 10,
color: 'white'
}
});
const styles = StyleSheet.create({
rowContainer: {
height: 52,
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'center',
},
iconContainer: {
marginRight: 16,
},
map: {
height: 200,
marginRight: responsiveWidth(5),
marginLeft: responsiveWidth(5),
marginVertical: 10,
},
btnvalide: {
marginTop: 20,
marginLeft: 20,
marginRight: 20,
borderColor: 'transparent',
backgroundColor: theme.accentLight,
height: 52
},
input: {
height: 60,
marginTop: responsiveHeight(2),
marginLeft: responsiveWidth(5),
marginRight: responsiveWidth(5),
borderRadius: 5,
},
contentPicker: {
padding: 10,
borderRadius: 8,
flex: 1,
alignItems: "center"
},
contain: {flexDirection: "row"},
thumb: {
borderRadius: 30,
marginRight: 10
},
point: {
width: 25,
height: 25,
borderRadius: 11,
alignItems: "center",
justifyContent: "center",
position: "absolute",
right: 9,
bottom: 0
},
})