546 lines
16 KiB
React
546 lines
16 KiB
React
|
import {
|
||
|
|
faAngleDown,
|
||
|
|
faArrowLeft,
|
||
|
|
faEdit,
|
||
|
|
faPlus,
|
||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
||
|
|
import { useNavigation, useRoute } from "@react-navigation/native";
|
||
|
|
import React, { useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
Image,
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
import * as ImagePicker from "expo-image-picker";
|
||
|
|
import {
|
||
|
|
get_barangays,
|
||
|
|
get_cities,
|
||
|
|
get_manila_cities,
|
||
|
|
get_provinces,
|
||
|
|
} from "../../services/addressApi/address";
|
||
|
|
import SelectDropdown from "react-native-select-dropdown";
|
||
|
|
import {
|
||
|
|
update_customer,
|
||
|
|
uploadImage,
|
||
|
|
} from "../../services/api/controllers/customers";
|
||
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||
|
|
import { useToast } from "react-native-toast-notifications";
|
||
|
|
|
||
|
|
const AccountAndSecurity = ({ route }) => {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const [unit, setunit] = useState("");
|
||
|
|
const { isrefresh, userData } = route.params ?? "";
|
||
|
|
|
||
|
|
const [street, setstreet] = useState("");
|
||
|
|
const [fName, setfName] = useState(userData.first_name ?? "");
|
||
|
|
const [lName, setlName] = useState(userData.last_name ?? "");
|
||
|
|
const [username, setusername] = useState(userData.user_login ?? "");
|
||
|
|
|
||
|
|
const [email, setemail] = useState(userData.user_email ?? "");
|
||
|
|
const [phone, setphone] = useState(userData.phone_number ?? "");
|
||
|
|
|
||
|
|
const [error, seterror] = useState("");
|
||
|
|
const [load, setload] = useState(false);
|
||
|
|
const toast = useToast();
|
||
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
||
|
|
const [image, setimage] = useState(null);
|
||
|
|
|
||
|
|
// const route = useRoute();
|
||
|
|
|
||
|
|
// console.log("address " + address?.length);
|
||
|
|
const [user, setuser] = useState([]);
|
||
|
|
useEffect(() => {
|
||
|
|
/* ---------------Check for the user saved email--------------- */
|
||
|
|
|
||
|
|
AsyncStorage.getItem("userData")
|
||
|
|
.then((pass) => {
|
||
|
|
const userDataArray = JSON.parse(pass);
|
||
|
|
setuser(userDataArray);
|
||
|
|
console.log(pass);
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error + "weeewwww");
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
console.log("addresss " + isrefresh);
|
||
|
|
const UpdateUser = () => {
|
||
|
|
console.log(userData._id);
|
||
|
|
setload(true);
|
||
|
|
if (image) {
|
||
|
|
uploadImage(image)
|
||
|
|
.then((result) => {
|
||
|
|
console.log("Image uploaded successfully:", result.data);
|
||
|
|
// Handle success (e.g., show success message)
|
||
|
|
// Alert.alert('Image uploaded successfully');
|
||
|
|
console.log(result.data.filename);
|
||
|
|
update_customer({
|
||
|
|
id: userData?._id ?? "",
|
||
|
|
body: {
|
||
|
|
first_name: fName,
|
||
|
|
last_name: lName,
|
||
|
|
user_login: username,
|
||
|
|
phone_number: phone,
|
||
|
|
customer_image: `https://api.obanana.shop/images/storage/customer_uploads/${result.data.filename}`,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result3) => {
|
||
|
|
if (result3.error) {
|
||
|
|
seterror(result3.error);
|
||
|
|
} else {
|
||
|
|
// setaddreses(result3.data.addreses);
|
||
|
|
setload(false);
|
||
|
|
toast.show("Successfully updated user!", {
|
||
|
|
type: "success",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
navigation.navigate("AccountSettings", {
|
||
|
|
isrefresh: isrefresh === true ? false : true,
|
||
|
|
});
|
||
|
|
console.log(result3.data);
|
||
|
|
}
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// last_name: lName,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result1) => {
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// user_login: username,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result2) => {
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// phone_number: phone,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result3) => {
|
||
|
|
// if (result3.error) {
|
||
|
|
// seterror(result3.error);
|
||
|
|
// } else {
|
||
|
|
// // setaddreses(result3.data.addreses);
|
||
|
|
// setload(false);
|
||
|
|
|
||
|
|
// navigation.navigate("AccountSettings", {
|
||
|
|
// isrefresh: isrefresh === true ? false : true,
|
||
|
|
// });
|
||
|
|
// console.log(result3.data);
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
// console.log(result.data);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.error("Error uploading image:", error);
|
||
|
|
|
||
|
|
// Handle error (e.g., show error message)
|
||
|
|
// Alert.alert('Error uploading image');
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
update_customer({
|
||
|
|
id: userData?._id ?? "",
|
||
|
|
body: {
|
||
|
|
first_name: fName,
|
||
|
|
last_name: lName,
|
||
|
|
user_login: username,
|
||
|
|
phone_number: phone,
|
||
|
|
// customer_image: `https://api.obanana.shop/images/storage/vendor_uploads/${result.filename}`,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result3) => {
|
||
|
|
if (result3.error) {
|
||
|
|
seterror(result3.error);
|
||
|
|
} else {
|
||
|
|
// setaddreses(result3.data.addreses);
|
||
|
|
setload(false);
|
||
|
|
toast.show("Successfully updated user!", {
|
||
|
|
type: "success",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
navigation.navigate("AccountSettings", {
|
||
|
|
isrefresh: isrefresh === true ? false : true,
|
||
|
|
});
|
||
|
|
console.log(result3.data);
|
||
|
|
}
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// last_name: lName,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result1) => {
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// user_login: username,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result2) => {
|
||
|
|
// update_customer({
|
||
|
|
// id: userData?._id ?? "",
|
||
|
|
// body: {
|
||
|
|
// phone_number: phone,
|
||
|
|
// },
|
||
|
|
// })
|
||
|
|
// .then((result3) => {
|
||
|
|
// if (result3.error) {
|
||
|
|
// seterror(result3.error);
|
||
|
|
// } else {
|
||
|
|
// // setaddreses(result3.data.addreses);
|
||
|
|
// setload(false);
|
||
|
|
|
||
|
|
// navigation.navigate("AccountSettings", {
|
||
|
|
// isrefresh: isrefresh === true ? false : true,
|
||
|
|
// });
|
||
|
|
// console.log(result3.data);
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
// })
|
||
|
|
// .catch((error) => {
|
||
|
|
// // setError(error.message);
|
||
|
|
// console.log(error.message);
|
||
|
|
// });
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
// console.log(result.data);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const selectImage = async () => {
|
||
|
|
const permissionResult =
|
||
|
|
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||
|
|
|
||
|
|
if (permissionResult.granted === false) {
|
||
|
|
Alert.alert("Permission to access camera roll is required!");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const pickerResult = await ImagePicker.launchImageLibraryAsync({
|
||
|
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||
|
|
allowsEditing: true,
|
||
|
|
aspect: [4, 3],
|
||
|
|
quality: 1,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!pickerResult.canceled) {
|
||
|
|
setSelectedImage({ localUri: pickerResult.assets[0].uri });
|
||
|
|
|
||
|
|
// Prepare image data for upload
|
||
|
|
const imageData = {
|
||
|
|
image_id: userData._id,
|
||
|
|
category: "customer",
|
||
|
|
imageFile: {
|
||
|
|
uri: pickerResult.assets[0].uri,
|
||
|
|
type: "image/jpeg", // Adjust the type if needed
|
||
|
|
name: "image.jpg", // Adjust the name if needed
|
||
|
|
},
|
||
|
|
};
|
||
|
|
setimage(imageData);
|
||
|
|
// Call your uploadImage function
|
||
|
|
|
||
|
|
console.log(imageData);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View style={styles.header}>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() =>
|
||
|
|
navigation.navigate("AccountSettings", { isrefresh: { isrefresh } })
|
||
|
|
}
|
||
|
|
style={styles.backIcon}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.headerText}>Edit Profile</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<ScrollView style={styles.wrapper}>
|
||
|
|
{/* <Text style={styles.text}>Content</Text> */}
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<View style={styles.accountPrev}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.accountPrevWrap}
|
||
|
|
onPress={() => {
|
||
|
|
selectImage();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{selectedImage ? (
|
||
|
|
<Image
|
||
|
|
style={{
|
||
|
|
width: 100,
|
||
|
|
height: 100,
|
||
|
|
resizeMode: "cover",
|
||
|
|
borderRadius: 100,
|
||
|
|
// marginLeft: 20,
|
||
|
|
}}
|
||
|
|
source={{
|
||
|
|
uri: selectedImage.localUri,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<Image
|
||
|
|
style={{
|
||
|
|
width: 100,
|
||
|
|
height: 100,
|
||
|
|
resizeMode: "cover",
|
||
|
|
borderRadius: 100,
|
||
|
|
// marginLeft: 20,
|
||
|
|
}}
|
||
|
|
source={{
|
||
|
|
uri:
|
||
|
|
userData.customer_image ??
|
||
|
|
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<View style={styles.editprof}>
|
||
|
|
<FontAwesomeIcon icon={faEdit} size={24} color={"#333"} />
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>First Name:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setfName(e);
|
||
|
|
}}
|
||
|
|
value={fName}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Last Name:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setlName(e);
|
||
|
|
}}
|
||
|
|
value={lName}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Username:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setusername(e);
|
||
|
|
}}
|
||
|
|
value={username}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Phone Number:</Text>
|
||
|
|
{/* <View style={styles.inputNum}> */}
|
||
|
|
{/* <Text>+63 </Text> */}
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setphone(e);
|
||
|
|
}}
|
||
|
|
value={phone}
|
||
|
|
// placeholder="9*********"
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
{/* </View> */}
|
||
|
|
</View>
|
||
|
|
{/* <View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Email:(optional)</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setemail(e);
|
||
|
|
}}
|
||
|
|
value={email}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View> */}
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
<View style={styles.footer}>
|
||
|
|
<TouchableOpacity style={styles.footerBtn} onPress={() => UpdateUser()}>
|
||
|
|
<Text style={styles.footerBtnText}>Save</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: "#ffff",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
marginBottom: 60,
|
||
|
|
},
|
||
|
|
wrap: {
|
||
|
|
height: "100%",
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingTop: 30,
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
alignItems: "center",
|
||
|
|
width: "100%",
|
||
|
|
top: 0,
|
||
|
|
paddingLeft: 15,
|
||
|
|
flexDirection: "row",
|
||
|
|
borderColor: "#ddd",
|
||
|
|
paddingBottom: 15,
|
||
|
|
borderBottomWidth: 1,
|
||
|
|
},
|
||
|
|
headerText: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: "600",
|
||
|
|
marginLeft: 25,
|
||
|
|
},
|
||
|
|
wrapMiddleFormInput: {
|
||
|
|
marginVertical: 6,
|
||
|
|
},
|
||
|
|
input: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 10,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 15,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
},
|
||
|
|
inputNum: {
|
||
|
|
height: 50,
|
||
|
|
width: 300,
|
||
|
|
margin: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
borderColor: "#bebebe",
|
||
|
|
borderRadius: 10,
|
||
|
|
flexDirection: "row",
|
||
|
|
// justifyContent: "center",9
|
||
|
|
alignItems: "center",
|
||
|
|
backgroundColor: "#fff",
|
||
|
|
},
|
||
|
|
inputText: {
|
||
|
|
marginLeft: 15,
|
||
|
|
fontSize: 13,
|
||
|
|
fontWeight: "600",
|
||
|
|
},
|
||
|
|
footer: {
|
||
|
|
position: "absolute",
|
||
|
|
bottom: 0,
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingVertical: 10,
|
||
|
|
},
|
||
|
|
footerBtn: {
|
||
|
|
backgroundColor: "#ff5e00",
|
||
|
|
width: "90%",
|
||
|
|
paddingVertical: 10,
|
||
|
|
justifyContent: "center",
|
||
|
|
borderRadius: 20,
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
},
|
||
|
|
footerBtnText: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 16,
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
selectBtnText: {
|
||
|
|
color: "#929292",
|
||
|
|
fontSize: 15,
|
||
|
|
marginRight: 10,
|
||
|
|
letterSpacing: 0.6,
|
||
|
|
},
|
||
|
|
editprof: {
|
||
|
|
position: "absolute",
|
||
|
|
right: 0,
|
||
|
|
bottom: 5,
|
||
|
|
},
|
||
|
|
accountPrev: {
|
||
|
|
marginBottom: 25,
|
||
|
|
},
|
||
|
|
accountPrevWrap: {
|
||
|
|
borderWidth: 4,
|
||
|
|
borderStyle: "dashed",
|
||
|
|
borderColor: "#ffaa00c0",
|
||
|
|
padding: 10,
|
||
|
|
margin: 15,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default AccountAndSecurity;
|