ordering-ui-react-native 0.12.12 → 0.12.16

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform } from 'react-native';
 import { useLanguage, useUtils, OrderListGroups } from 'ordering-components/native';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 import FeatherIcon from 'react-native-vector-icons/Feather';
@@ -41,11 +41,10 @@ const tabsList: any = {
 };
 
 const tabsListText: any = {
-  1: 'logistic_pending',
-  2: 'pending',
-  3: 'inProgress',
-  4: 'completed',
-  5: 'cancelled'
+  1: 'pending',
+  2: 'inProgress',
+  3: 'completed',
+  4: 'cancelled'
 };
 
 const swipeConfig = {
@@ -70,7 +69,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     filtered,
     onFiltered,
     handleClickOrder,
-    isBusinessApp
+    handleClickLogisticOrder,
+    isBusinessApp,
+    logisticOrders,
+    loadLogisticOrders
   } = props;
 
   const defaultSearchList = {
@@ -87,7 +89,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       type: ''
     }
   }
-  console.log('ORDERS', ordersGroup)
+
   const theme = useTheme();
   const [, t] = useLanguage();
   const [{ parseDate }] = useUtils()
@@ -125,6 +127,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       zIndex: 100,
       borderColor: theme.colors.textGray,
     },
+    icon: {
+      paddingBottom: 10,
+      zIndex: 100,
+      marginBottom: 2,
+    },
     tagsContainer: {
       marginBottom: 20,
     },
@@ -172,7 +179,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const currentOrdersGroup = ordersGroup[currentTabSelected]
 
   const isEqual = (array1: any, array2: any) => {
-    return array1.every((item: any) => array2.includes(item)) && array2.every((item: any) => array1.includes(item))
+    return array1?.every((item: any) => array2.includes(item)) && array2?.every((item: any) => array1.includes(item))
   }
 
   const handleLoadMore = () => {
@@ -192,7 +199,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       }
     })
     const dateRange = calculateDate(search.date.type, search.date.from, search.date.to)
-    onFiltered && onFiltered({...search, date: {...dateRange}})
+    onFiltered && onFiltered({ ...search, date: { ...dateRange } })
     setOpenModal(false)
   }
 
@@ -249,29 +256,29 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     switch (type) {
       case 'today':
         const date = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${date} 00:00:00`, to: `${date} 23:59:59`}
+        return { from: `${date} 00:00:00`, to: `${date} 23:59:59` }
       case 'yesterday':
         const yesterday = new Date()
         yesterday.setDate(yesterday.getDate() - 1)
         const start1 = parseDate(yesterday, { outputFormat: 'MM/DD/YYYY' })
         const end1 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start1} 00:00:00`, to: `${end1} 23:59:59`}
