ordering-ui-react-native 0.14.61 → 0.14.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.61",
+  "version": "0.14.62",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx

@@ -45,6 +45,15 @@ export const OrderContentComponent = (props: OrderContent) => {
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
+  const walletName: any = {
+    cash: {
+      name: t('PAY_WITH_CASH_WALLET', 'Pay with Cash Wallet'),
+    },
+    credit_point: {
+      name: t('PAY_WITH_CREDITS_POINTS_WALLET', 'Pay with Credit Points Wallet'),
+    }
+  }
+
   const styles = StyleSheet.create({
     linkWithIcons: {
       flexDirection: 'row',
@@ -441,7 +450,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           )
         }
 
-        <Total>
+        <Total style={{ paddingBottom: 10 }}>
           <Table>
             <OText mBottom={4} style={styles.textBold}>
               {t('TOTAL', 'Total')}
@@ -455,6 +464,52 @@ export const OrderContentComponent = (props: OrderContent) => {
             </OText>
           </Table>
         </Total>
+
+        {order?.payment_events?.length > 0 && (
+          <View>
+            <OText size={14} color={theme.colors.textNormal}>{t('PAYMENTS', 'Payments')}</OText>
+            <View
+              style={{
+                width: '100%',
+                marginTop: 5
+              }}
+            >
+              {order?.payment_events?.map((event: any) => (
+                <View
+                  key={event.id}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 10
+                  }}
+                >
+                  <View
+                    style={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                    }}
+                  >
+                    <OText>
+                      {event?.wallet_event
+                        ? walletName[event?.wallet_event?.wallet?.type]?.name
+                        : event?.paymethod?.name}
+                    </OText>
+                    {event?.data?.charge_id && (
+                      <OText>
+                        {`${t('CODE', 'Code')}: ${event?.data?.charge_id}`}
+                      </OText>
+                    )}
+                  </View>
+                  <OText>
+                    -{parsePrice(event.amount)}
+                  </OText>
+                </View>
+              ))}
+            </View>
+          </View>
+        )}
       </OrderBill >
       <OModal
         open={openReviewModal}

package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx

@@ -14,7 +14,7 @@ import {
 } from '../shared'
 
 import { useTheme } from 'styled-components/native';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   useLanguage,
@@ -84,6 +84,25 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
     17: theme.colors.statusOrderRed,
   };
 
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet'),
+    },
+    credit_point: {
+      name: t('CREDITS_POINTS_WALLET', 'Credit Points Wallet'),
+    }
+  }
+
+  const orderTypes = (type: number) => type === 1
+    ? t('DELIVERY', 'Delivery')
+    : order.delivery_type === 2
+      ? t('PICKUP', 'Pickup')
+      : order.delivery_type === 3
+        ? t('EAT_IN', 'Eat in')
+        : order.delivery_type === 4
+          ? t('CURBSIDE', 'Curbside')
+          : t('DRIVER_THRU', 'Driver thru')
+
   return (
     <>
       <Header>
@@ -176,18 +195,30 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
           </>
         </OText>
         {!order?.isLogistic && order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
-          <OText size={13}>
-            {`${order?.paymethod?.name} - ${order.delivery_type === 1
-              ? t('DELIVERY', 'Delivery')
-              : order.delivery_type === 2
-                ? t('PICKUP', 'Pickup')
-                : order.delivery_type === 3
-                  ? t('EAT_IN', 'Eat in')
-                  : order.delivery_type === 4
-                    ? t('CURBSIDE', 'Curbside')
-                    : t('DRIVER_THRU', 'Driver thru')
-              }`}
-          </OText>
+          <>
+            <OText size={13}>
+              <OText size={13} weight='bold'>{`${t('ORDER_TYPE', 'Order Type')}: `}</OText>
+              {orderTypes(order.delivery_type)}
+            </OText>
+            {order?.payment_events?.length > 0 && (
+              <View>
+                <OText size={13}>
+                  <OText size={13} weight='bold'>
+                    {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+                  </OText>
+                  {order?.payment_events?.map((event: any, idx: number) => {
+                    return event?.wallet_event
+                      ? idx < order?.payment_events?.length - 1
+                        ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
+                        : walletName[event?.wallet_event?.wallet?.type]?.name
+                      : idx < order?.payment_events?.length - 1
+                        ? `${event?.paymethod?.name} - `
+                        : event?.paymethod?.name
+                  })}
+                </OText>
+              </View>
+            )}
+          </>
         )}
       </OrderHeader>
     </>