npm - ordering-ui-react-native - Versions diffs - 0.16.47 → 0.16.50 - Mend

ordering-ui-react-native 0.16.47 → 0.16.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/package.json CHANGED Viewed

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

package/src/components/BusinessBasicInformation/index.tsx CHANGED Viewed

@@ -56,22 +56,14 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         }
         source={{ uri: header || optimizeImage(businessState?.business?.header, 'h_400,c_limit') }}
       >
-        <BusinessLogo>
-          {loading ? (
-            <View style={{ marginLeft: 20 }}>
-              <Placeholder Animation={Fade}>
-                <PlaceholderLine height={50} width={20} />
-              </Placeholder>
-            </View>
-          ) : (
-            !isBusinessInfoShow && (
-              <OIcon
-                url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
-                style={styles.businessLogo}
-              />
-            )
-          )}
-        </BusinessLogo>
+        {!isBusinessInfoShow && (
+          <BusinessLogo>
+            <OIcon
+              url={logo || optimizeImage(businessState?.business?.logo, 'h_300,c_limit')}
+              style={styles.businessLogo}
+            />
+          </BusinessLogo>
+        )}
       </BusinessHeader>
       <BusinessInfo
         style={styles.businessInfo}
@@ -117,7 +109,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
               <PlaceholderLine width={10} />
             </Placeholder>
           ) : (
-            <View style={{width: '75%'}}>
+            <View style={{ width: '75%' }}>
               <OText color={theme.colors.textSecondary}>{getBusinessType()}</OText>
             </View>
           )}
@@ -187,7 +179,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessInformation}
         onClose={() => setOpenBusinessInformation(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessInformation
@@ -199,7 +191,7 @@ export const BusinessBasicInformation = (props: BusinessBasicInformationParams)
         titleSectionStyle={styles.modalTitleSectionStyle}
         open={openBusinessReviews}
         onClose={() => setOpenBusinessReviews(false)}
-        styleCloseButton={{color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)'}}
+        styleCloseButton={{ color: theme.colors.white, backgroundColor: 'rgba(0,0,0,0.3)' }}
         isNotDecoration
       >
         <BusinessReviews

package/src/components/ReviewDriver/index.tsx CHANGED Viewed

@@ -218,7 +218,7 @@ const ReviewDriverUI = (props: ReviewDriverParams) => {
             <RatingBarContainer>
               <LinearGradient
                 start={{ x: 0.0, y: 0.0 }}
-                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0, y: 0 }}
+                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0.0001, y: 0 }}
                 locations={[.9999, .9999]}
                 colors={[theme.colors.primary, theme.colors.lightGray]}
                 style={styles.statusBar}

package/src/components/ReviewOrder/index.tsx CHANGED Viewed

