683 lines
20 KiB
JavaScript
683 lines
20 KiB
JavaScript
import {
|
|
faBagShopping,
|
|
faBox,
|
|
faCarSide,
|
|
faCircleQuestion,
|
|
faClock,
|
|
faHeart,
|
|
faI,
|
|
faKey,
|
|
faRankingStar,
|
|
faTruck,
|
|
faUserGear,
|
|
faWallet,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import { useIsFocused, useNavigation } from "@react-navigation/native";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Dimensions,
|
|
TouchableOpacity,
|
|
Image,
|
|
ScrollView,
|
|
FlatList,
|
|
} from "react-native";
|
|
import MasonryList from "@react-native-seoul/masonry-list";
|
|
import Card from "../../components/profile/Card";
|
|
import { faStar } from "@fortawesome/free-solid-svg-icons";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import SelectDropdown from "react-native-select-dropdown";
|
|
import { get_orders_by_customer } from "../../services/api/controllers/order";
|
|
const width = Dimensions.get("window").width;
|
|
|
|
const settings = [
|
|
{
|
|
icon: <FontAwesomeIcon icon={faBagShopping} color={"#777777"} size={25} />,
|
|
label: "My Purchases",
|
|
nav: "MyPurchases",
|
|
},
|
|
// {
|
|
// icon: <FontAwesomeIcon icon={faWallet} color={"#777777"} size={25} />,
|
|
// label: "My Wallet",
|
|
// nav: "MyWallet",
|
|
// },
|
|
{
|
|
icon: <FontAwesomeIcon icon={faHeart} color={"#777777"} size={25} />,
|
|
label: "My Favorites",
|
|
nav: "MyFavorites",
|
|
},
|
|
// {
|
|
// icon: <FontAwesomeIcon icon={faClock} color={"#777777"} size={25} />,
|
|
// label: "View History",
|
|
// nav: "ViewHistory",
|
|
// },
|
|
{
|
|
icon: <FontAwesomeIcon icon={faUserGear} color={"#777777"} size={25} />,
|
|
label: "Account Settings",
|
|
nav: "AccountSettings",
|
|
},
|
|
{
|
|
icon: (
|
|
<FontAwesomeIcon icon={faCircleQuestion} color={"#777777"} size={25} />
|
|
),
|
|
label: "Help Center",
|
|
nav: "HelpCenter",
|
|
},
|
|
{
|
|
icon: <FontAwesomeIcon icon={faKey} color={"#777777"} size={25} />,
|
|
label: "Privacy Policy",
|
|
nav: "Privacy",
|
|
},
|
|
];
|
|
|
|
const Profile = ({ userLoggedin }) => {
|
|
const navigation = useNavigation();
|
|
const countries = ["Egypt", "Canada", "Australia", "Ireland"];
|
|
const [user, setuser] = useState([]);
|
|
const [purchase, setpurchase] = useState([]);
|
|
const [error, setError] = useState(null);
|
|
const [toShip, settoship] = useState(0);
|
|
const [toPay, settopay] = useState(0);
|
|
const [toReceive, settoreceived] = useState(0);
|
|
const [completed, setcomplete] = useState(0);
|
|
const [isLoggedin, setisLoggedin] = useState(false);
|
|
|
|
const isFocused = useIsFocused();
|
|
|
|
// AsyncStorage.getItem("userData")
|
|
// .then((pass) => {
|
|
// const userDataArray = JSON.parse(pass);
|
|
// setuser(userDataArray);
|
|
// })
|
|
// .catch((error) => {
|
|
// console.log(error + "weeewwww");
|
|
// });
|
|
useEffect(() => {
|
|
AsyncStorage.getItem("AccessToken")
|
|
.then((pass) => {
|
|
if (pass) {
|
|
setisLoggedin(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}, [isFocused]);
|
|
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
if (pass !== null) {
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
get_orders_by_customer({
|
|
id: userDataArray[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
console.log("result" + result.data);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else {
|
|
setpurchase(result.data);
|
|
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
|
|
setcomplete(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "COMPLETED" || item.status === "Completed"
|
|
) ?? []
|
|
);
|
|
settoreceived(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO RECEIVE" ||
|
|
item.status === "To Receive"
|
|
) ?? []
|
|
);
|
|
settopay(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO PAY" || item.status === "To Pay"
|
|
) ?? []
|
|
);
|
|
settoship(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO SHIP" || item.status === "To Ship"
|
|
) ?? []
|
|
);
|
|
console.log(purchaseSorted);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}, []);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
|
|
if (userLoggedin == true) {
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
if (pass !== null) {
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
get_orders_by_customer({
|
|
id: userDataArray[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
console.log("result" + result.data);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else {
|
|
setpurchase(result.data);
|
|
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
|
|
setcomplete(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "COMPLETED" ||
|
|
item.status === "Completed"
|
|
) ?? []
|
|
);
|
|
settoreceived(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO RECEIVE" ||
|
|
item.status === "To Receive"
|
|
) ?? []
|
|
);
|
|
settopay(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO PAY" || item.status === "To Pay"
|
|
) ?? []
|
|
);
|
|
settoship(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO SHIP" || item.status === "To Ship"
|
|
) ?? []
|
|
);
|
|
console.log(purchaseSorted);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
} else if (userLoggedin == false) {
|
|
setpurchase([]);
|
|
setuser([]);
|
|
}
|
|
}, [userLoggedin]);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
console.log("prof loaded" + userLoggedin);
|
|
if (user) {
|
|
console.log("prof loaded here");
|
|
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
if (pass !== null) {
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
get_orders_by_customer({
|
|
id: userDataArray[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
console.log("result" + result.data);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else {
|
|
setpurchase(result.data);
|
|
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
|
|
setcomplete(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "COMPLETED" ||
|
|
item.status === "Completed"
|
|
) ?? []
|
|
);
|
|
settoreceived(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO RECEIVE" ||
|
|
item.status === "To Receive"
|
|
) ?? []
|
|
);
|
|
settopay(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO PAY" || item.status === "To Pay"
|
|
) ?? []
|
|
);
|
|
settoship(
|
|
result.data?.filter(
|
|
(item) =>
|
|
item.status === "TO SHIP" || item.status === "To Ship"
|
|
) ?? []
|
|
);
|
|
console.log(purchaseSorted);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
} else if (!user) {
|
|
setpurchase([]);
|
|
setuser([]);
|
|
}
|
|
}, [isFocused]);
|
|
const shippingAddress = user[0]?.address?.find(
|
|
(address) => address.shipping === true
|
|
);
|
|
// const toShip =
|
|
// purchase?.filter(
|
|
// (item) => item.status === "TO SHIP" || item.status === "To Ship"
|
|
// ) ?? [];
|
|
// const toReceive =
|
|
// purchase?.filter(
|
|
// (item) => item.status === "TO RECEIVE" || item.status === "To Receive"
|
|
// ) ?? [];
|
|
// const toPay =
|
|
// purchase?.filter(
|
|
// (item) => item.status === "TO PAY" || item.status === "To Pay"
|
|
// ) ?? [];
|
|
// const completed =
|
|
// purchase?.filter(
|
|
// (item) => item.status === "COMPLETED" || item.status === "Completed"
|
|
// ) ?? [];
|
|
console.log(user);
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.title}>
|
|
<Text style={styles.titleText}>ACCOUNT</Text>
|
|
</View>
|
|
<View style={styles.wrapper}>
|
|
<View style={styles.header}>
|
|
<View style={styles.headerWrap}>
|
|
{user.length !== 0 ? (
|
|
<View style={styles.headerTop}>
|
|
<Image
|
|
style={{
|
|
width: 60,
|
|
height: 60,
|
|
resizeMode: "cover",
|
|
borderRadius: 100,
|
|
marginLeft: 20,
|
|
}}
|
|
source={{
|
|
uri:
|
|
user[0]?.customer_image ??
|
|
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQyvLBxIU54Q3fueLL83PvG1eNSofzpwE-iwA&usqp=CAU",
|
|
}}
|
|
/>
|
|
<View style={styles.headerTopLeft}>
|
|
<View style={styles.details}>
|
|
<Text style={styles.headerTopSubText}>Username: </Text>
|
|
|
|
<Text style={styles.headerTopText}>
|
|
{user[0]?.first_name} {user[0]?.last_name}
|
|
</Text>
|
|
</View>
|
|
<View style={styles.details}>
|
|
<Text style={styles.headerTopSubText}>
|
|
Delivery Address:
|
|
</Text>
|
|
<Text style={styles.headerTopSubTextP}>
|
|
{shippingAddress !== null
|
|
? `${
|
|
shippingAddress?.address_1 +
|
|
" " +
|
|
shippingAddress?.address_2 +
|
|
", " +
|
|
shippingAddress?.city +
|
|
" " +
|
|
shippingAddress?.province +
|
|
" "
|
|
}${
|
|
shippingAddress?.country === "PH"
|
|
? "Philippines"
|
|
: shippingAddress?.country
|
|
}`
|
|
: "select address"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
) : (
|
|
<View style={styles.headerToplogin}>
|
|
<TouchableOpacity
|
|
style={styles.loginBtn}
|
|
onPress={() => navigation.navigate("Login")}
|
|
>
|
|
<Text style={styles.loginBtnTxt}>LOGIN</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.headerBottom}>
|
|
<View style={styles.headerBottomTitle}>
|
|
<Text style={styles.headerBottomText}>My Orders</Text>
|
|
</View>
|
|
<View style={styles.headerBottomWrap}>
|
|
<TouchableOpacity
|
|
style={styles.headerBottomCard}
|
|
disabled={isLoggedin ? false : true}
|
|
onPress={() => {
|
|
navigation.navigate("MyPurchases", { tab: "ToPay" });
|
|
}}
|
|
>
|
|
<View style={styles.badge}>
|
|
<Text style={{ color: "#fff", fontSize: 10 }}>
|
|
{toPay?.length > 99 ? "99+" : toPay?.length ?? 0}
|
|
</Text>
|
|
</View>
|
|
<FontAwesomeIcon
|
|
icon={faWallet}
|
|
color={"#ffaa00"}
|
|
size={28}
|
|
/>
|
|
<Text style={styles.headerBottomCardText}>To Pay</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.headerBottomCard}
|
|
disabled={isLoggedin ? false : true}
|
|
onPress={() => {
|
|
navigation.navigate("MyPurchases", { tab: "ToShip" });
|
|
}}
|
|
>
|
|
<View style={styles.badge}>
|
|
<Text style={{ color: "#fff", fontSize: 10 }}>
|
|
{toShip?.length > 99 ? "99+" : toShip?.length ?? 0}
|
|
</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon={faBox} color={"#ffaa00"} size={28} />
|
|
<Text style={styles.headerBottomCardText}>To Ship</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.headerBottomCard}
|
|
disabled={isLoggedin ? false : true}
|
|
onPress={() => {
|
|
navigation.navigate("MyPurchases", { tab: "ToReceive" });
|
|
}}
|
|
>
|
|
<View style={styles.badge}>
|
|
<Text style={{ color: "#fff", fontSize: 10 }}>
|
|
{toReceive?.length > 99 ? "99+" : toReceive?.length ?? 0}
|
|
</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon={faTruck} color={"#ffaa00"} size={28} />
|
|
<Text style={styles.headerBottomCardText}>To Receive</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.headerBottomCard}
|
|
disabled={isLoggedin ? false : true}
|
|
onPress={() => {
|
|
navigation.navigate("MyPurchases", { tab: "Completed" });
|
|
}}
|
|
>
|
|
<View style={styles.badge}>
|
|
<Text style={{ color: "#fff", fontSize: 10 }}>
|
|
{completed?.length > 99 ? "99+" : completed?.length ?? 0}
|
|
</Text>
|
|
</View>
|
|
<FontAwesomeIcon icon={faStar} color={"#ffaa00"} size={28} />
|
|
<Text style={styles.headerBottomCardText}>To Rate</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{/* <ScrollView style={styles.content1} > */}
|
|
<View style={styles.content}>
|
|
{user || user !== [] || user !== null || user !== "" ? (
|
|
<>
|
|
<View style={styles.headerBottomTitle}>
|
|
<Text style={styles.contentTopText}>Settings</Text>
|
|
</View>
|
|
<FlatList
|
|
data={settings}
|
|
keyExtractor={(item) => item.label}
|
|
style={styles.list}
|
|
numColumns={3}
|
|
showsVerticalScrollIndicator={false}
|
|
renderItem={({ item, i }) => <Card key={i} cart={item} />}
|
|
containerStyle={styles.container1}
|
|
contentContainerStyle={styles.content}
|
|
onEndReachedThreshold={0.1}
|
|
/>
|
|
</>
|
|
) : (
|
|
<View style={styles.headerBottomTitle}>
|
|
<Text style={styles.contentTopText}>Settings</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
{/* </ScrollView> */}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#fff",
|
|
height: "100%",
|
|
width: width,
|
|
},
|
|
header: {
|
|
// position: "fixed",
|
|
width: "100%",
|
|
height: 260,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
borderColor: "#f0f0f0dd",
|
|
borderBottomWidth: 1,
|
|
// top: 0,
|
|
},
|
|
title: {
|
|
backgroundColor: "#ffaa00",
|
|
width: "100%",
|
|
top: 10,
|
|
justifyContent: "center",
|
|
padding: 10,
|
|
paddingLeft: 20,
|
|
},
|
|
titleText: {
|
|
// padding:10,
|
|
color: "#fff",
|
|
fontWeight: "600",
|
|
},
|
|
loginBtn: {
|
|
backgroundColor: "#ffaa00",
|
|
paddingHorizontal: 35,
|
|
paddingVertical: 10,
|
|
},
|
|
loginBtnTxt: {
|
|
color: "#fff",
|
|
fontWeight: "600",
|
|
letterSpacing: 0.8,
|
|
},
|
|
badge: {
|
|
position: "absolute",
|
|
top: -10,
|
|
right: -10,
|
|
zIndex: 20,
|
|
height: 20,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: 20,
|
|
color: "#ff2626",
|
|
backgroundColor: "#ff2626",
|
|
borderRadius: 20,
|
|
},
|
|
headerWrap: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: "90%",
|
|
},
|
|
|
|
headerTop: {
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
},
|
|
headerTopText: {
|
|
// padding:10,
|
|
textTransform: "capitalize",
|
|
letterSpacing: 0.7,
|
|
color: "#2c2c2c",
|
|
fontWeight: "600",
|
|
},
|
|
headerTopLeft: {
|
|
width: "80%",
|
|
padding: 10,
|
|
},
|
|
details: {
|
|
// justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
},
|
|
headerTopSubText: {
|
|
color: "#666666",
|
|
fontWeight: "600",
|
|
fontSize: 12,
|
|
},
|
|
headerTopSubTextP: {
|
|
color: "#464646",
|
|
fontWeight: "400",
|
|
fontSize: 12,
|
|
margin: 5,
|
|
width: "65%",
|
|
},
|
|
headerBottom: {
|
|
marginVertical: 15,
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
// flexDirection: "row",
|
|
},
|
|
headerBottomTitle: {
|
|
// justifyContent: "space-between",
|
|
// alignItems: "center",
|
|
width: "100%",
|
|
// flexDirection: "row",
|
|
},
|
|
headerBottomText: {
|
|
// padding:10,
|
|
color: "#333333",
|
|
fontWeight: "600",
|
|
fontSize: 13,
|
|
textAlign: "left",
|
|
marginLeft: 20,
|
|
},
|
|
headerBottomWrap: {
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "70%",
|
|
flexDirection: "row",
|
|
marginTop: 18,
|
|
},
|
|
headerBottomCard: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
headerBottomCardText: {
|
|
color: "#5e5e5e",
|
|
fontWeight: "400",
|
|
fontSize: 11,
|
|
marginTop: 5,
|
|
},
|
|
footer: {
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
backgroundColor: "#ffffff",
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
// justifyContent: "center",
|
|
// alignItems: "center",
|
|
},
|
|
container1: {
|
|
width: "100%",
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
// justifyContent: "center",
|
|
// alignItems: "center",
|
|
height: "100%",
|
|
},
|
|
content: {
|
|
display: "flex",
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: "#fffdf8",
|
|
},
|
|
content1: {
|
|
display: "flex",
|
|
width: "100%",
|
|
height: "100%",
|
|
backgroundColor: "#fffdf8",
|
|
},
|
|
contentTopText: {
|
|
// padding:10,
|
|
color: "#000000",
|
|
fontWeight: "600",
|
|
marginLeft: 10,
|
|
padding: 10,
|
|
},
|
|
subContent: {
|
|
width: "40%",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
height: 60,
|
|
borderColor: "#f0f0f0dd",
|
|
borderWidth: 1,
|
|
},
|
|
});
|
|
|
|
export default Profile;
|