ordering-ui-react-native 0.14.91 → 0.14.94

package/package.json

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

package/src/DeliveryApp.tsx

@@ -88,7 +88,8 @@ theme.images = {
     close: require('./assets/icons/close.png'),
     orderCreating: require('./assets/images/order-creating.png'),
     orderSuccess: require('./assets/images/order-success.png'),
-    newOrder: require('./assets/images/new-order.png')
+    newOrder: require('./assets/images/new-order.png'),
+    noNetwork: require('./assets/images/no-network.png')
   },
   order: {
     status0: require('./assets/images/status-0.png'),

package/src/providers/AlertProvider.tsx

@@ -28,7 +28,10 @@ const Alert = (props: Props) => {
       show={open}
       showProgress={false}
       title={title}
-      message={getTraduction(content?.[0], t)}
+      message={typeof content === 'string'
+        ? content
+        : getTraduction(content?.[0], t)
+      }
       closeOnTouchOutside={true}
       closeOnHardwareBackPress={false}
       showConfirmButton={true}

package/src/theme.json

@@ -93,7 +93,8 @@
       "close": "",
       "orderCreating": "",
       "orderSuccess": "",
-      "newOrder": ""
+      "newOrder": "",
+      "noNetwork": ""
     },
     "order": {
       "status0": "",

package/themes/business/index.tsx

@@ -10,6 +10,7 @@ import { LanguageSelector } from './src/components/LanguageSelector';
 import { LoginForm } from './src/components/LoginForm';
 import { LogoutButton } from './src/components/LogoutButton';
 import { MessagesOption } from './src/components/MessagesOption';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderMessage } from './src/components/OrderMessage';
 import { OrderDetailsBusiness } from './src/components/OrderDetails/Business';
@@ -77,6 +78,7 @@ export {
   MessagesOption,
   MapView,
   NewOrderNotification,
+  NetworkError,
   NotFoundSource,
   OrderDetailsBusiness,
   OrderDetailsDelivery,

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

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceWidth = Dimensions.get('screen').width
+
+  return (
+    <Container>
+      <OText
+        color={theme.colors.darkText}
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        color={theme.colors.darkText}
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceWidth - 80) * 0.9}
+          height={(deviceWidth - 80) * 0.8}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -575,3 +575,7 @@ export interface ReviewCustomerParams {
   handleChangeQualification?: any,
   handleSendCustomerReview?: any,
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/kiosk/index.tsx

@@ -14,6 +14,7 @@ import { LanguageSelector } from './src/components/LanguageSelector'
 import { LoginForm } from './src/components/LoginForm'
 import { LogoutPopup } from './src/components/LogoutPopup'
 import Navbar from './src/components/NavBar'
+import { NetworkError } from './src/components/NetworkError'
 import { NotFoundSource } from './src/components/NotFoundSource'
 import OptionCard from './src/components/OptionCard'
 import { OrderDetails } from './src/components/OrderDetails'
@@ -82,6 +83,7 @@ export {
   LoginForm,
   LogoutPopup,
   Navbar,
+  NetworkError,
   NotFoundSource,
   OptionCard,
   OrderDetails,

package/themes/kiosk/src/components/NetworkError/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceHeight = Dimensions.get('screen').height
+
+  return (
+    <Container>
+      <OText
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceHeight - 180) * 0.7}
+          height={(deviceHeight - 180) * 0.63}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45,
+            height: 44
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

package/themes/kiosk/src/components/NetworkError/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

package/themes/kiosk/src/types/index.d.ts

@@ -473,3 +473,7 @@ export interface Cart {
   total: number;
   clearInactivityTimeout: any;
 }
+
+export interface NoNetworkParams {
+  image?: any;
+}

package/themes/original/index.tsx

@@ -28,6 +28,7 @@ import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
 import { HelpOrder } from './src/components/HelpOrder';
+import { NetworkError } from './src/components/NetworkError';
 import { NotFoundSource } from './src/components/NotFoundSource';
 import { OrderTypeSelector } from './src/components/OrderTypeSelector';
 import { Wallets } from './src/components/Wallets';
@@ -35,6 +36,7 @@ import { PaymentOptionWallet } from './src/components/PaymentOptionWallet';
 import { ProductForm } from './src/components/ProductForm';
 import { UpsellingProducts } from './src/components/UpsellingProducts';
 import { UserVerification } from './src/components/UserVerification';
+import { BusinessListingSearch } from './src/components/BusinessListingSearch';
 
 import { Toast } from './src/components/shared/OToast';
 import {
@@ -74,7 +76,7 @@ export {
 	BusinessesListing,
 	BusinessProductsListing,
 	CartContent,
-  BusinessCart,
+	BusinessCart,
 	Checkout,
 	ForgotPasswordForm,
 	MomentOption,
@@ -93,13 +95,15 @@ export {
 	HelpAccountAndPayment,
 	HelpGuide,
 	HelpOrder,
+	NetworkError,
 	NotFoundSource,
 	OrderTypeSelector,
-  Wallets,
-  PaymentOptionWallet,
-  ProductForm,
-  UpsellingProducts,
-  UserVerification,
+	Wallets,
+	PaymentOptionWallet,
+	ProductForm,
+	UpsellingProducts,
+	UserVerification,
+	BusinessListingSearch,
 
 	// OComponents
 	Toast,

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

@@ -25,9 +25,14 @@ import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome5';
 import FastImage from 'react-native-fast-image'
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-	const { business, handleClick, navigation, isBusinessOpen } = props;
-	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
-		useUtils();
+	const { 
+		business, 
+		handleClick, 
+		navigation, 
+		isBusinessOpen, 
+		style
+	} = props;
+	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const theme = useTheme()
@@ -106,7 +111,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 
 	return (
-		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)}>
+		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
 			<BusinessHero>
 				<FastImage
 					style={{ height: 120 }}

package/themes/original/src/components/BusinessListingSearch/index.tsx

@@ -0,0 +1,469 @@
+import React, { useEffect, useState } from 'react'
+import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
+import { ScrollView, StyleSheet, TouchableOpacity, Platform, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { useTheme } from 'styled-components/native'
+import { OButton, OIcon, OModal, OText } from '../shared'
+import { SearchBar } from '../SearchBar';
+import { BusinessController } from '../BusinessController'
+import { NotFoundSource } from '../NotFoundSource'
+import { SingleProductCard } from '../SingleProductCard'
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import {
+  SearchWrapper,
+  WrapHeader,
+  ProductsList,
+  SingleBusinessSearch,
+  BusinessInfo,
+  BusinessInfoItem,
+  Metadata,
+  SingleBusinessContainer,
+  LoadMoreBusinessContainer,
+  ProgressContentWrapper,
+  ProgressBar,
+  TagsContainer,
+  SortContainer
+} from './styles'
+import FastImage from 'react-native-fast-image'
+import { convertHoursToMinutes } from '../../utils'
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import { BusinessSearchParams } from '../../types'
+
+export const BusinessListingSearchUI = (props : BusinessSearchParams) => {
+
+  const {
+    navigation,
+    businessesSearchList,
+    onBusinessClick,
+    handleChangeTermValue,
+    termValue,
+    paginationProps,
+    handleSearchbusinessAndProducts,
+    handleChangeFilters,
+    filters,
+    businessTypes,
+    setFilters
+  } = props
+
+  const theme = useTheme()
+  const [orderState] = useOrder()
+  const { top } = useSafeAreaInsets();
+  const [, t] = useLanguage()
+  const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
+
+  const [openFilters, setOpenFilters] = useState(false)
+  const noResults = (!businessesSearchList.loading && !businessesSearchList.lengthError && businessesSearchList?.businesses?.length === 0)
+  const maxDeliveryFeeOptions = [15, 25, 35, 'default']
+  // const maxProductPriceOptions = [5, 10, 15, 'default']
+  const maxDistanceOptions = [1000, 2000, 5000, 'default']
+  const maxTimeOptions = [5, 15, 30, 'default']
+  const sortItems = [
+    { text: t('PICKED_FOR_YOU', 'Picked for you (default)'), value: 'default' },
+    { text: t('DELIVERY_TIME', 'Delivery time'), value: 'delivery_time' },
+    { text: t('PICKUP_TIME', 'Pickup time'), value: 'pickup_type' }
+  ]
+
+  const styles = StyleSheet.create({
+    container: {
+      paddingHorizontal: 40,
+      width: '100%'
+    },
+    searchInput: {
+      fontSize: 10,
+    },
+    productsContainer: {
+      marginTop: 20
+    },
+    maxContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    },
+    businessTypesContainer: {
+      width: '100%',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      justifyContent: 'center'
+    },
+    categoryStyle: {
+      marginRight: 10,
+      marginTop: 10,
+      borderRadius: 50,
+      paddingHorizontal: 10,
+      paddingVertical: 4,
+      paddingLeft: 0,
+      paddingRight: 0,
+      height: 28,
+      borderWidth: 0
+    },
+    applyButton: {
+      paddingHorizontal: 40,
+      width: '100%',
+      marginTop: 20
+    }
+  });
+
+  const handleOpenfilters = () => {
+    setOpenFilters(true)
+  }
+
+  const handleCloseFilters = () => {
+    setFilters({ business_types: [], orderBy: 'default' })
+    setOpenFilters(false)
+  }
+
+  const handleChangeActiveBusinessType = (type: any) => {
+    if (type?.id === null) {
+      handleChangeFilters('business_types', [])
+      return
+    }
+    if (filters?.business_types?.includes(type?.id)) {
+      const arrayAux = filters?.business_types
+      const index = arrayAux?.indexOf(type?.id)
+      arrayAux.splice(index, 1)
+      handleChangeFilters('business_types', arrayAux)
+    } else {
+      handleChangeFilters('business_types', [...filters?.business_types, type?.id])
+    }
+  }
+
+  const handleApplyFilters = () => {
+    handleSearchbusinessAndProducts(true)
+    setOpenFilters(false)
+  }
+
+  useEffect(() => {
+    if (filters.business_types?.length === 0 && filters.orderBy === 'default' && Object.keys(filters)?.length === 2 && !openFilters) {
+      handleSearchbusinessAndProducts(true)
+    }
+  }, [filters, openFilters])
+
+  const MaxSectionItem = ({ title, options, filter }: any) => {
+    const parseValue = (option: number) => {
+      return filter === 'max_distance'
+        ? `${option / 1000} ${t('KM', 'Km')}`
+        : filter === 'max_eta'
+          ? `${option} ${t('MIN', 'min')}`
+          : parsePrice(option)
+    }
+    return (
+      <View style={{ marginBottom: 20 }}>
+        <OText weight='bold' mBottom={10} size={16}>
+          {title}
+        </OText>
+        <ProgressContentWrapper>
+          <ProgressBar style={{ width: `${((options.indexOf(filters?.[filter]) / 3) * 100) ?? 100}%` }} />
+        </ProgressContentWrapper>
+        <View style={styles.maxContainer}>
+          {options.map((option: any, i: number) => (
+            <TouchableOpacity
+              onPress={() => handleChangeFilters(filter, option)}
+              key={option}
+            >
+              <OText
+                size={12}
+                weight={filters?.[filter] === option || (option === 'default' && (filters?.[filter] === 'default' || !filters?.[filter])) ? 'bold' : '500'}
+              >
+                {option === 'default' ? `${parseValue(options[i - 1])}+` : parseValue(option)}
+              </OText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+    )
+  }
+
+  return (
+    <ScrollView style={styles.container}>
+      <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
+        <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', paddingVertical: 20 }}>
+          <OIcon src={theme.images.general.arrow_left} width={20} />
+        </TouchableOpacity>
+        <OText
+          size={20}
+          mBottom={15}
+          weight='bold'
+          style={{ marginTop: 10 }}
+        >
+          {t('SEARCH', 'Search')}
+        </OText>
+      </WrapHeader>
+      <SearchWrapper>
+        <SearchBar
+          lazyLoad
+          inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+          placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}
+          onSearch={(val: string) => handleChangeTermValue(val)}
+          value={termValue}
+          iconCustomRight={<AntDesignIcon name='filter' size={16} style={{ bottom: 2 }} onPress={() => handleOpenfilters()} />}
+        />
+
+      </SearchWrapper>
+      {
+        noResults && (
+          <View>
+            <NotFoundSource
+              content={t('NOT_FOUND_BUSINESSES', 'No businesses to delivery / pick up at this address, please change filters or change address.')}
+            />
+          </View>
+        )
+      }
+      <ScrollView horizontal>
+        {businessesSearchList.businesses?.length > 0 && businessesSearchList.businesses.map((business: any, i: number) => (
+          <BusinessController
+            key={business.id}
+            business={business}
+            isBusinessOpen={business.open}
+            handleCustomClick={() => onBusinessClick(business)}
+            orderType={orderState?.options?.type}
+            style={{ width: 320, marginRight: (businessesSearchList.loading || i !== businessesSearchList.businesses?.length - 1) ? 20 : 0 }}
+          />
+        ))}
+        {!businessesSearchList.loading && paginationProps?.totalPages && paginationProps?.currentPage < paginationProps?.totalPages && (
+          <LoadMoreBusinessContainer>
+            <OButton
+              bgColor='transparent'
+              borderColor={theme.colors.primary}
+              onClick={() => handleSearchbusinessAndProducts()}
+              text={t('LOAD_MORE_BUSINESS', 'Load more business')}
+              textStyle={{ color: theme.colors.primary }}
+            />
+          </LoadMoreBusinessContainer>
+        )}
+        {businessesSearchList.loading && (
+          <>
+            {[
+              ...Array(
+                paginationProps.nextPageItems
+                  ? paginationProps.nextPageItems
+                  : 3,
+              ).keys(),
+            ].map((item, i) => (
+              <Placeholder
+                Animation={Fade}
+                key={i}
+                style={{ width: 320, marginRight: 20, marginTop: 20 }}>
+                <View style={{ width: 320 }}>
+                  <PlaceholderLine
+                    height={155}
+                    style={{ marginBottom: 20, borderRadius: 25 }}
+                  />
+                  <View style={{ paddingHorizontal: 10 }}>
+                    <View
+                      style={{
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                      }}>
+                      <PlaceholderLine
+                        height={25}
+                        width={40}
+                        style={{ marginBottom: 10 }}
+                      />
+                      <PlaceholderLine
+                        height={25}
+                        width={20}
+                        style={{ marginBottom: 10 }}
+                      />
+                    </View>
+                    <PlaceholderLine
+                      height={20}
+                      width={30}
+                      style={{ marginBottom: 10 }}
+                    />
+                    <PlaceholderLine
+                      height={20}
+                      width={80}
+                      style={{ marginBottom: 0 }}
+                    />
+                  </View>
+                </View>
+              </Placeholder>
+            ))}
+          </>
+        )}
+      </ScrollView>
+      <ProductsList>
+        {businessesSearchList.businesses?.filter((business: any) => business?.categories?.length > 0).map((business: any) => (
+          <SingleBusinessSearch key={`card-${business?.id}`}>
+            <SingleBusinessContainer>
+              <BusinessInfo>
+                {(business?.logo || theme.images?.dummies?.businessLogo) && (
+                  <FastImage
+                    style={{ height: 48, width: 48 }}
+                    source={{
+                      uri: optimizeImage(business?.logo, 'h_120,c_limit'),
+                      priority: FastImage.priority.normal,
+                    }}
+                    resizeMode={FastImage.resizeMode.cover}
+                  />
+                )}
+              </BusinessInfo>
+              <BusinessInfoItem>
+                <OText size={12}>{business?.name}</OText>
+                <Metadata>
+                  {orderState?.options?.type === 1 && (
+                    <>
+                      <OText size={10}>{t('DELIVERY_FEE', 'Delivery fee')}{' '}</OText>
+                      <OText size={10} mRight={3}>
+                        {business && parsePrice(business?.delivery_price)}
+                      </OText>
+                    </>
+                  )}
+                  <OText size={10} mRight={3}>
+                    {convertHoursToMinutes(orderState?.options?.type === 1 ? business?.delivery_time : business?.pickup_time)}
+                  </OText>
+                  <OText size={10}>
+                    {parseDistance(business?.distance)}
+                  </OText>
+                </Metadata>
+              </BusinessInfoItem>
+              <OButton
+                onClick={() => onBusinessClick(business)}
+                textStyle={{ color: theme.colors.primary, fontSize: 10 }}
+                text={t('GO_TO_STORE', 'Go to store')}
+                bgColor='#F5F9FF'
+                borderColor='#fff'
+                style={{ borderRadius: 50, paddingLeft: 5, paddingRight: 5, height: 20 }}
+              />
+            </SingleBusinessContainer>
+            <ScrollView horizontal style={styles.productsContainer}>
+              {business?.categories?.map((category: any) => category?.products?.map((product: any, i: number) => (
+                <SingleProductCard
+                  key={product?.id}
+                  isSoldOut={(product.inventoried && !product.quantity)}
+                  product={product}
+                  businessId={business?.id}
+                  onProductClick={() => { }}
+                  productAddedToCartLength={0}
+                  style={{ width: 320, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}
+                />
+              )))}
+
+            </ScrollView>
+          </SingleBusinessSearch>
+        ))}
+        {businessesSearchList?.loading && (
+          <>
+            {[...Array(3).keys()].map(
+              (item, i) => (
+                <View key={`skeleton:${i}`} style={{ width: '100%', marginTop: 20 }}>
+                  <Placeholder key={i} style={{ paddingHorizontal: 5 }} Animation={Fade}>
+                    <View style={{ flexDirection: 'row' }}>
+                      <PlaceholderLine
+                        width={24}
+                        height={70}
+                        style={{ marginRight: 10, marginBottom: 10 }}
+                      />
+                      <Placeholder style={{ paddingVertical: 10 }}>
+                        <PlaceholderLine width={20} style={{ marginBottom: 25 }} />
+                        <PlaceholderLine width={60} />
+                      </Placeholder>
+                    </View>
+                  </Placeholder>
+                  <Placeholder style={{ paddingHorizontal: 5, bottom: 10 }} Animation={Fade}>
+                    <View style={{ flexDirection: 'row-reverse' }}>
+                      <PlaceholderLine
+                        width={24}
+                        height={70}
+                        style={{ marginRight: 10, marginBottom: 5 }}
+                      />
+                      <Placeholder style={{ paddingVertical: 10 }}>
+                        <PlaceholderLine width={60} height={10} />
+                        <PlaceholderLine width={50} height={10} />
+                        <PlaceholderLine width={70} height={10} />
+                      </Placeholder>
+                    </View>
+                  </Placeholder>
+                </View>
+              ),
+            )}
+          </>
+        )}
+      </ProductsList>
+      <OModal
+        open={openFilters}
+        onCancel={() => handleCloseFilters()}
+        onClose={() => handleCloseFilters()}
+      >
+        <ScrollView style={styles.container}>
+          <OText
+            size={20}
+            mBottom={15}
+            style={{ marginTop: 10 }}
+          >
+            {t('FILTER', 'Filter')}
+          </OText>
+          <SortContainer>
+            <OText weight='bold' mBottom={7} size={16}>
+              {t('SORT', 'Sort')}
+            </OText>
+            {sortItems?.map(item => (
+              <TouchableOpacity
+                key={item?.value}
+                onPress={() => handleChangeFilters('orderBy', item?.value)}
+                style={{ marginBottom: 7 }}
+              >
+                <OText 
+                  weight={filters?.orderBy?.includes(item?.value) ? 'bold' : '500'}
+                  mBottom={filters?.orderBy?.includes(item?.value) ? 5 : 0}
+                >
+                  {item?.text}  {(filters?.orderBy?.includes(item?.value)) && <>{filters?.orderBy?.includes('-') ? <AntDesignIcon name='caretup' /> : <AntDesignIcon name='caretdown' />}</>}
+                </OText>
+              </TouchableOpacity>
+            ))}
+          </SortContainer>
+          {orderState?.options?.type === 1 && (
+            <MaxSectionItem
+              title={t('MAX_DELIVERY_FEE', 'Max delivery fee')}
+              options={maxDeliveryFeeOptions}
+              filter='max_delivery_price'
+            />
+          )}
+          {[1, 2].includes(orderState?.options?.type) && (
+            <MaxSectionItem
+              title={orderState?.options?.type === 1 ? t('MAX_DELIVERY_TIME', 'Max delivery time') : t('MAX_PICKUP_TIME', 'Max pickup time')}
+              options={maxTimeOptions}
+              filter='max_eta'
+            />
+          )}
+          <MaxSectionItem
+            title={t('MAX_DISTANCE', 'Max distance')}
+            options={maxDistanceOptions}
+            filter='max_distance'
+          />
+          {businessTypes?.length > 0 && (
+            <TagsContainer>
+              <OText weight='bold' mBottom={7} size={16}>{t('BUSINESS_CATEGORIES', 'Business categories')}</OText>
+              <View style={styles.businessTypesContainer}>
+                {businessTypes.map((type: any, i: number) => type.enabled && (
+                  <OButton
+                    key={type?.id}
+                    bgColor={(filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? theme.colors.primary : theme.colors.backgroundGray200}
+                    onClick={() => handleChangeActiveBusinessType(type)}
+                    text={`${t(`BUSINESS_TYPE_${type.name.replace(/\s/g, '_').toUpperCase()}`, type.name)} ${filters?.business_types?.includes(type?.id) ? 'X' : ''}`}
+                    style={styles.categoryStyle}
+                    textStyle={{ fontSize: 10, color: (filters?.business_types?.includes(type?.id) || (type?.id === null && filters?.business_types?.length === 0)) ? '#fff' : theme.colors.textNormal }}
+                  />
+                ))}
+              </View>
+            </TagsContainer>
+          )}
+        </ScrollView>
+        <OButton
+          text={t('APPLY', 'Apply')}
+          parentStyle={styles.applyButton}
+          textStyle={{ color: '#fff' }}
+          onClick={() => handleApplyFilters()}
+        />
+      </OModal>
+    </ScrollView>
+  )
+}
+
+export const BusinessListingSearch = (props: BusinessSearchParams) => {
+  const BusinessListSearchProps = {
+    ...props,
+    UIComponent: BusinessListingSearchUI,
+    lazySearch: true
+  }
+  return <BusinessSearchList {...BusinessListSearchProps} />
+}

package/themes/original/src/components/BusinessListingSearch/styles.tsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components/native'
+
+export const WrapHeader = styled.View`
+  width: 100%;
+	padding-vertical: 20px;
+`
+
+export const SearchWrapper = styled.View`
+
+`
+
+export const ProductsList = styled.View`
+
+`
+
+export const SingleBusinessSearch = styled.View`
+  width: 100%;
+  margin: 20px 0;
+`
+
+export const BusinessInfo = styled.View`
+  width: 15%;
+  flex-direction: row;
+`
+
+export const BusinessLogo = styled.View`
+
+`
+
+export const BusinessInfoItem = styled.View`
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 12px;
+  margin-left: 10px;
+`
+
+export const Metadata = styled.View`
+  margin-top: 5px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`
+
+export const SingleBusinessContainer = styled.View`
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+export const LoadMoreBusinessContainer = styled.View`
+  align-items: center;
+  justify-content: center;
+  margin-left: 20px;
+`
+
+export const ProgressBar = styled.View`
+  height: 4px;
+  background: ${(props: any) => props.theme.colors.textNormal};
+`
+
+export const ProgressContentWrapper = styled.View`
+  height: 4px;
+  background: #F8F9FA;
+  margin-bottom: 10px;
+  flex: 1;
+`
+
+export const TagsContainer = styled.View`
+
+`
+
+export const SortContainer = styled.View`
+  margin-bottom: 10px;
+`

package/themes/original/src/components/BusinessTypeFilter/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
 	StyleSheet,
 	FlatList,
@@ -24,13 +24,24 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { typesState, currentTypeSelected, handleChangeBusinessType } = props;
+	const { 
+		typesState, 
+		currentTypeSelected, 
+		handleChangeBusinessType,
+		setBusinessTypes
+	} = props;
 
 	const [, t] = useLanguage();
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
+	useEffect(() => {
+		if(typesState?.types?.length > 0){
+		  setBusinessTypes && setBusinessTypes(typesState?.types)
+		}
+	  }, [typesState])
+
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity

package/themes/original/src/components/BusinessesListing/index.tsx

@@ -116,8 +116,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const [featuredBusiness, setFeaturedBusinesses] = useState(Array);
 	const [isFarAway, setIsFarAway] = useState(false)
+	const [businessTypes, setBusinessTypes] = useState(null)
 
-  const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
+	const isPreorderEnabled = (configs?.preorder_status_enabled?.value === '1' || configs?.preorder_status_enabled?.value === 'true') &&
 		Number(configs?.max_days_preorder?.value) > 0
 
 	const timerId = useRef<any>(false)
@@ -131,7 +132,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	// 	})
 	// ).current
 
-  const handleMomentClick = () => {
+	const handleMomentClick = () => {
 		if (isPreorderEnabled) {
 			navigation.navigate('MomentOption')
 		}
@@ -317,7 +318,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 								onCancel={() => handleChangeSearch('')}
 								placeholder={t('SEARCH', 'Search')}
 								height={26}
+								isDisabled={configs?.advanced_business_search_enabled?.value === '1' || !businessTypes}
 								inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+								onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
 							/>
 						)}
 
@@ -378,6 +381,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						businessTypes={props.businessTypes}
 						defaultBusinessType={props.defaultBusinessType}
 						handleChangeBusinessType={handleChangeBusinessType}
+						setBusinessTypes={setBusinessTypes}
 					/>
 				)}
 				{!businessesList.loading && businessesList.businesses.length === 0 && (

package/themes/original/src/components/NetworkError/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useLanguage } from 'ordering-components/native'
+import { Dimensions } from 'react-native'
+import RNRestart from 'react-native-restart'
+import { OText, OIcon, OButton } from '../shared'
+import { useTheme } from 'styled-components/native'
+import { NoNetworkParams } from '../../types'
+import {
+  Container,
+  ImageContainer
+} from './styles'
+
+export const NetworkError = (props: NoNetworkParams) => {
+  const {
+    image
+  } = props
+  const theme = useTheme()
+  const [, t] = useLanguage()
+
+  const noNetworkImage = image || theme.images.general.noNetwork
+  const deviceWidth = Dimensions.get('screen').width
+
+  return (
+    <Container>
+      <OText
+        color={theme.colors.textNormal}
+        size={20}
+        weight='700'
+        style={{ marginBottom: 14 }}
+      >
+        {t('MOBILE_NO_INTERNET', 'No internet connection')}
+      </OText>
+      <OText
+        color={theme.colors.textNormal}
+        size={14}
+      >
+        {t('NETWORK_OFFLINE_MESSAGE', 'Your connection appears to be off-line. Try to refresh the page')}
+      </OText>
+      <ImageContainer>
+        <OIcon
+          src={noNetworkImage}
+          width={(deviceWidth - 80) * 0.9}
+          height={(deviceWidth - 80) * 0.8}
+        />
+        <OButton
+          text={t('REFRESH', 'Refresh')}
+          bgColor={theme.colors.primary}
+          borderColor={theme.colors.primary}
+          style={{
+            borderRadius: 8,
+            marginTop: 45
+          }}
+          textStyle={{
+            color: theme.colors.white
+          }}
+          onClick={() => RNRestart.Restart()}
+        />
+      </ImageContainer>
+    </Container>
+  )
+}

package/themes/original/src/components/NetworkError/styles.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components/native'
+
+export const Container = styled.View`
+  flex: 1;
+  padding: 20px 40px;
+`
+export const ImageContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`

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

@@ -95,7 +95,7 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
 			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
 			{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
-      		{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
+			{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
 		]
 
 		const objectStatus = orderStatus.find((o) => o.key === status)
@@ -105,9 +105,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 
 	useFocusEffect(
 		React.useCallback(() => {
-		  loadOrders()
+			loadOrders()
 		}, [navigation])
-	  )
+	)
 
 	useEffect(() => {
 		const hasMore = pagination?.totalPages && pagination?.currentPage !== pagination?.totalPages
@@ -126,27 +126,11 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 		} else if (!preOrders) {
 			setOrdersLength && setOrdersLength({ ...ordersLength, previousOrdersLength: updateOrders?.length })
 		}
-	}, [orders?.length])
+	}, [orders, activeOrders])
 
 	return (
 		<>
-			<OptionTitle>
-				<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
-					{titleContent || (activeOrders
-						? t('ACTIVE', 'Active')
-						: preOrders
-							? t('PREORDERS', 'Preorders')
-							: t('PAST', 'Past'))}
-				</OText>
-			</OptionTitle>
-			{!(activeOrders && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) && !loading && orders.length === 0 && (
-				<NotFoundSource
-					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
-					image={imageFails}
-					conditioned
-				/>
-			)}
-			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && activeOrders && (
+			{!loading && ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0 && !activeOrders && (
 				<NoOrdersWrapper>
 					<OText size={14} numberOfLines={1}>
 						{t('YOU_DONT_HAVE_ORDERS', 'You don\'t have any orders')}
@@ -157,9 +141,32 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
 						textStyle={{ color: 'white', fontSize: 14 }}
 						style={{ borderRadius: 7.6, marginBottom: 10, marginTop: 10, height: 44, paddingLeft: 10, paddingRight: 10 }}
 					/>
-					
+
 				</NoOrdersWrapper>
 			)}
+			{(ordersLength.activeOrdersLength > 0 || ordersLength.previousOrdersLength > 0) && (
+				<>
+					<OptionTitle>
+						<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={10} >
+							{titleContent || (activeOrders
+								? t('ACTIVE', 'Active')
+								: preOrders
+									? t('PREORDERS', 'Preorders')
+									: t('PAST', 'Past'))}
+						</OText>
+					</OptionTitle>
+					{!(ordersLength.activeOrdersLength === 0 && ordersLength.previousOrdersLength === 0) &&
+						!loading &&
+						orders.filter((order: any) => orderStatus.includes(order.status)).length === 0 &&
+						(
+							<NotFoundSource
+								content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+								image={imageFails}
+								conditioned
+							/>
+						)}
+				</>
+			)}
 			{loading && (
 				<>
 					{!activeOrders ? (

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

@@ -7,4 +7,5 @@ export const OptionTitle = styled.View`
 export const NoOrdersWrapper = styled.View`
 	flex-direction: column;
 	align-items: center;
+	margin-top: 50px;
 `

package/themes/original/src/components/ProductForm/index.tsx

@@ -396,7 +396,7 @@ export const ProductOptionsUI = (props: any) => {
 													<FastImage
 														style={{ height: '100%', opacity: isSoldOut ? 0.5 : 1 }}
 														source={{
-															uri: optimizeImage(img, 'h_258,c_limit'),
+															uri: optimizeImage(img, 'h_1024,c_limit'),
 															priority: FastImage.priority.normal,
 														}}
 													/>

package/themes/original/src/components/SearchBar/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View, TouchableOpacity, ImageStore, Platform, TextInput } from 'react-native'
+import { StyleSheet, View, TouchableOpacity, ImageStore, Platform, TextInput, Pressable } from 'react-native'
 import { OInput, OButton } from '../shared'
 import { useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
@@ -17,7 +17,10 @@ export const SearchBar = (props: any) => {
 		noBorderShow,
 		borderStyle,
 		height,
-		inputStyle
+		inputStyle,
+		onPress,
+		isDisabled,
+		iconCustomRight
 	} = props
 
 	const theme = useTheme();
@@ -72,16 +75,19 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<View style={[styles.container, { height: height }]}>
+		<Pressable style={[styles.container, { height: height }]}>
 			<OInput
 				value={searchValue}
 				onChange={onChangeSearch}
 				style={styles.inputStyle}
 				placeholder={placeholder}
 				icon={theme.images.general.search}
+				isDisabled={isDisabled}
 				iconStyle={{ width: 12 }}
 				returnKeyType='done'
 				inputStyle={{padding: 0, paddingTop: Platform.OS == 'android' ? 2 : 0, ...inputStyle}}
+				onPress={() => onPress && onPress()}
+				iconCustomRight={iconCustomRight}
 			/>
 			{isCancelButtonShow && (
 				<OButton
@@ -105,6 +111,6 @@ export const SearchBar = (props: any) => {
 					/>
 				</TouchableOpacity>
 			)}
-		</View>
+		</Pressable>
 	)
 }

package/themes/original/src/components/SingleProductCard/index.tsx

@@ -13,7 +13,14 @@ import { OText, OIcon } from '../shared';
 import FastImage from 'react-native-fast-image'
 
 export const SingleProductCard = (props: SingleProductCardParams) => {
-	const { businessId, product, isSoldOut, onProductClick, productAddedToCartLength } = props;
+	const {
+		businessId,
+		product,
+		isSoldOut,
+		onProductClick,
+		productAddedToCartLength,
+		style
+	} = props;
 
 	const theme = useTheme();
 
@@ -102,6 +109,7 @@ export const SingleProductCard = (props: SingleProductCardParams) => {
 			style={[
 				styles.container,
 				(isSoldOut || maxProductQuantity <= 0) && styles.soldOutBackgroundStyle,
+				(style && { ...style }),
 			]}
 			onPress={() => onProductClick?.(product)}>
 			{productAddedToCartLength > 0 && (

package/themes/original/src/components/SingleProductCard/styles.tsx

@@ -30,4 +30,4 @@ export const QuantityContainer = styled.View`
 export const PricesContainer = styled.View`
   flex-direction: row;
   align-items: center;
-`
+`

package/themes/original/src/components/shared/OInput.tsx

@@ -38,6 +38,7 @@ interface Props extends TextInputProps {
 	forwardRef?: any;
 	inputStyle?: TextStyle;
 	wrapperRef?: any;
+	onPress?: any;
 }
 
 const Wrapper = styled.Pressable`
@@ -55,7 +56,7 @@ const Wrapper = styled.Pressable`
 const OInput = (props: Props): React.ReactElement => {
 	return (
 		<Wrapper
-			onPress={() => props.forwardRef?.current?.focus?.()}
+			onPress={() => {props.forwardRef?.current?.focus?.(); props.onPress && props.onPress()}}
 			style={{
 				backgroundColor: props.bgColor,
 				borderColor: props.borderColor,

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

@@ -151,6 +151,7 @@ export interface BusinessTypeFilterParams {
 	defaultBusinessType?: string | null;
 	images?: any
 	typesState?: any
+	setBusinessTypes?: any
 }
 export interface BusinessControllerParams {
 	key?: number;
@@ -161,7 +162,8 @@ export interface BusinessControllerParams {
 	isBusinessOpen?: boolean;
 	businessWillCloseSoonMinutes?: number
 	isBusinessClose?: number,
-	navigation?: any
+	navigation?: any,
+	style?: ViewStyle
 }
 export interface BusinessProductsListingParams {
 	navigation?: any;
@@ -229,7 +231,8 @@ export interface SingleProductCardParams {
 	product: any;
 	isSoldOut: boolean;
 	onProductClick: any;
-	productAddedToCartLength: number
+	productAddedToCartLength: number;
+	style?: ViewStyle
 }
 export interface BusinessInformationParams {
 	navigation?: any,
@@ -520,3 +523,22 @@ export interface MessageListingParams {
 	navigation: any;
 	franchiseId?: any;
 }
+
+export interface BusinessSearchParams { 
+	navigation: any,
+    businessesSearchList: any,
+    onBusinessClick: any,
+    handleChangeTermValue: (term: string) => void,
+    termValue: string,
+    paginationProps: any,
+    handleSearchbusinessAndProducts: (newFetch?: boolean) => void,
+    handleChangeFilters: (prop : string, value : any) => void,
+    filters: any,
+    businessTypes: Array<number>,
+    setFilters: (filters: any) => void,
+	lazySearch?: boolean
+}
+  
+export interface NoNetworkParams {
+	image?: any,
+}