ordering-ui-react-native 0.23.72 → 0.23.74

package/package.json

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

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, Platform, TouchableOpacity, Animated, Easing } from 'react-native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform, TouchableOpacity } from 'react-native';
 import { useLanguage, useUtils, OrderListGroups, useConfig } from 'ordering-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -38,7 +38,8 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  InputContainer
+  InputContainer,
+  FilterAlert
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -76,7 +77,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     loadLogisticOrders,
     isLogisticActivated,
     handleChangeOrderStatus,
-    handleSendCustomerReview
+    handleSendCustomerReview,
+    ordersFiltered
   } = props;
 
   const defaultSearchList = {
@@ -108,6 +110,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
+  const hasSearchFilters = JSON.stringify(defaultSearchList) !== JSON.stringify(search)
+
   const deliveryStatus = [
     {
       key: t('OK', 'Ok'),
@@ -139,8 +143,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const HEIGHT_SCREEN = orientationState?.dimensions?.height
   const IS_PORTRAIT = orientationState.orientation === PORTRAIT
   const showTagsList = !props.isAlsea && !props.isDriverApp && currentTabSelected !== 'logisticOrders'
-  const AnimatedFeatherIcon = Animated.createAnimatedComponent(FeatherIcon);
-  const spinValue = new Animated.Value(0);
 
   const preorderTypeList = [
     { key: null, name: t('SLA', 'SLA\'s') },
@@ -292,13 +294,27 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
   const tagsList = ordersGroup[currentTabSelected]?.defaultFilter ?? []
   const currentOrdersGroup = ordersGroup[currentTabSelected]
+  const ordersValidation = hasSearchFilters ? ordersFiltered : currentOrdersGroup
+
+  const paginationValidation =
+    !ordersValidation?.error?.length &&
+    !ordersValidation?.loading &&
+    ordersValidation?.pagination?.totalPages &&
+    ordersValidation?.pagination?.currentPage < ordersValidation?.pagination?.totalPages &&
+    ordersValidation?.orders?.length > 0
+
+  const loadingValidation = (
+    ordersValidation?.loading ||
+    (ordersValidation?.pagination?.total === null && isNetConnected) ||
+    logisticOrders?.loading
+  ) && !ordersValidation?.error?.length
 
   const isEqual = (array1: any, array2: any) => {
     return array1?.every((item: any) => array2.includes(item)) && array2?.every((item: any) => array1.includes(item))
   }
 
   const handleLoadMore = () => {
-    loadMoreOrders && loadMoreOrders();
+    loadMoreOrders && loadMoreOrders({ allStatusses: hasSearchFilters });
   };
 
   const getOrderStatus = (key: number) => {
@@ -306,13 +322,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   };
 
   const applyFilters = () => {
-    setOrdersGroup({
-      ...ordersGroup,
-      [currentTabSelected]: {
-        ...ordersGroup[currentTabSelected],
-        orders: []
-      }
-    })
     const dateRange = calculateDate(search.date.type, search.date.from, search.date.to)
     onFiltered && onFiltered({ ...search, date: { ...dateRange } })
     setOpenSearchModal(false)
@@ -382,6 +391,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }
 
   const handleClose = () => {
+    setSearch(defaultSearchList)
     setOpenSearchModal(false)
     setOpenSLASettingModal(false)
   }
@@ -470,26 +480,24 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     }
   }, [isNetConnected, JSON.stringify(offlineActionsState.orders)]);
 
-  const handleInitAnimation = () => {
-    Animated.timing(
-      spinValue,
-      {
-        toValue: 1,
-        duration: 2000,
-        easing: Easing.linear,
-        useNativeDriver: true
-      }
-    ).start()
-  }
-
-  useEffect(() => {
-    if (currentOrdersGroup?.loading || logisticOrders?.loading){
-      handleInitAnimation()
-    }
-  }, [currentOrdersGroup?.loading, logisticOrders?.loading])
-
   return (
     <>
+      {hasSearchFilters && (
+        <FilterAlert>
+          <AntDesignIcon
+            name='warning'
+            color='#FFC700'
+            size={12}
+            onPress={() => setOpenSearchModal(true)}
+          />
+          <OText size={10} mLeft={5} mRight={5}>
+            {t('WARNING_FILTER_APPLIED', 'Filters applied. You may miss new orders.')}
+          </OText>
+          <Pressable onPress={() => handleClearFilters()}>
+            <OText textDecorationLine='underline' size={10} color='rgb(44, 123, 229)'>{t('CLEAR_FILTERS', 'Clear filters')}</OText>
+          </Pressable>
+        </FilterAlert>
+      )}
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
         <IconWrapper>
@@ -497,85 +505,99 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             <WebsocketStatus />
           </View>
           {isNetConnected && (
-            <AnimatedFeatherIcon
+            <FeatherIcon
               name='refresh-cw'
               color={theme.colors.backgroundDark}
               size={24}
-              onPress={() => currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })}
+              onPress={() => currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true, }, { allStatusses: hasSearchFilters })}
               style={{
-                marginRight: 20,
-                transform: [{
-                  rotate: spinValue.interpolate({
-                    inputRange: [0, 0.3],
-                    outputRange: ['0deg', '360deg'],
-                  })
-                }]
+                marginRight: 20
               }}
             />
           )}
