141 lines
4.1 KiB
JavaScript
141 lines
4.1 KiB
JavaScript
import { useNavigation, useTheme } from "@react-navigation/native";
|
|
import React, { useContext } from "react";
|
|
import { FlatList, TouchableOpacity, View } from "react-native";
|
|
import ConfigurationContext from "../../../context/Configuration";
|
|
import UserContext from "../../../context/User";
|
|
import { alignment } from "../../../utils/alignment";
|
|
import { NAVIGATION_SCREEN } from "../../../utils/constant";
|
|
import Spinner from "../../Spinner/Spinner";
|
|
import TextDefault from "../../Text/TextDefault/TextDefault";
|
|
import TextError from "../../Text/TextError/TextError";
|
|
import useStyle from "./styles";
|
|
import i18n from "../../../../i18n";
|
|
|
|
// export const orderStatuses = [
|
|
// {
|
|
// key: i18n.t("PENDING"),
|
|
// status: 1,
|
|
// statusText: i18n.t("orderPending"),
|
|
// },
|
|
// {
|
|
// key: i18n.t("ACCEPTED"),
|
|
// status: 2,
|
|
// statusText: i18n.t("prepFood"),
|
|
// },
|
|
// {
|
|
// key: i18n.t("PICKED"),
|
|
// status: 3,
|
|
// statusText: i18n.t("riderOnWay"),
|
|
// },
|
|
// {
|
|
// key: i18n.t("DELIVERED"),
|
|
// status: 4,
|
|
// statusText: i18n.t("orderDelivered"),
|
|
// },
|
|
// {
|
|
// key: i18n.t("COMPLETED"),
|
|
// status: 5,
|
|
// statusText: i18n.t("completeOrder"),
|
|
// },
|
|
// ];
|
|
export const orderStatuses = {
|
|
PENDING: {
|
|
status: 1,
|
|
statusText: "orderPending",
|
|
},
|
|
ACCEPTED: {
|
|
status: 2,
|
|
statusText: "prepFood",
|
|
},
|
|
PICKED: {
|
|
status: 3,
|
|
statusText: "riderOnWay",
|
|
},
|
|
DELIVERED: {
|
|
status: 4,
|
|
statusText: "orderDelivered",
|
|
},
|
|
COMPLETED: {
|
|
status: 5,
|
|
statusText: "completeOrder",
|
|
},
|
|
};
|
|
|
|
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
|
|
|
|
const StatusCard = () => {
|
|
const { colors } = useTheme();
|
|
const styles = useStyle();
|
|
const navigation = useNavigation();
|
|
const {
|
|
loadingOrders,
|
|
errorOrders,
|
|
orders,
|
|
networkStatusOrders,
|
|
fetchOrders,
|
|
} = useContext(UserContext);
|
|
const configuration = useContext(ConfigurationContext);
|
|
|
|
// const checkStatus = (status) => {
|
|
// const obj = orderStatuses.filter((x) => {
|
|
// return x.key === status;
|
|
// });
|
|
// return obj[0];
|
|
// };
|
|
|
|
if (loadingOrders) return <Spinner />;
|
|
if (errorOrders) return <TextError>{errorOrders.message}</TextError>;
|
|
|
|
return (
|
|
<FlatList
|
|
contentContainerStyle={styles.mainContainer}
|
|
showsVerticalScrollIndicator={false}
|
|
showsHorizontalScrollIndicator={false}
|
|
horizontal={true}
|
|
refreshing={networkStatusOrders === 4}
|
|
onRefresh={() => networkStatusOrders === 7 && fetchOrders()}
|
|
data={orders.filter((o) => orderStatusActive.includes(o.order_status))}
|
|
//keyExtractor={(item) => item._id}
|
|
keyExtractor={(item, index) => String(index)}
|
|
renderItem={({ item, index }) => (
|
|
<TouchableOpacity
|
|
activeOpacity={0.8}
|
|
style={{ flex: 1, paddingHorizontal: 10 }}
|
|
onPress={() =>
|
|
navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
|
|
_id: item._id,
|
|
currency_symbol: configuration.currency_symbol,
|
|
})
|
|
}
|
|
>
|
|
<View key={index} style={styles.statusContainer}>
|
|
<View style={styles.textContainer}>
|
|
<TextDefault H5 medium textColor={styles.lightText.color}>
|
|
{i18n.t("orderId")}
|
|
</TextDefault>
|
|
<TextDefault style={{ ...alignment.PBlarge }} H4 bolder>
|
|
{item.order_id}
|
|
</TextDefault>
|
|
<TextDefault H5 textColor={colors.placeHolderColor} medium>
|
|
{i18n.t("status")}
|
|
</TextDefault>
|
|
|
|
<TextDefault textColor={"#00b9c6"} H5 medium>
|
|
{i18n.t(item.order_status)}{" "}
|
|
<TextDefault numberOfLines={2} medium>
|
|
{/* {checkStatus(item.order_status).status}.{' '} */}
|
|
{/* {checkStatus(i18n.t(item.order_status)?.status)?.statusText ||
|
|
"..."} */}
|
|
{`(${i18n.t(orderStatuses[item.order_status]?.statusText)})`}
|
|
</TextDefault>
|
|
</TextDefault>
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default StatusCard;
|