ordering-ui-react-native 0.21.7 → 0.21.8-release

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

@@ -6,12 +6,14 @@ import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+
 import { useTheme } from 'styled-components/native';
 import { DeviceOrientationMethods } from '../../../../../src/hooks/DeviceOrientation'
 import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import { NewOrderNotification } from '../NewOrderNotification';
+import { WebsocketStatus } from '../WebsocketStatus'
 
-import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
+import { OText, OButton, OModal, OInput, OIcon } from '../shared';
 import { NotFoundSource } from '../NotFoundSource';
 import {
   FiltersTab,
@@ -48,6 +50,7 @@ const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
   const {
+    navigation,
     setCurrentFilters,
     tabs,
     currentTabSelected,
@@ -73,6 +76,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const defaultSearchList = {
     id: '',
+    external_id: '',
     state: '',
     city: '',
     business: '',
@@ -92,35 +96,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [{ parseDate }] = useUtils()
   const [configState] = useConfig()
   const [orientationState] = useDeviceOrientation();
-  const [, { showToast }] = useToast();
   const [openSearchModal, setOpenSearchModal] = useState(false)
   const [openSLASettingModal, setOpenSLASettingModal] = useState(false)
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
-  const [selectedTabStatus, setSelectedTabStatus] = useState<any>([])
-  const [hour, setHour] = useState(0)
-  const [minute, setMinute] = useState(0)
-  const [openedSelect, setOpenedSelect] = useState('')
-  const WIDTH_SCREEN = orientationState?.dimensions?.width
-  const HEIGHT_SCREEN = orientationState?.dimensions?.height
-  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
-
-  const preorderTypeList = [
-    { key: null, name: t('SLA', 'SLA\'s') },
-    { key: 'in_time', name: t('OK', 'Ok') },
-    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
-    { key: 'delayed', name: t('DELAYED', 'Delayed') }
-  ]
-
-  const defaultOrderTypes = [
-    { key: 1, name: t('DELIVERY', 'Delivery') },
-    { key: 2, name: t('PICKUP', 'Pickup') },
-    { key: 3, name: t('EAT_IN', 'Eat in') },
-    { key: 4, name: t('CURBSIDE', 'Curbside') },
-    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
-  ]
-
   const deliveryStatus = [
     {
       key: t('OK', 'Ok'),
@@ -144,6 +124,27 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       backColor: '#E63757'
     }
   ]
+  const combineTabs = configState?.configs?.combine_pending_and_progress_orders?.value === '1'
+  const [selectedTabStatus, setSelectedTabStatus] = useState<any>(deliveryStatus)
+  const [openedSelect, setOpenedSelect] = useState('')
+
+  const HEIGHT_SCREEN = orientationState?.dimensions?.height
+  const IS_PORTRAIT = orientationState.orientation === PORTRAIT
+
+  const preorderTypeList = [
+    { key: null, name: t('SLA', 'SLA\'s') },
+    { key: 'in_time', name: t('OK', 'Ok') },
+    { key: 'at_risk', name: t('AT_RISK', 'At Risk') },
+    { key: 'delayed', name: t('DELAYED', 'Delayed') }
+  ]
+
+  const defaultOrderTypes = [
+    { key: 1, name: t('DELIVERY', 'Delivery') },
+    { key: 2, name: t('PICKUP', 'Pickup') },
+    { key: 3, name: t('EAT_IN', 'Eat in') },
+    { key: 4, name: t('CURBSIDE', 'Curbside') },
+    { key: 5, name: t('DRIVE_THRU', 'Drive thru') }
+  ]
 
   const styles = StyleSheet.create({
     header: {
@@ -385,15 +386,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setTags({ values: [] })
   }, [currentTabSelected])
 
-  useEffect(() => {
-    setSelectedTabStatus(deliveryStatus)
-  }, [])
+	useEffect(() => {
+		const unsubcribe = navigation.addListener('focus', () => {
+      currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })
+		})
+		return unsubcribe
+	}, [navigation, loadOrders, loadLogisticOrders])
 
   return (
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
         <IconWrapper>
+          <View style={{ marginRight: 10 }}>
+            <WebsocketStatus />
+          </View>
           <FeatherIcon
             name='refresh-cw'
             color={theme.colors.backgroundDark}
@@ -411,7 +418,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {configState?.configs?.order_deadlines_enabled?.value === '1' && (
         <View style={styles.SLAwrapper}>
-          <View style={{ flex: 0.5 }}>
+          {/* <View style={{ flex: 0.5 }}>
             <OButton
               text={t('SLA_SETTING', 'SLA’s Settings')}
               textStyle={{ color: theme.colors.backArrow }}
@@ -425,9 +432,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               }}
               onClick={onClickSetting}
             />
-          </View>
-          <View style={{ width: 10, height: '100%' }} />
-          <View style={{ flex: 0.5, justifyContent: 'center' }}>
+          </View> */}
+          {/* <View style={{ width: 10, height: '100%' }} /> */}
+          {/* <View style={{ flex: 0.5, justifyContent: 'center' }}>
             <SelectDropdown
               defaultButtonText={t('SLA', 'SLA\'s')}
               data={preorderTypeList}
@@ -457,7 +464,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 );
               }}
             />
-          </View>
+          </View> */}
         </View>
       )}
       <FiltersTab>
@@ -469,7 +476,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer>
-            {(isLogisticActivated && !isBusinessApp) && (
+            {(isLogisticActivated && !isBusinessApp && !combineTabs) && (
               <Pressable
                 style={styles.pressable}
                 onPress={() => setCurrentTabSelected('logisticOrders')}>
@@ -610,6 +617,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 orderTitle={props.orderDetailsProps?.orderTitle}
                 handleChangeOrderStatus={handleChangeOrderStatus}
                 handleSendCustomerReview={handleSendCustomerReview}
+                isBusinessApp={isBusinessApp}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -620,6 +628,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickLogisticOrder={handleClickLogisticOrder}
+                isBusinessApp={isBusinessApp}
                 isLogisticOrder
               />
             )
@@ -715,6 +724,39 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
+                <InputContainer style={{ marginBottom: 24 }}>
+                  <SelectDropdown
+                    defaultButtonText={search?.timeStatus
+                      ? preorderTypeList.find(type => type.key === search?.timeStatus)?.name
+                      : t('SLA', 'SLA\'s')}
+                    data={preorderTypeList}
+                    onSelect={(selectedItem, index) => {
+                      setSearch({ ...search, timeStatus: selectedItem?.key })
+                    }}
+                    buttonTextAfterSelection={(selectedItem, index) => {
+                      return selectedItem.name
+                    }}
+                    rowTextForSelection={(item, index) => {
+                      return item.key
+                    }}
+                    buttonStyle={styles.selectOption}
+                    buttonTextStyle={styles.buttonTextStyle}
+                    renderDropdownIcon={isOpened => {
+                      return <FeatherIcon name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
+                    }}
+                    dropdownStyle={styles.dropdownStyle}
+                    dropdownOverlayColor='transparent'
+                    rowStyle={styles.rowStyle}
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <SlaOption>
+                          {index !== 0 && <OrderStatus timeState={item?.key} />}
+                          <View><OText size={14} color={'#748194'} >{item?.name}</OText></View>
+                        </SlaOption>
+                      );
+                    }}
+                  />
+                </InputContainer>
                 <InputContainer>
                   <OInput
                     value={search.id}
@@ -730,6 +772,21 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                     onPress={() => setSearch({ ...search, id: '' })}
                   />
                 </InputContainer>
+                <InputContainer>
+                  <OInput
+                    value={search.external_id}
+                    onChange={(value: any) => setSearch({ ...search, external_id: value })}
+                    style={styles.inputStyle}
+                    placeholder={t('EXTERNAL_ID', 'External id')}
+                    autoCorrect={false}
+                  />
+                  <AntDesignIcon
+                    name='close'
+                    size={20}
+                    style={{ position: 'absolute', right: 12, top: 13 }}
+                    onPress={() => setSearch({ ...search, external_id: '' })}
+                  />
+                </InputContainer>
                 <OrdersOptionDate
                   {...props}
                   search={search}
@@ -919,7 +976,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>
   )
 }
@@ -927,8 +984,8 @@ export const Timer = () => {
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
-  const theme = useTheme()
   const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
+  const combineTabs = configState?.configs?.combine_pending_and_progress_orders?.value === '1'
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
@@ -1015,32 +1072,52 @@ export const OrdersOption = (props: OrdersOptionParams) => {
         text: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
       }
     ],
-    tabs: [
+    tabs: combineTabs ? [
       {
         key: 0,
-        text: t('PENDING', 'Pending'),
-        tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
-        title: 'pending'
+        text: t('ACTIVE', 'Active'),
+        tags: props?.orderGroupStatusCustom?.active ?? [0, 3, 4, 7, 8, 9, 13, 14, 18, 19, 20, 21, 22, 23],
+        title: 'active',
       },
       {
         key: 1,
-        text: t('IN_PROGRESS', 'In Progress'),
-        tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23],
-        title: 'inProgress',
-      },
-      {
-        key: 2,
         text: t('COMPLETED', 'Completed'),
         tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
         title: 'completed',
       },
       {
-        key: 3,
+        key: 2,
         text: t('CANCELLED', 'Cancelled'),
         tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
         title: 'cancelled',
       },
-    ]
+    ] :
+      [
+        {
+          key: 0,
+          text: t('PENDING', 'Pending'),
+          tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
+          title: 'pending'
+        },
+        {
+          key: 1,
+          text: t('IN_PROGRESS', 'In Progress'),
+          tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23],
+          title: 'inProgress',
+        },
+        {
+          key: 2,
+          text: t('COMPLETED', 'Completed'),
+          tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
+          title: 'completed',
+        },
+        {
+          key: 3,
+          text: t('CANCELLED', 'Cancelled'),
+          tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
+          title: 'cancelled',
+        },
+      ]
   };
 
   return (<>

package/themes/business/src/components/PreviousMessages/FooterMessageComponent.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { Dimensions, View, StyleSheet } from 'react-native'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { useLanguage } from 'ordering-components/native'
+
+export const FooterComponent = (props : any) => {
+    const {
+        loading,
+        reload,
+        pagination,
+        tabsFilter,
+        tabs,
+        loadMore
+    } = props
+
+    const theme = useTheme()
+    const [, t] = useLanguage()
+
+    const [orientation, setOrientation] = useState(
+        Dimensions.get('window').width < Dimensions.get('window').height
+            ? 'Portrait'
+            : 'Landscape',
+    );
+
+    Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+        if (width < height) {
+            setOrientation('Portrait');
+        } else {
+            setOrientation('Landscape');
+        }
+    });
+
+    const styles = StyleSheet.create({
+        loadButton: {
+            borderRadius: 7.6,
+            height: 44,
+            marginRight: 10,
+            marginBottom: 10,
+            marginTop: 5,
+        },
+        loadButtonText: {
+            color: theme.colors.white,
+            fontFamily: 'Poppins',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            fontSize: 18,
+        },
+    })
+
+    return (
+        <>
+            {(loading || reload) && (
+                <>
+                    <View>
+                        {[...Array(5)].map((item, i) => (
+                            <Placeholder key={i} Animation={Fade}>
+                                <View
+                                    style={{
+                                        width: '100%',
+                                        flexDirection: 'row',
+                                        marginBottom: 10,
+                                    }}>
+                                    <PlaceholderLine
+                                        width={orientation === 'Portrait' ? 22 : 11}
+                                        height={74}
+                                        style={{
+                                            marginRight: 20,
+                                            marginBottom: 20,
+                                            borderRadius: 7.6,
+                                        }}
+                                    />
+                                    <Placeholder>
+                                        <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                                        <PlaceholderLine width={50} />
+                                        <PlaceholderLine width={20} />
+                                    </Placeholder>
+                                </View>
+                            </Placeholder>
+                        ))}
+                    </View>
+                </>
+            )}
+
+            {pagination?.totalPages &&
+                !loading &&
+                !reload &&
+                JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
+                pagination?.currentPage < pagination?.totalPages && (
+                    <OButton
+                        onClick={() => loadMore && loadMore()}
+                        text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                        imgRightSrc={null}
+                        textStyle={styles.loadButtonText}
+                        style={styles.loadButton}
+                        bgColor={theme.colors.primary}
+                        borderColor={theme.colors.primary}
+                    />
+                )}
+        </>
+    )
+}

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

