489 lines
13 KiB
JavaScript
489 lines
13 KiB
JavaScript
import { faHeart } from "@fortawesome/free-solid-svg-icons";
|
|
import { faArrowLeft, faStar } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
Dimensions,
|
|
Image,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import Tab from "../../components/shop/Tab";
|
|
import {
|
|
get_customer,
|
|
update_customer,
|
|
} from "../../services/api/controllers/customers";
|
|
import { get_products_by_vendor } from "../../services/api/controllers/product";
|
|
import { get_vendor } from "../../services/api/controllers/vendor";
|
|
|
|
const ShopSinglePage = ({ route,productList }) => {
|
|
const navigation = useNavigation();
|
|
const { product } = route.params;
|
|
const [prod, setprod] = useState([]);
|
|
const [products, setproducts] = useState([]);
|
|
|
|
const scrollViewRef = useRef(null);
|
|
const [isEndReached, setEndReached] = useState(false);
|
|
|
|
const [user, setuser] = useState([]);
|
|
const [error, seterror] = useState([]);
|
|
const [item, setitem] = useState(20);
|
|
const [liked, setliked] = useState([]);
|
|
const [isLiked, setisLiked] = useState(false);
|
|
console.log(product);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
if (liked) {
|
|
console.log(liked?.vendors);
|
|
|
|
const exists = liked?.vendors?.some(
|
|
(prod) => prod._id === product?._id
|
|
);
|
|
console.log("exist" + exists);
|
|
console.log("product" + product?._id);
|
|
|
|
if (
|
|
exists !== [] &&
|
|
exists &&
|
|
exists !== "" &&
|
|
exists !== undefined &&
|
|
exists !== exists?.length < 0 &&
|
|
exists !== " "
|
|
) {
|
|
console.log("exx");
|
|
setisLiked(true);
|
|
}
|
|
}
|
|
}, [liked]);
|
|
|
|
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 {
|
|
setliked(result?.data?.favorites);
|
|
}
|
|
})
|
|
.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);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
get_products_by_vendor({
|
|
id: product._id,
|
|
})
|
|
.then((result) => {
|
|
if (result.status === 200) {
|
|
console.log("successful get vendor products: " + result.data);
|
|
// setvendorName(result.data.user_login);
|
|
setproducts(result.data.filter(
|
|
(item) => item.product_type !== "variation" &&
|
|
item.product_image !== "" &&
|
|
item.product_image !== null
|
|
));
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
});
|
|
}, []);
|
|
useEffect(() => {
|
|
setprod(products.splice(0, item ?? 0));
|
|
}, [products]);
|
|
|
|
useEffect(() => {
|
|
// if (isEndReach===true) {
|
|
// console.log("onEndReached event triggered");
|
|
// console.log("item:", item);
|
|
// console.log("product length:", product.length);
|
|
if (item <= products.length) {
|
|
// setprod(product.splice(1, item));
|
|
|
|
setprod([...prod, ...products.slice(item, item + 10)]);
|
|
// setitem(item + 10);
|
|
}
|
|
// }
|
|
}, [item]);
|
|
const handleScroll = (event) => {
|
|
const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent;
|
|
const isAtEnd =
|
|
layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
|
|
|
|
if (isAtEnd) {
|
|
// You've reached the end of the ScrollView
|
|
setEndReached(true);
|
|
console.log("end here");
|
|
setitem(item + 15);
|
|
// setEndReached(false);
|
|
// console.log("item" + item);
|
|
}
|
|
};
|
|
const likeClicked = () => {
|
|
if (!isLiked) {
|
|
// if (liked?.length > 0 && liked !== undefined && liked !== []) {
|
|
const like = liked;
|
|
like?.vendors?.push(product);
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: like,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
setisLiked(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
console.log(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
} else {
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
const updatedProduct = liked.vendors.filter(
|
|
(prod) => prod._id !== product?._id
|
|
);
|
|
// return { ...favorite, vendors: updatedProduct };
|
|
// });
|
|
const fave = {
|
|
products:liked?.products ,
|
|
vendors: updatedProduct,
|
|
};
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: fave,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
setisLiked(false);
|
|
|
|
// 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
|
|
});
|
|
}
|
|
};
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.goBack()}
|
|
style={styles.backIcon}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
<ScrollView
|
|
style={styles.wrapper}
|
|
ref={scrollViewRef}
|
|
onScroll={handleScroll}
|
|
>
|
|
<View style={styles.top}>
|
|
<View style={styles.topWrap}>
|
|
<View style={styles.topBanner}>
|
|
<Image
|
|
style={styles.imgs}
|
|
source={{
|
|
uri: product?.vendor_banner ?? product?.vendor_image ?? "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={styles.topDetails}>
|
|
<View style={styles.topDetailsMain}>
|
|
<View style={styles.topDetailsMainProfile}>
|
|
<Image
|
|
style={styles.topDetailsMainProfileImg}
|
|
source={{
|
|
uri: product?.vendor_image ?? "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={styles.topDetailsMainProfileDetails}>
|
|
<View style={styles.topDetailsMainProfileDetailsContents}>
|
|
<Text style={styles.text} numberOfLines={1}>
|
|
{product.user_login}
|
|
</Text>
|
|
<View style={styles.rateCon}>
|
|
<>
|
|
<Text style={styles.textHead}>Address: </Text>
|
|
|
|
<Text style={styles.textRate}>
|
|
{product?.address[0]?.city}, {product?.address[0]?.province}{" "}
|
|
</Text>
|
|
</>
|
|
</View>
|
|
<View style={styles.rateCon}>
|
|
{/* {product.rate ? ( */}
|
|
<>
|
|
<Text style={styles.textHead}>Rating: </Text>
|
|
<FontAwesomeIcon
|
|
icon={faStar}
|
|
color={"#eede00"}
|
|
size={15}
|
|
/>
|
|
<Text style={styles.textRate}>
|
|
{product.rate??0} ({product.raterTotal??0})
|
|
</Text>
|
|
</>
|
|
{/* ) : (
|
|
<Text>No rating </Text>
|
|
)} */}
|
|
</View>
|
|
<View style={styles.rateCon}>
|
|
{/* {product.respoTime ? ( */}
|
|
<>
|
|
<Text style={styles.textHead}>
|
|
Average Response Time:{" "}
|
|
</Text>
|
|
|
|
<Text style={styles.textRate}>
|
|
{product.respoTime??0}
|
|
</Text>
|
|
</>
|
|
{/* ) : (
|
|
<Text>No rating </Text>
|
|
)} */}
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity
|
|
style={styles.topDetailsMainProfileDetailsFollow}
|
|
onPress={() => {
|
|
likeClicked();
|
|
}}
|
|
>
|
|
{isLiked ? (
|
|
<FontAwesomeIcon
|
|
icon={faHeart}
|
|
color={"#d40000"}
|
|
size={20}
|
|
/>
|
|
) : (
|
|
<FontAwesomeIcon
|
|
icon={faHeart}
|
|
color={"#c0c0c0"}
|
|
size={20}
|
|
/>
|
|
)}
|
|
|
|
{/* <Text style={styles.textFollow} numberOfLines={1}>
|
|
Follow
|
|
</Text> */}
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View style={styles.bottomDetails}>
|
|
{/* <Text style={styles.textHead2}>Address: </Text> */}
|
|
|
|
<View style={styles.bottomDetailsCat}></View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.bottom}>
|
|
<Tab info={product.info} prod={prod} item={item} productList={productList}/>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#ffffff",
|
|
width: "100%",
|
|
height: "100%",
|
|
flex: 1,
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
height: "100%",
|
|
},
|
|
header: {
|
|
// position: "fixed",
|
|
width: "100%",
|
|
top: 0,
|
|
paddingVertical: 10,
|
|
marginBottom: 5,
|
|
marginLeft: 15,
|
|
zIndex: 10,
|
|
// backgroundColor: "#ff0909",
|
|
},
|
|
backIcon: {
|
|
// width:10
|
|
},
|
|
imgs: {
|
|
width: "100%",
|
|
height: 220,
|
|
resizeMode: "cover",
|
|
margin: "auto",
|
|
// borderRadius: 10,
|
|
},
|
|
tabs: {
|
|
height: 80,
|
|
width: "100%",
|
|
position: "absolute",
|
|
bottom: 100,
|
|
},
|
|
top: {
|
|
width: "100%",
|
|
// top:-20,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
topWrap: {
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
topBanner: {
|
|
width: "100%",
|
|
},
|
|
topDetails: {
|
|
width: "100%",
|
|
},
|
|
topDetailsMain: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
paddingHorizontal: 10,
|
|
// backgroundColor: "#ff3131",
|
|
paddingTop: 10,
|
|
},
|
|
topDetailsMainProfile: {
|
|
width: 110,
|
|
height: 110,
|
|
borderRadius: 200,
|
|
top: -30,
|
|
borderColor: "#dddd",
|
|
borderWidth: 1,
|
|
backgroundColor: "#fff",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
},
|
|
topDetailsMainProfileImg: {
|
|
width: 97,
|
|
height: 97,
|
|
borderRadius: 200,
|
|
borderColor: "#dddd",
|
|
borderWidth: 1,
|
|
},
|
|
topDetailsMainProfileDetails: {
|
|
width: "55%",
|
|
},
|
|
topDetailsMainProfileDetailsContents: {
|
|
margin: 0,
|
|
},
|
|
|
|
topDetailsMainProfileDetailsFollow: {
|
|
borderColor: "#dddd",
|
|
borderWidth: 1,
|
|
padding: 0,
|
|
paddingHorizontal: 15,
|
|
flexDirection: "row",
|
|
borderRadius: 50,
|
|
height: 40,
|
|
justifyContent: "space-around",
|
|
alignItems: "center",
|
|
marginTop: 20,
|
|
},
|
|
|
|
text: {
|
|
fontSize: 15,
|
|
fontWeight: "900",
|
|
textTransform: "uppercase",
|
|
color: "#333",
|
|
letterSpacing: 0.5,
|
|
},
|
|
textFollow: {
|
|
fontSize: 10,
|
|
fontWeight: "900",
|
|
textTransform: "uppercase",
|
|
color: "#ff0000",
|
|
letterSpacing: 0.5,
|
|
marginLeft: 5,
|
|
},
|
|
rateCon: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingVertical: 3,
|
|
},
|
|
textHead: {
|
|
fontSize: 10,
|
|
color: "#292929",
|
|
},
|
|
textRate: {
|
|
fontSize: 11,
|
|
color: "#838383",
|
|
textTransform: "capitalize",
|
|
},
|
|
bottom: {
|
|
// width: "100%",
|
|
// height:'100%',
|
|
borderColor: "#dddd",
|
|
borderWidth: 1,
|
|
},
|
|
bottomDetails: {
|
|
width: "100%",
|
|
paddingBottom: 10,
|
|
paddingHorizontal: 20,
|
|
},
|
|
textHead2: {
|
|
fontSize: 13,
|
|
color: "#292929",
|
|
fontWeight: "600",
|
|
},
|
|
});
|
|
export default ShopSinglePage;
|