steve
/
grocery-app
mirror of https://github.com/ninjas-code-official/food-delivery-singlevendor
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fixed order status text issue

This commit is contained in:
aliyanlatif 2024-01-31 15:05:01 +05:00
parent 8e04835487
commit 28b7fc6277
5 changed files with 272 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
CustomerApp/src/components/Menu/StatusCard/StatusCard.js
View File

@ -11,33 +11,55 @@ import TextError from "../../Text/TextError/TextError";
import useStyle from "./styles";
import i18n from "../../../../i18n";
export const orderStatuses = [
{
key: i18n.t("PENDING"),
// 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: i18n.t("orderPending"),
statusText: "orderPending",
},
{
key: i18n.t("ACCEPTED"),
ACCEPTED: {
status: 2,
statusText: i18n.t("prepFood"),
statusText: "prepFood",
},
{
key: i18n.t("PICKED"),
PICKED: {
status: 3,
statusText: i18n.t("riderOnWay"),
statusText: "riderOnWay",
},
{
key: i18n.t("DELIVERED"),
DELIVERED: {
status: 4,
statusText: i18n.t("orderDelivered"),
statusText: "orderDelivered",
},
{
key: i18n.t("COMPLETED"),
COMPLETED: {
status: 5,
statusText: i18n.t("completeOrder"),
statusText: "completeOrder",
},
];
};
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
@ -54,12 +76,12 @@ const StatusCard = () => {
} = useContext(UserContext);
const configuration = useContext(ConfigurationContext);
const checkStatus = (status) => {
const obj = orderStatuses.filter((x) => {
return x.key === status;
});
return obj[0];
};
// 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>;
@ -101,8 +123,10 @@ const StatusCard = () => {
<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)).statusText})
{/* {checkStatus(item.order_status).status}.{' '} */}
{/* {checkStatus(i18n.t(item.order_status)?.status)?.statusText ||
"..."} */}
{`(${i18n.t(orderStatuses[item.order_status]?.statusText)})`}
</TextDefault>
</TextDefault>
</View>

116
CustomerApp/src/components/MyOrders/ActiveOrders.js
View File

@ -1,93 +1,104 @@
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'
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',
key: "PENDING",
status: 1,
icon: ICONS_NAME.Clock,
color: COLORS.primary
color: COLORS.primary,
},
{
key: 'ACCEPTED',
key: "ACCEPTED",
status: 2,
icon: ICONS_NAME.Checked,
color: COLORS.blueColor
color: COLORS.blueColor,
},
{
key: 'PICKED',
key: "PICKED",
status: 3,
icon: ICONS_NAME.Checked,
color: COLORS.blueColor
color: COLORS.blueColor,
},
{
key: 'DELIVERED',
key: "DELIVERED",
status: 4,
icon: ICONS_NAME.Checked,
color: COLORS.blueColor
color: COLORS.blueColor,
},
{
key: 'COMPLETED',
key: "COMPLETED",
status: 5,
icon: ICONS_NAME.Checked,
color: COLORS.blueColor
}
]
color: COLORS.blueColor,
},
];
const ActiveOrders = ({
navigation,
loading,
error,
activeOrders,
pastOrders
pastOrders,
}) => {
const styles = useStyle()
const { colors } = useTheme()
const configuration = useContext(ConfigurationContext)
const styles = useStyle();
const { colors } = useTheme();
const configuration = useContext(ConfigurationContext);
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 (!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 obj = orderStatuses.filter(x => {
return x.key === status
})
return obj[0]
}
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%" />
<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
_id: item._id,
})
}>
}
>
<View style={styles.container}>
<View style={styles.imgContainer}>
<EnategaImage
@ -98,7 +109,7 @@ const ActiveOrders = ({
</View>
<View style={styles.infoContainer}>
<TextDefault H5 bolder style={alignment.MBxSmall}>
{i18n.t('idVar')}
{i18n.t("idVar")}
{item.order_id}
</TextDefault>
<TextDefault line={3} textColor={colors.tagColor} H5 bold>
@ -117,7 +128,8 @@ const ActiveOrders = ({
textColor={checkStatus(item.order_status).color}
style={alignment.MTxSmall}
bold
center>
center
>
{i18n.t(item.order_status)}
</TextDefault>
</View>
@ -126,15 +138,15 @@ const ActiveOrders = ({
))}
<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)
}
pastOrders: PropTypes.arrayOf(PropTypes.object),
};
export default ActiveOrders
export default ActiveOrders;

