ordering-ui-react-native 0.15.90 → 0.15.91-release

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

@@ -1,6 +1,6 @@
 //React & React Native
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, Platform, ScrollView } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 // Thirds
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
@@ -29,7 +29,6 @@ import { NotFoundSource } from '../NotFoundSource';
 import { getOrderStatus } from '../../utils';
 import { OrderHeaderComponent } from './OrderHeaderComponent';
 import { OrderContentComponent } from './OrderContentComponent';
-
 //Styles
 import { OrderDetailsContainer, Pickup } from './styles';
 
@@ -52,7 +51,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     appTitle,
     handleClickLogisticOrder,
     forceUpdate,
-    getPermissions
+    getPermissions,
+    isGrantedPermissions
   } = props;
   const [, { showToast }] = useToast();
   const { order } = props.order
@@ -73,6 +73,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     key?: string | null;
   }>({ open: false, content: [], key: null });
 
+  const validStatusComplete = [9, 19, 23]
+
   const logisticOrderStatus = [4, 6, 7]
 
   const showFloatButtonsPickUp: any = {
@@ -102,6 +104,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleOpenMapView = async () => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     const _permissions = await getPermissions()
 
     const isBlocked = _permissions.some((_permission: string) => permissions?.locationStatus?.[_permission] === 'blocked')
@@ -128,6 +134,10 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   };
 
   const handleViewActionOrder = (action: string) => {
+    if (!isGrantedPermissions) {
+      navigation.navigate('RequestPermissions')
+      return
+    }
     if (openModalForMapView) {
       setOpenModalForMapView(false);
     }
@@ -237,17 +247,17 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   let isToFollow = false;
   let isBusinessMarker = false;
 
-  if (order?.status === 7 || order?.status === 8) {
+  if (order?.status === 7 || order?.status === 8 || order?.status === 18) {
     const markerBusiness = 'Business';
     isBusinessMarker = true;
     locationMarker = locations.find(
       (location: any) => location.type === markerBusiness,
     );
 
-    if (order?.status === 8) {
+    if (order?.status === 8 || order?.status === 18) {
       isToFollow = true;
     }
-  } else if (order?.status === 3 || order?.status === 9) {
+  } else if (order?.status === 3 || order?.status === 9 || order?.status === 19 || order?.status === 23) {
     const markerCustomer = 'Customer';
     isToFollow = true;
     isBusinessMarker = false;
@@ -385,7 +395,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                     widthButton={'45%'}
                   />
                 )}
-                {(order?.status === 9 || order?.status === 19) && (
+                {(validStatusComplete.includes(order?.status)) && (
                   <>
                     <FloatingButton
                       disabled={props.order?.loading}

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

@@ -77,6 +77,7 @@ export const OrderContentComponent = (props: OrderContent) => {
   })
 
   const getIncludedTaxes = () => {
+    if (!order?.taxes) return 0
     if (order?.taxes?.length === 0) {
       return order.tax_type === 1 ? order?.summary?.tax ?? 0 : 0
     } else {
@@ -273,8 +274,8 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.cellphone}`}
-              shorcut={order?.customer?.cellphone}
+              url={`tel:${!!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>
@@ -322,6 +323,12 @@ export const OrderContentComponent = (props: OrderContent) => {
             {order?.customer?.zipcode}
           </OText>
         )}
+
+        {!!order?.on_behalf_of && (
+          <OText numberOfLines={1} mBottom={4} ellipsizeMode="tail">
+            {t('ON_BEHALF_OF', 'On behalf of')}{': '} {order?.on_behalf_of}
+          </OText>
+        )}
         {((order?.delivery_option !== undefined && order?.delivery_type === 1) || !!order?.comment) && (
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
@@ -357,6 +364,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <ProductItemAccordion
               key={product?.id || i}
               product={product}
+              currency={order?.currency}
             />
           ))}
       </OrderProducts>
@@ -365,7 +373,7 @@ export const OrderContentComponent = (props: OrderContent) => {
         <Table>
           <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
           <OText mBottom={4}>
-            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
+            {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
           </OText>
         </Table>
         {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -378,7 +386,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             ) : (
               <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
             )}
-            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
+            <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
           </Table>
         )}
         {
@@ -392,7 +400,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -400,9 +408,9 @@ export const OrderContentComponent = (props: OrderContent) => {
           <Table>
             <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
             {order?.tax_type === 1 ? (
-              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
+              <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
             ) : (
-              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
             )}
           </Table>
         )}
@@ -412,7 +420,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
             </OText>
             <OText mBottom={4}>
-              {parsePrice(order?.summary?.tax ?? 0)}
+              {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
             </OText>
           </Table>
         )}
@@ -423,7 +431,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 {t('SERVICE_FEE', 'Service fee')}
                 {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
               </OText>
-              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
             </Table>
           )
         }
@@ -436,7 +444,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -446,10 +454,10 @@ export const OrderContentComponent = (props: OrderContent) => {
               <OSRow>
                 <OText mBottom={4}>
                   {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
+              <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -464,7 +472,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -476,7 +484,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               </OText>
 
               <OText mBottom={4}>
-                {parsePrice(order?.summary?.delivery_price)}
+                {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
               </OText>
             </Table>
           )
@@ -492,7 +500,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
             </Table>
           ))
         }
@@ -507,7 +515,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                   `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
                 )}
             </OText>
-            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
+            <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
           </Table>
         )}
 
@@ -521,7 +529,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               mBottom={4}
               style={styles.textBold}
               color={theme.colors.primary}>
-              {parsePrice(order?.summary?.total ?? order?.total)}
+              {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
             </OText>
           </Table>
         </Total>
@@ -564,7 +572,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount)}
+                    -{parsePrice(event.amount, { currency: order?.currency})}
                   </OText>
                 </View>
               ))}

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

@@ -6,7 +6,7 @@ import FontistoIcon from 'react-native-vector-icons/Fontisto'
 import FeatherIcon from 'react-native-vector-icons/Feather';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useTheme } from 'styled-components/native';
-
+import { NotificationSetting } from '../../../../../src/components/NotificationSetting'
 import {
   FiltersTab,
   TabsContainer,
@@ -611,7 +611,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
         </LeftSide>
 
         <RightSide style={{ paddingBottom: 110, paddingHorizontal: 20 }}>
-          {currentOrderSelected &&  (
+          {currentOrderSelected && (
             <OrderDetailsBusiness {...props.orderDetailsProps} order={currentOrderSelected} isCustomView />
           )}
         </RightSide>
@@ -756,6 +756,7 @@ const OrdersListManagerUI = (props: OrdersOptionParams) => {
 
 export const OrdersListManager = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersListManagerUI,
@@ -870,5 +871,11 @@ export const OrdersListManager = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

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

@@ -5,8 +5,10 @@ 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'
 import { NewOrderNotification } from '../NewOrderNotification';
 
 import { OText, OButton, OModal, OIconButton, OInput, OIcon } from '../shared';
@@ -32,7 +34,8 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  Actions
+  Actions,
+  InputContainer
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
@@ -47,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,
@@ -88,7 +91,8 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     handleClickLogisticOrder,
     logisticOrders,
     loadLogisticOrders,
-    isLogisticActivated
+    isLogisticActivated,
+    isAlsea
   } = props;
 
   const defaultSearchList = {
@@ -121,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
@@ -401,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 });
@@ -413,7 +418,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   useEffect(() => {
     setSelectedTabStatus(deliveryStatus)
   }, [])
-
+  
   return (
     // <GestureRecognizer
     //   onSwipeLeft={onSwipeLeft}
@@ -545,7 +550,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
         </ScrollView>
       </FiltersTab>
       <View style={{ flex: 1, minHeight: HEIGHT_SCREEN - 450 }}>
-        {currentTabSelected !== 'logisticOrders' && (
+        {currentTabSelected !== 'logisticOrders' && !isAlsea && (
           <View
             style={{
               display: 'flex',
@@ -726,7 +731,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
       </View>
       {/* </GestureRecognizer> */}
 
-      <NewOrderNotification isBusinessApp={isBusinessApp} />
+      {isBusinessApp && (
+        <NewOrderNotification isBusinessApp={isBusinessApp} />
+      )}
+
       {(openSearchModal || openSLASettingModal) && (
         <OModal open={openSearchModal || openSLASettingModal} entireModal customClose>
           <ModalContainer
@@ -749,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 && (
                   <>
@@ -772,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}
                     />
                   </>
                 )}
@@ -796,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 && (
@@ -931,6 +970,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
   const [, t] = useLanguage();
   const [configState] = useConfig()
   const theme = useTheme()
+  const [checkNotificationStatus, setCheckNotificationStatus] = useState({ open: false, checked: false })
   const ordersProps = {
     ...props,
     UIComponent: OrdersOptionUI,
@@ -1045,5 +1085,11 @@ export const OrdersOption = (props: OrdersOptionParams) => {
     ]
   };
 
-  return <OrderListGroups {...ordersProps} />;
+  return (<>
+    <OrderListGroups {...ordersProps} />
+    {props?.checkNotification && (
+      <NotificationSetting checkNotificationStatus={checkNotificationStatus}
+        setCheckNotificationStatus={setCheckNotificationStatus} />
+    )}
+  </>);
 };

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>
   );