ordering-ui-react-native 0.16.68 → 0.16.69-release

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

@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
+import React, { useState, useCallback } from 'react'
 
-import { Platform, StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View, TouchableOpacity } from 'react-native';
 
 import { OButton, OText, OLink, OModal } from '../shared'
 import {
@@ -44,6 +44,9 @@ export const OrderContentComponent = (props: OrderContent) => {
   const [{ configs }] = useConfig();
   const [openReviewModal, setOpenReviewModal] = useState(false)
 
+  const [isReadMore, setIsReadMore] = useState(false)
+  const [lengthMore, setLengthMore] = useState(false)
+
   const pastOrderStatuses = [1, 2, 5, 6, 10, 11, 12, 16, 17]
 
   const walletName: any = {
@@ -91,6 +94,14 @@ export const OrderContentComponent = (props: OrderContent) => {
     return order?.taxes?.filter((tax: any) => tax?.type === 1)?.reduce((carry: number, tax: any) => carry + (tax?.summary?.tax_after_discount ?? tax?.summary?.tax), 0)
   }
 
+  const containsOnlyNumbers = (str: string) => {
+    return /^\d+$/.test(str);
+  }
+
+  const onTextLayout = useCallback((e: any) => {
+    setLengthMore(e.nativeEvent.lines.length >= 3); //to check the text is more than 2 lines or not
+  },[]);
+
   return (
     <OrderContent isOrderGroup={isOrderGroup} lastOrder={lastOrder}>
       {isOrderGroup && (
@@ -148,7 +159,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.cellphone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.cellphone : 'invalid'}`}
                   shorcut={`${order?.business?.cellphone}`}
                   TextStyle={styles.textLink}
                 />
@@ -159,7 +170,7 @@ export const OrderContentComponent = (props: OrderContent) => {
               <View style={styles.linkWithIcons}>
                 <OLink
                   PressStyle={styles.linkWithIcons}
-                  url={`tel:${order?.business?.phone}`}
+                  url={`tel:${containsOnlyNumbers(order?.business?.cellphone) ? order?.business?.phone : 'invalid'}`}
                   shorcut={order?.business?.phone}
                   TextStyle={styles.textLink}
                 />
@@ -176,6 +187,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                 ios: `maps:0,0?q=${order?.business?.address}`,
                 android: `geo:0,0?q=${order?.business?.address}`,
               })}
+              numberOfLines={2}
               shorcut={order?.business?.address}
               TextStyle={styles.textLink}
             />
@@ -274,7 +286,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
+              url={`tel:${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${containsOnlyNumbers(order?.customer?.cellphone) ? order?.customer?.cellphone : 'invalid'}`}
               shorcut={`${!!order?.customer?.country_phone_code ? '+' + order?.customer?.country_phone_code : ''} ${order?.customer?.cellphone}`}
               TextStyle={styles.textLink}
             />
@@ -285,7 +297,7 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={styles.linkWithIcons}>
             <OLink
               PressStyle={styles.linkWithIcons}
-              url={`tel:${order?.customer?.phone}`}
+              url={`tel:${containsOnlyNumbers(order?.customer?.phone) ? order?.customer?.phone : 'invalid'}`}
               shorcut={order?.customer?.phone}
               TextStyle={styles.textLink}
             />
@@ -293,17 +305,26 @@ export const OrderContentComponent = (props: OrderContent) => {
         )}
 
         {!!order?.customer?.address && (
-          <View style={styles.linkWithIcons}>
-            <OLink
-              PressStyle={styles.linkWithIcons}
-              url={Platform.select({
-                ios: `maps:0,0?q=${order?.customer?.address}`,
-                android: `geo:0,0?q=${order?.customer?.address}`,
-              })}
-              shorcut={order?.customer?.address}
-              TextStyle={styles.textLink}
-            />
-          </View>
+          <>
+            <View style={styles.linkWithIcons}>
+              <OLink
+                PressStyle={{ ...styles.linkWithIcons, marginBottom: 0 }}
+                url={Platform.select({
+                  ios: `maps:0,0?q=${order?.customer?.address}`,
+                  android: `geo:0,0?q=${order?.customer?.address}`,
+                })}
+                onTextLayout={onTextLayout}
+                numberOfLines={isReadMore ? 20 : 2}
+                shorcut={order?.customer?.address}
+                TextStyle={styles.textLink}
+              />
+            </View>
+            {lengthMore && (
+              <TouchableOpacity onPress={() => setIsReadMore(!isReadMore)}>
+                <OText size={12} color={theme.colors.statusOrderBlue}>{isReadMore ? t('SHOW_LESS', 'Show less') : t('READ_MORE', 'Read more')}</OText>
+              </TouchableOpacity>
+            )}
+          </>
         )}
 
         {!!order?.customer?.internal_number && (
@@ -333,13 +354,18 @@ export const OrderContentComponent = (props: OrderContent) => {
           <View style={{ marginTop: 10 }}>
             {order?.delivery_option !== undefined && order?.delivery_type === 1 && (
               <OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {!!order?.comment && (
-              <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 5 }}>
-                {order?.comment}
-              </OText>
+              <>
+                <OText weight='500' style={{ marginBottom: 5 }}>
+                  {t('ORDER_COMMENT', 'Order Comment')}
+                </OText>
+                <OText style={{ fontStyle: 'italic', opacity: 0.6, marginBottom: 20 }}>
+                  {order?.comment}
+                </OText>
+              </>
             )}
           </View>
         )}
@@ -364,6 +390,7 @@ export const OrderContentComponent = (props: OrderContent) => {
             <ProductItemAccordion
               key={product?.id || i}
               product={product}
+              currency={order?.currency}
             />
           ))}
       </OrderProducts>
@@ -372,7 +399,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 && (
@@ -385,7 +412,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>
         )}
         {
@@ -393,13 +420,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -407,9 +434,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>
         )}
@@ -419,7 +446,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>
         )}
@@ -430,7 +457,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>
           )
         }
@@ -439,11 +466,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={tax.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {tax.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  {t(tax?.name?.toUpperCase()?.replace(/ /g, '_'), tax?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
                   {`(${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>
           ))
         }
@@ -452,11 +479,11 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={fee.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
-                  ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
+                  {t(fee?.name?.toUpperCase()?.replace(/ /g, '_'), fee?.name) || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
+                  ({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>
           ))
         }
@@ -465,13 +492,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -483,7 +510,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>
           )
@@ -493,13 +520,13 @@ export const OrderContentComponent = (props: OrderContent) => {
             <Table key={offer.id}>
               <OSRow>
                 <OText mBottom={4}>
-                  {offer.name}
+                  {t(offer.name?.toUpperCase()?.replace(/ /g, '_'), offer.name)}
                   {offer.rate_type === 1 && (
                     <OText>{`(${verifyDecimals(offer?.rate, parsePrice)}%)`}</OText>
                   )}
                 </OText>
               </OSRow>
-              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
+              <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency })}</OText>
             </Table>
           ))
         }