19
CustomerApp/src/screens/MyOrders/MyOrders.js
View File

@ -21,8 +21,8 @@ import { ICONS_NAME, NAVIGATION_SCREEN } from "../../utils/constant";
import { scale } from "../../utils/scaling";
import useStyle from "./style";
const orderStatusActive = [i18n.t("PENDING"), i18n.t("PICKED"), i18n.t("ACCEPTED")];
const orderStatusInactive = [i18n.t("DELIVERED"), i18n.t("COMPLETED")];
const orderStatusActive = ["PENDING", "PICKED", "ACCEPTED"];
const orderStatusInactive = ["DELIVERED", "COMPLETED"];
function MyOrders() {
const styles = useStyle();
@ -86,7 +86,7 @@ function MyOrders() {
</View>
<View style={styles.descriptionEmpty}>
<TextDefault bolder center H4>
{i18n.t('noOrdersFound')}
{i18n.t("noOrdersFound")}
</TextDefault>
</View>
<TouchableOpacity
@ -95,7 +95,7 @@ function MyOrders() {
onPress={() => navigation.navigate(NAVIGATION_SCREEN.Menu)}
>
<TextDefault textColor={colors.buttonText} bold H5 center>
{i18n.t('startShopping')}
{i18n.t("startShopping")}
</TextDefault>
</TouchableOpacity>
</View>
@ -103,13 +103,16 @@ function MyOrders() {
}
}
console.log(orders);
return (
<WrapperView>
<FlatList
data={
loadingOrders || errorOrders
? []
: orders.filter((o) => orderStatusInactive.includes(i18n.t(o.order_status)))
: orders.filter((o) =>
orderStatusInactive.includes(o.order_status)
)
}
style={styles.container}
contentContainerStyle={styles.contentContainer}
@ -118,10 +121,10 @@ function MyOrders() {
<ActiveOrders
navigation={navigation}
activeOrders={orders.filter((o) =>
orderStatusActive.includes(i18n.t(o.order_status))
orderStatusActive.includes(o.order_status)
)}
pastOrders={orders.filter((o) =>
orderStatusInactive.includes(i18n.t(o.order_status))
orderStatusInactive.includes(o.order_status)
)}
loading={loadingOrders}
error={errorOrders}
@ -151,7 +154,7 @@ function MyOrders() {
</View>
<View style={styles.infoContainer}>
<TextDefault H5 bold style={alignment.MBxSmall}>
{i18n.t('idVar')}
{i18n.t("idVar")}
{item.order_id}
</TextDefault>
<TextDefault line={3} textColor={colors.tagColor} H5 medium>

266
CustomerApp/src/screens/OrderDetail/OrderDetail.js
View File

@ -1,79 +1,79 @@
import { MaterialIcons } from '@expo/vector-icons'
import { useNavigation, useRoute, useTheme } from '@react-navigation/native'
import React, { useContext, useEffect, useLayoutEffect } from 'react'
import { Platform, ScrollView, TouchableOpacity, View } from 'react-native'
import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from 'react-native-maps'
import i18n from '../../../i18n'
import { MaterialIcons } from "@expo/vector-icons";
import { useNavigation, useRoute, useTheme } from "@react-navigation/native";
import React, { useContext, useEffect, useLayoutEffect } from "react";
import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
import MapView, { PROVIDER_DEFAULT, PROVIDER_GOOGLE } from "react-native-maps";
import i18n from "../../../i18n";
import {
Spinner,
TextDefault,
TextError,
TrackingRider,
WrapperView
} from '../../components'
import { orderStatuses } from '../../components/Menu/StatusCard/StatusCard'
import ConfigurationContext from '../../context/Configuration'
import UserContext from '../../context/User'
import { alignment } from '../../utils/alignment'
import { NAVIGATION_SCREEN } from '../../utils/constant'
import { moderateScale, scale } from '../../utils/scaling'
import useStyle from './styles'
WrapperView,
} from "../../components";
import { orderStatuses } from "../../components/Menu/StatusCard/StatusCard";
import ConfigurationContext from "../../context/Configuration";
import UserContext from "../../context/User";
import { alignment } from "../../utils/alignment";
import { NAVIGATION_SCREEN } from "../../utils/constant";
import { moderateScale, scale } from "../../utils/scaling";
import useStyle from "./styles";
function calculatePrice(food) {
var foodPrice = food.variation.price
food.addons.forEach(addons => {
addons.options.forEach(addon => {
foodPrice += addon.price
})
})
return foodPrice
var foodPrice = food.variation.price;
food.addons.forEach((addons) => {
addons.options.forEach((addon) => {
foodPrice += addon.price;
});
});
return foodPrice;
}
const checkStatus = status => {
const obj = orderStatuses.filter(x => {
return x.key === status
})
return obj[0]
}
// const checkStatus = (status) => {
// const obj = orderStatuses.filter((x) => {
// return x.key === status;
// });
// return obj[0];
// };
function OrderDetail() {
const styles = useStyle()
const route = useRoute()
const { colors } = useTheme()
const navigation = useNavigation()
const id = route.params._id ?? null
const cart = route.params.clearCart ?? false
const styles = useStyle();
const route = useRoute();
const { colors } = useTheme();
const navigation = useNavigation();
const id = route.params._id ?? null;
const cart = route.params.clearCart ?? false;
const { loadingOrders, errorOrders, orders, clearCart } =
useContext(UserContext)
const configuration = useContext(ConfigurationContext)
useContext(UserContext);
const configuration = useContext(ConfigurationContext);
const order = orders.find(o => o._id === id)
const order = orders.find((o) => o._id === id);
useLayoutEffect(() => {
navigation.setOptions({
headerTitle: i18n.t('orderDetail'),
headerRight: null
})
}, [navigation])
headerTitle: i18n.t("orderDetail"),
headerRight: null,
});
}, [navigation]);
useEffect(() => {
return () => {
if (cart) {
clear()
clear();
}
}
}, [cart])
};
}, [cart]);
async function clear() {
await clearCart()
await clearCart();
}
if (loadingOrders || !order) return <Spinner />
if (errorOrders) return <TextError text={i18n.t('error')} />
if (loadingOrders || !order) return <Spinner />;
if (errorOrders) return <TextError text={i18n.t("error")} />;
return (
<WrapperView>
<ScrollView style={[styles.flex]}>
<View>
{i18n.t(order.order_status) === i18n.t('PICKED') && order.rider && (
{i18n.t(order.order_status) === i18n.t("PICKED") && order.rider && (
<TrackingRider
delivery_address={order.delivery_address}
id={order.rider._id}
@ -85,15 +85,17 @@ function OrderDetail() {
textColor={colors.buttonBackgroundBlue}
bolder
H3
style={alignment.MBsmall}>
{i18n.t('thankYou')}
style={alignment.MBsmall}
>
{i18n.t("thankYou")}
</TextDefault>
<TextDefault
textColor={colors.fontSecondColor}
medium
H5
style={[alignment.MTsmall]}>
{i18n.t('orderId')}
style={[alignment.MTsmall]}
>
{i18n.t("orderId")}
</TextDefault>
<TextDefault H4 bolder style={alignment.PTxSmall}>
{order.order_id}
@ -102,21 +104,24 @@ function OrderDetail() {
textColor={colors.fontSecondColor}
bold
H5
style={[alignment.MTlarge]}>
{i18n.t('status')}
style={[alignment.MTlarge]}
>
{i18n.t("status")}
</TextDefault>
<TextDefault
textColor={colors.buttonBackgroundBlue}
H4
medium
style={[alignment.MBsmall, alignment.MTxSmall]}>
{i18n.t(order.order_status)}{' '}
style={[alignment.MBsmall, alignment.MTxSmall]}
>
{i18n.t(order.order_status)}{" "}
<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 textColor={colors.fontSecondColor} H5 bold>
{i18n.t('deliveryAddress')}:
{i18n.t("deliveryAddress")}:
</TextDefault>
<TextDefault style={{ ...alignment.PTxSmall }} H5>
{order.delivery_address.delivery_address}
@ -128,18 +133,20 @@ function OrderDetail() {
<View style={[styles.marginBottom10, styles.orderReceipt]}>
{order.items.map((item, index) => (
<View style={[styles.marginBottom10, styles.floatView]} key={index}>
<TextDefault H5 style={{ width: '10%' }}>
<TextDefault H5 style={{ width: "10%" }}>
{item.quantity}x
</TextDefault>
<TextDefault
textColor={colors.fontMainColor}
style={{ width: '65%' }}>
style={{ width: "65%" }}
>
{item.food.title}
</TextDefault>
<TextDefault
textColor={colors.fontMainColor}
style={{ width: '25%' }}
right>
style={{ width: "25%" }}
right
>
{configuration.currency_symbol}
{parseFloat(calculatePrice(item)).toFixed(2)}
</TextDefault>
@ -150,14 +157,16 @@ function OrderDetail() {
<TextDefault
textColor={colors.fontMainColor}
medium
style={{ width: '40%' }}>
{i18n.t('subTotal')}
style={{ width: "40%" }}
>
{i18n.t("subTotal")}
</TextDefault>
<TextDefault
textColor={colors.fontMainColor}
medium
style={{ width: '60%' }}
right>
style={{ width: "60%" }}
right
>
{configuration.currency_symbol}
{parseFloat(order.order_amount - order.delivery_charges).toFixed(
2
@ -168,14 +177,16 @@ function OrderDetail() {
<TextDefault
textColor={colors.fontMainColor}
medium
style={{ width: '40%' }}>
{i18n.t('deliveryFee')}
style={{ width: "40%" }}
>
{i18n.t("deliveryFee")}
</TextDefault>
<TextDefault
textColor={colors.fontMainColor}
medium
style={{ width: '60%' }}
right>
style={{ width: "60%" }}
right
>
{configuration.currency_symbol}
{parseFloat(order.delivery_charges).toFixed(2)}
</TextDefault>
@ -184,26 +195,29 @@ function OrderDetail() {
<TextDefault
textColor={colors.fontMainColor}
bold
style={{ width: '40%' }}>
{i18n.t('total')}
style={{ width: "40%" }}
>
{i18n.t("total")}
</TextDefault>
<TextDefault
textColor={colors.fontMainColor}
bold
style={{ width: '60%' }}
right>
style={{ width: "60%" }}
right
>
{configuration.currency_symbol}
{parseFloat(order.order_amount).toFixed(2)}
</TextDefault>
</View>
</View>
{i18n.t(order.order_status) === i18n.t('PICKED') && (
{i18n.t(order.order_status) === i18n.t("PICKED") && (
<View
style={{
...alignment.PLmedium,
...alignment.PRmedium,
height: moderateScale(250)
}}>
height: moderateScale(250),
}}
>
<MapView
style={{ flex: 1, borderRadius: 20 }}
scrollEnabled={false}
@ -222,72 +236,78 @@ function OrderDetail() {
loadingEnabled={true}
loadingIndicatorColor="#d83765"
provider={
Platform.OS === 'android' ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
}></MapView>
Platform.OS === "android" ? PROVIDER_GOOGLE : PROVIDER_DEFAULT
}
></MapView>
<View
style={{
...alignment.PTlarge,
width: '80%',
width: "80%",
borderRadius: moderateScale(10),
alignSelf: 'center'
}}>
alignSelf: "center",
}}
>
<TouchableOpacity
activeOpacity={0.8}
style={{
backgroundColor: colors.buttonBackgroundBlue,
alignItems: 'center',
alignItems: "center",
padding: moderateScale(16),
borderRadius: moderateScale(10)
}}>
borderRadius: moderateScale(10),
}}
>
<TextDefault H5 bold textColor={colors.lightBackground}>
{i18n.t('chatWithRider')}
{i18n.t("chatWithRider")}
</TextDefault>
</TouchableOpacity>
</View>
</View>
)}
{(i18n.t(order.order_status) === i18n.t('DELIVERED') ||
i18n.t(order.order_status) === i18n.t('COMPLETED')) &&
{(i18n.t(order.order_status) === i18n.t("DELIVERED") ||
i18n.t(order.order_status) === i18n.t("COMPLETED")) &&
order.review &&
order.review.rating === 0 && (
<View style={styles.orderReceipt}>
<TextDefault H3 bolder style={alignment.MBsmall}>
{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')}
<View style={styles.orderReceipt}>
<TextDefault H3 bolder style={alignment.MBsmall}>
{i18n.t("anySuggestion")}
</TextDefault>
</TouchableOpacity>
</View>
)}
<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>
</TouchableOpacity>
</View>
)}
</ScrollView>
</WrapperView>
)
);
}
export default OrderDetail
export default OrderDetail;

7
CustomerApp/src/screens/Settings/Settings.js
View File

@ -125,9 +125,12 @@ function Settings() {
};
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange);
const subscription = AppState.addEventListener(
"change",
_handleAppStateChange
);
return () => {
AppState.remove("change", _handleAppStateChange);
subscription.remove("change", _handleAppStateChange);
};
}, []);