338 lines
8.9 KiB
JavaScript
338 lines
8.9 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
Image,
|
|
TouchableOpacity,
|
|
Dimensions,
|
|
} from "react-native";
|
|
|
|
import ReceiptCard from "./Receipt";
|
|
import Modal from "react-native-modal";
|
|
import ReturnForm from "./ReturnForm";
|
|
const deviceWidth = Dimensions.get("window").width;
|
|
const CompletedCard = ({ cart }) => {
|
|
// Assuming cart.deliveryDate is a string like "2023-09-25T15:30:00Z"
|
|
const [modalVisible, setModalVisible] = useState(false);
|
|
const [modalVisible1, setModalVisible1] = useState(false);
|
|
const [isRefund, setisRefund] = useState(false);
|
|
console.log(cart);
|
|
|
|
const deliveryDate = new Date(cart?.shipping?.delivery_date);
|
|
const month = deliveryDate.toLocaleString("en-US", { month: "short" });
|
|
const day = deliveryDate.getDate();
|
|
const options = {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "2-digit",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
};
|
|
const time = deliveryDate.toLocaleString("en-US", {
|
|
timeZone: "Asia/Manila",
|
|
...options,
|
|
});
|
|
const total = parseFloat(cart?.total_amount);
|
|
console.log(cart?.return_order);
|
|
|
|
// Format the day with leading zeros if needed (e.g., "01" instead of "1")
|
|
const formattedDay = day < 10 ? `0${day}` : day;
|
|
|
|
// Create the final formatted date string "Sept. 25"
|
|
const philippinesTime = `${month}. ${formattedDay} `;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={styles.container}
|
|
onPress={() => setModalVisible(true)}
|
|
>
|
|
<View style={styles.header}>
|
|
<Text style={styles.headerText}>{cart.items[0].vendor_name}</Text>
|
|
<Text style={styles.headerStatusText}>{cart.status}</Text>
|
|
</View>
|
|
<View style={styles.wrapper}>
|
|
<View style={styles.prodwrapper}>
|
|
<View style={styles.imgWrap}>
|
|
<Image
|
|
style={{ width: 50, height: 50, resizeMode: "cover" }}
|
|
// source={{ uri: `${cart?.items[0].product.product_image}` }}
|
|
source={{
|
|
uri: `${
|
|
cart?.items[0].product.product_image !== ""
|
|
? cart?.items[0].product.product_image
|
|
: "https://wkdonlinedogtraining.com/wp-content/themes/wkd-wp/build/images/bg-no-img-big.jpg"
|
|
}`,
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={styles.details}>
|
|
<Text style={styles.text} numberOfLines={2}>
|
|
{cart?.items[0]?.product.name}
|
|
</Text>
|
|
<Text style={styles.text1} numberOfLines={2}>
|
|
Variant:{cart?.items[0].variant}
|
|
</Text>
|
|
<View style={styles.rateCon}>
|
|
{cart?.items[0].price ? (
|
|
<>
|
|
<View style={styles.priceCon}>
|
|
<Text
|
|
style={
|
|
cart?.items[0]?.sale_price
|
|
? styles.textPricePromo
|
|
: styles.textPrice
|
|
}
|
|
>
|
|
₱
|
|
{parseFloat(cart?.items[0].price).toLocaleString("en-US")}
|
|
</Text>
|
|
</View>
|
|
</>
|
|
) : (
|
|
<Text>No price </Text>
|
|
)}
|
|
<Text style={styles.text1} numberOfLines={2}>
|
|
Quantity: {cart?.items[0].quantity}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<View style={styles.totalCon}>
|
|
<View style={styles.total}></View>
|
|
<View style={styles.total}>
|
|
<Text style={styles.totalText}>Total: </Text>
|
|
<Text style={styles.textPrice}>
|
|
{" "}
|
|
₱
|
|
{parseFloat(total).toLocaleString("en-US") ??
|
|
parseFloat(cart?.total_amount).toLocaleString("en-US")}{" "}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{/* <View style={styles.cStatus}>
|
|
<Text style={styles.textStatusHeader}> Status: </Text>
|
|
|
|
<Text style={styles.textStatus}> {cart?.currentStatus}</Text>
|
|
</View> */}
|
|
<View style={styles.footer}>
|
|
<Text style={styles.footerDate}> {time ?? ""} </Text>
|
|
{/* {
|
|
cart?.return_order === null ? (
|
|
<TouchableOpacity
|
|
style={styles.rateBtn}
|
|
onPress={() => setModalVisible1(true)}
|
|
>
|
|
<Text style={styles.rateText}> Return </Text>
|
|
</TouchableOpacity>
|
|
) : null
|
|
} */}
|
|
{isRefund === false ? (
|
|
<>
|
|
{cart?.return_order === undefined ? (
|
|
<TouchableOpacity
|
|
style={styles.rateBtn}
|
|
onPress={() => setModalVisible1(true)}
|
|
>
|
|
<Text style={styles.rateText}> Return </Text>
|
|
</TouchableOpacity>
|
|
) : (
|
|
<Text style={styles.rateText1}> Refund Requested </Text>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Text style={styles.rateText1}>Refund Requested </Text>
|
|
)}
|
|
</View>
|
|
<Modal
|
|
animationType="slide"
|
|
animationIn={"zoomIn"}
|
|
transparent={true}
|
|
isVisible={modalVisible1}
|
|
onSwipeComplete={() => setModalVisible1(false)}
|
|
swipeDirection={["down", "up", "right", "left"]}
|
|
swipeThreshold="100"
|
|
backdropOpacity={0.2}
|
|
style={{ margin: 0 }}
|
|
propagateSwipe={true}
|
|
deviceWidth={deviceWidth}
|
|
onRequestClose={() => {
|
|
setModalVisible1(!modalVisible1);
|
|
}}
|
|
>
|
|
<ReturnForm
|
|
onRequestClose={setModalVisible1}
|
|
cart={cart}
|
|
setisRefund={setisRefund}
|
|
/>
|
|
</Modal>
|
|
<Modal
|
|
animationType="slide"
|
|
animationIn={"zoomIn"}
|
|
transparent={true}
|
|
isVisible={modalVisible}
|
|
onSwipeComplete={() => setModalVisible(false)}
|
|
swipeDirection={["down", "up", "right", "left"]}
|
|
swipeThreshold="100"
|
|
backdropOpacity={0.2}
|
|
style={{ margin: 0 }}
|
|
propagateSwipe={true}
|
|
deviceWidth={deviceWidth}
|
|
onRequestClose={() => {
|
|
setModalVisible(!modalVisible);
|
|
}}
|
|
>
|
|
<ReceiptCard onRequestClose={setModalVisible} cart={cart} />
|
|
</Modal>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
// width: "95%",
|
|
margin: 5,
|
|
borderRadius: 10,
|
|
borderColor: "#dddd",
|
|
borderWidth: 1,
|
|
overflow: "hidden",
|
|
// flexDirection: "row",
|
|
// padding: 10,
|
|
backgroundColor: "#ffffff",
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
top: 0,
|
|
padding: 10,
|
|
},
|
|
headerText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
},
|
|
headerStatusText: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
textTransform: "uppercase",
|
|
color: "#ffaa00",
|
|
},
|
|
footer: {
|
|
// position: "absolute",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
bottom: 0,
|
|
width: "100%",
|
|
},
|
|
imgWrap: {
|
|
padding: 10,
|
|
},
|
|
wrapper: {
|
|
margin: 10,
|
|
marginBottom: 10,
|
|
},
|
|
prodwrapper: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
borderWidth: 1,
|
|
overflow: "hidden",
|
|
borderColor: "#dddd",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
priceCon: {
|
|
flexDirection: "row",
|
|
paddingVertical: 10,
|
|
},
|
|
textPrice: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
color: "#ffaa00",
|
|
},
|
|
textPricePromo: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
textTransform: "capitalize",
|
|
textDecorationLine: "line-through",
|
|
color: "#ffaa00",
|
|
},
|
|
details: {
|
|
width: "80%",
|
|
},
|
|
text: {
|
|
fontSize: 13,
|
|
},
|
|
text1: {
|
|
fontSize: 10,
|
|
color: "#b4b4b4",
|
|
},
|
|
totalCon: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
position: "relative",
|
|
// right: 0,
|
|
paddingTop: 10,
|
|
},
|
|
total: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
width: "35%",
|
|
position: "relative",
|
|
right: 0,
|
|
},
|
|
totalText: {
|
|
textAlign: "right",
|
|
},
|
|
cStatus: {
|
|
backgroundColor: "#7EFFBA",
|
|
// height: 40,
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
// justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
},
|
|
textStatusHeader: {
|
|
fontSize: 12,
|
|
fontWeight: "600",
|
|
color: "#007938",
|
|
},
|
|
textStatus: {
|
|
fontSize: 14,
|
|
fontWeight: "400",
|
|
color: "#007938",
|
|
},
|
|
rateBtn: {
|
|
borderWidth: 2,
|
|
overflow: "hidden",
|
|
borderColor: "#ffaa00",
|
|
borderRadius: 10,
|
|
padding: 5,
|
|
paddingHorizontal: 15,
|
|
margin: 10,
|
|
marginRight: 20,
|
|
},
|
|
rateText: {
|
|
fontWeight: "600",
|
|
color: "#ffaa00",
|
|
},
|
|
rateText1: {
|
|
fontWeight: "600",
|
|
color: "#ffaa00",
|
|
marginVertical: 15,
|
|
marginRight: 15,
|
|
},
|
|
footerDate: {
|
|
fontSize: 11,
|
|
paddingLeft: 15,
|
|
color: "#747474",
|
|
},
|
|
});
|
|
|
|
export default CompletedCard;
|