894 lines
26 KiB
JavaScript
894 lines
26 KiB
JavaScript
import {
|
|
faArrowLeft,
|
|
faCartShopping,
|
|
faComment,
|
|
faHeart,
|
|
faMessage,
|
|
faStar,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import {
|
|
useIsFocused,
|
|
useNavigation,
|
|
useRoute,
|
|
} from "@react-navigation/native";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Dimensions,
|
|
FlatList,
|
|
Image,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import Modal from "react-native-modal";
|
|
|
|
import RenderHTML from "react-native-render-html";
|
|
import BottomNav from "../../components/product/BottomNav";
|
|
import ShopPrev from "../../components/product/ShopPrev";
|
|
import Variation from "../../components/product/Variation";
|
|
import {
|
|
get_customer,
|
|
update_customer,
|
|
} from "../../services/api/controllers/customers";
|
|
import { useToast } from "react-native-toast-notifications";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { get_orders_by_customer } from "../../services/api/controllers/order";
|
|
import CheckOutModal from "../../components/product/CheckOutModal";
|
|
import CustomerReview from "../../components/product/CustomerReview";
|
|
import Swiper from "react-native-swiper";
|
|
|
|
const width = Dimensions.get("window").width;
|
|
|
|
const deviceWidth = Dimensions.get("window").width;
|
|
const deviceHeight = Dimensions.get("window").width;
|
|
|
|
const ProductSinglePage = ({ setcartList, cartList, prod }) => {
|
|
const route = useRoute();
|
|
const { product } = route.params;
|
|
const [activeImg, setactiveImg] = useState(0);
|
|
const [imagesArray, setimagesArray] = useState([]);
|
|
|
|
const toast = useToast();
|
|
const [user, setuser] = useState([]);
|
|
const [error, seterror] = useState([]);
|
|
const [liked, setliked] = useState([]);
|
|
const [isLiked, setisLiked] = useState(false);
|
|
const [cartCount, setcartCount] = useState();
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [variations, setvariations] = useState([]);
|
|
const [activeVar, setactiveVar] = useState(null);
|
|
const [activeProduct, setactiveProduct] = useState(product ?? []);
|
|
const [isLoggedin, setisLoggedin] = useState(false);
|
|
const [variablePrice, setvariablePrice] = useState("");
|
|
|
|
const isFocused = useIsFocused();
|
|
useEffect(() => {
|
|
AsyncStorage.getItem("AccessToken")
|
|
.then((pass) => {
|
|
if (pass) {
|
|
setisLoggedin(true);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}, [isFocused]);
|
|
useEffect(() => {
|
|
setactiveProduct(product);
|
|
const purch = prod?.filter((item) => item?.parent_id === product._id);
|
|
|
|
const newPurch = [product, ...purch];
|
|
setvariations(newPurch);
|
|
|
|
function getLowestHighestPrice(variation) {
|
|
let lowestPrice = Infinity;
|
|
let highestPrice = -Infinity;
|
|
let hasPrice = false;
|
|
|
|
variation.forEach((item) => {
|
|
let price = null;
|
|
|
|
// If sale_price is available and not an empty string, use it; otherwise, use regular_price
|
|
if (item.sale_price && item.sale_price !== "") {
|
|
price = parseFloat(item.sale_price);
|
|
} else if (item.regular_price && item.regular_price !== "") {
|
|
price = parseFloat(item.regular_price);
|
|
}
|
|
|
|
// Update lowest and highest prices
|
|
if (price !== null) {
|
|
hasPrice = true;
|
|
lowestPrice = Math.min(lowestPrice, price);
|
|
highestPrice = Math.max(highestPrice, price);
|
|
}
|
|
});
|
|
|
|
if (!hasPrice) {
|
|
return null;
|
|
}
|
|
|
|
// If lowest and highest prices are the same, return that price alone
|
|
if (lowestPrice === highestPrice) {
|
|
return `${lowestPrice}`;
|
|
}
|
|
|
|
// Return the range of lowest to highest prices
|
|
return `${lowestPrice}-${highestPrice}`;
|
|
}
|
|
const priceRange = getLowestHighestPrice(purch);
|
|
setvariablePrice(priceRange);
|
|
console.log("-----------------------Price Range:", priceRange);
|
|
}, [isFocused]);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
if (liked) {
|
|
// console.log(liked?.products);
|
|
|
|
const exists = liked?.products?.some(
|
|
(prod) => prod._id === activeProduct?._id
|
|
);
|
|
// console.log("exist" + exists);
|
|
// console.log("product" + product?._id);
|
|
|
|
if (
|
|
// exists !== [] &&
|
|
// exists &&
|
|
// exists !== "" &&
|
|
// exists !== undefined &&
|
|
// exists !== exists?.length < 0 &&
|
|
// exists !== " "
|
|
exists
|
|
) {
|
|
// console.log("exx");
|
|
setisLiked(true);
|
|
}
|
|
}
|
|
}, [liked]);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
// if (liked) {
|
|
// console.log(liked?.products);
|
|
|
|
const exists = liked?.products?.some(
|
|
(prod) => prod._id === activeProduct?._id
|
|
);
|
|
// console.log("exist" + exists);
|
|
// console.log("product" + product?._id);
|
|
|
|
if (
|
|
// exists !== [] &&
|
|
// exists &&
|
|
// exists !== "" &&
|
|
// exists !== undefined &&
|
|
// exists !== exists?.length < 0 &&
|
|
// exists !== " "
|
|
exists
|
|
) {
|
|
// console.log("exx");
|
|
setisLiked(true);
|
|
} else {
|
|
setisLiked(false);
|
|
}
|
|
// }
|
|
}, [activeProduct]);
|
|
useEffect(() => {
|
|
const actProd = [...variations];
|
|
setisLiked(false);
|
|
setactiveProduct(actProd[activeVar]);
|
|
}, [activeVar]);
|
|
|
|
useEffect(() => {
|
|
// setrefresh(isrefresh);
|
|
setactiveProduct(product);
|
|
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 {
|
|
// const exists = result?.data?.favorites?.some((prod) => prod._id === product?._id);
|
|
// console.log( exists)
|
|
// if (exists) {
|
|
// console.log( "heyyyy")
|
|
|
|
// setisLiked(true);
|
|
// }
|
|
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);
|
|
const purch = prod?.filter((item) => item?.parent_id === product._id);
|
|
|
|
const newPurch = [product, ...purch];
|
|
setvariations(newPurch);
|
|
// console.log("var--------- " + purch);
|
|
}, []);
|
|
useEffect(() => {
|
|
/* ---------------Check for the user saved email--------------- */
|
|
AsyncStorage.getItem("userData")
|
|
.then((pass) => {
|
|
if (pass !== null) {
|
|
const userDataArray = JSON.parse(pass);
|
|
setuser(userDataArray);
|
|
console.log(userDataArray[0]?._id);
|
|
get_orders_by_customer({
|
|
id: userDataArray[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
if (result.error) {
|
|
// setError(result.error);
|
|
} else {
|
|
const purch = result.data?.filter(
|
|
(item) => item.status === "Cart" || item.status === "CART"
|
|
);
|
|
setcartCount(purch);
|
|
// console.log("purchhh" + purch);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
// setError(error.message);
|
|
setcartCount([]);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}, []);
|
|
console.log("act " + activeImg);
|
|
const navigation = useNavigation();
|
|
// Botto
|
|
|
|
const source = {
|
|
html: `
|
|
${activeProduct?.specifications}`,
|
|
};
|
|
|
|
// const imagesArray = activeProduct?.images
|
|
// ? activeProduct?.images?.split(",")
|
|
// : activeProduct?.product_image
|
|
// ?.split(",")
|
|
// .map((imageUrl) => ({ image: imageUrl.trim() }));
|
|
// console.log(imagesArray);
|
|
// console.log(
|
|
// "============================imagesArray==========================="
|
|
// );
|
|
|
|
useEffect(() => {
|
|
const imagesArray1 = activeProduct?.images
|
|
? activeProduct?.images?.split(",")
|
|
: activeProduct?.product_image
|
|
?.split(",")
|
|
.map((imageUrl) => ( imageUrl.trim() ));
|
|
setimagesArray(imagesArray1 ?? "");
|
|
console.log(
|
|
"============================imagesArray==========================="
|
|
);
|
|
console.log(imagesArray1);
|
|
console.log(
|
|
"============================imagesArray==========================="
|
|
);
|
|
// setactiveImg(0);
|
|
}, [activeProduct]);
|
|
|
|
// const likeProduct = (id) => {};
|
|
const images = [{ image: "" }];
|
|
const likeClicked = () => {
|
|
if (!isLiked) {
|
|
// if (liked?.length > 0 && liked !== undefined && liked !== []) {
|
|
const like = liked;
|
|
like?.products?.push(activeProduct);
|
|
update_customer({
|
|
id: user[0]._id,
|
|
body: {
|
|
favorites: like,
|
|
},
|
|
})
|
|
.then((result) => {
|
|
if (result.error) {
|
|
seterror(result.error);
|
|
} else {
|
|
setliked(result?.data?.favorites);
|
|
// console.log(result.data);
|
|
setisLiked(true);
|
|
|
|
// 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
|
|
});
|
|
} else {
|
|
// const updatedFavorites = liked.map((favorite) => {
|
|
const updatedProduct = liked.products.filter(
|
|
(prod) => prod._id !== activeProduct?._id
|
|
);
|
|
// return { ...favorite, products: updatedProduct };
|
|
// });
|
|
const fave = {
|
|
products: updatedProduct,
|
|
vendors: liked.vendors,
|
|
};
|
|
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
|
|
});
|
|
}
|
|
};
|
|
const handleIndexChanged = (index) => {
|
|
// This function will be called whenever the active slide changes
|
|
setactiveImg(parseInt(index) - 1);
|
|
};
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
<View style={styles.headerCon}>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.goBack()}
|
|
style={styles.backIcon}
|
|
>
|
|
<FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} />
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Cart")}
|
|
style={styles.backIcon}
|
|
>
|
|
{/* <FontAwesomeIcon icon={faArrowLeft} color={"#d4c600"} size={25} /> */}
|
|
<FontAwesomeIcon
|
|
icon={faCartShopping}
|
|
color={"#FFAA00"}
|
|
size={25}
|
|
/>
|
|
<Text style={styles.cartIconBadge}>
|
|
{cartCount?.length > 99 ? "99+" : cartCount?.length ?? 0}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<View tyle={styles.wrapper}>
|
|
<View tyle={styles.wrapperSwiper}>
|
|
<Swiper
|
|
style={styles.wrapperSwiper1}
|
|
// autoplay
|
|
loop={false}
|
|
index={activeImg} // Set the initial active slide index
|
|
showsPagination={false}
|
|
onIndexChanged={(index) => {
|
|
setactiveImg(index), console.log(index + " change");
|
|
}} // Callback when the active slide changes
|
|
>
|
|
{imagesArray?.map((e, index) => (
|
|
<Image
|
|
key={index}
|
|
style={{
|
|
width: width,
|
|
height: 450,
|
|
resizeMode: "contain",
|
|
}}
|
|
source={{
|
|
uri: `${
|
|
e !== ""
|
|
? e
|
|
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
|
|
}`,
|
|
}}
|
|
/>
|
|
))}
|
|
</Swiper>
|
|
</View>
|
|
|
|
<View style={styles.imgPrevCon}>
|
|
<FlatList
|
|
// inverted
|
|
// style={styles.wrapper}
|
|
horizontal
|
|
data={imagesArray ? imagesArray : images}
|
|
showsHorizontalScrollIndicator={false}
|
|
renderItem={({ item, index }) => {
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
setactiveImg(Math.abs(index));
|
|
}}
|
|
>
|
|
<View
|
|
style={
|
|
activeImg === Math.abs(index)
|
|
? styles.imgPrevCardActive
|
|
: styles.imgPrevCard
|
|
}
|
|
>
|
|
<Image
|
|
style={styles.imgPrev}
|
|
source={{
|
|
uri:
|
|
item !== ""
|
|
? item
|
|
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg",
|
|
}}
|
|
/>
|
|
<Text
|
|
style={{
|
|
color: "#000",
|
|
fontSize: 10,
|
|
flexWrap: "wrap",
|
|
}}
|
|
></Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}}
|
|
/>
|
|
</View>
|
|
<View
|
|
style={{
|
|
width: "100%",
|
|
padding: 10,
|
|
backgroundColor: "#fff",
|
|
border: "none",
|
|
borderColor: "#f3f3f3",
|
|
borderWidth: 1,
|
|
}}
|
|
>
|
|
<Text style={styles.text}>{activeProduct.product_name}</Text>
|
|
{product.product_type === "variable" ? (
|
|
<>
|
|
{activeVar !== null ? (
|
|
<View style={styles.priceCon}>
|
|
<Text
|
|
style={
|
|
activeProduct.sale_price
|
|
? styles.textPricePromo
|
|
: styles.textPrice
|
|
}
|
|
>
|
|
{activeProduct?.regular_price &&
|
|
activeProduct?.regular_price !== null ? (
|
|
"₱" + activeProduct?.regular_price
|
|
) : (
|
|
<TouchableOpacity style={styles.inquire}>
|
|
<Text style={styles.inquire}>Inquire for price</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</Text>
|
|
{activeProduct.sale_price ? (
|
|
<Text style={styles.textPrice}>
|
|
{/* {" "}
|
|
{(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
|
|
<Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}{" "}
|
|
{activeProduct?.sale_price}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
) : (
|
|
<View style={styles.priceCon}>
|
|
<Text style={styles.textPrice}>
|
|
{" "}
|
|
{variablePrice ? (
|
|
" ₱" + variablePrice
|
|
) : (
|
|
<TouchableOpacity>
|
|
<Text style={styles.inquire}>
|
|
Contact Seller for the price
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</Text>
|
|
{/* {activeProduct.sale_price ? (
|
|
<Text style={styles.textPrice}>
|
|
{/* {" "}
|
|
{(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
|
|
<Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}
|
|
{/* {activeProduct?.sale_price}
|
|
</Text> */}
|
|
{/* ) : null} */}
|
|
</View>
|
|
)}
|
|
</>
|
|
) : (
|
|
<View style={styles.priceCon}>
|
|
<Text
|
|
style={
|
|
activeProduct.sale_price
|
|
? styles.textPricePromo
|
|
: styles.textPrice
|
|
}
|
|
>
|
|
{activeProduct?.regular_price &&
|
|
activeProduct?.regular_price !== null ? (
|
|
"₱" + activeProduct?.regular_price
|
|
) : (
|
|
<TouchableOpacity style={styles.inquire}>
|
|
<Text style={styles.inquire}>Inquire for price</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
</Text>
|
|
{activeProduct.sale_price ? (
|
|
<Text style={styles.textPrice}>
|
|
{/* {" "}
|
|
{(activeProduct.regular_price * (1 - activeProduct.sale_price / 100)).toFixed(2)}{" "}
|
|
<Text style={{ fontWeight: "400" }}>(-{product.sale_price}%)</Text> */}{" "}
|
|
{activeProduct?.sale_price}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
)}
|
|
|
|
<View style={styles.footer}>
|
|
{product?.rate ? (
|
|
<View style={styles.rateCon}>
|
|
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={15} />
|
|
<Text style={styles.textRate}>
|
|
{product?.rate ?? 0} ({product?.raterTotal ?? 0})
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
<View style={styles.rateCon}>
|
|
<FontAwesomeIcon icon={faStar} color={"#eede00"} size={20} />
|
|
<Text style={styles.textRate}> 0</Text>
|
|
</View>
|
|
)}
|
|
<View style={styles.rateCon}>
|
|
<TouchableOpacity
|
|
style={styles.messageBtn1}
|
|
onPress={() => {
|
|
isLoggedin
|
|
? likeClicked(activeProduct?._id)
|
|
: navigation.navigate("Login");
|
|
}}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faHeart}
|
|
color={isLiked ? "#ff5c5c" : "#dbdbdb"}
|
|
size={35}
|
|
/>
|
|
</TouchableOpacity>
|
|
{/* <Text style={styles.textRate}> 0</Text> */}
|
|
<TouchableOpacity
|
|
onPress={() => navigation.navigate("Chat")}
|
|
style={styles.messageBtn}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={faComment}
|
|
size={25}
|
|
color={"#698600"}
|
|
/>
|
|
{/* <Text style={styles.btnText}>Chat</Text> */}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
<View style={styles.footer}>
|
|
<Text style={styles.textMin}>
|
|
{activeProduct?.minimum_order ? (
|
|
<>
|
|
{" "}
|
|
min. order:{" "}
|
|
{activeProduct?.minimum_order !== "" ||
|
|
activeProduct?.minimum_order !== null
|
|
? activeProduct?.minimum_order
|
|
: 1}{" "}
|
|
{activeProduct?.per ?? ""}
|
|
</>
|
|
) : null}
|
|
</Text>
|
|
<Text style={styles.textSold}>
|
|
stock: {activeProduct?.stock ?? 0}
|
|
</Text>
|
|
<Text style={styles.textSold}>
|
|
{activeProduct?.sold ?? 0} sold
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{product.product_type === "variable" ? (
|
|
<Variation
|
|
prod={product}
|
|
vars={variations}
|
|
setactiveVar={setactiveVar}
|
|
/>
|
|
) : null}
|
|
|
|
<ShopPrev shopId={product?.vendor_api_id} />
|
|
<Text style={styles.header1}>Description</Text>
|
|
<View style={{ padding: 15 }}>
|
|
{activeProduct?.specifications ? (
|
|
<RenderHTML contentWidth={width} source={source} />
|
|
) : (
|
|
<>
|
|
<Text>{product.product_name}</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
{/* <CustomerReview /> */}
|
|
</ScrollView>
|
|
<View style={styles.footerButton}>
|
|
<BottomNav
|
|
product={activeProduct ? activeProduct : null}
|
|
cartList={cartList}
|
|
setcartList={setcartList}
|
|
setModalVisible={setModalVisible}
|
|
activeVar={activeVar}
|
|
/>
|
|
</View>
|
|
<Modal
|
|
animationType="slide"
|
|
animationIn={"bounceInUp"}
|
|
transparent={true}
|
|
isVisible={modalVisible}
|
|
onSwipeComplete={() => setModalVisible(false)}
|
|
swipeDirection={"down"}
|
|
// swipeThreshold="100"
|
|
backdropOpacity={0.1}
|
|
style={{ margin: 0 }}
|
|
propagateSwipe={true}
|
|
deviceWidth={deviceWidth}
|
|
// deviceHeight={deviceHeight}
|
|
onRequestClose={() => {
|
|
setModalVisible(!modalVisible);
|
|
}}
|
|
>
|
|
{/* <ReceiptCard onRequestClose={setModalVisible} cart={cart} /> */}
|
|
<CheckOutModal setModalVisible={setModalVisible} />
|
|
</Modal>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#fff",
|
|
height: "100%",
|
|
width: "100%",
|
|
},
|
|
headerCon: {
|
|
// position: "absolute",
|
|
// height: 90,
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
flexDirection: "row",
|
|
top: 0,
|
|
padding: 15,
|
|
// backgroundColor: "#f75656",
|
|
},
|
|
header1: {
|
|
// position: "fixed",
|
|
width: "100%",
|
|
top: 0,
|
|
fontWeight: "bold",
|
|
paddingHorizontal: 15,
|
|
},
|
|
backIcon: {
|
|
// marginLeft: 20,
|
|
backgroundColor: "#f1f1f1",
|
|
// backgroundColor: "#98eb00",
|
|
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
width: 50,
|
|
height: 50,
|
|
borderRadius: 50,
|
|
marginBottom: 10,
|
|
},
|
|
cartIconBadge: {
|
|
position: "absolute",
|
|
top: 0,
|
|
right: 0,
|
|
borderRadius: 50,
|
|
backgroundColor: "#f75656",
|
|
width: 18,
|
|
height: 18,
|
|
textAlign: "center",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
color: "#fff",
|
|
fontSize: 11,
|
|
// padding: 10,
|
|
},
|
|
inquire: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
// textTransform: "capitalize",
|
|
// textDecorationLine: "line-through",
|
|
color: "#ffaa00",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
height: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
wrapperSwiper: {
|
|
// width: width,
|
|
height: "100%",
|
|
// flex: 1,
|
|
// height: 450,
|
|
// zIndex: 1000,
|
|
},
|
|
wrapperSwiper1: {
|
|
// width: "100%",
|
|
// width: width,
|
|
height: 450,
|
|
// maxHeight: "60%",
|
|
// backgroundColor: "#f75656",
|
|
|
|
// height: 500,
|
|
// zIndex: 1000,
|
|
},
|
|
header: {
|
|
fontSize: 14,
|
|
fontWeight: "700",
|
|
textTransform: "uppercase",
|
|
},
|
|
text: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#333",
|
|
letterSpacing: 0.5,
|
|
},
|
|
imgPrevCon: {
|
|
borderWidth: 1,
|
|
borderColor: "#eeee",
|
|
},
|
|
imgPrevCard: {
|
|
borderWidth: 1,
|
|
borderColor: "#eeee",
|
|
width: 110,
|
|
height: 110,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 2,
|
|
},
|
|
imgPrevCardActive: {
|
|
borderWidth: 5,
|
|
borderColor: "#585858ed",
|
|
width: 110,
|
|
height: 110,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 2,
|
|
},
|
|
imgPrev: {
|
|
width: 100,
|
|
height: 100,
|
|
resizeMode: "cover",
|
|
// margin: "auto",
|
|
// borderRadius: 10,
|
|
top: 7,
|
|
// padding: 10,
|
|
},
|
|
messageBtn: {
|
|
// width: 80,
|
|
// height: 80,
|
|
marginLeft: 20,
|
|
flexDirection: "row",
|
|
resizeMode: "cover",
|
|
borderRadius: 10,
|
|
backgroundColor: "#dfff6c",
|
|
padding: 6,
|
|
},
|
|
btnText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
// textTransform: "uppercase",
|
|
paddingHorizontal: 5,
|
|
color: "#698600",
|
|
},
|
|
priceCon: {
|
|
flexDirection: "row",
|
|
paddingVertical: 10,
|
|
},
|
|
textPrice: {
|
|
fontSize: 21,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#ffaa00",
|
|
},
|
|
textPricePromo: {
|
|
fontSize: 21,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
textDecorationLine: "line-through",
|
|
color: "#ffaa00",
|
|
},
|
|
textMin: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
color: "#bdbdbd",
|
|
},
|
|
textSold: {
|
|
fontSize: 13,
|
|
fontWeight: "600",
|
|
color: "#bdbdbd",
|
|
},
|
|
rateCon: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingVertical: 10,
|
|
},
|
|
textRate: {
|
|
fontSize: 13,
|
|
color: "#838383",
|
|
},
|
|
img: {
|
|
width: 400,
|
|
height: 200,
|
|
resizeMode: "cover",
|
|
margin: "auto",
|
|
borderRadius: 10,
|
|
},
|
|
|
|
footer: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
},
|
|
footerButton: {
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
});
|
|
|
|
export default ProductSinglePage;
|