ordering-ui-react-native 0.16.90 → 0.16.92

package/package.json

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

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

@@ -97,6 +97,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
             <Logo style={styles.logo}>
               <OIcon
                 url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                src={!business?.logo && theme?.images?.dummies?.businessLogo}
                 style={styles.icon}
               />
             </Logo>

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

@@ -742,7 +742,7 @@ const ChatUI = (props: MessagesParams) => {
                 color: '#414954'
               }}
               style={{ ...styles.editButton }}
-              onClick={() => handleClickQuickMessage(quickMessage.text)}
+              onClick={() => handleClickQuickMessage(message?.length > 0 ? ' ' + quickMessage.text : quickMessage.text)}
             />
           </React.Fragment>
         ))}

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

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   Dimensions,
   ScrollView,
+  RefreshControl,
 } from 'react-native';
 import { Contacts, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
@@ -24,6 +25,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
     messages,
     onNavigationRedirect,
     setSortBy,
+    getOrders
   } = props;
 
   const theme = useTheme();
@@ -55,6 +57,7 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
   const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
   const [activeTag, setActiveTag] = useState(tags[0].key);
   const [reload, setReload] = useState(false);
+  const [refreshing] = useState(false);
   const [unreadMessages, setUnreadMessages] = useState(
     values?.reduce(
       (total: number, order: any) => total + order.unread_count,
@@ -247,7 +250,14 @@ const MessagesOptionUI = (props: MessagesOptionParams) => {
         />
       )}
 
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+      <ScrollView 
+        showsVerticalScrollIndicator={false}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => getOrders?.()}
+      />}
+      >
         {!reload &&
           !error &&
           values.length > 0 &&

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

@@ -5,6 +5,7 @@ import SelectDropdown from 'react-native-select-dropdown'
 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'
@@ -33,7 +34,8 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  Actions
+  Actions,
+  InputContainer
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -48,7 +50,7 @@ import { OrdersOptionDelivery } from '../OrdersOptionDelivery';
 import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
-
+import { GestureEvent, GestureDetector } from 'react-native-gesture-handler'
 const tabsList: any = {
   pending: 1,
   inProgress: 2,
@@ -123,7 +125,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [selectedTabStatus, setSelectedTabStatus] = useState([])
   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
@@ -403,10 +405,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     setOpenSLASettingModal(false)
   }
 
-  useEffect(() => {
-    setCurrentFilters(null)
-    onFiltered && onFiltered(null)
+  const handleClearFilters = () => {
     setSearch(defaultSearchList)
+  }
+
+  useEffect(() => {
     scrollRefTab.current?.scrollTo({ animated: true });
     scrollListRef.current?.scrollTo({ animated: true });
     scrollRef.current?.scrollTo({ y: 0, animated: true });
@@ -415,7 +418,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   useEffect(() => {
     setSelectedTabStatus(deliveryStatus)
   }, [])
-
+  
   return (
     // <GestureRecognizer
     //   onSwipeLeft={onSwipeLeft}
@@ -754,22 +757,34 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             {openSearchModal && (
               <SearchModalContent>
                 <ModalTitle>{t('SEARCH_ORDERS', 'Search orders')}</ModalTitle>
-                <OInput
-                  value={search.id}
-                  onChange={(value: any) => setSearch({ ...search, id: value })}
-                  style={styles.inputStyle}
-                  placeholder={t('ORDER_NUMBER', 'Order number')}
-                  autoCorrect={false}
-                />
+                <InputContainer>
+                  <OInput
+                    value={search.id}
+                    onChange={(value: any) => setSearch({ ...search, id: value })}
+                    style={styles.inputStyle}
+                    placeholder={t('ORDER_NUMBER', 'Order number')}
+                    autoCorrect={false}
+                  />
+                  <AntDesignIcon
+                    name='close'
+                    size={20}
+                    style={{ position: 'absolute', right: 12, top: 13 }}
+                    onPress={() => setSearch({ ...search, id: '' })}
+                  />
+                </InputContainer>
                 <OrdersOptionDate
                   {...props}
                   search={search}
                   onSearch={setSearch}
+                  setOpenedSelect={setOpenedSelect}
+                  openedSelect={openedSelect}
                 />
                 <OrdersOptionCity
                   {...props}
                   search={search}
                   onSearch={setSearch}
+                  setOpenedSelect={setOpenedSelect}
+                  openedSelect={openedSelect}
                 />
                 {isBusinessApp && (
                   <>
@@ -777,21 +792,29 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                       {...props}
                       search={search}
                       onSearch={setSearch}
+                      setOpenedSelect={setOpenedSelect}
+                      openedSelect={openedSelect}
                     />
                     <OrdersOptionDelivery
                       {...props}
                       search={search}
                       onSearch={setSearch}
+                      setOpenedSelect={setOpenedSelect}
+                      openedSelect={openedSelect}
                     />
                     <OrdersOptionDriver
                       {...props}
                       search={search}
                       onSearch={setSearch}
+                      setOpenedSelect={setOpenedSelect}
+                      openedSelect={openedSelect}
                     />
                     <OrdersOptionPaymethod
                       {...props}
                       search={search}
                       onSearch={setSearch}
+                      setOpenedSelect={setOpenedSelect}
+                      openedSelect={openedSelect}
                     />
                   </>
                 )}
@@ -801,13 +824,24 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                   imgRightSrc={null}
                   style={{
                     borderRadius: 7.6,
-                    marginBottom: 70,
+                    marginBottom: 10,
                     marginTop: 60,
                     zIndex: 12
                   }}
                   onClick={applyFilters}
                 />
-
+                <OButton
+                  text={t('CLEAR_SEARCh', 'Clear search')}
+                  imgRightSrc={null}
+                  bgColor='#fff'
+                  style={{
+                    borderRadius: 7.6,
+                    marginBottom: 0,
+                    marginTop: 0,
+                    zIndex: 12
+                  }}
+                  onClick={handleClearFilters}
+                />
               </SearchModalContent>
             )}
             {openSLASettingModal && (

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

@@ -149,4 +149,8 @@ export const OverLine = styled.View`
 `
 export const Actions = styled.View`
 
-`
+`
+
+export const InputContainer = styled.View`
+  position: relative;
+`

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

@@ -10,7 +10,9 @@ export const OrdersOptionBusinessUI = (props: any) => {
   const {
     search,
     onSearch,
-    businessesList
+    businessesList,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -25,6 +27,14 @@ export const OrdersOptionBusinessUI = (props: any) => {
     setOptionsList(businesses)
   }, [businessesList?.businesses])
 
+  const handleClear = () => {
+    onSearch({ ...search, option: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('business')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -36,6 +46,10 @@ export const OrdersOptionBusinessUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_BUSINESS', 'Select Business')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='business'
       />
     </Container>
   );

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

@@ -10,7 +10,9 @@ export const OrdersOptionCityUI = (props: any) => {
   const {
     search,
     onSearch,
-    allListValues
+    allListValues,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -27,6 +29,14 @@ export const OrdersOptionCityUI = (props: any) => {
     setOptionsList(cities)
   }, [allListValues?.countries])
 
+  const handleClear = () => {
+    onSearch({ ...search, city: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('city')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -38,6 +48,10 @@ export const OrdersOptionCityUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_CITY', 'Select City')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='city'
       />
     </Container>
   );

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

@@ -3,12 +3,16 @@ import { useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { Container } from './styles';
 import ODropDownCalendar from '../shared/ODropDownCalendar';
-import { Platform } from 'react-native'
-
+import { Button, Platform, Touchable, TouchableOpacity, View } from 'react-native'
+import DoubleClick from 'react-native-double-tap'
+import { OText } from '../shared';
+import DoubleTap from 'react-native-double-tap';
 export const OrdersOptionDate = (props: any) => {
   const {
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -22,18 +26,23 @@ export const OrdersOptionDate = (props: any) => {
 
   const handleChangeOption = (option: any) => {
     if (option === 'calendar') {
-      onSearch({...search, date: {...search.date, type: option}})
+      onSearch({ ...search, date: { ...search.date, type: option } })
     } else {
-      onSearch({...search, date: {from: '', to: '', type: option}})
+      onSearch({ ...search, date: { from: '', to: '', type: option } })
     }
   }
 
   const handleChangeDate = (from: any, to: any) => {
-    onSearch({...search, date: {...search.date, from: from, to: to}})
+    onSearch({ ...search, date: { ...search.date, from: from, to: to } })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('calendar')
   }
 
   return (
     <Container isIos={Platform.OS === 'ios'}>
+
       <ODropDownCalendar
         options={optionsList}
         defaultValue={search.date.type}
@@ -47,6 +56,10 @@ export const OrdersOptionDate = (props: any) => {
         rangeDate={search.date}
         handleChangeDate={handleChangeDate}
         isCalendarAlwaysVisible
+        handleClear={() => onSearch({ ...search, date: { from: '', to: '', type: '' } })}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='calendar'
       />
     </Container>
   );

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

@@ -8,7 +8,9 @@ import { Platform } from 'react-native'
 export const OrdersOptionDelivery = (props: any) => {
   const {
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -18,6 +20,14 @@ export const OrdersOptionDelivery = (props: any) => {
     { value: '2', content: t('PICKUP', 'Pickup') }
   ]
 
+  const handleClear = () => {
+    onSearch({ ...search, delivery_type: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('delivery_type')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -29,6 +39,10 @@ export const OrdersOptionDelivery = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_DELIVERY_TYPE', 'Select Delivery type')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='delivery_type'
       />
     </Container>
   );

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

@@ -9,7 +9,9 @@ export const OrdersOptionDriverUI = (props: any) => {
   const {
     search,
     onSearch,
-    driverList
+    driverList,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -24,6 +26,14 @@ export const OrdersOptionDriverUI = (props: any) => {
     setOptionsList(drivers)
   }, [driverList?.drivers])
 
+  const handleClear = () => {
+    onSearch({ ...search, driver: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('driver')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -35,6 +45,10 @@ export const OrdersOptionDriverUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_DRIVER', 'Select Driver')}
         dropViewMaxHeight={165}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='driver'
       />
     </Container>
   );

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

@@ -9,7 +9,9 @@ export const OrdersOptionPaymethodUI = (props: any) => {
   const {
     search,
     onSearch,
-    paymethodList
+    paymethodList,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -24,6 +26,14 @@ export const OrdersOptionPaymethodUI = (props: any) => {
     setOptionsList(paymethods)
   }, [paymethodList?.paymethods])
 
+  const handleClear = () => {
+    onSearch({ ...search, paymethod: '' })
+  }
+
+  const handleOpenSelect = () => {
+    setOpenedSelect('paymethod')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -35,6 +45,10 @@ export const OrdersOptionPaymethodUI = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_PAYMETHOD', 'Select Paymethod')}
         dropViewMaxHeight={200}
+        handleClear={handleClear}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='paymethod'
       />
     </Container>
   );

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

@@ -11,7 +11,9 @@ export const OrdersOptionStatus = (props: any) => {
     tabs,
     orderStatus,
     search,
-    onSearch
+    onSearch,
+    setOpenedSelect,
+    openedSelect
   } = props
 
   const theme = useTheme();
@@ -29,6 +31,10 @@ export const OrdersOptionStatus = (props: any) => {
     setOptionsList(_optionList)
   }, [currentTabSelected, tabs, orderStatus])
 
+  const handleOpenSelect = () => {
+    setOpenedSelect('state')
+  }
+
   return (
     <Container isIos={Platform.OS === 'ios'}>
       <ODropDown
@@ -40,6 +46,9 @@ export const OrdersOptionStatus = (props: any) => {
         textcolor={theme.colors.unselectText}
         placeholder={t('SELECT_STATUS', 'Select Status')}
         dropViewMaxHeight={200}
+        handleOpenSelect={handleOpenSelect}
+        openedSelect={openedSelect}
+        selectType='state'
       />
     </Container>
   );

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

@@ -230,6 +230,7 @@ export const PreviousMessages = (props: PreviousMessagesParams) => {
       fontWeight: '600',
       fontSize: 16,
       color: theme.colors.textGray,
+      width: '85%'
     },
     badge: {
       marginBottom: 6,

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import {
   useLanguage,
   useUtils,
@@ -10,7 +10,8 @@ import {
   View,
   StyleSheet,
   I18nManager,
-  TouchableOpacity
+  TouchableOpacity,
+  Keyboard
 } from 'react-native'
 import { useTheme } from 'styled-components/native'
 import { ReviewCustomerParams } from '../../types'
@@ -52,7 +53,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
   const { top, bottom } = useSafeAreaInsets()
   const [comments, setComments] = useState<Array<any>>([])
   const [extraComment, setExtraComment] = useState('')
-
+  const scrollref = useRef<any>()
   const styles = StyleSheet.create({
     photoWrapper: {
       shadowColor: theme.colors.black,
@@ -142,6 +143,14 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
 
   }, [actionState.error])
 
+  useEffect(() => {
+    if(scrollref?.current){
+      Keyboard.addListener('keyboardDidShow', () => {
+        scrollref.current.scrollToEnd()
+      })
+    }
+  }, [scrollref?.current])
+
   return (
     <KeyboardAvoidingView
       enabled
@@ -179,6 +188,7 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
       <Content
         showsVerticalScrollIndicator={false}
         contentContainerStyle={{ paddingBottom: 30 }}
+        ref={scrollref}
       >
         <CustomerInfoContainer>
           <View

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

@@ -149,10 +149,10 @@ const StoresListUI = (props: BusinessesListingParams) => {
             width={12}
             height={12}
             color={theme.colors.skyBlue}
-            style={{ marginRight: 5 }}
+            style={{ marginRight: 5, marginTop: 3 }}
           />
           <OText size={12}>
-            {t('MORE_SETTINGS_GO_TO', 'For more settings go to ')}
+            {t('MORE_SETTINGS_GO_TO', 'For more settings go to')}{' '}
           </OText>
           <TouchableOpacity onPress={() => { Linking.openURL(t('LINK_MORE_SETTINGS_GO_TO', 'https://app.ordering.co')) }}>
             <OText size={12} color={theme.colors.skyBlue}>

package/themes/business/src/components/shared/ODropDown.tsx

@@ -4,6 +4,7 @@ import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'
 import { ScrollView as CustomScrollView, TouchableOpacity as CustomTouchableOpacity, View } from 'react-native'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Text } from 'react-native-paper';
 
 interface Props {
@@ -16,7 +17,11 @@ interface Props {
   dropViewMaxHeight?: any,
   isModal?: any,
   bgcolor?: string,
-  textcolor?: string
+  textcolor?: string,
+  handleClear?: any,
+  handleOpenSelect?: any,
+  openedSelect?: string,
+  selectType?: string
 }
 
 const Wrapper = styled.View`
@@ -70,7 +75,11 @@ const ODropDown = (props: Props) => {
     placeholder,
     onSelect,
     dropViewMaxHeight,
-    isModal
+    isModal,
+    handleClear,
+    handleOpenSelect,
+    openedSelect,
+    selectType
   } = props
 
   const theme = useTheme();
@@ -82,6 +91,7 @@ const ODropDown = (props: Props) => {
 
   const onToggle = () => {
     setIsOpen(!isOpen)
+    if (!isOpen) handleOpenSelect?.()
   }
 
   const onSelectOption = (option: any) => {
@@ -91,12 +101,25 @@ const ODropDown = (props: Props) => {
     setIsOpen(false)
   }
 
+  const handleClearSearch = () => {
+    handleClear()
+    if (isOpen) {
+      onToggle()
+    }
+  }
+
   useEffect(() => {
     const _defaultOption = options?.find((option: any) => option.value === defaultValue)
     setSelectedOption(_defaultOption)
     setValue(defaultValue)
   }, [defaultValue, options])
 
+  useEffect(() => {
+    if (openedSelect !== selectType && typeof openedSelect === 'string') {
+      setIsOpen(false)
+    }
+  }, [openedSelect])
+
   return (
     <Wrapper style={props.style}>
       <Selected
@@ -110,11 +133,22 @@ const ODropDown = (props: Props) => {
         >
           {selectedOption?.content || selectedOption?.name || placeholder}
         </SelectedLabel>
-        <FeatherIcon
-          name='chevron-down'
-          color={props.textcolor}
-          size={24}
-        />
+        {selectedOption && handleClear ? (
+          <AntDesign
+            name={'close'}
+            size={20}
+            onPress={() => handleClearSearch()}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+          />
+        ) : (
+          <FeatherIcon
+            name='chevron-down'
+            color={props.textcolor}
+            size={24}
+            style={{ position: 'absolute', right: 12, top: 13 }}
+
+          />
+        )}
       </Selected>
       {isOpen && options && (
         <DropView
@@ -154,7 +188,7 @@ const ODropDown = (props: Props) => {
               maxHeight: dropViewMaxHeight || null,
               paddingBottom: 15
             }}
-            nestedScrollEnabled={true}
+              nestedScrollEnabled={true}
             >
               {options.map((option: any, index: number) => (
                 <CustomTouchableOpacity