1150 lines
44 KiB
JavaScript
1150 lines
44 KiB
JavaScript
import * as React from 'react';
|
|
import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
|
|
import { Avatar } from 'react-native-elements';
|
|
import { connect } from "react-redux";
|
|
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
|
|
import CustomHeader from '../../../components/header.js';
|
|
import Assets from '../../../components/assets.manager.js';
|
|
import Theme from '../../../components/theme.style.js';
|
|
import Elements from '../../../components/elements.js';
|
|
import ImagePicker from 'react-native-image-picker';
|
|
import moment from 'moment';
|
|
import DB from '../../../components/storage/';
|
|
import REQUEST from '../../../components/api/';
|
|
import RNFETCHBLOB from '../../../components/api/file.manager';
|
|
import { ContactOptions, ContactOptionsWithParams } from '../../../components/contact.action';
|
|
import Utils from './utils';
|
|
import CustomSafeArea from '../../../components/safeArea.component';
|
|
|
|
|
|
class EditProfile extends React.PureComponent {
|
|
|
|
constructor(props) {
|
|
super(props)
|
|
}
|
|
|
|
state = {
|
|
loading: false,
|
|
userProfile: null,
|
|
focused: false,
|
|
editprofileselect: false,
|
|
customerserviceselect: false,
|
|
currentFocus: null,
|
|
opendialog: false,
|
|
currentDialog: null,
|
|
currentphoto: null,
|
|
newphoto: null,
|
|
newmobile: "",
|
|
newemail: null,
|
|
newaddress: null,
|
|
newcity: null,
|
|
vehicleType: null,
|
|
fuelType: null,
|
|
maritalStatus: null,
|
|
gender: null,
|
|
is_deleted: false,
|
|
errors: {},
|
|
deleted: false
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.setState({ loading: false, userProfile: this.props.route.params.data })
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
|
|
}
|
|
|
|
onInputFocus = (index) => {
|
|
this.setState({ focused: true, currentFocus: index })
|
|
}
|
|
|
|
onSelectPress = (index) => {
|
|
this.setState({ opendialog: true, currentDialog: index })
|
|
}
|
|
|
|
getFT = (type) => {
|
|
let types = Assets.fueltypes
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
getVT = (type) => {
|
|
let types = Assets.vehicletypes
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
getMS = (type) => {
|
|
let types = Assets.civilstatus
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
getG = (type) => {
|
|
let types = Assets.gender
|
|
for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
return ""
|
|
}
|
|
|
|
getCN = () => {
|
|
|
|
}
|
|
|
|
onDeletePhoto = () => {
|
|
this.setState({ is_deleted: true, currentphoto: Assets.logo.profileHolder })
|
|
}
|
|
|
|
formatBytes = (bytes, decimals = 2) => {
|
|
if (bytes === 0) return '0 Bytes';
|
|
|
|
const k = 1024;
|
|
const dm = decimals < 0 ? 0 : decimals;
|
|
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
|
|
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
|
|
return { stringFormat: parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i], decimalFormat: parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizeFormat: sizes[i] };
|
|
}
|
|
|
|
onEditPhoto = () => {
|
|
let options = {
|
|
mediaType: 'photo',
|
|
maxHeight: 1500,
|
|
maxWidth: 1500,
|
|
quality: 0.75
|
|
}
|
|
ImagePicker.launchImageLibrary(options, (response) => {
|
|
let filesize = this.formatBytes(response.fileSize)
|
|
console.log(filesize.stringFormat.includes('KB'))
|
|
if(!filesize.stringFormat.includes('KB') && !filesize.stringFormat.includes('Bytes')) {
|
|
Alert.alert("Error", "Image size too large.")
|
|
return
|
|
}
|
|
if(!response.didCancel){
|
|
if(this.state.is_deleted){
|
|
this.setState({ is_deleted: false, currentphoto: null })
|
|
}
|
|
this.setState({ newphoto: response })
|
|
}
|
|
})
|
|
}
|
|
|
|
validateEmail = () => {
|
|
let regEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
|
|
return regEx.test(this.state.email)
|
|
}
|
|
|
|
FormValidate = async () => {
|
|
let res = {}
|
|
this.setState({ loading: true })
|
|
if(this.state.newemail == ""){
|
|
res = Object.assign(this.state.errors, {email: ["This field is required"]})
|
|
}
|
|
if(this.state.newaddress == "" || this.state.newaddress == null && this.state.userProfile.address == ""){
|
|
res = Object.assign(this.state.errors, {address: ["This field is required"]})
|
|
}
|
|
if(!this.state.vehicleType && this.state.userProfile.vo_code == "0"){
|
|
res = Object.assign(this.state.errors, {vehicleType: ["This field is required"]})
|
|
}
|
|
if(!this.state.fuelType && this.state.userProfile.fueltype_code == "0"){
|
|
res = Object.assign(this.state.errors, {fuelType : ["This field is required"]})
|
|
}
|
|
this.setState({ errors: res, loading: false })
|
|
return Object.keys(this.state.errors).length > 0 ? false : true
|
|
}
|
|
|
|
Body = function() {
|
|
return {
|
|
image: this.state.newphoto ? this.state.newphoto.uri : null,
|
|
mobile: this.state.newmobile,
|
|
email: this.state.newemail,
|
|
address: this.state.newaddress,
|
|
city: this.state.newcity,
|
|
vo_code: this.state.vehicleType ? this.state.vehicleType.value : null,
|
|
fueltype_code: this.state.fuelType ? this.state.fuelType.value : null,
|
|
civilstatus_code: this.state.maritalStatus ? this.state.maritalStatus.value : null,
|
|
gender_code: this.state.gender ? this.state.gender.value : null,
|
|
is_deleted: this.state.is_deleted
|
|
}
|
|
}
|
|
|
|
fetchProfileBlob = async (successCallback, errorCallback) => {
|
|
let SESSION = await DB.session()
|
|
let params = {
|
|
newphoto: this.state.newphoto,
|
|
userProfile: this.state.userProfile,
|
|
newmobile: this.state.newmobile,
|
|
newemail: this.state.newemail,
|
|
newaddress: this.state.newaddress,
|
|
newcity: this.state.newcity,
|
|
vehicleType: this.state.vehicleType,
|
|
fuelType: this.state.fuelType,
|
|
maritalStatus: this.state.maritalStatus,
|
|
gender: this.state.gender,
|
|
is_deleted: this.state.is_deleted
|
|
}
|
|
RNFETCHBLOB("update_profile_no_otp", "POST",
|
|
{Authorization: SESSION.token}, {}, Utils.blobBody(params),
|
|
(res) => {
|
|
if(res.status == 1) {
|
|
this.updateProfileInBackground(onSuccess => successCallback(onSuccess), onError => errorCallback(onError))
|
|
} else {
|
|
Utils.responseHandler(res, () => {
|
|
successCallback(res)
|
|
}, (errors) => {
|
|
console.log(errors)
|
|
errorCallback(errors)
|
|
})
|
|
}
|
|
}, (err) => {
|
|
errorCallback(err)
|
|
})
|
|
}
|
|
|
|
updateProfileBlob = async (successCallback, errorCallback) => {
|
|
let SESSION = await DB.session()
|
|
let params = {
|
|
userProfile: this.state.userProfile,
|
|
newmobile: this.state.newmobile,
|
|
newemail: this.state.newemail,
|
|
newaddress: this.state.newaddress,
|
|
newcity: this.state.newcity,
|
|
vehicleType: this.state.vehicleType,
|
|
fuelType: this.state.fuelType,
|
|
maritalStatus: this.state.maritalStatus,
|
|
gender: this.state.gender,
|
|
is_deleted: this.state.is_deleted
|
|
}
|
|
await REQUEST("update_profile_no_otp", "post", {
|
|
Authorization: SESSION.token,
|
|
"Content-Type": "multipart/form-data",
|
|
}, {}, Utils.formData(params),
|
|
(res) => {
|
|
if(res.status == 1) {
|
|
this.updateProfileInBackground(onSuccess => successCallback(onSuccess), onError => errorCallback(onError))
|
|
} else {
|
|
Utils.responseHandler(res, () => {
|
|
successCallback(res)
|
|
}, (errors) => {
|
|
console.log(errors)
|
|
errorCallback(errors)
|
|
})
|
|
}
|
|
}, (error) => {
|
|
errorCallback(error)
|
|
})
|
|
}
|
|
|
|
responseHandler = (res, responseCallback) => {
|
|
if(res.status == 1){
|
|
setTimeout(() => {
|
|
Alert.alert(
|
|
"Success",
|
|
'\nYour profile is successfully updated\n',
|
|
[{
|
|
text: 'OK', onPress: () => {
|
|
responseCallback()
|
|
}
|
|
}]
|
|
);
|
|
}, 700)
|
|
} else {
|
|
setTimeout(() => {
|
|
Alert.alert("Error", res?.email[0]);
|
|
}, 700)
|
|
}
|
|
}
|
|
|
|
updateProfileInBackground = async (successCallback, errorCallback) => {
|
|
const SESSION = await DB.session()
|
|
try{
|
|
this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number }).then(res => {
|
|
DB.updateProfile(res, () => {
|
|
successCallback(res)
|
|
}, (error) => {
|
|
errorCallback(error)
|
|
})
|
|
})
|
|
.catch(error => this.setState({ loading: false }))
|
|
} catch(error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
SaveNoOtp = async () => {
|
|
this.setState({ loading: true })
|
|
if(this.state.newphoto) {
|
|
this.fetchProfileBlob(success => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 0) {
|
|
this.setState({ errors: success })
|
|
} else {
|
|
this.responseHandler(success, handler => {
|
|
this.props.route.params.onGoBack(success.data)
|
|
this.props.navigation.goBack()
|
|
})
|
|
}
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
if(this.state.newphoto) Alert.alert("Error", "Failed to upload image")
|
|
}, 300)
|
|
})
|
|
} else {
|
|
this.setState({ loading: true })
|
|
this.updateProfileBlob(success => {
|
|
this.setState({ loading: false })
|
|
if(success.status == 0) {
|
|
this.setState({ errors: success })
|
|
} else {
|
|
this.responseHandler(success, handler => {
|
|
this.props.route.params.onGoBack(success.data)
|
|
this.props.navigation.goBack()
|
|
})
|
|
}
|
|
}, error => {
|
|
this.setState({ loading: false })
|
|
setTimeout(() => {
|
|
if(this.state.newphoto) Alert.alert("Error", "Failed to upload image")
|
|
}, 300)
|
|
})
|
|
}
|
|
}
|
|
|
|
SaveWithOtp = () => {
|
|
this.props.navigation.navigate("AccountSendOtp", {
|
|
data: {
|
|
lcard_uuid: this.state.userProfile.lcard_uuid,
|
|
mobile_number: this.state.newmobile.replace("+", "")
|
|
},
|
|
type: 'edit',
|
|
callback: (res) => {
|
|
if(res == "valid") this.SaveNoOtp()
|
|
},
|
|
})
|
|
}
|
|
|
|
onSubmit = () => {
|
|
this.setState({ focused: false })
|
|
if(this.hasChanges()){
|
|
Alert.alert(
|
|
"Update Profile",
|
|
'\nAre you sure you want to save changes to your profile?\n',
|
|
[{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},{
|
|
text: 'OK', onPress: async () => {
|
|
let validation = await this.FormValidate()
|
|
if(!validation) return
|
|
if(this.state.newmobile != "" && this.state.newmobile.replace("+", "") != this.state.userProfile.mobile){
|
|
this.SaveWithOtp()
|
|
}else{
|
|
this.SaveNoOtp()
|
|
}
|
|
}
|
|
}],
|
|
{cancelable: true}
|
|
);
|
|
}else{
|
|
this.props.navigation.goBack()
|
|
}
|
|
}
|
|
|
|
hasChanges = () => {
|
|
let values = Object.values(this.Body())
|
|
for(var x=0;x<values.length;x++){
|
|
if(values[x] || values[x] == "") return true
|
|
}
|
|
return false
|
|
}
|
|
|
|
handleUpdatePhotoOptions = () => {
|
|
Elements.ActionOption({
|
|
options: ['Edit Photo', 'Delete Photo', 'Cancel'],
|
|
functions: [{
|
|
execute: () => this.onEditPhoto()
|
|
}, {
|
|
execute: () => this.onDeletePhoto()
|
|
}]
|
|
})
|
|
}
|
|
|
|
renderProfilePhoto = () => {
|
|
if(this.state.currentphoto) return Assets.logo.profileHolder
|
|
else if(!this.state.currentphoto && this.state.newphoto || this.state.newphoto) return {uri: this.state.newphoto.uri}
|
|
else if(!this.state.currentphoto && !this.state.newphoto && this.state.userProfile && this.state.userProfile.photo) return {uri: this.state.userProfile.photo}
|
|
else return Assets.logo.profileHolder
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<CustomSafeArea>
|
|
<Elements.loaderView
|
|
title="Updating Profile"
|
|
message="Please wait..."
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
backgroundColor={this.props.app_theme?.theme.colors.border}
|
|
color={this.props.app_theme?.theme.colors.text}
|
|
visible={this.state.loading} />
|
|
<Elements.checkboxdialog
|
|
title="Vehicle Type"
|
|
selected={this.state.vehicleType ? this.state.vehicleType.value : this.state.userProfile ? this.state.userProfile.vo_code : 0}
|
|
shown={this.state.opendialog && this.state.currentDialog == 1 ? true : false}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
|
|
onSelect={(value, string) => {
|
|
this.setState({ vehicleType: { value: value, string: string }, opendialog: !this.state.opendialog })
|
|
}}
|
|
items={Assets.vehicletypes}
|
|
/>
|
|
<Elements.checkboxdialog
|
|
title="Fuel Type"
|
|
selected={this.state.fuelType ? this.state.fuelType.value : this.state.userProfile ? this.state.userProfile.fueltype_code : 0}
|
|
shown={this.state.opendialog && this.state.currentDialog == 2 ? true : false}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
|
|
onSelect={(value, string) => {
|
|
this.setState({ fuelType: { value: value, string: string }, opendialog: !this.state.opendialog })
|
|
}}
|
|
items={Assets.fueltypes}
|
|
/>
|
|
<Elements.checkboxdialog
|
|
title="Marital Status"
|
|
selected={this.state.maritalStatus ? this.state.maritalStatus.value : this.state.userProfile ? this.state.userProfile.civilstatus_code : 0}
|
|
shown={this.state.opendialog && this.state.currentDialog == 3 ? true : false}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
|
|
onSelect={(value, string) => {
|
|
this.setState({ maritalStatus: { value: value, string: string }, opendialog: !this.state.opendialog })
|
|
}}
|
|
items={Assets.civilstatus}
|
|
/>
|
|
<Elements.checkboxdialog
|
|
title="Gender"
|
|
selected={this.state.gender ? this.state.gender.value : this.state.userProfile ? this.state.userProfile.gender_code : 0}
|
|
shown={this.state.opendialog && this.state.currentDialog == 4 ? true : false}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
modalBackgroundColor={this.props.app_theme?.theme.colors.border}
|
|
onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
|
|
onSelect={(value, string) => {
|
|
this.setState({ gender: { value: value, string: string }, opendialog: !this.state.opendialog })
|
|
}}
|
|
items={Assets.gender}
|
|
/>
|
|
|
|
<CustomHeader
|
|
title="Edit Profile"
|
|
menu={false}
|
|
backscreen="MyProfile"
|
|
back={true}
|
|
onBackPress={() => {
|
|
if(this.hasChanges()){
|
|
Alert.alert(
|
|
null,
|
|
'You have an unsaved profile information, are you sure you want to navigate back?\n',
|
|
[{
|
|
text: 'Cancel',
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: 'OK', onPress: () => this.props.navigation.navigate("MyProfile")
|
|
},
|
|
],
|
|
{cancelable: true}
|
|
);
|
|
}else{
|
|
this.props.navigation.navigate("MyProfile")
|
|
}
|
|
}}
|
|
navigation={this.props.navigation}
|
|
/>
|
|
|
|
<ScrollView style={{flex: 1}}>
|
|
<View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
<View style={{flex: 1}}>
|
|
<Avatar rounded size="large" source={this.renderProfilePhoto()} />
|
|
</View>
|
|
<View style={{flex: 2.5, justifyContent: 'center'}}>
|
|
{this.state.userProfile && this.state.userProfile.photo && !this.state.is_deleted || this.state.userProfile && !this.state.userProfile.photo && this.state.newphoto && !this.state.is_deleted ?
|
|
<TouchableOpacity onPress={() => this.handleUpdatePhotoOptions()}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Edit Photo</Text>
|
|
</TouchableOpacity> :
|
|
<TouchableOpacity onPress={() => this.onEditPhoto()}>
|
|
<Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Add Photo</Text>
|
|
</TouchableOpacity>
|
|
}
|
|
</View>
|
|
</View>
|
|
<View style={{flex: 1, width: '100%', padding: 5}}>
|
|
<View>
|
|
<Elements.custominput
|
|
type="input"
|
|
title="First Name"
|
|
placeholder={this.state.userProfile ? this.state.userProfile.firstname : ''}
|
|
placeholderColor='gray'
|
|
disabled
|
|
onChange={null}
|
|
bottomOption={true}
|
|
onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })}
|
|
error={"This field is required"} />
|
|
|
|
<Elements.custominput
|
|
type="input"
|
|
title="Last Name"
|
|
placeholder={this.state.userProfile ? this.state.userProfile.lastname : ''}
|
|
placeholderColor='gray'
|
|
disabled
|
|
onChange={null}
|
|
bottomOption={true}
|
|
onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })}
|
|
error={"This field is required"} />
|
|
|
|
<Elements.custominput
|
|
type="input"
|
|
title="Birthday"
|
|
placeholder={this.state.userProfile ? new moment(new Date(this.state.userProfile.birthdate)).format("DD MMM YYYY") : ''}
|
|
placeholderColor='gray'
|
|
disabled
|
|
onChange={null}
|
|
bottomOption={true}
|
|
onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })}
|
|
error={"This field is required"} />
|
|
|
|
<Elements.custominput
|
|
type="input"
|
|
title="Mobile Number"
|
|
keyboardType="numeric"
|
|
maxLength={13}
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.newmobile ? this.state.newmobile.length <= 2 ? '+63' : this.state.newmobile : this.state.userProfile ? "+" + this.state.userProfile.mobile : ''}
|
|
placeholder=""
|
|
onChangeText={(value) => {
|
|
this.setState({ newmobile: value })
|
|
}}
|
|
focused={this.state.focused && this.state.currentFocus == 3 ? true : false}
|
|
onFocus={() => this.onInputFocus(3)}
|
|
error={"This field is required"} />
|
|
|
|
<Elements.custominput
|
|
type="input"
|
|
title="Email Address"
|
|
value={this.state.newemail ? this.state.newemail : this.state.userProfile && this.state.newemail != '' ? this.state.userProfile.email : ''}
|
|
bottomText="your@email.com"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
focused={this.state.focused && this.state.currentFocus == 4 || this.state.errors && this.state.errors.email ? true : false}
|
|
onFocus={() => this.onInputFocus(4)}
|
|
onChangeText={(value) => {
|
|
this.setState({ newemail: value })
|
|
delete this.state.errors["email"]
|
|
}}
|
|
hasError={this.state.errors && this.state.errors.email ? true : false}
|
|
errorMessage={this.state.errors && this.state.errors.email ? this.state.errors?.email[0] : "Invalid email"}
|
|
/>
|
|
|
|
<Elements.custominput
|
|
type="input"
|
|
title="Address"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.newaddress ? this.state.newaddress : this.state.userProfile && this.state.newaddress != '' ? this.state.userProfile.address : ''}
|
|
focused={this.state.focused && this.state.currentFocus == 5 || this.state.errors && this.state.errors.address ? true : false}
|
|
onFocus={() => this.onInputFocus(5)}
|
|
onChangeText={(value) => {
|
|
this.setState({ newaddress: value })
|
|
delete this.state.errors["address"]
|
|
}}
|
|
hasError={this.state.errors && this.state.errors.address ? true : false}
|
|
errorMessage={this.state.errors && this.state.errors.address ? this.state.errors?.address[0] : "Invalid address"}
|
|
/>
|
|
|
|
<Elements.custominput
|
|
type="select"
|
|
title="Vehicle Type"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.vehicleType ? this.state.vehicleType.string : this.state.userProfile ? this.getVT(this.state.userProfile.vo_code) : 'Select'}
|
|
focused={this.state.focused && this.state.currentFocus == 7 ? true : false}
|
|
onPress={() => {
|
|
this.onInputFocus(7)
|
|
this.onSelectPress(1)
|
|
delete this.state.errors["vehicleType"]
|
|
}}
|
|
hasError={this.state.errors && this.state.errors.vehicleType ? true : false}
|
|
errorMessage={this.state.errors && this.state.errors.vehicleType ? this.state.errors?.vehicleType[0] : "Invalid vehicle type"}
|
|
/>
|
|
|
|
<Elements.custominput
|
|
type="select"
|
|
title="Fuel Type"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.fuelType ? this.state.fuelType.string : this.state.userProfile ? this.getFT(this.state.userProfile.fueltype_code) : 'Select'}
|
|
focused={this.state.focused && this.state.currentFocus == 8 ? true : false}
|
|
onPress={() => {
|
|
this.onInputFocus(8)
|
|
this.onSelectPress(2)
|
|
delete this.state.errors["fuelType"]
|
|
}}
|
|
hasError={this.state.errors && this.state.errors.fuelType ? true : false}
|
|
errorMessage={this.state.errors && this.state.errors.fuelType ? this.state.errors?.fuelType[0] : "Invalid fuel type"}
|
|
/>
|
|
|
|
<Elements.custominput
|
|
type="select"
|
|
title="Marital Status"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.maritalStatus ? this.state.maritalStatus.string : this.state.userProfile ? this.getMS(this.state.userProfile.civilstatus_code) : 'Select'}
|
|
focused={this.state.focused && this.state.currentFocus == 9 ? true : false}
|
|
onPress={() => {
|
|
this.onInputFocus(9)
|
|
this.onSelectPress(3)
|
|
}}
|
|
error={"This field is required"} />
|
|
|
|
<Elements.custominput
|
|
type="select"
|
|
title="Gender"
|
|
textColor={this.props.app_theme?.theme.colors.text}
|
|
isDarkMode={this.props.app_theme?.theme.dark}
|
|
value={this.state.gender ? this.state.gender.string : this.state.userProfile ? this.getG(this.state.userProfile.gender_code) : 'Select'}
|
|
focused={this.state.focused && this.state.currentFocus == 10 ? true : false}
|
|
onPress={() => {
|
|
this.onInputFocus(10)
|
|
this.onSelectPress(4)
|
|
}}
|
|
error={"This field is required"} />
|
|
|
|
</View>
|
|
</View>
|
|
<View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
|
|
<TouchableOpacity onPress={() => this.onSubmit()} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
|
|
<Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
</CustomSafeArea>
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
return {
|
|
userinfo: state.appUserInfoReducer.userinfo,
|
|
app_theme: state.appThemeReducer.theme
|
|
}
|
|
}
|
|
|
|
const mapDispatchToProps = {
|
|
saveUserInfo
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(EditProfile)
|
|
|
|
|
|
// export default function EditProfile(navigation) {
|
|
|
|
// const [loading, setloading] = useState(false)
|
|
// const [userProfile, setUserProfile] = useState(null)
|
|
// const [focused, setfocused] = useState(false);
|
|
// const [editprofileselect, seteditprofileselect] = useState(false)
|
|
// const [customerserviceselect, setcustomerserviceselect] = useState(false)
|
|
// const [currentFocus, setCurrentFocus] = useState(null);
|
|
|
|
// const [opendialog, setopendialog] = useState(false);
|
|
// const [currentDialog, setCurrentDialog] = useState(null);
|
|
|
|
// const [currentphoto, setcurrentphoto] = useState(null)
|
|
// const [newphoto, setnewphoto]= useState(null)
|
|
// const [newmobile, setnewmobile]= useState("")
|
|
// const [newemail, setnewemail]= useState(null)
|
|
// const [newaddress, setnewaddress]= useState(null)
|
|
// const [newcity, setnewcity]= useState(null)
|
|
|
|
// const [vehicleType, setVehicleTyle] = useState(null);
|
|
// const [fuelType, setFuelType] = useState(null);
|
|
// const [maritalStatus, setMaritalStatus] = useState(null);
|
|
// const [gender, setGender] = useState(null);
|
|
// const [is_deleted, setdeleted] = useState(false);
|
|
|
|
// const [errors, seterrors] = useState({});
|
|
|
|
|
|
// useEffect(() => {
|
|
// // navigation.route.params.data.photo = ''
|
|
// setloading(true)
|
|
// setUserProfile(navigation.route?.params.data)
|
|
// setloading(false)
|
|
// console.log("PROFILE", navigation.route?.params.data)
|
|
// }, [])
|
|
|
|
// const onInputFocus = (index) => {
|
|
// setfocused(true)
|
|
// setCurrentFocus(index)
|
|
// }
|
|
// const onSelectPress = (index) => {
|
|
// setopendialog(true)
|
|
// setCurrentDialog(index)
|
|
// }
|
|
|
|
// const getFT = (type) => {
|
|
// let types = Assets.fueltypes
|
|
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
// return ""
|
|
// }
|
|
// const getVT = (type) => {
|
|
// let types = Assets.vehicletypes
|
|
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
// return ""
|
|
// }
|
|
// const getMS = (type) => {
|
|
// let types = Assets.civilstatus
|
|
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
// return ""
|
|
// }
|
|
// const getG = (type) => {
|
|
// let types = Assets.gender
|
|
// for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
|
|
// return ""
|
|
// }
|
|
// const getCN = () => {
|
|
|
|
// }
|
|
|
|
// const onDeletePhoto = () => {
|
|
// setdeleted(true)
|
|
// setcurrentphoto(Assets.logo.profileHolder)
|
|
// }
|
|
|
|
// const onEditPhoto = () => {
|
|
// ImagePicker.launchImageLibrary({}, (response) => {
|
|
// // let b64 = response.data
|
|
// // response.data = ''
|
|
// if(!response.didCancel){
|
|
// if(is_deleted){
|
|
// setdeleted(false)
|
|
// setcurrentphoto(null)
|
|
// }
|
|
// setnewphoto(response)
|
|
// }
|
|
// // console.log(response)
|
|
// });
|
|
// }
|
|
|
|
// const FormValidate = async () => {
|
|
// let res = {}
|
|
// setloading(true)
|
|
// if(newemail == ""){
|
|
// res = Object.assign(errors, {email: ["This field is required"]})
|
|
// }
|
|
// if(newaddress == "" || newaddress == null && userProfile.address == ""){
|
|
// // seterrors(Object.assign(errors, {address: ["This field is required"]}))
|
|
// res = Object.assign(errors, {address: ["This field is required"]})
|
|
// }
|
|
// if(!vehicleType && userProfile.vo_code == "0"){
|
|
// // seterrors(Object.assign(errors, {vehicleType: ["This field is required"]}))
|
|
// res = Object.assign(errors, {vehicleType: ["This field is required"]})
|
|
// }
|
|
// if(!fuelType && userProfile.fueltype_code == "0"){
|
|
// // seterrors(Object.assign(errors, {fuelType : ["This field is required"]}))
|
|
// res = Object.assign(errors, {fuelType : ["This field is required"]})
|
|
// }
|
|
// seterrors(res)
|
|
// setloading(false)
|
|
// return Object.keys(errors).length > 0 ? false : true
|
|
// }
|
|
|
|
// const Body = function(){
|
|
// return {
|
|
// image: newphoto ? newphoto.uri : null,
|
|
// mobile: newmobile,
|
|
// email: newemail,
|
|
// address: newaddress,
|
|
// city: newcity,
|
|
// vo_code: vehicleType ? vehicleType.value : null,
|
|
// fueltype_code: fuelType ? fuelType.value : null,
|
|
// civilstatus_code: maritalStatus ? maritalStatus.value : null,
|
|
// gender_code: gender ? gender.value : null,
|
|
// is_deleted: is_deleted
|
|
// }
|
|
// }
|
|
|
|
// const SaveNoOtp = async () => {
|
|
|
|
// let SESSION = await DB.session()
|
|
// if(newphoto){
|
|
// // console.log("BLOB BODY", blobBody.image.uri)
|
|
// setloading(true)
|
|
// RNFETCHBLOB("update_profile_no_otp", "POST",
|
|
// {Authorization: SESSION.token}, {}, Utils.blobBody({newphoto, userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}),
|
|
// function(res){
|
|
// console.log(res)
|
|
// setloading(false)
|
|
// Utils.responseHandler(res, () => {
|
|
// navigation.route.params.onGoBack()
|
|
// navigation.navigation.goBack()
|
|
// }, (errors) => {
|
|
// seterrors(errors)
|
|
// })
|
|
// }, function(err){
|
|
// setloading(false)
|
|
// setTimeout(() => {
|
|
// if(newphoto) Alert.alert("Error", "Failed to upload image")
|
|
// }, 300)
|
|
// })
|
|
|
|
// }else{
|
|
// setloading(true)
|
|
// await REQUEST("update_profile_no_otp", "post", {
|
|
// Authorization: SESSION.token,
|
|
// "Content-Type": "multipart/form-data",
|
|
// }, {}, Utils.formData({userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}),
|
|
// function(res){
|
|
// setloading(false)
|
|
// console.log("Update Res", res)
|
|
// Utils.responseHandler(res, () => {
|
|
// navigation.route.params.onGoBack()
|
|
// navigation.navigation.goBack()
|
|
// }, (errors) => {
|
|
// seterrors(errors)
|
|
// })
|
|
// }, function(error){
|
|
// console.log("Failed", error)
|
|
// setloading(false)
|
|
// setTimeout(() => {
|
|
// if(newphoto) Alert.alert("Error", "Failed to upload image")
|
|
// }, 300)
|
|
// })
|
|
// }
|
|
|
|
// }
|
|
|
|
// const SaveWithOtp = () => {
|
|
|
|
// navigation.navigation.navigate("AccountSendOtp", {
|
|
// data: {
|
|
// lcard_uuid: userProfile.lcard_uuid,
|
|
// mobile_number: newmobile.replace("+", "")
|
|
// },
|
|
// type: 'edit',
|
|
// callback: (res) => {
|
|
// if(res == "valid") SaveNoOtp()
|
|
// },
|
|
// })
|
|
// }
|
|
|
|
// const onSubmit = () => {
|
|
// setfocused(false)
|
|
// if(hasChanges()){
|
|
// Alert.alert(
|
|
// "Update Profile",
|
|
// '\nAre you sure you want to save changes to your profile?\n',
|
|
// [{
|
|
// text: 'Cancel',
|
|
// style: 'cancel',
|
|
// },{
|
|
// text: 'OK', onPress: async () => {
|
|
// let validation = await FormValidate()
|
|
// if(!validation) return
|
|
// if(newmobile != "" && newmobile.replace("+", "") != userProfile.mobile){
|
|
// SaveWithOtp()
|
|
// }else{
|
|
// SaveNoOtp()
|
|
// }
|
|
// }
|
|
// }],
|
|
// {cancelable: true}
|
|
// );
|
|
// }else{
|
|
// navigation.navigation.goBack()
|
|
// }
|
|
// }
|
|
|
|
// const hasChanges = () => {
|
|
// let values = Object.values(Body())
|
|
// for(var x=0;x<values.length;x++){
|
|
// if(values[x] || values[x] == "") return true
|
|
// }
|
|
// return false
|
|
// }
|
|
|
|
// const handleUpdatePhotoOptions = () => {
|
|
// Elements.ActionOption({
|
|
// options: ['Edit Photo', 'Delete Photo', 'Cancel'],
|
|
// functions: [{
|
|
// execute: () => onEditPhoto()
|
|
// }, {
|
|
// execute: () => onDeletePhoto()
|
|
// }]
|
|
// })
|
|
// }
|
|
|
|
// const renderProfilePhoto = () => {
|
|
// if(currentphoto) return Assets.logo.profileHolder
|
|
// else if(!currentphoto && newphoto || newphoto) return {uri: newphoto.uri}
|
|
// else if(!currentphoto && !newphoto && userProfile && userProfile.photo) return {uri: userProfile.photo}
|
|
// else return Assets.logo.profileHolder
|
|
// }
|
|
|
|
// return (
|
|
// <SafeAreaView style={{flex: 1}}>
|
|
// <Elements.loader visible={loading} />
|
|
// <Elements.checkboxdialog
|
|
// title="Vehicle Type"
|
|
// selected={vehicleType ? vehicleType.value : userProfile ? userProfile.vo_code : 0}
|
|
// shown={opendialog && currentDialog == 1 ? true : false}
|
|
// onCancel={() => setopendialog(!opendialog)}
|
|
// onSelect={(value, string) => {
|
|
// setVehicleTyle({
|
|
// value: value,
|
|
// string: string
|
|
// })
|
|
// setopendialog(!opendialog)
|
|
// }}
|
|
// items={Assets.vehicletypes}
|
|
// />
|
|
// <Elements.checkboxdialog
|
|
// title="Fuel Type"
|
|
// selected={fuelType ? fuelType.value : userProfile ? userProfile.fueltype_code : 0}
|
|
// shown={opendialog && currentDialog == 2 ? true : false}
|
|
// onCancel={() => setopendialog(!opendialog)}
|
|
// onSelect={(value, string) => {
|
|
// setFuelType({
|
|
// value: value,
|
|
// string: string
|
|
// })
|
|
// setopendialog(!opendialog)
|
|
// }}
|
|
// items={Assets.fueltypes}
|
|
// />
|
|
// <Elements.checkboxdialog
|
|
// title="Marital Status"
|
|
// selected={maritalStatus ? maritalStatus.value : userProfile ? userProfile.civilstatus_code : 0}
|
|
// shown={opendialog && currentDialog == 3 ? true : false}
|
|
// onCancel={() => setopendialog(!opendialog)}
|
|
// onSelect={(value, string) => {
|
|
// setMaritalStatus({
|
|
// value: value,
|
|
// string: string
|
|
// })
|
|
// setopendialog(!opendialog)
|
|
// }}
|
|
// items={Assets.civilstatus}
|
|
// />
|
|
// <Elements.checkboxdialog
|
|
// title="Gender"
|
|
// selected={gender ? gender.value : userProfile ? userProfile.gender_code : 0}
|
|
// shown={opendialog && currentDialog == 4 ? true : false}
|
|
// onCancel={() => setopendialog(!opendialog)}
|
|
// onSelect={(value, string) => {
|
|
// setGender({
|
|
// value: value,
|
|
// string: string
|
|
// })
|
|
// setopendialog(!opendialog)
|
|
// }}
|
|
// items={Assets.gender}
|
|
// />
|
|
|
|
// <CustomHeader
|
|
// title="Edit Profile"
|
|
// menu={false}
|
|
// backscreen="MyProfile"
|
|
// back={true}
|
|
// onBackPress={() => {
|
|
// if(hasChanges()){
|
|
// Alert.alert(
|
|
// null,
|
|
// 'You have an unsaved profile information, are you sure you want to navigate back?\n',
|
|
// [{
|
|
// text: 'Cancel',
|
|
// style: 'cancel',
|
|
// },
|
|
// {
|
|
// text: 'OK', onPress: () => navigation.navigation.navigate("MyProfile")
|
|
// },
|
|
// ],
|
|
// {cancelable: true}
|
|
// );
|
|
// }else{
|
|
// navigation.navigation.navigate("MyProfile")
|
|
// }
|
|
// }}
|
|
// navigation={navigation}
|
|
// />
|
|
|
|
// <ScrollView style={{flex: 1}}>
|
|
|
|
// <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
|
|
// <View style={{flex: 1}}>
|
|
// {/* <Avatar rounded source={currentphoto ? Assets.logo.profileHolder : {uri: newphoto ? newphoto.uri : userProfile ? userProfile.photo === '' ? Assets.logo.profileHolder : userProfile.photo : Assets.logo.profileHolder}} size="large" /> */}
|
|
// <Avatar rounded size="large" source={renderProfilePhoto()} />
|
|
// </View>
|
|
// <View style={{flex: 2.5, justifyContent: 'center'}}>
|
|
// {userProfile && userProfile.photo && !is_deleted || userProfile && !userProfile.photo && newphoto && !is_deleted ?
|
|
// <TouchableOpacity onPress={handleUpdatePhotoOptions}>
|
|
// <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Edit Photo</Text>
|
|
// </TouchableOpacity> :
|
|
// <TouchableOpacity onPress={() => onEditPhoto()}>
|
|
// <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Add Photo</Text>
|
|
// </TouchableOpacity>
|
|
// }
|
|
// </View>
|
|
// </View>
|
|
// <View style={{flex: 1, width: '100%', padding: 5}}>
|
|
// <View>
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="First Name"
|
|
// placeholder={userProfile ? userProfile.firstname : ''}
|
|
// disabled
|
|
// onChange={null}
|
|
// bottomOption={true}
|
|
// onContact={ContactOptions}
|
|
// error={"This field is required"} />
|
|
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="Last Name"
|
|
// placeholder={userProfile ? userProfile.lastname : ''}
|
|
// disabled
|
|
// onChange={null}
|
|
// bottomOption={true}
|
|
// onContact={ContactOptions}
|
|
// error={"This field is required"} />
|
|
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="Birthday"
|
|
// placeholder={userProfile ? new moment(new Date(userProfile.birthdate)).format("DD MMM YYYY") : ''}
|
|
// disabled
|
|
// onChange={null}
|
|
// bottomOption={true}
|
|
// onContact={ContactOptions}
|
|
// error={"This field is required"} />
|
|
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="Mobile Number"
|
|
// keyboardType="numeric"
|
|
// maxLength={13}
|
|
// value={newmobile ? newmobile.length <= 2 ? '+63' : newmobile : userProfile ? "+" + userProfile.mobile : ''}
|
|
// placeholder=""
|
|
// onChangeText={(value) => {
|
|
// setnewmobile(value)
|
|
// console.log(value)
|
|
// }}
|
|
// focused={focused && currentFocus == 3 ? true : false}
|
|
// onFocus={() => onInputFocus(3)}
|
|
// error={"This field is required"} />
|
|
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="Email Address"
|
|
// value={newemail ? newemail : userProfile && newemail != '' ? userProfile.email : ''}
|
|
// bottomText="your@email.com"
|
|
// focused={focused && currentFocus == 4 || errors && errors.email ? true : false}
|
|
// onFocus={() => onInputFocus(4)}
|
|
// onChangeText={(value) => {
|
|
// setnewemail(value)
|
|
// delete errors["email"]
|
|
// }}
|
|
// hasError={errors && errors.email ? true : false}
|
|
// errorMessage={errors && errors.email ? errors.email[0] : "Invalid email"}
|
|
// />
|
|
|
|
// <Elements.custominput
|
|
// type="input"
|
|
// title="Address"
|
|
// value={newaddress ? newaddress : userProfile && newaddress != '' ? userProfile.address : ''}
|
|
// focused={focused && currentFocus == 5 || errors && errors.address ? true : false}
|
|
// onFocus={() => onInputFocus(5)}
|
|
// onChangeText={(value) => {
|
|
// setnewaddress(value)
|
|
// delete errors["address"]
|
|
// }}
|
|
// hasError={errors && errors.address ? true : false}
|
|
// errorMessage={errors && errors.address ? errors.address[0] : "Invalid address"}
|
|
// />
|
|
|
|
// {/* <Elements.custominput
|
|
// type="input"
|
|
// title="City"
|
|
// value={newcity ? newcity : userProfile && newcity != '' ? userProfile.city_name : ''}
|
|
// focused={focused && currentFocus == 6 ? true : false}
|
|
// onFocus={() => onInputFocus(6)}
|
|
// onChangeText={(value) => setnewcity(value)}
|
|
// error={"This field is required"} /> */}
|
|
|
|
// <Elements.custominput
|
|
// type="select"
|
|
// title="Vehicle Type"
|
|
// value={vehicleType ? vehicleType.string : userProfile ? getVT(userProfile.vo_code) : 'Select'}
|
|
// focused={focused && currentFocus == 7 ? true : false}
|
|
// onPress={() => {
|
|
// onInputFocus(7)
|
|
// onSelectPress(1)
|
|
// delete errors["vehicleType"]
|
|
// }}
|
|
// hasError={errors && errors.vehicleType ? true : false}
|
|
// errorMessage={errors && errors.vehicleType ? errors.vehicleType[0] : "Invalid vehicle type"}
|
|
// />
|
|
|
|
// <Elements.custominput
|
|
// type="select"
|
|
// title="Fuel Type"
|
|
// value={fuelType ? fuelType.string : userProfile ? getFT(userProfile.fueltype_code) : 'Select'}
|
|
// focused={focused && currentFocus == 8 ? true : false}
|
|
// onPress={() => {
|
|
// onInputFocus(8)
|
|
// onSelectPress(2)
|
|
// delete errors["fuelType"]
|
|
// }}
|
|
// hasError={errors && errors.fuelType ? true : false}
|
|
// errorMessage={errors && errors.fuelType ? errors.fuelType[0] : "Invalid fuel type"}
|
|
// />
|
|
|
|
// <Elements.custominput
|
|
// type="select"
|
|
// title="Marital Status"
|
|
// value={maritalStatus ? maritalStatus.string : userProfile ? getMS(userProfile.civilstatus_code) : 'Select'}
|
|
// focused={focused && currentFocus == 9 ? true : false}
|
|
// onPress={() => {
|
|
// onInputFocus(9)
|
|
// onSelectPress(3)
|
|
// }}
|
|
// error={"This field is required"} />
|
|
|
|
// <Elements.custominput
|
|
// type="select"
|
|
// title="Gender"
|
|
// value={gender ? gender.string : userProfile ? getG(userProfile.gender_code) : 'Select'}
|
|
// focused={focused && currentFocus == 10 ? true : false}
|
|
// onPress={() => {
|
|
// onInputFocus(10)
|
|
// onSelectPress(4)
|
|
// }}
|
|
// error={"This field is required"} />
|
|
|
|
// </View>
|
|
// </View>
|
|
// <View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
|
|
// <TouchableOpacity onPress={onSubmit} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
|
|
// <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
|
|
// </TouchableOpacity>
|
|
// </View>
|
|
// </ScrollView>
|
|
// </SafeAreaView>
|
|
// );
|
|
// }
|