ordering-ui-react-native 0.19.7-testing → 0.19.8-release

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

@@ -1,6 +1,7 @@
 import React, { useState, useCallback } from 'react'
 
 import { Platform, StyleSheet, View, TouchableOpacity, ScrollView } from 'react-native';
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -53,9 +54,16 @@ export const OrderContentComponent = (props: OrderContent) => {
   const WIDTH_SCREEN = orientationState?.dimensions?.width
 
   const [openReviewModal, setOpenReviewModal] = useState(false)
+  const [showCustomFields, setShowCustomFields] = useState<boolean>(false);
 
-  const [isReadMore, setIsReadMore] = useState(false)
-  const [lengthMore, setLengthMore] = useState(false)
+  const [isReadMore, setIsReadMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
+  const [lengthMore, setLengthMore] = useState({
+    customerAddress: false,
+    businessAddressNotes: false
+  })
 
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
@@ -105,11 +113,19 @@ export const OrderContentComponent = (props: OrderContent) => {
   }
 
   const containsOnlyNumbers = (str: string) => {
+    str = str?.replace('+', '');
     return /^\d+$/.test(str);
   }
 
-  const onTextLayout = useCallback((e: any) => {
-    setLengthMore((e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2); //to check the text is more than 2 lines or not
+  const onTextLayout = useCallback((e: any, item: string) => {
+    if (item === 'customerAddress') {
+      const customerAddressMore = (e.nativeEvent.lines.length == 2 && e.nativeEvent.lines[1].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 2
+      setLengthMore(prev => ({ ...prev, customerAddress: customerAddressMore }))
+    }
+    if (item === 'businessAddressNotes') {
+      const businessAddressNotesMore = (e.nativeEvent.lines.length == 3 && e.nativeEvent.lines[2].width > WIDTH_SCREEN * .76) || e.nativeEvent.lines.length > 3
+      setLengthMore(prev => ({ ...prev, businessAddressNotes: businessAddressNotesMore }))
+    }
   }, []);
 
   return (
@@ -120,27 +136,36 @@ export const OrderContentComponent = (props: OrderContent) => {
 
       {order?.metafields?.length > 0 && (
         <OrderBusiness>
-          <OText style={{ marginBottom: 5 }} size={16} weight="600">
-            {t('CUSTOM_FIELDS', 'Custom fields')}
-          </OText>
-
-          {order.metafields.map((field: any) => (
-            <View
-              key={field.id}
-              style={{
-                width: '100%',
-                flexDirection: 'row',
-                marginBottom: 5
-              }}
-            >
-              <OText style={{ width: '50%' }}>
-                {field.key}
-              </OText>
-              <OText style={{ width: '45%', textAlign: 'right' }}>
-                {field.value}
-              </OText>
-            </View>
-          ))}
+          <TouchableOpacity onPress={() => setShowCustomFields((prev: boolean) => !prev)} style={{ flexDirection: 'row', width: '100%', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <OText style={{ marginBottom: 5 }} size={16} weight="600">
+              {t('CUSTOM_FIELDS', 'Custom fields')}
+            </OText>
+            <AntDesignIcon
+              name={showCustomFields ? 'up' : 'down'}
+              size={14}
+            />
+          </TouchableOpacity>
+          {showCustomFields && (
+            <>
+              {order.metafields.map((field: any) => (
+                <View
+                  key={field.id}
+                  style={{
+                    width: '100%',
+                    flexDirection: 'row',
+                    marginBottom: 5
+                  }}
+                >
+                  <OText style={{ width: '50%' }}>
+                    {field.key}
+                  </OText>
+                  <OText style={{ width: '45%', textAlign: 'right' }}>
+                    {field.value}
+                  </OText>
+                </View>
+              ))}
+            </>
+          )}
         </OrderBusiness>
       )}
 
@@ -170,7 +195,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 <OLink
                   PressStyle={styles.linkWithIcons}
                   url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
-                  shorcut={`${order?.business?.cellphone}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.cellphone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -180,8 +205,8 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
-                  shorcut={order?.business?.phone}
+                  url={`tel:${containsOnlyNumbers(order?.business?.phone) ? order?.business?.phone : 'invalid'}`}
+                  shorcut={`${(!!order?.business?.country_phone_code && !order?.business?.phone?.includes('+')) ? '+' + order?.business?.country_phone_code : ''}${order?.business?.phone}`}
                   TextStyle={styles.textLink}
                 />
               </View>
@@ -209,17 +234,28 @@ export const OrderContentComponent = (props: OrderContent) => {
           </OText>
         )}
         {!!order?.business?.address_notes && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.business?.address_notes}`,
-                android: `geo:0,0?q=${order?.business?.address_notes}`,
-              })}
-              shorcut={order?.business?.address_notes}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={styles.linkWithIcons}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.business?.address_notes}`,
+                  android: `geo:0,0?q=${order?.business?.address_notes}`,
+                })}
+                shorcut={order?.business?.address_notes}
+                TextStyle={styles.textLink}
+                onTextLayout={e => onTextLayout(e, 'businessAddressNotes')}
+                numberOfLines={isReadMore.businessAddressNotes ? 20 : 3}
+              />
+            </View>
+            {lengthMore.businessAddressNotes && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, businessAddressNotes: !isReadMore.businessAddressNotes })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.businessAddressNotes ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
       </OrderBusiness>
 
@@ -301,7 +337,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <OLink
               PressStyle={styles.linkWithIcons}
               url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
-              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -311,8 +347,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
-              shorcut={order?.customer?.phone}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
+              shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''}${order?.customer?.phone}`}
               TextStyle={styles.textLink}
             />
           </View>
@@ -327,15 +363,17 @@ export const OrderContentComponent = (props: OrderContent) => {
                   ios: `maps:0,0?q=${order?.customer?.address}`,
                   android: `geo:0,0?q=${order?.customer?.address}`,
                 })}
-                onTextLayout={onTextLayout}
-                numberOfLines={isReadMore ? 20 : 2}
+                onTextLayout={e => onTextLayout(e, 'customerAddress')}
+                numberOfLines={isReadMore.customerAddress ? 20 : 2}
                 shorcut={order?.customer?.address}
                 TextStyle={styles.textLink}
               />
             </View>
-            {lengthMore && (
-              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
-                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+            {lengthMore.customerAddress && (
+              <TouchableOpacity
+                onPress={() => setIsReadMore({ ...isReadMore, customerAddress: !isReadMore.customerAddress })}
+              >
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore.customerAddress ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
               </TouchableOpacity>
             )}
           </>
@@ -550,15 +588,14 @@ export const OrderContentComponent = (props: OrderContent) => {
             </Table>
           ))
         }
-        {order?.summary?.driver_tip > 0 && (
+        {(order?.summary?.driver_tip > 0 || order?.driver_tip > 0) && (
           <Table>
             <OText mBottom={4}>
               {t('DRIVER_TIP', 'Driver tip')}
-              {order?.summary?.driver_tip > 0 &&
-                parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
+              {order?.driver_tip > 0 && parseInt(configs?.driver_tip_type?.value, 10) === 2 &&
                 !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
                 (
-                  `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
+                  `(${verifyDecimals(order?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
             <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency })}</OText>

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

@@ -263,6 +263,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             )}
           </>
         </OText>
+        {order?.external_id && (
+          <OText size={13}>
+            <OText size={13} weight='bold'>{`${t('EXTERNAL_ID', 'External ID :')} `}</OText>
+            {order?.external_id}
+          </OText>
+        )}
         {!order?.isLogistic && !!order?.delivery_type && (!order?.order_group_id || !logisticOrderStatus?.includes(order?.status)) && (
           <>
             <OText size={13}>
@@ -275,12 +281,12 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                 {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
-            {order?.payment_events?.length > 0 && (
-              <View>
+            <OText>
+              <OText size={13} weight='bold'>
+                {`${t('PAYMENT_METHODS', 'Payment methods')}: `}
+              </OText>
+              {order?.payment_events?.length > 0 ? (
                 <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
@@ -291,7 +297,21 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
-              </View>
+              ) : (
+                <OText size={13}>{t(order?.paymethod?.gateway?.toUpperCase(), order?.paymethod?.name)}</OText>
+              )}
+            </OText>
+            {order?.spot_number && (
+              <OText size={13}>
+                <OText size={13} weight='bold'>
+                  {`${order?.delivery_type === 3
+                    ? t('EATIN_SPOT_NUMBER', 'Table number')
+                    : order?.delivery_type === 5
+                      ? t('DRIVE_THRU_SPOT_NUMBER', 'Drive thru lane')
+                      : t('CURBSIDE_SPOT_NUMBER', 'Spot number')}: `}
+                </OText>
+                {order.spot_number}
+              </OText>
             )}
           </>
         )}

package/themes/business/src/components/OrderDetailsLogistic/index.tsx

@@ -10,6 +10,7 @@ import {
     useLanguage,
     OrderDetails as OrderDetailsConTableoller,
     useSession,
+    useConfig
 } from 'ordering-components/native';
 
 //Components
@@ -34,6 +35,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     const theme = useTheme();
     const [, t] = useLanguage();
     const [session] = useSession();
+    const [{ configs }] = useConfig();
+
     const [alertState, setAlertState] = useState<{
         open: boolean;
         content: Array<string>;
@@ -41,6 +44,7 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
     }>({ open: false, content: [], key: null });
 
     const logisticOrderStatus = [4, 6, 7]
+    const isHideRejectButtons = configs?.reject_orders_enabled && configs?.reject_orders_enabled?.value !== '1'
 
     const showFloatButtonsAcceptOrReject: any = {
         0: true,
@@ -166,7 +170,8 @@ export const OrderDetailsLogisticUI = (props: OrderDetailsLogisticParams) => {
                                         secondButton={true}
                                         firstColorCustom={theme.colors.red}
                                         secondColorCustom={theme.colors.green}
-                                        widthButton={'45%'}
+                                        widthButton={isHideRejectButtons ? '100%': '45%'}
+                                        isHideRejectButtons={isHideRejectButtons}
                                     />
                                 )}
                             </>

package/themes/business/src/components/OrderSummary/index.tsx

@@ -33,6 +33,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
   const [state, setState] = useState({
     selectedPrinter: { url: undefined },
   });
+  const paymethodsLength = order?.payment_events?.filter((item: any) => item.event === 'payment')?.length
 
   const getFormattedSubOptionName = ({ quantity, name, position, price }: any) => {
     if (name !== 'No') {
@@ -80,6 +81,27 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     !parseInt(configs?.driver_tip_use_custom?.value, 10) &&
     verifyDecimals(order?.summary?.driver_tip, parseNumber);
 
+  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
+    }`?.replace('  ', ' ')?.trim() ?? ''
+
+  const walletName: any = {
+    cash: {
+      name: t('CASH_WALLET', 'Cash Wallet')
+    },
+    credit_point: {
+      name: t('POINTS_WALLET', 'Points Wallet')
+    }
+  }
+
+  const handlePaymethodsListString = () => {
+    const paymethodsList = order?.payment_events?.filter((item: any) => item.event === 'payment').map((paymethod: any) => {
+      return paymethod?.wallet_event
+        ? walletName[paymethod?.wallet_event?.wallet?.type]?.name
+        : t(paymethod?.paymethod?.gateway?.toUpperCase(), paymethod?.paymethod?.name)
+    })
+    return paymethodsList.join(', ')
+  }
+
   const orderSummary = () => {
     return `
     <div>
@@ -96,13 +118,11 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         : parseDate(order?.delivery_datetime, { utc: false })
       }
           </br>
-          ${t('PAYMENT_METHOD')}: ${order?.paymethod?.name}
+          ${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}: ${handlePaymethodsListString()}
         </p>
 
         <h1>${t('CUSTOMER_DETAILS', 'Customer details')}</h1>
-        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${order?.customer?.name
-      } ${order?.customer?.middle_name} ${order?.customer?.lastname} ${order?.customer?.second_lastname
-      }
+        <p style="font-size: 27px"> ${t('FULL_NAME', 'Full Name')}: ${customerName}
         </br>
         ${t('EMAIL', 'Email')}: ${order?.customer?.email}
         </br>
@@ -113,8 +133,8 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
         } </br>`
         : ''
       }
-         ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address} 
-         </br> 
+         ${t('FULL_ADDRESS', 'Full Addres')}: ${order?.customer?.address}
+         </br>
          ${!!order?.customer?.internal_number
         ? `${t('INTERNAL_NUMBER', 'Internal Number')}: ${order?.customer?.internal_number
         } </br>`
@@ -339,9 +359,6 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
     }
   };
 
-  const customerName = `${order?.customer?.name ?? ''} ${order?.customer?.middle_name ?? ''} ${order?.customer?.lastname ?? ''} ${order?.customer?.second_lastname ?? ''
-    }`?.replace('  ', ' ')?.trim() ?? ''
-
   return (
     <>
       <Content>
@@ -381,10 +398,7 @@ export const OrderSummary = ({ order, navigation, orderStatus, askBluetoothPermi
                 }`}
             </OText>
 
-            <OText style={{ marginBottom: 5 }}>{`${t('PAYMENT_METHOD')}: ${t(
-              order?.paymethod?.name.toUpperCase(),
-              order?.paymethod?.name,
-            )}`}</OText>
+            <OText style={{ marginBottom: 5 }}>{`${t(`${paymethodsLength > 1 ? 'PAYMENT_METHODS' : 'PAYMENT_METHOD'}`, `${paymethodsLength > 1 ? 'Payment methods' : 'Payment method'}`)}: ${handlePaymethodsListString()}`}</OText>
           </OrderHeader>
 
           <OrderCustomer>

package/themes/business/src/components/OrdersListManager/index.tsx

@@ -40,6 +40,7 @@ import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
 import { OrderDetailsBusiness } from '../OrderDetails/Business';
+import { WebsocketStatus } from '../WebsocketStatus'
 
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
@@ -314,7 +315,11 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          <View style={{ flex: 1 }}>
+            <WebsocketStatus />
+          </View>
+          <View style={{ width: 10, height: '100%' }} />
+          <View style={{ flex: 1 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -330,7 +335,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
             />
           </View>
           <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          <View style={{ flex: 1, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}

package/themes/business/src/components/OrdersListManager/utils.tsx

@@ -209,7 +209,7 @@ export const Timer = () => {
   return (
     <TimerInputWrapper>
       <OText style={styles.settingTime} color={theme.colors.disabled}>{configs?.order_deadlines_delayed_time?.value}</OText>
-      <OText>{t('MIN', 'min')}</OText>
+      <OText>{t('TIME_MIN', 'min')}</OText>
     </TimerInputWrapper>
   )
 }