feature: cash deliveries should have amount of money in the task info for the messenger

src/components/PaymentMethodInfo.js

@@ -34,15 +34,27 @@ export const loadDescriptionTranslationKey = paymentMethod =>
 export const isKnownPaymentMethod = paymentMethod =>
   Object.prototype.hasOwnProperty.call(paymentMethods, paymentMethod);
 
-export const PaymentMethodInfo = ({ fullDetail, paymentMethod }) => {
-  const { t } = useTranslation();
-
+export const isDisplayPaymentMethodInList = paymentMethod => {
   if (!isKnownPaymentMethod(paymentMethod)) {
+    return false;
+  }
+
+  return paymentMethod === 'CASH_ON_DELIVERY';
+};
+
+export const PaymentMethodInList = ({ paymentMethod }) => {
+  if (!isDisplayPaymentMethodInList(paymentMethod)) {
     return null;
   }
 
-  if (!fullDetail) {
-    return <Icon as={Foundation} name={loadIconKey(paymentMethod)} />;
+  return <Icon as={Foundation} name={loadIconKey(paymentMethod)} />;
+}
+
+export const PaymentMethodInOrderDetails = ({ paymentMethod }) => {
+  const { t } = useTranslation();
+
+  if (!isKnownPaymentMethod(paymentMethod)) {
+    return null;
   }
 
   return (

src/components/TaskCallout.js

@@ -52,7 +52,12 @@ export default ({ task, warnings }) => {
       </View>
       <View style={styles.warning}>
         {warnings.map((warning, index) => (
-          <Icon key={index} as={FontAwesome} name={warning} size="xs" />
+          <Icon
+            key={index}
+            as={warning.icon.type ?? FontAwesome}
+            name={warning.icon.name}
+            size={warning.icon.size ?? undefined}
+          />
         ))}
       </View>
     </View>

src/components/TaskListItem.js

@@ -23,7 +23,7 @@ import {
   taskTypeIconName,
 } from '../navigation/task/styles/common';
 import { greenColor, redColor, yellowColor } from '../styles/common';
-import { PaymentMethodInfo } from './PaymentMethodInfo';
+import { PaymentMethodInList } from './PaymentMethodInfo';
 import TaskTitle from './TaskTitle';
 
 const styles = StyleSheet.create({
@@ -270,8 +270,7 @@ class TaskListItem extends Component {
                   <Icon mr="2" as={FontAwesome} name="comments" size="xs" />
                 ) : null}
                 {task.metadata && task.metadata.payment_method && (
-                  <PaymentMethodInfo
-                    fullDetail={false}
+                  <PaymentMethodInList
                     paymentMethod={task.metadata.payment_method}
                   />
                 )}

src/components/TasksMapView.js

@@ -18,6 +18,8 @@ import { selectIsPolylineOn } from '../redux/Courier';
 import { blueColor, greyColor, whiteColor } from '../styles/common';
 import TaskCallout from './TaskCallout';
 import TaskMarker from './TaskMarker';
+import { isDisplayPaymentMethodInList, loadIconKey } from './PaymentMethodInfo';
+import Foundation from 'react-native-vector-icons/Foundation';
 
 const clusterContainerSize = 40;
 
@@ -172,7 +174,25 @@ class TasksMapView extends Component {
     const warnings = [];
 
     if (task.address && task.address.description) {
-      warnings.push('comments');
+      warnings.push({
+        icon: {
+          name: 'comments',
+          size: 'xs',
+        },
+      });
+    }
+
+    if (
+      task.metadata &&
+      task.metadata.payment_method &&
+      isDisplayPaymentMethodInList(task.metadata?.payment_method)
+    ) {
+      warnings.push({
+        icon: {
+          name: loadIconKey(task.metadata.payment_method),
+          type: Foundation,
+        },
+      });
     }
 
     return warnings;

src/navigation/restaurant/components/OrderHeading.js

@@ -7,7 +7,7 @@ import FontAwesome from 'react-native-vector-icons/FontAwesome';
 
 import material from '../../../../native-base-theme/variables/material';
 import OrderFulfillmentMethodIcon from '../../../components/OrderFulfillmentMethodIcon';
-import { PaymentMethodInfo } from '../../../components/PaymentMethodInfo';
+import { PaymentMethodInOrderDetails } from '../../../components/PaymentMethodInfo';
 import { resolveFulfillmentMethod } from '../../../utils/order';
 import OrderButtons from './OrderButtons';
 
@@ -79,10 +79,7 @@ const OrderHeading = ({
           </Text>
         </View>
       </View>
-      <PaymentMethodInfo
-        fullDetail={true}
-        paymentMethod={order.paymentMethod}
-      />
+      <PaymentMethodInOrderDetails paymentMethod={order.paymentMethod} />
       <View style={{ marginBottom: 15 }}>
         <OrderButtons
           order={order}

src/navigation/restaurant/components/OrderListItem.js

@@ -13,7 +13,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import { useDispatch, useSelector } from 'react-redux';
 import OrderNumber from '../../../components/OrderNumber';
 import OrderFulfillmentMethodIcon from '../../../components/OrderFulfillmentMethodIcon';
-import { PaymentMethodInfo } from '../../../components/PaymentMethodInfo';
+import { PaymentMethodInList } from '../../../components/PaymentMethodInfo';
 import {
   selectAutoAcceptOrdersEnabled,
   selectIsActionable,
@@ -127,10 +127,7 @@ export default function OrderListItem({ order, onItemClick }) {
               <OrderNumber order={order} />
             </View>
             <OrderFulfillmentMethodIcon order={order} small />
-            <PaymentMethodInfo
-              fullDetail={false}
-              paymentMethod={order.paymentMethod}
-            />
+            <PaymentMethodInList paymentMethod={order.paymentMethod} />
             {order.notes ? (
               <Icon as={FontAwesome} name="comments" size="xs" />
             ) : null}

src/navigation/task/components/Details.js

@@ -12,10 +12,11 @@ import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 
 import ItemSeparator from '../../../components/ItemSeparator';
 import {
-  isKnownPaymentMethod,
+  isDisplayPaymentMethodInList,
   loadDescriptionTranslationKey,
   loadIconKey,
 } from '../../../components/PaymentMethodInfo';
+import { formatPrice } from '../../../utils/formatting';
 
 const Detail = ({ item }) => {
   const { iconType, iconName, text, component, onPress } = item;
@@ -91,10 +92,7 @@ const Details = ({ task, t }) => {
     });
   }
 
-  if (
-    task.metadata &&
-    task.metadata.has_loopeat_returns
-  ) {
+  if (task.metadata && task.metadata.has_loopeat_returns) {
     items.push({
       iconName: 'recycle',
       iconType: FontAwesome5,
@@ -109,6 +107,22 @@ const Details = ({ task, t }) => {
     });
   }
 
+  if (
+    task.metadata &&
+    task.metadata.payment_method &&
+    isDisplayPaymentMethodInList(task.metadata.payment_method)
+  ) {
+    items.push({
+      iconName: loadIconKey(task.metadata.payment_method),
+      iconType: Foundation,
+      text:
+        t(loadDescriptionTranslationKey(task.metadata.payment_method)) +
+        (task.metadata.order_total
+          ? `: ${formatPrice(task.metadata.order_total)}`
+          : ''),
+    });
+  }
+
   if (task.comments) {
     items.push({
       iconName: 'chatbubbles',
@@ -164,18 +178,6 @@ const Details = ({ task, t }) => {
     });
   }
 
-  if (
-    task.metadata &&
-    task.metadata.payment_method &&
-    isKnownPaymentMethod(task.metadata.payment_method)
-  ) {
-    items.push({
-      iconName: loadIconKey(task.metadata.payment_method),
-      iconType: Foundation,
-      text: t(loadDescriptionTranslationKey(task.metadata.payment_method)),
-    });
-  }
-
   return (
     <FlatList
       data={items}