@@ -514,7 +541,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>
         )}
 
@@ -528,7 +555,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>
@@ -562,7 +589,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     <OText>
                       {event?.wallet_event
                         ? walletName[event?.wallet_event?.wallet?.type]?.name
-                        : event?.paymethod?.name}
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)}
                     </OText>
                     {event?.data?.charge_id && (
                       <OText>
@@ -571,7 +598,7 @@ export const OrderContentComponent = (props: OrderContent) => {
                     )}
                   </View>
                   <OText>
-                    -{parsePrice(event.amount)}
+                    -{parsePrice(event.amount, { currency: order?.currency })}
                   </OText>
                 </View>
               ))}

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

@@ -271,7 +271,7 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
             {order?.delivery_option && (
               <OText size={13}>
                 <OText size={13} weight='bold'>{`${t('DELIVERY_PREFERENCE', 'Delivery Preference')}: `}</OText>
-                {order?.delivery_option?.name}
+                {t(order?.delivery_option?.name?.toUpperCase()?.replace(/ /g, '_'), order?.delivery_option?.name)}
               </OText>
             )}
             {order?.payment_events?.length > 0 && (
@@ -286,8 +286,8 @@ export const OrderHeaderComponent = (props: OrderHeader) => {
                         ? `${walletName[event?.wallet_event?.wallet?.type]?.name} - `
                         : walletName[event?.wallet_event?.wallet?.type]?.name
                       : idx < order?.payment_events?.length - 1
-                        ? `${event?.paymethod?.name} - `
-                        : event?.paymethod?.name
+                        ? `${t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)} - `
+                        : t(event?.paymethod?.name?.toUpperCase()?.replace(/ /g, '_'), event?.paymethod?.name)
                   })}
                 </OText>
               </View>

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

@@ -1,10 +1,11 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Linking, Platform, TextInput } from 'react-native';
-import { useLanguage, useUtils, useToast, ToastType, OrderListGroups, useConfig } from 'ordering-components/native';
+import { View, Pressable, StyleSheet, ScrollView, RefreshControl, Platform } from 'react-native';
+import { useLanguage, useUtils, useToast, OrderListGroups, useConfig } from 'ordering-components/native';
 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'