@@ -106,7 +106,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
   }
   const qualificationList = [
-    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0.0001,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
     { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
     { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
     { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
@@ -238,7 +238,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
               <RatingBarContainer>
                 <LinearGradient
                   start={{ x: 0.0, y: 0.0 }}
-                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0.0, y: 0.0 }}
+                  end={{ x: qualificationList[stars.quality - 1]?.percent || 0.0001, y: 0.0 }}
                   locations={[.9999, .9999]}
                   colors={[theme.colors.primary, theme.colors.lightGray]}
                   style={styles.statusBar}

package/themes/business/src/components/PreviousOrders/index.tsx CHANGED Viewed

@@ -104,8 +104,8 @@ export const PreviousOrders = (props: any) => {
     const offset = 300
     const cdtToutc = moment(order?.delivery_datetime).add(offset, 'minutes').format('YYYY-MM-DD HH:mm:ss')
     const _delivery = order?.delivery_datetime_utc
-      ? parseDate(order?.delivery_datetime_utc)
-      : parseDate(cdtToutc)
+      ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
+      : parseDate(cdtToutc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
     const _eta = order?.eta_time
     const diffTimeAsSeconds = moment(_delivery, 'YYYY-MM-DD hh:mm A').add(_eta, 'minutes').diff(moment().utc(), 'seconds')
     return Math.ceil(diffTimeAsSeconds / 60)
@@ -178,9 +178,9 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                  {allowColumns?.slaBar && (
-                    <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
-                  )}
+                    {allowColumns?.slaBar && (
+                      <Timestatus style={{ backgroundColor: getStatusClassName(getDelayMinutes(order)) === 'in_time' ? '#00D27A' : getStatusClassName(getDelayMinutes(order)) === 'at_risk' ? '#FFC700' : getStatusClassName(getDelayMinutes(order)) === 'delayed' ? '#E63757' : '' }} />
+                    )}
                     {
                       !!order.business?.logo && (
                         <Logo style={styles.logo}>

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

@@ -1,13 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
 	useOrder,
 	useLanguage,
-	useConfig
+	useConfig,
+	useToast,
+	ToastType
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { InView } from 'react-native-intersection-observer'
 import { BusinessControllerParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
 import {
@@ -43,13 +46,16 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 		businessDeliveryTime,
 		businessPickupTime,
 		businessDistance,
-		handleFavoriteBusiness
+		handleFavoriteBusiness,
+		enableIntersection
 	} = props;
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] = useUtils();
+	const [, { showToast }] = useToast()
 	const [orderState] = useOrder();
 	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
+	const [isIntersectionObserver, setIsIntersectionObserver] = useState(!enableIntersection)
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -119,130 +125,140 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const handleBusinessClick = (selectedBusiness: any) => {
 		if (business?.open) handleClick && handleClick(selectedBusiness)
 		else {
-			navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+			if (configState?.configs?.preorder_status_enabled?.value === '1') {
+				navigation.navigate('BusinessPreorder', { business: selectedBusiness, handleBusinessClick: handleClick })
+				return
+			}
+			showToast(ToastType.Info, t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment'));
 		}
 	}
-  const handleChangeFavorite = () => {
-    handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
-  }
+	const handleChangeFavorite = () => {
+		handleFavoriteBusiness && handleFavoriteBusiness(!business?.favorite)
+	}
 	return (
-		<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
-			{business?.ribbon?.enabled && (
-				<RibbonBox
-					bgColor={business?.ribbon?.color}
-					isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-					isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-				>
-					<OText
-						size={10}
-						weight={'400'}
-						color={theme.colors.white}
-						numberOfLines={2}
-						ellipsizeMode='tail'
-						lineHeight={13}
+		<InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+			<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+				{business?.ribbon?.enabled && (
+					<RibbonBox
+						bgColor={business?.ribbon?.color}
+						isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+						isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 					>
-						{business?.ribbon?.text}
-					</OText>
-				</RibbonBox>
-			)}
-			<BusinessHero>
-				<FastImage
-					style={{ height: 120 }}
-					source={{
-						uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
-						priority: FastImage.priority.normal,
-					}}
-					resizeMode={FastImage.resizeMode.cover}
-				/>
-				{(businessFeatured ?? business?.featured) && (
-					<View style={styles.featured}>
-						<FontAwesomeIcon name="crown" size={26} color="gold" />
-					</View>
+						<OText
+							size={10}
+							weight={'400'}
+							color={theme.colors.white}
+							numberOfLines={2}
+							ellipsizeMode='tail'
+							lineHeight={13}
+						>
+							{business?.ribbon?.text}
+						</OText>
+					</RibbonBox>
 				)}
-				<BusinessState>
-					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
-						<View style={styles.businessStateView}>
-							<OText
-								color={theme.colors.textThird}
-								size={10}
-								style={styles.businessStateText}>
-								{t('PREORDER', 'PREORDER')}
-							</OText>
-						</View>
-					)}
-				</BusinessState>
-			</BusinessHero>
-			<BusinessContent>
-				<BusinessInfo>
-					<BusinessLogo style={styles.businessLogo}>
+				{isIntersectionObserver && (
+					<BusinessHero>
 						<FastImage
-							style={{ width: 56, height: 56 }}
+							style={{ height: 120 }}
 							source={{
-								uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+								uri: optimizeImage(businessHeader || business?.header, 'h_500,c_limit'),
 								priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}
 						/>
-					</BusinessLogo>
-					<ReviewAndFavorite>
-						{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-							<Reviews>
-								<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-								<OText size={10} style={{ lineHeight: 15 }}>
-									{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-								</OText>
-							</Reviews>
+						{(businessFeatured ?? business?.featured) && (
+							<View style={styles.featured}>
+								<FontAwesomeIcon name="crown" size={26} color="gold" />
+							</View>
 						)}
-						<TouchableOpacity
-							onPress={handleChangeFavorite}
-						>
-							<IconAntDesign
-								name={business?.favorite ? 'heart' : 'hearto'}
-								color={theme.colors.danger5}
-								size={18}
-							/>
-						</TouchableOpacity>
-					</ReviewAndFavorite>
-				</BusinessInfo>
-				<OText
-					size={12}
-					style={{ lineHeight: 18, marginBottom: 6 }}
-					weight={'500'}>
-					{business?.name}
-				</OText>
-				<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-					{business?.address}
-				</OText>
-				{/* <BusinessCategory>
+						<BusinessState>
+							{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
+								<View style={styles.businessStateView}>
+									<OText
+										color={theme.colors.textThird}
+										size={10}
+										style={styles.businessStateText}>
+										{t('PREORDER', 'PREORDER')}
+									</OText>
+								</View>
+							)}
+						</BusinessState>
+					</BusinessHero>
+				)}
+				<BusinessContent>
+					<BusinessInfo>
+						{isIntersectionObserver && (
+							<BusinessLogo style={styles.businessLogo}>
+								<FastImage
+									style={{ width: 56, height: 56 }}
+									source={{
+										uri: optimizeImage(businessLogo || business?.logo, 'h_150,c_limit'),
+										priority: FastImage.priority.normal,
+									}}
+									resizeMode={FastImage.resizeMode.cover}
+								/>
+							</BusinessLogo>
+						)}
+						<ReviewAndFavorite>
+							{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+								<Reviews>
+									<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+									<OText size={10} style={{ lineHeight: 15 }}>
+										{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+									</OText>
+								</Reviews>
+							)}
+							<TouchableOpacity
+								onPress={handleChangeFavorite}
+							>
+								<IconAntDesign
+									name={business?.favorite ? 'heart' : 'hearto'}
+									color={theme.colors.danger5}
+									size={18}
+								/>
+							</TouchableOpacity>
+						</ReviewAndFavorite>
+					</BusinessInfo>
+					<OText
+						size={12}
+						style={{ lineHeight: 18, marginBottom: 6 }}
+						weight={'500'}>
+						{business?.name}
+					</OText>
+					<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+						{business?.address}
+					</OText>
+					{/* <BusinessCategory>
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
-				<Metadata>
-					{!isBusinessOpen ? (
-						<View style={styles.closed}>
-							<OText size={10} color={theme.colors.red}>
-								{t('CLOSED', 'Closed')}
-							</OText>
-						</View>
-					) : (
-						<View style={styles.bullet}>
-							{orderState?.options?.type === 1 && (
-								<OText size={10} color={theme.colors.textSecondary}>
-									{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+					<Metadata>
+						{!isBusinessOpen ? (
+							<View style={styles.closed}>
+								<OText size={10} color={theme.colors.red}>
+									{t('CLOSED', 'Closed')}
 								</OText>
-							)}
-							<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-								orderState?.options?.type === 1
-									? (businessDeliveryTime ?? business?.delivery_time)
-									: (businessPickupTime ?? business?.pickup_time),
-							)} \u2022 `}</OText>
-							<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
-						</View>
-					)}
-				</Metadata>
-			</BusinessContent>
-		</Card>
+							</View>
+						) : (
+							<View style={styles.bullet}>
+								{orderState?.options?.type === 1 && (
+									<OText size={10} color={theme.colors.textSecondary}>
+										{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+									</OText>
+								)}
+								<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+									orderState?.options?.type === 1
+										? (businessDeliveryTime ?? business?.delivery_time)
+										: (businessPickupTime ?? business?.pickup_time),
+								)} \u2022 `}</OText>
+								<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+							</View>
+						)}
+					</Metadata>
+				</BusinessContent>
+			</Card>
+		</InView>
 	);
 };

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useLanguage, BusinessSearchList, useOrder, useUtils } from 'ordering-components/native'
+import { useLanguage, BusinessSearchList, useOrder, useUtils, showToast, ToastType } from 'ordering-components/native'
 import { ScrollView, StyleSheet, TouchableOpacity, Platform, View, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from 'styled-components/native'
@@ -183,6 +183,30 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     setOpenFilters(false)
   }
+  const isInteger = (val: any) => Number.isInteger(Number(val)) && !!val
+  const onProductClick = (business: any, categoryId: any, productId: any) => {
+    if (!isInteger(business?.id) ||
+      !isInteger(categoryId) ||
+      !isInteger(productId) ||
+      !business.slug || !business.header || !business.logo) {
+      showToast(ToastType.error, t('NOT_AVAILABLE', 'Not Available'))
+      return
+    }
+    navigation.navigate('ProductDetails', {
+      isRedirect: 'business',
+      businessId: business?.id,
+      categoryId: categoryId,
+      productId: productId,
+      business: {
+        store: business.slug,
+        header: business.header,
+        logo: business.logo,
+      }
+    })
+  }
   useEffect(() => {
     if (filters.business_types?.length === 0 && filters.orderBy === 'default' && Object.keys(filters)?.length === 2 && !openFilters) {
       handleSearchbusinessAndProducts(true)
@@ -409,7 +433,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
                   isSoldOut={(product.inventoried && !product.quantity)}
                   product={product}
                   businessId={business?.id}
-                  onProductClick={() => { }}
+                  onProductClick={(product: any) => onProductClick(business, category?.id, product?.id)}
                   productAddedToCartLength={0}
                   handleUpdateProducts={(productId: number, changes: any) => handleUpdateProducts(productId, category?.id, business?.id, changes)}
                   style={{ width: screenWidth - 80, marginRight: i === category?.products?.length - 1 ? 0 : 20 }}

package/themes/original/src/components/BusinessProductsList/index.tsx CHANGED Viewed

@@ -239,6 +239,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
+                      enableIntersection
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}

package/themes/original/src/components/BusinessProductsListing/index.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -365,7 +366,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 					{!loading && business?.id && (
-						<>
+						<IOScrollView rootMargin={{ top: 0, bottom: 0 }}>
 							<WrapContent
 								onLayout={(event: any) => setProductListLayout(event.nativeEvent.layout)}
 							>
@@ -396,7 +397,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 									handleUpdateProducts={handleUpdateProducts}
 								/>
 							</WrapContent>
-						</>
+						</IOScrollView>
 					)}
 					{loading && !error && (
 						<>
@@ -421,6 +422,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 						</>
 					)}
 				</BusinessProductsListingContainer>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 					<FloatingButton
 						btnText={

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
+import { IOScrollView } from 'react-native-intersection-observer'
 import Geolocation from '@react-native-community/geolocation'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
@@ -32,7 +33,7 @@ import {
 	FeaturedWrapper,
 	OrderProgressWrapper,
 	FarAwayMessage,
-  SearchBarWrapper,
+	SearchBarWrapper,
 	MomentWrapper,
 	FilterWrapper,
 	ServiceWrapper,
@@ -70,8 +71,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		isGuestUser,
 		handleUpdateBusinessList,
 		priceLevelSelected,
-    handleChangePriceLevel,
-    businessTypeSelected
+		handleChangePriceLevel,
+		businessTypeSelected
 	} = props;
 	const theme = useTheme();
 	const isFocused = useIsFocused();
@@ -327,22 +328,23 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 							/>
 						</WrapMomentOption>
 						{!businessId && (
-              <SearchBarWrapper>
-                <SearchBar
-                  onSearch={handleChangeSearch}
-                  searchValue={searchValue}
-                  lazyLoad
-                  isCancelXButtonShow={!!searchValue}
-                  borderStyle={styles.borderStyle}
-                  onCancel={() => handleChangeSearch('')}
-                  placeholder={t('SEARCH', 'Search')}
-                  height={80}
-                  isAppointment
-                  isDisabled={!businessTypes}
-                  inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
-                  onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-                />
-              </SearchBarWrapper>
+							<SearchBarWrapper>
+								<SearchBar
+									onSearch={handleChangeSearch}
+									searchValue={searchValue}
+									lazyLoad
+									isCancelXButtonShow={!!searchValue}
+									borderStyle={styles.borderStyle}
+									onCancel={() => handleChangeSearch('')}
+									placeholder={t('SEARCH', 'Search')}
+									height={80}
+									isAppointment
+									isDisabled={!businessTypes || configs?.advanced_business_search_enabled?.value === '1'}
+									inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
+									onPress={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes }) }}
+									onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
+								/>
+							</SearchBarWrapper>
 						)}
 					</View>
 				</OrderControlContainer>
@@ -459,29 +461,32 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				{businessesList.businesses?.map(
-					(business: any, i: number) => (
-						<BusinessController
-							key={`${business.id}_` + i}
-							business={business}
-							isBusinessOpen={business.open}
-							handleCustomClick={handleBusinessClick}
-							orderType={orderState?.options?.type}
-							navigation={navigation}
-							businessHeader={business?.header}
-							businessFeatured={business?.featured}
-							businessLogo={business?.logo}
-							businessReviews={business?.reviews}
-							businessDeliveryPrice={business?.delivery_price}
-							businessDeliveryTime={business?.delivery_time}
-							businessPickupTime={business?.pickup_time}
-							businessDistance={business?.distance}
-							handleUpdateBusinessList={handleUpdateBusinessList}
-							favoriteIds={favoriteIds}
-							setFavoriteIds={setFavoriteIds}
-						/>
-					)
-				)}
+				<IOScrollView>
+					{businessesList.businesses?.map(
+						(business: any, i: number) => (
+							<BusinessController
+								key={`${business.id}_` + i}
+								enableIntersection
+								business={business}
+								isBusinessOpen={business.open}
+								handleCustomClick={handleBusinessClick}
+								orderType={orderState?.options?.type}
+								navigation={navigation}
+								businessHeader={business?.header}
+								businessFeatured={business?.featured}
+								businessLogo={business?.logo}
+								businessReviews={business?.reviews}
+								businessDeliveryPrice={business?.delivery_price}
+								businessDeliveryTime={business?.delivery_time}
+								businessPickupTime={business?.pickup_time}
+								businessDistance={business?.distance}
+								handleUpdateBusinessList={handleUpdateBusinessList}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					)}
+				</IOScrollView>
 				{businessesList.loading && (
 					<>
 						{[