import React, { useEffect, useState } from "react"; import { Dimensions, Image, StyleSheet, Text, TextInput, TouchableOpacity, View, } from "react-native"; import { faCartShopping, faMinus, faPlus, faStore, } from "@fortawesome/free-solid-svg-icons"; import { faBell, faComment, faComments, faUserCircle, } from "@fortawesome/free-regular-svg-icons"; import Modal from "react-native-modal"; import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome"; import { useNavigation } from "@react-navigation/native"; import { create_order, get_order, get_orders_by_customer, update_order, update_order_item, } from "../../services/api/controllers/order"; // import { user } from "../../constants/user"; import { get_vendor } from "../../services/api/controllers/vendor"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { useToast } from "react-native-toast-notifications"; import CheckOutModal from "./CheckOutModal"; const deviceWidth = Dimensions.get("window").width; const deviceHeight = Dimensions.get("window").width; const BottomNav = ({ settabActive, activeTab, setcartList, cartList, product, activeVar, setModalVisible, }) => { const navigation = useNavigation(); const [inputValue, setInputValue] = useState("1"); const [orderId, setorderId] = useState(""); const [order, setorder] = useState([]); const [orders, setorders] = useState([]); const [orderExist, setorderExist] = useState(false); const [orderIdE, setorderIdE] = useState(false); const [orderE, setorderE] = useState(false); const [token, settoken] = useState(""); const [itemId, setitemId] = useState(false); const [refresh, setrefresh] = useState(false); const [minLimit, setminLimit] = useState(null); const [isminLimit, setisminLimit] = useState(false); const [maxLimit, setmaxLimit] = useState(null); const [ismaxLimit, setismaxLimit] = useState(false); const [vendorName, setvendorName] = useState(""); const toast = useToast(); // console.log(product._id); useEffect(() => { if (product) { console.log(" this product min order is" + product?.minimum_order); if (product?.minimum_order) { setisminLimit(true); setminLimit(product?.minimum_order); setInputValue(product?.minimum_order); } else { setisminLimit(false); } if (product?.stock) { setismaxLimit(true); setmaxLimit(product?.stock); // setInputValue(product?.minimum_order); } else { setisminLimit(false); } } }, [product]); console.log("---------------" + orderExist + "-----" + orderIdE); useEffect(() => { AsyncStorage.getItem("AccessToken") .then((pass) => { if (pass) { settoken(pass); } }) .catch((error) => { console.log(error + "weeewwww"); }); get_vendor({ id: product.vendor_api_id, }) .then((result) => { console.log("successful get vendor name" + result.data.user_login); if (result.status === 200) { setvendorName(result.data.user_login); } }) .catch((err) => { console.error(err); }); if (product) { console.log(" this product min order is" + product?.minimum_order); if (product?.minimum_order) { setisminLimit(true); setminLimit(product?.minimum_order); setInputValue(product?.minimum_order); } if (product?.stock) { setismaxLimit(true); setmaxLimit(product?.stock); // setInputValue(product?.minimum_order); } else { setisminLimit(false); } } }, []); useEffect(() => { if (refresh === true) { get_orders_by_customer({ id: user[0]._id }) .then((result) => { console.log("successful get order" + result.status); findOrderIdByProductId(result.data, product?._id); setorders(result.data); setrefresh(false); }) .catch((err) => { console.error(err); }); } }, [refresh]); useEffect(() => { // if (refresh === true) { // get_orders_by_customer({ id: user[0]._id }) // .then((result) => { // console.log("successful get order" + result.status); console.log(product._id + "-------------------------"); findOrderIdByProductId(orders, product?._id); // setorders(result.data); // setrefresh(false); // }) // .catch((err) => { // console.error(err); // }); // } }, [product]); const [user, setuser] = useState([]); useEffect(() => { /* ---------------Check for the user saved email--------------- */ AsyncStorage.getItem("userData") .then((pass) => { const userDataArray = JSON.parse(pass); setuser(userDataArray); get_orders_by_customer({ id: userDataArray[0]._id }) .then((result) => { console.log("successful get order" + result.status); findOrderIdByProductId(result.data, product?._id); setorders(result.data); }) .catch((err) => { console.error(err); }); console.log(pass); }) .catch((error) => { console.log(error + "weeewwww"); }); }, []); // Function to handle text input change const handleTextChange = (text) => { // Use a regular expression to allow only numeric characters const numericValue = text.replace(/[^0-9]/g, ""); if (!isminLimit || !ismaxLimit) { setInputValue(parseInt(numericValue)); } else { if (parseInt(numericValue) < parseInt(minLimit)) { toast.show(`The minimum order for this product is ${minLimit}!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); setInputValue(parseInt(minLimit)); } else if (parseInt(numericValue) > parseInt(maxLimit)) { toast.show(`The maximum order for this product is ${maxLimit}!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); setInputValue(parseInt(minLimit)); } else { setInputValue(parseInt(numericValue)); } } }; const handleInputChange = (text) => { if (!isminLimit || !ismaxLimit) { if (text === "add") { setInputValue((parseInt(inputValue, 10) + 1).toString()); // Parse to integer and convert back to string } else if (text === "minus") { const newValue = parseInt(inputValue, 10) - 1; setInputValue(newValue >= 1 ? newValue.toString() : 1); // Ensure it's not less than 1 } } else { if (text === "add") { const newValue = parseInt(inputValue, 10) + 1; if (parseInt(newValue) > parseInt(maxLimit)) { toast.show(`The maximum order for this product is ${maxLimit}!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); } else { setInputValue((parseInt(inputValue, 10) + 1).toString()); // Parse to integer and convert back to string } } else if (text === "minus") { const newValue = parseInt(inputValue, 10) - 1; if (parseInt(newValue) < parseInt(minLimit)) { toast.show(`The minimum order for this product is ${minLimit}!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); } else { setInputValue(newValue >= 1 ? newValue.toString() : 1); // Ensure it's not less than 1 } } } }; const tabSwitch = (e) => { settabActive(e); }; function findOrderIdByProductId(orders, productIdToFind) { console.log("checking product on cart" + productIdToFind); const sortOrder = orders?.filter( (item) => item.status === "CART" || item.status === "Cart" ) ?? []; for (const order of sortOrder) { console.log("orders checking"); const orderIdd = order._id; const item = order.items.find( (item) => item.product.product_id === productIdToFind ); if (item) { setitemId(item._id); // console.log(order._id + "+" + item.product.product_id); setorderE(order); setorderIdE(orderIdd); setorderExist(true); console.log( "---------------" + orderExist + "-----" + orderIdE + "--------2" ); console.log("found it"); } } return null; // Return null if the product_id is not found in any item } const addToCart = () => { // Create a copy of the current cartList // const updatedCart = [...cartList]; // // Modify the product object to include inputValue and variation // const modifiedProduct = { // ...product, // quantity: parseInt(inputValue), // variation: "blue", // }; // // Add the modified product to the updatedCart array // updatedCart.push(modifiedProduct); // // Update the cartList state with the new cart array // setcartList(updatedCart); // console.log(orderExist + orderIdE + itemId); console.log(product?.product_type); if (product.product_type === "variable") { console.log("variable"); if (!activeVar || activeVar === null) { toast.show("Select variation first!", { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); } } else if (product.product_type === "variation") { console.log("variation"); // function checkVariantValue(variantsArray) { // let variants = ""; // if (variantsArray.length > 0) { // const variant = variantsArray[0]; // Accessing the first element in the variants array // for (let key in variant) { // // if (key !== "_id" && variant[key] !== null && variant[key] !== "") { // // } // variants === variants + "eyy"; // } // } // return variants; // Returning null if no non-empty value is found // } // const result = checkVariantValue(product.variants); // console.log( // result + "------------------------------------------------------------" // ); // console.log(product.variants); AsyncStorage.getItem("AccessToken") .then((pass) => { console.log(pass); if (pass !== null) { if (orderExist) { const quan = orderE.items[0].quantity; console.log(quan); const quanti = parseInt(quan) + parseInt(inputValue); console.log("final: " + quanti); update_order_item({ token: token, orderId: orderIdE, itemId: itemId, body: { quantity: quanti.toString(), }, }) .then((result) => { // console.log("successful tran" + result); if (result.status === 200) { // setInputValue(quan.toString()); // Parse to integer and convert back to string update_order({ token: token, id: orderIdE, body: { total_amount: orderE.items[0].price * quanti, }, }) .then((results) => { if (results.status === 200) { console.log("price: " + results.data.total_amount); toast.show("Added to Cart!", { type: "success", placement: "top", duration: 2000, offset: 30, animationType: "slide-in", }); setrefresh(true); } else { console.log("update order failed"); } }) .catch((err) => { console.error(err); }); } }) .catch((err) => { console.error(err); }); } else if (orderExist === false) { create_order({ token, token, body: { customer: { customer_id: user[0]?._id, name: user[0]?.first_name + " " + user[0]?.last_name, }, // order_date: "2023/09/27", total_amount: product.sale_price ?? product.regular_price * parseFloat(inputValue), items: [ { product: { product_image: product.product_image, product_id: product._id, name: product.product_name, }, price: product.sale_price ?? product.regular_price, quantity: inputValue, vendor_id: product.vendor_api_id, vendor_name: vendorName, }, ], status: "CART", shipping_fee: product.shipping_fee ? product.shipping_fee : 50, }, }) .then((result) => { console.log("successful add to cart" + result.status); setrefresh(true); toast.show("Added to Cart!", { type: "success", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); }) .catch((err) => { console.error(err); }); } } else { navigation.navigate("Login"); } }) .catch((error) => { console.log(error + "weeewwww"); }); } else { console.log("simple"); AsyncStorage.getItem("AccessToken") .then((pass) => { console.log(pass); if (pass !== null) { if (orderExist) { const quan = orderE.items[0].quantity; console.log(quan); const quanti = parseInt(quan) + parseInt(inputValue); console.log("final: " + quanti); update_order_item({ token: token, orderId: orderIdE, itemId: itemId, body: { quantity: quanti.toString(), }, }) .then((result) => { // console.log("successful tran" + result); if (result.status === 200) { // setInputValue(quan.toString()); // Parse to integer and convert back to string update_order({ token: token, id: orderIdE, body: { total_amount: orderE.items[0].price * quanti, }, }) .then((results) => { if (results.status === 200) { console.log("price: " + results.data.total_amount); toast.show("Added to Cart!", { type: "success", placement: "top", duration: 2000, offset: 30, animationType: "slide-in", }); setrefresh(true); } else { console.log("update order failed"); } }) .catch((err) => { console.error(err); }); } }) .catch((err) => { console.error(err); }); } else if (orderExist === false) { create_order({ token, token, body: { customer: { customer_id: user[0]?._id, name: user[0]?.first_name + " " + user[0]?.last_name, }, // order_date: "2023/09/27", total_amount: product.sale_price ?? product.regular_price * parseFloat(inputValue), items: [ { product: { product_image: product.product_image, product_id: product._id, name: product.product_name, }, price: product.sale_price ?? product.regular_price, quantity: inputValue, vendor_id: product.vendor_api_id, vendor_name: vendorName, }, ], status: "CART", shipping_fee: product.shipping_fee ? product.shipping_fee : 50, }, }) .then((result) => { console.log("successful add to cart" + result.status); setrefresh(true); toast.show("Added to Cart!", { type: "success", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); }) .catch((err) => { console.error(err); }); } } else { navigation.navigate("Login"); } }) .catch((error) => { console.log(error + "weeewwww"); }); } }; const checkOut = () => { /* ---------------Check for the user saved email--------------- */ if (product.product_type === "variable") { if (!activeVar || activeVar === null) { toast.show("Select variation first!", { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", }); } else { AsyncStorage.getItem("AccessToken") .then((pass) => { console.log("checkout " + pass); if (pass === null) { navigation.navigate("Login"); } else if (pass !== null) { create_order({ token: token, body: { customer: { customer_id: user[0]?._id, name: user[0]?.first_name + " " + user[0]?.last_name, product_image: product.product_image, }, // order_date: "2023/09/27", total_amount: product.sale_price ?? product.regular_price * parseFloat(inputValue), items: [ { product: { product_image: product.product_image, product_id: product._id, name: product.product_name, }, price: product.sale_price ?? product.regular_price, quantity: inputValue, vendor_id: product.vendor_api_id, vendor_name: vendorName, }, ], status: "TO CHECKOUT", shipping_fee: product.shipping_fee ? product.shipping_fee : 50, }, }) .then((result) => { console.log("successful transaction" + result.status); if (result.status === 201) { // console.log(result.data) setorder(result.data); setorderId(result.data._id); navigation.navigate("CheckOut", { product: result.data, orderId: result.data._id, }); } }) .catch((err) => { console.error(err); }); } }) .catch((error) => { console.log(error + "weeewwww"); navigation.navigate("Login"); }); } } else { AsyncStorage.getItem("AccessToken") .then((pass) => { console.log("checkout " + pass); if (pass === null) { navigation.navigate("Login"); } else if (pass !== null) { create_order({ token, token, body: { customer: { customer_id: user[0]?._id, name: user[0]?.first_name + " " + user[0]?.last_name, product_image: product.product_image, }, // order_date: "2023/09/27", total_amount: product.sale_price ?? product.regular_price * parseFloat(inputValue), items: [ { product: { product_image: product.product_image, product_id: product._id, name: product.product_name, }, price: product.sale_price ?? product.regular_price, quantity: inputValue, vendor_id: product.vendor_api_id, vendor_name: vendorName, }, ], status: "TO CHECKOUT", shipping_fee: product.shipping_fee ? product.shipping_fee : 50, }, }) .then((result) => { console.log("successful transaction" + result.status); if (result.status === 201) { // console.log(result.data) setorder(result.data); setorderId(result.data._id); navigation.navigate("CheckOut", { product: result.data, orderId: result.data._id, }); } }) .catch((err) => { console.error(err); }); } }) .catch((error) => { console.log(error + "weeewwww"); navigation.navigate("Login"); }); } }; return ( product.regular_price ? addToCart() : toast.show( `you need to inquire the seller for the price of this product!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", } ) } > {orderExist ? ( ) : ( )} handleInputChange("minus")} > handleInputChange("add")} > { if (!isminLimit) { product.regular_price ? checkOut() : toast.show( `you need to inquire the seller for the price of this product!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", } ); } else { parseInt(inputValue) < parseInt(minLimit) ? toast.show( `The minimum order for this product is ${minLimit}!`, { type: "danger", placement: "top", duration: 4000, offset: 30, animationType: "slide-in", } ) : checkOut(); } }} > Buy Now ); }; const styles = StyleSheet.create({ container: { // flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", width: "100%", bottom: 0, // position: "fixed", // paddingVertical: 15, paddingBottom: 5, boxShadow: "0px 0px 3px 0px rgba(0, 0, 0, 0.25)", }, wrapper: { flexDirection: "row", width: "100%", alignItems: "center", justifyContent: "space-around", margin: "auto", borderTopColor: "#ddd", paddingVertical: 5, paddingBottom: 10, borderTopWidth: 1, }, button: { padding: 15, }, button1: { padding: 15, paddingHorizontal: 50, backgroundColor: "#ffaa00", color: "#fff", borderRadius: 30, }, button1text: { color: "#fff", fontWeight: "600", }, quantity: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, buttonQty: { backgroundColor: "#eee", padding: 5, margin: 5, }, }); export default BottomNav;