@@ -1,17 +1,31 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, FlatList, RefreshControl } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { useLanguage, useUtils } from 'ordering-components/native';
 import { Card, Logo, Information, Header, Badge } from './styles';
 import { OIcon, OText } from '../shared';
 import { PreviousMessagesParams } from '../../types';
+import { FooterComponent } from './FooterMessageComponent';
 
 export const PreviousMessages = (props: PreviousMessagesParams) => {
-  const { orders, onNavigationRedirect, setOrders } = props;
+  const {
+    orders,
+    onNavigationRedirect,
+    setOrders,
+    getOrders,
+    pagination,
+    loading,
+    reload,
+    tabs,
+    loadMore,
+    tabsFilter,
+    error
+  } = props;
 
   const [, t] = useLanguage();
   const theme = useTheme();
   const [{ parseDate, optimizeImage }] = useUtils();
+  const [refreshing] = useState(false);
 
   const handlePressOrder = (order: any) => {
     const uuid = order?.id;
@@ -253,63 +267,91 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       fontStyle: 'normal',
       fontWeight: 'normal',
       color: theme.colors.orderTypeColor,
-    },
+    }
   });
 
-  return (
-    <>
-      {orders?.length > 0 &&
-        orders?.map((order: any) => (
-          <TouchableOpacity
-            key={order?.id}
-            onPress={() => handlePressOrder(order)}
-            style={styles.cardButton}
-            activeOpacity={1}>
-            <Card key={order?.id}>
-              <Logo style={styles.logo}>
-                <OIcon
-                  url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
-                  src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
-                  style={styles.icon}
-                />
-              </Logo>
-              <Information>
-                <Header>
-                  <OText numberOfLines={1} style={styles.title}>
-                    {order?.business?.name}
-                  </OText>
+  const MessageComponent = (props : any) => {
+    const order = props.item
+    return (
+      <>
+        {!reload &&
+          !error &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
+            <TouchableOpacity
+              key={order?.id}
+              onPress={() => handlePressOrder(order)}
+              style={styles.cardButton}
+              activeOpacity={1}>
+              <Card key={order?.id}>
+                <Logo style={styles.logo}>
+                  <OIcon
+                    url={optimizeImage(order?.business?.logo, 'h_300,c_limit')}
+                    src={!order?.business?.logo && theme?.images?.dummies?.businessLogo}
+                    style={styles.icon}
+                  />
+                </Logo>
+                <Information>
+                  <Header>
+                    <OText numberOfLines={1} style={styles.title}>
+                      {order?.business?.name}
+                    </OText>
 
-                  {order?.unread_count > 0 && (
-                    <Badge>
-                      <OText size={14} style={styles.badge}>
-                        {order?.unread_count}
-                      </OText>
-                    </Badge>
-                  )}
-                </Header>
+                    {order?.unread_count > 0 && (
+                      <Badge>
+                        <OText size={14} style={styles.badge}>
+                          {order?.unread_count}
+                        </OText>
+                      </Badge>
+                    )}
+                  </Header>
 
-                <OText
-                  style={styles.date}
-                  numberOfLines={1}
-                  adjustsFontSizeToFit
-                  size={20}>
-                  {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
+                  <OText
+                    style={styles.date}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit
+                    size={20}>
+                    {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
+                    {order?.delivery_datetime_utc
+                      ? parseDate(order?.delivery_datetime_utc)
+                      : parseDate(order?.delivery_datetime, { utc: false })}
+                  </OText>
 
-                <OText
-                  style={styles.orderType}
-                  mRight={5}
-                  numberOfLines={1}
-                  adjustsFontSizeToFit>
-                  {getOrderStatus(order?.status)?.value}
-                </OText>
-              </Information>
-            </Card>
-          </TouchableOpacity>
-        ))}
+                  <OText
+                    style={styles.orderType}
+                    mRight={5}
+                    numberOfLines={1}
+                    adjustsFontSizeToFit>
+                    {getOrderStatus(order?.status)?.value}
+                  </OText>
+                </Information>
+              </Card>
+            </TouchableOpacity>
+          )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <FlatList
+        data={orders}
+        renderItem={MessageComponent}
+        keyExtractor={(order) => order?.id}
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => getOrders?.()}
+        />}
+        ListFooterComponent={<FooterComponent
+          loading={loading}
+          reload={reload}
+          pagination={pagination}
+          tabsFilter={tabsFilter}
+          tabs={tabs}
+          loadMore={loadMore}
+        />}
+      />
     </>
   );
 };