Obanana_test/app/components/product/ShopPrev.jsx

158 lines
3.7 KiB
JavaScript

import { faMessage } from "@fortawesome/free-regular-svg-icons";
import { faLocationPin } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { useNavigation } from "@react-navigation/native";
import React, { useEffect, useState } from "react";
import {
FlatList,
Image,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from "react-native";
import { get_vendor } from "../../services/api/controllers/vendor";
const ShopPrev = ({ shopId }) => {
const [vendor, setvendor] = useState();
const [error, seterror] = useState();
const navigation = useNavigation();
useEffect(() => {
get_vendor({ id: shopId })
.then((result) => {
if (result.error) {
seterror(result.error);
} else {
console.log("result" + result.data.user_login);
setvendor(result.data);
}
})
.catch((error) => {
seterror(error.message);
})
.finally(() => {
// setIsLoading(false); // Set loading to false when done loading
});
}, []);
return (
<View style={styles.container}>
{/* <Text style={styles.header}>ShopPrev</Text> */}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 15,
}}
>
<Image
style={{
width: "100%",
height: 50,
width: 50,
resizeMode: "cover",
borderRadius: 90,
}}
source={{
uri: `${
vendor?.vendor_image ??
"https://coopbiz.ph/wp-content/plugins/yith-woocommerce-multi-vendor-premium/assets/images/shop-placeholder.jpg"
}`,
}}
/>
<View style={styles.shopDetails}>
<Text numberOfLines={2} style={styles.header}>
{vendor?.user_login}
</Text>
</View>
<TouchableOpacity
style={styles.messageBtn}
onPress={() => navigation.navigate("Shop", { product: vendor })}
>
<Text style={styles.btnText}>Visit Shop</Text>
</TouchableOpacity>
</View>
<Text style={styles.header2}>
{" "}
<FontAwesomeIcon
icon={faLocationPin}
color={"#c2c2c2"}
size={10}
/>{" "}
{vendor?.address[0]?.city ? vendor?.address[0]?.city : null}
</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
// flex: 1,
backgroundColor: "#fafafa",
// alignItems: "center",
// justifyContent: "center",
width: "100%",
marginVertical: 10,
padding: 10,
borderWidth: 1,
borderColor: "#eeee",
marginBottom: 15,
// height: "87%",
},
wrapper: {
width: "100%",
height: 200,
// backgroundColor: "#ffaa00",
padding: 10,
},
header: {
fontSize: 14,
fontWeight: "700",
// textTransform: "uppercase",
paddingHorizontal: 5,
},
header2: {
fontSize: 14,
fontWeight: "400",
// textTransform: "uppercase",
paddingHorizontal: 5,
marginTop: 15,
},
shopDetails: {
padding: 10,
width: "60%",
},
img: {
width: 80,
height: 80,
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#ffefce",
padding: 10,
},
AddUser: {
padding: 10,
},
messageBtn: {
// width: 80,
// height: 80,
flexDirection: "row",
resizeMode: "cover",
borderRadius: 10,
backgroundColor: "#dfff6c",
padding: 10,
},
btnText: {
fontSize: 14,
fontWeight: "600",
// textTransform: "uppercase",
paddingHorizontal: 5,
color: "#698600",
},
});
export default ShopPrev;