fixed order status text issue
This commit is contained in:
parent
8e04835487
commit
28b7fc6277
|
@ -11,33 +11,55 @@ import TextError from "../../Text/TextError/TextError";
|
||||||
import useStyle from "./styles";
|
import useStyle from "./styles";
|
||||||
import i18n from "../../../../i18n";
|
import i18n from "../../../../i18n";
|
||||||
|
|
||||||
export const orderStatuses = [
|
// export const orderStatuses = [
|
||||||
{
|
// {
|
||||||
key: i18n.t("PENDING"),
|
// 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,
|
status: 1,
|
||||||
statusText: i18n.t("orderPending"),
|
statusText: "orderPending",
|
||||||
},
|
},
|
||||||
{
|
ACCEPTED: {
|
||||||
key: i18n.t("ACCEPTED"),
|
|
||||||
status: 2,
|
status: 2,
|
||||||
statusText: i18n.t("prepFood"),
|
statusText: "prepFood",
|
||||||
},
|
},
|
||||||
{
|
PICKED: {
|
||||||
key: i18n.t("PICKED"),
|
|
||||||
status: 3,
|
status: 3,
|
||||||
statusText: i18n.t("riderOnWay"),
|
statusText: "riderOnWay",
|
||||||
},
|
},
|
||||||
{
|
DELIVERED: {
|
||||||
key: i18n.t("DELIVERED"),
|
|
||||||
status: 4,
|
status: 4,
|
||||||
statusText: i18n.t("orderDelivered"),
|
statusText: "orderDelivered",
|
||||||
},
|
},
|
||||||
{
|
COMPLETED: {
|
||||||
key: i18n.t("COMPLETED"),
|
|
||||||
status: 5,
|
status: 5,
|
||||||
statusText: i18n.t("completeOrder"),
|
statusText: "completeOrder",
|
||||||
},
|
},
|
||||||
];
|
};
|
||||||
|
|
||||||
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
|
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
|
||||||
|
|
||||||
|
@ -54,12 +76,12 @@ const StatusCard = () => {
|
||||||
} = useContext(UserContext);
|
} = useContext(UserContext);
|
||||||
const configuration = useContext(ConfigurationContext);
|
const configuration = useContext(ConfigurationContext);
|
||||||
|
|
||||||
const checkStatus = (status) => {
|
// const checkStatus = (status) => {
|
||||||
const obj = orderStatuses.filter((x) => {
|
// const obj = orderStatuses.filter((x) => {
|
||||||
return x.key === status;
|
// return x.key === status;
|
||||||
});
|
// });
|
||||||
return obj[0];
|
// return obj[0];
|
||||||
};
|
// };
|
||||||
|
|
||||||
if (loadingOrders) return <Spinner />;
|
if (loadingOrders) return <Spinner />;
|
||||||
if (errorOrders) return <TextError>{errorOrders.message}</TextError>;
|
if (errorOrders) return <TextError>{errorOrders.message}</TextError>;
|
||||||
|
@ -101,8 +123,10 @@ const StatusCard = () => {
|
||||||
<TextDefault textColor={"#00b9c6"} H5 medium>
|
<TextDefault textColor={"#00b9c6"} H5 medium>
|
||||||
{i18n.t(item.order_status)}{" "}
|
{i18n.t(item.order_status)}{" "}
|
||||||
<TextDefault numberOfLines={2} medium>
|
<TextDefault numberOfLines={2} medium>
|
||||||
{checkStatus(item.order_status).status}. (
|
{/* {checkStatus(item.order_status).status}.{' '} */}
|
||||||
{checkStatus(i18n.t(item.order_status)).statusText})
|
{/* {checkStatus(i18n.t(item.order_status)?.status)?.statusText ||
|
||||||
|
"..."} */}
|
||||||
|
{`(${i18n.t(orderStatuses[item.order_status]?.statusText)})`}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
@ -1,93 +1,104 @@
|
||||||
import { useTheme } from '@react-navigation/native'
|
import { useTheme } from "@react-navigation/native";
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from "prop-types";
|
||||||
import React, { useContext } from 'react'
|
import React, { useContext } from "react";
|
||||||
import { TouchableOpacity, View } from 'react-native'
|
import { TouchableOpacity, View } from "react-native";
|
||||||
import ConfigurationContext from '../../context/Configuration'
|
import ConfigurationContext from "../../context/Configuration";
|
||||||
import { COLORS } from '../../Theme/Colors'
|
import { COLORS } from "../../Theme/Colors";
|
||||||
import { alignment } from '../../utils/alignment'
|
import { alignment } from "../../utils/alignment";
|
||||||
import { ICONS_NAME, NAVIGATION_SCREEN } from '../../utils/constant'
|
import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
|
||||||
import { scale } from '../../utils/scaling'
|
import { scale } from "../../utils/scaling";
|
||||||
import { CustomIcon } from '../CustomIcon/index'
|
import { CustomIcon } from "../CustomIcon/index";
|
||||||
import EnategaImage from '../EnategaImage/EnategaImage'
|
import EnategaImage from "../EnategaImage/EnategaImage";
|
||||||
import TextDefault from '../Text/TextDefault/TextDefault'
|
import TextDefault from "../Text/TextDefault/TextDefault";
|
||||||
import TextError from '../Text/TextError/TextError'
|
import TextError from "../Text/TextError/TextError";
|
||||||
import TextLine from '../Text/TextLine/TextLine'
|
import TextLine from "../Text/TextLine/TextLine";
|
||||||
import useStyle from './styles'
|
import useStyle from "./styles";
|
||||||
import i18n from '../../../i18n'
|
import i18n from "../../../i18n";
|
||||||
|
|
||||||
export const orderStatuses = [
|
export const orderStatuses = [
|
||||||
{
|
{
|
||||||
key: 'PENDING',
|
key: "PENDING",
|
||||||
status: 1,
|
status: 1,
|
||||||
icon: ICONS_NAME.Clock,
|
icon: ICONS_NAME.Clock,
|
||||||
color: COLORS.primary
|
color: COLORS.primary,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'ACCEPTED',
|
key: "ACCEPTED",
|
||||||
status: 2,
|
status: 2,
|
||||||
icon: ICONS_NAME.Checked,
|
icon: ICONS_NAME.Checked,
|
||||||
color: COLORS.blueColor
|
color: COLORS.blueColor,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'PICKED',
|
key: "PICKED",
|
||||||
status: 3,
|
status: 3,
|
||||||
icon: ICONS_NAME.Checked,
|
icon: ICONS_NAME.Checked,
|
||||||
color: COLORS.blueColor
|
color: COLORS.blueColor,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'DELIVERED',
|
key: "DELIVERED",
|
||||||
status: 4,
|
status: 4,
|
||||||
icon: ICONS_NAME.Checked,
|
icon: ICONS_NAME.Checked,
|
||||||
color: COLORS.blueColor
|
color: COLORS.blueColor,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'COMPLETED',
|
key: "COMPLETED",
|
||||||
status: 5,
|
status: 5,
|
||||||
icon: ICONS_NAME.Checked,
|
icon: ICONS_NAME.Checked,
|
||||||
color: COLORS.blueColor
|
color: COLORS.blueColor,
|
||||||
}
|
},
|
||||||
]
|
];
|
||||||
|
|
||||||
const ActiveOrders = ({
|
const ActiveOrders = ({
|
||||||
navigation,
|
navigation,
|
||||||
loading,
|
loading,
|
||||||
error,
|
error,
|
||||||
activeOrders,
|
activeOrders,
|
||||||
pastOrders
|
pastOrders,
|
||||||
}) => {
|
}) => {
|
||||||
const styles = useStyle()
|
const styles = useStyle();
|
||||||
const { colors } = useTheme()
|
const { colors } = useTheme();
|
||||||
const configuration = useContext(ConfigurationContext)
|
const configuration = useContext(ConfigurationContext);
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <TextDefault small> Loading...</TextDefault>
|
return <TextDefault small> Loading...</TextDefault>;
|
||||||
}
|
}
|
||||||
if (error) return <TextError text={error.message} />
|
if (error) return <TextError text={error.message} />;
|
||||||
if (!activeOrders || (activeOrders && !activeOrders.length)) {
|
if (!activeOrders || (activeOrders && !activeOrders.length)) {
|
||||||
if (!pastOrders || (pastOrders && !pastOrders.length)) {
|
if (!pastOrders || (pastOrders && !pastOrders.length)) {
|
||||||
return <TextDefault> </TextDefault>
|
return <TextDefault> </TextDefault>;
|
||||||
}
|
}
|
||||||
return <TextLine headerName={i18n.t('oldOrder')} textWidth="34%" lineWidth="28%" />
|
return (
|
||||||
|
<TextLine
|
||||||
|
headerName={i18n.t("oldOrder")}
|
||||||
|
textWidth="34%"
|
||||||
|
lineWidth="28%"
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const checkStatus = status => {
|
const checkStatus = (status) => {
|
||||||
const obj = orderStatuses.filter(x => {
|
const obj = orderStatuses.filter((x) => {
|
||||||
return x.key === status
|
return x.key === status;
|
||||||
})
|
});
|
||||||
return obj[0]
|
return obj[0];
|
||||||
}
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<TextLine headerName={i18n.t('activeOrder')} textWidth="40%" lineWidth="26%" />
|
<TextLine
|
||||||
|
headerName={i18n.t("activeOrder")}
|
||||||
|
textWidth="40%"
|
||||||
|
lineWidth="26%"
|
||||||
|
/>
|
||||||
{activeOrders.map((item, index) => (
|
{activeOrders.map((item, index) => (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
key={index.toString()}
|
key={index.toString()}
|
||||||
onPress={() =>
|
onPress={() =>
|
||||||
navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
|
navigation.navigate(NAVIGATION_SCREEN.OrderDetail, {
|
||||||
_id: item._id
|
_id: item._id,
|
||||||
})
|
})
|
||||||
}>
|
}
|
||||||
|
>
|
||||||
<View style={styles.container}>
|
<View style={styles.container}>
|
||||||
<View style={styles.imgContainer}>
|
<View style={styles.imgContainer}>
|
||||||
<EnategaImage
|
<EnategaImage
|
||||||
|
@ -98,7 +109,7 @@ const ActiveOrders = ({
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.infoContainer}>
|
<View style={styles.infoContainer}>
|
||||||
<TextDefault H5 bolder style={alignment.MBxSmall}>
|
<TextDefault H5 bolder style={alignment.MBxSmall}>
|
||||||
{i18n.t('idVar')}
|
{i18n.t("idVar")}
|
||||||
{item.order_id}
|
{item.order_id}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault line={3} textColor={colors.tagColor} H5 bold>
|
<TextDefault line={3} textColor={colors.tagColor} H5 bold>
|
||||||
|
@ -117,7 +128,8 @@ const ActiveOrders = ({
|
||||||
textColor={checkStatus(item.order_status).color}
|
textColor={checkStatus(item.order_status).color}
|
||||||
style={alignment.MTxSmall}
|
style={alignment.MTxSmall}
|
||||||
bold
|
bold
|
||||||
center>
|
center
|
||||||
|
>
|
||||||
{i18n.t(item.order_status)}
|
{i18n.t(item.order_status)}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</View>
|
</View>
|
||||||
|
@ -126,15 +138,15 @@ const ActiveOrders = ({
|
||||||
))}
|
))}
|
||||||
<TextLine headerName="Old Orders" textWidth="34%" lineWidth="26%" />
|
<TextLine headerName="Old Orders" textWidth="34%" lineWidth="26%" />
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ActiveOrders.propTypes = {
|
ActiveOrders.propTypes = {
|
||||||
loading: PropTypes.bool,
|
loading: PropTypes.bool,
|
||||||
error: PropTypes.object,
|
error: PropTypes.object,
|
||||||
activeOrders: PropTypes.arrayOf(PropTypes.object),
|
activeOrders: PropTypes.arrayOf(PropTypes.object),
|
||||||
navigation: PropTypes.object,
|
navigation: PropTypes.object,
|
||||||
pastOrders: PropTypes.arrayOf(PropTypes.object)
|
pastOrders: PropTypes.arrayOf(PropTypes.object),
|
||||||
}
|
};
|
||||||
|
|
||||||
export default ActiveOrders
|
export default ActiveOrders;
|
||||||
|
|
|
@ -21,8 +21,8 @@ import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
|
||||||
import { scale } from "../../utils/scaling";
|
import { scale } from "../../utils/scaling";
|
||||||
import useStyle from "./style";
|
import useStyle from "./style";
|
||||||
|
|
||||||
const orderStatusActive = [i18n.t("PENDING"), i18n.t("PICKED"), i18n.t("ACCEPTED")];
|
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
|
||||||
const orderStatusInactive = [i18n.t("DELIVERED"), i18n.t("COMPLETED")];
|
const orderStatusInactive = ["DELIVERED", "COMPLETED"];
|
||||||
|
|
||||||
function MyOrders() {
|
function MyOrders() {
|
||||||
const styles = useStyle();
|
const styles = useStyle();
|
||||||
|
@ -86,7 +86,7 @@ function MyOrders() {
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.descriptionEmpty}>
|
<View style={styles.descriptionEmpty}>
|
||||||
<TextDefault bolder center H4>
|
<TextDefault bolder center H4>
|
||||||
{i18n.t('noOrdersFound')}
|
{i18n.t("noOrdersFound")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</View>
|
</View>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
@ -95,7 +95,7 @@ function MyOrders() {
|
||||||
onPress={() => navigation.navigate(NAVIGATION_SCREEN.Menu)}
|
onPress={() => navigation.navigate(NAVIGATION_SCREEN.Menu)}
|
||||||
>
|
>
|
||||||
<TextDefault textColor={colors.buttonText} bold H5 center>
|
<TextDefault textColor={colors.buttonText} bold H5 center>
|
||||||
{i18n.t('startShopping')}
|
{i18n.t("startShopping")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
|
@ -103,13 +103,16 @@ function MyOrders() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(orders);
|
||||||
return (
|
return (
|
||||||
<WrapperView>
|
<WrapperView>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={
|
data={
|
||||||
loadingOrders || errorOrders
|
loadingOrders || errorOrders
|
||||||
? []
|
? []
|
||||||
: orders.filter((o) => orderStatusInactive.includes(i18n.t(o.order_status)))
|
: orders.filter((o) =>
|
||||||
|
orderStatusInactive.includes(o.order_status)
|
||||||
|
)
|
||||||
}
|
}
|
||||||
style={styles.container}
|
style={styles.container}
|
||||||
contentContainerStyle={styles.contentContainer}
|
contentContainerStyle={styles.contentContainer}
|
||||||
|
@ -118,10 +121,10 @@ function MyOrders() {
|
||||||
<ActiveOrders
|
<ActiveOrders
|
||||||
navigation={navigation}
|
navigation={navigation}
|
||||||
activeOrders={orders.filter((o) =>
|
activeOrders={orders.filter((o) =>
|
||||||
orderStatusActive.includes(i18n.t(o.order_status))
|
orderStatusActive.includes(o.order_status)
|
||||||
)}
|
)}
|
||||||
pastOrders={orders.filter((o) =>
|
pastOrders={orders.filter((o) =>
|
||||||
orderStatusInactive.includes(i18n.t(o.order_status))
|
orderStatusInactive.includes(o.order_status)
|
||||||
)}
|
)}
|
||||||
loading={loadingOrders}
|
loading={loadingOrders}
|
||||||
error={errorOrders}
|
error={errorOrders}
|
||||||
|
@ -151,7 +154,7 @@ function MyOrders() {
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.infoContainer}>
|
<View style={styles.infoContainer}>
|
||||||
<TextDefault H5 bold style={alignment.MBxSmall}>
|
<TextDefault H5 bold style={alignment.MBxSmall}>
|
||||||
{i18n.t('idVar')}
|
{i18n.t("idVar")}
|
||||||
{item.order_id}
|
{item.order_id}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault line={3} textColor={colors.tagColor} H5 medium>
|
<TextDefault line={3} textColor={colors.tagColor} H5 medium>
|
||||||
|
|
|
@ -1,79 +1,79 @@
|
||||||
import { MaterialIcons } from '@expo/vector-icons'
|
import { MaterialIcons } from "@expo/vector-icons";
|
||||||
import { useNavigation, useRoute, useTheme } from '@react-navigation/native'
|
import { useNavigation, useRoute, useTheme } from "@react-navigation/native";
|
||||||
import React, { useContext, useEffect, useLayoutEffect } from 'react'
|
import React, { useContext, useEffect, useLayoutEffect } from "react";
|
||||||
import { Platform, ScrollView, TouchableOpacity, View } from 'react-native'
|
import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
|
||||||
import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps'
|
import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from "react-native-maps";
|
||||||
import i18n from '../../../i18n'
|
import i18n from "../../../i18n";
|
||||||
import {
|
import {
|
||||||
Spinner,
|
Spinner,
|
||||||
TextDefault,
|
TextDefault,
|
||||||
TextError,
|
TextError,
|
||||||
TrackingRider,
|
TrackingRider,
|
||||||
WrapperView
|
WrapperView,
|
||||||
} from '../../components'
|
} from "../../components";
|
||||||
import { orderStatuses } from '../../components/Menu/StatusCard/StatusCard'
|
import { orderStatuses } from "../../components/Menu/StatusCard/StatusCard";
|
||||||
import ConfigurationContext from '../../context/Configuration'
|
import ConfigurationContext from "../../context/Configuration";
|
||||||
import UserContext from '../../context/User'
|
import UserContext from "../../context/User";
|
||||||
import { alignment } from '../../utils/alignment'
|
import { alignment } from "../../utils/alignment";
|
||||||
import { NAVIGATION_SCREEN } from '../../utils/constant'
|
import { NAVIGATION_SCREEN } from "../../utils/constant";
|
||||||
import { moderateScale, scale } from '../../utils/scaling'
|
import { moderateScale, scale } from "../../utils/scaling";
|
||||||
import useStyle from './styles'
|
import useStyle from "./styles";
|
||||||
|
|
||||||
function calculatePrice(food) {
|
function calculatePrice(food) {
|
||||||
var foodPrice = food.variation.price
|
var foodPrice = food.variation.price;
|
||||||
food.addons.forEach(addons => {
|
food.addons.forEach((addons) => {
|
||||||
addons.options.forEach(addon => {
|
addons.options.forEach((addon) => {
|
||||||
foodPrice += addon.price
|
foodPrice += addon.price;
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
return foodPrice
|
return foodPrice;
|
||||||
}
|
}
|
||||||
|
|
||||||
const checkStatus = status => {
|
// const checkStatus = (status) => {
|
||||||
const obj = orderStatuses.filter(x => {
|
// const obj = orderStatuses.filter((x) => {
|
||||||
return x.key === status
|
// return x.key === status;
|
||||||
})
|
// });
|
||||||
return obj[0]
|
// return obj[0];
|
||||||
}
|
// };
|
||||||
|
|
||||||
function OrderDetail() {
|
function OrderDetail() {
|
||||||
const styles = useStyle()
|
const styles = useStyle();
|
||||||
const route = useRoute()
|
const route = useRoute();
|
||||||
const { colors } = useTheme()
|
const { colors } = useTheme();
|
||||||
const navigation = useNavigation()
|
const navigation = useNavigation();
|
||||||
const id = route.params._id ?? null
|
const id = route.params._id ?? null;
|
||||||
const cart = route.params.clearCart ?? false
|
const cart = route.params.clearCart ?? false;
|
||||||
const { loadingOrders, errorOrders, orders, clearCart } =
|
const { loadingOrders, errorOrders, orders, clearCart } =
|
||||||
useContext(UserContext)
|
useContext(UserContext);
|
||||||
const configuration = useContext(ConfigurationContext)
|
const configuration = useContext(ConfigurationContext);
|
||||||
|
|
||||||
const order = orders.find(o => o._id === id)
|
const order = orders.find((o) => o._id === id);
|
||||||
|
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
navigation.setOptions({
|
navigation.setOptions({
|
||||||
headerTitle: i18n.t('orderDetail'),
|
headerTitle: i18n.t("orderDetail"),
|
||||||
headerRight: null
|
headerRight: null,
|
||||||
})
|
});
|
||||||
}, [navigation])
|
}, [navigation]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
if (cart) {
|
if (cart) {
|
||||||
clear()
|
clear();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
}, [cart])
|
}, [cart]);
|
||||||
async function clear() {
|
async function clear() {
|
||||||
await clearCart()
|
await clearCart();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (loadingOrders || !order) return <Spinner />
|
if (loadingOrders || !order) return <Spinner />;
|
||||||
if (errorOrders) return <TextError text={i18n.t('error')} />
|
if (errorOrders) return <TextError text={i18n.t("error")} />;
|
||||||
return (
|
return (
|
||||||
<WrapperView>
|
<WrapperView>
|
||||||
<ScrollView style={[styles.flex]}>
|
<ScrollView style={[styles.flex]}>
|
||||||
<View>
|
<View>
|
||||||
{i18n.t(order.order_status) === i18n.t('PICKED') && order.rider && (
|
{i18n.t(order.order_status) === i18n.t("PICKED") && order.rider && (
|
||||||
<TrackingRider
|
<TrackingRider
|
||||||
delivery_address={order.delivery_address}
|
delivery_address={order.delivery_address}
|
||||||
id={order.rider._id}
|
id={order.rider._id}
|
||||||
|
@ -85,15 +85,17 @@ function OrderDetail() {
|
||||||
textColor={colors.buttonBackgroundBlue}
|
textColor={colors.buttonBackgroundBlue}
|
||||||
bolder
|
bolder
|
||||||
H3
|
H3
|
||||||
style={alignment.MBsmall}>
|
style={alignment.MBsmall}
|
||||||
{i18n.t('thankYou')}
|
>
|
||||||
|
{i18n.t("thankYou")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontSecondColor}
|
textColor={colors.fontSecondColor}
|
||||||
medium
|
medium
|
||||||
H5
|
H5
|
||||||
style={[alignment.MTsmall]}>
|
style={[alignment.MTsmall]}
|
||||||
{i18n.t('orderId')}
|
>
|
||||||
|
{i18n.t("orderId")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault H4 bolder style={alignment.PTxSmall}>
|
<TextDefault H4 bolder style={alignment.PTxSmall}>
|
||||||
{order.order_id}
|
{order.order_id}
|
||||||
|
@ -102,21 +104,24 @@ function OrderDetail() {
|
||||||
textColor={colors.fontSecondColor}
|
textColor={colors.fontSecondColor}
|
||||||
bold
|
bold
|
||||||
H5
|
H5
|
||||||
style={[alignment.MTlarge]}>
|
style={[alignment.MTlarge]}
|
||||||
{i18n.t('status')}
|
>
|
||||||
|
{i18n.t("status")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.buttonBackgroundBlue}
|
textColor={colors.buttonBackgroundBlue}
|
||||||
H4
|
H4
|
||||||
medium
|
medium
|
||||||
style={[alignment.MBsmall, alignment.MTxSmall]}>
|
style={[alignment.MBsmall, alignment.MTxSmall]}
|
||||||
{i18n.t(order.order_status)}{' '}
|
>
|
||||||
|
{i18n.t(order.order_status)}{" "}
|
||||||
<TextDefault medium>
|
<TextDefault medium>
|
||||||
( {checkStatus(i18n.t(order.order_status)).statusText})
|
{/* ({checkStatus(i18n.t(order.order_status))?.statusText || "..."}) */}
|
||||||
|
{`(${i18n.t(orderStatuses[order.order_status]?.statusText)})`}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault textColor={colors.fontSecondColor} H5 bold>
|
<TextDefault textColor={colors.fontSecondColor} H5 bold>
|
||||||
{i18n.t('deliveryAddress')}:
|
{i18n.t("deliveryAddress")}:
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault style={{ ...alignment.PTxSmall }} H5>
|
<TextDefault style={{ ...alignment.PTxSmall }} H5>
|
||||||
{order.delivery_address.delivery_address}
|
{order.delivery_address.delivery_address}
|
||||||
|
@ -128,18 +133,20 @@ function OrderDetail() {
|
||||||
<View style={[styles.marginBottom10, styles.orderReceipt]}>
|
<View style={[styles.marginBottom10, styles.orderReceipt]}>
|
||||||
{order.items.map((item, index) => (
|
{order.items.map((item, index) => (
|
||||||
<View style={[styles.marginBottom10, styles.floatView]} key={index}>
|
<View style={[styles.marginBottom10, styles.floatView]} key={index}>
|
||||||
<TextDefault H5 style={{ width: '10%' }}>
|
<TextDefault H5 style={{ width: "10%" }}>
|
||||||
{item.quantity}x
|
{item.quantity}x
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
style={{ width: '65%' }}>
|
style={{ width: "65%" }}
|
||||||
|
>
|
||||||
{item.food.title}
|
{item.food.title}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
style={{ width: '25%' }}
|
style={{ width: "25%" }}
|
||||||
right>
|
right
|
||||||
|
>
|
||||||
{configuration.currency_symbol}
|
{configuration.currency_symbol}
|
||||||
{parseFloat(calculatePrice(item)).toFixed(2)}
|
{parseFloat(calculatePrice(item)).toFixed(2)}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
|
@ -150,14 +157,16 @@ function OrderDetail() {
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
medium
|
medium
|
||||||
style={{ width: '40%' }}>
|
style={{ width: "40%" }}
|
||||||
{i18n.t('subTotal')}
|
>
|
||||||
|
{i18n.t("subTotal")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
medium
|
medium
|
||||||
style={{ width: '60%' }}
|
style={{ width: "60%" }}
|
||||||
right>
|
right
|
||||||
|
>
|
||||||
{configuration.currency_symbol}
|
{configuration.currency_symbol}
|
||||||
{parseFloat(order.order_amount - order.delivery_charges).toFixed(
|
{parseFloat(order.order_amount - order.delivery_charges).toFixed(
|
||||||
2
|
2
|
||||||
|
@ -168,14 +177,16 @@ function OrderDetail() {
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
medium
|
medium
|
||||||
style={{ width: '40%' }}>
|
style={{ width: "40%" }}
|
||||||
{i18n.t('deliveryFee')}
|
>
|
||||||
|
{i18n.t("deliveryFee")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
medium
|
medium
|
||||||
style={{ width: '60%' }}
|
style={{ width: "60%" }}
|
||||||
right>
|
right
|
||||||
|
>
|
||||||
{configuration.currency_symbol}
|
{configuration.currency_symbol}
|
||||||
{parseFloat(order.delivery_charges).toFixed(2)}
|
{parseFloat(order.delivery_charges).toFixed(2)}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
|
@ -184,26 +195,29 @@ function OrderDetail() {
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
bold
|
bold
|
||||||
style={{ width: '40%' }}>
|
style={{ width: "40%" }}
|
||||||
{i18n.t('total')}
|
>
|
||||||
|
{i18n.t("total")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
<TextDefault
|
<TextDefault
|
||||||
textColor={colors.fontMainColor}
|
textColor={colors.fontMainColor}
|
||||||
bold
|
bold
|
||||||
style={{ width: '60%' }}
|
style={{ width: "60%" }}
|
||||||
right>
|
right
|
||||||
|
>
|
||||||
{configuration.currency_symbol}
|
{configuration.currency_symbol}
|
||||||
{parseFloat(order.order_amount).toFixed(2)}
|
{parseFloat(order.order_amount).toFixed(2)}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
{i18n.t(order.order_status) === i18n.t('PICKED') && (
|
{i18n.t(order.order_status) === i18n.t("PICKED") && (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
...alignment.PLmedium,
|
...alignment.PLmedium,
|
||||||
...alignment.PRmedium,
|
...alignment.PRmedium,
|
||||||
height: moderateScale(250)
|
height: moderateScale(250),
|
||||||
}}>
|
}}
|
||||||
|
>
|
||||||
<MapView
|
<MapView
|
||||||
style={{ flex: 1, borderRadius: 20 }}
|
style={{ flex: 1, borderRadius: 20 }}
|
||||||
scrollEnabled={false}
|
scrollEnabled={false}
|
||||||
|
@ -222,72 +236,78 @@ function OrderDetail() {
|
||||||
loadingEnabled={true}
|
loadingEnabled={true}
|
||||||
loadingIndicatorColor="#d83765"
|
loadingIndicatorColor="#d83765"
|
||||||
provider={
|
provider={
|
||||||
Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
|
Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
|
||||||
}></MapView>
|
}
|
||||||
|
></MapView>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
...alignment.PTlarge,
|
...alignment.PTlarge,
|
||||||
width: '80%',
|
width: "80%",
|
||||||
borderRadius: moderateScale(10),
|
borderRadius: moderateScale(10),
|
||||||
alignSelf: 'center'
|
alignSelf: "center",
|
||||||
}}>
|
}}
|
||||||
|
>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
activeOpacity={0.8}
|
activeOpacity={0.8}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: colors.buttonBackgroundBlue,
|
backgroundColor: colors.buttonBackgroundBlue,
|
||||||
alignItems: 'center',
|
alignItems: "center",
|
||||||
padding: moderateScale(16),
|
padding: moderateScale(16),
|
||||||
borderRadius: moderateScale(10)
|
borderRadius: moderateScale(10),
|
||||||
}}>
|
}}
|
||||||
|
>
|
||||||
<TextDefault H5 bold textColor={colors.lightBackground}>
|
<TextDefault H5 bold textColor={colors.lightBackground}>
|
||||||
{i18n.t('chatWithRider')}
|
{i18n.t("chatWithRider")}
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(i18n.t(order.order_status) === i18n.t('DELIVERED') ||
|
{(i18n.t(order.order_status) === i18n.t("DELIVERED") ||
|
||||||
i18n.t(order.order_status) === i18n.t('COMPLETED')) &&
|
i18n.t(order.order_status) === i18n.t("COMPLETED")) &&
|
||||||
order.review &&
|
order.review &&
|
||||||
order.review.rating === 0 && (
|
order.review.rating === 0 && (
|
||||||
<View style={styles.orderReceipt}>
|
<View style={styles.orderReceipt}>
|
||||||
<TextDefault H3 bolder style={alignment.MBsmall}>
|
<TextDefault H3 bolder style={alignment.MBsmall}>
|
||||||
{i18n.t('anySuggestion')}
|
{i18n.t("anySuggestion")}
|
||||||
</TextDefault>
|
|
||||||
<TextDefault
|
|
||||||
textColor={colors.fontSecondColor}
|
|
||||||
bold
|
|
||||||
style={[alignment.MBsmall, alignment.MTsmall]}>
|
|
||||||
{i18n.t('reviewRegarding')}
|
|
||||||
</TextDefault>
|
|
||||||
<TouchableOpacity
|
|
||||||
activeOpacity={0.7}
|
|
||||||
style={[styles.floatView, { justifyContent: 'center' }]}
|
|
||||||
onPress={() =>
|
|
||||||
navigation.navigate(NAVIGATION_SCREEN.RateAndReview, {
|
|
||||||
_id: order._id
|
|
||||||
})
|
|
||||||
}>
|
|
||||||
<MaterialIcons
|
|
||||||
name="rate-review"
|
|
||||||
size={scale(20)}
|
|
||||||
color={colors.iconColorPrimary}
|
|
||||||
/>
|
|
||||||
<TextDefault
|
|
||||||
textColor={colors.iconColorPrimary}
|
|
||||||
style={[alignment.MBsmall, alignment.MTsmall, alignment.ML10]}
|
|
||||||
H5
|
|
||||||
bold
|
|
||||||
center>
|
|
||||||
{i18n.t('writeReview')}
|
|
||||||
</TextDefault>
|
</TextDefault>
|
||||||
</TouchableOpacity>
|
<TextDefault
|
||||||
</View>
|
textColor={colors.fontSecondColor}
|
||||||
)}
|
bold
|
||||||
|
style={[alignment.MBsmall, alignment.MTsmall]}
|
||||||
|
>
|
||||||
|
{i18n.t("reviewRegarding")}
|
||||||
|
</TextDefault>
|
||||||
|
<TouchableOpacity
|
||||||
|
activeOpacity={0.7}
|
||||||
|
style={[styles.floatView, { justifyContent: "center" }]}
|
||||||
|
onPress={() =>
|
||||||
|
navigation.navigate(NAVIGATION_SCREEN.RateAndReview, {
|
||||||
|
_id: order._id,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<MaterialIcons
|
||||||
|
name="rate-review"
|
||||||
|
size={scale(20)}
|
||||||
|
color={colors.iconColorPrimary}
|
||||||
|
/>
|
||||||
|
<TextDefault
|
||||||
|
textColor={colors.iconColorPrimary}
|
||||||
|
style={[alignment.MBsmall, alignment.MTsmall, alignment.ML10]}
|
||||||
|
H5
|
||||||
|
bold
|
||||||
|
center
|
||||||
|
>
|
||||||
|
{i18n.t("writeReview")}
|
||||||
|
</TextDefault>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
</WrapperView>
|
</WrapperView>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default OrderDetail
|
export default OrderDetail;
|
||||||
|
|
|
@ -125,9 +125,12 @@ function Settings() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
AppState.addEventListener("change", _handleAppStateChange);
|
const subscription = AppState.addEventListener(
|
||||||
|
"change",
|
||||||
|
_handleAppStateChange
|
||||||
|
);
|
||||||
return () => {
|
return () => {
|
||||||
AppState.remove("change", _handleAppStateChange);
|
subscription.remove("change", _handleAppStateChange);
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue