grocery-app/CustomerApp/src/components/MyOrders/ActiveOrders.js

import { useTheme } from "@react-navigation/native";
import PropTypes from "prop-types";
import React, { useContext } from "react";
import { TouchableOpacity, View } from "react-native";
import ConfigurationContext from "../../context/Configuration";
import { COLORS } from "../../Theme/Colors";
import { alignment } from "../../utils/alignment";
import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from "../../utils/scaling";
import { CustomIcon } from "../CustomIcon/index";
import EnategaImage from "../EnategaImage/EnategaImage";
import TextDefault from "../Text/TextDefault/TextDefault";
import TextError from "../Text/TextError/TextError";
import TextLine from "../Text/TextLine/TextLine";
import useStyle from "./styles";
import i18n from "../../../i18n";

export const orderStatuses = [
  {
    key: "PENDING",
    status: 1,
    icon: ICONS_NAME.Clock,
    color: COLORS.primary,
  },
  {
    key: "ACCEPTED",
    status: 2,
    icon: ICONS_NAME.Checked,
    color: COLORS.blueColor,
  },
  {
    key: "PICKED",
    status: 3,
    icon: ICONS_NAME.Checked,
    color: COLORS.blueColor,
  },
  {
    key: "DELIVERED",
    status: 4,
    icon: ICONS_NAME.Checked,
    color: COLORS.blueColor,
  },
  {
    key: "COMPLETED",
    status: 5,
    icon: ICONS_NAME.Checked,
    color: COLORS.blueColor,
  },
];

const ActiveOrders = ({
  navigation,
  loading,
  error,
  activeOrders,
  pastOrders,
}) => {
  const styles = useStyle();
  const { colors } = useTheme();
  const configuration = useContext(ConfigurationContext);
  if (loading) {
    return <TextDefault small> Loading...</TextDefault>;
  }
  if (error) return <TextError text={error.message} />;
  if (!activeOrders || (activeOrders && !activeOrders.length)) {
    if (!pastOrders || (pastOrders && !pastOrders.length)) {
      return <TextDefault> </TextDefault>;
    }
    return (
      <TextLine
        headerName={i18n.t("oldOrder")}
        textWidth="34%"
        lineWidth="28%"
      />
    );
  }

  const checkStatus = (status) => {
    const obj = orderStatuses.filter((x) => {
      return x.key === status;
    });
    return obj[0];
  };

  return (
    <React.Fragment>
      <TextLine
        headerName={i18n.t("activeOrder")}
        textWidth="40%"
        lineWidth="26%"
      />
      {activeOrders.map((item, index) => (
        <TouchableOpacity
          activeOpacity={0.7}
          key={index.toString()}
          onPress={() =>
            navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
              _id: item._id,
            })
          }
        >
          <View style={styles.container}>
            <View style={styles.imgContainer}>
              <EnategaImage
                imgStyle={styles.imgResponsive}
                imgSource={{ uri: item?.items[0]?.food?.img_url }}
                spinnerProps={{ style: styles.loadingView }}
              />
            </View>
            <View style={styles.infoContainer}>
              <TextDefault H5 bolder style={alignment.MBxSmall}>
                {i18n.t("idVar")}
                {item.order_id}
              </TextDefault>
              <TextDefault line={3} textColor={colors.tagColor} H5 bold>
                {configuration.currency_symbol}
                {item.order_amount}
              </TextDefault>
            </View>
            <View style={styles.Vline} />
            <View style={styles.rightContainer}>
              <CustomIcon
                name={checkStatus(item.order_status).icon}
                size={scale(28)}
                color={checkStatus(item.order_status).color}
              />
              <TextDefault
                textColor={checkStatus(item.order_status).color}
                style={alignment.MTxSmall}
                bold
                center
              >
                {i18n.t(item.order_status)}
              </TextDefault>
            </View>
          </View>
        </TouchableOpacity>
      ))}
      <TextLine headerName="Old Orders" textWidth="34%" lineWidth="26%" />
    </React.Fragment>
  );
};

ActiveOrders.propTypes = {
  loading: PropTypes.bool,
  error: PropTypes.object,
  activeOrders: PropTypes.arrayOf(PropTypes.object),
  navigation: PropTypes.object,
  pastOrders: PropTypes.arrayOf(PropTypes.object),
};

export default ActiveOrders;