@@ -19,7 +20,6 @@ import {
   IconWrapper,
   ModalContainer,
   ModalTitle,
-  FilterBtnWrapper,
   TabPressable,
   OrderStatus,
   SlaOption,
@@ -33,41 +33,17 @@ import {
   ItemContent,
   TimerInputWrapper,
   OverLine,
-  Actions
+  InputContainer
 } from './styles';
 import { PreviousOrders } from '../PreviousOrders';
 import { OrdersOptionParams } from '../../types';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
-import GestureRecognizer from 'react-native-swipe-gestures';
-import ODropDown from '../shared/ODropDown';
-import { OrdersOptionStatus } from '../OrdersOptionStatus'
 import { OrdersOptionCity } from '../OrdersOptionCity';
 import { OrdersOptionBusiness } from '../OrdersOptionBusiness';
 import { OrdersOptionDelivery } from '../OrdersOptionDelivery';
 import { OrdersOptionPaymethod } from '../OrdersOptionPaymethod';
 import { OrdersOptionDriver } from '../OrdersOptionDriver';
 import { OrdersOptionDate } from '../OrdersOptionDate';
-
-const tabsList: any = {
-  pending: 1,
-  inProgress: 2,
-  completed: 3,
-  cancelled: 4
-};
-
-const tabsListText: any = {
-  1: 'pending',
-  2: 'inProgress',
-  3: 'completed',
-  4: 'cancelled'
-};
-
-const swipeConfig = {
-  velocityThreshold: 0.3,
-  directionalOffsetThreshold: 80
-};
-
 const { useDeviceOrientation, PORTRAIT } = DeviceOrientationMethods
 
 const OrdersOptionUI = (props: OrdersOptionParams) => {
@@ -79,10 +55,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     ordersGroup,
     setOrdersGroup,
     orderStatus,
+    ordersFormatted,
     loadOrders,
     loadMoreOrders,
     onNavigationRedirect,
-    filtered,
     onFiltered,
     handleClickOrder,
     isBusinessApp,
@@ -90,7 +66,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     logisticOrders,
     loadLogisticOrders,
     isLogisticActivated,
-    isAlsea
+    isAlsea,
+    handleChangeOrderStatus,
+    handleSendCustomerReview
   } = props;
 
   const defaultSearchList = {
@@ -120,10 +98,10 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   const [slaSettingTime, setSlaSettingTime] = useState(6000)
   const [currentDeliveryType, setCurrentDeliveryType] = useState('Delivery')
   const [search, setSearch] = useState(defaultSearchList)
-  const [selectedTabStatus, setSelectedTabStatus] = useState([])
+  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
@@ -344,26 +322,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
     })
   }
 
-  const onSwipeLeft = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab >= 4 ? null : currentTab + 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
-  const onSwipeRight = () => {
-    let currentTab = tabsList[currentTabSelected]
-    currentTab = currentTab <= 1 ? null : currentTab - 1
-
-    if (!currentTab) return
-
-    const nextTab = tabsListText[currentTab]
-    nextTab && setCurrentTabSelected(nextTab)
-  }
-
   const calculateDate = (type: any, from: any, to: any) => {
     switch (type) {
       case 'today':
@@ -403,13 +361,15 @@ 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 });
+    setTags({ values: [] })
   }, [currentTabSelected])
 
   useEffect(() => {
@@ -417,12 +377,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
   }, [])
 
   return (
-    // <GestureRecognizer
-    //   onSwipeLeft={onSwipeLeft}
-    //   onSwipeRight={onSwipeRight}
-    //   config={swipeConfig}
-    //   style={{ flex: 1 }}
-    // >
     <>
       <View style={styles.header}>
         <OText style={styles.title}>{t('MY_ORDERS', 'My orders')}</OText>
@@ -631,12 +585,18 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             currentTabSelected !== 'logisticOrders' &&
             (
               <PreviousOrders
-                orders={currentOrdersGroup?.orders}
+                orders={ordersFormatted}
+                navigation={props.navigation}
                 onNavigationRedirect={onNavigationRedirect}
                 getOrderStatus={getOrderStatus}
                 handleClickOrder={handleClickOrder}
                 slaSettingTime={slaSettingTime}
                 currentTabSelected={currentTabSelected}
+                appTitle={props.orderDetailsProps?.appTitle}
+                actions={props.orderDetailsProps?.actions}
+                orderTitle={props.orderDetailsProps?.orderTitle}
+                handleChangeOrderStatus={handleChangeOrderStatus}
+                handleSendCustomerReview={handleSendCustomerReview}
               />
             )}
           {!logisticOrders?.error?.length &&
@@ -726,7 +686,6 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
             )}
         </ScrollView>
       </View>
-      {/* </GestureRecognizer> */}
 
       {isBusinessApp && (
         <NewOrderNotification isBusinessApp={isBusinessApp} />
@@ -754,22 +713,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 +748,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 +780,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 && (
@@ -849,7 +839,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
                   </ScrollView>
                 </FiltersTab>
                 <DeliveryStatusWrapper>
-                  {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item, i) => (
+                  {selectedTabStatus && selectedTabStatus.length > 0 && selectedTabStatus.map((item: any, i: number) => (
                     <StatusBlock
                       key={i}
                       item={item}

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, business: '' })
+  }
+
+  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>
   );