-          <FontistoIcon
-            name='search'
-            color={theme.colors.backgroundDark}
-            size={24}
-            onPress={() => setOpenSearchModal(true)}
-          />
-        </IconWrapper>
-      </View>
-      <FiltersTab>
-        <ScrollView
-          ref={scrollRefTab}
-          showsVerticalScrollIndicator={false}
-          showsHorizontalScrollIndicator={false}
-          horizontal
-          nestedScrollEnabled={true}
-        >
-          <TabsContainer>
-            {(isLogisticActivated && !isBusinessApp && !combineTabs) && (
-              <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) => (
-              <TabPressable
-                key={tab.key}
-                onPress={() => setCurrentTabSelected(tab?.title)}
-                isSelected={tab.title === currentTabSelected ? 1 : 0}
-              >
-                <OText
+          {currentTabSelected !== 'logisticOrders' && (
+            <View>
+              {hasSearchFilters && (
+                <AntDesignIcon
+                  name='exclamationcircle'
+                  color={theme.colors.primary}
+                  size={16}
                   style={{
-                    ...styles.tab,
-                    fontSize: tab.title === currentTabSelected ? 16 : 14,
-                    borderBottomWidth: Platform.OS === 'ios' && tab.title === currentTabSelected ? 1 : 0,
+                    position: 'absolute',
+                    zIndex: 1000,
+                    right: -8,
+                    top: -5
                   }}
-                  color={
-                    tab.title === currentTabSelected
-                      ? theme.colors.textGray
-                      : theme.colors.unselectText
-                  }
-                  weight={tab.title === currentTabSelected ? '600' : 'normal'}
+                  onPress={() => setOpenSearchModal(true)}
+                />
+              )}
+              <FontistoIcon
+                name='filter'
+                color={theme.colors.backgroundDark}
+                size={24}
+                onPress={() => setOpenSearchModal(true)}
+              />
+            </View>
+          )}
+        </IconWrapper>
+      </View>
+      {!hasSearchFilters && (
+        <FiltersTab>
+          <ScrollView
+            ref={scrollRefTab}
+            showsVerticalScrollIndicator={false}
+            showsHorizontalScrollIndicator={false}
+            horizontal
+            nestedScrollEnabled={true}
+          >
+            <TabsContainer>
+              {(isLogisticActivated && !isBusinessApp && !combineTabs) && (
+                <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>
+              )}
+              {!hasSearchFilters && tabs.map((tab: any) => (
+                <TabPressable
+                  key={tab.key}
+                  onPress={() => setCurrentTabSelected(tab?.title)}
+                  isSelected={tab.title === currentTabSelected ? 1 : 0}
                 >
-                  {tab.text}
-                </OText>
-              </TabPressable>
-            ))}
-          </TabsContainer>
-        </ScrollView>
-      </FiltersTab>
+                  <OText
+                    style={{
+                      ...styles.tab,
+                      fontSize: tab.title === currentTabSelected ? 16 : 14,
+                      borderBottomWidth: Platform.OS === 'ios' && tab.title === currentTabSelected ? 1 : 0,
+                    }}
+                    color={
+                      tab.title === currentTabSelected
+                        ? theme.colors.textGray
+                        : theme.colors.unselectText
+                    }
+                    weight={tab.title === currentTabSelected ? '600' : 'normal'}
+                  >
+                    {tab.text}
+                  </OText>
+                </TabPressable>
+              ))}
+            </TabsContainer>
+          </ScrollView>
+        </FiltersTab>
+      )}
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
-        {showTagsList && (
+        {showTagsList && !hasSearchFilters && (
           <View
             style={{
               display: 'flex',
@@ -674,17 +696,17 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
           refreshControl={
             <RefreshControl
               refreshing={refreshing}
-              onRefresh={() => { isNetConnected && (currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true })) }}
+              onRefresh={() => { isNetConnected && (currentTabSelected === 'logisticOrders' ? loadLogisticOrders && loadLogisticOrders() : loadOrders && loadOrders({ newFetch: true }, { allStatusses: hasSearchFilters })) }}
             />
           }
         >
-          {!currentOrdersGroup?.error?.length &&
-            currentOrdersGroup?.orders?.length > 0 &&
+          {!ordersValidation?.error?.length &&
+            (ordersValidation?.orders?.length > 0 || ordersFiltered?.orders?.length > 0) &&
             currentTabSelected !== 'logisticOrders' &&
-            !currentOrdersGroup?.loading &&
+            !ordersValidation?.loading &&
             (
               <PreviousOrders
-                orders={ordersFormatted}
+                orders={hasSearchFilters ? ordersFiltered?.orders : ordersFormatted}
                 navigation={props.navigation}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
@@ -714,14 +736,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )
           }
           {(
-            (
-              (
-                currentOrdersGroup?.loading ||
-                (currentOrdersGroup?.pagination?.total === null && isNetConnected) ||
-                logisticOrders?.loading
-              ) &&
-              !currentOrdersGroup?.error?.length
-            ) || internetLoading
+            loadingValidation || internetLoading
           ) && (
               <View style={{ marginTop: 10 }}>
                 {[...Array(5)].map((_, i) => (
@@ -753,11 +768,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )}
 
           {isNetConnected &&
-            !currentOrdersGroup?.error?.length &&
-            !currentOrdersGroup?.loading &&
-            currentOrdersGroup?.pagination?.totalPages &&
-            currentOrdersGroup?.pagination?.currentPage < currentOrdersGroup?.pagination?.totalPages &&
-            currentOrdersGroup?.orders?.length > 0 &&
+            paginationValidation &&
             (
               <OButton
                 onClick={handleLoadMore}
@@ -771,9 +782,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )}
 
           {!internetLoading &&
-            ((!currentOrdersGroup?.loading &&
-              (currentOrdersGroup?.error?.length ||
-                currentOrdersGroup?.orders?.length === 0)) ||
+            ((!ordersValidation?.loading &&
+              (ordersValidation?.error?.length ||
+                ordersValidation?.orders?.length === 0)) ||
               (currentTabSelected === 'logisticOrders' &&
                 (logisticOrders && !logisticOrders?.loading && (logisticOrders?.error?.length > 0 || logisticOrders?.orders?.length === 0 || !logisticOrders?.orders?.some(order => !order?.expired))))
             ) &&
@@ -781,11 +792,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
               <NotFoundSource
                 content={
                   !isNetConnected ? t('NETWORK_ERROR', 'Network Error') :
-                    ((currentTabSelected !== 'logisticOrders' && !currentOrdersGroup?.error?.length) ||
+                    ((currentTabSelected !== 'logisticOrders' && !ordersValidation?.error?.length) ||
                       (currentTabSelected === 'logisticOrders' && (!logisticOrders?.error?.length || (logisticOrders?.orders?.length > 0 && !logisticOrders?.orders?.some(order => !order?.expired)))))
                       ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
-                      : currentOrdersGroup?.error?.[0]?.message ||
-                      currentOrdersGroup?.error?.[0] ||
+                      : ordersValidation?.error?.[0]?.message ||
+                      ordersValidation?.error?.[0] ||
                       (currentTabSelected === 'logisticOrders' && logisticOrders?.error) ||
                       t('NETWORK_ERROR', 'Network Error')
                 }

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

@@ -154,3 +154,17 @@ export const Actions = styled.View`
 export const InputContainer = styled.View`
   position: relative;
 `
+
+export const FilterAlert = styled.View`
+  position: absolute;
+  z-index: 1000;
+  flex-direction: row;
+  top: 50px;
+  background-color: #FFF9E2;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: flex-start;
+  right: 10px;
+  padding: 5px;
+  border-radius: 10px
+`

package/themes/business/src/types/index.tsx

@@ -288,8 +288,8 @@ export interface OrdersOptionParams {
   rememberOrderStatus?: any;
   titleContent?: string;
   customArray?: Array<any>;
-  loadMoreOrders?: () => {};
-  loadOrders?: ({ }: any) => {};
+  loadMoreOrders?: (options ?: any) => {};
+  loadOrders?: ({ }: any, options?: any) => {};
   messages?: any;
   setMessages?: () => {};
   loadMessages?: () => {};
@@ -328,6 +328,7 @@ export interface OrdersOptionParams {
   isDriverApp?: boolean;
   combineTabs?: boolean;
   setCombineTabsState?: any;
+  ordersFiltered?: any
 }
 export interface ActiveOrdersParams {
   orders?: any;