diff --git a/CustomerApp/src/components/Menu/StatusCard/StatusCard.js b/CustomerApp/src/components/Menu/StatusCard/StatusCard.js
index f8b69f1..7673d41 100644
--- a/CustomerApp/src/components/Menu/StatusCard/StatusCard.js
+++ b/CustomerApp/src/components/Menu/StatusCard/StatusCard.js
@@ -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>
diff --git a/CustomerApp/src/components/MyOrders/ActiveOrders.js b/CustomerApp/src/components/MyOrders/ActiveOrders.js
index bcbd1de..c4a6986 100644
--- a/CustomerApp/src/components/MyOrders/ActiveOrders.js
+++ b/CustomerApp/src/components/MyOrders/ActiveOrders.js
@@ -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;
diff --git a/CustomerApp/src/screens/MyOrders/MyOrders.js b/CustomerApp/src/screens/MyOrders/MyOrders.js
index 3b02d35..a55506c 100755
--- a/CustomerApp/src/screens/MyOrders/MyOrders.js
+++ b/CustomerApp/src/screens/MyOrders/MyOrders.js
@@ -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>
diff --git a/CustomerApp/src/screens/OrderDetail/OrderDetail.js b/CustomerApp/src/screens/OrderDetail/OrderDetail.js
index a4f6291..711c531 100644
--- a/CustomerApp/src/screens/OrderDetail/OrderDetail.js
+++ b/CustomerApp/src/screens/OrderDetail/OrderDetail.js
@@ -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;
diff --git a/CustomerApp/src/screens/Settings/Settings.js b/CustomerApp/src/screens/Settings/Settings.js
index 58cadd1..4baa856 100644
--- a/CustomerApp/src/screens/Settings/Settings.js
+++ b/CustomerApp/src/screens/Settings/Settings.js
@@ -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);
     };
   }, []);