506 lines
13 KiB
React
506 lines
13 KiB
React
|
import {
|
||
|
|
faAngleDown,
|
||
|
|
faArrowLeft,
|
||
|
|
faCheck,
|
||
|
|
faPlus,
|
||
|
|
faTrash,
|
||
|
|
} from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
||
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||
|
|
import {
|
||
|
|
useIsFocused,
|
||
|
|
useNavigation,
|
||
|
|
useRoute,
|
||
|
|
} from "@react-navigation/native";
|
||
|
|
import React, { useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
ScrollView,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
TextInput,
|
||
|
|
TouchableOpacity,
|
||
|
|
View,
|
||
|
|
} from "react-native";
|
||
|
|
|
||
|
|
import SelectDropdown from "react-native-select-dropdown";
|
||
|
|
import { useToast } from "react-native-toast-notifications";
|
||
|
|
import { user } from "../../constants/user";
|
||
|
|
import {
|
||
|
|
get_customer,
|
||
|
|
update_customer,
|
||
|
|
} from "../../services/api/controllers/customers";
|
||
|
|
|
||
|
|
const Addresses = () => {
|
||
|
|
const navigation = useNavigation();
|
||
|
|
const [selected, setselected] = useState(0);
|
||
|
|
const [error, seterror] = useState(0);
|
||
|
|
|
||
|
|
const [addreses, setaddreses] = useState([]);
|
||
|
|
const [addresesNew, setaddresesNew] = useState([]);
|
||
|
|
const [refresh, setrefresh] = useState(false);
|
||
|
|
const route = useRoute();
|
||
|
|
const toast = useToast();
|
||
|
|
const isFocused = useIsFocused();
|
||
|
|
const isrefresh = route.params.isrefresh ? route.params.isrefresh : null;
|
||
|
|
console.log("address " + addreses.length);
|
||
|
|
|
||
|
|
const [user, setuser] = useState([]);
|
||
|
|
useEffect(() => {
|
||
|
|
/* ---------------Check for the user saved email--------------- */
|
||
|
|
}, []);
|
||
|
|
useEffect(() => {
|
||
|
|
setrefresh(isrefresh);
|
||
|
|
AsyncStorage.getItem("userData")
|
||
|
|
.then((pass) => {
|
||
|
|
// console.log("mm "+pass._id);
|
||
|
|
const userDataArray = JSON.parse(pass);
|
||
|
|
setuser(userDataArray);
|
||
|
|
get_customer({ id: userDataArray[0]?._id })
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
setaddreses(result.data.address);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error + "weeewwww");
|
||
|
|
});
|
||
|
|
// console.log("get cutomer add :" + user[0]?.login_id);
|
||
|
|
}, [isrefresh]);
|
||
|
|
useEffect(() => {
|
||
|
|
setrefresh(isrefresh);
|
||
|
|
AsyncStorage.getItem("userData")
|
||
|
|
.then((pass) => {
|
||
|
|
// console.log("mm "+pass._id);
|
||
|
|
const userDataArray = JSON.parse(pass);
|
||
|
|
setuser(userDataArray);
|
||
|
|
get_customer({ id: userDataArray[0]?._id })
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
setaddreses(result.data.address);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error + "weeewwww");
|
||
|
|
});
|
||
|
|
// console.log("get cutomer add :" + user[0]?.login_id);
|
||
|
|
}, [isFocused]);
|
||
|
|
const setBilling = (index) => {
|
||
|
|
const address = addreses;
|
||
|
|
|
||
|
|
for (let i = 0; i < address.length; i++) {
|
||
|
|
if (i === index) {
|
||
|
|
// If it's the index to update, toggle the billing value
|
||
|
|
address[i].billing = !address[i].billing;
|
||
|
|
} else {
|
||
|
|
// If it's not the index to update, set billing to false
|
||
|
|
address[i].billing = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
update_customer({
|
||
|
|
id: user[0]._id,
|
||
|
|
|
||
|
|
body: {
|
||
|
|
address: address,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
setaddreses(result.data.address);
|
||
|
|
toast.show("Successfully changed the Billing Address!", {
|
||
|
|
type: "success",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const setShipping = (index) => {
|
||
|
|
const address = addreses;
|
||
|
|
|
||
|
|
for (let i = 0; i < address.length; i++) {
|
||
|
|
if (i === index) {
|
||
|
|
// If it's the index to update, toggle the shipping value
|
||
|
|
address[i].shipping = !address[i].shipping;
|
||
|
|
} else {
|
||
|
|
// If it's not the index to update, set shipping to false
|
||
|
|
address[i].shipping = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
update_customer({
|
||
|
|
id: user[0]._id,
|
||
|
|
|
||
|
|
body: {
|
||
|
|
address: address,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
setaddreses(result.data.address);
|
||
|
|
toast.show("Successfully changed the Shipping Address!", {
|
||
|
|
type: "success",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
};
|
||
|
|
const removeAddress = (indexToRemove) => {
|
||
|
|
let address = addreses;
|
||
|
|
if (indexToRemove >= 0 && indexToRemove < address.length) {
|
||
|
|
address.splice(indexToRemove, 1); // This will remove one element at the specified index
|
||
|
|
// If you want to remove more than one element, you can change the second argument (1 in this case) to the number of elements you want to remove.
|
||
|
|
}
|
||
|
|
update_customer({
|
||
|
|
id: user[0]._id,
|
||
|
|
|
||
|
|
body: {
|
||
|
|
address: address,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// console.log(result.data);
|
||
|
|
|
||
|
|
if (result.error) {
|
||
|
|
seterror(result.error);
|
||
|
|
} else {
|
||
|
|
setaddreses(result.data.address);
|
||
|
|
toast.show("Successfully deleted the address!", {
|
||
|
|
type: "danger",
|
||
|
|
placement: "top",
|
||
|
|
duration: 2000,
|
||
|
|
offset: 30,
|
||
|
|
animationType: "slide-in",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
// setError(error.message);
|
||
|
|
console.log(error.message);
|
||
|
|
})
|
||
|
|
.finally(() => {
|
||
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
||
|
|
});
|
||
|
|
};
|
||
|
|
// useEffect(() => {
|
||
|
|
// get_customer({
|
||
|
|
// id: user[0]?._id,
|
||
|
|
// })
|
||
|
|
// .then((result) => {
|
||
|
|
// // console.log(result.data);
|
||
|
|
|
||
|
|
// if (result.error) {
|
||
|
|
// seterror(result.error);
|
||
|
|
// } else {
|
||
|
|
// setaddreses(result.data.address);
|
||
|
|
|
||
|
|
// // console.log("length on search " + result.data?.results.length);
|
||
|
|
|
||
|
|
// // setloading(false);
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
// .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.goBack()}
|
||
|
|
style={styles.backIcon}
|
||
|
|
>
|
||
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Text style={styles.headerText}>My Address</Text>
|
||
|
|
</View>
|
||
|
|
<ScrollView>
|
||
|
|
<View style={styles.wrapper}>
|
||
|
|
{addreses?.map((add, i) => (
|
||
|
|
<View style={styles.add} key={i}>
|
||
|
|
<View
|
||
|
|
key={i}
|
||
|
|
style={styles.listItem}
|
||
|
|
// onPress={() => setselected(i)}
|
||
|
|
>
|
||
|
|
<View style={styles.listleft}>
|
||
|
|
<View style={styles.listtop}>
|
||
|
|
<Text style={styles.listItemText}>Recipient: </Text>
|
||
|
|
<Text style={styles.listItemTextPrice}>
|
||
|
|
{add.first_name} {add.last_name}, {add.phone}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
<Text style={styles.listItemText}>Address:</Text>
|
||
|
|
<Text style={styles.listItemTexteta} numberOfLines={4}>
|
||
|
|
{" "}
|
||
|
|
{add.address_1 +
|
||
|
|
" " +
|
||
|
|
add.address_2 +
|
||
|
|
", " +
|
||
|
|
add.barangay +
|
||
|
|
", " +
|
||
|
|
add.city +
|
||
|
|
", " +
|
||
|
|
add.province +
|
||
|
|
" "}
|
||
|
|
{add.country === "PH" ? "Philippines" : add.country}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
<TouchableOpacity onPress={() => removeAddress(i)}>
|
||
|
|
<FontAwesomeIcon icon={faTrash} color={"#696969"} size={18} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
<View style={styles.btnBot}>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() => setBilling(i)}
|
||
|
|
style={
|
||
|
|
add.billing === false ? styles.select : styles.selectActive
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Text style={styles.selectBtnText}>Billing</Text>
|
||
|
|
{add.billing === true ? (
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faCheck}
|
||
|
|
color={"#d4c600"}
|
||
|
|
size={20}
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
</TouchableOpacity>
|
||
|
|
<TouchableOpacity
|
||
|
|
onPress={() => setShipping(i)}
|
||
|
|
style={
|
||
|
|
add.shipping === false ? styles.select : styles.selectActive
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Text style={styles.selectBtnText}>Shipping</Text>
|
||
|
|
|
||
|
|
{add.shipping === true ? (
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faCheck}
|
||
|
|
color={"#d4c600"}
|
||
|
|
size={20}
|
||
|
|
/>
|
||
|
|
) : null}
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
|
||
|
|
<View style={styles.footer}>
|
||
|
|
<TouchableOpacity
|
||
|
|
style={styles.footerBtn}
|
||
|
|
onPress={() =>
|
||
|
|
navigation.navigate("AddressCreate", {
|
||
|
|
isrefresh: !refresh,
|
||
|
|
address: addreses ?? [],
|
||
|
|
})
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Text style={styles.footerBtnText}>Add New Address</Text>
|
||
|
|
<FontAwesomeIcon icon={faPlus} color={"#ffff"} />
|
||
|
|
</TouchableOpacity>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
container: {
|
||
|
|
backgroundColor: "#ffff",
|
||
|
|
width: "100%",
|
||
|
|
height: "100%",
|
||
|
|
paddingBottom: 60,
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
height: "90%",
|
||
|
|
width: "100%",
|
||
|
|
// marginBottom:80
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
wrapper: {
|
||
|
|
// height: "85%",
|
||
|
|
paddingTop: 25,
|
||
|
|
width: "100%",
|
||
|
|
// justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
// height: "100%",
|
||
|
|
},
|
||
|
|
add: {
|
||
|
|
margin: 5,
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
listItem: {
|
||
|
|
backgroundColor: "#ffffff",
|
||
|
|
|
||
|
|
width: "100%",
|
||
|
|
borderWidth: 1,
|
||
|
|
borderColor: "#ececec",
|
||
|
|
padding: 15,
|
||
|
|
flexDirection: "row",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
alignItems: "center",
|
||
|
|
},
|
||
|
|
listleft: {
|
||
|
|
width: "93%",
|
||
|
|
},
|
||
|
|
listtop: {
|
||
|
|
flexDirection: "row",
|
||
|
|
paddingBottom: 10,
|
||
|
|
},
|
||
|
|
listItemText: {
|
||
|
|
fontSize: 16,
|
||
|
|
|
||
|
|
fontWeight: "600",
|
||
|
|
},
|
||
|
|
listItemTextPrice: {
|
||
|
|
fontSize: 16,
|
||
|
|
fontWeight: "600",
|
||
|
|
color: "#696969",
|
||
|
|
marginLeft: 10,
|
||
|
|
},
|
||
|
|
listItemTexteta: {
|
||
|
|
fontSize: 14,
|
||
|
|
marginTop: 5,
|
||
|
|
fontWeight: "500",
|
||
|
|
color: "#818181",
|
||
|
|
marginLeft: 10,
|
||
|
|
},
|
||
|
|
footer: {
|
||
|
|
position: "absolute",
|
||
|
|
bottom: 0,
|
||
|
|
width: "100%",
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
paddingVertical: 10,
|
||
|
|
},
|
||
|
|
footerBtn: {
|
||
|
|
backgroundColor: "#ff5e00",
|
||
|
|
width: "90%",
|
||
|
|
borderRadius: 20,
|
||
|
|
paddingVertical: 10,
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
},
|
||
|
|
footerBtnText: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 16,
|
||
|
|
marginRight: 10,
|
||
|
|
},
|
||
|
|
selectBtnText: {
|
||
|
|
color: "#929292",
|
||
|
|
fontSize: 15,
|
||
|
|
marginRight: 10,
|
||
|
|
letterSpacing: 0.6,
|
||
|
|
},
|
||
|
|
select: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
width: "49%",
|
||
|
|
paddingVertical: 10,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: "#dddddd",
|
||
|
|
backgroundColor: "#f0f0f0",
|
||
|
|
},
|
||
|
|
selectActive: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
width: "49%",
|
||
|
|
paddingVertical: 10,
|
||
|
|
borderWidth: 2,
|
||
|
|
borderColor: "#ffaa00",
|
||
|
|
fontWeight: "600",
|
||
|
|
},
|
||
|
|
btnBot: {
|
||
|
|
justifyContent: "center",
|
||
|
|
alignItems: "center",
|
||
|
|
flexDirection: "row",
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export default Addresses;
|