567 lines
17 KiB
React
567 lines
17 KiB
React
|
import {
|
||
|
|
faAngleDown,
|
||
|
|
faArrowLeft,
|
||
|
|
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 {
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
import {
|
||
|
|
get_barangays,
|
||
|
|
get_cities,
|
||
|
|
get_manila_cities,
|
||
|
|
get_provinces,
|
||
|
|
} from "../../services/addressApi/address";
|
||
|
|
import SelectDropdown from "react-native-select-dropdown";
|
||
|
|
import { update_customer } from "../../services/api/controllers/customers";
|
||
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||
|
|
import { useToast } from "react-native-toast-notifications";
|
||
|
|
|
||
|
|
const Address = () => {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const [unit, setunit] = useState("");
|
||
|
|
const toast = useToast();
|
||
|
|
|
||
|
|
const [street, setstreet] = useState("");
|
||
|
|
const [fName, setfName] = useState("");
|
||
|
|
const [lName, setlName] = useState("");
|
||
|
|
const [company, setcompany] = useState("");
|
||
|
|
const [email, setemail] = useState("");
|
||
|
|
const [phone, setphone] = useState("");
|
||
|
|
|
||
|
|
const [province, setprovince] = useState("");
|
||
|
|
const [provinceName, setprovinceName] = useState("");
|
||
|
|
const [provinceSelected, setprovinceSelected] = useState("");
|
||
|
|
|
||
|
|
const [city, setcity] = useState("");
|
||
|
|
const [cityName, setcityName] = useState("");
|
||
|
|
const [citySelected, setcitySelected] = useState("");
|
||
|
|
|
||
|
|
const [brgy, setbrgy] = useState("");
|
||
|
|
const [brgyName, setbrgyName] = useState("");
|
||
|
|
const [brgySelected, setbrgySelected] = useState("");
|
||
|
|
|
||
|
|
const [zip, setzip] = useState("");
|
||
|
|
const [landmark, setlandmark] = useState("");
|
||
|
|
const [error, seterror] = useState("");
|
||
|
|
const route = useRoute();
|
||
|
|
|
||
|
|
const { isrefresh, address } = route.params;
|
||
|
|
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");
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
get_provinces()
|
||
|
|
.then((result) => {
|
||
|
|
if (result.status == 200) {
|
||
|
|
setprovince([
|
||
|
|
...result.data,
|
||
|
|
{
|
||
|
|
code: "130000000",
|
||
|
|
name: "Metro Manila",
|
||
|
|
regionName: "National Capital Region",
|
||
|
|
islandGroupCode: "luzon",
|
||
|
|
psgc10DigitCode: "1300000000",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
// console.log(result.data);
|
||
|
|
} else {
|
||
|
|
seterror(result.message);
|
||
|
|
// console.log("login error" + result);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
seterror(err);
|
||
|
|
|
||
|
|
console.log(err);
|
||
|
|
console.log(err + "failed to login");
|
||
|
|
});
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
if (provinceName === "Metro Manila") {
|
||
|
|
get_manila_cities({
|
||
|
|
id: provinceSelected,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
if (result.status == 200) {
|
||
|
|
setcity(result.data);
|
||
|
|
// console.log(result.data);
|
||
|
|
} else {
|
||
|
|
seterror(result.message);
|
||
|
|
// console.log("login error" + result);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
seterror(err);
|
||
|
|
|
||
|
|
console.log(err);
|
||
|
|
console.log(err + "failed to login");
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
get_cities({
|
||
|
|
id: provinceSelected,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
if (result.status == 200) {
|
||
|
|
setcity(result.data);
|
||
|
|
// console.log(result.data);
|
||
|
|
} else {
|
||
|
|
seterror(result.message);
|
||
|
|
// console.log("login error" + result);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
seterror(err);
|
||
|
|
|
||
|
|
console.log(err);
|
||
|
|
console.log(err + "failed to login");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, [provinceSelected]);
|
||
|
|
useEffect(() => {
|
||
|
|
get_barangays({ id: citySelected })
|
||
|
|
.then((result) => {
|
||
|
|
if (result.status == 200) {
|
||
|
|
setbrgy(result.data);
|
||
|
|
// console.log(result.data);
|
||
|
|
} else {
|
||
|
|
seterror(result.message);
|
||
|
|
// console.log("login error" + result);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
seterror(err);
|
||
|
|
|
||
|
|
console.log(err);
|
||
|
|
console.log(err + "failed to login");
|
||
|
|
});
|
||
|
|
}, [citySelected]);
|
||
|
|
console.log("addresss " + isrefresh);
|
||
|
|
const AddAddress = () => {
|
||
|
|
if ((!fName, !lName, !phone, !street, !cityName, !provinceName)) {
|
||
|
|
toast.show("Please fill in the required fields!", {
|
||
|
|
type: "danger",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (address.length > 0 && address !== undefined && address !== []) {
|
||
|
|
const add = address;
|
||
|
|
const newItem = {
|
||
|
|
first_name: fName,
|
||
|
|
last_name: lName,
|
||
|
|
company: company,
|
||
|
|
email: email,
|
||
|
|
phone: phone,
|
||
|
|
address_1: unit,
|
||
|
|
address_2: street,
|
||
|
|
city: cityName,
|
||
|
|
province: provinceName,
|
||
|
|
barangay: brgyName,
|
||
|
|
country: "PH",
|
||
|
|
billing: false,
|
||
|
|
shipping: false,
|
||
|
|
};
|
||
|
|
add.push(newItem);
|
||
|
|
update_customer({
|
||
|
|
id: user[0]._id,
|
||
|
|
body: {
|
||
|
|
address: add,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
navigation.navigate("Address", {
|
||
|
|
isrefresh: isrefresh === true ? false : true,
|
||
|
|
});
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
// setaddreses(result.data.address_book);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
update_customer({
|
||
|
|
id: user[0]._id,
|
||
|
|
body: {
|
||
|
|
address: {
|
||
|
|
first_name: fName,
|
||
|
|
last_name: lName,
|
||
|
|
company: company,
|
||
|
|
email: email,
|
||
|
|
phone: phone,
|
||
|
|
address_1: unit,
|
||
|
|
address_2: street,
|
||
|
|
city: cityName,
|
||
|
|
province: provinceName,
|
||
|
|
barangay: brgyName,
|
||
|
|
country: "PH",
|
||
|
|
billing: true,
|
||
|
|
shipping: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
// setaddreses(result.data.addreses);
|
||
|
|
navigation.navigate("Address", {
|
||
|
|
isrefresh: isrefresh === true ? false : true,
|
||
|
|
});
|
||
|
|
console.log(result.data);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<View style={styles.header}>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() =>
|
||
|
|
navigation.navigate("Address", { isrefresh: { isrefresh } })
|
||
|
|
}
|
||
|
|
style={styles.backIcon}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.headerText}>My Address</Text>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<ScrollView style={styles.wrapper}>
|
||
|
|
{/* <Text style={styles.text}>Content</Text> */}
|
||
|
|
<View style={styles.wrap}>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>First Name:<Text style={{color:"red", fontWeight:'600'}}>*</Text></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 style={{color:"red", fontWeight:'600'}}>*</Text></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}>Company: (optional)</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setcompany(e);
|
||
|
|
}}
|
||
|
|
value={company}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Phone Number:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
|
||
|
|
<View style={styles.inputNum}>
|
||
|
|
{/* <Text>+63 </Text> */}
|
||
|
|
<TextInput
|
||
|
|
style={styles.numInput}
|
||
|
|
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 style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Unit/Floor No.:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setunit(e);
|
||
|
|
}}
|
||
|
|
value={unit}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Street Address:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setstreet(e);
|
||
|
|
}}
|
||
|
|
value={street}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Province/Region:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
|
||
|
|
<SelectDropdown
|
||
|
|
data={province}
|
||
|
|
search={true}
|
||
|
|
defaultButtonText="Select Province"
|
||
|
|
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
|
||
|
|
searchPlaceHolder="search"
|
||
|
|
buttonStyle={styles.input}
|
||
|
|
buttonTextStyle={{ fontSize: 13 }}
|
||
|
|
onSelect={(selectedItem, index) => {
|
||
|
|
console.log(selectedItem, index);
|
||
|
|
setprovinceName(selectedItem.name);
|
||
|
|
setprovinceSelected(selectedItem.code);
|
||
|
|
}}
|
||
|
|
buttonTextAfterSelection={(selectedItem, index) => {
|
||
|
|
return selectedItem.name;
|
||
|
|
}}
|
||
|
|
rowTextForSelection={(item, index) => {
|
||
|
|
return item.name;
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>City/Municipality:<Text style={{color:"red", fontWeight:'600'}}>*</Text></Text>
|
||
|
|
<SelectDropdown
|
||
|
|
data={city}
|
||
|
|
search={true}
|
||
|
|
defaultButtonText="Select City/Municipality"
|
||
|
|
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
|
||
|
|
searchPlaceHolder="search"
|
||
|
|
buttonStyle={styles.input}
|
||
|
|
buttonTextStyle={{ fontSize: 13 }}
|
||
|
|
onSelect={(selectedItem, index) => {
|
||
|
|
console.log(selectedItem, index);
|
||
|
|
setcityName(selectedItem.name);
|
||
|
|
setcitySelected(selectedItem.code);
|
||
|
|
}}
|
||
|
|
buttonTextAfterSelection={(selectedItem, index) => {
|
||
|
|
return selectedItem.name;
|
||
|
|
}}
|
||
|
|
rowTextForSelection={(item, index) => {
|
||
|
|
return item.name;
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Barangay:</Text>
|
||
|
|
<SelectDropdown
|
||
|
|
data={brgy}
|
||
|
|
search={true}
|
||
|
|
defaultButtonText="Select Barangay"
|
||
|
|
renderDropdownIcon={() => <FontAwesomeIcon icon={faAngleDown} />}
|
||
|
|
searchPlaceHolder="search"
|
||
|
|
buttonStyle={styles.input}
|
||
|
|
buttonTextStyle={{ fontSize: 13 }}
|
||
|
|
onSelect={(selectedItem, index) => {
|
||
|
|
console.log(selectedItem, index);
|
||
|
|
setbrgyName(selectedItem.name);
|
||
|
|
setbrgySelected(selectedItem.code);
|
||
|
|
}}
|
||
|
|
buttonTextAfterSelection={(selectedItem, index) => {
|
||
|
|
return selectedItem.name;
|
||
|
|
}}
|
||
|
|
rowTextForSelection={(item, index) => {
|
||
|
|
return item.name;
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Zip Code:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setzip(e);
|
||
|
|
}}
|
||
|
|
value={zip}
|
||
|
|
placeholder=""
|
||
|
|
keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<View style={styles.wrapMiddleFormInput}>
|
||
|
|
<Text style={styles.inputText}>Landmark:</Text>
|
||
|
|
<TextInput
|
||
|
|
style={styles.input}
|
||
|
|
onChangeText={(e) => {
|
||
|
|
setlandmark(e);
|
||
|
|
}}
|
||
|
|
value={landmark}
|
||
|
|
placeholder=""
|
||
|
|
// keyboardType="numeric"
|
||
|
|
// secureTextEntry={true}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
<View style={styles.footer}>
|
||
|
|
<TouchableOpacity style={styles.footerBtn} onPress={() => AddAddress()}>
|
||
|
|
<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: 5,
|
||
|
|
borderWidth: 1,
|
||
|
|
padding: 10,
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default Address;
|