+        return { from: `${start1} 00:00:00`, to: `${end1} 23:59:59` }
       case 'last_7days':
         const last_7days = new Date()
         last_7days.setDate(last_7days.getDate() - 6)
         const start7 = parseDate(last_7days, { outputFormat: 'MM/DD/YYYY' })
         const end7 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start7} 00:00:00`, to: `${end7} 23:59:59`}
+        return { from: `${start7} 00:00:00`, to: `${end7} 23:59:59` }
       case 'last_30days':
         const last_30days = new Date()
         last_30days.setDate(last_30days.getDate() - 29)
         const start30 = parseDate(last_30days, { outputFormat: 'MM/DD/YYYY' })
         const end30 = parseDate(new Date(), { outputFormat: 'MM/DD/YYYY' })
-        return {from: `${start30} 00:00:00`, to: `${end30} 23:59:59`}
+        return { from: `${start30} 00:00:00`, to: `${end30} 23:59:59` }
       default:
         const start = from ? `${parseDate(from, { outputFormat: 'MM/DD/YYYY' })} 00:00:00` : ''
         const end = to ? `${parseDate(to, { outputFormat: 'MM/DD/YYYY' })} 23:59:59` : ''
-        return {from: start, to: end}
+        return { from: start, to: end }
     }
   }
 
@@ -311,22 +318,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </IconWrapper>
       </View>
       {isBusinessApp && (
-        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight:40}}>
-            <OIcon
-              src={theme.images.general.information}
-              width={12}
-              height={12}
-              color={theme.colors.skyBlue}
-              style={{marginRight: 5}}
-            />
-            <OText size={12}>
-              {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-start', maxHeight: 40 }}>
+          <OIcon
+            src={theme.images.general.information}
+            width={12}
+            height={12}
+            color={theme.colors.skyBlue}
+            style={{ marginRight: 5 }}
+          />
+          <OText size={12}>
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+          </OText>
+          <TouchableOpacity onPress={() => { Linking.openURL('https://new-admin.tryordering.com/') }}>
+            <OText size={12} color={theme.colors.skyBlue}>
+              {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
             </OText>
-            <TouchableOpacity onPress={() => {Linking.openURL('https://new-admin.tryordering.com/')}}>
-                <OText size={12} color={theme.colors.skyBlue}>
-                  {t('LINK_MORE_SETTINGS_GO_TO', 'new-admin.ordering.co')}
-                </OText>
-            </TouchableOpacity>
+          </TouchableOpacity>
         </View>
       )}
       <FiltersTab>
@@ -338,6 +345,22 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           nestedScrollEnabled={true}
         >
           <TabsContainer width={WIDTH_SCREEN}>
+            <Pressable
+              style={styles.pressable}
+              onPress={() => setCurrentTabSelected('logisticOrders')}>
+              <OIcon
+                src={theme.images?.general?.chronometer}
+                borderBottomWidth={currentTabSelected === 'logisticOrders' ? 1 : 0}
+                width={currentTabSelected === 'logisticOrders' ? 26 : 24}
+                height={currentTabSelected === 'logisticOrders' ? 26 : 24}
+                color={
+                  currentTabSelected === 'logisticOrders'
+                    ? theme.colors.textGray
+                    : theme.colors.unselectText
+                }
+                style={styles.icon}
+              />
+            </Pressable>
             {tabs.map((tab: any) => (
               <Pressable
                 key={tab.key}
@@ -364,71 +387,73 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 250 }}>
-        <View
-          style={{
-            display: 'flex',
-            flexDirection: 'row',
-            alignContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {tagsList && tagsList?.length > 1 && (
-            <View style={{ marginBottom: 20 }}>
-              <Tag
-                onPress={() => handleAllSelect()}
-                isSelected={
-                  isEqual(currentOrdersGroup.currentFilter, tagsList)
-                    ? theme.colors.primary
-                    : theme.colors.tabBar
-                }>
-                <OText
-                  style={styles.tag}
-                  color={
+        {currentTabSelected !== 'logisticOrders' && (
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            {tagsList && tagsList?.length > 1 && (
+              <View style={{ marginBottom: 20 }}>
+                <Tag
+                  onPress={() => handleAllSelect()}
+                  isSelected={
                     isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.white
-                      : theme.colors.black
+                      ? theme.colors.primary
+                      : theme.colors.tabBar
                   }>
-                  {t('All', 'All')}
-                </OText>
-              </Tag>
-            </View>
-          )}
-          <ScrollView
-            ref={scrollRef}
-            showsVerticalScrollIndicator={false}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.tagsContainer}
-            horizontal
-          >
-            {tagsList && tagsList.map((key: number) => (
-              <Tag
-                key={key}
-                onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
-                isSelected={
-                  currentOrdersGroup.currentFilter.includes(key) &&
-                  !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                    ? theme.colors.primary
-                    : theme.colors.tabBar
-                }>
-                <OText
-                  style={styles.tag}
-                  color={
+                  <OText
+                    style={styles.tag}
+                    color={
+                      isEqual(currentOrdersGroup.currentFilter, tagsList)
+                        ? theme.colors.white
+                        : theme.colors.black
+                    }>
+                    {t('All', 'All')}
+                  </OText>
+                </Tag>
+              </View>
+            )}
+            <ScrollView
+              ref={scrollRef}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              contentContainerStyle={styles.tagsContainer}
+              horizontal
+            >
+              {tagsList && tagsList.map((key: number) => (
+                <Tag
+                  key={key}
+                  onPress={() => !currentOrdersGroup.loading && handleTagSelected(key)}
+                  isSelected={
                     currentOrdersGroup.currentFilter.includes(key) &&
-                    !isEqual(currentOrdersGroup.currentFilter, tagsList)
-                      ? theme.colors.white
-                      : theme.colors.black
+                      !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                      ? theme.colors.primary
+                      : theme.colors.tabBar
                   }>
-                  {getOrderStatus(key)}
-                  {
-                    currentOrdersGroup.currentFilter.includes(key) &&
-                    !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
-                    ' X'
-                  }
-                </OText>
-              </Tag>
-            ))}
-          </ScrollView>
-        </View>
+                  <OText
+                    style={styles.tag}
+                    color={
+                      currentOrdersGroup.currentFilter.includes(key) &&
+                        !isEqual(currentOrdersGroup.currentFilter, tagsList)
+                        ? theme.colors.white
+                        : theme.colors.black
+                    }>
+                    {getOrderStatus(key)}
+                    {
+                      currentOrdersGroup.currentFilter.includes(key) &&
+                      !isEqual(currentOrdersGroup.currentFilter, tagsList) &&
+                      ' X'
+                    }
+                  </OText>
+                </Tag>
+              ))}
+            </ScrollView>
+          </View>
+        )}
 
         <ScrollView
           ref={scrollListRef}
@@ -438,92 +463,105 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
-              onRefresh={() => loadOrders && loadOrders({ newFetch: true })}
+              onRefresh={() => {currentTabSelected === 'logisticOrders' ? loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}}
             />
           }
         >
           {!currentOrdersGroup?.error?.length &&
             currentOrdersGroup?.orders?.length > 0 &&
-          (
-            <PreviousOrders
-              orders={currentOrdersGroup.orders}
-              onNavigationRedirect={onNavigationRedirect}
-              getOrderStatus={getOrderStatus}
-              handleClickOrder={handleClickOrder}
-            />
-          )}
-
-          {(currentOrdersGroup?.loading ||
-            currentOrdersGroup?.pagination?.total === null) &&
-          (
-            <>
-              <View>
-                {[...Array(5)].map((_, i) => (
-                  <Placeholder key={i} Animation={Fade}>
-                    <View
-                      style={{
-                        width: '100%',
-                        flexDirection: 'row',
-                        marginBottom: 10,
-                      }}>
-                      <PlaceholderLine
-                        width={IS_PORTRAIT ? 22 : 11}
-                        height={74}
+            currentTabSelected !== 'logisticOrders' &&
+            (
+              <PreviousOrders
+                orders={currentOrdersGroup.orders}
+                onNavigationRedirect={onNavigationRedirect}
+                getOrderStatus={getOrderStatus}
+                handleClickOrder={handleClickOrder}
+              />
+            )}
+          {!logisticOrders?.error?.length &&
+            logisticOrders?.orders?.length > 0 &&
+            currentTabSelected === 'logisticOrders' && (
+              <PreviousOrders
+                orders={logisticOrders.orders}
+                onNavigationRedirect={onNavigationRedirect}
+                getOrderStatus={getOrderStatus}
+                handleClickOrder={handleClickLogisticOrder}
+                isLogisticOrder
+              />
+            )
+          }
+          {((currentOrdersGroup?.loading ||
+            currentOrdersGroup?.pagination?.total === null) ||
+            (logisticOrders?.loading)) &&
+            (
+              <>
+                <View>
+                  {[...Array(5)].map((_, i) => (
+                    <Placeholder key={i} Animation={Fade}>
+                      <View
                         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>
-            </>
-          )}
+                          width: '100%',
+                          flexDirection: 'row',
+                          marginBottom: 10,
+                        }}>
+                        <PlaceholderLine
+                          width={IS_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>
+              </>
+            )}
 
           {!currentOrdersGroup?.error?.length &&
             !currentOrdersGroup?.loading &&
             currentOrdersGroup?.pagination?.totalPages &&
             currentOrdersGroup?.pagination?.currentPage < currentOrdersGroup?.pagination?.totalPages &&
             currentOrdersGroup?.orders?.length > 0 &&
-          (
-            <OButton
-              onClick={handleLoadMore}
-              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
-              imgRightSrc={null}
-              textStyle={styles.loadButtonText}
-              style={styles.loadButton}
-              bgColor={theme.colors.primary}
-              borderColor={theme.colors.primary}
-            />
-          )}
+            (
+              <OButton
+                onClick={handleLoadMore}
+                text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+                imgRightSrc={null}
+                textStyle={styles.loadButtonText}
+                style={styles.loadButton}
+                bgColor={theme.colors.primary}
+                borderColor={theme.colors.primary}
+              />
+            )}
 
           {!currentOrdersGroup?.loading &&
             (currentOrdersGroup?.error?.length ||
-            currentOrdersGroup?.orders?.length === 0) &&
-          (
-            <NotFoundSource
-              content={
-                !currentOrdersGroup?.error?.length
-                  ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
-                  : currentOrdersGroup?.error[0]?.message ||
+              currentOrdersGroup?.orders?.length === 0) &&
+            (
+              <NotFoundSource
+                content={
+                  !currentOrdersGroup?.error?.length
+                    ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
+                    : currentOrdersGroup?.error[0]?.message ||
                     currentOrdersGroup?.error[0] ||
                     t('NETWORK_ERROR', 'Network Error')
-              }
-              image={theme.images.general.notFound}
-              conditioned={false}
-            />
-          )}
+                }
+                image={theme.images.general.notFound}
+                conditioned={false}
+              />
+            )}
         </ScrollView>
       </View>
-    {/* </GestureRecognizer> */}
-    
+      {/* </GestureRecognizer> */}
+
       <NewOrderNotification />
       <OModal open={openModal} entireModal customClose>
         <ModalContainer
@@ -546,7 +584,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
           <OInput
             value={search.id}
-            onChange={(value: any) => setSearch({...search, id: value})}
+            onChange={(value: any) => setSearch({ ...search, id: value })}
             style={styles.inputStyle}
             placeholder={t('ORDER_NUMBER', 'Order number')}
             autoCorrect={false}
@@ -606,12 +644,13 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
-
+  const theme = useTheme()
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
     useDefualtSessionManager: true,
     asDashboard: true,
+    isIos: Platform.OS === 'ios',
     orderStatus: [
       { key: 0, text: t('PENDING', 'Pending') },
       { key: 1, text: t('COMPLETED', 'Completed') },
@@ -687,30 +726,24 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     tabs: [
       {
         key: 0,
-        text: t('Logistics', 'Logistics'),
-        tags: [0],
-        title: 'Logistics'
-      },
-      {
-        key: 1,
         text: t('PENDING', 'Pending'),
         tags: props?.orderGroupStatusCustom?.pending ?? [0, 13],
         title: 'pending'
       },
       {
-        key: 2,
+        key: 1,
         text: t('IN_PROGRESS', 'In Progress'),
         tags: props?.orderGroupStatusCustom?.inProgress ?? [3, 4, 7, 8, 9, 14, 18, 19, 20, 21],
         title: 'inProgress',
       },
       {
-        key: 3,
+        key: 2,
         text: t('COMPLETED', 'Completed'),
         tags: props?.orderGroupStatusCustom?.completed ?? [1, 11, 15],
         title: 'completed',
       },
       {
-        key: 4,
+        key: 3,
         text: t('CANCELLED', 'Cancelled'),
         tags: props?.orderGroupStatusCustom?.cancelled ?? [2, 5, 6, 10, 12, 16, 17],
         title: 'cancelled',