656 lines
18 KiB
JavaScript
656 lines
18 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
ActivityIndicator,
|
|
Dimensions,
|
|
RefreshControl,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import MasonryList from "@react-native-seoul/masonry-list";
|
|
import CartCard from "../../components/cart/CartCard";
|
|
import Checkbox from "expo-checkbox";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
|
|
import {
|
|
faArrowLeft,
|
|
faDeleteLeft,
|
|
faTrash,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import DeleteConfirmationModal from "../../components/DeleteConfirmationModal";
|
|
// import { cart } from "../../constants/cart";
|
|
import { useIsFocused, useNavigation } from "@react-navigation/native";
|
|
import {
|
|
delete_order,
|
|
get_order,
|
|
get_orders_by_customer,
|
|
} from "../../services/api/controllers/order";
|
|
// import { user } from "../../constants/user";
|
|
import { ScrollView } from "react-native-gesture-handler";
|
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
const width = Dimensions.get("window").width;
|
|
const height = Dimensions.get("window").height;
|
|
|
|
const Cart = ({ cartList, refresh }) => {
|
|
const [cartSort, setcartSort] = useState([]);
|
|
const [all, setall] = useState(false);
|
|
const [shopSelected, setshopSelected] = useState([]);
|
|
const [quantityChange, setquantityChange] = useState([]);
|
|
|
|
const [load, setload] = useState(false);
|
|
|
|
const [cart, setcart] = useState([]);
|
|
const [totalPrice, settotalPrice] = useState(0);
|
|
const [error, setError] = useState(false);
|
|
|
|
const [checkoutItems, setCheckOutItems] = useState([]);
|
|
|
|
const [isModalVisible, setModalVisible] = useState(false);
|
|
const navigation = useNavigation();
|
|
const [refreshing, setRefreshing] = useState(true);
|
|
const [user, setuser] = useState([]);
|
|
const isFocused = useIsFocused();
|
|
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 {
|
|
setcart(result.data ?? []);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
setcart([]);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}, []);
|
|
useEffect(() => {
|
|
// Simulate a delay for the purpose of this example
|
|
setload(true);
|
|
setTimeout(() => {
|
|
// After the refresh logic is complete, set refreshing state to false
|
|
setload(false);
|
|
}, 200); // 2000 milliseconds (2 seconds) delay for demonstration
|
|
}, []);
|
|
useEffect(() => {
|
|
if (quantityChange) {
|
|
setload(true);
|
|
|
|
get_orders_by_customer({
|
|
id: user[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
// console.log("result" + result);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else {
|
|
setcart(result.data);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
}
|
|
}, [quantityChange]);
|
|
useEffect(() => {
|
|
console.log("focused on cart");
|
|
// setRefreshing(false);
|
|
|
|
if (isFocused) {
|
|
setload(true);
|
|
|
|
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) {
|
|
// setRefreshing(true);
|
|
setload(false);
|
|
|
|
setError(result.error);
|
|
} else {
|
|
setcart(result.data ?? []);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
setcart([]);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
console.log(pass);
|
|
} else {
|
|
setcart([]);
|
|
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log(error + "weeewwww");
|
|
});
|
|
}
|
|
}, [isFocused]);
|
|
const handleRefresh = () => {
|
|
setRefreshing(true);
|
|
setload(true);
|
|
console.log("refreshing");
|
|
// Simulate a delay for the purpose of this example
|
|
setTimeout(() => {
|
|
// After the refresh logic is complete, set refreshing state to false
|
|
setRefreshing(false);
|
|
setload(false);
|
|
}, 2000); // 2000 milliseconds (2 seconds) delay for demonstration
|
|
};
|
|
const toggleModal = () => {
|
|
setModalVisible(!isModalVisible);
|
|
};
|
|
console.log(cartSort);
|
|
// useEffect(() => {
|
|
// setcartSort(cartSort)
|
|
// }, [cartSort])
|
|
|
|
useEffect(() => {
|
|
// Fetch vendors and update the state
|
|
}, []);
|
|
useEffect(() => {
|
|
// Fetch vendors and update the state
|
|
if (refreshing) {
|
|
setload(true);
|
|
get_orders_by_customer({
|
|
id: user[0]?._id,
|
|
})
|
|
.then((result) => {
|
|
// console.log("result" + result);
|
|
|
|
if (result.error) {
|
|
setError(result.error);
|
|
} else {
|
|
setcart(result.data);
|
|
setload(false);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setError(error.message);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
});
|
|
}
|
|
}, [refreshing]);
|
|
const selectAll = () => {
|
|
setcartSort((prevCartList) => {
|
|
// Create a copy of the cartList to avoid mutating the original state
|
|
const newCartList = [...prevCartList];
|
|
|
|
// Set 'selected' property to true for all shops and products
|
|
newCartList.forEach((shop) => {
|
|
shop.selected = all;
|
|
shop.cartItems.forEach((product) => {
|
|
product.selected = all;
|
|
});
|
|
});
|
|
|
|
return newCartList;
|
|
});
|
|
};
|
|
|
|
// state variable 'all' triggers the useEffect
|
|
useEffect(() => {
|
|
selectAll();
|
|
}, [all]);
|
|
|
|
const shopLiked = (shopIndex) => {
|
|
setcartSort((prevCartList) => {
|
|
// copy of the cartList to avoid mutating the original state
|
|
const newCartList = [...prevCartList];
|
|
|
|
// Toggle the 'selected' property of the shop
|
|
newCartList[shopIndex].selected = !newCartList[shopIndex].selected;
|
|
|
|
// Toggle the 'selected' property of all products in the shop
|
|
newCartList[shopIndex].cartItems.forEach((product) => {
|
|
product.selected = newCartList[shopIndex].selected;
|
|
});
|
|
|
|
return newCartList;
|
|
});
|
|
};
|
|
const shopProdLike = (shopIndex, prodIndex) => {
|
|
setcartSort((prevCartList) => {
|
|
// Create a copy of the cartList to avoid mutating the original state
|
|
const newCartList = [...prevCartList];
|
|
|
|
// Toggle the 'selected' property of the product at the specified shopIndex and prodIndex
|
|
newCartList[shopIndex].cartItems[prodIndex].selected =
|
|
!newCartList[shopIndex].cartItems[prodIndex].selected;
|
|
|
|
// Set the shop's 'selected' property to false
|
|
newCartList[shopIndex].selected = false;
|
|
|
|
return newCartList;
|
|
});
|
|
};
|
|
const checkOut = () => {
|
|
// Create a new array 'checkOutItems' by filtering the cartSort
|
|
const checkOutItems = cartSort
|
|
?.map((shop) => {
|
|
const filteredCartItems = shop.cartItems.filter(
|
|
(item) => item.selected
|
|
);
|
|
return { ...shop, cartItems: filteredCartItems };
|
|
})
|
|
.filter((shop) => shop?.cartItems?.length > 0);
|
|
|
|
// Set the new state for 'checkOutItems'
|
|
setCheckOutItems(checkOutItems);
|
|
|
|
// Navigate only if there are items in the shops
|
|
if (checkOutItems?.length > 0) {
|
|
navigation.navigate("CheckOutMultiple", {
|
|
product: checkOutItems,
|
|
// orderId: result.data._id,
|
|
});
|
|
}
|
|
|
|
console.log(checkOutItems);
|
|
};
|
|
|
|
useEffect(() => {
|
|
//---------- CREATE A CART LIST CATEGORIZED BY SHOP ANME -------------//
|
|
const cartSorted = cart?.reverse()?.reduce((acc, item) => {
|
|
const shopId = item.items[0].vendor_id;
|
|
const shopName = item.items[0].vendor_name;
|
|
|
|
const existingShop = acc.find((shop) => shop.shopId === shopId);
|
|
console.log("shop: " + shopName);
|
|
if (item.status === "CART") {
|
|
if (existingShop) {
|
|
// Shop already exists, add the item to its cartItems array
|
|
existingShop.cartItems.push({ ...item, selected: false }); // Initialize selected to false
|
|
} else {
|
|
// Shop doesn't exist, create a new shop object with selected:false
|
|
acc.push({
|
|
shopname: shopName,
|
|
shopId: shopId,
|
|
cartItems: [{ ...item, selected: false }],
|
|
selected: false,
|
|
shippingFee: 0,
|
|
}); // Initialize selected to false
|
|
}
|
|
}
|
|
|
|
return acc;
|
|
}, []);
|
|
setcartSort(cartSorted);
|
|
}, [cart]);
|
|
const calculateTotalPrice = () => {
|
|
let total = 0;
|
|
|
|
// Iterate through the cartSort to calculate the total price
|
|
cartSort?.forEach((shop) => {
|
|
let shopHasSelectedProducts = false; // Flag to check if the shop has selected products
|
|
|
|
shop.cartItems.forEach((product) => {
|
|
if (product.selected) {
|
|
// Calculate the total price for the selected product
|
|
let productTotal = 0;
|
|
|
|
if (product.promo > 0) {
|
|
// Apply promo discount if promo is greater than 0
|
|
productTotal =
|
|
product.regular_price *
|
|
(1 - product.promo / 100) *
|
|
product.quantity; // Assuming promo is in percentage (e.g., 30%)
|
|
} else {
|
|
// Otherwise, calculate total without promo discount
|
|
productTotal =
|
|
product.items[0].price * parseInt(product.items[0].quantity, 10);
|
|
}
|
|
|
|
// Add the product total to the overall total
|
|
total += productTotal;
|
|
|
|
// Set the flag to true if at least one product is selected in the shop
|
|
shopHasSelectedProducts = true;
|
|
}
|
|
});
|
|
|
|
if (shopHasSelectedProducts) {
|
|
// Add the shipping fee for the shop if it has selected products
|
|
total += shop.shippingFee;
|
|
}
|
|
});
|
|
|
|
return parseFloat(total)?.toLocaleString("en-US");
|
|
};
|
|
|
|
// const quantityChange = (shopIndex, prodIndex, qty) => {
|
|
// setcartSort((prevCartList) => {
|
|
// // Create a copy of the cartSort to avoid mutating the original state
|
|
// const newCartList = [...prevCartList];
|
|
|
|
// // Update the quantity of the product at the specified shopIndex and prodIndex
|
|
// newCartList[shopIndex].cartItems[prodIndex].quantity = qty;
|
|
|
|
// return newCartList;
|
|
// });
|
|
// };
|
|
const deleteItems = () => {
|
|
// setload(true);
|
|
setRefreshing(false);
|
|
toggleModal();
|
|
// setcartSort((prevCartList) => {
|
|
// // Filter out selected shops
|
|
// const newCartList = prevCartList.filter((shop) => !shop.selected);
|
|
|
|
// // Update cartItems for shops that are not selected
|
|
// newCartList.forEach((shop) => {
|
|
// shop.cartItems = shop.cartItems.filter((product) => !product.selected);
|
|
// });
|
|
|
|
// // Remove shops with no cartItems
|
|
// const finalCartList = newCartList.filter(
|
|
// (shop) => shop?.cartItems?.length > 0
|
|
// );
|
|
|
|
// return finalCartList;
|
|
// });
|
|
const deletePromises = [];
|
|
|
|
const newCartList = cartSort;
|
|
|
|
// Update cartItems for shops that are not selected
|
|
newCartList?.forEach((shop) => {
|
|
shop.cartItems = shop.cartItems.filter((product) => product.selected);
|
|
});
|
|
|
|
// Remove shops with no cartItems
|
|
// const finalCartList = newCartList.filter(
|
|
// (shop) => shop?.cartItems?.length > 0
|
|
// );
|
|
|
|
if (newCartList) {
|
|
newCartList.forEach((order) => {
|
|
// Loop through the items in each order's 'cartItems'
|
|
order.cartItems.forEach((cartItem) => {
|
|
// Construct the 'body' object for updating the order
|
|
console.log(
|
|
"I am here and the order cart items to delete is " + order.cartItems
|
|
);
|
|
// setload(true);
|
|
|
|
const orderId = cartItem._id;
|
|
// const orderName = cartItem.items[0].name;
|
|
|
|
const deletePromise = delete_order({
|
|
id: orderId,
|
|
});
|
|
|
|
deletePromises.push(deletePromise);
|
|
});
|
|
});
|
|
|
|
Promise.all(deletePromises)
|
|
.then((results) => {
|
|
// Handle results of updating orders
|
|
results.forEach((updateResult, index) => {
|
|
if (updateResult.status === 200) {
|
|
console.log(
|
|
// `Order update id: ${updateResult.data} orderName: ${product[index].cartItems[0].items[0].name} orderId: ${product[index].cartItems[0]._id} amount: ${result.data.attributes.amount}`
|
|
"deleted"
|
|
);
|
|
// setload(false);
|
|
// setamount(result.data.attributes.amount);
|
|
// setpaymessage(result.data.attributes.description);
|
|
// setModalVisible(!modalVisible);
|
|
} else {
|
|
// console.log("Update order failed for order with ID:", product[index].cartItems[0]._id);
|
|
("failed");
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
console.error(err);
|
|
})
|
|
.finally(() => {
|
|
// setprodIsLoading(false); // Set loading to false when done loading
|
|
console.log("heyyyy finally");
|
|
setRefreshing(true);
|
|
// setload(true);
|
|
|
|
// setload(false);
|
|
});
|
|
}
|
|
|
|
console.log(cartSort);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerText}>CART</Text>
|
|
</View>
|
|
<View style={styles.actions}>
|
|
<View style={{ flexDirection: "row" }}>
|
|
<Checkbox value={all} onValueChange={() => setall((prev) => !prev)} />
|
|
<Text style={{ marginLeft: 10 }}>Select All</Text>
|
|
</View>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
toggleModal();
|
|
}}
|
|
>
|
|
<FontAwesomeIcon icon={faTrash} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
{!load ? (
|
|
<View style={styles.wrapper}>
|
|
<MasonryList
|
|
data={cartSort ?? []}
|
|
keyExtractor={(item) => item.id}
|
|
style={styles.list}
|
|
numColumns={1}
|
|
showsVerticalScrollIndicator={false}
|
|
onRefresh={() => handleRefresh()} // Add this line
|
|
// refreshing={refreshing} // Add this line
|
|
renderItem={({ item, i }) => (
|
|
<CartCard
|
|
all={all}
|
|
index={i}
|
|
shopLike={shopLiked}
|
|
shopProdLike={shopProdLike}
|
|
cart={item}
|
|
quantityChange={setquantityChange}
|
|
q={quantityChange}
|
|
/>
|
|
)}
|
|
containerStyle={styles.container1}
|
|
contentContainerStyle={styles.content}
|
|
onEndReachedThreshold={0.1}
|
|
/>
|
|
</View>
|
|
) : (
|
|
<ActivityIndicator size="large" color="#ffaa00" />
|
|
)}
|
|
<View style={styles.bottom}>
|
|
<View style={styles.details}>
|
|
<View style={styles.detailsTop}>
|
|
<Text style={styles.detailsTopText}>Total Price : </Text>
|
|
<Text style={styles.detailsTopTextPrice}>
|
|
{" "}
|
|
₱{calculateTotalPrice()}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<TouchableOpacity style={styles.checkout} onPress={() => checkOut()}>
|
|
<Text style={styles.checkoutText}>CHECKOUT</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
<DeleteConfirmationModal
|
|
isVisible={isModalVisible}
|
|
onCancel={toggleModal}
|
|
onConfirm={deleteItems}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
backgroundColor: "#ffffff",
|
|
paddingTop: 10,
|
|
height: "100%",
|
|
width: width,
|
|
|
|
// height:height -70
|
|
},
|
|
header: {
|
|
width: "100%",
|
|
top: 0,
|
|
height: 40,
|
|
marginLeft: 15,
|
|
},
|
|
container1: {
|
|
width: "100%",
|
|
},
|
|
|
|
actions: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
padding: 10,
|
|
paddingTop: 0,
|
|
},
|
|
content: {
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
},
|
|
headerText: {
|
|
textAlign: "left",
|
|
width: "100%",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
},
|
|
footer: {
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
wrapper: {
|
|
width: "100%",
|
|
height: "90%",
|
|
// justifyContent: "center",
|
|
// alignItems: "center",
|
|
padding: 5,
|
|
paddingBottom: 60,
|
|
},
|
|
list: {
|
|
width: "100%",
|
|
height: "90%",
|
|
// justifyContent: "center",
|
|
// alignItems: "center",
|
|
},
|
|
card: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#dddd",
|
|
justifyContent: "center",
|
|
padding: 15,
|
|
paddingVertical: 10,
|
|
borderRadius: 10,
|
|
marginVertical: 2,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
fontWeight: "600",
|
|
},
|
|
body: {
|
|
fontSize: 16,
|
|
// fontWeight: "600",
|
|
marginTop: 5,
|
|
},
|
|
date: {
|
|
fontSize: 12,
|
|
// fontWeight: "600",
|
|
color: "#797979",
|
|
marginTop: 10,
|
|
},
|
|
bottom: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
backgroundColor: "#fff",
|
|
width: "100%",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
borderTopWidth: 1,
|
|
borderColor: "#dddd",
|
|
},
|
|
details: {
|
|
padding: 10,
|
|
},
|
|
detailsTop: {
|
|
// padding:10,
|
|
flexDirection: "row",
|
|
},
|
|
detailsTopText: {
|
|
color: "#363636",
|
|
fontWeight: "600",
|
|
fontSize: 14,
|
|
letterSpacing: 0.5,
|
|
},
|
|
detailsTopTextPrice: {
|
|
color: "#ffaa00",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
letterSpacing: 0.5,
|
|
},
|
|
checkout: {
|
|
backgroundColor: "#ffaa00",
|
|
width: 150,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
padding: 15,
|
|
},
|
|
checkoutText: {
|
|
color: "#fff",
|
|
fontWeight: "600",
|
|
fontSize: 16,
|
|
letterSpacing: 0.7,
|
|
},
|
|
});
|
|
export default Cart;
|